/* ==========================================================================
   PeopsOS shared stylesheet
   --------------------------------------------------------------------------
   Every PeopsOS page links this file and nothing else. If you find yourself
   copying colours or component CSS into a page, stop and add it here instead.

   Contents
     1. Colour tokens (light + dark)
     2. Base
     3. Sidebar rail
     4. Stage and page furniture
     5. Buttons
     6. Home: setup panel
     7. What's new: feed
     8. Skills library
     9. How to: guides
    10. Notice and footer
    11. Narrow screens
   ========================================================================== */


/* 1. COLOUR TOKENS =========================================================

   Never write a hex value anywhere outside this section. Write var(--orange),
   var(--text), var(--bg). That is the whole reason light and dark is one
   change instead of two stylesheets.

   Colours come from the Peops brand guidelines:
     Blaze Orange   #FF5E00  courage        headlines, primary actions
     Supernova      #FFC600  intelligence   attention, "look here"
     Carnation Pink #FD9BC1  empathy        softer accents
     Black / White                          text and ground

   Green is the one colour outside the palette. It signals state (set up,
   done) and is never used decoratively.
   ========================================================================== */

/* Light is the default. */
:root {
  --orange:       #FF5E00;
  --orange-ink:   #D94F00;
  --orange-tint:  #FFEFE5;
  --yellow:       #FFC600;
  --yellow-tint:  #FFF1C2;
  --pink:         #FD9BC1;
  --pink-tint:    #FFEDF4;
  --green:        #06764C;
  --green-tint:   #E4F4EC;
  --green-ink:    #FFFFFF;

  --bg:           #FFFFFF;
  --surface:      #FAFAFA;
  --surface-2:    #F2F2F2;
  --border:       #E6E6E6;
  --border-2:     #D2D2D2;
  --text:         #000000;
  --text-2:       #4A4A4A;
  --text-3:       #8A8A8A;
  --shadow:       0 10px 34px rgba(0, 0, 0, .11);

  --pin-gap:      22px;
  --rail:         68px;
  --rail-open:    238px;
  --radius:       12px;
  --font:         'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark, because the operating system asks for it and nobody has chosen
   light. The attribute is deliberately called data-peops-theme rather than
   data-theme, so it can never collide with anything else that wants to
   manage the page's theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-peops-theme="light"]) {
    --orange:      #FF7A33;
    --orange-ink:  #FF9459;
    --orange-tint: #331A0A;
    --yellow:      #FFD34D;
    --yellow-tint: #332B0C;
    --pink:        #FFB0CF;
    --pink-tint:   #331B26;
    --green:       #3DD68C;
    --green-tint:  #0F2C1F;
    --green-ink:   #08241A;

    --bg:          #141414;
    --surface:     #1C1C1C;
    --surface-2:   #262626;
    --border:      #303030;
    --border-2:    #414141;
    --text:        #FFFFFF;
    --text-2:      #ABABAB;
    --text-3:      #7D7D7D;
    --shadow:      0 10px 34px rgba(0, 0, 0, .6);
  }
}

/* Dark, chosen explicitly with the switch. This block must stay AFTER the
   media query above: the two selectors have identical specificity, so
   source order is what lets an explicit choice beat the operating system. */
:root[data-peops-theme="dark"] {
  --orange:      #FF7A33;
  --orange-ink:  #FF9459;
  --orange-tint: #331A0A;
  --yellow:      #FFD34D;
  --yellow-tint: #332B0C;
  --pink:        #FFB0CF;
  --pink-tint:   #331B26;
  --green:       #3DD68C;
  --green-tint:  #0F2C1F;
  --green-ink:   #08241A;

  --bg:          #141414;
  --surface:     #1C1C1C;
  --surface-2:   #262626;
  --border:      #303030;
  --border-2:    #414141;
  --text:        #FFFFFF;
  --text-2:      #ABABAB;
  --text-3:      #7D7D7D;
  --shadow:      0 10px 34px rgba(0, 0, 0, .6);
}


/* 2. BASE ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}


/* 3. SIDEBAR RAIL ==========================================================
   68px of icons, expands to 238px on hover. Identical on every page. The
   only thing that changes per page is which link carries
   aria-current="page".
   ========================================================================== */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
  /* Asymmetric on purpose. While the rail is open it sits on top of the
     left edge of the page and anything under it cannot be clicked, so it
     gets out of the way quickly and opens at a more relaxed pace. */
  transition: width .09s ease, box-shadow .09s ease;
}

.rail:hover,
.rail:focus-within {
  width: var(--rail-open);
  box-shadow: var(--shadow);
  transition: width .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}

/* Only the rows are hoverable; the rest of the rail is transparent to the
   mouse. Two things follow. Clicks aimed at the page get through even while
   the rail is open, as long as they are not landing on a row. And moving
   the pointer into the empty middle counts as leaving the rail, so it
   closes instead of hanging open over the page.

   Wrapped in @supports because it needs :has(). Browsers without it fall
   back to the rule above, where the whole rail is the hover zone. */
@supports selector(.rail:has(*)) {
  .rail { pointer-events: none; }
  .rail-mark,
  .rail-nav,
  .nav-item,
  .rail-user { pointer-events: auto; }

  .rail:has(:hover),
  .rail:focus-within {
    width: var(--rail-open);
    box-shadow: var(--shadow);
    transition: width .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
  }
}

.rail-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.rail-glyph {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--orange);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.04em;
}

.rail-wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.rail-wordmark em { font-style: normal; color: var(--orange); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  width: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: background .14s ease, color .14s ease;
}

.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }

.nav-item[aria-current="page"] {
  background: var(--orange-tint);
  color: var(--orange-ink);
  font-weight: 600;
}

.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--orange);
}

/* Labels are present but transparent while collapsed, so the rail never
   reflows its own contents when it opens. */
.nav-label { opacity: 0; transition: opacity .16s ease; }
.rail:hover .nav-label,
.rail:focus-within .nav-label { opacity: 1; }

.rail-spacer { flex: 1; }

/* Theme switch, directly above the signed-in block. Shows the icon for the
   mode you would move TO: a moon while light, a sun while dark. */
.theme-toggle { color: var(--text-3); font-weight: 500; }
.theme-toggle:hover { color: var(--text); background: var(--surface-2); }
.theme-toggle .ico-sun { display: none; }
.theme-toggle .ico-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-peops-theme="light"]) .theme-toggle .ico-sun { display: block; }
  :root:not([data-peops-theme="light"]) .theme-toggle .ico-moon { display: none; }
}
:root[data-peops-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-peops-theme="dark"] .theme-toggle .ico-moon { display: none; }

.rail-user {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 10px 6px 0;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--orange-tint);
  color: var(--orange-ink);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}

.rail-user-text { min-width: 0; line-height: 1.25; }
.rail-user-text b { display: block; font-size: 13px; font-weight: 600; }
.rail-user-text span { display: block; font-size: 11px; color: var(--text-3); }


/* 4. STAGE AND PAGE FURNITURE ============================================== */

.stage {
  margin-left: var(--rail);
  padding: 40px 44px 64px;
  max-width: 1140px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}

.page-head { margin-bottom: 30px; }

/* Brand rule: titles in Blaze Orange, bold, Inter. */
.page-head h1 {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  color: var(--orange);
  margin: 8px 0 10px;
}

.page-head p {
  color: var(--text-2);
  font-weight: 300;
  font-size: 16px;
  max-width: 60ch;
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 38px 0 14px;
}
.section-label:first-of-type { margin-top: 0; }


/* 5. BUTTONS =============================================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 15px 30px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--orange);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, transform .1s ease;
}
.btn-primary:hover { background: var(--orange-ink); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary svg { width: 18px; height: 18px; }

/* Setup complete. Green is state, never decoration. */
.btn-primary.is-ready { background: var(--green); color: var(--green-ink); }
.btn-primary.is-ready:hover { filter: brightness(1.08); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--orange);
  border-radius: 9px;
  padding: 9px 18px;
  background: transparent;
  color: var(--orange-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease;
}
.btn-secondary:hover { background: var(--orange-tint); }
.btn-secondary svg { width: 15px; height: 15px; }

.link-action {
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 0;
}
.link-action:hover { text-decoration: underline; }

.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
}


/* 6. HOME: SETUP PANEL ===================================================== */

.setup {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.setup-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-top: 1px solid var(--border);
}
.setup-row:first-child { border-top: 0; }

.tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: grid;
  place-items: center;
}
.tick.done { background: var(--green); }
.tick.todo { border: 2px solid var(--border-2); }
.tick svg { width: 12px; height: 12px; stroke: var(--green-ink); }

.setup-body { flex: 1; min-width: 0; }
.setup-body h4 { font-size: 15px; font-weight: 600; display: inline; }
.setup-body p { font-size: 13px; color: var(--text-2); font-weight: 300; margin-top: 4px; }

.chip-opt {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 2px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
}

.done-flag {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
}

.preview-reset {
  margin-top: 22px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 1px dashed var(--border-2);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}
.preview-reset:hover { color: var(--text-2); border-color: var(--text-3); }


/* 7. WHAT'S NEW: FEED ====================================================== */

.feed { display: flex; flex-direction: column; }

.post {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}
.post:first-child { border-top: 0; padding-top: 4px; }

.post-meta { padding-top: 2px; }

.post-date {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.post-latest {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  margin-bottom: 9px;
}
.tag.t-new  { background: var(--orange-tint); color: var(--orange-ink); }
.tag.t-imp  { background: var(--yellow-tint);  color: #8A6A00; }
.tag.t-sec  { background: var(--green-tint);   color: var(--green); }
.tag.t-note { background: var(--pink-tint);    color: #B23A70; }

@media (prefers-color-scheme: dark) {
  :root:not([data-peops-theme="light"]) .tag.t-imp  { color: var(--yellow); }
  :root:not([data-peops-theme="light"]) .tag.t-note { color: var(--pink); }
}
:root[data-peops-theme="dark"] .tag.t-imp  { color: var(--yellow); }
:root[data-peops-theme="dark"] .tag.t-note { color: var(--pink); }

.post h3 { font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.post p { font-size: 14.5px; color: var(--text-2); font-weight: 300; max-width: 62ch; }
.post .byline { font-size: 12.5px; color: var(--text-3); margin-top: 10px; }


/* 8. SKILLS LIBRARY ======================================================== */

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }

.search-wrap { position: relative; flex: 1; }
.search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  stroke: var(--text-3);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .16s ease;
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus { border-color: var(--orange); }

.view-toggle {
  display: flex;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.view-toggle button {
  width: 46px;
  height: 46px;
  border: 0;
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.view-toggle button + button { border-left: 1px solid var(--border-2); }
.view-toggle button.on { background: var(--text); color: var(--bg); }
.view-toggle svg { width: 18px; height: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.chips button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--bg);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.chips button:hover { border-color: var(--text-3); }
.chips button.on {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
}

.skill {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent, var(--orange));
  border-radius: var(--radius);
  padding: 16px;
}

.skill-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.skill h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.skill code {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
  margin: 5px 0 9px;
}
.skill p {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 14px;
}

.btn-run {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 9px;
  background: var(--orange);
  color: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease;
}
.btn-run:hover { background: var(--orange-ink); }
.btn-run svg { width: 12px; height: 12px; fill: currentColor; }

.rows { display: flex; flex-direction: column; gap: 8px; }

.srow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, var(--orange));
  border-radius: 10px;
}
.srow-text { flex: 1; min-width: 0; }
.srow-text h3 { font-size: 14.5px; font-weight: 600; }
.srow-text p {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srow .btn-run { width: auto; padding: 8px 16px; flex-shrink: 0; }

.empty {
  text-align: center;
  padding: 56px 16px;
  color: var(--text-3);
  font-size: 14px;
}


/* 9. HOW TO: GUIDES ======================================================== */

.starter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 6px;
}

.step { padding: 20px; border-left: 1px solid var(--border); }
.step:first-child { border-left: 0; }
.step-n {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--orange-ink);
  margin-bottom: 9px;
}
.step h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.step p { font-size: 13px; font-weight: 300; color: var(--text-2); }

.guides { display: flex; flex-direction: column; gap: 8px; }

.guide {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.guide:hover { border-color: var(--orange); background: var(--orange-tint); }

.guide-text { flex: 1; min-width: 0; }
.guide-text h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.guide-text p { font-size: 13px; font-weight: 300; color: var(--text-2); }

.guide-time {
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  flex-shrink: 0;
}
.guide-arrow { width: 16px; height: 16px; stroke: var(--text-3); flex-shrink: 0; }
.guide:hover .guide-arrow { stroke: var(--orange-ink); }

/* Arrived here from "Get started" on Home. Brand rule: Supernova means
   "this is the bit that needs your attention". */
.guide.is-flagged {
  border-color: var(--yellow);
  background: var(--yellow-tint);
  box-shadow: 0 0 0 3px var(--yellow-tint);
}
.guide.is-flagged .guide-arrow { stroke: var(--orange); }

.flag-note {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--yellow-tint);
  border: 1px solid var(--yellow);
  font-size: 13px;
  color: var(--text-2);
}
.flag-note.show { display: flex; }
.flag-note b { color: var(--text); }


/* 10. NOTICE AND FOOTER ==================================================== */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 70ch;
  margin-top: 44px;
  padding: 13px 16px;
  background: var(--yellow-tint);
  border: 1px solid var(--yellow);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.notice svg { width: 16px; height: 16px; stroke: var(--yellow); flex-shrink: 0; margin-top: 2px; }
.notice b { color: var(--text); }

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-3);
}
.foot a { color: var(--orange-ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; }


/* 11. NARROW SCREENS ======================================================= */

@media (max-width: 860px) {
  .post { grid-template-columns: 1fr; gap: 8px; }
  .post-meta { display: flex; align-items: center; gap: 12px; }
  .post-latest { margin-top: 0; }
  .step { border-left: 0; border-top: 1px solid var(--border); }
  .step:first-child { border-top: 0; }
}

@media (max-width: 620px) {
  :root { --rail: 56px; }
  .stage { padding: 28px 20px 48px; }
  .toolbar { flex-wrap: wrap; }
  .view-toggle { display: none; }
  .srow { flex-wrap: wrap; }
  .srow-text p { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* 12. HOME DASHBOARD =======================================================
   Running skills, each shown as a row of stages: dots joined by long
   dashes. The number of dots is however many stages that skill has.
   ========================================================================== */

.dash { display: flex; flex-direction: column; gap: 12px; }

.dash-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0;
  transition: border-color .16s ease;
}
.dash-card:hover { border-color: var(--border-2); }

/* Three tracks, the outer two equal, so the skill name lands on the card's
   centre line no matter how wide the client pill or the status chip are.
   Flex would have centred it in the leftover space instead, which drifts
   as soon as one side is longer than the other. */
.dash-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.dash-head .client-pill { justify-self: start; }
.dash-head .status-chip { justify-self: end; }
.dash-head h3 { text-align: center; min-width: 0; }

.dash-head h3 { font-size: 15px; font-weight: 600; }

/* Where the run is, in words, so you do not have to read the dots. */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-chip svg { width: 11px; height: 11px; }
.status-chip.you      { background: var(--yellow); color: #3D2E00; }
.status-chip.blocked  { background: var(--yellow); color: #3D2E00; }
.status-chip.active   { background: var(--orange-tint); color: var(--orange-ink); }
.status-chip.finished { background: var(--green-tint); color: var(--green); }

.dash-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Client chip. Colour comes in per client as --c / --c-ink, so the label
   always sits at full contrast on that client's own colour. */
.client-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--c, var(--surface-2));
  color: var(--c-ink, var(--text));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* --- the pipeline ------------------------------------------------------- */

.pipe-wrap { overflow-x: auto; padding: 16px 18px 12px; }

.pipe {
  display: flex;
  align-items: flex-start;
  min-width: min-content;
}

/* NB: .pipe-stage, not .stage. `.stage` is already the <main> wrapper on
   every page, and reusing the name silently turned the whole page into a
   94px flex column. */
.pipe-stage {
  flex: 0 0 auto;
  width: 94px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.stage-label {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-3);
  opacity: 0;
  transition: opacity .16s ease;
}
.pipe-stage.on .stage-label { color: var(--text); font-weight: 600; }

/* Thirty small grey labels across five cards is most of what made this
   page feel busy. At rest the dots carry the shape of the run and the
   status chip says where it is; the labels arrive when you hover. They
   keep their space either way, so nothing moves. */
.dash-card:hover .stage-label,
.dash-card:focus-within .stage-label { opacity: 1; }

/* The connector. Long dashes rather than a solid rule, so an unfinished
   run reads as unfinished even in a screenshot. */
.link {
  flex: 1 1 auto;
  min-width: 26px;
  height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--border);
}
.link.done { background: var(--green); }

/* --- stage markers ------------------------------------------------------
   State is carried by shape as well as colour: a circle is a normal stage,
   a rounded square is a blocker. That survives a greyscale print and a
   colour-blind reader. */
.dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid var(--border-2);
}
.dot svg { width: 11px; height: 11px; }

.dot.done {
  background: var(--green);
  border-color: var(--green);
  color: var(--green-ink);
}

/* Only the LAST completed step stays green. Everything finished before it
   is history, so it drops to grey: still a tick, no longer competing for
   attention. Five runs of all-green ticks read as a wall of colour and
   bury the one marker that matters, which is how far each run actually
   got. */
.dot.done.past {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-3);
}

.dot.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--orange-tint);
}

/* Supernova means attention, per the brand. Both of the states that need a
   human use it. */
.dot.you {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #3D2E00;
}

.dot.blocked {
  border-radius: 6px;
  background: var(--yellow);
  border-color: #8A6A00;
  color: #3D2E00;
}

.dot.todo { color: transparent; }

/* --- legend + status line ----------------------------------------------- */

/* Bottom row: the note on the left, the dates on the right. The note is
   detail rather than status, so it stays invisible until you hover, but it
   keeps its space either way and nothing moves. */
.dash-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px 14px;
  font-size: 12.5px;
  color: var(--text-2);
}

.dash-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  opacity: 0;
  transition: opacity .16s ease;
}
.dash-card:hover .dash-note,
.dash-card:focus-within .dash-note { opacity: 1; }
.dash-note svg { width: 14px; height: 14px; flex-shrink: 0; }
.dash-foot svg { width: 14px; height: 14px; flex-shrink: 0; }
.dash-foot.needs { color: var(--text); }
.dash-foot.needs b { font-weight: 600; }

/* 13. SKILLS LIBRARY: PREVIEW PANE ========================================= */

.lib-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 324px;
  gap: 20px;
  align-items: start;
}

.preview {
  position: sticky;
  top: 24px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent, var(--orange));
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
}

.preview-empty { color: var(--text-3); font-size: 13px; }

.preview h3 { font-size: 17px; font-weight: 600; margin: 6px 0 2px; }
.preview code {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.preview p.lead { font-size: 13.5px; font-weight: 300; color: var(--text-2); margin-bottom: 16px; }

.preview-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.fact { display: flex; gap: 12px; font-size: 12.5px; }
.fact dt { flex: 0 0 84px; color: var(--text-3); }
.fact dd { margin: 0; color: var(--text); flex: 1; }

.data-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.data-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}
.data-dot.amber::before { background: var(--yellow); }

.skill.selected {
  border-color: var(--accent, var(--orange));
  box-shadow: 0 0 0 3px var(--orange-tint);
}
.srow.selected {
  border-color: var(--accent, var(--orange));
  box-shadow: 0 0 0 3px var(--orange-tint);
}


/* 14. RUN DIALOG =========================================================== */

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .45);
}
.modal-back.show { display: flex; }

.modal {
  width: 100%;
  max-width: 420px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.modal h3 { font-size: 18px; font-weight: 700; color: var(--orange); margin-bottom: 6px; }
.modal p { font-size: 13.5px; color: var(--text-2); font-weight: 300; margin-bottom: 18px; }

.field { display: block; margin-bottom: 18px; }
.field span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}

.select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.btn-ghost {
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 10px 18px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.modal .btn-primary { padding: 10px 22px; font-size: 13.5px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 90;
  display: none;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--green);
  color: var(--green-ink);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.toast.show { display: flex; }
.toast svg { width: 15px; height: 15px; }


/* 15. CLIENT OVERVIEW TABLE ================================================ */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table.clients {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  font-size: 13px;
}

table.clients th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  padding: 11px 14px;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

table.clients td {
  padding: 15px 14px;
  border-top: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-2);
  font-weight: 300;
  line-height: 1.5;
}

table.clients tr:hover td { background: var(--surface); }

.cl-name { display: flex; flex-direction: column; gap: 7px; }
.cl-name b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cl-where { font-size: 11.5px; color: var(--text-3); }

/* holds .value-chip items in the client table. NOT .values — that name is
   the landing page's values section, and using it here turned that section
   into a flex row. See the naming rule in STYLE.md. */
.value-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.value-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--pink-tint);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.unpublished { font-style: italic; color: var(--text-3); font-size: 12px; }

.docs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.doc-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--orange-ink);
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.doc-line:hover { text-decoration: underline; }
.doc-line svg { width: 13px; height: 13px; flex-shrink: 0; }
.doc-line.missing { color: var(--text-3); }


/* 16. DATA GUIDELINES ONE-PAGER ============================================ */

.gate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.gate-cell { background: var(--surface); padding: 16px 18px; }
.gate-n {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--orange-ink);
  margin-bottom: 8px;
}
.gate-cell p { font-size: 13px; color: var(--text-2); font-weight: 300; }

.lights { display: flex; flex-direction: column; gap: 12px; }

.light {
  border: 1px solid var(--border);
  border-left: 4px solid var(--lc, var(--border-2));
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--bg);
}
.light h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.light h3::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--lc);
}
.light > p { font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.light ul { display: flex; flex-direction: column; gap: 6px; }
.light li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: var(--text-2);
  font-weight: 300;
  line-height: 1.5;
}
.light li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-2);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-ink);
  text-decoration: none;
  margin-bottom: 18px;
}
.back-link:hover { text-decoration: underline; }
.back-link svg { width: 14px; height: 14px; }


/* 17. STARTER STEPS (restyled) ============================================= */

.starter { background: var(--surface-2); }
.step { background: transparent; }
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  margin-bottom: 10px;
}


/* 18. NARROW SCREENS, SECOND PASS ========================================== */

@media (max-width: 1040px) {
  .lib-layout { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; order: -1; }
}

@media (max-width: 620px) {
  .dash-meta { margin-left: 0; width: 100%; }
  .legend { gap: 8px 14px; }
}


/* 19. ONE-PAGER LINK BLOCK ================================================= */

.guide.onepager {
  border-color: var(--yellow);
  background: var(--yellow-tint);
  padding: 18px;
}
.guide.onepager:hover { border-color: var(--orange); }

.onepager-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--bg);
  color: var(--orange);
}
.onepager-mark svg { width: 19px; height: 19px; }

.guide.onepager .guide-text h4 { font-size: 15.5px; }


/* 20. SECTION TITLE ========================================================
   A second heading at page-title weight, for when a page has two real
   sections rather than one. Same type as the h1 so the page reads as two
   equal parts, with room above it. */

.h-section {
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
  margin: 56px 0 8px;
}
.h-section + p {
  color: var(--text-2);
  font-weight: 300;
  font-size: 15.5px;
  max-width: 60ch;
  margin-bottom: 22px;
}


/* 21. LIBRARY PREVIEW ON TOP ===============================================
   The selected skill spans the full width above the cards, so it reads as
   one band rather than a sidebar competing with the grid. */

.lib-layout { display: block; }

.preview {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
  gap: 28px;
  align-items: center;
  align-content: center;
  margin-bottom: 22px;
  padding: 20px 22px;
  /* Fixed height on purpose. The pane sits ABOVE the cards, so if it grew
     when you hovered a skill, the grid underneath would slide down and the
     card would move out from under your cursor. That reflow then changes
     what is hovered, and the whole thing oscillates. A constant height
     costs a little white space and removes the problem completely. */
  min-height: 196px;
}

.preview-main { min-width: 0; }
.preview h3 { margin: 6px 0 2px; }
.preview p.lead { margin-bottom: 0; }

.preview-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  border: 0;
}

.preview-run { align-self: center; }
.preview .btn-run { width: auto; padding: 11px 22px; white-space: nowrap; }

.preview-empty { grid-column: 1 / -1; }

/* three across at desk width */
.grid { grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); }

@media (max-width: 900px) {
  .preview { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .preview-run { align-self: start; }
}


/* 22. CLIENT FILTERS ======================================================= */

.client-tools { display: flex; gap: 10px; margin-bottom: 14px; }
.client-tools .search-wrap { max-width: 420px; }

.no-match {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}


/* 23. KEY STEPS IN THE GUIDE LISTS =========================================
   The three guides that make up the path a new consultant walks. Numbered
   so they line up with the 01/02/03 cards above, and lifted out of the
   plain list so you can see where to start. */

.guide.keystep {
  border-color: var(--yellow);
  background: var(--yellow-tint);
  padding: 18px;
  gap: 18px;
}
.guide.keystep:hover { border-color: var(--orange); }

.keystep-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--orange);
}
.keystep-mark svg { width: 20px; height: 20px; }

.keystep-n {
  position: absolute;
  top: -8px;
  left: -9px;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--orange);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

.guide.keystep .guide-text h4 { font-size: 15.5px; }


/* 24. DASHBOARD HEADER BAR AND SHOW MORE =================================== */

/* One control at each edge: client on the left, current step on the right.
   Two dropdowns rather than a row of chips, because the board is what you
   came to read and the filters should not compete with it. */
/* Same trick as the card header: equal outer tracks put the middle filter
   on the centre line rather than wherever space-between happens to leave it. */
.dash-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.dash-bar .filter-slot:first-child { justify-self: start; }
.dash-bar .filter-slot:last-child { justify-self: end; }
.filter-slot { display: inline-flex; }

/* --- a finished run, waiting to be cleared ------------------------------ */

.dash-card.finished { border-color: var(--green); }

.dash-card.clearing {
  background: var(--green-tint);
  border-color: var(--green);
  transition: background .2s ease, opacity .3s ease, transform .3s ease;
}
.dash-card.clearing .dash-head h3 { color: var(--green); }
.dash-card.gone { opacity: 0; transform: translateY(-6px); }

.btn-complete {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 6px 14px;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease;
}
.btn-complete:hover { background: var(--green-tint); }
.btn-complete svg { width: 12px; height: 12px; }

.cleared-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}
.cleared-note svg { width: 13px; height: 13px; }

/* --- show more ---------------------------------------------------------- */

.more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--bg);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.btn-more:hover { border-color: var(--orange); color: var(--orange-ink); }
.btn-more svg {
  width: 14px;
  height: 14px;
  transition: transform .18s ease;
}
.btn-more.open svg { transform: rotate(180deg); }


/* 25. STICKY SELECTED SKILL ================================================
   The pane stays at the top of the viewport while you scroll the cards.
   It keeps its place in the flow, so nothing below it moves. Its height is
   already fixed (see section 21), which is what makes this safe. */

.preview {
  position: sticky;
  /* Pins 22px below the top, not flush against it. That gap is the same
     one that sits between the filter chips and the first card, so the
     pinned pane keeps the page's own rhythm instead of looking wedged in. */
  top: var(--pin-gap);
  z-index: 30;
  transition: box-shadow .18s ease;
}
.preview.stuck { box-shadow: var(--shadow); }

/* The gap has to be painted, or cards would scroll through it above the
   pane. This band rides directly above the pane and only shows once it is
   pinned. It overshoots sideways on purpose: the rail sits at a higher
   layer, so the overshoot disappears behind it. */
.preview::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pin-gap);
  background: var(--bg);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.preview.stuck::before { opacity: 1; }

/* invisible marker just above the pane; when it passes the pin line the
   pane is stuck, and the band and shadow come on */
.sticky-sentinel { height: 1px; margin-bottom: -1px; }


/* 26. STARTER STEP NUMBERS, MATCHING THE GUIDE STEPS ======================= */

.step-n {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
}

.dash-foot .btn-complete,
.dash-foot .cleared-note { margin-left: auto; }


/* 27. PUBLIC PAGES =========================================================
   index.html and sign-in.html sit in front of the login, so they have no
   rail. They still use every token above, which is what keeps the front
   door and the app looking like one product.
   ========================================================================== */

.public {
  margin-left: 0;
  max-width: none;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 44px;
  border-bottom: 3px solid var(--orange);
}

.pub-mark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}
.pub-mark .rail-glyph { width: 30px; height: 30px; }
.pub-mark b {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.pub-mark b em { font-style: normal; color: var(--orange); }

.pub-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
/* :not(.btn-primary) matters. Without it this rule is more specific than
   .btn-primary, so it wins the colour and the white button text turns grey.
   Scoping it here is the fix; adding specificity to the button would just
   move the fight one round later. */
.pub-nav a:not(.btn-primary) {
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
}
.pub-nav a:not(.btn-primary):hover { color: var(--orange-ink); }
.pub-nav .btn-primary { padding: 10px 20px; font-size: 14px; }

.pub-body { flex: 1; }

.pub-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  padding: 22px 44px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-3);
}
.pub-foot a { color: var(--orange-ink); text-decoration: none; }

/* the three brand primaries as a footer rule */
.stripe { display: flex; height: 6px; }
.stripe i { flex: 1; }
.stripe i:nth-child(1) { background: var(--orange); }
.stripe i:nth-child(2) { background: var(--yellow); }
.stripe i:nth-child(3) { background: var(--pink); }

/* --- landing hero ------------------------------------------------------- */

.hero { padding: 84px 44px 72px; max-width: 900px; }

.hero-tag {
  display: inline-block;
  background: var(--yellow);
  color: #000000;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 4px;
  margin-bottom: 26px;
}

/* The landing headline stays black with one orange phrase. At this size a
   fully orange headline shouts; inside the app, where h1 is small, orange
   reads as brand rather than volume. */
.hero h1 {
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--orange); }

.hero p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 56ch;
  margin-bottom: 34px;
}

.values { background: var(--surface); padding: 68px 44px; }
/* Left-aligned, not centred, so the hero, the values block, the header and
   the footer all start on the same 44px gutter. The app's .stage hugs the
   left in the same way. */
.values-inner { max-width: 1100px; }
.values h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 24px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.value-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent, var(--orange));
  border-radius: var(--radius);
  padding: 24px;
}
.value-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.value-card .sv { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.value-card p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--text-2); }

/* --- sign in ------------------------------------------------------------ */

.auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
}

.auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 40px 38px;
  box-shadow: var(--shadow);
}

.auth-card h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 8px;
}
.auth-card .sub {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 28px;
}

.ms-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  height: 50px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.ms-button:hover { border-color: var(--orange); background: var(--orange-tint); }

.auth-help {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-3);
  text-align: center;
  margin-top: 18px;
}
.auth-help a { color: var(--orange-ink); text-decoration: none; }

.auth-rule { border: 0; border-top: 1px solid var(--border); margin: 26px 0 18px; }

.auth-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 300;
  color: var(--text-3);
  text-align: center;
}
.auth-secure svg { width: 13px; height: 13px; flex-shrink: 0; }

@media (max-width: 620px) {
  .pub-head, .pub-foot { padding-left: 20px; padding-right: 20px; }
  .hero { padding: 52px 20px 44px; }
  .values { padding: 44px 20px; }
  .auth-card { padding: 30px 24px; }
}

.rail-signout {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  stroke: var(--text-3);
}
.rail-user:hover .rail-signout { stroke: var(--orange); }


/* 28. DASHBOARD FILTER CONTROLS =========================================== */

.dot.queued { border-color: var(--border-2); }
.status-chip.queued { background: var(--surface-2); color: var(--text-3); }

/* flex:1 so that when this group wraps onto its own line it still fills the
   row and stays right-aligned, instead of collapsing to its content width
   and sitting on the left. */
/* Outlined at rest so both filters are findable without hunting for them.
   Three steps, each one a shade stronger than the last: a light grey
   outline sitting there, a darker outline under the pointer, and a filled
   pill once a filter is actually doing something. */
.select-sm {
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-2);
  border-color: var(--border-2);
  background: transparent;
  cursor: pointer;
  max-width: 220px;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.select-sm:hover {
  border-color: var(--text-3);
  background: var(--surface);
  color: var(--text);
}
.select-sm.on {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


@media (max-width: 760px) {
  .dash-bar { grid-template-columns: 1fr; }
  .dash-bar .filter-slot:first-child,
  .dash-bar .filter-slot:last-child { justify-self: stretch; }
  .dash-head { grid-template-columns: 1fr; gap: 8px; }
  .dash-head .client-pill,
  .dash-head .status-chip { justify-self: start; }
  .dash-head h3 { text-align: left; }
  .dash-foot { flex-wrap: wrap; }
}