/* popup.css: loaded last. Floating inspector window, Elvi topic picker, GB unified portrait frame, PS1 scrolling notebook paper, 320px PS1-2D controls.
   Raster art is opt-in: html[data-vp-*] is set by src/ui/uiAssetProbe.js only when the file under assets/ui/visual-polish-2026-10-10/ loads (contract: docs/handoff/2026-10-10-polish/UI_ASSET_REQUEST.json). */
:root {
  --vp-gb-frame: url("../../../assets/ui/visual-polish-2026-10-10/gb-portrait-frame.png");
  --vp-ps1-paper: url("../../../assets/ui/visual-polish-2026-10-10/ps1-paper-tile.png");
  --vp-z-popup: 90;
}

/* ---- floating inspector window (GB and PS1) ---- */
html body > #tapInspectPanel.ui-inspect:not([hidden]) {
  position: fixed !important; z-index: var(--vp-z-popup); box-sizing: border-box; margin: 0; right: auto; bottom: auto;
  display: flex; flex-direction: column; height: auto !important; min-width: 160px; transform: none !important;
  overflow-y: auto; overscroll-behavior: contain; cursor: default; pointer-events: auto; touch-action: pan-y;
  font-size: max(10px, var(--fs-body, 14px)); line-height: 1.5; animation: none;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}
html body > #tapInspectPanel.ui-inspect:not([hidden])::after { content: none; display: none; }   /* the old "tap to close" footer */
html body > #tapInspectPanel .tap-inspect-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--sp-2, 8px); margin: 0 0 var(--sp-2, 8px);
  padding: 4px 4px 4px 12px; min-height: 36px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
html body > #tapInspectPanel[data-dragging] .tap-inspect-head { cursor: grabbing; }
html body > #tapInspectPanel .tap-inspect-head > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body > #tapInspectPanel .tap-inspect-head > span { flex: 0 0 auto; }
html body > #tapInspectPanel .ui-popup-x {
  order: 9; flex: 0 0 auto; margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation;
}
html body > #tapInspectPanel .ui-popup-x .ui-sym { width: 16px; height: 16px; fill: currentColor; pointer-events: none; }
html body > #tapInspectPanel :is(.inspect-block, .tap-inspect-empty, .inspect-body) { cursor: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }   /* text / asset selection stays OFF outside text inputs (Android long-press) */
html body > #tapInspectPanel :is(.inspect-block, .tap-inspect-empty) { margin-inline: 12px; }

html[data-skin="gb"] body > #tapInspectPanel.ui-inspect:not([hidden]) {
  background: var(--gb-0); color: var(--gb-3); border: var(--gb-dot) solid var(--gb-3); border-radius: 0;
  font-size: max(10px, var(--gb-glyph)); box-shadow: calc(var(--gb-dot) * 2) calc(var(--gb-dot) * 2) 0 var(--gb-2);
}
html[data-skin="gb"] body > #tapInspectPanel .tap-inspect-head { background: var(--gb-3); color: var(--gb-0); }
html[data-skin="gb"] body > #tapInspectPanel .tap-inspect-head > span { color: var(--gb-1); }
html[data-skin="gb"] body > #tapInspectPanel .inspect-block > span { color: var(--gb-2); }

html[data-skin="ps1"] body > #tapInspectPanel.ui-inspect:not([hidden]) {
  color: var(--nb-ink); border: 1px solid var(--nb-pencil-line); border-radius: 3px;
  background-color: var(--nb-paper-2); background-image: var(--nb-ruled), var(--nb-sheet); background-size: 100% var(--nb-rule-step), var(--nb-sheet-size);
  background-attachment: local;
}
html[data-skin="ps1"] body > #tapInspectPanel .tap-inspect-head { background: var(--nb-paper-3); border-bottom: 2px solid var(--nb-ink-2); }
@media (max-width: 480px) {   /* small phones: ratio-sized by JS (92% x 50% of the viewport); keep the inner type readable */
  html body > #tapInspectPanel .ui-popup-x { width: 44px; height: 44px; }
  html body > #tapInspectPanel .tap-inspect-head { min-height: 44px; }
}

/* ---- Elvi topic picker ---- */
.contact-topics { position: fixed; inset: 0; z-index: calc(var(--vp-z-popup) + 10); display: grid; place-items: center; padding: 12px; background: rgb(0 0 0 / 0.45); }
.contact-topics__card { box-sizing: border-box; width: min(100%, 320px); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--c-surface, #f3ecdc); color: var(--c-ink, #292a2d); border: 2px solid currentColor; }
.contact-topics__title { margin: 0 0 2px; font-size: max(12px, var(--fs-body, 14px)); font-weight: 700; }
.contact-topics__list { display: flex; flex-direction: column; gap: 6px; }
.contact-topics__btn, .contact-topics__cancel { min-height: 44px; padding: 6px 10px; font: inherit; font-size: max(12px, var(--fs-body, 14px)); text-align: left; color: inherit; background: transparent; border: 1px solid currentColor; cursor: pointer; touch-action: manipulation; }
.contact-topics__cancel { text-align: center; opacity: 0.85; }
.contact-topics :is(button):focus-visible { outline: 3px solid currentColor; outline-offset: 1px; background: color-mix(in srgb, currentColor 14%, transparent); }
html[data-skin="gb"] .contact-topics__card { background: var(--gb-0); color: var(--gb-3); border: var(--gb-dot) solid var(--gb-3); border-radius: 0; font-size: max(10px, var(--gb-glyph)); }
html[data-skin="gb"] .contact-topics :is(.contact-topics__title, .contact-topics__btn, .contact-topics__cancel) { font-size: max(10px, var(--gb-glyph)); }
html[data-skin="gb"] .contact-topics__btn:focus-visible { background: var(--gb-3); color: var(--gb-0); outline: 0; }
html[data-skin="ps1"] .contact-topics__card { background-color: var(--nb-paper-2); background-image: var(--nb-sheet); background-size: var(--nb-sheet-size); border: 1px solid var(--nb-pencil-line); border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { html:not([data-reduced-motion="1"]) .contact-topics__card { animation: vp-topic-in 140ms ease-out both; } }
@keyframes vp-topic-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- GB portrait: ONE raster frame (gb-portrait-frame.png, 480 x 804 = the 120 x 201 dot console at 4 px per dot) carries screen, pad and the five keys ----
   touchControls.js cuts it into --c3-top / --c3-mid / --c3-bot (so the tube window still stretches by --cext, exactly like the older console) and sets html[data-gb-frame].
   Key rects below are MEASURED on the picture, in art dots: pad cols x 16 / 35.5 / 55.5 (w 17.5), rows y 98.5 / 118.5 / 138.5 (h 16.5); right column x 81.8 w 20, y 93.8 + 17.2 * i, h 14.4.
   The tube window is x 20..100, y 20..83 (the older console: 17..103, 18..87). The picture draws every key; the buttons are transparent hit boxes, only the pressed state is drawn. */
@media (orientation: portrait) {
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] {
    --gb-scr-left: calc(var(--cx) + var(--cd) * 20); --gb-scr-top: calc(var(--cy) + var(--cd) * 20);
    --gb-scr-w: calc(var(--cd) * 80); --gb-scr-h: calc(var(--cd) * (63 + var(--cext)));
  }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-deck .ui-actions[data-five]::before { content: none; display: none; }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-dpad__btn:is([data-action="up-left"], [data-action="left"], [data-action="down-left"]) { --px: 16; }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-dpad__btn:is([data-action="up"], [data-action="down"], [data-dir="wait"]) { --px: 35.5; }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-dpad__btn:is([data-action="up-right"], [data-action="right"], [data-action="down-right"]) { --px: 55.5; }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-dpad__btn:is([data-action="up-left"], [data-action="up"], [data-action="up-right"]) { --py: 98.5; }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-dpad__btn:is([data-action="left"], [data-dir="wait"], [data-action="right"]) { --py: 118.5; }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-dpad__btn:is([data-action="down-left"], [data-action="down"], [data-action="down-right"]) { --py: 138.5; }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-deck .ui-dpad__btn { --pw: 17.5; --ph: 16.5; }
  /* the five keys: right column, one hit box per drawn key; the icons are SVG on the blank caps */
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-deck .ui-actions[data-five] > .ui-five[data-five-key] {
    left: calc(var(--cd) * 81.8) !important; width: calc(var(--cd) * 20) !important; height: calc(var(--cd) * 14.4) !important; min-height: 0 !important;
    top: calc(var(--cd) * (93.8 + var(--cext) + var(--five-i, 0) * 17.2)) !important;
    background: none; box-shadow: none; color: var(--gb-five-ink, #292a2d); --five-ico: calc(var(--cd) * 8);
  }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-deck .ui-actions[data-five] > .ui-five[data-five-key="contact"] { --five-i: 4; left: calc(var(--cd) * 81.8) !important; width: calc(var(--cd) * 20) !important; top: calc(var(--cd) * (93.8 + var(--cext) + 4 * 17.2)) !important; }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-deck .ui-actions[data-five] > .ui-five[data-five-key]::after {
    content: ""; display: block; position: absolute; inset-block: calc(min(max(0px, (44px - var(--cd) * 14.4) / 2), var(--cd) * 1.4 - 0.5px) * -1); inset-inline: calc(max(0px, (44px - var(--cd) * 20) / 2) * -1);
  }
  html[data-gb-frame][data-skin="gb"][data-console-live][data-pad-layout="cross"] .ui-deck .ui-actions[data-five] > .ui-five[data-five-key]:is(:active, .is-pressed):not(:disabled) {
    background: none; box-shadow: inset 0 0 0 calc(var(--cd) * 30) rgb(20 14 10 / 0.3); border-radius: calc(var(--cd) * 3);
  }
}

/* ---- PS1 portrait: ONE raster frame (ps1-portrait-frame.png, 853 x 1844) carries screen, 3 x 3 pad and the five keys ----
   touchControls.js sets --fp-* from the measured rects (screen 42,52 770x995; controls/deck 80,1212 690x483) and html[data-ps1-frame]. Everything below is a percentage of the deck, so it follows
   the stretched picture at any width (320 included): pad block x 90..551 y 1218..1672; five keys x 593..757, y 1218 + 95 * i, h 82. The old rocker / key cut-outs are not drawn. */
@media (orientation: portrait) {
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field { background-color: transparent; }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck > .ui-dpad {
    left: 1.449%; top: 1.242%; width: 66.812%; height: 93.995%; background: none;
  }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck > .ui-dpad::after { background: rgb(255 240 220 / 0.2); filter: none; }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck > .ui-dpad .ui-dpad__btn[data-ctl]:is(:active,.is-pressed):not(:disabled) {
    background: rgb(0 0 0 / 0.38); filter: none; transform: none;
  }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck > .ui-actions[data-five] {
    display: block !important; position: absolute !important; left: 74.348%; top: 0; width: 23.768%; height: 100%; min-width: 0; min-height: 0; padding: 0; gap: 0;
    background: none; border-radius: 0; box-shadow: none; pointer-events: none;
  }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck .ui-actions[data-five] > .ui-five[data-five-key] {
    position: absolute !important; left: 0 !important; width: 100% !important; height: 16.977% !important; min-height: 0 !important;
    top: calc(1.242% + var(--five-i, 0) * 19.668%) !important; grid-column: auto; border-radius: 9px; background: none; box-shadow: none; filter: none; pointer-events: auto;
  }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck .ui-actions[data-five] > .ui-five[data-five-key="action"] { --five-i: 0; }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck .ui-actions[data-five] > .ui-five[data-five-key="item"] { --five-i: 1; }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck .ui-actions[data-five] > .ui-five[data-five-key="spell"] { --five-i: 2; }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck .ui-actions[data-five] > .ui-five[data-five-key="menu"] { --five-i: 3; }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck .ui-actions[data-five] > .ui-five[data-five-key="contact"] { --five-i: 4; }
  /* the icons are in the picture: the live ones stay for assistive tech only */
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck .ui-actions[data-five] > .ui-five[data-five-key] > .ui-five__ico { opacity: 0 !important; }
  html[data-skin="ps1"][data-ps1-frame][data-faceplate][data-ctl-ps1] .ui-field .ui-deck .ui-actions[data-five] > .ui-five[data-five-key]:is(:active, .is-pressed):not(:disabled) {
    background: rgb(0 0 0 / 0.38); box-shadow: none; filter: none;
  }
}

/* ---- PS1 notebook: paper repeats, ruled lines belong to the scrolling text (they move with it) ---- */
html[data-skin="ps1"] :is(.ui-menu .ui-detail__content, .ui-menu .ui-list__rows, .product-flow-panel, .record-fullscreen-panel) {
  background-color: var(--nb-paper-2);
  background-image: var(--nb-ruled), var(--nb-sheet);
  background-size: 100% var(--nb-rule-step), var(--nb-sheet-size);
  background-repeat: repeat, repeat;
  background-attachment: local, local;   /* the paper and its rules are part of the scrolled content, not of the frame */
  background-position: 0 0, 0 0;
}
html[data-skin="ps1"][data-vp-ps1-paper] :is(.ui-menu .ui-detail__content, .ui-menu .ui-list__rows, .product-flow-panel, .record-fullscreen-panel, body > #tapInspectPanel.ui-inspect:not([hidden])) {
  background-image: var(--vp-ps1-paper); background-size: 256px 256px; background-repeat: repeat; background-attachment: local;
}

/* ---- PS1-2D at 320px: the controls were wider than the frame (fallback only; with the unified frame the deck is a percentage box inside it and needs none of this) ---- */
@media (max-width: 360px) {
  html[data-skin="ps1"]:not([data-ps1-frame]) .ui-field { overflow-x: clip; }
  html[data-skin="ps1"]:not([data-ps1-frame]) .ui-field .ui-deck { box-sizing: border-box; max-width: 100%; min-width: 0; padding-inline: min(var(--sp-2, 8px), 2vw); gap: min(var(--sp-2, 8px), 2vw); overflow: hidden; }
  html[data-skin="ps1"]:not([data-ps1-frame]) .ui-deck .ui-dpad { max-width: 100%; min-width: 0; flex: 1 1 0; }
  html[data-skin="ps1"]:not([data-ps1-frame]) .ui-deck .ui-actions { max-width: 100%; min-width: 0; flex: 0 1 auto; }
  html[data-skin="ps1"]:not([data-ps1-frame]) .ui-deck :is(.ui-dpad__btn, .ui-actions[data-five] > .ui-five) { min-width: 0; max-width: 100%; }
  html[data-skin="ps1"]:not([data-ps1-frame]) .ui-deck .ui-actions[data-five] { flex-wrap: wrap; justify-content: center; max-width: 100%; }
}