/* The kit's base layer: everything below inherits the Foundation's font.
   Without this the bundle shipped no font-family at all, so a project that
   installed the design system got its browser default and every consumer —
   including this repo's own Design cards — had to restate the stack. */
:root { font-family: var(--ui-font-family); }

/* border-box, for the same reason as the font above: the kit assumed the
   consumer shipped the reset. Every environment that works today has its own
   — catalog.css, each generated card, both templates — while styles.css, the
   file a consuming project actually loads, has none. So a component's width
   depended on the host: .ui-sidebar__more-menu declares width:292px and
   measures 326 in a host without the reset, which is 17px of menu hanging
   outside the rail. Twenty-three rules below already set box-sizing element by
   element, which is this same bug being paid for one component at a time. */
[class^="ui-"], [class*=" ui-"] { box-sizing: border-box; }

.ui-button,
.ui-chip,
.ui-checkbox,
.ui-checkbox-group,
.ui-radio,
.ui-selection,
.ui-date-picker__trigger,
.ui-date-picker__day,
.ui-tooltip-wrap,
.ui-modal__close,
.ui-switch,
.ui-select__trigger,
.ui-select__option,
.ui-search__clear {
  font: inherit;
}

.ui-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-md);
  padding: 0 var(--ui-space-4);
  color: var(--ui-color-card);
  background: var(--ui-color-text);
  font-size: var(--ui-font-size-14);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-20);
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.ui-button--32 { min-height: 32px; padding-inline: var(--ui-space-3); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-button--40 { min-height: 40px; padding-inline: var(--ui-space-4); }
.ui-button--48 { min-height: 48px; padding-inline: var(--ui-space-6); font-size: var(--ui-font-size-16); line-height: var(--ui-line-height-24); }
/* The icon side is tightened by one step of the scale, not to a flat 8px: the
   icon carries its own visual margin, so the text-side padding would read as
   off-centre — but a single value made a 48 button look pinched next to its own
   24px text padding. One step per size: 8 at 32, 12 at 40, 16 at 48. */
.ui-button--32.has-leading-icon:not(.is-icon-only) { padding-left: var(--ui-space-2); }
.ui-button--40.has-leading-icon:not(.is-icon-only) { padding-left: var(--ui-space-3); }
.ui-button--48.has-leading-icon:not(.is-icon-only) { padding-left: var(--ui-space-4); }
.ui-button--32.has-trailing-icon:not(.is-icon-only) { padding-right: var(--ui-space-2); }
.ui-button--40.has-trailing-icon:not(.is-icon-only) { padding-right: var(--ui-space-3); }
.ui-button--48.has-trailing-icon:not(.is-icon-only) { padding-right: var(--ui-space-4); }
.ui-button--pill { border-radius: var(--ui-radius-full); }
.ui-button--rounded { border-radius: var(--ui-radius-md); }
.ui-button--emphasis,
.ui-button--red,
.ui-button--plus { color: var(--ui-color-card); }
.ui-button--red { background: var(--ui-color-primary); }
.ui-button--secondary { color: var(--ui-color-title); background: var(--ui-color-divider); }
.ui-button--white { color: var(--ui-color-title); background: var(--ui-color-card); box-shadow: var(--ui-shadow-md); }
.ui-button--ghost { border: 1px solid var(--ui-color-border); color: var(--ui-color-title); background: var(--ui-color-card); }
.ui-button--text { padding-inline: 0; color: var(--ui-color-title); background: transparent; }
.ui-button--link { padding-inline: 0; color: var(--ui-color-link); background: transparent; }
.ui-button--danger { color: var(--ui-color-primary-hover); background: var(--ui-color-card); }
.ui-button--plus { background: var(--ui-gradient-pro-motion); background-position: right center; background-size: 200% 100%; transition: background-position .55s ease; }
.ui-button--emphasis:not(:disabled):hover,
.ui-button--emphasis.is-hover,
.ui-button--emphasis.is-pressed,
.ui-button--emphasis:focus-visible,
.ui-button--emphasis.is-focus { background: var(--ui-color-title); }
.ui-button--red:not(:disabled):hover,
.ui-button--red.is-hover,
.ui-button--red.is-pressed,
.ui-button--red:focus-visible,
.ui-button--red.is-focus { background: var(--ui-color-primary-hover); }
.ui-button--secondary:not(:disabled):hover,
.ui-button--secondary.is-hover,
.ui-button--secondary:focus-visible,
.ui-button--secondary.is-focus { background: var(--ui-color-hover); }
.ui-button--white:not(:disabled):hover,
.ui-button--white.is-hover,
.ui-button--white:focus-visible,
.ui-button--white.is-focus { background: color-mix(in srgb, var(--ui-color-card) 50%, var(--ui-color-divider)); box-shadow: var(--ui-shadow-md); }
.ui-button--ghost:not(:disabled):hover,
.ui-button--ghost.is-hover,
.ui-button--ghost:focus-visible,
.ui-button--ghost.is-focus { background: var(--ui-color-divider); }
.ui-button--text:not(:disabled):hover,
.ui-button--text.is-hover,
.ui-button--text:focus-visible,
.ui-button--text.is-focus { color: var(--ui-color-text); }
.ui-button--link:not(:disabled):hover,
.ui-button--link.is-hover,
.ui-button--link:focus-visible,
.ui-button--link.is-focus { color: var(--ui-color-link-hover); text-decoration: underline; }
.ui-button--danger:not(:disabled):hover,
.ui-button--danger.is-hover,
.ui-button--danger:focus-visible,
.ui-button--danger.is-focus { background: var(--ui-color-error-surface); }
.ui-button--plus:not(:disabled):hover,
.ui-button--plus.is-hover,
.ui-button--plus:focus-visible,
.ui-button--plus.is-focus { background-position: left center; }
.ui-button:focus-visible,
.ui-button.is-focus { outline: 0; outline-offset: 0; }
.ui-button:disabled,
.ui-button.is-disabled { color: var(--ui-color-disabled); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-button--ghost:disabled,
.ui-button--ghost.is-disabled { border-color: transparent; color: var(--ui-color-disabled); background: var(--ui-color-divider); }
.ui-button--text:disabled,
.ui-button--text.is-disabled,
.ui-button--link:disabled,
.ui-button--link.is-disabled { color: var(--ui-color-disabled); background: transparent; }
.ui-button--white:disabled,
.ui-button--white.is-disabled { color: var(--ui-color-disabled); background: var(--ui-color-divider); box-shadow: none; }
.ui-button:disabled .ui-button__icon,
.ui-button.is-disabled .ui-button__icon { filter: none; opacity: .45; }
.ui-button.is-icon-only { width: 40px; min-width: 40px; padding: 0; }
.ui-button--32.is-icon-only { width: 32px; min-width: 32px; }
.ui-button--48.is-icon-only { width: 48px; min-width: 48px; }
.ui-button__icon { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.ui-button--emphasis .ui-button__icon,
.ui-button--red .ui-button__icon,
.ui-button--plus .ui-button__icon { filter: brightness(0) invert(1); }
.ui-button__spinner { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--ui-color-on-emphasis-muted); border-top-color: var(--ui-color-card); border-radius: var(--ui-radius-full); animation: ui-spin .8s linear infinite; }
.ui-button--secondary .ui-button__spinner { border-color: var(--ui-color-emphasis-weak); border-top-color: var(--ui-color-title); }
.ui-button.is-loading { pointer-events: none; }
.ui-button.is-loading:disabled { color: var(--ui-color-disabled); }
.ui-button.is-loading:disabled .ui-button__spinner { border-color: var(--ui-color-disabled-weak); border-top-color: var(--ui-color-disabled); }

.ui-chip { min-width: 88px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--ui-radius-full); padding: 0 var(--ui-space-4); color: var(--ui-color-text); background: var(--ui-color-divider); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.ui-chip--24 { min-width: 52px; min-height: 24px; padding-inline: var(--ui-space-2); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-16); }
.ui-chip--32 { min-width: 64px; min-height: 32px; padding-inline: var(--ui-space-3); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-chip--white { background: var(--ui-color-card); }
.ui-chip--transparent { background: transparent; }
.ui-chip:not(:disabled):not(.is-selected):hover, .ui-chip.is-hover { background: var(--ui-color-border); }
.ui-chip.is-selected { border-color: var(--ui-color-text); color: var(--ui-color-text); background: var(--ui-color-divider); }
.ui-chip.is-selected:not(:disabled):hover { background: var(--ui-color-border); }
.ui-chip:disabled, .ui-chip.is-disabled { color: var(--ui-color-card); background: var(--ui-color-border); cursor: not-allowed; }
.ui-chip:focus-visible { outline: none; border-color: var(--ui-color-title); box-shadow: none; }

/* Video. The component is the cover and the way in — it never plays anything
   itself, so it stays a pure string builder like every other renderer and the
   page decides what the play button does. 16:9 because that is what the
   teacher-detail spec's introduction media is shot at. */
.ui-video { width: min(100%, 560px); aspect-ratio: 16 / 9; position: relative; display: block; overflow: hidden; border-radius: var(--ui-radius-md); background: var(--ui-color-title); }
.ui-video__poster { width: 100%; height: 100%; display: block; object-fit: cover; }
/* A scrim from the foot of the frame: it keeps the disc and the metadata
   legible over a bright cover without dimming the whole image. */
/* The whole cover is the target, but the disc is not centred on it. A teacher
   intro is a face filling the middle of the frame, and a centred disc lands
   on it — the one part of the cover a learner is there to look at. The
   affordance sits lower-left instead, on the scrim that is already there and
   opposite the duration badge. */
.ui-video__play { position: absolute; inset: 0; display: grid; place-items: end start; border: 0; padding: var(--ui-space-4); background: linear-gradient(transparent 45%, var(--ui-color-modal-mask)); cursor: pointer; transition: background 160ms ease; }
/* Brand disc with the triangle cut into it, rather than an icon inside a white
   ring — classroom-play.svg is itself a filled circle, so the old treatment
   was a circle inside a circle. */
/* The disc is ink, not brand: a brand-red disc vanishes on a brand-red cover,
   which is exactly what the italki cover does. Ink reads on any cover the
   palette can produce, and the triangle stays white. */
.ui-video__play-disc { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--ui-radius-full); background: var(--ui-color-title); box-shadow: var(--ui-shadow-lg); transition: transform 160ms ease, background 160ms ease; }
.ui-video__play-disc::before { width: 0; height: 0; margin-left: var(--ui-space-1); border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid var(--ui-color-on-primary); content: ""; }
.ui-video:hover .ui-video__play-disc, .ui-video.is-hover .ui-video__play-disc { background: var(--ui-color-primary); transform: scale(1.06); }
.ui-video__play:focus-visible { outline: 2px solid var(--ui-color-on-primary); outline-offset: -4px; }
.ui-video__duration { position: absolute; right: var(--ui-space-2); bottom: var(--ui-space-2); border-radius: var(--ui-radius-xs); padding: 0 var(--ui-space-1); color: var(--ui-color-on-primary); background: var(--ui-color-upload-overlay); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
/* A title sits on the cover, so it needs its own scrim to stay legible. */
/* The title shares the bottom band with the disc, so it starts clear of it
   and centres on it: the two read as one row, play then name. */
.ui-video__title { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: var(--ui-space-6) var(--ui-space-3) var(--ui-space-4) calc(var(--ui-space-4) + 48px + var(--ui-space-3)); color: var(--ui-color-on-primary); background: linear-gradient(transparent, var(--ui-color-upload-overlay)); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-20); }
.ui-video.is-disabled::after { position: absolute; z-index: 1; inset: 0; background: var(--ui-color-modal-mask); content: ""; opacity: .22; pointer-events: none; }
.ui-video.is-disabled .ui-video__poster { filter: saturate(.72); opacity: .72; }
.ui-video.is-disabled .ui-video__play { z-index: 2; }
.ui-video.is-disabled .ui-video__play-disc { background: var(--ui-color-divider); box-shadow: none; }
.ui-video.is-disabled .ui-video__play-disc::before { border-left-color: var(--ui-color-secondary); }
.ui-video.is-disabled .ui-video__play { cursor: not-allowed; }

/* Link. Typography follows the Link/16 and Link/14 tiers in COMPONENTS.md.
   The underline is a hover affordance, not a resting decoration: a page of
   underlined links reads as noise, and the link colour already carries the
   signal at rest. */
.ui-link { display: inline-flex; align-items: center; gap: var(--ui-space-1); color: var(--ui-color-link); font-weight: var(--ui-font-weight-medium); text-decoration: none; transition: color 120ms ease; }
.ui-link--16 { font-size: var(--ui-font-size-16); line-height: var(--ui-line-height-24); }
.ui-link--14 { font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-22); }
.ui-link:hover, .ui-link.is-hover { color: var(--ui-color-link-hover); text-decoration: underline; }
.ui-link:focus-visible { outline: 2px solid var(--ui-color-link); outline-offset: 2px; border-radius: var(--ui-radius-xs); }
/* Subtle reads as body text until touched — for links that sit inside a
   sentence or a dense row, where link colour would fragment the line. */
.ui-link--subtle { color: var(--ui-color-secondary); }
.ui-link--subtle:hover, .ui-link--subtle.is-hover { color: var(--ui-color-text); }
/* Inverse sits on a dark surface, where the link blue fails contrast. */
.ui-link--inverse { color: var(--ui-color-on-primary); }
.ui-link--inverse:hover, .ui-link--inverse.is-hover { color: var(--ui-color-on-primary); }
.ui-link--inverse:focus-visible { outline-color: var(--ui-color-on-primary); }
/* A disabled link renders as a span, so it has no hover or focus to suppress. */
.ui-link.is-disabled { color: var(--ui-color-disabled); cursor: not-allowed; text-decoration: none; }
.ui-link__icon { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
.ui-tag { min-height: 24px; display: inline-flex; align-items: center; gap: var(--ui-space-1); border-radius: var(--ui-radius-full); padding: 0 var(--ui-space-2); color: var(--ui-color-text); background: var(--ui-color-divider); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-tag--32 { min-height: 32px; padding-inline: var(--ui-space-3); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-tag--40 { min-height: 40px; padding-inline: var(--ui-space-4); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-tag--info { color: var(--ui-color-info); background: var(--ui-color-info-surface); }
.ui-tag--success { color: var(--ui-color-success); background: var(--ui-color-success-surface); }
.ui-tag--warning { color: var(--ui-color-warning); background: var(--ui-color-warning-surface); }
.ui-tag--error { color: var(--ui-color-primary-hover); background: var(--ui-color-error-surface); }
.ui-tag__icon { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.ui-tag--status { color: var(--ui-color-text); background: var(--ui-color-divider); font-weight: var(--ui-font-weight-bold); }
.ui-tag--status.ui-tag--info { background: var(--ui-color-info-surface); }
.ui-tag--status.ui-tag--success { background: var(--ui-color-success-surface); }
.ui-tag--status.ui-tag--warning { background: var(--ui-color-warning-surface); }
.ui-tag--status.ui-tag--error { background: var(--ui-color-error-surface); }
.ui-tag--promo { position: relative; isolation: isolate; overflow: hidden; color: var(--ui-color-text); background: var(--ui-color-card); font-weight: var(--ui-font-weight-bold); }
.ui-tag--promo::before { position: absolute; z-index: -1; inset: 0; background: var(--ui-gradient-pro); content: ""; opacity: .05; }
.ui-tag--promo .ui-tag__label { color: transparent; background: var(--ui-gradient-pro); background-clip: text; -webkit-background-clip: text; }
.ui-tag--status.ui-tag--32, .ui-tag--promo.ui-tag--32 { gap: var(--ui-space-1); padding-right: var(--ui-space-4); padding-left: var(--ui-space-3); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-tag__remove { width: 16px; height: 16px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-full); padding: 0; background: transparent; cursor: pointer; }
.ui-tag--32 .ui-tag__remove { width: 20px; height: 20px; }
.ui-tag--40 .ui-tag__remove { width: 24px; height: 24px; }
.ui-tag__remove:hover { background: var(--ui-color-hover); }
.ui-tag__remove-icon { width: 16px; height: 16px; opacity: .75; transition: opacity 120ms ease; }
.ui-tag__remove:hover .ui-tag__remove-icon, .ui-tag__remove:focus-visible .ui-tag__remove-icon { opacity: 1; }

.ui-checkbox { width: max-content; min-height: 20px; display: inline-flex; align-items: center; gap: var(--ui-space-2); border: 0; margin: 0; padding: 0; color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; }
.ui-checkbox__box { width: 18px; height: 18px; box-sizing: border-box; position: relative; display: grid; flex: 0 0 18px; place-items: center; overflow: hidden; border: 1px solid var(--ui-color-disabled); border-radius: var(--ui-radius-xs); background: transparent; }
.ui-checkbox__check, .ui-checkbox__mixed { display: none; grid-area: 1 / 1; }
.ui-checkbox__check { width: 14px; height: 14px; position: absolute; inset: 0; margin: auto; object-fit: contain; filter: brightness(0) invert(1); }
.ui-checkbox__mixed { width: 8px; height: 8px; background: var(--ui-color-text); }
.ui-checkbox.value-off:not(.is-disabled):hover .ui-checkbox__box, .ui-checkbox.value-off.is-hover .ui-checkbox__box { background: var(--ui-color-border); }
.ui-checkbox.value-on .ui-checkbox__box { border-color: var(--ui-color-text); background: var(--ui-color-text); }
.ui-checkbox.value-on .ui-checkbox__check { display: block; }
.ui-checkbox.value-mixed .ui-checkbox__box { border-color: var(--ui-color-border); background: var(--ui-color-card); }
.ui-checkbox.value-mixed .ui-checkbox__mixed { display: block; }
.ui-checkbox.value-mixed:not(.is-disabled):hover .ui-checkbox__box, .ui-checkbox.value-mixed.is-hover .ui-checkbox__box { border-color: var(--ui-color-text); }
.ui-checkbox.is-disabled, .ui-checkbox:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-checkbox.is-disabled .ui-checkbox__box, .ui-checkbox:disabled .ui-checkbox__box { border-color: var(--ui-color-border); background: var(--ui-color-divider); }
.ui-checkbox:focus-visible .ui-checkbox__box { border-color: var(--ui-color-title); box-shadow: none; }

/* Fields and their containers take the width of what holds them rather than
   stopping at a control width of their own: a form column decides how wide its
   fields are, and a field that caps itself at 440px leaves a gap nobody asked
   for. The control-width tokens are still there for a caller that wants
   to constrain a column. */
.ui-checkbox-group { width: 100%; display: grid; gap: var(--ui-space-3); margin: 0; padding: 0; border: 0; }
.ui-checkbox-group legend { margin-bottom: var(--ui-space-3); padding: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); }
.ui-checkbox-group__description, .ui-checkbox-group__feedback { margin: 0; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-checkbox-group__options { display: grid; justify-items: start; gap: var(--ui-space-3); }
.ui-checkbox-group--inline .ui-checkbox-group__options { display: flex; flex-wrap: wrap; column-gap: var(--ui-space-6); row-gap: var(--ui-space-3); }
.ui-checkbox-group__select-all { width: 100%; display: grid; gap: var(--ui-space-3); border-bottom: 1px solid var(--ui-color-divider); padding-bottom: var(--ui-space-3); }
.ui-checkbox-group__feedback.is-error { color: var(--ui-color-primary-hover); }

.ui-radio { min-height: 20px; display: inline-flex; align-items: flex-start; gap: var(--ui-space-2); border: 0; margin: 0; padding: 0; color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; }
.ui-radio__indicator { width: 18px; height: 18px; box-sizing: border-box; margin-top: 1px; display: grid; flex: 0 0 18px; place-items: center; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-full); background: var(--ui-color-card); transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.ui-radio__indicator::after { width: 8px; height: 8px; border-radius: var(--ui-radius-full); background: transparent; content: ""; }
.ui-radio:not(.is-disabled):hover .ui-radio__indicator, .ui-radio.is-hover .ui-radio__indicator { border-color: var(--ui-color-text); }
.ui-radio.is-checked .ui-radio__indicator { border-color: var(--ui-color-text); background: var(--ui-color-text); }
.ui-radio.is-checked .ui-radio__indicator::after { background: var(--ui-color-card); }
.ui-radio.is-disabled, .ui-radio:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-radio.is-disabled .ui-radio__indicator, .ui-radio:disabled .ui-radio__indicator { border-color: var(--ui-color-border); background: var(--ui-color-divider); }
.ui-radio.is-disabled.is-checked .ui-radio__indicator, .ui-radio:disabled.is-checked .ui-radio__indicator { background: var(--ui-color-border); }
.ui-radio:focus-visible { outline: 0; }
.ui-radio:focus-visible .ui-radio__indicator { border-color: var(--ui-color-title); box-shadow: none; }
.ui-radio__copy { min-width: 0; display: grid; gap: var(--ui-space-1); }
.ui-radio__copy > span:first-child { color: inherit; }
.ui-radio__copy small { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-radio.is-disabled .ui-radio__copy small { color: var(--ui-color-disabled); }
.ui-radio-group { display: flex; flex-wrap: wrap; gap: var(--ui-space-4); margin: 0; padding: 0; }
.ui-radio-group--vertical { display: grid; justify-items: start; gap: var(--ui-space-4); }
.ui-radio-group--block { width: 100%; display: grid; gap: var(--ui-space-3); }
.ui-radio-group--block .ui-radio { width: 100%; min-height: 56px; align-items: center; border: 1px solid var(--ui-color-divider); border-radius: var(--ui-radius-lg); padding: var(--ui-space-3) var(--ui-space-4); }
.ui-radio-group--block .ui-radio:not(.is-disabled):hover { border-color: var(--ui-color-border); background: var(--ui-color-divider); }
.ui-radio-group--block .ui-radio.is-checked { border-color: var(--ui-color-text); background: var(--ui-color-card); }

/* Selections take the width of what holds them: a booking column, a drawer, a
   grid cell. Capping at 560px left a gap in every wider container, and the grid
   variants had to undo the cap on every one of their own rules. */
.ui-selection-group { width: 100%; display: grid; gap: var(--ui-space-3); }
.ui-selection-group--grid { width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--ui-space-4); }
.ui-selection-group--radio.ui-selection-group--grid { align-items: stretch; }
.ui-selection-group--grid .ui-selection { width: 100%; max-width: none; }
.ui-selection-group--radio.ui-selection-group--grid .ui-selection--icon-card { min-height: 0; display: flex; flex-direction: column; }
/* 260, not 200: a package card carries a quantity and a total on one line, and
   a long money string (¥1,146.97 CNY) pushed the total onto a line of its own. */
/* 240, not 260: a package is four cards, and the documented width gives the grid
   1018px — at a 260px floor only three fit, so the fourth dropped to a row of its
   own. At 240 all four sit in one row at 245px each, which is still wider than
   the 200px the card needs to hold its pricing without overflowing. */
.ui-selection-group--package-grid { width: 100%; max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; gap: var(--ui-space-3); }
.ui-selection-group--package-grid .ui-selection { width: 100%; max-width: none; }
.ui-selection { width: 100%; min-width: 0; box-sizing: border-box; position: relative; display: block; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); color: var(--ui-color-text); background: var(--ui-color-card); font: inherit; text-align: left; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.ui-selection:not(.is-disabled):hover, .ui-selection.is-hover { border-color: var(--ui-color-border); background: var(--ui-color-divider); }
.ui-selection.is-selected { border-color: var(--ui-color-text); box-shadow: inset 0 0 0 1px var(--ui-color-text); color: var(--ui-color-title); }
.ui-selection.uses-selected-marker .ui-selection__indicator { display: none; }
.ui-selection.is-selected.has-selected-marker::after { width: 0; height: 0; position: absolute; top: 0; right: 0; border-top: 20px solid var(--ui-color-text); border-left: 20px solid transparent; content: ""; }
.ui-selection.is-selected:not(.is-disabled):hover, .ui-selection.is-selected.is-hover { background: var(--ui-color-card); }
.ui-selection:focus-visible, .ui-selection.is-focused { z-index: 1; border-color: var(--ui-color-title); outline: 0; box-shadow: inset 0 0 0 1px var(--ui-color-title); }
.ui-selection.is-disabled { color: var(--ui-color-disabled); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-selection__body { min-width: 0; display: flex; align-items: flex-start; gap: var(--ui-space-2); }
.ui-selection .ui-selection__indicator { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }
.ui-selection .ui-radio__indicator { display: grid; place-items: center; }
.ui-selection .ui-radio__indicator::after { width: 6px; height: 6px; }
.ui-selection .ui-checkbox__box { border-radius: var(--ui-radius-xs); }
.ui-selection.is-selected .ui-radio__indicator, .ui-selection.is-selected .ui-checkbox__box { border-color: var(--ui-color-text); background: var(--ui-color-text); }
.ui-selection.is-selected .ui-radio__indicator::after { background: var(--ui-color-card); }
.ui-selection.is-selected .ui-checkbox__check { display: block; }
.ui-selection.is-disabled .ui-selection__indicator { border-color: var(--ui-color-border); background: var(--ui-color-divider); }
.ui-selection.is-disabled .ui-selection__title, .ui-selection.is-disabled .ui-selection__subtext, .ui-selection.is-disabled .ui-selection__description, .ui-selection.is-disabled .ui-selection__price, .ui-selection.is-disabled .ui-selection__price small, .ui-selection.is-disabled .ui-selection__package-offer, .ui-selection.is-disabled .ui-selection__package-price, .ui-selection.is-disabled .ui-selection__package-price small, .ui-selection.is-disabled .ui-selection__package-description, .ui-selection.is-disabled .ui-selection__package-quantity, .ui-selection.is-disabled .ui-selection__package-total { color: var(--ui-color-disabled); }
.ui-selection.is-disabled .ui-selection__badge, .ui-selection.is-disabled .ui-selection__feature { opacity: .55; }
.ui-selection__feature { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-md); background: var(--ui-color-card); }
.ui-selection__feature img { width: 16px; height: 16px; display: block; object-fit: contain; }
.ui-selection__feature--avatar { border-radius: var(--ui-radius-full); }
.ui-selection__feature--avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-selection__feature--payment-icon { width: 40px; }
.ui-selection__feature--payment-icon img { width: 24px; height: 24px; }
.ui-selection__copy, .ui-selection__card-copy { min-width: 0; display: grid; gap: var(--ui-space-1); }
.ui-selection__copy { flex: 1 1 auto; }
.ui-selection__title-row { min-width: 0; display: flex; flex-wrap: wrap; gap: var(--ui-space-1); align-items: baseline; }
.ui-selection__title { color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-20); }
.ui-selection__subtext, .ui-selection__description { color: var(--ui-color-text); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); }
.ui-selection__description { display: block; }
.ui-selection--icon-card { padding: 0; overflow: hidden; }
/* No floor: the card is as tall as its copy. 224px was a stand-in for cards of
   an even height, which the grid's own alignment does better. */
.ui-selection--package-card { display: flex; flex-direction: column; padding: var(--ui-space-4); }
.ui-selection--lesson-options { width: min(100%, 760px); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); padding: var(--ui-space-4); }
/* The rule is inset rather than a full-width border: the card is 1px stroked
   with a 12px radius, so a divider running edge to edge lands on the stroke
   and collides with the corner arc. An inset pseudo-element stops short of
   both, which is what separates the header from the body without touching
   the frame that contains them. */
.ui-selection__card-header { min-width: 0; position: relative; display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-4); }
.ui-selection__card-header > img { width: 16px; height: 16px; flex: 0 0 16px; display: block; object-fit: contain; }
.ui-selection__card-header::after { height: 1px; position: absolute; right: var(--ui-space-4); bottom: 0; left: var(--ui-space-4); background: var(--ui-color-divider); content: ""; }
.ui-selection__card-title { min-width: 0; flex: 1; color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-selection-group--radio .ui-selection__card-title { font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-20); }
.ui-selection__card-header .ui-selection__indicator { margin-left: auto; }
.ui-selection__card-body { min-width: 0; display: grid; gap: var(--ui-space-3); align-items: start; padding: var(--ui-space-4); }
.ui-selection-group--radio.ui-selection-group--grid .ui-selection__card-body { flex: 1 1 auto; align-content: start; }
.ui-selection__price { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); align-items: baseline; color: var(--ui-color-title); font-size: var(--ui-font-size-24); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-32); }
.ui-selection__price small { color: var(--ui-color-text); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); }
.ui-selection__badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-full); padding: 2px 8px; color: var(--ui-color-title); background: var(--ui-color-card); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-selection__badge::before { width: 6px; height: 6px; border-radius: var(--ui-radius-full); content: ""; background: var(--ui-color-success); }
.ui-selection__package-copy { min-width: 0; display: grid; align-content: start; gap: var(--ui-space-2); }
.ui-selection__package-offer { display: inline-flex; align-items: center; gap: var(--ui-space-1); color: var(--ui-color-info); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); }
.ui-selection__package-offer-icon { width: 16px; height: 16px; flex: 0 0 16px; display: block; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ui-selection__package-offer.is-neutral { color: var(--ui-color-secondary); }
.ui-selection__package-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ui-space-1); color: var(--ui-color-title); font-size: var(--ui-font-size-20); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-28); }
.ui-selection__package-price small { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-selection__package-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-selection__package-footer { min-width: 0; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--ui-space-3); margin-top: auto; padding-top: var(--ui-space-4); }
.ui-selection__package-quantity, .ui-selection__package-total { min-width: 0; display: grid; }
.ui-selection__package-quantity { gap: var(--ui-space-0); color: var(--ui-color-title); text-align: left; }
.ui-selection__package-quantity strong { font-size: var(--ui-font-size-20); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-28); }
.ui-selection__package-quantity span { font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); }
.ui-selection__package-total { justify-items: end; gap: var(--ui-space-1); margin-left: auto; color: var(--ui-color-title); text-align: right; }
.ui-selection__package-total s { color: var(--ui-color-disabled); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-selection__package-total strong { font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); white-space: nowrap; }
.ui-selection__lesson-summary-copy { min-width: 0; display: grid; gap: var(--ui-space-1); }
.ui-selection__lesson-summary-title { color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-selection__lesson-summary-meta { color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); }
.ui-selection__lesson-summary-price { flex: 0 0 auto; color: var(--ui-color-title); font-size: var(--ui-font-size-18); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); white-space: nowrap; }
.ui-selection-group--lesson-options { width: min(100%, 760px); position: relative; gap: 0; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-card); }
.ui-selection-group--lesson-options.is-selected { border-color: var(--ui-color-text); box-shadow: inset 0 0 0 1px var(--ui-color-text); }
.ui-selection-group--lesson-options.is-selected::after { width: 0; height: 0; position: absolute; top: 0; right: 0; border-top: 20px solid var(--ui-color-text); border-left: 20px solid transparent; content: ""; }
.ui-selection__lesson-header { min-width: 0; display: grid; gap: var(--ui-space-1); padding: var(--ui-space-4); }
.ui-selection__lesson-title { color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-selection__lesson-meta { color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); }
/* 1px aside: the row runs the full width, and this keeps its background off
   the card's own border. */
.ui-selection__lesson-options { min-height: 0; display: grid; grid-template-rows: 1fr; padding: 0 1px var(--ui-space-4); opacity: 1; transition: grid-template-rows 240ms cubic-bezier(.2, .8, .2, 1), padding-bottom 240ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease; }
.ui-selection__lesson-options-inner { min-height: 0; display: grid; gap: var(--ui-space-1); overflow: hidden; }
.ui-selection__lesson-options.is-collapsed { grid-template-rows: 0fr; padding-bottom: 0; opacity: 0; pointer-events: none; }
.ui-selection__lesson-options[hidden] { display: none; }
.ui-selection__lesson-option { width: 100%; min-height: 40px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--ui-space-3); border: 0; border-radius: 0; padding-inline: var(--ui-space-4); color: var(--ui-color-title); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ui-selection__lesson-option:not(.is-disabled):hover { background: var(--ui-color-divider); }
.ui-selection__lesson-option:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--ui-color-title); }
.ui-selection__lesson-option-label, .ui-selection__lesson-option-price { color: inherit; font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-selection__lesson-option-price { white-space: nowrap; }
.ui-selection__lesson-option-indicator { width: 16px; height: 16px; box-sizing: border-box; border-radius: var(--ui-radius-full); background: var(--ui-color-hover); }
.ui-selection__lesson-option.is-selected .ui-selection__lesson-option-indicator { border: 5px solid var(--ui-color-text); background: var(--ui-color-card); }
.ui-selection__lesson-option.is-disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-selection__lesson-option.is-disabled .ui-selection__lesson-option-indicator { background: var(--ui-color-divider); }
.ui-selection-group--lesson-options-list { width: min(100%, 760px); max-width: none; display: grid; gap: var(--ui-space-3); }
.ui-selection__lesson-card { min-width: 0; position: relative; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-card); }
.ui-selection__lesson-card.is-expanded { border-color: var(--ui-color-text); box-shadow: inset 0 0 0 1px var(--ui-color-text); }
.ui-selection__lesson-card.is-expanded::after { width: 0; height: 0; position: absolute; top: 0; right: 0; border-top: 20px solid var(--ui-color-text); border-left: 20px solid transparent; content: ""; }
.ui-selection__lesson-toggle { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); border: 0; padding: var(--ui-space-4); color: var(--ui-color-title); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ui-selection__lesson-toggle:not(.is-selected):hover { background: var(--ui-color-divider); }
.ui-selection__lesson-toggle:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--ui-color-title); }
.ui-selection__lesson-card:not(.is-expanded) .ui-selection__lesson-summary-meta { font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-selection__lesson-card:not(.is-expanded) .ui-selection__lesson-summary-price { font-size: var(--ui-font-size-16); line-height: var(--ui-line-height-24); }
@media (max-width: 960px) { .ui-selection-group--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ui-selection-group--grid { grid-template-columns: 1fr; }
  .ui-selection--lesson-options { align-items: flex-start; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-4); }
  .ui-selection__lesson-option { grid-template-columns: minmax(0, 1fr) 16px; gap: var(--ui-space-3); padding-block: var(--ui-space-2); }
  .ui-selection__lesson-option-price { grid-column: 1; grid-row: 2; font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
  .ui-selection__lesson-option-indicator { grid-column: 2; grid-row: 1 / span 2; }
  .ui-selection__card-body { flex-direction: column; }
  .ui-selection__badge { order: -1; }
}

@media (prefers-reduced-motion: reduce) { .ui-selection__lesson-options { transition: none; } }

.ui-date-picker { width: 100%; position: relative; }
.ui-date-picker__trigger { width: 100%; min-height: 40px; display: flex; align-items: center; gap: var(--ui-space-2); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-card); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; }
.ui-date-picker--32 .ui-date-picker__trigger { min-height: 32px; font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-date-picker--48 .ui-date-picker__trigger { min-height: 48px; font-size: var(--ui-font-size-16); line-height: var(--ui-line-height-24); }
.ui-date-picker--pill .ui-date-picker__trigger { border-radius: var(--ui-radius-full); }
.ui-date-picker--rounded .ui-date-picker__trigger { border-radius: var(--ui-radius-lg); }
.ui-date-picker__trigger > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-date-picker__placeholder { color: var(--ui-color-placeholder); }
.ui-date-picker__calendar-icon { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.ui-date-picker__suffix-icon { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.ui-date-picker:not(.is-disabled) .ui-date-picker__trigger:hover, .ui-date-picker.is-hover .ui-date-picker__trigger { border-color: var(--ui-color-text); }
.ui-date-picker.is-focus .ui-date-picker__trigger, .ui-date-picker__trigger:focus-visible { border-color: var(--ui-color-title); outline: 0; box-shadow: none; }
.ui-date-picker.is-warning .ui-date-picker__trigger { border-color: var(--ui-color-warning); background: var(--ui-color-warning-surface); }
.ui-date-picker.is-error .ui-date-picker__trigger { border-color: var(--ui-color-error); background: var(--ui-color-error-surface); }
.ui-date-picker.is-disabled .ui-date-picker__trigger, .ui-date-picker__trigger:disabled { color: var(--ui-color-disabled); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-date-picker__popup { width: 100%; position: absolute; z-index: 20; top: calc(100% + var(--ui-space-2)); left: 0; display: none; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); }
.ui-date-picker.is-open .ui-date-picker__popup { display: block; }
.ui-date-picker__header { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; gap: var(--ui-space-2); margin-bottom: var(--ui-space-3); color: var(--ui-color-title); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); text-align: center; }
.ui-date-picker__header button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-md); padding: 0; background: transparent; cursor: pointer; }
.ui-date-picker__header button:not(:disabled):hover { background: var(--ui-color-divider); }
.ui-date-picker__header button:disabled { opacity: .45; cursor: not-allowed; }
.ui-date-picker__month-icon { width: 24px; height: 24px; }
.ui-date-picker__weekdays, .ui-date-picker__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ui-space-1); }
.ui-date-picker__grid { column-gap: 0; }
.ui-date-picker__weekdays { margin-bottom: var(--ui-space-1); }
.ui-date-picker__weekdays span { height: 24px; display: grid; place-items: center; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-16); }
.ui-date-picker__day, .ui-date-picker__blank { min-height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-full); padding: 0; color: var(--ui-color-text); background: transparent; font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-date-picker__day { cursor: pointer; }
.ui-date-picker__day:not(:disabled):not(.is-in-range):hover { background: radial-gradient(circle at center, var(--ui-color-divider) 0 16px, transparent 16.5px); }
.ui-date-picker__day.is-in-range { border-radius: 0; background: var(--ui-color-divider); }
.ui-date-picker__day.is-selected,
.ui-date-picker__day.is-selected:not(:disabled):hover { color: var(--ui-color-card); background: radial-gradient(circle at center, var(--ui-color-text) 0 16px, transparent 16.5px); }
.ui-date-picker__day.is-selected.is-range-start,
.ui-date-picker__day.is-selected.is-range-end,
.ui-date-picker__day.is-selected.is-range-start:not(:disabled):hover,
.ui-date-picker__day.is-selected.is-range-end:not(:disabled):hover { border-radius: 0; }
.ui-date-picker__day.is-selected.is-range-start,
.ui-date-picker__day.is-selected.is-range-start:not(:disabled):hover { background: radial-gradient(circle at center, var(--ui-color-text) 0 16px, transparent 16.5px), linear-gradient(to right, transparent 50%, var(--ui-color-divider) 50%); }
.ui-date-picker__day.is-selected.is-range-end,
.ui-date-picker__day.is-selected.is-range-end:not(:disabled):hover { background: radial-gradient(circle at center, var(--ui-color-text) 0 16px, transparent 16.5px), linear-gradient(to right, var(--ui-color-divider) 50%, transparent 50%); }
.ui-date-picker__day.is-muted, .ui-date-picker__day:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-date-picker__day:focus-visible { outline: 2px solid var(--ui-color-title); outline-offset: 1px; }

.ui-tooltip-wrap { position: relative; display: inline-flex; }
.ui-tooltip { --ui-tooltip-x: -50%; --ui-tooltip-y: 4px; width: max-content; max-width: min(240px, calc(100vw - 48px)); min-width: 0; overflow: visible; position: absolute; z-index: 30; bottom: calc(100% + var(--ui-space-2)); left: 50%; box-sizing: border-box; border-radius: var(--ui-radius-md); padding: var(--ui-space-2) var(--ui-space-3); color: var(--ui-color-card); background: var(--ui-color-title); box-shadow: var(--ui-shadow-md); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); opacity: 0; pointer-events: none; transform: translate(var(--ui-tooltip-x), var(--ui-tooltip-y)); transition: opacity 0s, transform 0s, visibility 0s; visibility: hidden; white-space: normal; overflow-wrap: anywhere; }
.ui-tooltip::before { width: 8px; height: 8px; position: absolute; bottom: -4px; left: 50%; border-radius: 1px; background: var(--ui-color-title); content: ""; transform: translateX(-50%) rotate(45deg); }
.ui-tooltip[data-placement="bottom"] { --ui-tooltip-y: -4px; top: calc(100% + var(--ui-space-2)); right: auto; bottom: auto; left: 50%; }
.ui-tooltip[data-placement="bottom"]::before { top: -4px; bottom: auto; }
.ui-tooltip[data-placement="top-left"] { --ui-tooltip-x: 0; bottom: calc(100% + var(--ui-space-2)); right: auto; left: 0; }
.ui-tooltip[data-placement="top-left"]::before { left: 16px; transform: translateX(-50%) rotate(45deg); }
.ui-tooltip[data-placement="top-right"] { --ui-tooltip-x: 0; bottom: calc(100% + var(--ui-space-2)); right: 0; left: auto; }
.ui-tooltip[data-placement="top-right"]::before { right: 16px; left: auto; transform: translateX(50%) rotate(45deg); }
.ui-tooltip[data-placement="bottom-left"] { --ui-tooltip-x: 0; --ui-tooltip-y: -4px; top: calc(100% + var(--ui-space-2)); right: auto; bottom: auto; left: 0; }
.ui-tooltip[data-placement="bottom-left"]::before { top: -4px; bottom: auto; left: 16px; transform: translateX(-50%) rotate(45deg); }
.ui-tooltip[data-placement="bottom-right"] { --ui-tooltip-x: 0; --ui-tooltip-y: -4px; top: calc(100% + var(--ui-space-2)); right: 0; bottom: auto; left: auto; }
.ui-tooltip[data-placement="bottom-right"]::before { top: -4px; right: 16px; bottom: auto; left: auto; transform: translateX(50%) rotate(45deg); }
.ui-tooltip[data-placement="left"] { --ui-tooltip-x: 4px; --ui-tooltip-y: -50%; top: 50%; right: calc(100% + var(--ui-space-2)); bottom: auto; left: auto; }
.ui-tooltip[data-placement="left"]::before { top: 50%; right: -4px; bottom: auto; left: auto; transform: translateY(-50%) rotate(45deg); }
.ui-tooltip[data-placement="right"] { --ui-tooltip-x: -4px; --ui-tooltip-y: -50%; top: 50%; right: auto; bottom: auto; left: calc(100% + var(--ui-space-2)); }
.ui-tooltip[data-placement="right"]::before { top: 50%; bottom: auto; left: -4px; transform: translateY(-50%) rotate(45deg); }
.ui-tooltip.no-arrow::before { display: none; }
/* The wait and the fade belong to appearing, not to leaving. With the delay on
   both, a tooltip hung around for a fifth of a second after the pointer had
   gone — long enough that moving along a row of slots put the next tooltip on
   top of the last one. Leaving now hides it at once. */
.ui-tooltip-wrap:hover > .ui-tooltip, .ui-tooltip-wrap:focus-within > .ui-tooltip, .ui-tooltip-wrap.is-open > .ui-tooltip { opacity: 1; transform: translate(var(--ui-tooltip-x), var(--ui-tooltip-y)); visibility: visible; transition: opacity 120ms ease 100ms, transform 120ms ease 100ms, visibility 120ms ease 100ms; }
.ui-tooltip-wrap:hover > .ui-tooltip[data-placement="top"], .ui-tooltip-wrap:hover > .ui-tooltip[data-placement="top-left"], .ui-tooltip-wrap:hover > .ui-tooltip[data-placement="top-right"], .ui-tooltip-wrap:hover > .ui-tooltip[data-placement="bottom"], .ui-tooltip-wrap:hover > .ui-tooltip[data-placement="bottom-left"], .ui-tooltip-wrap:hover > .ui-tooltip[data-placement="bottom-right"], .ui-tooltip-wrap:focus-within > .ui-tooltip[data-placement="top"], .ui-tooltip-wrap:focus-within > .ui-tooltip[data-placement="top-left"], .ui-tooltip-wrap:focus-within > .ui-tooltip[data-placement="top-right"], .ui-tooltip-wrap:focus-within > .ui-tooltip[data-placement="bottom"], .ui-tooltip-wrap:focus-within > .ui-tooltip[data-placement="bottom-left"], .ui-tooltip-wrap:focus-within > .ui-tooltip[data-placement="bottom-right"], .ui-tooltip-wrap.is-open > .ui-tooltip[data-placement="top"], .ui-tooltip-wrap.is-open > .ui-tooltip[data-placement="top-left"], .ui-tooltip-wrap.is-open > .ui-tooltip[data-placement="top-right"], .ui-tooltip-wrap.is-open > .ui-tooltip[data-placement="bottom"], .ui-tooltip-wrap.is-open > .ui-tooltip[data-placement="bottom-left"], .ui-tooltip-wrap.is-open > .ui-tooltip[data-placement="bottom-right"] { --ui-tooltip-y: 0; }
.ui-tooltip-wrap:hover > .ui-tooltip[data-placement="left"], .ui-tooltip-wrap:hover > .ui-tooltip[data-placement="right"], .ui-tooltip-wrap:focus-within > .ui-tooltip[data-placement="left"], .ui-tooltip-wrap:focus-within > .ui-tooltip[data-placement="right"], .ui-tooltip-wrap.is-open > .ui-tooltip[data-placement="left"], .ui-tooltip-wrap.is-open > .ui-tooltip[data-placement="right"] { --ui-tooltip-x: 0; }

.ui-divider { box-sizing: border-box; }
.ui-divider--horizontal { width: 100%; min-width: 0; clear: both; color: var(--ui-color-secondary); }
.ui-divider--horizontal:not(.has-label) { height: 1px; border-top: 1px solid var(--ui-color-divider); }
/* The border tone is a step up from the divider tone, not the input border: at
   --ui-color-border a rule inside a card read as the edge of a field. --ui-color-hover
   sits between the two — visibly stronger than a divider, softer than a border. */
.ui-divider--horizontal.ui-divider--border:not(.has-label) { border-color: var(--ui-color-hover); }
.ui-divider--horizontal.is-dashed:not(.has-label) { border-top-style: dashed; }
/* A divider's label names the break, it is not a heading — so it reads at the
   caption size in the secondary colour. At 14/semibold it competed with the
   content on either side of it. */
.ui-divider--horizontal.has-label { display: flex; align-items: center; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); white-space: nowrap; }
.ui-divider--horizontal.has-label::before, .ui-divider--horizontal.has-label::after { width: 50%; flex: 1 1 50%; border-top: 1px solid var(--ui-color-divider); content: ""; }
.ui-divider--horizontal.ui-divider--border.has-label::before, .ui-divider--horizontal.ui-divider--border.has-label::after { border-color: var(--ui-color-hover); }
.ui-divider--horizontal.has-label.is-dashed::before, .ui-divider--horizontal.has-label.is-dashed::after { border-top-style: dashed; }
.ui-divider__label { display: inline-flex; align-items: center; gap: var(--ui-space-2); padding-inline: var(--ui-space-3); }
.ui-divider__icon { width: 16px; height: 16px; display: block; flex: 0 0 16px; object-fit: contain; }
.ui-divider--horizontal.is-plain { font-weight: var(--ui-font-weight-medium); }
.ui-divider--horizontal.is-left::before { width: var(--ui-divider-edge, 5%); flex: 0 0 var(--ui-divider-edge, 5%); }
.ui-divider--horizontal.is-right::after { width: var(--ui-divider-edge, 5%); flex: 0 0 var(--ui-divider-edge, 5%); }
.ui-divider--vertical { width: 1px; height: 20px; display: inline-block; flex: 0 0 1px; border-left: 1px solid var(--ui-color-divider); margin-inline: var(--ui-space-2); vertical-align: middle; }
.ui-divider--vertical.ui-divider--border { border-color: var(--ui-color-hover); }
.ui-divider--vertical.is-dashed { border-left-style: dashed; }

.ui-avatar { --ui-avatar-size: 56px; width: var(--ui-avatar-size); height: var(--ui-avatar-size); position: relative; display: inline-grid; flex: 0 0 var(--ui-avatar-size); place-items: center; overflow: visible; border-radius: var(--ui-radius-full); vertical-align: middle; }
/* line-height: 1 is unitless on purpose — the initials scale with the avatar's size modifier, so a fixed line height would break the 24–120px scale. */
.ui-avatar__body { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: inherit; color: var(--ui-color-card); background: var(--ui-color-info); font-weight: var(--ui-font-weight-bold); line-height: 1; }
.ui-avatar__image { width: 100%; height: 100%; display: block; object-fit: cover; }
.ui-avatar__initials { font-size: calc(var(--ui-avatar-size) * .5); }
.ui-avatar__logo { width: 54%; height: 54%; display: block; object-fit: contain; }
.ui-avatar--empty.ui-avatar--tone-primary .ui-avatar__body, .ui-avatar--logo .ui-avatar__body { background: var(--ui-color-primary); }
.ui-avatar--empty.ui-avatar--tone-success .ui-avatar__body { background: var(--ui-color-success); }
.ui-avatar--empty.ui-avatar--tone-warning .ui-avatar__body { background: var(--ui-color-warning); }
.ui-avatar--empty.ui-avatar--tone-info .ui-avatar__body { background: var(--ui-color-info); }
.ui-avatar:hover .ui-avatar__body, .ui-avatar.is-hover .ui-avatar__body { box-shadow: 0 0 0 1px var(--ui-color-border); }
.ui-avatar.is-interactive { cursor: pointer; }
.ui-avatar--24 { --ui-avatar-size: 24px; }
.ui-avatar--32 { --ui-avatar-size: 32px; }
.ui-avatar--40 { --ui-avatar-size: 40px; }
.ui-avatar--48 { --ui-avatar-size: 48px; }
.ui-avatar--56 { --ui-avatar-size: 56px; }
.ui-avatar--64 { --ui-avatar-size: 64px; }
/* 96 sits between 80 and 120: the teacher card shrinks to it on a narrow screen,
   and before this step existed it shrank to 100 — a size the system does not
   have, written into a template stylesheet. */
.ui-avatar--80 { --ui-avatar-size: 80px; }
.ui-avatar--96 { --ui-avatar-size: 96px; }
.ui-avatar--120 { --ui-avatar-size: 120px; }
.ui-flag { display: block; overflow: hidden; border: 0; border-radius: var(--ui-radius-full); box-shadow: 0 0 0 1px var(--ui-color-border); object-fit: cover; }
.ui-flag--16 { width: 16px; height: 16px; }
.ui-flag--24 { width: 24px; height: 24px; }
.ui-avatar__flag { position: absolute; right: 0; bottom: 0; z-index: 1; }
.ui-avatar-group { display: inline-flex; align-items: center; }
.ui-avatar-group__stack { display: flex; align-items: center; }
.ui-avatar-group .ui-avatar, .ui-avatar-group__overflow, .ui-avatar-group__add { width: var(--ui-avatar-group-size); height: var(--ui-avatar-group-size); flex: 0 0 var(--ui-avatar-group-size); }
.ui-avatar-group .ui-avatar + .ui-avatar, .ui-avatar-group__overflow, .ui-avatar-group__add { margin-left: calc(var(--ui-avatar-group-overlap) * -1); }
.ui-avatar-group .ui-avatar { z-index: 0; }
.ui-avatar-group .ui-avatar:hover { z-index: 1; }
.ui-avatar-group .ui-avatar__body { box-shadow: 0 0 0 1px var(--ui-color-border); }
/* line-height: 1 is unitless on purpose — the initials scale with the avatar's size modifier, so a fixed line height would break the 24–120px scale. */
.ui-avatar-group__overflow, .ui-avatar-group__add { display: grid; place-items: center; border-radius: var(--ui-radius-full); font-weight: var(--ui-font-weight-semibold); line-height: 1; }
.ui-avatar-group__overflow { z-index: 1; color: var(--ui-color-secondary); background: var(--ui-color-hover); font-size: var(--ui-avatar-group-font-size); }
.ui-avatar-group__add { z-index: 1; border: 1px dashed var(--ui-color-border); padding: 0; color: var(--ui-color-secondary); background: var(--ui-color-card); cursor: pointer; }
.ui-avatar-group__add:hover { background: var(--ui-color-divider); }
.ui-avatar-group__add-icon { width: 24px; height: 24px; }
.ui-avatar-group--xs { --ui-avatar-group-size: 24px; --ui-avatar-group-overlap: 4px; --ui-avatar-group-font-size: var(--ui-font-size-12); }
.ui-avatar-group--sm { --ui-avatar-group-size: 32px; --ui-avatar-group-overlap: 8px; --ui-avatar-group-font-size: var(--ui-font-size-14); }
.ui-avatar-group--md { --ui-avatar-group-size: 40px; --ui-avatar-group-overlap: 12px; --ui-avatar-group-font-size: var(--ui-font-size-16); }

.ui-badge { display: inline-flex; box-sizing: border-box; }
.ui-badge--count, .ui-badge--dot { position: relative; vertical-align: middle; }
.ui-badge__anchor { display: inline-flex; }
.ui-badge__marker { position: absolute; z-index: 1; display: grid; place-items: center; border: 1px solid var(--ui-color-card); border-radius: var(--ui-radius-full); color: var(--ui-color-card); background: var(--ui-color-primary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-16); }
.ui-badge__marker--count { min-width: 20px; height: 20px; top: -6px; right: -8px; padding: 0 4px; }
.ui-badge__marker--dot { width: 8px; height: 8px; top: -2px; right: -2px; }
.ui-badge--success .ui-badge__marker, .ui-badge--success .ui-badge__status-dot { background: var(--ui-color-success); }
.ui-badge--info .ui-badge__marker, .ui-badge--info .ui-badge__status-dot { background: var(--ui-color-info); }
.ui-badge--warning .ui-badge__marker, .ui-badge--warning .ui-badge__status-dot { background: var(--ui-color-warning); }
.ui-badge--error .ui-badge__marker, .ui-badge--error .ui-badge__status-dot { background: var(--ui-color-error); }
.ui-badge.is-hidden .ui-badge__marker { display: none; }
.ui-badge--status { align-items: center; gap: var(--ui-space-2); color: var(--ui-color-text); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-badge__status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: var(--ui-radius-full); background: var(--ui-color-primary); }
.ui-badge__label { min-width: 0; }
/* A one-word mark, at the caption size with white text. Uppercase is part of the
   mark rather than of the string, so a translated label is still shaped like the
   badge. The surface says which kind of statement it is: NEW is the brand — a
   promotion — and BETA is info, a statement about maturity. */
.ui-badge--new, .ui-badge--beta { align-items: center; }
.ui-badge__word { display: inline-flex; align-items: center; height: 20px; border-radius: var(--ui-radius-xs); padding: 0 var(--ui-space-1); color: var(--ui-color-on-primary); font-size: var(--ui-font-size-10); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-14); letter-spacing: .04em; text-transform: uppercase; }
.ui-badge--new .ui-badge__word { background: var(--ui-color-primary); }
/* A note rather than a mark: sentence case on the info tint, for the lesson type
   a returning student took last time. */
.ui-badge--previous { align-items: center; }
.ui-badge__note { display: inline-flex; align-items: center; height: 20px; border-radius: var(--ui-radius-xs); padding: 0 var(--ui-space-2); color: var(--ui-color-info); background: var(--ui-color-info-surface); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
/* The info surface, not a gradient of its own: the Beta badge had a gradient
   token to itself, and a token with a single caller is a value in disguise. */
.ui-badge--beta .ui-badge__word { color: var(--ui-color-info); background: var(--ui-color-info-surface); }

.ui-breadcrumb { max-width: 100%; }
.ui-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.ui-breadcrumb__item { min-width: 0; display: inline-flex; align-items: center; }
.ui-breadcrumb__link, .ui-breadcrumb__current { min-width: 0; border: 0; padding: 0; color: var(--ui-color-secondary); background: transparent; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); }
.ui-breadcrumb__link { cursor: pointer; }
.ui-breadcrumb__link:hover:not(:disabled), .ui-breadcrumb__link:focus-visible { color: var(--ui-color-title); text-decoration: underline; }
.ui-breadcrumb__link:disabled, .ui-breadcrumb__link[aria-disabled="true"] { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-breadcrumb__link.has-icon, .ui-breadcrumb__current { display: inline-flex; align-items: center; gap: var(--ui-space-2); }
.ui-breadcrumb__link.is-icon-only { width: 24px; height: 24px; display: grid; place-items: center; }
.ui-breadcrumb__icon { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.ui-breadcrumb__current { overflow: hidden; color: var(--ui-color-title); font-weight: var(--ui-font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.ui-breadcrumb__separator-wrap { margin: 0 var(--ui-space-2); }
.ui-breadcrumb__separator { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; opacity: .68; }
/* A text separator matches the 22px item line box rather than the 16px icon
   slot: a 16px box centered in a 22px row drops the glyph ~3px below the
   labels' baseline, which reads as misalignment on a literal like "/". */
.ui-breadcrumb__separator--text { height: 22px; display: grid; place-items: center; color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-22); }
.ui-breadcrumb__overflow-wrap { position: relative; }
.ui-breadcrumb__overflow { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-full); padding: 0; color: var(--ui-color-text); background: transparent; cursor: pointer; }
.ui-breadcrumb__overflow:hover, .ui-breadcrumb__overflow:focus-visible { background: var(--ui-color-divider); }
.ui-breadcrumb__overflow-icon { width: 24px; height: 24px; }
.ui-breadcrumb__menu { min-width: 136px; position: absolute; z-index: 2; top: calc(100% + var(--ui-space-2)); left: 0; display: grid; margin: 0; border-radius: var(--ui-radius-lg); padding: var(--ui-space-2); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); list-style: none; }
.ui-breadcrumb__menu[hidden] { display: none; }
.ui-breadcrumb__menu button { width: 100%; min-height: 32px; border: 0; border-radius: var(--ui-radius-md); padding: 0 var(--ui-space-2); color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); text-align: left; cursor: pointer; }
.ui-breadcrumb__menu button:hover, .ui-breadcrumb__menu button:focus-visible { background: var(--ui-color-divider); }

@media (max-width: 760px) {
  .ui-breadcrumb__list { align-items: flex-start; }
}

.ui-card { width: min(100%, 360px); min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: var(--ui-radius-lg); padding: 0; color: var(--ui-color-text); background: var(--ui-color-card); box-shadow: var(--ui-shadow-card); font: inherit; text-align: left; }
.ui-card.is-outlined { border: 0; box-shadow: 0 0 0 1px var(--ui-color-border); }
.ui-card.is-interactive { cursor: pointer; transition: box-shadow 160ms ease; }
.ui-card.is-interactive:hover, .ui-card.is-interactive:focus-visible { box-shadow: var(--ui-shadow-card-hover); }
.ui-card.is-interactive:focus-visible { outline: 2px solid var(--ui-color-title); outline-offset: 2px; }
.ui-card__media { width: 100%; display: block; object-fit: cover; }
.ui-media-placeholder { display: grid; place-items: center; overflow: hidden; background: var(--ui-color-hover); }
.ui-media-placeholder > img { width: var(--ui-media-placeholder-logo-width, 24px); height: auto; max-height: var(--ui-media-placeholder-logo-height, 30px); object-fit: contain; }
.ui-card__media.ui-media-placeholder { --ui-media-placeholder-logo-width: 32px; --ui-media-placeholder-logo-height: 40px; }
.ui-card--media-16-9 .ui-card__media { aspect-ratio: 16 / 9; }
.ui-card--media-3-1 .ui-card__media { aspect-ratio: 3 / 1; }
.ui-card__content { display: grid; gap: var(--ui-space-2); padding: var(--ui-space-4); }
.ui-card--compact .ui-card__content { padding: var(--ui-space-3); }
.ui-card--comfortable .ui-card__content { padding: var(--ui-space-6); }
.ui-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-3); }
.ui-card__heading > div:first-child { min-width: 0; display: grid; gap: var(--ui-space-1); }
.ui-card__eyebrow { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); }
.ui-card__title { margin: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-card__body { color: var(--ui-color-text); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-card__body > :first-child { margin-top: 0; }
.ui-card__body > :last-child { margin-bottom: 0; }
.ui-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding-top: var(--ui-space-2); }
.ui-card__meta { flex: 0 0 auto; }

/* One block, not a stack of pills. The rows carry the surface and the list
   carries the corner, clipped so the first and last rows follow it — a radius
   on each row reads as separate objects the moment they touch. */
.ui-list { width: 100%; margin: 0; overflow: hidden; border-radius: var(--ui-radius-md); padding: 0; color: var(--ui-color-text); list-style: none; }
.ui-list__item + .ui-list__item { margin-top: 0; }
.ui-list.is-divided .ui-list__item + .ui-list__item { margin-top: 0; border-top: 1px solid var(--ui-color-divider); }
.ui-list__row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: var(--ui-space-3); border: 0; padding: var(--ui-space-2) var(--ui-space-4); color: inherit; background: var(--ui-color-card); font: inherit; text-align: left; text-decoration: none; }
.ui-list__item.is-interactive .ui-list__row { cursor: pointer; }
.ui-list__item.is-interactive .ui-list__row:hover, .ui-list__item.is-interactive .ui-list__row:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-list__item.is-disabled .ui-list__row { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-list__copy { min-width: 0; flex: 1; display: grid; gap: var(--ui-space-half); }
.ui-list__label { color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-20); }
.ui-list__description { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-list__content { color: var(--ui-color-text); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-list__metrics { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-list__metrics > span { display: inline-flex; align-items: center; gap: var(--ui-space-1); }
.ui-list__metric-icon { width: 16px; height: 16px; opacity: .3; }
.ui-list__avatar, .ui-list__trailing { flex: 0 0 auto; display: flex; align-items: center; }
.ui-list__trailing { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-list__image, .ui-list__image-placeholder { width: 96px; height: 54px; flex: 0 0 96px; border-radius: var(--ui-radius-md); }
.ui-list__image { object-fit: cover; }
.ui-list--small .ui-list__row { min-height: 48px; padding: var(--ui-space-1) var(--ui-space-3); }
.ui-list--large .ui-list__row { min-height: 72px; padding: var(--ui-space-3) var(--ui-space-6); }
.ui-list--avatar.ui-list--large .ui-list__row, .ui-list--image .ui-list__row { min-height: 88px; }
.ui-list--content .ui-list__row { min-height: 128px; display: grid; grid-template-columns: auto minmax(0, 1fr) 160px; align-items: start; column-gap: var(--ui-space-3); row-gap: var(--ui-space-3); padding-top: var(--ui-space-3); padding-bottom: var(--ui-space-3); }
.ui-list--content .ui-list__copy { gap: var(--ui-space-half); }
.ui-list--content .ui-list__avatar { grid-column: 1; grid-row: 1; }
.ui-list--content .ui-list__copy { grid-column: 2; grid-row: 1; }
.ui-list--content .ui-list__image, .ui-list--content .ui-list__image-placeholder { width: 160px; height: 90px; flex-basis: 160px; }
.ui-list--content .ui-list__image, .ui-list--content .ui-list__image-placeholder { grid-column: 3; grid-row: 1 / span 3; }
.ui-list--content .ui-list__content, .ui-list--content .ui-list__metrics { grid-column: 1 / 3; }
@media (max-width: 640px) { .ui-list__image, .ui-list__image-placeholder { width: 72px; height: 40.5px; flex-basis: 72px; } .ui-list--content .ui-list__row { min-height: 88px; grid-template-columns: auto minmax(0, 1fr) 96px; } .ui-list--content .ui-list__image, .ui-list--content .ui-list__image-placeholder { width: 96px; height: 54px; flex-basis: 96px; } }

.ui-alert { --ui-dismiss-surface: var(--ui-color-info-surface); width: 100%; min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: var(--ui-space-2); position: relative; overflow: visible; border-radius: var(--ui-radius-lg); padding: var(--ui-space-3) var(--ui-space-4); color: var(--ui-color-text); background: var(--ui-color-info-surface); }
.ui-alert.has-action { grid-template-columns: 24px minmax(0, 1fr) auto; }
.ui-alert--success { --ui-dismiss-surface: var(--ui-color-success-surface); background: var(--ui-color-success-surface); }
.ui-alert--warning { --ui-dismiss-surface: var(--ui-color-warning-surface); background: var(--ui-color-warning-surface); }
.ui-alert--error { --ui-dismiss-surface: var(--ui-color-error-surface); background: var(--ui-color-error-surface); }
.ui-alert__icon { width: 24px; height: 24px; display: grid; place-items: center; }
.ui-alert__icon-image { width: 24px; height: 24px; }
.ui-alert__copy { min-width: 0; display: grid; gap: var(--ui-space-1); }
.ui-alert__copy strong { color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); }
.ui-alert__description { overflow-wrap: anywhere; color: var(--ui-color-text); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-alert__action { align-self: center; }
.ui-alert__close, .ui-toast__close, .ui-notification__close { width: 24px; height: 24px; display: grid; place-items: center; position: absolute; z-index: 2; top: -6px; right: -6px; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-full); padding: 0; color: var(--ui-color-text); background: var(--ui-dismiss-surface); cursor: pointer; opacity: 0; transform: scale(.84); transition: opacity 120ms ease, transform 120ms ease; }
.ui-alert:hover .ui-alert__close, .ui-alert:focus-within .ui-alert__close, .ui-toast:hover .ui-toast__close, .ui-toast:focus-within .ui-toast__close, .ui-notification:hover .ui-notification__close, .ui-notification:focus-within .ui-notification__close, .ui-alert__close:focus-visible, .ui-toast__close:focus-visible, .ui-notification__close:focus-visible { outline: 0; opacity: 1; transform: scale(1); }
.ui-alert__close-icon, .ui-toast__close-icon, .ui-notification__close-icon { width: 16px; height: 16px; }
/* A banner is a full-bleed surface with a contained content column: the fill runs
   as wide as whatever holds it — a page header, a drawer's top edge — while the
   icon and the copy stay on the page's own measure and centre within it. Grid
   columns rather than an inner wrapper, so the markup is the same as every other
   alert; `justify-content: center` is what puts the pair in the middle once the
   container is wider than the measure. */
.ui-alert.is-banner { width: 100%; max-width: none; grid-template-columns: 24px minmax(0, calc(var(--ui-layout-content-max-width) - 24px - var(--ui-space-2))); justify-content: center; align-items: start; border-radius: 0; padding: var(--ui-space-2) var(--ui-space-4); }
.ui-alert.is-banner.has-action { grid-template-columns: 24px minmax(0, 1fr) auto; }
.ui-alert.is-banner .ui-alert__icon, .ui-alert.is-banner .ui-alert__icon-image { width: 24px; height: 24px; }
.ui-alert.is-banner .ui-alert__copy { display: block; }
.ui-alert.is-banner .ui-alert__copy strong { font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); }
.ui-alert.is-banner .ui-alert__description { display: none; }

.ui-tabs { width: 100%; min-width: 0; display: grid; }
.ui-tabs__header { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ui-space-3); }
.ui-tabs__list { min-width: 0; display: flex; align-items: stretch; gap: var(--ui-space-1); overflow-x: auto; border-bottom: 1px solid var(--ui-color-divider); scrollbar-width: none; }
.ui-tabs__list::-webkit-scrollbar { display: none; }
.ui-tabs__trigger { min-height: 40px; position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--ui-space-2); border: 0; border-radius: var(--ui-radius-md); padding: 0 var(--ui-space-3); color: var(--ui-color-secondary); background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-20); white-space: nowrap; cursor: pointer; transition: color 160ms ease, background-color 160ms ease; }
.ui-tabs__trigger::after { height: 2px; position: absolute; right: var(--ui-space-3); bottom: 0; left: var(--ui-space-3); border-radius: var(--ui-radius-full); opacity: 0; transform: scaleX(.72); transform-origin: center; background: var(--ui-color-text); content: ""; transition: opacity 160ms ease, transform 160ms ease; }
.ui-tabs__trigger:not(:disabled):hover, .ui-tabs__trigger:not(:disabled):focus-visible { background: var(--ui-color-divider); outline: 0; }
.ui-tabs__trigger.is-active { color: var(--ui-color-title); }
.ui-tabs__trigger.is-active::after { opacity: 1; transform: scaleX(1); }
.ui-tabs__trigger:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-tabs__trigger:disabled::after { display: none; }
.ui-tabs--red-line .ui-tabs__trigger { min-height: 48px; border-radius: 0; color: var(--ui-color-secondary); }
.ui-tabs--red-line .ui-tabs__trigger::after { width: 32px; height: 4px; right: auto; bottom: 0; left: 50%; border-radius: var(--ui-radius-xs); background: var(--ui-color-primary); transform: translateX(-50%) scaleX(.72); }
.ui-tabs--red-line .ui-tabs__trigger.is-active { color: var(--ui-color-title); }
.ui-tabs--red-line .ui-tabs__trigger.is-active::after { transform: translateX(-50%) scaleX(1); }
.ui-tabs--red-line .ui-tabs__trigger:not(:disabled):hover, .ui-tabs--red-line .ui-tabs__trigger:not(:disabled):focus-visible { background: transparent; color: var(--ui-color-title); }
.ui-tabs__icon { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.ui-tabs__count { min-width: 16px; height: 16px; display: grid; flex: 0 0 16px; place-items: center; border-radius: var(--ui-radius-full); padding: 0; color: var(--ui-color-card); background: var(--ui-color-primary); font-size: var(--ui-font-size-10); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-14); }
.ui-tabs.has-extra .ui-tabs__header { gap: 0; }
.ui-tabs__extra { min-height: 40px; display: flex; align-items: center; position: relative; z-index: 1; padding-left: var(--ui-space-6); background: var(--ui-color-card); }
.ui-tabs__extra::before { width: var(--ui-space-6); position: absolute; top: 0; bottom: 0; left: calc(var(--ui-space-6) * -1); background: linear-gradient(to right, transparent, var(--ui-color-card)); content: ""; pointer-events: none; }
.ui-tabs__extra::after { width: 1px; height: 16px; position: absolute; top: 50%; left: var(--ui-space-3); background: var(--ui-color-divider); content: ""; transform: translateY(-50%); pointer-events: none; }
.ui-tabs__panel { min-height: 56px; padding: var(--ui-space-4) 0 0; color: var(--ui-color-text); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-tabs__panel[hidden] { display: none; }
.ui-tabs__panel.is-entering { animation: ui-tabs-panel-enter 180ms ease-out; }
@keyframes ui-tabs-panel-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ui-tabs__trigger, .ui-tabs__trigger::after { transition: none; } .ui-tabs__panel.is-entering { animation: none; } }

.ui-pagination { display: flex; align-items: center; gap: var(--ui-space-1); }
.ui-pagination__page, .ui-pagination__arrow { min-width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-md); padding: 0 var(--ui-space-2); color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); cursor: pointer; }
.ui-pagination__page:hover:not(:disabled), .ui-pagination__arrow:hover:not(:disabled) { border-radius: var(--ui-radius-full); background: var(--ui-color-divider); }
.ui-pagination__page:focus-visible, .ui-pagination__arrow:focus-visible { background: var(--ui-color-divider); }
.ui-pagination__page.is-current { border-radius: var(--ui-radius-full); color: var(--ui-color-title); background: var(--ui-color-divider); }
.ui-pagination__page:disabled, .ui-pagination__arrow:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-pagination__arrow-icon { width: 24px; height: 24px; }
.ui-pagination__arrow:disabled .ui-pagination__arrow-icon { opacity: .35; }
.ui-pagination__ellipsis { min-width: 16px; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); text-align: center; }

.ui-rate { display: inline-flex; align-items: center; gap: var(--ui-space-1); }
.ui-rate__item { width: 20px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-xs); padding: 0; background: transparent; cursor: pointer; }
/* The large rate: a question asked after a lesson, at a size a thumb can hit.
   No score beside it — at this size the answer is the word (Terrible … Wonderful),
   and "4 / 5" next to five 48px stars reads as a second, competing answer. */
.ui-rate--48 { gap: var(--ui-space-2); }
.ui-rate--48 .ui-rate__item { width: 48px; height: 48px; }
.ui-rate--48 .ui-rate__star { width: 48px; height: 48px; }
.ui-rate--48 .ui-rate__output { display: none; }
.ui-rate--48 .ui-rate__text { margin-left: var(--ui-space-2); color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-24); }
.ui-rate__item:focus-visible { outline: 2px solid var(--ui-color-text); outline-offset: 2px; }
.ui-rate__star { width: 20px; height: 20px; position: relative; display: block; }
.ui-rate__star-base, .ui-rate__star-fill { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ui-rate__star-base, .ui-rate__star-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.ui-rate__star-fill { overflow: hidden; opacity: 0; pointer-events: none; }
.ui-rate__item.is-active .ui-rate__star-fill, .ui-rate__item.is-preview-active .ui-rate__star-fill { opacity: 1; }
.ui-rate__item.is-half .ui-rate__star-fill, .ui-rate__item.is-preview-half .ui-rate__star-fill { clip-path: inset(0 50% 0 0); opacity: 1; }
.ui-rate.is-preview .ui-rate__item:not(.is-preview-active) .ui-rate__star-fill { opacity: 0; }
/* Hovering a star shows the rating it would give: the hovered one and every star
   before it fill, and the current value stops showing while you are choosing.
   The state existed only as a class a page could set — with a pointer on the
   stars, nothing happened. Keyboard gets the same preview through :focus-visible,
   because arrowing along the row is the same act of choosing. */
.ui-rate:not(.is-disabled) .ui-rate__item:hover .ui-rate__star-fill,
.ui-rate:not(.is-disabled) .ui-rate__item:has(~ .ui-rate__item:hover) .ui-rate__star-fill,
.ui-rate:not(.is-disabled) .ui-rate__item:focus-visible .ui-rate__star-fill,
.ui-rate:not(.is-disabled) .ui-rate__item:has(~ .ui-rate__item:focus-visible) .ui-rate__star-fill { opacity: 1; }
.ui-rate:not(.is-disabled):has(.ui-rate__item:hover) .ui-rate__item:not(:hover):not(:has(~ .ui-rate__item:hover)) .ui-rate__star-fill,
.ui-rate:not(.is-disabled):has(.ui-rate__item:focus-visible) .ui-rate__item:not(:focus-visible):not(:has(~ .ui-rate__item:focus-visible)) .ui-rate__star-fill { opacity: 0; }
.ui-rate.is-disabled .ui-rate__item { cursor: not-allowed; }
.ui-rate.is-disabled .ui-rate__item:focus-visible { outline: 0; }
.ui-rate.is-disabled .ui-rate__star-fill { filter: grayscale(1); }
.ui-rate__output, .ui-rate__text { min-width: 36px; margin-left: var(--ui-space-2); color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-rate__text { min-width: 0; color: var(--ui-color-text); font-weight: var(--ui-font-weight-semibold); }
.ui-rate--summary { gap: var(--ui-space-1); }
.ui-rate__summary-star { width: 16px; height: 16px; display: block; }
.ui-rate__summary-value { min-width: 0; margin: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-20); }

/* Sticky by default. A shell that scrolls away is the exception, not the
   norm, and every consumer that wanted the norm had to rediscover it: two
   templates wrote their own rule, one of them onto an element that could
   never hold it. Opt out with sticky={false}.

   align-self so a stretching parent cannot make it full-height, which
   would leave nothing for sticky to travel through. Below 40 on purpose —
   that is the modal layer, and a shell above the mask is a trap.

   100dvh, not a fixed 600px: the rail is as tall as the screen and stays put
   while the page moves. Overflow is handled inside by .ui-sidebar__scroll, so
   a long nav scrolls within the rail and the footer stays on the floor. dvh
   rather than vh so mobile browser chrome does not crop the footer.

   max-height:100% is the escape hatch, and it is why the default is safe: a
   parent with a definite height bounds the rail, a page shell does not. Baking
   100dvh in without it blew the Catalog's own 600px demo stage open — height
   is the page's decision, and the component has to let the page make it. */
.ui-sidebar { --ui-sidebar-section-height: 480px; width: 324px; height: 100dvh; max-height: 100%; position: sticky; top: 0; z-index: var(--ui-layer-sidebar, 41); align-self: flex-start; display: flex; flex: 0 0 324px; flex-direction: column; overflow: visible; color: var(--ui-color-text); background: var(--ui-color-card); border-right: 1px solid var(--ui-color-border); transition: width 180ms ease, flex-basis 180ms ease; }
.ui-sidebar__header { height: 72px; flex: 0 0 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ui-color-divider); padding: 0 var(--ui-space-6); }
.ui-sidebar__header > .ui-tooltip-wrap { flex: 0 0 auto; }
.ui-sidebar__header > .ui-tooltip-wrap:has(.ui-sidebar__brand) { width: 48px; height: 40px; }
.ui-sidebar__brand { width: 48px; height: 40px; display: flex; align-items: center; border: 0; padding: 0; color: var(--ui-color-text); background: transparent; cursor: default; }
.ui-sidebar__brand-wordmark { width: 48px; height: 32px; display: block; object-fit: contain; }
.ui-sidebar__brand-mark, .ui-sidebar__brand-plus, .ui-sidebar__brand-expand { display: none; }
.ui-sidebar--plus:not(.is-collapsed) .ui-sidebar__header > .ui-tooltip-wrap:has(.ui-sidebar__brand), .ui-sidebar--plus:not(.is-collapsed) .ui-sidebar__brand { width: 96px; }
.ui-sidebar--plus:not(.is-collapsed) .ui-sidebar__brand-plus { width: 42px; height: 11px; display: block; margin-left: var(--ui-space-1); }
.ui-sidebar__utility { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-md); padding: 0; color: var(--ui-color-text); background: transparent; cursor: pointer; }
.ui-sidebar__utility:hover, .ui-sidebar__utility:focus-visible { background: var(--ui-color-divider); }
.ui-sidebar__utility-icon { width: 24px; height: 24px; }
.ui-sidebar:not(.is-collapsed) .ui-sidebar__header > .ui-tooltip-wrap:has(.ui-sidebar__brand) > .ui-tooltip { display: none; }
.ui-sidebar__scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--ui-color-border) transparent; padding: var(--ui-space-4); }
.ui-sidebar__scroll::-webkit-scrollbar { width: 8px; }
.ui-sidebar__scroll::-webkit-scrollbar-track { background: transparent; }
.ui-sidebar__scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--ui-radius-full); background-color: var(--ui-color-border); background-clip: padding-box; }
.ui-sidebar__scroll:hover::-webkit-scrollbar-thumb { background-color: var(--ui-color-secondary); }
.ui-sidebar__nav, .ui-sidebar__section-list { display: grid; gap: 2px; }
.ui-sidebar__nav-row { min-width: 0; display: flex; align-items: center; gap: var(--ui-space-1); border-radius: var(--ui-radius-lg); }
.ui-sidebar__nav-row.is-active { color: var(--ui-color-title); background: var(--ui-color-divider); }
.ui-sidebar__nav-row.is-active:hover { background: var(--ui-color-hover); }
.ui-sidebar__nav-row.is-pinnable { cursor: grab; }
.ui-sidebar__nav-row.is-dragging, .ui-sidebar__more-row.is-dragging { opacity: .45; }
.ui-sidebar__nav-row .ui-sidebar__item { flex: 1 1 auto; min-width: 0; }
.ui-sidebar__item, .ui-sidebar__section-toggle, .ui-sidebar__subitem { width: 100%; min-height: 40px; display: flex; align-items: center; border: 0; border-radius: var(--ui-radius-lg); padding: var(--ui-space-2) var(--ui-space-3); color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); text-align: left; cursor: pointer; }
.ui-sidebar__item { gap: var(--ui-space-3); }
.ui-sidebar__item:hover, .ui-sidebar__section-toggle:hover, .ui-sidebar__subitem:hover { background: var(--ui-color-divider); }
.ui-sidebar__item.is-active { color: var(--ui-color-title); background: var(--ui-color-divider); font-weight: var(--ui-font-weight-bold); }
.ui-sidebar__item.is-active:hover { background: var(--ui-color-hover); }
.ui-sidebar__nav-row.is-active .ui-sidebar__item, .ui-sidebar__nav-row.is-active .ui-sidebar__item:hover { background: transparent; }
/* The pin reveals on hover and focus only — see .is-pinnable:hover below. An
   `.is-active` exemption used to pin it open; the Catalog's active row is fixed
   and so has no pin at all, which is why the rule was only ever reachable from
   a consumer whose active row was pinnable, and there it read as a stuck icon. */
.ui-sidebar__item:disabled, .ui-sidebar__section-toggle:disabled, .ui-sidebar__subitem:disabled { color: var(--ui-color-disabled); background: transparent; cursor: not-allowed; }
.ui-sidebar__item-icon, .ui-sidebar__more-icon { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.ui-sidebar__item span, .ui-sidebar__subitem-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sidebar__section { margin-top: var(--ui-space-1); }
.ui-sidebar__section-toggle { justify-content: flex-start; gap: var(--ui-space-2); }
.ui-sidebar__section-arrow { width: 24px; height: 24px; flex: 0 0 24px; transition: transform 120ms ease; }
.ui-sidebar__section.is-open .ui-sidebar__section-arrow { transform: rotate(90deg); }
.ui-sidebar__section-list { max-height: 0; display: grid; overflow: hidden; margin: 0; padding: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; list-style: none; will-change: max-height, opacity, transform; transition: max-height 340ms cubic-bezier(.2, .8, .2, 1), margin 340ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease 70ms, transform 260ms cubic-bezier(.2, .8, .2, 1) 20ms; }
.ui-sidebar__section.is-open .ui-sidebar__section-list { max-height: var(--ui-sidebar-section-height); margin: var(--ui-space-1) 0 0; opacity: 1; transform: translateY(0); pointer-events: auto; }
.ui-sidebar__subitem { gap: var(--ui-space-2); font-weight: var(--ui-font-weight-medium); }
.ui-sidebar__subitem-content { min-width: 0; display: flex; flex: 1 1 auto; align-items: center; gap: var(--ui-space-2); }
.ui-sidebar__subitem-prefix { flex: 0 0 auto; color: var(--ui-color-text); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-16); }
.ui-sidebar__subitem-divider { width: 1px; height: 16px; flex: 0 0 1px; background: var(--ui-color-divider); }
.ui-sidebar__subitem-secondary { min-width: 0; overflow: hidden; color: var(--ui-color-secondary); text-overflow: ellipsis; white-space: nowrap; }
.ui-sidebar__more { position: static; }
/* top is measured on open, see positionSidebarMore. The fallback keeps a
   statically rendered moreOpen card from stacking the menu on the header. */
.ui-sidebar__more-menu { width: 292px; display: none; position: absolute; z-index: 20; top: 50%; left: var(--ui-space-4); overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); }
.ui-sidebar__more.is-open .ui-sidebar__more-menu { display: grid; }
.ui-sidebar__more-row { min-width: 0; display: flex; align-items: center; gap: var(--ui-space-1); border-radius: var(--ui-radius-lg); cursor: grab; }
.ui-sidebar__more-menu-item { width: auto; min-width: 0; flex: 1 1 auto; min-height: 40px; display: flex; align-items: center; gap: var(--ui-space-2); border: 0; border-radius: var(--ui-radius-lg); padding: var(--ui-space-2); color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); text-align: left; cursor: pointer; }
.ui-sidebar__more-menu-item:hover, .ui-sidebar__more-menu-item:focus-visible { background: var(--ui-color-divider); }
.ui-sidebar__more-menu-item span { flex: 1 1 auto; }
.ui-sidebar__pin-toggle { width: 24px; height: 24px; display: grid; flex: 0 0 24px; place-items: center; border: 0; border-radius: var(--ui-radius-md); padding: 0; color: var(--ui-color-text); background: transparent; opacity: 0; transition: opacity 120ms ease, background 120ms ease; cursor: pointer; }
.ui-sidebar__pin-toggle-icon { width: 24px; height: 24px; display: block; }
.ui-sidebar__nav-row.is-pinnable:hover .ui-sidebar__pin-toggle, .ui-sidebar__nav-row .ui-sidebar__pin-toggle:focus-visible, .ui-sidebar__more-row:hover .ui-sidebar__pin-toggle, .ui-sidebar__more-row .ui-sidebar__pin-toggle:focus-visible { opacity: 1; }
.ui-sidebar__pin-toggle:hover, .ui-sidebar__pin-toggle:focus-visible { background: var(--ui-color-divider); }
.ui-sidebar__more-empty { margin: var(--ui-space-2); color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-sidebar__more-divider { height: 1px; margin: var(--ui-space-2) 0; background: var(--ui-color-divider); }
.ui-sidebar__footer { height: 72px; flex: 0 0 72px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--ui-color-divider); padding: 0 var(--ui-space-4); }
.ui-sidebar.is-collapsed { width: 72px; flex-basis: 72px; align-items: center; }
.ui-sidebar.is-collapsed .ui-sidebar__header { width: 100%; justify-content: center; padding: 0; }
.ui-sidebar.is-collapsed .ui-sidebar__header > .ui-tooltip-wrap:has(.ui-sidebar__brand) { width: 40px; height: 40px; }
.ui-sidebar.is-collapsed .ui-sidebar__header > .ui-tooltip-wrap:has(.ui-sidebar__utility) { display: none; }
.ui-sidebar.is-collapsed .ui-sidebar__brand { width: 40px; height: 40px; justify-content: center; cursor: pointer; }
.ui-sidebar.is-collapsed .ui-sidebar__brand:hover, .ui-sidebar.is-collapsed .ui-sidebar__brand:focus-visible { border-radius: var(--ui-radius-md); background: var(--ui-color-divider); }
.ui-sidebar.is-collapsed .ui-sidebar__brand img { width: 20px; }
.ui-sidebar.is-collapsed .ui-sidebar__brand-wordmark, .ui-sidebar.is-collapsed .ui-sidebar__brand-plus { display: none; }
.ui-sidebar.is-collapsed .ui-sidebar__brand-mark { width: 20px; height: 32px; display: block; }
.ui-sidebar.is-collapsed .ui-sidebar__brand:hover .ui-sidebar__brand-mark, .ui-sidebar.is-collapsed .ui-sidebar__brand:focus-visible .ui-sidebar__brand-mark { display: none; }
.ui-sidebar.is-collapsed .ui-sidebar__brand:hover .ui-sidebar__brand-expand, .ui-sidebar.is-collapsed .ui-sidebar__brand:focus-visible .ui-sidebar__brand-expand { width: 24px; height: 24px; display: block; }
.ui-sidebar.is-collapsed .ui-sidebar__utility { display: none; }
.ui-sidebar.is-collapsed .ui-sidebar__scroll { width: 100%; padding: var(--ui-space-4) var(--ui-space-3); }
.ui-sidebar.is-collapsed .ui-sidebar__nav { justify-items: center; }
.ui-sidebar.is-collapsed .ui-sidebar__nav-row { width: 40px; justify-content: center; }
.ui-sidebar.is-collapsed .ui-sidebar__item { width: 40px; height: 40px; min-height: 40px; justify-content: center; gap: 0; padding: var(--ui-space-2); }
.ui-sidebar.is-collapsed .ui-sidebar__pin-toggle { display: none; }
/* sticky={false}: the shell scrolls with the page. */
.ui-sidebar.is-flow { position: relative; top: auto; z-index: auto; align-self: auto; }
.ui-top-nav.is-flow { position: relative; top: auto; z-index: auto; }
.ui-sidebar.is-collapsed .ui-sidebar__item span, .ui-sidebar.is-collapsed .ui-sidebar__section { display: none; }
/* The rail stacks its footer, wallet above avatar, rather than dropping the
   wallet. It used to be display:none — which lost the balance entirely, and
   the balance is the number the footer exists to show. Icon-only, because the
   rail is 72px and the amount does not fit; the label returns when it opens. */
.ui-sidebar.is-collapsed .ui-sidebar__footer { width: 100%; height: auto; flex: 0 0 auto; flex-direction: column; gap: var(--ui-space-2); justify-content: center; padding: var(--ui-space-2) 0; }
.ui-sidebar.is-collapsed .ui-sidebar__footer .ui-button { width: 40px; min-width: 0; padding: 0; }
.ui-sidebar.is-collapsed .ui-sidebar__footer .ui-button__label { display: none; }

.ui-statistic { min-width: 0; display: grid; align-content: start; gap: var(--ui-space-1); color: var(--ui-color-text); }
.ui-statistic__title, .ui-statistic__description { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-statistic__value { color: var(--ui-color-title); font-size: var(--ui-font-size-28); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-34); }
.ui-statistic__prefix, .ui-statistic__suffix { font-size: var(--ui-font-size-16); line-height: var(--ui-line-height-24); }
.ui-statistic__prefix { margin-right: var(--ui-space-1); }
.ui-statistic__suffix { margin-left: var(--ui-space-1); }
.ui-statistic__description { margin: 0; }
.ui-statistic__skeleton { display: block; overflow: hidden; border-radius: var(--ui-radius-md); background: var(--ui-color-hover); }
.ui-statistic.is-loading .ui-statistic__skeleton { background: var(--ui-gradient-skeleton); background-size: 400% 100%; animation: ui-skeleton-loading 1.4s ease infinite; }
.ui-statistic__skeleton--value { width: min(100%, 104px); height: var(--ui-line-height-28); }
.ui-statistic__skeleton--description { width: min(100%, 76px); height: 12px; margin-top: var(--ui-space-1); }

.ui-table { width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-card); }
.ui-table__scroll { width: 100%; overflow-x: auto; }
.ui-table table { width: 100%; min-width: 560px; border-collapse: collapse; color: var(--ui-color-text); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); text-align: left; }
.ui-table__caption { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ui-table__head { height: 40px; color: var(--ui-color-secondary); background: var(--ui-color-divider); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); }
.ui-table__head, .ui-table__cell { border-bottom: 1px solid var(--ui-color-divider); padding: var(--ui-space-3) var(--ui-space-4); vertical-align: middle; }
.ui-table tbody tr:last-child .ui-table__cell, .ui-table tbody tr:last-child .ui-table__empty { border-bottom: 0; }
.ui-table__cell { min-height: 48px; font-weight: var(--ui-font-weight-medium); }
.ui-table__cell[scope="row"] { color: var(--ui-color-title); font-weight: var(--ui-font-weight-bold); }
.ui-table tbody tr:hover { background: var(--ui-color-divider); }
.ui-table__head.is-center, .ui-table__cell.is-center { text-align: center; }
.ui-table__head.is-right, .ui-table__cell.is-right { text-align: right; }
.ui-table--compact .ui-table__head { height: 32px; }
.ui-table--compact .ui-table__head, .ui-table--compact .ui-table__cell { padding: var(--ui-space-2) var(--ui-space-3); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-table__empty { min-height: 72px; border-bottom: 0; padding: var(--ui-space-6); color: var(--ui-color-secondary); text-align: center; }
.ui-table__skeleton { width: min(100%, 112px); height: 12px; display: block; border-radius: var(--ui-radius-xs); background: var(--ui-color-divider); }
.ui-table[aria-busy="true"] tbody tr:hover { background: transparent; }

.ui-timeline { width: min(100%, 600px); min-width: 0; }
.ui-timeline__list { display: grid; gap: var(--ui-space-4); margin: 0; padding: 0; list-style: none; }
.ui-timeline__item { min-height: 44px; position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--ui-space-3); }
.ui-timeline__item:not(:last-child)::before { width: 1px; position: absolute; top: 12px; bottom: calc(var(--ui-space-4) * -1); left: 6px; background: var(--ui-color-divider); content: ""; }
.ui-timeline__dot { width: 12px; height: 12px; box-sizing: border-box; position: relative; z-index: 1; align-self: start; margin-top: var(--ui-space-1); display: grid; place-items: center; border: 2px solid var(--ui-color-text); border-radius: var(--ui-radius-full); background: var(--ui-color-text); }
.ui-timeline__dot--info { border-color: var(--ui-color-info); background: var(--ui-color-info); }
.ui-timeline__dot--success { border-color: var(--ui-color-success); background: var(--ui-color-success); }
.ui-timeline__dot--warning { border-color: var(--ui-color-warning); background: var(--ui-color-warning); }
.ui-timeline__dot--error { border-color: var(--ui-color-error); background: var(--ui-color-error); }
.ui-timeline__dot:not(.has-custom-dot):not(.ui-timeline__dot--pending)::after { width: 4px; height: 4px; border-radius: var(--ui-radius-full); background: var(--ui-color-card); content: ""; }
.ui-timeline__dot--pending { border-color: var(--ui-color-disabled); border-top-color: var(--ui-color-text); background: var(--ui-color-card); animation: ui-spin .8s linear infinite; }
.ui-timeline__dot.has-custom-dot { width: 16px; height: 16px; margin-top: 2px; border: 0; border-radius: 0; background: transparent; }
.ui-timeline__dot-icon { width: 16px; height: 16px; }
.ui-timeline__copy { min-width: 0; display: grid; align-content: start; gap: var(--ui-space-1); }
.ui-timeline__copy strong { color: var(--ui-color-title); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-timeline__copy > span:not(.ui-timeline__label), .ui-timeline__label { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-timeline--left.has-labels .ui-timeline__item { grid-template-columns: 92px 12px minmax(0, 1fr); }
.ui-timeline--left.has-labels .ui-timeline__item:not(:last-child)::before { left: calc(92px + var(--ui-space-3) + (12px / 2)); }
.ui-timeline--left.has-labels .ui-timeline__label { grid-column: 1; text-align: right; }
.ui-timeline--left.has-labels .ui-timeline__dot { grid-column: 2; }
.ui-timeline--left.has-labels .ui-timeline__copy { grid-column: 3; }
.ui-timeline--right.has-labels .ui-timeline__item { grid-template-columns: minmax(0, 1fr) 12px 92px; }
.ui-timeline--right.has-labels .ui-timeline__item:not(:last-child)::before { right: calc(92px + var(--ui-space-3) + (12px / 2)); left: auto; }
.ui-timeline--right.has-labels .ui-timeline__label { grid-column: 3; text-align: left; }
.ui-timeline--right.has-labels .ui-timeline__dot { grid-column: 2; }
.ui-timeline--right.has-labels .ui-timeline__copy { grid-column: 1; text-align: right; }
.ui-timeline--alternate { width: min(100%, 720px); }
.ui-timeline--alternate .ui-timeline__item { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); }
.ui-timeline--alternate .ui-timeline__item:not(:last-child)::before { left: 50%; transform: translateX(-50%); }
.ui-timeline--alternate .ui-timeline__dot { grid-column: 2; }
.ui-timeline--alternate .ui-timeline__copy { grid-column: 3; }
.ui-timeline--alternate .ui-timeline__item.is-left .ui-timeline__copy { grid-column: 1; grid-row: 1; text-align: right; }

.ui-top-nav,
.ui-top-nav-context__trigger,
.ui-top-nav-context__option,
.ui-top-nav-search__clear,
.ui-top-nav-search__filter,
.ui-top-nav-search__input { font: inherit; }
/* Sticky by default; see .ui-sidebar above. Sits under the sidebar so a
   sidebar flyout crossing into the content column paints over the nav. */
/* The bar spans what holds it. Without a width it is a grid sized by its
   content, so in any flex context it shrank and fell into the phone layout
   while there was room to spare. */
.ui-top-nav { container-type: inline-size; width: 100%; min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr); align-items: center; gap: var(--ui-space-4); position: sticky; top: 0; z-index: var(--ui-layer-top-nav, 40); border-bottom: 1px solid var(--ui-color-divider); padding: 0 var(--ui-space-6); color: var(--ui-color-text); background: var(--ui-color-card); }
.ui-top-nav__leading, .ui-top-nav__trailing { min-width: 0; display: flex; align-items: center; }
.ui-top-nav__center { min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.ui-top-nav__trailing { justify-content: flex-end; }
/* Measured by its own width, not the window's: this bar is as likely to sit in
   an 800px card as across a phone, and a viewport breakpoint cannot tell the
   difference. Where the context, the search and a written action stop fitting on
   one line, the action keeps its icon and drops its words — it is the widest
   thing in the row that can lose something and still be understood. The name it
   answers to lives on the aria-label, so hiding the text costs nothing to a
   screen reader. */
@container (max-width: 880px) {
  .ui-top-nav__trailing .ui-button__label { display: none; }
  .ui-top-nav__trailing .ui-button,
  .ui-top-nav__trailing .ui-button.has-leading-icon,
  .ui-top-nav__trailing .ui-button.has-trailing-icon { width: 40px; min-width: 40px; padding: 0; }
  .ui-top-nav__trailing .ui-button--32,
  .ui-top-nav__trailing .ui-button--32.has-leading-icon,
  .ui-top-nav__trailing .ui-button--32.has-trailing-icon { width: 32px; min-width: 32px; }
  .ui-top-nav__trailing .ui-button--48,
  .ui-top-nav__trailing .ui-button--48.has-leading-icon,
  .ui-top-nav__trailing .ui-button--48.has-trailing-icon { width: 48px; min-width: 48px; }
  /* The signed-in action can fall back to its icon because it has one. The
     logged-out action is words only — "Sign up / Log in" reduced to a blank
     40px circle is not a smaller control, it is an unreadable one. This bar
     answers narrow width by changing shape at 744px instead. */
  .ui-top-nav--logged-out .ui-top-nav__trailing .ui-button__label { display: inline; }
  .ui-top-nav--logged-out .ui-top-nav__trailing .ui-button,
  .ui-top-nav--logged-out .ui-top-nav__trailing .ui-button.has-leading-icon,
  .ui-top-nav--logged-out .ui-top-nav__trailing .ui-button.has-trailing-icon { width: auto; min-width: 0; padding: 0 var(--ui-space-6); }
}
/* The logged-out bar: a mark at one end, everything else collected at the
   other, and nothing in the middle. The centre column is not narrowed here, it
   is removed — a 400px empty track would push the row off its own right inset. */
.ui-top-nav--logged-out { grid-template-columns: auto minmax(0, 1fr); }
.ui-top-nav--logged-out .ui-top-nav__center { display: none; }
.ui-top-nav--logged-out .ui-top-nav__leading, .ui-top-nav--logged-out .ui-top-nav__trailing { gap: var(--ui-space-4); }
.ui-top-nav--logged-out .ui-top-nav__trailing .ui-button { padding: 0 var(--ui-space-6); }
.ui-top-nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* Height only: the mark keeps its own aspect, which is what turns the desktop
   56x40 into the phone bar's 44.8x32 without a second measurement. */
.ui-top-nav__brand-mark { width: auto; height: 40px; }
.ui-top-nav__links { min-width: 0; display: flex; align-items: center; gap: var(--ui-space-4); }
.ui-top-nav__link { color: var(--ui-color-placeholder); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); text-decoration: none; white-space: nowrap; transition: color 120ms ease; }
.ui-top-nav__link:hover { color: var(--ui-color-text); }
.ui-top-nav__link:focus-visible { outline: 0; border-radius: var(--ui-radius-xs); color: var(--ui-color-text); box-shadow: 0 0 0 1px var(--ui-color-border); }
.ui-top-nav--logged-out .ui-top-nav-context__trigger { border-radius: var(--ui-radius-lg); color: var(--ui-color-placeholder); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); }
.ui-top-nav__menu, .ui-top-nav__action-compact { display: none; }
.ui-top-nav__action { display: inline-flex; }
@container (max-width: 743px) {
  .ui-top-nav--logged-out { min-height: 56px; padding: 0 var(--ui-space-4); }
  .ui-top-nav--logged-out .ui-top-nav__brand-mark { height: 32px; }
  .ui-top-nav--logged-out .ui-top-nav__menu { display: inline-flex; }
  .ui-top-nav--logged-out .ui-top-nav-context,
  .ui-top-nav--logged-out .ui-top-nav__links,
  .ui-top-nav--logged-out .ui-top-nav__action { display: none; }
  .ui-top-nav--logged-out .ui-top-nav__action-compact { display: inline-flex; }
}
.ui-top-nav-menu { min-height: 100%; display: flex; flex-direction: column; }
.ui-top-nav-menu__list { display: grid; align-content: start; gap: var(--ui-space-3); }
.ui-top-nav-menu__item { min-height: 40px; display: flex; align-items: center; gap: var(--ui-space-2); border-radius: var(--ui-radius-md); padding: var(--ui-space-2); color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-24); text-decoration: none; }
.ui-top-nav-menu__item:hover, .ui-top-nav-menu__item:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-top-nav-menu__item-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.ui-top-nav-menu__foot { display: grid; gap: var(--ui-space-4); margin-top: auto; padding-top: var(--ui-space-6); }
.ui-top-nav-menu__foot .ui-button { width: 100%; }
.ui-top-nav-menu__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-2); }
.ui-top-nav-context { min-width: 0; position: relative; }
/* Capped at the column it sits in: as an inline-flex it was sized by its content,
   so a long context name ("English Teachers") ran straight under the action
   button instead of ellipsising. */
.ui-top-nav-context__trigger { max-width: 100%; min-width: 0; height: 40px; display: inline-flex; align-items: center; gap: var(--ui-space-2); border: 0; border-radius: var(--ui-radius-full); padding: 0 var(--ui-space-2); color: var(--ui-color-title); background: transparent; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease; }
.ui-top-nav-context__trigger:hover, .ui-top-nav-context__trigger[aria-expanded="true"] { background: var(--ui-color-divider); }
.ui-top-nav-context__trigger[aria-expanded="true"]:hover { background: var(--ui-color-hover); }
.ui-top-nav-context__trigger:focus-visible { outline: 0; background: var(--ui-color-divider); box-shadow: inset 0 0 0 1px var(--ui-color-border); }
.ui-top-nav-context__flag, .ui-top-nav-context__option-flag { width: 24px; height: 24px; flex: 0 0 24px; border: 0; border-radius: var(--ui-radius-full); box-shadow: 0 0 0 1px var(--ui-color-border); object-fit: cover; }
.ui-top-nav-context__arrow { width: 24px; height: 24px; flex: 0 0 24px; transition: transform 120ms ease; }
.ui-top-nav-context__trigger[aria-expanded="true"] .ui-top-nav-context__arrow { transform: rotate(180deg); }
.ui-top-nav-context__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-top-nav-context__menu { width: 208px; display: none; position: absolute; z-index: 20; top: calc(100% + var(--ui-space-2)); left: 0; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-xl); padding: var(--ui-space-2); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); }
.ui-top-nav-context__menu.is-open { display: grid; gap: var(--ui-space-1); }
.ui-top-nav-context__option { min-height: 40px; display: flex; align-items: center; gap: var(--ui-space-3); border: 0; border-radius: var(--ui-radius-lg); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: transparent; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; }
.ui-top-nav-context__option:hover, .ui-top-nav-context__option:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-top-nav-search { width: 400px; height: 40px; display: flex; align-items: center; position: absolute; left: 50%; min-width: 0; border: 1px solid transparent; border-radius: var(--ui-radius-full); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-divider); transform: translateX(-50%); transition: width 160ms ease, border-color 120ms ease, background 120ms ease; }
.ui-top-nav-search:not(.is-input-focused):not(.has-query):not(.is-disabled):hover { background: var(--ui-color-hover); }
.ui-top-nav-search.is-input-focused, .ui-top-nav-search.has-query { width: 520px; z-index: 2; border-color: var(--ui-color-border); background: var(--ui-color-card); }
.ui-top-nav-search.is-disabled { color: var(--ui-color-disabled); background: var(--ui-color-divider); }
.ui-top-nav-search__icon { width: 24px; height: 24px; flex: 0 0 24px; }
.ui-top-nav-search__input { min-width: 0; flex: 1 1 auto; height: 100%; border: 0; padding: 0 var(--ui-space-2); color: var(--ui-color-text); background: transparent; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); outline: 0; }
.ui-top-nav-search__input::placeholder { color: var(--ui-color-placeholder); }
.ui-top-nav-search__input:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-top-nav-search__clear { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-full); padding: 0; color: var(--ui-color-secondary); background: transparent; cursor: pointer; }
.ui-top-nav-search__clear[hidden] { display: none; }
.ui-top-nav-search__clear:hover, .ui-top-nav-search__clear:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-top-nav-search__clear-icon { width: 16px; height: 16px; }
.ui-top-nav-search__filter { height: 24px; display: inline-flex; align-items: center; gap: var(--ui-space-1); position: relative; flex: 0 0 auto; border: 0; border-left: 1px solid var(--ui-color-divider); margin-left: var(--ui-space-2); padding: 0 0 0 var(--ui-space-3); color: var(--ui-color-text); background: transparent; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); white-space: nowrap; cursor: pointer; transition: color 180ms ease; }
.ui-top-nav-search__filter:hover, .ui-top-nav-search__filter.is-filtered { color: var(--ui-color-title); }
.ui-top-nav-search__filter:focus-visible { outline: 0; color: var(--ui-color-title); box-shadow: inset 0 0 0 1px var(--ui-color-border); border-radius: var(--ui-radius-md); }
.ui-top-nav-search__filter:disabled, .ui-top-nav-search__clear:disabled { cursor: not-allowed; }
.ui-top-nav-search__filter-icon { width: 24px; height: 24px; }
.ui-top-nav-search__filter i { width: 8px; height: 8px; position: absolute; top: 0; left: 28px; border-radius: var(--ui-radius-full); opacity: 0; transform: scale(.5); background: var(--ui-color-success); transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1); }
.ui-top-nav-search__filter.is-filtered i { opacity: 1; transform: scale(1); animation: ui-top-nav-filter-cue-in 240ms cubic-bezier(.2, .8, .2, 1); }
.ui-top-nav-search__filter.is-filtered span { animation: ui-top-nav-filter-label-in 180ms ease-out; }
@keyframes ui-top-nav-filter-cue-in { 0% { opacity: 0; transform: scale(.35); } 72% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ui-top-nav-filter-label-in { from { opacity: .5; transform: translateX(-2px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .ui-top-nav-search__filter.is-filtered i, .ui-top-nav-search__filter.is-filtered span { animation: none; } .ui-top-nav-search__filter, .ui-top-nav-search__filter i { transition: none; } }
@media (min-width: 761px) and (max-width: 920px) { .ui-top-nav-search.is-input-focused, .ui-top-nav-search.has-query { width: 400px; } }
@container (max-width: 620px) { .ui-top-nav { grid-template-columns: minmax(0, 1fr) auto; padding: var(--ui-space-3) var(--ui-space-4); } .ui-top-nav__center { width: 100%; grid-column: 1 / -1; grid-row: 2; display: grid; justify-items: center; position: static; } .ui-top-nav-search, .ui-top-nav-search.is-input-focused, .ui-top-nav-search.has-query { width: 100%; position: static; left: auto; transform: none; } }

.ui-modal-stage { width: 100%; min-height: 400px; position: relative; display: grid; place-items: center; overflow: visible; background: var(--ui-color-divider); }
.ui-modal-stage--inline { width: auto; min-height: 0; display: inline-flex; position: static; background: transparent; }
.ui-modal__layer { position: absolute; inset: 0; display: none; place-items: center; padding: var(--ui-space-6); background: var(--ui-color-modal-mask); }
.ui-modal-stage--inline .ui-modal__layer { position: fixed; z-index: var(--ui-layer-overlay, 60); }
.ui-modal-stage.is-open .ui-modal__layer { display: grid; }
.ui-modal__mask { position: absolute; inset: 0; border: 0; padding: 0; background: transparent; cursor: default; }
.ui-modal { --ui-modal-width: 520px; width: min(var(--ui-modal-width), calc(100% - var(--ui-space-6))); min-width: 0; max-width: calc(100vw - 48px); position: relative; z-index: 1; overflow: hidden; border-radius: var(--ui-radius-lg); background: var(--ui-color-card); box-shadow: var(--ui-shadow-xl); }
.ui-modal-stage--inline .ui-modal { max-height: calc(100dvh - var(--ui-space-10)); display: flex; flex-direction: column; }
.ui-modal--wide { --ui-modal-width: 744px; }
.ui-modal__header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); border-bottom: 1px solid var(--ui-color-divider); padding: 0 var(--ui-space-6); }
.ui-modal__header h3 { min-width: 0; margin: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-16); line-height: var(--ui-line-height-24); overflow-wrap: anywhere; }
.ui-modal__header.is-title-centered { position: relative; justify-content: center; }
.ui-modal__header.is-title-centered h3 { text-align: center; }
.ui-modal__header.is-title-centered .ui-modal__close { position: absolute; right: var(--ui-space-6); }
.ui-modal__close { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; border: 0; border-radius: var(--ui-radius-md); padding: 0; background: transparent; cursor: pointer; }
.ui-modal__close:not(:disabled):hover { background: var(--ui-color-divider); }
.ui-modal__close-icon { width: 24px; height: 24px; }
.ui-modal__body { min-width: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; padding: var(--ui-space-6); color: var(--ui-color-text); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-22); }
.ui-modal-stage--inline .ui-modal__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* The framed stage caps the dialog the same way the page does. Only the inline
   stage had a ceiling, so a tall dialog — the teacher's week is fourteen rows —
   grew straight out of the frame it was being shown in. The body scrolls; the
   header and footer stay put. */
.ui-modal-stage--demo .ui-modal { max-height: calc(100% - var(--ui-space-6)); display: flex; flex-direction: column; }
.ui-modal-stage--demo .ui-modal__body { min-height: 0; overscroll-behavior: contain; }
.ui-modal__footer { display: flex; justify-content: flex-end; gap: var(--ui-space-2); border-top: 1px solid var(--ui-color-divider); padding: var(--ui-space-4) var(--ui-space-6); }
html.ui-modal-scroll-locked, body.ui-modal-scroll-locked { overflow: hidden; }
@media (max-width: 640px) { .ui-modal__layer { padding: var(--ui-space-4); } .ui-modal__header, .ui-modal__footer { padding-inline: var(--ui-space-4); } .ui-modal__body { padding: var(--ui-space-4); } }

.ui-popup { position: relative; display: inline-flex; align-items: flex-start; }
.ui-popup__surface { width: min(320px, calc(100vw - var(--ui-space-6))); min-width: 0; overflow-x: hidden; position: absolute; z-index: 20; top: calc(100% + var(--ui-space-3)); left: 50%; display: grid; gap: var(--ui-space-1); box-sizing: border-box; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); color: var(--ui-color-text); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); opacity: 0; pointer-events: none; transform: translate(-50%, -4px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease; visibility: hidden; }
.ui-popup__surface[data-placement="top"] { top: auto; bottom: calc(100% + var(--ui-space-3)); transform: translate(-50%, 4px); }
.ui-popup__surface[data-placement="left"] { top: 50%; right: calc(100% + var(--ui-space-3)); bottom: auto; left: auto; transform: translate(4px, -50%); }
.ui-popup__surface[data-placement="right"] { top: 50%; right: auto; bottom: auto; left: calc(100% + var(--ui-space-3)); transform: translate(-4px, -50%); }
.ui-popup.is-open > .ui-popup__surface { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); visibility: visible; }
.ui-popup.is-open > .ui-popup__surface[data-placement="top"] { transform: translate(-50%, 0); }
.ui-popup.is-open > .ui-popup__surface[data-placement="left"], .ui-popup.is-open > .ui-popup__surface[data-placement="right"] { transform: translate(0, -50%); }
.ui-popup__surface h3, .ui-popup__surface p { margin: 0; }
.ui-popup__surface h3 { color: var(--ui-color-title); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-popup__surface p { overflow-wrap: anywhere; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
/* The title and its body are one block — 4px apart, not 12 — and the actions are
   the break below them. Before this, every child of the surface was 12px from the
   next, so a two-line popover read as three loose paragraphs. */
.ui-popup__actions { display: flex; justify-content: flex-end; gap: var(--ui-space-2); margin-top: var(--ui-space-2); }
.ui-popup__actions .ui-button { flex: 0 0 auto; white-space: nowrap; }

.ui-popconfirm { position: relative; display: inline-flex; align-items: flex-start; }
.ui-popconfirm__surface { width: min(320px, calc(100vw - var(--ui-space-6))); min-width: 0; overflow-x: hidden; position: absolute; z-index: 20; top: calc(100% + var(--ui-space-3)); left: 50%; display: grid; gap: var(--ui-space-1); box-sizing: border-box; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); color: var(--ui-color-text); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); opacity: 0; pointer-events: none; transform: translate(-50%, -4px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease; visibility: hidden; }
.ui-popconfirm__surface[data-placement="top"] { top: auto; bottom: calc(100% + var(--ui-space-3)); transform: translate(-50%, 4px); }
.ui-popconfirm__surface[data-placement="left"] { top: 50%; right: calc(100% + var(--ui-space-3)); bottom: auto; left: auto; transform: translate(4px, -50%); }
.ui-popconfirm__surface[data-placement="right"] { top: 50%; right: auto; bottom: auto; left: calc(100% + var(--ui-space-3)); transform: translate(-4px, -50%); }
.ui-popconfirm.is-open > .ui-popconfirm__surface { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); visibility: visible; }
.ui-popconfirm.is-open > .ui-popconfirm__surface[data-placement="top"] { transform: translate(-50%, 0); }
.ui-popconfirm.is-open > .ui-popconfirm__surface[data-placement="left"], .ui-popconfirm.is-open > .ui-popconfirm__surface[data-placement="right"] { transform: translate(0, -50%); }
.ui-popconfirm__surface h3, .ui-popconfirm__surface p { margin: 0; }
.ui-popconfirm__surface h3 { color: var(--ui-color-title); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-popconfirm__surface p { overflow-wrap: anywhere; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-popconfirm__actions { display: flex; justify-content: flex-end; gap: var(--ui-space-2); margin-top: var(--ui-space-2); }
.ui-popconfirm__actions .ui-button { flex: 0 0 auto; min-width: max-content; white-space: nowrap; }

/* The track takes the width of what holds it: a filter column decides how wide a
   slider is, and one that stops at 480px leaves a gap nobody asked for. */
.ui-slider { width: 100%; display: grid; gap: var(--ui-space-3); }
.ui-slider__row { display: flex; align-items: center; gap: var(--ui-space-3); }
.ui-slider__control { min-width: 0; height: 20px; flex: 1; position: relative; display: block; }
.ui-slider__control::before, .ui-slider__control::after, .ui-slider__range::before, .ui-slider__range::after { height: 4px; position: absolute; top: 8px; border-radius: var(--ui-radius-full); content: ""; pointer-events: none; }
.ui-slider__control::before, .ui-slider__range::before { right: 0; left: 0; background: var(--ui-color-border); }
.ui-slider__control::after { width: var(--ui-slider-progress, 0%); left: 0; background: var(--ui-color-text); }
.ui-slider.is-reversed .ui-slider__control::after { right: 0; left: auto; }
.ui-slider__value { width: 28px; flex: 0 0 28px; color: var(--ui-color-title); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); text-align: right; white-space: nowrap; }
.ui-slider__value--range { width: 44px; flex-basis: 44px; }
.slider-with-marks { width: 100%; display: grid; gap: var(--ui-space-2); }
.slider-with-marks .ui-slider { width: 100%; }
.ui-slider__marks-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 28px; column-gap: var(--ui-space-3); }
.ui-slider__marks-row.is-range { grid-template-columns: minmax(0, 1fr) 44px; }
.ui-slider__marks { min-width: 0; display: flex; justify-content: space-between; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-16); }
.ui-slider__tooltip { min-width: 28px; position: absolute; z-index: 1; bottom: calc(100% + var(--ui-space-2)); left: var(--ui-slider-progress, 0%); transform: translateX(-50%) translateY(2px); border-radius: var(--ui-radius-xs); padding: 2px var(--ui-space-2); color: var(--ui-color-card); background: var(--ui-color-title); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); opacity: 0; pointer-events: none; }
.ui-slider.is-reversed .ui-slider__tooltip { left: calc(100% - var(--ui-slider-progress, 0%)); }
.ui-slider.has-tooltip .ui-slider__row { padding-top: var(--ui-space-4); }
.ui-slider__control:hover .ui-slider__tooltip, .ui-slider__control:focus-within .ui-slider__tooltip, .ui-slider.is-hover .ui-slider__tooltip, .ui-slider.is-focus .ui-slider__tooltip { transform: translateX(-50%); opacity: 1; }
.ui-slider input { width: 100%; height: 20px; position: relative; z-index: 2; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.ui-slider input::-webkit-slider-runnable-track { width: 100%; height: 4px; border-radius: var(--ui-radius-full); background: transparent; }
.ui-slider input::-webkit-slider-thumb { width: 16px; height: 16px; box-sizing: border-box; margin-top: calc((4px - 16px) / 2); appearance: none; -webkit-appearance: none; border: 2px solid var(--ui-color-text); border-radius: var(--ui-radius-full); background: var(--ui-color-card); box-shadow: var(--ui-shadow-thumb); }
.ui-slider input::-moz-range-track, .ui-slider input::-moz-range-progress { height: 4px; border-radius: var(--ui-radius-full); background: transparent; }
.ui-slider input::-moz-range-thumb { width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--ui-color-text); border-radius: var(--ui-radius-full); background: var(--ui-color-card); box-shadow: var(--ui-shadow-thumb); }
.ui-slider input:not(:disabled):hover::-webkit-slider-thumb, .ui-slider input:not(:disabled):active::-webkit-slider-thumb, .ui-slider input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ui-shadow-thumb-focus); }
.ui-slider input:not(:disabled):hover::-moz-range-thumb, .ui-slider input:not(:disabled):active::-moz-range-thumb, .ui-slider input:focus-visible::-moz-range-thumb { box-shadow: var(--ui-shadow-thumb-focus); }
.ui-slider input:focus-visible { outline: 0; }
.ui-slider.is-disabled .ui-slider__control::before { background: var(--ui-color-divider); }
.ui-slider.is-disabled .ui-slider__control::after { background: var(--ui-color-disabled); }
.ui-slider input:disabled { cursor: not-allowed; }
.ui-slider input:disabled::-webkit-slider-thumb { border-color: var(--ui-color-disabled); box-shadow: none; }
.ui-slider input:disabled::-moz-range-thumb { border-color: var(--ui-color-disabled); box-shadow: none; }
.ui-slider input.is-reversed { direction: rtl; }
.ui-slider__range { min-width: 0; height: 20px; flex: 1; position: relative; cursor: pointer; touch-action: none; }
.ui-slider__range::after { right: calc(100% - var(--ui-slider-range-end, 100%)); left: var(--ui-slider-range-start, 0%); background: var(--ui-color-text); }
.ui-slider__range input { position: absolute; inset: 0; pointer-events: none; }
.ui-slider__range input[data-range-handle="lower"] { z-index: 3; }
.ui-slider__range input[data-range-handle="upper"] { z-index: 4; }
.ui-slider__range input::-webkit-slider-thumb, .ui-slider__range input::-moz-range-thumb { pointer-events: auto; }
.ui-slider-vertical { width: 40px; height: 160px; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: var(--ui-space-2); }
.ui-slider-vertical__control { width: 20px; height: 136px; position: relative; }
.ui-slider-vertical__control::before, .ui-slider-vertical__control::after { width: 4px; position: absolute; left: 8px; border-radius: var(--ui-radius-full); content: ""; pointer-events: none; }
.ui-slider-vertical__control::before { top: 0; bottom: 0; background: var(--ui-color-border); }
.ui-slider-vertical__control::after { height: var(--ui-slider-progress, 0%); bottom: 0; background: var(--ui-color-text); }
.ui-slider-vertical__control input { width: 136px; height: 20px; position: absolute; z-index: 2; top: 58px; left: -58px; margin: 0; appearance: none; -webkit-appearance: none; transform: rotate(-90deg); transform-origin: center; background: transparent; cursor: pointer; }
.ui-slider-vertical__control input::-webkit-slider-runnable-track { width: 100%; height: 4px; border-radius: var(--ui-radius-full); background: transparent; }
.ui-slider-vertical__control input::-webkit-slider-thumb { width: 16px; height: 16px; box-sizing: border-box; margin-top: calc((4px - 16px) / 2); appearance: none; -webkit-appearance: none; border: 2px solid var(--ui-color-text); border-radius: var(--ui-radius-full); background: var(--ui-color-card); box-shadow: var(--ui-shadow-thumb); }
.ui-slider-vertical__control input::-moz-range-track, .ui-slider-vertical__control input::-moz-range-progress { height: 4px; border-radius: var(--ui-radius-full); background: transparent; }
.ui-slider-vertical__control input::-moz-range-thumb { width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--ui-color-text); border-radius: var(--ui-radius-full); background: var(--ui-color-card); box-shadow: var(--ui-shadow-thumb); }
.ui-slider-vertical__control input:not(:disabled):hover::-webkit-slider-thumb, .ui-slider-vertical__control input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ui-shadow-thumb-focus); }
.ui-slider-vertical__control input:not(:disabled):hover::-moz-range-thumb, .ui-slider-vertical__control input:focus-visible::-moz-range-thumb { box-shadow: var(--ui-shadow-thumb-focus); }
.ui-slider-vertical__control input:focus-visible { outline: 0; }
.ui-slider-vertical__control input:disabled { cursor: not-allowed; }
.ui-slider-vertical__control input:disabled::-webkit-slider-thumb { border-color: var(--ui-color-disabled); box-shadow: none; }
.ui-slider-vertical__control input:disabled::-moz-range-thumb { border-color: var(--ui-color-disabled); box-shadow: none; }
.ui-slider-vertical output { color: var(--ui-color-title); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); }

.ui-panel { width: 100%; min-width: 0; overflow: hidden; border-radius: var(--ui-radius-lg); background: var(--ui-color-card); box-shadow: var(--ui-shadow-md); }
.ui-panel__header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: 0 var(--ui-space-4); color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); }
.ui-panel.has-divider .ui-panel__header { border-bottom: 1px solid var(--ui-color-divider); }
.ui-panel__body { padding: var(--ui-space-4); color: var(--ui-color-text); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-panel--small .ui-panel__header { min-height: 40px; }
.ui-panel--small .ui-panel__body { padding: var(--ui-space-3); }
.ui-panel--large .ui-panel__header { min-height: 56px; }
.ui-panel--large .ui-panel__body { padding: var(--ui-space-6); }

.ui-section-intro { width: min(100%, 720px); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-4); color: var(--ui-color-text); }
.ui-section-intro__copy { min-width: 0; display: grid; gap: var(--ui-space-1); }
.ui-section-intro__eyebrow, .ui-section-intro__description { margin: 0; color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-section-intro__eyebrow { font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-18); }
.ui-section-intro__title { margin: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-24); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-32); }
.ui-section-intro__action { flex: 0 0 auto; }
.ui-section-intro--compact .ui-section-intro__title { font-size: var(--ui-font-size-18); line-height: var(--ui-line-height-24); }
.ui-section-intro--center { align-items: center; flex-direction: column; text-align: center; }
.ui-section-intro--center .ui-section-intro__copy { justify-items: center; }
@media (max-width: 640px) { .ui-section-intro { align-items: flex-start; flex-direction: column; } .ui-section-intro--center { align-items: center; } }

.ui-search { width: 100%; height: 40px; display: flex; align-items: center; gap: var(--ui-space-2); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-full); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-card); }
.ui-search--32 { height: 32px; }
.ui-search--48 { height: 48px; }
.ui-search--rounded { border-radius: var(--ui-radius-lg); }
.ui-search:not(.is-disabled):hover, .ui-search.is-hover { border-color: var(--ui-color-secondary); }
.ui-search:focus-within, .ui-search.is-focus { border-color: var(--ui-color-title); box-shadow: none; }
.ui-search__icon, .ui-search__clear-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.ui-search input { min-width: 0; height: 100%; flex: 1; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-16); outline: 0; }
.ui-search input[type="search"]::-webkit-search-cancel-button, .ui-search input[type="search"]::-webkit-search-decoration { appearance: none; -webkit-appearance: none; }
.ui-search input::placeholder { color: var(--ui-color-placeholder); }
.ui-search__clear { width: 24px; height: 24px; display: grid; flex: 0 0 24px; place-items: center; border: 0; border-radius: var(--ui-radius-full); padding: 0; background: transparent; cursor: pointer; }
.ui-search__clear:hover { background: var(--ui-color-divider); }
.ui-search__clear[hidden] { display: none; }
.ui-search.is-disabled { color: var(--ui-color-disabled); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-search.is-disabled input { cursor: not-allowed; }

.ui-select { width: 100%; position: relative; }
.ui-select__trigger { width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--ui-space-2); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-card); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.ui-select--32 .ui-select__trigger { min-height: 32px; font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-select--40 .ui-select__trigger { min-height: 40px; }
.ui-select--pill .ui-select__trigger { border-radius: var(--ui-radius-full); }
.ui-select--rounded .ui-select__trigger { border-radius: var(--ui-radius-lg); }
.ui-select__value, .ui-select__placeholder { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select__placeholder { color: var(--ui-color-placeholder); }
.ui-select__values { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--ui-space-1); padding: var(--ui-space-1) 0; }
.ui-select__values .ui-tag { max-width: 100%; }
.ui-select__suffix { width: 24px; height: 24px; flex: 0 0 24px; transition: transform 120ms ease; }
.ui-select.is-open .ui-select__suffix { transform: rotate(180deg); }
.ui-select:not(.is-disabled):not(.is-loading):hover .ui-select__trigger, .ui-select.is-hover .ui-select__trigger { border-color: var(--ui-color-secondary); }
.ui-select.is-open .ui-select__trigger, .ui-select:focus-within .ui-select__trigger, .ui-select.is-focus .ui-select__trigger { border-color: var(--ui-color-title); box-shadow: none; outline: 0; }
.ui-select.is-error .ui-select__trigger { border-color: var(--ui-color-primary-hover); background: var(--ui-color-error-surface); }
.ui-select.is-warning .ui-select__trigger { border-color: var(--ui-color-warning); background: var(--ui-color-warning-surface); }
.ui-select.is-disabled .ui-select__trigger { color: var(--ui-color-disabled); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-select.is-loading .ui-select__trigger { color: var(--ui-color-disabled); cursor: wait; }
.ui-select__clear { width: 24px; height: 24px; display: grid; flex: 0 0 24px; place-items: center; border: 0; border-radius: var(--ui-radius-full); padding: 0; background: transparent; cursor: pointer; }
.ui-select__clear:hover, .ui-select__clear:focus-visible { background: var(--ui-color-divider); }
.ui-select__clear[hidden] { display: none; }
.ui-select__clear-icon { width: 16px; height: 16px; opacity: .7; transition: opacity 120ms ease; }
.ui-select__clear:hover .ui-select__clear-icon, .ui-select__clear:focus-visible .ui-select__clear-icon { opacity: 1; }
.ui-select__loading { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--ui-color-border); border-top-color: var(--ui-color-text); border-radius: var(--ui-radius-full); animation: ui-spin .8s linear infinite; }
.ui-select__menu { width: 100%; max-height: 256px; display: none; position: absolute; z-index: 20; top: calc(100% + var(--ui-space-2)); left: 0; overflow-y: auto; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-2); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); }
.ui-select.is-open .ui-select__menu { display: grid; gap: var(--ui-space-1); }
.ui-select__search { height: 36px; display: flex; align-items: center; gap: var(--ui-space-2); border: 1px solid var(--ui-color-divider); border-radius: var(--ui-radius-md); margin-bottom: var(--ui-space-1); padding: 0 var(--ui-space-2); }
.ui-select__search:focus-within { border-color: var(--ui-color-title); box-shadow: none; }
.ui-select__search-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.ui-select__search input { min-width: 0; height: 100%; flex: 1 1 auto; border: 0; padding: 0; color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); outline: 0; }
.ui-select__search input[type="search"]::-webkit-search-cancel-button, .ui-select__search input[type="search"]::-webkit-search-decoration { appearance: none; -webkit-appearance: none; }
.ui-select__search input::placeholder { color: var(--ui-color-placeholder); }
.ui-select__group { display: grid; gap: var(--ui-space-1); }
.ui-select__group > p { margin: var(--ui-space-1) 0 0; padding: var(--ui-space-1) var(--ui-space-2); color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); }
.ui-select__option { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); border: 0; border-radius: var(--ui-radius-md); padding: 0 var(--ui-space-2); color: var(--ui-color-text); background: transparent; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; }
.ui-select__option:not(:disabled):hover, .ui-select__option:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-select__option.is-selected { color: var(--ui-color-title); background: var(--ui-color-divider); font-weight: var(--ui-font-weight-semibold); }
.ui-select__option.is-selected:not(:disabled):hover { background: var(--ui-color-hover); }
.ui-select__option:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-select__option.is-filtered { display: none; }
.ui-select__option-check { width: 24px; height: 24px; flex: 0 0 24px; }
.ui-select__empty { margin: var(--ui-space-2); color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); text-align: center; }

.ui-switch { width: 44px; height: 24px; position: relative; border: 0; border-radius: var(--ui-radius-full); padding: 0; background: var(--ui-color-disabled); cursor: pointer; transition: background 160ms ease; }
.ui-switch::after { width: 20px; height: 20px; position: absolute; top: 2px; left: 2px; border-radius: var(--ui-radius-full); background: var(--ui-color-card); box-shadow: var(--ui-shadow-switch); content: ""; transition: transform 160ms ease; }
.ui-switch.is-checked { background: var(--ui-color-text); }
.ui-switch.is-checked::after { transform: translateX(20px); }
.ui-switch:not(:disabled):hover, .ui-switch.is-hover { background: var(--ui-color-border); }
.ui-switch.is-checked:not(:disabled):hover, .ui-switch.is-checked.is-hover { background: var(--ui-color-title); }
.ui-switch:disabled, .ui-switch.is-disabled { opacity: .55; cursor: not-allowed; }

/* The stage spans its container, the way the modal's does: as a flex item with no
   width it shrank to the trigger button, and the drawer — 88% of the stage — came
   out as a 150px column of wrapped words. */
.ui-drawer-stage { width: 100%; min-height: 272px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--ui-radius-lg); background: var(--ui-color-divider); }
.ui-drawer__layer { position: absolute; inset: 0; display: flex; align-items: stretch; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 220ms; visibility: hidden; }
.ui-drawer-stage.is-open .ui-drawer__layer { opacity: 1; pointer-events: auto; transition-delay: 0s; visibility: visible; }
.ui-drawer__mask { position: absolute; inset: 0; border: 0; padding: 0; background: var(--ui-color-modal-mask); cursor: default; }
.ui-drawer { width: min(88%, 360px); min-height: 100%; position: relative; z-index: 1; display: flex; flex-direction: column; border: 0; border-radius: var(--ui-radius-xl) 0 0 var(--ui-radius-xl); color: var(--ui-color-text); background: var(--ui-color-card); box-shadow: var(--ui-shadow-xl); transform: translateX(100%); transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.ui-drawer--wide { width: min(94%, 520px); }
/* The two stages, read the same way as the Modal's: `demo` is the bounded grey
   preview the Catalog shows, `inline` leaves only the trigger in the page and
   hangs the panel off the viewport. */
.ui-drawer-stage--inline { width: auto; min-height: 0; display: inline-flex; position: static; overflow: visible; border-radius: 0; background: transparent; }
.ui-drawer-stage--inline .ui-drawer__layer { position: fixed; z-index: var(--ui-layer-overlay, 60); }
.ui-drawer-stage--inline .ui-drawer { min-height: 100dvh; }
.ui-drawer__header.is-title-hidden { justify-content: flex-end; border-bottom: 0; }
.ui-drawer__header.is-title-hidden h3 { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ui-drawer--right { border-radius: 0; }
.ui-drawer--left { margin-right: auto; border-radius: 0 var(--ui-radius-xl) var(--ui-radius-xl) 0; transform: translateX(-100%); }
.ui-drawer--bottom { width: 100%; min-height: 0; max-height: 95%; margin-top: auto; border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0; transform: translateY(100%); }
.ui-drawer-stage.is-open .ui-drawer { transform: translate(0); }
.ui-drawer__content { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.ui-drawer__header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); border-bottom: 1px solid var(--ui-color-divider); padding: 0 var(--ui-space-4); }
.ui-drawer__header h3 { margin: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-drawer__identity { min-width: 0; display: flex; align-items: center; gap: var(--ui-space-3); }
.ui-drawer__titles { min-width: 0; display: grid; gap: 0; }
.ui-drawer__subtitle { overflow: hidden; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); text-overflow: ellipsis; white-space: nowrap; }
.ui-drawer__header:has(.ui-drawer__identity) { min-height: 72px; padding: 0 var(--ui-space-6); }
.ui-drawer__close { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; border: 0; border-radius: var(--ui-radius-full); padding: 0; background: transparent; cursor: pointer; }
.ui-drawer__close:hover, .ui-drawer__close:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-drawer__close-icon { width: 24px; height: 24px; }
.ui-drawer__body { min-width: 0; min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; padding: var(--ui-space-4); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-drawer__footer { display: flex; justify-content: flex-end; gap: var(--ui-space-4); border-top: 1px solid var(--ui-color-divider); padding: var(--ui-space-3) var(--ui-space-4); }

.ui-form-field { width: 100%; display: grid; gap: var(--ui-space-2); color: var(--ui-color-text); }
.ui-form-field > label { color: var(--ui-color-text); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); }
.ui-form-field > label span { color: var(--ui-color-error); }
.ui-form-field__message { margin: 0; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-form-field__message.is-error, .ui-form-field--error .ui-form-field__message { color: var(--ui-color-error); }
.ui-form-field--warning .ui-form-field__message { color: var(--ui-color-warning); }
.ui-form-field.is-disabled, .ui-form-field.is-disabled > label { color: var(--ui-color-disabled); }

.ui-text-input { width: 100%; min-height: 40px; display: flex; align-items: center; gap: var(--ui-space-2); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-card); transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.ui-text-input--32 { min-height: 32px; }
.ui-text-input--48 { min-height: 48px; }
.ui-text-input--rounded { border-radius: var(--ui-radius-lg); }
.ui-text-input--pill { border-radius: var(--ui-radius-full); }
.ui-text-input:hover:not(.is-disabled):not(.is-readonly), .ui-text-input.is-hover { border-color: var(--ui-color-secondary); }
.ui-text-input:focus-within, .ui-text-input.is-focus { border-color: var(--ui-color-title); box-shadow: none; }
.ui-text-input.is-warning { border-color: var(--ui-color-warning); background: var(--ui-color-warning-surface); }
.ui-text-input.is-error { border-color: var(--ui-color-error); background: var(--ui-color-error-surface); }
.ui-text-input.is-disabled { color: var(--ui-color-disabled); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-text-input.is-readonly { background: var(--ui-color-divider); }
.ui-text-input input { min-width: 0; height: 100%; flex: 1; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); outline: 0; }
.ui-text-input--32 input { font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-text-input input::placeholder { color: var(--ui-color-placeholder); }
.ui-text-input input:disabled { cursor: not-allowed; }
.ui-text-input__icon { width: 24px; height: 24px; flex: 0 0 24px; }
.ui-text-input__trailing { display: inline-flex; flex: 0 0 auto; align-items: center; }

.ui-textarea { width: 100%; position: relative; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-card); transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.ui-textarea--32 { padding: var(--ui-space-2); }
.ui-textarea--48 { padding: var(--ui-space-4); }
.ui-textarea:hover:not(.is-disabled):not(.is-readonly), .ui-textarea.is-hover { border-color: var(--ui-color-secondary); }
.ui-textarea:focus-within:not(.is-disabled):not(.is-readonly), .ui-textarea.is-focus:not(.is-disabled):not(.is-readonly) { border-color: var(--ui-color-title); box-shadow: none; }
.ui-textarea.is-warning { border-color: var(--ui-color-warning); background: var(--ui-color-warning-surface); }
.ui-textarea.is-error { border-color: var(--ui-color-error); background: var(--ui-color-error-surface); }
.ui-textarea.is-disabled, .ui-textarea.is-readonly { background: var(--ui-color-divider); }
.ui-textarea textarea { width: 100%; min-height: 72px; display: block; resize: vertical; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); outline: 0; }
.ui-textarea--32 textarea { min-height: 54px; font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-textarea--48 textarea { min-height: 88px; font-size: var(--ui-font-size-16); line-height: var(--ui-line-height-24); }
.ui-textarea textarea::placeholder { color: var(--ui-color-placeholder); }
.ui-textarea textarea:disabled { cursor: not-allowed; }
.ui-textarea.is-readonly textarea:focus-visible, .ui-textarea.is-disabled textarea:focus-visible { outline: 0; box-shadow: none; }
.ui-textarea__count { display: block; margin-top: var(--ui-space-1); color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); text-align: right; }

.ui-number-stepper { width: max-content; display: inline-grid; align-items: stretch; overflow: hidden; border: 1px solid var(--ui-color-border); background: var(--ui-color-card); }
.ui-number-stepper--32 { min-height: 32px; grid-template-columns: 32px minmax(40px, auto) 32px; }
.ui-number-stepper--40 { min-height: 40px; grid-template-columns: 40px minmax(48px, auto) 40px; }
.ui-number-stepper--48 { min-height: 48px; grid-template-columns: 48px minmax(56px, auto) 48px; }
.ui-number-stepper--rounded { border-radius: var(--ui-radius-lg); }
.ui-number-stepper--pill { border-radius: var(--ui-radius-full); }
.ui-number-stepper.is-hover { border-color: var(--ui-color-secondary); }
.ui-number-stepper.is-focus { border-color: var(--ui-color-title); }
.ui-number-stepper.is-warning { border-color: var(--ui-color-warning); background: var(--ui-color-warning-surface); }
.ui-number-stepper.is-error { border-color: var(--ui-color-error); background: var(--ui-color-error-surface); }
.ui-number-stepper__action { display: grid; place-items: center; border: 0; padding: 0; color: var(--ui-color-title); background: transparent; cursor: pointer; }
.ui-number-stepper__action:first-child { border-right: 1px solid var(--ui-color-divider); }
.ui-number-stepper__action:last-child { border-left: 1px solid var(--ui-color-divider); }
.ui-number-stepper__action:not(:disabled):hover, .ui-number-stepper__action:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-number-stepper__action:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-number-stepper__icon { width: 24px; height: 24px; display: block; flex: 0 0 24px; }
.ui-number-stepper__action:disabled .ui-number-stepper__icon { filter: grayscale(1); opacity: .25; }
.ui-number-stepper output { display: grid; place-items: center; padding: 0 var(--ui-space-2); color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); }
.ui-number-stepper--32 output { font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-number-stepper.is-disabled { background: var(--ui-color-divider); }

/* The dropzone takes the width of what holds it: at 520px it left a gap in any
   column wider than that, and the caller could not fix it from outside. */
.ui-upload { width: 100%; display: grid; gap: var(--ui-space-3); position: relative; }
.ui-upload__input { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.ui-upload__dropzone { width: 100%; min-height: 152px; display: grid; place-items: center; align-content: center; gap: var(--ui-space-2); border: 1px dashed var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-6); color: var(--ui-color-text); background: var(--ui-color-card); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.ui-upload__dropzone:hover, .ui-upload.is-hover .ui-upload__dropzone { border-color: var(--ui-color-secondary); background: var(--ui-color-divider); }
.ui-upload__dropzone:focus-visible, .ui-upload.is-focus .ui-upload__dropzone { outline: 0; border-color: var(--ui-color-title); background: var(--ui-color-card); }
.ui-upload__dropzone:disabled { color: var(--ui-color-disabled); border-color: var(--ui-color-border); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-upload__dropzone-icon { width: 24px; height: 24px; display: block; }
.ui-upload__dropzone > span:not(.ui-upload__action) { display: grid; gap: var(--ui-space-half); text-align: center; }
.ui-upload__dropzone strong, .ui-upload__trigger-copy strong { color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); }
.ui-upload__dropzone small, .ui-upload__trigger-copy small { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-regular); line-height: var(--ui-line-height-18); }
.ui-upload__dropzone:disabled strong, .ui-upload__dropzone:disabled small { color: var(--ui-color-disabled); }
.ui-upload__action { min-height: 32px; display: inline-flex; align-items: center; border-radius: var(--ui-radius-full); padding: 0 var(--ui-space-3); color: var(--ui-color-title); background: var(--ui-color-divider); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); }
.ui-upload__dropzone:hover .ui-upload__action { background: var(--ui-color-hover); }
.ui-upload__dropzone:disabled .ui-upload__action { color: var(--ui-color-disabled); background: var(--ui-color-border); }
.ui-upload__trigger-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); background: var(--ui-color-card); transition: border-color 120ms ease, background 120ms ease; }
.ui-upload__trigger-row:hover, .ui-upload.is-hover .ui-upload__trigger-row { border-color: var(--ui-color-secondary); background: var(--ui-color-divider); }
.ui-upload.is-focus .ui-upload__trigger-row { border-color: var(--ui-color-title); }
.ui-upload.is-disabled .ui-upload__trigger-row { background: var(--ui-color-divider); }
.ui-upload__trigger-copy { min-width: 0; display: grid; gap: var(--ui-space-half); }
.ui-upload.is-disabled .ui-upload__trigger-copy strong, .ui-upload.is-disabled .ui-upload__trigger-copy small { color: var(--ui-color-disabled); }
.ui-upload--avatar { width: max-content; max-width: 100%; }
.ui-upload__avatar-group { display: flex; flex-wrap: wrap; gap: var(--ui-space-6); }
.ui-upload__avatar-field { display: grid; justify-items: center; gap: var(--ui-space-2); }
.ui-upload__avatar { width: 120px; height: 120px; display: grid; place-items: center; position: relative; overflow: hidden; border: 1px dashed var(--ui-color-border); border-radius: var(--ui-radius-full); padding: 0; color: var(--ui-color-secondary); background: var(--ui-color-divider); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.ui-upload__avatar:hover, .ui-upload.is-hover .ui-upload__avatar { border-color: var(--ui-color-secondary); background: var(--ui-color-hover); }
.ui-upload__avatar:focus-visible, .ui-upload.is-focus .ui-upload__avatar { outline: 0; border-color: var(--ui-color-title); box-shadow: 0 0 0 2px var(--ui-color-card), 0 0 0 4px var(--ui-color-title); }
.ui-upload__avatar:disabled { color: var(--ui-color-disabled); border-color: var(--ui-color-border); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-upload__avatar-icon { width: 24px; height: 24px; display: block; }
.ui-upload__avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.ui-upload__avatar-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ui-color-on-primary); background: var(--ui-color-upload-overlay); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); opacity: 0; transition: opacity 120ms ease; }
.ui-upload__avatar:hover .ui-upload__avatar-overlay, .ui-upload__avatar:focus-visible .ui-upload__avatar-overlay, .ui-upload.is-hover .ui-upload__avatar-overlay, .ui-upload.is-focus .ui-upload__avatar-overlay { opacity: 1; }
.ui-upload__avatar:disabled .ui-upload__avatar-overlay { display: none; }
.ui-upload__avatar-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ui-color-upload-loading); }
.ui-upload__avatar-loading .ui-upload__file-spinner { border-color: var(--ui-color-on-primary-muted); border-top-color: var(--ui-color-on-primary); }
.ui-upload__avatar-copy { width: min(100%, 180px); display: grid; gap: var(--ui-space-half); text-align: center; }
.ui-upload__avatar-copy strong { color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); }
.ui-upload__avatar-copy small { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-regular); line-height: var(--ui-line-height-18); }
.ui-upload.is-error .ui-upload__avatar { border-color: var(--ui-color-error); }
.ui-upload.is-error .ui-upload__avatar-copy small { color: var(--ui-color-error); }
.ui-upload.is-disabled .ui-upload__avatar-copy strong, .ui-upload.is-disabled .ui-upload__avatar-copy small { color: var(--ui-color-disabled); }
.ui-upload__files { width: 100%; display: grid; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.ui-upload__files[hidden] { display: none; }
.ui-upload__file { min-height: 56px; display: flex; align-items: center; gap: var(--ui-space-2); border: 1px solid var(--ui-color-divider); border-radius: var(--ui-radius-md); padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-color-card); }
.ui-upload__file-icon, .ui-upload__file-status { width: 24px; height: 24px; display: grid; flex: 0 0 24px; place-items: center; }
.ui-upload__file-type-icon { width: 24px; height: 24px; display: block; }
.ui-upload__file-copy { min-width: 0; flex: 1; display: grid; gap: var(--ui-space-half); }
.ui-upload__file-copy strong { overflow: hidden; color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); text-overflow: ellipsis; white-space: nowrap; }
.ui-upload__file-copy small { color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-regular); line-height: var(--ui-line-height-18); }
.ui-upload__file.is-error { border-color: var(--ui-color-error); background: var(--ui-color-error-surface); }
.ui-upload__file.is-error .ui-upload__file-copy small { color: var(--ui-color-error); }
.ui-upload__file-spinner { width: 16px; height: 16px; display: block; border: 2px solid var(--ui-color-border); border-top-color: var(--ui-color-text); border-radius: var(--ui-radius-full); animation: ui-spin .8s linear infinite; }
.ui-upload__progress { width: min(100%, 180px); height: 4px; display: block; overflow: hidden; border-radius: var(--ui-radius-full); background: var(--ui-color-divider); }
.ui-upload__progress i { height: 100%; display: block; border-radius: inherit; background: var(--ui-color-text); transition: width 120ms ease; }
@media (max-width: 480px) { .ui-upload__trigger-row { align-items: flex-start; flex-direction: column; } .ui-upload__trigger-row .ui-button { width: 100%; } }

/* The line between two steps is a join, not a distance: it used to grow to fill
   whatever width the row was given, so three steps in a wide container sat a
   hand's width apart with a hairline stretched between them. Fixed and short,
   the row sizes to its steps instead and the joins read as joins. */
.ui-stepper { --ui-stepper-connector-length: var(--ui-space-6); width: min(100%, 720px); }
.ui-stepper ol { display: flex; margin: 0; padding: 0; list-style: none; }
/* Icon steps: the marker's colour is the step's state, and a mask lets the glyph
   take it — an <img> would stay whatever colour it was drawn in. */
.ui-stepper__step-icon { width: 16px; height: 16px; display: block; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ui-stepper__item { min-width: 0; flex: 1; position: relative; }
.ui-stepper__item:not(:last-child)::after { height: 1px; position: absolute; top: 16px; right: var(--ui-space-2); left: calc(50% + var(--ui-space-4)); background: var(--ui-color-border); content: ""; }
.ui-stepper__item.is-complete:not(:last-child)::after { background: var(--ui-color-text); }
.ui-stepper__item > button { width: 100%; display: flex; align-items: flex-start; gap: var(--ui-space-2); border: 0; padding: 0 var(--ui-space-2) 0 0; color: var(--ui-color-secondary); background: transparent; text-align: left; cursor: pointer; }
.ui-stepper__item > button:focus-visible { outline: 0; }
.ui-stepper__marker { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; position: relative; z-index: 1; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-full); color: var(--ui-color-secondary); background: var(--ui-color-card); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); }
.ui-stepper__item.is-complete .ui-stepper__marker { border-color: var(--ui-color-text); color: var(--ui-color-card); background: var(--ui-color-text); }
.ui-stepper__item.is-current .ui-stepper__marker { border-color: var(--ui-color-text); color: var(--ui-color-text); background: var(--ui-color-card); }
.ui-stepper__complete-icon { width: 24px; height: 24px; display: block; filter: brightness(0) invert(1); }
.ui-stepper__item strong { display: block; color: var(--ui-color-text); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); }
.ui-stepper__item small { display: block; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-16); }
.ui-stepper__item.is-disabled > button { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-stepper--horizontal ol { align-items: center; gap: var(--ui-space-3); }
.ui-stepper--horizontal .ui-stepper__item { flex: 0 1 auto; }
.ui-stepper--horizontal .ui-stepper__item::after { display: none; }
.ui-stepper--horizontal .ui-stepper__connector { height: 1px; flex: 0 0 var(--ui-stepper-connector-length); background: var(--ui-color-border); }
.ui-stepper--horizontal .ui-stepper__connector.is-complete { background: var(--ui-color-text); }
.ui-stepper--horizontal .ui-stepper__item > button { width: auto; align-items: center; padding: 0; }
.ui-stepper--horizontal .ui-stepper__item > button > span:last-child { min-height: 32px; display: flex; flex-direction: column; justify-content: center; }
.ui-stepper--vertical ol { flex-direction: column; gap: var(--ui-space-3); }
.ui-stepper--vertical .ui-stepper__item { flex: 0 0 auto; }
.ui-stepper--vertical .ui-stepper__item:not(:last-child)::after { width: 1px; height: calc(100% + var(--ui-space-3)); top: var(--ui-space-4); right: auto; bottom: auto; left: var(--ui-space-4); }

.ui-stepper__sr-only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ui-stepper--flow-progress { --ui-stepper-flow-marker-size: 24px; --ui-stepper-flow-connector-size: 1px; width: fit-content; max-width: 100%; display: flex; align-items: flex-start; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
/* The default variant draws its connector as a pseudo-element on the item. This
   variant draws real connector elements, and the pseudo one was only invisible
   because the item used to be exactly as wide as its marker — widen the item to
   fit its label and a stray dash appears beside every step. */
.ui-stepper--flow-progress .ui-stepper__item::after { display: none; }
.ui-stepper--flow-progress .ui-stepper__item { min-width: var(--ui-stepper-flow-marker-size); flex: 0 1 auto; display: grid; grid-template-rows: var(--ui-stepper-flow-marker-size) auto; justify-items: center; align-items: start; row-gap: var(--ui-space-1); color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); text-align: center; }
.ui-stepper--flow-progress .ui-stepper__connector { height: var(--ui-stepper-flow-connector-size); flex: 0 0 var(--ui-stepper-connector-length); align-self: start; margin-top: calc((var(--ui-stepper-flow-marker-size) - var(--ui-stepper-flow-connector-size)) / 2); background: var(--ui-color-border); }
.ui-stepper--flow-progress .ui-stepper__connector.is-complete { background: var(--ui-color-text); }
.ui-stepper--flow-progress .ui-stepper__marker { width: var(--ui-stepper-flow-marker-size); height: var(--ui-stepper-flow-marker-size); box-sizing: border-box; flex-basis: var(--ui-stepper-flow-marker-size); border: 1px solid var(--ui-color-divider); color: var(--ui-color-secondary); background: var(--ui-color-divider); font-size: var(--ui-font-size-12); }
.ui-stepper--flow-progress .ui-stepper__item.is-complete .ui-stepper__marker { border-color: var(--ui-color-text); color: var(--ui-color-card); background: var(--ui-color-text); }
.ui-stepper--flow-progress .ui-stepper__item.is-current .ui-stepper__marker { border-color: var(--ui-color-text); color: var(--ui-color-text); background: var(--ui-color-card); }
.ui-stepper--flow-progress .ui-stepper__item strong { min-width: 0; font: inherit; font-weight: var(--ui-font-weight-bold); }
.ui-stepper--flow-progress .ui-stepper__complete-icon { width: 16px; height: 16px; }

.ui-stepper--dots { width: max-content; display: flex; align-items: center; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.ui-stepper--dots .ui-stepper__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: var(--ui-radius-full); background: var(--ui-color-secondary); }
.ui-stepper--dots .ui-stepper__dot.is-current { background: var(--ui-color-text); }
.ui-stepper--top-indicator { width: 100%; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-stepper--top-indicator .ui-stepper__segment { height: 8px; flex: 1; border-radius: var(--ui-radius-full); background: var(--ui-color-divider); }
.ui-stepper--top-indicator .ui-stepper__segment.is-complete { background: var(--ui-color-info); }
.ui-stepper--top-indicator .ui-stepper__segment.is-current { background: var(--ui-color-info-surface); }
/* The step you are on, already satisfied: it reads as done rather than pending. */
.ui-stepper--top-indicator .ui-stepper__segment.is-current.is-complete { background: var(--ui-color-info); }
.ui-stepper--schedule-progress { width: 100%; display: grid; gap: var(--ui-space-1); color: var(--ui-color-secondary); }
.ui-stepper__schedule-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-stepper__schedule-meta strong { display: inline-flex; gap: 2px; font: inherit; }
.ui-stepper__schedule-meta b { color: var(--ui-color-info); font-weight: var(--ui-font-weight-regular); }
.ui-stepper__schedule-meta i { color: var(--ui-color-secondary); font-style: normal; }
.ui-stepper__schedule-track { height: 6px; display: block; overflow: hidden; border-radius: var(--ui-radius-full); background: var(--ui-color-hover); }
.ui-stepper__schedule-track i { width: var(--ui-stepper-schedule-value); height: 100%; display: block; border-radius: inherit; background: var(--ui-color-info); }
.ui-stepper--progress-steps { width: fit-content; max-width: 100%; display: flex; align-items: center; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.ui-stepper--progress-steps .ui-stepper__item { min-width: 0; flex: 0 0 auto; display: flex; align-items: center; gap: var(--ui-space-2); }
.ui-stepper--progress-steps .ui-stepper__item::after { display: none; }
.ui-stepper--progress-steps .ui-stepper__marker { width: 24px; height: 24px; flex-basis: 24px; border-color: var(--ui-color-divider); color: var(--ui-color-secondary); background: var(--ui-color-card); }
.ui-stepper--progress-steps .ui-stepper__item strong { color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); white-space: nowrap; }
.ui-stepper--progress-steps .ui-stepper__connector { height: 1px; flex: 0 0 var(--ui-stepper-connector-length); background: var(--ui-color-border); }
.ui-stepper--progress-steps .ui-stepper__connector.is-complete { background: var(--ui-color-text); }
.ui-stepper--progress-steps .ui-stepper__item.is-complete .ui-stepper__marker { border-color: var(--ui-color-text); color: var(--ui-color-card); background: var(--ui-color-text); }
.ui-stepper--progress-steps .ui-stepper__item.is-current .ui-stepper__marker { border-color: var(--ui-color-primary); color: var(--ui-color-card); background: var(--ui-color-primary); }
.ui-stepper--progress-steps .ui-stepper__item.is-current strong { color: var(--ui-color-primary); }
.ui-stepper--progress-steps .ui-stepper__complete-icon { width: 16px; height: 16px; }

.ui-progress { color: var(--ui-color-text); }
.ui-progress--line { width: 100%; display: flex; align-items: center; gap: var(--ui-space-3); }
.ui-progress__track { height: 8px; flex: 1; overflow: hidden; border-radius: var(--ui-radius-full); background: var(--ui-color-divider); }
.ui-progress__track i { width: var(--ui-progress-value, 0%); height: 100%; display: block; border-radius: inherit; background: var(--ui-color-text); transition: width 160ms ease; }
.ui-progress--success .ui-progress__track i { background: var(--ui-color-success); }
.ui-progress--error .ui-progress__track i { background: var(--ui-color-error); }
.ui-progress--line output { min-width: 40px; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-18); text-align: right; }
.ui-progress.is-indeterminate .ui-progress__track i { width: 36%; background: var(--ui-color-hover); animation: ui-progress-indeterminate 1s ease-in-out infinite; }
.ui-progress--circle, .ui-progress--semicircle { --ui-progress-ring-stroke: 12px; width: var(--ui-progress-size); display: grid; place-items: center; position: relative; }
.ui-progress--semicircle { --ui-progress-ring-stroke: 8px; }
.ui-progress__ring { width: 100%; height: auto; display: block; overflow: visible; }
.ui-progress__ring-track, .ui-progress__ring-value { fill: none; stroke-width: var(--ui-progress-ring-stroke); stroke-linecap: round; }
.ui-progress__ring-track { stroke: var(--ui-color-divider); }
.ui-progress__ring-value { stroke: var(--ui-color-text); stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--ui-progress-value)); transition: stroke-dashoffset 160ms ease; }
.ui-progress--success .ui-progress__ring-value { stroke: var(--ui-color-success); }
.ui-progress--error .ui-progress__ring-value { stroke: var(--ui-color-error); }
.ui-progress--circle .ui-progress__ring { transform: rotate(-90deg); }
.ui-progress--circle output { position: absolute; color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-progress--semicircle { align-items: end; }
.ui-progress--semicircle output { position: absolute; right: 0; bottom: var(--ui-space-3); left: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); text-align: center; }

.ui-toast { --ui-dismiss-surface: var(--ui-color-card); width: min(100%, 400px); display: none; align-items: flex-start; gap: var(--ui-space-3); position: relative; overflow: visible; border: 0; border-radius: var(--ui-radius-lg); padding: var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); }
.ui-toast.is-open { display: flex; }
.ui-toast__icon { width: 24px; height: 24px; flex: 0 0 24px; }
.ui-toast__copy { min-width: 0; flex: 1; }
.ui-toast__copy strong { display: block; color: var(--ui-color-title); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-toast__copy p { margin: var(--ui-space-1) 0 0; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-toast__action { margin-top: var(--ui-space-2); }
.ui-notification { --ui-dismiss-surface: var(--ui-color-card); width: min(100%, 400px); display: none; align-items: flex-start; gap: var(--ui-space-3); position: relative; overflow: visible; border: 1px solid var(--ui-color-divider); border-left: 4px solid var(--ui-color-info); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); color: var(--ui-color-text); background: var(--ui-color-card); box-shadow: var(--ui-shadow-md); }
.ui-notification.is-open { display: flex; }
.ui-notification--success { border-left-color: var(--ui-color-success); }
.ui-notification--warning { border-left-color: var(--ui-color-warning); }
.ui-notification--error { border-left-color: var(--ui-color-error); }
.ui-notification__icon { width: 24px; height: 24px; flex: 0 0 24px; }
.ui-notification__copy { min-width: 0; flex: 1; }
.ui-notification__copy strong { display: block; color: var(--ui-color-title); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-notification__copy p { margin: var(--ui-space-1) 0 0; color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-notification__action { margin-top: var(--ui-space-3); }
/* A Result is a centred column — an outcome the page is about — so it centres
   itself in whatever holds it rather than sitting against the left edge. Its
   content was already centred; the block was not. */
.ui-result { width: min(100%, 560px); margin-inline: auto; display: grid; justify-items: center; gap: var(--ui-space-4); padding: var(--ui-space-9) var(--ui-space-6); color: var(--ui-color-text); text-align: center; }
.ui-result__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--ui-radius-full); background: var(--ui-color-success-surface); }
.ui-result__icon-image { width: 32px; height: 32px; }
.ui-result--info .ui-result__icon { background: var(--ui-color-info-surface); }
.ui-result--warning .ui-result__icon { background: var(--ui-color-warning-surface); }
.ui-result--error .ui-result__icon { background: var(--ui-color-error-surface); }
.ui-result__copy { display: grid; gap: var(--ui-space-2); }
.ui-result__copy h3 { margin: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-20); line-height: var(--ui-line-height-28); }
.ui-result__copy p { max-width: 440px; margin: 0; color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-3); }
/* A skeleton stands in for content that has not arrived, so it takes the width
   of whatever will hold that content — the placeholder should not be narrower
   than the thing it is standing in for. The fixed sizes are still reachable
   through --ui-skeleton-width (the width prop sets it); only the default
   changed. A fixed-size control — an avatar, a button, a circle — keeps its own
   width, because there the size is the point. */
.ui-skeleton { color: transparent; }
.ui-skeleton__block { display: block; border-radius: var(--ui-radius-md); background: var(--ui-color-hover); }
.ui-skeleton.is-animated .ui-skeleton__block { background: var(--ui-gradient-skeleton); background-size: 400% 100%; animation: ui-skeleton-loading 1.4s ease infinite; }
.ui-skeleton--text { width: var(--ui-skeleton-width, 100%); max-width: 100%; display: grid; gap: var(--ui-space-2); }
.ui-skeleton__line { width: 100%; height: var(--ui-skeleton-height, 14px); }
.ui-skeleton--avatar, .ui-skeleton--button, .ui-skeleton--input, .ui-skeleton--image { width: var(--ui-skeleton-width, 40px); height: var(--ui-skeleton-height, 40px); }
.ui-skeleton__element { width: 100%; height: 100%; }
.ui-skeleton--avatar, .ui-skeleton--avatar .ui-skeleton__element { border-radius: var(--ui-radius-full); }
.ui-skeleton--button { width: var(--ui-skeleton-width, 80px); height: var(--ui-skeleton-height, 32px); }
.ui-skeleton--input { width: var(--ui-skeleton-width, 100%); max-width: 100%; height: var(--ui-skeleton-height, 40px); }
.ui-skeleton--image { width: var(--ui-skeleton-width, 100%); max-width: 100%; height: var(--ui-skeleton-height, 120px); }
/* A circle needs its two sides equal, so it keeps a width of its own instead of
   taking the container's. */
.ui-skeleton--circle { width: var(--ui-skeleton-width, 120px); }
.ui-skeleton--circle, .ui-skeleton--circle .ui-skeleton__element { border-radius: var(--ui-radius-full); }
.ui-skeleton--square, .ui-skeleton--square .ui-skeleton__element { border-radius: 0; }
.ui-skeleton--round .ui-skeleton__element, .ui-skeleton.is-round .ui-skeleton__block { border-radius: var(--ui-radius-full); }
.ui-skeleton--content { width: var(--ui-skeleton-width, 100%); max-width: 100%; display: flex; align-items: flex-start; gap: var(--ui-space-3); }
.ui-skeleton__header { flex: 0 0 40px; }
.ui-skeleton__avatar { width: 40px; height: 40px; border-radius: var(--ui-radius-full); }
.ui-skeleton__content { min-width: 0; flex: 1; display: grid; gap: var(--ui-space-3); }
.ui-skeleton__title { width: 50%; height: var(--ui-skeleton-height, 14px); }
.ui-skeleton__paragraph { display: grid; gap: var(--ui-space-2); }
.ui-skeleton--card { width: var(--ui-skeleton-width, 100%); max-width: 100%; display: grid; gap: var(--ui-space-3); }
.ui-skeleton__media { width: 100%; height: var(--ui-skeleton-height, 120px); border-radius: var(--ui-radius-lg); }

.ui-dropdown-menu { position: relative; display: inline-flex; }
.ui-dropdown-menu [data-demo="ui-dropdown-toggle"] img[src$="arrow-down-sm.svg"] { transition: transform 160ms ease; }
.ui-dropdown-menu.is-open [data-demo="ui-dropdown-toggle"] img[src$="arrow-down-sm.svg"] { transform: rotate(180deg); }
.ui-dropdown-menu__surface { min-width: 184px; display: none; position: absolute; z-index: 30; top: calc(100% + var(--ui-space-2)); left: 0; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-2); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); }
.ui-dropdown-menu.is-open .ui-dropdown-menu__surface { display: grid; gap: var(--ui-space-1); }
.ui-dropdown-menu__surface[data-placement="bottom-end"] { right: 0; left: auto; }
.ui-dropdown-menu__item { min-height: 36px; display: flex; align-items: center; gap: var(--ui-space-2); border: 0; border-radius: var(--ui-radius-md); padding: 0 var(--ui-space-2); color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; }
.ui-dropdown-menu__item:hover, .ui-dropdown-menu__item:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-dropdown-menu__item.is-danger { color: var(--ui-color-error); }
.ui-dropdown-menu__item:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-dropdown-menu__item:disabled:hover { background: transparent; }
.ui-dropdown-menu__item-icon { width: 24px; height: 24px; flex: 0 0 24px; }

.ui-disclosure { width: min(100%, 640px); border-bottom: 1px solid var(--ui-color-divider); }
.ui-disclosure__trigger { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); border: 0; padding: 0; color: var(--ui-color-title); background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; }
.ui-disclosure__trigger:hover, .ui-disclosure__trigger:focus-visible { outline: 0; color: var(--ui-color-text); }
.ui-disclosure__icon { width: 24px; height: 24px; flex: 0 0 24px; transition: transform 120ms ease; }
.ui-disclosure.is-open .ui-disclosure__icon { transform: rotate(180deg); }
.ui-disclosure__content { padding: 0 0 var(--ui-space-4); color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); line-height: var(--ui-line-height-20); }
.ui-disclosure.is-disabled { color: var(--ui-color-disabled); }
.ui-disclosure.is-disabled .ui-disclosure__trigger { color: inherit; cursor: not-allowed; }
.ui-disclosure--details { border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: 0 var(--ui-space-3); }

.ui-segmented-control { width: max-content; display: inline-flex; overflow: hidden; border: 1px solid var(--ui-color-border); background: var(--ui-color-card); }
.ui-segmented-control--pill { border-radius: var(--ui-radius-full); }
.ui-segmented-control--rounded { border-radius: var(--ui-radius-md); }
.ui-segmented-control button { min-height: 40px; min-width: 68px; border: 0; border-right: 1px solid var(--ui-color-divider); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: transparent; font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.ui-segmented-control button:last-child { border-right: 0; }
.ui-segmented-control--32 button { min-height: 32px; font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
.ui-segmented-control--48 button { min-height: 48px; }
.ui-segmented-control--icon button { min-width: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--ui-space-2); }
.ui-segmented-control--icon.ui-segmented-control--32 button { min-width: 32px; }
.ui-segmented-control--icon.ui-segmented-control--48 button { min-width: 48px; }
.ui-segmented-control__icon { width: 16px; height: 16px; display: block; object-fit: contain; }
.ui-segmented-control--icon button[aria-pressed="true"] .ui-segmented-control__icon { filter: brightness(.32); }
.ui-segmented-control--role { width: min(100%, 312px); position: relative; gap: 0; overflow: visible; border: 0; border-radius: var(--ui-radius-lg); padding: var(--ui-space-1); background: var(--ui-color-divider); }
.ui-segmented-control--role button { min-width: 0; min-height: 64px; flex: 1; display: flex; align-items: center; justify-content: center; border-right: 0; border-radius: var(--ui-radius-md); padding: var(--ui-space-2); color: var(--ui-color-placeholder); background: transparent; font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); }
.ui-segmented-control--role .ui-segmented-control__role-content { display: grid; justify-items: center; gap: var(--ui-space-1); }
.ui-segmented-control--role .ui-segmented-control__role-icon { width: 16px; height: 22px; display: block; object-fit: contain; opacity: .5; }
.ui-segmented-control--role .ui-segmented-control__role-icon--teacher { opacity: 1; }
.ui-segmented-control--role button[aria-pressed="true"] { color: var(--ui-color-title); background: var(--ui-color-card); box-shadow: none; }
.ui-segmented-control--role button[aria-pressed="true"] .ui-segmented-control__role-icon { opacity: 1; }
.ui-segmented-control--role button[aria-pressed="true"] .ui-segmented-control__role-icon--teacher { filter: brightness(.32); }
.ui-segmented-control--role button:hover:not(:disabled), .ui-segmented-control--role button:focus-visible { background: color-mix(in srgb, var(--ui-color-card) 64%, transparent); }
.ui-segmented-control--role button[aria-pressed="true"]:hover:not(:disabled), .ui-segmented-control--role button[aria-pressed="true"]:focus-visible { background: var(--ui-color-card); }
.ui-segmented-control__role-switch { width: 30px; height: 30px; box-sizing: border-box; position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; border: var(--ui-space-1) solid var(--ui-color-divider); border-radius: var(--ui-radius-full); background: var(--ui-color-card); pointer-events: none; transform: translate(-50%, -50%); }
.ui-segmented-control__role-switch-icon { width: 12px; height: 11px; display: block; object-fit: contain; }
.ui-segmented-control button:hover:not(:disabled), .ui-segmented-control button:focus-visible { outline: 0; background: var(--ui-color-hover); }
.ui-segmented-control button[aria-pressed="true"] { color: var(--ui-color-title); background: var(--ui-color-divider); }
.ui-segmented-control button:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }
.ui-segmented-control--role button[aria-pressed="true"], .ui-segmented-control--role button[aria-pressed="true"]:hover:not(:disabled), .ui-segmented-control--role button[aria-pressed="true"]:focus-visible { background: var(--ui-color-card); }

.ui-time-slot { min-width: 112px; min-height: 40px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-md); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-card); font: inherit; font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-16); cursor: pointer; }
.ui-time-slot small { color: var(--ui-color-secondary); font-size: var(--ui-font-size-10); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-14); }
.ui-time-slot:not(.ui-time-slot--availability):hover:not(:disabled), .ui-time-slot:not(.ui-time-slot--availability):focus-visible { outline: 0; border-color: var(--ui-color-title); background: var(--ui-color-divider); }
.ui-time-slot__tooltip-wrap { width: 100%; height: 20px; display: block; }
.ui-time-slot__tooltip-wrap:hover, .ui-time-slot__tooltip-wrap:focus-within { z-index: 2; }
.ui-time-slot--availability { width: 100%; min-width: 0; min-height: 20px; height: 100%; justify-content: center; align-items: stretch; overflow: hidden; border: 0; border-radius: 0; padding: 0; color: transparent; text-align: left; transition: filter 120ms ease; }
.ui-time-slot--availability:focus-visible { outline: 0; }
.ui-time-slot--availability .ui-time-slot__label { width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.ui-time-slot--availability.is-available { background: var(--ui-color-available); }
.ui-time-slot--availability.is-available:hover:not(:disabled), .ui-time-slot--availability.is-available:focus-visible { filter: brightness(.92); }
.ui-time-slot--availability.is-selected { background: var(--ui-color-info); }
.ui-time-slot--availability.is-unavailable { background: var(--ui-color-card); cursor: not-allowed; }
.ui-time-slot--availability.is-booked-by-others { background: repeating-linear-gradient(135deg, var(--ui-color-divider) 0 2px, var(--ui-color-card) 2px 6px); cursor: not-allowed; }
.ui-time-slot--availability.is-booked-by-you { background: repeating-linear-gradient(135deg, var(--ui-color-available) 0 2px, var(--ui-color-available-surface) 2px 6px); cursor: not-allowed; }
.ui-time-slot--availability.is-loading { background: var(--ui-color-divider); cursor: wait; }
.ui-time-slot--availability .ui-time-slot__spinner { border-color: var(--ui-color-secondary); border-top-color: var(--ui-color-text); }
.ui-time-slot--option { min-width: 0; min-height: 32px; border-radius: var(--ui-radius-md); font-size: var(--ui-font-size-12); line-height: var(--ui-line-height-18); }
/* Two lines — the time, and the day it falls on — need a taller box than the
   single-line option, or the second line sits on the border. The day stays on one
   line: "Tue, 29 Sep" broken across two reads as two facts. */
.ui-time-slot--option.has-secondary { min-width: 96px; min-height: 48px; gap: var(--ui-space-half); padding: var(--ui-space-1) var(--ui-space-2); }
.ui-time-slot--option.has-secondary small { white-space: nowrap; }

/* The lesson you already have: a date tile on a content fill, then the day and
   the interval. Presentational — no hover, no pressed, nothing to press. */
.ui-time-slot--scheduled { width: 100%; min-width: 0; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--ui-space-4); border: 0; border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); background: var(--ui-color-page); cursor: default; text-align: left; }
.ui-time-slot__date { width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; align-content: center; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-card); }
.ui-time-slot__month { color: var(--ui-color-info); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-16); letter-spacing: .0625em; text-transform: uppercase; }
.ui-time-slot__day { color: var(--ui-color-title); font-size: var(--ui-font-size-20); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-28); }
.ui-time-slot__schedule { min-width: 0; display: grid; gap: var(--ui-space-1); }
.ui-time-slot__schedule strong { color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-time-slot__schedule span { color: var(--ui-color-text); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); }
/* Selected reads the way a selected Chip does: the text colour as an outline over
   the light fill, rather than a solid dark block. A filled slot was the heaviest
   thing on a page full of times, and its second line had to fight the fill. */
.ui-time-slot--option.is-selected { color: var(--ui-color-text); border-color: var(--ui-color-text); background: var(--ui-color-divider); }
.ui-time-slot--option:not(.is-selected):not(:disabled):hover, .ui-time-slot--option:not(.is-selected):focus-visible { color: var(--ui-color-text); border-color: var(--ui-color-secondary); background: var(--ui-color-divider); }
.ui-time-slot--option.is-selected:hover:not(:disabled), .ui-time-slot--option.is-selected:focus-visible { color: var(--ui-color-text); border-color: var(--ui-color-text); background: var(--ui-color-border); }
.ui-time-slot--option.is-unavailable, .ui-time-slot--option.is-booked-by-others, .ui-time-slot--option.is-booked-by-you { color: var(--ui-color-disabled); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-time-slot__spinner { width: 14px; height: 14px; border: 2px solid var(--ui-color-border); border-top-color: var(--ui-color-text); border-radius: var(--ui-radius-full); animation: ui-spin .8s linear infinite; }

.ui-time-picker { width: 100%; position: relative; }
.ui-time-picker__trigger { width: 100%; min-height: 40px; display: flex; align-items: center; gap: var(--ui-space-2); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: 0 var(--ui-space-3); color: var(--ui-color-text); background: var(--ui-color-card); font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-20); text-align: left; cursor: pointer; }
.ui-time-picker__trigger span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-time-picker__placeholder { color: var(--ui-color-placeholder); }
.ui-time-picker__icon { width: 16px; height: 16px; flex: 0 0 16px; display: block; object-fit: contain; }
.ui-time-picker__icon.is-placeholder { opacity: .45; }
.ui-time-picker.is-disabled .ui-time-picker__icon { opacity: .25; }
.ui-time-picker__suffix { width: 24px; height: 24px; flex: 0 0 24px; transition: transform 120ms ease; }
.ui-time-picker.is-open .ui-time-picker__suffix { transform: rotate(180deg); }
.ui-time-picker:not(.is-disabled):hover .ui-time-picker__trigger, .ui-time-picker.is-hover .ui-time-picker__trigger { border-color: var(--ui-color-secondary); }
.ui-time-picker.is-open .ui-time-picker__trigger, .ui-time-picker:focus-within .ui-time-picker__trigger, .ui-time-picker.is-focus .ui-time-picker__trigger { border-color: var(--ui-color-title); box-shadow: none; outline: 0; }
.ui-time-picker.is-disabled .ui-time-picker__trigger { color: var(--ui-color-disabled); background: var(--ui-color-divider); cursor: not-allowed; }
.ui-time-picker__menu { width: 100%; box-sizing: border-box; display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-2); position: absolute; z-index: 30; top: calc(100% + var(--ui-space-2)); left: 0; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); padding: var(--ui-space-3); background: var(--ui-color-card); box-shadow: var(--ui-shadow-lg); }
.ui-time-picker.is-open .ui-time-picker__menu { display: grid; }
.ui-time-picker__menu .ui-time-slot { min-width: 0; }

.ui-calendar { width: 100%; display: grid; gap: var(--ui-space-4); color: var(--ui-color-text); }
.ui-calendar__controls { height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); }
.ui-calendar__context, .ui-calendar__actions, .ui-calendar__week-navigation, .ui-calendar__timezone { display: flex; align-items: center; }
.ui-calendar__context { min-width: 0; gap: var(--ui-space-3); }
.ui-calendar__actions { min-width: 0; gap: var(--ui-space-4); }
.ui-calendar__timezone { gap: var(--ui-space-1); color: var(--ui-color-text); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-20); white-space: nowrap; }
.ui-calendar__timezone-icon { width: 16px; height: 16px; flex: 0 0 16px; display: block; background: var(--ui-color-info); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ui-calendar__time-picker { width: min(var(--ui-width-control-compact), 34vw); }
.ui-calendar__time-picker .ui-time-picker { width: 100%; }
.ui-calendar__week-navigation { gap: var(--ui-space-2); }
/* No layout override on the Today button: it is the kit's Button, and reaching in
   to set its gap to 2px and pin an 88px width made it the one icon button in the
   system whose icon is jammed against its label. Only the icon's own size stays
   below — the asset is from the 16px set and must not be scaled up.
   Shrinking it does cost the button its leading-icon padding, though: the
   has-leading-icon rule tightens the icon side by one step because a 24px icon
   canvas carries that much visual margin of its own. A 16px glyph carries none,
   so the tightening had nothing to give back and the button sat 8px on the left
   against 12px on the right. The size override restores the size's own inset. */
.ui-calendar__actions [data-calendar-action="today"] .ui-button__icon { width: 16px; height: 16px; flex: 0 0 16px; }
.ui-calendar__actions [data-calendar-action="today"].has-leading-icon:not(.is-icon-only) { padding-left: var(--ui-space-3); }
.ui-calendar__week-navigation strong { min-width: 0; color: var(--ui-color-text); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); text-align: center; white-space: nowrap; }
.ui-calendar__scroll { width: 100%; overflow: visible; }
.ui-calendar__grid { width: 100%; min-width: 0; height: var(--ui-calendar-grid-height); display: flex; flex-direction: column; overflow: visible; box-sizing: border-box; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-card); }
.ui-calendar__row { width: 100%; height: 40px; min-height: 40px; display: flex; align-items: stretch; overflow: visible; flex: 0 0 40px; }
.ui-calendar__corner { width: 112px; min-width: 112px; height: 40px; box-sizing: border-box; flex: 0 0 112px; }
.ui-calendar__date { min-width: 1px; height: 40px; box-sizing: border-box; border-left: 1px solid var(--ui-color-border); flex: 1 0 0; }
.ui-calendar__time { width: 112px; min-width: 112px; height: 40px; box-sizing: border-box; border-top: 1px solid var(--ui-color-border); flex: 0 0 112px; }
.ui-calendar__slot { min-width: 1px; height: 40px; box-sizing: border-box; display: grid; grid-template-rows: repeat(4, 10px); flex: 1 0 0; }
/* The bubble is wider than a day column, so on the last day it hung past the
   grid — and the grid scrolls, so that became 38px of horizontal scroll onto
   nothing. A tooltip that is only visibility:hidden still counts toward
   scrollable overflow; display:none is the only thing that does not. The kit
   already has an edge placement for this, so the last column borrows it rather
   than inventing a second one. */
.ui-calendar__slot:last-child .ui-tooltip { --ui-tooltip-x: 0; right: 0; left: auto; }
.ui-calendar__slot:last-child .ui-tooltip::before { right: 16px; left: auto; transform: translateX(50%) rotate(45deg); }
.ui-calendar__date { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: var(--ui-space-1) 0; color: var(--ui-color-secondary); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); letter-spacing: .75px; line-height: var(--ui-line-height-16); text-transform: uppercase; }
.ui-calendar__date strong { color: var(--ui-color-text); font: inherit; }
.ui-calendar__date.is-current { background: var(--ui-color-available-current-day-surface); }
.ui-calendar__date.is-current::after { width: 0; height: 0; position: absolute; top: 0; right: 0; border-top: 8px solid var(--ui-color-success); border-left: 8px solid transparent; content: ""; }
.ui-calendar__time { display: flex; align-items: center; justify-content: center; padding: 0 var(--ui-space-3); color: var(--ui-color-text); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-bold); letter-spacing: .75px; line-height: var(--ui-line-height-16); text-align: center; text-transform: uppercase; }
.ui-calendar__slot-segment { min-width: 1px; min-height: 0; display: grid; grid-row-end: span 2; grid-template-rows: repeat(2, minmax(0, 1fr)); box-sizing: border-box; border-top: 1px solid var(--ui-color-border); border-left: 1px solid var(--ui-color-border); }
.ui-calendar__slot .ui-tooltip-wrap { width: 100%; height: 100%; display: flex; min-width: 0; }
.ui-calendar__slot-segment:has(.ui-tooltip-wrap:hover), .ui-calendar__slot-segment:has(.ui-tooltip-wrap:focus-within), .ui-calendar__slot-segment:has(.ui-tooltip-wrap.is-calendar-tooltip-active) { position: relative; z-index: 100; }
.ui-calendar__slot:has(.ui-tooltip-wrap:hover), .ui-calendar__slot:has(.ui-tooltip-wrap:focus-within), .ui-calendar__slot:has(.ui-tooltip-wrap.is-calendar-tooltip-active) { position: relative; z-index: 60; }
.ui-calendar__row:has(.ui-tooltip-wrap:hover), .ui-calendar__row:has(.ui-tooltip-wrap:focus-within), .ui-calendar__row:has(.ui-tooltip-wrap.is-calendar-tooltip-active) { position: relative; z-index: 60; }
.ui-calendar__slot .ui-time-slot { min-width: 0; min-height: 0; height: 100%; border: 0; }
.ui-calendar__slot .ui-time-slot:hover:not(:disabled), .ui-calendar__slot .ui-time-slot:focus-visible { border: 0; outline: 0; }
.ui-calendar__slot-segment:has(.ui-time-slot.is-booked-by-others) { background: repeating-linear-gradient(135deg, var(--ui-color-divider) 0 2px, var(--ui-color-card) 2px 6px);  background-attachment: fixed; }
.ui-calendar__slot-segment:has(.ui-time-slot.is-booked-by-you) { background: repeating-linear-gradient(135deg, var(--ui-color-available) 0 2px, var(--ui-color-available-surface) 2px 6px);  background-attachment: fixed; }
.ui-calendar__slot-segment:has(.ui-time-slot.is-booked-by-others) .ui-time-slot, .ui-calendar__slot-segment:has(.ui-time-slot.is-booked-by-you) .ui-time-slot { background: transparent; }
.ui-calendar__slot-segment.is-calendar-selected-range { background: var(--ui-color-info); }
.ui-calendar__slot-segment.is-calendar-selected-range .ui-time-slot { background: transparent; }
/* A picked slot paints after its neighbours, so without a rank of its own it
   covered the tooltip of a slot above it. Ranked below the active tooltip. */
.ui-calendar__slot.is-selected, .ui-calendar__slot-segment.is-selected { position: relative; z-index: 1; }
.ui-calendar__slot .ui-tooltip-wrap.is-calendar-tooltip-active { position: relative; z-index: 101; }
.ui-calendar__slot .ui-tooltip { z-index: 102; white-space: pre-line; transition-delay: 0s; }
.ui-calendar__slot .ui-tooltip-wrap:hover > .ui-tooltip { transition-delay: 350ms; }
/* A closed tooltip is display:none inside the grid, not merely invisible: it is
   absolutely positioned below its cell, and a hidden-but-laid-out box still
   counts toward the scroll area — which is where the empty row under the last
   hour came from. The kit already learned this sideways (see the last-column
   note above); this is the same fault downward. */
.ui-calendar__grid .ui-tooltip { display: none; }
.ui-calendar__grid .ui-tooltip-wrap:hover > .ui-tooltip,
.ui-calendar__grid .ui-tooltip-wrap:focus-within > .ui-tooltip,
.ui-calendar__grid .ui-tooltip-wrap.is-open > .ui-tooltip,
/* The active class is the whole answer to "is this one showing" — it carries
   the visible state as well as the box. Leaning on :hover alongside it meant the
   tooltip the runtime had just opened could still be painted invisible. */
.ui-calendar__grid .ui-tooltip-wrap.is-calendar-tooltip-active > .ui-tooltip { display: block; opacity: 1; visibility: visible; }
.ui-calendar__slot .ui-tooltip-wrap:not(.is-calendar-tooltip-active) > .ui-tooltip { opacity: 0; pointer-events: none; visibility: hidden; transition-delay: 0s; }
.ui-calendar__slot .ui-tooltip-wrap.is-tooltip-disabled > .ui-tooltip { display: none; }
/* 480px suits a card; a host that gives the calendar a definite height (a
   full-screen booking step) sets --ui-calendar-scroll-max: 100% and the week
   fills it instead. */
.ui-calendar--scrollable .ui-calendar__scroll { box-sizing: border-box; min-height: 0; max-height: var(--ui-calendar-scroll-max, 480px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-card); scrollbar-gutter: stable; }
.ui-calendar--scrollable .ui-calendar__grid { border: 0; border-radius: 0; }
/* One line under the dates, and it is the first time row's own — the same line
   every other hour draws, so it runs the full width of the grid.
   It was an inset shadow on the header row for a while, to survive the header
   being scrolled; that shadow paints underneath the cells, so the current day's
   tinted cell covered it and the rule broke exactly under today. */
/* Above the hover lifts. A hovered slot raises its row to z-index 60 (and its
   segment to 100) so the tooltip can escape the grid — which also raised it over
   the sticky dates, so running the pointer along the top row wiped the header.
   The tooltip itself is pinned to the viewport at 102 and still clears this. */
/* The line under the dates travels with them: sticky, the header used to slide
   over the first row and take its top border with it. */
/* On the cells, not on the row. The row is border-box at 40px, so a border on
   it lives in the last pixel of that band — which each 40px cell also occupies,
   and a child's background paints after its parent's border. Today's cell is
   the only one with a background, so the line broke under exactly one column:
   the same failure the inset shadow had, one property later. A cell's own
   border paints above its own background, so it cannot be covered again. */
.ui-calendar--scrollable .ui-calendar__row--header { position: sticky; z-index: 101; top: 0; background: var(--ui-color-card); }
.ui-calendar--scrollable .ui-calendar__row--header > * { border-bottom: 1px solid var(--ui-color-border); }
/* One line under the dates, not two: the header carries it, so the first row of
   slots does not draw its own on top of it. */
.ui-calendar--scrollable .ui-calendar__row--header + .ui-calendar__row .ui-calendar__slot-segment:first-child { border-top: 0; }
/* Only the first half-hour of that row. The second segment's top border is the
   30-minute line inside the hour, so dropping both left the first hour without
   its own half-hour rule. */
.ui-calendar--scrollable .ui-calendar__row--header + .ui-calendar__row .ui-calendar__time { border-top: 0; }
/* The hour label carries a top border of its own, which stacked a second line
   under the header in the time column — the same doubling, one column over. */
.ui-calendar--scrollable .ui-time-slot__tooltip-wrap.is-calendar-tooltip-positioned .ui-tooltip[data-placement="bottom"] { position: fixed; z-index: 102; top: var(--ui-calendar-tooltip-top); bottom: auto; left: var(--ui-calendar-tooltip-left); }
.ui-calendar.is-disabled { opacity: .7; }
.ui-calendar.is-disabled .ui-calendar__actions { pointer-events: none; }
@media (max-width: 640px) { .ui-calendar__scroll { overflow-x: auto; overflow-y: visible; } .ui-calendar__grid { min-width: calc(112px + var(--ui-calendar-day-count) * 72px); } }
.ui-calendar--teacher-availability { gap: var(--ui-space-3); }
.ui-calendar__teacher-controls { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); }
.ui-calendar__teacher-availability-label { margin: 0; color: var(--ui-color-info); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); }
.ui-calendar__teacher-week-navigation { min-width: 0; display: flex; align-items: center; gap: var(--ui-space-2); }
.ui-calendar__teacher-grid-shell { width: 100%; overflow-x: auto; }
.ui-calendar__teacher-grid { min-width: 672px; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-border); }
.ui-calendar__teacher-header, .ui-calendar__teacher-schedule { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 1px; background: var(--ui-color-border); }
/* Shrinks with the space it is in: fixed at 432px it forced a dialog taller than
   the frame, and then two scrollbars competed inside it. */
.ui-calendar__teacher-scroll { width: 100%; max-height: min(432px, 48vh); overflow-y: auto; overscroll-behavior: contain; }
/* The dates stay put while the hours scroll under them — the same promise the
   weekly grid makes, and this grid is the one people scroll the most. */
.ui-calendar__teacher-header { position: sticky; z-index: 2; top: 0; }
/* Inside a dialog there is one scroll, and it is this grid's.
   The dialog's body used to scroll as well, so the calendar had a scrollbar
   inside a scrollbar and the dates left the top of the screen either way. The
   grid takes the height the dialog has to give and keeps its own. */
.ui-modal__body:has(.ui-calendar--teacher-availability) { display: grid; min-height: 0; overflow: hidden; }
.ui-modal__body .ui-calendar--teacher-availability { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.ui-modal__body .ui-calendar__teacher-grid-shell { min-height: 0; display: grid; }
.ui-modal__body .ui-calendar__teacher-grid { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ui-modal__body .ui-calendar__teacher-scroll { max-height: none; }
.ui-calendar__teacher-row { display: contents; }
.ui-calendar__teacher-date { position: relative; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: var(--ui-space-1); border: 0; padding: 0; color: var(--ui-color-text); background: var(--ui-color-card); font: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-regular); line-height: var(--ui-line-height-22); cursor: pointer; }
.ui-calendar__teacher-date strong { color: inherit; font: inherit; }
.ui-calendar__teacher-date.is-current { background: var(--ui-color-available-current-day-surface); }
.ui-calendar__teacher-date.is-current::after { width: 0; height: 0; position: absolute; top: 0; right: 0; border-top: 8px solid var(--ui-color-success); border-left: 8px solid transparent; content: ""; }
.ui-calendar__teacher-date:hover, .ui-calendar__teacher-date:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-calendar__teacher-date.is-current:hover, .ui-calendar__teacher-date.is-current:focus-visible { background: var(--ui-color-available-current-day-surface); }
.ui-calendar__teacher-cell { min-height: 32px; display: grid; place-items: center; padding: 0 var(--ui-space-1); color: transparent; background: var(--ui-color-divider); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-semibold); letter-spacing: .04em; line-height: var(--ui-line-height-16); text-align: center; }
.ui-calendar__teacher-cell.is-available { color: var(--ui-color-card); background: var(--ui-color-available); }
.ui-calendar__teacher-cell span { white-space: nowrap; }
.ui-calendar--teacher-availability.is-disabled .ui-calendar__teacher-week-navigation { pointer-events: none; }
.ui-calendar--compact-availability { width: 100%; gap: var(--ui-space-1); }
.ui-calendar__compact-scroll { width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ui-calendar__compact-scroll::-webkit-scrollbar { display: none; }
.ui-calendar__compact-grid { width: 100%; min-width: 0; display: grid; grid-template-columns: 72px repeat(7, minmax(0, 1fr)); color: var(--ui-color-text); }
.ui-calendar__compact-header, .ui-calendar__compact-row { display: contents; }
.ui-calendar__compact-corner, .ui-calendar__compact-date { min-height: 38px; }
/* Weekday and date read as one label — "Mo 22" — and only break onto two lines
   when the column is too narrow to hold them side by side. A grid stacked them
   always, which cost a row of height for no reason. */
.ui-calendar__compact-date { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 var(--ui-space-1); color: var(--ui-color-title); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-regular); line-height: var(--ui-line-height-18); text-align: center; }
.ui-calendar__compact-date strong { color: inherit; font: inherit; }
.ui-calendar__compact-time, .ui-calendar__compact-cell { min-height: 26px; box-sizing: border-box; border-top: 1px solid var(--ui-color-border); border-left: 1px solid var(--ui-color-border); }
.ui-calendar__compact-time { display: grid; place-items: center; color: var(--ui-color-title); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-regular); line-height: var(--ui-line-height-18); text-align: center; }
.ui-calendar__compact-row:last-child .ui-calendar__compact-time { border-bottom-left-radius: var(--ui-radius-md); }
.ui-calendar__compact-row:last-child .ui-calendar__compact-cell:last-child { border-bottom-right-radius: var(--ui-radius-md); }
.ui-calendar__compact-cell:last-child { border-right: 1px solid var(--ui-color-border); }
.ui-calendar__compact-row:last-child .ui-calendar__compact-time, .ui-calendar__compact-row:last-child .ui-calendar__compact-cell { border-bottom: 1px solid var(--ui-color-border); }
.ui-calendar__compact-cell.is-available { background: var(--ui-color-available); }
.ui-calendar__compact-cell.is-unavailable { background: var(--ui-color-card); }
.ui-calendar__compact-tooltip { min-width: 0; min-height: 26px; display: flex; position: relative; z-index: 1; }
.ui-calendar__compact-tooltip:hover, .ui-calendar__compact-tooltip:focus-within { z-index: 2; }
.ui-calendar__compact-tooltip > .ui-calendar__compact-cell { width: 100%; height: 100%; min-height: 26px; cursor: default; }
.ui-calendar__compact-tooltip > .ui-tooltip { white-space: nowrap; }
.ui-calendar__compact-timezone { margin: 0; color: var(--ui-color-disabled); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); text-align: center; }
.ui-calendar--lesson-record { overflow: hidden; gap: var(--ui-space-6); border-radius: var(--ui-radius-lg); padding: var(--ui-space-6); background: var(--ui-color-card); }
.ui-calendar__record-header { min-height: 50px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-6); }
.ui-calendar__record-header h2 { margin: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-20); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-28); }
.ui-calendar__record-summary { display: flex; align-items: stretch; gap: var(--ui-space-6); }
.ui-calendar__record-stat { min-width: 132px; display: grid; align-content: start; gap: var(--ui-space-1); }
.ui-calendar__record-stat + .ui-calendar__record-stat { border-left: 1px solid var(--ui-color-divider); padding-left: var(--ui-space-6); }
.ui-calendar__record-stat-label { display: inline-flex; align-items: center; gap: var(--ui-space-1); color: var(--ui-color-disabled); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); white-space: nowrap; }
.ui-calendar__record-stat-label i { width: 8px; height: 8px; display: block; flex: 0 0 8px; border-radius: var(--ui-radius-full); background: var(--ui-color-info); }
.ui-calendar__record-stat-label i.is-success { background: var(--ui-color-success); }
.ui-calendar__record-stat strong { color: var(--ui-color-title); font-size: var(--ui-font-size-20); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-28); }
.ui-calendar__record-scroll { width: 100%; overflow-x: auto; }
.ui-calendar__record-grid { width: max-content; min-width: 100%; display: grid; grid-template-columns: 34px repeat(var(--ui-record-month-count, 12), max-content); align-items: start; column-gap: var(--ui-space-3); }
.ui-calendar__record-days { padding-top: calc(22px + 8px); display: grid; grid-template-rows: repeat(7, 20px); gap: var(--ui-space-half); color: var(--ui-color-disabled); font-size: var(--ui-font-size-10); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); text-align: right; }
.ui-calendar__record-days span { display: flex; align-items: center; justify-content: flex-end; }
.ui-calendar__record-month { display: grid; grid-template-rows: 22px auto; gap: var(--ui-space-2); }
.ui-calendar__record-month h3 { margin: 0; color: var(--ui-color-disabled); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); text-align: center; white-space: nowrap; }
.ui-calendar__record-month.is-current h3 { color: var(--ui-color-title); font-weight: var(--ui-font-weight-bold); }
.ui-calendar__record-weeks { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 20px); grid-auto-columns: 20px; gap: var(--ui-space-half); }
.ui-calendar__record-cell { width: 20px; height: 20px; display: block; border-radius: var(--ui-radius-xs); background: var(--ui-color-divider); }
.ui-calendar__record-cell.is-info { background: var(--ui-color-info); }
.ui-calendar__record-cell.is-success { background: var(--ui-color-success); }
.ui-calendar__record-cell.is-mixed { background: linear-gradient(to bottom, var(--ui-color-info) 50%, var(--ui-color-success) 50%); }
.ui-calendar__record-cell.is-selected { box-shadow: inset 0 0 0 1px var(--ui-color-text); }
.ui-calendar__record-cell.is-out-of-range { background: var(--ui-color-card); }
@media (max-width: 720px) { .ui-calendar--lesson-record { padding: var(--ui-space-4); } .ui-calendar__record-header { align-items: flex-start; flex-direction: column; } .ui-calendar__record-summary { width: 100%; } }
@media (max-width: 720px) { .ui-calendar__controls { align-items: flex-start; flex-direction: column; } .ui-calendar__actions { width: 100%; justify-content: space-between; } .ui-calendar__time-picker { width: min(100%, var(--ui-width-control-compact)); } .ui-calendar__teacher-controls { align-items: flex-start; flex-direction: column; } .ui-calendar__teacher-week-navigation { width: 100%; justify-content: space-between; gap: var(--ui-space-2); } }

/* A column of sections — the settings navigation. Not the Sidebar, which is the
   app's own rail with its icons and pinning, and not Tabs, which are horizontal
   and belong to one page: this is a list of destinations inside a section.
   Every row carries the active marker so the labels never shift by the 4px the
   marker occupies; it simply has nothing to show until the row is the one. */
.ui-side-nav { width: 100%; display: flex; flex-direction: column; gap: var(--ui-space-1); overflow: hidden; border-radius: var(--ui-radius-lg); padding: var(--ui-space-2) 0; background: var(--ui-color-card); }
.ui-side-nav__item { width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--ui-space-3); border: 0; border-radius: var(--ui-radius-md); padding: 0 var(--ui-space-4) 0 0; color: var(--ui-color-placeholder); background: transparent; font-family: inherit; font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-22); text-align: left; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.ui-side-nav__indicator { width: 4px; height: 24px; flex: 0 0 4px; border-radius: var(--ui-radius-full); background: transparent; }
.ui-side-nav__item.is-active { color: var(--ui-color-title); }
.ui-side-nav__item.is-active .ui-side-nav__indicator { background: var(--ui-color-primary); }
.ui-side-nav__item:not(:disabled):not(.is-active):hover { color: var(--ui-color-text); background: var(--ui-color-divider); }
.ui-side-nav__item:focus-visible { outline: 2px solid var(--ui-color-info); outline-offset: -2px; }
.ui-side-nav__item:disabled { color: var(--ui-color-disabled); cursor: not-allowed; }

.ui-footer { width: 100%; color: var(--ui-color-text); background: var(--ui-color-card); }
.ui-footer__upper { width: min(100%, 1128px); display: grid; grid-template-columns: repeat(var(--ui-footer-column-count, 1), minmax(0, 1fr)); margin: 0 auto; padding: var(--ui-space-8) var(--ui-space-4); }
.ui-footer__columns { display: contents; }
.ui-footer__column { min-width: 0; display: grid; align-content: start; }
.ui-footer__group { display: grid; align-content: start; gap: var(--ui-space-4); }
.ui-footer__group + .ui-footer__group { padding-top: var(--ui-space-2); }
.ui-footer__group h2 { margin: 0; color: var(--ui-color-title); font-size: var(--ui-font-size-16); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-24); }
.ui-footer__links { display: grid; }
.ui-footer__link { padding-bottom: var(--ui-space-2); color: var(--ui-color-text); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-18); text-decoration: none; }
.ui-footer__link:hover, .ui-footer__link:focus-visible, .ui-footer__legal-link:hover, .ui-footer__legal-link:focus-visible { outline: 0; color: var(--ui-color-title); text-decoration: underline; text-underline-offset: 2px; }
.ui-footer__utilities { min-width: 0; display: grid; align-content: start; gap: var(--ui-space-4); }
.ui-footer__utilities .ui-select { width: 100%; }
.ui-footer__copyright-band { min-height: 54px; display: grid; place-items: start center; border-top: 1px solid var(--ui-color-divider); padding: var(--ui-space-7) var(--ui-space-4) 0; }
.ui-footer__copyright { color: var(--ui-color-secondary); font-size: var(--ui-font-size-14); font-weight: var(--ui-font-weight-regular); line-height: var(--ui-line-height-22); text-align: center; }
.ui-footer__bottom { width: 100%; }
.ui-footer__bottom-inner { width: min(100%, 1128px); min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-6); margin: 0 auto; padding: var(--ui-space-7) var(--ui-space-4); }
.ui-footer__legal, .ui-footer__social { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-6); }
.ui-footer__legal-link { color: var(--ui-color-text); font-size: var(--ui-font-size-12); font-weight: var(--ui-font-weight-regular); line-height: var(--ui-line-height-18); text-decoration: none; }
.ui-footer__social-link { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--ui-radius-full); color: var(--ui-color-text); }
.ui-footer__social-link:hover, .ui-footer__social-link:focus-visible { outline: 0; background: var(--ui-color-divider); }
.ui-footer__social-icon { width: 24px; height: 24px; }
@media (max-width: 960px) { .ui-footer__upper { grid-template-columns: 1fr; gap: var(--ui-space-7); } .ui-footer__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ui-space-7); } .ui-footer__utilities { width: min(100%, 360px); } }
@media (max-width: 640px) { .ui-footer__columns { grid-template-columns: 1fr; } .ui-footer__bottom-inner { align-items: flex-start; flex-direction: column; } }

/* Preview adapters keep open shared overlays legible in static component examples. */
[data-ui-preview-stage="anchored"] .ui-popup, [data-ui-preview-stage="anchored"] .ui-popconfirm { width: 100%; display: grid; justify-items: center; gap: var(--ui-space-3); }
[data-ui-preview-stage="anchored"] .ui-popup__surface, [data-ui-preview-stage="anchored"] .ui-popconfirm__surface { width: min(100%, 320px); position: static; opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
[data-ui-preview-stage="anchored"] .ui-popup.is-open > .ui-popup__surface, [data-ui-preview-stage="anchored"] .ui-popconfirm.is-open > .ui-popconfirm__surface { transform: none; }
[data-ui-preview-stage="modal"] .ui-modal-stage { min-height: 360px; }
[data-ui-preview-stage="modal"] .ui-modal__layer { padding: var(--ui-space-3); }
[data-ui-preview-stage="modal"] .ui-modal { --ui-modal-width: 100%; }
[data-ui-preview-stage="select-flow"] .ui-select.is-open .ui-select__menu { position: relative; top: auto; left: auto; margin-top: var(--ui-space-2); }
[data-ui-preview-stage="combobox-overlay"] [data-component="combobox"].is-open { z-index: 30; }
[data-ui-preview-stage="combobox-overlay"] [data-component="combobox"].is-open .ui-select__menu { position: absolute; top: calc(100% + var(--ui-space-2)); margin-top: 0; z-index: 30; }

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-progress-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes ui-skeleton-loading { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .ui-button, .ui-button--plus, .ui-switch::after, .ui-progress__track i, .ui-disclosure__icon, .ui-time-picker__suffix, .ui-drawer__layer, .ui-drawer, .ui-drawer__content { transition: none; } .ui-drawer { transform: none; } .ui-drawer__content { opacity: 1; } .ui-button__spinner, .ui-time-slot__spinner, .ui-timeline__dot--pending, .ui-progress.is-indeterminate .ui-progress__track i, .ui-skeleton.is-animated .ui-skeleton__block { animation: none; } }