/* attika studio, on the N system (public/n/tokens.css + parts.css, copied unchanged from owenfisher.co).
   This file only adds what a booking app needs that the site didn't have. The same rules hold: one unit (pt),
   concentric corners, no line dividers, hover is a step of fill, red only for what destroys something,
   green for done, layered dark tones in dark mode, nothing to press smaller than 44. Classes here are a-. */

:root {
  /* Thai and Chinese fall to the system's own faces; Schibsted Grotesk draws the Latin */
  --sans: var(--font-grotesk, "Schibsted Grotesk"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --col: calc(560 * var(--pt));                          /* the app is one column, the width of a phone held wide */
  /* the page frame (10 Nov, the grid pass). Below 900 every page is that one column. From 900 a page runs margin to margin
     on N's columns and is never capped or centred (N-SYSTEM 2), so the header's name, every title and every block share one
     left edge. A page and its side take 7 and 5 of 12 columns (4 and 4 of 8); a narrow page (a form, a booking, a legal
     page) takes the main column's width, from the same edge. The dashboard's frame starts after its sidebar (owner.css) */
  --span-main: 7; --span-side: 5;
  --frame-x0: 0px;
  /* the row above a title that holds the way back: as tall as a control, so a title is in the same place with or without one */
  --top-row: var(--c-reg);
  --bar-h: calc(60 * var(--pt));
  /* corners (N-SYSTEM 6 and 9e). Every rounded part here takes one of N's sizes, or an N size less the space around it,
     so nested corners run parallel: card 24 · 6 in · its picture 18 (the group size); group 18 · 6 in · rows 12;
     a row 12 · 8 in · the picture or date in it 4. A subtraction is done in points and takes the squircle factor after,
     never before. Boxes of words keep an inset at least their radius. Every part below is in the one squircle list. */
  --r-in-row: calc(4 * var(--sqk) * var(--pt));
  /* the bar is at the foot at every width, so the frame's bottom fade always clears it */
  --frame-top: calc(var(--s2) + var(--frame-h));
  --frame-bot: calc(var(--bar-space, var(--bar-h)) + var(--bar-edge) + var(--frame-h));
}
/* Thai stacks marks above and below the line: give every size a little more room */
:lang(th) { --l-d: calc(46 * var(--pt)); --l-t: calc(34 * var(--pt)); --l-h: calc(32 * var(--pt)); --l-b: calc(27 * var(--pt)); --l-s: calc(22 * var(--pt)); }
@media (width >= 600px) { :lang(th) { --l-d: calc(60 * var(--pt)); --l-t: calc(42 * var(--pt)); } }
@media (width < 1200px) { :root { --span-main: 4; --span-side: 4; } }

body.x { padding-bottom: calc(var(--bar-space, var(--bar-h)) + var(--bar-edge) + var(--frame-h) + var(--s2) + env(safe-area-inset-bottom, 0px)); }
main { display: block; }

/* The frame on iPhone Safari (Owen, 10 Nov: "mobile browser issues with the fading"). iOS 26 Safari runs the page on
   under the clock and under its own bar at the foot, but nothing the page draws can reach there: a fixed element stops
   at the page's edge (62pt down, 58 up from the foot), and Safari fills those strips only with the colour of a solid bar
   it finds touching the edge. A bar 8pt tall is enough; a 2pt line isn't, and a fade or a mask never is (all measured in
   the Simulator). Without one, each fade ended in a hard band with the page showing on beyond it. So each fade gets a
   thin solid bar of paper at its outer edge, inside its own solid part, which Safari then carries out under the clock
   and under its bar. Everywhere else it is invisible: the fade is already solid paper there.
   Safari reads only the topmost real element at the edge (not a ::before or ::after), so each bar is an element of its
   own (x-edge, at the end of the body) lying over its fade: the top one drawn after the top fade at its height in the
   stack; the bottom one just above the bottom fade, where it can't meet the bar (the bar stands off the foot). */
.x-edge { position: fixed; inset-inline: 0; height: var(--s2); background: var(--paper); pointer-events: none; }
.x-edge.top { top: 0; z-index: calc(var(--z-controls) - 1); opacity: 0; transition: opacity 200ms var(--ease-respond); }
.x-scrolled .x-edge.top { opacity: 1; }   /* with the top fade: until the page has moved, the name stays clear */
.x-edge.bottom { bottom: 0; z-index: var(--z-bar); }
.x input, .x select, .x textarea, .x button { font-family: var(--sans); }
.x-btn[disabled], .x-btn[aria-disabled="true"] { cursor: default; }
button.x-btn { -webkit-appearance: none; appearance: none; }

/* ============================== the page ============================== */
/* below 900: the phone's one column, centred once the screen is wider than it (every page, the home included) */
.a-page { width: 100%; max-width: calc(var(--col) + 2 * var(--margin)); margin-inline: auto; padding: var(--s5) var(--margin) 0; display: grid; gap: var(--s7); align-content: start; }
@media (width >= 900px) {
  /* from 900: the frame, margin to margin, on N's columns, one gutter apart */
  .a-page { max-width: none; margin-inline: 0; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
  /* a page's parts take the main column's width, from the left edge; a page of things to look through (.wide) takes every column */
  .a-page > * { grid-column: 1 / span var(--span-main); min-width: 0; }
  .a-page.wide > * { grid-column: 1 / -1; }
}
.a-stack { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.a-stack.tight { gap: var(--s2); }
.a-stack.loose { gap: var(--s5); }
/* words on the page (a title, a section's heading, a line of small print) all start on the column's edge; words in a box
   start at the box's own inset */
.a-sec-h { padding-inline: 0; }

/* the top is a title, not a toolbar: the name, and nothing to press */
.a-top { display: flex; align-items: center; gap: var(--s3); min-height: var(--c-reg); font-weight: 500; font-size: var(--t-h); line-height: var(--l-h); }
/* the same row at the small size: the mark at 28 beside the name at reading size (the studio's name over the owner's Today) */
.a-top.sm { gap: var(--s2); font-size: var(--t-b); line-height: var(--l-b); }
.a-mark { --mark: calc(36 * var(--pt)); flex: none; display: grid; place-items: center; width: var(--mark); height: var(--mark); border-radius: 50%; background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); }
.a-mark svg { width: calc(var(--mark) * 2 / 3); height: calc(var(--mark) * 2 / 3); }
.a-head { display: grid; gap: var(--s2); }

/* ============================== the picture ============================== */
/* each workshop has a photograph: square in cards and rows, wide at the top of a page. A media frame is N's plate (20) */
.a-art { display: block; overflow: hidden; border-radius: var(--r-plate); background: var(--fill-1); }
.a-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the one squircle list: every rounded part of this app that is not a capsule or a circle */
@supports (corner-shape: superellipse(1.8)) {
  .a-art, .a-card, .a-feature, .a-facts, .a-fact, .a-note, .a-tile, .a-stat, .a-next, .a-empty, .a-when, .a-switch, .a-pop, .a-pop button,
  .a-skel, .a-arts label, .x-field select, .a-logo { corner-shape: superellipse(var(--sq, 1.8)); }
  .a-skel.as-small, .a-skel.as-title { corner-shape: round; }   /* capsules stay capsules */
}

/* ============================== cards: one whole card is one thing to press ============================== */
/* a list of cards: one per row on a phone; from 900 on the columns, one gutter apart both ways: two across (4 of 8),
   then four across (3 of 12). The lead, when a list has one, runs across on 8 columns and takes six columns and two rows
   on 12 */
.a-cards { display: grid; gap: var(--s3); }
@media (width >= 900px) {
  .a-cards { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gutter); }
  .a-cards > * { grid-column: span 4; min-width: 0; }
  .a-cards > .a-feature { grid-column: 1 / -1; }
}
@media (width >= 1200px) {
  .a-cards > * { grid-column: span 3; }
  .a-cards > .a-feature { grid-column: span 6; grid-row: span 2; }
}
.a-card { display: grid; grid-template-columns: calc(104 * var(--pt)) minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--gp); border-radius: var(--r-card);
  background: var(--fill-0); transition: background-color 150ms var(--ease-respond); -webkit-tap-highlight-color: transparent; }
.a-card .a-art { aspect-ratio: 1; border-radius: var(--r-group); }   /* 24 less the 6 around it */
.a-card-body { display: grid; gap: var(--s1); min-width: 0; padding: var(--s2) var(--s3) var(--s2) 0; }
.a-card-body .x-headline { font-size: var(--t-b); line-height: var(--l-b); }
.a-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
@media (hover: hover) { a.a-card:hover { background: var(--fill-1); } }
a.a-card:active { background: var(--fill-2); }
/* a ring drawn inside the shape, so the shape's own corner never cuts it */
a.a-card:focus-visible, a.a-feature:focus-visible, .a-tile:focus-visible, a.a-fact:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
/* a card that stands up: the picture on top (4:3), its words under it, 18 in (the card's 24 less the 6 around the picture).
   Cards stand in a strip on a phone, and in every list from 1200; from 900 to 1199 they lie down, two across */
.a-strip > .a-card { grid-template-columns: minmax(0, 1fr); align-items: stretch; align-content: start; gap: var(--s3); }
.a-strip > .a-card .a-art { aspect-ratio: 4 / 3; }
.a-strip > .a-card .a-card-body { padding: 0 calc(var(--i-card) - var(--gp)) calc(var(--i-card) - var(--gp)); }
@media (width >= 900px) and (width < 1200px) {
  .a-strip > .a-card { grid-template-columns: calc(104 * var(--pt)) minmax(0, 1fr); gap: var(--s4); align-items: center; }
  .a-strip > .a-card .a-art { aspect-ratio: 1; }
  .a-strip > .a-card .a-card-body { padding: var(--s2) var(--s3) var(--s2) 0; }
}
@media (width >= 1200px) {
  .a-cards > .a-card { grid-template-columns: minmax(0, 1fr); align-items: stretch; align-content: start; gap: var(--s3); }
  .a-cards > .a-card .a-art { aspect-ratio: 4 / 3; }
  .a-cards > .a-card .a-card-body { padding: 0 calc(var(--i-card) - var(--gp)) calc(var(--i-card) - var(--gp)); }
}

/* a strip: a short row of cards (This weekend). Sideways on a phone, the next one showing at the screen's edge; from 900
   one row on the columns, as the list under it, never more than four (the rest are in that list) */
.a-strip { display: flex; gap: var(--s3); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
  /* out to the screen's edges, whatever the column's width, its first card on the column's edge */
  margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%);
  /* the same distance again for snapping, written without %: a scroller's own scroll-padding reads % against itself
     (here the whole screen), which made it 0 and snapped the first card to the screen's edge */
  scroll-padding-inline: max(var(--margin), calc((100vw - var(--col)) / 2)); }
.a-strip::-webkit-scrollbar { display: none; }
.a-strip > * { flex: 0 0 calc(240 * var(--pt)); min-width: 0; scroll-snap-align: start; }
@media (width >= 900px) {
  .a-strip { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gutter); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .a-strip > * { grid-column: span 4; }
  .a-strip > :nth-child(n + 5) { display: none; }
}
@media (width >= 1200px) { .a-strip > * { grid-column: span 3; } }

/* the featured one: the page's one dominant thing */
.a-feature { display: grid; gap: var(--s4); padding: var(--gp); border-radius: var(--r-card); background: var(--fill-0); transition: background-color 150ms var(--ease-respond); -webkit-tap-highlight-color: transparent; }
.a-feature .a-art { aspect-ratio: 16 / 9; border-radius: var(--r-group); }
/* its words sit 24 in from the card's edge, the card's own radius */
.a-feature-body { display: grid; gap: var(--s2); padding: 0 calc(var(--i-card) - var(--gp)) calc(var(--i-card) - var(--gp)); }
.a-feature-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }
@media (hover: hover) { a.a-feature:hover { background: var(--fill-1); } }
a.a-feature:active { background: var(--fill-2); }
/* from 900 to 1199 the lead runs across its list: the picture and the words side by side. From 1200 it stands up in six
   columns and two rows, its picture taking the height the two rows give it */
@media (width >= 900px) and (width < 1200px) {
  .a-page.wide .a-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .a-page.wide .a-feature-body { padding: calc(var(--i-card) - var(--gp)); gap: var(--s3); }
}
@media (width >= 1200px) {
  .a-cards > .a-feature { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .a-cards > .a-feature .a-art { aspect-ratio: auto; height: 100%; min-height: calc(240 * var(--pt)); }
}

/* ============================== small words in a pill: a state, never a button ============================== */
.a-tag { display: inline-flex; align-items: center; gap: var(--s1); height: calc(28 * var(--pt)); padding: 0 calc(10 * var(--pt)); border-radius: var(--r-pill);
  background: var(--fill-2); color: var(--ink); font-size: var(--t-s); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.a-tag.ok { background: var(--ok-bg); color: var(--ok); }
.a-tag.ink { background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); }
.a-tag.quiet { background: var(--fill-1); color: var(--grey); }
.a-tag svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.a-price { font-weight: 500; }

/* chips that scroll sideways rather than wrap, to the screen's edge */
.a-scroll { display: flex; gap: calc(6 * var(--pt)); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
.a-scroll::-webkit-scrollbar { display: none; }
.a-scroll > * { flex: none; }
a.x-chip[aria-current="true"] { background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); }
.x-chip .a-n { margin-left: var(--s2); color: var(--grey); font-variant-numeric: tabular-nums; }
.x-chip[aria-current="true"] .a-n, .x-chip[aria-pressed="true"] .a-n { color: inherit; opacity: .7; }

/* ============================== facts: a label and its value, in one soft group ============================== */
.a-facts { display: grid; gap: calc(4 * var(--pt)); padding: var(--gp); border-radius: var(--r-group); background: var(--fill-0); }
.a-fact { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); min-height: calc(46 * var(--pt)); padding: var(--s3) var(--rpl); border-radius: var(--r-item); }
.a-fact > :first-child { flex: none; color: var(--grey); }
.a-fact > :last-child { text-align: right; min-width: 0; font-weight: 500; }
.a-fact.total { background: var(--fill-1); }
.a-fact.total > :last-child { font-size: var(--t-h); line-height: var(--l-h); }

/* a note: a few quiet words on their own surface */
/* a box of words: N's card pair, radius 24 and inset 24 */
.a-note { display: grid; gap: var(--s1); padding: var(--i-card); border-radius: var(--r-card); background: var(--fill-0); }
.a-note.wrong { background: var(--danger-bg); color: var(--danger); font-weight: 500; }
.a-note.ok { background: var(--ok-bg); }
.a-note.ok .x-strong { color: var(--ok); }

/* ============================== date tiles ============================== */
.a-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(6 * var(--pt)); }
.a-tile { display: grid; justify-items: center; align-content: center; gap: calc(2 * var(--pt)); min-height: calc(104 * var(--pt)); padding: var(--s3) var(--s1); border: 0; border-radius: var(--r-item);
  background: var(--btn-quiet); color: var(--ink); font: 400 var(--t-s) / var(--l-s) var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms var(--ease-respond), color 140ms; }
.a-tile b { font-size: var(--t-t); line-height: var(--l-t); font-weight: 500; font-variant-numeric: tabular-nums; }
.a-tile .x-g { font-size: var(--t-s); }
@media (hover: hover) { .a-tile:not([disabled]):hover { background: var(--btn-quiet-hover); } }
.a-tile:not([disabled]):active { background: var(--btn-quiet-press); }
.a-tile[aria-pressed="true"] { background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); }
.a-tile[aria-pressed="true"] .x-g { color: light-dark(color-mix(in oklab, var(--paper) 70%, transparent), color-mix(in oklab, var(--ink) 70%, transparent)); }
.a-tile[disabled] { cursor: default; background: var(--fill-0); color: var(--grey); }

/* ============================== the stepper: how many places ============================== */
.a-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--gp); border-radius: var(--r-pill); background: var(--fill-0); }
.a-step .x-ibtn { width: var(--c-lg); height: var(--c-lg); background: var(--btn-float); box-shadow: var(--lift-2); }
.a-step .x-ibtn:active { background: var(--btn-float-press); }
.a-step .x-ibtn[disabled] { background: transparent; box-shadow: none; color: color-mix(in oklab, var(--grey) 45%, transparent); cursor: default; }
.a-step output { text-align: center; font-size: var(--t-h); line-height: var(--l-h); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ============================== fields the site didn't need ============================== */
.x-field select { font: inherit; font-size: max(16px, var(--t-b)); color: var(--ink); height: var(--c-lg); padding: 0 calc(40 * var(--pt)) 0 calc(14 * var(--pt)); border: 0; border-radius: var(--r-item);
  background: var(--fill-1) no-repeat right calc(14 * var(--pt)) center / calc(14 * var(--pt)); -webkit-appearance: none; appearance: none; outline: none; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23808080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.x-field select:focus { background-color: transparent; box-shadow: 0 0 0 2px var(--ring); }
.x-field input, .x-field textarea, .x-field select { width: 100%; min-width: 0; }
.x-field textarea { height: auto; min-height: calc(120 * var(--pt)); padding-block: var(--s3); line-height: var(--l-b); }
.x-field input::placeholder, .x-field textarea::placeholder { color: color-mix(in oklab, var(--grey) 70%, transparent); }
.x-field input[type="date"], .x-field input[type="time"] { -webkit-appearance: none; appearance: none; min-height: var(--c-lg); display: block; text-align: left; }
.x-field .a-hint { font-size: var(--t-s); line-height: var(--l-s); color: var(--grey); }
.a-fields { display: grid; gap: var(--s4); }
.a-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.a-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.a-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* a switch: on or off, the whole row to press */
.a-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--c-row); padding: var(--s2) var(--rpl); border-radius: var(--r-item); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.a-switch > span { display: grid; gap: calc(2 * var(--pt)); min-width: 0; }
.a-switch input { position: absolute; opacity: 0; pointer-events: none; }
.a-switch i { flex: none; position: relative; width: calc(52 * var(--pt)); height: calc(32 * var(--pt)); border-radius: var(--r-pill); background: var(--fill-2); transition: background-color 180ms var(--ease-respond); }
.a-switch i::after { content: ""; position: absolute; top: calc(3 * var(--pt)); left: calc(3 * var(--pt)); width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 2px 6px -2px rgb(0 0 0 / .25); transition: transform 180ms var(--ease-respond); }
.a-switch input:checked + i { background: var(--ok-solid); }
.a-switch input:checked + i::after { transform: translateX(calc(20 * var(--pt))); }
.a-switch input:focus-visible + i { outline: 2px solid var(--ring); outline-offset: 2px; }

/* a switch between a few options (language), on buttons */
.a-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(2 * var(--pt)); padding: var(--s1); border-radius: var(--r-pill); background: light-dark(color-mix(in oklab, var(--ink) 6%, transparent), var(--dk-1)); }
.a-seg button { height: calc(44 * var(--pt)); padding: 0 var(--s3); border-radius: var(--r-pill); color: var(--grey); font-size: var(--t-b); white-space: nowrap; transition: color 200ms var(--ease-respond), background-color 200ms var(--ease-respond); }
.a-seg button[aria-pressed="true"] { background: light-dark(var(--paper), var(--dk-hi)); color: var(--ink); font-weight: 500;
  box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .08)), 0 1px 2px light-dark(rgb(0 0 0 / .08), rgb(0 0 0 / .35)), 0 0 0 1px light-dark(color-mix(in oklab, var(--ink) 6%, transparent), transparent); }

/* ============================== rows with two lines ============================== */
.x-rows .x-row.a-row { align-items: center; gap: var(--s3); min-height: calc(64 * var(--pt)); }
.a-row-main { display: grid; gap: calc(2 * var(--pt)); min-width: 0; flex: 1; }
.a-row-main > :first-child { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-row-main > .x-small { color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-row-end { flex: none; display: inline-flex; align-items: center; gap: var(--s2); }
.a-row .x-mark { flex: none; width: calc(24 * var(--pt)); color: var(--grey); }
/* a picture or a date in a row sits 8 in on three sides, so its corner is the row's 12 less 8 */
.x-rows .x-row.a-row:has(> .a-thumb, > .a-when) { padding-left: var(--s2); }
.a-thumb { flex: none; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: var(--r-in-row); }
.a-when { flex: none; display: grid; justify-items: center; align-content: center; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: var(--r-in-row); background: var(--fill-1); line-height: 1.05; }
.a-when b { font-size: var(--t-b); font-weight: 500; font-variant-numeric: tabular-nums; }
.a-when span { font-size: var(--t-s); color: var(--grey); }
.x-rows.flat { background: none; padding: 0; }

/* how full a date is */
.a-meter { height: calc(6 * var(--pt)); border-radius: var(--r-pill); background: var(--fill-2); overflow: hidden; }
.a-meter i { display: block; height: 100%; border-radius: inherit; background: light-dark(var(--ink), var(--dk-hi-2)); }
.a-meter.full i { background: var(--ok-solid); }

/* ============================== numbers (the owner's day) ============================== */
.a-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.a-stat { display: grid; gap: var(--s1); align-content: start; padding: var(--s4); border-radius: var(--r-item); background: var(--fill-0); min-width: 0; }   /* words 12 or more in, so the item size */
.a-stat b { font-size: var(--t-t); line-height: var(--l-t); font-weight: 500; letter-spacing: -0.012em; }
.a-stat span { font-size: var(--t-s); line-height: var(--l-s); color: var(--grey); }
a.a-stat { transition: background-color 150ms var(--ease-respond); }
@media (hover: hover) { a.a-stat:hover { background: var(--fill-1); } }

/* the next thing on: an ink card, the one dominant thing on the owner's first screen */
.a-next { display: grid; gap: var(--s4); padding: var(--i-card); border-radius: var(--r-card); background: light-dark(var(--ink), var(--dk-2)); color: light-dark(var(--paper), var(--ink)); }
.a-next .x-g { color: light-dark(color-mix(in oklab, var(--paper) 64%, transparent), var(--grey)); }
.a-next .a-meter { background: light-dark(color-mix(in oklab, var(--paper) 20%, transparent), var(--fill-2)); }
.a-next .a-meter i { background: light-dark(var(--paper), var(--ink)); }
.a-next .x-btn.pri { background: light-dark(var(--paper), var(--dk-hi)); color: var(--ink); width: 100%; }

/* nothing here yet */
.a-empty { display: grid; justify-items: center; gap: var(--s2); padding: var(--s7) var(--s5); border-radius: var(--r-card); background: var(--fill-0); text-align: center; }
.a-empty .x-btn { margin-top: var(--s3); }

/* sample data, said loud and early */
.a-demo { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--fill-1); font-size: var(--t-s); line-height: var(--l-s); color: var(--grey); width: fit-content; }
.a-demo i { flex: none; width: calc(8 * var(--pt)); height: calc(8 * var(--pt)); border-radius: 50%; background: var(--live); }

/* ============================== the bar: where the thumb already is ============================== */
/* two floating shapes on the page's own margins: a lead (back, or the language) and the screen's one action */
.a-bar { position: fixed; z-index: var(--z-bar); left: 0; right: 0; bottom: calc(var(--bar-edge) + env(safe-area-inset-bottom, 0px)); pointer-events: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: end;
  width: 100%; max-width: calc(var(--col) + 2 * var(--margin)); margin-inline: auto; padding-inline: max(var(--margin), env(safe-area-inset-left)) max(var(--margin), env(safe-area-inset-right)); }
.a-bar > * { pointer-events: auto; }
.a-bar:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.a-bar .x-btn, .a-bar .x-tab { height: var(--c-lg); width: 100%; min-width: 0; }
.a-bar .x-btn > span, .a-bar .x-tab > span { overflow: hidden; text-overflow: ellipsis; }
.a-bar .x-btn.pri { box-shadow: 0 1px 2px light-dark(rgb(20 18 16 / .1), transparent), 0 6px 18px -6px light-dark(rgb(20 18 16 / .35), rgb(0 0 0 / .6)), inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .09)); }
.a-bar .x-btn.pri.is-asleep { background: var(--btn-float); box-shadow: var(--lift-2); color: var(--grey); }
.a-bar .x-btn.pri.ok { background: color-mix(in oklab, var(--ok) 14%, var(--raised)); box-shadow: var(--rim-light), var(--lift-2); }
/* dark text on the lighter red of dark mode, so the words keep their contrast */
.a-bar .x-btn.danger, .x-btn.danger { background: var(--danger); color: light-dark(#fff, oklch(0.2 0.03 25)); }
.a-bar .x-ibtn { width: var(--c-lg); height: var(--c-lg); background: var(--btn-float); box-shadow: var(--lift-2); }
@media (hover: hover) { .a-bar .x-ibtn:hover { background: var(--btn-float-hover); } }
.a-bar .x-ibtn:active { background: var(--btn-float-press); }
.x-btn .a-spin { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: a-spin 700ms linear infinite; }
@keyframes a-spin { to { rotate: 360deg; } }

/* the language panel opens beside the button that was pressed, and closes twice as quickly */
.a-pop { position: absolute; left: max(var(--margin), env(safe-area-inset-left)); bottom: calc(100% + var(--s2)); z-index: 1; display: grid; gap: calc(4 * var(--pt)); min-width: calc(200 * var(--pt)); padding: var(--gp);
  border-radius: var(--r-group); background: var(--raised); box-shadow: var(--rim-light), var(--lift-3); transform-origin: bottom left;
  opacity: 0; transform: translateY(4px) scale(.96); visibility: hidden; pointer-events: none;
  transition: opacity 170ms var(--ease-settle), transform 170ms var(--ease-settle), visibility 0s linear 170ms; }
.a-pop.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 340ms var(--ease-settle), transform 340ms var(--ease-settle), visibility 0s; }
.a-pop button { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); width: 100%; min-height: var(--c-lg); padding: 0 var(--rpl); border-radius: var(--r-item); font-size: var(--t-b); text-align: left; transition: background-color 150ms var(--ease-respond); }
@media (hover: hover) { .a-pop button:hover { background: var(--fill-1); } }
.a-pop button[aria-checked="true"] { background: var(--fill-2); font-weight: 500; }
.a-pop button svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
@media (prefers-reduced-motion: reduce) { .a-pop, .a-pop.is-open { transform: none; transition: opacity 150ms linear, visibility 0s; } }

/* ============================== the owner's side ============================== */
/* four places, always in reach: one raised bar of labelled tabs */
.a-tabs { position: fixed; z-index: var(--z-bar); left: max(var(--margin), env(safe-area-inset-left)); right: max(var(--margin), env(safe-area-inset-right)); bottom: calc(var(--bar-edge) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: calc(2 * var(--pt)); height: calc(64 * var(--pt)); padding: var(--s1); max-width: var(--col); margin-inline: auto;
  border-radius: var(--r-pill); background: var(--btn-float); box-shadow: var(--rim-light), var(--lift-2); }
/* each tab is as wide as its word needs, and they share what is left: a long word is never cut while a short one has room to spare */
.a-tabs a { flex: 1 1 auto; display: grid; justify-items: center; align-content: center; gap: calc(2 * var(--pt)); min-width: 0; padding-inline: var(--s1); border-radius: var(--r-pill); color: var(--grey); font-size: var(--t-s); line-height: var(--l-s); letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent; transition: background-color 150ms var(--ease-respond), color 150ms var(--ease-respond); }
.a-tabs a svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.a-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .a-tabs a:hover { color: var(--ink); } }
.a-tabs a[aria-current="page"] { background: var(--fill-2); color: var(--ink); font-weight: 500; }
/* the bar's height is read by the page's frame and its bottom space, which live on the root: so the root is told which bar this page has */
:root:has(.a-manage) { --bar-h: calc(64 * var(--pt)); }
:root:has(.a-manage.has-add) { --bar-space: calc(64 * var(--pt) + var(--s2) + var(--c-lg)); }
/* the page's one action floats just above the tabs, under the thumb */
.a-add { position: fixed; z-index: var(--z-bar); right: max(var(--margin), env(safe-area-inset-right)); bottom: calc(var(--bar-edge) + env(safe-area-inset-bottom, 0px) + 64 * var(--pt) + var(--s2)); }
.a-add .x-btn { height: var(--c-lg); box-shadow: 0 1px 2px light-dark(rgb(20 18 16 / .1), transparent), 0 6px 18px -6px light-dark(rgb(20 18 16 / .35), rgb(0 0 0 / .6)), inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .09)); }
@media (width >= 600px) { .a-add { right: max(var(--margin), calc((100vw - var(--col)) / 2)); } }
/* a page inside a section: its own back and action take the tabs' place */
.a-manage.is-inner .a-tabs, .a-manage.is-inner .a-add { display: none; }
:root:has(.a-manage.is-inner) { --bar-h: calc(60 * var(--pt)); --bar-space: calc(60 * var(--pt)); }

/* the two-line title of an owner's page */
.a-title { display: grid; gap: var(--s1); }

/* ============================== pages with no site header: the dashboard, the admin, their doors (main.a-app) ============================== */
/* From 900 the first line is 12 from the top, level with the dashboard's sidebar. The top row, as tall as a control, holds
   the way back (the bar's round button, moved up) and the page's small line; the title sits just under it, in the same
   place on every page and never pushed along by the way back. The page's one action stands on the title's line at the
   frame's right edge, and stays there as the page moves, as the phone's bar does at the foot */
@media (width >= 900px) {
  :root:has(.a-app) {
    --app-top: var(--s3);
    --app-bar-y: calc(var(--app-top) + var(--top-row) + var(--s1) + (var(--l-t) - var(--c-lg)) / 2);
    --frame-top: calc(var(--app-bar-y) + var(--c-lg) + var(--s2) + var(--frame-h));
    --frame-bot: var(--frame-h);
    --bar-space: 0px;
  }
  .a-app .a-page { padding-top: var(--app-top); }
  .a-app .a-page:not(:has(.a-title)) { padding-top: calc(var(--app-top) + var(--top-row) + var(--s1)); }
  .a-app .a-title:has(> :is(.x-small, .as-small):first-child) { grid-template-rows: var(--top-row) auto; }
  .a-app .a-title > :is(.x-small, .as-small):first-child { align-self: center; }
  .a-app .a-title:not(:has(> :is(.x-small, .as-small):first-child)) { padding-top: calc(var(--top-row) + var(--s1)); }
  /* the header row */
  .a-app :is(.a-bar, .a-add) { top: var(--app-bar-y); bottom: auto; left: var(--frame-x0); right: 0; width: auto; max-width: none; margin: 0;
    padding-inline: var(--margin); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); pointer-events: none; }
  .a-app :is(.a-bar, .a-add) > * { pointer-events: auto; }
  .a-app :is(.a-bar, .a-add) > .x-btn { grid-column: 2; grid-row: 1; width: auto; }
  /* what went wrong is said just under the action that was pressed */
  .a-app .a-bar > .a-note { grid-column: 1 / -1; grid-row: 2; justify-self: end; width: min(100%, calc(420 * var(--pt))); }
  /* the way back: the round button in the top row, on the frame's left edge; the small line follows it */
  .a-app .a-bar > .x-ibtn { position: fixed; top: var(--app-top); left: calc(var(--frame-x0) + var(--margin)); width: var(--c-reg); height: var(--c-reg); }
  .a-app:has(.a-bar > .x-ibtn):not(:has(.is-top)) .a-title > :is(.x-small, .as-small):first-child { margin-inline-start: calc(var(--c-reg) + var(--s3)); }
}
/* the way back's name, on a pointer: beside it, since there is no room above the top row */
@media (width >= 900px) and (hover: hover) {
  :is(.a-app .a-bar > .x-ibtn, .p-back)[data-tip]::after { left: calc(100% + var(--s2)); bottom: auto; top: 50%; transform: translate(-4px, -50%); }
  :is(.a-app .a-bar > .x-ibtn, .p-back)[data-tip]:is(:hover, :focus-visible)::after { transform: translate(0, -50%); }
}
.a-actions { display: grid; gap: var(--s2); }
.a-actions .x-btn { width: 100%; height: var(--c-lg); }
.a-actions.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-btn.quiet-danger { background: var(--danger-bg); color: var(--danger); }
@media (hover: hover) { .x-btn.quiet-danger:hover { background: var(--danger-bg-hover); } }
.a-search { position: relative; }
.a-search svg { position: absolute; left: calc(16 * var(--pt)); top: 50%; width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); translate: 0 -50%; color: var(--grey); pointer-events: none; }
.a-search input { width: 100%; height: var(--c-lg); padding: 0 var(--s4) 0 calc(44 * var(--pt)); border: 0; border-radius: var(--r-pill); background: var(--fill-1); font: inherit; font-size: max(16px, var(--t-b)); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.a-search input:focus { background: transparent; box-shadow: 0 0 0 2px var(--ring); }
/* which drawing a workshop wears */
.a-arts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(6 * var(--pt)); }
.a-arts label { position: relative; cursor: pointer; border-radius: var(--r-item); }
.a-arts input { position: absolute; opacity: 0; pointer-events: none; }
.a-arts .a-art { aspect-ratio: 1; border-radius: var(--r-item); }
.a-arts input:checked + .a-art { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.a-arts input:focus-visible + .a-art { outline: 2px solid var(--ring); outline-offset: 5px; }
/* loading: the page's shapes, waiting */
.a-skel { border-radius: var(--r-group); background: var(--fill-1); animation: a-skel 1.2s var(--ease-ui) infinite alternate; }
@keyframes a-skel { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .a-skel, .x-btn .a-spin { animation: none; } }

/* ============================== customer pages ============================== */
.a-hero { aspect-ratio: 16 / 9; }
.a-tick { display: grid; place-items: center; width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); margin-bottom: var(--s2); border-radius: 50%; background: var(--ok-solid); color: var(--ok-on); }
.a-tick svg { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }

/* Lucide draws in a 24 box with air around it, so beside a word an icon sits at 18 to show the 14 the system asks for; it never squashes */
.x-btn svg { flex: none; width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
/* Lucide sets its weight on the svg; N's parts set 1.4 on paths inside buttons, so the drawn lines are told to take the icon's own */
.x .lucide :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-width: inherit; }

/* owner pages (added) */
/* a form's parts: closer than a page's sections, further apart than the fields inside them */
.a-form { display: grid; gap: var(--s6); min-width: 0; }
/* two short things on one line, wrapping when they can't share it */
.a-split { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); }
.a-title, .a-title h1 { min-width: 0; overflow-wrap: anywhere; }
/* an icon button that destroys, in any language (the N rule reads the English label) */
.x-ibtn.a-danger { background: var(--danger-bg); color: var(--danger); }
@media (hover: hover) { .x-ibtn.a-danger:hover { background: var(--danger-bg-hover); } }
/* a row that holds buttons is not itself one */
.x-rows div.x-row { cursor: default; }
.a-row-end .x-btn { --btn-px: var(--s3); }
/* a fact that goes somewhere */
a.a-fact { transition: background-color 150ms var(--ease-respond); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { a.a-fact:hover { background: var(--fill-1); } }
a.a-fact:active { background: var(--fill-2); }
.a-go { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s1); }
.a-go svg { flex: none; width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); color: var(--grey); }
/* what went wrong, said just above the bar's buttons, on a surface of its own */
.a-bar .a-note { grid-column: 1 / -1; background: color-mix(in oklab, var(--danger) 14%, var(--raised)); box-shadow: var(--lift-2); }
/* numbers in a row where one is money: that tile is as wide as its number, the others share what is left */
.a-stats.fit { display: flex; }
.a-stats.fit .a-stat { flex: 1 1 0; padding-inline: var(--s3); }
.a-stats.fit .a-stat.money { flex: 0 0 auto; max-width: 60%; }
/* a search that holds a term has its own way to clear it, in the box */
.a-search input::-webkit-search-cancel-button { display: none; }
.a-search:has(.x-ibtn) input { padding-right: var(--c-lg); }
.a-search .x-ibtn { position: absolute; right: var(--s1); top: 50%; translate: 0 -50%; background: transparent; }
.a-search .x-ibtn:hover { background: var(--btn-quiet-hover); }
.a-search .x-ibtn:active { background: var(--btn-quiet-press); }
.a-search .x-ibtn svg { position: static; translate: none; pointer-events: auto; }
.x-field select { text-overflow: ellipsis; }
/* two buttons sharing a row keep their words clear of the ends */
.a-actions.two .x-btn { --btn-px-lg: var(--s3); min-width: 0; }
.a-actions.two .x-btn > span { overflow: hidden; text-overflow: ellipsis; }
/* loading shapes */
.a-skel.as-small { width: 40%; height: var(--l-s); border-radius: var(--r-pill); }
.a-skel.as-title { width: 60%; height: var(--l-t); border-radius: var(--r-pill); }
.a-skel.as-card { height: calc(200 * var(--pt)); border-radius: var(--r-card); }
.a-skel.as-row { height: calc(64 * var(--pt)); }

/* ============================== studios and owner accounts ============================== */
/* a studio without a logo of its own: its first letter in the mark's circle */
.a-mark b { font-size: var(--t-b); line-height: 1; font-weight: 500; }
.x-rows .x-row.a-row:has(> .a-mark) { padding-left: var(--s2); }
/* the mark's three sizes, each a circle (a capsule, so it nests in any corner): beside a line of small words 28, beside a
   name 36 (the default), on its own 96. What is in it keeps its share of the circle */
.a-mark.sm { --mark: calc(28 * var(--pt)); }
.a-mark.sm b { font-size: var(--t-s); }
.a-mark.lg { --mark: calc(96 * var(--pt)); }
.a-mark.lg b { font-size: calc(44 * var(--pt)); }
/* a studio's own logo, whole inside the circle (the phone fits it there before sending: components/manage/logo-image.ts),
   on white in both themes. The logo is the studio's content, as a photo is, not the app's chrome: the white is its paper,
   as on its sign and its cards, so dark ink never vanishes on a dark page, and the circle stays the size of a name's mark,
   never a panel. A light logo on a see-through background would vanish on the white: the phone puts N's ink behind it. A
   logo on a colour of its own brings that colour to the edge of the circle */
:root { --logo-ground: #fff; }
/* the white stops a hair inside the circle and the logo is cut by the circle itself, so only the logo ever reaches the edge
   (a white painted to the edge shows through as a fine light ring round a logo with a colour of its own) */
.a-mark.is-logo { background: radial-gradient(closest-side, var(--logo-ground) calc(100% - 1px), transparent); clip-path: circle(50%); }
.a-mark.is-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* the logo where it is chosen: the mark at its biggest, alone and centred on a soft stage (a card's corner); while a new one
   is on its way it breathes, as a loading shape does */
.a-logo { display: grid; place-items: center; padding: var(--s5); border-radius: var(--r-card); background: var(--fill-0); }
.a-logo.is-busy .a-mark { animation: a-skel 1.2s var(--ease-ui) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .a-logo.is-busy .a-mark { animation: none; opacity: .6; } }
/* a line naming the studio (At attika studio, under a workshop's title): its mark at the small size, then the words */
.a-by { display: flex; align-items: center; gap: var(--s2); }
/* a link to hand to someone: the words wrap anywhere, so a long link never pushes the page wide */
.a-link { overflow-wrap: anywhere; word-break: break-all; font-size: var(--t-s); line-height: var(--l-s); user-select: all; -webkit-user-select: all; }

/* a workshop with no picture yet: a soft panel with a small picture mark, never a photo of something else */
.a-art.is-empty { display: grid; place-items: center; color: color-mix(in oklab, var(--grey) 60%, transparent); }
.a-art.is-empty svg { width: 22%; height: auto; max-width: calc(44 * var(--pt)); min-width: calc(18 * var(--pt)); }