/* Home hero ticket board (hero-board.js). Same visual language as service-art.css: site tokens
   only, one 2px line weight, paper panels with a faint dot grid. Opacity is
   driven from the script, so these rules set colour and type only. */
/* The stage: a soft colour field so the white board stands out. Lilac base, a lime glow behind
   the board, a faint pink wash behind the headline. Dark mode uses the same layout, deeper. */
.board-stage {
  --hb-field: #e7e2f4; --hb-glow: rgb(184 217 138 / .62); --hb-wash: rgb(246 184 212 / .42);
  --hb-deco: #c9bdf0; --hb-shadow: rgb(74 56 140 / .22); --hb-done: color-mix(in srgb, var(--shape-lime) 20%, var(--surface));
  --hb-glow-at: 80% 72%;
}
[data-theme='dark'] .board-stage {
  --hb-field: #15141b; --hb-glow: rgb(184 217 138 / .16); --hb-wash: rgb(201 189 240 / .14);
  --hb-deco: #3b3456; --hb-shadow: rgb(0 0 0 / .55); --hb-done: color-mix(in srgb, var(--shape-lime) 9%, var(--surface));
}
@media (max-width: 760px) { .board-stage { --hb-glow-at: 60% 88%; } }
.hero-stage .board-stage {
  position: absolute; inset: 0; color: var(--text);
  background: radial-gradient(55% 60% at var(--hb-glow-at), var(--hb-glow), transparent 70%),
    radial-gradient(50% 55% at 14% 16%, var(--hb-wash), transparent 70%), var(--hb-field);
}
.board-stage .hb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }

.hb-dot { fill: var(--text); opacity: .14; }
.hb-board { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.hb-board-shadow { fill: var(--hb-shadow); }
.hb-col { fill: var(--panel); }
.hb-col-done { fill: var(--hb-done); }
.hb-deco { fill: var(--hb-deco); }
.hb-deco-lime { fill: var(--shape-lime); }
.hb-deco-ink { fill: var(--text); }
.hb-head { font: 500 22px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--text); }
.hb-count-bg { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.hb-count { font: 500 15px/1 var(--shape-font); fill: var(--text); font-variant-numeric: tabular-nums; }
.hb-ink { fill: var(--text); }
.hb-lime { fill: var(--shape-lime); }
.hb-lilac { fill: var(--shape-lilac); }
.hb-soft { fill: var(--text); opacity: .28; }
.hb-soft-fill { fill: var(--text); opacity: .14; }
.hb-bar { fill: var(--panel); }
.hb-on-lilac { fill: var(--shape-on-accent); }
.hb-on-lilac-soft { fill: var(--shape-on-accent); opacity: .3; }
.hb-on-ink-soft { fill: var(--surface); opacity: .3; }

.hb-hint rect, rect.hb-hint { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 8; opacity: .5; }
.hb-hint-text { font: 400 16px/1 var(--shape-font); fill: var(--muted); }

.hb-paper { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.hb-shadow { fill: var(--text); fill-opacity: .09; }
.hb-pill { fill: var(--shape-lilac); }
.hb-pill-text { font: 500 14px/1 var(--shape-font); fill: var(--shape-on-accent); }
.hb-title { font: 500 23px/1 var(--shape-font); letter-spacing: -.025em; fill: var(--text); }
.hb-alert { fill: none; stroke: var(--text); stroke-width: 2; stroke-opacity: .45; }
.hb-alert-mark { font: 600 17px/1 var(--shape-font); fill: var(--text); fill-opacity: .6; }
.hb-tick { fill: none; stroke: var(--shape-on-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; }
.hb-scrim { fill: var(--surface); }
.hb-cursor { fill: var(--text); stroke: var(--surface); stroke-width: 1.6; stroke-linejoin: round; }

.hb-addr-bg { fill: var(--surface); }
.hb-addr { font: 400 14px/1 var(--shape-font); fill: var(--muted); }
.hb-chip { fill: var(--surface); stroke: var(--line); stroke-width: 2; transition: fill .3s; }
.hb-chip.is-fast { fill: var(--shape-lime); stroke: var(--shape-lime); }
.hb-chip-text { font: 500 14px/1 var(--shape-font); fill: var(--text); }
.hb-chip.is-fast + .hb-chip-text { fill: var(--shape-on-accent); }
.hb-btn-text { font: 500 16px/1 var(--shape-font); fill: var(--shape-on-accent); }

/* panels: shared chrome and the Automate, Assist and Creative pieces */
.hb-panel-title { font: 500 16px/1 var(--shape-font); fill: var(--text); }
.hb-tick-static { stroke-dasharray: none; }
.hb-lime-box { fill: var(--shape-lime); }
.hb-cell-head { fill: var(--shape-lilac); }
.hb-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-pulse { fill: var(--shape-lime); stroke: var(--text); stroke-width: 2; }
.hb-node-text { font: 500 16px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--text); }
.hb-node-text.hb-on { fill: var(--shape-on-accent); }
.hb-old { fill: var(--text); fill-opacity: .16; }
.hb-old-name { font: italic 400 40px/1 Georgia, 'Times New Roman', serif; fill: var(--text); fill-opacity: .4; }
.hb-new-name { font: 500 40px/1 var(--shape-font); letter-spacing: -.04em; fill: var(--text); }
.hb-bar-edge { fill: var(--panel); stroke: var(--line); stroke-width: 2; }

/* finale */
.hb-empty { font: 500 18px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--muted); }
.hb-stamp { fill: var(--shape-lime); }
.hb-stamp-dot { fill: var(--shape-on-accent); }
.hb-stamp-tick { fill: none; stroke: var(--shape-lime); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hb-stamp-text { font: 500 52px/1 var(--shape-font); letter-spacing: -.05em; fill: var(--shape-on-accent); }