/* =========================================================================
   local-apps-ui: shared stylesheet for Alex's local apps
   GitHub structure + Tabler polish. UI kit: docs/ui-kit.html

   1. Tokens       colours, radius, sizes (light + dark)
   2. Base
   3. Shell        header, main nav, page, page header
   4. Components   buttons, labels, counters, cards, forms, segmented,
                   tabs, flash alerts, details list, empty state,
                   action menus, dialogs, toasts, number balls,
                   game markers, month calendar
   5. Dashboard    metrics strip, list, pipeline bar, timeline
   6. Table        toolbar, bulk bar, data table, footer, pagination
   7. Drawer       side panel for viewing/editing a record
   8. Record page  breadcrumb, record header, spy-scroll section nav,
                   row lists, event timeline, prose, danger zone
   9. Long forms   compose lists, chip toggles, sticky save bar
   10. Settings    setting rows, app footer
   11. Auth        sign-in screen (no registration)
   12. Responsive

   Rules: use only the tokens in section 1. Colour is for status only.
   Per app: the only difference between apps is the header colour,
   set with --app-header in the app's own CSS (see README).
   ========================================================================= */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius: 6px;
  --radius-pill: 999px;
  --row-h: 38px;
  --control-h: 32px;
  --control-h-sm: 28px;

  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-sunken: #f6f8fa;
  --surface-hover: #f6f8fa;
  --row-selected: #f1f8ff;
  --border: #d1d9e0;
  --border-muted: #e5e9ee;
  --text: #1f2328;
  --text-muted: #59636e;
  --text-subtle: #818b98;
  --accent: #0969da;
  --focus-ring: rgba(9, 105, 218, .25);
  --counter-bg: rgba(129, 139, 152, .18);
  --input-bg: #ffffff;

  --btn-bg: #f6f8fa;
  --btn-hover: #eff2f5;
  --btn-border: rgba(31, 35, 40, .15);
  --primary: #1f883d;
  --primary-hover: #1c8139;
  --primary-border: rgba(31, 35, 40, .15);
  --shadow-xs: 0 1px 0 rgba(31, 35, 40, .04);
  --shadow-lg: 0 8px 24px rgba(66, 74, 83, .2);

  --header-bg: #1f2328;
  --header-text: #f0f3f6;
  --header-muted: #b7bdc8;
  --header-border: #3d444d;
  --header-input-bg: #2a2f36;
  --header-accent: #4493f8;

  --s-draft-fg: #59636e;     --s-draft-bg: #eff2f5;
  --s-applied-fg: #0969da;   --s-applied-bg: #ddf4ff;
  --s-screening-fg: #1b7c83; --s-screening-bg: #d8f5f3;
  --s-interview-fg: #8250df; --s-interview-bg: #fbefff;
  --s-offer-fg: #1a7f37;     --s-offer-bg: #dafbe1;
  --warn-fg: #9a6700;        --warn-bg: #fff8c5;
  --danger-fg: #d1242f;      --danger-bg: #ffebe9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1117; --surface: #151b23; --surface-sunken: #0d1117; --surface-hover: #1c2129;
    --row-selected: rgba(56, 139, 253, .1);
    --border: #3d444d; --border-muted: #2a313c;
    --text: #f0f6fc; --text-muted: #9198a1; --text-subtle: #6e7681;
    --accent: #4493f8; --focus-ring: rgba(68, 147, 248, .35);
    --counter-bg: rgba(101, 108, 118, .3); --input-bg: #0d1117;
    --btn-bg: #212830; --btn-hover: #262c36; --btn-border: #3d444d;
    --primary: #238636; --primary-hover: #29903b; --primary-border: rgba(240, 246, 252, .1);
    --shadow-xs: none; --shadow-lg: 0 8px 24px rgba(1, 4, 9, .6);
    --header-bg: #010409; --header-input-bg: #0d1117; --header-border: #3d444d;
    --s-draft-fg: #9198a1;     --s-draft-bg: rgba(110, 118, 129, .2);
    --s-applied-fg: #4493f8;   --s-applied-bg: rgba(56, 139, 253, .15);
    --s-screening-fg: #39c5cf; --s-screening-bg: rgba(57, 197, 207, .15);
    --s-interview-fg: #ab7df8; --s-interview-bg: rgba(171, 125, 248, .15);
    --s-offer-fg: #3fb950;     --s-offer-bg: rgba(46, 160, 67, .15);
    --warn-fg: #d29922;        --warn-bg: rgba(187, 128, 9, .15);
    --danger-fg: #f85149;      --danger-bg: rgba(248, 81, 73, .1);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117; --surface: #151b23; --surface-sunken: #0d1117; --surface-hover: #1c2129;
  --row-selected: rgba(56, 139, 253, .1);
  --border: #3d444d; --border-muted: #2a313c;
  --text: #f0f6fc; --text-muted: #9198a1; --text-subtle: #6e7681;
  --accent: #4493f8; --focus-ring: rgba(68, 147, 248, .35);
  --counter-bg: rgba(101, 108, 118, .3); --input-bg: #0d1117;
  --btn-bg: #212830; --btn-hover: #262c36; --btn-border: #3d444d;
  --primary: #238636; --primary-hover: #29903b; --primary-border: rgba(240, 246, 252, .1);
  --shadow-xs: none; --shadow-lg: 0 8px 24px rgba(1, 4, 9, .6);
  --header-bg: #010409; --header-input-bg: #0d1117; --header-border: #3d444d;
  --s-draft-fg: #9198a1;     --s-draft-bg: rgba(110, 118, 129, .2);
  --s-applied-fg: #4493f8;   --s-applied-bg: rgba(56, 139, 253, .15);
  --s-screening-fg: #39c5cf; --s-screening-bg: rgba(57, 197, 207, .15);
  --s-interview-fg: #ab7df8; --s-interview-bg: rgba(171, 125, 248, .15);
  --s-offer-fg: #3fb950;     --s-offer-bg: rgba(46, 160, 67, .15);
  --warn-fg: #d29922;        --warn-bg: rgba(187, 128, 9, .15);
  --danger-fg: #f85149;      --danger-bg: rgba(248, 81, 73, .1);
}

/* 2. Base --------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Skip link: first element in body, hidden until focused with the keyboard.
   <a class="skip-link" href="#main">Skip to content</a> */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 12px; border-radius: var(--radius); background: var(--surface); color: var(--accent); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.spacer { flex: 1; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Icon sprite: <svg class="svg-sprite" aria-hidden="true"><defs>…</defs></svg> as the first child of <body>.
   An inline <svg> left in the flow adds a ~20px line above the header, so it is always taken out of the flow. */
.svg-sprite, body > svg[width="0"] { position: absolute; width: 0; height: 0; overflow: hidden; }
kbd {
  display: inline-block; min-width: 18px; padding: 0 5px;
  font: 11px/16px var(--font-mono); text-align: center; color: var(--text-muted);
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 4px;
}

/* 3. Shell -------------------------------------------------------------- */
.app-header {
  position: sticky; top: 0; z-index: 20; height: 48px;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  /* Per-app tint: set --app-header in the app's own CSS, e.g. :root { --app-header: #1f3a2b; } */
  background: var(--app-header, var(--header-bg)); color: var(--header-text); border-bottom: 1px solid var(--header-border);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--header-text); font-size: 15px; font-weight: 650; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #0969da; color: #fff; font-size: 12px; font-weight: 800; }
.main-nav { display: flex; min-width: 0; align-self: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.main-nav a { position: relative; display: flex; align-items: center; padding: 0 10px; color: var(--header-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.main-nav a:hover { color: var(--header-text); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--header-text); font-weight: 600; }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--header-accent); }
.header-search { position: relative; width: min(280px, 26vw); }
.header-search input { width: 100%; height: 30px; padding: 0 30px 0 30px; background: var(--header-input-bg); border: 1px solid var(--header-border); border-radius: var(--radius); color: var(--header-text); font-size: 13px; outline: none; }
.header-search input::placeholder { color: var(--header-muted); }
.header-search input:focus { border-color: var(--header-accent); }
.header-search .icon { position: absolute; left: 9px; top: 7px; color: var(--header-muted); }
.header-search kbd { position: absolute; right: 7px; top: 6px; color: var(--header-muted); background: transparent; border-color: var(--header-border); }
.header-btn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 1px solid var(--header-border); border-radius: var(--radius); color: var(--header-muted); cursor: pointer; }
.header-btn:hover { color: var(--header-text); border-color: var(--header-muted); }
.avatar { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #8250df; color: #fff; font-size: 11px; font-weight: 700; }

.page { max-width: 1440px; margin: 0 auto; padding: 20px 24px 48px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-title { font-size: 24px; letter-spacing: -.01em; }
.page-subtitle { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 4. Components --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h); padding: 0 12px; white-space: nowrap; cursor: pointer;
  background: var(--btn-bg); color: var(--text); border: 1px solid var(--btn-border); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); font-size: 13px; font-weight: 500; line-height: 1;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary-border); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { color: var(--danger-fg); }
.btn-danger:hover { background: var(--danger-fg); border-color: var(--danger-fg); color: #fff; }
.btn-invisible { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); }
.btn-invisible:hover { background: var(--surface-hover); }
.btn-square { width: var(--control-h); padding: 0; }
.btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: 12px; }
.btn-icon { width: var(--control-h-sm); height: var(--control-h-sm); padding: 0; display: inline-grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; }
.btn-icon:hover { background: var(--btn-hover); color: var(--text); }

.label {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.label-draft { color: var(--s-draft-fg); background: var(--s-draft-bg); }
.label-applied { color: var(--s-applied-fg); background: var(--s-applied-bg); }
.label-screening { color: var(--s-screening-fg); background: var(--s-screening-bg); }
.label-interview { color: var(--s-interview-fg); background: var(--s-interview-bg); }
.label-offer { color: var(--s-offer-fg); background: var(--s-offer-bg); }
.label-closed { color: var(--text-muted); background: transparent; border-color: var(--border); }
.label-closed::before { background: var(--text-subtle); }
.counter { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--counter-bg); color: var(--text); font-size: 12px; font-weight: 500; line-height: 18px; text-align: center; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.card-header { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border-muted); }
.card-title { font-size: 14px; font-weight: 600; }
.card-meta { color: var(--text-muted); font-size: 12px; }
.card-body { padding: 14px; }

.form-control {
  width: 100%; height: var(--control-h); padding: 0 10px; outline: none;
  background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; transition: border-color .12s, box-shadow .12s;
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
select.form-control {
  width: auto; padding-right: 28px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23818b98' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.field select.form-control { width: 100%; }
textarea.form-control { height: auto; min-height: 88px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.form-control.is-invalid { border-color: var(--danger-fg); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-bg); }
/* Keep browser autofill from painting inputs yellow */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  transition: background-color 9999s ease-out 0s;
}
.form-control:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--input-bg) inset, 0 0 0 3px var(--focus-ring); }
input[type="checkbox"], input[type="radio"] { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }

.input-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.input-search .icon { position: absolute; left: 9px; top: 8px; color: var(--text-muted); pointer-events: none; }
.input-search .form-control { padding-left: 30px; }

.segmented { display: inline-flex; padding: 2px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); }
.segmented button { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-xs); }
/* Segmented links (period switch that reloads the page): <a aria-current="page"> marks the selected one */
.segmented { max-width: 100%; overflow-x: auto; }
.segmented a, .segmented button { flex: none; white-space: nowrap; }
.segmented a { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; color: var(--text-muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.segmented a:hover { color: var(--text); text-decoration: none; }
.segmented a[aria-current="page"] { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-xs); }
.segmented-sm button { height: 22px; padding: 0 8px; font-size: 12px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs a { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--text); font-weight: 600; }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: #fd8c73; }

.flash { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid; border-radius: var(--radius); font-size: 13px; }
.flash .icon { margin-top: 2px; }
.flash strong { font-weight: 600; }
.flash-info { background: var(--s-applied-bg); border-color: color-mix(in srgb, var(--s-applied-fg) 30%, transparent); }
.flash-info .icon { color: var(--s-applied-fg); }
.flash-success { background: var(--s-offer-bg); border-color: color-mix(in srgb, var(--s-offer-fg) 30%, transparent); }
.flash-success .icon { color: var(--s-offer-fg); }
.flash-warning { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-fg) 35%, transparent); }
.flash-warning .icon { color: var(--warn-fg); }
.flash-danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger-fg) 30%, transparent); }
.flash-danger .icon { color: var(--danger-fg); }

.dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-content: start; margin: 0; border: 1px solid var(--border-muted); border-radius: var(--radius); overflow: hidden; }
.dl dt, .dl dd { margin: 0; padding: 7px 12px; border-top: 1px solid var(--border-muted); font-size: 13px; }
.dl dt { color: var(--text-muted); background: var(--surface-sunken); }
.dl dt:first-of-type, .dl dd:first-of-type { border-top: 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.field-full { grid-column: 1 / -1; }
.field > .segmented { justify-self: start; }
.field > .btn { justify-self: start; }
.field-label { font-size: 13px; font-weight: 600; }
.field-label .req { color: var(--danger-fg); }
.field-hint { font-size: 12px; color: var(--text-muted); }
.field-error { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--danger-fg); }
.field-error .icon { width: 13px; height: 13px; }
.input-group { display: flex; }
.input-group-text { display: flex; align-items: center; padding: 0 10px; background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); font-size: 13px; }
.input-group .form-control { border-radius: 0 var(--radius) var(--radius) 0; }
/* Input with a trailing button: <div class="input-group"><input class="form-control"><button class="btn">Find</button></div> */
.input-group > .form-control:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.input-group > .btn:last-child { flex: none; margin-left: -1px; border-radius: 0 var(--radius) var(--radius) 0; }
/* A record found by a lookup, shown inline under the field that found it */
.draw-found { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--border-muted); border-radius: var(--radius); background: var(--surface-sunken); font-size: 13px; }
.draw-found > .icon { color: var(--s-offer-fg); }
.draw-found.is-error { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger-fg) 30%, transparent); }
.draw-found.is-error > .icon { color: var(--danger-fg); }
.choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-height: 32px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 14px; border-top: 1px solid var(--border-muted); background: var(--surface-sunken); }
/* A destructive action in form actions sits on the far left, away from Save */
.form-actions > .btn-danger:first-child { margin-right: auto; }
/* Grouped fields: <fieldset class="fieldset"><legend>Related contacts</legend>…</fieldset> */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset { display: grid; gap: 10px; padding: 10px 14px 14px; border: 1px solid var(--border-muted); border-radius: var(--radius); }
.fieldset > legend { margin-left: -4px; padding: 0 4px; font-size: 13px; font-weight: 600; }
.fieldset .fieldset { background: var(--surface-sunken); }
.fieldset > .field-hint:first-of-type { margin-top: -4px; }

.empty { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; text-align: center; }
.empty-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; background: var(--surface-sunken); border: 1px solid var(--border-muted); color: var(--text-muted); }
.empty h3 { font-size: 15px; }
.empty p { max-width: 360px; color: var(--text-muted); font-size: 13px; }


/* Menus, dialogs, toasts (behaviour in js/ui.js) */
.menu-wrap { position: relative; display: inline-flex; }
.menu { z-index: 50; min-width: 184px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; background: transparent; border: 0; border-radius: 4px; color: var(--text); font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; }
.menu-item .icon { color: var(--text-muted); }
.menu-item:hover, .menu-item:focus-visible { background: var(--btn-hover); outline: none; text-decoration: none; }
.menu-item:disabled { opacity: .5; cursor: not-allowed; }
.menu-item kbd { margin-left: auto; }
.menu-item-danger, .menu-item-danger .icon { color: var(--danger-fg); }
.menu-item-danger:hover, .menu-item-danger:focus-visible { background: var(--danger-bg); }
.menu-divider { height: 1px; margin: 4px -4px; background: var(--border-muted); }
.btn-icon[aria-expanded="true"] { background: var(--btn-hover); color: var(--text); }
.table tbody tr.has-menu td, .row-item.has-menu { background: var(--surface-hover); }

.btn-danger-fill { background: var(--danger-fg); border-color: transparent; color: #fff; }
.btn-danger-fill:hover { background: color-mix(in srgb, var(--danger-fg) 88%, #000); }

.modal { width: min(440px, calc(100vw - 32px)); margin: auto; padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); }
.modal::backdrop { background: rgba(1, 4, 9, .45); }
.modal form { margin: 0; }
.modal-header { display: flex; align-items: center; gap: 8px; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--border-muted); }
.modal-header h2 { flex: 1; font-size: 15px; }
.modal-body { padding: 16px; font-size: 14px; }
.modal-body p + p { margin-top: 8px; }
.modal-body .field + .field, .modal-body p + .field { margin-top: 12px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-muted); background: var(--surface-sunken); border-radius: 0 0 8px 8px; }

.toast { position: fixed; left: 50%; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 14px; transform: translateX(-50%); background: var(--header-bg); color: var(--header-text); border: 1px solid var(--header-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 13px; }
.toast-action { padding: 0; background: none; border: 0; color: var(--header-accent); font-weight: 600; cursor: pointer; }
.toast-action:hover { text-decoration: underline; }

/* Number balls (lottery draws, ticket lines, any short set of numbers) -------
   <span class="balls balls-red">
     <span class="ball">7</span> … <span class="ball ball-extra" title="Bonus">29</span>
   </span>
   Sizes: .balls-sm (tables), default (cards), .balls-lg (draw result).
   Tones: neutral by default; .balls-red / -amber / -teal / -ink identify a game.
   Game identity is the one colour use besides status; each app maps its games to a tone.
   Checking: add .is-checking to .balls and .is-match to matched balls; others fade. */
.balls { --ball: 30px; --ball-font: 13px; --tone: var(--text-muted);
  --ball-bg: color-mix(in srgb, var(--tone) 16%, var(--surface)); --ball-fg: color-mix(in srgb, var(--tone) 80%, var(--text)); --ball-bd: color-mix(in srgb, var(--tone) 30%, transparent);
  --extra-bg: var(--tone); --extra-fg: #fff;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.balls-sm { --ball: 22px; --ball-font: 11px; gap: 3px; }
.balls-lg { --ball: 40px; --ball-font: 16px; gap: 6px; }
.ball { position: relative; display: inline-grid; place-items: center; width: var(--ball); height: var(--ball); flex: none; border-radius: 50%;
  background: var(--ball-bg); color: var(--ball-fg); box-shadow: inset 0 0 0 1px var(--ball-bd);
  font-size: var(--ball-font); font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.ball-extra { background: var(--extra-bg); color: var(--extra-fg); box-shadow: none; }
.ball:not(.ball-extra) + .ball-extra { margin-left: calc(var(--ball) * .22); }
.ball-extra[data-kind="star"]::after { content: "★"; position: absolute; top: -.42em; right: -.32em; font-size: calc(var(--ball-font) * .8); color: var(--extra-bg); text-shadow: 0 0 2px var(--surface), 0 0 1px var(--surface); }
.balls-red   { --tone: #cf222e; }
.balls-amber { --tone: #d4a106; --extra-fg: #3b2a00; }
.balls-teal  { --tone: #0f8b95; }
.balls-ink   { --tone: #cf222e; --ball-bg: var(--text); --ball-fg: var(--surface); --ball-bd: transparent; }
.balls.is-checking .ball:not(.is-match) { opacity: .38; }
.ball.is-match { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--s-offer-fg); }
.balls .round-mark { margin: 0 2px 0 6px; padding-left: 8px; border-left: 1px solid var(--border); color: var(--text-subtle); font-size: 11px; font-weight: 600; }
/* Entering numbers: <span class="balls balls-amber balls-input"><input class="ball" inputmode="numeric" maxlength="2" aria-label="Main number 1">…<input class="ball ball-extra" data-kind="star">…</span>
   Give each a placeholder=" " so empty balls show outlined; filled ones take the game tone. ui.js moves focus on to the next ball inside [data-ball-entry]. */
.balls-input { --ball: 36px; --ball-font: 14px; gap: 6px; }
input.ball { margin: 0; padding: 0; border: 0; font-family: inherit; text-align: center; outline: none; appearance: none; -moz-appearance: textfield; }
input.ball::-webkit-outer-spin-button, input.ball::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
input.ball:placeholder-shown { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
input.ball.ball-extra:placeholder-shown { box-shadow: inset 0 0 0 1.5px var(--extra-bg); }
input.ball:focus { box-shadow: 0 0 0 3px var(--focus-ring), inset 0 0 0 1px var(--accent); }
input.ball[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--danger-fg); }

/* Repeated entry rows (ticket lines): label, controls, numbers, extras, remove */
.entry-list { margin: 0; padding: 0; list-style: none; }
.entry-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-top: 1px solid var(--border-muted); }
.entry-list > .entry-row:first-child { border-top: 0; }
.entry-label { flex: none; width: 52px; font-size: 13px; font-weight: 600; }
.entry-row .form-control-sm { width: auto; }
.entry-row .entry-code { width: 140px; letter-spacing: .03em; }
.entry-row > .btn-icon:last-child { margin-left: auto; }

/* Draw result block: one row per round */
.draw-rounds { display: grid; gap: 10px; }
.draw-round { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.draw-round-label { width: 64px; flex: none; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.code-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); font: 600 12px/1 var(--font-mono); letter-spacing: .04em; }
.match-summary { font-size: 13px; font-weight: 600; }
.match-summary.is-win { color: var(--s-offer-fg); }

/* Game marker: a dot in the game's tone before its name. <span class="game game-red">Lotto</span>
   Tone classes .game-red/-amber/-teal/-ink also colour .pipeline-bar segments, .swatch and calendar chips. */
.game-red   { --tone: #cf222e; }
.game-amber { --tone: #d4a106; }
.game-teal  { --tone: #0f8b95; }
.game-ink   { --tone: var(--text); }
.game { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.game::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tone, var(--text-subtle)); }
.pipeline-bar > [class*="game-"], .swatch[class*="game-"] { background: var(--tone); }

/* Month calendar: <div class="cal"><div class="cal-head">Mon</div>… <div class="cal-day"><span class="cal-num">9</span><a class="cal-chip game-amber">EuroMillions</a></div>… */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border-muted); }
.cal-head { padding: 6px 8px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-muted); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.cal-day { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 84px; padding: 6px; border-right: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-num { align-self: flex-start; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-pill); color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.cal-day.is-other { background: var(--surface-sunken); }
.cal-day.is-other .cal-num { color: var(--text-subtle); font-weight: 400; }
.cal-day.is-past .cal-num { color: var(--text-subtle); }
.cal-day.cal-today .cal-num { background: var(--accent); color: #fff; }
.cal-chip { display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; padding: 0 7px; border-radius: var(--radius); background: color-mix(in srgb, var(--tone, var(--text-muted)) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--tone, var(--text-muted)); color: var(--text); font-size: 12px; font-weight: 500; text-decoration: none; }
.cal-chip:hover { background: color-mix(in srgb, var(--tone) 22%, var(--surface)); text-decoration: none; }
.cal-chip > span:first-child { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-chip .cal-amount { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-chip.is-done { background: var(--tone); box-shadow: none; color: #fff; }
.cal-chip.is-done .cal-amount { color: inherit; opacity: .85; }
.cal-chip.is-done.game-amber { color: #3b2a00; }
.cal-chip.is-done.game-ink { color: var(--surface); }
.cal-chip.is-missed { opacity: .5; text-decoration: line-through; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; border-top: 1px solid var(--border-muted); color: var(--text-muted); font-size: 12px; }
@media (max-width: 720px) {
  .cal-day { min-height: 56px; padding: 4px; }
  .cal-chip { height: 10px; padding: 0; border-radius: var(--radius-pill); background: var(--tone); box-shadow: none; }
  .cal-chip > span { display: none; }
  .cal-chip.is-done { outline: 2px solid var(--s-offer-fg); outline-offset: 1px; }
}


/* Inset metrics strip: sits flush inside a card, between setting rows */
.metrics.metrics-inset { margin: 0; border: 0; border-top: 1px solid var(--border-muted); border-radius: 0; }
/* Page-level flash above the breadcrumb */
.page > .flash { margin-bottom: 16px; }
/* Secondary figure in a legend row (e.g. "5 planned · 1 recorded") */
.legend-row .legend-note { min-width: 120px; margin-left: 16px; color: var(--text-muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* 5. Dashboard ---------------------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.metric { min-width: 0; padding: 10px 14px; border-left: 1px solid var(--border-muted); }
.metric:first-child { border-left: 0; }
.metric-label { overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.metric-value { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric-note { overflow: hidden; color: var(--text-muted); font-size: 12px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.metric-note.is-danger { color: var(--danger-fg); font-weight: 500; }
.metrics-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metrics-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metrics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-value-text { min-height: 30px; align-items: center; font-size: 15px; }
.metric-value-text a { font-weight: 600; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.dash-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Trailing figure in a dashboard list row (amount, count) */
.list-amount { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.list-item > .cell-muted, .list-item > .list-note { flex: none; color: var(--text-muted); font-size: 12px; }
/* Thin progress bar under a metric (allowance used). Width is data: style="width:20%" */
.metric-bar { height: 4px; margin-top: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.metric-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--s-applied-fg); }
.metric-bar.is-over > span { background: var(--danger-fg); }
.list { margin: 0; padding: 0; list-style: none; }
.list-item { display: flex; align-items: center; gap: 10px; min-height: var(--row-h); padding: 4px 14px; border-top: 1px solid var(--border-muted); cursor: pointer; }
.list-item:first-child { border-top: 0; }
.list-item:hover { background: var(--surface-hover); }
.due { flex: none; width: 64px; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.is-overdue { color: var(--danger-fg) !important; font-weight: 600; }
.is-today { color: var(--warn-fg) !important; font-weight: 600; }
.list-main { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.list-main span { color: var(--text-muted); }

.pipeline-bar { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.pipeline-bar span { height: 100%; }
.legend { display: grid; margin-top: 10px; }
.legend-row { display: flex; align-items: center; gap: 8px; height: 30px; font-size: 13px; border-top: 1px solid var(--border-muted); }
.legend-row:first-child { border-top: 0; }
.swatch { width: 8px; height: 8px; border-radius: 2px; }
.legend-row .count { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.legend-row .pct { width: 38px; color: var(--text-muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.legend-row.is-closed { color: var(--text-muted); }

.timeline { margin: 0; padding: 8px 14px 10px; list-style: none; }
.tl-item { display: flex; gap: 10px; padding: 5px 0; }
.tl-dot { position: relative; flex: none; width: 14px; display: flex; justify-content: center; }
.tl-dot::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--tl, var(--text-subtle)); box-shadow: 0 0 0 3px var(--surface); z-index: 1; }
.tl-item:not(:last-child) .tl-dot::after { content: ""; position: absolute; top: 14px; bottom: -14px; left: 50%; width: 1px; background: var(--border-muted); }
.tl-body { min-width: 0; font-size: 13px; }
.tl-time { display: block; color: var(--text-muted); font-size: 12px; }

/* 6. Table -------------------------------------------------------------- */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 53px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.toolbar .bulkbar { display: none; }
.toolbar.has-selection { background: var(--row-selected); }
.toolbar.has-selection .filters { display: none; }
.toolbar.has-selection .bulkbar { display: flex; }
.filters, .bulkbar { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulkbar strong { margin-right: 4px; font-size: 13px; }

.table-wrap { position: relative; overflow-x: auto; }
.table { width: 100%; min-width: 1100px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.table th, .table td { height: var(--row-h); padding: 0 10px; overflow: hidden; border-bottom: 1px solid var(--border-muted); text-align: left; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; }
.table thead th { height: 34px; background: var(--surface-sunken); color: var(--text-muted); border-bottom-color: var(--border); font-size: 12px; font-weight: 600; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.th-sort:hover, th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--text); }
.th-sort .icon { width: 12px; height: 12px; opacity: 0; }
.th-sort:hover .icon { opacity: .45; }
th[aria-sort="ascending"] .th-sort .icon, th[aria-sort="descending"] .th-sort .icon { opacity: 1; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover td { background: var(--surface-hover); }
.table tbody tr.is-selected td { background: var(--row-selected); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cell-company { font-weight: 600; }
.table tr.is-closed td { color: var(--text-muted); }
.table tr.is-closed .cell-company { font-weight: 500; }
.col-check { width: 42px; padding-left: 14px !important; padding-right: 0 !important; }
.col-actions { width: 46px; padding-right: 8px !important; text-align: right !important; }
.table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Small tables inside record pages don't need the list min-width */
.table.table-fit { min-width: 560px; }
/* Grouped columns: a first header row with colspan labels (e.g. Round 1 | Round 2) */
.table thead tr.th-group th { height: 28px; padding-top: 4px; padding-bottom: 0; border-bottom: 0; color: var(--text); font-size: 12px; }
.table .col-start { border-left: 1px solid var(--border-muted); }
/* Group rows inside one table (e.g. weeks, skill groups): <tr class="group-row"><td colspan="N">Week of 5 October <span class="group-total">£4.50</span></td></tr> */
.table tbody tr.group-row { cursor: default; }
.table tbody tr.group-row td { height: 30px; background: var(--surface-sunken); border-bottom-color: var(--border-muted); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.table tbody tr.group-row:hover td { background: var(--surface-sunken); }
.table tbody tr.group-row + tr td { border-top: 0; }
.group-total { float: right; font-weight: 500; font-variant-numeric: tabular-nums; }
/* A group row that is itself a record (a retailer above its locations): normal text, bold name, its own cells and "…" menu.
   <tr class="group-row group-record"><td>Tesco <span class="cell-muted">2 locations</span></td><td class="col-num">16</td>…<td class="col-actions">menu</td></tr> */
.table tbody tr.group-row.group-record td { height: 38px; color: var(--text); font-size: 13px; font-weight: 500; }
.table tbody tr.group-row.group-record td:first-child { font-weight: 600; }
.table tbody tr.group-row.group-record .cell-muted { margin-left: 6px; font-weight: 400; font-size: 12px; }
/* Child rows under a group record are indented */
.table tbody tr.is-child td:first-child { padding-left: 28px; }
/* A cell holding one small button (e.g. "Add location" on a group record row): right-aligned, never clipped */
.table td.cell-action { overflow: visible; padding-right: 4px; text-align: right; text-overflow: clip; }
/* A cell that is the user's own result (e.g. the prize tier they won) */
.table td.is-win { background: var(--s-offer-bg); color: var(--s-offer-fg); font-weight: 600; }
.table tbody tr:hover td.is-win { background: var(--s-offer-bg); }
.table .cell-muted { color: var(--text-muted); }
.cell-type { color: var(--text-muted); }
.cell-type::after { content: " · "; color: var(--text-subtle); }
.table tr.is-done .cell-company { color: var(--text-muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--text-subtle); }
.next { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.next-date { flex: none; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.next-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.none { color: var(--text-subtle); }

/* Totals row */
.table tfoot td { height: var(--row-h); padding: 0 10px; border-top: 1px solid var(--border); background: var(--surface-sunken); font-weight: 600; white-space: nowrap; }
.table-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; padding: 6px 12px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.pagination { display: flex; gap: 4px; margin-left: auto; }
.page-btn { min-width: 28px; height: 28px; padding: 0 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--text); font-size: 12px; cursor: pointer; }
.page-btn:hover:not(:disabled) { border-color: var(--border); }
.page-btn[aria-current="page"] { background: var(--accent); color: #fff; }
.page-btn:disabled { color: var(--text-subtle); cursor: default; }

/* 7. Drawer ------------------------------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(1, 4, 9, .35); opacity: 0; pointer-events: none; transition: opacity .15s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(500px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .2s ease; visibility: hidden; }
body.drawer-open .overlay { opacity: 1; pointer-events: auto; }
body.drawer-open .drawer { transform: none; visibility: visible; }
.drawer-header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--border-muted); }
.drawer-header h2 { font-size: 18px; }
.drawer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--text-muted); font-size: 12px; }
.drawer-body { flex: 1; display: grid; align-content: start; gap: 22px; padding: 16px 18px; overflow-y: auto; }
.drawer-footer { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-muted); background: var(--surface-sunken); }
.section-title { margin-bottom: 8px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.drawer .timeline { padding: 0; }

/* 8. Record page ------------------------------------------------------- */
/* A single record (e.g. /applications/{id}): breadcrumb + record header,
   then a sticky section nav (spy-scroll) beside stacked section cards.
   Usage: .with-sidenav > nav.sidenav + .sections > section.section[id] */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-muted); font-size: 13px; }
.breadcrumb .sep { color: var(--text-subtle); }
.record-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; color: var(--text-muted); font-size: 13px; }
.record-meta .sep { color: var(--text-subtle); }

.with-sidenav { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.sidenav { position: sticky; top: 68px; padding-left: 8px; }
.sidenav-group { margin: 14px 0 4px 8px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.sidenav-group:first-child { margin-top: 0; }
.sidenav a { position: relative; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: var(--radius); color: var(--text); font-size: 13px; white-space: nowrap; }
.sidenav a:hover { background: var(--btn-hover); text-decoration: none; }
.sidenav a.is-active { background: var(--btn-hover); font-weight: 600; }
.sidenav a.is-active::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 4px; border-radius: var(--radius); background: var(--accent); }
.sidenav .counter { margin-left: auto; }
.sidenav .icon { color: var(--text-muted); }

.sections { display: grid; gap: 16px; min-width: 0; }
.section { scroll-margin-top: 68px; }
.section-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card-header .card-actions { display: flex; gap: 6px; margin-left: auto; }

/* Two details lists side by side inside one card */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split > * + * { border-left: 1px solid var(--border-muted); }
.dl-flush { grid-template-columns: 150px minmax(0, 1fr); border: 0; border-radius: 0; }
.dl-flush dt, .dl-flush dd { padding: 8px 14px; }
.dl-flush dt { background: transparent; }

/* Row list: documents, files, linked records */
.rows { margin: 0; padding: 0; list-style: none; }
.row-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-top: 1px solid var(--border-muted); }
.row-item:first-child { border-top: 0; }
.row-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--border-muted); color: var(--text-muted); }
.row-main { flex: 1; min-width: 0; }
.row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 600; }
.row-meta { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.row-actions { flex: none; display: flex; align-items: center; gap: 4px; }

/* Event timeline (newest first) */
.events { margin: 0; padding: 4px 14px 6px; list-style: none; }
.event { position: relative; display: flex; gap: 12px; padding: 12px 0; }
.event:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 40px; bottom: -12px; width: 1px; background: var(--border-muted); }
.event-badge { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--tl, var(--text-muted)); }
.event-badge .icon { width: 14px; height: 14px; }
.event-main { flex: 1; min-width: 0; padding-top: 4px; }
.event-title { font-size: 13px; font-weight: 600; }
.event-meta { color: var(--text-muted); font-size: 12px; }
.event-body { max-width: 72ch; margin-top: 4px; font-size: 13px; }
.event-actions { margin-top: 4px; font-size: 12px; }

/* Long text */
.icon-inline { width: 12px; height: 12px; vertical-align: -1px; }
.tone-applied { --tl: var(--s-applied-fg); }
.tone-screening { --tl: var(--s-screening-fg); }
.tone-interview { --tl: var(--s-interview-fg); }
.tone-offer { --tl: var(--s-offer-fg); }
.tone-danger { --tl: var(--danger-fg); }

.prose { max-width: 72ch; font-size: 14px; line-height: 1.6; }
.prose p + p { margin-top: 10px; }
/* Rendered Markdown: headings stay small, lists and quotes indented, code monospaced */
.prose > :first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 18px 0 6px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.prose h1, .prose h2 { font-size: 15px; }
.prose ul, .prose ol { margin: 8px 0; padding-left: 22px; }
.prose li + li { margin-top: 3px; }
.prose blockquote { margin: 10px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--border); color: var(--text-muted); }
.prose code { padding: 1px 4px; border-radius: 4px; background: var(--surface-sunken); font: 12px var(--font-mono); }
.prose pre { margin: 10px 0; padding: 10px 12px; overflow-x: auto; border-radius: var(--radius); background: var(--surface-sunken); }
.prose pre code { padding: 0; background: none; }
.prose hr { margin: 14px 0; border: 0; border-top: 1px solid var(--border-muted); }
.prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p, .prose h3 + p, .prose h2 + p { margin-top: 6px; }
.prose input[type="checkbox"] { margin-right: 6px; vertical-align: -1px; }

/* Markdown editor: Write / Preview switch above a textarea; the preview is .prose
   <div class="md-editor"><div class="segmented segmented-sm" role="tablist"><button type="button" aria-pressed="true">Write</button><button type="button" aria-pressed="false">Preview</button></div>
   <textarea class="form-control"></textarea><div class="md-preview prose" hidden></div></div> */
.md-editor { display: grid; gap: 6px; }
.md-editor > .segmented { justify-self: start; }
.md-editor textarea.form-control { min-height: 96px; font: 13px/1.55 var(--font-mono); resize: vertical; }
.md-preview { min-height: 96px; padding: 10px 12px; border: 1px solid var(--border-muted); border-radius: var(--radius); background: var(--surface-sunken); max-width: none; }

/* Record picker: search plus a short scrolling checkbox list; selected items come first.
   <div class="pick-list"><input class="form-control form-control-sm" data-filter-list="pick-apps" placeholder="Search…">
   <div class="pick-items" id="pick-apps"><label class="check" data-filter-item>…</label></div></div> */
.pick-list { display: grid; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.pick-list > .form-control { border: 0; border-bottom: 1px solid var(--border-muted); border-radius: 0; box-shadow: none; }
.pick-items { display: grid; align-content: start; height: 172px; overflow-y: auto; padding: 4px 0; } /* fixed height so pickers side by side line up */
.pick-items .check { min-height: 28px; padding: 0 10px; font-size: 13px; }
.pick-items .check:hover { background: var(--surface-hover); }
.pick-items .check .cell-muted { margin-left: auto; padding-left: 8px; font-size: 12px; }
.pick-items .pick-empty { padding: 6px 10px; color: var(--text-muted); font-size: 12px; }

/* Two inputs that form one value (date + time) */
.input-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 140px); gap: 8px; }
/* A wrapping row of tags under content */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
* + .tag-list { margin-top: 12px; }
/* File input styled like other fields */
input[type="file"].form-control { height: auto; padding: 5px; font-size: 13px; }
input[type="file"].form-control::file-selector-button { margin-right: 10px; height: 26px; padding: 0 10px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--text); font: 500 13px var(--font); cursor: pointer; }

.empty-sm { padding: 28px 16px; }
.empty-sm .empty-icon { width: 32px; height: 32px; }

/* Danger zone */
.card-danger { border-color: color-mix(in srgb, var(--danger-fg) 45%, var(--border)); }
.danger-row { display: flex; align-items: center; gap: 16px; padding: 14px; border-top: 1px solid var(--border-muted); }
.danger-row:first-child { border-top: 0; }
.danger-row h3 { font-size: 13px; }
.danger-row p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.danger-row > div { flex: 1; min-width: 0; }

@media (max-width: 1000px) {
  .with-sidenav { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sidenav { top: 48px; z-index: 10; min-width: 0; display: flex; gap: 2px; margin: 0 -16px; padding: 6px 16px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--border); }
  .sidenav-group { display: none; }
  .sidenav a { flex: none; }
  .sidenav a .counter, .sidenav a .icon { display: none; }
  .sidenav a.is-active::before { left: 8px; right: 8px; top: auto; bottom: -6px; width: auto; height: 2px; }
  .section { scroll-margin-top: 104px; }
}
@media (max-width: 900px) {
  .section-pair, .split { grid-template-columns: 1fr; }
  .split > * + * { border-left: 0; border-top: 1px solid var(--border-muted); }
}
@media (max-width: 560px) {
  .dl-flush { grid-template-columns: 1fr; }
  .dl-flush dt { padding-bottom: 0; border-top: 1px solid var(--border-muted); }
  .dl-flush dd { padding-top: 2px; border-top: 0; }
  .row-item { flex-wrap: wrap; }
  .row-actions { width: 100%; padding-left: 44px; }
  .danger-row { flex-direction: column; align-items: flex-start; }
  .card-header { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .card-header .card-meta { flex-basis: 100%; white-space: normal; }
}

/* 9. Long forms and composers ------------------------------------------ */
/* Very long edit pages (e.g. CV compose): section nav + one card per group,
   compact item rows that expand for overrides, chip toggles for big sets,
   and a sticky save bar. Behaviour: js/ui.js sections 6 to 8. */
.form-control-sm { height: var(--control-h-sm); padding: 0 8px; font-size: 12px; }
.card-header .card-meta { white-space: nowrap; }

.compose-list { margin: 0; padding: 0; list-style: none; }
.compose-item { border-top: 1px solid var(--border-muted); background: var(--surface); }
.compose-item:first-child { border-top: 0; }
.compose-row { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 8px 6px 6px; }
.compose-row > input[type="checkbox"] { flex: none; }
.drag-handle { flex: none; width: 22px; height: 30px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-radius: 4px; color: var(--text-subtle); cursor: grab; }
.drag-handle:hover, .drag-handle:focus-visible { background: var(--btn-hover); color: var(--text); }
.drag-handle:active { cursor: grabbing; }
.compose-main { flex: 1; min-width: 0; }
.compose-title { overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.compose-meta { overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.compose-tags { flex: none; display: flex; align-items: center; gap: 6px; }
.compose-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.compose-item.is-off .compose-title { color: var(--text-muted); font-weight: 500; }
.compose-item.is-off .compose-meta { color: var(--text-subtle); }
.compose-item.is-dragging { opacity: .45; }
.compose-detail { padding: 12px 14px 14px 68px; background: var(--surface-sunken); border-top: 1px dashed var(--border-muted); }
.compose-detail .form-grid { gap: 12px 16px; }
.compose-inline { flex: 0 1 220px; min-width: 120px; }
.compose-subhead { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-sunken); border-top: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.compose-subhead:first-child { border-top: 0; }
.compose-subhead .spacer + * { font-weight: 400; }

.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.tag-accent { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }

.chip-toggles { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
.chip-toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 13px; cursor: pointer; user-select: none; }
.chip-toggle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip-toggle .icon { width: 14px; height: 14px; color: var(--text-subtle); }
.chip-toggle .icon-on, .chip-toggle:has(input:checked) .icon-off { display: none; }
.chip-toggle:has(input:checked) .icon-on { display: block; }
.chip-toggle:hover { border-color: var(--text-subtle); }
.chip-toggle:has(input:checked) { background: var(--s-applied-bg); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }
.chip-toggle:has(input:checked) .icon { color: var(--accent); }
.chip-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.savebar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 12px 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.savebar-status { flex: 1; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.savebar.is-dirty .savebar-status { color: var(--text); }
.savebar.is-dirty .savebar-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--warn-fg); vertical-align: 0; }
.savebar [data-discard] { display: none; }
.savebar.is-dirty [data-discard] { display: inline-flex; }
.sidenav a.has-changes::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--warn-fg); }

@media (max-width: 720px) {
  .compose-row { flex-wrap: wrap; }
  .compose-main { flex-basis: calc(100% - 80px); }
  .compose-tags, .compose-actions { margin-left: 58px; }
  .compose-inline { flex-basis: 100%; margin-left: 58px; }
  .compose-detail { padding-left: 14px; }
  .savebar { flex-wrap: wrap; }
  .savebar-status { flex-basis: 100%; }
}

/* 10. Settings pages and app footer ------------------------------------- */
/* Settings: one card per group; each setting is a row with its label and
   explanation on the left and the control on the right (GitHub settings).
   Usage: .settings > section.card > .card-header + .setting-row… + .form-actions */
.settings { display: grid; gap: 16px; max-width: 880px; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 8px 24px; align-items: start; padding: 14px; border-top: 1px solid var(--border-muted); }
.card-header + .setting-row { border-top: 0; }
.setting-label { font-size: 13px; font-weight: 600; }
.setting-label .tag { margin-left: 6px; vertical-align: 1px; }
.setting-desc { margin-top: 2px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.setting-control { display: grid; gap: 5px; min-width: 0; }
.setting-control .segmented { justify-self: start; }
.setting-control > .btn { justify-self: start; } /* a link or action button keeps its size */
.setting-control .check { min-height: 32px; }
.input-group .form-control.num, .form-control.num { text-align: right; font-variant-numeric: tabular-nums; }

/* App footer: app name, version, anything small. */
.app-footer { display: flex; align-items: center; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 18px 24px 28px; color: var(--text-subtle); font-size: 12px; }
.app-footer .spacer { flex: 1; }

@media (max-width: 720px) {
  .setting-row { grid-template-columns: 1fr; }
  .app-footer { padding: 16px; }
}

/* 11. Auth -------------------------------------------------------------- */
/* Usage: <body class="auth-page"> <main class="auth"> ... </main> </body> */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth { flex: 1; width: 100%; max-width: 360px; margin: 0 auto; padding: 64px 16px 32px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 20px; text-align: center; }
.auth-brand .brand-mark { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; }
.auth-title { font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.auth .flash { margin-bottom: 14px; }
.auth-card { display: grid; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.auth-card .field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.auth-card .btn { width: 100%; height: 34px; font-size: 14px; }
.auth-note { margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 13px; text-align: center; }
.auth-footer { padding: 24px 16px; color: var(--text-subtle); font-size: 12px; text-align: center; }

/* 12. Responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric:nth-child(4) { border-left: 0; }
  .metric:nth-child(n+4) { border-top: 1px solid var(--border-muted); }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid > :first-child { grid-column: 1 / -1; }
  .dash-grid-2 > :first-child { grid-column: auto; }
  .header-search { display: none; }
}
@media (max-width: 720px) {
  .app-header { gap: 10px; padding: 0 12px; }
  .brand span:last-child { display: none; }
  .page { padding: 16px 16px 40px; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { border-left: 0; border-top: 1px solid var(--border-muted); }
  .metric:nth-child(-n+2) { border-top: 0; }
  .metric:nth-child(even) { border-left: 1px solid var(--border-muted); }
  .dash-grid, .form-grid { grid-template-columns: 1fr; }
  .input-search { max-width: none; flex-basis: 100%; }
}