/*
* Paramount CSS v1.0 (2026-10-22). Needs tokens.css loaded first.
*
*
*
* Element defaults sit inside :where() so they have zero specificity: your app's own CSS
* always wins over them. Components are single classes prefixed pm-. Modifiers use "--",
* parts use "__", states use is-* classes or ARIA attributes (aria-current, aria-invalid,
* aria-selected, aria-busy).
*/
/* ============ 1. Reset ============ */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background: var(--pm-bg);
color: var(--pm-text);
font-family: var(--pm-font-sans);
font-size: var(--pm-text-base);
line-height: var(--pm-leading-normal);
-webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
:where(img, svg, video, canvas) { display: block; max-width: 100%; height: auto; }
:where(input, button, textarea, select) { font: inherit; color: inherit; }
:where(button) { cursor: pointer; }
:where(table) { border-collapse: collapse; }
:where([hidden]) { display: none !important; }
/* ============ 2. Typography ============ */
:where(h1, h2, h3, h4) {
color: var(--pm-heading);
font-family: var(--pm-font-display);
font-weight: var(--pm-weight-semibold);
line-height: var(--pm-leading-tight);
text-wrap: balance;
letter-spacing: -0.01em;
}
:where(h1) { font-size: var(--pm-text-3xl); }
:where(h2) { font-size: var(--pm-text-2xl); }
:where(h3) { font-size: var(--pm-text-xl); line-height: var(--pm-leading-snug); }
:where(h4) { font-size: var(--pm-text-lg); line-height: var(--pm-leading-snug); }
:where(p, li) { max-width: var(--pm-measure); text-wrap: pretty; }
:where(small) { font-size: var(--pm-text-sm); }
:where(strong, b) { font-weight: var(--pm-weight-semibold); }
:where(code, kbd, samp, pre) { font-family: var(--pm-font-mono); font-size: 0.92em; }
:where(code) { background: var(--pm-surface-sunken); padding: 0.1em 0.35em; border-radius: var(--pm-radius-sm); }
:where(a) {
color: var(--pm-link);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
:where(a:hover) { color: var(--pm-link-hover); text-decoration-thickness: 2px; }
:where(hr) { border: 0; border-top: var(--pm-border-width) solid var(--pm-border); margin: var(--pm-space-5) 0; }
.pm-display { font-family: var(--pm-font-display); font-size: var(--pm-text-4xl); font-weight: var(--pm-weight-bold); line-height: 1.05; color: var(--pm-heading); text-wrap: balance; letter-spacing: -0.02em; }
.pm-lead { font-size: var(--pm-text-md); color: var(--pm-text-muted); max-width: var(--pm-measure); }
.pm-eyebrow { font-family: var(--pm-font-display); font-size: var(--pm-text-xs); font-weight: var(--pm-weight-semibold); text-transform: uppercase; letter-spacing: var(--pm-tracking-caps); color: var(--pm-text-muted); }
.pm-muted { color: var(--pm-text-muted); }
.pm-small { font-size: var(--pm-text-sm); }
.pm-num { font-variant-numeric: tabular-nums; }
.pm-mono { font-family: var(--pm-font-mono); }
.pm-nowrap { white-space: nowrap; }
.pm-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pm-show-light { display: var(--pm-show-on-light) !important; }
.pm-show-dark { display: var(--pm-show-on-dark) !important; }
/* ============ 3. Focus ============ */
:where(:focus-visible) {
outline: var(--pm-focus-width) solid var(--pm-focus);
outline-offset: 2px;
}
:where(:focus:not(:focus-visible)) { outline: none; }
.pm-skip {
position: absolute; left: var(--pm-space-4); top: -100px; z-index: var(--pm-z-toast);
background: var(--pm-surface); color: var(--pm-link); padding: var(--pm-space-2) var(--pm-space-4);
border-radius: var(--pm-radius-md); box-shadow: var(--pm-shadow-md);
}
.pm-skip:focus { top: var(--pm-space-2); }
/* ============ 4. Layout ============ */
.pm-container {
width: 100%;
max-width: calc(var(--pm-container) + 2 * var(--pm-gutter));
margin-inline: auto;
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.pm-container--narrow { max-width: calc(var(--pm-container-narrow) + 2 * var(--pm-gutter)); }
.pm-section { padding-block: var(--pm-space-7); }
.pm-stack { display: flex; flex-direction: column; gap: var(--pm-gap, var(--pm-space-4)); }
.pm-stack > * { margin: 0; }
.pm-stack--sm { --pm-gap: var(--pm-space-2); }
.pm-stack--lg { --pm-gap: var(--pm-space-6); }
.pm-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-gap, var(--pm-space-3)); }
.pm-cluster--between { justify-content: space-between; }
.pm-cluster--end { justify-content: flex-end; }
.pm-grid {
display: grid; gap: var(--pm-gap, var(--pm-space-5));
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pm-grid-min, 16rem)), 1fr));
}
.pm-grid--narrow { --pm-grid-min: 11rem; }
.pm-grid--wide { --pm-grid-min: 22rem; }
.pm-split { display: grid; gap: var(--pm-space-6); }
@media (min-width: 64em) { .pm-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.pm-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ============ 5. Buttons ============ */
.pm-btn {
--_bg: var(--pm-primary); --_fg: var(--pm-on-primary); --_bd: var(--pm-primary); --_bg-hover: var(--pm-primary-hover);
display: inline-flex; align-items: center; justify-content: center; gap: var(--pm-space-2);
min-height: var(--pm-control-h);
padding: 0 var(--pm-space-4);
border: var(--pm-border-width-strong) solid var(--_bd);
border-radius: var(--pm-radius-md);
background: var(--_bg); color: var(--_fg);
font-family: var(--pm-font-sans); font-size: var(--pm-text-base); font-weight: var(--pm-weight-semibold); line-height: 1.2;
text-decoration: none; white-space: nowrap;
cursor: pointer; user-select: none;
transition: background-color var(--pm-duration-fast) var(--pm-ease), border-color var(--pm-duration-fast) var(--pm-ease), color var(--pm-duration-fast) var(--pm-ease);
}
.pm-btn:hover { background: var(--_bg-hover); border-color: var(--_bg-hover); color: var(--_fg); text-decoration: none; }
.pm-btn:active { transform: translateY(1px); }
.pm-btn--secondary { --_bg: transparent; --_fg: var(--pm-primary); --_bd: var(--pm-primary); --_bg-hover: var(--pm-primary-soft); }
.pm-btn--secondary:hover { border-color: var(--pm-primary); color: var(--pm-primary-text); }
.pm-btn--ghost { --_bg: transparent; --_fg: var(--pm-primary); --_bd: transparent; --_bg-hover: var(--pm-primary-soft); }
.pm-btn--ghost:hover { border-color: transparent; color: var(--pm-primary-text); }
.pm-btn--danger { --_bg: var(--pm-danger); --_fg: var(--pm-on-danger); --_bd: var(--pm-danger); --_bg-hover: var(--pm-danger-text); }
.pm-btn--sm { min-height: var(--pm-control-h-sm); padding: 0 var(--pm-space-3); font-size: var(--pm-text-sm); }
.pm-btn--lg { min-height: var(--pm-control-h-lg); padding: 0 var(--pm-space-5); font-size: var(--pm-text-md); }
.pm-btn--block { display: flex; width: 100%; }
.pm-btn:disabled, .pm-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.pm-btn[aria-busy="true"], .pm-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.pm-btn[aria-busy="true"]::after, .pm-btn.is-loading::after {
content: ""; position: absolute; width: 1.1em; height: 1.1em;
border: 2px solid var(--_fg); border-right-color: transparent; border-radius: 50%;
animation: pm-spin 0.7s linear infinite;
}
.pm-spinner { display: inline-block; width: 1.25em; height: 1.25em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pm-spin 0.7s linear infinite; vertical-align: -0.2em; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
/* ============ 6. Forms ============ */
.pm-field { display: flex; flex-direction: column; gap: var(--pm-space-1); }
.pm-label { font-weight: var(--pm-weight-semibold); font-size: var(--pm-text-sm); color: var(--pm-text); }
.pm-label .pm-optional { font-weight: var(--pm-weight-regular); color: var(--pm-text-muted); }
.pm-help { font-size: var(--pm-text-sm); color: var(--pm-text-muted); max-width: var(--pm-measure); }
.pm-error { font-size: var(--pm-text-sm); color: var(--pm-danger-text); font-weight: var(--pm-weight-medium); display: flex; gap: var(--pm-space-1); align-items: baseline; }
.pm-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--pm-danger); color: var(--pm-on-danger); font-size: 0.8em; font-weight: var(--pm-weight-bold); }
.pm-input, .pm-select, .pm-textarea {
width: 100%;
min-height: var(--pm-control-h);
padding: var(--pm-space-2) var(--pm-space-3);
border: var(--pm-border-width) solid var(--pm-border-strong);
border-radius: var(--pm-radius-md);
background: var(--pm-surface);
color: var(--pm-text);
font-size: var(--pm-text-base);
line-height: 1.4;
transition: border-color var(--pm-duration-fast) var(--pm-ease), box-shadow var(--pm-duration-fast) var(--pm-ease);
}
.pm-textarea { min-height: 6rem; resize: vertical; }
.pm-select {
appearance: none; padding-right: 2.25rem;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 1.05rem center, right 0.7rem center;
background-size: 0.35rem 0.35rem; background-repeat: no-repeat;
}
.pm-input::placeholder, .pm-textarea::placeholder { color: var(--pm-text-muted); opacity: 1; }
.pm-input:hover, .pm-select:hover, .pm-textarea:hover { border-color: var(--pm-text-muted); }
.pm-input:focus-visible, .pm-select:focus-visible, .pm-textarea:focus-visible {
outline: none; border-color: var(--pm-focus); box-shadow: 0 0 0 var(--pm-focus-width) var(--pm-focus-halo), 0 0 0 1px var(--pm-focus) inset;
}
.pm-input[aria-invalid="true"], .pm-select[aria-invalid="true"], .pm-textarea[aria-invalid="true"] { border-color: var(--pm-danger); border-width: var(--pm-border-width-strong); }
.pm-input:disabled, .pm-select:disabled, .pm-textarea:disabled { background: var(--pm-surface-sunken); color: var(--pm-text-muted); cursor: not-allowed; }
.pm-input[readonly] { background: var(--pm-surface-sunken); }
.pm-check {
display: flex; align-items: flex-start; gap: var(--pm-space-3);
min-height: var(--pm-control-h); padding-block: var(--pm-space-2);
cursor: pointer; line-height: 1.4;
}
.pm-check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--pm-primary); cursor: pointer; }
.pm-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pm-space-1); min-width: 0; }
.pm-fieldset > legend { padding: 0; margin-bottom: var(--pm-space-1); }
.pm-form { display: flex; flex-direction: column; gap: var(--pm-space-5); }
/* ============ 7. Card ============ */
.pm-card {
background: var(--pm-surface);
border: var(--pm-border-width) solid var(--pm-border);
border-radius: var(--pm-radius-lg);
padding: var(--pm-space-5);
display: flex; flex-direction: column; gap: var(--pm-space-3);
}
.pm-card--raised { box-shadow: var(--pm-shadow-md); }
.pm-card--flush { padding: 0; overflow: hidden; }
.pm-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pm-space-3); flex-wrap: wrap; }
.pm-card__title { font-size: var(--pm-text-lg); }
.pm-card__meta { display: flex; flex-wrap: wrap; gap: var(--pm-space-2) var(--pm-space-4); color: var(--pm-text-muted); font-size: var(--pm-text-sm); }
.pm-card__footer { display: flex; flex-wrap: wrap; gap: var(--pm-space-3); align-items: center; margin-top: auto; padding-top: var(--pm-space-3); border-top: var(--pm-border-width) solid var(--pm-border); }
a.pm-card { color: inherit; text-decoration: none; transition: border-color var(--pm-duration-fast) var(--pm-ease), box-shadow var(--pm-duration-fast) var(--pm-ease); }
a.pm-card:hover { border-color: var(--pm-primary); box-shadow: var(--pm-shadow-sm); }
/* ============ 8. Badge ============ */
.pm-badge {
--_bg: var(--pm-surface-sunken); --_fg: var(--pm-text-muted); --_bd: var(--pm-border);
display: inline-flex; align-items: center; gap: 0.35em;
padding: 0.15em 0.6em; border: var(--pm-border-width) solid var(--_bd); border-radius: var(--pm-radius-pill);
background: var(--_bg); color: var(--_fg);
font-size: var(--pm-text-xs); font-weight: var(--pm-weight-semibold); line-height: 1.5; white-space: nowrap;
}
.pm-badge--primary { --_bg: var(--pm-primary-soft); --_fg: var(--pm-primary-text); --_bd: var(--pm-info-border); }
.pm-badge--success { --_bg: var(--pm-success-soft); --_fg: var(--pm-success-text); --_bd: var(--pm-success-border); }
.pm-badge--warning { --_bg: var(--pm-warning-soft); --_fg: var(--pm-warning-text); --_bd: var(--pm-warning-border); }
.pm-badge--danger { --_bg: var(--pm-danger-soft); --_fg: var(--pm-danger-text); --_bd: var(--pm-danger-border); }
.pm-badge--info { --_bg: var(--pm-info-soft); --_fg: var(--pm-info-text); --_bd: var(--pm-info-border); }
.pm-badge--dot::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
/* ============ 9. Alert / notice ============ */
.pm-alert {
--_bg: var(--pm-info-soft); --_fg: var(--pm-info-text); --_bar: var(--pm-info);
display: flex; gap: var(--pm-space-3); align-items: flex-start;
padding: var(--pm-space-3) var(--pm-space-4);
border: var(--pm-border-width) solid var(--_bar);
border-left-width: 4px;
border-radius: var(--pm-radius-md);
background: var(--_bg); color: var(--pm-text);
}
.pm-alert__title { color: var(--_fg); font-weight: var(--pm-weight-semibold); font-family: var(--pm-font-sans); font-size: var(--pm-text-base); }
.pm-alert__body { display: flex; flex-direction: column; gap: var(--pm-space-1); min-width: 0; flex: 1; }
.pm-alert__icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--_bar); margin-top: 0.1rem; }
.pm-alert--success { --_bg: var(--pm-success-soft); --_fg: var(--pm-success-text); --_bar: var(--pm-success); }
.pm-alert--warning { --_bg: var(--pm-warning-soft); --_fg: var(--pm-warning-text); --_bar: var(--pm-warning); }
.pm-alert--danger { --_bg: var(--pm-danger-soft); --_fg: var(--pm-danger-text); --_bar: var(--pm-danger); }
.pm-alert--trust { --_bg: var(--pm-surface); --_fg: var(--pm-heading); --_bar: var(--pm-accent); border-color: var(--pm-border); border-left-color: var(--pm-accent); }
/* ============ 10. Stepper and progress (multi-step candidate flows) ============ */
.pm-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--pm-space-2); counter-reset: pm-step; }
.pm-stepper > li {
counter-increment: pm-step; flex: 1 1 0; min-width: 0; max-width: none;
display: flex; flex-direction: column; gap: var(--pm-space-2);
font-size: var(--pm-text-sm); color: var(--pm-text-muted);
}
.pm-stepper > li::before {
content: ""; display: block; height: 4px; border-radius: var(--pm-radius-pill); background: var(--pm-border);
}
.pm-stepper > li > span::before { content: counter(pm-step) ". "; font-variant-numeric: tabular-nums; }
.pm-stepper > li.is-done::before { background: var(--pm-primary); }
.pm-stepper > li.is-done > span::before { content: "\2713 "; color: var(--pm-success-text); }
.pm-stepper > li[aria-current="step"] { color: var(--pm-text); font-weight: var(--pm-weight-semibold); }
.pm-stepper > li[aria-current="step"]::before { background: var(--pm-brand-gradient); }
@media (max-width: 30em) {
.pm-stepper > li:not([aria-current="step"]) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.pm-progress {
appearance: none; display: block; width: 100%; height: 0.5rem; border: 0;
border-radius: var(--pm-radius-pill); background: var(--pm-surface-sunken); overflow: hidden; color: var(--pm-primary);
box-shadow: inset 0 0 0 1px var(--pm-border);
}
.pm-progress::-webkit-progress-bar { background: transparent; }
.pm-progress::-webkit-progress-value { background: var(--pm-primary); border-radius: var(--pm-radius-pill); transition: width var(--pm-duration-slow) var(--pm-ease); }
.pm-progress::-moz-progress-bar { background: var(--pm-primary); border-radius: var(--pm-radius-pill); }
.pm-progress:indeterminate { background: linear-gradient(90deg, var(--pm-surface-sunken) 0%, var(--pm-primary) 50%, var(--pm-surface-sunken) 100%) 0 0 / 200% 100%; animation: pm-slide 1.4s linear infinite; }
.pm-progress:indeterminate::-webkit-progress-bar { background: transparent; }
.pm-progress:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes pm-slide { to { background-position: -200% 0; } }
/* ============ 11. Table ============ */
.pm-table-wrap { overflow-x: auto; border: var(--pm-border-width) solid var(--pm-border); border-radius: var(--pm-radius-lg); background: var(--pm-surface); }
.pm-table { width: 100%; border-collapse: collapse; font-size: var(--pm-text-sm); font-variant-numeric: tabular-nums; }
.pm-table th, .pm-table td { padding: var(--pm-space-3) var(--pm-space-4); text-align: left; vertical-align: middle; border-bottom: var(--pm-border-width) solid var(--pm-border); white-space: nowrap; }
.pm-table td.is-wrap, .pm-table--wrap td { white-space: normal; min-width: 12rem; }
.pm-table thead th {
position: sticky; top: 0; z-index: 1;
background: var(--pm-surface-sunken); color: var(--pm-text-muted);
font-size: var(--pm-text-xs); font-weight: var(--pm-weight-semibold); text-transform: uppercase; letter-spacing: var(--pm-tracking-caps);
white-space: nowrap;
}
.pm-table tbody tr:last-child > * { border-bottom: 0; }
.pm-table tbody tr:hover { background: var(--pm-selected); }
.pm-table tbody tr[aria-selected="true"] { background: var(--pm-selected); box-shadow: inset 3px 0 0 var(--pm-primary); }
.pm-table .pm-num, .pm-table td.is-num, .pm-table th.is-num { text-align: right; }
.pm-table--compact th, .pm-table--compact td { padding: var(--pm-space-2) var(--pm-space-3); }
.pm-table caption { caption-side: top; text-align: left; padding: var(--pm-space-3) var(--pm-space-4); color: var(--pm-text-muted); font-size: var(--pm-text-sm); }
/* ============ 12. Tabs ============ */
.pm-tabs { display: flex; gap: var(--pm-space-1); border-bottom: var(--pm-border-width) solid var(--pm-border); overflow-x: auto; scrollbar-width: none; }
.pm-tab {
flex: none; display: inline-flex; align-items: center; gap: var(--pm-space-2);
min-height: var(--pm-control-h); padding: 0 var(--pm-space-4); margin-bottom: -1px;
border: 0; border-bottom: 3px solid transparent; background: none;
color: var(--pm-text-muted); font-weight: var(--pm-weight-semibold); font-size: var(--pm-text-sm); text-decoration: none; white-space: nowrap;
}
.pm-tab:hover { color: var(--pm-text); text-decoration: none; border-bottom-color: var(--pm-border-strong); }
.pm-tab[aria-selected="true"], .pm-tab[aria-current="page"] { color: var(--pm-primary-text); border-bottom-color: var(--pm-primary); }
.pm-tabpanel { padding-top: var(--pm-space-5); }
/* ============ 13. Dialog (native