/* V2 supporting surfaces. Content stays responsive and native dialogs remain keyboard accessible. */
#viewSettings, #viewLab, .data-sheet, .v4-dialog, .sheet-dialog, .install-dialog {
  --bg: #f7f3e9; --paper: #eee8da; --navy: #181713; --ink: #181713;
  --muted: #625e55; --faint: #777268; --line: #ded5c4; --line-2: #ded5c4;
  color: var(--ink);
}
#viewSettings .settings { gap: 6px; padding-top: 4px; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
#viewSettings .settings-label { padding: 16px 3px 0; font-size: 11px; font-weight: 750; letter-spacing: .08em; color: #777268; }
#viewSettings .settings-label:first-child { padding-top: 8px; }
#viewSettings .settings-card { padding: 0; gap: 0; border-radius: 19px; background: #ffffffaa; box-shadow: inset 0 0 0 1px #1817130b; overflow: hidden; }
#viewSettings .settings-card > .segmented { margin: 12px 13px; }
#viewSettings .segmented-pill { padding: 4px; gap: 4px; background: #eee8da; border-radius: 14px; }
#viewSettings .segmented-pill button { min-height: 44px; border-radius: 11px; font-size: 13px; padding: 8px; }
#viewSettings .segmented-pill button[aria-pressed="true"] { background: #181713; color: #fff; }
#viewSettings .settings-line { padding: 12px 13px; min-height: 64px; gap: 12px; border-bottom-color: #1817130f; font-size: 14px; font-weight: 650; }
#viewSettings .settings-line > span:first-child { flex: 1; }
#viewSettings .settings-line small, #viewSettings .settings-line .settings-sub { display: block; color: #777268; font-size: 12px; font-weight: 400; margin-top: 4px; line-height: 1.4; }
#viewSettings .settings-value { color: #625e55; font-size: 12px; font-weight: 650; text-align: right; }
#viewSettings .settings-notation { flex-wrap: wrap; }
#viewSettings .notation-chips { flex-wrap: wrap; gap: 6px; }
#viewSettings .notation-chip { min-height: 44px; padding: 8px 10px; background: #eee8da; font-size: 12px; }
#viewSettings .notation-chip[data-english="true"] { background: #fff; box-shadow: inset 0 0 0 1px #ded5c4; }
#viewSettings .settings-account { min-height: 76px; padding: 12px 13px; gap: 12px; }
#viewSettings .settings-title { font-size: 14px; font-weight: 650; }
#viewSettings .settings-sub { font-size: 12px; line-height: 1.4; color: #777268; }
#viewSettings .settings-install, #viewSettings .lab-entry { min-height: 64px; padding: 12px 13px; border-radius: 19px; border: 0; background: #ffffffaa; box-shadow: inset 0 0 0 1px #1817130b; }
#viewSettings .settings-install i, #viewSettings .lab-entry i { font-size: 24px; color: #b8b2a6; }
#viewSettings .account-button { min-height: 44px; padding: 8px 12px; font-size: 12px; color: #fff; }
#viewSettings .settings-foot { margin-top: 12px; font-size: 11px; color: #777268; }

/* Game details and the export panel use the same paper cards as the V2 viewer. */
.data-sheet { margin: 8px 0 0; padding: 12px 0 calc(24px + env(safe-area-inset-bottom, 0px)); min-height: 0; border-radius: 0; background: #f7f3e9; gap: 14px; }
.data-head h2 { margin: 4px 0 8px; padding: 0; font-family: var(--sans, system-ui, sans-serif); font-size: clamp(26px, 7vw, 31px); line-height: 1.08; font-weight: 750; letter-spacing: -.035em; }
.data-head p { margin: 0 0 8px; padding: 0; font-size: 13px; color: #625e55; line-height: 1.5; }
.data-section { margin-bottom: 8px; }
.data-section h3, .data-section h2 { font-family: var(--sans, system-ui, sans-serif); margin: 0 0 7px; color: #777268; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.data-rows { padding: 0 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #1817130d; }
.data-row { min-height: 57px; gap: 12px; padding: 6px 0; border-bottom-color: #1817130f; color: #777268; font-size: 14px; }
.data-row input { min-width: 0; width: 50%; min-height: 44px; color: #181713; font-size: 16px; font-weight: 650; }
.data-row input:focus-visible { box-shadow: inset 0 -2px 0 #936521; }
.data-result { flex-wrap: wrap; }
.data-result .result-segments { gap: 4px; }
.data-result .result-segments button { min-width: 44px; min-height: 44px; border-radius: 11px; }
.data-pgn { flex: initial; width: 100%; min-height: 210px; border: 0; border-radius: 18px; background: #fff; padding: 15px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: #302e28; box-shadow: inset 0 0 0 1px #1817130d; resize: vertical; }
.data-actions { gap: 8px; }
.data-actions button { height: auto; min-height: 48px; padding: 10px 8px; border-radius: 15px; font-size: 13px; background: #eee8da; color: #181713; border: 0; }
.data-save { min-height: 54px; border-radius: 16px; background: #181713; color: #fff; }
.data-apply, .new-scan { min-height: 44px; }
.export-note { padding: 14px; border-radius: 16px; background: #eee8da; color: #625e55; font-size: 13px; line-height: 1.45; }
.export-note strong { display: block; margin-bottom: 3px; color: #302e28; }

/* Bottom sheets are viewport-sized, with scroll room above the device inset. */
.v4-dialog, .sheet-dialog, .install-dialog { width: min(100%, 640px); max-width: 640px; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); margin: auto auto 0; padding: 0; border: 0; border-radius: 28px 28px 0 0; background: #f7f3e9; overflow-y: auto; box-shadow: 0 -20px 60px #0003; }
.v4-dialog::backdrop, .sheet-dialog::backdrop, .install-dialog::backdrop { background: #18171366; backdrop-filter: blur(3px); }
.v4-dialog form, .sheet-dialog form, .install-dialog form { position: relative; display: grid; gap: 14px; padding: 26px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.v4-dialog form::before, .sheet-dialog form::before, .install-dialog form::before { content: ""; display: block; justify-self: center; width: 36px; height: 4px; border-radius: 4px; background: #d4cec2; margin: -16px 0 4px; }
.sheet-dialog .sheet-handle { display: none; }
.v4-dialog h2, .sheet-dialog h2, .install-dialog h2 { padding: 0; margin: 0; font-family: var(--sans, system-ui, sans-serif); font-size: 24px; line-height: 1.15; letter-spacing: -.025em; color: #181713; }
.v4-dialog p { color: #625e55; font-size: 14px; line-height: 1.5; }
.dialog-actions { gap: 8px; }
.dialog-actions button { min-height: 50px; height: auto; padding: 12px; border-radius: 16px; font-size: 14px; }
.dialog-primary, .dialog-primary.dark { background: #181713; color: #fff; }
.dialog-secondary { border: 0; background: #eee8da; color: #302e28; }
.dialog-danger { background: #a63c35; color: #fff; }
#deleteDialog .dialog-actions { flex-direction: column-reverse; }
#deleteDialog form, #fullDialog form { text-align: center; }
#fullDialog .oldest-row { padding: 12px; background: #eee8da; border-radius: 14px; text-align: left; }
.access-input { min-height: 50px; background: #fff; border: 1px solid #ded5c4; letter-spacing: .12em; }
.choice-list { padding: 0; background: #fff; border-radius: 17px; overflow: hidden; box-shadow: inset 0 0 0 1px #1817130d; }
.choice-row { min-height: 67px; height: auto; padding: 10px 13px; gap: 12px; border-bottom-color: #1817130f; }
.choice-row strong { font-size: 14px; }
.choice-row small { margin-top: 4px; font-size: 12px; line-height: 1.4; color: #777268; }
.choice-row i { flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid #d4cec2; font-size: 12px; }
.choice-row[aria-pressed="true"] { background: #fffdf8; }
.choice-row[aria-pressed="true"] i { background: #181713; border-color: #181713; color: #fff; }
.sheet-sub, .engine-footnote { font-size: 13px; line-height: 1.4; color: #777268; }
.engine-footnote { margin: 0; padding: 12px 13px; background: #eee8da; border-radius: 14px; }
.sheet-close { justify-self: end; min-height: 44px; min-width: 44px; border: 0; border-radius: 50%; background: #eee8da; color: #181713; }

/* Diagnostic tools remain visible only inside the laboratory. */
#viewLab { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
#viewLab .lab-topbar { background: transparent; color: #181713; padding: 0; margin-bottom: 20px; border-radius: 0; min-height: 44px; }
#viewLab .lab-topbar .icon-button { min-width: 44px; min-height: 44px; border-radius: 50%; background: #ffffffaa; color: #181713; }
#viewLab .lab-topbar .result-topbar-copy strong { color: #181713; font-size: 16px; }
#viewLab .lab-topbar .result-topbar-copy span { color: #625e55; font-size: 12px; }
.lab-hero { padding: 16px 17px; border-radius: 20px; background: linear-gradient(145deg, #211f1a, #11110f); color: #fff; margin-bottom: 20px; }
.lab-hero > span { display: inline-flex; padding: 5px 8px; border-radius: 9px; background: #ddae622e; color: #ddae62; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.lab-hero h1 { margin: 10px 0 5px; font-size: 29px; line-height: 1.15; letter-spacing: -.03em; }
.lab-hero p { margin: 0; color: #ffffffb3; font-size: 13px; line-height: 1.45; }
#viewLab > .card { background: #fff; padding: 14px; border-radius: 17px; border: 0; box-shadow: inset 0 0 0 1px #1817130d; margin-bottom: 18px; }
#viewLab .section-head { flex-wrap: wrap; gap: 12px; }
#viewLab .section-head h2 { font-size: 17px; font-family: var(--sans, system-ui, sans-serif); line-height: 1.3; }
#viewLab .eyebrow { font-size: 10px; letter-spacing: .08em; color: #777268; }
#viewLab p { font-size: 13px; line-height: 1.5; }
#viewLab .secondary-action { min-height: 44px; border: 0; border-radius: 11px; padding: 10px 12px; background: #eee8da; color: #302e28; font-size: 12px; }
#viewLab .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#viewLab .metric { padding: 12px; border-radius: 15px; background: #f7f3e9; }
#viewLab .metric strong { display: block; font-size: 22px; }
#viewLab .metric span { font-size: 12px; line-height: 1.4; }
#viewLab .reference { min-height: 140px; border: 1px solid #ded5c4; border-radius: 14px; font-size: 13px; }
#viewLab .debug summary { display: flex; align-items: center; min-height: 44px; font-size: 13px; }
#viewLab .debug pre { border-radius: 14px; padding: 12px; font: 12px/1.5 ui-monospace, monospace; color: #e7dfc8; background: #181713; }
#viewLab .model-run, #viewLab .segmentation-case { background: #eee8da; border-radius: 14px; }
@media (max-width: 360px) {
  #viewSettings .settings-account { flex-wrap: wrap; }
  .data-actions { grid-template-columns: 1fr 1fr; }
  .data-actions #sharePgn { grid-column: 1 / -1; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions button { flex-basis: 100%; }
  #viewLab .model-compare-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-transparency: reduce) {
  #viewSettings .settings-card, #viewSettings .settings-install, #viewSettings .lab-entry { background: #fff; }
  .v4-dialog::backdrop, .sheet-dialog::backdrop, .install-dialog::backdrop { backdrop-filter: none; }
}

#viewSettings .segmented-pill[data-target="scanMode"] button { padding:8px 4px; min-width:0; min-height:52px; font-size:12px; overflow-wrap:anywhere; }