/* pieces.css: the pieces both apps are made of that are more than a kit primitive and less than a screen. Each was
   drawn once in one app and is used in the other as it stands: the owner's and the client's page both load this
   sheet after ui.css, so a piece has one source. Only kit tokens, and the class colour of where it stands
   (--c-rgb), or of the session it shows (--k-rgb). Flat (RN553). */

/* ── a session as a chip: its time, who or what, and its state; the one that comes next is the only one filled ── */
.t-slot { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: var(--ui-tap); padding: 0 14px 0 12px; border-radius: 999px; font: 600 13.5px var(--ui-font); color: var(--ui-ink-2); white-space: nowrap;
  background: var(--ui-glass); box-shadow: inset 0 0 0 1px var(--ui-edge); transition: transform 160ms var(--ui-ease), background-color 180ms; }
.t-slot:active { transform: scale(0.96); }
.t-slot .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--k-rgb)); }
.t-slot b { font: 650 13.5px var(--ui-font-num); color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.t-slot svg { flex: none; width: 15px; height: 15px; margin-left: 1px; color: var(--ui-ink-2); }
.t-slot.past { color: var(--ui-ink-3); }
.t-slot.past b { color: var(--ui-ink-2); }
.t-slot.past .dot { opacity: 0.5; }
.t-slot.next { color: var(--ui-ink); background: rgba(var(--k-rgb), var(--ui-on-a)); box-shadow: none; }
.t-slot.next .dot { display: none; }
.t-slot.next svg { color: var(--ui-ink); }
/* a session going on now (RN677): its pill fills with its class colour as far as the session has run, inside a
   hairline of that colour, and its dot breathes. How strong the wash and the hairline stand is his, set by hand (RN680, RN682) */
.t-slot.now { color: var(--ui-ink); box-shadow: inset 0 0 0 1px rgba(var(--k-rgb), 0.65);
  background: linear-gradient(90deg, rgba(var(--k-rgb), 0.22) calc(var(--p, 0.5) * 100% - 9px), rgba(var(--k-rgb), 0.048) calc(var(--p, 0.5) * 100% + 9px)); }
.t-slot.now svg { color: var(--ui-ink); }
.t-slot.now .dot { background: var(--ui-ink); animation: now-breath 2.8s ease-in-out infinite; }
@keyframes now-breath { 50% { opacity: 0.32; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .t-slot.now .dot { animation: none; } }

/* a week of days, swept sideways a week at a time; its neighbours fade at the edges */
.cal-week { position: relative; display: flex; gap: 4px; scroll-snap-type: x proximity; }
.cal-d { flex: 0 0 calc((100% - 24px) / 7); height: 58px; border-radius: 17px; display: grid; justify-items: center; align-content: center; gap: 3px; transition: background-color 200ms ease, transform 160ms var(--ui-ease); }
.cal-d.mon { scroll-snap-align: start; }
.cal-d:active { transform: scale(0.94); }
.cal-d i { font: 600 10.5px var(--ui-font); font-style: normal; letter-spacing: 0.04em; color: var(--ui-ink-3); }
.cal-d b { font: 600 16px/1 var(--ui-font-num); color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.cal-d u { width: 4px; height: 4px; border-radius: 50%; text-decoration: none; }
.cal-d u.on { background: var(--ui-ink-3); }
.cal-d.shut b { color: var(--ui-ink-3); font-weight: 500; }
.cal-d.is-today b { color: var(--ui-accent-ink, var(--ui-accent)); font-weight: 700; }
.cal-d[aria-pressed="true"] { background: rgba(var(--c-rgb), var(--ui-on-a)); }
.cal-d[aria-pressed="true"] b { color: var(--ui-ink); }
.cal-d[aria-pressed="true"] i { color: var(--ui-ink-2); }
.cal-d[aria-pressed="true"] u.on { background: var(--ui-ink); }

/* ── an act that asks first: its symbol, what it is, and what follows from it ── */
.pop { display: flex; align-items: center; gap: 14px; padding-top: 4px; }   /* the symbol stands on the middle of what it marks: the question and its line (RN1420) */
.pop > .ui-sym { width: 44px; height: 44px; border-radius: 14px; color: var(--ui-ink); background: rgba(var(--c-rgb), 0.28); box-shadow: inset 0 0 0 1px rgba(var(--c-rgb), 0.5); }
.pop > .ui-sym svg { width: 23px; height: 23px; }
.pop > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* a second thing said under a question's line stands as its own lines, evenly broken */
.pop .ui-result > .then { display: block; text-wrap: balance; }

/* ── a thing that is on or off, as a whole row ── */
.perm-row .ui-onoff { display: flex; width: 100%; justify-content: space-between; min-height: 46px; font: 600 14.5px var(--ui-font); color: var(--ui-ink-2); }
.perm-row .ui-onoff[aria-checked="true"] { color: var(--ui-ink); }
/* a switch row that says what it is set to: a small line under its name */
.perm-row .ui-onoff > span { text-align: left; }
.perm-row .ui-onoff small { display: block; margin-top: 1px; font: 500 12.5px var(--ui-font); color: var(--ui-ink-3); }
.perm-row .ui-onoff:has(small) { min-height: 56px; }

/* ── the one line under what she sets: amber when something is in the way, quiet ink when it only informs (RN595) ── */
.ui-tip.quiet { color: var(--ui-ink-3); }

/* ── what a thing is set by, stacked over what opens under it ── */
.cal-stack { display: flex; flex-direction: column; gap: 12px; }
.cal-stack > .ui-tip { margin: -4px 2px 0; }

/* ── the main action on a drawer that has a class colour (RN645) ──────────
   A block of the system colour "doesn't quite work when the rest of ... the pop-up drawer ... is like pink": there the
   action is flat glass in the drawer's own colour: the tint, his choice of three (RN653). A drawer with no class
   colour keeps the system colour. */
.ui-drawer[data-kind]:not([data-kind=""]) .ui-go:not(.danger) { color: #fff; background: rgba(var(--c-rgb), 0.56); }
/* ── the package card's paint, carried to every fill in a class's colour (RN1372) ───────────────────────────
   The card's colour is never flat: a lighter top falls to a deeper foot, with a faint light across its top left. Every
   fill in a class colour takes the same fall: what is chosen in a class-coloured drawer, the card's sign and instructor,
   and the drawer's main act a step stronger. The system's own blue (toggles, system drawers) stays flat. Still flat
   glass: one soft fall, never a dome, a bead or a shine (RN553). */
.ui-drawer[data-kind]:not([data-kind=""]) .ui-go:not(.danger) {
  background: linear-gradient(172deg, rgba(var(--c-rgb), 0.74), rgba(var(--c-rgb), 0.5)); }
/* (RN1399) no white over a class's colour: the act's light is its own colour (ui.css .ui-go::before), and what is
   chosen takes the kit's gloss, a touch of light at the top and a deeper foot */
.ui-drawer[data-kind]:not([data-kind=""]) :is(.ui-chip, .ui-who, .ui-glass, .look-sym, .ui-vpill.plain, .cal-d, .cal-name, .m-day)[aria-pressed="true"],
.ui-drawer[data-kind]:not([data-kind=""]) .ui-seg .lens,
.ui-drawer[data-kind]:not([data-kind=""]) .ui-onoff[aria-checked="true"] > i {
  background-image: var(--ui-gloss); }
/* a text act in a class's drawer reads in the class's own ink, as the drawer's main act takes its colour (RN645, RN1372,
   RN1382); the lesson's and the cover's drawers keep the studio blue, with their main act */
.ui-drawer[data-kind]:not([data-kind=""]):not(:has(.rd-book, .rd-cover)) .ui-text-act:not(.danger) { color: color-mix(in srgb, rgb(var(--c-rgb)) 52%, #fff); }
:root[data-mode="day"] .ui-drawer[data-kind]:not([data-kind=""]):not(:has(.rd-book, .rd-cover)) .ui-text-act:not(.danger) { color: color-mix(in srgb, rgb(var(--c-rgb)) 78%, #000); }

/* ── Signing in (RN530, RN536) ───────────────────────────────────────────
   Two steps, the same in both apps: six numbers that came to her, then the phone's own way in. The code's field lies
   over its six cells, unseen, so a touch anywhere on them brings up the number keys; the next cell is lit in the
   accent; a wrong code clears with the one motion and the line under it says so. The phone's sign-in is one glyph
   (UI.fid) that scans and turns into a tick, over the account it is for. An app keeps its own inks and its own type
   for the numbers in its own sheet; the measures and the motion are these. */
.ui-code { position: relative; }
.ui-code-known { position: absolute; top: 0; right: 0; min-height: 44px; margin: 0; }
/* one column that never grows past the drawer: an address of one long word wraps inside the note and pushes nothing out */
.ui-code, .ui-pk { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-top: 10px; }
.ui-code-boxes { position: relative; display: block; margin-top: 24px; cursor: text; }
.ui-code-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none; opacity: 0; font-size: 16px; background: transparent; color: transparent; caret-color: transparent; }
.ui-code-cells { display: flex; gap: 8px; }
.ui-code-cells i { width: 47px; height: 62px; border-radius: 16px; display: grid; place-items: center; font: 600 26px/1 var(--ui-font); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ui-ink);
  background: var(--ui-well); box-shadow: inset 0 0 0 1px var(--ui-well-edge); transition: box-shadow 220ms var(--ui-ease), background 220ms; }
.ui-code-boxes:focus-within .ui-code-cells i.at { background: rgba(var(--ui-accent-rgb), 0.1); box-shadow: inset 0 0 0 1.5px var(--ui-accent), 0 0 0 5px rgba(var(--ui-accent-rgb), 0.14); }
.ui-code-boxes.no .ui-code-cells { animation: ui-code-no 0.46s var(--ui-ease); }
@keyframes ui-code-no { 38% { filter: blur(9px); opacity: 0.25; } }
.ui-code-note { max-width: 100%; margin: 18px 0 2px; font-size: 13.5px; line-height: 1.4; color: var(--ui-ink-3); overflow-wrap: anywhere; transition: color 200ms; }
.ui-code-note.bad { color: var(--ui-bad); }
@media (max-width: 374px) { .ui-code-cells { gap: 7px; } .ui-code-cells i { width: 43px; height: 58px; border-radius: 15px; font-size: 24px; } }
.ui-fid { position: relative; width: 76px; height: 76px; margin-bottom: 18px; color: var(--ui-accent-ink, var(--ui-accent)); }
.ui-fid svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 3; transition: opacity 0.3s, transform 0.4s var(--ui-ease); }
.ui-fid .ok { opacity: 0; transform: scale(0.7); }
.ui-fid.scan .face { animation: ui-fid-scan 0.9s ease-in-out infinite; }
.ui-fid.scan .corners { animation: ui-fid-corners 0.9s ease-in-out infinite; transform-origin: center; }
@keyframes ui-fid-scan { 50% { opacity: 0.45; } }
@keyframes ui-fid-corners { 50% { transform: scale(0.9); } }
.ui-fid.done .face-g { opacity: 0; transform: scale(1.2); }
.ui-fid.done .ok { opacity: 1; transform: none; }
.ui-fid.done .ok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ui-fid-tick 0.5s var(--ui-ease) 0.1s forwards; }
@keyframes ui-fid-tick { to { stroke-dashoffset: 0; } }
/* the account the sign-in is for: who, and where. Its first child is the app's own round mark for a person */
.ui-pk-acct { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; margin-top: 22px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); text-align: left; }
.ui-pk-acct b { display: block; font-size: 15px; font-weight: 600; }
.ui-pk-acct small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ui-ink-3); }
.ui-pk-acct > i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 650 15px/1 var(--ui-font); font-style: normal; color: var(--ui-ink); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
/* the initial in its circle is trimmed to its capitals and stands at the circle's middle (RN1390) */
.ui-pk-acct > i:not(:has(> *)) { display: block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }
.ui-pk-acct b, .ui-pk-acct small { min-width: 0; overflow-wrap: anywhere; }

/* ── by day (the client's app; the owner's is by night only). Day is its own app, never night turned over: a session
   chip is the same clear glass as every card, with an ink hairline. Its class is its dot; the one that comes next is
   a line of its class colour and the faintest wash of it, its words ink. A class colour never fills a chip. The
   named day values (--day-*) are set once, at the top of the day rules in client.css. ── */
:root[data-mode="day"] .t-slot { background: var(--day-glass); box-shadow: inset 0 0 0 1px var(--day-hair-2); }
:root[data-mode="day"] .t-slot.next { color: var(--ui-ink); background: rgba(var(--k-rgb), var(--day-wash)); box-shadow: inset 0 0 0 1px rgba(var(--k-rgb), var(--day-line-on)); }
:root[data-mode="day"] .t-slot.next b, :root[data-mode="day"] .t-slot.next svg { color: var(--ui-ink); }
:root[data-mode="day"] .t-slot.now { box-shadow: inset 0 0 0 1px rgba(var(--k-rgb), var(--day-line-on));
  background: linear-gradient(90deg, rgba(var(--k-rgb), calc(var(--day-wash) * 2)) calc(var(--p, 0.5) * 100% - 9px), transparent calc(var(--p, 0.5) * 100% + 9px)), var(--day-glass); }
:root[data-mode="day"] :is(.t-slot.offer, .t-slot.ask) { box-shadow: inset 0 0 0 1px rgba(var(--k-rgb), var(--day-line-on)); }
:root[data-mode="day"] .t-slot.due { box-shadow: inset 0 0 0 1px rgba(var(--k-rgb), var(--day-line)); }
/* a line that answers or turns down: its sign stands in a quiet well inside its class's line */
:root[data-mode="day"] .pop > .ui-sym { background: var(--day-well); box-shadow: inset 0 0 0 1px rgba(var(--c-rgb), var(--day-line)); }
/* the main act in a class's drawer: by day the sheet is neutral, not pink (RN645, RN653), so the act is the studio's
   own, the deep colour with white on it, as in every other drawer */
/* --main is the client app's; the studio's app has no day of its own yet, and should it gain one its kit's main act stands in */
:root[data-mode="day"] .ui-drawer[data-kind]:not([data-kind=""]) .ui-go:not(.danger):not([disabled]) { background: var(--main, var(--ui-go)); box-shadow: none; }
:root[data-mode="day"] .ui-pk-acct > i { background: #fff; box-shadow: inset 0 0 0 1px var(--day-hair-2); }