/* How a turtle is doing: the headline, the "needs attention" chips, and a row per series as a fine bar or five pips.
   One component for the public page and the keeper's console (status.js draws it); tokens only.
   A zone is never colour alone: good is a solid fill and a tick, watch is striped with a diamond, trouble is cross-hatched
   with a warning triangle, and a mark on the bar shows where trouble starts. */
.st-block { display: grid; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.st-block[hidden], .st-chips[hidden], .st-headline[hidden], .st-trend[hidden], .st-num[hidden], .st-mark[hidden], .st-zone[hidden] { display: none; }
.st-row, .st-chip, .st-headline, .st-brief { --z: var(--z-good); --z-ink: var(--z-good-ink); }
.zone-watch { --z: var(--z-watch); --z-ink: var(--z-watch-ink); }
.zone-trouble { --z: var(--z-trouble); --z-ink: var(--z-trouble-ink); }

.st-headline { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-md); font-weight: var(--w-heavy); color: var(--c-ink); line-height: 1.3; }
.st-headline .st-zico { color: var(--z-ink); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--z); background: var(--c-surface); }
.st-headline .ico { width: 14px; height: 14px; }

.st-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-chip { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 30px; padding: 2px var(--s-3); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold);
  color: var(--z-ink); background: var(--c-surface-2); border: 2px solid var(--z); border-radius: var(--r-pill); }
.st-chip.level-alert { border-style: double; border-width: 4px; }
.st-chip .ico { width: 15px; height: 15px; flex: none; }
.st-chip.act { cursor: pointer; padding-right: 2px; transition: transform var(--dur) var(--ease-spring); }
.st-chip.act:hover { transform: translateY(-1px); }
.st-chip .st-cact { margin-left: var(--s-1); padding: 2px var(--s-3); border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-surface); font-weight: var(--w-heavy); }

.st-rows { display: grid; gap: var(--s-2); }
.st-row { display: grid; grid-template-columns: minmax(92px, 8.5em) minmax(56px, 1fr) minmax(84px, max-content); column-gap: var(--s-2); row-gap: 0; align-items: center;
  border-radius: var(--r-sm); cursor: pointer; padding: 1px 2px; }
.st-row:focus-visible, .st-chip:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.st-name, .st-word, .st-trend { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
.st-name { font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--c-ink-2); }
.st-name .ico { width: 16px; height: 16px; flex: none; color: var(--c-ink-2); }
.st-nico, .st-zico, .st-tico { display: inline-grid; place-items: center; flex: none; }
.st-word { font-size: var(--t-sm); font-weight: var(--w-heavy); color: var(--z-ink); line-height: 1.2; }
.st-wtext, .st-ntext { min-width: 0; overflow-wrap: anywhere; }
.st-word .ico { width: 14px; height: 14px; }
.st-trend { grid-column: 2 / -1; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--c-ink-2); }
.st-trend .ico { width: 12px; height: 12px; }
.st-trend.dir-worse { color: var(--z-watch-ink); }
.st-num { grid-column: 2 / -1; font-size: var(--t-xs); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }

/* the fine bar: zones drawn on the track, the fill over them, a mark where trouble starts */
.st-track { position: relative; height: 14px; background: var(--z-track); border: 2px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
.st-zone { position: absolute; top: 0; bottom: 0; left: 0; opacity: .5; }
.st-zone.trouble { background-image: repeating-linear-gradient(45deg, var(--z-trouble) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, var(--z-trouble) 0 2px, transparent 2px 5px); }
.st-zone.watch { background-image: repeating-linear-gradient(45deg, var(--z-watch) 0 2px, transparent 2px 6px); }
.st-fill { position: absolute; left: 0; top: 0; bottom: 0; background-color: var(--z); border-radius: var(--r-pill); transition: width .8s var(--ease-soft); }
.zone-watch .st-fill { background-image: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--z-track) 55%, transparent) 4px 7px); }
.zone-trouble .st-fill { background-image: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, var(--z-track) 60%, transparent) 3px 5px),
  repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--z-track) 60%, transparent) 3px 5px); }
.st-mark { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 3px solid var(--c-ink); margin-left: -1px; }

/* the simpler style: five pips of the series' own picture (five hearts, five apples) */
.st-pipbox { display: inline-flex; gap: 3px; align-items: center; }
.st-pip { display: inline-grid; place-items: center; color: color-mix(in srgb, var(--c-ink-2) 50%, transparent); }
.st-pip .ico { width: 20px; height: 20px; stroke-width: 2; }
.st-pip.on { color: var(--z); }
.st-pip.on .ico { fill: var(--z); stroke: var(--z-ink); }
.zone-watch .st-pip.on .ico { fill: color-mix(in srgb, var(--z) 55%, var(--c-surface)); stroke-dasharray: 3 2; }
.zone-trouble .st-pip.on .ico { fill: color-mix(in srgb, var(--z) 30%, var(--c-surface)); stroke-dasharray: 1.5 2.5; }
.st-row.st-pips { grid-template-columns: minmax(92px, 8.5em) max-content minmax(84px, 1fr); }

.t3d-panel .st-row { grid-template-columns: minmax(104px, 7.5em) max-content minmax(0, 1fr); }
.t3d-panel .st-ntext { overflow-wrap: normal; }               /* "Entertained" and "Company" stay whole words in the narrow panel */
.t3d-panel .st-pip .ico { width: 16px; height: 16px; }
.t3d-panel .st-pipbox { gap: 2px; }

/* the few words in small places: the strip over the view and the marker above a turtle */
.st-brief { display: inline-flex; align-items: center; gap: 3px; padding: 0 var(--s-2); border-radius: var(--r-pill); border: 2px solid var(--z); color: var(--z-ink); background: var(--c-surface); font-weight: var(--w-heavy); white-space: nowrap; }
.st-brief .ico { width: 13px; height: 13px; margin: 0; }
.st-brief.zone-good { border-color: transparent; background: transparent; padding-left: 0; }

@media (max-width: 420px) {
  .st-row { grid-template-columns: minmax(84px, 7.5em) minmax(48px, 1fr) max-content; }
  .st-chip { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .st-fill, .st-chip.act { transition: none; } }