/* Nunito (SIL OFL, fonts/OFL.txt), served by the shadow itself: the plant network may have no internet, and Windows
   PCs and Android tablets have no rounded system face. */
@font-face {
  font-family: "Nunito";
  src: url("/leitstand/fonts/Nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

/* Colours sampled from the approved comp (.impeccable/mocks/comp/detail-sheet.webp); text colours darkened where the
   sampled value missed WCAG AA on white. */
:root {
  --ground: #f6f4ee;
  --card: #fefefc;
  --ink: #0d1117;
  --body: #2a394c;
  --muted: #5d6b80;
  --info: #455f82;
  --line: #dbdee2;
  --control: #eeeff1;
  --action: #f15b0e;        /* fills with white bold text (large text, 3:1) */
  --action-ink: #c2410c;    /* orange text and outlines on white, 5.2:1 */
  --action-tint: #fef2ea;
  --fault: #c4141a;
  --fault-row: #eff0f2;
  --shadow: 0 1px 2px rgb(42 57 76 / 0.06), 0 6px 20px rgb(42 57 76 / 0.05);
  --radius-card: 18px;
  --radius-field: 12px;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --gap: clamp(12px, 1.6vw, 22px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  caret-color: var(--action);
}

::selection { background: var(--action-tint); color: var(--ink); }

svg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--action-ink);
  outline-offset: 3px;
}

/* --- header ------------------------------------------------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* with the admin's links the header can outgrow one line: the readings move down whole */
  gap: 8px 16px;
  padding: clamp(16px, 2.4vw, 32px) clamp(16px, 2.6vw, 36px) 8px;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.top-meta {
  display: flex;
  align-items: center;
  color: var(--ink);
  font-size: clamp(17px, 1.6vw, 22px);
  white-space: nowrap;
}

/* "4 laufen · 2 aus · 1 Störung": the board's state in one line, left of the clock. */
.tally { padding-right: clamp(12px, 1.6vw, 24px); color: var(--body); }
.tally b { color: var(--fault); font-weight: 700; }
.tally.is-stale, .tally.is-stale b { color: var(--muted); }

.clock {
  font-size: 1.35em;
  font-weight: 700;
  padding: 0 clamp(12px, 1.6vw, 24px);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.outside {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: clamp(12px, 1.6vw, 24px);
}
.outside b { font-weight: 500; }
.outside svg { order: 2; width: 1.6em; height: 1.6em; stroke-width: 1.6; }

/* Signed in through wk_web (TUC-1857); hidden when the shadow serves the board. */
.who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: clamp(12px, 1.6vw, 24px);
  padding-left: clamp(12px, 1.6vw, 24px);
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}
.who[hidden], .who [hidden] { display: none; }
.who form { margin: 0; }

/* Header navigation to the history pages (TUC-1868), at the weight of the signed-in block: a hairline separates it
   from the reading beside it, exactly like the clock's dividers. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  margin-left: clamp(12px, 1.6vw, 24px);
  padding-left: clamp(12px, 1.6vw, 24px);
  border-left: 1px solid var(--line);
  font-size: 15px;
}
@media (max-width: 600px) {
  .nav { margin-left: 0; padding-left: 0; border-left: 0; }
}

.proto-note {
  margin: 0 clamp(16px, 2.6vw, 36px) 12px;
  color: var(--muted);
  font-size: 15px;
  max-width: 62ch; /* about 75 characters of Nunito */
}
.proto-note strong { color: var(--body); }

.text-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--action-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.stale {
  margin: 0 clamp(16px, 2.6vw, 36px) 12px;
  padding: 12px 16px;
  border-radius: var(--radius-field);
  background: var(--fault-row);
  color: var(--fault);
  font-weight: 600;
}

/* --- layout ------------------------------------------------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding: 0 clamp(16px, 2.6vw, 36px) clamp(16px, 2.6vw, 36px);
  align-items: start;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: var(--gap);
}

@media (min-width: 1100px) {
  .layout { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .layout.editing .grid { grid-column: 1 / 3; grid-template-columns: repeat(2, 1fr); }
  .layout.editing .sheet { grid-column: 3; position: sticky; top: 16px; }

  /* Overview: the six cards share the window's height. The figure takes the free height: the .temp row is a size
     container that gets what the other lines leave, and the figure grows to fill it (TUC-1976), up to 132 px. */
  body { display: flex; flex-direction: column; min-height: 100dvh; }
  .layout { flex: 1; grid-template-rows: 1fr; }
  .layout:not(.editing) .grid { align-self: stretch; grid-auto-rows: 1fr; }
  .layout:not(.editing) .temp { flex: 1 1 0; min-height: 0; container-type: size; }
  .layout:not(.editing) .temp-value,
  .layout:not(.editing) .trend { font-size: clamp(44px, min(84cqh, calc((100cqw - 130px) / 4.3)), 132px); }
}

/* A short wide screen: a tighter header. */
@media (min-width: 1100px) and (max-height: 960px) {
  .top { padding-top: 16px; }
  .proto-note { margin-bottom: 8px; }
}

/* Editing on a wide screen up to the wall's 1080 px: three rows of cards, a fault row included, stay above the fold. */
@media (min-width: 1100px) and (max-height: 1199px) {
  .layout.editing .card { min-height: 0; padding: 10px 18px; gap: 2px; }
  .layout.editing .name { font-size: 24px; }
  .layout.editing .temp { font-size: clamp(36px, min(3.2vw, 5vh), 52px); }
  .layout.editing .mode { font-size: 16px; padding-block: 2px; }
  .layout.editing .plan, .layout.editing .io, .layout.editing .run { font-size: 17px; }
  .layout.editing .proto-tag { padding: 1px 8px; font-size: 14px; }
  .layout.editing .proto-long { display: none; } /* "geändert": the header note and the sheet already say Prototyp */
}

/* --- card --------------------------------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 210px;
  padding: clamp(18px, 1.8vw, 26px);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.card:hover { box-shadow: 0 1px 2px rgb(42 57 76 / 0.08), 0 10px 28px rgb(42 57 76 / 0.09); }
.card[aria-expanded="true"] { border-color: var(--action); }
.card.is-fault { border-color: var(--fault); }
.card.is-fault[aria-expanded="true"] { border-color: var(--action); outline: 2px solid var(--fault); outline-offset: 2px; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.name {
  color: var(--ink);
  font-size: clamp(26px, 2.3vw, 38px);
  font-weight: 800;
  line-height: 1.1;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--body);
  font-size: clamp(17px, 1.3vw, 21px);
}
.chip svg { width: 1.45em; height: 1.45em; }
.chip.fault { color: var(--fault); font-weight: 700; }
.chip.stop { color: var(--muted); }
/* A running chamber is lit: a filled Ember pill, readable across the room. 19px/800 white is large text (3.4:1). */
.chip.heat {
  padding: 4px 14px 4px 10px;
  border-radius: 999px;
  background: var(--action);
  color: #fff;
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 800;
}
.card.is-stale .chip.heat { background: var(--muted); }

/* The mode line: the badge, and on the right the prototype tag when this browser changed the chamber. */
.mode-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* The mode under the name, at title strength: the exceptions look it (TUC-1976). Intensiv is the one dark pill on the
   board, Schonend an ink outline, Standard a quiet grey pill; a chamber without a mode just says "Ignition". The
   setpoint the mode runs at sits inside, because the mode sets it. */
.mode {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.24em 0.85em 0.24em 0.6em;
  border: 2px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  font-size: clamp(19px, 1.65vw, 27px);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.mode svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode svg[hidden] { display: none; }
.mode-soll { font-weight: 600; }
.mode-soll:not(:empty)::before { content: "·"; margin-right: 0.4em; }
.mode.is-intensiv { background: var(--ink); color: #fff; }
.mode.is-schonend { border-color: var(--ink); background: var(--card); }
.mode.is-standard { background: var(--control); }
.mode.is-ignition { padding-left: 0; color: var(--body); font-weight: 700; }
.card.is-stale .mode { color: var(--muted); }
.card.is-stale .mode.is-intensiv { background: var(--muted); color: #fff; }
.card.is-stale .mode.is-schonend { border-color: var(--muted); }

.temp {
  color: var(--ink);
  font-size: clamp(56px, 13vw, 84px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: flex;
  align-items: center;
  gap: 0.12em;
}
/* Rising or falling faster than 0.5 K/h: a drawn arrow beside the figure and the rate after it, in body ink (a
   reading, not a signal). */
.trend { width: 0.6em; height: 0.6em; flex: none; color: var(--body); stroke-width: 2.6; }
.trend[hidden] { display: none; }
.trend.is-down { transform: rotate(180deg); }
.trend-text {
  margin-left: 0.2em;
  color: var(--body);
  font-size: clamp(17px, 1.45vw, 24px);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.trend-text[hidden] { display: none; }

.line { display: flex; align-items: center; gap: 8px; }
.plan { color: var(--body); font-size: clamp(19px, 1.65vw, 26px); font-weight: 600; }
.io { flex-wrap: wrap; gap: 6px; color: var(--info); font-size: clamp(17px, 1.4vw, 22px); }
.io .fan { width: 1.45em; height: 1.45em; margin-left: 2px; fill: var(--info); stroke: var(--info); stroke-width: 0.6; }

/* Run time against the mode's heating time, only on a running card: a full-width bar, the time after it. */
.run {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--body);
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 600;
}
.run[hidden], .run-bar[hidden] { display: none; }
.run-bar {
  flex: 1 1 auto;
  min-width: 72px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.run-text { white-space: nowrap; }
.run-fill { display: block; height: 100%; border-radius: inherit; background: var(--action); }
.run.is-over .run-fill { background: var(--fault); }
.run.is-over .run-text { color: var(--fault); }
.card.is-stale .run, .card.is-stale .run-text { color: var(--muted); }
.card.is-stale .run-fill { background: var(--muted); }

/* Live motion, only while the data is live: the fan turns while it is on, the heat waves of "Läuft" rise. */
.card:not(.is-stale) .fan.is-on { animation: fan-turn 1.6s linear infinite; }
.card:not(.is-stale) .chip.heat path { stroke-dasharray: 4 2; animation: heat-rise 0.9s linear infinite; }
@keyframes fan-turn { to { transform: rotate(1turn); } }
@keyframes heat-rise { to { stroke-dashoffset: -6; } }

.fault-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-field);
  background: var(--fault-row);
  color: var(--fault);
  font-weight: 700;
}
.fault-row svg { width: 1.5em; height: 1.5em; color: var(--ink); fill: var(--ink); stroke: var(--ink); }
.fault-row svg path:last-child { stroke: var(--card); }
.fault-row[hidden], .proto-tag[hidden] { display: none; }

.proto-tag {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--action-tint);
  color: var(--action-ink);
  font-size: 15px;
  font-weight: 600;
}

.card.is-stale .temp, .card.is-stale .plan, .card.is-stale .io { color: var(--muted); }

/* --- sheet -------------------------------------------------------------------------------------------------- */

.sheet {
  padding: clamp(20px, 2vw, 30px);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow);
}
.sheet[hidden] { display: none; }
.sheet:not([hidden]) { animation: sheet-rise 200ms var(--ease); }
@keyframes sheet-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sheet-slide { from { opacity: 0; transform: translateX(24px); } }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sheet h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 800;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-right: -10px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.icon-button svg { width: 30px; height: 30px; }
.icon-button:hover { background: var(--control); }

.field { margin-bottom: 22px; }
.field-label { display: block; margin-bottom: 8px; color: var(--ink); font-weight: 700; }
.help { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

/* Betriebsart: three equal pill keys in one row, the chosen one outlined in Ember Ink (TUC-1974). */
.mode-field { min-width: 0; margin: 18px 0 22px; padding: 0; border: 0; }
.mode-field legend { padding: 0; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.modes label { position: relative; }
.modes input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.modes span {
  display: grid;
  place-items: center;
  min-height: 60px;
  padding: 0 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--body);
  font-weight: 700;
}
.modes label:hover span { background: var(--control); }
.modes input:checked + span { border-color: var(--action-ink); background: var(--control); color: var(--action-ink); }
.modes input:focus-visible + span { outline: 3px solid var(--action-ink); outline-offset: 3px; }
.mode-help { color: var(--body); }
#datum-field.is-muted .date input { color: var(--muted); }

.date {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  color: var(--ink);
}
.date input {
  flex: 1;
  min-height: 60px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 21px;
}
/* The browser's picker glyph, toned down to the weight of the drawn 2 px icons. */
.date input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }

.switch-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 4px;
}
.switch-field .field-label { margin: 0; }
.switch {
  position: relative;
  width: 76px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #c9ced6;
  cursor: pointer;
}
.switch .knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  transition: transform 140ms var(--ease);
}
.switch[aria-checked="true"] { background: var(--action); }
.switch[aria-checked="true"] .knob { transform: translateX(32px); }
.switch-help { grid-column: 1 / -1; text-align: right; color: var(--action-ink); font-weight: 600; }

.summary {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-field);
  background: var(--action-tint);
  color: var(--action-ink);
  font-weight: 700;
}
.summary svg { width: 28px; height: 28px; stroke-width: 1.7; }
.summary ul { margin: 2px 0 0; padding: 0; list-style: none; }
.summary li + li { margin-top: 4px; }
.summary.is-empty { background: var(--control); color: var(--muted); font-weight: 500; }

.error { margin: -6px 0 14px; color: var(--fault); font-weight: 600; }

.primary {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: 999px;
  background: var(--action);
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
}
.primary:hover { background: #dc4f08; }
.primary:disabled { background: var(--control); color: var(--muted); cursor: default; }

.last-change {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}

/* --- toast -------------------------------------------------------------------------------------------------- */

/* Bottom-left under the overview: on the wide layout it never covers the open sheet; on narrow ones it sits above it. */
.toast {
  position: fixed;
  left: clamp(16px, 2.6vw, 36px);
  bottom: 24px;
  z-index: 20;
  max-width: min(calc(100vw - 32px), 640px);
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.toast.is-shown { opacity: 1; transform: translateY(0); }

/* --- tablet and phone: the sheet covers the overview -------------------------------------------------------- */

@media (max-width: 1099px) {
  .sheet {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 10;
    width: min(100%, 460px);
    overflow-y: auto;
    border-radius: 0;
    box-shadow: -12px 0 40px rgb(42 57 76 / 0.18);
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .sheet:not([hidden]) { animation-name: sheet-slide; }
  body.sheet-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9;
    background: rgb(13 17 23 / 0.28);
  }
  body.sheet-open { overflow: hidden; }
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  .top { flex-wrap: wrap; row-gap: 8px; }
  .clock { padding-left: 0; border-left: 0; }
  .top-meta { flex-wrap: wrap; row-gap: 8px; column-gap: 16px; }
  .who { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
  .tally { flex-basis: 100%; padding-right: 0; }
  .card { min-height: 0; }
  .sheet { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}