/* ---- nullmarket.onion, re-laid-out 2026-09-18 — the shop got pictures ----------------------
     Reported by the author: six shelves and ~20 rows of mono prose is a wall of text you scroll,
     not a shop you browse, and the three things whose entire value is how they LOOK (wallpapers,
     typefaces, accent themes) could not show it.

     ⚠️ STILL ▤'s SHOP. The ugliness is characterisation, so the brief was legibility and not
     friendliness: no rounded cards, no product photography, no second colour. What this adds is a
     parts-catalogue PLATE — a hard-edged square of line art beside each item — and a two-column
     grid so a shelf can be scanned instead of read.

     A NEW FILE rather than an edit to 18-gaggle.css, which is byte-checked against
     v0.9-singlefile: `split-css --check` rebuilds the tagged <style> block from the frozen slices,
     so editing one fails, and a file the tag never had cannot rejoin it either. Listed in ADDED,
     and numbered last because the numbers ARE the cascade order. ---- */

  /* Two columns at a sensible width, one when the window is narrow. `auto-fill` rather than a fixed
     count: Chrone is a resizable window inside a fake OS, so the shop has no idea how wide it is. */
  .nm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));
    gap:1px;background:#17171a;border-top:1px solid #17171a}
  /* The grid gap IS the rule between items — 1px of the container showing through — so a card needs
     no border of its own and two adjacent cards can never double it up.
     A COLUMN, not a row: the 44px thumbnail was too small to sell anything, so the art gets a
     full-width band across the top of the card and the words sit under it. That is the whole change
     between the first pass and this one, and it is why the plate is now worth looking at. */
  .nm-grid .nm-it{display:flex;flex-direction:column;gap:0;padding:0;
    border-top:0;background:#0b0b0c;position:relative}
  /* Hover lifts the card out of the sheet: a brass top edge and a faintly warmer ground. Nothing
     moves — a shop that jumps under the cursor is a shop you misclick in. */
  .nm-grid .nm-it::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:#b3a25a;opacity:0;transition:opacity .12s}
  .nm-grid .nm-it:hover{background:#101012}
  .nm-grid .nm-it:hover::before{opacity:.9}
  .nm-grid .nm-b{display:flex;flex-direction:column;flex:1;min-width:0;padding:11px 14px 13px}
  .nm-grid .nm-nm{font-size:13.5px;letter-spacing:.01em;color:#f1ece0}
  .nm-grid .nm-ds{margin-top:5px;color:#8d8d85}
  /* Price and button on one line at the foot, pinned to the bottom so a two-line and a four-line
     card still present the same target in the same place. `margin-top:auto` is what does it. */
  .nm-foot-row{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:11px}
  /* The price is the thing being decided on, so it is the biggest text in the card. */
  .nm-grid .nm-pr{padding-top:0;font-size:14px;color:#e8e4d8;letter-spacing:.02em}
  .nm-foot-row .nm-buy{margin-left:auto}
  .nm-foot-row .nm-own{margin-left:auto;padding:0}
  /* An owned item stays listed — the shelf is also a record of what you have — but stops competing
     for attention with the things still for sale. Dimming the ART rather than the whole card keeps
     the name readable, which a 0.62 opacity card did not. */
  .nm-it.is-own .nm-plate{opacity:.42}
  .nm-it.is-own .nm-nm{color:#b9b4a8}
  .nm-it.is-own:hover .nm-plate{opacity:.8}

  /* THE PLATE, now a band across the top of the card: 92px, hard-edged, its own dark ground so the
     art reads whatever the card is doing underneath it. Bottom border only — the card's own edges are
     the grid gap, and a full border here would double up against it. */
  .nm-plate{width:100%;height:92px;box-sizing:border-box;flex:0 0 auto;
    border:0;border-bottom:1px solid #1e1e21;background:#0d0d0e;overflow:hidden;
    display:flex;align-items:center;justify-content:center;position:relative}
  /* A wallpaper or a theme fills the band edge to edge; the line-art and specimen plates are centred
     objects on it, which is why only those two get a size. */
  .nm-art svg{width:56px;height:56px}
  .nm-iso svg{width:62px;height:62px}
  .nm-art svg :is(path,circle,rect,line,ellipse){fill:none;stroke:#b3a25a;stroke-width:1.6;
    stroke-linecap:square;vector-effect:non-scaling-stroke}
  /* Line art gets a faint brass wash behind it so the band is not an empty rectangle. */
  .nm-art::after{content:"";position:absolute;inset:0;
    background:radial-gradient(120px 60px at 50% 55%,rgba(179,162,90,.09),transparent 70%)}
  /* A typeface sells itself: the specimen is set in the real bundled face, and shows 0O1l because
     these are terminal faces and telling those four apart is the whole job. Bigger now that there is
     room for it — at 15px it was a label, at 30px it is a specimen. */
  .nm-spec{flex-direction:column;gap:2px;color:#f1ece0;font-size:30px;line-height:1}
  .nm-spec small{font-size:13px;color:#8d8d85;letter-spacing:.06em}
  /* A theme plate is the real accent against the real desktop colour, split on the diagonal so both
     are judged at once — an accent is only ever seen ON that background. */
  .nm-sw{border-bottom-color:#33332c}
  /* An icon pack shows three of its own sprites, at the size a dock renders them. */
  .nm-pack{gap:10px;padding:0}
  .nm-pack svg{width:38px;height:38px;flex:0 0 auto}

  /* The section rules and stat lines belong to the grid now, not to a flat list. */
  .nmkt .nm-sec{padding:20px 16px 7px}
  .nmkt .nm-stat{padding:10px 16px}

  @media (max-width:520px){
    .nm-grid{grid-template-columns:1fr}
  }

  /* ---- Core (phone): the flat, in isometric --------------------------------------------------
     The furniture shelf needed somewhere for furniture to BE. This is the smart-home app a tenant
     would have, and the only diegetic place a phone would show somebody their own rooms. */
  .cr{padding:10px 12px 20px;overflow-y:auto;height:100%;box-sizing:border-box}
  .cr-head{display:flex;align-items:baseline;gap:8px;font-size:11px;color:#7b8794;
    padding:2px 2px 8px;border-bottom:1px solid #1b2028}
  .cr-head b{margin-left:auto;color:#e7eef6;font-weight:600;font-variant-numeric:tabular-nums}
  /* The room itself. A dark plate rather than the phone's own background, so the drawing reads as a
     view of somewhere else — which is the whole point of it being on a phone. */
  .cr-room{display:block;width:100%;height:auto;margin:10px 0 6px;
    background:#0b0d11;border:1px solid #1b2028;border-radius:10px}
  .cr-cap{margin:0 0 10px;font-size:12px;line-height:1.6;color:#9fb0c0;text-align:center}
  /* The checklist is the part that makes it a collection rather than a picture — an unowned piece is
     named and dim, so the player can see what the room is still missing. */
  .cr-list{display:flex;flex-wrap:wrap;gap:5px}
  .cr-it{font-size:10.5px;padding:3px 7px;border-radius:999px;background:#12161c;color:#6c7885;
    border:1px solid #1e242c}
  .cr-it.on{color:#bfe8d2;border-color:#2c4a3a;background:#101b16}
  .cr-foot{margin:12px 2px 0;font-size:11px;line-height:1.6;color:#66727f}
  /* Isometric plates in the shop get a touch more room than the line-art ones: the projection is
     wider than it is tall, so a 34px box clips the far corner of a desk. */
  .nm-iso svg{width:38px;height:38px}

  /* ---- chrome: the header and the section rules -------------------------------------------------
     The shop is long now — six sections, ~30 cards — so the two things a player needs constantly
     (what they can spend, and where they are) have to survive scrolling. */
  /* Sticky, because the balance IS the decision on every card below it and scrolling up to check it
     is the sort of friction that stops people buying. `position:sticky` and not a fixed bar: this
     renders inside a resizable fake-OS window, and anything fixed would anchor to the viewport
     rather than to Chrone. */
  .nmkt .nm-top{position:sticky;top:0;z-index:3;
    background:linear-gradient(#111112,#0d0d0e);border-bottom:1px solid #26261f}
  .nmkt .nm-bal b{font-size:14px;letter-spacing:.02em}
  /* A section heading gets a brass tick and a hairline that runs to the edge, so a shelf reads as a
     shelf rather than as a slightly smaller line of text. */
  .nmkt .nm-sec{display:flex;align-items:center;gap:10px;color:#8a7f52;
    padding:22px 16px 9px;font-size:10px}
  .nmkt .nm-sec::before{content:"";width:3px;height:11px;background:#b3a25a;opacity:.8;flex:0 0 auto}
  .nmkt .nm-sec::after{content:"";flex:1;height:1px;background:#20201c}
  /* The stat line under a heading is the shelf's own state (suspicion, tools installed, rent). It
     sits on a slightly raised ground so it reads as a note about the shelf and not as a card. */
  .nmkt .nm-stat{background:#0e0e10;border-top:1px solid #1a1a1d;border-bottom:1px solid #1a1a1d}
  /* The buy control: brass on hover rather than merely brighter, so the affordable thing is obvious
     at a glance on a page this long. */
  .nm-buy{transition:background .12s,border-color .12s,color .12s}
  .nm-buy:hover{background:#1f1c12;border-color:#b3a25a}

  /* Furniture plates are ART, not icons: a shaded isometric drawing per piece, on its own slightly
     lifted ground so the object sits in a space rather than on the card. `object-fit:contain` keeps
     a wide piece (the bed) and a tall one (the lamp) the same visual weight. */
  .nm-fur{background:radial-gradient(120px 70px at 50% 72%,#15151a,#0c0c0e 78%)}
  /* FILL THE BAND. At a fixed 86px the pieces read as small dark objects in a large empty
     rectangle; `100%` with `contain` gives a wide piece (the bed) and a tall one (the lamp) the same
     visual weight while both actually use the space. */
  .nm-fur img{width:100%;height:100%;object-fit:contain;display:block;padding:4px;box-sizing:border-box}
  /* Furniture gets a taller band than the rest: an isometric object is wider than it is tall, so at
     92px it was a small thing in a big rectangle even filling the width. */
  .nm-fur{height:118px}