@import './menu-popups.css';
/* Copyright (c) 2026 shatter. All rights reserved.
   Generic browser presentation of native-exported geometry and material tokens.
   The native export supplies palette, sizes, labels and choices. CSS owns only
   browser widget mechanics and the explicit narrow, readable layout. */
@font-face { font-family:Inter;src:url('./fonts/inter-medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap; }
@font-face { font-family:Inter;src:url('./fonts/inter-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap; }
@font-face { font-family:Inter;src:url('./fonts/inter-semibold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap; }
@font-face { font-family:'JetBrains Mono';src:url('./fonts/jetbrains-mono-medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap; }
@font-face { font-family:Lucide;src:url('./fonts/lucide.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap; }
.smp { position:relative; isolation:isolate; width:100%; min-width:0; color:var(--menu-text); font:400 13px/1.4 Inter,Arial,sans-serif; text-align:left; letter-spacing:0; }
.smp[data-menu-auxiliary='combat'],.smp[data-menu-auxiliary='vision'] { display:grid;grid-template-columns:var(--menu-main-width) var(--menu-companion-width);gap:var(--menu-composite-gap);align-items:start;justify-content:center; }
.smp[data-menu-aux-stack='true'] { grid-template-columns:minmax(0,1fr); }
.smp-companion { width:var(--menu-companion-width,320px);max-width:100%;min-width:0;justify-self:center; }
.smp *, .smp *::before, .smp *::after { box-sizing:border-box; }
.smp [hidden] { display:none!important; }
.smp button, .smp input { font:inherit; color:inherit; letter-spacing:0; }
.smp button { cursor:pointer; border:0; background:none; text-align:left; }
.smp button:disabled, .smp input:disabled { cursor:default; opacity:.48; }
.smp h3, .smp h4, .smp p { margin:0; letter-spacing:0; }
.smp img { display:block; }
.smp :focus-visible { outline:2px solid var(--menu-ice); outline-offset:3px; }
.smp-message { padding:40px 28px; color:#c2ccd3; background:#24262a; border-radius:12px; }
.smp-native-viewport { position:relative;overflow:hidden;width:100%;max-width:100%;min-width:0;margin-inline:auto;background:transparent; }
.smp-native-stage { position:absolute;left:0;top:0;transform-origin:0 0;background:transparent;overflow:hidden; }
.smp-native-stage .smp-panel,.smp-native-stage .smp-native-text,.smp-native-image,.smp-native-icon { position:absolute;pointer-events:none; }
.smp-native-icon { mask-position:center;mask-repeat:no-repeat;mask-size:100% 100%;line-height:1;text-align:center; }
.smp-native-gradient { display:block;width:100%;height:100%;border-radius:inherit; }
.smp-native-image { object-fit:fill;max-width:none; }
.smp-native-hit { position:absolute;padding:0;z-index:2;background:transparent!important;border:0; }
.smp-native-hit:hover { background:rgba(255,255,255,.025)!important; }
.smp-control-hit { inset:0;width:100%;height:100%; }
.smp-native-choice { position:relative;width:100%;max-width:100%;overflow-x:auto; }
.smp-choice-stage { position:relative; }
.smp[data-menu-layout='narrow'] .smp-control-native-choice { flex-direction:column;align-items:stretch; }
.smp[data-menu-layout='narrow'] .smp-control-native-choice>.smp-widget { width:100%!important;flex-basis:auto!important;max-width:100%!important; }
.smp-dialog { position:fixed;max-width:600px;width:calc(100% - 32px);max-height:80vh;border:1px solid var(--menu-edge);border-radius:var(--menu-shell-radius);background:#202126;color:var(--menu-text);padding:24px; }
.smp-dialog::backdrop { background:rgba(0,0,0,.62);backdrop-filter:blur(8px); }
.smp-chord-dialog { width:min(760px,calc(100% - 24px));max-height:92vh;overflow:auto;padding:0;border:1px solid var(--menu-edge);border-radius:12px;background:#181a1e;color:var(--menu-text); }
.smp-chord-dialog::backdrop { background:rgba(0,0,0,.62);backdrop-filter:blur(8px); }
.smp-dialog h3 { font-size:19px;padding:0 30px 20px 0; }
.smp-dialog-close { position:absolute;top:10px;right:10px;width:40px;height:40px;text-align:center!important;font-size:24px!important; }
.smp-dialog-detail { color:var(--menu-secondary);font-size:13px; }
.smp-search-results { max-height:50vh;overflow:auto;margin-top:16px; }
.smp-search-result { display:flex;width:100%;justify-content:space-between;align-items:center;gap:20px;padding:13px 10px;border-bottom:1px solid var(--menu-edge)!important; }
.smp-search-result small { color:var(--menu-quiet);font-size:10px; }
.smp-reopen { padding:20px;border:1px solid var(--menu-edge)!important;border-radius:var(--menu-control-radius); }
.smp-native-stage .smp-control { z-index:3; }
.smp-native-scroll { position:absolute;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#7b808766 transparent; }
.smp-native-scroll-body { position:relative;min-height:100%; }
.smp-native-live { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.smp-shell { overflow:hidden; border-radius:var(--menu-shell-radius); border:1px solid var(--menu-edge); background:linear-gradient(180deg,rgba(34,34,37,.95),rgba(24,24,27,.94)); box-shadow:inset 0 1px rgba(255,255,255,.045); }
.smp-chrome { display:grid; grid-template-columns:192px minmax(0,1fr); grid-template-rows:72px auto minmax(440px,1fr) 30px; min-height:660px; }
.smp-navigation { grid-column:1; grid-row:1/-1; display:flex; flex-direction:column; padding:0 12px; border-right:1px solid var(--menu-edge); background:rgba(255,255,255,.018); }
.smp-brand { display:flex; align-items:center; gap:10px; height:72px; flex:0 0 72px; border-bottom:1px solid var(--menu-edge); padding:0 13px; font-size:22px; font-weight:600; letter-spacing:-.025em; }
.smp-brand img { filter:brightness(0) invert(.96); width:22px; height:28px; }
.smp-nav-item { display:flex; align-items:center; gap:13px; min-height:48px; padding:10px 12px; color:var(--menu-secondary); text-transform:uppercase; font-size:12px!important; position:relative; }
.smp-nav-item:first-of-type { margin-top:16px; }
.smp-nav-item img { width:22px; height:22px; filter:brightness(0) invert(.86); }
.smp-nav-item[aria-current='page'] { color:var(--menu-text); background:linear-gradient(90deg,rgba(255,255,255,.065),transparent); }
.smp-nav-item[aria-current='page']::before { content:''; position:absolute; left:-5px; top:7px; bottom:7px; width:2px; background:var(--menu-ice); }
.smp-nav-item:hover { background-color:rgba(255,255,255,.03); }
.smp-header { grid-column:2; grid-row:1; display:flex; justify-content:space-between; align-items:center; min-width:0; margin:0 16px; padding:0 8px; border-bottom:1px solid var(--menu-edge); }
.smp-hero { display:flex; align-items:center; gap:15px; padding:0; min-width:0; }
.smp-hero > img { width:48px; height:48px; object-fit:cover; border-radius:3px; }
.smp-hero-copy { display:grid; gap:3px; min-width:0; }
.smp-hero-copy strong { font-size:17px; font-weight:600; }
.smp-hero-copy > span { color:var(--menu-quiet); font-size:12px; }
.smp-host-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.smp-compact-search { min-width:44px;min-height:44px;padding:4px;font-size:11px!important;color:var(--menu-secondary)!important; }
.smp-header.smp-header-with-tabs { flex-wrap:wrap;align-content:center;gap:8px 0;min-height:105px;padding-block:8px; }
.smp-header-tabs { display:flex;flex-basis:100%;min-width:0;overflow:auto;gap:3px; }
.smp-header-tab { flex:1;min-height:32px;padding:5px 6px;color:var(--menu-quiet)!important;font-size:11px!important;text-align:center!important;white-space:nowrap; }
.smp-header-tab[aria-pressed='true'] { color:var(--menu-text)!important;box-shadow:inset 0 -1px var(--menu-ice); }
.smp[data-menu-layout='narrow'] .smp-chrome:has(.smp-header-with-tabs) { grid-template-rows:112px auto minmax(390px,1fr) 30px; }
.smp-utility { color:var(--menu-quiet)!important; font-size:10px!important; padding:10px 6px; }
.smp-expand { display:grid; place-items:center; width:32px; height:32px; font-size:20px!important; color:var(--menu-secondary)!important; }
.smp-view-navigation { grid-column:2; grid-row:2; display:flex; gap:5px; overflow:auto; padding:10px 20px; border-bottom:1px solid var(--menu-edge); scrollbar-width:thin; }
.smp-view-item { padding:8px 13px; min-height:36px; flex:0 0 auto; border-radius:var(--menu-control-radius); font-size:12px!important; color:var(--menu-secondary)!important; }
.smp-view-item[aria-current='page'] { background:rgba(190,207,222,.11); box-shadow:inset 0 -1px var(--menu-ice); color:var(--menu-text)!important; }
.smp-workspace { grid-column:2; grid-row:3; position:relative; overflow:auto; scrollbar-width:thin; scrollbar-color:#7777 transparent; max-height:650px; min-height:440px; }
.smp-scene { position:relative; }
.smp-panel, .smp-native-text, .smp[data-menu-layout='native'] .smp-control { position:absolute; }
.smp-panel { border-style:solid; pointer-events:none; }
.smp-native-text { pointer-events:none; white-space:pre; line-height:1.2; overflow:hidden; }
.smp-control { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0; }
.smp-control-label { min-width:0; color:var(--menu-secondary); flex:1; }
.smp-control-help { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.smp-live { grid-column:2; grid-row:4; height:30px; padding:8px 20px; border-top:1px solid var(--menu-edge); color:var(--menu-quiet); font:10px/1.3 'JetBrains Mono',monospace; overflow:hidden; }
.smp-toggle { display:block; position:relative; width:30px; height:16px; border-radius:9px; background:rgba(0,0,0,.55)!important; padding:2px; flex:0 0 30px; }
.smp-toggle[aria-checked='true'] { background:rgba(177,192,207,.45)!important; box-shadow:inset 0 0 0 1px rgba(220,231,240,.2); }
.smp-toggle-knob { display:block; width:12px; height:12px; border-radius:50%; background:var(--menu-secondary); transition:transform 120ms ease; }
.smp-toggle[aria-checked='true'] .smp-toggle-knob { transform:translateX(14px); background:var(--menu-ice); }
.smp-checkbox { width:15px;height:15px;flex-basis:15px;border-radius:2px;padding:2px;box-shadow:inset 0 0 0 1px var(--menu-edge); }
.smp-checkbox .smp-toggle-knob { width:11px;height:11px;border-radius:1px;background:transparent; }
.smp-checkbox[aria-checked='true'] .smp-toggle-knob { transform:none;background:var(--menu-ice);clip-path:polygon(10% 45%,35% 70%,90% 10%,100% 25%,37% 93%,0% 58%); }
.smp[data-menu-layout='narrow'] .smp-touch-toggle { display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;background:transparent!important;box-shadow:none;padding:0;border-radius:0; }
.smp-toggle-glyph { display:block;width:30px;height:16px;padding:2px;border-radius:9px;background:rgba(0,0,0,.55); }
.smp-checkbox .smp-toggle-glyph { width:15px;height:15px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--menu-edge); }
.smp-touch-toggle[aria-checked='true'] .smp-toggle-glyph { background:rgba(177,192,207,.45); }
.smp-control-label { cursor:pointer; }
.smp-slider-field { display:flex; align-items:center; gap:14px; width:100%; min-width:0; }
.smp-slider { appearance:none; height:5px; min-width:25px; width:100%; background:rgba(0,0,0,.4); border-radius:4px; margin:0; accent-color:var(--menu-ice); }
.smp-slider::-webkit-slider-thumb { appearance:none; width:13px; height:13px; border-radius:50%; background:var(--menu-ice); border:0; }
.smp-slider::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:var(--menu-ice); border:0; }
.smp-slider-value { font:10px 'JetBrains Mono',monospace; color:var(--menu-secondary); min-width:64px; flex-shrink:0;white-space:nowrap;text-align:right; }
.smp-select, .smp-keybind, .smp-text-input { background:var(--menu-field)!important; border:1px solid rgba(255,255,255,.025)!important; border-radius:var(--menu-control-radius); width:100%; min-width:0; min-height:28px; padding:5px 10px; }
.smp-select { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.smp-select-value { min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.smp-chevron { display:block;flex-shrink:0;pointer-events:none; }
.smp-select[aria-expanded='true'] .smp-chevron { transform:rotate(180deg); }
.smp-keybind { font:11px 'JetBrains Mono',monospace!important; text-align:center!important; }
.smp-native-button { width:100%; min-height:28px; border-radius:var(--menu-control-radius); padding:5px 10px; background:rgba(255,255,255,.16)!important; text-align:center!important; }
.smp-native-button:hover { background:rgba(255,255,255,.23)!important; }
.smp-color { width:32px; height:22px; padding:0; border:1px solid var(--menu-edge); background:transparent; cursor:pointer; }
.smp-color::-webkit-color-swatch-wrapper { padding:0; }
.smp-color::-webkit-color-swatch { border:0; }
.smp-popover { position:absolute; z-index:50; max-height:310px; overflow:auto; padding:5px; border:1px solid rgba(202,219,234,.21); border-radius:7px; background:rgba(19,22,26,.985); box-shadow:0 15px 40px rgba(0,0,0,.4); scrollbar-width:thin; }
.smp-option { display:flex; width:100%; align-items:center; gap:10px; min-height:34px; padding:8px 10px; font-size:12px!important; border-radius:3px; }
.smp-option:hover, .smp-option:focus-visible { background:rgba(208,225,239,.09); }
.smp-option[aria-selected='true'] { background:rgba(208,225,239,.07); box-shadow:inset 2px 0 var(--menu-ice); }
.smp-hero-picker { display:grid; grid-template-columns:1fr 1fr; }
.smp-hero-picker .smp-option { min-height:48px; }
.smp-hero-picker img { width:28px; height:28px; object-fit:cover; border-radius:2px; }

/* A narrow live menu keeps its real controls and labels, rather than shrinking a
   native framebuffer. The same exported values/options drive both layouts. */
.smp[data-menu-layout='narrow'] .smp-chrome { grid-template-columns:64px minmax(0,1fr); min-height:570px; grid-template-rows:64px auto minmax(390px,1fr) 30px; }
.smp[data-menu-layout='narrow'] .smp-navigation { padding:0 6px; }
.smp[data-menu-layout='narrow'] .smp-brand { height:64px; flex-basis:64px; padding:0; justify-content:center; }
.smp[data-menu-layout='narrow'] .smp-brand span { display:none; }
.smp[data-menu-layout='narrow'] .smp-nav-item { padding:11px 4px; flex-direction:column; gap:5px; font-size:8px!important; min-height:61px; }
.smp[data-menu-layout='narrow'] .smp-nav-item img { width:20px; height:20px; }
.smp[data-menu-layout='narrow'] .smp-header { margin-inline:12px; padding:0; }
.smp[data-menu-layout='narrow'] .smp-hero { gap:10px; }
.smp[data-menu-layout='narrow'] .smp-hero > img { width:38px; height:38px; }
.smp[data-menu-layout='narrow'] .smp-hero-copy strong { font-size:15px; }
.smp[data-menu-layout='narrow'] .smp-hero-copy > span { font-size:11px; }
.smp[data-menu-layout='narrow'] .smp-view-navigation { padding:8px 12px; }
.smp[data-menu-layout='narrow'] .smp-view-item { min-height:38px; padding-inline:10px; }
.smp[data-menu-layout='narrow'] .smp-workspace { min-height:390px; max-height:550px; }
.smp[data-menu-layout='narrow'] .smp-scene { padding:20px; }
.smp-flow-title { color:var(--menu-text); font-size:19px; font-weight:600; margin-bottom:18px!important; }
.smp-flow-text { color:var(--menu-quiet); font-size:12px; padding-block:12px 6px; line-height:1.5; }
.smp h4.smp-flow-text { color:var(--menu-text); font-size:15px; }
.smp[data-menu-layout='narrow'] .smp-control { min-height:46px; padding-block:8px; border-bottom:1px solid rgba(255,255,255,.035); gap:18px; }
.smp[data-menu-layout='narrow'] .smp-control > .smp-widget:not(.smp-toggle):not(.smp-color) { width:52%; max-width:270px; flex:0 0 52%; }
.smp[data-menu-layout='narrow'] .smp-control-button > .smp-widget { width:100%; flex-basis:100%; max-width:none; }
.smp[data-menu-layout='narrow'] .smp-control-label { font-size:12px; }
.smp[data-menu-layout='narrow'] .smp-select, .smp[data-menu-layout='narrow'] .smp-keybind, .smp[data-menu-layout='narrow'] .smp-text-input, .smp[data-menu-layout='narrow'] .smp-native-button { min-height:36px; }
.smp[data-menu-layout='narrow'] .smp-slider { min-height:6px; }
/* Compact layout follows this mounted menu width, including embedded hosts. */
.smp[data-menu-compact='true'] .smp-chrome:has(.smp-header-with-tabs) { grid-template-rows:48px 112px auto minmax(390px,1fr) 30px; }
  .smp[data-menu-compact='true'] .smp-chrome { grid-template-columns:1fr; grid-template-rows:48px 64px auto minmax(390px,1fr) 30px; }
  .smp[data-menu-compact='true'] .smp-navigation { grid-column:1; grid-row:1; flex-direction:row; padding:0; border-right:0; border-bottom:1px solid var(--menu-edge); }
  .smp[data-menu-compact='true'] .smp-brand { display:none; }
  .smp[data-menu-compact='true'] .smp-nav-item { flex:1; min-width:0; margin:0; min-height:44px; flex-direction:row; justify-content:center; gap:6px; font-size:9px!important; }
  .smp[data-menu-compact='true'] .smp-nav-item img { width:16px; height:16px; }
  .smp[data-menu-compact='true'] .smp-nav-item[aria-current='page']::before { inset:auto 12px 0; width:auto; height:2px; }
  .smp[data-menu-compact='true'] .smp-header { grid-column:1; grid-row:2; }
  .smp[data-menu-compact='true'] .smp-view-navigation { grid-column:1; grid-row:3; }
  .smp[data-menu-compact='true'] .smp-workspace { grid-column:1; grid-row:4; }
  .smp[data-menu-compact='true'] .smp-live { grid-column:1; grid-row:5; padding-inline:14px; font-size:9px; }
  .smp[data-menu-compact='true'] .smp-scene { padding:16px 14px; }
  .smp[data-menu-compact='true'] .smp-control { gap:12px; min-height:48px; }
  .smp[data-menu-compact='true'] .smp-control > .smp-widget:not(.smp-toggle):not(.smp-color) { width:50%; flex-basis:50%; }
  .smp[data-menu-compact='true'] .smp-control-button > .smp-widget { width:100%; flex-basis:100%; }
  .smp[data-menu-compact='true'] .smp-control-label { font-size:12px; }
  .smp[data-menu-compact='true'] .smp-select,.smp[data-menu-compact='true'] .smp-keybind,.smp[data-menu-compact='true'] .smp-native-button,.smp[data-menu-compact='true'] .smp-text-input { min-height:44px; }
  .smp[data-menu-compact='true'] .smp-utility { max-width:62px; }
  .smp[data-menu-compact='true'] .smp-host-actions { gap:3px; }

/* Gallery filtering changes content height only in the readable narrow mode. */
.smp[data-menu-layout='narrow'][data-menu-gallery='true'] .smp-chrome { min-height:0;grid-template-rows:auto; }
.smp[data-menu-layout='narrow'][data-menu-gallery='true'] .smp-gallery-flow { grid-column:2;grid-row:1; }
.smp[data-menu-layout='narrow'][data-menu-gallery='true'] .smp-gallery-scroll { min-height:0; }
.smp[data-menu-layout='narrow'][data-menu-gallery='true'][data-menu-compact='true'] .smp-chrome { grid-template-rows:48px auto; }
.smp[data-menu-layout='narrow'][data-menu-gallery='true'][data-menu-compact='true'] .smp-gallery-flow { grid-column:1;grid-row:2; }
@media(prefers-reduced-motion:reduce) { .smp *, .smp *::before, .smp *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
@media(forced-colors:active) { .smp-shell,.smp-native-button,.smp-select,.smp-popover { border:1px solid CanvasText; } .smp-toggle { outline:1px solid ButtonText; } .smp-toggle-knob { background:ButtonText; } }