/* ==== the shared card kit (it lives at the head of this sheet, which is the first panel sheet the page links, so it comes before every panel's own rules
   and costs no second request: an @import in a sheet is fetched only after the sheet that holds it has arrived).
   The one card system every panel shares (Stock, Market, Crew, Bank, Travel, Codex, Quests, the dialogs that open from them): each panel's own sheet comes after
   it and only adds what is particular to that panel (its layout, its states).
   What lives here: how a surface looks, how an interactive surface answers a pointer, how a section is labelled, how a bar and a number read, and what an
   empty shelf looks like. Everything draws from the tokens in styles.css, so high contrast and the text sizes work for free, and motion is a 120 ms
   transition that the global reduced-motion rules switch off. The selectors start with :is(.db, dialog), which a panel's single-class rules cannot
   outrank by accident but a state class (.is-sel, .is-broken, .has) always can, because it is a second class on the same element. */

/* ---- a card never makes its column wider than the panel: a wide child scrolls or wraps inside its own box */
.db > * { min-width: 0; }
.tblwrap, [data-matrix] { max-width: 100%; overflow-x: auto; }

/* ---- numbers keep one width, so a figure that changes never moves the words around it */
:is(.db, dialog) { font-variant-numeric: tabular-nums; }

/* ---- a surface: panel2 with a faint light from above, a hairline on the lit edge and a small radius. Colour and border stay with the panel's own sheet. */
:is(.db, dialog) :is(
  .stk-strip, .stk-crate, .stk-away, .mkt-lead, .mkt-lot, .mkt-rrow,
  .cr-card, .cr-hire, .cr-upg, .cr-client, .cr-active, .cr-kind, .cr-lc,
  .bk-hero, .bk-prod, .bk-loan, .bk-exit, .bk-choice,
  .tv-sum, .tv-d, .tv-fr, .tv-crates, .tv-dest,
  .cx-card, .cx-ex, .qs-hero, .qs-skill, .qs-q, .qs-day, .qs-ach, .ac-cxcard, .ac-ex, .card
) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent 3.6rem);
  border-radius: 3px;
}
:is(.db, dialog) :is(.stk-strip, .stk-crate, .stk-away, .mkt-lead, .mkt-lot, .cr-card, .cr-upg, .cr-client, .bk-hero, .bk-prod, .bk-loan, .tv-sum, .tv-d, .tv-fr, .qs-hero, .qs-skill, .qs-q, .qs-day, .qs-ach) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent);
}

/* ---- icons share one rhythm: a small framed tile, goods a little larger than the rest.
   Many of the goods are dark emoji (a road bike, sunglasses, a black heart) that sink into any dark tile, and a lighter tile only makes that worse (the glyph and the tile
   meet in the middle), so the glyph carries its own thin light rim: it reads whatever its colour, and the tile stays the quiet frame it is. */
:is(.db, dialog) :is(.stk-ic, .mkt-ic, .cr-ic, .bk-ic, .tv-ic, .qs-ic, .cx-card .cx-ic) { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0; font-size: 1.35rem; line-height: 1; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, .85), 0 0 2px rgba(255, 255, 255, .3); }
:is(.db, dialog) :is(.stk-ic, .mkt-ic) { width: 2.8rem; height: 2.8rem; font-size: 1.7rem; }

/* ---- an interactive surface answers the pointer with a small lift; a disabled one does not */
:is(.db, dialog) :is(button.cx-card, .tv-dest, .cr-kind, .cr-lc, .mkt-z, .asset, .pick) { transition: transform .12s ease-out, border-color .12s, box-shadow .12s; }
:is(.db, dialog) :is(button.cx-card, .tv-dest, .cr-kind, .cr-lc):hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
:is(.db, dialog) :is(button.cx-card, .tv-dest, .cr-kind, .cr-lc):active:not(:disabled):not([aria-disabled="true"]) { transform: none; box-shadow: none; }

/* ---- a section label: a small gold square, then the name in the panel's mono capitals */
:is(.db, dialog) :is(.sect > h3, .cr-h3, .bk-h3, .qs-lab, .cx-sec h4) {
  padding-left: .9rem; background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-size: .38rem .38rem; background-position: 0 .42em;
}
:is(.db, dialog) .sect > h3 { background-position: 0 .35em; }
:is(.db, dialog) .cx-sec h4 { background-position: 0 .3em; }
:is(.db, dialog) .stk-ghead h3 { padding-left: 0; background-image: none; }

/* ---- a bar: a track with ten faint divisions, a fill with a little gloss and a hard end */
:is(.db, dialog) .bar { border-radius: 1px; background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--line) 65%, transparent) calc(10% - 1px) 10%); }
:is(.db, dialog) .bar > i { background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink) 26%, transparent), transparent 62%); box-shadow: 1px 0 0 var(--bg); }

/* ---- chips and badges: one height, one rhythm */
:is(.db, dialog) .chip { line-height: 1.5; }
:is(.db, dialog) .badge { line-height: 1.5; letter-spacing: .04em; }

/* ---- long names and big values wrap instead of pushing a card wider than its panel */
:is(.db, dialog) :is(.stk-name, .mkt-name, .mkt-rname, .cr-name, .cr-lane, .tv-dn, .qs-q h4, .qs-ach h4, .qs-skill h4, .cx-tx, .bk-ph h4, .cr-ln) { overflow-wrap: anywhere; min-width: 0; }
:is(.db, dialog) :is(.stk-vals dd, .cr-nums dd, .bk-stats dd, .bk-facts dd, .kv dd) { overflow-wrap: anywhere; min-width: 0; }

/* ---- an empty shelf: a symbol, a line that says what is missing and a line that says what comes next. Used wherever a list can be empty. */
.k-empty { list-style: none; display: grid; justify-items: center; gap: .3rem; padding: 1.1rem 1rem; text-align: center; color: var(--mute); border: 2px dashed var(--line); background: var(--panel2); border-radius: 3px; }
.k-empty > p { margin: 0; max-width: 24rem; overflow-wrap: anywhere; }
.k-empty-ic { font-size: 2.2rem; line-height: 1; }
.k-empty-line { padding: .8rem .9rem; border: 2px dashed var(--line); border-radius: 3px; text-align: center; }

/* ---- the focus ring sits outside a card's edge so a lifted card never hides it */
:is(.db, dialog) :is(button.cx-card, .tv-dest, .cr-kind, .cr-lc):focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { :is(.db, dialog) :is(button.cx-card, .tv-dest, .cr-kind, .cr-lc):hover:not(:disabled):not([aria-disabled="true"]) { transform: none; } }
:root[data-motion="reduce"] :is(.db, dialog) :is(button.cx-card, .tv-dest, .cr-kind, .cr-lc):hover:not(:disabled):not([aria-disabled="true"]) { transform: none; }
/* ==== end of the shared card kit; the Stock drawer's own rules follow */
/* ui-stock: the Stock drawer. Crates grouped by district. Text colours come from the tokens in styles.css; a district only lends its accent as --za. */
.stk-strip { display: grid; gap: .4rem; padding: .6rem .75rem; background: var(--panel2); border: 1px solid var(--line); }
.stk-strip-top { gap: .5rem; flex-wrap: nowrap; }
.stk-storetext { font-size: .82rem; white-space: nowrap; }
.stk-worth { margin: 0; font-size: .85rem; }
.stk-hint { margin: 0; padding: .1rem .2rem; }

/* what is ticked, and what can be done with it: it stays in view while the list scrolls */
.stk-selbar { position: sticky; top: 0; z-index: 2; display: grid; gap: .4rem; padding: .55rem .7rem; background: var(--panel); border: 2px solid var(--gold); box-shadow: var(--shadow); }
.stk-selbar p { margin: 0; }
.stk-acts { gap: .4rem; }

/* a district's group of crates: its name and accent, what it holds, and a way to tick it all */
.stk-ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .6rem; margin-bottom: .5rem; padding: 0 0 .25rem .5rem; border-bottom: 1px dashed var(--line); border-left: 6px solid var(--za, var(--cyan)); }
.stk-ghead h3 { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.stk-gtools { gap: .4rem; }
.stk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

/* one crate */
.stk-crate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; padding: .6rem .7rem; background: var(--panel2); border: 2px solid var(--line); min-width: 0; }
.stk-ic { font-size: 2.2rem; line-height: 1; padding-top: .15rem; }
.stk-body { min-width: 0; display: grid; gap: .4rem; }
.stk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .5rem; }
.stk-name { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .95rem; font-weight: 700; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.stk-name input { flex: none; }
.stk-vals { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; margin: 0; font-size: .86rem; }
.stk-vals dt { color: var(--mute); }
.stk-vals dd { margin: 0; text-align: right; }
.stk-read { margin: 0; padding-left: .55rem; border-left: 3px solid var(--line); font-size: .82rem; }
.stk-warnline { border-left-color: var(--gold); }
.stk-fake { border-left-color: var(--red); color: var(--ink); }
.stk-chips { gap: .3rem; }
.stk-fix { margin: 0; }
/* the bench will not open on the cash in hand: the reason stands beside the (disabled) Repair button, in the same gold the other warnings use */
.stk-fixwhy { margin: 0; padding-left: .55rem; border-left: 3px solid var(--gold); color: var(--ink); overflow-wrap: anywhere; }
.stk-crate .btn { justify-self: start; }
.stk-crate.is-broken { border-top: 6px solid var(--red); background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 125, 117, .06) 12px 24px); }
.stk-crate.is-fake { border-style: dashed; border-color: var(--red); }
.stk-crate.is-sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
:root[data-contrast="high"] .stk-crate.is-broken { background-image: none; }

/* nothing here yet, and what is away from the shelf */
.stk-empty { display: grid; justify-items: center; gap: .45rem; padding: 1.4rem 1rem; text-align: center; border: 2px dashed var(--line); }
.stk-empty h3 { margin: 0; font-size: 1.05rem; }
.stk-empty p { margin: 0; max-width: 24rem; }
.stk-empty-ic { font-size: 3rem; line-height: 1; }
.stk-away { display: grid; gap: .3rem; padding: .5rem .7rem; background: var(--panel2); border: 1px solid var(--line); }
.stk-away p { margin: 0; }