/*
 * CenterFlow, "Harbor Editorial" design system
 * Shared across www, check-in, roster and classnavi-api.
 *
 * Palette lineage: ClassNavi / Kumon blues (navy #013257, #02497e, cyan
 * #00a9e0) on cool paper. Blue is reserved for actions, links and brand
 * marks; the canvas and text stay neutral so the product doesn't drown
 * in it. No greens, no golds, no browns anywhere.
 *
 * This file is linked LAST in every page so its :root token values win over
 * each app's legacy palette. The apps are already ~90% var()-driven, so
 * redefining the tokens here reskins the entire product. Base typography and
 * form primitives below are element-level (low specificity) so app component
 * classes keep their layout and only inherit the new look.
 *
 * Font strategy: a curated *system* serif stack for display type (Iowan /
 * Palatino / Georgia), CSP-safe, zero network, no FOUT. Swap for a self-hosted
 * face (e.g. Fraunces) later if desired; only --font-display changes.
 */

:root {
  /* ---- Type ---- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* ---- Harbor editorial palette (light) ---- */
  --paper:        #f6f7f9;  /* canvas */
  --paper-2:      #eef1f5;  /* sunken wells, striped rows */
  --surface:      #ffffff;  /* raised cards */
  --surface-2:    #f9fafc;  /* secondary panels */
  --ink:          #1a2433;  /* primary text / headings */
  --ink-soft:     #3c4a5e;
  --taupe:        #5e6b7e;  /* muted text (slate; legacy name kept) */
  --line:         #e2e6ec;  /* hairline borders */
  --line-strong:  #ccd5df;

  --accent:       #02497e;  /* harbor blue (ClassNavi navy) */
  --accent-hover: #023e6b;
  --accent-soft:  #e4eef7;  /* tinted accent surface */
  --accent-2:     #013257;  /* deep navy, gradient partner */
  --gold:         #0c76a6;  /* sky highlight (legacy name kept) */

  /* Always-dark band (footers, dark headers, kiosk). Stays dark in BOTH
     themes so light text on it never inverts. Use --band-ink for text. */
  --band:      #101c2c;
  --band-ink:  #e8eef6;
  --band-muted: #92a3ba;

  /* Text that sits ON an accent fill. Never hardcode #fff: the dark theme's
     accent is a LIGHT sky blue, where white text has too little contrast. */
  --on-accent: #ffffff;

  /* Semantic status (cool-tuned; status colors stay semantic, not themed) */
  --ok:      #1f7a4d;  --ok-bg:   #e3f1e9;
  --warn:    #96690f;  --warn-bg: #f7efd9;
  --err:     #b3362f;  --err-bg:  #f9e4e1;

  /* ---- Legacy token aliases (what the apps actually reference) ---- */
  --navy:  var(--ink);        /* headings / brand ink */
  --blue:  var(--accent);     /* links, primary actions, focus */
  --blue-light: #2874b3;
  --teal:  var(--accent-2);   /* gradient partner, accents */
  --bg:    var(--paper);
  --card:  var(--surface);
  --text:  var(--ink);
  --muted: var(--taupe);
  --border: var(--line);

  /* ---- Form / shape / depth ---- */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 28, 44, 0.05), 0 1px 1px rgba(16, 28, 44, 0.04);
  --shadow: 0 1px 2px rgba(16, 28, 44, 0.05), 0 14px 34px -18px rgba(16, 28, 44, 0.22);
  --shadow-lg: 0 2px 4px rgba(16, 28, 44, 0.06), 0 30px 60px -24px rgba(16, 28, 44, 0.30);
  --ring: 0 0 0 3px rgba(2, 73, 126, 0.26);

  color-scheme: light;
}

/* ---- Dark: "midnight harbor" (navy-tinted, not cold black) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0f141c;
    --paper-2:      #131a24;
    --surface:      #171f2b;
    --surface-2:    #1e2734;
    --ink:          #e8edf5;
    --ink-soft:     #c2ccda;
    --taupe:        #8b99ad;
    --line:         #262f3d;
    --line-strong:  #3a4759;

    --accent:       #7db8e8;
    --accent-hover: #97c8f2;
    --accent-soft:  #16273a;
    --accent-2:     #5aa0d6;
    --gold:         #54c0ee;

    /* Dark text on the light accent: white here fails contrast. */
    --on-accent:    #0a1826;

    --ok:      #7ec898;  --ok-bg:   #15281d;
    --warn:    #d9a24a;  --warn-bg: #2a2413;
    --err:     #e58a78;  --err-bg:  #2e1c19;

    --blue-light: #97c8f2;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -18px rgba(0, 0, 0, 0.66);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.50), 0 34px 70px -26px rgba(0, 0, 0, 0.72);
    --ring: 0 0 0 3px rgba(125, 184, 232, 0.32);

    color-scheme: dark;
  }
}

/* Explicit manual override always wins over the media query above. */
:root[data-theme="dark"] {
  --paper:        #0f141c;
  --paper-2:      #131a24;
  --surface:      #171f2b;
  --surface-2:    #1e2734;
  --ink:          #e8edf5;
  --ink-soft:     #c2ccda;
  --taupe:        #8b99ad;
  --line:         #262f3d;
  --line-strong:  #3a4759;

  --accent:       #7db8e8;
  --accent-hover: #97c8f2;
  --accent-soft:  #16273a;
  --accent-2:     #5aa0d6;
  --gold:         #54c0ee;

  /* Dark text on the light accent: white here fails contrast. */
  --on-accent:    #0a1826;

  --ok:      #7ec898;  --ok-bg:   #15281d;
  --warn:    #d9a24a;  --warn-bg: #2a2413;
  --err:     #e58a78;  --err-bg:  #2e1c19;

  --blue-light: #97c8f2;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -18px rgba(0, 0, 0, 0.66);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.50), 0 34px 70px -26px rgba(0, 0, 0, 0.72);
  --ring: 0 0 0 3px rgba(125, 184, 232, 0.32);

  color-scheme: dark;
}

/* ============================================================= *
 *  Base typography & elements (low specificity, additive)
 * ============================================================= */

/* [hidden] must beat any component class that sets `display`. Without this,
   el.hidden = true silently does nothing on anything styled display:flex,
   which is how the Admin link showed up for non-admins. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Editorial serif display for headings. Serif reads best a touch lighter. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1 { letter-spacing: -0.012em; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

hr { border: none; border-top: 1px solid var(--line); margin: 1.75rem 0; }

::selection { background: var(--accent-soft); color: var(--ink); }

code, pre, kbd, samp { font-family: var(--font-mono); }

/* Consistent, on-brand focus ring across the whole product. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ---- Form controls: gentle baseline, app classes still win ---- */
input:where([type="text"], [type="email"], [type="password"], [type="search"],
  [type="tel"], [type="number"], [type="url"], [type="date"], [type="time"]),
select, textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
input:where([type="text"], [type="email"], [type="password"], [type="search"],
  [type="tel"], [type="number"], [type="url"], [type="date"], [type="time"]):focus,
select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
}
::placeholder { color: color-mix(in srgb, var(--taupe) 80%, transparent); }

/* Refined, unobtrusive warm scrollbars */
* { scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--taupe); }

/* ============================================================= *
 *  Theme toggle control (used in app headers)
 * ============================================================= */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-appearance: none;
  appearance: none;
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--accent); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle--float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 44px;
  height: 44px;
  box-shadow: var(--shadow);
}
.theme-toggle--float:hover { box-shadow: var(--shadow-lg); }
@media print { .theme-toggle--float { display: none; } }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================= *
 *  Feedback tab (packages/shared/browser/feedback-widget.js)
 *
 *  A handle on the RIGHT EDGE, low on the page. Deliberately not the
 *  bottom-right corner: the floating theme toggle already lives there
 *  (z-index 900), so the tab sits above it and the panel opens inward.
 * ============================================================= */
/* Not every host page has a global border-box reset (roster's setup.html
   loads only this file), and content-box makes the panel's 100%-width
   fields overflow its rounded edge. */
.cf-fb-tab, .cf-fb-panel, .cf-fb-panel * { box-sizing: border-box; }

.cf-fb-tab {
  position: fixed;
  right: 0;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 940;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 10px 12px;
  border: 0;
  /* Fixed gradient, not var(--accent): the dark theme's accent is a light sky
     blue and white glyphs on it fail contrast. See the --on-accent note above. */
  background: linear-gradient(180deg, #0d6cb2, #02497e);
  color: #ffffff;
  font: 600 13.5px/1 var(--font-sans);
  letter-spacing: 0.01em;
  border-radius: 12px 0 0 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: padding-right 0.16s ease, box-shadow 0.16s ease;
}
.cf-fb-tab:hover { padding-right: 18px; box-shadow: var(--shadow-lg); }
.cf-fb-tab:active { transform: translateY(1px); }
.cf-fb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cf-fb-tab svg { width: 16px; height: 16px; display: block; }

.cf-fb-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  /* Clear of the tab (96px + its 36px height + a gap) so the handle stays
     visible and clickable while the panel is open. */
  bottom: calc(142px + env(safe-area-inset-bottom));
  z-index: 941;
  width: min(370px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 190px));
  overflow-y: auto;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.cf-fb-panel.is-open { animation: cf-fb-rise 0.16s ease-out; }
@keyframes cf-fb-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.cf-fb-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cf-fb-head h2 {
  margin: 0;
  font: 600 19px/1.25 var(--font-display);
  color: var(--ink);
}
.cf-fb-head p { margin: 4px 0 0; font-size: 13px; color: var(--taupe); }
/* Scoped to the header: the success screen's Close button also carries
   .cf-fb-close (for the close wiring) but must style as a .cf-fb-send pill —
   unscoped, the 30px icon-button sizing squeezed it until the label spilled. */
.cf-fb-head .cf-fb-close {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--taupe);
  cursor: pointer;
}
.cf-fb-head .cf-fb-close:hover { color: var(--ink); border-color: var(--line-strong); }
.cf-fb-head .cf-fb-close svg { width: 15px; height: 15px; }

.cf-fb-kinds { display: flex; gap: 6px; margin-bottom: 14px; }
.cf-fb-kind { flex: 1; }
.cf-fb-kind input { position: absolute; opacity: 0; pointer-events: none; }
.cf-fb-kind span {
  display: block;
  padding: 8px 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cf-fb-kind input:checked + span {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.cf-fb-kind input:focus-visible + span { box-shadow: var(--ring); }

.cf-fb-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.cf-fb-label span { font-weight: 400; color: var(--taupe); }
.cf-fb-panel textarea,
.cf-fb-panel input[type="email"] {
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  font: 400 14px/1.45 var(--font-sans);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.cf-fb-panel textarea:focus,
.cf-fb-panel input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.cf-fb-alert {
  margin: 0 0 12px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--err);
  background: var(--err-bg);
  border-radius: var(--radius-sm);
}
.cf-fb-actions { display: flex; align-items: center; gap: 12px; }
.cf-fb-meta { font-size: 12px; color: var(--taupe); }
.cf-fb-send {
  margin-left: auto;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #0d6cb2, #02497e);
  color: #ffffff;
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
}
.cf-fb-send:hover { filter: brightness(1.06); }
.cf-fb-send:disabled { opacity: 0.6; cursor: default; }

.cf-fb-done { text-align: center; padding: 12px 4px 4px; }
.cf-fb-done h2 { margin: 14px 0 4px; font: 600 19px/1.3 var(--font-display); }
.cf-fb-done p { margin: 0 0 18px; font-size: 13.5px; color: var(--taupe); }
.cf-fb-done .cf-fb-send { margin: 0 auto; }
.cf-fb-check {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
}
.cf-fb-check svg { width: 24px; height: 24px; }

/* Kiosk and lobby screens face students and parents, and the printing modes
   are mid-print. Neither wants a feedback handle floating over them. */
body:has(.kiosk-shell) .cf-fb-tab,
body:has(.kiosk-shell) .cf-fb-panel,
body.printing-single-qr .cf-fb-tab,
body.printing-avery .cf-fb-tab { display: none; }
@media print { .cf-fb-tab, .cf-fb-panel { display: none; } }

/* Narrow screens: the tab shrinks to its icon and the panel becomes a sheet
   pinned to the bottom, clear of the tab itself. */
@media (max-width: 560px) {
  .cf-fb-tab { padding: 11px 11px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .cf-fb-tab span { display: none; }
  .cf-fb-tab:hover { padding-right: 11px; }
  .cf-fb-panel {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: calc(132px + env(safe-area-inset-bottom));
    max-height: calc(100vh - 170px);
  }
}