/**
 * The shared stylesheet of all pages. Colour world and metrics from
 * smarthome/design.md, dark version.
 *
 * ⚠️ This file is a departure from design.md ("one file, no build"), and a justified
 * one. While there was one page, everything sat inline in it — with three pages that
 * would be three copies of the palette, and design.md demands that a palette change
 * stays a one-liner. Three copies are the worse mistake than one additional file.
 *
 * The line runs along **purpose**: what every page has lives here — palette, header,
 * panel anatomy, fields, messages, status line. What only one page has stays inline
 * in it: the drawer's canvas, the landing page's card grid, the nesting tool's sheet
 * preview. That way a new page brings its rules along instead of depositing them here
 * where the others read them too.
 *
 * ⚠️ **One named exception from design.md, and only this one.** `index.html` sets
 * `--title: 24px` and is thereby the only page with a font size the system does not
 * have. Reason: it is the only publicly reachable one (schnittwerk.kleiner-als.de)
 * and receives people who do not know the program — for that it needs a headline; a
 * tool on screen does not.
 *
 * The same construction as the light version of the stock card and Rainer's larger
 * type: an exception with a reason, **not** a change to the system. The rules and
 * their full justification are inline in `index.html`; here it only says that they
 * exist, so that nobody takes the 24 px for a mistake or carries them into a tool
 * page. `smarthome/design.md` stays untouched.
 */

:root {
  --bg: #0f1419;
  --bg-elev: #161d26;
  --bg-row: #1c242f;
  --border: #33404f;
  --border-soft: #26303c;
  --text: #e3e9ef;
  --text-dim: #8996a4;
  --text-faint: #5f6b78;
  --ok: #4ec27f;
  --warn: #e0a82e;
  --error: #f0616d;
  --info: #5b9bf8;
  --accent: var(--info);
  --unknown: #445261;

  --radius: 8px;
  --max-w: 1600px;
  --gutter: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- Header
   The height follows from the title's line box (15 × 1.5 = 22.5 px). Buttons are
   therefore pinned, otherwise the header grows. */
header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 11px;
  padding-inline: var(--gutter);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-soft);
}

.brand {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  padding: 4px;
  border-radius: 6px;
  background: var(--bg-row);
  border: 1px solid var(--border);
  color: var(--text-dim);
  flex: none;
}

/* The brand leads back to the dashboard as soon as it is a link — on the dashboard
   itself it stays a `span` and therefore mute. A link pointing at the page you are
   standing on is an invitation into the void. */
a.brand:hover, a.brand:focus-visible { border-color: var(--accent); color: var(--text); }

h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
}

/* The tool name beside the brand: the same rank as a panel label, not as the product
   name. */
.generator {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-faint);
  padding-left: 10px;
  border-left: 1px solid var(--border-soft);
}

.tools { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.button {
  height: 22px;
  padding: 0 10px;
  line-height: 1;
  font-size: 12px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  background: var(--bg-row);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.button:hover, .button:focus-visible { border-color: var(--accent); color: var(--text); }

/* The primary action on the accent surface — the same pattern as "chip active" in
   design.md: surface --accent, type --bg. Of six buttons in the header exactly one is
   the target, and that one may look like it. */
.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 500;
}
.button--primary:hover, .button--primary:focus-visible {
  background: color-mix(in srgb, #ffffff 14%, var(--accent));
  color: var(--bg);
}

/* Language picker. A `select` instead of chips, because there is no room for two
   chips in the header and the list can grow later. */
.button--select { padding-inline: 6px; font-family: inherit; }

/* Icon-only button. The title carries the meaning, hence no text — there is no room
   for two more words in the header. */
.button--round { padding-inline: 7px; }
.button:disabled {
  opacity: .4;
  cursor: default;
  border-color: var(--border-soft);
}
.button:disabled:hover { border-color: var(--border-soft); color: var(--text-dim); }
.button .stroke { width: 12px; height: 12px; }

/* One rule for all line icons. As a list of wrapper selectors, every new location
   would have to be added — and whoever forgets gets a black area, because otherwise
   fill sits at its default. */
.stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------- Layout
   The column grid is **not** here: the dashboard needs four columns
   (design.md:248), the drawer two. Every page sets its own
   `grid-template-columns`, everything else is shared.

   ⚠️ The page sets it inside a `@media (min-width: 901px)`, not unconditionally.
   Reason: the page's inline `<style>` comes **after** this file, so at equal
   specificity it would have the last word — a mobile switch from here would have had
   no effect, and nobody would have seen why. This way there is no column rule at all
   below 901 px, and a grid without a template is single-column. That is not an
   agreement between two files but the absence of one. */
main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gutter);
  display: grid;
  gap: 12px;
  align-items: start;
}

.column { display: grid; gap: 12px; align-items: start; }

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel__head {
  background: var(--bg-row);
  padding: 7px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel__title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-dim);
}

.panel__hint { font-size: 10px; color: var(--text-faint); margin-left: auto; }
.panel__body { padding: 10px 11px; }

/* ---------------------------------------------------------- Fields */
.field {
  display: grid;
  grid-template-columns: 1fr 84px 34px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-soft);
}
.field:last-child { border-bottom: 0; }

.field__name { font-size: 12px; color: var(--text-dim); }

.field__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-row);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  width: 100%;
}
.field__value:hover, .field__value:focus-visible { border-color: var(--accent); outline: none; }

select.field__value { font-family: var(--font); }
.field__switch { justify-self: start; accent-color: var(--accent); }
.field__unit { font-size: 10px; color: var(--text-faint); font-family: var(--mono); }

.field__hint {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--text-faint);
}

/* A deviation from the default carries a text, not only a colour: the reason is in
   the title, the short mark beside it. */
.field.is-changed .field__name { color: var(--text); }
/* The text comes from `data-changed`, not as `content: " changed"`. Fixed in the CSS
   it stayed German in the English version too. */
.field__name[data-changed]::after {
  content: " " attr(data-changed);
  font-size: 10px;
  color: var(--warn);
  font-family: var(--mono);
}

/* ---------------------------------------------------------- Value lists
   Name left, numbers right. Used by the drawer's parts list and the nesting tool's —
   hence here and not in either of the two pages. */
.parts__head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.parts__list { list-style: none; margin: 6px 0 0; padding: 0; }
.parts__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}
.parts__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parts__slots { color: var(--text-faint); font-size: 11px; }
.parts__foot { margin: 8px 0 0; font-size: 11px; color: var(--text-faint); }

/* ---------------------------------------------------------- Messages */
.message {
  margin: 6px 0 0;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  gap: 8px;
}
.message__kind { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; flex: none; }
.message--error { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }
.message--warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.message--ok  { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }

/* ---------------------------------------------------------- Status line */
#status {
  padding: 7px var(--gutter);
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-elev);
}
#status[data-kind="error"] { color: var(--error); }
#status[data-kind="warn"] { color: var(--warn); }
#status[data-kind="ok"]  { color: var(--ok); }

.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 900px) {
  .field__value { font-size: 16px; } /* otherwise iOS zooms in on focus */
}

/* ---------------------------------------------------------- Page foot
   On **every** page, including the tool pages. Imprint and privacy policy are
   legally required and must not depend on which subpage somebody lands on.

   Sits below the status line and outside `<main>`, so that the same rule works
   for the landing page and the tool pages: those two have different content
   widths, and a foot inside `<main>` would inherit that page's padding twice.

   ⚠️ `1fr auto 1fr` and not `space-between` in a flex container. With
   `space-between` the free space is distributed *between* the three groups — the
   middle one then sits in the middle of the remaining space, not in the middle of
   the foot, and wanders with every change of text length. With two equal `1fr`
   columns the signature stands centred no matter how long its neighbours are. */
.foot {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 14px var(--gutter);
  box-sizing: border-box;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--text-faint);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 18px;
}
.foot a { color: var(--text-faint); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--accent); }

.foot__left { justify-self: start; }
.foot__legal { justify-self: end; display: flex; gap: 18px; }

/* Centred via `justify-self`, not `text-align`: the signature is a grid child, and
   `justify-self` moves the **element** into the middle instead of aligning its text
   inside a box stretched across the full width. The difference is the hit area of
   the link inside it — with `text-align` the box would stay as wide as the foot.

   ⚠️ The heart stays `currentColor` and gets **no** red. The status colours are
   reserved — `--error` means "broken / vulnerable", and using the same colour for
   affection dilutes exactly the meaning an error message relies on. For the same
   reason the brand in the header is neutral and not green. */
.foot__maker { justify-self: center; }

@media (max-width: 700px) {
  /* Side by side the three groups need about 530 px. Below that they stack, and
     **all of them left-aligned**: a centred signature above two left-aligned lines
     looks like an oversight, not like an intention. `1fr` instead of `1fr auto 1fr`
     — the children reset the alignment, otherwise `justify-self: end` would stay
     stuck on the legal links. */
  .foot { grid-template-columns: 1fr; gap: 6px; }
  .foot__maker, .foot__legal { justify-self: start; }
}