/* icd-onsite — the demo's screens, on top of base.css.
 *
 * The composer, the run, the result and the letter beside it. Nothing in
 * here is linked by a Klinik page; what the Klinik comes to share — the
 * letter view, the result partials — moves down to base.css when it does.
 */

/* --------------------------------------------------------- composer -- */

/* The optional inputs below the letter, and the basis strip under the LKF
   figures. */
/* The optional inputs below the composer. Two labelled groups rather than one
   flat grid: „bekannte Codes“ and „Aufenthalt“ answer different questions and
   only one of them is patient data. */
.extras__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.extras__group + .extras__group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.extras__label {
  font-size: 12.5px;
  font-weight: 600;
}

/* The group's own fields sit under its hint, not next to it. */
.extras__group .grid-3,
.extras__group .grid-4 {
  margin-top: 4px;
}

/* The basis strip under the LKF figures: what the points were computed against. */
.lkf__basis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.lkf__basislabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.basis {
  font-size: 12.5px;
  color: var(--muted);
}

/* Assumed values are dimmed rather than coloured: they are not a fault, they
   are simply not the case's own. The tag is what states it. */
.basis--assumed {
  color: var(--dim);
}

.basis__tag {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Its own line under the values, not another chip in the row. */
.lkf__basisnote {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--dim);
}

/* ------------------------------------------------------------- run head -- */

.runhead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.runhead__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.runhead__title {
  font-size: 14.5px;
  font-weight: 600;
}

.runhead__sub {
  font-size: 12.5px;
  color: var(--muted);
}

.spinner {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect a reduced-motion preference: the spinner is decoration, the steps
   below it carry the actual news. */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

/* Where the wait is actually signalled. The spinner is a footnote; the letter
   is what the person is waiting to watch change, so it is the letter that goes
   quiet. An overlay would have hidden the one thing worth looking at. */
.card[aria-busy="true"] .textarea {
  opacity: 0.4;
  transition: opacity 120ms ease;
}

/* The footer-strip variant. The run screen's spinner sits next to a 15px
   heading; this one sits in a 12.5px strip and would tower over it. */
.spinner--inline {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.badge--done {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge--failed {
  background: var(--error-soft);
  color: var(--error);
}

.elapsed {
  font-size: 13px;
  color: var(--muted);
  /* Digits must not shuffle the layout as the clock ticks. */
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- trail -- */

/* Not a log of what happened: the set of things happening. Every line here is
   work still open, several at once, and a line leaves when its work is done —
   so there is no connecting spine and no "the last one is the current one".

   Everything below is motion, and motion has a job here beyond looking alive:
   the first letter after a fresh GPU spends over a minute on one step, and a
   page that sits perfectly still for that long reads as a hang. */

.trail {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trail__step {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  /* `backwards` so a staggered step is invisible until its delay elapses
     rather than flashing at full opacity first. */
  animation: trail-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  /* Collapsing rather than vanishing: `remove()` alone yanks every line below
     up by a row, and on a list that changes this often the jump is the thing
     the eye follows instead of the words. */
  max-height: 4rem;
  overflow: hidden;
  transition:
    max-height 260ms ease,
    padding 260ms ease,
    opacity 200ms ease,
    transform 260ms ease;
}

.trail__step--leaving {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateX(6px);
}

/* A dot, and a ring leaving it. The ring is what carries a step that sits for
   a minute: the dot alone is a bullet, the ring is a heartbeat. */
.trail__step::before,
.trail__step::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.trail__step::before {
  background: var(--accent);
}

.trail__step::after {
  border: 1px solid var(--accent);
  animation: trail-ring 1900ms ease-out infinite;
}

/* A line on its way out stops asking for attention. */
.trail__step--leaving::before {
  background: var(--trail-dot);
}

.trail__step--leaving::after {
  animation: none;
  opacity: 0;
}

/* A slow sheen across the words, the way a thing that is thinking looks.
   Guarded: without background-clip the text would be transparent and the step
   would be invisible, which is a worse page than one that does not shimmer. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .trail__step:not(.trail__step--leaving) .trail__text {
    background-image: linear-gradient(
      100deg,
      var(--ink) 0%,
      var(--ink) 38%,
      var(--accent) 50%,
      var(--ink) 62%,
      var(--ink) 100%
    );
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: trail-sheen 3.4s ease-in-out infinite;
  }
}

@keyframes trail-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes trail-ring {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
  }
}

@keyframes trail-sheen {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* A note is a fact, not work: it keeps the dot and loses everything that means
   "this is happening now". The Hauptdiagnose lands here the moment it is known,
   twenty seconds before the result page, so it earns a little more ink than the
   lines it sits among. */
.trail__step--note {
  color: var(--ink);
  font-weight: 500;
}

.trail__step--note::before {
  background: var(--green);
}

.trail__step--note::after {
  animation: none;
  opacity: 0;
}

.trail__step--note .trail__text {
  background-image: none;
  color: var(--ink);
  animation: none;
}

/* A hairline sweeping the top edge of the card, so the page is visibly working
   even in the gap between two steps — or during the one long step at the
   start, when nothing else on screen changes for a minute. */
.card--running {
  position: relative;
  overflow: hidden;
}

.card--running::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-image: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 38% 100%;
  background-repeat: no-repeat;
  animation: card-sweep 2200ms cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes card-sweep {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

/* Someone who asked for less motion gets the words and the dot, and nothing
   that moves. The sheen has to give its colour back explicitly — a stopped
   gradient on transparent text is an empty line. */
@media (prefers-reduced-motion: reduce) {
  .trail__step,
  .trail__step::after,
  .card--running::before {
    animation: none;
  }

  .card--running::before {
    display: none;
  }

  .trail__step {
    transition: opacity 200ms ease;
  }

  .trail__step:not(.trail__step--leaving) .trail__text {
    background-image: none;
    color: var(--ink);
    animation: none;
  }
}

.trail__empty {
  font-size: 12.5px;
  color: var(--placeholder);
}

/* -------------------------------------------------------- found (live) -- */

/* The Nebendiagnosen as they arrive, above the trail of what is still running.
   Unlike a trail step this never leaves: it is an answer, and the same answer
   the result page shows — so it is the codelist's type, with the letter's own
   line under each code as the evidence for it. */

.found {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.found__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: trail-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.found__code-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

.found__code-line .code {
  font-size: 16px;
}

/* The quoted diagnosis line, set apart by a rule rather than quotation marks:
   the text is the letter's, and a mark inside it would read as part of it. */
.found__quote {
  border-left: 2px solid var(--border);
  padding-left: 9px;
  font-size: 12.5px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .found__item {
    animation: none;
  }
}

/* --------------------------------------------------------------- result -- */

/* `.duo` lived here: the side-by-side pair of Nebendiagnosen and MEL-Codes.
   The MEL card is gone until MEL coding is its own project, so Nebendiagnosen
   is a plain full-width card and the wrapper had nothing left to lay out. */

.code-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}

.code--display {
  font-size: 32px;
  letter-spacing: -0.02em;
}

.code-desc {
  font-size: 16px;
  color: var(--ink-soft);
}

.codelist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.codelist__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

.codelist__item .code {
  font-size: 16px;
}

.codelist__desc {
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* Only ever rendered for a flag that is set, so it reads as a statement about
   the case rather than as a field that happens to be false. */
.pill--note {
  margin-top: 10px;
}

/* ------------------------------------------------------------------ lkf -- */

.lkf__figures {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 22px;
}

.lkf__figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lkf__label {
  font-size: 12px;
  color: var(--muted);
}

.lkf__value {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lkf__divider {
  width: 1px;
  height: 38px;
  background: var(--border-faint);
}

.lkf__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.count {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border-faint);
  border-radius: 20px;
  font-size: 12.5px;
  color: var(--muted);
}

.count--warn {
  background: var(--amber-soft);
  border-color: var(--amber-border);
  color: var(--amber);
  font-weight: 500;
}

.count--error {
  background: var(--error-soft);
  border-color: var(--error-border);
  color: var(--error);
  font-weight: 500;
}

.lkf__messages {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-faint);
  list-style: none;
}

.lkf__message {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 22px;
  border-bottom: 1px solid var(--border-hair);
}

.lkf__message:last-child {
  border-bottom: 0;
}

/* The same pill as the totals above, at row scale — a row and the count it is
   part of should not be two different shapes. */
.count--sm {
  flex-shrink: 0;
  justify-content: center;
  min-width: 68px;
  padding: 2px 9px;
  font-size: 11.5px;
}

.lkf__code {
  flex-shrink: 0;
  width: 62px;
  font-size: 12px;
  color: var(--muted);
}

.lkf__text {
  font-size: 13px;
}

@media (max-width: 720px) {
  .lkf__figures {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ------------------------------------------------------- anonymisierung -- */

/* The chip next to "Brieftext" that says whether the text in the box has been
   through the anonymizer. Three states, one shape, always in the same place —
   the point is that it is checkable at a glance, not that it is decorative. */
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--ground);
  color: var(--muted);
  font-size: 12px;
}

/* The green pair is new in the system: green existed only as ink (--green),
   never as a surface. */
.state--done {
  border-color: #CBE0D2;
  background: #EDF5F0;
  color: var(--green);
  font-weight: 500;
}

.state--error {
  border-color: var(--error-border);
  background: var(--error-soft);
  color: var(--error);
  font-weight: 500;
}

/* Same words as the plain chip, said louder: "nicht anonymisiert" is a neutral
   fact before you press the button and a warning after. */
.state--warn {
  border-color: var(--amber-border);
  background: var(--amber-soft);
  color: var(--amber);
  font-weight: 500;
}

.card--error {
  border-color: var(--error-border);
}

/* One step down from card--error, and the same idea: the card itself carries
   the state, so the warning is not one banner shouting on an otherwise calm
   screen. */
.card--warn {
  border-color: var(--amber-border);
}

/* The strip under the textarea. It carries the whole anonymization interaction,
   so it is a row with the explanation on the left and the actions on the
   right — in all three states, so nothing moves as the state changes. */
.anonbar {
  display: flex;
  align-items: center;
  gap: 11px;
}

.anonbar__icon {
  flex-shrink: 0;
}

.anonbar__text {
  font-size: 12.5px;
  color: var(--muted);
}

.anonbar__text strong {
  font-weight: 600;
  color: var(--ink);
}

.card__footer--done {
  background: var(--accent-soft);
  border-top-color: var(--accent-border);
}

.card__footer--error {
  background: var(--error-soft);
  border-top-color: var(--error-border);
}

.card__footer--warn {
  background: var(--amber-soft);
  border-top-color: var(--amber-border);
}

.anonbar__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.anonbar__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--error);
}

/* An outlined button: the anonymize and retry actions are deliberately not the
   filled accent, because "Kodierung starten" below them is, and there must be
   exactly one obvious next step on the screen. */
.button--outline {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
  padding: 8px 15px;
  font-size: 13px;
}

.button--outline:hover {
  background: var(--accent-soft);
}

.button--outline-error {
  border-color: var(--error);
  color: var(--error);
}

.button--outline-error:hover {
  background: var(--surface);
  border-color: var(--error);
}

/* The one thing on this screen louder than the composer: the box saying it has
   not checked what is about to leave it. Amber, not red — nothing has gone
   wrong, and the way forward is still open. */
.warn-banner {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  /* The one heavy rule on the screen. A left bar rather than a thicker border
     all round: it reads as a callout instead of as another card. */
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-card);
  color: var(--amber);
}

.warn-banner__icon {
  flex-shrink: 0;
  margin-top: 3px;
}

.warn-banner__lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.warn-banner__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.warn-banner__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ vergleich -- */

/* The two marks are the same chip in the two system tints: amber for "found
   here", petrol for "replaced by this". */
/* The negative inline margin is load-bearing: without it the chip's padding
   pushes the comma after a name away from it, and the letter reads as though it
   had a space there. This way the chip has room inside and takes none outside. */
.hit,
.ph {
  padding: 1px 4px;
  margin-inline: -4px;
  border-radius: 4px;
}

.hit {
  border: 1px solid var(--amber-border);
  background: var(--amber-soft);
  color: inherit;
}

.ph {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* The coder's evidence in the letter beside the result: the stretch it quoted
   for a code, underlined rather than tinted, because a tint in this text means
   „ersetzt“ (`.ph`). The codes are on the title, so hovering says which. Set on
   `mark` to undo the browser's yellow. */
.ev {
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
}

/* Column width, like everything else on the screen. It was briefly wider —
   two panes want the room — but a block that is broader than the card above it
   reads as misaligned rather than as roomy, and the panes are legible at half
   of 860px: about 52 characters a line, inside the comfortable measure. The
   tighter gutter below buys some of the width back. */

.compare__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 22px;
  border-top: 1px solid var(--border-faint);
}

.compare:not([open]) .legend {
  display: none;
}

.legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

.legend__swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.legend__swatch--hit {
  border: 1px solid var(--amber-border);
  background: var(--amber-soft);
}

.legend__swatch--ph {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
}

/* The column heads carry the actual argument of this screen: what stays here
   and what goes out. */
.compare__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  background: var(--surface-sunk);
}

.compare__col {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
}

.compare__col:first-child {
  border-right: 1px solid var(--border);
}

.compare__colname {
  font-size: 13px;
  font-weight: 600;
}

.compare__colnote {
  font-size: 12px;
  color: var(--muted);
}

.compare__colnote--sent {
  color: var(--accent);
}

/* One grid row per line of the letter, both sides in the same row: a name and
   its placeholder wrap differently, and two independent columns would slide out
   of step further down a long letter. */
.compare__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  /* Bounded and self-scrolling: this sits above „Kodierung starten“, and a long
     letter would otherwise push the primary action off the screen. */
  max-height: 54vh;
  padding: 22px 0;
  font-size: 14px;
  line-height: 1.7;
  overflow-y: auto;
}

.compare__cell {
  min-height: 1.7em;
  padding: 0 18px;
  overflow-wrap: anywhere;
}

.compare__cell--left {
  border-right: 1px solid var(--border);
}

/* Narrow keeps both panes. Stacking them would interleave the letter line by
   line, and putting one under the other whole would lose the pairing that is
   the point of the view; a tighter gutter is the honest trade. */
@media (max-width: 900px) {
  .compare__col {
    padding: 13px 12px;
  }

  .compare__cell {
    padding: 0 12px;
  }

  .compare__body {
    font-size: 13px;
  }
}

/* ------------------------------------------------------- dropped files -- */

/* A Fall is files only (ONSITE_PLAN §15, docs/design/demo/Fall.dc.html), so
   the drop zone is the screen's first element, not a corner of a textarea. */
.stack--case {
  max-width: 980px;
}

.drop {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1.5px dashed var(--border-dashed);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color 160ms ease, background 160ms ease;
}

.drop:hover,
.drop--over {
  border-color: var(--accent-border);
  background: var(--surface-sunk);
}

.drop--over {
  border-color: var(--accent);
}

.drop__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.drop__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drop__title {
  font-size: 14px;
  font-weight: 600;
}

.drop__text {
  font-size: 12.5px;
  color: var(--muted);
}

/* Keyboard focus lands on the input, which is visually hidden — so the label
   has to wear the ring on its behalf. */
.drop label:focus-within {
  outline: 2px solid var(--accent-border);
  outline-offset: 1px;
}

.rejected {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -12px;
  font-size: 12.5px;
  color: var(--error);
}

/* One row per document: its format, its name, its kind, how far the
   anonymizer has got, and the way to take it out again. */
.docs {
  display: flex;
  flex-direction: column;
}

.doc {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 206px 214px 20px;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-hair);
}

.doc:last-child {
  border-bottom: none;
}

.doc__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.doc__file {
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.doc__kind {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.doc__route {
  font-size: 11.5px;
  color: var(--muted);
  padding-left: 2px;
}

.doc__anon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.doc__anon--done {
  color: var(--green);
}

.doc__anon--error {
  color: var(--error);
}

.doc__x {
  border: none;
  background: none;
  padding: 0;
  color: var(--placeholder);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
}

.doc__x:hover {
  color: var(--error);
}

/* Unset — „Art erkennen“ — is the dashed default: the model decides when the
   case is coded. A kind a person chose is solid, because it is what is sent. */
.kindsel {
  padding: 2px 6px;
  border: 1px dashed var(--border-dashed);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}

.kindsel--set {
  border-style: solid;
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.ext {
  display: inline-block;
  width: 36px;
  padding: 3px 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-sunk);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.04em;
}

.ext--pdf {
  color: var(--error);
  border-color: var(--error-border);
  background: var(--error-soft);
}

/* One segment per document in the card header, coloured by where it is. */
.segbar {
  display: flex;
  gap: 4px;
  width: 180px;
  height: 5px;
}

.segbar__seg {
  flex: 1;
  border-radius: 3px;
  background: var(--border-faint);
  position: relative;
  overflow: hidden;
}

.segbar__seg--busy {
  background: var(--accent-border);
}

.segbar__seg--busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sweep 1100ms ease-in-out infinite;
  /* The poll swaps the bar every second; `eingabe.js` sets the phase so the
     sweep carries on instead of starting over. */
  animation-delay: var(--phase, 0ms);
}

/* A document that just arrived slides into the list — once: `eingabe.js`
   sets this only on a row it has not seen, since the list is re-rendered by
   every poll. */
.doc--in {
  animation: doc-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

@keyframes doc-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* „wird anonymisiert …“ shimmers while it is true. Guarded like the trail's
   sheen: without background-clip the words would be transparent. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .shimmer {
    background-image: linear-gradient(
      90deg,
      var(--muted) 0%,
      var(--muted) 40%,
      var(--accent) 50%,
      var(--muted) 60%,
      var(--muted) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 1600ms linear infinite;
    animation-delay: var(--phase, 0ms);
  }
}

@keyframes shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc--in,
  .segbar__seg--busy::after {
    animation: none;
  }

  .shimmer {
    animation: none;
    background: none;
    color: inherit;
  }
}

.segbar__seg--done {
  background: var(--green);
  opacity: 0.7;
}

.segbar__seg--error {
  background: var(--error);
}

@keyframes sweep {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.casefoot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-faint);
  background: var(--surface-sunk);
  font-size: 12.5px;
  color: var(--muted);
}

/* The Vergleich over n documents: a rail to pick one, its two versions
   beside it. */
.vg {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  border-top: 1px solid var(--border-faint);
}

.vg__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-right: 1px solid var(--border-faint);
  background: var(--surface-sunk);
}

.vg__doc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}

.vg__doc:hover {
  background: var(--surface);
}

.vg__doc--on {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}

.vg__docname {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vg__doccount {
  font-size: 11.5px;
  color: var(--dim);
}

.vg .compare__cols {
  border-top: none;
}

.vg .compare__body {
  max-height: 340px;
}

/* A kind, as a badge. One tint each, quiet. */
.kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.kind--tab {
  padding: 0 6px;
  font-size: 11px;
}

.kind--dx {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.kind--op {
  background: #F2EFF7;
  border-color: #DDD5EA;
  color: #56467E;
}

.kind--labor {
  background: #EEF5F0;
  border-color: #CBE0D2;
  color: var(--green);
}

.kind--bild {
  background: #F3F3F1;
  border-color: var(--border);
  color: var(--ink-soft);
}

.kind--patho {
  background: #F7EEF0;
  border-color: #E8D0D6;
  color: #8A3F52;
}

.kind--funktion {
  background: #EEF2F7;
  border-color: #D0DAE8;
  color: #3F5878;
}

.kind--therapie {
  background: #F7F2EA;
  border-color: #E6D8C0;
  color: #7A5A2A;
}

.kind--konsil {
  background: #EDF5F5;
  border-color: #C9E0E0;
  color: #2F6B6B;
}

.kind--none {
  background: var(--surface);
  border-color: var(--amber-border);
  border-style: dashed;
  color: var(--amber);
}

@media (max-width: 900px) {
  .doc {
    grid-template-columns: 36px minmax(0, 1fr) 20px;
  }

  .doc__kind,
  .doc__anon {
    grid-column: 2 / 3;
  }

  .vg {
    grid-template-columns: minmax(0, 1fr);
  }

  .vg__rail {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-faint);
  }
}

/* Where „Kodierung starten“ would be, when it must not be offered. Quieter than
   .warn-banner on purpose: that one is about a letter that could leak, this one
   is about a machine that is not up. Nothing here is anybody's mistake. */
.blocked {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--amber);
}

.blocked__lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.blocked__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.blocked__text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ------------------------------------------------- letter beside result -- */

/* The result page is the one screen wider than the column: the letter needs
   about 80 characters a line at the composer's size, and the result keeps the
   640px it has everywhere else. */
.stack--wide {
  max-width: 1360px;
}

/* The Ergebnis (docs/design/demo/Ergebnis16.dc.html), built for a Fall with
   many codes on a laptop. It fits the window, as Klinik's workspace does: the
   page never scrolls, the code list and the document scroll inside
   themselves, so nothing — „Neuer Fall“ least of all — sits below the fold. */
body:has(.rs-grid) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body:has(.rs-grid) > .topbar {
  flex-shrink: 0;
}

body:has(.rs-grid) > .page {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 14px;
  padding-bottom: 16px;
}

.rs {
  gap: 12px;
  min-height: 0;
}

.rs > .rs-bar,
.rs > .panel {
  flex-shrink: 0;
}

/* The Fall in one line: done, how many of each, and the way on. */
.rs-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 9px 12px 9px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.rs-bar__what {
  display: flex;
  align-items: center;
  gap: 11px;
}

.rs-bar__title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rs-bar__sub {
  font-size: 12.5px;
  color: var(--muted);
}

.rs-tally {
  display: flex;
  border-left: 1px solid var(--border-faint);
}

.rs-tally__item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 18px;
  border-right: 1px solid var(--border-faint);
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.rs-tally__item:hover {
  color: var(--accent);
}

.rs-tally__n {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rs-tally__item--quiet .rs-tally__n {
  color: var(--muted);
}

.rs-bar__note {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
}

/* Codes left, the document right: the codes are the result, the document
   the evidence for them. */
.rs-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.rs-grid > .card {
  min-height: 0;
}

.rs-scroll,
.rs-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rs-scroll {
  padding-bottom: 6px;
}

.rs-sec + .rs-sec {
  border-top: 1px solid var(--border-faint);
}

/* Each section opens with its count, and the head stays while the list
   scrolls under it. */
.rs-sec__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 18px 4px;
  background: var(--surface);
}

.rs-sec__n {
  min-width: 2ch;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rs-sec__n--quiet {
  color: var(--muted);
}

.rs-sec__t {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rs-sec__meta {
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-sec__head .pill {
  margin-left: auto;
  align-self: center;
}

/* One code, one line: where it came from, the code, the text with its
   general part first, then side and count. The open state adds the whole
   catalog text and the Beleg on a second line. */
.rs-row {
  display: grid;
  grid-template-columns: 116px 9ch minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 30px;
  padding: 0 18px;
}

.rs-row--group {
  border-top: 1px solid var(--border-hair);
}

.rs-row .code {
  font-size: 13.5px;
  white-space: nowrap;
}

.rs-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--dim);
}

.rs-role--hd {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.rs-title {
  display: flex;
  min-width: 0;
  font-size: 13.5px;
  white-space: nowrap;
}

/* Both parts give way in proportion to their length, so neither shrinks to
   a stub: the head says what kind of procedure, the tail tells the codes of
   one group apart. The whole text is on the row's title and in its open
   state. */
.rs-t1 {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-t2 {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}

.rs-t2::before {
  content: "›";
  margin: 0 7px;
  color: var(--dim);
}

.rs-tags {
  display: flex;
  gap: 6px;
}

.rs-tag {
  padding: 0 6px;
  border: 1px solid var(--border-faint);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.rs-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
}

.rs-doc__no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.rs-doc:hover .rs-doc__no {
  color: var(--accent);
}

.rs-detail {
  display: none;
  grid-column: 3 / -1;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: normal;
}

.rs-detail__long {
  color: var(--ink-soft);
}

.rs-detail__beleg {
  color: var(--muted);
}

.rs-detail__beleg q {
  color: var(--ink-soft);
}

.rs-row--missing .rs-missing {
  grid-column: 2 / -1;
  font-size: 13px;
  color: var(--placeholder);
}

.rs-none {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 28px;
  padding: 0 18px;
  font-size: 13px;
  color: var(--muted);
}

.rs-lkf .lkf__figures {
  padding-top: 14px;
}

/* The document: a chip per document, never a scrolling row of tabs —
   number, how many codes came from it, kind. */
.rs-strip {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-faint);
}

.rs-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 0 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
}

.rs-chip:hover {
  background: var(--surface-sunk);
}

.rs-chip--on,
.rs-chip--on:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.rs-chip__top {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.rs-chip__no {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
}

.rs-chip__n {
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-align: center;
}

.rs-chip--on .rs-chip__n {
  background: var(--surface);
}

.rs-chip__n--none,
.rs-chip--on .rs-chip__n--none {
  background: none;
  color: var(--dim);
}

.rs-chip__kind {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The chip a code in another document brought the reader to, said once. */
.rs-chip--flash {
  animation: rs-chip-flash 900ms ease;
}

@keyframes rs-chip-flash {
  0%,
  100% {
    box-shadow: none;
  }
  30% {
    box-shadow:
      0 0 0 3px var(--amber-soft),
      0 0 0 4px var(--amber-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-chip--flash {
    animation: none;
  }
}

.rs-dochead {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-faint);
  font-size: 12.5px;
  color: var(--muted);
}

.rs-dochead__file {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-docnote {
  margin: 12px 18px 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* Why the open document got no code — under the note on how it was read. */
.rs-docnote--nocode {
  margin-top: 4px;
  color: var(--ink-soft);
}

.rs-docpanel .letter__body {
  gap: 14px;
  padding: 12px 18px 20px;
  font-size: 13.5px;
  line-height: 1.6;
}

.letter__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 28px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}

.letter__sec {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.letter__h {
  font-weight: 600;
}

.letter__sec--diagnosis {
  gap: 6px;
  padding: 12px 14px;
  background: var(--ground);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 8px;
}

/* A code and its passage, paired by `ergebnis.js`: hovering either lights the
   other, a click holds it. Amber, the colour the legend gives a passage. */
.ev[data-codes] {
  cursor: pointer;
}

.ev--on {
  background: var(--amber-soft);
  box-shadow:
    0 0 0 2px var(--amber-soft),
    0 0 0 3px var(--amber-border);
  text-decoration: none;
}

.crow {
  cursor: pointer;
}

.crow--hover {
  background: var(--surface-sunk);
}

/* The selected row opens: the whole catalog text and the Beleg. */
.crow--on,
.crow--on.crow--hover {
  background: var(--amber-soft);
  box-shadow: inset 2px 0 0 var(--amber-border);
}

.crow--on .rs-detail {
  display: flex;
}

.legend--ev {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
}

.legend--ev .legend__swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
}

.lane__sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* One column below the width for two, codes first: the page scrolls again
   and everything shows whole — a window-high list would cover half a
   tablet's screen. */
@media (max-width: 1100px) {
  body:has(.rs-grid) {
    display: block;
    height: auto;
    overflow: visible;
  }

  .rs-bar {
    flex-wrap: wrap;
  }

  .rs-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .rs-scroll,
  .rs-text {
    overflow-y: visible;
  }

  .rs-sec__head {
    position: static;
  }
}

/* ---------------------------------------------------------- Lauf lanes -- */

/* The run as lanes (Fall canvas): the diagnoses on the left, one lane per
   document on the right. static/demo/lauf.js fills them. */

.lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.lanecol {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lane {
  position: relative;
}

.lane__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-faint);
  min-width: 0;
}

.lane__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.lane__file {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--dim);
}

.lane__state {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lane__state--done {
  color: var(--green);
  font-weight: 500;
}

/* The hairline that says a lane is working, even between two steps. */
.lane__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
}

.lane__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sweep 1400ms ease-in-out infinite;
}

.lane__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 18px;
}

.lane__body--tight {
  gap: 10px;
  padding: 12px 18px 14px;
}

.lane__part {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lane__part .found {
  margin: 0;
}

/* A document nobody codes, or one read in the diagnoses lane: a row, not a
   lane. */
.lane--quiet .lane__body {
  padding-top: 10px;
  padding-bottom: 12px;
}

.lane__quiet {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}

.bigcode {
  display: flex;
  align-items: baseline;
  gap: 14px;
  animation: pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* What the agent is doing this second: the words, and a search's hits as
   chips under them. */
.activity {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--accent-border);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transition: opacity 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.activity--idle {
  opacity: 0.55;
  border-color: var(--border-faint);
  box-shadow: none;
}

.activity__label {
  font-size: 12.5px;
  color: var(--ink);
}

.activity__label--in {
  animation: trail-in 260ms ease backwards;
}

.activity__hits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hit {
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--surface-sunk);
  animation: trail-in 240ms ease backwards;
}

/* The lens: a window onto the document, the passage being coded lit. It
   scrolls itself to the newest one; the fade at the foot says there is more. */
.lens {
  position: relative;
  max-height: 148px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 13px 18px;
  border: 1px solid var(--border-faint);
  border-radius: 8px;
  background: var(--surface-sunk);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dim);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
}

.lens__line {
  border-radius: 3px;
  transition: color 240ms ease, background-color 400ms ease;
}

/* The amber sweeps in from the left, as a marker pen would. */
.lens__line--now {
  color: var(--ink);
  background: linear-gradient(var(--amber-soft), var(--amber-soft)) no-repeat;
  background-size: 0% 100%;
  box-shadow: inset 2px 0 0 var(--amber-border);
  animation: lens-read 900ms ease-out forwards;
}

@keyframes lens-read {
  to {
    background-size: 100% 100%;
  }
}

/* Coded: stays findable, no longer the thing to look at. */
.lens__line--read {
  color: var(--ink-soft);
  box-shadow: inset 2px 0 0 var(--border);
}

/* The whole document being read at once — no line is the one — so the text
   shimmers as a whole, and a lit passage stays lit through it. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lens--reading .lens__line:not(.lens__line--now) {
    background-image: linear-gradient(
      90deg,
      var(--dim) 0%,
      var(--dim) 40%,
      var(--accent) 50%,
      var(--dim) 60%,
      var(--dim) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 2200ms linear infinite;
  }
}

@media (max-width: 1100px) {
  .lanes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lane__bar::after,
  .bigcode,
  .activity__label--in,
  .hit {
    animation: none;
  }

  .lens__line--now {
    animation: none;
    background-size: 100% 100%;
  }

  .lens--reading .lens__line:not(.lens__line--now) {
    animation: none;
    background: none;
    color: var(--dim);
  }
}