/* AgentClassMail console (2026-10-07, Doug: dark/light, full browser width, the site's world not a dry panel).
   Served by the API at /account/console.css next to the site's /styles.css, which carries the tokens (--ink, --panel,
   --paper, --brass, --stamp, --ok, --hold, the three families) and the light and dark sets. Everything here reads
   those tokens, so the one theme switch in the rail flips the whole console. No JavaScript anywhere: the rail folds
   into a <details> menu on narrow screens. */

/* ---- shell: an instrument rail on the left, the work surface taking the rest of the window ---- */
.shell{display:grid;grid-template-columns:15.5rem minmax(0,1fr);min-height:100vh;position:relative;z-index:1}
.shell.solo{grid-template-columns:minmax(0,1fr)}
.col{display:flex;flex-direction:column;min-width:0}
.account{flex:1;padding:1.6rem clamp(20px,3vw,52px) 3rem}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(20px,3vw,52px);border-bottom:1px solid var(--line)}
.topbar .brand{display:none}
.shell.solo .topbar .brand{display:flex}
.topbar .links{display:flex;gap:1.2rem;font-size:.95rem;align-items:center}
.topbar .links a{color:var(--paper-dim)}
footer{padding:1.2rem clamp(20px,3vw,52px);border-top:1px solid var(--line);color:var(--slate);font-size:.9rem}
footer .acct-foot{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}

/* the rail: brand mark, the eleven sections, the theme switch and sign-out at the foot; sticky, full height */
.instr{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line)}
.instr .brand{padding:1.05rem 1.2rem .9rem;border-bottom:1px solid var(--line);font-size:1.12rem}
.instr .brand svg{width:30px;height:30px}
.instr .fold{display:none}
.instr .tabs{display:flex;flex-direction:column;gap:0;padding:.6rem 0;margin:0;border:0;font-family:var(--body);font-size:.97rem;letter-spacing:0;text-transform:none;overflow-y:auto}
.instr .tabs a{position:relative;display:block;padding:.58rem 1.2rem .58rem 1.45rem;color:var(--paper-dim);text-decoration:none;border:0;margin:0}
.instr .tabs a:hover{color:var(--paper);background:var(--panel-2)}
.instr .tabs a[aria-current=page]{color:var(--paper);background:var(--panel-2);font-weight:600}
.instr .tabs a[aria-current=page]::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:3px;background:var(--brass)}
.instr .foot{margin-top:auto;padding:1rem 1.2rem 1.1rem;border-top:1px solid var(--line);display:grid;gap:.8rem}
.instr .foot .linkbtn{color:var(--paper-dim);font-size:.92rem;text-align:left}

/* theme switch: three mono buttons, the chosen one brass; "Auto" follows the system */
.theme-form{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.theme-form button{font:inherit;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);background:transparent;border:0;padding:.4rem .6rem;cursor:pointer;border-right:1px solid var(--line)}
.theme-form button:last-child{border-right:0}
.theme-form button:hover{color:var(--paper);background:var(--panel-2)}
.theme-form button[aria-pressed=true]{color:var(--ink);background:var(--brass)}

/* ---- the work surface ---- */
.account h1{font-size:clamp(1.9rem,3.4vw,3rem);text-transform:uppercase;letter-spacing:.03em;line-height:.98}
.console .sub{margin:.9rem 0 0;padding:.65rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--slate);overflow-wrap:anywhere}
.console .sub b,.console .sub a{font-weight:500;color:var(--paper);letter-spacing:0}
.console .sub code{color:var(--paper-dim);font-size:1em}
/* every section is a panel on the surface; the first follows the case-file strip without a top rule of its own */
.console section{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:1.3rem 1.5rem 1.5rem;margin-top:1.3rem}
.console section.first{border-top:1px solid var(--line);padding-top:1.3rem}
.console h2{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:.7rem}
.console .sub code{font-family:var(--mono)}
.console p{color:var(--paper-dim)}
.console p.meta{color:var(--slate)}
.account .tbl{border:1px solid var(--line);border-radius:4px;background:var(--ink);margin-top:1rem;overflow-x:auto}
.account table{min-width:0;width:100%;font-size:.93rem}
.account .tbl table{min-width:640px}
.account .tbl td form{margin:0}
.account .tbl .empty{color:var(--slate)}
.console pre{margin-top:.6rem}
.account thead th{font-size:1rem;background:var(--panel-2);border-bottom:1px solid var(--line);padding:.6rem .9rem}
.account td,.account tbody th{padding:.62rem .9rem}
.account tbody tr:hover td{background:rgba(210,168,59,.05)}
.account td b,.account .fig{font-family:var(--display);font-style:italic;font-weight:600;font-variant-numeric:tabular-nums lining-nums}
/* figures that matter lean, like the site's board */
.usage{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem 1.6rem;margin-top:1rem}
.usage b{display:block}
.usage span{color:var(--slate);font-size:.92rem}
.usage div{border-top:2px solid var(--line);padding-top:.7rem}
.usage b{font-size:2rem;line-height:1;color:var(--brass)}
/* pills read as small stamped labels */
.pill,.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:3px;padding:.15rem .45rem;color:var(--paper-dim);white-space:nowrap}
.pill.unread{border-color:var(--brass);color:var(--brass)}
/* notices: the stamp inside is the verdict; the text takes the paper colour in both themes */
.notice{color:var(--paper);background:rgba(199,54,43,.07)}
.notice i,.gate i,.secret .tag,.chip{font-family:var(--mono)}
/* paper is paper in both themes (the secret shown once) */
.secret{background:#E7DFC9;color:#1A1712;border-radius:3px 12px 3px 3px;box-shadow:0 20px 40px -24px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.2)}
.secret code{color:#2B2620}
/* forms on the surface */
input[type=email],input[type=password],input[type=text],input[type=search],select,textarea{background:var(--ink)}
.keyform{align-items:end}
/* sign-in and sign-up: a single quiet column, the headline doing the talking */
.shell.solo .account{display:grid;place-items:start center;padding-top:clamp(2rem,6vh,4.5rem)}
.auth{width:min(100%,30rem)}

/* ---- narrow screens: the rail becomes a top strip with a menu; the surface takes the whole width ---- */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .instr{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);display:block}
  .instr .brand{border-bottom:0;padding:.8rem 20px}
  .instr .fold{display:block;border-top:1px solid var(--line)}
  .instr summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;padding:.7rem 20px;font-weight:600;color:var(--paper)}
  .instr summary::-webkit-details-marker{display:none}
  .instr summary::after{content:"+";color:var(--brass);font-family:var(--mono);font-size:1.2rem;line-height:1}
  .instr details[open] summary::after{content:"\2013"}
  .instr .fold:not([open]) ~ .tabs,.instr .fold:not([open]) ~ .foot{display:none}
  .instr .tabs{padding:.2rem 0 .6rem}
  .instr .foot{margin-top:0}
  .topbar{display:none}
  .shell.solo .topbar{display:flex;padding-inline:20px}
  .account,footer{padding-inline:20px}
  .overview{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .instr .tabs a,.theme-form button{transition:background-color .12s ease,color .12s ease}
}