/* E2C Intelligence, "New Horizons" Design
   A warm, empowering aesthetic for fresh starts */

/* DM Sans and Fraunces are self-hosted (design/fonts/), not loaded from Google. */
@import url('fonts/fonts.css');

:root {
    /* Core palette - E2C Intelligence brand */
    --primary: #1e3a5f;          /* Dark navy: wordmark "E2C" */
    --primary-light: #2a4d7a;
    --primary-dark: #142942;

    /* Teal - PRIMARY ACTION COLOR (buttons, CTAs) */
    --teal: #2eb67d;             /* Teal green: wordmark "Intelligence" */
    --teal-light: #3ed68d;
    --teal-dark: #259966;

    /* Accent - SECONDARY HIGHLIGHTS (golden opportunity) */
    --accent: #d97706;
    --accent-light: #f59e0b;
    --accent-glow: rgba(217, 119, 6, 0.15);

    /* Feedback states (consolidated) */
    --success: #2eb67d;          /* Same as teal - unified */
    --success-light: #3ed68d;
    --danger: #dc2626;

    /* Neutrals - warm undertones */
    --bg-cream: #faf8f5;
    --bg-warm: #f5f1eb;
    --white: #ffffff;
    --border: #e8e4dd;
    --border-dark: #d4cfc6;

    /* Text */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #5f6b7a;       /* 5.1:1 on cream, 4.8:1 on --bg-warm */
    --text-inverse: #ffffff;

    /* Effects - tightened shadows for cleaner look */
    --shadow-sm: 0 1px 3px rgba(26, 54, 93, 0.08);
    --shadow-md: 0 4px 12px rgba(26, 54, 93, 0.1);
    --shadow-lg: 0 8px 16px rgba(26, 54, 93, 0.18);
    --shadow-glow: 0 0 40px rgba(217, 119, 6, 0.2);

    /* Spacing - standardized to 2rem base */
    --spacing-base: 2rem;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Latin text falls to system fonts before any emoji font, so a slow or
       blocked DM Sans never renders words in an emoji face. */
    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';

    /* ---- Tool color system (see design/README.md) ----
       The tool colors live here and nowhere else. For each tool:
         base   fills (buttons, tiles, active nav, step dots)
         light  hover fill
         dark   the tool color as text or a thin line on white and cream (4.5:1 or better)
         ink    text on the base fill (navy where white fails, white where it passes)
         tint   soft wash for hover and focus backgrounds
         glow   shadow color */
    --tool-package: #2eb67d;                 /* brand green */
    --tool-package-light: #3ed68d;
    --tool-package-dark: #1a7f54;
    --tool-package-ink: #142942;
    --tool-package-tint: rgba(46, 182, 125, 0.09);
    --tool-package-glow: rgba(46, 182, 125, 0.3);

    --tool-brief: #2a4d7a;                   /* brand blue */
    --tool-brief-light: #1e3a5f;
    --tool-brief-dark: #2a4d7a;
    --tool-brief-ink: #ffffff;
    --tool-brief-tint: rgba(42, 77, 122, 0.07);
    --tool-brief-glow: rgba(42, 77, 122, 0.3);

    --tool-fly: #d97706;                     /* brand gold/orange */
    --tool-fly-light: #f59e0b;
    --tool-fly-dark: #b45309;
    --tool-fly-ink: #142942;
    --tool-fly-tint: rgba(217, 119, 6, 0.08);
    --tool-fly-glow: rgba(217, 119, 6, 0.3);

    --tool-pathways: #7a4fb0;                /* plum: the fourth tool */
    --tool-pathways-light: #5b3a8f;
    --tool-pathways-dark: #7a4fb0;
    --tool-pathways-ink: #ffffff;
    --tool-pathways-tint: rgba(122, 79, 176, 0.08);
    --tool-pathways-glow: rgba(122, 79, 176, 0.3);

    --tool-stories: #be185d;                 /* raspberry */
    --tool-stories-light: #9d174d;
    --tool-stories-dark: #be185d;
    --tool-stories-ink: #ffffff;
    --tool-stories-tint: rgba(190, 24, 93, 0.08);
    --tool-stories-glow: rgba(190, 24, 93, 0.3);

    --tool-notes: #0e7490;                   /* deep teal */
    --tool-notes-light: #155e75;
    --tool-notes-dark: #0e7490;
    --tool-notes-ink: #ffffff;
    --tool-notes-tint: rgba(14, 116, 144, 0.08);
    --tool-notes-glow: rgba(14, 116, 144, 0.3);

    /* Neutral (home, Saved Profiles, Settings, login): navy. */
    --tool: var(--primary);
    --tool-hover: var(--primary-light);
    --tool-text: var(--primary);
    --tool-ink: #ffffff;
    --tool-tint: rgba(30, 58, 95, 0.06);
    --tool-glow: rgba(30, 58, 95, 0.25);
}

/* One mechanism: data-tool on <body> (set by showPage and by the Career
   Pathways page) or on a home card switches the working set above. */
[data-tool="package"],
[data-tool="brief"],
[data-tool="fly"],
[data-tool="pathways"],
[data-tool="stories"],
[data-tool="notes"] {
    --tool-edge: var(--tool);
    --tool-signal: var(--tool-text);
}
[data-tool="package"]  { --tool: var(--tool-package);  --tool-hover: var(--tool-package-light);  --tool-text: var(--tool-package-dark);  --tool-ink: var(--tool-package-ink);  --tool-tint: var(--tool-package-tint);  --tool-glow: var(--tool-package-glow); }
[data-tool="brief"]    { --tool: var(--tool-brief);    --tool-hover: var(--tool-brief-light);    --tool-text: var(--tool-brief-dark);    --tool-ink: var(--tool-brief-ink);    --tool-tint: var(--tool-brief-tint);    --tool-glow: var(--tool-brief-glow); }
[data-tool="fly"]      { --tool: var(--tool-fly);      --tool-hover: var(--tool-fly-light);      --tool-text: var(--tool-fly-dark);      --tool-ink: var(--tool-fly-ink);      --tool-tint: var(--tool-fly-tint);      --tool-glow: var(--tool-fly-glow); }
[data-tool="pathways"] { --tool: var(--tool-pathways); --tool-hover: var(--tool-pathways-light); --tool-text: var(--tool-pathways-dark); --tool-ink: var(--tool-pathways-ink); --tool-tint: var(--tool-pathways-tint); --tool-glow: var(--tool-pathways-glow); }
[data-tool="stories"]  { --tool: var(--tool-stories);  --tool-hover: var(--tool-stories-light);  --tool-text: var(--tool-stories-dark);  --tool-ink: var(--tool-stories-ink);  --tool-tint: var(--tool-stories-tint);  --tool-glow: var(--tool-stories-glow); }
[data-tool="notes"]    { --tool: var(--tool-notes);    --tool-hover: var(--tool-notes-light);    --tool-text: var(--tool-notes-dark);    --tool-ink: var(--tool-notes-ink);    --tool-tint: var(--tool-notes-tint);    --tool-glow: var(--tool-notes-glow); }

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* scroll-behavior: smooth removed - causes conflicts with page transitions */
    /* Apply smooth scrolling explicitly where needed instead */
}

body {
    font-family: var(--font-sans);
    background: var(--bg-cream);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography - Consolidated heading sizes */
h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary);
}

/* Large headings (2rem) - main page headings */
h1, .heading-large {
    font-size: 2rem;
}

/* Medium headings (1.5rem) - section headings */
h2, .heading-medium {
    font-size: 1.5rem;
}

/* Small headings (1.15rem) - subsection headings */
h3, .heading-small {
    font-size: 1.15rem;
}

h4, .heading-xs {
    font-size: 1rem;
}

/* App Container */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ============================================
   HEADER - Floating nav style
   ============================================ */
.header {
    background: var(--white);
    padding: 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
    /* Tool pages: a 3px band in the tool color under the header (no layout shift) */
    box-shadow: 0 3px 0 var(--tool-edge, transparent);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0; /* the nav never squeezes (and clips) the logo */
}

.header-logo {
    display: block;
    height: 40px;
    width: auto;
    flex-shrink: 0;
    transition: transform var(--transition-medium);
}

.header-logo:hover {
    transform: scale(1.02);
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    gap: 0.25rem;
    background: var(--bg-warm);
    padding: 0.35rem;
    border-radius: var(--radius-lg);
}

.nav-link {
    padding: 0.5rem 0.9rem;
    white-space: nowrap;
    text-decoration: none;
    color: #4B5563;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 15px;
    transition: all var(--transition-fast);
    position: relative;
}

.nav-link:hover {
    color: var(--primary);
    background: rgba(45, 95, 141, 0.08);
}

.nav-link:focus {
    outline: 2px solid var(--tool-text);
    outline-offset: 2px;
}

.nav-link.active {
    background: var(--tool);
    color: var(--tool-ink);
    box-shadow: 0 2px 8px var(--tool-glow);
    font-weight: 600;
}

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

.account-logout:hover {
    color: var(--danger);
    background: rgba(220, 38, 38, 0.08);
}

/* Organization Banner */
.org-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--text-inverse);
    text-align: center;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    flex: 1;
    padding: var(--spacing-base);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    /* Use grid to prevent height jumps during page transitions */
    display: grid;
    grid-template-rows: 1fr;
    position: relative;
}

.page {
    display: none;
    /* A grid item sizes to its min-content by default; without this one
       long unbreakable line widens the whole page at phone width. */
    min-width: 0;
    /* Place all pages in same grid cell to prevent layout shifts */
    grid-row: 1;
    grid-column: 1;
    /* No default animation - only animate during explicit transitions */
}

.page.active {
    display: block;
}

/* During transitions, both pages exist in same grid cell */
.page.page-exiting,
.page.page-entering {
    display: block;
    grid-row: 1;
    grid-column: 1;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   HOME PAGE - Hero Section
   ============================================ */
.hero-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
}

.hero {
    text-align: center;
    padding: 3rem 3rem 3.5rem;
    background: linear-gradient(145deg, var(--primary) 0%, var(--primary-light) 50%, var(--teal-dark) 100%);
    color: var(--text-inverse);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    max-width: 700px;
    width: 100%;
}

/* Decorative elements */
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(217, 119, 6, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
}

.hero-logo {
    max-width: 320px;
    height: auto;
    margin: 0 auto 1rem;
    display: block;
    position: relative;
    z-index: 1;
    filter: brightness(0) invert(1);
}

.hero-tagline {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 0.75rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 550px;
    margin: 0 auto 2rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* ============================================
   FEATURE CARDS
   ============================================ */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.feature-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* General card padding improvement */
.card,
.feature-box {
    padding: 2rem !important;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--teal-dark));
}

/* Checkmark indicator */
.feature-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(46, 182, 125, 0.3);
}

.feature-icon {
    font-size: 2.75rem;
    margin-bottom: 1rem;
    display: block;
}

.feature-card h3 {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ============================================
   HOME TOOL PICKER (signed-in home page)
   Design: see design/README.md
   ============================================ */
.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;
}

#homePage [hidden] {
    display: none !important;
}

/* .main-content is a grid; min-width 0 keeps the sideways chip row from
   stretching the page on phones. */
#homePage,
#homePage .home-section {
    min-width: 0;
}

/* Intro: org logo (if set) left of the greeting */
.home-intro {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.75rem;
    /* v2 color pass: the old hero gradient at about a third of the height */
    background: linear-gradient(145deg, var(--primary) 0%, var(--primary-light) 50%, var(--teal-dark) 100%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.home-intro .org-logo-area {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    background: var(--white);
    border-radius: var(--radius-md);
}

.home-intro .org-logo-area img {
    display: block;
    max-height: 56px;
    max-width: 200px;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.home-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--text-inverse);
    line-height: 1.2;
    margin: 0;
}

.home-subline {
    font-size: 1.1rem;
    color: var(--text-inverse);
    opacity: 0.95;
    margin: 0.35rem 0 0;
}

/* Sections and eyebrow labels */
.home-section + .home-section {
    margin-top: 2.5rem;
}

.home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.home-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.8;
    margin: 0 0 0.75rem;
}

.home-section-head .home-eyebrow {
    margin-bottom: 0;
}

.home-see-all {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.5rem 0;
    white-space: nowrap;
}

.home-see-all:focus-visible,
.profile-chip:focus-visible,
.tool-card .tool-open:focus-visible,
.loaded-bar .btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Profile chips */
.resume-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.resume-item {
    flex: 1 1 220px;
    max-width: calc(25% - 0.75rem);
    min-width: 0;
}

.profile-chip {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--chip-accent, var(--teal));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.profile-chip .profile-avatar {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    background: var(--chip-accent, var(--teal));
    color: var(--chip-ink, var(--primary-dark));
    box-shadow: none;
}

/* Initial circles cycle through the brand accents. Ink is chosen per color
   so the letter keeps contrast (navy on green and gold, white on blue and deep green). */
.resume-item:nth-child(4n+1) { --chip-accent: var(--teal); --chip-ink: var(--primary-dark); }
.resume-item:nth-child(4n+2) { --chip-accent: var(--primary-light); --chip-ink: var(--white); }
.resume-item:nth-child(4n+3) { --chip-accent: var(--accent); --chip-ink: var(--primary-dark); }
.resume-item:nth-child(4n+4) { --chip-accent: var(--teal-dark); --chip-ink: var(--white); }

.profile-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-chip-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
}

.profile-chip-job {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-chip-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.home-switch-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 1.25rem 0 0.5rem;
}

/* Loaded-profile bar */
.loaded-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(46, 182, 125, 0.08);
    border: 1px solid var(--teal);
    border-radius: var(--radius-lg);
}

.loaded-bar-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.loaded-bar .profile-avatar {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.loaded-bar-name {
    margin: 0;
    color: var(--primary);
}

.loaded-bar-name strong {
    font-weight: 700;
}

.loaded-bar-job {
    font-weight: 400;
    color: var(--text-secondary);
}

.loaded-bar-note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.loaded-bar-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.loaded-bar .btn {
    min-height: 44px;
}

/* Tool grid and cards */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    padding: 1.75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 5px solid var(--tool);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Each card carries data-tool (package, brief, fly, pathways), so the card edge,
   icon tile, badge and Open button all read the same tool tokens. The tint
   only shows on hover and focus. */

.tool-card:nth-child(2) { animation-delay: 60ms; }
.tool-card:nth-child(3) { animation-delay: 120ms; }
.tool-card:nth-child(4) { animation-delay: 180ms; }

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

.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--tool);
    color: var(--tool-ink);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tool-icon svg,
.tool-external,
.ui-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tool-badge {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--tool-tint);
    border: 1px solid var(--tool);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}

.tool-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--primary);
    margin: 1rem 0 0;
}

.tool-line {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
}

/* Open buttons take the card's tool color and ink (navy on green and orange,
   white on blue and plum). The button is static so its ::after stretches over the whole card as a click target. */
.tool-card .tool-open {
    position: static;
    align-self: flex-start;
    margin-top: auto;
    min-height: 44px;
    padding: 0.7rem 1.5rem;
}

.tool-card .tool-line {
    margin-bottom: 1.25rem;
}

.tool-card .tool-open::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
}

#homePage .btn-primary {
    font-weight: 700;
}

#homePage .btn-primary:hover {
    transform: none;
}

#homePage .btn-secondary:hover {
    transform: none;
}

#homePage .btn:focus:not(:focus-visible) {
    outline: none;
}

.tool-card .btn-secondary {
    border-color: var(--tool);
    color: var(--primary);
}

.tool-card:focus-within {
    border-color: var(--tool);
    background: var(--tool-tint);
    box-shadow: var(--shadow-md);
}

.tool-card:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
    .tool-card:hover {
        border-color: var(--tool);
        background: var(--tool-tint);
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

    .profile-chip:hover {
        border-color: var(--border-dark);
        border-left-color: var(--chip-accent, var(--teal));
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .tool-card:hover .tool-icon {
        transform: scale(1.06);
    }
}

.profile-chip:focus-visible {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.home-footnote {
    margin: 2.5rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* "What you will get" on the Job Application Package page */
.package-explainer {
    margin: 0 0 1.5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.package-explainer summary {
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    min-height: 44px;
    font-weight: 600;
    color: var(--primary);
}

.package-explainer summary:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.package-explainer-list {
    margin: 0;
    padding: 0 1.1rem 1rem 2.25rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.package-explainer-list li + li {
    margin-top: 0.4rem;
}

.package-explainer-list strong {
    color: var(--primary);
}

@media (max-width: 768px) {
    .resume-item {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .main-content:has(#homePage.active) {
        padding-left: 16px;
        padding-right: 16px;
    }

    .home-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
        margin-bottom: 2rem;
        padding: 1.25rem 1rem;
    }

    .home-intro .org-logo-area img {
        max-height: 44px;
        max-width: 160px;
    }

    .home-section + .home-section {
        margin-top: 2rem;
    }

    /* Chips scroll sideways on phones; the page itself never does. */
    .resume-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        gap: 0.75rem;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .resume-row::-webkit-scrollbar {
        display: none;
    }

    .resume-item {
        flex: 0 0 240px;
        scroll-snap-align: start;
    }

    .loaded-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .loaded-bar-actions .btn {
        flex: 1;
    }

    .tool-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tool-card {
        min-height: 0;
        padding: 1.25rem;
    }

    .tool-card .tool-open {
        align-self: stretch;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tool-card {
        animation: none;
    }

    .tool-card:hover,
    .profile-chip:hover,
    .tool-card:hover .tool-icon {
        transform: none;
    }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.75rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--tool);
    color: var(--tool-ink); /* navy where white fails (green, orange), white elsewhere */
    box-shadow: 0 2px 8px var(--tool-glow);
}

.btn-primary:hover {
    background: var(--tool-hover);
    color: var(--tool-ink);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 16px var(--tool-glow);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary:focus {
    outline: 2px solid var(--tool-text);
    outline-offset: 3px;
}

/* Accent button variant for secondary highlights */
.btn-accent {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.btn-accent:hover {
    background: var(--accent-light);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4);
}

.btn-accent:active {
    transform: translateY(0) scale(0.98);
}

.btn-accent:focus {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.btn-secondary {
    background: var(--white);
    color: var(--text-primary);
    border: 2px solid var(--border-dark);
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-warm);
    transform: scale(1.02);
}

.btn-secondary:active {
    transform: scale(0.98);
}

.btn-secondary:focus {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.05rem;
}

.btn-hero {
    padding: 1.25rem 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 6px 24px var(--tool-glow);
    letter-spacing: 0.02em;
}

.btn-hero:hover {
    box-shadow: 0 8px 32px var(--tool-glow);
    transform: translateY(-3px);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================
   FORM CONTAINER
   ============================================ */
.form-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 2.5rem;
    position: relative;
    border: 1px solid var(--border);
    min-height: 600px; /* Prevents height changes during step transitions */
}

/* Feature Identifier Badge */
.feature-identifier {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--tool);
    color: var(--tool-ink);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px var(--tool-glow);
}

.feature-icon-small {
    display: inline-flex;
    line-height: 1;
}

.feature-name {
    letter-spacing: 0.01em;
}

/* ============================================
   PROGRESS STEPS - Journey visualization
   ============================================ */
.form-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-base);
    padding: 1.25rem var(--spacing-base);
    background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-cream) 100%);
    border-radius: var(--radius-lg);
    position: relative;
}

/* Progress line */
.form-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 4rem;
    right: 4rem;
    height: 2px;
    background: var(--border-dark);
    transform: translateY(-50%);
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
    transition: all var(--transition-medium);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0.25rem;
    font: inherit;
    color: inherit;
    border-radius: var(--radius-md);
}

.progress-step:focus-visible {
    outline: 3px solid var(--tool-text);
    outline-offset: 2px;
}

.progress-step:hover {
    opacity: 1 !important;
    transform: scale(1.05);
}

.progress-step:not(.active):not(.completed) {
    opacity: 0.5;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all var(--transition-medium);
    box-shadow: var(--shadow-sm);
}

.progress-step.active .step-number {
    background: var(--tool);
    border-color: var(--tool);
    color: var(--tool-ink);
    transform: scale(1.15);
    box-shadow: 0 0 0 4px var(--tool-tint), 0 4px 12px var(--tool-glow);
}

.progress-step.completed .step-number {
    background: var(--tool-text);
    border-color: var(--tool-text);
    color: var(--white);
}

.progress-step.completed .step-number::after {
    content: '\2713';
    font-size: 1.1rem;
}

.progress-step.completed .step-number span {
    display: none;
}

.step-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

.step-time {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

.progress-step.active .step-label {
    color: var(--tool-text);
    font-weight: 600;
}

.progress-step.active .step-time {
    color: var(--tool-text);
}

/* ============================================
   FORM STEPS
   ============================================ */
/* Form steps container - use grid to prevent height jumps */
#intakeForm {
    display: grid;
    grid-template-rows: 1fr;
    position: relative;
}

.form-step {
    display: none;
    grid-row: 1;
    grid-column: 1;
}

.form-step.active {
    display: block;
}

/* During transitions, both steps exist in same grid cell */
/* This prevents height changes as they're overlaid */
.form-step.step-exiting,
.form-step.step-entering {
    display: block;
    grid-row: 1;
    grid-column: 1;
}

.form-step.step-exiting {
    z-index: 1;
    pointer-events: none;
}

.form-step.step-entering {
    z-index: 2;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-step h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
    position: relative;
}

.form-step > .form-navigation:first-of-type {
    margin-bottom: 2rem;
}

.form-step h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--tool);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.85rem 1.15rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--border-dark);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--tool-text);
    box-shadow: 0 0 0 4px var(--tool-tint);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* Form validation states */
.form-group.error input,
.form-group.error textarea,
.form-group.error select {
    border-color: #EF4444;
    background-color: rgba(239, 68, 68, 0.05);
}

.form-group.error input:focus,
.form-group.error textarea:focus,
.form-group.error select:focus {
    border-color: #EF4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.form-group.success input,
.form-group.success textarea,
.form-group.success select {
    border-color: var(--success);
    background-color: rgba(46, 182, 125, 0.05);
}

.form-group.success input:focus,
.form-group.success textarea:focus,
.form-group.success select:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 4px rgba(46, 182, 125, 0.15);
}

.error-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #EF4444;
}

.success-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--success);
}

.success-message::before {
    content: '✓';
    font-weight: bold;
    font-size: 1rem;
}

/* Required field indicator */
.form-group label[required]::after,
.form-group label.required::after {
    content: ' *';
    color: #EF4444;
    font-weight: 700;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.form-help {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Emotional Framing for Sensitive Sections */
.emotional-framing {
    background: linear-gradient(135deg, #fff9f0 0%, #fff 100%);
    border-left: 3px solid var(--accent);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.framing-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.framing-icon {
    display: inline-flex;
    line-height: 1;
    flex-shrink: 0;
    color: var(--primary);
}

.framing-text {
    flex: 1;
}

/* Checkbox Grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
}

@media (max-width: 768px) {
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.95rem;
}

.checkbox-item:hover {
    background: #f0f9f6;
    border-color: var(--primary);
}

.checkbox-item label {
    cursor: pointer;
    user-select: none;
    transition: font-weight var(--transition-fast);
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.checkbox-item input[type="checkbox"]:checked + label {
    font-weight: 600;
}

.checkbox-item:has(input[type="checkbox"]:checked) {
    background: #e8f8f4;
    border-left: 2px solid #2ECC71;
    border-color: #2ECC71;
}

/* ============================================
   EXPERIENCE SECTIONS
   ============================================ */
.experience-section {
    background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-cream) 100%);
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.75rem;
    border: 1px solid var(--border);
}

.experience-section h3 {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.experience-section h3::before {
    content: '';
    width: 4px;
    height: 1.2em;
    background: var(--tool);
    border-radius: 2px;
}

/* Collapsible Experience Sections */
.collapsible-section {
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.collapsible-section.expanded {
    border-color: var(--tool);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-cream) 100%);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.section-header:focus-visible {
    outline: 3px solid var(--tool-text);
    outline-offset: -3px;
}

.section-header:hover {
    background: linear-gradient(135deg, #fff9f0 0%, var(--bg-warm) 100%);
}

.section-title {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 1.2em;
    background: var(--tool);
    border-radius: 2px;
}

.section-toggle {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tool-text);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tool-tint);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.collapsible-section.expanded .section-toggle {
    background: var(--tool);
    color: var(--tool-ink);
}

.section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1.5rem;
}

.collapsible-section.expanded .section-content {
    max-height: 3000px;
    padding: 1.5rem 1.5rem 1.25rem;
}

.step-intro {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: var(--bg-warm);
    border-radius: var(--radius-md);
}

.work-entry,
.education-entry {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   FORM NAVIGATION
   ============================================ */
.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border);
}

/* ============================================
   REVIEW SUMMARY
   ============================================ */
.review-summary {
    background: var(--bg-warm);
    padding: 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.review-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.review-list {
    margin: 0;
    padding-left: 1.25rem;
}

.review-list li {
    margin-bottom: 0.25rem;
}

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

.review-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.review-section h4 {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tool-text);
    margin-bottom: 0.75rem;
}

.review-section p {
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
}

/* Save Profile Option */
.save-profile-option {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.06) 0%, rgba(217, 119, 6, 0.06) 100%);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    border-left: 4px solid var(--accent);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    font-weight: 600;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.consent-text {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* ============================================
   LOADING OVERLAY
   ============================================ */
.loading-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.97);
    border-radius: var(--radius-xl);
    z-index: 100;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.loading-overlay.active {
    display: flex;
}

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

.spinner {
    width: 56px;
    height: 56px;
    border: 4px solid var(--border);
    border-top-color: var(--tool);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1.25rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-content p {
    font-weight: 600;
    color: var(--primary);
    font-size: 1.1rem;
}

/* Loading messages container for staged messaging */
.loading-messages {
    position: relative;
    min-height: 2em;
    margin-bottom: 0.5rem;
}

.loading-messages .loading-message {
    position: absolute;
    width: 100%;
    text-align: center;
    font-weight: 600;
    color: var(--primary);
    font-size: 1.1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 400ms ease, transform 400ms ease;
}

.loading-messages .loading-message.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}

.loading-messages .loading-message.exiting {
    opacity: 0;
    transform: translateY(-10px);
}

.loading-subtext {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    font-weight: 400;
}

/* Loading reassurance message */
.loading-reassurance {
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--tool-tint);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* What Happens Next (Step 5 Expectations) */
.what-happens-next {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--bg-warm);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    margin-bottom: 2rem;
}

.whn-icon {
    /* Same tile as the home tool icons: 48px, tinted, navy line icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-warm);
    color: var(--primary);
}

.whn-content {
    flex: 1;
}

.whn-content h3 {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
}

.whn-content ul {
    margin: 0;
    padding: 0 0 0 1.25rem;
    list-style-type: none;
}

.whn-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.whn-content li:last-child {
    margin-bottom: 0;
}

.whn-content li::before {
    content: ''; /* the icon set's arrow, drawn as a mask in the BEFORE SET block */
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.whn-content strong {
    color: var(--primary);
    font-weight: 600;
}

/* ============================================
   UPLOAD BOX (package step 1 only)
   ============================================ */
.upload-section {
    background: var(--bg-warm);
    border: 1px dashed var(--border-dark);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.upload-section[hidden] {
    display: none;
}

.upload-section > summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.upload-section[open] {
    padding-bottom: 1rem;
}

.upload-section > :not(summary) {
    margin-left: 1rem;
    margin-right: 1rem;
}

.upload-section-body {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Results carry their own badge; hide the page's while they show */
.form-container.showing-results > .feature-identifier {
    display: none;
}

/* ============================================
   RESULTS CONTAINER
   ============================================ */
.results-container {
    display: none;
    text-align: center;
    animation: celebrateIn 0.6s ease;
}

.results-container.active {
    display: block;
}

@keyframes celebrateIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.results-container h2 {
    color: var(--primary);
    margin-bottom: 0.75rem;
    font-size: 2rem;
}

.results-subtext {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-base);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Courage Acknowledgment */
.courage-acknowledgment {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: linear-gradient(135deg, #fff9f0 0%, #fffbf5 100%);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin: 2rem auto 2.5rem;
    max-width: 700px;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.15);
}

.courage-icon {
    /* Same tile as the home tool icons: 48px, tinted, navy line icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-warm);
    color: var(--primary);
}

.courage-message {
    flex: 1;
}

.courage-headline {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.courage-body {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.document-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.document-card {
    background: var(--white);
    padding: 2rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    transition: all var(--transition-medium);
}

.document-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.document-icon {
    /* Same tile as the home tool icons: 48px, tinted, navy line icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-warm);
    color: var(--primary);
    margin-bottom: 1rem;
}

.document-card h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.document-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.document-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.document-card .btn {
    margin-top: auto;
}

.document-card .document-preview-label {
    align-self: stretch;
    margin: 0 0 0.35rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.document-card .document-preview {
    align-self: stretch;
    text-align: left;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.55;
    background: var(--bg-cream);
    border-left: 3px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.document-card .document-preview-label:has(+ .document-preview[hidden]) {
    display: none;
}

.results-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.next-steps-section {
    text-align: left;
}

/* A quiet text link styled from a button (keeps keyboard and click behavior). */
.link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    font: inherit;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.link-button:hover {
    color: var(--primary-light);
}

.link-button:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Post-Generation Guidance */
.post-generation-guidance {
    background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-cream) 100%);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 3rem;
}

.post-generation-guidance h3 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.guidance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.guidance-card {
    background: var(--white);
    padding: 1.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: flex;
    flex-direction: column;
}

.guidance-card:nth-child(1) {
    animation-delay: 0ms;
}

.guidance-card:nth-child(2) {
    animation-delay: 150ms;
}

.guidance-card:nth-child(3) {
    animation-delay: 300ms;
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guidance-icon {
    /* Same tile as the home tool icons: 48px, tinted, navy line icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-warm);
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.guidance-card h4 {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    text-align: left;
}

.guidance-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    text-align: left;
}

.guidance-card ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: none;
    text-align: left;
}

.guidance-card li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.guidance-card li:last-child {
    margin-bottom: 0;
}

.guidance-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 700;
    font-size: 1.2rem;
}

/* ============================================
   PROFILES PAGE
   ============================================ */
.page-description {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.profiles-list {
    display: grid;
    gap: 1rem;
}

.profile-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    transition: all var(--transition-medium);
    position: relative;
}

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

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 300px;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.profile-info {
    flex: 1;
}

.profile-info h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary);
    font-size: 1.15rem;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.profile-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

.profile-actions .btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.profile-actions .btn-delete:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: #fff5f5;
}

.profile-actions .btn-delete[hidden] {
    display: none;
}

.profile-delete-confirm {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.profile-delete-question {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.no-profiles {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border);
}

.empty-state-icon {
    /* Same tile as the home tool icons: 48px, tinted, navy line icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-warm);
    color: var(--primary);
    margin-bottom: 1rem;
}

.empty-state-heading {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.empty-state-text {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.no-profiles p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* ============================================
   SETTINGS PAGE
   ============================================ */
.settings-form {
    max-width: 550px;
}

.settings-section {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 2px solid var(--border);
}

.settings-section h3 {
    margin-bottom: 0.75rem;
}

.logo-upload {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.logo-preview {
    width: 160px;
    height: 90px;
    border: 2px dashed var(--border-dark);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    overflow: hidden;
    background: var(--bg-warm);
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.color-picker {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.color-picker input[type="color"] {
    width: 56px;
    height: 44px;
    padding: 2px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--white);
}

.color-picker input[type="text"] {
    width: 110px;
}

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

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--white);
    padding: 1.25rem 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--border);
}

.footer-tagline {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

/* ============================================
   LOGIN SCREEN
   ============================================ */
/* ============================================
   LANDING PAGE
   ============================================ */

.landing-page {
    min-height: 100vh;
    background: var(--white);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.landing-container {
    margin: 0 auto;
    padding: 0 1.5rem;
}

.landing-hero .landing-container,
.landing-footer .landing-container {
    max-width: 1200px;
}

/* Hero Section */
.landing-hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    padding: 3rem 0;
    text-align: center;
    width: 100%;
}

.landing-logo {
    max-width: 380px;
    width: 100%;
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
    position: relative;
    z-index: 2;
    animation: fadeInDown 0.8s ease;
    background: rgba(255, 255, 255, 0.35);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

.landing-headline {
    font-size: 2.25rem;
    color: var(--white);
    margin-bottom: 1rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.8s ease 0.2s both;
}

.landing-subheadline {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.8s ease 0.4s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Middle Container - Three Columns Side by Side */
.landing-middle {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 0;
}

/* Landing Sections - Asymmetric layout: 30% | 30% | 40% */
.landing-section {
    padding: var(--spacing-base);
    min-width: 0;
}

.landing-features {
    background: var(--white);
    flex: 0 0 30%;
}

.landing-for-who {
    background: var(--bg-cream);
    flex: 0 0 30%;
}

/* Access section - 40% width, more prominent */
.landing-access {
    background: linear-gradient(135deg, var(--bg-cream) 0%, var(--white) 100%);
    flex: 0 0 40%;
    position: relative;
}

.section-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.section-subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

.feature-box {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition-medium);
    border: 1px solid var(--border);
    cursor: default;
}

.feature-box:hover {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(46, 182, 125, 0.15), var(--shadow-sm);
}

.feature-icon-large {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.feature-box h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.feature-box p {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Who It's For Section */
.landing-for-who {
    background: var(--bg-warm);
}

.two-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

.column {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--teal);
    transition: all var(--transition-medium);
    cursor: default;
}

.column:hover {
    box-shadow: 0 0 0 3px rgba(46, 182, 125, 0.15), var(--shadow-sm);
    border-left-color: var(--teal-dark);
}

.column h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.column p {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Access Section */
.landing-access {
    background: var(--bg-cream);
}

.access-card {
    background: var(--white);
    padding: var(--spacing-base) 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 2px solid var(--teal);
    position: relative;
}

/* Subtle highlight border effect */
.access-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    border-radius: calc(var(--radius-lg) + 2px);
    z-index: -1;
    opacity: 0.15;
}

.access-card h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.access-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.access-form {
    text-align: left;
    margin: 2rem 0;
}

.access-form .form-group {
    margin-bottom: 1.5rem;
}

.access-form input {
    text-align: center;
    font-size: 1.15rem;
    letter-spacing: 1.5px;
    font-weight: 500;
    padding: 1rem;
}

.access-form button {
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
}

.access-help {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.access-help a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.access-help a:hover {
    text-decoration: underline;
}

.login-error {
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
    min-height: 1.5rem;
    text-align: center;
}

/* Connection Warning Banner */
.connection-warning {
    background: #fef3c7;
    border: 1px solid #d97706;
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.connection-warning-icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    line-height: 1.4;
}

.connection-warning-text {
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 500;
}

/* Landing Footer */
.landing-footer {
    background: var(--primary-dark);
    color: var(--white);
    padding: 2.5rem 0;
    width: 100%;
}

.footer-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.footer-logo {
    max-width: 250px;
    height: auto;
    background: rgba(255, 255, 255, 0.35);
    padding: 1.25rem 1.75rem;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

.footer-tagline {
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin: 0;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0.5rem 0;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--white);
}

.footer-divider {
    color: rgba(255, 255, 255, 0.4);
}

.footer-contact {
    margin: 0;
}

.footer-contact a {
    color: var(--accent-light);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .features,
    .document-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .header-logo {
        height: 80px;
        margin: -20px 0;
    }

    /* The 80px-tall logo is wider than a 375px phone; shrink it to fit. */
    .logo-area {
        max-width: 100%;
    }

    .header-logo {
        max-width: 100%;
        height: auto;
        max-height: 80px;
        margin: -8px 0;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .nav-link {
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
    }

    .main-content {
        padding: 1.25rem;
    }

    .hero {
        padding: 2rem 1.5rem 2.5rem;
    }

    .hero-logo {
        max-width: 220px;
        margin: 0 auto 0.75rem;
    }

    .hero-tagline {
        font-size: 1.25rem;
    }

    .form-container {
        padding: 1.5rem;
    }

    .form-progress {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
    }

    .form-progress::before {
        display: none;
    }

    .step-label {
        display: none;
    }

    .form-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .form-navigation .btn {
        width: 100%;
    }

    .login-container {
        padding: 2rem 1.5rem;
    }

    /* Landing page responsive */
    .landing-hero {
        padding: 2.5rem 0;
    }

    .landing-footer {
        padding: 2rem 0;
    }

    .landing-logo {
        max-width: 280px;
    }

    .landing-headline {
        font-size: 1.75rem;
    }

    .landing-subheadline {
        font-size: 1.05rem;
    }

    /* Stack the 3 columns vertically on mobile */
    .landing-middle {
        flex-direction: column;
    }

    .landing-section {
        padding: var(--spacing-base) 1.5rem;
        width: 100%;
        flex: 1 1 auto;
    }

    .landing-features,
    .landing-for-who,
    .landing-access {
        flex: 1 1 auto;
    }

    /* Time estimate badge mobile */
    .time-estimate-badge {
        display: block;
        text-align: center;
    }

    .step-time {
        display: none;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .access-card {
        padding: 2rem 1.5rem;
    }

    .landing-container {
        padding: 0 1.5rem;
    }
}

/* ============================================================================
   TERMS OF SERVICE MODAL
   ========================================================================= */

.terms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.terms-modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.terms-modal h2 {
    color: var(--primary);
    margin: 0;
    padding: 30px 30px 10px 30px;
    font-size: 1.75rem;
    font-family: 'Fraunces', serif;
}

.terms-modal > p {
    padding: 0 30px 20px 30px;
    color: var(--text-secondary);
    margin: 0;
}

.scrollable-terms {
    flex: 1;
    overflow-y: auto;
    padding: 0 30px;
    margin: 0 0 20px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.scrollable-terms h3 {
    color: var(--primary);
    margin: 20px 0 10px 0;
    font-size: 1.1rem;
}

.scrollable-terms ul {
    margin: 0 0 20px 0;
    padding-left: 20px;
}

.scrollable-terms li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.scrollable-terms a {
    color: var(--teal);
    text-decoration: none;
}

.scrollable-terms a:hover {
    text-decoration: underline;
}

.terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 30px;
    margin-bottom: 20px;
    cursor: pointer;
}

.terms-checkbox input[type="checkbox"] {
    margin-top: 3px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.terms-checkbox span {
    color: var(--text-primary);
    line-height: 1.5;
}

.terms-checkbox a {
    color: var(--teal);
    text-decoration: none;
}

.terms-checkbox a:hover {
    text-decoration: underline;
}

.terms-modal button {
    margin: 0 30px 30px 30px;
}

.terms-modal button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Confirm Modal */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.confirm-modal-overlay.modal-visible {
    opacity: 1;
}

.confirm-modal-overlay.modal-exit {
    opacity: 0;
}

.confirm-modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: 100%;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.confirm-modal-overlay.modal-visible .confirm-modal {
    transform: scale(1);
}

.confirm-modal-overlay.modal-exit .confirm-modal {
    transform: scale(0.9);
}

.confirm-message {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 2rem 0;
    text-align: center;
}

.confirm-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.confirm-buttons .btn {
    flex: 1;
    max-width: 150px;
}

.confirm-buttons .btn-secondary {
    background: var(--bg-warm);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.confirm-buttons .btn-secondary:hover {
    background: var(--border);
}

.confirm-buttons .btn-danger {
    background: #e74c3c;
    color: white;
    border: none;
}

.confirm-buttons .btn-danger:hover {
    background: #c0392b;
}

/* Profile Details Modal */
.profile-details-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.profile-details-modal-overlay.modal-visible {
    opacity: 1;
}

.profile-details-modal-overlay.modal-exit {
    opacity: 0;
}

.profile-details-modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.2s ease;
    overflow: hidden;
}

.profile-details-modal-overlay.modal-visible .profile-details-modal {
    transform: scale(1);
}

.profile-details-modal-overlay.modal-exit .profile-details-modal {
    transform: scale(0.9);
}

.profile-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-cream) 100%);
}

.profile-details-header h3 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
    line-height: 1;
}

.modal-close-btn:hover {
    background: var(--border);
    color: var(--text-primary);
}

.profile-details-content {
    padding: 2rem;
}

.profile-detail-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-detail-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 100px;
    font-size: 0.9rem;
}

.profile-detail-value {
    color: var(--text-primary);
    flex: 1;
}

.profile-detail-divider {
    height: 1px;
    background: var(--border);
    margin: 1.5rem 0;
}

.profile-detail-section h4 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 1rem 0;
}

.profile-documents {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
}

.profile-doc-badge.available {
    background: #e8f8f4;
    color: #1d7a52;
    border: 1px solid #2eb67d;
}

.profile-doc-badge.unavailable {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #f5c6cb;
}

.profile-details-footer {
    padding: 1rem 2rem 1.5rem;
    display: flex;
    justify-content: center;
}

.profile-details-footer .btn {
    min-width: 120px;
}

/* Footer Links */
.footer-links {
    margin-top: 10px;
    font-size: 0.9rem;
    text-align: center;
}

.footer-links a {
    color: var(--teal);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
    color: var(--primary);
}

/* Footer Copyright */
.footer-copyright {
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Footer Contact */
.footer-contact {
    margin-top: 5px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.footer-contact a {
    color: var(--teal);
    text-decoration: none;
}

.footer-contact a:hover {
    text-decoration: underline;
    color: var(--primary);
}

@media (max-width: 768px) {
    .terms-modal {
        max-height: 90vh;
    }

    .terms-modal h2 {
        font-size: 1.5rem;
        padding: 20px 20px 10px 20px;
    }

    .terms-modal > p,
    .scrollable-terms,
    .terms-checkbox,
    .terms-modal button {
        padding-left: 20px;
        padding-right: 20px;
    }

    .terms-modal button {
        margin-bottom: 20px;
    }
}

/* ============================================================================
   CAREER EXPLORER
   ============================================================================ */

.career-explorer-container {
    max-width: 900px;
    margin: 0 auto;
}

.career-explorer-container h2 {
    font-family: 'Fraunces', serif;
    color: var(--primary);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.career-explorer-section {
    margin-bottom: 2rem;
}

/* Population selector */
.ce-population-group {
    margin-bottom: 1.5rem;
}

.ce-population-group .form-select {
    max-width: 500px;
}

/* RIASEC Mode Toggle */
.riasec-mode-toggle {
    display: flex;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--border);
    width: fit-content;
    margin-top: 0.5rem;
}

.mode-btn {
    padding: 0.6rem 1.25rem;
    border: none;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mode-btn.active {
    background: var(--primary);
    color: var(--text-inverse);
}

.mode-btn:hover:not(.active) {
    background: var(--bg-warm);
}

/* RIASEC Grid */
.riasec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
}

.riasec-slider-group {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    transition: border-color var(--transition-fast);
}

.riasec-slider-group:hover {
    border-color: var(--tool);
}

.riasec-slider-group label {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.95rem;
    display: block;
}

.riasec-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.15rem 0 0.6rem 0;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.riasec-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    outline: none;
}

.riasec-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--tool);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s;
}

.riasec-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.riasec-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--tool);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
}

.score-value {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
}

/* 3-Letter Code Input */
.riasec-code-input {
    max-width: 200px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.3rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--primary);
}

/* Location */
.ce-location-group {
    margin-top: 1.5rem;
}

.ce-location-group .form-input {
    max-width: 400px;
}

/* Search Button */
.ce-actions {
    margin-top: 1.5rem;
}

.ce-search-btn {
    padding: 0.8rem 2rem;
    font-size: 1rem;
}

/* Loading State */
.ce-loading {
    text-align: center;
    padding: 3rem 1rem;
}

.ce-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.ce-loading-spinner .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--tool);
    border-radius: 50%;
    animation: ce-spin 0.8s linear infinite;
}

@keyframes ce-spin {
    to { transform: rotate(360deg); }
}

.ce-loading-spinner h3 {
    color: var(--primary);
    font-family: 'Fraunces', serif;
    margin: 0;
}

.ce-loading-text {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Error State */
.ce-error {
    text-align: center;
    padding: 2rem;
}

.ce-error-content h3 {
    color: var(--danger);
    margin-bottom: 0.5rem;
}

.ce-error-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Results Header */
.ce-results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.ce-results-summary h3 {
    font-family: 'Fraunces', serif;
    color: var(--primary);
    margin: 0 0 0.25rem 0;
}

.ce-results-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* Result Cards */
.ce-results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ce-result-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-fast);
    border-left: 4px solid var(--tool);
}

.ce-result-card:hover {
    box-shadow: var(--shadow-md);
    border-left-color: var(--primary);
}

.ce-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0.5rem;
}

.ce-card-title-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ce-card-rank {
    font-weight: 700;
    color: var(--tool-text);
    font-size: 0.85rem;
}

.ce-card-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 600;
}

.ce-card-code {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: 'DM Sans', monospace;
}

/* Fit Badges */
.ce-fit-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.fit-best {
    background: rgba(46, 182, 125, 0.15);
    color: var(--teal-dark);
}

.fit-great {
    background: rgba(30, 58, 95, 0.1);
    color: var(--primary);
}

.fit-good {
    background: rgba(113, 128, 150, 0.1);
    color: var(--text-secondary);
}

/* Card Body */
.ce-card-body {
    padding: 0 1.25rem 0.75rem;
}

.ce-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ce-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ce-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 500;
}

.ce-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Outlook colors */
.outlook-growing { color: var(--teal-dark); }
.outlook-stable { color: var(--primary); }
.outlook-slow { color: var(--accent); }
.outlook-declining { color: var(--danger); }
.outlook-unknown { color: var(--text-muted); }

/* Population Notes */
.ce-population-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.ce-population-note {
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    background: var(--tool-tint);
    color: var(--tool-text);
    font-weight: 500;
}

/* Description expand */
.ce-card-description {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 0.5rem;
}

.ce-card-description.collapsed {
    max-height: 0;
    overflow: hidden;
    margin: 0;
}

.ce-toggle-desc {
    background: none;
    border: none;
    color: var(--tool-text);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0.25rem 0;
    font-weight: 500;
}

.ce-toggle-desc:hover {
    text-decoration: underline;
}

/* Card Actions */
.ce-card-actions {
    padding: 0.5rem 1.25rem 1rem;
    display: flex;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

/* Empty Results */
.ce-empty-results {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.ce-empty-results h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

/* Field hint (for RIASEC descriptions) */
.field-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0.5rem;
}

/* O*NET / CareerOneStop Attribution */
.ce-attribution {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.ce-attribution p {
    margin: 0 0 0.35rem;
}

.ce-attribution a {
    color: var(--primary);
    text-decoration: underline;
}

.ce-attribution-logos {
    margin-bottom: 0.75rem;
}

.ce-cos-logo {
    height: 36px;
    width: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .riasec-grid {
        grid-template-columns: 1fr;
    }

    .ce-card-stats {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .ce-results-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ce-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .riasec-mode-toggle {
        width: 100%;
    }

    .mode-btn {
        flex: 1;
        text-align: center;
    }
}

/* ============================================================================
   BUSINESS BRIEF (employer intelligence tool)
   ============================================================================ */
/* The Brief and Fly on the Wall forms sit in the same white card as the package form. */
.brief-form-card {
    max-width: 640px;
    margin-bottom: 2rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}

.fly-form-card {
    max-width: 760px;
}

.form-next-line {
    margin: 1rem 0 0;
}

.brief-results-header .form-next-line {
    margin-top: 0.75rem;
}

.brief-section .brief-label {
    font-family: var(--font-sans);
    margin: 0.75rem 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Hiring Inclusivity Signals (reframe 2026-10-10) */
.brief-signal-list {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 0;
}

.brief-signal-list dt {
    font-weight: 600;
}

.brief-signal-list dd {
    margin: 0;
}

@media (max-width: 640px) {
    .brief-signal-list {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .brief-signal-list dd {
        margin-bottom: 0.6rem;
    }
}

@media (max-width: 640px) {
    .brief-form-card {
        padding: 1.25rem;
        border-radius: var(--radius-lg);
    }
}

.brief-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary, #4a5568);
}

.brief-results-header {
    margin-bottom: 1.5rem;
}

.brief-results-header h3 {
    margin-bottom: 0.25rem;
}

.brief-meta {
    color: var(--text-secondary, #4a5568);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.brief-preview {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.brief-section {
    background: var(--warm-gray, #f5f1eb);
    border: 1px solid var(--border, #e8e4dd);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

.brief-section h3 {
    margin: 0 0 0.75rem 0;
    color: var(--primary, #1e3a5f);
}

.brief-section p {
    margin: 0 0 0.5rem 0;
}

.brief-section ul {
    margin: 0.25rem 0 0.5rem 1.25rem;
}

/* ============================================================================
   FLY ON THE WALL (Phase 3.3). A room, not a prize: no celebration effects.
   ============================================================================ */
.fly-form-card textarea,
.fly-form-card select,
.fly-form-card input[type="text"] {
    width: 100%;
}

.fly-privacy-line {
    font-size: 0.9rem;
    color: var(--text-secondary, #4a5568);
    margin: 0 0 0.5rem 0;
}

.fly-posting {
    margin-bottom: 1.25rem;
}

.fly-posting summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary, #1e3a5f);
    margin-bottom: 0.75rem;
}

.fly-package-link {
    text-align: center;
    margin: 0 0 3rem 0;
}

.fly-results {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fly-cm-note {
    border: 2px solid var(--border-dark, #d4cfc6);
    border-radius: var(--radius-md, 10px);
    padding: 1rem 1.25rem;
    background: var(--white, #ffffff);
}

.fly-cm-label {
    font-weight: 600;
    color: var(--primary, #1e3a5f);
    margin: 0 0 0.25rem 0;
}

.fly-cm-note p:last-child {
    margin: 0;
}

.fly-scene {
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-secondary, #4a5568);
    margin: 0;
}

.fly-readers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: var(--spacing-base);
}

.fly-counter {
    margin: 0.375rem 0 0;
    font-variant-numeric: tabular-nums;
}

.fly-run-hint {
    align-self: center;
    margin: 0;
}

.fly-run-hint[hidden] {
    display: none;
}

.fly-reader-card {
    background: var(--white, #ffffff);
    border: 1px solid var(--border, #e8e4dd);
    border-radius: var(--radius-md, 10px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.fly-reader-role {
    margin: 0;
    color: var(--primary, #1e3a5f);
}

.fly-reader-setting {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted, #718096);
}

.fly-reader-first {
    margin: 0;
    font-weight: 600;
}

.fly-reader-reaction,
.fly-reader-why {
    margin: 0;
}

.fly-reader-why {
    font-size: 0.9rem;
    color: var(--text-secondary, #4a5568);
}

.fly-quote {
    margin: 0;
    padding: 0.6rem 0.8rem;
    background: var(--tool-tint, var(--accent-glow));
    border-left: 3px solid var(--tool, #d97706);
    border-radius: var(--radius-sm, 6px);
    font-style: italic;
    overflow-wrap: anywhere;
}

.fly-quote::before { content: "\201C"; }
.fly-quote::after { content: "\201D"; }

.fly-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    border: 1px solid var(--border-dark, #d4cfc6);
    background: var(--bg-warm, #f5f1eb);
}

.fly-chip-yes { border-color: var(--teal, #2eb67d); }
.fly-chip-maybe { border-color: var(--accent, #d97706); }
.fly-chip-not-yet { border-color: var(--primary-light, #2a4d7a); }

.fly-section {
    background: var(--bg-warm, #f5f1eb);
    border: 1px solid var(--border, #e8e4dd);
    border-radius: var(--radius-md, 10px);
    padding: 1.25rem 1.5rem;
}

.fly-section h3 {
    margin: 0 0 0.75rem 0;
    color: var(--primary, #1e3a5f);
}

.fly-exchange-line {
    margin: 0 0 0.5rem 0;
}

.fly-speaker {
    font-weight: 600;
}

.fly-sub {
    margin: 1rem 0 0.5rem 0;
    color: var(--primary, #1e3a5f);
}

.fly-revision {
    margin-bottom: 1rem;
}

.fly-before,
.fly-after {
    border-radius: var(--radius-sm, 6px);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}

.fly-before {
    background: var(--white, #ffffff);
    border: 1px dashed var(--border-dark, #d4cfc6);
}

.fly-after {
    background: var(--white, #ffffff);
    border: 1px solid var(--tool, #2eb67d);
}

.fly-before p,
.fly-after p {
    margin: 0.25rem 0 0 0;
}

.fly-ba-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #4a5568);
}

.fly-answers {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-secondary, #4a5568);
    margin: 0;
}

.fly-keep {
    margin: 0.25rem 0 0 1.25rem;
}

.fly-actions {
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .fly-readers {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PHONE HEADER (critique Session B item 13)
   Below 640px the header scrolls away with the page and the nav is one row
   that scrolls sideways, so the header is about 120px, not 209px.
   ============================================ */
@media (max-width: 640px) {
    .header {
        position: static;
        padding: 0.5rem 1rem 0.5rem;
        gap: 0.5rem;
        align-items: stretch;
    }

    .logo-area {
        justify-content: center;
    }

    .header-logo {
        height: 40px;
        max-height: 40px;
        width: auto;
        margin: 0;
    }

    .nav-links {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        width: 100%;
        min-width: 0;
    }

    .nav-link {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}


.what-happens-next .whn-icon,
.courage-acknowledgment .courage-icon {
    background: var(--white);
}

/* ============================================================================
   OUR PROGRAMS (Phase 3.5). Settings section and the brief's
   "Where Our Programs Fit". Session B language: white cards, the home icon
   tile, one toast, green primary buttons with navy text.
   ============================================================================ */
.programs-card {
    max-width: 760px;
    margin-top: 3rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    scroll-margin-top: 96px;
}

.programs-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.programs-head .programs-icon {
    margin-bottom: 0;
}

.programs-head h3 {
    margin: 0 0 0.35rem 0;
}

.programs-head .form-help {
    margin-bottom: 0.25rem;
}

.programs-updated {
    font-size: 0.85rem;
}

.programs-unavailable {
    color: var(--text-muted);
    margin: 0;
}

.programs-unavailable[hidden],
.programs-body[hidden],
.programs-empty[hidden],
.programs-list[hidden],
.programs-list-heading[hidden],
#addProgramBtn[hidden],
#programsMaxLine[hidden],
.brief-programs-notice[hidden],
.program-other-add[hidden],
.programs-updated[hidden],
.program-row-actions .btn[hidden],
#briefAddProgramsBtn[hidden] {
    display: none;
}

.programs-about {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.programs-card input[type="text"],
.programs-card input[type="email"],
.programs-card input[type="tel"],
.programs-card textarea {
    width: 100%;
}

.programs-list-heading {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.75rem 0;
}

.programs-list {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.program-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
}

.program-row-text {
    flex: 1 1 260px;
    min-width: 0;
}

.program-row-name {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
}

.program-row-serves {
    max-width: 100%;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.program-row-count {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.program-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.programs-empty {
    text-align: center;
    padding: 2rem 1.25rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}

.programs-empty .empty-state-heading {
    font-size: 1.25rem;
}

.program-editor {
    background: var(--white);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 0 0 1rem 0;
}

.program-editor-title {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 1rem 0;
}

.program-editor fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    min-width: 0;
}

.program-editor legend {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
    padding: 0;
}

.program-editor .form-help {
    margin-bottom: 0.5rem;
}

.program-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.program-benefit {
    font-weight: 500;
    font-size: 0.92rem;
    align-items: flex-start;
    gap: 0.6rem;
}

.program-benefit input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 2px 0 0 0;
    border: none;
    box-shadow: none;
}

.program-benefit span {
    line-height: 1.4;
}

.program-benefits.field-error .program-benefit-grid {
    outline: 2px solid var(--danger);
    outline-offset: 6px;
    border-radius: var(--radius-sm);
}

.program-other {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.program-other label {
    font-weight: 600;
}

.btn-text {
    background: none;
    border: none;
    padding: 0.35rem 0;
    margin-top: 0.35rem;
    font: inherit;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.btn-text:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

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

.text-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Brief page: the info card above the sections and the programs section. */
.brief-programs-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.brief-programs-notice p {
    flex: 1 1 240px;
    margin: 0;
}

.brief-notice-icon {
    display: inline-flex;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.brief-section.brief-program-fit {
    background: var(--bg-warm);
    border-left: 4px solid var(--primary);
}

.program-fit-needs li {
    margin-bottom: 0.5rem;
}

.program-fit-evidence {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0.15rem 0 0 0 !important;
}

.program-fit-match {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
}

.program-fit-name {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.25rem 0;
}

.program-fit-meets {
    font-weight: 600;
    color: var(--text-secondary);
}

.program-fit-pitchline {
    margin: 0.75rem 0 0.5rem 0;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--tool);
    font-style: italic;
    color: var(--text-primary);
}

.program-fit-contact {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.program-fit-contact a {
    color: var(--primary);
}

.program-fit-pitch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.program-fit-pitch-head .brief-label {
    margin: 0;
}

.program-fit-gap {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--white);
    border: 1px dashed var(--border-dark);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    color: var(--text-muted);
}

.program-fit-gap .brief-label {
    margin-top: 0;
}

.program-fit-gap p {
    margin: 0;
}

@media (max-width: 640px) {
    .programs-card {
        padding: 1.25rem;
        border-radius: var(--radius-lg);
    }
    .program-editor {
        padding: 1rem;
    }
    .program-benefit-grid,
    .program-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .programs-head .programs-icon {
        display: none;
    }
}

/* Button rows wrap at phone width instead of pushing the page sideways
   (the brief result header's three buttons overflowed at 375 on main). */
.form-actions {
    flex-wrap: wrap;
}


/* ============================================
   TOOL COLOR SYSTEM: the tool is the space
   Everything below reads --tool, --tool-hover, --tool-text, --tool-ink,
   --tool-tint and --tool-glow, which data-tool switches (see :root).
   No per-page overrides. Settings, Saved Profiles and login carry no
   data-tool and stay navy.
   ============================================ */

/* Page title: an underline in the tool color (no layout change). */
body[data-tool] .page.active > h2,
body[data-tool] .cp-intro h1 {
    text-decoration: underline;
    text-decoration-color: var(--tool);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

/* Main card: a tool-colored top edge, drawn inside the card so nothing moves. */
body[data-tool] .form-container,
body[data-tool] .brief-form-card,
body[data-tool] .cp-form {
    box-shadow: inset 0 5px 0 var(--tool-edge), var(--shadow-md);
}

/* Toast: success and info take the page's tool color. Error stays red. */
.toast-success { --toast-tone: var(--tool-signal, var(--teal-dark)); }
.toast-info { --toast-tone: var(--tool-signal, var(--primary)); }


/* ============================================================================
   BEFORE SET (overall review 2026-10)
   One header pattern, one icon language, one disclosure control, the phone
   menu, tool-colored loading, neutral avatars and the configurable footer line.
   ============================================================================ */

/* ---- Neutral avatars: none of the four tool colors -------------------------- */
:root {
    --avatar-1-bg: #e4dfd7; --avatar-1-ink: #3d3a34;  /* stone */
    --avatar-2-bg: #dde2e8; --avatar-2-ink: #2e3a48;  /* cool grey */
    --avatar-3-bg: #ebe2d2; --avatar-3-ink: #4a3d2c;  /* sand */
    --avatar-4-bg: #d6d3cd; --avatar-4-ink: #33312d;  /* warm grey */
}

.profile-avatar {
    background: var(--avatar-1-bg);
    color: var(--avatar-1-ink);
    box-shadow: inset 0 0 0 1px rgba(26, 32, 44, 0.08);
}

.resume-item:nth-child(4n+1) { --chip-accent: var(--avatar-1-bg); --chip-ink: var(--avatar-1-ink); }
.resume-item:nth-child(4n+2) { --chip-accent: var(--avatar-2-bg); --chip-ink: var(--avatar-2-ink); }
.resume-item:nth-child(4n+3) { --chip-accent: var(--avatar-3-bg); --chip-ink: var(--avatar-3-ink); }
.resume-item:nth-child(4n+4) { --chip-accent: var(--avatar-4-bg); --chip-ink: var(--avatar-4-ink); }

.profile-chip .profile-avatar {
    box-shadow: inset 0 0 0 1px rgba(26, 32, 44, 0.08);
}

/* ---- Page header: tool chip, heading, description --------------------------- */
.page-head {
    margin-bottom: 2rem;
}

.page-head .feature-identifier {
    margin-bottom: 1rem;
}

.page-head h2 {
    margin: 0 0 1.25rem;
}

.page-head .page-description {
    margin: 0;
    max-width: 64ch;
}

body[data-tool] .page.active > .page-head > h2 {
    text-decoration: underline;
    text-decoration-color: var(--tool);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

/* ---- Nav glyphs --------------------------------------------------------------- */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* The nav has seven tool links inline; Saved Profiles, Settings and Logout live
   under the account menu at the right end. Measured 2026-10-05 with
   "Application Package": the seven sit on one row, clear of the logo, down to
   1251px (29px of slack at 1280). The inline nav starts at 1260 and narrower
   screens use the Menu button below.
   Reversible: if the nav gains or loses an inline item, re-measure and move
   both breakpoints, 1259/1260 (and NAV_MENU_MAX in app.js). */
@media (min-width: 1260px) {
    .header {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        gap: 1rem;
    }

    .header-logo {
        height: 34px;
    }

    .nav-links {
        gap: 0.15rem;
        flex-wrap: nowrap;
        align-items: center;
    }

    .nav-links .nav-link {
        padding: 0.5rem 0.42rem;
        gap: 0.3rem;
        font-size: 14px;
    }
}

.nav-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.nav-external-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.nav-menu-btn {
    display: none;
}

/* ---- Account menu: one control for Saved Profiles, Settings, Logout ----------- */
.account-menu {
    position: relative;
    margin-left: 0.35rem;
    flex-shrink: 0;
}

.account-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 40px;
    padding: 0 0.5rem 0 0.35rem;
    border: 1px solid var(--border-dark);
    border-radius: 999px;
    background: var(--white);
    color: var(--primary);
    font: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.account-btn:hover,
.account-btn[aria-expanded="true"] {
    background: var(--bg-warm);
}

.account-btn:focus-visible {
    outline: 3px solid var(--tool-text);
    outline-offset: 2px;
}

.account-btn.active {
    border-color: var(--tool-text, var(--primary));
}

.account-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--avatar-1-bg);
    color: var(--avatar-1-ink);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

.account-caret {
    opacity: 0.7;
}

.account-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 120;
    min-width: 200px;
    padding: 0.35rem;
    background: var(--white);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(26, 32, 44, 0.14);
}

.account-panel[hidden] {
    display: none;
}

.account-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    text-decoration: none;
    color: #374151;
    border-radius: var(--radius-sm, 6px);
    font-weight: 500;
    font-size: 15px;
}

.account-item:hover,
.account-item:focus-visible {
    background: var(--bg-warm);
    color: var(--primary);
    outline: none;
}

.account-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--tool-text, var(--primary));
}

.account-item.active {
    background: var(--tool);
    color: var(--tool-ink);
    font-weight: 600;
}

.account-logout:hover,
.account-logout:focus-visible {
    color: var(--danger);
    background: rgba(220, 38, 38, 0.08);
}

/* ---- Menu navigation: a Menu button that opens the full list ------------------
   Phones and any screen too narrow for ten items on one row (see above). */
@media (max-width: 1259px) {
    .header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .logo-area {
        justify-content: flex-start;
        min-width: 0;
    }

    /* Logo and Menu button share one row. */
    .header-logo {
        height: 30px;
        max-height: 30px;
    }

    .nav-menu-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 44px;
        padding: 0 0.9rem;
        border: 1px solid var(--border-dark);
        border-radius: var(--radius-md);
        background: var(--white);
        color: var(--primary);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .nav-menu-btn:focus-visible {
        outline: 3px solid var(--tool-text);
        outline-offset: 2px;
    }

    .header.nav-open .nav-menu-btn {
        background: var(--bg-warm);
    }

    .nav-links {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
        width: 100%;
        gap: 0.15rem;
    }

    .header.nav-open .nav-links {
        display: flex;
    }

    .nav-links .nav-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 44px;
        padding: 0.5rem 0.85rem;
        font-size: 1rem;
    }

    /* The account menu flattens into the list: no button, items always shown. */
    .account-menu {
        width: 100%;
        margin: 0.15rem 0 0;
        border-top: 1px solid var(--border);
        padding-top: 0.15rem;
    }

    .account-btn {
        display: none;
    }

    .account-panel,
    .account-panel[hidden] {
        display: flex;
        flex-direction: column;
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .account-item {
        min-height: 44px;
        padding: 0.5rem 0.85rem;
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .header-logo {
        height: 26px;
        max-height: 26px;
    }

    .nav-menu-btn {
        padding: 0 0.7rem;
    }
}

/* ---- One disclosure control: the package's plus and minus circle -------------- */
.disclosure-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--primary);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.disclosure-toggle:focus-visible {
    outline: 3px solid var(--tool-text);
    outline-offset: -3px;
}

.disclosure-toggle .section-toggle {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    font-size: 1.2rem;
    line-height: 1;
}

.disclosure.expanded .disclosure-toggle .section-toggle {
    background: var(--tool);
    color: var(--tool-ink);
}

.disclosure-body[hidden] {
    display: none;
}

.package-explainer .disclosure-toggle {
    padding: 0.85rem 1.1rem;
}

.upload-section > .disclosure-toggle {
    margin: 0;
    font-size: 0.95rem;
}

.upload-section > .disclosure-body {
    margin: 0;
    padding: 0 1rem 1rem;
}

.fly-posting {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.fly-posting .disclosure-body {
    padding: 0 1rem 0.25rem;
}

/* ---- Icon buttons: downloads and copy ----------------------------------------- */
.btn-icon svg {
    flex-shrink: 0;
}

.btn-copy {
    padding: 0.4rem 0.8rem;
}

.program-fit-contact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.program-fit-contact-row .program-fit-contact {
    margin: 0;
    flex: 1 1 220px;
}

/* ---- Lists: the icon set's arrow, not a text arrow ---------------------------- */
.whn-content li::before {
    content: '';
    top: 0.3em;
    width: 15px;
    height: 15px;
    background: var(--tool-text, var(--primary));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Loading: the tool's icon and color, centered in the window ---------------- */
.loading-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--tool-tint);
    color: var(--tool-text);
}

.loading-content .loading-tool-icon {
    margin: 0 auto 1rem;
}

.loading-overlay {
    align-items: flex-start;
    background: linear-gradient(var(--tool-tint), var(--tool-tint)), rgba(255, 255, 255, 0.97);
    z-index: 90; /* under the sticky header (100), so the nav stays readable */
}

.loading-overlay .loading-content {
    position: sticky;
    top: calc(50vh - 130px);
    margin: max(2rem, calc(50vh - 260px)) 0 2rem;
    padding: 0 1rem;
}

.loading-messages {
    color: var(--tool-text);
}

.brief-loading {
    background: var(--tool-tint);
    border-radius: var(--radius-lg);
}

/* ---- Fly on the Wall reader cards: a role icon each ----------------------------- */
.fly-reader-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.fly-reader-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tool-tint);
    color: var(--tool-text);
    flex-shrink: 0;
}

/* ---- Footer vendor line (hidden for a branded organization) -------------------- */
.footer-vendor[hidden] {
    display: none;
}

/* Shared computer mode switch in Settings, Data management (security review 2026-10). */
.shared-computer-setting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
    cursor: pointer;
}

.shared-computer-setting input {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}

.shared-computer-help {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

/* ---- Long requests: elapsed time, stall line, Try again (SD-01 to SD-03) ---- */
.loading-progress {
    margin-top: 0.5rem;
    text-align: center;
}

.loading-progress p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.loading-phase {
    color: var(--text-secondary);
}

.loading-elapsed {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.loading-stall {
    color: var(--text-primary);
    font-weight: 600;
}

.job-error {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--danger);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: #fff5f5;
    color: #742a2a;
}

.job-error-text {
    margin: 0 0 0.75rem;
}

.review-place .review-empty-inline {
    color: var(--text-muted);
    font-style: italic;
}

/* Touch targets (test report 2026-10-18, SD-29): the "Try again" button on
   every tool's error box and the nav links meet the 44px minimum the rest of
   the site uses. The identifying-info "Fix" buttons are in case-notes.css. */
.job-error-retry {
    min-height: 44px;
}

.nav-link {
    min-height: 44px;
}