/* theme.css: the Gusss look in the college colour, for the Cloudflare site. Loads after every other style.
   The Apps Script page never loads this file. tools/build-pages.js appends the dark partners of hard-coded colours. */
:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --fill is the college colour for solid shapes. --ink is the same hue, dark enough to read as text. */
  --fill: #f5a800; --on-fill: #1d1d1f;
  --ink: #9a5b00; --ink-soft: #b26a00; --ink-deep: #7a4800; --accent: var(--ink);
  --gold: #f5a800; --gold-deep: #9a5b00;
  --accent-tint: rgba(245,168,0,.14); --accent-tint-2: rgba(245,168,0,.24); --gold-tint: rgba(245,168,0,.16);

  --text: #1d1d1f; --text-2: #6e6e73; --text-3: #767679; --muted: #6e6e73;
  --bg: #f5f5f7; --paper: #ececf0; --card: #ffffff; --surface-2: #fbfbfd; --rail: #fbfbfd;
  --line: rgba(60,60,67,.14); --line-strong: rgba(60,60,67,.24);
  --tint: rgba(118,118,128,.12); --tint-2: rgba(118,118,128,.2);

  --ok: #248a3d; --ok-bg: rgba(52,199,89,.14);
  --warn: #d70015; --warn-bg: rgba(255,59,48,.12);
  --blue: #0071a4; --blue-bg: rgba(48,176,199,.14);
  --purple: #8944ab; --purple-bg: rgba(175,82,222,.13);

  --e1: 0 0 0 .5px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --e2: 0 0 0 .5px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.06);
  --e3: 0 0 0 .5px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.09);
  --e4: 0 0 0 .5px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.2);
  --shadow: var(--e1);
  --r-sm: 10px; --r-md: 12px; --r-lg: 18px; --r-xl: 22px; --radius: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
  --glass: rgba(251,251,253,.78);
  --top: 56px; --side: 248px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ffb627; --ink-soft: #ffc14d; --ink-deep: #ffb627; --gold-deep: #ffb627;
    --accent-tint: rgba(245,168,0,.18); --accent-tint-2: rgba(245,168,0,.28); --gold-tint: rgba(245,168,0,.18);
    --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #98989d; --muted: #a1a1a6;
    --bg: #000000; --paper: #2c2c2e; --card: #1c1c1e; --surface-2: #242426; --rail: #111113;
    --line: rgba(84,84,88,.6); --line-strong: rgba(120,120,128,.6);
    --tint: rgba(118,118,128,.24); --tint-2: rgba(118,118,128,.34);
    --ok: #30d158; --ok-bg: rgba(48,209,88,.18);
    --warn: #ff6961; --warn-bg: rgba(255,69,58,.18);
    --blue: #64d2ff; --blue-bg: rgba(100,210,255,.16);
    --purple: #bf5af2; --purple-bg: rgba(191,90,242,.2);
    --e1: 0 0 0 1px rgba(255,255,255,.05); --e2: 0 0 0 1px rgba(255,255,255,.07);
    --e3: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.5);
    --e4: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.6);
    --glass: rgba(22,22,24,.72);
  }
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.47 var(--font); letter-spacing: -.01em; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.022em; color: var(--text); font-weight: 700; }
h1 { font-size: clamp(26px, 4vw, 34px); }
h2 { font-size: 21px; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 600; }
a { color: var(--ink); }
.eyebrow { color: var(--text-2); letter-spacing: .04em; font-size: 12px; font-weight: 600; }
.section-h { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
::selection { background: var(--accent-tint-2); }
:focus-visible { outline: 3px solid var(--accent-tint-2); outline-offset: 2px; }

/* Top bar: frosted glass across the full width, above the sidebar */
.topbar {
  background: var(--glass); color: var(--text); height: var(--top); min-height: var(--top); padding: 0 16px; z-index: 70;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--line);
}
.brand-name { color: var(--text); font-size: 16px; font-weight: 600; }
.crest, .lp-dot {
  width: 30px; height: 30px; border-radius: 8px !important; display: grid; place-items: center; font-size: 14px;
  background: var(--fill) !important; color: var(--on-fill) !important;
}
.whoami { color: var(--text-2); font-size: 13px; }
.topbar .btn-ghost, #btnLogout {
  color: var(--ink); background: var(--tint); border: 0; border-radius: 980px; padding: .42rem .95rem;
}
.topbar .btn-ghost:hover, #btnLogout:hover { background: var(--tint-2); border: 0; }
.notif-bell { color: var(--text); background: transparent; border: 0; display: inline-grid; place-items: center; }
.notif-bell svg { width: 22px; height: 22px; }
.notif-panel { background: var(--card); color: var(--text); border: 0; border-radius: var(--r-lg); box-shadow: var(--e4); }

/* Buttons: pills */
.btn-primary {
  background: var(--fill); color: var(--on-fill); border: 0; border-radius: 980px; padding: .58rem 1.15rem; font-weight: 600;
  box-shadow: none; transition: filter .15s ease, transform .1s ease;
}
.btn-primary:hover { background: var(--fill); filter: brightness(1.06); }
.btn-primary:active { transform: scale(.98); }
.btn-primary.danger, .dialog-actions .btn-primary.danger { background: #d70015; color: #fff; }
.btn-ghost, .btn-ghost.full, .btn-ghost.small {
  color: var(--ink); background: var(--tint); border: 0; border-radius: 980px; font-weight: 500;
}
.btn-ghost:hover, .btn-ghost.full:hover, .btn-ghost.small:hover { background: var(--tint-2); border: 0; }
.btn-mini, .btn-sm, .pw-btn { border-radius: 980px; }

/* Surfaces */
.panel, .stat, .student-card, .appt, .report-card, .chart-card, .report-item, .dept-card, .tree-col, .res-card, .form-grid, .rootbar, .row-item, .pw-panel, .block {
  background: var(--card); color: var(--text); border: 0; border-radius: var(--radius); box-shadow: var(--e1);
}
.panel { padding: 20px; }
.stat { padding: 16px 18px; }
.stat:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.stat .n { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.stat .l { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.stat.alert .n { color: var(--warn); }
.table-wrap { border: 0; border-radius: var(--radius); box-shadow: var(--e1); background: var(--card); }
table th { color: var(--text-2); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 13px; background: transparent; }
table td { border-color: var(--line); }

/* Fields */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--fill); box-shadow: 0 0 0 3px var(--accent-tint-2); }

/* Segmented controls */
.subseg, .role-tabs { background: var(--tint); border-radius: 10px; }
.subseg button { color: var(--text-2); }
.subseg button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14); }

/* Dialogs and notices */
.modal, .dialog-overlay { background: rgba(0,0,0,.36); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-card, .dialog-card { background: var(--card); color: var(--text); border: 0; border-radius: var(--r-xl); box-shadow: var(--e4); }
.dialog-card h3 { color: var(--text); }
.dialog-card input, .dialog-card select, .dialog-card textarea { border-color: var(--line-strong); }
.modal-close { color: var(--text-2); }
.toast { background: var(--card); color: var(--text); box-shadow: var(--e4); }
.toast.err { background: #d70015; color: #fff; }
.toastx { background: var(--card); color: var(--text); box-shadow: var(--e4); }
.toastx.is-ok .tx-icon { background: var(--ok); }
.pill { background: #ff3b30; color: #fff; }
.spinner { border-color: var(--tint); border-top-color: var(--text-2); }
#overlay, .overlay { background: rgba(0,0,0,.2); }

/* Chat */
.bubble { background: var(--tint); color: var(--text); }
.bubble.me { background: var(--fill); color: var(--on-fill); }

/* Sidebar: the client injects dark rail styles at run time, so these rules are deliberately more specific. */
html body .page > .hod-tabs, html body .page > .seg {
  top: var(--top) !important; width: var(--side) !important; background: var(--rail) !important; padding: 8px 12px 60px !important;
  border-right: .5px solid var(--line) !important; scrollbar-color: var(--tint-2) transparent;
}
html body .page > .hod-tabs::-webkit-scrollbar-thumb, html body .page > .seg::-webkit-scrollbar-thumb { background: var(--tint-2) !important; background-clip: padding-box !important; }
html body.has-rail #topbar, html body.has-rail .topbar { margin-left: 0 !important; }
html body.has-rail .page { padding-left: calc(var(--side) + clamp(16px, 3vw, 40px)) !important; padding-top: 28px !important; padding-right: clamp(16px, 3vw, 40px) !important; padding-bottom: 64px; }
html body .page > .hod-tabs > .rail-head, html body .page > .seg > .rail-head {
  position: static; color: var(--text); background: transparent !important; border-bottom: 0 !important; margin: 0 !important; padding: 8px 12px 4px !important;
}
.rail-head .rh-dot { display: none; }
html body .page > .hod-tabs > .rail-head .rh-title, html body .page > .seg > .rail-head .rh-title { font-size: 15px !important; font-weight: 600 !important; }
html body .page > .hod-tabs > .rail-head .rh-sub, html body .page > .seg > .rail-head .rh-sub { color: var(--text-2) !important; font-size: 12px !important; }
html body .page > .hod-tabs > .rail-section, html body .page > .seg > .rail-section {
  background: transparent !important; color: var(--text-3) !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .04em !important; padding: 12px 12px 6px !important;
}
html body .page > .hod-tabs > .rail-section:hover, html body .page > .seg > .rail-section:hover { color: var(--text) !important; background: transparent !important; }
html body .page > .hod-tabs > .hod-tab, html body .page > .seg > .seg-btn {
  color: var(--text) !important; border-bottom: 0 !important; border-radius: 10px !important; padding: 9px 12px !important; font-size: 15px !important; gap: 12px;
}
html body .page > .hod-tabs > .hod-tab .nav-ico, html body .page > .seg > .seg-btn .nav-ico { color: var(--text-2); }
html body .page > .hod-tabs > .hod-tab:hover, html body .page > .seg > .seg-btn:hover { background: var(--tint) !important; color: var(--text) !important; }
html body .page > .hod-tabs > .hod-tab.active, html body .page > .seg > .seg-btn.active,
html body .page > .hod-tabs > .hod-tab.pg-dyn.active {
  background: var(--accent-tint) !important; color: var(--ink) !important; box-shadow: none !important; font-weight: 500 !important;
}
html body .page > .hod-tabs > .hod-tab.active .nav-ico, html body .page > .seg > .seg-btn.active .nav-ico { color: var(--ink); }
html body .page > .hod-tabs > .hod-tab.pg-dyn { padding: 7px 12px 7px 44px !important; }
html body .page > .hod-tabs > .hod-tab.pg-dyn::before, html body .page > .hod-tabs > .hod-tab.pg-dyn::after { background: var(--line-strong); }
html body .page > .hod-tabs > .hod-tab.pg-dyn .pgn small { color: var(--text-3); }
html body .page > .hod-tabs > .hod-tab.pg-dyn .pgn b, html body .page > .hod-tabs > .hod-tab.pg-dyn:hover .pgn b { color: var(--text); }
html body .page > .hod-tabs > .hod-tab.pg-dyn.active .pgn b, html body .page > .hod-tabs > .hod-tab.pg-dyn.active .pgn small { color: var(--ink); }
html body .page > .hod-tabs > .hod-tab.pg-dyn.active::after { background: var(--ink); }
html body .page > .hod-tabs > .hod-tab.pg-dyn .pgn-pill { background: #ff3b30; color: #fff; }

/* Phones: the sidebar becomes a frosted bottom tab bar, as in Gusss */
@media (max-width: 760px) {
  html body .page > .hod-tabs, html body .page > .seg {
    position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important;
    height: auto !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; z-index: 65 !important;
    flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--glass) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-right: 0 !important; border-top: .5px solid var(--line) !important; box-shadow: none !important; scrollbar-width: none !important;
  }
  html body .page > .hod-tabs::-webkit-scrollbar, html body .page > .seg::-webkit-scrollbar { display: none; }
  html body .page > .hod-tabs > .rail-head, html body .page > .seg > .rail-head,
  html body .page > .hod-tabs > .rail-section, html body .page > .seg > .rail-section { display: none !important; }
  html body .page > .hod-tabs > .hod-tab, html body .page > .seg > .seg-btn,
  html body .page > .hod-tabs > .hod-tab.sec-hidden, html body .page > .seg > .seg-btn.sec-hidden,
  html body .page > .hod-tabs > .hod-tab.pg-dyn {
    display: flex !important; flex: 0 0 auto !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    width: 76px !important; min-height: 50px; gap: 2px; padding: 4px 2px !important; font-size: 10.5px !important; line-height: 1.15; text-align: center !important;
    white-space: normal;
  }
  html body .page > .hod-tabs > .hod-tab.pg-dyn::before, html body .page > .hod-tabs > .hod-tab.pg-dyn::after { display: none; }
  html body .page > .hod-tabs > .hod-tab.pg-dyn .pgn { align-items: center; }
  html body .page > .hod-tabs > .hod-tab.pg-dyn .pgn b { font-size: 10.5px; max-width: 70px; }
  html body .page > .hod-tabs > .hod-tab.active, html body .page > .seg > .seg-btn.active { background: transparent !important; }
  html body.has-rail #topbar, html body.has-rail .topbar { margin-left: 0 !important; }
  html body.has-rail .page { padding-left: 16px !important; padding-right: 16px !important; padding-top: 16px !important; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  .whoami { display: none; }
}

/* Sign-in page: quiet and neutral, like the Gusss public page */
.landing::before, .landing::after, .lp::before, .rc-title::after { display: none !important; }
.lp, .landing { background: var(--bg) !important; }
.lp-brand, .lp-title { color: var(--text) !important; }
.lp-eyebrow, .lp-sub, .lp-foot { color: var(--text-2) !important; }
.lp-kicker { background: var(--accent-tint) !important; color: var(--ink) !important; font-weight: 600 !important; }
.lp-title { font-weight: 700 !important; letter-spacing: -.03em !important; }
.lp-accent { background: none !important; -webkit-text-fill-color: currentColor; color: var(--ink) !important; }
.rc-ic { background: var(--accent-tint) !important; color: var(--ink) !important; box-shadow: none !important; display: grid; place-items: center; }
.role-card { background: var(--card) !important; color: var(--text) !important; border: 0 !important; border-radius: var(--radius) !important; box-shadow: var(--e1) !important; }
.role-card b { color: var(--text) !important; }
.role-card small { color: var(--text-2) !important; }
.role-card:hover { box-shadow: var(--e3) !important; }

/* Former green banners become plain cards */
.tutor-card, .book-card, .al-hero { background: var(--card) !important; background-image: none !important; color: var(--text) !important; box-shadow: var(--e1) !important; }
.tutor-label, .al-hero-eyebrow, .tutor-card .eyebrow, .book-card .eyebrow { color: var(--text-2) !important; letter-spacing: .04em; }
.tutor-avatar { background: var(--fill) !important; color: var(--on-fill) !important; }
.book-card h3, .al-hero h2, .tutor-card h2, .tutor-card h3, .tutor-name { color: var(--text) !important; }
.book-card .bc-sub, .al-hero-sub, .book-card label { color: var(--text-2) !important; }
.bc-fill { background: var(--fill) !important; }

/* Small fixes found by the contrast sweep */
.notif-badge { background: #ff3b30 !important; color: #fff !important; }
.year-badge { color: var(--ink) !important; }
.al-hero-title { color: var(--text) !important; }
.al-hero .btn-ghost { color: var(--ink) !important; border: 0 !important; }
.toastx.is-err, .toastx.is-error { background: #b3261e; color: #fff; }
.toastx.is-err .tx-msg, .toastx.is-error .tx-msg { color: #fff; }

/* Project pages keep their own colour names, so point them at the theme */
.pw, #pw-drawer {
  --pw-ink: var(--text); --pw-green: var(--ink); --pw-green-2: var(--fill); --pw-gold: var(--fill);
  --pw-teal: var(--blue); --pw-line: var(--line); --pw-muted: var(--text-2); --pw-bg: var(--surface-2); color: var(--text);
}
.btn-mini { color: var(--text); }
.btn-mini.ok, .btn-mini.primary { background: var(--fill); color: var(--on-fill); border-color: transparent; }
.btn-ok { background: #248a3d; color: #fff; }
.btn-no { background: #d70015; color: #fff; }
.page > .seg > .seg-btn > .pill, .page > .hod-tabs > .hod-tab > .pill, span.pill { background: #d70015 !important; color: #fff !important; }
.notif-badge { background: #d70015 !important; }

.pw-btn.primary, .pw-chip.on { background: var(--fill) !important; color: var(--on-fill) !important; border-color: transparent !important; }

/* The base style hides sideways overflow on phones, which stops the top bar sticking; clip keeps it sticky. */
@media (max-width: 760px) { html, body { overflow-x: clip !important; } }
.pw-chip.on b, .pw-chip.on span { color: inherit !important; }

@media (prefers-color-scheme: dark) { :root {--b-1d1d1f:#1d1d1f;--b-808087:#808087;--b-9a5b00:#9a5b00;--b-b3271e:#b3271e;--b-bbbbbf:#bbbbbf;--b-c62828:#c62828;--b-cfcfd2:#323235;--b-e2e2e4:#29292b;--b-e3e7eb:#272729;--b-e3f3f5:#1a393d;--b-e5533d:#e5533d;--b-e6d9bf:#3d311a;--b-e8f0f7:#1a2d3d;--b-e9e9ea:#262628;--b-eeeeef:#232325;--b-eef2f7:#1a293d;--b-efe8fb:#271a3d;--b-f0f0f0:#222225;--b-f0f0f1:#222224;--b-f1f1f1:#222224;--b-f1f3f5:#212123;--b-f2b705:#f2b705;--b-f3e9f5:#371a3d;--b-f3f3f4:#212123;--b-f4f4f5:#202022;--b-f7e6e8:#3d1a1e;--b-f7ecd8:#3d301a;--b-f7f7f7:#1f1f21;--b-f8f8f8:#1f1f20;--b-f8f8f9:#1e1e20;--b-fbe9cc:#3d2f1a;--b-fbf1d8:#3d331a;--b-fbf1de:#3d311a;--b-fbf3e2:#3d321a;--b-fbf6ea:#3d321a;--b-fbfbfd:#1a1a3d;--b-fcfcfd:#1c1c1e;--b-fdeaea:#3d1a1a;--b-fdecea:#3d1e1a;--b-fdecec:#3d1a1a;--b-fdf1dd:#3d301a;--b-fdf3d8:#3d331a;--b-fdf3e2:#3d301a;--b-fef9ef:#3d311a;--b-fff3d6:#3d331a;--b-fff6e5:#3d311a;--b-fffaf0:#3d311a;--b-ffffff:#1b1b1d;--f-0b6b78:#7ce5f3;--f-1d1d1f:#e8e8e9;--f-2b2b2e:#dddddf;--f-2b5788:#93b6dd;--f-343438:#d5d5d8;--f-38383b:#d3d3d5;--f-3a536b:#bfbfc3;--f-414145:#cbcbce;--f-505054:#c0c0c3;--f-5a5a60:#b7b7bb;--f-5b3a9b:#ad97d8;--f-6e6e73:#ababb0;--f-6f6f76:#ababb0;--f-7a3d8a:#c89cd3;--f-7a5a12:#edcc83;--f-8a4b00:#f8bd77;--f-8a5a00:#f8cb77;--f-8a6412:#efcc81;--f-8a6d1a:#e8cf87;--f-8a6d3b:#d4bf9b;--f-9a5b00:#f8c377;--f-9a6a1a:#eac485;--f-9a6b00:#f8d177;--f-a2303c:#de9199;--f-a86b00:#f8c977;--f-a9631b:#ebb884;--f-b3261e:#eb8a85;--f-b3271e:#eb8b85;--f-c0392b:#e5938a;--f-c9d2df:#c9d2df;--f-cfd6e2:#cfd6e2;--f-f2b705:#f8d877;--f-ffd6d1:#ffd6d1;--f-ffffff:#ffffff;--l-0b8a9a:#0b8a9a;--l-7b57c9:#7b57c9;--l-9a5b00:#9a5b00;--l-b3271e:#b3271e;--l-c7c7cb:#38383a;--l-cfcfd2:#38383a;--l-d1d1d4:#38383a;--l-d3d3d5:#38383a;--l-d8d8da:#38383a;--l-d9d9dc:#38383a;--l-dddddf:#38383a;--l-e3e3e4:#38383a;--l-e5e5e7:#38383a;--l-e6b3ae:#38383a;--l-e6d3a8:#38383a;--l-f0b9b4:#38383a;--l-f0f0f0:#38383a;--l-f2b705:#f2b705;--l-f3c86a:#f3c86a;--l-f3c9c6:#38383a;--l-f3deb5:#38383a;--l-f4b4b4:#38383a;--l-ffffff:#38383a;} }