/* ══════════════════════════════════════════════════════════════
   PATTERN — STRATEGIANALYS (residual)
   App-specific styles for STRATEGIANALYS not covered by reusable
   patterns. Loaded LAST so cascade ensures byte-equivalent rendering
   to the previous app/static/style.css.

   Reusable patterns extracted to APP/shared/css/patterns/:
     - score-display.css        (score-hero, direction-axes)
     - comparison-table.css     (jamfor-* strategy comparison)
     - scale-indicator.css      (Policy-Strategi-Plan position)
     - timeline.css             (version history)
     - text-diff.css            (diff-added/removed/changed)
     - feedback-rating.css      (1-5 rating widget)
     - loading-overlay.css      (already shared)
     - dimension-cards.css      (term-tag etc)

   Promoted to canon:
     - warning + warning-high/-medium/-title/-message
     - font-mono + font-mono-lg
     - info-tip
     - footer-col (from SAMSYN)
     - proposal-card etc (from SAMSYN)

   What stays here (truly STRATEGIANALYS-specific):
     - chip, chip-active            value chips for filtering
     - bar-track, bar-fill          STRAT-poäng progress bar variant
     - text-ok, text-warn           diagnostic indicators
     - text-improved, text-worsened version-jamfor delta colors
     - card-accent, card-subtle     pillar-card variants
     - pillar-link                  result-page pillar navigation
     - info-box                     metod page tinted box
     - source-list                  metod-source bullet list
     - tool-card                    förbättra page tool box
     - flow-diagram + flow-*        förbättra page flow visualization
     - phase-matrix + phase-*       förbättra page phase table
     - prose                        long-form content blocks (om/metod)
     - ontology-node, ontology-label ontologi page tree
     - tier-A/B/C                   forskning page paper rankings
     - term-cloud                   STRATEGIANALYS variant of term-tag
     - filter-btn, filter-btn-active dokumentsamling filter
     - type-legend-btn, type-legend-symbol charts.js legend toggles
     - table-compact                compact table variant
     - input, fieldset-reset        form helpers
     - select-sm, select-compact    select width variants
     - dropzone-icon, dropzone variants (file-selected, enabled)
     - timeline-* (already in timeline.css; kept here too as legacy)
     - direction-axes (already in score-display.css; legacy duplicate)
     - misc utilities the pilot didn't promote (flex-1, min-w-score,
       text-right, label-flex, py-xs, pl-md, w-full, hidden)
     - feedback-rating-* (legacy; also in feedback-rating.css)

   The duplication is intentional: loading order makes the residual
   win where it differs, ensuring zero behavioral change. Future
   pilots can shrink this file by removing classes that match canon.
   ══════════════════════════════════════════════════════════════ */

/* ── Self-hosted Inter (WOFF2) ── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/inter-600.woff2') format('woff2');
}

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

/* ── Accessibility ── */
.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; }

/* ── Typography ── */
:root {
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --black: #000000;
    --white: #FFFFFF;
    --dark-grey: #1A1A1A;
    --medium-grey: #666666;
    --light-grey: #E5E5E5;
    --pale-grey: #F5F5F5;
    --surface: #F5F5F5;
    --text-grey-pale: #999999;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --black: #F0F0F0;
        --white: #111111;
        --dark-grey: #E0E0E0;
        --medium-grey: #999999;
        --light-grey: #2A2A2A;
        --pale-grey: #1A1A1A;
        --surface: #0A0A0A;
        --text-grey-pale: #666666;
    }
}

:root[data-theme="dark"] {
    --black: #F0F0F0;
    --white: #111111;
    --dark-grey: #E0E0E0;
    --medium-grey: #999999;
    --light-grey: #2A2A2A;
    --pale-grey: #1A1A1A;
    --surface: #0A0A0A;
    --text-grey-pale: #666666;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--black);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 2.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
h2 { font-size: 1.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
.text-sm { font-size: 0.875rem; line-height: 1.5; }
.text-xs { font-size: 0.75rem; line-height: 1.4; }
.text-lg { font-size: 1.125rem; line-height: 1.6; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }

/* ── Colors ── */
.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-grey { color: var(--medium-grey); }
.text-grey-pale { color: var(--text-grey-pale); }
.text-improved { color: var(--black); font-weight: 600; }
.text-worsened { color: var(--medium-grey); }
.bg-white { background: var(--white); }
.bg-black { background: var(--black); }
.bg-pale { background: var(--pale-grey); }

/* ── Layout ── */
.container {
    display: block;
    max-width: 64rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}
.container-narrow {
    display: block;
    max-width: 42rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    overflow-x: hidden;
}

.section { margin-bottom: 3rem; }
.section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--medium-grey);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--light-grey);
}

/* ── Grid ── */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-between { justify-content: space-between; }
.flex-center { align-items: center; }
.flex-baseline { align-items: baseline; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }

/* ── Spacing ── */
.mt-xs { margin-top: 0.25rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mt-xl { margin-top: 2rem; }
.mt-2xl { margin-top: 3rem; }
.mb-xs { margin-bottom: 0.25rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.mb-xl { margin-bottom: 2rem; }
.mb-2xl { margin-bottom: 3rem; }

.p-sm { padding: 0.5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 1.5rem; }
.p-xl { padding: 2rem; }
.py-md { padding-top: 1rem; padding-bottom: 1rem; }
.py-lg { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-xl { padding-top: 2rem; padding-bottom: 2rem; }
.py-hero { padding-top: 4rem; padding-bottom: 4rem; }
.pt-sm { padding-top: 0.5rem; }
.pt-lg { padding-top: 1.5rem; }
.pt-xl { padding-top: 2rem; }

/* ── Cards & Borders ── */
.card {
    border: 1px solid var(--light-grey);
    padding: 1.5rem;
    background: var(--white);
    transition: border-color 0.15s;
}
.card:hover {
    border-color: var(--medium-grey);
}
.card-accent {
    border: 2px solid var(--black);
    padding: 2rem;
    background: var(--white);
}
.card-subtle {
    border: 1px solid var(--light-grey);
    padding: 1rem;
    background: var(--white);
    transition: border-color 0.15s;
    height: 100%;
}
.card-subtle:hover {
    border-color: var(--medium-grey);
}
.border-top { border-top: 1px solid var(--light-grey); }
.border-bottom { border-bottom: 1px solid var(--light-grey); }

/* ── Score display ── */
.score-hero {
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}
.score-large {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}
.score-label {
    font-size: 0.75rem;
    color: var(--medium-grey);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.score-unit {
    font-size: 0.5em;
}
.score-direction {
    font-size: 0.75rem;
    color: var(--medium-grey);
    margin-top: 0.25rem;
}
.score-hero-label {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}
.direction-axes {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.direction-axis {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}
.direction-axis-label {
    font-size: 0.4em;
    font-weight: 400;
    color: var(--medium-grey);
    letter-spacing: 0;
}
.direction-axis-value {
    font-weight: 400;
    font-size: 0.5em;
    color: var(--medium-grey);
}
.score-comparison {
    font-size: 0.7rem;
    color: var(--medium-grey);
    margin-top: 0.25rem;
}

/* ── Progress bars ── */
.bar-track {
    width: 100%;
    height: 6px;
    background: var(--pale-grey);
}
.bar-fill {
    height: 6px;
    background: var(--black);
    transition: width 0.6s ease;
}

/* ── Scale visualization (Policy–Strategi–Plan) ── */
.scale-track {
    position: relative;
    height: 2px;
    width: 100%;
    background: var(--light-grey);
    margin: 2rem 0 0.75rem;
}
.scale-marker-dot {
    position: absolute;
    top: -5px;
    left: auto;
    width: 12px;
    height: 12px;
    background: var(--black);
    border-radius: 50%;
}
.scale-label {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Diagnostic indicators ── */
.text-ok { color: var(--black); }
.text-warn { color: var(--medium-grey); font-style: italic; }

/* ── Value chips ── */
.chip {
    border: 1px solid var(--light-grey);
    padding: 0.75rem;
    text-align: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover {
    border-color: var(--medium-grey);
}
.chip-active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
.chip-active:hover {
    background: var(--dark-grey);
    border-color: var(--dark-grey);
}

/* ── Warning boxes ── */
.warning {
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}
.warning-high {
    border: 2px solid var(--black);
}
.warning-medium {
    border: 1px solid var(--medium-grey);
}
.warning-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.warning-message {
    font-size: 0.875rem;
    color: var(--dark-grey);
}

/* ── Flash messages ── */
.flash {
    border: 1px solid var(--medium-grey);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.flash-error {
    border: 2px solid var(--black);
    background: var(--pale-grey);
}

/* ── Maintenance banner ── */
.maintenance-banner {
    background: var(--black);
    color: var(--white);
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ── Drop zone ── */
.dropzone {
    border: 2px dashed var(--light-grey);
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.dropzone.enabled:hover {
    border-color: var(--medium-grey);
    background-color: var(--pale-grey);
}
.dropzone.active {
    border-color: var(--black);
    background-color: var(--pale-grey);
}
.dropzone.file-selected {
    border-style: solid;
    border-color: var(--black);
    background-color: var(--pale-grey);
    cursor: default;
}
.dropzone-icon {
    display: block;
    margin: 0 auto 1rem;
    width: 48px;
    height: 48px;
    opacity: 0.3;
    transition: opacity 0.2s;
}
.dropzone.enabled:hover .dropzone-icon {
    opacity: 0.5;
}
.dropzone.file-selected .dropzone-icon {
    opacity: 0.6;
}

/* ── Buttons ── */
.btn {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    padding: 0.875rem 1.5rem;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0.01em;
}
.btn:hover { background: var(--dark-grey); }
.btn-full { width: 100%; }
.btn-outline {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
}
.btn-outline:hover,
.btn-outline:focus-visible {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
.btn-active {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    pointer-events: none;
}
.btn-sm { padding: 0.375rem 0.75rem; min-height: 0; font-size: 0.75rem; }
.radar-compact .card { padding: 1rem; }
.radar-compact canvas { max-height: 220px; }

/* ── Form elements ── */
textarea {
    width: 100%;
    border: 1px solid var(--light-grey);
    padding: 1rem;
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
    transition: border-color 0.15s;
}
textarea:focus {
    outline: none;
    border-color: var(--black);
}

/* ── Divider ── */
.divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    font-size: 0.875rem;
    color: var(--medium-grey);
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--light-grey);
}

/* ── Links ── */
a { color: inherit; text-decoration: none; }
a.link { text-decoration: underline; }
a.link:hover { text-decoration: none; }
a.nav-link {
    color: var(--medium-grey);
    padding: 0.5rem 0.75rem;
    transition: color 0.15s;
}
a.nav-link:hover { color: var(--black); }

.beta-badge, .prototype-badge {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--medium-grey);
    color: var(--medium-grey);
    vertical-align: super;
}

/* ── Loading overlay ── */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--surface);
    z-index: 100;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.loading-overlay.active { display: flex; }
.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--light-grey);
    border-top-color: var(--black);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
    margin-top: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
}
.loading-steps {
    margin-top: 1.5rem;
    text-align: left;
    list-style: none;
    padding: 0;
}
.loading-step {
    font-size: 0.875rem;
    color: var(--light-grey);
    padding: 0.5rem 0;
    padding-left: 1.75rem;
    position: relative;
    transition: color 0.3s;
}
.loading-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--light-grey);
    border-radius: 50%;
    transition: background 0.3s, border-color 0.3s;
}
.loading-step.active {
    color: var(--black);
    font-weight: 500;
}
.loading-step.active::before {
    background: var(--black);
    border-color: var(--black);
}
.loading-step.done {
    color: var(--medium-grey);
}
.loading-step.done::before {
    background: var(--medium-grey);
    border-color: var(--medium-grey);
}
.loading-elapsed {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    color: var(--medium-grey);
    font-variant-numeric: tabular-nums;
}

/* ── Table ── */
.table-wrapper {
    overflow-x: auto;
    max-width: 100%;
}
table { width: 100%; font-size: 0.875rem; border-collapse: collapse; table-layout: auto; word-wrap: break-word; }
th { text-align: left; font-weight: 500; padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--light-grey); }
td { padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--pale-grey); }
th:first-child, td:first-child { padding-left: 0; }
.type-legend-btn {
    background: none; border: 1.5px solid; border-radius: 4px;
    padding: 0.25rem 0.5rem; font: 500 0.7rem/1 Inter, sans-serif;
    cursor: pointer; transition: opacity 0.15s;
}
.type-legend-btn:hover { opacity: 0.7; }
.type-legend-symbol { font-weight: 700; }
.table-compact { font-size: 0.75rem; }
.table-compact th, .table-compact td { padding: 0.375rem 0.5rem; text-align: right; }
.table-compact th:first-child, .table-compact td:first-child { text-align: left; }
.col-check { width: 2rem; }
.col-sentence { max-width: 400px; }

/* ── Content prose (for om, metod, tillganglighet) ── */
.prose p { margin-bottom: 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { padding-left: 0; margin-bottom: 1rem; list-style: none; }
.prose ul li { padding-left: 1rem; position: relative; margin-bottom: 0.375rem; }
.prose ul li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--medium-grey);
}
.prose a { text-decoration: underline; }
.prose a:hover { text-decoration: none; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

/* ── Info box (used in metod) ── */
.info-box {
    border: 1px solid var(--light-grey);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* ── Source list ── */
.source-list {
    list-style: none;
    padding: 0;
}
.source-list li {
    font-size: 0.875rem;
    color: var(--medium-grey);
    padding: 0.375rem 0;
    line-height: 1.5;
}

/* ── Pillar navigation ── */
.pillar-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.pillar-link > .card-accent,
.pillar-link > .card-subtle {
    flex: 1;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pillar-link:hover .card-subtle,
.pillar-link:hover .card-accent {
    border-color: var(--black);
    box-shadow: 0 0 0 1px var(--black);
}

/* ── Info tips (inline tooltips for technical terms) ── */
.info-tip {
    cursor: help;
    font-size: 0.75em;
    color: var(--medium-grey);
    vertical-align: super;
    font-style: normal;
    position: relative;
}
.info-tip:hover { color: var(--black); }

/* ── Utility ── */
.hidden { display: none; }
.pt-md { padding-top: 1rem; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.space-y > * + * { margin-top: 1.5rem; }

/* ── Details (expandable sections) ── */
details { border-bottom: 1px solid var(--light-grey); padding: 0.5rem 0; }
details:last-of-type { border-bottom: none; }
details summary { padding: 0.25rem 0; list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; content: ''; }
details summary::before { content: '▸ '; color: var(--medium-grey); font-size: 1.125rem; vertical-align: middle; margin-right: 0.25rem; }
details[open] summary::before { content: '▾ '; }
details summary:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

/* ── Component classes (extracted from inline styles) ── */
.details-content { padding: 0.5rem 0 0.5rem 1rem; }
.font-mono { font-family: monospace; font-size: 0.875rem; }
.font-mono-lg { font-family: monospace; line-height: 2; }
.quote-border { border-left: 3px solid var(--medium-grey); padding-left: 1rem; }
.quote-border-sm { border-left: 2px solid var(--light-grey); padding-left: 0.5rem; }
.site-logo { font-weight: 600; font-size: 1.125rem; letter-spacing: 0.02em; }
.version-label { display: block; font-size: 0.625rem; font-weight: 400; color: var(--medium-grey); letter-spacing: 0.02em; text-decoration: none; }
.version-label a { color: inherit; text-decoration: none; }
.version-label:hover { color: var(--black); }
.fieldset-reset { border: none; padding: 0; margin: 0; }
.expand-toggle { display: inline; }
.expand-toggle > summary { display: inline; list-style: none; border: none; padding: 0; }
.select-sm {
    font-size: 0.75rem;
    font-family: inherit;
    border: 1px solid var(--light-grey);
    padding: 0.15rem 0.5rem;
    background: var(--white);
}
.checkbox-control { accent-color: var(--black); flex-shrink: 0; position: relative; top: 0.1rem; }
.italic { font-style: italic; }
.pl-md { padding-left: 1rem; }
.flex-1 { flex: 1; }
.min-w-score { min-width: 5rem; }
.text-right { text-align: right; }
.py-xs { padding: 0.5rem 0; }
.details-berakning { padding-top: 0.5rem; text-align: left; }
.term-cloud { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.term-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--light-grey);
    background: var(--pale-grey);
    font-family: inherit;
}
.tier-A { font-weight: 600; border-color: var(--black); }
.tier-B { font-weight: 500; border-color: var(--medium-grey); }
.tier-C { font-weight: 400; }
.h3-summary { font-size: 1.125rem; font-weight: 600; cursor: pointer; }
.theme-toggle { background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: 600; padding: 0.5rem 0.75rem; color: var(--medium-grey); display: flex; align-items: center; gap: 0.25rem; transition: color 0.15s; }
.theme-toggle:hover { color: var(--black); }
.theme-text { font-weight: 400; }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-light { display: none; }
    :root:not([data-theme="light"]) .theme-icon-dark { display: inline; }
}
.ontology-node { margin-top: 0.25rem; }
.ontology-node details { border-left: 2px solid var(--light-grey); padding-left: 0.75rem; }
.ontology-node details[open] { border-left-color: var(--black); }
.ontology-label { cursor: pointer; padding: 0.25rem 0; }
.h2 { font-size: 1.75rem; }
.upload-disabled { opacity: 0.4; pointer-events: none; transition: opacity 0.3s; }
.label-flex { display: flex; align-items: baseline; gap: 0.5rem; }
.gap-lg { gap: 1.5rem; }
.btn-link { background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: underline; color: var(--medium-grey); font-size: inherit; }

/* ── Feedback rating ── */
.feedback-rating {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.feedback-rating-option {
    cursor: pointer;
}
.feedback-rating-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.feedback-rating-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--light-grey);
    font-size: 1.125rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.feedback-rating-label:hover {
    border-color: var(--medium-grey);
}
.feedback-rating-option input[type="radio"]:checked + .feedback-rating-label {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
.feedback-rating-option input[type="radio"]:focus-visible + .feedback-rating-label {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
    .container, .container-narrow { padding: 0 1rem; }
    .py-hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .score-hero { font-size: 3rem; }
    .direction-axis { font-size: 1.5rem; }
    .dropzone { padding: 2rem; }
    .card-accent { padding: 1.5rem; }
    nav .flex { flex-wrap: wrap; }
    a.nav-link { padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
}
@media (max-width: 480px) {
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
    .score-hero { font-size: 2.5rem; }
    .direction-axis { font-size: 1.25rem; }
}

/* ── Filter buttons (dokumentsamling) ── */
.filter-btn {
    border: 1px solid var(--light-grey);
    background: var(--white);
    color: var(--black);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.filter-btn:hover { border-color: var(--medium-grey); }
.filter-btn-active {
    border-color: var(--black);
    background: var(--black);
    color: var(--white);
}
.select-compact {
    border: 1px solid var(--light-grey);
    background: var(--white);
    color: var(--black);
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    font-family: inherit;
}
.btn-disabled { opacity: 0.3; pointer-events: none; }
th.sortable:hover { background: var(--pale-grey); }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline-item { position: relative; padding-bottom: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--light-grey); }
.timeline-item-last { border-left-color: transparent; }
.timeline-marker { position: absolute; left: -0.5rem; top: 0.25rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--black); border: 2px solid var(--white); }
.timeline-content { padding-top: 0; }

/* ── Text diff ── */
.diff-added { padding: 0.5rem; font-size: 0.8125rem; background: var(--black); color: var(--white); border-radius: 0.25rem; }
.diff-removed { padding: 0.5rem; font-size: 0.8125rem; text-decoration: line-through; color: var(--medium-grey); border-left: 2px solid var(--medium-grey); padding-left: 0.75rem; }
.diff-changed { padding: 0.5rem; font-size: 0.8125rem; border-left: 2px solid var(--black); padding-left: 0.75rem; }
.diff-changed ins { background: var(--black); color: var(--white); text-decoration: none; padding: 0 0.15rem; border-radius: 0.125rem; }
.diff-changed del { text-decoration: line-through; color: var(--medium-grey); }

/* ── Form inputs ── */
.input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    border: 1px solid var(--light-grey);
    border-radius: 0.25rem;
    background: var(--white);
    color: var(--black);
}
.input:focus { outline: 2px solid var(--black); outline-offset: 1px; border-color: transparent; }
.input--date { max-width: 16rem; }
.input--label { max-width: 24rem; }

/* ── Print ── */
@media print {
    /* Hide non-content elements */
    nav, footer, .loading-overlay, .dropzone,
    .btn, .btn-sm, .btn-outline, .btn-link,
    #copy-link-btn, #copy-link-btn-top, #print-btn, #print-btn-top,
    .theme-toggle, .no-print { display: none !important; }

    /* Force light colours */
    :root, [data-theme="dark"] {
        --black: #000 !important;
        --white: #fff !important;
        --bg: #fff !important;
        --fg: #000 !important;
        --card-bg: #fff !important;
        --medium-grey: #555 !important;
        --pale-grey: #eee !important;
    }
    body { background: #fff !important; color: #000 !important; font-size: 10pt; line-height: 1.5; }

    /* Typography */
    h1, h2, h3, h4, .score-label, .score-hero, .direction-axis { color: #000 !important; }
    .text-grey, .text-grey-pale { color: #555 !important; }
    a { color: #000 !important; text-decoration: none !important; }
    a[href]::after { content: none; }

    /* Layout — preserve grids */
    .container, .container-narrow { max-width: 100%; padding: 0 1cm; }
    .py-hero { padding-top: 1cm; padding-bottom: 0.5cm; }
    .grid-2, .grid-3, .grid-4, .grid-5 { display: block !important; }
    .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > * { margin-bottom: 0.3cm; }

    /* Cards */
    .card, .card-accent, .card-subtle {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        background: #fff !important;
        break-inside: avoid;
        padding: 0.4cm !important;
    }

    /* Scores */
    .score-hero { font-size: 2.5rem; }
    .direction-axis { font-size: 1.1rem; }

    /* Charts — readable size */
    canvas { max-height: 250px !important; break-inside: avoid; }

    /* Details — print open */
    details { border-bottom: none; break-inside: avoid; }
    details[open] summary::before { content: ''; }

    /* Tables */
    table { border-collapse: collapse; width: 100%; font-size: 9pt; }
    th, td { border: 1px solid #ccc !important; padding: 4px 8px !important; color: #000 !important; background: #fff !important; }

    /* Page breaks */
    .section-break { break-before: page; }
    h2, h3 { break-after: avoid; }

    /* Spacing tightening */
    .mt-xl, .mt-2xl { margin-top: 0.5cm !important; }
    .mb-lg, .mb-xl { margin-bottom: 0.3cm !important; }
    .gap-md, .gap-lg { gap: 0.3cm !important; }
}

/* ── Tool cards (förbättra-sidan) ── */
.tool-card {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.tool-card h4 {
    margin: 0 0 0.125rem 0;
    font-size: 1rem;
    font-weight: 600;
}
.tool-card ul {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ── Flow diagram ── */
.flow-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}
.flow-phase {
    width: 100%;
    text-align: center;
}
.flow-phase-label {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}
.flow-tool {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    margin: 0.25rem;
}
.flow-tool-primary {
    border-width: 2px;
    border-color: var(--text);
    font-weight: 600;
}
.flow-tools-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.flow-arrow {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1;
}

/* ── Phase matrix table ── */
.phase-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.phase-matrix th,
.phase-matrix td {
    padding: 0.5rem 0.375rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}
.phase-matrix th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.phase-matrix td:first-child,
.phase-matrix th:first-child {
    text-align: left;
    padding-left: 0;
}
.phase-primary {
    font-size: 1rem;
}
.phase-secondary {
    font-size: 1rem;
    color: var(--text-secondary);
}
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Jämför strategier ──────────────────────────────────────────── */
.jamfor-slots-header { margin: 1rem 0 1.5rem; }
.jamfor-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}
.jamfor-slot-card {
    border: 1px solid var(--border, #000);
    padding: 0.75rem;
    position: relative;
    font-size: 0.9rem;
}
.jamfor-slot-letter {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.jamfor-slot-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jamfor-slot-meta { color: var(--text-muted, #666); font-size: 0.8rem; }
.jamfor-slot-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    text-decoration: none;
    font-size: 0.9rem;
}
.jamfor-slot-add {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-style: dashed;
    min-height: 5rem;
}
.jamfor-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border, #000);
    margin: 1rem 0;
    flex-wrap: wrap;
}
.jamfor-tab {
    padding: 0.5rem 1rem;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
}
.jamfor-tab.active {
    border-color: var(--border, #000);
    font-weight: 600;
}
.jamfor-table-wrap { overflow-x: auto; }
.jamfor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.jamfor-table th,
.jamfor-table td {
    border: 1px solid var(--border, #ccc);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.jamfor-cell-label { font-weight: 500; }
.jamfor-cell-slot { text-align: right; font-variant-numeric: tabular-nums; }
.jamfor-cell-delta { text-align: right; font-variant-numeric: tabular-nums; }
.jamfor-delta-pos { font-weight: 600; }
.jamfor-delta-neg { font-weight: 600; }
.jamfor-delta-zero,
.jamfor-delta-none { color: var(--text-muted, #666); }
.jamfor-picker-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.jamfor-picker-table th,
.jamfor-picker-table td {
    border-bottom: 1px solid var(--border, #ccc);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.jamfor-upload-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 32rem;
}

/* ══════════════════════════════════════════════════════════════
   PATTERN — Tempus bar (tempusanalys: past/present/future)
   Segmented horizontal bar showing the proportion of text
   referring to past/present/future tense. Used on results.html
   to visualize how anchored in time a strategy document is.

   Markup:
     <div class="tempus-bar">
       <div class="tempus-bar__segment tempus-bar__segment--past"
            data-style-width="12"></div>
       <div class="tempus-bar__segment tempus-bar__segment--present"
            data-style-width="63"></div>
       <div class="tempus-bar__segment tempus-bar__segment--future"></div>
     </div>
   The future segment uses flex:1 to take remaining space.
   ══════════════════════════════════════════════════════════════ */
.tempus-bar {
    display: flex;
    height: 1.75rem;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--medium-grey);
    font-size: 0.7rem;
}
.tempus-bar__segment {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tempus-bar__segment--past {
    background: repeating-linear-gradient(45deg, #888 0px, #888 2px, transparent 2px, transparent 6px);
    color: #888;
}
.tempus-bar__segment--present {
    background: #888;
    color: var(--white);
}
.tempus-bar__segment--future {
    background: #ccc;
    color: #333;
    flex: 1;
}

/* Tempus bar legend: progressive opacity by tense dimension */
.tempus-legend__label--past { opacity: 0.5; }
.tempus-legend__label--present { opacity: 0.7; }
/* --future is full opacity (default) */

/* ── Duration bar (tidshorisont: short/medium/long) ──
   Same structure as tempus-bar but segments represent short-term,
   medium-term and long-term goals. */
.duration-bar {
    display: flex;
    height: 1.75rem;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--medium-grey);
    font-size: 0.7rem;
    color: var(--white);
}
.duration-bar__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
}
.duration-bar__segment--short { opacity: 0.8; }
.duration-bar__segment--medium { opacity: 0.5; }
.duration-bar__segment--long {
    flex: 1;
    opacity: 0.25;
}

/* ── Card callout variant ──
   Card with a strong left border, used for important notices and
   summaries on results.html. */
.card--callout {
    border-left: 3px solid var(--black);
    padding: 0.75rem 1rem;
}

/* ── Inline plain select ──
   A <select> styled as minimal inline text (used by the collection
   picker on results.html). */
.select--inline {
    background: transparent;
    border: 1px solid var(--medium-grey);
    border-radius: 3px;
    padding: 2px 4px;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

/* ── Chart container ──
   Centered container for Chart.js canvases with constrained width. */
.chart-container {
    position: relative;
    margin: 0 auto;
}
.chart-container--sm { max-width: 400px; }
.chart-container--md { max-width: 480px; }
.chart-container--lg { max-width: 520px; }

/* Strip-plot container: fixed height stops Chart.js resize-loop when
   the canvas is responsive and parent has no intrinsic height. */
.chart-strip {
    position: relative;
    width: 100%;
    height: 200px;
}

/* ── Narrow centered container ──
   For card-like content that should be visually constrained. */
.container-narrow {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}
.container-narrow--sm {
    max-width: 16rem;
    margin-left: auto;
    margin-right: auto;
}