/* Product surfaces. Keep the editor, public card and operations log visually distinct. */
.pmi-app--editorial {
  --pmi-work-pad: clamp(16px, 3.2vw, 36px);
  --pmi-work-surface: color-mix(in srgb, var(--pmi-paper) 86%, var(--pmi-surface));
}

.pmi-app--editorial .pmi-hero {
  align-items: end;
  padding-block: clamp(30px, 5.5vw, 78px) clamp(24px, 4vw, 49px);
  border: 0;
}

.pmi-app--editorial .pmi-hero h1 {
  max-width: 17ch;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.06;
}

.pmi-app--editorial .pmi-hero-aside {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--pmi-line);
}

.pmi-app--editorial .pmi-hero-aside p { margin-bottom: 9px; }
.pmi-app--editorial .pmi-hero-aside a { gap: 12px; min-height: 58px; padding-block: 9px; }
.pmi-app--editorial .pmi-hero-aside a > span { font-variant-numeric: tabular-nums; }

.pmi-app--editorial .pmi-studio {
  border: 1px solid var(--pmi-line);
  border-radius: 12px;
  background: var(--pmi-surface);
}

.pmi-app--editorial .pmi-nav {
  padding-inline: var(--pmi-work-pad);
  margin: 0;
  background: var(--pmi-work-surface);
  border-radius: 11px 11px 0 0;
}

.pmi-app--editorial .pmi-nav-tabs { gap: clamp(14px, 3vw, 32px); }
.pmi-app--editorial .pmi-nav .pmi-tab { padding-inline: 0; min-height: 56px; }
.pmi-app--editorial .pmi-session-state { font-size: 11px; }
.pmi-app--editorial .pmi-pane { padding: var(--pmi-work-pad); }
.pmi-app--editorial .pmi-heading { margin-bottom: clamp(14px, 2.2vw, 24px); }
.pmi-app--editorial .pmi-heading h2 { font-size: clamp(26px, 3vw, 42px); }
.pmi-app--editorial .pmi-heading > p { max-width: 44ch; }
.pmi-app--editorial .pmi-kicker > span { display: none; }

.pmi-app--editorial .pmi-scenarios {
  gap: 0;
  padding: 0;
  margin-bottom: clamp(16px, 2.7vw, 30px);
  border: 1px solid var(--pmi-line);
  border-radius: 6px;
  background: transparent;
}

.pmi-app--editorial .pmi-scenario {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 2px 10px;
  padding: 12px clamp(8px, 1.4vw, 16px);
  border-radius: 0;
  background: transparent;
}

.pmi-app--editorial .pmi-scenario + .pmi-scenario { border-inline-start: 1px solid var(--pmi-line); }
.pmi-app--editorial .pmi-scenario > span { grid-row: span 2; padding-block-start: .25em; font-variant-numeric: tabular-nums; }
.pmi-app--editorial .pmi-scenario:is(:hover, [aria-pressed="true"]) { background: var(--pmi-work-surface); }
.pmi-app--editorial .pmi-scenario[aria-pressed="true"] > b { color: var(--pmi-accent); }

.pmi-app--editorial .pmi-workbench {
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--pmi-line);
  border-radius: 8px;
}

.pmi-app--editorial .pmi-workbench .pmi-panel {
  padding: clamp(14px, 2.4vw, 27px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pmi-app--editorial .pmi-workbench .pmi-preview { border-inline-start: 1px solid var(--pmi-line); }
.pmi-app--editorial .pmi-panel-heading { margin-bottom: 15px; }
.pmi-app--editorial .pmi-panel-heading .pmi-kicker { margin-bottom: 4px; }
.pmi-app--editorial .pmi-panel h3 { font-size: clamp(21px, 2.1vw, 29px); }
.pmi-app--editorial .pmi-form { gap: 15px; }

.pmi-app--editorial :is(.pmi-field input, .pmi-field textarea, .pmi-field select, .pmi-fault-status) {
  min-height: 44px;
  border-radius: 5px;
  background: var(--pmi-surface);
}

.pmi-app--editorial .pmi-schedule { padding: 8px 0 0; border-width: 1px 0 0; border-radius: 0; }
.pmi-app--editorial .pmi-schedule legend { padding-inline: 0 8px; }
.pmi-app--editorial .pmi-actions { gap: 7px; }
.pmi-app--editorial .pmi-actions .pmi-button { border-radius: 5px; min-height: 44px; }
.pmi-app--editorial .pmi-reset { min-height: 44px; }

.pmi-app--editorial .pmi-preview-switch { gap: 0; margin-top: 14px; border-bottom: 1px solid var(--pmi-line); }
.pmi-app--editorial .pmi-preview-switch .pmi-tab {
  padding-inline: clamp(6px, 1vw, 13px);
  border-width: 0 0 2px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: var(--pmi-muted);
  font-size: 12px;
}

.pmi-app--editorial .pmi-preview-switch .pmi-tab:is(:hover, [aria-pressed="true"]) {
  border-bottom-color: var(--pmi-accent);
  color: var(--pmi-ink);
}

.pmi-app--editorial .pmi-preview-stage {
  min-height: 212px;
  padding: clamp(11px, 2vw, 22px);
  border: 1px solid var(--pmi-line);
  border-radius: 5px;
  background: var(--pmi-work-surface);
}

.pmi-app--editorial .pmi-preview-stage .pmi-notice {
  border-radius: 4px;
  padding: clamp(12px, 2vw, 23px);
}

.pmi-app--editorial .pmi-preview-stage[data-mode="phone"] .pmi-notice {
  max-width: 250px;
  min-height: 215px;
  border-radius: 19px;
  border-color: #292d3a;
}

.pmi-app--editorial .pmi-preview-stage[data-mode="screen"] .pmi-notice { background: #181d2b; border-color: #333a4b; }
.pmi-app--editorial .pmi-notice-top { border-bottom: 1px solid var(--pmi-line); padding-bottom: 8px; margin-bottom: 13px; }
.pmi-app--editorial .pmi-preview-stage[data-mode="screen"] .pmi-notice-top { border-bottom-color: #42495d; }
.pmi-app--editorial .pmi-notice h4 { font-size: clamp(20px, 2.25vw, 31px); line-height: 1.15; }
.pmi-app--editorial .pmi-notice p { font-size: 14px; }

.pmi-app--editorial .pmi-qr-panel { margin-top: 17px; }
.pmi-app--editorial .pmi-qr { border-radius: 3px; }
.pmi-app--editorial .pmi-qr-panel .pmi-qr { width: clamp(78px, 10vw, 111px); }
.pmi-app--editorial .pmi-qr-panel .pmi-text-link { display: flex; min-height: 30px; }
.pmi-app--editorial .pmi-expiry-example { margin-top: 12px; border-top: 1px solid var(--pmi-line); }
.pmi-app--editorial .pmi-expiry-example summary { padding-block: 10px 0; }
.pmi-app--editorial .pmi-expiry-example .pmi-notice { margin-top: 8px; border-radius: 5px; }

.pmi-app--editorial .pmi-metrics { gap: 0; border-bottom: 1px solid var(--pmi-line); }
.pmi-app--editorial .pmi-metrics div { border-width: 1px 0 0; border-radius: 0; background: transparent; }
.pmi-app--editorial .pmi-metrics div + div { border-inline-start-width: 1px; }

.pmi-app--editorial .pmi-room {
  padding: clamp(13px, 2.5vw, 24px);
  border: 1px solid var(--pmi-line);
  border-inline-start: 3px solid var(--pmi-accent);
  border-radius: 4px;
  background: var(--pmi-work-surface);
}

.pmi-app--editorial .pmi-faults-panel { border-radius: 5px; }
.pmi-app--editorial .pmi-fault-row { border-width: 0 0 1px; border-radius: 0; background: transparent; }
.pmi-app--editorial .pmi-empty { padding: 12px 0; }

.pmi-readout:not(.pmi-kiosk) { background: #eeedf0; }
.pmi-readout .pmi-public--editorial:not([data-mode="screen"]) {
  --pmi-ink: #181c28;
  --pmi-muted: #52596b;
  --pmi-line: #d9dbe4;
  --pmi-accent: #5131b6;
  --pmi-tint: #eeeaf8;
  max-width: 530px;
  padding: clamp(16px, 5vw, 34px);
  border-top: 3px solid var(--pmi-accent);
  border-radius: 5px;
  box-shadow: 0 12px 34px -26px #34314a7a;
}

.pmi-public--editorial .pmi-public-top { margin-bottom: 15px; }
.pmi-public--editorial .pmi-kicker > span { display: none; }
.pmi-public--editorial:not([data-mode="screen"]) .pmi-notice { padding: 0; border: 0; border-radius: 0; }
.pmi-public--editorial:not([data-mode="screen"]) .pmi-notice-top { padding-block: 10px; margin: 0 0 15px; border-block: 1px solid var(--pmi-line); }
.pmi-public--editorial:not([data-mode="screen"]) .pmi-notice h1 { font-size: clamp(28px, 6.7vw, 43px); line-height: 1.1; }
.pmi-public--editorial:not([data-mode="screen"]) .pmi-notice p { line-height: 1.65; }
.pmi-public--editorial .pmi-notice + .pmi-meta { margin-top: 16px; }
.pmi-public--editorial .pmi-fault-location {
  margin: 16px 0 0;
  border: 0;
  border-inline-start: 2px solid var(--pmi-accent);
  border-radius: 0;
  color: var(--pmi-ink);
  background: var(--pmi-tint);
}

.pmi-public--editorial .pmi-fault-location svg { color: var(--pmi-accent); }
.pmi-public--editorial.pmi-fault-public .pmi-lead { margin: 15px 0 19px; }
.pmi-public--editorial.pmi-fault-public .pmi-field select { min-height: 46px; border-radius: 5px; }
.pmi-public--editorial.pmi-fault-public .pmi-form .pmi-button { border-radius: 5px; min-height: 46px; }

.pmi-readout.pmi-kiosk { background: #101522; }
.pmi-public--editorial[data-mode="screen"] { max-width: 1180px; }
.pmi-public--editorial[data-mode="screen"] .pmi-notice {
  border-color: #42495d;
  border-inline-start: 4px solid #b6a5fa;
  border-radius: 4px;
  background: #1a2030;
}

.pmi-public--editorial[data-mode="screen"] .pmi-notice-top { border-color: #42495d; }
.pmi-public--editorial[data-mode="screen"] .pmi-notice h1 { line-height: 1.08; }

.pmio--editorial { border-radius: 9px; box-shadow: none; }
.pmio--editorial .pmio-top {
  min-height: 55px;
  padding-block: 9px;
  border-radius: 8px 8px 0 0;
  color: #f6f4ff;
  background: #1c2030;
}

.pmio--editorial .pmio-brand span,
.pmio--editorial .pmio-session { color: #d0ccde; }
.pmio--editorial .pmio-brand span { border-color: #53556a; }
.pmio--editorial .pmio-session::before { border-color: #c3b2ff; }
.pmio--editorial .pmio-nav { background: var(--pmio-paper); }
.pmio--editorial .pmio-panel { padding-top: clamp(21px, 3.5vw, 39px); }
.pmio--editorial .pmio-heading h3 { letter-spacing: -.045em; line-height: 1.1; }
.pmio--editorial .pmio-grid { gap: 18px clamp(15px, 2.4vw, 28px); }
.pmio--editorial .pmio-table thead { background: var(--pmio-paper); }
.pmio--editorial .pmio-table :is(th, td) { padding-inline: clamp(6px, 1.2vw, 13px); }
.pmio--editorial .pmio-action {
  padding: clamp(13px, 2vw, 23px);
  border: 1px solid var(--pmio-line);
  border-radius: 5px;
  background: var(--pmio-paper);
}

.pmio--editorial .pmio-action h4::before { display: none; }
.pmio--editorial :is(input, select, .pmio-primary) { border-radius: 5px; }
.pmio--editorial .pmio-footer { background: var(--pmio-paper); border-radius: 0 0 8px 8px; }

@media (max-width: 800px) {
  .pmi-app--editorial .pmi-hero { gap: 19px; }
  .pmi-app--editorial .pmi-workbench .pmi-preview { border-inline-start: 0; border-top: 1px solid var(--pmi-line); }
}

@media (max-width: 590px) {
  .pmi-app--editorial .pmi-hero-aside a { min-height: 48px; }
  .pmi-app--editorial .pmi-scenario:nth-child(odd) { border-inline-start: 0; }
  .pmi-app--editorial .pmi-scenario:nth-child(n+3) { border-top: 1px solid var(--pmi-line); }
  .pmi-app--editorial .pmi-nav .pmi-tab { min-height: 45px; }
}

@media (max-width: 390px) {
  .pmi-app--editorial { --pmi-work-pad: 12px; }
  .pmi-app--editorial .pmi-scenario { gap: 2px 6px; }
  .pmi-app--editorial .pmi-scenario > b { font-size: 13px; }
}