/* Hike profile (features/hike-ui.js): verdict card, ribbons (profile, seals lane, pacer, clock lanes), live card,
   passport. Tokens only, plus the per-scheme alpha knobs below. Shu (--accent) only for "now / you are here",
   logged seals and the hard-time underline. */
.hk {
  --hk-bg: var(--tone-wash);
  --hk-paper: var(--surface);
  --hk-far: .055; --hk-mid: .09; --hk-area: .10;
  --hk-s0: .16; --hk-s1: .34; --hk-s2: .58; --hk-s3: .9;
  --hk-night: var(--r-indigo); --hk-night-ink: var(--r-indigo-ink); --hk-night-a: .12; --hk-night-hatch: .3;
  --hk-halo: var(--surface); --hk-halo-a: .92;
  --hk-ink: var(--accent);
  --hk-line: var(--tone-ink); --hk-lead: .78;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hk {
    --hk-bg: color-mix(in srgb, var(--tone-wash) 55%, var(--surface));
    --hk-far: .035; --hk-mid: .055; --hk-area: .065;
    --hk-s0: .1; --hk-s1: .22; --hk-s2: .4; --hk-s3: .62;
    --hk-night: var(--bg); --hk-night-a: .55; --hk-night-hatch: .3;
    --hk-halo: var(--text); --hk-halo-a: .2;
    --hk-ink: color-mix(in srgb, var(--accent) 55%, var(--accent-text));
    --hk-line: color-mix(in srgb, var(--tone-ink) 82%, var(--surface));
    --hk-lead: .7;
  }
}
:root[data-theme="dark"] .hk {
  --hk-bg: color-mix(in srgb, var(--tone-wash) 55%, var(--surface));
  --hk-far: .035; --hk-mid: .055; --hk-area: .065;
  --hk-s0: .1; --hk-s1: .22; --hk-s2: .4; --hk-s3: .62;
  --hk-night: var(--bg); --hk-night-a: .55; --hk-night-hatch: .3;
  --hk-halo: var(--text); --hk-halo-a: .2;
  --hk-ink: color-mix(in srgb, var(--accent) 55%, var(--accent-text));
  --hk-line: color-mix(in srgb, var(--tone-ink) 82%, var(--surface));
  --hk-lead: .7;
}

.hk-cockpit { margin: var(--s-2) 0 var(--s-5); }
.hk-cockpit > :first-child { margin-top: 0; }
.hk-hard { text-decoration: underline 2px var(--accent); text-underline-offset: 4px; font-variant-numeric: tabular-nums; }
.hk-approx { white-space: nowrap; }
.hk-tilde { font: italic 400 1em/1 var(--font-serif); color: var(--text-3); margin-right: 1px; }
.hk-arrow { font-family: var(--font-sans); color: var(--text-3); font-size: .8em; }
.hk-facts {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-3);
  font: 500 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3);
}
.hk-facts .icon { color: var(--text-3); }

/* Verdict card: the answer first */
.hk-sum { padding: var(--s-4); }
.hk-sum-eyebrow { margin: 0; font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.hk-sum-title { margin: 6px 0 0; font: 500 var(--fs-title-2)/var(--lh-title-2) var(--font-serif); font-variation-settings: 'opsz' 28; color: var(--text); }
.hk-sum-body { margin: 4px 0 0; font: 400 15px/22px var(--font-sans); color: var(--text-2); }
.hk-sum-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.hk-sum-actions .btn { min-height: 44px; font-size: 15px; padding: 0 12px; }
.hk-sum-picked { margin: var(--s-2) 0 0; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3); }
.hk-sum-foot {
  display: flex; align-items: center; gap: 6px; margin: var(--s-3) 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font: 500 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3);
}
.hk-sum-foot .icon { color: var(--text-3); }

/* One walk */
.hk-route { margin-top: var(--s-6); }
.hk-route + .hk-route { padding-top: var(--s-6); border-top: 1px solid var(--line); }
.hk-route-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.hk-official { margin-left: auto; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3); }
.hk-chosen { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--fs-caption)/1 var(--font-sans); color: var(--tone-ink); }
.hk-route-title { margin: var(--s-2) 0 0; font: 500 20px/26px var(--font-serif); font-variation-settings: 'opsz' 24; color: var(--text); text-wrap: balance; }
.hk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px 14px; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.hk-stats li { display: grid; }
.hk-stat-v { font: 600 16px/22px var(--font-sans); font-variant-numeric: tabular-nums lining-nums; color: var(--text); white-space: nowrap; }
.hk-stat-v small { font-size: 13px; font-weight: 500; color: var(--text-2); }
.hk-stat-l { font: 400 12px/16px var(--font-sans); color: var(--text-3); }

/* The chart: one SVG at the measured width; it bleeds to the card's edges */
.hk-chart { position: relative; margin-top: var(--s-3); }
.itin-day-inner .hk-cockpit .hk-chart { margin-inline: calc(-1 * var(--s-4)); }
.hk-live .hk-chart { margin-inline: calc(-1 * var(--card-pad)); }
.hk-chart-svg { line-height: 0; }
.hk-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.hk-scrub {
  position: absolute; left: 0; width: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y;
}
.hk-scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 88px; }
.hk-scrub::-moz-range-thumb { width: 44px; height: 88px; border: 0; }
.hk-chart:has(.hk-scrub:focus-visible) .hk-pill-ring { opacity: 1; }

/* SVG: band, ridges, profile */
.hk-svg text { font-family: var(--font-sans); font-variant-numeric: tabular-nums lining-nums; }
.hk-t { paint-order: stroke; stroke: var(--hk-bg); stroke-width: 4px; stroke-linejoin: round; }
.hk-band { fill: var(--hk-bg); }
.hk-band-edge { stroke: var(--tone-ink); opacity: .14; }
.hk-ridge-far { fill: var(--tone-ink); opacity: var(--hk-far); }
.hk-ridge-mid { fill: var(--tone-ink); opacity: var(--hk-mid); }
.hk-grid { stroke: var(--tone-ink); opacity: .18; stroke-dasharray: 1 4; }
.hk-gridl { font-size: 11px; font-weight: 500; fill: var(--text-3); }
.hk-night-hatch { opacity: var(--hk-night-hatch); }
.hk-night-edge { stroke: var(--hk-night-ink); opacity: .5; stroke-dasharray: 2 3; }
.hk-night-t { font: italic 400 12.5px/1 var(--font-serif); fill: var(--hk-night-ink); }
.hk-area { fill: var(--tone-ink); opacity: var(--hk-area); }
.hk-base { stroke: var(--tone-ink); opacity: .35; }
.hk-line { fill: none; stroke: var(--hk-line); stroke-width: 1.75; stroke-linejoin: round; }
.hk-walked { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; }
.hk-tick { stroke: var(--tone-ink); opacity: .5; }
.hk-km { font-size: 11px; font-weight: 500; fill: var(--text-3); }
.hk-place { font-size: 11px; font-weight: 600; fill: var(--text-2); letter-spacing: .02em; }
.hk-climb { font-size: 11px; font-weight: 600; fill: var(--tone-ink); }
.hk-climb-top { font-weight: 500; fill: var(--text-2); }
.hk-climb-bracket { fill: none; stroke: var(--tone-ink); opacity: .55; }
.hk-endnote { font: italic 400 13px/1 var(--font-serif); fill: var(--text-2); }
.hk-stop-line { stroke: var(--text); opacity: .45; }
.hk-stop { fill: var(--surface); stroke: var(--text); stroke-width: 1.2; }
.hk-stop-icon { color: var(--text); }

/* Pacers, you, tags, leaders */
.hk-leader { fill: none; stroke: var(--text); opacity: var(--hk-lead); stroke-width: 1.6; stroke-dasharray: .1 3.4; stroke-linecap: round; }
.hk-leader.is-dim { opacity: .3; }
.hk-leader-you { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.hk-pacer-halo { fill: none; stroke: var(--hk-halo); opacity: var(--hk-halo-a); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.hk-pacer-band { fill: none; stroke: var(--text); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hk-pacer { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 2.2 1.6; }
.hk-pacer-band.is-dim, .hk-pacer.is-dim { opacity: .45; }
.hk-pacer-halo.is-dim { opacity: calc(var(--hk-halo-a) * .5); }
.hk-you-halo { fill: var(--accent); opacity: .18; }
.hk-you { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.hk-you.is-ring { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.hk-you.is-off { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 3 2; }
.hk-tag { font: italic 400 13px/1 var(--font-serif); fill: var(--text-2); }
.hk-tag.is-dim { fill: var(--text-3); }
.hk-tag-you { font: 600 11px/1 var(--font-sans); fill: var(--accent-text); letter-spacing: .04em; text-transform: uppercase; }

/* Seals: future = outline, next = ink outline, missed = dashed, logged = shu (the stamp) */
.hk-stem { stroke: var(--tone-ink); opacity: .4; stroke-dasharray: 1 2.5; }
.hk-stem-lead { fill: none; stroke: var(--tone-ink); opacity: .45; }
.hk-seal-shape { fill: var(--surface); stroke: var(--text-3); stroke-width: 1.1; }
.hk-seal-k { font: 800 10.5px/1 var(--font-mincho); fill: var(--text-2); }
.hk-seal-hit { fill: transparent; }
.hk-seal.is-logged .hk-seal-shape { fill: var(--accent); stroke: var(--accent); }
.hk-seal.is-logged .hk-seal-k { fill: var(--on-accent); }
.hk-seal.is-logged .hk-seal-ink { filter: url(#ink-rough); }
.hk-seal.is-missed .hk-seal-shape { stroke-dasharray: 2 2; fill: transparent; }
.hk-seal.is-missed .hk-seal-k { fill: var(--text-3); }
.hk-seal.is-next .hk-seal-shape { stroke: var(--text); stroke-width: 1.75; }
.hk-seal.is-next .hk-seal-k { fill: var(--text); }
.hk-seal.is-tappable { cursor: pointer; }
.hk-seal:focus { outline: none; }
.hk-seal:focus-visible .hk-seal-hit { stroke: var(--text); stroke-width: 2; }
.hk-mini { display: block; overflow: visible; }
.hk-mini .hk-seal-k { font-size: 11.5px; }

/* Clock lanes */
.hk-lane { font-size: 11px; font-weight: 600; fill: var(--text-2); stroke: var(--hk-paper); }
.hk-lane.is-dim { fill: var(--text-3); }
.hk-lane-sub { font-weight: 500; fill: var(--text-3); }
.hk-bar { fill: var(--tone); }
.hk-bar.is-dim, .hk-bar-slow.is-dim { opacity: .4; }
.hk-bar.is-ahead { opacity: .42; }
.hk-bar.is-plan { opacity: .6; }
.hk-bar-slow { stroke: var(--tone-ink); stroke-opacity: .5; }
.hk-bar-cursor { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; }
.hk-bar-cursor.is-now { stroke: var(--accent); }
.hk-cursor { stroke: var(--text); stroke-width: 1.25; }
.hk-cursor.is-now { stroke: var(--accent); }
.hk-dark { fill: var(--hk-night); opacity: var(--hk-night-a); }
.hk-dark-hatch { opacity: var(--hk-night-hatch); }
.hk-dark-edge { stroke: var(--hk-night-ink); opacity: .7; }
.hk-dark-lblbg { fill: var(--hk-paper); }
.hk-dark-icon { color: var(--hk-night-ink); }
.hk-dark-t { font-size: 11px; font-weight: 600; fill: var(--hk-night-ink); }
.hk-walkto { stroke: var(--text); stroke-width: 1.25; stroke-dasharray: 1.5 2.5; }
.hk-wall { stroke: var(--text); stroke-width: 1.75; }
.hk-wall.is-gone { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 2.5; }
.hk-wall-t { font-size: 12px; font-weight: 600; fill: var(--text); stroke: var(--hk-paper); }
.hk-wall-t.is-gone { fill: var(--text-3); font-weight: 500; text-decoration: line-through; stroke: none; }   /* a halo would eat the strike-through */
.hk-ul { stroke: var(--accent); stroke-width: 2; }
.hk-wall-icon { color: var(--text-2); }
.hk-axis { stroke: var(--line-strong); }
.hk-hour { font-size: 11px; font-weight: 500; fill: var(--text-3); }
.hk-pill { fill: var(--text); }
.hk-pill.is-now { fill: var(--accent); }
.hk-pill-t { font-size: 11.5px; font-weight: 600; fill: var(--surface); }
.hk-pill-t.is-now { fill: var(--on-accent); }
.hk-pill-ring { fill: none; stroke: var(--text); stroke-width: 1.5; opacity: 0; }
.hk-clip { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .hk-seal.is-pressing .hk-seal-ink { animation: hk-press 320ms var(--ease-out) both; transform-box: fill-box; transform-origin: center; }
  @keyframes hk-press { 0% { scale: 1.35; opacity: 0; } 60% { scale: .94; opacity: 1; } 100% { scale: 1; opacity: 1; } }
  .hk-svg.is-first .hk-line.is-drawing { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: hk-draw 900ms var(--ease-out) 80ms forwards; }
  @keyframes hk-draw { to { stroke-dashoffset: 0; } }
}

/* Controls and key under the first chart */
.hk-controls { margin-top: var(--s-3); }
.hk-breaks, .hk-starts-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.hk-starts { margin-top: var(--s-3); }
.hk-ctl-label { font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.hk-ctl-label span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.hk-breaks .segment, .hk-starts .segment { padding: 0 11px; }
.hk .segment { min-height: 44px; }   /* 44 px targets, like the shared control */
.hk-start-note { margin: var(--s-2) 0 0; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3); }
.hk-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: var(--s-3) 0 0; padding: 0; list-style: none; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2); }
.hk-key li { display: inline-flex; align-items: center; gap: 6px; }
.hk-key svg { flex: none; overflow: visible; }
.hk-key-halo { stroke: var(--text-3); opacity: .35; stroke-width: 9; stroke-linecap: round; }
.hk-key-band { stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; }
.hk-key .is-hint { font: italic 400 14px/var(--lh-caption) var(--font-serif); color: var(--text-3); }

/* Verdicts under each walk */
.hk-verdicts { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.hk-verdicts .note-title { display: block; margin: 0 0 2px; }
.hk-ok { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0; padding: 2px 0; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2); }
.hk-ok .icon { margin-top: 1px; color: var(--tone-ink); }
.hk-ok.is-mixed .icon { color: var(--text-3); }
.hk-ok strong { color: var(--text); font-weight: 600; }
.hk-others { margin: 0; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3); font-variant-numeric: tabular-nums; }
.hk-foot { margin: var(--s-6) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3); }
.hk-foot p { margin: 0; }
.hk-foot p + p { margin-top: var(--s-2); }
.hk-sources { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 2px; }
.hk-sources a { color: var(--text-2); }

/* Live: the "right now" card */
.hk-live-head, .hk-today-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s-2); margin: 0 0 var(--s-3); }
.hk-live-route { font: 500 var(--fs-body)/22px var(--font-serif); color: var(--text); }
.hk-live { padding: var(--s-4); margin-bottom: var(--s-4); }
.hk-today .hk-live { margin-bottom: 0; }
.hk-live-eyebrow { margin: 0; font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); }
.hk-live-title:focus:not(:focus-visible) { outline: none; }
.hk-live-title { margin: 6px 0 0; font: 500 var(--fs-title-2)/var(--lh-title-2) var(--font-serif); font-variation-settings: 'opsz' 28; color: var(--text); text-wrap: balance; }
.hk-live-line { margin: 2px 0 0; font: 500 var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--text); }
.hk-live-sub { margin: var(--s-2) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--line); font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2); }
.hk-live .note { margin-top: var(--s-3); }
.hk-geo-btn { width: 100%; min-height: 44px; margin-top: var(--s-3); font-size: 15px; }
.hk-geo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: var(--s-3) 0 0; font: 500 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2); }
.hk-geo-text::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.hk-geo-stop { min-height: 44px; }
.hk-live .hk-rows { margin-top: var(--s-2); }

/* Ahead / behind */
.hk-sec { margin: var(--s-6) 0 var(--s-1); font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.hk-sec-count { font-weight: 500; text-transform: none; letter-spacing: 0; }
.hk-rows { list-style: none; margin: 0; padding: 0; }
.hk-row { display: grid; grid-template-columns: 54px 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.hk-row:first-child { border-top: 0; }
.hk-row > .icon { color: var(--text-2); }
.hk-row.is-dark > .icon { color: var(--hk-night-ink); }
.hk-row-time { font: 600 var(--fs-time)/var(--lh-time) var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.hk-row-time.is-hard { color: var(--text); }
.hk-row-time.is-gone { color: var(--text-3); text-decoration: line-through; font-weight: 500; }
.hk-row.is-gone .hk-row-name { color: var(--text-3); }
.hk-row-body { min-width: 0; }
.hk-row-name { margin: 0; font: 500 var(--fs-body)/22px var(--font-sans); color: var(--text); }
.hk-row-note { margin: 0; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2); }
.hk-row-mark { align-self: center; }
.hk-logbtn {
  position: relative; align-self: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--text-3); border-radius: var(--r-2);
  background: var(--surface); font: 600 var(--fs-small)/1 var(--font-sans); color: var(--text); cursor: pointer;
}
.hk-logstamp {
  display: grid; place-items: center; align-self: center; width: 44px; height: 44px; margin: -11px -11px -11px 0; padding: 0;
  border: 0; border-radius: var(--r-2); background: transparent; cursor: pointer;
}
.hk-logstamp:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.hk-logged { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0 0 var(--s-2); padding: 0; list-style: none; }
.hk-undo {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; margin-left: -4px; border: 0; border-radius: var(--r-2);
  background: transparent; font: 500 var(--fs-small)/1.2 var(--font-sans); color: var(--text); cursor: pointer;
}
.hk-undo:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.hk-logged .tnum { color: var(--text-3); font-weight: 400; font-size: 13px; }
.hk-more-missed summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
  font: 500 var(--fs-small)/1.2 var(--font-sans); color: var(--text-2); border-top: 1px solid var(--line);
}
.hk-more-missed > .hk-rows > .hk-row:first-child { border-top: 1px solid var(--line); }
.hk-switch { margin: var(--s-3) 0 0; }
.hk-switch .btn { padding-inline: 0; }
.hk-more {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap-min); margin-top: var(--s-1);
  font: 500 var(--fs-small)/1 var(--font-sans); color: var(--text-2); text-decoration: none;
}
.hk-today .hk-sum { margin: 0; }

/* Passport */
.hk-pp-sum { display: flex; gap: 22px; margin: 0 0 var(--s-2); padding: 0; list-style: none; }
.hk-pp-sum li { display: grid; }
.hk-pp-sum b { font: 500 34px/38px var(--font-serif); font-variation-settings: 'opsz' 48; font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
.hk-pp-sum span { font: 400 12px/16px var(--font-sans); color: var(--text-3); }
.hk-pp-sum li.is-ink b { color: var(--accent-text); }
.hk-pp-day { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin: var(--s-7) 0 var(--s-3); }
.hk-pp-day-title { margin: 0; font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.hk-pp-day-count { flex: none; font: 500 var(--fs-caption)/1 var(--font-sans); color: var(--text-3); }
.hk-pp-page { padding: var(--s-5) var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.hk-pp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 6px; }
.hk-pp-cell { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.hk-pp-seal { display: block; overflow: visible; }
.hk-pp-ring { fill: none; stroke: var(--text-3); stroke-width: 2.2; stroke-dasharray: 1.5 3; }
.hk-pp-ring.ring-logged, .hk-pp-ring.is-inner { stroke: var(--hk-ink); stroke-dasharray: none; }
.hk-pp-ring.is-inner { stroke-width: .9; }
.hk-pp-ring.ring-missed { stroke-dasharray: 3 3; }
.hk-pp-k { font: 800 28px/1 var(--font-mincho); fill: var(--hk-ink); }
.hk-pp-k.is-blank { fill: var(--text-3); opacity: .55; }
.hk-pp-name { font: 500 12px/15px var(--font-sans); color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
.hk-pp-time { font: 400 11px/14px var(--font-sans); color: var(--text-3); }
.hk-pp-cell:not(.is-logged) .hk-pp-name { color: var(--text-2); }
.hk-pp-cell.is-missed .hk-pp-time { font: italic 400 12px/14px var(--font-serif); }
.hk-pp-skipped { margin: var(--s-5) 0 0; font: italic 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-3); }
.hk-passport > .note { margin-top: var(--s-6); }