/* The approved CSS, in the cascade order the reference was built with: the components (app.css),
   then the tokens, then the glass placement. design/current/ is written only by promote. */
/* Instrument Sans & Plus Jakarta Sans (display), Latin and Latin Extended, as the reference carries them. */
/* instrument-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/instrument-sans-latin-ext-wght-normal-B5bTHO_g.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-sans-latin-wght-normal */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/instrument-sans-latin-wght-normal-BbzFLZTg.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* design/current/app.css: the component CSS of A-28 and A-29 at commit ecd9c8866ab1051a70483d0b6dcc88f846a33112.
   design/source/base.css, then the stylesheets of design/source/pages in build.mjs's pageCss order:
   pages/system.css, pages/desk.css, pages/calendar.css, pages/desk.phone.css, pages/page.css, pages/public.css, pages/details.css, pages/search.css, pages/sheet.css, pages/toast.css, pages/drag.css, pages/record.css, pages/mine.css, pages/incident.css, pages/business.css, pages/lists.css, pages/people.css, pages/feedback.css.
   pages/device.css (device simulation) and pages/labs.css (lab pages) are left out. The app imports app.css, then tokens.css,
   then glass.css, which keeps the approved cascade (base, pages, tokens, glass).
   Written by `node design/versions.mjs promote`. Never edit by hand. */
/* Base: reset, text scaling, focus, reduced motion. Direction files supply every colour/font token. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Safe areas: the device's notch, status bar and home indicator. In the app (Capacitor's WebView)
   env() reports them; every product rule reads these variables, so the workshop can simulate them
   (pages/device.css). On the web they are 0. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  /* Text scale is a workshop axis; layout sizes stay in px so hit targets do not scale with it. */
  font-size: calc(16px * var(--text-scale, 1));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:is(h1, h2, h3, .datenav-day, .page-title, .page-card-title, .sheet-title, .landing-display, .landing-section-title, .landing-editorial-col-title, .landing-brand-title, .landing-studio-name, .sheet-q, .sheet-title--q, .details-name, .client-name, .profile-name, .myday-big, .biz-figure-value, .biz-facts dd, .turn-count b, .wa-month b, .landing-stat-val, .landing-pillar-num, .link-title, .lock-title, .page-message-title, .cal-message-title, .search-empty-title, .nav-brand, .push-clock b) {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv01" 1;
  text-shadow: var(--text-relief);
}

:is(.landing-display, .landing-section-title, .sheet-q, .sheet-title--q, .link-title, .lock-title, .page-message-title, .cal-message-title, .search-empty-title) {
  text-wrap: balance;
}

:is(code, kbd, samp, .appt-time, .myday-time, .sheet-option-meta, .wait-main small, .settings-table td, .perm td, .details-lines dd, .sheet-summary dd, .link-summary dd, .wa-time, .wa-cost, .wa-consent-count, .clients-count, .pub-date-num, .landing-stat-val, .landing-pillar-num, .landing-fact-val) {
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea,
code,
kbd,
samp {
  font: inherit;
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
}

input::placeholder,
textarea::placeholder {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  color: var(--ink-3);
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  font-family: var(--font-sans) !important;
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--panel-solid) inset;
  transition: background-color 99999s ease-out 0s;
}

p {
  margin: 0;
}

svg {
  flex-shrink: 0;
}

/* The hidden attribute always wins, even over a component's display. */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:is(h1, h2, .page-title, .link-title, .lock-title)[tabindex="-1"]:focus {
  outline: none;
}

[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Component families (D-050): the shape and the size of every family in one place. The sizes are
   tokens (tokens.css); design/source/spec.js states the same spec and design/consistency.mjs measures
   every case against it. Loaded first: components add their tone and their layout, and never write
   a family's height, corner, text size or icon size again. */

/* ---------- Buttons: M by default, L in the footer of a sheet or panel, S inside a row ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-m);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--r-control);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn svg {
  width: var(--icon-control);
  height: var(--icon-control);
  stroke-width: 2.25;
}

/* L: the footer's actions. They wrap at large text rather than run past the panel. */
.sheet-actions .btn,
.details-actions .btn,
.link-confirm {
  height: auto;
  min-height: var(--control-l);
  white-space: normal;
}

/* S: an action that belongs to one line of a list, a table or a card. */
.page-row .btn,
.settings-table .btn,
.wait-actions .btn,
.msg-actions .btn,
.sheet-outcome .btn,
.details-norecord .btn,
.details-section--error .btn,
.page-check .btn,
.sheet-note-row .btn {
  height: var(--control-s);
  padding: 0 var(--space-4);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

/* On the phone the walk-in bar's action is S too, with a little less room either side. */
@media (max-width: 699px) {
  .walkins .btn {
    height: var(--control-s);
    padding: 0 var(--space-2);
    font-size: var(--text-detail);
    line-height: var(--lh-detail);
  }

  /* The day's arrows are S on the phone, so the longest weekday ("Segunda-feira") fits whole. */
  .datenav .icon-btn {
    width: var(--control-s);
    height: var(--control-s);
  }
}

/* An icon-only button is square at its size. */
.btn.btn--icon {
  aspect-ratio: 1;
  padding: 0;
}

.btn-primary {
  background: var(--accent);
  box-shadow: var(--shadow-primary);
  color: var(--accent-ink);
}

.btn-tonal {
  background: var(--accent-soft);
  box-shadow: var(--shadow-tonal);
  color: var(--accent-soft-ink);
}

/* A quiet secondary beside a filled main action: no fill, the ink of the text. */
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}

.btn-ghost:hover {
  background: var(--panel-well);
}

/* Destructive: never the brand colour (D-048). */
.btn-danger {
  background: var(--danger);
  box-shadow: var(--shadow-danger);
  color: var(--danger-on);
}

.btn-danger-tonal {
  background: var(--danger-soft);
  box-shadow: var(--shadow-danger-tonal);
  color: var(--danger-ink);
}

.btn:disabled {
  box-shadow: none;
  cursor: default;
  opacity: 0.6;
}

.btn.is-busy {
  opacity: 0.85;
  cursor: progress;
}

/* ---------- Icon buttons: M, or S inside a toast or a stepper ---------- */

.icon-btn {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--control-m);
  height: var(--control-m);
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--top-ink);
  cursor: pointer;
}

.icon-btn svg {
  width: var(--icon-control);
  height: var(--icon-control);
}

.toast .icon-btn,
.biz-stepper .icon-btn {
  width: var(--control-s);
  height: var(--control-s);
}

.icon-btn:disabled {
  box-shadow: none;
  cursor: default;
  opacity: 0.45;
}

/* ---------- Fields: a text field, a select, a search field ---------- */

input.sheet-input,
.page-search,
.clients-sort select,
.date-menu-other input,
.search {
  min-height: var(--control-m);
  border-radius: var(--r-control);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.sheet-input,
.clients-sort select,
.date-menu-other input {
  padding: 0 var(--space-4);
  border: 1px solid var(--field-line);
  background: var(--panel-solid);
  box-shadow: var(--shadow-field);
  color: var(--ink);
  font-family: inherit;
  font-weight: var(--w-medium);
}

.sheet-input:disabled,
.clients-sort select:disabled,
.date-menu-other input:disabled {
  background: var(--panel-well);
  box-shadow: none;
  color: var(--ink-3);
  cursor: default;
}

/* One focus ring for every control: 3px in the focus colour. */
.sheet-input:focus-visible,
.clients-sort select:focus-visible,
.date-menu-other input:focus-visible,
.page-search:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* ---------- Section tabs, and the filter chips a level below them ---------- */

.page-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-m);
  padding: 0 var(--space-4);
  border-radius: var(--r-item);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  white-space: nowrap;
  text-decoration: none;
}

.page-tabs--chips .page-tab,
.strip-item {
  min-height: var(--chip-filter);
  padding: 0 var(--space-3);
  border-radius: var(--r-pill);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

/* ---------- Menu items: in a menu, and the settings' side list ---------- */

.quick-menu button,
.details-menu button,
.person-menu a,
.person-menu button,
.page-side a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-m);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-item);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.quick-menu button svg,
.details-menu button svg,
.person-menu svg,
.page-side a svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
}

/* ---------- Status chips: a state, tonal per meaning (components set the tone) ---------- */

.details-status,
.page-status,
.client-tag,
.wa-cat,
.wa-pending,
.lock-open,
.notice-pending,
.myday-status .appt-status {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  min-height: 0;
  margin: 0;
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-chip);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-label);
  white-space: nowrap;
}

.details-status svg,
.page-status svg,
.client-tag svg,
.wa-cat svg,
.wa-pending svg,
.lock-open svg,
.notice-pending svg,
.myday-status .appt-status svg {
  flex-shrink: 0;
  width: var(--icon-chip);
  height: var(--icon-chip);
  stroke-width: 2.4;
}

/* The same chip one step denser, inside a calendar block or the team header (a declared density). */
.appt-status,
.appt-chain,
.next-tag,
.off-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 16px;
  padding: 0 var(--space-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-chip);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  white-space: nowrap;
}

/* ---------- Attribute tags: a quiet fact, not tappable, so not a pill ---------- */

.details-chips li,
.profile-tags li,
.link-tech-tags span,
.sheet-option-tag {
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border-radius: var(--r-sm);
  background: var(--tag-bg);
  box-shadow: var(--shadow-chip-neutral);
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-label);
}

/* ---------- Count badges ---------- */

.nav-badge,
.toast-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--badge);
  height: var(--badge);
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-badge);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Avatars: S in rows and lists, M leading a panel or a card, L heading a page ---------- */

.avatar,
.client-avatar,
.sheet-avatar,
.details-avatar,
.search-avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--avatar-s);
  height: var(--avatar-s);
  border-radius: 50%;
  box-shadow: var(--shadow-avatar);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-bold);
}

.details-avatar,
.myday-client .client-avatar,
.link-tech-face,
.lock-face--small .lock-avatar {
  width: var(--avatar-m);
  height: var(--avatar-m);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.client-head .client-avatar,
.profile-face {
  width: var(--avatar-l);
  height: var(--avatar-l);
  font-size: var(--text-title);
  line-height: var(--lh-title);
}

.lock-avatar {
  width: var(--avatar-xl);
  height: var(--avatar-xl);
  font-size: var(--text-title);
  line-height: var(--lh-title);
}

/* ---------- Icon tiles: an action or a state where a row has its avatar ---------- */

.search-icon,
.walkins-icon,
.toast-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--avatar-s);
  height: var(--avatar-s);
  box-shadow: var(--shadow-avatar);
}

.search-icon svg,
.walkins-icon svg,
.toast-icon svg {
  width: var(--icon-control);
  height: var(--icon-control);
}

@media (max-width: 699px) {
  /* A page's header avatar steps down with its title. */
  .client-head .client-avatar,
  .profile-face {
    width: var(--avatar-m);
    height: var(--avatar-m);
    font-size: var(--text-body);
    line-height: var(--lh-body);
  }

  /* A service clients cannot book online says so with a tag. */
  .settings-table tbody td.is-in-person {
    padding: 2px var(--space-2);
    border-radius: var(--r-sm);
    background: var(--panel-well);
    color: var(--ink-2);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
    font-weight: var(--w-regular);
  }
}

/* ---------- Rows: at least 56 tall; 12/16 framed or as an option, 8/0 between a card's lines ---------- */

.page-row,
.page-row--link > a,
.client-row-link,
.people-row-link,
.wait-row,
.sheet-option,
.link-option,
.link-tech,
.search-option,
.sheet-check-row,
.myday-row,
.biz-product {
  min-height: var(--row-min);
}

/* One anatomy: the title in body, the meta under it in detail. */
.page-row-main b,
.client-row-name,
.wait-main b,
.people-row-main b,
.more-who b,
.search-option-title,
.sheet-option-label,
.link-option-main b,
.link-tech-main b,
.myday-main b,
.sheet-check-row b,
.sheet-fact b,
.sheet-segment b,
.msg-main b {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
}

.page-row-main small,
.client-row-main small,
.client-row-next,
.client-row-note,
.wait-main small,
.people-row-main small,
.people-row-now,
.more-who small,
.search-option-meta,
.sheet-option-meta,
.link-option-main small,
.link-tech-main small,
.myday-main small,
.sheet-check-row small,
.sheet-fact small,
.sheet-segment small,
.msg-main small {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-regular);
  text-wrap: pretty;
}

/* ---------- Cards, wells, banners and messages ---------- */

.page-card,
.biz-figure,
.wa-card {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--panel-solid);
  box-shadow: var(--shadow-card);
}

/* A well: an inset block on a card or a sheet (a summary, a total, an outcome). */
.sheet-summary,
.details-lines,
.sheet-fact,
.sheet-segment,
.sheet-amount,
.sheet-loyalty,
.sheet-outcome,
.wa-preview,
.biz-shopping-total,
.biz-tech.is-total,
.details-norecord,
.link-summary {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-lg);
}

.sheet-summary,
.details-lines,
.sheet-fact,
.sheet-segment,
.sheet-amount,
.sheet-loyalty,
.wa-preview,
.biz-shopping-total,
.biz-tech.is-total {
  box-shadow: var(--shadow-well-in);
}

/* One banner: 14px text, an icon of 20 on the first line, a tone per meaning. Amber by default. */
.notice,
.sheet-alert,
.details-alert,
.myday-allergy,
.breach-clock,
.search-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-lg);
  background: var(--warn-soft);
  box-shadow: var(--shadow-banner);
  color: var(--warn-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.notice > svg,
.sheet-alert > svg,
.details-alert > svg,
.myday-allergy > svg,
.breach-clock > svg,
.search-note > svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
}

/* A lead-in in a banner ("Alergia:") is the emphasis of its sentence. */
.notice-text b,
.sheet-alert b,
.details-alert p b,
.myday-allergy b {
  font-weight: var(--w-semibold);
}

.notice[data-status="info"],
.sheet-alert--info {
  border-color: var(--panel-divider);
  background: var(--panel-well);
  color: var(--ink);
}

.notice[data-status="info"] > svg,
.sheet-alert--info > svg {
  color: var(--ink-2);
}

.notice[data-status="off"] {
  border-color: var(--panel-divider);
  background: var(--panel-well);
  color: var(--ink-2);
}

.notice[data-status="ok"],
.sheet-alert--ok {
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.notice[data-status="error"],
.sheet-alert--error,
.breach-clock {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger-ink);
}

/* A message in place of content: an empty day, nothing found, a failed load. */
.page-message,
.cal-message {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--panel-solid);
  box-shadow: var(--shadow-card);
}

.page-message-title,
.cal-message-title,
.search-empty-title {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-semibold);
}

.page-message-text,
.cal-message-text,
.search-empty-text {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* ---------- Surfaces, bars and menus ---------- */

/* The calendar, a page, a sheet, a panel, the search, the public page and the rail: 26, 24 on the
   phone (the token follows the screen). */
.cal,
.page-main,
.sheet-panel,
.details-sheet,
.search-panel,
.link-main,
.nav {
  border-radius: var(--r-surface);
}

.topbar,
.walkins,
.toast {
  border-radius: var(--r-bar);
}

.quick-menu,
.details-menu,
.person-menu,
.date-menu {
  border-radius: var(--r-lg);
}

/* Front desk (day view). Structure and states only; every colour, radius and font is a direction token. */

.desk {
  --gutter: 64px;
  --grid-top: 12px;
  --col-min: 150px;
  /* An hour grows with the text size, so a 45-minute booking keeps its three lines at 130% and 200%. */
  --hour-row: calc(var(--hour) * var(--text-scale, 1));
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "nav top"
    "nav walkins"
    "nav cal";
  overflow: hidden;
  /* The frame around the desk (--desk-pad, set by glass.css) plus the device's safe areas. */
  padding: calc(var(--desk-pad, 0px) + var(--safe-top)) calc(var(--desk-pad, 0px) + var(--safe-right)) calc(var(--desk-pad, 0px) + var(--safe-bottom)) calc(var(--desk-pad, 0px) + var(--safe-left));
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Offline adds a notice row; closed and failed days drop the now-bar. */
.desk--notice {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "nav top"
    "nav walkins"
    "nav notice"
    "nav cal";
}

.desk--bare {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "nav top"
    "nav cal";
}

/* ---------- Navigation: rail on tablet/desktop, bottom bar on phone ---------- */

.nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 0;
  padding: var(--space-3) var(--space-3);
  overflow-y: auto;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-line);
}

.nav-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 0 var(--space-4);
  color: var(--nav-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.nav-brand-copy {
  display: grid;
  justify-items: center;
  min-width: 0;
}

.nav-brand-copy small,
.nav-group-label,
.nav-item--desktop,
.nav-foot {
  display: none;
}

.nav-brand .logo {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--accent);
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 64px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--r-xl);
  color: var(--nav-ink-2);
  /* Capped: five labels must fit the phone's bottom bar at any text size (iOS caps tab labels too). */
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  text-decoration: none;
}

.nav-item > span:not(.nav-badge) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item svg {
  flex-shrink: 0;
  width: var(--icon-nav);
  height: var(--icon-nav);
  stroke-width: 1.75;
}

.nav-item.is-active {
  background: var(--nav-active-bg);
  box-shadow: var(--shadow-tonal);
  color: var(--nav-active-ink);
}

.nav-item--settings {
  margin-top: auto;
}

.nav-item--more {
  display: none;
}

/* Without settings (a tech, the front desk) Mais ends the rail on every device. */
.nav-item--end {
  margin-top: auto;
}

.nav-badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  background: var(--accent);
  color: var(--accent-ink);
}

@media (min-width: 1200px) {
  .desk {
    --nav-w: 224px;
  }

  .nav {
    gap: 2px;
    padding: var(--space-3);
  }

  .nav-brand {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-3);
    font-size: var(--text-body);
    line-height: var(--lh-body);
  }

  .nav-brand-copy {
    justify-items: start;
  }

  .nav-brand-copy small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--nav-ink-2);
    font-size: var(--text-micro);
    line-height: var(--lh-micro);
    font-weight: var(--w-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-group-label {
    display: block;
    padding: var(--space-2) var(--space-3) var(--space-1);
    overflow: hidden;
    color: var(--nav-ink-2);
    font-size: var(--text-micro);
    line-height: var(--lh-micro);
    font-weight: var(--w-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-lg);
    font-size: var(--text-detail);
    line-height: var(--lh-detail);
  }

  .nav-item--desktop {
    display: flex;
  }

  .nav-item--settings,
  .nav-item--end {
    margin-top: 0;
  }

  .nav-badge {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
  }

  .nav-foot {
    display: grid;
    gap: 2px;
    margin-top: auto;
    padding: var(--space-3);
    border: 1px solid var(--card-line);
    border-radius: var(--r-lg);
    background: var(--panel-well);
  }

  .nav-foot-studio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .nav-foot-studio b {
    min-width: 0;
    overflow: hidden;
    color: var(--nav-ink);
    font-size: var(--text-detail);
    line-height: var(--lh-detail);
    font-weight: var(--w-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-foot-role {
    overflow: hidden;
    color: var(--accent-soft-ink);
    font-size: var(--text-micro);
    line-height: var(--lh-micro);
    font-weight: var(--w-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-foot-scope {
    overflow: hidden;
    color: var(--nav-ink-2);
    font-size: var(--text-micro);
    line-height: var(--lh-micro);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------- Top bar ---------- */

.topbar {
  grid-area: top;
  container: topbar / inline-size;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--top-bg);
  color: var(--top-ink);
}

.datenav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

.datenav-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--control-m);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--top-ink);
  white-space: nowrap;
  cursor: pointer;
}

/* The day is the calendar's display title; the date beside it is its meta (D-050). */
.datenav-day {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.datenav-date {
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  color: var(--top-ink-2);
}

/* "Hoje": on another day one tap back to today; on today it stays, inactive, so the header keeps
   its shape from day to day. A button of the default size (D-050). */
.today-jump {
  margin-left: var(--space-2);
}

/* The search gives way first when the top bar fills (the date and the actions keep their size). */
.search {
  display: flex;
  flex: 0 1 min(340px, 34vw);
  align-items: center;
  gap: var(--space-3);
  min-width: 140px;
  padding: 0 var(--space-3) 0 var(--space-4);
  border: 1px solid var(--search-line);
  background: var(--search-bg);
  box-shadow: var(--shadow-field);
  color: var(--top-ink-2);
  text-align: left;
  cursor: pointer;
}

.search svg {
  width: var(--icon-control);
  height: var(--icon-control);
}

.search-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-text-short,
.datenav-day-short {
  display: none;
}

.search kbd {
  padding: 2px var(--space-2);
  border: 1px solid var(--control-line);
  border-radius: var(--r-sm);
  box-shadow: inset 0 -1px 0 var(--control-line);
  color: var(--top-ink-2);
  font-family: inherit;
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

/* Phone-only floating "new booking". A direct child of .desk: a filtered (glass) ancestor would
   otherwise become its containing block and pull it off-screen. */
.fab {
  position: absolute;
  z-index: 6;
  right: 16px;
  bottom: calc(80px + var(--safe-bottom));
  display: none;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  /* A declared exception (D-050): the one round button, larger than the controls. */
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-fab);
  color: var(--accent-ink);
  cursor: pointer;
}

.fab svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.25;
}

/* ---------- Walk-in banner ---------- */

.walkins {
  grid-area: walkins;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin: 0 var(--space-5) var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--walkin-line);
  background: var(--walkin-bg);
  color: var(--walkin-ink);
}

.walkins-icon {
  border-radius: 50%;
  background: var(--walkin-icon-bg);
  color: var(--walkin-icon-ink);
}

.walkins-text {
  display: flex;
  /* At 100% the text shortens with an ellipsis; at larger sizes it claims room, so the action wraps
     to a second line instead of being cut off. */
  flex: 1 1 calc((var(--text-scale, 1) - 1) * 16rem);
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.walkins-text b {
  font-weight: var(--w-semibold);
  white-space: nowrap;
}

.walkins-next {
  min-width: 0;
  overflow: hidden;
  color: var(--walkin-ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* "Now in the studio": who is waiting, in service, to pay and late, at a glance. */
.strip {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-3) 0 0;
  border-right: 1px solid var(--walkin-line);
  list-style: none;
}

.strip-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--strip-bg);
  box-shadow: var(--shadow-chip);
  color: var(--walkin-ink-2);
  white-space: nowrap;
}

.strip-item b {
  color: var(--walkin-ink);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.strip-item[data-kind="quiet"] {
  background: transparent;
  box-shadow: none;
}

/* ---------- Offline notice ---------- */

.notice {
  grid-area: notice;
  align-items: center;
  margin: 0 var(--space-5) var(--space-3);
}

.notice-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* What waits to be sent, as a status chip at the end of the line: "1 por enviar". */
.notice-pending {
  background: var(--warn-line);
  color: var(--warn-ink);
}

/* ---------- Loading skeletons: static under reduced motion ---------- */

.skel {
  display: block;
  border-radius: var(--r-sm);
  background-color: var(--skel);
  background-image: linear-gradient(100deg, transparent 20%, var(--skel-shine) 50%, transparent 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: skel-shimmer 1.6s ease-in-out infinite;
}

@keyframes skel-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

/* A person's placeholder keeps their avatar's circle. */
.skel:is(.avatar, .client-avatar) {
  border-radius: 50%;
  box-shadow: none;
}

.skel-line {
  width: var(--w, 100%);
  height: 12px;
}

.skel-pill {
  width: 96px;
  height: var(--chip-filter);
  border-radius: var(--r-pill);
}

.strip--skeleton {
  border-right-color: transparent;
}

.skel-block {
  position: absolute;
  top: calc(var(--grid-top) + var(--start) * var(--hour-row) + 2px);
  right: 6px;
  left: 6px;
  height: calc(var(--dur) * var(--hour-row) - 4px);
  border-radius: var(--r-appt);
}

/* Ações rápidas (D-039): a menu anchored under its button, flipping above when there is no room. */
.quick-menu {
  position: fixed;
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
  position-try-fallbacks: flip-block;
  min-width: 264px;
  max-width: calc(100vw - 24px);
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* A case drawn open in the reference (a frame opens it as a real popover). */
.quick-menu[data-open-on-load] {
  display: grid;
}

.quick-menu button:hover,
.quick-menu button:focus-visible {
  background: var(--panel-well);
}

.quick-menu button svg {
  color: var(--ink-2);
}

@supports not (anchor-name: --a) {
  .quick-menu {
    inset: 72px 24px auto auto;
    margin: 0;
  }
}

/* "Ir para o dia": two weeks to tap, and any other date. */
.date-menu {
  position: fixed;
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: flip-inline;
  width: min(360px, calc(100vw - 24px));
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  font-family: var(--font-sans);
}

.date-menu-title {
  margin: 0 0 var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.date-menu-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.date-menu-days button {
  display: grid;
  justify-items: center;
  min-height: 48px;
  padding: var(--space-1) 0;
  border: 0;
  border-radius: var(--r-item);
  background: transparent;
  color: inherit;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  cursor: pointer;
}

.date-menu-days button b {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
}

.date-menu-days button:hover {
  background: var(--panel-well);
}

.date-menu-days button[aria-current="date"] {
  background: var(--accent);
  box-shadow: var(--shadow-primary);
  color: var(--accent-ink);
}

.date-menu-other {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.date-menu-other label {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

@supports not (anchor-name: --a) {
  .date-menu {
    inset: 72px auto auto 24px;
    margin: 0;
  }
}

/* A full top bar (large text, a narrow window) keeps every action by dropping words first: the
   search says only "Pesquisar" and loses its ⌘K hint, then becomes an icon before it can be cut to
   a stub; Ações rápidas loses its label, then Nova marcação and Hoje keep only their icons; the
   weekday shortens last ("Quarta"). */
@container topbar (max-width: 72rem) {
  .search-text-full,
  .search kbd {
    display: none;
  }

  .search-text-short {
    display: inline;
  }
}

@container topbar (max-width: 64rem) {
  .search {
    flex: 0 0 48px;
    justify-content: center;
    width: 48px;
    min-width: var(--control-m);
    padding: 0;
  }

  .search-text,
  .search kbd {
    display: none;
  }
}

@container topbar (max-width: 52rem) {
  .quick-trigger-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@container topbar (max-width: 44rem) {
  .new-booking-text,
  .today-jump span,
  .page-actions .btn:has(> svg) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* With only its icon left, a button is square. */
  .new-booking,
  .today-jump,
  .page-actions .btn:has(> svg) {
    aspect-ratio: 1;
    padding: 0;
  }

  .datenav {
    flex-shrink: 1;
  }

  .datenav-label {
    overflow: hidden;
  }

  .datenav-day,
  .datenav-date {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Only when even the phone's bar is too narrow for the whole weekday (large text): "Quarta", with
   the date below. */
@container topbar (max-width: 20rem) {
  .datenav-day-long {
    display: none;
  }

  .datenav-day-short {
    display: inline;
  }
}

/* Front desk calendar: team header, tech columns, appointment blocks, now-line and message card.
   Loaded after desk.css and before desk.phone.css; the order matters for the cascade. */

/* ---------- Calendar ---------- */

.cal {
  grid-area: cal;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cal-bg);
}

.cal {
  position: relative;
}

/* Any number of techs: columns share the width down to --col-min, then the day scrolls sideways
   with the hours and the team header pinned. Density inside a column follows its width. */
.cal-head,
.cal-grid {
  display: grid;
  grid-template-columns: var(--gutter) repeat(var(--cols), minmax(var(--col-min), 1fr));
  column-gap: var(--col-gap, 0px);
  min-width: calc(var(--gutter) + var(--cols) * var(--col-min));
}

/* The team header sticks to the top of the scrolling day; appointments pass beneath it, fading out
   instead of being sliced through a line of text. */
.cal-head {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--head-line);
  background: var(--turn-bg);
}

.cal-head::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 24px;
  background: linear-gradient(var(--cal-fade), transparent);
  content: "";
  pointer-events: none;
}

/* More columns than fit: the right edge fades, so the day reads as wider than the screen. */
.desk--wide .cal::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 32px;
  border-radius: 0 var(--r-surface) var(--r-surface) 0;
  background: linear-gradient(to right, transparent, var(--cal-fade));
  content: "";
  pointer-events: none;
}

.cal-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--turn-ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.off-chip {
  background: var(--strip-bg);
  color: var(--turn-ink-2);
}

/* A tech's column header is their live turn card. */
.turn {
  position: relative;
  container-type: inline-size;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  padding: var(--space-3);
  border: 0;
  border-left: 1px solid var(--head-line);
  background: transparent;
  color: var(--turn-ink);
  text-align: left;
  cursor: pointer;
}

.turn.is-next {
  background: var(--next-bg);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.avatar {
  background: var(--t-solid);
  color: var(--t-on);
}

.turn-body {
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar name count"
    "avatar line count";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 2px;
  min-width: 0;
}

.turn-body .avatar {
  grid-area: avatar;
}

.turn-name {
  grid-area: name;
  align-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
}

.next-tag {
  background: var(--accent);
  box-shadow: var(--shadow-badge);
  color: var(--accent-ink);
}

.turn-line {
  grid-area: line;
  align-self: start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--turn-ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.turn-line-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Another day has no live status: no dot, so the line starts where the name does. */
.dot--day {
  display: none;
}

.dot--free {
  background: var(--ok);
}

.dot--busy {
  background: var(--busy);
}

.dot--break,
.dot--waiting,
.dot--late {
  background: var(--warn);
}

.dot--queue {
  background: var(--accent);
}

.dot--in-service {
  background: var(--busy);
}

.dot--to-pay {
  background: var(--ok);
}

.turn-count {
  grid-area: count;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  line-height: var(--lh-tight);
}

.turn-count b {
  font-size: var(--text-title);
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.turn-count small {
  margin-top: var(--space-1);
  color: var(--turn-ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.turn--skeleton {
  cursor: default;
}

.turn--skeleton .avatar {
  background: var(--skel);
}

.turn--skeleton .skel-line:first-of-type {
  grid-area: name;
  margin-bottom: var(--space-1);
}

.turn--skeleton .skel-line:last-of-type {
  grid-area: line;
  margin-top: var(--space-1);
}

.cal-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cal-grid {
  position: relative;
  height: calc(var(--grid-top) + var(--rows) * var(--hour-row) + 16px);
}

.cal-gutter {
  position: sticky;
  left: 0;
  z-index: 3;
}

/* A day that already scrolls sideways keeps its columns as wide as the text needs: at 200% text a
   double booking's halves still show their start times. */
.desk--wide {
  --col-min: calc(150px * var(--text-scale, 1));
}

/* Wide days scroll sideways under the gutter, so it needs a ground of its own. */
.desk--wide .cal-gutter,
.desk--wide .cal-corner {
  background: var(--gutter-bg);
}

/* Sideways, a wide day settles on a column edge, never halfway through a name. */
.desk--wide .cal-scroll {
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
}

.desk--wide .cal-col {
  scroll-snap-align: start;
}

.cal-hour {
  position: absolute;
  top: calc(var(--grid-top) + var(--i) * var(--hour-row));
  right: 10px;
  transform: translateY(-50%);
  color: var(--gutter-ink);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cal-hour.is-near-now {
  visibility: hidden;
}

.cal-col {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  border-left: 1px solid var(--grid-line);
  background-color: var(--col-bg);
  background-image:
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-half) 1px, transparent 1px);
  background-size:
    100% var(--hour-row),
    100% calc(var(--hour-row) / 2);
  background-position:
    0 var(--grid-top),
    0 var(--grid-top);
}

.t-1 {
  --t-solid: var(--t1-solid);
  --t-on: var(--t1-on);
  --t-soft: var(--t1-soft);
  --t-line: var(--t1-line);
  --t-ink: var(--t1-ink);
  --t-col: var(--t1-col);
}

.t-2 {
  --t-solid: var(--t2-solid);
  --t-on: var(--t2-on);
  --t-soft: var(--t2-soft);
  --t-line: var(--t2-line);
  --t-ink: var(--t2-ink);
  --t-col: var(--t2-col);
}

.t-3 {
  --t-solid: var(--t3-solid);
  --t-on: var(--t3-on);
  --t-soft: var(--t3-soft);
  --t-line: var(--t3-line);
  --t-ink: var(--t3-ink);
  --t-col: var(--t3-col);
}

.t-4 {
  --t-solid: var(--t4-solid);
  --t-on: var(--t4-on);
  --t-soft: var(--t4-soft);
  --t-line: var(--t4-line);
  --t-ink: var(--t4-ink);
  --t-col: var(--t4-col);
}

/* Tech colours come from eight slots (--t1-* … --t8-*), never from names. */
.t-5 {
  --t-solid: var(--t5-solid);
  --t-on: var(--t5-on);
  --t-soft: var(--t5-soft);
  --t-line: var(--t5-line);
  --t-ink: var(--t5-ink);
  --t-col: var(--t5-col);
}

.t-6 {
  --t-solid: var(--t6-solid);
  --t-on: var(--t6-on);
  --t-soft: var(--t6-soft);
  --t-line: var(--t6-line);
  --t-ink: var(--t6-ink);
  --t-col: var(--t6-col);
}

.t-7 {
  --t-solid: var(--t7-solid);
  --t-on: var(--t7-on);
  --t-soft: var(--t7-soft);
  --t-line: var(--t7-line);
  --t-ink: var(--t7-ink);
  --t-col: var(--t7-col);
}

.t-8 {
  --t-solid: var(--t8-solid);
  --t-on: var(--t8-on);
  --t-soft: var(--t8-soft);
  --t-line: var(--t8-line);
  --t-ink: var(--t8-ink);
  --t-col: var(--t8-col);
}

/* Appointment blocks. Directions remap --a-* (by tech or by service category). */
.appt {
  --a-bg: var(--t-soft);
  --a-line: var(--t-line);
  --a-ink: var(--ink);
  --a-ink-2: var(--t-ink);
  --a-badge-bg: var(--badge-bg);
  --a-badge-ink: var(--t-ink);
  --a-strong: var(--t-solid);
  --a-progress: var(--t-solid);
  position: absolute;
  top: calc(var(--grid-top) + var(--start) * var(--hour-row) + 2px);
  right: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: calc(var(--dur) * var(--hour-row) - 4px);
  z-index: 2;
  padding: var(--space-2) var(--space-3) var(--space-2);
  overflow: hidden;
  border: 1px solid var(--a-line);
  border-radius: var(--r-appt);
  background: var(--a-bg);
  box-shadow: var(--shadow-appt);
  color: var(--a-ink);
  text-align: left;
  cursor: pointer;
}

.appt-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--a-ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.appt-time {
  white-space: nowrap;
}

.appt-status {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  background: var(--a-badge-bg);
  color: var(--a-badge-ink);
}

.appt-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appt-status svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

.appt-client {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-body);
  line-height: var(--lh-compact);
  font-weight: var(--w-semibold);
}

.appt-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appt-flag {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  background: var(--a-badge-bg);
  color: var(--a-badge-ink);
}

.appt-flag svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}

.appt-flag--allergy {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.appt-flag--reward {
  background: var(--reward-soft);
  color: var(--reward-ink);
}

.appt-flag--whatsapp {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.appt-flag--overlap,
.appt-flag--pending {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.appt-flag--request {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.appt-service {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--a-ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-compact);
}

.appt-service-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appt-chain {
  flex-shrink: 0;
  background: var(--a-badge-bg);
  color: var(--a-badge-ink);
}

.appt-chain svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.appt-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--p);
  height: 4px;
  border-radius: 0 2px 0 0;
  background: var(--a-progress);
}

.appt[data-status="in-service"] {
  padding: var(--space-2) var(--space-3) var(--space-2);
  border: 2px solid var(--a-strong);
  box-shadow: var(--shadow-lift);
}

.appt[data-status="paid"],
.appt[data-status="done"] {
  --a-bg: var(--done-bg);
  --a-line: var(--done-line);
  --a-ink: var(--ink-2);
  --a-ink-2: var(--ink-3);
  --a-badge-bg: transparent;
  --a-badge-ink: var(--ok-ink);
  box-shadow: none;
}

.appt[data-status="no-show"] {
  --a-bg: var(--done-bg);
  --a-line: var(--done-line);
  --a-ink: var(--ink-2);
  --a-ink-2: var(--ink-2);
  --a-badge-bg: var(--danger-soft);
  --a-badge-ink: var(--danger-ink);
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--hatch) 8px 9px);
  box-shadow: none;
}

.appt[data-status="no-show"] .appt-name {
  text-decoration: line-through;
}

/* Status chips are tonal: a solid fill would compete with the panel's Cobrar button (D-048). */
.appt[data-status="ready-to-pay"] .appt-status {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.appt[data-status="arrived"] .appt-status {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

/* Started but the client has not arrived: dashed edge, amber badge. */
.appt[data-status="late"] {
  border-style: dashed;
}

.appt[data-status="late"] .appt-status {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

/* Two bookings at once share the column side by side, each half wide, both with an amber edge, so
   both names stay readable even in a narrow column. */
.appt[data-overlap] {
  right: auto;
  left: calc(6px + var(--lane) * (100% - 12px) / 2);
  width: calc((100% - 12px) / 2 - 2px);
  z-index: calc(2 + var(--lane));
  padding-inline: var(--space-1) var(--space-1);
  border-color: var(--warn);
}
/* The amber edge already says "at the same time": the end time, the flags and the status word give
   their room to the start and the name (still read aloud; the panel has the rest). With large text
   the status icon moves under the start. */
.appt[data-overlap] .appt-end {
  display: none;
}

.appt[data-overlap] :is(.appt-flag, .appt-status-text) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.appt[data-overlap] .appt-top {
  flex-wrap: wrap;
  gap: 2px var(--space-1);
}

/* 30 minutes: time and name. 15 minutes: one line. The service is in the details. */
.appt[data-size="s"] {
  gap: 1px;
  padding-block: var(--space-1);
}

.appt[data-size="s"] .appt-service,
.appt[data-size="xs"] .appt-service {
  display: none;
}

.appt[data-size="xs"] {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0;
}

.appt[data-size="xs"] .appt-top {
  flex-shrink: 0;
}

.appt[data-size="xs"] .appt-end {
  display: none;
}

.appt[data-size="xs"] .appt-client {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.appt[data-size="xs"] .appt-status {
  order: -1;
  margin-left: 0;
}

.appt[data-size="xs"] :is(.appt-status-text, .appt-flag) {
  display: none;
}

.appt[data-size="xs"][data-status="in-service"] {
  padding-block: 0;
}

/* Narrower columns: the end time gives way first; the block's height already shows the length. */
@container (max-width: 15rem) {
  .appt-end {
    display: none;
  }
}

/* Narrow columns (six techs on an iPad, or a scrolling day): badges keep their icon. */
@container (max-width: 11.875rem) {
  .appt {
    padding-inline: var(--space-2);
  }

  .appt-status {
    padding: 0 2px;
  }

  .appt-status-text,
  .appt-chain-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .appt-service {
    font-size: var(--text-micro);
    line-height: var(--lh-micro);
  }

  .free-slot,
  .time-off {
    padding-inline: var(--space-2);
  }
}

/* Compact team card: the status line starts under the name and runs on under the count, so it is
   not cut short and still lines up with the name. */
@container (max-width: 13.125rem) {
  .turn-body {
    grid-template-areas:
      "avatar name count"
      ". line line";
    row-gap: var(--space-2);
    column-gap: var(--space-2);
  }

  .turn-body .avatar {
    width: var(--avatar-xs);
    height: var(--avatar-xs);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
  }

  .turn-name {
    align-self: center;
  }

  .turn-count b {
    font-size: var(--text-lead);
    line-height: var(--lh-lead);
  }

  .turn-count small {
    font-size: var(--text-micro);
    line-height: var(--lh-micro);
  }
}

@container (max-width: 10.625rem) {
  .turn-count small {
    display: none;
  }
}

.time-off {
  position: absolute;
  top: calc(var(--grid-top) + var(--start) * var(--hour-row) + 2px);
  right: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  z-index: 2;
  height: calc(var(--dur) * var(--hour-row) - 4px);
  padding: 0 var(--space-3);
  border-radius: var(--r-appt);
  background: repeating-linear-gradient(135deg, var(--off-bg) 0 8px, var(--off-stripe) 8px 16px);
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
}

.time-off svg {
  width: 16px;
  height: 16px;
}

.free-slot {
  position: absolute;
  top: calc(var(--grid-top) + var(--start) * var(--hour-row) + 2px);
  right: 6px;
  left: 6px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  z-index: 2;
  height: calc(var(--dur) * var(--hour-row) - 4px);
  padding: var(--space-2) var(--space-3);
  border: 1.5px dashed var(--free-line);
  border-radius: var(--r-appt);
  background: var(--free-bg);
  color: var(--free-ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  text-align: left;
  cursor: pointer;
}

.free-slot svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* Runs behind blocks: visible in the gutter and through free time, never across names. */
.cal-now {
  position: absolute;
  z-index: 1;
  top: calc(var(--grid-top) + var(--now) * var(--hour-row) - 1px);
  right: 0;
  left: var(--gutter);
  height: 2px;
  background: var(--now-line);
  pointer-events: none;
}

.cal-now::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--now-line);
}

/* The time sits in the pinned hour gutter, so it stays put when a wide day scrolls sideways. */
.cal-now-label {
  position: absolute;
  z-index: 1;
  top: calc(var(--grid-top) + var(--now) * var(--hour-row));
  right: var(--space-1);
  padding: 2px var(--space-2);
  transform: translateY(-50%);
  border-radius: var(--r-sm);
  background: var(--now-line);
  box-shadow: var(--shadow-badge);
  color: var(--now-ink);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* ---------- Message card: empty day, closed day, failed load ---------- */

.cal--message {
  display: grid;
  place-items: center;
  padding: var(--space-6);
}

/* The shared message (system.css), centred and raised: it floats over the day. */
.cal-message {
  justify-items: center;
  max-width: 440px;
  border-color: var(--message-line);
  background: var(--message-bg);
  box-shadow: var(--message-shadow);
  color: var(--ink);
  text-align: center;
}

/* On an empty day the card floats over the bookable grid. */
.cal > .cal-message {
  position: absolute;
  z-index: 4;
  top: calc(50% + 36px);
  left: 50%;
  width: min(440px, calc(100% - 32px));
  /* Below the team header; scrolls inside itself when large text leaves too little room. */
  max-height: calc(100% - 88px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
}




.cal-message-title {
  text-wrap: balance;
}

.cal-message-text {
  text-wrap: pretty;
}

/* Stacked and equally wide, the main action first. */
.cal-message-actions {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 320px);
  margin-top: var(--space-2);
}

/* ---------- First-class Agenda toolbar & Week / Month / Journal views ---------- */

.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--head-line);
  background: var(--panel-solid);
}

.cal-toolbar .cal-zoom-tabs.page-tabs--chips {
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  background: var(--panel-well);
}

.cal-toolbar .cal-zoom-tabs.page-tabs--chips .page-tab {
  border-color: transparent;
  background: transparent;
}

.cal-toolbar .cal-zoom-tabs.page-tabs--chips .page-tab[aria-current="page"] {
  border-color: var(--card-line);
  background: var(--seg-on);
  box-shadow: var(--shadow-seg);
  color: var(--ink);
}

/* In Day view, .cal-head already shows every technician column; show tech filter chips only when zoomed out. */
.cal[data-cal-active-zoom="day"] .cal-tech-tabs,
.cal:not([data-cal-active-zoom="day"]) .cal-toolbar-kpi {
  display: none;
}

.client-row-note .shade-dot {
  margin-right: var(--space-1);
  vertical-align: -1px;
}

.cal-tech-tabs {
  flex: 1 1 auto;
  min-width: 0;
}

.cal-tech-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--t-solid, var(--accent));
}

.shade-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: 1px solid var(--control-line);
  border-radius: var(--r-pill);
  background: var(--shade-biab);
}

.shade-biab {
  background: var(--shade-biab);
}

.shade-nude {
  background: var(--shade-nude);
}

.shade-bordeaux {
  background: var(--shade-bordeaux);
}

.shade-milky {
  background: var(--shade-milky);
}

.shade-coral {
  background: var(--shade-coral);
}

.shade-sage {
  background: var(--shade-sage);
}

.shade-clear {
  background: var(--shade-clear);
}

.cal-role-scope {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--chip-filter);
  padding: 0 var(--space-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  background: var(--panel-well);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.cal-role-scope svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.cal-toolbar-kpi {
  margin: 0 0 0 auto;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  background: var(--panel-well);
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.turn.is-tech-filtered-out,
.cal-col.is-tech-filtered-out {
  display: none;
}

.cal-week,
.cal-month {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 0 calc(72px + var(--space-6));
}

.cal-journal {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) calc(72px + var(--space-6));
}

.cal-week[hidden],
.cal-month[hidden],
.cal-journal[hidden],
.cal-head[hidden],
.cal-grid[hidden] {
  display: none;
}

.cal-week-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  background: var(--panel-well);
}

.cal-week-summary b {
  display: block;
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
}

.cal-week-summary small {
  display: block;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

/* Ruled 6-column architectural week schedule (Mon–Sat). */
.cal-week-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid var(--grid-line);
  background: var(--panel-solid);
}

.cal-week-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  border-right: 1px solid var(--grid-line);
  background: var(--panel-solid);
}

.cal-week-col:last-child {
  border-right: 0;
}

.cal-week-col.is-today {
  background: var(--page-bg);
}

.cal-week-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: var(--space-1);
  min-height: 68px;
  padding: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--head-line);
  background: var(--head-glass-bg);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.cal-week-col.is-today .cal-week-head {
  box-shadow: inset 0 3px 0 var(--accent);
}

.cal-week-head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
}

.cal-week-head-top small {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.cal-week-head-top b {
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.cal-week-col.is-today .cal-week-head-top b {
  color: var(--accent-soft-ink);
}

.cal-week-head-meta {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-variant-numeric: tabular-nums;
}

.cal-cap-bar {
  display: flex;
  height: 4px;
  margin-top: 2px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--panel-well);
}

.cal-cap-bar > span {
  display: block;
  height: 100%;
  background: var(--t-solid, var(--accent));
}

.cal-week-list {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
}

.cal-week-card {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--t-line, var(--card-line));
  border-left: 4px solid var(--t-solid, var(--accent));
  border-radius: var(--r-md);
  background: var(--t-soft, var(--panel-well));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.cal-week-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--t-ink, var(--ink-2));
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.cal-week-card-client {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-week-card-client > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-week-card-service {
  overflow: hidden;
  color: var(--t-ink, var(--ink-2));
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ruled 6-column architectural month matrix (Mon–Sat). */
.cal-month-dow-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid var(--head-line);
  background: var(--head-glass-bg);
}

.cal-month-dow {
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--grid-line);
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.cal-month-dow:last-child {
  border-right: 0;
}

.cal-month-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--panel-solid);
}

.cal-month-cell {
  display: grid;
  align-content: space-between;
  gap: var(--space-2);
  min-height: 112px;
  padding: var(--space-3);
  border: 0;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  border-radius: 0;
  background: var(--panel-solid);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.cal-month-cell:hover {
  background: var(--panel-well);
}

.cal-month-cell.is-today {
  background: var(--page-bg);
  box-shadow: inset 0 3px 0 var(--accent);
}

.cal-month-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.cal-month-top small {
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-month-top b {
  font-size: var(--text-title);
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.cal-month-cell.is-today .cal-month-top b {
  color: var(--accent-soft-ink);
}

.cal-month-meta {
  color: var(--ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.cal-month-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--panel-well);
}

.cal-month-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.cal-month-dots {
  display: flex;
  gap: var(--space-1);
}

.cal-journal-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--panel-solid);
}

.cal-journal-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--panel-divider);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.cal-journal-row:last-child {
  border-bottom: 0;
}

.cal-journal-row:hover {
  background: var(--panel-well);
}

.cal-journal-time {
  display: grid;
  font-variant-numeric: tabular-nums;
}

.cal-journal-time b {
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-bold);
}

.cal-journal-time small {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
}

.cal-journal-main {
  display: grid;
  min-width: 0;
}

.cal-journal-main b {
  overflow: hidden;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-journal-main small {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-journal-main small > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-journal-tech {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  background: var(--panel-well);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
}

.cal-journal-price {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 699px) {
  .cal-toolbar {
    padding: var(--space-2) var(--space-3);
  }

  .cal-toolbar-kpi {
    display: none;
  }

  .cal-week-grid,
  .cal-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cal-month-dow-row {
    display: none;
  }

  .cal-journal-row {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
  }

  .cal-journal-tech,
  .cal-journal-price {
    display: none;
  }
}

/* Front desk on the phone. Loaded last so these overrides win. */

/* ---------- Phone: bottom bar, one column, turn cards become the column switcher ---------- */

@media (max-width: 699px) {
  .desk {
    --gutter: 52px;
    --hour: var(--hour-phone);
    /* The bottom bar clears the home indicator itself. */
    padding-bottom: var(--desk-pad, 0px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top"
      "walkins"
      "cal"
      "nav";
  }

  .desk--notice {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top"
      "walkins"
      "notice"
      "cal"
      "nav";
  }

  .desk--bare {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top"
      "cal"
      "nav";
  }

  .notice {
    margin: 0 var(--space-3) var(--space-2);
  }

  .cal > .cal-message {
    top: calc(50% + 40px);
  }

  .nav {
    flex-direction: row;
    gap: 0;
    padding: var(--space-2) var(--space-2) calc(8px + var(--safe-bottom));
    overflow: visible;
    border-top: 1px solid var(--nav-line);
    border-right: 0;
  }

  .nav-brand,
  .nav-group-label,
  .nav-item--desktop,
  .nav-item--settings,
  .nav-foot {
    display: none;
  }

  .nav-item--more {
    display: flex;
  }

  .nav-item.is-active-phone {
    background: var(--nav-active-bg);
    box-shadow: var(--shadow-tonal);
    color: var(--nav-active-ink);
  }

  .nav-item--end {
    margin-top: 0;
  }

  .nav-item {
    flex: 1;
    min-width: 0;
    min-height: 56px;
  }

  .nav-badge {
    top: 2px;
    left: calc(50% + 4px);
  }

  .topbar {
    gap: 2px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1);
  }

  .datenav-label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  .search {
    flex: 0 0 48px;
    justify-content: center;
    width: 48px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .search-text,
  .search kbd {
    display: none;
  }

  /* On the phone "+" holds the quick actions and Nova marcação, as a sheet: the desk's menu has no
     button to hang from, so it never shows. */
  .new-booking,
  .quick-trigger,
  .quick-menu {
    display: none;
  }

  .fab {
    display: grid;
  }

  .walkins {
    gap: var(--space-2);
    margin: 0 var(--space-3) var(--space-2);
  }

  .strip {
    display: none;
  }

  .walkins-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: var(--text-detail);
    line-height: var(--lh-detail);
  }

  .walkins-next {
    max-width: 100%;
  }

  .walkins .btn {
    flex-shrink: 0;
  }

  .walkins-add svg {
    display: none;
  }

  .walkins-text b {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .cal-head {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    overflow-x: auto;
    box-shadow: var(--cal-fade-shadow);
    border-top: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cal-corner {
    display: none;
  }

  .turn {
    flex: 0 0 auto;
    width: 236px;
    min-height: 64px;
    padding: var(--space-3);
    border: 1px solid var(--head-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    scroll-snap-align: start;
  }

  .turn.is-next {
    box-shadow: var(--shadow-sm);
  }

  .turn[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: var(--shadow-option-on);
  }

  /* The day's last booking scrolls clear of "+" (60 px). */
  .cal-grid {
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    min-width: 0;
    padding-bottom: calc(60px + var(--space-6));
  }

  .cal-head {
    min-width: 0;
  }

  .cal-col {
    display: none;
  }

  .cal-col.is-shown {
    display: block;
  }

}

/* App pages (client card, settings): the desk shell around a porcelain content sheet. The rail,
   top bar and glass come from desk.css and glass.css; this file lays out the content. */

.app-page {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "nav top"
    "nav cal";
}

.page-top {
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
}

.page-top:has(> .page-back:not(.page-back--phone)) {
  padding-left: var(--space-3);
}

.page-heading {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.page-title {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-screen);
  line-height: var(--lh-screen);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-sub {
  color: var(--top-ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.page-main {
  grid-area: cal;
  display: flex;
  gap: var(--space-4);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--page-bg);
}

.page-side {
  position: sticky;
  top: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  flex: 0 0 240px;
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
}

.page-side a {
  overflow: hidden;
  color: var(--ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-side a[aria-current="page"] {
  background: var(--accent-soft);
  box-shadow: var(--shadow-tonal);
  color: var(--accent-soft-ink);
}

.page-top .page-back--phone {
  display: none;
}

/* A page reads at most about 1080px wide; rows wider than that put a value too far from its label. */
.page-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  align-content: start;
  gap: var(--space-4);
  align-self: flex-start;
  min-width: 0;
  max-width: 1080px;
  padding: var(--space-4) var(--space-5) var(--space-8);
}

/* Section tabs: one line always; when they do not fit (the phone, large text) they scroll sideways
   instead of wrapping a lone tab onto a second row (D-048). */
.page-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  max-width: 100%;
  /* A scroll container's minimum height is only its padding: without this a full page squeezes
     the bar to a line. */
  min-height: fit-content;
  padding: var(--space-1);
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: var(--panel-well);
  box-shadow: var(--shadow-track);
  justify-self: start;
  scrollbar-width: none;
}

.page-tab {
  color: var(--ink-2);
}

.page-tab[aria-current="page"] {
  background: var(--seg-on);
  color: var(--ink);
  box-shadow: var(--shadow-seg);
  outline: 1px solid var(--card-line);
  outline-offset: -1px;
}

/* Filters and periods (Todas / Alergias, Hoje / Mês / Ano) are a level below the section tabs:
   small chips without a track, the chosen one tinted. */
.page-tabs--chips {
  gap: var(--space-2);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.page-tabs--chips .page-tab {
  border: 1px solid var(--control-line);
  background: var(--panel-solid);
  box-shadow: var(--shadow-sm);
}

.page-tabs--chips .page-tab[aria-current="page"] {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  box-shadow: var(--shadow-tonal);
  outline: 0;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-4);
  align-items: start;
}

.page-stack {
  display: grid;
  gap: var(--space-4);
}

.page-card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

/* A card's title leads its rows: main ink, body size, display weight (D-048). */
.page-card-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.page-hint {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  text-wrap: pretty;
}

/* Rows: label and value, or a thing with its status and one action. */
.page-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--panel-divider);
}

.page-row:has(> .page-tabs) {
  flex-wrap: wrap;
}

.page-row:first-child {
  border-top: 0;
}

.page-row-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.page-row-main small {
  overflow-wrap: anywhere;
}

.page-row-value {
  flex-shrink: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.page-row .btn {
  flex-shrink: 0;
}

/* Facts about someone (contact details): label above value, in as many columns as fit. */
.page-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--panel-divider);
}

.page-facts:not(:last-child):not(:has(+ .page-row)) {
  border-bottom: 1px solid var(--panel-divider);
}

.page-facts:last-child,
.page-facts:has(+ .page-row) {
  padding-bottom: 0;
}

[data-onboarding-role] .sheet-check,
[data-onboarding-days] .sheet-check,
[data-onboarding-hours] .sheet-check,
[data-onboarding-team] .sheet-check {
  border-radius: var(--r-pill);
}

:is(.page-fact, .page-facts > div) dt {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

:is(.page-fact, .page-facts > div) dd {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Client header. */
.client-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.client-avatar {
  background: var(--t-solid);
  color: var(--t-on);
}

.client-who {
  flex: 1;
  min-width: 12rem;
}

.client-name {
  margin: 0;
  font-size: var(--text-screen);
  line-height: var(--lh-screen);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
  overflow-wrap: anywhere;
}

.client-meta {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.client-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.client-tag {
  background: var(--chip-neutral-bg);
  box-shadow: var(--shadow-chip-neutral);
}

.client-tag--warn {
  background: var(--chip-warn-bg);
  box-shadow: var(--shadow-chip-warn);
  color: var(--warn-ink);
}

.client-tag--reward {
  background: var(--chip-accent-bg);
  box-shadow: var(--shadow-chip);
  color: var(--accent-soft-ink);
}

/* Permission matrix: a real table, scrolling sideways on the phone. */
.perm-wrap {
  overflow-x: auto;
}

.perm {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.perm th,
.perm td {
  padding: var(--space-3) var(--space-3);
  border-top: 1px solid var(--panel-divider);
  text-align: left;
}

.perm thead th {
  border-top: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.perm tbody th {
  font-weight: var(--w-semibold);
}

.perm td {
  white-space: nowrap;
}

.perm-yes,
.perm-no,
.perm-own {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--w-semibold);
}

.perm-yes {
  color: var(--ok-ink);
}

.perm-no {
  color: var(--ink-2);
}

.perm-own {
  color: var(--warn-ink);
}

.perm svg {
  width: 16px;
  height: 16px;
}

/* Breach clock: the one place the app counts down. A banner in the error tone; the hours left lead. */
.breach-clock > span {
  flex: 1;
  min-width: 0;
}

.breach-clock > svg {
  margin-top: 2px;
}

.breach-clock b {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.page-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.page-check > svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--ink-3);
}

.page-check.is-done > svg {
  color: var(--ok-ink);
}

.page-check p {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin: 0;
}

.page-check small {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.page-check .btn {
  margin-top: var(--space-2);
}

.page-check.is-done span {
  color: var(--ink-2);
}

.page-check.is-next > svg {
  color: var(--accent);
}

.page-check.is-next span {
  font-weight: var(--w-semibold);
}

/* A setting's state as a tonal chip: on, off, coming. */
.page-status {
  background: var(--chip-neutral-bg);
  box-shadow: var(--shadow-chip-neutral);
  color: var(--ink-2);
}

.page-status[data-status="on"] {
  background: var(--chip-accent-bg);
  box-shadow: var(--shadow-chip);
  color: var(--accent-soft-ink);
}

.page-status:is([data-status="ok"], [data-status="arrived"], [data-status="paid"], [data-status="done"]) {
  background: var(--chip-ok-bg);
  box-shadow: var(--shadow-chip-ok);
  color: var(--ok-ink);
}

.page-status:is([data-status="warn"], [data-status="low"], [data-status="late"]) {
  background: var(--chip-warn-bg);
  box-shadow: var(--shadow-chip-warn);
  color: var(--warn-ink);
}

.page-status:is([data-status="danger"], [data-status="critical"], [data-status="no-show"]) {
  background: var(--chip-danger-bg);
  box-shadow: var(--shadow-chip-danger);
  color: var(--danger-ink);
}

/* A day's heading in a dated list (the access log). */
.page-day {
  margin: var(--space-3) 0 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

/* O meu dia (D-028): the next client first, then the day, then wins only she sees. */
.myday-big {
  font-size: var(--text-screen);
  line-height: var(--lh-screen);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.myday-client {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.myday-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.myday-actions .btn {
  flex: 1 1 0;
  min-width: fit-content;
}

.myday-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.myday-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--panel-divider);
}

.myday-row:first-child {
  border-top: 0;
}

.myday-row.is-next {
  margin: 0 -12px;
  padding: var(--space-3);
  border-top-color: transparent;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  box-shadow: var(--shadow-tonal);
}

.myday-row.is-next + .myday-row {
  border-top-color: transparent;
}

.myday-time {
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.myday-main {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
}

.myday-main b {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.myday-row.is-past .myday-main b,
.myday-row.is-past .myday-time {
  color: var(--ink-2);
}

.myday-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 2px;
  color: var(--accent-soft-ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
}

.myday-flag.is-reward {
  color: var(--reward-ink);
}

/* The day's status chips, in the panel's tones (the calendar's badge colours belong to its blocks). */
.myday-status .appt-status {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.myday-row:is([data-status="arrived"], [data-status="paid"], [data-status="done"]) .appt-status {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.myday-row[data-status="late"] .appt-status {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.myday-row[data-status="no-show"] .appt-status {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.myday-win {
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent-line);
}

.myday-win {
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* Push specimens: a simulated lock screen. Notifications are the system's; the text is ours. */
.push-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: var(--space-5);
  min-height: 100vh;
  padding: calc(16px + var(--safe-top)) 12px calc(24px + var(--safe-bottom));
  background: var(--backdrop, var(--canvas));
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.push-specimen {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--panel-solid);
  box-shadow: var(--shadow-chip);
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
}

.push-clock {
  display: grid;
  justify-items: center;
  margin: var(--space-2) 0 var(--space-3);
}

.push-clock span {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-semibold);
}

.push-clock b {
  /* The lock screen's clock stays within the screen at any text size. */
  font-size: var(--text-clock);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-figure);
}

.push-list {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 26rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.push-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-xl);
  background: var(--panel-solid);
  box-shadow: var(--shadow-md);
}

.push-app {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent);
  box-shadow: var(--shadow-badge);
  color: var(--accent-ink);
}

.push-app .logo {
  width: 22px;
  height: 22px;
}

.push-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.push-head b {
  color: var(--ink);
  font-weight: var(--w-semibold);
}

.push-title {
  font-weight: var(--w-semibold);
}

.push-body {
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* WhatsApp automations (D-020): the account, then one card per automatic message. */
.wa-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2) var(--space-4);
}

.wa-account-main {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.wa-account-title {
  color: var(--ink);
}

.wa-month {
  display: grid;
  justify-items: end;
  gap: 2px;
  margin: 0;
  text-align: right;
}

.wa-month b {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.wa-month small,
.wa-note {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.wa-note {
  grid-column: 1 / -1;
}

.wa-steps {
  display: grid;
  gap: var(--space-1);
  margin: 2px 0 var(--space-2);
  padding-left: 1.25em;
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.wa-list {
  display: grid;
  gap: var(--space-2);
}

.wa-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.wa-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.wa-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.wa-card-title {
  flex: 1;
  min-width: 0;
}

.wa-card-title h3 {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.wa-card-title p {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.wa-cat,
.wa-pending {
  justify-self: start;
}

/* How long the approval takes, under its chip. */
.wa-pending-wait {
  margin-top: calc(-1 * var(--space-2));
}

.wa-cat--utility {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.wa-cat--marketing,
.wa-pending {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.wa-preview {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  background: var(--panel-well);
}

.wa-preview figcaption {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.wa-bubble {
  position: relative;
  justify-self: start;
  max-width: 34rem;
  padding: var(--space-2) var(--space-3) var(--space-2);
  border: 1px solid var(--card-line);
  border-radius: 4px 14px 14px;
  background: var(--panel-solid);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.wa-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: 2px;
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
}

.wa-time svg {
  width: 14px;
  height: 14px;
  color: var(--accent-soft-ink);
}

.wa-card.is-off .wa-preview {
  opacity: 0.6;
}

.wa-option {
  padding: var(--space-3) var(--space-3);
}

.wa-cost {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.wa-consent-count {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
}

/* A switch: role="switch" with aria-checked; the label is the card's title. */
/* The track is 32px; the button reaches 48px around it, so a thumb finds it. */
.switch {
  position: relative;
  flex-shrink: 0;
  box-sizing: content-box;
  width: 52px;
  height: 32px;
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--switch-off);
  background-clip: content-box;
  box-shadow: var(--shadow-switch-track);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.switch-knob {
  position: absolute;
  top: 11px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: var(--shadow-knob);
  transition: transform var(--dur-fast) var(--ease-spring);
}

.switch[aria-checked="true"] {
  background: var(--accent);
}

.switch[aria-checked="true"] .switch-knob {
  transform: translateX(20px);
}

.switch:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.switch:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .switch,
  .switch-knob {
    transition: none;
  }
}

@media (max-width: 699px) {
  /* Four section tabs fit the phone's width without wrapping. */
  .page-tab {
    padding: 0 var(--space-3);
  }

  .app-page {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top"
      "cal"
      "nav";
  }

  .page-top {
    gap: var(--space-2);
    min-height: 56px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  }

  .page-top:has(> .page-back) {
    padding-left: var(--space-2);
  }

  /* One line under the title, so the actions beside it keep their size. */
  .page-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* On the phone an action with an icon keeps only its icon; a word-only action keeps its word. */
  /* Hidden the visually-hidden way, so the button keeps its name for screen readers. */
  .page-actions .btn:has(> svg) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .page-actions .btn:has(> svg) {
    width: 48px;
    padding: 0;
  }

  .page-actions .btn:not(:has(> svg)) {
    padding: 0 var(--space-3);
  }

  .page-main {
    flex-direction: column;
  }

  /* On the phone a settings section is its own screen: the list sits one level up. */
  .page-side {
    display: none;
  }

  .page-top .page-back--phone {
    display: grid;
  }

  .perm th,
  .perm td {
    padding: var(--space-3) var(--space-2);
  }

  .perm th:first-child {
    padding-left: 0;
  }

  .perm td {
    white-space: normal;
  }

  .perm-yes,
  .perm-no,
  .perm-own {
    align-items: flex-start;
    gap: var(--space-1);
  }

  .perm svg {
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* The end of a page scrolls clear of "+" (60 px, above the navigation). In the column the page
     takes the full width, whatever its content (a loading list has none of its own). */
  .page-content {
    width: 100%;
    padding: var(--space-3) var(--space-3) calc(60px + var(--space-6));
  }

  .wa-account {
    grid-template-columns: minmax(0, 1fr);
  }

  .wa-month {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .wa-note {
    grid-column: 1 / -1;
  }
}

/* The online booking link: a client's phone, no app chrome, so no glass wallpaper either. */
.link-page {
  min-height: 100vh;
  padding: 0 var(--space-4) var(--space-8);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.link-head {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(20px + var(--safe-top, 0px)) 4px 12px;
}

.link-brand {
  color: var(--accent-soft-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-bold);
}

.link-title {
  margin: var(--space-1) 0 0;
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.link-step {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.link-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4);
  border: 1px solid var(--panel-line);
  background: var(--panel-solid);
  box-shadow: var(--panel-shadow);
}

.link-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--accent-soft);
  box-shadow: var(--shadow-tonal);
  color: var(--accent-soft-ink);
  font-weight: var(--w-semibold);
}

.link-summary span {
  min-width: 0;
}

.link-summary svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.link-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.link-page a {
  color: var(--accent-soft-ink);
  font-weight: var(--w-semibold);
  text-underline-offset: 2px;
}

.link-confirm {
  width: 100%;
}

/* The client's header on the phone: compact, the avatar beside the first line, so the tabs and the
   first card show sooner (D-048). */
@media (max-width: 699px) {
  .client-head {
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* The components page (D-050): the specimens' layout. Every specimen is a real component. */
.system-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.system-avatars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  align-items: end;
  gap: var(--space-5) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-avatars li {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.system-icons {
  align-items: center;
}

.system-type {
  display: grid;
  gap: var(--space-4);
}

.system-role {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.system-role > * {
  margin: 0;
}

/* ---- Public pages (Round 20, D-076): Fronty commercial website (/inicio) and studio online booking (/s/:slug/marcar) ---- */

.public-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "top"
    "cal";
}

.public-shell .page-content {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

/* Full-bleed commercial website layout for /inicio (Warm stone canvas + architectural slabs) */
[data-direction] .desk.public-shell.landing-page {
  --desk-pad: 0px;
  gap: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--ad-canvas-bg);
}

.landing-navbar {
  position: relative;
  grid-area: top;
  z-index: 5;
  padding: var(--space-3) var(--space-5) 0;
  border-bottom: 0;
  background: transparent;
}

.landing-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: 1280px;
  min-height: 64px;
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  background: var(--ad-pill-bg);
  -webkit-backdrop-filter: blur(var(--head-blur));
  backdrop-filter: blur(var(--head-blur));
  box-shadow: var(--shadow-stage);
}

.landing-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.landing-brand-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-title);
  line-height: var(--lh-title);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.landing-brand-sub {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  background: var(--panel-well);
}

.landing-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  text-decoration: none;
  cursor: pointer;
}

.landing-nav-link:hover {
  background: var(--panel-solid);
  color: var(--accent-soft-ink);
}

.landing-canvas {
  position: relative;
  grid-area: cal;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: transparent;
}

.landing-page .landing-content {
  display: grid;
  gap: var(--space-5);
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-5) var(--space-10);
}

.public-shell .sheet-note a {
  color: var(--accent-soft-ink);
  font-weight: var(--w-semibold);
  text-underline-offset: 2px;
}

.public-brand {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
}

.public-brand-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  box-shadow: var(--shadow-tonal);
  color: var(--accent);
  text-decoration: none;
}

.public-brand-mark .logo {
  width: 24px;
  height: 24px;
}

.public-eyebrow {
  margin: 0;
  overflow: hidden;
  color: var(--accent-soft-ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-soft-ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
}

.landing-kicker::before {
  width: 16px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
  content: "";
}

/* Section 1: Open-Canvas Hero Showcase + 3D-Tilted Multi-Layered Product Stage */
.landing-hero-open {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: var(--space-5);
}

.landing-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-3) var(--space-2) var(--space-2) var(--space-1);
  border: 0;
  border-radius: var(--r-surface);
  background: transparent;
  box-shadow: none;
}

.landing-hero-copy.landing-skel-stack {
  padding: var(--space-6);
  border: 1px solid var(--card-line);
  background: var(--panel-solid);
  box-shadow: var(--shadow-card);
}

.landing-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.landing-eyebrow-note {
  padding-left: var(--space-3);
  border-left: 1px solid var(--card-line);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.landing-display {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-hero);
  overflow-wrap: anywhere;
}

.landing-display-lead {
  color: var(--ink);
  font-weight: var(--w-bold);
}

.landing-display-muted {
  color: var(--ink-2);
  font-weight: var(--w-regular);
}

.landing-display-accent {
  color: var(--accent);
  font-weight: var(--w-bold);
  text-decoration-line: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}

.landing-lead {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent-line);
  color: var(--ink-2);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-regular);
}

.landing-actions {
  flex-wrap: wrap;
}

/* Open Ruled-Grid Proof Ledger (Cosmos 3-column ruled specification bar) */
.landing-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: var(--space-3) 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--panel-divider);
}

.landing-ledger-item {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding-right: var(--space-3);
}

.landing-ledger-item + .landing-ledger-item {
  padding-left: var(--space-4);
  border-left: 1px solid var(--panel-divider);
}

.landing-stat-val {
  color: var(--ink);
  font-size: var(--text-figure);
  line-height: var(--lh-figure);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.landing-ledger-item:first-child .landing-stat-val {
  color: var(--accent);
}

.landing-stat-label {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-medium);
}

/* Cosmos Floating Lookbook Story Reel inside Hero */
.landing-hero-photos {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.landing-hero-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--ad-pill-bg);
  box-shadow: var(--shadow-satellite);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out),
    rotate var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  animation: landingFloatCard 4.2s var(--ease-standard) infinite;
}

.landing-hero-photo-card[aria-current="page"] {
  border-color: var(--accent-line);
  background: var(--panel-solid);
  box-shadow: var(--shadow-stage);
}

.landing-hero-photo-card:nth-child(2) {
  animation-delay: -1.4s;
}

.landing-hero-photo-card:nth-child(3) {
  animation-delay: -2.8s;
}

@keyframes landingFloatCard {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.landing-reel-track {
  grid-column: 1 / -1;
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: var(--panel-divider);
}

.landing-reel-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.landing-hero-photo-card[aria-current="page"] .landing-reel-fill {
  animation: landingReelSweep 3.2s linear infinite;
}

@keyframes landingReelSweep {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.landing-hero-photo-frame {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: 138px;
  overflow: hidden;
  border-bottom: 1px solid var(--card-line);
}

.landing-hero-photo-card[aria-current="page"] .landing-hero-photo-frame {
  height: 162px;
}

.landing-hero-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: landingKenBurns 11s var(--ease-standard) infinite alternate;
}

.landing-hero-photo-card:nth-child(2) .landing-hero-photo-img {
  animation-delay: -3.5s;
}

.landing-hero-photo-card:nth-child(3) .landing-hero-photo-img {
  animation-delay: -7s;
}

@keyframes landingKenBurns {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.09) translate3d(-2%, -2%, 0);
  }
}

.landing-reel-tag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px var(--space-2);
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  background: var(--panel-solid);
  box-shadow: var(--shadow-sm);
  color: var(--accent-soft-ink);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.landing-hero-photo-cap {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
}

.landing-hero-photo-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.landing-hero-photo-sub {
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

/* 3-Layer Interactive Product Stage (Floating Telemetry Satellite + Calendar Tablet + Floating Client CRM Satellite) */
.landing-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-surface);
  background: var(--ad-stage-bg);
  box-shadow: var(--shadow-stage);
  transition: transform var(--dur-base) var(--ease-out);
}

.landing-hero-stage[data-stage-tilt="active"] {
  transform: perspective(1400px) rotateX(var(--stage-rx, 0deg)) rotateY(var(--stage-ry, 0deg));
}

.landing-stage-telemetry {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background: var(--ad-pill-bg);
  -webkit-backdrop-filter: blur(var(--head-blur));
  backdrop-filter: blur(var(--head-blur));
  box-shadow: var(--shadow-satellite);
  animation: landingTelemetryFloat 4.4s var(--ease-standard) infinite;
}

@keyframes landingTelemetryFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.landing-telemetry-item {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.landing-telemetry-label {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
}

.landing-telemetry-val {
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.landing-stage-card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.landing-window-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.landing-stage-title {
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
}

.landing-live-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.landing-live-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: currentColor;
  animation: landingLivePulse 2.2s var(--ease-out) infinite;
}

@keyframes landingLivePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.45;
  }
}

.landing-cal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--panel-divider);
}

.landing-stage-tabs {
  flex-shrink: 0;
}

.landing-stage-pane:not([hidden]),
.landing-cal-cols:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    display var(--dur-base) allow-discrete;
}

@starting-style {
  .landing-stage-pane:not([hidden]),
  .landing-cal-cols:not([hidden]) {
    opacity: 0;
    transform: translateY(4px);
  }
}

.landing-stage-pane {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.landing-crm-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.landing-crm-hero-img {
  display: block;
  width: 100%;
  height: 156px;
  object-fit: cover;
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
}

.landing-cal-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-2);
}

.landing-cal-col {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  background: var(--panel-well);
}

.landing-col-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--panel-divider);
}

.landing-col-who {
  display: grid;
  flex: 1;
  min-width: 0;
}

.landing-col-who b {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-col-who small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
}

.landing-col-who small span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-appt {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  background: var(--t-soft);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.landing-appt:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.landing-appt.is-active {
  border: 2px solid var(--t-solid);
  box-shadow: var(--shadow-spotlight);
  animation: landingSpotlightFloat 3.4s var(--ease-standard) infinite;
}

@keyframes landingSpotlightFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.landing-appt-time {
  color: var(--t-ink);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.landing-appt-name {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-appt-service {
  overflow: hidden;
  color: var(--t-ink);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-appt-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--p);
  height: 4px;
  background: var(--t-solid);
  transform-origin: 0 50%;
  animation: landingProgressSweep 3.2s var(--ease-standard) infinite alternate;
}

@keyframes landingProgressSweep {
  0% {
    transform: scaleX(0.68);
  }
  100% {
    transform: scaleX(1.16);
  }
}

.landing-free-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1.5px dashed var(--free-line);
  border-radius: var(--r-md);
  background: var(--free-bg);
  color: var(--free-ink);
  font-family: inherit;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
  animation: landingFreeSlotPulse 2.8s var(--ease-standard) infinite;
}

@keyframes landingFreeSlotPulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.landing-free-slot.is-active {
  border: 2px solid var(--t-solid);
  background: var(--t-soft);
  box-shadow: var(--shadow-spotlight);
  color: var(--t-ink);
}

.landing-free-slot > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.landing-floating-crm {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background: var(--ad-pill-bg);
  -webkit-backdrop-filter: blur(var(--head-blur));
  backdrop-filter: blur(var(--head-blur));
  box-shadow: var(--shadow-satellite);
  animation: landingCrmFloat 3.8s var(--ease-standard) infinite;
}

@keyframes landingCrmFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.landing-crm-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
}

.landing-crm-copy {
  display: grid;
  flex: 1 1 11rem;
  gap: 2px;
  min-width: 0;
}

.landing-crm-title {
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.landing-crm-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.landing-formula-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.landing-ribbon-formula {
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-medium);
}

/* Section 2 (CONTAINED COMMERCIAL MARKETPLACE SLAB): Studio Finder Directory with Editorial Photography */
.landing-directory-slab {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1.5px solid var(--accent-line);
  border-radius: var(--r-surface);
  background: var(--ad-hero-bg);
  box-shadow: var(--shadow-stage);
}

.landing-directory-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--panel-divider);
}

.landing-directory-intro {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.landing-directory-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 24rem;
  justify-content: flex-end;
}

.landing-search-field {
  flex: 1 1 15rem;
  min-width: 0;
}

.landing-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-4);
}

.landing-studio-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  box-shadow: var(--shadow-satellite);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.landing-studio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-stage);
}

.landing-studio-media {
  position: relative;
  height: 236px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--panel-well);
}

.landing-studio-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
  animation: landingKenBurns 14s var(--ease-standard) infinite alternate;
}

.landing-studio-card:nth-child(2) .landing-studio-photo {
  animation-delay: -4.5s;
}

.landing-studio-card:nth-child(3) .landing-studio-photo {
  animation-delay: -9s;
}

.landing-studio-card:hover .landing-studio-photo {
  transform: scale(1.04);
}

.landing-studio-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.landing-studio-head {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.landing-studio-name {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-title);
  line-height: var(--lh-title);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
  overflow-wrap: anywhere;
}

.landing-studio-area {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  overflow-wrap: anywhere;
}

.landing-studio-specialties {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.details-chips.landing-studio-tags li {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-studio-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--panel-divider);
}

.landing-studio-next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent-soft-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.landing-studio-next > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Section 3: 3-Column Commercial Product Architecture (Unboxed Section + Elevated Pillar Cards) */
.landing-editorial-open {
  display: grid;
  gap: var(--space-4);
}

.landing-editorial-head {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-1) 0;
  border-top: 1.5px solid var(--ink);
}

.landing-section-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-figure);
  line-height: var(--lh-figure);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
}

.landing-editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.landing-editorial-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.landing-editorial-grid > .page-card.landing-editorial-col {
  border-top: 2px solid var(--ink);
}

.landing-pillar-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--panel-divider);
  color: var(--accent);
  font-size: var(--text-figure);
  line-height: var(--lh-figure);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.landing-editorial-col-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-title);
  line-height: var(--lh-title);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.landing-specimen {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-4);
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--panel-well);
  box-shadow: var(--shadow-well-in);
}

.landing-specimen-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.landing-specimen-photo,
.landing-specimen-cover {
  display: block;
  width: 100%;
  height: 152px;
  object-fit: cover;
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
}

.landing-specimen-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.landing-specimen-meta {
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.landing-bento-label {
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.landing-step-pills li {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}

.landing-step-pills li:hover {
  transform: translateY(-1px);
}

.landing-step-pills li.is-done {
  background: var(--chip-accent-bg);
  box-shadow: var(--shadow-chip);
  color: var(--accent-soft-ink);
}

.landing-url-text {
  color: var(--accent-soft-ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  overflow-wrap: anywhere;
}

/* Section 4 (CONTAINED COMMERCIAL CONVERSION SLAB) & Website Footer */
.landing-cta-slab {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1.5px solid var(--accent-line);
  border-radius: var(--r-surface);
  background: var(--ad-hero-bg);
  box-shadow: var(--shadow-stage);
}

.landing-cta-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.landing-cta-copy {
  display: grid;
  flex: 1 1 20rem;
  gap: var(--space-1);
  min-width: 0;
}

.landing-cta-actions {
  flex-wrap: wrap;
}

.landing-cta-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--panel-divider);
}

.landing-cta-fact {
  display: grid;
  gap: 2px;
  min-width: 0;
}

@media (min-width: 700px) {
  .landing-cta-fact + .landing-cta-fact {
    padding-left: var(--space-4);
    border-left: 1px solid var(--panel-divider);
  }
}

.landing-fact-label {
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.landing-fact-val {
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.landing-site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--card-line);
  border-radius: var(--r-surface);
  background: var(--panel-solid);
  box-shadow: var(--shadow-sm);
}

.landing-footer-brand {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.landing-footer-title {
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-bold);
}

.landing-footer-copy {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.landing-footer-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  text-decoration: none;
  cursor: pointer;
}

.landing-footer-link:hover {
  background: var(--panel-well);
  color: var(--ink);
}

.pub-studio-cover {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  background: var(--panel-well);
}

.pub-studio-cover-img {
  display: block;
  width: 100%;
  height: 156px;
  object-fit: cover;
  border-bottom: 1px solid var(--card-line);
}

.pub-studio-cover-body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.pub-team-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pub-date-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--panel-well);
  text-align: center;
}

.sheet-option[aria-pressed="true"] .pub-date-badge {
  border-color: var(--accent-line);
  background: var(--panel-solid);
}

.pub-date-num {
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.pub-date-mon {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-tight);
  font-weight: var(--w-semibold);
}

.pub-ticket-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
}

.pub-ticket-perf {
  height: 1px;
  border-top: 1.5px dashed var(--panel-divider);
}

.pub-ticket-perf + .page-facts {
  padding-top: 0;
  border-top: 0;
}

.pub-ticket-banner .page-hint {
  color: var(--accent-soft-ink);
}

.pub-ticket-banner--ok {
  border-color: var(--card-line);
  background: var(--ok-soft);
}

.pub-ticket-banner--ok .page-hint {
  color: var(--ok-ink);
}

.pub-time-options {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.landing-skel-stack {
  display: grid;
  gap: var(--space-3);
}

.landing-skel-pill,
.landing-skel-display,
.landing-skel-sub,
.landing-skel-stat,
.landing-skel-btn,
.landing-skel-row,
.landing-skel-box {
  border: 1px solid var(--card-line);
  background: var(--panel-well);
}

.landing-skel-pill {
  display: block;
  width: 140px;
  height: 24px;
  border-radius: var(--r-pill);
}

.landing-skel-display {
  display: block;
  width: 85%;
  height: 64px;
  border-radius: var(--r-md);
}

.landing-skel-sub {
  display: block;
  width: 100%;
  height: 44px;
  border-radius: var(--r-md);
}

.landing-skel-stat {
  display: block;
  width: 100%;
  height: 52px;
  border-radius: var(--r-md);
}

.landing-skel-btn {
  display: block;
  width: 180px;
  height: 52px;
  border-radius: var(--r-lg);
}

.landing-skel-row {
  display: block;
  width: 100%;
  height: 56px;
  border-radius: var(--r-md);
}

.landing-skel-box {
  display: block;
  width: 100%;
  height: 120px;
  border-radius: var(--r-lg);
}

.pub-studio-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pub-service-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

.pub-tech-option {
  align-items: center;
}

.public-booking-page .sheet-option .sheet-check {
  border-radius: var(--r-pill);
}

.public-booking-page .sheet-option-label,
.public-booking-page .sheet-option-meta {
  overflow-wrap: break-word;
}

.pub-time-group {
  display: grid;
  gap: var(--space-2);
}

@keyframes publicStepEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes publicPillPop {
  0% {
    transform: scale(0.95);
  }
  65% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

.is-step-entering {
  animation: publicStepEnter var(--dur-base) var(--ease-out);
}

.is-pill-pop {
  animation: publicPillPop var(--dur-base) var(--ease-out);
}

/* Material Relief & Discrete Entry/Exit Physics (Pillar 5) */
.landing-studio-card:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    display var(--dur-base) allow-discrete;
}

@starting-style {
  .landing-studio-card:not([hidden]) {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Three-layer pointer parallax (independent translate property so transform keyframes run cleanly) */
.landing-stage-telemetry {
  translate: calc(var(--px, 0px) * 0.5) calc(var(--py, 0px) * 0.5);
  transition: translate var(--dur-base) var(--ease-out);
}

.landing-stage-card {
  translate: calc(var(--px, 0px) * -0.4) calc(var(--py, 0px) * -0.4);
  transition: translate var(--dur-base) var(--ease-out);
}

.landing-floating-crm {
  translate: calc(var(--px, 0px) * 1.1) calc(var(--py, 0px) * 1.1);
  transition: translate var(--dur-base) var(--ease-out);
}

.landing-appt.is-active .landing-appt-bar {
  transform-origin: left center;
  animation: landingBarPulse 2.8s var(--ease-standard) infinite;
}

@keyframes landingBarPulse {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(1.08);
    opacity: 0.78;
  }
}

.landing-studio-card:active,
.landing-free-slot:active,
.public-shell .page-tab:active,
.public-shell .sheet-option:active {
  transform: translateY(0.5px);
}

.is-summary-flash {
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  transition: background-color var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .is-step-entering,
  .is-pill-pop,
  .landing-live-dot,
  .landing-hero-photo-card,
  .landing-appt.is-active .landing-appt-bar {
    animation: none;
  }

  .is-summary-flash,
  .landing-studio-card,
  .landing-studio-photo,
  .landing-hero-photo-img,
  .landing-stage-telemetry,
  .landing-stage-card,
  .landing-floating-crm,
  .landing-appt,
  .landing-step-pill,
  .landing-stage-pane,
  .landing-cal-cols,
  .landing-free-slot {
    transition: none;
  }
}

/* 1-Box-at-a-Time Animated Onboarding Wizard (/abrir-estudio) */
.onboarding-page .page-grid {
  align-items: start;
}

.onboarding-wizard-head {
  display: grid;
  gap: var(--space-3);
}

.onboarding-progress {
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--panel-well);
  box-shadow: var(--shadow-well-in);
}

.onboarding-progress-fill {
  display: block;
  width: var(--step-p, 20%);
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-spring);
}

.onboarding-field-box {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  background: var(--panel-well);
  transition:
    transform var(--dur-fast) var(--ease-out),
    padding var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.onboarding-field-box:is([data-active-box="true"], :focus-within, [data-invalid]) {
  border-color: var(--accent-line);
  background: var(--panel-solid);
  box-shadow: var(--shadow-box-active);
  transform: translateY(-1px);
}

.onboarding-field-box[data-active-box="false"]:not(:focus-within):not([data-invalid]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3);
}

.onboarding-field-box[data-active-box="false"]:not(:focus-within):not([data-invalid]) .sheet-input {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
  font-weight: var(--w-medium);
  text-align: right;
  cursor: pointer;
}

.onboarding-field-box[data-active-box="false"]:not(:focus-within):not([data-invalid]) .sheet-field-hint {
  display: none;
}

.onboarding-field-box > label[data-box-step] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.onboarding-field-box > label[data-box-step]::before {
  content: attr(data-box-step);
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--chip-neutral-bg);
  box-shadow: var(--shadow-chip-neutral);
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.onboarding-field-box:is([data-active-box="true"], :focus-within) > label[data-box-step]::before {
  background: var(--chip-accent-bg);
  box-shadow: var(--shadow-chip);
  color: var(--accent-soft-ink);
}

@media (min-width: 961px) {
  .landing-hero-copy:not(.landing-skel-stack) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: var(--space-8);
    row-gap: var(--space-3);
    align-items: end;
    padding: var(--space-2) var(--space-1);
  }

  .landing-hero-copy:not(.landing-skel-stack) > .landing-eyebrow-row {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .landing-hero-copy:not(.landing-skel-stack) > .landing-display {
    grid-column: 1;
    grid-row: 2 / span 2;
    align-self: start;
  }

  .landing-hero-copy:not(.landing-skel-stack) > .landing-lead {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .landing-hero-copy:not(.landing-skel-stack) > .landing-actions {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .landing-hero-copy:not(.landing-skel-stack) > .landing-ledger {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
  }

  .landing-editorial-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: var(--space-8);
    align-items: end;
  }

  .landing-editorial-head > .landing-kicker {
    grid-column: 1;
    grid-row: 1;
  }

  .landing-editorial-head > .landing-section-title {
    grid-column: 1;
    grid-row: 2;
  }

  .landing-editorial-head > .page-hint {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    padding-left: var(--space-4);
    border-left: 2px solid var(--accent-line);
  }

  .landing-hero-photo-card:nth-child(1) {
    rotate: -0.7deg;
  }

  .landing-hero-photo-card:nth-child(2) {
    rotate: 0.6deg;
  }

  .landing-hero-photo-card:nth-child(3) {
    rotate: -0.5deg;
  }

  .landing-hero-photo-card[aria-current="page"] {
    rotate: 0deg;
  }

  .landing-stage-telemetry {
    margin-right: var(--space-4);
  }

  .landing-floating-crm {
    margin-left: var(--space-4);
  }
}

@media (max-width: 960px) {
  .landing-nav-links {
    display: none;
  }

  .landing-hero-open {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 699px) {
  .public-shell {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "top"
      "cal";
  }

  .landing-navbar {
    padding: var(--space-2) var(--space-3) 0;
  }

  .landing-navbar-inner {
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-surface);
  }

  .landing-brand-sub {
    display: none;
  }

  .public-shell .page-content {
    padding: var(--space-4) var(--space-3) var(--space-8);
  }

  .landing-page .landing-content {
    gap: var(--space-4);
    padding: var(--space-4) var(--space-3) var(--space-8);
  }

  .landing-hero-copy {
    padding: var(--space-2) 0;
  }

  .landing-directory-slab,
  .landing-cta-slab,
  .landing-site-footer {
    padding: var(--space-4);
  }

  .landing-hero-photos {
    flex-direction: column;
    gap: var(--space-2);
  }

  .landing-hero-photo-card,
  .landing-hero-photo-card[aria-current="page"] {
    display: grid;
    flex: none;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: stretch;
  }

  .landing-reel-track {
    grid-column: 1 / -1;
  }

  .landing-hero-photo-frame,
  .landing-hero-photo-card[aria-current="page"] .landing-hero-photo-frame {
    height: 100%;
    min-height: 76px;
    border-right: 1px solid var(--card-line);
    border-bottom: 0;
  }

  .landing-hero-photo-img {
    height: 100%;
    min-height: 76px;
  }

  .landing-studio-media {
    height: 184px;
  }

  .landing-specimen-photo,
  .landing-specimen-cover {
    height: 116px;
  }

  .landing-floating-crm {
    margin: 0;
  }

  .public-eyebrow {
    display: none;
  }

  .landing-display {
    font-size: var(--text-figure);
    line-height: var(--lh-figure);
  }

  .landing-section-title {
    font-size: var(--text-page);
    line-height: var(--lh-page);
  }

  .landing-lead {
    font-size: var(--text-body);
    line-height: var(--lh-body);
  }

  .landing-ledger {
    gap: var(--space-3);
  }

  .public-booking-page .page-tabs:not(.page-tabs--chips) .page-tab {
    padding-inline: var(--space-2);
  }

  .public-booking-page .public-top .page-actions,
  .public-booking-page .pub-service-badge {
    display: none;
  }
}

/* Booking details: a modal side panel on tablet and desktop, a bottom sheet on the phone.
   The dialog is the top layer above a scrim; its panel is near-opaque so text never sits on glass. */

.details {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 40;
  width: min(480px, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.details::backdrop {
  background: var(--scrim);
}

.details-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: var(--r-surface);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}

.details-handle {
  display: none;
}

.details-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3) var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--panel-divider);
}

.details-avatar {
  background: var(--t-solid);
  color: var(--t-on);
}

.details-who {
  min-width: 0;
  padding-top: 2px;
}

.details-name {
  margin: 0;
  font-size: var(--text-screen);
  line-height: var(--lh-screen);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
  overflow-wrap: anywhere;
}

/* Focus lands on the heading so screen readers announce who this is; it is not a control. */
.details-name:focus,
.details-name:focus-visible {
  outline: none;
}

.details-meta {
  margin-top: var(--space-1);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.details-body {
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--space-5);
  min-height: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  overflow-y: auto;
  mask-image: var(--scroll-fade);
  overscroll-behavior: contain;
}

.details-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.details-status {
  background: var(--chip-accent-bg);
  box-shadow: var(--shadow-chip);
  color: var(--accent-soft-ink);
}

.details-status:is([data-status="arrived"], [data-status="paid"], [data-status="done"]) {
  background: var(--chip-ok-bg);
  box-shadow: var(--shadow-chip-ok);
  color: var(--ok-ink);
}

.details-status[data-status="ready-to-pay"] {
  background: var(--chip-accent-bg);
  box-shadow: var(--shadow-chip);
  color: var(--accent-soft-ink);
}

.details-status[data-status="late"] {
  background: var(--chip-warn-bg);
  box-shadow: var(--shadow-chip-warn);
  color: var(--warn-ink);
}

.details-status[data-status="no-show"] {
  background: var(--chip-danger-bg);
  box-shadow: var(--shadow-chip-danger);
  color: var(--danger-ink);
}

.details-alert-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.details-alert p {
  margin: 0;
}

/* Preparation for the allergy, as quiet tags on the amber ground. */
.details-chips--alert li {
  background: var(--warn-line);
  color: var(--warn-ink);
}

.details-alert small {
  display: block;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.details-section {
  display: grid;
  gap: var(--space-2);
}

.details-h {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.details-lines {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  background: var(--panel-well);
}

.details-lines > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.details-lines dd {
  margin: 0;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.details-lines .is-total {
  margin-top: 2px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--panel-divider);
  font-weight: var(--w-semibold);
}

.details-lines .is-deposit {
  color: var(--ok-ink);
}

.details-lines .is-due {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-bold);
}

.details-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.details-line {
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.details-line b {
  font-weight: var(--w-semibold);
}

.details-stamps {
  display: flex;
  gap: var(--space-2);
}

.stamp {
  width: 22px;
  height: 22px;
  border: 1.5px dashed var(--stamp-line);
  border-radius: 50%;
}

.stamp.is-on {
  border: 0;
  background: var(--accent);
  box-shadow: var(--shadow-badge);
}

.details-norecord {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  border: 1.5px dashed var(--free-line);
  background: var(--free-bg);
}



.details-section--loading .skel-line {
  height: 14px;
}

.details-inline-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--warn-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.details-inline-error svg {
  width: var(--icon-control);
  height: var(--icon-control);
}

.details-section--error .btn {
  justify-self: start;
}

.details-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--panel-divider);
}

.details-primary {
  width: 100%;
}

/* Wraps at larger text sizes instead of running past the panel. */
.details-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.details-secondary .btn {
  flex: 1 1 0;
  min-width: fit-content;
  padding: 0 var(--space-3);
}

/* "Mais": a popover menu anchored above its button, flipping below when there is no room. */
.details-menu {
  position: fixed;
  inset: auto;
  right: anchor(right);
  bottom: anchor(top);
  position-try-fallbacks: flip-block;
  min-width: 232px;
  max-width: calc(100vw - 24px);
  margin: 0 0 var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  font-family: var(--font-sans);
}

.details-menu button:hover {
  background: var(--panel-well);
}

.details-menu .is-danger {
  color: var(--danger-ink);
}

/* Without anchor positioning: a fixed place above the footer. */
@supports not (anchor-name: --a) {
  .details-menu {
    inset: auto 32px 88px auto;
    margin: 0;
  }
}

/* Motion only for panels opened by script; a statically open panel (DESIGN.html) never animates. */
.details[data-animate] .details-sheet {
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.details[data-animate]::backdrop {
  transition: opacity var(--dur-base) var(--ease-out);
}

@starting-style {
  .details[data-animate][open] .details-sheet {
    transform: translateX(28px);
    opacity: 0;
  }

  .details[data-animate][open]::backdrop {
    opacity: 0;
  }
}

.details[data-closing] .details-sheet {
  transform: translateX(28px);
  opacity: 0;
}

.details[data-closing]::backdrop {
  opacity: 0;
}

@media (max-width: 699px) {
  .details {
    inset: auto 0 0 0;
    width: 100%;
    padding: 0;
  }

  .details-sheet {
    height: auto;
    max-height: 90vh;
    border-bottom: 0;
    border-radius: var(--r-surface) var(--r-surface) 0 0;
  }

  .details-handle {
    display: block;
    width: 40px;
    height: 5px;
    margin: var(--space-2) auto 0;
    border-radius: 3px;
    background: var(--handle);
  }

  .details-head {
    padding: var(--space-2) var(--space-2) var(--space-3) var(--space-4);
  }

  .details-body {
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-4);
  }

  .details-actions {
    padding: var(--space-3) var(--space-3) calc(12px + var(--safe-bottom));
  }

  @supports not (anchor-name: --a) {
    .details-menu {
      inset: auto 12px 132px auto;
    }
  }

  @starting-style {
    .details[data-animate][open] .details-sheet {
      transform: translateY(48px);
    }
  }

  .details[data-closing] .details-sheet {
    transform: translateY(48px);
  }
}

/* Messages about this booking (D-020): WhatsApp-like ticks; read is accent, failed says why. */
.msg-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.msg {
  display: grid;
}

/* The status rides beside its word: a small tick, never a tile. */
.msg-main small {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.msg-tick {
  display: inline-flex;
  color: var(--ink-2);
}

.msg-tick svg {
  width: 15px;
  height: 15px;
}

.msg[data-status="read"] .msg-tick {
  color: var(--accent-soft-ink);
}

.msg[data-status="failed"] .msg-tick {
  color: var(--danger-ink);
}

.msg-main {
  display: grid;
  gap: 2px;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.msg-error {
  margin-top: var(--space-1);
  color: var(--danger-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Quick search (⌘K): a centred dialog on tablet and desktop, full screen on the phone. */

.search-dialog {
  position: fixed;
  inset: 10vh 0 auto;
  z-index: 45;
  width: min(640px, calc(100% - 48px));
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.search-dialog::backdrop {
  background: var(--scrim);
}

.search-panel {
  display: flex;
  flex-direction: column;
  max-height: min(600px, 70vh);
  overflow: hidden;
  border: 1px solid var(--panel-line);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}

.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 64px;
  padding: 0 var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--panel-divider);
  color: var(--ink-2);
}

/* The field is the only control that holds focus; its underline is the focus indicator. */
.search-field:focus-within {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.search-field > svg {
  width: 22px;
  height: 22px;
}

.search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-medium);
  outline: none;
}

.search-input::placeholder {
  color: var(--ink-3);
}

.search-esc,
.search-foot kbd {
  padding: 1px var(--space-2);
  border: 1px solid var(--control-line);
  border-radius: var(--r-sm);
  background: var(--panel-well);
  box-shadow: inset 0 -1px 0 var(--control-line);
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.search-cancel {
  display: none;
}

.search-note {
  margin: var(--space-3) var(--space-3) 0;
}

.search-list {
  flex: 1;
  min-height: 0;
  padding: var(--space-1) var(--space-2) var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-group {
  padding-top: var(--space-2);
}

.search-group-label {
  padding: var(--space-2) var(--space-3) var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.search-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-lg);
  cursor: pointer;
}

.search-option.is-active {
  background: var(--option-active);
}

.search-avatar {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

/* An action is a rounded square where a person is a circle. */
.search-icon {
  border-radius: var(--r-md);
  background: var(--panel-well);
  color: var(--ink-2);
}

.search-option-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.search-option-title,
.search-option-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-option-aside {
  flex-shrink: 0;
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.search-time {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.search-option mark {
  padding: 0 1px;
  border-radius: 4px;
  background: var(--mark-bg);
  color: inherit;
}

.search-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-4) var(--space-3);
  text-align: center;
}

.search-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-1);
  border-radius: var(--r-lg);
  background: var(--panel-well);
  box-shadow: var(--shadow-well-in);
  color: var(--ink-2);
}

.search-empty-icon svg {
  width: 24px;
  height: 24px;
}

/* Outside the scrolling list, so it stays in view and results never shift when it goes. */
.search-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--panel-divider);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.search-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--panel-divider);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
  to {
    transform: rotate(360deg);
  }
}

.search-foot {
  display: none;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--panel-divider);
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
}

.search-foot kbd {
  margin-right: 2px;
}

/* Motion only when opened by script. */
.search-dialog[data-animate] .search-panel {
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.search-dialog[data-animate]::backdrop {
  transition: opacity var(--dur-fast) var(--ease-out);
}

@starting-style {
  .search-dialog[data-animate][open] .search-panel {
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
  }

  .search-dialog[data-animate][open]::backdrop {
    opacity: 0;
  }
}

.search-dialog[data-closing] .search-panel {
  transform: translateY(-8px) scale(0.98);
  opacity: 0;
}

.search-dialog[data-closing]::backdrop {
  opacity: 0;
}

@media (max-width: 699px) {
  .search-dialog {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .search-panel {
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .search-field {
    height: calc(60px + var(--safe-top));
    padding: var(--safe-top) var(--space-2) 0 var(--space-4);
  }

  .search-esc,
  .search-foot {
    display: none;
  }

  .search-cancel {
    display: block;
    height: var(--control-s);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--accent-soft-ink);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    font-weight: var(--w-semibold);
    cursor: pointer;
  }

  .search-option-aside {
    display: none;
  }
}

/* Keyboard hints (esc, the arrows, return) only where there is a keyboard, as in sheets: a touch
   iPad closes with "Cancelar" and has no row picked in advance. */
@media (min-width: 700px) {
  .search-esc {
    display: none;
  }

  .search-cancel {
    display: block;
    height: var(--control-s);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--accent-soft-ink);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    font-weight: var(--w-semibold);
    cursor: pointer;
  }

  html:not([data-keyboard]) .search-option.is-active:not(:hover) {
    background: transparent;
  }

  html[data-keyboard] .search-esc {
    display: inline;
  }

  html[data-keyboard] .search-foot {
    display: flex;
  }

  html[data-keyboard] .search-cancel {
    display: none;
  }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .search-esc {
    display: inline;
  }

  .search-foot {
    display: flex;
  }

  .search-cancel {
    display: none;
  }

  html:not([data-keyboard]) .search-option.is-active:not(:hover) {
    background: var(--option-active);
  }
}

/* One-step sheet: the details panel's modal shell (side panel on tablet and desktop, bottom sheet on
   the phone), with one question per step. Options are at least 56px tall; a tap answers.
   Every part of the sheet starts at one inset (--sheet-inset): the recap, the question, the content
   and the footer share a left edge, and the back button's arrow sits on it (D-048). */

.sheet {
  --sheet-inset: var(--space-5);
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 40;
  width: min(480px, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.sheet::backdrop {
  background: var(--scrim);
}

.sheet-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: var(--r-surface);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}

.sheet-handle {
  display: none;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 72px;
  padding: var(--space-3) calc(var(--sheet-inset) - 12px) var(--space-3) var(--sheet-inset);
}

/* The arrow, not the button's box, lines up with the content; on a first step the button keeps its
   place unseen, so the title does not move between steps. */
.sheet-back {
  margin-left: -12px;
}

.sheet-back[inert] {
  visibility: hidden;
}

.sheet-heading {
  flex: 1;
  min-width: 0;
}

/* A flow's name over its steps: a card title. */
.sheet-title {
  overflow: hidden;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A one-step sheet: its question is the title, a screen title (after .sheet-title, which it extends). */
.sheet-title--q {
  margin: 0;
  font-size: var(--text-screen);
  line-height: var(--lh-screen);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
  white-space: normal;
}

.sheet-title--q:focus,
.sheet-title--q:focus-visible {
  outline: none;
}

.sheet-count {
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.sheet-resumed {
  margin: 0 var(--sheet-inset) var(--space-2);
  color: var(--ok-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

/* The recap: answers so far as one quiet line, in the flow's order; each jumps back to its step.
   It scrolls sideways rather than wrapping. A preset (settled by the opener) wears a pin. */
.sheet-chips {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0 var(--sheet-inset) var(--space-1);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.sheet-chips[hidden] {
  display: none;
}

.sheet-chips li {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.sheet-chips li + li::before {
  width: 1px;
  height: 16px;
  margin: 0 var(--space-1);
  background: var(--panel-divider);
  content: "";
}

.sheet-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-medium);
  white-space: nowrap;
  cursor: pointer;
}

.sheet-chips li:first-child .sheet-chip {
  margin-left: calc(-1 * var(--space-2));
}

.sheet-chip:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sheet-chip svg {
  width: 14px;
  height: 14px;
}

.sheet-step {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--panel-divider);
}

.sheet-step[hidden] {
  display: none;
}

.sheet-scroll {
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-5) var(--sheet-inset);
  overflow-y: auto;
  mask-image: var(--scroll-fade);
  overscroll-behavior: contain;
}

.sheet-q {
  margin: 0;
  font-size: var(--text-screen);
  line-height: var(--lh-screen);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.sheet-q:focus,
.sheet-q:focus-visible {
  outline: none;
}

.sheet-hint {
  margin-top: -4px;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

/* Options: one tap answers. The suggested one comes first and says so. */
.sheet-options {
  display: grid;
  gap: var(--space-2);
}

.sheet-group {
  display: grid;
  gap: var(--space-2);
}

.sheet-group + .sheet-group {
  margin-top: var(--space-2);
}

.sheet-group-label {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.sheet-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--control-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sheet-option:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-control-hover);
}

/* Chosen: tint, a 2px edge and the check. The edge's second pixel is drawn inside, so the content
   does not move. A suggestion is not drawn as chosen: it comes first. */
.sheet-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-option-on);
}

.sheet-option:disabled {
  box-shadow: none;
  color: var(--ink-3);
  cursor: default;
}

.sheet-option--danger .sheet-option-label {
  color: var(--danger-ink);
}

/* Number keys show only with a keyboard (html[data-keyboard], or a desk computer); a touch screen
   does not show them. */
.sheet-key {
  display: none;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--panel-well);
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-tight);
  font-weight: var(--w-semibold);
}

.sheet-avatar {
  background: var(--t-solid, var(--accent-soft));
  color: var(--t-on, var(--accent-soft-ink));
}

.sheet-option-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.sheet-option-label,
.sheet-option-meta {
  overflow-wrap: anywhere;
}

.sheet-option-aside {
  flex-shrink: 0;
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.sheet-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--check-line);
  border-radius: var(--r-sm);
  background: var(--panel-well);
  box-shadow: var(--shadow-well-in);
  color: transparent;
}

.sheet-check svg {
  width: 18px;
  height: 18px;
  stroke-width: 3;
}

.sheet-option[aria-pressed="true"] .sheet-check {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: var(--shadow-check-on);
  color: var(--accent-ink);
}

/* Times: a grid of large buttons. */
.sheet-options--grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr));
}

.sheet-options--grid .sheet-group {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr));
}

.sheet-options--grid .sheet-group-label {
  grid-column: 1 / -1;
}

.sheet-options--grid:is([data-n="2"], [data-n="4"]),
.sheet-options--grid .sheet-group:is([data-n="2"], [data-n="4"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sheet-options--grid[data-n="3"],
.sheet-options--grid .sheet-group[data-n="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sheet-options--grid .sheet-option {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.sheet-options--grid .sheet-option-main {
  align-items: center;
}

.sheet-options--grid .sheet-key {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  width: 20px;
  height: 20px;
}

.sheet-options--grid .sheet-option-label {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-variant-numeric: tabular-nums;
}

.sheet-keys {
  display: none;
  padding: var(--space-3) var(--sheet-inset) var(--space-4);
  color: var(--ink-3);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .sheet-key {
    display: grid;
  }

  .sheet-keys {
    display: block;
  }
}

html[data-keyboard] .sheet-key {
  display: grid;
}

html[data-keyboard] .sheet-keys {
  display: block;
}

.sheet-foot {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--sheet-inset) var(--space-4);
  border-top: 1px solid var(--panel-divider);
}

.sheet-note {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.sheet a {
  color: var(--accent-soft-ink);
  font-weight: var(--w-semibold);
  text-underline-offset: 2px;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The primary takes the room; a secondary is as wide as its words. */
.sheet-actions .btn {
  flex: 0 0 auto;
}

.sheet-actions .sheet-primary {
  flex: 1 1 auto;
}

.sheet-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sheet-spin 0.8s linear infinite;
}

@keyframes sheet-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Custom step bodies: summaries, fields, consent, amounts and status. */
.sheet-summary {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  background: var(--panel-well);
}

.sheet-summary > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.sheet-summary dt {
  color: var(--ink-2);
}

.sheet-summary dd {
  margin: 0;
  font-weight: var(--w-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sheet-summary .is-total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--panel-divider);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.sheet-summary .is-total dt,
.sheet-summary .is-total dd {
  color: var(--ink);
  font-weight: var(--w-bold);
}

.sheet-summary .is-credit dd {
  color: var(--ok-ink);
}

/* A note with its own action beside it (the invoice on the one-screen Cobrar: Alterar). */
.sheet-note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Forms: label → field 8px, field → helper 6px, one field group to the next 24px (D-048). */
.sheet-form {
  display: grid;
  gap: var(--space-6);
}

.sheet-field {
  display: grid;
  gap: var(--space-2);
}

.sheet-field-hint,
.sheet-field-error {
  margin-top: -2px;
}

/* A unit sits inside the field, after the value. */
.sheet-input-wrap {
  position: relative;
  display: block;
}

.sheet-input-wrap .sheet-input {
  padding-right: var(--space-12);
}

.sheet-input-suffix {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  transform: translateY(-50%);
  pointer-events: none;
}

/* A search field: the magnifier inside, the text after it. */
.sheet-search {
  position: relative;
  display: block;
}

.sheet-search > svg {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: 20px;
  height: 20px;
  color: var(--ink-2);
  transform: translateY(-50%);
  pointer-events: none;
}

.sheet-search-input {
  padding-left: var(--space-12);
}

.sheet-field label,
.sheet-field .sheet-label {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
}

.sheet-input {
  width: 100%;
  min-width: 0;
}

.sheet-field[data-invalid] .sheet-input {
  border: 2px solid var(--danger-ink);
}

.sheet-field-hint {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.sheet-field-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--danger-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.sheet-field-error svg {
  width: 16px;
  height: 16px;
}

/* Rows of checkboxes sit closer to each other than to the note under them. */
.sheet-checks {
  display: grid;
  gap: var(--space-3);
}

/* Facts stacked with their sign (anonymise preview). */
.sheet-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--panel-well);
}

.sheet-fact svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
  margin-top: 2px;
  color: var(--ink-2);
}

.sheet-fact[data-kind="delete"] svg {
  color: var(--danger-ink);
}

.sheet-fact span {
  display: grid;
  gap: 2px;
}

/* Consent and settings: a whole row is the target; never pre-ticked. */
.sheet-check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--control-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--shadow-control);
  cursor: pointer;
}

.sheet-check-row input {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.sheet-check-row span {
  display: grid;
  gap: 2px;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.sheet-amount {
  display: grid;
  justify-items: center;
  gap: 2px;
  background: var(--panel-well);
  text-align: center;
}

.sheet-amount b {
  font-size: var(--text-figure);
  line-height: var(--lh-figure);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.sheet-amount span {
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.sheet-status {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-2) var(--space-2);
  text-align: center;
}

.sheet-status-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ok-soft);
  box-shadow: var(--shadow-well-ok);
  color: var(--ok-ink);
}

.sheet-status-icon svg {
  width: 30px;
  height: 30px;
}

.sheet-status p {
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.sheet-segments {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet-segment {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--panel-well);
}

.sheet-segment b {
  display: block;
}

/* Motion only for sheets opened by script; a statically open sheet (DESIGN.html) never animates. */
.sheet[data-animate] .sheet-panel {
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.sheet[data-animate]::backdrop {
  transition: opacity var(--dur-base) var(--ease-out);
}

@starting-style {
  .sheet[data-animate][open] .sheet-panel {
    transform: translateX(28px);
    opacity: 0;
  }

  .sheet[data-animate][open]::backdrop {
    opacity: 0;
  }
}

.sheet[data-closing] .sheet-panel {
  transform: translateX(28px);
  opacity: 0;
}

.sheet[data-closing]::backdrop {
  opacity: 0;
}

/* A sheet of one short form (a setting, a count) is as tall as its content on wide screens, so its
   button sits under the field rather than at the bottom of the screen. */
.sheet[data-compact] {
  inset: 0 0 auto auto;
}

.sheet[data-compact] .sheet-panel {
  max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
}

@media (max-width: 699px) {
  .sheet {
    --sheet-inset: var(--space-4);
    inset: auto 0 0 0;
    width: 100%;
    padding: 0;
  }

  .sheet[data-compact] {
    inset: auto 0 0 0;
  }

  /* Long flows keep one height on the phone, so the header does not jump between steps. */
  .sheet[data-size="tall"] .sheet-panel {
    height: calc(100dvh - 72px);
  }

  .sheet-panel {
    height: auto;
    max-height: 92vh;
    border-bottom: 0;
    border-radius: var(--r-surface) var(--r-surface) 0 0;
  }

  .sheet-handle {
    display: block;
    width: 40px;
    height: 5px;
    margin: var(--space-2) auto 0;
    border-radius: 3px;
    background: var(--handle);
  }

  .sheet-head {
    min-height: 64px;
    padding: var(--space-2) calc(var(--sheet-inset) - 12px) var(--space-2) var(--sheet-inset);
  }

  .sheet-scroll {
    padding: var(--space-4) var(--sheet-inset);
  }

  html[data-keyboard] .sheet-key,
  html[data-keyboard] .sheet-keys {
    display: none;
  }

  .sheet-foot {
    padding: var(--space-3) var(--sheet-inset) calc(12px + var(--safe-bottom));
  }

  @starting-style {
    .sheet[data-animate][open] .sheet-panel {
      transform: translateY(48px);
    }
  }

  .sheet[data-closing] .sheet-panel {
    transform: translateY(48px);
  }
}

/* Checkout: the invoice's outcome (issued, or queued in amber) with ways to send it, and the
   stamp card at the end. */
.sheet-outcome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3) var(--space-3);
  background: var(--ok-soft);
  box-shadow: var(--shadow-well-ok);
  color: var(--ok-ink);
}

.sheet-outcome[data-tone="warn"] {
  background: var(--warn-soft);
  box-shadow: var(--shadow-well-warn);
  color: var(--warn-ink);
}

.sheet-outcome-icon svg {
  width: 26px;
  height: 26px;
}

.sheet-outcome p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.sheet-outcome p > b {
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-semibold);
}

.sheet-outcome small {
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.sheet-outcome > .sheet-send-row,
.sheet-outcome > .sheet-outcome-note,
.sheet-outcome > .btn {
  grid-column: 1 / -1;
}

.sheet-outcome-note {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.sheet-outcome > .btn {
  justify-self: start;
}

.sheet-send-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sheet-send-row .btn {
  flex: 1 1 0;
  min-width: fit-content;
  padding-inline: var(--space-3);
}

/* The legal reason, one tap away: "Porquê?". */
.sheet-outcome-why {
  grid-column: 1 / -1;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.sheet-outcome-why summary {
  width: fit-content;
  min-height: 44px;
  align-content: center;
  color: var(--accent-soft-ink);
  font-weight: var(--w-semibold);
  cursor: pointer;
}

.sheet-loyalty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  background: var(--panel-well);
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-align: center;
}

.sheet-loyalty b {
  color: var(--ink);
  font-weight: var(--w-semibold);
}

/* "2 de 10 carimbos", and under it what today added and what is left. */
.sheet-loyalty p {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.sheet-stamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.sheet-stamps .stamp.is-new {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The new stamp lands only when a checkout really ends; reference copies stay still. */
.sheet[data-transient] .stamp.is-new {
  animation: stamp-in var(--dur-slow) var(--ease-spring) both;
}

@keyframes stamp-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[data-transient] .stamp.is-new {
    animation: none;
  }
}

/* Toasts: bottom centre of the content (right of the rail) on tablet and desktop, above the bottom
   bar and the FAB on the phone. Inside an open panel they sit just above its actions, never over
   them. One at a time. Solid panels, never glass; the text never moves while it is read. */

.desk {
  --toast-shift: calc(var(--nav-w) / 2);
}

.toast-region {
  position: fixed;
  z-index: 60;
  bottom: var(--toast-bottom, 24px);
  left: calc(50% + var(--toast-shift, 0px));
  display: grid;
  justify-items: center;
  width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--panel-line);
  /* The raised surface of a selected segment: lighter than the page in dark mode, so it stands off. */
  background: var(--seg-on);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  pointer-events: auto;
}

.toast-icon {
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.toast[data-kind="info"] .toast-icon {
  background: var(--panel-well);
  color: var(--ink-2);
}

/* Offline: amber, like the offline notice: saved on this device, sent later. */
.toast[data-kind="offline"] {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.toast[data-kind="offline"] .toast-icon {
  background: var(--panel-solid);
  color: var(--warn-ink);
}

.toast[data-kind="error"] {
  border-color: var(--danger-line);
}

.toast[data-kind="error"] .toast-icon {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

/* Moments are warm, not loud: the reward colours, no confetti, no sound. */
.toast[data-kind="moment"] .toast-icon {
  background: var(--reward-soft);
  color: var(--reward-ink);
}

.toast-text {
  /* Room for a short line beside the actions; longer text wraps above them, never one word alone. */
  flex: 1 1 14rem;
  min-width: 0;
  font-weight: var(--w-semibold);
  text-wrap: pretty;
}

.toast-text + .toast-action,
.toast-text + .toast-close {
  margin-left: auto;
}

.toast-more {
  margin-left: var(--space-2);
  background: var(--panel-well);
  color: var(--ink-2);
}

/* "Desfazer": an S action, like a row's (D-050). */
.toast-action {
  flex-shrink: 0;
  min-height: var(--control-s);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--r-control);
  background: var(--accent-soft);
  box-shadow: var(--shadow-tonal);
  color: var(--accent-soft-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  cursor: pointer;
}

.toast-close {
  color: var(--ink-2);
}

.toast[data-animate] {
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

@starting-style {
  .toast[data-animate] {
    transform: translateY(12px);
    opacity: 0;
  }
}

.toast[data-leaving] {
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
}

/* Reduced motion: fade only. */
[data-motion="reduced"] .toast[data-animate],
[data-motion="reduced"] .toast[data-leaving] {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .toast[data-leaving] {
    transform: none;
  }
}

/* In an open panel: part of the panel, above its actions. */
.toast-region--dialog {
  position: static;
  width: auto;
  margin: 0 var(--space-3) var(--space-2);
  transform: none;
}

.toast-region--dialog .toast {
  box-shadow: none;
}

@media (max-width: 699px) {
  .desk {
    --toast-shift: 0px;
    --toast-bottom: calc(92px + 64px + var(--safe-bottom));
  }
}

/* v32 (Round 9): moving bookings by dragging, booking again, and a tech's day on their own page.
   Only new selectors: nothing here changes a screen that has no `data-drag`. Loaded after the toast
   and before the business pages. Motion is off under reduced motion through base.css (every
   transition and animation), and nothing here depends on it: the drop preview, the verdict and the
   status line carry the same information still. */

/* ---- The grip: a sibling of the block, on its right edge ----
   A mouse can drag the block itself (a click still opens it); a touch drags by the grip only, so
   vertical scrolling over the blocks is untouched (touch-action stays pan-y on blocks). */

.appt-grip {
  --grip-h: calc(var(--dur) * var(--hour-row) - 4px);
  position: absolute;
  top: calc(var(--grid-top) + var(--start) * var(--hour-row) + 2px);
  right: 6px;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: start;
  width: 32px;
  height: min(var(--grip-h), 56px);
  padding: 0;
  border: 0;
  border-radius: 0 var(--r-appt) var(--r-appt) 0;
  background: transparent;
  color: var(--t-ink);
  cursor: grab;
  opacity: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.appt-grip svg {
  width: 18px;
  height: 18px;
  margin-top: var(--space-2);
  stroke-width: 2.25;
}

.appt[data-size="xs"] + .appt-grip svg {
  margin-top: 0;
  align-self: center;
}

/* Hidden until the block is hovered or has focus, and always there on a touch screen and in cases
   that show them. A focused grip is always visible. */
.appt:hover + .appt-grip,
.appt:focus-visible + .appt-grip,
.appt-grip:hover,
.appt-grip:focus-visible,
.cal[data-grips="shown"] .appt-grip {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .appt-grip {
    opacity: 1;
  }
}

/* A touch target is 44 px: on the phone, and on any touch screen. */
@media (max-width: 699px), (hover: none), (pointer: coarse) {
  .appt-grip {
    width: 44px;
  }
}

.appt-grip:hover {
  background: var(--t-soft);
}

.appt-grip:active {
  cursor: grabbing;
}

/* Room for the grip: the block's text stops short of it. */
.appt[data-drag="grip"],
.appt[data-drag="saving"],
.appt[data-drag="moved"] {
  padding-right: 36px;
  cursor: grab;
  touch-action: pan-y;
}

@media (max-width: 699px), (hover: none), (pointer: coarse) {
  .appt[data-drag="grip"] {
    padding-right: 48px;
  }
}

/* ---- Read-only: a block that has no grip says so by looking settled, never by being greyed out ---- */

.appt[data-drag="locked"] {
  cursor: default;
}

/* ---- While one is dragged ---- */

/* Where it was: an outline, so the day still reads. */
.appt[data-drag="origin"] {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  cursor: grabbing;
}

.appt[data-drag="origin"] > * {
  opacity: 0.45;
}

/* The block in the hand: raised, a little past the place it snaps to. */
.appt--lifted {
  z-index: 8;
  pointer-events: none;
  border-color: var(--accent);
  box-shadow: var(--panel-shadow);
  outline: 2px solid var(--accent);
  outline-offset: 0;
  cursor: grabbing;
  transition: top var(--dur-press) var(--ease-out), height var(--dur-press) var(--ease-out);
}

.appt--lifted[data-verdict="blocked"] {
  border-color: var(--danger);
  outline-color: var(--danger);
}

.appt--lifted[data-verdict="same"] {
  outline-style: dashed;
}

/* Where it would land (snapped to a quarter hour), with its time and, if refused, why. */
.drop-ghost {
  position: absolute;
  top: calc(var(--grid-top) + var(--start) * var(--hour-row) + 2px);
  right: 6px;
  left: 6px;
  z-index: 4;
  height: calc(var(--dur) * var(--hour-row) - 4px);
  border: 2px dashed var(--accent);
  border-radius: var(--r-appt);
  background: var(--accent-soft);
  pointer-events: none;
  transition: top var(--dur-press) var(--ease-out), height var(--dur-press) var(--ease-out);
}

.drop-ghost[data-verdict="blocked"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.drop-ghost[data-verdict="same"] {
  border-color: var(--grid-line);
  background: transparent;
}

.drop-label {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  background: var(--seg-on);
  box-shadow: var(--message-shadow);
  color: var(--ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.drop-label b {
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.drop-ghost[data-verdict="blocked"] .drop-label {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.drop-hint {
  font-weight: var(--w-semibold);
}

/* The column under the pointer takes a tint (it will take the booking, or refuses it). A column
   that cannot take this booking at all is hatched before anything is dropped on it. */
.cal-col[data-drop]::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.cal-col[data-drop="ok"]::before {
  background: var(--accent-soft);
  opacity: 0.55;
}

.cal-col[data-drop="blocked"]::before {
  background: var(--danger-soft);
  opacity: 0.6;
}

.cal-col[data-drop="declined"]::before,
.cal-col[data-drop="locked"]::before {
  background: repeating-linear-gradient(135deg, var(--gutter-ink) 0 1px, transparent 1px 10px);
  opacity: 0.28;
}

.cal-col[data-drop="declined"],
.cal-col[data-drop="locked"] {
  cursor: not-allowed;
}

/* The time it would take, in the hours column. */
.cal-drop-time {
  position: absolute;
  top: calc(var(--grid-top) + var(--start) * var(--hour-row));
  right: 6px;
  z-index: 4;
  padding: 1px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: var(--shadow-badge);
  color: var(--accent-ink);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}

.cal-drop-time[data-verdict="blocked"] {
  background: var(--danger);
  color: var(--danger-on);
}

.cal-drop-time[data-verdict="same"] {
  background: var(--panel-well);
  color: var(--ink-2);
}

/* On the phone only one column shows: the team card of the column it would go to takes the ring. */
.turn[data-drop="target"] {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* ---- What a release would do, or why not: a polite status line at the foot of the calendar ---- */

.drag-status {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-sizing: border-box;
  width: max-content;
  max-width: min(520px, calc(100% - 32px));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-lg);
  background: var(--seg-on);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  transform: translateX(-50%);
  pointer-events: none;
}

.drag-status[hidden] {
  display: none;
}

.drag-status svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  stroke-width: 2.25;
  color: var(--accent-soft-ink);
}

.drag-status small {
  display: block;
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
}

.drag-status[data-tone="blocked"] {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.drag-status[data-tone="blocked"] svg,
.drag-status[data-tone="blocked"] small {
  color: var(--danger-ink);
}

.drag-status[data-tone="busy"] svg {
  animation: drag-spin 900ms linear infinite;
}

@keyframes drag-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- After the drop ---- */

/* Saving: the block is already where it will be; a small spinner says it is not sent yet. */
.appt-flag--saving {
  background: var(--panel-well);
  color: var(--ink-2);
}

.appt-flag--saving svg {
  animation: drag-spin 900ms linear infinite;
}

.appt-flag--notify {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.appt[data-drag="saving"] {
  border-style: dashed;
}

.appt[data-drag="moved"] {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  animation: drag-settle 1400ms var(--ease-out) 1;
}

@keyframes drag-settle {
  from {
    outline-width: 5px;
    outline-color: var(--accent-soft);
  }
  to {
    outline-width: 2px;
    outline-color: var(--accent);
  }
}

/* ---- A tech's day on their own page (Equipa › Perfil): the same blocks, one column ---- */

.day-embed {
  --gutter: 56px;
  --grid-top: 12px;
  --col-min: 0px;
  --hour-row: calc(var(--hour) * var(--text-scale, 1));
  --cal-bg: var(--col-bg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  background: var(--col-bg);
  box-shadow: var(--shadow-well-in);
}

.day-embed .cal {
  height: min(560px, 70vh);
}

.day-embed .cal-head {
  display: none;
}

.day-embed .cal-grid {
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  min-width: 0;
}

.day-embed-note {
  margin: 0 0 var(--space-3);
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.day-embed-empty {
  display: grid;
  place-items: center;
  min-height: 160px;
  margin: 0;
  padding: var(--space-6);
  border: 1px dashed var(--grid-line);
  border-radius: var(--r-lg);
  color: var(--ink-2);
  text-align: center;
}

@media (max-width: 699px) {
  .day-embed {
    --gutter: 48px;
  }

  /* On the phone the day comes first: it is what the page is for when someone is there to move it. */
  .profile--day > .page-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .profile--day > .page-grid > .page-stack {
    display: contents;
  }

  .profile--day .profile-day {
    order: -1;
  }

  /* The round "+" sits at the right: the status line stops short of it. */
  .drag-status {
    right: 84px;
    bottom: var(--space-3);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    left: var(--space-3);
    width: auto;
    max-width: none;
    transform: none;
  }
}

/* ---- Hours a tech does not work: bands at the ends of their column ----
   Only in a calendar with drag. The owner changes them right there (a band opens "Horário e serviços");
   a drop on one is refused with the tech's hours. */

.hours-band {
  position: absolute;
  top: calc(var(--grid-top) + var(--start) * var(--hour-row));
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  height: calc(var(--dur) * var(--hour-row));
  padding: var(--space-2);
  border: 0;
  background: repeating-linear-gradient(135deg, var(--gutter-ink) 0 1px, transparent 1px 10px);
  background-color: var(--panel-well);
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  text-align: left;
}

button.hours-band {
  cursor: pointer;
}

button.hours-band:hover {
  background-color: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.hours-band-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  box-shadow: var(--shadow-chip);
}

.hours-band-label svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}

/* The services in "Horário e serviços": a group of check rows under a legend. */
fieldset.sheet-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.sheet-field legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
}

/* Round 10 (D-056): amounts typed at checkout, the day for another visit, and a session in the client's
   record with its photos. Only new selectors: nothing here changes a screen that does not use them.
   Loaded after the drag styles. Nothing depends on motion; the upload's progress is a bar with a text. */

/* ---- A reason chosen from a few: a radio group drawn as chips ---- */

.sheet-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sheet-pill {
  min-height: var(--control-s);
  padding: 0 var(--space-4);
  border: 1px solid var(--control-line);
  border-radius: var(--r-pill);
  background: var(--panel-solid);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
  cursor: pointer;
}

.sheet-pill:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-control-hover);
}

.sheet-pill[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-option-on);
  color: var(--accent-soft-ink);
}

.sheet-field[data-invalid] .sheet-pills .sheet-pill {
  border-color: var(--danger-ink);
}

/* The box beside the chips keeps the breathing room of the grid above it. */
.sheet-form--box {
  margin-top: var(--space-4);
}

/* ---- The history of a visit: the whole row opens the session ---- */

.page-row--link .page-row-open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--row-min);
  min-width: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-row--link .page-row-open > svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
  color: var(--ink-3);
}

.session-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--badge);
  padding: 0 var(--space-2);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  box-shadow: var(--shadow-chip);
  color: var(--accent-soft-ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
}

.session-badge svg {
  width: var(--icon-chip);
  height: var(--icon-chip);
}

/* ---- The session ---- */

.session {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-2);
}

.session-section {
  display: grid;
  gap: var(--space-3);
}

.session-h {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-bold);
}

.session-facts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.session-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.session-facts dt {
  color: var(--ink-2);
}

.session-facts dd {
  margin: 0;
  font-weight: var(--w-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.session-facts .is-total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--panel-divider);
}

.session-facts .is-total dt,
.session-facts .is-total dd {
  color: var(--ink);
  font-weight: var(--w-bold);
}

.session-note {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.session-photos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.session-count {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.session-private {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.session-private svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.session-empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--panel-divider);
  border-radius: var(--r-lg);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.session-empty svg {
  flex-shrink: 0;
  width: var(--icon-nav);
  height: var(--icon-nav);
}

.session-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-lg);
  background: var(--warn-soft);
  box-shadow: var(--shadow-banner);
  color: var(--warn-ink);
}

.session-consent > svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
}

.session-consent p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.session-consent small {
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

/* ---- Photos: a grid of squares ---- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--panel-well);
  box-shadow: var(--shadow-sm);
  color: var(--ink-2);
  cursor: pointer;
}

button.photo-tile:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-control-hover);
}

.photo-tone {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--tone, var(--accent-soft));
  color: var(--tone-ink, var(--accent-soft-ink));
}

.photo-tone svg {
  display: block;
  width: 100%;
  height: 100%;
}

.photo-tone[data-tone="0"] {
  --tone: var(--accent-soft);
  --tone-ink: var(--accent-soft-ink);
}

.photo-tone[data-tone="1"] {
  --tone: var(--warn-soft);
  --tone-ink: var(--warn-ink);
}

.photo-tone[data-tone="2"] {
  --tone: var(--ok-soft);
  --tone-ink: var(--ok-ink);
}

.photo-tone[data-tone="3"] {
  --tone: var(--reward-soft);
  --tone-ink: var(--reward-ink);
}

.photo-tone[data-tone="4"] {
  --tone: var(--panel-well);
  --tone-ink: var(--ink-3);
}

.photo-tone[data-tone="5"] {
  --tone: var(--danger-soft);
  --tone-ink: var(--danger-ink);
}

.photo-tile--busy .photo-tone,
.photo-tile--failed .photo-tone {
  opacity: 0.45;
}

.photo-tile--busy,
.photo-tile--failed {
  cursor: default;
}

.photo-tile--busy > b,
.photo-fail {
  position: absolute;
  inset: auto var(--space-2) var(--space-3);
  color: var(--ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  text-align: center;
}

.photo-progress {
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  background: var(--panel-divider);
}

.photo-progress::after {
  content: "";
  display: block;
  width: var(--p, 0%);
  height: 100%;
  background: var(--accent);
}

.photo-fail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  color: var(--danger-ink);
}

.photo-fail svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* One photo, larger. */
.photo-view {
  position: relative;
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.photo-view-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.photo-view--small .photo-view-frame {
  max-width: 12rem;
  aspect-ratio: 1;
}

.photo-view-nav {
  position: absolute;
  top: calc(50% - var(--space-6));
  right: var(--space-3);
  left: var(--space-3);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.photo-view-nav .icon-btn {
  pointer-events: auto;
  border: 1px solid var(--control-line);
  background: var(--panel-solid);
  box-shadow: var(--shadow-control);
}

.photo-view-nav .icon-btn:disabled {
  opacity: 0.4;
}

/* ---- Round 11: a link drawn as a button (Abrir no WhatsApp, Abrir a ficha) keeps its button look inside a sheet ---- */

.sheet a.btn {
  text-decoration: none;
}

.sheet a.btn-primary {
  color: var(--accent-ink);
}

.sheet a.btn-tonal {
  color: var(--accent-soft-ink);
}

/* Round 12 (D-060): a tech's own clients, what she holds, the messages she opened. Only new selectors: nothing here changes a screen that does not use them. */

/* ---- Clientes: "As minhas" / "Todas" is a pair of chips above the search ---- */

.clients-scope {
  justify-self: start;
}

.clients-scope .page-tab[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 699px) {
  .clients-scope {
    flex-wrap: nowrap;
    justify-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* ---- O meu dia: the messages she opened, grouped by when ---- */

.myday-sub {
  margin: var(--space-3) 0 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.myday-colour-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--panel-well);
}

.myday-main small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Negócio › Stock: who took some of it, OCR barcode scanner & session BOM ---- */

.page-row-main .biz-held {
  display: block;
  color: var(--accent-soft-ink);
}

.page-row-main .biz-barcode,
.page-row-main small:has(> .shade-dot) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.stock-scanner-card,
.stock-usage-card {
  border-color: var(--accent-line);
}

.stock-ocr-well {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--panel-well);
}

.biz-ocr-presets {
  gap: var(--space-1);
}

.biz-ocr-presets .page-tab {
  padding: 0 var(--space-2);
  font-size: var(--text-detail);
}

.stock-ocr-viewfinder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.stock-ocr-badge {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.stock-ocr-badge svg {
  width: var(--icon-control);
  height: var(--icon-control);
}

.stock-ocr-status {
  display: grid;
  min-width: 0;
}

.stock-ocr-status b {
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
}

.stock-ocr-status small {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.stock-ocr-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.stock-ocr-form {
  display: grid;
  gap: var(--space-3);
}

.stock-ocr-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.stock-ocr-input-row .sheet-input {
  flex: 1 1 14rem;
}

.stock-ocr-audit-box,
.stock-ocr-create-box {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--panel-divider);
}

.stock-ocr-create-box[hidden],
.stock-ocr-audit-box[hidden] {
  display: none;
}

.stock-ocr-audit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.stock-ocr-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.stock-ocr-delta {
  min-width: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--panel-solid);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.stock-ocr-create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-3);
}

.stock-bom-summary {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  background: var(--panel-well);
}

/* Round 13 (D-062): security incidents, a tech's team calendar, the legal note. Only new selectors: nothing here changes a screen that does not use them. */

/* ---- The legal note: calm information, not a warning ---- */

.legal-note {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--panel-divider);
  border-radius: var(--r-lg);
  background: var(--panel-well);
  box-shadow: var(--shadow-well-in);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.legal-note p {
  margin: 0;
  text-wrap: pretty;
}

.legal-note-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
}

.legal-note svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.legal-note--short {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.legal-note--short svg {
  margin-top: 2px;
}

/* ---- An incident's page ---- */

.breach-clock[data-tone="late"] {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.breach-clock[data-tone="closed"] {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.breach-step {
  display: grid;
  flex: 1;
  justify-items: start;
  gap: var(--space-2);
  min-width: 0;
}

.breach-step > .page-hint,
.breach-step > .sheet-field,
.breach-step > .breach-copy {
  justify-self: stretch;
  margin: 0;
}

.breach-step small {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.breach-verify {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.breach-copy {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--panel-well);
  box-shadow: var(--shadow-well-in);
}

.breach-copy figcaption {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.breach-copy p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.breach-copy .btn {
  justify-self: start;
}

.breach-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breach-tags li {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  box-shadow: var(--shadow-chip);
  color: var(--accent-soft-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.breach-risk {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  box-shadow: var(--shadow-chip);
  color: var(--ok-ink);
  font-weight: var(--w-semibold);
}

.breach-risk[data-risk="high"] {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.report-btn {
  justify-self: start;
}

/* A log line with its report button: the button sits at the end of the line when there is room and drops under the text, at the start, when there is not (a phone). */
.page-row--report {
  flex-wrap: wrap;
  row-gap: var(--space-2);
  padding-block: var(--space-3);
}

.page-row--report > .page-row-main {
  flex: 1 1 12rem;
}

/* ---- A tech's calendar with the team: the choice, and a colleague's booking as a time and a service ---- */

.desk-scope {
  flex-shrink: 0;
}

.appt--team {
  cursor: default;
  opacity: 0.85;
}

.desk.desk--scope {
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "nav top"
    "nav scope"
    "nav cal";
}

.desk-scope-row {
  grid-area: scope;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin: 0 var(--space-5) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--shadow-card);
}

.desk-team-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.desk-team-note svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

@media (max-width: 699px) {
  .desk.desk--scope {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top"
      "scope"
      "cal"
      "nav";
  }

  .desk-scope-row {
    margin: 0 var(--space-3) var(--space-2);
  }
}

/* The record of processing with its legal note is taller than the sheet at 200% text: the head keeps its height and the body scrolls. */
.sheet[data-flow="records"] .sheet-head {
  flex-shrink: 0;
}

/* The owner's business area (D-033 to D-036): figures, plain HTML charts, costs, the team, stock. */

.biz-periods {
  margin-top: -4px;
}

.biz-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--space-3);
}

.biz-figure {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
}

.biz-figure-label {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.biz-figure-value {
  font-size: var(--text-page);
  line-height: var(--lh-page);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.biz-figure-meta {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

/* The figure to read first is tinted, not outlined: an outline reads as selected (D-048). */
.biz-figure.is-result {
  border-color: transparent;
  background: var(--accent-soft);
  box-shadow: var(--shadow-tonal), var(--shadow-card);
}

.biz-skel-value {
  width: 70%;
  height: 28px;
  margin: var(--space-1) 0;
}

.biz-skel-chart {
  height: 180px;
}

/* Columns: one series; the bars stop short of their slot, rounded only at the data end. */
.biz-chart {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  height: calc(200px + 2rem);
}

.biz-axis {
  position: relative;
  width: 3.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.biz-axis li {
  position: absolute;
  right: 0;
  bottom: var(--y);
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-variant-numeric: tabular-nums;
  transform: translateY(50%);
}

.biz-cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  align-items: end;
  margin: 0;
  padding: 0 0 1.5rem;
  list-style: none;
  background-image: linear-gradient(var(--chart-grid), var(--chart-grid));
  background-position: 0 calc(100% - 1.5rem);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.biz-col {
  position: relative;
  display: grid;
  min-width: 0;
  height: 100%;
}

.biz-col-hit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
}

.biz-col-bar {
  display: block;
  width: min(24px, 64%);
  height: var(--h);
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--chart-bar);
  box-shadow: var(--shadow-bar);
}

.biz-col:has(.biz-col-value) .biz-col-bar {
  background: var(--accent);
}

.biz-col.is-partial .biz-col-bar {
  background: var(--chart-bar-partial);
}

.biz-col-hit:hover .biz-col-bar,
.biz-col-hit:focus-visible .biz-col-bar {
  filter: brightness(1.12);
}

.biz-col-hit:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* The value floats above its bar, so a wide label never widens the column or pushes the bar. */
.biz-col-value {
  position: absolute;
  bottom: calc(var(--h) + var(--space-1));
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  white-space: nowrap;
}

.biz-col-x {
  position: absolute;
  right: 0;
  bottom: -1.5rem;
  left: 0;
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  text-align: center;
}

.biz-col.is-closed .biz-col-x {
  color: var(--ink-3);
}

.biz-tip {
  position: absolute;
  z-index: 2;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  background: var(--panel-solid);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semibold);
  pointer-events: none;
  white-space: nowrap;
}

.biz-table summary {
  min-height: 44px;
  padding: var(--space-3) 0;
  color: var(--accent-soft-ink);
  font-weight: var(--w-semibold);
  cursor: pointer;
}

.biz-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-variant-numeric: tabular-nums;
}

.biz-table th,
.biz-table td {
  padding: var(--space-2) var(--space-1);
  border-top: 1px solid var(--panel-divider);
  font-weight: var(--w-regular);
  text-align: left;
}

.biz-table td {
  text-align: right;
}

/* Shares: label, bar, value at its tip. */
.biz-bars {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.biz-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.biz-bar {
  display: block;
  height: 12px;
}

.biz-bar span {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--chart-bar);
  box-shadow: var(--shadow-bar);
}

.biz-bar-value {
  display: grid;
  justify-items: end;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.biz-bar-value small {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.biz-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-3);
  margin: 0;
}

.biz-facts div {
  display: grid;
  gap: 2px;
}

.biz-facts dt {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.biz-facts dd {
  display: grid;
  margin: 0;
  font-size: var(--text-title);
  line-height: var(--lh-title);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.biz-facts dd small {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  letter-spacing: 0;
}

/* Costs. */
.page-row-value small {
  display: block;
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.biz-receipt.is-missing,
.biz-missing {
  color: var(--warn-ink);
}

/* The team: one block per tech, in roster order. */
.biz-team {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.biz-tech {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--panel-divider);
}

.biz-tech:first-child {
  padding-top: 0;
  border-top: 0;
}

.biz-tech-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.biz-tech-name b {
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.biz-tech-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.biz-tech-figures div {
  display: grid;
}

.biz-tech-figures dt {
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.biz-tech-figures dd {
  margin: 0;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.biz-tech.is-total {
  border-top: 0;
  background: var(--panel-well);
}

/* Stock. */
.biz-products {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.biz-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--panel-divider);
}

.biz-product:first-child {
  border-top: 0;
}

.biz-status {
  display: grid;
  justify-items: end;
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
}

.biz-status[data-status="low"] {
  color: var(--warn-ink);
}

.biz-status[data-status="out"] {
  color: var(--danger-ink);
}

.biz-status small {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
}

.biz-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.biz-step {
  border: 1px solid var(--control-line);
  background: var(--panel-well);
  box-shadow: var(--shadow-control);
}

.biz-step:disabled {
  box-shadow: none;
  opacity: 0.4;
}

.biz-qty {
  display: grid;
  justify-items: center;
  min-width: 4.5rem;
  min-height: var(--control-s);
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  cursor: pointer;
}

.biz-qty b {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.biz-qty small {
  color: var(--ink-2);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
}

.biz-qty:focus-visible {
  outline: 3px solid var(--focus);
}

.biz-products[data-filter="low"] .biz-product[data-status="ok"] {
  display: none;
}

.biz-group-total {
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-align: right;
}

/* The shopping list's summary: the estimate, then suppliers and products. */
.biz-shopping-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  background: var(--panel-well);
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* Short is amber, exact is green, over is plain: the colour says whether to look again. */
.biz-diff[data-tone="short"] {
  color: var(--warn-ink);
}

.biz-diff[data-tone="ok"] {
  color: var(--ok-ink);
}

.biz-shopping-total b {
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 699px) {
  .biz-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd last figure takes the whole row instead of standing alone beside a gap. */
  .biz-figure:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .biz-figure-value {
    font-size: var(--text-title);
    line-height: var(--lh-title);
  }

  /* The name gets the whole width; its status and the stepper share the line below. */
  .biz-product {
    grid-template-areas:
      "main main"
      "status stepper";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .biz-product > .page-row-main {
    grid-area: main;
  }

  .biz-product > .biz-status {
    grid-area: status;
    justify-items: start;
  }

  .biz-stepper {
    grid-area: stepper;
  }

  .biz-col:nth-child(even) .biz-col-x {
    visibility: hidden;
  }

  .biz-bar-row {
    grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) auto;
  }
}

/* Round 5 pages (D-042): the client list, Espera, Mais, a tech's earnings, the settings sections,
   the sign-in page and the public privacy notice. They reuse the page shell (page.css): cards,
   rows, tabs and facts; this adds what lists need. */

/* A message in place of a page's content: empty, nothing found, failed to load. */
.page-message {
  justify-items: start;
  max-width: 32.5rem;
}

.page-message .btn {
  margin-top: var(--space-2);
}

/* The calendar's notice sits in its grid area; on a page it is just a block in the flow. */
.page-content .notice,
.link-main .notice {
  grid-area: auto;
  margin: 0;
}

.page-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* A row that opens something: the whole row is the link. */
.page-row--link {
  padding: 0;
}

.page-row--link a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  color: inherit;
  text-decoration: none;
}

.page-row--link a > svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
  color: var(--ink-3);
}

/* ---- Search field on a page ---- */

.page-search {
  display: flex;
  flex: 1 1 18rem;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0 var(--space-4);
  border: 1px solid var(--field-line);
  background: var(--search-bg);
  box-shadow: var(--shadow-field);
  color: var(--ink-2);
}

.page-search svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
}

.page-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-medium);
}

.page-search input:focus {
  outline: none;
}

/* ---- Clientes ---- */

.clients-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.clients-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.clients-count {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.clients-list,
.wait-list {
  display: grid;
  margin: 0;
  padding: 0;
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--panel-solid);
  box-shadow: var(--shadow-card);
  list-style: none;
}

/* The rows' hover follows the list's rounded corners. */
.client-row:first-child .client-row-link {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.client-row:last-child .client-row-link {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Nothing shows (no match, or an empty filter): the list's frame goes too. */
.clients-list:not(:has(.client-row:not([hidden]))) {
  display: none;
}

.client-row + .client-row,
.wait-row + .wait-row {
  border-top: 1px solid var(--panel-divider);
}

.client-row-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
}

.client-row-link:hover {
  background: var(--panel-well);
}

.client-row-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

/* A person's name opens their profile (D-046). */
.team-row-link {
  color: inherit;
  text-decoration: none;
}

.team-row-link:hover b {
  text-decoration: underline;
}

.clients-list .client-avatar,
.wait-list .client-avatar,
.more-account .client-avatar,
.team-row .client-avatar {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

/* Loading: the avatar holds its place in the skeleton's grey. */
.clients-list .skel.client-avatar {
  background: var(--skel);
}

.team-row .client-avatar[class*=" t-"] {
  background: var(--t-solid);
  color: var(--t-on);
}

.client-row-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.client-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-row-side {
  display: grid;
  flex-shrink: 0;
  justify-items: end;
  gap: var(--space-1);
  text-align: right;
}

/* ---- Espera ---- */

.wait-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.wait-main {
  display: grid;
  flex: 1 1 14rem;
  min-width: 0;
}

.wait-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---- Mais ---- */

.more-stack {
  max-width: 40rem;
}

/* Two columns from the iPad up; one on the phone. */
.more-grid {
  display: grid;
  align-items: start;
  gap: var(--space-4);
  max-width: 1080px;
}

@media (min-width: 700px) {
  .more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.more-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.more-who {
  display: grid;
  min-width: 0;
}

.more-who small {
  overflow-wrap: anywhere;
}

/* The address in the interface's font: it is read, not typed. */
.more-link {
  margin: 0;
  overflow-wrap: anywhere;
}

.more-link code {
  font-family: inherit;
  font-weight: var(--w-semibold);
}

/* Copy, share and open: three equal buttons. */
.more-stack .page-buttons .btn {
  flex: 1 1 0;
  min-width: fit-content;
}

.more-out {
  justify-self: start;
}

/* On a shared device: Trocar de pessoa and Bloquear under the account. */
.more-session {
  flex-basis: 100%;
}

/* ---- Definições ---- */

.settings-home {
  max-width: 44rem;
}

.settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.settings-table th,
.settings-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--panel-divider);
  text-align: left;
  white-space: nowrap;
}

.settings-table thead th {
  border-top: 0;
  color: var(--ink-2);
  font-weight: var(--w-semibold);
}

.settings-table tbody th {
  font-weight: var(--w-semibold);
  white-space: normal;
}

.settings-table td:last-child {
  padding-right: 0;
  text-align: right;
}

.settings-table .settings-phrase {
  display: none;
}

@media (max-width: 699px) {
  .settings-table .settings-phrase {
    display: inline;
  }
}

/* On the phone a service is a row that reads on its own: the name, then "45 min · 20 €", a "Só
   presencial" tag when it cannot be booked online, and Editar (labelled with the service) at the end.
   The column headers are not needed. */
@media (max-width: 699px) {
  .settings-table thead {
    display: none;
  }

  .settings-table tbody tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "name name name edit"
      "length price . edit"
      "tag tag tag edit";
    align-items: center;
    column-gap: var(--space-2);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--panel-divider);
  }

  .settings-table tbody tr:first-child {
    border-top: 0;
  }

  .settings-table tbody :is(th, td) {
    padding: 0;
    border-top: 0;
  }

  .settings-table tbody th {
    grid-area: name;
    font-size: var(--text-body);
    line-height: var(--lh-body);
  }

  .settings-table tbody td:nth-child(2) {
    grid-area: length;
    color: var(--ink-2);
  }

  .settings-table tbody td:nth-child(3) {
    grid-area: price;
    color: var(--ink-2);
  }

  .settings-table tbody td:nth-child(3)::before {
    margin-right: var(--space-2);
    content: "·";
  }

  .settings-table tbody td:nth-child(4) {
    display: none;
  }

  /* A service clients cannot book online says so as a tag. */
  .settings-table tbody td.is-in-person {
    display: block;
    grid-area: tag;
    justify-self: start;
    margin-top: var(--space-1);
  }

  .settings-table .settings-word {
    display: none;
  }

  .settings-table tbody td:last-child {
    grid-area: edit;
  }
}

/* ---- Sign in and the public privacy notice ---- */

.signin-page .link-head,
.policy-page .link-head,
.signin-page .link-main,
.policy-page .link-main {
  max-width: 36rem;
}

.policy-page .link-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.policy-page .link-main {
  padding: var(--space-5) var(--space-6);
}

.policy-page section + section {
  padding-top: var(--space-4);
  border-top: 1px solid var(--panel-divider);
}

/* Signing in: the mark and the title centred inside an elevated card on the canvas. */
.signin-page {
  display: grid;
  align-content: center;
  padding-block: var(--space-6);
}

.signin-page .link-main {
  align-content: center;
  width: 100%;
  padding: var(--space-6);
}

.signin-mark {
  justify-self: center;
  width: 48px;
  height: 48px;
  color: var(--accent);
}

.signin-mark .logo {
  width: 100%;
  height: 100%;
}

.signin-page .link-title {
  text-align: center;
}

.signin-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
}

.policy-page h2 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-screen);
  line-height: var(--lh-screen);
  letter-spacing: var(--track-title);
}

.policy-page p,
.policy-page li {
  color: var(--ink-2);
}

/* ---- Phone ---- */

@media (max-width: 699px) {
  /* Filters scroll sideways in one line instead of wrapping into three. */
  .clients-filter {
    flex-wrap: nowrap;
    justify-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* The next booking and flags go under the name, so a long name keeps the row's width. */
  .client-row-link {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }

  .client-row-main {
    flex-basis: calc(100% - 52px);
  }

  .client-row-side {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    justify-items: start;
    gap: var(--space-1) var(--space-3);
    padding-left: 52px;
    text-align: left;
  }

  .wait-actions {
    flex-basis: 100%;
    padding-left: 52px;
  }
}

/* Round 6: the team list, profiles (D-046) and the shared iPad's faces screen and PIN (D-045). They
   reuse the page shell (page.css) and lists (lists.css); this adds what people need. */

/* ---- A face: the person's colour for a tech, the accent for the owner and the front desk ---- */

.team-face {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.team-face[class*=" t-"] {
  background: var(--t-solid);
  color: var(--t-on);
}

/* ---- Equipa ---- */

.people-list {
  display: grid;
  max-width: 48rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--panel-solid);
  box-shadow: var(--shadow-card);
  list-style: none;
}

.people-row + .people-row {
  border-top: 1px solid var(--panel-divider);
}

.people-row-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
}

.people-row:first-child .people-row-link {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.people-row:last-child .people-row-link {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.people-row-link:hover {
  background: var(--panel-well);
}

.people-row-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.people-row-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.people-row-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-row-now {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
}

.people-row-link > svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
  color: var(--ink-3);
}

/* ---- Perfil ---- */

.profile {
  max-width: 56rem;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.profile-who {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.profile-name {
  margin: 0;
  font-size: var(--text-screen);
  line-height: var(--lh-screen);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

.profile-role,
.profile-now {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.profile-now {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
}

/* Specialties are quiet tags, like a client's nail notes. */
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-bio {
  margin: 0;
}

/* The hours: one value under the card's title. */
.profile-hours {
  margin: 0;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- The shared iPad: who is using it? ---- */

.lock-page {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100dvh;
  padding: calc(var(--space-8) + var(--safe-top)) var(--space-5) calc(var(--space-8) + var(--safe-bottom));
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  text-align: center;
}

.lock-head {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}

.lock-mark {
  display: grid;
  width: var(--avatar-s);
  height: var(--avatar-s);
  color: var(--accent);
}

.lock-mark .logo {
  width: 100%;
  height: 100%;
}

.lock-page:not([data-step="faces"]) .lock-mark {
  display: none;
}

.lock-studio {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.lock-clock {
  margin: 0;
  font-size: var(--text-figure);
  line-height: var(--lh-figure);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}

.lock-date {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.lock-main {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-6);
  width: min(100%, 44rem);
  margin: 0 auto;
}

.lock-title {
  margin: 0;
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
}

/* As wide as the column, never wider: long text wraps instead of widening the page. */
.lock-notice {
  grid-area: auto;
  justify-self: stretch;
  min-width: 0;
  margin: 0;
  text-align: left;
}

.lock-group {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.lock-group-title {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.lock-faces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lock-face {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  min-width: 96px;
  padding: var(--space-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--panel-solid);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.lock-face:hover {
  border-color: var(--accent-line);
  background: var(--panel-solid);
  box-shadow: var(--shadow-control-hover);
}

.lock-face:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.lock-name {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-semibold);
}

.lock-open {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

/* The PIN: four dots and a large keypad, thumb-sized on the iPad and the phone. The clock gets
   smaller, so the keypad fits a landscape iPad without scrolling. */
.lock-page:not([data-step="faces"]) {
  padding-top: calc(var(--space-5) + var(--safe-top));
}

.lock-page:not([data-step="faces"]) .lock-date {
  display: none;
}

.lock-page:not([data-step="faces"]) .lock-clock {
  font-size: var(--text-title);
  line-height: var(--lh-title);
}

.lock-main--pin {
  gap: var(--space-3);
}

.lock-back {
  position: absolute;
  top: calc(var(--space-5) + var(--safe-top));
  left: var(--space-5);
}

.lock-hint,
.lock-forgot {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.lock-dots {
  display: flex;
  gap: var(--space-4);
  margin: 0;
}

.lock-dot {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--check-line);
  border-radius: 50%;
  background: var(--panel-well);
  box-shadow: var(--shadow-well-in);
}

.lock-dot.is-on {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: var(--shadow-badge);
}

.lock-problem {
  margin: 0;
  color: var(--danger-ink);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
  font-weight: var(--w-semibold);
}

.lock-keypad {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-2);
}

.lock-key {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--control-line);
  border-radius: 50%;
  background: var(--panel-solid);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-title);
  line-height: var(--lh-title);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.lock-key:active {
  background: var(--accent-soft);
}

.lock-key:disabled {
  box-shadow: none;
  color: var(--ink-3);
  cursor: default;
}

.lock-key--delete {
  border-color: transparent;
  background: none;
  box-shadow: none;
}

.lock-key svg {
  width: 24px;
  height: 24px;
}

/* A wrong PIN shakes the dots once; with reduced motion it only says so. */
.lock-page[data-wrong] .lock-dots {
  animation: lock-shake 360ms ease;
}

@keyframes lock-shake {
  20%,
  60% {
    transform: translateX(-8px);
  }

  40%,
  80% {
    transform: translateX(8px);
  }
}

[data-motion="reduced"] .lock-page[data-wrong] .lock-dots {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .lock-page[data-wrong] .lock-dots {
    animation: none;
  }
}

/* ---- The person on the rail (a shared device): who is in, and the menu to switch or lock ---- */

.nav-person {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  min-height: 64px;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-radius: var(--r-xl);
  background: none;
  color: var(--nav-ink);
  font: inherit;
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  cursor: pointer;
}

.nav-person:hover {
  background: var(--nav-active-bg);
}

.person-menu {
  min-width: 15rem;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  position-area: right span-bottom;
}

.person-menu a:hover,
.person-menu button:hover {
  background: var(--panel-well);
}

.person-menu-who {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--panel-divider);
  color: var(--ink-2);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

@media (max-width: 699px) {
  .lock-page {
    padding-inline: var(--space-4);
  }

  /* Three faces to a row, each a third wide, so a "Sessão aberta" chip never widens one and
     breaks the rows unevenly; a short last row stays centred. */
  .lock-faces {
    gap: var(--space-4) var(--space-3);
  }

  .lock-faces li {
    flex: 0 0 calc((100% - 2 * var(--space-3)) / 3);
  }

  .lock-face {
    width: 100%;
    min-width: 0;
    padding-inline: 0;
  }

  .lock-keypad {
    grid-template-columns: repeat(3, 72px);
  }

  .lock-key {
    width: 72px;
    height: 72px;
  }

  /* No corner to spare on the phone: the way back sits above the face, in the column. */
  .lock-back {
    position: static;
    justify-self: start;
  }

  .profile-head {
    align-items: flex-start;
  }

  .people-row-now {
    display: none;
  }

  /* The phone's bar has no room for a person: Mais carries Trocar and Bloquear. */
  .nav-person,
  .person-menu {
    display: none;
  }
}

/* ---- Booking online: the service, who and the time, each a list of links ---- */

.link-back {
  justify-self: start;
}

.link-options,
.link-times {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-option,
.link-tech {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--control-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--shadow-control);
  color: inherit;
  text-decoration: none;
}

.link-option:hover,
.link-tech:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-control-hover);
}

.link-option:focus-visible,
.link-tech:focus-visible,
.link-time:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.link-option-main,
.link-tech-main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.link-option-aside {
  flex-shrink: 0;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.link-option > svg {
  flex-shrink: 0;
  width: var(--icon-control);
  height: var(--icon-control);
  color: var(--ink-3);
}

/* A tech: face, name, specialties, two lines of "Sobre" and the next free time. */
.link-tech {
  align-items: flex-start;
}

.link-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.link-tech-bio {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.link-tech-next {
  color: var(--ok-ink);
}

.link-times {
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

.link-time {
  display: grid;
  place-items: center;
  min-height: 56px;
  border: 1px solid var(--control-line);
  border-radius: var(--r-lg);
  background: var(--panel-solid);
  box-shadow: var(--shadow-control);
  color: inherit;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.link-time:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-control-hover);
}

/* "Sobre" is a short paragraph: a field that grows with it. */
.sheet-textarea {
  min-height: 96px;
  padding-block: var(--space-3);
  resize: vertical;
}

/* Feedback and polish (D-070, Round 15). Loaded last of the product stylesheets, after every family
   has set its resting look: this file only adds how a control answers (hover, pressed, selected, busy),
   how a state arrives (a sheet, a step, a toast, a check, a payment) and a handful of measured fixes.
   Nothing here changes what a screen says or does, and a control at rest draws exactly as before.

   Rules of the file, so it stays one system:
   - One wash for every surface: --hover, --press (and the accent pair on tonal fills). A control never
     invents its own tint. A hover is only drawn where a pointer can hover; a press everywhere.
   - Durations and curves are tokens (--dur-*, --ease-*). Movement (a press sinking, a pop, a slide) is
     drawn only when motion is not reduced; reduced motion keeps every state (the tone, the check, the
     message) and drops the movement (base.css switches transitions and animations off).
   - A transition runs when a state changes, never when a screen first draws, so a refresh does not
     replay it. The one-shot arrivals (a step, a payment's outcome) are scoped to a dialog opened by
     script ([data-animate]); a statically open case never animates.
   - Written as plain :hover, :active and :focus-visible rules: the workshop's state strips derive their
     forced-state copies from this file at build time, so none of that chrome ships here. */

/* ---------- Press: a control sinks a little, and comes back ---------- */
.btn,
.icon-btn,
.fab,
.nav-item,
.page-tab,
.sheet-chip,
.sheet-pill,
.turn,
.lock-key,
.lock-face,
.biz-qty,
.datenav-label,
.search,
.free-slot,
.hours-band,
.photo-tile,
.sheet-option,
.link-option,
.link-tech {
  transition: transform var(--dur-press) var(--ease-out);
}

/* A state eases in (a hover, a press, a choice) and leaves at once. Colours are never transitioned at
   rest, so a theme change or a first paint never leaves a control halfway between two looks (a tool
   that reads computed colours after switching the theme would otherwise see the old ones). */
@media (hover: hover) {
  :is(.btn, .icon-btn, .fab, .nav-item, .page-tab, .sheet-chip, .sheet-pill, .turn, .lock-key, .lock-face, .biz-qty, .datenav-label, .search, .free-slot, .hours-band, .photo-tile, .sheet-option, .link-option, .link-tech, .appt, .sheet-input, .clients-sort select, .date-menu-other input):hover {
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      filter var(--dur-fast) var(--ease-out),
      transform var(--dur-press) var(--ease-out);
  }
}

:is(.btn, .icon-btn, .fab, .nav-item, .page-tab, .sheet-chip, .sheet-pill, .turn, .lock-key, .lock-face, .biz-qty, .datenav-label, .search, .free-slot, .hours-band, .photo-tile, .sheet-option, .link-option, .link-tech, .appt):active,
.sheet-input:focus-visible,
.clients-sort select:focus-visible,
.date-menu-other input:focus-visible {
  transition:
    background-color var(--dur-press) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-press) var(--ease-out),
    box-shadow var(--dur-press) var(--ease-out),
    filter var(--dur-press) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) :is(.btn, .icon-btn, .fab, .nav-item, .page-tab, .sheet-pill, .turn, .lock-key, .lock-face, .biz-qty, .datenav-label, .search, .hours-band):active:not(:disabled) {
    transform: scale(var(--press-scale));
  }

  :root:not([data-motion="reduced"]) :is(.sheet-option, .link-option, .link-tech, .photo-tile, .free-slot):active:not(:disabled) {
    transform: scale(var(--press-scale-card));
  }
}

/* ---------- Buttons: filled ones lighten on hover and darken under a press ---------- */
@media (hover: hover) {
  .btn-primary:hover {
    box-shadow: var(--shadow-primary-hover);
    filter: brightness(1.06);
  }
}

.btn-primary:active:not(:disabled) {
  box-shadow: var(--shadow-primary-press);
  filter: brightness(0.94);
}

/* A tonal, ghost or icon button takes the wash over its own fill (an inset layer, so a fill with an
   image or a shadow of its own keeps both). */
@media (hover: hover) {
  .btn-tonal:hover {
    box-shadow: var(--shadow-tonal-hover);
  }

  .btn-danger-tonal:hover {
    box-shadow: var(--shadow-danger-tonal-hover);
  }
}

.btn-tonal:active:not(:disabled) {
  box-shadow: var(--shadow-tonal-press);
}

.btn-danger-tonal:active:not(:disabled) {
  box-shadow: var(--shadow-danger-tonal-press);
}

@media (hover: hover) {
  .btn-danger:hover {
    box-shadow: var(--shadow-primary-hover);
    filter: brightness(1.07);
  }
}

.btn-danger:active:not(:disabled) {
  box-shadow: var(--shadow-primary-press);
  filter: brightness(0.93);
}

@media (hover: hover) {
  .btn-ghost:hover,
  .icon-btn:hover {
    background: var(--hover);
  }
}

.btn-ghost:active:not(:disabled),
.icon-btn:active:not(:disabled) {
  background: var(--press);
}

/* A button at work keeps its width and says so: a light passes across it (still, under reduced motion,
   where the lowered tone already says it). */
.btn.is-busy {
  position: relative;
  overflow: hidden;
}

.btn.is-busy::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--busy-shine) 50%, transparent 70%) 0 0 / 220% 100%;
  content: "";
  animation: busy-pass 1.3s var(--ease-standard) infinite;
  pointer-events: none;
}

@keyframes busy-pass {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -120% 0;
  }
}

/* A button that has just done its work: the tone of success, the icon pops in. The app sets .is-done for
   about two seconds after a save, a copy or a send (the label says what happened). */
.btn.is-done {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.btn.is-done svg {
  animation: pop-in var(--dur-slow) var(--ease-spring) both;
}

@keyframes pop-in {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

/* ---------- Navigation: the rail, the bar, tabs and filter chips ---------- */
@media (hover: hover) {
  .nav-item:not(.is-active):not(.is-active-phone):hover {
    background: var(--hover);
  }
}

.nav-item:not(.is-active):not(.is-active-phone):active {
  background: var(--press);
}

@media (hover: hover) {
  .nav-item.is-active:hover,
  .nav-item.is-active-phone:hover {
    filter: brightness(0.98);
  }
}

@media (hover: hover) {
  .page-tab:not([aria-current="page"]):hover {
    background: var(--hover);
  }
}

.page-tab:not([aria-current="page"]):active {
  background: var(--press);
}

@media (hover: hover) {
  .datenav-label:hover,
  .turn:hover {
    background: var(--hover);
  }
}

.datenav-label:active,
.turn:active {
  background: var(--press);
}

@media (hover: hover) {
  .search:hover {
    border-color: var(--accent-line);
  }
}

/* ---------- Rows and cards that open something ---------- */
@media (hover: hover) {
  .page-row--link > a:hover,
  .client-row-link:hover,
  .people-row-link:hover,
  .team-row-link:hover,
  .page-row-open:hover,
  .wait-row:hover,
  summary:hover {
    background: var(--hover);
  }
}

.page-row--link > a:active,
.client-row-link:active,
.people-row-link:active,
.team-row-link:active,
.page-row-open:active,
summary:active {
  background: var(--press);
}

@media (hover: hover) {
  .sheet-option:hover:not(:disabled),
  .sheet-pill:hover:not(:disabled),
  .link-option:hover,
  .link-tech:hover,
  .link-time:hover,
  button.photo-tile:hover {
    border-color: var(--accent-line);
    box-shadow: var(--shadow-control-hover);
  }
}

.sheet-option:active:not(:disabled),
.sheet-pill:active,
.link-option:active,
.link-tech:active,
.photo-tile:active {
  background: var(--accent-soft);
}

/* ---------- The calendar: a booking block lifts a little, a free slot fills ---------- */
@media (hover: hover) {
  .appt:hover {
    box-shadow: var(--shadow-lift);
    filter: brightness(0.985);
  }
}

.appt:active {
  filter: brightness(0.96);
}

@media (hover: hover) {
  .free-slot:hover {
    background: var(--accent-soft);
  }
}

.free-slot:active {
  background: var(--accent-soft);
  filter: brightness(0.97);
}

@media (hover: hover) {
  .fab:hover {
    filter: brightness(1.07);
  }
}

.fab:active {
  filter: brightness(0.93);
}

/* ---------- Switches and checks: the state change is the feedback ---------- */
.switch {
  transition:
    background-color var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .switch:hover:not(:disabled) {
    filter: brightness(0.95);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The knob stretches under a finger and settles where it is going. */
  :root:not([data-motion="reduced"]) .switch:active:not(:disabled) .switch-knob {
    width: 31px;
  }

  :root:not([data-motion="reduced"]) .switch[aria-checked="true"]:active:not(:disabled) .switch-knob {
    transform: translateX(15px);
  }
}

.sheet-check svg {
  transform: scale(0.5);
  transition: transform var(--dur-fast) var(--ease-spring);
}

.sheet-option[aria-pressed="true"] .sheet-check svg {
  transform: scale(1);
}

/* ---------- Fields: a hover edge, a focused edge in the accent ---------- */
@media (hover: hover) {
  .sheet-input:hover,
  .clients-sort select:hover,
  .date-menu-other input:hover {
    border-color: var(--ink-3);
  }
}

.sheet-input:focus-visible,
.clients-sort select:focus-visible,
.date-menu-other input:focus-visible {
  border-color: var(--accent);
}

/* ---------- Arrivals: a sheet, a step, a toast, the outcome of a payment ---------- */

/* Leaving is quicker than arriving. */
.sheet[data-closing] .sheet-panel,
.details[data-closing] .details-sheet {
  transition-duration: var(--dur-exit);
  transition-timing-function: var(--ease-in);
}

.sheet[data-closing]::backdrop,
.details[data-closing]::backdrop {
  transition-duration: var(--dur-exit);
  transition-timing-function: var(--ease-in);
}

.toast[data-leaving] {
  transition-duration: var(--dur-exit);
  transition-timing-function: var(--ease-in);
}

/* The next step slides in a little from the side it comes from, so a flow reads as moving forward. */
.sheet[data-animate] .sheet-step:not([hidden]) {
  animation: step-in var(--dur-base) var(--ease-out) both;
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}

/* The outcome of a payment or a send lands with a rise, a little after the step. */
.sheet[data-animate] .sheet-outcome {
  animation: rise-in var(--dur-slow) var(--ease-out) 80ms both;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.sheet[data-animate] :is(.sheet-outcome-icon, .sheet-status-icon) svg {
  animation: pop-in var(--dur-slow) var(--ease-spring) 120ms both;
}

/* A toast's icon pops as the toast arrives. */
.toast[data-animate] .toast-icon svg {
  animation: pop-in var(--dur-slow) var(--ease-spring) 60ms both;
}

/* A count that changed (the Espera badge, "+2" on a toast) bumps once. The app sets data-bump for 400 ms
   when the number changes. */
.nav-badge[data-bump],
.toast-more[data-bump] {
  animation: badge-bump var(--dur-slow) var(--ease-spring) 1;
}

@keyframes badge-bump {
  40% {
    transform: scale(1.35);
  }
}

/* A booking that has landed after a drag: the ring settles, and the block stays marked until the
   notice is sent (drag.css keeps the ring; here the block also rises a hair as it settles). */
.appt[data-drag="moved"] {
  animation: drag-settle 1400ms var(--ease-out) 1, drop-land var(--dur-slow) var(--ease-spring) 1;
}

@keyframes drop-land {
  from {
    transform: scale(1.025);
  }
}

/* ---------- Hierarchy: one solid action per screen ---------- */

/* An action that belongs to one row of a list is tonal: the solid button is the screen's. */
.wait-actions .btn-primary,
.cal-message:not([data-status="error"]) .btn-primary {
  background: var(--accent-soft);
  background-image: none;
  box-shadow: var(--shadow-tonal);
  color: var(--accent-soft-ink);
}

/* While a message holds the one thing to do (try again, the notice to the authority), the header's
   own button steps back to tonal. */
.desk:has(.page-message[data-status="error"] .btn-primary, .cal-message[data-status="error"] .btn-primary, .breach-step .btn-primary) .topbar .btn-primary {
  background: var(--accent-soft);
  background-image: none;
  box-shadow: var(--shadow-tonal);
  color: var(--accent-soft-ink);
}

/* ---------- Figures: the total of a bill is the figure of its step; the rest of the money lines up ---------- */
.sheet-summary .is-total {
  align-items: baseline;
}

.sheet-summary .is-total dt {
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.sheet-summary .is-total dd {
  font-size: var(--text-title);
  line-height: var(--lh-title);
  letter-spacing: var(--track-figure);
}

.sheet-option-meta,
.sheet-option-label,
.biz-figure-meta,
.biz-group-total,
.biz-col-value,
.myday-big,
.wa-cost,
.wa-time,
.drop-reason,
.settings-table td,
.settings-table th,
time {
  font-variant-numeric: tabular-nums;
}

/* ---------- Measured fixes ---------- */

/* A sheet's first step has no way back: the empty back button no longer holds a 36px indent, so the
   title starts on the content's edge. From the second step the arrow stands where the indent was. */
.sheet-back[inert] {
  display: none;
}

/* The phone's date: its first digit was cut by the label's clip. */
@media (max-width: 699px) {
  .datenav-label {
    padding-inline: var(--space-1);
  }
}

/* A grip is a hit target of 44, drawn 32 wide: the area around it answers too. */
.appt-grip::after {
  position: absolute;
  inset: 0 calc(var(--space-2) * -1);
  content: "";
}
/* Flow design tokens: Porcelain with Liquid glass, the accepted look (D-009, D-013, D-015).
   The single source for colours, radii, fonts and glass values. The workshop build reads this file;
   the app (/src) will import it. Components live in design/source/pages/*.css and only use tokens.
   Context attributes select the tokens: data-direction="porcelain", data-glass="liquid",
   data-theme="light" | "dark" and data-transparency="glass" | "solid". */

[data-direction="porcelain"] {
  --font-sans: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", "Instrument Sans Variable", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", "Instrument Sans Variable", system-ui, -apple-system, sans-serif;
  --font-mono: "Plus Jakarta Sans Variable", "Instrument Sans Variable", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type (D-038): roles, not sizes. Each role pairs a size with its line height; components choose a
     role and never write a size. Comfortable density: body 16, details 14, titles clearly larger. */
  --text-micro: 0.75rem;
  --lh-micro: 1.334;
  --text-caption: 0.8125rem;
  --lh-caption: 1.385;
  --text-detail: 0.875rem;
  --lh-detail: 1.43;
  --text-body: 1rem;
  --lh-body: 1.5;
  --text-lead: 1.125rem;
  --lh-lead: 1.445;
  --text-title: 1.375rem;
  --lh-title: 1.273;
  --text-page: 1.75rem;
  --lh-page: 1.215;
  --text-figure: 2.25rem;
  --lh-figure: 1.112;
  --text-hero: clamp(2.375rem, 4.4vw, 3.625rem);
  --lh-hero: 1.04;
  --text-clock: min(5.5rem, 22vw);
  /* Numbers that stand alone (a count, a clock) sit on a tight line; dense blocks (calendar cards,
     chips) on a compact one. */
  --lh-tight: 1;
  --lh-compact: 1.25;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --track-title: -0.018em;
  --track-figure: -0.026em;
  --track-hero: -0.032em;
  --track-label: 0.012em;
  --track-kicker: 0.08em;
  /* Title roles (D-050): a screen's title (a page, a sheet's question, a panel's name) and a display
     title (the calendar's day, the lock screen, the public page) step down one size on the phone. */
  --text-screen: var(--text-title);
  --lh-screen: var(--lh-title);
  --text-display: var(--text-page);
  --lh-display: var(--lh-page);

  /* Space: a 4-px scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Corners: a tag 8, an item inside a container 12, a control, well or banner 16, a card or bar 20,
     a surface (the calendar, a page, a sheet, a panel, the rail) 26, 24 on the phone. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --r-item: var(--r-md);
  --r-control: var(--r-lg);
  --r-bar: var(--r-xl);
  --r-surface: 26px;
  --r-appt: var(--r-md);

  /* Component sizes (D-050): one scale per family. A component picks a size; it never writes its own
     height, avatar size or icon size. Hit targets stay in px, so they do not grow with the text. */
  --control-l: 52px; /* the footer of a sheet or panel */
  --control-m: 48px; /* the default: buttons, icon buttons, fields, tabs, menu items */
  --control-s: 44px; /* an action inside a row, a table or a card's line; steppers */
  --chip-filter: 36px; /* filters and periods; 44 on the phone */
  --badge: 20px; /* a count on the navigation or a toast */
  --icon-control: 20px;
  --icon-nav: 24px;
  --icon-chip: 14px;
  --avatar-xs: 30px; /* a compact calendar column */
  --avatar-s: 40px; /* rows, options, lists, the team header */
  --avatar-m: 48px; /* a panel or sheet header, a card's lead, page headers on the phone */
  --avatar-l: 64px; /* a page header: a client, a profile */
  --avatar-xl: 72px; /* the faces on a shared device */
  --row-min: 56px;

  /* Motion (D-070): one set of durations and curves; components read these and never write their own.
     Press 90 (a tap answers at once), fast 160 (a tone changing), base 240 (a sheet, a menu or a toast
     arriving), exit 160 (leaving is quicker than arriving), slow 420 (a stamp, a completed payment).
     ease-out enters, ease-in leaves, spring overshoots once (a stamp landing, a switch's knob). Reduced
     motion keeps every state and drops the movement (base.css). */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.3);
  --dur-press: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-exit: 160ms;
  --dur-slow: 420ms;
  /* A press sinks the control a little: a button, a card, a calendar block. */
  --press-scale: 0.97;
  --press-scale-card: 0.99;
  /* State layers (D-070): a hover and a press are one wash over any surface, so every family answers
     the same way. The accent washes sit on the brand's tonal fills. */
  --hover: rgba(30, 26, 34, 0.05);
  --press: rgba(30, 26, 34, 0.1);
  --hover-accent: rgba(168, 40, 95, 0.07);
  --press-accent: rgba(168, 40, 95, 0.14);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 5px rgba(30, 26, 34, 0.09), 0 10px 22px -8px rgba(30, 26, 34, 0.28);
  --busy-shine: rgba(255, 255, 255, 0.32);
  --nav-w: 88px;
  --hour: 112px;
  --hour-phone: 112px;
  --logo-shine: rgba(255, 255, 255, 0.75);

  --canvas: #f4f2ec;
  --ink: #1e1a22;
  --ink-2: #57505e;
  --ink-3: #736c7a;
  --focus: #a8285f;

  --accent: #a8285f;
  --accent-ink: #ffffff;
  --accent-soft: #f8e6ee;
  --accent-soft-ink: #8a1d4c;

  --nav-bg: #ffffff;
  --nav-line: #e4e0d6;
  --nav-ink: #1e1a22;
  --nav-ink-2: #57505e;
  --nav-active-bg: #f8e6ee;
  --nav-active-ink: #8a1d4c;

  --top-bg: #f4f2ec;
  --top-ink: #1e1a22;
  --top-ink-2: #57505e;
  --search-bg: #ffffff;
  --search-line: #dedad0;

  --walkin-bg: #ffffff;
  --walkin-line: #e4e0d6;
  --walkin-ink: #1e1a22;
  --walkin-ink-2: #57505e;
  --walkin-icon-bg: #f8e6ee;
  --walkin-icon-ink: #a8285f;
  --strip-bg: #efeae0;

  --turn-bg: #ffffff;
  --turn-ink: #1e1a22;
  --turn-ink-2: #57505e;
  --head-line: #e6e2d8;
  --next-bg: #fcf3f7;

  --ok: #2f8a55;
  --ok-soft: #e3f3e9;
  --ok-ink: #1f6b40;
  --busy: #5b5fc7;
  --warn: #c77d12;
  --warn-soft: #fdf0dc;
  --warn-ink: #7f4700;
  --danger-soft: #fbe4e4;
  --danger-ink: #a32020;
  --danger-line: #efb9b9;
  /* A destructive button's fill (cancel a booking, anonymise, disconnect). */
  --danger: #b42323;
  --danger-on: #ffffff;
  --accent-line: #e2a8c1;
  --reward-soft: #f6ebd7;
  --reward-ink: #74500f;

  --cal-bg: #ffffff;
  --col-bg: #ffffff;
  --grid-line: #ebe7df;
  --grid-line-half: #f4f1ea;
  --gutter-ink: #736c7a;
  --now-line: #a8285f;
  --now-ink: #ffffff;
  --badge-bg: rgba(255, 255, 255, 0.78);
  --cal-fade: rgba(255, 255, 255, 0.92);
  /* A scrolling panel fades its last 16px, so content running on under a footer reads as more. */
  --scroll-fade: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  /* The phone's team header scrolls sideways, which clips a fade drawn below it: a shadow in the
     fade colour does the same job. */
  --cal-fade-shadow: 0 16px 12px -4px var(--cal-fade);

  --done-bg: #f5f2ec;
  --done-line: #e6e2d8;
  --hatch: rgba(30, 26, 34, 0.08);
  --off-bg: #f5f2ec;
  --off-stripe: #ede9e0;
  --free-bg: rgba(168, 40, 95, 0.04);
  --free-line: #d9a3bb;
  --free-ink: #8a1d4c;

  --shadow-appt: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 2px rgba(30, 26, 34, 0.06), 0 6px 14px -8px rgba(30, 26, 34, 0.16);
  --shadow-fab: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 4px rgba(30, 26, 34, 0.18), 0 10px 24px -4px rgba(168, 40, 95, 0.42);
  --shadow-sm: 0 1px 2px rgba(30, 26, 34, 0.08);
  --shadow-overlap: -6px 0 12px -8px rgba(30, 26, 34, 0.35);
  --shadow-md: 0 4px 16px rgba(30, 26, 34, 0.12);
  --shadow-hair: 0 1px 1px rgba(30, 26, 34, 0.1);
  --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(30, 10, 20, 0.2), 0 1px 2px rgba(30, 26, 34, 0.16), 0 8px 18px -6px rgba(168, 40, 95, 0.48);
  --shadow-primary-hover: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(30, 10, 20, 0.2), 0 2px 4px rgba(30, 26, 34, 0.2), 0 10px 22px -6px rgba(168, 40, 95, 0.56);
  --shadow-primary-press: inset 0 1px 2px rgba(30, 10, 20, 0.24), 0 1px 2px rgba(30, 26, 34, 0.14);
  --shadow-tonal: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 1px rgba(168, 40, 95, 0.16), 0 1px 2px rgba(30, 26, 34, 0.05);
  --shadow-tonal-hover: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(168, 40, 95, 0.26), inset 0 0 0 999px var(--hover-accent), 0 2px 4px rgba(30, 26, 34, 0.08);
  --shadow-tonal-press: inset 0 0 0 1px rgba(168, 40, 95, 0.28), inset 0 0 0 999px var(--press-accent);
  --shadow-danger: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(30, 10, 10, 0.22), 0 1px 2px rgba(30, 26, 34, 0.16), 0 8px 18px -6px rgba(180, 35, 35, 0.42);
  --shadow-danger-tonal: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(180, 35, 35, 0.18), 0 1px 2px rgba(30, 26, 34, 0.05);
  --shadow-danger-tonal-hover: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 1px rgba(180, 35, 35, 0.28), inset 0 0 0 999px var(--hover-accent), 0 2px 4px rgba(30, 26, 34, 0.08);
  --shadow-danger-tonal-press: inset 0 0 0 1px rgba(180, 35, 35, 0.3), inset 0 0 0 999px var(--press-accent);
  --page-bg: #f1ede4;
  --card-line: #d8d2c5;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 2px 4px rgba(30, 22, 26, 0.06), 0 14px 32px -12px rgba(42, 28, 34, 0.16);
  --ad-canvas-bg:
    radial-gradient(980px 600px at 82% 8%, rgba(236, 168, 198, 0.36), transparent 64%),
    radial-gradient(860px 540px at 12% 28%, rgba(238, 198, 158, 0.34), transparent 64%),
    radial-gradient(900px 580px at 86% 74%, rgba(176, 220, 198, 0.34), transparent 64%),
    radial-gradient(780px 500px at 18% 90%, rgba(208, 192, 236, 0.3), transparent 64%),
    #f0ebe1;
  --ad-pill-bg: #ffffff;
  --ad-hero-bg:
    radial-gradient(90% 110% at 92% 0%, rgba(236, 168, 198, 0.28), transparent 62%),
    radial-gradient(85% 100% at 8% 100%, rgba(238, 198, 158, 0.26), transparent 62%),
    #faf5f7;
  --ad-stage-bg:
    radial-gradient(120% 90% at 14% 0%, rgba(232, 148, 186, 0.72), transparent 60%),
    radial-gradient(100% 85% at 90% 100%, rgba(214, 166, 128, 0.62), transparent 62%),
    #dcc8be;
  --shadow-stage: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(255, 255, 255, 0.88), 0 10px 24px rgba(30, 20, 26, 0.1), 0 28px 64px -14px rgba(42, 22, 34, 0.26);
  --shadow-satellite: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 0 0 3px #ffffff, 0 8px 20px rgba(30, 20, 26, 0.1), 0 22px 48px -12px rgba(42, 22, 34, 0.24);
  --shadow-spotlight: inset 0 0 0 2px var(--t-solid), 0 8px 20px -6px rgba(168, 40, 95, 0.28);
  --control-line: #d8d3c8;
  --shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(30, 26, 34, 0.06), 0 3px 8px -4px rgba(30, 26, 34, 0.08);
  --shadow-control-hover: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 5px rgba(30, 26, 34, 0.08), 0 6px 14px -6px rgba(168, 40, 95, 0.16);
  --shadow-option-on: inset 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px -2px rgba(168, 40, 95, 0.22);
  --check-line: rgba(30, 26, 34, 0.24);
  --shadow-well-in: inset 0 1px 2px rgba(30, 26, 34, 0.06), inset 0 0 0 1px var(--panel-divider);
  --shadow-well-ok: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 1px rgba(47, 138, 85, 0.18), 0 1px 2px rgba(30, 26, 34, 0.04);
  --shadow-well-warn: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 1px var(--warn-line), 0 1px 2px rgba(30, 26, 34, 0.04);
  --shadow-banner: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(30, 26, 34, 0.04);
  --shadow-avatar: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(30, 26, 34, 0.08), 0 1px 2px rgba(30, 26, 34, 0.08);
  --shadow-badge: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 2px rgba(30, 26, 34, 0.16);
  --shadow-box-active: inset 3px 0 0 var(--accent), var(--shadow-card);
  --text-relief: 0 1px 0 var(--logo-shine);
  --shadow-chip: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(168, 40, 95, 0.08), inset 0 0 0 1px rgba(168, 40, 95, 0.18), 0 2px 4px -1px rgba(168, 40, 95, 0.10);
  --shadow-chip-neutral: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(30, 26, 34, 0.05), inset 0 0 0 1px rgba(30, 26, 34, 0.12), 0 1px 3px -1px rgba(30, 26, 34, 0.06);
  --shadow-chip-ok: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(47, 138, 85, 0.08), inset 0 0 0 1px rgba(47, 138, 85, 0.24), 0 2px 4px -1px rgba(47, 138, 85, 0.10);
  --shadow-chip-warn: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(199, 125, 18, 0.08), inset 0 0 0 1px rgba(199, 125, 18, 0.26), 0 2px 4px -1px rgba(199, 125, 18, 0.10);
  --shadow-chip-danger: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(180, 35, 35, 0.08), inset 0 0 0 1px rgba(180, 35, 35, 0.24), 0 2px 4px -1px rgba(180, 35, 35, 0.10);
  --chip-neutral-bg: rgba(242, 239, 232, 0.82);
  --chip-accent-bg: rgba(248, 224, 235, 0.82);
  --chip-ok-bg: rgba(221, 243, 229, 0.84);
  --chip-warn-bg: rgba(253, 237, 212, 0.86);
  --chip-danger-bg: rgba(251, 222, 222, 0.84);
  --chip-reward-bg: rgba(247, 233, 209, 0.84);
  --tag-bg: rgba(244, 241, 235, 0.8);
  --shadow-bar: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(168, 40, 95, 0.18);
  --shadow-check-on: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 3px rgba(168, 40, 95, 0.35);
  --field-line: #d8d3c8;
  --shadow-field: inset 0 1px 2px rgba(30, 26, 34, 0.05), 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-track: inset 0 1px 2px rgba(30, 26, 34, 0.06), inset 0 0 0 1px var(--panel-divider);
  --shadow-seg: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(30, 26, 34, 0.1), 0 2px 6px -2px rgba(30, 26, 34, 0.08);
  --shadow-switch-track: inset 0 1px 2px rgba(30, 26, 34, 0.22);
  --knob: #ffffff;
  --shadow-knob: 0 1px 3px rgba(30, 26, 34, 0.32), 0 2px 6px -1px rgba(30, 26, 34, 0.18);

  --t1-solid: #c2477a;
  --t1-on: #ffffff;
  --t1-soft: #fbeaf1;
  --t1-line: #f1cadb;
  --t1-ink: #86234f;
  --t1-col: #ffffff;
  --t2-solid: #3a825c;
  --t2-on: #ffffff;
  --t2-soft: #e6f3ec;
  --t2-line: #c3e1d0;
  --t2-ink: #1d5a3a;
  --t2-col: #ffffff;
  --t3-solid: #3c74b8;
  --t3-on: #ffffff;
  --t3-soft: #e6eef8;
  --t3-line: #c5d6ee;
  --t3-ink: #22497a;
  --t3-col: #ffffff;
  --t4-solid: #a76329;
  --t4-on: #ffffff;
  --t4-soft: #fbeee2;
  --t4-line: #f0d3b8;
  --t4-ink: #77420f;
  --t4-col: #ffffff;
  --t5-solid: #7457c0;
  --t5-on: #ffffff;
  --t5-soft: #efeafb;
  --t5-line: #d9cff3;
  --t5-ink: #4b3290;
  --t5-col: #ffffff;
  --t6-solid: #23797a;
  --t6-on: #ffffff;
  --t6-soft: #e2f3f2;
  --t6-line: #bfe2e0;
  --t6-ink: #145c5c;
  --t6-col: #ffffff;
  --t7-solid: #b94a35;
  --t7-on: #ffffff;
  --t7-soft: #fbe9e5;
  --t7-line: #f1cbc2;
  --t7-ink: #8a2e1c;
  --t7-col: #ffffff;
  --t8-solid: #636f22;
  --t8-on: #ffffff;
  --t8-soft: #f0f3e1;
  --t8-line: #d9e0b8;
  --t8-ink: #48521a;
  --t8-col: #ffffff;

  --warn-line: #f0d29c;
  --skel: #ebe7de;
  --skel-shine: rgba(255, 255, 255, 0.7);
  --gutter-bg: #ffffff;
  --message-bg: #ffffff;
  --message-line: #e6e2d8;
  --message-shadow: 0 12px 32px -18px rgba(30, 26, 34, 0.35);
  --scrim: rgba(30, 20, 34, 0.28);
  --panel-bg: #ffffff;
  --panel-solid: #ffffff;
  /* A selected segment sits raised on its track: lighter than the track in both themes. */
  --seg-on: #ffffff;
  --panel-line: #e6e2d8;
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 28px 64px -24px rgba(30, 26, 34, 0.45), 0 2px 6px rgba(30, 26, 34, 0.06);
  --panel-divider: #e8e4da;
  --panel-well: #f5f2eb;
  --stamp-line: #d9a3bb;
  --switch-off: #8c8494; /* switch track when off: 3.6:1 on white */
  /* Charts (D-033): one series in the accent, validated at 3:1 on the panel; a running day is a lighter step, always labelled. */
  --chart-bar: #8c7b83;
  --chart-bar-partial: #d77fa6;
  --chart-grid: #ebe7df;
  --handle: #d8d3c8;
  --mark-bg: #fbe0ec;
  --option-active: #f8e6ee;

  /* Nail formula & backbar shade swatches (domain tokens). */
  --shade-biab: #efc9d2;
  --shade-nude: #dfbda8;
  --shade-bordeaux: #6b1d2f;
  --shade-milky: #f5e6e8;
  --shade-coral: #e49582;
  --shade-sage: #bfd1c1;
  --shade-clear: #e4e2e8;
}

/* A touch screen of any width (an iPad at the desk): filters and tabs reach 44 like the phone's (D-070). */
@media (pointer: coarse) {
  [data-direction="porcelain"] {
    --chip-filter: 44px;
  }
}

/* The phone: titles one step smaller, surfaces 24 to follow the screen's corners, filters reach 44. */
@media (max-width: 699px) {
  [data-direction="porcelain"] {
    --text-screen: var(--text-lead);
    --lh-screen: var(--lh-lead);
    --text-display: var(--text-title);
    --lh-display: var(--lh-title);
    --text-hero: var(--text-figure);
    --lh-hero: var(--lh-figure);
    --r-surface: 24px;
    --chip-filter: 44px;
  }
}

[data-direction="porcelain"][data-theme="dark"] {
  --logo-shine: rgba(21, 19, 18, 0.55);
  --hover: rgba(255, 255, 255, 0.07);
  --press: rgba(255, 255, 255, 0.13);
  --hover-accent: rgba(240, 122, 174, 0.12);
  --press-accent: rgba(240, 122, 174, 0.22);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 22px -8px rgba(0, 0, 0, 0.7);

  --canvas: #151413;
  --ink: #f5f2ed;
  --ink-2: #c4bdb6;
  --ink-3: #9e968f;
  --focus: #f07aae;

  --accent: #f07aae;
  --accent-ink: #2a0b19;
  --accent-soft: #3a1f2d;
  --accent-soft-ink: #f7b3d1;

  --nav-bg: #1c1a18;
  --nav-line: #2e2a26;
  --nav-ink: #f5f2ed;
  --nav-ink-2: #c4bdb6;
  --nav-active-bg: #3a1f2d;
  --nav-active-ink: #f7b3d1;

  --top-bg: #151413;
  --top-ink: #f5f2ed;
  --top-ink-2: #c4bdb6;
  --search-bg: #1c1a18;
  --search-line: #36312c;

  --walkin-bg: #1c1a18;
  --walkin-line: #2e2a26;
  --walkin-ink: #f5f2ed;
  --walkin-ink-2: #c4bdb6;
  --walkin-icon-bg: #3a1f2d;
  --walkin-icon-ink: #f07aae;
  --strip-bg: #25221f;

  --turn-bg: #1c1a18;
  --turn-ink: #f5f2ed;
  --turn-ink-2: #c4bdb6;
  --head-line: #2e2a26;
  --next-bg: #261b22;

  --ok: #5cc98a;
  --ok-soft: #173325;
  --ok-ink: #8fe0b0;
  --busy: #a3a7ff;
  --warn: #e8a33d;
  --warn-soft: #3a2a10;
  --warn-ink: #f8cf84;
  --danger-soft: #3d1a1a;
  --danger-ink: #f49b9b;
  --danger-line: #6e2c2c;
  --danger: #e57373;
  --danger-on: #1c0e0e;
  --accent-line: #7d3a5a;
  --reward-soft: #3a2e16;
  --reward-ink: #e9c77f;

  --cal-bg: #191715;
  --col-bg: #191715;
  --grid-line: #2b2723;
  --grid-line-half: #221f1c;
  --gutter-ink: #9e968f;
  --now-line: #f07aae;
  --now-ink: #2a0b19;
  --badge-bg: rgba(0, 0, 0, 0.22);
  --cal-fade: rgba(25, 23, 21, 0.92);
  --cal-fade-shadow: 0 16px 12px -4px var(--cal-fade);

  --done-bg: #1f1d1a;
  --done-line: #2e2a26;
  --hatch: rgba(255, 255, 255, 0.06);
  --off-bg: #1f1d1a;
  --off-stripe: #262320;
  --free-bg: rgba(240, 122, 174, 0.06);
  --free-line: #7a3e5a;
  --free-ink: #f7b3d1;

  --shadow-appt: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35), 0 6px 14px -8px rgba(0, 0, 0, 0.45);
  --shadow-fab: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 24px -4px rgba(0, 0, 0, 0.7);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlap: -6px 0 12px -8px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-hair: 0 1px 1px rgba(0, 0, 0, 0.4);
  --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.45), 0 8px 18px -6px rgba(0, 0, 0, 0.7);
  --shadow-primary-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.5), 0 10px 22px -6px rgba(0, 0, 0, 0.8);
  --shadow-primary-press: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-tonal: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(240, 122, 174, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-tonal-hover: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(240, 122, 174, 0.34), inset 0 0 0 999px var(--hover-accent), 0 2px 5px rgba(0, 0, 0, 0.45);
  --shadow-tonal-press: inset 0 0 0 1px rgba(240, 122, 174, 0.36), inset 0 0 0 999px var(--press-accent);
  --shadow-danger: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.45), 0 8px 18px -6px rgba(0, 0, 0, 0.7);
  --shadow-danger-tonal: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(229, 115, 115, 0.24), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-danger-tonal-hover: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(229, 115, 115, 0.36), inset 0 0 0 999px var(--hover-accent), 0 2px 5px rgba(0, 0, 0, 0.45);
  --shadow-danger-tonal-press: inset 0 0 0 1px rgba(229, 115, 115, 0.38), inset 0 0 0 999px var(--press-accent);
  --page-bg: #151312;
  --card-line: #36302b;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 32px -12px rgba(0, 0, 0, 0.65);
  --ad-canvas-bg:
    radial-gradient(980px 600px at 82% 8%, rgba(168, 40, 95, 0.18), transparent 64%),
    radial-gradient(860px 540px at 12% 28%, rgba(184, 108, 46, 0.14), transparent 64%),
    radial-gradient(900px 580px at 86% 74%, rgba(42, 122, 92, 0.14), transparent 64%),
    radial-gradient(780px 500px at 18% 90%, rgba(108, 76, 168, 0.12), transparent 64%),
    #141211;
  --ad-pill-bg: #221f1c;
  --ad-hero-bg:
    radial-gradient(90% 110% at 92% 0%, rgba(168, 40, 95, 0.16), transparent 62%),
    radial-gradient(85% 100% at 8% 100%, rgba(184, 108, 46, 0.12), transparent 62%),
    #1d1a18;
  --ad-stage-bg:
    radial-gradient(120% 90% at 14% 0%, rgba(168, 40, 95, 0.22), transparent 60%),
    radial-gradient(100% 85% at 90% 100%, rgba(184, 108, 46, 0.16), transparent 62%),
    #26211e;
  --shadow-stage: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 4px #2a2521, 0 10px 24px rgba(0, 0, 0, 0.55), 0 28px 64px -14px rgba(0, 0, 0, 0.85);
  --shadow-satellite: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 3px #2a2521, 0 8px 20px rgba(0, 0, 0, 0.55), 0 24px 52px -12px rgba(0, 0, 0, 0.85);
  --shadow-spotlight: inset 0 0 0 2px var(--t-solid), 0 8px 20px -6px rgba(0, 0, 0, 0.55);
  --control-line: #3b3530;
  --shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-control-hover: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-option-on: inset 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --check-line: rgba(255, 255, 255, 0.24);
  --shadow-well-in: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--panel-divider);
  --shadow-well-ok: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(92, 201, 138, 0.24), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-well-warn: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--warn-line), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-banner: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-avatar: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-badge: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-box-active: inset 3px 0 0 var(--accent), var(--shadow-card);
  --text-relief: 0 1px 0 var(--logo-shine);
  --shadow-chip: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(240, 122, 174, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-chip-neutral: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-chip-ok: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(92, 201, 138, 0.24), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-chip-warn: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(232, 163, 61, 0.26), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-chip-danger: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(229, 115, 115, 0.26), 0 1px 2px rgba(0, 0, 0, 0.35);
  --chip-neutral-bg: rgba(45, 41, 37, 0.84);
  --chip-accent-bg: rgba(66, 31, 48, 0.84);
  --chip-ok-bg: rgba(23, 54, 38, 0.86);
  --chip-warn-bg: rgba(54, 38, 12, 0.90);
  --chip-danger-bg: rgba(65, 26, 26, 0.86);
  --chip-reward-bg: rgba(60, 46, 22, 0.86);
  --tag-bg: rgba(44, 40, 36, 0.82);
  --shadow-bar: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-check-on: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 3px rgba(0, 0, 0, 0.45);
  --field-line: #3e3832;
  --shadow-field: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-track: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--panel-divider);
  --shadow-seg: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-switch-track: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  --knob: #f5f2ed;
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 6px -1px rgba(0, 0, 0, 0.35);

  --t1-solid: #e27aa6;
  --t1-on: #2a0b19;
  --t1-soft: #33202a;
  --t1-line: #4d2c3c;
  --t1-ink: #f5b3cf;
  --t1-col: #191715;
  --t2-solid: #5fbf8c;
  --t2-on: #0b2417;
  --t2-soft: #1b2d24;
  --t2-line: #2a4a39;
  --t2-ink: #a4e2bf;
  --t2-col: #191715;
  --t3-solid: #6ea2e6;
  --t3-on: #0d1e33;
  --t3-soft: #1b2533;
  --t3-line: #2b3f5a;
  --t3-ink: #aecbf2;
  --t3-col: #191715;
  --t4-solid: #e59a5b;
  --t4-on: #2b1606;
  --t4-soft: #2f2219;
  --t4-line: #4d3726;
  --t4-ink: #f4c79f;
  --t4-col: #191715;
  --t5-solid: #a58ce8;
  --t5-on: #1d0f3a;
  --t5-soft: #251f33;
  --t5-line: #3d3157;
  --t5-ink: #cdbdf5;
  --t5-col: #191715;
  --t6-solid: #5cc2c0;
  --t6-on: #072423;
  --t6-soft: #172b2b;
  --t6-line: #264545;
  --t6-ink: #a2e3e1;
  --t6-col: #191715;
  --t7-solid: #ef8a73;
  --t7-on: #2d0c05;
  --t7-soft: #33201b;
  --t7-line: #52322a;
  --t7-ink: #f7bfb1;
  --t7-col: #191715;
  --t8-solid: #b7c46a;
  --t8-on: #1e2205;
  --t8-soft: #262a18;
  --t8-line: #3e4426;
  --t8-ink: #d8e2a0;
  --t8-col: #191715;

  --warn-line: #5a4318;
  --skel: #292522;
  --skel-shine: rgba(255, 255, 255, 0.06);
  --gutter-bg: #191715;
  --message-bg: #1f1d1a;
  --message-line: #2e2a26;
  --message-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
  --scrim: rgba(0, 0, 0, 0.5);
  --panel-bg: #1f1d1a;
  --panel-solid: #1f1d1a;
  /* A selected segment sits raised on its track: lighter than the track in both themes. */
  --seg-on: #3a342f;
  --panel-line: #2e2a26;
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 28px 64px -20px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4);
  --panel-divider: #2e2a26;
  --panel-well: #262320;
  --stamp-line: #7a3e5a;
  --switch-off: #746c64; /* 3.1:1 on the dark panel */
  --chart-bar: #9d8b8a;
  --chart-bar-partial: #9a4a70;
  --chart-grid: #2e2a26;
  --handle: #4d4640;
  --mark-bg: #4a2236;
  --option-active: #3a1f2d;
}

/* ---- Glass (round 2): layers over Porcelain. Liquid builds on the base glass values. ---- */

[data-direction="porcelain"][data-glass] {
  /* Sculpted architectural stone & warm rose-travertine, lit with multi-hue ambient depth at the corners. Static: no motion to reduce. */
  --backdrop-base: #efeae0;
  --backdrop:
    radial-gradient(60% 55% at 6% 0%, rgba(232, 168, 198, 0.5), transparent 70%),
    radial-gradient(50% 50% at 96% 6%, rgba(206, 192, 232, 0.42), transparent 70%),
    radial-gradient(55% 55% at 88% 100%, rgba(236, 196, 158, 0.46), transparent 70%),
    radial-gradient(45% 45% at 10% 96%, rgba(176, 218, 198, 0.38), transparent 70%),
    var(--backdrop-base);
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-solid: #ffffff;
  --glass-blur: 22px;
  --glass-saturate: 1.3;
  --glass-edge: rgba(255, 255, 255, 0.94);
  --glass-rim: rgba(255, 255, 255, 0.98);
  --glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 45%, rgba(248, 240, 243, 0.16) 100%);
  --glass-shadow: 0 1px 2px rgba(34, 28, 32, 0.05), 0 14px 34px -16px rgba(42, 32, 38, 0.16);
  --head-glass-bg: rgba(255, 255, 255, 0.97);
  /* Chromium drops large blurs on the sticky header inside the scroller; keep it small. */
  --head-blur: 10px;
  --sheet-bg: rgba(255, 255, 255, 0.96);
  --sheet-solid: #ffffff;
  --sheet-blur: 0px;
  --sheet-shadow: 0 1px 2px rgba(46, 30, 48, 0.05), 0 20px 48px -24px rgba(76, 40, 70, 0.28);

  /* Text over translucent layers gets a little more weight than on solid Porcelain. */
  --ink-3: #66606d;
  --gutter-ink: #66606d;

  --canvas: var(--backdrop-base);
  --nav-bg: transparent;
  --nav-line: transparent;
  --top-bg: transparent;
  --turn-bg: transparent;
  --walkin-bg: transparent;
  --walkin-line: rgba(30, 26, 34, 0.08);
  --head-line: rgba(30, 26, 34, 0.07);
  --search-bg: #f6f4ee;
  --search-line: #dfd9cd;
  --strip-bg: #f4f1ea;
  --next-bg: rgba(248, 230, 238, 0.72);
  --cal-bg: transparent;
  --col-bg: transparent;
  --done-bg: rgba(246, 245, 247, 0.92);
  --shadow-appt: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(30, 26, 34, 0.05), 0 6px 14px -10px rgba(30, 26, 34, 0.18);
  --skel: rgba(30, 26, 34, 0.07);
  --skel-shine: rgba(255, 255, 255, 0.65);
  --gutter-bg: var(--head-glass-bg);
  /* Cards over the sheet are solid, never a second glass layer. */
  --message-bg: #ffffff;
  --message-line: #dfd9cd;
  --message-shadow: inset 0 1px 0 #ffffff, 0 18px 40px -20px rgba(76, 40, 70, 0.35);
  --scrim: rgba(46, 24, 52, 0.22);
  --panel-bg: #ffffff;
  --panel-solid: #ffffff;
  /* A selected segment sits raised on its track: lighter than the track in both themes. */
  --seg-on: #ffffff;
  --panel-line: #dfd9cd;
  --panel-shadow: inset 0 1px 0 #ffffff, 0 30px 70px -28px rgba(76, 40, 70, 0.5);
  --panel-divider: #e4dfd5;
  --panel-well: #f3f0e8;
  --card-line: #dbd5c8;
  --control-line: #d6cfc2;
  --field-line: #d6cfc2;
}

[data-direction="porcelain"][data-glass="liquid"] {
  /* Sculpted architectural stone & warm blush-travertine behind the rail, top bar and sheet edges. */
  --backdrop:
    radial-gradient(45% 65% at 0% 45%, rgba(232, 164, 196, 0.56), transparent 70%),
    radial-gradient(48% 58% at 42% 0%, rgba(204, 188, 232, 0.46), transparent 70%),
    radial-gradient(42% 60% at 100% 0%, rgba(236, 194, 156, 0.48), transparent 70%),
    radial-gradient(48% 55% at 96% 100%, rgba(232, 172, 198, 0.44), transparent 70%),
    radial-gradient(52% 60% at 22% 100%, rgba(172, 216, 196, 0.42), transparent 70%),
    var(--backdrop-base);
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-blur: 32px;
  --glass-saturate: 1.4;
  --glass-edge: rgba(255, 255, 255, 0.96);
  --glass-rim: rgba(255, 255, 255, 1);
  --glass-sheen: linear-gradient(150deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 45%, rgba(248, 238, 242, 0.2) 100%);
  --head-glass-bg: rgba(255, 255, 255, 0.97);
  --head-blur: 12px;
  /* D-070: 90%, not 74%: the buttons behind a sheet no longer show through its header. */
  --sheet-bg: rgba(255, 255, 255, 0.96);
  --sheet-blur: 24px;
  --search-bg: #f6f4ee;
  --strip-bg: #f4f1ea;
  --next-bg: rgba(248, 232, 238, 0.75);
}

/* Porcelain Night: warm mineral obsidian matching light mode's grounded architectural opacity. */
[data-direction="porcelain"][data-glass][data-theme="dark"] {
  --backdrop-base: #121110;
  --backdrop:
    radial-gradient(60% 55% at 6% 0%, rgba(156, 42, 92, 0.24), transparent 70%),
    radial-gradient(50% 50% at 96% 6%, rgba(104, 76, 158, 0.18), transparent 70%),
    radial-gradient(55% 55% at 88% 100%, rgba(164, 96, 48, 0.18), transparent 70%),
    radial-gradient(45% 45% at 10% 96%, rgba(44, 112, 86, 0.16), transparent 70%),
    var(--backdrop-base);
  --glass-bg: #1c1a18;
  --glass-solid: #1c1a18;
  --glass-edge: #332e29;
  --glass-rim: rgba(255, 255, 255, 0.07);
  --glass-sheen: none;
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -18px rgba(0, 0, 0, 0.7);
  --head-glass-bg: #1c1a18;
  --sheet-bg: #191715;
  --sheet-solid: #191715;
  --sheet-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 48px -24px rgba(0, 0, 0, 0.75);
  --walkin-line: #332e29;
  --head-line: #2e2a26;
  --search-bg: #25221f;
  --search-line: #3a342f;
  --strip-bg: #25221f;
  --next-bg: rgba(240, 122, 174, 0.14);
  --done-bg: #1f1d1a;
  --ink-3: #aba39b;
  --gutter-ink: #aba39b;
  --shadow-appt: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35), 0 6px 14px -8px rgba(0, 0, 0, 0.45);
  --skel: rgba(255, 255, 255, 0.07);
  --skel-shine: rgba(255, 255, 255, 0.06);
  --message-bg: #1f1d1a;
  --message-line: #36302b;
  --message-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px -18px rgba(0, 0, 0, 0.75);
  --scrim: rgba(8, 7, 6, 0.5);
  --panel-bg: #1f1d1a;
  --panel-solid: #1f1d1a;
  /* A selected segment sits raised on its track: lighter than the track in both themes. */
  --seg-on: #3a342f;
  --panel-line: #36302b;
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 70px -24px rgba(0, 0, 0, 0.85);
  --panel-divider: #2e2a26;
  --panel-well: #262320;
  --card-line: #36302b;
  --control-line: #3d3731;
  --field-line: #423b35;
}

[data-direction="porcelain"][data-glass="liquid"][data-theme="dark"] {
  --backdrop:
    radial-gradient(45% 65% at 0% 45%, rgba(168, 44, 98, 0.26), transparent 70%),
    radial-gradient(48% 58% at 42% 0%, rgba(112, 80, 168, 0.2), transparent 70%),
    radial-gradient(42% 60% at 100% 0%, rgba(172, 102, 52, 0.22), transparent 70%),
    radial-gradient(48% 55% at 96% 100%, rgba(152, 48, 92, 0.2), transparent 70%),
    radial-gradient(52% 60% at 22% 100%, rgba(46, 118, 92, 0.2), transparent 70%),
    var(--backdrop-base);
  --glass-bg: #1c1a18;
  --head-glass-bg: #1c1a18;
  --sheet-bg: #191715;
  --glass-rim: rgba(255, 255, 255, 0.08);
  --ink-2: #d2cbc4;
  --top-ink-2: #d2cbc4;
  --walkin-ink-2: #d2cbc4;
  --turn-ink-2: #d2cbc4;
}

/* ---- Solid fallback values: reduce transparency, no backdrop-filter, or "Solid" ---- */

[data-glass][data-transparency="solid"] {
  --glass-bg: var(--glass-solid);
  --head-glass-bg: var(--glass-solid);
  --sheet-bg: var(--sheet-solid);
  --panel-bg: var(--panel-solid);
  --glass-sheen: none;
  --backdrop: var(--backdrop-base);
}

@media (prefers-reduced-transparency: reduce) {
  [data-glass] {
    --glass-bg: var(--glass-solid);
    --head-glass-bg: var(--glass-solid);
    --sheet-bg: var(--sheet-solid);
    --panel-bg: var(--panel-solid);
    --glass-sheen: none;
    --backdrop: var(--backdrop-base);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-glass] {
    --glass-bg: var(--glass-solid);
    --head-glass-bg: var(--glass-solid);
    --sheet-bg: var(--sheet-solid);
    --panel-bg: var(--panel-solid);
  }
}

/* Glass composition (D-013): where glass goes. Values come from design/tokens.css.
   - Glass only on chrome: rail, top bar, now-bar and the sticky team header. Never glass on glass.
   - The calendar is a porcelain sheet (near-opaque); appointments stay solid so text never sits on blur.
   - At most five blurred layers on screen.
   - Reduce Transparency, missing backdrop-filter, or data-transparency="solid" switch every panel to solid. */

[data-glass] .desk {
  --desk-pad: 12px;
  gap: var(--space-3);
  background: var(--backdrop);
}

[data-glass] .nav,
[data-glass] .topbar,
[data-glass] .walkins,
[data-glass] .cal-head {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

[data-glass] .nav,
[data-glass] .topbar,
[data-glass] .walkins {
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shadow);
}

[data-glass] .topbar:not(.page-top) {
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
}

[data-glass] .walkins {
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
}

[data-glass] .walkins-icon {
  background: rgba(255, 255, 255, 0.7);
}

[data-glass][data-theme="dark"] .walkins-icon {
  background: var(--walkin-icon-bg);
}

/* The calendar and app-page sheets: porcelain, not glass. Their sticky header is the one glass layer inside. */
[data-glass] :is(.cal, .page-main) {
  border: 1px solid var(--glass-edge);
  background: var(--sheet-bg);
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--sheet-shadow);
  -webkit-backdrop-filter: blur(var(--sheet-blur));
  backdrop-filter: blur(var(--sheet-blur));
}

[data-glass] .cal {
  overflow: hidden;
}

[data-glass] .cal-head {
  background-color: var(--head-glass-bg);
  -webkit-backdrop-filter: blur(var(--head-blur)) saturate(1.3);
  backdrop-filter: blur(var(--head-blur)) saturate(1.3);
  box-shadow: inset 0 -1px 0 var(--head-line);
  border-bottom: 0;
}

[data-glass] .turn {
  border-left-color: transparent;
}

/* A wide day scrolls sideways under the pinned hours: same small blur as the team header. */
[data-glass] .desk--wide .cal-gutter {
  -webkit-backdrop-filter: blur(var(--head-blur));
  backdrop-filter: blur(var(--head-blur));
}

[data-glass] .notice {
  margin: 0;
}

/* Dialogs float above a scrim. Their panel is near-opaque with the header's small blur, which only
   softens what is behind it; text never depends on it. Sheets too: without the blur, the calendar's
   text read through the panel. */
[data-glass] :is(.details-sheet, .search-panel, .sheet-panel) {
  -webkit-backdrop-filter: blur(var(--head-blur)) saturate(1.3);
  backdrop-filter: blur(var(--head-blur)) saturate(1.3);
}

[data-glass] .turn.is-next {
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* Liquid: more room for the light, a brighter double rim, glossy accents. */
[data-glass="liquid"] .desk {
  --desk-pad: 16px;
  gap: var(--space-4);
}

[data-glass="liquid"] :is(.nav, .topbar, .walkins) {
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.25), var(--glass-shadow);
}

[data-glass="liquid"] :is(.cal, .page-main) {
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px rgba(255, 255, 255, 0.25), var(--sheet-shadow);
}

[data-glass="liquid"][data-theme="dark"] :is(.nav, .topbar, .walkins) {
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shadow);
}

[data-glass="liquid"][data-theme="dark"] :is(.cal, .page-main) {
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--sheet-shadow);
}

[data-glass="liquid"] :is(.btn-primary, .fab, .next-tag, .nav-badge, .cal-now-label) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
}

[data-glass="liquid"] :is(.details-status, .page-status, .client-tag, .wa-cat, .wa-pending, .lock-open, .notice-pending, .details-chips li, .profile-tags li, .link-tech-tags span, .sheet-option-tag) {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0) 68%);
  -webkit-backdrop-filter: blur(10px) saturate(1.45);
  backdrop-filter: blur(10px) saturate(1.45);
}

[data-glass="liquid"][data-theme="dark"] :is(.details-status, .page-status, .client-tag, .wa-cat, .wa-pending, .lock-open, .notice-pending, .details-chips li, .profile-tags li, .link-tech-tags span, .sheet-option-tag) {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 68%);
}

[data-glass="liquid"][data-transparency="solid"] :is(.btn-primary, .fab, .next-tag, .nav-badge, .cal-now-label, .details-status, .page-status, .client-tag, .wa-cat, .wa-pending, .lock-open, .notice-pending, .details-chips li, .profile-tags li, .link-tech-tags span, .sheet-option-tag) {
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 699px) {
  [data-glass] .desk {
    --desk-pad: 8px;
    gap: var(--space-2);
    /* The bar floats in glass, so the desk keeps it clear of the home indicator. */
    padding-bottom: calc(8px + var(--safe-bottom));
  }

  [data-glass] .nav {
    padding: var(--space-1);
  }

  /* Cards pass under the team header fading out, not sliced through a line of text. */
  [data-glass] .cal-head {
    box-shadow: var(--cal-fade-shadow);
  }

  [data-glass] .turn {
    border: 1px solid var(--glass-edge);
    background: rgba(255, 255, 255, 0.5);
  }

  [data-glass][data-theme="dark"] .turn {
    background: rgba(255, 255, 255, 0.04);
  }

  [data-glass] .fab {
    bottom: calc(92px + var(--safe-bottom));
  }
}

[data-glass][data-transparency="solid"] :is(.nav, .topbar, .walkins, .cal-head, .cal, .page-main, .cal-gutter, .details-sheet, .search-panel, .sheet-panel) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-transparency: reduce) {
  [data-glass] :is(.nav, .topbar, .walkins, .cal-head, .cal, .page-main, .cal-gutter, .details-sheet, .search-panel, .sheet-panel) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* plus-jakarta-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/plus-jakarta-sans-latin-ext-wght-normal-DmpS2jIq.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* plus-jakarta-sans-latin-wght-normal */
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/plus-jakarta-sans-latin-wght-normal-eXO_dkmS.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}