/* Lock and Lay — the blend (#1134): the old paper screens moved a step toward the new game look, and the new look's
   loudest pieces a step toward the paper. A light pass, not a redesign: no markup changes, only shared pieces, so each
   change reaches many screens at once. The new look's rule of thumb holds: what you only READ sits sunk (a dark well),
   what you PRESS is raised (a solid face, a thicker darker bottom edge, a faint top highlight), colour says what a thing
   does (green go, red final, gold money), and the game's own warm grey stays the main colour on either theme.
   Loaded after every other sheet on both clients (after breeding.css on the computer, after mobile.css on the phone),
   so the same selectors here win. Every numbered block stands alone: drop a block and nothing else changes. The block
   before them (the shared tokens) is needed by all of them.
   The raised edge of a button or a chip is its BOTTOM BORDER, not a shadow: any component that draws its own border
   (a tab, a link-button, an icon) loses the edge by itself, so the flat-by-design buttons stay flat. */

/* ---- shared tokens (the Trade Desk's, so the old screens and the newest one share one set) ---- */
:root { --bl-well: #e6dfcf; --bl-well-2: #ece5d6; --bl-lift: #fbf8f1; --bl-lift-2: #efe8da; --bl-edge: #b4a88f; --bl-line: #cfc6b3; --bl-line-2: #bdb29c;
  --bl-sink: inset 0 2px 5px rgba(70, 50, 20, .16); --bl-card-edge: rgba(70, 50, 20, .16);
  --bl-go1: #58ad6f; --bl-go2: #3f9257; --bl-goe: #2a6b3d; --bl-no1: #e8604b; --bl-no2: #cc4530; --bl-noe: #82230f; --bl-gold: #8a5a00; }
:root[data-theme="dark"] { --bl-well: #141210; --bl-well-2: #1a1815; --bl-lift: #2e2a25; --bl-lift-2: #262320; --bl-edge: #0e0d0b; --bl-line: #3a352e; --bl-line-2: #4d463d;
  --bl-sink: inset 0 2px 5px rgba(0, 0, 0, .32); --bl-card-edge: rgba(0, 0, 0, .3); --bl-gold: #f1cd6a; }

/* ==== 1. Buttons: one system. A plain button is a raised cream-grey face; primary is the green slab (go), danger the red
   one (final), quiet stays flat words. On the computer a hover lifts the face a touch instead of turning it ink. ==== */
button:where(:not(#auth *, #oauthConfirm *)) { --bf1: var(--bl-lift); --bf2: var(--bl-lift-2); --bft: var(--ink); --bfe: var(--bl-edge);
  border: 1px solid var(--bl-line-2); border-bottom: 3px solid var(--bfe); border-radius: 10px; background: linear-gradient(180deg, var(--bf1), var(--bf2)); color: var(--bft);
  font-weight: 500; box-shadow: none; transition: transform .08s, filter .12s, background .12s, color .12s; }
button.small:where(:not(#auth *, #oauthConfirm *)) { border-bottom-width: 2px; border-radius: 8px; }
button.primary:where(:not(#auth *, #oauthConfirm *)) { --bf1: var(--bl-go1); --bf2: var(--bl-go2); --bft: #fff; --bfe: var(--bl-goe); border-color: var(--bl-go2); border-bottom-color: var(--bl-goe); background: linear-gradient(180deg, var(--bf1), var(--bf2)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
button.danger:where(:not(#auth *, #oauthConfirm *)) { --bf1: var(--bl-no1); --bf2: var(--bl-no2); --bft: #fff; --bfe: var(--bl-noe); border-color: var(--bl-no2); border-bottom-color: var(--bl-noe); background: linear-gradient(180deg, var(--bf1), var(--bf2)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
button.quiet:where(:not(#auth *, #oauthConfirm *)), button.danger.quiet:where(:not(#auth *, #oauthConfirm *)) { border: 1px solid transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
button.danger.quiet:where(:not(#auth *, #oauthConfirm *)) { color: var(--brick); }
:root[data-theme] :where(body:not(.mobile)) button:where(:not([class]), .primary, .danger, .small, .wide):where(:not(.quiet, #auth *, #oauthConfirm *)):hover:not(:disabled) { background: linear-gradient(180deg, var(--bf1), var(--bf2)); color: var(--bft); filter: brightness(1.07); }
:root[data-theme] :where(body:not(.mobile)) button.quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); filter: none; }
button:where(:not([class]), .primary, .danger, .small, .wide):where(:not(.quiet, #auth *, #oauthConfirm *)):active:not(:disabled) { transform: translateY(2px); filter: brightness(.96); }
button:disabled { opacity: .45; filter: saturate(.5); }
/* the phone: the same faces, a thumb's size. Only the plain buttons and the system ones (primary, danger, small, wide):
   the phone's list rows and toggles that are buttons keep their own flat look */
body.mobile button:where(:not([class]), .primary, .danger, .small, .wide, .quiet):where(:not(#auth *, #oauthConfirm *)) { border: 1px solid var(--bl-line-2); border-bottom: 3px solid var(--bfe); border-radius: 12px; background: linear-gradient(180deg, var(--bf1), var(--bf2)); color: var(--bft); box-shadow: none; }
body.mobile button.small:where(:not(#auth *, #oauthConfirm *)) { border-bottom-width: 2px; border-radius: 10px; }
body.mobile button.primary:where(:not(#auth *, #oauthConfirm *)) { border-color: var(--bl-go2); border-bottom-color: var(--bl-goe); background: linear-gradient(180deg, var(--bl-go1), var(--bl-go2)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
body.mobile button.danger:where(:not(#auth *, #oauthConfirm *)) { border-color: var(--bl-no2); border-bottom-color: var(--bl-noe); background: linear-gradient(180deg, var(--bl-no1), var(--bl-no2)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
body.mobile button.quiet, body.mobile button.icon { border: 1px solid transparent; background: transparent; box-shadow: none; }
body.mobile button:where(:not([class]), .primary, .danger, .small, .wide):active { transform: translateY(2px); box-shadow: none; }

/* ==== 2. Chips and filter pills: the Shop's pills everywhere. A raised pill with its count in a small well; the chosen
   one green. ==== */
.chip { border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); border-radius: 999px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink-2); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.chip span { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--bl-well); color: var(--ink-2); font: 700 10.5px/17px var(--sans); }
.chip.on { border-color: var(--bl-go2); border-bottom-color: var(--bl-goe); background: linear-gradient(180deg, var(--bl-go1), var(--bl-go2)); color: #fff; }
.chip.on span { background: rgba(0, 0, 0, .26); color: #fff; }
:root[data-theme] .chip:hover { border-color: var(--ink-3); border-bottom-color: var(--bl-edge); background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); }
:root[data-theme] .chip.on:hover { border-color: var(--bl-go2); border-bottom-color: var(--bl-goe); background: linear-gradient(180deg, var(--bl-go1), var(--bl-go2)); color: #fff; }
body.mobile .chip { border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); border-radius: 999px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); box-shadow: none; }
body.mobile .chip.on { border-color: var(--bl-go2); border-bottom-color: var(--bl-goe); background: linear-gradient(180deg, var(--bl-go1), var(--bl-go2)); color: #fff; }

/* ==== 3. Tabs and switches: a sunk track, the open one raised in it (the Expo's bar, the cutting screen's Sort). ==== */
.tabs:not(.sc-bar) { gap: 3px; padding: 4px; border: 0; border-radius: 14px; background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); overflow-x: auto; scrollbar-width: none; }
.tabs:not(.sc-bar) button, :root[data-theme] .tabs:not(.sc-bar) button:hover { flex: 1 1 auto; border: 0; border-radius: 10px; padding: 8px 14px; background: transparent; color: var(--ink-3); font-weight: 600; box-shadow: none; white-space: nowrap; }
:root[data-theme] .tabs:not(.sc-bar) button:hover { color: var(--ink); }
.tabs:not(.sc-bar) button.on, :root[data-theme] .tabs:not(.sc-bar) button.on:hover { background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); box-shadow: 0 2px 0 var(--bl-edge), inset 0 1px 0 rgba(255, 255, 255, .08); }
.seg:not(.role-seg), .mk-bar .seg, .mk-f .seg, .fn-seg { gap: 0; padding: 2px; border: 0; border-radius: 12px; background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); overflow: visible; }
.seg:not(.role-seg) button, .mk-bar .seg button, .mk-f .seg button, .fn-seg button, :root[data-theme] .seg:not(.role-seg) button:hover { border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); box-shadow: none; }
.mk-bar .seg button + button, .mk-f .seg button + button { border-left: 0; }
:root[data-theme] .seg:not(.role-seg) button:hover { color: var(--ink); }
/* the joined toggles (a few filters): the same track, the chosen one raised */
.ctl-seg { gap: 2px; height: auto; padding: 2px; border: 0; border-radius: 999px; background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); overflow: visible; }
.ctl-seg > * + * { border-left: 0; }
.ctl-seg > button, .ctl-seg > label { height: 26px; border-radius: 999px; }
.ctl-seg > button.on, :root[data-theme] .ctl-seg > button.on:hover { background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); box-shadow: 0 2px 0 var(--bl-edge), inset 0 1px 0 rgba(255, 255, 255, .08); }
/* the phone: its page tabs (Pairings, Season, Projects, Eggs; For sale, Store, Mine...) in the same track, scrolling sideways when they run long */
body.mobile #view .tabs:not(.sc-bar) { display: flex; gap: 2px; padding: 3px; margin-bottom: 12px; }
body.mobile #view .tabs:not(.sc-bar) button { flex: 1 0 auto; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); font-weight: 600; box-shadow: none; }
body.mobile #view .tabs:not(.sc-bar) button.on { background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); box-shadow: 0 2px 0 var(--bl-edge), inset 0 1px 0 rgba(255, 255, 255, .08); }
.seg:not(.role-seg) button.on, .mk-bar .seg button.on, .mk-f .seg button.on, .fn-seg button.on, :root[data-theme] .seg:not(.role-seg) button.on:hover { background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); box-shadow: 0 2px 0 var(--bl-edge), inset 0 1px 0 rgba(255, 255, 255, .08); }

/* ==== 4. Section headings: a hint of the display face. The small capitals stay; the face is the bands' (Lilita One),
   the rule after it a soft 2px line. ==== */
.section, body.mobile .section { font: 400 13.5px/1.1 var(--gmf); letter-spacing: .06em; color: var(--ink-2); }
.section::after, body.mobile .section::after { height: 2px; border-radius: 2px; background: var(--bl-line); }
.section > :is(button, a, span, small, b, i, .meta), body.mobile .section > :is(button, a, span, small, b, i, .meta) { font-family: var(--sans); letter-spacing: normal; }
.section > button { font-size: 13px; text-transform: none; }

/* ==== 5. Cards and toasts: the new card shape. Rounded, the warm grey face, a short raised edge under it; a toast's and an
   Alert's kind becomes a solid coin, like the top bar's. ==== */
:root[data-theme] .specimen, .fac-card, .sl-offer, .sl-ad, .nb-card, .st-card { border: 1px solid var(--bl-line); border-radius: 14px; background: var(--paper-2); box-shadow: 0 3px 0 var(--bl-card-edge); }
.fac-card { overflow: hidden; }
.toast { border: 1px solid var(--bl-line-2); border-radius: 14px; box-shadow: 0 3px 0 var(--bl-card-edge), 0 14px 30px rgba(0, 0, 0, .35); }
.toast .t-ico, .alert .kind { border: 0; border-radius: 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 60%, #fff), var(--tone)); color: color-mix(in srgb, var(--tone) 25%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .4); }
.toast .t-ico svg, .alert .kind svg { stroke-width: 2.2; }

/* ==== 6. Numbers you only read: sunk wells (the top bar's counters). The Incubator's glance, Finances, the Sales
   ledger's totals, the animal card's facts. ==== */
.incy-glance, .fn-tiles { gap: 6px; border: 0; border-radius: 0; overflow: visible; }
.incy-stat, .fn-tile { border-radius: 12px; background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); }
.incy-stat + .incy-stat, .fn-tile + .fn-tile { border-left: 0; }
.incy-stat b { font: 700 24px/1.1 var(--sans); }
.fn-tile b { font-family: var(--sans); font-weight: 700; }
.stats { gap: 6px; background: none; border: 0; }
.stats div { border-radius: 10px; background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); }

/* ==== 7. Empty notes: a sunk well with a small coin, not a dashed box. ==== */
:is(#panelBody, #view) :is(.empty, .sl-empty, .nb-empty):not(.pcard, .tubbox, .tub, .st-adrow, .xp-wall, .xp-floor, .pj-legacy, .gm-empty) { border: 0; border-radius: 12px; background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); color: var(--ink-3); font-weight: 500; }
:is(#panelBody, #view) .empty:not(.pcard, .tubbox, .tub, .st-adrow, .xp-wall, .xp-floor, .pj-legacy, .gm-empty)::before { border: 0; background: linear-gradient(180deg, #9dcbe8, #4f8bb3); color: #0c2a3d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(0, 0, 0, .4); }

/* ==== 8. Fields: what you type into is a well. ==== */
:root[data-theme] :where(#panel, #detail, #modal, #modal2, #settings, #phone, #view, #sheet) :is(input:where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit])), textarea, .csel-btn) { border: 1px solid var(--bl-line); border-radius: 10px; background: var(--bl-well); box-shadow: var(--bl-sink); color: var(--ink); }
:root[data-theme] :where(#panel, #detail, #modal, #modal2, #settings, #phone, #view, #sheet) :is(input:where(:not([type=checkbox], [type=radio], [type=range])), textarea):focus { outline: 0; border-color: var(--bl-go2); box-shadow: var(--bl-sink), 0 0 0 2px color-mix(in srgb, var(--bl-go1) 40%, transparent); }
/* a search box that draws its own frame (the Shop's, Hatch's) is the well; the input inside it stays bare */
:root[data-theme] .shop-search { border-color: var(--bl-line); background: var(--bl-well); box-shadow: var(--bl-sink); }
:root[data-theme] :is(.shop-search, .ig-search, .ig-cform, .tb2-money) input, :root[data-theme] :is(.shop-search, .ig-search, .ig-cform, .tb2-money) input:focus { border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* ==== 9. The phone's top bar: the computer's counters. Cash, worth and the day sit in dark wells, each with its solid
   coin; the gear is a raised button. (The bar is dark on both themes, as it is now.) ==== */
body.mobile #top { background: linear-gradient(180deg, #2b2823, #1d1b18); box-shadow: 0 1px 0 #3a352e, 0 6px 16px rgba(0, 0, 0, .25); }
body.mobile #top .stat { padding: 3px 10px 3px 3px; border: 1px solid #3a352e; border-radius: 999px; background: #141210; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }
body.mobile #top .stat .hi { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .5); }
body.mobile #top .stat .hi svg { stroke-width: 2.1; }
body.mobile #top .stat.cash .hi { background: linear-gradient(180deg, #ffdc73, #d99a1c); } body.mobile #top .stat.cash .hi svg { color: #4a3000; }
body.mobile #top .stat.worth .hi { background: linear-gradient(180deg, #8bdb9f, #3d9456); } body.mobile #top .stat.worth .hi svg { color: #0a3317; }
body.mobile #top .stat.day .hi { background: linear-gradient(180deg, #9dcbe8, #4f8bb3); } body.mobile #top .stat.day .hi svg { color: #0c2a3d; }
body.mobile #top .stat.cash b { color: #f1cd6a !important; }
body.mobile #top .gear { border: 1px solid #4d463d; border-bottom: 3px solid #0e0d0b; background: linear-gradient(180deg, #2e2a25, #262320); }

/* ==== 10. The new pieces on the light theme: their dark wells become paper wells, so a light room has no black boxes. ==== */
:root:not([data-theme="dark"]) .incy-fold { background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); }
:root:not([data-theme="dark"]) .incy-fold-t { color: var(--ink); }
:root:not([data-theme="dark"]) .incy-fold-n { color: var(--ink-2); }
:root:not([data-theme="dark"]) .incy-fold-car { border-top-color: var(--ink-2); }
:root:not([data-theme="dark"]) .incy-shelf { background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); border-color: var(--bl-line-2); box-shadow: 0 2px 0 var(--bl-edge); }
:root:not([data-theme="dark"]) .incy-unit + .incy-unit { border-top-color: var(--bl-line); }

/* ==== 11. The Collection, a step further (the screen players live in; Drew's has ~450 animals, most unnamed). The
   header is one raised tray; the role chips are raised pills that fill in their role's colour; the counts read as
   counters; every row is a card with an edge and its value in gold; in the compact list a long morph wraps to two lines
   (no two animals cut to the same first words) with its genes under it; the selection bar is a sunk band of slab
   buttons, Wholesale the red one. Same buttons, same places, one tap each: CSS only. ==== */
#panelBody .coll-top { border: 1px solid var(--bl-line); border-radius: 16px; background: var(--paper-2); box-shadow: 0 3px 0 var(--bl-card-edge); }
#panelBody .coll-top .coll-strip { border-top: 2px solid var(--bl-line); }
.coll-top .rchip, .coll-top .coll-morebtn { border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink-2); font-weight: 600; }
.coll-top .rchip span, .coll-x span { margin-left: 2px; padding: 0 6px; border-radius: 999px; background: var(--bl-well); color: var(--ink-2); font: 700 10.5px/17px var(--sans); }
.coll-top :is(.rchip, .coll-morebtn):hover:not(.on) { background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); border-color: var(--ink-3); border-bottom-color: var(--bl-edge); color: var(--ink); }
.coll-top .rchip.on, .coll-top .rchip.on:hover { border-color: color-mix(in srgb, var(--rc) 70%, var(--bl-line-2)); border-bottom-color: color-mix(in srgb, var(--rc) 55%, #000); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 34%, var(--bl-lift)), color-mix(in srgb, var(--rc) 22%, var(--bl-lift-2))); color: var(--ink); }
.coll-top .rchip.on span { background: rgba(0, 0, 0, .22); color: var(--ink); }
.rchip-act { border: 1px solid var(--bl-no2); border-bottom: 2px solid var(--bl-noe); border-left: 0; background: linear-gradient(180deg, var(--bl-no1), var(--bl-no2)); color: #fff; font-weight: 700; }
.rchip-act:hover { filter: brightness(1.07); }
.coll-strip .cs-count b, .coll-top .coll-strip .cs-count b { font: 400 22px/1 var(--gmf); letter-spacing: .02em; color: var(--ink); }
.coll-top .coll-strip .cs-item.warn { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 14%, transparent); }
/* the rows: a card each, the value in gold */
table.coll tbody tr.row td { border-bottom: 2px solid var(--bl-card-edge); }
table.coll tbody tr.row:hover td { background: color-mix(in srgb, var(--ink) 4%, var(--paper-2)); }
table.coll tbody tr.row td.num:last-child { font: 700 14.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--bl-gold); }
/* the compact list: a long morph wraps to two lines instead of being cut to the same first words; the genes go under it */
table.coll.dense td { height: 54px; }
table.coll.dense .an-line { flex-wrap: wrap; row-gap: 3px; white-space: normal; }
table.coll.dense .an-line b { flex: 0 1 auto; max-width: calc(100% - 26px); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.22; }
table.coll.dense .an-line .pills { flex: 1 0 100%; margin: 0; }
table.coll.dense .thumbcell canvas { width: 64px; height: 37px; }
/* the selection bar: a sunk band; its buttons are the raised faces, Wholesale the red slab */
.selbar.coll-sel { border: 0; border-radius: 14px; background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); }
.coll-sel .sel-count b { font: 400 19px/1 var(--gmf); letter-spacing: .02em; }
.coll-sel .sel-grp + .sel-grp { border-left: 2px solid var(--bl-line); }
.abtn { border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); font-weight: 600; }
.abtn:hover:not(:disabled) { background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); border-color: var(--ink-3); border-bottom-color: var(--bl-edge); filter: brightness(1.07); }
.abtn:active:not(:disabled) { transform: translateY(2px); }
.abtn.danger, .abtn.danger:hover:not(:disabled) { border-color: var(--bl-no2); border-bottom-color: var(--bl-noe); background: linear-gradient(180deg, var(--bl-no1), var(--bl-no2)); color: #fff; }
.abtn.quiet, .abtn.quiet:hover:not(:disabled) { border-color: transparent; background: transparent; filter: none; }
/* the phone's Animals page: a card's name may take three lines (two cut long morphs alike), its value in gold */
body.mobile .row-card.acard-m .t { -webkit-line-clamp: 3; }
body.mobile .acard-m .ac-val { font: 700 14.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--bl-gold); }
body.mobile .row-card.acard-m { border-bottom: 3px solid var(--bl-card-edge); }
body.mobile .coll-selbar-m { background: var(--bl-well); box-shadow: var(--bl-sink), 0 -8px 16px rgba(0, 0, 0, .25); }

/* ==== 12. Hide for-sale: two switches in a sunk well (version A of three). Each sex is a small switch in its own
   colour, pink for females, blue for males; on means those for-sale animals are hidden; the count beside it says how
   many. The same real checkbox underneath, the same one tap. Breeding's Pair and Season on the computer, Pairings and
   Season on the phone. ==== */
.hl-seg { gap: 4px; height: auto; padding: 3px; border: 0; border-radius: 999px; background: var(--bl-well); box-shadow: var(--bl-sink), 0 0 0 1px var(--bl-line); }
.hl-seg > * + * { border-left: 0; }
.hl-seg .ctl-chk, .hl-seg .ctl-chk:hover { height: 30px; padding: 0 10px 0 5px; border-radius: 999px; background: transparent; color: var(--ink-2); font-weight: 600; box-shadow: none; }
.hl-seg .hl-f { --hx: #e07aa9; --hx2: #b5457a; } .hl-seg .hl-m { --hx: #6ca0c2; --hx2: #2f6f9f; }
.hl-seg .hl-tick { position: relative; width: 30px; height: 18px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink-3) 45%, var(--bl-well)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); transition: background .15s; }
.hl-seg .hl-tick::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #fff, #ddd5c6); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); opacity: 1; transform: none; transition: transform .15s; }
.hl-seg .ctl-chk:has(input:checked), .hl-seg .ctl-chk:has(input:checked):hover { background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); box-shadow: 0 2px 0 var(--bl-edge); }
.hl-seg .ctl-chk:has(input:checked) .hl-tick { background: linear-gradient(180deg, var(--hx), var(--hx2)); }
.hl-seg .ctl-chk:has(input:checked) .hl-tick::after { transform: translateX(12px); }
.hl-seg .ctl-sym { display: none; }
.hl-seg .hl-n, .hl-seg .ctl-chk:has(input:checked) .hl-n { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--bl-well); color: var(--ink-2); font: 700 10.5px/17px var(--sans); }
.hl-seg .ctl-chk:has(input:checked) .hl-n { background: color-mix(in srgb, var(--hx) 25%, var(--bl-well)); color: var(--ink); }
.breed-listed > .meta { font-size: 12.5px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .hl-seg .hl-tick, .hl-seg .hl-tick::after { transition: none; } }
/* the phone's pair of chips: the same switches (sized so the count still fits on the line at 390 px) */
body.mobile .breed-listed { gap: 6px; } body.mobile .breed-listed > .lbl { letter-spacing: .03em; }
body.mobile .breed-listed .hl-pill { gap: 6px; min-height: 36px; padding: 0 10px 0 4px; border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink-2); font-weight: 600; }
body.mobile .breed-listed .hl-pill:nth-of-type(1) { --hx: #e07aa9; --hx2: #b5457a; } body.mobile .breed-listed .hl-pill:nth-of-type(2) { --hx: #6ca0c2; --hx2: #2f6f9f; }
body.mobile .breed-listed .hl-pill .hl-box { position: relative; display: block; width: 26px; height: 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink-3) 45%, var(--bl-well)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
body.mobile .breed-listed .hl-pill:is(*, :has(input:checked)) .hl-box::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #fff, #ddd5c6); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); transform: none; transition: transform .15s; }
body.mobile .breed-listed .hl-pill:has(input:checked) { border-color: var(--bl-line-2); border-bottom-color: var(--bl-edge); background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); }
body.mobile .breed-listed .hl-pill:has(input:checked) .hl-box { background: linear-gradient(180deg, var(--hx), var(--hx2)); }
body.mobile .breed-listed .hl-pill:has(input:checked) .hl-box::after { transform: translateX(10px); }

/* ---- 13. The Collection's head, smaller (#1153; Drew: "this collection part at the top takes up a ton of space"): tighter
   padding, the role chips wrapping (no scroll bar), and a Less / More fold beside
   the search that folds the filters and totals away (the count, attention and Select stay); a folded head with filters
   on says how many on its button ---- */
#panelBody .coll-top { gap: 8px; padding: 10px 12px; margin-bottom: 8px; }
#panelBody .coll-top .coll-filters { row-gap: 6px; }
#panelBody .coll-top .coll-filters > .coll-roles:first-child { flex-wrap: wrap; gap: 6px; } /* wraps, never a scroll bar (Drew: "can we do this without a scroll bar?"); Less folds it all away */
#panelBody .coll-top .coll-strip { padding-top: 8px; row-gap: 4px; }
#panelBody .coll-fold { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 36px; padding: 0 12px; border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); border-radius: 999px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; }
#panelBody .coll-fold svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .15s; }
#panelBody .coll-top.folded .coll-fold svg { transform: none; }
#panelBody .coll-fold i { padding: 1px 6px; border-radius: 999px; background: var(--moss); color: #fff; font: 700 11px/1.3 var(--sans); font-style: normal; }
#panelBody .coll-top.folded .coll-filters, #panelBody .coll-top.folded .coll-strip > .cs-item:not(.warn), #panelBody .coll-top.folded .coll-strip .cs-sum, #panelBody .coll-top.folded .coll-strip .cs-right > :not(#selStart) { display: none; }
#panelBody .coll-top.folded .coll-strip { padding-top: 6px; }
/* the role chips smaller so the whole row fits on one line at a normal panel width (Drew: "make the tabs a bit smaller so
   they all fit on one row"): tighter padding and type, a smaller count; they still wrap rather than scroll if the panel is
   very narrow */
#panelBody .coll-top .coll-filters > .coll-roles:first-child { gap: 4px; }
#panelBody .coll-top .coll-roles .rchip { gap: 4px; height: 28px; min-height: 28px; padding: 0 7px; font-size: 12px; }
#panelBody .coll-top .coll-roles .rchip::before { width: 6px; height: 6px; }
#panelBody .coll-top .coll-roles .rchip span { margin-left: 1px; padding: 0 4px; font-size: 10px; }
#panelBody .coll-top .coll-roles .rchip-act { height: 28px; min-height: 28px; padding: 0 8px; font-size: 12px; }

/* ---- 14. The project form, New project / Edit / Next phase / Copy (Drew: "make this look way better"): every part its own
   card with a game heading, the goal card green and the avoid card red, raised gene chips, a real switch for Avoid
   strictly, big steppers in wells, and the buttons on a bar that stays in view. Markup unchanged (projectsui.js) ---- */
:root .pj-form { --pjg: #4fa866; --pjg2: #3d8c52; --pja: #d0563f; gap: 10px; }
:root .pj-form h2 { margin: 0 0 2px; font: 400 30px/1.05 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
:root .pj-form .pj-f { gap: 8px; padding: 12px 14px; border: 1px solid var(--bl-line); border-radius: 14px; background: var(--paper-2); box-shadow: 0 2px 0 var(--bl-card-edge); }
:root .pj-form .pj-f > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font: 400 16px/1.2 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
:root .pj-form .pj-f > span:first-child small { font: 500 12.5px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
:root .pj-form .pj-f.pj-row { flex-direction: column; align-items: stretch; }
:root .pj-form #pjName { height: 46px; padding: 0 14px; border: 1px solid var(--bl-line-2); border-radius: 12px; background: var(--bl-well); font: 600 16px/1 var(--sans); }
/* the goal card green, the avoid card red: a coloured edge and a tinted head */
:root .pj-form .pj-f:has(#pjGoal) { border-left: 4px solid var(--pjg); background: linear-gradient(90deg, color-mix(in srgb, var(--pjg) 12%, var(--paper-2)), var(--paper-2) 60%); }
:root .pj-form .pj-f:has(#pjGoal) > span:first-child { color: color-mix(in srgb, var(--pjg) 70%, var(--ink)); }
:root .pj-form .pj-f:has(#pjAvoid) { border-left: 4px solid var(--pja); background: linear-gradient(90deg, color-mix(in srgb, var(--pja) 11%, var(--paper-2)), var(--paper-2) 60%); }
:root .pj-form .pj-f:has(#pjAvoid) > span:first-child { color: color-mix(in srgb, var(--pja) 75%, var(--ink)); }
:root .pj-form .pj-picked { min-height: 34px; padding: 6px; border-radius: 10px; background: var(--bl-well); }
:root .pj-form .pj-picked > .meta { padding: 0 6px; font-style: italic; }
:root .pj-form .pj-picked .gq-chip.on { height: 28px; min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px; font: 700 13px/1 var(--sans); }
:root .pj-form #pjGoal .gq-chip.on { background: linear-gradient(180deg, #62bd78, var(--pjg2)); color: #fff; box-shadow: 0 3px 0 #2a6b3d; }
:root .pj-form #pjAvoid .gq-chip.on { background: linear-gradient(180deg, #e46f58, #b9432f); color: #fff; box-shadow: 0 3px 0 #7d2a1c !important; }
:root .pj-form .pj-gchip { gap: 2px; }
:root .pj-form .pj-gchip > button:not(.gq-chip) { display: grid; place-items: center; width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 15px; }
:root .pj-form .pj-gchip > button:not(.gq-chip):hover { background: var(--bl-lift); color: var(--ink); }
:root .pj-form .pj-prev { padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--pjg) 10%, transparent); }
:root .pj-form .pj-echo { display: inline-block; align-self: flex-start; margin: 0; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pja) 14%, transparent); font-weight: 600; }
/* Avoid strictly: a switch, in plain words (it read as shouting capitals under a bare tick box) */
:root .pj-form .pj-strict { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: var(--bl-well); font: 600 13px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
:root .pj-form .pj-strict small { grid-column: 2; font: 500 12px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink-3); }
:root .pj-form .pj-strict input { grid-row: 1 / span 2; appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; margin: 0; border: 0; border-radius: 999px; background: var(--bl-line-2); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); cursor: pointer; transition: background .15s; }
:root .pj-form .pj-strict input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); transition: transform .15s; }
:root .pj-form .pj-strict input:checked { background: linear-gradient(180deg, #e46f58, #b9432f); }
:root .pj-form .pj-strict input:checked::after { transform: translateX(16px); }
:root .pj-form .pj-complexes > .meta, :root .pj-form .pj-others > .meta { font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
/* the gene picker: Goal / Avoid as a two-colour switch, the search in a well, raised chips with their counts */
:root .pj-form .pj-pickbar { gap: 10px; }
:root .pj-form .pj-mode { padding: 3px; border-radius: 12px; background: var(--bl-well); border: 0; }
:root .pj-form .pj-mode button { height: 36px; padding: 0 14px; border: 0; border-radius: 9px; font: 700 13px/1 var(--sans); color: var(--ink-3); background: transparent; }
:root .pj-form .pj-mode button[data-pjmode="goal"].on { background: linear-gradient(180deg, #62bd78, var(--pjg2)); color: #fff; box-shadow: 0 2px 0 #2a6b3d; }
:root .pj-form .pj-mode button[data-pjmode="avoid"].on { background: linear-gradient(180deg, #e46f58, #b9432f); color: #fff; box-shadow: 0 2px 0 #7d2a1c; }
:root .pj-form .pj-pickbar input { height: 42px; padding: 0 14px; border: 1px solid var(--bl-line-2); border-radius: 12px; background: var(--bl-well); font-size: 14px; }
:root .pj-form .pj-genes { gap: 6px; max-height: 210px; padding: 8px; border-radius: 12px; background: var(--bl-well); }
:root .pj-form .pj-genes .gq-chip { height: 30px; min-height: 30px; padding: 0 10px; border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); border-radius: 9px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); font: 600 12.5px/1 var(--sans); transition: transform .08s; }
:root .pj-form .pj-genes .gq-chip:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--ink-3); }
:root .pj-form .pj-genes .gq-chip:active:not(:disabled) { transform: translateY(1px); }
:root .pj-form .pj-genes .gq-chip span { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--bl-well); color: var(--ink-2); font: 700 10.5px/1.3 var(--sans); }
:root .pj-form .pj-genes .pj-used { opacity: .3; }
/* roster and most of one look: big steppers, the number in a well */
:root .pj-form .pj-steps { gap: 18px; flex-wrap: wrap; }
:root .pj-form .pj-step { gap: 6px; padding: 4px 6px; border-radius: 12px; background: var(--bl-well); }
:root .pj-form .pj-step > span:first-child { min-width: 16px; text-align: center; font-size: 16px; color: var(--ink-2); }
:root .pj-form .pj-step button { width: 32px; height: 32px; border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); border-radius: 9px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); font: 700 16px/1 var(--sans); color: var(--ink); }
:root .pj-form .pj-step b, :root .pj-form .pj-step .pj-scn { min-width: 44px; height: 32px; display: inline-grid; place-items: center; border: 0; background: transparent; font: 400 20px/1 var(--gmf); color: var(--ink); text-align: center; }
:root .pj-form .pj-scope-hint { margin: -6px 4px 0; font-size: 12px; }
/* the buttons: a bar that stays at the foot of the window while it scrolls */
:root .pj-form .pj-formacts { position: sticky; bottom: -1px; z-index: 3; margin: 2px -4px 0; padding: 12px 4px 4px; background: linear-gradient(180deg, transparent, var(--paper) 30%); }
:root .pj-form .pj-formacts button { height: 46px; padding: 0 22px; border-radius: 12px; font: 400 17px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; }
:root .pj-form .pj-formacts .primary { padding: 0 28px; background: linear-gradient(180deg, #62bd78, var(--pjg2)); border: 0; color: #fff; box-shadow: 0 4px 0 #2a6b3d; }
/* a picked gene that can't step further stays in full colour (it was faded like a dead button) */
:root .pj-form .pj-picked .gq-chip.on:disabled { opacity: 1; filter: none; cursor: default; }
/* the window fits the form (it was a 640 px form in a wider box) */
#modalBox:has(> .pj-modal) { width: min(760px, 94vw); max-width: none; }
body:not(.mobile) .pj-modal { width: auto; }
/* the foot bar fades from the window's own colour */
#modalBox:has(> .pj-modal) .pj-formacts { background: linear-gradient(180deg, rgba(31, 29, 26, 0), rgb(31, 29, 26) 34%); }
:root:not([data-theme="dark"]) #modalBox:has(> .pj-modal) .pj-formacts { background: linear-gradient(180deg, transparent, var(--paper) 34%); }
/* the phone: the two buttons share the foot bar, each on one line */
body.mobile .pj-form .pj-formacts { gap: 10px; }
body.mobile .pj-form .pj-formacts button { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 16px; white-space: nowrap; }
body.mobile .pj-form .pj-formacts .primary { flex-grow: 1.4; padding: 0 12px; }
/* the gene picker's chips by kind (Drew: "can these look better"): co-dom gold, dominant blue, recessive purple, the
   colours the cutting screen's gene pills use; a dot of the colour, a tinted face, a coloured lip; the count a dark bubble.
   "+N more" reads as a pointer to the search */
:root .pj-form .pj-genes { gap: 7px; padding: 10px; }
:root .pj-form .pj-genes .gq-chip { --k: #9a8f80; --k2: #6f665a; gap: 6px; height: 32px; min-height: 32px; padding: 0 6px 0 10px; border: 1px solid color-mix(in srgb, var(--k) 55%, transparent); border-bottom: 3px solid color-mix(in srgb, var(--k2) 85%, #000); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 26%, var(--bl-lift)), color-mix(in srgb, var(--k) 14%, var(--bl-lift-2))); color: var(--ink); font: 700 12.5px/1 var(--sans); }
:root .pj-form .pj-genes .gq-chip::before { content: none; display: none; }
:root .pj-form .pj-genes .gq-chip.pj-k-codom { --k: #e0ad2e; --k2: #9a6a08; }
:root .pj-form .pj-genes .gq-chip.pj-k-dom { --k: #5d93dc; --k2: #2f5f9e; }
:root .pj-form .pj-genes .gq-chip.pj-k-rec { --k: #a877d6; --k2: #6c3f99; }
:root .pj-form .pj-genes .gq-chip:not(:has(span)) { padding-right: 11px; }
:root .pj-form .pj-genes .gq-chip span { margin: 0; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: var(--ink); font: 700 10.5px/1.25 var(--sans); }
:root .pj-form .pj-genes .gq-chip:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--k); filter: brightness(1.08); }
:root .pj-form .pj-genes .pj-used { opacity: .28; filter: saturate(.4); }
:root .pj-form .pj-genes > .meta { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px dashed var(--bl-line-2); border-radius: 10px; color: var(--ink-3); font: 600 12px/1 var(--sans); }
:root:not([data-theme="dark"]) .pj-form .pj-genes .gq-chip { background: linear-gradient(180deg, color-mix(in srgb, var(--k) 22%, #fff), color-mix(in srgb, var(--k) 12%, #fff)); }
:root:not([data-theme="dark"]) .pj-form .pj-genes .gq-chip span { background: rgba(0, 0, 0, .12); }

/* the gene picker's chips, final (Drew picked the glow look, "put the number in the left corner attached"): a dark tile
   lit by its kind's colour, the name in that colour, and the count as a badge fixed to the top-left corner */
:root .pj-form .pj-genes { gap: 12px 8px; padding: 14px 10px 10px 14px; }
:root .pj-form .pj-genes .gq-chip { position: relative; overflow: visible; height: 32px; padding: 0 12px; border: 1.5px solid var(--k); border-radius: 10px; background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--k) 30%, #15120f), #15120f 70%); color: color-mix(in srgb, var(--k) 55%, #fff); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--k) 70%, transparent), inset 0 0 8px -3px var(--k); }
:root .pj-form .pj-genes .gq-chip:not(:has(span)) { padding-right: 12px; }
:root .pj-form .pj-genes .gq-chip:hover:not(:disabled) { box-shadow: 0 0 16px -1px var(--k), inset 0 0 10px -3px var(--k); filter: none; }
:root .pj-form .pj-genes .gq-chip span { position: absolute; left: -7px; top: -8px; min-width: 18px; margin: 0; padding: 2px 5px; border-radius: 999px; background: var(--k); color: #15120f; font: 800 10px/1.2 var(--sans); text-align: center; box-shadow: 0 0 0 2px #15120f; }

/* ---- 15. Set racks aside (Drew: "make this way better too"): each rack a card, its number a chunky badge (green when the
   rack is set aside; two digits fit, racks 10+ read "1" before), slab controls, ♀ pink and ♂ blue when picked, the tub map
   as a little rack with lit tubs, the key as chips, the Done bar always in view. Markup unchanged (ui.js racksHtml) ---- */
#modalBox.ra-modal { width: min(940px, 100%); }
.ra { --rak: #5fb374; --rak2: #3d8c52; }
.ra h2 { margin: 0 0 6px; font: 400 30px/1.05 var(--gmf); letter-spacing: .02em; text-transform: uppercase; }
.ra .ra-lead { max-width: 78ch; margin-bottom: 12px; font-size: 13px; color: var(--ink-3); }
.ra .ra-key { align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px; border-radius: 12px; background: var(--bl-well); }
.ra .ra-key > span:not(.meta) { gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font: 600 11.5px/1 var(--sans); }
.ra .ra-key > .meta { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rak) 18%, transparent); color: var(--rak); font: 700 12px/1 var(--sans); }
.ra .ra-key i { width: 10px; height: 10px; border-radius: 3px; }
.ra .ra-list { --ra-cols: 58px minmax(0, 1fr) 150px 132px 0px 92px; display: flex; flex-direction: column; gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.ra .ra-list.tags { --ra-cols: 58px minmax(0, 1fr) 150px 132px 130px 92px; }
.ra .ra-head { padding: 0 14px; background: none; border: 0; color: var(--ink-3); }
.ra .ra-rack { column-gap: 12px; padding: 10px 14px; border: 1px solid var(--bl-line); border-radius: 14px; background: var(--paper-2); box-shadow: 0 2px 0 var(--bl-card-edge); }
.ra .ra-head + .ra-rack { border-top: 1px solid var(--bl-line); }
.ra .ra-rack.kept { border-left: 4px solid var(--rak); background: linear-gradient(90deg, color-mix(in srgb, var(--rak) 13%, var(--paper-2)), var(--paper-2) 55%); box-shadow: 0 2px 0 var(--bl-card-edge); }
.ra .ra-rack.focus { outline: 2px solid var(--ink-2); outline-offset: 2px; }
/* the number: a chunky badge that holds two digits */
.ra select.ra-no { width: 58px; height: 42px; padding: 0 16px 0 10px; border: 1px solid var(--bl-line-2); border-bottom: 3px solid var(--bl-edge); border-radius: 11px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); font: 400 21px/1 var(--gmf); text-align: left; text-align-last: left; }
.ra .ra-rack.kept select.ra-no { border: 0; background: linear-gradient(180deg, #6cc483, var(--rak2)); color: #fff; box-shadow: 0 3px 0 #2a6b3d; }
.ra .ra-what b { font: 400 16px/1.2 var(--gmf); letter-spacing: .03em; }
.ra .ra-what small { font-size: 12px; color: var(--ink-3); }
.ra .ra-what small em { color: #e0a43b; font-style: normal; font-weight: 600; }
/* the pickers: wells, the sex as a three-way switch */
.ra .ra-rack select:not(.ra-no) { height: 36px; padding: 0 10px; border: 1px solid var(--bl-line-2); border-radius: 10px; background-color: var(--bl-well); font: 600 13px/1 var(--sans); }
.ra .ra-rack.kept select[data-rarole] { border-color: color-mix(in srgb, var(--rak) 60%, var(--bl-line-2)); color: color-mix(in srgb, var(--rak) 55%, var(--ink)); }
.ra .ra-sex { gap: 0; padding: 3px; border: 0; border-radius: 11px; background: var(--bl-well); }
.ra .ra-sex button { min-height: 30px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font: 700 13px/1 var(--sans); box-shadow: none; }
.ra .ra-sex button.on { background: linear-gradient(180deg, #fff8e9, #e8dcc2); color: #2a1a10; box-shadow: 0 2px 0 #8a7656; }
.ra .ra-sex button.on[data-v="F"] { background: linear-gradient(180deg, #e070a6, #b5457a); color: #fff; box-shadow: 0 2px 0 #7a2550; }
.ra .ra-sex button.on[data-v="M"] { background: linear-gradient(180deg, #5d9bd0, #2f6f9f); color: #fff; box-shadow: 0 2px 0 #1b4467; }
/* the tubs: a little rack, each tub lit by who is in it */
.ra .ra-dots { gap: 3px; justify-self: end; max-height: none; padding: 5px; border: 2px solid #4a4038; border-radius: 6px; background: #15120f; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.ra .ra-dots i { width: 7px; height: 7px; border-radius: 2px; }
.ra .ra-dots i.k { background: var(--rak); box-shadow: 0 0 4px color-mix(in srgb, var(--rak) 70%, transparent); }
.ra .ra-dots i.o { background: #c9bda6; }
.ra .ra-dots i.w { background: #e0a43b; box-shadow: 0 0 4px rgba(224, 164, 59, .7); }
.ra .ra-dots i.p { background: #5d9bd0; }
.ra .ra-dots i.e { background: transparent; box-shadow: inset 0 0 0 1px #3d352e; }
/* Done stays in view */
.ra > .actions { position: sticky; bottom: -1px; z-index: 2; margin-top: 12px; padding: 12px 0 2px; background: linear-gradient(180deg, rgba(31, 29, 26, 0), rgb(31, 29, 26) 34%); }
:root:not([data-theme="dark"]) .ra > .actions { background: linear-gradient(180deg, transparent, var(--paper) 34%); }
.ra > .actions button { height: 44px; padding: 0 20px; border-radius: 12px; font: 400 16px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; }
.ra > .actions .primary { padding: 0 30px; border: 0; background: linear-gradient(180deg, #6cc483, var(--rak2)); color: #fff; box-shadow: 0 4px 0 #2a6b3d; }
@media (max-width: 760px) { .ra .ra-list, .ra .ra-list.tags { --ra-cols: 58px minmax(0, 1fr) 92px; } .ra .ra-key > .meta { margin-left: 0; } }
.ra .ra-dots { gap: 2px; padding: 4px; } .ra .ra-dots i { width: 6px; height: 5px; border-radius: 1.5px; }
.ra .ra-rack { padding-top: 8px; padding-bottom: 8px; }
.ra > .actions { display: flex; justify-content: flex-end; gap: 10px; margin-left: -2px; margin-right: -2px; padding-left: 2px; padding-right: 2px; background: linear-gradient(180deg, rgba(31, 29, 26, 0), rgb(31, 29, 26) 30%, rgb(31, 29, 26)); }
/* the sexes bold (Drew: "sexes need to be way more bold"): big symbols, always in their colours, solid when picked */
.ra .ra-sex button { min-width: 40px; height: 32px; min-height: 32px; font: 800 13px/1 var(--sans); color: var(--ink-2); opacity: 1; }
.ra .ra-sex button[data-v="F"], .ra .ra-sex button[data-v="M"] { font-size: 20px; font-weight: 900; }
.ra .ra-sex button[data-v="F"]:not(.on) { color: #e070a6; } .ra .ra-sex button[data-v="M"]:not(.on) { color: #5d9bd0; }
.ra .ra-sex button:not(.on):hover { background: rgba(255, 255, 255, .06); }
.ra .ra-sex button.on[data-v="F"], .ra .ra-sex button.on[data-v="M"] { text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }

/* the project form's banner (Drew: "add a nice banner at the top of the project thing"): the title on a green stage with a
   python-scale pattern, a kicker over it and two eggs and a strand on the right. CSS on the form's own h2, so it reads
   New project, Edit, Next phase or Copy as the form does */
:root .pj-form h2 { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 96px; margin: 0 0 4px; padding: 18px 150px 18px 22px; border-radius: 16px;
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 255, 255, .07) 0 9px, transparent 10px) 0 0 / 36px 36px,
    radial-gradient(circle at 0 0, rgba(0, 0, 0, .12) 0 9px, transparent 10px) 0 0 / 36px 36px,
    radial-gradient(120% 160% at 85% 50%, #3f9a57, #24693a 55%, #174a28);
  box-shadow: 0 4px 0 #0f3a1e, inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -18px 30px -18px rgba(0, 0, 0, .45);
  color: #fff; font: 400 32px/1.05 var(--gmf); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
:root .pj-form h2::before { content: 'Breeding project'; display: block; margin-bottom: 6px; color: #ffd84a; font: 800 11px/1 var(--sans); letter-spacing: .16em; text-shadow: none; }
:root .pj-form h2::after { content: ''; position: absolute; right: 18px; top: 50%; width: 120px; height: 84px; transform: translateY(-50%) rotate(-6deg); filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 84'%3E%3Cpath d='M8 70 C 28 40, 44 78, 62 48 S 96 30, 112 12' fill='none' stroke='%23ffd84a' stroke-width='5' stroke-linecap='round' stroke-dasharray='1 9'/%3E%3Cellipse cx='42' cy='44' rx='19' ry='25' fill='%23fff8e6'/%3E%3Cellipse cx='36' cy='34' rx='5' ry='7' fill='%23ffffff' opacity='.8'/%3E%3Cellipse cx='82' cy='50' rx='16' ry='21' fill='%23f3e4c2'/%3E%3Cellipse cx='77' cy='42' rx='4' ry='6' fill='%23ffffff' opacity='.8'/%3E%3Ccircle cx='102' cy='20' r='5' fill='%23ffd84a'/%3E%3Ccircle cx='14' cy='66' r='4' fill='%23ffd84a'/%3E%3C/svg%3E") center / contain no-repeat; }
body.mobile .pj-form h2 { min-height: 84px; padding: 16px 112px 16px 16px; font-size: 26px; }
body.mobile .pj-form h2::after { width: 92px; height: 66px; right: 10px; }
@media (prefers-reduced-motion: no-preference) { :root .pj-form h2::after { animation: pjBannerEgg 3.2s ease-in-out infinite; } }
@keyframes pjBannerEgg { 0%, 100% { transform: translateY(-50%) rotate(-6deg); } 50% { transform: translateY(-54%) rotate(-3deg); } }
/* the foot bar (Drew: "these buttons need padding and dont look right there"): a solid bar across the window's full width at its
   bottom edge, a divider and a shadow over what scrolls under it, the buttons with room round them */
body:not(.mobile) #modalBox:has(> .pj-modal) .pj-formacts { bottom: -26px; margin: 6px -30px -26px; padding: 14px 30px 18px; border-top: 1px solid var(--bl-line); border-radius: 0 0 16px 16px; background: rgb(31, 29, 26); box-shadow: 0 -12px 22px -12px rgba(0, 0, 0, .7); gap: 12px; }
:root:not([data-theme="dark"]) body:not(.mobile) #modalBox:has(> .pj-modal) .pj-formacts { background: var(--paper); }

/* ---- 16. The pairing's allelic tip (#1175): why some combinations can't come out of this pair ---- */
.allelic-tip { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #5d93dc 14%, var(--paper-2)); border-left: 3px solid #5d93dc; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.allelic-tip b { flex: none; padding: 1px 7px; border-radius: 999px; background: #5d93dc; color: #fff; font: 800 10px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
/* a pairing's health warning (#1174): the tip's shape in amber; a gene block reads as the blocked ticket does */
.health-warn { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #d99a2b 16%, var(--paper-2)); border-left: 3px solid #d99a2b; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.health-warn b { flex: none; padding: 1px 7px; border-radius: 999px; background: #b97c12; color: #fff; font: 800 10px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.health-note { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #d99a2b 12%, var(--paper-2)); border-left: 3px solid #d99a2b; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }

/* ---- 17. The Collection's role buttons (Drew: "make these buttons look better", then "make these match better"): the same
   slab as the More button and the switches beside them (lifted, a dark lip, cream type); the role's colour only on the dot
   and the count. The picked one keeps the slab and lights up in its colour: a ring, a glow, a solid count. Every role the
   same way, Undecided included (it was a pale fill no other control uses) ---- */
#panelBody .coll-top .coll-roles .rchip { gap: 5px; height: 32px; min-height: 32px; padding: 0 5px 0 8px; border: 0; border-bottom: 2px solid rgb(14, 13, 11); border-radius: 8px !important; background: linear-gradient(180deg, rgb(46, 42, 37), rgb(38, 35, 32)); color: rgb(179, 169, 150); font: 700 11.5px/1 var(--sans); box-shadow: none; transition: transform .08s, color .12s; }
#panelBody .coll-top .coll-roles .rchip::before { width: 7px; height: 7px; box-shadow: none; }
#panelBody .coll-top .coll-roles .rchip span { margin: 0; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 22%, rgb(20, 18, 16)); color: color-mix(in srgb, var(--rc) 70%, #fff); font: 800 10px/1.3 var(--sans); }
#panelBody .coll-top .coll-roles .rchip:hover:not(.on) { color: rgb(236, 229, 214); transform: translateY(-1px); }
#panelBody .coll-top .coll-roles .rchip:active { transform: translateY(1px); }
#panelBody .coll-top .coll-roles .rchip.on, #panelBody .coll-top .coll-roles .rchip.on:hover { border-bottom-color: rgb(14, 13, 11); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, rgb(46, 42, 37)), color-mix(in srgb, var(--rc) 9%, rgb(38, 35, 32))); color: rgb(236, 229, 214); text-shadow: none; box-shadow: inset 0 0 0 1.5px var(--rc), 0 0 10px -3px var(--rc); }
#panelBody .coll-top .coll-roles .rchip.on::before { background: var(--rc); box-shadow: none; }
#panelBody .coll-top .coll-roles .rchip.on span { background: var(--rc); color: rgb(20, 18, 16); }
#panelBody .coll-top .coll-roles .rchip.rc-undecided.on::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rc); }
#panelBody .coll-top .coll-roles .rchip-split .rchip { border-radius: 8px 0 0 8px !important; }
#panelBody .coll-top .coll-roles .rchip-act { height: 32px; min-height: 32px; padding: 0 8px; border-radius: 0 8px 8px 0; border-bottom-width: 2px; font: 800 11.5px/1 var(--sans); }
#panelBody .coll-top .coll-filters > .coll-roles:first-child { gap: 4px; }
/* Set racks aside's foot (Drew: "this is bugged at the bottom of set racks aside"): the bar was narrower than the window, so
   the rack cards showed past its ends. A solid bar across the window's full width at its bottom edge, a divider and a shadow */
#modalBox.ra-modal .ra > .actions { bottom: -26px; margin: 14px -30px -26px; padding: 14px 30px 18px; border-top: 1px solid var(--bl-line); border-radius: 0 0 16px 16px; background: rgb(31, 29, 26); box-shadow: 0 -12px 22px -12px rgba(0, 0, 0, .7); }
:root:not([data-theme="dark"]) #modalBox.ra-modal .ra > .actions { background: var(--paper); }
#panelBody .coll-top .coll-roles .rchip.rc-undecided::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(179, 169, 150); } /* the hollow dot reads on the dark slab */
#panelBody .coll-top .coll-roles .rchip.rc-undecided.on { box-shadow: inset 0 0 0 1.5px rgb(179, 169, 150), 0 0 10px -3px rgb(179, 169, 150); } #panelBody .coll-top .coll-roles .rchip.rc-undecided.on::before { box-shadow: inset 0 0 0 1.5px rgb(236, 229, 214); } #panelBody .coll-top .coll-roles .rchip.rc-undecided.on span { background: rgb(179, 169, 150); }
/* big cuts (#1419): Reveal all now beside Cut all, the counts on top, and the Needs a look view hiding the cards that don't */
.cut-all.reveal-all { margin-left: 8px; }
.hx-cutrow .cut-all.reveal-all { margin-left: 6px; }
.hx-sumtop { margin: 4px 0 8px; }
.hx-view { display: inline-flex; gap: 4px; margin-left: 8px; }
.hx-view b { font-weight: 700; margin-left: 3px; }
.egg.hx-quiet { display: none; }

/* ---- Projects in the game's look (#1588): each project is a raised game card with a thick tier-coloured edge, a medal
   in its tier's colour, the name in the chunky face, filled badges (tier, status, completed), the summary in a sunk
   well and a raised Edit; the slots are chunky pips; the ribbon and the tiers fill solid; in the editor the gene picker
   is the Morph Studio's candy chips by gene type. ---- */
.t-bronze { --tier2: #6e3f1d; } .t-silver { --tier2: #4e5a66; } .t-gold { --tier2: #7a5c00; } .t-mythic { --tier2: #4a2a7a; }
:root .pj-card { gap: 8px; padding: 12px 14px 12px 18px; border: 1px solid var(--bl-line, var(--rule-2)); border-left: 0; border-radius: 16px; background: var(--bl-lift, var(--paper)); box-shadow: 0 4px 0 var(--bl-edge, rgba(0, 0, 0, .25)), inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; transition: transform .12s, box-shadow .12s; }
:root .pj-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--tier, var(--ink-3)); box-shadow: inset -2px 0 0 rgba(0, 0, 0, .18); }
:root .pj-card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 46px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 16%, transparent), transparent 70%); pointer-events: none; }
:root .pj-card > * { position: relative; z-index: 1; }
:root .pj-card.folded:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--bl-edge, rgba(0, 0, 0, .25)), inset 0 1px 0 rgba(255, 255, 255, .05); }
:root .pj-card.folded { padding-top: 10px; padding-bottom: 10px; }
:root .pj-head { gap: 8px; }
:root .pj-name { gap: 8px; font: 400 19px/1.1 var(--gmf); letter-spacing: .02em; color: var(--ink); }
:root .pj-name > b { font: inherit; }
:root .pj-caret { width: 14px; margin-right: 0; font-size: 12px; color: var(--ink-3); }
/* the medal: the tier's dot as a coin */
:root .pj-head .pj-dot { width: 22px; height: 22px; margin: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tier) 30%, #fff), var(--tier) 55%, var(--tier2, var(--tier))); box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .25); }
/* filled badges */
:root .pj-tier { padding: 0 9px; border: 0; border-radius: 999px; background: var(--tier); color: #fff; font: 400 12px/22px var(--gmf); letter-spacing: .06em; box-shadow: 0 2px 0 var(--tier2, rgba(0, 0, 0, .3)); }
:root .pj-tier.t-gold { background: linear-gradient(180deg, #ffd84a, #e0a812); color: #3d2600; }
:root .pj-tier.t-silver { background: linear-gradient(180deg, #e2e8ee, #9aa6b2); color: #1f2a35; }
:root .pj-tier.t-bronze { background: linear-gradient(180deg, #e2a06c, #a7683a); color: #2e1606; }
:root .pj-st { padding: 0 10px; border-radius: 999px; font: 700 11.5px/22px var(--sans); background: var(--bl-well, var(--paper-2)); color: var(--ink-3); }
:root .pj-st.st-active { color: #fff; background: #3f9c5a; box-shadow: 0 2px 0 #23653a; }
:root .pj-st.st-active::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #c9ffd9; }
:root .pj-st.st-paused { color: #3d2600; background: #f0c45a; }
:root .pj-done { padding: 0 10px; border-radius: 999px; background: linear-gradient(180deg, #ffd84a, #e0a812); color: #3d2600; font: 400 12px/22px var(--gmf); letter-spacing: .06em; box-shadow: 0 2px 0 #8f5a00; }
/* the folded row's summary in a sunk well, and Edit raised */
:root .pj-fold .pj-sum { font: 600 12.5px/1.3 var(--sans); color: var(--ink-2); }
:root .pj-fold .pj-odds { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root .pj-card .abtn[data-pjedit], :root .pj-card .pj-acts .abtn { min-height: 30px; padding: 0 14px; border: 1px solid var(--bl-line-2, var(--rule-2)); border-radius: 10px; background: var(--bl-lift, var(--paper)); color: var(--ink); font: 700 12.5px/28px var(--sans); box-shadow: 0 3px 0 var(--bl-edge, rgba(0, 0, 0, .3)); }
:root .pj-card .abtn[data-pjedit]:active, :root .pj-card .pj-acts .abtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bl-edge, rgba(0, 0, 0, .3)); }
:root .pj-goal { font: 600 13px/1.3 var(--sans); color: var(--ink-2); }
:root .pj-odds { padding: 3px 10px; border-radius: 999px; background: var(--bl-well, var(--paper-2)); font: 700 12px/1.3 var(--sans); color: var(--ink-2); }
/* the ribbon: one rounded track, the reached steps solid in the tier */
:root .pj-ribbon { gap: 3px; padding: 3px; border-radius: 12px; background: var(--bl-well, var(--paper-2)); }
:root .pj-ribbon li, :root .pj-ribbon li:first-child, :root .pj-ribbon li:last-child { border: 0; border-radius: 9px; font: 400 12px/1 var(--gmf); letter-spacing: .05em; padding: 7px 4px; }
:root .pj-ribbon li.on { background: var(--tier); color: #fff; box-shadow: 0 2px 0 var(--tier2, rgba(0, 0, 0, .3)); }
:root .pj-nums b { font: 400 16px var(--gmf); color: var(--ink); }
/* the slots: chunky pips */
:root .pj-pips { gap: 5px; } :root .pj-pips i { width: 14px; height: 28px; border: 0; border-radius: 5px; background: var(--bl-well, var(--paper-2)); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
:root .pj-pips i.on { background: linear-gradient(180deg, #6fd18a, #3f9c5a); box-shadow: 0 2px 0 #23653a, 0 0 10px rgba(95, 200, 120, .35); }
:root .pj-count { font: 400 17px/1.1 var(--gmf); letter-spacing: .02em; } :root .pj-count b { font: inherit; }
:root .pj-legacy { border-radius: 16px; } :root .pj-lg-head > b, :root .pj-lg-name > b { font: 400 17px var(--gmf); letter-spacing: .02em; }
/* the editor's gene picker: candy chips by type, like the Morph Studio */
:root .pj-form .pj-genes .gq-chip:not(:disabled) { border: 0; color: #fff; background: #9b5de5; box-shadow: 0 3px 0 #5f2aa8; font-weight: 700; }
:root .pj-form .pj-genes .gq-chip.pj-k-codom:not(:disabled) { background: #f5b301; color: #3d2600; box-shadow: 0 3px 0 #a36d00; }
:root .pj-form .pj-genes .gq-chip.pj-k-dom:not(:disabled) { background: #3a86ff; box-shadow: 0 3px 0 #1b4fb0; }
:root .pj-form .pj-genes .gq-chip:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.08); }
:root .pj-form .pj-genes .gq-chip:disabled { opacity: .35; }
:root .pj-form .pj-genes .gq-chip span { background: rgba(0, 0, 0, .35); color: #fff; }
:root .pj-form .pj-picked .gq-chip.on { height: 34px; min-height: 34px; padding: 0 14px; border-radius: 12px; font: 400 15px/1 var(--gmf); letter-spacing: .02em; }
:root .pj-form .pj-f { border-radius: 16px; box-shadow: 0 3px 0 var(--bl-edge, rgba(0, 0, 0, .25)); }
/* ---- 18. Collection folders (#1599): a bar of raised folder slabs over the filters, both clients. Folder amber on the icon
   and the count; the picked one lit in it (a ring and a glow), as the role chips light in theirs. A top folder with
   subfolders carries a twist with how many; open, the subfolders sit beside it in one well. Long names clamp, the tooltip
   has the whole name ---- */
:root { --fc: #c98419; --fc-2: #e7a63a; }
.fold-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.fold-bar .fbar-lbl { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; font: 400 14px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.fold-bar .fbar-lbl .fic { width: 15px; height: 15px; }
.fold-bar .fic { flex: none; width: 13px; height: 13px; fill: color-mix(in srgb, var(--fc-2) 75%, transparent); stroke: var(--fc); stroke-width: 1; }
.fold-bar .fchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; max-width: 240px; padding: 0 5px 0 9px; border: 1px solid var(--bl-line-2); border-bottom: 2px solid var(--bl-edge); border-radius: 8px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink-2); font: 700 12px/1 var(--sans); box-shadow: none; white-space: nowrap; transition: transform .08s, color .12s; }
.fold-bar .fchip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.fold-bar .fchip span { flex: none; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--fc) 22%, var(--bl-well)); color: color-mix(in srgb, var(--fc-2) 70%, var(--ink)); font: 800 10px/1.3 var(--sans); }
.fold-bar .fchip:hover:not(.on) { color: var(--ink); transform: translateY(-1px); }
.fold-bar .fchip:active { transform: translateY(1px); }
.fold-bar .fchip.on, .fold-bar .fchip.on:hover { border-color: var(--fc); background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 18%, var(--bl-lift)), color-mix(in srgb, var(--fc) 10%, var(--bl-lift-2))); color: var(--ink); box-shadow: inset 0 0 0 1px var(--fc), 0 0 10px -3px var(--fc); }
.fold-bar .fchip.on span { background: var(--fc-2); color: rgb(20, 18, 16); }
.fold-bar .fchip.all { padding-left: 11px; }
.fold-bar .fchip.unfiled { border-style: dashed; border-bottom-style: solid; }
.fold-bar .fchip.unfiled .fic { fill: none; }
.fold-bar .fgrp { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.fold-bar .fgrp.has-kids > .fchip.top { border-radius: 8px 0 0 8px; }
.fold-bar .ftwist { display: inline-flex; align-items: center; gap: 2px; height: 32px; min-height: 32px; padding: 0 7px 0 5px; border: 1px solid var(--bl-line-2); border-left: 0; border-bottom: 2px solid var(--bl-edge); border-radius: 0 8px 8px 0; background: linear-gradient(180deg, var(--bl-lift-2), var(--bl-well-2)); color: var(--ink-3); font: 800 10px/1 var(--sans); box-shadow: none; }
.fold-bar .ftwist svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .12s; }
.fold-bar .ftwist.open svg { transform: rotate(90deg); }
.fold-bar .ftwist:hover { color: var(--ink); }
.fold-bar .ftwist i { font-style: normal; }
.fold-bar .fgrp.open { gap: 4px; padding: 3px 5px 3px 3px; border-radius: 11px; background: var(--bl-well); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); flex-wrap: wrap; }
.fold-bar .fgrp.open > .ftwist { margin-left: -4px; }
.fold-bar .fchip.sub { height: 28px; min-height: 28px; max-width: 200px; padding-left: 7px; font-size: 11.5px; }
.fold-bar .fchip.sub .fic { width: 11px; height: 11px; }
.fold-bar .fbtn { height: 32px; min-height: 32px; padding: 0 11px; border-radius: 8px; font: 400 13px/1 var(--gmf); letter-spacing: .03em; color: var(--ink-2); }
.fold-bar .fadd { color: color-mix(in srgb, var(--fc-2) 80%, var(--ink)); }
.fold-bar .fedit { margin-left: auto; }
.fold-bar .fedit + .fadd { margin-left: 0; }
.fold-bar .fadd:only-of-type, .fold-bar .fhint ~ .fadd { margin-left: 0; }
.fold-bar .fhint { font-size: 12px; color: var(--ink-3); }
/* the Move to folder picker: one slab per folder, a tap moves */
.fpick-list { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 420px); overflow: auto; margin: 4px 0 10px; padding: 2px; }
.fpick { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px 0 12px; border-radius: 10px; text-align: left; font: 700 13.5px/1.2 var(--sans); color: var(--ink); }
.fpick b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.fpick span { flex: none; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--fc) 22%, var(--bl-well)); color: color-mix(in srgb, var(--fc-2) 70%, var(--ink)); font: 800 11px/1.4 var(--sans); }
.fpick .fic { flex: none; width: 16px; height: 16px; fill: color-mix(in srgb, var(--fc-2) 75%, transparent); stroke: var(--fc); stroke-width: 1; }
.fpick.sub { width: calc(100% - 22px); margin-left: 22px; min-height: 36px; font-size: 13px; }
.fpick:hover:not(:disabled) { border-color: var(--fc); transform: translateY(-1px); }
.fpick.here, .fpick:disabled { opacity: .55; }
.fpick-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.fpick-foot .fbtn { min-height: 36px; padding: 0 14px; font: 400 14px/1 var(--gmf); letter-spacing: .03em; }
.fpick-foot .fadd { color: color-mix(in srgb, var(--fc-2) 80%, var(--ink)); }
.fpick-none { padding: 8px 2px; }
/* the card's Folder */
.dt-folder .fold-sel { width: 100%; max-width: 100%; height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; text-overflow: ellipsis; }