/* Admin console — an instrument, not a brochure.
   Same palette as the rest of the site, but denser: tighter rhythm, tabular numerals,
   monospace for anything you might need to read character by character. */
@import url('/auth/account.css');

:root{ --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --row:rgba(19,26,41,.5); }

body{font-size:15px}
.admin{display:grid;grid-template-columns:230px 1fr;min-height:100vh;position:relative;z-index:1}
@media(max-width:900px){.admin{grid-template-columns:1fr}}

/* ---- rail ----
   Founder, 04/09: "the sign out button is not even pressable". It sat at y=907 in a 900px
   window: the rail was as tall as its own list, the page had nothing else to scroll, and the
   foot of the rail — the language switch, the way back to the dashboard, and sign out — was
   simply below the screen with no way to reach it. The rail is its own column now: it holds
   the height of the window, its LIST scrolls, and its foot stays on the screen. */
.rail{
  border-inline-end:1px solid var(--hair);padding:20px 14px;
  display:flex;flex-direction:column;gap:3px;
  background:linear-gradient(180deg,rgba(16,23,37,.5),rgba(16,23,37,.2));
  position:sticky;top:0;height:100vh;min-height:0;
}
@supports (height:100dvh){ .rail{height:100dvh} }
.rail #rail-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:3px;margin-inline:-4px;padding-inline:4px}
/* On a phone the console was sixteen links stacked above everything, with the work below the
   fold and sign out buried in the middle of them (04/09). The rail becomes what it should be
   on a small screen: one line of sections you swipe through, with the brand and the way out
   beside it, and the work directly under it. */
@media(max-width:900px){
  .rail{position:sticky;top:0;z-index:30;height:auto;padding:10px 12px;gap:8px;
    display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand foot" "nav nav";
    align-items:center;border-inline-end:0;border-bottom:1px solid var(--hair);
    background:#0e1524;background:color-mix(in srgb,#0e1524 94%,transparent);
    backdrop-filter:saturate(140%) blur(12px)}
  .rail .brand{grid-area:brand;padding:0}
  .rail .brand img{width:28px;height:28px}
  .rail .foot{grid-area:foot;margin:0;padding:0;border-top:0;gap:6px;
    display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center}
  .rail .foot > nav{flex:0 0 auto}
  .rail .foot .act{width:auto;padding:8px 12px;font-size:.78rem}
  .rail #rail-nav{grid-area:nav;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    gap:6px;padding-bottom:2px;scrollbar-width:none}
  .rail #rail-nav::-webkit-scrollbar{display:none}
  .rail #rail-nav h3{display:none}
  .rail #rail-nav a{white-space:nowrap;border:1px solid var(--hair);border-radius:999px;
    padding:9px 14px;min-height:40px}
  .rail #rail-nav a .n{margin-inline-start:6px}
}
.rail .brand{display:flex;align-items:center;gap:10px;padding:4px 10px 20px;text-decoration:none;color:inherit}
.rail .brand img{width:32px;height:32px;object-fit:contain}
.rail .brand b{font-size:.82rem;font-weight:800;display:block;line-height:1.2}
.rail .brand span{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:800}
.rail h3{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
         font-weight:800;margin:18px 0 7px;padding-inline-start:10px}
.rail a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:var(--mist);text-decoration:none;font-size:.87rem;font-weight:700;
  border:1px solid transparent;transition:background .16s,color .16s,border-color .16s;
}
.rail a:hover{background:rgba(226,238,242,.05);color:#fff}
.rail a.on{background:rgba(210,169,95,.12);color:var(--gold-lit);border-color:rgba(210,169,95,.3)}
.rail a .n{margin-inline-start:auto;font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums}
.rail a.on .n{color:var(--gold-lit)}
.rail .foot{flex:0 0 auto;margin-top:12px;padding-top:14px;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center}
.rail .foot > nav{grid-column:1 / -1;display:flex;gap:4px}
.rail .foot > nav .chip{flex:1;justify-content:center;text-align:center}
.rail .foot .act{margin:0!important;width:100%;justify-content:center;text-align:center}
.rail .foot .act{min-height:38px;padding:8px 10px;font-size:.76rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rail .foot .chip{min-height:34px;padding:6px 10px}
@media(pointer:coarse){ .rail .foot .act,.rail .foot .chip{min-height:44px} }

/* ---- main ---- */
.main{padding:22px clamp(16px,2.6vw,32px) 60px;min-width:0;max-width:1240px}
.crumb{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.crumb .eyebrow{margin:0}
.main h1{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:0 0 6px;letter-spacing:-.02em}
.main .desc{color:var(--mist);font-size:.9rem;margin:0 0 22px;max-width:70ch}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input[type=search]{
  flex:1;min-width:180px;max-width:340px;padding:10px 14px;font-size:.88rem;border-radius:10px;
  background:rgba(16,23,37,.6);border:1px solid var(--hair);color:var(--ink);font-family:inherit;
}
.toolbar input[type=search]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,169,95,.14)}
.chip{
  font-family:inherit;font-size:.76rem;font-weight:800;padding:8px 13px;border-radius:999px;cursor:pointer;
  background:rgba(226,238,242,.05);border:1px solid var(--hair);color:var(--mist);
}
.chip[aria-pressed="true"]{background:var(--gold-lit);border-color:var(--gold-lit);color:#231703}

/* ---- stat strip ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.stat{background:var(--row);border:1px solid var(--hair);border-radius:14px;padding:16px 18px}
.stat .k{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:800}
.stat .v{font-family:inherit;font-weight:800;font-size:2rem;color:var(--gold-lit);
         line-height:1.1;margin-top:8px;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.stat .v.small{font-size:1.4rem}

/* ---- table ---- */
.tablewrap{border:1px solid var(--hair);border-radius:14px;overflow:auto;background:rgba(16,23,37,.35)}
table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:640px}
thead th{
  position:sticky;top:0;background:var(--deep);text-align:start;padding:11px 14px;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:800;
  border-bottom:1px solid var(--hair);white-space:nowrap;
}
tbody td{padding:11px 14px;border-bottom:1px solid rgba(226,238,242,.07);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(226,238,242,.035)}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
td.mono{font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px}
.who b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;
      padding:4px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.pill.live{background:rgba(43,154,145,.16);color:#8fd8cf}
.pill.draft{background:rgba(226,238,242,.08);color:var(--faint)}
.pill.paid{background:rgba(43,154,145,.16);color:#8fd8cf}
.pill.pending{background:rgba(210,169,95,.16);color:var(--gold-lit)}
.pill.failed{background:rgba(255,154,138,.14);color:var(--bad)}
.pill.admin{background:rgba(210,169,95,.18);color:var(--gold-lit)}
.pill.teacher{background:rgba(163,169,255,.16);color:#c3c7ff}

.act{
  font-family:inherit;font-size:.75rem;font-weight:800;padding:6px 12px;border-radius:8px;cursor:pointer;
  background:rgba(226,238,242,.06);border:1px solid var(--hair);color:var(--mist);
}
.act:hover:not(:disabled){background:rgba(226,238,242,.12);color:#fff;border-color:rgba(210,169,95,.45)}
.act:focus-visible{outline:2px solid var(--gold-lit,#d9b26a);outline-offset:2px}
.act{min-height:34px}
@media(pointer:coarse){ .act{min-height:44px;padding-inline:14px} }
.act:disabled{opacity:.4;cursor:not-allowed}

.state{padding:44px 24px;text-align:center;color:var(--mist)}
.state .glyph{font-size:1.6rem;color:rgba(210,169,95,.45);margin-bottom:10px}
.state b{display:block;color:var(--ink);font-weight:800;margin-bottom:6px}
.state p{margin:0 auto;max-width:46ch;font-size:.88rem;line-height:1.55}

.notbuilt{border:1px dashed rgba(226,238,242,.22);border-radius:14px}

/* the preview banner is shared with the dashboard */
.preview{
  display:flex;gap:13px;align-items:flex-start;
  border:1px solid rgba(210,169,95,.34);background:rgba(210,169,95,.07);
  border-radius:14px;padding:13px 16px;margin-bottom:22px;font-size:.86rem;color:var(--gold-lit);
}
.preview b{display:block;font-weight:800;margin-bottom:3px}
.preview span{color:var(--mist);font-weight:500}
.preview svg{flex:0 0 16px;margin-top:2px;stroke:var(--gold);fill:none;stroke-width:1.6}

/* [hidden] loses to any class that sets display. Without this the search box shows on the
   Overview section, which has nothing to search. */
[hidden]{display:none !important}

/* Adding an administrator (31/08). One row of fields above the table it writes into. */
.addrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.addrow input{flex:1 1 200px;min-width:0;font:inherit;font-size:.9rem;padding:10px 13px;
  border-radius:10px;border:1px solid var(--hair);background:transparent;color:inherit}
.addrow input:focus{outline:none;border-color:var(--gold,#d9b26a)}
.addrow button{flex:0 0 auto;font:inherit;font-size:.86rem;font-weight:800;padding:10px 20px;
  border-radius:10px;border:1px solid var(--gold,#d9b26a);background:var(--gold,#d9b26a);
  color:#231703;cursor:pointer}
.addrow button:disabled{opacity:.5;cursor:progress}
.addmsg{font-size:.84rem;color:#e08a76;font-weight:700}
.act.danger{border-color:rgba(255,154,138,.45);color:var(--bad,#e08a76)}
.act.danger:hover{background:rgba(255,154,138,.12)}
.act.on{background:rgba(210,169,95,.18);border-color:var(--gold-lit,#d9b26a);color:var(--gold-lit,#d9b26a)}
.act + .act{margin-inline-start:6px}

/* What needs a person, before the ten tables that do not (31/08). */
.needs{border:1px solid var(--hair);border-radius:16px;padding:20px 22px;margin-bottom:20px;
  background:rgba(210,169,95,.05)}
.needs h3{margin:0 0 12px;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-lit,#d9b26a)}
.needs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.needs li a{display:inline-flex;align-items:baseline;gap:8px;padding:11px 16px;border-radius:12px;
  border:1px solid var(--hair);text-decoration:none;color:inherit;font-size:.9rem;
  transition:border-color .18s,background .18s}
.needs li a:hover{border-color:var(--gold-lit,#d9b26a);background:rgba(210,169,95,.08)}
.needs li b{font-size:1.15rem;font-weight:800;color:var(--gold-lit,#d9b26a)}
.needs .clear{margin:0;font-size:.9rem;opacity:.6}

/* ============================================================== the editor
 * One drawer for every section with an `edit` schema (31/08). */
/* The one act that makes a new row sits ON the toolbar line beside the search, not floating
   in the space above the table (04/09 design pass). */
.addbar{display:flex;justify-content:flex-end;margin:-52px 0 14px}
@media(max-width:760px){ .addbar{margin:0 0 14px} }
.addbar .btn-save{min-height:40px}
.btn-save{font:inherit;font-size:.88rem;font-weight:800;padding:11px 20px;border-radius:11px;
  border:1px solid var(--gold-lit,#d9b26a);background:var(--gold-lit,#d9b26a);color:#231703;cursor:pointer}
.btn-save:disabled{opacity:.5;cursor:progress}
.drawer-veil{position:fixed;inset:0;z-index:80;background:rgba(10,14,24,.62);backdrop-filter:blur(3px)}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:90;width:min(100%,560px);
  display:flex;flex-direction:column;background:var(--deep,#1c2740);border-inline-start:1px solid var(--hair);
  box-shadow:-30px 0 80px rgba(0,0,0,.35)}
.drawer header,.drawer footer{display:flex;align-items:center;gap:14px;padding:18px 22px;
  border-bottom:1px solid var(--hair)}
.drawer footer{border-bottom:0;border-top:1px solid var(--hair);margin-top:auto}
.drawer header h2{margin:0;font-size:1.15rem;flex:1}
.drawer footer .drmsg{flex:1;font-size:.84rem;opacity:.8}
.drawer form{overflow:auto;padding:18px 22px;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;align-content:start}
.ed-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.ed-f[data-wide],.ed-f:has(.i18n){grid-column:1/-1}
.ed-l{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.ed-l i{color:var(--gold-lit,#d9b26a);font-style:normal}
.ed-f input:not([type=checkbox]):not([type=file]),.ed-f select,.ed-f textarea{width:100%;font:inherit;font-size:.93rem;
  padding:10px 12px;border-radius:10px;border:1px solid var(--hair);background:var(--well,rgba(16,23,37,.62));color:inherit}
.ed-f input[type=color]{padding:4px;height:42px}
.ed-f textarea{resize:vertical;line-height:1.45}
.ed-f input:focus,.ed-f select:focus,.ed-f textarea:focus{outline:none;border-color:var(--gold-lit,#d9b26a)}
.i18n{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:start}
.i18n .lg{font-size:.66rem;font-weight:800;letter-spacing:.1em;opacity:.5;padding-top:12px}
.ed-bool{grid-column:1/-1;flex-direction:row}
.ed-bool label{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:700;cursor:pointer}
.ed-bool input{width:18px;height:18px;accent-color:var(--gold-lit,#d9b26a)}
.ed-img{gap:10px}
.ed-img img{border-radius:10px;object-fit:cover;border:1px solid var(--hair)}
.ed-img .up{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:10px;
  border:1px dashed var(--hair);font-size:.84rem;font-weight:700;cursor:pointer;width:max-content}
.ed-img .up:hover{border-color:var(--gold-lit,#d9b26a)}
.ed-img .up input{display:none}
body.drawer-open{overflow:hidden}
@media(max-width:560px){ .drawer form{grid-template-columns:1fr} }
/* the auto-approve switch on the overview (migration 025) */
.needs.auto{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.needs.auto h3{margin:0}
.needs.auto .switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-weight:700;
  font-size:.92rem;min-height:44px}
.needs.auto #auto-word{color:var(--ink);letter-spacing:0;text-transform:none;font-size:.92rem}
.needs.auto .switch input{width:40px;height:22px;appearance:none;background:var(--hair);border-radius:11px;position:relative;cursor:pointer;transition:background .2s}
.needs.auto .switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.needs.auto .switch input:checked{background:var(--gold-lit,#d2a95f)}
.needs.auto .switch input:checked::after{transform:translateX(18px)}
[dir=rtl] .needs.auto .switch input:checked::after{transform:translateX(-18px)}

/* audit 03 H3 / 01: a finger needs 44px; on coarse pointers the language buttons grow, on a mouse they keep their size */
@media(pointer:coarse){ .chip{min-height:44px;min-width:44px} }