/* Procedural Horse Genetics - wiki stylesheet.
   One file for the landing page (../index.html) and every wiki page. */

:root {
    --bg:          #0b1120;
    --bg-soft:     #0f172a;
    --panel:       #16213a;
    --panel-2:     #1b2942;
    --border:      #2a3a5a;
    --border-soft: #223050;

    --text:        #f1f5f9;
    --text-dim:    #a8b6cc;
    --text-faint:  #7688a3;

    --accent:      #38bdf8;   /* structural / general */
    --natural:     #4ade80;   /* natural genes */
    --magical:     #c084fc;   /* magical genes */
    --tool:        #34d399;   /* tools */
    --warn:        #fbbf24;   /* open issues */
    --danger:      #fb7185;

    --code-bg:     #0a0f1d;
    --radius:      10px;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: #7dd3fc; }

/* ------------------------------------------------------------------ *
 * Sidebar
 * ------------------------------------------------------------------ */

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 262px;
    background: var(--bg-soft);
    border-right: 1px solid var(--border-soft);
    padding: 1.25rem 0 2rem 0;
    overflow-y: auto;
    z-index: 20;
}

.sidebar .brand {
    display: block;
    padding: 0 1.25rem 0.9rem 1.25rem;
    text-decoration: none;
    color: var(--text);
}
.sidebar .brand strong {
    display: block;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
}
.sidebar .brand span {
    display: block;
    font-size: 0.74rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-top: 0.15rem;
}

.nav-filter {
    margin: 0 1.25rem 1rem 1.25rem;
    width: calc(100% - 2.5rem);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.85rem;
    padding: 0.42rem 0.6rem;
}
.nav-filter:focus { outline: none; border-color: var(--accent); }
.nav-filter::placeholder { color: var(--text-faint); }

.nav-group { margin-bottom: 1.15rem; }

.nav-group > h4 {
    margin: 0 0 0.4rem 0;
    padding: 0 1.25rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 700;
}

.nav-group ul { list-style: none; margin: 0; padding: 0; }

.nav-group a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 1.25rem;
    font-size: 0.885rem;
    color: var(--text-dim);
    text-decoration: none;
    border-left: 2px solid transparent;
}
.nav-group a:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.nav-group a.active {
    color: var(--text);
    font-weight: 600;
    border-left-color: var(--accent);
    background: rgba(56,189,248,0.08);
}
.nav-group a .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--border); flex: none;
}
.nav-group a.k-natural .dot { background: var(--natural); }
.nav-group a.k-magical .dot { background: var(--magical); }
.nav-group a.k-tool    .dot { background: var(--tool); }
.nav-group a.k-core    .dot { background: var(--accent); }

.nav-hidden { display: none !important; }

.nav-toggle {
    display: none;
    position: fixed;
    top: 0.7rem; left: 0.7rem;
    z-index: 40;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 7px;
    padding: 0.4rem 0.65rem;
    font: 600 0.85rem var(--sans);
    cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Content
 * ------------------------------------------------------------------ */

.content {
    margin-left: 262px;
    padding: 3rem 3rem 6rem 3rem;
}

.doc { max-width: 62rem; }

.eyebrow {
    margin: 0 0 0.5rem 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 700;
}
.eyebrow .sep { opacity: 0.45; margin: 0 0.45rem; }
.eyebrow.natural { color: var(--natural); }
.eyebrow.magical { color: var(--magical); }

.doc h1 {
    margin: 0 0 0.6rem 0;
    font-size: 2.2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.lede {
    margin: 0 0 2rem 0;
    font-size: 1.06rem;
    color: var(--text-dim);
    max-width: 46rem;
}

.doc h2 {
    margin: 2.9rem 0 0.9rem 0;
    font-size: 1.32rem;
    letter-spacing: -0.01em;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-soft);
}

.doc h3 {
    margin: 2rem 0 0.6rem 0;
    font-size: 1.06rem;
    color: var(--accent);
}

.doc h4 {
    margin: 1.5rem 0 0.4rem 0;
    font-size: 0.95rem;
    color: var(--text);
}

.doc h5 {
    margin: 1.2rem 0 0.35rem 0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.doc p { margin: 0 0 1rem 0; max-width: 52rem; }
.doc ul, .doc ol { margin: 0 0 1.1rem 0; padding-left: 1.35rem; max-width: 52rem; }
.doc li { margin-bottom: 0.42rem; }
.doc li > ul, .doc li > ol { margin-top: 0.42rem; margin-bottom: 0.2rem; }

.doc strong { color: #fff; font-weight: 650; }
.doc em { color: var(--text-dim); }

.doc code {
    font-family: var(--mono);
    font-size: 0.855em;
    background: rgba(148,163,184,0.13);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.06em 0.34em;
    color: #dbeafe;
    white-space: nowrap;
}

.doc hr {
    border: none;
    border-top: 1px solid var(--border-soft);
    margin: 2.5rem 0;
}

/* ------------------------------------------------------------------ *
 * Tables
 * ------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; margin: 0 0 1.4rem 0; }

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 30rem;
    font-size: 0.88rem;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}
thead th {
    background: var(--panel-2);
    color: var(--text);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,0.02); }
td code, th code { white-space: nowrap; }

/* a two-column "facts" table with no header */
table.facts th {
    background: transparent;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.86rem;
    width: 12rem;
    white-space: normal;
}

/* ------------------------------------------------------------------ *
 * Spec panel (gene pages)
 * ------------------------------------------------------------------ */

.spec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 0 2rem 0;
}
.spec div {
    background: var(--panel);
    padding: 0.75rem 0.9rem;
}
.spec dt {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.spec dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.4;
}

/* allele chips */
.allele {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.08em 0.42em;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    white-space: nowrap;
}
.allele.dom  { border-color: #3f6ea8; color: #bfdbfe; }
.allele.rec  { border-color: #4b5a72; color: var(--text-dim); }
.allele.wild { border-color: #3c4a63; color: var(--text-faint); }

/* ------------------------------------------------------------------ *
 * Callouts
 * ------------------------------------------------------------------ */

.note {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    background: var(--panel);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.4rem 0;
    max-width: 52rem;
    font-size: 0.93rem;
}
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note .label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.35rem;
}
.note.warn { border-left-color: var(--warn); }
.note.warn .label { color: var(--warn); }
.note.danger { border-left-color: var(--danger); }
.note.danger .label { color: var(--danger); }
.note.good { border-left-color: var(--natural); }
.note.good .label { color: var(--natural); }
.note.rule { border-left-color: var(--magical); }
.note.rule .label { color: var(--magical); }

/* ------------------------------------------------------------------ *
 * Code blocks
 * ------------------------------------------------------------------ */

.codebox {
    background: var(--code-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    margin: 0 0 1.5rem 0;
    overflow: hidden;
}
.codebox .filename {
    background: var(--panel);
    border-bottom: 1px solid var(--border-soft);
    padding: 0.5rem 0.9rem;
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--text-faint);
}
.codebox pre {
    margin: 0;
    padding: 0.95rem 1.1rem;
    overflow-x: auto;
    background: transparent;
}
.codebox code {
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.55;
    background: none;
    border: none;
    padding: 0;
    color: #d6deeb;
    white-space: pre;
}

/* Prism token colours, tuned to this palette */
.token.keyword    { color: #7dd3fc; font-weight: 600; }
.token.class-name { color: #5eead4; }
.token.function   { color: #fcd34d; }
.token.string     { color: #fda4af; }
.token.number     { color: #bef264; }
.token.boolean    { color: #bef264; }
.token.comment    { color: #64748b; font-style: italic; }
.token.annotation { color: #c084fc; }
.token.operator, .token.punctuation { color: #94a3b8; background: none; }

/* ------------------------------------------------------------------ *
 * Card grids (landing page + "see also" strips)
 * ------------------------------------------------------------------ */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.9rem;
    margin: 0 0 2rem 0;
}

/* A grid holding two-column cards needs wider columns, or the picture takes
   most of one and the words are left in a gutter. Only the grids that actually
   carry an icon widen; the plain "see also" strips keep their tighter columns.
   Where :has() is not understood the cards simply stay narrow, which is the
   layout this file had before them. */
.cards:has(.card-iconed) {
    /* min(21rem, 100%), not a bare 21rem: auto-fill still lays a track that
       wide on a phone, and the grid then overflows the page rather than
       dropping to one column. */
    grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

a.card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0.95rem 1.05rem;
    text-decoration: none;
    color: var(--text);
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
a.card:hover {
    border-color: var(--accent);
    background: var(--panel-2);
    transform: translateY(-1px);
}
a.card h3 {
    margin: 0;
    font-size: 0.99rem;
    color: var(--accent);
}
a.card p {
    margin: 0;
    font-size: 0.83rem;
    color: var(--text-dim);
    line-height: 1.45;
}
a.card .tag {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-faint);
}
a.card.natural h3 { color: var(--natural); }
a.card.natural:hover { border-color: var(--natural); }
a.card.magical h3 { color: var(--magical); }
a.card.magical:hover { border-color: var(--magical); }
a.card.tool h3 { color: var(--tool); }
a.card.tool:hover { border-color: var(--tool); }

/* ------------------------------------------------------------------ *
 * Landing page
 * ------------------------------------------------------------------ */

body.landing .content { margin-left: 0; padding: 0; }

.hero {
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg, #101c33 0%, var(--bg) 100%);
    padding: 4rem 3rem 3rem 3rem;
}
.hero-inner { max-width: 68rem; margin: 0 auto; }
.hero h1 {
    margin: 0 0 0.7rem 0;
    font-size: 2.6rem;
    letter-spacing: -0.025em;
}
.hero p {
    margin: 0;
    max-width: 44rem;
    color: var(--text-dim);
    font-size: 1.06rem;
}
.hero .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.2rem;
    margin-top: 2rem;
}
.hero .stats div span {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--mono);
}
.hero .stats div small {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.landing-main { max-width: 68rem; margin: 0 auto; padding: 2.75rem 3rem 6rem 3rem; }

.section-head {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin: 2.4rem 0 1rem 0;
}
.section-head:first-child { margin-top: 0; }
.section-head h2 {
    margin: 0;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.section-head p { margin: 0; font-size: 0.86rem; color: var(--text-faint); }

/* Collapsible landing sections - wiki/landing.js turns the head into a button
   and wraps everything after it, up to the next head, in a .section-body. The
   flex layout above lives on the BUTTON once that has happened, so the heading
   and its lede stay on one baseline exactly as they did. */
.section-head.collapsible { display: block; }
/* Explicit rather than left to the UA sheet: everything inside is a grid, and a
   display rule that ever lands on the wrapper would beat the hidden attribute. */
.section-body[hidden] { display: none; }
.section-toggle {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    width: 100%;
    padding: 0.35rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.section-toggle:hover { border-bottom-color: var(--border); }
.section-toggle:focus-visible { outline: 2px solid var(--view-accent); outline-offset: 3px; }
.section-toggle p { flex: 1; }
.section-chevron {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 2px solid var(--text-faint);
    border-bottom: 2px solid var(--text-faint);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.section-head.shut .section-chevron { transform: rotate(-45deg); }
.section-toggle:hover .section-chevron { border-color: var(--view-accent); }
.section-head.shut h2 { color: var(--text-faint); }

/* ------------------------------------------------------------------ *
 * The paint order (wiki/paint-order/) - one long vertical stack
 * ------------------------------------------------------------------ */

.paint-order { margin: 0 0 2rem 0; }

.po-boot {
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    color: var(--text-faint);
    font-size: 0.9rem;
    max-width: 52rem;
}
.po-failed { border-color: var(--warn); color: var(--text-dim); }

.po-count { color: var(--text-faint); font-size: 0.88rem; margin: 0 0 1rem 0; max-width: 52rem; }

/* The stack is deliberately ONE column and deliberately long. A grid would fit
   more on a screen and would stop being a picture of a stack, which is the only
   thing this page is for. */
.po-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 40rem;
    border-left: 2px solid var(--border-soft);
}

.po-row { margin: 0; padding: 0; }
.po-row > a,
.po-row > .po-nolink {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--border-soft);
    color: inherit;
    text-decoration: none;
}
.po-row > a:hover { background: var(--panel); }
.po-row.natural > a:hover { border-bottom-color: var(--natural); }
.po-row.magical > a:hover { border-bottom-color: var(--magical); }

.po-shot {
    flex: none;
    width: 96px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.po-shot img { display: block; width: 96px; height: auto; }
.po-noshot {
    font-size: 0.7rem;
    color: var(--text-faint);
    border: 1px dashed var(--border-soft);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
}

.po-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.po-name { font-weight: 600; font-size: 0.95rem; }
.po-row.natural .po-name { color: var(--natural); }
.po-row.magical .po-name { color: var(--magical); }
.po-meta { font-size: 0.78rem; color: var(--text-faint); }
.po-meta code { background: none; padding: 0; color: var(--text-dim); }

/* Where phase 3 ends and phase 1 begins - the one real seam in the list. */
.po-divider {
    margin: 1.2rem 0 0.5rem -2px;
    padding: 0.3rem 0.7rem;
    border-left: 2px solid var(--magical);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}
.po-divider.natural { border-left-color: var(--natural); }

/* ------------------------------------------------------------------ *
 * Footer / page nav
 * ------------------------------------------------------------------ */

.page-foot {
    margin-top: 4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border-soft);
    font-size: 0.84rem;
    color: var(--text-faint);
    max-width: 52rem;
}
.page-foot a { text-decoration: none; }
.page-foot a:hover { text-decoration: underline; }

.seealso {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem 0;
}
.seealso a {
    font-size: 0.83rem;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 999px;
    padding: 0.22rem 0.72rem;
    color: var(--text-dim);
}
.seealso a:hover { border-color: var(--accent); color: var(--text); }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .sidebar { transform: translateX(-100%); transition: transform .18s ease; }
    body.nav-open .sidebar { transform: none; }
    .content { margin-left: 0; padding: 3.6rem 1.25rem 4rem 1.25rem; }
    .hero { padding: 3.5rem 1.25rem 2.5rem 1.25rem; }
    .landing-main { padding: 2rem 1.25rem 4rem 1.25rem; }
    .doc h1 { font-size: 1.8rem; }
    .hero h1 { font-size: 2rem; }
}

/* Verdict cells - wiki/compatibility.html. Colour-coded, but the words carry
   the meaning on their own so colour-blindness and print both stay readable. */
td.ok   { color: var(--natural); font-weight: 600; }
td.warn { color: var(--warn);    font-weight: 600; }
td.bad  { color: var(--danger);  font-weight: 600; }

/* ------------------------------------------------------------------ *
 * Gameplay / Coding / Science tabs
 *
 * Three audiences for one subject. The tab bar is deliberately loud - a
 * reader who lands on a gene page from a search result has to be able to
 * see at a glance that there are two more pages behind this one.
 *
 * Every view retints the whole page through --view-accent and --bg, so
 * which tab you are on is legible from the background alone, the way the
 * index's view switcher is. wiki/tabs.js sets data-view on <html>.
 * ------------------------------------------------------------------ */

:root {
    --view-accent: var(--accent);
    --view-soft:   rgba(56, 189, 248, 0.10);
    --view-edge:   rgba(56, 189, 248, 0.40);
}

html[data-view="gameplay"] {
    --view-accent: #38bdf8;
    --view-soft:   rgba(56, 189, 248, 0.10);
    --view-edge:   rgba(56, 189, 248, 0.40);
    --bg:          #0b1120;
    --bg-soft:     #0f172a;
}
html[data-view="coding"] {
    --view-accent: #c084fc;
    --view-soft:   rgba(192, 132, 252, 0.10);
    --view-edge:   rgba(192, 132, 252, 0.40);
    --bg:          #110c1e;
    --bg-soft:     #171029;
}
html[data-view="science"] {
    --view-accent: #4ade80;
    --view-soft:   rgba(74, 222, 128, 0.10);
    --view-edge:   rgba(74, 222, 128, 0.40);
    --bg:          #081711;
    --bg-soft:     #0c1f18;
}

.tab-bar {
    display: flex;
    /* A page may carry topical tabs of its own rather than the three views -
       making-a-gene.html has eight - and eight buttons overflow a narrow
       column. Wrapping never triggers on a three-tab bar at any width. */
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.9rem 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.tab-btn {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    color: var(--text-faint);
    font-family: var(--sans);
    text-align: left;
    padding: 0.55rem 1.05rem 0.6rem 1.05rem;
    cursor: pointer;
    position: relative;
    top: 1px;
    transition: color .12s ease, background .12s ease;
}
.tab-btn:hover { color: var(--text-dim); background: rgba(255,255,255,0.03); }

.tab-btn .tab-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.tab-btn .tab-hint {
    display: block;
    font-size: 0.71rem;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    margin-top: 0.06rem;
}

/* The active tab is the only one that carries its own colour, so the bar
   reads as "you are here" rather than as three coloured buttons. */
.tab-btn.active {
    color: var(--text);
    background: var(--bg-soft);
    border-color: var(--border);
    border-bottom: 1px solid var(--bg-soft);
}
.tab-btn.active .tab-hint { color: var(--text-dim); }
.tab-btn.active::before {
    content: "";
    position: absolute;
    left: -1px; right: -1px; top: -1px;
    height: 3px;
    border-radius: 9px 9px 0 0;
}
.tab-btn.tab-gameplay.active::before { background: #38bdf8; }
.tab-btn.tab-coding.active::before   { background: #c084fc; }
.tab-btn.tab-science.active::before  { background: #4ade80; }

.tab-btn:focus-visible { outline: 2px solid var(--view-accent); outline-offset: 2px; }

/* Links and rules inside a panel follow the view's colour. */
.tab-panel a { color: var(--view-accent); }
.tab-panel a:hover { filter: brightness(1.22); }
.tab-panel .seealso a:hover { border-color: var(--view-accent); }
.doc h2 { border-bottom-color: var(--border-soft); }

@media (max-width: 900px) {
    .tab-bar { gap: 0.15rem; }
    .tab-btn { padding: 0.5rem 0.7rem; }
    .tab-btn .tab-hint { display: none; }
}

/* ------------------------------------------------------------------ *
 * Gameplay-tab furniture
 *
 * The gameplay tab is written for a player who does not want the model,
 * so it gets a small vocabulary of its own: a plain-language summary, a
 * "what you can get" list, and a health line that is a sentence rather
 * than a trait contribution.
 * ------------------------------------------------------------------ */

.plain {
    font-size: 1.05rem;
    line-height: 1.68;
    color: var(--text);
    background: var(--view-soft);
    border-left: 3px solid var(--view-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.15rem;
    margin: 0 0 1.6rem 0;
    max-width: 52rem;
}
.plain > :first-child { margin-top: 0; }
.plain > :last-child { margin-bottom: 0; }

/* "What you can get" - the plain outcome list that stands in for an
   inheritance grid on a gene with too many alleles to draw one. */
.outcomes { list-style: none; margin: 0 0 1.5rem 0; padding: 0; max-width: 52rem; }
.outcomes li {
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    padding: 0.5rem 0.2rem;
    border-bottom: 1px solid var(--border-soft);
    margin: 0;
}
.outcomes li:last-child { border-bottom: none; }
.outcomes .what {
    flex: 0 0 12rem;
    font-weight: 650;
    color: #fff;
}
.outcomes .looks { color: var(--text-dim); }

@media (max-width: 620px) {
    .outcomes li { display: block; }
    .outcomes .what { margin-bottom: 0.15rem; }
}

/* A health statement a player can act on. Never a percentage without the
   thing it is a percentage of. */
.health-line {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 0 0 1.5rem 0;
    max-width: 52rem;
}
.health-line .icon { font-size: 1.1rem; line-height: 1.4; }
.health-line.none  { border-color: var(--border-soft); color: var(--text-dim); }
.health-line.hurts { border-left: 3px solid var(--warn); }
.health-line.fatal { border-left: 3px solid var(--danger); }
.health-line p { margin: 0; max-width: none; }

/* ------------------------------------------------------------------ *
 * Inheritance table (wiki/gene-inheritance/) - gameplay tab
 * ------------------------------------------------------------------ */

.gene-inheritance { margin: 0 0 1.6rem 0; }

.gi-boot {
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    color: var(--text-faint);
    font-size: 0.9rem;
    max-width: 52rem;
}
.gi-failed { border-color: var(--warn); color: var(--text-dim); }

/* The two parent pickers. A <select> rather than a row of buttons: a locus can
   have a dozen genotypes, and the point of the control is to find yours. */
.gi-parents {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 0 0 0.9rem 0;
}
.gi-parent { display: flex; flex-direction: column; gap: 0.2rem; }
.gi-parent > span {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}
.gi-pick {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    padding: 0.35rem 0.5rem;
    max-width: 22rem;
}
.gi-pick:focus-visible { outline: 2px solid var(--view-accent); outline-offset: 2px; }

table.gi-grid { border-collapse: separate; border-spacing: 4px; width: auto; }
table.gi-grid th {
    background: none;
    color: var(--text-faint);
    text-align: center;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border: none;
}
table.gi-grid th code { color: var(--view-accent); background: none; padding: 0; }
table.gi-grid td {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    text-align: center;
    vertical-align: middle;
    min-width: 8.5rem;
}
/* One hue per distinct phenotype, handed in as --gi-hue by the widget; the
   tint and its border are derived from that one number so a new outcome needs
   no new rule. Grey is not a hue - it is what a foal this gene does not show
   on looks like, and it must not read as one more colour. */
table.gi-grid td.gi-shows {
    background: hsl(var(--gi-hue) 55% 22%);
    border-color: hsl(var(--gi-hue) 60% 42%);
}
table.gi-grid td.gi-wild { background: var(--bg-soft); border-color: var(--border-soft); }
table.gi-grid td.gi-none { background: none; border: none; color: var(--text-faint); min-width: 0; }

.gi-geno {
    display: block;
    background: none;
    padding: 0;
    font-size: 0.86rem;
    color: var(--text-dim);
}
.gi-pheno {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
}
.gi-pheno em {
    font-style: normal;
    font-weight: 500;
    font-size: 0.76rem;
    color: var(--text-faint);
}
td.gi-wild .gi-pheno { color: var(--text-dim); font-weight: 500; }

/* The tally under the square: the same colours, and what each is worth. */
.gi-tally { list-style: none; margin: 0.8rem 0 0 0; padding: 0; display: grid; gap: 0.3rem; max-width: 32rem; }
.gi-tally li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; }
.gi-swatch {
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
}
.gi-tally li.gi-shows .gi-swatch {
    background: hsl(var(--gi-hue) 55% 32%);
    border-color: hsl(var(--gi-hue) 60% 48%);
}
.gi-tally-name { flex: 1; }
.gi-tally li.gi-wild .gi-tally-name { color: var(--text-dim); }
.gi-tally-odds { color: var(--text-faint); font-size: 0.82rem; white-space: nowrap; }

.gi-key { font-size: 0.83rem; color: var(--text-faint); margin: 0.6rem 0 0 0; max-width: 52rem; }
.gi-combos { color: var(--text-faint); font-family: var(--mono); font-size: 0.8rem; }

/* ------------------------------------------------------------------ *
 * Search overlay (wiki/search.js)
 * ------------------------------------------------------------------ */

body.search-open { overflow: hidden; }

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 6vh 1.25rem 2rem 1.25rem;
}

.search-panel {
    width: min(46rem, 100%);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55);
    overflow: hidden;
}

.search-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--border-soft);
}

.search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 1.08rem;
    padding: 0.4rem 0.45rem;
}
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--text-faint); }
.search-input::-webkit-search-cancel-button { filter: invert(0.6); }

.search-close {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-faint);
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}
.search-close:hover { color: var(--text); border-color: var(--view-accent); }

.search-results { overflow-y: auto; padding: 0.55rem 0.4rem 0.9rem 0.4rem; }

.sr-empty, .sr-count {
    margin: 0;
    padding: 0.75rem 0.95rem;
    color: var(--text-faint);
    font-size: 0.85rem;
}
.sr-count { padding-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; }

.sr-page { padding: 0.15rem 0.4rem 0.5rem 0.4rem; }

.sr-title {
    display: block;
    padding: 0.3rem 0.55rem 0.1rem 0.55rem;
    font-weight: 650;
    font-size: 0.98rem;
    color: var(--text);
    text-decoration: none;
}
.sr-title:hover { color: var(--view-accent); }

.sr-hit {
    display: block;
    padding: 0.42rem 0.55rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dim);
    border-left: 2px solid transparent;
}
.sr-hit:hover { background: rgba(255,255,255,0.035); border-left-color: var(--view-accent); }

.sr-tab {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.45rem;
    vertical-align: 1px;
}
.sr-gameplay { background: rgba(56,189,248,0.16);  color: #7dd3fc; }
.sr-coding   { background: rgba(192,132,252,0.16); color: #d8b4fe; }
.sr-science  { background: rgba(74,222,128,0.16);  color: #86efac; }

.sr-head { font-weight: 600; color: var(--text); font-size: 0.87rem; }
.sr-snip { display: block; font-size: 0.83rem; line-height: 1.5; margin-top: 0.15rem; }
.sr-snip mark {
    background: rgba(251, 191, 36, 0.22);
    color: #fde68a;
    border-radius: 2px;
    padding: 0 1px;
}

/* The sidebar's search launcher, which replaces the old name-only filter. */
.nav-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 1.25rem 1rem 1.25rem;
    width: calc(100% - 2.5rem);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-faint);
    font-family: var(--sans);
    font-size: 0.85rem;
    padding: 0.42rem 0.6rem;
    cursor: pointer;
    text-align: left;
}
.nav-search:hover { border-color: var(--view-accent); color: var(--text-dim); }
.nav-search kbd {
    font-family: var(--mono);
    font-size: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.02rem 0.3rem;
    color: var(--text-faint);
}

@media (max-width: 900px) {
    .search-overlay { padding: 3vh 0.6rem 1rem 0.6rem; }
}

/* ------------------------------------------------------------------ *
 * Landing-page view switcher (wiki/index-views.js)
 *
 * Three ways to read the same wiki. Choosing one repaints the page and
 * drops every page that has nothing to say to that reader, so the
 * gameplay view is a short shelf of things you can do in game rather
 * than the full engineering index.
 * ------------------------------------------------------------------ */

:root { --hero-top: #101c33; }
html[data-view="gameplay"] { --hero-top: #101c33; }
html[data-view="coding"]   { --hero-top: #1d1436; }
html[data-view="science"]  { --hero-top: #0d2b1d; }

.hero { background: linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%); }
.hero .stats div span { color: var(--view-accent); }

body.landing a.card:hover  { border-color: var(--view-accent); }
body.landing a.card h3     { color: var(--view-accent); }
/* The kind colours still win - a magical gene reads magical in every view. */
body.landing a.card.natural h3 { color: var(--natural); }
body.landing a.card.magical h3 { color: var(--magical); }
body.landing a.card.tool h3    { color: var(--tool); }

.view-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem 0 0 0;
}

.view-switch button {
    appearance: none;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-family: var(--sans);
    font-size: 0.88rem;
    padding: 0.42rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.view-switch button:hover { color: var(--text); }
.view-switch button small {
    font-size: 0.72rem;
    color: var(--text-faint);
}
.view-switch button .swatch {
    width: 9px; height: 9px;
    border-radius: 50%;
    align-self: center;
}
.view-switch button[data-view="gameplay"] .swatch { background: #38bdf8; }
.view-switch button[data-view="coding"]   .swatch { background: #c084fc; }
.view-switch button[data-view="science"]  .swatch { background: #4ade80; }

.view-switch button.active {
    color: #fff;
    border-color: var(--view-accent);
    background: var(--view-soft);
}
.view-switch button.active small { color: var(--text-dim); }

.view-note {
    margin: 0.85rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-faint);
    max-width: 44rem;
}

.landing-search {
    margin-top: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-faint);
    font-family: var(--sans);
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}
.landing-search:hover { border-color: var(--view-accent); color: var(--text-dim); }
.landing-search kbd {
    font-family: var(--mono);
    font-size: 0.72rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.02rem 0.32rem;
}

.view-hidden { display: none !important; }

/* A landing-page card carrying a real bake of the gene on a bay: two columns,
   the horse on the left and every word of the card on the right. The image is
   decorative - the card says the same thing in words - so it carries an empty
   alt.

   The text needs its own .card-text box rather than sitting loose in the grid:
   a card has three children of its own (heading, paragraph, tag) and they have
   to stack as one column beside the picture, not spread down three grid rows
   the tall image would then have to span. */
a.card.card-iconed {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: start;
}
.card-iconed .card-icon {
    display: block;
    width: 96px;
    height: auto;
    margin: 0;
    image-rendering: pixelated;
    border-radius: 6px;
}
/* Not scoped to .card-iconed: a gene that changes no pixel of the coat has no
   icon, and its card is this box on its own. It still has to space its own
   heading, paragraph and tag, because the card's gap now sits between the
   picture and the words rather than between the words. */
a.card .card-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

@media (max-width: 560px) {
    a.card.card-iconed { grid-template-columns: 72px minmax(0, 1fr); }
    .card-iconed .card-icon { width: 72px; }
}

/* ---- timeline-of-genes.html ------------------------------------------------
   A rail down the left, a dot per day, and each batch's genes as a grid of
   small icon tiles. The tile's left edge is the natural / magical colour. */
.timeline { margin-top: 1.5rem; }
.tl-summary { color: var(--text-dim); margin: 0 0 1.25rem; }
.tl-day {
    position: relative;
    border-left: 2px solid var(--border);
    margin-left: 0.4rem;
    padding: 0 0 1.5rem 1.4rem;
}
.tl-day h2.tl-date {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    border: 0;
    padding: 0;
}
.tl-day h2.tl-date::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 0.3rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--view-accent);
    box-shadow: 0 0 0 3px var(--bg);
}
.tl-count { color: var(--text-faint); font-size: 0.85rem; font-weight: normal; margin-left: 0.4rem; }
.tl-batch { margin: 0 0 1rem; }
.tl-batch-title { margin: 0 0 0.5rem; color: var(--text-dim); font-size: 0.9rem; }
.tl-batch-title code { color: var(--text-faint); }
.tl-genes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
    gap: 0.5rem;
}
.tl-genes li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.35rem 0.5rem;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--magical);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.2;
    height: 100%;
    box-sizing: border-box;
}
.tl-genes li.tl-natural a { border-left-color: var(--natural); }
.tl-genes li a:hover { border-color: var(--view-edge); background: var(--view-soft); }
.tl-genes img { width: 72px; height: auto; image-rendering: pixelated; border-radius: 4px; }
.tl-noicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 64px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-faint);
}