/* ==========================================================================
   SIGMA SCANNER — overview.css
   §4 Application Overview · "Eleven tools. One method."

   ---------------------------------------------------------------------------
   THE NO-JS CONTRACT, APPLIED HERE
   ---------------------------------------------------------------------------
   All four panels ship STACKED — position: static, normal document flow,
   fully visible — by default. Nothing in this file hides a panel until
   js/overview.js adds `.is-tabbed` to the panel container, at which point
   CSS switches to a single-panel, absolutely-positioned crossfade stage.

   That means the base state (no JS, or motion disabled) is not a lesser
   version of the section — it is a complete, readable description of four
   product areas, each followed immediately by its illustration. JS upgrades
   the PRESENTATION (one laptop screen, tab-switched, animated); it never
   creates content that didn't already exist.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   Every base rule AND every one of its responsive overrides lives in
   @layer components. This file's own base rules are never split across
   layers — that mistake (an override in @layer layout losing to a base
   rule in the later @layer components) has already happened twice in this
   project. Keeping everything for one component in one layer makes it
   structurally impossible to repeat here.
   ========================================================================== */

@layer components {

  /* ========================================================================
     SECTION / LAYOUT
     ======================================================================== */
  .overview__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-11);
  }

  .overview__copy { max-inline-size: 640px; }

  .overview__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: var(--ink-900);
    margin-block: var(--sp-3) var(--sp-5);
  }

  .overview__lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--ink-500);
    max-inline-size: 52ch;
    margin-block-end: var(--sp-7);
  }

  .overview__disclaimer {
    margin-block-start: var(--sp-9);
    font-size: var(--fs-xs);
    color: var(--ink-400);
    max-inline-size: 68ch;
  }

  /* ========================================================================
     FLOW DIAGRAM
     Nodes are plain SVG circles/text, always visible — no per-node reveal,
     restrained on purpose. Only the connecting strokes use [data-draw],
     which is the site-wide path-draw system already built in animation.js;
     nothing new is wired up for it here.
     ======================================================================== */
  .overview__flow {
    inline-size: 100%;
    max-inline-size: 420px;
    margin-block-end: var(--sp-8);
  }
  .overview__flow svg { display: block; inline-size: 100%; block-size: auto; }

  .overview__flow-line,
  .overview__flow-loop {
    stroke: var(--ink-200);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .overview__flow-arrows path {
    stroke: var(--ink-300);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .overview__flow-node circle {
    fill: var(--paper);
    stroke: var(--ink-200);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .overview__flow-node text {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    fill: var(--ink-500);
    text-anchor: middle;
  }
  .overview__flow-node--last circle { fill: var(--signal-600); stroke: var(--signal-600); }
  .overview__flow-node--last text { fill: #fff; }
  .overview__flow-label {
    font-family: var(--font-body);
    font-size: 8.5px;
    letter-spacing: .08em;
    font-weight: 600;
    fill: var(--ink-400);
  }

  /* ========================================================================
     TABS

     Real anchors. Functional as in-page jumps with zero JS — see the note
     at the top of this file. js/overview.js intercepts clicks to animate
     instead of jumping; it does not change what happens if it never runs.
     ======================================================================== */
  .overview__tabs {
    display: flex;
    flex-direction: column;
    /* Wider than a purely visual gap calls for: at desktop this is also
       what the sticky stage's own pin duration is measured against — see
       .overview__stage's min-width:1024px rule below. Four cramped cards
       gave the sticky column almost no scroll distance to hold each panel
       for, so it flipped through all four before a reader could register
       the first one. More room per card, not a shorter/rewritten trigger
       range, is the real fix; js/overview.js's trigger widened too, but
       only to match — see that file. */
    gap: var(--sp-6);
    margin-block-end: var(--sp-7);
  }

  .overview__tab {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-6);
    border-radius: var(--r-lg);
    border: 1px solid var(--ink-200);
    background: var(--paper);
    text-decoration: none;               /* a:not([class]) guard — same fix as the nav */
    transition: border-color 180ms var(--ease-out-quad),
                background-color 180ms var(--ease-out-quad),
                box-shadow 180ms var(--ease-out-quad);
  }
  .overview__tab:hover { border-color: var(--ink-300); }
  .overview__tab.is-active {
    border-color: var(--signal-600);
    background: var(--signal-050);
    box-shadow: var(--shadow-sm);
  }

  .overview__tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px; block-size: 36px;
    flex: none;
    border-radius: var(--r-md);
    background: var(--ink-050);
    color: var(--ink-500);
    transition: background-color 180ms var(--ease-out-quad), color 180ms var(--ease-out-quad);
  }
  .overview__tab.is-active .overview__tab-icon { background: var(--signal-600); color: #fff; }
  .overview__tab-icon .ss-icon { inline-size: 18px; block-size: 18px; }

  .overview__tab-body { display: flex; flex-direction: column; gap: 3px; }
  .overview__tab-body b {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
    letter-spacing: -0.01em;
  }
  .overview__tab-body span {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-500);
  }

  /* ========================================================================
     STAGE
     Sticky, not pinned — see the note in index.html. Costs no JS, never
     breaks scroll, degrades to scrolling past normally.
     ======================================================================== */
  .overview__stage { position: relative; }

  .overview__floats { position: relative; z-index: 3; }

  .overview__float {
    position: absolute;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgb(255 255 255 / .7);
    box-shadow: var(--inset-top), var(--shadow-lg);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .overview__float { background: rgb(255 255 255 / .97); }
  }

  .overview__float--browser { inset-block-start: -4%; inset-inline-start: -2%; inline-size: 176px; padding: 0; overflow: hidden; }
  .overview__float--note    { inset-block-end: 8%; inset-inline-end: -3%; max-inline-size: 208px; }

  .overview__mini-chrome {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    background: var(--ink-050);
    border-block-end: 1px solid var(--ink-200);
    font-size: 9px; color: var(--ink-400);
  }
  .overview__mini-chrome i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ink-200); flex: none; }
  .overview__mini-chrome span { margin-inline-start: auto; font-family: var(--font-mono); }
  .overview__mini-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .overview__mini-body b {
    display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 1.25rem; font-weight: 600; color: var(--signal-700); letter-spacing: -0.01em;
  }
  .overview__mini-body span { font-size: 10px; color: var(--ink-400); }

  .overview__float--note {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    font-size: var(--fs-xs); color: var(--ink-500);
  }
  .overview__float--note .ss-icon { inline-size: 16px; block-size: 16px; color: var(--signal-600); flex: none; margin-block-start: 1px; }
  .overview__float--note b { display: block; color: var(--ink-900); font-weight: var(--fw-semibold); }

  /* Idle drift — decorative only, CSS-driven so it costs no JS and needs no
     coordination with the entrance timeline. Gated on prefers-reduced-motion
     directly, the same way any other continuous/looping motion on this page
     is gated (WCAG 2.3.3). */
  @media (prefers-reduced-motion: no-preference) {
    .overview__float--browser { animation: ov-float 5.6s ease-in-out infinite; }
    .overview__float--note    { animation: ov-float 6.4s ease-in-out infinite -2s; }
  }
  @keyframes ov-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }

  /* ---------- LAPTOP ------------------------------------------------------
     Drawn, not photographed: a bezel around the screen and a trapezoidal
     "deck" beneath it standing in for the keyboard base — enough to read as
     a laptop at a glance without needing a device photograph or SVG asset. */
  .overview__laptop { position: relative; z-index: 2; }

  .overview__screen {
    border-radius: var(--r-lg) var(--r-lg) 4px 4px;
    background: var(--ink-800);
    padding: 10px 10px 0;
    box-shadow: var(--shadow-hero);
  }

  .overview__deck {
    inline-size: 108%;
    margin-inline-start: -4%;
    block-size: 14px;
    background: linear-gradient(180deg, var(--ink-700) 0%, var(--ink-800) 100%);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow-md);
  }
  .overview__deck::after {
    content: "";
    display: block;
    inline-size: 15%;
    block-size: 4px;
    margin-inline: auto;
    background: var(--ink-600);
    border-radius: 0 0 4px 4px;
  }

  /* ---------- CHROME (self-contained — see file header) ------------------- */
  .overview__chrome {
    display: flex; align-items: center; gap: var(--sp-3);
    block-size: 34px; padding-inline: var(--sp-3);
    background: var(--ink-050);
    border-radius: 8px 8px 0 0;
  }
  .overview__dots { display: flex; gap: 5px; flex: none; }
  .overview__dots i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ink-200); }
  .overview__url {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
    max-inline-size: 240px; margin-inline: auto; block-size: 20px; padding-inline: var(--sp-3);
    border-radius: var(--r-full); background: var(--paper); border: 1px solid var(--ink-200);
    font-size: 10px; color: var(--ink-400);
  }
  .overview__url svg { inline-size: 10px; block-size: 10px; color: var(--signal-600); }

  .overview__appbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    block-size: 34px; padding-inline: var(--sp-4);
    background: var(--deep-900); color: var(--deep-fg);
  }
  .overview__wordmark { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 11px; font-weight: 600; }
  .overview__wordmark i { inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--signal-400); flex: none; }
  .overview__context {
    font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    color: var(--deep-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ========================================================================
     PANELS

     Base state (this section): position static, stacked, ALL visible.
     .is-tabbed (added by js/overview.js) is what turns this into a single-
     screen, crossfade-switched stage — see the file-header note.
     ======================================================================== */
  .overview__panels {
    background: var(--paper);
    padding: var(--sp-5);
  }

  .overview__panel {
    padding-block-end: var(--sp-6);
    border-block-end: 1px solid var(--ink-150);
    margin-block-end: var(--sp-6);
  }
  .overview__panel:last-child { border-block-end: 0; margin-block-end: 0; padding-block-end: 0; }

  /* -- is-tabbed: the JS-enhanced single-screen state --
     Every panel is always position:absolute here — differentiated by
     opacity/z-index only, never by a layout-property swap. That means
     GSAP has nothing to coordinate with CSS: it can crossfade two panels
     that are ALREADY stacked in the same place, rather than needing to
     flip one from static to absolute mid-transition. Simpler, and one
     fewer thing to get out of sync between the two engines.

     The opacity transition here is the fallback for JS-without-GSAP: a
     class toggle alone still produces a clean fade with no animation code
     at all. GSAP (js/overview.js) enhances this further with a slight
     vertical motion and staggered timing — see the "GSAP timeline" note
     there — but the CSS-only fade is never broken or absent underneath it. */
  .overview__panels.is-tabbed {
    position: relative;
    min-block-size: var(--ov-panel-h, 360px);
    overflow: hidden;
  }
  .overview__panels.is-tabbed .overview__panel {
    position: absolute;
    inset: var(--sp-5);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    border: 0; margin: 0; padding-block-end: 0;
    transition: opacity 240ms var(--ease-out-quad);
  }
  .overview__panels.is-tabbed .overview__panel.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }

  /* ---------- SCREENSHOT PLACEHOLDER ---------------------------------------
     Temporary: all four panels held hand-built schematic mockups (factor
     weight bars, a rank list, KPI cards, a curve, holdings, a SIP
     calculator) until a request to show real application screenshots
     instead. Each panel is now a single <img> pointed at a file that does
     not exist yet — this is what it looks like meanwhile, styled as an
     obvious placeholder rather than a broken-image icon. Swapping in the
     real screenshots later needs nothing else to change: the hotspot
     overlays are already positioned independently of this element. */
  .overview__screenshot {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 8 / 5;
    border-radius: var(--r-md);
    background: var(--ink-050);
    border: 1.5px dashed var(--ink-200);
    object-fit: cover;
    color: var(--ink-400);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    text-align: center;
  }

  /* ========================================================================
     HOTSPOTS

     Entirely CSS-driven — hover/focus reveal, no JS required for the
     tooltip itself. The tooltip stays in the DOM at opacity:0 rather than
     display:none, which is what lets aria-describedby reference it for
     screen-reader users regardless of pointer state.
     ======================================================================== */
  .overview__hotspot-wrap {
    position: absolute;
    inset-inline-start: var(--hx, 50%);
    inset-block-start: var(--hy, 50%);
    z-index: 4;
  }

  .overview__hotspot {
    position: relative;
    inline-size: 15px; block-size: 15px;
    border-radius: 50%;
    background: var(--signal-500);
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 3px rgb(16 160 80 / .18), var(--shadow-sm);
    cursor: pointer;
  }
  /* The visible dot stays 15px — that size is deliberate, a bigger dot
     would be a visual change. The actual tappable area is enlarged to
     ~44px (WCAG 2.5.8) via an invisible ::before instead, the standard
     way to grow a hit target without growing what's drawn on screen. */
  .overview__hotspot::before {
    content: "";
    position: absolute;
    inset: -15px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .overview__hotspot { animation: ov-pulse 2.4s ease-in-out infinite; }
  }
  @keyframes ov-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgb(16 160 80 / .18), var(--shadow-sm); }
    50%      { box-shadow: 0 0 0 7px rgb(16 160 80 / .10), var(--shadow-sm); }
  }

  .overview__tooltip {
    position: absolute;
    inset-block-end: calc(100% + var(--sp-3));
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: max-content;
    max-inline-size: 220px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--ink-900);
    color: var(--deep-fg);
    font-size: 12px;
    line-height: 1.5;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms var(--ease-out-quad), transform 160ms var(--ease-out-quad);
    transform: translateY(4px);
  }
  .overview__tooltip::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    translate: -50% 0;
    border: 5px solid transparent;
    border-block-start-color: var(--ink-900);
  }
  .overview__hotspot-wrap:hover .overview__tooltip,
  .overview__hotspot-wrap:focus-within .overview__tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}


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

   All in @layer components — see the file-header note on why.
   ========================================================================== */
@layer components {

  /* ---------- < 768 · mobile: the laptop mockup is hidden ----------------
     Requested as ".overview__screen { display: none }", but that element
     alone is only the dark bezel — .overview__deck (the keyboard-base
     trapezoid) is its SIBLING inside .overview__laptop, not its child, so
     hiding just the screen leaves the deck stranded on its own with the
     two glass float cards (positioned against .overview__stage, which
     collapses to the deck's 14px height once the screen disappears) —
     confirmed empirically: a 14px sliver with the floats overlapping it,
     then a dead gap where the laptop used to be. Hiding the whole stage
     (laptop + deck + floats together) is what actually reads as "not
     there" rather than "broken here". Tabs/copy above it are untouched. */
  @media (max-width: 767px) {
    .overview__stage { display: none; }
  }

  @media (min-width: 640px) {
    .overview__tabs { flex-direction: row; flex-wrap: wrap; }
    .overview__tab { flex: 1 1 240px; }
  }

  @media (min-width: 1024px) {
    .overview__layout {
      grid-template-columns: 1fr 1.15fr;
      align-items: start;
      gap: var(--sp-9);
    }
    .overview__tabs { flex-direction: column; }
    .overview__tab { flex: none; }

    .overview__stage {
      position: sticky;
      /* Clears the fixed nav — same --nav-h-scrolled token the nav itself
         compresses to, plus breathing room. */
      inset-block-start: calc(var(--nav-h-scrolled) + var(--sp-8));
    }

    .overview__float--browser { inset-block-start: -8%; inset-inline-start: -8%; }
    .overview__float--note    { inset-block-end: 10%; inset-inline-end: -9%; }

    :root { --ov-panel-h: 380px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .overview__float--browser,
    .overview__float--note,
    .overview__hotspot { animation: none; }
  }
}