/* A worked illustration of a read-only pilot. Without JavaScript the finished scene is
   shown; freezer-story.js plays it from the start. */
.freezer-story { margin: 0 0 2.5rem; padding: 1.25rem 1.5rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; }
.fs-head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .9rem; }
.fs-clock { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text-primary); }
.fs-where { color: var(--text-secondary); font-size: .95rem; }
.fs-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; align-items: stretch; }
.fs-chart { display: block; width: 100%; height: 100%; min-height: 15rem; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; }
.fs-chart text { font-family: inherit; font-size: 15px; fill: var(--text-secondary); }
.fs-grid-line { stroke: var(--border); }
.fs-alarm { stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 7 6; }
.fs-alarm-label { fill: var(--warning); font-weight: 600; }
.fs-other { fill: none; stroke: var(--text-muted); stroke-width: 2; }
.fs-main { fill: none; stroke: var(--error); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.fs-dot { fill: var(--error); }
.fs-main-label { fill: var(--error); font-weight: 700; font-size: 16px; }
.fs-panel { display: flex; flex-direction: column; gap: .55rem; }
.fs-card { padding: .6rem .85rem; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; line-height: 1.38; font-size: 1rem; color: var(--text-primary); }
.fs-card span { display: block; }
.fs-card { flex: 1; }
.fs-card b { display: block; margin-bottom: .1rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.fs-card--team { border-color: var(--accent); border-width: 2px; }
.fs-status { min-height: 1.6em; margin: .85rem 0 .5rem; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.fs-controls { display: none; align-items: center; gap: .75rem; }
.js .fs-controls { display: flex; }
.fs-btn { min-width: 5rem; padding: .35rem .8rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.fs-btn:hover { border-color: var(--accent); }
.fs-range { flex: 1; min-width: 0; accent-color: var(--accent); }
.freezer-story figcaption { margin-top: .75rem; }
@media (max-width: 760px) {
  .freezer-story { padding: 1rem; }
  .fs-grid { grid-template-columns: 1fr; }
  .fs-chart { height: auto; min-height: 0; }
  .fs-chart text, .fs-main-label { font-size: 21px; }
}