/* Worlds primitives (worldui.sky-ai.com/primitives.css). One implementation per primitive, the same file for every
   world, driven only by the SPEC section 2 variables of the world sheet (tokens/{id}.css). Prefix wp-.
   Every state is styled twice: by the real pseudo-class and by data-state="hover|focus|active|disabled|error|loading",
   so a sheet can show the states side by side. Put data-world="{id}" on <html> (or on any stage element). */

:where([data-world]) {
  background-color: var(--pbg); background-image: var(--surface-page); color: var(--pfg);
  font-family: var(--b); font-weight: var(--bw); font-size: var(--t-body); line-height: var(--blh);
}
:where([data-world]) :where(*, *::before, *::after) { box-sizing: border-box; }

/* ---------- type ---------- */
.wp-display, .wp-h1, .wp-h2, .wp-h3 {
  margin: 0; font-family: var(--h); font-weight: var(--hw); font-style: var(--hs); text-transform: var(--hcase);
  letter-spacing: var(--htrack); line-height: var(--hlh); color: var(--pfg);
}
.wp-display { font-size: var(--t-display); }
.wp-h1 { font-size: var(--t-h1); }
.wp-h2 { font-size: var(--t-h2); }
.wp-h3 { font-size: var(--t-h3); }
.wp-text { margin: 0; font-size: var(--t-body); line-height: var(--blh); max-width: var(--measure); }
.wp-small { font-size: var(--t-small); }
.wp-caption { font-size: var(--t-caption); color: var(--pmuted); }
.wp-muted { color: var(--pmuted); }
.wp-mono { font-family: var(--m); }
.wp-num { font-variant-numeric: var(--num); }
.wp-icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-w); stroke-linecap: var(--icon-cap); stroke-linejoin: var(--icon-join); }

/* ---------- button ---------- */
.wp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); position: relative;
  height: var(--ctrl-h); padding: 0 var(--ctrl-px); margin: 0;
  border: var(--line-w) solid transparent; border-radius: var(--btn-r);
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-1);
  font-family: var(--btn-face); font-weight: var(--btn-w); font-size: var(--t-body); line-height: 1;
  text-transform: var(--btn-case); letter-spacing: var(--btn-track); text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-spring);
}
.wp-btn .wp-icon, .wp-btn > svg { width: 1em; height: 1em; }
.wp-btn:hover, .wp-btn[data-state="hover"] { background: color-mix(in oklch, var(--btn-bg) 86%, var(--pfg)); box-shadow: var(--shadow-2); }
.wp-btn:focus-visible, .wp-btn[data-state="focus"] { outline: none; box-shadow: var(--ring); }
.wp-btn:active, .wp-btn[data-state="active"] { transform: translateY(1px) scale(.98); box-shadow: var(--shadow-0); }
.wp-btn:disabled, .wp-btn[aria-disabled="true"], .wp-btn[data-state="disabled"] { opacity: .45; cursor: not-allowed; box-shadow: var(--shadow-0); transform: none; }
.wp-btn[data-state="error"] { box-shadow: 0 0 0 2px var(--pbg), 0 0 0 4px var(--crit); }
.wp-btn[aria-busy="true"], .wp-btn[data-state="loading"] { color: transparent; pointer-events: none; }
.wp-btn[aria-busy="true"]::after, .wp-btn[data-state="loading"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: calc(var(--line-w) + 1px) solid var(--btn-fg); border-right-color: transparent;
  animation: wp-spin calc(var(--dur-3) * 2) linear infinite;
}
@keyframes wp-spin { to { transform: rotate(1turn); } }

.wp-btn--secondary { background: var(--btn2-bg); color: var(--btn2-fg); border-color: var(--btn2-line); box-shadow: var(--shadow-0); }
.wp-btn--secondary:hover, .wp-btn--secondary[data-state="hover"] { background: var(--pbg3); border-color: var(--pfg); box-shadow: var(--shadow-0); }
.wp-btn--secondary[aria-busy="true"]::after, .wp-btn--secondary[data-state="loading"]::after { border-color: var(--btn2-fg); border-right-color: transparent; }
.wp-btn--ghost { background: transparent; color: var(--pfg); border-color: transparent; box-shadow: var(--shadow-0); }
.wp-btn--ghost:hover, .wp-btn--ghost[data-state="hover"] { background: var(--pbg3); box-shadow: var(--shadow-0); }
.wp-btn--ghost[aria-busy="true"]::after, .wp-btn--ghost[data-state="loading"]::after { border-color: var(--pfg); border-right-color: transparent; }
.wp-btn--danger { background: var(--crit); color: var(--pbg); box-shadow: var(--shadow-0); }
.wp-btn--danger:hover, .wp-btn--danger[data-state="hover"] { background: color-mix(in oklch, var(--crit) 84%, var(--pfg)); box-shadow: var(--shadow-1); }
.wp-btn--danger[aria-busy="true"]::after, .wp-btn--danger[data-state="loading"]::after { border-color: var(--pbg); border-right-color: transparent; }
.wp-btn--icon { width: var(--ctrl-h); padding: 0; }
.wp-btn--s { height: calc(var(--ctrl-h) - 8px); padding: 0 calc(var(--ctrl-px) - 4px); font-size: var(--t-small); }
.wp-btn--s.wp-btn--icon { width: calc(var(--ctrl-h) - 8px); padding: 0; }
.wp-btn--l { height: calc(var(--ctrl-h) + 8px); padding: 0 calc(var(--ctrl-px) + 6px); }
.wp-btn--l.wp-btn--icon { width: calc(var(--ctrl-h) + 8px); padding: 0; }

/* ---------- field ---------- */
.wp-field { display: grid; gap: calc(var(--u) * 1.5); min-width: 0; }
.wp-field__label { font-size: var(--t-small); font-weight: 600; color: var(--pfg); }
.wp-field__input {
  display: block; width: 100%; height: var(--ctrl-h); margin: 0; padding: 0 calc(var(--ctrl-px) * 0.75);
  background-color: var(--field-bg); color: var(--pfg); border: var(--field-line); border-radius: var(--field-r);
  font-family: var(--b); font-weight: var(--bw); font-size: var(--t-body); line-height: var(--blh);
  background-image: linear-gradient(var(--pacc), var(--pacc)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 calc(var(--line-w) * 2);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-size var(--dur-2) var(--ease-out);
}
.wp-field__input::placeholder { color: var(--pmuted); opacity: 1; }
textarea.wp-field__input { height: auto; min-height: calc(var(--ctrl-h) * 2.5); padding-top: calc(var(--u) * 2.5); padding-bottom: calc(var(--u) * 2.5); resize: vertical; }
.wp-field__input:hover, .wp-field[data-state="hover"] .wp-field__input { border-color: var(--pmuted); }
.wp-field__input:focus, .wp-field[data-state="focus"] .wp-field__input { outline: none; border-color: var(--pacc); box-shadow: var(--ring); background-size: 100% calc(var(--line-w) * 2); }
.wp-field__input:disabled, .wp-field[data-state="disabled"] .wp-field__input { opacity: .55; cursor: not-allowed; background-color: var(--pbg3); }
.wp-field[data-state="disabled"] .wp-field__label { color: var(--pmuted); }
.wp-field__input[aria-invalid="true"], .wp-field[data-state="error"] .wp-field__input {
  border-color: var(--crit); background-image: linear-gradient(var(--crit), var(--crit)); background-size: 100% calc(var(--line-w) * 2);
}
.wp-field[data-state="loading"] .wp-field__input { color: transparent; background-image: linear-gradient(90deg, var(--field-bg), var(--pbg3), var(--field-bg)); background-size: 200% 100%; animation: wp-shimmer calc(var(--dur-3) * 3) linear infinite; }
@keyframes wp-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.wp-field__help { font-size: var(--t-caption); color: var(--pmuted); }
.wp-field__error { display: none; align-items: center; gap: var(--u); font-size: var(--t-caption); color: var(--crit); }
.wp-field[data-state="error"] .wp-field__error, .wp-field__input[aria-invalid="true"] ~ .wp-field__error { display: flex; }
.wp-field[data-state="error"] .wp-field__help { display: none; }
.wp-field__select { position: relative; display: block; }
.wp-field__select .wp-field__input { padding-right: calc(var(--ctrl-px) * 0.75 + 1.5em); cursor: pointer; }
.wp-field__select::after {
  content: ""; position: absolute; right: calc(var(--ctrl-px) * 0.75); top: 50%; width: .5em; height: .5em; pointer-events: none;
  border-right: calc(var(--line-w) + .5px) solid var(--pmuted); border-bottom: calc(var(--line-w) + .5px) solid var(--pmuted);
  transform: translateY(-70%) rotate(45deg);
}
.wp-field__search { position: relative; display: block; }
.wp-field__search .wp-icon { position: absolute; left: calc(var(--ctrl-px) * 0.75); top: 50%; transform: translateY(-50%); color: var(--pmuted); }
.wp-field__search .wp-field__input { padding-left: calc(var(--ctrl-px) * 0.75 + 1.5em); }

/* ---------- check, radio, switch ---------- */
.wp-check, .wp-radio, .wp-switch { position: relative; display: inline-flex; align-items: center; gap: calc(var(--u) * 2.5); cursor: pointer; font-size: var(--t-body); color: var(--pfg); }
.wp-check > input, .wp-radio > input, .wp-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wp-check__box, .wp-radio__box {
  flex: none; display: inline-grid; place-items: center; width: calc(var(--ctrl-h) * 0.45); height: calc(var(--ctrl-h) * 0.45);
  border: calc(var(--line-w) + .5px) solid var(--pmuted); background: var(--pbg);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.wp-check__box { border-radius: calc(var(--r-s) * 0.5); }
.wp-radio__box { border-radius: 50%; }
.wp-check__box::after { content: ""; width: 30%; height: 55%; margin-top: -12%; border-right: calc(var(--line-w) + 1px) solid var(--pacc-ink); border-bottom: calc(var(--line-w) + 1px) solid var(--pacc-ink); transform: rotate(45deg) scale(0); transition: transform var(--dur-1) var(--ease-spring); }
.wp-radio__box::after { content: ""; width: 44%; height: 44%; border-radius: 50%; background: var(--pacc-ink); transform: scale(0); transition: transform var(--dur-1) var(--ease-spring); }
input:checked + .wp-check__box, input:checked + .wp-radio__box, [data-state="selected"] > .wp-check__box, [data-state="selected"] > .wp-radio__box { background: var(--pacc); border-color: var(--pacc); }
input:checked + .wp-check__box::after, [data-state="selected"] > .wp-check__box::after { transform: rotate(45deg) scale(1); }
input:checked + .wp-radio__box::after, [data-state="selected"] > .wp-radio__box::after { transform: scale(1); }
.wp-check:hover > .wp-check__box, .wp-radio:hover > .wp-radio__box, [data-state="hover"] > .wp-check__box, [data-state="hover"] > .wp-radio__box { border-color: var(--pfg); }
input:focus-visible + .wp-check__box, input:focus-visible + .wp-radio__box, input:focus-visible + .wp-switch__track,
[data-state="focus"] > .wp-check__box, [data-state="focus"] > .wp-radio__box, [data-state="focus"] > .wp-switch__track { box-shadow: var(--ring); }
.wp-check:has(input:disabled), .wp-radio:has(input:disabled), .wp-switch:has(input:disabled),
.wp-check[data-state="disabled"], .wp-radio[data-state="disabled"], .wp-switch[data-state="disabled"] { opacity: .45; cursor: not-allowed; }
.wp-check[data-state="error"] > .wp-check__box, .wp-radio[data-state="error"] > .wp-radio__box, input[aria-invalid="true"] + .wp-check__box { border-color: var(--crit); }
.wp-check[data-state="active"] > .wp-check__box, .wp-radio[data-state="active"] > .wp-radio__box, .wp-check:active > .wp-check__box, .wp-radio:active > .wp-radio__box { transform: scale(.92); }
.wp-switch__track {
  flex: none; position: relative; width: calc(var(--ctrl-h) * 0.95); height: calc(var(--ctrl-h) * 0.55);
  border-radius: var(--switch-r); background: var(--pline); border: var(--line-w) solid transparent;
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.wp-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(var(--ctrl-h) * 0.55 - 4px - var(--line-w) * 2); aspect-ratio: 1;
  border-radius: var(--switch-r); background: var(--pbg); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring);
}
input:checked + .wp-switch__track, [data-state="selected"] > .wp-switch__track { background: var(--pacc); }
input:checked + .wp-switch__track::after, [data-state="selected"] > .wp-switch__track::after { transform: translateX(calc(var(--ctrl-h) * 0.4)); }
.wp-switch:hover > .wp-switch__track, .wp-switch[data-state="hover"] > .wp-switch__track { border-color: var(--pmuted); }
.wp-switch[data-state="error"] > .wp-switch__track { border-color: var(--crit); }
.wp-switch[data-state="loading"] > .wp-switch__track::after { animation: wp-pulse calc(var(--dur-3) * 2) var(--ease-in-out) infinite alternate; }
@keyframes wp-pulse { to { opacity: .4; } }

/* ---------- segmented control and tabs ---------- */
.wp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--pbg3); border: var(--line-w) solid var(--pline); }
.wp-seg__item {
  height: calc(var(--ctrl-h) - 10px); padding: 0 calc(var(--ctrl-px) * 0.8); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--pmuted); font-family: var(--btn-face); font-weight: var(--btn-w); font-size: var(--t-small);
  text-transform: var(--btn-case); letter-spacing: var(--btn-track); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.wp-seg__item:hover, .wp-seg__item[data-state="hover"] { color: var(--pfg); }
.wp-seg__item[aria-pressed="true"], .wp-seg__item[aria-selected="true"], .wp-seg__item[data-state="selected"] { background: var(--pbg); color: var(--pfg); box-shadow: var(--shadow-1); }
.wp-seg__item:focus-visible, .wp-seg__item[data-state="focus"] { outline: none; box-shadow: var(--ring); }
.wp-seg__item:disabled, .wp-seg__item[data-state="disabled"] { opacity: .45; cursor: not-allowed; }

.wp-tabs { display: flex; gap: calc(var(--u) * 1); border-bottom: var(--line-w) solid var(--pline); overflow-x: auto; }
.wp-tabs__tab {
  position: relative; height: var(--ctrl-h); padding: 0 calc(var(--ctrl-px) * 0.8); margin-bottom: calc(var(--u) * 1.5); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--pmuted); font-family: var(--btn-face); font-weight: var(--btn-w); font-size: var(--t-small);
  text-transform: var(--btn-case); letter-spacing: var(--btn-track); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.wp-tabs__tab:hover, .wp-tabs__tab[data-state="hover"] { color: var(--pfg); background: var(--pbg3); }
.wp-tabs__tab[aria-selected="true"], .wp-tabs__tab[data-state="selected"] { color: var(--pacc-ink); background: var(--pacc); }
.wp-tabs__tab:focus-visible, .wp-tabs__tab[data-state="focus"] { outline: none; box-shadow: var(--ring); }
.wp-tabs__tab:disabled, .wp-tabs__tab[data-state="disabled"] { opacity: .45; cursor: not-allowed; }
/* A square world (r-m resolves to 0) turns the selected pill into an underline in the accent. */
@container style(--r-m: 0) {
  .wp-tabs__tab { border-radius: 0; margin-bottom: 0; }
  .wp-tabs__tab[aria-selected="true"], .wp-tabs__tab[data-state="selected"] { background: transparent; color: var(--pfg); box-shadow: inset 0 calc(var(--line-w) * -2 - 1px) 0 var(--pacc); }
  .wp-tabs__tab:hover, .wp-tabs__tab[data-state="hover"] { background: transparent; }
}

/* ---------- chip and badge ---------- */
.wp-chip {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5); height: calc(var(--ctrl-h) * 0.72); padding: 0 calc(var(--ctrl-px) * 0.7);
  border: var(--line-w) solid var(--pline); border-radius: var(--chip-r); background: var(--pbg); color: var(--pfg);
  font-family: var(--b); font-size: var(--t-small); font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
button.wp-chip { cursor: pointer; }
button.wp-chip:hover, .wp-chip[data-state="hover"] { border-color: var(--pmuted); }
.wp-chip[aria-pressed="true"], .wp-chip[data-state="selected"] { background: color-mix(in oklch, var(--pacc) 14%, var(--pbg)); border-color: var(--pacc); }
.wp-chip:focus-visible, .wp-chip[data-state="focus"] { outline: none; box-shadow: var(--ring); }
.wp-chip:disabled, .wp-chip[data-state="disabled"] { opacity: .45; cursor: not-allowed; }
.wp-chip[data-state="error"] { border-color: var(--crit); color: var(--crit); }
.wp-chip__x { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: calc(var(--u) * -1); padding: 0; border: 0; border-radius: var(--chip-r); background: transparent; color: var(--pmuted); cursor: pointer; }
.wp-chip__x:hover { background: var(--pbg3); color: var(--pfg); }
.wp-chip__x:focus-visible { outline: none; box-shadow: var(--ring); }

.wp-badge {
  display: inline-flex; align-items: center; gap: var(--u); height: calc(var(--ctrl-h) * 0.58); padding: 0 calc(var(--u) * 2.5);
  border-radius: var(--chip-r); font-size: var(--t-caption); font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--pfg); background: var(--pbg3);
}
.wp-badge .wp-icon { width: 1.1em; height: 1.1em; }
.wp-badge--good { color: var(--good); background: color-mix(in oklch, var(--good) 12%, var(--pbg)); }
.wp-badge--warn { color: var(--warn); background: color-mix(in oklch, var(--warn) 12%, var(--pbg)); }
.wp-badge--crit { color: var(--crit); background: color-mix(in oklch, var(--crit) 12%, var(--pbg)); }
.wp-badge--info { color: var(--info); background: color-mix(in oklch, var(--info) 12%, var(--pbg)); }

/* ---------- link, divider, avatar ---------- */
.wp-link { color: var(--pacc2); text-decoration: underline; text-decoration-thickness: var(--line-w); text-underline-offset: 3px; border-radius: var(--r-s); transition: text-decoration-thickness var(--dur-1) var(--ease-out); }
.wp-link:hover, .wp-link[data-state="hover"] { text-decoration-thickness: calc(var(--line-w) * 2); }
.wp-link:focus-visible, .wp-link[data-state="focus"] { outline: none; box-shadow: var(--ring); }
.wp-link[data-state="disabled"], .wp-link[aria-disabled="true"] { color: var(--pmuted); pointer-events: none; text-decoration-style: dotted; }
.wp-hr { display: block; height: var(--line-w); margin: calc(var(--u) * 6) 0; border: 0; background: var(--pline); }
.wp-hr--ornament { height: auto; background: none; display: flex; justify-content: center; }
.wp-hr--ornament img { display: block; max-width: 60%; max-height: calc(var(--ctrl-h) * 1.2); width: auto; height: auto; }
.wp-avatar {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--pacc); color: var(--pacc-ink); font-family: var(--h); font-weight: var(--hw); font-size: 15px; letter-spacing: 0; text-transform: uppercase; overflow: hidden;
}
.wp-avatar--s { width: 32px; height: 32px; font-size: 12px; }
.wp-avatar--l { width: 48px; height: 48px; font-size: 18px; }
.wp-avatar--muted { background: var(--pbg3); color: var(--pfg); box-shadow: inset 0 0 0 var(--line-w) var(--pline); }

/* ---------- tooltip, toast, dialog ---------- */
.wp-tip { position: relative; display: inline-block; max-width: 240px; padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5); border-radius: var(--r-s); background: var(--pfg); color: var(--pbg); font-size: var(--t-caption); line-height: 1.35; box-shadow: var(--shadow-2); }
.wp-tip::after { content: ""; position: absolute; left: 50%; top: 100%; border: 5px solid transparent; border-top-color: var(--pfg); transform: translateX(-50%); }
.wp-toast { display: flex; align-items: center; gap: calc(var(--u) * 3); max-width: 380px; padding: calc(var(--u) * 3) calc(var(--u) * 4); border-radius: var(--r-m); background: var(--pfg); color: var(--pbg); font-size: var(--t-small); box-shadow: var(--shadow-2); }
.wp-toast__action { margin-left: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wp-toast--good .wp-icon { color: color-mix(in oklch, var(--good) 55%, var(--pbg)); }
.wp-toast--crit .wp-icon { color: color-mix(in oklch, var(--crit) 55%, var(--pbg)); }
.wp-scrim { display: grid; place-items: center; padding: calc(var(--u) * 6); background: var(--overlay); }
.wp-dialog {
  width: 100%; max-width: 440px; padding: calc(var(--u) * 6); border: var(--border-card); border-radius: var(--r-l);
  background-color: var(--pbg2); background-image: var(--surface-raised); color: var(--pfg); box-shadow: var(--shadow-2);
}
.wp-dialog__title { margin: 0 0 calc(var(--u) * 2); font-family: var(--h); font-weight: var(--hw); font-style: var(--hs); text-transform: var(--hcase); letter-spacing: var(--htrack); line-height: var(--hlh); font-size: var(--t-h3); }
.wp-dialog__body { margin: 0 0 calc(var(--u) * 6); color: var(--pmuted); }
.wp-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--u) * 2); }

/* ---------- card and table ---------- */
.wp-card {
  padding: calc(var(--u) * 5); border: var(--border-card); border-radius: var(--r-m);
  background-color: var(--pbg2); background-image: var(--surface); box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.wp-card:hover, .wp-card[data-state="hover"] { box-shadow: var(--shadow-2); }
.wp-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.wp-table th { text-align: left; font-weight: 600; color: var(--pmuted); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); border-bottom: var(--line-w) solid var(--pline); white-space: nowrap; }
.wp-table td { padding: calc(var(--u) * 2.5) calc(var(--u) * 3); border-bottom: var(--line-w) solid var(--pline); }
.wp-table tbody tr:nth-child(even) td { background: var(--pbg3); }
.wp-table tbody tr:hover td, .wp-table tbody tr[data-state="hover"] td { background: color-mix(in oklch, var(--pacc) 8%, var(--pbg)); }
.wp-table tbody tr[data-state="selected"] td { background: color-mix(in oklch, var(--pacc) 14%, var(--pbg)); }
.wp-table .wp-num, .wp-table td.wp-num, .wp-table th.wp-num { text-align: right; font-variant-numeric: var(--num); }

/* ---------- layout templates: a page skeleton in the world's dress, nothing more ---------- */
.wp-header { display: flex; align-items: center; gap: calc(var(--u) * 6); min-height: calc(var(--ctrl-h) + var(--u) * 6); padding: 0 calc(var(--u) * 6); background: var(--pbg); border-bottom: var(--line-w) solid var(--pline); }
.wp-header__brand { font-family: var(--h); font-weight: var(--hw); font-style: var(--hs); text-transform: var(--hcase); letter-spacing: var(--htrack); font-size: var(--t-h3); color: var(--pfg); text-decoration: none; white-space: nowrap; }
.wp-header__nav { display: flex; gap: calc(var(--u) * 5); }
.wp-header__nav a { color: var(--pmuted); text-decoration: none; font-size: var(--t-small); padding: calc(var(--u) * 1) 0; }
.wp-header__nav a:hover, .wp-header__nav a[aria-current] { color: var(--pfg); box-shadow: inset 0 calc(var(--line-w) * -2) 0 var(--pacc); }
.wp-header__actions { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-left: auto; }
.wp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3) calc(var(--u) * 6); border-bottom: var(--line-w) solid var(--pline); }
.wp-content { padding: calc(var(--u) * 8) calc(var(--u) * 6); }
.wp-content--prose > * { max-width: var(--measure); }
.wp-content--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: calc(var(--u) * 4); }
.wp-footer { padding: calc(var(--u) * 6); border-top: var(--line-w) solid var(--pline); color: var(--pmuted); font-size: var(--t-small); }
@media (max-width: 560px) { .wp-header__nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .wp-btn[aria-busy="true"]::after, .wp-btn[data-state="loading"]::after, .wp-field[data-state="loading"] .wp-field__input, .wp-switch[data-state="loading"] > .wp-switch__track::after { animation: none; }
}