/* Base: design tokens, reset, typography, layout, header, forms, buttons.
   Every colour, type size, weight, space, radius and shadow in the stylesheets comes from the
   tokens below; dark mode only swaps the colour (and shadow) tokens. Text pairs meet WCAG AA
   (4.5:1) in both schemes; control borders and the focus ring meet 3:1. */
:root {
  color-scheme: light dark;

  /* ---- colour roles ---- */
  --bg: #f6f5fa;
  --surface: #ffffff;
  --surface-2: #f0eef7;          /* sunken / hover / neutral badge */
  --text: #1d1b26;
  --muted: #595569;
  --border: #dcd8e6;             /* dividers and card edges */
  --control-border: #8a849c;     /* form-control edges (3:1 against the surface) */
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --on-accent: #ffffff;
  --accent-text: var(--on-accent);
  --accent-soft: #ede9fe;
  --focus: #2563eb;
  --backdrop: rgb(10 5 25 / 50%);

  --success: #166534;
  --success-bg: #dcfce7;
  --success-border: #16a34a;
  --on-success: #ffffff;
  --warning: #92400e;
  --warning-bg: #fef3c7;
  --warning-border: #d97706;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --danger-border: #dc2626;
  --on-danger: #ffffff;
  --info: #1e40af;
  --info-bg: #dbeafe;
  --info-border: #3b82f6;

  /* decisions */
  --approved-fg: var(--success);
  --approved-bg: var(--success-bg);
  --rejected-fg: var(--danger);
  --rejected-bg: var(--danger-bg);
  --pending-fg: var(--warning);
  --pending-bg: var(--warning-bg);
  --pending-border: var(--warning-border);
  --excluded-fg: var(--muted);
  --excluded-bg: var(--surface-2);

  /* calendar item kinds */
  --event-bg: #ede9fe;
  --event-fg: #3b1a7a;
  --event-border: #8b5cf6;
  --onsale-bg: #fef3c7;
  --onsale-fg: #713f12;
  --onsale-border: #d97706;
  --presale-bg: #ccfbf1;
  --presale-fg: #134e4a;
  --presale-border: #0d9488;
  --tracked: #b45309;

  --heat-1: #ede9fe;
  --heat-2: #c4b5fd;
  --heat-3: #7c3aed;
  --heat-3-fg: #ffffff;
  --heat-4: #5b21b6;
  --heat-4-fg: #ffffff;

  /* ---- type: 6 sizes, 4 weights ---- */
  --fs-xs: .75rem;     /* 12px: badges, captions, table heads */
  --fs-sm: .875rem;    /* 14px: secondary text, small buttons, meta */
  --fs-md: 1rem;       /* 16px: body */
  --fs-lg: 1.125rem;   /* 18px: card and section headings */
  --fs-xl: 1.375rem;   /* 22px: page title on phones */
  --fs-2xl: 1.625rem;  /* 26px: page title */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* ---- spacing (4px grid) ---- */
  --sp-0: .125rem;  /* 2px */
  --sp-1: .25rem;   /* 4px */
  --sp-2: .5rem;    /* 8px */
  --sp-3: .75rem;   /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.5rem;   /* 24px */
  --sp-6: 2rem;     /* 32px */
  --sp-8: 4rem;     /* 64px */

  /* ---- radii and shadows ---- */
  --radius-sm: 4px;    /* calendar chips, kbd, small marks */
  --radius-md: 8px;    /* buttons, inputs, inner boxes */
  --radius-lg: 12px;   /* cards, dialogs, sheets */
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(20 10 40 / 6%), 0 2px 8px rgb(20 10 40 / 5%);
  --shadow-lg: 0 8px 32px rgb(15 10 35 / 20%), 0 1px 3px rgb(15 10 35 / 10%);

  /* ---- controls ---- */
  --control-h: 2.75rem;    /* buttons and inputs (44px) */
  --touch-target: 2.75rem; /* 44px on coarse pointers */
  --focus-ring: 3px solid var(--focus);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --maxw: 1200px;
  --nav-bar-h: 3.5rem;

  /* App shell sizes. Sticky bars under the header use top: var(--header-h); fixed bottom
     UI sits above var(--bottom-nav-h). The header has exactly this height (see .app-header). */
  --header-top-h: 3.25rem;
  --header-nav-h: 2.75rem;
  --header-h: calc(var(--header-top-h) + var(--header-nav-h) + 1px + env(safe-area-inset-top, 0px));
  --bottom-nav-h: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121119;
    --surface: #1b1925;
    --surface-2: #252232;
    --text: #ece9f5;
    --muted: #aaa5bf;
    --border: #363247;
    --control-border: #6f6888;
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --on-accent: #160b2e;
    --accent-soft: #2c2445;
    --focus: #93c5fd;
    --backdrop: rgb(0 0 0 / 60%);

    --success: #86efac;
    --success-bg: #14321f;
    --success-border: #22c55e;
    --on-success: #0b2414;
    --warning: #fcd34d;
    --warning-bg: #3a2a08;
    --warning-border: #f59e0b;
    --danger: #fca5a5;
    --danger-bg: #3b1515;
    --danger-border: #f87171;
    --on-danger: #2a0a0a;
    --info: #93c5fd;
    --info-bg: #172554;
    --info-border: #60a5fa;

    --event-bg: #2c2445;
    --event-fg: #ddd6fe;
    --event-border: #a78bfa;
    --onsale-bg: #3a2a08;
    --onsale-fg: #fde68a;
    --onsale-border: #f59e0b;
    --presale-bg: #0d3330;
    --presale-fg: #99f6e4;
    --presale-border: #2dd4bf;
    --tracked: #fbbf24;

    --heat-1: #2c2445;
    --heat-2: #4c3a85;
    --heat-3: #6d4fc4;
    --heat-3-fg: #ffffff;
    --heat-4: #b9a2ff;
    --heat-4-fg: #160b2e;
    --shadow-sm: none;
    --shadow-lg: 0 8px 32px rgb(0 0 0 / 55%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Keyboard focus and in-page jumps land clear of the sticky header and the phone bottom bar. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-2));
  scroll-padding-bottom: calc(var(--bottom-nav-h) + var(--sp-2));
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-md)/var(--lh-base) var(--font);
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--sp-2); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd { font-family: var(--mono); font-size: .9em; }
kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 0 .35em; background: var(--surface-2); }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: .5rem; top: -3rem; z-index: 100; background: var(--surface); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); }
.skip-link:focus { top: .5rem; }

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.error { color: var(--danger); }
.lede { color: var(--muted); max-width: 70ch; }
.noscript { padding: var(--sp-6); text-align: center; }

/* ---------- header ---------- */
/* Fixed height (no wrapping) so var(--header-h) is exact for the sticky bars below it. */
.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h); overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
.header-top {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: var(--maxw); height: var(--header-top-h); margin: 0 auto; padding: 0 var(--sp-4);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; font-size: var(--fs-lg); white-space: nowrap; }
.status-line { margin: 0; color: var(--muted); font-size: var(--fs-sm); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; gap: var(--sp-2); margin-left: auto; }
.main-nav { max-width: var(--maxw); height: var(--header-nav-h); margin: 0 auto; padding: 0 var(--sp-2); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.main-nav ul { display: flex; gap: var(--sp-0); list-style: none; margin: 0; padding: 0; height: 100%; }
.main-nav a {
  display: flex; align-items: center; gap: var(--sp-1); white-space: nowrap; height: 100%;
  padding: 0 var(--sp-3); color: var(--muted); text-decoration: none; font-weight: var(--fw-medium);
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.nav-badge {
  background: var(--accent); color: var(--on-accent); border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: var(--sp-0) var(--sp-2); min-width: 1.4rem; text-align: center;
}
.nav-badge-warn { background: var(--danger); color: var(--on-danger); }

.app-main { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8); outline: none; }
.page-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.page-head h1 { margin: 0; flex: 1; outline: none; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.crumbs { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* ---------- forms ---------- */
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=search], input[type=url], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-2);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  min-height: var(--control-h);
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.input-narrow { width: 5.5rem !important; display: inline-block; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); min-width: 0; }
.field label { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.hint { color: var(--muted); font-size: var(--fs-sm); }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; margin: var(--sp-1) 0; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.channel-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4) var(--sp-2); margin: 0 0 var(--sp-4); min-width: 0; }
legend { font-weight: var(--fw-semibold); padding: 0 var(--sp-1); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--sp-4); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--sp-4); align-items: end; margin-top: var(--sp-3); }
.field-submit { justify-content: flex-end; }
.stack > * + * { margin-top: var(--sp-1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: var(--control-h); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-small { min-height: var(--control-h); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: var(--accent-soft); border-color: transparent; color: var(--text); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger); filter: brightness(1.12); }
.btn-danger-text { color: var(--danger); }
.btn-approve { background: var(--success); border-color: var(--success); color: var(--on-success); }
.btn-approve:hover { background: var(--success); filter: brightness(1.1); }
.btn-reject { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-reject:hover { background: var(--danger-bg); }
.btn-approve-soft { background: var(--success-bg); border-color: transparent; color: var(--success); font-size: var(--fs-sm); white-space: normal; text-align: left; }
.btn-reject-soft { background: var(--danger-bg); border-color: transparent; color: var(--danger); font-size: var(--fs-sm); white-space: normal; text-align: left; }
.btn-tracked { background: var(--onsale-bg); border-color: var(--onsale-border); color: var(--onsale-fg); }
.btn-tracked:hover { background: var(--onsale-bg); filter: brightness(1.05); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-target); min-height: var(--touch-target); background: none; border: 0; line-height: 1; padding: var(--sp-1); cursor: pointer; color: var(--muted); border-radius: var(--radius-md); }
.icon-btn:hover { color: var(--text); background: var(--surface-2); }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.seg-btn { border: 0; background: transparent; padding: var(--sp-2) var(--sp-3); cursor: pointer; font-weight: var(--fw-medium); min-height: var(--touch-target); }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); }
.login-card { width: min(24rem, 100%); }
.login-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.login-brand h1 { margin: 0; }

/* ---------- phone bottom bar + More sheet (shown at ≤ 700px only) ---------- */
.bottom-nav { display: none; }
.bottom-nav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--nav-bar-h); list-style: none; margin: 0; padding: 0; }
.bottom-nav-link {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0);
  width: 100%; height: 100%; min-height: 2.75rem; padding: 0 var(--sp-0); border: 0; background: none; cursor: pointer;
  color: var(--muted); text-decoration: none; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-link:focus-visible { outline-offset: -3px; }
.bottom-nav-link[aria-current="page"], .bottom-nav-link.is-current { color: var(--accent); }
.bottom-nav-link[aria-current="page"]::before, .bottom-nav-link.is-current::before {
  content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--accent);
}
.bottom-nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav-link .icon { width: var(--sp-5); height: var(--sp-5); }
.bottom-nav-link .icon-more { stroke-width: 3.5; }
.bottom-nav-link[aria-current="page"] .icon-tracked { fill: currentColor; }
.bottom-nav .nav-badge { position: absolute; top: .2rem; left: calc(50% + .4rem); font-size: var(--fs-xs); line-height: 1.1rem; padding: 0 var(--sp-1); min-width: 1.1rem; }
.more-dot { position: absolute; top: .45rem; left: calc(50% + .6rem); width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }
.more-dot.nav-badge-warn { background: var(--danger); }

.dialog.more-sheet {
  width: 100%; max-width: 100%; margin: auto 0 0; max-height: 88vh; max-height: 88dvh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
}
.dialog.more-sheet .dialog-body { padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px)); }
.more-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.more-list > .more-action { margin-bottom: var(--sp-2); }
.more-list > .more-item + .more-item { border-top: 1px solid var(--border); }
.more-link {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 3rem; padding: 0 var(--sp-1); color: var(--text); text-decoration: none; font-weight: var(--fw-medium);
}
.more-link .nav-badge { margin-left: auto; }
.more-link[aria-current="page"] { color: var(--accent); }
.more-status { margin: var(--sp-1) 0 var(--sp-3); white-space: normal; }

@media (max-width: 700px) {
  :root {
    --header-top-h: 3rem;
    --header-nav-h: 0px;
    --bottom-nav-h: calc(var(--nav-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  .header-top { padding: 0 var(--sp-3); gap: var(--sp-2); }
  /* Status, Add event and Sign out move into the More sheet; the bottom bar replaces the top nav. */
  .app-header .status-line, .header-actions, .main-nav { display: none; }
  .app-main {
    padding: var(--sp-4) max(var(--sp-3), env(safe-area-inset-right, 0px)) calc(var(--bottom-nav-h) + var(--sp-6)) max(var(--sp-3), env(safe-area-inset-left, 0px));
  }
  .bottom-nav {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: var(--bottom-nav-h); background: var(--surface); border-top: 1px solid var(--border);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-shadow: var(--shadow-sm);
  }
  h1 { font-size: var(--fs-xl); }
}

/* Phone or tablet on its side: a sticky header would eat a third of the screen, so it scrolls away. */
@media (min-width: 701px) and (max-height: 500px) {
  :root { --header-h: 0px; }
  .app-header { position: static; height: calc(var(--header-top-h) + var(--header-nav-h) + 1px + env(safe-area-inset-top, 0px)); }
}

/* ---------- touch ergonomics ---------- */
/* iOS Safari zooms into any focused control under 16px (tables use .93rem). */
@media (max-width: 700px), (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
}
/* Tap targets of at least 44 × 44 px (Apple HIG, Material); checkboxes 24px inside a 44px label. */
@media (pointer: coarse) {
  .btn, .btn-small, .seg-btn, .chip { min-height: 2.75rem; }
  .icon-btn, .toast-close { min-width: 2.75rem; min-height: 2.75rem; }
  details > summary { min-height: 2.75rem; padding-block: var(--sp-2); }
  .check { min-height: 2.75rem; }
  html input[type=checkbox], html input[type=radio] { width: 1.5rem; height: 1.5rem; }
  .month-cell .day-num { min-width: 2.75rem; height: 2.75rem; justify-content: center; }
  .month-cell .more-btn { min-height: 2.75rem; }
}

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