@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Fonts keep stable URLs two levels above the hashed stylesheet (<base>/v/<hash>/app.css). */
  src: url("../../vendor/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Fonts keep stable URLs two levels above the hashed stylesheet (<base>/v/<hash>/app.css). */
  src: url("../../vendor/fonts/Geist-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Fonts keep stable URLs two levels above the hashed stylesheet (<base>/v/<hash>/app.css). */
  src: url("../../vendor/fonts/Epilogue-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Fonts keep stable URLs two levels above the hashed stylesheet (<base>/v/<hash>/app.css). */
  src: url("../../vendor/fonts/HankenGrotesk-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Fonts keep stable URLs two levels above the hashed stylesheet (<base>/v/<hash>/app.css). */
  src: url("../../vendor/fonts/Fraunces-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  /* Fonts keep stable URLs two levels above the hashed stylesheet (<base>/v/<hash>/app.css). */
  src: url("../../vendor/fonts/MonaSansVF.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  /* Fonts keep stable URLs two levels above the hashed stylesheet (<base>/v/<hash>/app.css). */
  src: url("../../vendor/fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
}

/* Each element with data-font resolves its own headline font, so picker previews never inherit a pairing. */
:root,
[data-font] {
  --heading-font: var(--app-font);
}

:root,
[data-font="geist"] {
  --app-font: Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-font="inter"] {
  --app-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-font="epilogue"] {
  --app-font: Epilogue, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-font="hanken-fraunces"] {
  --app-font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-font: Fraunces, Georgia, "Times New Roman", serif;
}

[data-font="mona-sans"] {
  --app-font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-font="atkinson-hyperlegible"] {
  --app-font: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-font="system"] {
  --app-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Light thins running text only; headings, labels and buttons keep their weights so hierarchy stays. */
:root,
[data-weight="regular"] {
  --text-weight: 400;
}

[data-weight="light"] {
  --text-weight: 300;
}

/* Text sizes are in rem, so Large scales all text (ours and daisyUI's) from this one root size. */
html[data-size="large"] {
  font-size: 112.5%;
}

/* Lets each size choice preview itself before it is picked. */
[data-size-preview="large"] .font-choice-name {
  font-size: calc(0.9375rem * 1.125);
}

[data-size-preview="large"] .font-choice-hint {
  font-size: calc(0.75rem * 1.125);
}

h1,
h2,
h3,
.card-title {
  font-family: var(--heading-font);
}

:root {
  --bg-soft: var(--color-base-200);
  --ink: var(--color-base-content);
  --muted: color-mix(in srgb, var(--color-base-content) 85%, var(--color-base-100));
  --line: var(--color-base-300);
  --panel: var(--color-base-100);
  --primary-ink: var(--color-primary);
  --accent: var(--color-secondary);
  --accent-ink: var(--color-secondary-content);
  --danger: var(--color-error);
  --warn: var(--color-warning);
  --ok: var(--color-success);
}

/* Same per-theme rules as MyPlanner. Pale primary colours work as fills; text and focus rings
   drawn with them need dark ink. */
:root:is([data-theme="champagne-dawn"], [data-theme="coffee-cream-delight"]) {
  --primary-ink: var(--color-secondary);
}

/* Low-contrast palettes keep secondary text close to body text to stay readable. */
:root:is([data-theme="solarized-light"]) {
  --muted: color-mix(in srgb, var(--color-base-content) 95%, var(--color-base-100));
}

:root:is([data-theme="solarized-dark"]) {
  --muted: color-mix(in srgb, var(--color-base-content) 97%, var(--color-base-100));
}

:is([data-theme="champagne-dawn"], [data-theme="coffee-cream-delight"]) :is(.toggle-primary, .checkbox-primary, .radio-primary, .btn-outline.btn-primary, .btn-ghost.btn-primary) {
  --color-primary: var(--primary-ink);
}
:is([data-theme="champagne-dawn"], [data-theme="coffee-cream-delight"]) .btn-primary:not(.btn-outline, .btn-ghost) {
  border-color: var(--primary-ink);
}
:is([data-theme="champagne-dawn"], [data-theme="coffee-cream-delight"]) :is(.text-primary, .link-primary) {
  color: var(--primary-ink);
}
:is([data-theme="champagne-dawn"], [data-theme="coffee-cream-delight"]) :focus-visible {
  outline-color: var(--primary-ink);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 26%, var(--color-base-100) 0, var(--color-base-200) 48%, var(--color-base-200) 140%);
  color: var(--ink);
  font-family: var(--app-font);
  font-weight: var(--text-weight);
  letter-spacing: 0;
}

.topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--color-base-100) 88%, transparent);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--accent);
  text-decoration: none;
  font-weight: 850;
  font-size: 1rem;
  padding: 0;
  min-height: 44px;
}

.brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.topnav a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 720;
}

.settings-menu,
.language-menu {
  position: relative;
}

.settings-menu summary,
.language-menu summary {
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

.settings-menu summary::-webkit-details-marker,
.language-menu summary::-webkit-details-marker {
  display: none;
}

.settings-menu summary:focus-visible,
.language-menu summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.profile-trigger,
.language-trigger {
  min-height: 44px;
  width: 44px;
  padding: 0;
}

.language-flag {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-base-content) 18%, transparent);
}

.profile-avatar {
  display: grid !important;
  place-items: center;
}

.profile-avatar svg {
  width: 24px;
  height: 24px;
  display: block;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  width: min(280px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-base-100) 98%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 14%, transparent);
}

.language-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  display: grid;
  gap: 6px;
  width: max-content;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-base-100) 98%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 14%, transparent);
}

.settings-action-form {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.theme-picker {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 8px;
}

.theme-group-label {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.theme-choice {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 2.75rem;
  height: auto;
  justify-content: flex-start;
  padding-inline: 10px;
  text-align: left;
  white-space: normal;
}

.theme-choice-active {
  background: var(--color-base-200);
}

.theme-choice:has(.theme-radio:checked) {
  background: var(--color-base-200);
  outline: 2px solid var(--primary-ink);
}

.theme-radio {
  flex: 0 0 auto;
}

.theme-swatch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 34px;
  height: 22px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--color-base-300);
  border-radius: 6px;
  background: var(--color-base-100);
}

.theme-swatch-primary { background: var(--color-primary); }
.theme-swatch-secondary { background: var(--color-secondary); }
.theme-swatch-base { background: var(--color-base-100); }

.theme-check {
  margin-left: auto;
  opacity: 0;
}

.theme-choice-active .theme-check,
.theme-choice:has(.theme-radio:checked) .theme-check {
  opacity: 1;
}

.font-choice-label {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-family: var(--app-font);
}

.font-choice-name {
  font-family: var(--heading-font);
  font-size: 0.9375rem;
  font-weight: 650;
}

.font-choice-hint {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: calc(var(--text-weight) + 50);
  line-height: 1.3;
}

.theme-status {
  min-height: 1.2em;
  margin: 2px 0 0;
  color: var(--color-error);
  font-size: 0.75rem;
  line-height: 1.3;
}

.appearance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 24px;
  align-items: start;
}

.appearance-choices {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.appearance-choices h2,
.appearance-preview h2 {
  margin: 0 0 .5rem;
  font-size: 1.0625rem;
}

/* The preview stays in view while the long list of choices scrolls past it. */
.appearance-preview {
  position: sticky;
  top: 5rem;
  display: grid;
  gap: 8px;
}

.appearance-preview-card {
  display: grid;
  gap: 8px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: var(--panel);
}

.appearance-preview-day {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 650;
}

.appearance-preview-card .appt-block {
  /* Stacked like .appt-link in the calendar, which the preview omits. */
  display: flex;
  flex-direction: column;
  margin: 0;
}

.appearance-preview-copy {
  margin: 4px 0 0;
  font-size: 0.875rem;
}

.appearance-preview-card .btn {
  justify-self: start;
  pointer-events: none;
}

@media (max-width: 860px) {
  .appearance-layout {
    grid-template-columns: 1fr;
  }

  .appearance-preview {
    position: static;
  }
}


h1 { font-size: 2rem; font-weight: 750; line-height: 1.2; margin: 1.5rem 0; }
/* Page titles sit one step below the default h1 to leave room for content. */
:root { --page-title-size: 1.6rem; }
h2 { font-size: 1.35rem; font-weight: 700; margin: 1rem 0; }
h3 { font-size: 1.1rem; font-weight: 650; margin: .75rem 0; }
p { margin: .75rem 0; }
.page { max-width: 72rem; margin: 0 auto; }
/* The one page padding rule; pages may still differ in content width. */
.app-page { padding: 1.5rem; }
.page-heading { display: grid; gap: .35rem; margin: 0 0 1.25rem; }
.page-back { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: .875rem; font-weight: 650; text-decoration: none; }
.page-back:hover { text-decoration: underline; text-underline-offset: .2em; }
.page-heading-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.page-heading-copy { min-width: 0; }
.page-heading h1 { margin: 0; font-size: var(--page-title-size); }
.page-heading .lead { margin: .35rem 0 0; color: var(--muted); max-width: 65ch; }
.page-heading-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-hero { padding-top: clamp(3rem, 8vw, 6rem); }
.page-hero .eyebrow { text-transform: uppercase; font-weight: 800; color: var(--accent); }
.page-hero h1 { margin: .5rem 0 1rem; font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 500; color: var(--accent); }
.page-hero .muted { font-size: clamp(1.15rem, 2.5vw, 1.4rem); }
.page-hero .btn { margin-top: 1rem; }
.muted { color: var(--muted); }
.views { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.views a { text-decoration: none; }
.notice { display: block; margin: 0 0 1rem; }
.notice a { text-decoration: underline; }
.panel, .month-cell { padding: 1rem; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-box); }
.panel { margin-bottom: 1rem; }
/* DaisyUI's card display would otherwise override the hidden attribute. */
.install-app-card[hidden] { display: none; }
form.inline { display: inline; }
.form-stack { display: grid; gap: .5rem; margin-top: .5rem; }
label { display: block; margin: .75rem 0 .3rem; }
label:has(.checkbox) { display: flex; gap: .6rem; align-items: center; }
form > .btn { margin-top: 1rem; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin: 1rem 0; }
.month-cell { text-decoration: none; color: inherit; min-height: 4.5rem; overflow-wrap: anywhere; }
.muted-cell { color: var(--muted); background: var(--bg-soft); }
.memberships { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; }
.memberships a { text-decoration: none; }
.settings-panel { display: flex; flex-direction: column; flex-wrap: nowrap; gap: .4rem; max-height: calc(100dvh - 90px); overflow-y: auto; }
.settings-panel > * { flex-shrink: 0; }
.settings-panel .btn { white-space: normal; height: auto; min-height: 2.75rem; text-align: left; }
.settings-panel .settings-action-form { margin: .25rem 0 0; padding-top: .5rem; }
.settings-panel form > .btn { margin-top: 0; }
.profile-name { padding: .4rem .75rem .75rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.settings-theme-picker { margin-top: .5rem; }
.theme-options .btn { margin: 0; }
.language-option[aria-current="true"] { background: var(--color-base-200); }
@media (max-width: 640px) {
  .topbar { padding: 0 1rem; gap: .5rem; }
  .topnav { gap: .5rem; }
  .app-page { padding: 1rem; }
  .page-hero { padding-top: 3rem; }
  .month-cell { padding: .4rem; }
  .theme-options { grid-template-columns: minmax(0, 1fr); }
}

form.panel > .btn { align-self: flex-start; }

/* Operational surfaces: compact schedules, deliberate disclosure, clear recovery. */
:root { scrollbar-color: var(--line) var(--bg-soft); }
::selection { background: var(--color-primary); color: var(--color-primary-content); }
input, textarea { caret-color: var(--ink); }
:where(a, button, input, select, summary, [tabindex="0"]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:where(main, .appointment-name, .appointment-body, .panel) { min-width: 0; overflow-wrap: anywhere; }
.skip-link { position: absolute; left: 1rem; top: -100vh; z-index: 30; padding: .75rem 1rem; border-radius: var(--radius-field); background: var(--panel); color: var(--ink); }
.skip-link:focus { top: .75rem; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: .22em; }
.language-panel { grid-auto-flow: row; min-width: 11rem; }
.language-option { justify-content: flex-start; gap: .75rem; width: 100%; }
.language-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; }
.administration-menu { position: relative; }
.administration-links { position: absolute; z-index: 5; min-width: 14rem; padding: .5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-box); box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--ink) 12%, transparent); }
.administration-links a { display: block; padding: .7rem; min-height: 44px; }
.appt, .appt.requested, .appt.cancelled, .appt.rejected, .appt.expired { border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--panel); padding: 0; }
.appt { margin-bottom: .6rem; }
.appointment-trigger { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto; gap: .35rem .75rem; padding: .9rem; cursor: pointer; list-style: none; }
.appointment-trigger::-webkit-details-marker { display: none; }
.appointment-trigger::after { content: ""; grid-column: 3; grid-row: 1; width: .5rem; height: .5rem; margin: .35rem .2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.appt[open] > .appointment-trigger::after { transform: rotate(225deg); }
.appointment-trigger:hover { background: var(--bg-soft); }
.appointment-clock { font-variant-numeric: tabular-nums; font-weight: 700; }
.appointment-name { display: grid; gap: .15rem; }
.appointment-name > span { font-size: .875rem; }
.state-label { grid-column: 2; justify-self: start; font-size: .8rem; padding: .15rem .4rem; border-radius: .25rem; color: var(--color-success-content); background: var(--ok); }
.requested .state-label { color: var(--color-warning-content); background: var(--warn); }
:is(.cancelled,.rejected,.expired) .state-label { color: var(--color-error-content); background: var(--danger); }
:is(.completed,.no_show) .state-label { color: var(--color-neutral-content); background: var(--color-neutral); }
.appt[open] > summary { border-bottom: 1px solid var(--line); }
.appointment-body { padding: 1rem; }
.appointment-body form.inline { display: inline-block; margin: .35rem .3rem .35rem 0; }
.action-confirmation, .move-disclosure { margin: .75rem 0; }
.confirmation-body { padding: .75rem 0; max-width: 65ch; }
.confirmation-body form { display: flex; flex-wrap: wrap; gap: .5rem; }
.confirmation-body label { flex-basis: 100%; display: flex; align-items: center; gap: .6rem; }
.confirmation-body form > .btn { margin: 0; }
.weekday-heading { text-align: center; font-weight: 650; padding: .5rem .15rem; }
.month-cell { display: flex; flex-direction: column; gap: .5rem; font-variant-numeric: tabular-nums; }
.month-cell:hover { background: var(--bg-soft); }
.month-cell span { font-size: .8rem; }
.empty-state { padding: 1rem; border: 1px dashed var(--line); border-radius: var(--radius-box); max-width: 65ch; }
.workflow-error { display: block; color: var(--color-error-content); background: var(--color-error); margin-bottom: 1rem; }
.workflow-error p { margin: 0; }
.field-error { color: var(--ink); font-weight: 600; margin: .35rem 0; }
.form-field { display: grid; gap: .25rem; }
.form-field label { margin: .5rem 0 .2rem; }
.approval-note { padding: .75rem 0; border-block: 1px solid var(--line); max-width: 65ch; }
.appointment-summary { margin: 1.5rem 0; padding: 1rem 0; border-block: 1px solid var(--line); }
.appointment-summary h2 { margin: 0 0 .75rem; }
.appointment-summary p { margin: .35rem 0; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; }
.slot-grid .btn { height: auto; min-height: 44px; white-space: normal; font-variant-numeric: tabular-nums; }
.slot-grid button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-content); }
.slot-choice { display: flex; align-items: center; gap: .5rem; padding: .75rem; margin: 0; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-field); cursor: pointer; }
.slot-choice:has(input:checked) { background: var(--color-primary); color: var(--color-primary-content); }
.slot-suggestions { padding-block: .75rem; border-block: 1px solid var(--line); }
form[aria-busy="true"] button[type="submit"] { opacity: .65; cursor: progress; }
@media (max-width: 640px) {
  .administration-links { right: 0; }
  .appointment-trigger { grid-template-columns: minmax(0, 1fr) auto; }
  .appointment-name { grid-column: 1; }
  .appointment-trigger::after { grid-column: 2; }
  .state-label { grid-column: 1; }
  .month-cell { font-size: 1rem; }
  .weekday-heading { font-size: .8rem; }
}

.input, .select, .textarea, .slot-choice { border-color: var(--muted); }

/* Workspace top bar: salon navigation lives here so the calendar can start at the top. */
.brand-group { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.salon-switch { font-size: .85rem; color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.salon-nav { display: flex; align-items: center; gap: 1.25rem; margin: 0 auto 0 1.5rem; font-size: .9rem; }
.salon-nav > a, .salon-nav summary { color: var(--ink); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.salon-nav > a:hover, .salon-nav summary:hover { color: var(--accent); }
.salon-nav summary::-webkit-details-marker { display: none; }
.salon-nav .administration-links { right: auto; left: 0; }
.salon-links-mobile { display: none; }

/* Calendar page: full width, one compact bar, schedule plus an optional side panel. */
.page.page-calendar { max-width: none; padding-top: .75rem; }
.calendar-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; }
.calendar-title { flex: 1 1 14rem; min-width: 0; margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.date-nav { display: flex; align-items: center; gap: .25rem; }
.calendar-bar .date-jump { display: flex; align-items: center; gap: .25rem; margin: 0; }
.calendar-bar .date-jump .input { width: 9.5rem; }
.calendar-bar .btn { margin: 0; }
.calendar-saved { margin-bottom: .75rem; }
.upcoming-shifts { margin: 0 0 .75rem; font-size: .875rem; }
.schedule-layout { display: grid; gap: 1rem; align-items: start; }
.schedule-layout.has-panel { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
.schedule-main { min-width: 0; }
.schedule-panel { position: sticky; top: 4.75rem; max-height: calc(100dvh - 5.75rem); overflow-y: auto; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--panel); box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--ink) 10%, transparent); }
.schedule-panel h2 { margin-top: 0; }
.panel-close { float: right; margin: -.25rem -.25rem 0 .5rem; }
.schedule-panel .appt { border: 0; margin: 0; }
.schedule-panel .appt > summary { padding: 0 0 .75rem; }
.booking-context { margin: 0 0 .5rem; padding: .6rem .75rem; border-radius: var(--radius-field); background: var(--bg-soft); }
.field-hint { margin: -.15rem 0 .25rem; font-size: .85rem; }
.create-booking > .btn { margin-top: .75rem; }
.create-slot-finder { margin-top: 1rem; font-size: .9rem; }
.create-slot-finder summary { cursor: pointer; color: var(--accent); }
.closed-bookings { margin-top: 1rem; }
.closed-bookings summary { cursor: pointer; color: var(--muted); font-size: .9rem; min-height: 44px; display: flex; align-items: center; }
.staff-switcher { display: none; }
.schedule-empty { margin-top: 1rem; }

/* Time grid. One row is 15 minutes; generated gr/gs/gl classes place items (CSP forbids inline styles). */
.schedule { --slot-h: 1.3rem; --gutter: 3.5rem; --col-min: 9rem; max-height: calc(100dvh - 9rem); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--panel); scroll-padding-left: var(--gutter); }
.schedule-grid { display: grid; grid-template-rows: auto auto; min-width: min-content; }
.schedule-corner, .schedule-head { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); }
.schedule-corner { left: 0; z-index: 6; }
.schedule-head { padding: .55rem .75rem; border-left: 1px solid var(--line); font-weight: 650; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; scroll-snap-align: start; }
.schedule-head a { color: inherit; text-decoration: none; }
.schedule-head a:hover { text-decoration: underline; text-underline-offset: .2em; }
.track { position: relative; display: grid; grid-auto-rows: var(--slot-h); border-left: 1px solid var(--line); background: color-mix(in srgb, var(--bg-soft) 70%, var(--line)); }
.track::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to bottom, color-mix(in srgb, var(--line) 85%, transparent) 1px, transparent 1px); background-size: 100% calc(var(--slot-h) * 2); }
.track.gutter { position: sticky; left: 0; z-index: 4; border-left: 0; background: var(--panel); }
.track.gutter::after { display: none; }
.track-fill, .work, .slot-free, .now-line, .time-label { grid-column: 1 / -1; }
.track-fill { pointer-events: none; }
.work { background: var(--panel); }
.time-label { padding-right: .5rem; text-align: right; font-size: .72rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; transform: translateY(-.45em); }
.time-label.gr-1 { transform: none; padding-top: .15rem; }
.slot-free { position: relative; z-index: 2; display: flex; align-items: center; margin: 1px 3px; padding: 0 .5rem; border-radius: .375rem; font-size: .78rem; font-weight: 600; color: transparent; text-decoration: none; font-variant-numeric: tabular-nums; }
.slot-free:hover, .slot-free:focus-visible { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--primary-ink); }
.track:hover .slot-free { color: var(--muted); }
.track .slot-free:hover, .track .slot-free:focus-visible { color: var(--primary-ink); }
@media (hover: none) { .slot-free { color: var(--muted); } }
.schedule-head.is-today { color: var(--primary-ink); box-shadow: inset 0 -2px 0 var(--primary-ink); }
.schedule-panel .appointment-trigger { cursor: default; }
.schedule-panel .appointment-trigger::after { display: none; }
.appt-block, .hold-block { position: relative; z-index: 3; margin: 1px 3px; min-width: 0; overflow: hidden; border-radius: .375rem; padding: .15rem .45rem; font-size: .78rem; line-height: 1.3; }
.appt-block { border: 1px solid color-mix(in srgb, var(--color-success) 45%, var(--panel)); background: color-mix(in srgb, var(--color-success) 13%, var(--panel)); }
.appt-block.state-requested { border-color: color-mix(in srgb, var(--color-warning) 70%, var(--panel)); background: color-mix(in srgb, var(--color-warning) 20%, var(--panel)); }
.appt-block.state-completed, .appt-block.state-no_show { border-color: var(--line); background: var(--bg-soft); color: var(--muted); }
.appt-block:hover, .appt-block:focus-within { box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--ink) 14%, transparent); z-index: 4; }
.appt-block.is-selected { outline: 2px solid var(--primary-ink); outline-offset: 1px; z-index: 4; }
.appt-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.appt-link::after { content: ""; position: absolute; inset: 0; }
.appt-link:focus-visible { outline: none; }
.appt-block:has(.appt-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.appt-time { font-variant-numeric: tabular-nums; font-size: .72rem; opacity: .85; }
.appt-service, .appt-customer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-flag { font-weight: 700; color: color-mix(in srgb, var(--color-warning) 45%, var(--ink)); }
.appt-approve { position: absolute; right: .25rem; bottom: .2rem; z-index: 1; }
.appt-approve .btn { min-height: 1.6rem; height: 1.6rem; }
.hold-block { z-index: 2; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 .35rem; color: var(--muted); background: repeating-linear-gradient(135deg, var(--bg-soft) 0 .45rem, color-mix(in srgb, var(--line) 75%, var(--bg-soft)) .45rem .55rem); }
.hold-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.now-line { position: relative; z-index: 4; align-self: start; height: 2px; margin-top: -1px; background: var(--color-error); pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-error); }
.month-count { font-size: .8rem; }
.month-requested { font-size: .75rem; font-weight: 600; color: color-mix(in srgb, var(--color-warning) 45%, var(--ink)); }

@media (max-width: 900px) {
  .schedule-layout.has-panel { grid-template-columns: minmax(0, 1fr); }
  .schedule-panel { order: -1; position: static; max-height: none; }
}
@media (max-width: 640px) {
  .salon-nav { display: none; }
  .salon-links-mobile { display: grid; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
  .salon-links-mobile a { display: flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--ink); text-decoration: none; }
  .page.page-calendar { padding: .5rem; }
  .calendar-title { order: -1; flex-basis: 100%; font-size: 1.1rem; }
  .calendar-bar .date-jump { display: none; }
  .staff-switcher { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: .5rem; }
  .schedule { --col-min: calc(100vw - 1rem - var(--gutter) - 2px); --gutter: 3rem; max-height: calc(100dvh - 8.5rem); scroll-snap-type: x mandatory; }
}
/* About, privacy and licence pages: the public site and the signed-in About page share these. */
.about-page { width: min(100%, 1000px); margin: 0 auto; overflow-wrap: anywhere; }
.about-page > .page-heading, .about-page > .about-heading { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.about-heading h1 { margin: 0 0 .75rem; font-size: var(--page-title-size); line-height: 1.15; }
.about-heading .lead { margin: 0 0 .75rem; max-width: 68ch; color: var(--muted); font-size: 1.125rem; }
.privacy-updated { margin: .5rem 0 0; color: var(--muted); font-size: .875rem; }
.about-jump-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1rem; font-size: .875rem; }
.about-jump-links a, .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.about-part { margin-top: 3rem; padding-bottom: .75rem; scroll-margin-top: 5.5rem; }
.about-part > h2 { margin: 0; font-size: 1.625rem; line-height: 1.25; }
.about-part-intro { margin: .5rem 0 0; max-width: 68ch; }
.about-section { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 1.5rem; margin-top: 2.25rem; scroll-margin-top: 5.5rem; }
.about-section > h2, .about-section > h3 { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.45; text-wrap: balance; }
.about-section-body { max-width: 68ch; line-height: 1.7; }
.about-section-body p { margin: 0; }
.about-section-body p + p { margin-top: .75rem; }
.about-section-body p + a { display: inline-block; margin-top: .75rem; }
.about-closing { max-width: 68ch; margin: 3rem 0 0; }
.licence-list { display: grid; margin: 0; padding: 0; list-style: none; }
/* Name, licence and toggle share a row; an opened licence text takes the full width below. */
.licence-list li { display: flex; flex-wrap: wrap; align-items: center; column-gap: .75rem; border-bottom: 1px solid var(--line); }
.licence-list li > p { margin: 0; }
.licence-name { font-weight: 650; }
.licence-kind { color: var(--muted); font-size: .875rem; }
.licence-list details { margin-left: auto; }
.licence-list details[open] { flex-basis: 100%; margin-left: 0; padding-bottom: .75rem; }
.licence-list summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.licence-text { max-height: 24rem; overflow: auto; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--bg-soft); font-size: .75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-footer { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem 1.5rem; color: var(--muted); font-size: .875rem; }
/* Public site pages keep the footer at the bottom of the window, as MyPlanner's site does. */
body.site { display: flex; flex-direction: column; }
body.site > main { flex: 1 0 auto; width: 100%; }
body.site > .site-footer { width: 100%; }
.unavailable { display: grid; place-items: center; padding: 3.5rem 1rem; }
.unavailable-card { width: min(100%, 520px); border: 1px solid var(--line); }
/* Smaller than a page title so the short message fits on one line inside the card. */
.unavailable-card h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; text-wrap: balance; }
.unavailable-card p { margin: 0 0 1rem; }
.unavailable-card .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) {
  .about-section { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 2rem; }
  .site-footer { padding-inline: 1rem; }
}
/* Generated placement classes: 15-minute rows (gr = start row, gs = row span), lanes and columns. */
.cols-1{grid-template-columns:var(--gutter) repeat(1,minmax(var(--col-min),1fr))} .cols-2{grid-template-columns:var(--gutter) repeat(2,minmax(var(--col-min),1fr))} .cols-3{grid-template-columns:var(--gutter) repeat(3,minmax(var(--col-min),1fr))} .cols-4{grid-template-columns:var(--gutter) repeat(4,minmax(var(--col-min),1fr))} .cols-5{grid-template-columns:var(--gutter) repeat(5,minmax(var(--col-min),1fr))} .cols-6{grid-template-columns:var(--gutter) repeat(6,minmax(var(--col-min),1fr))} .cols-7{grid-template-columns:var(--gutter) repeat(7,minmax(var(--col-min),1fr))} .cols-8{grid-template-columns:var(--gutter) repeat(8,minmax(var(--col-min),1fr))} .cols-9{grid-template-columns:var(--gutter) repeat(9,minmax(var(--col-min),1fr))} .cols-10{grid-template-columns:var(--gutter) repeat(10,minmax(var(--col-min),1fr))} .cols-11{grid-template-columns:var(--gutter) repeat(11,minmax(var(--col-min),1fr))} .cols-12{grid-template-columns:var(--gutter) repeat(12,minmax(var(--col-min),1fr))}
.lanes-1{grid-template-columns:repeat(1,minmax(0,1fr))} .lanes-2{grid-template-columns:repeat(2,minmax(0,1fr))} .lanes-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lanes-4{grid-template-columns:repeat(4,minmax(0,1fr))} .lanes-5{grid-template-columns:repeat(5,minmax(0,1fr))} .lanes-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.gl-1{grid-column:1} .gl-2{grid-column:2} .gl-3{grid-column:3} .gl-4{grid-column:4} .gl-5{grid-column:5} .gl-6{grid-column:6}
.gr-1{grid-row-start:1} .gr-2{grid-row-start:2} .gr-3{grid-row-start:3} .gr-4{grid-row-start:4} .gr-5{grid-row-start:5} .gr-6{grid-row-start:6} .gr-7{grid-row-start:7} .gr-8{grid-row-start:8} .gr-9{grid-row-start:9} .gr-10{grid-row-start:10} .gr-11{grid-row-start:11} .gr-12{grid-row-start:12} .gr-13{grid-row-start:13} .gr-14{grid-row-start:14} .gr-15{grid-row-start:15} .gr-16{grid-row-start:16}
.gr-17{grid-row-start:17} .gr-18{grid-row-start:18} .gr-19{grid-row-start:19} .gr-20{grid-row-start:20} .gr-21{grid-row-start:21} .gr-22{grid-row-start:22} .gr-23{grid-row-start:23} .gr-24{grid-row-start:24} .gr-25{grid-row-start:25} .gr-26{grid-row-start:26} .gr-27{grid-row-start:27} .gr-28{grid-row-start:28} .gr-29{grid-row-start:29} .gr-30{grid-row-start:30} .gr-31{grid-row-start:31} .gr-32{grid-row-start:32}
.gr-33{grid-row-start:33} .gr-34{grid-row-start:34} .gr-35{grid-row-start:35} .gr-36{grid-row-start:36} .gr-37{grid-row-start:37} .gr-38{grid-row-start:38} .gr-39{grid-row-start:39} .gr-40{grid-row-start:40} .gr-41{grid-row-start:41} .gr-42{grid-row-start:42} .gr-43{grid-row-start:43} .gr-44{grid-row-start:44} .gr-45{grid-row-start:45} .gr-46{grid-row-start:46} .gr-47{grid-row-start:47} .gr-48{grid-row-start:48}
.gr-49{grid-row-start:49} .gr-50{grid-row-start:50} .gr-51{grid-row-start:51} .gr-52{grid-row-start:52} .gr-53{grid-row-start:53} .gr-54{grid-row-start:54} .gr-55{grid-row-start:55} .gr-56{grid-row-start:56} .gr-57{grid-row-start:57} .gr-58{grid-row-start:58} .gr-59{grid-row-start:59} .gr-60{grid-row-start:60} .gr-61{grid-row-start:61} .gr-62{grid-row-start:62} .gr-63{grid-row-start:63} .gr-64{grid-row-start:64}
.gr-65{grid-row-start:65} .gr-66{grid-row-start:66} .gr-67{grid-row-start:67} .gr-68{grid-row-start:68} .gr-69{grid-row-start:69} .gr-70{grid-row-start:70} .gr-71{grid-row-start:71} .gr-72{grid-row-start:72} .gr-73{grid-row-start:73} .gr-74{grid-row-start:74} .gr-75{grid-row-start:75} .gr-76{grid-row-start:76} .gr-77{grid-row-start:77} .gr-78{grid-row-start:78} .gr-79{grid-row-start:79} .gr-80{grid-row-start:80}
.gr-81{grid-row-start:81} .gr-82{grid-row-start:82} .gr-83{grid-row-start:83} .gr-84{grid-row-start:84} .gr-85{grid-row-start:85} .gr-86{grid-row-start:86} .gr-87{grid-row-start:87} .gr-88{grid-row-start:88} .gr-89{grid-row-start:89} .gr-90{grid-row-start:90} .gr-91{grid-row-start:91} .gr-92{grid-row-start:92} .gr-93{grid-row-start:93} .gr-94{grid-row-start:94} .gr-95{grid-row-start:95} .gr-96{grid-row-start:96}
.gr-97{grid-row-start:97}
.gs-1{grid-row-end:span 1} .gs-2{grid-row-end:span 2} .gs-3{grid-row-end:span 3} .gs-4{grid-row-end:span 4} .gs-5{grid-row-end:span 5} .gs-6{grid-row-end:span 6} .gs-7{grid-row-end:span 7} .gs-8{grid-row-end:span 8} .gs-9{grid-row-end:span 9} .gs-10{grid-row-end:span 10} .gs-11{grid-row-end:span 11} .gs-12{grid-row-end:span 12} .gs-13{grid-row-end:span 13} .gs-14{grid-row-end:span 14} .gs-15{grid-row-end:span 15} .gs-16{grid-row-end:span 16}
.gs-17{grid-row-end:span 17} .gs-18{grid-row-end:span 18} .gs-19{grid-row-end:span 19} .gs-20{grid-row-end:span 20} .gs-21{grid-row-end:span 21} .gs-22{grid-row-end:span 22} .gs-23{grid-row-end:span 23} .gs-24{grid-row-end:span 24} .gs-25{grid-row-end:span 25} .gs-26{grid-row-end:span 26} .gs-27{grid-row-end:span 27} .gs-28{grid-row-end:span 28} .gs-29{grid-row-end:span 29} .gs-30{grid-row-end:span 30} .gs-31{grid-row-end:span 31} .gs-32{grid-row-end:span 32}
.gs-33{grid-row-end:span 33} .gs-34{grid-row-end:span 34} .gs-35{grid-row-end:span 35} .gs-36{grid-row-end:span 36} .gs-37{grid-row-end:span 37} .gs-38{grid-row-end:span 38} .gs-39{grid-row-end:span 39} .gs-40{grid-row-end:span 40} .gs-41{grid-row-end:span 41} .gs-42{grid-row-end:span 42} .gs-43{grid-row-end:span 43} .gs-44{grid-row-end:span 44} .gs-45{grid-row-end:span 45} .gs-46{grid-row-end:span 46} .gs-47{grid-row-end:span 47} .gs-48{grid-row-end:span 48}
.gs-49{grid-row-end:span 49} .gs-50{grid-row-end:span 50} .gs-51{grid-row-end:span 51} .gs-52{grid-row-end:span 52} .gs-53{grid-row-end:span 53} .gs-54{grid-row-end:span 54} .gs-55{grid-row-end:span 55} .gs-56{grid-row-end:span 56} .gs-57{grid-row-end:span 57} .gs-58{grid-row-end:span 58} .gs-59{grid-row-end:span 59} .gs-60{grid-row-end:span 60} .gs-61{grid-row-end:span 61} .gs-62{grid-row-end:span 62} .gs-63{grid-row-end:span 63} .gs-64{grid-row-end:span 64}
.gs-65{grid-row-end:span 65} .gs-66{grid-row-end:span 66} .gs-67{grid-row-end:span 67} .gs-68{grid-row-end:span 68} .gs-69{grid-row-end:span 69} .gs-70{grid-row-end:span 70} .gs-71{grid-row-end:span 71} .gs-72{grid-row-end:span 72} .gs-73{grid-row-end:span 73} .gs-74{grid-row-end:span 74} .gs-75{grid-row-end:span 75} .gs-76{grid-row-end:span 76} .gs-77{grid-row-end:span 77} .gs-78{grid-row-end:span 78} .gs-79{grid-row-end:span 79} .gs-80{grid-row-end:span 80}
.gs-81{grid-row-end:span 81} .gs-82{grid-row-end:span 82} .gs-83{grid-row-end:span 83} .gs-84{grid-row-end:span 84} .gs-85{grid-row-end:span 85} .gs-86{grid-row-end:span 86} .gs-87{grid-row-end:span 87} .gs-88{grid-row-end:span 88} .gs-89{grid-row-end:span 89} .gs-90{grid-row-end:span 90} .gs-91{grid-row-end:span 91} .gs-92{grid-row-end:span 92} .gs-93{grid-row-end:span 93} .gs-94{grid-row-end:span 94} .gs-95{grid-row-end:span 95} .gs-96{grid-row-end:span 96}