/* ============================================================================================
   SETO — cool porcelain, a slate plate, and a peach that behaves like light.
   ============================================================================================
   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. A brand board: a cool porcelain field with white cards standing on it, one slate
   plate, and a peach that arrives as a wash over a photograph rather than as a block of colour.
   Archivo carries the headlines in tracked capitals set solid; JetBrains Mono carries the small
   printed labels the board sets in a monospace. Everything is generously round — 24 on a card,
   16 on a picture — and everything casts a soft shadow, which is the one thing that separates it
   from the two flat designs beside it.

   WHAT IT REFUSES. Pure white as a page. BLACK, anywhere — the deepest thing here is a slate. A
   second cream after Room's. Hard edges. A dark mode made by inverting the light one — the source
   says so itself and the dark room here is authored: wet slate, warmth arriving only through the
   accent, and text that is never #FFF.

   SOURCE: a token specification taken off the Seto brand board, which is LIGHT mode only. Every
   dark value is DECIDED, and the specification says which.
   ============================================================================================ */

/* ── THE TWO RAMPS — COOL, AND THAT IS THE DECISION ────────────────────────────────────────
   The board has two neutral families on it: a warm cream field, and the cool grey of the
   silhouette card. The cream is the obvious one and it is the one this design does NOT use.

   "Seems like Seto is the same as Room almost.. thought they would be more different."

   It was. Room's light room is a cream at #F6F1E8 and this was a cream at #F6EDE7 — two hex digits
   apart, under two grotesks, with the same corners. Two designs, one page. So this takes the
   board's OTHER family: a cool porcelain that is blue where every other theme here is warm, and
   the peach stays the only warm thing on the page, which is what the board actually does with it.
   The cream is Room's, and one theme has it.

   "Also not every theme needs to use black." Right, and this one does not: the deepest thing here
   is a SLATE at #263540 — a plate you read as a plate rather than as a hole cut in the page. Bold
   is black, Mono is a near-black, Room lifts inside graphite; this one never goes past a wet stone.

   Neither ramp is the other one upside down: porcelain steps DOWN to make a band and the slate
   room steps UP, and in both of them a card goes the other way from its own room. */
:root, :is(#clay-page,#design-sheets).seto{
  --accent:#F79E7C;                      /* the peach, sampled off the board's gradient */

  /* the light room — cool porcelain, off the board's mist family */
  --ms-000:#FFFFFF;                      /* the card — the only pure white on the page */
  --ms-050:#F7F9FA;                      /* raised */
  --ms-100:#EDF1F3;                      /* the page */
  --ms-150:#E3E8EB;                      /* sunken, and the banded surface */
  --ms-200:#D9DFE3;                      /* divider */
  --ms-300:#CBD3D8;                      /* border */
  --ms-400:#B9C0C6;                      /* the board's mist — a strong border */
  --ms-500:#8A959C;                      /* placeholder */
  --ms-550:#5A666E;                      /* text tertiary */
  --ms-600:#46525A;                      /* text secondary */
  --ms-900:#1E2A31;                      /* the ink — a deep slate, and never a black */
  --ms-plate:#263540;                    /* the contrast plate */

  /* the dark room — wet slate, authored. Cool, and still not a black. */
  --sl-1000:#0F171C;
  --sl-950:#16212A;                      /* page */
  --sl-900:#1B272E;                      /* surface, and a card */
  --sl-850:#1F2C34;                      /* the banded surface */
  --sl-800:#2E3F4A;                      /* the contrast plate — a lift, not a hole */
  --sl-700:#26343D;                      /* a thing standing on that plate */
  --sl-600:#33434E;                      /* border */
  --sl-500:#445763;
  --sl-400:#6E7F89;                      /* placeholder */
  --sl-350:#93A2AC;                      /* text tertiary */
  --sl-300:#A8B6BF;                      /* text secondary */
  --sl-100:#E9EFF2;                      /* text */

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

/* ── THE LIGHT ROOM, WHICH IS THE PRIMARY ONE ──────────────────────────────────────────────
   Porcelain, so a card is WHITE and reads as a card by being the brightest thing on the page.
   That is the opposite of both other paint themes, where a surface is a step down. */
:is(#clay-page,#design-sheets).seto,
#clay-page.seto[data-mode="light"], #design-sheets.seto[data-mode="light"],
:root[data-mode="light"] #clay-page.seto, :root[data-mode="light"] #design-sheets.seto{
  --c-paper:var(--ms-100);
  --c-ink:var(--ms-900);
  --c-soft:var(--ms-600);
  --c-faint:var(--ms-550);
  --c-line:var(--ms-300);
  --c-fill:var(--ms-150);                /* porcelain SINKS to make a band */
  --c-card-bg:var(--ms-000);             /* …and a card goes the other way, to white */
  --c-ground-fill:var(--ms-150);
  --c-over:var(--ms-900);
  --c-map-ground:var(--ms-050);
  --c-flip:var(--ms-plate);              /* the contrast band is a slate, not the ink */
  --c-flip-ink:var(--ms-000);
  --st-thing:#33454F;                    /* a thing standing on that plate takes one step in */
  --st-edge:rgb(30 42 49 / .12);         /* the hairline round a photograph */
  --st-live:#127A5A;
}

/* ── THE DARK ROOM — authored, not inverted ────────────────────────────────────────────────
   Wet slate rather than a near-black: the whole design is cool, and a black under a blue-grey
   ramp reads as a hole cut in it. It LIFTS to make a surface where the porcelain room steps down,
   and the peach is still the only warm thing anywhere. */
#clay-page.seto[data-mode="dark"], #design-sheets.seto[data-mode="dark"],
:root[data-mode="dark"] #clay-page.seto, :root[data-mode="dark"] #design-sheets.seto{
  --c-paper:var(--sl-950);
  --c-ink:var(--sl-100);
  --c-soft:var(--sl-300);
  --c-faint:var(--sl-350);
  --c-line:var(--sl-600);
  --c-fill:var(--sl-850);                /* the slate room LIFTS */
  --c-card-bg:var(--sl-900);
  --c-ground-fill:var(--sl-850);
  --c-over:var(--sl-1000);
  --c-map-ground:var(--sl-900);
  --c-flip:var(--sl-800);
  --c-flip-ink:var(--sl-100);
  --st-thing:var(--sl-700);
  --st-edge:rgb(233 239 242 / .12);
  --st-live:var(--sl-open);
}

/* ── AND THE PLATE TAKES THE OWNER'S HUE ───────────────────────────────────────────────────
   Every other theme's deep colour is a fixed one. This one's is DERIVED: the business's accent,
   rotated a step toward violet, dropped to a near-black and held to a chroma nobody would call a
   colour. A red business gets a deep aubergine plate, a green one gets a deep forest, and the
   design is still this design.

   WHY THIS THEME AND NOT THE OTHERS. A theme may do this only where its deep colour already HAS a
   hue — Seto's is a blue-slate. Bold's is `#060201` and Mono's is `#0B0B0B`: there is nothing
   there to rotate, and the blackness IS those designs. Room's two rooms are the design in the same
   way. So one theme of four takes the business's temperature and three stay themselves whatever
   colour is picked, which is a better spread than four of either.

   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. At `.026` it reads as a near-black with a
   temperature; at `.05` it is a coloured band and a red business gets something that looks like an
   error state; a yellow accent turns to mud above `.018`. The number is small on purpose.

   `-35°` is toward violet, and it is not arbitrary: a deep tone looks richer rotated that way,
   which is why a painter's black is never neutral and why a shadow on a red wall goes purple.

   THE LIGHT ROOM ROTATES ITS PLATE. THE DARK ROOM ROTATES ITS LIFT and leaves the PAPER alone —
   the page stays slate. A tinted page needs its band re-derived as a lift off the new colour, and
   when that was tried without it the reviews band vanished into the page: same colour, no band.
   That is a bigger change than a plate, and it is not this one.

   Everything derived from the plate follows for free, because they are all `--c-flip`: the ways-in
   plates (`--c-block-bg`), the product cards (`rhythm: "third"` names `ink`, and `.c-card.c-g-ink`
   is the flip), the footer, and every ink inside them, which parts.css derives from the ground. */
@supports (color: oklch(from red l c h)){
  :is(#clay-page,#design-sheets).seto,
  #clay-page.seto[data-mode="light"], #design-sheets.seto[data-mode="light"],
  :root[data-mode="light"] #clay-page.seto, :root[data-mode="light"] #design-sheets.seto{
    --c-flip:oklch(from var(--accent) .20 min(c, .026) calc(h - 35));
    --st-thing:oklch(from var(--accent) .379 min(c, .012) calc(h - 35));
  }
  #clay-page.seto[data-mode="dark"], #design-sheets.seto[data-mode="dark"],
  :root[data-mode="dark"] #clay-page.seto, :root[data-mode="dark"] #design-sheets.seto{
    /* A LIFT off the paper, so it is lighter than the page rather than deeper than it — and the
       cap is HALF the light room's, measured the same way. A lift is a big pale surface and the
       same chroma that reads as a temperature on a near-black reads as a mauve band up here: at
       .030 a red business got a dusty pink band and a terracotta one got the same band in brown.
       At .014 every accent reads as this room's slate with a cast on it. */
    --c-flip:oklch(from var(--accent) .32 min(c, .014) calc(h - 35));
    --st-thing:oklch(from var(--accent) .316 min(c, .012) calc(h - 35));
  }
}

/* ── THE ACCENT SLOT ───────────────────────────────────────────────────────────────────────
   `--c-brand: 0%`: the greys here are cool because they were sampled cool, 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.seto` 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).seto{
  --c-accent:var(--accent);
  --c-brand:0%;
  --c-accent-ink:var(--accent);
}
@supports (color: oklch(from red l c h)){
  :root, :is(#clay-page,#design-sheets).seto{
    /* THE ACCENT AS TEXT IS NOT THE ACCENT AS A FILL, and the source says so in its own comment:
       on porcelain the raw peach fails as type and has to be darkened; on slate it is dull and has
       to be lightened. The opposite move in each room. The BUTTON keeps the hue exactly as the
       owner typed it — parts.css holds the correction in a hairline round it. */
    --c-accent-ink:oklch(from var(--accent) min(l, .46) c h);
  }
  #clay-page.seto[data-mode="dark"], #design-sheets.seto[data-mode="dark"],
  :root[data-mode="dark"] #clay-page.seto, :root[data-mode="dark"] #design-sheets.seto{
    --c-accent-ink:oklch(from var(--accent) max(l, .74) c h);
  }
}

/* ── TYPE — capitals set solid, and a mono for what the system says ────────────────────────
   Archivo carries everything a business writes and it is set in CAPITALS with the tracking pulled
   in, which is how every headline on the board is set. JetBrains Mono carries the labels, the
   counts and the "/ 01" — the board prints those in a monospace and they are never a sentence.

   `--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).seto{
  --c-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --c-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --c-label:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --c-weight:600;                        /* semibold — the board's headline weight */
  --c-case:uppercase;                    /* every headline on the board is a capital */
  --c-track:-.02em;
  --c-lead-h:1.02;                       /* set solid */
  --c-body-h:1.5;
  --c-base:16px;
  --c-ratio:1.35;
  --c-ratio-sm:1.2;
  --c-display-adj:1;
  /* the label — mono, uppercase, and tracked wider than anything else here */
  --c-label-weight:500;
  --c-label-case:uppercase;
  --c-label-track:.14em;
  --c-eyebrow-deco:none;
}

/* ── TREATMENT — round, and the only one of the three that casts a shadow ──────────────────
   24 on a card, 16 on a picture or a field, a pill on a chip. The board's cards are soft-cornered
   and lifted off the field, and the shadow is the thing that makes a white card read as a card on
   a porcelain page — a hairline alone would not.

   These are shape, not size: a corner moves nothing and takes up no room. */
:is(#clay-page,#design-sheets).seto{
  --c-r:16px;
  --c-r-lg:24px;
  --c-bw:1px;
  --c-card-bw:1px;
  --c-card-shadow:0 1px 2px rgb(30 42 49 / .06), 0 14px 34px -18px rgb(30 42 49 / .20);
  --c-quote-bw:var(--c-bw);
  --c-quote-bg:var(--c-card-bg);
  --c-field-bg:var(--c-card-bg);
  --c-field-bg-hi:var(--c-fill);
  --c-field-bw:var(--c-bw);
  --c-field-bw-b:var(--c-bw);
}
#clay-page.seto[data-mode="dark"], #design-sheets.seto[data-mode="dark"],
:root[data-mode="dark"] #clay-page.seto, :root[data-mode="dark"] #design-sheets.seto{
  /* a shadow on near-black is dirt unless it is nearly all of it — the source's own dark values */
  --c-card-shadow:0 1px 2px rgb(0 0 0 / .5), 0 14px 34px -18px rgb(0 0 0 / .7);
}

/* ── THE GRADE — and the one move that is this design's alone ──────────────────────────────
   Three corrections off the source (`saturate 1.06`, `contrast 1.03`, `brightness 1.01`) and then
   the thing the board actually does: a WARM WASH over the picture. It is the accent, laid over the
   photograph at low strength, and it is why every image on the board looks like it was lit by the
   same afternoon. The wash is the owner's colour, so a sage business gets a sage afternoon.

   HALVED, from 22%/8% to 10%/4% — "think the colors for the photos is just a lil bit too much the
   accent color". The first numbers were chosen against a muted accent, and a muted accent hides
   what they do: on a saturated one (#FF0025) the top corner of every photograph on the site came
   out visibly red, which is the accent spent on something nobody presses. At 10% the afternoon is
   still there and the photograph is still the photograph. The gradient shape is untouched — it was
   never the problem.

   The scrim stays underneath it, because it is not decoration: white type on a photograph nobody
   vetted is only safe if something is under it. */
:is(#clay-page,#design-sheets).seto{
  --c-photo:saturate(1.06) contrast(1.03) brightness(1.01);
  --c-photo-wash:linear-gradient(135deg,
    color-mix(in oklab, var(--c-accent) 10%, transparent) 0%,
    color-mix(in oklab, var(--c-accent) 4%, transparent) 62%,
    transparent 100%);
  --c-photo-wash-blend:normal;
  --c-scrim-a:0;
  --c-scrim-b:.5;
  --c-scrim-dim:.28;
}
#clay-page.seto[data-mode="dark"], #design-sheets.seto[data-mode="dark"],
:root[data-mode="dark"] #clay-page.seto, :root[data-mode="dark"] #design-sheets.seto{
  --c-photo:saturate(1.06) contrast(1.03) brightness(.96);
  --c-scrim-b:.58;
}
/* THE ESCAPE HATCH — the picture as they took it, wash and all off together. Some businesses have
   photographs a filter would only spoil, and the owner says so once for the whole site. */
:root[data-photos="raw"],
:root[data-photos="raw"] :is(#clay-page,#design-sheets).seto{
  --c-photo:none; --c-photo-wash:none; --c-photo-grain:none;
}

/* ── THE ACTION ────────────────────────────────────────────────────────────────────────────
   The peach is the thing you press, on the page and in the bar, and the ink on it is derived —
   which matters more here than anywhere, because a peach is pale and every other theme's default
   would have written white on it. */
:is(#clay-page,#design-sheets).seto{
  --c-act-font:var(--c-body);
  --c-act-weight:500;
  --c-act-case:none;
  --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 ink field, which is the same
     plate the card rhythm steps to. One answer for every filled block. */
  --c-block-bg:var(--c-flip);
  --c-nav-dim:1;
  --c-band-accent:var(--c-accent);
}

/* ── ONE CARD, WHATEVER IS ON IT ───────────────────────────────────────────────────────────
   A product, a thing for hire and a way in are the same object, so they wear the same plate and it
   is decided once. Here that is the white card on the page and the ink plate where the rhythm
   steps to it; a hire sits INSIDE the booking card, which IS the contrast room, so it takes one
   step within that room rather than the room itself. */
/* 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.
   `--st-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).seto .c-g-ink .c-card{--g:var(--st-thing);background:var(--g)}
:is(#clay-page,#design-sheets).seto .l-bc-thing{--g:var(--st-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).seto .sheet{color:inherit;font-family:inherit;background:none;border:0}
:is(#clay-page,#design-sheets).seto .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).seto button{font:inherit;color:inherit;background:none;border:0;
  text-align:inherit;-webkit-appearance:none;appearance:none}
:is(#clay-page,#design-sheets).seto .wrap{color:inherit;font-family:inherit}
:is(#clay-page,#design-sheets).seto .map-attr,
:is(#clay-page,#design-sheets).seto .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).seto{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).seto .c-tag{border-color:var(--c-line);background:transparent;
  color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .c-chip{border-color:var(--c-line);background:transparent;
  color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .c-chip[aria-pressed="true"],
:is(#clay-page,#design-sheets).seto .c-chip.c-on,
:is(#clay-page,#design-sheets).seto .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).seto :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).seto .c-link{color:inherit;border-bottom-color:var(--c-line)}
:is(#clay-page,#design-sheets).seto .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).seto .c-media{background:var(--c-fill);
  box-shadow:inset 0 0 0 1px var(--st-edge)}
:is(#clay-page,#design-sheets).seto .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).seto .c-card{background:var(--c-fill);border-color:var(--c-line)}
:is(#clay-page,#design-sheets).seto .c-row{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).seto .c-quote{background:var(--c-quote-bg);
  border-color:var(--c-line);font-style:normal}
:is(#clay-page,#design-sheets).seto .c-quote blockquote{font-family:var(--c-display);
  font-weight:500}
:is(#clay-page,#design-sheets).seto .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).seto .c-row-m,
:is(#clay-page,#design-sheets).seto .c-card-m,
:is(#clay-page,#design-sheets).seto .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).seto :is(.c-now,.c-live)::before{background:var(--st-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).seto :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).seto .sheet{background:var(--c-paper);color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .sheet-veil{
  background:color-mix(in oklab, var(--c-over) 60%, transparent)}
:is(#clay-page,#design-sheets).seto .sheet-host.viewer .sheet{background:var(--c-over);
  color:var(--c-flip-ink)}
:is(#clay-page,#design-sheets).seto .img{background:var(--c-fill)}
:is(#clay-page,#design-sheets).seto .img img{filter:var(--c-photo)}
:is(#clay-page,#design-sheets).seto .viewer .img img,
:is(#clay-page,#design-sheets).seto .sheet .thumbs .img img{filter:none}
:is(#clay-page,#design-sheets).seto .rule{background:var(--c-line)}
:is(#clay-page,#design-sheets).seto .fine{color:var(--c-faint)}
:is(#clay-page,#design-sheets).seto .meta{color:var(--c-faint)}
:is(#clay-page,#design-sheets).seto .prose{color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .eyebrow{font-family:var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:uppercase;color:var(--c-faint)}
:is(#clay-page,#design-sheets).seto .h-sheet{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).seto .d{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).seto .btn{background:var(--c-ink);color:var(--c-paper);
  font-family:var(--c-body);font-weight:500}
:is(#clay-page,#design-sheets).seto .btn.ghost{background:transparent;color:var(--c-ink);
  box-shadow:inset 0 0 0 1px var(--c-line)}
:is(#clay-page,#design-sheets).seto .row{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).seto .row h3{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).seto .row p{color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .sheet .row.today{background:var(--c-fill)}
:is(#clay-page,#design-sheets).seto .sheet .row.today :is(h3,.price){color:var(--c-accent-ink)}
:is(#clay-page,#design-sheets).seto .sheet .row.gone{opacity:.5}
:is(#clay-page,#design-sheets).seto .now{font-family:var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:uppercase;color:var(--st-live);
  font-style:normal}
:is(#clay-page,#design-sheets).seto .price{font-variant-numeric:tabular-nums;font-weight:500}
:is(#clay-page,#design-sheets).seto .card{background:var(--c-fill);
  box-shadow:inset 0 0 0 1px var(--c-line);color:inherit}
:is(#clay-page,#design-sheets).seto .card h3{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).seto .tag{border-color:var(--c-line);color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .score{color:var(--c-faint);
  font-variant-numeric:tabular-nums}
:is(#clay-page,#design-sheets).seto .group-t{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).seto .group-w{color:var(--c-faint);font-weight:400;
  font-style:normal}
:is(#clay-page,#design-sheets).seto .group-n{color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .group-p img{filter:var(--c-photo)}
:is(#clay-page,#design-sheets).seto .opt{border-color:var(--c-line);background:transparent;
  color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .opt.on{background:var(--c-fill);
  border-color:var(--c-accent);color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .qty{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).seto .field :is(input,textarea,select){
  background:var(--c-field-bg);border-color:var(--c-line);color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .field :is(input,textarea,select):focus{
  background:var(--c-field-bg-hi);border-color:var(--c-accent)}
:is(#clay-page,#design-sheets).seto .step{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).seto .step-n{border-color:var(--c-line);color:var(--c-faint);
  font-family:var(--c-label)}
:is(#clay-page,#design-sheets).seto .step.on .step-n{background:var(--c-ink);color:var(--c-paper)}
:is(#clay-page,#design-sheets).seto .step.done .step-n{background:var(--c-act-bg);
  color:var(--c-act-ink)}
:is(#clay-page,#design-sheets).seto .step-t{font-family:var(--c-display);font-weight:500}
:is(#clay-page,#design-sheets).seto .step-v{color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .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).seto .live-mark{background:var(--c-over);color:var(--c-flip-ink);
  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).seto .rows{display:grid}
:is(#clay-page,#design-sheets).seto .price.lead{font-size:var(--c-t4)}
:is(#clay-page,#design-sheets).seto .price.mid{font-size:var(--c-t3)}
:is(#clay-page,#design-sheets).seto .d.mid{font-size:var(--c-t3)}
:is(#clay-page,#design-sheets).seto .btn.sm{font-size:var(--c-t1)}

/* ============================================================================================
   PRESSABLE IS A PILL — the rule from the brief, and it went missing in a rewrite.
   ============================================================================================
   Anything that responds to a finger is fully round; anything that HOLDS content is a card. That
   one distinction is what stops an owner ever making a button look like a card, and without it
   every action was a 16px rounded rectangle — the same shape as the box it sat in. */
:is(#clay-page,#design-sheets).seto .c-act,
:is(#clay-page,#design-sheets).seto .c-chip,
:is(#clay-page,#design-sheets).seto .c-tag,
:is(#clay-page,#design-sheets).seto .c-opt,
:is(#clay-page,#design-sheets).seto .c-time,
:is(#clay-page,#design-sheets).seto .c-pick-b,
:is(#clay-page,#design-sheets).seto .btn,
:is(#clay-page,#design-sheets).seto .qty{border-radius:999px}

/* …AND THE PHONE'S OWN CHROME WITH THEM. The way back, the basket, the mark and the burger are
   things you tap; they were drawn after the list above and so kept a 16px corner while every
   button beside them was a full pill. `--c-r-tap` is the layout's question — "how round is a
   thing you tap" — asked once, so a control added later is round here without anybody
   remembering to come back and name it. */
:is(#clay-page,#design-sheets).seto{--c-r-tap:999px}

/* ============================================================================================
   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).seto .sheet{background:var(--c-paper);color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .sheet-veil{background:color-mix(in srgb, var(--c-over) 62%, transparent)}
:is(#clay-page,#design-sheets).seto .sheet-head{border-bottom:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).seto .h-sheet{font:500 var(--c-t4)/1.1 var(--c-display);
  letter-spacing:-.03em;color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .head{color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .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).seto .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).seto .btn.ghost{background:transparent;color:var(--c-ink);
  box-shadow:inset 0 0 0 var(--c-bw) var(--c-edge);text-decoration:none}
:is(#clay-page,#design-sheets).seto .btn.full{width:100%}
:is(#clay-page,#design-sheets).seto .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
:is(#clay-page,#design-sheets).seto .buyrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* the words a sheet sets */
:is(#clay-page,#design-sheets).seto .d{font-family:var(--c-display);font-weight:500;
  letter-spacing:-.02em;color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .lead{font-size:var(--c-t3);line-height:1.35;color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .mid{font-size:var(--c-t2);color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .prose{color:var(--c-soft);line-height:var(--c-body-h);
  max-width:var(--c-cap-body)}
:is(#clay-page,#design-sheets).seto .meta{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).seto .fine{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).seto .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).seto .price,
:is(#clay-page,#design-sheets).seto .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).seto .row{border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).seto .rows > :first-child{border-top:0}
:is(#clay-page,#design-sheets).seto .rule{background:var(--c-line)}
:is(#clay-page,#design-sheets).seto .group-t{font:500 var(--c-t3)/1.2 var(--c-display);
  letter-spacing:-.02em;color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .group-n{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).seto .group-p{color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .group-w{color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .foot{border-top:var(--c-bw) solid var(--c-line);color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .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).seto .sheet .card,
:is(#clay-page,#design-sheets).seto .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).seto .sheet .img,
:is(#clay-page,#design-sheets).seto .thumbs .img{border-radius:var(--c-r);
  background:var(--c-fill);overflow:hidden}
:is(#clay-page,#design-sheets).seto .tag{border:var(--c-bw) solid var(--c-line);
  background:transparent;color:var(--c-soft);font-size:11px}
:is(#clay-page,#design-sheets).seto .cats{display:flex;gap:8px;flex-wrap:wrap}
:is(#clay-page,#design-sheets).seto .strip{background:var(--c-fill)}
:is(#clay-page,#design-sheets).seto .live-mark{background:var(--c-fill);color:var(--c-soft);
  border-radius:999px;font-size:11px}
:is(#clay-page,#design-sheets).seto .c4{color:var(--c-soft)}

/* the controls: a quantity, an option, a time, a day */
:is(#clay-page,#design-sheets).seto .qty{border:var(--c-bw) solid var(--c-line);
  background:var(--c-fill);color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .opt{border:var(--c-bw) solid var(--c-line);
  background:transparent;color:var(--c-soft);cursor:pointer}
:is(#clay-page,#design-sheets).seto .opt.on,
:is(#clay-page,#design-sheets).seto .opts .opt[aria-pressed="true"]{background:var(--c-fill);
  border-color:var(--c-accent);color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .times .time{border:var(--c-bw) solid var(--c-line);
  background:transparent;color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .cal{color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .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).seto .steps{color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .step{border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).seto .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).seto .step-t{font:500 var(--c-t3)/1.2 var(--c-display);
  letter-spacing:-.02em;color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .step-v{color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .step-head{color:var(--c-ink);cursor:pointer}
:is(#clay-page,#design-sheets).seto .step-body{color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .form{color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .field input,
:is(#clay-page,#design-sheets).seto .field textarea,
:is(#clay-page,#design-sheets).seto .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).seto .now{color:var(--c-soft)}
:is(#clay-page,#design-sheets).seto .pdp{color:var(--c-ink)}
:is(#clay-page,#design-sheets).seto .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).seto .btn{min-height:44px;padding:12px 22px}
:is(#clay-page,#design-sheets).seto .btn.sm{min-height:36px;padding:8px 16px;font-size:var(--c-t1)}
:is(#clay-page,#design-sheets).seto .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).seto .row{padding-block:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets).seto .rows{display:flex;flex-direction:column}
:is(#clay-page,#design-sheets).seto .foot{padding-top:calc(var(--c-u)*2);
  margin-top:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets).seto .qty{display:inline-flex;align-items:center;gap:4px;
  padding:4px}
:is(#clay-page,#design-sheets).seto .qty button{min-width:32px;min-height:32px}
:is(#clay-page,#design-sheets).seto .opt{padding:8px 14px;min-height:36px}
:is(#clay-page,#design-sheets).seto .tag{padding:5px 10px}
:is(#clay-page,#design-sheets).seto .times .time{padding:8px 14px;min-height:40px}
:is(#clay-page,#design-sheets).seto .step{padding-block:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets).seto .field input,
:is(#clay-page,#design-sheets).seto .field textarea,
:is(#clay-page,#design-sheets).seto .field select{padding:var(--c-field-pad);min-height:48px;
  width:100%}
:is(#clay-page,#design-sheets).seto .sum{margin-top:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets).seto .rule{height:var(--c-bw);margin-block:calc(var(--c-u)*2)}