/*
 * Calendar (kit lane K5): Day, Week, Month, Agenda. Plain CSS, tokens only, mobile first.
 * Dentist colours: classes dc-0 .. dc-19 set --dc (accent bar and dots) and --dc-bg (15% tint).
 * --cal-dc-N (tokens.css) is --dc-N, except 18 values darkened (light) or lightened (dark) so the
 * 0.25rem bar reaches 3:1 against the page background. TestDentistColourContrast checks every pair.
 * Event text always uses --ink on the tint (4.5:1 or better).
 */
/* --cal-dc-N tokens live in tokens/tokens.css (clinic block). */

.dc-0 { --dc: var(--cal-dc-0); --dc-bg: var(--dc-bg-0); }
.dc-1 { --dc: var(--cal-dc-1); --dc-bg: var(--dc-bg-1); }
.dc-2 { --dc: var(--cal-dc-2); --dc-bg: var(--dc-bg-2); }
.dc-3 { --dc: var(--cal-dc-3); --dc-bg: var(--dc-bg-3); }
.dc-4 { --dc: var(--cal-dc-4); --dc-bg: var(--dc-bg-4); }
.dc-5 { --dc: var(--cal-dc-5); --dc-bg: var(--dc-bg-5); }
.dc-6 { --dc: var(--cal-dc-6); --dc-bg: var(--dc-bg-6); }
.dc-7 { --dc: var(--cal-dc-7); --dc-bg: var(--dc-bg-7); }
.dc-8 { --dc: var(--cal-dc-8); --dc-bg: var(--dc-bg-8); }
.dc-9 { --dc: var(--cal-dc-9); --dc-bg: var(--dc-bg-9); }
.dc-10 { --dc: var(--cal-dc-10); --dc-bg: var(--dc-bg-10); }
.dc-11 { --dc: var(--cal-dc-11); --dc-bg: var(--dc-bg-11); }
.dc-12 { --dc: var(--cal-dc-12); --dc-bg: var(--dc-bg-12); }
.dc-13 { --dc: var(--cal-dc-13); --dc-bg: var(--dc-bg-13); }
.dc-14 { --dc: var(--cal-dc-14); --dc-bg: var(--dc-bg-14); }
.dc-15 { --dc: var(--cal-dc-15); --dc-bg: var(--dc-bg-15); }
.dc-16 { --dc: var(--cal-dc-16); --dc-bg: var(--dc-bg-16); }
.dc-17 { --dc: var(--cal-dc-17); --dc-bg: var(--dc-bg-17); }
.dc-18 { --dc: var(--cal-dc-18); --dc-bg: var(--dc-bg-18); }
.dc-19 { --dc: var(--cal-dc-19); --dc-bg: var(--dc-bg-19); }


/* Toolbar */
.cal { --cal-row: 2.25rem; --cal-time-w: 4.5rem; --cal-lane-w: 9rem; }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.cal-steps { display: flex; gap: var(--space-1); }
.cal-title { flex: 1 1 12rem; margin: 0; font-size: var(--fs-5); color: var(--ink); }
.cal-step, .cal-today-btn, .cal-view { min-height: var(--touch); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-3); }
.cal-step { min-width: var(--touch); font-size: var(--fs-6); }
.cal-picker { display: flex; gap: var(--space-2); align-items: center; }
.cal-date { min-height: var(--touch); padding: 0.45rem 0.7rem; background: var(--surface); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-sm); font-size: max(1rem, 1em); }
.cal-views { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.cal-view { color: var(--body); text-decoration: none; background: var(--surface); }
.cal-view + .cal-view { border-left: 1px solid var(--border-strong); }
.cal-view.is-active { background: var(--accent); color: var(--accent-ink); }
.cal-dentists { position: relative; }
.cal-dentists summary { min-height: var(--touch); display: inline-flex; align-items: center; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; background: var(--surface); }
.cal-dentists ul { position: absolute; z-index: 6; margin: var(--space-1) 0 0; padding: var(--space-1); list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); min-width: 12rem; }
.cal-dentists li a { display: block; padding: var(--space-2) var(--space-3); min-height: var(--touch); box-sizing: border-box; color: var(--body); text-decoration: none; }
.cal-dentists li a[aria-current] { font-weight: 700; color: var(--accent); }

/* Colour dot */
.cal-dot { display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; margin-right: var(--space-1); border-radius: 50%; background: var(--dc, var(--accent)); }

/* Grid (Day, Week): phone shows the agenda, tablet and up the grid */
.cal-scroll { display: none; overflow: auto; max-height: calc(100vh - 14rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cal-month .cal-scroll { display: block; }
.cal-agenda { display: block; }
.cal-grid { width: 100%; min-width: 36rem; border-collapse: separate; border-spacing: 0; table-layout: auto; }
.cal-grid th, .cal-grid td { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.cal-grid tr.cal-hour > * { border-top: 1px solid var(--border-strong); }
.cal-head { position: sticky; top: 0; z-index: 3; padding: var(--space-2); background: var(--surface-2); color: var(--ink); font-size: var(--fs-2); font-weight: 700; text-align: center; border-bottom: 2px solid var(--dc, var(--border-strong)); }
.cal-head a { color: inherit; text-decoration: none; }
.cal-head.cal-today { background: var(--accent-wash); }
.cal-head-sub { font-weight: 400; color: var(--ink-muted); }
.cal-grid th.cal-time { position: sticky; left: 0; z-index: 2; width: var(--cal-time-w); min-width: var(--cal-time-w); padding: 0 var(--space-2); background: var(--surface-2); color: var(--ink-muted); font-size: var(--fs-1); font-weight: 400; text-align: right; vertical-align: top; border-left: 0; white-space: nowrap; }
.cal-grid thead th.cal-time { z-index: 4; top: 0; }
.cal-corner-tl-time { border-top-left-radius: var(--radius-md); }
.cal-corner-tr { border-top-right-radius: var(--radius-md); }
.cal-grid tr.cal-last th.cal-time { border-bottom-left-radius: var(--radius-md); }
.cal-grid tbody tr { height: var(--cal-row); }
.cal-slot { position: relative; min-width: var(--cal-lane-w); padding: 0; }
.cal-add { position: absolute; inset: 0; display: block; }
.cal-add:hover, .cal-add:focus-visible { background: var(--accent-wash); outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* Event block: tint, 0.25rem accent bar, ink text */
.cal-ev { display: flex; flex-direction: column; gap: 1px; overflow: hidden; box-sizing: border-box; padding: 2px var(--space-2); background: var(--dc-bg); border-left: .25rem solid var(--dc); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-1); line-height: 1.25; text-decoration: none; }
.cal-ev:hover { box-shadow: var(--shadow-1); }
.cal-ev:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cal-has-ev .cal-ev { position: absolute; inset: 2px; }
.cal-ev-time { color: var(--body); }
.cal-grid .cal-ev-title { order: -1; } /* a 30-minute block clips the last line: the name stays, the time goes (SRR-11) */
.cal-ev-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-sub { color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-cont { color: var(--body); font-style: italic; }
.cal-ev.is-recall { outline: 1px dashed var(--dc); outline-offset: -1px; }
.cal-ev.is-in::after { content: "\2713"; position: absolute; top: 2px; right: .375rem; font-weight: 700; color: var(--ok-ink); }

/* Agenda */
.cal-agenda-group { margin-bottom: var(--space-4); }
.cal-agenda-head { display: flex; align-items: center; margin: 0 0 var(--space-2); font-size: var(--fs-4); color: var(--ink); }
.cal-agenda ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.cal-agenda .cal-ev { min-height: var(--touch); padding: var(--space-2) var(--space-3); font-size: var(--fs-3); }
.cal-agenda .cal-ev-title, .cal-agenda .cal-ev-sub { white-space: normal; }
.cal-empty-text { color: var(--ink-muted); }

/* Month */
.cal-mgrid { display: grid; min-width: 0; }
.cal-mrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-mh { padding: var(--space-2); background: var(--surface-2); color: var(--ink-muted); font-size: var(--fs-1); font-weight: 700; text-align: center; border-bottom: 1px solid var(--border); }
.cal-mh abbr { text-decoration: none; }
.cal-mcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 4.5rem; padding: var(--space-1); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); }
.cal-mrow .cal-mcell:first-child { border-left: 0; }
.cal-mcell.cal-other { background: var(--surface-2); color: var(--ink-muted); }
.cal-mday { align-self: flex-start; min-width: 1.75rem; min-height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); color: inherit; font-size: var(--fs-2); font-weight: 700; text-decoration: none; }
.cal-mcell.cal-today .cal-mday { background: var(--accent); color: var(--accent-ink); }
.cal-mlines { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.cal-mline, .cal-more { display: flex; align-items: center; min-width: 0; padding: 1px 2px; border-radius: var(--radius-sm); color: var(--ink); font-size: 0.6875rem; text-decoration: none; }
.cal-mcell.cal-other .cal-mline { color: var(--ink-muted); }
.cal-mline-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mline:hover, .cal-more:hover { background: var(--accent-wash); }
.cal-more { color: var(--accent); font-weight: 700; }

@media (min-width: 768px) {
  .cal-scroll { display: block; }
  .cal-day .cal-agenda, .cal-week .cal-agenda { display: none; }
  .cal-mcell { min-height: 6.5rem; padding: var(--space-2); }
  .cal-mline, .cal-more { font-size: var(--fs-1); }
}
@media (min-width: 992px) {
  .cal-step, .cal-today-btn, .cal-view, .cal-dentists summary { min-height: 2.25rem; }
  .cal-step { min-width: 2.25rem; }
  .cal-date { min-height: 2.25rem; }
}
@media print {
  .cal-toolbar, .cal-add { display: none; }
  .cal-scroll { max-height: none; overflow: visible; }
}

/* R6 (SRR-05): grid parts named by the calendar templates. */
.cal-corner { background: var(--surface-2); }
.cal-empty { background: transparent; }
.cal-head-label { font-weight: 700; }
.cal-mhead { border-bottom: 1px solid var(--border); }
.cal-grid-day, .cal-grid-week { table-layout: auto; }