/* Scheduling: the calendar views (day, week, month, agenda), the booking flow, appointments, hours and blocks, visit types.
   Every value is a design token (a custom property of the active theme) or derived from one with color-mix(), so light, dark, the shipped themes and the old look's frame follow; nothing is hard-coded. Status is ALWAYS in words: the colors, edges and
   patterns only help (a visit says Booked, a held time says Held, blocked time says what kind). The grid is laid out by classes (static/schedule-grid.css: positions of five minutes at a time), never by style attributes (the content security
   policy forbids them). Below 46rem of room the grid becomes an agenda by CSS alone: the same lists, one day after another. */

.sc-page { --pm: .078rem; --sc-gutter: 3.6rem; --sc-head: 3.3rem; --sc-min-col: 6.4rem; --sc-live: var(--color-live-on); --sc-warn: var(--color-live-away); --sc-bad: var(--color-danger-text); }

/* ---- the controls */
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-2); }
.sc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 1 1 22rem; min-width: 0; }
.sc-nav .btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .4rem .8rem; }
.sc-step { min-width: 2.5rem; }
.sc-flip { transform: rotate(180deg); }
.sc-title { margin: 0 0 0 var(--space-2); font-size: 1.15rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-seg { list-style: none; display: inline-flex; flex-wrap: wrap; gap: .2rem; margin: 0; padding: .25rem; border-radius: calc(var(--radius-md) + .25rem); background: var(--color-surface-2); border: 1px solid var(--color-border); max-width: 100%; }
.sc-seg a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem .85rem; border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; font-weight: 600; }
.sc-seg a:hover { color: var(--color-text); }
.sc-seg a[aria-current="page"] { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 14%, transparent), 0 0 0 1px var(--color-border); }
.sc-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.sc-acts .btn, .sc-pop .btn { text-decoration: none; min-height: 2.5rem; display: inline-flex; align-items: center; gap: .3rem; }
.sc-zone { margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: .1rem var(--space-3); align-items: baseline; }
.sc-filters { padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.sc-filters > summary { cursor: pointer; font-weight: 650; padding: .35rem 0; min-height: 2rem; }
.sc-filter-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: var(--space-3); align-items: end; margin: var(--space-2) 0; }
.sc-check { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; }
.sc-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--color-accent); }
.sc-pick-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: .2rem var(--space-3); }
.sc-pick-list label { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; }
.sc-pick-list input { width: 1.2rem; height: 1.2rem; accent-color: var(--color-accent); }
.sc-flash { margin: 0 0 var(--space-3); }

.sc-inline-h { display: inline; font-size: 1.05rem; margin: 0; }
.sc-chooser > details > summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; }
.sc-chooser .sc-pick { margin-top: var(--space-3); }

/* ---- the grid: a gutter of hours and a column for each day (or provider) */
.sc-cal, .sc-month { container: sccal / inline-size; position: relative; }
.sc-strip { display: none; }
.sc-scroll { overflow: auto; max-height: min(80vh, 62rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.sc-scroll:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.sc-grid { display: grid; grid-template-columns: var(--sc-gutter) repeat(var(--cols, 7), minmax(var(--sc-min-col), 1fr)); min-width: min-content; position: relative; }
.sc-cols-1 { --cols: 1; } .sc-cols-2 { --cols: 2; } .sc-cols-3 { --cols: 3; } .sc-cols-4 { --cols: 4; } .sc-cols-5 { --cols: 5; } .sc-cols-6 { --cols: 6; } .sc-cols-7 { --cols: 7; } .sc-cols-8 { --cols: 8; }
.sc-cols-2, .sc-cols-3, .sc-cols-4 { --sc-min-col: 9rem; }
.sc-cols-5, .sc-cols-6, .sc-cols-7, .sc-cols-8 { --sc-min-col: 6.4rem; }
.sc-body, .sc-gbody { position: relative; height: calc((var(--hu, 0) * 5 + var(--hk, 0)) * var(--pm)); }

.sc-gutter { position: sticky; left: 0; z-index: 4; background: var(--color-surface); border-right: 1px solid var(--color-border); }
.sc-gh { position: sticky; top: 0; height: var(--sc-head); background: var(--color-surface); border-bottom: 1px solid var(--color-border); z-index: 5; }
.sc-hour { position: absolute; right: .45rem; top: calc((var(--tu, 0) * 5 + var(--tk, 0)) * var(--pm)); padding-top: .15rem; font-size: .7rem; line-height: 1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-hour.sc-hour:first-child { padding-top: .35rem; }

.sc-day { position: relative; min-width: 0; border-left: 1px solid var(--color-border); }
.sc-dh { position: sticky; top: 0; z-index: 3; height: var(--sc-head); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .2rem .3rem; text-align: center; background: var(--color-surface); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.sc-dh h3 { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; font-size: .85rem; letter-spacing: 0; line-height: 1.2; max-width: 100%; }
.sc-dh h3 a { color: var(--color-text); text-decoration: none; padding: .15rem .65rem; border-radius: 999px; min-height: 1.6rem; display: inline-flex; align-items: center; }
.sc-dh h3 a:hover { background: var(--color-surface-2); }
.sc-dh h3 small { font-weight: 500; color: var(--color-text-muted); font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-day.is-today .sc-dh h3 a { background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; }
.sc-day.is-today .sc-body { background-color: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)); }
.sc-allday { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .45rem; border-radius: 999px; font-size: .7rem; line-height: 1.3rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); }
.sc-allday .icon { width: .9em; height: .9em; }
.sc-clock-note { display: flex; align-items: center; gap: .3rem; margin: 0; font-size: .68rem; line-height: 1.2; color: var(--color-text); background: color-mix(in srgb, var(--sc-warn) 16%, var(--color-surface)); border: 1px solid var(--sc-warn); border-radius: var(--radius-sm); padding: 0 .35rem; }
.sc-clock-note .icon { width: .9em; height: .9em; flex: none; }

.sc-body { background-color: var(--color-surface); }
.sc-has-hours .sc-body { background-color: color-mix(in srgb, var(--color-surface-2) 78%, var(--color-surface)); }
.sc-has-hours .sc-day.is-today .sc-body { background-color: color-mix(in srgb, var(--color-accent) 7%, color-mix(in srgb, var(--color-surface-2) 78%, var(--color-surface))); }
.sc-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sc-line { position: absolute; left: 0; right: 0; height: 1px; top: calc((var(--tu, 0) * 5 + var(--tk, 0)) * var(--pm)); background: color-mix(in srgb, var(--color-border) 85%, transparent); }
.sc-hours { position: absolute; left: 0; right: 0; z-index: 0; top: calc((var(--tu, 0) * 5 + var(--tk, 0)) * var(--pm)); height: calc((var(--hu, 0) * 5 + var(--hk, 0)) * var(--pm)); background: var(--color-surface); }
.sc-day.is-today .sc-hours { background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)); }
.sc-clock { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; top: calc((var(--tu, 0) * 5 + var(--tk, 0)) * var(--pm)); height: calc((var(--hu, 0) * 5 + var(--hk, 0)) * var(--pm)); }
.sc-clock-missing { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--sc-warn) 55%, transparent) 5px 6px); background-color: color-mix(in srgb, var(--sc-warn) 10%, transparent); }
.sc-clock-twice { background-color: color-mix(in srgb, var(--color-accent) 9%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-accent) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
.sc-now { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; top: calc((var(--tu, 0) * 5 + var(--tk, 0)) * var(--pm)); background: var(--sc-bad); pointer-events: none; }
.sc-now::before { content: ""; position: absolute; left: -.3rem; top: -.25rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--sc-bad); }
.sc-items { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sc-empty:empty { display: none; }
.sc-empty { display: none; }

/* ---- an item: a visit, a block or a held time. Status colors and edges; the words are printed on it too */
.sc-item { position: absolute; pointer-events: auto; top: calc((var(--tu, 0) * 5 + var(--tk, 0)) * var(--pm)); height: calc((var(--hu, 0) * 5 + var(--hk, 0)) * var(--pm) - 2px);
  left: calc(var(--ln, 0) / var(--lc, 1) * 100% + 2px); width: calc(var(--ls, 1) / var(--lc, 1) * 100% - 4px); min-width: 0; }
.sc-link { display: flex; flex-direction: column; gap: .05rem; box-sizing: border-box; height: 100%; width: 100%; min-width: 0; padding: .2rem .4rem .2rem .45rem; overflow: hidden; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none;
  background: var(--sc-bg); border: 1px solid var(--sc-bd); border-left: 4px solid var(--sc-edge); font-size: .74rem; line-height: 1.25; transition: box-shadow var(--motion) var(--ease), transform var(--motion) var(--ease); }
a.sc-link:hover { box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--color-text) 60%, transparent); transform: translateY(-1px); }
a.sc-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; z-index: 6; position: relative; }
.sc-time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .7rem; }
.sc-t-range { display: none; }
.sc-ttl { font-weight: 650; overflow-wrap: anywhere; }
.sc-who, .sc-own, .sc-zones, .sc-nt { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-own, .sc-zones, .sc-nt { font-size: .68rem; color: var(--color-text-muted); }
.sc-st { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; font-weight: 600; color: var(--color-text); }
.sc-st .icon { width: .95em; height: .95em; }
.sc-rep-note { font-weight: 500; color: var(--color-text-muted); }
.sc-short .sc-link { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; gap: 0 .4rem; padding-block: .1rem; }
.sc-short .sc-time { grid-column: 1; }
.sc-short .sc-ttl { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-short .sc-st { grid-column: 1 / -1; }
.sc-short .sc-who, .sc-short .sc-own, .sc-short .sc-zones, .sc-short .sc-nt { display: none; }
.sc-from-prev .sc-link { border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed; }
.sc-to-next .sc-link { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dashed; }

.sc-appt { --sc-bg: color-mix(in srgb, var(--color-accent) 13%, var(--color-surface)); --sc-bd: color-mix(in srgb, var(--color-accent) 32%, var(--color-border)); --sc-edge: var(--color-accent); }
.sc-s-confirmed { --sc-bg: color-mix(in srgb, var(--color-accent) 24%, var(--color-surface)); }
.sc-s-checked_in, .sc-s-in_progress { --sc-bg: color-mix(in srgb, var(--sc-live) 20%, var(--color-surface)); --sc-bd: color-mix(in srgb, var(--sc-live) 55%, var(--color-border)); --sc-edge: var(--sc-live); }
.sc-s-completed { --sc-bg: var(--color-surface-2); --sc-bd: var(--color-border); --sc-edge: var(--color-text-muted); }
.sc-s-tentative { --sc-bg: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sc-warn) 14%, var(--color-surface)) 0 6px, color-mix(in srgb, var(--sc-warn) 5%, var(--color-surface)) 6px 12px); --sc-bd: var(--sc-warn); --sc-edge: var(--sc-warn); }
.sc-s-tentative .sc-link { border-style: dashed dashed dashed solid; }
.sc-s-cancelled_by_patient, .sc-s-cancelled_by_provider, .sc-s-cancelled_by_clinic, .sc-s-rescheduled, .sc-s-no_show_patient, .sc-s-no_show_provider { --sc-bg: color-mix(in srgb, var(--sc-bad) 7%, var(--color-surface)); --sc-bd: color-mix(in srgb, var(--sc-bad) 40%, var(--color-border)); --sc-edge: var(--sc-bad); }
.sc-s-cancelled_by_patient .sc-ttl, .sc-s-cancelled_by_provider .sc-ttl, .sc-s-cancelled_by_clinic .sc-ttl, .sc-s-rescheduled .sc-ttl { text-decoration: line-through; }
.sc-hold { --sc-bg: color-mix(in srgb, var(--sc-warn) 10%, var(--color-surface)); --sc-bd: var(--sc-warn); --sc-edge: var(--sc-warn); }
.sc-hold .sc-link { border-style: dotted dotted dotted solid; }
.sc-block { --sc-bg: repeating-linear-gradient(135deg, var(--color-surface-2) 0 7px, color-mix(in srgb, var(--color-text-muted) 20%, var(--color-surface-2)) 7px 8px); --sc-bd: var(--color-border); --sc-edge: var(--color-text-muted); }
.sc-k-holiday, .sc-k-time_off { --sc-edge: var(--color-text); }
.sc-follow .sc-ttl::after { content: " (follow-up)"; font-weight: 500; color: var(--color-text-muted); }

.sc-pop { position: absolute; z-index: 20; min-width: 15rem; max-width: calc(100% - 1rem); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card), 0 18px 40px -20px color-mix(in srgb, var(--color-text) 60%, transparent); }
.sc-pop p { margin: 0 0 var(--space-2); }
.sc-pop-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- the details of an appointment beside the calendar (a drawer on a phone) */
.sc-panel { position: fixed; right: var(--space-4); top: var(--space-4); bottom: calc(var(--space-4) + var(--env-banner-h)); width: min(26rem, calc(100vw - 2rem)); z-index: 40; overflow: auto; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--color-text) 55%, transparent); }
.sc-panel:focus { outline: none; }
.sc-panel h2 { font-size: 1.05rem; margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.sc-panel-x { float: right; }
.sc-panel .facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

.sc-sw { display: inline-block; flex: none; width: 1.6rem; height: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); vertical-align: -.15rem; margin-right: .5rem; }
.sc-sw-hours { background: var(--color-surface); }
.sc-sw-off { background: color-mix(in srgb, var(--color-surface-2) 78%, var(--color-surface)); }
.sc-sw-booked { background: color-mix(in srgb, var(--color-accent) 13%, var(--color-surface)); border-left: 4px solid var(--color-accent); }
.sc-sw-tentative { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sc-warn) 14%, var(--color-surface)) 0 6px, color-mix(in srgb, var(--sc-warn) 5%, var(--color-surface)) 6px 12px); border: 1px dashed var(--sc-warn); }
.sc-sw-hold { background: color-mix(in srgb, var(--sc-warn) 10%, var(--color-surface)); border: 1px dotted var(--sc-warn); }
.sc-sw-block { background: repeating-linear-gradient(135deg, var(--color-surface-2) 0 7px, color-mix(in srgb, var(--color-text-muted) 20%, var(--color-surface-2)) 7px 8px); }
.sc-legend { margin: var(--space-3) 0 0; }
.sc-legend > summary { cursor: pointer; padding: .35rem 0; font-weight: 600; min-height: 2rem; }
.sc-key { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: .3rem; }
kbd { font: inherit; font-size: .8em; padding: .05rem .4rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface-2); }

/* ---- the agenda (a table, one day after another) and the month */
.sc-agenda { display: grid; gap: var(--space-4); }
.sc-ag-day h3 { font-size: 1rem; display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.sc-ag-day.is-today h3 { color: var(--color-accent-text); }
.sc-ag-table td, .sc-ag-table th { vertical-align: top; }
.sc-st { white-space: nowrap; }
.sc-mtable { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.sc-mtable th { padding: .4rem; font-size: .75rem; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); text-align: center; }
.sc-mtable td { vertical-align: top; height: 6.2rem; padding: .2rem; border: 1px solid var(--color-border); min-width: 0; }
.sc-mtable td.sc-out { background: color-mix(in srgb, var(--color-surface-2) 70%, var(--color-surface)); }
.sc-mtable td.is-today { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
.sc-mday { display: flex; justify-content: space-between; align-items: baseline; gap: .3rem; min-height: 1.8rem; padding: .15rem .3rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); }
.sc-mday:hover { background: var(--color-surface-2); }
.sc-mnum { font-weight: 700; font-variant-numeric: tabular-nums; }
.is-today .sc-mnum { background: var(--color-accent); color: var(--color-on-accent); border-radius: 999px; min-width: 1.6rem; text-align: center; }
.sc-mcount { font-size: .7rem; color: var(--color-text-muted); }
.sc-chips { list-style: none; margin: 0; padding: 0 .2rem; display: grid; gap: .1rem; }
.sc-chips a { display: block; font-size: .7rem; line-height: 1.5rem; min-height: 1.5rem; padding: 0 .3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); color: var(--color-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-chips a:hover, .sc-chips a:focus-visible { background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)); }

/* ---- lists, details, forms of the other screens */
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem var(--space-3); align-items: center; padding: .7rem .9rem; border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); }
.sc-row.sc-tentative { border-left-color: var(--sc-warn); border-left-style: dashed; }
.sc-row.sc-bad { border-left-color: var(--sc-bad); }
.sc-row.sc-good { border-left-color: var(--sc-live); }
.sc-row a:not(.btn) { color: inherit; text-decoration: none; }
.sc-row a:not(.btn):hover b { text-decoration: underline; }
.sc-row .sc-side { display: grid; justify-items: end; gap: .15rem; }
.sc-row b { overflow-wrap: anywhere; }
.sc-acts-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.sc-acts-row details { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .2rem var(--space-3); background: var(--color-surface); min-width: min(100%, 14rem); }
.sc-acts-row summary { cursor: pointer; font-weight: 650; min-height: 2.5rem; display: flex; align-items: center; }
.sc-acts-row form { margin: var(--space-2) 0 var(--space-3); }
.sc-days { display: grid; gap: var(--space-3); }
.sc-day-slots { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface); }
.sc-day-slots h3 { font-size: .95rem; margin-bottom: var(--space-2); }
.sc-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sc-slots form { margin: 0; }
.sc-slot { min-height: 2.75rem; min-width: 5.2rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: .3rem .7rem; line-height: 1.15; }
.sc-slot small { font-weight: 500; font-size: .7rem; opacity: 1; }
.sc-hold-note { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--sc-warn) 14%, var(--color-surface)); border: 1px solid var(--sc-warn); margin: 0 0 var(--space-4); }
.sc-wk { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.sc-wk label { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.5rem; padding: 0 .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.sc-wk input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); }
.sc-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: var(--space-3); align-items: end; margin: 0 0 var(--space-3); }
.sc-form-grid input, .sc-form-grid select, .sc-form-grid textarea { width: 100%; }
.sc-form-grid .select-field input[type="time"], .sc-form-grid .select-field input[type="date"], .sc-form-grid .select-field input[type="datetime-local"], .sc-form-grid .select-field input[type="number"], .sc-form-grid .select-field input[type="text"] {
  padding: .55rem .6rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; min-width: 0; }
.sc-versions { display: grid; gap: var(--space-3); }
.sc-ver { border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.sc-ver.sc-v-active { border-left-color: var(--sc-live); }
.sc-ver.sc-v-in_review { border-left-color: var(--sc-warn); border-left-style: dashed; }
.sc-ver.sc-v-retired { border-left-color: var(--color-text-muted); }
.sc-why { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.sc-gap { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--sc-warn); background: color-mix(in srgb, var(--sc-warn) 14%, var(--color-surface)); margin: 0 0 var(--space-4); }
.sc-search { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
.sc-search .select-field { flex: 1 1 16rem; min-width: 0; }

/* ---- a narrow container: the grid becomes an agenda (the same lists, day after day) */
@container sccal (max-width: 46rem) {
  .sc-strip { display: block; margin: 0 0 var(--space-3); }
  .sc-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
  .sc-strip a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); text-decoration: none; font-weight: 600; font-size: .85rem; }
  .sc-strip a[aria-current="date"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .sc-scroll { max-height: none; overflow: visible; border: 0; box-shadow: none; background: transparent; }
  .sc-grid { display: block; min-width: 0; }
  .sc-gutter, .sc-lines, .sc-hours, .sc-clock, .sc-now { display: none; }
  .sc-day { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin: 0 0 var(--space-3); background: var(--color-surface); scroll-margin-top: var(--space-3); }
  .sc-dh { position: static; height: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: .6rem var(--space-3); text-align: left; gap: var(--space-2); }
  .sc-dh h3 { flex-direction: row; align-items: baseline; gap: .5rem; font-size: 1rem; }
  .sc-dh h3 a { padding-left: 0; }
  .sc-day.is-today .sc-dh h3 a { padding-inline: .65rem; }
  .sc-body { height: auto; background: transparent !important; }
  .sc-items { position: static; display: grid; gap: .4rem; padding: .5rem var(--space-3) var(--space-3); }
  .sc-item { position: static; width: auto; height: auto; }
  .sc-link { height: auto; padding: .5rem .7rem; font-size: .88rem; display: grid; grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr); gap: .1rem .7rem; min-height: 2.75rem; }
  .sc-time { grid-column: 1; grid-row: 1 / span 3; font-size: .82rem; white-space: normal; }
  .sc-t-at { display: none; }
  .sc-t-range { display: inline; }
  .sc-ttl, .sc-who, .sc-own, .sc-zones, .sc-st, .sc-nt { grid-column: 2; }
  .sc-who, .sc-own, .sc-zones, .sc-nt { white-space: normal; }
  .sc-short .sc-who, .sc-short .sc-own, .sc-short .sc-zones, .sc-short .sc-nt, .sc-short .sc-st span { display: inline; }
  .sc-short .sc-link { display: grid; }
  .sc-empty { display: block; padding: .2rem 0; }
  .sc-empty:empty { display: none; }
  .sc-panel { inset: auto 0 0 0; width: auto; max-height: 85vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .sc-pop { display: none !important; }
  .sc-mtable td { height: 4.6rem; }
  .sc-mtable .sc-chips, .sc-mtable .sc-mcount { display: none; }
}
@media (max-width: 43.75rem) {
  .sc-seg a { padding-inline: .6rem; }
  .sc-acts { margin-left: 0; width: 100%; }
  .sc-panel { inset: auto 0 0 0; width: auto; max-height: 85vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; bottom: var(--env-banner-h); }
  .sc-row { grid-template-columns: minmax(0, 1fr); }
  .sc-row .sc-side { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .sc-link { transition: none; } a.sc-link:hover { transform: none; } }
@media print {
  .sc-bar, .sc-zone, .sc-filters, .sc-legend, .sc-panel, .sc-pop, .sc-acts, .env-banner { display: none !important; }
  .sc-scroll { max-height: none; overflow: visible; border: 0; box-shadow: none; }
  .sc-link { border-color: #000 !important; background: #fff !important; color: #000 !important; }
}