/* =================================================================
   RESEARCH PANEL

   Built on the shared region-D chrome in hudPanels.css (.hud-panel,
   .hp-header, .hp-body, .hp-row, .hp-info) and reusing .queue-track /
   .queue-fill / .queue-remaining / .queue-cancel for the in-progress
   project, so a running research bar is visually the same object as a
   running construction bar. Only research-specific pieces live here.

   TYPE (docs/TYPE-LEGIBILITY.md). This was the densest failure in the
   feature panels: 13 rows, and only one of them a colour problem in the
   usual sense. Four were --color-text-muted at 4.03:1, four more were
   8-8.3px caps chips, and the remaining five were the same styles seen
   through .rs-locked's opacity: 0.62 — which the original sweep could not
   see at all, because it read `color` and ignored inherited alpha.

   Three rules the rest of this file now follows:
     - nothing renders below --text-xs (12px), in any state;
     - the quiet tier is --color-text-secondary, never --color-text-muted;
     - a row's state is carried by its surface, not by fading its text.
   ================================================================= */

/* The tree is the longest list in region D — 14 entries across four
   branches — so it fills whatever height the shell allows before it
   scrolls. It used to claim 58vh of its own, which on a phone is taller
   than the slot the shell now grants it (viewport minus regions A and C);
   an inner max-height above the outer one just pushes the panel out of
   its bounds. The shell owns the height; the body owns the scrolling. */
#research-panel .hp-body {
    max-height: none;
}

/* -----------------------------------------------------------------
   Active-effects summary
   ----------------------------------------------------------------- */

.rs-effects {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 2px 4px 8px;
    padding: 7px 10px;
    background: rgba(56, 182, 196, 0.07);
    border: 1px solid rgba(56, 182, 196, 0.28);
    border-radius: 6px;
}

.rs-effects-key {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.6px;
    color: var(--color-accent-cyan);
}

.rs-effects-value {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------
   The in-progress project, pinned above the tree
   ----------------------------------------------------------------- */

.rs-active {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 4px 10px;
    padding: 9px 10px;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 6px;
}

/* -----------------------------------------------------------------
   Categories
   ----------------------------------------------------------------- */

.rs-category + .rs-category {
    margin-top: 10px;
}

.rs-category-head {
    padding: 5px 10px 4px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 1.1px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid rgba(26, 39, 68, 0.9);
}

/* -----------------------------------------------------------------
   Rows
   ----------------------------------------------------------------- */

.rs-row {
    align-items: flex-start;
}

.rs-row + .rs-row {
    border-top: 1px solid rgba(26, 39, 68, 0.55);
    border-radius: 0;
}

/* A locked entry stays readable — the player needs to be able to plan
   toward it — but is clearly not actionable yet.

   That was written with `opacity: 0.62`, which delivered the opposite:
   at 0.62 the cost line measured 3.54:1, the blocker line ("Requires
   Automated Refining" — the one sentence that tells a player how to
   unlock it) 2.56:1, and the LOCKED chip 2.26:1. The state is carried by
   surface instead, so nothing on the row is dimmed below its own colour.
   Same argument, and the same fix, as achievements.css's locked rows. */
.rs-locked {
    background: rgba(10, 15, 26, 0.5);
}

.rs-locked .hp-name {
    color: var(--color-text-secondary);
}

/* --color-accent-green (#059669) measures 5.08:1 here; --color-accent-green-light
   (#10b981) measures 7.56:1 and is already the "in your favour" green in the
   life and achievement panels. One green, and the brighter one. */
.rs-completed .hp-name {
    color: var(--color-accent-green-light);
}

/* Tier badge. Doubles as the tree's only depth cue in a flat list. */
/* "T1".."T4". Widened from 26px to 30px to hold two 12px Orbitron glyphs. */
.rs-tier {
    flex-shrink: 0;
    width: 30px;
    margin-top: 2px;
    text-align: center;
    padding: 2px 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.3px;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: var(--color-text-secondary);
}

.rs-available .rs-tier { color: var(--color-accent-cyan); }
.rs-completed .rs-tier { color: var(--color-accent-green-light); }

/* The description is the flavour line and can be long; unlike the queue
   panel's single-line subtitle it is allowed to wrap to two. */
.rs-row .hp-desc {
    white-space: normal;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
}

/* -----------------------------------------------------------------
   Cost and blockers
   ----------------------------------------------------------------- */

.rs-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* ONE DOT PER RESOURCE, IN THAT RESOURCE'S COLOUR.
   A single rule painted every dot gold, so "1500 gold / 600 materials / 300
   energy" drew three gold dots — two inches under HUD chips that code the same
   three resources correctly. The product taught a colour language in one region
   and contradicted it in another, which is worse than having no dots: the
   marker occupied the position where a meaning had been promised and carried
   none.

   The text label stays and is what actually carries the information; colour is
   redundant reinforcement, never the only channel. */
.rs-cost-item::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 4px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.rs-cost-item[data-resource="gold"]::before      { background: var(--color-accent-gold); }
.rs-cost-item[data-resource="materials"]::before { background: var(--color-accent-green-light); }
.rs-cost-item[data-resource="energy"]::before    { background: var(--color-accent-cyan-light); }

.rs-cost-time {
    color: var(--color-text-secondary);
}

/* The clock glyph inherits this element's colour, so it was failing on the
   same 4.03:1 the text was — a pseudo-element the original sweep never
   walked. Fixing the parent fixes both. */
.rs-cost-time::before {
    content: '⏱ ';
}

.rs-blocked {
    margin-top: 3px;
    font-size: var(--text-xs);
    line-height: 1.35;
    color: var(--color-accent-red-light, #f87171);
}

/* -----------------------------------------------------------------
   Actions and status chips
   ----------------------------------------------------------------- */

.rs-start {
    flex-shrink: 0;
    align-self: center;
    min-width: 82px;
    padding: 7px 10px;
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: var(--color-primary-900, #0a0f1a);
    background: var(--color-accent-gold);
    border: 1px solid var(--color-accent-gold);
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.rs-start:hover:not(:disabled) {
    filter: brightness(1.12);
}

.rs-start:disabled {
    color: var(--color-text-secondary);
    background: transparent;
    border-color: rgba(148, 163, 184, 0.45);
    cursor: not-allowed;
}

/* DONE / ACTIVE / LOCKED. The widest is six Orbitron caps, ~53px at 12px
   with 0.9px of tracking, so it still sits inside the 68px phone chip. */
.rs-status {
    flex-shrink: 0;
    align-self: center;
    min-width: 82px;
    text-align: center;
    padding: 5px 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.9px;
    border: 1px solid currentColor;
    border-radius: 4px;
}

.rs-status-done   { color: var(--color-accent-green-light); }
.rs-status-active { color: var(--color-accent-gold); }
.rs-status-locked { color: var(--color-text-secondary); }

/* -----------------------------------------------------------------
   Narrow screens: the tier badge and cost dots are the first things
   to go, the name and action are the last.
   ----------------------------------------------------------------- */

@media (max-width: 600px) {
    .rs-tier { display: none; }
    .rs-start,
    .rs-status { min-width: 68px; }
    .rs-effects { flex-direction: column; gap: 3px; }

}

/* .rs-start rendered 86x31 - the smallest interactive target in the HUD
   and well under the §7 floor. Keyed on pointer type rather than width,
   because the thing that decides whether 31px is enough is the size of
   what is doing the pointing, not the size of the screen: a 900px-wide
   tablet needs the bigger target and a 900px-wide browser window does
   not. Mouse layouts keep their proportions. */
@media (pointer: coarse) {
    .rs-start { min-height: var(--touch-target); }
}

/* How many lines are running, stated only when there is more than one — a
   player whose Field Research Post lapsed otherwise has no way to tell why a
   second line stopped being offered. */
.rs-lines {
    margin: 0 0 6px;
    font-size: var(--text-xs);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-accent-bond, #ece7da);
}

/* The way past the wait, under the projects causing it. Copy above, terms
   below — the same shape as the orders panel's offer, and for the same reason:
   side by side, the copy is squeezed into a column a few characters wide. */
.rs-rent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin-top: 10px;
    border-top: 1px solid var(--color-primary-700, #1a2744);
    background: rgba(236, 231, 218, 0.05);
}

.rs-rent-copy {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-secondary, #94a3b8);
}