/* app_accounts: the titlebar (the guest's Sign in link, the avatar and its dropdown), then the terminal window the
   four accounts pages render into (0097, 0098). Tokens only, classes ac-, no !important. The menu vocabulary
   (.ac-menu, .ac-menu-head, .ac-menu-label, .ac-menu-row, .act, [aria-disabled], .ac-soon) is shared: another
   app's fill into accounts.menu renders these classes, so they are styled here and nowhere else. */

/* ---------- titlebar: the guest's link ---------- */
.ac-bar{display:inline-flex;align-items:center;font:500 10px/1 var(--fm);letter-spacing:.06em;color:var(--dim);text-decoration:none;
  background:none;border:1px solid var(--hl1);border-radius:7px;padding:5px 8px;cursor:pointer;transition:border-color .16s,color .16s}
.ac-bar:hover{border-color:var(--hl3);color:var(--ink)}

/* ---------- titlebar: the avatar and the menu. shell.css styles every button under .bar-acts, so the avatar and the
   rows are selected under .bar-acts and .ac-menu to outrank it. The menu is absolute against .bar-acts, which the
   shell keeps position:relative; the ac-acct wrapper only scopes the Alpine state ---------- */
.bar-acts .ac-av{position:relative;width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--acc-ink);
  font:700 11px/1 var(--fm);display:grid;place-items:center;border:none;padding:0;margin-left:4px;cursor:pointer}
.bar-acts .ac-av:hover{filter:brightness(1.08)}
.ac-av-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.ac-av-on{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--s1)}
.ac-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:70;min-width:220px;max-width:320px;background:var(--s1);
  border:1px solid var(--hl3);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:6px;text-align:left}
.ac-menu form{display:contents}
.ac-menu-head{display:flex;align-items:baseline;gap:8px;padding:8px 10px 10px;border-bottom:1px solid var(--hl1);margin-bottom:6px}
.ac-menu-head b{font:600 13px/1 var(--fd);color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-menu-head span{font:500 9px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);flex:none}
.ac-menu-label{font:500 9px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding:4px 10px 6px}
.ac-menu .ac-menu-row{display:flex;align-items:center;width:100%;height:32px;padding:0 10px;border:none;border-radius:7px;background:none;
  font:500 12.5px/1 var(--fd);color:var(--dim);text-decoration:none;text-align:left;cursor:pointer;white-space:nowrap}
.ac-menu .ac-menu-row:hover{background:var(--s2);color:var(--ink)}
.ac-menu .ac-menu-row.act{color:var(--acc)}
.ac-menu .ac-menu-row.act::after{content:"\2713";margin-left:auto;font-size:11px}
.ac-menu .ac-menu-row[aria-disabled="true"]{color:var(--faint);cursor:default}
.ac-menu .ac-menu-row[aria-disabled="true"]:hover{background:none;color:var(--faint)}
.ac-soon{font:600 9px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border:1px dashed var(--hl3);
  border-radius:4px;padding:3px 5px;margin-left:auto;flex:none}

/* ---------- the terminal window: RVTDocs' login look on our tokens ---------- */
/* the door stands on the canvas itself, no card around it: the lockup and the title above the window (0125) */
.ac-page{display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:clamp(28px,6cqw,72px) clamp(16px,4cqw,40px) clamp(40px,8cqw,96px)}
.ac-door-head{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:720px;text-align:center}
.ac-door-head .brand-logo{text-decoration:none}
/* under the title, so the two are not one block (Erik 2026-09-10); shell.css sets the whole font shorthand on .lg, so this needs the depth */
.ac-door-head .brand-logo .lg{font-size:18px}
/* two classes deep: shell.css sets font-weight 800 on every h1 through an :is() list whose most specific
   arm is .hc-tx h3, so a single class loses the tie and the title would read heavier than the mock */
.ac-door-head .ac-door-title{font:700 clamp(17px,2.2cqw,22px)/1.35 var(--fm);color:var(--ink);
  letter-spacing:-.01em;margin:0;text-wrap:balance}
.ac-term{width:100%;max-width:720px;background:var(--s1);border:1px solid var(--hl2);border-radius:var(--rc);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ac-term-bar{background:var(--s1);border-bottom:1px solid var(--hl1);font:500 11px/1 var(--fm);letter-spacing:.02em;color:var(--faint);
  padding:10px 14px;overflow-wrap:anywhere;user-select:none}
/* the path follows the door (0515): ~/sign-in or ~/sign-up, and ` --email` one gray darker on the address step */
.ac-bar-flag{color:var(--hl3)}
.ac-term-body{padding:20px 22px 26px;font:400 14px/1.9 var(--fm);color:var(--dim2)}
/* a row never wraps its items: the marker stays put and the text wraps inside its own item. One decision per
   screen wants air, so the line height and the gap between the option rows are wide (0125) */
.ac-line{display:flex;align-items:baseline;gap:6px;min-height:1.9em;margin:0;min-width:0;overflow-wrap:anywhere}
/* the prompt is the brightest line; the command reads at the body's ink, one step down (Erik 2026-09-10) */
.ac-prompt{color:var(--ink)}
/* the prompt sign steps back and the whole command carries the accent (the lab's 02 Prompt, 0284, 0515) */
.ac-sh{color:var(--faint);font-weight:500;flex:none}
.ac-q{color:var(--acc);font-weight:600;flex:none}
.ac-cmd{color:var(--acc)}
.ac-out{color:var(--dim)}
.ac-out::before{content:">";flex:none}
.ac-err{color:var(--red)}
.ac-err::before{content:"!";font-weight:700;flex:none}
/* the one line under the prompt; an error takes its place, in the accent, so the step never grows a line (0125) */
.ac-hint{color:var(--dim);font-size:13px;margin-top:12px}
.ac-hint.ac-bad{color:var(--acc)}
/* the address step's two keys on the window itself, no card and no label (Erik, 2026-09-27): Esc on the
   left, Enter on the right, each a button doing what its key does; the keycaps are the shell's kbd */
.ac-keys{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.ac-kc{display:inline-flex;align-items:center;gap:8px;padding:2px 4px;border:none;background:none;
  font:400 12px/1.4 var(--fm);color:var(--dim);cursor:pointer}
.ac-kc:hover,.ac-kc:focus-visible{color:var(--ink)}
.ac-kc:hover kbd,.ac-kc:focus-visible kbd{color:var(--ink);border-color:var(--hl3)}
/* the prompt line: the input has no box of its own, the row shows the focus */
.ac-prompt{align-items:center;padding:4px 8px 4px 4px;margin:2px -8px 2px 0;border-radius:4px;cursor:text}
.ac-prompt:focus-within{background:var(--s2)}
.ac-prompt input{flex:1;min-width:140px;font:400 14px/1.4 var(--fm);background:transparent;border:none;color:var(--ink);
  caret-color:var(--acc);outline:none;padding:0;margin:0}
.ac-prompt input::placeholder{color:var(--faint)}
/* a key button or link: [Enter] Send the code, [resend], [sign out]; the bracket is the accent, the label the row's colour */
.ac-key{display:inline-flex;align-items:baseline;gap:6px;background:none;border:none;padding:0;margin:0;font:inherit;color:var(--dim2);
  text-decoration:none;cursor:pointer;flex:none}
.ac-key:hover{color:var(--ink)}
.ac-key:hover .ac-opt-n{color:var(--acc2)}
.ac-key:focus-visible{outline:none;color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:3px}
/* the index is a key to press, not a headline: the label's size and ink, never the accent (0125, round 3). A key
   button ([Enter], [Y], [sign out]) keeps the accent, there the bracket itself is what the eye has to find. */
.ac-opt-n{color:var(--dim);min-width:26px;flex:none}
.ac-key .ac-opt-n{color:var(--acc);font-weight:700}
/* the provider options: a link with keys, a soon row without. One 36px row every 8px = 44px centre to centre (0125) */
/* every method a prompt line: the small key first, then the > marker, then the label (02 Prompt, 0284) */
.ac-step-choices{display:flex;flex-direction:column;gap:0;margin:14px 0 4px}
/* air between the command line and the `? email:` prompt: the two read as one block when they touch (Erik
   on the estep round, 0285). It hangs off the COMMAND line, not off the step, so a skin that hides that line
   takes the air down with it instead of leaving a hole at the top of the window */
.ac-cmdline:has(~ [data-step="email"]){margin-bottom:14px}
.ac-opt{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:0 8px 0 4px;border:none;
  border-radius:0;background:none;font:inherit;color:var(--dim);text-decoration:none;text-align:left;cursor:pointer;transition:background .12s}
.ac-opt:hover{background:none;color:var(--ink)}
.ac-opt:focus-visible{outline:none;color:var(--ink)}
.ac-opt::before{content:">";flex:none;font-weight:700;color:var(--hl3)}
.ac-opt:hover::before,.ac-opt:focus-visible::before{color:var(--acc)}
.ac-opt .ac-opt-n{order:-1;min-width:0;font-size:11px;color:var(--faint)}
.ac-opt-ic{display:inline-flex;width:16px;height:16px;flex:none}
.ac-opt-ic svg{width:16px;height:16px;display:block}
.ac-opt[aria-disabled="true"]{color:var(--faint);cursor:default}
.ac-opt[aria-disabled="true"]:hover{background:none;color:var(--faint)}
.ac-opt[aria-disabled="true"]:hover .ac-soon,.ac-opt[aria-disabled="true"]:focus-visible .ac-soon{color:var(--dim2);border-color:var(--dim)}
/* the account page: a label line per section */
.ac-term .ac-menu-label{padding:14px 0 4px}
.ac-tips{background:color-mix(in srgb,var(--s1) 88%,transparent);border-top:1px solid var(--hl1);padding:10px 22px;
  font:400 12px/1.6 var(--fm);color:var(--dim)}
.ac-tips kbd{margin:0 2px}
/* the door's switch and the command's live flag (Erik 2026-09-16, 0202). The switch IS the title's verb: a real
   button wearing the title's own face, the picked word in the ink with the accent under it, the other quiet. It
   stands in the h1 above the window, which is why acTerm sits on .ac-page (term.html). The flag and the live verb
   appear with the rows, so neither stands there while the command is still typing itself. */
.ac-door-title .ac-sw{display:inline;padding:0;border:none;background:none;font:inherit;letter-spacing:-.02em;color:inherit;cursor:pointer}
.ac-door-title .ac-sw:focus-visible{outline:1px solid var(--acc);outline-offset:4px;border-radius:3px}
/* the picked verb in the accent and in brackets, the other at half light; the slash keeps its room unseen (02, 0515) */
.ac-sw-o{color:var(--faint);opacity:.45;transition:color .18s,opacity .18s}
.ac-sw-o.on{color:var(--acc);opacity:1}
.ac-sw-o.on::before{content:"["}
.ac-sw-o.on::after{content:"]"}
.ac-sw:hover .ac-sw-o:not(.on){color:var(--dim)}
.ac-sw-sep{margin:0 3px;opacity:0}
/* the flag stands at the far end of the line, quiet, where a flag belongs */
.ac-flag{order:1;margin-left:auto;color:var(--faint)}
/* the verb the switch writes into the command line: one accent word, no space before it, so the line reads
   /lra sign-in as one command (signin.html keeps the two spans adjacent) */
/* the verb rides outside .ac-cmd because the typewriter rewrites that span character by
   character, so it is a second flex item and .ac-line's 6px gap would print `sign- in` */
.ac-cmd-m{color:var(--acc);font-weight:600;margin-left:-6px}
.ac-js :is(.ac-flag,.ac-cmd-m){opacity:0}
.ac-term.ready :is(.ac-flag,.ac-cmd-m){opacity:1;transition:opacity .24s ease .1s}
/* ON THE ADDRESS STEP the whole command goes quiet: it is the line the visitor already typed, so it steps
   back to one grey and the field he is about to fill leads. All four parts at once, the `~`, the command,
   the flag and the live verb, or the line reads half lit. It stays loud on the choices step, which is where
   the typewriter writes it (Erik on the estep round, 0285). */
body:has([data-step="email"]) :is(.ac-sh,.ac-cmd,.ac-flag,.ac-cmd-m){color:var(--faint);font-weight:400}

@container page (max-width:640px){
  .ac-term-body{padding:16px 14px 20px}
  .ac-tips{padding:10px 14px}
}

/* ---------- motion: the command types (accounts.js), then the rows fade in. html.ac-js (head.html) means a script will
   lift .ready, so the rows start hidden only then; the stagger is one animation-delay per row, set by the script ---------- */
.ac-js .ac-term .ac-row{opacity:0}
.ac-term.ready .ac-row{animation:ac-fade .24s ease forwards}
@keyframes ac-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* a hairline, not a block, and sat on the line it belongs to: the box runs from the descender to the cap
   height of the 14px mono body, so it reads as the cursor of THIS line and no longer floats above it
   (Erik 2026-09-16: thinner, less massive, a little too high) */
.ac-caret{display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.2em;background:var(--acc);
  animation:ac-blink 1s steps(1) infinite}
@keyframes ac-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ac-js .ac-term .ac-row{opacity:1;animation:none}
  .ac-sw-o{transition:none}
  .ac-caret{animation:none}
  .ac-opt{transition:none}
}


/* ░█ ───────────────────────────────────────────────────────────────────────────────────── ░█
   ░█  THE ACCOUNT PAGE: the identity rail and its six tabs (0270, the rail landed 0281)    ░█
   ░█ ───────────────────────────────────────────────────────────────────────────────────── ░█
   Erik promoted the Design Lab's `acct` option 02 Rail and corrected it (0281): the page is a
   narrow identity rail beside the panels, not a tall header over them. The rail stacks the avatar,
   the name, the handle, the address and the joined line, then the activity graph, and the two
   sign-outs sit at its foot. The training rows left the header entirely: the Progress tab is where
   a member reads them, so the account.trainings outlet and the .ac-trn vocabulary went with them.
   The tabs are Erik's order and views.TABS is the list: Progress (open on load), Certificates,
   Billing, then the Resources link and the Notes and Support buttons (0634).
   THE VOCABULARY IS SHARED, like the menu's above: app_courses fills account.activity,
   account.progress and account.certs, app_contact fills
   account.support, and every one of those templates renders THESE classes. They are styled here and nowhere else, so a design round on
   this page edits one stylesheet. */

/* ---------- the page: one flex line, the rail then the panels. accounts.css is on EVERY page
     (the accounts.head fill), so the two columns hang off .ac-acct on the account page's own
     <section> and never off a bare `main > section`. The flex-basis pair is the layout's only
     breakpoint: 300 + 560 plus the gutters wraps the rail above the panels a little under 900px
     of page container, which is where the one @container block at the foot of this file meets
     it. ---------- */
.ac-acct{display:flex;flex-wrap:wrap;align-items:flex-start}
.ac-acct .sec[data-sec="account"],.ac-acct .sec[data-sec="tabs"]{min-width:0;border-top:none;
  padding:clamp(26px,3cqw,40px) 0}
.ac-acct .sec[data-sec="account"]{flex:1 1 300px}
.ac-acct .sec[data-sec="tabs"]{flex:999 1 560px}
.ac-acct .sec[data-sec="account"] .wrap{padding-right:0}

/* ---------- the rail ---------- */
.ac-prof{display:flex;flex-direction:column;gap:22px;
  padding-right:clamp(18px,2.4cqw,30px);border-right:1px solid var(--hl1)}
/* the top line: the picture and the two names BESIDE it, not under it (Erik, 0293) */
.ac-prof-top{display:flex;align-items:center;gap:13px;min-width:0}
.ac-face{position:relative;display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:50%;background:var(--s2);border:2px solid rgb(from var(--acc) r g b / .55);
  overflow:hidden}
.ac-face-i{font:700 17px/1 var(--fm);color:var(--acc);letter-spacing:.02em}
.ac-face-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Change picture over the disc on hover (0389): app_media's fill wears these. The label is the whole disc, */
/* the file input hides inside it, the refused line hangs under the disc */
.ac-face-box{position:relative;flex:none}
.ac-face-edit{position:absolute;inset:0;margin:0}
.ac-face-edit label{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgb(from var(--canvas) r g b / .72);opacity:0;transition:opacity .15s;
  font:600 8.5px/1.2 var(--fm);letter-spacing:.04em;text-align:center;color:var(--ink)}
.ac-face-edit label:hover,.ac-face-edit label:focus-within{opacity:1}
.ac-face-edit input{position:absolute;width:1px;height:1px;opacity:0}
.ac-face-no{position:absolute;top:calc(100% + 6px);left:0;white-space:nowrap;font:400 11px/1.3 var(--fm);color:var(--red)}
.ac-prof-who{min-width:0;display:flex;flex-direction:column;gap:4px}
/* the main info block: the address, then the joined line */
.ac-prof-say{min-width:0;display:flex;flex-direction:column;gap:9px}
/* two classes deep for the same reason the door's title is: shell.css weights every h1 through an
   :is() list whose most specific arm carries a class and a type, and a lone class loses that tie */
.ac-prof .ac-nm{font:800 clamp(17px,1.9cqw,20px)/1.2 var(--fd);color:var(--ink);margin:0;
  min-width:0;overflow-wrap:anywhere}
.ac-hd{font:500 12.5px/1 var(--fm);color:var(--faint);letter-spacing:.02em}
/* the name, the pencil, and the field that takes the NAME'S OWN PLACE (0316, in place since 0331).
   Erik: "I just want in place text editing on the pencil click with a tick and an X". So the form
   is a child of the heading's row, the input wears the heading's exact face with no box of its own,
   and the three marks are drawn the way the envelope and the calendar under them are. Nothing is
   added above the name and nothing on the rail moves when the field opens. */
.ac-nm-row{display:flex;align-items:center;gap:8px;min-width:0}
.ac-nm-edit,.ac-nm-ok,.ac-nm-no{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:none;background:none;border:none;border-radius:5px;padding:0;
  cursor:pointer;color:var(--faint);transition:opacity .16s,color .16s}
.ac-nm-edit svg,.ac-nm-ok svg,.ac-nm-no svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the pencil is quiet until the block is under the pointer or holds the focus, so the rail reads
   as a name and not as a form waiting to be filled */
.ac-nm-edit{opacity:0}
/* the address line's pencil too (0634): the same quiet mark, lit by its own line */
.ac-prof-who:hover .ac-nm-edit,.ac-prof-who:focus-within .ac-nm-edit,
.ac-mails:hover .ac-nm-edit,.ac-mails:focus-within .ac-nm-edit{opacity:1}
.ac-nm-edit:hover{color:var(--acc)}
.ac-nm-edit:focus-visible{opacity:1;outline:1px solid var(--acc);outline-offset:1px}
.ac-nm-form{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 auto}
/* the field IS the heading: the same font, no background, no border, no underline and no focus
   ring, so the name simply becomes typeable where it stands (Erik, 0331: "no huge orange box, no
   highlights, no underline"). The caret is the only sign, and the tick and the cross beside it.
   The ring has to be beaten at two classes: shell.css's global `:focus-visible` outline loads
   after this file and wins a one class tie, and an input always matches :focus-visible */
.ac-nm-in{flex:1 1 auto;width:100%;min-width:0;background:none;border:none;border-radius:0;padding:0;
  font:800 clamp(17px,1.9cqw,20px)/1.2 var(--fd);color:var(--ink);caret-color:var(--acc);outline:none}
.ac-nm-row .ac-nm-in:focus-visible{outline:none}
.ac-nm-in::placeholder{color:var(--faint);font-weight:400}
.ac-nm-ok:hover{color:var(--acc)}
.ac-nm-no:hover{color:var(--red)}
.ac-nm-ok:focus-visible,.ac-nm-no:focus-visible{outline:1px solid var(--acc);outline-offset:1px}
/* the handle's own edit (0440): the name's pencil, tick and cross at the handle's size, the field in
   the handle's face with no box, the reason for a refusal one quiet red line under it */
.ac-hd-row{gap:4px;min-height:22px}
.ac-hd-in{flex:1 1 auto;width:100%;min-width:0;background:none;border:none;border-radius:0;padding:0;
  font:500 12.5px/1 var(--fm);color:var(--ink);letter-spacing:.02em;caret-color:var(--acc);outline:none}
.ac-hd-row .ac-hd-in:focus-visible,.ac-mails .ac-hd-in:focus-visible{outline:none}
/* the address line's field and code (0634): beside the envelope, a zero basis like the address it replaces */
.ac-mails .ac-nm-form{flex:1 1 0}
.ac-hd-in::placeholder{color:var(--faint)}
.ac-hd-bad{font:400 11px/1.4 var(--fm);color:var(--red);margin:0}
/* the envelope and the calendar drawn in the two lines under the names: grey, never the ink */
.ac-ic{width:13px;height:13px;flex:none;color:var(--faint);fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ac-mails{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
/* one line, whatever the address is (Erik, 0316): a step down in size, cut with an ellipsis, and
   the whole thing in the title attribute. .ac-mails already carries min-width:0 and the item's own
   overflow:hidden is what lets it shrink past its text, or the ellipsis never fires */
.ac-mail{font:500 12px/1.5 var(--fm);color:var(--dim2);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 0}
/* flex:1 1 0 is the half that keeps the address beside its envelope. .ac-mails wraps, because the
   revealed second addresses need their own line, and a long address was being wrapped whole onto
   the next line under the icon before it was ever asked to shrink. A zero basis means it always
   fits beside the icon first, then grows into the room and cuts itself with the ellipsis (0331) */
.ac-more{background:none;border:1px solid var(--hl2);border-radius:5px;padding:2px 7px;cursor:pointer;
  font:500 10px/1.5 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ac-more:hover{border-color:var(--hl3);color:var(--dim)}
.ac-more:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
.ac-mails-x{display:flex;flex-direction:column;gap:2px;flex-basis:100%}
.ac-mail-x{font:400 12px/1.6 var(--fm);color:var(--dim);overflow-wrap:anywhere}
.ac-joined{display:inline-flex;align-items:center;gap:7px;font:500 10px/1.4 var(--fm);letter-spacing:.06em;color:var(--faint)}
/* the foot of the rail: the two sign-outs, last on the page and cut off by a rule, so they read as
   the end of the column and not as one more thing about the person (Erik, 0281) */
.ac-acts{display:flex;flex-direction:column;align-items:stretch;gap:6px;
  padding-top:16px;border-top:1px solid var(--hl1)}
.ac-acts form{display:contents}
.ac-btn{background:none;border:1px solid var(--hl2);border-radius:var(--rb);padding:7px 13px;cursor:pointer;
  font:600 11px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:center;
  transition:border-color .16s,color .16s}
.ac-btn:hover{border-color:var(--acc);color:var(--ink)}
.ac-btn:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
.ac-btn-q{color:var(--faint)}
.ac-card-h{display:flex;align-items:baseline;gap:8px;font:600 9px/1 var(--fm);letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.ac-card-h em{font:400 10px/1 var(--fm);letter-spacing:.06em;text-transform:none;color:var(--faint)}
.ac-empty{font:400 13px/1.7 var(--fd);color:var(--dim);margin:0}
.ac-quiet{color:var(--hl3);font-size:12px}
/* the Emails tab (0709): app_mail's newsletter row (ac-news), its switch the Studio's resource switch */
.ac-news{display:flex;align-items:center;gap:14px;margin:0}
.ac-news-t{display:grid;gap:2px;font:400 13px/1.5 var(--fd);color:var(--dim)}
.ac-news-t b{font-weight:600;color:var(--ink)}
.ac-nsw{appearance:none;flex:none;position:relative;width:34px;height:20px;margin:0;padding:0;border:1px solid var(--hl3);border-radius:999px;background:var(--s2);cursor:pointer}
.ac-nsw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:left .14s,background .14s}
.ac-nsw[aria-checked="true"]{background:var(--dim2);border-color:var(--dim2)}
.ac-nsw[aria-checked="true"]::after{left:16px;background:var(--canvas)}
.ac-nsw:focus-visible{outline:1px solid var(--hl3);outline-offset:2px}

/* ---------- the activity graph: the last 90 days in Monday to Sunday columns, month labels over
     them. Ninety days is not a whole number of weeks, so the column count is 13 or 14 depending on
     the weekday and activity.html hands it over as --wk (0293). ---------- */
.ac-act{margin-top:14px}  /* Erik asked for air over the graph: on top of the rail's 22px gap */
.ac-act-cal{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 6px}
/* a square is 18px at most: a wide column (a tablet, the page single-column) never blows the board up (Erik, 2026-09-26) */
.ac-act-mon,.ac-act-g{display:grid;grid-template-columns:repeat(var(--wk,13),minmax(0,18px));gap:3px}
.ac-act-mon{grid-column:2;font:500 9px/1 var(--fm);letter-spacing:.06em;color:var(--faint)}
.ac-act-wd{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(7,1fr);gap:3px;
  font:500 8px/1 var(--fm);letter-spacing:.04em;color:var(--faint)}
/* Mon, Fri, Sun sit on rows 1, 5 and 7, which is how the reference labels its rows */
.ac-act-wd span:nth-child(1){grid-row:1}
.ac-act-wd span:nth-child(2){grid-row:5}
.ac-act-wd span:nth-child(3){grid-row:7}
.ac-act-g{grid-column:2;grid-row:2;grid-template-rows:repeat(7,1fr);grid-auto-flow:column}
.ac-sq{position:relative;width:100%;aspect-ratio:1;min-width:8px;border-radius:2px;background:rgb(from var(--ink) r g b / .07);display:block}
/* one gray ramp, no colour at all (lab activity closed on 06, Erik 2026-10-01, 0610): a sign-in the
   dim square, activity (a lesson completed or a community interaction) the light one, and a finished
   training that light square with the dark tick, which the legend leaves out */
.ac-sq-in{background:rgb(from var(--ink) r g b / .2)}
.ac-sq-act{background:rgb(from var(--ink) r g b / .7)}
.ac-sq svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ac-sq svg path{fill:none;stroke:var(--canvas);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ac-sq-off{opacity:.25}
/* the day read under the graph: the border lights at once, no transition. The graph is the one tab
   stop, so its own ring shows only for the keyboard */
.ac-act-g:focus{outline:none}
.ac-act-g:focus-visible{outline:1px solid var(--hl2);outline-offset:3px;border-radius:3px}
.ac-sq[data-when]:is(:hover,.on){outline:1px solid var(--dim);outline-offset:-1px}
.ac-sq-fin[data-when]:is(:hover,.on){outline-color:var(--ink)}
/* the day's lines float over the graph under the square the pointer or the arrows are on (acAct places
   it); nothing at rest, so the page under the graph never moves (Erik, 2026-09-26: the totals went) */
.ac-act-say{position:absolute;z-index:5;display:flex;flex-direction:column;gap:3px;margin:0;padding:8px 10px;
  white-space:nowrap;pointer-events:none;background:var(--s1);border:1px solid var(--hl3);border-radius:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);font:400 11px/12px var(--fm);color:var(--dim)}
.ac-act-say[hidden]{display:none}
.ac-act-say b{font-weight:600;color:var(--ink);letter-spacing:.04em}
.ac-act-lg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  font:400 10px/1 var(--fm);letter-spacing:.04em;color:var(--faint)}
.ac-lg-i{display:inline-flex;align-items:center;gap:5px}
.ac-lg-i .ac-sq{width:9px;height:9px;flex:none}
/* the padlock, drawn: a body and a shackle, no glyph and no file. The Progress and Certificates
   fills draw it; the header's training rows are gone, the lock is not (0281) */
.ac-lock{position:relative;width:10px;height:8px;flex:none;margin-top:4px;border:1px solid currentColor;
  border-radius:2px;opacity:.8}
.ac-lock::before{content:"";position:absolute;left:1px;top:-5px;width:6px;height:5px;
  border:1px solid currentColor;border-bottom:none;border-radius:3px 3px 0 0}
/* progress inside a row: one square per lesson, or a bar where a training carries too many */
.ac-bx{display:flex;gap:2px;flex:none;max-width:130px;overflow:hidden}
.ac-bx i{width:4px;height:9px;border-radius:1px;background:var(--sq-gray);flex:none}
.ac-bx i.d{background:var(--sq-green)}
.ac-bx i.n{background:var(--sq-orange)}
/* ac-pbar, not ac-bar: that word is the titlebar's Sign in link, which this rule drew as a 4px track (0382) */
.ac-pbar{width:88px;height:4px;border-radius:2px;background:var(--xbar-track);flex:none;overflow:hidden}
.ac-pbar i{display:block;height:100%;background:var(--xbar-fill)}

/* ---------- the tabs: the site's own tab look, a strip of buttons over one open panel; three tabs and three
     buttons fit one line at 1440 with this padding and spacing (0628, 0634) ---------- */
.ac-tabs{margin-top:0}
/* the strip and the Support button share one rule under them; Support opens a window, not a panel (0447) */
.ac-tabs-h{display:flex;flex-wrap:wrap;align-items:flex-end;border-bottom:1px solid var(--hl1);margin-bottom:22px}
.ac-tabs-b{display:flex;gap:2px;flex-wrap:wrap}
.ac-tab{position:relative;background:none;border:none;border-bottom:2px solid transparent;padding:9px 10px;
  margin-bottom:-1px;cursor:pointer;font:600 11px/1 var(--fm);letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);transition:color .16s,border-color .16s}
.ac-tab:hover{color:var(--dim)}
a.ac-tab{text-decoration:none}
.ac-tab.act{color:var(--ink);border-bottom-color:var(--acc)}
.ac-tab:focus-visible{outline:1px solid var(--acc);outline-offset:-2px;border-radius:4px 4px 0 0}
/* a drawn arrow says it opens something beside the page, never a panel under it */
.ac-tab-sup::after{content:"\2197";margin-left:6px;color:var(--faint);letter-spacing:0}
.ac-pan{min-height:80px}
.ac-pan:focus-visible{outline:none}

/* ---------- the Progress tab, the page's first: one card per training with its numbers on it ---------- */
.ac-plist{display:grid;gap:10px}
.ac-pr{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1)}
.ac-pr-lk{opacity:.62}
.ac-pr-h{display:flex;align-items:center;gap:9px;min-width:0}
/* the training's name is its door (0447): a step over the course names (14 to 16), a link with a
   drawn arrow, the rail's own address; locked it stays plain words */
.ac-pr-n{font:800 16px/1.3 var(--fd);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-decoration:none}
a.ac-pr-n::after{content:"\2192";margin-left:8px;color:var(--faint);transition:color .16s,margin .16s}
a.ac-pr-n:hover::after,a.ac-pr-n:focus-visible::after{color:var(--acc);margin-left:11px}
/* the courses stand apart from the title: a hairline and air between the two (0447) */
.ac-pr-b{border-top:1px solid var(--hl1);padding-top:12px;min-width:0}
/* the COMPLETED and HIDDEN heads show only when a card sits under them (below) */
.ac-pr-cd,.ac-pr-hd{display:none}
.ac-pr-s{font:500 10px/1 var(--fm);letter-spacing:.06em;color:var(--faint);font-style:normal;margin-left:auto;flex:none}
.ac-pr-go{justify-self:start;font:600 10px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);text-decoration:none;border-bottom:1px solid transparent}
.ac-pr-go:hover{border-bottom-color:var(--acc)}
.ac-pr .ac-bx{max-width:100%}

/* ---------- Erik's pick of the Design Lab round account_trainings, 40 (0528, 0556): the dotted band as the
     card's head with the training's icon, balanced lesson squares, course lines, COMPLETED and HIDDEN.
     Scoped under .ac-plist so it outranks the base above and courses.css's .pbox.pbox. accounts.js
     balances the square lines and keeps the hidden trainings. ---------- */
/* ---------- CARD TOP: the dotted band is the card's head, the body and Resume under it; the outline a step lighter ---------- */
.ac-plist{gap:14px}
.ac-plist .ac-pr{--sq:10px;--sqg:3px;align-content:start;gap:0;padding:0;overflow:hidden;border-color:var(--hl2)}
.ac-plist .ac-pr:hover{border-color:var(--hl3)}
.ac-plist .ac-pr-h{min-height:60px;padding:12px 18px;border-bottom:1px solid var(--hl1);background:radial-gradient(var(--hl2) 1px,transparent 1.3px) 0 0/14px 14px}
.ac-plist .ac-pr-h:last-child{border-bottom:none}
.ac-plist .ac-pr-b{padding:16px 18px;border-top:none}
.ac-plist .ac-pr-go{justify-self:start;margin:14px 18px 16px}

/* ---------- SQUARES, BALANCED: one fixed square per lesson, every line of a box the same length give or take one ---------- */
.ac-plist .ac-pr-b :is(.pbox,.ac-bx){display:grid;grid-template-columns:repeat(var(--per,auto-fill),var(--sq));justify-content:start;gap:var(--sqg);max-width:none;overflow:visible}
.ac-plist .ac-pr-b :is(.pbox,.ac-bx) i{flex:none;width:var(--sq);max-width:none;height:var(--sq);margin:0;border-radius:2px}

/* ---------- COURSE LINES: the small mono name left, its squares, its percent right, tight rows ---------- */
.ac-plist .ac-pr-b .cbars{gap:7px}
.ac-plist .ac-pr-b .cbar{display:grid;grid-template-columns:minmax(0,min(34%,150px)) minmax(0,1fr) 38px;align-items:start;gap:10px;padding-bottom:0;border-bottom:none}
.ac-plist .ac-pr-b .cbar-n{font:700 9.5px/var(--sq) var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ac-plist .ac-pr-b .cbar-p{line-height:var(--sq);font-size:10px;color:var(--dim)}
/* a flat training is one line on the same columns, its label the one the course rows would print */
.ac-plist .ac-pr-b:has(.ac-bx){display:grid;grid-template-columns:minmax(0,min(34%,150px)) minmax(0,1fr) 38px;align-items:start;gap:10px}
.ac-plist .ac-pr-b:has(.ac-bx)::before{content:"All lessons";min-width:0;font:700 9.5px/var(--sq) var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- SECTIONS: open, then COMPLETED, then HIDDEN (collapsed, its count on the head) ---------- */
.ac-plist .ac-pr-hide{display:grid;place-items:center;flex:none;width:26px;height:26px;margin:-4px -7px -4px 0;padding:0;border:none;border-radius:var(--rb);background:none;color:var(--faint);cursor:pointer}
.ac-plist .ac-pr-hide svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ac-plist .ac-pr-hide:is(:hover,:focus-visible){color:var(--ink);background:var(--s2)}
/* the slash says "hide"; a hidden card's eye is open, it says "show" */
.ac-plist .ac-pr.is-hid .ac-pr-hx{display:none}
.ac-plist .ac-pr-cd{order:1}
.ac-plist .ac-pr.is-done{order:2}
.ac-plist .ac-pr-hd{order:3}
.ac-plist .ac-pr.is-hid{order:4}
.ac-plist:not(.hid-open) .ac-pr.is-hid{display:none}
.ac-plist:has(.ac-pr.is-done:not(.is-hid)) .ac-pr-cd{display:block}
.ac-plist:has(.ac-pr.is-hid) .ac-pr-hd{display:flex}
.ac-plist :is(.ac-pr-cd,.ac-pr-hd){align-items:center;gap:9px;justify-self:start;margin:8px 0 0;padding:0;border:none;background:none;font:700 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ac-plist .ac-pr-hd{cursor:pointer}
.ac-plist .ac-pr-hd::before{content:"\25B8";font-size:13px;transition:transform .16s}
.ac-plist .ac-pr-hd[aria-expanded="true"]::before{transform:rotate(90deg)}
.ac-plist .ac-pr-hd:is(:hover,:focus-visible){color:var(--ink)}
.ac-plist .ac-pr-hn{padding:3px 7px;border:1px solid var(--hl2);border-radius:var(--rb);font:inherit;color:var(--dim)}

/* ---------- ICONS: the training's icon before its title, the percent dark, the title a step grayer ---------- */
/* the icon is app_courses' shared partial (icons/, a .tic svg): its look and motion are ticons.css, the
   robot's eyes ticons.js; 40 gives it the size and the gray. A phone keeps the whole title beside it:
   the title and the gaps give way with the site window (cqw, the page container) */
.ac-plist .ac-pr-h{column-gap:clamp(6px,2cqw,9px)}
.ac-plist .ac-pr-n{font-size:clamp(15px,4.2cqw,18px);color:var(--dim2);transition:color .16s}
.ac-plist a.ac-pr-n:is(:hover,:focus-visible){color:var(--ink)}
.ac-plist .ac-pr-ic{display:block;flex:none;width:clamp(20px,5.6cqw,24px);height:clamp(20px,5.6cqw,24px);color:var(--dim)}
.ac-plist .ac-pr-b .cbar-p{color:var(--faint)}

/* ---------- the Certificates tab: one card per training, and the card looks like the thing it
     will hand over (Erik, 0331). The training's name stands ABOVE a drawn certificate, the padlock
     sits in the middle of the sheet while it is not earned and the sheet is greyed back behind it,
     and the foot carries one quiet line saying how far along the person is. The sheet is four
     ragged rules on a page: no glyph, no file, the idiom of every other mark on this page. ---------- */
.ac-certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
/* NO CARD around it (Erik, 0331): the drawn sheet is the object, and a panel behind it was a
   second box around a picture of a box. The spacing it used to hold is kept as the padding */
.ac-cert{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;
  padding:17px 14px 15px;border:none;background:none;text-decoration:none;color:var(--faint);
  cursor:pointer;transition:transform .18s ease}
/* Erik (0331): "hover interaction to scale element up a bit and cursor -> hand". The whole card
   lifts, not just the sheet, so the name and the count come with it */
.ac-cert:hover{transform:scale(1.04)}
.ac-cert-t{font:700 13px/1.35 var(--fd);color:var(--dim2);min-width:0;overflow-wrap:anywhere}
/* the tick beside a finished training's name, drawn like every mark here, green like a done box */
.ac-cert-ok{display:inline-block;width:13px;height:13px;margin-left:5px;vertical-align:-1px;
  fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* the sheet: a portrait page with its ruled lines, quiet until the training is finished */
.ac-cert-doc{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:74px;height:84px;flex:none;padding:0 13px;border-radius:6px;
  background:var(--s2);border:1px solid var(--hl2);opacity:.55;transition:opacity .16s}
.ac-cert-doc .ln{height:3px;border-radius:2px;background:var(--hl3)}
.ac-cert-doc .ln.w1{width:80%}
.ac-cert-doc .ln.w2{width:60%}
.ac-cert-doc .ln.w3{width:100%}
.ac-cert-doc .ln.w4{width:45%}
/* the padlock in the MIDDLE of the sheet, over the rules and bigger than the one a row wears: the
   .ac-lock definition stays the one definition and this only places and scales it */
.ac-cert-lk{position:absolute;left:50%;top:50%;margin:0;color:var(--dim);
  transform:translate(-50%,-50%) scale(1.7)}
.ac-cert-s{display:flex;flex-direction:column;align-items:center;gap:7px;font:500 10px/1 var(--fm);
  letter-spacing:.06em;font-style:normal;color:var(--faint)}
/* under the count, not beside it (Erik, 0331) */
.ac-cert-s .ac-soon{margin-left:0}
/* with no card to light up, a card that leads somewhere says so on the sheet itself */
a.ac-cert:hover .ac-cert-doc{opacity:.75;border-color:var(--hl3)}
a.ac-cert:hover .ac-cert-t{color:var(--ink)}
.ac-cert-off .ac-cert-doc{opacity:.4}
/* earned: the sheet comes back to full strength with its seal on it, and its WHOLE perimeter is
   a light grey rule, never a bar down one side (brand.css anti-pattern 2). Grey and not the accent
   since 0331 (Erik): the green tick beside the name already says finished, so the frame stays calm */
.ac-cert-on{color:var(--dim)}
.ac-cert-on .ac-cert-t{color:var(--ink)}
.ac-cert-on .ac-cert-doc{opacity:1;border-color:var(--hl3)}
.ac-cert-on .ac-cert-doc .ln{background:var(--hl3)}
.ac-cert-on .ac-cert-s{color:var(--dim)}
/* the certificate's own pill, unlock or open (0507): the soon pill's box drawn solid, since it leads somewhere */
.ac-cert-s .ac-cert-go{border-style:solid;color:var(--dim2)}
a.ac-cert:hover .ac-cert-go{border-color:var(--acc);color:var(--ink)}
/* the seal sits where the padlock sat, so the card swaps one mark for the other and nothing moves */
.ac-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;border:2px solid var(--acc);background:var(--s2);flex:none}

/* ---------- .ac-tog is the site's one switch: the community bell's gear wears it; the dashboard's
     mail switches are gone (Erik, 0634) ---------- */
.ac-tog{display:flex;align-items:center;gap:10px;padding:6px 2px;cursor:pointer;font:500 13px/1.3 var(--fd);color:var(--dim)}
.ac-tog:hover{color:var(--ink)}
.ac-tog input{appearance:none;flex:none;position:relative;width:30px;height:17px;margin:0;border-radius:9px;background:var(--hl2);cursor:pointer;transition:background .15s}
.ac-tog input::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--dim);transition:translate .15s}
.ac-tog input:checked{background:var(--acc)}
.ac-tog input:checked::after{translate:13px 0;background:var(--acc-ink)}
.ac-tog input:focus-visible{outline:2px solid var(--hl3);outline-offset:2px}
.ac-tog:has(input:disabled){cursor:default;opacity:.55}
.ac-tog input:disabled{cursor:default}

/* ---------- narrow: the flex line has already wrapped the rail above the panels, so the rail drops
     its divider and takes the wrap's right gutter back and reads as a band ---------- */
@container page (max-width:900px){
  .ac-prof{padding-right:0;border-right:none}
  .ac-acct .sec[data-sec="account"] .wrap{padding-right:clamp(20px,4cqw,56px)}
  .ac-acct .sec[data-sec="tabs"]{padding-top:0}
  .ac-acts{flex-direction:row;flex-wrap:wrap}
}
@container page (max-width:560px){
  .ac-certs{grid-template-columns:minmax(0,1fr)}
}
/* a finger needs 40px and has no hover (0382): the buttons, the tabs, the menu rows, the avatar, and the
   name's pencil shown for good. Touch screens under 1100px only, so a desk with a mouse keeps its look */
@media (max-width:1100px) and (pointer:coarse){
  .ac-btn,.ac-tab,.ac-opt{min-height:40px}
  .ac-menu .ac-menu-row{height:40px}
  .bar-acts .ac-av{width:40px;height:40px}
  .ac-nm-edit,.ac-nm-ok,.ac-nm-no{width:40px;height:40px}
  .ac-nm-edit{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .ac-btn,.ac-tab,.ac-cert{transition:none}
  .ac-cert:hover{transform:none}
}
/* the door's code step inside another page (0432, a guide's gate): the shell's capture form parts, one line
   above and the wrong code in the accent, the way the door's own page says it */
.ac-step-h{margin:0 0 12px;font:500 14px/1.5 var(--fd);color:var(--dim)}
.cap-note.ac-step-bad{color:var(--acc)}

/* ░█ the profile question (0593), prompt.html: drawn in #shell-prompt-box inside the site window. The name
   is a box under the account card with no way out but its button, the discipline a bar above the status bar
   with Later. */
/* ---------- shared parts ---------- */
/* the site window holding a question is the box its fixed parts sit in, never the sidebar or the desk */
.win:has(.pp-name,.pp-disc){contain:layout}
.pp-h{margin:0;font-size:1.35rem;color:var(--ink)}
.pp-name input,.pp-disc .pp-other{width:100%;background:var(--s1);border:1px solid var(--hl3);border-radius:var(--rb);
  color:var(--ink);padding:10px 12px;font:inherit}
.pp-name input:focus-visible{outline:none;border-color:color-mix(in srgb,var(--hl3) 75%,var(--ink))}
.pp-two{display:flex;gap:10px}
.pp-two label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--dim);text-align:left}
.pp-go{margin-top:24px;width:100%}

/* ---------- the name (pname closed: the account card, the box joined under it, the page blurred behind) ---------- */
.pp-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);border-radius:var(--r)}
/* the stage holds the card over the box; the card comes after the form in the markup, order puts it on top */
.pp-stage{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:71;width:min(520px,calc(100% - 32px));
  display:flex;flex-direction:column;align-items:center}
.pp-name{position:relative;width:100%;overflow:hidden;background:var(--s2);border:1px solid var(--hl3);
  border-radius:0 0 var(--r) var(--r);padding:28px;text-align:center}
.pp-name .pp-h{font-size:1.9rem;line-height:1.15;margin-bottom:30px}
/* the welcome in orange over the question, a touch smaller than 36 drew it (Erik, pname 36) */
.pp-hey{display:block;font-size:.92em;color:var(--acc)}
/* the labels are for screen readers: the placeholders and the @ say it (Erik, 0603) */
.pp-sr,.pp-name .pp-two label>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pp-name .pp-two label{position:relative}
.pp-name .pp-two input::placeholder{color:var(--dim)}
/* the @ is part of the field, gray and locked: the person types after it */
.pp-handle{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:10px;font-size:.8rem;color:var(--dim);text-align:left}
.pp-at{display:flex;background:var(--s1);border:1px solid var(--hl3);border-radius:var(--rb);overflow:hidden}
.pp-at:focus-within{border-color:color-mix(in srgb,var(--hl3) 75%,var(--ink))}
.pp-at b{display:flex;align-items:center;padding:0 10px;background:var(--s3);color:var(--dim);font-family:var(--fm);font-weight:400;user-select:none}
.pp-name .pp-at input{flex:1;min-width:0;border:none;border-radius:0;background:none;font-family:var(--fm)}
.pp-name .pp-at input:focus-visible{border:none;outline:none}
.pp-foot{font-size:.75rem;color:var(--dim)}
.pp-err{margin:10px 0 0;font-size:.82rem;color:var(--red)}
/* the account card: the account page's disc (initials, the picture, Change picture on hover), the name, the @handle */
.pp-card{order:-1;display:flex;align-items:center;gap:12px;align-self:stretch;padding:14px 18px;background:var(--s1);
  border:1px solid var(--hl3);border-bottom:none;border-radius:var(--r) var(--r) 0 0;text-align:left}
.pp-card-who{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}
.pp-card-who b{color:var(--ink);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-card-who code{color:var(--faint);font-family:var(--fm);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- pdisc (closed, round three: was 12): one slim bar above the status bar, risen from it ---------- */
.pp-disc{position:fixed;left:16px;right:16px;bottom:48px;z-index:65;background:var(--s2);border:1px solid var(--hl3);
  border-radius:var(--rc);padding:10px 14px;animation:pp-rise .35s ease-out}
@keyframes pp-rise{from{transform:translateY(24px);opacity:0}}
.pp-disc .pp-body{display:flex;align-items:center;gap:14px}
.pp-disc .pp-h{display:flex;align-items:center;gap:8px;font-size:.92rem;white-space:nowrap;color:var(--acc)}
/* the small spark before the question, twinkling slowly */
.pp-ico{width:14px;height:14px;flex:none;fill:currentColor;animation:pp-spark 2.8s ease-in-out infinite}
@keyframes pp-spark{50%{transform:scale(.72) rotate(45deg);opacity:.55}}
.pp-disc .pp-sub{display:none}
/* the chips scroll sideways in the bar; the right edge fades so a cut chip reads as "more" */
.pp-chips{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;
  mask-image:linear-gradient(90deg,black calc(100% - 40px),transparent)}
.pp-chip input{position:absolute;opacity:0;pointer-events:none}
/* a rounded rectangle, never a pill; the pick is white words in a white edge, never orange (Erik, round three) */
.pp-chip span{display:inline-block;padding:5px 10px;border:1px solid var(--hl3);border-radius:6px;font-size:.82rem;color:var(--dim);cursor:pointer;white-space:nowrap}
.pp-chip input:checked+span{border-color:var(--ink);color:var(--ink)}
.pp-chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.pp-other{display:none;width:10rem;flex:none}
.pp-disc:has(input[value="other"]:checked) .pp-other{display:block}
/* Later left of Save, Save the last thing in the bar; the markup keeps Save first for Enter */
.pp-acts{display:flex;align-items:center;gap:12px}
.pp-later{order:-1;background:none;border:none;color:var(--dim);cursor:pointer;font:inherit;font-size:.85rem}
/* the box sits beside .canvas, outside its page container: a media query */
@media (max-width:700px){.pp-disc .pp-body{flex-wrap:wrap}.pp-chips{flex-basis:100%;order:2}}
@media (max-width:480px){.pp-name .pp-h{font-size:clamp(1.4rem,7vw,1.9rem)}}
@media (prefers-reduced-motion:reduce){.pp-name,.pp-disc,.pp-ico,.pp-h::after{animation:none!important}}