/* il-screener.css — the screener's results, filters and matrix. Paired with
   the reorder in index.html (#view-screener). Tokens only. */

/* ── Results get their own viewport ───────────────────────────────────────
   The grid is wider than the card (2,120px against ~1,000 at 1280, more in
   Strict), so it scrolls sideways inside .tablewrap -- and a scroll container
   is what a sticky header sticks to, which is why the header never followed
   you down a screen of 500 names. A capped height makes the wrapper the one
   viewport for both directions: the header pins to its top, the ticker to its
   left, and a long screen no longer turns the page into 20,000px of rows. */
@media (min-width: 761px) {
  /* No inner padding: the rows carry their own 24px inset, and a padded
     scrollport leaves a strip beside the pinned ticker that the rest of the
     row scrolls through, visibly. */
  #screenTableWrap {
    max-height: calc(100vh - var(--il-chrome-h, 114px) - 96px);
    overflow: auto; overscroll-behavior: contain; padding: 0;
  }
  /* Rows as wide as their cells, so dividers and hover run the full width
     when the table is scrolled sideways rather than stopping at the frame. */
  #screenTable { width: max-content; min-width: 100%; }
  #screenTable .il-scr-head { top: 0; z-index: 3; }
  /* Opaque, or rows scroll visibly through the pinned parts. */
  #screenTable .il-scr-head { background: var(--panel-solid, var(--surface-2)); }
  #screenTable .il-scr-head > :first-child,
  #screenTable .il-scr-row > [role="cell"]:first-child {
    position: sticky; left: 0; z-index: 2;
    /* Out to the row's own edges, so the pinned column is a column rather
       than a block floating inside each row. */
    margin: calc(var(--row-pad, 14px) * -1) 0 calc(var(--row-pad, 14px) * -1) -24px;
    padding: var(--row-pad, 14px) 0 var(--row-pad, 14px) 24px; align-self: stretch;
    display: flex; align-items: center;
  }
  #screenTable .il-scr-head > :first-child { z-index: 4; margin-block: -12px; padding-block: 12px; }
  /* Solid only once the table has actually moved sideways (app.js toggles
     .is-x on scroll). At rest a pinned cell with its own background reads as
     a chip on every row. */
  #screenTableWrap.is-x .il-scr-head > :first-child,
  #screenTableWrap.is-x .il-scr-row > [role="cell"]:first-child {
    background: var(--panel-solid, var(--surface-2));
    box-shadow: 12px 0 14px -14px color-mix(in srgb, #000 70%, transparent);
  }
}

/* ── More filters ─────────────────────────────────────────────────────── */
.morefilters { margin-top: 8px; }
.morefilters > summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary);
  padding: 6px 2px; min-height: 32px;
}
.morefilters > summary::-webkit-details-marker { display: none; }
.morefilters > summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--fast, .18s) var(--ease, ease);
}
.morefilters[open] > summary::before { transform: rotate(45deg); }
.morefilters > summary:hover { color: var(--text-primary); }
.morefilters > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.morefilters-n:not(:empty) {
  padding: 1px 8px; border-radius: 999px; letter-spacing: .06em;
  color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
}
.morefilters[open] > .filtergrid { margin-top: 10px; }

/* ── Fitted results (the default) ─────────────────────────────────────────
   The core columns on flexible tracks fill the card instead of scrolling past
   it; "More columns" drops .fit and the grid goes back to max-content. */
#screenTable.fit { width: 100%; min-width: 0; }
#screenTable.fit .il-scr-head,
#screenTable.fit .il-scr-row { gap: 10px; }
/* Nothing scrolls sideways when fitted, so the pinned ticker column is not
   needed -- and its pin (negative margin, 24px inner padding) overflowed its
   64px track by the width of the padding. */
@media (min-width: 761px) {
  #screenTable.fit .il-scr-head > :first-child,
  #screenTable.fit .il-scr-row > [role="cell"]:first-child {
    position: static; margin: 0; padding: 0; background: none; box-shadow: none;
  }
}
/* Sub-pixel rounding left the fitted grid 2px wider than its frame, which is
   enough for a sideways scrollbar. Nothing real sits in those 2px. */
#screenTableWrap:has(> #screenTable.fit) { overflow-x: hidden; }

/* ── The Hunt (tokens only) ────────────────────────────────────────────── */
.hunt-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hunt-side-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.hunt-beast { display: grid; grid-template-columns: 30px 64px 1fr auto; gap: 10px;
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.hunt-claim { font-family: var(--font-mono); font-size: 13px; text-align: right; }
.hunt-odds { white-space: nowrap; }
.hunt-score { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.hunt-score > div { display: flex; flex-direction: column; gap: 2px; }
.hunt-score b { font-family: var(--font-mono); font-size: 20px; }
.hunt-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 150px; gap: 12px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.hunt-status { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.hunt-status[data-status="caught"] { color: var(--good); }
.hunt-status[data-status="escaped"] { color: var(--text-muted); }
@media (max-width: 760px) {
  .hunt-sides, .hunt-score { grid-template-columns: 1fr 1fr; }
  .hunt-row { grid-template-columns: 30px minmax(0, 1fr); }
  .hunt-row > :nth-child(3), .hunt-row > :nth-child(4) { grid-column: 2; text-align: left; }
}

/* Guild -- teams (`leveling/guilds.py`) */
.guild-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.guild-form .row { margin-top: 6px; }
.guild-mine { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: start; }
.guild-name { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.guild-members { margin: 0; padding-left: 18px; }
@media (max-width: 640px) { .guild-mine { grid-template-columns: 1fr; } }
.guild-letters { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }

/* Company: technicals, loadTechnicals in app.js */
.techrange { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.techrange-bar { position: relative; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--critical) 40%, transparent),
              color-mix(in oklab, var(--good) 40%, transparent)); }
.techrange-bar i { position: absolute; top: -4px; width: 3px; height: 14px; margin-left: -1px;
  border-radius: 2px; background: var(--text-primary); }
.techreadings { margin: .8rem 0 0; padding-left: 18px; }

/* Company: what it owns (ownsCard in app.js) */
.owns { display: grid; gap: 10px; }
.owns-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 90px; gap: 4px 12px; align-items: center; }
.owns-bar { position: relative; height: 12px; }
.owns-bar i { position: absolute; left: 0; top: 0; height: 12px; border-radius: 3px; }
.owns-solid { background: var(--brand); }
.owns-ghost { border: 1.5px dashed var(--text-primary); background: transparent; box-sizing: border-box; }
.owns-val { text-align: right; }
.owns-note { grid-column: 1 / -1; }
@media (max-width: 640px) { .owns-row { grid-template-columns: 1fr 70px; } .owns-bar { grid-column: 1 / -1; } }

/* World Map: super-investors (loadSuperinvestors in app.js) */
.si-consensus { display: grid; gap: 6px; }
.si-cons { display: grid; grid-template-columns: minmax(160px, 300px) 1fr 160px; gap: 12px; align-items: center; }
.si-cbar { height: 10px; position: relative; }
.si-cbar i { position: absolute; left: 0; top: 0; height: 10px; border-radius: 3px; background: var(--brand); }
.si-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.si-card { text-align: left; padding: 12px; border-radius: 10px; border: 1px solid var(--border);
  background: transparent; color: inherit; font: inherit; cursor: pointer; }
.si-card:hover { border-color: var(--brand); }
.si-name { font-weight: 600; margin-bottom: 2px; }
.si-stack { display: flex; height: 10px; border-radius: 3px; overflow: hidden; margin: 8px 0 6px; }
.si-stack i { display: block; height: 100%; }
.si-stack .si-rest { background: color-mix(in oklab, var(--text-muted) 25%, transparent); }
.si-top { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.si-top i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.si-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .si-cons { grid-template-columns: 1fr 90px; } .si-cbar { grid-column: 1 / -1; } }

/* World Map: ranges ahead (loadMacroRanges in app.js) */
.mr-now { margin: 0 0 .4rem; }

/* World Map, Bonds: the engine's readings, one sentence each. */
.bonds-readings { margin: 0; padding-left: 1.1rem; max-width: 92ch; }
.bonds-readings li { margin: .35rem 0; line-height: 1.55; }

/* World Map, AI capital (loadAi in app.js) */
.ai-legend, .ai-fund-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 .4rem; color: var(--text-secondary); }
.ai-legend i, .ai-fund-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.ai-line { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--text-muted); margin-right: 6px; vertical-align: 3px; }
.ai-line.circ { border-top-color: var(--brand); }
.ai-line.dash { border-top-style: dashed; }
.ai-funds { display: grid; gap: 10px; }
.ai-fund { display: grid; grid-template-columns: minmax(110px, 170px) 1fr minmax(150px, 220px); gap: 10px; align-items: center; }
.ai-bars { display: grid; gap: 2px; }
.ai-bars i, .ai-fund-key i { height: 7px; border-radius: 4px; }
.ai-fund-key i { border-radius: 2px; }
.ai-bars i { display: block; min-width: 2px; }
:is(.ai-bars, .ai-fund-key) i.capex { background: var(--series-2); }
:is(.ai-bars, .ai-fund-key) i.own { background: var(--good); }
:is(.ai-bars, .ai-fund-key) i.debt { background: var(--brand); }
.ai-deals { margin-top: .6rem; }
.ai-deals table { width: 100%; }
@media (max-width: 640px) { .ai-fund { grid-template-columns: 1fr; gap: 4px; } }

/* Codex, "What the balance sheet leaves out" (owesCard): hidden debt is
   hatched, not only coloured -- in a mood whose brand is red (Aegis bright) a
   flat critical fill matched the reported-debt bar. The hatch says "not on the
   balance sheet" in every mood. */
.owes-hidden { background: repeating-linear-gradient(135deg, var(--critical) 0 4px, transparent 4px 7px);
               box-shadow: inset 0 0 0 1.5px var(--critical); }