@tensor_1/tokens 2.31.0 → 2.33.0

package/styles/components/dashboard-grid.css

@@ -0,0 +1,87 @@
+/* DashboardGrid (HAR-1555): the layout grid for dashboard widgets. Items span 1 column,
+   2 columns or the full row, and the column count follows the GRID'S OWN WIDTH (a container
+   query), not the viewport, so a dashboard beside an open sidebar gets fewer columns.
+
+   How it works: the grid always has 12 equal tracks (12 is divisible by 1, 2, 3 and 4). A
+   container query on the grid picks the column count, and each child spans 12 / columns
+   tracks (span 2: twice that, never more than 12). Span 2 therefore clamps to the columns
+   there are, and a full item is `grid-column: 1 / -1` at every width.
+
+   Column breakpoints (grid width): sm 36rem · md 48rem · lg 60rem · xl 80rem. They are sized
+   for widgets of about 280–320 px: 2 columns from 36rem, 3 from 60rem, 4 from 80rem.
+   Without a column class: 1 column, 2 from sm, 3 from lg. Any column class replaces those
+   defaults at every width it covers (the defaults are zero-specificity `:where()` rules).
+
+   Each item is an inline-size container (`uix-dashboard-grid-item`), so a chart or card inside
+   can use @container queries or cqi units against the item's width. */
+@layer uix.components {
+  .uix-dashboard-grid {
+    --dashboard-grid-gap: var(--uix-space-4);
+    container: uix-dashboard-grid / inline-size;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    /* 11 column gaps sit between the 12 tracks. Capping each at 1/12 of the width keeps a very
+       narrow grid from being pushed wider than its box by the gaps alone. */
+    column-gap: min(var(--dashboard-grid-gap), calc(100% / 12));
+    row-gap: var(--dashboard-grid-gap);
+    min-width: 0;
+  }
+  .uix-dashboard-grid--gap-sm { --dashboard-grid-gap: var(--uix-space-3); }
+  .uix-dashboard-grid--gap-lg { --dashboard-grid-gap: var(--uix-space-6); }
+
+  /* Every direct child is a cell. --dashboard-grid-one / -two are the tracks a span-1 / span-2
+     child takes at the current width; the rules below set them. */
+  .uix-dashboard-grid > * { grid-column: span var(--dashboard-grid-one, 12); min-width: 0; }
+  .uix-dashboard-grid > .uix-dashboard-grid__item--span-2 { grid-column: span var(--dashboard-grid-two, 12); }
+
+  /* The item fills its row (widgets in one row share a height) and is the container its
+     content sizes against. Its last child takes the spare height. */
+  .uix-dashboard-grid__item {
+    container: uix-dashboard-grid-item / inline-size;
+    display: flex;
+    flex-direction: column;
+  }
+  .uix-dashboard-grid__item > :last-child { flex-grow: 1; }
+
+  /* Base (any width). Default: 1 column. */
+  :where(.uix-dashboard-grid) > * { --dashboard-grid-one: 12; --dashboard-grid-two: 12; }
+  .uix-dashboard-grid--cols-1 > * { --dashboard-grid-one: 12; --dashboard-grid-two: 12; }
+  .uix-dashboard-grid--cols-2 > * { --dashboard-grid-one: 6; --dashboard-grid-two: 12; }
+  .uix-dashboard-grid--cols-3 > * { --dashboard-grid-one: 4; --dashboard-grid-two: 8; }
+  .uix-dashboard-grid--cols-4 > * { --dashboard-grid-one: 3; --dashboard-grid-two: 6; }
+
+  @container uix-dashboard-grid (min-width: 36rem) {
+    /* Default: 2 columns. */
+    :where(.uix-dashboard-grid) > * { --dashboard-grid-one: 6; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--sm-cols-1 > * { --dashboard-grid-one: 12; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--sm-cols-2 > * { --dashboard-grid-one: 6; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--sm-cols-3 > * { --dashboard-grid-one: 4; --dashboard-grid-two: 8; }
+    .uix-dashboard-grid--sm-cols-4 > * { --dashboard-grid-one: 3; --dashboard-grid-two: 6; }
+  }
+
+  @container uix-dashboard-grid (min-width: 48rem) {
+    .uix-dashboard-grid--md-cols-1 > * { --dashboard-grid-one: 12; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--md-cols-2 > * { --dashboard-grid-one: 6; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--md-cols-3 > * { --dashboard-grid-one: 4; --dashboard-grid-two: 8; }
+    .uix-dashboard-grid--md-cols-4 > * { --dashboard-grid-one: 3; --dashboard-grid-two: 6; }
+  }
+
+  @container uix-dashboard-grid (min-width: 60rem) {
+    /* Default: 3 columns. */
+    :where(.uix-dashboard-grid) > * { --dashboard-grid-one: 4; --dashboard-grid-two: 8; }
+    .uix-dashboard-grid--lg-cols-1 > * { --dashboard-grid-one: 12; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--lg-cols-2 > * { --dashboard-grid-one: 6; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--lg-cols-3 > * { --dashboard-grid-one: 4; --dashboard-grid-two: 8; }
+    .uix-dashboard-grid--lg-cols-4 > * { --dashboard-grid-one: 3; --dashboard-grid-two: 6; }
+  }
+
+  @container uix-dashboard-grid (min-width: 80rem) {
+    .uix-dashboard-grid--xl-cols-1 > * { --dashboard-grid-one: 12; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--xl-cols-2 > * { --dashboard-grid-one: 6; --dashboard-grid-two: 12; }
+    .uix-dashboard-grid--xl-cols-3 > * { --dashboard-grid-one: 4; --dashboard-grid-two: 8; }
+    .uix-dashboard-grid--xl-cols-4 > * { --dashboard-grid-one: 3; --dashboard-grid-two: 6; }
+  }
+
+  /* Last, so it wins over every span rule above: the whole row at every width. */
+  .uix-dashboard-grid > .uix-dashboard-grid__item--full { grid-column: 1 / -1; }
+}

package/styles/components/date-range-picker.css

@@ -5,12 +5,44 @@
   .uix-date-range-picker__month h4 { margin-bottom:var(--uix-space-2); text-align:center; }
   .uix-date-range-picker__weekdays,.uix-date-range-picker__grid { display:grid; grid-template-columns:repeat(7,1fr); }
   .uix-date-range-picker__weekdays span { padding:var(--uix-space-1); color:var(--uix-text-muted); text-align:center; font-size:var(--uix-text-meta); }
-  .uix-date-range-picker__grid button { aspect-ratio:1; min-width:2rem; border:0; border-radius:0; background:transparent; color:var(--uix-text); }
-  .uix-date-range-picker__grid button:hover { background:var(--uix-bg-hover); }
-  .uix-date-range-picker__grid button[data-in-range] { background:var(--uix-brand-muted); }
-  .uix-date-range-picker__grid button[data-range-edge] { border-radius:var(--uix-radius-pill); background:var(--uix-accent); color:var(--uix-accent-fg); font-weight:600; }
+  /* Day cell (HAR-1570): one shape for every state. The button is a transparent square;
+     ::after is the circle (hover, start/end, today, focus), concentric with the cell, and
+     ::before is the range band, exactly the circle's height so band and circle meet with
+     no notches. A start/end cell draws half a band toward its neighbour, and only when
+     that neighbour is in range, so a lone start (or a one-day range) has no band. The
+     half band uses logical insets, so RTL mirrors on its own. */
+  .uix-date-range-picker__grid button { position:relative; isolation:isolate; aspect-ratio:1; min-width:2rem; border:0; border-radius:0; background:transparent; color:var(--uix-text); }
+  .uix-date-range-picker__grid button::before,
+  .uix-date-range-picker__grid button::after { content:""; position:absolute; z-index:calc(-1 * var(--uix-z-raised)); pointer-events:none; }
+  .uix-date-range-picker__grid button::before { inset:3px 0; }
+  .uix-date-range-picker__grid button::after { inset:3px; border-radius:50%; }
+  .uix-date-range-picker__grid button:hover:not(:disabled)::after { background:var(--uix-bg-hover); }
+  .uix-date-range-picker__grid button[data-in-range]::before { background:var(--uix-brand-muted); }
+  .uix-date-range-picker__grid button[data-in-range]:hover:not(:disabled)::after { background:color-mix(in srgb, var(--uix-accent) 18%, transparent); }
+  .uix-date-range-picker__grid button[data-range-edge]::before { background:none; }
+  .uix-date-range-picker__grid button[data-range-edge="start"]:has(+ [data-in-range])::before { inset-inline-start:50%; background:var(--uix-brand-muted); }
+  .uix-date-range-picker__grid [data-in-range] + button[data-range-edge="end"]::before { inset-inline-end:50%; background:var(--uix-brand-muted); }
+  .uix-date-range-picker__grid button[data-range-edge] { color:var(--uix-accent-fg); font-weight:600; }
+  .uix-date-range-picker__grid button[data-range-edge]::after,
+  .uix-date-range-picker__grid button[data-range-edge]:hover:not(:disabled)::after { background:var(--uix-accent); }
+  .uix-date-range-picker__grid button[aria-current="date"]::after { box-shadow:inset 0 0 0 1px var(--uix-text-muted); }
+  /* Focus: a round ring with a surface gap; a plain ring would merge into the accent circle. */
+  .uix-date-range-picker__grid button:focus-visible { z-index:var(--uix-z-raised); outline:none; }
+  .uix-date-range-picker__grid button:focus-visible::after { box-shadow:0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring); }
+  .uix-date-range-picker__grid button[aria-current="date"]:focus-visible::after { box-shadow:inset 0 0 0 1px var(--uix-text-muted), 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring); }
   .uix-date-range-picker__grid button:disabled { color:var(--uix-text-hushed); text-decoration:line-through; }
   .uix-date-range-picker__selection { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
   .uix-date-range-picker--invalid { border-color:var(--uix-danger); }
   @media (max-width:640px) { .uix-date-range-picker__months { grid-template-columns:1fr; } }
+  /* Forced colours drop backgrounds and box-shadows: the edges keep a Highlight circle,
+     in-range days an underline, today and focus a system-colour outline on the circle. */
+  @media (forced-colors:active) {
+    .uix-date-range-picker__grid button[data-range-edge] { forced-color-adjust:none; color:HighlightText; }
+    .uix-date-range-picker__grid button[data-range-edge]::after,
+    .uix-date-range-picker__grid button[data-range-edge]:hover:not(:disabled)::after { forced-color-adjust:none; background:Highlight; }
+    .uix-date-range-picker__grid button[data-in-range]:not([data-range-edge]) { text-decoration-line:underline; text-decoration-thickness:.15em; text-underline-offset:.2em; }
+    .uix-date-range-picker__grid button[data-in-range]:not([data-range-edge]):disabled { text-decoration-line:underline line-through; }
+    .uix-date-range-picker__grid button[aria-current="date"]::after { outline:1px solid CanvasText; outline-offset:-1px; }
+    .uix-date-range-picker__grid button:focus-visible::after { outline:2px solid CanvasText; outline-offset:2px; }
+  }
 }

package/styles/components/file-upload.css

@@ -9,6 +9,7 @@
   .uix-dropzone:hover, .uix-dropzone[data-dragover] { border-color: var(--uix-accent); background: var(--uix-brand-muted); color: var(--uix-text); }
   .uix-dropzone svg { width: var(--uix-icon-lg); height: var(--uix-icon-lg); }
   .uix-filelist { display: flex; flex-direction: column; gap: var(--uix-space-2); margin-top: var(--uix-space-3); }
+  .uix-filelist:empty { display: none; }
   .uix-filelist__item { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-2) var(--uix-space-3); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); font-size: var(--uix-text-meta); color: var(--uix-text); }
   .uix-filelist__size { margin-left: auto; color: var(--uix-text-muted); }
 }
@@ -17,18 +18,24 @@
 @layer uix.components {
   /* :not(label) — BrandProfiles has long put this class on its upload label as a hook. */
   .uix-file-upload:not(label) { display: grid; gap: var(--uix-space-3); min-width: 0; }
+  /* HAR-1630: a grid item's automatic minimum is its longest unbreakable word, so an
+     80-character file name (in a row, or in a "not an accepted type" message) widened the whole
+     component past a 288 px rail. One column that may shrink, and text that breaks anywhere. */
+  .uix-file-upload:not(label) { grid-template-columns: minmax(0, 1fr); }
+  .uix-file-upload:not(label) > * { min-width: 0; }
+  .uix-file-upload .uix-dropzone > * { max-width: 100%; }
   .uix-file-upload[data-disabled] .uix-dropzone { opacity: .6; cursor: not-allowed; }
-  .uix-file-upload__hint { font-size: var(--uix-text-meta); }
-  .uix-file-upload__errors { margin: 0; padding-left: 1.1em; color: var(--uix-danger-text); font-size: var(--uix-text-meta); }
+  .uix-file-upload__hint { font-size: var(--uix-text-meta); overflow-wrap: anywhere; }
+  .uix-file-upload__errors { margin: 0; padding-left: 1.1em; color: var(--uix-danger-text); font-size: var(--uix-text-meta); overflow-wrap: anywhere; }
   .uix-file-upload__list { margin: 0; padding: 0; list-style: none; }
   .uix-file-upload__item { align-items: flex-start; }
   .uix-file-upload__item[data-status="error"] { border-color: var(--uix-danger-border); }
   .uix-file-upload__thumb { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: var(--uix-radius-sm); }
   .uix-file-upload__body { flex: 1; display: grid; gap: var(--uix-space-1); min-width: 0; }
-  .uix-file-upload__name { min-width: 0; overflow-wrap: break-word; font-weight: 500; }
+  .uix-file-upload__name { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
   .uix-file-upload__meta { display: flex; flex-wrap: wrap; gap: var(--uix-space-1) var(--uix-space-3); color: var(--uix-text-muted); }
   .uix-file-upload__meta > * { white-space: nowrap; }
   .uix-file-upload__item[data-status="done"] .uix-file-upload__status { color: var(--uix-success); }
-  .uix-file-upload__error { color: var(--uix-danger-text); }
+  .uix-file-upload__error { color: var(--uix-danger-text); overflow-wrap: anywhere; }
   .uix-file-upload__actions { display: flex; align-items: center; gap: var(--uix-space-1); flex: none; }
 }

package/styles/components/labels.css

@@ -1,6 +1,7 @@
 /* uix label / tag taxonomy — colored via --label-color (set to a --uix-chart-* token). */
 @layer uix.components {
-  .uix-label {
+  /* the tag pill, never a form label (that is .uix-field__label; HAR-1573) */
+  .uix-label:not(label) {
     display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: 1px var(--uix-space-2); border-radius: var(--uix-radius-sm);
     font-size: var(--uix-text-meta); font-weight: 500;
     background: color-mix(in srgb, var(--label-color, var(--uix-accent)) 16%, transparent);

package/styles/components/list.css

@@ -4,7 +4,7 @@
   .uix-list__item { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
   .uix-list__item:last-child { border-bottom: 0; }
   .uix-list__item:hover { background: var(--uix-bg-hover); }
-  .uix-list__title { font-weight: 500; }
-  .uix-list__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-list__title { display: block; font-weight: 500; }
+  .uix-list__meta { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   .uix-list__trail { margin-left: auto; display: flex; align-items: center; gap: var(--uix-space-2); }
 }

package/styles/components/menu.css

@@ -25,3 +25,10 @@
   .uix-menu__item[aria-disabled="true"] { opacity: .5; cursor: default; }
   .uix-menu__item[aria-disabled="true"]:hover { background: transparent; }
 }
+
+/* Radio and checkbox rows (HAR-1629): a fixed check column, so checked and unchecked text lines up. */
+@layer uix.components {
+  .uix-menu__check { display: inline-flex; flex: none; width: var(--uix-icon-sm); height: var(--uix-icon-sm); color: var(--uix-link); }
+  .uix-menu__item .uix-menu__check svg { width: 100%; height: 100%; color: inherit; }
+  .uix-menu__item[aria-checked="true"] { font-weight: 500; }
+}

package/styles/components/meter.css

@@ -6,4 +6,9 @@
   .uix-meter__fill[data-tone="danger"]    { background: var(--uix-danger); }
   .uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }
   .uix-meter__fill[data-tone="overdue"]   { background: var(--uix-overdue); }
+  /* not a status (HAR-1606): a share or a count. Both clear 3:1 against the track in light and
+     dark for every theme (packages/tokens/tests/meter-contrast.test.mjs). The accent fill is
+     --uix-accent-text, not --uix-accent: the raw accent of a bright brand is 2.62:1 on the track. */
+  .uix-meter__fill[data-tone="neutral"]   { background: var(--uix-text-muted); }
+  .uix-meter__fill[data-tone="accent"]    { background: var(--uix-accent-text); }
 }

package/styles/components/pipeline.css

@@ -122,11 +122,11 @@
   }
   .uix-pipeline__stage[data-state="blocked"] .uix-pipeline__state::before { border-radius: var(--uix-radius-xs); }
   .uix-pipeline__title {
-    overflow: hidden; color: var(--uix-text); font-size: var(--uix-text-body); font-weight: 600;
+    display: block; overflow: hidden; color: var(--uix-text); font-size: var(--uix-text-body); font-weight: 600;
     line-height: var(--uix-leading-body); text-overflow: ellipsis; white-space: nowrap;
   }
   .uix-pipeline__description {
-    margin-top: var(--uix-space-1); color: var(--uix-text-muted);
+    display: block; margin-top: var(--uix-space-1); color: var(--uix-text-muted);
     font-size: var(--uix-text-meta); font-weight: 400; line-height: var(--uix-leading-meta);
   }
   .uix-pipeline__meta {

package/styles/components/rule-builder.css

@@ -3,6 +3,8 @@
   .uix-rule-builder__group,.uix-rule-builder__actions { min-width:0; padding:var(--uix-space-4); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); }
   .uix-rule-builder__group-heading { display:flex; align-items:center; gap:var(--uix-space-3); padding:0 var(--uix-space-2); font-weight:600; }
   .uix-rule-builder__group-heading label { display:flex; align-items:center; gap:var(--uix-space-2); font-size:var(--uix-text-meta); font-weight:400; }
+  /* a fixed combinator (HAR-1618): the Match choice as plain text, where the select was */
+  .uix-rule-builder__match { font-size:var(--uix-text-meta); font-weight:400; color:var(--uix-text-muted); }
   .uix-rule-builder__rows { display:grid; gap:var(--uix-space-3); }
   .uix-rule-builder__condition,.uix-rule-builder__action { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(9rem,1fr) minmax(10rem,1.4fr) auto; gap:var(--uix-space-2); align-items:start; padding:var(--uix-space-3); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
   .uix-rule-builder__nested { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--uix-space-2); align-items:start; }

package/styles/components/scheduling-calendar.css

@@ -1,29 +1,213 @@
+/* uix scheduling calendar (React `SchedulingCalendar`). Depends only on --uix-* tokens.
+
+   COLOUR MAP. Every colour the calendar paints is named once in the first rule and read from
+   there; no other rule names a --uix-* colour. One name has one meaning:
+     --calendar-band-*    the band, the only dimension that takes a hue (only `high` is filled)
+     --calendar-status-*  the state channel: line style, weight and dimming, never a hue
+     --calendar-window-*  windows: neutral, told apart by pattern and visible label
+     --calendar-marker-*  markers: a shape or icon with text
+     --calendar-chrome-*  cells, lines, headings and controls
+   To retune a colour, change its line in the map (HAR-1506, HAR-1562). */
 @layer uix.components {
-  .uix-scheduling-calendar { display:grid; gap:var(--uix-space-3); color:var(--uix-text); }
+  .uix-scheduling-calendar {
+    --calendar-chrome-text: var(--uix-text);
+    --calendar-chrome-text-quiet: var(--uix-text-muted);
+    --calendar-chrome-surface: var(--uix-surface);
+    --calendar-chrome-surface-quiet: var(--uix-bg-subtle);
+    --calendar-chrome-line: var(--uix-border);
+    --calendar-chrome-line-strong: var(--uix-border-strong);
+    --calendar-status-surface: var(--uix-surface);
+    --calendar-status-surface-quiet: var(--uix-bg-subtle);
+    --calendar-status-edge: var(--uix-neutral-border);
+    --calendar-status-edge-strong: var(--uix-neutral-solid);
+    --calendar-status-text: var(--uix-text);
+    --calendar-status-text-dim: var(--uix-text-muted);
+    --calendar-band-medium-edge: var(--uix-neutral-solid);
+    --calendar-band-high-fill: var(--uix-danger);
+    --calendar-band-high-text: var(--uix-danger-fg);
+    --calendar-window-surface: var(--uix-neutral-bg);
+    --calendar-window-ink: var(--uix-neutral-solid);
+    --calendar-window-edge: var(--uix-neutral-border);
+    --calendar-window-text: var(--uix-text);
+    --calendar-marker-ink: var(--uix-text);
+    --calendar-chrome-now: var(--uix-text);
+    --calendar-chrome-ghost: var(--uix-neutral-solid);
+    --calendar-chrome-ghost-surface: var(--uix-neutral-bg);
+
+    /* geometry: one head line, then the lanes kept for spans, then the chip rows */
+    --calendar-pad: var(--uix-space-1);
+    --calendar-pad-inline: 0.0625rem;
+    --calendar-head: 1.5rem;
+    --calendar-lane: 1.25rem;
+    --calendar-chip: 1.25rem;
+    --calendar-gap: 0.125rem;
+    --calendar-hour: 3rem;
+    --calendar-gutter: 3.5rem;
+
+    display:grid; gap:var(--uix-space-3); min-width:0; color:var(--calendar-chrome-text);
+  }
   .uix-scheduling-calendar__header { display:flex; align-items:center; justify-content:space-between; gap:var(--uix-space-3); flex-wrap:wrap; }
+  .uix-scheduling-calendar__notice { padding:var(--uix-space-2) var(--uix-space-3); border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-sm); background:var(--calendar-chrome-surface-quiet); font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__notice > :first-child { margin-top:0; } .uix-scheduling-calendar__notice > :last-child { margin-bottom:0; }
+
   /* position:relative makes the scroller the containing block, so visually hidden text in a day (entry states, badge words) is clipped with it instead of widening the page */
-  .uix-scheduling-calendar__grid { position:relative; display:grid; grid-template-columns:repeat(7,minmax(6.5rem,1fr)); border-top:1px solid var(--uix-border); border-left:1px solid var(--uix-border); overflow:auto; }
-  .uix-scheduling-calendar__day { min-height:8rem; padding:var(--uix-space-2); border-right:1px solid var(--uix-border); border-bottom:1px solid var(--uix-border); background:var(--uix-surface); }
-  .uix-scheduling-calendar__day[data-outside] { background:var(--uix-bg-subtle); color:var(--uix-text-muted); }
-  .uix-scheduling-calendar__weekday { padding:var(--uix-space-1) var(--uix-space-2); border-right:1px solid var(--uix-border); border-bottom:1px solid var(--uix-border); background:var(--uix-bg-subtle); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-weight:600; text-align:right; }
-  .uix-scheduling-calendar__dayhead { display:flex; align-items:center; gap:var(--uix-space-1); min-width:0; }
+  .uix-scheduling-calendar__grid { position:relative; display:grid; grid-template-columns:repeat(7,minmax(6.5rem,1fr)); border-top:1px solid var(--calendar-chrome-line); border-left:1px solid var(--calendar-chrome-line); overflow:auto; }
+  .uix-scheduling-calendar__weekday { padding:var(--uix-space-1) var(--uix-space-2); border-right:1px solid var(--calendar-chrome-line); border-bottom:1px solid var(--calendar-chrome-line); background:var(--calendar-chrome-surface-quiet); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); font-weight:600; text-align:right; }
+
+  /* One week is one grid row: the seven day cells, and over them the spans, each drawn once.
+     Cells and spans all sit in row 1 with a set column, so a span never pushes a cell aside. */
+  .uix-scheduling-calendar__week { grid-column:1 / -1; display:grid; grid-template-columns:repeat(7,minmax(6.5rem,1fr)); grid-template-rows:minmax(0,1fr); }
+  .uix-scheduling-calendar__day { grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:8rem; padding:var(--calendar-pad) var(--calendar-pad-inline); border-right:1px solid var(--calendar-chrome-line); border-bottom:1px solid var(--calendar-chrome-line); background:var(--calendar-chrome-surface); }
+  .uix-scheduling-calendar__day:nth-child(1) { grid-column:1; } .uix-scheduling-calendar__day:nth-child(2) { grid-column:2; } .uix-scheduling-calendar__day:nth-child(3) { grid-column:3; } .uix-scheduling-calendar__day:nth-child(4) { grid-column:4; }
+  .uix-scheduling-calendar__day:nth-child(5) { grid-column:5; } .uix-scheduling-calendar__day:nth-child(6) { grid-column:6; } .uix-scheduling-calendar__day:nth-child(7) { grid-column:7; }
+  .uix-scheduling-calendar__day[data-outside] { background:var(--calendar-chrome-surface-quiet); color:var(--calendar-chrome-text-quiet); }
+  /* Fixed geometry: the consumer cut the list and "+N" opens elsewhere, so every cell keeps one
+     height: the head, every lane a row may use (the caps), the chip rows and the "+N" line. A row
+     that uses fewer lanes starts its chips higher and leaves the rest of the cell empty. */
+  .uix-scheduling-calendar__grid[data-fixed] .uix-scheduling-calendar__week {
+    height:calc(2 * var(--calendar-pad) + var(--calendar-head) + var(--uix-scheduling-calendar-lane-cap,0) * var(--calendar-lane) + (var(--uix-scheduling-calendar-chips,3) + 1) * (var(--calendar-chip) + var(--calendar-gap)) + 1px);
+  }
+  .uix-scheduling-calendar__grid[data-fixed] .uix-scheduling-calendar__day { min-height:0; overflow:hidden; }
+
+  .uix-scheduling-calendar__dayhead { display:flex; align-items:center; gap:var(--uix-space-1); min-width:0; height:var(--calendar-head); flex:none; }
   .uix-scheduling-calendar__dayhead > .uix-scheduling-calendar__date { flex:1 1 auto; width:auto; }
   .uix-scheduling-calendar__badge { display:inline-flex; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; font-size:var(--uix-text-meta); }
-  .uix-scheduling-calendar__more { justify-self:start; padding:var(--uix-space-1) var(--uix-space-2); border:0; border-radius:var(--uix-radius-sm); background:transparent; color:var(--uix-link); font-size:var(--uix-text-meta); font-weight:600; text-align:left; cursor:pointer; }
-  .uix-scheduling-calendar__more:hover { background:var(--uix-bg-subtle); }
-  .uix-scheduling-calendar__date { display:block; width:100%; border:0; background:transparent; color:inherit; text-align:right; font-size:var(--uix-text-meta); }
-  .uix-scheduling-calendar__overlay { display:block; margin-block:var(--uix-space-1); padding:var(--uix-space-1) var(--uix-space-2); border-radius:var(--uix-radius-sm); background:var(--uix-info-bg); color:var(--uix-info-text); font-size:var(--uix-text-meta); }
-  .uix-scheduling-calendar__overlay[data-kind="blackout"] { background:var(--uix-danger-bg); color:var(--uix-danger-text); }
-  .uix-scheduling-calendar__entries { display:grid; gap:var(--uix-space-1); }
-  .uix-scheduling-calendar__entry { min-width:100%; padding:var(--uix-space-1) var(--uix-space-2); border:0; border-left:3px solid var(--uix-info); border-radius:var(--uix-radius-sm); background:var(--uix-info-bg); color:var(--uix-info-text); overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; font-size:var(--uix-text-meta); }
-  .uix-scheduling-calendar__entry[data-state="conflicted"],.uix-scheduling-calendar__entry[data-state="blackout-violation"] { border-color:var(--uix-danger); background:var(--uix-danger-bg); color:var(--uix-danger-text); }
-  .uix-scheduling-calendar__entry[data-state="in-progress"] { border-color:var(--uix-success); background:var(--uix-success-bg); color:var(--uix-text); }
-  .uix-scheduling-calendar__entry:not([data-range-start]) { border-top-left-radius:0; border-bottom-left-radius:0; } .uix-scheduling-calendar__entry:not([data-range-end]) { border-top-right-radius:0; border-bottom-right-radius:0; }
+  .uix-scheduling-calendar__count { flex:none; font-size:var(--uix-text-meta); font-weight:600; font-variant-numeric:tabular-nums; }
+  .uix-scheduling-calendar__date { display:block; flex:none; width:100%; height:var(--calendar-head); padding:0 var(--uix-space-1); border:0; border-radius:var(--uix-radius-xs); background:transparent; color:inherit; text-align:right; font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; outline-offset:-2px; }
+  button.uix-scheduling-calendar__date:hover { background:var(--calendar-chrome-surface-quiet); }
+
+  /* The chips start below the lanes this row keeps for spans. */
+  .uix-scheduling-calendar__entries { display:grid; gap:var(--calendar-gap); min-width:0; margin-top:calc(var(--uix-scheduling-calendar-lanes,0) * var(--calendar-lane)); }
+  .uix-scheduling-calendar__more { justify-self:start; display:inline-flex; align-items:center; height:var(--calendar-chip); padding:0 var(--uix-space-1); border:0; border-radius:var(--uix-radius-xs); background:transparent; color:var(--calendar-chrome-text); font-size:var(--uix-text-meta); font-weight:600; text-align:left; white-space:nowrap; outline-offset:-2px; }
+  button.uix-scheduling-calendar__more { cursor:pointer; } button.uix-scheduling-calendar__more:hover { background:var(--calendar-chrome-surface-quiet); }
+
+  /* An item: a chip in its day, or a span over several days. The default look is the
+     `committed` status with no band: a plain outlined chip. */
+  .uix-scheduling-calendar__entry { display:flex; align-items:center; gap:var(--calendar-gap); min-width:0; height:var(--calendar-chip); padding:0 0.125rem; border:1px solid var(--calendar-status-edge); border-radius:var(--uix-radius-xs); background:var(--calendar-status-surface); color:var(--calendar-status-text); overflow:hidden; text-align:left; white-space:nowrap; font-size:var(--uix-text-meta); cursor:pointer; outline-offset:-2px; }
+  /* A long title is cut at the chip edge with no ellipsis: in a narrow day column the "…" would
+     cost one and a half of the few title characters there is room for. */
+  .uix-scheduling-calendar__entry-text { flex:1 1 auto; min-width:0; overflow:hidden; }
+  .uix-scheduling-calendar__time { font-variant-numeric:tabular-nums; color:var(--calendar-chrome-text-quiet); }
+  .uix-scheduling-calendar__entry[data-band="high"] .uix-scheduling-calendar__time { color:inherit; }
+  .uix-scheduling-calendar__title { font-weight:500; }
+  .uix-scheduling-calendar__entry[data-status="live"] .uix-scheduling-calendar__title { font-weight:600; }
+  .uix-scheduling-calendar__markers { flex:none; display:inline-flex; align-items:center; gap:var(--calendar-gap); }
+
+  /* status: line style, weight and dimming only */
+  :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-status="tentative"] { border-style:dashed; border-color:var(--calendar-status-edge-strong); }
+  .uix-scheduling-calendar__entry[data-status="live"] { font-weight:600; border-color:var(--calendar-status-edge-strong); }
+  /* the live dot is a border, so it survives forced colours */
+  .uix-scheduling-calendar__entry[data-status="live"]::before,.uix-scheduling-calendar__swatch[data-status="live"]::before { content:""; flex:none; margin-right:var(--calendar-gap); border:0.1875rem solid currentColor; border-radius:50%; }
+  :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-status="done"] { border-style:none none solid; background:var(--calendar-status-surface-quiet); color:var(--calendar-status-text-dim); }
+  :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-status="dead"] { border-style:dotted; border-color:var(--calendar-status-edge-strong); color:var(--calendar-status-text-dim); }
+  .uix-scheduling-calendar__entry[data-status="dead"] .uix-scheduling-calendar__entry-text { text-decoration:line-through; }
+  .uix-scheduling-calendar__swatch[data-status="dead"]::after { content:""; width:100%; border-top:1px solid currentColor; }
+
+  /* band: `medium` is a heavier leading edge, `high` is the one fill */
+  :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-band="medium"] { border-left:3px solid var(--calendar-band-medium-edge); }
+  :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-band="high"] { border-color:var(--calendar-band-high-fill); background:var(--calendar-band-high-fill); color:var(--calendar-band-high-text); }
+  :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-band="high"]:is([data-status="tentative"],[data-status="dead"],[data-status="done"]) { border-color:var(--calendar-band-high-text); }
+  .uix-scheduling-calendar__entry[data-band="high"]:focus-visible { outline-color:var(--calendar-band-high-text); }
+
+  /* spans and windows: placed in the week row by the layout, one lane each */
+  .uix-scheduling-calendar__span,.uix-scheduling-calendar__window,.uix-scheduling-calendar__rowmore { grid-row:1; align-self:start; height:calc(var(--calendar-lane) - var(--calendar-gap)); margin-top:calc(var(--calendar-pad) + var(--calendar-head) + var(--uix-scheduling-calendar-lane,0) * var(--calendar-lane)); margin-inline:var(--calendar-pad-inline); }
+  :is(.uix-scheduling-calendar__span,.uix-scheduling-calendar__window)[data-continues-before] { margin-left:0; border-left-style:dashed; border-top-left-radius:0; border-bottom-left-radius:0; }
+  :is(.uix-scheduling-calendar__span,.uix-scheduling-calendar__window)[data-continues-after] { margin-right:0; border-right-style:dashed; border-top-right-radius:0; border-bottom-right-radius:0; }
+  .uix-scheduling-calendar__window { display:flex; align-items:center; min-width:0; padding:0 var(--uix-space-1); border:1px solid var(--calendar-window-edge); border-radius:var(--uix-radius-xs); background-color:var(--calendar-window-surface); color:var(--calendar-window-text); overflow:hidden; text-align:left; white-space:nowrap; font-size:var(--uix-text-meta); cursor:pointer; outline-offset:-2px; }
+  /* the label sits on its own patch of the window colour, so the hatch never runs under the words */
+  .uix-scheduling-calendar__window-text { display:inline-flex; gap:var(--uix-space-1); min-width:0; max-width:100%; padding:0 var(--uix-space-1); border-radius:var(--uix-radius-xs); background:var(--calendar-window-surface); overflow:hidden; }
+  .uix-scheduling-calendar__window-kind { flex:none; font-weight:600; }
+  .uix-scheduling-calendar__window-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
+  .uix-scheduling-calendar__window-scope { flex:0 2 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-style:italic; }
+  .uix-scheduling-calendar__window[data-global] { border-color:var(--calendar-window-ink); border-width:2px; }
+  :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="diagonal"] { background-image:repeating-linear-gradient(45deg,var(--calendar-window-ink) 0 1px,transparent 1px 6px); }
+  :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="cross"] { background-image:repeating-linear-gradient(45deg,var(--calendar-window-ink) 0 1px,transparent 1px 6px),repeating-linear-gradient(-45deg,var(--calendar-window-ink) 0 1px,transparent 1px 6px); }
+  :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="dotted"] { background-image:radial-gradient(circle,var(--calendar-window-ink) 1px,transparent 1.5px); background-size:5px 5px; }
+  .uix-scheduling-calendar__swatch[data-pattern] { border-color:var(--calendar-window-edge); background-color:var(--calendar-window-surface); }
+  /* "+N" for the spans of this row that got no lane: on the last kept lane, at the row end */
+  .uix-scheduling-calendar__rowmore { grid-column:7; justify-self:end; display:inline-flex; align-items:center; margin-top:calc(var(--calendar-pad) + var(--calendar-head) + (var(--uix-scheduling-calendar-lanes,1) - 1) * var(--calendar-lane)); padding:0 var(--uix-space-1); border:1px solid var(--calendar-chrome-line-strong); border-radius:var(--uix-radius-xs); background:var(--calendar-chrome-surface); color:var(--calendar-chrome-text); font-size:var(--uix-text-meta); font-weight:600; font-variant-numeric:tabular-nums; outline-offset:-2px; }
+  button.uix-scheduling-calendar__rowmore { cursor:pointer; } button.uix-scheduling-calendar__rowmore:hover { background:var(--calendar-chrome-surface-quiet); }
+
+  /* markers: a shape (or the consumer's icon) with text; the text is in the accessible name */
+  .uix-scheduling-calendar__marker { flex:none; display:inline-flex; align-items:center; color:var(--calendar-marker-ink); }
+  .uix-scheduling-calendar__entry .uix-scheduling-calendar__marker { color:inherit; }
+  .uix-scheduling-calendar__marker-icon { display:inline-flex; width:0.6875rem; height:0.6875rem; }
+  .uix-scheduling-calendar__marker-icon > svg { width:100%; height:100%; }
+  .uix-scheduling-calendar__marker[data-glyph]::before { content:""; width:0.625rem; height:0.625rem; background:currentColor; }
+  .uix-scheduling-calendar__marker[data-glyph="neutral"]::before { border-radius:50%; }
+  .uix-scheduling-calendar__marker[data-glyph="warning"]::before { clip-path:polygon(50% 0,100% 100%,0 100%); }
+  .uix-scheduling-calendar__marker[data-glyph="refused"]::before { clip-path:polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%); }
+
+  .uix-scheduling-calendar__empty { grid-column:1 / -1; position:sticky; left:0; padding:var(--uix-space-3); border-right:1px solid var(--calendar-chrome-line); border-bottom:1px solid var(--calendar-chrome-line); background:var(--calendar-chrome-surface); color:var(--calendar-chrome-text-quiet); }
+
   .uix-scheduling-calendar__agenda ol { display:grid; gap:var(--uix-space-2); margin:0; padding:0; list-style:none; }
-  .uix-scheduling-calendar__agenda li>button { width:100%; display:flex; justify-content:space-between; gap:var(--uix-space-3); padding:var(--uix-space-3); border:1px solid var(--uix-border); border-radius:var(--uix-radius-md); background:var(--uix-surface); color:var(--uix-text); text-align:left; }
-  .uix-scheduling-calendar__agenda li>button>span:first-child { display:grid; gap:var(--uix-space-1); } .uix-scheduling-calendar__agenda li>button span span { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
-  .uix-scheduling-calendar__legend { display:flex; flex-wrap:wrap; gap:var(--uix-space-3); font-size:var(--uix-text-meta); color:var(--uix-text-muted); }
-  .uix-scheduling-calendar__legend span::before { content:""; display:inline-block; width:.75rem; height:.75rem; margin-right:var(--uix-space-1); border:2px solid var(--uix-info); border-radius:var(--uix-radius-xs); background:var(--uix-info-bg); vertical-align:middle; }
-  .uix-scheduling-calendar__legend span[data-state="conflicted"]::before,.uix-scheduling-calendar__legend span[data-state="blackout-violation"]::before { border-color:var(--uix-danger); background:var(--uix-danger-bg); } .uix-scheduling-calendar__legend span[data-state="in-progress"]::before { border-color:var(--uix-success); background:var(--uix-success-bg); }
-  .uix-scheduling-calendar__state { padding:var(--uix-space-8); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); text-align:center; }
+  .uix-scheduling-calendar__agenda li>button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--uix-space-3); padding:var(--uix-space-3); border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-md); background:var(--calendar-chrome-surface); color:var(--calendar-chrome-text); text-align:left; }
+  .uix-scheduling-calendar__agenda li>button>span:first-child { flex:1 1 auto; display:grid; gap:var(--uix-space-1); min-width:0; } .uix-scheduling-calendar__agenda li>button>span:first-child>span { color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__status { flex:none; color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
+
+  .uix-scheduling-calendar__legend { display:flex; flex-wrap:wrap; align-items:center; gap:var(--uix-space-2) var(--uix-space-3); font-size:var(--uix-text-meta); color:var(--calendar-chrome-text-quiet); }
+  .uix-scheduling-calendar__legend-list { display:flex; flex-wrap:wrap; gap:var(--uix-space-2) var(--uix-space-3); margin:0; padding:0; list-style:none; }
+  .uix-scheduling-calendar__legend-list > li { display:inline-flex; align-items:center; gap:var(--uix-space-1); margin:0; }
+  .uix-scheduling-calendar__legend-caption { flex:1 1 100%; margin:0; }
+  .uix-scheduling-calendar__swatch { flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:0.875rem; border:1px solid var(--calendar-status-edge); border-radius:var(--uix-radius-xs); background:var(--calendar-status-surface); color:var(--calendar-status-text); }
+  .uix-scheduling-calendar__swatch > svg { width:0.75rem; height:0.75rem; }
+  /* the built-in legend of the deprecated `state` values: the same shapes, no hue */
+  .uix-scheduling-calendar__legend > span[data-state]::before { content:""; display:inline-block; width:0.625rem; height:0.625rem; margin-right:var(--uix-space-1); border:1px solid var(--calendar-status-edge-strong); border-radius:var(--uix-radius-xs); vertical-align:middle; }
+  .uix-scheduling-calendar__legend > span[data-state="in-progress"]::before { border:0.1875rem solid var(--calendar-status-text); border-radius:50%; width:0; height:0; }
+  .uix-scheduling-calendar__legend > span:is([data-state="conflicted"],[data-state="blackout-violation"])::before { border:0; border-radius:0; background:var(--calendar-marker-ink); clip-path:polygon(50% 0,100% 100%,0 100%); }
+
+  /* ── Week / Day time grid (HAR-1509) ─────────────────────────────────────────────────────────
+     Four stacked rows share one column template: the day heads, the window strip, the top lane
+     and the hours. A day column is as tall as its day: --uix-scheduling-calendar-hours is the
+     real length of that day, so a clock-change day is shorter or longer than its neighbours.
+     Items are placed from --uix-scheduling-calendar-offset / -length (real hours) alone. */
+  .uix-scheduling-calendar__timegrid { position:relative; display:grid; min-width:0; overflow-x:auto; border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-sm); background:var(--calendar-chrome-surface); }
+  .uix-scheduling-calendar__tg-head,.uix-scheduling-calendar__tg-strip,.uix-scheduling-calendar__tg-body { display:grid; grid-template-columns:var(--calendar-gutter) repeat(var(--uix-scheduling-calendar-days,7),minmax(6.5rem,1fr)); min-width:calc(var(--calendar-gutter) + var(--uix-scheduling-calendar-days,7) * 6.5rem); }
+  .uix-scheduling-calendar__timegrid[data-view="day"] > :is(.uix-scheduling-calendar__tg-head,.uix-scheduling-calendar__tg-strip,.uix-scheduling-calendar__tg-body) { grid-template-columns:var(--calendar-gutter) minmax(0,1fr); min-width:0; }
+  .uix-scheduling-calendar__tg-head { background:var(--calendar-chrome-surface-quiet); }
+  .uix-scheduling-calendar__tg-zone { align-self:center; padding:var(--uix-space-1); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); line-height:1.2; text-align:right; overflow-wrap:anywhere; }
+  .uix-scheduling-calendar__tg-dayhead { display:flex; flex-wrap:wrap; align-items:center; align-content:center; gap:0 var(--uix-space-1); min-width:0; padding:var(--uix-space-1); border-left:1px solid var(--calendar-chrome-line); font-size:var(--uix-text-meta); overflow:hidden; }
+  .uix-scheduling-calendar__tg-dayhead > .uix-scheduling-calendar__date { flex:none; width:auto; height:var(--calendar-head); font-weight:600; text-align:left; white-space:nowrap; }
+  .uix-scheduling-calendar__tg-dayhead > .uix-scheduling-calendar__markers { flex:0 1 auto; min-width:0; max-width:100%; overflow:hidden; }
+  .uix-scheduling-calendar__tg-dayhead > .uix-scheduling-calendar__more { flex:none; margin-left:auto; }
+  .uix-scheduling-calendar__marker-label { margin-left:var(--calendar-gap); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+
+  /* the window strip and the top lane: one grid row per lane, a bounded height */
+  .uix-scheduling-calendar__tg-strip { grid-auto-rows:var(--calendar-lane); align-items:center; padding:var(--calendar-gap) 0; border-top:1px solid var(--calendar-chrome-line); }
+  .uix-scheduling-calendar__tg-strip > :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__tg-span,.uix-scheduling-calendar__tg-ghost,.uix-scheduling-calendar__rowmore) { grid-row:calc(var(--uix-scheduling-calendar-lane,0) + 1); align-self:center; height:calc(var(--calendar-lane) - var(--calendar-gap)); margin:0 var(--calendar-pad-inline); }
+  .uix-scheduling-calendar__tg-strip > .uix-scheduling-calendar__rowmore { grid-column:-2 / -1; grid-row:var(--uix-scheduling-calendar-lanes,1); justify-self:end; }
+  .uix-scheduling-calendar__tg-top { min-height:calc(var(--calendar-lane) + 2 * var(--calendar-gap)); }
+  :is(.uix-scheduling-calendar__tg-span,.uix-scheduling-calendar__window)[data-continues-before] { border-left-style:dashed; border-top-left-radius:0; border-bottom-left-radius:0; }
+  :is(.uix-scheduling-calendar__tg-span,.uix-scheduling-calendar__window)[data-continues-after] { border-right-style:dashed; border-top-right-radius:0; border-bottom-right-radius:0; }
+
+  /* the hours */
+  .uix-scheduling-calendar__tg-body { position:relative; grid-template-rows:calc(var(--uix-scheduling-calendar-hours,1) * var(--calendar-hour)); border-top:1px solid var(--calendar-chrome-line); }
+  .uix-scheduling-calendar__tg-gutter { grid-column:1; grid-row:1; position:relative; }
+  .uix-scheduling-calendar__tg-hour { position:absolute; top:calc(var(--uix-scheduling-calendar-offset,0) * var(--calendar-hour)); right:var(--uix-space-1); padding-top:var(--calendar-gap); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; line-height:1; text-align:right; pointer-events:none; }
+  .uix-scheduling-calendar__tg-hour--inline { right:auto; left:var(--calendar-gap); }
+  .uix-scheduling-calendar__tg-offset { display:block; }
+  /* one painted background draws every hour line of a column: no element per hour */
+  .uix-scheduling-calendar__tg-column { grid-row:1; align-self:start; position:relative; min-width:0; height:calc(var(--uix-scheduling-calendar-hours,1) * var(--calendar-hour)); border-left:1px solid var(--calendar-chrome-line); background-image:repeating-linear-gradient(to bottom,var(--calendar-chrome-line) 0 1px,transparent 1px var(--calendar-hour)); }
+  .uix-scheduling-calendar__tg-item { position:absolute; top:calc(var(--uix-scheduling-calendar-offset,0) * var(--calendar-hour)); left:calc(var(--uix-scheduling-calendar-lane,0) / var(--uix-scheduling-calendar-lanes,1) * 100%); width:calc(100% / var(--uix-scheduling-calendar-lanes,1) - 2px); height:max(calc(var(--uix-scheduling-calendar-length,1) * var(--calendar-hour) - 1px),0.875rem); align-items:flex-start; padding:0 0.125rem; line-height:1rem; }
+  .uix-scheduling-calendar__tg-item > .uix-scheduling-calendar__entry-text { white-space:normal; overflow-wrap:anywhere; max-height:100%; }
+  .uix-scheduling-calendar__tg-item[data-lines="1"] > .uix-scheduling-calendar__entry-text { white-space:nowrap; overflow-wrap:normal; }
+  .uix-scheduling-calendar__tg-item > .uix-scheduling-calendar__markers { height:1rem; }
+  .uix-scheduling-calendar__tg-from { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; font-style:italic; }
+  /* an item that crosses midnight: two parts with the shared edge left open */
+  .uix-scheduling-calendar__tg-item[data-part="start"] { border-bottom-style:dashed; border-bottom-left-radius:0; border-bottom-right-radius:0; }
+  .uix-scheduling-calendar__tg-item[data-part="continuation"] { border-top-style:dashed; border-top-left-radius:0; border-top-right-radius:0; }
+  :is(.uix-scheduling-calendar__tg-item,.uix-scheduling-calendar__tg-span)[data-movable] { cursor:grab; }
+  /* a pending move: an outline where the item would go; the item itself stays put */
+  .uix-scheduling-calendar__tg-ghost { border:2px dashed var(--calendar-chrome-ghost); border-radius:var(--uix-radius-xs); background:var(--calendar-chrome-ghost-surface); opacity:0.7; pointer-events:none; }
+  .uix-scheduling-calendar__tg-ghost[data-sent] { border-style:dotted; }
+  .uix-scheduling-calendar__tg-column > .uix-scheduling-calendar__tg-ghost { position:absolute; left:0; right:0; top:calc(var(--uix-scheduling-calendar-offset,0) * var(--calendar-hour)); height:max(calc(var(--uix-scheduling-calendar-length,1) * var(--calendar-hour)),0.875rem); }
+  .uix-scheduling-calendar__tg-now { position:absolute; left:0; right:0; top:calc(var(--uix-scheduling-calendar-offset,0) * var(--calendar-hour)); border-top:2px solid var(--calendar-chrome-now); pointer-events:none; }
+  .uix-scheduling-calendar__tg-now::before { content:""; position:absolute; left:0; top:-0.3125rem; border:0.25rem solid var(--calendar-chrome-now); border-radius:50%; }
+  /* a window that applies to everything also tints its hours, behind the items: a flat, quiet
+     tint (the hatch stays on its bar in the strip) */
+  .uix-scheduling-calendar__tg-shade[data-pattern] { grid-row:1; background-color:var(--calendar-window-surface); opacity:0.45; pointer-events:none; }
+  /* the narrowest lane worth drawing: an item that shows a time and six title characters */
+  .uix-scheduling-calendar__tg-probe { position:absolute; left:0; top:0; height:0; padding:0 0.125rem; border:0 solid transparent; border-width:0 1px; visibility:hidden; overflow:hidden; white-space:nowrap; font-size:var(--uix-text-meta); pointer-events:none; }
+
+  .uix-scheduling-calendar__state { padding:var(--uix-space-8); border:1px dashed var(--calendar-chrome-line-strong); border-radius:var(--uix-radius-lg); text-align:center; }
 }

package/styles/components/segmented.css

@@ -11,6 +11,7 @@
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-segmented__option:hover { color: var(--uix-text); }
-  .uix-segmented__option[aria-pressed="true"] { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
+  /* aria-checked: a `selection="radio"` group (HAR-1604) */
+  .uix-segmented__option:is([aria-pressed="true"], [aria-checked="true"]) { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
   .uix-segmented__option:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
 }