/* /app, A/B variant "You | Sidekick" (app-heads.html, SIKICK_DASH=heads). Every class carries the hd- prefix.
   Tokens follow v3 (lime you, silver sidekick); app-light.css redefines them for light mode and adds body.light. */
:root { --bg: #05060a; --ink: #eef0f4; --ink2: #9ba1ad; --ink3: #5c626e; --ln: rgba(255,255,255,.06); --ln2: rgba(255,255,255,.11);
  --warm: #c6ff3d; --cold: #c9d2dc; --lime: #c6ff3d;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --hud: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --navh: 60px; --h0: clamp(340px, 46vh, 480px); }
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; }
body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::before { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--warm) 14%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 40%, rgba(0,0,0,.15) 100%); mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 40%, rgba(0,0,0,.15) 100%); }
body::after { background: radial-gradient(700px 420px at 22% 18%, color-mix(in srgb, var(--warm) 6%, transparent), transparent 70%), radial-gradient(700px 420px at 78% 18%, color-mix(in srgb, var(--cold) 5%, transparent), transparent 70%); }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 500; }

/* ---------- the dock: fixed, shrinks from --h0 to the nav row as you scroll ---------- */
.hd-dock { position: fixed; top: 0; left: 0; right: 0; height: var(--h0); z-index: 20; overflow: hidden; pointer-events: none;
  transition: background-color .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.hd-dock.is-compact { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--ln); }
#hd-cv { position: absolute; left: 0; top: 0; display: block; }
.hd-nav { position: relative; z-index: 1; height: var(--navh); width: min(1240px, calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.hd-nav > * { pointer-events: auto; }
.hd-brand { font-size: 15px; font-weight: 600; letter-spacing: .01em; } .hd-brand b { color: var(--warm); display: inline-block; width: .13em; height: .7em; margin: 0 .07em 0 .1em; background: currentColor; transform: skewX(-19deg); vertical-align: baseline; border-radius: .012em; } /* SI/KICK slash: cap-height bar on the baseline */
.hd-cnext { flex: 0 1 auto; min-width: 0; margin-left: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--hud); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); opacity: 0; visibility: hidden; }
.hd-cnext b { color: var(--warm); font-weight: 500; }
.hd-whobox { margin-left: auto; flex: none; }
.who { display: flex; align-items: center; gap: 10px; color: var(--ink2); font-size: 13px; }
.who i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--hud); font-size: 11px; color: #05060a; background: var(--warm); }
.who a { font-family: var(--hud); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 9px 14px; border: 1px solid var(--ln2); border-radius: 999px; transition: background .2s ease, color .2s ease; }
.who a:hover { background: var(--ink); color: var(--bg); }
.who a.mode { border-color: transparent; color: var(--ink2); padding: 9px 10px; } .who a.mode:hover { background: rgba(127,127,127,.12); color: var(--ink); }

/* figure labels under each head, and the bridge in the gap between them (positioned by heads-dash.js) */
.hd-fig { position: fixed; z-index: 21; top: 0; left: 0; margin: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--hud); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); transition: color .6s ease; }
.hd-fig span { color: var(--ink3); margin-right: 10px; } .hd-fig em { font-style: normal; color: var(--ink3); margin-left: 10px; letter-spacing: .12em; text-transform: none; font-size: 11px; }
.hd-figY { color: color-mix(in srgb, var(--warm) 70%, var(--ink2)); } .hd-figS { color: var(--cold); }
.hd-fig.is-lit { color: var(--ink); }
.hd-bridge { position: fixed; z-index: 21; top: 0; left: 0; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; max-width: 420px; text-align: center; }
.hd-bk, .hd-bw { font-family: var(--hud); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.hd-bk { color: var(--warm); } .hd-bw { order: 2; color: var(--ink2); }
.hd-bt { order: 3; flex-basis: 100%; font-size: 17px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease; }
.hd-bridge:hover .hd-bt { color: var(--warm); }
.hd-bridge.is-row { flex-wrap: nowrap; max-width: calc(100vw - 32px); }
.hd-bridge.is-row .hd-bt { order: 1; flex: 0 1 auto; min-width: 0; font-size: 14px; display: block; white-space: nowrap; text-overflow: ellipsis; }
.hd-bridge.is-row .hd-bw { order: 2; flex: none; } .hd-bridge.is-row .hd-bk { flex: none; }

/* ---------- page ---------- */
.hd-wrap { position: relative; z-index: 1; width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 90px; }
.hd-space { height: var(--h0); }
.hd-switch { display: none; }
.hd-cols { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 88px; }
/* the "|" between you and your sidekick */
.hd-cols::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--ln2), var(--ln) 40%, transparent); }
.hd-col { min-width: 0; }
.hd-col [id] { scroll-margin-top: calc(var(--navh) + 20px); }
.hd-eye { margin: 0 0 30px; padding-top: 22px; font-family: var(--hud); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.hd-sep { margin: 0 10px; opacity: .6; }
.hd-h { display: flex; align-items: baseline; gap: 14px; margin: 58px 0 18px; padding-top: 16px; border-top: 1px solid var(--ln); font-size: 22px; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.hd-h span { margin-left: auto; text-align: right; font-family: var(--hud); font-size: 10.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.hd-h1 { margin-top: 0; padding-top: 0; border-top: 0; }
.hd-empty { margin: 0; color: var(--ink3); font-size: 13.5px; }

/* ---------- YOU ---------- */
.hd-now { margin-bottom: 26px; }
.hd-nk { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--hud); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.hd-nk b { display: inline-flex; align-items: center; gap: 8px; color: var(--warm); font-weight: 500; }
.hd-nk b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.hd-nt { display: block; margin: 12px 0 14px; font-size: clamp(26px, 2.5vw, 38px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; transition: color .2s ease; }
a.hd-nt:hover { color: var(--warm); }
.hd-nm { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--hud); font-size: 11px; letter-spacing: .06em; color: var(--ink3); }
.hd-nm #hd-now-left { color: var(--ink); }
.hd-nbar { height: 2px; margin-top: 18px; background: var(--ln2); border-radius: 1px; overflow: hidden; }
.hd-nbar i { display: block; height: 100%; background: var(--warm); box-shadow: 0 0 10px var(--warm); transition: width 1s ease; }
/* the day at a glance: 09 to 19 */
.hd-ruler { margin: 0 0 18px; }
.hd-rt { position: relative; height: 12px; border-radius: 6px; background: var(--ln); }
.hd-rt i { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: var(--ln2); }
.hd-rt i.hd-k-focus { background: color-mix(in srgb, var(--warm) 45%, transparent); }
.hd-rt i.hd-k-decide, .hd-rt i.hd-k-unblock { background: var(--warm); }
.hd-rt i.hd-k-lunch, .hd-rt i.hd-k-workout, .hd-rt i.hd-k-wrap { background: color-mix(in srgb, var(--cold) 40%, transparent); }
.hd-rt b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.hd-rl { position: relative; height: 18px; margin-top: 6px; font-family: var(--hud); font-size: 10px; color: var(--ink3); }
.hd-rl span { position: absolute; top: 0; transform: translateX(-50%); }
.hd-rl span:first-child { transform: none; } .hd-rl span:last-child { transform: translateX(-100%); }
/* today, as a timeline */
.hd-tl { position: relative; list-style: none; margin: 0; padding: 0; }
.hd-tl::before { content: ''; position: absolute; left: 66.5px; top: 16px; bottom: 16px; width: 1px; background: var(--ln2); }
.hd-b > a, .hd-b > div { display: grid; grid-template-columns: 48px 14px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 9px 6px 9px 0; border-radius: 8px; transition: background .2s ease; }
.hd-b > a:hover { background: rgba(255,255,255,.03); }
.hd-b time { font-family: var(--hud); font-size: 11px; color: var(--ink2); padding-top: 3px; text-align: right; }
.hd-dot { position: relative; z-index: 1; justify-self: center; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink3); }
.hd-bc { display: grid; gap: 1px; min-width: 0; }
.hd-bc small { font-family: var(--hud); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.hd-bc b { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.hd-bc em { font-style: normal; font-family: var(--hud); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cold); }
.hd-bd { font-family: var(--hud); font-size: 10.5px; color: var(--ink3); padding-top: 3px; white-space: nowrap; }
.hd-k-decide .hd-bc small, .hd-k-unblock .hd-bc small { color: var(--warm); }
.hd-k-break .hd-bc b, .hd-k-lunch .hd-bc b, .hd-k-workout .hd-bc b, .hd-k-wrap .hd-bc b { font-weight: 400; color: var(--ink2); font-size: 13.5px; }
.hd-k-break .hd-dot, .hd-k-lunch .hd-dot { border-color: var(--ln2); }
.hd-b.is-now > a, .hd-b.is-now > div { background: color-mix(in srgb, var(--warm) 6%, transparent); }
.hd-b.is-now time { color: var(--warm); }
.hd-b.is-now .hd-dot { background: var(--warm); border-color: var(--warm); box-shadow: 0 0 10px var(--warm); }
.hd-b.is-past { opacity: .4; }
.hd-more { margin-top: 4px; }
.hd-more summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 10px 6px 10px 0; border-top: 1px solid var(--ln); font-size: 13.5px; color: var(--ink2); }
.hd-more summary::-webkit-details-marker { display: none; }
.hd-more summary::before { content: '+'; width: 48px; text-align: right; font-family: var(--hud); color: var(--ink3); margin-right: 26px; }
.hd-more[open] summary::before { content: '−'; }
.hd-more summary span { margin-left: auto; font-family: var(--hud); font-size: 10.5px; color: var(--ink3); }
.hd-more summary:hover { color: var(--ink); }
/* focus: a chain of bulbs on one wire, the first one burns brightest */
.hd-chain { position: relative; list-style: none; margin: 0; padding: 0; }
.hd-chain::before { content: ''; position: absolute; left: 9px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--warm) 55%, transparent), var(--ln2) 60%, var(--ln)); }
.hd-chain::after { content: ''; position: absolute; left: 8px; top: 20px; width: 3px; height: 34px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--warm), transparent); opacity: .55; animation: hd-spark 11s linear infinite; }
@keyframes hd-spark { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .55; } 80% { opacity: .55; } 100% { transform: translateY(calc(var(--hd-chain-h, 300px) - 74px)); opacity: 0; } }
.hd-chain a { position: relative; display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 16px; padding: 10px 0; }
.hd-bulb { position: relative; z-index: 1; width: 11px; height: 11px; margin: 5px 0 0 4px; border-radius: 50%;
  background: color-mix(in srgb, var(--warm) 42%, var(--bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 8%, transparent), 0 0 12px color-mix(in srgb, var(--warm) 30%, transparent); transition: background .3s ease, box-shadow .3s ease; }
.hd-chain li:nth-child(n+4) .hd-bulb { background: color-mix(in srgb, var(--warm) 22%, var(--bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 5%, transparent); }
.hd-chain li.is-first .hd-bulb { background: var(--warm); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm) 16%, transparent), 0 0 22px var(--warm); animation: hd-breathe 7s ease-in-out infinite; }
@keyframes hd-breathe { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warm) 10%, transparent), 0 0 30px var(--warm); } }
.hd-chain a:hover .hd-bulb { background: var(--warm); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm) 16%, transparent), 0 0 18px var(--warm); }
.hd-chain a > span { display: grid; gap: 2px; min-width: 0; }
.hd-chain b { font-size: 15px; line-height: 1.38; overflow-wrap: anywhere; transition: color .2s ease; }
.hd-chain li.is-first b { font-size: 17px; }
.hd-chain a:hover b { color: var(--warm); }
.hd-chain em { font-style: normal; font-family: var(--hud); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.hd-st-running { color: var(--cold); } .hd-st-blocked { color: #ffb020; } .hd-st-decide { color: var(--warm); }
/* body: movement and tracked time, each with its ASCII band */
.hd-bodyg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
.hd-bxh { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 500; }
.hd-bxh span { margin-left: auto; font-family: var(--hud); font-size: 10.5px; font-weight: 400; letter-spacing: .08em; color: var(--ink3); }
.hd-art { position: relative; height: 48px; margin: 10px 0 10px; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.hd-art canvas { display: block; width: 100%; height: 100%; }
.hd-bxp { margin: 0; font-size: 13px; color: var(--ink2); }
.hd-sm { margin-top: 8px; font-size: 12.5px; color: var(--ink3); }
.hd-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hd-apps li { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink2); } .hd-apps span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-apps em { margin-left: auto; font-style: normal; font-family: var(--hud); font-size: 10.5px; color: var(--ink3); }
.hd-breaks { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--ln); display: flex; gap: 14px; align-items: baseline; font-size: 13px; color: var(--ink2); }
.hd-breaks b { flex: none; font-family: var(--hud); font-weight: 400; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cold); }

/* ---------- SIDEKICK ---------- */
.hd-needs { list-style: none; margin: 0; padding: 0; }
.hd-needs a { display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ln); }
.hd-needs li:first-child a { border-top: 0; padding-top: 4px; }
.hd-num { font-size: 60px; font-weight: 500; line-height: .9; letter-spacing: -.055em; color: var(--ink3); text-align: right; font-variant-numeric: tabular-nums; }
.hd-needs a.is-hot .hd-num { color: var(--warm); text-shadow: 0 0 28px color-mix(in srgb, var(--warm) 30%, transparent); }
.hd-needs a > span { display: grid; gap: 3px; min-width: 0; }
.hd-needs strong { font-size: 19px; letter-spacing: -.02em; }
.hd-needs em { font-style: normal; font-family: var(--hud); font-size: 10.5px; letter-spacing: .06em; color: var(--ink3); }
.hd-needs i { font-style: normal; color: var(--ink3); transition: transform .25s ease, color .25s ease; }
.hd-needs a:hover i { transform: translateX(3px); color: var(--warm); } .hd-needs a:hover strong { color: var(--warm); }
.hd-notes { list-style: none; margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ln); }
.hd-notes a, .hd-notes span { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 6px 0 6px 18px; font-size: 13.5px; color: var(--ink2); }
.hd-notes a::before, .hd-notes span::before { content: ''; position: absolute; left: 3px; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); }
.hd-notes .is-hot a::before, .hd-notes .is-hot span::before { background: var(--warm); }
.hd-notes a:hover { color: var(--ink); } .hd-notes i { font-style: normal; color: var(--ink3); }
/* pulse: a quiet feed */
.hd-pulse { list-style: none; margin: 0; padding: 0; }
.hd-pulse a { display: grid; grid-template-columns: 64px 80px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--ln); }
.hd-pulse li:first-child a { border-top: 0; }
.hd-pulse time { font-family: var(--hud); font-size: 10.5px; color: var(--ink3); }
.hd-ws { font-family: var(--hud); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-pulse p { margin: 0; font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; transition: color .2s ease; }
.hd-pulse a:hover p { color: var(--ink); }
.hd-pulse .is-call b { color: var(--ink); } .hd-pulse .is-call small { display: block; margin-top: 2px; font-family: var(--hud); font-size: 10px; letter-spacing: .08em; color: var(--ink3); }
.hd-pulse .is-call time::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--cold); vertical-align: 1px; }
/* days: sticky day labels inside a list that scrolls in its column on wide screens (no caps, everything is there) */
.hd-scroll { max-height: 640px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ln2) transparent; padding-right: 6px; }
.hd-scroll:focus-visible { outline: 1px solid var(--ln2); outline-offset: 4px; }
.hd-day { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; margin: 0; padding: 12px 0 8px; background: var(--bg);
  font-family: var(--hud); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); border-bottom: 1px solid var(--ln); }
.hd-day em { font-style: normal; color: var(--ink3); }
.hd-scroll .hd-pulse li:first-child a { border-top: 0; }
.hd-k { margin: 0 0 8px; font-family: var(--hud); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.hd-tag { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ln2); font-family: var(--hud); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.hd-tag.is-on { border-color: color-mix(in srgb, var(--warm) 50%, transparent); color: var(--warm); }
/* recordings: the latest work-session review, then every recording of the last 14 days */
.hd-rv-eye { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-family: var(--hud); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.hd-rv-t { margin: 14px 0 10px; font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.hd-rv-t a { background: linear-gradient(var(--warm), var(--warm)) 0 100% / 0 2px no-repeat; transition: background-size .5s ease; } .hd-rv-t a:hover { background-size: 100% 2px; }
.hd-rv-sum { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink2); } .hd-mute { color: var(--ink3); }
.hd-rv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 24px; margin: 22px 0 0; padding: 16px 0; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.hd-rv-stats div { display: grid; gap: 4px; align-content: start; }
.hd-rv-stats b { font-size: 30px; font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.hd-rv-stats span { font-family: var(--hud); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.hd-rv-stats em { font-style: normal; font-size: 12px; color: var(--ink3); }
.hd-rv-apps { margin-top: 20px; } .hd-strip { height: 34px; margin: 0; }
.hd-rv-apps ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; padding: 0; }
.hd-rv-apps li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--ink2); }
.hd-rv-apps li i { font-style: normal; font-family: var(--hud); color: var(--ink3); } .hd-rv-apps li:first-child i { color: var(--warm); }
.hd-rv-apps li em { font-style: normal; font-family: var(--hud); font-size: 10.5px; color: var(--ink3); }
.hd-rv-tips, .hd-rv-sug { margin-top: 24px; }
.hd-rv-tips ol { list-style: none; counter-reset: tip; margin: 0; padding: 0; }
.hd-rv-tips li { counter-increment: tip; display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 9px 0; border-top: 1px solid var(--ln); font-size: 14px; line-height: 1.5; }
.hd-rv-tips li::before { content: counter(tip, decimal-leading-zero); font-family: var(--hud); font-size: 11px; color: var(--warm); padding-top: 3px; }
.hd-rv-sug ul { list-style: none; margin: 0; padding: 0; }
.hd-rv-sug a { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--ln); }
.hd-rv-sug a > span { font-family: var(--hud); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cold); }
.hd-rv-sug .hd-sk-automate { color: var(--warm); } .hd-rv-sug .hd-sk-blocker { color: #ffb020; } .light .hd-rv-sug .hd-sk-blocker { color: #b06a00; }
.hd-rv-sug b { font-size: 14.5px; overflow-wrap: anywhere; transition: color .2s ease; } .hd-rv-sug a:hover b { color: var(--warm); }
.hd-rv-sug em { font-style: normal; font-family: var(--hud); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; } .hd-rv-sug em i { font-style: normal; color: var(--warm); }
.hd-rv-none { margin: 0 0 6px; font-size: 13.5px; color: var(--ink3); }
.hd-k-recs { margin-top: 30px; }
.hd-recs ul { list-style: none; margin: 0 0 6px; padding: 0; }
.hd-recs a { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 3px 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--ln); }
.hd-recs li:first-child a { border-top: 0; }
.hd-recs .hd-tag { justify-self: start; }
.hd-recs a b { font-size: 14.5px; overflow-wrap: anywhere; transition: color .2s ease; } .hd-recs a:hover b { color: var(--warm); }
.hd-recs a em, .hd-recs a p { grid-column: 2; }
.hd-recs a em { font-style: normal; font-family: var(--hud); font-size: 10px; letter-spacing: .08em; color: var(--ink3); }
.hd-recs a p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.hd-rec-empty p { margin: 0; font-size: 14px; color: var(--ink2); } .hd-rec-empty .hd-sm { margin-top: 8px; }
.hd-rec-empty .hd-art { height: 40px; margin: 0 0 12px; }
kbd { font-family: var(--hud); font-size: .85em; padding: 1px 6px; border: 1px solid var(--ln2); border-radius: 5px; color: var(--ink); }
/* teams: a constellation, then one line per project with its links */
.hd-sky { height: 124px; margin: 0 0 8px; }
.hd-teams { list-style: none; margin: 0; padding: 0; }
.hd-teams li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ln); }
.hd-tn { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.hd-tn strong { font-size: 16px; letter-spacing: -.01em; }
.hd-spark { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; color: var(--cold); opacity: .8; }
.hd-sync { font-family: var(--hud); font-size: 10px; letter-spacing: .06em; color: var(--ink3); }
.hd-who { margin: 0; display: flex; gap: 4px; grid-row: 2; }
.hd-who i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ln2); font-family: var(--hud); font-size: 9px; color: var(--ink2); }
.hd-who i.is-me { border-color: color-mix(in srgb, var(--warm) 55%, transparent); color: var(--warm); }
.hd-links { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 4px; }
.hd-links a { font-family: var(--hud); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); padding: 8px 10px; border-radius: 999px; transition: color .2s ease, background .2s ease; }
.hd-links a:hover { color: var(--ink); background: rgba(127,127,127,.12); }
.hd-off .hd-links { grid-row: auto; }
.hd-foot { margin: 56px 0 0; color: var(--ink3); font-size: 13px; } .hd-foot b { color: var(--ink2); }
/* sign-in and "not invited" pages reuse this template */
.hello { position: relative; z-index: 1; padding: calc(var(--h0) + 10px) 0 40px; max-width: 640px; }
.hello h1 { font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -.05em; margin: 0 0 14px; } .hello h1 i { color: var(--warm); font-style: normal; }
.hello .lead { color: var(--ink2); font-size: 17px; margin: 0; } .hello .btn { display: inline-flex; margin-top: 22px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--ln2); font-family: var(--hud); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- light mode (app-light.css sets the tokens and body.light) ---------- */
.light .hd-dock.is-compact { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.light .hd-b > a:hover { background: rgba(16,19,23,.035); }
.light .hd-b.is-now > a, .light .hd-b.is-now > div { background: rgba(198,255,61,.22); }
.light .hd-b.is-now .hd-dot, .light .hd-nk b::before, .light .hd-nbar i { box-shadow: none; }
.light .hd-nbar i { background: var(--lime); } .light .hd-nbar { background: rgba(16,19,23,.1); }
.light .hd-rt i.hd-k-focus { background: rgba(110,170,0,.35); } .light .hd-rt i.hd-k-decide, .light .hd-rt i.hd-k-unblock { background: #6fbf1f; }
.light .hd-bulb { background: rgba(110,170,0,.35); box-shadow: 0 0 0 3px rgba(198,255,61,.25); }
.light .hd-chain li:nth-child(n+4) .hd-bulb { background: rgba(110,170,0,.18); box-shadow: none; }
.light .hd-chain li.is-first .hd-bulb, .light .hd-chain a:hover .hd-bulb { background: var(--lime); box-shadow: 0 0 0 1px rgba(74,138,0,.5), 0 0 0 5px rgba(198,255,61,.35), 0 0 18px rgba(198,255,61,.9); animation: none; }
.light .hd-chain::after { background: linear-gradient(180deg, transparent, #6fbf1f, transparent); }
.light .hd-needs a.is-hot .hd-num { text-shadow: none; }
.light .hd-figY { color: var(--warm); } .light .hd-figS { color: var(--ink2); }
.light .hd-bc em, .light .hd-ws, .light .hd-spark, .light .hd-breaks b { color: var(--ink2); }
.light .hd-switch { background: color-mix(in srgb, var(--bg) 92%, transparent); }

@media (prefers-reduced-motion: reduce) { .hd-chain::after, .hd-chain li.is-first .hd-bulb { animation: none; } .hd-chain::after { display: none; } }

/* ---------- phone: small heads, a You / Sidekick switch instead of two columns ---------- */
@media (max-width: 860px) {
  :root { --navh: 54px; --h0: clamp(236px, 36vh, 300px); }
  .hd-nav, .hd-wrap { width: calc(100% - 32px); }
  .hd-cnext, .hd-fig { display: none; }
  .who { gap: 8px; } .who span { display: none; } .who i { width: 28px; height: 28px; font-size: 10px; }
  .who a { padding: 8px 11px; font-size: 10px; } .who a.mode { padding: 8px 6px; }
  .hd-switch { display: flex; position: sticky; top: var(--navh); z-index: 15; margin: 0 -16px; padding: 0 16px; border-bottom: 1px solid var(--ln);
    background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .hd-switch button { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 14px 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    background: none; color: var(--ink3); font: 500 10.5px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
  .hd-switch button i { width: 6px; height: 6px; border-radius: 50%; background: var(--warm); opacity: .5; }
  .hd-switch button[data-to="kick"] i { background: var(--cold); }
  .hd-switch button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--warm); } .hd-switch button[aria-selected="true"] i { opacity: 1; }
  .hd-switch button[data-to="kick"][aria-selected="true"] { border-bottom-color: var(--cold); }
  .light .hd-switch button[data-to="kick"][aria-selected="true"] { border-bottom-color: var(--ink2); }
  .hd-cols { grid-template-columns: minmax(0, 1fr); } .hd-cols::before { display: none; }
  .hd-cols[data-show="you"] .hd-colS, .hd-cols[data-show="kick"] .hd-colY { display: none; }
  .hd-col [id] { scroll-margin-top: calc(var(--navh) + 64px); }
  .hd-eye { padding-top: 20px; margin-bottom: 22px; }
  .hd-h { margin-top: 44px; font-size: 20px; }
  .hd-nt { font-size: 26px; }
  .hd-tl::before { left: 59.5px; }
  .hd-b > a, .hd-b > div { grid-template-columns: 42px 12px minmax(0, 1fr); gap: 11px; }
  .hd-bd { grid-column: 1; grid-row: 2; padding-top: 0; font-size: 9.5px; text-align: right; }
  .hd-bc { grid-column: 3; grid-row: 1 / span 2; }
  .hd-more summary::before { width: 42px; margin-right: 23px; }
  .hd-bodyg { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hd-needs a { grid-template-columns: 62px minmax(0, 1fr) 14px; gap: 14px; } .hd-num { font-size: 44px; } .hd-needs strong { font-size: 17px; }
  .hd-pulse a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; } .hd-pulse p { grid-column: 1 / -1; } .hd-pulse .hd-ws { grid-row: 1; grid-column: 1; } .hd-pulse time { grid-row: 1; grid-column: 2; }
  .hd-teams li { grid-template-columns: minmax(0, 1fr); } .hd-links { grid-row: auto; grid-column: 1; margin-left: -10px; }
  .hd-breaks { flex-direction: column; gap: 4px; }
  .hd-scroll { max-height: none; overflow: visible; padding-right: 0; }
  .hd-day { top: calc(var(--navh) + 44px); }
  .hd-rv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-rv-sug a { grid-template-columns: 1fr; gap: 4px; } .hd-rv-sug em { white-space: normal; }
  .hd-recs a { grid-template-columns: 1fr; } .hd-recs a em, .hd-recs a p { grid-column: 1; }
}

/* ---------- the board follows prefs.layout (heads.ts wraps each widget in .hd-w data-w; /app/welcome sets it up) ---------- */
.hd-eye + .hd-w > .hd-h:first-of-type, .hd-eye + .hd-w > section > .hd-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hd-w + .hd-w > .hd-now { margin-top: 52px; }
.hd-one { grid-template-columns: minmax(0, 1fr); }
.hd-h + .hd-notes { margin-top: 0; padding-top: 0; border-top: 0; }
.hd-w-none a { color: var(--ink); border-bottom: 1px solid var(--ln2); }