/* Salon OS design language
   ---------------------------------------------------------------------------
   Warm, confident, mobile first. Two self-hosted typefaces, one accent doing
   the work, a single spacing scale, and shadows kept for the few things that
   genuinely sit above the page.

   Type: Fraunces for the words that title things, Inter for everything else
   including every number. Both are SIL Open Font Licence, both are served
   from /public/fonts on this machine, and nothing here calls out to a CDN.
   Licences sit next to the files.
   --------------------------------------------------------------------------- */

/* ---------- typefaces ---------- */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/public/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/public/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces var";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/public/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces var";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/public/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root {
  /* If a font file ever fails to arrive, the stack underneath it is chosen,
     not accidental: the platform's own interface face on each OS. */
  --font: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces var", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale. Four steps carry the whole app: page, section, body, small,
     with one micro step for labels and one display step for the hero. */
  --fs-hero: 1.7rem;
  --fs-page: 1.4rem;
  --fs-section: 1.15rem;
  --fs-sub: 1rem;
  --fs-body: 0.97rem;
  --fs-small: 0.87rem;
  --fs-micro: 0.78rem;

  /* Spacing. Every gap, pad and margin in the app comes off this scale. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 44px;

  --bg: #f7f4ef;
  --surface: #ffffff;
  --surface-2: #faf7f2;
  --surface-3: #f1ece3;
  --border: #e7e0d5;
  --border-subtle: #efe9df;
  --border-strong: #d6ccbc;

  /* Contrast on the white card surface, measured, not guessed:
     text 15.9:1, muted 7.4:1, faint 5.9:1. All clear of the 4.5:1 minimum,
     because the faint step carries the week on week change on every card. */
  --text: #201c17;
  --text-muted: #5f584d;
  --text-faint: #6f6759;

  /* One accent: a burnished clay. 5.3:1 on white either way round, so white
     type sits on it and it sits on white, both readable. The strong step is
     for links and reaches 7.6:1. */
  --accent: #9c5b32;
  --accent-strong: #7d4527;
  --accent-soft: #f6ebe1;
  --accent-tint: #eddccb;
  --on-accent: #ffffff;

  --good: #2f6b46;
  --good-soft: #e7f1e9;
  --warn: #8a6212;
  --warn-soft: #f8f0dc;
  --bad: #a33a2e;
  --bad-soft: #fbeae7;

  --radius: 14px;
  --radius-lg: 18px;
  --radius-sm: 10px;
  --radius-xs: 7px;

  /* Three levels, used sparingly. Flat things stay flat; only what genuinely
     floats above the page gets the large one. */
  --shadow-sm: 0 1px 2px rgba(40, 32, 22, 0.05);
  --shadow: 0 1px 2px rgba(40, 32, 22, 0.05), 0 2px 6px rgba(40, 32, 22, 0.04);
  --shadow-lg: 0 2px 6px rgba(40, 32, 22, 0.06), 0 14px 34px rgba(40, 32, 22, 0.11);

  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%235f584d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The dark palette is the same design in a low light room, not an inversion:
   the paper goes to warm charcoal, the clay warms up so it still reads as
   clay, and every text step was re-measured against the card surface
   (text 14.5:1, muted 8:1, faint 5.6:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15130f;
    --surface: #1e1b17;
    --surface-2: #24211b;
    --surface-3: #2b2620;
    --border: #383129;
    --border-subtle: #2f2922;
    --border-strong: #4b4237;

    --text: #f0ece3;
    --text-muted: #b8b0a1;
    --text-faint: #9b9382;

    --accent: #d99b6a;
    --accent-strong: #eab789;
    --accent-soft: #39291b;
    --accent-tint: #4a3524;
    --on-accent: #241408;

    --good: #7cc094;
    --good-soft: #1e2d22;
    --warn: #dcb85e;
    --warn-soft: #322815;
    --bad: #e79184;
    --bad-soft: #331f1c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 34px rgba(0, 0, 0, 0.42);

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23b8b0a1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* The owner's explicit choice beats the device: the same palette as above,
   applied when the theme switch says dark. */
:root[data-theme="dark"] {
  --bg: #15130f;
  --surface: #1e1b17;
  --surface-2: #24211b;
  --surface-3: #2b2620;
  --border: #383129;
  --border-subtle: #2f2922;
  --border-strong: #4b4237;

  --text: #f0ece3;
  --text-muted: #b8b0a1;
  --text-faint: #9b9382;

  --accent: #d99b6a;
  --accent-strong: #eab789;
  --accent-soft: #39291b;
  --accent-tint: #4a3524;
  --on-accent: #241408;

  --good: #7cc094;
  --good-soft: #1e2d22;
  --warn: #dcb85e;
  --warn-soft: #322815;
  --bad: #e79184;
  --bad-soft: #331f1c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 34px rgba(0, 0, 0, 0.42);

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23b8b0a1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv08" 1;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* One focus treatment for the whole app, so keyboard users always know where
   they are and nothing has to opt in. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.006em;
  margin: 0 0 0.5em;
  color: var(--text);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
}

h1 { font-size: var(--fs-page); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-sub); font-variation-settings: "opsz" 20, "SOFT" 0, "WONK" 0; }

p { margin: 0 0 1em; color: var(--text); }

strong { font-weight: 600; }

/* Every figure in the app lines up in its column. */
.card-value,
.chart-latest,
.table td,
.timeline-date,
input[type="number"],
.handover-code code {
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  font-size: 0.88em;
}

::selection {
  background: var(--accent-tint);
  color: var(--text);
}

/* ---------- layout shell ---------- */

.topbar {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 58px;
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
  min-width: 0;
  color: var(--text);
}

.brand:hover {
  text-decoration: none;
}

.brand-portal {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.008em;
  color: var(--text);
  font-variation-settings: "opsz" 30, "SOFT" 0, "WONK" 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand:hover .brand-portal {
  color: var(--accent-strong);
}

.brand-wordmark {
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: var(--s1);
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
  overflow: visible;
}

.nav-link {
  color: var(--text-muted);
  padding: 8px 13px;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link:hover {
  background: var(--surface-3);
  text-decoration: none;
  color: var(--text);
}

.nav-link-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

.core-nav {
  display: none;
}

.core-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 6px var(--s3);
  display: flex;
  gap: var(--s2);
}

.core-nav-link {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: 600;
}

.core-nav-link:hover,
.core-nav-link:focus-visible {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  text-decoration: none;
}

/* Below 760px the inline nav is gone, so nothing is left to push the chip and
   the menu button across. Without this they pack up against the salon name
   and the bar looks half built. */
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
  margin-left: auto;
}

.nav-role {
  align-self: center;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 11px;
}

.nav-role:hover { text-decoration: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  cursor: pointer;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-width: 42px;
  min-height: 40px;
}

.menu-toggle:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--accent-strong);
}

.menu-toggle svg { display: block; }

/* Below this width the inline primary links step aside; the drawer is the
   whole nav, so the bar stays clean and never scrolls. */
@media (max-width: 760px) {
  .nav { display: none; }
  .core-nav { display: block; background: var(--surface-2); border-bottom: 1px solid var(--border); }
}

/* The top bar and the sub-nav stick as one block. Sticking them separately
   means guessing the bar's exact height, which differs per device, so a
   sliver of scrolling content shows through the gap. Wrapping them removes
   the arithmetic entirely. */
.stickyhead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.stickyhead .topbar { position: static; }

/* Sub-navigation: the jump list for a page with several sections, so on a
   long page the section you want is one tap away instead of a scroll away. */
.subnav {
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.subnav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--s4);
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav-inner::-webkit-scrollbar { display: none; }

.subnav-link {
  flex: 0 0 auto;
  padding: 10px 12px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.subnav-link:hover,
.subnav-link:focus-visible {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

.subnav-link--top { color: var(--accent-strong); }

/* Anchor jumps have to clear the two sticky bars above them. */
.section[id],
.main[id] { scroll-margin-top: 116px; }

.main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s6) var(--s4) 72px;
}

.main-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.page-title {
  margin: 0;
  font-size: var(--fs-hero);
  letter-spacing: -0.014em;
}

.footer {
  border-top: 1px solid var(--border);
  margin-top: var(--s8);
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s5) var(--s4);
  color: var(--text-faint);
  font-size: var(--fs-small);
}

.footer-credit a,
.footer-feedback {
  color: inherit;
  text-decoration: underline;
}

.footer-feedback { white-space: nowrap; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  align-self: flex-start;
  margin-bottom: -12px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  text-decoration: none;
}

/* One acknowledgement for every save in the app. */
.flash {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm);
  background: var(--good-soft);
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 28%, transparent);
  font-weight: 600;
  font-size: var(--fs-small);
}

.flash-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--good);
  color: var(--surface);
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* Period picker: the same control on every page that reports over time, so
   "which stretch am I looking at" is answered the same way everywhere. */
.period-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.period-link {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.period-link:hover,
.period-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent-strong);
  text-decoration: none;
}

.period-link--active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-strong);
  font-weight: 600;
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--s3);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.card-value {
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}

.card-sub {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-top: 5px;
}

/* Tone lives in the figure and a hairline, never in a filled card. A wall of
   coloured blocks stops meaning anything the moment there are six of them. */
.card--good { border-color: color-mix(in srgb, var(--good) 32%, var(--border)); }
.card--good .card-value { color: var(--good); }
.card--warn { border-color: color-mix(in srgb, var(--warn) 32%, var(--border)); }
.card--warn .card-value { color: var(--warn); }
.card--bad { border-color: color-mix(in srgb, var(--bad) 32%, var(--border)); }
.card--bad .card-value { color: var(--bad); }

/* ---------- section ---------- */

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5) var(--s5) var(--s6);
  box-shadow: var(--shadow-sm);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}

.section-head h2 {
  margin: 0;
}

.section-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Vertical rhythm inside a section without imposing a layout on its content. */
.section-body > * + * {
  margin-top: var(--s4);
}

/* A short explanation line under a page heading. */
.page-lead {
  margin: -2px 0 var(--s5);
  max-width: 62ch;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* A quieter framed note, for stating where a figure came from. */
.page-note {
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  max-width: 80ch;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.muted {
  color: var(--text-muted);
}

/* ---------- tables ---------- */
/* A payroll sheet or a pricing table can run to twenty rows of money. The job
   here is to keep it readable at that length: hairline rules instead of a
   grid, figures on tabular numerals so the columns line up, and a header that
   labels without shouting. */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
  /* The two soft edges appear only when there is more table off to the side,
     which is how a phone gets told to swipe without a line of instructions. */
  background:
    linear-gradient(to right, var(--surface) 24px, transparent) left center,
    linear-gradient(to left, var(--surface) 24px, transparent) right center,
    radial-gradient(farthest-side at 0 50%, rgba(40, 32, 22, 0.10), rgba(40, 32, 22, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(40, 32, 22, 0.10), rgba(40, 32, 22, 0)) right center;
  background-repeat: no-repeat;
  background-size: 38px 100%, 38px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  min-width: 480px;
}

.table th,
.table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.table th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* The row label carries the weight; the figures beside it stay even. */
.table tbody td:first-child {
  font-weight: 550;
  color: var(--text);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--surface-2);
}

/* ---------- forms ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-width: 480px;
}

.form-compact {
  max-width: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
}

.form-compact .field {
  flex: 1 1 160px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-weight: 550;
}

.field-hint {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  line-height: 1.5;
}

.field-checkbox {
  flex-direction: row;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-body);
  color: var(--text);
}

input, select, textarea {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  min-height: 42px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

input::placeholder, textarea::placeholder {
  color: var(--text-faint);
}

input:hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
}

/* background-color, never the background shorthand: the shorthand would wipe
   the select's own chevron out from under it. */
input:focus, select:focus, textarea:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--ring);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.55;
}

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--accent);
}

/* ---------- buttons ---------- */
/* Three weights and no more. The filled one is the thing to do on this
   screen, the outlined one is the alternative, the small one belongs to a
   table row and should never compete with either. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  min-height: 42px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease,
    box-shadow 0.12s ease, transform 0.08s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 80%, #000);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.btn-danger {
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 26%, transparent);
  color: var(--bad);
}

.btn-danger:hover {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}

/* Compact button for table rows, where a full size button crowds the line. */
.btn-small {
  padding: 6px 12px;
  min-height: 32px;
  font-size: 0.82rem;
  font-weight: 550;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
  box-shadow: none;
}

.btn-small:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent-strong);
}

/* ---------- alerts ---------- */

.alert {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
}

.alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-body {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.alert--good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 22%, transparent); }
.alert--good .alert-title { color: var(--good); }
.alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 24%, transparent); }
.alert--warn .alert-title { color: var(--warn); }
.alert--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
.alert--bad .alert-title { color: var(--bad); }

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.badge--good { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 22%, transparent); }
.badge--warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 24%, transparent); }
.badge--bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 22%, transparent); }

/* ---------- bar ---------- */

.bar {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.bar-label {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.bar-track {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.bar-fill--good { background: var(--good); }
.bar-fill--warn { background: var(--warn); }
.bar-fill--bad { background: var(--bad); }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 9px 14px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
}

.tab:hover {
  color: var(--text);
  text-decoration: none;
}

.tab-active {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ---------- empty state ---------- */

.empty {
  text-align: center;
  padding: var(--s7) var(--s4);
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.empty p {
  margin-bottom: var(--s3);
  color: var(--text-muted);
}

.empty p:last-child { margin-bottom: 0; }

/* ---------- sparkline ---------- */

.sparkline {
  color: var(--accent);
  display: block;
}

/* ---------- the priority card: the top of the decision loop ---------- */
/* This is the one thing an owner opens the app to read, so it is the one
   thing on the dashboard that is allowed to be loud: a wider frame, the
   headline at page size, a tinted field, and the real shadow. */

.priority {
  position: relative;
  overflow: hidden;
  padding: var(--s6) var(--s6) var(--s6);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius-lg);
  /* The flat colour under the wash, so the card is still a card if a browser
     ever declines the gradient. */
  background-color: var(--surface);
  background-image: linear-gradient(
    170deg,
    color-mix(in srgb, var(--accent-soft) 88%, var(--surface)) 0%,
    var(--surface) 58%
  );
  box-shadow: var(--shadow-lg);
}

.priority::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--surface)));
}

.priority .section-head {
  margin-bottom: var(--s3);
}

.priority .section-head h2 {
  font-size: var(--fs-hero);
  letter-spacing: -0.016em;
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
}

.priority .badge {
  font-size: var(--fs-micro);
  padding: 5px 12px;
}

.priority-why {
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 60ch;
  margin-bottom: var(--s5);
}

.priority-opp {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent-strong);
  white-space: nowrap;
}

.priority-action {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  box-shadow: var(--shadow-sm);
}

.priority-action-head {
  margin-bottom: var(--s2);
  font-size: 1.02rem;
}

.priority-steps {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.priority-steps li { margin-bottom: var(--s1); }

.priority-accept {
  margin-top: var(--s1);
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Tone: the frame and the wash change, the layout does not. */
.priority--bad {
  border-color: color-mix(in srgb, var(--bad) 30%, var(--border));
  background-color: var(--surface);
  background-image: linear-gradient(
    170deg,
    color-mix(in srgb, var(--bad-soft) 88%, var(--surface)) 0%,
    var(--surface) 58%
  );
}
.priority--bad::before { background: linear-gradient(90deg, var(--bad), color-mix(in srgb, var(--bad) 35%, var(--surface))); }
.priority--bad .priority-action { border-left-color: var(--bad); }

.priority--warn {
  border-color: color-mix(in srgb, var(--warn) 32%, var(--border));
  background-color: var(--surface);
  background-image: linear-gradient(
    170deg,
    color-mix(in srgb, var(--warn-soft) 80%, var(--surface)) 0%,
    var(--surface) 58%
  );
}
.priority--warn::before { background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 35%, var(--surface))); }
.priority--warn .priority-action { border-left-color: var(--warn); }

.priority--good {
  border-color: color-mix(in srgb, var(--good) 28%, var(--border));
  background-color: var(--surface);
  background-image: linear-gradient(
    170deg,
    color-mix(in srgb, var(--good-soft) 80%, var(--surface)) 0%,
    var(--surface) 58%
  );
}
.priority--good::before { background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 35%, var(--surface))); }

/* ---------- action list (this week) ---------- */

.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.action-item {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
}

.action-item-done { opacity: 0.6; }
.action-toggle { margin: 0; }

.action-check {
  width: 26px;
  height: 26px;
  min-height: 0;
  border-radius: var(--radius-xs);
  border: 2px solid var(--accent);
  background: none;
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

/* The tick takes the card's own surface colour rather than white. On the dark
   palette the good green is a light green, and a white tick on it came out at
   2.1:1, which is a tick you cannot see. */
.action-item-done .action-check {
  background: var(--good);
  border-color: var(--good);
  color: var(--surface);
}

.action-body { flex: 1; min-width: 0; }
.action-text { font-weight: 550; }
.action-item-done .action-text { text-decoration: line-through; }

.action-steps {
  margin: 6px 0 0;
  padding-left: var(--s5);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.action-remove {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  min-height: 0;
  width: auto;
  padding: 0 4px;
}

.action-remove:hover { color: var(--bad); }

/* ---------- coming next (the roadmap, not the product) ---------- */

.planned-strip {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.planned-strip li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.planned-strip a { font-weight: 600; }

.vote-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.vote-form textarea { min-height: 72px; }

/* A dashed edge on every roadmap card, so "not built" is legible at a glance
   and not only in the words. */
.coach-card.coach-card--planned { border-style: dashed; }

/* ---------- auth ---------- */

.login-section {
  max-width: 420px;
  margin: var(--s8) auto 0;
}

.login-roles {
  margin: 0 0 1em;
  padding-left: 1.2em;
  color: var(--text-muted);
}

.login-roles li { margin-bottom: 0.35em; }

.nav-signout {
  display: inline-flex;
  margin: 0;
}

.nav-link-button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--text-muted);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  min-height: 40px;
  width: auto;
}

.nav-link-button:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* ---------- drawer ---------- */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 11, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.drawer-overlay-on { opacity: 1; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(330px, 88vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 50;
  overflow-y: auto;
  padding-bottom: var(--s6);
}

.drawer-open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}

.drawer-close {
  font: inherit;
  font-size: var(--fs-small);
  font-family: var(--font);
  cursor: pointer;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  width: auto;
  flex-shrink: 0;
}

.drawer-close:hover { background: var(--accent-soft); color: var(--accent-strong); }

.drawer-group {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
}

.drawer-group:last-of-type { border-bottom: none; }

.drawer-group-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  padding: var(--s2) var(--s4) var(--s1);
}

.drawer-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px var(--s4);
  color: var(--text);
  font-size: var(--fs-body);
  background: none;
  border: none;
  border-radius: 0;
  min-height: 0;
  font-family: inherit;
  cursor: pointer;
}

.drawer-link:hover { background: var(--surface-2); text-decoration: none; }

.drawer-link.nav-link-active {
  color: var(--accent-strong);
  font-weight: 600;
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.drawer-signout { margin: 0; }

.drawer-foot {
  padding: var(--s4);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- info tooltips (the "i" glossary) ---------- */

.tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 5px;
  cursor: help;
}

.tip-i, .tip-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

.tip-inline { margin: 0 2px; }

.tip-text {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  background: var(--text);
  color: var(--bg);
  padding: 9px 11px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-micro);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 30;
  box-shadow: var(--shadow-lg);
}

.tip:hover .tip-text,
.tip:focus .tip-text,
.tip:focus-within .tip-text { opacity: 1; visibility: visible; }

/* Keep the bubble on screen near the right edge. */
.table th:last-child .tip-text,
.table td:last-child .tip-text { left: auto; right: 0; transform: none; }

/* On a phone a 240px bubble centred on a 16px "i" runs off whichever edge it
   is nearest, and the explanation is unreadable exactly when it is tapped.
   Below this width it becomes a bar along the bottom of the screen instead,
   which fits every time and is a bigger read. */
@media (max-width: 640px) {
  .tip-text,
  .table th:last-child .tip-text,
  .table td:last-child .tip-text {
    position: fixed;
    left: var(--s3);
    right: var(--s3);
    bottom: var(--s3);
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
    padding: var(--s3) var(--s4);
    font-size: var(--fs-small);
    z-index: 70;
  }
}

/* ---------- welcome modal ---------- */

body.modal-open { overflow: hidden; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 11, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  z-index: 60;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s6);
  max-width: 540px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
}

.modal h2 { margin-top: 0; font-size: var(--fs-page); }

.modal-forget {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s1) 0 var(--s4);
  font-size: var(--fs-small);
  color: var(--text-muted);
  cursor: pointer;
}

.modal-forget input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }

/* ---------- welcome panel and call-to-action strip ---------- */

.welcome {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.welcome p { margin-bottom: 0.6em; }

.cta-strip {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  box-shadow: var(--shadow-sm);
}

.cta-strip-text {
  flex: 1 1 260px;
  color: var(--text);
  font-size: var(--fs-body);
}

.cta-strip .btn { flex-shrink: 0; }
.cta-strip p { margin: 0; }

/* ---------- systems checklists ---------- */

.check-list {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.check-list li { margin-bottom: var(--s1); }

.check-list label {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--fs-small);
}

.check-list label:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface-2);
}

.check-list input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* ---------- coach overview ---------- */

.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4);
}

.coach-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--s4) var(--s5);
}

.coach-card-off { background: var(--surface-2); }

.coach-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 6px;
}

.coach-card-head h3 { margin: 0; }

.coach-card-kpis {
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--s3);
}

.coach-card-trend {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  color: var(--accent);
}

.coach-card-link { transition: box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease; }

.coach-card-link:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  transform: translateY(-1px);
}

.coach-card-more { margin: var(--s3) 0 0; font-size: var(--fs-small); }

.coach-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s2);
}

.coach-pace { margin: 0 0 var(--s3); }

/* ---------- intervention queue (coach: who needs you) ---------- */

.intervention-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.intervention-queue li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.iq-name a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
}

.iq-reasons { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- since-last-session brief ---------- */

.brief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin: var(--s3) 0;
}

.brief-grid h3,
.brief-q ~ h3 {
  font-family: var(--font);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.brief-up, .brief-down { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.brief-up li { color: var(--good); padding: 2px 0; }
.brief-down li { color: var(--bad); padding: 2px 0; }
.brief-q { margin: 0 0 var(--s2); padding-left: var(--s5); }
.brief-q li { margin-bottom: var(--s1); }

@media (max-width: 560px) {
  .brief-grid { grid-template-columns: 1fr; }
}

/* ---------- evidence timeline ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.timeline li {
  display: grid;
  grid-template-columns: 92px 110px 1fr;
  gap: var(--s3);
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.timeline li:last-child { border-bottom: none; }

.timeline-date {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.timeline-kind { font-size: var(--fs-small); }
.timeline-text { color: var(--text); font-size: var(--fs-small); }

@media (max-width: 560px) {
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- session list ---------- */

.session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.session-list li {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  background: var(--surface);
}

.session-head {
  display: flex;
  gap: var(--s2);
  align-items: center;
  margin-bottom: var(--s1);
  flex-wrap: wrap;
}

/* ---------- one-time passcode handover ---------- */

.handover-code { margin: 6px 0 var(--s1); }

.handover-code code {
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  user-select: all;
}

@media (max-width: 560px) {
  .handover-code code { font-size: 1.2rem; letter-spacing: 0.1em; padding: var(--s3); }
}

/* ---------- inline actions inside a table row ---------- */

/* A cell can hold more than one action (set a status, then remove). Keep them
   on one line on a wide screen and let them wrap on a phone. */
.table td form { display: inline-block; margin: 0 var(--s1) 0 0; vertical-align: middle; }

/* Specificity has to match `.table td form` above, or the flex layout loses
   to it and the input and button stop sitting on one line. */
.table td form.row-form, .row-form { display: inline-flex; gap: 6px; align-items: center; }

.row-form input, .row-form select {
  width: auto;
  min-width: 84px;
  min-height: 32px;
  padding: 4px 9px;
  font-size: 0.82rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--surface);
  color: var(--text);
}

.row-form select { padding-right: 26px; background-position: right 8px center; }

.row-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s3);
}

@media (max-width: 560px) {
  .table td form { display: block; margin: 0 0 6px; }
  .table td form.row-form, .row-form { display: flex; }
  .row-form input, .row-form select { min-width: 0; flex: 1; }
}

/* ---------- charts ---------- */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
}

.chart-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s4);
  background: var(--surface);
}

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.chart-title {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-weight: 600;
}

.chart-latest {
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.018em;
  color: var(--text);
}

.chart { width: 100%; }
.chart svg { width: 100%; height: 152px; display: block; overflow: visible; }
.chart-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--accent-strong); }
.chart-target { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }

.chart-axis-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.chart-target-note { flex: 1; text-align: center; }
.chart-empty { color: var(--text-faint); font-size: var(--fs-small); padding: var(--s8) 0; text-align: center; }

/* ---------- the paste-this sample on Import ---------- */

.import-sample {
  margin: 0 0 var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
}

.import-sample summary { cursor: pointer; font-weight: 600; font-size: var(--fs-small); }

.import-sample-csv {
  margin: var(--s2) 0 0;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

/* ---------- unified inbox ------------------------------------------------ */

.inbox-thread {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: 760px;
}

.inbox-message {
  max-width: min(86%, 620px);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.inbox-message--in {
  align-self: flex-start;
  background: var(--surface-2);
  border-bottom-left-radius: 5px;
}

.inbox-message--out {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  border-bottom-right-radius: 5px;
}

.inbox-message-meta {
  color: var(--text-faint);
  font-size: var(--fs-micro);
  margin-bottom: 4px;
}

.inbox-message-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inbox-scenarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.inbox-scenario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.inbox-scenario > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.inbox-scenario strong {
  color: var(--accent-strong);
}

.inbox-scenario span {
  color: var(--text-muted);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.demo-coach {
  padding: var(--s3);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.demo-coach p { margin-bottom: var(--s3); }

.demo-coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.demo-coach-actions form { margin: 0; }

.js-copy-inbox-link { cursor: pointer; }

/* ---------- aftercare message ---------- */

.aftercare-msg {
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s3);
}

.js-copy-msg { flex-shrink: 0; }

/* ---------- printable self-service card ---------- */

.print-card { text-align: center; }

.print-card h1 { font-size: var(--fs-hero); }

.print-card-lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0 0 var(--s5);
}

.print-card-qr { margin: var(--s5) auto var(--s5); max-width: 440px; }

/* No border radius on the code itself: the corner it rounds off is the quiet
   zone, which is the part a reader uses to lock on. */
.print-card-qr svg { width: 100%; height: auto; display: block; border-radius: 0; }

.print-card-path code {
  display: inline-block;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  padding: var(--s3) var(--s5);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  word-break: break-all;
}

/* A scannable card is light regardless of the app's theme, and carries a white
   field well past the quiet zone so a phone camera has nothing dark to meter
   against. */
.print-card--light {
  background: #ffffff;
  color: #201c17;
  border-color: #e7e0d5;
}

.print-card--light h1 { color: #201c17; }
.print-card--light .print-card-lead,
.print-card--light .field-hint { color: #5f584d; }

.print-card--light .print-card-qr {
  background: #ffffff;
  padding: var(--s4);
  border-radius: var(--radius-sm);
}

.print-card--light .print-card-path code { background: #f7f4ef; color: #201c17; border-color: #d6ccbc; }

/* ---------- phone ---------- */
/* A salon owner enters the week standing up between clients, so anything
   tappable is a comfortable size and nothing important hides off the edge. */

@media (max-width: 640px) {
  :root {
    --fs-hero: 1.42rem;
    --fs-page: 1.24rem;
    --fs-section: 1.08rem;
  }

  .topbar-inner {
    padding: 0 var(--s3);
    gap: var(--s3);
    min-height: 54px;
  }

  .subnav-inner { padding: 0 var(--s3); }

  .main { padding: var(--s4) var(--s3) 56px; }

  .main-inner { gap: var(--s4); }

  .section { padding: var(--s4) var(--s4) var(--s5); }

  .inbox-scenarios { grid-template-columns: 1fr; }

  .inbox-scenario { align-items: flex-start; flex-direction: column; }

  .inbox-scenario .btn { width: 100%; }

  .priority { padding: var(--s5) var(--s4) var(--s5); border-radius: var(--radius); }
  .priority-action { padding: var(--s3) var(--s4); }
  .priority-why { font-size: 1.02rem; margin-bottom: var(--s4); }
  .priority-opp { display: inline-block; margin-top: 4px; margin-left: 0; }

  .cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); }
  .card { padding: var(--s3) var(--s4); }
  .card-value { font-size: 1.35rem; }

  .coach-card { padding: var(--s4); }

  .brand,
  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
  }

  .brand { flex-direction: column; align-items: flex-start; }

  .btn { min-height: 44px; padding: 11px 18px; }
  .btn-small { min-height: 36px; padding: 7px 13px; }

  /* Full width primary actions read better than a button floating in space. */
  .form .btn-primary { width: 100%; }

  /* A link sitting alone in a table cell should be tappable across the whole
     cell, not just across the width of its own text. The negative margin pulls
     the link out to the cell edges and the padding puts the spacing back. */
  .table td > a:only-child {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: -11px -14px;
    padding: 11px 14px;
  }
}

/* At the narrowest common phone width the salon name, the role chip and the
   menu button all have to share 375 pixels. The chip gives ground first. */
@media (max-width: 420px) {
  .nav-role { max-width: 26vw; }
  .modal { padding: var(--s5); }
  .modal-overlay { padding: var(--s3); }
}

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

/* ---------- print ---------- */
/* Four things in this app are meant to leave it on paper: the payroll sheet,
   the coach's results card, the self-service card and the insurer audit pack.
   Everything below serves those four: no chrome, no tints, black on white,
   and a table that keeps its rules when the ink stops being decorative. */

@page {
  margin: 14mm;
}

@media print {
  .topbar,
  .stickyhead,
  .subnav,
  .footer,
  .drawer,
  .drawer-overlay,
  .modal-overlay,
  .back-link,
  .flash,
  .tip,
  .print-hidden,
  .print-hide,
  .btn,
  form {
    display: none !important;
  }

  html, body {
    background: #fff;
    color: #000;
    font-size: 11.5pt;
  }

  a { color: #000; text-decoration: none; }

  .main {
    max-width: none;
    padding: 0;
  }

  .main-inner {
    max-width: none;
    gap: 18px;
  }

  .section,
  .priority,
  .card,
  .coach-card,
  .chart-card,
  .print-card {
    max-width: none;
    box-shadow: none;
    border: none;
    background: #fff;
    color: #000;
    padding: 0;
    break-inside: avoid;
  }

  .priority { overflow: visible; }
  .priority::before { display: none; }
  .priority-action { border: none; border-left: 2px solid #999; padding-left: 10px; }

  h1, h2, h3 { color: #000; }

  .page-lead, .page-note, .card-sub, .field-hint, .muted, .alert-body {
    color: #333;
  }

  .page-note { border: none; border-left: 2px solid #999; background: none; }

  .badge, .alert {
    background: none;
    border: 1px solid #999;
    color: #000;
  }

  .table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
    background: none;
  }

  .table {
    font-size: 9.5pt;
    width: 100%;
    min-width: 0;
  }

  .table th,
  .table td,
  .table tbody td:first-child {
    border: 1px solid #999;
    padding: 4px 6px;
    color: #000;
    background: none;
    white-space: normal;
  }

  .table th { text-transform: none; letter-spacing: 0; }

  .cards { gap: 10px; }

  .print-card { padding-top: 30px; }

  /* A printed card must be black on white whatever the screen was showing. */
  .print-card--light,
  .print-card--light .print-card-qr { background: #ffffff !important; }
  .print-card-path code { border: 2px solid #333; background: none; }
}