/* design-3 — components (docs/design-system.md §4/§5). Scoped under [data-ui="wp"]. */

/* ── Command bar (§4) — positive actions left, destructive right & grey, search far right, closed by hairline ── */
[data-ui="wp"] .wp-cmdbar {
    display: flex; align-items: center; gap: var(--wp-s4);
    padding-bottom: var(--wp-s3); margin-bottom: var(--wp-s4);
    border-bottom: var(--wp-hairline) solid var(--wp-line);
}
[data-ui="wp"] .wp-cmdbar__actions { display: flex; align-items: center; gap: var(--wp-s4); }
[data-ui="wp"] .wp-cmdbar__spacer { flex: 1 1 auto; }
[data-ui="wp"] .wp-cmd {
    display: inline-flex; align-items: center; gap: var(--wp-s2);
    border: 0; background: transparent; cursor: pointer;
    font-size: var(--wp-fs-body); color: var(--wp-text); padding: var(--wp-s1) 0;
}
[data-ui="wp"] .wp-cmd .wp-icon { color: var(--wp-blue); }         /* positive action icon = brand blue, 16px */
[data-ui="wp"] .wp-cmd:hover { color: var(--wp-blue-hover); }
[data-ui="wp"] .wp-cmd--danger { color: var(--wp-text-2); }        /* destructive stays GREY here; red only in the dialog */
[data-ui="wp"] .wp-cmd--danger .wp-icon { color: var(--wp-icon); }
[data-ui="wp"] .wp-cmdbar__search {
    display: flex; align-items: center; gap: var(--wp-s2);
    width: 220px; height: 30px; padding: 0 var(--wp-s3);
    border: var(--wp-hairline) solid var(--wp-line-strong); border-radius: var(--wp-radius-control);
    background: var(--wp-card);
}
[data-ui="wp"] .wp-cmdbar__search .wp-icon { color: var(--wp-icon); }
[data-ui="wp"] .wp-cmdbar__search input { flex: 1 1 auto; border: 0; outline: none; background: transparent; font-size: var(--wp-fs-body); color: var(--wp-text); }
[data-ui="wp"] .wp-cmdbar__search input::placeholder { color: var(--wp-text-muted); }

/* ── Table (§4) ───────────────────────────────────────────────────────────────── */
[data-ui="wp"] .wp-table { width: 100%; border-collapse: collapse; font-size: var(--wp-fs-body); }
[data-ui="wp"] .wp-table thead th {
    text-align: left; font-weight: var(--wp-fw-medium); color: var(--wp-text-2);
    padding: var(--wp-s2) var(--wp-s3); border-bottom: var(--wp-hairline) solid var(--wp-line);
}
[data-ui="wp"] .wp-table tbody td { padding: var(--wp-s2) var(--wp-s3); border-bottom: var(--wp-hairline) solid var(--wp-line); }
[data-ui="wp"] .wp-table tbody tr:hover { background: var(--wp-tile); }
[data-ui="wp"] .wp-table a { color: var(--wp-link); }              /* linked cells */
[data-ui="wp"] .wp-table .wp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Filter chips (§4) ────────────────────────────────────────────────────────── */
[data-ui="wp"] .wp-chips { display: flex; flex-wrap: wrap; gap: var(--wp-s2); margin-bottom: var(--wp-s3); }
[data-ui="wp"] .wp-chip {
    display: inline-flex; align-items: center; gap: var(--wp-s1);
    padding: 3px var(--wp-s3); border-radius: var(--wp-radius-pill);
    border: var(--wp-hairline) solid var(--wp-line-strong); background: var(--wp-card);
    font-size: var(--wp-fs-label); color: var(--wp-text-2); cursor: pointer;
}
[data-ui="wp"] .wp-chip.is-active { background: var(--wp-blue-tint-8); color: var(--wp-link); border-color: transparent; }

/* ── Status badges (§2/§4) — one class + modifiers ────────────────────────────── */
[data-ui="wp"] .wp-badge {
    display: inline-flex; align-items: center; gap: var(--wp-s1);
    padding: 2px var(--wp-s2); border-radius: var(--wp-radius-pill);
    font-size: var(--wp-fs-label); line-height: 1.4;
    background: var(--wp-neutral-bg); color: var(--wp-neutral-text);
}
[data-ui="wp"] .wp-badge--success { background: var(--wp-success-bg); color: var(--wp-success-text); }
[data-ui="wp"] .wp-badge--warning { background: var(--wp-warning-bg); color: var(--wp-warning-text); }
[data-ui="wp"] .wp-badge--error   { background: var(--wp-error-bg);   color: var(--wp-error-text); }
[data-ui="wp"] .wp-badge--neutral { background: var(--wp-neutral-bg); color: var(--wp-neutral-text); }

/* ── Buttons (§4) ─────────────────────────────────────────────────────────────── */
[data-ui="wp"] .wp-btn {
    display: inline-flex; align-items: center; gap: var(--wp-s2);
    font-size: var(--wp-fs-body); font-weight: var(--wp-fw-medium);
    padding: var(--wp-s2) var(--wp-s4); border-radius: var(--wp-radius-control);
    border: var(--wp-hairline) solid transparent; cursor: pointer; background: transparent; color: var(--wp-text);
}
/* wp-btn-hover-fix: the button hover rules must set an explicit colour + kill the underline, otherwise the
   global `a:hover { color: --wp-blue-hover; text-decoration: underline }` (wp-base.css, specificity 0,2,1) wins
   over the plain `.wp-btn--primary { color:#fff }` (0,2,0) on <a class="wp-btn"> and renders blue-on-blue. These
   `.wp-btn--*:hover` rules are (0,3,0) so they win; the background/border look is unchanged. */
[data-ui="wp"] .wp-btn:hover { text-decoration: none; }
[data-ui="wp"] .wp-btn--primary { background: var(--wp-blue); color: #fff; border-color: var(--wp-blue); }
[data-ui="wp"] .wp-btn--primary:hover { background: var(--wp-blue-hover); border-color: var(--wp-blue-hover); color: #fff; }
[data-ui="wp"] .wp-btn--secondary { background: var(--wp-card); color: var(--wp-text); border-color: var(--wp-line-strong); }
[data-ui="wp"] .wp-btn--secondary:hover { background: var(--wp-tile); color: var(--wp-text); }
/* Destructive — ONLY inside a confirmation dialog/page (§4: red appears in the confirm step, not the command bar). */
[data-ui="wp"] .wp-btn--danger { background: var(--wp-error-line); color: #fff; border-color: var(--wp-error-line); }
[data-ui="wp"] .wp-btn--danger:hover { background: var(--wp-error-text); border-color: var(--wp-error-text); color: #fff; }
[data-ui="wp"] .wp-btn:disabled, [data-ui="wp"] .wp-btn.is-disabled {
    background: var(--wp-tile); color: var(--wp-text-muted); border-color: transparent; cursor: not-allowed;
}
/* design-6a2 — Button convention. Icon+Text works out of the box (.wp-btn is inline-flex + gap): put a
   <svg class="wp-icon"> before the <span>label</span>; the icon inherits the button's text colour (currentColor)
   and is normalised to 16px here so authors don't need wp-icon--16. Additive — text-only buttons are unaffected. */
[data-ui="wp"] .wp-btn .wp-icon { width: 16px; height: 16px; }
/* Icon-only variant — compact square for tight ROW actions (edit/delete/copy). aria-label is MANDATORY.
   Transparent by default (subtle), tinted hover; composes with --primary/--secondary/--danger for a solid one. */
[data-ui="wp"] .wp-btn--icon {
    width: 32px; height: 32px; padding: 0; justify-content: center; gap: 0;
    color: var(--wp-icon);
}
[data-ui="wp"] .wp-btn--icon:hover { background: var(--wp-tile); color: var(--wp-text-2); }
[data-ui="wp"] .wp-btn--icon.wp-btn--primary,
[data-ui="wp"] .wp-btn--icon.wp-btn--danger { color: #fff; }

/* ── Form fields + validation (§4) ────────────────────────────────────────────── */
[data-ui="wp"] .wp-field { display: flex; flex-direction: column; gap: var(--wp-s1); margin-bottom: var(--wp-s4); max-width: 420px; }
[data-ui="wp"] .wp-label { font-size: var(--wp-fs-label); color: var(--wp-text-2); }
[data-ui="wp"] .wp-req { color: var(--wp-error-line); margin-left: 2px; }          /* required asterisk */
[data-ui="wp"] .wp-input {
    height: 32px; padding: 0 var(--wp-s3); font-size: var(--wp-fs-body); color: var(--wp-text);
    background: var(--wp-card); border: var(--wp-hairline) solid var(--wp-line-strong);
    border-radius: var(--wp-radius-control); outline: none;
}
[data-ui="wp"] textarea.wp-input { height: auto; padding: var(--wp-s2) var(--wp-s3); }
[data-ui="wp"] .wp-input:focus { border-color: var(--wp-blue); box-shadow: var(--wp-focus-ring); }
[data-ui="wp"] .wp-help { font-size: var(--wp-fs-caption); color: var(--wp-text-muted); }
[data-ui="wp"] .wp-input:disabled, [data-ui="wp"] .wp-input.is-disabled {
    background: var(--wp-tile); color: var(--wp-text-muted); border-color: transparent;
}
/* Error field: 1px red border (the jump from 0.5px is legible even without colour) + icon + error text */
[data-ui="wp"] .wp-field.has-error .wp-input { border: 1px solid var(--wp-error-line); padding-right: 30px; }
[data-ui="wp"] .wp-field.has-error .wp-input-wrap { position: relative; }
[data-ui="wp"] .wp-field.has-error .wp-input-wrap .wp-icon { position: absolute; right: 8px; top: 8px; color: var(--wp-error-line); }
[data-ui="wp"] .wp-error-text { font-size: var(--wp-fs-caption); color: var(--wp-error-text); }
/* Success ONLY on a verified state (not every valid field) */
[data-ui="wp"] .wp-verified { display: inline-flex; align-items: center; gap: var(--wp-s1); font-size: var(--wp-fs-caption); color: var(--wp-success-text); }
[data-ui="wp"] .wp-verified .wp-icon { color: var(--wp-success-line); }

/* Toggle (statt Checkbox, wenn es sofort wirkt) */
[data-ui="wp"] .wp-toggle { position: relative; display: inline-block; width: 34px; height: 20px; }
[data-ui="wp"] .wp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
[data-ui="wp"] .wp-toggle__track { position: absolute; inset: 0; background: var(--wp-line-strong); border-radius: 999px; transition: background .12s; }
[data-ui="wp"] .wp-toggle__track::before { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .12s; }
[data-ui="wp"] .wp-toggle input:checked + .wp-toggle__track { background: var(--wp-blue); }
[data-ui="wp"] .wp-toggle input:checked + .wp-toggle__track::before { transform: translateX(14px); }
[data-ui="wp"] .wp-toggle input:focus-visible + .wp-toggle__track { box-shadow: var(--wp-focus-ring); }

/* Collector banner (blocking errors: names what's missing AND that nothing was saved) */
[data-ui="wp"] .wp-banner {
    display: flex; align-items: flex-start; gap: var(--wp-s2);
    padding: var(--wp-s3) var(--wp-s4); border-radius: var(--wp-radius-card);
    background: var(--wp-error-bg); color: var(--wp-error-text); border: var(--wp-hairline) solid var(--wp-error-line);
    margin-bottom: var(--wp-s4); font-size: var(--wp-fs-body);
}
[data-ui="wp"] .wp-banner .wp-icon { color: var(--wp-error-line); margin-top: 1px; }

/* ── Surfaces (§4) — exactly three: tinted tile / white card / tinted note ─────── */
[data-ui="wp"] .wp-metric {
    background: var(--wp-tile); border-radius: var(--wp-radius-card);
    padding: var(--wp-s4); border: 0;
}
[data-ui="wp"] .wp-metric__label { font-size: var(--wp-fs-label); color: var(--wp-text-2); }
[data-ui="wp"] .wp-metric__value { font-size: 24px; font-weight: var(--wp-fw-medium); color: var(--wp-text); line-height: 1.2; }

[data-ui="wp"] .wp-card {
    background: var(--wp-card); border: var(--wp-hairline) solid var(--wp-line);
    border-radius: var(--wp-radius-card); padding: var(--wp-s4);
}
[data-ui="wp"] .wp-card__title { font-size: var(--wp-fs-section); font-weight: var(--wp-fw-medium); margin: 0 0 var(--wp-s3); }

[data-ui="wp"] .wp-note {
    display: flex; align-items: flex-start; gap: var(--wp-s2);
    padding: var(--wp-s3) var(--wp-s4); border-radius: var(--wp-radius-card);
    font-size: var(--wp-fs-body); border: var(--wp-hairline) solid transparent;
}
[data-ui="wp"] .wp-note--warn { background: var(--wp-warning-bg); color: var(--wp-warning-text); border-color: var(--wp-warning-line); }
[data-ui="wp"] .wp-note--warn .wp-icon { color: var(--wp-warning-line); }
[data-ui="wp"] .wp-note--info { background: var(--wp-blue-tint-8); color: var(--wp-link); border-color: transparent; }
[data-ui="wp"] .wp-note--info .wp-icon { color: var(--wp-blue); }

/* ── Plan cards (§4) ──────────────────────────────────────────────────────────── */
[data-ui="wp"] .wp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp-s4); }
[data-ui="wp"] .wp-plan {
    background: var(--wp-card); border: var(--wp-hairline) solid var(--wp-line);
    border-radius: var(--wp-radius-card); padding: var(--wp-s4); display: flex; flex-direction: column; gap: var(--wp-s2);
}
[data-ui="wp"] .wp-plan.is-current { border: 2px solid var(--wp-blue); background: var(--wp-blue-tint-8); }
[data-ui="wp"] .wp-plan__name { font-size: var(--wp-fs-section); font-weight: var(--wp-fw-medium); }
[data-ui="wp"] .wp-plan__price { font-size: 24px; font-weight: var(--wp-fw-medium); }
[data-ui="wp"] .wp-plan__price small { font-size: var(--wp-fs-caption); color: var(--wp-text-muted); font-weight: var(--wp-fw-regular); }
[data-ui="wp"] .wp-plan__list { list-style: none; margin: var(--wp-s2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp-s1); font-size: var(--wp-fs-body); }
[data-ui="wp"] .wp-plan__miss { color: var(--wp-text-muted); }     /* fehlende Eigenschaft: graues Minus, kein rotes X */
[data-ui="wp"] .wp-plan__current-note { margin-top: auto; color: var(--wp-link); font-size: var(--wp-fs-body); }

/* ── Dashboard grid (§5) — 12 columns; empty tiles only ───────────────────────── */
[data-ui="wp"] .wp-dash { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--wp-s3); }
[data-ui="wp"] .wp-dash__metric { grid-column: span 3; }
[data-ui="wp"] .wp-dash__chart  { grid-column: span 6; }
[data-ui="wp"] .wp-dash__chart--wide { grid-column: span 8; }
[data-ui="wp"] .wp-dash__list   { grid-column: span 4; }
[data-ui="wp"] .wp-empty {
    display: flex; flex-direction: column; gap: var(--wp-s2); align-items: flex-start;
    color: var(--wp-text-2); font-size: var(--wp-fs-body); min-height: 96px; justify-content: center;
}
[data-ui="wp"] .wp-empty__cta { color: var(--wp-blue); font-weight: var(--wp-fw-medium); }

/* Monthly/yearly segment control + "10 % sparen" badge (plan header).
   design-4b: the tenant interval toggle must stay a server-side GET toggle (?interval= <a> links, no JS),
   so the segment items are also stylable as anchors — same look as the <button> variant. */
[data-ui="wp"] .wp-segment { display: inline-flex; border: var(--wp-hairline) solid var(--wp-line-strong); border-radius: var(--wp-radius-control); overflow: hidden; }
[data-ui="wp"] .wp-segment button,
[data-ui="wp"] .wp-segment a { border: 0; background: var(--wp-card); color: var(--wp-text-2); padding: var(--wp-s1) var(--wp-s3); font-size: var(--wp-fs-label); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
[data-ui="wp"] .wp-segment button.is-active,
[data-ui="wp"] .wp-segment a.is-active { background: var(--wp-blue); color: #fff; }

/* Responsive: plan/dash collapse on narrow */
@media (max-width: 860px) {
    [data-ui="wp"] .wp-plans { grid-template-columns: 1fr; }
    [data-ui="wp"] .wp-dash__metric, [data-ui="wp"] .wp-dash__chart, [data-ui="wp"] .wp-dash__chart--wide, [data-ui="wp"] .wp-dash__list { grid-column: 1 / -1; }
}

/* ═══ design-6a — Komponenten-Fill ═══════════════════════════════════════════════ */

/* Expander (§ replaces data-bs-toggle="collapse") — native <details>, JS-free. Usable as a table-row
   expander (edit/history) or a standalone block. */
[data-ui="wp"] .wp-expander { border: var(--wp-hairline) solid var(--wp-line); border-radius: var(--wp-radius-card); background: var(--wp-card); }
[data-ui="wp"] .wp-expander + .wp-expander { margin-top: var(--wp-s2); }
[data-ui="wp"] .wp-expander__summary {
    display: flex; align-items: center; gap: var(--wp-s2); cursor: pointer; list-style: none;
    padding: var(--wp-s2) var(--wp-s3); font-size: var(--wp-fs-body); color: var(--wp-text);
    border-radius: var(--wp-radius-card);
}
[data-ui="wp"] .wp-expander__summary::-webkit-details-marker { display: none; }
[data-ui="wp"] .wp-expander__summary::marker { content: ""; }
[data-ui="wp"] .wp-expander__summary:hover { background: var(--wp-tile); }
[data-ui="wp"] .wp-expander__summary:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
[data-ui="wp"] .wp-expander__summary .wp-icon { color: var(--wp-icon); transition: transform .12s; }
[data-ui="wp"] .wp-expander[open] > .wp-expander__summary .wp-icon { transform: rotate(90deg); }
[data-ui="wp"] .wp-expander__chevron { margin-left: auto; }
[data-ui="wp"] .wp-expander__body { padding: var(--wp-s3); border-top: var(--wp-hairline) solid var(--wp-line); }

/* Modal — native <dialog>, opened/closed by the small _WpModal script (no Bootstrap, no data-bs-*). */
/* field-editor-cleanup: festes width (statt nur max-width) — sonst wächst das Modal content-
   getrieben mit langer Texteingabe ("wackelnde" Breite). */
[data-ui="wp"] .wp-modal { padding: 0; border: 0; background: transparent; width: min(520px, 92vw); max-width: 92vw; border-radius: var(--wp-radius-card); }
[data-ui="wp"] .wp-modal::backdrop { background: rgba(31,35,40,.38); }
[data-ui="wp"] .wp-modal__card {
    background: var(--wp-card); border: var(--wp-hairline) solid var(--wp-line);
    border-radius: var(--wp-radius-card); overflow: hidden; display: flex; flex-direction: column;
}
[data-ui="wp"] .wp-modal__header {
    display: flex; align-items: center; gap: var(--wp-s3);
    padding: var(--wp-s3) var(--wp-s4); border-bottom: var(--wp-hairline) solid var(--wp-line);
}
[data-ui="wp"] .wp-modal__title { font-size: var(--wp-fs-section); font-weight: var(--wp-fw-medium); margin: 0; }
[data-ui="wp"] .wp-modal__close {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer;
    color: var(--wp-icon); border-radius: var(--wp-radius-control);
}
[data-ui="wp"] .wp-modal__close:hover { background: var(--wp-tile); color: var(--wp-text-2); }
[data-ui="wp"] .wp-modal__close:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
[data-ui="wp"] .wp-modal__body { padding: var(--wp-s4); }
[data-ui="wp"] .wp-modal__footer {
    display: flex; justify-content: flex-end; gap: var(--wp-s2);
    padding: var(--wp-s3) var(--wp-s4); border-top: var(--wp-hairline) solid var(--wp-line);
}

/* Confirm — the dedicated confirmation step (own request/page). §4: red/danger appears HERE, not in the list. */
[data-ui="wp"] .wp-confirm { max-width: 560px; }
[data-ui="wp"] .wp-confirm__facts {
    display: grid; grid-template-columns: max-content 1fr; gap: var(--wp-s1) var(--wp-s4);
    margin: var(--wp-s4) 0; padding: var(--wp-s3) var(--wp-s4);
    background: var(--wp-tile); border-radius: var(--wp-radius-card);
}
[data-ui="wp"] .wp-confirm__label { color: var(--wp-text-2); font-size: var(--wp-fs-label); }
[data-ui="wp"] .wp-confirm__value { font-weight: var(--wp-fw-medium); font-variant-numeric: tabular-nums; }
[data-ui="wp"] .wp-confirm__actions { display: flex; gap: var(--wp-s2); }

/* Compact input for inline-row forms — same tokens/focus/error hooks as .wp-input, just smaller. */
[data-ui="wp"] .wp-input--sm { height: 26px; padding: 0 var(--wp-s2); font-size: var(--wp-fs-label); }
[data-ui="wp"] textarea.wp-input--sm { height: auto; padding: var(--wp-s1) var(--wp-s2); }

/* wp-tabs — section tabs for detail pages. PURELY SERVER-SIDE: each tab is an <a href="?tab=…"> link, the
   active one carries .wp-tab--active + aria-current="page", and only the active .wp-tabpanel is server-rendered.
   No JS, no data-bs-*. This is link NAVIGATION (rendered as <nav>), NOT an ARIA tablist widget (which would
   require JS keyboard handling). Chrome-neutral: the active indicator is brand blue (the action colour, §1),
   identical in both tenant (blue) and master-admin (bordeaux) chrome — no per-context token switch.
   .is-active is accepted as an alias so an existing page (Applications/Edit) can migrate by class swap only. */
[data-ui="wp"] .wp-tabs {
    display: flex; gap: var(--wp-s4); align-items: flex-end;
    border-bottom: var(--wp-hairline) solid var(--wp-line); margin-bottom: var(--wp-s5);
}
[data-ui="wp"] .wp-tab {
    display: inline-flex; align-items: center; padding: var(--wp-s2) 2px;
    margin-bottom: calc(-1 * var(--wp-hairline));          /* sit on top of the container hairline */
    border-bottom: 2px solid transparent;                  /* reserve space so active doesn't shift layout */
    color: var(--wp-text-2); font-size: var(--wp-fs-section); text-decoration: none; cursor: pointer;
}
[data-ui="wp"] .wp-tab:hover { color: var(--wp-text); }
[data-ui="wp"] .wp-tab--active,
[data-ui="wp"] .wp-tab.is-active {
    color: var(--wp-blue); font-weight: var(--wp-fw-medium); border-bottom-color: var(--wp-blue);
}
[data-ui="wp"] .wp-tab:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); border-radius: var(--wp-radius-control); }
/* Panel container — the page server-renders only the ACTIVE panel here; spacing comes from .wp-tabs margin. */
[data-ui="wp"] .wp-tabpanel { }

/* wp-drawer — a SIDE panel (right edge, full height) on the native <dialog>, opened/closed by the small
   _WpDrawer script (no Bootstrap, no data-bs-*). Same native foundation as .wp-modal (showModal() gives focus
   trap + ESC + ::backdrop + top layer), but pinned to the right and sliding in — the honest replacement for a
   Bootstrap offcanvas-end. Use it for CONTEXTUAL side tasks (a sub-form beside the current view); use .wp-modal
   for a CENTERED, focused interruption. Triggers carry data-wp-drawer-open="<id>"; the script can pre-fill
   inputs marked data-drawer-field="<key>" from the trigger's data-field-<key> attributes. */
[data-ui="wp"] .wp-drawer {
    position: fixed; inset: 0 0 0 auto;                     /* pin to the right edge, full viewport height */
    height: 100vh; max-height: 100vh; width: min(420px, 92vw); max-width: 92vw;
    padding: 0; margin: 0; border: 0; background: transparent;
}
[data-ui="wp"] .wp-drawer::backdrop { background: rgba(31,35,40,.38); }
[data-ui="wp"] .wp-drawer[open] { animation: wp-drawer-slide-in .18s ease-out; }
@keyframes wp-drawer-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
[data-ui="wp"] .wp-drawer__card {
    height: 100%; background: var(--wp-card); border-left: var(--wp-hairline) solid var(--wp-line);
    display: flex; flex-direction: column;
}
[data-ui="wp"] .wp-drawer__header {
    display: flex; align-items: center; gap: var(--wp-s3);
    padding: var(--wp-s3) var(--wp-s4); border-bottom: var(--wp-hairline) solid var(--wp-line);
}
[data-ui="wp"] .wp-drawer__title { font-size: var(--wp-fs-section); font-weight: var(--wp-fw-medium); margin: 0; }
[data-ui="wp"] .wp-drawer__close {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer;
    color: var(--wp-icon); border-radius: var(--wp-radius-control);
}
[data-ui="wp"] .wp-drawer__close:hover { background: var(--wp-tile); color: var(--wp-text-2); }
[data-ui="wp"] .wp-drawer__close:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
[data-ui="wp"] .wp-drawer__body { padding: var(--wp-s4); overflow-y: auto; flex: 1 1 auto; }
[data-ui="wp"] .wp-drawer__footer {
    display: flex; justify-content: flex-end; gap: var(--wp-s2);
    padding: var(--wp-s3) var(--wp-s4); border-top: var(--wp-hairline) solid var(--wp-line);
}

/* wp-toast — short, NON-blocking feedback, bottom-right. success/info auto-dismiss (~4.5s, hover pauses);
   error stays until closed. Chrome-neutral (status tokens → works in blue AND bordeaux). The container is an
   aria-live="polite" region; error toasts carry role="alert". Behaviour lives in _WpToast (window.wpToast).
   NOT for money-critical confirmations (use _WpConfirm) and NOT for form validation (use inline .wp-note). */
[data-ui="wp"] .wp-toast-container {
    position: fixed; right: var(--wp-s4); bottom: var(--wp-s4); z-index: 1090;
    display: flex; flex-direction: column; gap: var(--wp-s2);
    width: min(360px, calc(100vw - 2 * var(--wp-s4))); pointer-events: none;
}
[data-ui="wp"] .wp-toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: var(--wp-s2);
    padding: var(--wp-s3); border-radius: var(--wp-radius-card);
    border: var(--wp-hairline) solid var(--wp-line); background: var(--wp-card); color: var(--wp-text);
    box-shadow: 0 6px 24px rgba(31,35,40,.16); font-size: var(--wp-fs-body);
    animation: wp-toast-in .18s ease-out;
}
@keyframes wp-toast-in { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
[data-ui="wp"] .wp-toast.wp-toast--leaving { animation: wp-toast-out .16s ease-in forwards; }
@keyframes wp-toast-out { to { transform: translateX(16px); opacity: 0; } }
[data-ui="wp"] .wp-toast__icon { flex: 0 0 auto; margin-top: 1px; }
[data-ui="wp"] .wp-toast__msg { flex: 1 1 auto; }
[data-ui="wp"] .wp-toast__close {
    flex: 0 0 auto; margin: -2px -2px 0 0; width: 24px; height: 24px; padding: 0; border: 0;
    background: transparent; cursor: pointer; color: var(--wp-icon); border-radius: var(--wp-radius-control);
    display: inline-flex; align-items: center; justify-content: center;
}
[data-ui="wp"] .wp-toast__close:hover { background: var(--wp-tile); color: var(--wp-text-2); }
[data-ui="wp"] .wp-toast__close:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
/* variants — left accent + icon colour from the status palette (chrome-neutral) */
[data-ui="wp"] .wp-toast--success { border-left: 3px solid var(--wp-success-line); }
[data-ui="wp"] .wp-toast--success .wp-toast__icon { color: var(--wp-success-line); }
[data-ui="wp"] .wp-toast--error   { border-left: 3px solid var(--wp-error-line); }
[data-ui="wp"] .wp-toast--error .wp-toast__icon { color: var(--wp-error-line); }
[data-ui="wp"] .wp-toast--info    { border-left: 3px solid var(--wp-blue); }
[data-ui="wp"] .wp-toast--info .wp-toast__icon { color: var(--wp-blue); }
@media (max-width: 560px) {
    [data-ui="wp"] .wp-toast-container { left: var(--wp-s4); right: var(--wp-s4); width: auto; }
}