/* =============================================================================
   Saga product style — vanilla component layer
   Requires tokens.css then base.css. Framework-free: <link> this after both and
   use the classes below from any HTML. Every color, size and duration is a
   semantic token (Tier 2); the only literal lengths are 1px hairlines and 0.
   Focus rings come from base.css (DS-006) and are never overridden here.
   Ledger: guide/decisions.md DS-100+ (guide/_ledger-components.md).
   Sections: icons · buttons · segmented · cards · layout (grid, list rows,
   empty state) · forms (inputs, select, choice controls, date picker) · tabs ·
   tables · charts · chips & badges · notices · modal & steps · toasts ·
   popover & tooltip · skeleton & progress · shell (nav, topbar, page) ·
   calendar · avatar.
   ============================================================================= */

/* ── Icons ─────────────────────────────────────────────────────────────────── */
.saga-icon { display: inline-block; font-size: 1.2em; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.2em; }
.saga-icon--lg { font-size: 2em; }
.saga-icon--xl { font-size: 3em; }
iconify-icon { display: inline-block; vertical-align: -0.125em; }

/* ── Buttons (DS-017) ──────────────────────────────────────────────────────── */
.saga-btn {
	--_bg: var(--btn-surface-primary);
	--_bg-hover: var(--btn-surface-primary-hover);
	--_fg: var(--btn-text-primary);
	--_border: transparent;
	--_hover-filter: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	border: 1px solid var(--_border);
	border-radius: var(--btn-radius);
	background: var(--_bg);
	color: var(--_fg);
	font-weight: var(--btn-font-weight);
	line-height: var(--leading-tight);
	white-space: nowrap;
	text-decoration: none;
	user-select: none;
	cursor: pointer;
	position: relative;
	transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}
.saga-btn > iconify-icon, .saga-btn > svg { font-size: 1.2em; width: 1em; height: 1em; flex-shrink: 0; }
.saga-btn:not(:disabled, [aria-disabled="true"]):hover { background: var(--_bg-hover); filter: var(--_hover-filter); }
.saga-btn:not(:disabled, [aria-disabled="true"]):active { filter: brightness(0.86); }

.saga-btn--primary { --_bg: var(--btn-surface-primary); --_bg-hover: var(--btn-surface-primary-hover); --_fg: var(--btn-text-primary); --_border: transparent; } /* explicit alias of the default */
.saga-btn--secondary { --_bg: var(--btn-surface-secondary); --_bg-hover: var(--color-bg-secondary); --_fg: var(--btn-text-secondary); --_border: var(--btn-border-secondary); }
.saga-btn--quiet { --_bg: transparent; --_bg-hover: var(--btn-surface-quiet-hover); --_fg: var(--color-primary); }
.saga-btn--danger { --_bg: var(--btn-surface-danger); --_bg-hover: var(--btn-surface-danger); --_hover-filter: brightness(0.92); }
.saga-btn--affirmative { --_bg: var(--btn-surface-affirmative); --_bg-hover: var(--btn-surface-affirmative); --_hover-filter: brightness(0.92); }
/* Caution confirm ("allowed, but this has consequences"): the one amber fill, legible under white (DS-112). */
.saga-btn--caution { --_bg: var(--color-warning-strong); --_bg-hover: var(--color-warning-strong); --_hover-filter: brightness(0.92); }

.saga-btn--block { display: flex; width: 100%; }
.saga-btn--icon { padding: var(--btn-padding-y); aspect-ratio: 1; }
.saga-btn--icon.saga-btn--quiet { --_fg: var(--color-text-secondary); --_bg-hover: var(--color-bg-tertiary); }
.saga-btn--icon.saga-btn--quiet:not(:disabled):hover { color: var(--color-text); }
/* --sm comes after --icon so a small icon button takes the small padding (28px square). */
.saga-btn--sm { padding: calc(var(--btn-padding-y) * 0.6) calc(var(--btn-padding-x) * 0.6); font-size: var(--text-sm); }
.saga-btn--icon.saga-btn--sm { padding: var(--space-xs); font-size: var(--text-base); } /* 28px square at the 15px root */

/* Mode toggle ("Show Bulk Actions"): while the mode is on the button sits in the
   quiet-hover wash with blue semibold text and aria-pressed="true" (DS-113). */
.saga-btn[aria-pressed="true"] { --_bg: var(--btn-surface-quiet-hover); --_bg-hover: var(--btn-surface-quiet-hover); --_fg: var(--color-primary); --_border: transparent; font-weight: var(--weight-semibold); }
/* Status-filled toggle (attendance marks): outlined at rest; pressed fills with
   the meaning set on --_status (inline or by a parent), default primary (DS-113). */
.saga-btn--status { --_bg: var(--btn-surface-secondary); --_bg-hover: var(--color-bg-secondary); --_fg: var(--btn-text-secondary); --_border: var(--btn-border-secondary); }
.saga-btn--status[aria-pressed="true"] { --_bg: var(--_status, var(--color-primary)); --_bg-hover: var(--_status, var(--color-primary)); --_fg: var(--color-primary-contrast); --_border: transparent; --_hover-filter: brightness(0.92); }

/* Link-styled button: an action inside a table cell or sentence that must be a
   <button> but read as a link. */
.saga-link { appearance: none; display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--color-primary); text-decoration: none; cursor: pointer; }
.saga-link:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 0.15em; }
.saga-link:disabled { color: var(--color-text-disabled); cursor: not-allowed; text-decoration: none; }

/* "Add X": quiet button whose leading mark is a filled blue circle. */
.saga-btn--add { --_bg: transparent; --_bg-hover: var(--btn-surface-quiet-hover); --_fg: var(--color-primary); }
.saga-btn__plus {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.2em; height: 1.2em; flex-shrink: 0;
	border-radius: var(--radius-full);
	background: var(--color-primary); color: var(--color-primary-contrast);
	font-size: 1.2em; line-height: 1;
}
.saga-btn__plus > iconify-icon, .saga-btn__plus > svg { font-size: 0.9em; width: 1em; height: 1em; }

/* Dotted-outline tertiary ("Add drop-in student"). */
.saga-btn--dashed {
	--_bg: transparent; --_bg-hover: var(--btn-surface-quiet-hover); --_fg: var(--color-primary); --_border: var(--color-primary);
	border-style: dashed; border-radius: var(--radius-sm);
	padding: calc(var(--btn-padding-y) * 0.5) calc(var(--btn-padding-x) * 0.6);
	font-size: var(--text-sm);
}

/* Disabled is a fill, never opacity (DS-016/017). */
.saga-btn:disabled, .saga-btn[aria-disabled="true"] {
	--_bg: var(--btn-surface-disabled); --_fg: var(--btn-text-disabled); --_border: transparent;
	cursor: not-allowed; filter: none;
}
.saga-btn--dashed:disabled, .saga-btn--dashed[aria-disabled="true"], .saga-btn--secondary:disabled, .saga-btn--secondary[aria-disabled="true"] { --_border: var(--btn-surface-disabled); --_bg: var(--color-bg); }

/* Loading: label goes transparent, a ring spins in its place. */
.saga-btn[data-loading] { color: transparent; pointer-events: none; }
.saga-btn[data-loading]::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 1em; height: 1em; border-radius: var(--radius-full);
	border: 2px solid var(--_fg); border-right-color: transparent;
	animation: saga-spin calc(var(--motion-slow) * 3) linear infinite;
}
@keyframes saga-spin { to { transform: rotate(1turn); } }

/* ── Segmented control ─────────────────────────────────────────────────────── */
.saga-segmented {
	display: inline-flex; padding: var(--space-2xs);
	background: var(--color-bg-tertiary); border-radius: var(--btn-radius);
}
.saga-segmented > button {
	border: 0; background: transparent; color: var(--color-text);
	padding: calc(var(--btn-padding-y) * 0.75) var(--space-md);
	border-radius: calc(var(--btn-radius) - var(--space-2xs));
	font-weight: var(--btn-font-weight); font-size: var(--text-sm); line-height: var(--leading-tight); white-space: nowrap;
	transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.saga-segmented > button:hover { background: var(--color-bg); }
.saga-segmented > button:is([aria-pressed="true"], [aria-checked="true"]) { background: var(--color-primary); color: var(--color-primary-contrast); }

/* ── Cards (DS-015) ────────────────────────────────────────────────────────── */
.saga-card {
	background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius);
	box-shadow: var(--card-shadow); padding: var(--card-padding);
	transition: box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.saga-card:has(> .saga-card__header, > .saga-card__body, > .saga-card__footer) { padding: 0; display: flex; flex-direction: column; }
.saga-card__header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--card-padding); border-bottom: 1px solid var(--color-border); }
.saga-card__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); flex: 1; }
.saga-card__body { padding: var(--card-padding); flex: 1; }
.saga-card__footer { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--card-padding); border-top: 1px solid var(--color-border); background: var(--color-bg-secondary); border-radius: 0 0 var(--card-radius) var(--card-radius); }
.saga-card--interactive { cursor: pointer; }
.saga-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-hover); }
.saga-card--selected { border-color: var(--color-primary); background: var(--color-notice-bg); }
.saga-card--stat { border-top: var(--border-width-emphasis) solid var(--color-primary); padding: var(--space-md); display: grid; gap: var(--space-2xs); }
.saga-card__value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-primary); line-height: var(--leading-tight); }
.saga-card__label { font-weight: var(--weight-semibold); }
.saga-card__caption { font-size: var(--text-sm); color: var(--color-text-secondary); }
/* Title row inside a plain card: heading left, a control or meta right. */
.saga-card__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.saga-card__title-row > :is(h2, h3, h4, .saga-card__title) { margin: 0; }
/* Placeholder slot ("Add Day Type"): dashed, on the well surface, no shadow. */
.saga-card--empty { border: var(--border-width-emphasis) dashed var(--color-border-hover); background: var(--color-bg-secondary); box-shadow: none; text-align: center; color: var(--color-text-secondary); }

/* ── Layout: grid, list rows, empty state ──────────────────────────────────── */
.saga-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.saga-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saga-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.saga-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.saga-grid--stats, .stat-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.saga-grid--lg { gap: var(--space-lg); }

/* Bordered row stack: a list of editable things that is not quite a table (All
   Periods). Hairline between rows; --edge paints a 3px meaning edge from --_edge;
   --ghost dims a row by color and surface, never opacity. */
.saga-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.saga-list__row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-border); }
.saga-list__row:first-child { border-top: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.saga-list__row:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.saga-list__row:only-child { border-radius: var(--radius-md); }
.saga-list__row--edge { box-shadow: inset 3px 0 0 var(--_edge, var(--color-primary)); }
.saga-list__row--ghost { color: var(--color-text-muted); background: var(--color-bg-secondary); }
.saga-list__row[aria-selected="true"] { background: var(--color-primary-light); }
.saga-list--interactive > .saga-list__row:hover { background: var(--color-bg-secondary); }
.saga-list__main { flex: 1; min-width: 0; }
.saga-list__title { font-weight: var(--weight-semibold); }
.saga-list__meta { font-size: var(--text-sm); color: var(--color-text-secondary); }
.saga-list__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; }
.saga-list__handle { display: inline-flex; color: var(--color-text-muted); cursor: grab; font-size: 1.2em; }

/* Non-table empty state: centred, dashed, says what is empty and the one action that fills it. */
.saga-empty { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-xl); text-align: center; color: var(--color-text-secondary); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.saga-empty__icon { display: inline-flex; font-size: 2em; color: var(--color-text-muted); }
.saga-empty__title { font-weight: var(--weight-semibold); color: var(--color-text); }

/* ── Forms (DS-016) ────────────────────────────────────────────────────────── */
.saga-field { display: grid; gap: var(--space-xs); align-content: start; }
.saga-field--inline { grid-template-columns: max-content 1fr; column-gap: var(--space-md); align-items: center; }
.saga-field--inline > .saga-help, .saga-field--inline > .saga-error { grid-column: 2; }
.saga-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
/* DS-064: required is unmarked by default; .is-required exists for apps that must mark it */
.saga-label.is-required::after { content: " *"; color: var(--color-danger); }
.saga-help { font-size: var(--text-sm); color: var(--color-text-secondary); }
.saga-error { font-size: var(--text-sm); color: var(--color-danger); }
.saga-field[data-invalid] .saga-help { display: none; }

.saga-input, .saga-textarea, .saga-select > select, .saga-select__trigger {
	display: block; width: 100%; min-height: var(--input-height);
	padding: var(--input-padding); background: var(--input-bg); color: var(--color-text);
	border: 1px solid var(--input-border-color); border-radius: var(--input-radius);
	font: inherit; line-height: var(--leading-normal);
	transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.saga-textarea { min-height: calc(var(--input-height) * 2.5); resize: vertical; }
:is(.saga-input, .saga-textarea, .saga-select > select, .saga-select__trigger):hover { border-color: var(--input-border-color-hover); }
:is(.saga-input, .saga-textarea, .saga-select > select, .saga-select__trigger):focus { border-color: var(--input-border-color-focus); }
:is(.saga-input, .saga-textarea):read-only:not(:disabled) { border-color: var(--input-border-color-readonly); background: var(--color-bg-secondary); }
:is(.saga-input, .saga-textarea, .saga-select > select, .saga-select__trigger)[aria-invalid="true"],
.saga-field[data-invalid] :is(.saga-input, .saga-textarea, .saga-select > select, .saga-select__trigger) { border-color: var(--input-border-color-invalid); }
:is(.saga-input, .saga-textarea, .saga-select > select, .saga-select__trigger):disabled {
	background: var(--input-bg-disabled); color: var(--input-color-disabled); border-color: var(--input-border-color-readonly); cursor: not-allowed;
}
.saga-input--sm { min-height: calc(var(--input-height) * 0.8); font-size: var(--text-sm); }

/* Select: a native <select> or a button trigger, both with the blue chevron.
   The custom listbox (.saga-select__menu) is styled now, wired by JS later. */
.saga-select { position: relative; display: block; }
.saga-select > select, .saga-select__trigger { appearance: none; padding-right: calc(var(--space-lg) + var(--space-sm)); text-align: left; cursor: pointer; }
.saga-select__trigger { display: flex; align-items: center; gap: var(--space-sm); }
.saga-select__trigger > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saga-select::after {
	content: ""; position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%);
	border: 0.35em solid transparent; border-top-color: var(--color-primary); border-bottom: 0; pointer-events: none;
}
.saga-select:has(> :disabled)::after { border-top-color: var(--color-text-disabled); }
.saga-select__menu {
	position: absolute; left: 0; top: calc(100% + var(--space-xs)); min-width: 100%; max-height: 18rem; overflow: auto;
	margin: 0; padding: var(--space-xs) 0; list-style: none;
	background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
	box-shadow: var(--shadow-popover); z-index: var(--z-dropdown);
}
.saga-select__menu[hidden] { display: none; }
.saga-select__search { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-xs); }
/* The option may be the <li> itself or a <button role="option"> inside it; both get the same look. */
.saga-select__option { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.saga-select__option:hover, .saga-select__option[data-active], .saga-select__option:focus-visible { background: var(--color-bg-tertiary); }
.saga-select__option[aria-selected="true"] { background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--weight-semibold); }
.saga-select__option[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
.saga-select__footer { border-top: 1px solid var(--color-border); margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm) 0; }
.saga-select__trigger.is-placeholder > span { color: var(--input-color-placeholder); font-style: italic; }
.saga-select--inline { display: inline-block; width: auto; }
.saga-select--inline > select, .saga-select--inline > .saga-select__trigger { display: inline-flex; width: auto; }
.saga-select--sm > select, .saga-select--sm > .saga-select__trigger { min-height: calc(var(--input-height) * 0.8); font-size: var(--text-sm); }
.saga-select--sm::after { right: var(--space-sm); }

/* Choice controls — drawn with appearance:none so they take tokens. Sized by
   --space-md (16px) so they scale with the text-size preference. */
.saga-check { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; user-select: none; }
.saga-check:has(> :disabled) { color: var(--color-text-disabled); cursor: not-allowed; }
.saga-checkbox, .saga-radio {
	appearance: none; margin: 0; flex-shrink: 0; width: var(--space-md); height: var(--space-md);
	border: 1px solid var(--input-border-color-hover); background: var(--input-bg); cursor: pointer; position: relative;
	transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.saga-checkbox { border-radius: var(--radius-xs); }
.saga-radio { border-radius: var(--radius-full); }
:is(.saga-checkbox, .saga-radio):hover { border-color: var(--color-primary); }
:is(.saga-checkbox, .saga-radio):checked { background: var(--color-primary); border-color: var(--color-primary); }
.saga-checkbox:checked::after {
	content: ""; position: absolute; left: 30%; top: 8%; width: 30%; height: 60%;
	border: solid var(--color-primary-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.saga-checkbox:indeterminate { background: var(--color-primary); border-color: var(--color-primary); }
.saga-checkbox:indeterminate::after { content: ""; position: absolute; inset: 45% 20%; background: var(--color-primary-contrast); }
.saga-radio:checked::after { content: ""; position: absolute; inset: var(--space-xs); border-radius: var(--radius-full); background: var(--color-primary-contrast); }
:is(.saga-checkbox, .saga-radio):disabled { background: var(--input-bg-disabled); border-color: var(--color-gray-light); cursor: not-allowed; }
:is(.saga-checkbox, .saga-radio):disabled:checked { background: var(--color-gray); border-color: var(--color-gray); }

.saga-toggle {
	appearance: none; margin: 0; flex-shrink: 0; cursor: pointer; position: relative;
	width: calc(var(--space-xl) + var(--space-xs)); height: calc(var(--space-md) + var(--space-xs));
	border-radius: var(--radius-full); background: var(--color-gray-light); border: 0;
	transition: background var(--motion-fast) var(--ease-out);
}
.saga-toggle::after {
	content: ""; position: absolute; top: var(--space-2xs); left: var(--space-2xs);
	width: var(--space-md); height: var(--space-md); border-radius: var(--radius-full);
	background: var(--color-bg); box-shadow: var(--shadow-sm);
	transition: transform var(--motion-fast) var(--ease-out);
}
.saga-toggle:checked { background: var(--color-primary); }
.saga-toggle:checked::after { transform: translateX(var(--space-md)); }
.saga-toggle:disabled { background: var(--color-bg-tertiary); cursor: not-allowed; }
.saga-toggle:disabled::after { background: var(--color-gray-lighter); }

/* Date picker: an input-shaped trigger with a trailing calendar glyph, and a
   264px popover holding month nav and a 7 × 32px day grid (date_picker.png).
   Never a native date input. */
.saga-datepicker { position: relative; display: inline-block; }
.saga-datepicker__trigger {
	display: inline-flex; align-items: center; gap: var(--space-sm); width: auto; min-width: 9em; min-height: var(--input-height);
	padding: var(--input-padding); background: var(--input-bg); color: var(--color-text);
	border: 1px solid var(--input-border-color); border-radius: var(--input-radius);
	font: inherit; line-height: var(--leading-normal); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
	transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.saga-datepicker__trigger > span { flex: 1; }
.saga-datepicker__trigger > iconify-icon, .saga-datepicker__trigger > svg, .saga-datepicker__icon { font-size: 1.2em; width: 1em; height: 1em; flex-shrink: 0; color: var(--color-text-secondary); }
.saga-datepicker__trigger:hover { border-color: var(--input-border-color-hover); }
.saga-datepicker__trigger:focus, .saga-datepicker__trigger[aria-expanded="true"] { border-color: var(--input-border-color-focus); }
.saga-datepicker__trigger[aria-invalid="true"] { border-color: var(--input-border-color-invalid); }
.saga-datepicker__trigger:disabled { background: var(--input-bg-disabled); color: var(--input-color-disabled); border-color: var(--input-border-color-readonly); cursor: not-allowed; }
.saga-datepicker__trigger.is-placeholder > span { color: var(--input-color-placeholder); font-style: italic; }
.saga-datepicker__popover {
	position: absolute; left: 0; top: calc(100% + var(--space-xs)); width: 264px; padding: var(--space-md);
	background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-popover); z-index: var(--z-dropdown);
}
.saga-datepicker__popover[hidden] { display: none; }
.saga-datepicker__popover--static { position: static; display: inline-block; }
.saga-datepicker__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.saga-datepicker__nav > .saga-btn { --_fg: var(--color-primary); }
.saga-datepicker__month { flex: 1; text-align: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.saga-datepicker__grid { display: grid; grid-template-columns: repeat(7, var(--space-xl)); justify-content: space-between; row-gap: var(--space-2xs); font-size: var(--text-sm); text-align: center; }
.saga-datepicker__weekday { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); line-height: var(--space-lg); }
.saga-datepicker__day {
	appearance: none; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0;
	width: var(--space-xl); height: var(--space-xl); border: 0; border-radius: var(--radius-md);
	background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; cursor: pointer;
	transition: background var(--motion-instant) var(--ease-out);
}
.saga-datepicker__day:hover { background: var(--color-bg-tertiary); }
.saga-datepicker__day--muted { color: var(--color-text-muted); }
.saga-datepicker__day--today { font-weight: var(--weight-bold); }
.saga-datepicker__day[aria-selected="true"] { background: var(--color-primary); color: var(--color-primary-contrast); font-weight: var(--weight-semibold); box-shadow: 0 0 0 var(--border-width-emphasis) var(--color-primary-light); }
.saga-datepicker__day:disabled { color: var(--color-text-muted); background: transparent; cursor: not-allowed; }

/* Search: pill input with a leading icon slot; italic placeholder from base. */
.saga-search { position: relative; display: block; }
.saga-search > .saga-input { border-radius: var(--radius-full); padding-left: calc(var(--space-xl) + var(--space-xs)); }
.saga-search__icon { position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%); display: inline-flex; font-size: 1.2em; color: var(--color-text-muted); pointer-events: none; }
.saga-search > .saga-input:focus ~ .saga-search__icon { color: var(--color-primary); }

/* ── Tabs (DS-007) ─────────────────────────────────────────────────────────── */
.saga-tabs { display: flex; align-items: flex-end; gap: 0; border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.saga-tab {
	appearance: none; border: 0; background: none; cursor: pointer; white-space: nowrap; text-decoration: none;
	display: inline-flex; align-items: center; gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + 1px);
	margin-bottom: -1px; border-bottom: 2px solid transparent;
	font-size: var(--tab-font-size); color: var(--tab-text); line-height: var(--leading-tight);
	transition: color var(--motion-fast) var(--ease-out), background var(--motion-instant) var(--ease-out);
}
.saga-tab:hover { color: var(--color-text); background: var(--color-bg-secondary); }
.saga-tab[aria-selected="true"], .saga-tab.is-active { color: var(--tab-text-active); font-weight: var(--weight-semibold); border-bottom-color: var(--color-primary); background: none; }
.saga-tab:disabled { color: var(--color-text-disabled); cursor: not-allowed; background: none; }
.saga-tab__count {
	display: inline-flex; align-items: center; min-height: 1.4em; padding: 0 var(--space-sm);
	border-radius: var(--radius-full); background: var(--color-bg-tertiary); color: var(--color-text-secondary);
	font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1;
}
.saga-tab[aria-selected="true"] .saga-tab__count, .saga-tab.is-active .saga-tab__count { background: var(--color-primary-light); color: var(--color-primary); }
.saga-tabs__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); padding-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.saga-table-wrap { overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.saga-table-wrap > .saga-table { margin: 0; }
.saga-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.saga-table th, .saga-table td { padding: var(--space-sm) var(--space-md); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border); }
.saga-table thead th { background: var(--color-bg-secondary); font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; }
.saga-table tbody tr:last-child > td { border-bottom: 0; }
.saga-table tbody tr:hover { background: var(--color-bg-secondary); }
.saga-table tbody tr[aria-selected="true"] { background: var(--color-primary-light); }
.saga-table--grid th + th, .saga-table--grid td + td { border-left: 1px solid var(--color-border); }
.saga-table--dense th, .saga-table--dense td { padding: var(--space-xs) var(--space-sm); }
.saga-table--sticky thead th { position: sticky; top: 0; z-index: var(--z-raised); }
.saga-table .num, .saga-table [data-align="end"] { text-align: right; font-variant-numeric: tabular-nums; }
.saga-table__actions { width: 1%; white-space: nowrap; }
.saga-table__actions .saga-btn { padding: var(--space-xs); margin: calc(var(--space-xs) * -1) 0; }
.saga-table__actions .saga-btn + .saga-btn { margin-left: var(--space-2xs); }
.saga-table th[aria-sort] { cursor: pointer; user-select: none; }
.saga-table th[aria-sort]::after { content: ""; display: inline-block; margin-left: var(--space-xs); vertical-align: middle; border: var(--space-xs) solid transparent; }
.saga-table th[aria-sort="ascending"]::after { border-top: 0; border-bottom-color: var(--color-text); }
.saga-table th[aria-sort="descending"]::after { border-bottom: 0; border-top-color: var(--color-text); }
.saga-table th[aria-sort="none"]::after { border-top: 0; border-bottom-color: var(--color-text-muted); }
.saga-table__empty { text-align: center; color: var(--color-text-secondary); padding: var(--space-xl) var(--space-md); }
.saga-table tfoot td, .saga-table tfoot th { font-weight: var(--weight-semibold); background: var(--color-bg-secondary); border-top: 1px solid var(--color-border-strong); border-bottom: 0; }

.saga-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-lg); margin: 0; }
.saga-kv > dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.saga-kv > dd { margin: 0; min-width: 0; }
.saga-kv--stacked { grid-template-columns: 1fr; gap: var(--space-2xs); }
.saga-kv--stacked > dd + dt { margin-top: var(--space-sm); }

/* ── Charts (DS-024/111/119): the few primitives a dashboard needs without a
   chart library. Set --_c on a fill or swatch to pick the series color; the
   remainder is --chart-neutral, a target mark is --chart-reference. ──────── */
.saga-bar { position: relative; display: flex; height: calc(var(--space-sm) + var(--space-xs) + var(--space-2xs)); border-radius: var(--radius-xs); background: var(--chart-neutral); overflow: hidden; }
.saga-bar__fill { height: 100%; width: var(--value, 0%); flex-shrink: 0; background: var(--_c, var(--chart-1)); transition: width var(--motion-base) var(--ease-out); }
.saga-bar--stacked > .saga-bar__fill { flex: 0 0 var(--value, 0%); width: auto; }
.saga-bar--stacked > .saga-bar__fill + .saga-bar__fill { box-shadow: inset 1px 0 0 var(--color-bg); }
.saga-bar--lg { height: var(--space-lg); }
.saga-bar__mark { position: absolute; top: 0; bottom: 0; left: var(--value, 0%); width: var(--border-width-emphasis); margin-left: calc(var(--border-width-emphasis) / -2); background: var(--chart-reference); }
.saga-axis { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.saga-legend { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-secondary); }
.saga-legend__item { display: inline-flex; align-items: center; gap: var(--space-xs); }
.saga-legend__swatch { width: calc(var(--space-sm) + var(--space-2xs)); height: calc(var(--space-sm) + var(--space-2xs)); flex-shrink: 0; border-radius: var(--radius-xs); background: var(--_c, var(--color-text-muted)); }
.saga-legend__swatch--line { height: var(--border-width-emphasis); border-radius: 0; }

/* ── Chips & badges (DS-019) ───────────────────────────────────────────────── */
.saga-chip {
	display: inline-flex; align-items: center; gap: var(--space-xs);
	padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-full);
	background: var(--chip-neutral-bg); color: var(--chip-neutral-text);
	font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-tight); white-space: nowrap;
	border: 1px solid transparent;
}
.saga-chip--regular { background: var(--chip-regular); color: var(--color-text-inverse); }
.saga-chip--advisory { background: var(--chip-advisory); color: var(--color-text); }
.saga-chip--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.saga-chip--neutral { background: var(--chip-neutral-bg); color: var(--chip-neutral-text); }
.saga-chip--outline { background: var(--color-bg); color: inherit; border-color: currentColor; font-weight: var(--weight-medium); }
.saga-chip--outline.is-active { background: var(--color-surface-inverse); color: var(--color-text-inverse); border-color: var(--color-surface-inverse); font-style: italic; }
.saga-chip--square { border-radius: var(--radius-xs); }
.saga-chip__dot { width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-full); background: currentColor; }
.saga-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-xs);
	border-radius: var(--radius-full); background: var(--color-danger); color: var(--color-text-inverse);
	font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1;
}
.saga-badge--neutral { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.saga-badge--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.saga-badge--attention { background: var(--color-attention-strong); }
.saga-badge-anchor { position: relative; display: inline-flex; }
.saga-badge-anchor > .saga-badge { position: absolute; top: calc(var(--space-xs) * -1); right: calc(var(--space-xs) * -1); }

/* ── Notices ───────────────────────────────────────────────────────────────── */
.saga-notice {
	--_accent: var(--color-notice); --_bg: var(--color-notice-bg); --_border: var(--color-notice-border);
	display: flex; align-items: flex-start; gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md); border: 1px solid var(--_border); border-radius: var(--radius-md);
	background: var(--_bg); color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-normal);
}
.saga-notice--warning { --_accent: var(--color-warning); --_bg: var(--color-warning-bg); --_border: var(--color-warning-border); }
.saga-notice--danger { --_accent: var(--color-danger); --_bg: var(--color-danger-bg); --_border: var(--color-danger-border); }
.saga-notice--success { --_accent: var(--color-success); --_bg: var(--color-success-bg); --_border: var(--color-success-border); }
.saga-notice--notice { --_accent: var(--color-notice); --_bg: var(--color-notice-bg); --_border: var(--color-notice-border); } /* explicit alias of the bare level */
.saga-notice--attention { --_accent: var(--color-attention); --_bg: var(--color-attention-bg); --_border: var(--color-warning-border); }
.saga-notice__icon { display: inline-flex; flex-shrink: 0; font-size: 1.3em; color: var(--_accent); margin-top: 0.05em; }
.saga-notice__body { flex: 1; min-width: 0; }
.saga-notice__title { display: block; font-weight: var(--weight-semibold); }
.saga-notice__action { font-weight: var(--weight-semibold); color: var(--color-primary); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.saga-notice__dismiss { margin: calc(var(--space-xs) * -1) calc(var(--space-sm) * -1) calc(var(--space-xs) * -1) 0; }

/* ── Scrim, modal, steps (DS-011/012) ──────────────────────────────────────── */
.saga-scrim {
	position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--modal-scrim);
	display: flex; align-items: center; justify-content: center; padding: var(--space-lg); overflow-y: auto;
}
.saga-modal {
	display: flex; flex-direction: column; margin: auto; padding: 0; border: 0;
	width: min(640px, 100%); max-height: 92vh; max-width: 100%;
	background: var(--card-bg); color: var(--color-text);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); z-index: var(--z-modal);
}
/* Local scrim: covers the nearest positioned ancestor (a framed shell, a modal card) instead of the viewport (DS-118). */
.saga-scrim--local { position: absolute; }
.saga-scrim--strong { background: var(--modal-scrim-strong); }
.saga-modal--confirm { width: min(440px, 100%); }
.saga-modal--large { width: min(960px, 100%); }
.saga-modal--fullscreen { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
.saga-modal--fullscreen .saga-modal__footer { border-radius: 0; }
dialog.saga-modal:not([open]) { display: none; }
dialog.saga-modal::backdrop { background: var(--modal-scrim); }
.saga-modal__header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); }
.saga-modal__title { margin: 0; flex: 1; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.saga-modal__title > em { font-style: normal; color: var(--color-primary); }
.saga-modal__close { margin: calc(var(--space-xs) * -1) calc(var(--space-sm) * -1) calc(var(--space-xs) * -1) 0; }
.saga-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-lg); }
.saga-modal--fullscreen .saga-modal__body { padding: 0; overflow: hidden; }
.saga-modal__footer {
	display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--color-border); background: var(--color-bg-secondary);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.saga-modal__footer-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }
/* DS-054: Delete sits after Save, isolated by a wider gap */
.saga-modal__footer-end > .saga-btn--danger { margin-left: var(--space-md); }

.saga-steps { display: flex; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-border); counter-reset: saga-step; }
.saga-step {
	flex: 1; display: flex; align-items: center; gap: var(--space-sm);
	padding: var(--space-sm) var(--space-lg); margin-bottom: -1px;
	background: var(--color-bg-secondary); color: var(--color-text-muted);
	font-weight: var(--weight-semibold); border-bottom: 2px solid var(--color-border); border-right: 1px solid var(--color-border);
}
.saga-step:last-child { border-right: 0; }
.saga-step__num {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-full);
	background: var(--color-gray-light); color: var(--color-text-inverse); font-size: var(--text-xs);
}
.saga-step__num:empty::before { counter-increment: saga-step; content: counter(saga-step); }
.saga-step[aria-current="step"] { background: var(--color-bg); color: var(--color-text); border-bottom-color: var(--color-primary); }
.saga-step[aria-current="step"] .saga-step__num { background: var(--color-primary); }
.saga-step[data-complete] { color: var(--color-text-secondary); }
.saga-step[data-complete] .saga-step__num { background: var(--color-success); }

/* ── Toasts ────────────────────────────────────────────────────────────────── */
.saga-toast-stack {
	position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-toast);
	display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-end;
	width: min(26rem, calc(100vw - var(--space-lg) * 2)); pointer-events: none;
}
.saga-toast-stack--local { position: absolute; }
.saga-toast {
	--_edge: var(--color-accent);
	pointer-events: auto; display: flex; align-items: center; gap: var(--space-sm); width: 100%;
	padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
	background: var(--color-surface-inverse); color: var(--color-text-inverse);
	border-left: var(--space-xs) solid var(--_edge); border-radius: var(--radius-md); box-shadow: var(--shadow-toast);
	font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-normal);
	animation: saga-fade-in var(--motion-fade) var(--ease-out) both, saga-rise-in var(--motion-base) var(--ease-out) both;
}
.saga-toast--success { --_edge: var(--color-success); }
.saga-toast--warning { --_edge: var(--color-warning); }
.saga-toast--danger { --_edge: var(--color-danger); }
.saga-toast.is-leaving { animation: saga-fade-out var(--motion-fade) var(--ease-in) forwards; }
.saga-toast__icon { display: inline-flex; flex-shrink: 0; font-size: 1.3em; color: var(--_edge); }
.saga-toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saga-toast__action {
	flex-shrink: 0; appearance: none; cursor: pointer; font: inherit; font-weight: var(--weight-semibold);
	padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-full);
	border: 1px solid var(--nav-border); background: transparent; color: inherit;
	transition: background var(--motion-fast) var(--ease-out);
}
.saga-toast__action:hover { background: var(--nav-item-hover); }
.saga-toast__close { flex-shrink: 0; appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; padding: var(--space-xs); border-radius: var(--radius-full); opacity: 0.75; }
.saga-toast__close:hover { opacity: 1; background: var(--nav-item-hover); }
@keyframes saga-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes saga-rise-in { from { transform: translateY(var(--space-sm)); } to { transform: translateY(0); } }
@keyframes saga-fade-out { to { opacity: 0; } }

/* ── Popover & tooltip ─────────────────────────────────────────────────────── */
.saga-popover {
	position: absolute; z-index: var(--z-dropdown); min-width: 12rem; max-width: 20rem;
	margin: 0; padding: var(--space-xs) 0; list-style: none;
	background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); box-shadow: var(--shadow-popover); font-size: var(--text-sm);
}
.saga-popover--static { position: static; display: inline-block; }
.saga-popover__item {
	display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 2.25rem;
	padding: var(--space-sm) var(--space-md); border: 0; background: transparent; color: inherit;
	font: inherit; text-align: left; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.saga-popover__item:hover, .saga-popover__item:focus-visible { background: var(--color-bg-tertiary); }
.saga-popover__item[aria-checked="true"], .saga-popover__item.is-active { background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--weight-semibold); }
.saga-popover__item:disabled, .saga-popover__item[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; background: transparent; }
.saga-popover__item[data-danger] { color: var(--color-danger); }
.saga-popover__item[data-danger]:hover { background: var(--color-danger-bg); }
.saga-popover__item > iconify-icon { font-size: 1.2em; color: var(--color-text-secondary); }
.saga-popover__item[data-danger] > iconify-icon { color: inherit; }
.saga-popover__divider { height: 1px; margin: var(--space-xs) 0; background: var(--color-border); border: 0; }
.saga-popover__heading { padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
/* Tooltip (DS-057/120): white with a strong hairline, as dash's core-ui Tooltip
   renders; --filled is the primary-blue variant for the info-icon trigger. */
.saga-tooltip {
	position: absolute; z-index: var(--z-tooltip); max-width: 16rem; padding: var(--space-sm) calc(var(--space-sm) + var(--space-2xs));
	background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
	font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-normal); pointer-events: none;
	animation: saga-fade-in var(--motion-fade) var(--ease-out) both;
}
.saga-tooltip--filled { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.saga-tooltip--rich { text-align: left; max-width: 20rem; }
.saga-tooltip__title { display: block; font-weight: var(--weight-semibold); margin-bottom: var(--space-2xs); }
.saga-tooltip--static { position: static; display: inline-block; }

/* ── Skeleton & progress ───────────────────────────────────────────────────── */
.saga-skeleton {
	display: block; height: 1em; border-radius: var(--radius-sm);
	background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border) 50%, var(--color-bg-tertiary) 75%);
	background-size: 200% 100%;
	animation: saga-shimmer calc(var(--motion-slow) * 5) linear infinite;
}
.saga-skeleton--text { height: 0.85em; margin: 0.3em 0; border-radius: var(--radius-xs); }
.saga-skeleton--text:nth-child(2n) { width: 85%; }
.saga-skeleton--text:last-child { width: 60%; }
.saga-skeleton--circle { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); }
.saga-skeleton--block { height: 6rem; }
@keyframes saga-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .saga-skeleton { animation: none; background: var(--color-bg-tertiary); } }
.saga-progress { height: var(--space-xs); border-radius: var(--radius-full); background: var(--color-bg-tertiary); overflow: hidden; }
.saga-progress__bar { height: 100%; width: var(--value, 0%); background: var(--color-primary); border-radius: inherit; transition: width var(--motion-base) var(--ease-out); }
.saga-progress--lg { height: var(--space-sm); }
.saga-progress--indeterminate .saga-progress__bar { width: 40%; animation: saga-indeterminate calc(var(--motion-slow) * 4) var(--ease-emphasized) infinite; }
@keyframes saga-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ── Shell: nav, top bar, page (DS-007) ────────────────────────────────────── */
.saga-shell { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); height: 100vh; }
/* Framed: the shell fills a positioned frame (a decision-board scene, an iframe-less
   preview) instead of the viewport; pair with .saga-scrim--local / .saga-toast-stack--local (DS-118). */
.saga-shell--framed { height: 100%; min-height: 0; position: relative; overflow: hidden; }
.saga-shell__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--color-bg); }
.saga-page { flex: 1; min-height: 0; overflow: auto; padding: var(--space-lg); }
.saga-page__toolbar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.saga-page__toolbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }

.saga-nav { width: var(--nav-width); height: 100%; min-height: 0; flex-shrink: 0; display: flex; flex-direction: column; background: var(--nav-bg); color: var(--nav-text); }
.saga-nav__logo { display: flex; align-items: center; height: var(--topbar-height); flex-shrink: 0; padding: 0 var(--space-md); border-bottom: 1px solid var(--nav-border); }
.saga-nav__logo img, .saga-nav__logo svg { height: calc(var(--space-xl) + var(--space-2xs)); width: auto; }
.saga-nav__group { padding: var(--space-md); border-bottom: 1px solid var(--nav-border); }
.saga-nav__label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0.025em; color: var(--nav-text-active); }
.saga-nav__link { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--nav-text); }
.saga-nav__link:hover { color: var(--nav-text-active); }
.saga-nav__section { padding: var(--space-md) var(--space-md) var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-text-muted); }
.saga-nav__items { list-style: none; margin: 0; padding: var(--space-sm) 0; flex: 1; overflow-y: auto; }
.saga-nav__item {
	display: flex; align-items: center; gap: var(--space-sm);
	margin: var(--space-xs) var(--space-sm); padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-full); color: var(--nav-text); text-decoration: none; font-size: var(--text-base);
	border: 0; background: transparent; width: calc(100% - var(--space-md)); text-align: left; cursor: pointer;
	transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.saga-nav__item:hover { background: var(--nav-item-hover); color: var(--nav-text-active); }
.saga-nav__item[aria-current="page"] { background: var(--nav-item-active); color: var(--nav-text-active); font-weight: var(--weight-semibold); }
.saga-nav__item > iconify-icon, .saga-nav__item > svg, .saga-nav__item > .saga-icon { font-size: var(--text-xl); width: 1em; height: 1em; flex-shrink: 0; opacity: 0.7; }
.saga-nav__item:hover > :is(iconify-icon, svg, .saga-icon), .saga-nav__item[aria-current="page"] > :is(iconify-icon, svg, .saga-icon) { opacity: 1; }
.saga-nav__footer { margin-top: auto; padding: var(--space-md); border-top: 1px solid var(--nav-border); flex-shrink: 0; }
.saga-nav__footer .saga-nav__label { margin-bottom: var(--space-2xs); }
/* Configure-mode variant: exit card, hollow step dots, status marks at the end. */
.saga-nav__exit {
	display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) var(--space-sm) var(--space-sm);
	padding: var(--space-sm) var(--space-md); border: 1px solid var(--nav-border); border-radius: var(--radius-md);
	background: var(--nav-item-hover); color: var(--nav-text-active); text-decoration: none;
}
.saga-nav__exit:hover { background: var(--nav-border); }
.saga-nav__exit small { display: block; font-size: var(--text-xs); color: var(--nav-text); }
.saga-nav--configure .saga-nav__item { border-radius: var(--radius-sm); }
.saga-nav--configure .saga-nav__item::before { content: ""; width: var(--space-xs); height: var(--space-xs); border: 1px solid currentColor; border-radius: var(--radius-full); opacity: 0.6; flex-shrink: 0; }
.saga-nav__check { margin-left: auto; display: inline-flex; font-size: var(--text-base); color: var(--nav-status-complete); }
.saga-nav__check--warning { color: var(--nav-attention-bg); }
.saga-nav__check--pending { color: var(--nav-text-muted); }

.saga-topbar {
	display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0;
	height: var(--topbar-height); padding: 0 var(--space-lg);
	background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); box-shadow: var(--shadow-sm);
	position: relative; z-index: var(--z-raised);
}
.saga-topbar__title { margin: 0; min-width: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saga-topbar__context { color: var(--color-text-secondary); font-weight: var(--weight-medium); white-space: nowrap; }
.saga-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; }
.saga-topbar__meta { font-size: var(--text-sm); color: var(--color-text-secondary); margin-right: var(--space-sm); }

/* ── Calendar (month grid) ─────────────────────────────────────────────────── */
.saga-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); background: var(--color-bg); }
.saga-calendar__weekday { padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-text-secondary); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.saga-calendar__cell { display: flex; flex-direction: column; gap: var(--space-xs); min-height: 5rem; padding: var(--space-xs); font-size: var(--text-sm); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.saga-calendar__cell--outside { color: var(--color-text-muted); background: var(--color-bg-secondary); }
.saga-calendar__day { display: flex; align-items: center; gap: var(--space-xs); }
.saga-calendar__cell--today .saga-calendar__day > span:first-child { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-contrast); font-weight: var(--weight-semibold); }
.saga-calendar__event { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-weight: var(--weight-semibold); text-decoration: none; line-height: var(--leading-tight); }
.saga-calendar__cell--has-sessions .saga-calendar__event { background: var(--color-primary); color: var(--color-primary-contrast); }
.saga-calendar__cell--has-sessions.saga-calendar__cell--outside .saga-calendar__event { background: var(--color-primary-light); color: var(--color-primary); }
.saga-calendar__event:hover { filter: brightness(0.95); }
.saga-calendar__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.saga-calendar__month { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); background: var(--color-bg-tertiary); color: var(--color-primary); font-weight: var(--weight-semibold); }

/* ── Avatar ────────────────────────────────────────────────────────────────── */
.saga-avatar {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
	background: var(--color-primary-light); color: var(--color-primary);
	font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden;
}
.saga-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.saga-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
.saga-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: var(--text-lg); }
.saga-avatar--inverse { background: var(--color-primary); color: var(--color-primary-contrast); }
.saga-avatar-group { display: inline-flex; }
.saga-avatar-group > .saga-avatar { border: 2px solid var(--color-bg); }
.saga-avatar-group > .saga-avatar + .saga-avatar { margin-left: calc(var(--space-sm) * -1); }

/* ── Motion patterns (DS-030): class equivalents of the core-ui transitions ── */
.pop-in { transform-origin: top right; animation: pop-in var(--motion-fast) var(--ease-out) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }

/* Overlay panel: put .overlay-in on the dialog and the scrim; the scrim only sees the opacity */
.overlay-in { animation: overlay-in var(--motion-base) var(--ease-out) both; }
@keyframes overlay-in { from { opacity: 0; transform: scale(.98) translateY(8px); } to { opacity: 1; transform: none; } }

/* List entrance: set --i per item, capped at 6 by the author */
.list-in { animation: list-in var(--motion-base) var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 6) * var(--motion-stagger)); }
@keyframes list-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Reduced motion: the swap. Travel goes, a fade on the floor token stays. */
@media (prefers-reduced-motion: reduce) {
  .pop-in, .overlay-in, .list-in { animation-name: fade-in; animation-duration: var(--motion-fade); }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
}