/* Compact classic layout with Windows 98 controls. */
:root { --bevel-light:#FFFFFF; --bevel-dark:#66736D; --caption:#294B45; --caption-ink:#FFFFFF; --sidebar-width:260px; }
:root[data-theme="dark"] { --bevel-light:#707070; --bevel-dark:#111111; --caption:#181818; }
:root[data-theme="contrast"] { --caption-ink:#FFFF00; --bevel-light:#FFFF00; --bevel-dark:#8A8A8A; --caption:#000000; }
:root[data-ui="win98"] body { font-family:Tahoma,"Segoe UI",sans-serif; }
:root[data-ui="win98"] :is(button,input,select,textarea) { font-family:inherit; border-radius:0 !important; }
:root[data-ui="win98"] :is(.studio-view,.sidebar-section,.vehicle-panel,.cargo-row,.metric-card,.modal,.quick-start) { border-radius:0 !important; }
:root[data-ui="win98"] :is(button,.studio-topbar button) { border:1px solid var(--bevel-dark); box-shadow:inset 1px 1px var(--bevel-light),inset -1px -1px var(--bevel-dark) !important; }
:root[data-ui="win98"] button:active:not(:disabled) { box-shadow:inset 1px 1px var(--bevel-dark),inset -1px -1px var(--bevel-light) !important; }
:root[data-ui="win98"] :is(input,select,textarea) { border:2px solid; border-color:var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); }
:root[data-ui="win98"] :is(input,textarea):focus { box-shadow:none; }
:root[data-ui="win98"] :is(button,input,select,textarea,summary):focus-visible { outline:2px dotted var(--ink); outline-offset:-4px; }
:root[data-ui="win98"] .studio-topbar { width:100% !important; margin:0; padding:2px 6px !important; gap:2px !important; background:var(--surface-2) !important; border:2px solid; border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }
:root[data-ui="win98"] .studio-topbar .topbar-main-row { padding:2px 4px; gap:6px !important; background:var(--caption); }
:root[data-ui="win98"] .topbar-main-row :is(label,.sscp-brand-copy small,.save-state) { color:var(--caption-ink) !important; }
:root[data-ui="win98"] .studio-topbar .sscp-wordmark { filter:none !important; }
:root[data-ui="win98"] .studio-topbar .studio-mode-switch button:not(.is-active) { background:var(--control-bg) !important; color:var(--ink) !important; }
:root[data-ui="win98"] .studio-topbar .studio-top-actions > button { text-transform:none; letter-spacing:0; padding:4px 8px !important; font-size:13px !important; white-space:normal !important; }
:root[data-ui="win98"] .theme-control { min-width:0; gap:5px; margin:0; }
:root[data-ui="win98"] .studio-topbar .studio-top-actions, :root[data-ui="win98"] .studio-topbar .history-actions { gap:4px !important; }
:root[data-ui="win98"] .studio-topbar .load-unit-card .load-unit-tab { border-radius:0 !important; }
:root[data-ui="win98"] .studio-sidebar { padding:4px; gap:4px; background:var(--surface-2); }
:root[data-ui="win98"] .sidebar-section { order:0; padding:6px !important; border:2px solid; border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); background:var(--panel-bg); }
:root[data-ui="win98"] :is(.hansa-section-title,.sidebar-title) { background:var(--caption); color:var(--caption-ink) !important; margin:0 0 4px; padding:4px 5px; font-size:12px; text-transform:none; letter-spacing:0; }
:root[data-ui="win98"] summary.hansa-section-title { justify-content:flex-start; gap:5px; }
:root[data-ui="win98"] summary.hansa-section-title::after { margin-left:auto; }
:root[data-ui="win98"] summary.hansa-section-title:focus-visible { outline-color:var(--caption-ink); }
:root[data-ui="win98"] .hansa-analysis .analysis-metric.metric-card { padding:6px !important; margin:0 0 5px; border:1px solid var(--line); }
:root[data-ui="win98"] .hansa-analysis .analysis-metric strong { font-size:15px; }
:root[data-ui="win98"] .hansa-analysis .analysis-metric small { font-size:12px; font-weight:400; line-height:1.35; }
:root[data-ui="win98"] .analysis-note { margin:4px 0 6px; font-size:12px; line-height:1.35; }
:root[data-ui="win98"] .analysis-divider { margin:6px 0; }
:root[data-ui="win98"] .analysis-subtitle { margin:4px 0; }
:root[data-ui="win98"] .balance-row { margin:5px 0; }
:root[data-ui="win98"] .hansa-cargo .cargo-entry-actions { display:grid !important; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 6px; }
:root[data-ui="win98"] #addPalletBtn { text-transform:none; letter-spacing:0; }
:root[data-ui="win98"] .cargo-list-head { position:static; }
:root[data-ui="win98"] .cargo-list-tools { gap:4px; }
:root[data-ui="win98"] .cargo-row-actions { gap:4px; }
:root[data-ui="win98"] .cargo-group { padding:6px 0; }
:root[data-ui="win98"] .cargo-row { margin:4px 0; }
:root[data-ui="win98"] .selection-tools { gap:4px; margin-bottom:6px; }
:root[data-ui="win98"] .vehicle-panel { margin:4px; border:2px inset var(--line); }
:root[data-ui="win98"] .modal { border:3px ridge var(--bevel-light); }
:root[data-ui="win98"] :is(.vehicle-dims,.analysis-metric strong,.cargo-status-chip) { font-variant-numeric:tabular-nums; }
:root[data-theme="contrast"] :is(button,input,select,textarea,summary):focus-visible { outline:3px solid var(--brass) !important; outline-offset:3px; }
:root[data-theme="contrast"] :is(button,.studio-topbar) { box-shadow:none !important; }

  :root[data-ui="win98"] .studio-topbar { min-height:0 !important; }
  :root[data-ui="win98"] .studio-topbar .topbar-main-row { min-height:26px !important; height:auto !important; flex-wrap:wrap !important; }
  :root[data-ui="win98"] .studio-topbar .topbar-main-row .studio-brand { width:80px !important; min-width:80px !important; flex:0 0 80px !important; }
  :root[data-ui="win98"] .studio-topbar .studio-brand .sscp-wordmark { width:60px; height:auto; }
  :root[data-ui="win98"] .studio-topbar .studio-brand { flex-direction:column; align-items:flex-start; gap:0; }
  :root[data-ui="win98"] .studio-topbar .sscp-brand-copy { display:block; }
  :root[data-ui="win98"] .studio-topbar .sscp-brand-copy small { font-size:9px; line-height:1; }
  :root[data-ui="win98"] .studio-topbar .topbar-main-row .studio-plan-title { flex:1 1 150px !important; min-width:140px !important; max-width:240px !important; width:auto !important; display:flex !important; }
  :root[data-ui="win98"] .studio-topbar .studio-plan-title input { min-width:0; height:26px !important; }
  :root[data-ui="win98"] .studio-topbar .topbar-main-row .studio-vehicle-select { width:180px !important; min-width:150px !important; max-width:180px !important; flex:0 1 180px !important; grid-template-rows:auto !important; }
  :root[data-ui="win98"] .studio-topbar .studio-vehicle-select > label { display:none !important; }
  :root[data-ui="win98"] .studio-topbar .studio-mode-switch { min-width:76px !important; width:76px !important; flex:0 0 76px !important; gap:4px !important; }
  :root[data-ui="win98"] .studio-topbar .studio-mode-switch button { height:26px !important; min-height:26px !important; }
  :root[data-ui="win98"] .studio-topbar .studio-mode-switch { height:26px !important; min-height:26px !important; grid-template-rows:26px !important; }
  :root[data-ui="win98"] .studio-topbar :is(input,select) { height:26px !important; }
  :root[data-ui="win98"] .studio-topbar :is(input,select) { font-size:12px !important; min-height:26px !important; padding:4px 6px !important; margin:0; }
  :root[data-ui="win98"] .studio-topbar .topbar-secondary-row { min-height:38px !important; gap:6px !important; padding:0 !important; }
  :root[data-ui="win98"] .studio-topbar .topbar-secondary-row .topbar-unit-tabs { flex:1 1 260px !important; min-height:38px !important; }
  :root[data-ui="win98"] .studio-topbar .topbar-secondary-row .load-unit-tabs { height:38px !important; min-height:38px !important; }
  :root[data-ui="win98"] .studio-topbar :is(.load-unit-card,.load-unit-tab,.load-unit-add-btn) { height:30px !important; min-height:30px !important; }
  :root[data-ui="win98"] .studio-topbar .load-unit-card { width:200px; min-width:200px; }
  :root[data-ui="win98"] .studio-topbar .topbar-secondary-row .studio-top-actions { margin-left:0 !important; justify-content:flex-start !important; padding:0 !important; }
  :root[data-ui="win98"] .studio-topbar .studio-top-actions > button, :root[data-ui="win98"] .studio-topbar .history-actions > button { height:26px !important; min-height:26px !important; }
  :root[data-ui="win98"] main#view.studio-shell { grid-template-columns:minmax(0,1fr) var(--sidebar-width) !important; }
  :root[data-ui="win98"] .studio-sidebar { display:flex !important; }
  :root[data-ui="win98"] .studio-sidebar :is(button,select,input:not([type=checkbox])) { min-height:26px; font-size:12px; padding:4px 5px; }
  :root[data-ui="win98"] .studio-sidebar summary { min-height:26px; padding-block:6px; }
  :root[data-ui="win98"] .studio-sidebar .analysis-details > summary, :root[data-ui="win98"] .studio-sidebar .keyboard-help-drawer > summary, :root[data-ui="win98"] .studio-sidebar .plan-info > summary { min-height:26px; padding-block:6px; }
  :root[data-ui="win98"] .studio-sidebar .selection-tools button { min-height:26px; }
  :root[data-ui="win98"] .studio-sidebar .cargo-search { min-height:26px; margin:4px 0; }
  :root[data-ui="win98"] .studio-sidebar :is(#showYardFilterBtn,#showAllFilterBtn) { width:auto; margin:0 4px 4px 0; }
  :root[data-ui="win98"] .studio-sidebar .hansa-cargo .cargo-entry-actions button { min-height:26px; font-size:12px; margin:0; }
  :root[data-ui="win98"] .studio-sidebar :is(.cargo-filter-drawer,.keyboard-help-drawer) { margin:0; }
  :root[data-ui="win98"] .studio-sidebar #visibleSelectionStatus { margin:4px 0; font-size:12px; }
  :root[data-ui="win98"] .studio-topbar .topbar-secondary-row { flex-wrap:nowrap !important; }

  :root[data-ui="win98"] .studio-topbar .topbar-main-row { min-height:32px !important; }
  :root[data-ui="win98"] .studio-topbar .topbar-main-row .studio-brand { width:66px !important; min-width:66px !important; flex-basis:66px !important; }
  :root[data-ui="win98"] .studio-topbar .load-unit-card .load-unit-tab { height:30px !important; min-height:30px !important; padding:2px 62px 2px 6px !important; }
  :root[data-ui="win98"] .studio-topbar .load-unit-tab :is(strong,span) { font-size:11px !important; line-height:1.05 !important; }
  :root[data-ui="win98"] .studio-topbar :is(.load-unit-lock,.load-unit-remove) { width:26px; min-width:26px; height:26px; padding:0; }
  :root[data-ui="win98"] .studio-topbar .load-unit-lock { right:32px; }
  :root[data-ui="win98"] .studio-topbar .load-unit-add-btn { flex:0 0 28px !important; width:28px !important; min-width:28px !important; height:28px !important; min-height:28px !important; }
  :root[data-ui="win98"] .studio-topbar .topbar-secondary-row .load-unit-tabs { max-width:calc(100% - 34px) !important; }
  :root[data-ui="win98"] .studio-topbar .history-actions > button { width:28px !important; min-width:28px !important; }
  :root[data-ui="win98"] .studio-main { padding:4px !important; gap:4px !important; }
  :root[data-ui="win98"] .studio-vehicle-strip .vehicle-dims span { padding:4px 6px !important; }
  :root[data-ui="win98"] .unit-meta-drawer > summary { min-height:28px; padding:4px 6px; }
  :root[data-ui="win98"] #preview3dPanel .studio-scene-toolbar { padding:4px; gap:4px; }
  :root[data-ui="win98"] .studio-scene-toolbar :is(button,summary) { min-height:26px; padding:3px 6px; font-size:12px; }
  :root[data-ui="win98"] .scene-toolbar-group { gap:4px; }
  :root[data-ui="win98"] .studio-sidebar .hansa-cargo :is(.cargo-mini-action,.lock-toggle,.shape-toggle) { width:26px !important; min-width:26px !important; height:26px !important; padding:3px; }
  :root[data-ui="win98"] .studio-sidebar .analysis-metric-row { column-gap:4px; grid-template-columns:minmax(0,1fr) auto 36px !important; }
  :root[data-ui="win98"] .solver-result { padding:4px 6px; margin:4px 6px; }
  :root[data-ui="win98"] .solver-result button { min-height:26px; padding:3px 6px; font-size:12px; }


/* Desktop workstation: narrow windows scroll, never switch to a phone layout. */
html { min-width:1100px; overflow-x:auto !important; overflow-y:hidden !important; }
body.studio-body { min-width:1100px; }
:root[data-ui="win98"] .inline-editor { margin-top:6px; padding:8px; border:1px solid var(--line); background:var(--panel-bg); }
.inline-editor h3 { margin:0 0 8px; font-size:14px; }
.inline-editor .form-grid { grid-template-columns:minmax(0,1fr); gap:6px; }
.inline-editor .form-grid > * { grid-column:auto; }
.inline-editor label { font-size:12px; }
.inline-editor input, .inline-editor select, .inline-editor textarea { margin:3px 0 0; padding:5px; font-size:13px; }
.inline-editor .modal-buttons { margin-top:8px; gap:4px; }
.inline-editor .modal-buttons button { min-height:26px; padding:4px; }

/* Compact native theme buttons. The icon describes the available day/night action. */
:root[data-ui="win98"] .theme-control button { display:grid; place-items:center; width:28px; height:26px; min-height:26px; padding:3px; color:var(--ink); background:var(--control-bg); }
.theme-control svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.theme-control .night-icon { display:none; }
:root[data-theme="light"] .theme-control .day-icon { display:none; }
:root[data-theme="light"] .theme-control .night-icon { display:block; }
:root[data-ui="win98"] #contrastThemeBtn[aria-pressed="true"] { color:var(--brass-ink); background:var(--brass); border-color:var(--brass); }
.sscp-brand-mark { display:block; line-height:0; }
:root[data-theme="contrast"] .sscp-brand-mark { background:#FFFF00; }
:root[data-theme="contrast"][data-ui="win98"] .studio-topbar .sscp-wordmark { filter:invert(1) !important; mix-blend-mode:multiply; }
:root { --selection-marker:#ffdc52; --selection-number-ink:#181818; }
:root[data-theme="light"] { --selection-marker:#8b3e00; --selection-number-ink:#ffffff; }
:root[data-theme="contrast"] { --selection-marker:#ffff00; --selection-number-ink:#000000; }
:root[data-theme="contrast"] .unit-error { color:var(--ink); }
:root[data-ui="win98"] #selectedCargoDetails { border:2px solid var(--selection-marker); }
.selected-cargo-title { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; font-weight:700; }
.selected-cargo-title b { min-width:32px; padding:3px; background:var(--selection-marker); color:var(--selection-number-ink); text-align:center; font-size:16px; }
#selectedCargoDetails h3 { margin:6px 0; font-size:14px; overflow-wrap:anywhere; }
#selectedCargoDetails dl { display:grid; grid-template-columns:66px minmax(0,1fr); gap:3px 6px; margin:0; font-size:12px; line-height:1.3; }
#selectedCargoDetails dt { color:var(--text-secondary); }
#selectedCargoDetails dd { margin:0; overflow-wrap:anywhere; }

#projectColorLegend { max-height:176px; overflow:auto; scrollbar-gutter:stable; }
.project-color-row { display:flex; align-items:center; gap:8px; padding:6px 2px; }
.project-color-row i { width:16px; height:28px; flex:0 0 16px; border:1px solid var(--field-line); }
.project-color-row > div { min-width:0; }
.project-color-row strong,.project-color-row span { display:block; overflow-wrap:anywhere; }
.project-color-row strong { font-size:12px; }
.project-color-row span { margin-top:3px; font-size:11px; color:var(--text-secondary); line-height:1.3; }

.cargo-label-modes { display:flex; align-items:center; gap:5px; padding:4px 8px; border-block:1px solid var(--line); background:var(--panel-bg); }
.cargo-label-modes > span { margin-right:5px; font-size:11px; font-weight:700; color:var(--text-secondary); }
:root[data-ui="win98"] .cargo-label-modes button { width:auto; min-height:26px; padding:4px 8px; margin:0; font-size:12px; }
.cargo-label-modes button[aria-pressed="true"] { background:var(--surface-active); color:var(--text-active); border-color:var(--line-active); }
.cargo-hover-tooltip { position:absolute; z-index:12; width:230px; box-sizing:border-box; padding:8px 10px; pointer-events:none; overflow-wrap:anywhere; background:var(--panel-bg); border:1px solid var(--field-line); color:var(--ink); box-shadow:2px 4px 9px #0008; font-size:12px; line-height:1.5; }
.cargo-hover-tooltip strong,.cargo-hover-tooltip span { display:block; }
.cargo-hover-tooltip strong { font-size:13px; }
.cargo-hover-tooltip span { color:var(--text-secondary); }
.cargo-hover-tooltip b { color:var(--selection-marker); }

/* Native details: one compact entry point, with hover and keyboard support. */
.studio-topbar .topbar-action-menu { position:relative; flex:0 0 auto; }
:root[data-ui="win98"] .studio-topbar .topbar-action-menu > summary { display:flex; align-items:center; gap:6px; height:26px; box-sizing:border-box; padding:4px 8px; font-size:13px; line-height:1.2; color:var(--ink); background:var(--control-bg); cursor:pointer; list-style:none; border:1px solid var(--bevel-dark); box-shadow:inset 1px 1px var(--bevel-light),inset -1px -1px var(--bevel-dark); }
.topbar-action-menu > summary::-webkit-details-marker { display:none; }
.topbar-action-menu > summary svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; }
.studio-topbar .topbar-action-list { position:absolute; z-index:100; top:100%; right:0; display:grid; gap:4px; width:max-content; min-width:0; max-width:calc(100vw - 24px); padding:4px; background:var(--panel-bg); border:1px solid var(--line); box-shadow:3px 5px 12px rgba(0,0,0,.35); }
:root[data-ui="win98"] .studio-topbar .topbar-action-list button { margin:0; height:auto !important; min-height:28px; padding:6px 8px !important; font-size:13px; text-align:left; white-space:nowrap; text-transform:none; letter-spacing:0; }
:root[data-theme="contrast"] .studio-topbar .topbar-action-menu > summary { box-shadow:none; }

.studio-topbar .topbar-main-row .topbar-action-list { left:0; right:auto; }
.studio-topbar .topbar-menu-note { margin:0; max-width:28ch; padding:4px 6px; font-size:12px; line-height:1.35; color:var(--text-secondary); white-space:normal; overflow-wrap:anywhere; }
.studio-topbar .topbar-menu-note:empty { display:none; }
.plan-inline-panels { display:contents; }