/* ============================================================================
   Kirtanavali admin — design system
   Style: accent-ladder (design-taste-frontend app sheet, seed 36458869)
   Brand hue: #FF8216, the Flutter app's primaryOrange. The accent-ladder move:
   the full hue only on small marks (data, the active nav icon, the now-line);
   its pale tints carry every area. Primary actions are near-black, because
   #FF8216 is 2.48:1 on white and cannot legibly hold a white label.
   Two faces, each with one job: DM Sans for Latin and all figures,
   Noto Sans Gujarati for Gujarati content.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Gujarati:wght@400;500;600&display=swap');

/* ---------- tokens ---------- */
:root {
  /* Ground, surfaces and chrome sampled from the reference screenshots: a cool
     blue-grey page, white cards, a deep blue-slate sidebar. */
  --ground: #f2f5f9;
  --surface: #ffffff;
  --raised: #f1f4f8;
  --active: #e7ecf3;

  /* lines in three steps: card edge, row rule, control border */
  --border: #e1e5ec;
  --rule: #eef1f6;
  --control: #cdd4df;

  /* text in three tiers, every one at 4.5:1 or better on the ground */
  --text: #111725;          /* 16.4:1 on the ground */
  --muted: #5b6472;         /*  5.5:1 */
  --faint: #646d7d;         /*  4.9:1 on the ground — placeholders use this */

  /* The one hue. --accent is the brand mark: the logo tile, the avatar, the
     active nav's edge, the KPI glyphs, the data. It measures 3.9:1 on white,
     which carries a glyph or a 3px edge but never a word, so orange *text*
     and any orange fill behind a white label uses --accent-ink at 5.2:1. */
  --accent: #e34d1c;
  --accent-ink: #c43e16;
  --accent-50: #fff8f2;
  --accent-100: #fff2e3;
  --accent-200: #fcd9c2;

  /* a near-black primary; the accent stays on identity and data */
  --primary: #111725;
  --primary-ink: #ffffff;

  /* status: a pale tint with dark ink of the same hue */
  --positive: #247b50; --negative: #c4242a; --warning: #92400e;
  --pill-positive-bg: #dcfae5; --pill-positive-ink: #04250e;
  --pill-negative-bg: #ffedea; --pill-negative-ink: #831c1e;
  --pill-warning-bg: #fffbeb; --pill-warning-ink: #92400e;
  --pill-neutral-bg: #efedea; --pill-neutral-ink: #3d3d3d;
  --notice-border: #fde68a;

  /* The sidebar keeps its own ground in both themes: a deep blue-slate.
     White on it is 17.9:1 and the accent 4.6:1. */
  --nav-ground: #111725;
  --nav-rule: #1e2635;
  --nav-raised: #1a2234;
  --nav-active: #281d24;    /* the warm dark tint behind the active row */
  --nav-text: #ffffff;
  --nav-muted: #9aa4b5;     /*  7.2:1 */
  --nav-faint: #8b94a5;     /*  5.9:1 */
  --topbar: #fdfeff;
  --topbar-ink: #111725;

  /* chart ink: the one hue on the main data element, neutrals for the rest */
  --chart-1: var(--accent);
  --chart-muted: #cfd3d6;
  --grid: #e5e5e5;
  --axis-ink: var(--muted);

  /* type */
  /* Noto sits second so Latin glyphs come from DM Sans and Gujarati glyphs
     fall to Noto rather than an arbitrary OS face — this fixes Gujarati on
     every page, including the ones not yet converted. Converted markup also
     carries .guj / lang="gu" for the size and line-height step. */
  --font: "DM Sans", "Noto Sans Gujarati", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-guj: "Noto Sans Gujarati", "Shruti", sans-serif;
  --fs-title: 32px; --fs-section: 18px; --fs-kpi: 24px; --fs-body: 14px; --fs-small: 12px;

  /* space, radius, heights */
  --sidebar-width: 230px;
  --pad: 29px;              /* canvas gutter from the sidebar rule and the window */
  --gap: 16px;              /* one gutter, horizontal and vertical */
  --rail: 384px;
  --card-pad: 20px;
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-chip: 4px;
  --nav-row: 40px;
  --control-height: 32px;
  --row-height: 48px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 120ms; --t-hover: 150ms; --t-ui: 200ms;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---- compatibility aliases ----
     read from JS template strings (file-handler.js) and from inline style=
     attributes that still survive on unconverted pages. They are re-pointed
     at the new tokens and go when the last inline style goes. */
  color-scheme: light;
  --primary-hover: #000000;
  --bg-main: var(--ground);
  --bg-card: var(--surface);
  --text-main: var(--text);
  --text-muted: var(--muted);
  --glass-border: var(--border);
  --glass-shadow: none;
}

/* dark: true neutral darks, elevation by lightness. Not navy. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #111521;
  --surface: #161c29;
  --raised: #1b2231;
  --active: #212a3b;
  --border: #222b3b;
  --rule: #1c2432;
  --control: #39445a;
  --text: #ffffff;
  --muted: #8999ae;         /* 5.9:1 on the card */
  --faint: #7d8ca1;
  /* the orange lifts on dark, as it does in the reference */
  --accent: #f96d32;
  --accent-ink: #fb7f45;
  --accent-50: #1d1a1e;
  --accent-100: #36272a;
  --accent-200: #4a3330;
  --primary: #ffffff;
  --primary-ink: #111725;
  --positive: #3fc07a; --negative: #e5566f; --warning: #e5a93b;
  --pill-positive-bg: #14281d; --pill-positive-ink: #3fc07a;
  --pill-negative-bg: #2c1a20; --pill-negative-ink: #e5566f;
  --pill-warning-bg: #2b2414; --pill-warning-ink: #e5a93b;
  --pill-neutral-bg: #212a3b; --pill-neutral-ink: #ffffff;
  --notice-border: #3a2f14;
  --nav-ground: #0e121d;
  --nav-rule: #1a2131;
  --nav-raised: #161d2c;
  --nav-active: #36272a;
  --nav-muted: #8999ae;
  --nav-faint: #7d8ca1;
  --topbar: #111622;
  --topbar-ink: #ffffff;
  --chart-muted: #3d4756;
  --grid: #222b3b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #111521;
    --surface: #161c29;
    --raised: #1b2231;
    --active: #212a3b;
    --border: #222b3b;
    --rule: #1c2432;
    --control: #39445a;
    --text: #ffffff;
    --muted: #8999ae;         /* 5.9:1 on the card */
    --faint: #7d8ca1;
    /* the orange lifts on dark, as it does in the reference */
    --accent: #f96d32;
    --accent-ink: #fb7f45;
    --accent-50: #1d1a1e;
    --accent-100: #36272a;
    --accent-200: #4a3330;
    --primary: #ffffff;
    --primary-ink: #111725;
    --positive: #3fc07a; --negative: #e5566f; --warning: #e5a93b;
    --pill-positive-bg: #14281d; --pill-positive-ink: #3fc07a;
    --pill-negative-bg: #2c1a20; --pill-negative-ink: #e5566f;
    --pill-warning-bg: #2b2414; --pill-warning-ink: #e5a93b;
    --pill-neutral-bg: #212a3b; --pill-neutral-ink: #ffffff;
    --notice-border: #3a2f14;
    --nav-ground: #0e121d;
    --nav-rule: #1a2131;
    --nav-raised: #161d2c;
    --nav-active: #36272a;
    --nav-muted: #8999ae;
    --nav-faint: #7d8ca1;
    --topbar: #111622;
    --topbar-ink: #ffffff;
    --chart-muted: #3d4756;
    --grid: #222b3b;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: var(--fs-body)/20px var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* figures are tabular wherever they are compared or updated */
.num, .kpi-value, table, .stat-value { font-variant-numeric: tabular-nums; }
th.num, td.num, th.n, td.n { text-align: right; }

/* ---------- Gujarati ----------
   The panel's content language. It gets its own face, its own size step and a
   looser line so the matrae are never clipped by a Latin face's metrics. */
.guj, [lang="gu"] {
  font-family: var(--font-guj);
  font-size: 1.07em;
  line-height: 1.7;
}
h1 .guj, h2 .guj, .guj h1, .guj h2, .kpi-value .guj { line-height: 1.45; }
input.guj, textarea.guj, select.guj { line-height: 1.6; }

/* ============================================================================
   Shell — a 230px dark sidebar beside a light canvas, divided by one 1px rule.
   No desktop top bar: with the sidebar holding the mark, the scope and the user
   row, a top bar had nothing real left to carry (the panel has no global
   search), and no top bar is the study's default. One appears on the phone,
   where the nav folds into it.
   ============================================================================ */
.app-container, .app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  width: auto;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 12px 12px;
  overflow-y: auto;
  background: var(--nav-ground);
  border-right: 1px solid var(--nav-rule);
  backdrop-filter: none; /* taste-skill-ignore: removes the old glass */
  flex-shrink: 0;
}

/* the product's mark: the Gujarati letterform on an orange tile, its name,
   and the scope it is scoped to */
.brand {
  display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 8px;
  margin: -20px -12px 12px;
  padding-left: 20px;
  border-bottom: 1px solid var(--nav-rule);
}
.brand .mark {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font-guj);
  font-size: 22px; line-height: 1;
  padding-bottom: 2px;
}
.brand .wordmark { display: block; font-size: 15px; font-weight: 600; color: var(--nav-text); letter-spacing: -0.01em; }
.brand .scope {
  display: block; margin-top: 1px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--nav-faint); text-transform: uppercase;
}

.sidebar .group-label {
  margin: 18px 8px 4px;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--nav-faint);
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--nav-row);
  padding: 0 8px;
  border-radius: 8px;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--nav-muted);
  background: transparent;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.nav-item svg, .nav-item i { width: 16px; height: 16px; flex: none; stroke-width: 1.5; }
.nav-item:hover { background: var(--nav-raised); color: var(--nav-text); }
/* on dark chrome the active item is marked by brightness; the one hue lands on
   its icon alone — no coloured fill, no left bar */
.nav-item.active, .nav-item[aria-current="page"] {
  position: relative;
  background: var(--nav-active);
  color: var(--nav-text);
  font-weight: 500;
}
.nav-item.active::before, .nav-item[aria-current="page"]::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav-item.active svg, .nav-item[aria-current="page"] svg { color: var(--accent); }
/* a count only on a queue that needs action */
.nav-item .count {
  margin-left: auto;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--nav-faint);
}
.nav-item.active .count { color: var(--nav-muted); }

.sidebar .bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--nav-rule); }
.sidebar .user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.sidebar .user-row .who { min-width: 0; }
.sidebar .user-row .name { display: block; font-size: var(--fs-body); color: var(--nav-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .user-row .role { display: block; font-size: var(--fs-small); color: var(--nav-faint); }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--nav-active); color: var(--nav-text);
  font-size: var(--fs-small); font-weight: 500;
}

/* the canvas */
.main-content, .canvas {
  min-width: 0;
  padding: var(--pad);
  background: var(--ground);
}
/* a page with the top bar keeps .main-content flush and pads the inner canvas,
   so the bar spans the full width without negative margins */
.main-content.has-topbar { padding: 0; display: flex; flex-direction: column; }
.main-content.has-topbar > .canvas { flex: 1; }

/* ---- neutralise the legacy shell ----
   style.css caps .app-container at 100vh and scrolls .main-content inside it,
   which clips the page and defeats the sticky sidebar. These three lines undo
   that; they go with style.css itself. */
.app-container { width: auto; height: auto; }
.main-content { overflow-y: visible; }
.glass-card {
  backdrop-filter: none; /* taste-skill-ignore: removes the old glass */ -webkit-backdrop-filter: none; /* taste-skill-ignore: removes the old glass */
  border-radius: var(--radius-card);
  box-shadow: none; /* taste-skill-ignore */
  animation: none;
}

/* ---- the top bar ----
   It carries the sidebar collapse, the theme toggle and the account menu, so
   the sidebar holds only navigation. It is sticky and spans the canvas. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  height: 64px;
  padding: 0 var(--pad);
  background: var(--topbar);
  border-bottom: 1px solid var(--border);
  color: var(--topbar-ink);
}
.topbar .spacer { flex: 1; }
.topbar .here { display: none; }
.menu-toggle { display: none; }
.sidebar .close-menu { display: none; }

/* square, quiet, bordered: the collapse and the theme toggle share one shape */
.bar-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--muted);
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.bar-btn:hover { background: var(--raised); color: var(--text); }
.bar-btn svg, .bar-btn i { width: 18px; height: 18px; }

/* the account menu: an orange identity mark, the name, and a disclosure */
.user-menu { position: relative; }
.user-menu > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  cursor: pointer; list-style: none;
  transition: background-color var(--t-hover) ease;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--raised); }
.user-menu .name { font-weight: 500; color: var(--text); white-space: nowrap; }
.user-menu .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.user-menu[open] .chev { transform: rotate(180deg); }
.user-menu:not([open]) .menu { display: none; }
.user-menu .menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(17, 23, 37, 0.16);
  z-index: 40;
}
.user-menu .menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.user-menu .menu .who b { display: block; font-weight: 500; }
.user-menu .menu .who span { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.user-menu .menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--text);
  transition: background-color var(--t-hover) ease;
}
.user-menu .menu a:hover { background: var(--raised); }
.user-menu .menu a svg, .user-menu .menu a i { width: 16px; height: 16px; color: var(--muted); }
.user-menu .menu a.danger, .user-menu .menu a.danger svg { color: var(--negative); }

/* the identity mark, in the brand orange */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #ffffff;
  font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.01em;
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--fs-small); }

/* ---------- page head ---------- */
.page-head, .header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 24px;
  background: none;
  border: 0;
  padding: 0;
}
.page-head h1, .header h1 {
  font-size: var(--fs-title);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.page-head .sub, .header .sub {
  margin-top: 6px;
  font-size: 15px;
  color: var(--muted);
}
.page-head .actions { display: flex; align-items: center; gap: 8px; flex: none; }
.stamp { color: var(--faint); font-size: var(--fs-small); }

/* ---------- KPI strip: one container split by 1px dividers.
   No icons, no tinted squares, no sparklines. ---------- */
/* KPIs as peer cards, each with its glyph on a pale tint of the one hue.
   This is the reference screenshots' arrangement. */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
  background: none;
  border: 0;
  margin-bottom: var(--gap);
}
.kpi-strip .kpi {
  display: flex; align-items: center; gap: 14px;
  padding: 18px var(--card-pad);
  min-width: 0;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.kpi-strip .kpi + .kpi { border-left: 1px solid var(--border); }
.kpi-strip .kpi .kpi-body { min-width: 0; }
.kpi-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-100);
  color: var(--accent);
}
.kpi-icon svg, .kpi-icon i { width: 20px; height: 20px; }
/* the card that leads carries the hue on its edge, as the reference does */
.kpi-strip .kpi.lead { border-color: var(--accent); }
.kpi-strip a.kpi { transition: background-color var(--t-hover) ease; }
.kpi-strip a.kpi:hover { background: var(--raised); }
.kpi-strip .kpi-label {
  font-size: var(--fs-body); color: var(--muted);
  text-transform: none; letter-spacing: 0;   /* style.css uppercases its own .kpi-label */
  margin: 0;
}
.kpi-strip .kpi-value {
  display: block;
  margin-top: 2px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* the figure that answers the screen's question leads; the rest stay siblings */
.kpi-strip .kpi.lead .kpi-value { font-size: 28px; }
.kpi-strip .kpi-value small { font-size: 0.55em; font-weight: 400; color: var(--muted); margin-left: 2px; }
.kpi-strip .kpi-note {
  display: block; margin-top: 4px;
  font-size: var(--fs-small); color: var(--faint);
  text-transform: none; letter-spacing: 0;
}

/* ---------- panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-head h2 {
  font-size: var(--fs-section);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.panel-head .meta { font-size: var(--fs-small); color: var(--faint); white-space: nowrap; }
.panel-foot { margin-top: auto; padding-top: 14px; }

/* a link at a panel's head or foot */
.card-link {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0; border: 0; background: none;
  color: var(--text); font-size: var(--fs-body); font-weight: 500;
  cursor: pointer; text-underline-offset: 3px; white-space: nowrap; flex: none;
}
.card-link::after {
  content: ""; width: 12px; height: 12px; flex: none;
  background: currentColor;
  -webkit-mask: var(--chevron) center / 12px no-repeat;
  mask: var(--chevron) center / 12px no-repeat;
}
.card-link:hover { text-decoration: underline; }

/* ---------- grid ---------- */
.grid { display: grid; gap: var(--gap); }
.grid.top { align-items: start; }
.grid-main-rail { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 24px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.stack { display: grid; gap: var(--gap); align-content: start; }

/* ---------- list rows inside panels ---------- */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  min-height: 45px; padding: 9px 0;
  color: inherit;
  transition: background-color var(--t-hover) ease;
}
.row + .row { border-top: 1px solid var(--rule); }
a.row:hover { background: var(--raised); }
.row-text { min-width: 0; flex: 1; }
.row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-time { flex: none; font-size: var(--fs-small); color: var(--faint); font-variant-numeric: tabular-nums; }
.row-no {
  flex: none; display: grid; place-items: center;
  min-width: 26px; height: 22px; padding: 0 5px;
  border-radius: var(--radius-chip);
  background: var(--raised); color: var(--muted);
  font-size: var(--fs-small); font-variant-numeric: tabular-nums;
}
/* a row that needs doing carries its action in one fixed trailing column */
.row-action { flex: none; margin-left: 4px; }

/* ---------- tables: rules and alignment, no zebra, no header band ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.table-wrap > table { border-radius: inherit; }
table.table { width: 100%; border-collapse: collapse; }
.table th {
  height: 38px; padding: 0 14px;
  text-align: left; vertical-align: middle;
  font-size: var(--fs-small); font-weight: 400;
  color: var(--muted);
  background: none;
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: 14px;
  border-bottom: 1px solid var(--rule);
  border-top: 0;
  vertical-align: middle;
  font-size: var(--fs-body);
}
.table tbody tr:last-child td { border-bottom: 0; }
/* numeric headers sit flush with their values: .table th's text-align would
   otherwise win over the generic th.num by order */
.table th.num, .table td.num, .table th.n, .table td.n { text-align: right; }
.table tbody tr { transition: background-color var(--t-hover) ease; }
.table tbody tr:hover { background: var(--raised); }
.table tbody tr[aria-selected="true"] td { background: var(--active); }
/* the identity column takes the most width and is never the one truncated */
.table .col-id { width: 38%; }
.table .col-tight { width: 1%; white-space: nowrap; }
.table td .sub { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--muted); }
/* only the identity and the key number take the primary ink */
.table td.quiet, .table .quiet { color: var(--muted); }
.dash { color: var(--faint); }
.table--dense td { padding: 10px 12px; }
.table--dense th { height: 34px; padding: 0 12px; }
.table-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: var(--fs-small); color: var(--muted); }

/* ---------- status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: var(--fs-small); font-weight: 500;
  background: var(--pill-neutral-bg); color: var(--pill-neutral-ink);
  white-space: nowrap; flex: none;
}
.pill--pending { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.pill--processing { background: var(--accent-100); color: var(--accent-ink); }
.pill--done { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pill--invalid { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }
.pill--danger { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pill--live { background: var(--accent-100); color: var(--accent-ink); }
.pill--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- buttons: one base, four variants ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-height); padding: 0 12px;
  border: 1px solid var(--control); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-body); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn:hover { background: var(--raised); }
.btn:active { transform: translateY(1px); }
.btn svg, .btn i { width: 15px; height: 15px; flex: none; }
.btn--primary {
  background: var(--primary); color: var(--primary-ink);
  border-color: transparent;
}
.btn--primary:hover { background: var(--primary); filter: brightness(1.25); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--raised); }
.btn--danger { background: transparent; border-color: var(--control); color: var(--negative); }
.btn--danger:hover { background: var(--pill-negative-bg); }
.btn--lg { height: 40px; padding: 0 16px; }
.btn--full { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 1; color: var(--faint); background: var(--raised); cursor: not-allowed; }

/* row actions: one fixed trailing column, same pitch on every row */
.row-actions { display: inline-flex; align-items: center; gap: 4px; }
.icon-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--muted);
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.icon-btn:hover { background: var(--raised); color: var(--text); }
.icon-btn svg, .icon-btn i { width: 16px; height: 16px; }
.icon-btn--danger:hover { background: var(--pill-negative-bg); color: var(--negative); }

/* ---------- fields and forms ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  backdrop-filter: none; /* taste-skill-ignore: removes the old glass */
  box-shadow: none;
}
.field { display: grid; gap: 8px; margin-bottom: var(--gap); }
.field > label { font-size: var(--fs-body); font-weight: 500; color: var(--text); }
.field .req { color: var(--negative); }
.field .hint { font-size: var(--fs-small); color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="url"], .field input[type="date"],
.field input[type="time"], .field input[type="datetime-local"], .field select, .field textarea,
.input, select.input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--control);
  border-radius: var(--radius-control);
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-100);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field select, select.input {
  appearance: none;
  padding-right: 34px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--negative); }
.field .field-error { font-size: var(--fs-small); color: var(--negative); }
.field input[disabled], .field select[disabled], .field textarea[disabled] { background: var(--raised); color: var(--faint); }

/* the form grids that were inline, named */
.form-grid { display: grid; gap: var(--gap); }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--pad-head { grid-template-columns: 1fr 2fr 2fr 2fr; }
.form-grid--repeater { grid-template-columns: 1fr 120px 2fr 50px; align-items: end; }
.form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.form-section > h2 { font-size: var(--fs-section); font-weight: 600; margin-bottom: 4px; }
.form-section > .sub { font-size: var(--fs-body); color: var(--muted); margin-bottom: 20px; }
.form-foot { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }

/* a repeater row sits in a quiet well, not a bordered box */
.repeater-row { background: var(--raised); border-radius: var(--radius-control); padding: 16px; margin-bottom: 12px; }

/* toggles */
.switch {
  appearance: none; flex: none;
  width: 32px; height: 20px; border-radius: 999px;
  background: var(--control); position: relative; cursor: pointer;
  transition: background-color var(--t-ui) ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform var(--t-ui) var(--ease-out);
}
.switch:checked { background: var(--positive); }
.switch:checked::after { transform: translateX(12px); }

/* ---------- toolbar, search, tabs ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: var(--gap); flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar .count { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.search { position: relative; width: 292px; max-width: 100%; }
.search svg, .search i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--faint); pointer-events: none;
}
.search input {
  width: 100%; height: var(--control-height);
  padding: 0 12px 0 34px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--control); border-radius: var(--radius-control);
}
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }
.search input::placeholder { color: var(--faint); }

.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: var(--gap); }
.tabs a, .tabs button {
  position: relative; padding: 10px 0;
  border: 0; background: none; cursor: pointer;
  font-size: var(--fs-body); color: var(--muted);
  transition: color var(--t-hover) ease;
}
.tabs a:hover, .tabs button:hover { color: var(--text); }
.tabs .active, .tabs [aria-selected="true"] { color: var(--text); font-weight: 500; }
.tabs .active::after, .tabs [aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text);
}
.segmented { display: inline-flex; width: max-content; max-width: 100%; padding: 2px; border-radius: 8px; background: var(--raised); }
.segmented a, .segmented button {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 10px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--muted);
  font-size: var(--fs-body); cursor: pointer;
}
.segmented .active, .segmented [aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 500; }

/* filter chips */
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 9px;
  border-radius: var(--radius-chip);
  background: var(--accent-50); color: var(--accent-ink);
  font-size: var(--fs-small); white-space: nowrap;
}
.chip a, .chip button { color: inherit; border: 0; background: none; cursor: pointer; line-height: 1; }

/* ---------- alerts: one dialect ---------- */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-control);
  margin-bottom: var(--gap);
  font-size: var(--fs-body);
  background: var(--pill-neutral-bg); color: var(--pill-neutral-ink);
  border: 1px solid transparent;
}
.alert svg, .alert i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.alert--success, .alert-success { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.alert--danger, .alert-danger { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.alert--notice { background: var(--pill-warning-bg); color: var(--pill-warning-ink); border-color: var(--notice-border); }

/* ---------- empty, zero and loading states ----------
   an empty block keeps its frame and its header and says one real thing */
.empty {
  display: grid; place-items: center; gap: 6px;
  min-height: 84px; padding: 18px;
  border: 1px dashed var(--control);
  border-radius: var(--radius-control);
  color: var(--muted); text-align: center;
  grid-column: 1 / -1;
}
.empty svg, .empty i { width: 18px; height: 18px; color: var(--faint); }
.empty .next { font-size: var(--fs-small); color: var(--faint); }
td > .empty, .rows .empty { width: 100%; }
.skeleton { background: var(--raised); border-radius: 4px; }

/* ---------- pagination: states its range ---------- */
.pager { display: flex; align-items: center; gap: 10px; margin-top: var(--gap); flex-wrap: wrap; }
.pager .range { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.pager .pages { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.page-link {
  display: grid; place-items: center;
  min-width: var(--control-height); height: var(--control-height);
  padding: 0 9px;
  border: 1px solid var(--control); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-body); font-variant-numeric: tabular-nums;
  transition: background-color var(--t-hover) ease;
}
.page-link:hover { background: var(--raised); }
.page-link.active { background: var(--primary); color: var(--primary-ink); border-color: transparent; font-weight: 500; }
.page-link.disabled { color: var(--faint); background: var(--surface); border-color: var(--border); pointer-events: none; }
.page-link.ellipsis { border-color: transparent; background: none; color: var(--faint); }

/* ---------- modal: one system. A dialog floats, so it may carry a shadow. --- */
.modal-overlay, .kv-modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; place-items: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: none; /* taste-skill-ignore: removes the old glass */
}
.modal-overlay.active, .kv-modal-overlay.active, .modal-overlay[open], .kv-modal-overlay.open { display: grid; }
.modal-card, .kv-modal {
  width: 100%; max-width: 440px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.18);
}
.kv-modal { max-width: 680px; padding: 0; }
.kv-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  background: none;
}
.kv-modal-head h3 { font-size: var(--fs-section); font-weight: 600; }
.kv-close { border: 0; background: none; color: var(--muted); cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-control); }
.kv-close:hover { background: var(--raised); color: var(--text); }
.kv-modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
.modal-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--negative); margin-bottom: 12px; }
.modal-icon svg, .modal-icon i { width: 24px; height: 24px; }
.modal-title { font-size: var(--fs-section); font-weight: 600; margin-bottom: 6px; }
.modal-message { color: var(--muted); margin-bottom: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-btn {
  height: var(--control-height); padding: 0 14px;
  border: 1px solid var(--control); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-body); font-weight: 500; cursor: pointer;
}
.modal-btn:hover { background: var(--raised); }
.btn-confirm { background: var(--negative); color: #fff; border-color: transparent; }
.btn-confirm:hover { background: var(--negative); filter: brightness(1.1); }

/* ============================================================================
   The satsang day strip — this product's own element.
   Today's live category windows on one day axis, with a 1px now-line in the
   one hue. Live windows are filled; what is scheduled by date sits beside it.
   ============================================================================ */
.daystrip { display: grid; gap: 10px; min-width: 0; }
.daystrip-track { overflow: hidden; }
.daystrip-axis {
  position: relative;
  height: 18px;
  margin-left: var(--daystrip-label, 164px);
  border-bottom: 1px solid var(--rule);
}
.daystrip-axis span {
  position: absolute; top: 0;
  font-size: var(--fs-small); color: var(--faint);
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  white-space: nowrap;
}
.daystrip-axis span:first-child { transform: none; }
.daystrip-axis span:last-child { transform: translateX(-100%); }
.daystrip-lane { display: grid; grid-template-columns: var(--daystrip-label, 164px) minmax(0, 1fr); align-items: center; gap: 0; min-height: 32px; min-width: 0; }
.daystrip-name { min-width: 0; padding-right: 12px; }
.daystrip-name .n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daystrip-name .when { display: none; font-size: var(--fs-small); color: var(--accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.daystrip-name .w { display: block; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daystrip-track { position: relative; height: 24px; background: var(--rule); border-radius: var(--radius-chip); }
/* the ladder: the area is the hue's pale tint, and the full hue is the small
   mark at the window's start. A full-strength bar across the whole day would
   spend the screen's entire colour budget on one block. */
.daystrip-bar {
  position: absolute; top: 0; height: 24px;
  border-radius: var(--radius-chip);
  background: var(--accent-100);
  border-left: 3px solid var(--accent);
  display: flex; align-items: center;
  padding: 0 7px;
  font-size: var(--fs-small); font-weight: 500;
  color: var(--accent-ink);
  overflow: hidden; white-space: nowrap;
}
.daystrip-bar--planned { background: transparent; border: 1px dashed var(--accent-200); border-left-width: 3px; border-left-style: solid; }
/* the line spans its lane and bridges the gap to the next, so it reads as one
   continuous mark down the strip */
.daystrip-now { position: absolute; top: -5px; bottom: -5px; width: 1px; background: var(--accent); z-index: 2; }
.daystrip-lane:last-of-type .daystrip-now { bottom: 0; }
/* the legend's swatch is the mark itself, scaled down */
.daystrip-legend { display: flex; align-items: center; gap: 14px; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
.daystrip-legend b { display: inline-block; width: 1px; height: 11px; background: var(--accent); margin-right: 6px; vertical-align: -1px; }

/* ---------- quick actions: links, in the rail ---------- */
.quick { display: grid; gap: 2px; }
.quick a {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 10px; margin: 0 -10px;
  border-radius: var(--radius-control);
  color: var(--text);
  transition: background-color var(--t-hover) ease;
}
.quick a:hover { background: var(--raised); }
.quick a svg, .quick a i { width: 16px; height: 16px; flex: none; color: var(--muted); }
.quick a:hover svg { color: var(--accent); }

/* ---------- a progress track, filled at its true ratio ---------- */
.track { height: 8px; border-radius: 999px; background: var(--accent-100); overflow: hidden; }
.track > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ---------- the theme toggle ----------
   It lives in the top bar and takes .bar-btn's shape; only the icon swap
   belongs to it. (It used to be a full-width sidebar row, and that
   width: 100% made it eat the whole bar.) */
:root[data-theme="dark"] .theme-toggle .i-dark, .theme-toggle .i-light { display: none; }
:root[data-theme="dark"] .theme-toggle .i-light { display: block; }
.theme-toggle .i-dark { display: block; }

/* ============================================================================
   Responsive: the tablet is its own band, and on the phone the nav folds.
   ============================================================================ */
@media (max-width: 1240px) {
  :root { --rail: 320px; --pad: 24px; }
}
@media (max-width: 1100px) {
  :root { --sidebar-width: 100%; --pad: 20px; }
  .app-container, .app { grid-template-columns: minmax(0, 1fr); }

  /* the sidebar folds into a sheet, so the bar gains a menu button and the
     page's name; it keeps the same surface it has on desktop */
  .topbar { height: 56px; }
  .topbar .here {
    display: block; font-size: 15px; font-weight: 600;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar .collapse-toggle { display: none; }
  .topbar .spacer { flex: 1; }
  /* the name is read from the menu on a phone */
  .user-menu > summary .name { display: none; }
  .user-menu > summary { padding: 4px; }
  .menu-toggle {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex: none; margin-left: -8px;
    border: 0; border-radius: var(--radius-control);
    background: transparent; color: var(--nav-text); cursor: pointer;
  }
  .menu-toggle svg, .menu-toggle i { width: 20px; height: 20px; }

  .sidebar {
    position: fixed; inset: 0; z-index: 40;
    width: 100%; height: 100%;
    border-right: 0;
    transform: translateX(-100%);
    transition: transform var(--t-ui) var(--ease-out);
  }
  .sidebar.open { transform: none; }
  .sidebar .close-menu { display: grid; position: absolute; top: 18px; right: 14px; }

  /* the tablet is its own band: a six-column table does not fit here, so the
     two columns that are not read at a glance fold away and four remain.
     Below 640px the table becomes two-line rows and they return as labels. */
  .table--fold .col-fold-hide { display: none; }

  .grid-main-rail { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--pad-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--repeater { grid-template-columns: 1fr 1fr; }
  .page-head, .header { flex-wrap: wrap; align-items: flex-start; }
  :root { --fs-title: 26px; }
}
@media (max-width: 760px) {
  /* the day strip is its own composition here: the category sits above a
     full-width track, and every other hour label is dropped so the axis stays
     readable instead of collapsing into one smear */
  .daystrip-lane { grid-template-columns: minmax(0, 1fr); gap: 4px; min-height: 0; margin-bottom: 12px; }
  .daystrip-name { padding-right: 0; display: flex; align-items: baseline; gap: 8px; }
  .daystrip-name .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .daystrip-name .w { flex: none; }
  /* the bar is too narrow here to hold its own label, so the window is read
     beside the name and the bar carries only its length */
  .daystrip-name .when { display: block; flex: none; }
  .daystrip-bar .bar-label { display: none; }
  .daystrip-bar { padding: 0; }
  .daystrip-axis { margin-left: 0; }
  .daystrip-axis span:nth-child(even) { display: none; }
  .daystrip-axis span { font-size: 11px; }

  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip .kpi { padding: 14px; gap: 10px; }
  .kpi-icon { width: 38px; height: 38px; border-radius: 10px; }
  /* an odd count leaves no half-empty row */
  .kpi-strip .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .daystrip-lane { --daystrip-label: 110px; }
  .daystrip-axis { margin-left: 110px; }
}
@media (max-width: 640px) {
  :root { --pad: 16px; --fs-title: 24px; }
  .search { width: 100%; }
  .toolbar > * { flex: 1 1 auto; }
  .form-grid--2, .form-grid--3, .form-grid--pad-head, .form-grid--repeater { grid-template-columns: minmax(0, 1fr); }
  .segmented { display: flex; width: 100%; }
  .segmented a, .segmented button { flex: 1; justify-content: center; }

  /* a table becomes a list of two-line rows; no field is dropped */
  .table--fold thead { display: none; }
  .table--fold tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .table--fold tbody tr:last-child { border-bottom: 0; }
  .table--fold td { display: block; padding: 0; border: 0; }
  .table--fold td.col-fold-meta { grid-column: 1; font-size: var(--fs-small); color: var(--muted); }
  /* a folded field keeps its name, so a bare number is never left unexplained */
  .table--fold td.col-fold-meta[data-label]::before { content: attr(data-label) " "; color: var(--faint); }
  .table--fold td.col-fold-meta .num, .table--fold td.col-fold-meta.num { text-align: left; }
  .table--fold td.col-fold-aside { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
  .table--fold td.col-fold-hide { display: none; }
  .pager .pages { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---------- print ---------- */
@media print {
  .sidebar, .topbar, .toolbar, .pager, .page-head .actions { display: none !important; }
  .app-container, .app { grid-template-columns: 1fr; }
  .panel, .table-wrap { border-color: #ccc; }
}

/* ============================================================================
   List pages — the pieces the kirtan list needs, re-pointed at the tokens.
   The class names are kept so each page's markup and JS keep working.
   ============================================================================ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the filter panel: a quiet well that opens under the toolbar */
.adv-search { margin-bottom: var(--gap); }
.adv-panel {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.adv-panel.open { display: grid; }
.adv-panel .field { margin-bottom: 0; gap: 6px; }
.adv-panel .field > label { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
/* the toggle marks an applied filter with one small dot in the hue */
.adv-toggle { position: relative; }
.adv-toggle.active, .adv-toggle.open { background: var(--raised); }
.adv-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* the identity cell: one fixed media slot so every title starts on one edge */
.kirtan-row { cursor: pointer; }
.kirtan-title-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kirtan-title-cell .t { min-width: 0; }
.kirtan-thumb {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-chip);
  object-fit: cover;
  background: var(--raised);
}
.kirtan-thumb-empty { display: grid; place-items: center; color: var(--faint); }
.kirtan-thumb-empty svg, .kirtan-thumb-empty i { width: 16px; height: 16px; }
.kirtan-title-guj {
  color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kirtan-title-eng, .kirtan-match {
  font-size: var(--fs-small); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kirtan-match { color: var(--accent-ink); }
.table td .dash { font-style: normal; }

/* the pad count's audio companion: two measures in one cell, not two columns */
.pad-audio {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  font-size: var(--fs-small); color: var(--muted);
}
.pad-audio svg, .pad-audio i { width: 12px; height: 12px; }

/* usage: three small figures on one right edge, with a thin grey sparkline.
   It is not the screen's main series, so it stays 3px and neutral. */
.mini-stats {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px;
  color: var(--text);
}
.mini-stat {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-small); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mini-stat b { font-weight: 500; color: var(--text); }
.mini-stat svg, .mini-stat i { width: 12px; height: 12px; color: var(--faint); }
/* a real zero prints as a zero, in grey */
.mini-stat.zero b { color: var(--faint); font-weight: 400; }
.mini-spark {
  display: inline-flex; align-items: flex-end; gap: 2px;
  width: 46px; height: 16px; flex: none;
}
.mini-spark i {
  flex: 1; min-height: 2px;
  background: var(--chart-muted);
  border-radius: 1px;
}
.mini-spark.flat { border-bottom: 2px solid var(--chart-muted); height: 16px; }
.mini-spark i:last-child { background: var(--accent); }

@media (max-width: 640px) {
  .adv-panel { grid-template-columns: minmax(0, 1fr); }
  .kirtan-thumb { width: 32px; height: 32px; }
}

/* ============================================================================
   Third-party widgets, themed from the tokens so they follow light and dark.
   These lived as a 147-line block duplicated in add_pad.php and edit_pad.php.
   ============================================================================ */

/* CKEditor 4 — the lyrics editor */
.cke_chrome {
  border: 1px solid var(--control) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.cke_top, .cke_bottom {
  background: var(--raised) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.cke_contents { background: var(--surface) !important; min-height: 320px !important; }
.cke_editable { color: var(--text); background: var(--surface); }
/* the toolbar's own icons are a sprite, so on dark it is lifted rather than
   recoloured; a filter keeps them legible without replacing the sprite */
:root[data-theme="dark"] .cke_button_icon,
:root[data-theme="dark"] .cke_combo_open { filter: invert(1) hue-rotate(180deg); }

/* Select2 — the target pickers */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
  background: var(--surface) !important;
  border: 1px solid var(--control) !important;
  border-radius: var(--radius-control) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; line-height: 38px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.18) !important;
}
.select2-container--default .select2-results__option { color: var(--text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent-100) !important; color: var(--accent-ink) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--accent-50) !important;
  border: 1px solid var(--accent-200) !important;
  color: var(--accent-ink) !important;
  border-radius: var(--radius-chip) !important;
}
.select2-container--default .select2-search--inline .select2-search__field { color: var(--text) !important; }

/* the repeater rows inside the pad form */
#audio-repeater .form-grid--repeater, #video-repeater .form-grid--repeater {
  background: var(--raised);
  border-radius: var(--radius-control);
  padding: 14px;
  margin-bottom: 12px;
}
#audio-repeater .field, #video-repeater .field { margin-bottom: 0; }

/* ---- the pad form's word-meaning modal ----
   This lived as a <style> block duplicated verbatim in add_pad.php and
   edit_pad.php. One definition now serves both. The page's JS toggles
   .modal with style.display = 'block', so the default stays display:none
   and nothing here may fight an inline display. */
.modal {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  width: 100%; height: 100%;
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: none; /* taste-skill-ignore: removes the old glass */
  overflow-y: auto;
}
.modal-content {
  position: relative;
  width: 90%; max-width: 600px;
  margin: 5vh auto;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.18);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: var(--fs-section); font-weight: 600; }
.modal-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); }
.tab-btn {
  flex: 1; padding: 8px 10px;
  border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--muted);
  font-size: var(--fs-body); font-weight: 500; cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.tab-btn:hover { background: var(--raised); color: var(--text); }
.tab-btn.active { background: var(--active); color: var(--text); }
.tab-content { display: none; padding: 20px; }
.tab-content.active { display: block; }

.search-results { max-height: 300px; overflow-y: auto; margin-top: 12px; }
.search-item {
  padding: 10px 12px;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--t-hover) ease;
}
.search-item + .search-item { border-top: 1px solid var(--rule); border-radius: 0; }
.search-item:hover { background: var(--raised); }

.meanings-table { width: 100%; border-collapse: collapse; }
.meanings-table th {
  height: 34px; padding: 0 10px;
  text-align: left; font-size: var(--fs-small); font-weight: 400;
  color: var(--muted); text-transform: none; letter-spacing: 0;
  background: none;
  border-bottom: 1px solid var(--border);
}
.meanings-table td { padding: 10px; border-bottom: 1px solid var(--rule); font-size: var(--fs-body); }
.meanings-table tr:last-child td { border-bottom: 0; }

/* "add another row" in a repeater: an outlined full-width control, not a
   coloured link (the old hard-coded green on white measured 2.5:1) */
.btn--add {
  border-style: dashed;
  color: var(--text);          /* the dashed edge marks it, not a grey that
                                  drops under 4.5:1 on a dark panel */
  height: 40px;
  margin-top: 8px;
}
.btn--add:hover { border-style: solid; background: var(--raised); }

/* ---- legacy button classes, mapped onto the one button system ----
   Pages not yet converted still emit .btn-primary, .hdr-btn and .mini-btn.
   Re-pointing them here keeps the whole panel consistent during the
   migration and, more importantly, keeps them legible in dark mode: the old
   rule painted var(--primary) behind white text, which is white on white
   once --primary inverts. These go when the last page is converted. */
.btn-primary, .hdr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-height); min-width: 0; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--primary); color: var(--primary-ink);
  font-size: var(--fs-body); font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: none;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn-primary:hover, .hdr-btn:hover { transform: none; filter: brightness(1.25); }
.btn-primary:active, .hdr-btn:active { transform: translateY(1px); }
.btn-primary svg, .btn-primary i, .hdr-btn svg, .hdr-btn i { width: 15px; height: 15px; flex: none; }
.btn-full { width: 100%; }
.mini-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--control); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-small); cursor: pointer;
}
.mini-btn:hover { background: var(--raised); }

/* CKEditor's toolbar sets its own #484848 labels and white combo buttons,
   which is 1.7:1 once the surface goes dark. Point them at the tokens. */
.cke_combo_text, .cke_combo_label, .cke_button_label, .cke_toolbar_text,
.cke_path_item, .cke_path_empty {
  color: var(--muted) !important;
}
.cke_combo_button, .cke_combo_off a.cke_combo_button {
  background: var(--surface) !important;
  border-color: var(--control) !important;
  box-shadow: none !important;
}
.cke_combo_on a.cke_combo_button, .cke_combo_button:hover { background: var(--raised) !important; }
.cke_toolgroup, .cke_button_off:hover, .cke_button_on {
  background: var(--surface) !important;
  border-color: var(--control) !important;
  box-shadow: none !important;
}
.cke_button_on { background: var(--active) !important; }
.cke_panel { background: var(--surface) !important; border-color: var(--border) !important; }
.cke_panel_list a, .cke_panel_listItem a { color: var(--text) !important; }

/* file inputs: the button follows the control system instead of the browser's */
.field input[type="file"], input[type="file"].input {
  width: 100%;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: var(--fs-small);
}
.field input[type="file"]::file-selector-button,
input[type="file"].input::file-selector-button {
  margin-right: 10px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--control); border-radius: var(--radius-chip);
  background: var(--raised); color: var(--text);
  font: inherit; font-weight: 500; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--active); }
/* a checkbox beside a label reads as one control */
.field input[type="checkbox"], .field input[type="radio"] { width: auto; min-height: 0; accent-color: var(--accent); }

/* "delete the current image" sits beside its preview as a real checkbox pair */
.delete-image-label {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0;
  font-size: var(--fs-small); font-weight: 400; color: var(--negative);
  cursor: pointer;
}

/* ============================================================================
   Interim: pages not yet converted.
   style.css was written for a dark ground, so a few of its rules read as
   broken on a light one. These carry the remaining pages until pass 2
   converts their markup, and are deleted with style.css.
   ============================================================================ */

/* the old search field was a dark pill with an invisible placeholder */
.search-container { position: relative; width: 292px; max-width: 100%; }
.search-container .search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--faint); pointer-events: none;
}
.search-input {
  width: 100%; height: var(--control-height);
  padding: 0 12px 0 34px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--control); border-radius: var(--radius-control);
  box-shadow: none;
}
.search-input::placeholder { color: var(--faint); }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }

/* uppercase tracked headers on a dark band: 12px grey sentence case instead */
.data-table-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; box-shadow: none; }
.data-table-container table { width: 100%; border-collapse: collapse; }
.data-table-container th, table:not(.table) th {
  height: 38px; padding: 0 14px;
  background: none;
  color: var(--muted);
  font-size: var(--fs-small); font-weight: 400;
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table-container td, table:not(.table) td {
  padding: 12px 14px;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-body);
  vertical-align: middle;
}
.data-table-container tbody tr:last-child td { border-bottom: 0; }
.data-table-container tbody tr:hover { background: var(--raised); }

/* the old select and input styles assumed white-on-dark */
.custom-select, .input-group input, .input-group select, .input-group textarea {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--control) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}
.input-group label { color: var(--text); font-weight: 500; }
.custom-select { height: 40px; }

/* the legacy status pills and badges */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); font-size: var(--fs-small); font-weight: 500; }
.badge-success { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }


/* ---- the collapsed sidebar ----
   The top bar's button narrows the sidebar to an icon rail. Labels go, the
   icons stay centred, and every item keeps an accessible name via its title. */
.app-container.nav-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.nav-collapsed .sidebar { padding-left: 8px; padding-right: 8px; }
.nav-collapsed .brand { padding-left: 0; justify-content: center; gap: 0; }
.nav-collapsed .brand .text,
.nav-collapsed .nav-item span,
.nav-collapsed .group-label { display: none; }
.nav-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  font-size: 0;
}
.nav-collapsed .nav-item svg, .nav-collapsed .nav-item i { font-size: initial; }
.nav-collapsed .sidebar nav { gap: 4px; }
/* a group still reads as a group: a rule in place of its label */
.nav-collapsed .group-label + .nav-item { margin-top: 10px; position: relative; }
.nav-collapsed .group-label + .nav-item::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: -6px;
  height: 1px; background: var(--nav-rule);
}
@media (max-width: 1100px) {
  /* on a phone the sidebar is a sheet, so collapsing does not apply */
  .app-container.nav-collapsed { grid-template-columns: minmax(0, 1fr); }
  .nav-collapsed .brand .text,
  .nav-collapsed .nav-item span,
  .nav-collapsed .group-label { display: revert; }
  .nav-collapsed .nav-item { justify-content: flex-start; padding: 0 8px; font-size: var(--fs-body); }
  .nav-collapsed .sidebar { padding-left: 12px; padding-right: 12px; }
  .nav-collapsed .brand { padding-left: 20px; justify-content: flex-start; gap: 12px; }
}

/* ---- the secondary button ----
   21 pages carried "secondary" buttons as .btn-primary with an inline
   background: rgba(255,255,255,.08). That was a white tint on a dark ground;
   on a light one it rendered white-on-white (1.1:1). They now take this
   outlined variant. */
.btn-primary.btn-secondary, .btn--secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--control);
}
.btn-primary.btn-secondary:hover, .btn--secondary:hover {
  background: var(--raised);
  filter: none;
}

/* every figure in every table is tabular, so columns line up digit for digit
   even on the pages still waiting for their markup pass */
table td, table th, .stat-value, .kpi-value, .mini-stat, .row-time, .range {
  font-variant-numeric: tabular-nums;
}

/* legacy status text that was written for the dark theme: the hues are mapped
   to tokens in the markup, but these classes set their own */
.text-success, .status-done { color: var(--positive); }
.text-danger, .status-invalid { color: var(--negative); }
.text-warning, .status-pending { color: var(--warning); }

/* the old "LIVE" chip was a 10px tracked capital on a saturated fill */
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  background: var(--accent-100); color: var(--accent-ink);
  font-size: var(--fs-small); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: var(--pill-warning-bg); color: var(--pill-warning-ink);
  font-size: var(--fs-small); font-weight: 500;
}

/* detail pages label their fields with tiny tracked capitals; sentence case at
   a readable size reads better and passes the meter */
.detail-label, .meta-label, .kpi-label, .stat-label, .sub-title {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--fs-small) !important;
  color: var(--muted) !important;
}

/* ---- schedule chips ----
   .sched-type took its hue from an inline --c set in PHP, which produced
   saturated text on white (1.7:1). The kind still reads apart, by a pale tint
   of the one hue rather than a palette of its own. */
.sched-type {
  --c: var(--muted) !important;
  min-width: 92px;
  padding: 4px 9px;
  border-radius: var(--radius-chip);
  font-size: var(--fs-small) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  background: var(--pill-neutral-bg) !important;
  color: var(--pill-neutral-ink) !important;
}
.sched-table .sched-type { min-width: 0; }
.date-chip {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  background: var(--raised);
  color: var(--muted);
  font-size: var(--fs-small);
}
.date-chip.today {
  background: var(--accent-100);
  color: var(--accent-ink);
  font-weight: 500;
}

/* ---- analytics labels ----
   The per-metric captions were tiny tracked capitals; sentence case at 12px
   is readable and still reads as a label. */
.mini-stat-label, .kpi-sub, .rank-sub, .spark-axis, .seg-label,
.analytics-label, .card-sub, .panel-sub {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--fs-small) !important;
}
/* the pad index heading on a kirtan's page */
.pad-index h3, .pad-index-title, .detail-card h3 {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--fs-section) !important;
  font-weight: 600;
}

/* the login card */
.glass-card .title { margin-bottom: 4px; }
.glass-card .subtitle { text-align: center; color: var(--muted); margin-bottom: 26px; }

/* ---- the last tracked capitals ----
   Eight rules in style.css set uppercase + letter-spacing on labels that are
   content, not chrome. Sentence case at 12px reads better and the figures
   beside them stay the loudest thing in the cell. */
.stat-tile-label, .detail-label, .pad-index-title, .adv-field label,
.edit-field label, .field-row-label, .dash-sep, .kpi-label, .stat-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.stat-tile-label, .detail-label, .kpi-label, .stat-label, .field-row-label {
  font-size: var(--fs-small) !important;
  color: var(--muted) !important;
}
.adv-field label, .edit-field label { font-size: var(--fs-small) !important; }

/* ---- the kirtan page's pad index ----
   Long Gujarati pad titles pushed past the rail and out to the window edge.
   The rail may not grow, and a title that will not fit is truncated. */
.pad-index { min-width: 0; padding: 14px; }
.pad-index a, .pad-index li, .pad-index .pad-index-item, .pad-index .js-title-guj {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kirtan-layout { min-width: 0; }
.kirtan-layout > * { min-width: 0; }

/* figures outside tables are tabular too, so analytics columns line up */
.stat-tile-value, .kpi-value, .rank-value, .mini-stat b, .spark-axis span,
.sched-count, .pad-count, .count, .range, .row-no {
  font-variant-numeric: tabular-nums;
}

/* notification type badges: a pale tint with dark ink of the same hue */
.type-badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  background: var(--pill-neutral-bg) !important;
  color: var(--pill-neutral-ink) !important;
  font-size: var(--fs-small); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.type-badge.type-general { background: var(--accent-100) !important; color: var(--accent-ink) !important; }

/* ============================================================================
   Dark-theme leftovers that read as broken on a light ground.
   Each of these was written as "a pale tint on navy"; on white the tint
   disappears or the fill stays dark. They take the tokens instead.
   ============================================================================ */

/* the period / sort switches (7 days · 30 days · All time, Most opened …) */
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.seg-item {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: var(--fs-body);
  color: var(--muted);
  white-space: nowrap;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.seg-item:hover { color: var(--text); background: var(--surface); }
.seg-item.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  box-shadow: none;
}

/* the sub-category rows on the categories page */
.sub-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 8px 10px;
}
.sub-row:hover { border-color: var(--control); background: var(--raised); }
.cat-row { background: var(--surface); border-color: var(--border); }

/* the explanatory note above a table */
.info-note {
  border: 1px solid var(--border);
  background: var(--raised);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: var(--fs-body);
}
.info-note svg, .info-note i { color: var(--muted); }

/* fields inside the category and schedule modals */
.edit-field label {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-small); font-weight: 500;
  color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.edit-field input, .edit-field select, .edit-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--control) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}
.edit-field input:focus, .edit-field select:focus, .edit-field textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-100) !important;
}
.edit-field input::placeholder { color: var(--faint); }
.edit-row { margin-bottom: 14px; }
/* the master-category picker is a scrolling list of checkboxes, not a well */
.edit-field .check-list, .master-pick {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 10px;
}

/* ranked lists: a thin grey bar, with the hue only on the leader, so six
   heavy red underlines stop being the loudest marks on the screen */
.rank-bar {
  display: block; height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--rule);
  overflow: hidden;
}
.rank-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--chart-muted); }
.rank-row:first-child .rank-bar > span,
.rank-1 ~ .rank-text .rank-bar > span { background: var(--accent); }
.rank-no {
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-chip);
  background: var(--raised); color: var(--muted);
  font-size: var(--fs-small); font-weight: 500;
}
.rank-no.rank-1 { background: var(--accent-100); color: var(--accent-ink); }
.rank-no.rank-2, .rank-no.rank-3 { background: var(--raised); color: var(--muted); }

/* one accent on the stat glyphs, not a different hue per tile */
.stat-icon, .dash-icon {
  --c: var(--accent) !important;
  background: var(--accent-100) !important;
  color: var(--accent) !important;
  border-radius: 10px;
}

/* ============================================================================
   The opens chart.
   Columns in the one hue on a plot with four faint gridlines and round ticks
   from zero. A period with no opens draws no column — the baseline shows it —
   rather than a dashed placeholder box.
   ============================================================================ */
.chart { --plot-h: 190px; margin-top: 4px; }
.chart-plot {
  position: relative;
  height: var(--plot-h);
  padding-left: 44px;
}
/* the gridlines carry their own tick label, so the two can never drift apart */
.chart-line {
  position: relative;
  height: 25%;
  border-top: 1px solid var(--grid);
}
.chart-line:last-child {
  height: 0;
  border-top: 1px solid var(--control);   /* the baseline is the one heavier line */
}
.chart-line > span {
  position: absolute; right: calc(100% + 10px); top: -0.6em;
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* columns and their labels share one grid, so a label can never drift off its
   column, and a bar is capped so twelve months read as twelve columns rather
   than one filled band */
.chart-cols {
  position: absolute; left: 44px; right: 0; top: 0; bottom: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  align-items: end;
}
.chart-col {
  width: 100%; max-width: 46px; justify-self: center;
  min-width: 3px;
  height: var(--h);
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  transition: opacity var(--t-hover) ease;
}
.chart-col:hover { opacity: 0.78; }
/* an honest zero: no column, no placeholder */
.chart-col.is-zero { height: 0; background: none; }
.chart-x {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin-top: 8px; padding-left: 44px;
}
.chart-x span {
  min-width: 0;
  font-size: 11px; color: var(--faint);
  text-align: center;
  white-space: nowrap; overflow: hidden;
}
@media (max-width: 640px) {
  .chart { --plot-h: 160px; }
  .chart-plot, .chart-cols, .chart-x { padding-left: 34px; }
  .chart-cols { left: 34px; }
}

/* ---- ranked lists ----
   The three "top" panels sat in a hard three-column grid that never collapsed,
   so on a phone the titles ran past the screen edge. The grid is .grid-3 now
   (two columns on a tablet, one on a phone) and every part of a row is allowed
   to shrink and truncate. */
.rank-row {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; padding: 7px 0;
  color: inherit;
}
.rank-row + .rank-row { border-top: 1px solid var(--rule); }
.rank-text { flex: 1; min-width: 0; }
.rank-title {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-value { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.dash-grid { min-width: 0; }
.dash-grid > * { min-width: 0; }
.dash-card, .dash-list, .dash-row { min-width: 0; }
.dash-row-title, .dash-row-sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- the analytics stat row ----
   Five cards in an auto-fit grid left a lone fifth card on its own row. The
   column count follows the item count instead: five across on a desktop,
   3 + 2 on a tablet, and on a phone the odd one spans rather than orphaning.
   The caption wraps instead of truncating — it explains the figure. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.stat-tile {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
  padding: 16px var(--card-pad);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: inherit;
}
.stat-tile:hover { transform: none; background: var(--raised); }
.stat-body { min-width: 0; }
.stat-tile-value { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; }
.stat-tile-label {
  display: block; margin-top: 2px;
  white-space: normal;        /* a caption wraps; it is not a column to scan */
  overflow-wrap: anywhere;
}
.stat-icon {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 11px;
}
.stat-icon svg, .stat-icon i { width: 19px; height: 19px; }
@media (max-width: 1100px) {
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}