/* login.yotta.bot (yotta-mono #258 Step 7). The color tokens and chrome
   variables are the other portals' (src/yotta-admin/frontend/styles.css), so
   the sign-in screen reads as the same product. Layout lives in classes
   rather than inline styles because it changes at phone width. Under the
   page's Content-Security-Policy no stylesheet may come from elsewhere and no
   <style> element may be injected; React's style props are fine (they are
   set through the DOM, not as inline CSS). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* The space after a scrolling page's last card: the shared tokens' --scroll-end
     (src/common/frontend/styles/tokens.css; page.test.js holds them equal). */
  --scroll-end:80px;
  /* The space between tabs and what they show: the shared tokens' --tabs-gap
     (page.test.js holds them equal), Identity's and Boo's too. */
  --tabs-gap:20px;
  --sc-green:#7cbd3c; --sc-yellow:#f2c840; --sc-orange:#e07235; --sc-red:#d13644; --sc-magenta:#86347c;
  --sc-blue:#3d8bdc;
  --bg:#fbf6e4; --bg2:#efead9; --bg3:#e3decd;
  --surface:#efead9; --surface2:#e3decd;
  /* A highlight lighter than the page (owner, 2026-10-28: in light mode a
     darker one "just looks dirty"); dark mode lifts with --surface2. */
  --lift:#fdf9ee;
  /* A highlighted row inside a card: the page's lighter background
     (Compare's row, a picked row in Security). */
  --row-pick:var(--bg);
  /* Compare's card and Security's cards in light mode: the lighter colour of
     Plans' highlight, a highlighted row in them the cream page colour (owner,
     2026-10-28). */
  --card-lift:var(--lift);
  /* Labels and Filters: cream, and the dropdowns Actions, Columns, Labels and
     Filters open too (owner, 2026-10-28). */
  --tool:transparent; --tool-menu:var(--bg);
  /* Actions, Columns and the round refresh take the colour of the card
     they're on, and turn cream under the pointer or while open (owner,
     2026-10-29). */
  --table-tool:transparent; --table-tool-on:transparent;
  /* Light mode's tiles are the page's light background (owner, 2026-10-28),
     their icon's box the card's colour so it still shows. */
  --tile:var(--bg); --tile-icon:var(--surface);
  /* The header's theme button, initials circle and account menu in that
     lighter colour (owner, 2026-10-28). */
  --head-avatar:var(--lift); --head-menu:var(--lift);
  /* Every dialog is the cream page colour (owner, 2026-10-28), what lifts in
     one the lighter --lift, and what sits in a dialog or a cream dropdown (a
     field, the Apps dialog's roles, Labels' search) that lighter colour too,
     so it still shows on the cream (--well). */
  --dialog:var(--bg); --well:var(--lift);
  /* Light mode's Downgrade (owner, 2026-10-28): dark with light words, its
     pill (and Cancel's) and the Downgrade Plan dialog's button; green pills
     take white words. */
  --pill:#3b322c; --pill-ink:#fbf6e4;
  --shade:#3b322c; --shade-line:#3b322c; --shade-ink:#fbf6e4;
  --go-ink:#ffffff;
  --border:rgba(35,26,21,0.12); --border-strong:rgba(35,26,21,0.25);
  --text:#231a15; --text2:#5f574f; --text3:#8f887d;
  --accent:#d13644;
  --hbg:#fbf6e4; --htxt:#231a15; --chrome-rgb:35,26,21;
}
[data-theme="dark"] {
  --bg:#231a15; --bg2:#2f2621; --bg3:#3b322c;
  --surface:#2f2621; --surface2:#3b322c;
  --lift:var(--surface2); --row-pick:var(--surface2); --card-lift:var(--surface); --tool:transparent; --tool-menu:var(--surface);
  --table-tool:transparent; --table-tool-on:transparent;
  /* Dark mode's tiles are the page's dark background too (owner, 2026-10-28). */
  --tile:var(--bg); --tile-icon:var(--surface);
  --head-avatar:rgba(251,246,228,0.12); --head-menu:var(--surface);
  --dialog:var(--surface); --well:var(--bg);
  /* Dark mode's Downgrade the other way round (owner, 2026-10-28): light with
     dark words, its pill (and Cancel's) and the dialog's button. */
  --pill:#e3decd; --pill-ink:#231a15;
  --shade:#e3decd; --shade-line:#e3decd; --shade-ink:#231a15;
  --go-ink:#231a15;
  --border:rgba(251,246,228,0.10); --border-strong:rgba(251,246,228,0.22);
  --text:#fbf6e4; --text2:#cbc5b6; --text3:#837c71;
  --accent:#f2c840;
  --hbg:#231a15; --htxt:#fbf6e4; --chrome-rgb:251,246,228;
}
html, body { height:100%; background:var(--bg); color:var(--text); }
html, body, *, *::before, *::after { font-family:'IBM Plex Sans',sans-serif; }
#root { min-height:100%; display:flex; flex-direction:column; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; }

* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.blink { animation: blink 1s step-end infinite; }

/* ── The sign-in card (owner, 2026-10-18): one card on a dark plus grid,
   for every page but the Access Portal and Settings (owner, 2026-10-26) ── */
/* The footer is locked to the bottom of the screen and drawn above the
   cards (owner, 2026-10-27): when a narrow screen scrolls, the cards pass
   under it. Sticky needs the page itself to scroll, so the frame clips
   (overflow:clip) rather than hides, which would make it a scroll box of
   its own. */
.signin { position:relative; min-height:100vh; display:flex; flex-direction:column; background:var(--hbg); overflow:clip; }
/* A field the page scrolls to (focus, a phone's keyboard) stops above the
   footer, not under it: 57 px at its tallest (two lines on a phone), plus
   room to see the field's edge. */
html:has(.signin-foot) { scroll-padding-bottom:72px; }
.signin-main { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 16px; }
.signin-foot { position:sticky; bottom:0; z-index:40; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px;
  padding:10px 24px; background:var(--hbg); border-top:1px solid rgba(var(--chrome-rgb),0.10); font-size:11px; color:var(--text3); }
.signin-legal { display:flex; gap:18px; }
/* The links, then the Access Portal's light/dark button in the corner (owner,
   2026-10-29): YottaBot Desktop's status bar button (its .theme-btn), the
   theme in use beside its sun or moon in a thin outlined box. */
.foot-end { display:flex; align-items:center; gap:18px; margin-left:auto; }
/* The Access Portal's footer (owner, 2026-10-31: "[copyright] | [terms]
   [privacy]"): the copyright, a thin divider and the links at the left, the
   light/dark button alone at the right. */
.foot-start { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.foot-sep { width:1px; height:12px; background:rgba(var(--chrome-rgb),0.22); }
.portal-foot .theme-btn { margin-left:auto; }
.theme-btn { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border:1px solid var(--border);
  border-radius:5px; background:transparent; color:var(--text2); font:inherit; font-size:11.5px; white-space:nowrap; }
.theme-btn:hover { background:var(--text); color:var(--bg); }
.signin-legal a { color:var(--text3); text-decoration:underline; text-underline-offset:2px; }
.signin-legal a:hover { color:var(--text2); }
.plus-grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.plus-grid path { fill:none; stroke:rgba(var(--chrome-rgb),0.12); stroke-width:1; }
.signin-card { position:relative; width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; box-shadow:0 24px 64px rgba(35,26,21,0.35); }
.signin-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:8px 14px 8px 24px; }
/* Back and Forward at the top right, YottaBot Desktop's (its .icon-btn). */
.head-nav { display:flex; gap:2px; }
.icon-btn { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; color:var(--text2); transition:background 0.15s, color 0.15s; }
.icon-btn:hover:not(:disabled) { background:var(--text); color:var(--bg); }
.icon-btn:disabled { opacity:0.35; cursor:default; }
.signin-logo { height:18px; width:auto; display:block; }
.signin-card-body { padding:24px; }
.providers { display:flex; flex-direction:column; gap:10px; }
.or { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--text3); }
.or::before, .or::after { content:''; flex:1; border-top:1px solid var(--border); }
.create-account:disabled { opacity:0.45; cursor:not-allowed; filter:none; }
/* Create Account as a workflow (owner, 2026-10-18; sign-in.jsx SignInFlow),
   top to bottom (owner, 2026-10-27; create-account.cjs flowLayout). The
   cards are nodes on a canvas; the camera (.flow-world's transform, set from
   the measured nodes) glides down from Sign In to Select A Plan and the row
   of plans beneath it. Ports and edges are the workflow editor's: 10 px
   ports in --surface2 with a 1 px --border-strong ring, 1.5 px
   --border-strong edges, out of a card's bottom and into the next one's
   top. The order: Sign In's port pops, the camera pans while the edge draws,
   Select A Plan rises in and its ports pop, then the edges fan out and the
   plans rise in one after another. */
.flow-main { padding:0; }
.flow { position:absolute; inset:0; overflow:hidden; }
.flow-world { position:absolute; left:0; top:0; transform-origin:0 0; }
.flow.ready .flow-world { transition:transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; }
.flow-edges { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.edge { fill:none; stroke:var(--border-strong); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:1; }
.edge-in { transition:stroke-dashoffset 0.3s ease; }
.flow.at-method .edge-in { stroke-dashoffset:0; transition:stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.15s; }
.flow.at-group .edge-out, .flow.at-tiers .edge-tier { animation:edge-draw 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; }
.flow.at-form .edge-s2, .edge-form.drawn { animation:edge-draw 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; }
@keyframes edge-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.flow-node { position:absolute; }
.flow-signin { width:400px; transition:opacity 0.5s ease; }
.flow.at-method .flow-signin { opacity:0.5; }
/* Whatever is above the level in view stays, dimmed (owner, 2026-10-18):
   Select A Plan and the plans above Pro's tiers or Step 3, the tiers above
   Step 3, Step 3 above Step 4. Select A Plan is not dimmed above its own
   plans: the two are centered together. Dimmed is inert (sign-in.jsx): only
   the level in view answers a click. */
.flow-plans, .flow-plans-head, .flow-tiers, .flow-tiers-head { transition:opacity 0.5s ease; }
.flow.at-group .flow-step,
.flow.at-tiers .flow-plans, .flow.at-tiers .flow-plans-head, .flow.at-form .flow-plans, .flow.at-form .flow-plans-head,
.flow.at-form .flow-tiers, .flow.at-form .flow-tiers-head { opacity:0.5; }
.flow-step { width:340px; opacity:0; transform:translateY(18px); transition:opacity 0.25s ease, transform 0.25s ease; }
.flow.at-plan .flow-step { opacity:1; transform:none; transition:opacity 0.45s ease 0.5s, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }
/* The plans and Pro's tiers are rows, their tiles as tall as the tallest
   (create-account.cjs FLOW: planW, tierW, rowGap). */
.flow-plans, .flow-tiers { width:max-content; }
.tier-list, .plan-list { display:flex; gap:16px; }
.flow-plans .plan, .flow-tiers .plan { flex:none; width:260px; }
/* The tiers' own header (logo, stripe, arrows), coming in just before them:
   the camera centers the tiers alone, with Select A Plan off-screen above.
   Pro's edge runs into it and it fans out to the tiers; once a tier is
   picked it stays, dimmed, as Select A Plan does above its plans. */
.flow-plans-head, .flow-tiers-head { width:260px; }
/* The chosen side's plans have the same kind of header (owner, 2026-10-27),
   coming in once a side is picked; it stays, dimmed, under later levels. */
.plans-head { opacity:0; transform:translateY(16px); visibility:hidden;
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; }
.flow.at-group .plans-head { opacity:1; transform:none; visibility:visible;
  transition:opacity 0.45s ease 0.3s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s, visibility 0s; }
.flow.at-group .flow-plans-head .port { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s; }
.edge-plans-head { transition:stroke-dashoffset 0.3s ease; }
.flow.at-group .edge-plans-head { stroke-dashoffset:0; transition:stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.15s; }
.tiers-head { opacity:0; transform:translateY(16px); visibility:hidden;
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; }
.flow.at-tiers .tiers-head { opacity:1; transform:none; visibility:visible;
  transition:opacity 0.45s ease 0.3s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s, visibility 0s; }
.flow.at-tiers .flow-tiers-head .port { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s; }
/* The form steps: cards like Select A Plan's, rising in as the camera
   arrives; each dims once the next is in view. */
.flow-form { width:360px; opacity:0; transform:translateY(18px); transition:opacity 0.25s ease, transform 0.25s ease; }
.flow-form.shown { opacity:1; transform:none;
  transition:opacity 0.45s ease 0.5s, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }
.flow-form.shown.behind { opacity:0.5; transition:opacity 0.5s ease; }
.flow-form.shown > .port.in { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s; }
.flow-form.behind > .port.out { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s; }
.form-stack { display:flex; flex-direction:column; gap:10px; }
.form-stack .step-title { margin-bottom:6px; }
/* A step's number above its title (sign-in.jsx StepTitle). */
.step-title { display:flex; flex-direction:column; gap:3px; }
.step-title .title { margin-bottom:0; }
.step-number { font-size:11px; letter-spacing:0.04em; color:var(--text3); }
.step-detail { font-size:12px; color:var(--text3); line-height:1.6; }
.step-detail strong { color:var(--text2); }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-one { display:grid; }
.phone-row { display:flex; align-items:flex-end; gap:8px; }
.phone-row .input { min-width:0; }
.phone-row .dial { flex:none; width:104px; padding-right:4px; text-overflow:ellipsis; }
.phone-row .ext { flex:none; width:64px; }
.size-field { display:flex; flex-direction:column; gap:6px; margin-top:2px; }
.size-label { font-size:11px; color:var(--text3); }
.sizes { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.sizes button { padding:8px 4px; border-radius:6px; border:1px solid var(--border); background:transparent; font-size:11.5px;
  color:var(--text2); white-space:nowrap; transition:border-color 0.15s, color 0.15s; }
.sizes button:hover { background:var(--text); border-color:var(--text); color:var(--bg); }
/* Selected the way the workflow editor selects: blue, two pixels. */
.sizes button[aria-checked="true"] { border-color:var(--sc-blue); box-shadow:inset 0 0 0 1px var(--sc-blue); color:var(--text); }
.form-submit { margin-top:6px; }
/* Contact, Company and Billing's fields (owner, 2026-11-09): the name above
   the box as in a dialog, only an example inside. */
.signup-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.signup-label { font-size:12px; font-weight:600; color:var(--text2); }
.phone-row > .signup-field { flex:1; }
.phone-row > .signup-field:has(.ext) { flex:none; width:64px; }
/* Our dropdown in those steps (sign-in.jsx SignupSelect): a field's box, then
   the Filters menu's panel and search. The card lets it out. */
.flow-form .signin-card { overflow:visible; }
.signup-select { position:relative; min-width:0; }
.select-btn { display:flex; align-items:center; justify-content:space-between; gap:6px; text-align:left; cursor:pointer; }
.select-btn[aria-expanded="true"] { border-color:var(--border-strong); }
.select-btn.is-empty .select-value { color:var(--text3); }
.select-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.signup-select .select-menu { width:max(100%, 240px); }
.signup-select .select-menu.up { top:auto; bottom:calc(100% + 6px); }
.form-pair .signup-select:last-child .select-menu { left:auto; right:0; }
.signup-select .select-list { position:relative; max-height:220px; margin:0; padding:4px; list-style:none; }
.select-option { display:block; width:100%; padding:7px 10px; border:0; border-radius:5px; background:transparent; color:var(--text2);
  font-size:12.5px; text-align:left; cursor:pointer; }
.select-option.is-active { background:var(--lift); color:var(--text); }
.select-option.on, .select-option.on.is-active { background:var(--sc-green); color:var(--go-ink); font-weight:700; }
/* A business's Access Portal address (plan 289 Step 4.4): the alias typed,
   .yotta.bot after it inside the same box. */
.alias-field { position:relative; }
.alias-field .input { padding-right:84px; }
.alias-suffix { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--text3);
  letter-spacing:0.02em; pointer-events:none; }
/* A business's seats: each type's name, its price and credits a month, and a
   count with - and + beside it; then the seats and their monthly total. */
.seat-rows { display:flex; flex-direction:column; gap:8px; }
.seat-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.seat-name { display:flex; flex-direction:column; gap:2px; min-width:0; }
.seat-type { font-size:13px; color:var(--text); }
.seat-terms { font-size:11px; color:var(--text3); white-space:nowrap; }
.seat-count { display:flex; align-items:center; gap:6px; flex:none; }
.seat-count .seat-input { width:52px; padding:8px 6px; text-align:center; }
.seat-step { width:30px; height:30px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text2);
  font-size:15px; line-height:1; transition:border-color 0.15s, color 0.15s; }
.seat-step:hover:not(:disabled) { background:var(--text); border-color:var(--text); color:var(--bg); }
.seat-step:disabled { opacity:0.4; cursor:default; }
.seat-total { display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid var(--border);
  font-size:13px; color:var(--text); }
/* Sign In Method: the providers and a password as one radio list (centered,
   like Sign In's provider buttons), selected the way the workflow editor
   selects: blue, two pixels. */
.method-list { display:flex; flex-direction:column; gap:8px; }
.method svg { flex-shrink:0; }
.method[aria-checked="true"], .method[aria-checked="true"]:hover { border-color:var(--sc-blue); box-shadow:inset 0 0 0 1px var(--sc-blue); }
.method-problem { color:var(--sc-orange); }
/* An individual's agreement to the Terms, on the last step (#258 gate 3). */
.terms-check { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--text2); line-height:1.5; cursor:pointer; }
.terms-check input { margin:2px 0 0; flex:none; accent-color:var(--sc-green); }
.terms-check a { color:var(--text); text-decoration:underline; text-underline-offset:2px; }
/* The done card: the address its first sign-in link went to, on a line of its own. */
.done .lead { margin-bottom:6px; }
.done-email { font-size:14px; color:var(--text); overflow-wrap:anywhere; }
.flow-link { display:none; }
.port { position:absolute; left:50%; z-index:1; width:10px; height:10px; margin-left:-5px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--border-strong); transform:scale(0); transition:transform 0.2s ease; }
.port.out { bottom:-5px; }
.port.in { top:-5px; }
.flow.at-method .flow-signin .port.out { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.flow.at-plan .flow-step .port.in { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s; }
.flow.at-group .flow-step .port.out { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s; }
.plan .port.in { transform:none; }
/* A tile's port out opens when it leads on: Pro's when its tiers do, the
   picked plan's or tier's when Step 2 does (the camera pans on to them). */
.flow.at-tiers .flow-plans .plan.opens .port.out,
.flow.at-form .plan.source .port.out { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s; }
/* Step 2: Select A Plan: a button for each side in the card, the plans as
   their own nodes beneath it. The two sit side by side, filled a step
   lighter than the card, turning Create Account's green with dark words and
   icon on hover, and neither
   is marked as picked (owner, 2026-10-28: the Chat / Code style toggle read
   as Individual already chosen). On a phone a label wraps rather than the
   pair stacking. Focus lands on the step, with no ring, so Tab reaches the
   sides with neither shown first. */
.plan-step:focus-visible { outline:none; }
.plan-sides { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.plan-sides button { padding:11px 12px; gap:8px; background:var(--surface2); font-weight:500; text-align:center;
  transition:background 0.15s, border-color 0.15s, color 0.15s; }
.plan-sides button:hover { background:var(--sc-green); border-color:var(--sc-green); color:var(--go-ink); }
.plan-sides button svg { flex-shrink:0; }
.plan { position:relative; display:flex; flex-direction:column; gap:4px; padding:16px 18px 18px; border-radius:12px; text-align:left;
  border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:0 14px 36px rgba(35,26,21,0.3);
  transition:border-color 0.15s; opacity:0; }
.flow.at-group .flow-plans .plan, .flow.at-tiers .flow-tiers .plan { animation:plan-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes plan-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.plan:hover { border-color:var(--text3); }
/* A picked plan or tier is selected the way the workflow editor selects a
   node (yotta-bot app.jsx): the border alone, blue and two pixels instead of
   one; the second pixel is drawn inside, so the card doesn't move. */
.plan.checked, .plan.checked:hover { border-color:var(--sc-blue); box-shadow:inset 0 0 0 1px var(--sc-blue), 0 14px 36px rgba(35,26,21,0.3); }
.plan-name { font-size:16px; }
.plan-tagline { font-size:11.5px; color:var(--text2); }
.plan-price { display:flex; align-items:baseline; gap:6px; margin-top:8px; }
.plan-from { font-size:11px; color:var(--text3); }
.plan-amount { font-size:26px; font-weight:300; line-height:1.1; }
.plan-per { font-size:11px; color:var(--text3); }
/* Contact Sales, under Enterprise's Custom Pricing: a call to action drawn in
   the Create Account button's green; the whole tile is the button. */
.plan-action { display:flex; align-items:center; justify-content:center; margin-top:12px; padding:9px 14px; border-radius:6px;
  background:var(--sc-green); color:var(--go-ink); font-size:12px; font-weight:500; transition:filter 0.15s; }
.plan:hover .plan-action { filter:brightness(1.08); }
.plan-features { display:flex; flex-direction:column; gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.plan-feature { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; line-height:1.4; color:var(--text2); }
.plan-feature svg { flex-shrink:0; margin-top:1px; color:var(--sc-green); }
/* Business's seat tiers, under their own heading and rule. */
.plan-tiers-label { margin-top:14px; font-size:11.5px; font-weight:600; color:var(--text); }
.plan-features.plan-tiers { margin-top:8px; padding-top:10px; }
/* Below FLOW.stackBelow (1024 px: phones either way round, tablets upright;
   create-account.cjs) the nodes stack, one level at a time: Sign In, Sign In
   Method, Select A Plan, the chosen side's header over its plans, Pro's
   header over its tiers, then each form step. A header and its row are
   joined by one short line to the first card's port. The page scrolls
   instead of the camera; wider than that, the camera scales the canvas. */
@media (max-width: 1023px) {
  .flow-main { padding:28px 16px; }
  .flow { position:static; overflow:visible; width:100%; max-width:400px; }
  .flow-world { position:static; transform:none !important; display:flex; flex-direction:column; }
  .flow-node { position:static; width:100%; }
  .flow-edges, .flow-node > .port { display:none; }
  .flow:not(.at-plan) .flow-step, .flow.at-group .flow-step { display:none; }
  .flow:not(.at-group) .flow-plans-head, .flow:not(.at-group) .plans-link, .flow:not(.at-group) .flow-plans,
  .flow.at-tiers .flow-plans-head, .flow.at-tiers .plans-link, .flow.at-tiers .flow-plans,
  .flow.at-form .flow-plans-head, .flow.at-form .plans-link, .flow.at-form .flow-plans { display:none; }
  .flow:not(.at-tiers) .flow-tiers-head, .flow:not(.at-tiers) .tiers-link, .flow:not(.at-tiers) .flow-tiers,
  .flow.at-form .flow-tiers-head, .flow.at-form .tiers-link, .flow.at-form .flow-tiers { display:none; }
  .tier-list, .plan-list { flex-direction:column; gap:14px; }
  .flow-plans .plan, .flow-tiers .plan { width:auto; }
  .flow-form:not(.current) { display:none; }
  /* Stacked, each level is alone, so nothing dims. */
  .flow.at-plan .flow-step, .flow.at-group .flow-plans-head, .flow.at-group .flow-plans { opacity:1; }
  .flow.at-plan .flow-signin { display:none; }
  .flow-link { display:block; align-self:center; width:0; height:28px; border-left:1.5px solid var(--border-strong); }
  .plan + .plan .port.in, .plan .port.out { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .flow.ready .flow-world, .flow-signin, .flow-step, .flow-form, .plans-head, .tiers-head, .edge-in, .edge-plans-head, .port { transition:none !important; }
  .flow.at-group .edge-out, .flow.at-tiers .edge-tier, .flow.at-form .edge-s2, .edge-form.drawn,
  .flow.at-group .flow-plans .plan, .flow.at-tiers .flow-tiers .plan { animation:none; }
  .flow.at-group .edge-out, .flow.at-tiers .edge-tier, .flow.at-form .edge-s2, .edge-form.drawn { stroke-dashoffset:0; }
  .flow.at-group .flow-plans .plan, .flow.at-tiers .flow-tiers .plan { opacity:1; }
}
.create-account { padding:11px 16px; border-radius:6px; background:var(--sc-green); color:var(--go-ink); font-size:12px; font-weight:500;
  display:flex; align-items:center; justify-content:center; transition:filter 0.15s; }
.create-account:hover { filter:brightness(1.08); }
/* A link drawn as Create Account's green button (the payment
   confirmation's Redirect Now, owner 2026-10-26). */
a.create-account { text-decoration:none; }
/* A sign-in card's own submit (owner, 2026-10-19; ui.jsx CardSubmit): the
   email's Sign In and two-factor's Verify. Two ramp steps lighter than the
   card (neutral 950, --surface), neutral 850, and one more on hover (800),
   with the card's text, at Create Account's size and in its title case. */
.card-submit { padding:11px 16px; border-radius:6px; background:#473f38; color:var(--text); font-size:12px; font-weight:500;
  display:flex; align-items:center; justify-content:center; transition:background 0.15s; text-decoration:none; }
.card-submit:hover { background:#534b43; }
.card-submit:disabled { opacity:0.45; cursor:not-allowed; background:#473f38; }
/* The signed-out page's Sign In is a link drawn as the card's submit. */
a.card-submit { text-decoration:none; }
/* The other choice beside a card's submit: yottactl's Deny (owner,
   2026-10-19). The submit's shape, outlined on the card. */
.card-secondary { padding:10px 16px; border-radius:6px; border:1px solid var(--border-strong); background:transparent; color:var(--text); font-size:12px;
  font-weight:500; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.card-secondary:hover:not(:disabled) { background:var(--text); border-color:var(--text); color:var(--bg); }
.card-secondary:disabled { color:var(--text3); cursor:not-allowed; }
/* A card's submit and its other choice, close together (owner, 2026-10-19). */
.card-choices { display:flex; flex-direction:column; gap:8px; }
/* Who is signing in, on the password and two-factor steps (owner,
   2026-10-19; ui.jsx CardAccount): Username, then the email with Change at
   its right. */
.card-account { display:flex; flex-direction:column; gap:4px; }
.card-account-label { font-size:11px; color:var(--text3); }
.card-account-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.card-account-row > span { font-size:13px; color:var(--text); overflow-wrap:anywhere; }
/* Underlined text on a sign-in card, drawn like the footer's (.signin-legal a;
   owner, 2026-10-19). */
.card-link { font-size:11px; color:var(--text3); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.card-link:hover { color:var(--text2); }

/* ── Form parts ──────────────────────────────────────────────────── */
.stack { display:flex; flex-direction:column; gap:18px; }
.title { font-size:18px; font-weight:400; color:var(--text); margin-bottom:4px; }
.lead { font-size:12px; color:var(--text2); line-height:1.6; }
.field { display:flex; flex-direction:column; gap:6px; }
.field > span { font-size:9px; letter-spacing:0.18em; color:var(--text3); text-transform:uppercase; }
.input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text);
  padding:10px 12px; font-size:13px; letter-spacing:0.02em; transition:border-color 0.15s; }
.input:focus { border-color:var(--border-strong); }
.input.code { font-family:'IBM Plex Mono',monospace; letter-spacing:0.3em; font-size:16px; }
/* The field's name inside it reads as the card's other fields do (yottactl's
   Code; owner, 2026-10-19). */
.input.code::placeholder { font-family:'IBM Plex Sans',sans-serif; letter-spacing:normal; font-size:13px; }
.nowrap { white-space:nowrap; }
.with-eye { position:relative; }
.with-eye .input { padding-right:40px; }
.eye { position:absolute; top:0; right:0; height:100%; width:38px; display:inline-flex; align-items:center; justify-content:center; color:var(--text3); }
.eye:hover { color:var(--text); }
.caps { font-size:9px; color:var(--sc-orange); letter-spacing:0.08em; margin-top:2px; }
.primary { padding:12px 16px; border-radius:6px; background:var(--text); color:var(--bg); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:10px; transition:opacity 0.15s; }
.primary:disabled { background:var(--text3); cursor:wait; }
.secondary { padding:11px 16px; border-radius:6px; border:1px solid var(--border-strong); color:var(--text); font-size:12px;
  display:flex; align-items:center; justify-content:center; gap:10px; background:transparent; }
.secondary:hover:not(:disabled) { background:var(--text); border-color:var(--text); color:var(--bg); }
.secondary:disabled { opacity:0.5; cursor:not-allowed; }
.divider { display:flex; align-items:center; gap:12px; color:var(--text3); font-size:9px; letter-spacing:0.18em; }
.divider::before, .divider::after { content:''; flex:1; border-top:1px solid var(--border); }
.linkish { color:var(--text2); text-decoration:underline; font-size:11px; letter-spacing:0.04em; cursor:pointer; }
.linkish:hover { color:var(--text); }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.error { padding:8px 12px; border:1px solid var(--sc-red); border-radius:6px; background:rgba(209,54,68,0.08); color:var(--sc-red);
  font-size:11px; letter-spacing:0.02em; line-height:1.5; }
.notice { padding:8px 12px; border:1px solid var(--border-strong); border-radius:6px; color:var(--text2); font-size:11px; line-height:1.5; }
.notice.notice-closable { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-right:6px; }
.notice-x { flex:none; width:22px; height:22px; }
.who { font-size:12px; color:var(--text2); display:flex; justify-content:space-between; gap:8px; }
.codes { display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; padding:12px; border:1px solid var(--border); border-radius:6px;
  font-size:13px; color:var(--text); }
.codes > span { font-family:'IBM Plex Mono',monospace; }
.qr { background:#fff; padding:12px; border-radius:6px; align-self:flex-start; }
.qr svg { display:block; width:184px; height:184px; }
.secret { font-family:'IBM Plex Mono',monospace; font-size:12px; word-break:break-all; color:var(--text2); }
.methods { display:flex; gap:12px; flex-wrap:wrap; }

/* ── Start page ──────────────────────────────────────────────────── */
.app { min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }
/* The header and its stripe stay at the top while the page scrolls under
   them (owner, 2026-10-25): above the page's own menus, below dialogs. */
.app-top { position:sticky; top:0; z-index:30; flex-shrink:0; }
/* The sign-in pages' footer, locked to the bottom (owner, 2026-10-27): the
   page scrolls under it, its menus too, and the header and its stripe stay
   above it. */
.signin-foot.portal-foot { z-index:25; flex-shrink:0; }
/* The console's header at demo-00's size (owner, 2026-10-19). The bot
   frontend zooms its header 1.25, so its 52 px bar, 32 px initials and 8 px
   button text show at 65, 40 and 10 px; these are those sizes. The logo
   stays 22 px (the bot zooms it back), and the stripe follows the bar. */
.app-head { height:65px; display:flex; align-items:center; justify-content:space-between; padding:0; background:var(--hbg);
  border-bottom:1px solid rgba(var(--chrome-rgb),0.06); position:relative; z-index:20; }
.app-head .brand { display:flex; align-items:center; gap:17.5px; padding:0 20px; height:100%; text-decoration:none; color:var(--htxt); }
.app-head .brand img { height:22px; width:auto; display:block; }
/* The portal's name, as admin's and the investor portals' header draws theirs
   (owner, 2026-10-19): 18 px light beside a 22 px rule. */
.brand-rule { width:1px; height:22px; background:rgba(var(--chrome-rgb),0.25); }
.brand-name { font-size:18px; font-weight:300; letter-spacing:0.02em; color:var(--htxt); }
.head-tools { display:flex; align-items:center; gap:15px; padding-right:20px; }
/* demo-00's light/dark button, left of the initials; its word in its own
   case, not capitals (owner, 2026-10-23). */
.account-menu { position:relative; }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--head-avatar); border:1px solid rgba(var(--chrome-rgb),0.25);
  display:flex; align-items:center; justify-content:center; font-size:10px;
  color:rgba(var(--chrome-rgb),0.85); cursor:pointer; }
/* Every section of the menu in demo-00's format (owner, 2026-10-19), the bot
   frontend's ProfileMenu: name over email, each fact a bold label over its
   value with a copy button beside the Account ID, the items, then Sign Out in
   bold red (owner, 2026-10-28; demo-00's is green). Its items keep a clear 2 px left edge and Sign Out doesn't, as
   demo-00's do. */
.account-menu .menu { position:absolute; top:calc(100% + 8px); right:0; width:270px; background:var(--head-menu); border:1px solid var(--border-strong);
  border-radius:8px; box-shadow:0 8px 32px rgba(35,26,21,0.22); padding:4px 0; display:flex; flex-direction:column; }
.menu-who { padding:10px 14px; }
.menu-name { font-size:12px; color:var(--text); }
.menu-email { margin-top:2px; font-size:10px; color:var(--text2); overflow-wrap:anywhere; }
.menu-facts { margin:0; padding:10px 14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:7px; }
.menu-facts > div { display:flex; flex-direction:column; gap:1px; }
.menu-facts dt { font-size:10px; font-weight:700; letter-spacing:0.02em; color:var(--text); }
.menu-facts dd { margin:0; font-size:10px; color:var(--text2); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.menu-facts dd a { color:var(--text); }
.menu-facts dd.menu-id { display:flex; align-items:center; gap:6px; }
.menu-copy { width:18px; height:18px; padding:0; border:1px solid var(--border); border-radius:4px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--text3); }
.menu-copy:hover { color:var(--text); }
.menu-copy.is-copied, .menu-copy.is-copied:hover { color:var(--sc-green); }
.num { font-variant-numeric:tabular-nums; }
.menu-rule { height:1px; background:var(--border); margin:4px 0; }
.menu-facts + .menu-rule { margin-top:0; }
.menu-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:5px 14px; font-size:11px; letter-spacing:0.04em; color:var(--text2);
  text-decoration:none; background:none; border:0; border-left:2px solid transparent; }
/* Desktop's icon slot (owner, 2026-10-19): 16 px, the icon centred in it. */
.menu-icon { display:inline-grid; place-items:center; flex:none; width:16px; height:16px; }
.menu-item:hover { background:var(--bg2); }
.menu-signout { font-weight:700; color:var(--sc-red); border-left:0; }
.menu-item:disabled { opacity:0.6; cursor:default; }

/* The Accounts tab: a table like AWS's portal. */
.acct-card { border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
/* Home's cards too (owner, 2026-10-28): Accounts' ("for accounts, make the
   box the lighter color"), then the apps tabs' (YottaBot Apps, Organization
   Apps, Your Apps, Downloads, Admin). */
.compare-card, .security-page .acct-card, .accounts-card, .apps-card { background:var(--card-lift); }
/* Every card's title takes no colour, its count grey (owner, 2026-10-28:
   Security's, Home's and Compare's first, then "make sure accounts (which is
   green) has no color"; green from 2026-10-19 until then). */
.acct-title { font-size:15px; font-weight:500; color:var(--text); }
.acct-title .count { color:var(--text3); font-weight:400; }
.acct-scroll { overflow-x:auto; }
.acct-table { width:100%; border-collapse:collapse; font-size:13px; }
/* demo-00's tables (owner, 2026-10-19): bold column names, 13 px cells at
   0.06em. The names are in their own Title Case, not capitals (owner,
   2026-10-23), so an acronym such as ID still stands out. */
.acct-table th { text-align:left; font-weight:700; font-size:12px; letter-spacing:0.02em; color:var(--text);
  padding:8px 14px; border-bottom:1px solid var(--border-strong); white-space:nowrap; }
.acct-table td { padding:7px 14px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); letter-spacing:0.06em; }
/* Every table's column names (owner, 2026-10-19; Settings' tables
   2026-10-23): a divider between them floats a little above the line
   beneath, not touching it. Accounts' names also sort. */
.acct-table thead th { position:relative; }
/* A column name's width handle (owner, 2026-11-01: every list with columns
   adjustable; src/common/frontend/columns): a strip over its right edge,
   drawn only under the pointer or focused, where the divider is. */
.col-resize { position:absolute; top:0; bottom:0; right:-5px; width:10px; z-index:2; cursor:col-resize; touch-action:none; }
.col-resize::before { content:''; position:absolute; left:4px; top:6px; bottom:6px; width:2px; border-radius:1px; background:transparent; }
.col-resize:hover::before, .col-resize:focus-visible::before { background:var(--text3); }
.acct-table[style*="fixed"] th, .acct-table[style*="fixed"] td { overflow:hidden; text-overflow:ellipsis; }
.acct-table thead th:not(:last-child)::after { content:''; position:absolute; right:0; top:7px; bottom:7px; width:1px;
  background:var(--border-strong); }
.sort-head { display:inline-flex; align-items:center; gap:8px; padding:0; color:inherit; font-weight:inherit; letter-spacing:inherit;
  text-transform:inherit; white-space:nowrap; }
.sort-icon { fill:var(--text3); flex-shrink:0; }
.sort-icon.is-sorted { fill:var(--text); }
.sort-head:hover .sort-icon { fill:var(--text2); }
.sort-head:hover .sort-icon.is-sorted { fill:var(--text); }

/* A list (lists.jsx ListCard; owner, 2026-11-01): Identity's Users, Groups
   and Apps and the Access Portal's Accounts. Its title, toolbar, notices
   and search stay where they are, and its rows scroll under their column
   headings, which stay pinned, so the headings' line is the divider. The
   card fits the window between --list-top and --list-below, so the page
   doesn't scroll: the rows are the one thing that does, either way, inside
   .acct-scroll. */
.list-card { max-height:calc(100vh - var(--list-top, 0px) - var(--list-below, 0px)); min-height:0; }
.list-head { display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.list-card > .acct-scroll { flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:none; }
/* No scrollbar is shown, as the page shows none (.app-fixed). */
.list-card > .acct-scroll::-webkit-scrollbar { display:none; }
/* The headings' line is drawn on them, not as the table's border: in a
   collapsed table a pinned cell's border stays with the table and scrolls
   away (owner, 2026-11-01: "don't scroll the divider under the column
   headers"). */
.list-card > .acct-scroll > .acct-table > thead th { position:sticky; top:0; z-index:2; background:var(--card-lift);
  border-bottom:0; box-shadow:inset 0 -1px 0 var(--border-strong); }
/* A list keeps each record on one line (owner, 2026-11-01): a
   column is at least as wide as its heading, the card's spare width is
   shared, and a value too long for its column ends in …, whole in its title
   (a cell's max-width:0 keeps its value from widening the column). The
   table scrolls inside its card (.acct-scroll) only when the headings don't
   fit. Dragging a column's edge sets its width (columns.jsx); one dragged
   narrower than its heading cuts the heading's label the same way, inside
   its button, since the th can't clip: its resize handle sits over its
   edge. */
.line-table th { white-space:nowrap; }
.line-table td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:0; }
.line-table .sort-head { max-width:100%; }
.line-table .sort-label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.line-table .sort-icon { flex:none; }
.line-table .mono-cell { word-break:normal; }
/* A status pill, or an ID with its copy button, is never cut (owner,
   2026-11-01): its cell sizes its column, and a drag stops at it
   (columns.jsx .col-keep). */
.line-table td.keep-cell { max-width:none; overflow:visible; }
/* A list's pages (lists.jsx Pager), as the console's Agents (its data-table.jsx):
   Rows, then « ‹ page / pages › » at the right of the search, on its row,
   and what is shown of how many along the card's foot (owner, 2026-11-01).
   Rounded, as the portal's buttons are. */
.pager { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-left:auto;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--text3); }
.pager b, .pager-foot b { font-weight:400; color:var(--text); }
.pager-foot { margin:0 -18px -16px; padding:10px 18px; border-top:1px solid var(--border);
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--text3); }
.pager-rows { display:inline-flex; align-items:center; gap:8px; }
/* Rows, and any page size (lists.jsx RowsPicker): our own menu, never the
   system's (owner, 2026-11-01), on the search box's colour (--bg: the cream
   in light), the size chosen green with the green buttons' ink: light in
   light, dark in dark. */
.size-pick { position:relative; }
.size-btn { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px; border:1px solid var(--border); border-radius:6px;
  background:transparent; color:var(--text); font:inherit; letter-spacing:0.06em; cursor:pointer; }
.size-btn:hover, .size-btn[aria-expanded="true"] { background:var(--text); border-color:var(--text); color:var(--bg); }
.size-btn:hover .caret, .size-btn[aria-expanded="true"] .caret { color:inherit; }
.size-btn .caret { font-size:9px; color:var(--text2); }
.size-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:40; min-width:100%; margin:0; padding:4px; list-style:none;
  background:var(--card-lift); border:1px solid var(--border-strong); border-radius:8px; box-shadow:0 8px 24px rgba(35,26,21,0.12); }
.size-option { display:block; width:100%; padding:5px 10px; border:0; border-radius:5px; background:transparent; color:var(--text2);
  font:inherit; letter-spacing:0.06em; text-align:left; cursor:pointer; }
.size-option:hover { background:var(--lift); color:var(--text); }
.size-option.is-current, .size-option.is-current:hover { background:var(--sc-green); color:var(--go-ink); font-weight:700; }
.pager-rule { width:1px; height:18px; background:var(--border); }
.pager-pages { display:flex; gap:3px; align-items:center; }
/* The page buttons are on the search box's colour too, as Rows is (owner,
   2026-11-01: "they should be the cream color too"). */
.pager-btn { display:inline-grid; place-items:center; width:26px; height:24px; padding:0; border:1px solid var(--border); border-radius:6px;
  background:transparent; color:var(--text2); cursor:pointer; }
.pager-btn:hover:not(:disabled) { background:var(--text); border-color:var(--text); color:var(--bg); }
/* Dimmed by its icon, so nothing shows through it. */
.pager-btn:disabled { color:var(--text3); opacity:1; cursor:not-allowed; }
.pager-btn:disabled svg { opacity:0.5; }
.pager-at { padding:0 8px; white-space:nowrap; }
.acct-toggle { display:inline-flex; align-items:center; gap:8px; color:var(--text); font-size:13px; padding:2px 0; }
.acct-toggle .caret { display:inline-block; width:10px; color:var(--text3); transition:transform 0.12s; }
.acct-toggle .caret.is-open { transform:rotate(90deg); }
.acct-name { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-strong); }
/* Status pills: the Access Portal's Accounts', every Identity list's and
   Boo Desktop's and Boo Web's (their styles.css holds the same rules), each
   hugging its word (owner, 2026-11-02: "i liked the minimal left and right
   space"; "make sure we don't have divergence across our status
   pillboxes"). Drawn as Security's email pills but see-through: the colour
   is the border and the words, over a light tint of it (owner, 2026-11-01:
   "not fully transparent. i mean like partly"). Enabled green, Provisioning
   yellow, Disabled red, and a status that is neither good nor bad (Boo's
   Idle, Archived) grey. */
.status-pill { display:inline-block; padding:1px 8px; border:1px solid var(--border); border-radius:999px; font-size:11px; font-weight:600;
  line-height:1.6; white-space:nowrap; color:var(--text2); background:transparent; }
.status-pill.is-active { border-color:var(--sc-green); color:var(--sc-green); background:color-mix(in srgb, var(--sc-green) 18%, transparent); }
.status-pill.is-suspended { border-color:var(--sc-red); color:var(--sc-red); background:color-mix(in srgb, var(--sc-red) 18%, transparent); }
.status-pill.is-pending { border-color:var(--sc-yellow); color:var(--sc-yellow); background:color-mix(in srgb, var(--sc-yellow) 18%, transparent); }
.status-pill.is-neutral { border-color:var(--border-strong); color:var(--text2); background:color-mix(in srgb, var(--text3) 18%, transparent); }
.acct-id { display:inline-flex; align-items:center; gap:6px; }
/* A role's Access Keys error or keys say all of themselves: the line rule
   (.line-table) is for the rows. */
.line-table .acct-role-note td { white-space:normal; overflow:visible; max-width:none; }
.copy-id { width:20px; height:20px; border-radius:4px; border:1px solid var(--border); color:var(--text3); display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
.copy-id:hover { color:var(--text); }
.acct-email { color:var(--text2); overflow-wrap:anywhere; }
/* An opened account (U9): each role a link, Access keys beside it, as AWS's portal. */
/* An opened account's roles keep the card's colour (owner, 2026-10-19). */
.acct-section > td { padding-left:38px; }
.acct-section .count { margin-left:4px; color:var(--text3); font-size:12px; }
.acct-role > td:first-child { padding-left:58px; }
.acct-labels > td { padding-left:58px; }
/* Identity's Assigned pill's type (owner, 2026-11-05). */
.acct-labels .badge { display:inline-block; margin-left:0; margin-right:6px; padding:1px 8px; font-size:11px; font-weight:600; letter-spacing:normal;
  line-height:1.6; text-transform:capitalize; white-space:nowrap; vertical-align:middle; }
.role-name { color:var(--text); font-size:13px; }
.role-off { color:var(--text3); font-size:13px; cursor:not-allowed; }
.acct-role .keys { display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; letter-spacing:inherit; font-size:13px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-strong); }
.acct-role-note > td { padding:0 14px 10px 58px; }
.acct-none { color:var(--text3); font-size:13px; }
/* 1082 px holds Okta's row of six tiles inside the Applications card (owner,
   2026-10-19): the card's 18 px padding and border leave 996 px. */
.app-main { --main-top:32px; flex:1; width:100%; max-width:1082px; margin:0 auto; padding:var(--main-top) 24px var(--scroll-end); display:flex; flex-direction:column; gap:var(--tabs-gap); }
.app-main h2 { font-size:20px; font-weight:400; }
/* Home, Plans and Security (owner, 2026-10-28): the page scrolls, so the
   wheel, a trackpad, touch and the keyboard work from anywhere on it, but the
   header, Home › … and the tabs or divider (.page-top) are pinned under the
   68 px header, and what is under them passes up to the line. No scrollbar
   is shown. .page-top takes back .app-main's top padding as its own, so it
   looks the same pinned as at rest. */
html:has(.app-fixed) { scrollbar-width:none; }
html:has(.app-fixed)::-webkit-scrollbar { display:none; }
.page-top { position:sticky; top:68px; z-index:22; display:flex; flex-direction:column; gap:20px; background:var(--bg);
  margin-top:calc(-1 * var(--main-top)); padding-top:var(--main-top); }
/* On Apps it carries the gap under the tabs as its own band (owner,
   2026-10-31: "i'm still getting a double scroll"), so Apps' head (.apps-head,
   pinned where this ends) pins where it rests: nothing moves but the groups.
   The negative margin takes back the band, so the page looks the same. */
.page-top.page-top-band { padding-bottom:var(--tabs-gap); margin-bottom:calc(-1 * var(--tabs-gap)); }
.page-title { display:contents; }
.page-scroll { display:flex; flex-direction:column; gap:20px; }
.page-divider { border-bottom:1px solid var(--border); }
/* A page under Home, as Boo's Settings › Plans (owner, 2026-10-27): Home ›
   Security, Home quieter than the page and the › quieter still, and ✕ at
   the right with Desktop's rounded box behind it on hover. */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.page-path { display:flex; align-items:center; gap:6px; min-width:0; }
.page-path .crumb { font-size:20px; color:var(--text2); text-decoration:none; white-space:nowrap; }
.page-path .crumb:hover { color:var(--text); }
.page-path .crumb-sep { flex:none; color:var(--text3); }
.page-close { width:30px; height:30px; }
/* An individual's Plans (owner, 2026-10-27), as Boo's Settings → Plans: each
   plan in Models → Details' box, its name the green title, a label over each
   fact, and the plan they are on marked as Settings' menu marks its page, the
   selected background, a green bar at its left and "Your plan" in green. */
.plans-list { display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
.plans-box { position:relative; display:flex; flex-direction:column; gap:12px; padding:16px 18px; border:1px solid var(--border); border-radius:10px; background:var(--surface); transition:background 0.12s; }
.plans-box.is-yours { background:var(--lift); }
/* Another plan lights up under the pointer (owner, 2026-10-27). */
.plans-box:not(.is-yours):hover { background:var(--lift); }
/* The plan they are on: a green bar, as Compare's row and Boo's Models mark
   theirs (owner, 2026-10-28); the pill keeps its own colour. */
.plans-box.is-yours::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:2px; background:var(--sc-green); }
.plans-top { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; }
/* No colour, and twice the size (owner, 2026-10-28). */
.plans-name { margin:0; color:var(--text); font-size:30px; font-weight:500; line-height:1.2; }
.plans-tagline { display:block; margin-top:2px; color:var(--text2); font-size:12.5px; line-height:1.45; }
/* Each plan's pill against theirs (owner, 2026-10-27), solid since
   2026-10-28: Downgrade grey, Your Plan yellow (green on Pro 500), Upgrade
   green, the colours' words dark in either theme. */
.plans-pill { flex:none; padding:1px 8px; border:1px solid var(--border-strong); border-radius:999px; color:var(--text2);
  font-size:11px; font-weight:600; line-height:1.6; white-space:nowrap; }
.plans-pill.is-yours { border-color:var(--sc-yellow); background:var(--sc-yellow); color:#231a15; }
.plans-pill.is-top, .plans-pill.is-upgrade, .plans-pill.is-resume, .plans-pill.is-buy { border-color:var(--sc-green); background:var(--sc-green); color:var(--go-ink); }
.plans-pill.is-downgrade, .plans-pill.is-cancel { border-color:var(--pill); background:var(--pill); color:var(--pill-ink); }
/* Cancel at the left of Your Plan, as Downgrade looks (owner, 2026-10-28);
   Resume, while the plan is ending, solid green as Upgrade is (owner,
   2026-10-28). Both open a dialog. */
.plans-pills { display:flex; align-items:center; gap:8px; flex:none; }
.plans-pill.is-cancel { cursor:pointer; }
.plans-pill.is-resume, .plans-pill.is-buy { cursor:pointer; }
.plans-pill.is-cancel:hover { background:var(--text); border-color:var(--text); color:var(--bg); }
.plans-pill.is-resume:hover, .plans-pill.is-buy:hover { filter:brightness(1.08); }
/* A plan set to end says so where Your Plan was, in a solid red pill, right
   of Resume (owner, 2026-10-28). */
.plans-pill.is-ends { border-color:var(--sc-red); background:var(--sc-red); color:#fff; }
/* Compare's Columns opens under its button, at the card's right, in the
   menus' cream. Both classes, so .filter-menu's left and background, later
   in this file, don't win. */
.filter-menu.columns-menu { left:auto; right:0; background:var(--tool-menu); }
.compare-table td, .compare-table tbody th { white-space:nowrap; }
/* The plan they are on, as Boo's Models marks the default model's row
   (owner, 2026-10-28): the selected background and a green bar at its left. */
/* The plan they are on takes the page's lighter background (owner,
   2026-10-28). */
.compare-table tbody tr.is-yours { background:var(--row-pick); }
/* Every row of a table lifts to it under the pointer, and none stays lifted
   for being picked: the ticked box says that (owner, 2026-11-01: "i want the
   rollover background change always. same with security"). Identity copies
   this. A row itself opens nothing: its controls do (owner, 2026-11-01:
   "lets remove the row click then"). */
.acct-table tbody tr:not(.row-space):not(:has(> td.acct-none)):hover { background:var(--row-pick); }
/* Every plain button shows what it sits on until hovered, then the page's
   text colour behind the page's background colour, dark on light, light on
   dark (owner, 2026-11-05). Green, red and shade buttons keep their colour. */
/* The row's height of nothing after a list's last row (ui.jsx ListEndSpace). */
.acct-table tr.row-space { visibility:hidden; }
/* With what is under it, one row in all: the card's 16px foot in Settings, and
   Accounts' 12px gap above its pager, whose rows are 36px. */
.acct-table tr.row-space { height:16px; }
.acct-table tr.row-space td { padding:0; border-bottom:0; line-height:0; }
.accounts-table tr.row-space { height:24px; }
.compare-table tbody tr.is-yours > td:first-child { position:relative; }
.compare-table tbody tr.is-yours > td:first-child::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--sc-green); }
/* Another plan's box chooses it (owner, 2026-10-28). */
.plans-box.is-choosable { cursor:pointer; }
/* Downgrade's button (owner, 2026-10-28): dark with light words in light
   mode, light with dark words in dark mode; Upgrade's is the green
   btn-primary. */
.btn.btn-shade { background:var(--shade); border-color:var(--shade-line); color:var(--shade-ink); }
/* Every dialog's buttons in the page's IBM Plex Sans, as demo-00's are, and
   their words as written, not capitals (owner, 2026-10-28: "Cancel, Upgrade
   and Downgrade should not be all caps"; "make sure we're using the correct
   font for the buttons in our modals"). */
.modal .btn { font-family:'IBM Plex Sans',sans-serif; text-transform:none; letter-spacing:normal; font-size:12.5px; font-weight:500; }
/* A dialog's plain buttons (Cancel, Back, Keep Plan) are its cream, lifting
   lighter under the pointer, not the darker --bg2 (owner, 2026-10-28). */
.modal .btn:not(.btn-primary):not(.btn-danger):not(.btn-shade) { background:var(--dialog); }
.modal .btn:not(.btn-primary):not(.btn-danger):not(.btn-shade):hover:not(:disabled) { background:var(--text); border-color:var(--text); color:var(--bg); }
/* A plan change's math, in a rounded box (owner, 2026-10-28): each part, then
   the sum under a rule and what is charged or credited in bold. */
.plan-math { display:flex; flex-direction:column; gap:6px; margin:4px 0 0; padding:12px 14px; border:1px solid var(--border-strong); border-radius:10px; background:var(--dialog); font-size:12.5px; }
.plan-math > div { display:flex; justify-content:space-between; gap:16px; }
.plan-math dt { color:var(--text2); }
.plan-math dd { margin:0; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* An amount Stripe's preview hasn't answered yet: a quiet bar its own size,
   so the box keeps its shape when the amounts arrive. */
.plan-math dd.is-pending { align-self:center; width:52px; height:1em; border-radius:4px; background:var(--bg3); }
.plan-math .plan-math-sum { margin-top:4px; padding-top:8px; border-top:1px solid var(--border); }
.plan-math .plan-math-total dt, .plan-math .plan-math-total dd { color:var(--text); font-weight:600; }
/* Register device is Security's dialog over the page (owner, 2026-10-28: "it
   should just be modals on the current screen"). Its two choices are the
   lighter colour with no outline, and turn green with the green pills' ink
   under the pointer, in both themes (owner, 2026-10-28). The app's QR code
   and key share a box like the plan math's; the QR code keeps its white
   ground in both themes so every scanner reads it, and the recovery codes
   sit in the same box. */
.device-choices { display:flex; flex-direction:column; gap:8px; }
.device-choice { display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; padding:13px 15px; border:0;
  border-radius:10px; background:var(--lift); color:var(--text); font-family:'IBM Plex Sans',sans-serif; cursor:pointer; }
.device-choice:hover:not(:disabled) { background:var(--sc-green); color:var(--go-ink); }
.device-choice:hover:not(:disabled) span { color:var(--go-ink); }
.device-choice:disabled { opacity:0.5; cursor:wait; }
.device-choice b { font-size:13px; font-weight:500; }
.device-choice span { font-size:12px; line-height:1.4; color:var(--text2); }
/* Add a sign-in method's choices (owner, 2026-10-29): sized as the sign-in
   card's Continue with buttons, tidy and centred, its mark beside its name,
   in the lighter colour with no border, green under the pointer as Register
   device's choices are. */
.method-choices { display:flex; flex-direction:column; gap:8px; }
.method-choice { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:10px 16px;
  border:0; border-radius:6px; background:var(--lift); color:var(--text);
  font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; font-weight:500; }
.method-choice:hover:not(:disabled) { background:var(--sc-green); color:var(--go-ink); }
.method-choice:disabled { opacity:0.5; cursor:wait; }
.totp-box { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--border-strong);
  border-radius:10px; background:var(--dialog); }
.totp-box .qr { padding:8px; }
.totp-box .qr svg { width:136px; height:136px; }
.totp-key { flex:1; min-width:160px; margin:0; }
.totp-key dt { font-size:12px; color:var(--text2); }
.totp-key dd { margin:6px 0 0; font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.5; color:var(--text); overflow-wrap:anywhere; }
.modal .codes { border-color:var(--border-strong); border-radius:10px; background:var(--dialog); }
/* The plan's name is a row header but draws as the cells beside it (owner,
   2026-10-28): .acct-table th's stronger rule read as a thicker line. */
.compare-table tbody th { text-align:left; font-weight:400; padding:7px 14px; border-bottom:1px solid var(--border); font-size:13px; letter-spacing:0.06em; }
.plans-includes { display:flex; flex-direction:column; gap:8px; color:var(--text2); font-size:12.5px; line-height:1.45; }
.plans-base { margin:0; color:var(--text); font-weight:500; }
.plans-rule { margin:0; border:0; border-top:1px solid var(--border); }
/* The price at the plan name's size, with no label and "/ month" smaller
   (owner, 2026-10-28). */
.plans-price { margin:0; color:var(--text2); font-size:30px; font-weight:500; line-height:1.2; white-space:nowrap; }
.plans-per { font-size:14px; font-weight:400; }
.plans-features { display:flex; flex-direction:column; gap:7px; margin:0; padding:0; list-style:none; }
.plans-features li { display:flex; align-items:flex-start; gap:8px; }
/* Each feature's mark is Compare's checkbox, always ticked (owner,
   2026-10-28): .pick-box's size, corner and tick, without an input, filled
   green with the tick in the green pills' ink (light in light mode, dark in
   dark mode). */
.plans-features .feature-check { flex:none; margin-top:2px; }
.feature-box { width:13px; height:13px; border:1px solid var(--sc-green); border-radius:2px; background:var(--sc-green); }
.feature-check .pick-tick { display:block; stroke:var(--go-ink); }
.search { max-width:360px; }
/* YottaBot Desktop's sign-in (plan #253): one line above the tabs, outlined
   in green on a see-through green (owner, 2026-10-19). */
.desktop-signin { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:10px 14px; border:1px solid var(--sc-green); border-radius:8px; background:rgba(124,189,60,0.1);
  font-size:12.5px; color:var(--text2); }
.desktop-signin b { color:var(--text); font-weight:600; }
/* The search and its Filters, side by side (owner, 2026-10-19). */
.search-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.search-row .search { flex:1 1 240px; }
/* Filters, drawn like demo-00's Agent Platform -> Agents list (owner,
   2026-10-19) with the portal's rounded corners: the button, its menu of
   checkboxes, and a chip per chosen filter. Their words are in their own
   case, not capitals (owner, 2026-10-23). */
.filter-anchor { position:relative; }
.filter-btn { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border:1px solid var(--border); border-radius:6px;
  background:var(--tool); color:var(--text); font-size:12px; letter-spacing:0.02em; white-space:nowrap; }
/* Labels and Filters are the cream tools Actions and Columns are, and so are
   their dropdowns; the dropdown's search and what lifts in them take the
   lighter colour (owner, 2026-10-28). Dark mode keeps its colours. */
.filter-btn:hover, .filter-btn[aria-expanded="true"] { background:var(--text); border-color:var(--text); color:var(--bg); }
.filter-btn:hover .filter-count, .filter-btn[aria-expanded="true"] .filter-count { background:var(--bg); color:var(--text); }
.filter-btn.is-on { border-color:var(--border-strong); }
.filter-count { display:inline-grid; place-items:center; min-width:17px; height:16px; padding:0 4px; border-radius:4px;
  background:var(--text); color:var(--bg); font-size:10px; letter-spacing:0; }
.filter-caret { font-size:10px; opacity:0.6; transition:transform 0.12s; }
.filter-caret.is-open { transform:rotate(180deg); }
.filter-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:20; width:260px; display:flex; flex-direction:column;
  background:var(--tool-menu); border:1px solid var(--border-strong); border-radius:8px; box-shadow:0 8px 32px rgba(35,26,21,0.22); overflow:hidden; }
.filter-search-row { padding:10px; border-bottom:1px solid var(--border); }
.filter-search { width:100%; background:var(--well); border:1px solid var(--border); border-radius:6px; color:var(--text);
  padding:7px 10px; font-size:12px; }
.filter-search:focus { border-color:var(--border-strong); }
.filter-list { max-height:260px; overflow-y:auto; padding:4px 0; }
.filter-group { padding:8px 12px 4px; font-size:11px; letter-spacing:0.02em; color:var(--text3); }
.filter-option { display:flex; align-items:center; gap:9px; padding:8px 12px; font-size:12.5px; color:var(--text2); cursor:pointer; }
.filter-option:hover { background:var(--lift); color:var(--text); }
.filter-option.on { color:var(--text); }
/* Compare's checkbox, drawn here (owner, 2026-10-28): the browser's tinted
   box drew its tick in the menu's colour. Green when ticked, the tick in the
   green pills' ink, light in light mode and dark in dark mode. The tick is
   CSS borders: the page's Content-Security-Policy refuses a data: image. */
.filter-option input { flex:none; appearance:none; -webkit-appearance:none; width:13px; height:13px; margin:0; display:grid; place-content:center; border:1px solid var(--border-strong); border-radius:2px; background:transparent; cursor:pointer; }
.filter-option input:checked { border-color:var(--sc-green); background:var(--sc-green); }
.filter-option input:checked::before { content:''; width:3px; height:7px; margin-top:-2px; border:solid var(--go-ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
.filter-none { padding:20px 12px; text-align:center; font-size:11px; letter-spacing:0.08em; color:var(--text3); }
.filter-foot { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-top:1px solid var(--border);
  font-size:11px; letter-spacing:0.02em; color:var(--text3); }
.filter-reset { padding:4px 10px; border:1px solid var(--border); border-radius:6px; color:var(--text2); font-size:11px;
  letter-spacing:0.02em; }
.filter-reset:disabled { opacity:0.4; cursor:not-allowed; }
/* What is chosen, in the row below the search (owner, 2026-10-19). */
.filter-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.filter-clear { height:30px; padding:0 12px; border:1px dashed var(--border-strong); border-radius:999px; color:var(--text3);
  font-size:11px; letter-spacing:0.02em; }
.filter-clear:hover { color:var(--text); }
.filter-chip { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border:1px solid var(--border-strong);
  border-radius:999px; background:var(--surface2); color:var(--text); font-size:12px; }
.filter-chip span { font-size:10px; opacity:0.6; }
.filter-chip:hover span { opacity:1; }
.accounts { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.account { padding:14px 18px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; background:var(--surface); }
.account:first-child { border-top:0; }
.account .name { font-size:14px; color:var(--text); }
.account .meta { font-size:11px; color:var(--text3); display:flex; gap:14px; flex-wrap:wrap; }
.account .set { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:6px; background:var(--bg); }
.account .set .label { font-size:12px; color:var(--text2); }
.account .set .label b { color:var(--text); font-weight:500; }
.account .set .label .avail { margin-top:2px; font-size:11px; color:var(--text3); }
/* A Web Portal's role opens with the dialogs' green button, in its own case
   (owner, 2026-10-29), not the old capitals; one that can't open is a quiet
   Unavailable. */
.btn.open { flex:none; white-space:nowrap; }
.btn.open[aria-disabled="true"] { background:transparent; color:var(--text3); cursor:not-allowed; }
/* Access keys (#258 §6): a second action beside Open, and the modal that shows the keys once. */
.account .set { flex-wrap:wrap; }
/* The Apps dialog's roles on the cream dialog: their panel the dialog's
   colour, each role the lighter colour in light mode and the page's dark in
   dark mode as before (--well). */
.modal .account { background:var(--dialog); }
.modal .account .set { background:var(--well); flex-wrap:nowrap; }
/* The Apps dialog's roles: the name at the left, Open at the right, on one
   line at every width (owner, 2026-11-03); a long name ends in an ellipsis. */
.modal .account .set .label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set-actions { display:flex; gap:8px; align-items:center; }
.keys { padding:5px 12px; border-radius:6px; border:1px solid var(--border-strong); background:transparent; color:var(--text);
  font-size:10px; letter-spacing:0.14em; cursor:pointer; }
.keys[disabled] { color:var(--text3); cursor:wait; }
.set-error { flex-basis:100%; }
/* Settings (#258 U8): AWS's Security page, two tables with their actions. */
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:28px; }
.card-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn { padding:6px 12px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text);
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; }
/* demo-00's rounded-rectangle buttons (owner, 2026-10-23; the bot frontend's
   orgBtn): Plex Mono, upper case, 6 px corners, the green primary. */
.btn:hover:not(:disabled):not(.btn-primary):not(.btn-danger):not(.btn-shade) { background:var(--text); border-color:var(--text); color:var(--bg); }
.btn:disabled { opacity:0.45; cursor:not-allowed; }
.btn-primary { background:var(--sc-green); border-color:var(--sc-green); color:var(--go-ink); }
.btn-danger { background:var(--sc-red); border-color:var(--sc-red); color:#fff; }
/* A filled button shows no outline under the pointer (owner, 2026-10-28:
   "turn on shouldn't have an outline on the button"): its border stays its
   fill, and it brightens as the solid green Resume does. */
.btn-primary:hover:not(:disabled) { border-color:var(--sc-green); filter:brightness(1.08); }
.btn-danger:hover:not(:disabled) { border-color:var(--sc-red); filter:brightness(1.08); }
.btn.btn-shade:hover:not(:disabled) { border-color:var(--shade-line); filter:brightness(1.08); }
/* demo-00's table toolbar (owner, 2026-10-23; the bot frontend's DataTable
   and CreateButton): a 28 px round refresh, Actions with no fill until a row
   is picked, and the green + square. Actions and its items are in their own
   case, not demo-00's capitals (owner, 2026-10-23), and in the page's IBM
   Plex Sans, as demo-00's are (owner, 2026-10-28).
   Corners are this portal's (6 px buttons, the Filters menu's 8 px), not
   demo-00's 3 px and square menu: new UI is rounded. */
.round-btn { width:28px; height:28px; padding:0; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:6px; background:var(--table-tool); color:var(--text); cursor:pointer; }
.round-btn:hover { background:var(--text); border-color:var(--text); color:var(--bg); }
/* Profile's pencil is a bare icon (owner, 2026-10-23): no circle, a rounded
   rectangle only on hover. */
.edit-btn { width:28px; height:28px; padding:0; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--text2); cursor:pointer; }
.edit-btn:hover { background:var(--text); border-color:var(--text); color:var(--bg); }
.btn-actions { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--border); border-radius:6px;
  background:var(--table-tool); color:var(--text); font-family:'IBM Plex Sans',sans-serif; font-size:12px; letter-spacing:normal; cursor:pointer; }
.btn-actions:hover:not(:disabled), .btn-actions.is-open { background:var(--text); border-color:var(--text); color:var(--bg); }
/* Dimmed by its words alone. */
.btn-actions:disabled { color:var(--text3); cursor:not-allowed; }
.btn-actions .caret { font-size:9px; opacity:0.8; }
/* The + in the green pills' ink, light in light mode and dark in dark mode
   (owner, 2026-10-28). */
.add-btn { width:28px; height:28px; padding:0; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--sc-green); border-radius:6px; background:var(--sc-green); color:var(--go-ink); line-height:1;
  font-family:'IBM Plex Mono',monospace; font-size:15px; cursor:pointer; }
.add-btn:disabled { opacity:0.4; cursor:not-allowed; }
.menu-anchor { position:relative; flex-shrink:0; }
.card-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:50; min-width:200px; display:flex; flex-direction:column;
  background:var(--tool-menu); border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; box-shadow:0 8px 32px rgba(35,26,21,0.16); }
.card-menu-item { display:block; width:100%; text-align:left; padding:8px 12px; font-family:'IBM Plex Sans',sans-serif; font-size:12px;
  letter-spacing:normal; color:var(--text); }
.card-menu-item:hover:not(:disabled) { background:var(--surface2); }
.card-menu-item:disabled { opacity:0.5; cursor:not-allowed; }
.card-menu-item.is-danger { color:var(--sc-red); }
.card-form { display:flex; flex-direction:column; gap:12px; }
.card-foot { display:flex; justify-content:flex-end; gap:8px; padding-top:12px; border-top:1px solid var(--border); }
.profile-input { max-width:420px; padding:6px 10px; font-size:12px; }
.profile { display:grid; grid-template-columns:max-content 1fr; gap:10px 24px; align-items:center; font-size:12px; }
.profile dt { color:var(--text3); }
.profile dd { color:var(--text); margin:0; }
.acct-card .meta { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; font-size:12px; color:var(--text2); }
.profile .meta { color:var(--text); }
.acct-table td.pick { width:28px; }
.acct-table th.pick { width:28px; }
/* Every Settings table picks rows alike (owner, 2026-10-23), with demo-00's
   checkbox: flat, a hairline border, a tick in --text when checked and a dash
   when some are. The tick is an SVG beside the box, not demo-00's data:
   image, which the page's Content-Security-Policy refuses. */
.pick-box { position:relative; display:inline-flex; width:13px; height:13px; vertical-align:middle; }
.pick-box input { appearance:none; -webkit-appearance:none; width:13px; height:13px; margin:0; border:1px solid var(--border-strong);
  border-radius:2px; background:transparent; cursor:pointer; }
.pick-tick { display:none; position:absolute; left:1px; top:1px; width:11px; height:11px; pointer-events:none;
  fill:none; stroke:var(--text); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* Every table's ticked box green, its tick in the green pills' ink (owner,
   2026-10-28). */
.pick-box input:checked { border-color:var(--sc-green); background:var(--sc-green); }
.pick-box input:checked ~ .pick-tick { display:block; stroke:var(--go-ink); }
.pick-box input:disabled { opacity:0.4; cursor:not-allowed; }
.pick-dash { display:none; position:absolute; left:3px; top:5.5px; width:7px; height:2px; background:var(--text); pointer-events:none; }
.pick-box input:indeterminate ~ .pick-tick { display:none; }
.pick-box input:indeterminate ~ .pick-dash { display:block; }
/* A picked row takes Compare's row background (owner, 2026-10-28). */
/* A click on a row ticks its box, as on MFA devices (owner, 2026-11-01:
   "rows are ticked by selecting the row"); a method that can't be picked
   (the last, or the organization's) has no hand. */
.device-row, .method-row, .session-row { cursor:pointer; }
.method-row.is-fixed { cursor:default; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
/* demo-00's dialogs (owner, 2026-10-19): a rounded panel over the page,
   which blurs behind it, header included. */
.modal-back { position:fixed; inset:0; background:rgba(35,26,21,0.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:100; }
.modal { width:100%; max-width:640px; max-height:calc(100vh - 32px); overflow:auto; background:var(--dialog); border:1px solid var(--border-strong);
  border-radius:12px; padding:20px 22px 22px; box-shadow:0 12px 40px rgba(35,26,21,0.5); display:flex; flex-direction:column; gap:14px; }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
/* Every dialog's ✕ is the page's .icon-btn (ui.jsx CloseButton; owner,
   2026-10-28): no outline, a rounded box only on hover. It sits up and out
   a little so the ✕ itself lines up with the title and the dialog's edge. */
.modal-head > .icon-btn { flex-shrink:0; margin:-4px -6px 0 0; }
/* Close has an outline, on whatever it sits on (owner, 2026-11-05). */
.close-btn, .page-close { border:1px solid var(--border); background:transparent; }
.close-btn:hover:not(:disabled), .page-close:hover:not(:disabled) { border-color:var(--text); }
/* A field in a dialog (owner, 2026-10-28): its name in its own case and the
   dialog's words, not the sign-in card's spaced capitals, and its fill the
   lighter colour in light mode (--well). */
/* A dialog's field: its name bold, then any note about it, not bold, then
   the box (owner, 2026-11-02: "[field label, bold] [note/detail, not
   bold]"), in Boo Desktop, Boo Web, Identity and here alike. */
.modal .field > span { font-size:12px; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--text2); }
.modal .field > .hint { margin-top:-2px; font-size:12px; font-weight:400; letter-spacing:normal; color:var(--text3); }
/* A dropdown shows its caret, the Filters' ▾ (owner, 2026-11-02: "if
   something has a drop down have the carrot please"). */
.select-box { position:relative; display:block; }
.select-box > select.input { width:100%; padding-right:30px; }
.select-box::after { content:'▾'; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:10px; opacity:0.6;
  color:var(--text); pointer-events:none; }
.modal .input { background:var(--well); }
/* A short dialog, after .modal so it wins. */
.modal.modal-small { max-width:440px; }
.modal h3 { font-size:15px; font-weight:600; color:var(--text); }
.modal-sub { margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--text2); }
.modal-text { font-size:12.5px; line-height:1.5; color:var(--text2); }
.copy-block { border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.copy-head { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; font-size:11px; color:var(--text2); background:var(--bg); }
.copy-note { padding:6px 10px; font-size:11px; color:var(--text2); border-top:1px solid var(--border); }
.copy-block pre { margin:0; padding:10px; font-size:11px; line-height:1.5; white-space:pre-wrap; word-break:break-all; color:var(--text);
  font-family:'IBM Plex Mono',monospace; background:var(--bg2); }
/* Code colours (owner, 2026-10-26): keyword, name, operator; a value is plain text. */
.tok-kw { color:var(--sc-magenta); }
.tok-var { color:var(--sc-blue); }
.tok-op { color:var(--text3); }
.tok-str { color:var(--text); }
/* Access Keys is as tall as it needs, and the page behind scrolls (owner,
   2026-10-26: AWS's box spills off the page rather than squeezing). */
.modal-back.modal-scroll { overflow-y:auto; align-items:flex-start; padding:48px 16px; }
.modal.modal-keys { max-height:none; overflow:visible; }
.modal .keys-title { color:var(--text); font-weight:500; }
.keys-facts { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px 18px; margin:0; padding:12px 14px;
  border:1px solid var(--border); border-radius:8px; background:var(--bg); }
.keys-facts dt { font-size:11px; color:var(--text3); }
.keys-facts dd { margin:3px 0 0; font-size:13px; color:var(--text); overflow-wrap:anywhere; }
@media (max-width: 599px) { .keys-facts { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.empty { padding:28px; border:1px dashed var(--border-strong); border-radius:8px; color:var(--text2); font-size:13px; line-height:1.6; }

/* ── The Access Portal (14a7): tabs, application tiles ───────────── */
.badge { margin-left:8px; font-size:8px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text2);
  border:1px solid var(--border-strong); border-radius:999px; padding:2px 8px; vertical-align:middle; }
/* Solid pills (owner, 2026-11-05): an account's Management is yellow with dark
   letters, a production label red with white, any other label the page's
   text colour. */
.badge.is-management { border-color:var(--sc-yellow); background:var(--sc-yellow); color:#231a15; }
.badge.label { border-color:var(--text); background:var(--text); color:var(--bg); }
.badge.label.is-production { border-color:var(--sc-red); background:var(--sc-red); color:#fff; }
/* An account's label (owner, 2026-10-19: production for now) is a pill like
   Management, in capitals (owner, 2026-10-23): pills stay capitals while the
   rest of the page doesn't. */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); }
/* demo-00's tabs (owner, 2026-10-19), the open one bold over a green line;
   in their own case, not capitals (owner, 2026-10-23). */
.tab { padding:9px 12px 7px; margin-bottom:-1px; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; font-size:12px;
  letter-spacing:0.02em; color:var(--text2); display:flex; align-items:center; gap:8px; }
.tab[aria-selected="true"] { color:var(--text); font-weight:700; border-bottom-color:var(--sc-green); }
.tab .count { font-size:11px; color:var(--text3); }
.panel { display:flex; flex-direction:column; gap:16px; }
.tiles { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(146px, 1fr)); gap:24px; }
/* Okta's tile (U10): the icon centred above the name, at Okta's size
   (owner's screenshot, 2026-10-19): about 146 px, 24 px apart, six to a
   996 px row, and square (owner, 2026-10-19). The logo sits in a 72 px band
   whose middle is 56 px down; the name starts 92 px down, and a caption
   follows it. A tile that can't open has its issue icon at the top left. */
.tiles > li { position:relative; }
.tile { width:100%; aspect-ratio:1 / 1; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:20px 8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--tile);
  box-shadow:5px 5px 7px rgba(35,26,21,0.15); }
/* Apps' card is Accounts' colour with no plus grid (owner, 2026-10-25), and
   its tiles are Create Account's panels with their shadow, the plans' in dark
   (.plan; owner, 2026-10-19). The card doesn't clip, so a Filters menu can
   hang below it. */
/* 5 px right and down, 7 px blur, 15% (owner, 2026-10-28). */
[data-theme="dark"] .tile { box-shadow:5px 5px 7px rgba(35,26,21,0.15); }
.apps-card { position:relative; }
/* The Apps tab's groups (owner, 2026-10-31): under the search and Filters,
   each group's name and count on a button that folds it, its chevron turned
   down while open, then its tiles; a line between groups. */
/* Its head, Apps with the search and Filters over a divider (owner,
   2026-10-31), is pinned under Home and the tabs while the groups pass under
   it: at --apps-top, where .page-top ends (applications.jsx AppGroups). It
   takes back the card's padding and border and draws the card's top edge,
   its border and rounded corners, itself, so pinned it is where and what it
   was at rest: nothing above the groups moves (owner, 2026-10-31: "it's
   still moving"). */
.apps-head { position:sticky; top:var(--apps-top, 0px); z-index:5; display:flex; flex-direction:column; gap:12px;
  margin:-17px -19px 0; padding:16px 18px 0; border:1px solid var(--border); border-bottom:0; border-radius:10px 10px 0 0;
  background:var(--card-lift); }
.apps-head::after { content:''; height:1px; background:var(--border); }
/* YottaBot Apps' accounts selector, under the search (owner, 2026-11-05). */
/* The search and the selector under it share one column, so they are always
   one width; Labels stays level with the search. */
.search-row:has(.search-stack) { align-items:flex-start; }
.search-stack { flex:1 1 240px; max-width:360px; display:flex; flex-direction:column; gap:10px; }
.search-stack .search { flex:none; max-width:none; }
.account-pick .filter-btn { width:100%; height:39px; justify-content:space-between; }
.account-pick .size-menu { width:100%; }
.grant-total { color:var(--text); font-weight:500; }
.account-pick .size-option { font-family:inherit; font-size:12px; letter-spacing:0.02em; white-space:nowrap; }
/* Downloads' version picker (owner, 2026-11-12), drawn as the accounts selector. */
.version-pick .filter-btn { min-width:160px; height:39px; justify-content:space-between; }
.version-pick .size-menu { width:100%; }
.version-pick .size-option { font-family:inherit; font-size:12px; letter-spacing:0.02em; white-space:nowrap; }
.app-group { display:flex; flex-direction:column; gap:12px; }
.app-group + .app-group { border-top:1px solid var(--border); padding-top:14px; }
.group-head { margin:0; font-size:13px; font-weight:600; }
.group-head button { display:inline-flex; align-items:center; gap:6px; margin-left:-4px; padding:4px 8px 4px 2px; border-radius:6px; color:var(--text); }
.group-head button:hover { background:rgba(var(--chrome-rgb),0.05); }
.group-head svg { flex:none; color:var(--text3); transition:transform 120ms ease; }
.group-head button[aria-expanded="true"] svg { transform:rotate(90deg); }
.group-head .count { color:var(--text3); font-weight:400; }
.group-body { display:flex; flex-direction:column; gap:12px; }
.group-body[hidden] { display:none; }
/* Apps' Edit (owner, 2026-10-31): Filters' border and hover, at the right of
   the search row; while editing, Cancel and a green Save there instead. */
/* The pencil alone (owner, 2026-10-31: "you don't need the word edit"),
   square at the row's height, with no border ("don't put a border around
   the edit button"); it lifts under the pointer as Filters does. */
.apps-edit { margin-left:auto; width:40px; padding:0; justify-content:center; }
.edit-actions { margin-left:auto; display:flex; gap:8px; }
.filter-btn.edit-save { background:var(--sc-green); border-color:var(--sc-green); color:var(--go-ink); }
.filter-btn.edit-save:hover:not(:disabled) { background:var(--sc-green); filter:brightness(1.08); }
.filter-btn.edit-save:disabled { opacity:0.6; cursor:wait; }
.edit-hint { font-size:12.5px; color:var(--text2); }
/* A category while editing: its handle, its name in a field, its count and
   Move menu; the place it would go lifts while something is dragged over it. */
.edit-head { display:flex; align-items:center; gap:8px; }
.drag-grip { display:inline-flex; padding:6px 4px; border-radius:6px; color:var(--text3); cursor:grab; touch-action:none; user-select:none; }
.drag-grip:hover { background:rgba(var(--chrome-rgb),0.05); color:var(--text2); }
.input.group-name { width:260px; height:34px; padding:0 10px; font-size:13px; font-weight:600; }
.edit-head .count { font-size:12px; color:var(--text3); }
.edit-group { border-radius:10px; transition:background 0.12s; }
.edit-group.is-over { background:rgba(var(--chrome-rgb),0.05); }
.edit-tile { cursor:grab; touch-action:none; user-select:none; }
.edit-tile .tile { cursor:grab; }
.edit-tile.is-dragging, .edit-group.is-dragging { opacity:0.4; }
/* What is being dragged follows the pointer: a tile, or a category's name. */
.drag-ghost { position:fixed; z-index:60; pointer-events:none; transform:translate(-50%, -50%) rotate(-2deg); opacity:0.92; }
.drag-ghost .tile { width:146px; box-shadow:0 14px 30px rgba(35,26,21,0.3); }
.drag-ghost.is-group { padding:8px 14px; border:1px solid var(--border-strong); border-radius:8px; background:var(--card-lift);
  font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; box-shadow:0 14px 30px rgba(35,26,21,0.3); }
.drop-here { padding:22px; border:1px dashed var(--border-strong); border-radius:10px; text-align:center; font-size:12.5px; color:var(--text3); }
.move-anchor { position:relative; }
.edit-tile .move-anchor { position:absolute; top:6px; right:6px; }
.move-btn { display:inline-grid; place-items:center; width:26px; height:26px; padding:0; border-radius:6px; color:var(--text3); }
.move-btn:hover, .move-btn[aria-expanded="true"] { background:var(--text); color:var(--bg); }
.move-menu { position:absolute; top:calc(100% + 4px); right:0; z-index:20; min-width:180px; display:flex; flex-direction:column; padding:4px 0;
  background:var(--tool-menu); border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 28px rgba(35,26,21,0.25); }
.move-menu-title { padding:6px 12px 4px; font-size:11px; color:var(--text3); }
.move-menu button { padding:8px 12px; text-align:left; font-size:12.5px; color:var(--text2); white-space:nowrap; }
.move-menu button:hover:not(:disabled) { background:var(--lift); color:var(--text); }
.move-menu button:disabled { opacity:0.45; cursor:default; }
/* A category's Delete is red, as Sign Out is. */
.move-menu button.is-danger { color:var(--sc-red); }
.move-menu button.is-danger:hover { color:var(--sc-red); }
/* A tile inverts as the buttons do (owner, 2026-11-05). One that can't open
   doesn't. */
.tile:hover:not([aria-disabled="true"]):not(:disabled) { background:var(--text); border-color:var(--text); }
.tile:hover:not([aria-disabled="true"]):not(:disabled) .tile-name { color:var(--bg); }
.tile:hover:not([aria-disabled="true"]):not(:disabled) .tile-caption { color:var(--bg); opacity:0.7; }
.tile:hover:not([aria-disabled="true"]):not(:disabled) .tile-icon.kind-yotta,
.tile:hover:not([aria-disabled="true"]):not(:disabled) .tile-icon.kind-mark { color:var(--bg); }
/* Our default icons change with the tile; Boo's pictures and a tool's own
   mark keep their colours (owner, 2026-11-05). */
.tile:hover:not([aria-disabled="true"]):not(:disabled) .tile-icon:not(.kind-yotta):not(.kind-mark) { background:color-mix(in srgb, var(--bg) 14%, transparent); color:var(--bg); }
.tile[aria-disabled="true"] { cursor:not-allowed; }
.tile[aria-disabled="true"] .tile-icon, .tile[aria-disabled="true"] .tile-name, .tile[aria-disabled="true"] .tile-caption { opacity:0.55; }
.tile:disabled { cursor:wait; opacity:0.7; }
.tile-icon { flex-shrink:0; width:56px; height:56px; margin:8px 0; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--tile-icon); color:var(--text2); }
/* YottaBot's own apps are just the ghost (owner, 2026-10-19): no box behind
   it, in the page's text colour. */
.tile-icon.kind-yotta { background:none; color:var(--text); width:40px; height:40px; margin:16px 0; }
/* The size of Slack's logo on Okta's tile (owner, 2026-10-19). */
.tile-icon.kind-yotta .ghost { width:40px; height:40px; }
/* Boo Desktop, Web and Mobile show Boo's own picture at the ghost's size
   (owner, 2026-10-27). */
.tile-icon.kind-yotta .boo { width:40px; height:40px; }
/* A tool's own mark, like the ghost: no box, 40 px (owner, 2026-10-26). */
.tile-icon.kind-mark { background:none; width:40px; height:40px; margin:16px 0; color:var(--text); }
.tile-icon.kind-mark .mark { width:40px; height:40px; }
.tile-icon.kind-oidc { color:var(--sc-magenta); }
.tile-icon.kind-saml { color:var(--sc-red); }
.tile-name { font-size:14px; line-height:1.35; color:var(--text); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* The account under Boo Desktop (owner, 2026-10-19). */
.tile-caption { margin-top:2px; font-size:12px; line-height:1.35; color:var(--text3); overflow-wrap:anywhere; }
/* The issue icon (owner, 2026-10-19): it opens the dialog that says why. */
.tile-issue { position:absolute; top:8px; left:8px; width:24px; height:24px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:var(--sc-orange); }
.tile-issue:hover { background:var(--bg2); }
.roles .account { padding:10px; }

/* ── Create Account's form controls (the workflow's steps; the enterprise
   request's own page retired 2026-10-26) ─────────────────────────────── */
select.input { appearance:none; cursor:pointer; }
/* .field > .hint outranks the label rule .field > span. */
.field > .hint, .hint { font-size:10px; color:var(--text3); letter-spacing:0.02em; line-height:1.4; text-transform:none; }
.check { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text); cursor:pointer; }
.card-preview { border:1px dashed var(--border-strong); border-radius:8px; padding:14px; margin:0; display:flex; flex-direction:column; gap:12px; }
.card-preview legend { font-size:9px; letter-spacing:0.18em; color:var(--text3); text-transform:uppercase; padding:0 6px; }
.card-preview .input { color:var(--text3); }

@media (max-width: 760px) {
  .app-main { --main-top:20px; padding:var(--main-top) 14px 60px; }
  .account .set { flex-direction:column; align-items:flex-start; }
  .modal .account .set { flex-direction:row; align-items:center; }
}
/* The header's full 18 px name fits down to about 480 px, as admin's and the
   investor portals' does; only a phone needs it smaller. */
@media (max-width: 480px) {
  .brand-name { font-size:12px; }
}

/* Focus (owner, 2026-10-08: no blue focus outline). A text field shows its
   caret, so it draws no ring at all. A click or tap draws none either.
   Keyboard focus keeps a thin neutral ring, because without one Tab moves
   through the page invisibly. */
input:focus, textarea:focus, select:focus, [contenteditable]:focus { outline: none; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--text2); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline: none; }
.flow.at-plan .flow-step.alone .port.out { transform:scale(0); }
/* Step 1, Sign In Method (owner, 2026-10-25): the sign-in card's twin
   between Sign In and Select A Plan, beneath the one and above the other. It comes in as Select A Plan did, dims
   once Step 2 is in view, and its edge to Step 2 draws then. */
.flow-method { width:400px; opacity:0; transform:translateY(18px); transition:opacity 0.25s ease, transform 0.25s ease; }
.flow.at-method .flow-method { opacity:1; transform:none; transition:opacity 0.45s ease 0.5s, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }
.flow.at-plan .flow-method { opacity:0.5; transition:opacity 0.5s ease; }
.flow.at-method .flow-method .port.in { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s; }
.flow.at-plan .flow-method .port.out { transform:scale(1); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s; }
.edge-mid { transition:stroke-dashoffset 0.3s ease; }
.flow.at-plan .edge-mid { stroke-dashoffset:0; transition:stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.15s; }
@media (max-width: 1023px) {
  .flow:not(.at-method) .flow-method, .flow.at-plan .flow-method { display:none; }
  .flow.at-method .flow-signin { display:none; }
  .flow.at-method .flow-method { opacity:1; }
}
/* The email's check mark, or Unverified with Resend (owner, 2026-10-26). */
.profile-email { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
/* The email's state as a pill (owner, 2026-10-28): Verified green, Not
   Verified red. See-through since 2026-11-01, as Identity's status pills
   ("let's have verified share the same style for security and for a user
   email status"): the colour is the border and the words, over a light tint
   of it. */
.email-pill { flex:none; padding:1px 8px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:600; line-height:1.6; white-space:nowrap; }
.email-pill.is-verified { border-color:var(--sc-green); background:color-mix(in srgb, var(--sc-green) 18%, transparent); color:var(--sc-green); }
.email-pill.is-unverified { border-color:var(--sc-red); background:color-mix(in srgb, var(--sc-red) 18%, transparent); color:var(--sc-red); }
.email-unverified { display:inline-flex; align-items:center; gap:10px; }