/* /betrieb - plain, readable, no scripts. */
:root { --bg: #f7f7f9; --fg: #1d1d27; --muted: #666a7a; --line: #dcdce4; --accent: #5b3fd1; --bad: #b3261e; --ok: #1b7f4b; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--fg); }
header { background: #1d1d27; color: #fff; padding: 10px 20px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
header a { color: #fff; text-decoration: none; opacity: .85; }
header a.active, header a:hover { opacity: 1; text-decoration: underline; }
header .brand { font-weight: 700; opacity: 1; margin-right: 12px; }
header nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; flex: 1; }
header form { margin-left: auto; }
main { max-width: 1100px; margin: 0 auto; padding: 20px; }
h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 16px; margin: 0 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }    /* min(): a card never gets wider than a narrow screen */
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.tiles { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; min-width: 150px; }
.tile .n { font-size: 24px; font-weight: 700; }
.tile .l, .muted { color: var(--muted); font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.barcell { width: 40%; }
.card.wide { grid-column: 1 / -1; overflow-x: auto; }       /* the token figures (feature 043) have eight columns */
#token-figures .barcell { width: 22%; }
#push-figures th { text-align: left; font-weight: 600; font-size: 12px; }
#push-figures th.num { text-align: right; }
p.warn { color: #8a1c1c; background: #fdecea; border: 1px solid #f3b8b3; border-radius: 6px; padding: 8px 10px; }
#token-figures th { text-align: left; font-weight: 600; }
#token-figures th.num { text-align: right; }
meter { width: 100%; height: 10px; }
.spaced { margin-top: 14px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #ecebf5; }
.badge.new { background: #fde3e1; color: var(--bad); }
.badge.fixed { background: #dff3e7; color: var(--ok); }
.flash { padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; background: #ecebf5; }
.flash.error { background: #fde3e1; color: var(--bad); }
.flash.ok { background: #dff3e7; color: var(--ok); }
input, select, button, textarea { font: inherit; }
input[type=text], input[type=password], select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
button { padding: 6px 14px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
button.secondary { background: #ecebf5; color: var(--fg); }
button.danger { background: var(--bad); }
textarea { width: 100%; min-height: 180px; font-family: ui-monospace, monospace; font-size: 13px; }
pre { background: #f0f0f4; padding: 8px; border-radius: 6px; overflow-x: auto; font-size: 13px; }
.filters a { margin-right: 10px; }
.login { max-width: 360px; margin: 60px auto; }
.login label { display: block; margin: 10px 0 4px; }
.login input { width: 100%; }
@media (max-width: 600px) { main { padding: 12px; } header { padding: 10px 12px; } }

/* feedback (feature 088): what a family wrote keeps its line breaks; the reply box fills the card (no inline styles under the CSP) */
.pre { white-space: pre-wrap; }
textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }

/* feature 089: the invitation form and the table's small forms (no inline styles: the CSP forbids them) */
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.form-row label { font-size: 13px; color: var(--muted); }
input[type=email] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
td form { display: inline; margin: 0 4px 4px 0; }
td button { margin: 0 4px 4px 0; font-size: 13px; padding: 4px 10px; }

/* Feature 090: the console on a phone, designed from the phone: little to scroll, one thumb. Below 700 px (and on touch screens for the sizes of
   things) the same pages and texts look like this: a slim bar on top that stays (the menu opens from it, pure CSS, no script); lists are two or
   three lines per entry and the whole entry is what you tap; what is secondary (codes, a device, a 14-day table, the text for an issue) is folded
   until asked for; the overview puts every section without data on one line. Fields and buttons are at least 44 px and 16 px text (iOS Safari zooms
   into anything smaller). Measured on the rendered pages: tests/web/betrieb-mobile.spec.js. No script, no inline style (CSP). */
html { -webkit-text-size-adjust: 100%; }
a, button, summary, label { touch-action: manipulation; }
.who { white-space: nowrap; }
a.action { display: inline-block; }
.code { font-size: 15px; }
.btns { display: block; }
.menu-toggle, .menu-button, .narrow-only { display: none; }

/* folds: a summary looks like a heading with a small arrow (a <details> works without script) */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "\25B8"; display: inline-block; width: 1.2em; color: var(--muted); }
details[open] > summary::before { content: "\25BE"; }
details.fold > summary { font-weight: 600; padding: 4px 0; }
details.fold[open] > summary { margin-bottom: 8px; }
.back { margin: 0 0 6px; }

@media (max-width: 700px), (pointer: coarse) {
  button, input[type=text], input[type=password], input[type=email], select, textarea { min-height: 44px; font-size: 16px; }
  textarea { min-height: 120px; }
  button { padding: 8px 16px; }
  main form button[type=submit] { width: 100%; }
  a.action, .back a { display: inline-flex; align-items: center; min-height: 44px; }
  summary { min-height: 44px; display: flex; align-items: center; }
  .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin: 0; border: 1px solid var(--line); border-radius: 22px; background: #fff; text-decoration: none; }
  .filters a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .tile .n a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}

@media (max-width: 700px) {
  main { padding: 10px 12px 24px; overflow-wrap: anywhere; }
  h1 { font-size: 19px; margin: 2px 0 10px; }
  h2 { margin-bottom: 4px; }
  .card { padding: 10px 12px; }
  .grid { gap: 10px; }
  .spaced { margin-top: 10px; }
  .wide-only { display: none; }
  .card.alerts { order: -1; }                       /* the alerts first: it is what one opens the console on a phone for */
  .clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px; }
  .narrow-only { display: block; }

  /* the bar: stays on top while the page scrolls; the menu opens below it */
  header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 12px; min-height: 52px; }
  header .brand { margin: 0; }
  .menu-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }      /* a checkbox the label toggles; still reachable by keyboard */
  .menu-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; background: #2b2b3a; color: #fff; cursor: pointer; }
  .menu-toggle:focus-visible + .menu-button { outline: 2px solid #fff; }
  .menu-toggle:checked + .menu-button { background: var(--accent); }
  header nav { display: none; }
  .menu-toggle:checked ~ nav { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: 0 12px 12px; background: #1d1d27; box-shadow: 0 10px 18px rgba(0, 0, 0, .35); }
  header nav a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; border-top: 1px solid #33333f; opacity: 1; font-size: 16px; text-decoration: none; }
  header nav a.active { color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
  header nav form { margin: 8px 0 0; }
  header nav form button { width: 100%; }

  /* the numbers: small chips, wrapping, not a wall of boxes */
  .tiles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .tile { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; padding: 5px 12px; border-radius: 16px; }
  .tile .n { font-size: 17px; }
  .tile .l { font-size: 12px; }

  /* forms: one field per line, two short ones side by side */
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-row label { display: block; margin: 0; min-width: 0; }
  .form-row label.full, .form-row button { grid-column: 1 / -1; }
  .form-row input, .form-row select { width: 100%; }
  .stackform select, .stackform input, .stackform button { display: block; width: 100%; margin-bottom: 8px; }
  .login { margin: 24px auto; }
  input[type=text], input[type=password], input[type=email], select, textarea { max-width: 100%; }
  #delete-form input[type=text] { width: 100%; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* a list: one entry = two or three lines, the whole entry is the tap target (the stretched link) */
  .card.cards { background: none; border: 0; padding: 0; }
  table.stack, table.stack tbody { display: block; }
  table.stack tr.head, table.stack td.skip { display: none; }
  table.stack tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
  table.stack td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
  table.stack td.lead { grid-row: 1; grid-column: 1; font-weight: 600; }
  table.stack td.side { grid-row: 1; }
  table.stack td.meta { grid-row: 2; font-size: 13px; color: var(--muted); }
  table.stack td.line { grid-row: 3; grid-column: 1 / -1; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.stack td.text { grid-row: 4; grid-column: 1 / -1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  table.stack td[colspan] { grid-column: 1 / -1; }
  table.stack td.count::after { content: "\00D7"; }
  table.stack td.lead .muted { font-weight: 400; font-size: 13px; }
  table.stack td.lead a.stretch::after { content: ""; position: absolute; inset: 0; }

  /* invitations: one line each; tap it for the code, the copy buttons and the actions */
  #invitation-cards { list-style: none; margin: 10px 0 0; padding: 0; }
  #invitation-cards > li { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; padding: 0 12px; }
  details.inv > summary { display: block; padding: 8px 0 8px 1.2em; position: relative; min-height: 44px; }
  details.inv > summary::before { position: absolute; left: 0; top: 8px; }
  details.inv .addr { display: block; font-weight: 600; }
  details.inv .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
  details.inv .body { padding: 4px 0 12px; }
  details.inv .body p { margin: 0 0 8px; }
  details.inv .code { display: block; font-size: 22px; letter-spacing: 1px; margin: 4px 0 10px; }
  .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .btns button, .btns form { flex: 1 1 130px; margin: 0; }
  .btns form button { width: 100%; margin: 0; }
}

@media (max-width: 339px) {
  header .who { display: none; }
}