/* ==========================================================================
   Resume Match — application stylesheet
   --------------------------------------------------------------------------
   Hand-written CSS. No preprocessor, no build step, no framework.

   Contents
     1.  Design tokens
     2.  Reset and base elements
     3.  Typography utilities
     4.  Layout: containers, grids, stacks, split
     5.  Skip link and header / navigation
     6.  Footer
     7.  Cards, panels and sections
     8.  Buttons
     9.  Forms
     10. Field errors and help text
     11. Alerts, banners and notices
     12. Badges and pills
     13. Tables
     14. Tabs
     15. Empty state
     16. Score meter and progress
     17. Definition list
     18. Pagination
     19. Checklist
     20. Auth / minimal card layout
     21. Resume document (.resume-doc) — class names come from ResumeRenderer
     22. Editor layout and repeatable blocks
     23. Job cards and match breakdown
     24. Billing
     25. Print styles
     26. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* Colour — a light theme only, tuned for contrast and calm. */
    --c-ink: #14181f;
    --c-ink-soft: #3d4655;
    --c-muted: #5c6675;
    --c-faint: #7d8798;
    --c-line: #d9dee6;
    --c-line-soft: #e8ecf1;
    --c-bg: #f6f7f9;
    --c-surface: #ffffff;
    --c-surface-alt: #f1f3f7;

    --c-brand: #1d4ed8;
    --c-brand-dark: #1739a8;
    --c-brand-soft: #e8eefc;
    --c-brand-ink: #ffffff;

    --c-success: #14663a;
    --c-success-soft: #e4f4ea;
    --c-success-line: #a9d8bd;

    --c-error: #a41d20;
    --c-error-soft: #fbe9e9;
    --c-error-line: #eeb3b4;

    --c-warning: #8a5108;
    --c-warning-soft: #fdf1dd;
    --c-warning-line: #eccb93;

    --c-info: #10516e;
    --c-info-soft: #e5f1f7;
    --c-info-line: #a8cede;

    --c-critical: #8c1416;
    --c-critical-soft: #fbe4e4;
    --c-critical-line: #e6a4a5;

    /* Spacing scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    /* Radius */
    --r-1: 3px;
    --r-2: 5px;
    --r-3: 8px;
    --r-round: 999px;

    /* Typography */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-serif: Georgia, "Times New Roman", serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.125rem;
    --fs-4xl: 2.75rem;

    --lh-tight: 1.25;
    --lh-base: 1.55;

    /* Elevation — flat by design; shadows are only used for popovers. */
    --shadow-1: 0 1px 2px rgba(20, 24, 31, 0.06);
    --shadow-2: 0 6px 18px rgba(20, 24, 31, 0.12);

    --focus-ring: 2px solid #0b3fbf;
    --focus-offset: 2px;

    --measure: 68ch;
    --container: 1140px;
    --header-height: 3.75rem;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--s-2);
    line-height: var(--lh-tight);
    font-weight: 650;
    color: var(--c-ink);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
    margin: 0 0 var(--s-4);
}

a {
    color: var(--c-brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--c-brand);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--r-1);
}

hr {
    border: 0;
    border-top: 1px solid var(--c-line);
    margin: var(--s-5) 0;
}

img,
svg,
iframe {
    max-width: 100%;
}

code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

pre {
    margin: 0 0 var(--s-4);
    padding: var(--s-3);
    background: #f3f4f6;
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

blockquote {
    margin: 0 0 var(--s-4);
    padding-left: var(--s-4);
    border-left: 3px solid var(--c-line);
    color: var(--c-ink-soft);
}

::selection {
    background: var(--c-brand-soft);
}

/* ==========================================================================
   3. Typography utilities
   ========================================================================== */

.lede {
    font-size: var(--fs-lg);
    color: var(--c-ink-soft);
    max-width: var(--measure);
}

.muted {
    color: var(--c-muted);
}

.faint {
    color: var(--c-faint);
}

.small {
    font-size: var(--fs-sm);
}

.xsmall {
    font-size: var(--fs-xs);
}

.strong {
    font-weight: 650;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

.measure {
    max-width: var(--measure);
}

.nowrap {
    white-space: nowrap;
}

.prose {
    max-width: var(--measure);
}

.prose h2 {
    margin-top: var(--s-6);
}

.prose h3 {
    margin-top: var(--s-5);
}

.prose ul,
.prose ol {
    margin: 0 0 var(--s-4);
    padding-left: var(--s-5);
}

.prose li {
    margin-bottom: var(--s-2);
}

.text-center { text-align: center; }
.text-right { text-align: right; }

/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-4);
}

.container--narrow {
    max-width: 780px;
}

.container--wide {
    max-width: 1360px;
}

.page {
    padding-block: var(--s-6) var(--s-8);
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--s-5);
}

.page-head__text {
    min-width: 16rem;
    flex: 1 1 22rem;
}

.page-head h1 {
    margin-bottom: var(--s-1);
}

.page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}

.section {
    margin-bottom: var(--s-6);
}

.section > h2,
.section > h3 {
    margin-bottom: var(--s-3);
}

.stack > * + * {
    margin-top: var(--s-4);
}

.stack-sm > * + * {
    margin-top: var(--s-2);
}

.stack-lg > * + * {
    margin-top: var(--s-5);
}

.grid {
    display: grid;
    gap: var(--s-4);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.split {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
    .split--sidebar {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    }

    .split--editor {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }

    .split--aside-first {
        grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr);
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
}

.row--between {
    justify-content: space-between;
}

.row--end {
    justify-content: flex-end;
}

.row--top {
    align-items: flex-start;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.full {
    width: 100%;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   5. Skip link, header and navigation
   ========================================================================== */

.skip-link {
    position: absolute;
    left: var(--s-3);
    top: -100px;
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    background: var(--c-surface);
    border: 2px solid var(--c-brand);
    border-radius: var(--r-2);
    font-weight: 600;
    text-decoration: none;
    transition: top 120ms ease-in;
}

.skip-link:focus {
    top: var(--s-3);
}

.site-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    top: 0;
    z-index: 40;
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--header-height);
    padding-block: var(--s-2);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--c-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.brand:hover {
    color: var(--c-brand-dark);
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--r-2);
    background: var(--c-brand);
    color: var(--c-brand-ink);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.brand__word {
    white-space: nowrap;
}

.main-nav {
    flex: 1 1 100%;
    order: 3;
}

.main-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    color: var(--c-ink-soft);
    text-decoration: none;
    font-weight: 550;
    font-size: var(--fs-sm);
    border-bottom: 2px solid transparent;
}

.main-nav__link:hover {
    background: var(--c-surface-alt);
    color: var(--c-ink);
}

.main-nav__link[aria-current="page"] {
    color: var(--c-brand-dark);
    background: var(--c-brand-soft);
    border-bottom-color: var(--c-brand);
}

.nav-count {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 var(--s-1);
    border-radius: var(--r-round);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-line);
    color: var(--c-ink-soft);
    font-size: var(--fs-xs);
    font-weight: 650;
    text-align: center;
}

.main-nav__link[aria-current="page"] .nav-count {
    background: var(--c-surface);
    border-color: var(--c-brand);
    color: var(--c-brand-dark);
}

.header-tools {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-left: auto;
}

.credits-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-round);
    background: var(--c-surface-alt);
    text-decoration: none;
    color: var(--c-ink);
    font-size: var(--fs-sm);
}

.credits-chip:hover {
    border-color: var(--c-brand);
    color: var(--c-brand-dark);
}

.credits-chip__value {
    font-weight: 700;
}

.credits-chip__label {
    color: var(--c-muted);
    font-size: var(--fs-xs);
}

.account-menu {
    position: relative;
}

.account-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    background: var(--c-surface);
    cursor: pointer;
    font-size: var(--fs-sm);
    list-style: none;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.account-menu > summary::after {
    content: "▾";
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.account-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--s-1));
    min-width: 14rem;
    padding: var(--s-2);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-2);
    z-index: 50;
}

.account-menu__name {
    display: block;
    padding: var(--s-2);
    border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: var(--s-2);
    font-size: var(--fs-sm);
}

.account-menu__email {
    display: block;
    color: var(--c-muted);
    font-size: var(--fs-xs);
    word-break: break-all;
}

.account-menu__link,
.account-menu__button {
    display: block;
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border: 0;
    border-radius: var(--r-2);
    background: none;
    color: var(--c-ink);
    text-align: left;
    font: inherit;
    font-size: var(--fs-sm);
    text-decoration: none;
    cursor: pointer;
}

.account-menu__link:hover,
.account-menu__button:hover {
    background: var(--c-surface-alt);
}

@media (min-width: 62rem) {
    .main-nav {
        flex: 0 1 auto;
        order: 0;
    }
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.site-footer {
    margin-top: var(--s-8);
    padding-block: var(--s-6);
    border-top: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: flex-start;
    justify-content: space-between;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: var(--c-ink-soft);
}

/* ==========================================================================
   7. Cards, panels and sections
   ========================================================================== */

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    padding: var(--s-5);
    box-shadow: var(--shadow-1);
}

.card--flush {
    padding: 0;
    overflow: hidden;
}

.card--quiet {
    box-shadow: none;
    background: var(--c-surface-alt);
}

.card__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s-3);
}

.card__head h2,
.card__head h3 {
    margin: 0;
}

.card__body > *:last-child {
    margin-bottom: 0;
}

.card__foot {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line-soft);
}

.card__pad {
    padding: var(--s-4) var(--s-5);
}

.panel {
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    background: var(--c-surface);
    padding: var(--s-4);
}

.panel--muted {
    background: var(--c-surface-alt);
}

.stat {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    padding: var(--s-4);
}

.stat__label {
    display: block;
    color: var(--c-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--s-1);
}

.stat__value {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.1;
}

.stat__meta {
    display: block;
    color: var(--c-muted);
    font-size: var(--fs-sm);
    margin-top: var(--s-1);
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    background: var(--c-surface-alt);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover {
    color: var(--c-ink);
    filter: brightness(0.97);
}

.btn:active {
    filter: brightness(0.93);
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
}

.btn--primary {
    background: var(--c-brand);
    color: var(--c-brand-ink);
    border-color: var(--c-brand);
}

.btn--primary:hover {
    background: var(--c-brand-dark);
    color: var(--c-brand-ink);
}

.btn--secondary {
    background: var(--c-surface);
    border-color: var(--c-line);
    color: var(--c-ink);
}

.btn--secondary:hover {
    border-color: var(--c-brand);
    color: var(--c-brand-dark);
}

.btn--danger {
    background: var(--c-error);
    border-color: var(--c-error);
    color: #fff;
}

.btn--danger:hover {
    background: #8c171a;
    color: #fff;
}

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-brand-dark);
    padding-inline: var(--s-2);
}

.btn--ghost:hover {
    background: var(--c-brand-soft);
}

.btn--link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--c-brand-dark);
    text-decoration: underline;
    font-weight: 550;
}

.btn--sm {
    padding: 0.35rem 0.65rem;
    font-size: var(--fs-xs);
}

.btn--lg {
    padding: 0.75rem 1.4rem;
    font-size: var(--fs-md);
}

.btn--block {
    width: 100%;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}

/* ==========================================================================
   9. Forms
   ========================================================================== */

.field {
    margin-bottom: var(--s-4);
    min-width: 0;
}

.field:last-child {
    margin-bottom: 0;
}

.field > label,
.label {
    display: block;
    margin-bottom: var(--s-1);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--c-ink);
}

.label--inline {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 500;
}

.label__optional {
    font-weight: 400;
    color: var(--c-muted);
    font-size: var(--fs-xs);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
select,
textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1.4;
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

input[type="file"] {
    width: 100%;
    padding: var(--s-2);
    border: 1px dashed var(--c-line);
    border-radius: var(--r-2);
    background: var(--c-surface-alt);
    font-size: var(--fs-sm);
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%),
        linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 1.05rem, calc(100% - 0.75rem) 1.05rem;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

input[disabled],
select[disabled],
textarea[disabled] {
    background: var(--c-surface-alt);
    color: var(--c-muted);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--c-brand);
}

.checkbox,
.radio {
    display: flex;
    gap: var(--s-2);
    align-items: flex-start;
    margin-bottom: var(--s-2);
    font-size: var(--fs-sm);
}

.checkbox input,
.radio input {
    margin-top: 0.2rem;
    flex: none;
}

.checkbox label,
.radio label {
    font-weight: 500;
}

.form-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.form-grid--tight {
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.form-grid--full {
    grid-column: 1 / -1;
}

fieldset {
    margin: 0 0 var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    background: var(--c-surface);
}

legend {
    padding-inline: var(--s-2);
    font-weight: 650;
    font-size: var(--fs-sm);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line-soft);
}

/* ==========================================================================
   10. Field errors and help text
   ========================================================================== */

.help {
    display: block;
    margin-top: var(--s-1);
    color: var(--c-muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.field-error {
    display: block;
    margin-top: var(--s-1);
    color: var(--c-error);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.field-error__list {
    margin: var(--s-1) 0 0;
    padding-left: var(--s-4);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.is-invalid {
    border-color: var(--c-error);
    background: #fffafa;
}

/* ==========================================================================
   11. Alerts, banners and notices
   ========================================================================== */

.alert {
    position: relative;
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
    border: 1px solid var(--c-line);
    border-left-width: 4px;
    border-radius: var(--r-2);
    background: var(--c-surface);
}

.alert__icon {
    flex: none;
    font-weight: 700;
    line-height: 1.4;
}

.alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert__body p:last-child {
    margin-bottom: 0;
}

.alert__title {
    display: block;
    font-weight: 700;
    margin-bottom: var(--s-1);
}

.alert__close {
    flex: none;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--fs-md);
    line-height: 1;
    padding: var(--s-1);
    border-radius: var(--r-1);
}

.alert--success {
    background: var(--c-success-soft);
    border-color: var(--c-success-line);
    border-left-color: var(--c-success);
    color: #0d4626;
}

.alert--error {
    background: var(--c-error-soft);
    border-color: var(--c-error-line);
    border-left-color: var(--c-error);
    color: #7d1518;
}

.alert--warning {
    background: var(--c-warning-soft);
    border-color: var(--c-warning-line);
    border-left-color: var(--c-warning);
    color: #6e4006;
}

.alert--info {
    background: var(--c-info-soft);
    border-color: var(--c-info-line);
    border-left-color: var(--c-info);
    color: #0c4258;
}

/* Provider-honesty notices: deliberately loud, never a footnote. */
.notice-stack {
    margin-bottom: var(--s-5);
}

.notice {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    border: 2px solid var(--c-warning-line);
    border-left-width: 6px;
    border-left-color: var(--c-warning);
    border-radius: var(--r-2);
    background: var(--c-warning-soft);
    color: #6e4006;
}

.notice__flag {
    flex: none;
    padding: 0 var(--s-2);
    border-radius: var(--r-1);
    background: var(--c-warning);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.notice__body {
    min-width: 0;
}

.notice__title {
    display: block;
    font-weight: 700;
    margin-bottom: var(--s-1);
}

.notice__body p:last-child {
    margin-bottom: 0;
}

.notice--sample {
    border-color: var(--c-critical-line);
    border-left-color: var(--c-critical);
    background: var(--c-critical-soft);
    color: #6f1013;
}

.notice--sample .notice__flag {
    background: var(--c-critical);
}

.notice--banner {
    justify-content: center;
    text-align: center;
}

.disclaimer {
    margin: var(--s-3) 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-info-line);
    border-left: 4px solid var(--c-info);
    border-radius: var(--r-2);
    background: var(--c-info-soft);
    color: #0c4258;
    font-size: var(--fs-sm);
}

.disclaimer__title {
    display: block;
    font-weight: 700;
    margin-bottom: var(--s-1);
}

.disclaimer p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   12. Badges and pills
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-round);
    background: var(--c-surface-alt);
    color: var(--c-ink-soft);
    font-size: var(--fs-xs);
    font-weight: 650;
    line-height: 1.6;
    white-space: nowrap;
}

.badge--brand {
    background: var(--c-brand-soft);
    border-color: #b9c9f5;
    color: var(--c-brand-dark);
}

.badge--success,
.badge--good {
    background: var(--c-success-soft);
    border-color: var(--c-success-line);
    color: var(--c-success);
}

.badge--warning {
    background: var(--c-warning-soft);
    border-color: var(--c-warning-line);
    color: var(--c-warning);
}

.badge--error,
.badge--critical {
    background: var(--c-critical-soft);
    border-color: var(--c-critical-line);
    color: var(--c-critical);
}

.badge--info {
    background: var(--c-info-soft);
    border-color: var(--c-info-line);
    color: var(--c-info);
}

.badge--muted {
    background: var(--c-surface-alt);
    color: var(--c-muted);
}

/* Application pipeline statuses */
.status {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: var(--r-round);
    border: 1px solid var(--c-line);
    font-size: var(--fs-xs);
    font-weight: 650;
    white-space: nowrap;
}

.status--saved      { background: #eef1f6; border-color: #ccd4e0; color: #3d4655; }
.status--preparing  { background: #e9eefc; border-color: #bccbf3; color: #1c3f9c; }
.status--applied    { background: #e5f1f7; border-color: #a8cede; color: #10516e; }
.status--interviewing { background: #fdf1dd; border-color: #eccb93; color: #8a5108; }
.status--offer      { background: #e4f4ea; border-color: #a9d8bd; color: #14663a; }
.status--rejected   { background: #fbe9e9; border-color: #eeb3b4; color: #a41d20; }
.status--withdrawn  { background: #f1f3f7; border-color: #d9dee6; color: #5c6675; }

/* Tailoring / generic job statuses */
.status--pending,
.status--processing { background: #e9eefc; border-color: #bccbf3; color: #1c3f9c; }
.status--ready      { background: #e4f4ea; border-color: #a9d8bd; color: #14663a; }
.status--failed     { background: #fbe9e9; border-color: #eeb3b4; color: #a41d20; }

/* ==========================================================================
   13. Tables
   ========================================================================== */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    background: var(--c-surface);
}

table.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

table.table caption {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    color: var(--c-muted);
    font-size: var(--fs-xs);
    border-bottom: 1px solid var(--c-line-soft);
}

table.table th,
table.table td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line-soft);
}

table.table th {
    background: var(--c-surface-alt);
    font-weight: 650;
    color: var(--c-ink-soft);
    white-space: nowrap;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

table.table tbody tr:last-child td {
    border-bottom: 0;
}

table.table tbody tr:hover {
    background: #fafbfd;
}

.table--compact th,
.table--compact td {
    padding: var(--s-2) var(--s-3);
}

.numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.delta-positive {
    color: var(--c-success);
    font-weight: 650;
}

.delta-negative {
    color: var(--c-error);
    font-weight: 650;
}

/* ==========================================================================
   14. Tabs
   ========================================================================== */

.tabs {
    margin-bottom: var(--s-5);
}

.tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: 0 0 var(--s-4);
    padding: 0;
    border-bottom: 1px solid var(--c-line);
    list-style: none;
}

.tabs__tab {
    padding: var(--s-2) var(--s-4);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--r-2) var(--r-2) 0 0;
    background: none;
    color: var(--c-ink-soft);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: -1px;
}

.tabs__tab:hover {
    background: var(--c-surface-alt);
    color: var(--c-ink);
}

.tabs__tab[aria-selected="true"],
.tabs__tab.is-active {
    background: var(--c-surface);
    border-color: var(--c-line);
    border-bottom-color: var(--c-surface);
    color: var(--c-brand-dark);
}

.tabs__panel[hidden] {
    display: none;
}

/* ==========================================================================
   15. Empty state
   ========================================================================== */

.empty {
    padding: var(--s-6) var(--s-5);
    border: 1px dashed var(--c-line);
    border-radius: var(--r-3);
    background: var(--c-surface);
    text-align: center;
}

.empty__icon {
    font-size: var(--fs-2xl);
    display: block;
    margin-bottom: var(--s-2);
}

.empty__title {
    margin-bottom: var(--s-2);
    font-size: var(--fs-lg);
}

.empty__text {
    max-width: 44ch;
    margin: 0 auto var(--s-4);
    color: var(--c-muted);
}

/* ==========================================================================
   16. Score meter and progress
   ========================================================================== */

.score {
    display: flex;
    gap: var(--s-4);
    align-items: center;
    flex-wrap: wrap;
}

.score__dial {
    --score: 0;
    flex: none;
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background:
        conic-gradient(var(--score-colour, var(--c-brand)) calc(var(--score) * 1%), var(--c-line-soft) 0);
    position: relative;
}

.score__dial::after {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border-radius: 50%;
    background: var(--c-surface);
}

.score__value {
    position: relative;
    z-index: 1;
    font-size: var(--fs-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.score__value small {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-muted);
}

.score__body {
    min-width: 12rem;
    flex: 1 1 14rem;
}

.score__label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--s-1);
}

.score__note {
    margin: 0;
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.score--high .score__dial { --score-colour: var(--c-success); }
.score--mid .score__dial { --score-colour: #b06a10; }
.score--low .score__dial { --score-colour: var(--c-error); }

.meter {
    margin-bottom: var(--s-3);
}

.meter__head {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-1);
}

.meter__label {
    font-weight: 600;
}

.meter__value {
    font-variant-numeric: tabular-nums;
    color: var(--c-muted);
}

.meter__track {
    height: 0.5rem;
    border-radius: var(--r-round);
    background: var(--c-line-soft);
    overflow: hidden;
}

.meter__fill {
    display: block;
    height: 100%;
    background: var(--c-brand);
    border-radius: var(--r-round);
}

.meter--high .meter__fill { background: var(--c-success); }
.meter--mid .meter__fill { background: #b06a10; }
.meter--low .meter__fill { background: var(--c-error); }

.progress {
    height: 0.6rem;
    border-radius: var(--r-round);
    background: var(--c-line-soft);
    overflow: hidden;
}

.progress__bar {
    display: block;
    height: 100%;
    background: var(--c-brand);
}

/* ==========================================================================
   17. Definition list
   ========================================================================== */

.dl {
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    gap: var(--s-2) var(--s-4);
    margin: 0;
    font-size: var(--fs-sm);
}

.dl dt {
    color: var(--c-muted);
    font-weight: 600;
}

.dl dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dl--stacked {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
}

.dl--stacked dd {
    margin-bottom: var(--s-3);
}

/* ==========================================================================
   18. Pagination
   ========================================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.pagination__info {
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.pagination__links {
    display: flex;
    gap: var(--s-2);
}

/* ==========================================================================
   19. Checklist
   ========================================================================== */

.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist__item {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--c-line-soft);
}

.checklist__item:last-child {
    border-bottom: 0;
}

.checklist__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    border: 2px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.checklist__item--done .checklist__mark {
    background: var(--c-success);
    border-color: var(--c-success);
    color: #fff;
}

.checklist__body {
    flex: 1 1 auto;
    min-width: 0;
}

.checklist__label {
    display: block;
    font-weight: 600;
}

.checklist__item--done .checklist__label {
    color: var(--c-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.checklist__hint {
    display: block;
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.checklist__action {
    flex: none;
    align-self: center;
}

/* ==========================================================================
   20. Auth / minimal card layout
   ========================================================================== */

.minimal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--c-bg);
}

.minimal__bar {
    padding-block: var(--s-4);
}

.minimal__main {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--s-4) var(--s-4) var(--s-7);
}

.minimal__card {
    width: 100%;
    max-width: 27rem;
    padding: var(--s-6);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-1);
}

.minimal__card--wide {
    max-width: 34rem;
}

.minimal__title {
    margin-bottom: var(--s-2);
    font-size: var(--fs-2xl);
}

.minimal__sub {
    color: var(--c-muted);
    margin-bottom: var(--s-5);
}

.minimal__foot {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line-soft);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.auth-alt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-2);
    margin-top: var(--s-4);
    font-size: var(--fs-sm);
}

/* ==========================================================================
   21. Resume document
   --------------------------------------------------------------------------
   Class names are emitted by app/Services/Resume/ResumeRenderer.php::preview().
   Do not rename them here without changing the renderer.
   ========================================================================== */

.resume-doc {
    --resume-accent: #1f2937;
    background: #fff;
    color: #1f2937;
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    padding: 2.25rem 2.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
    max-width: 60rem;
    margin-inline: auto;
}

.resume-doc .resume-header {
    border-bottom: 2px solid var(--resume-accent);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
}

.resume-doc .resume-name {
    margin: 0 0 var(--s-1);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--resume-accent);
}

.resume-doc .resume-headline {
    margin: 0 0 var(--s-1);
    font-size: 1rem;
    color: #4b5563;
    font-weight: 500;
}

.resume-doc .resume-contact {
    margin: 0;
    font-size: 0.8125rem;
    color: #4b5563;
    overflow-wrap: anywhere;
}

.resume-doc .resume-section {
    margin-bottom: var(--s-5);
}

.resume-doc .resume-section-title {
    margin: 0 0 var(--s-2);
    padding-bottom: 2px;
    border-bottom: 1px solid #d1d5db;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--resume-accent);
}

.resume-doc .resume-section-body > *:last-child {
    margin-bottom: 0;
}

.resume-doc .resume-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.resume-doc .resume-skills li {
    padding: 0.1rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: var(--r-round);
    background: #f9fafb;
    font-size: 0.8125rem;
}

.resume-doc .bullets {
    margin: 0.35rem 0 0;
    padding-left: 1.15rem;
    list-style: disc;
}

.resume-doc .bullets li {
    margin-bottom: 0.2rem;
}

.resume-doc .entry {
    margin-bottom: var(--s-4);
}

.resume-doc .entry:last-child {
    margin-bottom: 0;
}

.resume-doc .entry-head {
    margin-bottom: 0.1rem;
}

.resume-doc .entry-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #111827;
}

.resume-doc .entry-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: #4b5563;
}

.resume-doc .entry-summary {
    margin: 0.25rem 0 0;
}

.resume-doc .entry-url {
    font-weight: 400;
    font-size: 0.8125rem;
    color: #6b7280;
}

.resume-doc .summary-text {
    margin: 0;
}

.resume-doc .resume-empty {
    margin: 0;
    color: #6b7280;
    font-style: italic;
}

/* Template variants */
.resume-doc--classic { --resume-accent: #1f2937; }

.resume-doc--modern {
    --resume-accent: #1d4ed8;
    line-height: 1.4;
}

.resume-doc--modern .resume-header {
    border-bottom-width: 3px;
}

.resume-doc--compact {
    --resume-accent: #374151;
    font-size: 0.8125rem;
    line-height: 1.35;
    padding: 1.75rem 2rem;
}

.resume-doc--compact .resume-section {
    margin-bottom: var(--s-4);
}

.resume-doc--compact .entry {
    margin-bottom: var(--s-3);
}

/* Preview frame wrapper */
.preview-frame {
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    background: var(--c-surface-alt);
    padding: var(--s-4);
    overflow: auto;
    max-height: 46rem;
}

.preview-frame iframe {
    width: 100%;
    min-height: 40rem;
    border: 0;
    background: #fff;
}

/* ==========================================================================
   22. Editor layout and repeatable blocks
   ========================================================================== */

.editor-section {
    margin-bottom: var(--s-5);
    padding: var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    background: var(--c-surface);
}

.editor-section > h3 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: baseline;
    justify-content: space-between;
}

.editor-section__hint {
    color: var(--c-muted);
    font-size: var(--fs-sm);
    margin-top: calc(var(--s-1) * -1);
    margin-bottom: var(--s-3);
}

.repeat {
    margin: 0 0 var(--s-3);
    padding: 0;
    list-style: none;
}

.repeat__item {
    margin-bottom: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-brand-soft);
    border-radius: var(--r-2);
    background: var(--c-surface-alt);
}

.repeat__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
}

.repeat__index {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
}

.repeat__actions {
    display: flex;
    gap: var(--s-2);
}

.repeat-empty {
    padding: var(--s-3);
    border: 1px dashed var(--c-line);
    border-radius: var(--r-2);
    color: var(--c-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.skills-inputs {
    display: grid;
    gap: var(--s-2);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: var(--s-5);
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-2);
}

/* ==========================================================================
   23. Job cards and match breakdown
   ========================================================================== */

.job-card {
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-1);
}

.job-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: flex-start;
    justify-content: space-between;
}

.job-card__title {
    margin: 0 0 var(--s-1);
    font-size: var(--fs-lg);
}

.job-card__title a {
    text-decoration: none;
}

.job-card__title a:hover {
    text-decoration: underline;
}

.job-card__meta {
    margin: 0;
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.job-card__score {
    flex: none;
    text-align: right;
    min-width: 8rem;
}

.job-card__score-value {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.job-card__score-label {
    display: block;
    color: var(--c-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.job-card__body {
    margin-top: var(--s-3);
}

.job-card__excerpt {
    color: var(--c-ink-soft);
    margin-bottom: var(--s-3);
}

.job-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line-soft);
}

.subscores {
    display: grid;
    gap: var(--s-2);
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin: var(--s-3) 0;
    padding: 0;
    list-style: none;
}

.subscore {
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-2);
    background: var(--c-surface-alt);
    font-size: var(--fs-xs);
}

.subscore__label {
    display: block;
    color: var(--c-muted);
    text-transform: capitalize;
}

.subscore__value {
    font-weight: 700;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}

.reason-list {
    margin: 0 0 var(--s-3);
    padding-left: var(--s-5);
    font-size: var(--fs-sm);
}

.reason-list li {
    margin-bottom: var(--s-1);
}

.reason-list--strengths li::marker {
    color: var(--c-success);
}

.reason-list--gaps li::marker {
    color: var(--c-warning);
}

.sample-ribbon {
    display: block;
    padding: var(--s-2) var(--s-4);
    background: var(--c-critical);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    border-radius: var(--r-2) var(--r-2) 0 0;
}

/* ==========================================================================
   24. Billing
   ========================================================================== */

.pricing-grid {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    align-items: stretch;
}

.pack {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--s-5);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-1);
}

.pack--recommended {
    border: 2px solid var(--c-brand);
    box-shadow: var(--shadow-2);
}

.pack__flag {
    position: absolute;
    top: -0.75rem;
    left: var(--s-5);
    padding: 0.1rem var(--s-3);
    border-radius: var(--r-round);
    background: var(--c-brand);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pack__name {
    margin: 0 0 var(--s-1);
    font-size: var(--fs-lg);
}

.pack__tagline {
    color: var(--c-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-3);
}

.pack__price {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--s-1);
}

.pack__price-note {
    color: var(--c-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
}

.pack__highlights {
    margin: 0 0 var(--s-5);
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.pack__highlights li {
    padding-left: 1.3rem;
    position: relative;
    margin-bottom: var(--s-2);
}

.pack__highlights li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-success);
    font-weight: 700;
}

.pack__cta {
    margin-top: auto;
}

.ledger-delta {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.simulate-warning {
    padding: var(--s-4);
    border: 3px solid var(--c-critical);
    border-radius: var(--r-3);
    background: var(--c-critical-soft);
    color: #6f1013;
    margin-bottom: var(--s-5);
}

.simulate-warning h2 {
    color: inherit;
    margin-top: 0;
}

/* ==========================================================================
   25. Print styles
   --------------------------------------------------------------------------
   Printing a page should produce the resume and nothing else.
   ========================================================================== */

@media print {
    :root {
        --c-bg: #fff;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 10.5pt;
    }

    .skip-link,
    .site-header,
    .site-footer,
    .tabs__list,
    .btn,
    .btn-row,
    .form-actions,
    .alert,
    .notice,
    .notice-stack,
    .sticky-actions,
    .page-head__actions,
    .preview-frame > .preview-toolbar,
    .no-print {
        display: none !important;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    .container,
    .container--wide,
    .container--narrow {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    .page {
        padding: 0;
    }

    .card,
    .panel {
        border: 0;
        box-shadow: none;
        padding: 0;
        background: none;
    }

    .resume-doc {
        border: 0;
        border-radius: 0;
        padding: 0;
        max-width: none;
        font-size: 10pt;
        break-inside: avoid;
    }

    .resume-doc .resume-section,
    .resume-doc .entry {
        break-inside: avoid;
    }

    /* When a page contains a resume, print only the resume. */
    body.print-resume-only .site-header,
    body.print-resume-only .site-footer,
    body.print-resume-only .page-head,
    body.print-resume-only .tabs,
    body.print-resume-only .print-hide {
        display: none !important;
    }

    body.print-resume-only .resume-print-target {
        display: block !important;
    }

    body.print-resume-only .resume-print-target * {
        visibility: visible;
    }
}

/* ==========================================================================
   26. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Misc
   ========================================================================== */

.is-hidden {
    display: none !important;
}

.sr-only-focusable:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.divider {
    border-top: 1px solid var(--c-line);
    margin: var(--s-5) 0;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.keyword-chip {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-round);
    background: var(--c-surface-alt);
    font-size: var(--fs-xs);
    color: var(--c-ink-soft);
}

.keyword-chip--matched {
    background: var(--c-success-soft);
    border-color: var(--c-success-line);
    color: var(--c-success);
}

.keyword-chip--missing {
    background: var(--c-warning-soft);
    border-color: var(--c-warning-line);
    color: var(--c-warning);
}

.finding {
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    border: 1px solid var(--c-line);
    border-left-width: 4px;
    border-radius: var(--r-2);
    background: var(--c-surface);
}

.finding--critical { border-left-color: var(--c-critical); background: var(--c-critical-soft); }
.finding--warning  { border-left-color: var(--c-warning); background: var(--c-warning-soft); }
.finding--info     { border-left-color: var(--c-info); background: var(--c-info-soft); }
.finding--good     { border-left-color: var(--c-success); background: var(--c-success-soft); }

.finding__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: baseline;
    justify-content: space-between;
}

.finding__title {
    margin: 0;
    font-size: var(--fs-base);
}

.finding__message {
    margin: var(--s-2) 0;
}

.finding__suggestion {
    margin: 0;
    font-size: var(--fs-sm);
}

.severity-group {
    margin-bottom: var(--s-5);
}

.severity-group__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-ink-soft);
}

.danger-zone {
    border: 2px solid var(--c-error-line);
    border-radius: var(--r-3);
    background: #fffafa;
    padding: var(--s-5);
}

.danger-zone h2,
.danger-zone h3 {
    color: var(--c-error);
    margin-top: 0;
}

.usage-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.usage-bar__track {
    flex: 1 1 auto;
    height: 0.55rem;
    border-radius: var(--r-round);
    background: var(--c-line-soft);
    overflow: hidden;
}

.usage-bar__fill {
    display: block;
    height: 100%;
    background: var(--c-brand);
}

.usage-bar__fill--low {
    background: var(--c-warning);
}

.kbd-hint {
    display: inline-block;
    padding: 0 0.3rem;
    border: 1px solid var(--c-line);
    border-bottom-width: 2px;
    border-radius: var(--r-1);
    background: var(--c-surface-alt);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}

.memory-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.memory-list li {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-line-soft);
}

.memory-list li:last-child {
    border-bottom: 0;
}

.mt-2 {
    margin-top: var(--s-2);
}