/* ============================================================================================
   MONO — the typed room. Paint, and nothing under it.
   ============================================================================================
   THIS FILE STATES NO SIZE, NO SPACE AND NO POSITION. Not one padding, margin, grid, inset or
   gap; no `--c-u`, no `--c-gap`, no `--c-rhythm`, no `--c-gut`, no `--c-measure`. Delete it and
   the page is the same page, in grey. `lib/designs/paint.test.js` is that sentence as a test.

   WHAT IT IS. An architect's specimen sheet: everything set in monospace, everything square,
   everything hairline. Two faces and no third — Martian Mono, which is wide and mechanical, for
   anything a business writes, and JetBrains Mono, which is narrow and quiet, for anything a
   system says. Paper is white and the bands are a warm grey; the ink is a near-black that has
   never been pure. One ochre, and it lands on the thing you press.

   WHAT IT REFUSES. Round corners — nothing here has a radius except the small chips the source
   drew as pills, and even those are the exception the doc names. Shadows — the system is flat and
   elevation is a hairline, never a blur. A second family. Colour on a surface: every band is
   paper, warm grey or ink, and the ochre is never a ground.

   SOURCE: a token specimen taken off an architect's site in light mode only. Every dark value
   here is DECIDED, and decided as its own scheme rather than as an inversion — a warm near-black
   paper, because a pure black under a warm grey ramp reads as a hole.
   ============================================================================================ */

/* ── THE TWO RAMPS ─────────────────────────────────────────────────────────────────────────
   Warm greys, both rooms. The light ramp is the one that was sampled; the dark ramp is built to
   the same warmth rather than inverted, so a photograph sits in either without changing colour.

   Neither ramp is the other one upside down and they do not have the same number of steps: paper
   makes a surface by SINKING to the warm grey, and the dark room makes one by LIFTING out of the
   near-black. That is the one structural fact about the palette and everything else follows it. */
:root, :is(#clay-page,#design-sheets).mono{
  --accent:#C4881A;                      /* the ochre jacket — the one live variable */

  /* the light room — white · warm grey ramp, sampled */
  --pp-000:#FFFFFF;                      /* page, and every surface that is not a band */
  --pp-050:#FAF9F8;                      /* raised */
  --pp-100:#F4F3F1;                      /* the warm grey band, and a sunken surface */
  --pp-150:#EDEBE8;                      /* sunken, one step further */
  --pp-200:#E4E1DC;                      /* divider */
  --pp-300:#D9D6D1;                      /* border */
  --pp-400:#B4B1AC;                      /* placeholder — the source's `--text-subtle` */
  --pp-500:#8B8985;                      /* the source's `--text-muted` */
  --pp-550:#6E6C67;                      /* text tertiary — see the note beside `--c-faint` */
  --pp-600:#56544F;                      /* text secondary */
  --pp-800:#2A2A29;                      /* a step inside the ink */
  --pp-900:#0B0B0B;                      /* text, and the ink band */

  /* the dark room — warm near-black · graphite ramp, decided */
  --mn-1000:#080807;
  --mn-950:#0D0D0C;                      /* page */
  --mn-900:#121211;                      /* surface */
  --mn-850:#171716;                      /* the band */
  --mn-800:#1B1B19;                      /* sunken */
  --mn-700:#242422;                      /* divider */
  --mn-600:#2E2E2B;                      /* border */
  --mn-500:#4A4A46;
  --mn-400:#6A6862;                      /* placeholder */
  --mn-350:#8F8D87;                      /* text tertiary */
  --mn-300:#A8A6A0;                      /* text secondary */
  --mn-100:#F2F0EC;                      /* text */

  --mn-open:#4ADE80;                     /* open or closed is the truth, never the accent */
}

/* WHICH ROOM AN UNATTRIBUTED PAGE IS IN — the LIGHT one, which is also this design's primary.
   The server writes `data-mode` on the page and on <html>, so a real site is always one or the
   other; a preview with neither gets paper, the room the specimen was drawn in. */

/* ── THE LIGHT ROOM, WHICH IS THE PRIMARY ONE ──────────────────────────────────────────────
   White paper. Not off-white: the source is a specimen sheet and a specimen sheet is white, and
   the warmth in this design comes from the greys and the ink rather than from the page. */
:is(#clay-page,#design-sheets).mono,
#clay-page.mono[data-mode="light"], #design-sheets.mono[data-mode="light"],
:root[data-mode="light"] #clay-page.mono, :root[data-mode="light"] #design-sheets.mono{
  --c-paper:var(--pp-000);
  --c-ink:var(--pp-900);
  --c-soft:var(--pp-600);
  --c-faint:var(--pp-550);
  --c-line:var(--pp-300);
  --c-fill:var(--pp-100);                /* paper SINKS to make a surface */
  --c-card-bg:var(--pp-000);             /* a card is white with a hairline — never a fill */
  --c-ground-fill:var(--pp-100);
  --c-over:var(--pp-900);
  --c-map-ground:var(--pp-050);
  /* the contrast band is the ink, which is the one dark plate a white page gets */
  --c-flip:var(--pp-900);
  --c-flip-ink:var(--pp-000);
  --mn-thing:var(--pp-800);              /* a thing standing on that plate takes one step in */
  --mn-edge:rgb(11 11 11 / .14);         /* the hairline round a photograph */
  --mn-live:#15803D;
}

/* ── THE DARK ROOM — decided, and decided as its own scheme ────────────────────────────────
   A warm near-black, because the greys above it are warm and a blue-black under them reads as a
   different site. It LIFTS to make a surface where the light room sinks. */
#clay-page.mono[data-mode="dark"], #design-sheets.mono[data-mode="dark"],
:root[data-mode="dark"] #clay-page.mono, :root[data-mode="dark"] #design-sheets.mono{
  --c-paper:var(--mn-950);
  --c-ink:var(--mn-100);
  --c-soft:var(--mn-300);
  --c-faint:var(--mn-350);
  --c-line:var(--mn-600);
  --c-fill:var(--mn-850);                /* the dark room LIFTS */
  --c-card-bg:var(--mn-900);
  --c-ground-fill:var(--mn-850);
  --c-over:var(--mn-1000);
  --c-map-ground:var(--mn-900);
  /* AND THE CONTRAST BAND IS A LIFT, not the other room. A white band edge to edge on a warm
     near-black page is a second website; a step up is a room you are still in. */
  --c-flip:var(--mn-800);
  --c-flip-ink:var(--mn-100);
  --mn-thing:var(--mn-700);
  --mn-edge:rgb(242 240 236 / .14);
  --mn-live:var(--mn-open);
}

/* ── THE PLATE TAKES THE OWNER'S HUE ───────────────────────────────────────────────────────
   The deep surfaces of this design are no longer one fixed colour. They are the business's accent,
   at its own hue with no rotation at all, held at the LIGHTNESS this design already had and at a chroma nobody would
   call a colour. This is a specimen sheet and its refusal is "no colour on a surface":
   the hue is the business's own, unshifted, and the cap is the lowest of any theme here. It reads
   as a near-black that happens to be slightly warm or slightly cool, and never as a colour.

   THE LIGHTNESS IS THE ONE THING THAT DOES NOT MOVE. Each value below is the oklch lightness of
   the colour it replaces, measured off the hex it used to be — so the page has the same weight,
   the same seam and the same contrast it always had, and only the hue is the owner's. Change a
   lightness here and you have redesigned the theme rather than recoloured it.

   THE CHROMA CAP IS THE WHOLE THING, and it was measured rather than guessed — six accents by four
   caps, drawn with this stylesheet and the real band. Here: .016 on the plates, .012 on the step above them. Chroma in oklch
   is absolute, so the SAME number is louder on a near-black than on a lift: the deeper the
   surface, the higher the cap can go before it stops reading as a temperature and starts reading
   as a colour.

   EVERYTHING HANGING OFF THE PLATE FOLLOWS FOR FREE, because they are all `--c-flip`: the ways-in
   plates (`--c-block-bg`), the product cards, the footer, and every ink inside them, which
   parts.css derives from the ground. The `thing` step is derived too, or a hire's card is the one
   surface on the page still wearing the old colour — which is exactly how it shipped first.

   THE PAGE IS UNTOUCHED IN BOTH ROOMS. Tinting a dark room's PAPER was tried and it took the band
   with it — same colour, no band, the section simply gone. A tinted page needs its lift re-derived
   off the new colour, which is a bigger change than a plate. */
@supports (color: oklch(from red l c h)){
  :is(#clay-page,#design-sheets).mono,
  #clay-page.mono[data-mode="light"], #design-sheets.mono[data-mode="light"],
  :root[data-mode="light"] #clay-page.mono, :root[data-mode="light"] #design-sheets.mono{
    --c-flip:oklch(from var(--accent) .150 min(c, .016) h);
    --mn-thing:oklch(from var(--accent) .285 min(c, .012) h);
  }
  #clay-page.mono[data-mode="dark"], #design-sheets.mono[data-mode="dark"],
  :root[data-mode="dark"] #clay-page.mono, :root[data-mode="dark"] #design-sheets.mono{
    --c-flip:oklch(from var(--accent) .221 min(c, .016) h);
    --mn-thing:oklch(from var(--accent) .260 min(c, .012) h);
  }
}

/* ── THE ACCENT SLOT — one input, and the neutrals never hear about it ─────────────────────
   `--c-brand: 0%`: the warm greys are warm because they were sampled warm, not because the
   owner's colour is mixed into them. A sage site and a rust site have the same page under them.

   DERIVED WHERE THE ACCENT ACTUALLY IS, which is on the page and not on `:root`: `vars()` writes
   the owner's colour onto `#clay-page.mono` precisely so it cannot repaint the editor's chrome,
   so maths run on the root would never once see the colour the business chose. */
:root, :is(#clay-page,#design-sheets).mono{
  --c-accent:var(--accent);
  --c-brand:0%;
  /* `--c-on` IS NOT STATED HERE, and that is the whole of a bug that shipped. parts.css declares
     it as a plain white and then DERIVES it — black or white by luminance — inside an @supports
     block on `#clay-page`. This file's selector carries an extra class, so restating it here won
     on specificity and pinned it to white for every accent there has ever been. Invisible on a hot
     pink; on a pale lime the basket's own button came out white on lime. See `.btn` below, which
     was reading it. */
  --c-accent-ink:var(--accent);
}
@supports (color: oklch(from red l c h)){
  :root, :is(#clay-page,#design-sheets).mono{
    /* THE ACCENT AS TEXT IS NOT THE ACCENT AS A BUTTON. The source says so in its own comment:
       on white the raw ochre is too light to read, so it is darkened; on near-black it is dull,
       so it is lightened. The BUTTON keeps the hue exactly as the owner typed it — see the note
       beside `--c-act-bg`, and the hairline parts.css draws round it. */
    --c-accent-ink:oklch(from var(--accent) min(l, .46) c h);
  }
  #clay-page.mono[data-mode="dark"], #design-sheets.mono[data-mode="dark"],
  :root[data-mode="dark"] #clay-page.mono, :root[data-mode="dark"] #design-sheets.mono{
    --c-accent-ink:oklch(from var(--accent) max(l, .68) c h);
  }
}

/* ── TYPE — two monos, and no third face ───────────────────────────────────────────────────
   Martian Mono is wide, mechanical and slightly drawn; it carries every title, every name and
   every price. JetBrains Mono is narrow and neutral; it carries the running text and every label
   the system writes. The second never sets a heading and the first never sets a paragraph.

   `--c-display-adj` is here because a mono is WIDE: at the same step a monospaced title occupies
   half again the measure of a grotesk, so the display steps come down rather than the line length
   going up. It is a type scale, not a spacing decision — nothing moves, the letters are smaller.

   `--c-base` and `--c-ratio` are the SCALE. The fluid steps above them stay parts.css's, so every
   rule about a heading against its own body is measuring the page this actually draws. */
:is(#clay-page,#design-sheets).mono{
  --c-display:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --c-body:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --c-label:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --c-weight:500;                        /* medium. The specimen has a bold and never uses it. */
  --c-case:none;
  --c-track:-.03em;                      /* the display tracking off the source */
  --c-lead-h:.95;                        /* leading-tight — a mono title sets solid */
  --c-body-h:1.6;
  --c-base:16px;
  --c-ratio:1.34;
  --c-ratio-sm:1.2;
  --c-display-adj:.9;                    /* see above: a mono is wide */
  /* the label — uppercase, tracked to the widest step in the source, never underlined */
  --c-label-weight:400;
  --c-label-case:uppercase;
  --c-label-track:.18em;
  --c-eyebrow-deco:none;
}

/* ── TREATMENT — no radius, one hairline, no shadow ────────────────────────────────────────
   The source's own words: images, buttons and section blocks are `--radius-none`; inputs are 2px;
   the only round thing is a chip, and a chip is round because it is a word you can press. The
   system is flat — `--card-shadow: none`, and there is no other shadow token in the specimen.

   These are shape, not size: a corner moves nothing and takes up no room. */
:is(#clay-page,#design-sheets).mono{
  --c-r:0px;
  --c-r-lg:0px;
  /* …AND THE CHIP TOO. `--c-r-pill` is what an eyebrow, a nav tag and a bento tag read, and its
     default is 999px — which is right for a design whose language is round and is the whole of
     what "a mix of round and square" looked like here: four round nav chips with a square button
     on the end of them. There is nothing round on this design. */
  --c-r-pill:0px;
  --c-bw:1px;
  --c-card-bw:1px;
  --c-card-shadow:none;
  --c-quote-bw:var(--c-bw);
  --c-quote-bg:var(--c-paper);
  /* …and neither is `--c-quote-ink`, for the same reason: a quotation states its own ground, so
     the ink on it is derived from THAT rather than from the page's. */
  --c-field-bg:var(--c-paper);
  --c-field-bg-hi:var(--c-fill);
  --c-field-bw:var(--c-bw);
  --c-field-bw-b:var(--c-bw);
}

/* ── THE GRADE ─────────────────────────────────────────────────────────────────────────────
   The source names one filter and it is the whole treatment here: `contrast(1.08)
   saturate(0.92) brightness(1.02)` — the crisp, slightly cooled look an architect's photographs
   have. Four moves and not six: there is no vignette, because a vignette is a soft edge and
   nothing in this design has one, and the hairline round a picture is the same hairline that goes
   round a card.

   The scrim stays, because it is not decoration: white type on a photograph nobody vetted is only
   safe if something is under it. In the dark room it goes deeper, since the picture is sitting on
   near-black and the type on it is the same near-white as everything else. */
:is(#clay-page,#design-sheets).mono{
  --c-photo:contrast(1.08) saturate(.92) brightness(1.02);
  --c-photo-wash:none;
  --c-photo-wash-blend:normal;
  --c-scrim-a:0;
  --c-scrim-b:.48;
  --c-scrim-dim:.26;
}
#clay-page.mono[data-mode="dark"], #design-sheets.mono[data-mode="dark"],
:root[data-mode="dark"] #clay-page.mono, :root[data-mode="dark"] #design-sheets.mono{
  --c-photo:contrast(1.08) saturate(.92) brightness(.98);
  --c-scrim-b:.56;
}
/* THE ESCAPE HATCH — the picture as they took it. Some businesses have photographs a filter would
   only spoil, and the owner can say so once for the whole site. */
:root[data-photos="raw"],
:root[data-photos="raw"] :is(#clay-page,#design-sheets).mono{
  --c-photo:none; --c-photo-wash:none; --c-photo-grain:none;
}

/* ── THE ONE LIVE VARIABLE ─────────────────────────────────────────────────────────────────
   The source calls the ochre "the one live variable" and paints its primary button pure black.
   That half is not kept: a slot the owner fills that never appears is not a slot, and the rule
   across this product is that the accent marks the thing you press. So the ochre is the action —
   on the page, in the bar and on a band — and everything ELSE in this design stays ink on paper,
   which is where the specimen's discipline actually lives.

   THE INK ON IT IS NOT STATED, and that is the point. Whether an owner's colour can be told from
   what is written on it is decided in parts.css, by luminance, before anybody picks a colour. */
:is(#clay-page,#design-sheets).mono{
  --c-act-font:var(--c-body);
  --c-act-weight:500;
  --c-act-case:uppercase;                /* the source's buttons are tracked capitals */
  --c-act-bg:var(--c-accent);
  --c-act-bar-bg:var(--c-accent);
  /* …AND THE PLATE UNDER A WAY IN IS NOT THE ACTION — it is the contrast room, like every other
     filled block here. Left alone it defaults to the button's ground and every ways-in card
     becomes a slab of the owner's colour. */
  --c-block-bg:var(--c-flip);
  --c-nav-dim:1;
  --c-band-accent:var(--c-accent);
  /* …nor `--c-on-band`, which is the same derivation over the band's own accent. */
}

/* ── A THING FOR SALE OR FOR HIRE ──────────────────────────────────────────────────────────
   A card here is paper with a hairline round it, and that is true of a product too: the specimen
   has no filled cards at all. Where the band underneath is already the contrast room the card
   would disappear into it, so there it takes the room's own surface instead. */
/* A CARD ON THE PLATE IS THE `thing` STEP, AND IT CANNOT BE `--c-fill`.
   `--c-fill` is re-derived from `--g` on every element that sets one, and `.c-card` is one of
   them (see the ground-aware block in parts.css). So `--g:var(--c-fill)` on a card is a cycle:
   the browser throws BOTH away, the card paints no background at all, and `border:var(--c-card-bw)
   solid var(--c-line)` goes with them — `--c-line` is derived from `--g` too, so the shorthand is
   invalid and the border-style falls to `none`. No fill and no edge, on the one ground where a
   card most needs them. "Cards for this theme are same color as background so they fall away."
   parts.css has this written down beside `--c-ground-fill`, which exists for exactly this reason.
   `--mn-thing` is this theme's own answer and is stated, not derived from a ground: "a thing standing
   on that plate takes one step in". It is what `.l-bc-thing` already uses one line below. */
:is(#clay-page,#design-sheets).mono .c-g-ink .c-card{--g:var(--mn-thing);background:var(--g)}
:is(#clay-page,#design-sheets).mono .l-bc-thing{--g:var(--mn-thing);background:var(--g);
  border-color:transparent}

/* ============================================================================================
   THE EDITOR'S STYLESHEETS ARE ON THIS PAGE TOO — and they are older than this design.
   ============================================================================================
   An owner's page loads editor-ui.css and site.css for the panel, the dock and the pickers. Both
   carry UNSCOPED class rules on names the design layer also uses — `.sheet`, `.card`, `.wrap`,
   `.field`, `.fgrid` — and the result is visible only to the OWNER, which is why it survives a
   whole test suite. Everything those files set on a shared name is put back to the browser's own
   value here. This is plumbing, not design: it undoes, it does not decide.
   ============================================================================================ */
:is(#clay-page,#design-sheets).mono .sheet{color:inherit;font-family:inherit;background:none;border:0}
:is(#clay-page,#design-sheets).mono .card{background:none;border-radius:0;transition:none}
/* A BUTTON IS NOT A BUTTON-SHAPED BOX. Anything clickable is a real <button>, and a <button>
   arrives wearing the browser's own chrome — `buttonface`, `buttontext`, a border, the system
   font. `:where()` contributes no specificity, so this is heavy enough to beat the editor's own
   unscoped rules and light enough to lose to `parts.css` painting a button that HAS a paint. */
:where(#clay-page,#design-sheets).mono button{font:inherit;color:inherit;background:none;border:0;
  text-align:inherit;-webkit-appearance:none;appearance:none}
:is(#clay-page,#design-sheets).mono .wrap{color:inherit;font-family:inherit}
:is(#clay-page,#design-sheets).mono .map-attr,
:is(#clay-page,#design-sheets).mono .map-pulse{all:unset}

/* THE PAGE IS THE CONTAINER EVERY BREAKPOINT ASKS. `parts.css` writes `@container page` rules and
   they match nothing unless the page declares the container — and the harnesses declare it for
   you, so it looks correct right up until it ships. Declared here, once. */
#clay-page{container-type:inline-size;container-name:page}

:is(#clay-page,#design-sheets).mono{background:var(--c-paper);color:var(--c-ink);
  font-family:var(--c-body);-webkit-font-smoothing:antialiased}

/* ============================================================================================
   THE PARTS, PAINTED — colour and face only. Every one of these rules would be invisible in a
   screenshot with the colour taken out, which is the test for whether it belongs in this file.
   ============================================================================================ */

/* A TAG IS THE OWNER'S OWN WORD and it is not pressable, so it is quiet: a hairline and small
   type. A CHIP is pressable and filters a list, and the SELECTED chip is the one place the accent
   may appear a second time on a screen — it is the same event as the list it is filtering. */
:is(#clay-page,#design-sheets).mono .c-tag{border-color:var(--c-line);background:transparent;
  color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .c-chip{border-color:var(--c-line);background:transparent;
  color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .c-chip[aria-pressed="true"],
:is(#clay-page,#design-sheets).mono .c-chip.c-on,
:is(#clay-page,#design-sheets).mono .c-opt.c-on{background:var(--c-fill);
  border-color:var(--c-accent);color:var(--c-ink)}

/* THE FOCUS RING IS THE SAME ON EVERY COMPONENT, so a keyboard learns it once — 2px of the accent,
   and never the browser's own blue. */
:is(#clay-page,#design-sheets).mono :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-accent);outline-offset:2px}

/* A LINK IS TEXT WITH A RULE UNDER IT — the edge colour, never the accent, never bold. */
:is(#clay-page,#design-sheets).mono .c-link{color:inherit;border-bottom-color:var(--c-line)}
:is(#clay-page,#design-sheets).mono .c-link:hover{border-bottom-color:var(--c-ink)}

/* A PHOTOGRAPH ALWAYS HAS AN EDGE — 1px of the text colour at 12% inside the radius, which is the
   sixth move of the grade and the one that stops a pale picture bleeding into the page. Never in
   the viewer: somebody who opened a photograph wants the photograph. */
:is(#clay-page,#design-sheets).mono .c-media{background:var(--c-fill);
  box-shadow:inset 0 0 0 1px var(--mn-edge)}
:is(#clay-page,#design-sheets).mono .c-viewer .c-media{box-shadow:none}

/* CARDS, ROWS AND QUOTES — a surface, a hairline, and the face. Whether a row IS a card is the
   layout's call; this is only what one looks like. */
:is(#clay-page,#design-sheets).mono .c-card{background:var(--c-fill);border-color:var(--c-line)}
:is(#clay-page,#design-sheets).mono .c-row{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).mono .c-quote{background:var(--c-quote-bg);
  border-color:var(--c-line);font-style:normal}
:is(#clay-page,#design-sheets).mono .c-quote blockquote{font-family:var(--c-display);
  font-weight:500}
:is(#clay-page,#design-sheets).mono .c-who{color:var(--c-soft)}

/* THE PRICE IS PRINTED EXACTLY AS IT ARRIVES — never parsed, split or re-formatted, because
   "Rp 45.000", "€ 12,50" and "$ 12.50" are three different truths. Tabular figures keep a column
   straight without touching the text. */
:is(#clay-page,#design-sheets).mono .c-row-m,
:is(#clay-page,#design-sheets).mono .c-card-m,
:is(#clay-page,#design-sheets).mono .c-price{
  font-variant-numeric:tabular-nums;font-weight:500}

/* THE LIVE STATE — the only thing on the page that loops, because a loop on a static page is a
   distraction the owner did not ask for. The dot uses the accent LIFTED, so a maroon survives on
   graphite; the words beside it never do, because a live line is information. */
:is(#clay-page,#design-sheets).mono :is(.c-now,.c-live)::before{background:var(--mn-live);
  animation:rm-breathe 2.4s ease-in-out infinite}
@keyframes rm-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@media (prefers-reduced-motion: reduce){
  :is(#clay-page,#design-sheets).mono :is(.c-now,.c-live)::before{animation:none;opacity:1}
}

/* THE SHEETS — Bold's markup, this design's colour. The frame, where it sits and how it arrives
   are `parts.css`'s, once, for every theme. */
:is(#clay-page,#design-sheets).mono .sheet{background:var(--c-paper);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .sheet-veil{
  background:color-mix(in oklab, var(--c-over) 60%, transparent)}
:is(#clay-page,#design-sheets).mono .sheet-host.viewer .sheet{background:var(--mn-1000);
  color:var(--mn-100)}
:is(#clay-page,#design-sheets).mono .img{background:var(--c-fill)}
:is(#clay-page,#design-sheets).mono .img img{filter:var(--c-photo)}
:is(#clay-page,#design-sheets).mono .viewer .img img,
:is(#clay-page,#design-sheets).mono .sheet .thumbs .img img{filter:none}
:is(#clay-page,#design-sheets).mono .rule{background:var(--c-line)}
:is(#clay-page,#design-sheets).mono .fine{color:var(--c-faint)}
:is(#clay-page,#design-sheets).mono .meta{color:var(--c-faint)}
:is(#clay-page,#design-sheets).mono .prose{color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .eyebrow{font-family:var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:uppercase;color:var(--c-faint)}
:is(#clay-page,#design-sheets).mono .h-sheet{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).mono .d{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).mono .btn{background:var(--c-ink);color:var(--c-paper);
  font-family:var(--c-body);font-weight:500}
:is(#clay-page,#design-sheets).mono .btn.ghost{background:transparent;color:var(--c-ink);
  box-shadow:inset 0 0 0 1px var(--c-line)}
:is(#clay-page,#design-sheets).mono .row{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).mono .row h3{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).mono .row p{color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .sheet .row.today{background:var(--c-fill)}
:is(#clay-page,#design-sheets).mono .sheet .row.today :is(h3,.price){color:var(--c-accent-ink)}
:is(#clay-page,#design-sheets).mono .sheet .row.gone{opacity:.5}
:is(#clay-page,#design-sheets).mono .now{font-family:var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:uppercase;color:var(--mn-live);
  font-style:normal}
:is(#clay-page,#design-sheets).mono .price{font-variant-numeric:tabular-nums;font-weight:500}
:is(#clay-page,#design-sheets).mono .card{background:var(--c-fill);
  box-shadow:inset 0 0 0 1px var(--c-line);color:inherit}
:is(#clay-page,#design-sheets).mono .card h3{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).mono .tag{border-color:var(--c-line);color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .score{color:var(--c-faint);
  font-variant-numeric:tabular-nums}
:is(#clay-page,#design-sheets).mono .group-t{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).mono .group-w{color:var(--c-faint);font-weight:400;
  font-style:normal}
:is(#clay-page,#design-sheets).mono .group-n{color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .group-p img{filter:var(--c-photo)}
:is(#clay-page,#design-sheets).mono .opt{border-color:var(--c-line);background:transparent;
  color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .opt.on{background:var(--c-fill);
  border-color:var(--c-accent);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .qty{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).mono .field :is(input,textarea,select){
  background:var(--c-field-bg);border-color:var(--c-line);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .field :is(input,textarea,select):focus{
  background:var(--c-field-bg-hi);border-color:var(--c-accent)}
:is(#clay-page,#design-sheets).mono .step{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).mono .step-n{border-color:var(--c-line);color:var(--c-faint);
  font-family:var(--c-label)}
:is(#clay-page,#design-sheets).mono .step.on .step-n{background:var(--c-ink);color:var(--c-paper)}
:is(#clay-page,#design-sheets).mono .step.done .step-n{background:var(--c-act-bg);
  color:var(--c-act-ink)}
:is(#clay-page,#design-sheets).mono .step-t{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).mono .step-v{color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .cal-head{font-family:var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:uppercase;color:var(--c-faint)}
:is(#clay-page,#design-sheets).mono .live-mark{background:var(--c-over);color:var(--mn-100);
  font-family:var(--c-label);text-transform:uppercase}

/* ── THE ONE PLACE THE BOUNDARY LEAKS, and it is not this design's doing ───────────────────
   Everything above this line is colour, type and treatment. The four rules below are geometry,
   and they are here because the SHEET vocabulary has no shared stylesheet: `parts.css` lays out
   every `c-` class on the page and inside the sheet layer, but the sheets are written in a private
   vocabulary — `.rows`, `.btn`, `.price`, `.d` — that the RUNTIME requires by name
   (`design-client.js` builds basket lines and product options under those exact names), and
   nothing shared says what they are. So each theme states it, which means each theme states a
   layout, which is the thing this file exists not to do.

   The fix is not a fifth rule here: it is `parts.css` owning the sheet vocabulary the way it owns
   the page's, and then these four go. Until then they are the minimum that stops a sheet drawing
   as an undifferentiated column, and every one of them is either a type SIZE (which is a theme's)
   or a display value with no measurement in it.
   ── */
:is(#clay-page,#design-sheets).mono .rows{display:grid}
:is(#clay-page,#design-sheets).mono .price.lead{font-size:var(--c-t4)}
:is(#clay-page,#design-sheets).mono .price.mid{font-size:var(--c-t3)}
:is(#clay-page,#design-sheets).mono .d.mid{font-size:var(--c-t3)}
:is(#clay-page,#design-sheets).mono .btn.sm{font-size:var(--c-t1)}

/* ============================================================================================
   A CHIP IS A PILL. NOTHING ELSE ON THIS DESIGN IS.
   ============================================================================================
   This block used to round every pressable thing — the button, the option, the time, the picker,
   the quantity stepper — under a rule borrowed from a design whose whole language is round. It is
   not this one's. The brief says it in one line: "`--c-r` and `--c-r-lg` are both 0. Images,
   BUTTONS, cards, fields and section blocks are square, and that is the loudest thing this design
   says. The one exception is a chip, and the chip is a pill because it is a word you can press."

   What shipped was neither: a square cart, a square burger, a square logo and a fully round Rent
   a scooter between them. "For this theme better square buttons all and not a mix of round and
   square.." Two shapes on one design is not a design with two shapes in it, it is two designs.

   AND THE CHIP GOES WITH IT. The brief kept one exception — a chip is a pill "because it is a word
   you can press" — and the exception is the mix. The bar is where it showed: four round nav chips
   with a square button on the end of them, in a design whose loudest statement is that there are
   no corners here. A chip is still its own object, because it is a bordered box round a word and
   a button is a filled slab; that reading survives the corner. The corner was never what said it.

   So: nothing on this design is round. `--c-r` is 0 and everything reads it, which is what the
   cart, the burger and the logo were doing all along. There is no rule left in this block. */

/* ============================================================================================
   THE SHEET — and every class its drawing writes
   ============================================================================================
   A sheet is a PAGE, not a dialog, and this design was painting none of it: the basket opened as
   raw type with an underlined "Close", a total in the browser's own font, and the one button that
   spends money as a bare black strip with no room inside it. All of it was there and none of it
   was dressed — "small things like close button on cart".

   These are the names `sheets.js` writes. They are not the page's vocabulary, so parts.css says
   nothing about them and the theme that draws them is the one that has to paint them.
   ============================================================================================ */

/* the frame: a page that rose from the bottom, with its own room and its own edge */
:is(#clay-page,#design-sheets).mono .sheet{background:var(--c-paper);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .sheet-veil{background:color-mix(in srgb, var(--c-over) 62%, transparent)}
:is(#clay-page,#design-sheets).mono .sheet-head{border-bottom:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).mono .h-sheet{font:500 var(--c-t4)/1.1 var(--c-display);
  letter-spacing:-.03em;color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .head{color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .eyebrow{font:400 11px/1.2 var(--c-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint)}

/* THE BUTTONS A SHEET DRAWS. `btn` is the sheet's word for what the page calls `c-act`, so it
   wears the same paint — and it has to be the same THREE tokens, not a lookalike pair. It was
   `--c-accent` with `--c-on` on it, which is the accent with a token this file had pinned to
   white; the page's button is `--c-act-bg` with `--c-act-ink` derived from it and the held colour
   as a hairline. One button, one contract, and the basket stops being the exception. */
:is(#clay-page,#design-sheets).mono .btn{display:inline-flex;align-items:center;
  justify-content:center;gap:8px;background:var(--c-act-bg);color:var(--c-act-ink);
  box-shadow:inset 0 0 0 var(--c-bw) var(--c-act-bg-safe);
  font:500 var(--c-t2)/1.2 var(--c-body);text-decoration:none;cursor:pointer}
/* …AND THE QUIET ONE IS AN OUTLINE, not a word with a rule under it. "Close" was raw underlined
   type, which reads as a link in a paragraph rather than as the way out of a sheet. */
:is(#clay-page,#design-sheets).mono .btn.ghost{background:transparent;color:var(--c-ink);
  box-shadow:inset 0 0 0 var(--c-bw) var(--c-line);text-decoration:none}
:is(#clay-page,#design-sheets).mono .btn.full{width:100%}
:is(#clay-page,#design-sheets).mono .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
:is(#clay-page,#design-sheets).mono .buyrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* the words a sheet sets */
:is(#clay-page,#design-sheets).mono .d{font-family:var(--c-display);font-weight:500;
  letter-spacing:-.02em;color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .lead{font-size:var(--c-t3);line-height:1.35;color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .mid{font-size:var(--c-t2);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .prose{color:var(--c-soft);line-height:var(--c-body-h);
  max-width:var(--c-cap-body)}
:is(#clay-page,#design-sheets).mono .meta{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).mono .fine{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).mono .score{font-size:var(--c-t1);color:var(--c-soft)}
/* a price is printed exactly as it arrives, and it is the one number a column has to line up */
:is(#clay-page,#design-sheets).mono .price,
:is(#clay-page,#design-sheets).mono .sum{font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--c-ink);white-space:nowrap}

/* rows, rules and groups */
:is(#clay-page,#design-sheets).mono .row{border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).mono .rows > :first-child{border-top:0}
:is(#clay-page,#design-sheets).mono .rule{background:var(--c-line)}
:is(#clay-page,#design-sheets).mono .group-t{font:500 var(--c-t3)/1.2 var(--c-display);
  letter-spacing:-.02em;color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .group-n{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).mono .group-p{color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .group-w{color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .foot{border-top:var(--c-bw) solid var(--c-line);color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .main{color:var(--c-ink)}

/* the small surfaces: a card in a sheet, a picture, a tag, a chip of a category */
:is(#clay-page,#design-sheets).mono .sheet .card,
:is(#clay-page,#design-sheets).mono .sheet-cards .card{background:var(--c-fill);
  border:var(--c-card-bw) solid var(--c-line);border-radius:var(--c-r-lg);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .sheet .img,
:is(#clay-page,#design-sheets).mono .thumbs .img{border-radius:var(--c-r);
  background:var(--c-fill);overflow:hidden}
:is(#clay-page,#design-sheets).mono .tag{border:var(--c-bw) solid var(--c-line);
  background:transparent;color:var(--c-soft);font-size:11px}
:is(#clay-page,#design-sheets).mono .cats{display:flex;gap:8px;flex-wrap:wrap}
:is(#clay-page,#design-sheets).mono .strip{background:var(--c-fill)}
:is(#clay-page,#design-sheets).mono .live-mark{background:var(--c-fill);color:var(--c-soft);
  border-radius:999px;font-size:11px}
:is(#clay-page,#design-sheets).mono .c4{color:var(--c-soft)}

/* the controls: a quantity, an option, a time, a day */
:is(#clay-page,#design-sheets).mono .qty{border:var(--c-bw) solid var(--c-line);
  background:var(--c-fill);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .opt{border:var(--c-bw) solid var(--c-line);
  background:transparent;color:var(--c-soft);cursor:pointer}
:is(#clay-page,#design-sheets).mono .opt.on,
:is(#clay-page,#design-sheets).mono .opts .opt[aria-pressed="true"]{background:var(--c-fill);
  border-color:var(--c-accent);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .times .time{border:var(--c-bw) solid var(--c-line);
  background:transparent;color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .cal{color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .cal-head{font:400 11px/1.2 var(--c-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint)}

/* the booking walk, and the fields in it */
:is(#clay-page,#design-sheets).mono .steps{color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .step{border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).mono .step-n{font:400 11px/1.2 var(--c-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint)}
:is(#clay-page,#design-sheets).mono .step-t{font:500 var(--c-t3)/1.2 var(--c-display);
  letter-spacing:-.02em;color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .step-v{color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .step-head{color:var(--c-ink);cursor:pointer}
:is(#clay-page,#design-sheets).mono .step-body{color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .form{color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .field input,
:is(#clay-page,#design-sheets).mono .field textarea,
:is(#clay-page,#design-sheets).mono .field select{background:var(--c-field-bg);
  border:var(--c-field-bw) solid var(--c-line);border-radius:var(--c-r);color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .now{color:var(--c-soft)}
:is(#clay-page,#design-sheets).mono .pdp{color:var(--c-ink)}
:is(#clay-page,#design-sheets).mono .viewer{background:var(--c-over)}

/* ── AND THE ROOM INSIDE THEM ──────────────────────────────────────────────────────────────
   These are the theme's own sheet classes, so their geometry is the theme's too — a `.btn` with
   no padding is a word with a hairline around it, which is what "Close" was. Every number here is
   off the layout's own scale (`--c-u`) rather than a value of its own. */
:is(#clay-page,#design-sheets).mono .btn{min-height:44px;padding:12px 22px}
:is(#clay-page,#design-sheets).mono .btn.sm{min-height:36px;padding:8px 16px;font-size:var(--c-t1)}
:is(#clay-page,#design-sheets).mono .sheet-head{padding-block:calc(var(--c-u)*3);
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets).mono .row{padding-block:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets).mono .rows{display:flex;flex-direction:column}
:is(#clay-page,#design-sheets).mono .foot{padding-top:calc(var(--c-u)*2);
  margin-top:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets).mono .qty{display:inline-flex;align-items:center;gap:4px;
  padding:4px}
:is(#clay-page,#design-sheets).mono .qty button{min-width:32px;min-height:32px}
:is(#clay-page,#design-sheets).mono .opt{padding:8px 14px;min-height:36px}
:is(#clay-page,#design-sheets).mono .tag{padding:5px 10px}
:is(#clay-page,#design-sheets).mono .times .time{padding:8px 14px;min-height:40px}
:is(#clay-page,#design-sheets).mono .step{padding-block:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets).mono .field input,
:is(#clay-page,#design-sheets).mono .field textarea,
:is(#clay-page,#design-sheets).mono .field select{padding:var(--c-field-pad);min-height:48px;
  width:100%}
:is(#clay-page,#design-sheets).mono .sum{margin-top:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets).mono .rule{height:var(--c-bw);margin-block:calc(var(--c-u)*2)}