/* ══════════════════════════════════════════════════════════════════════════
   NUKKAD'S OWN DESIGN SYSTEM, inside the Things wing.

   Read from the live repository (Marketplace, claude/initial-commit-build-order
   -o8nbev @ 29376ec — its `main` is a stale Maa.se seed):
   src/design/tokens.css, "the only place raw values live", and
   src/design/base.css. That law is kept here: everything below the token block
   goes through a var().

   ITS VOICE. Governor, 2026-08-07: *"you are using ember again… that is my
   favourite colour… But the font style, it just looks… can you make it a
   little distinctive? That's the point. It just looks boring."* The diagnosis
   was exact — Nukkad had a colour and no voice. FRAUNCES, self-hosted, two
   weights, FOR DISPLAY ONLY: brand, screen titles, book titles, section
   headings. Body, prices, meta and every control stay in the system sans,
   which is what the 2026-08-06 legibility ruling bought and is not spent
   again on decoration.

   ITS LEGIBILITY SCALE. Governor, 2026-08-06, of the category tabs:
   "Legibility is an issue. It looks very small." 59 of its 74 type sizes sat
   at 14px or below; every step moved up and nothing may now be smaller than
   --fs-tiny, which is 12px.

   SCOPED to `.w-nukkad`.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

.w-nukkad {
  --n-font: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-display: "Fraunces", Georgia, "Noto Serif", serif;
  --bg: #ffffff;
  --surface: #f4f4f2;
  --line: #e5e5e2;
  --line-dash: #c9c9c4;
  --text: #171717;
  --muted: #6e6e6e;
  /* THE ACCENT IS TWO THINGS, and the dark theme forced them apart: a filled
     accent surface keeps the brand colour in both themes because its contrast
     is self-contained, and accent-as-ink gets its own token that lifts. */
  --accent: #b3491f;
  --accent-ink: #ffffff;
  --accent-text: #b3491f;
  --accent-wash: rgba(179, 73, 31, 0.07);
  --ok: #1a7f4b;
  --ph-ink: rgba(0, 0, 0, 0.46);
  --wash-sand: #e8e2d9; --wash-sage: #dde5e0; --wash-clay: #e6ded9;
  --wash-steel: #dee3e8; --wash-olive: #e2e6dc; --wash-rose: #e8e0da;

  /* THE SHELF IS A BOARD, NOT A BAR. Governor, 2026-08-07: "If you want to
     make a shelf, then make the shelf look realistic. Don't put a golden bar
     and pretend that it is a shelf… do not do the bare minimum." Five
     surfaces, in sawn teak — browner and darker than the accent, so the board
     reads as timber and never as brand. */
  --shelf-top: #b98455; --shelf-lip: #d6a878; --shelf-face: #a4653c;
  --shelf-face-low: #7a4523; --shelf-edge: #4e2b14;
  --shelf-shade: rgba(60, 32, 12, 0.24);
  --radius: 10px; --radius-sm: 6px; --pad: 16px; --gap: 10px;
  --fs-brand: 22px; --fs-title-lg: 19px; --fs-body: 16px; --fs-price: 18px;
  --fs-card-title: 15px; --fs-meta: 13px; --fs-chip: 15px; --fs-small: 14px; --fs-tiny: 12px;
  --shadow-float: 0 2px 10px rgba(0, 0, 0, 0.18);
  /* Libby's "Wait list" tag, in Nukkad's words — it runs along the FOOT of a
     cover, because in the corner it collided with the title on one book and
     with the author on another. */
  --out-veil: rgba(0, 0, 0, 0.55);
  --spine-band: rgba(0, 0, 0, 0.22);
  --spine-drop: 0 1px 2px rgba(0, 0, 0, 0.28);

  background: var(--bg); color: var(--text);
  font-family: var(--n-font); font-size: var(--fs-body); line-height: 1.4;
  padding-bottom: 24px;
}
.w-nukkad * { box-sizing: border-box; }
.w-nukkad button { font: inherit; color: inherit; background: none; border: none; text-align: inherit; cursor: pointer; }
.w-nukkad input, .w-nukkad textarea, .w-nukkad select { font: inherit; color: var(--text); }
/* One class, so a heading cannot be set in the display face by accident and
   cannot be missed where it belongs. */
.w-nukkad .display { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ── the masthead and the search ── */
.w-nukkad .header { padding: 14px var(--pad) 10px; display: flex; align-items: center;
  justify-content: space-between; }
.w-nukkad .header .brand { font-family: var(--font-display); font-size: var(--fs-brand);
  font-weight: 700; letter-spacing: -0.02em; }
.w-nukkad .header .cluster { font-size: var(--fs-meta); color: var(--muted); }
.w-nukkad .search { margin: 0 var(--pad) 10px; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: var(--radius); padding: 11px 12px; }
.w-nukkad .search input { flex: 1; background: none; border: none; outline: none; font-size: var(--fs-body); }
.w-nukkad .search input::placeholder { color: var(--muted); }

/* ── the facets ── */
.w-nukkad .chips { display: flex; gap: 8px; padding: 0 var(--pad) 12px; overflow-x: auto; scrollbar-width: none; }
.w-nukkad .chips::-webkit-scrollbar { display: none; }
.w-nukkad .chip { flex: none; font-size: var(--fs-chip); padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); }
.w-nukkad .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ── the board: A GRID OF COVERS, three across ── */
/* `align-items: start`, because the cards are BUTTONS. A grid cell stretches
   by default, and a button stretched taller than its content centres that
   content vertically — so a card beside one with a two-line title sat twenty
   points lower than it, picture and price and all. Two cards in one row that
   do not start on the same line read as a broken grid, and the cause is
   invisible in the markup. */
.w-nukkad .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; gap: 14px 12px; padding: 0 var(--pad); }
.w-nukkad .board { padding-bottom: 24px; }
.w-nukkad .card { display: block; width: 100%; text-align: left; }
.w-nukkad .ph { aspect-ratio: 1; border-radius: var(--radius); display: flex;
  align-items: center; justify-content: center; }
.w-nukkad .ph svg { stroke: var(--ph-ink); stroke-width: 1.6; fill: none; width: 46px; height: 46px; }
/* EACH ON ITS OWN LINE. These are spans, so `margin-top` on an inline box
   does nothing vertically and the three ran together as one paragraph:
   "WantedA used study tableKavya · Furniture". Nukkad draws them as three
   stacked divs; carried here by making the spans block. */
.w-nukkad .card .price { display: block; font-size: var(--fs-price); font-weight: 700; margin-top: 8px; }
.w-nukkad .price .unit { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); }
.w-nukkad .card .title { display: block; font-size: var(--fs-card-title); margin-top: 1px; }
.w-nukkad .card .meta { display: block; font-size: var(--fs-meta); color: var(--muted); margin-top: 2px; }

/* ── controls ── */
.w-nukkad .btn { display: block; width: 100%; text-align: center; padding: 14px 0;
  border-radius: var(--radius); font-size: var(--fs-body); font-weight: 700; }
.w-nukkad .btn.solid { background: var(--accent); color: var(--accent-ink); }
.w-nukkad .btn.ghost { border: 1.5px solid var(--text); }
.w-nukkad .btn.busy { opacity: .6; pointer-events: none; }
.w-nukkad .field { display: block; width: 100%; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 12px; font-size: var(--fs-body);
  background: var(--bg); outline: none; }
.w-nukkad .field::placeholder { color: var(--muted); }
.w-nukkad textarea.field { min-height: 92px; resize: vertical; }
.w-nukkad .label { display: block; font-size: var(--fs-small); font-weight: 600; margin: 16px 0 6px; }
.w-nukkad .muted { color: var(--muted); }
.w-nukkad .avatar { border-radius: 50%; background: var(--surface); display: flex;
  align-items: center; justify-content: center; font-weight: 700; color: var(--muted); flex: none;
  width: 36px; height: 36px; }
/* THE SEARCH FURNITURE — the road's memory, the road's own words, and the one
   control the teardown left standing. Nukkad's own, carried whole from its
   `base.css` and `design/Sift.tsx`. `.srow` had been left defined here with no
   caller after the seller card became `.sellercard`; this is what it is in
   Nukkad, and it has callers again. */
.w-nukkad .srows { padding: 0 var(--pad); }
.w-nukkad .srow { display: flex; align-items: center; gap: 12px; width: 100%;
  /* 44 by arithmetic: 13 + 18 + 13. A floor nobody has to remember. */
  min-height: 44px; padding: 13px 0; border-bottom: 1px solid var(--line);
  text-align: left; }
.w-nukkad .srow:last-child { border-bottom: 0; }
.w-nukkad .srow svg { width: 17px; height: 17px; stroke: var(--muted); stroke-width: 1.6;
  fill: none; flex: none; }
.w-nukkad .srow .t { flex: 1; font-size: 15px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.w-nukkad .srow .t b { font-weight: 700; }
.w-nukkad .srow .n { font-size: var(--fs-meta); color: var(--muted); flex: none; }
.w-nukkad .shead { display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 var(--pad); }
.w-nukkad .shead h2 { font-size: 13px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em; text-transform: uppercase; margin: 0; }
/* NO `.tap` ANYWHERE IN HERE, which is Nukkad's own note: negative margins buy
   a 44-point box out of the neighbour's space, and every control here has a
   neighbour — its audit found one overlapping the row beneath it by 44 points
   and the sort control overlapping a listing card by 67. Height is taken
   honestly instead. */
.w-nukkad .sclear { display: flex; align-items: center; min-height: 44px;
  padding-left: 12px; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.w-nukkad .sforget { display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; flex: none; color: var(--muted);
  font-size: 18px; line-height: 1; }
/* The count sits left because "how many" is the first question a search
   answers, and this board never answered it: a filtered screen and a quiet
   road looked identical. */
.w-nukkad .tally { display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 var(--pad) 6px; font-size: 13px; color: var(--muted); }
.w-nukkad .tally .order { display: flex; align-items: center; min-height: 44px;
  padding-left: 12px; color: var(--text); font-weight: 700; font-size: 13px; }
.w-nukkad .orders { padding: 0 var(--pad) 10px; }
.w-nukkad .orders button { display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 44px; padding: 11px 0; font-size: 15px; text-align: left;
  border-bottom: 1px solid var(--line); }
.w-nukkad .orders button:last-child { border-bottom: 0; }
.w-nukkad .orders .on { font-weight: 700; }
.w-nukkad .orders .tick { color: var(--accent-text); font-weight: 700; }
/* The way back out of a search. 44 by 44, and the negative margin is exactly
   the row's own padding, so the field does not grow by a point when a letter
   is typed and nothing jumps. */
.w-nukkad .search .sx { min-width: 44px; min-height: 44px; margin: -12px 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 19px; line-height: 1; flex: none; }
.w-nukkad .sect { font-family: var(--font-display); font-size: var(--fs-title-lg); font-weight: 700;
  letter-spacing: -0.01em; padding: 18px var(--pad) 8px; display: flex;
  align-items: baseline; justify-content: space-between; gap: 12px; }
.w-nukkad .sect .n { font-family: var(--n-font); font-size: var(--fs-meta); color: var(--muted); font-weight: 400; }
.w-nukkad .lead { padding: 0 var(--pad) 10px; font-size: var(--fs-small); color: var(--muted); }
/* NOT `.pad`. Product-wide `.pad` is a 16px SPACER (`app.css`: `.pad{height:16px}`),
   and a wing page that used it as a container got a 16-pixel-tall box whose
   children spilled over everything under them — the whole listing page drew on
   top of itself. Found by looking at the screenshot; gated in wing-design.js
   check 8, which refuses any `.pad` that is not empty. */
.w-nukkad .npad { padding: 0 var(--pad); }

/* ── THE SHELF BOARD ─────────────────────────────────────────────────────────
   Five surfaces, because the eye needs all five to believe it: the lit upper
   face, the bright arris where light breaks over the front corner, the front
   edge falling into shadow, the dark underside, and what the board throws down
   the wall. Books drop a contact shadow onto the top face — that contact is
   what stops a cover from floating, and it does most of the work.
   It is drawn WIDER than the books it carries: a board that ends exactly where
   its books end reads as a rule under a row, not as furniture. */
.w-nukkad .shelfrow { margin-bottom: 22px; }
.w-nukkad .shelfcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; padding: 0 var(--pad); }
.w-nukkad .shelfcols.stand { align-items: end; margin-bottom: -1px; }
.w-nukkad .shelfcols.caps { margin-top: 8px; }
.w-nukkad .plank { position: relative; margin: 0 6px; }
.w-nukkad .plank-top { height: 3px; border-radius: 2px 2px 0 0;
  background: linear-gradient(var(--shelf-top), var(--shelf-lip)); }
.w-nukkad .plank-face { position: relative; height: 11px; overflow: hidden; border-radius: 0 0 2px 2px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 7%,
      rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, 0.22)),
    linear-gradient(var(--shelf-lip) 0, var(--shelf-face) 30%,
      var(--shelf-face-low) 88%, var(--shelf-edge) 100%); }
.w-nukkad .plank-face::after { content: ""; position: absolute; inset: 0;
  background: url("art/shelf-grain.svg") 0 0 / 100% 100% no-repeat;
  mix-blend-mode: multiply; opacity: 0.62; pointer-events: none; }
.w-nukkad .plank-shade { height: 10px; margin: 0 3px;
  background: linear-gradient(var(--shelf-shade), rgba(0, 0, 0, 0)); }

/* THE DRAWN COVER IS NOT A PLACEHOLDER. Benchmarked against Libby and Google
   Play Books, which both draw a real cover for entries with no scan: a solid
   cloth colour, the title set large, the author small at the foot, and a
   darker band down the binding edge. That is what a hardback without its
   jacket looks like, and it sits beside real covers without reading as a hole
   in the row. */
.w-nukkad .spine { position: relative; width: 100%; aspect-ratio: 2 / 3;
  border-radius: 3px; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; padding: 10px 9px 8px 13px; color: var(--accent-ink);
  box-shadow: var(--spine-drop); }
.w-nukkad .spine::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--spine-band); }
.w-nukkad .spine .st { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-card-title);
  line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.w-nukkad .spine .sa { font-size: var(--fs-tiny); opacity: .85; }
.w-nukkad .spine.out { opacity: .6; }
.w-nukkad .outtag { position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  background: var(--out-veil); color: var(--accent-ink); font-size: var(--fs-tiny); font-weight: 700; padding: 3px 0; }
.w-nukkad .addtile { width: 100%; aspect-ratio: 2 / 3; border-radius: 3px;
  border: 1.5px dashed var(--accent-text); color: var(--accent-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--accent-wash); }
.w-nukkad .addtile .plus { font-size: 26px; font-weight: 300; line-height: 1; }
.w-nukkad .addtile .lbl { font-size: var(--fs-meta); font-weight: 700; }
.w-nukkad .cap { display: block; width: 100%; text-align: left; min-height: 44px;
  padding-bottom: 7px; margin-bottom: -7px; }
.w-nukkad .cap .ct { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700;
  line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-nukkad .cap .co { display: block; font-size: var(--fs-tiny); color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── THE CONVERSATION, which is the act a marketplace exists for ──────────
   Nukkad draws this one screen almost entirely in inline styles; the values
   here are its, moved into classes because this product has no other way to
   carry them. The send button is 44 and not 40 for its own stated reason:
   "the most-pressed control in the whole product — every message anyone ever
   sends goes through it — and it was the one under the floor." */
.w-nukkad .talkstrip { display: flex; align-items: center; gap: var(--gap);
  padding: 10px var(--pad); background: var(--surface); }
.w-nukkad .talkstrip .t { flex: 1; font-size: var(--fs-small); min-width: 0; }
.w-nukkad .talkstrip .p { font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.w-nukkad .bubs { display: flex; flex-direction: column; gap: 8px;
  padding: var(--pad); }
.w-nukkad .bub { max-width: 75%; padding: 9px 12px; font-size: 15px;
  border-radius: 14px; align-self: flex-start; background: var(--surface);
  color: var(--text); border-bottom-left-radius: 4px; }
.w-nukkad .bub.mine { align-self: flex-end; background: var(--accent);
  color: var(--accent-ink); border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.w-nukkad .bub .at { font-size: var(--fs-tiny); opacity: 0.65; margin-top: 3px; }
.w-nukkad .bub.mine .at { text-align: right; }
.w-nukkad .compose { display: flex; align-items: center; gap: var(--gap);
  padding: 10px var(--pad) 20px; border-top: 1px solid var(--line); }
.w-nukkad .composein { flex: 1; background: var(--surface); border: none;
  border-radius: 999px; padding: 11px 14px; font-size: 15px; color: var(--text); }
.w-nukkad .sendb { width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); flex: none; border: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px; }
.w-nukkad .trow { width: 100%; display: flex; gap: 12px; align-items: center;
  padding: 13px var(--pad); border-bottom: 1px solid var(--line);
  background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.w-nukkad .trow .who { display: flex; justify-content: space-between; gap: 8px; }
.w-nukkad .trow .nm { font-weight: 700; font-size: var(--fs-body); overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
/* WAITING, SAID TWICE — weight and a dot. Colour alone would be invisible to a
   resident who cannot separate the two, and these neighbours are largely
   35-65 reading at arm's length. Nukkad's own note, carried. */
.w-nukkad .trow .last { font-size: var(--fs-small); margin-top: 1px; color: var(--muted);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w-nukkad .trow .last.on { font-weight: 700; color: var(--text); }
.w-nukkad .trow .side { flex: 1; min-width: 0; }
.w-nukkad .tdot { display: inline-block; width: 12px; height: 12px; border-radius: 6px;
  background: var(--accent); border: 2px solid var(--bg); vertical-align: middle; }

/* ── ONE LISTING ──────────────────────────────────────────────────────────
   The picture is 320 tall and full-bleed, which is the height OLX and
   Facebook Marketplace both land on: tall enough to decide by, short enough
   that the price is on the first screen with it. */
.w-nukkad .lot { height: 320px; display: flex; align-items: center;
  justify-content: center; }
/* THE SELLER CARD IS A BOX, not a row: Nukkad draws it bordered and inset,
   because on this page it is a card you may tap into, not one of a list of
   rows. `.srow` is the list row and stays that. */
.w-nukkad .sellercard { display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; margin-top: 18px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); }
.w-nukkad .sellercard .avatar { width: 42px; height: 42px; flex: none; }
.w-nukkad .lot svg { stroke: var(--ph-ink); stroke-width: 1.6; fill: none;
  width: 110px; height: 110px; }

/* ── A CONSEQUENCE NAMED IN NUKKAD'S OWN VOICE ────────────────────────────
   `.conseq` is THIS product's callout — a paper panel with an ember bar — and
   it is right where it belongs, on this product's review sheets. Dropped into
   a wing it is a stranger's component sitting in the middle of a sibling's
   page, which is the exact drift the governor named on 2026-09-22. Nukkad
   states this kind of thing as quiet running text (its own `deal-line`). So
   the class stays — it is the marker the L-A2 promise gate reads, and a
   promise the gate cannot see is a promise nobody is keeping — and the panel
   comes off. */
.w-nukkad .lead.conseq { background: none; border: 0; border-radius: 0;
  /* the top padding is what Nukkad's own `under-bar` gave the line above its
     deal line; without it the sentence sat touching the seller card */
  margin: 0; padding: 14px var(--pad) 10px;
  font-size: var(--fs-small); color: var(--muted); }

/* ── THE ONE PHOTOGRAPH (0030, GD-FORK-026 (3)) ───────────────────────────
   It fills the placeholder it replaces, edge to edge, cropped rather than
   letterboxed — the incumbents' grammar, and Nukkad's own `objectFit: cover`.
   The wash behind it is what shows while it loads on a slow line. */
.w-nukkad .ph { overflow: hidden; }
.w-nukkad .ph .snap, .w-nukkad .lot .snap { width: 100%; height: 100%;
  object-fit: cover; display: block; }
.w-nukkad .lot { overflow: hidden; }