/* catalog/app.css — the app's OWN stylesheet. It sits BENEATH the shell's
   shell.css and adds LAYOUT rules only, from the shell's own tokens.

   It may NEVER override a shell token: a second token set is a second design
   system, and two of those in one suite is how "the same app in two colours"
   starts. Do not put shell chrome rules here. If a shell-rendered element
   needs a rule, that rule belongs in shell.css at HQ's word — putting it here
   is the copying scar this repo exists to end.

   K-1: the book's rows and Add's form, PHONE FIRST. A row holds the name and
   its quiet line on the left, the price (tabular figures) and its one pill on
   the right; at 320-375 px it fits without a sideways scroll. */

/* the screen's heading row: the heading and its one action */
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.cat-head h1 { margin: 0; }

/* lists drawn as <ul>: no bullets, no indent */
ul.cat-list { list-style: none; margin: var(--sp-2) 0 var(--sp-4); padding: 0; }
ul.cat-list > li { margin: 0; }
ul.cat-list > li + li { border-top: 1px solid var(--border); }
ul.cat-list a.q-row { color: inherit; text-decoration: none; }

/* one item row: the name side shrinks and wraps; the price side never does */
.cat-row .q-main { flex: 1 1 auto; }
.cat-row .q-text, .cat-picked .q-text { display: block; }
.cat-row .q-meta, .cat-picked .q-meta { display: block; overflow-wrap: anywhere; }
.cat-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); text-align: right; }
.cat-price { font-weight: 700; white-space: nowrap; }
.cat-side .pill { white-space: nowrap; }

/* the search and the kind pick: one column on a phone, one row when there is room */
.cat-find { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-3); align-items: end; margin-top: var(--sp-3); }
.cat-find .field { margin-bottom: var(--sp-2); min-width: 0; }
.cat-find .btn { margin-bottom: var(--sp-2); justify-self: start; }
@media (min-width: 640px) {
  .cat-find { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
}

.cat-said { margin: var(--sp-2) 0 0; font-weight: 650; }
.cat-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }

/* Add's form: one column; the boxes as wide as the screen */
.cat-add { margin-top: var(--sp-3); max-width: 36rem; }
.cat-add .field { min-width: 0; }
.cat-add .input { width: 100%; box-sizing: border-box; }

/* the read-back: label over value, so a long item name never forces a scroll */
.cat-readback { margin-top: var(--sp-3); }
.cat-readback h2 { margin: 0 0 var(--sp-2); }
.cat-readback dl { margin: 0; }
.cat-readback dt { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); }
.cat-readback dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }

/* K-2: Import. The paste box takes the sheet's long lines without wrapping
   (it scrolls inside itself, never the page); the read-back's counts are one
   wrapping line of links to their groups; a group's rows are the book's. */
.imp-paste { font-size: var(--fs-xs); white-space: pre; overflow-x: auto; }
.imp-source { margin: var(--sp-2) 0 0; overflow-wrap: anywhere; }
ul.imp-counts { list-style: none; margin: var(--sp-2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
ul.imp-counts > li { margin: 0; }
.imp-group { margin-top: var(--sp-3); }
.imp-group h3 { margin: 0 0 var(--sp-1); }
.imp-group > summary { cursor: pointer; }
.imp-group > summary h3 { display: inline; }
.imp-why { color: var(--danger); }
.cat-from { display: block; }

/* K-3: Export. A row is the book's; the Download form sits at its right edge like a price, and
   the sha256 on the last-export line wraps inside the row (q-meta wraps anywhere), never the page. */
.exp-row form { margin: 0; }