/* Core role: Styles for fleet/crew tables, ship designs, and hull comparison. */
    /* SORTABLE COLUMN HEADERS — shared by all tables */
    .data-table th[data-sort-key] { cursor: pointer; user-select: none; }
    .data-table th[data-sort-key]:hover { color: var(--color-primary); }
    .data-table th.sort-active { color: var(--color-primary); }
    /* Inline sort labels — used by the merged Hull/Shields column header, which
       holds two independently-clickable sort keys in one <th>. */
    .data-table th .col-sort { cursor: pointer; user-select: none; }
    .data-table th .col-sort:hover { color: var(--color-primary); }
    .data-table th .col-sort.sort-active { color: var(--color-primary); }

    /* ── FLEET SUB-TABS ── */
    /* Badge style — matches the hull-type chips in the ship tables */
    .fleet-subtabs { display: flex; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.8rem; border-bottom: 1px solid var(--outline); margin-bottom: 0.4rem; flex-shrink: 0; scrollbar-width: none; }
    .fleet-subtabs::-webkit-scrollbar { display: none; }
    .fleet-subtab { padding: 0.3rem 1rem; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-label); font-weight: 600; font-size: 1.4rem; letter-spacing: 0.06em; color: var(--tab-color, var(--text-secondary)); background: var(--tab-bg, var(--surface-2)); border: 1px solid var(--tab-border, var(--outline)); border-radius: var(--radius-sm); cursor: pointer; user-select: none; white-space: nowrap; flex-shrink: 0; transition: border-color var(--duration-short); }
    .fleet-subtab:hover { border-color: var(--tab-color, var(--text-label)); }
    .fleet-subtab.active { border-color: var(--tab-color, var(--color-primary)); box-shadow: 0 0 0 1px var(--tab-color, var(--color-primary)); }
    .ft-count { font-family: var(--font-data); font-size: 1rem; opacity: 0.6; }
    .fleet-panel { display: none; flex-direction: column; gap: 1.2rem; flex: 1; min-height: 0; }
    .fleet-panel.active { display: flex; }

    /* ── DESIGNS FILTER BAR ──
       Size chips reuse .fleet-subtab so they read as the same control as every
       other chip strip in the app; the faction picker reuses .bhull (icon +
       native select) from the blueprint builder below for the same reason. */
    .designs-filter-bar { display: flex; align-items: center; gap: 1.6rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--outline); flex-shrink: 0; }
    .dfb-group { display: flex; align-items: center; gap: 0.6rem; }
    .dfb-label { font-family: var(--font-label); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-label); flex-shrink: 0; }
    .dfb-count { font-family: var(--font-data); font-size: 1.1rem; color: var(--text-secondary); }

    /* ── SHIP DESIGN CARDS ──
       Each card splits into a left equipment column (one bounded .dsect panel
       per category) and a right .dhull preview panel — the "switchable view"
       slot, Hull/wireframe only for now but laid out so more views can sit
       alongside it later without reshaping the equipment side. */
    /* <details>/<summary> — same collapse idiom as .sd-ships in the Sectors
       tab. Open by default; collapsing hides everything but the title bar. */
    .dcard { padding: 1.4rem; margin-bottom: 1.2rem; }
    .dcard-hd { display: flex; align-items: center; gap: 1rem; padding-bottom: 0.8rem; margin-bottom: 1rem; cursor: pointer; list-style: none; user-select: none; }
    .dcard-hd::-webkit-details-marker { display: none; }
    .dcard[open] > .dcard-hd { border-bottom: 1px solid var(--outline); }
    .dcard-title { font-family: var(--font-label); font-weight: 600; font-size: 1.6rem; color: var(--text-primary); white-space: nowrap; }
    /* Summary strip (size + faction + ship count) — only useful while the card
       is collapsed, since the same info is already visible in the expanded
       body (hull panel + footer), so it hides once the card is open. */
    .dcard-meta { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: 1.2rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
    .dcard[open] .dcard-meta { display: none; }
    .dcard-size-badge { flex-shrink: 0; display: inline-block; font-family: var(--font-data); font-weight: 600; font-size: 1rem; letter-spacing: 0.04em; padding: 1px 0.7rem; border-radius: var(--radius-sm); border: 1px solid; }
    .dcard-meta-used { flex-shrink: 0; }
    .dcard-chev { flex-shrink: 0; font-size: 1.5rem; color: var(--text-label); transition: transform var(--duration-short); transform: rotate(-90deg); }
    .dcard[open] .dcard-chev { transform: rotate(0deg); }
    .dcard-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.4rem; align-items: start; }
    .dcard-equip { display: flex; flex-direction: column; min-width: 0; }
    /* Footer: "used by" sits bottom-left, Design total starts at the column
       boundary (the card's horizontal centre) so it reads as right-of-centre
       while staying baseline-aligned with "used by", not pinned to the edge. */
    .dcard-footer { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; border-top: 1px solid var(--outline); margin-top: 1rem; padding-top: 0.9rem; }
    .dcard-used { cursor: pointer; color: var(--text-secondary); font-size: 1.2rem; white-space: nowrap; }
    .dcard-used i { margin-left: 0.2rem; font-size: 1.1rem; transition: transform var(--duration-short); display: inline-block; }
    .dcard-used.open i { transform: rotate(180deg); }
    .dcard-total-val { font-family: var(--font-label); font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
    .dcard-total-val b { font-family: var(--font-data); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--color-warning); }
    /* The "stylized green box" ship list — same lime border/glow/tint as the
       blueprint builder's .bfit / .bopts panels. */
    .dcard-ships { display: none; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; padding: 0.9rem; border: 1px solid var(--color-alert-line); border-radius: var(--radius-lg); background: rgba(57,255,20,0.06); box-shadow: 0 0 1rem rgba(57,255,20,0.12); }

    .dsect { border: 1px solid var(--outline); border-radius: var(--radius-lg); background: var(--surface-1); margin-bottom: 0.8rem; overflow: hidden; }
    .dsect-hd { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--outline); }
    .dsect-hd i { font-size: 1.5rem; }
    .dsect-hd .lbl { font-family: var(--font-label); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; }
    .dsect-hd .slots { margin-left: auto; font-family: var(--font-data); font-size: 1rem; color: var(--text-secondary); }
    .dsect-body { padding: 0.5rem 1rem 0.7rem; }
    /* Per-size sub-group inside a category body — each mount size (L, M, ...)
       gets its own outlined, mostly-transparent "inner box" (border/bg tinted
       per SIZE_BOX in JS) so items fitted under different sizes read as
       physically separate compartments rather than one flat list. */
    .dsub-box { border: 1px solid var(--outline); border-radius: var(--radius-lg); padding: 0.3rem 0.8rem 0.6rem; margin-top: 0.6rem; }
    .dsub-box:first-child { margin-top: 0; }
    .dsub-hd { display: flex; align-items: center; gap: 0.8rem; padding: 0.3rem 0 0.3rem; }
    .dsub-badge { font-family: var(--font-data); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; padding: 1px 0.7rem; border-radius: var(--radius-sm); border: 1px solid; }
    .dsub-cnt { margin-left: auto; font-family: var(--font-data); font-size: 1rem; color: var(--text-label); }
    /* Narrower than the old full-width card row — this now lives in a half-card
       column, so every fixed column lost a few px versus the original layout. */
    .drow { display: grid; grid-template-columns: 2.8rem 3.8rem minmax(7rem,1fr) 4.4rem 4.4rem 4.4rem 4.4rem 6.4rem; align-items: center; gap: 0.4rem 0.6rem; padding: 0.2rem 0; }
    .dhd   { font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-label); text-align: right; }
    .dst   { font-family: var(--font-data); font-size: 1.1rem; color: var(--text-primary); text-align: right; }
    .dcost { font-family: var(--font-data); font-size: 1.1rem; color: var(--color-warning); text-align: right; }
    .dcnt  { font-family: var(--font-data); color: var(--color-alert); font-size: 1.2rem; text-align: right; }
    .dnm   { font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ── HULL PREVIEW PANEL (right half of a design card) ──
       Border/glow colour comes from --dhull-border / --dhull-glow, set inline
       per-card (faction colour at low alpha) — color-mix() isn't used here
       since QtWebEngine's bundled Chromium version isn't guaranteed to support it. */
    .dhull { border: 1px solid var(--dhull-border, var(--color-primary-line)); border-radius: var(--radius-lg); background: radial-gradient(ellipse at 50% 0%, var(--dhull-glow, rgba(45,212,191,0.08)), var(--surface-1) 70%); padding: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
    .dhull-hd { align-self: flex-start; display: flex; align-items: center; gap: 0.7rem; }
    .dhull-hd i { font-size: 1.4rem; }
    .dhull-hd .lbl { font-family: var(--font-label); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
    .dhull-wire { width: 100%; max-width: 26rem; padding: 1rem 0; }
    .dhull-wire svg { width: 100%; height: auto; display: block; }
    .dhull-id { display: flex; align-items: center; gap: 0.8rem; }
    .dhull-nm { font-family: var(--font-label); font-weight: 600; font-size: 1.5rem; color: var(--text-primary); }
    .dhull-stats { width: 100%; display: flex; gap: 0.8rem; border-top: 1px solid var(--outline); padding-top: 0.8rem; }
    .dhull-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
    .dhs-lbl { font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-label); }
    /* min-width:0 above lets this wrap instead of overflowing for longer
       values like role names ("Miner (Solid)") now that there are 4 columns. */
    .dhs-val { font-family: var(--font-data); font-size: 1.3rem; color: var(--text-primary); text-align: center; }

    /* ── HULL COMPARISON (Resource Library) ──
       Two .dhull cards (reused as-is) + a third summary card of head-to-head
       bar rows. Hull A's bar is always the top line in a row, hull B's
       always the bottom — fixed position, not faction-tinted, so the eye
       only has to track "top vs bottom" rather than re-learn a colour key
       per pair of hulls compared. */
    .hcmp-wrap    { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-start; }
    .hcmp-col     { display: flex; flex-direction: column; gap: 0.8rem; flex: 1; min-width: 26rem; max-width: 32rem; }
    .hcmp-summary { flex: 1; min-width: 28rem; border: 1px solid var(--outline); border-radius: var(--radius-lg); background: var(--surface-1); padding: 1.2rem; }
    .hcmp-summary-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; min-height: 20rem; color: var(--text-secondary); text-align: center; }
    .hcmp-summary-empty i { font-size: 2.8rem; color: var(--color-primary); opacity: 0.5; }
    .hcmp-row     { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.7rem 0; border-bottom: 1px solid var(--outline); }
    .hcmp-row:last-child { border-bottom: none; }
    .hcmp-lbl     { font-family: var(--font-label); font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-label); }
    /* A/B identity colour — fixed per hull, deliberately NOT lime/red/teal
       (those are already spoken for as the bar fill's win/lose/tie colour),
       so a reader never has to ask "is purple winning or is that just who
       it is". */
    .hcmp-label   { width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--surface-1); font-family: var(--font-data); font-weight: 700; font-size: 1rem; flex-shrink: 0; }
    .hcmp-label-a { background: var(--color-special); }
    .hcmp-label-b { background: var(--color-highlight); }
    .hcmp-bar-line  { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
    .hcmp-bar-track { flex: 1; height: 1rem; background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); overflow: hidden; min-width: 6rem; }
    .hcmp-bar-fill  { height: 100%; border-radius: var(--radius-sm); transition: width var(--duration-short); }
    .hcmp-val       { font-family: var(--font-data); font-size: 1.1rem; min-width: 7rem; text-align: right; flex-shrink: 0; }
    /* Per-size slot-count badges (e.g. "2 S · 1 M") appended after a
       hardpoint row's total, so equal totals on two hulls don't read as
       equal loadouts when the mount sizes differ. */
    .hcmp-breakdown   { display: flex; gap: 0.4rem; flex-shrink: 0; }
    .hcmp-size-badge  { font-family: var(--font-data); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 1px 0.6rem; border-radius: var(--radius-sm); border: 1px solid; }
    /* Placeholder card shown in a column before a hull's picked — dashed
       border distinguishes it from a real .dhull (solid, faction-tinted)
       at a glance, same footprint so picking a hull doesn't reflow the row. */
    .hcmp-empty-card { border-style: dashed; min-height: 22rem; justify-content: center; }
    .hcmp-empty-msg  { color: var(--text-label); font-size: 1.2rem; text-align: center; }

    /* ── BLUEPRINT BUILDER — two-pane master/detail ── */
    .bhdr   { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.2rem; }
    .bfield { display: flex; flex-direction: column; gap: 0.3rem; }
    .blbl   { font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-alert); font-family: var(--font-data); }
    .binput { background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-label); font-weight: 600; font-size: 1.6rem; padding: 0.6rem 1rem; }
    .binput:focus { outline: none; border-color: var(--color-primary); }
    .bhull  { display: flex; align-items: center; gap: 0.8rem; border: 1px solid var(--color-primary-line); border-radius: var(--radius-md); background: var(--surface-1); padding: 0.5rem 0.8rem 0.5rem 1rem; }
    .bhull select { background: var(--surface-1); border: none; color: var(--text-primary); font-family: var(--font-label); font-size: 1.4rem; max-width: 22rem; cursor: pointer; }
    .bhull select:focus { outline: none; }
    .bsave  { background: rgba(57,255,20,0.1); border: 1px solid var(--color-alert); color: var(--color-alert); border-radius: var(--radius-md); padding: 0.8rem 1.6rem; font-family: var(--font-label); font-weight: 600; font-size: 1.4rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
    .bsave:hover { filter: drop-shadow(0 0 0.6rem rgba(57,255,20,0.45)); }
    .btwo   { display: grid; grid-template-columns: 30rem minmax(0,1fr); gap: 1.2rem; align-items: start; }
    .bcat   { border: 1px solid var(--outline); border-radius: var(--radius-lg); background: var(--surface-1); margin-bottom: 0.7rem; padding-bottom: 0.7rem; }
    .bcat-h { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.9rem; }
    .bcat-h i { font-size: 1.5rem; }
    .bcat-h .lbl { font-family: var(--font-label); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; }
    .bcat-h .cap { margin-left: auto; font-family: var(--font-data); font-size: 1rem; color: var(--text-secondary); }
    /* Same per-size "inner box" idiom as .dsub-box on the design cards — each
       mount size is its own outlined, mostly-transparent compartment (tinted
       per SIZE_BOX in JS), with its own Fit button scoped to that size only. */
    .bsub-box { border: 1px solid var(--outline); border-radius: var(--radius-lg); margin: 0 0.9rem 0.6rem; padding: 0.3rem 0.7rem 0.6rem; }
    .bsub-box.sel { border-color: var(--color-alert) !important; box-shadow: 0 0 0.9rem rgba(57,255,20,0.2); }
    .bsub-hd { display: flex; align-items: center; gap: 0.8rem; padding: 0.3rem 0.2rem 0.3rem; }
    .bsub-badge { font-family: var(--font-data); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; padding: 1px 0.6rem; border-radius: var(--radius-sm); border: 1px solid; }
    .bsub-cnt { margin-left: auto; font-family: var(--font-data); font-size: 0.9rem; color: var(--text-label); }
    .bfr    { display: flex; align-items: center; gap: 0.9rem; padding: 0.3rem 0.2rem; }
    .bstep  { display: flex; align-items: center; gap: 0.5rem; }
    .bsb    { width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; border: 1px solid #30363d; border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-data); font-size: 1.2rem; cursor: pointer; user-select: none; }
    .bsb:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .bcbox  { min-width: 2.4rem; text-align: center; font-family: var(--font-data); font-size: 1.2rem; color: var(--color-alert); border: 1px solid var(--color-primary-line); border-radius: var(--radius-md); padding: 1px 0.4rem; background: rgba(45,212,191,0.06); }
    .bfit   { display: block; margin: 0.5rem 0 0; text-align: center; padding: 0.5rem; border: 1px solid var(--color-alert); border-radius: var(--radius-md); color: var(--color-alert); font-family: var(--font-label); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; background: rgba(57,255,20,0.06); }
    .bfit:hover { box-shadow: 0 0 0.9rem var(--color-alert-line); }
    .bopts  { border: 1px solid var(--color-alert-line); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: 0 0 1rem rgba(57,255,20,0.12); }
    .bopts-h { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--outline); background: rgba(57,255,20,0.05); }
    .bopts-h .lbl { font-family: var(--font-label); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-alert); }
    .bopts-h .mt { margin-left: auto; font-family: var(--font-data); font-size: 1rem; color: var(--text-secondary); }
    /* True Stats toggle (weapon/turret hover stats: truncated in-game value vs
       raw 3dp) -- red when off (in-game), green when on (true), so the state
       reads at a glance without needing to read the label. */
    .bstats-toggle { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.8rem; font-family: var(--font-data); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; user-select: none; border-radius: var(--radius-sm); transition: color var(--duration-short), border-color var(--duration-short), background var(--duration-short);
      color: var(--color-negative); border: 1px solid var(--color-negative-line); background: rgba(248,81,73,0.06); }
    .bstats-toggle:hover { box-shadow: 0 0 0.6rem rgba(248,81,73,0.25); }
    .bstats-toggle.on { color: var(--color-alert); border-color: rgba(57,255,20,0.5); background: rgba(57,255,20,0.08); }
    .bstats-toggle.on:hover { box-shadow: 0 0 0.6rem var(--color-alert-line); }
    /* Equipment-card faction filter — a multi-select checkbox dropdown sitting
       right after the card title (e.g. "Available · Medium Turrets"). Other
       card filters (besides faction) will land here too, so keep the .beqf-
       prefix generic. */
    .beqf-dd { position: relative; }
    .beqf-trigger { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.8rem; font-family: var(--font-data); font-size: 1rem; letter-spacing: 0.04em; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--outline); border-radius: var(--radius-sm); cursor: pointer; user-select: none; }
    .beqf-trigger:hover { border-color: var(--color-alert); color: var(--color-alert); }
    .beqf-trigger .ti-chevron-down { font-size: 1.1rem; }
    .beqf-menu { display: none; position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 50; flex-direction: column; gap: 0.2rem; min-width: 14rem; max-height: 50vh; overflow-y: auto; padding: 0.5rem; background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--radius-md); box-shadow: 0 0.4rem 1.4rem rgba(0,0,0,0.45); scrollbar-width: thin; }
    .beqf-menu.open { display: flex; }
    .beqf-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.8rem; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-label); font-size: 1.2rem; letter-spacing: 0.04em; white-space: nowrap; }
    .beqf-item:hover { background: rgba(255,255,255,0.05); }
    .beqf-item.sel { background: rgba(57,255,20,0.08); }
    .beqf-check { width: 1.3rem; height: 1.3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0.15rem solid var(--color-alert); border-radius: var(--radius-md); }
    .beqf-check.sel::after { content: ''; width: 0.7rem; height: 0.7rem; background: var(--color-alert); border-radius: 1px; }
    /* Equipment Comparison picker — a full-width custom dropdown built on the
       .beqf-dd shell. A native <select> can't right-justify a tinted size
       badge inside an <option>, so each item is a .beqf-item with the name on
       the left (flex:1, ellipsised) and an .hcmp-size-badge pushed to the
       right. These rules just widen the shell to span the column and restyle
       the trigger to read like the old .reslib-fbox <select> it replaces. */
    .reslib-eqcmp-dd { width: 100%; max-width: 30rem; }
    .ecmp-trigger { width: 100%; padding: 0.45rem 0.9rem; font-family: var(--font-label); font-size: 1.3rem; color: var(--text-primary); background: var(--surface-1); }
    .ecmp-trigger .ti-chevron-down { color: var(--text-label); }
    #reslib-eqcmp-menu-a, #reslib-eqcmp-menu-b { width: 100%; min-width: 0; max-width: 30rem; }
    .ecmp-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .ecmp-opt-size { flex-shrink: 0; }
    .ecmp-dd-ph { color: var(--text-label); }
    .ecmp-dd-sec { font-family: var(--font-label); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-label); padding: 0.6rem 0.8rem 0.2rem; }
    .ecmp-dd-sec:first-child { padding-top: 0.2rem; }
    .borow  { display: grid; grid-template-columns: 4.2rem minmax(0,1fr) 5rem 5rem 5rem 5rem 6.2rem 2.2rem; align-items: center; gap: 0.8rem; padding: 0.4rem 0.8rem; border-radius: var(--radius-md); cursor: pointer; }
    .borow:hover { background: rgba(45,212,191,0.38); box-shadow: inset 0.3rem 0 0 var(--color-primary); }
    .borow.on { background: rgba(57,255,20,0.08); box-shadow: inset 0 0 0 1px var(--color-alert-line); }
    .boh    { font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-label); text-align: right; }
    /* Diplomacy panels — own class so the fleet switcher can't toggle them. */
    .diplo-panel { display: none; flex-direction: column; gap: 1.2rem; flex: 1; min-height: 0; }
    .diplo-panel.active { display: flex; }
    /* Relations matrix grid. Sticky headers keep faction labels visible while
       the ~21-column grid scrolls in both directions inside its .panel. */
    .diplo-matrix { border-collapse: separate; border-spacing: 0.2rem; font-family: var(--font-data); font-size: 1.1rem; }
    .diplo-matrix th { font-family: var(--font-label); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.04em; color: var(--text-secondary); padding: 0.2rem 0.5rem; text-align: center; white-space: nowrap; }
    .diplo-matrix thead th { position: sticky; top: 0; background: var(--surface-1); z-index: 2; }
    .diplo-matrix th.dm-row { position: sticky; left: 0; background: var(--surface-1); text-align: right; padding-right: 0.9rem; cursor: pointer; z-index: 1; }
    .diplo-matrix thead th.dm-row { z-index: 3; cursor: default; } /* corner cell sits above both axes */
    .diplo-matrix th.dm-row:hover { color: var(--color-primary); }
    .diplo-matrix td { min-width: 4rem; height: 2.4rem; text-align: center; border-radius: var(--radius-sm); }
    .diplo-matrix td.dm-empty { background: rgba(255,255,255,0.02); color: var(--text-label); }
    /* Faction selector: a dropdown built from the same .fleet-subtab button, with
       the Matrix toggle sitting beside it as a peer (not inside the list). */
    .diplo-controls { display: flex; gap: 0.5rem; align-items: center; padding-bottom: 0.8rem; border-bottom: 1px solid var(--outline); margin-bottom: 0.4rem; flex-shrink: 0; }
    .diplo-dd { position: relative; }
    .diplo-dd-trigger { min-width: 15rem; justify-content: space-between; }
    .diplo-dd-menu { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 50; flex-direction: column; gap: 0.3rem; min-width: 100%; max-height: 60vh; overflow-y: auto; padding: 0.5rem; background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--radius-md); box-shadow: 0 0.4rem 1.4rem rgba(0,0,0,0.45); scrollbar-width: thin; }
    .diplo-dd-menu.open { display: flex; }
    .diplo-dd-menu .fleet-subtab { width: 100%; }

    /* ── SHIP NAME SUBLINE ── */
    /* Displayed below the code in the fleet table Code cell */
    .ship-name { font-size: 1.3rem; color: var(--color-primary); font-family: var(--font-data); font-weight: 700; white-space: nowrap; }