/* operator.css: the operator's one screen (the package cards) and the values the shared pieces take here.
   Everything that opens from it is a view in the shared drawer (ui.css, ui.js). RN441, 2 Oct 2026. */

:root {
  --page: #000308; --ground: #01050f;
  --ink: #f0f3ee; --ink-2: #a5b2b5; --ink-3: #829299;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-num: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, sans-serif;
  /* what the shared pieces take in the operator app */
  --ui-font: var(--font); --ui-font-num: var(--font-num);
  --ui-ink: #f5f7fb; --ui-ink-2: rgba(233, 239, 248, 0.82); --ui-ink-3: rgba(209, 220, 236, 0.6);
  --ui-line: rgba(191, 217, 217, 0.12);
  --ui-sheet: rgb(8, 11, 19); --ui-sheet-edge: rgba(255, 255, 255, 0.17);
  /* the product's own colour, in its roles (RN615): the blue he chose from the logo's family (RN622). The colour
     itself fills an action and lights the place behind the menu sign; as words or a symbol on the dark it is the same
     hue made light enough to read (-ink); what stands on it is white. */
  --ui-accent: #3b6dc2; --ui-accent-rgb: 59, 109, 194; --ui-on-accent: #ffffff; --ui-accent-ink: #99bffe; --ui-accent-deep: #3466ba;
  --ui-go: #3b6dc2;   /* the main action is one colour (RN553), with lighter shades of it drifting inside (RN1266, ui.css) */
  /* the gold is one colour (RN542): the aurora's light is the colour itself, gold words are the same hue made light
     enough for a dark ground or deep enough for a light one. tune.js sets the --tune values while he turns the wheel;
     the fallbacks are the gold he set by hand, #665D3A (RN630, after #615035, RN623). */
  --ui-gold: var(--tune-on-dark, #c1b892); --ui-gold-rgb: var(--tune-on-dark-rgb, 193, 184, 146); --ui-gold-ink: var(--tune-on-light, #665d3a); --ui-warn: #e8c27a;
  --ui-bad: #e58f8f; --ui-ok: #5fd3b5;
  --ui-private-rgb: 214, 67, 126; --ui-duet-rgb: 29, 157, 132; --ui-group-rgb: 72, 148, 226;

  /* frosted sea glass: the card material (RN176, RN181). The ground's aurora keeps its light at the right, in the bronze
     gold it had from the start (RN513). Nothing gold is laid over a card or a control (RN491). */
  /* how strong the spots of light are (RN1396): 20% of their first strength, his pick (RN1406, RN1411) */
  --studio-spots: var(--tune-spots, 0.2);
  --frost-veil: linear-gradient(158deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 36%);
  --frost-fill: linear-gradient(172deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.68) 55%, rgba(255, 255, 255, 0.62));
  --frost-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 -10px 18px -12px rgba(255, 255, 255, 0.5), 0 18px 40px -20px rgba(0, 0, 0, 0.85);
  --frost-blur: blur(30px) saturate(2) brightness(1.25);
  --frost-ink: #0b111e; --frost-ink-2: rgba(11, 17, 30, 0.66); --frost-ink-3: rgba(11, 17, 30, 0.5);
}
/* the ground's spots are worked out on each page, so a page can hold its own strength: 20% everywhere, 25% on the
   calendar (RN1411, his decision after trying 20 to 40) */
:root, .page {
  --studio-light:
    radial-gradient(58% 30% at 90% 44%, rgba(var(--tune-light-rgb, 102, 93, 58), calc(0.62 * var(--studio-spots))), transparent 72%),
    radial-gradient(62% 34% at 12% 30%, rgba(138, 156, 150, calc(0.46 * var(--studio-spots))), transparent 72%),
    radial-gradient(52% 30% at 8% 76%, rgba(78, 104, 138, calc(0.5 * var(--studio-spots))), transparent 72%),
    radial-gradient(60% 32% at 84% 90%, rgba(132, 88, 104, calc(0.4 * var(--studio-spots))), transparent 72%),
    radial-gradient(46% 22% at 52% 62%, rgba(96, 122, 112, calc(0.3 * var(--studio-spots))), transparent 72%),
    #04070c;
}
.device.calendar { --studio-spots: 0.25; }

.ui-root { --ease: var(--ui-ease); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--page); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(var(--ui-gold-rgb), 0.7); outline-offset: 2px; }
/* a field being typed in shows it with its own ring and the caret, never a second light line around it (RN491) */
input:focus-visible, textarea:focus-visible { outline: none; }
svg { display: block; flex: none; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* how far up the foot of the page dissolves into the ground while pills stand over the dock, so they are read over
   nothing (RN615). He likes it as it was, a little less dark: of six variations he chose the first, at 87 parts in
   100 (RN661, RN662), so the page thins to 13 in 100 at its foot and is never quite gone. */
@property --pg-fb { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --top-extent { syntax: "<length>"; inherits: true; initial-value: 0px; }
/* the same dissolve under every row of pills over the dock: what was found, the classes due now, and what carries on */
.device.has-found, .device.has-checkins, .device.has-resume { --pg-fb: 204px; }
.device { transition: --pg-fb 380ms ease, --top-extent var(--ui-t) var(--ui-ease); }
.device { --safe-top: max(12px, env(safe-area-inset-top, 0px)); --safe-bottom: env(safe-area-inset-bottom, 0px); --top-p: 0; --top-extent: 0px; position: fixed; inset: 0; overflow: clip; isolation: isolate; background: var(--ground); }
/* The page's scroll reach grows at the foot as the row opens, without shifting its contents. */
.page { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--safe-top) + 14px) 18px calc(var(--safe-bottom) + 96px); background: var(--studio-light);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 58px), transparent calc(100% - 4px)), linear-gradient(to top, rgba(0, 0, 0, 0.13) 0, rgba(0, 0, 0, 0.13) calc(var(--pg-fb) * 0.3), rgba(0, 0, 0, 0.27) calc(var(--pg-fb) * 0.62), #000 var(--pg-fb)); mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 58px), transparent calc(100% - 4px)), linear-gradient(to top, rgba(0, 0, 0, 0.13) 0, rgba(0, 0, 0, 0.13) calc(var(--pg-fb) * 0.3), rgba(0, 0, 0, 0.27) calc(var(--pg-fb) * 0.62), #000 var(--pg-fb)); -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: filter 300ms ease, transform 300ms var(--ease); }
#page { padding-bottom: calc(var(--safe-bottom) + 150px + var(--top-extent)); }
/* the page steps back on the drawer's own clock as it rises; it comes forward again on the short one */
.ui-has-drawer .page { transform: scale(0.985); transition: filter 300ms ease, transform 560ms var(--ease); }

/* ── whose app this is: beri, the studio, and the way into the studio's own page ── */
/* The greeting floats over the page, and the page follows through the same space it had before. */
#top { position: absolute; top: calc(var(--safe-top) + 14px); left: 20px; right: 20px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: center; gap: 9px; min-height: 34px; opacity: var(--top-p); filter: blur(calc((1 - var(--top-p)) * 10px)); pointer-events: none;
  translate: 0 calc((var(--top-p) - 1) * 100%); transition: translate var(--ui-t) var(--ui-ease), opacity 300ms ease, filter var(--ui-t) ease; }
.device.top-open { --top-p: 1; --top-extent: var(--top-space, 0px); }
.top-open #top { pointer-events: auto; }
.top-pull #top, .top-pull #page > :not(#top) { transition: none; }
.top-pull { -webkit-user-select: none; user-select: none; }
.device.top-pull { transition-property: --pg-fb; }
.device.searching { --top-p: 0; --top-extent: 0px; }
#page > :not(#top) { translate: 0 calc(var(--top-p) * var(--top-space, 0px)); transition: translate var(--ui-t) var(--ui-ease); }
#top .ui-mark { width: 25px; height: 25px; }
#top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 16px var(--font); letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.94); }
/* the name's words flow in its line, so a long name is still cut with its dots; the berry lifts only the words in view (UI.berry) */
#top b .ui-berry-w { display: inline; }

/* ── this month, at a glance ──────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 2px 16px; transition: opacity 340ms ease, filter 340ms ease, transform 460ms var(--ease); max-height: 120px; }
.hero-label { font: 600 11px var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.52); }
.hero-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hero-num { flex: none; font: 200 40px/1 var(--font-num); letter-spacing: -0.035em; color: rgba(255, 255, 255, 0.97); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-num small { font-size: 0.5em; font-weight: 300; letter-spacing: 0; margin-left: 3px; color: rgba(255, 255, 255, 0.6); }
/* a currency whose sign stands before its figure */
.hero-num small.lead { margin: 0 3px 0 0; }
/* Studio, Details: the studio's contact as its clients see it, each line changed where it stands */
.det-line { justify-content: flex-start; gap: 12px; cursor: text; }
.det-line > svg:first-child { flex: none; width: 19px; height: 19px; color: var(--ui-ink-2); }
.det-line > input, .det-line > textarea { flex: 1 1 auto; min-width: 0; margin: 0; padding: 3px 0; border: 0; border-radius: 0; background: none; outline: none; font: 600 15px var(--ui-font); color: var(--ui-ink); text-overflow: ellipsis; box-shadow: 0 1.5px 0 transparent; transition: box-shadow 200ms ease; }
.det-line > textarea { display: block; resize: none; overflow: hidden; field-sizing: content; line-height: 1.35; text-overflow: clip; }
.det-line > input::placeholder, .det-line > textarea::placeholder { color: var(--ui-ink-3); font-weight: 500; }
.det-line > input:focus, .det-line > textarea:focus { box-shadow: 0 1.5px 0 rgba(var(--c-rgb), 0.9); }
.det-line > input + svg, .det-line > textarea + svg { flex: none; width: 15px; height: 15px; color: var(--ui-ink-3); transition: opacity 200ms ease; }
.det-line:focus-within > input + svg, .det-line:focus-within > textarea + svg { opacity: 0; }
.det-lines + [data-where] > .det-fact { border-top: 0; }
.ui-sec .det-lines > .ui-row:last-child { border-bottom: 0; }
.det-fact .ui-lab { gap: 10px; font-size: 15px; color: var(--ui-ink); }
.det-fact .side { font-weight: 500; color: var(--ui-ink-2); }
.spark { flex: 1 1 auto; min-width: 40px; max-width: 110px; height: 38px; color: var(--ui-accent-ink, var(--ui-accent)); overflow: visible; }
#top .bar { flex: none; width: 1px; height: 17px; margin: 0 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.24); }
#top .sign { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
#top .sign.logo { border-radius: 50%; overflow: hidden; }
#top .sign.logo.bare { border-radius: 0; overflow: visible; }
#top .sign img { display: block; width: 100%; height: 100%; object-fit: cover; }
#top .sign.bare img { object-fit: contain; }
#top .sign.emoji { width: auto; font-size: 20px; line-height: 1; }
#top .menu { position: relative; margin-left: auto; flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: rgba(255, 255, 255, 0.88); transition: transform 160ms var(--ui-ease); }
#top .menu svg { width: 22px; height: 22px; }
#top .menu::after { content: ""; position: absolute; inset: -5px; }
#top .menu:active { transform: scale(0.9); }
.studio { position: relative; margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font: 750 14px var(--font); color: #10251f; letter-spacing: -0.02em;
  background: #9fd2c0; transition: transform 160ms var(--ease); }
.studio::after { content: ""; position: absolute; inset: -5px; }
.studio:active { transform: scale(0.94); }
/* the room the total held is given up at once; the cards travel up into it by themselves (carry, in operator.js) */
.searching .hero { opacity: 0; filter: blur(12px); max-height: 0; margin-bottom: 0; pointer-events: none; transform: translateY(-12px); }

/* ── the cards ────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.month { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 4px 0; font: 600 11px var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.52); }
.month b { font: 500 13px var(--font-num); letter-spacing: 0; color: rgba(255, 255, 255, 0.86); font-variant-numeric: tabular-nums; text-transform: none; }

.card { --kd: #7d8796; --sea: var(--kd); --sea-k: 1; position: relative; display: flex; flex-direction: column; gap: 16px; padding: 19px 16px 17px; border-radius: 22px; cursor: pointer; text-align: left;
  color: var(--frost-ink); border: 1px solid oklch(from var(--sea) 0.98 calc(c * 0.18 * var(--sea-k)) h / 0.72);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0) 38%),
    linear-gradient(172deg, oklch(from var(--sea) 0.975 calc(c * 0.2 * var(--sea-k)) h / 0.86), oklch(from var(--sea) 0.955 calc(c * 0.32 * var(--sea-k)) h / 0.72) 58%, oklch(from var(--sea) 0.935 calc(c * 0.4 * var(--sea-k)) h / 0.66));
  box-shadow: var(--frost-shadow); transition: transform 160ms var(--ease); }
.card:active { transform: scale(0.985); }
.card.k-private, .tag.k-private { --kd: #bd2f6b; } .card.k-duet, .tag.k-duet { --kd: #12806a; } .card.k-group, .tag.k-group { --kd: #2567c9; }
/* frozen: ice. Clear cold white glass with a crisp white edge and a blue frost settling at the foot; no grey (RN496).
   The writing, the dot and the dashes keep their colour. The dates go to the lighter grey of "used"; "until …" keeps its own.
   Its body is see-through (RN573, RN574: the same card, "just lacking opacity"): only the alpha of its two fills is lowered, nothing else. */
.card.iced { --sea-k: 0; border-color: #fff;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%),
    linear-gradient(172deg, rgba(250, 253, 255, 0.5), rgba(240, 248, 253, 0.43) 58%, rgba(226, 240, 250, 0.38));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 -16px 24px -14px rgba(186, 222, 250, 0.95), 0 18px 40px -20px rgba(0, 0, 0, 0.85); }
.card.iced .c-dates { color: var(--frost-ink-3); }
/* finished: the glass has emptied, so the page shows through it and the writing turns pale */
.card.past { --frost-ink: rgba(240, 244, 250, 0.84); --frost-ink-2: rgba(240, 244, 250, 0.56); --frost-ink-3: rgba(240, 244, 250, 0.44); --ui-gold-ink: var(--ui-gold); border-color: rgba(255, 255, 255, 0.17);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 40%), linear-gradient(172deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 18px 40px -26px rgba(0, 0, 0, 0.8); }
.card.past.k-private, .tag.past.k-private { --kd: #ee8fb7; } .card.past.k-duet, .tag.past.k-duet { --kd: #6fcdb6; } .card.past.k-group, .tag.past.k-group { --kd: #8bb6f2; }
.card.past .c-bars i.l, .card.past .c-bars.many { background: rgba(255, 255, 255, 0.13); }
/* a package as a small tag (RN577): its name with its class type's dot before it, in the colours of its card: the tinted
   glass while it runs, the see-through ice while frozen, the emptied glass once finished. A tag says, it does not open:
   the row it stands on is what is touched. A row of them scrolls sideways and fades at its edge */
.tag { --kd: #7d8796; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; font: 650 12px var(--ui-font); white-space: nowrap;
  color: #0b111e; border: 1px solid oklch(from var(--kd) 0.98 calc(c * 0.18) h / 0.72);
  background: linear-gradient(172deg, oklch(from var(--kd) 0.975 calc(c * 0.2) h / 0.86), oklch(from var(--kd) 0.935 calc(c * 0.4) h / 0.66)); }
.tag > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--kd); }
.tag.iced { border-color: #fff; background: linear-gradient(172deg, rgba(250, 253, 255, 0.5), rgba(226, 240, 250, 0.38)); box-shadow: inset 0 -7px 9px -7px rgba(186, 222, 250, 0.95); }
.tag.past { color: rgba(240, 244, 250, 0.84); border-color: rgba(255, 255, 255, 0.17); background: linear-gradient(172deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045)); }
.ui-li > .tags { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; scroll-padding: 0; gap: 6px; }
.ui-li > .tags > :first-child { margin-left: auto; }
.ui-li[data-a="choose"] > b { flex: 0 1 auto; min-width: 0; max-width: 64%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* how a client likes to be reached, at the top right of her drawer (RN575): the platform's own mark in the kit's line */
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.head-row.end { align-items: flex-end; }
.head-row > .ui-head { flex: 1 1 auto; min-width: 0; }
/* where an act stands with the studio's rule: quiet at the head's right while it is inside the rule, in the warning
   tone once it is past it (what the rule does not allow is absent for a person who may not make an exception) */
.head-row > [data-rule] { flex: none; display: flex; }
.rule-say { font: 600 12.5px var(--ui-font); color: var(--ui-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* what the rule says of this act is a sentence now, so it has its own line under the head and wraps like one */
.rule-line { margin: -8px 0 12px; min-height: 0; }
.rule-line:empty { display: none; }
.rule-line .rule-say { display: block; font: 500 13.5px/1.4 var(--ui-font); color: var(--ui-ink-2); white-space: normal; text-wrap: pretty; }
.rule-line .rule-say.over { color: var(--ui-warn); }
.rule-say.over { color: var(--ui-warn); }
/* a history line's second part stays whole: when it does not fit beside the first it drops under it, and the dot
   between them stays behind (it stands in the gap, which a new line does not keep) */
.ui-li > .what { min-width: 0; overflow-wrap: anywhere; overflow: hidden; }
.ui-li > .what > .gap { word-spacing: 0.56em; }
.ui-li > .what > .sub { display: inline-block; position: relative; }
.ui-li > .what > .sub::before { content: '·'; position: absolute; right: 100%; width: 0.84em; text-align: center; }
/* the state part of a history line ("confirmed 18 Aug") wraps whole the same way, its dot going with it (28 Oct: a plain dot in the gap
   stayed at the end of the line above) */
.ui-li > .what > .rule-say { display: inline-block; position: relative; }
.ui-li > .what > .rule-say::before { content: '·'; position: absolute; right: 100%; width: 0.84em; text-align: center; color: var(--ui-ink-3); }
/* a switch that is only there as an exception says why in the same tone */
.perm-row.past .ui-onoff small { color: var(--ui-warn); }
.head-row > [data-via] { flex: none; display: flex; margin: -5px -3px 0 0; color: var(--ui-ink-2); }
.head-row > [data-via]:empty { display: none; }
.head-row > [data-via] svg { width: 26px; height: 26px; }

.c-top { display: flex; align-items: flex-start; gap: 9px; }
.c-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--kd); margin-top: calc((21px * 1.15 - 9px) / 2); }
/* the dates stand right of the name where the row has room for both, and under it where it has not (RN685,
   taking back RN683's "always under") */
.c-id { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 10px; row-gap: 3px; }
/* the calendar's sign in the card's corner (RN683): it takes her to this package's sessions in the calendar. Its
   colour, strength, ground, size, line and what it says are his to set in the hand controls while he looks */
.c-cal { --cc: var(--kd); --cs: var(--tune-calsize, 19px); position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 30px; height: 30px; margin: -3px -5.5px -3px 0; border-radius: 999px;
  color: color-mix(in srgb, var(--cc) calc(var(--tune-calink, 1) * 100%), transparent); font: 650 11.5px var(--font); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform 160ms var(--ease); }
.c-cal svg { flex: none; width: var(--cs); height: var(--cs); stroke-width: var(--tune-calline, 1.8); }
.c-cal b { display: none; font: inherit; }
.c-cal::after { content: ""; position: absolute; inset: -7px; }
.c-cal:active { transform: scale(0.88); }
:root[data-calcolour="blue"] .c-cal { --cc: var(--ui-accent); }
:root[data-calcolour="blue"] .card.past .c-cal { --cc: var(--ui-accent-ink); }
:root[data-calcolour="grey"] .c-cal { --cc: var(--frost-ink-2); }
:root[data-calground="wash"] .c-cal, :root[data-calground="solid"] .c-cal { margin-right: -3px; }
:root[data-calground="wash"] .c-cal { background: color-mix(in srgb, var(--cc) calc(var(--tune-calwash, 0.14) * 100%), transparent); }
:root[data-calground="solid"] .c-cal { background: var(--cc); color: #fff; }
:root[data-calground="solid"] .card.past .c-cal { color: #0b1220; }
:root[data-calsays="next"] .c-cal.has-next { padding: 0 9px 0 7px; margin-right: -3px; }
:root[data-calsays="next"] .c-cal.has-next b { display: inline; }
.c-name { font: 650 21px/1.15 var(--font); letter-spacing: -0.035em; overflow-wrap: anywhere; }
.c-name[data-fit="1"] { font-size: 18.5px; }
.c-name[data-fit="2"] { font-size: 16.5px; }
.c-name .nm { position: relative; display: inline; text-align: left; font: inherit; letter-spacing: inherit; color: inherit; }
.c-name .nm::after { content: ""; position: absolute; left: -9px; right: -9px; top: 50%; height: 44px; transform: translateY(-50%); }
.c-name .amp { font-weight: 300; color: var(--kd); padding: 0 4px; }
.pair-n { white-space: nowrap; }
.c-dates { font: 500 11.5px var(--font); letter-spacing: 0.02em; color: var(--frost-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* an end date that is close: the card's own colour, and it hops by how close it is (UI.hop; RN1373, RN1376) */
.c-dates .soon { display: inline-block; font-weight: 750; color: var(--kd); }

.c-mid { display: flex; align-items: flex-end; gap: 6px; min-height: 46px; }
.c-mid b { font: 200 50px/0.9 var(--font-num); letter-spacing: -0.04em; color: var(--kd); font-variant-numeric: tabular-nums; }
/* two or fewer left: every ten seconds a slow, soft wave passes through the number, lighter in its own colour, never
   gold (RN621).
   Organic, not metal: a wide soft band, no bright core, no outline, no shadow, nothing around the number (RN448, RN492).
   The number keeps about half of its own colour at the crest, so it never fades into the glass on any kind (RN513) */
.c-mid b.low, .c-syms .ui-sym.s-pay svg { background-image: linear-gradient(105deg, var(--kd) 0%, var(--kd) 28%, color-mix(in oklab, var(--kd) 86%, #fff) 41%, color-mix(in oklab, var(--kd) 66%, #fff) 50%, color-mix(in oklab, var(--kd) 86%, #fff) 59%, var(--kd) 72%, var(--kd) 100%);
  background-repeat: no-repeat; background-size: 320% 100%; background-position: 100% 0;
  animation: low-sheen 10s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.c-mid b.low { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* a small thing keeps more of its own colour at the crest, so it is as easy to read while the wave passes */
.c-syms .ui-sym.s-pay svg { background-image: linear-gradient(105deg, var(--kd) 0%, var(--kd) 28%, color-mix(in oklab, var(--kd) 90%, #fff) 41%, color-mix(in oklab, var(--kd) 74%, #fff) 50%, color-mix(in oklab, var(--kd) 90%, #fff) 59%, var(--kd) 72%, var(--kd) 100%); }
@keyframes low-sheen { 0%, 100% { background-position: 100% 0; } 32% { background-position: 0% 0; } }
/* a frozen card's snowflake and its "until" date are white, the colour of the frost itself (RN1372, RN1374); the date
   carries the same slow wave, through ice blue, never gold (RN665, RN621) */
.card.iced .c-big[data-k="frozen"] { color: #fff; }
.card.iced .c-end .c-word { background-image: linear-gradient(105deg, #fff 0%, #fff 28%, rgb(222, 240, 253) 41%, rgb(196, 226, 248) 50%, rgb(222, 240, 253) 59%, #fff 72%, #fff 100%);
  background-repeat: no-repeat; background-size: 320% 100%; background-position: 100% 0; animation: low-sheen 10s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.c-of { display: flex; flex-direction: column; gap: 2.5px; padding-bottom: 2px; font: 500 11.5px var(--font); color: var(--frost-ink-3); white-space: nowrap; }
.c-of i { font: 700 10px var(--font); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kd); }
.c-of { min-width: 0; }
.c-of i { overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.c-syms { margin-left: auto; align-self: center; display: inline-flex; align-items: center; color: var(--frost-ink-2); }
.c-syms .ui-sym { --sym: var(--frost-ink); }
/* awaiting payment: the card's own colour with the same wave through it, the symbol cut out of the wave (RN621) */
.c-syms .ui-sym.s-pay { --sym: var(--kd); }
/* a pay symbol whose day is close hops instead of carrying the wave: one motion at a time (UI.hop; RN1373, RN1376) */
.c-syms .ui-sym.s-pay svg.ui-hop { animation: ui-hop 4.8s infinite; transform-origin: 50% 100%; }
.c-syms .ui-sym.s-pay svg.ui-hop.slow { animation-name: ui-hop-slow; animation-duration: 9.6s; }
.c-syms .ui-sym.s-pay svg { stroke: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.6'/%3E%3Cpath d='M3 10h18M7 14.5h3'/%3E%3C/svg%3E") center / 21px 21px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.6'/%3E%3Cpath d='M3 10h18M7 14.5h3'/%3E%3C/svg%3E") center / 21px 21px no-repeat; }
.c-syms .ui-sym.s-roll { --sym: var(--kd); }
.c-syms .ui-sym.s-note { --sym: var(--kd); }
/* the card's sign button: the pencil in outline, white on a round ground of the class colour (his choice of the six
   pencils and the three grounds, RN668, RN674) */
.c-sign { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: -3px; border-radius: 50%; background: var(--kd); color: #fff; transition: transform 160ms var(--ease); }
.c-sign svg { width: 23px; height: 23px; stroke-width: 1.7; }
.c-sign { position: relative; } .c-sign::after { content: ""; position: absolute; inset: -1px; }
.c-sign:active { transform: scale(0.9) rotate(-6deg); }
/* a card that cannot be signed: its state stands where the sign symbol would, just as big, with its one fact beneath on the count's own line */
.c-end { margin-left: auto; align-self: stretch; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.c-end .c-syms { margin: -6px -8px 0 0; align-self: flex-end; }
.c-end .c-syms .ui-sym { height: 34px; }
.c-big { position: relative; flex: none; display: inline-grid; place-items: center; width: 48px; height: 34px; color: var(--frost-ink-2); transition: transform 160ms var(--ease); }
.c-big::after { content: ""; position: absolute; inset: -8px 0 -2px; }
.c-big svg { width: 31px; height: 31px; stroke-width: 1.5; }
.c-big:active { transform: scale(0.92); }
/* the word under a card's state symbol is the symbol's caption: regular weight, so the symbol leads and the word
   only says it (RN1402: "until 12 Oct" in medium stood out against the snowflake) */
.c-word { position: relative; padding-bottom: 2px; font: 400 11.5px var(--font); color: var(--frost-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
button.c-word::after { content: ""; position: absolute; inset: -8px -10px -14px; }

.c-bars { display: flex; gap: 3px; }
.c-bars i { flex: 1; min-width: 1px; height: 4px; border-radius: 999px; background: var(--kd); transition: width var(--ui-t-spring) var(--ui-ease), background-color var(--ui-t-spring) var(--ui-ease); }
.c-bars i.l { background: rgba(11, 17, 30, 0.1); }
.c-bars.many { display: block; height: 5px; border-radius: 8px; background: rgba(11, 17, 30, 0.1); overflow: hidden; }
.c-bars.many i { display: block; height: 100%; border-radius: inherit; }

/* a client with no package yet: in her own group on the page, and found by search */
.person { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; border-radius: 22px; color: var(--frost-ink); text-align: left; width: 100%;
  background: var(--frost-veil), var(--frost-fill); border: 1px solid rgba(255, 255, 255, 0.62); box-shadow: var(--frost-shadow); }
.person svg { width: 22px; height: 22px; color: var(--frost-ink-2); }
.person b { font: 650 17px var(--font); letter-spacing: -0.02em; }
.person .p-app { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--font); color: var(--frost-ink-3); white-space: nowrap; }
.person .p-app svg { width: 15px; height: 15px; color: inherit; }
.person b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-person { justify-content: flex-start; }
.dock-person-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dock-person-copy b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-person-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.2 var(--font); color: var(--frost-ink-3); }
.side .ui-text-act { gap: 6px; }
.none { padding: 40px 12px; text-align: center; font: 500 14px var(--font); color: rgba(255, 255, 255, 0.5); }

/* ── the bar at the thumb: add a client, sell a package, search ───────── */
/* the bar's outline stands on the page's 18 px edge, as the cards' above it do; its circles sit at its own 4 px inset (27 Oct: it stood 8 px out) */
.dock { position: absolute; z-index: 10; left: 18px; right: 18px; bottom: calc(var(--safe-bottom) + 14px); display: flex; gap: 5px; padding: 4px; height: 58px; border-radius: 999px; max-width: 30rem; margin: 0 auto;
  background: rgba(51, 55, 63, 0.3);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(2.4) brightness(0.9); backdrop-filter: blur(18px) saturate(2.4) brightness(0.9); transition: transform 520ms var(--ease), opacity 320ms ease; }
.dock::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: rgba(255, 255, 255, 0.16);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ui-has-drawer .dock { transform: translateY(90px); opacity: 0; }
.dock button { flex: none; height: 50px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; white-space: nowrap; color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.08);
  font: 650 13px var(--font); transition: max-width 460ms var(--ease), opacity 300ms ease, filter 300ms ease, padding 460ms var(--ease), margin 460ms var(--ease), transform 160ms var(--ease); }
.dock button:active { transform: scale(0.94); }
.dock button svg { width: 17px; height: 17px; }
.ui-go .sign-go { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.05; }
.ui-go .sign-go > span:first-child { display: flex; }
/* an add is one drawn sign (UI.addIcon), round like the calendar's eye beside it (RN1366, RN1367) */
.dock .d-add { max-width: 72px; padding: 0 14px; gap: 0; color: rgba(255, 255, 255, 0.86); }
.dock .d-add svg { width: 23px; height: 23px; stroke-width: 1.6; }
.dock .d-back { max-width: 0; padding: 0; margin-right: -5px; opacity: 0; filter: blur(8px); }
.dock .d-back svg { width: 21px; height: 21px; }
.searching .dock .d-add { max-width: 0; padding: 0; margin-right: -5px; opacity: 0; filter: blur(8px); pointer-events: none; }
.searching .dock .d-back { max-width: 50px; width: 50px; margin-right: 0; opacity: 1; filter: none; }
.d-search { flex: 1; min-width: 0; height: 50px; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-radius: 999px; color: var(--frost-ink);
  background: var(--ui-frost); box-shadow: inset 0 0 0 1px var(--ui-frost-edge); }
.d-search svg { width: 19px; height: 19px; color: var(--frost-ink-2); }
.d-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 600 16px var(--font); color: var(--frost-ink); }
.d-search input::placeholder { color: var(--frost-ink-2); }
.d-search input::-webkit-search-cancel-button { display: none; }
/* the menu sign stays quiet until a place hit is found; a hit takes the accent and its soft sweep once (RN615) */
.dock .d-search .d-menu { position: relative; flex: none; width: 0; height: 36px; margin-right: -8px; padding: 0; border-radius: 50%; display: grid; place-items: center; overflow: visible; background: none;
  opacity: 0; transform: scale(0.4); pointer-events: none; transition: width 300ms var(--ease), opacity 200ms ease, transform 200ms var(--ui-exit); }
.dock .d-search .d-menu.on { width: 34px; opacity: 1; transform: none; pointer-events: auto; transition: width 460ms var(--ease), opacity 200ms ease, transform var(--ui-t-spring) var(--ui-spring); }
.dock .d-search .d-menu.on:active { transform: scale(0.88); transition: transform 160ms var(--ease); }
.dock .d-search .d-menu::after { content: ""; position: absolute; inset: -7px -6px; }
.d-menu i { --d: currentColor; --l: color-mix(in oklab, currentColor 50%, #fff); display: block; width: 24px; height: 24px; color: var(--frost-ink-2); transition: color 200ms ease;
  background-image: linear-gradient(105deg, var(--d) 0%, var(--d) 28%, color-mix(in oklab, var(--d) 60%, var(--l)) 41%, color-mix(in oklab, var(--d) 18%, var(--l)) 50%, color-mix(in oklab, var(--d) 60%, var(--l)) 59%, var(--d) 72%, var(--d) 100%);
  background-repeat: no-repeat; background-size: 320% 100%; background-position: 100% 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M4.5 7.5h15M4.5 12h15M4.5 16.5h15'/%3E%3C/svg%3E") center / 24px 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M4.5 7.5h15M4.5 12h15M4.5 16.5h15'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
.d-menu.has-hit i { color: rgb(var(--ui-accent-rgb)); animation: low-sheen 5s cubic-bezier(0.45, 0, 0.55, 1) 500ms 1 both; }
/* what the sign brings up: the place's things as pills over the dock, as the place's own search shows them. The cards
   behind are light, so these pills are the dock's own dark glass */
.d-found { position: absolute; z-index: 10; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 14px + 58px); height: 0; max-width: 30rem; margin: 0 auto; }
.d-found .ui-found-row { padding-left: 14px; }
.d-found .ui-vpill { background: rgba(26, 30, 40, 0.94); }
.d-found .search-branch-row { position: absolute; z-index: 1; left: 0; right: 0; bottom: 4px; display: flex; gap: 8px; padding: 0 14px; opacity: 0; filter: blur(var(--ui-blur)); transform: translateY(6px); pointer-events: none; transition: opacity var(--ui-t) var(--ui-ease), filter var(--ui-t) var(--ui-ease), transform var(--ui-t) var(--ui-ease); }
.d-found .search-branch-row.on { opacity: 1; filter: blur(0); transform: none; pointer-events: auto; }
.d-found .search-branch-row .ui-vpill { flex: 0 1 auto; min-width: 0; max-width: 55%; padding-inline: 12px; }
/* the branch pill leads with its symbol: even padding left it 1.5 tighter on that side; four more there, as the kit's
   own pills with a symbol have (28 Oct, as the booking drawer's "1 Reformer") */
.d-found .search-branch-row .ui-vpill:has(> svg:first-child) { padding-inline: 16px 12px; }
.d-found .search-branch-row .ui-vpill span { min-width: 0; overflow: clip visible; text-overflow: ellipsis; white-space: nowrap; }
.d-found .search-branch-row .ui-vpill[aria-pressed="true"] { color: var(--ui-frost-ink); background: var(--ui-frost); box-shadow: inset 0 0 0 1px var(--ui-frost-edge); }
#device.has-branch-scope .d-found .ui-found-row { bottom: 50px; }
/* the calendar has its own branch row: the people pills stand only over home's list */
#device.calendar .d-found .search-branch-row { display: none; }
#device.calendar.has-branch-scope .d-found .ui-found-row { bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .d-found .search-branch-row { transition-duration: 1ms; } }
/* the smallest phones: the two bubbles tighten so the search words are never cut */
@media (max-width: 374px) { .dock .d-add { max-width: 62px; padding: 0 11px; } .d-search { padding: 0 12px; gap: 7px; } }

/* ── what a drawer view adds to the shared pieces ─────────────────────── */
.notes { display: flex; flex-direction: column; }
.note { width: 100%; text-align: left; padding: 10px 2px; border-bottom: 1px solid var(--ui-line); display: flex; flex-direction: column; gap: 6px; font: 500 14.5px/1.45 var(--ui-font); color: var(--ui-ink); }
.note:last-child { border-bottom: 0; }
.note small { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font: 600 12px var(--ui-font); color: var(--ui-ink-3); }
.note small .note-date, .note small .note-sep, .note small .note-reminder, .note small > svg { flex: none; }
.note small .note-tag, .note small .note-reminder > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note small .note-reminder { display: inline-flex; align-items: center; gap: 4px; }
.note small svg { width: 14px; height: 14px; }
.note small .due { color: var(--ui-warn); }
.sub { font: 500 13.5px var(--ui-font); color: var(--ui-ink-3); }
.sub b { color: var(--ui-ink-2); font-weight: 650; }
/* a package's record and what is booked ahead for it, on one track (RN683) */
.pk-tabs { display: flex; flex-direction: column; gap: 8px; }
.pk-tabs .ui-li .end.now { color: var(--ui-accent-ink, var(--ui-accent)); font-weight: 650; }
.pk-none { justify-content: space-between; color: var(--ui-ink-3); }
.hist-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; font: 650 14px var(--ui-font); color: var(--ui-ink-2); }
.hist-h span { font: 500 13px var(--ui-font-num); color: var(--ui-ink-3); }
.ui-li.client-package-transfer { flex-wrap: wrap; }
.client-package-transfer .client-transfer-to { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-package-transfer.long-transfer { row-gap: 8px; }
.client-package-transfer.long-transfer > .dot { order: 0; }
.client-package-transfer.long-transfer > .ui-facts { order: 1; flex: 1 1 0; }
.client-package-transfer.long-transfer > .end { order: 2; }
.client-package-transfer.long-transfer > .client-transfer-to { order: 3; flex: 1 1 calc(100% - 18px); width: calc(100% - 18px); margin-left: 18px; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; }
.ui-facts > .client-coming-detail { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.ui-facts > .client-owed-cell { flex: 0 0 auto; max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; }
.client-owed-cell .ui-vpill { flex: none; max-width: 100%; gap: 4px; padding: 0 9px 0 12px; font-size: 12.5px; }
.client-owed-cell .ui-vpill > span { flex: none; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
/* a package row with what is owed under its name: the class dot and its state stand on the name's line, not beside the pill (RN1420) */
.ui-li:has(> .ui-facts > .client-owed-cell) > :is(.dot, .end) { align-self: flex-start; }
.ui-li:has(> .ui-facts > .client-owed-cell) > .dot { margin-top: 4.3px; }
.edit-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; }
/* Edit, in a package's first row (RN663): the tag's outline twin, since it opens something; filled while what it
   opened is in front. The row's left end gives way before it does, and the days left go when there is no room. */
.ui-top > .ui-kind { flex: 0 1 auto; align-self: center; }
/* the calendar stays in the package head's upper right while its status sentence takes the line below */
.ui-top.has-calendar { display: grid; grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) 16px; row-gap: 7px; }
.ui-top.has-calendar > .ui-state-mark { grid-column: 4; grid-row: 1; justify-self: end; align-self: center; color: var(--ui-ink-3); }
.ui-top.has-calendar > .ui-state-mark svg { width: 16px; height: 16px; }
.ui-top.has-calendar > .ui-state { grid-column: 1 / -1; justify-self: start; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.pk-edit { position: relative; flex: none; margin-right: auto; min-height: 28px; padding: 0 11px; border-radius: 12px; font: 700 12px var(--ui-font); color: var(--ui-ink); box-shadow: inset 0 0 0 1px var(--ui-edge); transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ui-ease); }
/* a word alone in its pill is trimmed to its capitals and its baseline, and stands at the pill's true middle (RN1390) */
.pk-edit, .area-pub { text-box: trim-both cap alphabetic; }
/* her initial alone in its tile: the same, at the tile's middle; a logo or an emoji keeps the grid */
.look-mark:not(.logo):not(.emoji):not(:has(> *)) { display: block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }
.pk-edit::after { content: ""; position: absolute; inset: -8px -4px; }
.pk-edit:active { transform: scale(0.95); }
.pk-edit[aria-expanded="true"] { background: rgba(var(--c-rgb), 0.56); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.pk-below { display: flex; flex-direction: column; gap: 14px; }
.pk-date-row { gap: 8px; }
.pk-date-toggle { flex: 1 1 auto; min-width: 0; padding: 0; color: var(--ui-ink); background: none; font: inherit; text-align: left; white-space: nowrap; }
.pk-date-row .side { flex: 0 1 auto; min-width: 0; gap: 6px; }
.pk-date-row .ui-vpill .chev { display: none; }
.pk-date-chevron { flex: none; display: grid; place-items: center; color: var(--ui-ink-3); transition: transform var(--ui-t) var(--ui-ease); }
.pk-date-chevron svg { width: 14px; height: 14px; }
.ui-lifted .pk-date-chevron { transform: rotate(90deg); }
.pk-end-story { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.pk-end-reasons { display: grid; grid-template-rows: 0fr; opacity: 0; filter: blur(var(--ui-blur)); transition: grid-template-rows var(--ui-t) var(--ui-ease), opacity var(--ui-t) var(--ui-exit), filter var(--ui-t) var(--ui-exit); }
.pk-end-reasons.open { grid-template-rows: 1fr; opacity: 1; filter: none; }
.pk-end-reasons > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.pk-end-line { width: 100%; min-height: 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 4px 2px; border: 0; color: var(--ui-ink-2); background: none; text-align: left; font: 500 13px/1.4 var(--ui-font); transition: opacity var(--ui-t) var(--ui-ease); }
.pk-end-line time { color: var(--ui-ink-3); font: 500 12px var(--ui-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-end-line.last, .pk-end-line.last time { color: var(--ui-ink); font-weight: 650; }
.pk-end-line:active { opacity: 0.5; }
.pk-end-wait { margin: 4px 2px 10px; color: var(--ui-ink-2); font: 500 13px/1.45 var(--ui-font); }
.rd-life.pk-end-life > span > small { white-space: normal; overflow-wrap: anywhere; }
.pk-end-life > span > i, .pk-end-life > span > b, .pk-end-life > span > small { position: relative; z-index: 2; pointer-events: none; }
.pk-end-life em { z-index: 3; }
.pk-end-life em > button { padding: 0; border: 0; color: inherit; background: none; font: inherit; white-space: nowrap; }
.pk-life-hit { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.pk-life-hit:focus-visible, .pk-end-life em > button:focus-visible { outline: 2px solid var(--ui-ink-2); outline-offset: 2px; }
.pk-end-life > span > small:empty { display: none; }
:root[data-mode="day"] .pk-end-life .ice > i { background: color-mix(in srgb, rgb(var(--rd-ice)) 55%, var(--ui-ink)); }
:root[data-mode="day"] .pk-end-life .ice > b { color: var(--ui-ink-2); }
.pk-return-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pk-return-methods { flex: 1 1 auto; min-width: 0; }
.pk-return-methods .ui-chips.scroll { max-width: 100%; }
.pk-return-row.no-method { flex-wrap: wrap; }
.pk-return-row.no-method .pk-return-methods { flex: 1 0 200px; }
.pk-return-row.no-method .pk-return-methods .ui-chips.scroll { padding-right: 0; scroll-padding-right: 0; }
.pk-refund-open { white-space: nowrap; }
.an-refund-open { margin-top: 14px; border-top: 1px solid var(--ui-line); }
.an-refund-head { margin: 10px 4px 4px; text-transform: none; letter-spacing: 0.02em; }
.an-refund-li { min-height: var(--ui-tap); }
.an-refund-person { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.an-refund-person b { overflow: hidden; color: var(--ui-ink-2); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.an-refund-person small { color: var(--ui-ink-3); font: 500 12px var(--ui-font-num); }
.edit-grid .ui-pair { justify-content: flex-end; gap: 8px; }
.pk-edit-choice { grid-column: 1 / -1; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.split.end { justify-content: flex-end; min-height: var(--ui-tap); }
.inline-add { display: flex; align-items: center; gap: 10px; }
.inline-add .ui-input { flex: 1; }
/* the studio's look: the real client app, small, on its two faces (the wall, and inside), showing the draft */
/* how large they stand is --k, a share of a real phone: set by miniSize (operator.js) to fill the room, or by hand (RN602) */
.look-minis { --k: 0.34; display: flex; justify-content: center; gap: 14px; }
.look-face { display: flex; flex-direction: column; align-items: center; }
/* under each phone, the sign that fills her screen with it: quiet, the phones are the picture */
.look-grow { flex: none; display: grid; place-items: center; width: 56px; height: 36px; margin-bottom: -10px; color: var(--ui-ink-3); transition: color 160ms, transform 160ms var(--ui-ease); }
.look-grow svg { width: 17px; height: 17px; }
.look-grow:active { color: var(--ui-ink); transform: scale(0.88); }
/* the client app filling her screen: it comes and goes with the one motion */
.look-full { position: absolute; inset: 0; z-index: 70; background: #01050f; }
.look-full iframe { display: block; width: 100%; height: 100%; border: 0; }
/* the studio's mark beside its name, as its clients see it; it is changed under the Logo pill (RN528) */
.look-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.look-id .ui-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the studio's name is a field in the look of the title, with the small pencil after it (RN583) */
.look-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; }
.look-name input { flex: 0 1 auto; min-width: 2ch; max-width: 100%; field-sizing: content; margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; color: var(--ui-ink); outline: none; box-shadow: 0 1.5px 0 transparent; transition: box-shadow 200ms ease; }
.look-name input:focus { box-shadow: 0 1.5px 0 rgba(var(--c-rgb), 0.9); }
.look-name svg { flex: none; width: 15px; height: 15px; color: var(--ui-ink-3); }
/* Mode: the word, and its two choices as symbols inside the pill (RN593) */
.ui-vpill.look-mode { justify-content: space-between; padding: 0 6px 0 14px; }
.ui-vpill.look-mode:active { transform: none; }
.look-pick.col { flex-direction: column; align-items: center; gap: 12px; }
.look-emojis { align-self: stretch; min-width: 0; }
/* one guiding line where she is looking, in quiet ink: it is never dressed as an error (RN595) */
.look-hint { margin: 0; font: 600 12.5px/1.3 var(--ui-font); color: var(--ui-ink-2); text-align: center; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; animation: look-hint 320ms var(--ui-ease) both; }
.duplicate-content { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.duplicate-content:empty { display: none; }
@keyframes look-hint { from { opacity: 0; filter: blur(6px); transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .look-hint { animation: none; } }
.look-emojis .ui-chip { padding: 0 11px; font-size: 20px; line-height: 1; }
.look-id [data-mark] { flex: none; display: flex; }
.look-mark { position: relative; flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font: 750 15px var(--ui-font); letter-spacing: -0.02em; color: var(--m-ink);
  background: var(--m-soft); transition: transform 160ms var(--ui-ease), box-shadow 200ms; }
/* her own sign (RN596): a logo with a ground of its own shows in a circle; one with no ground shows as it is; an emoji is the emoji alone */
.look-mark.logo, .look-mark.logo.mini { background: none; border-radius: 50%; }
.look-mark.logo.bare, .look-mark.logo.bare.mini { border-radius: 0; }
.look-mark.logo.bare img { object-fit: contain; }
.look-mark.emoji { background: none; font-size: 28px; line-height: 1; letter-spacing: 0; }
.look-mark.emoji.mini { font-size: 15px; }
/* the mark as the Logo pill's own symbol: every one of the six pills carries its symbol inside (RN541) */
.look-mark.mini { width: 18px; height: 18px; border-radius: 6px; margin: 0 2px 0 -4px; font-size: 10px; }
.look-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.studio.logo { overflow: hidden; background: #fff; }
.studio img { display: block; width: 100%; height: 100%; object-fit: cover; }
.look-mini { position: relative; flex: none; width: calc(390px * var(--k)); height: calc(844px * var(--k)); border-radius: calc(52px * var(--k)); overflow: hidden; background: var(--ground);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.17), 0 24px 36px -22px rgba(0, 0, 0, 0.95); }
.look-mini iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform: scale(var(--k)); transform-origin: 0 0; }
.look-pick { display: flex; justify-content: center; }
/* what the studio sets for its clients' app: pills named by what they set, the look on one line and the two pages
   under it (RN528). On a tablet they share one line. */
.look-pills { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 8px; }
.look-pills .brk { flex-basis: 100%; height: 10px; }
/* six pills, every one with its symbol inside (RN541): on a phone three even pairs (the look, the pictures, the two
   pages), since three with their symbols do not fit one line there; on a tablet as before */
.look-pills .brk.b2 { display: none; }
@media (max-width: 699px) {
  .look-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; max-width: 324px; margin: 0 auto; }
  .look-pills .brk { display: none; }
  .look-pills .ui-vpill { justify-content: flex-start; padding: 0 12px 0 15px; }
  .look-pills .ui-vpill > span:not(.look-mark) { flex: 1; text-align: left; }
}
/* a symbol inside a value pill, left of its word: one size and one weight wherever a pill carries one */
.ui-vpill:not(.add) > svg:not(.chev) { width: 17px; height: 17px; margin: 0 1px 0 -3px; color: var(--ui-ink-2); }
.ui-vpill.empty:not(.add) > svg:not(.chev) { color: var(--ui-ink-3); }
@media (min-width: 700px) { .look-pills { gap: 0 10px; } }
/* payment: the date pill shares the methods' row where it fits, and falls under them on the narrowest phone */
/* the studio's ways to pay are its own list: one row that slides under the date, never a second row (RN540) */
.pay-top { flex-wrap: nowrap; justify-content: space-between; column-gap: 8px; }
.pay-top > .ui-vpill { flex: none; }
@media (max-width: 480px) { .pay-top { flex-wrap: wrap; row-gap: 10px; } .ui-pair.pay-top > .ui-chips.scroll { flex: 1 0 100%; min-width: 0; } }
/* the wall's background as pictures to choose from: three ready ones, her own, or none */
.look-bgs { display: flex; justify-content: center; gap: 9px; padding: 3px 0; }
.look-edge { display: flex; justify-content: center; padding-top: 10px; }
.look-bg { position: relative; flex: 0 1 60px; min-width: 0; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 4px; font: 600 11.5px/1.15 var(--ui-font); color: var(--ui-ink-2); background: rgba(255, 255, 255, 0.055); outline: 2.5px solid transparent; outline-offset: 2.5px; transition: outline-color 200ms ease, transform 160ms var(--ui-ease); }
.look-bg img, .look-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.look-bg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.look-bg svg { width: 18px; height: 18px; }
.look-bg[aria-pressed="true"] { outline-color: rgb(var(--c-rgb)); color: var(--ui-ink); }
.look-bg:active { transform: scale(0.95); }
.look-link { width: 100%; max-width: 440px; margin: 0 auto; }
/* Pages (RN673): the studio's pages in one row, each chip with its symbol, dim while its page has no link; the round
   chip at the row's end adds one. Under the row the Icon and Name pills, and under those the link of the page in hand. */
.look-pages { display: flex; flex-direction: column; gap: 10px; }
/* while the row fits it stands in the middle, over the two pills; once it runs on it starts at the left, as every sideways row */
.look-pages [data-pgs] > :first-child { margin-left: auto; }
.look-pages [data-pgs] > :last-child { margin-right: auto; }
.look-pages .ui-chip.pg { display: inline-flex; align-items: center; gap: 7px; padding: 0 15px 0 12px; }
.look-pages .ui-chip.pg > svg { flex: none; width: 17px; height: 17px; }
.look-pages .ui-chip.pg.off { color: var(--ui-ink-3); }
.look-pages .ui-chip.pg.off[aria-pressed="true"] { color: var(--ui-ink-2); }
.look-pages .ui-chip.pg .x { margin: 0 -9px 0 -2px; }
.look-pages .ui-chip.pg.add { width: var(--ui-tap); padding: 0; justify-content: center; color: var(--ui-ink-2); }
.look-pages .ui-chip.pg.ask { color: var(--ui-bad); }
.look-pgset { display: flex; justify-content: center; gap: 8px; }
.look-pgbody { gap: 10px; }
/* the symbols under a head: three rows that run sideways as every sideways row does, bare, the chosen one the only fill */
.look-syms.ui-chips.scroll { display: grid; grid-template-rows: repeat(3, 44px); grid-auto-flow: column; grid-auto-columns: 46px; gap: 2px; justify-content: start; align-items: stretch; }
.look-sym { display: grid; place-items: center; border-radius: 14px; color: var(--ui-ink-2); transition: background-color 180ms, color 180ms, transform 160ms var(--ui-ease); }
.look-sym svg { width: 22px; height: 22px; }
.look-sym:active { transform: scale(0.9); }
.look-sym[aria-pressed="true"] { color: var(--ui-ink); background: rgba(var(--c-rgb), var(--ui-on-a)); }
/* Settings: what a client may do in her app, as switch rows under one small head. A class type in front turns the
   switches its colour; what means nothing while another is off stands dim */
.look-set { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; }
.look-set > .ui-eyebrow { display: flex; align-items: center; gap: 6px; min-height: 16px; margin: 0 2px 2px; }
.look-set > .ui-eyebrow .own-dot { margin: 0; }
.look-set > .ui-eyebrow.turn { animation: look-hint 320ms var(--ui-ease) both; }
@media (prefers-reduced-motion: reduce) { .look-set > .ui-eyebrow.turn { animation: none; } }
.look-set .ui-onoff > i { transition: background-color 240ms ease; }
.look-set .perm-row { transition: opacity 240ms ease; }
.look-set .perm-row.dim { opacity: 0.3; pointer-events: none; }
.look-set .perm-row .dots { display: inline; }
.look-set .perm-row .own-dot { margin-left: 8px; }
.look-set .perm-row .own-dot + .own-dot { margin-left: 4px; }
.look-set > .ui-inline { margin-top: 8px; }
@media (min-width: 700px) { [data-top] .ui-palette { height: 116px; } }
.time { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* the week spans the row edge to edge, lined up with the stepper and Delete above it */
.time > .ui-chips { flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: 0; }

/* the month can name its first two sessions on a tablet, while its phone cells stay as they are */
.m-events { display: none; }
/* a tablet begins at 680: an Android tablet upright (his Redmi, 686) is narrower than an iPad mini (744) and took the
   phone's one column stretched wide (RN1371). Under 744 the page keeps the phone's margin and gap, so each of the two
   columns has about the room a card has on a 360 phone */
@media (min-width: 680px) {
  .page { padding-inline: 32px; }
  .page > #top, .page > .hero, .page > .cards, .page > .cal-page {
    width: min(100%, 1180px); margin-left: auto; margin-right: auto;
  }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .month, .none { grid-column: 1 / -1; }

  /* enough room for the date and two names, with the rest still counted */
  #device .cal-page[data-view="month"] .m-day {
    height: 96px; grid-template-columns: minmax(0, 1fr); justify-items: stretch; align-content: start; gap: 4px; padding: 7px 5px;
  }
  #device .cal-page[data-view="month"] .m-day b { justify-self: center; }
  #device .cal-page[data-view="month"] .m-day .m-dots { display: none; }
  #device .cal-page[data-view="month"] .m-day .m-events { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; }
  #device .cal-page[data-view="month"] .m-item { display: flex; align-items: flex-start; gap: 4px; min-width: 0; color: var(--ui-ink-2); font: 500 10.5px/1.15 var(--ui-font); text-align: left; }
  #device .cal-page[data-view="month"] .m-item i { flex: none; width: 5px; height: 5px; margin-top: 3px; border-radius: 50%; }
  #device .cal-page[data-view="month"] .m-item span { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  #device .cal-page[data-view="month"] .m-day .m-events > em { font: 600 9.5px/1 var(--ui-font-num); font-style: normal; color: var(--ui-ink-3); text-align: left; }
  #device .cal-page[data-view="month"] .m-day.out .m-events { opacity: 0.42; }

  /* four or fewer people share the day; extra columns scroll with the same soft edge */
  #device .cal-names.many { width: calc(100% - 12px); margin-right: 0; padding-right: 0; grid-template-columns: repeat(var(--n), minmax(150px, 1fr)); }
  #device .cal-grid.many .cal-cols { width: 100%; grid-template-columns: repeat(var(--n), minmax(150px, 1fr)); }
}
@media (min-width: 680px) and (max-width: 743.98px) {
  .page { padding-inline: 18px; }
  .cards { gap: 12px; }
}
@media (min-width: 744px) and (orientation: landscape) {
  .page { padding-inline: 48px; }
}
/* three columns from a tablet held sideways (his Redmi reads 1097 across; RN1378): a column stays about a phone's card */
@media (min-width: 1040px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { #device, .page, #top, #page > :not(#top), .hero, .dock, .dock button { transition-duration: 1ms; } .c-dates .soon, .c-mid b.low, .c-syms .ui-sym.s-pay svg, .c-syms .ui-sym.s-pay svg.ui-hop, .d-menu.on i { animation: none; } }

/* a state that leads somewhere (sessions rolled into another package) is tapped like the name below it */
button.ui-state { display: inline-flex; align-items: center; gap: 2px; min-height: var(--ui-tap); margin: -8px -5px -8px 0; color: var(--ui-ink); }
.ui-state svg { width: 16px; height: 16px; color: var(--ui-ink-3); }

/* A person's first name, the one the app displays, and the last name beside it: one row (RN514). */
.name-pair { display: flex; gap: 8px; }
.name-pair .ui-input { padding: 0 14px; }
.name-pair .ui-input:first-child { flex: 1.9 1 0; }
.name-pair .ui-input:last-child { flex: 1 1 0; }
/* her details: the phone and where she lives share a row; three small numbers share another, each with its unit at
   its end. Places offered as she types are small and take no room until there are some */
.pair, .trio { display: flex; gap: 8px; }
.pair .ui-input { flex: 1 1 0; }
.pair .ui-input:last-child { flex: 1.2 1 0; }
.trio label { position: relative; flex: 1 1 0; min-width: 0; }
.trio label:first-child { flex-grow: 0.7; }
.trio .ui-input { padding: 0 12px; }
.trio label:has(span) .ui-input { padding-right: 36px; }
.trio label span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font: 500 13px var(--ui-font); color: var(--ui-ink-3); pointer-events: none; }
[data-places]:empty { display: none; }
[data-places] { gap: 6px; }
[data-places] .ui-chip { position: relative; min-height: 36px; padding: 0 12px; font-size: 13px; }
[data-places] .ui-chip::after { content: ""; position: absolute; inset: -4px 0; }
/* a deeper row that is open shows its values in its own fields, so its summary rests */
.ui-sec.sub[data-sec="about"] > button .sum, .ui-sec.sub[data-sec="body"] > button .sum { max-width: 200px; transition: max-width 280ms var(--ui-ease), margin 280ms var(--ui-ease), opacity 220ms ease; }
.ui-sec.sub[data-sec="about"].open > button .sum, .ui-sec.sub[data-sec="body"].open > button .sum { max-width: 0; margin-left: -6px; opacity: 0; }

/* templates under their class type: a small subheader with the type's colour, then that type's own pills in one
   line that scrolls sideways (RN514, RN540) */
.tpl-pick { display: flex; flex-direction: column; gap: 16px; }
.tpl-kind { display: flex; flex-direction: column; gap: 8px; }
.tpl-kind > .ui-eyebrow { display: inline-flex; align-items: center; gap: 7px; }
.ui-eyebrow .dot, .ui-vpill .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--k-rgb, var(--c-rgb))); }
.ui-vpill .dot { margin: 0 3px 0 -2px; }
/* who it is for: a long name gives way before the row breaks, and the way to a new client stays beside the pill */
@media (max-width: 374px) { [data-pay] .ui-chips { gap: 5px; } }
.sell-who { flex-wrap: nowrap; gap: 8px; }
.sell-who > span, .sell-who .ui-vpill { min-width: 0; }
.sell-who > span.keep { flex: none; }
/* who a sale is for is searched in the sale's top row (RN943): the one bar wherever she searches (RN673), at the
   height of the pills it stands among. A person chosen is a pill with no sign of a list that drops. Two chosen share
   the row evenly, and a short name gives the room it does not need to the long one */
.sell-find { flex: 1 1 0; min-width: 112px; height: var(--ui-tap); display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; color: var(--ui-frost-ink); background: var(--ui-frost); box-shadow: inset 0 0 0 1px var(--ui-frost-edge); cursor: text; }
.ui-body > .sell-find, .bk-who > .sell-find, .pl-people > .sell-find { flex: 0 0 var(--ui-tap); }
.sell-find > svg { flex: none; width: 18px; height: 18px; margin: 0; color: var(--ui-frost-ink-2); }
.sell-find input { flex: 1 1 0; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; border-radius: 0; background: none; -webkit-appearance: none; appearance: none; font: 600 16px var(--ui-font); color: var(--ui-frost-ink); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); }
.sell-find input::placeholder { color: var(--ui-frost-ink-2); opacity: 1; }
.sell-find input::-webkit-search-cancel-button, .sell-find input::-webkit-search-decoration { display: none; }
.rd-sell .ui-vpill.add.icon-only { width: var(--ui-tap); padding: 0; }
.rd-sell [data-rule]:empty { display: none; }
.rd-sell [data-likely]:empty { display: none; }
.rd-sell .g.rows .ui-chip { max-width: calc(100vw - 80px); white-space: nowrap; text-align: left; }
.rd-sell .g.rows .ui-chip > svg + span { min-width: 0; max-width: 100%; }
.rd-sell .ui-chip .pk-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-sell .g.rows .ui-chip > svg + span > small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-mode="day"] .rd-sell .ui-text-act { color: var(--ui-accent); }
.ui-vpill.who { padding-right: 14px; }
.sell-who.both > span { flex: 1 1 0; max-width: max-content; }
[data-what]:empty { display: none; }
.ui-pair > .find-to { flex: 1 1 0; min-width: 0; }
.find-to .ui-vpill.who { min-width: 0; }
.sell-found .ui-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-ink); }
.duplicate-content .sell-found .ui-chip { max-width: calc(100vw - 36px); white-space: normal; }
.duplicate-content .sell-found .ui-chip > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.sell-found .ui-chip > svg { flex: none; width: 17px; height: 17px; margin: 0; color: var(--ui-ink-2); }
/* what she has bought, small under her name (RN577): the class type's dot, then the package's name */
.sell-found .ui-chip > span { display: flex; flex-direction: column; align-items: flex-start; }
/* a name alone (no quiet line under it) is one block line, so the kit's trim stands it at the chip's true middle (RN1390) */
.sell-found .ui-chip > span:not(:has(> small)) { display: block; }
.sell-found .ui-chip small { display: flex; align-items: center; gap: 9px; margin-top: 2px; font: 500 11px var(--ui-font); color: var(--ui-ink-2); }
.sell-found .has { display: inline-flex; align-items: center; gap: 4px; }
.sell-found .has > .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--k-rgb, var(--c-rgb))); }
.sell-found .has.past { opacity: 0.5; }
.sell-found .has.iced { color: #d7ecfb; }
.sell-found .has.iced > .dot { background: #eef7fd; box-shadow: 0 0 0 1px rgba(186, 222, 250, 0.9); }
.sell-found .has.more { color: var(--ui-ink-3); }
.sell-what { column-gap: 8px; }
.sell-what > .ui-chips + .ui-vpill.plain { margin-left: auto; }
/* a freeze's start and its length: one over the other on a phone, one row on a tablet's sheet, where both fit (RN1378) */
.fz-top { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 680px) and (max-width: 899.98px) { .fz-top { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 18px; } .fz-top > .ui-seg { flex: none; } }
/* on a phone the package and its end share one row: the end's words say it is a date, so its symbol gives way (RN1372) */
@media (max-width: 400px) { .sell-what .ui-vpill[data-id="dates"] > svg:not(.chev) { display: none; } }
.ui-vpill.add { flex: none; justify-content: center; width: var(--ui-tap); padding: 0; }
.ui-vpill.add > svg { width: 21px; height: 21px; margin: 0; stroke-width: 1.6; color: var(--ui-ink); }
/* a pill that is a choice by itself, with no picker behind it: no chevron; lit while it is the one in force */
.ui-vpill.plain { flex: none; padding: 0 15px; color: var(--ui-ink-2); box-shadow: none; }
.ui-vpill.plain[aria-pressed="true"] { color: var(--ui-ink); background: rgba(var(--c-rgb), var(--ui-on-a)); }
/* a price being changed where it stands: the pill's own shape, as a field */
.ui-input.soft { color: var(--ui-ink-2); font-weight: 500; }

/* the invitation (RN530): her words in a message bubble, the fixed facts below them and the client app beside it */
.inv-code { margin-left: 7px; padding: 3px 8px 3px 9px; border-radius: 9px; font: 650 13px/1.2 var(--ui-font); font-variant-numeric: tabular-nums; letter-spacing: 0.09em; color: var(--ui-ink); background: rgba(255, 255, 255, 0.09); }
.inv-row { --inv-phone-scale: 0.24; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 10px; transition: grid-template-columns var(--ui-t) var(--ui-ease); }
@media (max-width: 380px) { .inv-row { --inv-phone-scale: 0.22; gap: 8px; } .inv-msg { padding-left: 13px; padding-right: 12px; } }
.inv-message-col { display: flex; flex-direction: column; min-width: 0; }
.inv-label { display: block; height: 22px; margin: 0 2px 5px; color: var(--ui-ink-3); font-size: 11.5px; line-height: 22px; text-transform: none; } /* the same size as the label beside it over the phone (RN553: no subtle variation for no reason) */
/* the label's row: her two acts on the words take the label's place once she has changed them */
.inv-label-row { display: flex; align-items: center; gap: 16px; height: 22px; margin: 0 2px 5px; }
.inv-label-row .inv-label { margin: 0; }
.inv-label-row .ui-text-act { flex: none; font-size: 12.5px; padding: 12px 0; margin: -12px 0; }
.inv-preview-col .inv-label { height: auto; min-height: 22px; font-size: 11.5px; line-height: 1.25; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.inv-msg { position: relative; padding: 14px 15px 15px; border-radius: 22px 22px 22px 8px; font: 500 15.5px/1.5 var(--ui-font); color: var(--ui-ink); background: var(--ui-glass); box-shadow: inset 0 0 0 1px var(--ui-edge); }
.inv-msg::after { content: ""; position: absolute; left: 13px; bottom: -6px; width: 12px; height: 12px; background: var(--ui-glass); clip-path: polygon(0 0, 100% 0, 0 100%); }
.inv-words-wrap { position: relative; min-width: 0; padding-right: 18px; }
.inv-words { display: block; width: 100%; min-width: 0; min-height: 1.5em; margin: 0; padding: 0; resize: none; overflow: hidden; border: 0; border-radius: 0; outline: 0; background: none; color: inherit; font: inherit; line-height: inherit; box-shadow: 0 1.5px 0 transparent; transition: box-shadow var(--ui-t) var(--ui-ease); }
.inv-words:focus { box-shadow: 0 1.5px 0 rgba(var(--c-rgb), 0.9); }
.inv-words-wrap > svg { position: absolute; top: 2px; right: 0; width: 14px; height: 14px; color: var(--ui-ink-3); pointer-events: none; }
.inv-msg b { font-weight: 650; }
.inv-facts { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.inv-msg .inv-fact { margin: 0; color: var(--ui-ink-2); font: 500 13.5px/1.35 var(--ui-font); overflow-wrap: anywhere; }
.inv-msg .inv-fact b { color: var(--ui-ink); }
.inv-msg .code { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.inv-preview-col { width: calc(390px * var(--inv-phone-scale)); min-width: 0; }
.inv-look-face { --k: var(--inv-phone-scale); width: 100%; }
.inv-look-face .look-grow { width: var(--ui-tap); }
.inv-more { margin-top: auto; margin-bottom: -9px; padding: 6px 4px 0 16px; }
/* the line that stands in Archive's place sits under the link, on its words' edge, one line */
/* under the client's details its words start on the details' own edge, as the rows above them do */
.inv-more.det-foot { padding-left: 0; margin-left: -2px; }
.inv-more.has-hint { flex-wrap: wrap; row-gap: 0; }
.inv-more > .inv-hint { flex: 1 0 100%; text-align: left; text-wrap: pretty; padding: 0 4px 9px; }

/* ── the studio's own class types and packages (RN543) ───────────────
   Built from the pieces of the Sell drawer: the class-type head, the sideways row, the add button, value pills.
   A class type's head is the door to the type; the way to a new package of that type stands at its far end. */
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* bare things touched in this app answer like the kit's: a row or a word dims, a body gives (RN553) */
.set-type, .note, .c-name .nm { transition: opacity 140ms ease; }
.set-type:active, .note:active, .c-name .nm:active { opacity: 0.5; }
.person { transition: transform 160ms var(--ease); }
.person:active { transform: scale(0.985); }
.set-type { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: var(--ui-tap); padding: 0 6px 0 0; text-align: left; }
.set-type .ui-eyebrow { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--ui-ink-2); white-space: nowrap; }
.set-type .ui-eyebrow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.set-type .sum { flex: none; font: 500 13px var(--ui-font); color: var(--ui-ink-3); white-space: nowrap; }
.set-type .chev { flex: none; width: 15px; height: 15px; margin-left: -3px; color: var(--ui-ink-3); }
/* adding a class type is the home's own act, so it stands at the title's right (RN578); a touch brings its field in under
   the title, above the first class type, with the fold and blur of a section, and the plus turns to say it closes */
.set-top { display: flex; flex-direction: column; }
.set-new { margin: 0 -4px -11px 0; gap: 4px; }
.set-new svg { transition: transform 260ms var(--ui-ease); }
.set-new[aria-expanded="true"] svg { transform: rotate(45deg); }
.set-new { transition: color 200ms ease, opacity 140ms ease; }
.set-new .b, .set-new[aria-expanded="true"] .a { display: none; }
.set-new[aria-expanded="true"] { color: var(--ui-ink-2); }
.set-new[aria-expanded="true"] .b { display: inline; }
.set-add { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 440ms var(--ui-ease); }
.set-add > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; margin: 0 -5px; padding: 0 5px; opacity: 0; filter: blur(10px); transition: opacity 260ms ease, filter 260ms ease, padding 440ms var(--ui-ease); }
.set-add.open { grid-template-rows: 1fr; }
.set-add.open > div { padding: 16px 5px 5px; opacity: 1; filter: none; }
.set-add .ui-text-act:disabled { opacity: 0.4; }
.set-add .look-hint { margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .set-add, .set-add > div, .set-new svg { transition-duration: 1ms; } }
/* offered values under a field: the small pills of a client's location */
.set-offers:empty { display: none; }
.set-offers .ui-chip { position: relative; min-height: 36px; padding: 0 12px; font-size: 13px; }
.set-offers .ui-chip::after { content: ""; position: absolute; inset: -4px 0; }
.set-row > .ui-text-act { margin-left: auto; }
/* a package's two wheels side by side, and the promotion's switch at the head's right */
.set-wheels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.set-wheels.single { grid-template-columns: minmax(0, 1fr); }
.set-price .top { align-items: center; }
.set-price .side { flex: none; margin-left: auto; }
.set-price .ui-vpill { position: relative; min-height: calc(var(--ui-tap) - 9px); font-size: 13px; }
.set-price .ui-vpill::before { content: ""; position: absolute; inset: -4px 0; }
.set-price-calendar:empty { display: none; }
.set-impact { margin: 4px 0 0; }
.set-history-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; }
.set-history-line time { color: var(--ui-quiet); white-space: nowrap; }
.head-row > .ui-head > .ui-eyebrow:only-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-row > [data-promo] { flex: none; display: flex; margin: -15px -2px -15px 0; }
.set-promo { display: inline-flex; align-items: center; gap: 6px; }
/* the promotion's date is a row's value at its end: the pill at that size, the touch still the whole floor */
.set-promo .ui-vpill { position: relative; min-height: calc(var(--ui-tap) - 9px); font-size: 13.5px; }
.set-promo .ui-vpill::before { content: ''; position: absolute; inset: -4.5px 0; }
.set-promo .ui-text-act { color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.set-gone { margin-left: auto; }
.set-swap:empty { display: none; }
/* proof of a payment: the picture as it was given, never cropped, with the way to take it off beside it */
/* what a client scans to pay (qr.js): dark on white whatever the look, the amount under it */
.pay-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 16px; }
.pay-qr .ui-qr { display: block; width: min(232px, 68%); height: auto; border-radius: 16px; }
.pay-qr > span { font: 600 15px var(--ui-font-num); color: var(--ui-ink); font-variant-numeric: tabular-nums; }
[data-wqr] > .pay-qr { padding: 14px 0 6px; }
[data-wqr] > .pay-qr .ui-qr { width: min(168px, 50%); }
.pay-proof { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px 0 14px; }
.pay-proof img { display: block; max-width: 132px; max-height: 176px; border-radius: 12px; }
.pay-pic { flex: none; display: block; border-radius: 12px; transition: opacity 140ms ease; }
.pay-pic:active { opacity: 0.6; }
[data-proof] > .pay-proof { padding: 10px 0 0; }
.pay-full img { display: block; width: 100%; border-radius: 14px; }
.ui-sec > button .sum svg { width: 17px; height: 17px; vertical-align: -3px; }
.ui-li.gone > .what > b, .ui-li.gone > .what > .sub, .ui-li.gone > .end { text-decoration: line-through; color: var(--ui-ink-3); }
.set-swap > [data-each]:empty { display: none; }
/* a place that waits for words (a price's story, its history) takes no room until it has them: an empty one still
   took the stack's gap, four of them a band of nothing above the Instructor pill */
.set-swap > div:empty { display: none; }
/* the rows a class type is set by (and a trial's places) share one column of names, so their pills start together,
   with even room between the rows (RN1383) */
.set-lines, [data-trial-scope-choice] { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 7px; row-gap: 8px; }
.set-lines > .ui-inline, [data-trial-scope-choice] > .ui-inline { display: contents; }
.set-lines > .ui-inline > button { justify-self: start; }
/* the chosen colour's ring stands clear of the row's edges */
.set-tints.ui-chips.scroll { padding: 6px 18px 6px 6px; margin: -6px -18px -6px -6px; scroll-padding: 0 40px 0 6px; } /* its snap keeps the 6px room: at 0 the first swatch snapped to the edge, its ring cut and under the fade (27 Oct) */
/* a choice that stands outside a rule, kept for one who may make an exception: its small line is in the warning tone */
.ui-chip.past small { color: var(--ui-warn); }
/* once chosen it stands on its class's fill, where the warning tone is a pale colour carrying words: it takes the pill's ink (27 Oct) */
.ui-chip.past[aria-pressed="true"] small { color: inherit; }
.ui-sec.sub[data-sec="pname"] > button .sum { max-width: 200px; transition: max-width 280ms var(--ui-ease), margin 280ms var(--ui-ease), opacity 220ms ease; }
.ui-sec.sub[data-sec="pname"].open > button .sum { max-width: 0; margin-left: -6px; opacity: 0; }
/* the door from the studio drawer to a home of its own: a section's row, with the sign that it leads on */
.ui-sec.door > button .chev { transform: none; }
/* selling one built from nothing: the class types are one sideways row, and it stops before Custom where Custom stands beside it */
.sell-what > .ui-chips.scroll { flex: 1 1 0; min-width: 0; }
.sell-what > .ui-chips.scroll:not(:last-child) { margin-right: 0; padding-right: 0; scroll-padding-right: 0; }

/* ── the studio's place (RN597): the head of an area, what stands at the right of its tabs, Publish, the parts ── */
.area-head { min-height: 44px; align-items: center; flex-wrap: wrap; }
.area-head.end { align-items: flex-end; }
.area-head.tight .set-new .a { display: none; }
.area-head.tight .set-new { margin-right: 2px; }
.area-head.tight .set-new svg { width: 20px; height: 20px; }
.area-head > .look-id { flex: 1 1 auto; min-width: 0; }
.area-act { flex: none; display: flex; }
.area-act:empty { display: none; }
.area-act { gap: 16px; }
.area-act .r5-add-membership { margin: 0 -4px -9px 0; }
.area-head:not(.end) .area-act .r5-add-membership { margin: 0 -4px 0 0; }
.area-head.act-below .area-act .r5-add-membership { margin: 2px 0 -6px 0; }
.area-act .set-new { margin: 0 -4px -9px 0; }
.area-head:not(.end) .area-act .set-new { margin: 0 -4px 0 0; }
.area-head.act-below .area-act .set-new { margin: 2px 0 -6px -4px; }
.area-head > .ui-seg { margin-left: -2px; }
/* Publish stands at the head's right only while something is unpublished: it comes in and leaves with the one motion */
.area-pub { flex: none; max-width: 0; height: 38px; padding: 0; margin-left: -12px; overflow: hidden; border-radius: 999px; font: 700 14px var(--ui-font); letter-spacing: -0.01em; white-space: nowrap; color: var(--ui-on-accent); background: var(--ui-accent);
  opacity: 0; filter: blur(8px); pointer-events: none; transition: max-width 320ms var(--ui-ease), padding 320ms var(--ui-ease), margin 320ms var(--ui-ease), opacity 220ms ease, filter 260ms ease, transform 160ms var(--ui-ease); }
.area-pub-row { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.area-pub-row[hidden] { display: none; }
.area-pub-hint { flex: 1 1 auto; min-width: 0; margin: 0 2px; line-height: 1.35; }
.area-pub-row .area-pub { max-width: 110px; padding: 0 16px; margin-left: 0; opacity: 1; filter: none; pointer-events: auto; }
.area-pub-row .area-pub:active { transform: scale(0.96); }
.area-pub.on { max-width: 110px; padding: 0 16px; margin-left: 0; opacity: 1; filter: none; pointer-events: auto; }
.area-pub:active { transform: scale(0.96); }
/* Publish is this area's main act: sent, it stays pressed and breathes as a drawer's main act does (ui.css, .ui-go) */
.area-pub.ui-held { position: relative; opacity: 1; transform: scale(0.98); filter: brightness(0.92); }
.area-pub.ui-waits { animation: none; }
.area-pub.ui-waits::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; animation: ui-waits-veil 0.9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .area-pub.ui-waits::after { animation: none; opacity: 0.4; } }
.set-wrap { display: flex; flex-direction: column; }
/* opening hours: a day's hours stand at its row's end; a closed day is quiet. Under a lifted day: the two wheels, and the switch beside them */
.ui-li.hrs > b { flex: 1 1 auto; }
.ui-li.hrs .end { font: 650 13.5px var(--ui-font-num); color: var(--ui-ink); }
.ui-li.hrs.shut .end { color: var(--ui-ink-3); font-weight: 600; }
.hrs-day { margin: 0 0 12px; }
.hrs-set { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hrs-set .ui-wheel { flex: 1 1 auto; transition: opacity 240ms ease, filter 240ms ease; }
.hrs-set.off .ui-wheel { opacity: 0.28; filter: saturate(0.4); pointer-events: none; }
.clo-when { display: flex; align-items: center; gap: 8px; }
.clo-when > .ui-text-act { margin-left: auto; }
/* what a closure does, under its days: one quiet line. A new closure keeps the line's room while its days are chosen */
.clo-does { margin: 0 2px; text-wrap: balance; }
.clo-when + .ui-swap:empty { display: none; }
/* policies and permissions: a rule or a role lifts, and what it is set to stands under it */
.ui-li.pol > b { flex: 1 1 auto; text-align: left; }
.ui-li.pol > .ui-onoff { margin: -6px 0; }
.pol-set { display: flex; flex-direction: column; gap: 14px; }
.pol-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pol-line .ui-wheel { flex: 1 1 auto; }
.pol-line.long .ui-wheel { --seam: 26%; }
.pol-set .ui-wheel, .pol-set .ui-inline, .pol-dims { transition: opacity 240ms ease, filter 240ms ease; }
.pol-set.off .ui-wheel, .pol-set.off .ui-inline, .pol-dims.off { opacity: 0.28; filter: saturate(0.4); pointer-events: none; }
/* a line that is not about the rule's number stays live while its switch is off; so does the way to an exception */
.pol-set.off .ui-inline.keep { opacity: 1; filter: none; pointer-events: auto; }
/* what a client gets, as it lands on her phone: the studio's mark and name, the words, when */
.ntc { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px 13px; border-radius: 18px; background: var(--ui-glass); box-shadow: inset 0 0 0 1px var(--ui-edge); transition: opacity 240ms ease, filter 240ms ease; }
.ntc > i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font: 700 14px var(--ui-font); font-style: normal; color: var(--ui-accent-ink); background: var(--ui-accent); }
.ntc > span { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; font: 500 13.5px/1.35 var(--ui-font); color: var(--ui-ink-2); }
.ntc b { font: 650 13px var(--ui-font); color: var(--ui-ink); }
.ntc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ntc small { flex: none; font: 500 11.5px var(--ui-font); color: var(--ui-ink-3); }
.pol-set.off .ntc { opacity: 0.28; filter: saturate(0.4); }
.pol-head { display: block; margin: 14px 2px 2px; }
.pol-head:first-child { margin-top: 2px; }
/* a sort with a rule of its own says its number beside its name; the way back to the studio's rule ends the row */
[data-scopes] .ui-chip small, .team-different-for .ui-chip small { display: inline; margin: 0 0 0 7px; font-size: 12px; color: inherit; opacity: 0.72; }
[data-scopes] .ui-chip .x::after, .look-pages .ui-chip .x::after, .team-different-for .ui-chip .x::after { content: ""; position: absolute; inset: -11px -9px -11px -6px; }
[data-scopes] .ui-chip .x, .look-pages .ui-chip .x, .team-different-for .ui-chip .x { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 -7px 0 5px; border-radius: 50%; opacity: 0.8; }
[data-scopes] .ui-chip .x svg, .look-pages .ui-chip .x svg, .team-different-for .ui-chip .x svg { width: 14px; height: 14px; transform: rotate(45deg); }
/* its own, not the studio's or the role's: one small dot after the words (a class type's in its colour) */
.own-dot { flex: none; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: rgb(var(--k-rgb, var(--c-rgb))); vertical-align: 1px; }
/* a role's groups stand as one block: one line between two of them, never two */
.perm-secs { display: flex; flex-direction: column; }
.perm-set { display: flex; flex-direction: column; padding-bottom: 8px; }
.perm-set.fixed { pointer-events: none; }
.perm-set.fixed .ui-onoff > i { opacity: 0.55; }
.perm-end { min-height: 0; margin-top: -6px; }
.perm-end:empty, .perm-end > span:only-child { display: none; }
.perm-row.own .ui-onoff > span::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: rgb(var(--c-rgb)); vertical-align: 1px; }
/* a person's role over her name: its symbol, its word, and the dot when her permissions are her own */
.ui-eyebrow[data-role] { display: flex; align-items: center; gap: 5px; }
.ui-eyebrow[data-role] > svg { flex: none; width: 13px; height: 13px; }
.ui-eyebrow[data-role] > .own-dot { margin-left: 1px; width: 6px; height: 6px; }
.team-row .end .own-dot { margin: 0 2px 0 6px; }
@media (prefers-reduced-motion: reduce) { .area-pub { transition-duration: 1ms; } }


/* ── the dock while she searches (RN641, RN653) ───────────────────────────
   Of five answers he chose the quietest: the glass stays as it is, and the two symbols she steers by (back, and the
   lens of the search) take the system colour. Never a lamp. */
.dock .d-back, .d-search > svg { transition-property: color, max-width, width, margin, opacity, filter, transform; }
.searching .dock .d-back { color: var(--ui-accent-ink); }
.searching .d-search > svg { color: var(--ui-accent); }


/* ── the top of the page (RN634, RN640, RN652) ────────────────────────────
   The top row is the studio's alone. The menu stands right of the small line chart, always there. A sold figure too
   wide for the row steps down in size (the script), and the chart gives way last. */
.hero-menu { position: relative; flex: none; margin: 0 -6px 0 auto; width: 36px; height: 38px; display: grid; place-items: center; color: rgba(255, 255, 255, 0.88); transition: transform 160ms var(--ui-ease); }
.hero-menu svg { width: 24px; height: 24px; }
.hero-menu::after { content: ""; position: absolute; inset: -5px -6px; }
.hero-menu:active { transform: scale(0.9); }
/* the calendar's sign left of the menu, spaced as the packages sign is on the calendar page (RN1406) */
.hero-row > .hero-cal { margin-left: auto; }
.hero-row > .hero-cal ~ .hero-cal, .hero-row > .hero-cal + .hero-menu { margin-left: -7px; }
.hero-row.tight .spark-box { display: none; }

/* ── a card says who teaches it and where (RN638) ─────────────────────────
   Two small pills, one over the other, right of the class type: the instructor (her role's symbol inside), then the
   room. With them, the class type and the count stand level with the two pills. Both give way by an ellipsis.
   The two pills stand on two rows of 20 with 4 between, at the foot of the row, and the class type and the count
   stand on the same two rows, each centred in its own: the two columns share one pitch, whatever the face or the
   width (28 Oct; before, the pills spread over the row's whole height while the two lines stood 14 apart) */
.c-mid.has-at { --c-row: 20px; --c-gap: 4px; }
.c-at { min-width: 0; align-self: flex-end; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--c-row) var(--c-row); row-gap: var(--c-gap); align-items: center; justify-items: start; margin-left: 4px; padding: 1px 0; }
.c-pill { position: relative; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: 999px; font: 650 10.5px var(--font); color: var(--frost-ink); background: color-mix(in srgb, var(--kd) 14%, transparent); white-space: nowrap; }
/* a pill with no fill is turned down (RN652). Of six designs for each he chose (RN662): who teaches stands in the
   class's own colour whole, with white on it; the room in a soft fill of the same colour */
.c-pill.by { background: var(--kd); color: #fff; }
.c-pill.by svg { color: rgba(255, 255, 255, 0.86); }
/* the card's sign and its instructor take the card's own fall of colour (RN1372; the rule is in pieces.css) */
.c-sign, .c-pill.by {
  background: var(--ui-gloss),
    linear-gradient(172deg, oklch(from var(--kd) calc(l + 0.07) c h), oklch(from var(--kd) calc(l - 0.05) calc(c * 1.04) h)); }
.card.past .c-pill.by { color: #0b1220; }
.card.past .c-pill.by svg { color: rgba(11, 18, 32, 0.74); }
.c-pill svg { flex: none; width: 11px; height: 11px; stroke-width: 2.1; color: var(--kd); }
/* the room's pill, as he chose it by hand (RN678, RN680): a soft wash of the class colour, its symbol and its
   writing both in the card's second ink */
.c-pill.room { background: color-mix(in srgb, var(--kd) 14%, transparent); color: var(--frost-ink-2); }
.c-pill.room svg { color: var(--frost-ink-2); }
.c-pill > span { min-width: 0; overflow: clip visible; text-overflow: ellipsis; text-box: trim-both cap alphabetic; }
button.c-pill { transition: transform 160ms var(--ease); }
/* the two pills stand 24 apart, so neither can have the whole height of a touch: the instructor's reaches up and the
   room's down, and both further to the right, where nothing else is touched */
button.c-pill::after { content: ""; position: absolute; inset: -10px -12px -2px -8px; }
button.c-pill.room::after { inset: -2px -12px -10px -8px; }
.c-mid.below button.c-pill::after { inset: -9px -3px; }
button.c-pill:active { transform: scale(0.95); }
/* the row's widths: the two pills stand whole and the class type gives way first, by an ellipsis ("/ 365 used" is
   never cut); every card's pills start on one line down the list. A count of three figures steps down in size. */
/* the class type stands right above "/ x used", never apart from it (RN664) */
.c-mid.has-at .c-of { flex: 1 1 0; min-width: 62px; max-width: max-content; }
.c-mid.has-at .c-at { flex: 0 1 auto; min-width: 46px; }
.c-mid.has-at:not(.below) .c-of { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--c-row) var(--c-row); row-gap: var(--c-gap); align-items: center; padding-bottom: 1px; }
/* a count that takes two lines on a narrow card ("of 365 / this month") stands centred on the room's pill, as a class
   type of two words stands centred on the instructor's: the rows never grow, so the class type stays level with its
   pill and right above its count (RN638, RN664) */
.c-mid b.d3 { font-size: 38px; }
/* a count of three figures is drawn smaller than two, and at 38 its top stood 10 under the class type, apart from its
   count (28 Oct, "120 of 365"). Beside the pills it stands exactly as tall as the two lines, as the drop-in's word
   does (RN1397): its top on the class type's capitals, its foot on the count's line, so the three read as one block.
   Its face, weight, tracking and colour are the numeral's own; only its size is now that height */
.c-mid.has-at { font-family: var(--font); --c-cap: calc(1cap / 1em); }
.c-mid.has-at:not(.below) > b.d3 { align-self: flex-end; font-size: calc(var(--c-row) + var(--c-gap) + 10.75px * var(--c-cap)); font-size-adjust: cap-height 1; line-height: 1; text-box: trim-both cap alphabetic; margin-bottom: calc(1px + var(--c-row) / 2 - 5.75px * var(--c-cap)); }
/* too full to say a name whole even so: the two pills take a line of their own, side by side */
.c-mid.below { flex-wrap: wrap; row-gap: 10px; }
.c-mid.below .c-at { order: 9; flex: 0 0 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; margin: 0; padding: 0; }
.c-mid.below .c-pill { flex: 0 1 auto; min-width: 0; }
/* there a trial's or a drop-in's two lines keep a pitch of their own, as close as they stood in a column (13 and 2),
   so the word beside them is still exactly as tall as they are (RN1397) */
.c-mid.has-at.below { --c-row: 13px; --c-gap: 2px; }
.c-mid.has-at.below .c-ofs .c-of { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--c-row) minmax(var(--c-row), auto); row-gap: var(--c-gap); align-items: center; padding-bottom: 1px; }
/* more than two small symbols: a block of four at a smaller size */
.c-set.many { display: inline-grid; grid-template-columns: repeat(2, 27px); grid-auto-rows: 23px; align-items: center; justify-items: center; }
.c-set.many .ui-sym { width: 27px; height: 23px; }
.c-set.many .ui-sym svg { width: 17px; height: 17px; }
.c-set.many .ui-sym::after { inset: -1px 0; }
.c-syms .c-set.many .ui-sym.s-pay svg { -webkit-mask-size: 17px 17px; mask-size: 17px 17px; }

/* ── what the person holding the phone may not do is absent (access.js) ── */
[data-cant~="sell"]:not([data-route-sell="yes"]) .dock [data-a="add-package"], [data-cant~="cedit"] .dock [data-a="add-client"], [data-noplace] .dock .d-menu { display: none; }
.ui-tiles:empty { display: none; }
.trial-followup .trial-followup-row > span:first-child { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.trial-followup .trial-followup-row small { color: var(--ui-ink-3); font: 500 12px var(--ui-font); }
.trial-followup .trial-followup-row .side svg { flex: none; width: 16px; height: 16px; }
.trial-followup-actions { width: 66%; margin: 10px auto 4px; }
.trial-message { display: grid; gap: 6px; padding: 10px 0; }
.trial-message blockquote { margin: 0; color: var(--ui-ink-2); font: 500 14px/1.4 var(--ui-font); }
/* a client's details she may read and not change */
.ui-secs.fixed [data-sec="details"] .fold { pointer-events: none; }
.ui-secs.fixed [data-sec="details"] .ui-vpill .chev { display: none; }
/* and what was never filled in is not there for her; her phone is said once, above */
.ui-secs.fixed [data-sec="details"] [data-f="phone"], .ui-secs.fixed [data-sec="details"] .ui-input:placeholder-shown, .ui-secs.fixed [data-sec="details"] .ui-pick:has(.ui-vpill.empty),
.ui-secs.fixed [data-sec="details"] .ui-sec.sub:not(:has(.sum:not(:empty))):not([data-sec="hnote"]), .ui-secs.fixed [data-sec="details"] .ui-chips[data-places] { display: none; }
.ui-secs.fixed [data-sec="details"] .ui-field:not(:has(.ui-input:not(:placeholder-shown):not([data-f="phone"]))) { display: none; }

/* ── Activity: who did what (activity.js) ── */
.act-who { margin: 0 0 4px; }
.act-list .pol-head { margin-top: 16px; }
.act-list .pol-head:first-child { margin-top: 4px; }
.act-row > svg { flex: none; width: 17px; height: 17px; color: rgb(var(--k-rgb, var(--c-rgb))); opacity: 0.9; }
.act-row .what { flex: 1 1 auto; min-width: 0; font: 500 14px/1.3 var(--ui-font); color: var(--ui-ink-2); text-align: left; }
.act-row .what b { font-weight: 650; color: var(--ui-ink); }
.act-row .end { flex: none; font: 600 12.5px var(--ui-font); color: var(--ui-ink-3); }
.act-row.cover-agreement .what { flex: 1 1 auto; font-size: 12px; white-space: nowrap; }
@media (max-width: 380px) { .act-row.cover-agreement .what { font-size: 11px; } }

/* the studio's account with the product (account.js). Its three plans are fixed options, so they stand as the kit's list
   of choices, each with what it is for in quiet ink beside its name. A question she asked keeps one line in the list and
   is whole in its own view; its answer is words to read, in full ink */
.acct-plans { margin-top: 14px; border-bottom: 0; }
.acct-plans .well { margin-bottom: 0; }
.acct-plans .ui-li > span:first-child { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.acct-plans .ui-li b { flex: none; white-space: nowrap; }
.acct-plans .ui-li small { min-width: 0; font: 500 12.5px var(--ui-font); color: var(--ui-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-plans .two .ui-li { min-height: 58px; }
.acct-plans .two .ui-li > span:first-child { flex-direction: column; align-items: flex-start; gap: 2px; }
.ui-li .end.bad { color: var(--ui-bad); }
.acct-q b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-asked { text-wrap: balance; }
button.app-on { position: relative; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.app-on::after { content: ""; position: absolute; inset: -13px -10px; }
.acct-you { grid-template-columns: 36px minmax(0, 1fr) auto; margin-top: 14px; }
.acct-you em { font: 650 13px var(--ui-font); font-style: normal; color: var(--ui-ink-2); }
.acct-to > span:first-child { flex: none; }
.acct-to .side { min-width: 0; display: block; text-wrap: balance; }
.acct-answer { margin: 16px 2px 6px; font: 500 15px/1.5 var(--ui-font); color: var(--ui-ink); }
/* Data: a figure let go stands quiet beside the one that stays; a long file name gives way, its count of rows never does */
.acct-here .end { gap: 9px; }
.acct-here .end i { font: 500 12.5px var(--ui-font-num); font-style: normal; color: var(--ui-ink-3); }
.acct-file > b { flex: none; }
.acct-file .end { flex: 0 1 auto; min-width: 0; }
.acct-file .end > span { min-width: 0; display: inline-flex; }
.acct-file .end > span > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-file .end > span > span + span { flex: none; white-space: pre; }

/* A changeable summary uses the kit value pill inside its existing row touch.
   Stretch within the row so adding the sign does not change the list spacing. */
.ui-li > .end.ui-vpill { min-height: unset; align-self: stretch; }

/* Keep the promotion value pill inside the head, clear of the drawer grip. */
.head-row > [data-promo]:has(.ui-vpill) { margin: unset; }
.head-row:has([data-promo] .ui-vpill) { align-items: center; }

/* Darker answers for the product's own colour, for him to try from the hand controls (RN995 to RN998). One hue;
   each level is a step deeper than the one before, and the original stands while none is picked. With each goes
   its accent (RN996): the light ink of an active thing rises a little as the colour deepens, and from the fifth
   level the fill of a chosen thing stops going down and fills more strongly, so what is chosen still stands out
   while the system's own glass, its solid fills and its main act go on down. A class's own drawer is untouched. */
:root[data-system="1"] { --ui-accent: #2f60b2; --ui-accent-rgb: 47, 96, 178; --ui-accent-ink: #9ec2fe; --ui-accent-deep: #2858ab; --ui-go: #2f60b2; --sys-rgb: 47, 96, 178; --sys-on: 0.34; }
:root[data-system="2"] { --ui-accent: #2352a2; --ui-accent-rgb: 35, 82, 162; --ui-accent-ink: #a3c5fe; --ui-accent-deep: #1d4b9a; --ui-go: #2352a2; --sys-rgb: 35, 82, 162; --sys-on: 0.34; }
:root[data-system="3"] { --ui-accent: #194692; --ui-accent-rgb: 25, 70, 146; --ui-accent-ink: #a8c9ff; --ui-accent-deep: #123f8a; --ui-go: #194692; --sys-rgb: 25, 70, 146; --sys-on: 0.34; }
:root[data-system="4"] { --ui-accent: #0e3980; --ui-accent-rgb: 14, 57, 128; --ui-accent-ink: #aeccfd; --ui-accent-deep: #073279; --ui-go: #0e3980; --sys-rgb: 14, 57, 128; --sys-on: 0.34; }
:root[data-system="5"] { --ui-accent: #042d70; --ui-accent-rgb: 14, 57, 128; --ui-accent-ink: #b0cefe; --ui-accent-deep: #002668; --ui-go: #4479d3; --sys-rgb: 4, 45, 112; --sys-on: 0.42; }
:root[data-system="6"] { --ui-accent: #00215f; --ui-accent-rgb: 14, 57, 128; --ui-accent-ink: #b4d0fd; --ui-accent-deep: #001c54; --ui-go: #00215f; --sys-rgb: 0, 33, 95; --sys-on: 0.5; }
:root[data-system="7"] { --ui-accent: #00184a; --ui-accent-rgb: 14, 57, 128; --ui-accent-ink: #b7d2fe; --ui-accent-deep: #00123f; --ui-go: #00184a; --sys-rgb: 0, 24, 74; --sys-on: 0.58; }
:root[data-system="8"] { --ui-accent: #000d38; --ui-accent-rgb: 14, 57, 128; --ui-accent-ink: #bad4ff; --ui-accent-deep: #000830; --ui-go: #000d38; --sys-rgb: 0, 13, 56; --sys-on: 0.66; }
/* The accent by itself (RN999): the colour a chosen thing is filled with and the light ink of an active thing, set
   apart from the system colour. Unset, it is the one that goes with the system colour's level, above. */
:root[data-accent="1"] { --ui-accent-rgb: 59, 109, 194; --ui-accent-ink: #99bffe; --sys-on: 0.34; }
:root[data-accent="2"] { --ui-accent-rgb: 68, 121, 211; --ui-accent-ink: #abcafe; --sys-on: 0.34; }
:root[data-accent="3"] { --ui-accent-rgb: 91, 132, 201; --ui-accent-ink: #c9deff; --sys-on: 0.34; }
:root[data-accent="4"] { --ui-accent-rgb: 62, 122, 225; --ui-accent-ink: #86b3ff; --sys-on: 0.34; }
/* the system's own glass keeps the system colour whatever the accent is, and a chosen thing in it fills as strongly as
   its level asks unless he has set how solid a chosen thing is (--tune-acton, named in ui.css) */
:root:is([data-system], [data-accent]) .ui-drawer[data-kind=""] { --ui-on-a: var(--tune-acton, var(--sys-on, 0.34)); --ui-rim-rgb: var(--sys-rgb, 59, 109, 194); }
:root:is([data-system], [data-accent]) .ui-drawer[data-kind=""] > .ui-lit, :root:is([data-system], [data-accent]) .ui-drawer[data-kind=""]::after { --c-rgb: var(--sys-rgb, 59, 109, 194); }

/* What a chosen thing is filled with, for him to try from the hand controls (RN999). The walk's own is the colour of
   where it stands. Clear is a glass with no colour in it. Frost is the search bar's white frosted glass, and what is
   written on it turns to the dark ink that bar uses. One strength stands under all three (--tune-acton). The wheel's
   lens stays clear under Frost: values pass through it, and white ink crossing a white lens would be lost. By night
   only: by day the ground is light, and a white fill on it would say nothing. It stands in the studio's own
   style file, as the system's levels and accent do: the client's app carries the studio's colour and is not changed. */
:root[data-actfx="clear"]:not([data-mode="day"]) :is(.ui-who, .ui-chip, .ui-glass, .look-sym, .ui-vpill.plain, .cal-d, .cal-name, .m-day)[aria-pressed="true"], :root[data-actfx="clear"]:not([data-mode="day"]) :is(.ui-seg button[aria-pressed="true"], .ui-seg .lens, .ui-wheel .lens, .t-slot.next) { --c-rgb: 255, 255, 255; --k-rgb: 255, 255, 255; --ui-on-a: calc(var(--tune-acton, 0.34) * 0.62); }
:root[data-actfx="clear"]:not([data-mode="day"]) .ui-onoff[aria-checked="true"] > i { --c-rgb: 255, 255, 255; --ui-on-a: 0.04; }
:root[data-actfx="frost"]:not([data-mode="day"]) :is(.ui-who, .ui-chip, .ui-glass, .look-sym, .ui-vpill.plain, .cal-d, .cal-name, .m-day)[aria-pressed="true"], :root[data-actfx="frost"]:not([data-mode="day"]) :is(.ui-seg button[aria-pressed="true"], .t-slot.next) { --c-rgb: 255, 255, 255; --k-rgb: 255, 255, 255; --ui-on-a: calc(0.64 + var(--tune-acton, 0.34) * 0.36); --ui-ink: var(--ui-frost-ink); --ui-ink-2: var(--ui-frost-ink-2); --ui-ink-3: var(--ui-frost-ink-2); --ui-accent-ink: var(--ui-accent); }
:root[data-actfx="frost"]:not([data-mode="day"]) .ui-seg .lens { --c-rgb: 255, 255, 255; --ui-on-a: calc(0.64 + var(--tune-acton, 0.34) * 0.36); }
:root[data-actfx="frost"]:not([data-mode="day"]) .ui-wheel .lens { --c-rgb: 255, 255, 255; --ui-on-a: calc(var(--tune-acton, 0.34) * 0.62); }
:root[data-actfx="frost"]:not([data-mode="day"]) .ui-onoff[aria-checked="true"] > i { --c-rgb: 255, 255, 255; --ui-on-a: 0.52; }
:root[data-actfx="frost"]:not([data-mode="day"]) .ui-onoff[aria-checked="true"] > i::after { background: var(--ui-frost-ink); }
:root:is([data-actfx="clear"], [data-actfx="frost"]):not([data-mode="day"]) :is(.ui-chip.ui-held, .ui-seg button.ui-held, .ui-onoff.ui-held > i) { --c-rgb: 255, 255, 255; }

/* the main button of a system drawer is the accent's own blue, set where the fifth level is set (his choice among
   fifteen, RN1046): the same blue a chosen thing has, so the app has one blue that acts */

/* a trial or a drop-in says which it is on its card (RN1056). Three ways stand in the hand controls (data-kindword on
   the root): beside the count in the class name's own writing (the walk's own), a tall light word in the numeral's
   face, or the word where the count stood. Its size and its ink are his to set (--tune-kindsize, data-kindink) */
.c-ofs { display: flex; align-items: stretch; min-width: 0; }
.c-mid.has-at .c-ofs { flex: 1 1 0; min-width: 62px; max-width: max-content; }
.c-mid.has-at .c-ofs .c-of { flex: 0 1 auto; min-width: 0; max-width: none; }
.c-ofs .c-count { overflow: hidden; text-overflow: ellipsis; }
.c-sort { display: flex; align-items: center; flex: 0 0 auto; margin: 0 0 2px 9px; padding-left: 9px; border-left: 1px solid color-mix(in srgb, var(--kd) 32%, transparent); font: 700 calc(10px * var(--tune-kindsize, 1)) / 1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kd); white-space: nowrap; }
.c-sort-in { display: none; font: 700 calc(10px * var(--tune-kindsize, 1)) / 1.1 var(--font); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kd); }
:root[data-kindword="tall"] .c-sort { align-items: flex-end; margin: 0 0 0 8px; padding: 0; border-left: 0; font: 200 calc(29px * var(--tune-kindsize, 1)) / 0.86 var(--font-num); letter-spacing: -0.025em; text-transform: none; }
:root[data-kindword="count"] .c-sort, :root[data-kindword="off"] .c-sort { display: none; }
:root[data-kindword="count"] .c-of .c-count { display: none; }
:root[data-kindword="count"] .c-sort-in { display: block; }
:root[data-kindink="quiet"] .c-sort, :root[data-kindink="quiet"] .c-sort-in { color: var(--frost-ink-2); border-left-color: color-mix(in srgb, var(--frost-ink-2) 32%, transparent); }
/* the word as large as the card's numeral, standing where the numeral stands (RN1057: "in the same size letters as
   the X in the X of Y sessions used"). One session is all it has, so the numeral gives its place to the word, and the
   count's line says the whole of it ("0 of 1 used") */
.c-count-all { display: none; overflow: hidden; text-overflow: ellipsis; }
:root[data-kindword="big"] .card.one .c-mid > b { display: none; }
/* at the numeral's size the word shouted over the card (RN1391): it stands exactly as tall as the two lines beside it,
   its top on the first one's capitals and its foot on the last one's line (RN1397: no longer a touch over) */
:root[data-kindword="big"] .c-ofs { align-items: last baseline; }
/* that height is a relation, not a size, so it holds in any face at any width (28 Oct): the two lines stand centred
   on the card's two rows (RN638), so from the class type's capitals to the count's line is one row and its gap, and
   half of each line's capitals (10 and 11.5 px type in the app's face: 10.75 px times that face's capital height to
   its size, read here as --c-cap). The word takes that as its own capital height in its own face (font-size-adjust:
   cap-height 1), and its foot already stands on the count's line. Its tracking, -0.03 of the face's size before,
   is -0.042 of the capital height it is now set by */
@property --c-cap { syntax: '<number>'; inherits: true; initial-value: 0.7; }
:root[data-kindword="big"] .c-ofs { font-family: var(--font); --c-cap: calc(1cap / 1em); --c-two: calc(var(--c-row, 20px) + var(--c-gap, 4px) + 10.75px * var(--c-cap)); }
:root[data-kindword="big"] .c-sort { order: -1; display: block; margin: 0 9px 0 -1px; padding: 0; border-left: 0; font: var(--kindword-w, 400) calc(var(--c-two) * var(--tune-kindsize, 1)) / 1 var(--font-num); font-size-adjust: cap-height 1; letter-spacing: -0.042em; text-transform: none; }
:root[data-kindword="big"] .c-of .c-count { display: none; }
/* on a narrow card the word gives way a little in size before anything beside it is cut (FILTER 5.7): "0 of 1 u…" at 360 and on the tablet's two columns */
:root[data-kindword="big"] .card.one .c-mid { container-type: inline-size; }
:root[data-kindword="big"] .card.one .c-sort { font-size: calc(var(--c-two) * var(--tune-kindsize, 1)); }
:root[data-kindword="big"] .c-count-all { display: block; }
/* the quiet act under a card's row of rooms or instructors (RN1059) */
.card-own-row { display: flex; justify-content: flex-start; min-height: 30px; margin-top: 14px; }
/* the reason the studio gives when it keeps a client's details: Send sits in the field, as in Account's question */
.cl-why { position: relative; display: block; }
.cl-why .ui-input { padding-right: 52px; }
.cl-why-send { position: absolute; right: 8px; bottom: 6px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ui-ink); background: rgba(var(--c-rgb), var(--ui-on-a)); transition: opacity var(--ui-t) ease, transform 160ms var(--ui-ease); }
.cl-why-send:active { transform: scale(0.92); }
.cl-why-send svg { width: 17px; height: 17px; }
.cl-why-send[disabled] { opacity: 0.3; pointer-events: none; }
.cl-profile-reason { color: var(--ui-ink-2); font-size: 12px; }
/* the dates row, lifted: a whole row with the kit's room inside its outline */
.ui-lifted > .pk-date-row, .pk-date-row.ui-carry.lifted { flex: 1 1 auto; min-height: 52px; padding-left: 16px; padding-right: 14px; }

.inv-preview-col .inv-label { height: auto; min-height: 22px; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
.prep-pill:not(.complete) .ci-check { opacity: 0; filter: blur(var(--ui-blur)); transform: scale(.92); }
.prep-pill:not(.complete) .ci-way { opacity: 1; filter: none; transform: none; }
.prep-invite-team { flex-wrap: nowrap; gap: 8px; }
.prep-invite-message { display: grid; gap: 5px; }
.prep-invite-message textarea { min-height: 70px; resize: none; }
.prep-invite-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.prep-invite-screen { position: relative; height: 260px; overflow: hidden; border-radius: 14px; background: var(--ui-glass); }
.prep-invite-screen iframe { position: absolute; top: 0; left: 0; display: block; width: 360px; height: 780px; border: 0; transform: scale(.333333); transform-origin: top left; pointer-events: none; }
/* what goes with the message, each fact with its sign (RN1263) */
.prep-invite-facts { display: grid; gap: 8px; color: var(--ui-ink-2); font: 500 12.5px/1.3 var(--ui-font); }
.prep-invite-facts p { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: start; gap: 8px; margin: 0; }
.prep-invite-facts svg { width: 15px; height: 15px; margin-top: 1px; color: var(--ui-ink-3); }
.prep-invite-nomail { margin-top: 12px; color: var(--ui-ink-3); }

.prep-invite-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 130px); align-items: start; gap: 10px; min-width: 0; }
.prep-invite-message { min-width: 0; }
.prep-invite-message .inv-msg { padding: 10px 12px; }
.prep-invite-message textarea { display: block; width: 100%; min-height: 72px; border: 0; resize: none; color: var(--ui-ink); background: transparent; font: 500 13px/1.4 var(--ui-font); }
.prep-invite-message textarea[data-f="client-message"] { font-size: 12px; }
.prep-invite-preview { min-width: 0; }
.prep-invite-preview > .ui-eyebrow { min-height: 28px; line-height: 1.25; overflow-wrap: anywhere; }
.prep-invite-facts { margin-top: 8px; }
@media (max-width: 370px) {
  .prep-invite-layout { grid-template-columns: minmax(0, 1fr) minmax(100px, 100px); gap: 8px; }
  .prep-invite-screen { height: 217px; }
  .prep-invite-screen iframe { transform: scale(.277778); }
}
@media (min-width: 371px) { .prep-invite-screen { height: 282px; } .prep-invite-screen iframe { transform: scale(.361111); } }

/* The lighter look takes away every blur; what floats keeps a solid ground, so nothing ever shows through the dock (RN1251) */
:root:is([data-lite="on"], [data-lite-auto]:not([data-lite="off"])) .dock { background: rgba(31, 34, 41, 0.97); }

/* the search row breathes before the first class heading (19 Oct, hand finish) */
.rd-sell .find.sell-who { margin-bottom: 16px; }
/* the sale's choices stand apart from the package pill above them (19 Oct, hand finish) */
.rd-sell > .ui-swap { margin-top: 8px; }

/* the follow-up as drawn (hand finish 22 Oct): the client's name is the heading, Trial and Goal are labelled rows, the two acts sit together */
.trial-followup .trial-followup-rows .side > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trial-followup .trial-followup-rows .side { min-width: 0; }
.trial-followup .trial-message { padding: 14px 0 4px; }
.trial-followup .trial-message blockquote { padding-left: 12px; box-shadow: inset 2px 0 0 var(--ui-line); font-size: 15px; }
.trial-followup .trial-followup-rows .side { display: inline-flex; align-items: center; gap: 4px; }
.trial-followup .trial-followup-rows .side svg { flex: none; width: 16px; height: 16px; color: var(--ui-ink-3); }
.trial-followup .trial-followup-actions { margin: 18px auto 8px; }
/* the plan's hint is a line and its act on one row (RN1360) */
.look-hint.ui-say { text-align: left; }
.look-hint.ui-say > span { text-wrap: pretty; }