/* Leitstelle München — the look of the desk: a Windows dialog from the era
   the Leitstellensystem was drawn in, and every box on one dense sheet.

   One top-level block, scoped to this mask's own root: inline in the
   Disponent panel that is the record, in a detached console window it is the
   whole page. Nothing here may reach outside it, or two customers on one
   build would fight over the same class names (MASKS-DESIGN §5).

   The colours are not written here but in `tokens:` in mask.yaml, set on the
   root element as CSS variables — so the palette of a customer can be changed
   without touching a rule, and a second control room on the same layout is a
   manifest rather than a fork.

   The two borders everything is drawn with are the whole idiom of that system
   and are worth naming once: a *raised* edge is light on the top left and
   dark on the bottom right (a key you press), a *sunken* one is the other way
   round (a box you type in). Nothing here has a radius, a shadow or a
   transition — that screen has none, and a console that eases into focus is a
   console that looks like a web page. */
[data-mask="munich"] {
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink);
  background: var(--sheet);

  /* ---- the console window ------------------------------------------------- */
  .eld-app {
    height: 100%; display: flex; flex-direction: column; min-height: 0;
    background: var(--face);
  }
  /* The title line: nearly white, and the only place in this window with
     anything in it that is not the record — the call and the way to
     fullscreen. */
  .eld-title {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 2px 6px; font-size: 12px;
    color: var(--title-ink); background: var(--title);
    border-bottom: 1px solid var(--line);
    white-space: nowrap; overflow: hidden;
  }
  .eld-title-gap { flex: 1; }
  /* The system line, in the monospace that window sets its identifiers in. */
  .eld-title-system {
    font-family: var(--mono); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* The green band, and it is the menu row that carries it: a rule across the
     whole screen rather than a headline over part of it. */
  .eld-menu {
    flex: none; display: flex; gap: 14px; padding: 2px 8px;
    color: var(--menu-ink); background: var(--menu);
    border-bottom: 1px solid var(--edge-lo);
  }
  /* Dead on purpose (see mask.jsx): no pointer, no hover, nothing that
     suggests it opens. */
  .eld-menu-item { color: var(--menu-ink); user-select: none; }
  .eld-menu-item::after { content: " ▾"; opacity: .55; }

  /* The case line: which incident is open and how it stands. It sits on the
     sheet, above the first card, not on the grey chrome — it is the header of
     the record rather than of the window. */
  .eld-case {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: 4px 6px 1px; background: var(--sheet);
    white-space: nowrap; overflow: hidden;
  }
  .eld-case-label { font-weight: 700; color: var(--ink); }
  /* The Sicht: the largest thing on the line, and the first one read. */
  /* Italic, the way that system sets the Sicht — the one slanted word on the
     screen, and the reason it is read as a heading and not as a value. */
  .eld-case-scheme {
    font-weight: 700; font-style: italic; font-size: 14px; color: var(--head);
  }
  /* The boxes of the case line: white and sunken, unlike the yellow ones of
     the sheet — they are what the system says, not what the call-taker types. */
  .eld-case-box {
    /* Exactly as high as a box of the sheet below: the case line is the first
       row of the record, not a strip of its own. */
    padding: 0 8px; height: 21px; background: var(--field-plain);
    display: inline-flex; align-items: center;
    border: 1px solid var(--line);
  }
  /* NEU / LAUFEND: grey rather than white — that system says what it decided
     itself in the colour of the chrome, and still in a box. */
  .eld-case-box.state {
    font-weight: 700; background: var(--box-grey); min-width: 118px;
  }
  /* The calendar at the right edge of a date box — the browser's own glyph on
     the Termin's boxes, drawn here so the two read as the same control. */
  .eld-pick { margin-left: auto; flex: none; color: var(--ink-dim); }
  /* The Einsatzart box: empty, and drawn with the marker of the dropdown it
     is in the real system, so the line keeps its shape. */
  .eld-case-box.type { min-width: 150px; }
  .eld-case-box.type::after { content: "▾"; margin-left: auto; color: var(--ink-dim); }
  /* The date box takes what is left of the line; the case number is as long
     as a case number, and the two together close the line against the right
     edge of the sheet. */
  .eld-case-box.date { flex: 1; min-width: 160px; gap: 8px; }
  /* The case number, red and in the monospace of the printed header. */
  .eld-case-box.no { flex: none; min-width: 112px; font-weight: 700; color: var(--req); }
  .eld-case-box.date, .eld-case-box.no { font-family: var(--mono); font-size: 11px; }

  /* ---- the call strip ----------------------------------------------------- */
  /* A lamp that is dark until a call is up: on a console the state of the line
     is read in passing, never looked up. */
  .eld-call {
    display: inline-flex; align-items: center; gap: 7px; min-width: 0;
    font-size: 11px; color: var(--ink-dim);
  }
  .eld-lamp {
    width: 9px; height: 9px; flex: none; background: var(--line);
    border: 1px solid var(--line);
  }
  .eld-call.live { color: var(--ink); }
  .eld-call.live .eld-lamp { background: var(--live); border-color: var(--edge-lo); }
  .eld-call-clock { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .eld-call-warn { color: var(--req); }

  /* ---- the screen, split in two ------------------------------------------- */
  /* Left the record, right the lists — the proportion of the real screen, and
     the reason a call-taker finds the Einsatzort without reading a caption. */
  .eld-desk {
    flex: 1; min-height: 0; display: grid; gap: 2px; padding: 2px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .eld-sheet {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--sheet);
    border: 1px solid var(--line);
  }
  /* Scrolls down when the sheet is longer than the window, never sideways:
     a box that has slid off to the right is a box nobody fills. */
  .eld-sheet-body {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 2px 6px 6px; display: flex; flex-direction: column;
  }
  .eld-side { display: grid; gap: 2px; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  /* One screen is what this console is. Below the width the two halves need,
     the lists go under the sheet rather than squeezing it. */
  @media (max-width: 1250px) {
    .eld-desk { grid-template-columns: minmax(0, 1fr); }
    .eld-side { grid-template-rows: repeat(3, 180px); }
  }

  /* ---- the sheet ---------------------------------------------------------- */
  .eld-grid {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: repeat(12, 1fr); align-content: stretch;
  }
  .eld-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .eld-cardrow { display: flex; gap: 10px; min-width: 0; }
  .eld-card { min-width: 0; }
  /* The row that takes what is left of the sheet, and the card, the block of
     fields and the box inside it that stretch with it — the Hinweise reach
     the key block whatever the window is doing. */
  .eld-cardrow.fill { flex: 1; min-height: 0; }
  .eld-cardrow.fill .eld-card,
  .eld-cardrow.fill .eld-sec,
  .eld-cardrow.fill .eld-fields { display: flex; flex-direction: column; min-height: 0; }
  /* Each of them passes the height on to the one inside it, or the box at the
     bottom of the chain has nothing to stretch into. */
  .eld-cardrow.fill .eld-sec,
  .eld-cardrow.fill .eld-fields { flex: 1; }
  .eld-cardrow.fill .eld-fields > .eld-row:last-child { flex: 1; min-height: 0; }
  .eld-cardrow.fill .eld-row:last-child > .eld-f.tall { align-items: stretch; height: 100%; }
  .eld-cardrow.fill textarea.eld-in { height: 100%; resize: none; }
  .eld-sec { padding: 1px 0 3px; min-width: 0; }
  /* The blue caption with its rule running to the right edge — the heading
     that system prints over a block of boxes. */
  .eld-sec-h {
    display: flex; align-items: center; gap: 6px;
    margin: 3px 0 2px; font-size: 12px; font-weight: 700; color: var(--head);
  }
  /* The rule beside the caption is the caption's own colour, not a grey
     hairline: on that screen a section is one blue stroke from its name to
     the right edge, which is what makes the blocks findable at a glance. */
  .eld-sec-h::after {
    content: ""; flex: 1; height: 1px; background: var(--head);
  }
  /* The card is a stack of rows, and a row is what the boxes divide between
     them — no gap between them either: on that screen the boxes of a row
     stand against each other, and what separates two of them is a caption,
     not space. */
  .eld-fields { display: flex; flex-direction: column; gap: 2px; }
  /* Two pixels between the boxes of a row, and not one more: where two boxes
     follow each other with no caption between them — the house number and
     what belongs to it, the Plz and the Ortsteil it is captioned with — they
     have to keep reading as two boxes. Flush would make them one box with a
     line in it, and a call-taker would tab into the middle of it. */
  .eld-row { display: flex; align-items: center; gap: 2px; min-width: 0; }

  /* A card with columns beside its rows (`layout.asides` — the Ereignis's
     Module grid and its Prio): the rows take what the columns leave, and each
     column stands behind a rule of its own that runs the height of the card,
     the way that system divides the block. */
  .eld-sec-body { display: flex; align-items: stretch; min-width: 0; }
  .eld-sec-body > .eld-fields { flex: 1 1 0; min-width: 0; }
  /* Lines as high as the rows beside them and the same two pixels apart, so
     the first line of a column stands beside the first row of the card. */
  .eld-aside {
    flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    margin-left: 4px; padding-left: 4px; border-left: 1px solid var(--line);
    overflow: hidden;
  }
  .eld-aside-line { display: flex; align-items: center; gap: 2px; min-width: 0; min-height: 21px; }
  .eld-aside-line > .eld-f { flex: 1 1 auto; }
  /* The rule is the edge a column's lines start on — the caption of a box
     (Prio) and a word (BL) stand against it, not a caption's width in. */
  .eld-aside-line > .eld-f > .eld-lab,
  .eld-aside-line > .eld-word:first-child { padding-left: 0; }

  @media (max-width: 620px) {
    /* `!important` because the cell's basis is an inline style: the row is
       tiled from the *form's* widths, which only the code knows (mask.jsx,
       `cellStyle`). Nothing but this outranks an inline style, and on a narrow
       screen the boxes have to stack rather than shrink to nothing. */
    .eld-row { flex-wrap: wrap; }
    .eld-row > .eld-f { flex-basis: 100% !important; }
    /* The columns beside the rows go under them, the rule on top. */
    .eld-sec-body { flex-direction: column; }
    .eld-aside {
      margin: 2px 0 0; padding: 2px 0 0; border-left: 0;
      border-top: 1px solid var(--line);
    }
  }

  /* A box with its caption beside it, on one ruled line. The caption of the
     box that *starts* a row sits in a gutter of its own, so every row of a
     card begins on the same edge; the ones behind it ("Nr.", "Ort") stand
     against their own box, the way the printed mask sets them. */
  /* Two pixels inside a cell as well as between two of them: a box, a marker
     and a key standing next to each other in one row are spaced the same
     whether or not they happen to belong to the same field. The caption keeps
     its seven — the gutter makes up the difference below. */
  .eld-f { display: flex; align-items: center; gap: 2px; min-width: 0; min-height: 21px; }
  .eld-f.tall { align-items: flex-start; }
  /* The gutter of a row: the caption and, where that system prints one, the
     marker in front of the box — together in a fixed width, so every box that
     starts a row starts on the same edge. */
  /* The fallback until the mask has measured the captions (mask.jsx:
     useGutters), and what a card keeps if it never draws one. */
  .eld-fields { --gutter: 86px; }
  .eld-gutter {
    flex: 0 0 var(--gutter); display: flex; align-items: center; gap: 4px;
    min-width: 0; overflow: hidden; margin-right: 5px;
  }
  /* A lone checkbox that leads a row is the gutter and the gap behind it, and
     nothing else — so the box that follows lines up with every other box of
     the card. */
  /* Nothing: the gutter already carries the space a caption is followed by,
     and the row's own gap adds the rest — the box behind the marker starts
     where a box behind a caption starts. */
  .eld-f.check.lead { padding-right: 0; }
  /* A caption inside a row needs the air the column gap no longer gives it. */
  .eld-f:not(.lead) > .eld-lab { padding: 0 5px 0 6px; }
  /* A cell of a twelfth that leads a row keeps its caption tight against its
     box rather than paying for the gutter — except the lone checkbox, which
     *is* the gutter (above). */
  .eld-f.narrow:not(.check) > .eld-gutter { flex: 0 0 auto; }
  .eld-f.check { gap: 5px; }
  .eld-lab {
    flex: 0 0 auto; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* What the incident cannot go out without: red, and underlined in red — two
     marks rather than one, because colour alone is not a mark everybody can
     read. */
  .eld-lab.req {
    color: var(--req); text-decoration: underline; text-decoration-color: var(--req);
  }
  /* A box the manifest gave a width of its own: the house number and the two
     behind it, short and against each other instead of a sixth of a row each.
     They share one cell (`.eld-group`), where nothing stretches. */
  .eld-group { display: flex; align-items: center; gap: 2px; min-width: 0; }
  .eld-group > .eld-f { flex: 0 0 auto; min-width: 0; }
  .eld-f.boxed > .eld-in, .eld-f.boxed > .eld-sug-wrap {
    flex: none; width: var(--box); max-width: var(--box);
  }
  /* The markers and keys that stand beside a box (`layout.fields`). Inert, and
     drawn in the ink of the live ones anyway: on that screen they are part of
     the line, not something switched off. */
  .eld-check.chrome { cursor: default; }
  /* A box that system fills in itself — the shape of an input, in the grey of
     something nobody types into. */
  .eld-dead {
    /* Gives way before a key does when a row runs out of room: an empty box
       can be narrower, a caption on a key cannot. */
    flex: 0 1 auto; min-width: 24px; height: 21px; padding: 0 4px;
    display: inline-flex; align-items: center; overflow: hidden; white-space: nowrap;
    font-weight: 700; color: var(--ink); background: var(--field-off);
    border: 1px solid var(--line);
  }
  /* The empty line of a list rather than a box: white, like the body of every
     list on this console (the Module grid's row for a new module). */
  .eld-dead.plain { background: var(--list); }
  /* A row of them, with its caption in the same gutter as the rows above: the
     boxes stand against each other the way two boxes of a real row do, and
     the first one begins where every other box of the card begins. The row's
     own gap is two pixels and a field cell puts seven between its caption and
     its box, so the gutter here makes up the difference. */
  .eld-row.chrome { gap: 2px; }
  .eld-row.chrome > .eld-gutter { margin-right: 5px; }
  /* A word printed between the boxes of a row ("reg") — bold, the way a
     caption beside a marker is. */
  /* A word beside a marker needs a hair more room than two boxes do, or it
     reads as if it were printed on the checkbox. */
  .eld-word { flex: none; padding: 0 5px 0 3px; font-weight: 700; color: var(--ink); }
  /* The keys that stand in a row of boxes: exactly as high as the box beside
     them, so the line of a row stays one line. */
  .eld-btn.xs {
    font-size: 11.5px; padding: 0 5px; height: 21px; min-height: 21px;
    flex: 0 1 auto; overflow: hidden; letter-spacing: .02em;
  }
  .eld-btn.xs:disabled { color: var(--ink); }
  /* Keys that share out what is left of their row, so a run of them comes out
     the same length. */
  .eld-btn.xs.grow { flex: 1 1 0; }

  /* The yellow box of that system: square, ruled on all four sides, and cyan
     while it has the caret — which is how a call-taker sees where they are
     without looking for a cursor.

     A full border rather than the sunken pair the dialogs of that era drew
     (dark above and left, white below and right): on this background the
     white half of that pair is invisible, so a box looked like a corner
     instead of a box. Everything framed on this console is ruled the same
     way. */
  .eld-in {
    flex: 1; min-width: 0; width: 100%;
    /* Bold: what a call-taker has put in a box stays in bold for as long as
       it stands there, which is how that system tells what was typed from
       what it printed itself. */
    font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--ink);
    background: var(--field); padding: 1px 4px; height: 21px;
    border: 1px solid var(--line);
    outline: none;
  }
  .eld-in:focus { background: var(--field-focus); border-color: var(--edge-lo); }
  /* The cards that system draws white (`plain_cards` in the manifest) — the
     caret still tints them, or a call-taker would lose where they are on
     exactly the boxes they fill first. */
  .eld-f.plain .eld-in { background: var(--field-plain); }
  .eld-f.plain .eld-in:focus { background: var(--field-focus); }
  textarea.eld-in { height: auto; line-height: 1.35; padding: 2px 4px; resize: vertical; }
  select.eld-in { cursor: pointer; background: var(--face); }
  .eld-in[type='datetime-local'] { font-family: var(--mono); font-size: 11px; }
  /* No margin of the browser's own: its default is 3px over 3px under and 4px
     left against 3px right, which centres the box on a row of even height and
     leaves it sitting half a pixel low on a row of odd height — and makes the
     gap in front of it different from the gap behind it. Zeroed, the row
     centres it and the gutter measurement (mask.jsx) sees its real width. */
  .eld-check {
    width: 13px; height: 13px; flex: none; cursor: pointer;
    margin: 0; align-self: center;
  }

  /* ---- lists -------------------------------------------------------------- */
  /* One list, everywhere: on the sheet under the patient and in each of the
     three panels on the right. A sunken frame, column heads that are keys —
     the fill, the border and the bold of the block of keys — standing against
     each other with no gap, and a white body under them. On the sheet the
     body is a number of empty lines high; in a panel it takes what is left
     (`grow`). Anything that is a list on this console uses this and nothing
     else. */
  .eld-table {
    margin: 2px 0; background: var(--sheet);
    border: 1px solid var(--line);
  }
  .eld-table.grow {
    flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column;
  }
  .eld-table.grow > .eld-table-body { flex: 1; min-height: 0; overflow-y: auto; }
  /* The column heads are keys, as far as the eye is concerned: the same fill,
     the same plain border and the same bold as the block of keys under the
     list — one idiom for everything on this sheet that is not a box. */
  /* The heads stand against each other, with no gap: a list is one ruled
     strip, unlike the keys under it that are separate things to press. */
  .eld-table-head { display: flex; }
  .eld-table-col {
    flex: 1 1 0; min-width: 0; padding: 1px 4px; font-size: 12.5px; font-weight: 700;
    background: var(--sheet); color: var(--ink); border: 1px solid var(--line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* A named column a letter or two wide (M, St, Pr): no padding at the
     sides and the caption in the middle, or the padding alone would leave
     room for nothing but an ellipsis. */
  .eld-table-col.narrow, .eld-table-cell.narrow {
    padding: 1px 0; text-align: center; text-overflow: clip;
  }
  .eld-table-body { background: var(--list); }
  /* A row of the list (the crews' reports): the cells as wide as the heads
     over them — the same padding and the same side borders, only unseen —
     so each one stands under its own column. */
  .eld-table-row { display: flex; }
  .eld-table-cell {
    flex: 1 1 0; min-width: 0; padding: 1px 4px;
    border-left: 1px solid transparent; border-right: 1px solid transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- suggestion lists --------------------------------------------------- */
  /* A table, not a dropdown: what will be written on the left, what tells it
     apart from the row under it on the right, both in the monospace the
     printed catalogues are set in. */
  .eld-sug-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
  .eld-sug {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 50;
    background: var(--list); border: 1px solid var(--edge-lo);
    max-height: 290px; overflow-y: auto; min-width: 360px;
  }
  .eld-sug-row {
    display: flex; align-items: baseline; gap: 12px; padding: 2px 6px; cursor: pointer;
    font-family: var(--mono); font-size: 11px; color: var(--ink);
  }
  .eld-sug-row.hi { background: var(--sel); color: var(--sel-ink); }
  .eld-sug-row.hi .eld-sug-sub { color: var(--sel-ink); }
  .eld-sug-name { white-space: nowrap; }
  .eld-sug-sub {
    margin-left: auto; text-align: right; color: var(--ink-dim); font-size: 10.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ---- keys --------------------------------------------------------------- */
  /* One key, one design, wherever it stands: the fill of the sheet and a
     plain border — the little ones in a row of boxes (AD, ED, ZD,
     zurücksetzen) and the block along the bottom are the same key at
     different sizes, and a desk with two kinds of key is a desk you have to
     look at twice. */
  .eld-btn {
    /* Bold, like everything this system writes on a key or beside a marker. */
    font-family: var(--font); font-size: 12.5px; font-weight: 700; color: var(--ink);
    background: var(--sheet); padding: 2px 7px; min-height: 23px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius);
    /* The caption sits in the middle of its key, whatever the key's width —
       a run of keys sharing out a row would otherwise read as left-aligned
       labels with space behind them. */
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; white-space: nowrap;
  }
  .eld-btn.sm { font-size: 11.5px; padding: 1px 5px; min-height: 19px; }
  /* Closing the console: red like the hang-up key, and a cross rather than a
     word — the one key at the window's edge that makes the window go. */
  .eld-btn.eld-close {
    background: var(--live); color: var(--live-ink);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .eld-btn:active:not(:disabled) { background: var(--face); }
  .eld-btn:disabled { cursor: default; }
  /* The keys that really do something carry the yellow of a box waiting to be
     filled — that system marks the action a row is waiting on by colouring
     it, not by outlining it. */
  .eld-btn.live:not(:disabled) { background: var(--field); }
  .eld-btn.live.end:not(:disabled) { color: var(--req); }
  /* The key a list is waiting on once there is something for it — Neu of the
     crews' reports while the box under it has text: ringed in light blue,
     the way that system marks the key Enter presses. */
  .eld-btn.ready { border-color: var(--ring); box-shadow: inset 0 0 0 1px var(--ring); }
  /* A key that system prints greyed out — the whole key, not only its
     caption: border, fill and text fade together, which is what makes it read
     as switched off rather than as a key with pale writing on it. */
  .eld-btn.off:disabled { opacity: .5; }
  .eld-btn i {
    font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--ink-dim);
    border-left: 1px solid var(--line); padding-left: 4px; margin-left: 4px;
  }

  /* The block along the bottom of the desk. Fixed, and always in the same
     place, because a key block that moves is a key block nobody learns. */
  .eld-keys {
    flex: none; display: flex; flex-direction: column; gap: 3px;
    padding: 5px 6px; background: var(--face); border-top: 1px solid var(--line);
  }
  /* One grid, both rows: the same columns, so a key stands over the key of
     the row above it and every key is the same size. The block is learned by
     where a key sits, so it never rewraps — a narrower window makes every key
     narrower and cuts the captions, it does not move them. */
  .eld-keyrow {
    display: grid; grid-template-columns: repeat(var(--keys, 8), minmax(0, 1fr));
    gap: 4px; min-width: 0;
  }
  .eld-keyrow > .eld-btn {
    /* Less air at the sides than a key that stands on its own: eight of them
       share a row here, and the longest caption on the block decides whether
       any of them has to be cut. */
    min-width: 0; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: block; line-height: 19px; text-align: center;
  }

  /* ---- the trainer's own telephone ---------------------------------------- */
  /* Under the key block and outside it. The keys above are that system's own
     and are learned by where they sit, so the one thing on this desk the real
     console does not have gets a strip of its own rather than a ninth key in
     a row of eight — same fill and same border as the block, half its height,
     and the caption of a section rather than of a key. */
  .eld-phone {
    flex: none; display: flex; align-items: center; gap: 6px;
    padding: 4px 6px; background: var(--face);
    border-top: 1px solid var(--line);
  }
  /* Smaller than a key of the block, for the same reason: this strip is not
     part of it. */
  .eld-phone .eld-btn { min-height: 21px; }
  /* The hang-up: the whole key red, not only its writing. It is the one key
     on this desk that takes something away rather than entering it, and the
     yellow of a box waiting to be filled says the opposite. Everything else
     about it stays a key of this system — same border, same bold, same square
     corners — so it reads as that console's key in another colour rather than
     as something from another program. Only where it can be pressed: a key
     that cannot is a key with nothing to warn about. */
  .eld-phone .eld-btn.live.end:not(:disabled) {
    background: var(--live); color: var(--live-ink);
  }
  /* The end of the training, where Auflegen was once the line is down: the
     yellow of the action the desk is waiting on, with red writing — the look
     the end of a training has always had here, now on a key the real desk
     does not have, so it teaches no hand anything about that desk. */
  .eld-phone .eld-btn.live.finish:not(:disabled) { color: var(--req); }
  /* What has happened to the record — handed over, saved — behind the keys.
     The key block above stays bare, the way the real desk prints it; this
     strip is the trainer's own. It never gives way: the line of type on the
     right does, which is long and says less. */
  .eld-phone-note {
    flex: none; display: inline-flex; align-items: center; gap: 10px;
    margin-left: 4px; font-size: 11px; color: var(--ink-dim); white-space: nowrap;
  }
  .eld-save { color: var(--ok); }
  /* The one line of type on the strip — the clock while a call is running,
     what the line is doing before it is one. Monospace and tabular, because a
     clock that changes width every second is a clock nobody reads. */
  .eld-phone-state {
    margin-left: auto; min-width: 0;
    font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
    color: var(--ink-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---- the lists on the right --------------------------------------------- */
  /* Empty, and drawn anyway: the frame the sheet is read inside. */
  .eld-panel {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--face);
    border: 1px solid var(--line);
  }
  .eld-panel-h {
    flex: none; padding: 1px 6px; font-size: 11px; color: var(--ink-dim);
    background: var(--face); border-bottom: 1px solid var(--line);
  }
  .eld-panel-keys {
    flex: none; display: flex; gap: 2px;
    padding: 3px 4px; border-top: 1px solid var(--line);
  }
  /* A strip with keys printed in the middle under the list (`center: true` —
     GEO Anzeige, Koord. zuordnen): the left run from the left edge, the other
     centred on the whole strip rather than on what the left one leaves. Two
     equal outer columns are what keep it in the middle; a left run too long
     for its half pushes it right instead of running into it. */
  .eld-panel-keys.split {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  }
  .eld-panel-run { display: flex; gap: 2px; min-width: 0; }
  /* The moment a crew report is stamped with, left of the key that adds it:
     a marker and a date box drawn like the Termin's Fix/Zielzeit — white, the
     browser's own calendar — and exactly as high as the keys beside it. */
  .eld-panel-time {
    flex: none; display: inline-flex; align-items: center; gap: 4px; margin-right: 2px;
  }
  .eld-panel-time > .eld-in {
    flex: none; width: auto; height: 19px; padding: 0 3px; background: var(--field-plain);
  }
  .eld-panel-time > .eld-in:focus { background: var(--field-focus); }
  /* The free-text box under a list's keys (Rückmeldungen erfassen): ruled
     like every box, light grey rather than yellow — it is not a box of the
     record — and as many lines high as the manifest says. */
  .eld-panel-entry {
    flex: none; margin: 0 4px 4px; padding: 2px 4px; min-width: 0;
    font-family: var(--font); font-size: 12px; line-height: 15px; color: var(--ink);
    background: var(--field-off); border: 1px solid var(--line);
    resize: none; outline: none;
  }
  .eld-panel-entry:focus { border-color: var(--edge-lo); }
  /* One row, however many keys the list has — the Dispoliste has twelve. Each
     key as wide as its caption, from the left edge, and the rest of the row
     left empty. The type a size down from the other keys, and a window too
     narrow even for that cuts the captions rather than wrapping them onto a
     second row or running past the edge, the way the key block does: a strip
     of keys is learned by where a key sits. */
  .eld-panel-keys > .eld-btn, .eld-panel-run > .eld-btn {
    flex: 0 1 auto; min-width: 0; font-size: 10px; padding: 1px 3px;
    display: block; line-height: 15px; text-align: center;
    overflow: hidden; text-overflow: ellipsis;
  }
}