/* Typography - Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500&display=swap');

/* Breakpoints: three, max-width only, so a width belongs to exactly one
   of them and the narrower block always wins by coming later in the file:
   (max-width: 1024px) tablet, (max-width: 768px) small tablet and phone,
   (max-width: 640px) narrow phone. No min-width query anywhere (row 34). */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Present-or-absent is the hidden attribute (row 28). !important because a
   component rule that sets its own display would otherwise show an element
   the markup says is not there. */
[hidden] {
    display: none !important;
}

/* Inline SVG icons (row 21): the icon() macro in macros/icons.jinja renders
   this class. One em square so an icon matches the text beside it, and early
   in the file so a component rule that sizes its own svg still wins. */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

:root {
    --brand-navy: #060f2e;
    --brand-mint: #58f8cf;
    --primary-color: #0ea58d;
    --primary-light: #2dc1a7;
    --primary-dark: #0a7d6b;
    --secondary-color: #060f2e;
    --secondary-light: #1c2f67;
    --secondary-dark: #040922;
    --success-color: #10b981;
    --success-light: #d1fae5;
    --success-dark: #047857;
    --danger-color: #ef4444;
    --danger-light: #fee2e2;
    --danger-dark: #dc2626;
    --warning-color: #f59e0b;
    --warning-light: #fef3c7;
    --warning-dark: #d97706;
    --info-color: #0ea58d;
    --info-light: #e6fff7;
    --info-dark: #0b886e;
    --text-color: #102040;
    --text-light: #3b4f78;
    --text-muted: #64759b;
    --bg-color: #FFFFFF;
    --bg-light: #f4f7ff;
    --bg-lighter: #eaf0ff;
    --bg-dark: #dbe4fb;
    --border-color: #ced8f1;
    --border-light: #e2e8f8;
    --border-dark: #aab9df;
    --link-color: #0e2b67;
    --link-visited-color: #17397f;
    --link-hover-color: #0b1a47;
    /* Status surfaces: the background, border and text of an alert or a
       notice box. The -light / -color / -dark entries above are the tint,
       fill and accent of a hue; these four triplets are the one surface
       that has to stay readable in both themes, so they carry their own
       dark values rather than a .dark-mode override per alert. */
    --success-bg: #d1fae5;
    --success-border: #10b981;
    --success-text: #065f46;
    --danger-bg: #fee2e2;
    --danger-border: #ef4444;
    --danger-text: #991b1b;
    --warning-bg: #fef3c7;
    --warning-border: #f59e0b;
    --warning-text: #92400e;
    --info-bg: #dbeafe;
    --info-border: #2563eb;
    --info-text: #1e40af;
    /* Dashboard stat pills: the tinted square behind a metric's icon, named
       for the tone the metric carries rather than the colour it happens to
       be. */
    --stat-info-bg: #dbeafe;
    --stat-info-fg: #2563eb;
    --stat-positive-bg: #d1fae5;
    --stat-positive-fg: #059669;
    --stat-accent-bg: #e9d5ff;
    --stat-accent-fg: #9333ea;
    --stat-attention-bg: #fed7aa;
    --stat-attention-fg: #ea580c;
    /* The brand mark of an external account provider: a fixed colour that
       belongs to LinkedIn, not to either theme. */
    --brand-linkedin: #0077b5;
    /* Text drawn on a saturated fill (a provider tile, a filled button). */
    --text-on-accent: #ffffff;
    /* Translucent brand border, and the sheen a loading skeleton sweeps. */
    --border-accent: rgba(14, 165, 141, 0.35);
    --shimmer-highlight: rgba(255, 255, 255, 0.2);
    /* Rings: the focus outline, and the two an invalid field wears. */
    --focus-ring: 0 0 0 3px rgba(14, 165, 141, 0.2);
    --error-ring: 0 0 0 1px rgba(239, 68, 68, 0.35);
    --error-ring-focus: 0 0 0 3px rgba(239, 68, 68, 0.15);
    /* A dropdown sits close to the control it opened from, so it wears a
       tighter shadow than the --shadow-* scale above. */
    --shadow-dropdown: 0 4px 12px rgba(6, 15, 46, 0.1);
    /* The hover of a filled danger button. --danger-dark is the dark
       palette's *lighter* red, so hovering with it would lift the fill away
       from the white on top of it; this one darkens in both themes. */
    --danger-hover: #dc2626;
    /* A translucent wash painted over the brand fill, which is mint in both
       themes, so the wash is the same in both. */
    --brand-wash: rgba(6, 15, 46, 0.12);
    --shadow: 0 2px 6px rgba(6, 15, 46, 0.08);
    --shadow-md: 0 10px 20px rgba(6, 15, 46, 0.12);
    --shadow-lg: 0 18px 35px rgba(6, 15, 46, 0.16);
    --shadow-xl: 0 24px 50px rgba(6, 15, 46, 0.2);
}

/* Dark Mode Colors */
.dark-mode {
    --brand-navy: #060f2e;
    --brand-mint: #58f8cf;
    --primary-color: #58f8cf;
    --primary-light: #7ffbdb;
    --primary-dark: #38d8b5;
    --secondary-color: #060f2e;
    --secondary-light: #122357;
    --secondary-dark: #02071c;
    --success-color: #10b981;
    --success-light: #064e3b;
    --success-dark: #6ee7b7;
    --danger-color: #f87171;
    --danger-light: #7f1d1d;
    --danger-dark: #fca5a5;
    --warning-color: #fbbf24;
    --warning-light: #78350f;
    --warning-dark: #fcd34d;
    --info-color: #58f8cf;
    --info-light: #102456;
    --info-dark: #86ffe0;
    --text-color: #ecf3ff;
    --text-light: #becced;
    --text-muted: #9aabcf;
    --bg-color: #060f2e;
    --bg-light: #0d1a44;
    --bg-lighter: #16285f;
    --bg-dark: #040a20;
    --border-color: #253a7c;
    --border-light: #1a2d64;
    --border-dark: #314992;
    --link-color: #58f8cf;
    --link-visited-color: #7ffbdb;
    --link-hover-color: #b0ffe9;
    --success-bg: #064e3b;
    --success-border: #10b981;
    --success-text: #6ee7b7;
    --danger-bg: #7f1d1d;
    --danger-border: #f87171;
    --danger-text: #fca5a5;
    --warning-bg: #78350f;
    --warning-border: #fbbf24;
    --warning-text: #fcd34d;
    --info-bg: #102456;
    --info-border: #58f8cf;
    --info-text: #86ffe0;
    --stat-info-bg: #1e3a8a;
    --stat-info-fg: #bfdbfe;
    --stat-positive-bg: #064e3b;
    --stat-positive-fg: #6ee7b7;
    --stat-accent-bg: #4c1d95;
    --stat-accent-fg: #d8b4fe;
    --stat-attention-bg: #7c2d12;
    --stat-attention-fg: #fdba74;
    --brand-linkedin: #0077b5;
    --text-on-accent: #ffffff;
    --border-accent: rgba(88, 248, 207, 0.35);
    --shimmer-highlight: rgba(255, 255, 255, 0.2);
    --focus-ring: 0 0 0 3px rgba(88, 248, 207, 0.2);
    --error-ring: 0 0 0 1px rgba(248, 113, 113, 0.35);
    --error-ring-focus: 0 0 0 3px rgba(248, 113, 113, 0.15);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.35);
    --danger-hover: #ef4444;
    --brand-wash: rgba(6, 15, 46, 0.12);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 22px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 28px 56px rgba(0, 0, 0, 0.58);
}

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-light);
    letter-spacing: 0.01em;
}

a:not(.btn):link {
    color: var(--link-color);
}

a:not(.btn):visited {
    color: var(--link-visited-color);
}

a:not(.btn):hover {
    color: var(--link-hover-color);
}

/* Headings use Montserrat */
h1, h2, h3, h4, h5, h6,
.brand-text,
.nav-brand,
.welcome-section h1,
.auth-card h1,
.card h2,
.card h3,
.section-card h2,
.stat-info .stat-value {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

h1, .brand-text {
    font-weight: 700; /* Bold */
}

h2, h3 {
    font-weight: 600; /* Semi-Bold */
}

h4, h5, h6 {
    font-weight: 600; /* Semi-Bold */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-lighter);
}

::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Dark Mode Scrollbar */
.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

/* Header and Navigation */
header {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-brand .brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    line-height: 1;
    text-decoration: none;
    color: inherit;
}

.nav-brand .brand-logo {
    display: block;
    height: 2.25rem;
    width: auto;
    object-fit: contain;
}

.nav-brand .brand-wordmark {
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--primary-color);
}

/* The row folds onto a second line when it does not fit beside the brand,
   at any width: a signed-in row is wider than a phone, and a recruiter's or
   a staff user's is wider than many desktop windows. The lines keep to the
   right edge, where the single line sits. min-width: 0 lets the row shrink
   below its content's own minimum, so the row gives way and never the page.
   A row that fits on one line is laid out exactly as it was without the
   wrap. */
.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem 1.2rem;
    min-width: 0;
}

.nav-links a,
.nav-links a:visited {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    font-size: 0.95rem;
}

.nav-links a:hover {
    color: var(--primary-color);
}


/* Main Content */
main {
    max-width: 1280px;
    margin: 2rem auto;
    padding: 0 2rem;
    min-height: calc(100vh - 200px);
}

/* Messages/Alerts */
.messages {
    margin-bottom: 1.5rem;
}

.alert {
    padding: 1rem 1.5rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.alert-error {
    background-color: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--danger-border);
}

.alert-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.alert-info {
    background-color: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}

/* Footer */
footer {
    background-color: var(--bg-dark);
    border-top: 1px solid var(--border-color);
    text-align: center;
    padding: 2rem;
    margin-top: 4rem;
    color: var(--text-muted);
}

/* Utility Classes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary,
.btn-primary:visited {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--secondary-color);
    font-weight: 600;
}

a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active {
    color: var(--secondary-color);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-secondary,
.btn-secondary:visited {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

a.btn-secondary:link,
a.btn-secondary:visited,
a.btn-secondary:hover,
a.btn-secondary:active {
    color: var(--text-color);
}

.btn-secondary:hover {
    background-color: var(--bg-light);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* The button that removes something. It was named in twelve places and
   styled in none, so a delete read as an ordinary button (row 33). */
.btn-danger,
.btn-danger:visited {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--text-on-accent);
}

a.btn-danger:link,
a.btn-danger:visited,
a.btn-danger:hover,
a.btn-danger:active {
    color: var(--text-on-accent);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-danger:active:not(:disabled) {
    transform: translateY(0);
}

/* Avatar Utilities */
.avatar-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.avatar-md {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.avatar-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.avatar-xl {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.card {
    background-color: var(--bg-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}

.card-lg {
    padding: 2rem;
}

.card-hover {
    transition: all 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

/* A released legal text rendered as is (templates/legal/fcra_summary.jinja,
   and the Terms and Privacy page, templates/legal/document.jinja): the
   reset zeroes list padding and block margins, so the text's own headings,
   paragraphs, nested lists (bulleted or numbered) and table get them back
   here. A nested ul indents again from its li. Ruled table cells read
   top-down like the source. */
.legal-text h1,
.legal-text h2,
.legal-text h3 {
    margin: 0.75rem 0;
}

.legal-text p + p,
.legal-text ul + p,
.legal-text p + ul,
.legal-text ol + p,
.legal-text p + ol {
    margin-top: 0.75rem;
}

.legal-text ul,
.legal-text ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.legal-text li + li {
    margin-top: 0.5rem;
}

.legal-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.legal-text th,
.legal-text td {
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

/* A link into such a text, such as /terms/#arbitration from the arbitration
   call-out (templates/legal/partials/arbitration_callout.jinja): the header
   is sticky and folds onto two or three lines on a phone, so a target
   scrolled to the top of the window would sit behind it. Any element inside
   the text that carries an id stops below the tallest folded header instead
   (a staff user's at 390px wide, about 9.2rem when this was written). */
.legal-text [id] {
    scroll-margin-top: 12rem;
}

/* Homepage */
.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
    gap: 1.5rem;
    padding: 2.25rem;
}

.home-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.home-hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    max-width: 18ch;
}

.home-hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 52ch;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.home-hero-proof-list {
    margin: 1.5rem 0 0;
    padding-left: 1.25rem;
    color: var(--text-light);
}

.home-hero-proof-list li + li {
    margin-top: 0.45rem;
}

.home-proof-panel {
    margin: 0;
    background-color: var(--bg-light);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.home-proof-logo {
    display: block;
    width: 5.5rem;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 1.25rem;
    padding: 0.25rem 0;
}

.home-proof-panel h2 {
    margin-bottom: 0.6rem;
}

.home-proof-panel p {
    color: var(--text-light);
    margin-bottom: 1.2rem;
}

.home-proof-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.home-metric-card {
    margin-bottom: 0;
}

.home-metric-value {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.home-metric-label {
    color: var(--text-light);
    font-size: 0.95rem;
}

.home-story-card h2 {
    margin-bottom: 0.85rem;
}

.home-story-copy {
    white-space: pre-line;
    color: var(--text-light);
}

.home-no-match-card {
    margin-bottom: 2rem;
}

.home-no-match-card h2 {
    margin-bottom: 0.75rem;
}

.about-story-shell h1 {
    font-size: clamp(2rem, 3.1vw, 2.65rem);
    margin-bottom: 0.85rem;
    text-wrap: balance;
    color: var(--primary-color);
}

.about-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 62ch;
}

.about-story {
    padding: 2rem;
}

.about-story-shell {
    border-color: var(--border-accent);
}

.about-story-copy {
    color: var(--text-light);
    line-height: 1.7;
    max-width: none;
    font-size: 1.03rem;
}

.about-story-copy + .about-story-copy {
    margin-top: 1rem;
}

.about-story-lede {
    color: var(--text-color);
    font-size: 1.1rem;
    line-height: 1.75;
}

.about-story-emphasis {
    color: var(--primary-color);
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.65;
}

.about-cta-block {
    text-align: center;
}

.about-cta-copy {
    margin-bottom: 1rem;
}

.about-video-placeholder h2 {
    margin-bottom: 0.75rem;
}

.about-video-shell {
    margin-top: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-light);
}

.about-video-center p {
    margin: 0.5rem 0 0.25rem;
}

.about-video-center small {
    color: var(--text-muted);
}

.about-video-play {
    display: inline-block;
    font-size: 1.9rem;
    color: var(--primary-color);
}

.about-testimonials-section {
    margin-top: 1.5rem;
}

.about-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.about-testimonial-card {
    margin-bottom: 0;
}

.about-testimonial-quote {
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.about-testimonial-name {
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.about-testimonial-company {
    color: var(--text-muted);
    margin-bottom: 0;
}

.about-logos-section {
    margin-top: 1.5rem;
}

.about-logos-subtitle {
    color: var(--text-light);
}

.about-logo-marquee {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    overflow: hidden;
    flex-wrap: wrap;
}

.about-logo-chip {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.years-months {
    display: flex;
    gap: 0.5rem;
}

.posting-fact-label {
    color: var(--text-light);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.posting-fact-value {
    margin-bottom: 0;
    font-weight: 600;
}

/* How SoloTrueJobs.com works (L6): one column per profile, stacked on a
   phone (the 768 block below). */
.how-it-works-intro {
    border-color: var(--border-accent);
}

.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.how-it-works-column {
    margin-bottom: 0;
}

.how-it-works-column h2 {
    margin-bottom: 0.75rem;
}

.how-it-works-steps {
    padding-left: 1.2rem;
    color: var(--text-light);
    line-height: 1.6;
}

.how-it-works-steps li + li {
    margin-top: 0.6rem;
}

.home-section-header {
    margin-bottom: 1rem;
}

.home-section-header p {
    color: var(--text-light);
}

.home-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.home-audience-grid .card {
    margin-bottom: 0;
}

.home-audience-grid h3 {
    margin-bottom: 0.5rem;
}

.home-audience-grid p {
    color: var(--text-light);
}

.home-final-cta {
    text-align: center;
    margin-top: 1.75rem;
}

.home-final-cta h2 {
    margin-bottom: 0.75rem;
}

.home-final-cta p {
    max-width: 60ch;
    margin: 0 auto;
    color: var(--text-light);
}

.home-final-cta .home-hero-actions {
    justify-content: center;
}

/* Pricing page */
.pricing-hero {
    padding: 2.25rem;
}

.pricing-hero h1 {
    margin-bottom: 0.75rem;
}

.pricing-subtitle {
    font-size: 1.05rem;
    color: var(--text-light);
    max-width: 64ch;
}

.pricing-meta-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.pricing-meta-item {
    margin-bottom: 0;
}

.pricing-meta-title {
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.pricing-meta-copy {
    color: var(--text-light);
}

.pricing-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.pricing-page-nav a,
.pricing-page-nav a:visited {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-light);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
}

.pricing-page-nav a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pricing-page-nav a.pricing-nav-active,
.pricing-page-nav a.pricing-nav-active:visited {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.pricing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.pricing-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.pricing-copy-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.pricing-card {
    margin-bottom: 0;
}

.pricing-plan-grid .pricing-card.pricing-selectable {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-plan-grid .pricing-card.pricing-selectable .pricing-list {
    flex: 1 1 auto;
}

.pricing-plan-grid .pricing-card.pricing-selectable .pricing-actions {
    margin-top: auto;
}

.pricing-page .pricing-card.pricing-selectable {
    cursor: pointer;
}

.pricing-page .pricing-card.pricing-selectable:hover,
.pricing-page .pricing-card.pricing-selectable:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.pricing-card-featured {
    border-color: var(--primary-color);
}

.pricing-card-label {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.pricing-card h3 {
    margin-bottom: 0.55rem;
}

.pricing-card-copy {
    color: var(--text-light);
    margin-bottom: 0.9rem;
}

.pricing-card-copy:last-child {
    margin-bottom: 0;
}

.pricing-list {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.pricing-list li + li {
    margin-top: 0.3rem;
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pricing-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Monthly above annual. The row is as wide as the longer button, and both fill it. */
.pricing-actions:has(.pricing-annual) {
    flex-direction: column;
    align-items: stretch;
    align-self: center;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
}

.pricing-actions:has(.pricing-annual) > form {
    display: flex;
}

.pricing-actions:has(.pricing-annual) .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.btn-secondary.pricing-annual {
    flex-direction: column;
    gap: 0.15rem;
    border-color: var(--primary-color);
    line-height: 1.25;
}

.pricing-annual-save {
    color: var(--primary-dark);
    font-size: 0.85rem;
    font-weight: 700;
}

.pricing-fine-print {
    color: var(--text-muted);
    font-size: 0.86rem;
    margin-top: 0.8rem;
}

.pricing-final-cta {
    margin-top: 1.75rem;
    text-align: center;
}

.pricing-role-section {
    margin-top: 2rem;
}

.pricing-final-cta p {
    max-width: 60ch;
    margin: 0 auto;
    color: var(--text-light);
}

.pricing-final-cta .home-hero-actions {
    justify-content: center;
}

.pricing-legal h2 {
    margin-bottom: 0.5rem;
}

.pricing-legal-footer {
    margin-top: 2rem;
}

.pricing-legal-footer .pricing-list {
    margin-bottom: 0;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

/* A one-button form that sits in a row of links or buttons (row 22). */
.form-inline {
    display: inline;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* HTMX Loading Indicators */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--shimmer-highlight), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Focus Ring Improvements: the browser decides when a focus ring is wanted,
   so no script adds a class on focus (decision row 26). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--primary-color);
}

/* Form Input Enhancements */
.form-input:focus {
    box-shadow: var(--focus-ring);
}

/* Dashboard Layouts */
.dashboard-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Grid Systems */
.grid {
    display: grid;
    gap: 1.5rem;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-brand .brand-wordmark {
        display: none;
    }

    .nav-links {
        gap: 0.5rem 0.9rem;
    }

    .home-proof-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-meta-strip,
    .pricing-grid,
    .pricing-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* The header on a phone: the logo, and beside it the row in two or three
       short lines. The dropdowns' own phone rules follow their base rules,
       further down. */
    nav {
        padding: 0.85rem 1rem;
        gap: 0.625rem;
    }

    .nav-brand .brand-wordmark {
        display: none;
    }

    /* No row gap: the space between two lines is the links' own padding, so
       it is part of what a finger can hit. */
    .nav-links {
        gap: 0 0.625rem;
    }

    .nav-links a,
    .nav-links a:visited {
        padding: 0.5rem 0;
        font-size: 0.875rem;
    }

    .home-hero {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .home-proof-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-audience-grid {
        grid-template-columns: 1fr;
    }

    .pricing-meta-strip {
        grid-template-columns: 1fr;
    }

    .pricing-grid,
    .pricing-plan-grid,
    .pricing-support-grid {
        grid-template-columns: 1fr;
    }

    .about-story-copy {
        font-size: 1rem;
    }

    .how-it-works-grid {
        grid-template-columns: 1fr;
    }

    /* The heading holds the mark, one word with nowhere to break: at the
       desktop size it is wider than a phone's card and made the page 452px
       wide. Smaller, it fits a 360px window; in a narrower one it breaks
       rather than widen the page. */
    .how-it-works-intro h1 {
        font-size: 1.375rem;
        overflow-wrap: anywhere;
    }
}

/* Welcome Section */
.welcome-section {
    background-color: var(--bg-color);
    border-radius: 0.75rem;
    padding: 2rem;
    color: var(--text-color);
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.dark-mode .welcome-section {
    background-color: var(--secondary-light);
}

.welcome-section h1 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.welcome-section p {
    font-size: 1.125rem;
    opacity: 0.95;
}

/* Stat Cards */
.stat-card {
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.stat-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* One pill per metric. The class names came from the two dashboards and
   say which colour; the tokens say which tone the metric carries. */
.stat-icon.blue {
    background-color: var(--stat-info-bg);
    color: var(--stat-info-fg);
}

.stat-icon.green {
    background-color: var(--stat-positive-bg);
    color: var(--stat-positive-fg);
}

.stat-icon.purple {
    background-color: var(--stat-accent-bg);
    color: var(--stat-accent-fg);
}

.stat-icon.orange {
    background-color: var(--stat-attention-bg);
    color: var(--stat-attention-fg);
}

.stat-info h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.stat-info .stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-color);
}

/* A line under a stat that qualifies the number -- the seeker dashboard says
   there which count is provisional. Smaller than the card's own text and set
   off from the value, so a card that carries one keeps the height of the two
   beside it. */
.stat-note {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-light);
    margin-top: 0.375rem;
}

/* Section Cards */
.section-card {
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
}

.section-card h2 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--text-color);
}

/* Quick Action Cards */
.action-card {
    padding: 1rem;
    border: 2px dashed var(--border-dark);
    border-radius: 0.5rem;
    text-align: center;
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
}

.action-card:hover {
    border-color: var(--primary-color);
    background-color: var(--info-light);
    transform: translateY(-2px);
}

.action-card svg {
    width: 2rem;
    height: 2rem;
    color: var(--text-muted);
    margin: 0 auto 0.5rem;
    display: block;
}

.action-card:hover svg {
    color: var(--primary-color);
}

.action-card p {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
}

.action-card:hover p {
    color: var(--primary-dark);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
}

.empty-state svg {
    width: 3rem;
    height: 3rem;
    color: var(--text-muted);
    margin: 0 auto 1rem;
    display: block;
}

.empty-state p {
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.empty-state .empty-state-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* User Profile Dropdown */
.profile-dropdown {
    position: relative;
}

.profile-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-button:hover {
    background-color: var(--bg-light);
}

/* The chevron in the profile button; a button does not inherit the page's
   font size, so the icon is sized in rem here rather than left at 1em. */
.profile-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
}

/* Messages Dropdown: the same dropdown, opened by a bare icon button */
.messages-dropdown {
    margin-right: 0.9375rem;
}

/* The hover state is listed with the base rule because .profile-button:hover
   would otherwise paint a background this button never had. */
.messages-dropdown-button,
.messages-dropdown-button:hover {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

.messages-dropdown-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-muted);
}

.profile-avatar {
    object-fit: cover;
}

.profile-initials {
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 0.875rem;
}

.profile-button .profile-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    line-height: 1.2;
    margin: 0;
}

.profile-button .profile-info .profile-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
}

.profile-button .profile-info .profile-email {
    font-size: 0.75rem;
    color: var(--text-light);
}

.profile-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 14rem;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    z-index: 50;
}

/* Wider than the profile dropdown it borrows: it holds message previews,
   not links. Both classes, because the two rules are otherwise equally
   specific and this one has to come out on top wherever it is listed. */
.profile-dropdown-menu.messages-dropdown-menu {
    width: 18.75rem;
}

.profile-dropdown-menu.is-open {
    display: block;
}

.profile-dropdown-menu a,
.profile-dropdown-menu a:visited,
.profile-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.875rem;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.profile-dropdown-menu a:hover,
.profile-dropdown-menu button:hover {
    background-color: var(--bg-light);
}

.profile-dropdown-menu svg {
    width: 1rem;
    height: 1rem;
    color: var(--text-light);
}

.profile-dropdown-menu hr {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--border-color);
}

/* Dark Mode Toggle Button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
    font-size: 0.875rem;
    min-width: 2.5rem;
    height: 2.5rem;
}

.theme-toggle:hover {
    background-color: var(--bg-lighter);
    border-color: var(--border-dark);
    transform: scale(1.05);
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-color);
    flex-shrink: 0;
}

/* The header's two dropdowns on a phone. The row they sit in folds in the
   768 block near the top of the file; these follow the base rules above
   because an equal selector wins by coming later. */
@media (max-width: 768px) {
    /* A menu hangs from the header, not from its own button: in a folded row
       a button can be anywhere along its line, and a menu anchored to it
       would run past the left edge, where nothing scrolls to it. The header
       is sticky, which makes it the menu's containing block once the
       dropdown is static. */
    .profile-dropdown {
        position: static;
    }

    /* The window's width less a margin, under the header. The header does
       not scroll away, so a menu taller than the window could never be
       reached: it scrolls inside itself instead. 13rem is more than the
       tallest folded header plus the two margins; the 12rem floor is for a
       phone on its side, where that sum would leave a menu a few lines
       tall; the second max-height is for a browser whose toolbar covers
       part of 100vh. */
    .profile-dropdown-menu,
    .profile-dropdown-menu.messages-dropdown-menu {
        left: 1rem;
        right: 1rem;
        width: auto;
        max-height: max(12rem, calc(100vh - 13rem));
        max-height: max(12rem, calc(100dvh - 13rem));
        overflow-y: auto;
    }

    .messages-dropdown {
        margin-right: 0;
    }

    /* The profile button is its picture alone. */
    .profile-button {
        padding: 0.25rem;
    }

    .messages-dropdown-button {
        padding: 0.5rem;
        gap: 0.25rem;
    }

    /* The name and email leave the button's face but stay its accessible
       name: clipped, not display: none, so a screen reader still says whose
       menu this is. */
    .profile-button .profile-info {
        position: absolute;
        width: 0.0625rem;
        height: 0.0625rem;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .profile-button .profile-chevron {
        display: none;
    }
}

/* Organization Badge */
.org-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--info-light);
    border: 1px solid var(--info-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--info-dark);
    margin-bottom: 1rem;
}

.org-badge svg {
    width: 1rem;
    height: 1rem;
}

/* Badges (row 33): a small pill that labels a row with a state. The bare
   .badge is neutral, and a modifier wears one of the status surfaces. */
.badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    background-color: var(--bg-dark);
    color: var(--text-light);
}

.badge-success {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.badge-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.badge-danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.badge-info {
    background-color: var(--info-bg);
    color: var(--info-text);
}

/* A verification badge that stands on its own line above what it labels: the
   background header, above the button that acts on it (which
   professional_background.jinja said inline, row 22), and a claimed row inside
   a formset, above its fields. */
.verification-badge {
    display: block;
    margin-bottom: 0.5rem;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .welcome-section h1 {
        font-size: 1.5rem;
    }
    
    .welcome-section p {
        font-size: 1rem;
    }
    
    .dashboard-container {
        padding: 1rem;
    }
    
    .stat-card-content {
        flex-direction: column;
        text-align: center;
    }
    
    .stat-info .stat-value {
        font-size: 1.75rem;
    }
}

/* Authentication Pages */
.auth-container {
    max-width: 450px;
    margin: 2rem auto;
}

.auth-card h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.auth-card p {
    margin-bottom: 1.5rem;
}

.btn-google,
.btn-google:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    font-family: inherit;
    line-height: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-google:hover {
    background: var(--bg-light);
    box-shadow: var(--shadow);
}

.btn-google svg {
    flex-shrink: 0;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: var(--text-light);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.divider span {
    padding: 0 0.75rem;
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
}

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

.auth-form .form-group,
.org-form .form-group {
    margin-bottom: 1.25rem;
}

/* The organization page's seat limit: label, number and button on one line,
   which organizations/detail.jinja used to say inline (row 22). */
.seats-form {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.seats-form .form-control {
    width: 6.25rem;
}

/* The organization page's Invite Members card, which
   organizations/detail.jinja used to say inline (row 22): the address box
   and its button on one line, then the pending invitations, each with its
   Send again and Rescind buttons at the far end. The card's "no seats"
   notice is an .alert-warning and has no rule here. */
.invite-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.invite-form .form-control {
    flex: 1;
    min-width: 12.5rem;
}

.pending-invitations-heading {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

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

.pending-invitations li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-color);
}

.pending-invitations .muted {
    font-size: 0.85rem;
}

.pending-invitations-empty {
    font-size: 0.9rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.form-actions .btn {
    flex: 1;
}

.organization-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .organization-options {
        grid-template-columns: 1fr;
    }

    /* The organization page's three small forms on a phone: the seat
       limit's button goes under its number, the address box takes the
       line (its 12.5rem minimum is wider than a 360px window's card), and
       the Send again and Rescind pair goes under an invited address that
       does not fit beside it; an address longer than the card breaks. */
    .seats-form {
        flex-wrap: wrap;
    }

    .invite-form .form-control {
        flex-basis: 100%;
        min-width: 0;
    }

    .pending-invitations li {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .pending-invitations li > div {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

.option-card {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    background: var(--bg-light);
}

.option-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    color: var(--text-color);
}

.option-card p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.option-card .form-group {
    margin-bottom: 1rem;
}

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

.icon-large {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.notice-box {
    background-color: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 1.5rem 0;
}

.notice-box p {
    margin: 0;
    color: var(--warning-text);
}

.notice-box ul {
    margin: 0.5rem 0 0 1.5rem;
    color: var(--warning-text);
}

/* Form Pages */
.form-container {
    max-width: 500px;
    margin: 2rem auto;
}

.subtitle {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.info-box {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--info-light);
    border: 1px solid var(--info-color);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.info-box .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--info-color);
    flex-shrink: 0;
}

.info-box strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--info-dark);
}

.info-box p {
    margin: 0;
    color: var(--info-dark);
    font-size: 0.875rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.2s;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* Form Helper Text. Two names for one line: .help-text is this project's,
   .form-text the one the form templates carry (row 33). */
.help-text,
.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

/* The Remove button under a formset row */
.formset-row-actions {
    margin-top: 0.5rem;
}

/* The free-text field a select's "Other" choice reveals (row 27) */
.other-field {
    margin-top: 0.5rem;
}

/* A choice field as one-tap radio buttons: the radio_group() macro in
   templates/macros/forms.jinja. Not a .form-group, whose rule stretches every
   input to the full width. */
.radio-group {
    border: 0;
    margin: 0 0 1.25rem;
    padding: 0;
}

.radio-group legend {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.radio-group legend.label-error {
    color: var(--danger-color);
}

.radio-group-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.radio-group-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* The waitlist panel: a job seeker whose state is not open yet
   (templates/accounts/partials/blocked_state.jinja). Left-aligned inside the
   centred email notice card too. */
.waitlist-panel {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--info-border);
    border-radius: 0.5rem;
    background-color: var(--info-bg);
    color: var(--info-text);
    text-align: left;
}

.waitlist-panel h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.waitlist-panel ul {
    margin: 0.75rem 0 0.75rem 1.25rem;
}

.required-mark {
    color: var(--danger-color);
}

/* Pagination (row 16). The control itself is the paginate() macro in
   templates/macros/pagination.jinja; the bar is the row a list puts its
   result count in beside it. */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.pagination-bar .pagination {
    margin-top: 0;
}

/* Form Error Messages */
.error-message {
    display: block;
    margin-top: 0.5rem;
    color: var(--danger-color);
    font-size: 0.875rem;
}

.error-message p {
    margin: 0.25rem 0;
}

.has-error label,
label.label-error {
    color: var(--danger-color);
}

.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--danger-color) !important;
    box-shadow: var(--error-ring);
}

.has-error input:focus,
.has-error select:focus,
.has-error textarea:focus {
    border-color: var(--danger-color) !important;
    box-shadow: var(--error-ring-focus);
}

.text-danger {
    color: var(--danger-color);
    font-size: 0.875rem;
}

.form-errors-summary {
    margin-bottom: 1rem;
}

.form-errors-summary p {
    margin: 0.25rem 0;
}

.form-errors-summary p:first-child {
    margin-top: 0;
}

.form-errors-summary p:last-child {
    margin-bottom: 0;
}

/* The message address_autocomplete.js inserts under the address field.
   Its colour comes from .text-danger, which the script names alongside
   this class; the script sets no style of its own (rows 32, 33). */
.address-inline-error {
    margin-top: 0.25rem;
}

/* Google's address box (gmp-place-autocomplete, which
   address_autocomplete.js builds in place of the input) follows the
   computer's light or dark setting unless it is pinned: its color-scheme
   defaults to "light dark". The theme here is the dark-mode class on <body>,
   not the computer's setting. The element's text colour is .form-control's
   token, which the script copies onto it and its list of suggestions
   inherits, while the list draws its own surface from the scheme: whenever
   the two settings disagreed the list was light text on white, or dark text
   on black. Both now turn on the same class. color-scheme is a keyword, not
   a colour, so it is not a palette token (row 32). */
gmp-place-autocomplete,
gmp-place-autocomplete::part(prediction-list) {
    color-scheme: light;
}

.dark-mode gmp-place-autocomplete,
.dark-mode gmp-place-autocomplete::part(prediction-list) {
    color-scheme: dark;
}

/* Form Section Headers */
.form-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.password-requirements {
    background-color: var(--bg-light);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.password-requirements h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.password-requirements ul {
    margin: 0;
    padding-left: 1.5rem;
}

.password-requirements li {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0.25rem 0;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.btn-back,
.btn-back:visited {
    color: var(--text-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-color);
    padding: 0.55rem 0.95rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.btn-back:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: var(--bg-light);
    transform: translateY(-1px);
}

.btn-back svg {
    flex-shrink: 0;
}

.personal-info-form {
    padding: 1.5rem;
}

.form-group-section {
    margin-bottom: 2rem;
}

/* A section's header row is a filled band, so the sections of a long form
   (the professional background, a job posting) read at a glance (founder,
   2026-09-26). The same band heads a collapsible section's summary. */
.form-group-section > h3,
.form-group-section > summary {
    background-color: var(--bg-light);
    border-left: 4px solid var(--primary-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
}

.form-group-section > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    list-style: none;
}

.form-group-section > summary::-webkit-details-marker {
    display: none;
}

/* The disclosure arrow, drawn so the band keeps its shape open or closed. */
.form-group-section > summary::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--text-light);
    border-bottom: 2px solid var(--text-light);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.form-group-section[open] > summary::before {
    transform: rotate(45deg);
}

.form-group-section > summary h3 {
    margin: 0;
}

.form-group-section > summary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* The line of guidance under a .form-group-section heading, which
   professional_background.jinja used to say inline (row 22). */
.form-section-hint {
    color: var(--text-light);
    margin-bottom: 1rem;
}

/* A second heading inside one .form-group-section, which needs the space the
   section itself would otherwise give it. */
.form-subsection-heading {
    margin-top: 1.75rem;
}

/* A background row a check has claimed: listed read-only above the formset
   that holds the rows the seeker may still edit, with its verification pill. */
.background-locked-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.background-locked-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-light);
}

.background-locked-row h4 {
    margin-bottom: 0.25rem;
}

.background-locked-row p {
    margin-bottom: 0.25rem;
}

.background-locked-row p:last-child {
    margin-bottom: 0;
}

.form-group-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

/* Accessible visually hidden labels */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Compact job seeker skills editor (professional background) */
.seeker-skills-editor {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.45rem 0.6rem 0.55rem;
    background-color: var(--bg-light);
}

/* The head and every row share one column template, so "1–10" and
   "Experience" sit over their boxes. The third column holds two number
   boxes side by side (years, months): 10.5rem leaves each one room for its
   placeholder beside the browser's spinner. */
.seeker-skills-column-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.75rem 10.5rem 2.5rem;
    gap: 0.5rem 0.65rem;
    align-items: end;
    padding: 0.15rem 0 0.4rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.seeker-skills-column-head .seeker-skills-col-rate {
    text-align: center;
}

.seeker-skills-column-head .seeker-skills-col-months {
    text-align: center;
}

/* Under "Experience" the head names the two boxes, since a typed number
   takes the place of a box's placeholder: two halves with the pair's own
   gap, so "Years" and "Months" each sit centred over their box. The head
   aligns its cells to the bottom, which puts "Skill" and "1–10" level with
   them. */
.seeker-skills-col-units {
    display: flex;
    gap: 0.35rem;
}

.seeker-skills-col-units > span {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.seeker-skills-editor > .seeker-skill-form-row {
    padding: 0.35rem 0;
}

.seeker-skills-editor > .seeker-skill-form-row + .seeker-skill-form-row {
    border-top: 1px solid var(--border-color);
}

.seeker-skill-row-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.75rem 10.5rem 2.5rem;
    gap: 0.5rem 0.65rem;
    align-items: center;
}

.seeker-skill-row-grid .form-group {
    margin-bottom: 0;
}

.seeker-skill-row-grid .seeker-skill-name-cell input.form-control,
.seeker-skill-row-grid .seeker-skill-rate-cell input.form-control {
    padding: 0.45rem 0.55rem;
    font-size: 0.9375rem;
}

.seeker-skill-rating-input {
    width: 100%;
    min-width: 0;
    text-align: center;
}

.seeker-skill-months-input {
    width: 100%;
    min-width: 0;
    text-align: center;
    padding: 0.45rem 0.35rem !important;
    font-size: 0.875rem !important;
}

/* The years and months boxes sit closer here than the shared .years-months
   sets them, which leaves the width to the boxes. */
.seeker-skill-row-grid .years-months {
    gap: 0.35rem;
}

.seeker-skill-actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.seeker-skill-remove {
    padding: 0.35rem 0.45rem !important;
    min-height: 2.25rem;
    min-width: 2.25rem;
    color: var(--text-color);
}

.seeker-skill-remove svg {
    display: block;
}

.seeker-skill-remove:hover:not(:disabled) {
    color: var(--danger-color);
}

.seeker-skill-row-foot {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.2rem;
    padding-left: 0.05rem;
}

.seeker-skill-row-foot .error-message {
    font-size: 0.8125rem;
}

.seeker-skills-add-btn {
    margin-top: 0.65rem;
}

@media (max-width: 640px) {
    /* A phone has no room for the four columns: the name takes the first
       line, the rating and the remove button the second, the two experience
       boxes the third. The head holds the same four cells in the same order
       as a row, so it stacks the same way and each label stays over its
       box. */
    .seeker-skills-column-head,
    .seeker-skill-row-grid {
        grid-template-columns: 3.75rem minmax(0, 1fr) 2.5rem;
        grid-template-areas:
            "skill skill skill"
            "rate . remove"
            "months months months";
        gap: 0.4rem 0.45rem;
    }

    .seeker-skills-column-head > :nth-child(1),
    .seeker-skill-row-grid > :nth-child(1) {
        grid-area: skill;
    }

    .seeker-skills-column-head > :nth-child(2),
    .seeker-skill-row-grid > :nth-child(2) {
        grid-area: rate;
    }

    .seeker-skills-column-head > :nth-child(3),
    .seeker-skill-row-grid > :nth-child(3) {
        grid-area: months;
    }

    .seeker-skills-column-head > :nth-child(4),
    .seeker-skill-row-grid > :nth-child(4) {
        grid-area: remove;
    }

    .seeker-skills-column-head {
        row-gap: 0.1rem;
    }

    .seeker-skills-column-head .seeker-skills-col-rate,
    .seeker-skills-column-head .seeker-skills-col-months {
        text-align: left;
    }

    /* A little of the editor's side padding goes to the boxes, and a row
       of three lines gets more air above and below than a row of one. */
    .seeker-skills-editor {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .seeker-skills-editor > .seeker-skill-form-row {
        padding: 0.55rem 0;
    }
}

/* The salary panel on a job posting page (rows 22 and 33). */
.salary-range {
    background-color: var(--info-light);
    padding: 1.5rem;
    border-radius: 0.5rem;
}

/* A list page with its filters beside it (Browse Jobs, Find Talent), which
   the two templates used to say inline (row 22): the filter card in a fixed
   column and the list in the rest; .result-card-head is a card's first row,
   what it is on one side and its status or its button on the other. */
.filter-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.filter-sidebar {
    width: 16.25rem;
    flex-shrink: 0;
}

.filter-results {
    flex: 1;
    min-width: 0;
}

.result-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

/* On a phone the fixed column is wider than what is left beside it, which
   squeezed the list to nothing: the filters go above the list, each the
   width of the page, and a card's status or button goes under its title
   when the two do not fit on a line. */
@media (max-width: 768px) {
    .filter-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .filter-sidebar {
        width: auto;
    }

    .filter-results {
        flex: none;
    }

    .result-card-head {
        flex-wrap: wrap;
    }

    .result-card-head > :first-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* A candidate's name heading a card on Find Talent. The link keeps the text
   colour and carries no underline in every state; its three selectors match
   the global link rules' weight and win by coming later. */
.candidate-name-heading {
    margin-bottom: 0.25rem;
}

a.candidate-name-link:link,
a.candidate-name-link:visited,
a.candidate-name-link:hover {
    color: var(--text-color);
    text-decoration: none;
}

/* The candidate page's back link (S5.3a), clear of the card below it. */
.candidate-back {
    margin-bottom: 1.5rem;
}

/* Job seeker matched jobs list */
.matched-jobs-header {
    margin-bottom: 2rem;
}

.matched-jobs-header h1 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.matched-jobs-intro {
    max-width: 42rem;
    line-height: 1.5;
}

.matched-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.matched-job-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.35rem;
}

.matched-job-title {
    margin: 0;
    font-size: 1.125rem;
}

/* The applicant's name heading a card on the recruiter's applications list
   (row 22). The link keeps the heading's colour in every state; its three
   selectors match the global link rules' weight and win by coming later. */
.application-candidate-name {
    font-size: 1.1rem;
}

.application-candidate-name a:link,
.application-candidate-name a:visited,
.application-candidate-name a:hover {
    color: inherit;
}

/* The posting's title heading a card on the job seeker's My Applications. The
   link keeps the heading's colour and carries no underline in every state; its
   three selectors match the global link rules' weight and win by coming later. */
a.application-posting-link:link,
a.application-posting-link:visited,
a.application-posting-link:hover {
    color: inherit;
    text-decoration: none;
}

/* The posting's title heading a card under Recent Applications on the job
   seeker's dashboard. The link keeps the heading's colour in every state and
   its underline; its three selectors match the global link rules' weight and
   win by coming later. */
a.recent-application-link:link,
a.recent-application-link:visited,
a.recent-application-link:hover {
    color: inherit;
}

/* The action under an application's card: the recruiter's "Review in queue"
   button on their Applications page and the job seeker's Withdraw form on
   My Applications. It stands clear of the lines above it. */
.application-card-action {
    margin-top: 0.75rem;
}

.matched-job-meta {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
}

.matched-job-salary {
    margin: 0.5rem 0 0;
}

.empty-state-card {
    padding: 1.5rem;
}

.required {
    color: var(--danger-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.validation-success {
    color: var(--success-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.validation-success.is-open {
    display: block;
}

.validation-error {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.validation-error.is-open {
    display: block;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    /* A page's heading and its Back link (or its status and buttons) are a
       row on a desktop; on a phone the row is wider than the window, so the
       second part goes under the first. */
    .page-header,
    .form-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

.upload-form {
    padding: 1.5rem;
}

.upload-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.current-picture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.profile-preview {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color);
}

.no-picture {
    background-color: var(--bg-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-light);
}

.no-picture .icon {
    width: 4rem;
    height: 4rem;
}

.image-label {
    font-size: 0.875rem;
    color: var(--text-light);
    text-align: center;
}

.upload-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group input[type="file"] {
    display: none;
}

.file-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.file-label:hover {
    background-color: var(--primary-dark);
}

.file-name {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.requirements {
    background-color: var(--bg-light);
    padding: 1rem;
    border-radius: 0.5rem;
}

.requirements h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

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

.requirements li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--text-light);
}

.requirements li .icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--success-color);
}

.preview-container {
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
}

.preview-container h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

.image-preview {
    max-width: 100%;
    max-height: 300px;
    border-radius: 0.5rem;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary:disabled,
#add-skill-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    filter: grayscale(0.25);
}

.upload-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    background-color: var(--bg-light);
    transition: all 0.2s;
    cursor: pointer;
    margin-bottom: 1rem;
}

.upload-drop-zone:hover {
    border-color: var(--primary-color);
    background-color: var(--info-light);
}

.upload-drop-zone.drag-over {
    border-color: var(--primary-color);
    background-color: var(--info-light);
}

.upload-drop-zone .icon {
    width: 3rem;
    height: 3rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.upload-drop-zone p {
    margin: 0.5rem 0;
    color: var(--text-light);
}

.upload-drop-zone .highlight {
    color: var(--primary-color);
    font-weight: 500;
}

.validation-message {
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    display: none;
}

.validation-message.is-open {
    display: block;
}

.validation-message.error {
    background-color: var(--danger-light);
    color: var(--danger-dark);
    border: 1px solid var(--danger-color);
}

.validation-message.warning {
    background-color: var(--warning-light);
    color: var(--warning-dark);
    border: 1px solid var(--warning-color);
}

.validation-message.success {
    background-color: var(--success-light);
    color: var(--success-dark);
    border: 1px solid var(--success-color);
}

@media (max-width: 768px) {
    .upload-section {
        grid-template-columns: 1fr;
    }
}

/* Profile Pages */
.oauth-header {
    margin-bottom: 2rem;
}

.oauth-header h1 {
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

/* The emails no preference turns off, under the Email Preferences heading:
   the reset takes a list's padding, so the bullets sit inside the text. */
.always-sent-emails {
    margin: 0.5rem 0 0 1.5rem;
}

.email-preferences-form .email-preference-option {
    margin-bottom: 1.25rem;
}

.email-preferences-form .email-preference-option label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0;
    cursor: pointer;
}

.email-preferences-form input[type="checkbox"] {
    width: auto;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.email-preferences-form .email-preference-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.email-preferences-form .email-preference-help {
    font-size: 0.9rem;
    font-weight: 400;
}

.oauth-providers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.provider-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    transition: all 0.2s;
    background: var(--bg-color);
}

.provider-card.connected {
    border-color: var(--success-color);
    background-color: var(--success-light);
}

.provider-card:hover {
    box-shadow: var(--shadow-md);
}

.provider-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.provider-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-on-accent);
}

.provider-icon.danger {
    background-color: var(--danger-color);
}

.provider-icon.info {
    background-color: var(--info-color);
}

.provider-icon.primary {
    background-color: var(--brand-linkedin);
}

.provider-details h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    color: var(--text-color);
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--bg-light);
    color: var(--text-light);
}

.status-badge.connected,
.status-badge.status-active {
    background-color: var(--success-light);
    color: var(--success-dark);
}

.status-badge.status-inactive {
    background-color: var(--bg-dark);
    color: var(--text-muted);
}

/* A posting working on an offer, and a posting whose queue is full: both
   stop applications for now and can take them again (L11). */
.status-badge.status-offer,
.status-badge.status-queue-full {
    background-color: var(--warning-light);
    color: var(--warning-dark);
}

/* The bar under a job posting's title: where it stands on one side, what
   can be done with it on the other (L11, row 22). The list's count badges
   and the seeker's Apply sit in the same bar. */
.posting-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.posting-status-summary,
.posting-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* A posting's card on My Job Postings, which the template used to say
   inline (row 22): the posting beside its View button, and inside it the
   title with its badges on one line. */
.posting-card-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.posting-card-main {
    flex: 1;
}

.posting-card-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* On a phone the title and its badges are wider than the card, and held the
   View button outside the window: the badges go under the title and the
   button under the posting. */
@media (max-width: 768px) {
    .posting-card-row {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .posting-card-main {
        flex-basis: 100%;
        min-width: 0;
    }

    .posting-card-title {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
}

/* When an unclosed posting stops taking applications, beside its badge. */
.posting-expiry {
    color: var(--text-light);
    font-size: 0.875rem;
}

.posting-expiry-passed {
    color: var(--danger-text);
    font-weight: 600;
}

/* A seeker a recruiter invited to apply (L12): on the candidate page, and
   beside Apply on the posting the seeker was invited to. */
.status-badge.status-invited {
    background-color: var(--info-light);
    color: var(--info-dark);
}

/* The candidate page's header (row 22): who the candidate is on one side;
   Message, Invite, and what the recruiter already has with them (L12) on
   the other. */
.candidate-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.candidate-name {
    margin-bottom: 0.5rem;
}

.candidate-location {
    font-size: 1.1rem;
}

.candidate-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    text-align: right;
}

.candidate-action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.candidate-actions .status-badge {
    white-space: nowrap;
}

.candidate-activity {
    font-size: 0.875rem;
}

.candidate-activity p {
    margin-bottom: 0.25rem;
}

/* A work-history or certification entry's title on the candidate page. */
.candidate-entry-line {
    margin-bottom: 0.25rem;
}

.candidate-overdue {
    color: var(--danger-color);
}

/* The candidate page under its header, which the template used to say
   inline (row 22): the history in the wider column, the skills in the
   narrower, the second under the first when both do not fit. */
.candidate-body {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.candidate-main {
    flex: 2;
    min-width: 17.5rem;
}

.candidate-side {
    flex: 1;
    min-width: 15rem;
}

/* A phone's card is narrower than either column's minimum, which pushed
   both past the card and, at 360px, past the window: each takes the card's
   width instead. */
@media (max-width: 768px) {
    .candidate-main,
    .candidate-side {
        flex-basis: 100%;
        min-width: 0;
    }
}

/* An overdue application or deadline: the seeker's dashboard and My Applications, and the recruiter's two queues. */
.application-overdue {
    color: var(--danger-color);
}

/* An answer on a card of the recruiter's queue (the interview request, the
   decline, the pass, and the hire's button alone): it stands clear of the
   lines above it. */
.decision-form {
    margin-top: 0.75rem;
}

/* The page that confirms deleting a job posting (row 22): a narrow centred
   card, a warning glyph, and what deleting does in a notice box. */
.delete-confirm-card {
    max-width: 37.5rem;
    margin: 0 auto;
}

.delete-confirm-body {
    text-align: center;
    padding: 2rem 0;
}

.delete-confirm-body h2 {
    margin-bottom: 1rem;
}

.delete-confirm-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    background-color: var(--danger-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger-color);
}

.delete-confirm-icon svg {
    width: 2rem;
    height: 2rem;
}

.delete-confirm-lead {
    color: var(--text-light);
    margin-bottom: 2rem;
}

.delete-confirm-effects {
    text-align: left;
    margin: 0 0 2rem;
}

.delete-confirm-effects p {
    font-weight: 500;
}

.delete-confirm-effects ul {
    margin: 0.5rem 0 0 1.5rem;
    color: var(--warning-text);
}

/* One benefit row in a job posting's benefits formset (row 22). */
.benefit-form-row {
    padding: 1rem;
    background-color: var(--bg-lighter);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.provider-actions form {
    margin: 0;
}

.btn-outline-danger {
    background-color: transparent;
    color: var(--danger-color);
    border: 2px solid var(--danger-color);
}

.btn-outline-danger:hover:not(:disabled) {
    background-color: var(--danger-color);
    color: var(--text-on-accent);
}

.back-link {
    text-align: center;
}

@media (max-width: 640px) {
    .provider-card {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .provider-info {
        flex-direction: column;
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.card-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
}

/* The head of an organization's card, on its own page and on an invitation
   to it: the logo beside the name, and the invitation's two headings, which
   organizations/detail.jinja and respond_invitation.jinja used to say inline
   (row 22). */
.org-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.invitation-lead {
    margin: 0;
    font-size: 1.4rem;
}

.card-header .invitation-org {
    font-size: 1.8rem;
}

/* The button under a refusal card's words on the invitation page: the card
   for a recruiter's own plan, whose heading is .invitation-lead. */
.invitation-actions {
    margin-top: 1.5rem;
}

/* The invitation page's last day under its details, and its Accept and
   Decline buttons, which respond_invitation.jinja used to say inline
   (row 22). */
.invitation-expiry {
    margin-top: 1rem;
}

.invitation-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* On a phone the card is narrower than a logo, a name and a status badge in
   a row: the badge goes under the name, and a name that does not fit beside
   the logo goes under it, rather than be squeezed to a word a line and push
   the badge out of the window. A word longer than the card breaks. */
@media (max-width: 768px) {
    .org-header {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .org-identity {
        flex-wrap: wrap;
        min-width: 0;
    }

    .org-identity > * {
        min-width: 0;
    }

    .org-identity .avatar-lg {
        flex-shrink: 0;
    }

    .org-identity h1,
    .org-identity h2 {
        overflow-wrap: anywhere;
    }

    .card-header .invitation-org {
        font-size: 1.5rem;
    }
}

.btn-edit {
    color: var(--link-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.btn-edit:visited {
    color: var(--link-color);
}

.btn-edit:hover {
    color: var(--link-hover-color);
    background-color: var(--bg-light);
}

.profile-info {
    margin-top: 1rem;
}

/* Job seeker professional summary on profile */
.job-seeker-professional-card .profile-pro-subsection {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.job-seeker-professional-card .profile-pro-subsection:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.profile-pro-subsection-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.profile-pro-subsection-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.profile-pro-edit-link {
    flex-shrink: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.65rem;
}

.profile-about-body {
    white-space: pre-wrap;
    line-height: 1.55;
    margin: 0;
    color: var(--text-color);
}

.profile-pro-value {
    margin: 0;
}

.profile-pro-empty {
    margin: 0;
}

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

.profile-pro-list li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-color);
}

.profile-pro-list li:last-child {
    border-bottom: none;
}

.profile-pro-list .muted {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 0.2rem;
}

.info-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .label {
    font-weight: 600;
    width: 150px;
    flex-shrink: 0;
    color: var(--text-color);
}

.info-row .value {
    flex-grow: 1;
    color: var(--text-color);
}

/* A label-and-value row on a phone (the profile, the organization page, an
   invitation): the label takes a line of its own and the row wraps, so a
   badge, a link or a button after the value drops to the next line instead
   of running past the card, and a value gives way and breaks a long address
   rather than holding its width. A form inside a value (the staff role
   setup) wraps the same way. */
@media (max-width: 768px) {
    .info-row {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .info-row .label {
        width: 100%;
    }

    .info-row .value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .info-row .btn-link {
        margin-left: 0;
    }

    .info-row .value form {
        flex-wrap: wrap;
    }

    .info-row .value input {
        max-width: 100%;
    }
}

.text-muted {
    color: var(--text-light);
}

.profile-picture-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-pic {
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.no-profile-pic {
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.no-profile-pic .icon {
    width: 2.5rem;
    height: 2.5rem;
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.btn-link {
    background: none;
    color: var(--link-color);
    text-decoration: none;
    border: none;
    cursor: pointer;
    margin-left: 0.5rem;
}

.btn-link:visited {
    color: var(--link-color);
}

.btn-link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.profile-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Messaging notifications */
.message-dropdown-content {
    padding: 0.5rem;
}

.message-item {
    margin-bottom: 0.5rem;
    padding: 1rem;
}

/* The conversations sidebar: the list the dashboard owns and the cards
   thread_detail re-renders into it out of band (rows 6, 22). */
.thread-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.thread-list-empty {
    margin-top: 2rem;
}

.thread-summary-card {
    cursor: pointer;
    padding: 1rem;
    margin-bottom: 0;
    border: 1px solid var(--border-color);
    box-shadow: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.thread-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.thread-summary-name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-weight: 600;
    color: var(--text-color);
}

.thread-summary-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.thread-summary-related {
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary-color);
}

.thread-summary-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.message-item.unread,
.thread-summary-card.unread {
    border-left: 3px solid var(--primary-color);
    background-color: var(--info-light);
}

.thread-summary-card.active {
    border-color: var(--primary-color);
}

.message-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.message-sender {
    font-weight: 700;
    color: var(--text-color);
}

.message-subject {
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--text-color);
}

.message-body {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.message-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.message-view-btn,
.message-view-btn:visited {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-color);
    background-color: var(--bg-color);
}

.message-view-btn:hover {
    background-color: var(--bg-light);
    color: var(--text-color);
}

.message-mark-read-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.message-dropdown-footer {
    text-align: center;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.message-unread-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-color);
}

.message-unread-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    flex-shrink: 0;
}

.unread-badge-count {
    background-color: var(--danger-color);
    color: var(--bg-color);
    border-radius: 50%;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}


/* Searchable Select */
.searchable-select-wrapper {
    position: relative;
    width: 100%;
}

.searchable-select-dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-dropdown);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
}

.searchable-select-dropdown li {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--text-color);
}

.searchable-select-dropdown li:hover {
    background-color: var(--bg-light);
}

.searchable-select-dropdown li.selected {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* Rendered system notifications inside a message bubble. The notification
   templates are written for email, so their headings and call-to-action are
   scaled down here to sit inside the thread rather than dominate it. */
.notification-body h1 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: inherit;
}
.notification-body p {
    margin: 0 0 0.5rem;
}
.notification-body p:last-child {
    margin-bottom: 0;
}
.notification-body a {
    color: inherit;
    text-decoration: underline;
}
.notification-body a.button {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 0.35rem;
    background-color: var(--primary-color);
    /* White on this teal fails contrast in both themes. Navy stays dark on
       the light teal and on the dark theme's mint. */
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: 600;
}
.notification-body .muted {
    font-size: 0.8125rem;
    opacity: 0.8;
}

/* Label with a link beside it (sign-in's "Forgot password?") */
.label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.label-row-link {
    font-size: 0.875rem;
}

/* The thread pane's context bar: what the conversation is about. */
.thread-context {
    font-size: 0.875rem;
    color: var(--primary-color);
    font-weight: 500;
}

/* The posting's or the application's link in the thread pane's context bar
   ("Regarding Job", "Regarding Application"). It keeps the bar's colour in
   every state; its three selectors match the global link rules' weight and
   win by coming later. */
a.thread-context-link:link,
a.thread-context-link:visited,
a.thread-context-link:hover {
    color: inherit;
    text-decoration: underline;
}

/* Thread compose box: the reply field grows, the send button does not. */
.thread-reply-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}
.thread-reply-field {
    flex-grow: 1;
}
.thread-reply-input {
    resize: none;
    background-color: var(--bg-light);
}
.thread-reply-send {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    height: 3rem;
}
.thread-reply-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
}
/* The line in the compose box's place when this reader cannot reply. */
.thread-reply-closed {
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: 0.5rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    border: 1px dashed var(--border-dark);
}