/* ==========================================================================
   Inn at Laurel Point - Office 365 Assessment Tool
   main.css

   Organization (per STYLE_GUIDE.md):
   1. CSS custom properties (:root)
   2. Reset and base element styles
   3. Layout primitives
   4. Components (alphabetical)
   5. Utilities
   6. Media queries (mobile-first, scaling up)
   ========================================================================== */


/* ---------- 1. Custom Properties ---------- */

:root {
    /* Primary Palette */
    --ilp-navy: #1F3A5F;
    --ilp-sage: #93B86E;
    --ilp-sage-soft: #E8F0DC;
    --wgit-black: #1A1A1A;

    /* Neutrals */
    --cream: #FBFAF6;
    --paper: #FFFFFF;
    --stone-100: #F4F2EC;
    --stone-200: #E8E4DA;
    --stone-400: #A8A39A;
    --stone-600: #5A554C;

    /* Functional */
    --accent-amber: #C89B3C;
    --accent-rust: #B5552E;
    --focus-ring: rgba(31, 58, 95, 0.25);

    /* Typography */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Type Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.5rem;
    --text-4xl: 3.5rem;

    /* Spacing (4px grid) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    /* Container Widths */
    --container-narrow: 640px;
    --container-medium: 960px;
    --container-wide: 1200px;
}


/* ---------- 2. Reset and Base Styles ---------- */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ilp-navy);
    background: var(--cream);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    animation: pageFadeIn 300ms ease-out;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ilp-navy);
}

h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ilp-navy);
}

h1 { font-size: var(--text-3xl); line-height: 1.15; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

a {
    color: var(--ilp-navy);
    text-decoration: underline;
    transition: color 200ms ease-out;
}

a:hover {
    color: var(--ilp-sage);
}

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

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

legend {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--ilp-navy);
    margin-bottom: var(--space-4);
}


/* ---------- 3. Layout Primitives ---------- */

.container {
    max-width: var(--container-medium);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--wide {
    max-width: var(--container-wide);
}

main {
    flex: 1;
    padding: var(--space-12) var(--space-6) var(--space-10);
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.page-intro {
    margin-bottom: var(--space-10);
    max-width: var(--container-narrow);
}


/* ---------- 4. Components (alphabetical) ---------- */

/* --- Badges --- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.badge--not-started {
    background: var(--stone-100);
    color: var(--stone-600);
}

.badge--in-progress {
    background: rgba(200, 155, 60, 0.15);
    color: var(--accent-amber);
}

.badge--complete {
    background: var(--ilp-sage-soft);
    color: #5C8E3A;
}

.badge--admin {
    background: rgba(31, 58, 95, 0.1);
    color: var(--ilp-navy);
}


/* --- Breadcrumbs --- */

.breadcrumb {
    font-size: var(--text-sm);
    color: var(--ilp-navy);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.breadcrumb:hover {
    text-decoration: underline;
}


/* --- Buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.4;
    border-radius: 2px;
    cursor: pointer;
    transition: all 200ms ease-out;
    text-decoration: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn--primary {
    background: var(--ilp-navy);
    color: var(--cream);
    border: none;
}

.btn--primary:hover {
    background: #2A4A75;
    box-shadow: 0 2px 8px rgba(31, 58, 95, 0.2);
    color: var(--cream);
}

.btn--secondary {
    background: transparent;
    color: var(--ilp-navy);
    border: 1px solid var(--ilp-navy);
}

.btn--secondary:hover {
    background: var(--ilp-sage-soft);
    color: var(--ilp-navy);
}

.btn--tertiary {
    background: transparent;
    color: var(--ilp-navy);
    border: none;
    padding: var(--space-2) var(--space-3);
}

.btn--tertiary:hover {
    text-decoration: underline;
    color: var(--ilp-navy);
}


/* --- Card (surface for forms and content blocks) --- */

.card {
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    padding: var(--space-6);
}


/* --- Cards --- */

.action-card {
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 160px;
    transition: all 200ms ease-out;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.action-card:hover {
    background: var(--ilp-sage-soft);
    border-color: var(--ilp-sage);
    transform: translateY(-2px);
    color: inherit;
}

.action-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.action-card--featured {
    background: var(--ilp-navy);
    border-color: var(--ilp-navy);
    color: var(--cream);
    grid-column: 1 / -1;
    min-height: 180px;
}

.action-card--featured:hover {
    background: #2A4A75;
    border-color: var(--ilp-sage);
    color: var(--cream);
}

.action-card--featured .card-eyebrow {
    color: var(--ilp-sage);
}

/* Required because the global h1-h3 rule (color: --ilp-navy) wins over
   the cream color inherited from the featured card. Without this the
   title renders near-invisible on the navy background. */
.action-card--featured .card-title {
    color: var(--cream);
}

.action-card--featured .card-meta {
    color: rgba(251, 250, 246, 0.7);
}

.action-card--featured .card-description {
    color: rgba(251, 250, 246, 0.85);
}

.action-card--featured .card-cta {
    color: var(--cream);
}

.card-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ilp-sage);
    font-weight: 600;
}

.card-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.card-description {
    font-size: 0.9375rem;
    color: var(--stone-600);
    line-height: 1.55;
    margin-top: auto;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--stone-400);
    margin-top: var(--space-2);
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--ilp-navy);
    margin-top: auto;
}

.card-cta::after {
    content: '\2192';
    transition: transform 200ms ease-out;
}

.action-card:hover .card-cta::after {
    transform: translateX(4px);
}


/* --- Form Actions (submit row at the bottom of a form) --- */

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.form-help {
    font-size: var(--text-sm);
    color: var(--stone-400);
    margin-top: var(--space-5);
}


/* --- Eyebrow (page-level) --- */

.eyebrow {
    font-size: var(--text-xs);
    color: var(--ilp-sage);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--ilp-sage);
}


/* --- Flash Messages --- */

.flash-messages {
    max-width: var(--container-medium);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.flash {
    padding: var(--space-3) var(--space-5);
    border-radius: 4px;
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
}

.flash--success {
    background: var(--ilp-sage-soft);
    color: #3D6B1E;
    border-color: var(--ilp-sage);
}

.flash--error {
    background: rgba(181, 85, 46, 0.1);
    border-color: var(--accent-rust);
    color: var(--accent-rust);
}

.flash--info {
    background: rgba(31, 58, 95, 0.06);
    border-color: var(--stone-200);
    color: var(--ilp-navy);
}

.flash--warning {
    background: rgba(200, 155, 60, 0.1);
    border-color: var(--accent-amber);
    color: #8A6D1B;
}


/* --- Footer --- */

.site-footer {
    background: var(--wgit-black);
    color: rgba(251, 250, 246, 0.7);
    padding: var(--space-6) 0;
    margin-top: var(--space-12);
}

.footer-inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-text {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.footer-logo {
    width: 32px;
    height: 32px;
    background: var(--paper);
    color: var(--wgit-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: 2px;
    letter-spacing: -0.02em;
}

.footer-brand-text {
    font-size: 0.8125rem;
    color: var(--cream);
    font-weight: 500;
    letter-spacing: 0.02em;
}


/* --- Forms --- */

.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ilp-navy);
    margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-bottom: 2px solid var(--stone-400);
    border-radius: 2px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ilp-navy);
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--stone-400);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-bottom-color: var(--ilp-sage);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

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

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235A554C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-8);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--accent-rust);
    margin-top: var(--space-1);
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--stone-400);
    margin-top: var(--space-1);
}

/* Radio and checkbox groups */
.form-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.form-option input[type="radio"],
.form-option input[type="checkbox"] {
    margin-top: 0.2em;
    accent-color: var(--ilp-sage);
    flex-shrink: 0;
}

.form-option label {
    font-size: var(--text-base);
    color: var(--ilp-navy);
    line-height: 1.5;
    cursor: pointer;
}

/* Input in error state */
.form-input--error,
.form-select--error,
.form-textarea--error {
    border-color: var(--accent-rust);
    border-bottom-color: var(--accent-rust);
}

@keyframes formShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.form-group--error {
    animation: formShake 300ms ease-out;
}


/* --- Header --- */

.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--stone-200);
    padding: var(--space-4) 0;
}

.header-inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
}

.brand:hover {
    color: inherit;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ilp-navy);
}

.brand-sub {
    font-size: var(--text-xs);
    color: var(--stone-400);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ilp-leaf {
    width: 36px;
    height: 36px;
    background: var(--ilp-sage-soft);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ilp-leaf svg {
    width: 22px;
    height: 22px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
}

.user-name {
    color: var(--stone-600);
}

.user-name strong {
    color: var(--ilp-navy);
    font-weight: 500;
}

.logout-link {
    color: var(--ilp-navy);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.logout-link:hover {
    text-decoration: underline;
}


/* --- Page Title --- */

.page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ilp-navy);
    margin-bottom: var(--space-4);
}

.page-lede {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--stone-600);
}


/* --- Progress Bar (assessment screens) --- */

.progress-bar {
    background: var(--stone-200);
    height: 3px;
    width: 100%;
    position: relative;
}

.progress-bar__fill {
    background: var(--ilp-sage);
    height: 100%;
    transition: width 300ms ease-out;
}

.progress-label {
    font-size: var(--text-sm);
    color: var(--stone-400);
    padding: var(--space-2) var(--space-6);
}


/* --- Rating Tool (Section 1 self-rating blocks) --- */

.rating-tool {
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}

.rating-tool__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--ilp-navy);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--stone-100);
}

.rating-question {
    margin-bottom: var(--space-5);
}

.rating-question:last-child {
    margin-bottom: 0;
}

.rating-question__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--stone-600);
    margin-bottom: var(--space-3);
}

/* Numbered comfort scale: visually styled radio buttons */
.comfort-scale {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: flex-start;
}

.comfort-option {
    position: relative;
}

.comfort-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.comfort-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
}

.comfort-bubble {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--stone-200);
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--stone-600);
    transition: all 200ms ease-out;
}

.comfort-option input:checked + label .comfort-bubble {
    background: var(--ilp-navy);
    border-color: var(--ilp-navy);
    color: var(--cream);
}

.comfort-option label:hover .comfort-bubble {
    border-color: var(--ilp-sage);
    color: var(--ilp-navy);
}

.comfort-hint {
    font-size: var(--text-xs);
    color: var(--stone-400);
    text-align: center;
    max-width: 52px;
    line-height: 1.25;
}

/* Frequency options: pill-shaped radio buttons */
.frequency-options {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.freq-option {
    position: relative;
}

.freq-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.freq-option label {
    display: block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--stone-200);
    border-radius: 999px;
    font-size: var(--text-sm);
    color: var(--stone-600);
    cursor: pointer;
    transition: all 200ms ease-out;
    white-space: nowrap;
}

.freq-option input:checked + label {
    background: var(--ilp-navy);
    border-color: var(--ilp-navy);
    color: var(--cream);
}

.freq-option label:hover {
    border-color: var(--ilp-sage);
    color: var(--ilp-navy);
}

.rating-errors {
    margin-top: var(--space-2);
}


/* --- Scenario Cards (Section 2) --- */

.scenario-card {
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}

.scenario-card__number {
    font-size: var(--text-xs);
    color: var(--ilp-sage);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.scenario-card__prompt {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--ilp-navy);
    line-height: 1.4;
    margin-bottom: var(--space-5);
}

.scenario-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.scenario-option {
    position: relative;
}

.scenario-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.scenario-option label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    cursor: pointer;
    transition: all 200ms ease-out;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ilp-navy);
}

.scenario-option label:hover {
    border-color: var(--ilp-sage);
    background: var(--ilp-sage-soft);
}

.scenario-option input:checked + label {
    border-color: var(--ilp-navy);
    background: rgba(31, 58, 95, 0.05);
}

.scenario-option__letter {
    font-weight: 600;
    color: var(--stone-400);
    flex-shrink: 0;
    min-width: 18px;
    line-height: 1.5;
}

.scenario-option input:checked + label .scenario-option__letter {
    color: var(--ilp-navy);
}

.scenario-errors {
    margin-top: var(--space-2);
}


/* --- Tool Checklist (Section 4) --- */

.tool-group {
    margin-bottom: var(--space-8);
}

.tool-group__heading {
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--stone-400);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--stone-200);
}

.tool-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.tool-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 200ms ease-out, background 200ms ease-out;
}

.tool-check:hover {
    border-color: var(--ilp-sage);
    background: var(--ilp-sage-soft);
}

.tool-check input[type="checkbox"] {
    accent-color: var(--ilp-sage);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.tool-check label {
    font-size: var(--text-base);
    color: var(--ilp-navy);
    cursor: pointer;
    line-height: 1.4;
}


/* --- Assessment Completion Screen --- */

.completion {
    text-align: center;
    padding: var(--space-10) 0;
}

.completion__check {
    width: 64px;
    height: 64px;
    background: var(--ilp-sage-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.completion__check svg {
    width: 32px;
    height: 32px;
    color: #5C8E3A;
}

.completion__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    color: var(--ilp-navy);
    margin-bottom: var(--space-4);
}

.completion__lede {
    font-size: var(--text-lg);
    color: var(--stone-600);
    max-width: 480px;
    margin: 0 auto var(--space-8);
    line-height: 1.6;
}

.level-display {
    display: inline-block;
    background: var(--ilp-sage-soft);
    border: 1px solid var(--ilp-sage);
    border-radius: 4px;
    padding: var(--space-4) var(--space-8);
    margin-bottom: var(--space-8);
}

.level-display__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: #5C8E3A;
    margin-bottom: var(--space-2);
}

.level-display__band {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: #3D6B1E;
    text-transform: capitalize;
}

.completion__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}


/* --- Admin Sub-navigation --- */

.admin-subnav {
    background: var(--paper);
    border-bottom: 1px solid var(--stone-200);
    padding: 0 var(--space-6);
}

.admin-subnav__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
}

.admin-subnav__link {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--stone-400);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 200ms ease-out, border-color 200ms ease-out;
}

.admin-subnav__link:hover {
    color: var(--ilp-navy);
}

.admin-subnav__link--active {
    color: var(--ilp-navy);
    border-bottom-color: var(--ilp-sage);
}


/* --- Admin Stat Cards --- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.stat-card {
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    padding: var(--space-5) var(--space-6);
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--ilp-navy);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-card__label {
    font-size: var(--text-sm);
    color: var(--stone-400);
    font-weight: 500;
}

.stat-card--complete .stat-card__value { color: #3D6B1E; }
.stat-card--progress .stat-card__value { color: var(--accent-amber); }


/* --- Data Table --- */

.data-table-wrapper {
    overflow-x: auto;
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
}

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

.data-table th {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stone-400);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--stone-200);
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--stone-100);
    vertical-align: middle;
    color: var(--ilp-navy);
}

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

.data-table tbody tr:hover td {
    background: var(--stone-100);
}

.data-table a {
    text-decoration: none;
    font-weight: 500;
}

.data-table a:hover {
    text-decoration: underline;
}

.data-table .col-name { min-width: 160px; }
.data-table .col-dept { min-width: 140px; }
.data-table .col-status { width: 120px; }
.data-table .col-score { width: 80px; text-align: right; }
.data-table .col-level { width: 110px; }
.data-table .col-actions { width: 100px; text-align: right; }


/* --- Level Tags --- */

.level-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: capitalize;
}

.level-tag--beginner {
    background: rgba(200, 155, 60, 0.12);
    color: #8A6D1B;
}

.level-tag--intermediate {
    background: rgba(31, 58, 95, 0.08);
    color: var(--ilp-navy);
}

.level-tag--advanced {
    background: var(--ilp-sage-soft);
    color: #3D6B1E;
}


/* --- Status Dot --- */

.status-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.status-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot--complete::before    { background: #5C8E3A; }
.status-dot--in_progress::before { background: var(--accent-amber); }
.status-dot--not_started::before { background: var(--stone-400); }

/* Ops-health rollup modifiers. Reused by any future tile that needs
   a green/amber/red/grey severity indicator. */
.status-dot--ok::before       { background: #5C8E3A; }
.status-dot--warning::before  { background: var(--accent-amber); }
.status-dot--critical::before { background: #B23A2E; }
.status-dot--unknown::before  { background: var(--stone-400); }


/* --- Score Bar (inline progress-style bar) --- */

.score-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.score-bar__track {
    flex: 1;
    height: 6px;
    background: var(--stone-200);
    border-radius: 999px;
    overflow: hidden;
}

.score-bar__fill {
    height: 100%;
    background: var(--ilp-sage);
    border-radius: 999px;
    transition: width 400ms ease-out;
}

.score-bar__value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ilp-navy);
    min-width: 32px;
    text-align: right;
}


/* --- Flag Pills --- */

.flag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.flag-pill {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(181, 85, 46, 0.08);
    color: var(--accent-rust);
    border: 1px solid rgba(181, 85, 46, 0.2);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 500;
}


/* --- Admin Report Section Headings --- */

.report-section {
    margin-bottom: var(--space-8);
}

.report-section__title {
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--stone-400);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--stone-200);
}


/* --- Level Distribution Bar --- */

.level-bar {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    height: 24px;
    margin-bottom: var(--space-4);
}

.level-bar__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--cream);
    transition: width 400ms ease-out;
}

.level-bar__segment--beginner     { background: var(--accent-amber); }
.level-bar__segment--intermediate { background: var(--ilp-navy); }
.level-bar__segment--advanced     { background: #5C8E3A; }


/* --- Department list row --- */

.dept-row {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--stone-100);
    gap: var(--space-4);
}

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

.dept-row__name {
    flex: 1;
    font-weight: 500;
    color: var(--ilp-navy);
}

.dept-row__name--inactive {
    color: var(--stone-400);
    font-style: italic;
}

.dept-row__count {
    font-size: var(--text-sm);
    color: var(--stone-400);
    min-width: 80px;
    text-align: right;
}

.dept-row__actions {
    display: flex;
    gap: var(--space-3);
}


/* ---------- 5. Utilities ---------- */

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

.text-center { text-align: center; }
.text-muted { color: var(--stone-400); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }


/* ---------- 6. Media Queries (mobile-first, scaling up) ---------- */

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

@media (max-width: 640px) {
    .header-inner {
        padding: 0 var(--space-4);
    }

    .brand-text {
        display: none;
    }

    main {
        padding: var(--space-8) var(--space-4) var(--space-6);
    }

    .container {
        padding: 0 var(--space-4);
    }

    .flash-messages {
        padding: 0 var(--space-4);
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }
}

/* ---------------------------------------------------------------------------
 * Phase 2 Step 7: user-facing learning plan page
 * ------------------------------------------------------------------------- */

.plan-overview {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.plan-overview__label {
    font-size: var(--text-sm);
    color: var(--stone-600);
    flex: 1 1 200px;
}

.plan-overview__bar {
    flex: 2 1 280px;
    height: 8px;
    background: var(--stone-200);
    border-radius: 4px;
    overflow: hidden;
    min-width: 200px;
}

.plan-overview__fill {
    height: 100%;
    background: var(--brand-accent, #93B86E);
    transition: width 200ms ease-out;
}

.plan-overview__pct {
    font-weight: 600;
    color: var(--brand-primary, #1F3A5F);
    min-width: 3em;
    text-align: right;
}

/* One Module Set per <details> block. Open state matches the rest of the
 * app's card chrome. */
.plan-section {
    background: var(--paper);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    margin-bottom: var(--space-5);
    overflow: hidden;
}

.plan-section[open] {
    border-color: var(--brand-accent, #93B86E);
}

.plan-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
    background: var(--stone-100);
}

.plan-section__header::-webkit-details-marker { display: none; }

.plan-section__header::before {
    content: "▸";
    color: var(--stone-400);
    font-size: var(--text-base);
    margin-right: var(--space-2);
    transition: transform 200ms ease-out;
    display: inline-block;
}

.plan-section[open] .plan-section__header::before {
    transform: rotate(90deg);
}

.plan-section__title {
    font-family: var(--font-display, serif);
    font-size: var(--text-xl);
    margin: 0;
    color: var(--brand-primary, #1F3A5F);
}

.plan-section__meta {
    font-size: var(--text-xs);
    color: var(--stone-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.plan-section__progress {
    font-size: var(--text-sm);
    color: var(--stone-600);
    white-space: nowrap;
}

.plan-section__description {
    margin: 0;
    padding: var(--space-4) var(--space-6) 0;
    font-size: var(--text-sm);
    color: var(--stone-600);
    line-height: 1.55;
}

.plan-items {
    list-style: none;
    margin: 0;
    padding: var(--space-4) var(--space-6);
}

.plan-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--stone-200);
    flex-wrap: wrap;
}

.plan-item:last-child {
    border-bottom: none;
}

.plan-item--completed {
    opacity: 0.7;
}

.plan-item--skipped {
    opacity: 0.55;
}

.plan-item__main {
    flex: 1 1 280px;
    min-width: 0;
}

.plan-item__title {
    font-size: var(--text-base);
    font-weight: 500;
    margin: 0 0 var(--space-1);
}

.plan-item__title a {
    color: var(--brand-primary, #1F3A5F);
    text-decoration: none;
}

.plan-item__title a:hover {
    text-decoration: underline;
}

.plan-item__meta {
    font-size: var(--text-xs);
    color: var(--stone-400);
    margin: 0;
}

.plan-item__priority {
    color: var(--accent-rust);
    font-weight: 500;
}

.plan-item__status-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    min-width: 160px;
}

.plan-item__status {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--stone-400);
}

.plan-item--completed .plan-item__status {
    color: var(--brand-accent, #93B86E);
    font-weight: 600;
}

.plan-item--in_progress .plan-item__status {
    color: var(--accent-amber);
    font-weight: 600;
}

.plan-quiz {
    margin: 0;
    padding: var(--space-5) var(--space-6);
    background: var(--stone-100);
    border-top: 1px solid var(--stone-200);
}

.plan-quiz--locked {
    color: var(--stone-400);
}

.plan-quiz__title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.plan-quiz--unlocked .plan-quiz__title {
    color: var(--brand-primary, #1F3A5F);
}

.plan-quiz__hint {
    font-size: var(--text-sm);
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * Phase 2 Step 10: user-facing quiz form and results
 * ------------------------------------------------------------------------- */

.quiz-form {
    margin-top: var(--space-4);
}

.quiz-question {
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    padding: var(--space-5) var(--space-6);
    margin: 0 0 var(--space-4);
    background: var(--paper);
}

.quiz-question__legend {
    padding: 0;
    margin: 0;
}

.quiz-question__number {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--stone-400);
}

.quiz-question__text {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--brand-primary, #1F3A5F);
    margin: var(--space-2) 0 var(--space-4);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.quiz-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    cursor: pointer;
    transition: background 200ms ease-out, border-color 200ms ease-out;
}

.quiz-option:hover {
    background: var(--stone-100);
    border-color: var(--stone-400);
}

.quiz-option input[type="radio"]:checked + span {
    font-weight: 500;
}

.quiz-option:has(input[type="radio"]:checked) {
    background: var(--brand-accent-soft, #EAF1DD);
    border-color: var(--brand-accent, #93B86E);
}

/* ----- Results page ----- */

.quiz-result-card {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    background: var(--paper);
    margin-bottom: var(--space-8);
}

.quiz-result-card__score {
    font-family: var(--font-display, serif);
    font-size: var(--text-4xl);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.quiz-result-card--pass .quiz-result-card__score {
    color: var(--brand-accent, #93B86E);
}

.quiz-result-card--fail .quiz-result-card__score {
    color: var(--accent-rust);
}

.quiz-result-card__label {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--brand-primary, #1F3A5F);
    margin-bottom: var(--space-2);
}

.quiz-result-card__sub {
    font-size: var(--text-sm);
    color: var(--stone-600);
}

.quiz-feedback {
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    background: var(--paper);
}

.quiz-feedback--correct {
    border-left: 4px solid var(--brand-accent, #93B86E);
}

.quiz-feedback--wrong {
    border-left: 4px solid var(--accent-rust);
}

.quiz-feedback__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quiz-feedback__number {
    color: var(--stone-400);
}

.quiz-feedback--correct .quiz-feedback__verdict {
    color: var(--brand-accent, #93B86E);
    font-weight: 600;
}

.quiz-feedback--wrong .quiz-feedback__verdict {
    color: var(--accent-rust);
    font-weight: 600;
}

.quiz-feedback__text {
    font-size: var(--text-base);
    margin: 0 0 var(--space-3);
    color: var(--brand-primary, #1F3A5F);
}

.quiz-feedback__answers {
    font-size: var(--text-sm);
    color: var(--stone-600);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.quiz-feedback__explanation {
    font-size: var(--text-sm);
    color: var(--stone-600);
    padding-top: var(--space-3);
    border-top: 1px solid var(--stone-200);
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------
 * Phase 2 Step 12: landing-page learning plan card
 * ------------------------------------------------------------------------- */

.learning-card .learning-card__progress {
    height: 6px;
    background: var(--stone-200);
    border-radius: 3px;
    overflow: hidden;
    margin: var(--space-3) 0 var(--space-2);
}

.learning-card .learning-card__progress-fill {
    height: 100%;
    background: var(--brand-accent, #93B86E);
    transition: width 200ms ease-out;
}