/* ============================================================================================
   BONE — a warm olive-grey page, one deep plate, and the accent spent once.
   ============================================================================================
   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.

   IT IS A PORT, AND THE CLEANEST ONE WE HAVE HAD. The specification on the theme board (idea
   `t_y5a7m0x4`, `7683f412f1057864d55a.html`) is written in Clay's OWN token names, with four
   sentences at the top — the temperature of the neutrals, the deepest surface, which mode is
   primary, and what it refuses — and it leaves the ink on every fill DERIVED rather than stated,
   exactly as the contract asks. Where a line here is not the specification's, the comment says so
   and BRIEF.md says why.

   WHAT IT IS. Asked for as "really apple like feel", and it earns that without a borrowed asset.
   A warm olive-grey page — `#EAEAE8`, one hue at chroma ≈ .004, "a cream that has had the yellow
   taken back out of it" — with pure WHITE cards standing on it that have no border at all and a
   two-part shadow instead: a one-pixel contact edge and a wide soft drop. Twenty pixels of corner
   on everything that holds something, a full pill on everything you press. Schibsted Grotesk at
   600 and -0.032em, which is the tightest tracking of the six themes and most of why it reads the
   way it does.

   ITS ONE EVENT IS THE DEEP PLATE, at l .19 and never #000: "the theme puts one deep plate per
   screen with real surfaces sitting on top of it, and a true black gives those nothing to sit
   on", and the grain the design is built on is invisible over #000.

   WHAT IT REFUSES. No colour on any page ground — the paper is never tinted, not even by the
   accent. No tinted status surfaces: a status is a neutral chip with a coloured dot. No second
   brand colour in the chrome. No shadow and border on the same object. No second typeface. No
   text of any kind on a photograph without a scrim under it.
   ============================================================================================ */

/* ── THE RAMP — ONE HUE, TEN STEPS ─────────────────────────────────────────────────────────
   "Warm, and the hue family is olive — not beige and not taupe… the ramp keeps that hue at every
   step instead of drifting toward brown at the dark end."

   `--c-brand` is 0% where the layout's default is 7%: "Bone's greys are the design; a tinted grey
   would make every business's page a slightly different beige and the olive is the point." */
:root, :is(#clay-page,#design-sheets).bone{
  --accent:#0A7CF0;                      /* the specimen's own default in the accent slot */
  --c-brand:0%;
}

/* ── THE LIGHT ROOM, WHICH IS THE DESIGN ───────────────────────────────────────────────────
   "Light mode SINKS to make a surface: the paper is the mid step, the fill goes lighter toward
   white, and the card is pure white." So light has ONE step above the paper where the dark room
   below has three, and the step that does the work here is `--c-fill`. */
:is(#clay-page,#design-sheets).bone,
#clay-page.bone[data-mode="light"], #design-sheets.bone[data-mode="light"],
:root[data-mode="light"] #clay-page.bone, :root[data-mode="light"] #design-sheets.bone{
  --bn-050:#FDFDFB;
  --bn-100:#F7F7F4;
  --bn-200:#F1F1EE;
  --bn-300:#EAEAE8;
  --bn-400:#DCDCD9;
  --bn-500:#B4B4B0;
  --bn-600:#666663;
  --bn-700:#5B5B58;
  --bn-800:#2A2A28;
  --bn-900:#0E0E0E;

  --c-paper:var(--bn-300);
  --c-ink:#111111;
  --c-soft:var(--bn-700);                /* 5.7:1 on the paper, 6.4:1 on the fill */
  --c-faint:var(--bn-600);               /* 4.8:1 on the paper, 5.4:1 on the fill */
  --c-line:var(--bn-400);
  --c-fill:var(--bn-100);
  --c-card-bg:#FFFFFF;                   /* the one pure white, and it has no border */
  --c-ground-fill:var(--bn-200);
  --c-map-ground:var(--bn-200);
  /* `--c-over` IS A GROUND, NOT A VEIL. parts.css writes `--g:var(--c-over)` on a photograph band
     and derives every ink on it from that colour, so a value with alpha in it hands the derivation
     a transparent colour and every word over a picture comes out transparent too. The
     specification writes `rgba(14,14,14,.40)`; the colour is stated solid here and the .40 is
     applied where the veil is drawn — see `--bn-veil` and `.sheet-veil`. */
  --c-over:#0E0E0E;
  --bn-veil:40%;
  --c-flip:#191817;                      /* re-derived from the owner's hue below */
  --c-flip-ink:var(--bn-050);
  --c-block-bg:#2E2D2B;                  /* one step inside the plate — re-derived below */

  --c-accent:var(--accent);
  --c-accent-ink:#0A4E96;                /* re-derived below */
  --c-band-accent:var(--accent);
  --c-quote-bg:var(--bn-100);
  --c-field-bg:#FFFFFF;
  --c-field-bg-hi:#FFFFFF;
  /* DECIDED, and the specification is explicit about the shape of it: "a status is a neutral chip
     with a coloured dot — never a tinted ground", and "the pale-green/pale-amber pill is the thing
     this theme was built to get rid of". So open-or-closed is a DOT, and this is the dot. */
  --bn-live:#17904A;
  --bn-thing:#383734;                    /* a card standing on the plate — re-derived below */
}

/* ── THE DARK ROOM — DECIDED THROUGHOUT, and not an inversion ──────────────────────────────
   "Dark mode LIFTS: the paper is the floor and every surface climbs away from it." The ramp
   therefore runs the other way — `--bn-050` is the darkest step here and `--bn-900` the lightest
   — which is the specification's own table, copied. It is worth saying out loud, because every
   other theme in this folder keeps the index pointing at lightness: here the index means
   DISTANCE FROM THE PAPER, in both rooms, which is what makes the two tables read the same. */
#clay-page.bone[data-mode="dark"], #design-sheets.bone[data-mode="dark"],
:root[data-mode="dark"] #clay-page.bone, :root[data-mode="dark"] #design-sheets.bone{
  --bn-050:#131312;
  --bn-100:#1D1D1B;
  --bn-200:#262624;
  --bn-300:#35352F;
  --bn-400:#45453E;
  --bn-500:#6C6C66;
  --bn-600:#96968F;
  --bn-700:#BFBFB9;
  --bn-800:#E4E4E0;
  --bn-900:#F5F5F3;

  --c-paper:var(--bn-050);
  --c-ink:var(--bn-900);
  --c-soft:var(--bn-700);                /* 10.1:1 on the paper */
  --c-faint:var(--bn-600);               /* 6.2:1 on the paper, 5.1:1 on the fill */
  --c-line:var(--bn-300);
  --c-fill:var(--bn-200);
  --c-card-bg:var(--bn-100);
  --c-ground-fill:var(--bn-300);
  --c-map-ground:var(--bn-200);
  --c-over:#050504;
  --bn-veil:62%;
  --c-flip:#232220;                      /* a LIFT, not a sink — re-derived below */
  --c-flip-ink:#F7F7F4;
  --c-block-bg:#3A3936;                  /* re-derived below */

  --c-accent:var(--accent);
  --c-accent-ink:#8CC0FB;                /* re-derived below */
  --c-band-accent:var(--accent);
  --c-quote-bg:var(--bn-200);
  --c-field-bg:var(--bn-200);
  --c-field-bg-hi:var(--bn-300);
  --bn-live:#4DBE7C;
  --bn-thing:#46443F;
}

/* ── THE PLATE AND THE ACCENT AS TEXT, TAKEN FROM THE OWNER'S HUE ──────────────────────────
   These four lines are the specification's, verbatim, and it wrote them in Clay's own names: "l
   .19 for the plate and l .30 for the step inside it, +25 rotation, chroma capped — the same
   number is louder on the deeper surface, so the cap tightens as the plate lifts."

   THE LIGHTNESS NEVER MOVES: every number is the oklch lightness of the hex it replaces, so the
   page keeps the weight, the seam and the contrast it already had and only the hue is the
   business's. THE PAGE IS NOT TOUCHED IN EITHER ROOM. */
@supports (color: oklch(from red l c h)){
  :is(#clay-page,#design-sheets).bone,
  #clay-page.bone[data-mode="light"], #design-sheets.bone[data-mode="light"],
  :root[data-mode="light"] #clay-page.bone, :root[data-mode="light"] #design-sheets.bone{
    --c-flip:oklch(from var(--accent) .19 min(c, .020) calc(h + 25));
    --c-block-bg:oklch(from var(--accent) .30 min(c, .013) calc(h + 25));
    --bn-thing:oklch(from var(--accent) .36 min(c, .013) calc(h + 25));
    --c-accent-ink:oklch(from var(--accent) min(l, .44) c h);
  }
  #clay-page.bone[data-mode="dark"], #design-sheets.bone[data-mode="dark"],
  :root[data-mode="dark"] #clay-page.bone, :root[data-mode="dark"] #design-sheets.bone{
    --c-flip:oklch(from var(--accent) .26 min(c, .016) calc(h + 25));
    --c-block-bg:oklch(from var(--accent) .36 min(c, .012) calc(h + 25));
    --bn-thing:oklch(from var(--accent) .42 min(c, .012) calc(h + 25));
    --c-accent-ink:oklch(from var(--accent) max(l, .78) calc(c * .86) h);
  }
}

/* ── TYPE — one face, one weight for a heading, and the tightest tracking here ─────────────
   "No second typeface." Schibsted Grotesk carries the display, the body and the label, and the
   only things that change between them are the weight, the case and the tracking. -0.032em is
   the tightest of the six themes and it is most of why this reads the way it does — it is also
   the first thing a bad copy loosens.

   `--c-display-adj` is 0.97: "the face is slightly wide at display sizes", the specification's
   own note, and it is the one optical correction in the file. */
:is(#clay-page,#design-sheets).bone{
  --c-display:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --c-body:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --c-label:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --c-weight:600;
  --c-case:none;
  --c-track:-.032em;
  --c-lead-h:1.04;
  --c-body-h:1.5;
  /* TWO NUMBERS HERE ARE NOT THE SPECIFICATION'S — it says 15px and 1.26 — and both were moved
     by the same thing: Clay's steps are FLUID where the specimen's are a plain geometric run.
     The top two are clamped by `4.2cqw` and `6cqw`, so on a wide page a heading is 59px and an h1
     84px WHATEVER a theme says, and on a phone they are `base * ratio^n`, which is the theme's
     alone.

     `--c-base` is 16px because at 15 the h1 measures 5.6x the body on a desk, and `sizes.test.js`
     holds it to 5.5 — "past that it stops being a heading and becomes a billboard: a max-length
     title lands three lines deep and owns the band."

     `--c-ratio` is 1.32 because at 1.26 a heading is 32px on a phone against 59 on a desk — a
     role nearly doubling between the two — and every role is held to 1.8x on the ground that "a
     role that doubles between the two is a role a phone never sees the design of". 1.32 lands the
     heading at 1.60x and the h1 at 1.73x. What moved is how far the headings step above the body
     on a small screen; the body itself is 16px, which is the size a reader experiences. */
  --c-base:16px;
  --c-ratio:1.32;
  --c-ratio-sm:1.18;
  --c-display-adj:.97;
  --c-label-weight:600;
  --c-label-case:uppercase;
  --c-label-track:.14em;
  --c-eyebrow-deco:none;
}

/* ── TREATMENT — a corner, a hairline, and NO BORDER ON A CARD ─────────────────────────────
   "No shadow and border on the same object" is one of the four refusals, and the card is where it
   bites: `--c-card-bw` is 0 and the separation is the two-part shadow instead — a one-pixel
   contact edge at 4% and a wide soft drop at 20%, which is what a white object on a warm grey
   ground actually does. A hairline is still available (`--c-bw`) and is what a row, a divider and
   a chip use, where there is no shadow to conflict with.

   The field is the one place the line goes to 1.5px: a field is an invitation to type and the
   edge of it has to be findable. These are shape, not size — a corner moves nothing. */
:is(#clay-page,#design-sheets).bone{
  --c-r:20px;
  --c-r-lg:28px;
  --c-bw:1px;
  --c-card-bw:0px;
  --c-quote-bw:0px;
  --c-field-bw:1.5px;
  --c-field-bw-b:1.5px;
  --c-card-shadow:0 1px 2px rgba(14,14,14,.04), 0 14px 36px -16px rgba(14,14,14,.20);
}
#clay-page.bone[data-mode="dark"], #design-sheets.bone[data-mode="dark"],
:root[data-mode="dark"] #clay-page.bone, :root[data-mode="dark"] #design-sheets.bone{
  /* the same shadow, deeper — a drop at 20% of near-black is invisible on a near-black page */
  --c-card-shadow:0 1px 2px rgba(0,0,0,.30), 0 14px 36px -16px rgba(0,0,0,.55);
}

/* ── THE GRADE ─────────────────────────────────────────────────────────────────────────────
   `saturate(.90) contrast(1.05) brightness(1.01)`, a wash from warm at the top of the frame to
   ink at the bottom, and the grain the whole design is built on. Forty phones over four years,
   graded into one afternoon: the saturation coming DOWN is what does most of it. */
/* THE SPECIFICATION ASKS FOR `saturate(.90)` AND THE LAYOUT REFUSES IT. `no theme desaturates the
   owner's photographs, except the one that is about that` in runtime/parts.test.js bans any
   `saturate()` or `contrast()` under one in `--c-photo`, and the reason is a report in somebody's
   own words — it "makes the pictures to flat". A business's photographs are the one thing on the
   page they supplied, and a theme taking the colour out of them before anything else happens is
   the theme being the subject. The INTENT survives in the wash, which is where it does less harm:
   a warm veil at the top of the frame and ink at the bottom, multiplied, pulls forty phones toward
   each other without pulling any of them grey. */
:is(#clay-page,#design-sheets).bone{
  --c-photo:contrast(1.05) brightness(1.01);
  --c-photo-wash:linear-gradient(172deg, rgba(255,247,228,.16) 0%, rgba(14,14,14,.10) 100%);
  --c-photo-wash-blend:multiply;
  /* THE GRAIN IS .14 AND THE SPECIFICATION SAYS .24. Its number is over a noise image of its own,
     finer than ours; Clay's shared one (`--c-grain-noise` in parts.css) is coarser, and .24 of it
     reads as static rather than as emulsion. .14 is the same amount of texture off a different
     plate. The image itself is never copied into a theme — there is one, and a data URL per theme
     is five things that must not drift and will. */
  --c-photo-grain:var(--c-grain-noise);
  --c-photo-grain-size:140px 140px;
  --c-photo-grain-blend:overlay;
  --c-photo-grain-op:.14;
  --c-scrim-a:0;
  --c-scrim-b:.52;
  --c-scrim-dim:.34;
}
#clay-page.bone[data-mode="dark"], #design-sheets.bone[data-mode="dark"],
:root[data-mode="dark"] #clay-page.bone, :root[data-mode="dark"] #design-sheets.bone{
  --c-photo:contrast(1.05) brightness(.94);
  --c-scrim-b:.58;
}
/* THE ESCAPE HATCH — the picture as they took it, the grade, the wash and the grain off together */
:root[data-photos="raw"],
:root[data-photos="raw"] :is(#clay-page,#design-sheets).bone{
  --c-photo:none; --c-photo-wash:none; --c-photo-grain:none;
}

/* ── THE ACTION ────────────────────────────────────────────────────────────────────────────
   THE BUTTON IS THE ACCENT, AND THE SPECIFICATION SAYS `--bone-900`. This is the one place the
   contract overrules it and it is not a matter of taste: "is the main button make it in accent"
   is a decision already taken for the whole product, and every other theme here obeys it. A
   near-black button on a near-white page is the same button on every site we make, which is the
   thing the accent slot exists to stop. The specimen's own second sentence — "black and white
   carry the interface and the accent is spent once" — survives everywhere else: the accent
   appears on the button and nowhere else on the page, which is once.

   The label is sentence case at 500 — `--c-act-case: none`, the specification's own — because a
   button here is a word somebody reads, not a label on a shelf. The ink on it is derived by
   luminance in parts.css and is deliberately absent from this file. */
:is(#clay-page,#design-sheets).bone{
  --c-act-font:var(--c-body);
  --c-act-weight:500;
  --c-act-case:none;
  --c-act-track:-.012em;
  --c-act-bg:var(--c-accent);
  --c-act-bar-bg:var(--c-accent);
  --c-band-accent:var(--c-accent);
  --c-nav-dim:1;
}

/* ── A CARD ON THE PLATE ───────────────────────────────────────────────────────────────────
   A card on the deep plate cannot be `--c-fill`: `--c-fill` is re-derived from `--g` on every
   element that sets one, and `.c-card` is one of them, so `--g:var(--c-fill)` is a cycle — the
   browser throws both away and the card paints no background at all. `--bn-thing` is this theme's
   stated answer, one step up from the plate, and it is what the specimen draws as "the same card,
   on the contrast band". */
:is(#clay-page,#design-sheets).bone .c-g-ink .c-card{--g:var(--bn-thing);background:var(--g)}
:is(#clay-page,#design-sheets).bone .l-bc-thing{--g:var(--bn-thing);background:var(--g)}

/* ============================================================================================
   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).bone .sheet{color:inherit;font-family:inherit;background:none;border:0}
:is(#clay-page,#design-sheets).bone .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).bone button{font:inherit;color:inherit;background:none;border:0;
  text-align:inherit;-webkit-appearance:none;appearance:none}
:is(#clay-page,#design-sheets).bone .wrap{color:inherit;font-family:inherit}
:is(#clay-page,#design-sheets).bone .map-attr,
:is(#clay-page,#design-sheets).bone .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).bone{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 keyline 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. */
/* THE WORD ON THE PILL IS READ OFF THE PILL, NOT OFF THE BAND.
   `--c-card-bg` is one colour for the whole theme — white in the light room, a dark step in the
   dark one — and `--c-ink` is RE-DERIVED PER GROUND by parts.css. On an ink band in the light
   room those two meet as a white pill with pale words on it, which is a pill with nothing in it:
   "tags are unreadable for this theme". The band moved and the pill did not.
   So the ink comes from the pill's own fill, by luminance, which is the same derivation parts.css
   already does for `--c-quote-ink` — a pale pill gets black words, a dark one gets white, and
   neither depends on what the pill is standing on. */
:is(#clay-page,#design-sheets).bone .c-tag{border-color:var(--c-line);
  background:var(--c-card-bg);
  color:oklch(from var(--c-card-bg) clamp(0, (.58 - l) * 1000, 1) 0 h)}
:is(#clay-page,#design-sheets).bone .c-chip{border-color:var(--c-line);
  background:var(--c-card-bg);
  color:oklch(from var(--c-card-bg) clamp(0, (.58 - l) * 1000, 1) 0 h)}
/* the chosen one is the accent, and the ink on it is the button's — derived from the same fill by
   luminance in parts.css, so a pale accent gets black words and a deep one gets white */
:is(#clay-page,#design-sheets).bone .c-chip[aria-pressed="true"],
:is(#clay-page,#design-sheets).bone .c-chip.c-on,
:is(#clay-page,#design-sheets).bone .c-opt.c-on{background:var(--c-act-bg);
  color:var(--c-act-ink);border-color:var(--c-line)}

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

/* A LINK IS TEXT WITH A RULE UNDER IT, and the RULE is the accent — never the words. Every one
   of these designs refuses the accent on body text, and a link inside a paragraph is body text.
   The accent AS TEXT (`--c-accent-ink`) is stated once per room and never re-derived per band, so
   on the deep plate it would be a dark version of the owner's colour on a near-black. The accent
   under the word says the same thing and survives every band. */
:is(#clay-page,#design-sheets).bone .c-link{color:inherit;
  border-bottom-color:var(--c-accent)}
:is(#clay-page,#design-sheets).bone .c-link:hover{border-bottom-color:var(--c-ink)}

/* A PHOTOGRAPH IS FRAMED THE WAY A CARD IS — the same hairline, at the same weight, so a picture
   is an object standing on the page rather than a hole cut in it. A design whose card carries no
   keyline at all (`--c-card-bw:0`) gets no ring from this, which is the same sentence answering
   itself.

   A RING OUTSIDE THE BOX, not an inset one, and that took two attempts. A `.c-media` is a frame
   whose one child is an `<img>` filling it, and BOTH of the obvious answers paint underneath that
   child: an inset `box-shadow` paints above the element's own background and below its
   descendants, and an `outline` pulled inwards does the same. The ring was there, computed and
   correct, under every photograph on the site. A spread shadow OUTSIDE the box paints beyond the
   child's edge, follows the corner radius, and takes up no room — which is the whole requirement.

   Not on a full-bleed room, where the picture IS the band and the keyline would be a box round
   the screen. Not in the viewer either: somebody who opened a photograph wants the photograph. */
:is(#clay-page,#design-sheets).bone .c-media{background:var(--c-fill);
  box-shadow:0 0 0 var(--c-card-bw) var(--c-line)}
:is(#clay-page,#design-sheets).bone .c-behind .c-media,
:is(#clay-page,#design-sheets).bone .c-viewer .c-media{box-shadow:none}

/* CARDS, ROWS AND QUOTES. parts.css draws the box off the tokens above — the fill, the corner,
   the hairline and whatever this design puts under it — so nothing about the box is stated here.
   What IS stated is the ground a quotation takes, because a quotation is the one element on the
   page that carries a surface of its own. */
:is(#clay-page,#design-sheets).bone .c-row{border-color:var(--c-line)}
:is(#clay-page,#design-sheets).bone .c-quote{background:var(--c-quote-bg);
  border-color:var(--c-line)}
/* 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).bone .c-row-m,
:is(#clay-page,#design-sheets).bone .c-card-m,
:is(#clay-page,#design-sheets).bone .c-price{
  font-variant-numeric:tabular-nums;font-weight:var(--c-label-weight)}

/* 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. Open or closed is a fact, so it is never the accent. */
:is(#clay-page,#design-sheets).bone :is(.c-now,.c-live)::before{background:var(--bn-live);
  animation:bone-breathe 2.4s ease-in-out infinite}
@keyframes bone-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@media (prefers-reduced-motion: reduce){
  :is(#clay-page,#design-sheets).bone :is(.c-now,.c-live)::before{animation:none;opacity:1}
}

/* ============================================================================================
   PRESSABLE IS A PILL, AND NOTHING THAT HOLDS CONTENT IS.
   ============================================================================================
   Everything you press is a full pill; everything that HOLDS something takes the block corner,
   `--c-r`. The two shapes never swap, which is the half of a corner policy that is easiest to
   lose — a pill that holds a paragraph and a card you can press both read as a mistake.
   ============================================================================================ */
:is(#clay-page,#design-sheets).bone .c-act,
:is(#clay-page,#design-sheets).bone .c-chip,
:is(#clay-page,#design-sheets).bone .c-tag,
:is(#clay-page,#design-sheets).bone .c-opt,
:is(#clay-page,#design-sheets).bone .c-time,
:is(#clay-page,#design-sheets).bone .c-pick-b,
:is(#clay-page,#design-sheets).bone .btn,
:is(#clay-page,#design-sheets).bone .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; `--c-r-tap` is the layout's question — "how round is a thing you tap" — asked
   once, so a control added later is round without anybody remembering to come back and name it. */
:is(#clay-page,#design-sheets).bone{--c-r-tap:999px}

/* ============================================================================================
   THE SHEET — and every class its drawing writes
   ============================================================================================
   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).bone .sheet{background:var(--c-paper);color:var(--c-ink)}
/* THE VEIL IS WHERE THE ALPHA GOES. `--c-over` is stated SOLID above, because parts.css writes
   `--g:var(--c-over)` on a photograph band and derives every ink on it from that colour — hand it
   a colour with transparency in it and every word over a picture comes out transparent too. The
   transparency belongs where the veil is actually drawn, which is here. */
:is(#clay-page,#design-sheets).bone .sheet-veil{
  background:color-mix(in srgb, var(--c-over) var(--bn-veil), transparent)}
:is(#clay-page,#design-sheets).bone .sheet-host.viewer .sheet{background:var(--c-over);
  color:var(--c-flip-ink)}
:is(#clay-page,#design-sheets).bone .sheet-head{border-bottom:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).bone .h-sheet{font:var(--c-weight) var(--c-t4)/var(--c-lead-h) var(--c-display);
  letter-spacing:var(--c-track);color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .head{color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .eyebrow{font:var(--c-label-weight) 11px/1.2 var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);color:var(--c-faint)}
:is(#clay-page,#design-sheets).bone .img{background:var(--c-fill)}
:is(#clay-page,#design-sheets).bone .img img{filter:var(--c-photo)}
:is(#clay-page,#design-sheets).bone .viewer .img img,
:is(#clay-page,#design-sheets).bone .sheet .thumbs .img img{filter:none}

/* THE BUTTONS A SHEET DRAWS. `btn` is the sheet's word for what the page calls `c-act`, so it
   wears the same three tokens — the fill, the derived ink, and the held colour as a keyline —
   plus whatever this design puts under a button, so the basket's button is the page's button. */
:is(#clay-page,#design-sheets).bone .btn{display:inline-flex;align-items:center;
  justify-content:center;gap:8px;background:var(--c-act-bg);color:var(--c-act-ink);
  border:var(--c-card-bw) solid var(--c-line);box-shadow:var(--c-act-shadow);
  font:var(--c-act-weight) var(--c-t1)/1.2 var(--c-act-font);text-transform:var(--c-act-case);
  letter-spacing:var(--c-act-track);text-decoration:none;cursor:pointer}
:is(#clay-page,#design-sheets).bone .btn.ghost{background:var(--c-card-bg);color:var(--c-ink);
  text-decoration:none}
:is(#clay-page,#design-sheets).bone .btn.full{width:100%}
:is(#clay-page,#design-sheets).bone .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
:is(#clay-page,#design-sheets).bone .buyrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* the words a sheet sets */
:is(#clay-page,#design-sheets).bone .d{font-family:var(--c-display);font-weight:var(--c-weight);
  letter-spacing:var(--c-track);color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .d.mid{font-size:var(--c-t3)}
:is(#clay-page,#design-sheets).bone .lead{font-size:var(--c-t3);line-height:1.3;color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .mid{font-size:var(--c-t2);color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .prose{color:var(--c-soft);line-height:var(--c-body-h);
  max-width:var(--c-cap-body)}
:is(#clay-page,#design-sheets).bone .meta{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).bone .fine{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).bone .score{font-size:var(--c-t1);color:var(--c-soft);
  font-variant-numeric:tabular-nums}
:is(#clay-page,#design-sheets).bone .price,
:is(#clay-page,#design-sheets).bone .sum{font-weight:var(--c-label-weight);font-variant-numeric:tabular-nums;
  color:var(--c-ink);white-space:nowrap}
:is(#clay-page,#design-sheets).bone .price.lead{font-size:var(--c-t4)}
:is(#clay-page,#design-sheets).bone .price.mid{font-size:var(--c-t3)}

/* rows, rules and groups */
:is(#clay-page,#design-sheets).bone .row{border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).bone .row h3{font-family:var(--c-display);font-weight:var(--c-weight)}
:is(#clay-page,#design-sheets).bone .row p{color:var(--c-soft)}
:is(#clay-page,#design-sheets).bone .rows > :first-child{border-top:0}
:is(#clay-page,#design-sheets).bone .sheet .row.today{background:var(--c-fill)}
:is(#clay-page,#design-sheets).bone .sheet .row.today :is(h3,.price){color:var(--c-accent-ink)}
:is(#clay-page,#design-sheets).bone .sheet .row.gone{opacity:.5}
:is(#clay-page,#design-sheets).bone .rule{background:var(--c-line)}
:is(#clay-page,#design-sheets).bone .group-t{font:var(--c-weight) var(--c-t3)/var(--c-lead-h) var(--c-display);
  letter-spacing:var(--c-track);color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .group-n{font-size:var(--c-t1);color:var(--c-faint)}
:is(#clay-page,#design-sheets).bone .group-p{color:var(--c-soft)}
:is(#clay-page,#design-sheets).bone .group-p img{filter:var(--c-photo)}
:is(#clay-page,#design-sheets).bone .group-w{color:var(--c-faint);font-style:normal}
:is(#clay-page,#design-sheets).bone .foot{border-top:var(--c-bw) solid var(--c-line);
  color:var(--c-soft)}
:is(#clay-page,#design-sheets).bone .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).bone .card{background:var(--c-card-bg);color:inherit;
  border:var(--c-card-bw) solid var(--c-line);border-radius:var(--c-r-lg);
  box-shadow:var(--c-card-shadow)}
:is(#clay-page,#design-sheets).bone .card h3{font-family:var(--c-display);font-weight:var(--c-weight)}
:is(#clay-page,#design-sheets).bone .sheet .img,
:is(#clay-page,#design-sheets).bone .thumbs .img{border-radius:var(--c-r);
  background:var(--c-fill);overflow:hidden}
:is(#clay-page,#design-sheets).bone .tag{border:var(--c-bw) solid var(--c-line);
  background:var(--c-card-bg);color:var(--c-ink);font-size:11px}
:is(#clay-page,#design-sheets).bone .cats{display:flex;gap:8px;flex-wrap:wrap}
:is(#clay-page,#design-sheets).bone .strip{background:var(--c-fill)}
:is(#clay-page,#design-sheets).bone .live-mark{background:var(--c-card-bg);color:var(--c-ink);
  border:var(--c-bw) solid var(--c-line);border-radius:999px;font-family:var(--c-label);
  text-transform:var(--c-label-case);font-size:11px}
:is(#clay-page,#design-sheets).bone .c4{color:var(--c-soft)}

/* the controls: a quantity, an option, a time, a day */
:is(#clay-page,#design-sheets).bone .qty{border:var(--c-bw) solid var(--c-line);
  background:var(--c-card-bg);color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .opt{border:var(--c-bw) solid var(--c-line);
  background:var(--c-card-bg);color:var(--c-ink);cursor:pointer}
:is(#clay-page,#design-sheets).bone .opt.on,
:is(#clay-page,#design-sheets).bone .opts .opt[aria-pressed="true"]{background:var(--c-act-bg);
  color:var(--c-act-ink);border-color:var(--c-line)}
:is(#clay-page,#design-sheets).bone .times .time{border:var(--c-bw) solid var(--c-line);
  background:var(--c-card-bg);color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .cal{color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .cal-head{font:var(--c-label-weight) 11px/1.2 var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);color:var(--c-faint)}

/* the booking walk, and the fields in it */
:is(#clay-page,#design-sheets).bone .steps{color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .step{border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets).bone .step-n{font:var(--c-label-weight) 11px/1.2 var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);color:var(--c-faint);
  border-color:var(--c-line)}
:is(#clay-page,#design-sheets).bone .step.on .step-n{background:var(--c-ink);
  color:var(--c-paper)}
:is(#clay-page,#design-sheets).bone .step.done .step-n{background:var(--c-act-bg);
  color:var(--c-act-ink)}
:is(#clay-page,#design-sheets).bone .step-t{font:var(--c-weight) var(--c-t3)/var(--c-lead-h) var(--c-display);
  letter-spacing:var(--c-track);color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .step-v{color:var(--c-soft)}
:is(#clay-page,#design-sheets).bone .step-head{color:var(--c-ink);cursor:pointer}
:is(#clay-page,#design-sheets).bone .step-body{color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .form{color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .field :is(input,textarea,select){
  background:var(--c-field-bg);border:var(--c-field-bw) solid var(--c-line);
  border-block-end-width:var(--c-field-bw-b);border-radius:var(--c-r);color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .field :is(input,textarea,select):focus{
  background:var(--c-field-bg-hi);border-color:var(--c-accent)}
:is(#clay-page,#design-sheets).bone .now{font-family:var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);color:var(--bn-live);
  font-style:normal}
:is(#clay-page,#design-sheets).bone .pdp{color:var(--c-ink)}
:is(#clay-page,#design-sheets).bone .viewer{background:var(--c-over)}

/* ── AND THE ROOM INSIDE THEM ──────────────────────────────────────────────────────────────
   The four rules above this line and the block below are the one place the boundary leaks, and it
   is not this design's doing: `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 copy here: it is `parts.css` owning the sheet vocabulary the way it owns
   the page's, and then this block goes. Until then it is the minimum that stops a sheet drawing
   as an undifferentiated column, and every number in it is off the layout's own scale
   (`--c-u`) rather than a value of this theme's. Copied, unchanged, from the themes beside it.
   ── */
:is(#clay-page,#design-sheets).bone .btn{min-height:44px;padding:12px 22px}
:is(#clay-page,#design-sheets).bone .btn.sm{min-height:36px;padding:8px 16px;font-size:var(--c-t1)}
:is(#clay-page,#design-sheets).bone .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).bone .row{padding-block:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets).bone .rows{display:flex;flex-direction:column}
:is(#clay-page,#design-sheets).bone .foot{padding-top:calc(var(--c-u)*2);
  margin-top:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets).bone .qty{display:inline-flex;align-items:center;gap:4px;
  padding:4px}
:is(#clay-page,#design-sheets).bone .qty button{min-width:32px;min-height:32px}
:is(#clay-page,#design-sheets).bone .opt{padding:8px 14px;min-height:36px}
:is(#clay-page,#design-sheets).bone .tag{padding:5px 10px}
:is(#clay-page,#design-sheets).bone .times .time{padding:8px 14px;min-height:40px}
:is(#clay-page,#design-sheets).bone .step{padding-block:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets).bone .field input,
:is(#clay-page,#design-sheets).bone .field textarea,
:is(#clay-page,#design-sheets).bone .field select{padding:var(--c-field-pad);min-height:48px;
  width:100%}
:is(#clay-page,#design-sheets).bone .sum{margin-top:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets).bone .rule{height:var(--c-bw);margin-block:calc(var(--c-u)*2)}