/* base.css -- design system + shared primitives.

   Design system, v3.0.0. Target viewport 1440x900 CSS px (2880x1800 at 200%
   Windows scaling). At that scaling 44 CSS px is ~9.2mm physically, so the
   standard touch-target guidance applies unmodified. */
:root {
  --fs-micro: 11px;  --fs-sm: 12px;  --fs-base: 14px;
  --fs-md: 16px;     --fs-lg: 20px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  --tap: 44px;          /* minimum interactive target */
  --radius: 5px;

  --h-topbar: 56px; --h-tabs: 44px; --h-strip: 36px;
  --h-dock: 64px;   --w-rail: 64px; --w-panel: 30%;
}

html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-base);
  background: var(--surface);
  color: var(--text);
}

/* Every figure in this app is meant to be compared down a column. */
body { font-variant-numeric: tabular-nums; }

/* Touch: no double-tap-zoom delay on chrome; the chart claims its own
   gestures entirely (see js/touch.js). */
button, select, input, label, .tab, .rail-btn { touch-action: manipulation; }
#chart { touch-action: none; }

/* A finger produces no :hover, so every control needs a pressed state. */
button:active, .rail-btn:active, .tab:active, .chip:active { filter: brightness(1.35); }

/* Minimum target size. Applied to the control itself where it can grow, and
   via a padded label where it cannot (a checkbox's own box is fixed by the
   platform). */
button, select, .rail-btn, .tab, .dock-btn { min-height: var(--tap); }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--accent); }
label:has(> input[type="checkbox"]) { min-height: var(--tap); display: flex; align-items: center; gap: var(--sp-2); }

/* Scrollable surfaces get momentum and no scroll-chaining to the page. */
.panel-body, #sheetList, #checklistBody, #marketViewPane, #fundamentalsPane {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* position: relative so absolutely-positioned overlays (the sidebars today,
   the rail panels in Task 13) sit over the chart without reflowing it. */
#layout { display: flex; flex-direction: row; height: 100%; position: relative; }

/* Shared by both sidebar sections (basic screener above, trend template
   below) so the two look like one consistent pattern. */
.sidebar-title { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 var(--sp-3); }