/* 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);
    /* As wide as "Standard" whatever it says (RD, THL …): the Sicht and an
       unseen Standard in one cell, so nothing behind it moves. */
    display: inline-grid;
  }
  .eld-case-scheme > * { grid-area: 1 / 1; justify-self: start; }
  .eld-case-scheme-room { visibility: hidden; }
  /* 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;
  }
  /* 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 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 Typ the form has (`case_type`): a choice, as wide as that box and
     white like the boxes beside it — what the system presets, the
     call-taker may change. White with the caret too, and so is the list it
     opens (the browser draws that in the select's own colour): a dropdown
     on that system is not tinted the way a box typed into is. */
  .eld-case-type { display: inline-flex; min-width: 150px; }
  .eld-case-type > select.eld-in,
  .eld-case-type > select.eld-in:focus,
  .eld-case-type > select.eld-in option { background: var(--field-plain); }
  /* 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. The date box is one of the Termin's (mask.jsx, Shell),
     white like theirs. */
  .eld-case-date { min-width: 160px; pointer-events: none; }
  .eld-case-date > .eld-in { background: var(--field-plain); }
  /* The case number, red and in the monospace of the printed header — in a
     box greyed out like every box nobody writes in, with a number in it or
     without. */
  .eld-case-box.no {
    flex: none; min-width: 112px; font-family: var(--mono); font-size: 11px;
    font-weight: 700; color: var(--req); background: var(--field-off);
  }

  /* ---- 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, a little over a third of the screen, right the lists in
     what is left — the proportion of the real screen, and the reason a
     call-taker finds the Einsatzort without reading a caption. Never narrower
     than the 600px the sheet's header line and its keys need, though: on a
     laptop the lists give up the difference, not the record. */
  .eld-desk {
    flex: 1; min-height: 0; display: grid; gap: 2px; padding: 2px;
    grid-template-columns: minmax(600px, 40%) 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;
  }
  /* The column as wide as its track and no wider: a list's strip of keys cuts
     its captions (below) rather than pushing the lists past the window. The
     Maßnahmen a little lower than the Dispoliste, and what they give up goes
     to the Rückmeldungen erfassen, whose box under the keys is six lines. */
  .eld-side {
    display: grid; gap: 2px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
  /* One screen is what this console is. Below the width the two halves need,
     the lists go under the sheet rather than squeezing it. */
  /* Under the desk, across the whole screen: the Signalisierungen on the
     left, half as wide again as the sheet above them (60% of the screen
     where the sheet has 40), and the Informationen zum Einsatz in what is
     left — drawn as the lists are, the caption and the run of blue under
     it. As high as a square key needs, and no higher. */
  .eld-foot {
    flex: none; display: grid; gap: 2px; padding: 0 2px 2px;
    grid-template-columns: minmax(900px, 60%) minmax(0, 1fr);
  }
  .eld-foot > .eld-panel { min-height: 62px; }
  /* In fullscreen (`full` — mask.jsx, Shell) the two strips as high as that
     system draws them on its screen; the desk above gives up the
     difference. */
  .eld-app.full .eld-foot > .eld-panel { min-height: 92px; }
  /* Under the caption the white of a list, ruled as the lists above are —
     what each strip holds stands in it, from the top: a strip made higher
     (fullscreen) leaves its room under the icons, not above them. */
  .eld-foot-body {
    flex: 1; min-height: 0; display: flex; align-items: flex-start;
    background: var(--list); border: 1px solid var(--line);
  }
  /* The Informationen zum Einsatz: its signals side by side from the top
     left, each in a cell of the same size — the faint frame of a flat key
     round an icon (the cross), or the frame of its own a tile fills it
     with (the half). */
  .eld-foot-body.signals { gap: 7px; padding: 3px 5px; }
  /* The telephone in the Signalisierungen as far from the top as the
     signals beside it. */
  .eld-foot-body > .eld-phone { padding: 3px 5px; }
  /* The half of the control room's area the Einsatzort is in, as that strip
     signs it: a square tile a little smaller than a cell, in the middle of
     its own, ruled in orange with a fine white line inside that, the
     letter in it nearly black and heavy — pale lavender for the south,
     light blue for the north. */
  .eld-half {
    flex: none; width: 38px; height: 38px; margin: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--half);
    border: 2px solid var(--half-edge); border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--field-plain);
    color: var(--half-ink); font-family: var(--font);
    font-size: 21px; font-weight: 700; line-height: 1;
  }
  .eld-half.north { background: var(--half-north); }
  /* A key: a click shows the half's text block (TextBlockWindow); its frame
     blue under the pointer, as the cross's is. */
  button.eld-half { padding: 0; cursor: pointer; }
  button.eld-half:hover { border-color: var(--window-hover-edge); }
  /* The key that opens a document of the control room (the leaflet on
     infection transports): that system's icon (mask.jsx, DocGlyph) in its
     cell, the faint line round it — blue under the pointer. Always there,
     behind the half where there is one. */
  .eld-doc {
    flex: none; width: 40px; height: 40px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--list); border: 1px solid var(--window-rule); border-radius: 3px;
    cursor: pointer;
  }
  .eld-doc:hover { border-color: var(--window-hover-edge); }
  /* A tile of the strip just clicked — it has the keyboard, and gets it
     back when the window it opened is shut: that system's focus, the cell
     ruled in blue and a dotted line round what is in it. */
  .eld-doc:focus { border-color: var(--sign-edge); outline: 1px dotted var(--ink);
                   outline-offset: -4px; }
  button.eld-half:focus { outline: 1px dotted var(--ink); outline-offset: -4px; }
  .eld-doc-glyph { flex: none; }
  .eld-doc-glyph .ground { fill: var(--field-plain); }
  .eld-doc-glyph .dot { fill: var(--line); }
  .eld-doc-glyph .cross { fill: var(--req); }
  .eld-doc-glyph .page { fill: var(--field-plain); stroke: var(--ink); stroke-width: 1; }
  .eld-doc-glyph .leaves { fill: none; stroke: var(--line); stroke-width: 1; }
  .eld-doc-glyph .foot { fill: var(--ink); }
  /* The street sign (mask.jsx, StreetGlyph): white dotted with green, the
     black post, the blue plate with its white bands and word. */
  .eld-sign-glyph { flex: none; }
  .eld-sign-glyph .ground { fill: var(--field-plain); }
  .eld-sign-glyph .dot { fill: var(--sign-dot); }
  .eld-sign-glyph .post { fill: var(--ink); }
  .eld-sign-glyph .plate { fill: var(--sign-plate); }
  .eld-sign-glyph .band, .eld-sign-glyph .word { fill: var(--field-plain); }
  /* A document's window: larger than a list's, the document to its edges. */
  .eld-win.eld-doc-win { width: min(1100px, 94vw); height: min(900px, 92vh); }
  .eld-doc-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--field-plain); }
  @media (max-width: 1250px) {
    .eld-desk { grid-template-columns: minmax(0, 1fr); }
    .eld-side { grid-template-rows: repeat(3, 180px); }
    .eld-foot { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---- the sheet ---------------------------------------------------------- */
  /* As high as the sheet, or as its cards need where that is more — then
     the sheet scrolls (.eld-sheet-body) rather than squeezing a card. */
  .eld-grid {
    flex: 1 0 auto;
    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 rows that take what is left of the sheet (`fill_cards`), and the
     card, the section and the block of fields that stretch with them — the
     Patient's list and the Hinweise. Each row starts from what its card
     needs, its stretching part three lines high, and the rest of the sheet
     goes to them in equal shares: the list and the block of notes grow by
     the same, so they stay about as high as each other whatever the window
     does, and the Hinweise still reach the key block. Never smaller than
     that: a window too low for it scrolls the sheet. */
  .eld-cardrow.fill { flex: 1 0 auto; }
  .eld-cardrow.fill .eld-card,
  .eld-cardrow.fill .eld-sec { display: flex; flex-direction: column; }
  /* Each of them passes the height on to the one inside it, or the part at
     the bottom of the chain has nothing to stretch into: the block of fields
     right under the section — or, on a card with columns beside its rows,
     the row that holds both, whose children take its height. */
  .eld-cardrow.fill .eld-sec,
  .eld-cardrow.fill .eld-sec > .eld-fields,
  .eld-cardrow.fill .eld-sec-body { flex: 1 0 auto; }
  /* What stretches in the card: its list, where it has one that grows (the
     patients — `.grows`); otherwise its last row and the block of lines in
     it (the Hinweise). */
  .eld-cardrow.fill .eld-fields:not(.grows) > .eld-row:last-child {
    flex: 1 0 auto; align-items: stretch;
  }
  .eld-cardrow.fill .eld-fields:not(.grows) > .eld-row:last-child > .eld-f.tall {
    align-items: stretch;
  }
  .eld-cardrow.fill textarea.eld-in { min-height: 60px; resize: none; }
  .eld-cardrow.fill .eld-fields > .eld-table-fill {
    flex: 1 0 auto; display: flex; flex-direction: column;
  }
  .eld-table-fill > .eld-table.grow { flex: 1 0 auto; margin: 2px 0; }
  .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; }
    /* Stacked, a box not drawn takes no place, and none is run on over. */
    .eld-f.gone { display: none; }
    .eld-f.swallows > .eld-in, .eld-f.swallows > .eld-sug-wrap { margin-right: 0; }
    /* 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; }
  /* A box drawn only while another box holds a value (`shown_when`), when
     it does not: its place kept, unseen. The box in front of it runs on over
     that place and the gap before it — the 2px of a row and of a group — so
     it grows and nothing else on the row moves. */
  .eld-f.gone { visibility: hidden; }
  .eld-f.swallows > .eld-in, .eld-f.swallows > .eld-sug-wrap {
    margin-right: calc(-2px - var(--swallow));
  }
  .eld-group > .eld-f { flex: 0 0 auto; min-width: 0; }
  .eld-f.boxed > .eld-in, .eld-f.boxed > .eld-sug-wrap, .eld-f.boxed > .eld-date {
    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. */
  /* A box the software fills and nobody writes in (O/G/K/I): grey like the
     dead boxes, whatever it holds. */
  .eld-in.sys { background: var(--field-off); cursor: default; caret-color: transparent; }
  .eld-chrome-field { display: flex; min-width: 0; }
  .eld-chrome-field > .eld-in { flex: 1; min-width: 0; }
  .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);
    cursor: default; outline: none;
  }
  /* 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), and with
     no line along its foot — a list's row has none. */
  .eld-dead.plain { background: var(--list); border-bottom: 0; box-shadow: none; }
  /* One the sheet prints yellow (`marked:`) — O, G and K of the Einsatzort:
     with the incident's boxes once it is open, grey with them before. Still
     nothing anybody types into. */
  .eld-grid:not(.closed) .eld-dead.marked { background: var(--field); }
  /* 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 {
    padding: 0 4px; height: 21px; min-height: 21px;
    flex: 0 1 auto; overflow: hidden;
  }
  .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.

     Its edge is the one rule below — every box on this console is drawn
     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;
    outline: none;
  }
  /* Every box of this console — the ones typed into, the ones the system
     fills itself, those of the case line and under the lists — drawn the
     way that system draws one: no line round it, only a slightly heavier one
     along its foot, and inside it a white frame finer than its keys'. The
     line is part of the box's height, so a box stays exactly as high. */
  .eld-in, .eld-dead, .eld-case-box, .eld-panel-entry {
    /* A pixel of border and half a pixel of shadow above it: a border is
       drawn in whole screen pixels, so one and a half would come out as one. */
    border: 0; border-bottom: 1px solid var(--line);
    box-shadow: inset 0 -0.5px 0 var(--line), inset 0 0 0 1.25px var(--edge-hi);
    /* Its corners rounded a touch less than a key's. */
    border-radius: 1.5px;
  }
  .eld-in:focus { background: var(--field-focus); }
  /* A box drawn in the colour of what it holds (`tint` on a row of its list
     — the infection category in the colour of its ITK), and written in that
     colour's ink: with the caret in it too, the colour being the point of
     it. Not on a sheet still closed, whose boxes are all grey. */
  .eld-grid:not(.closed) .eld-in.tinted, .eld-pw .eld-in.tinted,
  .eld-in.tinted:focus { background: var(--tint); color: var(--tint-ink); }
  /* The box with the caret: the line along its foot blue, and a pixel heavier
     than the line of the others — drawn into the box, so it stays as high. */
  .eld-in:focus, .eld-dead:focus, .eld-panel-entry:focus {
    border-color: var(--field-focus-line);
    box-shadow: inset 0 -1px 0 var(--field-focus-line), inset 0 0 0 1.25px var(--edge-hi);
  }
  /* 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); }
  /* A box that system prints in the plain weight (`light` — the Alter). */
  .eld-in.light { font-weight: 400; }
  .eld-f.plain .eld-in:focus { background: var(--field-focus); }
  /* A grey box with the caret in it (one the software fills): it stays grey —
     nothing can be typed there — and only its foot turns blue, like the
     grey boxes nobody fills (`.eld-dead`), which the caret never tints. */
  .eld-in.sys:focus { background: var(--field-off); }
  /* A sheet with no incident open on it yet (`closed` — mask.jsx, isOpen):
     the yellow boxes in the grey of a box nobody types into, the white ones
     left white. Locked either way; *Neuer Einsatz* is what opens them. */
  .eld-grid.closed .eld-f:not(.plain) .eld-in,
  .eld-grid.closed .eld-chrome-field .eld-in { background: var(--field-off); }
  /* A sheet forwarded to another ELP (`forwarded` — mask.jsx,
     forwardedIncidents): every box grey, the white ones too. */
  .eld-grid.forwarded .eld-in { background: var(--field-off); }
  .eld-in:disabled { cursor: default; }
  textarea.eld-in { height: auto; line-height: 1.35; padding: 2px 4px; resize: vertical; }
  /* A box one line high that grows with the lines in it (`grows` — the RM,
     for the text blocks written into it): as high as every box while it
     holds one line, its caption beside the first; mask.jsx (BlockBox) sets
     how high it is from there. */
  textarea.eld-in.lines,
  .eld-cardrow.fill textarea.eld-in.lines {
    height: 21px; min-height: 21px; padding: 3px 4px 2px; line-height: 15px;
    resize: none; overflow-y: hidden;
  }
  .eld-f.lines { align-items: flex-start; }
  .eld-f.lines > .eld-gutter { height: 21px; }
  select.eld-in { cursor: pointer; background: var(--face); }
  .eld-in[type='datetime-local'], .eld-in[type='date'], .eld-in.date {
    font-family: var(--mono); font-size: 11px;
  }
  /* A date box stays ruled all round, without the white frame: that system
     draws its date pickers the way the operating system does — the case
     line's date box is one of them. With the caret, the line along its
     foot turns blue and heavier like every other box's. */
  .eld-in[type='datetime-local'], .eld-in[type='date'], .eld-in.date {
    border: 1px solid var(--line); box-shadow: none;
  }
  .eld-in[type='datetime-local']:focus, .eld-in[type='date']:focus, .eld-in.date:focus {
    border-color: var(--edge-lo); border-bottom-color: var(--field-focus-line);
    box-shadow: inset 0 -1px 0 var(--field-focus-line);
  }
  /* A date box with nothing in it reads " - ", the way that system prints an
     empty date — not the format the browser would print in it (mask.jsx,
     Control). Where the browser lets its format be hidden (Chrome, Edge);
     anywhere else the format stays and no dash is drawn over it.
     The marker in front of the date stands inside the box's frame, and the
     date and the dash move along to make room for it — in a box that has one:
     the case line's date box has none (mask.jsx, Shell). The dash goes while the
     *box* has the caret, not the marker: unticking it empties the box, and
     that box reads " - " at once. */
  .eld-date { position: relative; flex: 1; min-width: 0; display: flex; }
  .eld-date > .eld-check {
    position: absolute; left: 4px; top: 0; bottom: 0; margin: auto 0; z-index: 1;
  }
  .eld-date > .eld-check + .eld-in { padding-left: 21px; }
  /* A box typed through (`typed` — mask.jsx, DateBox) writes its " - "
     itself, and keeps the calendar on a key at its right edge; the
     browser's own date box behind that key is there for the calendar alone,
     unseen. */
  .eld-date.typed > .eld-in { padding-right: 20px; }
  .eld-date-cal {
    position: absolute; right: 3px; top: 0; bottom: 0; margin: auto 0; z-index: 1;
    width: 16px; height: 16px; padding: 0; border: 0; background: transparent;
    color: var(--ink); display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .eld-date-cal:disabled { cursor: default; color: var(--ink-dim); }
  .eld-date-native {
    position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; padding: 0;
    border: 0; opacity: 0; pointer-events: none;
  }
  @supports selector(::-webkit-datetime-edit) {
    .eld-date.blank > .eld-in:not(:focus)::-webkit-datetime-edit { color: transparent; }
    .eld-date.blank:not(.typed):not(:has(> .eld-in:focus))::after {
      content: " - "; white-space: pre; position: absolute; left: 4px; top: 0; bottom: 0;
      display: flex; align-items: center; pointer-events: none;
      font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink);
    }
    .eld-date.blank:not(.typed):has(> .eld-check):not(:has(> .eld-in:focus))::after {
      left: 21px;
    }
  }
  /* 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: 12px; 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, in the bold of the heads. */
  .eld-table-row { display: flex; }
  .eld-table-cell {
    flex: 1 1 0; min-width: 0; padding: 1px 4px; font-size: 12px; font-weight: 700;
    border-left: 1px solid transparent; border-right: 1px solid transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* The selected row (the patient being worked on): in the blue a window's
     list marks its selected line with (the Einsatzorte), but for the cell of
     the marker in front of it, which keeps the colour of the heads — and the
     marker, a black triangle pointing at the row. */
  .eld-table-row.sel .eld-table-cell { background: var(--window-sel); color: var(--sel-ink); }
  .eld-table-row.sel .eld-table-cell.marker { background: var(--sheet); }
  .eld-table-cell.marker { display: flex; align-items: center; justify-content: center; }
  .eld-row-marker {
    width: 0; height: 0; border-left: 6px solid var(--ink);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  }

  /* ---- 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,
       and the size of it too: a key's caption is the caption of a box on a
       key, not a bigger word. */
    font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--ink);
    background: var(--sheet); padding: 2px 6px; 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; }
  /* Every key of the record and of the lists in one face, whatever its size:
     the keys in a row of boxes, the block along the bottom, the strip under
     it and the keys under the lists. A size under the captions and half as
     heavy — a row of Tahoma-bold captions is louder than the sheet it stands
     on. Tahoma has no weight between regular and bold, so the keys are set
     in Segoe UI, which every Windows desk has — its Semibold with a hair of
     stroke on it: the Semibold alone, at this size and with ClearType, reads
     as regular, and the Bold is a step too heavy. Anywhere without it they
     fall back to the bold of the mask's font. And the one corner on this
     desk that is not square, only just: a key that reads as a key at a
     glance is worth the departure from that screen. The title bar's keys
     are the window's, not the desk's, and keep the mask's own face. */
  .eld-sheet .eld-btn, .eld-side .eld-btn, .eld-pw .eld-btn, .eld-foot .eld-btn {
    font-family: 'Segoe UI', var(--font); font-size: 11.5px; font-weight: 600;
    -webkit-text-stroke: 0.3px currentColor; border-radius: 2px;
    /* Inside the thin dark edge a white one twice as wide, plain key or
       yellow — the frame every key of that system is drawn with. */
    box-shadow: inset 0 0 0 2px var(--edge-hi);
  }
  /* The key the pointer is on: its edge turns blue and a hair wider, the way
     the system marks the key a click would press — a blue line inside the
     border, the white frame moved in behind it, so the key keeps its size.
     Not a key printed greyed out — that one answers nothing. */
  .eld-sheet .eld-btn:not(.off):hover, .eld-side .eld-btn:not(.off):hover,
  .eld-pw .eld-btn:not(.off):not(:disabled):hover,
  .eld-foot .eld-btn:not(.off):not(:disabled):hover {
    border-color: var(--window-hover-edge);
    box-shadow: inset 0 0 0 0.5px var(--window-hover-edge), inset 0 0 0 2.5px var(--edge-hi);
  }
  /* 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.end:not(:disabled) { color: var(--req); }
  /* A key of the block that console prints yellow (`marked:` in the
     manifest) — Disponieren. The colour is what the screen shows, whether or
     not the trainer lets the key do anything, so it does not wait on the key
     being pressable. */
  .eld-btn.mark { background: var(--field); }
  /* 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), inset 0 0 0 3px var(--edge-hi);
  }
  /* 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. */
  /* One grid, both rows: the same columns, so a key stands over the key of
     the row above it and the two are always the same width. A column is as
     wide as the longest caption in it — never narrower, so no caption is
     ever cut — and what the row has left over is shared out equally. Each
     row is a subgrid of it, so a row shorter than the others leaves its last
     columns empty instead of running on into the next one. The block is
     learned by where a key sits, so it never rewraps. On the light of the
     sheet like the cards above it, the rule over it the only thing that
     sets it apart. */
  .eld-keys {
    flex: none; display: grid; gap: 3px 4px;
    grid-template-columns: repeat(var(--keys, 8), minmax(max-content, auto));
    padding: 5px 6px; background: var(--sheet); border-top: 1px solid var(--line);
  }
  .eld-keyrow {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  }
  .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 captions decide how wide the block is. */
    min-width: 0; padding: 2px 3px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: block; line-height: 19px; text-align: center;
  }
  /* The letter a key is underlined at (`&` in the manifest): a line as firm
     as the half-bold stroke above it, and clear of the letter's foot. */
  .eld-keyrow > .eld-btn u {
    text-decoration-thickness: 1.25px; text-underline-offset: 2px;
  }

  /* ---- the trainer's own telephone ---------------------------------------- */
  /* In the Signalisierungen under the sheet, outside the key block. The keys
     of the block 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 stands where
     that system signals a call, rather than as a ninth key in a row of
     eight: square keys with a glyph, the way that strip draws its signals,
     and the line of type beside them. */
  .eld-phone {
    flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0;
    padding: 4px 6px;
  }
  .eld-phone .eld-btn.icon {
    flex: none; width: 36px; height: 36px; min-height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* 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); }
  /* Whether the record was handed over, 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;
  }
  /* 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. Each one its
     own run of blue, light at the caption and nearly white at the keys — the
     caption and the strip of keys are clear, so the run shows through them. */
  .eld-panel {
    display: flex; flex-direction: column; min-height: 0;
    background: linear-gradient(to bottom, var(--panel-top), var(--panel-foot));
    border: 1px solid var(--panel-edge);
  }
  .eld-panel-h {
    flex: none; padding: 1px 6px; font-size: 11px; color: var(--ink-dim);
    border-bottom: 1px solid var(--panel-edge);
  }
  .eld-panel-keys {
    flex: none; display: flex; gap: 2px;
    padding: 3px 4px; border-top: 1px solid var(--panel-edge);
  }
  /* 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 date box drawn like the Termin's Fix/Zielzeit, its marker inside the
     box at the left (`.eld-date`) — 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; margin-right: 2px;
  }
  .eld-panel-time > .eld-in {
    flex: none; width: auto; height: 21px; padding: 0 3px; background: var(--field-plain);
  }
  .eld-panel-time > .eld-in:focus { background: var(--field-focus); }
  /* Greyed out until Neu starts a report (mask.jsx, SidePanel). */
  .eld-panel-time > .eld-in:disabled { background: var(--field-off); color: var(--ink-dim); }
  /* 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);
    resize: none; outline: none;
  }
  /* With the caret in it — after Neu — blue like every box with the caret. */
  .eld-panel-entry:focus { background: var(--field-focus); }
  /* 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. A window too narrow for them cuts the captions rather than
     wrapping them onto a second row or running past the edge: a strip of
     keys is learned by where a key sits. */
  /* The key itself is the one in a row of boxes on the sheet (`.xs`): as
     high, with as much air at its sides, so a key under a list and a key
     under the patient's transports are the same key. */
  .eld-panel-keys > .eld-btn, .eld-panel-run > .eld-btn {
    flex: 0 1 auto; min-width: 0; padding: 0 4px; height: 21px; min-height: 21px;
    display: block; line-height: 19px; text-align: center;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- Einsatzorte: the window over the desk ------------------------------ */
  /* Modal: a layer over the whole screen that takes every click, clear — the
     desk behind it stays in sight, the way a dialog sits over a program. */
  .eld-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
  }
  .eld-modal.resizing, .eld-modal.resizing * { cursor: col-resize; }
  /* Drawn the way Windows 7 drew a dialog, not the way the console draws
     itself — without its glass frame: the grey face of the dialog to its
     edge, the title on the same grey, the corners just rounded, a thin line
     round it and a shadow under it. Its typeface throughout, at the size it
     used. */
  .eld-win {
    width: min(1180px, 94vw); height: min(960px, 92vh);
    display: flex; flex-direction: column; padding: 0 1px 1px;
    font-family: var(--window-font); font-size: 12px; color: var(--ink);
    background: var(--window-face);
    border: 1px solid var(--window-edge); border-radius: 6px;
    box-shadow: 0 8px 28px var(--window-shadow); outline: none;
  }
  .eld-win-title {
    flex: none; display: flex; align-items: center; gap: 6px; height: 30px;
    padding-left: 9px; user-select: none;
  }
  /* A window is moved by its title bar and made larger or smaller by its
     edges and corners (mask.jsx, useWindowFrame): a strip along each edge
     and a square in each corner, unseen, with the pointer of that edge. */
  .eld-win { position: relative; }
  .eld-win-edge { position: absolute; z-index: 3; }
  .eld-win-edge.n { top: 0; left: 8px; right: 8px; height: 5px; cursor: n-resize; }
  .eld-win-edge.s { bottom: 0; left: 8px; right: 8px; height: 5px; cursor: s-resize; }
  .eld-win-edge.e { right: 0; top: 8px; bottom: 8px; width: 5px; cursor: e-resize; }
  .eld-win-edge.w { left: 0; top: 8px; bottom: 8px; width: 5px; cursor: w-resize; }
  .eld-win-edge.ne { top: 0; right: 0; width: 8px; height: 8px; cursor: ne-resize; }
  .eld-win-edge.nw { top: 0; left: 0; width: 8px; height: 8px; cursor: nw-resize; }
  .eld-win-edge.se { bottom: 0; right: 0; width: 8px; height: 8px; cursor: se-resize; }
  .eld-win-edge.sw { bottom: 0; left: 0; width: 8px; height: 8px; cursor: sw-resize; }
  .eld-win-glyph { flex: none; }
  .eld-win-glyph .frame { fill: var(--window); stroke: var(--window-hover-edge); }
  .eld-win-glyph .bar { fill: var(--window-sel); }
  .eld-win-glyph .rules { stroke: var(--window-edge); stroke-width: 1; }
  .eld-win-name {
    flex: 1; min-width: 0; font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Closing it: a plain cross at the top right, no key round it — only a
     shade behind it under the pointer. */
  .eld-win-x {
    flex: none; align-self: stretch; width: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink); background: transparent; border: 0; border-radius: 0 5px 0 0;
    cursor: default;
  }
  .eld-win-x:hover { background: var(--window-rule); }
  .eld-win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  /* The search: its caption in bold, and a box drawn like the boxes of the
     sheet — no line round it, the line along its foot, the white frame
     inside — but white, with that line in black, and white it stays with
     the caret in it: the window's box is the one thing being typed into
     while the window is open. What is typed stands in the window's own
     face and lighter than plain — Segoe UI Semilight, where the desk has it,
     else its Light — not in the sheet's bold: it is a search, not an entry.
     While the search is live its caret is invisible — typing goes on
     without it; once the box is clicked into, it shows. */
  .eld-win-search {
    flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 32px 10px 40px;
  }
  .eld-win-label { flex: none; font-weight: 700; }
  .eld-win-q {
    flex: 1; min-width: 0; height: 21px; padding: 1px 4px;
    font-family: var(--window-font); font-size: 12px; font-weight: 350; color: var(--ink);
    background: var(--window); outline: none;
    border: 0; border-bottom: 1px solid var(--ink); border-radius: 1.5px;
    box-shadow: inset 0 -0.5px 0 var(--ink), inset 0 0 0 1.25px var(--edge-hi);
  }
  .eld-win-q.live { caret-color: transparent; }
  /* The list, in a sunken white frame — a black line along its top and its
     left, none along its foot and its right: heads with their own sheen that
     stay at the top, every other line faintly tinted, the selected one in
     the window's blue, every cell cut where its column ends. The table is
     exactly as wide as its columns — dragging one changes that one and no
     other: wider than the frame it scrolls sideways as well as down,
     narrower it leaves the frame empty to the right, the band of the heads
     running on across it (the frame's own background, which stays put while
     the list scrolls under it). The room for the scrollbar is kept from the
     start, so it does not push the columns aside. */
  .eld-win-list {
    flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable;
    margin: 0 32px 0 40px; border: 0;
    border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
    background:
      linear-gradient(var(--window-rule), var(--window-rule)) 0 21px / 100% 1px no-repeat,
      linear-gradient(to bottom, var(--window-head-hi), var(--window-head-lo)) 0 0 / 100% 22px no-repeat,
      var(--window);
  }
  .eld-win-list table { table-layout: fixed; border-collapse: collapse; }
  .eld-win-list tbody { background: var(--window); }
  .eld-win-list th {
    position: sticky; top: 0; z-index: 1; height: 22px; padding: 0 6px;
    text-align: left; font-weight: 400; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(to bottom, var(--window-head-hi), var(--window-head-lo));
    border-right: 1px solid var(--window-rule); box-shadow: inset 0 -1px 0 var(--window-rule);
  }
  /* The line between two heads, a little wider than it looks, to drag. */
  .eld-win-grip {
    position: absolute; top: 0; right: 0; bottom: 0; width: 7px; z-index: 2;
    cursor: col-resize;
  }
  .eld-win-list td {
    height: 18px; padding: 0 6px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; cursor: default;
  }
  .eld-win-list tbody tr:nth-child(even) { background: var(--window-stripe); }
  .eld-win-list tbody tr.sel { background: var(--window-sel); color: var(--sel-ink); }
  /* Along the bottom: the two options above the search key at the left, OK
     in the middle, Abbrechen at the right edge — all three keys on one line. */
  .eld-win-foot {
    flex: none; display: grid; grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto; align-items: end; row-gap: 6px;
    padding: 10px 32px 10px 40px;
  }
  .eld-win-options { grid-column: 1 / -1; display: flex; gap: 32px; }
  /* Captioned like the search above them: in bold. */
  .eld-win-option {
    display: inline-flex; align-items: center; gap: 5px; cursor: default; font-weight: 700;
  }
  .eld-win-option input { width: 13px; height: 13px; margin: 0; }
  /* A key of the window, drawn like a key of the sheet: white, the sheet's
     thin edge, corners just rounded — without the white frame inside it,
     which on a white key would be nothing — and under the pointer the edge
     turns blue and a hair wider, the same blue as on the sheet. */
  .eld-win-key {
    min-width: 75px; height: 23px; padding: 0 10px;
    font-family: var(--window-font); font-size: 12px; color: var(--ink);
    background: var(--window);
    border: 1px solid var(--line); border-radius: 2px; cursor: default;
  }
  .eld-win-key:hover {
    border-color: var(--window-hover-edge);
    box-shadow: inset 0 0 0 0.5px var(--window-hover-edge);
  }
  .eld-win-key:active { background: var(--face); }
  .eld-win-key.find { grid-column: 1; justify-self: start; }
  /* The key Enter presses: ringed in blue. */
  .eld-win-key.ok {
    grid-column: 2; border-color: var(--window-hover-edge);
    box-shadow: inset 0 0 0 1px var(--window-hover-lo);
  }
  .eld-win-key.cancel { grid-column: 3; justify-self: end; }

  /* A message box of that system (TooShort): the dialog's frame and title,
     white inside, the i beside the sentence and Ok under it in the middle.
     Over the Einsatzorte window, should that be open. */
  .eld-modal.notice { z-index: 1100; }
  /* As wide as what it says — the title, the sign and the sentence — and no
     wider, the way that system sizes a message box. */
  .eld-win.eld-notice {
    width: max-content; max-width: 92vw; height: auto; background: var(--window);
  }
  .eld-notice .eld-win-title { background: var(--window); border-radius: 6px 6px 0 0; }
  .eld-notice-body {
    display: flex; align-items: center; gap: 18px; padding: 16px 28px 22px;
    font-size: 12px; line-height: 1.4;
  }
  .eld-info { flex: none; }
  .eld-info .hi { stop-color: var(--window-info-hi); }
  .eld-info .lo { stop-color: var(--window-info-lo); }
  .eld-info .disc { stroke: var(--window-info-edge); stroke-width: 1; }
  .eld-info .dot { fill: var(--window); }
  .eld-notice-keys { display: flex; justify-content: center; padding: 0 0 14px; }
  /* Kein passender Eintrag, on leaving a box: the warning sign, the lines of
     the question centred beside it, Ok and Abbrechen side by side. */
  .eld-warn .hi { stop-color: var(--window-warn-hi); }
  .eld-warn .lo { stop-color: var(--window-warn-lo); }
  .eld-warn .sign { stroke: var(--window-warn-edge); stroke-width: 1; stroke-linejoin: round; }
  .eld-warn .mark { fill: var(--ink); }
  .eld-unknown-text { flex: 1; display: flex; flex-direction: column; align-items: center;
                      text-align: center; font-size: 13px; }
  .eld-unknown-keys { gap: 14px; }
  .eld-unknown-keys .eld-win-key { min-width: 92px; }
  /* Kein passender Eintrag: the query in a group box, the sentence under it,
     three keys along the bottom — left, middle and right, the first one
     holding the keyboard (ringed). */
  .eld-win.eld-nf { width: min(640px, 92vw); }
  .eld-nf-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; }
  .eld-nf-group {
    margin: 0; padding: 6px 10px 10px;
    border: 1px solid var(--window-rule); border-radius: 3px;
  }
  .eld-nf-group legend { padding: 0 3px; font-size: 12px; }
  .eld-nf-q {
    display: block; box-sizing: border-box; width: 100%; height: 48px; margin-top: 4px;
    padding: 3px 4px; resize: none; overflow-y: scroll;
    font-family: var(--window-font); font-size: 12px; color: var(--ink);
    background: var(--window); border: 1px solid var(--window-edge);
    box-shadow: inset 1px 1px 0 var(--window-rule);
  }
  /* With the caret in it, in the colour of every box that has it. */
  .eld-nf-q:focus { background: var(--field-focus); outline: none; }
  /* The Storno-Grund (VoidReason): a box of many lines to write the reason
     in, and OK and Abbrechen side by side at the right edge under it. */
  .eld-win.eld-void { width: min(500px, 92vw); height: auto; background: var(--window); }
  .eld-void .eld-win-title { background: var(--window); border-radius: 6px 6px 0 0; }
  .eld-void-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 12px 12px; }
  .eld-nf-q.eld-void-q { height: 200px; margin-top: 0; }
  .eld-void-keys { display: flex; justify-content: flex-end; gap: 10px; }
  .eld-void-keys > .eld-win-key { min-width: 140px; height: 28px; font-weight: 700; }
  .eld-nf-text { font-size: 12px; }
  .eld-nf-keys { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .eld-nf-keys .eld-win-key { height: 26px; font-weight: 700; }

  /* ---- Weiterleitung: where the incident goes ----------------------------- */
  /* Three group boxes under each other — the tree, the remark, the four ways
     — and Abbrechen at the bottom right. The tree takes what the window has
     to spare, the four ways keep the empty band under them that window
     leaves there. */
  .eld-win.eld-fw { width: min(600px, 94vw); height: min(790px, 94vh); }
  .eld-fw-body {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px;
    padding: 0 10px 12px;
  }
  .eld-fw-group {
    margin: 0; padding: 2px 6px 6px; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--window-rule); border-radius: 3px;
  }
  .eld-fw-group legend { padding: 0 3px 0 0; margin-left: -4px; font-size: 13px; }
  .eld-fw-group.tree { flex: 1 1 290px; min-height: 120px; }
  .eld-fw-group.kinds { flex: 0 1 245px; min-height: 175px; }
  /* The tree: the yellow of a box of the record, every line as high as the
     next, cut at the right edge rather than wrapped, scrolling down and
     sideways. */
  .eld-fw-tree {
    flex: 1; min-height: 0; overflow: auto; padding: 1px 0;
    font-family: var(--font); font-size: 12px; color: var(--ink);
    background: var(--field); border: 1px solid var(--window-rule); outline: none;
    cursor: default; user-select: none;
  }
  .eld-fw-row {
    position: relative; height: 16px; display: flex; align-items: center;
    padding-left: 19px; white-space: nowrap;
  }
  .eld-fw-row.line { padding-left: 38px; }
  /* The dotted lines (mask.jsx sets where along the line they run): down
     from the line above to the middle of this one, on from there to the
     line below, through the whole of it, and across to the dot. */
  .eld-fw-up, .eld-fw-down, .eld-fw-through, .eld-fw-across {
    position: absolute; pointer-events: none;
  }
  .eld-fw-up { top: 0; height: 8px; border-left: 1px dotted var(--ink-dim); }
  .eld-fw-down { top: 8px; bottom: 0; border-left: 1px dotted var(--ink-dim); }
  .eld-fw-through { top: 0; bottom: 0; border-left: 1px dotted var(--ink-dim); }
  .eld-fw-across { top: 8px; width: 9px; border-top: 1px dotted var(--ink-dim); }
  /* The box in front of a group, over the lines: a minus while it is open,
     a plus while it is shut. */
  .eld-fw-box {
    position: absolute; top: 4px; z-index: 1; width: 9px; height: 9px; margin-left: -4px;
    box-sizing: border-box; border: 1px solid var(--line); background: var(--window);
  }
  .eld-fw-box::before, .eld-fw-box:not(.open)::after {
    content: ""; position: absolute; background: var(--ink);
  }
  .eld-fw-box::before { left: 1px; right: 1px; top: 3px; height: 1px; }
  .eld-fw-box:not(.open)::after { top: 1px; bottom: 1px; left: 3px; width: 1px; }
  .eld-fw-pick { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
  .eld-fw-dot { flex: none; }
  .eld-fw-dot .ball { fill: currentColor; }
  .eld-fw-dot .rays {
    fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1 1; opacity: .55;
  }
  .eld-fw-dot.node { color: var(--tree-node); }
  .eld-fw-dot.red { color: var(--tree-red); }
  .eld-fw-dot.green { color: var(--tree-green); }
  .eld-fw-label { padding: 0 2px; line-height: 15px; }
  /* The line selected: white while the tree does not have the keyboard,
     in the window's blue while it has. */
  .eld-fw-label.sel { background: var(--window); }
  .eld-fw-tree:focus .eld-fw-label.sel { background: var(--window-sel); color: var(--sel-ink); }
  /* The remark: a box of a few lines that always shows its scrollbar,
     grey while there is no ELP to write it about, and Speichern under it
     at the right. */
  .eld-nf-q.eld-fw-remark { height: 58px; margin-top: 2px; }
  .eld-nf-q.eld-fw-remark:disabled { background: var(--field-off); }
  .eld-fw-save { display: flex; justify-content: flex-end; padding-top: 6px; }
  .eld-fw-save .eld-win-key, .eld-fw-foot .eld-win-key { min-width: 116px; height: 26px; }
  /* The four ways: a key and what it does beside it, a row each. A key
     that cannot take what is selected is printed flat, without its frame
     — and a key that is dead takes no shade under the pointer. */
  .eld-fw-kinds {
    display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 12px 10px;
    align-items: start; padding-top: 6px; font-size: 13px;
  }
  .eld-fw-kind { min-width: 0; height: 28px; padding: 0 4px; font-size: 13px; }
  .eld-fw-kind.small { font-size: 11px; }
  .eld-fw-kind.bare { background: transparent; border-color: transparent; }
  .eld-fw-kind:disabled:hover { border-color: var(--line); box-shadow: none; }
  .eld-fw-kind.bare:disabled:hover { border-color: transparent; }
  .eld-fw-what { padding-top: 2px; line-height: 1.25; }
  .eld-fw-foot { display: flex; justify-content: flex-end; padding-top: 10px; }

  /* Textbaustein Anzeigen (TextBlockWindow): the block's lines in a large
     greyed box with its scrollbar always there, the name under it in a
     greyed box ruled along its foot, Abbruch at the bottom right — ringed,
     it has the keyboard. Nothing in it takes the caret. */
  .eld-win.eld-tb { width: min(730px, 94vw); height: auto; }
  .eld-tb-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 12px; }
  .eld-tb-text {
    display: block; box-sizing: border-box; width: 100%; height: 360px; margin: 0;
    padding: 3px 4px; resize: none; overflow-y: scroll; outline: none; cursor: default;
    font-family: var(--window-font); font-size: 13px; line-height: 1.5; color: var(--ink);
    background: var(--field-off);
    border: 1px solid var(--window-edge); box-shadow: inset 1px 1px 0 var(--ink);
  }
  .eld-tb-name { display: flex; align-items: center; gap: 12px; font-size: 13px; }
  .eld-tb-name-box {
    flex: 1; min-width: 0; height: 22px; padding: 1px 4px; outline: none; cursor: default;
    font-family: var(--window-font); font-size: 13px; color: var(--ink);
    background: var(--field-off); border: 0; border-bottom: 1px solid var(--ink-dim);
  }
  .eld-tb-keys { display: flex; justify-content: flex-end; }
  .eld-tb-keys > .eld-win-key { min-width: 142px; height: 30px; font-weight: 700; }

  /* ---- Patientendaten: a window of boxes ---------------------------------- */
  /* The dialog's grey face, the patient of the incident in a white pane on
     the left, group boxes on the right, the remark across the foot and the
     three keys under it, at the right. The boxes are the sheet's own — white
     where the window draws white (the patient, the transport), yellow where
     it draws yellow (the Zielort) — on rows that keep their captions in one
     column per group. A screen too small for it scrolls inside the window. */
  /* What is written in the window's boxes stands in the plain weight, not
     in the bold of the sheet's — the date boxes and the lookups too. */
  .eld-pw .eld-in { font-weight: 400; }
  .eld-pw-body {
    flex: 1; min-height: 0; overflow: auto;
    display: grid; grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto; gap: 8px 12px; padding: 4px 10px 0;
  }
  .eld-pw-side { display: flex; flex-direction: column; gap: 10px;
                 min-height: 0; padding-bottom: 6px; }
  .eld-pw-tree { align-self: stretch; flex: 1; padding: 6px 12px; background: var(--window); }
  .eld-pw-node {
    position: relative; display: flex; align-items: center; gap: 4px; height: 18px;
    white-space: nowrap;
  }
  .eld-pw-twig { flex: none; width: 10px; border-top: 1px solid var(--ink-dim); }
  /* The tree folded open: a box with a minus in front of the incident, and
     the patient hung under it on a dotted elbow. */
  .eld-pw-fold {
    flex: none; position: relative; width: 9px; height: 9px; box-sizing: border-box;
    border: 1px solid var(--ink-dim); background: var(--window);
  }
  .eld-pw-fold::after {
    content: ""; position: absolute; left: 1px; right: 1px; top: 3px;
    border-top: 1px solid var(--ink);
  }
  /* The dotted line from the box to the incident's number, and from under
     the box down and across to the patient: the box's middle is 4 pixels in,
     its foot half a pixel under the middle of the line. */
  .eld-pw-dash { flex: none; width: 5px; margin-left: -4px; border-top: 1px dotted var(--ink-dim); }
  .eld-pw-node.child { padding-left: 17px; }
  .eld-pw-node.child::before {
    content: ""; position: absolute; left: 4px; top: -4px; width: 9px; height: 13px;
    border-left: 1px dotted var(--ink-dim); border-bottom: 1px dotted var(--ink-dim);
  }
  .eld-pw-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .eld-pw-label { cursor: default; }
  /* A context menu of that system: where the right click was, the grey of
     the dialog in a thin frame with a shadow, its line in the blue of a
     selected row under the pointer. */
  .eld-menu-pop {
    position: fixed; z-index: 1200; min-width: 170px; padding: 2px;
    background: var(--window-face); border: 1px solid var(--window-edge);
    box-shadow: 2px 2px 4px var(--window-shadow);
  }
  .eld-menu-pop-item {
    display: block; width: 100%; padding: 3px 22px 3px 26px; text-align: left;
    font: inherit; color: var(--ink); background: transparent; border: 0; cursor: default;
  }
  .eld-menu-pop-item:hover, .eld-menu-pop-item:focus {
    background: var(--window-sel); color: var(--sel-ink); outline: none;
  }
  /* A group box: its title at the top left, in the line round it. */
  .eld-pw-group {
    --lead: 128px;
    margin: 0; padding: 4px 8px 8px; min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--window-rule); border-radius: 3px;
  }
  .eld-pw-group legend { padding: 0 3px; }
  .eld-pw-row { display: flex; align-items: center; gap: 6px; min-height: 22px; min-width: 0; }
  .eld-pw-cap { flex: none; white-space: nowrap; }
  .eld-pw-cap.lead { width: var(--lead); }
  /* The words that window sets heavier: IVENA PZC, and the Zielort's
     captions — in the half-bold of the keys rather than the sheet's bold, at
     the size of every caption of the sheet. */
  .eld-pw-cap.strong, .eld-pw-group.strong .eld-pw-cap {
    font-family: 'Segoe UI', var(--font); font-weight: 600; font-size: 12px;
  }
  .eld-pw-group.strong .eld-pw-cap.light { font-family: var(--window-font); font-weight: 400; }
  .eld-pw-box { min-width: 0; }
  /* A group drawn switched off (`off`): its boxes in the grey the sheet
     draws a box nobody types into — the date boxes too. */
  .eld-pw-box.off .eld-in { background: var(--field-off); }
  /* The remark the same, a shade lighter: a block of lines that size in the
     full grey reads as a hole in the window. */
  .eld-pw-remark.off .eld-f .eld-in {
    background: color-mix(in srgb, var(--field-off) 45%, var(--field-plain));
  }
  /* A key of the desk's own in the window (Patient trennen, Wahlhilfe,
     Zurücksetzen): the key of the block along the bottom of the sheet, as
     high and with as much air. */
  .eld-pw-key { min-width: 92px; padding: 2px 10px; line-height: 19px; }
  .eld-pw-box.check { flex: none; }
  .eld-pw-gap { flex: 1 1 0; }
  .eld-pw-dead { display: block; }
  .eld-pw-choice { display: inline-flex; align-items: center; gap: 4px; flex: none;
                   cursor: default; }
  .eld-pw-choice input { margin: 0; }
  /* A key that window draws without a frame: its caption in bold, standing
     in the row like a word (Bett, Entfernen, Wahlhilfe, Patienten Stammdat.). */
  /* A key of this window: its caption in the middle, a figure in front of
     it on the same line — no gap of its own, or a key whose caption is
     underlined at a letter ("OK") would be split at it. Bold, as every key
     of this window is. */
  .eld-pw .eld-win-key {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    font-weight: 700;
  }
  .eld-pw-glyph { flex: none; margin-right: 6px; }
  .eld-win-key.flat {
    min-width: 0; padding: 0 6px; background: transparent; border-color: transparent;
    font-weight: 700;
  }
  .eld-win-key.flat:hover:not(:disabled) { border-color: var(--window-hover-edge); }
  .eld-win-key.flat:disabled { cursor: default; }
  .eld-win-key.flat:disabled:hover { border-color: transparent; box-shadow: none; }
  .eld-pw-glyph .figure { fill: var(--ink-dim); }
  .eld-pw-glyph .card { fill: var(--window-rule); }
  /* The tabs: a frame in black, and inside it at the top left the strip of
     tabs in the old style — raised, lit along the top and the left, a dark
     edge at the right — with the page under them. That window has the one
     tab, Zielort, so the strip is that one tab. */
  .eld-pw-tabs {
    display: flex; flex-direction: column; min-width: 0; padding: 3px 8px 8px;
    border: 1px solid var(--ink); box-shadow: inset 1px 1px 0 var(--line);
  }
  .eld-pw-strip { display: flex; }
  .eld-pw-tab {
    padding: 1px 8px 2px; font: inherit; color: var(--ink); background: transparent;
    border: 0; border-top: 1px solid var(--edge-hi); border-left: 1px solid var(--edge-hi);
    border-right: 1px solid var(--ink); box-shadow: inset -1px 0 0 var(--line);
    border-radius: 2px 2px 0 0; cursor: default;
  }
  .eld-pw-tab:not(.on) { color: var(--ink-dim); }
  .eld-pw-panel { padding: 4px 0 0; }
  /* The remark: its caption over a block of lines as wide as the window. */
  .eld-pw-remark { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; }
  .eld-pw-remark .eld-pw-box { display: flex; }
  .eld-pw-remark textarea.eld-in { height: 110px; resize: none; }
  .eld-pw-keys {
    flex: none; display: flex; justify-content: flex-end; gap: 16px; padding: 12px 16px 12px;
  }
  .eld-pw-keys .eld-win-key, .eld-win-key.eld-pw-split {
    min-width: 130px; height: 26px; font-weight: 700;
  }
  /* None of them ringed: OK is a key like the two beside it in this window. */
  .eld-pw-keys .eld-win-key.ok { border-color: var(--line); box-shadow: none; }
  .eld-pw-keys .eld-win-key.ok:hover {
    border-color: var(--window-hover-edge);
    box-shadow: inset 0 0 0 0.5px var(--window-hover-edge);
  }
  /* Patient trennen: one of those keys, greyed out — that system switches
     it off while there is no patient to split off. */
  .eld-win-key.eld-pw-split { width: 100%; }
  .eld-win-key.eld-pw-split.off { opacity: .5; }
  .eld-win-key.eld-pw-split:disabled:hover { border-color: var(--line); box-shadow: none; }
  .eld-pw-keys .eld-win-key.save { margin-right: 80px; }
  .eld-nf-keys .wide {
    justify-self: stretch; border-color: var(--window-hover-edge);
    box-shadow: inset 0 0 0 1px var(--window-hover-lo);
  }
  .eld-nf-keys .take { justify-self: stretch; }
  .eld-nf-keys .cancel { justify-self: end; width: 78%; }
}