/* ==========================================================================
   AwardRadar — Layout & Responsive Architecture
   Direction: docs/AWARDRADAR-VISUAL-DIRECTION.md

   Responsive matrix validated at: 390x844, 768x1024, 1024x768, 1440x900, 1920x1080
   Mobile is composed, not collapsed.
   ========================================================================== */

/* ==========================================================================
   BROADSHEET — public marketing. Editorial, asymmetric, left-aligned.
   Centering is an exception, never the default.
   ========================================================================== */
.bs-shell { min-height: 100vh; display: flex; flex-direction: column; }

.bs-wrap {
  width: 100%;
  max-width: var(--max-broadsheet);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

/* --- masthead: a newspaper masthead, not a floating SaaS navbar --- */
.bs-masthead {
  border-bottom: 1px solid var(--bs-rule-strong);
  background: var(--bs-paper);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.bs-masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); min-height: var(--topbar-h);
}
.bs-wordmark {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--type-editorial);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-tight);
  color: var(--bs-ink);
  text-decoration: none;
}
.bs-wordmark-mark {
  font-family: var(--type-ui);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bs-ink-45);
}
.bs-nav { display: flex; align-items: center; gap: var(--s-6); }
.bs-nav a {
  font-size: var(--t-sm); color: var(--bs-ink-70);
  text-decoration: none; padding: var(--s-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--m-fast) var(--ease-ui), border-color var(--m-fast) var(--ease-ui);
}
.bs-nav a:hover { color: var(--bs-ink); border-bottom-color: var(--bs-rule-strong); }
.bs-nav a[aria-current="page"] { color: var(--bs-ink); border-bottom-color: var(--bs-ink); }
.bs-masthead-actions { display: flex; align-items: center; gap: var(--s-3); }
/* Duplicated CTAs for the mobile disclosure menu; hidden at desktop width
   where .bs-masthead-actions already carries them. */
.bs-nav-cta { display: none; }

.bs-nav-toggle { display: none; }

/* --- hero: asymmetric editorial split. Permitted ONLY on Decide/Learn. --- */
.bs-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-12);
  align-items: start;
  padding: var(--s-18) 0 var(--s-12);
  border-bottom: 1px solid var(--bs-rule);
}
.bs-hero-copy { display: flex; flex-direction: column; gap: var(--s-6); }
.bs-hero-headline {
  font-family: var(--type-editorial);
  font-size: clamp(2.5rem, 4.6vw, 3.25rem);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--bs-ink);
  text-wrap: balance;
  max-width: 22ch;
}
.bs-hero-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

/* --- observation record: the hero's proof. Real data, dated, never "LIVE". --- */
.bs-record {
  background: #fff;
  border: 1px solid var(--bs-rule-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e-paper);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.bs-record-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--bs-rule);
}
.bs-record-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6);
}
.bs-record-foot {
  padding-top: var(--s-3);
  border-top: 1px solid var(--bs-rule);
  display: flex; flex-direction: column; gap: var(--s-1);
}

/* --- editorial sections: each resolves ONE idea with its own composition --- */
.bs-section { padding: var(--s-18) 0; border-bottom: 1px solid var(--bs-rule); }
.bs-section-alt { background: var(--bs-paper-alt); }
.bs-section-head {
  display: flex; flex-direction: column; gap: var(--s-3);
  margin-bottom: var(--s-12); max-width: var(--measure-editorial);
}

/* Numbered editorial columns — replaces the equal-weight feature card triad.
   No borders, no surfaces: rule + numeral + alignment. */
.bs-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-12);
}
.bs-column { display: flex; flex-direction: column; gap: var(--s-3); }
.bs-column-num {
  font-family: var(--type-editorial);
  font-size: var(--t-xl);
  color: var(--bs-ink-45);
  line-height: 1;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--bs-rule-strong);
}
.bs-column-title {
  font-family: var(--type-ui);
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  color: var(--bs-ink);
}
.bs-column-text { font-size: var(--t-sm); color: var(--bs-ink-70); line-height: var(--lh-relaxed); }

/* Asymmetric two-up: text 5 cols / figure 7 cols */
.bs-split {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: var(--s-12); align-items: center;
}
.bs-split-reverse { grid-template-columns: 7fr 5fr; }

/* Steps: editorial list with hanging numerals, no cards */
.bs-steps { display: flex; flex-direction: column; }
.bs-step {
  display: grid; grid-template-columns: 4rem 1fr;
  gap: var(--s-6); padding: var(--s-6) 0;
  border-top: 1px solid var(--bs-rule);
}
.bs-step:last-child { border-bottom: 1px solid var(--bs-rule); }
.bs-step-num {
  font-family: var(--type-editorial);
  font-size: var(--t-2xl); line-height: 1;
  color: var(--bs-ink-45);
  font-variant-numeric: tabular-nums;
}
.bs-step-body { display: flex; flex-direction: column; gap: var(--s-2); }

/* Pricing: Compare surface. Paritary columns divided by a rule, one differentiator. */
.bs-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--bs-rule-strong);
}
.bs-plan {
  padding: var(--s-8) var(--s-6);
  border-left: 1px solid var(--bs-rule);
  display: flex; flex-direction: column; gap: var(--s-6);
}
.bs-plan:first-child { border-left: 0; padding-left: 0; }
.bs-plan-emphasis { background: var(--bs-paper-alt); }
.bs-plan-features { display: flex; flex-direction: column; gap: var(--s-3); }
.bs-plan-feature {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--bs-ink-70); line-height: var(--lh-normal);
}
.bs-plan-feature[data-included="false"] { color: var(--bs-ink-45); }
.bs-plan-feature-mark { color: var(--val-positive-bs); font-weight: var(--w-semibold); }
.bs-plan-feature[data-included="false"] .bs-plan-feature-mark { color: var(--bs-ink-45); }

/* Auth: Configure surface. Narrow, trust-first, no decoration. */
.bs-auth {
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s-18) 0;
}
.bs-auth-panel {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: var(--s-6);
}
.bs-auth-head { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--bs-rule); }
.bs-auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.bs-auth-foot { font-size: var(--t-sm); color: var(--bs-ink-70); }

/* Colophon (footer) */
.bs-colophon {
  margin-top: auto;
  border-top: 1px solid var(--bs-rule-strong);
  padding: var(--s-8) 0;
  background: var(--bs-paper-alt);
}
.bs-colophon-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}
.bs-colophon-links { display: flex; gap: var(--s-6); flex-wrap: wrap; }

/* ==========================================================================
   INSTRUMENT — authenticated app shell. Dense, precise, no hero.
   ========================================================================== */
.ins-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.ins-sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  z-index: var(--z-sidebar);
  background: var(--ins-panel);
  border-right: 1px solid var(--ins-line);
  display: flex; flex-direction: column;
  padding: var(--s-4) 0;
}
.ins-brand {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-2) var(--s-4) var(--s-6);
}
.ins-brand-name {
  font-family: var(--type-editorial);
  font-size: var(--t-base);
  color: var(--ink-100); text-decoration: none;
  letter-spacing: var(--ls-tight);
}
.ins-brand-plan { font-size: var(--t-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--val-brass); }

/* Text-first navigation: no icon per label. */
.ins-nav { display: flex; flex-direction: column; padding: 0 var(--s-2); }
.ins-nav-group-label {
  padding: var(--s-4) var(--s-2) var(--s-2);
  font-size: var(--t-micro); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--ink-25);
}
.ins-nav a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-70);
  text-decoration: none;
  border-radius: var(--r-md);
  border-left: 2px solid transparent;
  transition: color var(--m-fast) var(--ease-ui), background-color var(--m-fast) var(--ease-ui);
}
.ins-nav a:hover { color: var(--ink-100); background: var(--ins-raised); }
.ins-nav a[aria-current="page"] {
  color: var(--ink-100);
  background: var(--ins-raised);
  border-left-color: var(--act-azure);
  font-weight: var(--w-medium);
}
.ins-nav-count { font-size: var(--t-xs); color: var(--ink-45); font-variant-numeric: tabular-nums; }

.ins-sidebar-foot {
  margin-top: auto;
  padding: var(--s-4);
  border-top: 1px solid var(--ins-line);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.ins-user-email { font-size: var(--t-xs); color: var(--ink-45); }

.ins-main { display: flex; flex-direction: column; min-width: 0; }

.ins-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: 0 var(--s-8);
  background: var(--ins-canvas);
  border-bottom: 1px solid var(--ins-line);
}
.ins-topbar-context { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ins-topbar-actions { display: flex; align-items: center; gap: var(--s-3); }
.ins-menu-toggle { display: none; }

.ins-view {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--max-content);
  padding: var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-8);
}
.ins-view-head { display: flex; flex-direction: column; gap: var(--s-2); }

/* Decision zone dominates; support zone is subordinate. */
.ins-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
.ins-block { display: flex; flex-direction: column; gap: var(--s-4); }
.ins-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--ins-line-strong);
}
.ins-block-title {
  font-size: var(--t-micro); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--ink-45);
}

/* Watchlist portfolio row — telemetry, not CRUD */
.wl-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--s-4); align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--ins-line);
}
.wl-row:hover { background: rgba(226, 232, 240, 0.025); }
.wl-telemetry { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs); color: var(--ink-45); }
.wl-actions { display: flex; align-items: center; gap: var(--s-2); }

/* Opportunities comparable list */
.opp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: var(--s-4); align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--ins-line);
}
.opp-filters { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ==========================================================================
   RADAR — real cartography. Geometry is data, not decoration.
   ========================================================================== */
.radar-map {
  position: relative;
  width: 100%;
  background: var(--ins-inset);
  border: 1px solid var(--ins-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.radar-map svg { display: block; width: 100%; height: auto; }
/* Spatial reference. The landmass previously used a 0.045 alpha fill against a
   near-black canvas — imperceptible on non-OLED screens in daylight, which made
   the map read as abstract geometry rather than as a place. Raised to a level
   that orients the eye while staying clearly subordinate to the data. */
.radar-graticule { stroke: var(--ins-line); stroke-width: 0.5; fill: none; }
.radar-landmass { fill: rgba(226, 232, 240, 0.085); stroke: var(--ink-25); stroke-width: 0.8; }
.radar-arc { fill: none; stroke: var(--act-azure); stroke-linecap: round; }
.radar-arc-miles { stroke: var(--val-brass); }
.radar-arc-stale { stroke: var(--ink-25); stroke-dasharray: 3 4; }
.radar-node { fill: var(--ink-100); }
.radar-node-label {
  fill: var(--ink-100);
  font-family: var(--type-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* Halo drawn beneath the label so an airport code stays readable wherever it
   falls — over the landmass fill, a graticule line or an arc. */
.radar-node-label-halo {
  fill: none;
  stroke: var(--ins-canvas);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
}
.radar-fresh-ring { fill: none; stroke: var(--act-azure); opacity: 0.35; }
.radar-legend {
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--ins-line);
  font-size: var(--t-xs); color: var(--ink-70);
}
.radar-legend-item { display: flex; align-items: center; gap: var(--s-2); }
.radar-legend-swatch { width: 18px; height: 3px; border-radius: var(--r-sm); }

/* Opportunity pulse: fires ONCE when a real opportunity enters. Not a loop. */
@keyframes radar-pulse-once {
  0%   { r: 3; opacity: 0.85; }
  100% { r: 16; opacity: 0; }
}
.radar-pulse { animation: radar-pulse-once var(--m-data) var(--ease-out) 1 forwards; }

/* ==========================================================================
   Bottom navigation — mobile only, priority-ordered by real task frequency:
   Opportunities > Alerts > Watchlists > Radar > Account
   ========================================================================== */
.ins-bottomnav { display: none; }

/* ==========================================================================
   RESPONSIVE MATRIX
   ========================================================================== */

/* ---------- 1920x1080 and up: wider gutters, capped measure ---------- */
@media (min-width: 1700px) {
  .ins-view { padding: var(--s-12) var(--s-18); gap: var(--s-12); }
  .bs-wrap { max-width: 1320px; }
  .bs-hero { padding: var(--s-28) 0 var(--s-18); }
}

/* ---------- 1024x768 (landscape tablet / small desktop) ---------- */
@media (max-width: 1180px) {
  .ins-view { padding: var(--s-6); gap: var(--s-6); }
  .ins-topbar { padding: 0 var(--s-6); }
  .ins-split { grid-template-columns: 1fr; }
  .bs-hero { grid-template-columns: 1fr; gap: var(--s-8); padding: var(--s-12) 0 var(--s-8); }
  .bs-hero-headline { max-width: 28ch; }
  .bs-split, .bs-split-reverse { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* ---------- 768x1024 (portrait tablet): a real composition, not a gap ---------- */
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .bs-columns { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .bs-columns .bs-column:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .opp-row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    row-gap: var(--s-2);
  }
  .opp-row .opp-col-optional { display: none; }
  .wl-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; }
  .wl-row .wl-col-optional { display: none; }
}

@media (max-width: 900px) {
  /* Sidebar becomes an off-canvas drawer; bottom nav takes over primary nav.
     NOTE: below 720px this is the only nav model. Between 721 and 900px the
     tablet gets a persistent rail instead — see the block further down — so
     the two models are never presented at the same time. */
  .ins-shell { grid-template-columns: 1fr; }
  .ins-sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: 272px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform var(--m-base) var(--ease-out);
    box-shadow: var(--e-overlay);
  }
  .ins-shell[data-drawer="open"] .ins-sidebar { transform: none; }
  .ins-shell[data-drawer="open"]::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(6, 8, 11, 0.6);
    z-index: var(--z-overlay);
  }
  .ins-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch-min); height: var(--touch-min);
    background: none; border: 1px solid var(--ins-line-strong);
    border-radius: var(--r-md); color: var(--ink-70); cursor: pointer;
  }
  .ins-main { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }

  .ins-bottomnav {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: var(--z-bottomnav);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--ins-panel);
    border-top: 1px solid var(--ins-line-strong);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ins-bottomnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    min-height: var(--bottomnav-h);
    font-size: 10px;
    font-weight: var(--w-medium);
    letter-spacing: 0.02em;
    color: var(--ink-45);
    text-decoration: none;
    border-top: 2px solid transparent;
  }
  .ins-bottomnav a[aria-current="page"] { color: var(--ink-100); border-top-color: var(--act-azure); }
  .ins-bottomnav-count {
    font-size: 9px; font-variant-numeric: tabular-nums;
    color: var(--act-azure);
  }
}

/* ---------- 721–900px (portrait tablet): ONE navigation model ----------
   A tablet is not a large phone. At 768px there is room for a persistent
   navigation rail, and showing a hamburger AND a bottom bar simultaneously
   presented two competing models on the same screen — the clearest sign of a
   layout with no identity of its own.

   Between 721 and 900px: the sidebar stays docked as a compact rail, the
   drawer toggle disappears, and the bottom bar is suppressed. */
@media (min-width: 721px) and (max-width: 900px) {
  .ins-shell { grid-template-columns: 188px minmax(0, 1fr); }
  .ins-sidebar {
    position: sticky; inset: auto; top: 0;
    transform: none; width: auto; max-width: none;
    height: 100vh; box-shadow: none;
    border-right: 1px solid var(--ins-line);
    padding: var(--s-5) var(--s-3);
  }
  .ins-menu-toggle { display: none; }
  .ins-bottomnav { display: none; }
  .ins-main { padding-bottom: 0; }
  .ins-shell::after { display: none; }

  .ins-nav a { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); }
  .ins-brand-name { font-size: var(--t-base); }
  .ins-user-email { font-size: var(--t-2xs); }

  /* The empty state was pinned to a narrow measure on the left, leaving ~40%
     of the width barren. On tablet it centres in the column instead. */
  .state-block { text-align: center; padding: var(--s-10) 0; }
  .state-block > * { max-width: 46ch; margin-left: auto; margin-right: auto; }
  .state-actions { justify-content: center; }
}

/* ---------- 390x844 (phone): composed for the device ---------- */
@media (max-width: 720px) {
  .bs-wrap { padding: 0 var(--s-4); }
  .bs-nav { display: none; }
  .bs-shell[data-nav="open"] .bs-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: var(--topbar-h);
    background: var(--bs-paper);
    border-bottom: 1px solid var(--bs-rule-strong);
    padding: var(--s-2) var(--s-4) var(--s-4);
  }
  .bs-shell[data-nav="open"] .bs-nav a { min-height: var(--touch-min); display: flex; align-items: center; }
  .bs-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch-min); height: var(--touch-min);
    background: none; border: 1px solid var(--bs-rule-strong);
    border-radius: var(--r-md); color: var(--bs-ink-70); cursor: pointer;
  }
  .bs-masthead { position: relative; }

  /* The masthead CTA pair (sign-in link + primary CTA + menu toggle) does not
     fit 390px alongside the wordmark: it pushed 88px of horizontal scroll.
     On mobile the CTAs move INTO the disclosed menu, leaving only the
     wordmark and the toggle on the bar. */
  .bs-masthead-actions > .btn,
  .bs-masthead-actions > .bs-masthead-link { display: none; }
  .bs-masthead-actions { gap: var(--s-2); }
  .bs-shell[data-nav="open"] .bs-nav-cta {
    display: flex; flex-direction: column; gap: var(--s-3);
    margin-top: var(--s-4); padding-top: var(--s-4);
    border-top: 1px solid var(--bs-rule);
  }
  .bs-shell[data-nav="open"] .bs-nav-cta .btn { width: 100%; }

  .bs-hero { padding: var(--s-8) 0; gap: var(--s-6); }
  .bs-hero-headline { font-size: clamp(2rem, 8.4vw, 2.5rem); max-width: 100%; }
  .bs-hero-actions .btn { width: 100%; }
  .bs-record { padding: var(--s-4); }
  .bs-record-grid { grid-template-columns: 1fr; gap: var(--s-4); }

  .bs-section { padding: var(--s-12) 0; }
  .bs-section-head { margin-bottom: var(--s-8); }
  .bs-columns { grid-template-columns: 1fr; gap: var(--s-8); }
  .bs-columns .bs-column:last-child:nth-child(odd) { grid-column: auto; }
  .bs-compare { grid-template-columns: 1fr; }
  .bs-plan { border-left: 0; border-top: 1px solid var(--bs-rule); padding: var(--s-6) 0; }
  .bs-plan:first-child { border-top: 0; }
  .bs-step { grid-template-columns: 2.5rem 1fr; gap: var(--s-4); }
  .bs-auth { padding: var(--s-8) 0; }
  .bs-colophon-inner { flex-direction: column; gap: var(--s-4); }
  .bs-colophon-links { gap: var(--s-4); }

  /* App: mobile-first density. Metrics become a compact two-up rule. */
  .ins-topbar { padding: 0 var(--s-4); }
  .ins-view { padding: var(--s-4); gap: var(--s-6); }
  .metric-rule { grid-template-columns: 1fr 1fr; }
  .metric {
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3);
    border-left: 1px solid var(--ins-line);
    border-top: 1px solid var(--ins-line);
  }
  .metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .metric:nth-child(-n+2) { border-top: 0; }
  .metric-val { font-size: var(--t-xl); }
  .metric-label { font-size: var(--t-micro); }

  .decision, .decision-primary { padding: var(--s-4); border-radius: var(--r-md); }
  .value-hero .amount { font-size: var(--t-3xl); }
  .decision-primary .value-hero .amount { font-size: var(--t-3xl); }

  /* Dense desktop grids become stacked records with labelled fields. */
  .opp-row, .wl-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-4) 0;
  }
  .opp-row .opp-col-optional, .wl-row .wl-col-optional { display: block; }
  .data-row-head { display: none; }
  .wl-actions, .opp-row .btn { width: 100%; }
  .wl-actions { flex-direction: column; align-items: stretch; }

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll .table { min-width: 560px; }

  .modal { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .overlay { align-items: flex-end; padding: 0; }

  .evidence-doc { padding: var(--s-3) var(--s-4); }
  .evidence-row { flex-direction: column; gap: 2px; }
  .evidence-val { text-align: left; }

  .radar-legend { gap: var(--s-3); padding: var(--s-3); }
}

/* Landscape phone / short viewports: keep vertical rhythm usable */
@media (max-height: 520px) and (orientation: landscape) {
  .bs-hero { padding: var(--s-8) 0; }
  .ins-sidebar { padding: var(--s-2) 0; }
}

/* ==========================================================================
   Print — evidence records should be printable as documents
   ========================================================================== */
@media print {
  .ins-sidebar, .ins-bottomnav, .ins-topbar, #toast-container,
  .bs-masthead, .bs-nav-toggle { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .decision, .evidence-doc { box-shadow: none; border-color: #999; }
  .ins-shell { grid-template-columns: 1fr; }
}