/* calendar faces — the component owns no palette. It reads the host page's
 * tokens (SPA `--accent/--fg/--fg-dim/--border/--surface`, landing pages'
 * `--color-*`) through five `--pc-cal-*` seams a site may also set directly.
 * The grid is the hero: plain paper cells, booked = hatch, past = dimmed,
 * the picked range = one accent band. Type is inherited from the page. */
.pc-cal {
    --pc-ink:     var(--pc-cal-ink,     var(--fg,      var(--color-text,       #1a1a2e)));
    --pc-muted:   var(--pc-cal-muted,   var(--fg-dim,  var(--color-text-muted, #6a6a7a)));
    --pc-line:    var(--pc-cal-line,    var(--border,  var(--color-border,     #d1d5db)));
    --pc-surface: var(--pc-cal-surface, var(--surface, var(--color-bg-alt,     #f3f4f6)));
    --pc-accent:  var(--pc-cal-accent,  var(--accent,  var(--color-accent,     #e85d04)));
    --pc-accent-ink: var(--pc-cal-accent-ink, var(--accent-fg, #fff));
    --pc-radius:  var(--pc-cal-radius, 6px);
    --pc-gap:     var(--pc-cal-gap, 4px);
    --pc-hatch: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--pc-muted) 28%, transparent) 5px 7px);
    display: block;
    color: var(--pc-ink);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
}
.pc-cal *, .pc-cal *::before, .pc-cal *::after { box-sizing: border-box; }
.pc-cal button, .pc-cal select, .pc-cal input, .pc-cal textarea { font: inherit; color: inherit; }
.pc-cal :focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }

/* status and hints */
.pc-cal-status { color: var(--pc-muted); font-size: .9rem; margin: 8px 0 0; min-height: 1.2em; }
.pc-cal-status a { color: var(--pc-accent); }

/* controls: pills for model / bike, segmented toggles for unit and basis */
.pc-cal-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.pc-cal-select {
    padding: 7px 30px 7px 12px; border: 1px solid var(--pc-line); border-radius: 999px;
    background: var(--pc-surface); color: inherit; -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.pc-cal-toggle { display: inline-flex; border: 1px solid var(--pc-line); border-radius: 999px; overflow: hidden; }
.pc-cal-toggle .pc-cal-btn { border: 0; border-radius: 0; padding: 7px 12px; }
.pc-cal-toggle .pc-cal-btn.active { background: var(--pc-ink); color: var(--pc-surface); }

/* buttons */
.pc-cal-btn {
    font-size: .9rem; padding: 7px 12px; border: 1px solid var(--pc-line); border-radius: 999px;
    background: transparent; color: inherit; cursor: pointer; line-height: 1.2;
}
.pc-cal-btn:hover { border-color: var(--pc-ink); }
.pc-cal-btn:disabled { opacity: .55; cursor: default; }
/* `.pc-cal .…` so the ink outranks `.pc-cal button { color: inherit }` above */
.pc-cal .pc-cal-btn-primary { background: var(--pc-accent); border-color: var(--pc-accent); color: var(--pc-accent-ink); font-weight: 600; padding: 10px 18px; }
.pc-cal-btn-primary:hover { filter: brightness(1.06); border-color: var(--pc-accent); }

/* month navigation: title left, arrows right */
.pc-cal-head { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px; }
.pc-cal-title { flex: 1; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.pc-cal-head .pc-cal-btn { width: 34px; padding: 5px 0; text-align: center; }

/* the grid */
.pc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--pc-gap) 0; }
.pc-cal-dow { text-align: center; font-size: .72rem; color: var(--pc-muted); padding: 0 0 6px; }
.pc-cal-cell {
    position: relative; min-height: 46px; padding: 6px 0 0; text-align: center;
    border-top: 1px solid var(--pc-line); cursor: pointer; user-select: none;
}
.pc-cal-cell.empty { border-top-color: transparent; cursor: default; }
.pc-cal-daynum { display: inline-block; min-width: 2em; line-height: 2em; border-radius: 999px; font-weight: 600; }
.pc-cal-cell.today .pc-cal-daynum::after {
    content: ''; display: block; width: 4px; height: 4px; margin: -4px auto 0; border-radius: 50%; background: var(--pc-accent);
}
.pc-cal-cell.past { cursor: default; }
.pc-cal-cell.past .pc-cal-daynum { color: var(--pc-muted); font-weight: 400; opacity: .6; }
.pc-cal-cell.booked, .pc-cal-cell.closed { cursor: default; background: var(--pc-hatch); }
.pc-cal-cell.booked .pc-cal-daynum, .pc-cal-cell.closed .pc-cal-daynum { color: var(--pc-muted); font-weight: 400; }
.pc-cal-cellnote { display: none; }
.pc-cal-cell.free:hover .pc-cal-daynum { background: var(--pc-surface); }
/* the picked range: one band, rounded at its ends */
.pc-cal-cell.in-range, .pc-cal-cell.selected { background: color-mix(in srgb, var(--pc-accent) 16%, transparent); }
.pc-cal-cell.selected { border-radius: 999px 0 0 999px; }
/* The later of two selected cells in one month is the end: mirrored. The
 * `range-end` class covers a range that crosses months (one end per grid). */
.pc-cal-cell.selected ~ .pc-cal-cell.selected,
.pc-cal-cell.selected.range-end { border-radius: 0 999px 999px 0; }
.pc-cal-cell.selected.range-only { border-radius: 999px; }
.pc-cal-cell.selected .pc-cal-daynum { background: var(--pc-accent); color: var(--pc-accent-ink); }

/* legend: two facts only */
.pc-cal-legend { display: flex; gap: 16px; margin: 10px 0 0; font-size: .8rem; color: var(--pc-muted); }
.pc-cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pc-cal-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--pc-line); }
.pc-cal-swatch.booked { background: var(--pc-hatch); }
.pc-cal-swatch.selected { background: var(--pc-accent); border-color: var(--pc-accent); }

/* the quote and the request */
.pc-cal-summary { margin-top: 16px; padding: 16px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); background: var(--pc-surface); }
.pc-cal-summary-title { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.pc-cal-range { margin: 0 0 8px; }
.pc-cal-quote { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 12px; }
.pc-cal-quote dt { color: var(--pc-muted); margin: 0; }
.pc-cal-quote dd { margin: 0; text-align: right; }
.pc-cal-quote .pc-cal-total { font-weight: 700; color: var(--pc-ink); }
.pc-cal-form { display: grid; gap: 10px; margin-top: 8px; }
.pc-cal-label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--pc-muted); }
.pc-cal-form input, .pc-cal-form select, .pc-cal-form textarea {
    padding: 9px 10px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); background: transparent; color: var(--pc-ink); width: 100%;
}
.pc-cal-form textarea { min-height: 72px; resize: vertical; }
.pc-cal-form .pc-cal-btn-primary { justify-self: start; }
.pc-cal-form > .spa-confirm { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .pc-cal-form { grid-template-columns: 1fr 1fr; }
    .pc-cal-form .pc-cal-label:has(textarea), .pc-cal-form .pc-cal-btn-primary, .pc-cal-form .pc-cal-status, .pc-cal-form .pc-cal-total { grid-column: 1 / -1; }
}

/* week face (operator rows) */
.pc-cal-rows { overflow-x: auto; }
.pc-cal-row { display: grid; grid-template-columns: 140px repeat(7, minmax(90px, 1fr)); gap: var(--pc-gap); margin-bottom: var(--pc-gap); }
.pc-cal-rowlabel { font-size: .85rem; padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cal-daycol { min-height: 44px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.pc-cal-row-head .pc-cal-daycol { min-height: 0; border: none; text-align: center; color: var(--pc-muted); font-size: .8rem; }
.pc-cal-daycol.today { outline: 2px solid var(--pc-accent); outline-offset: -2px; }
.pc-cal-daycol.taken { background: var(--pc-hatch); }
.pc-cal-daycol.closed { background: var(--pc-surface); }
.pc-cal-chip { display: block; font-size: .7rem; padding: 2px 5px; border-radius: 3px; background: var(--pc-accent); color: var(--pc-accent-ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cal-chip.return { background: var(--pc-ink); color: var(--pc-surface); }
.pc-cal-chip.requested, .pc-cal-chip.offered { background: transparent; color: var(--pc-ink); border: 1px dashed var(--pc-accent); }

/* week-grid face (hourly timetable) */
.pc-wg-scroll { overflow-x: auto; }
.pc-wg { display: grid; grid-template-columns: 44px repeat(7, minmax(84px, 1fr)); gap: 0 4px; min-width: 640px; }
.pc-wg-dayhead { text-align: center; font-size: .8rem; color: var(--pc-muted); padding: 4px 0; display: flex; flex-direction: column; }
.pc-wg-dayhead.today { color: var(--pc-accent); font-weight: 600; }
.pc-wg-gutter, .pc-wg-col { position: relative; }
.pc-wg-hour { position: absolute; right: 4px; font-size: .7rem; color: var(--pc-muted); transform: translateY(-50%); }
.pc-wg-col { border: 1px solid var(--pc-line); border-radius: var(--pc-radius); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), var(--pc-line) calc(var(--hour) - 1px), var(--pc-line) var(--hour)); }
.pc-wg-col.open { cursor: copy; }
.pc-wg-col.past { background-color: var(--pc-surface); }
.pc-wg-col.today { outline: 2px solid var(--pc-accent); outline-offset: -2px; }
.pc-wg-block { position: absolute; left: 2px; right: 2px; border-radius: 4px; font-size: .65rem; padding: 2px 4px; overflow: hidden; pointer-events: none; color: var(--pc-muted); background: var(--pc-hatch); }
.pc-wg-block.closure { background: var(--pc-hatch); }
.pc-wg-block.shut { left: 0; right: 0; border-radius: 0; background: color-mix(in srgb, var(--pc-muted) 14%, transparent); display: flex; align-items: center; justify-content: center; font-size: .75rem; }
.pc-wg-block.booking { background: var(--pc-surface); }
.pc-wg-block.stale { opacity: .5; }
.pc-wg-block.use { display: flex; align-items: center; justify-content: center; font-size: .72rem; border: 1px solid var(--pc-line); }
.pc-wg-block.asked { display: flex; flex-direction: column; gap: 1px; background: transparent; border: 1.5px dashed var(--pc-accent); color: var(--pc-ink); }
.pc-wg-block.asked strong { font-size: .72rem; }
.pc-wg-slot { position: absolute; left: 3px; right: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; font-size: .68rem; line-height: 1.2; text-align: left; padding: 2px 4px; border: 1px solid var(--pc-accent); border-radius: 6px; background: color-mix(in srgb, var(--pc-accent) 14%, transparent); color: inherit; cursor: pointer; }
.pc-wg-slot strong { font-size: .74rem; }
.pc-wg-slot:disabled { opacity: .5; border-style: dashed; cursor: default; }
.pc-wg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--pc-accent); pointer-events: none; }
.pc-wg-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--pc-line); }
.pc-wg-swatch.class { background: color-mix(in srgb, var(--pc-accent) 14%, transparent); border-color: var(--pc-accent); }
.pc-wg-swatch.busy { background: var(--pc-hatch); }
.pc-wg-swatch.open { background: transparent; }
.pc-wg-swatch.shut { background: color-mix(in srgb, var(--pc-muted) 14%, transparent); }
.pc-wg-swatch.asked { background: transparent; border: 1.5px dashed var(--pc-accent); }
.pc-wg-who { margin: 0 0 10px; }
.pc-wg-whoname { margin: 0; font-weight: 600; }
.pc-wg-slot.away { text-decoration: line-through; }
.pc-cal-desc { margin: 0 0 8px; color: var(--pc-muted); }
.pc-wg-block.class { background: color-mix(in srgb, var(--pc-muted) 18%, transparent); }

/* week-list face: this week's classes, day by day */
.pc-wl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pc-wl-day { min-height: 110px; padding: 10px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); }
.pc-wl-day.today { border-color: var(--pc-accent); }
.pc-wl-dayhead { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-muted); }
.pc-wl-day.today .pc-wl-dayhead { color: var(--pc-accent); }
.pc-wl-none { margin: 0; font-size: .85rem; color: var(--pc-muted); }
.pc-wl-class {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0 0 6px; padding: 8px;
    font-size: .9rem; line-height: 1.35; text-align: left; color: inherit; cursor: pointer;
    border: 0; border-left: 3px solid var(--pc-accent); border-radius: 4px; background: var(--pc-surface);
}
.pc-wl-class time, .pc-wl-class span { font-size: .8rem; color: var(--pc-muted); }
.pc-wl-class .pc-wl-note { color: var(--pc-accent); }
.pc-wl-class.off { opacity: .55; cursor: default; }
.pc-wl-class.off .pc-wl-note { color: var(--pc-muted); }

/* mine face: the Classes tab */
.pc-cal-mine h3 { margin: 18px 0 8px; font-size: 1rem; }
.pc-cal-mine h3:first-child { margin-top: 0; }
.pc-mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pc-mine-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 10px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); }
.pc-mine-list small { grid-column: 1; color: var(--pc-muted); }
.pc-mine-list a { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--pc-accent); }

/* schedule tab: the class window */
.pc-cal-dialog {
    width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px;
    border: 1px solid var(--border, var(--color-border, #d1d5db)); border-radius: 8px;
    background: var(--pc-cal-paper, var(--surface, var(--color-bg, #fff))); color: var(--fg, var(--color-text, #1a1a2e));
}
.pc-cal-dialog::backdrop { background: rgb(0 0 0 / .35); }
.pc-cal-dialog-head { display: flex; align-items: center; gap: 8px; }
.pc-cal-dialog-head .pc-cal-summary-title { flex: 1; margin: 0; }
.pc-cal-dialog .pc-cal-form { grid-template-columns: 1fr; }
.pc-cal-roster-count { margin: 12px 0 6px; font-weight: 600; }
.pc-cal-roster-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.pc-cal-roster-list li { display: flex; gap: 8px; align-items: baseline; }
.pc-cal-roster-list a { flex: 1; color: inherit; }
.pc-cal-roster-tag { font-size: .75rem; color: var(--pc-muted); }

@media (prefers-reduced-motion: no-preference) {
    .pc-cal-cell.free .pc-cal-daynum { transition: background .12s ease; }
}