/* CEA Digital admin: ops dashboard genre, NOT the website genre.
 *
 * rig/design/genres/dashboard.md points at DNA.md as the whole rulebook and at
 * plans/0042-<id>/mockups/variant-c.html as the approved render new cockpit
 * surfaces start from. This file starts from that token set.
 *
 * Dials: variance 3-4, motion 2-3, density 7-8. Density >= 7 engages the
 * cockpit rules: no card containers around data, hairlines and negative space
 * instead, 4px base grid, row height 28-32px, three surface steps maximum,
 * borders do elevation rather than shadows.
 *
 * The customer portal stays in the website genre on auth.css. A client-facing
 * surface and an operator console are different jobs and should not converge.
 */

:root{
  /* Soft Cockpit ground ramp, verbatim from the approved render */
  --ground:#050505; --panel:#0E0E11; --raised:#17171C;
  --line:rgba(255,255,255,0.08); --line-soft:rgba(255,255,255,0.05);
  --fg0:#ECECEF; --fg1:#AEAEB6; --fg2:#7A7A84; --fg3:#54545E;
  --accent:#34B27D; --accent-line:rgba(52,178,125,0.35);
  --accent-faint:rgba(52,178,125,0.10);
  --warn:#C79E63; --warn-faint:rgba(199,158,99,0.10);
  --bad:#E5484D; --bad-faint:rgba(229,72,77,0.10);

  --ui:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);

  /* 4px base grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --row:30px;                 /* cockpit row height, 28-32 */
  --r-out:16px; --r-in:10px; --r-ctl:6px;   /* Shape Lock: double bezel */
}

*{box-sizing:border-box;}
html,body{overflow-x:clip;}
body{
  margin:0; min-height:100dvh; background:var(--ground); color:var(--fg0);
  font-family:var(--ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:#4CC594;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;}

/* ---------- signed out: a small card is correct here ---------- */
/* [hidden] must actually hide. .gate and .shell both set an explicit display,
   which beats the browser's UA rule for [hidden], so a "hidden" gate still
   occupied a full 100dvh above the cockpit and pushed the admin panel one
   entire screen below the fold. Found 2026-09-29 after J had to scroll to
   find a panel that had mounted correctly all along. */
[hidden]{display:none !important;}

.gate{min-height:100dvh; display:flex; flex-direction:column;
      align-items:center; justify-content:center; padding:var(--s6) var(--s4);
      gap:var(--s4);}
.gate-card{width:100%; max-width:340px; background:var(--panel);
           border:1px solid var(--line); border-radius:var(--r-out);
           padding:var(--s1);}
.gate-in{background:var(--raised); border:1px solid var(--line-soft);
         border-radius:var(--r-in); padding:var(--s6) var(--s4) var(--s4);}
.gate h1{font-size:17px; font-weight:600; letter-spacing:-0.01em;
         margin:0 0 var(--s1); color:var(--fg0);}
.gate .hint{margin:0 0 var(--s4); font-size:12.5px; color:var(--fg2);}

/* ---------- signed in: the cockpit shell ---------- */
.shell{min-height:100dvh; display:grid; grid-template-rows:auto 1fr;}

/* one line, and the identity is a chip rather than a paragraph */
.bar{display:flex; align-items:center; gap:var(--s4);
     height:44px; padding:0 var(--s4);
     border-bottom:1px solid var(--line); background:var(--panel);
     position:sticky; top:0; z-index:5;}
.bar .mark{font-family:var(--ui); font-weight:600; font-size:14px;
           letter-spacing:-0.01em; color:var(--fg0); flex:none;}
.bar .mark::after{content:''; display:inline-block; width:5px; height:5px;
                  background:var(--accent); margin-left:var(--s1); vertical-align:middle;}
.bar .sep{width:1px; height:18px; background:var(--line); flex:none;}
.bar .spacer{flex:1;}
.who{font-family:var(--mono); font-variant-numeric:tabular-nums;
     font-size:11px; color:var(--fg2); white-space:nowrap;
     overflow:hidden; text-overflow:ellipsis; max-width:34ch;}
.bar-act{font-family:var(--ui); font-size:11.5px; color:var(--fg2);
         background:transparent; border:1px solid var(--line);
         border-radius:var(--r-ctl); padding:3px var(--s2); height:24px;
         cursor:pointer; white-space:nowrap;
         transition:color 150ms var(--ease), border-color 150ms var(--ease);}
.bar-act:hover{color:var(--fg0); border-color:var(--fg3);}
.bar-act:active{transform:scale(0.97);}

/* tabs live in the bar, not as a second stacked row */
.tabs{display:flex; gap:0; flex:none;}
.tab{font-family:var(--ui); font-size:12.5px; font-weight:500; color:var(--fg2);
     background:transparent; border:none; border-bottom:2px solid transparent;
     padding:0 var(--s3); height:44px; margin-bottom:-1px; cursor:pointer;
     transition:color 150ms var(--ease), border-color 150ms var(--ease);}
.tab:hover{color:var(--fg0);}
.tab.on{color:var(--fg0); border-bottom-color:var(--accent);}

.work{padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4);
      max-width:1240px; width:100%;}

/* ---------- panels: double bezel, borders do elevation ---------- */
.pnl{border:1px solid var(--line); border-radius:var(--r-out);
     background:var(--panel); padding:var(--s1);}
.pnl-in{background:var(--raised); border:1px solid var(--line-soft);
        border-radius:var(--r-in);}
.pnl-hd{display:flex; align-items:center; gap:var(--s3);
        padding:var(--s3) var(--s4); border-bottom:1px solid var(--line-soft);
        min-height:38px;}
.pnl-hd h2{margin:0; font-size:13px; font-weight:600; letter-spacing:-0.005em;
           color:var(--fg0);}
.pnl-hd .count{font-family:var(--mono); font-variant-numeric:tabular-nums;
               font-size:11px; color:var(--fg2); flex:1;}
.pnl-bd{padding:var(--s3) var(--s4) var(--s4);}
.pnl-bd > p{margin:0 0 var(--s2); color:var(--fg1); max-width:70ch;}
.pnl-bd > p:last-child{margin-bottom:0;}

.empty{margin:0; font-size:12.5px; color:var(--fg2); max-width:64ch;}

/* ---------- rows: hairlines and negative space, no cards ---------- */
.rows{display:flex; flex-direction:column;}
.row{display:flex; align-items:center; gap:var(--s3);
     min-height:var(--row); padding:var(--s2) 0;
     border-bottom:1px solid var(--line-soft);}
.row:last-child{border-bottom:none;}
.row-main{flex:1; min-width:0; font-size:13px; color:var(--fg0);
          overflow:hidden; text-overflow:ellipsis;}
.row-meta{font-family:var(--mono); font-variant-numeric:tabular-nums;
          font-size:11px; color:var(--fg2); white-space:nowrap;}
.row-btn{display:flex; align-items:center; gap:var(--s3); width:100%;
         text-align:left; background:transparent; border:none; cursor:pointer;
         font-family:var(--ui); padding:0;}
.row-btn:hover .row-main{color:var(--accent);}

/* expandable rows */
details.row-x{border-bottom:1px solid var(--line-soft);}
details.row-x:last-child{border-bottom:none;}
details.row-x summary{display:flex; align-items:center; gap:var(--s3);
                      min-height:var(--row); padding:var(--s2) 0;
                      cursor:pointer; list-style:none;}
details.row-x summary::-webkit-details-marker{display:none;}
details.row-x summary::before{content:'+'; font-family:var(--mono);
                              font-size:12px; color:var(--fg3); width:10px; flex:none;}
details.row-x[open] summary::before{content:'\2212';}
details.row-x summary:hover .row-main{color:var(--accent);}
.row-d{padding:var(--s2) 0 var(--s4) 22px; display:flex;
       flex-direction:column; gap:var(--s1);}

/* key/value lines */
.kv{display:flex; gap:var(--s3); align-items:baseline; min-height:22px;}
.kv-k{font-size:11.5px; color:var(--fg2); width:76px; flex:none;}
.kv-v{font-family:var(--mono); font-variant-numeric:tabular-nums;
      font-size:12px; color:var(--fg0); overflow-wrap:anywhere;}
a.kv-v{color:var(--accent);}

.quote{margin:var(--s2) 0 0; padding:var(--s3);
       background:rgba(255,255,255,0.025); border:1px solid var(--line-soft);
       border-radius:var(--r-ctl); font-size:12.5px; color:var(--fg1);
       white-space:pre-wrap; overflow-wrap:anywhere; max-width:72ch;}

/* ---------- chips: state only, never decoration ---------- */
.chip{display:inline-block; font-family:var(--mono);
      font-variant-numeric:tabular-nums; font-size:10px; padding:1px 6px;
      border-radius:99px; white-space:nowrap;
      background:rgba(255,255,255,0.05); color:var(--fg2);}
.chip.ok{background:var(--accent-faint); color:var(--accent);}
.chip.warn{background:var(--warn-faint); color:var(--warn);}
.chip.bad{background:var(--bad-faint); color:var(--bad);}

/* ---------- controls ---------- */
.btn{font-family:var(--ui); font-size:12.5px; font-weight:500;
     background:var(--accent); color:#06150E; border:1px solid transparent;
     border-radius:var(--r-ctl); padding:0 var(--s3); height:30px;
     display:inline-flex; align-items:center; justify-content:center;
     cursor:pointer; white-space:nowrap;
     transition:background 150ms var(--ease), transform 120ms var(--ease);}
.btn:hover{background:#4CC594;}
.btn:active{transform:scale(0.97);}
.btn:disabled{background:var(--fg3); color:var(--panel); cursor:not-allowed; transform:none;}
.btn-q{background:rgba(255,255,255,0.05); color:var(--fg1);
       border-color:var(--line);}
.btn-q:hover{background:rgba(255,255,255,0.09); color:var(--fg0);}
.btn-sm{height:24px; font-size:11.5px; padding:0 var(--s2);}

label{font-size:11.5px; color:var(--fg2); display:block; margin-bottom:var(--s1);}
input,textarea,select{
  font-family:var(--ui); font-size:13px; color:var(--fg0);
  background:#0A0A0D; border:1px solid var(--line);
  border-radius:var(--r-ctl); padding:0 var(--s2); height:32px; width:100%;
  transition:border-color 150ms var(--ease);
}
textarea{min-height:58px; padding:var(--s2); resize:vertical; line-height:1.45;}
input:hover,textarea:hover,select:hover{border-color:var(--fg3);}
input:focus,textarea:focus,select:focus{border-color:var(--accent);}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;}
input[aria-invalid="true"]{border-color:var(--bad);}

.form{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-end;
      padding-top:var(--s3); margin-top:var(--s3);
      border-top:1px solid var(--line-soft);}
.form .f{flex:1 1 150px; min-width:0;}
.form .f.wide{flex:1 1 100%;}

.note{font-size:12px; margin:var(--s2) 0 0; min-height:16px; color:var(--fg2);
      flex:1 1 100%;}
.note.err{color:var(--bad);}
.note.ok{color:var(--accent);}

/* ---------- figure strip ---------- */
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
      border:1px solid var(--line); border-radius:var(--r-out);
      overflow:hidden; background:var(--panel);}
.fig{padding:var(--s3) var(--s4); border-right:1px solid var(--line-soft);
     display:flex; flex-direction:column; gap:1px;}
.fig:last-child{border-right:none;}
.fig .n{font-family:var(--mono); font-variant-numeric:tabular-nums;
        font-size:21px; font-weight:500; letter-spacing:-0.015em; line-height:1.2;}
.fig .l{font-size:11px; color:var(--fg2);}
.fig .n.ok{color:var(--accent);} .fig .n.warn{color:var(--warn);}
.fig .n.dim{color:var(--fg3);}

.todo{margin:0; padding-left:16px; display:flex; flex-direction:column; gap:var(--s1);}
.todo li{font-size:12.5px; color:var(--fg2);}

@media (max-width:760px){
  .bar{height:auto; flex-wrap:wrap; padding:var(--s2) var(--s3); gap:var(--s2);}
  .tab{height:34px;}
  .who{max-width:100%;}
  .work{padding:var(--s3);}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important;}
}

/* ---------- the gate is the front door, not the workspace ----------
   J, 2026-09-24: "the entire font and theme system for OAuth changes, it should
   remain the same for the aura front door based on how the original page is
   created." So the sign-in surface now carries index.html's Drawing Office
   tokens and faces, scoped to .gate alone. Everything BEHIND the gate stays Soft
   Cockpit, because a workspace and a front door are different jobs (DNA.md).
   The gate already fills the viewport, so it covers the cockpit ground. */
.gate{
  --paper:#F4F5F7; --card:#FFFFFF; --ink:#141A22; --ink-2:#48505E;
  --muted:#6E7788; --faint:#9AA3B2; --rule:#DFE3E9;
  --accent-fd:#C9412A; --accent-fd-ink:#A5321F; --accent-fd-wash:#FBEEEB;
  --display:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --text:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--paper); color:var(--ink-2); font-family:var(--text);
}
.gate .mark{font-family:var(--display); font-weight:700; font-size:19px;
            letter-spacing:-0.02em; color:var(--ink); text-decoration:none;
            display:inline-flex; align-items:baseline; gap:5px;}
.gate .mark i{width:7px; height:7px; background:var(--accent-fd); display:inline-block;}
.gate-card{max-width:392px; background:var(--card); border:1px solid var(--rule);
           border-radius:10px; padding:0;
           box-shadow:0 1px 2px rgba(20,26,34,0.05), 0 12px 32px -14px rgba(20,26,34,0.22);}
.gate .gate-in{background:transparent; border:none; border-radius:10px;
               padding:30px 30px 32px;}
.gate h1{font-family:var(--display); font-weight:600; font-size:23px;
         letter-spacing:-0.02em; color:var(--ink); margin:0 0 6px;}
.gate .hint{margin:0 0 18px; font-size:14.5px; line-height:1.55; color:var(--ink-2);}
.gate label{display:block; font-family:var(--text); font-size:14px;
            color:var(--muted); margin-bottom:6px; letter-spacing:0;}
.gate input{width:100%; box-sizing:border-box; min-height:44px;
            font-family:var(--text); font-size:15px; color:var(--ink);
            background:#FFFFFF; border:1px solid var(--rule); border-radius:4px;
            padding:10px 12px;}
.gate input:focus-visible{outline:2px solid var(--accent-fd); outline-offset:2px;}
.gate .btn{font-family:var(--text); font-size:14.5px; font-weight:500;
           color:#FFFFFF; background:var(--accent-fd); border:0; border-radius:4px;
           min-height:44px; letter-spacing:0;}
.gate .btn:hover{background:var(--accent-fd-ink); color:#FFFFFF;}
.gate .btn:active{transform:scale(0.97);}
.gate .btn:disabled{background:var(--faint); cursor:not-allowed; transform:none;}
.gate .btn-link{background:transparent; color:var(--accent-fd); border:0;
                font-family:var(--text); font-size:13.5px; min-height:auto;
                padding:0; margin-top:14px; display:inline-block;
                cursor:pointer; text-decoration:none;}
.gate .btn-link:hover{background:transparent; color:var(--accent-fd-ink);
                      text-decoration:underline;}
.gate .note{font-family:var(--text); font-size:13.5px; color:var(--ink-2);}
.gate .note.err{color:var(--accent-fd-ink);}
.gate .note.ok{color:var(--ink);}
.gate .foot{margin:0; font-size:13.5px; color:var(--muted);}

.gate .or{display:flex; align-items:center; gap:12px; margin:18px 0;
          font-size:12.5px; color:var(--faint);}
.gate .or::before, .gate .or::after{content:""; flex:1; height:1px; background:var(--rule);}

.gate .btn-quiet{width:100%; margin-top:10px; background:var(--accent-fd-wash);
                 color:var(--accent-fd-ink); border:0;}
.gate .btn-quiet:hover{background:#F6DED9; color:var(--accent-fd-ink);}

.gate #link-confirm{margin-top:16px; padding-top:16px; border-top:1px solid var(--rule);}
.gate #link-confirm label{margin-bottom:6px;}