/* ===========================================================================
   HIVEMIND TIDES — page-local layer
   ---------------------------------------------------------------------------
   Additive only. Every value is a token from site/style.css; no system
   component is forked or overridden. Four page-local pieces:

     .ht-pins     the annotation overlay. Sized in rem, so it does NOT scale
                  with the sheet — the fix for the original poster, whose
                  fit() shrank 10px annotation type to ~4px on a laptop.
     .ht-clock    the ninety-seven minutes, as a timeline.
     .ht-trace    one measured series per card, drawn from the same readings.
     .ht-strip    the sheet's own cross-section, used as an honest legend.
   ======================================================================== */

/* -- 0. One token calibrated for this plate ------------------------------- */
/* DEVIATION from DESIGN.md 1.1, scoped to this page and flagged for the design
   lead. --scrim is rgba(10,9,8,.74), which was set against Value Terrain's cream
   sheet. This plate's ground is #040507: at .74 the loupe does not dim the sheet,
   it erases it, and the artwork -- the hero -- disappears for the whole length of
   the detail column. At .58 the currents, the rust field and the break line stay
   legible outside the loupe while the focal region still reads as brighter, and
   the highlight is still carried by the accent ring and corner ticks as well as by
   dimming, so 7 "never rely on colour alone" holds. Revert this line to inherit
   the global value if the deviation is refused. */
body[data-plate="hivemind-tides"] { --scrim: rgba(10, 9, 8, 0.58); }

/* -- 1. The non-scaling annotation overlay -------------------------------- */
.ht-pins { position: absolute; inset: 0; pointer-events: none; }

.ht-pin {
  position: absolute;
  left: calc(var(--px) * 100%);
  top:  calc(var(--py) * 100%);
  translate: -50% -50%;
  pointer-events: auto;
  display: grid; place-items: center;
  width:  clamp(1.30rem, 1.05rem + 0.85vw, 1.70rem);
  height: clamp(1.30rem, 1.05rem + 0.85vw, 1.70rem);
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.82);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.ht-pin:hover,
.ht-pin:focus-visible { background: var(--accent-deep); color: var(--ink); border-color: var(--ink); }
.ht-pin.is-active     { background: var(--accent-deep); color: var(--ink); }

/* -- 2. The clock --------------------------------------------------------- */
.ht-clock { margin-top: var(--sp-5); border-top: 1px solid var(--rule); max-width: 48rem; }

.ht-clock__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule-faint);
  position: relative;
}
@media (min-width: 44em) {
  .ht-clock__row {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--sp-4); align-items: baseline;
  }
}
.ht-clock__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--rule);
}
.ht-clock__row::after {
  content: ""; position: absolute; left: -3px; top: calc(var(--sp-4) + 0.55em);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ground); border: 1px solid var(--ink-faint);
}
.ht-clock__row--break::after { background: var(--accent); border-color: var(--accent); }
.ht-clock__t {
  font-family: var(--mono); font-size: var(--text-sm);
  letter-spacing: var(--track-meta); font-variant-numeric: tabular-nums;
  color: var(--accent); white-space: nowrap;
}
.ht-clock__what { font-size: var(--text-base); color: var(--ink-muted); line-height: 1.55; max-width: 54ch; }
.ht-clock__what strong { color: var(--ink); font-weight: 400; }
.ht-clock__src {
  display: block; margin-top: var(--sp-1);
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-faint);
}
.ht-clock__gap {
  display: block; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  position: relative;
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint);
}
.ht-clock__gap { color: var(--accent); }
.ht-clock__gap::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--accent);
}
.ht-clock__row--break .ht-clock__what { color: var(--ink); }

/* -- 3. Traces ------------------------------------------------------------ */
.ht-traces { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 48em) { .ht-traces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } }

.ht-trace { border-top: 1px solid var(--rule); padding-top: var(--sp-3); }
.ht-trace__name {
  font-family: var(--sans); font-weight: 600; font-size: var(--text-base);
  letter-spacing: var(--track-title); color: var(--ink);
}
.ht-trace__meta { margin-bottom: var(--sp-3); }
.ht-trace__svg { width: 100%; height: auto; margin-bottom: var(--sp-2); overflow: visible; }
.ht-trace__base   { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ht-trace__break  { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: .85;
                    vector-effect: non-scaling-stroke; }
.ht-trace__line   { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke;
                    stroke-linejoin: round; stroke-linecap: round; }
.ht-trace__line--add  { stroke: #EFE8DA; }
.ht-trace__line--drop { stroke: var(--accent); }
.ht-trace__fig {
  font-family: var(--sans); font-weight: 600; font-size: var(--text-md);
  letter-spacing: var(--track-title); font-variant-numeric: tabular-nums;
  color: var(--ink); display: block; margin-bottom: var(--sp-1);
}
.ht-trace__note { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }

/* -- 4. The cross-section strip ------------------------------------------- */
.ht-strip { margin: var(--sp-5) 0 var(--sp-6); }
.ht-strip__axis {
  display: grid; grid-template-columns: var(--spine-pc) minmax(0, 1fr);
  margin-top: var(--sp-2);
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint);
}
.ht-strip__axis span:first-child { text-align: right; padding-right: var(--sp-2); color: var(--accent); }
.ht-strip__axis span:last-child  { padding-left: var(--sp-2); }
.ht-strip__svg { width: 100%; height: 5.2rem; }
.ht-strip__field  { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ht-strip__seg--add  { fill: #C9C2B4; }
.ht-strip__seg--drop { fill: var(--accent-deep); }
.ht-strip__seg.is-thin { fill: #4A453D; }
.ht-strip__spine { stroke: var(--ink-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ht-strip__seam  { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }

.ht-key { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.ht-key li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-faint);
}
.ht-key i { width: 15px; height: 9px; flex: none; }
.ht-key .k-add  { background: #C9C2B4; }
.ht-key .k-drop { background: var(--accent-deep); }
.ht-key .k-thin { background: #4A453D; }
.ht-key .k-seam { background: var(--ink); width: 2px; height: 13px; }

/* -- 5. The lead-in that opens the annotation column ---------------------- */
.ht-lead { padding-bottom: var(--sp-4); }
.ht-lead__key { color: var(--accent); margin-bottom: var(--sp-2); }
.ht-lead__body {
  font-size: var(--text-base); line-height: 1.6;
  color: var(--ink-muted); max-width: var(--measure); text-wrap: pretty;
}
.ht-lead__body strong { color: var(--ink); font-weight: 400; }

/* Composition only: two equal columns of otherwise untouched system blocks. */
.ht-cols { display: grid; gap: var(--sp-5); }
@media (min-width: 64em) {
  .ht-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: start; }
}
.ht-cols > .footnotes { margin-top: 0; }

/* -- 6. Two shared shapes -------------------------------------------------- */
.ht-stats { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 40em) { .ht-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ht-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
.ht-stats > .stat { border-top: 1px solid var(--rule); padding-top: var(--sp-3); }

.ht-pull {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-deep);
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.28;
  letter-spacing: var(--track-title);
  color: var(--ink);
  max-width: 30ch;
  text-wrap: balance;
}
.ht-pull b { color: var(--accent); font-weight: inherit; font-variant-numeric: tabular-nums; }