/* Palette and shared components — one definition for every page.
 *
 * This block used to be copied into the <style> of each page. Three copies
 * had already drifted once (the methodology page was built from a snapshot of
 * the dashboard's head and fell behind it), and the per-family routes would
 * have made it seven. A stylesheet cannot drift from itself.
 *
 * Structural rules live in layout.css; this file is colour, type and the small
 * shared components. Both are plain CSS, not Tailwind utilities: Tailwind
 * arrives from the Play CDN at runtime and anything load-bearing has to hold
 * when that is blocked.
 */
/* ScottFree Flow palette.
       #374151 is a mid-grey: used for borders and surface elevation, never as
       the page ground, which would flatten the dark theme. Colour is never the
       only channel -- every reading also carries a sign or arrow. */
    :root {
      --brand:  #374151;   /* borders, elevation, chrome */
      --gold:   #EF9F27;   /* accent, rule bars, crowded/warning */
      --market: #1D9E75;   /* bullish, calls, positive delta */
      --teal:   #5DCAA5;   /* secondary accent, scores, sparklines */
      --bear:   #D1495B;   /* bearish: fills, borders, chart marks */
      --bear-tx:#D5596A;   /* bearish text -- D1495B is 4.08:1 on panel, below AA */
      /* Liquidation meter fills. #5DCAA5 sits at L 0.765, outside the 0.48-0.67
         band a fill needs, so the short side uses a darker step of the same
         hue. The pair validates at CVD dE 6.8 (deutan) -- inside the floor band
         that is permitted only with secondary encoding, which the meter has
         three of: longs are always the left segment, every row is labelled
         "L $x / S $y", and a 2px gap separates the fills. */
      --liq-long:  #D1495B;
      --liq-short: #38AA83;

      --ground:   #0B0F16; /* page */
      --panel:    #121822; /* cards */
      --panel-2:  #1A2231; /* raised rows, table head */
      --line:     #253044; /* hairlines */
      --ink:      #E2E8F0;
      --ink-dim:  #94A3B8;
      --ink-mute: #73839A;  /* lifted from #64748B for AA on small text */
    }
    body { font-family: Inter, system-ui, sans-serif; background: var(--ground); color: var(--ink); }
    .mono { font-family: ui-monospace, monospace; }
    .bull { color: var(--market); }
    .bear { color: var(--bear-tx); }
    .tag-sweep { background: rgba(239,159,39,.16); color: var(--gold); border: 1px solid rgba(239,159,39,.35); }
    .tag-unusual { background: rgba(93,202,165,.14); color: var(--teal); border: 1px solid rgba(93,202,165,.32); }
    .tag-large { background: rgba(55,65,81,.55); color: #A7B4C6; border: 1px solid var(--brand); }
    .tag-flow { background: rgba(55,65,81,.28); color: var(--ink-mute); border: 1px solid rgba(55,65,81,.7); }

    /* Plain CSS on purpose: @apply only works inside <style type="text/tailwindcss">
       with the Play CDN, so the original rule silently did nothing. */
    .chip {
      padding: .25rem .625rem;
      border-radius: 9999px;
      font-size: .75rem;
      line-height: 1rem;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background-color .15s, border-color .15s, color .15s;
    }
    .chip-on { background: rgba(239,159,39,.18); border-color: rgba(239,159,39,.5); color: var(--gold); }
    .chip-off { background: transparent; border-color: var(--line); color: var(--ink-dim); }
    .chip-off:hover { border-color: var(--brand); }

    /* Interpretation badges */
    .read {
      font-size: .625rem;
      line-height: 1rem;
      padding: 0 .375rem;
      border-radius: .25rem;
      border: 1px solid transparent;
      white-space: nowrap;
      cursor: help;
    }
    .read-bull      { background: rgba(29,158,117,.16); color: var(--market); border-color: rgba(29,158,117,.36); }
    .read-weak-bull { background: rgba(93,202,165,.10); color: var(--teal);   border-color: rgba(93,202,165,.26); }
    .read-bear      { background: rgba(209,73,91,.16);  color: var(--bear-tx);border-color: rgba(209,73,91,.36); }
    .read-weak-bear { background: rgba(209,73,91,.09);  color: #E08792;       border-color: rgba(209,73,91,.24); }
    .read-warn      { background: rgba(239,159,39,.16); color: var(--gold);   border-color: rgba(239,159,39,.36); }
    .read-flat      { background: rgba(55,65,81,.42);   color: var(--ink-dim);border-color: var(--brand); }

    .guide-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
    .guide-table th { text-align: left; font-weight: 500; color: var(--ink-mute); font-size: .625rem;
                      text-transform: uppercase; padding: .375rem .5rem; border-bottom: 1px solid var(--line); }
    .guide-table td { padding: .375rem .5rem; border-bottom: 1px solid rgba(37,48,68,.6);
                      vertical-align: top; color: var(--ink); }
    details > summary { cursor: pointer; list-style: none; }
    details > summary::-webkit-details-marker { display: none; }
    details[open] .guide-chevron { transform: rotate(90deg); }
    .guide-chevron { display: inline-block; transition: transform .15s; }

    .liq-track {
      display: flex; height: 8px; border-radius: 4px; overflow: hidden;
      background: rgba(55,65,81,.45); gap: 2px;   /* 2px surface gap between fills */
    }
    .liq-long  { background: var(--liq-long);  border-radius: 4px 0 0 4px; }
    .liq-short { background: var(--liq-short); border-radius: 0 4px 4px 0; }
    .liq-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

    @keyframes flash { from { background: rgba(239,159,39,.18); } to { background: transparent; } }
    .flash { animation: flash 1.2s ease-out; }

    /* ---------------------------------------------------------------- layout
       Plain CSS, not Tailwind utilities, for the rules that decide whether the
       page is READABLE rather than merely styled. Tailwind arrives from the
       Play CDN at runtime; when that is slow or blocked the utility classes
       never apply, and a layout that depends on them for structure collapses
       into overlapping columns. These few rules hold either way.

       min-width:0 is the load-bearing one. A grid item defaults to
       min-width:auto, so a table wider than its track pushes the track open
       and the content bleeds across the neighbouring column -- which is
       exactly what interleaving explainer tables look like. */
    .explainer-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
    .explainer-grid > * { min-width: 0; }
    @media (min-width: 768px)  { .explainer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1280px) { .explainer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

    /* Wide tables scroll inside their own box. Without this the page itself
       scrolls sideways, which is how a table in one column ends up drawn over
       the one beside it. */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .guide-table { display: block; overflow-x: auto; white-space: normal; }
    .guide-table thead, .guide-table tbody { display: table; width: 100%; }

    /* The main dashboard grid. align-items:start stops a short column being
       stretched to the height of a long one, which is what leaves dead space
       under the options table while the right-hand column runs on. */
    .main-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
    .main-grid > * { min-width: 0; }
    @media (min-width: 1024px) {
      .main-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .main-grid > .main-wide { grid-column: span 2 / span 2; }
    }

    /* Unverified-mapping marker. Deliberately not subtle: it marks a number
       whose VERDICT is unsettled, and a quiet marker would be decorative. */
    .unverified {
      display: inline-flex; align-items: center; gap: .25rem;
      font-size: .625rem; text-transform: uppercase; letter-spacing: .03em;
      padding: .1rem .35rem; border-radius: .25rem;
      color: #F0B429; background: rgba(240,180,41,.12);
      border: 1px solid rgba(240,180,41,.35);
    }