/* ============================================================================
   AgudaOS · bridge.css — the classic admin inside AgudaOS (SPEC §8.6).
   Every existing view and wave-1/2 app mounts unchanged in a window body (`.adm.win-body`). Here the classic panel variables
   (ui.css + admin.css: --paper, --ink, --teal-600, --coral, --sage-*, …) are re-pointed at the Pulse tokens, so the same markup
   follows the Pulse palette in BOTH themes. Only this file fixes contrast of classic views in AgudaOS; the views are untouched.
   Scope: window bodies, the phone frame, the admin kit's <dialog> modals and toasts, the system windows.
   ========================================================================== */

:root {
  /* Pulse values captured at :root before the classic names are re-pointed below (custom properties inherit computed values) */
  --pulse-focus: var(--focus);
  --pulse-text: var(--text);
}

:where(.win-body, .os-papp-body, body.os-body dialog.dlg, body.os-body .toasts, .os-sys-body) {
  --paper: var(--surface);
  --sage-50: var(--surface-2);
  --sage-100: var(--surface-3);
  --sage-200: color-mix(in srgb, var(--accent) 20%, var(--surface-3));
  --line-2: var(--control);
  --ink: var(--text);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --navy-950: var(--text);
  --navy-900: var(--text);
  --navy-700: var(--text-2);
  --navy-mist: var(--line-strong);
  --teal-700: var(--accent-press);
  --teal-600: var(--accent);
  --teal-400: var(--accent-hover);
  --teal-100: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --teal-50: var(--accent-tint);
  --coral: var(--danger);
  --coral-ink: var(--danger);
  --coral-100: color-mix(in srgb, var(--danger) 24%, var(--surface));
  --coral-50: var(--danger-tint);
  --ok: var(--success);
  --bad: var(--danger);
  --font: var(--font-ui);
  --focus: 0 0 0 3px color-mix(in srgb, var(--pulse-focus) 34%, transparent);
  --focus-bad: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
  --shadow-card: 0 1px 2px rgba(14, 13, 30, 0.08), 0 16px 32px -16px rgba(40, 24, 140, 0.3);
  --shadow-overlay: var(--flyout-shadow);
  --r-button: 999px;
  color: var(--text);
  font-family: var(--font-ui);
  accent-color: var(--accent);
  caret-color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) :where(.win-body, .os-papp-body, body.os-body dialog.dlg, body.os-body .toasts, .os-sys-body) {
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 32px -16px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme='dark'] :where(.win-body, .os-papp-body, body.os-body dialog.dlg, body.os-body .toasts, .os-sys-body) {
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 32px -16px rgba(0, 0, 0, 0.7);
}

/* ───────── page scaffolding inside a window: the window is the page ───────── */
.win-body > .wrap,
.os-papp-body .win-body > .wrap {
  max-inline-size: none;
  padding: 18px 22px 32px;
  min-block-size: 100%;
}
.os-papp-body .win-body > .wrap { padding: 14px 14px 40px; }
.win-body .page-head { margin-block-start: 0; }
.win-body .page-title,
.os-papp-body .page-title { font-family: var(--font-ui); font-weight: 700; color: var(--text); }
.win-body h1, .win-body h2, .win-body h3,
body.os-body dialog.dlg h2 { color: var(--text); }
.win-body a:not(.btn):not(.row-link):not(.op-tab),
body.os-body dialog.dlg a:not(.btn) { color: var(--accent); }
.win-body ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: inherit; }
.win-body .surface,
.os-sys-body .surface { background: var(--surface); border-color: var(--line); }
.win-body .forbidden, .os-sys-body .forbidden { margin-block: 12px; }

/* inputs, selects, buttons */
.win-body .inp,
body.os-body dialog.dlg .inp { background: var(--surface); color: var(--text); border-color: var(--control); }
:root[data-theme='dark'] .win-body .inp,
:root[data-theme='dark'] body.os-body dialog.dlg .inp { background: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .win-body .inp,
  :root:not([data-theme='light']) body.os-body dialog.dlg .inp { background: var(--surface-2); }
}
.win-body select.inp option { background: var(--surface); color: var(--text); }
.win-body .btn-primary,
body.os-body dialog.dlg .btn-primary { background: var(--accent); color: var(--on-accent); }
.win-body .btn-primary:hover,
body.os-body dialog.dlg .btn-primary:hover { background: var(--accent-hover); }
.win-body .btn-secondary,
body.os-body dialog.dlg .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--control); }
.win-body .btn-secondary:hover,
body.os-body dialog.dlg .btn-secondary:hover { background: var(--surface-3); border-color: var(--text-3); }
.win-body .btn-danger-solid,
body.os-body dialog.dlg .btn-danger-solid { background: var(--danger); color: var(--on-danger); }

/* the admin kit's modal dialog (Pulse sheet look) + toasts */
body.os-body dialog.dlg .dlg-head { background: var(--surface-2); color: var(--text); box-shadow: inset 0 -1px 0 var(--line); }
body.os-body dialog.dlg .dlg-head.is-danger { background: var(--danger-tint); }
body.os-body dialog.dlg .dlg-title { color: var(--text); font-size: 1.0625rem; }
body.os-body dialog.dlg .dlg-head.is-danger .dlg-title { color: var(--danger); }
body.os-body dialog.dlg .dlg-close { color: var(--text-2); }
body.os-body dialog.dlg .dlg-close:hover { background: var(--hover); color: var(--text); }
body.os-body dialog.dlg .dlg-close:focus-visible { outline-color: var(--pulse-focus); }
body.os-body dialog.dlg { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--flyout-shadow), 0 0 0 1px var(--win-stroke); }
body.os-body dialog.dlg::backdrop { background: var(--scrim); }
body.os-body .toasts .toast { background: var(--tooltip); color: var(--on-tooltip); box-shadow: var(--flyout-shadow); }

/* tables and rows */
.win-body table th { color: var(--text-3); }
.win-body tr:hover > td { background: var(--hover); }

/* skeletons */
.win-body .skel { background: var(--surface-3); }

/* ───────── responsive layouts follow the WINDOW, not the viewport ─────────
   admin.css sizes its layouts with viewport media queries; inside a window the same breakpoints apply to the window body
   (a size container), mirrored here. The classic shell never matches these (it has no `win` container). */
.win-body,
.os-papp-body > .win-body { container: win / inline-size; }

/* names and member numbers wrap at word boundaries (never letter by letter in a narrow window) */
.win-body .cell-main .row-link,
.win-body .cell-main .cell-sub { overflow-wrap: break-word; }
.win-body .tbl td:first-child .cell-main { min-inline-size: 9em; }

@container win (max-width: 1100px) {
  .ntf-compose { grid-template-columns: minmax(0, 1fr) 316px; }
  .nfc-channels { grid-template-columns: 1fr; }
  .am { grid-template-columns: minmax(0, 1fr) 316px; gap: 18px; }
  .phone { inline-size: 286px; block-size: 584px; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-cell:nth-child(n) { border-inline-start: 1px solid var(--line); border-block-start: 1px solid var(--line); }
  .ledger-cell:nth-child(2n + 1) { border-inline-start: 0; }
  .ledger-cell:nth-child(-n + 2) { border-block-start: 0; }
}
@container win (max-width: 960px) {
  .ntf-compose, .ntf-detail { grid-template-columns: 1fr; }
  .ntf-side, .ntf-detail-side { position: static; }
  .ntf-side-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .dash-grid, .card-pane, .scan, .split { grid-template-columns: 1fr; }
  .scan { grid-template-areas: 'cam' 'result' 'ctrl'; grid-template-rows: auto; }
  .card-stage-adm { position: static; max-inline-size: 420px; }
  .set-row { grid-template-columns: 1fr; gap: 10px; }
  .scan-cam { aspect-ratio: 4 / 3.4; }
}
@container win (max-width: 900px) {
  .am { grid-template-columns: 1fr; }
  .am-side { position: static; order: -1; }
  .am-side .phone { transform: scale(0.82); transform-origin: top center; margin-block-end: -104px; }
}
@container win (max-width: 760px) {
  .ntf-side-in { grid-template-columns: 1fr; }
  .ledger.ledger--ntf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nfc-rollout { grid-template-columns: 1fr; }
  .nfc-rollout-side { justify-items: start; }
  .alias-panel, .taps { padding-inline-start: 0; }
  .scan-src { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .src { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 4px; }
  .src-txt small { white-space: normal; }
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .col-opt { display: none; }
  .st-head { grid-template-columns: auto 1fr; }
  .st-head-actions { grid-column: 1 / -1; }
  .limit-strip { grid-template-columns: 1fr; }
  .limit-strip > div { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .limit-strip > div:first-child { border-block-start: 0; }
  .verdict-body { grid-template-columns: 110px 1fr; gap: 16px; padding: 18px; }
  .scan-fields { grid-template-columns: 1fr; gap: 8px; }
  .type-opts { grid-template-columns: 1fr; }
  .kv2 { grid-template-columns: 1fr; }
  .kv2 dt { border-block-end: 0; padding-block-end: 0; }
  .kv2 dd { padding-block-start: 2px; }
  .ev-msg { grid-template-columns: minmax(0, 1fr); }
}
@container win (max-width: 640px) {
  .wrap { padding-inline: 14px; }
  .page-title { font-size: 1.25rem; }
  .surface-head, .surface-body, .filters, .pager, .filter-summary, .surface-foot { padding-inline: 16px; }
  .surface-body { padding-block: 18px; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filters .f-search { grid-column: 1 / -1; }
  .filters .fld { min-inline-size: 0; }
  .tbl th, .tbl td { padding-inline: 8px; }
  .tbl th:first-child, .tbl td:first-child { padding-inline-start: 14px; }
  .cell-main { gap: 9px; }
  .thumb { inline-size: 30px; block-size: 40px; }
  .tbl .t-num { white-space: normal; }
  .ledger { grid-template-columns: 1fr 1fr; }
  .ledger-cell { padding: 16px; }
  .fig { font-size: 1.75rem; }
  .st-head { padding: 16px; gap: 14px; }
  .st-photo { inline-size: 76px; }
  .st-name { font-size: 1.375rem; }
  .verdict { padding: 16px 18px; gap: 14px; flex-wrap: wrap; }
  .verdict-body { grid-template-columns: 96px 1fr; }
  .scan-name { font-size: 1.375rem; }
  .set-row, .set-group-title { padding-inline: 16px; }
  .pq-grid, .photo-grid { padding: 16px; grid-template-columns: 1fr; }
  .tl { padding-inline: 16px; }
  .action-row { grid-template-columns: 1fr; padding-inline: 16px; }
  .todo a, .feed li { padding-inline: 16px; }
  .phone { transform: scale(0.9); transform-origin: top center; margin-block-end: -60px; }
  .stepper li span.lbl { display: none; }
  .stepper li[aria-current='step'] span.lbl { display: inline; }
  .dbar-wrap, .ntf-errors, .push-recent, .nfc-channels, .nfc-rollout { padding-inline: 16px; }
  .alias-tbl thead { display: none; }
  .alias-tbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px; border-block-end: 1px solid var(--line); }
  .alias-tbl td { display: block; padding: 0 !important; border: 0; }
  .alias-tbl td:nth-child(3) { grid-column: 1 / -1; }
}

/* ───────── dark islands and inverse bars ─────────
   --navy-950 is both a text colour and the classic "dark surface". Text follows --text (above); the camera frames, phone
   frames and code blocks stay dark in both themes, and the unsaved-changes / bulk bars take the inverse (tooltip) surface —
   their text is --paper, which the bridge maps to --surface, the inverse of --tooltip in both themes. */
.win-body :is(.scan-cam, .w1-phone, .cmd, .scan-start, .profile-banner, .nfc-dev),
.win-body .app-booth :is(.bo-scan, .bo-frame) { background-color: #0E0D1E; color: #F3F3F9; --paper: #F3F3F9; --navy-mist: #BFBFCE; --ink-3: #BFBFCE; }
.win-body .scan-video,
.win-body .app-booth .bo-scan-start { background: #0E0D1E; }
.win-body .dirty-bar,
.win-body .app-campus .cs-bulk { background: var(--tooltip); color: var(--on-tooltip); box-shadow: var(--flyout-shadow); }
.win-body .dirty-bar .btn-secondary { background: transparent; color: var(--on-tooltip); border-color: color-mix(in srgb, var(--on-tooltip) 40%, transparent); }
.win-body .dirty-bar .btn-secondary:hover { background: color-mix(in srgb, var(--on-tooltip) 12%, transparent); }
.win-body .dirty-bar .diamond { background: var(--pulse); }

/* Pulse markers: the classic diamond becomes the Pulse square dot inside AgudaOS (BRAND §12: no diamonds in the system) */
.win-body .diamond,
body.os-body dialog.dlg .diamond { transform: none; border-radius: 2px; inline-size: 6px; block-size: 6px; }

/* toasts: the inverse surface, status icons readable on it in both themes */
body.os-body .toasts .toast--ok svg { color: #56DB8F; }
body.os-body .toasts .toast--bad svg { color: #FF7D7C; }
:root[data-theme='dark'] body.os-body .toasts .toast--ok svg { color: #008246; }
:root[data-theme='dark'] body.os-body .toasts .toast--bad svg { color: #D01B2D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body.os-body .toasts .toast--ok svg { color: #008246; }
  :root:not([data-theme='light']) body.os-body .toasts .toast--bad svg { color: #D01B2D; }
}