/* ============================================================================
   feeds-and-speeds / demo.css

   Every colour is a token from msu-theme.css; nothing here defines one.
   Gold and red-orange are fills and strokes only, never text (contrast
   rules 1 and 2 in the token layer). Control, tile and worked-step shapes
   follow the milling and fit labs, so the three read as one family.
   The removed-solid drawing and the material power chart are styled by the
   shared material-removal module; this file only lays them out.
   ==========================================================================*/

[data-interactive="feeds-and-speeds"] {
  margin: 1.5rem 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-width: 0;
  display: flex; flex-direction: column; gap: 1.25rem;
}

/* The paper figure is what a reader without JavaScript, and every printout,
   gets. With the live calculator running it steps aside on screen only. */
.fs-static { margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.fs-figure { margin: 1.25rem 0; display: flex; flex-direction: column; gap: .6rem; }
.fs-static figcaption, .fs-figure figcaption { color: var(--ink-soft); font-size: .92rem; }
[data-interactive="feeds-and-speeds"].is-live .fs-static { display: none; }
[data-fs-live] { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
[data-fs-live]:empty { display: none; }
.fs-calc, .fs-demo { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.fs-demo { border-top: 1px solid var(--rule); padding-top: 1.25rem; }

/* ---- controls, shared shape ---------------------------------------------*/
[data-interactive="feeds-and-speeds"] button,
[data-interactive="feeds-and-speeds"] select {
  min-height: 2.75rem;
  padding: .5rem .85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display); font-weight: 700; font-size: .92rem;
  letter-spacing: .02em; line-height: 1.2;
  cursor: pointer;
}
[data-interactive="feeds-and-speeds"] button:hover { border-color: var(--accent); background: var(--surface-2); }
[data-interactive="feeds-and-speeds"] button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent); color: var(--paper);
}
[data-interactive="feeds-and-speeds"] .fs-play {
  min-width: 6.5rem;
  border-color: var(--accent); background: var(--accent); color: var(--paper);
}
[data-interactive="feeds-and-speeds"] .fs-play:hover { background: var(--accent); filter: brightness(1.08); }
[data-interactive="feeds-and-speeds"] :is(button, select, input, .fs-stage):focus-visible {
  outline: 3px solid var(--cat2);
  outline-offset: 2px;
}
.fs-k {
  color: var(--ink-soft);
  font-family: var(--f-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---- top bar: material and units ----------------------------------------*/
.fs-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .75rem 1.25rem;
}
.fs-material { margin: 0; display: grid; gap: .35rem; min-width: 0; flex: 1 1 18rem; max-width: 26rem; }
.fs-material label, .fs-window span {
  font-family: var(--f-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; color: var(--ink);
}
.fs-material select { width: 100%; text-align: start; }
.fs-units, .fs-hold, .fs-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.fs-units legend, .fs-hold legend, .fs-group legend {
  padding: 0; margin-bottom: .2rem;
  font-family: var(--f-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; color: var(--ink);
}
.fs-units label, .fs-hold label {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 2.75rem; margin-right: .8rem;
  font-family: var(--f-display); font-weight: 600;
  cursor: pointer;
}
.fs-units input, .fs-hold input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }

/* ---- the guide card: read-only ranges, set apart from what was entered --*/
.fs-guide {
  display: flex; flex-direction: column; gap: .6rem; min-width: 0;
  padding: .9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule); border-inline-start: .3rem solid var(--msu-liteblue);
  border-radius: var(--radius-sm);
}
.fs-guide > p { margin: 0; }
.fs-guide-title { font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.fs-guide-cond { color: var(--ink-soft); font-size: .9rem; }
.fs-guide-list { margin: 0; display: grid; gap: .45rem; }
.fs-guide-list > div {
  display: grid; gap: .1rem .9rem; align-items: baseline;
  grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
}
.fs-guide-list dt {
  font-family: var(--f-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; color: var(--ink-soft);
}
.fs-guide-list dd { margin: 0; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.fs-guide-band { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); overflow-wrap: anywhere; }
.fs-guide-pos { font-size: .88rem; color: var(--ink-soft); }
.fs-guide-pos:empty { display: none; }
.fs-guide-pos[data-pos="inside"] { padding-inline-start: .45rem; border-inline-start: 3px solid var(--cat1); }
.fs-guide-pos[data-pos="below"], .fs-guide-pos[data-pos="above"] { padding-inline-start: .45rem; border-inline-start: 3px solid var(--flag); }
.fs-guide-apply { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.fs-guide-note { font-size: .88rem; color: var(--ink-soft); flex: 1 1 16rem; }
.fs-guide-more { font-size: .9rem; }
.fs-guide-more summary {
  cursor: pointer; min-height: 2.75rem; display: flex; align-items: center;
  font-family: var(--f-display); font-weight: 700; color: var(--ink);
}
.fs-guide-more summary:focus-visible { outline: 3px solid var(--cat2); outline-offset: 2px; }
.fs-guide-more ul { margin: .25rem 0 .5rem; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.fs-guide-sources { margin: 0; color: var(--ink-soft); }

/* ---- the form ------------------------------------------------------------*/
.fs-form {
  display: grid; gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.fs-group { display: flex; flex-direction: column; gap: .6rem; }
.fs-group legend { margin-bottom: .45rem; padding-bottom: .25rem; border-bottom: 1px solid var(--rule); width: 100%; }
.fs-form p { display: grid; gap: .35rem; margin: 0; min-width: 0; align-content: end; }
.fs-form label {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .5rem;
  font-family: var(--f-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .045em; line-height: 1.25; text-transform: uppercase; color: var(--ink);
}
.fs-unit { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-weight: 600; }
.fs-form input {
  width: 100%; min-height: 2.75rem; margin: 0;
  padding: .55rem .65rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono); font-size: 1rem;
}
.fs-form input:hover { border-color: var(--ink-soft); }
.fs-form input[aria-invalid="true"] { border-color: var(--cat3); border-width: 2px; }
.fs-form input::placeholder { color: var(--ink-soft); opacity: 1; }
.fs-errors { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.fs-errors:empty { display: none; }
.fs-errors li { padding: .35rem .6rem; border-inline-start: 3px solid var(--cat3); font-size: .9rem; }
.fs-errors li::before { content: none; }

/* ---- results: the site's result-tile shape ------------------------------*/
.fs-results {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.fs-result {
  display: flex; flex-direction: column; gap: .2rem; min-width: 0;
  padding: .8rem .9rem;
  background: var(--surface-2);
  border-inline-start: .3rem solid var(--accent);
  border-radius: var(--radius-xs);
}
.fs-result[data-kind="speed"], .fs-result[data-kind="rate"] { border-inline-start-color: var(--ink-soft); }
.fs-result[data-capped="true"] { border-inline-start-color: var(--flag); }
.fs-v { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.fs-s { font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
.fs-result[data-empty="true"] { border-inline-start-color: var(--rule); background: var(--paper); }
.fs-result[data-empty="true"] .fs-v { color: var(--ink-soft); }
.fs-result[data-kind="power"], .fs-result[data-kind="shaft"] { border-inline-start-color: var(--msu-gold); }
.fs-result[hidden] { display: none; }
.fs-cap {
  margin: 0; padding: .75rem .9rem;
  background: var(--flag-soft); border: 1.5px solid var(--flag); border-radius: var(--radius-sm);
  color: var(--ink); line-height: 1.5;
}
.fs-cap[hidden] { display: none; }

/* ---- the arithmetic, in the site's worked-step style ---------------------*/
.fs-work {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .75rem .9rem;
  background: var(--surface-2);
  border-inline-start: 2px solid var(--rule);
  color: var(--ink-soft);
  font-size: .94rem; line-height: 1.55;
  overflow-wrap: anywhere;
}
.fs-line { display: block; }
.fs-work[hidden] { display: none; }

/* ---- the experiment -------------------------------------------------------*/
.fs-exp, .fs-exp-body, .fs-chart { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.fs-exp-body { gap: 1rem; }
.fs-exp-body[hidden], .fs-waiting[hidden] { display: none; }
.fs-waiting {
  margin: 0; padding: .9rem 1rem;
  background: var(--paper); border: 1.5px dashed var(--rule); border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.fs-exp-title {
  margin: 0;
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 700; color: var(--ink);
}
.fs-exp-controls {
  display: grid; gap: .75rem 1.25rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.fs-slider { margin: 0; display: grid; gap: .35rem; min-width: 0; }
.fs-slider label {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .5rem;
  font-family: var(--f-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .045em; line-height: 1.25; text-transform: uppercase; color: var(--ink);
}
.fs-out { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-weight: 600; }
.fs-slider input[type="range"] {
  width: 100%; min-height: 2.75rem; margin: 0;
  accent-color: var(--accent); background: transparent;
}
.fs-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fs-table th, .fs-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--rule); text-align: start; }
.fs-table thead th {
  font-family: var(--f-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.fs-table tbody th { font-family: var(--f-display); font-weight: 700; }
.fs-table td { font-variant-numeric: tabular-nums; }
.fs-table td:last-child { font-family: var(--f-display); font-weight: 700; }
.fs-table tr[data-held="true"] td:last-child { color: var(--ink-soft); }
.fs-table tr[data-held="true"] { background: var(--surface-2); }
.fs-table tr[data-moved="true"] td:last-child { box-shadow: inset .25rem 0 0 var(--flag); }

/* ---- transport and drawing ------------------------------------------------*/
.fs-transport {
  display: grid; gap: .5rem .9rem; align-items: end;
  grid-template-columns: auto auto minmax(12rem, 1fr) auto;
}
.fs-time { margin: 0; }
.fs-window { display: grid; gap: .35rem; }
.fs-stage {
  display: grid; gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-sm);
}
.fs-sweep, .fs-static-fig {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.fs-sweep { display: flex; flex-direction: column; gap: .25rem; padding: .6rem .75rem .7rem; }
.fs-sweeps { display: flex; flex-direction: column; gap: .75rem; }
.fs-sweep-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; }
.fs-sweep-title { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.fs-sweep-sub { font-size: .88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fs-sweep-read {
  margin: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.25rem;
  font-size: .92rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.fs-sweep-read strong { font-family: var(--f-display); }
.fs-circ-svg { display: block; width: 100%; height: auto; }
.fs-scale-note, .fs-chart-note { margin: 0; font-size: .9rem; color: var(--ink); }
.fs-chart-note { color: var(--ink-soft); }
.fs-keys { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.fs-chart { border-top: 1px solid var(--rule); padding-top: 1rem; }

/* ---- SVG ----------------------------------------------------------------*/
.fs-unroll   { stroke: var(--msu-gold); stroke-width: 6; stroke-linecap: round; fill: none; }
.fs-dim      { stroke: var(--ink-soft); stroke-width: 1.5; fill: none; }
.fs-dot      { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.fs-circ     { fill: var(--surface-2); stroke: var(--ink); stroke-width: 3; }

.fs-t {
  font-family: var(--f-display); font-size: 17px; font-weight: 600;
  fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round;
}
.fs-t-soft  { fill: var(--ink-soft); font-weight: 500; }
.fs-t-small { font-size: 14px; }

/* ---- presentation: big, but never taller than the panel -----------------*/
.presenting [data-interactive="feeds-and-speeds"] { font-size: 1.05rem; }
.presenting .fs-sweep svg { max-height: 40vh; }
.presenting [data-interactive="feeds-and-speeds"] :is(button, select) { min-height: 3rem; }

@media (max-width: 44rem) {
  .fs-transport { grid-template-columns: 1fr 1fr; }
  .fs-time, .fs-window { grid-column: 1 / -1; }
  .fs-guide-list > div { grid-template-columns: 1fr; }
}
@media (max-width: 36rem) {
  [data-interactive="feeds-and-speeds"] { padding: 1rem; }
  .fs-sweep { padding: .5rem; }
  .fs-table { font-size: .84rem; table-layout: fixed; }
  .fs-table th, .fs-table td { padding: .4rem .3rem; overflow-wrap: anywhere; hyphens: auto; }
  .fs-table thead th { width: 25%; letter-spacing: .04em; }
  .fs-table :is(td:last-child, thead th) { overflow-wrap: normal; hyphens: manual; }
}

/* Paper: the static figure, in ink, every time. Whatever the calculator
   held when the print dialog opened is not a teaching choice anyone made. */
@media print {
  [data-interactive="feeds-and-speeds"] {
    break-inside: avoid;
    background: #FFF !important; border-color: #777 !important; color: #111 !important;
  }
  [data-interactive="feeds-and-speeds"].is-live .fs-static { display: flex; }
  [data-fs-live] { display: none !important; }
  .fs-static-fig, .fs-sweep { background: #FFF !important; border-color: #999 !important; break-inside: avoid; }
}