/* AUTO-GENERATED by ui-tokens build.rs. Do not edit. */

:root {
  --space-0: 0;
  --space-0-5: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --radius-block: 2px;
  --radius-lg: 16px;
  --radius-md: 8px;
  --radius-none: 0;
  --radius-pill: 9999px;
  --radius-sm: 4px;
  --border-hairline: 1px;
  --border-strong: 2px;
  --shadow-md: 0 4px 12px rgba(22, 48, 62, 0.10);
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(22, 48, 62, 0.10);
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-sm: 14px;
  --text-sm-dense: 13px;
  --text-xl: 22px;
  --text-xs: 12px;
  --weight-body: 400;
  --weight-display: 600;
  --weight-ui: 500;
  --leading-body: 1.5;
  --leading-heading: 1.25;
  --leading-mono: 1;
  --motion-base: 200ms;
  --motion-fast: 120ms;
  --motion-reduced: 90ms;
  --motion-slow: 480ms;
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --cal-day-col-w: 132px;
  --cal-day-col-w-narrow: 106px;
  --cal-row-h: 50px;
  --cal-row-h-narrow: 44px;
  --cal-ruler-h: 26px;
  --cal-tide-h: 34px;
  --customer-badge-w: 118px;
  --customer-phone-w: 58px;
  --customer-stats-w: 226px;
  --font-family: "IBM Plex Sans", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-display: Besley, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

:root[data-theme="dark"], [data-theme="dark"] {
  --accent: #4FB6C9;
  --accent-hover: #66C2D4;
  --bg-base: #0B1B26;
  --bg-elevated: #142B3B;
  --bg-inverse: #142B3B;
  --bg-sunken: #071219;
  --border-default: #4A6B7C;
  --border-strong: #8AA4B2;
  --danger: #E58273;
  --elevation-edge: #3D617A;
  --elevation-glow: #FFFFFF12;
  --fg-inverse: #F2EEE2;
  --fg-muted: #A3B8C2;
  --fg-on-accent: #06222B;
  --fg-primary: #F2EEE2;
  --fg-secondary: #B7C9D1;
  --focus-ring: #6CC4DE;
  --free-tint-1: #183545;
  --free-tint-2: #204757;
  --free-tint-3: #285A6B;
  --info: #6FB4E8;
  --signal: #F06CA8;
  --status-cancelled: #95A4AA;
  --status-cancelled-tint: #1A2228;
  --status-held: #84B9DF;
  --status-held-tint: #102A3D;
  --status-paid: #8FD4AC;
  --status-paid-tint: #103526;
  --status-unpaid: #E6BE7A;
  --status-unpaid-tint: #362A12;
  --success: #6FBF8F;
  --taken-tint: #364D5B;
  --warning: #E0A458;
}

:root[data-theme="high-contrast"], [data-theme="high-contrast"] {
  --accent: #003B4A;
  --accent-hover: #002A36;
  --bg-base: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-inverse: #FFFFFF;
  --bg-sunken: #EFEFEA;
  --border-default: #0A0F12;
  --border-strong: #0A0F12;
  --danger: #8F1D0E;
  --elevation-edge: #00000000;
  --elevation-glow: #00000000;
  --fg-inverse: #0A0F12;
  --fg-muted: #2E3A40;
  --fg-on-accent: #FFFFFF;
  --fg-primary: #0A0F12;
  --fg-secondary: #2E3A40;
  --focus-ring: #0A0F12;
  --free-tint-1: #FFFFFF;
  --free-tint-2: #FFFFFF;
  --free-tint-3: #FFFFFF;
  --info: #00457C;
  --signal: #0A0F12;
  --status-cancelled: #3A3A3A;
  --status-cancelled-tint: #FFFFFF;
  --status-held: #00457C;
  --status-held-tint: #FFFFFF;
  --status-paid: #0E5A2E;
  --status-paid-tint: #FFFFFF;
  --status-unpaid: #6B4400;
  --status-unpaid-tint: #FFFFFF;
  --success: #0E5A2E;
  --taken-tint: #FFFFFF;
  --warning: #6B4400;
}

:root[data-theme="light"], [data-theme="light"] {
  --accent: #0F4C5C;
  --accent-hover: #0B3A47;
  --bg-base: #F8F4E9;
  --bg-elevated: #FDFBF3;
  --bg-inverse: #16303E;
  --bg-sunken: #E9F0EC;
  --border-default: #A8B5AD;
  --border-strong: #5C7280;
  --danger: #B3402F;
  --elevation-edge: #00000000;
  --elevation-glow: #00000000;
  --fg-inverse: #EDE8DA;
  --fg-muted: #5C7280;
  --fg-on-accent: #FFFFFF;
  --fg-primary: #16303E;
  --fg-secondary: #4A6273;
  --focus-ring: #20566B;
  --free-tint-1: #ECEFE8;
  --free-tint-2: #CDD8D5;
  --free-tint-3: #ACC0C0;
  --info: #1C5D8D;
  --signal: #B91C5B;
  --status-cancelled: #4E5D5D;
  --status-cancelled-tint: #E8E6DD;
  --status-held: #1C5D8D;
  --status-held-tint: #DCE9F2;
  --status-paid: #1E5A40;
  --status-paid-tint: #DCECE2;
  --status-unpaid: #7E5114;
  --status-unpaid-tint: #F3E6CE;
  --success: #2E6E4E;
  --taken-tint: #D6DAD7;
  --warning: #8A5A19;
}


/* The calendar sea's strip, as tall as a `seaband` band. */
:root {
  --sea-strip-h: 88px;
}

/* The calendar on its side (DESIGN.md, Direction, 2026-09-28): days run down, the
   hours 00–24 run across. Written once here and appended to theme.css by build.rs, so
   the admin and customer apps draw the same rows. The ruler and every row share one
   grid template, so the hour labels line up with the tracks. A container query cannot
   style its own container, so the narrow sizes are set on the rows, not on .cal-rows. */
.cal-rows { container-type: inline-size; display: grid; row-gap: var(--space-1); }
.cal-ruler, .cal-row { --cal-daycol: var(--cal-day-col-w); --cal-rowh: var(--cal-row-h); display: grid; grid-template-columns: var(--cal-daycol) minmax(0, 1fr); }
.cal-ruler { height: var(--cal-ruler-h); align-items: end; }
.cal-ruler-day { padding-bottom: 6px; font-size: var(--text-xs); font-weight: var(--weight-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-secondary); }
/* The labels are placed across the track's inner width, inside its border, the frame the
   hour lines use, so each sits 3 px right of its own line from 00 to 23. */
.cal-ruler-hours { position: relative; height: 100%; margin-inline: var(--border-hairline); }
.cal-hour { position: absolute; bottom: 4px; transform: translateX(3px); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }
/* Mono numerals stop at Medium: both shells ship Plex Mono at 400 and 500 only, so a
   600 would be a bold the browser fakes and Slint cannot draw. */
.cal-hour.major { color: var(--fg-secondary); font-weight: var(--weight-ui); }

/* The day label: one line at every width, like a departures board. */
.cal-day { display: grid; align-content: center; gap: 3px; min-width: 0; padding-right: var(--space-1); }
.cal-dl { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; line-height: 1; }
.cal-dl-tag { font-size: 11px; font-weight: var(--weight-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cal-dl-wd { font-size: 13px; font-weight: var(--weight-display); letter-spacing: 0.08em; text-transform: uppercase; }
.cal-dl-dt { font-family: var(--font-mono); font-size: 20px; }
.cal-dl-clock { font-size: 10px; font-weight: var(--weight-display); color: var(--warning); border: 1px solid var(--warning); border-radius: 3px; padding: 2px 4px; }
.cal-day.today .cal-dl-wd, .cal-day.today .cal-dl-dt { color: var(--accent); }
.cal-tally { font-size: var(--text-xs); line-height: 1.2; color: var(--fg-secondary); white-space: nowrap; }
.cal-day.full .cal-tally { color: var(--fg-muted); }
.cal-cap { display: block; height: 4px; border-radius: 2px; background: var(--bg-sunken); overflow: hidden; }
.cal-cap > i { display: block; height: 100%; background: var(--accent); }

/* The track: hour hairlines, every third hour stronger. */
.cal-track {
  position: relative; height: var(--cal-rowh); overflow: hidden; align-self: center;
  background-color: var(--bg-base); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md);
  background-image:
    repeating-linear-gradient(to right, var(--border-default) 0 1px, transparent 1px calc(100% / 8)),
    repeating-linear-gradient(to right, color-mix(in srgb, var(--border-default) 45%, transparent) 0 1px, transparent 1px calc(100% / 24));
}

/* Free time: an open slot with a dashed accent outline that says how many sessions fit.
   A gap too short for one is a plain dotted box with no text. */
.cal-free, .cal-short { position: absolute; top: 0; bottom: 0; z-index: 0; padding: 0; border-radius: var(--radius-block); font: inherit; }
.cal-free { display: grid; align-content: center; padding: 0 var(--space-1); overflow: hidden; text-align: left; cursor: pointer;
  background: var(--free-tint-1); border: 1px dashed var(--accent); color: var(--accent); line-height: 1.25; }
.cal-free > * { pointer-events: none; white-space: nowrap; }
.cal-free b { font-size: var(--text-sm); font-weight: var(--weight-display); }
.cal-free b .mono { font-weight: var(--weight-ui); }
.cal-free small { font-size: var(--text-xs); color: var(--fg-secondary); }
.cal-free:hover, .cal-free.f2 { background: var(--free-tint-2); color: var(--fg-primary); }
.cal-free.f3 { background: var(--free-tint-3); color: var(--fg-primary); }
.cal-free:hover small, .cal-free.f2 small, .cal-free.f3 small { color: var(--fg-primary); }
.cal-short { background: var(--bg-sunken); border: 1px dotted var(--border-strong); cursor: help; }
/* Both apps' `button:hover` would fill a too-short gap with accent; it stays a dotted box. */
.cal-short:hover { background: var(--bg-sunken); }
/* A piece that runs over midnight: square and dashed on the cut side. Scoped to the
   track because the apps' own single-class block rules load after theme.css and
   would win a tie, putting the rounded corners back. */
.cal-track .cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.cal-track .cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }

/* Marks over the track: the hatched past, the clock-change hour, the now-line. */
.cal-past { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg-muted) 22%, transparent) 0 1px, transparent 1px 6px); }
.cal-clock { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--warning) 30%, transparent) 0 1px, transparent 1px 4px);
  border-inline: 1px dotted var(--warning); }
.cal-clock-note { margin: 0; font-size: var(--text-sm); color: var(--warning); }
/* The now-line is centred on the instant: it is shifted left by half its width, and its
   point, placed from the line's padding edge, moves with it. */
.cal-now { --cal-now-w: 2px; position: absolute; top: 0; bottom: 0; width: 0; z-index: 3; pointer-events: none;
  border-left: var(--cal-now-w) solid var(--signal); margin-left: calc(var(--cal-now-w) / -2); }
.cal-now::before { content: ""; position: absolute; top: -1px; left: -5px; border-top: 6px solid var(--signal); border-left: 4px solid transparent; border-right: 4px solid transparent; }
:root[data-theme="high-contrast"] .cal-now { --cal-now-w: 3px; border-left-color: var(--fg-primary); }
:root[data-theme="high-contrast"] .cal-now::before { border-top-color: var(--fg-primary); }

/* Dag: the tide curve in a strip between the ruler and the row. */
.cal-tide { position: relative; height: var(--cal-tide-h); pointer-events: none; }
.cal-tide svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cal-tide path.tide-fill { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.cal-tide path.tide-line { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* The day as a list: Dag under its row, and the members' phone week. */
.cal-list { display: grid; gap: var(--space-0-5); }
.cal-daylist { display: none; }
.cal-entry { display: grid; grid-template-columns: 11ch minmax(0, 1fr) auto; gap: 2px var(--space-1); align-items: center; width: 100%;
  padding: var(--space-1); text-align: left; font: inherit; color: var(--fg-primary); cursor: pointer;
  background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.cal-entry > * { pointer-events: none; }
.cal-entry-time { font-family: var(--font-mono); font-size: var(--text-sm); }
.cal-entry-what { display: grid; gap: 1px; min-width: 0; }
.cal-entry-what small { font-size: var(--text-xs); color: var(--fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-entry-go { font-size: var(--text-sm); font-weight: var(--weight-display); color: var(--accent); white-space: nowrap; }
.cal-entry.paid { background: var(--status-paid-tint); border-left: 4px solid var(--status-paid); }
.cal-entry.unpaid { background: var(--status-unpaid-tint); border-left: 4px solid var(--status-unpaid); }
.cal-entry.held, .cal-entry.own { background: var(--status-held-tint); border-left: 4px solid var(--status-held); }
.cal-entry.own.paid { background: var(--status-paid-tint); border-left-color: var(--status-paid); }
.cal-entry.own.unpaid { background: var(--status-unpaid-tint); border-left-color: var(--status-unpaid); }
.cal-entry.cancelled { background: var(--status-cancelled-tint); border-left: 4px solid var(--status-cancelled); }
.cal-entry.taken { background: var(--taken-tint); border-left: 4px solid var(--border-strong); cursor: default; }
.cal-entry.dimmed { opacity: 0.4; }
.cal-entry.is-free { background: var(--free-tint-1); border: 1px dashed var(--accent); }
.cal-entry.is-free.f2 { background: var(--free-tint-2); }
.cal-entry.is-free.f3 { background: var(--free-tint-3); }
/* Text on the deeper tints is fg-primary, the pair the AA gate checks. */
:is(.cal-entry.is-free.f2, .cal-entry.is-free.f3, .cal-entry.taken) :is(.cal-entry-what small, .cal-entry-go) { color: var(--fg-primary); }
.cal-entry.is-short { background: var(--bg-sunken); border: 1px dotted var(--border-strong); cursor: help; }

/* The key under the toolbar. Each swatch carries the classes the calendar draws with, so
   it has the same fill, outline and buoy; this only takes it out of the track's layout.
   The line wraps on a phone rather than scroll. */
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-0-5) var(--space-2); margin-bottom: var(--space-1);
  font-size: var(--text-xs); color: var(--fg-secondary); }
.cal-legend-item { display: inline-flex; align-items: center; gap: var(--space-0-5); white-space: nowrap; }
.cal-legend .cal-legend-swatch { position: relative; display: inline-block; flex: none; width: 28px; height: 16px; padding: 0; z-index: auto; pointer-events: none; }

@container (max-width: 820px) {
  .cal-ruler, .cal-row { --cal-daycol: var(--cal-day-col-w-narrow); --cal-rowh: var(--cal-row-h-narrow); }
  .cal-hour:not(.major), .cal-dl-clock { display: none; }
  .cal-dl { gap: 5px; }
  .cal-dl-wd { font-size: 12px; letter-spacing: 0.05em; }
  .cal-dl-dt { font-size: 16px; }
}
@container (max-width: 520px) { .cal-hour.major:not(.six) { display: none; } }