/* UI palettes only. Never filter the canvas or redefine anatomical layer colours.
   Print and the Nutramedix document retain their own paper palette. */
@media screen {
  :root[data-ui-theme="dark"] { color-scheme: dark; }
  :root[data-ui-theme="dark"] .nutramedix-mark {
    background-image: url("assets/brand/alfacenturi-mark.svg");
  }
  :root {
    --ui-accent: #67e8f9;
    --ui-theme-selected-bg: #293548;
    --ui-theme-selected-text: #f8fafc;
  }

  .header-preferences { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
  .header-preferences .lang-toggle { margin: 0; align-self: stretch; }
  .anatomy-variant-control { position: relative; display: inline-flex; align-items: center; }
  .anatomy-variant-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-glass-active);
    border-radius: 9px;
    background: var(--bg-secondary);
  }
  .anatomy-variant-btn {
    min-height: 28px;
    padding: 0.3rem 0.58rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font: 700 0.72rem/1.15 var(--font-sans);
  }
  .anatomy-variant-btn:hover { color: var(--color-text-primary); }
  .anatomy-variant-btn.active {
    color: #ecfeff;
    background: #155e75;
    border-color: #22d3ee88;
    box-shadow: 0 1px 4px #02061755;
  }
  .anatomy-variant-btn:disabled { cursor: wait; opacity: 0.55; }
  .layer-toggle.female-vein-layer .layer-color-indicator { background-color: #327fcd !important; }
  .layer-toggle.female-vein-layer .slider { --accent-color: #327fcd !important; }
  .layer-toggle.female-vein-layer .layer-opacity-control,
  .layer-toggle.female-vein-layer .layer-opacity-slider { --layer-accent: #327fcd !important; }
  :root[data-anatomy-variant="female"] .animation-controls input:disabled,
  :root[data-anatomy-variant="female"] [data-filler-control]:disabled { opacity: 0.38; cursor: not-allowed; }
  .anatomy-variant-status {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 80;
    width: max-content;
    max-width: min(360px, 72vw);
    padding: 0.42rem 0.58rem;
    border: 1px solid var(--border-glass-active);
    border-radius: 7px;
    background: #101827f2;
    color: var(--color-text-secondary);
    box-shadow: 0 8px 24px #02061766;
    font: 650 0.7rem/1.35 var(--font-sans);
  }
  .anatomy-variant-status[data-tone="error"] { color: #fecaca; border-color: #ef444466; }
  .anatomy-variant-status[data-tone="review"] { color: #a5f3fc; border-color: #22d3ee66; }
  .pinned-camera-controls {
    margin-top: 0.18rem;
    padding-top: 0.66rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
  }
  .pinned-camera-title {
    margin: 0 0 0.52rem;
    color: var(--color-text-primary);
    font: 700 0.72rem/1.15 var(--font-sans);
    letter-spacing: 0.075em;
    text-transform: uppercase;
  }
  .pinned-camera-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem;
  }
  .pinned-camera-btn {
    min-width: 0;
    min-height: 38px;
    padding: 0.48rem 0.34rem;
    border: 1px solid rgba(71, 85, 105, 0.72);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.58);
    color: var(--color-text-secondary);
    font: 650 0.72rem/1.12 var(--font-sans);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  }
  .pinned-camera-btn:hover,
  .pinned-camera-btn:focus-visible {
    border-color: rgba(103, 232, 249, 0.62);
    color: var(--color-text-primary);
    outline: none;
  }
  .pinned-camera-btn.active {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.12);
    color: #ecfeff;
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.08), 0 0 12px rgba(34, 211, 238, 0.08);
  }
  /* Keep both desktop rails framed beneath the sticky header while the
     document moves through the taller center plan. The existing 93px rail
     budget includes the header and both 1rem main-content gutters. */
  @media (min-width: 1025px) {
    .main-content > .sidebar,
    .main-content > .planner-panel {
      position: sticky;
      top: calc(93px - 1rem);
      align-self: start;
      min-height: 0;
      height: calc(100dvh - 93px);
      max-height: calc(100dvh - 93px);
    }
  }
  .theme-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-glass-active);
    border-radius: 9px;
    background: var(--bg-secondary);
  }
  .theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font: 650 0.72rem/1.15 var(--font-sans);
  }
  .theme-btn svg { flex: 0 0 auto; }
  .theme-btn:hover { color: var(--color-text-primary); }
  [data-ui-theme="dark"] .theme-btn[data-ui-theme-value="dark"],
  [data-ui-theme="light"] .theme-btn[data-ui-theme-value="light"] {
    color: var(--ui-theme-selected-text);
    background: var(--ui-theme-selected-bg);
    border-color: var(--border-glass-active);
    box-shadow: 0 1px 3px #0f172a18;
  }
  .header-preferences button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
  .ne-dialog, .nutramedix-record { color-scheme: light; }
  /* The WebGL scene stays transparent, so the UI supplies its backdrop without
     changing anatomical materials, lighting, or the document capture canvas. */
  [data-ui-theme] .visualizer-container { background-color: #0b101b; }
  [data-ui-theme="light"] .visualizer-container {
    background-color: #c4d1dc;
    background-image: radial-gradient(ellipse at 50% 42%, #d6e1e9 0%, #c4d1dc 58%, #b5c5d3 100%);
    background-size: auto;
    border-color: #b4c3d1;
    box-shadow: inset 0 1px 0 #ffffff80;
  }
  [data-ui-theme="light"] .visualizer-container::after { border-color: #637f9629; }

  /* Porcelain/slate surfaces, ink text, deep teal and violet interactive accents.
     The brighter semantic anatomy swatches remain exactly as authored. */
  :root[data-ui-theme="light"] {
    color-scheme: light;
    --bg-primary: #eef2f6;
    --bg-secondary: #f5f7fa;
    --bg-glass: #ffffff;
    --border-glass: #d9e1ea;
    --border-glass-active: #a9b8ca;
    --color-text-primary: #17263c;
    --color-text-secondary: #425570;
    --color-text-muted: #586a82;
    --ui-accent: #0e667b;
    --ui-toxin: #7435b8;
    --ui-warning: #854b0e;
    --ui-danger: #a62a37;
    --ui-surface-tint: #f5f7fa;
    --ui-hover: #e8eef6;
    --ui-theme-selected-bg: #ffffff;
    --ui-theme-selected-text: #17263c;
    --ui-shadow: 0 4px 18px #2439580a;
  }
  [data-ui-theme="light"] body {
    background: linear-gradient(150deg, #f5f7fb, #eef2f6 70%);
  }
  [data-ui-theme="light"] body > header {
    background: #ffffffed;
    box-shadow: 0 1px 12px #24395806;
  }
  [data-ui-theme="light"] .bioesthetic-wordmark { color: var(--color-text-primary); }
  :root[data-ui-theme="light"] .nutramedix-mark {
    background-image: url("assets/brand/alfacenturi-mark.svg");
    box-shadow: 0 5px 14px rgba(15, 118, 130, 0.16);
  }
  [data-ui-theme="light"] .logo-tag { background: #f5f2fc; border-color: #e0d9ef; color: #615176; }
  [data-ui-theme="light"] .lang-btn:hover { color: var(--color-text-primary); background: var(--ui-hover); }
  [data-ui-theme="light"] .lang-btn.active { background: var(--ui-accent); color: #ffffff; }
  [data-ui-theme="light"] .anatomy-variant-toggle { background: #f5f7fa; border-color: #a9b8ca; }
  [data-ui-theme="light"] .anatomy-variant-btn.active { color: #fff; background: var(--ui-accent); border-color: var(--ui-accent); box-shadow: none; }
  [data-ui-theme="light"] .anatomy-variant-status { background: #fff; color: var(--color-text-secondary); border-color: #a9b8ca; box-shadow: 0 8px 24px #24395822; }
  [data-ui-theme="light"] .anatomy-variant-status[data-tone="error"] { color: var(--ui-danger); border-color: #d58d97; }
  [data-ui-theme="light"] .anatomy-variant-status[data-tone="review"] { color: var(--ui-accent); border-color: #77aab7; }
  [data-ui-theme="light"] .panel-card { box-shadow: var(--ui-shadow); backdrop-filter: none; }
  [data-ui-theme="light"] .panel-title { color: var(--color-text-secondary); border-color: var(--border-glass); }

  [data-ui-theme="light"] :is(.mode-tabs, .layer-toggle, .brand-matrix, .viewport-preset-tabs,
    .planner-summary-box, .plan-item, .product-card, .product-thumbnail, .popover-meta,
    .depth-bar-card, .aspiration-card) {
    background: var(--ui-surface-tint);
    border-color: var(--border-glass);
  }
  [data-ui-theme="light"] :is(.layer-toggle:hover, .plan-item:hover, .product-card:hover) {
    background: #edf2f8;
    border-color: var(--border-glass-active);
  }
  [data-ui-theme="light"] .layer-toggle.active { background: #edf2f8; border-color: #a9b8ca; }
  [data-ui-theme="light"] :is(.layer-opacity-control, .reveal-control, .toxin-comparison-options,
    .viewport-light-control, .cart-drawer-header, .cart-drawer-footer, .plan-empty) { border-color: var(--border-glass); }
  [data-ui-theme="light"] .mode-btn:hover { color: var(--color-text-primary); background: var(--ui-hover); }
  [data-ui-theme="light"] .mode-btn.active[data-mode="botox"] { background: var(--ui-toxin); color: #fff; box-shadow: 0 2px 6px #7435b820; }
  [data-ui-theme="light"] .mode-btn.active[data-mode="filler"] { background: var(--ui-accent); color: #fff; box-shadow: 0 2px 6px #0e667b20; }

  /* Keep layer hues on switches/tracks; use legible ink for their small readouts. */
  [data-ui-theme="light"] .layer-opacity-heading output { color: var(--color-text-secondary); }
  [data-ui-theme="light"] .layer-opacity-control.disabled { opacity: 1; }
  [data-ui-theme="light"] .layer-opacity-slider:disabled { opacity: 0.55; }
  [data-ui-theme="light"] .slider { background: #c4cedb; box-shadow: inset 0 0 0 1px #17263c20; }
  [data-ui-theme="light"] input:checked + .slider { background: var(--accent-color, #a855f7); }
  [data-ui-theme="light"] :is(.layer-color-indicator, .legend-color) { box-shadow: 0 0 0 1px #17263c33; }
  [data-ui-theme="light"] .brand-select { background: #fff; color: var(--color-text-primary); border-color: #a9b8ca; }
  [data-ui-theme="light"] .brand-select option { background: #fff; color: var(--color-text-primary); }
  [data-ui-theme="light"] :is(.toxin-brand-matrix .matrix-row strong, .matrix-row span:last-child,
    .toxin-comparison-input-wrap, .animation-control-label span:last-child, .metric-val.botox-total,
    .plan-item-amount.botox) { color: var(--ui-toxin); }
  [data-ui-theme="light"] :is(.anatomy-animation-card[data-simulation-mode="filler"] .animation-control-label span:last-child,
    .metric-val.filler-total, .plan-item-amount.filler, .reveal-copy span:last-child,
    .viewport-color-heading output, .viewport-reset-btn, .plan-jump) { color: var(--ui-accent); }
  [data-ui-theme="light"] .animation-controls input[type="range"] { accent-color: var(--ui-toxin); }
  [data-ui-theme="light"] :is(.filler-simulation-controls input[type="range"], #slider-layer-reveal, .viewport-color-slider) { accent-color: var(--ui-accent); }
  [data-ui-theme="light"] .viewport-temperature-slider { accent-color: #a96011; }
  [data-ui-theme="light"] .viewport-reset-btn { border-color: #9abfc8; background: #edf6f8; }
  [data-ui-theme="light"] .viewport-reset-btn:hover { background: #dceef2; }
  [data-ui-theme="light"] .viewport-preset-btn.active { color: var(--ui-accent); border-color: #9abfc8; background: #e4f1f5; }
  [data-ui-theme="light"] :is(.viewport-temperature-scale, .viewport-light-hint, .popover-dose-disclaimer, .ne-planner-hint) { color: var(--color-text-muted); }
  [data-ui-theme="light"] .viewport-light-joystick {
    border-color: #90aebb;
    background: radial-gradient(circle, #fff 0 20%, #e9f0f5 21% 55%, #f8fafc 56%);
    box-shadow: inset 0 1px 6px #24395814;
  }
  [data-ui-theme="light"] :is(.viewport-light-crosshair::before, .viewport-light-crosshair::after) { background: #b9c8d5; }
  [data-ui-theme="light"] .viewport-light-height-ring { border-color: #91aabd; }
  [data-ui-theme="light"] .viewport-light-center { color: #a96011; filter: none; }
  [data-ui-theme="light"] .viewport-light-handle { background: var(--ui-accent); border-color: #fff; box-shadow: 0 1px 5px #0e667b55; }
  [data-ui-theme="light"] .pinned-camera-controls { border-color: #d4dde8; }
  [data-ui-theme="light"] .pinned-camera-btn {
    background: #f8fafc;
    border-color: #b8c5d4;
    color: var(--color-text-secondary);
  }
  [data-ui-theme="light"] .pinned-camera-btn:hover,
  [data-ui-theme="light"] .pinned-camera-btn:focus-visible {
    background: #fff;
    border-color: #7693a8;
    color: var(--color-text-primary);
  }
  [data-ui-theme="light"] .pinned-camera-btn.active {
    background: #dceef2;
    border-color: #16849b;
    color: #134f60;
    box-shadow: inset 0 0 0 1px #ffffff99;
  }

  /* The 3D stage stays dark: changing its contrast would change anatomy perception.
     Floating interface controls on top use opaque, readable light surfaces. */
  [data-ui-theme="light"] :is(.toolbar-btn, .view-preset-btn, .viewer-help-pill, .legend-card) {
    background: #f8fafcf5;
    border-color: #bdc9d8;
    color: var(--color-text-secondary);
    box-shadow: 0 2px 6px #00000018;
  }
  [data-ui-theme="light"] :is(.toolbar-btn:hover, .view-preset-btn:hover) { color: var(--color-text-primary); background: #fff; border-color: #8195ad; }
  [data-ui-theme="light"] .view-preset-btn.active { background: #dceef2; border-color: #7cabb7; color: #134f60; box-shadow: none; }
  [data-ui-theme="light"] .sites-toggle-btn[aria-expanded="true"] { color: var(--ui-accent); border-color: #7cabb7; }
  [data-ui-theme="light"] :is(.sites-panel.is-open, .popover, .cart-drawer, .anatomy-loader-panel) {
    background: #ffffff;
    border-color: var(--border-glass-active);
    box-shadow: 0 12px 40px #17263c26;
  }
  [data-ui-theme="light"] :is(.sites-panel-close, .sites-hotspot-btn, .popover-input, .product-buy-btn, .btn-secondary) {
    background: var(--ui-surface-tint);
    color: var(--color-text-primary);
    border-color: #a9b8ca;
  }
  [data-ui-theme="light"] :is(.sites-panel-close:hover, .sites-hotspot-btn:hover, .sites-hotspot-btn:focus-visible,
    .product-buy-btn:hover, .btn-secondary:hover) { background: var(--ui-hover); color: var(--color-text-primary); border-color: #8195ad; }
  [data-ui-theme="light"] :is(.sites-hotspot-btn .sites-code, .anatomy-loader-count) { color: var(--ui-accent); }
  [data-ui-theme="light"] :is(.popover-title, .product-name, .cart-drawer-title, .popover-close:hover,
    .cart-drawer-close:hover, .cart-drawer-close:focus-visible) { color: var(--color-text-primary); }
  [data-ui-theme="light"] .popover-badge.botox { color: var(--ui-toxin); background: #f2eafb; border-color: #d9c3ec; }
  [data-ui-theme="light"] .popover-badge.filler { color: var(--ui-accent); background: #e9f4f7; border-color: #a5c7d0; }
  [data-ui-theme="light"] .popover-btn { color: #fff; background: var(--color-text-secondary); }
  [data-ui-theme="light"] .popover-btn.primary-botox { color: #fff; background: var(--ui-toxin); }
  [data-ui-theme="light"] .popover-btn.primary-filler { color: #fff; background: var(--ui-accent); }
  [data-ui-theme="light"] :is(.btn-primary, .cart-checkout-btn) {
    background: linear-gradient(115deg, #7031ad, #116b80);
    color: #fff;
    box-shadow: 0 3px 12px #2439581a;
  }
  [data-ui-theme="light"] .btn-primary:hover { filter: none; box-shadow: 0 4px 14px #24395830; }
  [data-ui-theme="light"] .plan-jump:hover { color: #084657; text-decoration: underline; }
  [data-ui-theme="light"] .depth-grid-bar { background: #d6dfe9; }

  /* Warning text must not inherit the pale yellow/red intended for a dark rail.
     Inline runtime signal colours still drive the light and scale, not text contrast. */
  [data-ui-theme="light"] .simulation-evidence-notice { color: var(--ui-warning); background: #fff5e5; border-color: #ba791d; }
  [data-ui-theme="light"] .popover-warning { color: var(--ui-danger); background: #fff0f1; border-color: #edbdc4; }
  [data-ui-theme="light"] .btn-clear-plan { color: var(--ui-danger); background: #fdecee; }
  [data-ui-theme="light"] .info-box { color: #14586b; background: #edf6f8; border-color: #afcbd4; }
  [data-ui-theme="light"] #depth-layer-name { color: var(--ui-accent) !important; }
  [data-ui-theme="light"] #proximity-clinical-note { color: var(--ui-warning) !important; }
  [data-ui-theme="light"] #aspiration-status-text { color: var(--color-text-secondary) !important; }
  [data-ui-theme="light"] :is([data-clinical-status="INDETERMINATE"], [data-proximity-band="attention"], [data-proximity-band="close"]) #aspiration-status-text { color: var(--ui-warning) !important; }
  [data-ui-theme="light"] :is([data-clinical-status="NEAR_MODELED_VESSEL"], [data-proximity-band="near"]) #aspiration-status-text { color: var(--ui-danger) !important; }
  [data-ui-theme="light"] .cart-drawer-items > div { background: var(--ui-surface-tint) !important; }
  [data-ui-theme="light"] .cart-drawer-items span { color: var(--color-text-secondary) !important; }
  [data-ui-theme="light"] .cart-remove-btn { color: var(--ui-danger) !important; }
  [data-ui-theme="light"] body > footer { background: #e9eef5; color: var(--color-text-muted); }
  [data-ui-theme="light"] .attribution-copy { opacity: 1; }
  [data-ui-theme="light"] ::-webkit-scrollbar-track { background: #eef2f6; }
  [data-ui-theme="light"] ::-webkit-scrollbar-thumb { background: #a6b6c8; }
  [data-ui-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #71859e; }
  [data-ui-theme="light"] :is(.main-content, .secondary-content, .cart-drawer) :is(button, a, select, input, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
  }
  [data-ui-theme="light"] .switch input:focus-visible + .slider { outline: 2px solid var(--ui-accent); outline-offset: 3px; }

  @media (max-width: 900px) {
    body > header .header-meta { gap: 0.75rem; }
    body > header .meta-item { display: none; }
  }
  @media (max-width: 640px) {
    body > header .header-meta { flex-direction: row; }
    .theme-btn { min-height: 34px; padding-inline: 0.65rem; }
    .anatomy-variant-btn { min-height: 34px; }
    .header-preferences .lang-btn { min-width: 36px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .theme-btn, .anatomy-variant-btn, .header-preferences .lang-btn { transition: none; }
  }
}
@media print { .header-preferences { display: none; } }

/* User presentation is the default, including before the UI bootstrap runs.
   Keep controllers, saved points and release/permission gates untouched.
   display:none also removes the testing controls from keyboard/AX navigation. */
:root:not([data-simulator-tools="admin"]) :is(
  #female-toxin-qa-panel,
  #male-toxin-qa-panel,
  #prepared-ha-region-panel,
  #prepared-ha-cheek-pilot,
  .ha-region-overlay,
  .ha-region-compact-shell,
  .ha-cheek-direct,
  [data-simulator-admin]
) {
  display: none !important;
}

/* The whole Pillow Maker is an administrator prototype, including its canvas tools. */
:root:not([data-simulator-tools="admin"]) :is(
  #ha-freehand-pillow, .ha-pillow-toolbar, .ha-pillow-canvas,
  .ha-pillow-inflator-bank, .ha-pillow-tap-status,
  .sites-preview-state, .sites-preview-point-id
) { display: none !important; }

/* Compact quantity-first point editor. Detailed references never push the action away. */
#anatomy-popover {
  width: min(336px, calc(100vw - 24px));
  box-sizing: border-box;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  gap: 12px;
  padding: 16px;
}
#anatomy-popover .popover-header { gap: 12px; align-items: center; }
#anatomy-popover .popover-title { font-size: 1rem; line-height: 1.35; }
#anatomy-popover .popover-close { min-width: 44px; min-height: 44px; font-size: 24px; }
#anatomy-popover .popover-desc { margin: 0; }
#anatomy-popover .popover-quantity-label { font-size: 13px; color: var(--color-text-secondary); }
#anatomy-popover .popover-input { min-width: 0; width: 100%; min-height: 46px; box-sizing: border-box; font-size: 16px; }
#anatomy-popover .brand-label { flex-shrink: 0; }
#anatomy-popover .popover-btn { min-height: 46px; font-size: 14px; }
#anatomy-popover .popover-reference { border-top: 1px solid var(--border-glass); padding-top: 4px; }
#anatomy-popover .popover-reference summary { cursor: pointer; padding: 12px 0; min-height: 44px; box-sizing: border-box; font-size: 13px; color: var(--color-text-secondary); }
#anatomy-popover .popover-reference-body { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; }
#anatomy-popover .popover-meta-row { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(0, 1.2fr); gap: 10px; }
#anatomy-popover .popover-meta-val { overflow-wrap: anywhere; }
#anatomy-popover .popover-warning { line-height: 1.45; align-items: flex-start; }
@media (max-width: 640px) {
  #anatomy-popover:not(.is-floating-overlay) {
    position: fixed;
    left: 8px !important; right: 8px;
    top: auto !important; bottom: max(8px, env(safe-area-inset-bottom));
    width: auto; max-height: 70dvh;
    border-radius: 16px;
  }
}

#anatomy-popover { position: fixed; z-index: 120; }
#anatomy-popover .popover-header { cursor: grab; touch-action: none; user-select: none; }
#anatomy-popover.is-overlay-dragging .popover-header { cursor: grabbing; }
#anatomy-popover .popover-unit-reference { display: grid; gap: 5px; font-size: 12px; line-height: 1.4; }
#anatomy-popover .popover-unit-reference[hidden] { display: none; }
#anatomy-popover .popover-unit-reference strong { color: var(--color-text-primary); font-weight: 600; }
#anatomy-popover .popover-unit-reference span { color: var(--color-text-muted); font-size: 11px; }

/* The movable point map belongs to the page, not the clipped face viewport. */
#sites-panel.is-open {
  position: fixed;
  left: 24px;
  top: 80px;
  width: min(34rem, calc(100vw - 32px));
  max-height: min(72dvh, calc(100dvh - 96px));
  box-sizing: border-box;
  z-index: 110;
}
#sites-panel .sites-panel-chrome { cursor: grab; touch-action: none; user-select: none; flex-shrink: 0; }
#sites-panel.is-overlay-dragging .sites-panel-chrome { cursor: grabbing; }
#sites-panel .sites-panel-filter { flex-shrink: 0; }
#sites-panel .sites-panel-list { min-height: 0; overscroll-behavior: contain; }
#sites-panel .sites-panel-close { min-width: 44px; min-height: 44px; }