/* ======================================================================
   ArkBreeder — "Genetics Console" design system
   slate base · teal = WILD · indigo = DOMESTIC
   ====================================================================== */

:root {
    --bg:        #0a0f1a;
    --bg-2:      #0f172a;
    --panel:     #121a2c;
    --panel-2:   #16203500;
    --line:      #22304a;
    --line-soft: #1b2740;
    --ink:       #e6edf7;
    --ink-dim:   #9fb0c8;
    --ink-faint: #64748b;

    --teal:      #2dd4bf;   /* wild */
    --teal-deep: #0e7c70;
    --indigo:    #818cf8;   /* domestic */
    --indigo-deep:#4f46e5;
    --amber:     #fbbf24;
    --rose:      #fb7185;
    --green:     #34d399;

    --radius:    14px;
    --radius-sm: 9px;
    --shadow:    0 18px 40px -22px rgba(0,0,0,.85);
    --glow-teal: 0 0 0 1px rgba(45,212,191,.25), 0 10px 40px -12px rgba(45,212,191,.18);

    --font-display: 'Sora', system-ui, sans-serif;
    --font-body:    'Spline Sans', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* atmospheric background: gradient mesh + faint grid */
body {
    min-height: 100vh;
    background:
        radial-gradient(820px 520px at 12% -8%, rgba(45,212,191,.10), transparent 60%),
        radial-gradient(760px 600px at 100% 0%, rgba(99,102,241,.12), transparent 55%),
        radial-gradient(900px 700px at 70% 120%, rgba(79,70,229,.08), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 85%);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
h1:focus { outline: 2px solid rgba(45,212,191,.3); outline-offset: 8px; border-radius: 4px; } /* FocusOnNavigate lands here */
h1 { font-size: 1.85rem; margin: 0 0 .35rem; }
h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: #67e8d9; }
code { font-family: var(--font-mono); font-size: .85em; color: var(--teal); background: rgba(45,212,191,.08);
       padding: 1px 6px; border-radius: 5px; }
.mono { font-family: var(--font-mono); }

/* ---------------- App shell ---------------- */
.shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.sidebar {
    width: 244px;
    flex: 0 0 244px;
    background: linear-gradient(180deg, rgba(18,26,44,.92), rgba(10,15,26,.92));
    border-right: 1px solid var(--line);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.25rem 1.25rem 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}
.brand .mark {
    width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--teal), var(--indigo-deep));
    box-shadow: var(--glow-teal);
    color: #04121a; font-weight: 800; font-family: var(--font-display);
}
.brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; }
.brand .name b { color: var(--teal); }
.brand .tag { display:block; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1px; }

.nav { padding: .8rem .7rem; display: flex; flex-direction: column; gap: 2px; }
.nav .label { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
              padding: .9rem .7rem .35rem; }
.nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem; border-radius: 10px;
    color: var(--ink-dim); font-weight: 500; font-size: .92rem;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.nav a:hover { background: rgba(45,212,191,.06); color: var(--ink); }
.nav a.active {
    background: linear-gradient(90deg, rgba(45,212,191,.16), rgba(45,212,191,.02));
    color: #fff; border-color: rgba(45,212,191,.25);
}
.nav a.active svg { color: var(--teal); }
.nav a svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ink-faint); }

.side-foot { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--line-soft);
             font-size: .72rem; color: var(--ink-faint); font-family: var(--font-mono); }
.side-foot .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--green);
                  margin-right:6px; box-shadow:0 0 8px var(--green); }

.user-menu { position: relative; margin-top: .55rem; }
.user-menu > summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem;
    color: var(--ink-dim); font-family: var(--font-mono); font-size: .78rem; transition: color .15s;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary::after { content: "▾"; color: var(--teal); font-size: .68rem; transition: transform .15s; }
.user-menu:hover > summary { color: var(--ink); }
.user-menu[open] > summary::after { transform: rotate(180deg); }
.user-menu-panel {
    position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 150px;
    background: linear-gradient(180deg, rgba(22,32,53,.97), rgba(15,23,42,.97));
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: .35rem; display: flex; flex-direction: column; gap: 2px;
    z-index: 20;
}
.user-menu-panel a, .user-menu-panel form { display: block; margin: 0; }
.user-menu-panel a, .user-menu-panel button {
    width: 100%; text-align: left; background: none; border: none; border-radius: 8px;
    padding: .5rem .6rem; color: var(--ink-dim); font-size: .82rem;
    font-family: var(--font-body); font-weight: 500; cursor: pointer;
}
.user-menu-panel a:hover { background: rgba(45,212,191,.08); color: var(--ink); }
.user-menu-panel button:hover { background: rgba(251,113,133,.1); color: var(--rose); }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    height: 56px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.8rem; border-bottom: 1px solid var(--line-soft);
    background: rgba(10,15,26,.55); backdrop-filter: blur(6px);
    position: sticky; top: 0; z-index: 5;
}
.topbar .crumb { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-faint); }
.topbar .crumb b { color: var(--ink-dim); font-weight: 500; }
.content { padding: 1.8rem; max-width: 1320px; width: 100%; margin-inline: auto; animation: rise .5s ease both; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------- Cards / panels ---------------- */
.card {
    background: linear-gradient(180deg, rgba(22,32,53,.85), rgba(15,23,42,.85));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    margin: 0 0 1.2rem;
    box-shadow: var(--shadow);
    position: relative;
}
.card > summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; list-style: none; }
.card > summary::-webkit-details-marker { display: none; }
.card > summary::before { content: "▸"; color: var(--teal); margin-right: .5rem; display:inline-block; transition: transform .2s; }
details[open].card > summary::before { transform: rotate(90deg); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 1rem; }
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }

label { display: flex; flex-direction: column; gap: .4rem; font-size: .78rem; color: var(--ink-dim);
        font-weight: 500; letter-spacing: .01em; }

input, select, textarea {
    background: var(--bg-2);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .55rem .7rem;
    font-size: .95rem;
    font-family: var(--font-body);
    transition: border-color .15s, box-shadow .15s;
}
input[type=number] { font-family: var(--font-mono); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(45,212,191,.15);
}
textarea { width: 100%; font-family: var(--font-mono); font-size: .85rem; resize: vertical; }

/* ---------------- Buttons ---------------- */
button, .btn {
    font-family: var(--font-display); font-weight: 600; font-size: .9rem;
    background: rgba(148,163,184,.08); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .55rem 1.05rem; cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s;
}
button:hover:not(:disabled) { background: rgba(148,163,184,.16); border-color: #33425f; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
    background: linear-gradient(145deg, var(--teal), var(--teal-deep));
    color: #04121a; border-color: transparent;
    box-shadow: 0 8px 22px -10px rgba(45,212,191,.7);
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); }

/* ---------------- Tables ---------------- */
table.stats { border-collapse: collapse; width: 100%; }
table.stats th { text-align: left; padding: .55rem .7rem; font-size: .68rem; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line); font-weight: 600; }
table.stats td { padding: .55rem .7rem; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
table.stats tr:hover td { background: rgba(45,212,191,.035); }
/* A wild-stat-target row for a stat the objective doesn't target: shown for completeness, muted. */
table.stats tr.sb-stat-off td { color: var(--ink-faint); }
table.stats td:nth-child(n+2) { font-family: var(--font-mono); }

/* ---------------- Stat result rows ---------------- */
.stat-result { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
.stat-result:last-child { border-bottom: 0; }
.stat-name { display: inline-block; min-width: 140px; font-weight: 600; font-family: var(--font-display); font-size: .9rem; }
.save-row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: 1.1rem;
            padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }

/* ---------------- Helpers / badges ---------------- */
.muted { color: var(--ink-faint); font-size: .85rem; }
.warn  { color: var(--rose); }
.ok    { color: var(--green); }
.pill {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-mono); font-size: .72rem;
    padding: .15rem .55rem; border-radius: 999px;
    border: 1px solid var(--line); color: var(--ink-dim); background: rgba(148,163,184,.06);
}
.pill.teal   { color: var(--teal);   border-color: rgba(45,212,191,.35); background: rgba(45,212,191,.08); }
.pill.indigo { color: var(--indigo); border-color: rgba(129,140,248,.35); background: rgba(129,140,248,.08); }
.pill.ok     { color: var(--green);  border-color: rgba(52,211,153,.35);  background: rgba(52,211,153,.08); }
.pill.warn   { color: var(--rose);   border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.08); }

/* --- Dossier block -------------------------------------------------- */
.eyebrow {
    display: inline-block;
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--teal); margin: 0 0 .8rem;
}
.dossier-card { text-align: center; }
.dossier-frame {
    max-width: 640px; margin: 0 auto;
    border: 1px solid var(--line); border-radius: var(--radius);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(45,212,191,.06), transparent 60%),
        var(--bg);
    padding: 1rem; box-shadow: inset 0 0 60px -30px rgba(45,212,191,.4);
}
.dossier-img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }

/* --- Abilities panel ------------------------------------------------ */
.ability-list { display: flex; flex-direction: column; gap: .55rem; margin-top: .4rem; }
.ability-row {
    padding: .6rem .75rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
    background: rgba(148,163,184,.04);
}
.ability-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ability-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.ability-desc { margin: .35rem 0 0; }
.hotkey-badge {
    flex: 0 0 auto;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
    color: var(--indigo); background: rgba(129,140,248,.08);
    border: 1px solid rgba(129,140,248,.35); border-bottom-width: 2px;
    border-radius: 6px; padding: .18rem .5rem; white-space: nowrap;
}

.legend { display: flex; gap: 1.1rem; font-size: .76rem; color: var(--ink-dim); margin: .2rem 0 .8rem; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.swatch-wild { background: var(--teal); }
.swatch-mut  { background: var(--rose); }
.swatch-dom  { background: var(--indigo); }

.view-link { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--teal); }

/* hero */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
        margin-bottom: 1.4rem; }
.hero .lead { font-size: 1.02rem; color: var(--ink-dim); max-width: 46ch; }
.kpis { display: flex; gap: .8rem; flex-wrap: wrap; }
.kpi { background: linear-gradient(180deg, rgba(22,32,53,.9), rgba(15,23,42,.9)); border: 1px solid var(--line);
       border-radius: var(--radius); padding: .85rem 1.1rem; min-width: 120px; }
.kpi .num { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; color: var(--teal); line-height: 1; }
.kpi .lab { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: .35rem; }
.kpi.indigo .num { color: var(--indigo); }

.steps { counter-reset: s; list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .7rem; }
.steps li { counter-increment: s; display: flex; gap: .8rem; align-items: flex-start; color: var(--ink-dim); }
.steps li::before { content: counter(s); flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center; font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
    color: var(--teal); background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.3); }

/* ---------------- Trap builder (3D) ---------------- */
.tb-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .tb-layout { grid-template-columns: 1fr; } }
.tb-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: #0a0f1a; box-shadow: var(--shadow); }
.tb-canvas { display: block; width: 100%; height: 66vh; min-height: 460px; touch-action: none; cursor: crosshair; }
.tb-hint { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-mono);
    font-size: .72rem; color: var(--ink-faint); background: rgba(10,15,26,.6);
    padding: .3rem .6rem; border-radius: 7px; pointer-events: none; }
.tb-side { display: flex; flex-direction: column; }
.tb-palette { display: flex; flex-wrap: wrap; gap: .4rem; }
.tb-piece { display: flex; align-items: center; gap: .4rem; padding: .4rem .7rem; font-size: .82rem; }
.tb-piece.active { border-color: var(--teal); background: rgba(45,212,191,.14); color: #fff; }
.tb-piece { font-size: .78rem; padding: .35rem .55rem; }
.tb-sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.4); display: inline-block; }
.tb-group-label { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-faint); margin: .7rem 0 .3rem; }
.tb-group-label:first-child { margin-top: 0; }
.btn-sm.tb-del { background: linear-gradient(145deg, var(--rose), #b91c4b); color: #fff; border-color: transparent; }

/* ---------------- Creature detail: main + portrait rail ---------------- */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.2rem;
    align-items: start;
}
.detail-main { min-width: 0; }
.detail-main > .card:last-child { margin-bottom: 0; }
.detail-rail { position: sticky; top: 72px; display: flex; flex-direction: column; }
.portrait-card { text-align: center; }
.portrait-card .portrait {
    display: grid; place-items: center;
    background: radial-gradient(120% 100% at 50% 0%, rgba(45,212,191,.10), transparent 65%),
                rgba(10,15,26,.5);
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    padding: 1rem; margin-bottom: .8rem;
}
.portrait-card h2 { text-align: left; }
@media (max-width: 900px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-rail { position: static; }
}

/* ---------------- Global drag-and-drop import ---------------- */
.drop-overlay {
    position: fixed; inset: 0; z-index: 80;
    display: none; place-items: center;
    background: rgba(4,8,16,.72); backdrop-filter: blur(3px);
    pointer-events: none;
}
body.dropping .drop-overlay { display: grid; }
.drop-inner {
    text-align: center; padding: 3rem 3.6rem;
    border: 2px dashed var(--teal); border-radius: 22px;
    background: radial-gradient(420px 240px at 50% 0%, rgba(45,212,191,.12), transparent 70%),
                rgba(15,23,42,.9);
    box-shadow: 0 0 80px -20px rgba(45,212,191,.5);
}
.drop-inner .glyph { font-size: 2.4rem; margin-bottom: .6rem; }
.drop-inner h3 { margin: 0 0 .4rem; font-size: 1.25rem; }
.drop-inner p { margin: 0; color: var(--ink-dim); max-width: 40ch; }

/* webhook walkthrough modal steps */
.wh-step { display: flex; gap: .75rem; align-items: flex-start; margin: .55rem 0; line-height: 1.45; }
.wh-no {
    flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 50%;
    background: rgba(45,212,191,.14); color: var(--teal);
    display: grid; place-items: center; font-weight: 600; font-size: .82rem;
}

.ark-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
    z-index: 90; opacity: 0; transition: opacity .3s, transform .3s;
    font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    color: var(--ink); background: linear-gradient(180deg, rgba(22,32,53,.97), rgba(15,23,42,.97));
    border: 1px solid rgba(45,212,191,.4); border-radius: 12px;
    padding: .75rem 1.3rem; box-shadow: 0 14px 44px -12px rgba(0,0,0,.9), 0 0 30px -12px rgba(45,212,191,.5);
}
.ark-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ark-toast.warn { border-color: rgba(251,113,133,.45); }

/* ---------------- Game switch (topbar) ---------------- */
.game-switch {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(148,163,184,.07);
    border: 1px solid var(--line); border-radius: 999px;
}
.game-switch button {
    padding: .22rem .8rem; font-size: .74rem; font-family: var(--font-mono);
    background: transparent; border: 0; border-radius: 999px; color: var(--ink-faint);
}
.game-switch button.on {
    background: linear-gradient(145deg, var(--teal), var(--teal-deep));
    color: #04121a; font-weight: 700;
}

/* ---------------- Auth screens ---------------- */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
              position: relative; z-index: 1; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card form { display: flex; flex-direction: column; gap: .9rem; margin-top: .6rem; }
.auth-card form button { margin-top: .3rem; }

/* ---------------- Layout utilities ---------------- */
.duo { display: grid; gap: 0 1.4rem; }
.duo > * { min-width: 0; }
@media (min-width: 1280px) { .duo { grid-template-columns: 1fr 1fr; align-items: start; } }
.details-body { margin-top: .9rem; }
.save-row.bare { margin: 0 0 .9rem; padding: 0; border: 0; }
.pill-line { display: flex; flex-wrap: wrap; gap: .35rem .45rem; align-items: center; margin: .3rem 0; }
p.note { margin: .5rem 0 0; }
.sex-f { color: var(--teal); }
.sex-m { color: var(--indigo); }
.btn-sm { padding: .2rem .6rem; font-size: .76rem; }
label.inline { flex-direction: row; align-items: center; gap: .4rem; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* Stat Extractor top card: pin every field's input to one shared bottom baseline so a hint
   wrapping to two lines pushes its LABEL up instead of its input down. */
.xt-top label { justify-content: flex-end; }
.xt-top label.inline { justify-content: flex-start; }
/* Stat Extractor Tek-scope grid: stat name + Wild/Domestic/Mutated triplet per row,
   column headers labelled once. */
.xt-tek { display: grid; grid-template-columns: minmax(110px, max-content) repeat(3, minmax(72px, 130px));
          gap: .45rem .6rem; align-items: center; }
.xt-tek .xt-tek-col { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
                      color: var(--ink-faint); }
.xt-tek .stat-name { font-size: .78rem; color: var(--ink-dim); font-weight: 500; }
details.sub > summary { cursor: pointer; font-family: var(--font-display); font-weight: 600;
    font-size: 1.02rem; list-style: none; margin: 1.1rem 0 .4rem; }
details.sub > summary::-webkit-details-marker { display: none; }
details.sub > summary::before { content: "▸"; color: var(--teal); margin-right: .5rem;
    display: inline-block; transition: transform .2s; }
details.sub[open] > summary::before { transform: rotate(90deg); }

/* ---------------- Breeding cockpit ---------------- */
.cockpit { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 980px) { .cockpit { grid-template-columns: 1fr; } }
@media (min-width: 981px) {
    .pair-rail { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; }
}

/* plan-step banner (arriving from /plan/{id}) */
.plan-banner { border-color: var(--teal); padding: .6rem 1rem; display: flex;
               gap: .8rem; align-items: center; flex-wrap: wrap; }
.plan-banner .hint { font-size: .8rem; }

.pair-rail { padding: 1rem 1rem 1.1rem; }
.pair-rail h2 { margin-bottom: .6rem; }
.pair-row {
    display: flex; align-items: center; justify-content: space-between; gap: .55rem;
    width: 100%; text-align: left; margin-bottom: 5px;
    background: rgba(148,163,184,.05); border: 1px solid var(--line-soft);
    font-family: var(--font-body); font-weight: 500; font-size: .85rem;
    padding: .5rem .65rem;
}
.pair-row .names { flex: 1 1 auto; min-width: 0; white-space: nowrap;
                   overflow: hidden; text-overflow: ellipsis; }
.pair-row .pill { flex: 0 0 auto; }
.pair-row .names b { color: var(--ink-faint); font-weight: 400; padding: 0 .15rem; }
.pair-row:hover:not(:disabled) { border-color: rgba(45,212,191,.35); background: rgba(45,212,191,.06); }
.pair-row.sel {
    border-color: rgba(45,212,191,.5);
    background: linear-gradient(90deg, rgba(45,212,191,.14), rgba(45,212,191,.03));
}

/* hand-picked pairing block, visually split from the ranked list */
.custom-pair { display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
               margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.rail-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
              color: var(--ink-faint); font-weight: 600; }

/* compact pair header: mono pair label + badge pills on one wrapping row */
.pair-head { display: flex; align-items: center; gap: .45rem .7rem; flex-wrap: wrap;
             margin: 0 0 1rem; }
.pair-head .pair-name { font-family: var(--font-mono); font-size: .92rem; font-weight: 600;
                        display: inline-flex; align-items: center; gap: .4rem; min-width: 0;
                        margin-right: .3rem; }
.pair-head .pair-name a { max-width: 20ch; overflow: hidden; text-overflow: ellipsis;
                          white-space: nowrap; }
.pair-head .pair-name .x { color: var(--ink-faint); font-weight: 400; }

/* mother / possible baby / father — uniform sizes, aligned bottoms */
.trio { display: flex; align-items: flex-end; justify-content: center; gap: 1.5rem;
        margin: .2rem 0 1.3rem; }
.trio figure { margin: 0; text-align: center; flex: 0 0 auto; min-width: 0; }
.trio figure.parent { width: 132px; padding-bottom: .55rem; }
.trio figcaption { font-size: .75rem; color: var(--ink-dim); margin-top: .5rem;
                   min-height: 2.5em; line-height: 1.3; }
.trio figcaption .nm { display: inline-block; max-width: 104px; overflow: hidden;
                       text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.trio .baby {
    width: 184px; padding: .75rem .85rem .55rem;
    border: 1px dashed rgba(45,212,191,.4); border-radius: var(--radius);
    background: radial-gradient(240px 140px at 50% 0%, rgba(45,212,191,.07), transparent 70%);
}
.trio .baby figcaption .hint { display: block; color: var(--ink-faint); font-size: .68rem; }
@media (max-width: 620px) {
    .trio { display: grid; grid-template-columns: 1fr 1fr; justify-items: center;
            align-items: end; gap: .9rem; }
    .trio .baby { grid-column: 1 / -1; grid-row: 1; }
    .trio figure.parent { width: 118px; }
}

/* the Stats | Colours two-up: side-by-side only when both halves get real room;
   otherwise stack with tighter table density; each half scrolls in place */
.cockpit .duo { grid-template-columns: 1fr; gap: 1.2rem 1.5rem; }
@media (min-width: 1560px) {
    /* stats half is all short numbers — give the colours half the extra room */
    .cockpit .duo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
}
.cockpit .duo > div { overflow-x: auto; }
.cockpit .duo h3 { margin: .1rem 0 .45rem; font-size: .98rem; }
.cockpit .duo table.stats th, .cockpit .duo table.stats td { padding: .45rem .5rem; }
.cockpit .duo table.stats td { font-size: .88rem; }
.cockpit .duo table.stats td .pill { white-space: nowrap; gap: .25rem; padding: .15rem .45rem; }
.trait-note { margin: .2rem 0 1rem; font-size: .88rem; }

tr.flippable { cursor: pointer; }
tr.flippable:hover td { background: rgba(129,140,248,.06); }

.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
                gap: .7rem; margin-top: .6rem; }
.variant { margin: 0; text-align: center; padding: .55rem .35rem .4rem;
           border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
           background: rgba(15,23,42,.5); }
.variant figcaption { font-size: .7rem; color: var(--ink-faint); margin-top: .25rem; }

/* Tek-scope colour chip — coloured square with the palette id inside */
.cchip { display: inline-flex; align-items: center; justify-content: center;
         min-width: 22px; height: 22px; padding: 0 3px; border-radius: 5px;
         border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
         font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
         line-height: 1; vertical-align: middle; cursor: default; }
.cchip-unknown { background: transparent; border: 1px dashed var(--line);
                 color: var(--ink-faint); box-shadow: none; }
.cchip-blank { background: transparent; border: 1px dashed var(--line-soft);
               box-shadow: none; opacity: .55; }
.cchip-strip { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.pill .cchip { min-width: 18px; height: 18px; font-size: .58rem; border-radius: 4px; }

/* ---------------- Empty states ---------------- */
.empty-state {
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(420px 200px at 50% 0%, rgba(45,212,191,.05), transparent 70%),
        linear-gradient(180deg, rgba(22,32,53,.4), rgba(15,23,42,.4));
    padding: 2.6rem 1.5rem 2.4rem;
    margin: 0 0 1.2rem;
    text-align: center;
    animation: rise .5s ease both;
}
.empty-state .glyph {
    width: 54px; height: 54px; margin: 0 auto 1rem;
    display: grid; place-items: center;
    border-radius: 16px;
    color: var(--teal);
    background: rgba(45,212,191,.08);
    border: 1px solid rgba(45,212,191,.25);
    box-shadow: 0 0 34px -8px rgba(45,212,191,.35);
}
.empty-state .glyph svg { width: 28px; height: 28px; }
.empty-state h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.empty-state p { margin: 0 auto; max-width: 52ch; color: var(--ink-faint); font-size: .88rem; line-height: 1.55; }
.empty-state p a { font-weight: 600; }

/* flock-count pills that live under a form's selects */
.flock-note { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; }

/* ---------------- Mobile navigation ---------------- */
.nav-toggle {
    display: none;
    width: 38px; height: 38px; padding: 0;
    align-items: center; justify-content: center;
    background: rgba(148,163,184,.08);
    border: 1px solid var(--line); border-radius: 10px;
    color: var(--ink-dim); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-scrim { display: none; }

@media (max-width: 760px) {
    /* wide tables scroll in place instead of dragging the whole page sideways */
    table.stats { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.stats th, table.stats td { padding: .45rem .55rem; white-space: nowrap; }

    .sidebar {
        display: flex;
        position: fixed; inset: 0 auto 0 0; z-index: 40;
        transform: translateX(-102%);
        transition: transform .25s ease;
        box-shadow: 24px 0 60px -30px rgba(0,0,0,.9);
    }
    body.nav-open .sidebar { transform: none; }
    .nav-toggle { display: inline-flex; }
    .nav-scrim {
        position: fixed; inset: 0; z-index: 30;
        background: rgba(4,8,16,.6); backdrop-filter: blur(2px);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    body.nav-open .nav-scrim { display: block; opacity: 1; pointer-events: auto; }
    .content { padding: 1.1rem; }
}

/* ---------------- Blazor error / validation (restyled) ---------------- */
#blazor-error-ui {
    background: #1a1230; color: #fecaca; border-top: 1px solid var(--rose);
    bottom: 0; box-shadow: 0 -2px 18px rgba(0,0,0,.6); display: none;
    left: 0; padding: .8rem 1.2rem; position: fixed; width: 100%; z-index: 1000; font-size: .9rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .7rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--green); }
.invalid { outline: 1px solid var(--rose); }
.validation-message { color: var(--rose); }
.blazor-error-boundary { background: #7f1d1d; padding: 1rem; color: #fff; border-radius: 8px; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ======================================================================
   Smart Breeder 2.0 (Stage 4) — project dashboard, flow graph, inspector
   ====================================================================== */

/* ---- dashboard cards ---- */
.sb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1rem; }
.sb-proj {
    display: flex; flex-direction: column; gap: .7rem; text-align: left;
    background: linear-gradient(180deg, rgba(22,32,53,.85), rgba(15,23,42,.85));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem;
    box-shadow: var(--shadow); color: inherit; transition: border-color .15s, transform .08s;
}
.sb-proj:hover { border-color: rgba(45,212,191,.35); transform: translateY(-2px); }
.sb-proj .head { display: flex; gap: .8rem; align-items: center; }
.sb-proj .title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.sb-proj .sub { color: var(--ink-faint); font-size: .76rem; font-family: var(--font-mono); }
.sb-proj .badges { display: flex; flex-wrap: wrap; gap: .35rem; }

.sb-bar { height: 8px; border-radius: 6px; background: rgba(148,163,184,.14); overflow: hidden; }
.sb-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--indigo)); border-radius: 6px; }
.sb-bar-row { display: flex; align-items: center; gap: .6rem; }
.sb-bar-row .pct { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-dim); min-width: 3ch; text-align: right; }

.sb-phase { text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; }

/* ---- wizard ---- */
.sb-obj { display: grid; grid-template-columns: 130px 150px 1fr; gap: .55rem; align-items: end; margin-bottom: .5rem; }
.sb-obj .nm { font-family: var(--font-display); font-weight: 600; font-size: .9rem; padding-bottom: .5rem; }
.sb-obj .extra { display: flex; gap: .5rem; align-items: end; }
@media (max-width: 620px) { .sb-obj { grid-template-columns: 1fr 1fr; } .sb-obj .nm { grid-column: 1 / -1; } }
.sb-colrow { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; flex-wrap: wrap; }
.sb-colrow .rlab { min-width: 90px; font-size: .82rem; color: var(--ink-dim); }

/* ---- project layout: graph + inspector ---- */
.sb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; }
@media (max-width: 1040px) { .sb-layout { grid-template-columns: 1fr; } }
.sb-inspector { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; }
@media (max-width: 1040px) { .sb-inspector { position: static; max-height: none; } }
/* Smart Breeder project = FULL-SCREEN flow (bug-20260715-b2167b): lift the page's 1320px cap so
   the graph uses the whole main pane (site nav stays left, inspector is the right side panel). */
/* ---- FULL-BLEED canvas (Andrew 2026-07-16): the CONTENT BOX becomes the canvas — it already
   sits exactly right of the nav and below the topbar at every zoom/sidebar state, so everything
   anchors ABSOLUTE inside it (fixed + hardcoded offsets broke under zoom). The stage fills it;
   header, actions, banners, inspector and legend float above. ---- */
/* Fill by FLEX, not by vh math: .main becomes exactly the viewport, the topbar
   takes its 56px, and .content flex-grows into whatever's left — so the content
   box is pixel-exact right of the nav and below the topbar with no scrollbars. */
.main:has(.sb-fullpage) { height: 100vh; overflow: hidden; }
.content:has(.sb-fullpage) {
    max-width: none; padding: 0; animation: none;
    position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
/* Two-class selector (0,2,0) so it BEATS the later base `.sb-stage` block (0,1,0)
   further down this file — otherwise `.sb-stage`'s fixed height + inset:0 over-
   constrain the box (bottom:0 ignored) and the stage stops short of the bottom. */
.sb-stage.sb-stage-fs {
    position: absolute; inset: 0;
    width: auto; height: auto; min-height: 0; z-index: 1;
    border: none; border-radius: 0; box-shadow: none;
}
.sb-fs-tl {
    position: absolute; top: 14px; left: 16px; z-index: 4;
    display: flex; flex-direction: column; gap: .55rem; align-items: flex-start;
    max-width: min(460px, 36vw); pointer-events: none;
}
.sb-fs-tl > * { pointer-events: auto; width: fit-content; max-width: 100%; }
.sb-fs-hero {
    margin: 0; padding: .75rem 1rem; display: flex; justify-content: space-between;
    align-items: center; gap: .9rem;
    background: rgba(10,15,26,.78); border: 1px solid var(--line-soft);
    border-radius: var(--radius); backdrop-filter: blur(10px);
}
.sb-fs-hero h1 { font-size: 1.3rem; margin: 0; }
.sb-fs-hero p { margin: .15rem 0 0; font-size: .82rem; }
.sb-fs-hero .kpis { gap: .5rem; }
.sb-fs-hero .kpi { padding: .4rem .7rem; }
.sb-fs-hero .kpi .num { font-size: 1.05rem; }
.sb-fs-tl .save-row {
    margin: 0; padding: .5rem .7rem;
    background: rgba(10,15,26,.78); border: 1px solid var(--line-soft);
    border-radius: var(--radius); backdrop-filter: blur(10px);
}
.sb-fs-tl .sb-banner { margin: 0; }
.sb-fs-rail {
    position: absolute; top: 14px; right: 14px; bottom: 14px; width: 342px; z-index: 4;
    overflow-y: auto; display: flex; flex-direction: column; gap: .8rem;
    scrollbar-width: thin; pointer-events: none;
}
.sb-fs-rail > * { pointer-events: auto; }
.sb-fs-rail .card, .sb-fs-rail .sb-banner {
    margin: 0; background: rgba(13,19,33,.85); backdrop-filter: blur(10px);
    border: 1px solid var(--line-soft);
}
.sb-inspector-fs { position: static; max-height: none; overflow: visible; display: flex; flex-direction: column; gap: .8rem; }
.sb-legend-fs {
    /* bottom-CENTRE of the canvas (the pan/zoom hint owns bottom-left inside the stage) */
    position: absolute; left: 50%; bottom: 14px;
    transform: translateX(-50%); z-index: 4; margin: 0; white-space: nowrap;
    background: rgba(10,15,26,.78); border: 1px solid var(--line-soft);
    border-radius: 999px; padding: .4rem 1rem; backdrop-filter: blur(10px);
}
.sb-fs-empty { padding: 3rem 1.8rem 0; }

/* sb3 — Smart Breeder V3 goals strip (hidden preview, roadmap-20260719-d9a1f3).
   Docks the always-visible objectives strip above the full-bleed chart, in the gap between the
   top-left hero stack and the right rail; mirrors docs/sb-objectives-mockup.html chip styling. */
.sb3-goals {
    position: absolute; top: 14px; left: min(486px, 39vw); right: 366px; z-index: 4;
    padding: .5rem .7rem .55rem;
    background: rgba(10,15,26,.82); border: 1px solid var(--line-soft);
    border-radius: var(--radius); backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px -22px rgba(0,0,0,.85);
}
.sb3-ghead { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 0 .15rem .4rem; }
.sb3-ghead .lab { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.sb3-ghead .hint { font-family: var(--font-mono); font-size: .62rem; color: var(--ink-faint); opacity: .8; }
.sb3-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sb3-chip {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .28rem .55rem; border-radius: 9px; border: 1px solid var(--line);
    background: rgba(148,163,184,.05); transition: border-color .12s, background .12s, transform .08s;
}
.sb3-chip:hover { border-color: rgba(45,212,191,.5); background: rgba(45,212,191,.07); transform: translateY(-1px); }
.sb3-chip .st { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--ink); }
.sb3-chip .dir { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; }
.sb3-chip .dir.max { color: var(--teal); }
.sb3-chip .dir.min { color: var(--rose); }
.sb3-chip .dir.con { color: var(--amber); }
.sb3-chip .dir.ign { color: var(--ink-faint); }
.sb3-chip .val { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-dim); }
.sb3-chip .src {
    font-family: var(--font-mono); font-size: .64rem; color: var(--indigo);
    border: 1px solid rgba(129,140,248,.3); background: rgba(129,140,248,.08);
    padding: .02rem .32rem; border-radius: 6px;
}
.sb3-chip.ignored { opacity: .5; }
.sb3-chip.ignored .st { color: var(--ink-faint); }
/* the single-holder-of-a-maxed-stat trap (the G47 incident): soft amber ring so the eye lands on it */
.sb3-chip.culprit { border-color: rgba(251,191,36,.55); box-shadow: 0 0 14px -4px rgba(251,191,36,.5); }
.sb3-chip.tagchip { border-color: rgba(129,140,248,.3); background: rgba(129,140,248,.06); }
.sb3-chip.tagchip .st { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; color: var(--indigo); }
.sb3-chip.phasechip { border-color: rgba(45,212,191,.3); background: rgba(45,212,191,.06); }
.sb3-chip.phasechip .st { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; color: var(--teal); }
.sb3-chip.phasechip.mut { border-color: rgba(129,140,248,.3); background: rgba(129,140,248,.06); }
.sb3-chip.phasechip.mut .st { color: var(--indigo); }
/* Stacked reflow (matches the full-bleed <=1040px breakpoint): the strip joins the top flow. */
@media (max-width: 1040px) {
    .sb3-goals { position: static; inset: auto; left: auto; right: auto; width: auto; margin: 0 0 .8rem; order: -2; }
}
/* end sb3 */

/* sb3 V3 integration — edit popup (surface B), change-log rail (C), provenance (D).
   roadmap-20260719-d9a1f3 / docs/sb-objectives-mockup.html. */

/* --- surface D: per-node "why this step" (i) affordance + popover --- */
.sb3-why {
    position: absolute; top: 7px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
    font-family: var(--font-mono); font-size: .68rem; font-style: italic; font-weight: 700;
    border: 1px solid rgba(45,212,191,.45); color: var(--teal); background: rgba(45,212,191,.08);
}
.sb3-why:hover { background: rgba(45,212,191,.22); }
.sb3-whypop {
    position: absolute; z-index: 20; top: 30px; right: 4px; width: 260px; padding: .7rem .8rem;
    border-radius: 12px; background: rgba(13,19,33,.98); border: 1px solid rgba(45,212,191,.4);
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.9); cursor: default;
}
.sb3-whypop h4 { font-family: var(--font-display); font-size: .82rem; margin: 0 0 .35rem; color: var(--teal); }
.sb3-whypop p { margin: 0; font-size: .78rem; color: var(--ink-dim); line-height: 1.5; }
.sb3-whyx { display: inline-block; margin-top: .5rem; font-family: var(--font-mono); font-size: .62rem;
    color: var(--ink-faint); cursor: pointer; }
.sb3-whyx:hover { color: var(--ink-dim); }

/* --- surface B: edit popup (centred modal + backdrop) --- */
.sb3-editback { position: fixed; inset: 0; z-index: 60; background: rgba(4,8,15,.55); backdrop-filter: blur(2px); }
.sb3-editpop {
    position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: min(360px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
    border-radius: 14px; border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(22,32,53,.99), rgba(13,19,33,.99));
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.9);
}
.sb3-editpop .eh { display: flex; align-items: center; justify-content: space-between;
    padding: .7rem .85rem; border-bottom: 1px solid var(--line-soft); background: rgba(45,212,191,.05); }
.sb3-editpop .eh h3 { font-family: var(--font-display); font-size: .95rem; margin: 0; }
.sb3-editpop .eh .x { color: var(--ink-faint); cursor: pointer; font-family: var(--font-mono); }
.sb3-editpop .eh .x:hover { color: var(--ink); }
.sb3-editpop .opts { padding: .6rem .5rem .2rem; display: flex; flex-direction: column; gap: 2px; }
/* the options render as <label> elements — the global `label { flex-direction:column }` must be
   overridden or the rows stack vertically and blow the popup past the viewport */
.sb3-editpop .opt { display: flex; flex-direction: row; align-items: center; gap: .55rem; padding: .42rem .6rem;
    border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.sb3-editpop .opt:hover { background: rgba(148,163,184,.06); }
.sb3-editpop .opt.sel { background: rgba(45,212,191,.08); border-color: rgba(45,212,191,.3); }
.sb3-editpop .opt.tolet.sel { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); }
.sb3-editpop .opt input[type=radio] { accent-color: var(--teal); flex: 0 0 auto; }
.sb3-editpop .opt .olab { font-family: var(--font-display); font-weight: 600; font-size: .86rem; }
.sb3-editpop .opt .odesc { font-family: var(--font-mono); font-size: .64rem; color: var(--ink-faint); margin-left: auto; }
.sb3-editpop .opt .wt { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-dim); }
.sb3-editpop .opt .num {
    width: 62px; padding: .2rem .4rem; font-family: var(--font-mono); font-size: .78rem; color: var(--ink);
    background: #0f172a; border: 1px solid var(--line); border-radius: 7px;
}
.sb3-editpop .opt .wt .num { width: 48px; }
.sb3-editpop .preview { margin: .4rem .7rem .2rem; padding: .6rem .7rem; border-radius: 10px;
    border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.06); }
.sb3-editpop .preview .plab { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--amber); }
.sb3-editpop .preview p { margin: .3rem 0 0; font-size: .78rem; color: var(--ink-dim); line-height: 1.5; }
.sb3-editpop .preview .tally { display: flex; gap: .8rem; margin-top: .45rem; font-family: var(--font-mono); font-size: .68rem; }
.sb3-editpop .preview .t-ret { color: var(--rose); }
.sb3-editpop .preview .t-add { color: var(--teal); }
.sb3-editpop .preview .t-hist { color: var(--ink-faint); }
.sb3-editpop .foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .65rem .8rem .8rem; }
.sb3-editpop .foot .foot-note { font-family: var(--font-mono); font-size: .58rem; color: var(--ink-faint);
    max-width: 150px; line-height: 1.4; }
.sb3-editpop .foot .foot-btns { display: flex; gap: .4rem; }
.sb3-editpop .btn { font-family: var(--font-display); font-weight: 600; font-size: .8rem; padding: .42rem .8rem;
    border-radius: 9px; border: 1px solid var(--line); background: rgba(148,163,184,.08); color: var(--ink); cursor: pointer; }
.sb3-editpop .btn.primary { background: linear-gradient(145deg, var(--teal), var(--teal-deep)); color: #04121a;
    border-color: transparent; box-shadow: 0 8px 22px -10px rgba(45,212,191,.7); }

/* --- surface C: change-log rail card + timeline --- */
.sb3-log .sb3-log-head { display: flex; align-items: center; justify-content: space-between;
    margin: 0; cursor: pointer; font-family: var(--font-display); font-size: .92rem; }
.sb3-log .sb3-log-toggle { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-faint); }
.sb3-tl { list-style: none; margin: .5rem 0 0; padding: 0; position: relative; }
.sb3-tl::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 6px; width: 1px; background: var(--line); }
.sb3-tl li { position: relative; padding: 0 0 .7rem 1.4rem; }
.sb3-tl li:last-child { padding-bottom: 0; }
.sb3-tl .dot { position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--panel); border: 2px solid var(--ink-faint); }
.sb3-tl .change { font-size: .82rem; color: var(--ink); }
.sb3-tl .change .from { color: var(--ink-faint); text-decoration: line-through; font-family: var(--font-mono); font-size: .76rem; }
.sb3-tl .change .to { color: var(--teal); font-family: var(--font-mono); font-size: .76rem; }
.sb3-tl .who { font-family: var(--font-mono); font-size: .64rem; color: var(--ink-faint); margin-top: .15rem;
    display: flex; gap: .5rem; align-items: center; }
.sb3-tl .who .revert { color: var(--indigo); cursor: pointer; border: 1px solid rgba(129,140,248,.3);
    border-radius: 6px; padding: .02rem .35rem; }
.sb3-tl .who .revert:hover { background: rgba(129,140,248,.12); }

/* ---- tame tags (Library page: "Personal:Leo", "Dragon Boss Team 1") ---- */
.tame-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.tame-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--font-mono); font-size: .64rem; letter-spacing: .02em;
    padding: .1rem .5rem; border-radius: 999px; cursor: pointer;
    color: var(--indigo); background: rgba(129,140,248,.1); border: 1px solid rgba(129,140,248,.3);
}
.tame-tag:hover { border-color: rgba(129,140,248,.6); }
.tame-tag b { cursor: pointer; font-weight: 700; opacity: .7; }
.tame-tag b:hover { opacity: 1; color: var(--rose); }
.tame-tag-edit { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tame-group-row td { background: rgba(129,140,248,.06) !important; border-top: 2px solid rgba(129,140,248,.25); }
.tame-group-h { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--ink); }
/* Below the wide breakpoint everything reflows back into the normal page column. */
@media (max-width: 1040px) {
    .main:has(.sb-fullpage) { height: auto; overflow: visible; }
    .content:has(.sb-fullpage) { flex: 0 1 auto; height: auto; overflow: visible; padding: 1.2rem; }
    .sb-stage.sb-stage-fs { position: relative; inset: auto; width: auto; height: 64vh; min-height: 440px;
        border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
    .sb-fs-tl, .sb-fs-rail, .sb-legend-fs { position: static; width: auto; max-width: none;
        inset: auto; transform: none; pointer-events: auto; }
    /* DOM puts the stage first (it's the backdrop when floating) — reorder for stacked flow. */
    .content:has(.sb-fullpage) { display: flex; flex-direction: column; }
    .sb-fs-tl { order: -1; margin-bottom: .8rem; }
    .sb-fs-rail { margin-top: .8rem; }
}

/* ---- flow graph stage ---- */
.sb-stage {
    position: relative; overflow: hidden; touch-action: none; cursor: grab;
    height: calc(100vh - 240px); min-height: 480px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(45,212,191,.05), transparent 70%),
        #080d17;
    box-shadow: var(--shadow);
}
.sb-stage.sb-grabbing { cursor: grabbing; }
.sb-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.sb-edges { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.sb-edge { stroke: rgba(148,163,184,.4); stroke-width: 2; fill: none; }
.sb-node .sb-muts { color: #a78bfa; }
.sb-edge.actionable { stroke: rgba(45,212,191,.75); stroke-width: 2.5; }
.sb-edge.blocked { stroke: rgba(148,163,184,.25); stroke-dasharray: 5 5; }
/* accomplished pairing: the line greys with its cards (generational columns, roadmap-20260719-b7e4c2) */
.sb-edge.done { stroke: rgba(148,163,184,.22); stroke-width: 2; }
/* advancement: the same creature stepping into its next-column pairing — subtle teal dashes */
.sb-edge.sb-adv { stroke: rgba(45,212,191,.35); stroke-width: 1.5; stroke-dasharray: 3 6; }

.sb-toolbar { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; gap: .35rem; }
.sb-toolbar button { padding: .3rem .6rem; font-size: .74rem; background: rgba(10,15,26,.7); }
/* full-bleed: Fit lives in the TRUE bottom-right corner. The rail's container overlays that
   corner but is pointer-events:none there, so the button stays clickable; the rail reserves
   bottom space so long panel stacks stop above it. */
.sb-stage-fs .sb-toolbar { top: auto; bottom: 14px; right: 14px; }
.sb-fs-rail { padding-bottom: 52px; }
@media (max-width: 1040px) { .sb-stage-fs .sb-toolbar { top: 10px; bottom: auto; right: 10px; } }
.sb-hint { position: absolute; left: 12px; bottom: 10px; z-index: 3; font-family: var(--font-mono);
    font-size: .7rem; color: var(--ink-faint); background: rgba(10,15,26,.6);
    padding: .3rem .6rem; border-radius: 7px; pointer-events: none; }

/* ---- node cards ---- */
.sb-node {
    position: absolute; width: 300px; height: 160px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: .3rem; padding: .7rem .8rem;
    border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
    background: linear-gradient(180deg, rgba(22,32,53,.96), rgba(15,23,42,.96));
    transition: border-color .12s, box-shadow .12s;
}
.sb-node:hover { border-color: rgba(45,212,191,.5); }
.sb-node.sel { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(45,212,191,.35), var(--glow-teal); }
.sb-node .row { display: flex; gap: .8rem; align-items: center; min-width: 0; height: 100%; }
.sb-node .por { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; background: rgba(10,15,26,.6); border: 1px solid var(--line-soft); }
.sb-node .por .glyph { font-size: 1.7rem; opacity: .55; }
.sb-node .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .24rem; justify-content: center; }
.sb-node .nm { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2;
    display: flex; align-items: baseline; gap: .3rem; min-width: 0; }
.sb-node .nm .nm-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.sb-node .st { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em;
    display: inline-flex; align-items: center; gap: .35rem; }
.sb-node .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sb-node .odds { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-node .goal-tag { position: absolute; top: -9px; right: -7px; font-size: .62rem; }
.sb-node .nm .sex-f, .sb-node .nm .sex-m { font-weight: 700; margin-left: .2rem; }
.sb-node .nm .sb-needsex { font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
    letter-spacing: .03em; margin-left: .2rem; padding: .05rem .3rem; border-radius: 6px;
    border: 1px dashed currentColor; opacity: .85; white-space: nowrap; }

/* state colours (the .st text + a left accent) */
.sb-node .st.sb-st-planned    { color: var(--ink-faint); }
.sb-node .st.sb-st-waiting    { color: var(--amber); }
.sb-node .st.sb-st-breednow   { color: var(--teal); }
.sb-node .st.sb-st-cooldown   { color: var(--indigo); }
.sb-node .st.sb-st-baby       { color: #7dd3fc; }
.sb-node .st.sb-st-raising    { color: var(--green); }
.sb-node .st.sb-st-adult      { color: var(--ink-dim); }
.sb-node .st.sb-st-complete   { color: var(--green); }
.sb-node .st.sb-st-dead       { color: var(--rose); }
.sb-node .st.sb-st-neutered   { color: var(--ink-faint); }
.sb-node .st.sb-st-superseded { color: var(--ink-faint); }

.sb-node.has-breednow { border-color: rgba(45,212,191,.55); box-shadow: 0 0 22px -8px rgba(45,212,191,.5); }
.sb-node.is-goal { border-color: rgba(129,140,248,.55); }
.sb-node.is-dead { opacity: .5; }
.sb-node.is-dead .nm { text-decoration: line-through; }

/* revision-diff overlay */
.sb-node.sb-diff-new       { border-color: var(--teal); animation: sbpulse 1.6s ease-in-out infinite; }
.sb-node.sb-diff-complete  { border-color: rgba(52,211,153,.6); }
.sb-node.sb-diff-superseded { opacity: .42; border-style: dashed; }
.sb-node.sb-diff-superseded .nm { text-decoration: line-through; }

/* ---- accomplished appearance (generational columns): body desaturates + dims, the owned-teal
   outline stays at full strength so "we own this" still reads. Applied per APPEARANCE — the same
   creature's next-column card stays fully live. ---- */
.sb-node.is-done .row { opacity: .6; filter: saturate(.55); }

/* ---- owned vs planned outline (Task 2, Andrew 2026-07-19) ----
   A node backed by a real tame the tribe OWNS reads as a solid teal border + subtle glow;
   a planned/needed node reads as a dashed neutral border. Both are distinct from the
   selection ring, which is re-declared last so it always wins on the selected node. */
.sb-node.is-planned { border-style: dashed; }
.sb-node.is-owned {
    border-style: solid; border-color: var(--teal);
    box-shadow: 0 0 0 1px rgba(45,212,191,.4), 0 0 16px -6px rgba(45,212,191,.55);
}
.sb-node.sel {
    border-style: solid; border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(45,212,191,.45), var(--glow-teal);
}
@keyframes sbpulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45,212,191,.0); }
    50%      { box-shadow: 0 0 0 3px rgba(45,212,191,.28), 0 0 22px -6px rgba(45,212,191,.6); }
}

/* ---- inspector detail ---- */
.sb-kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .84rem; margin: .5rem 0; }
.sb-kv dt { color: var(--ink-faint); }
.sb-kv dd { margin: 0; font-family: var(--font-mono); }
.sb-legend { display: flex; flex-wrap: wrap; gap: .5rem .8rem; font-size: .72rem; color: var(--ink-dim); margin: .4rem 0 0; }
.sb-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.sb-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sb-banner { border-left: 3px solid var(--teal); }
.sb-banner.draft { border-left-color: var(--amber); }
.sb-banner.decide { border-left-color: var(--rose); }
.sb-banner.repair { border-left-color: var(--green); }