/*
 * Settings "Zones and devices" and "Service", their sheets and the manual
 * mode banner (pages/settings/service-*.js, sheets/service/, shell/manual-banner.js).
 * Reads tokens only; animates transform and opacity only.
 */
@layer pages {
  /* ------------------------------------------------------------------
     Rows of a service group: heading (+ info), status lines, actions on
     the right (kiosk), content and inline error across the width
     ------------------------------------------------------------------ */
  .svc-rows {
    display: flex;
    flex-direction: column;
  }

  .svc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) 0;
    /* "Noch N Hinweise" on Today scrolls the notices row into view (F1). */
    scroll-margin-top: var(--space-2);
  }

  .svc-rows > .svc-row + .svc-row {
    border-top: 1px solid var(--hairline);
  }

  .svc-row-text {
    min-width: 0;
  }

  /* The info button's hit area reaches 14 px past its icon (negative
     margin): the value keeps that distance; on narrow rows it wraps under. */
  .svc-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-5);
  }

  /* Below a head with an info button the next target keeps clear of its
     48 px hit area (it reaches 14 px under the icon). */
  .svc-row-head:has(.info-button) {
    margin-bottom: var(--space-2);
  }

  .svc-row-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
    /* One row system in Settings: the same weight as .form-label. */
    font-weight: var(--weight-medium);
    font-variant-numeric: normal;
  }

  .svc-row-value {
    flex: none;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .svc-row-value[data-tone="warning"] {
    color: var(--warning);
  }

  .svc-row-value[data-tone="critical"] {
    color: var(--danger);
  }

  .svc-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .svc-actions-group {
    display: contents;
  }

  .svc-actions-group[hidden] {
    display: none;
  }

  .svc-row-body,
  .svc-row-error {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .svc-row-body:empty {
    display: none;
  }

  .svc-row-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-wrap: pretty;
  }

  .svc-row-error > .icon {
    flex: none;
    margin-top: 1px;
    color: var(--danger);
  }

  /* Status and hint lines (deviations get a tone and an icon). */
  .svc-line {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: 2px;
    color: var(--text-primary);
    text-wrap: pretty;
    font-variant-numeric: normal;
  }

  .svc-line > .meaning-icon {
    margin-top: 1px;
  }

  .svc-line[data-tone="hint"] {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .svc-line[data-tone="live"] {
    color: var(--accent);
    font-weight: var(--weight-medium);
  }

  .svc-line[data-tone="ok"] > .meaning-icon {
    color: var(--success);
  }

  .svc-line[data-tone="warning"] {
    color: var(--warning);
  }

  .svc-line[data-tone="critical"] {
    color: var(--danger);
  }

  .svc-row-progress {
    margin-top: 0;
  }

  /* ------------------------------------------------------------------
     Outputs of the control unit (devices-section.js)
     ------------------------------------------------------------------ */
  .svc-attention {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-3);
    color: var(--warning);
  }

  .svc-attention:empty {
    display: none;
  }

  .svc-boards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .svc-board-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .svc-board-status {
    color: var(--warning);
    font-weight: var(--weight-medium);
  }

  .svc-slots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .svc-slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--touch-min);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-primary);
    text-align: left;
  }

  .svc-slot-number {
    flex: none;
    min-width: 1.4em;
    color: var(--text-secondary);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  /* Many zone names start alike ("Rasen …"): two lines rather than an ellipsis. */
  .svc-slot-name {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 18px;
    overflow-wrap: break-word;
    hyphens: auto;
    font-variant-numeric: normal;
  }

  /* A free output: an empty place, outlined. */
  .svc-slot[data-kind="free"] {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--text-tertiary);
    color: var(--text-secondary);
  }

  .svc-slot[data-kind="incomplete"],
  .svc-slot[data-kind="orphan"] {
    background: var(--surface-warning);
  }

  .svc-slot:disabled {
    color: var(--text-secondary);
  }

  .svc-slot[data-mode="disabled"] .svc-slot-name {
    color: var(--text-secondary);
  }

  /* The station's signal line (bars: components/signal-bars.js). */
  .svc-signal {
    align-items: center;
  }

  /* ------------------------------------------------------------------
     Notices (service-section.js)
     ------------------------------------------------------------------ */
  .svc-notices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .svc-notices:empty {
    display: none;
  }

  .svc-notices-body > * + * {
    margin-top: var(--space-2);
  }

  .svc-notice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2) 0 var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .svc-notice-open {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--touch-min);
    padding: var(--space-2) 0;
    color: var(--text-primary);
    text-align: left;
  }

  .svc-notice-open > .icon {
    flex: none;
    margin-top: 1px;
    color: var(--warning);
  }

  .svc-notice[data-tone="critical"] .svc-notice-open > .icon {
    color: var(--danger);
  }

  .svc-notice-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .svc-notice-title {
    font-weight: var(--weight-medium);
    font-variant-numeric: normal;
  }

  .svc-notice-body {
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  .svc-notice-when {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  /* Where the tap leads (the notice's sheet), calm, before "Bestätigen" (plan of 2026-10-10, group F);
     an acknowledged notice has the same at its end (group E). */
  .svc-notice-chevron {
    display: inline-flex;
    flex: none;
    align-self: center;
    margin-left: auto;
    color: var(--text-tertiary);
  }

  .svc-notice-ack {
    flex: none;
    background: var(--surface-3);
  }

  .svc-notice[data-acknowledged="true"] {
    background: transparent;
    padding-left: 0;
  }

  .svc-notice[data-acknowledged="true"] .svc-notice-open > .icon {
    color: var(--text-secondary);
  }

  .svc-disclosure {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0;
    background: transparent;
    color: var(--accent);
    font-weight: var(--weight-medium);
  }

  .svc-ack-actions {
    margin-top: var(--space-2);
  }

  .svc-versions {
    margin-top: 0;
  }

  /* ------------------------------------------------------------------
     Multiple choice rows (sheets/service/parts.js checkRow)
     ------------------------------------------------------------------ */
  .svc-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--space-2) 0;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
  }

  .svc-check-list > .svc-check + .svc-check,
  .svc-walk-item + .svc-walk-item {
    border-top: 1px solid var(--hairline);
  }

  /* The selected mark is drawn here: the check icon means "fine". The
     empty circle reads at least 3:1 against the card in both themes
     (--border-strong is only set for "more contrast"). */
  .svc-check-box {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 2px var(--text-tertiary);
  }

  .svc-check[aria-checked="true"] .svc-check-box,
  .svc-check[aria-checked="mixed"] .svc-check-box {
    background: var(--accent);
    box-shadow: none;
  }

  .svc-check[aria-checked="true"] .svc-check-box::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid var(--on-accent);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
  }

  .svc-check[aria-checked="mixed"] .svc-check-box::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 11px;
    height: 2.5px;
    border-radius: 1px;
    background: var(--on-accent);
  }

  .svc-check-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .svc-check-label {
    font-variant-numeric: normal;
  }

  .svc-check-detail,
  .svc-check-aside {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .svc-check-aside {
    flex: none;
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-variant-numeric: tabular-nums;
  }

  .svc-check-all {
    font-weight: var(--weight-medium);
  }

  .svc-soil-reset .svc-check-all {
    border-bottom: 1px solid var(--hairline);
  }

  .svc-player-intro {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  /* ------------------------------------------------------------------
     Output chips (the zone wizard's summary, sheets/zone-wizard/summary.js)
     ------------------------------------------------------------------ */
  .svc-outputs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .svc-output {
    min-width: 64px;
    height: var(--control-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-control);
    background: var(--surface-2);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .svc-output[aria-checked="true"] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: var(--weight-semibold);
  }

  /* ------------------------------------------------------------------
     Commissioning player (sheets/service/commissioning-sheet.js): tall;
     the player left, the zones right (kiosk); stacked on phones
     ------------------------------------------------------------------ */
  .sheet.svc-player-sheet,
  .sheet.svc-diag-sheet {
    width: min(880px, 100%);
    height: calc(100dvh / var(--display-zoom) - var(--header-height) - var(--space-2));
  }

  .svc-player-sheet-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-4);
  }

  .svc-player-main,
  .svc-player-list {
    min-width: 0;
  }

  .svc-player-list > .section-key {
    margin-bottom: var(--space-1);
  }

  /* Wide sheets: player and zones side by side, each column scrolls on its
     own, so the transport controls never scroll away with a long list. */
  @container app (min-width: 700px) {
    .sheet.svc-player-sheet > .sheet-body {
      display: flex;
      flex-direction: column;
    }

    .svc-player-sheet-body {
      flex: 1 1 auto;
      min-height: 0;
      grid-template-rows: minmax(0, 1fr);
      padding-bottom: 0;
    }

    /* No scroller of its own: a drag that starts here moves the sheet. */
    .svc-player-main {
      padding-bottom: var(--space-4);
    }

    .svc-player-list {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .svc-walk-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-bottom: var(--space-4);
    }

    /* The list scrolls and clips its full-width rows: the focus ring goes inside. */
    .svc-walk-scroll :focus-visible {
      outline-offset: -2px;
    }

    :root[data-device="kiosk"] .svc-walk-scroll {
      scrollbar-width: none;
    }
  }

  .svc-player-sheet-body:not([data-phase="idle"]) .svc-walk-choose {
    display: none;
  }

  .svc-player-summary {
    margin-top: var(--space-3);
    font-weight: var(--weight-medium);
  }

  .svc-player {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .svc-player-position {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--accent);
    font-weight: var(--weight-medium);
  }

  .svc-player-zone {
    margin-top: var(--space-1);
    font-size: var(--type-title2-size);
    line-height: var(--type-title2-line);
    letter-spacing: var(--type-title2-tracking);
    font-weight: var(--weight-semibold);
    font-variant-numeric: normal;
  }

  .svc-player-countdown {
    font-size: var(--type-display-l-size);
    line-height: var(--type-display-l-line);
    letter-spacing: var(--type-display-l-tracking);
    font-weight: var(--weight-light);
    font-variant-numeric: tabular-nums;
  }

  .svc-player-progress {
    margin-top: var(--space-1);
  }

  .svc-player-meta {
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
  }

  .svc-transport-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin: var(--space-3) 0 var(--space-1);
  }

  .svc-transport-main {
    display: inline-flex;
  }

  .svc-transport-main[hidden] {
    display: none;
  }

  .icon-button.svc-transport {
    width: 64px;
    height: 64px;
  }

  .icon-button.svc-transport > .button-label > .icon {
    width: 28px;
    height: 28px;
  }

  /* Play and pause: the big one in the middle. */
  .svc-transport-main > .icon-button.svc-transport {
    width: 84px;
    height: 84px;
    background: var(--accent);
    color: var(--on-accent);
  }

  .svc-transport-main > .icon-button.svc-transport:disabled {
    background: var(--surface-2);
    color: var(--text-tertiary);
  }

  .svc-transport-main > .icon-button.svc-transport > .button-label > .icon {
    width: 36px;
    height: 36px;
  }

  .svc-player-duration {
    margin-top: var(--space-1);
  }

  .svc-player-done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-top: var(--space-4);
  }

  .svc-done-icon {
    color: var(--success);
  }

  .svc-walk {
    display: flex;
    flex-direction: column;
  }

  .svc-walk-jump {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--touch-min);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
  }

  .svc-walk-jump:disabled {
    color: var(--text-primary);
  }

  .svc-walk-number {
    flex: none;
    min-width: 1.4em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .svc-walk-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: normal;
  }

  .svc-walk-status {
    flex: none;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    color: var(--text-secondary);
  }

  /* Behind the current zone: dimmed by colour (a jump can skip zones). */
  .svc-walk-item[data-status="done"] .svc-walk-name {
    color: var(--text-secondary);
  }

  .svc-walk-item[data-status="current"] .svc-walk-jump {
    background: var(--surface-2);
    font-weight: var(--weight-semibold);
  }

  .svc-walk-item[data-status="current"] .svc-walk-status {
    color: var(--accent);
    font-weight: var(--weight-medium);
  }

  .svc-walk-item[data-status="current"],
  .svc-walk-item[data-status="current"] + .svc-walk-item {
    border-top-color: transparent;
  }

  /* ------------------------------------------------------------------
     Weather station search (sheets/service/weather-search-sheet.js)
     ------------------------------------------------------------------ */
  .svc-search-status {
    color: var(--text-secondary);
  }

  .svc-scan {
    margin-top: var(--space-3);
  }

  .svc-scan-fill {
    transform: scaleX(0);
  }

  .svc-stations {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .svc-stations:empty {
    display: none;
  }

  .svc-station {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .svc-station-text {
    flex: 1;
    min-width: 0;
  }

  .svc-station-name {
    font-weight: var(--weight-semibold);
  }

  .svc-station-action {
    flex: none;
  }

  .svc-station-bound {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
  }

  .svc-search > .svc-line {
    margin-top: var(--space-3);
  }

  /* ------------------------------------------------------------------
     Manual mode sheet and banner
     ------------------------------------------------------------------ */
  .svc-manual > .svc-switches {
    margin-top: var(--space-2);
  }

  .svc-manual > .svc-switches + .svc-switches {
    margin-top: 0;
    border-top: 1px solid var(--hairline);
  }

  .svc-switch-row[data-state="on"] .form-label {
    color: var(--accent);
  }

  .svc-switch-row[data-pending="true"] .switch {
    opacity: 0.6;
  }

  .svc-switch-state {
    color: var(--warning);
  }

  /* Above the cards it scrolls over (they sit on --z-content), below the header and sheets. */
  .manual-banner {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-content) + 1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1);
    border-radius: var(--radius-card);
    background: var(--surface-2);
    box-shadow: var(--card-edge);
  }

  .manual-banner[hidden] {
    display: none;
  }

  .manual-banner.is-entering {
    animation: page-enter var(--duration-base) ease-out 1 backwards;
  }

  .manual-banner-text {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--touch-min);
    padding: 0 var(--space-3);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--accent);
    font-weight: var(--weight-medium);
    text-align: left;
  }

  /* The state over what is on, as in Today's "Running now" card. Both lines
     wrap rather than end in an ellipsis: on a phone the state is wider than
     the room beside the button (review 2026-10-06). */
  .manual-banner-label {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding-block: var(--space-1);
    font-variant-numeric: normal;
    text-wrap: balance;
  }

  /* The icon on the first line of the state, also when the state wraps. */
  .manual-banner-state {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .manual-banner-state > .meaning-icon {
    margin-top: calc((var(--type-body-line) - 20px) / 2);
  }

  /* Under the state's text, not under the icon. */
  .manual-banner-detail {
    padding-left: calc(20px + var(--space-2));
    color: var(--text-secondary);
    font-size: var(--type-caption-size);
    font-weight: var(--weight-regular);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
  }

  .manual-banner-detail[hidden] {
    display: none;
  }

  /* A button with a surface of its own on the banner's surface. */
  .manual-banner .manual-banner-switches {
    background: var(--surface-3);
  }

  /* The engine ended manual mode while something of it is still on. */
  .manual-banner[data-tone="warning"] .manual-banner-text,
  .manual-banner[data-tone="warning"] .manual-banner-detail {
    color: var(--warning);
  }

  /* ------------------------------------------------------------------
     Diagnostics (sheets/service/diagnostics-sheet.js)
     ------------------------------------------------------------------ */
  .svc-diag {
    padding-bottom: var(--space-4);
  }

  .svc-diag-group + .svc-diag-group {
    margin-top: var(--space-5);
  }

  .svc-diag-head,
  .svc-diag-zone-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .svc-diag-head {
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    font-weight: var(--weight-semibold);
  }

  .svc-diag-zone-head {
    margin: var(--space-3) 0 var(--space-1);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
  }

  .svc-diag-count {
    flex: none;
    color: var(--text-secondary);
    font-size: var(--type-body-size);
    font-weight: var(--weight-regular);
    font-variant-numeric: tabular-nums;
  }

  .svc-diag-head[data-tone="warning"] .svc-diag-count,
  .svc-diag-zone-head[data-tone="warning"] .svc-diag-count {
    color: var(--warning);
  }

  /* A zone's head leads to its zone (plan of 2026-10-10, group E): the whole line, a chevron at its end;
     its touch height reaches into the gap above it, so the list keeps its rhythm. */
  .svc-diag-zone-link {
    align-items: center;
    width: 100%;
    min-height: var(--touch-min);
    margin: calc(var(--space-3) - (var(--touch-min) - var(--type-body-line)) / 2) 0
      calc(var(--space-1) - (var(--touch-min) - var(--type-body-line)) / 2);
    padding: 0;
    border-radius: var(--radius-row);
    text-align: left;
  }

  .svc-diag-zone-name {
    flex: 1 1 auto;
    min-width: 0;
  }

  .svc-diag-zone-link > .svc-line-chevron {
    margin-left: 0;
  }

  .svc-diag-missing {
    margin-bottom: var(--space-4);
  }

  .svc-diag-rows {
    padding: 0 var(--space-4);
    border-radius: var(--radius-tile);
    background: var(--surface-2);
  }

  .svc-diag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--touch-min);
  }

  .svc-diag-row + .svc-diag-row {
    border-top: 1px solid var(--hairline);
  }

  .svc-diag-entity {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: var(--touch-min);
    padding: var(--space-1) 0;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
  }

  .svc-diag-label {
    min-width: 0;
    font-variant-numeric: normal;
  }

  .svc-diag-id {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", Menlo, Consolas, monospace;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    color: var(--text-secondary);
  }

  .svc-diag-value {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    max-width: 50%;
    text-align: right;
  }

  .svc-diag-state {
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
  }

  .svc-diag-when {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    color: var(--text-secondary);
  }

  .svc-diag-row[data-tone="warning"] .svc-diag-state {
    color: var(--warning);
    font-weight: var(--weight-medium);
  }

  /* ------------------------------------------------------------------
     Confirmation (sheets/service/parts.js openConfirmSheet)
     ------------------------------------------------------------------ */
  .svc-confirm > .prose {
    margin-top: var(--space-1);
  }

  .svc-confirm {
    padding-bottom: var(--space-2);
  }

  /* ------------------------------------------------------------------
     Lines and headings that lead somewhere (rows.js serviceRow; plan of
     2026-10-10, group E): the line in its own tone with a chevron after
     its words, a touch target of its own beside the row's buttons; the
     notices' "Ältere im Verlauf", an acknowledged notice into its sheet,
     a device's attention line into its place.
     ------------------------------------------------------------------ */
  .svc-line-link {
    width: fit-content;
    max-width: 100%;
    min-height: var(--touch-min);
    margin-top: 0;
    padding: 0 var(--space-2);
    margin-inline: calc(-1 * var(--space-2));
    border-radius: var(--radius-row);
    align-items: center;
    text-align: left;
  }

  .svc-line-link > .meaning-icon {
    align-self: flex-start;
    margin-top: calc((var(--touch-min) - var(--type-body-line)) / 2 + 1px);
  }

  .svc-line-chevron {
    flex: none;
    margin-left: -4px;
    color: var(--text-tertiary);
  }

  .svc-line-link[data-tone="warning"] > .svc-line-chevron,
  .svc-line-link[data-tone="critical"] > .svc-line-chevron,
  .svc-line-link[data-tone="live"] > .svc-line-chevron {
    color: inherit;
  }

  .svc-title-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: var(--touch-min);
    margin-block: calc((var(--type-body-line) - var(--touch-min)) / 2);
    margin-inline: calc(-1 * var(--space-2)) 0;
    padding: 0 var(--space-2);
    border-radius: var(--radius-row);
    color: inherit;
    font: inherit;
  }

  .svc-attention > li > .link-row {
    min-height: var(--touch-min);
    padding: 0;
  }

  .svc-attention .link-row-label {
    font-weight: var(--weight-regular);
  }

  .svc-board-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: var(--touch-min);
    margin-block: calc((var(--type-caption-line) - var(--touch-min)) / 2);
    padding: 0 var(--space-2);
    margin-inline: calc(-1 * var(--space-2));
    border-radius: var(--radius-row);
    color: var(--warning);
    font-weight: var(--weight-medium);
  }

  /* ------------------------------------------------------------------
     Pressed states (press.js sets .is-pressed for touch)
     ------------------------------------------------------------------ */
  .svc-line-link.is-pressed,
  .svc-title-link.is-pressed,
  .svc-board-link.is-pressed,
  .svc-diag-zone-link.is-pressed,
  .svc-slot.is-pressed,
  .svc-notice-open.is-pressed,
  .svc-check.is-pressed,
  .svc-walk-jump.is-pressed,
  .svc-diag-entity.is-pressed,
  .manual-banner-text.is-pressed {
    background: var(--surface-3);
  }

  /* ------------------------------------------------------------------
     Phones: actions under the text, two outputs a row, one column
     ------------------------------------------------------------------ */
  @container app (max-width: 699px) {
    .svc-row {
      grid-template-columns: minmax(0, 1fr);
      /* The document scrolls under the fixed header. */
      scroll-margin-top: calc(var(--header-height) + var(--space-2));
    }

    /* One column: what the row says (lines, body) before its buttons. */
    .svc-row-actions {
      order: 1;
      justify-content: flex-start;
    }

    .svc-row-error {
      order: 2;
    }

    .svc-slots {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .svc-player-sheet-body {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
    }

    .manual-banner {
      top: var(--header-height);
    }

    /* Phones: the text opens the switches; the room goes to it. */
    .manual-banner-switches {
      display: none;
    }

    .svc-diag-value {
      max-width: 45%;
    }

    /* A long value (the controller's address, the browser) takes the whole
       row under its label instead of breaking inside a word. */
    .svc-diag-info {
      flex-wrap: wrap;
      gap: 0 var(--space-3);
      padding-block: var(--space-2);
    }

    .svc-diag-info .svc-diag-value {
      max-width: 100%;
      margin-left: auto;
    }
  }
}