/* ============================================================
   POWER ON MASTER DESIGN SYSTEM
   Importable tokens and components. Every custom class is .po- prefixed.

   Source of truth: "Power On design system master/power-on-design-system.css"
   and its .md. This is that file, plus a dark-mode block the master does not
   carry (the master is written for client-facing output, which is always
   light; Hub pages have a dark mode and need the tints to flip).

   KEEP IN STEP. If the master changes, change this. Do not fork the values.

   Load AFTER the fonts, and before a page's own <style>:
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/po-design-system.css">
   ============================================================ */

:root {
  /* Core brand colours */
  /* NO PURE BLACK TEXT ANYWHERE IN THE HUB (Martin's rule, 30 Aug 2026).
     Navy is the darkest text colour there is here. #000 belongs to nothing in
     this palette and reads as a different, colder system on a screen full of
     navy. --po-ink IS --po-navy for that reason, and every page's own --ink and
     --head resolve to the same value.

     Set here so it is one decision. The six pages that still carry their own
     button and colour blocks do not load this file yet; adopting it is the
     pending per-page sweep on the roadmap, and until that lands this token is
     the reference the page-level values are kept equal to. */
  --po-navy:        #011627;
  --po-navy-800:    #0A2233;
  --po-green:       #8BBF4D;
  --po-green-600:   #79AB3E;
  --po-green-tint:  #EDF4E2;
  --po-pink:        #ED45A0;
  --po-pink-tint:   #FBE4F1;

  /* AMBER MEANS IT COSTS MONEY. It never means a warning and it never means an
     error (Martin, 2 Sep 2026). Declared as a PAIR because no single label
     colour survives both themes against one amber: white on the light amber is
     6.63:1 and on the dark amber 2.00:1; navy on the dark amber is 8.28:1 and on
     the light amber 2.61:1. A single token plus a fixed label is exactly the
     fault that made the Jobs page a row of unreadable green blocks, so both
     halves move together or neither does. */
  --spend-bg:       #854F0B;
  --spend-bg-600:   #6E4109;
  --spend-ink:      #FFFFFF;

  /* Green as a LABEL colour, which the button green cannot be: #8BBF4D on white
     is 2.15:1. This is the darker green already used as --acc-green in crm.html,
     and it is what a link out is drawn in. */
  --po-green-ink:   #3B6D11;

  /* Neutrals */
  --po-white:       #FFFFFF;
  --po-surface:     #FFFFFF;
  --po-surface-alt: #F3F5F6;
  --po-canvas:      #FAFBFB;
  --po-ink:         #011627;
  --po-body:        #45535D;
  /* 4.43:1 on white, a hair under. #697881 is 4.56:1, the smallest darkening
     that clears. Found by the widened text sweep on scoping.html's back link. */
  --po-muted:       #697881;
  --po-line:        #E4E9EC;

  /* Type */
  --po-font-display: 'Bricolage Grotesque', 'Raleway', system-ui, sans-serif;
  --po-font-body:    'Raleway', system-ui, -apple-system, sans-serif;

  --po-text-xs:   0.75rem;
  --po-text-sm:   0.875rem;
  --po-text-base: 1rem;
  --po-text-lg:   1.125rem;
  --po-text-xl:   1.5rem;
  --po-text-2xl:  2rem;
  --po-text-3xl:  2.75rem;

  --po-lh-tight: 1.15;
  --po-lh-snug:  1.35;
  --po-lh-body:  1.6;

  /* Spacing (4px base) */
  --po-s1: 4px;  --po-s2: 8px;  --po-s3: 12px; --po-s4: 16px;
  --po-s5: 24px; --po-s6: 32px; --po-s7: 48px; --po-s8: 64px;

  /* Radius */
  --po-radius-sm: 8px;
  --po-radius:    12px;
  --po-radius-lg: 16px;
  --po-radius-pill: 999px;

  /* Shadow (use sparingly; the style leans on borders) */
  --po-shadow-sm: 0 1px 2px rgba(1,22,39,0.06);
  --po-shadow:    0 6px 20px rgba(1,22,39,0.08);
}

/* ---------- Dark mode ----------
   NOT in the master, which only ever renders light for clients. Hub pages carry
   theme.js and need every tint to flip WITH the text that sits on it, or one
   half of the pair becomes unreadable. Navy is deliberately unchanged: a navy
   band is navy in both modes, exactly as in the Hub's own stylesheet. */
:root[data-theme="dark"] {
  --po-surface:     #171f29;
  --po-surface-alt: #141c26;
  --po-canvas:      #0e151d;
  --po-ink:         #f2f6fa;
  --po-body:        #c3cdd8;
  --po-muted:       #98a4b3;
  --po-line:        #2a3440;
  /* pale tints become deep versions of the same hue, and the accent text that
     sits on them lightens to match */
  --po-green-tint:  #1e2a17;
  --po-green-600:   #a9d477;
  --po-pink-tint:   #2e1a24;
  /* The amber pair flips TOGETHER. Ground lightens, label darkens, so the same
     button reads 6.63:1 in light and 8.28:1 in dark rather than 2.00:1. */
  --spend-bg:       #e0b366;
  --spend-bg-600:   #ebc383;
  --spend-ink:      #2a1a05;
  --po-green-ink:   #a9d477;
  --po-shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --po-shadow:      0 6px 20px rgba(0,0,0,.45);
}

/* Anything printed goes back to light. A client should never be handed a dark
   PDF because it was generated at eleven at night. Mirrors theme.js. */
@media print {
  :root[data-theme="dark"] {
    --po-surface:#fff; --po-surface-alt:#F3F5F6; --po-canvas:#fff;
    --po-ink:#011627; --po-body:#45535D; --po-muted:#6B7A84; --po-line:#E4E9EC;
    --po-green-tint:#EDF4E2; --po-green-600:#79AB3E; --po-pink-tint:#FBE4F1;
    --spend-bg:#854F0B; --spend-bg-600:#6E4109; --spend-ink:#FFFFFF;
    --po-green-ink:#3B6D11;
  }
}

/* ---------- THE FOUR KINDS OF ACTION ----------
   Agreed 2 Sep 2026, after Martin read the onboarding tab and found a link to
   Wix, a tick and a button that spends money rendering as the same green.

   FOUR KINDS, AND MARTIN MUST BE ABLE TO SEE WHICH IS WHICH WITHOUT READING A
   WORD. This holds across the Hub, not on one tab.

     primary   solid green. ONE main action per card, never two.
     second    outlined. Ticks, undo, run again: acts, but is not the main one.
     link      no fill at all, with an arrow. It visibly leaves the Hub.
     spend     solid amber, with the cost ON the button.

   SHAPE AND PALETTE ARE SEPARATE CLASSES and the build enforces it
   (CLAUDE.md). `.po-act` below declares NO background, colour or border colour;
   each modifier declares background AND colour together, in the base rule and
   in every state rule. A shape that also carried a palette is how
   .btn-generate + .btn-primary put #0A2233 under a #011627 label.

   So every action button carries `.po-act` plus EXACTLY ONE modifier.
   scripts/check-cards.js fails the build on a card that carries none or two. */
.po-act {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--po-font-body); font-weight: 600; font-size: 12px;
  line-height: 1; padding: 8px 12px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Nothing is ever clipped (item 24). A control row wraps, and every child in it
   is allowed to shrink, so the longest label on the tab cannot push a button
   half off the right edge the way the schema card's did. */
.po-act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.po-act-row > * { min-width: 0; }

/* THE MODIFIERS ARE DOUBLED, AND THAT IS NOT A TIDINESS PROBLEM.

   crm.html's `.btn` is a shape class that also carries a palette: it declares
   background:#8BBF4D, which is the deliberate "green is the default" rule and
   is not going anywhere. Its stylesheet loads AFTER this file, so at equal
   specificity `.btn` wins and `.btn.po-act--spend` rendered as a green button.
   Measured, not guessed: scripts/check-contrast.js reported the spend button
   as 8.43:1 #011627 on #8bbf4d, which is a perfectly readable button of
   entirely the wrong colour, and no eye on the page would have called it a bug.

   Doubling the class puts each palette at (0,2,0), so it beats any single shape
   class whatever the source order, without this file having to name every shape
   class in the Hub. Every state rule still declares the PAIR. */

/* 1. PRIMARY. 8.43:1 in both themes: neither --po-green nor --po-navy flips. */
.po-act--primary.po-act--primary { background: var(--po-green); color: var(--po-navy); border-color: var(--po-green); }
.po-act--primary.po-act--primary:hover { background: var(--po-green-600); color: var(--po-navy); border-color: var(--po-green-600); }

/* 2. SECOND. Outlined, not filled. Both sides are tokens, so they flip
   together: 18.4:1 light, 15.3:1 dark. */
.po-act--second.po-act--second { background: var(--po-surface); color: var(--po-ink); border-color: var(--po-green); }
.po-act--second.po-act--second:hover { background: var(--po-surface-alt); color: var(--po-ink); border-color: var(--po-green-600); }

/* 3. LINK OUT. No fill and no border, so it does not read as a button at all,
   and the arrow says it leaves the Hub. 6.22:1 light, 9.8:1 dark. */
.po-act--link.po-act--link { background: transparent; color: var(--po-green-ink); border-color: transparent; padding: 8px 4px; font-weight: 600; height: auto; }
.po-act--link.po-act--link:hover { background: transparent; color: var(--po-green-ink); border-color: transparent; text-decoration: underline; }
.po-act--link.po-act--link::after { content: ' 97'; font-weight: 700; }

/* 4. SPEND. The only amber in the Hub, and the cost goes ON it. */
.po-act--spend.po-act--spend { background: var(--spend-bg); color: var(--spend-ink); border-color: var(--spend-bg); }
.po-act--spend.po-act--spend:hover { background: var(--spend-bg-600); color: var(--spend-ink); border-color: var(--spend-bg-600); }
/* The cost, inside the button. Inherits the label colour rather than setting
   one, so it can never come apart from the ground the way an inline colour did. */
.po-act__cost { font-weight: 700; opacity: .85; color: inherit; }

.po-act[disabled], .po-act:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Eyebrow label ---------- */
.po-eyebrow {
  font-family: var(--po-font-body);
  font-size: var(--po-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--po-green-600);
}
.po-eyebrow.on-dark { color: var(--po-green); }

/* ---------- Headings ---------- */
.po-h1, .po-h2, .po-h3 { font-family: var(--po-font-display); line-height: var(--po-lh-tight); color: var(--po-ink); }
.po-h1 { font-weight: 800; font-size: var(--po-text-2xl); letter-spacing: -0.02em; }
.po-h2 { font-weight: 700; font-size: var(--po-text-xl); }
.po-h3 { font-weight: 700; font-size: var(--po-text-lg); }

/* ---------- Buttons ---------- */
.po-btn {
  display: inline-flex; align-items: center; gap: var(--po-s2);
  font-family: var(--po-font-body); font-weight: 700; font-size: var(--po-text-sm);
  padding: 12px 22px; border-radius: var(--po-radius-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* GREEN IS THE DEFAULT, AND THAT IS THE WHOLE POINT.

   The rule "action buttons are green" was asked for, agreed and did not hold,
   because every page made green OPT IN: crm.html's .btn is the card colour and
   .btn-green is the extra class. A new button is therefore grey unless somebody
   remembers, and 96 of crm.html's 138 buttons are grey, about 90 of them real
   actions: Resend, Save callback, Download PDF, Mark as sent, Add note, Log a
   call, Add a photo, Run the sweep.

   So .po-btn IS green. A button that is not green now needs a modifier and a
   reason, which is the opposite of remembering. --primary is kept as an alias so
   existing markup does not change meaning.

   The four exceptions, agreed 30 Aug 2026:
     --danger  destructive. Delete, Remove, Discard.
     --quiet   performs nothing: Cancel, Close, dismiss. Without this, every
               dialog has two green buttons with opposite meanings, which is the
               "no two buttons in a bar share a verb" rule broken by colour.
     --toggle  filters, tabs, segmented controls. Not actions at all: they
               change what you are looking at.
     --second  the deliberate secondary in a pair, e.g. "Copy it instead" beside
               a green primary. Keeps one primary per bar rather than two. */
.po-btn, .po-btn--primary { background: var(--po-green); color: var(--po-navy); }
.po-btn:hover, .po-btn--primary:hover { background: var(--po-green-600); color: var(--po-navy); }

/* ── THE HIERARCHY, agreed 30 Aug 2026 ──
   1 primary  navy bg, green label   8.43:1
   2 standard green bg, navy label   8.43:1   (.po-btn on its own)
   3 quiet    card bg, green border  both sides are tokens, so they move together
   4 danger   pink bg, NAVY label    5.20:1   white on this pink is only 3.52

   A label colour and its background must either both flip with the theme or
   neither. `background:<fixed>; color:var(--token)` is the bug that made the
   Jobs page a row of green blocks with no readable text in dark mode.

   AND EVERY STATE RULE DECLARES THE PAIR. A :hover that moves only the
   background leaves the next class along free to take the label on its own,
   which is how Generate Schema ended up navy-on-navy. `scripts/check-contrast.js`
   fails the build on anything below 4.5:1 in either mode. */
.po-btn--primary-nav { background: var(--po-navy); color: var(--po-green); }
.po-btn--primary-nav:hover { background: var(--po-navy-800); color: var(--po-green); }
.po-btn--quiet { background: var(--po-surface); border-color: var(--po-green); color: var(--po-navy); }
.po-btn--danger { background: var(--po-pink); color: var(--po-navy); }
/* lighter, not darker: the label is navy, so darkening the pink closes the
   gap to 3.69:1 and lightening it opens one to 5.97:1 */
.po-btn--danger:hover { background: #F05CAD; color: var(--po-navy); }

.po-btn--quiet,
.po-btn--second { background: var(--po-surface); color: var(--po-ink); border-color: var(--po-line); }
.po-btn--quiet:hover,
.po-btn--second:hover { background: var(--po-surface-alt); color: var(--po-ink); border-color: var(--po-ink); }

.po-btn--toggle { background: var(--po-surface-alt); color: var(--po-body); border-color: var(--po-line); }
.po-btn--toggle[aria-pressed="true"],
.po-btn--toggle.on { background: var(--po-green-tint); color: var(--po-navy); border-color: var(--po-green); }

.po-btn--dark { background: var(--po-navy); color: #fff; }
.po-btn--dark:hover { background: var(--po-navy-800); color: #fff; }
/* A background of its own, and a hover that declares the pair. Transparent
   meant .po-btn:hover's green slid underneath the ink label, which is 1.56:1
   in dark mode where the green lightens and the ink is already near-white. */
.po-btn--ghost { background: var(--po-surface); color: var(--po-ink); border-color: var(--po-line); }
.po-btn--ghost:hover { background: var(--po-surface-alt); color: var(--po-ink); border-color: var(--po-ink); }

/* ---------- Badge pills ---------- */
.po-badge {
  display: inline-block;
  font-family: var(--po-font-body); font-size: var(--po-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 6px 12px; border-radius: var(--po-radius-pill); color: #fff;
}
.po-badge--green { background: var(--po-green); color: var(--po-navy); }
.po-badge--navy  { background: var(--po-navy); }
.po-badge--pink  { background: var(--po-pink); }

/* ---------- Stat card ---------- */
.po-stat {
  background: var(--po-navy); color: #fff;
  border-radius: var(--po-radius); padding: var(--po-s5) var(--po-s4);
  text-align: center;
}
.po-stat .num { font-family: var(--po-font-display); font-weight: 800; font-size: var(--po-text-2xl); color: var(--po-green); line-height: 1; }
.po-stat .num.pink { color: var(--po-pink); }
.po-stat .num.small { font-size: var(--po-text-lg); }
.po-stat .label { font-size: var(--po-text-xs); color: #B9C4CB; margin-top: var(--po-s2); line-height: 1.35; }

/* ---------- Featured panel ---------- */
.po-featured {
  background: var(--po-green-tint);
  border-left: 5px solid var(--po-green);
  border-radius: var(--po-radius);
  padding: var(--po-s6);
}
.po-featured .quote { font-size: var(--po-text-lg); font-style: italic; color: var(--po-ink); line-height: var(--po-lh-snug); }
.po-featured .by { display: flex; align-items: center; gap: var(--po-s3); margin-top: var(--po-s4); }
.po-featured .by::before { content: ""; width: 26px; height: 3px; background: var(--po-green-600); border-radius: 2px; }
.po-featured .by strong { font-family: var(--po-font-display); font-weight: 700; color: var(--po-ink); font-size: var(--po-text-sm); }

/* ---------- Review card ---------- */
.po-review {
  background: var(--po-surface);
  border: 1px solid var(--po-line);
  border-radius: var(--po-radius);
  padding: var(--po-s5);
}
.po-review .po-badge { margin-bottom: var(--po-s4); }
.po-review .quote { font-style: italic; color: var(--po-body); line-height: var(--po-lh-body); }
.po-review .by { margin-top: var(--po-s4); font-size: var(--po-text-sm); color: var(--po-ink); font-weight: 600; }

/* ---------- Quiet quote card ---------- */
.po-quote {
  background: var(--po-surface-alt);
  border-radius: var(--po-radius);
  padding: var(--po-s5);
}
.po-quote .quote { font-style: italic; font-size: var(--po-text-sm); color: var(--po-body); line-height: var(--po-lh-body); }
.po-quote .by { margin-top: var(--po-s3); font-size: var(--po-text-xs); color: var(--po-green-600); font-weight: 700; }

/* ---------- Numbered feature card ---------- */
.po-feature {
  background: var(--po-surface);
  border: 1px solid var(--po-line);
  border-radius: var(--po-radius);
  padding: var(--po-s5);
}
.po-feature .n { font-family: var(--po-font-display); font-weight: 800; font-size: var(--po-text-2xl); color: var(--po-green); line-height: 1; }
.po-feature h3 { font-family: var(--po-font-display); margin-top: var(--po-s3); font-size: var(--po-text-lg); font-weight: 700; color: var(--po-ink); }
.po-feature p { margin-top: var(--po-s2); font-size: var(--po-text-sm); color: var(--po-body); }

/* ---------- Dark bands ---------- */
.po-band {
  background: var(--po-navy);
  border-radius: var(--po-radius-lg);
  padding: var(--po-s7) var(--po-s6);
  color: #fff;
}
.po-band--header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--po-s4); padding: var(--po-s5) var(--po-s6); }
.po-band--header .logo { font-family: var(--po-font-display); font-weight: 800; font-size: 1.25rem; color: #fff; }
.po-band--header .logo .on { color: var(--po-green); }
.po-band--header .right { text-align: right; }
.po-band--cta { text-align: center; }
.po-band--cta h3 { font-family: var(--po-font-display); color: #fff; font-size: var(--po-text-xl); font-weight: 700; }
.po-band--cta h3 .hl { color: var(--po-green); }
.po-band--cta .contact { margin-top: var(--po-s3); font-size: var(--po-text-sm); color: #B9C4CB; }

/* ---------- Deliverable / pricing table ---------- */
.po-table { width: 100%; border-collapse: collapse; font-size: var(--po-text-sm); }
.po-table thead th {
  text-align: left; font-family: var(--po-font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--po-text-xs);
  color: var(--po-muted); padding: var(--po-s3) var(--po-s4); border-bottom: 2px solid var(--po-line);
}
.po-table tbody td { padding: var(--po-s4); border-bottom: 1px solid var(--po-line); vertical-align: top; color: var(--po-body); }
.po-table tbody td .title { font-family: var(--po-font-display); font-weight: 700; color: var(--po-ink); }
.po-table tbody td.price { font-family: var(--po-font-display); font-weight: 800; color: var(--po-ink); white-space: nowrap; text-align: right; }
.po-table .total td { border-bottom: 0; padding-top: var(--po-s4); }
.po-table .total .price { color: var(--po-green-600); font-size: var(--po-text-lg); }