/* ==========================================================================
   SIGMA SCANNER — features.css
   §5 Capabilities · "Six things most scanners can't do."

   ---------------------------------------------------------------------------
   WHY NOT A GRID
   ---------------------------------------------------------------------------
   06-DESIGN-SYSTEM.md bans a repeated icon-title-paragraph 3×2 grid by name,
   and bento as its disguised cousin (mixed tile sizes in the same repeating
   grid is still a grid). This file instead defines SIX distinct card
   variants — split, bleed, interactive, strip, ring, split-reversed — each
   with its own internal composition. They share only what a reader
   shouldn't have to re-learn each time: type scale, spacing tokens, the
   glass surface treatment, and the entrance grammar.

   ---------------------------------------------------------------------------
   NO-JS CONTRACT
   ---------------------------------------------------------------------------
   Every diagram ships in its RESTING, correct, fully legible state: bars
   filled to their real weight, dots already scattered, the regime badge
   showing its default state, the equity curve fully drawn, the ring's weak
   segment already coloured differently, all six portfolio rows visible.
   js/features.js hides and replays pieces of that as a one-time scroll
   entrance; it is layered on top of a section that is already complete.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   Every rule in this file — base and responsive override alike — lives in
   @layer components. Splitting an override into @layer layout has broken
   two earlier sections in this project (it always loses to a components-
   layer base rule, regardless of specificity or whether its media query
   matches); keeping this file to one layer makes that mistake structurally
   impossible here.
   ========================================================================== */

@layer components {

  /* ========================================================================
     SECTION SHELL / BACKGROUND

     Glass needs something to blur, or it is just a whitish box. This wash
     is what the six cards' glass surfaces actually reveal.
     ======================================================================== */
  .features { position: relative; isolation: isolate; overflow: clip; }

  .features__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(60% 50% at 14% 8%,  rgb(16 160 80 / .07) 0%, rgb(16 160 80 / 0) 70%),
      radial-gradient(55% 45% at 88% 92%, rgb(34 197 94 / .06) 0%, rgb(34 197 94 / 0) 70%);
  }

  .features .ss-container { position: relative; z-index: 1; }

  .features__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: var(--ink-900);
    max-inline-size: 18ch;
    margin-block: var(--sp-3) var(--sp-4);
  }

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

  /* ========================================================================
     COMPARISON TABLE — "Stock screener vs Sigma Scanner"

     The first and only <table> on the page. It exists for answer engines
     as much as for readers: a captioned table with real row headers is the
     format Google and the generative engines lift wholesale for a "X vs Y"
     query, and the page previously offered them nothing of the kind.

     Three columns cannot fit below roughly 560px without squashing the
     copy to unreadable widths, so the wrapper scrolls instead. That is the
     design system's sanctioned answer (see .ss-rail in style.css: "Any
     element wider than the viewport scrolls inside its own container. The
     page body must never scroll horizontally at any width from 320px") —
     the min-inline-size below is what forces the scroller to engage rather
     than letting the table compress.
     ======================================================================== */
  .features__compare {
    margin-block-end: var(--sp-10);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .cmp {
    inline-size: 100%;
    min-inline-size: 520px;
    font-size: var(--fs-sm);
    /* border-collapse is already set by the reset; stated here only because
       the .cmp__own inline borders below depend on collapsed adjacency. */
    border-collapse: collapse;
  }

  .cmp__caption {
    caption-side: top;
    text-align: start;
    padding-block-end: var(--sp-4);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--ink-400);
  }

  /* The reset zeroes every padding, so cell padding has to be restored
     explicitly or the table renders as run-together text. */
  .cmp th,
  .cmp td {
    padding: var(--sp-4);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--ink-200);
  }

  .cmp thead th {
    padding-block: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-500);
    border-block-end: 1px solid var(--ink-300);
  }

  .cmp tbody th {
    inline-size: 26%;
    font-weight: var(--fw-medium);
    color: var(--ink-900);
  }

  .cmp td { color: var(--ink-500); }

  /* Sigma Scanner's own column is marked with a tinted rail rather than
     bold copy — the table has to keep reading as a comparison, not as a
     sales column, or it loses the credibility that makes it worth citing. */
  .cmp__own {
    background: var(--signal-050);
    border-inline: 1px solid var(--signal-200);
    color: var(--ink-700);
  }
  .cmp thead .cmp__own { color: var(--signal-700); }

  .features__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
  }

  /* ========================================================================
     CARD BASE — shared only where sharing is actually correct

     Flat by default (border, no shadow) at rest; glass is what each card's
     OWN surface layer opts into, not a blanket rule, so the strip/ring
     variants (which don't want a boxed panel at all) can decline it.
     ======================================================================== */
  .feat-card {
    position: relative;
    border-radius: var(--r-xl);
  }

  .feat-card__index {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-metric-sm);
    font-weight: 600;
    color: var(--ink-300);
    letter-spacing: -0.01em;
    margin-block-end: var(--sp-3);
  }

  .feat-card__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    color: var(--ink-900);
    margin-block-end: var(--sp-3);
  }

  .feat-card__body {
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink-500);
    max-inline-size: 46ch;
    margin-block-end: var(--sp-5);
  }

  .feat-card__bullets {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--ink-600);
  }
  .feat-card__bullets li {
    position: relative;
    padding-inline-start: var(--sp-5);
  }
  .feat-card__bullets li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    inline-size: 6px; block-size: 6px;
    border-radius: 50%;
    background: var(--signal-500);
  }
  .feat-card__bullets--row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
  }
  .feat-card__bullets--row li { padding-inline-start: var(--sp-4); }

  .feat-card__microcaption {
    margin-block-start: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--ink-400);
    text-align: center;
  }

  /* ---------- GLASS -----------------------------------------------------
     The one glass recipe in this file, applied by variants that want a
     boxed panel (split, interactive). Needs the section wash above it to
     actually read as glass rather than as a flat tint. */
  .feat-card--glass {
    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-md);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .feat-card--glass { background: rgb(255 255 255 / .92); }
  }

  /* ========================================================================
     01 / 06 · SPLIT (and its mirror)
     ======================================================================== */
  .feat-card--split {
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
    padding: var(--sp-7);
  }
  .feat-card--split.feat-card--glass { }   /* placeholder hook for specificity parity */

  .feat-card--split .feat-card__visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 1px solid var(--ink-150);
  }

  /* Bars — feature 01 */
  .feat-bars { display: flex; flex-direction: column; gap: var(--sp-4); }
  .feat-bar { display: grid; grid-template-columns: 84px 1fr 40px; align-items: center; gap: var(--sp-3); }
  .feat-bar__label { font-size: var(--fs-sm); color: var(--ink-500); }
  .feat-bar__track {
    display: block; block-size: 8px; border-radius: var(--r-full);
    background: var(--ink-100); overflow: hidden;
  }
  .feat-bar__track i {
    display: block; block-size: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--signal-500), var(--signal-600));
    transform-origin: left center;
    transform: scaleX(var(--v, 0));
    transition: transform 220ms var(--ease-out-quad);
  }
  .feat-bar__value {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); text-align: end;
  }
  /* Meaningful hover: the row you're pointing at is the one you'd drag. */
  .feat-bar { border-radius: var(--r-sm); transition: background-color 160ms var(--ease-out-quad); }
  .feat-bar:hover { background: var(--signal-050); }
  .feat-bar:hover .feat-bar__label,
  .feat-bar:hover .feat-bar__value { color: var(--signal-700); }

  /* Rows — feature 06 */
  .feat-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
  .feat-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--ink-050);
    font-size: var(--fs-sm);
  }
  .feat-row b { font-weight: 600; color: var(--ink-800); }
  .feat-row span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-500); }
  .feat-row--more { justify-content: center; color: var(--ink-400); font-size: var(--fs-xs); }
  .feat-row--more span { font-family: var(--font-body); color: var(--ink-400); }

  .feat-rows__arrow {
    display: block; inline-size: 20px; block-size: 40px; margin-inline: auto;
    color: var(--ink-300); stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .feat-order {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--signal-600);
    color: #fff;
    box-shadow: var(--shadow-md);
  }
  .feat-order .ss-icon { inline-size: 20px; block-size: 20px; flex: none; }
  .feat-order span { display: flex; flex-direction: column; font-size: var(--fs-xs); opacity: .88; }
  .feat-order b { font-size: var(--fs-body); font-weight: 700; opacity: 1; }

  /* ========================================================================
     02 · FULL-BLEED — diagram-dominant, caption floats over it
     ======================================================================== */
  .feat-card--bleed {
    /* `.ss-bleed` (style.css) computes its negative margin assuming the
       classic block-level rule "width:auto = containing-block width minus
       my own margins" — but .features__list is `display:flex; flex-
       direction:column`, and a flex item's stretch-sizing algorithm does
       NOT apply that rule the same way. The margin math is still correct
       (verified: -100px each side at a 1440px viewport, exactly matching
       calc(50% - 50vw) against the 1240px container) — what's missing is
       an explicit width, since flex sizing won't derive it from the
       margins on its own. Setting it directly is the standard fix for
       this exact interaction and is more robust than fighting flexbox's
       sizing algorithm. */
    position: relative;
    inline-size: 100vw;
    padding-block: var(--sp-11);
    background: var(--ink-900);
    border-radius: 0;
  }

  .feat-card__scatter { max-inline-size: 1100px; margin-inline: auto; padding-inline: var(--gutter); }
  .feat-scatter { display: block; inline-size: 100%; block-size: auto; }
  .feat-scatter__cols line { stroke: rgb(255 255 255 / .08); stroke-width: 1; stroke-dasharray: 2 4; }
  .feat-scatter__dots circle {
    fill: var(--signal-400);
    transform-box: fill-box;
    transform-origin: center;
  }
  .feat-scatter__labels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-inline-size: 640px;
    margin-inline: auto;
    margin-block-start: var(--sp-2);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--deep-fg-muted);
    text-align: center;
  }

  .feat-card__caption {
    position: relative;
    max-inline-size: 620px;
    margin-inline: auto;
    margin-block-start: var(--sp-9);
    padding: var(--sp-6) var(--sp-7);
    border-radius: var(--r-xl);
    background: rgb(7 28 18 / .6);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgb(255 255 255 / .1);
    box-shadow: var(--shadow-dark);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .feat-card__caption { background: var(--deep-800); }
  }
  .feat-card--bleed .feat-card__index { color: var(--deep-fg-muted); }
  .feat-card--bleed .feat-card__title,
  .feat-card--bleed .feat-card__body { color: var(--deep-fg); }
  .feat-card--bleed .feat-card__body { color: var(--deep-fg-muted); }
  .feat-card--bleed .feat-card__bullets { color: var(--deep-fg); }

  /* ========================================================================
     03 · INTERACTIVE — regime toggle, fully CSS-driven
     ======================================================================== */
  .feat-card--interactive {
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
    padding: var(--sp-7);
    cursor: default;
  }
  .feat-card--interactive:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

  .feat-card__hint {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin-block-start: var(--sp-5);
    font-size: var(--fs-xs);
    color: var(--ink-400);
  }
  .feat-card__hint .ss-icon { inline-size: 14px; block-size: 14px; }

  .feat-card--interactive .feat-card__visual {
    position: relative;
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 1px solid var(--ink-150);
  }

  .feat-regime { display: block; inline-size: 100%; block-size: auto; }
  .feat-regime * { vector-effect: non-scaling-stroke; }
  .feat-regime__threshold { stroke: var(--ink-300); stroke-width: 1.25; }
  .feat-regime__ma { stroke: var(--ink-300); stroke-width: 1.5; fill: none; }
  .feat-regime__price { stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity 260ms var(--ease-out-quad); }
  .feat-regime__price--on  { stroke: var(--data-gain); opacity: 1; }
  .feat-regime__price--off { stroke: var(--ink-400); opacity: 0; }
  .feat-regime__marker { fill: var(--data-gain); transition: opacity 260ms var(--ease-out-quad), fill 260ms var(--ease-out-quad); }

  .feat-regime__badge { margin-block-start: var(--sp-4); font-size: var(--fs-sm); font-weight: 600; }
  .feat-regime__on, .feat-regime__off {
    display: inline-flex; align-items: center; gap: var(--sp-2);
  }
  .feat-regime__on { color: var(--data-gain-text); }
  .feat-regime__off { display: none; color: var(--ink-500); }
  .feat-regime__on .ss-icon,
  .feat-regime__off .ss-icon { inline-size: 16px; block-size: 16px; }

  /* The interaction itself. Hover OR keyboard focus — both, so this is
     usable without a pointer, matching the "hover to see it" hint above
     with an equivalent for keyboard users. */
  .feat-card--interactive:hover .feat-regime__price--on,
  .feat-card--interactive:focus-visible .feat-regime__price--on { opacity: 0; }
  .feat-card--interactive:hover .feat-regime__price--off,
  .feat-card--interactive:focus-visible .feat-regime__price--off { opacity: 1; }
  .feat-card--interactive:hover .feat-regime__marker,
  .feat-card--interactive:focus-visible .feat-regime__marker { opacity: 0; }
  .feat-card--interactive:hover .feat-regime__on,
  .feat-card--interactive:focus-visible .feat-regime__on { display: none; }
  .feat-card--interactive:hover .feat-regime__off,
  .feat-card--interactive:focus-visible .feat-regime__off { display: inline-flex; }

  /* ========================================================================
     04 · STRIP — wide, short, a filmstrip of ten years
     ======================================================================== */
  .feat-card--strip {
    padding: var(--sp-7);
    background: var(--paper);
    border: 1px solid var(--ink-150);
  }
  .feat-card--strip .feat-card__title { margin-block-end: var(--sp-2); }
  .feat-card--strip .feat-card__body { margin-block-end: var(--sp-6); max-inline-size: 72ch; }

  .feat-card--strip .feat-card__visual { margin-block-end: var(--sp-5); }
  .feat-timeline { display: block; inline-size: 100%; block-size: auto; }
  .feat-timeline * { vector-effect: non-scaling-stroke; }
  .feat-timeline__ticks line { stroke: var(--ink-150); stroke-width: 1; }
  .feat-timeline__dd { fill: rgb(37 99 235 / .08); stroke: none; }
  .feat-timeline__area { opacity: 1; }
  .feat-timeline__curve { stroke: var(--data-gain); stroke-width: 2; fill: none; stroke-linecap: round; }
  .feat-timeline__years {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10px; color: var(--ink-300);
    padding-inline: 4px;
  }

  /* ========================================================================
     05 · RING — centred, compact
     ======================================================================== */
  .feat-card--ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-9) var(--sp-7);
    max-inline-size: 640px;
    margin-inline: auto;
  }

  .feat-ring {
    position: relative;
    inline-size: 180px; block-size: 180px;
    margin-block-end: var(--sp-7);
  }
  .feat-ring svg { display: block; inline-size: 100%; block-size: 100%; }
  .feat-ring__segments path {
    stroke: var(--ink-200);
    stroke-width: 14;
    fill: none;
    vector-effect: non-scaling-stroke;
  }
  .feat-ring__segments .feat-ring__weak { stroke: var(--data-loss); opacity: .55; }
  .feat-ring__segments { transform-box: fill-box; transform-origin: center; }
  .feat-ring__center {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--signal-600);
  }
  .feat-ring__center .ss-icon { inline-size: 28px; block-size: 28px; }

  .feat-card--ring .feat-card__body { max-inline-size: 52ch; margin-inline: auto; }
  .feat-card--ring .feat-card__index { margin-inline: auto; }

  /* ========================================================================
     RESPONSIVE — all in @layer components, see file header
     ======================================================================== */
  @media (min-width: 768px) {
    .feat-card--split { flex-direction: row; align-items: center; padding: var(--sp-9); }
    .feat-card--split .feat-card__text,
    .feat-card--split .feat-card__visual { flex: 1 1 50%; }
    .feat-card--split.is-reversed { flex-direction: row-reverse; }

    .feat-card--interactive { flex-direction: row; align-items: center; }
    .feat-card--interactive .feat-card__text,
    .feat-card--interactive .feat-card__visual { flex: 1 1 50%; }

    .feat-bar { grid-template-columns: 96px 1fr 44px; }
  }

  @media (min-width: 1024px) {
    .features__list { gap: var(--sp-11); }
    .feat-card--bleed { padding-block: var(--sp-13); }
  }

  /* Reduced motion never touches the resting states above — they are
     already correct. This only concerns the CSS-driven regime toggle,
     which stays instant rather than crossfading. */
  @media (prefers-reduced-motion: reduce) {
    .feat-regime__price,
    .feat-regime__marker,
    .feat-bar__track i { transition: none; }
  }
}