/* Core role: Styles for the Advisor tabs (Economic + Military) — briefing
       strip, type filter, and the ranked advice cards. Class-based + semantic
       tokens, same approach as events.css/trends.css.

       Two looks are deliberately NEW here (headline feature, per maintainer):
       the vertical priority rail (relative score as fill height, so ranking is
       visible without reading numbers) and the expandable evidence drawer
       (advice must be auditable). Everything is built from the semantic token
       tiers — no literals (UI_STANDARDS §1). */

    /* ── BRIEFING STRIP ── */
    /* Same shape as the Events career-stats strip so the two feed tabs read
       as siblings. */
    .adv-stats { display: flex; flex-wrap: wrap; gap: 2.4rem; padding: 1rem 1.2rem; background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--radius-md); margin-bottom: 1.2rem; }
    .adv-stat { display: flex; flex-direction: column; gap: 0.2rem; }
    .adv-stat-label { font-family: var(--font-label); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-label); }
    .adv-stat-value { font-family: var(--font-data); font-size: 1.6rem; color: var(--text-primary); }

    /* ── TYPE FILTER ── */
    .adv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
    .adv-filter-count { font-family: var(--font-data); opacity: 0.7; margin-left: 0.5rem; }

    /* Help button — pinned to the far end of the same row as the type chips
       via margin-left:auto, so it reads as "about this tab" rather than a
       fifth filter option. */
    .adv-help-btn { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; background: transparent; border: 1px solid var(--outline); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; transition: background var(--duration-short) var(--ease-standard); }
    .adv-help-btn:hover { background: var(--state-hover); color: var(--text-primary); }

    /* ── ADVICE CARDS ── */
    .adv-list { display: flex; flex-direction: column; gap: 0.8rem; }
    .adv-card { display: flex; background: var(--surface-2); border: 1px solid var(--outline); border-radius: var(--radius-md); overflow: hidden; }
    .adv-card-main { flex: 1; min-width: 0; padding: 0.8rem 1.2rem; cursor: pointer; }
    .adv-card-main:hover { background: var(--state-hover); }

    /* Priority rail — fill height is set inline by advisors-feed.js as the
       score relative to the top finding. Track uses the tone's -dim fill so
       the unfilled part still hints the card's meaning. */
    .adv-rail { flex: none; width: 0.5rem; position: relative; }
    .adv-rail-fill { position: absolute; bottom: 0; left: 0; right: 0; }

    .adv-card-head { display: flex; align-items: center; gap: 0.8rem; }
    /* Rank is FULL-LIST position (stable under filtering) — mono so a two-digit
       rank doesn't shift the row. */
    .adv-rank { font-family: var(--font-data); font-size: 1.2rem; color: var(--text-secondary); min-width: 2.2rem; }
    .adv-icon { font-size: 1.6rem; flex: none; }
    .adv-type { font-family: var(--font-label); font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; }
    /* Domain chip: neutral outline pill — the tone colour already carries the
       card's meaning, a second colour here would just be noise. */
    .adv-domain { font-family: var(--font-label); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--outline); border-radius: var(--radius-sm); padding: 0.1rem 0.6rem; margin-left: auto; }
    .adv-chev { font-size: 1.3rem; color: var(--text-secondary); transition: transform var(--duration-short) var(--ease-standard); }
    .adv-card.open .adv-chev { transform: rotate(180deg); }
    /* Counter-advice hover marker (military cards). cursor:help signals
       "hover me" without competing with the whole card's expand-click. */
    .adv-counter { font-size: 1.4rem; color: var(--text-label); cursor: help; transition: color var(--duration-short); }
    .adv-counter:hover { color: var(--color-warning); }

    /* Body is a rendered sentence → --font-body (§3). */
    .adv-card-body { font-family: var(--font-body); font-size: 1.35rem; color: var(--text-primary); margin-top: 0.5rem; line-height: 1.45; }

    /* ── EVIDENCE DRAWER ── */
    /* Collapsed by default; .open reveals it. max-height (not height) so the
       transition works without measuring content. 24rem no longer fits every
       evidence grid a rule can emit (military's hostile-presence finding runs
       longer), so the open state scrolls internally instead of clipping —
       same fix .adv-buyers already applies below. */
    .adv-drawer { max-height: 0; overflow: hidden; transition: max-height var(--duration-medium) var(--ease-standard); }
    .adv-card.open .adv-drawer { max-height: 24rem; overflow-y: auto; }
    .adv-evidence { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.6rem; margin-top: 0.8rem; padding: 0.8rem 1rem; background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--radius-sm); }
    .adv-ev-key { font-family: var(--font-label); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-label); }
    .adv-ev-val { font-family: var(--font-data); font-size: 1.15rem; color: var(--text-primary); overflow-wrap: anywhere; }

    /* Sector row's clickable name (evidence.sector_macro, every finding type
       that carries it). Its own class rather than crew.css's shared
       .sector-link — that one hard-codes an !important warning-colour hover,
       which would fight the teal glow here — so this reads as a sibling of
       the Buyers panel/tooltip's neon treatment below, not a duller default
       link one row above it. */
    .adv-sector-link { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: var(--color-primary); font-family: var(--font-data); font-size: 1.15rem; transition: text-shadow var(--duration-short) var(--ease-standard); }
    .adv-sector-link .ti { font-size: 1.1rem; }
    .adv-sector-link:hover { text-shadow: 0 0 0.6rem var(--color-primary); text-decoration: underline; }

    /* Station row's clickable name (evidence.station_id/npc_station_id/
       homebase_id) — same look and hover glow as .adv-sector-link above so
       every cross-tab jump in the drawer reads as one family, just its own
       class since it targets goToStation()/goToNpcStation() instead. */
    .adv-station-link { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: var(--color-primary); font-family: var(--font-data); font-size: 1.15rem; transition: text-shadow var(--duration-short) var(--ease-standard); }
    .adv-station-link .ti { font-size: 1.1rem; }
    .adv-station-link:hover { text-shadow: 0 0 0.6rem var(--color-primary); text-decoration: underline; }

    /* Ship row's clickable name (evidence.ship_id, damaged_fleet) — jumps to
       the Fleet tab via jumpToShip() instead of a tab/sector target, but same
       look and hover glow as the links above so it reads as one family. */
    .adv-ship-link { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: var(--color-primary); font-family: var(--font-data); font-size: 1.15rem; transition: text-shadow var(--duration-short) var(--ease-standard); }
    .adv-ship-link .ti { font-size: 1.1rem; }
    .adv-ship-link:hover { text-shadow: 0 0 0.6rem var(--color-primary); text-decoration: underline; }

    /* mining_oversupply's "Delivering Miners" row stacks several .adv-ship-link chips (one
       per delivering miner). Column layout keeps each ship on its own line so
       long "Name (CODE)" labels stay readable instead of running together. */
    .adv-miner-list { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }

    /* "Pricing" row's vs-average visual (market_opportunity/pricing_gap) —
       lives INSIDE .adv-evidence as an ordinary key/value row (no box/
       background of its own), so it reads as part of the same evidence
       piece instead of a separate card below it. Same gradient-track-with-
       glowing-dot shape as the Buyers panel's hover gauge and the
       Stations > Economy > Breakdown chart's "vs Average" tooltip, just
       static instead of a hover popover. Capped at half the value column's
       width (not the full 1fr) so it doesn't stretch edge-to-edge like the
       text rows above it. Marker colour/position is per-finding data, set
       inline by advisors-feed.js's _pricingRowHtml (same split as
       .adv-rail-fill's height above). */
    .adv-pricing-gauge { max-width: 50%; min-width: 14rem; }
    .adv-pricing-track { position: relative; height: 0.5rem; border-radius: var(--radius-sm); margin-bottom: 0.4rem; overflow: visible; }
    .adv-pricing-mid { position: absolute; left: 50%; top: -0.2rem; bottom: -0.2rem; width: 1px; background: var(--text-brand); }
    .adv-pricing-dot { position: absolute; top: 50%; width: 0.7rem; height: 0.7rem; border-radius: 50%; transform: translate(-50%, -50%); }
    .adv-pricing-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-family: var(--font-data); font-size: 1.05rem; color: var(--text-secondary); }

    /* Details/Buyers toggle — station siting only. Reuses the shared filter-
       chip button so it reads as a sibling of the type filter above the list,
       but the active state gets its own glow (scoped to this toggle, not the
       shared button) so it doesn't look like a lesser cousin of the Buyers
       panel/tooltip it opens onto. */
    .adv-ev-tabs { display: flex; gap: 0.4rem; margin-top: 0.8rem; }
    .adv-ev-tabs .station-tab-btn.active { box-shadow: 0 0 0.6rem var(--color-primary); }

    /* Buyers panel — one row per reachable NPC buy offer behind the card's
       demand figure. Dark inset-glow box (same recipe as charts.css's
       .econlog-box, tinted to the siting card's own --color-special purple
       instead of the Economy tab's teal) so this reads as a graph-adjacent
       panel, not a plain evidence list — each row previews the same
       elaborate hover gauge as the Economy tab's chart tooltips (see
       _buyerTipHtml in advisors-feed.js). Scrolls independently of the
       fixed-height drawer (UI_STANDARDS overflow rule) so a sector with many
       buyers doesn't get clipped by the drawer's max-height transition. */
    .adv-buyers { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; padding: 0.6rem 1rem; max-height: 18rem; overflow-y: auto; background: var(--surface-1); border: 1px solid var(--color-special-line); border-radius: var(--radius-sm); box-shadow: inset 0 0 1.6rem var(--color-special-dim); }
    .adv-buyer-row { display: flex; align-items: baseline; gap: 1rem; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--outline); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration-short) var(--ease-standard); }
    .adv-buyer-row:last-child { border-bottom: none; }
    .adv-buyer-row:hover { background: var(--state-hover); }
    .adv-buyer-name { font-family: var(--font-body); font-size: 1.15rem; color: var(--color-primary); flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .adv-buyer-amount, .adv-buyer-price { font-family: var(--font-data); font-size: 1.1rem; color: var(--text-secondary); white-space: nowrap; }
    .adv-ev-empty { margin-top: 0.8rem; padding: 0.8rem 1rem; font-family: var(--font-body); font-size: 1.2rem; color: var(--text-secondary); }

    /* ── TONE MODIFIERS ── */
    /* One class per semantic meaning wires the trio (solid/dim) into the
       rail, icon, and type label. Cards keep the neutral --outline border —
       the rail carries the colour, a full tinted border on every card would
       shout across a 20-row list. */
    .adv--warning  .adv-rail { background: var(--color-warning-dim); }
    .adv--warning  .adv-rail-fill { background: var(--color-warning); }
    .adv--warning  .adv-icon, .adv--warning .adv-type { color: var(--color-warning); }
    .adv--positive .adv-rail { background: var(--color-positive-dim); }
    .adv--positive .adv-rail-fill { background: var(--color-positive); }
    .adv--positive .adv-icon, .adv--positive .adv-type { color: var(--color-positive); }
    .adv--info     .adv-rail { background: var(--color-info-dim); }
    .adv--info     .adv-rail-fill { background: var(--color-info); }
    .adv--info     .adv-icon, .adv--info .adv-type { color: var(--color-info); }
    .adv--special  .adv-rail { background: var(--color-special-dim); }
    .adv--special  .adv-rail-fill { background: var(--color-special); }
    .adv--special  .adv-icon, .adv--special .adv-type { color: var(--color-special); }
    .adv--negative .adv-rail { background: var(--color-negative-dim); }
    .adv--negative .adv-rail-fill { background: var(--color-negative); }
    .adv--negative .adv-icon, .adv--negative .adv-type { color: var(--color-negative); }

    /* ── HELP TOPICS ── */
    /* Same card/rail shell as the advice cards (the advisor help-topic
       sections inside tab-help in body.html) so the explainers visually
       match what they're explaining — static text only, no click/expand
       affordances. Hub/TOC chrome lives in help.css. */
    /* Intro note above the per-type cards — explains the priority rail, which
       is common to all four types rather than repeated in each card. */
    .adv-help-note { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1rem 1.4rem; background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--radius-md); margin-bottom: 1.2rem; }
    .adv-help-note .ti { font-size: 1.6rem; color: var(--text-secondary); flex: none; margin-top: 0.2rem; }
    .adv-help-note p { font-family: var(--font-body); font-size: 1.35rem; color: var(--text-primary); line-height: 1.5; margin: 0; }
    .adv-help-note strong { color: var(--text-primary); }

    /* Verdict legend (military help only) — hostile-presence cards lead with
       one of these four bands, so the legend sits between the intro notes and
       the type cards. Chips follow the §2 trio rule (solid text on -dim fill
       inside a -line border); tones run worst→best in the same order as the
       rule's verdict multiplier, so colour severity and score severity agree. */
    .adv-help-verdicts { display: grid; grid-template-columns: max-content 1fr; gap: 0.7rem 1.4rem; align-items: start; padding: 1rem 1.4rem; background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--radius-md); margin-bottom: 1.2rem; }
    .adv-help-verdicts-title { grid-column: 1 / -1; font-family: var(--font-label); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-label); }
    .adv-verdict { justify-self: start; font-family: var(--font-label); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.8rem; border: 1px solid; border-radius: var(--radius-sm); }
    .adv-verdict--negative { color: var(--color-negative); background: var(--color-negative-dim); border-color: var(--color-negative-line); }
    .adv-verdict--warning  { color: var(--color-warning);  background: var(--color-warning-dim);  border-color: var(--color-warning-line); }
    .adv-verdict--info     { color: var(--color-info);     background: var(--color-info-dim);     border-color: var(--color-info-line); }
    .adv-verdict--positive { color: var(--color-positive); background: var(--color-positive-dim); border-color: var(--color-positive-line); }
    .adv-help-verdicts p { font-family: var(--font-body); font-size: 1.35rem; color: var(--text-primary); line-height: 1.45; margin: 0; }

    .adv-help-list { display: flex; flex-direction: column; gap: 0.8rem; }
    .adv-help-card { display: flex; background: var(--surface-2); border: 1px solid var(--outline); border-radius: var(--radius-md); overflow: hidden; }
    .adv-help-body { flex: 1; min-width: 0; padding: 1rem 1.4rem; }
    .adv-help-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
    .adv-help-body p { font-family: var(--font-body); font-size: 1.35rem; color: var(--text-primary); line-height: 1.5; margin: 0; }

    /* ── EMPTY STATE ── */
    .adv-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 4rem 1rem; color: var(--text-secondary); font-family: var(--font-body); font-size: 1.4rem; }
    .adv-empty .ti { font-size: 3rem; color: var(--text-label); }
    .adv-empty-sub { font-size: 1.2rem; max-width: 46rem; text-align: center; }