/* CampusReel Snap design system: tokens + shared components (docs/design/IMPLEMENTATION_MAP.md, sections 1-2).
 * Used by the photographer (phone) screens and the admin console. Plain CSS, no build step.
 * Fonts: Plus Jakarta Sans (display) and Inter (UI), both SIL OFL 1.1, vendored in /static/fonts (works offline). */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/static/fonts/jakarta-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/static/fonts/jakarta-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ tokens (light = the design) */
:root {
  color-scheme: light;
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* neutrals ("cream") */
  --ink: #1F1B16;          /* text, primary buttons, active pills, toasts */
  --on-ink: #FFFFFF;       /* text on --ink */
  --ink-2: #4A443C;
  --muted: #6B645A;
  --muted-2: #736B60;      /* the board's #8A8277, darkened to 4.5:1 on --bg and white (small text: tab labels, hints) */
  --muted-3: #A39B8F;      /* decoration only (grips, dividers); never text */
  --muted-lg: #968E82;     /* large secondary numbers (the ring's "/30"): 3:1 on white */
  --line-2: #C9C1B3;
  --disabled: #D9D3C9;
  --line: #E7E2DA;
  --track: #EFEAE2;
  --line-soft: #F0ECE5;
  --card-line: #EAE5DD;
  --bg: #F4F1EC;
  --surface-2: #F8F6F2;
  --surface: #FFFFFF;
  --overlay: rgba(31, 27, 22, .42);
  --skeleton: #E7E2DA;

  /* indigo: links, focus, selection only */
  --accent: #4F46E5;
  --accent-soft: #EDE8FF;
  --accent-soft-fg: #45348F;

  /* brand / celebration */
  --mustard: #F5B82E;
  --butter: #FFD966;
  --violet: #7B68D9;
  --violet-strong: #6B57CF; /* behind white text (the magic screen's current step): 5.4:1 */
  --violet-2: #B9A7FF;
  --mint-dot: #9EDDB4;
  --coral: #E8796B;
  --peach-line: #F2A27A;
  --green-line: #7CC79A;
  --pastel-ink: #1F1B16;   /* text on pastel cards: stays dark in every theme */

  /* status / role pastels: bg, fg, strong ink */
  --notshot-bg: #E7E2DA; --notshot-fg: #4A443C;
  --shot-bg: #CDEFD9;    --shot-fg: #1D5E38;    --shot-ink: #0F3A21;
  --reshoot-bg: #FFD9C2; --reshoot-fg: #8A3B12; --reshoot-ink: #4A1D05; --reshoot-title: #5E2608;
  --proc-bg: #E3DBFF;    --proc-fg: #45348F;    --proc-ink: #1C1240;    --proc-title: #2C1F66;
  --ready-bg: #FFE08A;   --ready-fg: #5C4300;   --ready-ink: #3D2C00;
  --err-bg: #FFC9C2;     --err-fg: #962A1E;     --err-btn-fg: #7A1F15;  --err-ink: #4A0E07; --err-title: #5E140B;
  --sage-bg: #D7E4C4;    --sage-fg: #3D5226;    --sage-ink: #22320F;
  --err-row: #FFF1EE;
  --pending-row: #FFF7E0; --pending-dash: #C9A23A;

  /* shape */
  --r-pill: 999px; --r-xl: 32px; --r-lg: 28px; --r-md: 24px; --r-row: 20px; --r-input: 18px; --r-tile: 16px;
  --shadow-phone: 0 10px 30px rgba(31, 27, 22, .12);
  --shadow-dialog: 0 30px 80px rgba(31, 27, 22, .25);
  --shadow-toast: 0 10px 30px rgba(31, 27, 22, .25);
  --shadow-tabbar: 0 -4px 20px rgba(60, 40, 20, .05);
  --gutter: 20px;
}

/* Dark: the design is light only; this is a warm dark variant built from the same token names. Pastel status cards
 * keep their light pastel with dark text (they read as "stickers"); the full-screen QR stays pure white. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #F4F1EC; --on-ink: #1F1B16; --ink-2: #D9D3C9; --muted: #B3AA9D; --muted-2: #9C9386; --muted-3: #847B6F; --muted-lg: #8E8579;
    --line-2: #5A5248; --disabled: #3A352E; --line: #3A352E; --track: #3A352E; --line-soft: #302B25; --card-line: #3A352E;
    --bg: #17140F; --surface-2: #2A251F; --surface: #221E19; --overlay: rgba(0, 0, 0, .6); --skeleton: #2E2923;
    --accent: #8C86FF; --accent-soft: #2E2A55; --accent-soft-fg: #D8D2FF;
    --err-row: #3A2420; --pending-row: #352C17;
    --shadow-tabbar: 0 -4px 20px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F4F1EC; --on-ink: #1F1B16; --ink-2: #D9D3C9; --muted: #B3AA9D; --muted-2: #9C9386; --muted-3: #847B6F; --muted-lg: #8E8579;
  --line-2: #5A5248; --disabled: #3A352E; --line: #3A352E; --track: #3A352E; --line-soft: #302B25; --card-line: #3A352E;
  --bg: #17140F; --surface-2: #2A251F; --surface: #221E19; --overlay: rgba(0, 0, 0, .6); --skeleton: #2E2923;
  --accent: #8C86FF; --accent-soft: #2E2A55; --accent-soft-fg: #D8D2FF;
  --err-row: #3A2420; --pending-row: #352C17;
  --shadow-tabbar: 0 -4px 20px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
*:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* headings and the main area take focus from the router (screen change): no ring on those */
h1[tabindex="-1"]:focus, .ph-title .t[tabindex="-1"]:focus, .ph-title-left[tabindex="-1"]:focus, #view:focus { outline: none; }
/* a field drawn inside a pill (Drive link, search): the ring goes on the pill */
.drive-input:focus-within, .search:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

/* disclosure (<details>): a rounded row with a chevron instead of the browser's triangle; the whole row toggles */
details.disclosure > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after {
  content: ""; width: 8px; height: 8px; margin: 0 4px 3px auto; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; opacity: .7;
}
details.disclosure[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.display { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.t-ink2 { color: var(--ink-2); }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px;
  border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font: 600 15px var(--font-ui);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.btn:hover { text-decoration: none; }
.btn.xl { height: 60px; font-size: 17px; }                 /* phone primary */
.btn.lg { height: 56px; font-size: 16px; }
.btn.md { height: 48px; padding: 0 22px; }
.btn.sm { height: 42px; padding: 0 16px; font-size: 13px; }
.btn.xs { height: 40px; padding: 0 16px; font-size: 13px; }
.btn.xxs { height: 36px; padding: 0 12px; font-size: 13px; }
.btn.block { display: flex; width: 100%; }
.btn.secondary { background: var(--surface); color: var(--ink); }      /* white on cream */
.btn.cream { background: var(--bg); color: var(--ink); }               /* cream on white */
.btn.celebrate { background: var(--mustard); color: var(--pastel-ink); font-weight: 700; }
.btn.danger { background: var(--err-bg); color: var(--err-btn-fg); }
.btn.lavender { background: var(--proc-bg); color: var(--proc-fg); }
.btn.mint { background: var(--shot-bg); color: var(--shot-fg); }
.btn.grey { background: var(--notshot-bg); color: var(--notshot-fg); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--disabled); color: var(--muted); }
.link-btn { border: 0; background: none; padding: 8px; font: 500 13px var(--font-ui); color: var(--accent); }
.link-btn.muted { color: var(--muted); }
.back-link { border: 0; background: none; color: var(--accent); font: 600 14px var(--font-ui); padding: 8px 0; }

.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
}
.icon-btn.lg { width: 56px; height: 56px; }
.icon-btn.cream { background: var(--bg); width: 44px; height: 44px; font: 600 18px var(--font-ui); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.lg svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ chips, pills */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill);
  font: 600 12px var(--font-ui); white-space: nowrap; background: var(--notshot-bg); color: var(--notshot-fg);
  justify-self: start; align-self: center;
}
.chip.md { padding: 6px 12px; }
.chip.lg { padding: 7px 14px; font-size: 13px; }
.chip.c13 { padding: 7px 12px; font-size: 13px; }
.chip.white { background: #fff; }
.chip.notshot, .chip.planning, .chip.queued { background: var(--notshot-bg); color: var(--notshot-fg); }
.chip.shot, .chip.shooting, .chip.ok, .chip.photographer, .chip.active { background: var(--shot-bg); color: var(--shot-fg); }
.chip.reshoot, .chip.photos_received, .chip.waiting { background: var(--reshoot-bg); color: var(--reshoot-fg); }
.chip.processing, .chip.superadmin, .chip.proc { background: var(--proc-bg); color: var(--proc-fg); }
.chip.ready_for_import, .chip.admin, .chip.ready { background: var(--ready-bg); color: var(--ready-fg); }
.chip.error, .chip.err, .chip.failed, .chip.revoked { background: var(--err-bg); color: var(--err-fg); }
.chip.imported, .chip.sage, .chip.accepted { background: var(--sage-bg); color: var(--sage-fg); }
.chip.tag { background: var(--bg); color: var(--ink-2); font-weight: 500; padding: 3px 9px; }

.pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-tab {
  height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 0; background: var(--surface); color: var(--ink);
  font: 600 14px var(--font-ui); display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
}
.pill-tab:hover { text-decoration: none; }
.pill-tab .n { opacity: .7; margin-left: 4px; }
.pill-tab[aria-selected="true"], .pill-tab.on { background: var(--ink); color: var(--on-ink); }

/* segmented control */
.seg { display: flex; gap: 4px; padding: 5px; background: var(--surface); border-radius: var(--r-pill); }
.seg button {
  flex: 1; height: 48px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
  font: 600 15px var(--font-ui); transition: background .2s;
}
.seg button[aria-checked="true"] { background: var(--ink); color: var(--on-ink); }
.seg .notshot[aria-checked="true"] { background: var(--notshot-bg); color: var(--notshot-fg); }
.seg .shot[aria-checked="true"] { background: var(--shot-bg); color: var(--shot-fg); }
.seg .reshoot[aria-checked="true"] { background: var(--reshoot-bg); color: var(--reshoot-fg); }
.seg.cream { background: var(--bg); padding: 4px; }
.seg.cream button { height: 40px; font-size: 13px; color: var(--ink-2); }
.seg.cream button[aria-checked="true"] { color: var(--on-ink); }

/* note chips (toggle) */
.note-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.note-chip {
  height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid var(--surface); background: var(--surface);
  color: var(--ink); font: 600 14px var(--font-ui);
}
.note-chip[aria-pressed="true"] { background: var(--ready-bg); color: var(--ready-fg); border-color: var(--mustard); }

/* ------------------------------------------------------------------ inputs, notices */
.label { display: block; font: 600 13px var(--font-ui); color: var(--muted); }
.input {
  width: 100%; height: 52px; border-radius: var(--r-input); border: 2px solid transparent; background: var(--surface);
  padding: 0 16px; font: 400 15px var(--font-ui); color: var(--ink); outline: none;
}
.input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.input.fill { background-color: var(--surface-2); border-color: var(--surface-2); }   /* -color: keeps a select's chevron */
.input.cream { background-color: var(--bg); border-color: var(--bg); }
.input.valid { border-color: var(--green-line); }
.input.invalid { border-color: var(--coral); }
.input.checking { border-color: var(--violet-2); }
.input.notshared { border-color: var(--peach-line); }
textarea.input { height: 86px; padding: 14px 16px; resize: vertical; font-size: 14px; line-height: 1.45; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field-err { font-size: 13px; color: var(--err-fg); margin-top: 6px; }

.notice {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-input);
  font: 500 13px/1.45 var(--font-ui); background: var(--surface); color: var(--muted);
}
.notice > span { flex: 1; }
.notice.idle { background: var(--surface); color: var(--muted); }
.notice.cream { background: var(--bg); color: var(--ink-2); }
.notice.invalid, .notice.error { background: var(--err-bg); color: var(--err-btn-fg); }
.notice.checking { background: var(--proc-bg); color: var(--proc-fg); }
.notice.notshared, .notice.warn { background: var(--reshoot-bg); color: var(--reshoot-fg); }
.notice.ok { background: var(--shot-bg); color: var(--shot-fg); }
.notice.ready { background: var(--ready-bg); color: var(--ready-fg); }
.notice .btn { height: 36px; padding: 0 12px; font-size: 13px; background: var(--surface); color: var(--reshoot-fg); }

/* ------------------------------------------------------------------ cards, tiles */
.card { background: var(--surface); border-radius: var(--r-lg); }
.card.xl { border-radius: var(--r-xl); }
.card.md { border-radius: var(--r-md); }
.h2 { font: 700 19px var(--font-display); }
.h-empty { font: 800 22px var(--font-display); letter-spacing: -0.02em; }
.sec-label { font: 600 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.skel { background: var(--skeleton); }

/* avatars + college badges */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0;
  font: 700 13px var(--font-display); width: 40px; height: 40px; overflow: hidden;
}
.avatar img, .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  color: #fff; font: 800 14px var(--font-display); width: 44px; height: 44px; background: #2F4A7A;
}
.logo.has-img { background: #fff; }

/* ------------------------------------------------------------------ toast, offline pill */
.offline-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-ink); font: 600 13px var(--font-ui); border: 0; white-space: nowrap;
}
.offline-pill { position: relative; }
.offline-pill::after { content: ""; position: absolute; inset: -7px -2px; }   /* 44 px tap target, same 31 px pill */
.offline-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mustard); }
.offline-pill.sm { font-size: 12px; }
.toast {
  position: fixed; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: #1F1B16; color: #fff; font: 500 14px/1.35 var(--font-ui); box-shadow: var(--shadow-toast);
  border-radius: 20px; left: 20px; right: 20px; bottom: calc(110px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto;
}
.toast i { width: 10px; height: 10px; border-radius: 50%; background: var(--mint-dot); flex-shrink: 0; }
.toast.wait i { background: var(--mustard); }
.toast.bad i { background: var(--coral); }
.console-mode .toast { left: 50%; right: auto; transform: translateX(-50%); bottom: 28px; border-radius: var(--r-pill); padding: 14px 20px; width: max-content; max-width: calc(100vw - 40px); }

/* ------------------------------------------------------------------ dialogs / bottom sheets */
dialog.dlg {
  border: 0; padding: 28px; border-radius: var(--r-xl); background: var(--surface); color: var(--ink);
  width: calc(100% - 40px); max-width: 620px; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--shadow-dialog);
}
dialog.dlg.wide { max-width: 860px; }
dialog.dlg::backdrop { background: var(--overlay); }
dialog.dlg h2 { font: 800 26px var(--font-display); letter-spacing: -0.02em; }
dialog.dlg .sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
dialog.dlg .body { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.dlg-foot .btn { height: 50px; padding: 0 22px; }
@media (max-width: 640px) {
  dialog.dlg.sheet-on-phone {
    margin: auto 0 0; width: 100%; max-width: none; border-radius: 28px 28px 0 0; padding: 14px 24px calc(28px + env(safe-area-inset-bottom));
    max-height: 92vh;
  }
  dialog.dlg.sheet-on-phone::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 18px; }
  dialog.dlg h2 { font-size: 24px; }
  .dlg-foot .btn { flex: 1; height: 54px; }
}
.dlg-label { display: block; font: 600 13px var(--font-ui); color: var(--muted); margin: 20px 0 8px; }