/* ---------- SIGN IN ---------- */
#signin{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:24px}
.si-card{width:100%;max-width:380px}
.si-mark{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.si-mark svg{height:20px}
.si-word{font-family:var(--courier);font-weight:500;font-size:12px;letter-spacing:.11em;text-transform:uppercase;}
.si-word sup{color:var(--accent)}
.si-eye{font-family:var(--courier);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.si-h{font-family:var(--helv);font-weight:900;font-size:30px;letter-spacing:-0.02em;line-height:1.02;margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--courier);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input, .field select, .field textarea{width:100%;border:1px solid var(--line);padding:13px 14px;min-height:48px;background:var(--paper);color:var(--ink);border-radius:var(--radius);transition:border-color .12s, box-shadow .12s}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,10,10,.04)}
.btn-primary{width:100%;background:var(--ink);color:var(--paper);padding:15px;font-weight:900;font-size:15px;letter-spacing:-.02em;border-radius:var(--r-action);transition:.15s var(--ease)}
@media(hover:hover){.btn-primary:hover{background:var(--accent)}}
.si-sub{font-size:14px;line-height:1.65;color:var(--muted);margin:-8px 0 24px}
.si-ghost{display:block;width:100%;text-align:center;margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--courier);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.si-ghost:hover{border-color:var(--ink)}
.si-msg{margin-top:12px;font-family:var(--courier);font-size:11px;color:var(--accent);text-align:center;line-height:1.6}
.si-alt{text-align:center;margin-top:16px;font-family:var(--courier);font-size:12px;color:var(--muted)}
.si-alt button{color:var(--accent);font-family:var(--courier);font-size:12px;text-transform:uppercase;letter-spacing:0.06em}
.si-linkbtn{color:var(--accent);text-decoration:underline;font:inherit}
.si-foot{margin-top:34px;font-family:var(--courier);font-size:10px;letter-spacing:0.05em;color:var(--muted);text-align:center;line-height:1.7}

/* ---------- APP BAR ---------- */
#pageChrome{display:none}   /* v3.2 — the phone page's masthead; the phone media query turns it on */
.app-bar{position:sticky;top:0;z-index:90;background:var(--paper);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.app-bar .wrap{max-width:none;margin:0;padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ab-left{display:flex;align-items:center;gap:11px}
.wordmark{font-family:var(--courier);font-weight:500;font-size:12px;letter-spacing:.11em;text-transform:uppercase;line-height:1;cursor:pointer}
@media(hover:hover){.wordmark:hover{color:var(--accent)}}
.wordmark sup{color:var(--accent);font-size:.6em}
.wordmark small{display:block;font-family:var(--courier);font-size:8px;letter-spacing:0.16em;color:var(--muted);font-weight:400;margin-top:3px;text-transform:uppercase}
.ab-nav{display:flex;gap:2px;margin-right:auto}
@media(min-width:721px){.ab-left{display:none}.app-bar .wrap{justify-content:flex-start}}
.ab-nav button{font-family:var(--courier);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);padding:8px 14px;border-radius:100px}
.ab-nav button.on{background:var(--ink);color:var(--paper)}
.ab-nav button:not(.on):hover{color:var(--ink)}
.ab-right{display:flex;align-items:center;gap:10px;position:relative}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--courier);font-size:12px;font-weight:500}
.menu{position:absolute;top:44px;right:0;background:var(--paper);border:1px solid var(--ink);min-width:200px;z-index:95;box-shadow:var(--lift)}
.menu button{display:block;width:100%;text-align:left;padding:12px 16px;font-size:13px;border-bottom:1px solid var(--line)}
.menu button:last-child{border-bottom:none}
.menu button:hover{background:var(--wash)}
.menu .danger{color:var(--accent)}
/* Mobile header: wordmark + avatar on the first row, nav as a full-width second row.
   (The old fixed-bottom nav never reached the viewport — .app-bar's backdrop-filter made
   it a containing block — so the nav sat on top of the wordmark/avatar instead.) */
@media(max-width:720px){.wordmark small{display:none}
  .app-bar .wrap{flex-wrap:wrap;height:auto;padding:0 16px;row-gap:0}
  .ab-left,.ab-right{height:52px;align-items:center}
  .ab-nav{order:3;flex:1 0 calc(100% + 32px);margin:0 -16px;height:42px;justify-content:space-around;border-top:1px solid var(--line)}
  .ab-nav button{flex:1;border-radius:0;font-size:10px;padding:0;letter-spacing:.08em}
  .ab-nav button.on{background:none;color:var(--accent)}
}

#appRoot{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
#appRoot>.page{flex:1 0 auto;width:100%;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} /* clearance so the FAB never covers inputs or row actions */
body.sheet-open{overflow:hidden} /* lock the page while a sheet is up */
body.kb-open .fab{display:none}  /* keyboard open: the FAB yields */
.page{max-width:none;margin:0;padding:20px 28px 48px}  /* v2.22p2 — full-screen web: the app fills the window (Arrick, round 2) */
/* v3.0.0 — the full-bleed rule is a DESKTOP rule. Unscoped, its 28px gutter cost
   phones 16px of card width and wrapped the builder's type chips and the recorder's
   superset headers. Wide screens fill the window; phones keep the 20px they had. */
@media (max-width:720px){.page{padding-left:20px;padding-right:20px}}
.view{display:none}.view.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- CARDS ---------- */
.card{background:var(--paper);border:1px solid transparent;box-shadow:var(--lift);padding:20px 22px;border-radius:var(--radius)}
.card.ink{border-color:var(--ink)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.ct{font-family:var(--courier);font-size:13px;letter-spacing:0.1em;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:8px}
.cmeta{font-family:var(--courier);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.g-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.g-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.mb16{margin-bottom:16px}
@media(max-width:900px){.g-2,.g-3{grid-template-columns:1fr}}

/* ---------- PROMPT STRIP ---------- */
.prompt{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;flex-wrap:wrap}
.prompt.calm{background:var(--paper);color:var(--ink);border:1px solid var(--line)}