/* =========================================================================
   Writs & Giggles — theme CSS.

   Layout and component rules only. Every value resolves to a design-system
   token (assets/ds/tokens/*.css). No hex, no raw px type sizes, no raw
   durations. If a value is missing from the tokens it is a design-system
   change, not a theme change.

   Order:  1 primitives (mirrors design-system-source/components)
           2 layout (shell, section, grounds)
           3 chrome (masthead, footer)
           4 editorial primitives
           5 page compositions
           6 motion / global behaviours
           7 responsive
   ========================================================================= */

/* ── Global -------------------------------------------------------------- */
body { background: var(--surface-page); margin: 0; }
.wg-page { animation: wgIn var(--duration-slow) var(--ease-out) both; }
@keyframes wgIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
img, video { display: block; }
.wg-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: currentColor; }
.wg-icon svg { width: 100%; height: 100%; display: block; }

.wg-skip { position: absolute; left: -9999px; }
.wg-skip:focus { left: var(--space-6); top: var(--space-3); z-index: var(--z-header); background: var(--navy-800); color: #fff; padding: 8px 14px; border-radius: var(--radius-xs); font-family: var(--font-label); font-size: var(--size-caption); }

a { color: var(--link); }
a:hover { color: var(--link-hover); }
[data-ground="inverse"] a { color: var(--link-inverse); }
[data-ground="inverse"] a:hover { color: var(--link-inverse-hover); }

/* Utility ---------------------------------------------------------------- */
.wg-mono { font-family: var(--font-mono); font-variant-numeric: lining-nums tabular-nums; }
.wg-serif { font-family: var(--font-heading); }
.wg-vis-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* =========================================================================
   1 · PRIMITIVES  (design-system-source/components)
   ========================================================================= */

/* Button ----------------------------------------------------------------- */
.wg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--space-2);
	height: var(--control-h-md); padding: 0 var(--space-5);
	font-family: var(--font-ui); font-size: var(--size-body-sm); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1;
	border-radius: var(--radius-sm); border: var(--border-width-hairline) solid;
	cursor: pointer; text-decoration: none; white-space: nowrap; border-bottom-width: var(--border-width-hairline);
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
}
.wg-btn:hover { border-bottom-color: inherit; }
.wg-btn:active { transform: scale(var(--press-scale)); }
.wg-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--size-caption); }
.wg-btn--lg { height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--size-body); }
.wg-btn--full { width: 100%; }
.wg-btn[disabled], .wg-btn.is-disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }

.wg-btn--primary { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.wg-btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.wg-btn--primary:active { background: var(--navy-900); border-color: var(--navy-900); }

.wg-btn--seal { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
.wg-btn--seal:hover { background: var(--gold-600); border-color: var(--gold-600); color: #fff; }
.wg-btn--seal:active { background: var(--gold-700); border-color: var(--gold-700); color: #fff; }

.wg-btn--secondary { background: transparent; color: var(--navy-800); border-color: var(--navy-200); }
.wg-btn--secondary:hover { background: var(--navy-50); border-color: var(--navy-300); color: var(--navy-800); }
.wg-btn--secondary:active { background: var(--navy-100); border-color: var(--navy-400); }

.wg-btn--ghost { background: transparent; color: var(--navy-700); border-color: transparent; }
.wg-btn--ghost:hover { background: var(--navy-50); color: var(--navy-700); }
.wg-btn--ghost:active { background: var(--navy-100); }

.wg-btn--inverse { background: #fff; color: var(--navy-800); border-color: #fff; }
.wg-btn--inverse:hover { background: var(--gold-100); border-color: var(--gold-100); color: var(--navy-800); }
.wg-btn--inverse:active { background: var(--gold-200); border-color: var(--gold-200); }

.wg-btn--inverse-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.34); }
.wg-btn--inverse-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); color: #fff; }
.wg-btn--inverse-outline:active { background: rgba(255,255,255,0.14); border-color: #fff; }

/* IconButton ------------------------------------------------------------- */
.wg-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0;
	border: var(--border-width-hairline) solid; border-radius: var(--radius-sm);
	cursor: pointer; background: transparent;
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.wg-iconbtn--sm { width: 28px; height: 28px; }
.wg-iconbtn--lg { width: 44px; height: 44px; }
.wg-iconbtn[disabled] { opacity: 0.42; cursor: not-allowed; }
.wg-iconbtn--ghost { background: transparent; color: var(--navy-700); border-color: transparent; }
.wg-iconbtn--ghost:hover { background: var(--navy-50); }
.wg-iconbtn--outline { background: var(--surface-card); color: var(--navy-800); border-color: var(--navy-200); }
.wg-iconbtn--outline:hover { background: var(--navy-50); border-color: var(--navy-300); }
.wg-iconbtn--solid { background: var(--navy-800); color: #fff; border-color: transparent; }
.wg-iconbtn--solid:hover { background: var(--navy-700); }
.wg-iconbtn--inverse { background: transparent; color: #fff; border-color: transparent; }
.wg-iconbtn--inverse:hover { background: rgba(255,255,255,0.12); }

/* Badge ------------------------------------------------------------------ */
.wg-badge {
	display: inline-flex; align-items: center; gap: var(--space-1);
	padding: 3px var(--space-3);
	border: var(--border-width-hairline) solid; border-radius: var(--radius-xs);
	font-family: var(--font-label); font-size: var(--size-eyebrow); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1.4; white-space: nowrap;
}
.wg-badge--sm { padding: 2px var(--space-2); font-size: var(--size-micro); }
.wg-badge--neutral { background: var(--navy-50); color: var(--ink-600); border-color: var(--navy-100); }
.wg-badge--filed { background: var(--status-filed-soft); color: var(--status-filed); border-color: color-mix(in oklab, var(--status-filed) 22%, transparent); }
.wg-badge--pending { background: var(--status-pending-soft); color: var(--status-pending); border-color: color-mix(in oklab, var(--status-pending) 24%, transparent); }
.wg-badge--upheld { background: var(--status-upheld-soft); color: var(--status-upheld); border-color: color-mix(in oklab, var(--status-upheld) 22%, transparent); }
.wg-badge--adverse { background: var(--status-adverse-soft); color: var(--status-adverse); border-color: color-mix(in oklab, var(--status-adverse) 22%, transparent); }
.wg-badge--seal { background: var(--gold-100); color: var(--gold-800); border-color: var(--gold-300); }
.wg-badge--inverse { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.24); }

/* Tag -------------------------------------------------------------------- */
.wg-tag {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: 5px var(--space-3);
	background: transparent; color: var(--ink-600);
	border: var(--border-width-hairline) solid var(--border-default);
	border-radius: var(--radius-pill);
	font-family: var(--font-label); font-size: var(--size-caption); font-weight: var(--weight-regular);
	line-height: 1.3; text-decoration: none; cursor: default;
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
a.wg-tag, button.wg-tag { cursor: pointer; }
a.wg-tag:hover, button.wg-tag:hover { background: var(--navy-50); border-color: var(--border-default); color: var(--ink-600); }
.wg-tag.is-active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* Eyebrow ---------------------------------------------------------------- */
.wg-eyebrow {
	display: inline-flex; align-items: center; gap: var(--space-3);
	font-family: var(--font-label); font-size: var(--size-eyebrow); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; line-height: var(--leading-flat);
	color: var(--gold-700);
}
.wg-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.55; }
.wg-eyebrow--no-rule::before { display: none; }
.wg-eyebrow--navy { color: var(--navy-500); }
.wg-eyebrow--muted { color: var(--text-subtle); }
.wg-eyebrow--inverse { color: var(--gold-400); }

/* Stat ------------------------------------------------------------------- */
.wg-stat__value { font-family: var(--font-heading); font-size: var(--size-display-3); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--navy-800); font-variant-numeric: lining-nums tabular-nums; }
.wg-stat--sm .wg-stat__value { font-size: var(--size-h2); }
.wg-stat--lg .wg-stat__value { font-size: var(--size-display-2); }
.wg-stat__label { margin-top: var(--space-3); font-family: var(--font-label); font-size: var(--size-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-700); }
.wg-stat__note { margin-top: var(--space-2); font-size: var(--size-caption); line-height: var(--leading-ui); color: var(--text-muted); }
[data-ground="inverse"] .wg-stat__value { color: #fff; }
[data-ground="inverse"] .wg-stat__label { color: var(--gold-400); }
[data-ground="inverse"] .wg-stat__note { color: var(--text-inverse-muted); }

/* PullQuote -------------------------------------------------------------- */
.wg-pullquote { margin: 0; padding-left: var(--space-6); border-left: var(--border-width-seal) solid var(--gold-500); max-width: var(--measure-narrow); }
.wg-pullquote blockquote { margin: var(--space-3) 0 0; font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-style: italic; color: var(--text-strong); }
.wg-pullquote figcaption { margin-top: var(--space-5); font-family: var(--font-label); font-size: var(--size-caption); color: var(--text-muted); }
.wg-pullquote figcaption b { font-weight: var(--weight-bold); color: var(--text-body); }

/* Divider ---------------------------------------------------------------- */
.wg-divider { margin: 0; border: 0; height: 1px; background: var(--border-hairline); width: 100%; }
.wg-divider--rule { height: 2px; }
.wg-divider--seal { height: 3px; width: 48px; background: var(--gold-500); }
[data-ground="inverse"] .wg-divider { background: var(--border-inverse); }
.wg-divider-label { display: flex; align-items: center; gap: var(--space-4); }
.wg-divider-label > span:first-child { flex: 0 0 auto; font-family: var(--font-label); font-size: var(--size-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-subtle); }
.wg-divider-label > span:last-child { flex: 1; height: 1px; background: var(--border-hairline); }

/* Card ------------------------------------------------------------------- */
.wg-card { display: block; position: relative; padding: var(--space-6); border-radius: var(--radius-md); color: inherit; text-decoration: none;
	background: var(--surface-card); border: var(--border-width-hairline) solid var(--border-hairline); box-shadow: var(--shadow-none);
	transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
a.wg-card:hover, .wg-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift-hover)); }
.wg-card--raised { box-shadow: var(--shadow-sm); }
a.wg-card--raised:hover { box-shadow: var(--shadow-lg); }
.wg-card--sunken { background: var(--surface-sunken); border-color: transparent; box-shadow: none; }
.wg-card--inverse { background: var(--surface-inverse-raised); border-color: var(--border-inverse); box-shadow: none; }
.wg-card--quiet { background: transparent; border-color: var(--border-default); box-shadow: none; }
.wg-card--accent { border-top: var(--border-width-seal) solid var(--gold-500); }
a.wg-card { border-bottom: var(--border-width-hairline) solid var(--border-hairline); } /* keep border, not underline */
.wg-card__go { position: absolute; right: var(--space-5); bottom: var(--space-5); display: flex; color: var(--gold-600); opacity: 0; transform: translateX(-3px); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
a.wg-card:hover .wg-card__go { opacity: 1; transform: none; }

/* Field / inputs --------------------------------------------------------- */
.wg-field { display: flex; flex-direction: column; gap: var(--space-2); }
.wg-field__label { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-label); font-size: var(--size-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.wg-field__req { color: var(--gold-600); }
.wg-field__opt { font-weight: var(--weight-regular); letter-spacing: var(--tracking-normal); text-transform: none; color: var(--text-subtle); }
.wg-field__hint { margin: 0; font-size: var(--size-caption); line-height: var(--leading-ui); color: var(--text-muted); }
.wg-field__error { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--size-caption); line-height: var(--leading-ui); color: var(--status-adverse); }

.wg-input, .wg-textarea, .wg-select {
	width: 100%; min-height: var(--control-h-md); padding: 0 var(--space-3);
	background: var(--surface-card); color: var(--text-strong);
	font-family: var(--font-body); font-size: var(--size-body-sm); line-height: var(--leading-ui);
	border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-sm);
	outline: none;
	transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.wg-textarea { padding: var(--space-3); resize: vertical; min-height: calc(var(--control-h-md) * 2); }
.wg-input:focus, .wg-textarea:focus, .wg-select:focus { border-color: var(--navy-600); box-shadow: var(--focus-shadow); }
.wg-input:disabled, .wg-textarea:disabled, .wg-select:disabled { background: var(--navy-50); cursor: not-allowed; }
.wg-input.is-error, .wg-textarea.is-error, .wg-select.is-error { border-color: var(--status-adverse); }
.wg-input-wrap { position: relative; display: flex; align-items: center; }
.wg-input-wrap .wg-input { padding-left: calc(var(--space-8) + 2px); }
.wg-input-wrap__icon { position: absolute; left: var(--space-3); display: flex; pointer-events: none; color: var(--text-subtle); }
.wg-select-wrap { position: relative; display: flex; align-items: center; }
.wg-select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); cursor: pointer; }
.wg-select-wrap__chevron { position: absolute; right: var(--space-3); display: flex; pointer-events: none; color: var(--text-muted); }

/* Checkbox / Radio ------------------------------------------------------- */
.wg-check, .wg-radio { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.wg-check.is-disabled, .wg-radio.is-disabled { cursor: not-allowed; opacity: 0.5; }
.wg-check__box, .wg-radio__box { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: var(--border-width-hairline) solid var(--border-strong); background: var(--surface-card); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.wg-check__box { border-radius: var(--radius-xs); }
.wg-radio__box { border-radius: 50%; }
.wg-check input, .wg-radio input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.wg-check input:checked ~ .wg-check__box, .wg-check__box.is-on { background: var(--navy-800); border-color: var(--navy-800); }
.wg-check__box .wg-icon { color: #fff; opacity: 0; }
.wg-check input:checked + .wg-check__mark, .wg-check__box.is-on .wg-icon { opacity: 1; }
.wg-radio__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy-800); opacity: 0; }
.wg-radio input:checked ~ .wg-radio__box { border-color: var(--navy-800); }
.wg-radio input:checked ~ .wg-radio__box .wg-radio__dot, .wg-radio__box.is-on .wg-radio__dot { opacity: 1; }
.wg-check__label, .wg-radio__label { display: block; font-family: var(--font-body); font-size: var(--size-body-sm); line-height: var(--leading-ui); color: var(--text-body); }
.wg-check__desc, .wg-radio__desc { display: block; margin-top: 2px; font-size: var(--size-caption); line-height: var(--leading-ui); color: var(--text-muted); }

/* Switch ----------------------------------------------------------------- */
.wg-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.wg-switch__track { position: relative; display: inline-flex; align-items: center; width: 38px; height: 22px; padding: 2px; border-radius: var(--radius-pill); background: var(--silver-300); transition: background var(--duration-base) var(--ease-standard); }
.wg-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.wg-switch__thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transform: translateX(0); transition: transform var(--duration-base) var(--ease-standard); }
.wg-switch input:checked ~ .wg-switch__track { background: var(--navy-800); }
.wg-switch input:checked ~ .wg-switch__track .wg-switch__thumb, .wg-switch.is-on .wg-switch__thumb { transform: translateX(16px); }
.wg-switch.is-on .wg-switch__track { background: var(--navy-800); }
.wg-switch__label { font-family: var(--font-body); font-size: var(--size-body-sm); color: var(--text-body); }

/* Alert ------------------------------------------------------------------ */
.wg-alert { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-left: var(--border-width-seal) solid; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.wg-alert__body { flex: 1; }
.wg-alert__title { font-family: var(--font-body); font-size: var(--size-body-sm); font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: var(--space-1); }
.wg-alert__text { font-size: var(--size-body-sm); line-height: var(--leading-ui); color: var(--text-body); }
.wg-alert__action { margin-top: var(--space-3); }
.wg-alert--info { background: var(--status-filed-soft); border-color: var(--status-filed); }
.wg-alert--info .wg-alert__icon { color: var(--status-filed); }
.wg-alert--notice { background: var(--gold-100); border-color: var(--gold-500); }
.wg-alert--notice .wg-alert__icon { color: var(--gold-800); }
.wg-alert--pending { background: var(--status-pending-soft); border-color: var(--status-pending); }
.wg-alert--pending .wg-alert__icon { color: var(--status-pending); }
.wg-alert--success { background: var(--status-upheld-soft); border-color: var(--status-upheld); }
.wg-alert--success .wg-alert__icon { color: var(--status-upheld); }
.wg-alert--adverse { background: var(--status-adverse-soft); border-color: var(--status-adverse); }
.wg-alert--adverse .wg-alert__icon { color: var(--status-adverse); }
.wg-alert__icon { margin-top: 2px; }

/* Breadcrumb ------------------------------------------------------------- */
.wg-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.wg-breadcrumb__seg { display: inline-flex; align-items: center; gap: var(--space-2); }
.wg-breadcrumb a, .wg-breadcrumb span { font-family: var(--font-label); font-size: var(--size-caption); color: var(--text-muted); text-decoration: none; border-bottom: 0; }
.wg-breadcrumb [aria-current="page"] { color: var(--text-body); }
.wg-breadcrumb__sep { color: var(--text-subtle); display: flex; }

/* Tabs ------------------------------------------------------------------- */
.wg-tabs { display: flex; gap: var(--space-6); border-bottom: var(--border-width-hairline) solid var(--border-hairline); }
.wg-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 0 var(--space-3); background: none; border: 0; border-bottom: var(--border-width-rule) solid transparent; margin-bottom: -1px; cursor: pointer; font-family: var(--font-label); font-size: var(--size-body-sm); font-weight: var(--weight-regular); color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.wg-tab[aria-selected="true"] { border-bottom-color: var(--gold-500); font-weight: var(--weight-bold); color: var(--text-strong); }
.wg-tab__count { font-family: var(--font-mono); font-size: var(--size-micro); color: var(--text-subtle); }
[data-ground="inverse"] .wg-tabs { border-bottom-color: var(--border-inverse); }
[data-ground="inverse"] .wg-tab[aria-selected="true"] { color: #fff; }

/* Pagination ------------------------------------------------------------- */
.wg-pagination { display: flex; align-items: center; gap: var(--space-2); }
.wg-pagination__page { min-width: 28px; height: 28px; padding: 0 var(--space-2); background: transparent; color: var(--text-muted); border: var(--border-width-hairline) solid transparent; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--size-caption); cursor: pointer; }
.wg-pagination__page[aria-current="page"] { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* Tooltip ---------------------------------------------------------------- */
.wg-tooltip { position: relative; display: inline-flex; }
.wg-tooltip__bubble { position: absolute; z-index: var(--z-overlay); bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px var(--space-3); background: var(--navy-900); color: #fff; font-family: var(--font-label); font-size: var(--size-micro); letter-spacing: var(--tracking-wide); line-height: 1.4; border-radius: var(--radius-xs); white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-standard); pointer-events: none; }
.wg-tooltip:hover .wg-tooltip__bubble, .wg-tooltip:focus-within .wg-tooltip__bubble { opacity: 1; visibility: visible; }

/* CaseStages ------------------------------------------------------------- */
.wg-stages { list-style: none; margin: 0; padding: 0; display: flex; }
.wg-stages--h { flex-direction: row; }
.wg-stages--v { flex-direction: column; gap: var(--space-5); }
.wg-stages__item { display: flex; position: relative; }
.wg-stages--h .wg-stages__item { flex: 1; flex-direction: column; gap: var(--space-3); }
.wg-stages--v .wg-stages__item { flex: none; flex-direction: row; gap: var(--space-4); }
.wg-stages__rail { display: flex; flex: 0 0 auto; align-items: center; }
.wg-stages--h .wg-stages__rail { flex-direction: row; }
.wg-stages--v .wg-stages__rail { flex-direction: column; }
.wg-stages__dot { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: var(--border-width-rule) solid var(--navy-200); background: transparent; flex: 0 0 auto; color: #fff; }
.wg-stages__line { background: var(--navy-100); }
.wg-stages--h .wg-stages__line { height: 2px; flex: 1; margin: 0 2px; }
.wg-stages--v .wg-stages__line { width: 2px; flex: 1; min-height: 24px; }
.wg-stages__item.is-done .wg-stages__dot { background: var(--status-upheld); border-color: var(--status-upheld); }
.wg-stages__item.is-done .wg-stages__line { background: var(--status-upheld); }
.wg-stages__item.is-now .wg-stages__dot { background: var(--gold-500); border-color: var(--gold-500); }
.wg-stages__label { font-family: var(--font-label); font-size: var(--size-body-sm); color: var(--text-muted); }
.wg-stages__item.is-now .wg-stages__label { font-weight: var(--weight-bold); color: var(--text-strong); }
.wg-stages__date { margin-top: 2px; font-family: var(--font-mono); font-size: var(--size-micro); letter-spacing: var(--tracking-wide); color: var(--text-subtle); }
.wg-stages__note { margin-top: var(--space-2); font-size: var(--size-caption); line-height: var(--leading-ui); color: var(--text-muted); }
.wg-stages--h .wg-stages__body { padding-right: var(--space-5); }
[data-ground="inverse"] .wg-stages__line { background: var(--border-inverse); }
[data-ground="inverse"] .wg-stages__dot { border-color: rgba(255,255,255,0.2); }
[data-ground="inverse"] .wg-stages__item.is-now .wg-stages__label { color: #fff; }

/* Dialog ----------------------------------------------------------------- */
.wg-dialog-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--surface-overlay); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.wg-dialog { width: 520px; max-width: 100%; max-height: 100%; overflow: auto; background: var(--surface-card); border-top: var(--border-width-seal) solid var(--gold-500); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); }
.wg-dialog__head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-4); }
.wg-dialog__eyebrow { font-family: var(--font-label); font-size: var(--size-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-700); margin-bottom: var(--space-2); }
.wg-dialog__title { margin: 0; font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--leading-heading); color: var(--text-strong); }
.wg-dialog__body { padding: 0 var(--space-6) var(--space-6); font-size: var(--size-body-sm); line-height: var(--leading-body); color: var(--text-body); }
.wg-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-6); }
.wg-dialog__foot-wrap .wg-divider { }

/* Toast ------------------------------------------------------------------ */
.wg-toasts { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 12px; max-width: 380px; }
.wg-toast { display: flex; gap: var(--space-3); align-items: flex-start; width: 360px; max-width: 100%; padding: var(--space-4); background: var(--navy-800); color: #fff; border: var(--border-width-hairline) solid var(--border-inverse); border-radius: var(--radius-md); box-shadow: var(--shadow-inverse); animation: wgToastIn var(--duration-slow) var(--ease-out) both; }
@keyframes wgToastIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.wg-toast__body { flex: 1; }
.wg-toast__title { font-family: var(--font-body); font-size: var(--size-body-sm); font-weight: var(--weight-bold); }
.wg-toast__text { margin-top: 2px; font-size: var(--size-caption); line-height: var(--leading-ui); color: var(--text-inverse-muted); }
.wg-toast__icon--neutral { color: var(--gold-400); }
.wg-toast__icon--success { color: #8FD3B4; }
.wg-toast__icon--adverse { color: #F0A9A2; }

/* Logo ------------------------------------------------------------------- */
.wg-logo img { display: block; object-fit: contain; }