/* Happy look. The one stylesheet every Happy team tool shares.
 *
 *   <link rel="stylesheet" href="https://start.happystudios.com.au/happy.css">
 *
 * The reference is Stripe's dashboard (Radi, 4 Sep 2026: "cream cheese for
 * me, always easy to find stuff and perfect balance"). The rules that make
 * that screen calm, and that this file enforces:
 *
 *   one accent colour, Happy orange, used for the active thing, links and
 *   the primary button, nothing else; everything else is grey on white.
 *   1px grey lines, never 2px black. Soft 6px/8px corners. No shadows on
 *   cards, a soft one on menus only. Dense tables with no vertical lines,
 *   numbers right-aligned. Status is a small pill, never the whole row.
 *   Whitespace generous around blocks, tight inside them.
 *
 * Tokens are --hp-*; primitives are .hp-*. chrome.js paints the top bar in
 * the same tokens, so a board that takes both tags matches inside and out.
 * Interactive states change colour only, never size or position.
 */
:root{
  --hp-ink:#1a1f36;        /* headings, names */
  --hp-text:#30313d;       /* body copy */
  --hp-muted:#687385;      /* secondary copy, table headers */
  --hp-faint:#8792a2;      /* paths, footers, placeholders */
  --hp-line:#e3e8ee;       /* card and table borders */
  --hp-line2:#ebeef1;      /* row separators */
  --hp-edge:#d5dbe1;       /* button borders */
  --hp-bg:#ffffff;
  --hp-bg2:#f6f8fa;        /* hover fills, notes, table header */
  --hp-accent:#DC5336;     /* Happy orange: the only colour */
  --hp-accent-ink:#b8412a; /* accent on hover */
  --hp-accent-bg:#fdf0ec;  /* accent tint */
  --hp-radius:8px;
  --hp-radius-s:6px;
  --hp-font:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --hp-mono:'Space Mono',ui-monospace,Menlo,monospace;
  --hp-shadow:0 8px 24px rgba(26,31,54,.12);
}

/* Page */
.hp-body{margin:0;background:var(--hp-bg);color:var(--hp-text);font-family:var(--hp-font);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.hp-wrap{width:100%;padding:0 24px 40px;box-sizing:border-box}
@media (max-width:600px){.hp-wrap{padding:0 14px 32px}}

/* Type */
.hp-title{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--hp-ink);line-height:1.25;margin:0}
.hp-title .n{font-weight:400;color:var(--hp-text);margin-left:8px}
.hp-lede{font-size:14px;color:var(--hp-muted);margin:4px 0 0}
.hp-h2{font-size:15px;font-weight:600;color:var(--hp-ink);margin:32px 0 12px;line-height:1.3}
.hp-h3{font-size:13px;font-weight:600;color:var(--hp-ink);margin:18px 0 8px}
.hp-small{font-size:12px;color:var(--hp-muted)}
.hp-faint{color:var(--hp-faint)}
.hp-mono{font-family:var(--hp-mono);font-size:11px;letter-spacing:.02em}
.hp-num{font-variant-numeric:tabular-nums;text-align:right}
.hp-link{color:var(--hp-accent);text-decoration:none}
.hp-link:hover,.hp-link:focus-visible{color:var(--hp-accent-ink);text-decoration:underline;outline:none}

/* Buttons: one height, colour-only states */
.hp-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  border:1px solid var(--hp-edge);border-radius:var(--hp-radius-s);background:var(--hp-bg);
  color:var(--hp-ink);font:inherit;font-size:13px;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;user-select:none;white-space:nowrap;box-sizing:border-box}
.hp-btn:hover,.hp-btn:focus-visible{background:var(--hp-bg2);border-color:var(--hp-edge);color:var(--hp-ink);outline:none}
.hp-btn:disabled,.hp-btn:disabled:hover{color:var(--hp-faint);background:var(--hp-bg);cursor:default}
.hp-btn.primary{background:var(--hp-accent);border-color:var(--hp-accent);color:#fff}
.hp-btn.primary:hover,.hp-btn.primary:focus-visible{background:var(--hp-accent-ink);border-color:var(--hp-accent-ink);color:#fff}
.hp-btns{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}

/* Pills: status, never the row */
.hp-pill{display:inline-block;padding:1px 6px;border-radius:4px;font-size:12px;font-weight:500;line-height:18px;
  background:#eceff3;color:#4f566b;white-space:nowrap;vertical-align:middle}
.hp-pill.green{background:#d7f7c2;color:#0e6245}
.hp-pill.amber{background:#fcedb9;color:#7a4e00}
.hp-pill.red{background:#fde2dd;color:#a41c19}
.hp-pill.violet{background:#e6e2fb;color:#4b3ca6}
.hp-pill.blue{background:#d6ecff;color:#0a4c8a}
.hp-pill.orange{background:var(--hp-accent-bg);color:var(--hp-accent-ink)}

/* Cards: 1px line, no shadow */
.hp-card{display:block;background:var(--hp-bg);border:1px solid var(--hp-line);border-radius:var(--hp-radius);
  padding:16px;color:inherit;text-decoration:none;box-sizing:border-box}
a.hp-card:hover,a.hp-card:focus-visible{border-color:#b9c2cc;background:#fafbfc;outline:none}
.hp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
@media (max-width:420px){.hp-grid{gap:8px}}

/* Notes and banners */
.hp-note{background:var(--hp-bg2);border-radius:var(--hp-radius);padding:12px 16px;font-size:13px;color:var(--hp-text)}
.hp-note.tint{background:var(--hp-accent-bg)}

/* Tables: no vertical lines, thin separators, numbers right */
.hp-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--hp-text)}
.hp-table th{font-size:12px;font-weight:600;color:var(--hp-muted);text-align:left;padding:8px 8px;
  border-bottom:1px solid var(--hp-line);white-space:nowrap}
.hp-table td{padding:10px 8px;border-bottom:1px solid var(--hp-line2);vertical-align:top}
.hp-table tr:last-child td{border-bottom:0}
.hp-table th.hp-num,.hp-table td.hp-num{text-align:right;font-variant-numeric:tabular-nums}
.hp-table tbody tr:hover td{background:var(--hp-bg2)}
.hp-scroll{overflow-x:auto}

/* Forms */
.hp-input{width:100%;font:inherit;font-size:14px;color:var(--hp-ink);padding:8px 10px;height:36px;
  border:1px solid var(--hp-edge);border-radius:var(--hp-radius-s);background:var(--hp-bg);box-sizing:border-box}
.hp-input:focus{border-color:var(--hp-accent);outline:none;box-shadow:0 0 0 3px var(--hp-accent-bg)}
.hp-input::placeholder{color:var(--hp-faint)}

/* Side rail: sections of the page, the active one in the accent */
.hp-rail{position:sticky;top:16px;align-self:start;font-size:13px}
.hp-rail .hp-rail-h{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hp-faint);margin:0 0 6px;padding:0 10px}
.hp-rail a{display:block;padding:6px 10px;border-radius:var(--hp-radius-s);color:var(--hp-text);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-rail a:hover,.hp-rail a:focus-visible{background:var(--hp-bg2);color:var(--hp-ink);outline:none}
.hp-rail a.on{color:var(--hp-accent);font-weight:600}
.hp-layout{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:1024px){.hp-layout{grid-template-columns:200px minmax(0,1fr);gap:32px}}
@media (max-width:1023px){.hp-rail{display:none}}

/* Footer */
.hp-footer{margin-top:40px;font-size:12px;color:var(--hp-faint)}