/* Shared panel components (reference: docs/ui/lightworker-ui-reference.html). */

@layer components {
  /* Page structure */

  .lw-page-head {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: var(--lw-space-6);
  }

  .lw-page-head > div:first-child {
    min-width: 0;
  }

  .lw-page-head h1 {
    margin: 0 0 5px;
    font-size: var(--lw-text-2xl);
    font-weight: var(--lw-weight-medium);
    line-height: var(--lw-leading-tight);
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
  }

  .lw-content p {
    margin-bottom: 0;
    color: var(--lw-muted);
    font-size: var(--lw-text-md);
    line-height: var(--lw-leading-normal);
  }

  .lw-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-left: auto;
  }

  .lw-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.8fr);
    gap: var(--lw-gap);
  }

  .lw-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .lw-stack {
    display: grid;
    gap: 14px;
  }

  .lw-block {
    min-width: 0;
  }

  .lw-section-title {
    display: flex;
    align-items: center;
    gap: var(--lw-space-3);
    margin: 27px 0 12px;
  }

  .lw-section-title h2 {
    margin: 0;
    font-size: var(--lw-text-lg);
    font-weight: var(--lw-weight-medium);
    line-height: 1.3;
    letter-spacing: -0.015em;
  }

  .lw-section-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
  }

  .lw-flash {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: 12px;
    background: var(--lw-panel);
  }

  .lw-content .lw-flash.is-alert {
    border-color: color-mix(in srgb, var(--lw-critical) 30%, var(--lw-line));
    color: var(--lw-critical);
    background: var(--lw-critical-bg);
  }

  /* Controls */

  .lw-icon {
    display: block;
    flex: none;
  }

  .lw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lw-space-2);
    min-height: 38px;
    padding: 8px 13px;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius-md);
    color: var(--lw-ink);
    background: var(--lw-panel);
    cursor: pointer;
    font-size: var(--lw-text-md);
    font-weight: var(--lw-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
  }

  .lw-button:hover {
    background: var(--lw-panel-2);
  }

  .lw-button-primary {
    border-color: var(--lw-accent);
    color: var(--lw-accent-ink);
    background: var(--lw-accent);
  }

  .lw-button-primary:hover {
    background: color-mix(in srgb, var(--lw-accent) 88%, #000000);
  }

  .lw-button-block {
    width: 100%;
  }

  .lw-text-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 4px 0;
    border: 0;
    border-radius: 6px;
    color: var(--lw-muted);
    background: transparent;
    font-size: var(--lw-text-sm);
    font-weight: var(--lw-weight-medium);
    text-decoration: none;
  }

  .lw-text-button:hover {
    color: var(--lw-ink);
    text-decoration: underline;
  }

  .lw-locale-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lw-space-3);
    align-items: center;
  }

  .lw-locale-switcher a[aria-current="page"] {
    color: var(--lw-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .lw-select {
    min-width: 0;
    max-width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius-md);
    color: var(--lw-ink);
    background: var(--lw-panel);
    font-size: var(--lw-text-md);
  }

  .lw-form-card {
    max-width: 780px;
  }

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

  .lw-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
  }

  .lw-field-wide {
    grid-column: 1 / -1;
  }

  .lw-field label {
    font-size: var(--lw-text-sm);
    font-weight: var(--lw-weight-semibold);
  }

  .lw-field input {
    width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius-md);
    color: var(--lw-ink);
    background: var(--lw-panel);
    font-size: var(--lw-text-md);
  }

  .lw-field-help {
    margin: 0;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
  }

  .lw-form-actions,
  .lw-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lw-space-2);
  }

  .lw-row-actions form {
    margin: 0;
  }

  .lw-admin-status {
    font-weight: var(--lw-weight-semibold);
  }

  .lw-filters {
    justify-content: flex-end;
  }

  .lw-preview-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lw-space-2);
    margin-top: 27px;
  }

  /* Cards */

  .lw-card {
    min-width: 0;
    padding: 18px;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius);
    color: inherit;
    background: var(--lw-panel);
  }

  a.lw-card {
    text-decoration: none;
  }

  a.lw-card:hover {
    border-color: color-mix(in srgb, var(--lw-accent) 55%, var(--lw-line));
  }

  .lw-card h3,
  .lw-card-title {
    margin: 0 0 5px;
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
    line-height: var(--lw-leading-snug);
    overflow-wrap: anywhere;
  }

  .lw-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--lw-space-3);
    margin-bottom: 18px;
  }

  .lw-card-head:last-child {
    margin-bottom: 0;
  }

  .lw-card-head > :last-child {
    margin-left: auto;
  }

  .lw-card-heading {
    flex: 1 1 auto;
    min-width: 0;
  }

  .lw-project-icon,
  .lw-settings-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    color: var(--lw-ink);
    background: var(--lw-panel-2);
    font-size: var(--lw-text-md);
    font-weight: 750;
  }

  .lw-settings-icon {
    color: var(--lw-muted);
  }

  .lw-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 14px;
    border-top: var(--lw-border-width) solid var(--lw-soft-line);
  }

  .lw-metric strong {
    display: block;
    margin-bottom: 3px;
    font-size: var(--lw-text-xl);
    font-weight: var(--lw-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .lw-metric span {
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
  }

  .lw-freshness {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lw-space-2);
    margin-top: 14px;
    padding-top: 12px;
    border-top: var(--lw-border-width) solid var(--lw-soft-line);
  }

  .lw-freshness > .lw-icon {
    color: var(--lw-muted);
  }

  .lw-freshness > :last-child {
    margin-left: auto;
  }

  .lw-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
    padding: 12px 0;
    border-top: var(--lw-border-width) solid var(--lw-soft-line);
  }

  .lw-event:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .lw-event:last-child {
    padding-bottom: 0;
  }

  .lw-event-body {
    min-width: 0;
  }

  .lw-event-body:first-child {
    grid-column: 1 / 3;
  }

  .lw-event h3 {
    margin-bottom: 2px;
  }

  .lw-event-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: var(--lw-radius-sm);
    color: var(--lw-muted);
    background: var(--lw-panel-2);
  }

  .lw-summary-strip {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius);
    background: var(--lw-panel);
  }

  .lw-summary-item {
    min-width: 0;
    padding: 15px 17px;
    border-left: var(--lw-border-width) solid var(--lw-soft-line);
    overflow-wrap: anywhere;
  }

  .lw-summary-item:first-child {
    border-left: 0;
  }

  .lw-summary-item > span:first-child {
    display: block;
    margin-bottom: 5px;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
  }

  .lw-summary-item strong {
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .lw-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .lw-settings-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
  }

  .lw-block-footnote {
    margin-top: var(--lw-space-3);
  }

  /* Theme preference: native radios in the reference segmented control (.lw-range). The selected
     option also gets a strong boundary, so its state does not rely on a subtle shadow. */

  .lw-theme-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .lw-theme-picker legend {
    margin: 0 0 5px;
    padding: 0;
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
    line-height: var(--lw-leading-snug);
  }

  .lw-theme-picker p {
    margin: 0;
    color: var(--lw-muted);
    font-size: var(--lw-text-md);
  }

  .lw-theme-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    max-width: 420px;
    margin-top: 14px;
    padding: 3px;
    border-radius: var(--lw-radius-md);
    background: var(--lw-panel-2);
  }

  .lw-theme-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 38px;
    padding: 6px 8px;
    border: var(--lw-border-width) solid transparent;
    border-radius: 7px;
    color: var(--lw-muted);
    cursor: pointer;
    font-size: var(--lw-text-md);
    font-weight: var(--lw-weight-semibold);
  }

  .lw-theme-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }

  .lw-theme-option:hover {
    color: var(--lw-ink);
  }

  .lw-theme-option:has(:checked) {
    border-color: var(--lw-line-strong);
    color: var(--lw-ink);
    background: var(--lw-panel);
    box-shadow: var(--lw-shadow);
  }

  .lw-theme-option:has(:focus-visible) {
    outline: var(--lw-focus-width) solid var(--lw-focus);
    outline-offset: var(--lw-focus-offset);
  }

  .lw-theme-picker:disabled .lw-theme-option {
    cursor: not-allowed;
  }

  .lw-theme-picker .lw-theme-note {
    margin-top: var(--lw-space-3);
  }

  /* Status: text plus a shaped dot (status dot) or its own icon (badge). */

  .is-healthy { --lw-tone: var(--lw-ok); --lw-tone-bg: var(--lw-ok-bg); }
  .is-degraded { --lw-tone: var(--lw-warning); --lw-tone-bg: var(--lw-warning-bg); }
  .is-down { --lw-tone: var(--lw-critical); --lw-tone-bg: var(--lw-critical-bg); }
  .is-stale { --lw-tone: var(--lw-warning); --lw-tone-bg: var(--lw-warning-bg); }
  .is-unknown { --lw-tone: var(--lw-unknown); --lw-tone-bg: var(--lw-panel-2); }
  .is-paused { --lw-tone: var(--lw-unknown); --lw-tone-bg: var(--lw-panel-2); }
  .is-maintenance { --lw-tone: var(--lw-info); --lw-tone-bg: var(--lw-info-bg); }

  .lw-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lw-muted);
    font-size: var(--lw-text-sm);
    font-weight: var(--lw-weight-semibold);
    white-space: nowrap;
  }

  .lw-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--lw-tone);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lw-tone) 12%, transparent);
  }

  /* Shape is a second, color-independent cue: hollow ring = no fresh data. */
  .lw-status.is-stale .lw-dot,
  .lw-status.is-unknown .lw-dot {
    border: 2px solid var(--lw-tone);
    background: transparent;
  }

  .lw-status.is-paused .lw-dot,
  .lw-status.is-maintenance .lw-dot {
    border-radius: 2px;
  }

  .lw-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: var(--lw-radius-full);
    color: var(--lw-tone);
    background: var(--lw-tone-bg);
    font-size: var(--lw-text-2xs);
    font-weight: var(--lw-weight-semibold);
    white-space: nowrap;
  }

  .lw-badge.is-paused {
    color: var(--lw-muted);
  }

  /* TLS observation of one check. Text and icon carry the meaning; the tone is only a third cue and
     describes this observation, not service health. */

  .is-tls-ok { --lw-tone: var(--lw-ok); --lw-tone-bg: var(--lw-ok-bg); }
  .is-tls-warning { --lw-tone: var(--lw-warning); --lw-tone-bg: var(--lw-warning-bg); }
  .is-tls-critical { --lw-tone: var(--lw-critical); --lw-tone-bg: var(--lw-critical-bg); }
  .is-tls-unknown { --lw-tone: var(--lw-muted); --lw-tone-bg: var(--lw-panel-2); }

  .lw-tls {
    display: grid;
    justify-items: start;
    gap: 3px;
    min-width: 0;
  }

  .lw-tls-state {
    white-space: normal;
  }

  .lw-tls-detail {
    max-width: 100%;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
    overflow-wrap: anywhere;
  }

  .lw-tls-detail code {
    font-size: inherit;
  }

  /* Relative time with full UTC/local timestamps on demand. */

  .lw-time {
    display: inline-block;
    max-width: 100%;
    color: var(--lw-ink);
    font-size: var(--lw-text-sm);
    font-variant-numeric: tabular-nums;
  }

  .lw-time.is-empty {
    color: var(--lw-muted);
    font-weight: var(--lw-weight-semibold);
  }

  .lw-time summary {
    display: inline;
    border-radius: 4px;
    cursor: pointer;
    list-style: none;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    white-space: nowrap;
  }

  .lw-time summary::-webkit-details-marker {
    display: none;
  }

  .lw-time-full {
    display: grid;
    gap: 4px;
    margin: 6px 0 0;
    padding: 8px 10px;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius-md);
    background: var(--lw-panel-2);
    font-size: var(--lw-text-xs);
    text-align: left;
  }

  .lw-time-full dt {
    color: var(--lw-muted);
    font-size: var(--lw-text-2xs);
    font-weight: var(--lw-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .lw-time-full dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  /* Tables: a table on wide screens, labelled cards on phones. */

  .lw-table-wrap {
    overflow-x: auto;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius);
    background: var(--lw-panel);
  }

  .lw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lw-text-sm);
  }

  .lw-table th {
    padding: 11px 14px;
    color: var(--lw-muted);
    font-size: var(--lw-text-2xs);
    font-weight: var(--lw-weight-bold);
    letter-spacing: 0.055em;
    text-align: left;
    text-transform: uppercase;
  }

  .lw-table td {
    padding: 13px 14px;
    border-top: var(--lw-border-width) solid var(--lw-soft-line);
    vertical-align: middle;
  }

  .lw-table .lw-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .lw-cell-primary strong {
    display: block;
    font-weight: var(--lw-weight-medium);
    overflow-wrap: anywhere;
  }

  .lw-cell-primary span {
    display: block;
    max-width: 260px;
    overflow: hidden;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lw-changes {
    display: grid;
    gap: 7px;
    min-width: 190px;
    margin: 0;
  }

  .lw-changes div {
    display: grid;
    grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
    gap: 8px;
  }

  .lw-changes dt {
    color: var(--lw-muted);
  }

  .lw-changes dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  /* Block states */

  .lw-frame {
    display: block;
  }

  .lw-frame[busy] {
    opacity: 0.55;
  }

  .lw-block-loading {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: var(--lw-muted);
    font-size: var(--lw-text-sm);
  }

  .lw-block:has(> .lw-frame[busy]) > .lw-block-loading,
  .lw-block-loading.is-visible {
    display: flex;
  }

  .lw-spinner {
    display: inline-grid;
  }

  .lw-frame-preview {
    opacity: 0.55;
  }

  .lw-block-notice {
    display: flex;
    align-items: center;
    gap: var(--lw-space-2);
    margin: 0 0 12px;
    padding: 10px 13px;
    border: var(--lw-border-width) solid color-mix(in srgb, var(--lw-warning) 30%, var(--lw-line));
    border-radius: 12px;
    color: var(--lw-warning);
    background: var(--lw-warning-bg);
    font-size: var(--lw-text-sm);
    font-weight: var(--lw-weight-semibold);
  }

  .lw-block-notice[hidden] {
    display: none;
  }

  .lw-empty {
    padding: 50px 22px;
    border: var(--lw-border-width) dashed var(--lw-line);
    border-radius: var(--lw-radius);
    text-align: center;
  }

  .lw-empty > .lw-icon {
    margin: 0 auto 12px;
    color: var(--lw-muted);
  }

  .lw-empty-title {
    margin: 0 0 5px;
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
    line-height: var(--lw-leading-snug);
  }

  .lw-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border-radius: var(--lw-radius);
  }

  .lw-state.is-error {
    border: var(--lw-border-width) solid color-mix(in srgb, var(--lw-critical) 30%, var(--lw-line));
    background: var(--lw-critical-bg);
  }

  .lw-state-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: var(--lw-radius-md);
    color: var(--lw-critical);
    background: color-mix(in srgb, var(--lw-critical) 12%, transparent);
  }

  .lw-state-title {
    margin: 0 0 2px;
    color: var(--lw-critical);
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
  }

  /* Collector installations and ingestion tokens (#78). Token state uses text and an icon; the
     tone is only a third cue. A stored token is only ever shown as its masked prefix. */

  .is-token-active { --lw-tone: var(--lw-ok); --lw-tone-bg: var(--lw-ok-bg); }
  .is-token-retiring { --lw-tone: var(--lw-warning); --lw-tone-bg: var(--lw-warning-bg); }
  .is-token-expired { --lw-tone: var(--lw-muted); --lw-tone-bg: var(--lw-panel-2); }
  .is-token-revoked { --lw-tone: var(--lw-critical); --lw-tone-bg: var(--lw-critical-bg); }

  [data-token-state] {
    justify-self: start;
  }

  .lw-muted {
    color: var(--lw-muted);
  }

  .lw-content .lw-block-intro {
    max-width: 78ch;
    margin: 0 0 var(--lw-space-3);
    color: var(--lw-muted);
    font-size: var(--lw-text-sm);
  }

  .lw-token-summary {
    display: grid;
    justify-items: start;
    gap: 5px;
  }

  .lw-token-summary code,
  .lw-table code,
  .lw-summary-item code,
  .lw-reveal code {
    font-size: var(--lw-text-xs);
    overflow-wrap: anywhere;
  }

  .lw-button-danger {
    border-color: var(--lw-critical);
    color: var(--lw-critical);
  }

  .lw-button-danger:hover {
    background: var(--lw-critical-bg);
  }

  .lw-installation-actions {
    align-items: flex-start;
    margin-top: var(--lw-space-4);
  }

  .lw-installation-card .lw-field-help {
    margin-top: var(--lw-space-3);
  }

  /* Confirmation of a destructive action: a native disclosure, usable without JavaScript. */

  .lw-confirm {
    min-width: 0;
    max-width: 100%;
  }

  .lw-confirm summary {
    list-style: none;
  }

  .lw-confirm summary::-webkit-details-marker {
    display: none;
  }

  .lw-confirm[open] summary {
    border-color: var(--lw-line-strong);
    background: var(--lw-panel-2);
  }

  .lw-confirm-panel {
    display: grid;
    justify-items: start;
    gap: var(--lw-space-3);
    max-width: 380px;
    margin-top: var(--lw-space-2);
    padding: 12px;
    border: var(--lw-border-width) solid var(--lw-line-strong);
    border-radius: var(--lw-radius-md);
    background: var(--lw-panel);
    white-space: normal;
  }

  .lw-confirm-panel p {
    margin: 0;
    color: var(--lw-ink);
    font-size: var(--lw-text-sm);
  }

  .lw-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: var(--lw-space-2);
    font-size: var(--lw-text-sm);
    font-weight: var(--lw-weight-semibold);
    cursor: pointer;
  }

  .lw-confirm-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--lw-critical);
  }

  /* One-time token reveal. */

  .lw-reveal {
    display: grid;
    gap: var(--lw-space-4);
    max-width: 780px;
  }

  /* Component display rules would otherwise override the hidden attribute of the enhancement-only
     copy button and of the field that is removed once the value has been forgotten. */
  .lw-reveal [hidden] {
    display: none;
  }

  .lw-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--lw-space-3);
    padding: 12px 14px;
    border: var(--lw-border-width) solid var(--lw-tone);
    border-radius: var(--lw-radius-md);
    background: var(--lw-tone-bg);
  }

  .lw-callout.is-warning {
    --lw-tone: var(--lw-warning);
    --lw-tone-bg: var(--lw-warning-bg);
  }

  .lw-callout > .lw-icon {
    margin-top: 2px;
    color: var(--lw-tone);
  }

  .lw-callout-title {
    margin: 0 0 4px;
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-semibold);
  }

  .lw-callout p {
    margin: 0;
    color: var(--lw-ink);
    font-size: var(--lw-text-sm);
  }

  .lw-secret {
    display: block;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: var(--lw-border-width) solid var(--lw-line-strong);
    border-radius: var(--lw-radius-md);
    color: var(--lw-ink);
    background: var(--lw-panel-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--lw-text-md);
    line-height: 1.5;
    overflow-wrap: anywhere;
    resize: none;
    word-break: break-all;
    user-select: all;
  }

  .lw-reveal-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lw-space-3);
  }

  .lw-reveal-meta,
  .lw-reveal-retiring,
  .lw-reveal-cleared {
    margin: 0;
    font-size: var(--lw-text-sm);
  }

  .lw-reveal-cleared {
    font-weight: var(--lw-weight-semibold);
  }

  /* Derived service health (#22, #23): project health metrics, the overview service list and the
     service page. Status keeps text and shape; these rules only lay the existing parts out. */

  .lw-metrics.is-health {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lw-freshness.is-compact {
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
  }

  .lw-content .lw-card-link {
    margin-top: 8px;
  }

  .lw-block-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    margin: 0 0 12px;
  }

  .lw-row-link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 4px;
    color: var(--lw-ink);
    font-weight: var(--lw-weight-medium);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: var(--lw-line-strong);
    text-underline-offset: 3px;
  }

  .lw-row-link:hover {
    text-decoration-color: currentColor;
  }

  .lw-event-body h3 a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--lw-line-strong);
    text-underline-offset: 3px;
  }

  .lw-subsection-title {
    margin: 0 0 4px;
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
    line-height: var(--lw-leading-snug);
  }

  .lw-transition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .lw-detail-line {
    display: block;
  }

  .lw-cell-note {
    display: block;
    margin-top: 3px;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
  }

  .lw-disclosure summary {
    border-radius: 4px;
    cursor: pointer;
    font-weight: var(--lw-weight-semibold);
  }

  .lw-evidence-list {
    display: grid;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--lw-text-xs);
  }

  .lw-evidence-list li {
    display: grid;
    gap: 2px;
    padding-left: 10px;
    border-left: 2px solid var(--lw-soft-line);
    overflow-wrap: anywhere;
  }

  .lw-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    margin-top: var(--lw-space-3);
  }

  /* Incidents (#24): overview banners, list items, summary key-values and the immutable timeline
     (reference: Overview banner and Incidents screen). Severity and state are always text and icon. */

  .lw-banners {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
  }

  .lw-banner {
    --lw-tone: var(--lw-critical);
    --lw-tone-bg: var(--lw-critical-bg);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border: var(--lw-border-width) solid color-mix(in srgb, var(--lw-tone) 30%, var(--lw-line));
    border-radius: var(--lw-radius);
    background: var(--lw-tone-bg);
  }

  .lw-banner.is-warning {
    --lw-tone: var(--lw-warning);
    --lw-tone-bg: var(--lw-warning-bg);
  }

  .lw-content > .lw-banner {
    margin-bottom: 22px;
  }

  .lw-banner-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: var(--lw-radius-md);
    color: var(--lw-tone);
    background: color-mix(in srgb, var(--lw-tone) 12%, transparent);
  }

  .lw-banner h3,
  .lw-content .lw-banner-title {
    margin: 0 0 2px;
    color: var(--lw-tone);
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
    overflow-wrap: anywhere;
  }

  .lw-banner-meta {
    color: var(--lw-ink);
    font-size: var(--lw-text-md);
    line-height: var(--lw-leading-normal);
    overflow-wrap: anywhere;
  }

  .lw-list-panel {
    margin: 0;
    padding: 8px;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius);
    background: var(--lw-panel);
    list-style: none;
  }

  .lw-incident-item {
    padding: 12px;
    border-radius: 11px;
  }

  .lw-incident-item + .lw-incident-item {
    margin-top: 3px;
    border-top: var(--lw-border-width) solid var(--lw-soft-line);
  }

  .lw-incident-item h3 {
    margin: 8px 0 2px;
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
  }

  .lw-incident-times {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 6px 0 0;
    font-size: var(--lw-text-xs);
  }

  .lw-incident-times div {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .lw-incident-times dt {
    color: var(--lw-muted);
  }

  .lw-incident-times dd {
    margin: 0;
  }

  .lw-incident-summary .lw-card-head {
    flex-wrap: wrap;
  }

  .lw-table td > .lw-badge {
    justify-self: start;
  }

  .lw-inline-form {
    display: inline-flex;
    margin: 0;
  }

  .lw-kv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
  }

  .lw-kv div {
    min-width: 0;
    padding: 12px;
    border-radius: 11px;
    background: var(--lw-panel-2);
  }

  .lw-kv dt {
    margin-bottom: 4px;
    color: var(--lw-muted);
    font-size: var(--lw-text-2xs);
    font-weight: var(--lw-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .lw-kv dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .lw-timeline {
    position: relative;
    display: grid;
    margin: 0;
    padding: 18px;
    list-style: none;
  }

  .lw-timeline::before {
    position: absolute;
    top: 28px;
    bottom: 30px;
    left: 25px;
    width: 1px;
    background: var(--lw-line);
    content: "";
  }

  .lw-timeline-row {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 0 0 19px;
  }

  .lw-timeline-row:last-child {
    padding-bottom: 0;
  }

  .lw-timeline-body {
    min-width: 0;
  }

  .lw-timeline-body h3 {
    margin: 0 0 2px;
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-medium);
  }

  .lw-timeline-dot {
    z-index: 1;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border: 4px solid var(--lw-panel);
    border-radius: 50%;
    background: var(--lw-muted);
    box-shadow: 0 0 0 1px var(--lw-line);
  }

  .lw-timeline-dot.is-down { background: var(--lw-critical); }
  .lw-timeline-dot.is-degraded { background: var(--lw-warning); }
  .lw-timeline-dot.is-healthy { background: var(--lw-ok); }

  /* Deployment markers and operational monitors (#34). A deployment is temporal context, not a state: it
     uses the info tone, a square timeline dot and a dotted chart line, so shape and text tell it apart
     from incident lines and status dots without relying on color. */
  .is-deployment { --lw-tone: var(--lw-info); --lw-tone-bg: var(--lw-info-bg); }
  .lw-timeline-dot.is-deployment { border-radius: 3px; background: var(--lw-info); }
  .lw-chart-marker.is-deployment { stroke-dasharray: 1 3; stroke-width: 2; }
  .lw-legend-marker.is-deployment { border-left: 2px dotted var(--lw-info); }

  .lw-release {
    font-size: inherit;
    overflow-wrap: anywhere;
  }

  .lw-deploy-context {
    margin: 3px 0 0;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
    overflow-wrap: anywhere;
  }

  .lw-code-block {
    margin: 0;
    padding: var(--lw-space-3);
    overflow-x: auto;
    border: 1px solid var(--lw-line);
    border-radius: var(--lw-radius-sm);
    background: var(--lw-panel-2);
    font-size: var(--lw-text-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .lw-integration-example {
    margin-top: var(--lw-space-4);
  }

  /* The activity card below starts without a section title, so this section keeps the section rhythm. */
  .lw-monitors-section {
    margin-bottom: 27px;
  }

  /* Service activity (#146): range selector, latency chart, status segments and their legend. The SVG is
     decorative; gaps are hatched (shape, not only color) and segments reuse the status tones. */

  .lw-chart-card {
    display: grid;
    gap: var(--lw-space-3);
  }

  .lw-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .lw-chart-head h2 {
    margin: 0;
  }

  .lw-chart-head p {
    margin: 2px 0 0;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
  }

  .lw-range {
    display: flex;
    gap: 3px;
    margin-left: auto;
    padding: 3px;
    border-radius: var(--lw-radius-sm);
    background: var(--lw-panel-2);
  }

  .lw-range-option {
    display: inline-grid;
    min-width: 44px;
    min-height: 32px;
    place-items: center;
    padding: 5px 9px;
    border-radius: 7px;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
    font-weight: var(--lw-weight-semibold);
    text-decoration: none;
  }

  .lw-range-option:hover {
    color: var(--lw-ink);
  }

  .lw-range-option[aria-current="true"] {
    color: var(--lw-ink);
    background: var(--lw-panel);
    box-shadow: var(--lw-shadow);
  }

  .lw-range-anchor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lw-space-2);
    margin: 0;
    color: var(--lw-muted);
    font-size: var(--lw-text-sm);
  }

  .lw-chart-figure {
    display: grid;
    gap: 8px;
    margin: 0;
  }

  .lw-chart-frame {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }

  .lw-chart-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--lw-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .lw-chart {
    position: relative;
    height: 210px;
    overflow: hidden;
    border-bottom: var(--lw-border-width) solid var(--lw-line);
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, var(--lw-soft-line) 52px);
  }

  .lw-chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .lw-chart-line {
    fill: none;
    stroke: var(--lw-info);
    stroke-width: 2.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .lw-chart-point {
    fill: var(--lw-info);
  }

  .lw-chart-gap {
    fill: url("#lw-chart-gap-pattern");
  }

  .lw-chart-gap-stripe {
    fill: var(--lw-line);
  }

  .lw-chart-hit {
    fill: transparent;
  }

  .lw-chart-hit:hover {
    fill: color-mix(in srgb, var(--lw-info) 10%, transparent);
  }

  .lw-chart-marker {
    stroke: var(--lw-tone);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
  }

  .lw-chart-axis {
    display: flex;
    justify-content: space-between;
    padding-left: 44px;
    color: var(--lw-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  .lw-status-timeline {
    display: flex;
    gap: 1px;
    height: 17px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
  }

  .lw-segment {
    flex: 1;
    min-width: 0;
    border-radius: 2px;
    background: var(--lw-tone);
  }

  .lw-segment.is-stale {
    background: repeating-linear-gradient(135deg, var(--lw-warning-bg), var(--lw-warning-bg) 3px, var(--lw-warning) 3px, var(--lw-warning) 5px);
  }

  .lw-segment.is-unknown {
    background: repeating-linear-gradient(135deg, var(--lw-panel-2), var(--lw-panel-2) 3px, var(--lw-unknown) 3px, var(--lw-unknown) 5px);
  }

  .lw-segment.is-no-data {
    background: repeating-linear-gradient(135deg, var(--lw-panel-2), var(--lw-panel-2) 4px, var(--lw-line) 4px, var(--lw-line) 8px);
  }

  .lw-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 4px 0 0;
    padding: 0;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
    list-style: none;
  }

  .lw-legend li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .lw-legend .lw-segment {
    flex: none;
    width: 12px;
    height: 12px;
  }

  .lw-legend-marker {
    width: 0;
    height: 12px;
    border-left: 2px dashed var(--lw-muted);
  }

  .lw-chart-data summary {
    font-size: var(--lw-text-sm);
  }

  .lw-clock {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .lw-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--lw-muted);
    font-size: var(--lw-text-sm);
  }

  /* Operator note (#146): plain, escaped text that keeps its line breaks. */

  .lw-note-card {
    display: grid;
    gap: var(--lw-space-3);
  }

  .lw-note {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  .lw-note-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--lw-muted);
    font-size: var(--lw-text-sm);
  }

  .lw-note-editor summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--lw-touch-target);
    font-weight: var(--lw-weight-semibold);
  }

  .lw-note-form {
    margin-top: var(--lw-space-3);
  }

  .lw-field textarea {
    width: 100%;
    min-height: 96px;
    padding: 9px 11px;
    border: var(--lw-border-width) solid var(--lw-line);
    border-radius: var(--lw-radius-md);
    color: var(--lw-ink);
    background: var(--lw-panel);
    font: inherit;
    font-size: var(--lw-text-md);
    resize: vertical;
  }

  .lw-field textarea[aria-invalid="true"] {
    border-color: var(--lw-critical);
  }

  .lw-field-error {
    margin: 0;
    color: var(--lw-critical);
    font-size: var(--lw-text-xs);
    font-weight: var(--lw-weight-semibold);
  }

  /* Application-side source freshness: heartbeats of sources, never service health. */

  .is-source-fresh { --lw-tone: var(--lw-ok); --lw-tone-bg: var(--lw-ok-bg); }
  .is-source-partial { --lw-tone: var(--lw-warning); --lw-tone-bg: var(--lw-warning-bg); }
  .is-source-stale { --lw-tone: var(--lw-warning); --lw-tone-bg: var(--lw-warning-bg); }
  .is-source-awaiting { --lw-tone: var(--lw-muted); --lw-tone-bg: var(--lw-panel-2); }
  .is-source-none { --lw-tone: var(--lw-muted); --lw-tone-bg: var(--lw-panel-2); }

  /* Central performance and error views (#60): the reference project tabs, trend tones, error group
     states and the representative stack. Text and arrows carry the meaning; tones are a third cue. */

  .lw-tabs {
    display: flex;
    gap: 3px;
    margin: -4px 0 22px;
    padding-bottom: 1px;
    overflow-x: auto;
    border-bottom: var(--lw-border-width) solid var(--lw-line);
  }

  .lw-tab {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 10px 12px;
    border-bottom: 2px solid transparent;
    color: var(--lw-muted);
    font-size: var(--lw-text-xs);
    font-weight: var(--lw-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
  }

  .lw-tab:hover {
    color: var(--lw-ink);
  }

  .lw-tab[aria-current="page"] {
    border-bottom-color: var(--lw-accent);
    color: var(--lw-ink);
  }

  .lw-section-title:has(.lw-filters) {
    flex-wrap: wrap;
  }

  .lw-section-actions.lw-filters {
    flex-wrap: wrap;
    gap: 9px;
  }

  .lw-trend-up {
    color: var(--lw-critical);
  }

  .lw-trend-down {
    color: var(--lw-ok);
  }

  .lw-trend-flat {
    color: var(--lw-muted);
  }

  .lw-back-link {
    margin: -10px 0 14px;
  }

  .lw-operation-title {
    overflow-wrap: anywhere;
  }

  .lw-callout-list {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: var(--lw-text-sm);
  }

  .lw-insights-summary {
    margin-bottom: 18px;
  }

  /* Row headers of the insights tables read like ordinary cells; the header semantics stay for
     assistive technology. */
  .lw-table tbody th[scope="row"] {
    padding: 13px 14px;
    border-top: var(--lw-border-width) solid var(--lw-soft-line);
    color: var(--lw-ink);
    font-size: var(--lw-text-sm);
    font-weight: var(--lw-weight-normal);
    letter-spacing: normal;
    text-transform: none;
    vertical-align: middle;
  }

  .lw-insights-notices {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
  }

  .lw-project-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }

  .is-error-new { --lw-tone: var(--lw-critical); --lw-tone-bg: var(--lw-critical-bg); }
  .is-error-ongoing { --lw-tone: var(--lw-warning); --lw-tone-bg: var(--lw-warning-bg); }
  .is-error-resolved { --lw-tone: var(--lw-ok); --lw-tone-bg: var(--lw-ok-bg); }
  .is-callsite { --lw-tone: var(--lw-info); --lw-tone-bg: var(--lw-info-bg); }

  .lw-stack-frames {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px 16px 14px 36px;
  }

  .lw-stack-frames li {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lw-stack-frames code {
    margin-right: 6px;
    font-size: var(--lw-text-xs);
  }

  /* Responsive behaviour (reference breakpoints: 780, 600 and 480 px). */

  @media (max-width: 780px) {
    .lw-page-head {
      align-items: flex-start;
    }

    .lw-page-actions {
      justify-content: flex-end;
    }

    .lw-grid-2,
    .lw-project-grid,
    .lw-settings-grid {
      grid-template-columns: 1fr;
    }

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

    .lw-summary-strip {
      grid-auto-flow: row;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lw-summary-item:nth-child(odd) {
      border-left: 0;
    }

    .lw-summary-item:nth-child(n + 3) {
      border-top: var(--lw-border-width) solid var(--lw-soft-line);
    }

    .lw-button,
    .lw-select,
    .lw-text-button,
    .lw-field input,
    .lw-theme-option,
    .lw-row-link,
    .lw-tab {
      min-height: var(--lw-touch-target);
    }

    .lw-disclosure summary {
      padding-block: 12px;
    }

    .lw-time summary {
      display: inline-flex;
      align-items: center;
      min-height: var(--lw-touch-target);
    }

    .lw-confirm-check {
      align-items: center;
      min-height: var(--lw-touch-target);
    }
  }

  @media (max-width: 600px) {
    .lw-chart {
      height: 170px;
    }

    .lw-range {
      margin-left: 0;
    }

    .lw-form {
      grid-template-columns: 1fr;
    }

    .lw-field-wide {
      grid-column: auto;
    }

    .lw-table-wrap {
      overflow: visible;
      border: 0;
      background: transparent;
    }

    .lw-table,
    .lw-table tbody {
      display: block;
      width: 100%;
    }

    .lw-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .lw-table tbody {
      display: grid;
      gap: 10px;
    }

    .lw-table tbody tr {
      display: block;
      overflow: hidden;
      border: var(--lw-border-width) solid var(--lw-line);
      border-radius: 13px;
      background: var(--lw-panel);
    }

    .lw-table td,
    .lw-table tbody th[scope="row"] {
      display: grid;
      grid-template-columns: minmax(82px, 0.7fr) minmax(0, 1.5fr);
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 13px;
      text-align: left;
    }

    .lw-table td:first-child,
    .lw-table tbody th[scope="row"]:first-child {
      border-top: 0;
    }

    .lw-table td::before,
    .lw-table tbody th[scope="row"]::before {
      color: var(--lw-muted);
      content: attr(data-label);
      font-size: var(--lw-text-3xs);
      font-weight: var(--lw-weight-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .lw-table .lw-num {
      text-align: left;
    }

    .lw-cell-primary span {
      max-width: none;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .lw-changes {
      min-width: 0;
    }
  }

  @media (max-width: 480px) {
    .lw-page-head {
      display: block;
    }

    .lw-filters {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lw-filters .lw-button {
      grid-column: 1 / -1;
    }

    .lw-page-actions {
      justify-content: flex-start;
      margin: 14px 0 0;
    }

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

    .lw-state .lw-button {
      grid-column: 1 / -1;
    }

    .lw-metrics {
      gap: 7px;
    }

    .lw-metrics.is-health {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lw-block-filters {
      display: grid;
      grid-template-columns: 1fr;
    }

    .lw-kv {
      grid-template-columns: 1fr;
    }

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

    .lw-banner > .lw-button {
      grid-column: 1 / -1;
    }

    .lw-timeline-row {
      grid-template-columns: 16px minmax(0, 1fr);
    }

    .lw-timeline-row > .lw-time {
      grid-column: 2;
    }

    .lw-card {
      padding: 15px;
    }
  }

  /* Alerting (#19/#20). Delivery and enablement badges carry text and an icon; the tone is only a
     third cue. Credentials are never rendered, only the fact that they are set. */

  .is-delivery-queued { --lw-tone: var(--lw-info); --lw-tone-bg: var(--lw-info-bg); }
  .is-delivery-sent { --lw-tone: var(--lw-ok); --lw-tone-bg: var(--lw-ok-bg); }
  .is-delivery-failed { --lw-tone: var(--lw-warning); --lw-tone-bg: var(--lw-warning-bg); }
  .is-delivery-skipped { --lw-tone: var(--lw-muted); --lw-tone-bg: var(--lw-panel-2); }
  .is-delivery-dead { --lw-tone: var(--lw-critical); --lw-tone-bg: var(--lw-critical-bg); }
  .is-alerting-enabled { --lw-tone: var(--lw-ok); --lw-tone-bg: var(--lw-ok-bg); }
  .is-alerting-disabled { --lw-tone: var(--lw-muted); --lw-tone-bg: var(--lw-panel-2); }

  .lw-alerting-card {
    display: grid;
    align-content: start;
    gap: var(--lw-space-3);
  }

  .lw-alerting-card .lw-card-head,
  .lw-alerting-card .lw-freshness {
    margin: 0;
  }

  .lw-alerting-facts {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-top: 12px;
    border-top: var(--lw-border-width) solid var(--lw-soft-line);
    font-size: var(--lw-text-sm);
  }

  .lw-alerting-facts > div {
    display: grid;
    grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1.4fr);
    gap: 10px;
    align-items: baseline;
  }

  .lw-alerting-facts dt {
    color: var(--lw-muted);
  }

  .lw-alerting-facts dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .lw-alerting-events {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .lw-alerting-events legend {
    margin-bottom: 6px;
    padding: 0;
    font-weight: var(--lw-weight-medium);
  }

  /* Extended alert control (#145): reminder settings, maintenance windows and physical tries. */

  .is-maintenance-scheduled { --lw-tone: var(--lw-info); --lw-tone-bg: var(--lw-info-bg); }
  .is-maintenance-ended,
  .is-maintenance-cancelled { --lw-tone: var(--lw-muted); --lw-tone-bg: var(--lw-panel-2); }

  .lw-alerting-reminders {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .lw-alerting-reminders legend {
    margin-bottom: 6px;
    padding: 0;
    font-weight: var(--lw-weight-medium);
  }

  .lw-alerting-reminder-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--lw-space-3);
  }

  @media (prefers-reduced-motion: no-preference) {
    .lw-button,
    .lw-text-button,
    .lw-card,
    .lw-frame {
      transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
    }

    .lw-spinner {
      animation: lw-spin 0.9s linear infinite;
    }
  }

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