/* ════════════════════════════════════════════════════════════════════
   webpack web app: shell, shared components and page primitives.
   Every color, font, radius and spacing value comes from the --wp-* tokens
   generated by Platform/Ui/Theme/WebpackTheme.cs. Never write a color literal here.
   Sections: fonts · base · shell · shared components · forms and tables ·
   automation page (Home) · login · utilities.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, SIL Open Font License; see wwwroot/fonts) ── */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Shabnam"; src: url("../fonts/Shabnam-WOL.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Shabnam"; src: url("../fonts/Shabnam-Medium-WOL.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Shabnam"; src: url("../fonts/Shabnam-Bold-WOL.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--wp-bg);
    color: var(--wp-fg);
    font-family: var(--wp-font);
    font-size: var(--wp-font-size);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Type scale (design language §5): H1 21/700, H2 16/500, body 15/400, label 13/500, caption 12/400, micro 11/500, code 13. */
h1, h2, h3, h4 { margin: 0; color: var(--wp-fg); font-weight: 500; letter-spacing: -0.01em; }
h1, .wp-h1 { font-size: var(--wp-fs-h1); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
h2, .wp-h2 { font-size: var(--wp-fs-h2); }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
.wp-label { font-size: var(--wp-fs-label); font-weight: 500; }
.wp-caption { font-size: var(--wp-fs-caption); font-weight: 400; }
.wp-micro { font-size: var(--wp-fs-micro); font-weight: 500; }
.wp-code { font-family: var(--wp-font-mono); font-size: var(--wp-fs-code); direction: ltr; unicode-bidi: isolate; }
p { margin: 0; }
a { color: var(--wp-fg); text-underline-offset: 3px; }
code, pre { font-family: var(--wp-font-mono); font-size: var(--wp-fs-code); }
code { padding: 1px 6px; border-radius: var(--wp-r-sm); background: var(--wp-surface-2); color: var(--wp-fg); }
button { font: inherit; color: inherit; }
/* Focus (D11.3): a 2 px Primary outline with the 3 px Focus halo, on every interactive control, never removed. */
:focus-visible { outline: 2px solid var(--wp-primary); outline-offset: 1px; box-shadow: 0 0 0 3px var(--wp-focus); }
h1:focus, h1:focus-visible { outline: none; } /* FocusOnNavigate moves focus to the page title for screen readers */
/* R37: a pointer click (or a script that focuses an element) must not draw the ring; keyboard focus keeps it. Headings and other tabindex=-1 targets are never keyboard stops. */
.wp-accordion-header:focus:not(:focus-visible) { outline: none; box-shadow: none; }
h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ── Shell ── */
.wp-skip-link {
    position: fixed;
    top: var(--wp-s2);
    inset-inline-start: var(--wp-s2);
    z-index: 10000;
    padding: var(--wp-s2) var(--wp-s4);
    border-radius: var(--wp-r-ctl);
    background: var(--wp-primary);
    color: var(--wp-primary-fg);
    transform: translateY(-150%);
}
.wp-skip-link:focus { transform: translateY(0); }

/* ── Shell (D13): sidebar + workspace; the rail and the drawer below under "Responsive" ── */
.wp-shell { --wp-sidebar-w: 248px; min-height: 100vh; display: grid; grid-template-columns: var(--wp-sidebar-w) minmax(0, 1fr); background: var(--wp-bg); color: var(--wp-fg); }
.wp-shell-rail { --wp-sidebar-w: 64px; }
.wp-shell-public, .wp-fallback-shell { display: block; }
.wp-workspace { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }

.wp-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 56px;
    padding: var(--wp-s2) var(--wp-s5);
    display: flex;
    align-items: center;
    gap: var(--wp-s3);
    background: var(--wp-surface);
    border-bottom: 1px solid var(--wp-line);
}
/* R56: the toggles and the account chip get room between them (16 px; 12 px on a phone). */
.wp-topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--wp-s4); flex-wrap: nowrap; }
/* Scoped (2 classes) so the plain .wp-brand and .wp-tool display rules below cannot win the cascade (R33); the drawer media rule uses the same selectors. */
.wp-topbar .wp-hamburger, .wp-topbar .wp-topbar-brand, .wp-sidebar .wp-drawer-close { display: none; }
.wp-page-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wp-muted); font-size: var(--wp-fs-label); font-weight: 500; }

.wp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--wp-fg); text-decoration: none; min-width: 0; }
.wp-brand-mark { width: 30px; height: 30px; flex: none; }
.wp-brand-tile { fill: var(--wp-primary); }
.wp-brand-w { fill: none; stroke: var(--wp-primary-fg); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.wp-brand-dot { fill: var(--wp-accent); }
.wp-brand-copy { display: grid; line-height: 1.2; }
.wp-brand-copy strong { font-size: var(--wp-fs-h2); font-weight: 700; letter-spacing: -0.01em; }
.wp-brand-copy small { color: var(--wp-muted); font-size: 12px; }

.wp-public-nav { display: flex; align-items: center; gap: 2px; }
.wp-public-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-s2);
    padding: 6px 12px;
    border-radius: var(--wp-r-ctl);
    color: var(--wp-muted);
    font-size: var(--wp-fs-label);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.wp-public-nav a:hover { color: var(--wp-fg); background: var(--wp-surface-2); }
.wp-public-nav a.active { color: var(--wp-primary-text); background: var(--wp-primary-soft); }
.wp-content, .wp-fallback-content {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: var(--wp-s6) var(--wp-s5) 56px;
    flex: 1;
}
.wp-content-admin { display: grid; gap: var(--wp-s5); align-content: start; }

.wp-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: var(--wp-s4) var(--wp-s3);
    display: flex;
    flex-direction: column;
    gap: var(--wp-s4);
    background: var(--wp-surface);
    border-inline-end: 1px solid var(--wp-line);
    overflow: hidden auto;
    z-index: 10;
}
.wp-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-s2); min-height: 40px; padding-inline-start: var(--wp-s1); }
.wp-rail-toggle { justify-content: flex-start; width: 100%; color: var(--wp-muted); }
.wp-rail-toggle:hover { color: var(--wp-fg); }
.wp-rail-toggle-icon { transition: transform var(--wp-motion); }
.wp-shell-rail .wp-rail-toggle-icon { transform: rotate(180deg); }
[dir="rtl"] .wp-shell-rail .wp-rail-toggle-icon { transform: scaleX(-1) rotate(180deg); }
.wp-environment {
    display: flex;
    align-items: center;
    gap: var(--wp-s2);
    padding: var(--wp-s2) var(--wp-s3);
    border-inline-start: 2px solid var(--wp-accent);
    color: var(--wp-muted);
    font-size: 13px;
}
.wp-side-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; overflow-y: auto; }
.wp-side-nav a {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 7px var(--wp-s3);
    border-inline-start: 2px solid transparent;
    border-radius: var(--wp-r-ctl);
    color: var(--wp-muted);
    font-size: var(--wp-fs-label);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--wp-motion-fast), color var(--wp-motion-fast);
}
.wp-side-nav a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-side-nav a:hover { color: var(--wp-fg); background: var(--wp-surface-2); }
.wp-side-nav a.active { color: var(--wp-primary-text); background: var(--wp-primary-soft); border-inline-start-color: var(--wp-accent); }
.wp-sidebar-backdrop { display: none; }
.wp-nav-label { margin: var(--wp-s4) var(--wp-s3) var(--wp-s1); color: var(--wp-muted); font-size: var(--wp-fs-micro); font-weight: 500; letter-spacing: 0.02em; }
.wp-sidebar-footer { margin-top: auto; display: grid; gap: var(--wp-s2); padding-top: var(--wp-s3); border-top: 1px solid var(--wp-line); }

.wp-account { display: flex; align-items: center; gap: var(--wp-s3); min-width: 0; }
.wp-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wp-primary-soft);
    color: var(--wp-fg);
    font-size: 13px;
    font-weight: 500;
}
.wp-avatar { overflow: hidden; }
.wp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wp-account-copy { display: block; min-width: 0; line-height: 1.25; }
.wp-account-copy strong { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.wp-signout-form, .wp-menu-panel form.skin { margin: 0; }
/* Disclosure menus (the account chip): a details element; site.js closes it on an outside click or Esc. */
.wp-menu { position: relative; }
.wp-menu > summary { list-style: none; cursor: pointer; border-radius: var(--wp-r-ctl); }
.wp-menu > summary::-webkit-details-marker { display: none; }
.wp-menu > summary:hover { background: var(--wp-surface-2); }
.wp-account-menu > summary { padding-block: 2px; padding-inline: 2px 8px; }
.wp-menu-caret { color: var(--wp-muted); transition: transform var(--wp-motion); }
.wp-menu[open] .wp-menu-caret { transform: rotate(180deg); }
.wp-menu-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 220px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
    box-shadow: var(--wp-shadow);
}
.wp-menu-item {
    display: flex;
    align-items: center;
    gap: var(--wp-s2);
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--wp-r-ctl);
    background: transparent;
    color: var(--wp-fg);
    font: inherit;
    font-size: var(--wp-fs-label);
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.wp-menu-item:hover { background: var(--wp-surface-2); }
.wp-menu-item > .wp-icon { color: var(--wp-muted); }

.wp-tool {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-s2);
    min-height: 34px;
    padding: 6px var(--wp-s3);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-ctl);
    background: var(--wp-surface);
    color: var(--wp-fg);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.wp-tool:hover:not(:disabled) { border-color: var(--wp-line-strong); }
.wp-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.wp-tool-icon { padding: 6px; min-width: 34px; justify-content: center; }

.wp-access-denied {
    width: min(560px, calc(100% - 32px));
    min-height: 70vh;
    margin: 0 auto;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--wp-s3);
    text-align: center;
}
.wp-access-denied p { color: var(--wp-muted); }
.wp-auth-loading { margin: 15vh auto; max-width: 420px; }

#blazor-error-ui {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    padding: var(--wp-s3) var(--wp-s5);
    background: var(--wp-danger-soft);
    border-top: 1px solid var(--wp-danger);
    color: var(--wp-danger);
    font-size: 14px;
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss {
    margin-inline-start: var(--wp-s3);
    border: 0;
    background: none;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Shared components ── */
.wp-icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--wp-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}
.wp-icon-sm { width: 16px; height: 16px; }

.wp-tile {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--wp-r-ctl);
    background: var(--wp-surface-2);
    color: var(--wp-fg);
}

/* Script category tiles (D14.2; design-tokens.json categories.precise, checked by WebUiThemeTests): the category colour
   lives on the 44 px tile only, the text around it stays Fg and Muted. Ok and Danger are states, never categories.
   An unknown category keeps the plain 40 px tile. */
.wp-tile-cat { width: 44px; height: 44px; }
.wp-tile-cat-vpn { background: var(--wp-primary-soft); color: var(--wp-primary-text); }
.wp-tile-cat-web { background: var(--wp-teal-soft); color: var(--wp-teal); }
.wp-tile-cat-security { background: var(--wp-warn-soft); color: var(--wp-warn); }
.wp-tile-cat-runtime { background: var(--wp-runtime-soft); color: var(--wp-runtime); }
.wp-tile-cat-tools { background: var(--wp-runtime-soft); color: var(--wp-runtime); }
.wp-tile-cat-container { background: var(--wp-accent-soft); color: var(--wp-accent); }
.wp-tile-cat-database { background: var(--wp-accent-soft); color: var(--wp-accent); }
/* The category word beside the tile, in the category text colour (AppCard, D14.2); the same mapping as the tiles. */
.wp-cat-text { font-size: var(--wp-fs-caption); font-weight: 500; color: var(--wp-muted); }
.wp-cat-text-vpn { color: var(--wp-primary-text); }
.wp-cat-text-web { color: var(--wp-teal); }
.wp-cat-text-security { color: var(--wp-warn); }
.wp-cat-text-runtime { color: var(--wp-runtime); }
.wp-cat-text-tools { color: var(--wp-runtime); }
.wp-cat-text-container { color: var(--wp-accent); }
.wp-cat-text-database { color: var(--wp-accent); }

.wp-eyebrow { display: block; color: var(--wp-muted); font-size: var(--wp-fs-micro); font-weight: 500; letter-spacing: 0.02em; }

.wp-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wp-s5);
    flex-wrap: wrap;
    margin-bottom: var(--wp-s5);
}
.wp-content-admin > .wp-page-header { margin-bottom: 0; }
.wp-page-header-copy { display: grid; gap: 6px; max-width: 720px; }
.wp-page-header-copy p { color: var(--wp-muted); }
.wp-page-header-actions { display: flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; }

.wp-card {
    padding: var(--wp-s5);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
    min-width: 0;
}
.wp-card + .wp-card { margin-top: var(--wp-s4); }
.wp-content-admin > .wp-card + .wp-card { margin-top: 0; }.wp-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wp-s4);
    flex-wrap: wrap;
    margin-bottom: var(--wp-s4);
}.wp-card-heading > div:first-child { display: grid; gap: 2px; min-width: 0; }.wp-card-heading p { color: var(--wp-muted); font-size: 14px; }
.wp-card-actions { display: flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; }
.wp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp-s2);
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--wp-line-strong);
    border-radius: var(--wp-r-ctl);
    background: var(--wp-surface);
    color: var(--wp-fg);
    font-size: var(--wp-fs-label);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--wp-motion-fast), background-color var(--wp-motion-fast), opacity var(--wp-motion-fast);
}
.wp-btn:hover:not(:disabled) { border-color: var(--wp-fg); }
.wp-btn:active:not(:disabled) { transform: translateY(1px); }
.wp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wp-btn-primary { border-color: var(--wp-primary); background: var(--wp-primary); color: var(--wp-primary-fg); }
.wp-btn-primary:hover:not(:disabled) { border-color: var(--wp-primary); opacity: 0.9; }
.wp-btn-danger { border-color: var(--wp-danger); background: var(--wp-surface); color: var(--wp-danger); }
.wp-btn-danger:hover:not(:disabled) { border-color: var(--wp-danger); background: var(--wp-danger-soft); }
.wp-btn-quiet { border-color: transparent; background: transparent; color: var(--wp-muted); }
.wp-btn-quiet:hover:not(:disabled) { border-color: var(--wp-line); color: var(--wp-fg); }
.wp-btn-tonal { border-color: var(--wp-primary-soft); background: var(--wp-primary-soft); color: var(--wp-primary-text); }
.wp-btn-tonal:hover:not(:disabled) { border-color: var(--wp-primary); }
.wp-btn-quiet-danger { border-color: transparent; background: transparent; color: var(--wp-danger); }
.wp-btn-quiet-danger:hover:not(:disabled) { border-color: var(--wp-danger-soft); background: var(--wp-danger-soft); }
.wp-btn-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; }
.wp-btn-block { width: 100%; }
.wp-spinner {
    width: 14px;
    height: 14px;
    flex: none;
    display: inline-block;
    border: 1.6px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wp-spin 0.9s linear infinite;
}@keyframes wp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wp-spinner { animation: none; border-top-color: currentColor; opacity: 0.6; } }

/* Reconnect window (issue 901, Platform/Ui/Shell/ReconnectModal.razor): Blazor adds the state class to the dialog; each line shows
   for its state only. A modal dialog, so the page behind takes no clicks while the connection is down. */
.wp-reconnect {
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    width: min(400px, calc(100vw - 2 * var(--wp-s4)));
    padding: 0;
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
    color: var(--wp-fg);
    box-shadow: var(--wp-shadow);
}
.wp-reconnect::backdrop { background: var(--wp-overlay); }
.wp-reconnect:focus { outline: none; }
.wp-reconnect-card { display: grid; justify-items: center; gap: var(--wp-s3); padding: var(--wp-s6) var(--wp-s5); text-align: center; }
.wp-reconnect-title { font-size: var(--wp-fs-h2); font-weight: 700; }
.wp-reconnect-text { margin: 0; color: var(--wp-muted); font-size: var(--wp-fs-label); }
.wp-reconnect-spinner { width: 28px; height: 28px; border: 3px solid var(--wp-primary); border-top-color: transparent; border-radius: 50%; animation: wp-spin 0.9s linear infinite; }
.wp-reconnect-when-trying, .wp-reconnect-when-failed, .wp-reconnect-when-paused { display: none; }
.wp-reconnect.components-reconnect-show .wp-reconnect-when-trying,
.wp-reconnect.components-reconnect-retrying .wp-reconnect-when-trying,
.wp-reconnect.components-reconnect-failed .wp-reconnect-when-failed,
.wp-reconnect.components-reconnect-paused .wp-reconnect-when-paused,
.wp-reconnect.components-reconnect-resume-failed .wp-reconnect-when-paused { display: revert; }
.wp-reconnect.components-reconnect-failed .wp-reconnect-spinner,
.wp-reconnect.components-reconnect-paused .wp-reconnect-spinner,
.wp-reconnect.components-reconnect-resume-failed .wp-reconnect-spinner { display: none; }
@media (prefers-reduced-motion: reduce) { .wp-reconnect-spinner { animation: none; border-top-color: var(--wp-primary); opacity: 0.6; } }

.wp-steps { display: flex; gap: var(--wp-s2); list-style: none; padding: 0; margin: 0 0 var(--wp-s6); overflow-x: auto; }
.wp-steps li { flex: 1; min-width: 96px; display: flex; flex-direction: column; gap: var(--wp-s2); color: var(--wp-muted); font-size: 13px; }
.wp-step-bar { height: 2px; background: var(--wp-line); }
.wp-step-done .wp-step-bar, .wp-step-current .wp-step-bar { background: var(--wp-primary); }
.wp-step-current { color: var(--wp-primary-text); font-weight: 500; }
@media (max-width: 640px) {
    /* On a phone only the current step keeps its name; the others show their number. */
    .wp-steps li { min-width: 0; }
    .wp-steps li:not(.wp-step-current) > span:last-child { font-size: 0; }
    .wp-steps li:not(.wp-step-current) .wp-step-number { font-size: 13px; }
    .wp-steps li.wp-step-current { flex: 3; }
}
.wp-step-number { margin-inline-end: 6px; color: var(--wp-muted); font-variant-numeric: tabular-nums; }

.wp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--wp-r-sm);
    background: var(--wp-surface-2);
    color: var(--wp-muted);
    font-size: var(--wp-fs-caption);
    font-weight: 500;
    white-space: nowrap;
}
/* The AI-generated badge carries a whole sentence ("tested on Ubuntu 22.04, no runs yet"): inside a script's facts it wraps instead of widening the card. */
.script-facts .wp-badge { white-space: normal; min-width: 0; max-width: 100%; }
.wp-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* A live state pulses its dot only (motion token pulse); never text, at most one per card. */
.wp-badge-live .wp-badge-dot { animation: wp-pulse var(--wp-pulse) ease-in-out infinite; }
@keyframes wp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .wp-badge-live .wp-badge-dot { animation: none; } }
.wp-badge-ok { background: var(--wp-ok-soft); color: var(--wp-ok); }
.wp-badge-warn { background: var(--wp-warn-soft); color: var(--wp-warn); }
.wp-badge-danger { background: var(--wp-danger-soft); color: var(--wp-danger); }
.wp-badge-info { background: var(--wp-info-soft); color: var(--wp-info); }
.wp-badge-accent { background: var(--wp-accent-soft); color: var(--wp-accent); }

.wp-empty {
    display: flex;
    align-items: center;
    gap: var(--wp-s4);
    flex-wrap: wrap;
    padding: var(--wp-s5);
    border: 1px dashed var(--wp-line-strong);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
}
.wp-empty > div:not(.wp-empty-actions) { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.wp-empty p, .wp-empty > span { color: var(--wp-muted); font-size: 14px; }
.wp-empty-actions { display: flex; gap: var(--wp-s2); flex-wrap: wrap; }
.wp-empty-danger { border-style: solid; border-color: var(--wp-danger); background: var(--wp-danger-soft); }
.wp-empty-danger .wp-tile { background: var(--wp-surface); color: var(--wp-danger); }
.wp-card > .wp-empty { border-style: dashed; }

.wp-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--wp-s3);
    flex-wrap: wrap;
    margin-top: var(--wp-s3);
    padding: var(--wp-s4);
    border: 1px solid var(--wp-line-strong);
    border-inline-start: 3px solid var(--wp-primary);
    border-radius: var(--wp-r-ctl);
    background: var(--wp-surface-2);
}
.wp-confirm .wp-tile { width: 32px; height: 32px; background: var(--wp-surface); }
.wp-confirm-copy { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.wp-confirm-copy > div { color: var(--wp-muted); font-size: 14px; }
.wp-confirm-actions { display: flex; gap: var(--wp-s2); align-self: center; }
.wp-confirm-danger { border-inline-start-color: var(--wp-danger); }
.wp-confirm-danger .wp-tile { color: var(--wp-danger); }

.wp-copy { display: grid; gap: 6px; }
.wp-copy-label { color: var(--wp-muted); font-size: var(--wp-fs-label); font-weight: 500; }
.wp-copy-row {
    display: flex;
    align-items: center;
    gap: var(--wp-s2);
    padding: 6px 6px 6px var(--wp-s3);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-ctl);
    background: var(--wp-surface-2);
}
.wp-copy-row code { flex: 1; min-width: 0; overflow-x: auto; padding: 0; background: none; white-space: nowrap; }

.wp-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: var(--wp-s3);
    padding: var(--wp-s3) var(--wp-s4);
    border: 1px solid var(--wp-line);
    border-inline-start: 3px solid var(--wp-line-strong);
    border-radius: var(--wp-r-ctl);
    background: var(--wp-surface-2);
    color: var(--wp-fg);
    font-size: 14px;
}
.wp-notice > .wp-icon { margin-top: 2px; }.wp-notice-ok { border-inline-start-color: var(--wp-ok); background: var(--wp-ok-soft); }
.wp-notice-warn { border-inline-start-color: var(--wp-warn); background: var(--wp-warn-soft); }
.wp-notice-danger { border-inline-start-color: var(--wp-danger); background: var(--wp-danger-soft); color: var(--wp-danger); }
.wp-notice-info { border-inline-start-color: var(--wp-info); background: var(--wp-info-soft); }
.wp-notice-ok > .wp-icon { color: var(--wp-ok); }
.wp-notice-warn > .wp-icon { color: var(--wp-warn); }
.wp-notice-info > .wp-icon { color: var(--wp-info); }

.wp-toast {
    position: fixed;
    inset-inline-end: var(--wp-s5);
    bottom: var(--wp-s5);
    z-index: 50;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    align-items: flex-start;
    gap: var(--wp-s3);
    padding: var(--wp-s4);
    border: 1px solid var(--wp-line);
    border-inline-start: 3px solid var(--wp-line-strong);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
    box-shadow: var(--wp-shadow);
}
/* The Toast component sets the tone class; the start border and the icon carry it, the surface stays raised Surface (catalog §16). */
.wp-toast-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wp-toast-copy > span { color: var(--wp-muted); font-size: 14px; }
.wp-toast-actions { display: flex; gap: var(--wp-s2); flex-wrap: wrap; margin-top: 6px; }
.wp-toast > .wp-icon { margin-top: 3px; color: var(--wp-muted); }
.wp-toast-ok { border-inline-start-color: var(--wp-ok); }
.wp-toast-ok > .wp-icon { color: var(--wp-ok); }
.wp-toast-warn { border-inline-start-color: var(--wp-warn); }
.wp-toast-warn > .wp-icon { color: var(--wp-warn); }
.wp-toast-danger { border-inline-start-color: var(--wp-danger); }
.wp-toast-danger > .wp-icon { color: var(--wp-danger); }
.wp-toast-info { border-inline-start-color: var(--wp-info); }
.wp-toast-info > .wp-icon { color: var(--wp-info); }

.wp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wp-list > li { display: flex; align-items: center; gap: var(--wp-s3); flex-wrap: wrap; padding: var(--wp-s3) 0; border-bottom: 1px solid var(--wp-line); font-size: 14px; }
.wp-list > li:last-child { border-bottom: 0; }

.wp-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--wp-s3); }
.wp-module {
    display: flex;
    flex-direction: column;
    gap: var(--wp-s2);
    padding: var(--wp-s4);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
    color: var(--wp-fg);
    text-decoration: none;
    transition: border-color var(--wp-motion-fast);
}
.wp-module:hover { border-color: var(--wp-line-strong); }
.wp-module .wp-tile { margin-bottom: var(--wp-s1); }
.wp-module p { color: var(--wp-muted); font-size: 14px; }
.wp-module-link { margin-top: auto; padding-top: var(--wp-s2); display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp-fs-label); font-weight: 500; color: var(--wp-primary-text); }

/* ── Forms and tables ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px var(--wp-s3);
    border: 1px solid var(--wp-line-strong);
    border-radius: var(--wp-r-ctl);
    background: var(--wp-surface);
    color: var(--wp-fg);
    font: inherit;
    font-size: var(--wp-font-size);
    /* After `font`, which resets it: a fixed line box and height keep every one-line control 38 px in either script
       (Persian's taller line made inputs 44 px beside 38 px buttons, R55). */
    line-height: 20px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { height: 38px; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--wp-primary); outline: none; box-shadow: 0 0 0 3px var(--wp-focus); }
/* Invalid (D11.3): 2 px DangerFill border and a Danger message with an icon under the control. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .wp-invalid { border: 2px solid var(--wp-danger-fill) !important; }
.wp-field-error { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--wp-danger); font-size: var(--wp-fs-caption); }
.wp-field-error > .wp-icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
/* The reason under a disabled primary (D11.3, R9). */
.wp-reason { display: inline-flex; align-items: center; gap: 6px; color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-reason > .wp-icon { width: 16px; height: 16px; }
/* Switch rows (catalog §5): an immediate on/off setting with its label and hint; the whole row is the click target (B6). */
.wp-switch-list { display: flex; flex-direction: column; }
.wp-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-s3); padding: var(--wp-s3) 0; border-bottom: 1px solid var(--wp-line); cursor: pointer; }
.wp-switch-row:last-child { border-bottom: 0; }
.wp-switch-row:has(input:disabled) { cursor: not-allowed; }
.wp-switch-copy { display: grid; gap: 2px; min-width: 0; font-size: var(--wp-fs-label); }
.wp-switch-copy > strong { display: inline-flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; font-weight: 500; }
.wp-switch-copy > small { color: var(--wp-muted); font-size: var(--wp-fs-caption); }
input[type="checkbox"].wp-switch { appearance: none; -webkit-appearance: none; flex: none; width: 36px; height: 20px; margin: 0; position: relative; border: 1px solid var(--wp-line-strong); border-radius: 999px; background: var(--wp-surface-2); cursor: inherit; transition: background-color var(--wp-motion-fast), border-color var(--wp-motion-fast); }
input[type="checkbox"].wp-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--wp-surface); border: 1px solid var(--wp-line-strong); box-sizing: border-box; transition: inset-inline-start var(--wp-motion-fast); }
input[type="checkbox"].wp-switch:checked { background: var(--wp-primary); border-color: var(--wp-primary); }
input[type="checkbox"].wp-switch:checked::after { inset-inline-start: calc(100% - 16px); border-color: var(--wp-primary); }
input[type="checkbox"].wp-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--wp-focus); }
input[type="checkbox"].wp-switch:disabled { opacity: 0.55; }
/* Selection (D11.3): 2 px Primary border + PrimarySoft fill (+ a check mark drawn by the component); rows reserve the border so nothing jumps. */
.wp-selectable { border: 2px solid transparent; transition: border-color var(--wp-motion-fast), background-color var(--wp-motion-fast); }
.wp-selectable:hover { background: var(--wp-surface-2); }
.wp-selected, .wp-selectable[aria-checked="true"], .wp-selectable[aria-pressed="true"] { border-color: var(--wp-primary); background: var(--wp-primary-soft); }
.wp-row { border-inline-start: 2px solid transparent; }
.wp-row:hover { background: var(--wp-surface-2); }
.wp-row-selected, .wp-row[aria-selected="true"] { border-inline-start-color: var(--wp-primary); background: var(--wp-primary-soft); }
/* Skeleton: the shape of the content while it loads for over a second (catalog §8). */
.wp-skeleton { display: block; min-height: 1em; border-radius: var(--wp-r-ctl); background: var(--wp-surface-2); animation: wp-pulse var(--wp-pulse) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wp-skeleton { animation: none; } }
input:disabled, select:disabled, textarea:disabled { background: var(--wp-surface-2); color: var(--wp-muted); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--wp-primary); }
input[type="file"] { font-size: 13px; color: var(--wp-muted); }
::placeholder { color: var(--wp-muted); opacity: 0.8; }

.wp-field { display: grid; gap: 6px; min-width: 0; }
.wp-field > span { font-size: var(--wp-fs-label); font-weight: 500; line-height: 20px; }
/* R55: a button beside a labelled field lines up with the field's control, not with the label and control together:
   the row aligns to the top, and each other item drops by the label's line (20 px) plus the field's gap (6 px) and
   is at least as tall as the control (38 px), with its own content centred on it (chips, a checkbox label). A disabled
   button's reason still sits under it. On a phone the row wraps and
   the buttons go under the field, so they keep no offset there. */
:is(.wp-inline-row, .wp-inset-row, .wp-toolbar, .wp-filter-row):has(> .wp-field) { align-items: flex-start; }
:is(.wp-inline-row, .wp-inset-row, .wp-toolbar, .wp-filter-row):has(> .wp-field) > :not(.wp-field) { margin-top: 26px; min-height: 38px; align-items: center; }
:is(.wp-inline-row, .wp-inset-row, .wp-toolbar, .wp-filter-row):has(> .wp-field) > .wp-btn,
:is(.wp-inline-row, .wp-inset-row, .wp-toolbar, .wp-filter-row):has(> .wp-field) > .wp-btn-wrap > .wp-btn { min-height: 38px; }
@media (max-width: 640px) {
    :is(.wp-inline-row, .wp-inset-row, .wp-toolbar, .wp-filter-row):has(> .wp-field) > :not(.wp-field) { margin-top: 0; }
}
.wp-required { color: var(--wp-danger); margin-inline-start: 2px; }
.wp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--wp-s4); align-items: start; }
.wp-form-grid-dense { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.wp-field-wide { grid-column: span 2; }
.wp-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--wp-s2); flex-wrap: wrap; }
.wp-filter-row { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--wp-s2); flex-wrap: wrap; }
.wp-filter-row input, .wp-filter-row select { width: auto; min-width: 180px; flex: 1; }.wp-filter-row .wp-field { flex: 1; min-width: 240px; max-width: 420px; }.wp-inline-row { display: flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; margin-top: var(--wp-s3); }
.wp-code-block { margin: 0; padding: var(--wp-s3); border-radius: var(--wp-r-ctl); background: var(--wp-surface); border: 1px solid var(--wp-line); white-space: pre-wrap; word-break: break-all; }

/* AppDataGrid (D6): MudDataGrid with the toolbar above it; the look is settled in the mockup pass. */
.wp-grid { display: grid; gap: var(--wp-s3); min-width: 0; }
.wp-grid-toolbar { justify-content: space-between; }
.wp-grid .mud-table { border-color: var(--wp-line); border-radius: var(--wp-r-card); }
.wp-grid .wp-grid-row-link { cursor: pointer; }
.wp-grid-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--wp-s3); flex-wrap: wrap; padding: var(--wp-s2) var(--wp-s3); }
.wp-grid-page-size { display: inline-flex; align-items: center; gap: var(--wp-s2); font-size: 13px; }
.wp-grid-page-size select { width: auto; }

/* Plan facts (admin plan pages): label over value, wrapping grid. */
.wp-plan-images { border: 0; padding: 0; margin: var(--wp-s4) 0 0; }
.wp-plan-images legend { font-weight: 500; padding: 0; }
.wp-plan-loading { margin: var(--wp-s3) 0 0; }
.wp-plan-notice { margin-top: var(--wp-s3); }
.wp-plan-profile { display: grid; gap: var(--wp-s3); margin-top: var(--wp-s4); }
.wp-plan-profile-note { margin: 0; font-size: var(--wp-fs-caption); }
.wp-disclosure { border: 1px solid var(--wp-line); border-radius: var(--wp-r-card); background: var(--wp-surface); }
.expander-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wp-s2);
    padding: var(--wp-s3) var(--wp-s4);
    border: 0;
    background: transparent;
    color: var(--wp-fg);
    font-size: 14px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}
.expander-header:hover { color: var(--wp-muted); }.checkbox-label { display: inline-flex; align-items: center; gap: var(--wp-s2); font-size: 14px; cursor: pointer; }
/* ── Login (Razor Pages, Areas/Identity) ── */
.wp-login-page { min-height: 100vh; display: grid; place-items: center; padding: var(--wp-s6) var(--wp-s4); background: var(--wp-bg); }
.wp-login-stack { width: min(440px, 100%); display: grid; gap: var(--wp-s4); }
.wp-login-card { width: 100%; display: grid; gap: var(--wp-s5); padding: var(--wp-s6); border: 1px solid var(--wp-line); border-radius: var(--wp-r-card); background: var(--wp-surface); box-shadow: var(--wp-shadow); }
.wp-login-card > header { display: grid; gap: var(--wp-s3); }
.wp-login-top { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-s3); }
.wp-login-toggles { display: flex; align-items: center; gap: var(--wp-s2); }
.wp-login-card > header p { color: var(--wp-muted); font-size: 14px; }
.wp-login-form { display: grid; gap: var(--wp-s4); }
.wp-dev-accounts { display: grid; gap: var(--wp-s3); padding: var(--wp-s4); border: 1px solid var(--wp-line); border-radius: var(--wp-r-card); background: var(--wp-surface-2); }
.wp-dev-accounts > p { color: var(--wp-muted); font-size: 13px; }
.wp-dev-heading { display: flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; }
.wp-dev-heading h2 { font-size: 14px; }
.wp-dev-account-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp-s3); }
.wp-dev-account { min-width: 0; padding: var(--wp-s3); border: 1px solid var(--wp-line); border-radius: var(--wp-r-ctl); background: var(--wp-surface-2); font-size: 13px; }
.wp-dev-account > div { display: flex; justify-content: space-between; gap: var(--wp-s2); margin-bottom: var(--wp-s2); }
.wp-dev-account > div span { color: var(--wp-muted); font-size: 12px; }
.wp-dev-account dl, .wp-dev-account dd { margin: 0; }
.wp-dev-account dl { display: grid; gap: 6px; }
.wp-dev-account dt { color: var(--wp-muted); font-size: var(--wp-fs-caption); font-weight: 500; }
.wp-dev-account code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; background: none; }

/* ── Utilities ── */
.wp-muted { color: var(--wp-muted); }
.wp-num { font-variant-numeric: tabular-nums; }
.wp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Account pages: sign-up, reset, Google ── */
.wp-login-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp-s2) var(--wp-s4); margin: var(--wp-s4) 0 0; font-size: 14px; color: var(--wp-muted); }
.wp-login-links a { color: var(--wp-primary); }.wp-hidden-field { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Identity cards (B7): the password tool, the message under a field, the choice fieldset, the gated Primary's reason. */
.wp-password { position: relative; }
.wp-password input { padding-inline-end: 44px; }
.wp-password-toggle { position: absolute; inset-block-start: 50%; inset-inline-end: 4px; transform: translateY(-50%); }
.wp-field-error:empty { display: none; }
.wp-field:has(.field-validation-error) input:not([type="checkbox"]):not([type="radio"]) { border: 2px solid var(--wp-danger-fill); }
.wp-choice { display: grid; gap: var(--wp-s2); border: 0; padding: 0; margin: 0; min-width: 0; }
.wp-check-list { display: grid; gap: var(--wp-s2); }
.wp-choice legend { font-size: var(--wp-fs-label); font-weight: 500; margin-bottom: var(--wp-s1); }
.wp-login-submit { display: grid; gap: var(--wp-s2); justify-items: center; }
.wp-login-actions { display: grid; gap: var(--wp-s2); }
.wp-notice-lines { margin: 0; padding-inline-start: var(--wp-s4); }
.wp-notice-body { margin: 0; }
.wp-divider { display: flex; align-items: center; gap: var(--wp-s3); color: var(--wp-muted); font-size: 13px; margin: var(--wp-s2) 0 0; }
.wp-divider::before, .wp-divider::after { content: ""; flex: 1; border-top: 1px solid var(--wp-line); }

/* ── Site footer and legal pages ── */
.wp-site-footer {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: var(--wp-s4) var(--wp-s5) var(--wp-s6);
    border-top: 1px solid var(--wp-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp-s3);
    color: var(--wp-muted);
    font-size: 13px;
}
.wp-site-footer-links { display: flex; flex-wrap: wrap; gap: var(--wp-s4); }
.wp-site-footer-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--wp-muted); text-decoration: none; }
.wp-site-footer-links a:hover { color: var(--wp-fg); }
.wp-login-page .wp-site-footer { border-top: 0; justify-content: center; padding-bottom: 0; }

.wp-legal { max-width: 760px; margin: 0 auto; line-height: 1.85; }
.wp-legal h1 { font-size: var(--wp-fs-h1); margin: 0 0 var(--wp-s4); }
.wp-legal h2 { font-size: var(--wp-fs-h2); margin: var(--wp-s6) 0 var(--wp-s2); }
.wp-legal p, .wp-legal li { color: var(--wp-fg); }
.wp-legal ul { padding-inline-start: var(--wp-s5); }
.wp-legal blockquote {
    margin: 0 0 var(--wp-s5);
    padding: var(--wp-s3) var(--wp-s4);
    border-inline-start: 3px solid var(--wp-accent);
    background: var(--wp-surface);
    border-radius: var(--wp-r-card);
    color: var(--wp-muted);
}
.wp-legal hr { border: 0; border-top: 1px solid var(--wp-line); margin: var(--wp-s6) 0; }

/* ── Shared components of the redesign (WEB-REDESIGN-002; anatomy in docs/design/ComponentCatalog.md) ── */
/* Notice (§16): 3 px start border in the tone, icon, bold title, one or two sentences, at most two actions. */
.wp-notice-copy { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.wp-notice-title { display: block; }
.wp-notice-body { color: inherit; }
.wp-notice-actions { display: flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; margin-top: 6px; }
.wp-notice-dismiss { margin-inline-start: auto; align-self: flex-start; }
.wp-notice-danger > .wp-icon { color: var(--wp-danger); }
.wp-notice-neutral, .wp-notice-accent { border-inline-start-color: var(--wp-line-strong); }

/* Badge with an icon (§7); DangerFill = the "dangerous" script risk only. */
.wp-badge > .wp-icon { width: 14px; height: 14px; }
.wp-badge-dangerfill { background: var(--wp-danger-fill); color: var(--wp-danger-fill-fg); }
.wp-badge-teal { background: var(--wp-teal-soft); color: var(--wp-teal); }
.wp-badge-meaning { color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-badge-meaning::before { content: "\00b7"; margin-inline: 6px; }

/* ── Version 11 kit (catalog §21, D14): AppCard, DetailsDrawer, SummaryRail, HelpCard ── */
.wp-app-card {
    position: relative;
    display: grid;
    gap: var(--wp-s3);
    padding: var(--wp-s4);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
    box-shadow: inset 0 0 0 1px transparent;
    transition: border-color var(--wp-motion-fast), box-shadow var(--wp-motion-fast);
}
.wp-app-card:hover { border-color: var(--wp-line-strong); }
.wp-app-card.wp-selected { border-color: var(--wp-primary); box-shadow: inset 0 0 0 1px var(--wp-primary); background: var(--wp-surface); }
.wp-app-card:has(.wp-app-card-add input:focus-visible) { box-shadow: inset 0 0 0 1px var(--wp-primary), 0 0 0 3px var(--wp-focus); }
.wp-app-card-refused { border-style: dashed; }
.wp-app-card-refused .wp-app-card-identity, .wp-app-card-refused .wp-app-card-meta { opacity: 0.7; }
.wp-app-card-order {
    position: absolute;
    top: var(--wp-s3);
    inset-inline-end: var(--wp-s3);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wp-primary);
    color: var(--wp-primary-fg);
    font-size: var(--wp-fs-caption);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wp-app-card-identity { display: flex; align-items: flex-start; gap: var(--wp-s3); padding-inline-end: var(--wp-s8); }
.wp-app-card-copy { display: grid; gap: 2px; min-width: 0; }
.wp-app-card-name { font-size: var(--wp-fs-label); font-weight: 700; overflow-wrap: anywhere; }
.wp-app-card-benefit { margin: var(--wp-s1) 0 0; color: var(--wp-fg); font-size: var(--wp-fs-label); }
.wp-app-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-s2) var(--wp-s3); }
.wp-app-card-duration { display: inline-flex; align-items: center; gap: 4px; font-size: var(--wp-fs-caption); font-variant-numeric: tabular-nums; }
.wp-app-card-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-s2); flex-wrap: wrap; padding-top: var(--wp-s3); border-top: 1px solid var(--wp-line); }
.wp-app-card-add { display: inline-flex; align-items: center; gap: var(--wp-s2); min-height: 32px; font-size: var(--wp-fs-label); font-weight: 500; cursor: pointer; }
.wp-app-card-add input { width: 18px; height: 18px; margin: 0; accent-color: var(--wp-primary); cursor: pointer; }
.wp-app-card.wp-selected .wp-app-card-add { color: var(--wp-primary-text); }

.wp-details-backdrop { position: fixed; inset: 0; z-index: 49; background: var(--wp-overlay); }
.wp-details-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 50;
    width: min(480px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--wp-surface);
    border-inline-start: 1px solid var(--wp-line);
    box-shadow: var(--wp-shadow);
    outline: none;
}
.wp-details-drawer:focus-visible { box-shadow: var(--wp-shadow), inset 0 0 0 3px var(--wp-focus); }
.wp-details-head { display: flex; align-items: flex-start; gap: var(--wp-s3); padding: var(--wp-s4) var(--wp-s5); border-bottom: 1px solid var(--wp-line); }
.wp-details-heading { display: grid; gap: var(--wp-s2); min-width: 0; flex: 1; }
.wp-details-heading h2 { font-size: var(--wp-fs-h2); overflow-wrap: anywhere; }
.wp-details-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wp-details-close { flex: none; }
.wp-details-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--wp-s4) var(--wp-s5); display: grid; gap: var(--wp-s5); align-content: start; }
.wp-details-section { display: grid; gap: var(--wp-s2); }
.wp-details-section h3 { font-size: var(--wp-fs-label); font-weight: 700; color: var(--wp-muted); }
.wp-details-section p { margin: 0; font-size: var(--wp-fs-label); }
.wp-details-section ul { margin: 0; padding-inline-start: var(--wp-s5); font-size: var(--wp-fs-label); }
.wp-details-foot { display: flex; gap: var(--wp-s2); flex-wrap: wrap; padding: var(--wp-s4) var(--wp-s5); border-top: 1px solid var(--wp-line); background: var(--wp-surface); }
.wp-details-foot > .wp-btn:first-child { flex: 1; }
.wp-has-dialog { overflow: hidden; }

.wp-rail-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 360px); gap: var(--wp-s6); align-items: start; }
.wp-rail { position: sticky; top: var(--wp-s4); display: grid; gap: var(--wp-s4); }
.wp-rail-rows { margin: 0; display: grid; gap: var(--wp-s2); }
.wp-rail-rows > div { display: flex; justify-content: space-between; gap: var(--wp-s3); font-size: var(--wp-fs-label); }
.wp-rail-rows dt { color: var(--wp-muted); }
.wp-rail-rows dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.wp-rail-row-muted dd { color: var(--wp-muted); }
.wp-rail-row-strong { margin-top: var(--wp-s1); padding-top: var(--wp-s2); border-top: 1px solid var(--wp-line); }
.wp-rail-row-strong dd { font-weight: 700; font-size: var(--wp-fs-h2); }
.wp-rail .wp-notice { margin-top: var(--wp-s4); }
.wp-rail-actions { display: grid; gap: var(--wp-s2); margin-top: var(--wp-s4); }
.wp-rail-actions > .wp-btn, .wp-rail-actions > .wp-btn-wrap { width: 100%; }

.wp-help-card { display: grid; gap: var(--wp-s2); padding: var(--wp-s4); border: 1px dashed var(--wp-line-strong); border-radius: var(--wp-r-card); }
.wp-help-card-question { display: flex; align-items: center; gap: var(--wp-s2); font-size: var(--wp-fs-label); font-weight: 700; }
.wp-help-card-question > .wp-icon { color: var(--wp-primary-text); }
.wp-help-card p { margin: 0; color: var(--wp-muted); font-size: var(--wp-fs-label); }
.wp-help-card a { font-size: var(--wp-fs-label); font-weight: 500; }

/* Service terms (TermsSummary, catalog §21): the help card's quiet look with a plain list; the numbers come from ServiceTerms. */
.wp-terms { display: grid; gap: var(--wp-s2); padding: var(--wp-s4); border: 1px solid var(--wp-line); border-radius: var(--wp-r-card); background: var(--wp-surface-2); }
.wp-terms-title { display: flex; align-items: center; gap: var(--wp-s2); margin: 0; font-size: var(--wp-fs-label); font-weight: 700; }
.wp-terms-title > .wp-icon { color: var(--wp-primary-text); }
.wp-terms ul { margin: 0; padding-inline-start: var(--wp-s4); display: grid; gap: var(--wp-s1); color: var(--wp-muted); font-size: var(--wp-fs-label); }
.wp-rail .wp-terms, .wp-card .wp-terms { margin-top: var(--wp-s4); }

/* Plan row and option row (catalog §21): a radio row with a visible dot; the same three selected cues as §14. */
.wp-choice-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--wp-s3);
    padding: var(--wp-s3) var(--wp-s4);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color var(--wp-motion-fast), border-color var(--wp-motion-fast), box-shadow var(--wp-motion-fast);
}
.wp-choice-row:hover { background: var(--wp-surface-2); }
.wp-choice-row > input[type] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 0; }
.wp-choice-row > :not(input) { position: relative; z-index: 1; pointer-events: none; }
.wp-choice-row.wp-selected { border-color: var(--wp-primary); box-shadow: inset 0 0 0 1px var(--wp-primary); background: var(--wp-primary-soft); }
.wp-choice-row:has(> input:focus-visible) { outline: 2px solid var(--wp-primary); outline-offset: 1px; box-shadow: 0 0 0 3px var(--wp-focus); }
.wp-choice-row-disabled { opacity: 0.6; }
.wp-choice-row-disabled > input[type] { cursor: not-allowed; }
.wp-choice-radio { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--wp-line-strong); border-radius: 50%; background: var(--wp-surface); }
.wp-choice-row.wp-selected .wp-choice-radio { border-color: var(--wp-primary); box-shadow: inset 0 0 0 3px var(--wp-surface); background: var(--wp-primary); }
.wp-choice-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wp-choice-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-s2); }
.wp-choice-title { font-size: var(--wp-fs-label); font-weight: 700; overflow-wrap: anywhere; }
.wp-choice-description { color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-choice-description .wp-reason { display: flex; margin-top: 2px; }
.wp-plan-row { align-items: center; }
.wp-plan-row .wp-choice-radio { margin-top: 0; }
.wp-plan-row-specs { margin-top: var(--wp-s1); }
.wp-plan-row-price { display: grid; justify-items: end; gap: 2px; flex: none; text-align: end; }
.wp-plan-row-price strong { font-size: var(--wp-fs-h2); font-weight: 700; }
.wp-plan-row-price small { color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-choice-list { display: grid; gap: var(--wp-s2); }
@media (max-width: 599px) {
    .wp-plan-row { flex-wrap: wrap; }
    .wp-plan-row > .wp-tile { display: none; }
    .wp-plan-row-price { flex-basis: 100%; justify-items: start; text-align: start; padding-inline-start: calc(18px + var(--wp-s3)); }
}
/* Mobile action bar (§21, 016): hidden on wide screens; below 980 px fixed to the bottom with the step's Primary, and the
   rail beside the same content drops its own actions so the Primary exists once in the accessibility tree. */
.wp-mobile-bar { display: none; }
.wp-mobile-bar-info { display: flex; align-items: center; gap: var(--wp-s2); min-width: 0; flex-wrap: wrap; }
.wp-mobile-bar-leading { display: inline-flex; gap: 4px; }
.wp-mobile-bar-summary { font-size: var(--wp-fs-label); font-weight: 500; font-variant-numeric: tabular-nums; }
.wp-mobile-bar-see { font-size: var(--wp-fs-caption); font-weight: 500; }
.wp-mobile-bar-actions { display: flex; align-items: flex-start; gap: var(--wp-s2); }
.wp-mobile-bar-actions > .wp-btn-wrap, .wp-mobile-bar-actions > .wp-btn:not(.wp-mobile-bar-back) { flex: 1; min-width: 0; }
.wp-mobile-bar-actions .wp-btn:not(.wp-mobile-bar-back) { width: 100%; }
@media (max-width: 979px) {
    .wp-rail-layout { grid-template-columns: minmax(0, 1fr); }
    .wp-rail { position: static; }
    .wp-mobile-bar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 30;
        display: grid;
        gap: var(--wp-s2);
        padding: var(--wp-s3) var(--wp-s4) calc(var(--wp-s3) + env(safe-area-inset-bottom));
        border-top: 1px solid var(--wp-line);
        background: var(--wp-surface);
        box-shadow: var(--wp-shadow);
    }
    body:has(.wp-rail-layout .wp-mobile-bar) { padding-bottom: 136px; }
    .wp-rail-layout:has(.wp-mobile-bar) .wp-rail-actions { display: none; }
}

/* Chip (§17): a pill over a radio or checkbox; selected = Primary fill; solid hairline, never dashed. */
.wp-chip-group { display: flex; flex-wrap: wrap; gap: var(--wp-s2); }
/* On a phone a chip row scrolls sideways inside itself instead of wrapping into a block (ContentStyleGuide §7 rule 10).
   `contain: inline-size` keeps the long row out of its parents' width, so no toolbar or card header grows past the screen. */
@media (max-width: 599px) {
    .wp-chip-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; contain: inline-size; width: 100%; flex: 1 1 100%; min-width: 0; padding: 3px; }
    .wp-chip-group::-webkit-scrollbar { display: none; }
    .wp-chip-group > .wp-chip { flex: none; }
    .wp-card-actions:has(> .wp-chip-group) { min-width: 0; flex: 1 1 100%; }
}
.wp-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--wp-line);
    border-radius: 999px;
    background: var(--wp-surface);
    color: var(--wp-fg);
    font-size: var(--wp-fs-label);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--wp-motion-fast), border-color var(--wp-motion-fast), color var(--wp-motion-fast);
}
.wp-chip:hover { border-color: var(--wp-fg); }
.wp-chip > input[type] { position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* min-width: a chip inside .wp-filter-row must not take the row's 180 px input width */
.wp-chip:has(> input[type]:focus-visible) { outline: 2px solid var(--wp-primary); outline-offset: 1px; box-shadow: 0 0 0 3px var(--wp-focus); }
.wp-chip-selected, .wp-chip:has(> input[type]:checked) { border-color: var(--wp-primary); background: var(--wp-primary); color: var(--wp-primary-fg); }
.wp-chip-text { white-space: nowrap; }
.wp-chip-count { padding: 0 6px; border-radius: 999px; background: var(--wp-surface-2); color: var(--wp-muted); font-size: var(--wp-fs-micro); line-height: 1.6; }
.wp-chip-selected .wp-chip-count, .wp-chip:has(> input[type]:checked) .wp-chip-count { background: var(--wp-primary-fg); color: var(--wp-primary); }
.wp-chip-disabled { opacity: 0.45; cursor: not-allowed; }
.wp-chip-disabled > input[type] { cursor: not-allowed; }

/* Selectable card (§14): a radio or checkbox under the card; the three selected cues; links and buttons inside do not select. */
.wp-selectable-card {
    position: relative;
    display: grid;
    gap: var(--wp-s3);
    padding: var(--wp-s4);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-card);
    background: var(--wp-surface);
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color var(--wp-motion-fast), border-color var(--wp-motion-fast), box-shadow var(--wp-motion-fast);
}
.wp-selectable-card:hover { background: var(--wp-surface-2); }
.wp-selectable-card > input[type] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 0; }
.wp-selectable-card > :not(input) { position: relative; z-index: 1; pointer-events: none; }
.wp-selectable-card a, .wp-selectable-card button, .wp-selectable-card .wp-chip { pointer-events: auto; }
.wp-selectable-card.wp-selected, .wp-selectable-card:has(> input[type]:checked) { border-color: var(--wp-primary); box-shadow: inset 0 0 0 1px var(--wp-primary); background: var(--wp-primary-soft); }
.wp-selectable-card:has(> input[type]:focus-visible) { outline: 2px solid var(--wp-primary); outline-offset: 1px; box-shadow: inset 0 0 0 1px transparent, 0 0 0 3px var(--wp-focus); }
.wp-selectable-card.wp-selected:has(> input[type]:focus-visible) { box-shadow: inset 0 0 0 1px var(--wp-primary), 0 0 0 3px var(--wp-focus); }
.wp-selectable-card-disabled { opacity: 0.6; }
/* The script card as a link (§14, B9): the same frame, no input; the whole card is the link. */
.wp-script-card-wrap { display: contents; }
.wp-selectable-card.wp-script-card > .wp-script-card-link { position: static; display: block; color: inherit; text-decoration: none; }
.wp-script-card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.wp-script-card:hover { border-color: var(--wp-line-strong); }
.wp-script-card:has(.wp-script-card-link:focus-visible) { outline: 2px solid var(--wp-primary); outline-offset: 1px; box-shadow: 0 0 0 3px var(--wp-focus); }
.wp-script-card .wp-selectable-card-title { cursor: inherit; }
.wp-script-card-details { position: relative; z-index: 2; margin-inline-start: auto; }
.wp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* Numbered steps with Primary pills (B10, B11, B13); the digits come from Fmt so Persian pages read Persian numerals. */
.wp-numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp-s3); }
.wp-numbered > li { display: flex; align-items: flex-start; gap: var(--wp-s3); }
.wp-numbered-pill { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--wp-primary); color: var(--wp-primary-fg); font-size: var(--wp-fs-caption); font-weight: 500; font-variant-numeric: tabular-nums; }
.wp-numbered > li > span:last-child { padding-top: 4px; }
.wp-selectable-card-disabled > input[type] { cursor: not-allowed; }
.wp-selectable-card-head { display: flex; align-items: flex-start; gap: var(--wp-s3); }
.wp-selectable-card-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wp-selectable-card-title { font-weight: 500; cursor: pointer; }
.wp-selectable-card-subtitle { color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-selectable-card-body { display: grid; gap: var(--wp-s2); }
.wp-selectable-card-description { margin: 0; color: var(--wp-muted); font-size: 14px; }
.wp-selectable-card-badges { display: flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; }
.wp-selectable-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-s3); flex-wrap: wrap; }
.wp-selectable-check { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wp-primary); color: var(--wp-primary-fg); }
.wp-selectable-order { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wp-primary); color: var(--wp-primary-fg); font-size: var(--wp-fs-caption); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Accordion (§13): numbered pill or icon, title, subtitle or count, badge, chevron; the header is a real button. */
.wp-accordion { border: 1px solid var(--wp-line); border-radius: var(--wp-r-card); background: var(--wp-surface); }
.wp-accordion + .wp-accordion { margin-top: var(--wp-s3); }
.wp-accordion-heading { margin: 0; font-size: inherit; font-weight: inherit; }
.wp-accordion-header {
    display: flex;
    align-items: center;
    gap: var(--wp-s3);
    width: 100%;
    min-height: 56px;
    padding: var(--wp-s3) var(--wp-s4);
    border: 0;
    border-radius: var(--wp-r-card);
    background: transparent;
    color: var(--wp-fg);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--wp-motion-fast);
}
.wp-accordion-header:hover { background: var(--wp-surface-2); }
.wp-accordion-open > .wp-accordion-heading > .wp-accordion-header { border-end-start-radius: 0; border-end-end-radius: 0; }
.wp-accordion-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wp-primary); color: var(--wp-primary-fg); font-size: var(--wp-fs-caption); font-weight: 700; font-variant-numeric: tabular-nums; }
.wp-accordion-icon { width: 32px; height: 32px; }
.wp-accordion-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wp-accordion-title { font-size: var(--wp-fs-h2); font-weight: 500; }
.wp-accordion-sub { color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-accordion-badge { display: inline-flex; }
.wp-accordion-chevron { flex: none; margin-inline-start: auto; color: var(--wp-muted); transition: transform var(--wp-motion); }
.wp-accordion-open > .wp-accordion-heading .wp-accordion-chevron { transform: rotate(180deg); }
.wp-accordion-body { display: grid; gap: var(--wp-s4); padding: 0 var(--wp-s4) var(--wp-s4); }
.wp-accordion-body[hidden] { display: none; }

/* Run progress (§16): bar, "Step n of m · plain words", elapsed, the Stop slot, a folded log. */
.wp-run { display: grid; gap: var(--wp-s2); }
.wp-run-track { position: relative; height: 6px; overflow: hidden; border-radius: 999px; background: var(--wp-surface-2); }
.wp-run-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--wp-primary); transition: width var(--wp-motion); }
.wp-run-done .wp-run-fill { background: var(--wp-ok); }
.wp-run-failed .wp-run-fill { background: var(--wp-danger); }
.wp-run-stopped .wp-run-fill { background: var(--wp-line-strong); }
.wp-run-indeterminate .wp-run-fill { width: 40%; animation: wp-run-slide var(--wp-pulse) ease-in-out infinite; }
@keyframes wp-run-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
[dir="rtl"] .wp-run-indeterminate .wp-run-fill { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .wp-run-indeterminate .wp-run-fill { animation: none; width: 100%; opacity: 0.5; } }
.wp-run-row { display: flex; align-items: center; gap: var(--wp-s3); flex-wrap: wrap; font-size: 14px; }
.wp-run-step { color: var(--wp-primary-text); font-weight: 500; white-space: nowrap; }
.wp-run-text { flex: 1; min-width: 160px; }
.wp-run-step + .wp-run-text::before { content: "·"; margin-inline-end: var(--wp-s2); color: var(--wp-muted); }
.wp-run-elapsed { color: var(--wp-muted); font-variant-numeric: tabular-nums; }
.wp-run-actions { display: flex; gap: var(--wp-s2); margin-inline-start: auto; }
.wp-run-log > summary { cursor: pointer; color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-run-log-body { margin-top: var(--wp-s2); }

/* Timeline (§16): nodes waiting (number), running (Primary), passed (Ok check), warning, failed (DangerFill cross). */
.wp-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.wp-timeline > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--wp-s3); padding: var(--wp-s3) 0; }
.wp-timeline > li::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 13px; width: 2px; background: var(--wp-line); }
.wp-timeline > li:first-child::before { top: calc(var(--wp-s3) + 14px); }
.wp-timeline > li:last-child::before { bottom: auto; height: calc(var(--wp-s3) + 14px); }
.wp-timeline > li:only-child::before { display: none; }
.wp-timeline-node {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 2px solid var(--wp-line-strong);
    border-radius: 50%;
    background: var(--wp-surface);
    color: var(--wp-muted);
    font-size: var(--wp-fs-caption);
    font-weight: 500;
}
.wp-timeline-node > .wp-icon { width: 14px; height: 14px; }
.wp-timeline-running .wp-timeline-node { border-color: var(--wp-primary); color: var(--wp-primary); }
.wp-timeline-passed .wp-timeline-node { border-color: var(--wp-ok); background: var(--wp-ok-soft); color: var(--wp-ok); }
.wp-timeline-warning .wp-timeline-node { border-color: var(--wp-warn); background: var(--wp-warn-soft); color: var(--wp-warn); }
.wp-timeline-failed .wp-timeline-node { border-color: var(--wp-danger-fill); background: var(--wp-danger-fill); color: var(--wp-danger-fill-fg); }
.wp-timeline-skipped { opacity: 0.6; }
.wp-timeline-copy { display: grid; gap: 4px; min-width: 0; }
.wp-timeline-head { display: flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; min-height: 28px; }
.wp-timeline-name { font-weight: 500; }
.wp-timeline-detail { padding: 0; background: none; color: var(--wp-muted); font-size: var(--wp-fs-code); overflow-wrap: anywhere; }
.wp-timeline-remedy { padding: var(--wp-s2) var(--wp-s3); border-radius: var(--wp-r-ctl); background: var(--wp-warn-soft); color: var(--wp-warn); font-size: var(--wp-fs-caption); }

/* Plan specs (§18): tiles, a compact line or short cells. */
.wp-specs { list-style: none; margin: 0; padding: 0; }
.wp-specs-full { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--wp-s3); }
.wp-specs-full > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--wp-s3); align-items: center; padding: var(--wp-s3); border: 1px solid var(--wp-line); border-radius: var(--wp-r-ctl); background: var(--wp-surface); }
.wp-specs-full .wp-tile { grid-row: span 2; width: 36px; height: 36px; color: var(--wp-muted); }
.wp-spec-value { font-weight: 500; }
.wp-spec-label { color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-specs-compact { display: flex; flex-wrap: wrap; gap: var(--wp-s2) var(--wp-s4); }
.wp-specs-compact > li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp-fs-label); }
.wp-specs-compact .wp-icon { color: var(--wp-muted); }
.wp-specs-short { display: inline-flex; flex-wrap: wrap; gap: var(--wp-s2); color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-specs-short > li + li::before { content: "·"; margin-inline-end: var(--wp-s2); }
.wp-specs-short .wp-spec-value { font-weight: 400; }

/* Usage bar (§18): the value as text; Warn from 80 %, Danger at the limit. */
.wp-usage { display: grid; gap: 6px; }
.wp-usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp-s3); font-size: var(--wp-fs-label); }
.wp-usage-label { font-weight: 500; }
.wp-usage-value { color: var(--wp-muted); }
.wp-usage-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--wp-surface-2); }
.wp-usage-fill { display: block; height: 100%; border-radius: inherit; background: var(--wp-primary); transition: width var(--wp-motion); }
.wp-usage-warn .wp-usage-fill { background: var(--wp-warn); }
.wp-usage-warn .wp-usage-value { color: var(--wp-warn); }
.wp-usage-danger .wp-usage-fill { background: var(--wp-danger); }
.wp-usage-danger .wp-usage-value { color: var(--wp-danger); }

/* Disabled button with its reason (§3, B0 §4). */
.wp-btn-wrap { display: inline-grid; gap: 4px; justify-items: start; }
.wp-btn-wrap-block { display: grid; }

/* Skeleton shapes (§8). */
.wp-empty-loading { border-style: solid; }
.wp-skeleton-tile { width: 40px; height: 40px; flex: none; }
.wp-skeleton-title { width: 40%; min-width: 120px; height: 14px; margin-bottom: 8px; }
.wp-skeleton-line { width: 70%; height: 12px; }
.wp-skeleton-rows, .wp-grid-skeleton { display: grid; gap: var(--wp-s2); flex-basis: 100%; }
.wp-skeleton-row { height: 40px; }
.wp-grid-skeleton { padding: var(--wp-s3) var(--wp-s4); }

/* Data grid, settled look (§14): caption headers over a Line, hover Surface2, the selected row PrimarySoft + 2 px Primary start border always reserved. */
.wp-grid .mud-table-head .mud-table-cell { padding: var(--wp-s2) var(--wp-s4); color: var(--wp-muted); font-size: var(--wp-fs-caption); font-weight: 500; background: transparent; border-bottom: 1px solid var(--wp-line); }
.wp-grid .mud-table-head .mud-table-sort-label { color: inherit; }
.wp-grid .mud-table-body .mud-table-cell { padding: 10px var(--wp-s4); color: var(--wp-fg); font-size: 14px; border-bottom: 1px solid var(--wp-line); }
.wp-grid .mud-table-body .mud-table-row > .mud-table-cell:first-child { border-inline-start: 2px solid transparent; }
.wp-grid .mud-table-body .mud-table-row:hover > .mud-table-cell { background: var(--wp-surface-2); }
.wp-grid .mud-table-body .mud-table-row.mud-selected-item > .mud-table-cell,
.wp-grid .mud-table-body .mud-table-row[aria-selected="true"] > .mud-table-cell { background: var(--wp-primary-soft); }
.wp-grid .mud-table-body .mud-table-row.mud-selected-item > .mud-table-cell:first-child,
.wp-grid .mud-table-body .mud-table-row[aria-selected="true"] > .mud-table-cell:first-child { border-inline-start-color: var(--wp-primary); }
/* A row that cannot be picked (the user picker, issue 994): muted text, no hover, and its reason in the row. */
.wp-grid .mud-table-body .mud-table-row.wp-grid-row-unavailable { cursor: default; }
.wp-grid .mud-table-body .mud-table-row.wp-grid-row-unavailable > .mud-table-cell { color: var(--wp-muted); }
.wp-grid .mud-table-body .mud-table-row.wp-grid-row-unavailable:hover > .mud-table-cell { background: transparent; }

/* A MudDialog that fills a phone (the user picker, issue 994). */
@media (max-width: 599px) {
    .mud-dialog.wp-dialog-phone-full { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
    .mud-dialog.wp-dialog-phone-full .mud-dialog-content { flex: 1; overflow-y: auto; }
}

/* Tabs (§19): label 13 px / 500, the active tab PrimaryText with a 2 px Primary underline, an optional muted count. */
/* R53: a tab row never widens the page. As a grid or flex item the tabs would grow to the width of every tab
   side by side; with min-width 0 they keep their container's width and MudBlazor's scroll buttons take over. */
.mud-tabs { min-width: 0; max-width: 100%; }
.mud-tabs .mud-tabs-tabbar { background: transparent; border-bottom: 1px solid var(--wp-line); }
.mud-tabs .mud-tab { min-height: 44px; padding: 0 var(--wp-s4); color: var(--wp-muted); font-size: var(--wp-fs-label); font-weight: 500; letter-spacing: 0; text-transform: none; }
.mud-tabs .mud-tab:hover { background: var(--wp-surface-2); }
.mud-tabs .mud-tab.mud-tab-active { color: var(--wp-primary-text); }
.mud-tabs .mud-tab-slider { height: 2px; background: var(--wp-primary); }
.wp-tab-count { margin-inline-start: 4px; color: var(--wp-muted); font-weight: 400; }

/* ── Persian and right to left ── */
/* The layout uses logical properties (inline-start/end), so it mirrors with dir="rtl".
   Letter spacing breaks the joining of Persian letters, so Persian pages never use it. */
html[lang="fa"] body * { letter-spacing: 0 !important; }
html[lang="fa"] body { line-height: 1.75; }
[dir="rtl"] .wp-icon-directional { transform: scaleX(-1); }
/* Values people type or copy in Latin script stay left to right inside Persian pages. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="url"],
[dir="rtl"] code,
[dir="rtl"] pre { direction: ltr; text-align: left; }

/* ── Responsive ── */

@media (min-width: 1200px) {
    .wp-shell-rail { --wp-sidebar-w: 64px; }
    .wp-shell-rail .wp-sidebar { padding-inline: var(--wp-s2); }
    .wp-shell-rail .wp-sidebar-head { justify-content: center; padding-inline-start: 0; }
    .wp-shell-rail .wp-brand-copy, .wp-shell-rail .wp-environment, .wp-shell-rail .wp-side-nav a > span, .wp-shell-rail .wp-rail-toggle > span { display: none; }
    .wp-shell-rail .wp-nav-label { height: 1px; margin: var(--wp-s2) var(--wp-s2) var(--wp-s1); background: var(--wp-line); font-size: 0; }
    .wp-shell-rail .wp-side-nav a { justify-content: center; padding: 10px 0; gap: 0; }
    .wp-shell-rail .wp-rail-toggle { justify-content: center; }
}

@media (min-width: 980px) and (max-width: 1199px) {
    .wp-shell { --wp-sidebar-w: 64px; }
    .wp-shell .wp-sidebar { padding-inline: var(--wp-s2); }
    .wp-shell .wp-sidebar-head { justify-content: center; padding-inline-start: 0; }
    .wp-shell .wp-brand-copy, .wp-shell .wp-environment, .wp-shell .wp-side-nav a > span, .wp-shell .wp-rail-toggle > span { display: none; }
    .wp-shell .wp-nav-label { height: 1px; margin: var(--wp-s2) var(--wp-s2) var(--wp-s1); background: var(--wp-line); font-size: 0; }
    .wp-shell .wp-side-nav a { justify-content: center; padding: 10px 0; gap: 0; }
    .wp-shell .wp-rail-toggle { justify-content: center; }
}

@media (max-width: 979px) {
    /* The sidebar is a drawer from the start edge behind the hamburger (D13.2); Esc, a choice or the backdrop closes it. */
    .wp-shell { display: block; }
    .wp-topbar .wp-hamburger, .wp-topbar .wp-topbar-brand, .wp-sidebar .wp-drawer-close { display: inline-flex; }
    .wp-rail-toggle { display: none; }
    .wp-sidebar { display: none; position: fixed; inset-block: 0; inset-inline-start: 0; width: min(320px, 86vw); height: 100vh; z-index: 40; box-shadow: var(--wp-shadow); }
    .wp-shell-drawer-open .wp-sidebar { display: flex; }
    .wp-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: var(--wp-fg); opacity: 0.35; }}

@media (max-width: 640px) {
    .wp-topbar { padding-inline: var(--wp-s3); gap: var(--wp-s2); }
    .wp-topbar-actions { gap: var(--wp-s3); }
    .wp-topbar-brand .wp-brand-copy, .wp-page-name { display: none; }
    .wp-content, .wp-fallback-content { padding: var(--wp-s5) var(--wp-s4) 48px; }
    /* The public bar's links fold into a panel under the bar behind the hamburger (D13.4). */
    .wp-public-bar .wp-hamburger { display: inline-flex; }
    .wp-public-nav { display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 30; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--wp-s2); background: var(--wp-surface); border-bottom: 1px solid var(--wp-line); box-shadow: var(--wp-shadow); }
    .wp-public-open .wp-public-nav { display: flex; }    .wp-account-copy { display: none; }
    .wp-card { padding: var(--wp-s4); }
    .wp-field-wide { grid-column: auto; }    .wp-dev-account-list { grid-template-columns: 1fr; }
}

/* ---- Tool panel kit (B0 WP5, B15): toolbar, path bar, inset editor row, status line, terminal, editor. ---- */
.wp-tool-panel { display: grid; gap: var(--wp-s3); }
.wp-toolbar { display: flex; align-items: center; gap: var(--wp-s2); flex-wrap: wrap; min-width: 0; }
.wp-toolbar-spacer { flex: 1; }
.wp-toolbar-divider { width: 1px; align-self: stretch; min-height: 20px; background: var(--wp-line); }
.wp-path-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; direction: ltr; font-family: var(--wp-font-mono); font-size: var(--wp-fs-code); }
.wp-path-crumb { padding: 2px 6px; border: 0; border-radius: var(--wp-r-sm); background: transparent; color: var(--wp-primary-text); font: inherit; cursor: pointer; }
.wp-path-crumb:hover:not(:disabled) { background: var(--wp-surface-2); }
.wp-path-crumb:disabled { color: var(--wp-fg); cursor: default; }
.wp-path-sep { color: var(--wp-muted); }
.wp-inset-row { display: flex; align-items: flex-end; gap: var(--wp-s2); flex-wrap: wrap; padding: var(--wp-s3); border: 1px solid var(--wp-line); border-radius: var(--wp-r-ctl); background: var(--wp-surface-2); }
.wp-inset-row .wp-field { flex: 1 1 220px; }
.wp-status-line { display: flex; align-items: center; gap: var(--wp-s3); flex-wrap: wrap; color: var(--wp-muted); font-size: var(--wp-fs-caption); }
.wp-upload-button { position: relative; overflow: hidden; }
.wp-upload-button input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wp-terminal { display: grid; gap: var(--wp-s2); padding: var(--wp-s3); border: 1px solid var(--wp-terminal-line); border-radius: var(--wp-r-card); background: var(--wp-terminal-bg); color: var(--wp-terminal-fg); direction: ltr; }
.wp-terminal.wp-terminal-plain { display: block; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; }
.wp-terminal-plain .wp-terminal-host { --wp-surface: var(--wc-term-bg); --wp-fg: var(--wc-term-fg); --wp-accent: var(--wc-term-fg); height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; }
.wp-terminal-bar { display: flex; align-items: center; gap: var(--wp-s3); flex-wrap: wrap; }
.wp-terminal-bar code { color: var(--wp-terminal-fg); font-family: var(--wp-font-mono); font-size: var(--wp-fs-code); }
.wp-terminal-size { color: var(--wp-terminal-fg); opacity: 0.7; font-size: var(--wp-fs-caption); }
.wp-terminal-spacer { flex: 1; }
.wp-terminal .wp-btn-quiet { color: var(--wp-terminal-fg); }
.wp-terminal .wp-btn-quiet:hover { background: var(--wp-terminal-line); }
.wp-terminal-host { --wp-surface: var(--wp-terminal-bg); --wp-fg: var(--wp-terminal-fg); height: 26rem; padding: var(--wp-s2); border: 1px solid var(--wp-terminal-line); border-radius: var(--wp-r-ctl); background: var(--wp-terminal-bg); overflow: hidden; }
/* Watch and Replay output of TerminalView (issue 520): the only scrolling region of the card, LTR mono, follows the newest line. */
.wp-terminal-log-wrap { position: relative; min-width: 0; }
.wp-terminal-log { margin: 0; min-height: 20rem; max-height: 70vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--wp-font-mono); font-size: var(--wp-fs-code); line-height: 1.6; color: var(--wp-terminal-fg); background: transparent; direction: ltr; text-align: left; }
.wp-terminal-jump { position: absolute; inset-inline-end: var(--wp-s3); bottom: var(--wp-s3); }
.wp-code-dark { margin: 0; padding: var(--wp-s3); border: 1px solid var(--wp-terminal-line); border-radius: var(--wp-r-ctl); background: var(--wp-terminal-bg); color: var(--wp-terminal-fg); font-family: var(--wp-font-mono); font-size: var(--wp-fs-code); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; direction: ltr; text-align: left; }
.wp-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); border: 1px solid var(--wp-line); border-radius: var(--wp-r-ctl); background: var(--wp-surface); overflow: hidden; direction: ltr; }
.wp-editor-gutter { margin: 0; padding: var(--wp-s3) var(--wp-s2); min-width: 3ch; height: 24rem; overflow: hidden; text-align: right; color: var(--wp-muted); background: var(--wp-surface-2); border-inline-end: 1px solid var(--wp-line); font-family: var(--wp-font-mono); font-size: var(--wp-fs-code); line-height: 1.5; user-select: none; }
.wp-editor-text { width: 100%; height: 24rem; margin: 0; padding: var(--wp-s3); border: 0; border-radius: 0; resize: none; background: var(--wp-surface); color: var(--wp-fg); font-family: var(--wp-font-mono); font-size: var(--wp-fs-code); line-height: 1.5; white-space: pre; overflow: auto; tab-size: 4; }
.wp-editor-text:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wp-focus); }
@media (max-width: 640px) {
    .wp-terminal-host { height: 20rem; }
    .wp-terminal-log { min-height: 14rem; }
    .wp-editor-gutter, .wp-editor-text { height: 18rem; }
}

/* Support: the emergency diagnosis output (Part B). */
.admin-rescue-out { display: block; white-space: pre-wrap; max-height: 320px; overflow: auto; margin: 0; }