/* DM Sans + DM Serif Display load globally via the <link> in public/index.html (matches the rest of v7). */

/* =========================
   TOKENS / GLOBAL — v3.0 "Clean Stage, Warm Light"
   Single source of truth. Change a value here and it cascades everywhere.
   Legacy token names are kept as aliases so existing usage rebrands automatically.
   ========================= */
:root{
  color-scheme:light;

  /* Brand — warm orange. --orange-dark is nudged a touch deeper than the v3.0
     #C45D1A so it clears 4.5:1 as link text; the shift is imperceptible. */
  --orange:#E8732A; --orange-light:#F29A5C; --orange-dark:#BC5917;

  /* The fill behind white button text. It cannot be --orange: white on the
     brand orange is only 3.0:1. This is the brand's own deep orange #C45D1A
     (the value the v3.0 identity spec uses most), nudged the smallest amount
     that clears 4.5:1 with white — the two are indistinguishable side by side.
     Fixed in BOTH themes, because the text on it is always white. */
  --brand-fill:#BC5917;
  /* Hover/active for those buttons. It has to be its OWN token: --orange-dark
     is now the same value as the fill (they both had to deepen for contrast),
     so hovering onto it painted nothing. Deeper than the fill, and fixed in
     both themes because the fill is. */
  --brand-fill-hover:#A84F16;

  /* Ink + neutrals */
  --ink:#1A1A1A; --ink-soft:#3A3A3A; --stone:#736A5D; --navy:#1A2744;
  --canvas:#F0F0F0; --white:#FFFFFF;

  /* Chrome — the nav rail, mobile bar and login photo panel. Dark in BOTH
     themes, so it cannot ride on --ink: --ink is a text colour and goes light
     when the dark theme is on. */
  --chrome:var(--ink); --chrome-raised:var(--ink-soft);

  /* A branded panel that stays deep in BOTH themes — the onboarding hero, and
     anything else that is a brand surface rather than a page surface. It can't
     ride on --orange-dark, which flips to the LIGHTER orange when dark is on
     and would strand the white text sitting on it. */
  --brand-panel:#C45D1A;

  /* Text sitting on a photo or a brand fill. Never themed — the surface under
     it is dark in both themes. */
  --on-media:#FFFFFF;

  /* Lines */
  --line:#DCDCDC; --border-strong:rgba(0,0,0,.13);

  /* Status */
  --success:#2D7A3A; --warning:#8A6408; --error:#C4392A;

  /* Type */
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'DM Sans',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  --font-mono:'SF Mono',ui-monospace,Menlo,Monaco,Consolas,monospace;
  --font-sans:var(--font-body);

  /* Radii — legacy aliases repointed to the shell radius tokens in saltlight.css
     (--r-lg/--r-xl were inverted at 8px, smaller than --r-md) */
  --r-md:var(--radius-md); --r-lg:var(--radius-lg); --r-xl:var(--radius-lg);

  /* Shadows — subtle, neutral */
  --shadow-base: 0 0 0 rgba(0,0,0,0);
  --shadow-1:    0 1px 3px rgba(0,0,0,.08);
  --shadow-2:    0 4px 16px rgba(0,0,0,.10);

  /* Brand gradient — warm cream base with an orange glow (matches the brand mark) */
  --gradient-warm: radial-gradient(125% 135% at 92% 6%, rgba(232,115,42,.50) 0%, rgba(242,154,92,.20) 34%, #FBEFE4 64%);

  /* ---- legacy aliases, repointed to v3.0 so existing var() usage rebrands for free ---- */
  --primary:var(--navy);
  --accent:var(--orange-light);
  --muted:var(--stone);
  --border:var(--line);
  --soft-blue:#F5E9DF; --soft-yellow:#F8F0E6;
  --vibrant-blue:var(--orange);
  --accent-dark-blue:var(--orange-dark);
  --accent-light-blue:#F5E9DF;
  --accent-light-yellow:#FBEFD9;
  --text-secondary:#6B6B6B;
  /* careflows.css has always referenced this one but nothing defined it, so
     those rules rendered with no colour at all. Aliased, not renamed. */
  --text-primary:var(--ink);
  --text-on-primary:var(--white);
  --background-main:var(--canvas);
  --background-card:var(--white);
  --border-color:var(--line);

  /* =========================
     CANONICAL SCALE — design-consistency batch 1 (tokens only).
     From the 2026-07-15 audit; later batches re-point page CSS to these.
     ========================= */

  /* Spacing (4/8px rhythm) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;

  /* Semantic spacing */
  --page-pad:32px;          /* #main_content desktop; 16px at ≤850px */
  --card-pad:24px;          /* primary card inset */
  --card-pad-sm:16px;       /* dense cards, toolbars, list rows */
  --gap-section:32px;       /* BETWEEN major page sections (header → toolbar → list) */
  --gap-card:16px;          /* between cards WITHIN a grid or group */
  --gap-inline:8px;         /* icon-text rows, chip gaps */

  /* Type scale (6 steps + page title; 11px floor — nothing below 11px anywhere) */
  --text-2xs:11px;          /* eyebrows, table headers, tiny chips */
  --text-xs:12px;           /* chips, meta, labels */
  --text-sm:13px;           /* subtitles, secondary text */
  --text-base:14px;         /* body (portal default) */
  --text-md:16px;           /* card names, card-level section headings */
  --text-lg:22px;           /* sub-page titles + page-section headings */
  --text-h1:28px;           /* top-level page titles — brand spec v3.0 (overrides v7's 34px) */
  --text-h1-mobile:24px;    /* EVERY top-level h1 at ≤768px */
  --text-input-mobile:16px; /* iOS zoom guard: mobile inputs/selects never below 16px */

  /* Radii — --radius-sm/-md/-lg (8/12/16px) live in the saltlight.css :root shell
     tokens; cards stay on --radius-lg 16px. Only the pill radius is added here. */
  --radius-full:9999px;     /* pills, chips, primary CTA */

  /* Container widths — top-level sidebar pages share the shell's left edge
     (no max-width); SUB-pages (wizard, careflow detail, leader profile/form,
     guest detail-forms) center at --container-narrow. Applied in later batches. */
  --container-narrow:880px;

  /* Tints (replace the raw-rgba copies page by page) */
  --orange-tint:rgba(232,115,42,.10);

  /* Status chip fills + the info blue. The pages below carried these as raw
     Tailwind hexes; they need names so the dark theme can re-point them.
     Solid, not washes — these sit behind chip text and have to stay opaque
     enough to read against whatever surface the chip lands on. */
  --info:#2B5FB6;
  --success-tint:#E6F7EC;
  --info-tint:#EEF4FF;
  --error-tint:#FCE9E4;
  --warning-tint:#FFF6E0;
  --neutral-tint:#EFEFEF;

  /* CareFlow wizard section washes. Barely-there tints that group a form
     section; they are NOT status colours and must not borrow status tokens. */
  --wash-warm:#FCF9F4; --wash-cool:#F6F9FC; --wash-green:#F6FBF7; --wash-violet:#F9F7FC;

  /* The agent-trace waterfall distinguishes LLM steps from tool steps by
     hue. --info carries one; this carries the other. */
  --trace-tool:#6D4AA8;
}

/* =========================
   DARK THEME — re-points the tokens above. Nothing else in the portal changes.
   The boot script in public/index.html resolves "follow the system" down to a
   concrete light/dark value before first paint, so this one block covers both
   an explicit choice and the OS preference.
   These are re-mapped values, NOT an inversion: the light-mode relationships
   are preserved (the card surface stays lighter than the page behind it), so
   every existing var() usage keeps the hierarchy it was designed with.
   Every text-on-surface pair here is >= 4.5:1 — see test/dark_theme.test.js,
   which fails if a value drifts below AA.
   ========================= */
html[data-theme="dark"]{
  color-scheme:dark;

  /* Brand — lifted and softened. Light-mode orange is too dense against a dark
     surface: it reads muddy and haloes at small sizes. --orange-dark is the
     deeper orange on light, used both as text and as a fill; on dark it flips
     to the lighter one, kept rich enough to still read as the brand orange
     rather than peach (7.2:1 as text, and as a fill under dark text). */
  --orange:#F08A3E; --orange-light:#F7A868; --orange-dark:#EE9350;

  /* Ink + neutrals. --ink is text so it goes light; --white is the card and
     --canvas the page behind it, so the card stays the lighter of the two,
     exactly as in light mode. --navy is a heading/icon colour that is almost
     invisible on dark, so it becomes a light slate that keeps the cool cast. */
  --ink:#EDEAE6; --ink-soft:#C2BDB7; --stone:#8B857D; --navy:#A9B6D4;
  --canvas:#131211; --white:#1E1C1A;

  /* Chrome sits BELOW the page so the rail still reads as a rail and the
     active pill (which is on --white) still connects to the content area. */
  --chrome:#0D0C0B; --chrome-raised:#2C2926;

  /* Lines */
  --line:#302D2A; --border-strong:rgba(255,255,255,.16);

  /* Status */
  --success:#5FB871; --warning:#D9A93B; --error:#F0796B;

  /* Shadows barely register on a dark surface, so they go deeper and the
     lighter card surface carries most of the elevation instead. */
  --shadow-1:    0 1px 3px rgba(0,0,0,.5);
  --shadow-2:    0 4px 16px rgba(0,0,0,.6);

  --gradient-warm: radial-gradient(125% 135% at 92% 6%, rgba(240,138,62,.34) 0%, rgba(247,168,104,.13) 34%, #221D19 64%);

  /* Aliases holding literal light values in :root — the var()-based aliases
     (--primary, --border, --background-card …) re-resolve on their own. */
  --soft-blue:#2A2320; --soft-yellow:#292420;
  --accent-light-blue:#2A2320; --accent-light-yellow:#2E2718;
  --text-secondary:#A6A099;

  /* Tints need more opacity to register against a dark surface. */
  --orange-tint:rgba(240,138,62,.16);
  --success-tint:rgba(95,184,113,.15);

  /* Status chips: the light theme fills them with a pale wash and writes dark
     text on it. On dark that inverts — a low-opacity wash of the status colour
     itself, with the (already lifted) status colour as the text. */
  --info:#8FB2F0;
  --info-tint:rgba(143,178,240,.16);
  --error-tint:rgba(240,121,107,.16);
  --warning-tint:rgba(217,169,59,.16);
  --neutral-tint:rgba(255,255,255,.08);

  /* Same job on dark: a hint of separation, not a visible panel. */
  --wash-warm:#221E1A; --wash-cool:#1A1D22; --wash-green:#1A211C; --wash-violet:#1F1C22;
  --trace-tool:#B79BE4;
}

body{ font-family:var(--font-sans) !important; color:var(--ink) !important; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  background: var(--canvas);
  color: var(--stone);
  border: 0.5px solid var(--border-strong);
}
.chip.text-vibrant-blue {
  background: var(--orange-tint);
  color: var(--orange-dark);
  border-color: transparent;
}

.create-careflow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  background: var(--brand-fill);
  color: var(--on-media);
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2.5rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}
.create-careflow:hover {
  background: var(--brand-fill-hover);
}

/* =========================
   TILES – WRAPPER GRID (first child contains the 3 items)
   ========================= */
.home_page .home_content > div:first-child{
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: 1fr !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* =========================
   TILES – CARD SHELL (three items)
   ========================= */
.home_page .home_content > div:first-child > *{
  background: var(--white) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-shadow: var(--shadow-1) !important; /* will be softened below */
  text-decoration: none !important;
  color: inherit !important;
}

/* =========================
   TILES – STRIP INNER DECORATION
   ========================= */
.home_page .home_content > div:first-child > * > *{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================
   TILES – SPACING AROUND / BETWEEN
   ========================= */
.home_page .home_content > div:first-child{ gap: 24px !important; }
.home_page .home_content > div:first-child > *{ padding: 24px !important; }

/* =========================
   TILES – TEXT COLUMN (title/desc)
   ========================= */
.home_page .home_content > :first-child > * :is(p,small,span){
  grid-column: 2;
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 23px;
  line-height: 1;
  color: var(--navy);
}

/* =========================
   RESPONSIVE – 3 COLUMNS FOR TILES
   ========================= */
@media (min-width:900px){
  .home_page .home_content > div:first-child{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    width: 100% !important;
    max-width: 1250px !important;
  }
}

/* =========================
   “TAILWIND-ISH” CARD DECORATION + GRID AREAS
   (kept to respect your current structure)
   ========================= */
.home_page .home_content > :first-child > *{
  background: var(--white) !important;                      /* card surface */
  border: 0.5px solid var(--border) !important;             /* hairline */
  border-radius: 16px !important;                           /* v7 card radius */
  box-shadow: var(--shadow-1) !important;                   /* subtle lift */
  padding: 1.5rem !important;                               /* p-6 (fixed from 'rem') */
  height: 100% !important;

  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) 16px !important;/* icon | text | chevron */
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "icon Title   chevron"
    "icon label   chevron"
    "icon desc    chevron" !important;
  column-gap: 8px !important;
  row-gap: 6px !important;
}

/* =========================
   CARD – MAKE INNER WRAPPERS PASS-THROUGH
   ========================= */
.home_page .home_content > :first-child > * > *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* =========================
   ICON (left)
   ========================= */
.home_page .home_content > :first-child > * svg,
.home_page .home_content > :first-child > * img{
  grid-area: icon !important;
  width: 25px !important;
  height: 25px !important;
  align-self: start !important;
  justify-self: center !important;
}

/* =========================
   LABEL LINE (first leaf div)
   ========================= */
.home_page .home_content > :first-child > * div:not(:has(*)):nth-of-type(1){
  grid-area: label !important;
  font-size: .875rem !important;
  line-height: 1rem !important;
  font-weight: 400 !important;
  color: var(--stone) !important;
}

/* =========================
   CHEVRON (right)
   ========================= */
.home_page .home_content > :first-child > *::after{
  content: "›";
  grid-area: chevron !important;
  justify-self: end !important;
  align-self: center !important;
  font-size: 18px !important;
  color: var(--stone) !important;
  opacity: .9 !important;
}

/* =========================
   TILE SHADOW BEHAVIOR
   (subtle base; stronger on hover)
   ========================= */
.home_page .home_content > :first-child > *,
.home_page .home_content > div:first-child > *{
  box-shadow: var(--shadow-base) !important;                /* near-flat */
  transition: box-shadow .18s ease, transform .18s ease !important;
}
.home_page .home_content > :first-child > *:hover,
.home_page .home_content > div:first-child > *:hover{
  box-shadow: var(--shadow-1) !important;                   /* lift on hover */
  transform: translateY(-1px);
}

/* =========================
   QUICK-ACTION BUTTONS (.actions) — clickable v7 cards
   ========================= */
.home_page .actions > *{
  background: var(--white) !important;
  cursor: pointer !important;
}
.home_page .actions > * span{
  color: var(--ink) !important;
  font-weight: 600 !important;
}


/* =========================
   SHARED PAGE HEADER ICON (v7) — consistent across pages
   ========================= */
.page_head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.page_head_icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--orange-tint);
  color: var(--orange-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.page_head_icon svg {
  width: 24px;
  height: 24px;
}

/* =========================
   DASHBOARD (v7 layout)
   ========================= */
.dash_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.dash_header_left h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.dash_header_left p {
  font-size: 13px;
  color: var(--stone);
  margin: 4px 0 0;
}
.btn_primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-fill);
  color: var(--on-media);
  border: none;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.btn_primary:hover { background: var(--brand-fill-hover); }

/* ── JOURNEY HERO (the connection flow) ── */
.home_page .journey {
  background: var(--white);
  border-radius: 16px;
  border: 0.5px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 22px 24px 20px;
  margin-bottom: 14px;
}
.home_page .journey_top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-bottom: 18px;
}
.home_page .journey_top h2 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -0.2px; color: var(--ink); }
.home_page .journey_top .sub { font-size: 12px; color: var(--stone); }
.home_page .flow { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: stretch; }
.home_page .stage {
  position: relative;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  cursor: pointer;
}
.home_page .stage:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 46px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--line);
  border-right: 2px solid var(--line);
  transform: rotate(45deg);
  background: var(--white);
  z-index: 2;
}
.home_page .stage_tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 9999px;
  margin-bottom: 12px;
  background: var(--info-tint);
  color: var(--navy);
}
.home_page .stage_tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.home_page .stage.crack .stage_tag { background: var(--accent-light-yellow); color: var(--orange-dark); }
.home_page .stage.crack .stage_tag .dot { background: var(--orange); }
.home_page .stage.crack .stage_count { color: var(--orange-dark); }
.home_page .stage--in_conversation .stage_tag,
.home_page .stage--followed_up .stage_tag { background: var(--success-tint); color: var(--success); }
.home_page .stage--in_conversation .stage_tag .dot,
.home_page .stage--followed_up .stage_tag .dot { background: var(--success); }
.home_page .stage_count {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin-bottom: 2px;
}
.home_page .stage_explain { font-size: 11.5px; color: var(--text-secondary); line-height: 1.35; margin-bottom: 12px; min-height: 46px; }
.home_page .peek { display: flex; align-items: center; }
.home_page .peek .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange-tint);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  border: 2px solid var(--white);
  margin-left: -8px;
  flex-shrink: 0;
}
.home_page .peek .avatar:first-child { margin-left: 0; }
.home_page .peek .more { font-size: 10.5px; color: var(--stone); font-weight: 600; margin-left: 8px; }

/* ── WENT QUIET — the alarm, pulled out of the flow ── */
.home_page .quiet_alarm {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 13px 18px;
  background: var(--error-tint);
  border: 1px solid color-mix(in srgb, var(--error) 22%, transparent);
  border-radius: 12px;
  cursor: pointer;
}
.home_page .quiet_alarm .qa_icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--error) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--error);
}
.home_page .quiet_alarm .qa_icon svg { width: 18px; height: 18px; }
.home_page .quiet_alarm .qa_count { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--error); letter-spacing: -1px; flex-shrink: 0; }
.home_page .quiet_alarm .qa_text { flex: 1; min-width: 0; }
.home_page .quiet_alarm .qa_text .t1 { font-size: 13px; font-weight: 700; color: var(--error); }
.home_page .quiet_alarm .qa_text .t2 { font-size: 11.5px; color: var(--error); margin-top: 1px; }
.home_page .quiet_alarm .qa_peek { display: flex; align-items: center; flex-shrink: 0; }
.home_page .quiet_alarm .qa_peek .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 600;
  border: 2px solid var(--error-tint);
  margin-left: -7px;
}
.home_page .quiet_alarm .qa_peek .avatar:first-child { margin-left: 0; }
.home_page .quiet_alarm .qa_arrow { color: var(--error); flex-shrink: 0; font-size: 20px; }

/* ── BOTTOM ROW ── */
.home_page .home-bottom { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }

/* needs your hand */
.home_page .hand-card {
  background: var(--white);
  border-radius: 16px;
  border: 0.5px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.home_page .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 0.5px solid var(--line);
}
.home_page .card-header-left { display: flex; align-items: baseline; gap: 10px; }
.home_page .card-header h2 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.home_page .card-header-sub { font-size: 12px; color: var(--stone); }
.home_page .card-link { font-size: 12px; color: var(--orange-dark); font-weight: 500; cursor: pointer; }
.home_page .card-link:hover { color: var(--orange-dark); text-decoration: underline; }
.home_page .guest-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 20px;
  border-bottom: 0.5px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}
.home_page .guest-row:last-child { border-bottom: none; }
.home_page .guest-row:hover { background: var(--canvas); }
.home_page .guest-row .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange-tint);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.home_page .guest-row .avatar--quiet { background: rgba(196, 57, 42, 0.1); color: var(--error); }
.home_page .guest-info { flex: 1; min-width: 0; }
.home_page .guest-info .name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.home_page .guest-info .meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.home_page .guest-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.home_page .tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.home_page .tag--first { background: var(--accent-light-yellow); color: var(--orange-dark); }
.home_page .tag--quiet { background: var(--error-tint); color: var(--error); }
.home_page .time-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--neutral-tint);
  color: var(--ink-soft);
  border: 0.5px solid var(--border-strong);
  min-width: 50px;
  text-align: center;
}
.home_page .time-tag.urgent { background: color-mix(in srgb, var(--error) 8%, transparent); color: var(--error); border-color: rgba(196, 57, 42, 0.2); }
.home_page .chev { color: var(--stone); font-size: 16px; }
.home_page .dash_list_empty { padding: 26px 20px; text-align: center; color: var(--stone); font-size: 13px; }

/* impact */
.home_page .impact-stack { display: flex; flex-direction: column; gap: 14px; }
.home_page .impact-card {
  background: var(--white);
  border-radius: 16px;
  border: 0.5px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 15px 17px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home_page .i-eyebrow { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); margin-bottom: 6px; }
.home_page .i-number { font-size: 32px; font-weight: 600; color: var(--ink); letter-spacing: -1.2px; line-height: 1; margin-bottom: 3px; }
.home_page .i-number small { font-size: 18px; color: var(--stone); }
.home_page .i-label { font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }
.home_page .i-bar { height: 5px; background: var(--canvas); border-radius: 5px; margin-top: 9px; overflow: hidden; }
.home_page .i-bar i { display: block; height: 100%; background: var(--success); border-radius: 5px; }

.dash_empty {
  padding: 40px;
  text-align: center;
  color: var(--stone);
  font-size: 13px;
  background: var(--white);
  border-radius: 16px;
  border: 0.5px solid var(--border);
}

/* ── RESPONSIVE (design breakpoints) ── */
@media (max-width: 768px) {
  .home_page .flow { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .home_page .stage { padding: 0 12px; }
  .home_page .stage:not(:last-child)::after { display: none; }
  .home_page .stage_count { font-size: 40px; }
  .home_page .stage_explain { min-height: 0; }
  .home_page .home-bottom { grid-template-columns: 1fr; gap: 12px; }
  .home_page .dash_header_left h1 { font-size: 24px; }
}
@media (max-width: 480px) {
  .home_page .flow { grid-template-columns: 1fr; gap: 0; }
  .home_page .stage { flex-direction: row; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--line); }
  .home_page .stage:last-child { border-bottom: none; }
  .home_page .stage_tag { margin-bottom: 0; order: 2; flex: 1; }
  .home_page .stage_count { font-size: 30px; margin: 0; order: 1; width: 46px; text-align: center; }
  .home_page .stage_explain { display: none; }
  .home_page .peek { order: 3; }
  .home_page .quiet_alarm .qa_peek { display: none; }
  .home_page .guest-row .meta { display: none; }
  .home_page .guest-right { gap: 7px; }
}

/* =========================
   HERO (Welcome…) — dev's home template still renders this block, so its
   base layout must stay until the v7 dashboard (separate MR) replaces it.
   ========================= */
.home_page .welcome{
  background: var(--gradient-warm) !important;
  border: 1px solid var(--line) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

.home_page .welcome h1{
  margin: 0 0 6px !important;
  font-weight: 800 !important;
  letter-spacing: -.8px;
  font-size: clamp(24px, 2.8vw, 32px) !important;
  color: var(--navy) !important;
}

.home_page .welcome_container .welcome_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.home_page .welcome_content_left {
  width: 100%;
}

.home_page .welcome_cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.welcome_tabs {
  display: inline-flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* The nav pill is deliberately the content-area colour so it reads as a tab
   joined to the page. On dark that leaves it 1.15:1 against the rail, so the
   shape needs an edge. Light mode already has all the contrast it needs. */
html[data-theme="dark"] .sidebar_pill,
html[data-theme="dark"] .sidebar_item--active {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}