/* Number inputs, hide spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Design system tokens, insights panel is source of truth */
:root {
    --ds-font: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ds-text-xs: 0.75rem;
    --ds-text-sm: 0.875rem;
    --ds-text-base: 0.9375rem;
    --ds-text-md: 1rem;
    --ds-text-lg: 1.2rem;
    /* Type scale (design audit, phase 2). 14px is the floor for readable text;
       --ds-text-xs (12px) is only for counts, pills and badges. */
    --ds-text-xl: 1.375rem;
    --ds-text-2xl: 1.75rem;
    --ds-text-3xl: 2.5rem;
    --ds-ink: #14231f;
    --ds-muted: #4a5a55; /* secondary text: 6:1 on the dotted page, 7:1 on white */
    --ds-placeholder: #5f6e69; /* 4.8:1 on white */
    --ds-page: #f5f7f6;
    --ds-page-dot: #e1e9e5;
    --ds-surface: #ffffff;
    --ds-line: #e8eeeb;
    --ds-line-strong: #dde5e1;
    --ds-primary: #0f5c4c;
    --ds-primary-hover: #0a4539;
    --ds-warn: #e74c3c;
    --ds-warn-text: #c0392b;
    --ds-warn-border: #ffd4d4;
    --ds-warn-bg: linear-gradient(135deg, #ffe9e9 0%, #fff 55%);
    --ds-ok: #27ae60;
    --ds-ok-text: #1e8449;
    --ds-ok-border: #c9edd6;
    --ds-ok-bg: linear-gradient(135deg, #e9f9ef 0%, #fff 55%);
    --ds-info: #1f5f8b;
    --ds-info-text: #1f5f8b;
    --ds-info-border: #cfe3d9;
    --ds-info-bg: linear-gradient(135deg, #e9f2ed 0%, #fff 55%);
    --ds-work: #2c3a36;
    --ds-cta: #0f5c4c;
    --ds-cta-hover: #0a4539;
    --ds-amber: #eba545; /* logo amber: fills only, never text (2:1 on white) */
    --ds-marker: #f6d58f; /* highlighter under the key shekel figure; ink on it 11.5:1 */
    --ds-mist: #e4efea; /* pale pine field for the home page and the wizard */
    --ds-pension: #1f6f8b;
    --ds-btl: #0f5c4c;
    --ds-srm: #a8700d;
    --ds-tax: #7a5ca8;
    --ds-lawyer: #6b7478;
    --ds-incomeSupport: #be185d;
    --ds-radius-panel: 1.25rem;
    --ds-radius-card: 1.1rem;
    --ds-radius-pill: 999px;
    --ds-shadow-card: 0 10px 28px rgb(20 35 31 / 0.08);
    --ds-shadow-soft: 0 1px 2px rgb(20 35 31 / 0.04);
    --ds-shadow-chip: 0 4px 14px rgb(20 35 31 / 0.06);
    /* calc-* aliases (wizard controls) */
    --calc-navy: var(--ds-primary);
    --calc-navy-hover: var(--ds-primary-hover);
    --calc-ink: var(--ds-ink);
    --calc-muted: var(--ds-muted);
    --calc-line: var(--ds-line-strong);
    --calc-line-strong: #c9d3cf;
    --calc-surface: var(--ds-surface);
    --calc-fill: #ebf0ee;
    --ds-tip-bg: color-mix(in srgb, var(--ds-srm) 12%, white);
    --ds-tip-border: color-mix(in srgb, var(--ds-srm) 40%, white);
    --ds-tip-text: var(--ds-srm);
}

/* Placeholders must stay readable (WCAG 1.4.3); beats Tailwind's preflight gray, which loads later */
:root input::placeholder,
:root textarea::placeholder {
    color: var(--ds-placeholder);
    opacity: 1;
}

h1, h2, h3 {
    text-wrap: balance;
}

/* Touch (design review, phase 3): no gray flash on tap, no double-tap delay, button labels don't get selected */
html {
    -webkit-tap-highlight-color: transparent;
}

button,
summary,
[role="button"],
.ds-btn {
    touch-action: manipulation;
}

button,
.ds-btn {
    -webkit-user-select: none;
    user-select: none;
}

/* Press feedback: buttons and chips shrink a little while pressed */
.ds-btn:active:not(:disabled),
.fq-chip:active,
.insight-chip:active,
.mock-hero-cta:active {
    transform: scale(0.97);
}

/* Phones: 16px fields, or iOS zooms the page in on focus and leaves it zoomed */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Inline SVG icons (js/icons.js): take the text's size and color, sit on the text baseline */
.ui-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

/* ── Accessibility: Skip to main content link ── */
.skip-link {
    position: absolute;
    top: -100px;
    inset-inline-start: 1rem;
    background: #0f5c4c;
    color: #fff !important;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    z-index: 100000;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    border: 2px solid #ffe600;
    border-top: none;
    transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #ffe600;
    outline-offset: 2px;
}

/* ── Accessibility & Screen Reader utility ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Accessibility: visible keyboard focus fallback ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* High contrast focus outline on dark backgrounds */
.mock-hero-section :focus-visible,
.site-header :focus-visible,
.cta-banner :focus-visible,
.site-brand:focus-visible,
.social-link:focus-visible {
    outline: 3px solid #ffe600;
    outline-offset: 2px;
}

/* ── Accessibility: Reduced motion support ── */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
html.a11y-no-anim *,
html.a11y-no-anim ::before,
html.a11y-no-anim ::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* ── Design system core ── */
.ds-page {
    font-family: var(--ds-font);
    color: var(--ds-ink);
    background:
        radial-gradient(circle at 1px 1px, var(--ds-page-dot) 1px, transparent 0) 0 0 / 18px 18px,
        var(--ds-page);
    min-height: 100vh;
}

.ds-panel,
.insights-panel {
    --insight-ink: var(--ds-ink);
    --insight-muted: var(--ds-muted);
    background:
        radial-gradient(circle at 1px 1px, var(--ds-page-dot) 1px, transparent 0) 0 0 / 18px 18px,
        var(--ds-page);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-panel);
    padding: 1.25rem 1.1rem 1.35rem;
    box-shadow: var(--ds-shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ds-panel-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-card);
    padding: 1rem 1.1rem;
    box-shadow: var(--ds-shadow-card);
    color: var(--ds-ink);
}

.ds-card--lg {
    padding: 1.15rem 1.2rem 1.2rem;
}

.ds-card--flush {
    padding: 0.85rem 1rem;
}

.ds-card-title {
    margin: 0;
    font-size: var(--ds-text-md);
    font-weight: 800;
    color: var(--ds-ink);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.ds-card-divider {
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgb(20 35 31 / 0.08);
}

.ds-page-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ds-page-head-kicker {
    margin: 0;
    font-size: var(--ds-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

.ds-page-head-title,
.insights-panel-title {
    margin: 0;
    font-size: var(--ds-text-lg);
    font-weight: 900;
    color: var(--ds-ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.ds-page-head-lead,
.insights-panel-lead {
    margin: 0;
    font-size: var(--ds-text-base);
    line-height: 1.55;
    color: var(--ds-muted);
    max-width: 40rem;
}

.ds-hint {
    margin: 0;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    line-height: 1.55;
    color: var(--ds-muted);
}

.ds-label {
    display: block;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-ink);
    margin-bottom: 0.35rem;
}

.ds-label-sm {
    display: block;
    font-size: var(--ds-text-xs);
    font-weight: 600;
    color: var(--ds-muted);
    margin-bottom: 0.25rem;
}

.ds-input,
.ds-select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-ink);
    background: var(--ds-surface);
    border: 1px solid var(--ds-line-strong);
    border-radius: 0.65rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Tailwind's injected stylesheet can load after style.css, so its .w-44
   utility (fixed 11rem) sometimes wins over .ds-select's width:100% and
   won't shrink to fit a narrow row, pin it down with an ID rule instead. */
#btlDisabilityDegreeInput,
#wizardStep5 .ds-field-row > .ds-select,
#wizardStep5 .ds-field-row > .ds-input {
    width: 100%;
    max-width: 11rem;
}

#wizardStep5 .ds-field-row > .ds-input-compact-wide {
    max-width: 5rem;
}

.ds-input:focus,
.ds-select:focus {
    border-color: var(--ds-info);
    box-shadow: 0 0 0 3px rgb(31 95 139 / 0.15);
}

.ds-input-money-wrap,
.ds-input-pct-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ds-input-money-wrap .ds-input,
.ds-input-pct-wrap .ds-input,
.ds-input-pct-wrap .calc-input-compact {
    padding-left: 1.75rem;
}

.ds-input-pct-wrap .ds-input-compact-num,
.ds-input-pct-wrap .calc-input-compact {
    width: 4.5rem;
}

.ds-currency,
.ds-pct {
    position: absolute;
    left: 0.65rem;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-muted);
    pointer-events: none;
}

.ds-field-panel {
    padding: 0.75rem 0.85rem;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-soft);
}

.ds-field-panel.ds-stat--warn {
    background: var(--ds-warn-bg);
    border-color: var(--ds-warn-border);
}

.ds-field-panel.ds-stat--info {
    background: var(--ds-info-bg);
    border-color: var(--ds-info-border);
}

.ds-field-panel.ds-stat--ok {
    background: var(--ds-ok-bg);
    border-color: var(--ds-ok-border);
}

.ds-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ds-field-row--boxed,
.wizard-dialog .wizard-cols .ds-field-row,
.wizard-dialog .wizard-pension-dates-grid .ds-field-row,
.wizard-dialog .lawyer-benefit-panel .ds-field-row,
.wizard-dialog .ds-field-panel .ds-field-row {
    border: 1px solid color-mix(in srgb, var(--ds-ink, #14231f) 18%, var(--ds-line, #e8eeeb));
    border-radius: 0.55rem;
    padding: 0.4rem 0.55rem;
    background: #fff;
    gap: 0.55rem;
}

.ds-field-row-label {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-muted);
}

/* Asked once, in the wizard's screening questions ("מה סוג הפגיעה או המצב הרפואי העיקרי?",
   "איך בכוונתכם להגיש את התביעה"). The hidden fields stay as the values' carriers: the screening
   answers are written into them (js/fq/apply-calculator.js) and calculator.js saves and reads
   them from there. */
#medicalConditionRow,
#representationRouteRow {
    display: none;
}

/* The medical-cannabis checkbox isn't part of the benefit calculation; the cannabis insight card
   (js/insight-rules.js) offers "לא רלוונטי" itself and ticks this hidden checkbox, so it stays
   only as the value's carrier. The health-fund select next to it stays visible. */
#cannabisAlreadyHaveRow {
    display: none;
}

.ds-input-compact-num {
    width: 4rem;
    text-align: center;
    padding: 0.35rem 0.5rem;
}

.ds-input-compact-wide {
    width: 5rem;
    text-align: center;
}

.ds-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-ink);
    cursor: pointer;
}

.ds-checkbox-row input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--ds-primary);
    flex-shrink: 0;
}

.ds-link {
    font-size: var(--ds-text-xs);
    font-weight: 700;
    color: var(--ds-info-text);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) { .ds-link:hover {
    color: var(--ds-info);
} }

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-sm);
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 160ms ease-out;
    white-space: nowrap;
}

.ds-btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ds-btn-primary {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgb(15 92 76 / 0.22);
}

@media (hover: hover) and (pointer: fine) { .ds-btn-primary:hover {
    background: var(--ds-primary-hover);
    border-color: var(--ds-primary-hover);
} }

.ds-btn-accent {
    background: #1f5f8b;
    border-color: #1f5f8b;
    color: #fff;
    box-shadow: 0 2px 8px rgb(31 95 139 / 0.25);
}

@media (hover: hover) and (pointer: fine) { .ds-btn-accent:hover {
    background: #0b4a3d;
    border-color: #0b4a3d;
} }

.ds-btn-secondary {
    background: var(--ds-surface);
    border-color: var(--ds-line-strong);
    color: var(--ds-primary);
}

@media (hover: hover) and (pointer: fine) { .ds-btn-secondary:hover {
    background: #f5f7f6;
    border-color: #c9d3cf;
} }

.ds-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ds-muted);
}

@media (hover: hover) and (pointer: fine) { .ds-btn-ghost:hover {
    background: rgb(20 35 31 / 0.04);
    color: var(--ds-ink);
} }

.ds-btn-danger {
    background: var(--ds-warn-text);
    border-color: var(--ds-warn-text);
    color: #fff;
    box-shadow: 0 2px 8px rgb(231 76 60 / 0.25);
}

@media (hover: hover) and (pointer: fine) { .ds-btn-danger:hover {
    background: #a93226;
    border-color: #a93226;
} }

.ds-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    min-width: 2.25rem;
    font-size: 1.125rem;
    line-height: 1;
}

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs);
    font-weight: 700;
    background: linear-gradient(135deg, #e8f2ec 0%, #fff 70%);
    border: 1px solid var(--ds-info-border);
    color: var(--ds-info-text);
    box-shadow: var(--ds-shadow-chip);
}

.ds-empty {
    text-align: center;
    padding: 1.4rem 1.1rem;
    border-radius: var(--ds-radius-card);
    border: 1px dashed #cdd6d2;
    background: var(--ds-surface);
    box-shadow: 0 8px 24px rgb(20 35 31 / 0.05);
}

/* Line illustrations in empty states (design system: ink outline, one per screen) */
.ds-empty-illustration {
    display: block;
    width: 170px;
    max-width: 60%;
    height: auto;
    margin: 0 auto;
}

.ds-empty-title {
    margin: 0;
    font-size: var(--ds-text-md);
    font-weight: 800;
    color: var(--ds-ink);
}

.ds-empty-lead {
    margin: 0;
    font-size: var(--ds-text-base);
    line-height: 1.55;
    color: var(--ds-muted);
}

.ds-banner {
    padding: 0.85rem 1rem;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-soft);
    font-size: var(--ds-text-sm);
    line-height: 1.55;
    color: var(--ds-muted);
}

.ds-banner--warn {
    background: var(--ds-warn-bg);
    border-color: var(--ds-warn-border);
    color: var(--ds-warn-text);
}

.ds-banner--ok {
    background: var(--ds-ok-bg);
    border-color: var(--ds-ok-border);
    color: var(--ds-ok-text);
}

.ds-banner--info {
    background: var(--ds-info-bg);
    border-color: var(--ds-info-border);
    color: var(--ds-info-text);
}

.ds-banner-eyebrow {
    font-size: var(--ds-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
}

.ds-banner-title {
    font-size: var(--ds-text-md);
    font-weight: 800;
    color: var(--ds-ink);
    line-height: 1.35;
}

.ds-banner-sub {
    font-size: var(--ds-text-sm);
    font-weight: 500;
}

.ds-stat {
    padding: 0.75rem 0.85rem;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-soft);
}

.ds-stat--work {
    background: linear-gradient(135deg, #eef3f1 0%, #fff 70%);
    border-color: #dde5e1;
}

.ds-stat--lawyer {
    background: linear-gradient(135deg, #eef5f1 0%, #fff 70%);
    border-color: #c3dccf;
    color: var(--ds-lawyer);
}

.ds-stat--btl {
    background: linear-gradient(135deg, #ecfdf5 0%, #fff 70%);
    border-color: #a7f3d0;
    color: var(--ds-btl);
}

.ds-stat--success,
.ds-stat--ok {
    background: var(--ds-ok-bg);
    border-color: var(--ds-ok-border);
}

.ds-stat--warn {
    background: var(--ds-warn-bg);
    border-color: var(--ds-warn-border);
}

.ds-stat--info {
    background: var(--ds-info-bg);
    border-color: var(--ds-info-border);
}

.ds-stat-label {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    color: var(--ds-muted);
    line-height: 1.35;
}

.ds-stat-value {
    margin-top: 0.2rem;
    font-size: var(--ds-text-md);
    font-weight: 800;
    color: var(--ds-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ds-stat--success .ds-stat-value,
.ds-stat--ok .ds-stat-value {
    color: var(--ds-ok-text);
}

.ds-stat--warn .ds-stat-value {
    color: var(--ds-warn-text);
}

.ds-stat--lawyer .ds-stat-value {
    color: var(--ds-lawyer);
}

.ds-stat--btl .ds-stat-value {
    color: var(--ds-btl);
}

.ds-stat-note {
    margin-top: 0.25rem;
    font-size: var(--ds-text-xs);
    font-weight: 500;
    color: var(--ds-muted);
    line-height: 1.4;
}

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

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

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

@media (min-width: 640px) {
    .ds-stat-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

@media (min-width: 1024px) {
    .ds-stat-grid--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.ds-table-wrap {
    overflow-x: auto;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-soft);
}

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

.ds-table th {
    padding: 0.55rem 0.65rem;
    font-size: var(--ds-text-xs);
    font-weight: 700;
    color: var(--ds-muted);
    border-bottom: 1px solid var(--ds-line);
    white-space: nowrap;
}

.ds-table td {
    padding: 0.55rem 0.65rem;
    color: var(--ds-ink);
    border-bottom: 1px solid rgb(20 35 31 / 0.06);
    font-variant-numeric: tabular-nums;
}

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

.ds-table .ds-table-accent {
    color: var(--ds-lawyer);
    font-weight: 700;
}

.ds-table .ds-table-ok {
    color: var(--ds-ok-text);
    font-weight: 700;
}

.ds-table .ds-table-warn {
    color: var(--ds-warn-text);
    font-weight: 700;
}

.ds-table tr.ds-table-strong td {
    font-weight: 800;
    background: linear-gradient(135deg, #eef3f1 0%, #fff 70%);
}

@media (max-width: 639px) {
    #periodsStreamTable [data-col="workNet"],
    #periodsStreamTable [data-col="pensionNet"] {
        display: none;
    }
}

.ds-table tr.ds-table-strong td:first-child {
    font-weight: 800;
}

.ds-legend-item {
    list-style: none;
}

.ds-legend-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-ink);
}

.ds-legend-swatch {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--ds-radius-pill);
    flex-shrink: 0;
}

.ds-legend-label {
    flex: 1;
    min-width: 0;
}

.ds-legend-pct {
    font-size: var(--ds-text-xs);
    color: var(--ds-muted);
    font-variant-numeric: tabular-nums;
}

.ds-legend-val {
    font-size: var(--ds-text-xs);
    font-weight: 800;
    color: var(--ds-ink);
    font-variant-numeric: tabular-nums;
    padding-right: 1rem;
}

.ds-pie-total {
    font-size: var(--ds-text-sm);
    font-weight: 800;
    color: var(--ds-ok-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.ds-gross-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: var(--ds-text-sm);
    color: var(--ds-muted);
}

.ds-gross-row strong {
    color: var(--ds-ink);
    font-variant-numeric: tabular-nums;
}

.ds-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.85rem;
    font-size: var(--ds-text-xs);
    color: var(--ds-muted);
}

.ds-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ds-chart-legend-line {
    width: 0.75rem;
    height: 2px;
    border-radius: 1px;
    background: var(--ds-work);
}

.ds-chart-legend-swatch {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0.15rem;
    border: 1px solid var(--ds-line);
}

.wizard-dates-card {
    padding: 0.75rem 0.85rem;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-soft);
}

.calc-field-label {
    display: block;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--calc-muted);
    margin-bottom: 0.35rem;
}

.calc-field-label-sm {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--calc-muted);
}

/* Pill toggle buttons */
.calc-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.calc-pill-group--stretch .calc-pill {
    flex: 1 1 0;
    min-width: 3.5rem;
}

.calc-pill,
.scenario-btn,
.wizard-pill,
.work-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid var(--calc-line);
    background: var(--calc-surface);
    color: var(--calc-navy);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) { .calc-pill:hover,
.scenario-btn:hover,
.wizard-pill:hover,
.work-btn:hover {
    border-color: var(--calc-line-strong);
    background: #f5f7f6;
} }

.calc-pill.is-active,
.calc-pill.active,
.scenario-btn.active,
.wizard-pill.active,
.work-btn.is-active {
    background: var(--calc-navy);
    border-color: var(--calc-navy);
    color: #fff;
    box-shadow: 0 2px 8px rgb(15 92 76 / 0.22);
}

@media (hover: hover) and (pointer: fine) { .calc-pill.is-active:hover,
.scenario-btn.active:hover,
.wizard-pill.active:hover,
.work-btn.is-active:hover {
    background: var(--calc-navy-hover);
    border-color: var(--calc-navy-hover);
} }

/* Multi-choice segment (2+ options, radio inside) */
.calc-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
    max-width: 28rem;
}

.calc-segment-btn {
    position: relative;
    display: inline-flex;
    flex: 1 1 8rem;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    padding: 0.55rem 1.15rem;
    border-radius: 9999px;
    border: 1px solid var(--calc-line);
    background: var(--calc-surface);
    color: var(--calc-navy);
    font-size: var(--ds-text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

@media (hover: hover) and (pointer: fine) { .calc-segment-btn:hover {
    border-color: var(--calc-line-strong);
    background: #f5f7f6;
} }

.calc-segment-btn input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.calc-segment-btn:has(input:checked) {
    background: var(--calc-navy);
    border-color: var(--calc-navy);
    color: #fff;
    box-shadow: 0 2px 8px rgb(15 92 76 / 0.22);
}

.calc-segment-btn:has(input:focus-visible) {
    outline: 2px solid #1f5f8b;
    outline-offset: 2px;
}

/* Slider field */
.calc-slider-field {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.calc-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

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

.calc-slider-value,
.calc-slider-side {
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--calc-ink);
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    text-align: left;
}

.calc-slider-side {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--calc-muted);
}

.calc-range {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        to left,
        var(--calc-navy) 0%,
        var(--calc-navy) var(--range-pct, 0%),
        var(--calc-fill) var(--range-pct, 0%),
        var(--calc-fill) 100%
    );
    outline: none;
    cursor: pointer;
}

.calc-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

.calc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 999px;
    background: var(--calc-navy);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgb(15 92 76 / 0.35);
    cursor: grab;
}

.calc-range:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.06);
}

.calc-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--calc-fill);
}

.calc-range::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--calc-navy);
}

.calc-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--calc-navy);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgb(15 92 76 / 0.35);
    cursor: grab;
}

.calc-range:focus-visible {
    outline: 2px solid #1f5f8b;
    outline-offset: 4px;
}

.calc-inline-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.15rem;
}

.calc-input-compact {
    width: 4rem;
    text-align: center;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--calc-ink);
    background: var(--calc-surface);
    border: none;
    border-bottom: 1px solid var(--calc-line-strong);
    border-radius: 0;
    outline: none;
}

.calc-input-compact:focus {
    border-bottom-color: var(--calc-navy);
}

body.wizard-open {
    overflow: hidden;
}

#pageShell.is-blurred > :not(#wizardOverlay) {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}

.wizard-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

.wizard-overlay.is-open {
    display: flex;
}

.wizard-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,35,31, 0.45);
}

.wizard-dialog {
    position: relative;
    z-index: 1;
    width: min(96vw, 72rem);
    max-height: 96vh;
    overflow: hidden;
    background: var(--ds-surface); /* white dialog; the mist moved onto the answer buttons (Roy, Emil's second option) */
    border-radius: var(--ds-radius-panel);
    border: 1px solid var(--ds-line);
    box-shadow: var(--ds-shadow-card);
}

.wizard-dialog--compact {
    width: min(94vw, 28rem);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wizard-dialog-inner {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.65rem 1rem 0.55rem;
    max-height: 96vh;
    min-height: 0;
    overflow: hidden;
}

.wizard-header {
    flex-shrink: 0;
}

.wizard-header .ds-card-title {
    font-size: 1rem;
    margin: 0;
}

.wizard-mobile-close {
    display: none;
}

.wizard-progress {
    display: none;
}

.wizard-reassurance-notice {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.65rem;
    padding: 0.55rem 0.85rem;
    font-size: var(--ds-text-sm);
    color: #166534;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.35;
    margin: 0.4rem 0 0.5rem;
}

.wizard-reassurance-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.wizard-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.wizard-nav {
    flex-shrink: 0;
    background: transparent; /* part of the wizard's mist field, not a white strip (Roy) */
    padding-top: 0.45rem;
    margin-top: 0.1rem;
    border-top: 1px solid var(--ds-line);
}

.wizard-nav .ds-btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--ds-text-sm);
}

.wizard-step-title {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--ds-ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.wizard-col {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.wizard-panel-tight {
    padding: 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wizard-study-fields {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.wizard-hint-panel {
    padding: 0.4rem 0.55rem;
    margin: 0;
}

.wizard-credit-row {
    padding-top: 0.15rem;
}

.wizard-credit-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wizard-credit-hint {
    margin: 0;
}

.wizard-work-quick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wizard-work-quick .calc-pill-group {
    flex: 1 1 auto;
    min-width: 0;
}

.wizard-work-quick .calc-inline-field {
    flex-shrink: 0;
    padding-top: 0;
}

.wizard-dialog .calc-slider-field--compact {
    gap: 0.3rem;
}

.wizard-dialog .calc-slider-field {
    gap: 0.4rem;
}

.wizard-dialog .calc-pill,
.wizard-dialog .wizard-pill {
    padding: 0.28rem 0.55rem;
    font-size: 0.75rem;
}

.wizard-dialog .calc-field-label,
.wizard-dialog .calc-field-label-sm {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
}

.wizard-dialog .ds-label,
.wizard-dialog .ds-label-sm {
    font-size: var(--ds-text-sm);
    margin-bottom: 0.15rem;
}

.wizard-dialog .ds-hint {
    font-size: 0.75rem;
    line-height: 1.35;
}

.wizard-dialog .ds-field-row-label {
    font-size: var(--ds-text-sm);
}

.wizard-dialog .ds-input,
.wizard-dialog .ds-select {
    width: calc(100% - 8px);
    margin-inline: 4px;
    padding: 0.32rem 0.5rem;
    font-size: var(--ds-text-sm);
    border-radius: 0.5rem;
}

.wizard-dialog .ds-input-money-wrap .ds-input,
.wizard-dialog .ds-input-pct-wrap .ds-input,
.wizard-dialog .ds-input-pct-wrap .calc-input-compact {
    padding-left: 1.5rem;
}

.wizard-dialog .ds-currency,
.wizard-dialog .ds-pct {
    font-size: 0.75rem;
    left: 0.5rem;
}

.wizard-dialog .ds-checkbox-row {
    font-size: var(--ds-text-sm);
    gap: 0.4rem;
}

.wizard-dialog .ds-checkbox-row input[type="checkbox"] {
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.05rem;
}

.wizard-dialog .pension-fund-card {
    padding: 0.55rem 0.7rem;
    gap: 0.4rem;
}

.wizard-dialog .wizard-fund-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fund-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.fund-name-wrap .fund-name-select,
.fund-name-wrap .fund-name-other {
    width: 100%;
}

.wizard-fund-top {
    display: grid;
    grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
}

.wizard-fund-control {
    width: min(100%, 12rem);
}

.wizard-dialog .wizard-fund-card .ds-field-row {
    gap: 0.75rem;
}

.wizard-dialog .wizard-fund-card .ds-field-row-label {
    flex: 1 1 auto;
    min-width: 7rem;
}

.wizard-pension-layout {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.35rem;
}

.wizard-pension-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
}

.wizard-pension-funds {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.wizard-dialog .wizard-dates-card {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0.55rem;
    gap: 0.3rem;
}

#btlLetterDates {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

#btlLetterDates.hidden,
#btlDatesCard.hidden,
#btlApprovedFields.hidden,
#btlChildrenWrap.hidden,
#pensionDatesCard.hidden,
#pensionRetroBlock.hidden {
    display: none;
}

.wizard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1rem;
    align-items: start;
}

/* One side is only soft-locked modules (see collapseEmptyWizardCols), don't reserve its column. */
.wizard-cols.wizard-cols-single {
    grid-template-columns: 1fr;
}
.wizard-col-empty {
    display: none;
}

#step1WorkDetails.is-retired {
    grid-template-columns: 1fr;
}

.wizard-step {
    min-height: 0;
    display: none;
}

.wizard-step.is-active {
    display: block;
}

.wizard-step > h3,
.wizard-step > .wizard-step-title {
    margin-bottom: 0.35rem;
}

#wizardStep2.is-active {
    display: block;
}

.wizard-step2-decision {
    margin-bottom: 0.5rem;
}

.wizard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.wizard-panel-head .ds-label {
    margin-bottom: 0;
}

#pensionFields:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

#pensionEstimateHead:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

#pensionApprovedFields:not(.hidden) {
    display: flex;
}

#pensionDecisionCols.hidden {
    display: none;
}

.lawyer-proposal-cols {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.45rem 0.65rem;
}

.lawyer-proposal-cols .wizard-col {
    gap: 0.3rem;
}

.lawyer-benefit-panel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    background: color-mix(in srgb, var(--ds-surface) 88%, #fff);
}

/* Pension-fund fee % with no agreed collection months (calculator.js syncLawyerPensionMonthsPrompts). */
.lawyer-months-missing {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ds-warn-text);
}

.ds-input.proposal-future-pension.is-missing {
    border-color: var(--ds-warn);
    box-shadow: 0 0 0 1px var(--ds-warn);
}

.lawyer-months-missing-mark {
    color: var(--ds-warn-text);
    font-weight: 700;
}

.lawyer-benefit-hint {
    margin: 0;
    font-size: var(--ds-text-xs);
    line-height: 1.3;
}

.lawyer-proposal-fixed {
    margin-top: 0.1rem;
}

.wizard-lawyer-extra {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wizard-lawyer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1rem;
    align-items: start;
    margin-top: 0.35rem;
}

.wizard-lawyer-layout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.35rem;
    min-width: 0;
}

.wizard-lawyer-proposals-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wizard-lawyer-proposals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.lawyer-proposal-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-panel, 0.75rem);
    background: #fff;
}

.lawyer-proposal-card.is-cheapest {
    border-color: var(--ds-success, #27ae60);
    box-shadow: inset 0 0 0 1px rgb(39 174 96 / 0.25);
}

.lawyer-proposal-card.is-active-calc {
    border-color: var(--ds-ink, #14231f);
}

.lawyer-proposal-top {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lawyer-proposal-name-row {
    flex: 1 1 auto;
    min-width: 0;
}

.lawyer-proposal-name-row .proposal-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 14rem;
}

.lawyer-proposal-use {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-muted);
    cursor: pointer;
}

.lawyer-proposal-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: var(--ds-text-xs);
    font-weight: 800;
    background: #e8f8ef;
    color: #1e7a45;
}

#lawyerCompareResultsWrap tr.is-cheapest {
    font-weight: 700;
}

#lawyerCompareResultsWrap tbody tr[data-proposal-id] {
    cursor: pointer;
    background: color-mix(in srgb, var(--lawyer-row, #8a9893) 14%, #fff);
    box-shadow: inset -3px 0 0 var(--lawyer-row, transparent);
}

@media (hover: hover) and (pointer: fine) { #lawyerCompareResultsWrap tbody tr[data-proposal-id]:hover {
    background: color-mix(in srgb, var(--lawyer-row, #8a9893) 22%, #fff);
} }

#lawyerCompareResultsWrap tbody tr.is-cashflow {
    background: color-mix(in srgb, var(--lawyer-row, #8a9893) 28%, #fff);
    font-weight: 800;
    box-shadow: inset -4px 0 0 var(--lawyer-row);
}

#lawyerCompareResultsWrap tbody tr.is-cashflow:focus {
    outline: 2px solid var(--lawyer-row);
    outline-offset: -2px;
}

.lawyer-compare-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-inline-end: 0.4rem;
    border-radius: 99px;
    background: var(--lawyer-row);
    vertical-align: -0.08rem;
}

.lawyer-compare-combo {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.lawyer-single-head {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.lawyer-single-head.hidden {
    display: none;
}

.lawyer-single-label {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    color: var(--ds-muted);
    line-height: 1.35;
}

.lawyer-single-value {
    font-size: var(--ds-text-lg);
    font-weight: 900;
    color: var(--ds-lawyer);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.lawyer-single-note {
    font-size: var(--ds-text-xs);
    font-weight: 500;
    color: var(--ds-muted);
    line-height: 1.45;
}

.lawyer-compare-combo.is-single #lawyerCompareResultsVerdict,
.lawyer-compare-combo.is-single #periodsStreamTitle,
.lawyer-compare-combo.is-single .lawyer-lines-footer-hint {
    display: none;
}

.lawyer-periods-in-combo {
    min-width: 0;
}

.lawyer-lines-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lawyer-lines-block.hidden {
    display: none;
}

.lawyer-lines-wrap {
    position: relative;
    width: 100%;
    height: 16.5rem;
    margin-top: 0;
}

.lawyer-lines-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    direction: ltr;
    unicode-bidi: isolate;
}

.lawyer-line-path {
    transition: opacity 0.2s ease;
}

.lawyer-lines-svg:has(.lawyer-line-path.is-pulsing) .lawyer-line-path:not(.is-pulsing) {
    opacity: 0.28;
}

.lawyer-line-path.is-pulsing {
    animation: lawyer-line-pulse 2.4s ease-out 1 both;
}

@keyframes lawyer-line-pulse {
    0%, 38% { stroke-width: 6.8; }
    100% { stroke-width: 2.8; }
}

.lawyer-lines-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1rem;
}

.lawyer-lines-footer-hint {
    margin: 0;
}

.lawyer-lines-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lawyer-lines-swatch {
    display: inline-block;
    width: 1.15rem;
    height: 0;
    border-top: 2.5px solid currentColor;
    border-radius: 99px;
}

.lawyer-lines-leg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.15rem 0.1rem;
    border: 0;
    background: none;
    color: var(--ds-muted);
    font: inherit;
    font-size: var(--ds-text-xs);
    font-weight: 600;
    cursor: pointer;
}

.lawyer-lines-leg-btn.is-active {
    color: var(--ds-ink);
    font-weight: 800;
}

.lawyer-lines-leg-btn.is-active .lawyer-lines-swatch {
    border-top-width: 2.5px;
}

.lawyer-lines-tip {
    position: absolute;
    z-index: 8;
    box-sizing: border-box;
    min-width: 9rem;
    max-width: calc(100% - 16px);
    padding: 0.4rem 0.6rem;
    border-radius: 0.65rem;
    background: var(--ds-ink);
    color: #fff;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    line-height: 1.45;
    pointer-events: none;
    box-shadow: var(--ds-shadow-chip);
}

.lawyer-lines-tip.hidden {
    display: none;
}

.lawyer-lines-tip-month {
    font-weight: 600;
    opacity: 0.78;
    margin-bottom: 0.2rem;
}

.lawyer-lines-tip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.lawyer-lines-tip-row.is-active {
    font-weight: 800;
}

.lawyer-lines-tip-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 99px;
    flex: 0 0 auto;
}

#wizardStep3 .wizard-pension-layout {
    margin-top: 0.35rem;
}

.wizard-dialog .wizard-segment {
    max-width: none;
    gap: 0.35rem;
}

.wizard-dialog .calc-segment-btn {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    flex: 1 1 6rem;
}

.wizard-dialog .space-y-1 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.25rem;
}

.wizard-dialog .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.35rem;
}

.wizard-dialog .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.45rem;
}

.wizard-dialog .fund-estimate {
    display: none;
}

.wizard-dialog .wizard-add-fund-btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    margin-top: 0;
    flex-shrink: 0;
}

.wizard-dialog .wizard-funds-summary,
.wizard-dialog .wizard-retro-hint {
    margin: 0.25rem 0 0;
    font-size: var(--ds-text-xs);
    line-height: 1.3;
}

#wizardStep2 > h3 {
    margin-bottom: 0.35rem;
}

#btlCommonFields:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#btlEstimateFields:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#btlEstimateFields.hidden {
    display: none;
}

#btlApprovedFields:not(.hidden),
#pensionApprovedFields:not(.hidden) {
    display: flex;
}

#pensionFundsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.5rem;
}

@media (max-width: 639px) {
    .wizard-overlay {
        padding: 0;
    }

    .wizard-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .wizard-dialog-inner {
        max-height: 100dvh;
        height: 100%;
        padding: max(0.75rem, env(safe-area-inset-top)) 1rem max(0.75rem, env(safe-area-inset-bottom));
        gap: 0.5rem;
    }

    .wizard-header {
        position: relative;
        padding-inline-start: 2.75rem;
    }

    .wizard-header .ds-card-title {
        font-size: 1.05rem;
    }

    .wizard-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset-inline-start: 0;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 999px;
        border: none;
        background: var(--ds-surface-muted, rgba(20,35,31, 0.06));
        color: var(--ds-muted);
        font-size: 0.95rem;
        line-height: 1;
    }

    #wizardStepPills {
        display: none;
    }

    .wizard-progress {
        display: block;
        flex-shrink: 0;
        height: 0.3rem;
        border-radius: 999px;
        background: var(--ds-line);
        overflow: hidden;
    }

    .wizard-progress-bar {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--ds-accent, #0f5c4c), var(--ds-accent-strong, #0a4539));
        transition: width 0.35s ease;
    }

    .wizard-body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .wizard-step.is-active {
        animation: wizardStepInNext 220ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .wizard-dialog.wizard-dir-back .wizard-step.is-active {
        animation-name: wizardStepInPrev;
    }

    @keyframes wizardStepInNext {
        from { opacity: 0; transform: translateX(-16px); }
        to { opacity: 1; transform: translateX(0); }
    }

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

    .wizard-step-title {
        font-size: 1.05rem;
    }

    .wizard-nav {
        position: sticky;
        bottom: 0;
        display: flex;
        gap: 0.5rem;
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    }

    .wizard-nav .ds-btn {
        min-height: 2.75rem;
        font-size: 0.9rem;
    }

    #wizardPrevBtn {
        flex: 0 0 auto;
    }

    #wizardStepLabel {
        display: none;
    }

    .wizard-nav > .flex {
        flex: 1 1 auto;
        display: flex;
    }

    #wizardNextBtn,
    #wizardDoneBtn {
        flex: 1 1 auto;
    }

    .wizard-dialog .ds-input,
    .wizard-dialog .ds-select {
        font-size: 1rem;
        padding: 0.6rem 0.65rem;
    }

    .wizard-dialog .calc-pill,
    .wizard-dialog .wizard-pill,
    .wizard-dialog .calc-segment-btn {
        font-size: var(--ds-text-sm);
        padding: 0.5rem 0.7rem;
    }

    #wizardStep1 .wizard-cols,
    #wizardStep2 .wizard-cols,
    #wizardStep3 .wizard-cols,
    .lawyer-proposal-cols,
    .wizard-lawyer-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .wizard-lawyer-proposals {
        grid-template-columns: 1fr;
    }

    .wizard-pension-dates-grid {
        grid-template-columns: 1fr;
    }

    .wizard-fund-top {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .wizard-fund-top .fund-type {
        grid-column: 1 / -1;
    }

    .wizard-fund-control {
        width: min(100%, 10rem);
    }

    #pensionFundsList {
        grid-template-columns: 1fr;
    }

    .wizard-dialog .wizard-retro-hint:not(:empty) {
        display: none;
    }

    .wizard-dialog .wizard-funds-summary {
        display: none;
    }
}

/* Scenario pills, inherit calc-pill tokens above */
.scenario-btn {
    font-size: var(--ds-text-sm);
    padding: 0.45rem 0.75rem;
}

.scenario-btn .scenario-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-inline-start: 0.1rem;
    padding: 0 0.35rem;
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs);
    font-weight: 800;
    background: var(--ds-warn-text);
    color: #fff;
    line-height: 1;
}

.scenario-btn.active .scenario-badge {
    background: #fff;
    color: var(--ds-warn-text);
}

/* ── Calculator tabs inside the white site header (app nav) ── */
.app-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.app-nav::-webkit-scrollbar {
    display: none;
}

#scenarioNav.hidden {
    display: none;
}

.blob-tabs {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.app-nav .blob-link,
.app-nav .scenario-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--ds-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .app-nav .blob-link:hover,
.app-nav .scenario-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: transparent;
    color: var(--ds-ink);
    box-shadow: none;
} }

.app-nav .blob-link--icon {
    padding: 0.45rem 0.6rem;
}

.blob-home-icon {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
}

.app-nav .scenario-btn.active,
.app-nav .scenario-btn.active:hover {
    background: rgba(15,92,76, 0.08);
    border-color: transparent;
    color: var(--ds-ink);
    font-weight: 700;
    box-shadow: none;
}

.blob-rule {
    width: 1px;
    height: 0.9rem;
    background: var(--ds-line);
    flex-shrink: 0;
    align-self: center;
}

.app-nav .scenario-badge {
    background: var(--ds-warn-text);
    color: #fff;
}

.scenario-btn.hidden,
.scenario-btn .scenario-badge.hidden,
.app-nav .scenario-badge.hidden,
.app-nav .blob-link.hidden,
.app-nav .blob-rule.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .site-header--app .site-header-inner {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .site-header--app .app-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        margin-inline: -0.5rem;
    }

    .app-nav .blob-link,
    .app-nav .scenario-btn {
        flex: 0 0 auto;
        min-height: 2.5rem;
        font-size: var(--ds-text-sm);
        padding: 0.5rem 0.6rem;
    }

    .app-nav .blob-link--icon {
        min-width: 2.75rem;
    }

    /* 44px tap targets (Impeccable audit, 2026-10-12). */
    .app-nav .blob-link,
    .app-nav .scenario-btn {
        min-height: 2.75rem;
    }

    /* The tab row scrolls on phones: fade the edge it scrolls toward so the cut-off tabs read as "more". */
    .site-header--app .app-nav {
        padding-inline-end: 1.5rem;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
        mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
    }

    html[dir="ltr"] .site-header--app .app-nav {
        -webkit-mask-image: linear-gradient(to left, transparent 0, #000 1.5rem);
        mask-image: linear-gradient(to left, transparent 0, #000 1.5rem);
    }

    /* Swap long labels for short ones on narrow screens so each segment stays
       on one line at the wider mobile touch-target size. */
    .app-nav .blob-link[data-short] {
        font-size: 0;
    }

    .app-nav .blob-link[data-short]::after {
        content: attr(data-short);
        font-size: var(--ds-text-sm);
    }
}

/* Touch screens of any width (a tablet keeps the desktop layout): 44px tap targets in the calculator
   (Impeccable audit, 2026-10-12). Phones get the same from the max-width rules above and below. */
@media (pointer: coarse) {
    .app-nav .blob-link,
    .app-nav .scenario-btn {
        min-height: 2.75rem;
    }

    .app-nav .blob-link--icon {
        min-width: 2.75rem;
    }

}

/* Insights panel, extends ds-panel; insight cards below */
.insights-panel-head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.insights-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.insights-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    line-height: 1.3;
    background: #fff;
    box-shadow: 0 4px 14px rgb(20 35 31 / 0.06);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

@media (hover: hover) and (pointer: fine) { .insights-summary-chip:hover {
    transform: translateY(-1px);
} }

.insights-summary-chip:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

.insights-summary.has-filter .insights-summary-chip:not(.is-active) {
    opacity: 0.5;
}

.insights-summary-chip.is-active {
    box-shadow: 0 4px 14px rgb(20 35 31 / 0.18);
    border-width: 2px;
}

.insights-summary-chip strong {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.insights-summary-chip.is-warn {
    background: linear-gradient(135deg, #ffe8e8 0%, #fff 70%);
    border-color: #ffd0d0;
    color: #c0392b;
}

.insights-summary-chip.is-info {
    background: linear-gradient(135deg, #e8f2ec 0%, #fff 70%);
    border-color: #cfe3d9;
    color: #0d6650;
}

.insights-summary-chip.is-ok {
    background: linear-gradient(135deg, #e8f8ef 0%, #fff 70%);
    border-color: #c6ecd6;
    color: #1e8449;
}

.insights-summary-chip.is-closed {
    background: #f5f7f6;
    border-color: #d6dedb;
    color: #4a5a55;
}

.insight-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.insight-close-status {
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: #4a5a55;
}

.insight-done-btn {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
}

@media (hover: hover) and (pointer: fine) { .insight-done-btn:hover {
    background: var(--ds-primary);
    filter: brightness(1.1);
} }

.insights-critical .insights-group-title {
    color: #b42318;
}

.insight.is-critical {
    border: 2px solid #d92d20;
    box-shadow: 0 6px 18px rgb(217 45 32 / 0.16);
}

.insights-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #bcd7c9;
    border-radius: 12px;
    background: #eef5f1;
    font-size: var(--ds-text-sm);
    font-weight: 700;
}

.insights-notice[hidden] {
    display: none;
}

.insight-deadline {
    display: inline-block;
    margin: 0 0 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: var(--ds-text-sm);
    font-weight: 800;
}

.insight-close-btn {
    min-height: 2rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid #d6dedb;
    border-radius: 999px;
    background: #fff;
    color: var(--ds-ink);
    font: inherit;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) { .insight-close-btn:hover {
    background: #f5f7f6;
} }

.insight-close-btn:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
}

/* Insights split into "להשלמת הפרטים" (asking for more details, shown first) and the rest. */
.insights-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.insights-group + .insights-group {
    margin-top: 0.75rem;
}

.insights-group-title {
    margin: 0;
    font-size: var(--ds-text-md);
    font-weight: 700;
    color: var(--ds-ink);
}

.insights-group-lead {
    margin: -0.35rem 0 0;
    font-size: var(--ds-text-sm);
    color: var(--ds-muted);
}

.insights-group-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.insight-line {
    display: block;
}

.insight-line + .insight-line {
    margin-top: 0.3rem;
}

.insights-rest-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.insights-empty {
    margin: 0;
    padding: 1.4rem 1.1rem;
    border-radius: 1rem;
    border: 1px dashed #cdd6d2;
    background: #fff;
    color: var(--insight-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 8px 24px rgb(20 35 31 / 0.05);
}

.insight {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.05rem 1.1rem;
    border-radius: 1.1rem;
    border: 1px solid transparent;
    background: #fff;
    box-shadow: 0 10px 28px rgb(20 35 31 / 0.08);
    color: var(--insight-ink);
    line-height: 1.55;
}

.insight.warn {
    background: linear-gradient(135deg, #ffe9e9 0%, #fff 55%);
    border-color: #ffd4d4;
}

.insight.ok {
    background: linear-gradient(135deg, #e9f9ef 0%, #fff 55%);
    border-color: #c9edd6;
}

.insight.info {
    background: linear-gradient(135deg, #e9f2ed 0%, #fff 55%);
    border-color: #cfe3d9;
}

.insight-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
}

.insight-icon-halo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.65);
}

.insight.warn .insight-icon-halo {
    background: rgb(231 76 60 / 0.14);
}

.insight.ok .insight-icon-halo {
    background: rgb(39 174 96 / 0.14);
}

.insight.info .insight-icon-halo {
    background: rgb(31 95 139 / 0.14);
}

.insight-icon-glyph {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 4px 10px rgb(20 35 31 / 0.12);
}

.insight.warn .insight-icon-glyph {
    background: #e74c3c;
}

.insight.ok .insight-icon-glyph {
    background: #27ae60;
}

.insight.info .insight-icon-glyph {
    background: #1f5f8b;
}

.insight-icon-glyph svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    direction: ltr;
}

.insight-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.1rem;
}

.insight-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.insight-title {
    margin: 0;
    font-size: var(--ds-text-md);
    font-weight: 800;
    line-height: 1.35;
    color: var(--ds-ink);
}

.insight-badge {
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs);
    font-weight: 800;
    background: rgb(255 255 255 / 0.85);
    border: 1px solid rgb(20 35 31 / 0.08);
    color: var(--ds-ink);
    font-variant-numeric: tabular-nums;
}

.insight-text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ds-muted);
}

.insight-inline-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: var(--ds-primary);
    text-decoration: underline;
    cursor: pointer;
}

.insight-disclaimer {
    margin: 0.35rem 0 0;
    font-size: var(--ds-text-xs);
    font-weight: 700;
    line-height: 1.45;
    color: var(--ds-ink);
}

.insight-more {
    margin-top: 0.45rem;
}

.insight-more summary {
    cursor: pointer;
    font-weight: 800;
    font-size: var(--ds-text-sm);
    line-height: 1.4;
    color: var(--ds-ink);
    list-style: none;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    direction: rtl;
}

.insight-more summary::marker,
.insight-more summary::-webkit-details-marker {
    display: none;
    content: none;
}

.insight-more summary::before {
    content: "▼";
    font-size: var(--ds-text-xs);
    color: #95a5a6;
}

.insight-more[open] summary::before {
    content: "▲";
}

.insight-more-body {
    margin-top: 0.45rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgb(20 35 31 / 0.08);
    font-size: var(--ds-text-sm);
    font-weight: 500;
    line-height: 1.6;
    color: var(--ds-muted);
}

.insight-more-body h4 {
    margin: 0.65rem 0 0.15rem;
    font-size: var(--ds-text-sm);
    font-weight: 800;
    color: var(--ds-ink);
}

.insight-more-body h4:first-child {
    margin-top: 0;
}

.insight-more-body p,
.insight-more-body ul {
    margin: 0;
}

.insight-more-body ul {
    padding-right: 1.1rem;
    margin-top: 0.25rem;
}

.insight-more-body li + li {
    margin-top: 0.15rem;
}

.laron-plain-help {
    color: var(--ds-muted);
}

/* Insight interactive action buttons and pickers */
.insight-action-row {
    margin-top: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.insight-action-btn {
    background: var(--ds-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 1px 3px rgba(13,102,80, 0.25);
}

@media (hover: hover) and (pointer: fine) { .insight-action-btn:hover {
    background: #0d6650;
    box-shadow: 0 3px 6px rgba(13,102,80, 0.35);
    transform: translateY(-1px);
} }

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

.insight-action-success {
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.insight-opp-details {
    margin-top: 0.35rem;
}

.insight-bullet-list {
    margin: 4px 0 8px;
    padding-right: 1.25rem;
    list-style-type: disc;
    font-size: var(--ds-text-sm);
    color: var(--ds-ink);
    line-height: 1.5;
}

.insight-inline-picker {
    background: #f6f8f7;
    border: 1px solid #dde5e1;
    border-radius: 10px;
    padding: 10px 12px;
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-picker-title {
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-ink);
}

.insight-picker-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.insight-chip {
    background: #ffffff;
    color: var(--ds-ink);
    border: 1px solid #c9d3cf;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .insight-chip:hover {
    background: #eef3f1;
    border-color: #8a9893;
} }

.insight-chip.is-active {
    background: #ecf4f0;
    border-color: #0d6650;
    color: #0d6650;
    font-weight: 700;
}

.insight-picker-inputs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.insight-picker-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
}

.insight-picker-label {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: #4a5a55;
}

.insight-picker-input {
    max-width: 130px;
    height: 34px;
    font-size: var(--ds-text-sm);
    padding: 4px 8px;
}

.insight-picker-input[type="date"] {
    max-width: 165px;
}

.insight-picker-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

/* Insight health fund (kupa) box */
.insight-kupa-box {
    background: rgba(238,243,241, 0.7);
    border: 1px solid #c9d3cf;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px;
}

.insight-kupa-title {
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-ink);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.insight-kupa-change-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) { .insight-kupa-change-btn:hover {
    color: #0d6650;
} }

.insight-kupa-prereqs {
    margin: 6px 0 10px 0;
    padding-right: 18px;
    font-size: var(--ds-text-sm);
    color: #2c3a36;
    line-height: 1.45;
    list-style-type: disc;
}

.insight-kupa-prereqs li {
    margin-bottom: 4px;
}

/* Wizard step pills */
.wizard-pill {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    min-width: 1.75rem;
}

/* Work-reduction comparison status pills */
.cmp-status {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs);
    font-weight: 800;
}

.cmp-status.status-same {
    background: linear-gradient(135deg, #eef3f1 0%, #fff 70%);
    color: var(--ds-muted);
}

.cmp-status.status-down {
    background: var(--ds-warn-bg);
    color: var(--ds-warn-text);
}

.cmp-status.status-up {
    background: var(--ds-ok-bg);
    color: var(--ds-ok-text);
}

.cmp-status.status-mid {
    background: linear-gradient(135deg, #fef9c3 0%, #fff 70%);
    color: #a16207;
}

.cmp-row-head {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.cmp-row-head .cmp-row-tip {
    margin-top: 0.12rem;
    padding: 0.2rem;
    margin: -0.08rem -0.2rem 0;
}

#workCompareTable td:first-child {
    position: relative;
    overflow: visible;
    z-index: 1;
}

#workCompareTable tbody tr:has(.cmp-row-tip:hover),
#workCompareTable tbody tr:has(.cmp-row-tip[open]),
#workCompareTable tbody tr:has(.cmp-row-tip:focus-within) {
    position: relative;
    z-index: 30;
}

#workCompareTable tbody tr:has(.cmp-row-tip:hover) td:first-child,
#workCompareTable tbody tr:has(.cmp-row-tip[open]) td:first-child,
#workCompareTable tbody tr:has(.cmp-row-tip:focus-within) td:first-child {
    z-index: 31;
}

#workCompareTable .cmp-row-tip .field-tip-pop {
    z-index: 50;
    width: min(18rem, calc(100vw - 2.5rem));
    padding-top: 0.45rem;
    background: transparent;
    border: none;
    box-shadow: none;
}

#workCompareTable .cmp-row-tip .field-tip-pop-inner {
    padding: 0.7rem 0.8rem;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    color: var(--ds-ink);
    box-shadow: var(--ds-shadow-card);
}

/* Answer cards enter softly */
.answer-card:not(.hidden) {
    animation: cardIn 0.2s ease;
}

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

/* Same-income widget */
.same-income {
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-panel);
    padding: 1.25rem 1.35rem 1.15rem;
    box-shadow: var(--ds-shadow-card);
}

.same-income-embed {
    padding: 0.15rem 0 0.35rem;
}

.same-income-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.same-income-kicker {
    margin: 0;
    font-size: var(--ds-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

.same-income-heading {
    margin: 0.15rem 0 0;
    font-size: var(--ds-text-md);
    font-weight: 800;
    color: var(--ds-ink);
}

.same-income-chip {
    flex-shrink: 0;
    font-size: var(--ds-text-sm);
    font-weight: 800;
    color: var(--ds-ink);
    background: linear-gradient(135deg, #eef3f1 0%, #fff 70%);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-pill);
    padding: 0.28rem 0.7rem;
    box-shadow: var(--ds-shadow-chip);
}

.same-income-hero {
    margin: 1.1rem 0 0.85rem;
}

.same-income-hero-num {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.01em; /* Hebrew: never tighter than -0.01em */
    line-height: 1.1;
    color: var(--ds-ink);
    font-variant-numeric: tabular-nums;
}

.same-income-hero-num.has-prefix::before {
    content: attr(data-prefix);
    display: block;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ds-muted);
    margin-bottom: 0.2rem;
}

.same-income.is-met .same-income-hero-num,
.same-income-embed.is-met .same-income-hero-num {
    color: var(--ds-ok-text);
}

.same-income-hero-sub {
    margin: 0.35rem 0 0;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-muted);
}

.same-income-meter {
    display: block;
}

.same-income-chart {
    min-width: 0;
    position: relative;
}

.same-income-bar-tip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    padding: 0.4rem 0.55rem 0.45rem;
    border-radius: 0.45rem;
    background: var(--ds-ink);
    color: #fff;
    font-size: var(--ds-text-xs);
    line-height: 1.35;
    max-width: 15rem;
    box-shadow: 0 6px 18px rgb(20 35 31 / 0.22);
    text-align: right;
}

.same-income-bar-tip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ds-ink);
}

.same-income-bar-tip.hidden {
    display: none;
}

.same-income-bar-tip-title {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.same-income-bar-tip-body {
    margin-top: 0.15rem;
    font-weight: 500;
    opacity: 0.92;
}

.same-income-track-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.same-income-seg {
    height: 100%;
    min-width: 0;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.12s ease, filter 0.12s ease;
}

.same-income-seg.is-hover {
    z-index: 2;
    box-shadow: 0 0 0 2px var(--ds-ink);
    filter: brightness(1.08);
}

.same-income-seg::before {
    content: '';
    position: absolute;
    inset: -0.35rem 0;
}

.same-income-seg-labels {
    display: flex;
    align-items: flex-end;
    min-height: 2.35em;
    margin-bottom: 0.2rem;
}

.same-income-seg-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.15;
    text-align: center;
}

.same-income-seg-name {
    font-size: var(--ds-text-xs);
    font-weight: 600;
}

.same-income-seg-val {
    font-size: var(--ds-text-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.same-income-track {
    position: relative;
    flex: 1;
    display: flex;
    height: 8px;
    border-radius: 999px;
    background: var(--calc-fill, #ebf0ee);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(15 92 76 / 0.06);
}

.same-income-seg.is-gap {
    background: transparent;
}

.same-income-tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--ds-ink);
    transform: translateX(-1px);
    pointer-events: none;
    border-radius: 1px;
    z-index: 1;
}

.same-income-pct {
    flex-shrink: 0;
    min-width: 2.6rem;
    text-align: right;
    font-size: var(--ds-text-md);
    font-weight: 800;
    color: var(--ds-ink);
    font-variant-numeric: tabular-nums;
}

.same-income.is-met .same-income-pct,
.same-income-embed.is-met .same-income-pct {
    color: var(--ds-ok);
}

.same-income-seg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-muted);
}

.same-income-seg-legend li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.same-income-swatch {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.same-income-ends {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.7rem;
}

.same-income-end-label {
    font-size: var(--ds-text-xs);
    font-weight: 700;
    color: var(--ds-muted);
}

.same-income-end-val {
    margin-top: 0.1rem;
    font-size: var(--ds-text-md);
    font-weight: 800;
    color: var(--ds-ink);
    font-variant-numeric: tabular-nums;
}

.same-income-note {
    margin: 0.85rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ds-line);
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: var(--ds-muted);
    line-height: 1.45;
}

/* Every tab uses the same wide shell as the overview, so switching tabs
   doesn't leave empty margins on wide screens. */
#pageShell {
    width: 100%;
    max-width: min(96rem, 100%);
}

/* Work bar, compact top strip */
#cardWorkReduction .full-dash-work-bar.same-income {
    flex: 1 1 auto;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem 0.75rem;
    border-radius: var(--ds-radius-card);
    overflow: visible;
    justify-content: center;
}

#cardWorkReduction .full-dash-work-bar.same-income {
    flex: none;
    width: 100%;
    margin-bottom: 1rem;
}

#workSameIncomeBlock.is-met .same-income-hero-num {
    color: var(--ds-ok-text);
}

#cardWorkReduction .work-income-head {
    margin: 0 0 0.75rem;
}

#cardWorkReduction .work-compare-title {
    margin: 0 0 0.65rem;
}

#cardWorkReduction .same-income-top {
    margin: 0;
}

#cardWorkReduction .same-income-hero-num.has-prefix {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.4rem;
}

#cardWorkReduction .same-income-hero-num.has-prefix::before {
    flex: 1 0 100%;
}

#cardWorkReduction .same-income-hero-sub {
    margin-top: 0.25rem;
}

#cardWorkReduction .same-income-pct-live {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: 0.25rem;
    padding: 0.05rem 0.15rem;
    border: 0;
    background: transparent;
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em; /* Hebrew: never tighter than -0.01em */
    line-height: 1.15;
    cursor: pointer;
    border-radius: 0.4rem;
    transition: transform 0.12s ease, filter 0.12s ease, background-color 0.12s ease;
}

#cardWorkReduction .same-income-pct-status {
    font-weight: 400;
    letter-spacing: 0;
}

#cardWorkReduction .same-income-pct-live.is-pct-low {
    color: #e74c3c;
}

#cardWorkReduction .same-income-pct-live.is-pct-mid {
    color: #e67e22;
}

#cardWorkReduction .same-income-pct-live.is-pct-high {
    color: #27ae60;
}

#cardWorkReduction .same-income-pct-live.is-pct-over {
    color: #7dcea0;
}

#cardWorkReduction .same-income-pct-live:hover,
#cardWorkReduction .same-income-pct-live:focus-visible,
#cardWorkReduction .same-income-pct-live.is-hover {
    transform: scale(1.08);
    filter: brightness(1.06);
    background: rgb(20 35 31 / 0.04);
    outline: none;
}

#cardWorkReduction .full-dash-work-bar.same-income.hidden {
    display: none;
}

#cardWorkReduction .full-dash-work-bar .same-income-heading {
    margin: 0;
    font-size: var(--ds-text-sm);
    font-weight: 800;
    width: 100%;
}

.same-income-target-label {
    margin: 0.1rem 0 0;
    width: 100%;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-muted);
}

.same-income-target-label:empty {
    display: none;
}

/* The work card's legend shows only what the bar's labels cannot: narrow segments' amounts, and the what-if's "switched off" chips (which bring an income back) */
#cardWorkReduction .full-dash-work-bar .same-income-seg-legend { margin: 0; }
#cardWorkReduction .full-dash-work-bar .same-income-seg-legend li:not(.is-sim-off):not(.is-label-missing) { display: none; }
#cardWorkReduction .full-dash-work-bar .same-income-seg-legend:has(.is-sim-off, .is-label-missing) { margin-top: 0.5rem; }

#cardWorkReduction .full-dash-work-bar .same-income-seg-labels {
    min-height: 2.7em;
}

#cardWorkReduction .full-dash-work-bar .same-income-seg-name,
#cardWorkReduction .full-dash-work-bar .same-income-seg-val {
    font-size: var(--ds-text-sm);
}

#cardWorkReduction .full-dash-work-main {
    flex: 1 1 auto;
    min-width: 0;
}

#cardWorkReduction .full-dash-bar-wrap {
    width: 100%;
    min-width: 0;
}

#cardWorkReduction .full-dash-bar-wrap .same-income-meter {
    width: 100%;
}

#cardWorkReduction .full-dash-track-row {
    padding: 0.7rem 0;
    overflow: visible;
}

#cardWorkReduction .full-dash-work-bar .same-income-track {
    height: 1.05rem;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #dde5e1 0%, #ebf0ee 45%, #f6f8f7 100%);
    box-shadow:
        inset 0 2px 5px rgb(20 35 31 / 0.14),
        inset 0 -1px 1px rgb(255 255 255 / 0.85),
        0 1px 0 rgb(255 255 255 / 0.6);
    overflow: visible;
}

#cardWorkReduction .full-dash-work-bar .same-income-seg:not(.is-gap) {
    position: relative;
    background-image:
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.38) 0%,
            rgb(255 255 255 / 0.08) 38%,
            transparent 52%,
            rgb(20 35 31 / 0.16) 100%
        );
    background-blend-mode: soft-light;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
}

#cardWorkReduction .full-dash-work-bar .same-income-seg.is-fill-start:not(.is-gap) {
    border-radius: 999px 0 0 999px;
}

#cardWorkReduction .full-dash-work-bar .same-income-seg.is-fill-end:not(.is-gap) {
    border-radius: 0 999px 999px 0;
}

#cardWorkReduction .full-dash-work-bar .same-income-seg.is-fill-start.is-fill-end:not(.is-gap) {
    border-radius: 999px;
}

#cardWorkReduction .full-dash-work-bar .same-income-seg.is-fill-end:not(.is-gap)::after {
    content: '';
    position: absolute;
    inset-inline-end: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.55);
    box-shadow:
        inset 0 1px 2px rgb(20 35 31 / 0.28),
        0 0 0 1px rgb(255 255 255 / 0.25);
    pointer-events: none;
    z-index: 2;
}

#cardWorkReduction .full-dash-work-bar .same-income-seg.is-hover {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.45),
        0 0 0 2px color-mix(in srgb, var(--seg-color, var(--ds-ink)) 55%, transparent);
    filter: brightness(1.06);
}

#cardWorkReduction .full-dash-work-bar .same-income-seg.is-gap {
    background: repeating-linear-gradient(
        -45deg,
        rgb(231 76 60 / 0.14),
        rgb(231 76 60 / 0.14) 3px,
        transparent 3px,
        transparent 6px
    ) !important;
    box-shadow: none;
}

#cardWorkReduction .full-dash-work-bar .same-income-seg.is-over {
    opacity: 1;
    background-color: #27ae60 !important;
}

#cardWorkReduction .full-dash-work-bar .same-income-tick {
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ds-ink);
    border-radius: 2px;
    transform: translateX(-2px);
    box-shadow: 0 0 0 1px #fff;
    z-index: 3;
}

#cardWorkReduction .full-dash-work-bar .same-income-bar-tip {
    border-radius: 0.65rem;
    padding: 0.4rem 0.65rem 0.45rem;
    background: var(--ds-ink);
    box-shadow: 0 8px 20px rgb(20 35 31 / 0.2);
}

#cardWorkReduction .full-dash-work-bar .same-income-bar-tip::after {
    border-top-color: var(--ds-ink);
}

@media (max-width: 899px), (max-height: 679px) {

    #cardWorkReduction .full-dash-work-bar.same-income {
        flex-direction: column;
        align-items: stretch;
    }

    #cardWorkReduction .full-dash-work-main {
        width: 100%;
    }

}

@media (max-width: 639px) {
    /* The per-segment labels floating above the bar collide on narrow phones, show the wrapping legend list below the bar instead. */
    #cardWorkReduction .full-dash-work-bar .same-income-seg-labels {
        display: none;
    }

        #cardWorkReduction .full-dash-work-bar .same-income-seg-legend {
        display: flex;
        /* Scales smoothly with viewport width instead of jumping at a single
           breakpoint, ~0.68rem at 320px phones up to ~0.82rem at 639px. */
        font-size: clamp(0.68rem, 0.54rem + 0.7vw, 0.82rem);
    }

    

    

    #cardWorkReduction .full-dash-work-bar.same-income {
        justify-content: flex-start;
    }

}

.field-tip {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.field-tip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--ds-radius-pill);
    border: 1px solid var(--ds-line-strong);
    background: var(--ds-surface);
    color: var(--ds-muted);
    font-size: var(--ds-text-xs);
    font-weight: 800;
    line-height: 1;
    cursor: help;
    list-style: none;
}

.field-tip-btn::-webkit-details-marker {
    display: none;
}

.field-tip-pop {
    display: none;
    /* position: fixed (not absolute) so it can never be clipped by an
       ancestor's overflow:hidden (the wizard dialog scrolls internally), 
       JS clamps top/left to the viewport on open so it never runs off
       either edge regardless of where the trigger button sits. */
    position: fixed;
    top: -9999px;
    left: -9999px;
    z-index: 90;
    width: min(20rem, calc(100vw - 1.5rem));
    padding: 0.7rem 0.8rem;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-weight: 500;
    font-size: var(--ds-text-sm);
    line-height: 1.5;
    box-shadow: var(--ds-shadow-card);
}

.field-tip:hover .field-tip-pop,
.field-tip:focus-within .field-tip-pop,
.field-tip[open] .field-tip-pop {
    display: block;
}

.field-tip-lead {
    margin: 0 0 0.45rem;
    color: var(--ds-muted);
}

.field-tip-pop ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.field-tip-pop li + li {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--ds-line);
}

.field-tip-pop strong {
    color: var(--ds-ink);
}

.feedback-overlay {
    z-index: 80;
    padding: max(0.6rem, env(safe-area-inset-top)) max(0.6rem, env(safe-area-inset-inline-end)) max(0.6rem, env(safe-area-inset-bottom)) max(0.6rem, env(safe-area-inset-inline-start));
    align-items: center;
}

.feedback-dialog {
    width: min(94vw, 28rem);
    max-width: 100%;
    max-height: min(92dvh, calc(100dvh - 1.2rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.feedback-dialog-inner {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 1rem 0.75rem;
}

.feedback-dialog-inner .modal-head {
    flex: none;
}

.feedback-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 0.15rem 0.15rem;
    -webkit-overflow-scrolling: touch;
}

.feedback-label {
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-ink);
    margin-top: 0.35rem;
}

.feedback-form textarea,
.feedback-form input[type="email"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ds-line-strong);
    border-radius: 0.7rem;
    padding: 0.65rem 0.75rem;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ds-ink);
    background: var(--ds-surface);
    resize: vertical;
}

.feedback-form textarea {
    min-height: 5.5rem;
    max-height: min(28vh, 12rem);
    flex: 0 1 auto;
}

.feedback-form textarea:focus,
.feedback-form input[type="email"]:focus {
    outline: 2px solid var(--ds-primary);
    outline-offset: 1px;
}

.legal-feedback-link {
    font: inherit;
    color: var(--ds-info-text);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.feedback-share {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.55rem;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    line-height: 1.45;
    color: var(--ds-ink);
    cursor: pointer;
}

.feedback-share[hidden] { display: none; }

.feedback-share input {
    margin-top: 0.2rem;
    flex: none;
}

.feedback-preview {
    margin: 0.15rem 0 0.35rem;
    border: 1px solid var(--ds-line);
    border-radius: 0.7rem;
    padding: 0.45rem 0.7rem;
    background: var(--ds-page);
}

.feedback-preview summary {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ds-muted);
}

.feedback-preview pre {
    margin: 0.5rem 0 0;
    max-height: 10rem;
    overflow: auto;
    font-size: var(--ds-text-xs);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ds-ink);
}

.feedback-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.feedback-status {
    margin: 0.15rem 0;
    font-size: var(--ds-text-sm);
    font-weight: 600;
}

.feedback-status.is-ok { color: #0f766e; }
.feedback-status.is-error { color: #b45309; }

.feedback-form .ds-btn-primary {
    position: sticky;
    bottom: 0;
    align-self: stretch;
    margin-top: 0.45rem;
    z-index: 1;
}

@media (max-width: 639px) {
    .feedback-overlay {
        align-items: flex-end;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .feedback-dialog {
        width: 100%;
        max-height: min(90dvh, calc(100dvh - 0.75rem));
        border-radius: 1rem 1rem 0.65rem 0.65rem;
    }

    .feedback-dialog-inner {
        padding: 0.7rem 0.8rem 0.55rem;
    }

    .feedback-form textarea {
        min-height: 4.25rem;
        max-height: 18vh;
    }

    .feedback-form .ds-btn-primary {
        margin-bottom: 3.4rem;
    }
}

/* Floating Questions, shared tokens only (see FQ_COLOR_TOKENS.md) */
.fq-hidden { display: none !important; }
.fq-trust {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: var(--calc-fill);
    color: var(--ds-ink);
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    font-size: var(--ds-text-xs);
    font-weight: 600;
    text-align: center;
}
.fq-help {
    font-size: var(--ds-text-sm);
    color: var(--ds-muted);
    margin: 0 0 12px;
    line-height: 1.4;
}
.fq-chips { display: flex; flex-direction: column; gap: 8px; }
.fq-chip {
    min-height: 48px;
    border: 1.5px solid var(--ds-line-strong);
    background: var(--ds-surface);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: right;
    cursor: pointer;
    font: inherit;
    font-size: var(--ds-text-base);
    font-weight: 600;
    color: var(--ds-ink);
    transition: border-color .15s, background .15s;
}
@media (hover: hover) and (pointer: fine) { .fq-chip:hover { border-color: var(--ds-primary); } }
.fq-chip.selected {
    border-color: var(--ds-primary);
    background: var(--calc-fill);
    color: var(--ds-ink);
}
.fq-chip-sub {
    display: block;
    font-weight: 400;
    font-size: var(--ds-text-xs);
    color: var(--ds-muted);
    margin-top: 2px;
}
.fq-soft-link {
    background: none;
    border: none;
    color: var(--ds-primary);
    font: inherit;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    padding: 8px;
    text-decoration: underline;
}
.fq-soft-q {
    margin: 8px 0 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-ink);
    line-height: 1.4;
}
.fq-soft-actions { display: flex; flex-direction: column; gap: 8px; }
.fq-soft-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgb(20 35 31 / 0.06);
    color: var(--ds-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .fq-soft-close:hover { background: rgb(20 35 31 / 0.12); color: var(--ds-ink); } }
#fqDepStep1 .fq-inline-field { margin-top: 8px; }
#fqDepStep2 { margin-top: 14px; }
.fq-soft-skip-later { width: 100%; margin-top: 10px; }
.fq-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ds-work);
    color: var(--ds-surface);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: 9999;
    max-width: 90vw;
}
.fq-toast.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
body.fq-hide-work #wizardStep1,
body.fq-hide-work .wizard-pill[data-step="1"] { display: none !important; }
body.fq-hide-btl #wizardStep2,
body.fq-hide-btl .wizard-pill[data-step="2"] { display: none !important; }
body.fq-hide-work-injury #wizardStep5,
body.fq-hide-work-injury .wizard-pill[data-step="5"] { display: none !important; }
body.fq-hide-pension #wizardStep3,
body.fq-hide-pension .wizard-pill[data-step="3"] { display: none !important; }
body.fq-hide-lawyer #wizardStep4,
body.fq-hide-lawyer .wizard-pill[data-step="4"] { display: none !important; }
body.fq-hide-credit .wizard-credit-block { display: none !important; }
#fqScreenHost {
    padding: 0.25rem 0.25rem 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Required fields left empty when moving forward in the wizard (validateWizardStep). */
.wizard-dialog .ds-input.is-invalid,
.wizard-dialog .ds-select.is-invalid,
.wizard-dialog .calc-segment.is-invalid .calc-segment-btn {
    border-color: var(--ds-warn);
    box-shadow: 0 0 0 1px var(--ds-warn);
}

/* Inside a side-by-side field row, wrap so the message gets a full-width line of its own. */
.ds-field-row:has(> .wizard-field-error) {
    flex-wrap: wrap;
}

.ds-field-row > .wizard-field-error {
    flex-basis: 100%;
    margin-top: -0.35rem;
}

.wizard-field-error {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-warn-text);
}

/* "Nothing to calculate yet" above the wizard footer (calculator.js showWizardNavNote). */
.wizard-nav-note {
    text-align: center;
    margin-bottom: 0.25rem;
}

/* One wizard from topic to results: screening questions and data steps share the header,
   progress bar and nav. Pills are dropped since they only count the data steps. */
.wizard-dialog.is-unified #wizardStepPills {
    display: none;
}

.wizard-dialog.is-unified .wizard-progress {
    display: block;
    flex-shrink: 0;
    height: 0.3rem;
    border-radius: 999px;
    background: var(--ds-line);
    overflow: hidden;
}

.wizard-dialog.is-unified .wizard-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ds-accent, #0f5c4c), var(--ds-accent-strong, #0a4539));
    transition: width 0.35s ease;
}

.wizard-dialog.is-topic-pick .wizard-progress,
.wizard-dialog.is-uncounted .wizard-progress,
.wizard-dialog.is-topic-pick #wizardClassicNav,
.wizard-dialog.is-screening #wizardDoneBtn {
    display: none;
}

@media (min-width: 640px) {
    .fq-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .fq-chips > .fq-chip:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.fq-decision-collapsed { display: none !important; }

    border: 1px solid var(--ds-line-strong);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-primary);
    font: inherit;
.fq-deepen-grid { display: grid; gap: 10px; margin-bottom: 12px; }
.fq-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-muted);
}
.fq-inline-field {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.fq-input {
    flex: 1;
    min-width: 140px;
    min-height: 48px;
    border: 1.5px solid var(--ds-line-strong);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    font-size: var(--ds-text-base);
    background: var(--ds-surface);
    color: var(--ds-ink);
}

/* FQ field-level slim: soft modules locked until Layer B unlock / טופס מלא */
body.fq-slim .fq-soft-locked {
    display: none !important;
}

/* Inline Opportunities Banner (Layer B refinement) */
.fq-opp-banner {
    background: linear-gradient(135deg, #eef5f1 0%, #e8f2ec 100%);
    border: 1px solid #c3dccf;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px rgba(13,102,80, 0.05);
    position: relative;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.fq-opp-banner.hidden {
    display: none !important;
}

.fq-opp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.fq-opp-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fq-opp-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0a4539;
    margin: 0;
}

.fq-opp-dismiss-all {
    background: transparent;
    border: none;
    color: var(--ds-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-dismiss-all:hover {
    background: rgba(92,107,102, 0.12);
    color: #14231f;
} }

.fq-opp-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fq-opp-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.05rem 1.15rem;
    border-radius: 1.1rem;
    border: 1px solid #cfe3d9;
    background: linear-gradient(135deg, #eef5f1 0%, #fff 60%);
    box-shadow: 0 4px 14px rgb(20 35 31 / 0.06);
    color: var(--insight-ink, #14231f);
    line-height: 1.55;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-item:hover {
    box-shadow: 0 8px 24px rgb(20 35 31 / 0.09);
    border-color: #9cc5b2;
} }

.fq-opp-item.warn {
    background: linear-gradient(135deg, #fff7f7 0%, #fff 60%);
    border-color: #ffd4d4;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-item.warn:hover {
    border-color: #fca5a5;
} }

.fq-opp-item.ok {
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 60%);
    border-color: #c9edd6;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-item.ok:hover {
    border-color: #86efac;
} }

.fq-opp-item.info {
    background: linear-gradient(135deg, #eef5f1 0%, #fff 60%);
    border-color: #cfe3d9;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-item.info:hover {
    border-color: #9cc5b2;
} }

.fq-opp-banner-badge {
    font-size: var(--ds-text-xs);
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #dcebe4;
    color: #0a4539;
    border: 1px solid #c3dccf;
    white-space: nowrap;
}

.fq-opp-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.fq-opp-item-title {
    font-size: 0.975rem;
    font-weight: 700;
    color: #14231f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fq-opp-item .insight-badge {
    font-size: var(--ds-text-xs);
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #dcebe4;
    color: #0a4539;
    border: 1px solid #c3dccf;
    white-space: nowrap;
}

.fq-opp-item.warn .insight-badge {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.fq-opp-item.ok .insight-badge {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.fq-opp-item-sub {
    font-size: var(--ds-text-sm);
    color: #2c3a36;
    line-height: 1.55;
    margin: 0 0 0.5rem 0;
}

.fq-opp-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.fq-opp-btn-apply {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(13,102,80, 0.25);
}

@media (hover: hover) and (pointer: fine) { .fq-opp-btn-apply:hover {
    background: #0d6650;
    box-shadow: 0 3px 6px rgba(13,102,80, 0.35);
    transform: translateY(-1px);
} }

.fq-opp-btn-apply:active {
    transform: translateY(0);
}

.fq-opp-btn-skip {
    background: transparent;
    border: 1px solid #c9d3cf;
    color: var(--ds-muted);
    font-size: var(--ds-text-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-btn-skip:hover {
    background: #eef3f1;
    color: #14231f;
    border-color: #8a9893;
    text-decoration: none;
} }

.fq-opp-success {
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: var(--ds-text-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fq-opp-dep-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #f6f8f7;
    border: 1px solid #dde5e1;
    border-radius: 10px;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
}

.fq-opp-picker-label {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: #2c3a36;
}

.fq-opp-chips {
    display: inline-flex;
    gap: 6px;
}

.fq-opp-chip {
    background: #eef3f1;
    color: #14231f;
    border: 1px solid #c9d3cf;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-chip:hover {
    background: #dde5e1;
    border-color: #8a9893;
} }

.fq-opp-chip.is-active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: var(--ds-surface);
}

.fq-opp-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fq-opp-money-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #f6f8f7;
    border: 1px solid #dde5e1;
    border-radius: 10px;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
}

.fq-opp-input {
    width: 130px;
    height: 36px;
    padding: 6px 10px;
    border: 1.5px solid #c9d3cf;
    border-radius: 8px;
    font: inherit;
    font-size: 0.875rem;
    background: #ffffff;
    color: #14231f;
}

.fq-opp-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(13,102,80, 0.15);
}

.fq-opp-ext-link {
    font-size: var(--ds-text-sm);
    color: #2563eb;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-ext-link:hover {
    color: #0d6650;
} }

.fq-opp-credit-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: #f6f8f7;
    border: 1px solid #dde5e1;
    border-radius: 10px;
    padding: 10px 14px;
    box-sizing: border-box;
}

.fq-opp-credit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fq-opp-credit-links {
    font-size: var(--ds-text-sm);
    color: var(--ds-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.fq-opp-retro-summary {
    margin-bottom: 6px;
    line-height: 1.45;
}

.fq-opp-bullet-list {
    margin: 6px 0 8px 0;
    padding-right: 18px;
    list-style-type: disc;
    font-size: var(--ds-text-sm);
    color: #2c3a36;
    line-height: 1.45;
}

.fq-opp-details {
    margin-top: 8px;
    background: #f6f8f7;
    border: 1px solid #dde5e1;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: var(--ds-text-sm);
}

.fq-opp-details-summary {
    cursor: pointer;
    font-weight: 600;
    color: #2563eb;
    outline: none;
    user-select: none;
    list-style: none;
}

.fq-opp-details-summary::-webkit-details-marker {
    display: none;
}

.fq-opp-details[open] .fq-opp-details-summary {
    margin-bottom: 8px;
    border-bottom: 1px dashed #c9d3cf;
    padding-bottom: 4px;
}

.fq-opp-details-body {
    color: #2c3a36;
    line-height: 1.45;
    font-size: var(--ds-text-sm);
}

.fq-opp-inner-list {
    margin: 4px 0 6px 0;
    padding-right: 16px;
    list-style-type: circle;
    font-size: var(--ds-text-sm);
    color: #4a5a55;
    line-height: 1.4;
}

.fq-opp-retro-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    background: #f6f8f7;
    border: 1px solid #dde5e1;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
}

.fq-opp-retro-lead {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: #14231f;
}

.fq-opp-retro-quick-all {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid #dde5e1;
}

.fq-opp-retro-split {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.fq-opp-retro-col {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fq-opp-retro-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fq-opp-retro-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fq-opp-input-sm {
    width: 72px;
    height: 32px;
    text-align: center;
    font-weight: 600;
}

.fq-opp-input-unit {
    font-size: var(--ds-text-sm);
    color: var(--ds-muted);
}

.fq-opp-chips-sub {
    gap: 4px;
    flex-wrap: wrap;
}

.fq-opp-chip-xs {
    padding: 3px 7px;
    font-size: 0.75rem;
    border-radius: 4px;
}

.fq-opp-retro-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Restore bar for dismissed opportunities */
.fq-opp-restore-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, #eff6f2 0%, #e4efea 100%);
    border: 1.5px dashed #9cc5b2;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.fq-opp-restore-bar.hidden {
    display: none !important;
}

.fq-opp-restore-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.fq-opp-restore-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.fq-opp-restore-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fq-opp-restore-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0a4539;
}

.fq-opp-restore-desc {
    font-size: var(--ds-text-sm);
    color: #0d6650;
}

.fq-opp-restore-actions {
    flex-shrink: 0;
}

.fq-opp-restore-btn {
    background: #0d6650;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 1px 3px rgba(13,102,80, 0.25);
}

@media (hover: hover) and (pointer: fine) { .fq-opp-restore-btn:hover {
    background: #0a4539;
    box-shadow: 0 3px 6px rgba(13,102,80, 0.35);
    transform: translateY(-1px);
} }

.fq-opp-restore-btn:active {
    transform: translateY(0);
}

.fq-opp-restore-svg {
    flex-shrink: 0;
}

/* Skipped items footer inside visible banner */
.fq-opp-skipped-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: #eef3f1;
    border-radius: 8px;
    margin-top: 6px;
    font-size: var(--ds-text-sm);
    color: #4a5a55;
}

.fq-opp-skipped-note {
    font-weight: 500;
}

.fq-opp-restore-inline-btn {
    background: transparent;
    border: none;
    color: #2563eb;
    font-weight: 600;
    font-size: var(--ds-text-sm);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) { .fq-opp-restore-inline-btn:hover {
    color: #0d6650;
} }

/* Insights tab restore notice */
.insights-opp-restore {
    margin-top: 10px;
    margin-bottom: 8px;
}

.insights-opp-restore.hidden {
    display: none !important;
}

.insights-opp-restore-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ecf4f0;
    border: 1px solid #c3dccf;
    border-radius: 10px;
    padding: 10px 14px;
}

.insights-opp-restore-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.insights-opp-restore-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.insights-opp-restore-text {
    font-size: var(--ds-text-sm);
    color: #0a4539;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .fq-opp-restore-bar,
    .insights-opp-restore-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .fq-opp-restore-actions {
        width: 100%;
    }
    .fq-opp-restore-btn {
        width: 100%;
        justify-content: center;
    }
    .fq-opp-skipped-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ── Site Header & Top Navigation ── */
site-header,
#siteHeader {
    display: block;
    width: 100%;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 450;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ds-line);
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* The sticky header (z 450) would otherwise sit on top of the wizard overlay (z 60) and hide
   the full-screen mobile wizard's title, close button and progress. */
body:has(.wizard-overlay.is-open) .site-header {
    z-index: 50;
}

.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
}

.site-brand {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: inherit;
    flex-shrink: 0;
}

.site-brand picture {
    display: inline-flex;
    align-items: center;
}

.site-header-logo-img {
    height: 46px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) { .site-brand:hover .site-header-logo-img {
    transform: scale(1.03);
} }

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 1 1 auto;
}

.site-nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-muted);
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    text-align: center;
}

@media (hover: hover) and (pointer: fine) { .site-nav-link:hover {
    color: var(--ds-ink);
    background: rgba(0, 0, 0, 0.04);
} }

.site-nav-link.is-active {
    color: var(--ds-ink);
    background: rgba(15,92,76, 0.08);
    font-weight: 700;
}

.site-header-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.site-header .lang-switch {
    position: relative;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.site-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--ds-primary);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) { .site-nav-cta:hover {
    background: var(--ds-primary-hover);
    transform: translateY(-1px);
} }

.site-nav-toggle {
    display: none;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-line);
    border-radius: 0.6rem;
    background: var(--ds-surface);
    color: var(--ds-ink);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .site-nav-toggle:hover {
    background: var(--ds-page);
    border-color: var(--ds-line-strong);
} }

.site-nav-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* "נגישות" in the header (desktop); in the menu below on narrow screens. Opens js/a11y-widget.js. */
.site-a11y-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.35rem;
    padding: 0 0.7rem;
    border: 1px solid var(--ds-line);
    border-radius: 0.6rem;
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-family: inherit;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.site-a11y-btn:hover,
.site-a11y-btn.is-active,
.site-a11y-btn[aria-expanded="true"] {
    background: #ecfdf5;
    border-color: var(--ds-primary, #059669);
    color: var(--ds-primary, #059669);
}

.site-a11y-btn:focus-visible,
.site-drawer-a11y:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

.site-a11y-btn svg,
.site-drawer-a11y svg {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.site-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.35rem;
    padding: 0 0.7rem;
    border: 1px solid var(--ds-line);
    border-radius: 0.6rem;
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-family: inherit;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.site-share-btn:hover,
.site-share-btn.is-active,
.site-share-btn[aria-expanded="true"] {
    background: #fff1f2;
    border-color: #fca5a5;
    color: #9f1239;
}

.site-share-btn:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.site-share-heart-svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: #ef4444;
    flex-shrink: 0;
    transform-origin: center;
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .site-share-heart-svg {
        animation: none;
    }
}

/* Minimal Share Popover */
.site-share-popover {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    width: 275px;
    max-width: calc(100vw - 1.5rem);
    background: var(--ds-surface, #ffffff);
    border: 1px solid var(--ds-line, #dde5e1);
    border-radius: 0.75rem;
    padding: 0.85rem 0.95rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    text-align: right;
    direction: rtl;
}

.site-share-popover[hidden] {
    display: none;
}

.site-share-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.site-share-popover-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ds-ink, #14231f);
}

.site-share-popover-close {
    background: transparent;
    border: none;
    color: var(--ds-muted);
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0 0.2rem;
    line-height: 1;
    border-radius: 0.3rem;
}

@media (hover: hover) and (pointer: fine) { .site-share-popover-close:hover {
    color: var(--ds-ink, #14231f);
} }

.site-share-popover-desc {
    font-size: var(--ds-text-sm);
    line-height: 1.45;
    color: var(--ds-muted);
    margin: 0 0 0.75rem 0;
}

.site-share-popover-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.site-share-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 0.55rem;
    font-family: inherit;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.site-share-action-btn.is-whatsapp {
    background: #10b981;
    color: #ffffff;
}

@media (hover: hover) and (pointer: fine) { .site-share-action-btn.is-whatsapp:hover {
    background: #059669;
} }

.site-share-action-btn.is-copy {
    background: var(--ds-page, #f6f8f7);
    border-color: var(--ds-line, #dde5e1);
    color: var(--ds-ink, #14231f);
}

@media (hover: hover) and (pointer: fine) { .site-share-action-btn.is-copy:hover {
    background: #eef3f1;
    border-color: #c9d3cf;
} }

.site-share-action-btn.is-copy.is-copied {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

/* Drawer share item */
.site-drawer-share {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: right;
    background: transparent;
    border: none;
    padding: 0.65rem 0.75rem;
    color: var(--ds-ink);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .site-drawer-share:hover {
    background: #fff1f2;
    color: #9f1239;
} }

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

@media (max-width: 580px) {
    .site-share-btn {
        min-width: 2.35rem;
        min-height: 2.35rem;
        padding: 0;
        justify-content: center;
        border-radius: 0.6rem;
    }
    .site-share-btn-text {
        display: none;
    }
    /* The button stays 2.35rem wide visually; its tap area reaches the 44px minimum. */
    .site-share-btn {
        position: relative;
    }
    .site-share-btn::after,
    #accountBtn::after,
    .site-nav-toggle::after {
        content: '';
        position: absolute;
        inset: -0.25rem;
    }
    #accountBtn,
    .site-nav-toggle {
        position: relative;
    }
    .site-share-popover-close {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.2rem;
        margin: -0.6rem -0.6rem -0.6rem 0;
    }
    .site-share-popover {
        position: fixed;
        top: auto;
        bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        border-radius: 1rem;
        padding: 1.15rem;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2), 0 0 0 100vmax rgba(0, 0, 0, 0.35);
        z-index: 1000;
        animation: popoverSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .site-share-action-btn {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        min-height: 2.75rem;
    }
    .site-share-popover-title {
        font-size: 0.95rem;
    }
    .site-share-popover-desc {
        font-size: var(--ds-text-sm);
        margin-bottom: 0.9rem;
    }
}

.site-drawer-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ds-line);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.site-drawer-heading {
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-muted);
    text-align: center;
}

button.site-drawer-link.site-drawer-a11y {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* Mobile drawer */
.site-nav-drawer {
    display: none;
    border-top: 1px solid var(--ds-line);
    background: var(--ds-surface);
    padding: 0.75rem 1.25rem 1.25rem;
}

.site-nav-drawer.is-open {
    display: block;
}

.site-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.site-drawer-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ds-ink);
    text-decoration: none;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    transition: background 0.15s ease;
    text-align: center;
}

.site-drawer-link:hover,
.site-drawer-link.is-active {
    background: var(--ds-page);
    color: var(--ds-primary);
    font-weight: 700;
}

.site-drawer-cta {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--ds-primary);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .site-nav {
        display: none;
    }
    .site-header-inner {
        padding: 0.5rem 1.25rem;
    }
    .site-header-logo-img {
        height: 38px;
        max-width: 140px;
    }
    .site-header-actions {
        width: auto;
        justify-content: flex-end;
    }
    .site-nav-toggle {
        display: flex;
    }
    .site-nav-cta {
        display: none;
    }
    .site-a11y-btn {
        display: none;
    }
}

/* ==========================================================================
   Wizard card, light refresh in the landing page's palette (pine / ink, Rubik; DECISIONS 2026-10-13 design system).
   Visual only: layout and structure of the floating card are unchanged. Scoped to
   #wizardOverlay so the calculator's other modals keep their look.
   ========================================================================== */
#wizardOverlay {
    --wz-navy: #0f5c4c;
    --wz-navy-hover: #0a4539;
    --wz-orange: #0f5c4c;
    --wz-orange-hover: #0a4539;
    --wz-ink: #14231f;
    --wz-muted: var(--ds-muted);
    --wz-line: #dde5e1;
    --wz-line-soft: #e8eeeb;
    --wz-fill: #eef3f1;
    --wz-selected: #eef5f1;
    --wz-ring: 0 0 0 3px rgb(15 92 76 / 0.14);
}

#wizardOverlay .wizard-backdrop {
    background: rgb(20 35 31 / 0.35);
    backdrop-filter: blur(2px);
}

#wizardOverlay .wizard-dialog {
    font-family: 'Rubik', var(--ds-font);
    color: var(--wz-ink);
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px -12px rgb(20 35 31 / 0.25);
}

#wizardOverlay .wizard-dialog-inner {
    padding: 1.1rem 1.4rem 1rem;
    gap: 0.6rem;
}

#wizardOverlay input,
#wizardOverlay select,
#wizardOverlay button,
#wizardOverlay textarea {
    font-family: inherit;
}

/* Header, progress and titles */
#wizardOverlay #wizardTitle {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wz-navy);
    letter-spacing: -0.01em;
}

#wizardOverlay .wizard-dialog.is-unified .wizard-progress {
    height: 0.375rem;
    background: rgb(15 92 76 / 0.14); /* a pine track on the mist, not a white strip */
}

#wizardOverlay .wizard-progress-bar {
    background: linear-gradient(90deg, var(--wz-navy), #0d6650);
}

#wizardOverlay .wizard-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wz-ink);
    margin: 0.35rem 0 0.7rem;
    letter-spacing: -0.01em; /* Hebrew: never tighter than -0.01em */
}

#wizardOverlay .fq-help,
#wizardOverlay .ds-hint {
    color: var(--wz-muted);
    font-size: var(--ds-text-sm);
    line-height: 1.5;
}

#wizardOverlay .ds-label,
#wizardOverlay .ds-label-sm,
#wizardOverlay .calc-field-label {
    font-weight: 600;
    color: var(--wz-ink);
}

#wizardOverlay .ds-field-row-label {
    font-weight: 500;
    color: var(--wz-ink);
}

#wizardOverlay .wizard-mobile-close {
    background: var(--wz-fill);
    color: var(--wz-muted);
}

/* Panels and boxed rows: lighter borders, softer corners */
#wizardOverlay .ds-field-panel {
    border-color: var(--wz-line-soft);
    border-radius: 1rem;
    background: #f9fbfa;
    box-shadow: none;
}

#wizardOverlay .ds-field-row--boxed,
#wizardOverlay .wizard-cols .ds-field-row,
#wizardOverlay .wizard-pension-dates-grid .ds-field-row,
#wizardOverlay .lawyer-benefit-panel .ds-field-row,
#wizardOverlay .ds-field-panel .ds-field-row {
    border-color: var(--wz-line-soft);
    border-radius: 0.85rem;
    padding: 0.5rem 0.7rem;
    background: #fff;
}

/* Inputs and selects */
#wizardOverlay .ds-input,
#wizardOverlay .ds-select,
#wizardOverlay .calc-input-compact {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wz-ink);
    background-color: #fff;
    border: 1px solid var(--wz-line);
    border-radius: 0.75rem;
}

#wizardOverlay .ds-input::placeholder {
    color: var(--ds-placeholder);
    font-weight: 400;
}

@media (hover: hover) and (pointer: fine) { #wizardOverlay .ds-input:hover,
#wizardOverlay .ds-select:hover,
#wizardOverlay .calc-input-compact:hover {
    border-color: #c9d3cf;
} }

#wizardOverlay .ds-input:focus,
#wizardOverlay .ds-select:focus,
#wizardOverlay .calc-input-compact:focus {
    border-color: var(--wz-navy);
    box-shadow: var(--wz-ring);
}

#wizardOverlay .ds-input-money-wrap .ds-input,
#wizardOverlay .ds-input-pct-wrap .ds-input,
#wizardOverlay .ds-input-pct-wrap .calc-input-compact {
    padding-left: 1.75rem;
}

/* Select: native arrow replaced by a light chevron at the inline end */
#wizardOverlay .ds-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.7rem center;
    background-size: 1rem;
    padding-left: 2.1rem;
    cursor: pointer;
}

/* Segmented choices (radio groups): soft track, the picked option is a raised white tab */
#wizardOverlay .calc-segment {
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--wz-fill);
    border-radius: 0.9rem;
}

#wizardOverlay .calc-segment-btn {
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--wz-muted);
    font-size: var(--ds-text-sm);
    font-weight: 500;
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) { #wizardOverlay .calc-segment-btn:hover {
    background: rgb(255 255 255 / 0.6);
    color: var(--wz-ink);
} }

#wizardOverlay .calc-segment-btn:has(input:checked) {
    background: #fff;
    color: var(--wz-navy);
    font-weight: 600;
    box-shadow: 0 1px 3px rgb(20 35 31 / 0.1), 0 0 0 1px rgb(20 35 31 / 0.04);
}

#wizardOverlay .calc-segment-btn:has(input:focus-visible) {
    outline: 2px solid var(--wz-navy);
    outline-offset: 1px;
}

/* Quick-pick pills (e.g. 0% / 50% / 75% / 100%) */
#wizardOverlay .calc-pill,
#wizardOverlay .work-btn {
    min-height: 2.25rem;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 999px;
    background: var(--wz-fill);
    color: var(--wz-ink);
    font-size: var(--ds-text-sm);
    font-weight: 500;
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) { #wizardOverlay .calc-pill:hover,
#wizardOverlay .work-btn:hover {
    background: #dde5e1;
} }

#wizardOverlay .calc-pill.is-active,
#wizardOverlay .calc-pill.active,
#wizardOverlay .work-btn.is-active {
    background: var(--wz-navy);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgb(15 92 76 / 0.35);
}

/* A step taller than the card (e.g. several lawyer offers) scrolls instead of being cut off. */
#wizardOverlay .wizard-body {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: 0.25rem;
}

/* Pension step with an approved decision: the same fund cards, each asking only for its approved
   amount (calculator.js updatePensionDecisionUI toggles .is-approved-mode). */
#pensionFundsList .fund-approved-label-approved {
    display: none;
}

#pensionFundsList.is-approved-mode .fund-approved-label-estimate,
#pensionFundsList.is-approved-mode .fund-salary-row,
#pensionFundsList.is-approved-mode .fund-salary-hint,
#pensionFundsList.is-approved-mode .fund-cover-row,
#pensionFundsList.is-approved-mode .fund-full-row,
#pensionFundsList.is-approved-mode .fund-estimate {
    display: none !important;
}

#pensionFundsList.is-approved-mode .fund-approved-label-approved {
    display: inline;
}

/* «מה הקרן החליטה?» belongs to the decision path only. «עוד אין סכום» (rejected, appealed or
   pending) swaps the approved amount for the salary × cover % estimate rows (DECISIONS 2026-10-18). */
#pensionFundsList:not(.is-approved-mode) .fund-status-row,
#pensionFundsList:not(.is-approved-mode) .fund-status-hint,
#pensionFundsList.is-approved-mode .is-no-amount .fund-status-hint,
#pensionFundsList.is-approved-mode .is-no-amount .fund-approved-row {
    display: none !important;
}

#pensionFundsList.is-approved-mode .is-no-amount .fund-salary-row,
#pensionFundsList.is-approved-mode .is-no-amount .fund-cover-row {
    display: flex !important;
}

#pensionFundsList.is-approved-mode .is-no-amount .fund-estimate {
    display: block !important;
}

#pensionFundsList .fund-status-row .calc-segment-btn {
    white-space: nowrap;
}

/* אומדן: the estimate is cover % × insured salary only, so the per-fund approved amount (a "יש
   החלטה" field) is hidden; its value is kept and comes back when switching to "יש החלטה". */
#pensionFundsList:not(.is-approved-mode) .fund-approved-row {
    display: none !important;
}

/* Compact number fields (months, rates, fees) keep their own width; the generic wizard rule
   would otherwise stretch them across the row and squeeze their labels onto two lines. */
#wizardOverlay .ds-input.ds-input-compact-num {
    width: 5.5rem;
    flex: 0 0 auto;
}

#wizardOverlay .ds-input.ds-input-compact-wide {
    width: 8rem;
    flex: 0 0 auto;
}

/* Keep the health-fund and שר״מ selects from squeezing their labels onto two lines */
#wizardOverlay #cannabisKupaSelect {
    max-width: 14rem;
}

#wizardOverlay #specialServicesLevelSelect {
    max-width: 17rem;
}

/* Checkboxes */
#wizardOverlay .ds-checkbox-row {
    font-weight: 500;
}

#wizardOverlay .ds-checkbox-row input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--wz-navy);
}

/* "?" tips */
#wizardOverlay .field-tip-btn {
    border: none;
    background: var(--wz-fill);
    color: var(--wz-muted);
}

/* Screening answers: option cards. Single-choice cards show a chevron (picking one moves on);
   multi-select cards show a checkbox. */
#wizardOverlay .fq-chips {
    gap: 0.6rem;
}

#wizardOverlay .fq-chip {
    display: grid;
    align-items: center;
    column-gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    /* The mist on the buttons, on a white dialog (Emil's second option, after a green tint and cream were
       tried): ink on it 13.8:1, the border 3.7:1 against white. Hover is a colour change only, press is a scale. */
    border: 1px solid #6f8a81;
    border-radius: 1rem;
    background: var(--ds-mist);
    color: var(--wz-ink);
    font-size: 0.95rem;
    font-weight: 500;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out, transform 0.1s ease-out;
}

@media (hover: hover) and (pointer: fine) { #wizardOverlay .fq-chip:hover {
    background: #eef5f1;
    border-color: var(--wz-navy);
} }

#wizardOverlay .fq-chip:active {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) { #wizardOverlay .fq-chip:active { transform: none; } }
html.a11y-no-anim #wizardOverlay .fq-chip:active { transform: none; }

#wizardOverlay .fq-chip:focus-visible {
    outline: 2px solid var(--wz-navy);
    outline-offset: 2px;
}

#wizardOverlay .fq-chip-sub {
    color: var(--wz-muted);
    font-size: var(--ds-text-sm);
    margin-top: 0.1rem;
}

#wizardOverlay .fq-chips:not(#fqCoverChips):not(#fqLawyerBenefitChips) .fq-chip {
    grid-template-columns: 1fr auto;
}

#wizardOverlay .fq-chips:not(#fqCoverChips):not(#fqLawyerBenefitChips) .fq-chip::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f5c4c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { #wizardOverlay .fq-chips:not(#fqCoverChips):not(#fqLawyerBenefitChips) .fq-chip:hover::after {
    transform: translateX(-3px);
} }

#wizardOverlay .fq-chips:not(#fqCoverChips):not(#fqLawyerBenefitChips) .fq-chip-sub {
    grid-column: 1;
}

#fqCoverChips .fq-chip,
#fqLawyerBenefitChips .fq-chip {
    grid-template-columns: auto 1fr;
}

#fqCoverChips .fq-chip::before,
#fqLawyerBenefitChips .fq-chip::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid #6f8a81;
    border-radius: 0.35rem;
    background: #fff center / 0.8rem no-repeat;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#fqCoverChips .fq-chip-sub,
#fqLawyerBenefitChips .fq-chip-sub {
    grid-column: 2;
}

#wizardOverlay .fq-chip.selected {
    border-color: var(--wz-navy);
    background: var(--wz-navy);
    color: #fff; /* 7.9:1 */
}

#wizardOverlay .fq-chip.selected .fq-chip-sub {
    color: #cfe5dc; /* 6:1 on pine */
}

/* An answer the documents suggest (js/fq/doc-suggest.js): marked, not chosen; a tap confirms it. */
#wizardOverlay .fq-chip.selected.is-suggested {
    border: 2px dashed var(--wz-navy);
    background: var(--ds-mist);
    color: var(--ds-ink);
}
#wizardOverlay .fq-chip.selected.is-suggested .fq-chip-sub { color: var(--ds-muted); }
#wizardOverlay .fq-chips:not(#fqCoverChips):not(#fqLawyerBenefitChips) .fq-chip.selected.is-suggested::after { filter: none; }
.fq-doc-suggest {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ds-mist);
    font-size: var(--ds-text-sm);
    color: var(--ds-ink);
    line-height: 1.5;
}
.fq-doc-suggest .ui-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ds-primary); }

#wizardOverlay .fq-chips:not(#fqCoverChips):not(#fqLawyerBenefitChips) .fq-chip.selected::after {
    filter: brightness(0) invert(1);
}

#fqCoverChips .fq-chip.selected::before,
#fqLawyerBenefitChips .fq-chip.selected::before {
    border-color: #fff;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f5c4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}

/* Footer buttons: outlined back, pine next and pine "show results" */
#wizardOverlay .wizard-nav {
    border-top-color: rgb(15 92 76 / 0.14);
    padding-top: 0.75rem;
}

#wizardOverlay .wizard-nav .ds-btn {
    min-height: 2.6rem;
    padding: 0.5rem 1.3rem;
    border-radius: 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
}

#wizardOverlay #wizardPrevBtn {
    background: transparent;
    border: 1.5px solid var(--wz-navy);
    color: var(--wz-navy);
}

@media (hover: hover) and (pointer: fine) { #wizardOverlay #wizardPrevBtn:hover {
    background: rgb(15 92 76 / 0.08);
} }

#wizardOverlay #wizardNextBtn {
    background: var(--wz-navy);
    border-color: var(--wz-navy);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgb(15 92 76 / 0.55);
}

/* Not answered yet: a quiet pine tint with pine text (about 5:1), not a faded button that reads as broken */
#wizardOverlay #wizardNextBtn:disabled {
    opacity: 1;
    background: rgb(15 92 76 / 0.18);
    border-color: transparent;
    color: var(--wz-navy);
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) { #wizardOverlay #wizardNextBtn:hover {
    background: var(--wz-navy-hover);
    border-color: var(--wz-navy-hover);
} }

#wizardOverlay #wizardDoneBtn {
    background: linear-gradient(135deg, var(--wz-orange) 0%, #0a4539 100%);
    border-color: transparent;
    color: #fff; /* white on pine: 6.6:1 or more across the gradient */
    box-shadow: 0 6px 16px -6px rgb(15 92 76 / 0.6);
}

@media (hover: hover) and (pointer: fine) { #wizardOverlay #wizardDoneBtn:hover {
    background: #0a4539; /* white text 10.9:1 */
} }

#wizardOverlay #wizardStepLabel {
    color: var(--wz-muted);
    font-weight: 500;
}

@media (max-width: 639px) {
    #wizardOverlay .wizard-dialog {
        border-radius: 0;
    }

    #wizardOverlay .wizard-dialog-inner {
        padding-inline: 1rem;
    }

    #wizardOverlay .ds-input,
    #wizardOverlay .ds-select {
        font-size: 1rem;
    }

    /* The accessibility button (js/a11y-widget.js) would sit on the full-screen wizard's footer,
       over "הקודם". #a11yFab is the fixed button itself (#a11yRoot is a static wrapper). */
    body.wizard-open #a11yFab {
        bottom: 5.25rem;
    }

}

/* Lawyer step: "עוד לא קיבלתי הצעה" */
.lawyer-no-offer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.6rem;
}

.lawyer-no-offer-row.hidden {
    display: none;
}

/* One-time tip under the edit (pencil) button, after a lawyer offer was skipped */
.lawyer-offer-hint {
    position: fixed;
    z-index: 600;
    width: min(20rem, calc(100vw - 2rem));
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.7rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--ds-primary);
    color: #ffffff;
    box-shadow: 0 10px 25px -6px rgba(20,35,31, 0.35);
    font-size: var(--ds-text-sm);
    line-height: 1.45;
    animation: lawyer-offer-hint-in 0.2s ease-out;
}

.lawyer-offer-hint::before {
    content: '';
    position: absolute;
    top: -6px;
    inset-inline-start: auto;
    left: calc(var(--hint-arrow-x, 50%) - 6px);
    width: 12px;
    height: 12px;
    background: var(--ds-primary);
    transform: rotate(45deg);
}

.lawyer-offer-hint.is-floating {
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
}

.lawyer-offer-hint.is-floating::before {
    display: none;
}

.lawyer-offer-hint-go {
    flex: 1;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) { .lawyer-offer-hint-go:hover {
    text-decoration: underline;
} }

.lawyer-offer-hint-close {
    flex-shrink: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.lawyer-offer-hint button:focus-visible {
    outline: 2px solid #ffe600;
    outline-offset: 2px;
}

#openWizardBtn.has-lawyer-offer-hint {
    box-shadow: 0 0 0 3px rgba(15,92,76, 0.35);
    border-radius: 999px;
}

@keyframes lawyer-offer-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.lawyer-offer-hint.is-floating {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .lawyer-offer-hint { animation: none; }
}

/* ---------- Journey card + dates dialog (js/journey-ui.js) ---------- */
/* Next-date chip in the header, beside "נגישות" (js/journey-ui.js renderJourneyChip); same size and
   frame as .site-a11y-btn. */
#journeyChip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.35rem;
    max-width: 16rem;
    padding: 0 0.7rem;
    border: 1px solid var(--ds-line);
    border-radius: 0.6rem;
    background: var(--ds-surface);
    color: var(--ds-ink);
    font: inherit;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
/* "החשבון שלי" (js/journey-ui.js renderAccountButton): an icon beside the chip, while signed in */
#accountBtn { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; padding: 0; flex: none; border: 1px solid var(--ds-line); border-radius: 999px; background: var(--ds-surface); color: var(--ds-ink); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
#accountBtn svg { width: 1.3rem; height: 1.3rem; }
@media (hover: hover) and (pointer: fine) { #accountBtn:hover { border-color: var(--ds-primary); color: var(--ds-primary); } }
#accountBtn:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
#accountBtn[hidden], body.journey-gate #accountBtn { display: none; }
#journeyChip .jc-long, #journeyChip .jc-short { overflow: hidden; text-overflow: ellipsis; }
#journeyChip .jc-short { display: none; }
@media (hover: hover) and (pointer: fine) { #journeyChip:hover { border-color: var(--ds-primary); } }
#journeyChip:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
#journeyChip[hidden] { display: none; }
#journeyChip.is-urgent { border-color: var(--ds-warn-border); background: #fff5f5; color: var(--ds-warn-text); }
#journeyChip .jc-icon { font-size: 0.95rem; }
#journeyChip .jc-dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--ds-warn); flex: none; }
/* No site header on the page: a corner of the screen instead. */
#journeyChip.is-floating { position: fixed; bottom: 1.25rem; inset-inline-start: 1.25rem; z-index: 9998; height: 2.75rem; box-shadow: var(--ds-shadow-chip); }
@media (max-width: 639px) {
    /* One header row on phones with the chip and the account icon too: tighter gaps, and the chip
       (not the logo or the buttons) gives way, cutting its text short if it must. */
    .site-header-inner:has(#accountBtn:not([hidden])) { flex-wrap: nowrap; column-gap: 0.75rem; }
    .site-header-inner:has(#accountBtn:not([hidden])) .site-brand { flex-shrink: 0; }
    .site-header-inner:has(#accountBtn:not([hidden])) .site-header-actions { min-width: 0; flex-shrink: 1; gap: 0.4rem; }
    #journeyChip { min-width: 0; flex-shrink: 1; }
    .site-header-inner:has(#accountBtn:not([hidden])) #journeyChip .jc-icon { display: none; }
    /* The calculator's header carries its tabs too: they keep their own row (the max-width 768px rule), or the
       one-row rule above squeezed them into ~150px, cut off, and pushed the buttons over the logo. */
    .site-header--app .site-header-inner:has(#accountBtn:not([hidden])) { flex-wrap: wrap; }
    #journeyChip { max-width: 44vw; padding: 0 0.55rem; }
    /* Narrow header: the short form keeps the logo, chip and menu on one row. */
    #journeyChip .jc-long { display: none; }
    #journeyChip .jc-short { display: inline; }
}

/* Dates dialog: one question per screen (js/journey-ui.js) */
/* A short sheet that fits its content, not the full-screen wizard size on phones. */
.wizard-dialog.journey-dialog { height: auto; min-height: 0; }
/* The accessibility button (js/a11y-widget.js) would sit on the sheet's choices; focus is trapped
   in the dialog while it's open anyway. */
body.journey-open #a11yFab { display: none; }
.journey-dialog .journey-modal-body { overflow-y: auto; overflow-x: hidden; min-height: 0; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.1rem 0.15rem 0.25rem; padding-inline-end: 8px; }
.jd-head { display: flex; align-items: center; gap: 0.5rem; }
.jd-head .ds-card-title { flex: 1; margin: 0; font-size: 1.15rem; }
.jd-icon-btn { width: 2.25rem; height: 2.25rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: rgb(20 35 31 / 0.05); color: var(--ds-ink); font: inherit; font-size: 1rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .jd-icon-btn:hover { background: rgb(20 35 31 / 0.1); } }
.jd-icon-btn[hidden] { display: none; }
.jd-sub { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.jd-cta { width: 100%; min-height: 3rem; font-size: var(--ds-text-md); border-radius: 0.85rem; }
.jd-link { background: none; border: none; padding: 0.35rem; font: inherit; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-primary); cursor: pointer; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .jd-link:hover { text-decoration: underline; } }
.jd-center { align-self: center; }
.jd-flash { margin: 0; padding: 0.45rem 0.75rem; border-radius: 0.75rem; background: var(--ds-ok-bg); border: 1px solid var(--ds-ok-border); color: var(--ds-ok-text); font-size: var(--ds-text-sm); font-weight: 600; }
.jd-privacy { margin: 0; text-align: center; font-size: var(--ds-text-xs); color: var(--ds-muted); }
.jd-empty { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1.25rem 0 0.5rem; color: var(--ds-muted); }
.jd-empty-illustration { display: block; width: 150px; max-width: 55%; height: auto; margin-bottom: 0.5rem; }
.jd-empty p { margin: 0; font-size: var(--ds-text-base); }
/* The dates list: one heading per body with its stage, rows with a pencil (js/journey-ui.js homeView) */
.jd-track + .jd-track { margin-top: 0.25rem; }
.jd-track-head { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.4rem; }
.jd-track-name { margin: 0; font-size: var(--ds-text-sm); font-weight: 700; color: var(--ds-ink); }
.jd-track-stage { font-size: var(--ds-text-xs); color: var(--ds-muted); }
.jd-track-stage::before { content: '·'; margin-inline-end: 0.5rem; }
.jd-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ds-line); border-radius: 0.85rem; overflow: hidden; background: var(--ds-surface); }
.jd-row { display: flex; align-items: center; }
.jd-row + .jd-row { border-top: 1px solid var(--ds-line); }
.jd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 0.9rem; border: none; background: none; font: inherit; text-align: start; color: var(--ds-ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { button.jd-row-main:hover { background: rgb(20 35 31 / 0.03); } }
.jd-row-main strong { font-size: var(--ds-text-base); font-weight: 600; }
.jd-row-main small { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.jd-row-summary, .jd-row-meaning { white-space: normal; }
.jd-row-summary { color: var(--ds-ink); }
.jd-row-meaning b { font-weight: 600; }
.jd-row-note { font-size: var(--ds-text-sm); color: var(--ds-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-row-edit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-inline-end: 0.35rem; border: none; border-radius: 999px; background: none; color: var(--ds-muted); cursor: pointer; }
.jd-row-edit svg { width: 1.15rem; height: 1.15rem; }
.jd-row-edit:hover, .jd-row-edit:focus-visible { color: var(--ds-primary); background: rgb(20 35 31 / 0.05); }
.jd-row.is-next { background: var(--ds-warn-bg, #fff8eb); }
.jd-row.is-next strong { color: var(--ds-warn-text); font-size: var(--ds-text-sm); }
/* Editing one event */
.jd-field-row { display: flex; gap: 0.6rem; }
.jd-field-row .jd-field { flex: none; }
.jd-field-row .jd-grow { flex: 1; min-width: 0; }
.jd-field-row .ds-input { height: 3rem; min-height: 3rem; box-sizing: border-box; }
.jd-hint { font-size: var(--ds-text-xs); color: var(--ds-muted); }
.jd-delete { border-top: 1px solid var(--ds-line); padding-top: 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.jd-delete-actions { display: flex; gap: 1rem; }
.jd-note-input { min-height: 9rem; resize: vertical; font: inherit; line-height: 1.5; }
/* Accounts: the offer, the email and the code (js/auth.js) */
.jd-lead { margin: 0; font-size: var(--ds-text-base); line-height: 1.6; color: var(--ds-ink); }
.jd-link.jd-inline { padding: 0; font-size: inherit; }
.jd-sync-what ul { margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--ds-text-sm); color: var(--ds-ink); }
.jd-code { min-height: 3.25rem; text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }
.site-drawer-account { display: block; margin-top: 0.35rem; }
/* The calculator's sign-in (js/journey-ui.js openGate): over everything but the site header, whose
   "נגישות" and language switch stay usable; the page behind is hidden, not just dimmed. */
#journeyModal.is-gate { z-index: 70; }
#journeyModal.is-gate .wizard-backdrop { background: var(--ds-page); }
body.journey-gate:has(#journeyModal.is-gate) .site-header { z-index: 450; }
/* On phones the sign-in is a card near the top of the screen (just below the site header), not a bottom
   sheet under an empty page: capped width, centred text, a field that is not edge to edge. Top-aligned
   so the keyboard does not push it around (design audit, phase 4). */
@media (max-width: 639px) {
    #journeyModal.is-gate { align-items: flex-start; padding: 5.25rem 1rem 1.5rem; }
    #journeyModal.is-gate .journey-dialog { width: min(100%, 22.5rem); max-height: calc(100dvh - 6.75rem); border-radius: 1.25rem; box-shadow: var(--ds-shadow-card); }
    #journeyModal.is-gate .jd-head { justify-content: center; }
    #journeyModal.is-gate .jd-head .ds-card-title { flex: none; text-align: center; font-size: 1.3rem; }
    #journeyModal.is-gate .jd-lead,
    #journeyModal.is-gate .jd-sub,
    #journeyModal.is-gate .jd-privacy,
    #journeyModal.is-gate .jd-field-label { text-align: center; }
    #journeyModal.is-gate .ds-input { height: 2.9rem; min-height: 2.9rem; text-align: center; }
    #journeyModal.is-gate .jd-cta { min-height: 2.9rem; }
}
/* The next-date chip is the user's data: not shown to whoever stands at the sign-in screen. */
body.journey-gate #journeyChip { display: none; }
/* "החשבון שלי" */
.jd-account-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.jd-account-actions .jd-pill { justify-content: center; min-height: 2.75rem; }
.jd-list { margin: 0; padding-inline-start: 1.2rem; font-size: var(--ds-text-sm); color: var(--ds-ink); display: flex; flex-direction: column; gap: 0.2rem; }
.jd-danger { background: var(--ds-warn-text, #b91c1c); border-color: transparent; color: #fff; }
@media (hover: hover) and (pointer: fine) { .jd-danger:hover { filter: brightness(0.92); } }
.jd-danger-link { color: var(--ds-warn-text, #b91c1c); }
/* Choices */
.jd-chips .jd-chip { min-height: 3.25rem; }
.jd-seg { display: flex; padding: 0.25rem; gap: 0.25rem; border-radius: 0.85rem; background: rgb(20 35 31 / 0.05); }
.jd-seg-btn { flex: 1; min-height: 2.4rem; border: none; border-radius: 0.65rem; background: none; font: inherit; font-weight: 600; color: var(--ds-muted); cursor: pointer; }
.jd-seg-btn.is-on { background: var(--ds-surface); color: var(--ds-ink); box-shadow: var(--ds-shadow-soft); }
.jd-pills, .jd-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.jd-pill { min-height: 2.4rem; padding: 0 1rem; display: inline-flex; align-items: center; border: 1.5px solid var(--ds-line-strong); border-radius: 999px; background: var(--ds-surface); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); cursor: pointer; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .jd-pill:hover { border-color: var(--ds-primary); } }
.jd-pill.is-on { border-color: var(--ds-primary); background: var(--calc-fill, #ebf0ee); }
.jd-kupa-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.jd-kupa-pill { gap: 0.4rem; padding-inline: 0.5rem 0.9rem; }
.jd-kupa-pill img { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: contain; background: #fff; }
.jd-occ-relief { margin: 0; padding: 0.75rem; border: 1px solid var(--ds-line); border-radius: 0.75rem; }
.jd-occ-relief legend { padding-inline: 0.35rem; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); }
/* Forms */
.jd-form { display: flex; flex-direction: column; gap: 0.75rem; }
.jd-form .ds-input { width: 100%; max-width: 100%; margin-inline: 0; }
.jd-field-label { display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); }
/* «המשך עם Google» (js/journey-ui.js signinView): white, Google's G, then a divider before the email */
.jd-google-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
.jd-google { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 2.9rem; width: 100%; background: #fff; color: var(--ds-ink); border: 1px solid #c9d3cf; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .jd-google:hover { background: #f6f8f7; } }
.jd-google:disabled { opacity: 0.6; }
.jd-google-g { width: 1.25rem; height: 1.25rem; flex: none; }
.jd-or { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.jd-or::before, .jd-or::after { content: ""; flex: 1; height: 1px; background: var(--ds-line); }
.jd-date { min-height: 3rem; font-size: var(--ds-text-md); }
.jd-error { margin: 0; color: var(--ds-warn-text); font-size: var(--ds-text-sm); }
.jd-error[hidden] { display: none; }
.jd-field { display: flex; flex-direction: column; gap: 0.35rem; }
.jd-field > span:first-child { font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); }
.jd-input-suffix { position: relative; display: block; }
.jd-input-suffix b { position: absolute; inset-inline-end: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--ds-muted); font-weight: 600; pointer-events: none; }
.jd-option { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.8rem; border: 1.5px solid var(--ds-line-strong); border-radius: 0.85rem; }
.jd-option > strong { font-size: var(--ds-text-base); }
.journey-verdict { border-radius: 0.85rem; padding: 0.75rem 0.9rem; font-size: var(--ds-text-sm); border: 1px solid var(--ds-info-border); background: var(--ds-info-bg); display: flex; flex-direction: column; gap: 0.35rem; }
.journey-verdict.is-ok { border-color: var(--ds-ok-border); background: var(--ds-ok-bg); }
.journey-verdict.is-warn { border-color: var(--ds-warn-border); background: var(--ds-warn-bg); }
.journey-verdict ul { margin: 0; padding-inline-start: 1.1rem; }
.journey-verdict p { margin: 0; }
.journey-verdict-title { font-weight: 700; font-size: var(--ds-text-base); }
.journey-consent { display: flex; align-items: flex-start; gap: 0.45rem; font-size: var(--ds-text-xs); color: var(--ds-muted); }
.journey-consent input { margin-top: 0.15rem; flex: none; }
/* "איפה אתם עומדים" dates under the stage chips (js/fq/screening.js) */
.fq-stage-dates { display: grid; grid-template-columns: 1fr; gap: 0.35rem; margin-top: 0.85rem; max-width: 22rem; }
.fq-stage-dates .ds-label { margin: 0.35rem 0 0; }
.fq-stage-dates .fq-help { margin: 0.2rem 0 0; }
.fq-prior-q { margin: 1.1rem 0 0.5rem; font-weight: 700; }

/* ── The work tab's "מה אם?" (js/simulation.js): one quiet line; the income bar is the control ── */
.same-income-head-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.same-income-head-row .same-income-heading { margin: 0; }
.work-sim-banner { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-muted); }
.work-sim-banner[hidden] { display: none; }
.work-sim-banner.is-active { color: var(--ds-warn-text); font-weight: 700; }
.work-sim-reset { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.work-sim-reset:hover, .work-sim-reset:focus-visible { background: rgb(20 35 31 / 0.07); }
.work-sim-reset[hidden] { display: none; }
#cardWorkReduction.is-simulating #workSameIncomeBlock, #cardWorkReduction.is-simulating .ds-table-wrap { outline: 2px dashed var(--ds-warn-border, #f5c26b); outline-offset: 4px; border-radius: 0.6rem; }
.scenario-btn.is-simulating::after { content: ' · סימולציה'; font-size: 0.8em; font-weight: 600; color: var(--ds-warn-text); }
@media (max-width: 639px) {
    .scenario-btn.is-simulating::after { content: ' ·'; }
}

/* The work tab's income bar as the "מה אם?" control (calculator.js decorateSimBar) */
.same-income-seg.is-sim-button { cursor: pointer; }
.same-income-seg.is-sim-button:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; z-index: 3; }
.same-income-drag { position: absolute; top: 50%; z-index: 4; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); border-radius: 999px; background: #fff; color: var(--ds-ink); box-shadow: 0 0 0 1px rgb(20 35 31 / 0.1), 0 2px 6px rgb(20 35 31 / 0.22); cursor: ew-resize; touch-action: none; user-select: none; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.same-income-drag:hover, .same-income-drag:active { box-shadow: 0 0 0 1px rgb(20 35 31 / 0.16), 0 3px 10px rgb(20 35 31 / 0.3); transform: translate(-50%, -50%) scale(1.06); }
.same-income-drag-pct { position: absolute; top: calc(100% + 0.15rem); font-size: var(--ds-text-xs); font-weight: 700; color: var(--ds-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.same-income-drag:focus-visible { outline: 3px solid var(--ds-primary); outline-offset: 2px; }
.same-income-off-chip { border: 1px dashed var(--ds-line-strong); border-radius: 999px; background: none; padding: 0.15rem 0.6rem; font: inherit; color: var(--ds-muted); text-decoration: line-through; cursor: pointer; }
.same-income-off-chip:hover, .same-income-off-chip:focus-visible { border-color: var(--ds-primary); color: var(--ds-ink); }
.same-income-seg.is-sim-drag { cursor: ew-resize; touch-action: none; }

/* Tax-brackets bar (work tab, calculator.js renderTaxBracketBar) */
.tax-brk-summary { margin: 0 0 0.75rem; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); }
.tax-brk-labels { display: flex; min-height: 2.2rem; }
.tax-brk-label { display: flex; flex-direction: column; align-items: center; min-width: 0; font-size: var(--ds-text-xs); color: var(--ds-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.tax-brk-label b { font-size: var(--ds-text-sm); color: var(--ds-ink); }
.tax-brk-track { display: flex; height: 1rem; border-radius: 999px; overflow: hidden; background: var(--calc-fill, #ebf0ee); box-shadow: inset 0 0 0 1px rgb(15 92 76 / 0.08); }
.tax-brk-seg { height: 100%; min-width: 0; }
.tax-brk-seg + .tax-brk-seg { box-shadow: -1px 0 0 rgb(255 255 255 / 0.7); }
.tax-brk-seg.is-exempt { background: #3f9b6e; }
.tax-brk-seg.is-rate-10 { background: #9aa7a2; }
.tax-brk-seg.is-rate-14 { background: #6e9bb5; }
.tax-brk-seg.is-rate-20 { background: #5a8f86; }
.tax-brk-seg.is-rate-31 { background: #6d6fa3; }
.tax-brk-seg.is-rate-35 { background: #8a6d8e; }
.tax-brk-seg.is-rate-47 { background: #9a7d5c; }
.tax-brk-seg.is-rate-50 { background: #6e564c; }
.tax-brk-seg.is-remain { background: repeating-linear-gradient(135deg, rgb(20 35 31 / 0.08) 0 4px, transparent 4px 8px); }
.tax-brk-note { margin: 0.6rem 0 0; font-size: var(--ds-text-sm); color: var(--ds-muted); }

/* The work comparison table in a dialog, opened by «עוד מידע» (calculator.js initWorkCompareDialog) */
.work-compare-more { align-self: flex-start; margin-top: 0.75rem; padding: 0.4rem 0.9rem; border: 1px solid var(--ds-line-strong); border-radius: 999px; background: var(--ds-surface); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); cursor: pointer; }
.work-compare-more:hover, .work-compare-more:focus-visible { border-color: var(--ds-primary); color: var(--ds-primary); }
.work-compare-dialog { width: min(62rem, 94vw); max-height: 88vh; padding: 1rem 1.1rem 1.25rem; border: none; border-radius: 1rem; background: var(--ds-surface); color: var(--ds-ink); box-shadow: 0 20px 60px rgb(20 35 31 / 0.35); overflow: auto; }
.work-compare-dialog::backdrop { background: rgb(20 35 31 / 0.45); }
.work-compare-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.work-compare-dialog-head .work-compare-title { margin: 0; }
.work-compare-close { width: 2rem; height: 2rem; border: none; border-radius: 999px; background: rgb(20 35 31 / 0.06); color: var(--ds-ink); cursor: pointer; }
.work-compare-close:hover, .work-compare-close:focus-visible { background: rgb(20 35 31 / 0.12); }

.larron-best-note { margin: 0; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); }
.larron-best-badge { display: inline-block; margin-inline-start: 0.35rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: rgb(39 174 96 / 0.14); color: var(--ds-ok-text, #1e7e46); font-size: var(--ds-text-xs); font-weight: 700; }
.work-compare-slot { display: flex; }

/* The comparison dialog on a phone: nearly full screen, four columns that fit without sideways scrolling */
@media (max-width: 639px) {
    .work-compare-dialog { width: calc(100vw - 0.75rem); max-width: none; max-height: 94vh; padding: 0.75rem 0.5rem 1rem; border-radius: 0.85rem; }
    .work-compare-dialog .ds-table-wrap { border-radius: 0.6rem; }
    .work-compare-dialog #workCompareTable { min-width: 0 !important; width: 100%; table-layout: auto; font-size: var(--ds-text-xs); }
    .work-compare-dialog #workCompareTable th, .work-compare-dialog #workCompareTable td { padding: 0.4rem 0.22rem; white-space: normal; }
    .work-compare-dialog #workCompareTable td:not(:first-child) { white-space: nowrap; }
    .work-compare-dialog .cmp-row-head { gap: 0.2rem; }
    .work-compare-dialog #workCompareTable th:nth-child(5), .work-compare-dialog #workCompareTable td:nth-child(5) { display: none; }
}

/* The scenario comparison on a phone: four columns (scenario, BTL, total net, vs now) instead of scrolling sideways */
@media (max-width: 639px) {
    #larronCompareTable { min-width: 0 !important; width: 100%; font-size: var(--ds-text-xs); }
    #larronCompareTable th, #larronCompareTable td { padding: 0.4rem 0.22rem; white-space: normal; }
    #larronCompareTable td:not(:first-child) { white-space: nowrap; }
    #larronCompareTable th:nth-child(2), #larronCompareTable td:nth-child(2),
    #larronCompareTable th:nth-child(3), #larronCompareTable td:nth-child(3) { display: none; }
}

/* Very narrow phones (320px): drop the BTL column of the scenario table as well */
@media (max-width: 359px) {
    #larronCompareTable th:nth-child(4), #larronCompareTable td:nth-child(4) { display: none; }
}
.jd-row-status { font-size: var(--ds-text-sm); color: var(--ds-muted); margin-top: 0.15rem; }
.jd-row-main .jd-inline { align-self: flex-start; margin-top: 0.15rem; }

/* "מסלול תביעה": the button in the header (top, at the end), the dates as a vertical timeline */
.dl-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dl-head-text { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1 1 16rem; }
.dl-cta-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dl-cta { min-height: 2.5rem; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: var(--ds-text-sm); white-space: nowrap; }
.deadlines-body .jd-rows.dl-line { --dl-date-w: 0rem; position: relative; border: 0; background: none; border-radius: 0; overflow: visible; padding-inline-start: calc(var(--dl-date-w) + 2.25rem); display: flex; flex-direction: column; gap: 0.5rem; }
.deadlines-body .jd-rows.dl-line::before { content: ''; position: absolute; inset-inline-start: calc(var(--dl-date-w) + 1rem); top: 1.1rem; bottom: 1.1rem; width: 2px; background: #c9d3cf; border-radius: 2px; }
/* The date of each row in a column of its own beside the line (Roy, 2026-10-15): day and month large, the year under them. */
.deadlines-body .jd-rows.dl-line .dl-date { position: absolute; inset-inline-start: calc(-1 * (var(--dl-date-w) + 2.25rem)); width: var(--dl-date-w); top: 0.6rem; display: flex; flex-direction: column; align-items: flex-end; text-align: end; line-height: 1.15; font-variant-numeric: tabular-nums; }
.deadlines-body .jd-rows.dl-line .dl-date b { font-size: 1.25rem; font-weight: 800; color: var(--ds-ink); }
.deadlines-body .jd-rows.dl-line .dl-date span { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.deadlines-body .jd-rows.dl-line .jd-row.is-future .dl-date b { color: var(--ds-muted); }
/* The column is there only when some row has a date. */
.deadlines-body .jd-rows.dl-line.has-dates { --dl-date-w: 4.5rem; }
@media (max-width: 480px) {
    .deadlines-body .jd-rows.dl-line.has-dates { --dl-date-w: 3.4rem; }
    .deadlines-body .jd-rows.dl-line .dl-date b { font-size: 1.05rem; }
}
.deadlines-body .jd-rows.dl-line .jd-row { position: relative; border: 1px solid var(--ds-line); border-radius: 0.85rem; background: var(--ds-surface); }
.deadlines-body .jd-rows.dl-line .jd-row + .jd-row { border-top: 1px solid var(--ds-line); }
.deadlines-body .jd-rows.dl-line .jd-row::before { content: ''; position: absolute; inset-inline-start: calc(-1.25rem - 7px); top: 1.05rem; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--ds-primary); border: 2px solid var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-surface); }
.deadlines-body .jd-rows.dl-line .jd-row.is-future::before { background: var(--ds-surface); }
.deadlines-body .jd-rows.dl-line .jd-row.is-next::before { background: var(--ds-surface); border-color: var(--ds-warn-text, #b45309); }
.deadlines-body .jd-rows.dl-line .jd-row.is-next { border-color: var(--ds-warn-text, #b45309); }
@media (max-width: 640px) {
    .dl-head { flex-direction: column; }
    .dl-head-text { flex: none; }
    .dl-cta-wrap { width: 100%; }
    .dl-cta { width: 100%; }
    .dl-switcher-menu { width: 100%; }
    .dl-cta-wrap .dl-switch-panel { inset-inline: 0; width: auto; }
}
.deadlines-body .jd-track + .jd-track { margin-top: 0.75rem; }
.deadlines-body .jd-track-head { margin-bottom: 0.6rem; }
/* one timeline for every body: dots on the line, the body's logo inside each card */
.jd-row-logo { display: none; }
.deadlines-body .jd-rows.dl-line .jd-row-logo { display: block; flex: none; width: 2rem; height: 2rem; margin-inline-start: 0.75rem; border: 1px solid var(--ds-line); border-radius: 50%; background: #fff center / 70% no-repeat; }
.deadlines-body .jd-rows.dl-line .jd-row-logo--btl { background-image: url('/assets/entities/btl.svg'); }
.deadlines-body .jd-rows.dl-line .jd-row-logo--mobility { background-image: url('/assets/entities/btl.svg'); }
.deadlines-body .jd-rows.dl-line .jd-row-logo--tag,
.deadlines-body .jd-rows.dl-line .jd-row-logo--retirement { display: grid; place-items: center; }
.deadlines-body .jd-rows.dl-line .jd-row-logo--tag::after,
.deadlines-body .jd-rows.dl-line .jd-row-logo--retirement::after { content: ''; width: 1.05rem; height: 1.05rem; background: var(--ds-primary); -webkit-mask: var(--row-icon) center / contain no-repeat; mask: var(--row-icon) center / contain no-repeat; }
.deadlines-body .jd-rows.dl-line .jd-row-logo--tag { --row-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='4' r='1'/%3E%3Cpath d='m18 19 1-7-6 1'/%3E%3Cpath d='m5 8 3-3 5.5 3-2.36 3.5'/%3E%3Cpath d='M4.24 14.5a5 5 0 0 0 6.88 6'/%3E%3Cpath d='M13.76 17.5a5 5 0 0 0-6.88-6'/%3E%3C/svg%3E"); }
.deadlines-body .jd-rows.dl-line .jd-row-logo--retirement { --row-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); }
.deadlines-body .jd-rows.dl-line .jd-row-logo--pension { background-image: var(--fund-logo, url('/assets/entities/pension.png')); background-size: contain; background-origin: content-box; padding: 2px; }
.deadlines-body .jd-rows.dl-line .jd-row-logo--medical { display: grid; place-items: center; overflow: hidden; }
/* No health fund chosen: a stethoscope in the brand's green; with one, its logo fills the circle. */
.deadlines-body .jd-rows.dl-line .jd-row-logo--medical:not(.has-kupa)::after { content: ''; width: 1.05rem; height: 1.05rem; background: var(--ds-primary); -webkit-mask: var(--row-icon) center / contain no-repeat; mask: var(--row-icon) center / contain no-repeat; --row-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2v2'/%3E%3Cpath d='M5 2v2'/%3E%3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E"); }
.deadlines-body .jd-rows.dl-line .jd-row-logo--medical.has-kupa { background-image: var(--kupa-logo); background-size: contain; }
.dl-stages { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.6rem; font-size: var(--ds-text-xs); color: var(--ds-muted); }
.dl-stage b { color: var(--ds-ink); font-weight: 700; }

/* a letter from Bituach Leumi, read and confirmed in the dialog */
/* «העלאת מכתב»: the word on what happens, then the drop box (a computer) or just the button (a phone) */
.jd-drop { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 1rem 0 0.75rem; padding: 1.5rem 1rem; border: 2px dashed var(--ds-line-strong); border-radius: 0.85rem; background: var(--ds-surface); text-align: center; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.jd-drop.is-over { border-color: var(--ds-primary); background: var(--calc-fill, #ebf0ee); }
.jd-drop-title { margin: 0; font-weight: 700; color: var(--ds-ink); }
.jd-drop-or { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.jd-drop .jd-cta { width: auto; margin: 0; }
.jd-upload-which { margin: 0.75rem 0 0.5rem; font-size: var(--ds-text-sm); }
.jd-upload-which > summary { cursor: pointer; color: var(--ds-primary); font-weight: 600; min-height: 2.25rem; display: flex; align-items: center; }
.jd-upload-which ul { margin: 0.25rem 0 0; padding-inline-start: 1.1rem; display: grid; gap: 0.3rem; color: var(--ds-ink); }
.jd-unlock { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.35rem; }
.jd-unlock .ds-input { flex: 1 1 auto; min-width: 0; }
.jd-unlock .ds-btn { flex: none; }
@media (prefers-reduced-motion: reduce) { .jd-drop { transition: none; } }
.dl-letter-btn { background: transparent; border: 1px solid var(--ds-line); color: var(--ds-ink); }
.jd-letter { border: 1px solid var(--ds-line); border-radius: 0.85rem; padding: 0.7rem 0.85rem; background: var(--ds-surface); }
.jd-letter h4 { margin: 0 0 0.4rem; font-size: var(--ds-text-base); font-weight: 700; }
.jd-letter h4 small { display: block; font-weight: 400; font-size: var(--ds-text-xs); color: var(--ds-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-letter-items { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.jd-letter-item { display: flex; flex-direction: column; gap: 0.3rem; }
.jd-letter-item.is-exists { color: var(--ds-muted); }
.jd-letter-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.jd-letter-fields { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-inline-start: 1.6rem; }
.jd-letter-fields .ds-input { width: auto; min-width: 8rem; flex: 0 1 auto; }
.jd-letter-fields .jd-letter-place { flex: 1 1 14rem; }
.jd-letter-note { padding-inline-start: 1.6rem; color: var(--ds-muted); font-size: var(--ds-text-xs); }
.jd-share-btn { margin: 0.2rem 0 0.4rem; font-size: var(--ds-text-sm); }
.jd-cloud-btn { margin: 0.2rem 0 0.4rem; }
.jd-letter .jd-error { margin: 0.4rem 0 0; }
.jd-share-text { width: 100%; min-height: 10rem; font-size: var(--ds-text-sm); line-height: 1.5; resize: vertical; }

/* the pathway's steps as cards of the timeline */
.deadlines-body .jd-rows.dl-line .dl-today { display: flex; align-items: center; gap: 0.5rem; font-size: var(--ds-text-xs); font-weight: 700; color: #b91c1c; margin: 0.15rem 0; }
.deadlines-body .jd-rows.dl-line .dl-today::before, .deadlines-body .jd-rows.dl-line .dl-today::after { content: ''; flex: 1; height: 1px; background: #fecaca; position: static; border: 0; width: auto; border-radius: 0; box-shadow: none; }
.dl-step-main { gap: 0.15rem; }
.dl-step-main > * { min-width: 0; }
.dl-step-ev, .dl-step-short { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.dl-step.is-upcoming strong { color: var(--ds-muted); }
/* A step that was done: the same green tick and muted title as in the pathway's side drawer (.pw-step-node). */
.dl-step.is-done > .dl-step-main > strong { color: var(--ds-muted); }
.dl-done-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; margin-inline-end: 0.45rem; border-radius: 50%; background: var(--pw-success, #00b894); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; vertical-align: -0.2rem; }
/* Which path the tab shows (js/journey-ui.js pathwaySwitcherHtml): the one in use, a click opens the list */
.dl-switcher-menu { position: relative; }
.dl-switcher-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.dl-switcher-menu > summary::-webkit-details-marker { display: none; }
.dl-switcher-menu > summary svg { width: 1.05rem; height: 1.05rem; }
.dl-switcher-menu[open] > summary { background: var(--calc-fill, #ebf0ee); }
/* The list opens under the button, at its end edge (the header's left in RTL), over the timeline. */
.dl-switch-panel { position: absolute; top: calc(100% + 0.4rem); inset-inline-end: 0; z-index: 20; width: min(22rem, calc(100vw - 2rem)); max-height: min(28rem, 70vh); overflow-y: auto; padding-top: 0.25rem; border: 1px solid var(--ds-line); border-radius: 0.85rem; background: var(--ds-surface); box-shadow: 0 10px 28px rgb(20 35 31 / 0.16); }
.dl-switcher-now { margin: 0; padding: 0.55rem 0.9rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: var(--ds-text-sm); }
.dl-switcher-label { color: var(--ds-muted); }
.dl-switch-list { list-style: none; margin: 0; padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dl-switch-item { width: 100%; display: flex; flex-direction: column; gap: 0.1rem; text-align: start; padding: 0.55rem 0.75rem; border: 1px solid var(--ds-line); border-radius: 0.7rem; background: var(--ds-surface); font: inherit; font-size: var(--ds-text-sm); color: var(--ds-ink); cursor: pointer; min-height: 2.75rem; }
.dl-switch-item small { color: var(--ds-muted); font-size: var(--ds-text-xs); }
@media (hover: hover) and (pointer: fine) { .dl-switch-item:hover { background: rgb(20 35 31 / 0.03); } }
.dl-switch-item.is-active { border-color: var(--ds-primary); box-shadow: inset 0 0 0 1px var(--ds-primary); font-weight: 600; }
.dl-switcher-more { margin: 0 0.5rem 0.5rem; }
.dl-switcher-more > summary { cursor: pointer; padding: 0.4rem 0.25rem; font-size: var(--ds-text-xs); color: var(--ds-muted); }
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main > .dl-step-reopen { align-self: flex-start; padding-inline-start: 2.75rem; padding-top: 0.2rem; font-size: var(--ds-text-xs); color: var(--ds-muted); }
/* Ahead: greyed out and closed (js/journey-ui.js stepRowHtml draws no fold for it). */
.dl-step.is-upcoming { opacity: 0.85; cursor: default; } /* 0.6 took the gray text under 3:1 */
.dl-step.is-upcoming .dl-step-main { cursor: default; user-select: none; }
.dl-step.is-current { border-color: var(--ds-primary) !important; border-width: 1.5px !important; }
.dl-step.is-current::before { border-color: var(--ds-primary); }
.dl-now-tag { align-self: flex-start; padding: 0.05rem 0.6rem; border-radius: 999px; background: var(--ds-warn-bg, #fff8eb); border: 1px solid var(--ds-warn-text, #b45309); color: var(--ds-warn-text, #b45309); font-size: var(--ds-text-xs); font-weight: 700; }
.dl-step-tasks { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--ds-text-sm); }
.dl-step-tasks.is-done { color: var(--ds-muted); }
.dl-step-tasks.is-done li { display: flex; gap: 0.4rem; }
.dl-step-tasks.is-done li span { color: var(--ds-success, #15803d); font-weight: 700; }
.dl-step-task { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.dl-step-task input { margin-top: 0.2rem; }
.dl-step-task .is-checked { text-decoration: line-through; color: var(--ds-muted); }
.dl-step-tip { margin: 0.4rem 0 0; padding: 0.5rem 0.7rem; border-radius: 0.6rem; background: var(--ds-warn-bg, #fff8eb); font-size: var(--ds-text-sm); color: var(--ds-ink); }
.dl-step-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.dl-now-done { min-height: 2.25rem; padding: 0.35rem 1rem; border-radius: 999px; font-size: var(--ds-text-sm); }
/* step cards: the logo and the pencil sit in the top corners, so the tasks and the tip use the whole width */
.deadlines-body .jd-rows.dl-line .dl-step { display: block; }
.deadlines-body .jd-rows.dl-line .dl-step .jd-row-logo { position: absolute; top: 0.6rem; inset-inline-start: 0.75rem; margin: 0; }
.deadlines-body .jd-rows.dl-line .dl-step .jd-row-edit { position: absolute; top: 0.3rem; inset-inline-end: 0.3rem; margin: 0; }
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main { padding: 0.65rem 0.9rem; }
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main > strong,
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main > small,
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main > .dl-now-tag,
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main > .dl-step-ev,
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main > .dl-step-short { padding-inline-start: 2.75rem; padding-inline-end: 2.4rem; }
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main > .dl-now-tag { margin-inline-start: 2.75rem; padding-inline-start: 0.6rem; padding-inline-end: 0.6rem; }

/* an urgent deadline inside its step; the folded lists of tasks */
.dl-step-urgent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin: 0.15rem 0 0.2rem; }
.dl-step-urgent strong { color: #b91c1c; font-size: var(--ds-text-sm); }
.deadlines-body .jd-rows.dl-line .dl-step .dl-step-main > .dl-step-urgent { padding-inline-start: 2.75rem; padding-inline-end: 2.4rem; }
.dl-step-more { margin-top: 0.3rem; }
.dl-step-more > summary { cursor: pointer; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-primary); }
.dl-step-more[open] > summary { margin-bottom: 0.3rem; }

/* uploading a letter: the call to action in the tab and in the wizard, and what the letter filled in */
.dl-letter-wrap { display: inline-flex; align-items: center; gap: 0.4rem; }
/* The tab's secondary buttons («החלפת מסלול», «העלאת מכתב»): one look, a green outline beside the filled «יש לי עדכון». */
.dl-letter-btn,
.dl-switcher-menu > summary.dl-cta { border: 1.5px solid var(--ds-primary) !important; color: var(--ds-primary) !important; font-weight: 800; }
.jd-letter-done { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--ds-text-sm); }
.jd-letter-done span { color: var(--ds-success, #15803d); font-weight: 700; }

/* the progress bar over the timeline: a zone per claim, the colour says which is further along */
:root { --dl-btl: #0d6650; --dl-btl-tint: #cfe3d9; --dl-pension: #0f766e; --dl-pension-tint: #c9e8e4; --dl-mobility: #6d28d9; --dl-mobility-tint: #e3d8fa; --dl-retirement: #4a5a55; --dl-retirement-tint: #dde5e1; --dl-tag: #b45309; --dl-tag-tint: #f6e0c2; }
.dl-progress { margin: 0 0 0.9rem; padding: 0.7rem 0.9rem 0.65rem; border: 1px solid #d2dbd7; border-radius: 0.85rem; background: var(--ds-surface); }
.dl-progress-head { font-size: var(--ds-text-sm); color: var(--ds-ink); margin-bottom: 0.35rem; }
.dl-progress-bar { display: flex; gap: 0.5rem; }
.dl-lane { display: flex; gap: 3px; min-width: 0; }
.dl-seg { flex: 1; height: 0.6rem; border-radius: 3px; background: var(--seg-tint); }
/* The Ministry of Defense and hostilities claims stand where Bituach Leumi's does for everyone else: its colour. */
.dl-lane--btl, .dl-lane--mod, .dl-lane--hostilities { --seg: var(--dl-btl); --seg-tint: var(--dl-btl-tint); }
.dl-lane--pension { --seg: var(--dl-pension); --seg-tint: var(--dl-pension-tint); }
.dl-lane--mobility { --seg: var(--dl-mobility); --seg-tint: var(--dl-mobility-tint); }
.dl-lane--tag { --seg: var(--dl-tag); --seg-tint: var(--dl-tag-tint); }
.dl-lane--retirement { --seg: var(--dl-retirement); --seg-tint: var(--dl-retirement-tint); }
.dl-seg.is-done { background: var(--seg); }
.dl-seg.is-current { background: var(--seg-tint); box-shadow: inset 0 0 0 2px var(--seg); }
/* Each legend entry sits under its own zone of the bar (same flex weights and gap), its text starting where the zone starts. */
.dl-progress-legend { display: flex; gap: 0.5rem; margin-top: 0.4rem; font-size: var(--ds-text-xs); color: var(--ds-muted); }
.dl-legend { min-width: 0; }
@media (max-width: 639px) {
    /* Narrow screens: a zone is too thin for its text, so the entries wrap as a list again. */
    .dl-progress-legend { flex-wrap: wrap; gap: 0.2rem 1rem; }
    .dl-legend { flex: none !important; }
}
.dl-legend i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-inline-end: 0.3rem; background: var(--dl-btl); vertical-align: -1px; }
.dl-legend--pension i { background: var(--dl-pension); }
.dl-legend--mobility i { background: var(--dl-mobility); }
.dl-legend--tag i { background: var(--dl-tag); }
.dl-legend--retirement i { background: var(--dl-retirement); }
.dl-legend b { color: var(--ds-ink); font-weight: 700; }

/* a step's tip, forms and help link in the tab (the same content as the pathway's drawer) */
.dl-step-tip.is-critical { background: #fef2f2; }
.dl-step-tip.is-warning { background: var(--ds-warn-bg, #fff8eb); }
.dl-step-tip.is-tip { background: #ecf4f0; }
.dl-step-forms { margin: 0.45rem 0 0; padding: 0.5rem 0.7rem; border: 1px solid var(--ds-line); border-radius: 0.6rem; font-size: var(--ds-text-sm); }
.dl-step-forms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.dl-step-forms ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.dl-step-forms li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.dl-step-forms small { display: block; color: var(--ds-muted); font-size: var(--ds-text-xs); }
.dl-step-link { margin: 0.35rem 0 0; font-size: var(--ds-text-sm); }

/* «איך מגישים?»: the way of filing, chosen on the step */
.dl-step-filing { margin: 0.45rem 0 0; padding: 0.55rem 0.7rem; border: 1px dashed var(--ds-primary); border-radius: 0.6rem; font-size: var(--ds-text-sm); }
.dl-filing-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.dl-filing-chip { padding: 0.25rem 0.8rem; border: 1px solid var(--ds-line-strong, var(--ds-line)); border-radius: 999px; background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); cursor: pointer; }
.dl-filing-chip.is-on { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; font-weight: 700; }
.dl-filing-note { margin: 0 0 0.3rem; color: var(--ds-muted); }

/* the medical sequence card in the «מסלול תביעה» tab */
.dl-mobpct > strong { margin-inline-end: 0.35rem; }
/* «יש לי עדכון»: the claim's details under the events, and a checkbox line in a form */
.jd-what-more { margin: 1rem 0 0.4rem; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-muted); }
.jd-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--ds-text-sm); color: var(--ds-ink); line-height: 1.5; }
.jd-check input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--ds-primary); }
/* «אירוע חדש ברצף הרפואי»: a medical document read into the form, kept in the person's private folder (Roy, 2026-10-15). */
.jd-med-upload { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: var(--ds-radius-card, 1.1rem); background: var(--ds-mist, #e4efea); }
.jd-med-pick { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.jd-med-pick:focus-within { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.jd-med-pick svg { width: 1.1rem; height: 1.1rem; }
.jd-med-upload .jd-hint { font-size: var(--ds-text-sm); line-height: 1.6; margin: 0; }
.jd-med-upload a { color: var(--ds-primary); font-weight: 600; text-underline-offset: 0.2em; }
.jd-med-status { margin: 0; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-primary); }
/* The stages of a document being read: a list, and a bar that moves one stage at a time (never on a loop). */
.jd-med-progress { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 0.85rem; border-radius: 0.85rem; background: var(--ds-surface); border: 1px solid #c3dccf; }
.jd-med-bar { height: 6px; border-radius: 999px; background: var(--ds-mist, #e4efea); overflow: hidden; }
.jd-med-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ds-primary); transform: scaleX(0); transform-origin: right center; transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.jd-med-progress.is-error .jd-med-bar span { background: var(--ds-warn-text, #b45309); }
.jd-med-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.jd-med-steps li { display: flex; align-items: center; gap: 0.5rem; }
.jd-med-step-mark { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #c3dccf; background: var(--ds-surface); display: grid; place-items: center; }
.jd-med-steps li.is-now { color: var(--ds-ink); font-weight: 700; }
.jd-med-steps li.is-now .jd-med-step-mark { border-color: var(--ds-primary); box-shadow: inset 0 0 0 3px var(--ds-surface); background: var(--ds-primary); }
.jd-med-steps li.is-done { color: var(--ds-ink); }
.jd-med-steps li.is-done .jd-med-step-mark { border-color: var(--ds-primary); background: var(--ds-primary); }
.jd-med-steps li.is-done .jd-med-step-mark::after { content: ''; width: 0.5rem; height: 0.28rem; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.jd-med-progress.is-error .jd-med-steps li.is-now { color: var(--ds-warn-text, #b45309); }
.jd-med-progress.is-error .jd-med-steps li.is-now .jd-med-step-mark { border-color: var(--ds-warn-text, #b45309); background: var(--ds-surface); box-shadow: none; }
/* A field filled from the document: the marker behind it, settling to a light tint that stays until the field is edited. */
.jd-form .ds-input.jd-found { background-color: color-mix(in srgb, var(--ds-marker, #f6d58f) 40%, #fff); animation: jd-found 1200ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes jd-found { from { background-color: var(--ds-marker, #f6d58f); } }
@media (prefers-reduced-motion: reduce) {
    .jd-med-bar span { transition: none; }
    .jd-form .ds-input.jd-found { animation: none; }
}
html.a11y-no-anim .jd-med-bar span { transition: none; }
html.a11y-no-anim .jd-form .ds-input.jd-found { animation: none; }
.jd-med-status.is-error { color: var(--ds-warn-text, #b45309); }
.jd-med-file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: var(--ds-text-sm); }
.jd-med-file > span { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.jd-med-file svg, .dl-med-event .jd-inline svg { width: 1rem; height: 1rem; }
.jd-med-file .jd-check { flex-basis: 100%; }
.jd-row-main-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.jd-row-main-btn:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; border-radius: 4px; }
.dl-med-event .jd-row-main { cursor: default; }
.dl-med-event .jd-row-note { white-space: normal; }
.dl-med-event .jd-inline { display: inline-flex; align-items: center; gap: 0.3rem; }
.dl-cta[aria-busy="true"] { cursor: progress; }
.jd-med-keep { display: flex; flex-direction: column; gap: 0.5rem; }
.jd-med-name-hint { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.jd-med-file .jd-field { flex-basis: 100%; }
.jd-med-file .jd-field > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.dl-med-doclinks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.jd-med-fail { font-size: var(--ds-text-sm); color: var(--ds-warn-text, #b45309); }

/* The brand banner on the home page (between the hero and the payoff). */
.mock-banner-section {
    padding: 0.5rem 0 1.25rem;
}
.mock-banner-img {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(10,69,57, 0.10);
}
@media (max-width: 580px) {
    .mock-banner-img { border-radius: 0.75rem; }
}

/* js/date-select.js: day / month / year lists in place of the browser's calendar (birth dates and other far dates). */
.ds-date-select {
    display: flex;
    gap: 0.4rem;
    width: 100%;
}
.ds-date-select .ds-select {
    min-width: 0;
    flex: 1 1 0;
}
.ds-date-select .ds-date-select-day { flex: 0.8 1 0; }
.ds-date-select .ds-date-select-year { flex: 1.1 1 0; }
.ds-date-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ---- The questionnaire's last screen: «לשמור את הנתונים בחשבון?» (calculator.js showConsentStep) ---- */
.wizard-consent-step { display: flex; flex-direction: column; gap: 12px; }
.wizard-consent-step[hidden] { display: none; }
.wizard-consent-step .wizard-step-title { margin: 0; }
.wizard-consent-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wizard-consent-actions .ds-btn { width: 100%; }

/* ---- «יש לכם מסמכים?» (A_DOCS, js/fq/docs-screen.js) ---- */
.fq-doc-privacy {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 14px;
    font-size: var(--ds-text-sm);
    color: var(--ds-muted);
    line-height: 1.5;
}
.fq-doc-privacy .ui-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ds-primary); }
.fq-doc-pick .ui-icon { width: 16px; height: 16px; }
.fq-doc-privacy a { color: var(--ds-primary); }
.fq-doc-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.fq-doc-pick:focus-within { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.fq-doc-pick.is-busy { opacity: 0.7; cursor: progress; }
.fq-doc-results { margin-top: 14px; display: grid; gap: 12px; min-width: 0; }
.fq-doc-results:empty { display: none; }

/* While reading: one illustration, the count and a bar (no per-file rows, no spinner). */
.fq-doc-reading { display: grid; justify-items: center; gap: 6px; padding: 16px 12px; border-radius: 14px; background: var(--ds-mist); text-align: center; }
.fq-doc-reading-art { width: 176px; height: auto; max-width: 60%; }
.fq-doc-reading-count { margin: 4px 0 0; font-size: var(--ds-text-md); font-weight: 600; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.fq-doc-bar { width: min(280px, 100%); height: 6px; border-radius: var(--ds-radius-pill); background: #ffffff; overflow: hidden; }
.fq-doc-bar > span { display: block; height: 100%; background: var(--ds-primary); transform-origin: right center; }
html[dir="ltr"] .fq-doc-bar > span { transform-origin: left center; }
.fq-doc-reading-note { margin: 2px 0 0; font-size: var(--ds-text-xs); color: var(--ds-muted); line-height: 1.5; max-width: 34ch; }

/* After reading: what was found, a row per sender. */
.fq-doc-summary { padding: 14px 16px; border: 1px solid var(--ds-line-strong); border-radius: 14px; background: var(--ds-surface); }
.fq-doc-summary-title { margin: 0; font-size: var(--ds-text-md); font-weight: 600; color: var(--ds-ink); }
.fq-doc-summary-sub { margin: 2px 0 6px; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.fq-doc-groups { list-style: none; margin: 0; padding: 0; }
.fq-doc-group { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--ds-line); min-width: 0; }
.fq-doc-group-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ds-mist); color: var(--ds-primary); }
.fq-doc-group-icon .ui-icon { width: 16px; height: 16px; }
.fq-doc-group-text { display: grid; gap: 1px; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.fq-doc-group-text b { font-size: var(--ds-text-base); font-weight: 600; color: var(--ds-ink); }
.fq-doc-group-text span { font-size: var(--ds-text-sm); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.fq-doc-kept-note { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--ds-line); font-size: var(--ds-text-xs); color: var(--ds-muted); line-height: 1.5; }
.fq-doc-kept-note .ui-icon { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--ds-primary); }
/* The rows come in once, right after a reading ends. */
@keyframes fqDocRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fq-doc-summary.is-revealing .fq-doc-group { animation: fqDocRowIn 250ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.fq-doc-summary.is-revealing .fq-doc-group:nth-child(2) { animation-delay: 50ms; }
.fq-doc-summary.is-revealing .fq-doc-group:nth-child(3) { animation-delay: 100ms; }
.fq-doc-summary.is-revealing .fq-doc-group:nth-child(4) { animation-delay: 150ms; }
.fq-doc-summary.is-revealing .fq-doc-group:nth-child(n+5) { animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) { .fq-doc-summary.is-revealing .fq-doc-group { animation: none; } }
html.a11y-no-anim .fq-doc-summary.is-revealing .fq-doc-group { animation: none; }

/* Files not read: not about the claim, or read already. Quiet: nothing to do about them. */
.fq-doc-skipped { font-size: var(--ds-text-xs); color: var(--ds-muted); line-height: 1.5; }
.fq-doc-skipped p { margin: 0; }
.fq-doc-skipped p + ul + p { margin-top: 6px; }
.fq-doc-skipped ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
/* Files that need the person: locked (its password here) or not read (why). */
.fq-doc-attention { padding: 12px 14px; border: 1px solid var(--ds-tip-border); border-radius: 14px; background: var(--ds-tip-bg); }
.fq-doc-attention-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ds-text-base); font-weight: 600; color: var(--ds-ink); }
.fq-doc-attention-title .ui-icon { width: 16px; height: 16px; color: var(--ds-srm); flex: none; }
.fq-doc-attention ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.fq-doc-need { display: grid; gap: 4px; min-width: 0; }
.fq-doc-need-name { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-ink); overflow-wrap: anywhere; }
.fq-doc-need-why { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.fq-doc-unlock { display: flex; gap: 8px; min-width: 0; }
.fq-doc-unlock .ds-input { flex: 1; min-width: 0; background: #ffffff; }
.fq-doc-unlock .ds-btn { flex: none; }
.fq-doc-unlock-error { font-size: var(--ds-text-sm); color: var(--ds-warn-text); }
.fq-doc-attention-hint { margin: 8px 0 0; font-size: var(--ds-text-xs); color: var(--ds-muted); line-height: 1.5; }
@media (min-width: 640px) {
    .fq-doc-need { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
    .fq-doc-need-why { grid-column: 1; }
    .fq-doc-need .fq-doc-unlock { grid-column: 2; grid-row: 1 / span 2; }
    .fq-doc-need .fq-doc-unlock .ds-input { width: 160px; flex: none; }
    .fq-doc-unlock-error { grid-column: 1 / -1; }
}