/* The student hub (templates/hub.html) and the hub-styled student sign-in.
   The token blocks below are docs/brand/assets/tokens.css, verbatim. */
/* ============================================================
   SDSCPA Design & Production — brand tokens + core components
   ============================================================
   Copy the token blocks verbatim into every on-screen project.
   Keep the variable NAMES identical across projects (add your own
   if you need to, but never rename or drop these) so shared
   snippets port between SDSCPA projects without edits.

   Every color below is either one of the seven reserved rainbow
   stops, a neutral, or a darkened/lightened brand stop chosen to
   clear WCAG AA against its own surface. Ratios are noted. Do not
   substitute a color you picked by eye.
   ============================================================ */

/* ---------- Dark: the house default ---------- */
:root{
  color-scheme: dark;

  /* surfaces */
  --bg:#0A0A0A;            /* page */
  --panel:#141416;         /* the one panel level */
  --raised:#1C1C1F;        /* menus, sheets, dialogs — the only things that float */
  --input:#0F0F11;         /* form fills */
  --line:rgba(255,255,255,.10);        /* hairline separators */
  --line-strong:rgba(255,255,255,.20); /* control borders */

  /* text */
  --text:#F0F0F2;          /* 16.2:1 on --bg */
  --muted:#A3A3AD;         /*  7.4:1 on --bg */
  --faint:#7E7E86;         /* 4.9:1 on --bg, 4.6:1 on --panel — placeholders and timestamps */

  /* interactive */
  --accent:#00AEEF;        /* the cyan brand stop — 7.3:1 on --bg. Links and focus. */
  --focus:#00AEEF;
  --ink-fill:#F0F0F2;      /* primary button fill: ink, not color */
  --ink-on:#0A0A0A;        /* 16:1 */

  /* semantic — darkened/lightened brand stops, never Tailwind defaults */
  --good:#7AC143;          /* green stop     — 8.4:1 as text on --bg */
  --warn:#F7941E;          /* orange stop    — 8.1:1 */
  --bad:#F26A7E;           /* red stop, lifted for text — 6.3:1 */
  --info:#8C91E8;          /* indigo stop lifted — 6.9:1. The fourth status. */
  --bad-fill:#F26A7E;      /* chip fill — 6.7:1 behind --bad-ink */
  /* On dark, every semantic chip is a light fill with near-black text. */
  --good-ink:#0A0A0A; --warn-ink:#0A0A0A; --bad-ink:#0A0A0A; --info-ink:#0A0A0A;
  /* The purple stop lifted until it can carry text — 6.4:1. For the identity
     that has to be a word rather than a dot: a role, a pass destination. */
  --violet-text:#CE6FCA;

  /* states */
  --hover:rgba(255,255,255,.05);
  --selected:rgba(255,255,255,.08);
  --shadow-float:0 12px 32px rgba(0,0,0,.45);

  /* the seven reserved stops, for identity only (a section, a shop, a period) */
  --s-green:#7AC143; --s-orange:#F7941E; --s-red:#ED1C45; --s-pink:#EC008C;
  --s-purple:#92278F; --s-indigo:#2E3192; --s-cyan:#00AEEF;
  --rainbow:linear-gradient(90deg,#7AC143,#F7941E,#ED1C45,#EC008C,#92278F,#2E3192,#00AEEF);
  --rainbow-v:linear-gradient(180deg,#7AC143,#F7941E,#ED1C45,#EC008C,#92278F,#2E3192,#00AEEF);

  /* type */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,Menlo,monospace;
  --serif:Georgia,serif;   /* print and formal documents only */

  /* shape */
  --r-control:8px; --r-panel:12px; --r-pill:999px;
}

/* ---------- Light: follows the device unless the app overrides ---------- */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  color-scheme: light;
  --bg:#F4F4F5; --panel:#FFFFFF; --raised:#FFFFFF; --input:#FFFFFF;
  --line:rgba(21,23,26,.12); --line-strong:rgba(21,23,26,.24);
  --text:#15171A;          /* 18.0:1 on --bg */
  --muted:#5A5F68;         /*  6.4:1 */
  --faint:#6B7079;         /*  4.5:1 on --bg, 5.0:1 on --panel */
  --accent:#006FA8;        /* the cyan stop darkened — 5.5:1 */
  --focus:#006FA8;
  --ink-fill:#15171A; --ink-on:#FFFFFF;
  --good:#3A7419;          /* 5.7:1 */
  --warn:#9A5008;          /* 6.0:1 */
  --bad:#B5123A;           /* 6.8:1 */
  --info:#2E3192;          /* 9.7:1 — the indigo stop itself */
  --violet-text:#92278F;   /* 6.6:1 — the purple stop itself */
  --bad-fill:#C0143C;      /* chip fill — 6.2:1 behind white */
  /* On light, every semantic chip is a dark fill with white text. */
  --good-ink:#FFFFFF; --warn-ink:#FFFFFF; --bad-ink:#FFFFFF; --info-ink:#FFFFFF;
  --hover:rgba(21,23,26,.05); --selected:rgba(21,23,26,.07);
  --shadow-float:0 12px 32px rgba(15,17,20,.18);
} }

/* Explicit toggle, so an in-app appearance setting wins in both directions. */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F4F4F5; --panel:#FFFFFF; --raised:#FFFFFF; --input:#FFFFFF;
  --line:rgba(21,23,26,.12); --line-strong:rgba(21,23,26,.24);
  --text:#15171A; --muted:#5A5F68; --faint:#6B7079;
  --accent:#006FA8; --focus:#006FA8;
  --ink-fill:#15171A; --ink-on:#FFFFFF;
  --good:#3A7419; --warn:#9A5008; --bad:#B5123A; --info:#2E3192;
  --violet-text:#92278F; --bad-fill:#C0143C;
  /* On light, every semantic chip is a dark fill with white text. */
  --good-ink:#FFFFFF; --warn-ink:#FFFFFF; --bad-ink:#FFFFFF; --info-ink:#FFFFFF;
  --hover:rgba(21,23,26,.05); --selected:rgba(21,23,26,.07);
  --shadow-float:0 12px 32px rgba(15,17,20,.18);
}

/* Increased contrast: thicker lines, brighter secondary text, no tints. */
@media (prefers-contrast: more){
  :root{ --line:rgba(255,255,255,.35); --line-strong:rgba(255,255,255,.6); --muted:#D0D0D6; }
}


*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;min-height:100%}
body.hub{background:var(--bg);color:var(--text);font:16px/1.5 var(--sans);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.hub a{color:var(--accent);text-decoration:none}
.hub a:hover{text-decoration:underline;text-underline-offset:2px}
.hub :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.hub h1,.hub h2{margin:0;line-height:1.2;text-wrap:balance}

/* Top bar: the wordmark lockup at the left; rainbow appearance #1 of 2. */
.hub-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;
  padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--line)}
.hub-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rainbow)}
.hub-top .brand img{height:24px;width:auto;display:block}
.hub-top .site{color:var(--muted);font-weight:600;font-size:14px}
.hub-top .spacer{flex:1}
.hub-top form{margin:0}

.hub-main{max-width:1000px;margin:0 auto;padding:40px 24px 64px}
.hub-head{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.hub-head h1{font-size:32px;font-weight:800;letter-spacing:-.01em}
.hub-head .lede{color:var(--muted);max-width:60ch}

.doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
  list-style:none;margin:0;padding:0}
.door{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px 18px 18px;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c,var(--line-strong));
  border-radius:var(--r-panel);color:var(--text)}
.hub a.door:hover{text-decoration:none;background:var(--hover);border-color:var(--line-strong);
  border-left-color:var(--c,var(--line-strong))}
.door h2{font-size:20px}
.door p{margin:0;color:var(--muted)}
.door .note{font-size:14px;color:var(--faint)}
.door .go{margin-top:auto;padding-top:8px;font-weight:600;color:var(--accent)}
.door.locked .go{color:var(--muted)}
/* "2 open requests" on the equipment and event doors: a link to My requests,
   sitting on the door's bottom line beside "Open" (a sibling, not nested). */
.doors li{position:relative}
.door-mine{position:absolute;right:20px;bottom:18px;font-size:14px;font-weight:600;color:var(--muted);
  text-decoration:underline;text-underline-offset:2px}
.hub a.door-mine:hover{color:var(--text)}

.hub-foot{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;
  color:var(--muted);font-size:14px}

.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 16px;border-radius:var(--r-control);border:1px solid var(--line-strong);background:none;
  color:var(--text);font:600 15px/1 var(--sans);cursor:pointer}
.btn.primary{background:var(--ink-fill);color:var(--ink-on);border-color:var(--ink-fill)}
.hub a.btn:hover{text-decoration:none;background:var(--hover)}
.hub a.btn.primary:hover{background:var(--ink-fill)}

/* The sign-in and first-sign-in cards, when reached from the hub. */
.hub-card{max-width:440px;margin:0 auto;padding:24px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-panel)}
.hub-card h1{font-size:24px;margin-bottom:8px}
.hub-card p{margin:0 0 12px;color:var(--muted)}
.hub-card form{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.hub-card label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.hub-card input{min-height:44px;padding:0 12px;border-radius:var(--r-control);border:1px solid var(--line-strong);
  background:var(--input);color:var(--text);font:16px var(--sans)}
.hub-card .code{font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase}
.hub-card .help{font-size:14px;color:var(--muted);font-weight:400}
.flash{padding:10px 12px;border-radius:var(--r-control);border:1px solid var(--line-strong);margin-bottom:12px}
.flash.error{border-color:var(--bad);color:var(--bad)}
.flash.ok{border-color:var(--good);color:var(--good)}

@media (max-width:600px){
  .hub-top{padding:10px 16px}
  .hub-top .site{display:none}
  .hub-main{padding:24px 16px 48px}
  .hub-head h1{font-size:26px}
}