/* =========================================================================
   ProData PRO theme - design language layer (design/DESIGN.md).
   Loaded LAST in <head>. Tokens live in tokens.css.
   PART 1 - pd-* components (source of truth: design/components.css).
   ========================================================================= */

/* ---- Buttons ------------------------------------------------------------ */
.pd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 18px;
    font: var(--pd-fw-bold) var(--pd-fs-md)/1 var(--pd-font);
    border: 1px solid transparent; border-radius: var(--pd-r-md);
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background-color var(--pd-dur) var(--pd-ease), border-color var(--pd-dur) var(--pd-ease), color var(--pd-dur) var(--pd-ease);
}
.pd-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pd-btn:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pd-btn:disabled { opacity: .5; cursor: not-allowed; }

.pd-btn--primary { background: var(--pd-blue); color: #fff; box-shadow: var(--pd-shadow-sm); }
.pd-btn--primary:hover { background: var(--pd-blue-hover); }
.pd-btn--primary:active { background: var(--pd-blue-pressed); }

.pd-btn--brand { background: var(--pd-navy); color: #fff; box-shadow: var(--pd-shadow-sm); }
.pd-btn--brand:hover { background: var(--pd-navy-deep); }

.pd-btn--secondary { background: var(--pd-surface); color: var(--pd-ink-3); border-color: var(--pd-line-strong); }
.pd-btn--secondary:hover { background: var(--pd-surface-2); color: var(--pd-ink); }

.pd-btn--ghost { background: transparent; color: var(--pd-muted); }
.pd-btn--ghost:hover { background: var(--pd-blue-tint); color: var(--pd-blue-hover); }

.pd-btn--dashed { background: transparent; color: var(--pd-ink-4); border: 1px dashed var(--pd-line-strong); }
.pd-btn--dashed:hover { color: var(--pd-blue-hover); border-color: var(--pd-blue); background: var(--pd-blue-tint); }

.pd-btn--excel { background: rgba(16, 124, 65, .08); color: var(--pd-excel); border-color: rgba(16, 124, 65, .25); }
.pd-btn--excel:hover { background: rgba(16, 124, 65, .14); }

.pd-btn--on-dark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.pd-btn--on-dark:hover { background: rgba(255,255,255,.22); }

/* Tool button (2026-10-21, user: "צבע לכל כלי, נעים וקל"): soft - the tool's light tint, its
   colour on text + icon, a mid-tone border. One rule for every tool; the colour comes from
   .pd-tool--* (--tool-tint / --tool-line / --tool). Header buttons that are tool actions get the
   same look by id, so their markup did not need to change. */
.pd-btn--tool,
#createReasoningFromProposalBtn, #exportProposalExcelBtn, #aiProposalFromAiBtn,
#exportProposalPdfBtn, #exportReasoningPdfBtn, #portfolioPdfBtn, #calcPdfBtn, #btnMethodologyPdf, .ai-pdf-btn[onclick^="exportAiAnalysisPDF"] {
    background: var(--tool-tint, var(--pd-blue-tint)) !important;
    color: var(--tool, var(--pd-blue-hover)) !important; border-color: var(--tool-line, var(--pd-blue-subtle)) !important;
    box-shadow: none !important;
}
.pd-btn--tool:hover,
#createReasoningFromProposalBtn:hover, #exportProposalExcelBtn:hover, #aiProposalFromAiBtn:hover,
#exportProposalPdfBtn:hover, #exportReasoningPdfBtn:hover, #portfolioPdfBtn:hover, #calcPdfBtn:hover, #btnMethodologyPdf:hover, .ai-pdf-btn[onclick^="exportAiAnalysisPDF"]:hover {
    background: var(--tool-tint-strong, var(--pd-blue-subtle)) !important;
}
.pd-btn--tool svg,
#createReasoningFromProposalBtn svg, #exportProposalExcelBtn svg, #aiProposalFromAiBtn svg,
#exportProposalPdfBtn svg, #exportReasoningPdfBtn svg, #portfolioPdfBtn svg, #calcPdfBtn svg, #btnMethodologyPdf svg, .ai-pdf-btn svg { color: var(--tool, var(--pd-blue-hover)); }
.pd-btn--tool .pd-btn__chip { background: none; width: auto; height: auto; color: inherit; }
.pd-btn--tool .btn-text,
#createReasoningFromProposalBtn .btn-text,
#exportProposalExcelBtn .btn-text,
#aiProposalFromAiBtn .btn-text,
#exportProposalPdfBtn .btn-text,
#exportReasoningPdfBtn .btn-text,
#portfolioPdfBtn .btn-text,
#calcPdfBtn .btn-text,
#btnMethodologyPdf .btn-text,
.ai-pdf-btn .btn-text {
    color: var(--tool, var(--pd-blue-hover)) !important;
}
#createReasoningFromProposalBtn { --tool-from: var(--pd-tool-reasoning-from); --tool: var(--pd-tool-reasoning); --tool-glow: rgba(245, 158, 11, 0.25); }
#exportProposalExcelBtn { --tool-from: var(--pd-tool-excel-from); --tool: var(--pd-tool-excel); --tool-glow: rgba(34, 197, 94, 0.25); }
#aiProposalFromAiBtn { --tool-from: var(--pd-tool-mix-from); --tool: var(--pd-tool-mix); --tool-glow: rgba(16, 185, 129, 0.25); }
#exportProposalPdfBtn, #exportReasoningPdfBtn, #portfolioPdfBtn, #calcPdfBtn, #btnMethodologyPdf, .ai-pdf-btn[onclick^="exportAiAnalysisPDF"] {
    --tool-from: var(--pd-tool-pdf-from); --tool: var(--pd-tool-pdf); --tool-glow: rgba(59, 130, 246, 0.25);
}
.pd-btn--tool-light { background: var(--pd-surface); color: var(--pd-ink-2); border-color: var(--pd-line-strong); }
.pd-btn--tool-light:hover { border-color: var(--tool-from, var(--pd-blue)); background: var(--pd-surface-sunk); }
.pd-btn__chip {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: var(--pd-r-sm); color: #fff;
    background: linear-gradient(135deg, var(--tool-from, var(--pd-blue)) 0%, var(--tool, var(--pd-blue-hover)) 100%);
}
.pd-btn .pd-btn__chip svg { width: 16px; height: 16px; }

/* AI: today's blue->violet gradient, kept on purpose */
.pd-btn--ai {
    background: linear-gradient(135deg, var(--pd-ai-from) 0%, var(--pd-ai-to) 100%); color: #fff;
    box-shadow: 0 4px 12px var(--pd-ai-glow);
    transition: box-shadow var(--pd-dur) var(--pd-ease), filter var(--pd-dur) var(--pd-ease);
}
.pd-btn--ai:hover { background: linear-gradient(135deg, var(--pd-ai-hover-from) 0%, var(--pd-ai-hover-to) 100%); box-shadow: 0 6px 18px var(--pd-ai-glow); }
/* The market-scan hero, as today (.ai-magic-btn) but on the type scale */
.pd-btn--ai-hero {
    min-height: 64px; padding: 0 44px; border-radius: var(--pd-r-pill);
    font-size: var(--pd-fs-2xl); font-weight: var(--pd-fw-heavy); gap: 14px;
    box-shadow: 0 15px 30px -5px rgba(99, 102, 241, .4);
    transition: transform 400ms cubic-bezier(.175, .885, .32, 1.275), box-shadow 400ms var(--pd-ease);
}
.pd-btn--ai-hero svg { width: 24px; height: 24px; }
.pd-btn--ai-hero:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 20px 40px -5px rgba(99, 102, 241, .5); }
@media (prefers-reduced-motion: reduce) { .pd-btn--ai-hero, .pd-btn--ai-hero:hover { transition: none; transform: none; } }

.pd-btn--sm { min-height: 32px; padding: 0 12px; font-size: var(--pd-fs-xs); border-radius: var(--pd-r-sm); }
.pd-btn--lg { min-height: 52px; padding: 0 28px; font-size: var(--pd-fs-lg); border-radius: var(--pd-r-lg); }

.pd-icon-btn, .pd-sec-btn, .screenshot-btn {
    /* Icon-only action (צילום, סינון, איפוס, מועדפים, הצמדה, הצג/הסתר, תאריכים, העתקה, הורדה, מחיקה).
       Always give it title= + aria-label=. Sizes: --sm 28 / default 34 / --lg 40. */
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
    width: 34px; height: 34px; border-radius: var(--pd-r-sm);
    background: var(--pd-surface); color: var(--pd-ink-4);
    border: 1px solid var(--pd-line-strong); cursor: pointer; font-family: inherit;
    transition: background-color var(--pd-dur) var(--pd-ease), color var(--pd-dur) var(--pd-ease), border-color var(--pd-dur) var(--pd-ease);
}
.pd-icon-btn svg, .pd-sec-btn svg, .screenshot-btn svg { width: 16px; height: 16px; }
.pd-icon-btn:hover, .pd-sec-btn:hover, .screenshot-btn:hover { background: var(--pd-surface-2); color: var(--pd-ink); border-color: var(--pd-line-strong); }
.pd-icon-btn:focus-visible, .pd-sec-btn:focus-visible, .screenshot-btn:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
/* section actions + table screenshot buttons are the small size */
.pd-sec-btn, .screenshot-btn { width: 28px; height: 28px; }
.pd-sec-btn svg, .screenshot-btn svg { width: 14px; height: 14px; }
.pd-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.pd-icon-btn--sm { width: 28px; height: 28px; }
.pd-icon-btn--sm svg { width: 14px; height: 14px; }
.pd-icon-btn--lg { width: 40px; height: 40px; }
.pd-icon-btn--lg svg { width: 18px; height: 18px; }
.pd-icon-btn--round { border-radius: var(--pd-r-pill); }
.pd-icon-btn--danger { color: var(--pd-loss); }
.pd-icon-btn--danger:hover { background: var(--pd-loss-tint); border-color: #FECACA; color: var(--pd-loss); }
.pd-icon-btn--tool { background: var(--tool-tint, var(--pd-blue-tint)); color: var(--tool, var(--pd-blue-hover)); border-color: var(--tool-line, var(--pd-blue-subtle)); }
.pd-icon-btn--tool:hover { background: var(--tool-tint-strong, var(--pd-blue-subtle)); color: var(--tool, var(--pd-blue-hover)); }
.pd-icon-btn.is-active { background: var(--pd-blue-tint); color: var(--pd-blue-hover); border-color: var(--pd-blue-subtle); }
.pd-icon-btn--star { color: var(--pd-star); }
.pd-icon-btn--star:hover { background: var(--pd-warn-tint); color: var(--pd-warn-fill); border-color: #FDE68A; }

/* Report action cards (Excel / PDF / reasoning) */
.pd-action-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    height: 104px; padding: 16px; background: var(--pd-surface);
    border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); box-shadow: var(--pd-shadow-sm);
    font: var(--pd-fw-bold) var(--pd-fs-md) var(--pd-font); color: var(--pd-ink-2); cursor: pointer;
    transition: border-color var(--pd-dur) var(--pd-ease), box-shadow var(--pd-dur) var(--pd-ease);
}
.pd-action-card:hover { border-color: var(--tool-from, var(--pd-line-strong)); box-shadow: var(--pd-shadow-md); }

/* ---- Fields ------------------------------------------------------------- */
.pd-label { display: block; margin-bottom: 6px; font: var(--pd-fw-bold) var(--pd-fs-xs) var(--pd-font); color: var(--pd-ink-4); }
.pd-input, .pd-select {
    width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px;
    font: var(--pd-fw-medium) var(--pd-fs-md) var(--pd-font); color: var(--pd-ink);
    background: var(--pd-surface); border: 1px solid var(--pd-line-strong); border-radius: var(--pd-r-md);
    transition: border-color var(--pd-dur) var(--pd-ease), background-color var(--pd-dur) var(--pd-ease), box-shadow var(--pd-dur) var(--pd-ease);
}
.pd-select {
    appearance: none; padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 12px center;
}
.pd-input::placeholder { color: var(--pd-faint); }
.pd-input:hover, .pd-select:hover { border-color: var(--pd-faint); }
.pd-input:focus, .pd-select:focus { outline: none; background-color: var(--pd-surface); border-color: var(--pd-blue); box-shadow: var(--pd-focus-ring); }
.pd-input--lg, .pd-select--lg { height: 52px; font-size: var(--pd-fs-md); font-weight: var(--pd-fw-bold); border-radius: var(--pd-r-lg); }

.pd-check { display: inline-flex; align-items: center; gap: 8px; font: var(--pd-fw-medium) var(--pd-fs-sm) var(--pd-font); color: var(--pd-ink-2); cursor: pointer; }
.pd-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--pd-blue); cursor: pointer; }

/* Filter pill (checkbox that looks like a chip) */
.pd-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
    font: var(--pd-fw-bold) var(--pd-fs-xs) var(--pd-font); color: var(--pd-ink-4);
    background: var(--pd-surface); border: 1px solid var(--pd-line-strong); border-radius: var(--pd-r-pill);
    cursor: pointer; user-select: none; transition: all var(--pd-dur) var(--pd-ease);
}
.pd-pill input { display: none; }
.pd-pill:hover { border-color: var(--pd-faint); color: var(--pd-ink-2); }
.pd-pill:has(input:checked) { background: var(--pd-blue-tint); border-color: var(--pd-blue); color: var(--pd-blue-hover); }

/* ---- Segmented control (filter mode, calculator mode, table views) ------ */
.pd-seg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--pd-surface-2); border: 0; border-radius: var(--pd-r-pill); }
.pd-seg__label { padding: 0 8px 0 6px; font: var(--pd-fw-bold) var(--pd-fs-xs) var(--pd-font); color: var(--pd-muted); }
.pd-seg__btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
    font: var(--pd-fw-semibold) var(--pd-fs-sm) var(--pd-font); color: var(--pd-ink-4);
    background: transparent; border: 0; border-radius: var(--pd-r-pill); cursor: pointer; white-space: nowrap;
    transition: background-color var(--pd-dur) var(--pd-ease), color var(--pd-dur) var(--pd-ease);
}
.pd-seg__btn svg { width: 16px; height: 16px; }
.pd-seg__btn:hover:not(.is-active) { color: var(--pd-ink); background: rgba(255,255,255,.6); }
.pd-seg__btn.is-active { background: var(--pd-surface); color: var(--pd-ink); font-weight: var(--pd-fw-bold); box-shadow: var(--pd-shadow-sm); }
.pd-seg__btn--sm { height: 28px; padding: 0 12px; font-size: var(--pd-fs-xs); }
.pd-seg__btn--sm svg { width: 13px; height: 13px; }
.pd-btn.is-active { background: var(--pd-blue-tint); color: var(--pd-blue-hover); border-color: var(--pd-blue-subtle); }
/* Aliases: older segmented rails that keep their own markup/JS but share this look */
.period-buttons { background: var(--pd-surface-2) !important; border: 0 !important; box-shadow: none !important; padding: 3px !important; border-radius: var(--pd-r-pill) !important; }
.period-buttons button { color: var(--pd-ink-4) !important; background: transparent !important; box-shadow: none !important; font-weight: var(--pd-fw-semibold) !important; }
.period-buttons button:hover:not(.active-pill) { color: var(--pd-ink) !important; background: rgba(255,255,255,.6) !important; }
.period-buttons button.active-pill { background: var(--pd-surface) !important; color: var(--pd-ink) !important; font-weight: var(--pd-fw-bold) !important; box-shadow: var(--pd-shadow-sm) !important; }
#yieldsYearTabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--pd-surface-2); border-radius: var(--pd-r-lg); }
.pd-seg--sm .pd-seg__btn { height: 28px; padding: 0 12px; font-size: var(--pd-fs-xs); }
.pd-seg--lg .pd-seg__btn { height: 42px; padding: 0 18px; font-size: var(--pd-fs-md); }

/* Risk level 1-5: the scale colours are the only place hue carries level */
.pd-risk { display: inline-flex; gap: 6px; }
.pd-risk__btn {
    width: 40px; height: 40px; border-radius: var(--pd-r-md);
    font: var(--pd-fw-heavy) var(--pd-fs-md) var(--pd-font); color: var(--pd-ink-4);
    background: var(--pd-surface); border: 1px solid var(--pd-line-strong); cursor: pointer;
    transition: all var(--pd-dur) var(--pd-ease);
}
.pd-risk__btn:hover { border-color: var(--pd-ink-4); color: var(--pd-ink); }
.pd-risk__btn.is-active { color: #fff; border-color: transparent; box-shadow: var(--pd-shadow-sm); }
.pd-risk__btn.is-active[data-level="1"] { background: #16A34A; }
.pd-risk__btn.is-active[data-level="2"] { background: #65A30D; }
.pd-risk__btn.is-active[data-level="3"] { background: #CA8A04; }
.pd-risk__btn.is-active[data-level="4"] { background: #EA580C; }
.pd-risk__btn.is-active[data-level="5"] { background: var(--pd-loss); }

/* ---- Cards -------------------------------------------------------------- */
.pd-card { background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); box-shadow: var(--pd-shadow-md); padding: 20px; }
.pd-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pd-card__title { margin: 0; font: var(--pd-fw-heavy) var(--pd-fs-lg)/var(--pd-lh-tight) var(--pd-font); color: var(--pd-ink); }
.pd-card__sub { margin: 2px 0 0; font: var(--pd-fw-medium) var(--pd-fs-xs) var(--pd-font); color: var(--pd-muted); }
.pd-card--sunk { background: var(--pd-surface-sunk); box-shadow: none; }
.pd-card--gain { background: var(--pd-gain-tint); border-color: #A7F3D0; box-shadow: none; }

.pd-container { background: var(--pd-surface); border-radius: var(--pd-r-xl); box-shadow: var(--pd-shadow-md); border-top: 5px solid var(--pd-navy); padding: 28px; }

/* KPI */
.pd-kpi__label { font: var(--pd-fw-bold) var(--pd-fs-xs) var(--pd-font); color: var(--pd-muted); }
.pd-kpi__value { margin-top: 6px; font: var(--pd-fw-heavy) var(--pd-fs-2xl)/1 var(--pd-font); color: var(--pd-ink); font-variant-numeric: tabular-nums; }

/* Tool identity: sets --tool-from / --tool (deep colour, for text + icons + lines) and the soft
   shades --tool-tint / --tool-tint-strong / --tool-line, derived once below for every tool. */
.pd-tool--mix       { --tool-from: var(--pd-tool-mix-from);       --tool: var(--pd-tool-mix); --tool-glow: rgba(16, 185, 129, 0.25); }
.pd-tool--portfolio { --tool-from: var(--pd-tool-portfolio-from); --tool: var(--pd-tool-portfolio); --tool-glow: rgba(59, 130, 246, 0.25); }
.pd-tool--synthetic { --tool-from: var(--pd-tool-synthetic-from); --tool: var(--pd-tool-synthetic); --tool-glow: rgba(56, 189, 248, 0.25); }
.pd-tool--calc      { --tool-from: var(--pd-tool-calc-from);      --tool: var(--pd-tool-calc); --tool-glow: rgba(20, 184, 166, 0.25); }
.pd-tool--reasoning { --tool-from: var(--pd-tool-reasoning-from); --tool: var(--pd-tool-reasoning); --tool-glow: rgba(245, 158, 11, 0.25); }
.pd-tool--risk      { --tool-from: var(--pd-tool-risk-from);      --tool: var(--pd-tool-risk); --tool-glow: rgba(251, 113, 133, 0.25); }
.pd-tool--pdf       { --tool-from: var(--pd-tool-pdf-from);       --tool: var(--pd-tool-pdf); --tool-glow: rgba(59, 130, 246, 0.25); }
.pd-tool--excel     { --tool-from: var(--pd-tool-excel-from);     --tool: var(--pd-tool-excel); --tool-glow: rgba(34, 197, 94, 0.25); }
.pd-tool--ai        { --tool-from: var(--pd-ai-from);             --tool: var(--pd-ai-to); --tool-glow: rgba(99, 102, 241, 0.25); }
.pd-tool--mix { --tool-tint: var(--pd-tool-mix-tint); --tool-tint-strong: var(--pd-tool-mix-tint-strong); --tool-line: var(--pd-tool-mix-line); }
.pd-tool--portfolio { --tool-tint: var(--pd-tool-portfolio-tint); --tool-tint-strong: var(--pd-tool-portfolio-tint-strong); --tool-line: var(--pd-tool-portfolio-line); }
.pd-tool--synthetic { --tool-tint: var(--pd-tool-synthetic-tint); --tool-tint-strong: var(--pd-tool-synthetic-tint-strong); --tool-line: var(--pd-tool-synthetic-line); }
.pd-tool--calc { --tool-tint: var(--pd-tool-calc-tint); --tool-tint-strong: var(--pd-tool-calc-tint-strong); --tool-line: var(--pd-tool-calc-line); }
.pd-tool--reasoning { --tool-tint: var(--pd-tool-reasoning-tint); --tool-tint-strong: var(--pd-tool-reasoning-tint-strong); --tool-line: var(--pd-tool-reasoning-line); }
.pd-tool--risk { --tool-tint: var(--pd-tool-risk-tint); --tool-tint-strong: var(--pd-tool-risk-tint-strong); --tool-line: var(--pd-tool-risk-line); }
.pd-tool--pdf { --tool-tint: var(--pd-tool-pdf-tint); --tool-tint-strong: var(--pd-tool-pdf-tint-strong); --tool-line: var(--pd-tool-pdf-line); }
.pd-tool--excel { --tool-tint: var(--pd-tool-excel-tint); --tool-tint-strong: var(--pd-tool-excel-tint-strong); --tool-line: var(--pd-tool-excel-line); }
.pd-tool--ai { --tool-tint: var(--pd-tool-ai-tint); --tool-tint-strong: var(--pd-tool-ai-tint-strong); --tool-line: var(--pd-tool-ai-line); }
#createReasoningFromProposalBtn { --tool-tint: var(--pd-tool-reasoning-tint); --tool-tint-strong: var(--pd-tool-reasoning-tint-strong); --tool-line: var(--pd-tool-reasoning-line); }
#exportProposalExcelBtn { --tool-tint: var(--pd-tool-excel-tint); --tool-tint-strong: var(--pd-tool-excel-tint-strong); --tool-line: var(--pd-tool-excel-line); }
#aiProposalFromAiBtn { --tool-tint: var(--pd-tool-mix-tint); --tool-tint-strong: var(--pd-tool-mix-tint-strong); --tool-line: var(--pd-tool-mix-line); }
#exportProposalPdfBtn, #exportReasoningPdfBtn, #portfolioPdfBtn, #calcPdfBtn, #btnMethodologyPdf, .ai-pdf-btn[onclick^="exportAiAnalysisPDF"] { --tool-tint: var(--pd-tool-pdf-tint); --tool-tint-strong: var(--pd-tool-pdf-tint-strong); --tool-line: var(--pd-tool-pdf-line); }

/* Tool tile: today's home-screen tile, kept as-is on purpose (user's pick) */
.pd-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    height: 100px; min-width: 110px; flex: 1; padding: 16px;
    background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-r-2xl);
    box-shadow: var(--pd-shadow-sm); cursor: pointer;
    font: var(--pd-fw-bold) 13px var(--pd-font); color: var(--pd-ink-2);
    transition: transform 500ms var(--pd-ease), border-color 500ms var(--pd-ease);
}
.pd-tile:hover { transform: translateY(-4px); border-color: var(--tool-from, var(--pd-blue)); }
.pd-tile:active { transform: scale(.95); }
.pd-tile .pd-chip-icon { width: 44px; height: 44px; border-radius: 14px; transition: transform 500ms var(--pd-ease); }
.pd-tile:hover .pd-chip-icon { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .pd-tile, .pd-tile .pd-chip-icon { transition: none; } .pd-tile:hover, .pd-tile:hover .pd-chip-icon { transform: none; } }

.pd-chip-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: var(--pd-r-lg); color: #fff;
    background: linear-gradient(135deg, var(--tool-from, var(--pd-blue)) 0%, var(--tool, var(--pd-blue-hover)) 100%);
    box-shadow: 0 4px 10px var(--tool-glow, rgba(37, 99, 235, 0.25));
}
.pd-chip-icon svg { width: 20px; height: 20px; }

/* ---- Table -------------------------------------------------------------- */
.pd-table-wrap { border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); overflow: hidden; background: var(--pd-surface); }
.pd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--pd-font); font-variant-numeric: tabular-nums; }
.pd-table th {
    position: sticky; top: 0; z-index: 2; padding: 12px 10px; text-align: center; cursor: pointer; white-space: nowrap;
    font: var(--pd-fw-bold) var(--pd-fs-xs) var(--pd-font); color: #fff;
    background: var(--pd-navy); border-bottom: 2px solid var(--pd-navy);
}
.pd-table th:hover { background: #0A2E78; }
.pd-table th.is-sorted { border-bottom-color: #60A5FA; }
/* Data-source columns: colour = which date the column is correct for */
.pd-table th.pd-src-holdings { background: var(--pd-src-holdings); border-bottom-color: var(--pd-src-holdings); }
.pd-table th.pd-src-indication { background: var(--pd-src-indication); border-bottom-color: var(--pd-src-indication); }
.pd-table th.pd-src-holdings.is-sorted, .pd-table th.pd-src-indication.is-sorted { border-bottom-color: #60A5FA; }
.pd-table th .pd-sort { opacity: .55; font-size: .9em; margin-right: 4px; }
.pd-table td {
    padding: 11px 10px; text-align: center;
    font: var(--pd-fw-semibold) var(--pd-fs-sm) var(--pd-font); color: var(--pd-ink-3);
    border-bottom: 1px solid var(--pd-line); background: var(--pd-surface);
}
.pd-table td.pd-fund { text-align: right; color: var(--pd-ink); font-weight: var(--pd-fw-bold); }
.pd-table td.pd-fund .pd-fund__id { color: var(--pd-muted); font-weight: var(--pd-fw-medium); margin-right: 4px; }
.pd-table td.pd-fund a { color: inherit; text-decoration: none; }
.pd-table td.pd-fund a:hover { color: var(--pd-blue-hover); text-decoration: underline; }
.pd-table th.pd-sticky, .pd-table td.pd-sticky { position: sticky; right: 0; z-index: 1; box-shadow: -6px 0 8px -6px rgba(15,23,42,.18); }
.pd-table th.pd-sticky { z-index: 3; }
.pd-table tbody tr:hover td { background: var(--pd-surface-sunk); }
.pd-table tr.pd-avg td { background: var(--pd-blue-tint); color: var(--pd-ink); font-weight: var(--pd-fw-heavy); border-top: 1px solid var(--pd-blue-subtle); border-bottom: 1px solid var(--pd-blue-subtle); }
.pd-table tr.pd-compare td { background: var(--pd-warn-tint); }
.pd-table tr.pd-compare td:first-child { box-shadow: inset -3px 0 0 var(--pd-compare); }
.pd-table .pd-best { color: var(--pd-gain); font-weight: var(--pd-fw-heavy); background: var(--pd-gain-tint); border-radius: var(--pd-r-sm); padding: 2px 6px; }

.pd-num { direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }
.pd-gain { color: var(--pd-gain); }
.pd-loss { color: var(--pd-loss); }

/* ---- Modal -------------------------------------------------------------- */
.pd-overlay { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.pd-modal { background: var(--pd-surface); border-radius: var(--pd-r-xl); box-shadow: var(--pd-shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
.pd-modal__head { display: flex; align-items: center; gap: 14px; padding: 16px 24px; min-height: 72px; box-sizing: border-box; background: var(--pd-surface-sunk); color: var(--pd-ink); border-bottom: 2px solid var(--tool, var(--pd-navy)); }
.pd-modal__head--light { background: var(--pd-surface); color: var(--pd-ink); border-bottom: 1px solid var(--pd-line); }
.pd-modal__titles { flex: 1; min-width: 0; }
.pd-modal__title { margin: 0; font: var(--pd-fw-heavy) var(--pd-fs-xl)/var(--pd-lh-tight) var(--pd-font); color: inherit; }
.pd-modal__sub { margin: 2px 0 0; font: var(--pd-fw-medium) var(--pd-fs-xs) var(--pd-font); color: var(--pd-muted); }
.pd-modal__close {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: var(--pd-r-pill); border: 0; cursor: pointer;
    background: var(--pd-surface-2); color: var(--pd-ink-4); transition: background-color var(--pd-dur) var(--pd-ease), color var(--pd-dur) var(--pd-ease);
}
.pd-modal__close:hover { background: var(--pd-line); color: var(--pd-ink); }
.pd-modal__close svg { width: 18px; height: 18px; }
.pd-modal__head--light .pd-modal__close { background: var(--pd-surface-2); color: var(--pd-ink-4); }
.pd-modal__head--light .pd-modal__close:hover { background: var(--pd-line); color: var(--pd-ink); }
.pd-modal__body { padding: 20px 24px; background: var(--pd-surface-sunk); }
.pd-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; background: var(--pd-surface); border-top: 1px solid var(--pd-line); }
.pd-modal__note { display: flex; align-items: center; gap: 6px; font: var(--pd-fw-medium) var(--pd-fs-xs) var(--pd-font); color: var(--pd-muted); }
.pd-modal__note svg { width: 14px; height: 14px; }

/* ---- Badges ------------------------------------------------------------- */
.pd-badge {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; white-space: nowrap;
    font: var(--pd-fw-bold) var(--pd-fs-xs) var(--pd-font); border-radius: var(--pd-r-pill);
    background: var(--pd-surface-2); color: var(--pd-ink-4); border: 1px solid var(--pd-line);
}
.pd-badge svg { width: 14px; height: 14px; }
.pd-badge--blue { background: var(--pd-blue-tint); color: var(--pd-blue-hover); border-color: var(--pd-blue-subtle); }
.pd-badge--gain { background: var(--pd-gain-tint); color: var(--pd-gain); border-color: #A7F3D0; }
.pd-badge--warn { background: var(--pd-warn-tint); color: var(--pd-warn); border-color: #FDE68A; }
.pd-badge--loss { background: var(--pd-loss-tint); color: var(--pd-loss); border-color: #FECACA; }
.pd-badge--tool { background: var(--tool-tint); color: var(--tool); border-color: var(--tool-line); }
.pd-badge[onclick] { cursor: pointer; }
/* Date badges = legend for the table's column colours */
.pd-badge--src-main { background: var(--pd-blue-tint); color: var(--pd-src-main); border-color: var(--pd-blue-subtle); }
.pd-badge--src-holdings { background: var(--pd-src-holdings-tint); color: var(--pd-src-holdings); border-color: var(--pd-src-holdings-line); }
.pd-badge--src-indication { background: var(--pd-src-indication-tint); color: var(--pd-src-indication); border-color: var(--pd-src-indication-line); }
.pd-badge--compare { background: var(--pd-compare); color: #fff; border-color: transparent; }
.pd-badge--sm { height: 20px; padding: 0 8px; font-size: var(--pd-fs-2xs); border-radius: var(--pd-r-sm); }
.pd-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--pd-r-pill); background: var(--pd-blue); color: #fff; font: var(--pd-fw-bold) var(--pd-fs-2xs) var(--pd-font); }

/* ---- Alerts ------------------------------------------------------------- */
.pd-alert {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px;
    border-radius: var(--pd-r-md); border: 1px solid; border-inline-start-width: 4px;
    font: var(--pd-fw-medium) var(--pd-fs-sm)/var(--pd-lh-body) var(--pd-font);
}
.pd-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.pd-alert__title { margin: 0 0 2px; font: var(--pd-fw-bold) var(--pd-fs-md) var(--pd-font); }
.pd-alert p { margin: 0; color: var(--pd-ink-3); }
.pd-alert--info { background: var(--pd-blue-tint); border-color: var(--pd-blue-subtle); border-inline-start-color: var(--pd-blue); color: var(--pd-blue-pressed); }
.pd-alert--warn { background: var(--pd-warn-tint); border-color: #FDE68A; border-inline-start-color: var(--pd-warn-fill); color: var(--pd-warn); }
.pd-alert--loss { background: var(--pd-loss-tint); border-color: #FECACA; border-inline-start-color: var(--pd-loss); color: var(--pd-loss); }
.pd-alert--gain { background: var(--pd-gain-tint); border-color: #A7F3D0; border-inline-start-color: var(--pd-gain-fill); color: var(--pd-gain); }

/* ---- Reasoning document -------------------------------------------------- */
.pd-doc { background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); padding: 24px 28px; font: var(--pd-fw-regular) var(--pd-fs-md)/var(--pd-lh-doc) var(--pd-font); color: var(--pd-ink-3); }
.pd-doc h3 { margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--pd-line); font: var(--pd-fw-heavy) var(--pd-fs-lg)/var(--pd-lh-tight) var(--pd-font); color: var(--pd-navy); }
.pd-doc h3:first-child { margin-top: 0; }
.pd-doc h4 { margin: 14px 0 4px; padding-right: 8px; border-right: 3px solid var(--pd-blue); font: var(--pd-fw-bold) var(--pd-fs-md) var(--pd-font); color: var(--pd-ink-2); }
.pd-doc b { font-weight: var(--pd-fw-bold); color: var(--pd-ink); }
.pd-doc hr { border: 0; border-top: 1px solid var(--pd-line); margin: 16px 0; }
.pd-doc__action { border: 1px solid var(--pd-line-strong); border-radius: var(--pd-r-md); overflow: hidden; margin: 14px 0; }
.pd-doc__action-head { background: var(--pd-surface-2); color: var(--pd-ink); padding: 8px 14px; font-weight: var(--pd-fw-bold); border-bottom: 1px solid var(--pd-line); }
.pd-doc__action-body { padding: 10px 14px; }
.pd-doc__summary { background: var(--pd-blue-tint); border: 1px solid var(--pd-blue-subtle); border-radius: var(--pd-r-md); padding: 12px 16px; margin-top: 16px; }

/* ---- Tooltip ------------------------------------------------------------ */
.pd-tooltip {
    position: relative; display: inline-block; max-width: 280px; padding: 8px 12px;
    background: var(--pd-navy-deep); color: #fff; border-radius: var(--pd-r-sm);
    font: var(--pd-fw-medium) var(--pd-fs-xs)/var(--pd-lh-body) var(--pd-font);
    box-shadow: var(--pd-shadow-md); text-align: right;
}
.pd-tooltip::after { content: ""; position: absolute; top: 100%; right: 20px; border: 6px solid transparent; border-top-color: var(--pd-navy-deep); }
.pd-info-dot {
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid var(--pd-faint); color: var(--pd-muted); font: var(--pd-fw-bold) 10px var(--pd-font); cursor: help;
}
.pd-info-dot:hover { border-color: var(--pd-blue); color: var(--pd-blue); }

/* ---- Toast -------------------------------------------------------------- */
.pd-toast { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--pd-r-md); border: 1px solid; box-shadow: var(--pd-shadow-md); font: var(--pd-fw-bold) var(--pd-fs-sm) var(--pd-font); }
.pd-toast svg { width: 16px; height: 16px; }
.pd-toast--success { background: var(--pd-gain-tint); border-color: #A7F3D0; color: var(--pd-gain); }
.pd-toast--error { background: var(--pd-loss-tint); border-color: #FECACA; color: var(--pd-loss); }

/* =========================================================================
   PART 2 - Overrides of existing styles.css classes (design/DESIGN.md).
   styles.css is left untouched; every rule here re-points an existing
   selector at the tokens. Loaded last in <head>, so equal-specificity
   !important rules here win over styles.css ones.
   ========================================================================= */

/* ---- Legacy variables re-pointed at tokens (styles.css :root) ---------- */
:root {
    --bg: var(--pd-bg);
    --text: var(--pd-ink-3);
    --text-muted: var(--pd-muted);
    --secondary: var(--pd-blue);
    --risk-btn-color: var(--pd-navy);
    --gold: var(--pd-star);
    --tooltip-bg: var(--pd-navy-deep);
    --sticky-bg: var(--pd-surface-2);
    --avg-row-bg: var(--pd-blue-tint);
    --avg-row-text: var(--pd-ink);
    --success-color: var(--pd-gain);
    --shadow: var(--pd-shadow-md);
}

/* ---- Focus: one ring everywhere (was indigo #6366f1) -------------------- */
:focus-visible { outline: 2px solid var(--pd-blue) !important; outline-offset: 2px !important; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, .card:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--pd-blue) !important; outline-offset: 2px !important; box-shadow: var(--pd-focus-ring) !important;
}

/* ---- Page + main container -------------------------------------------- */
.container { border-radius: var(--pd-r-xl); box-shadow: var(--pd-shadow-md); }
.animated-subtitle { font-family: var(--pd-font) !important; color: var(--pd-ink-2) !important; letter-spacing: 0 !important; }
.footer-disclaimer { border-top-color: var(--pd-line); color: var(--pd-muted); }
.loader { border-top-color: var(--pd-blue) !important; }

/* ---- Flagship CTA "הפק דוח" (navy, per DESIGN.md) ---------------------- */
#btnRun { background: var(--pd-navy) !important; font-weight: 800 !important; letter-spacing: 0 !important; }   /* radius: styles.css 1.5rem, kept */
#btnRun span { font-weight: 800 !important; }
#btnRun::after { background: var(--pd-navy-deep) !important; }
#btnRun:hover { transform: none !important; box-shadow: 0 8px 20px rgba(0, 35, 102, .25) !important; }
#btnRunCaret { background: var(--pd-navy) !important; }
#btnRunCaret:hover { background: var(--pd-navy-deep) !important; }
button.action-btn:hover { transform: none; }

/* ---- Small utility buttons -------------------------------------------- */
.reset-tiny-btn, .user-guide-btn { border-radius: var(--pd-r-md) !important; }
.reset-tiny-btn span, .user-guide-btn span {
    font-size: var(--pd-fs-xs) !important; font-weight: 700 !important;
    text-transform: none !important; letter-spacing: 0 !important; color: var(--pd-ink-3) !important;
}
.user-guide-btn:hover { border-color: var(--pd-blue) !important; transform: none !important; }
.footer-btn:hover { transform: translateY(-1px) !important; }

/* ---- Filter panel ------------------------------------------------------ */
.filter-box label { text-transform: none; letter-spacing: 0; font-weight: 800; }
.filter-header-icon.icon-product { background: var(--pd-navy); box-shadow: none; }
.filter-header-icon.icon-track { box-shadow: none; }
.filter-header-icon.icon-manager { background: var(--pd-blue); box-shadow: none; }

/* Select2: the 64px hero row keeps its original height AND rounding (1.25rem / 1.5rem) */
.select2-premium .select2-selection--single,
.select2-premium .select2-selection--multiple,
#fundSelect + .select2-container .select2-selection--multiple {
    border-color: var(--pd-line-strong) !important;
}
.select2-container .select2-selection--single:focus-within,
.select2-container .select2-selection--multiple:focus-within,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    border-color: var(--pd-blue) !important; box-shadow: var(--pd-focus-ring) !important;
}
.select2-dropdown { border-color: var(--pd-line) !important; border-radius: var(--pd-r-lg) !important; box-shadow: var(--pd-shadow-lg) !important; }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"]:hover,
.select2-container--default .select2-results__option[aria-selected="true"]:focus,
.select2-container--default .select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
    background-color: var(--pd-blue-tint) !important; color: var(--pd-blue-hover) !important; font-weight: 700 !important;
}
.select2-container--default .select2-results__option[aria-selected="true"]::before,
.select2-container--default .select2-results__option.select2-results__option--selected::before {
    color: var(--pd-blue-hover) !important; font-weight: 700 !important; font-size: 1.1rem !important;
}
.select2-summary-badge { background: var(--pd-blue) !important; box-shadow: none !important; }
.select2-summary-pill { background: var(--pd-blue-tint) !important; color: var(--pd-blue-hover) !important; border-color: var(--pd-blue-subtle) !important; }
.select2-summary-pill .pill-remove:hover { color: var(--pd-loss) !important; background: var(--pd-loss-tint) !important; }

/* Filter pills (כשרות / מסלולי קצבה / ...): selected = blue tint, one colour */
.filter-pill-btn { background: var(--pd-surface); border-color: var(--pd-line-strong); color: var(--pd-ink-4); font-weight: 700; border-radius: var(--pd-r-pill); padding: 1px 8px; }
.filter-pill-btn:hover { background: var(--pd-surface-2); color: var(--pd-ink-2); border-color: var(--pd-faint); }
.filter-pill-btn:has(input:checked), .filter-pill-btn.active,
.filter-pill-btn.pill-kosher:has(input:checked), .filter-pill-btn.pill-kosher.active,
.filter-pill-btn.pill-payout:has(input:checked), .filter-pill-btn.pill-payout.active {
    background: var(--pd-blue-tint); color: var(--pd-blue-hover); border-color: var(--pd-blue); box-shadow: none;
}
.select-checkbox, .focus-item input[type="checkbox"] { accent-color: var(--pd-blue); }

/* ---- Segmented controls: filter mode + calculator mode ----------------- */
.filter-mode-selector, .calc-mode-selector {
    background: var(--pd-surface-2) !important; border: 1px solid var(--pd-line) !important;
    border-radius: var(--pd-r-pill) !important; padding: 3px !important; gap: 2px !important; box-shadow: none !important; border: 0 !important;
}
.mode-label { color: var(--pd-muted); font-size: var(--pd-fs-xs); font-weight: 700; text-transform: none; letter-spacing: 0; }
.filter-mode-btn, .calc-mode-btn {
    border-radius: var(--pd-r-pill) !important; font-size: var(--pd-fs-sm) !important; font-weight: 600 !important;
    color: var(--pd-ink-4) !important; background: transparent !important; box-shadow: none !important; transform: none !important;
}
.filter-mode-btn:hover:not(.active), .calc-mode-btn:hover:not(.active) { color: var(--pd-ink) !important; background: rgba(255, 255, 255, .6) !important; box-shadow: none !important; }
.filter-mode-btn.active, .calc-mode-btn.active {
    background: var(--pd-surface) !important; color: var(--pd-ink) !important; font-weight: 700 !important;
    box-shadow: var(--pd-shadow-sm) !important; transform: none !important;
}

/* Mix-generator period radio group (was teal) */
.period-selector-group { background: var(--pd-surface-2); border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); padding: 3px; gap: 2px; }
.period-selector-group label { color: var(--pd-ink-4); font-weight: 600; border-radius: var(--pd-r-md); }
.period-selector-group input[type="radio"]:checked + label, .period-selector-group input[type="checkbox"]:checked + label { background: var(--pd-surface); color: var(--pd-blue-hover); font-weight: 700; box-shadow: var(--pd-shadow-sm); }

/* Risk level 1-5: flat scale colours, no jump */
.risk-level-btn { border-radius: var(--pd-r-md); border: 1px solid var(--pd-line-strong); font-weight: 800; box-shadow: none; transition: all var(--pd-dur) var(--pd-ease); }
/* Risk levels always show their own color; once something is selected the rest fade (multi-select) */
.risk-level-btn[data-level] { color: #fff; border-color: transparent; }
.risk-level-btn[data-level="1"] { background: #16A34A; }
.risk-level-btn[data-level="2"] { background: #65A30D; }
.risk-level-btn[data-level="3"] { background: #CA8A04; }
.risk-level-btn[data-level="4"] { background: #EA580C; }
.risk-level-btn[data-level="5"] { background: var(--pd-loss); }
.risk-level-btn:hover { color: #fff; border-color: transparent; transform: none; box-shadow: var(--pd-shadow-sm); filter: brightness(1.08); }
.risk-level-btn.active { transform: none; box-shadow: var(--pd-shadow-sm); border: 2px solid var(--pd-ink) !important; }
.risk-levels-row.has-selection .risk-level-btn:not(.active) { opacity: 0.3; filter: saturate(0.4); }
.risk-levels-row.has-selection .risk-level-btn:not(.active):hover { opacity: 0.6; }

/* ---- Table view toggles above the market table ------------------------ */
.view-toggle-btn {
    background: var(--pd-surface); backdrop-filter: none; -webkit-backdrop-filter: none;
    color: var(--pd-ink-4); border: 1px solid var(--pd-line-strong); border-radius: var(--pd-r-md);
    font-weight: 600; box-shadow: none; transition: all var(--pd-dur) var(--pd-ease);
}
.view-toggle-btn:hover { background: var(--pd-surface); border-color: var(--pd-blue); color: var(--pd-blue-hover); transform: none; box-shadow: none; }
.view-toggle-btn.active i, .view-toggle-btn.active svg { color: currentColor !important; }
.view-toggle-btn.active { background: var(--pd-blue-tint); color: var(--pd-blue-hover); border-color: var(--pd-blue); box-shadow: none; font-weight: 700; }
.view-toggle-btn-custom { background: var(--pd-surface); color: var(--pd-ink-4); border: 1px solid var(--pd-line-strong) !important; }
.view-toggle-btn-custom.active { background: var(--pd-blue-tint) !important; color: var(--pd-blue-hover) !important; border-color: var(--pd-blue) !important; box-shadow: none !important; }
.rating-toggle-btn { color: var(--pd-muted); border-color: transparent; }
.rating-toggle-btn:hover { background-color: var(--pd-blue-tint); color: var(--pd-blue-hover); border-color: transparent; }
/* Market research header: every button shares the .view-toggle-btn look. The rating/kosher
   toggles undo the borderless .rating-toggle-btn theme above and size to their label (the long
   "דירוג ורמת סיכון" label overflows a flex:1 slot); "הוסף סינטטי" is the same button in green. */
.view-toggle-group-full .view-toggle-btn.rating-toggle-btn { flex: 0 0 auto; color: var(--pd-ink-4); border-color: var(--pd-line-strong); }
.view-toggle-group-full .view-toggle-btn.rating-toggle-btn:hover { background: var(--pd-surface); color: var(--pd-blue-hover); border-color: var(--pd-blue); }
.view-toggle-btn-add { background: var(--pd-tool-mix-tint); color: var(--pd-tool-mix); border-color: var(--pd-tool-mix-line); }
.view-toggle-btn-add:hover { background: var(--pd-tool-mix-tint-strong); color: var(--pd-tool-mix); border-color: var(--pd-tool-mix-line); }
.mass-view-header { background: var(--pd-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); box-shadow: var(--pd-shadow-sm); }

/* ---- Date badges = legend of the column colours ----------------------- */
.date-badge { border-radius: var(--pd-r-pill); font-size: var(--pd-fs-xs); font-weight: 700; padding: 5px 12px; box-shadow: none; }
.date-badge.blue { background: var(--pd-blue-tint); color: var(--pd-src-main); border: 1px solid var(--pd-blue-subtle); }
.date-badge.green { background: var(--pd-src-holdings-tint); color: var(--pd-src-holdings); border: 1px solid var(--pd-src-holdings-line); }
.date-badge.purple { background: var(--pd-warn-tint); color: var(--pd-warn); border: 1px solid #FDE68A; }   /* rating date: amber, violet now means indication */

/* ---- Generic tables ---------------------------------------------------- */
/* 2026-10-21: every table without its own look gets the "כיוון א" header (DESIGN.md "כלל הטבלה האחת"). */
th {
    background: var(--pd-surface-sunk); color: var(--pd-ink); font-weight: 700; font-size: var(--pd-fs-sm);
    text-transform: none; letter-spacing: 0; border-bottom: 2px solid var(--pd-navy);
}
td { border-bottom-color: #EEF2F6; }
.best-val { color: var(--pd-gain) !important; font-weight: 800; background-color: transparent !important; border-color: transparent !important; } /* green text only, no fill */
.fund-link:hover { color: var(--pd-blue-hover) !important; }

/* ---- Market-research table (#massTable) --------------------------------
   2026-10-21 (user: "כמו הדוח המפורט, צבעים אפורים יותר"): light header like .pd-rtable.
   The data source/date stays as the colour of the 2px rule under the header and a soft
   tint (DESIGN.md "כלל צבע המקור"): navy main, teal holdings, violet indication - the same
   colours as the date badges above the table. Classes come from app/02_reports.js renderMassView (srcClass). */
table.mass-table th, table.mass-table th:nth-child(1), table.mass-table th:nth-child(2) {
    background: var(--pd-surface-sunk); background-image: none; color: var(--pd-ink-2); text-shadow: none; text-transform: none; letter-spacing: 0;
    font-size: var(--pd-fs-sm); font-weight: 700; border-bottom: 2px solid var(--pd-src-main); border-radius: 0;
}
table.mass-table th.mass-th--holdings { background: var(--pd-src-holdings-tint); color: var(--pd-src-holdings); border-bottom-color: var(--pd-src-holdings); }
table.mass-table th.mass-th--indication { background: var(--pd-src-indication-tint); color: var(--pd-src-indication); border-bottom-color: var(--pd-src-indication); }
table.mass-table th.mass-th--sorted { box-shadow: inset 0 -2px 0 currentColor; color: var(--pd-ink); }
table.mass-table th.mass-th--holdings.mass-th--sorted { color: var(--pd-src-holdings); }
table.mass-table th.mass-th--indication.mass-th--sorted { color: var(--pd-src-indication); }
table.mass-table th:hover { opacity: 1; filter: brightness(.97); }
table.mass-table th .mass-th-tail { white-space: nowrap; } /* sort arrow stays next to the name */
table.mass-table td { font-size: var(--pd-fs-sm); color: var(--pd-ink-3); border-bottom: 1px solid var(--pd-line); padding: 11px 10px; }
table.mass-table tbody tr:hover { background-color: var(--pd-surface-sunk); transform: none; box-shadow: none; }
tr.avg-row td {
    background-color: var(--pd-blue-tint) !important; backdrop-filter: none; color: var(--pd-ink) !important; font-weight: 800;
    border-top: 1px solid var(--pd-blue-subtle); border-bottom: 1px solid var(--pd-blue-subtle); font-size: var(--pd-fs-sm);
}
.mass-table tr.compare-added-row > td { background-color: var(--pd-warn-tint) !important; }
.mass-table tr.compare-added-row > td:first-child { box-shadow: inset -3px 0 0 var(--pd-compare); }
.mass-table tr.institution-row > td { background-color: var(--pd-institution-tint) !important; }
.mass-table tr.institution-row > td:first-child { box-shadow: inset -3px 0 0 var(--pd-institution); }
/* Detailed-report AI: full report collapsed under the agent summary (wrapDetailedFullReport in app/02_reports.js) */
.ai-full-report.is-collapsed { display: none; }
.ai-full-toggle-wrap { display: flex; justify-content: center; margin: 14px 0 6px; }
.ai-full-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--pd-blue-subtle); background: var(--pd-blue-tint); color: var(--pd-blue); font: inherit; font-size: var(--pd-fs-sm); font-weight: 700; cursor: pointer; }
.ai-full-toggle:hover { background: #fff; }
.ai-full-toggle svg { width: 16px; height: 16px; transition: transform 0.2s; }
.ai-full-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Row number by the current sort, beside the row checkbox in the mass table's first column (renderMassView) */
.mass-rank-cell { display: flex; align-items: center; justify-content: center; gap: 5px; }
.mass-rank { min-width: 16px; text-align: center; font-size: 11px; font-weight: 600; color: var(--pd-muted); font-variant-numeric: tabular-nums; line-height: 1; }
/* Exposure icons next to the fund name (massExposureIcons in app/00_core.js): מחקר שוק, תעודת זהות, דוח מפורט */
.mass-exp-icons { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 4px; flex-shrink: 0; vertical-align: middle; }
.mass-exp-icon { display: inline-flex; cursor: help; line-height: 0; }
.mass-exp-icon svg { height: 16px; width: auto; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .18)); }
/* Same icons in the ID card title (renderFundCard) and the דוח מפורט fund headers */
#fundModal .fund-main-info .mass-exp-icon svg { height: 20px; }
.institution-auto-bar { margin: 0 0 12px; padding: 10px 14px; background: var(--pd-institution-tint); border-inline-start: 4px solid var(--pd-institution); border-radius: var(--pd-r-md); color: var(--pd-ink-2); font-size: var(--pd-fs-sm); line-height: 1.6; }
/* ✕ next to a fund's name in the detailed report headers (dark backgrounds) - app/02_reports.js detailedRemoveBtn */
.detailed-remove-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 22px; height: 22px; margin-inline-start: 6px; padding: 0; border: 1px solid rgba(255,255,255,0.35); border-radius: var(--pd-r-pill); background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; transition: background .15s, border-color .15s; }
.detailed-remove-btn:hover, .detailed-remove-btn:focus-visible { background: var(--pd-loss); border-color: var(--pd-loss); }
.compare-added-badge { background: var(--pd-warn-tint); color: var(--pd-compare-text); border: 1px solid #FDE68A; border-radius: var(--pd-r-pill); }
.compare-added-badge:hover { background: var(--pd-loss-tint); color: var(--pd-loss); border-color: #FECACA; }
@media (max-width: 1024px) {
    .mass-table tr.avg-row > td:nth-child(1), .mass-table tr.avg-row > td:nth-child(2) { background-color: var(--pd-blue-tint) !important; }
}

/* ---- Cards ------------------------------------------------------------- */
.kpi-card, .calc-card{ border-radius: var(--pd-r-lg); border: 1px solid var(--pd-line); box-shadow: var(--pd-shadow-md); }
.kpi-card:hover { transform: none; box-shadow: var(--pd-shadow-md); border-color: var(--pd-line-strong); }
.modal-card { border-radius: var(--pd-r-lg); border-color: var(--pd-line); box-shadow: var(--pd-shadow-sm); }
.modal-card h3 { color: var(--pd-ink); border-bottom-color: var(--pd-line); font-weight: 800; }
.winner-card { background: var(--pd-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--pd-line); border-radius: var(--pd-r-xl); box-shadow: var(--pd-shadow-md); }
.winner-card::before { display: none; }
.winner-card:hover { transform: none; box-shadow: var(--pd-shadow-md); border-color: var(--pd-line-strong); }
.mini-table-card { background: var(--pd-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--pd-line); border-radius: var(--pd-r-xl); box-shadow: var(--pd-shadow-md); }
.mini-table-card:hover { transform: none; box-shadow: var(--pd-shadow-md); }
.mini-table .yield-positive { color: var(--pd-gain); }
.mini-table .yield-negative { color: var(--pd-loss); }
.calc-stat-value.positive { color: var(--pd-gain); }
.calc-stat-value.negative { color: var(--pd-loss); }
.report-section-wrapper { border-radius: var(--pd-r-xl); backdrop-filter: none; -webkit-backdrop-filter: none; }
.section-desc {
    background: var(--pd-surface-sunk); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-left: 0; border-right: 3px solid var(--pd-blue); border-radius: var(--pd-r-md); color: var(--pd-ink-3);
}
.ai-section { background: var(--pd-ai-tint); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--pd-blue-subtle); border-radius: var(--pd-r-xl); box-shadow: none; }
.msg-ai h4 { color: var(--pd-blue-hover); }
.msg-ai[contenteditable="true"]:focus { box-shadow: var(--pd-focus-ring); }

/* ---- Report action cards (Excel / PDF / reasoning): tool chips ---------- */
.print-btn, .reasoning-report-btn, .excel-report-btn {
    border-radius: var(--pd-r-lg) !important; border-color: var(--pd-line) !important; box-shadow: var(--pd-shadow-sm) !important;
}
.print-btn:hover, .reasoning-report-btn:hover, .excel-report-btn:hover { transform: none; box-shadow: var(--pd-shadow-md) !important; background: var(--pd-surface) !important; }
.print-btn:hover { border-color: var(--pd-tool-pdf-from) !important; }
.reasoning-report-btn:hover { border-color: var(--pd-tool-reasoning-from) !important; }
.excel-report-btn:hover { border-color: var(--pd-tool-excel-from) !important; }
.print-btn:hover .btn-icon-wrapper, .reasoning-report-btn:hover .btn-icon-wrapper, .excel-report-btn:hover .btn-icon-wrapper { transform: none; }
.btn-icon-wrapper { box-shadow: none; }
/* soft tool chip (2026-10-21): the tool's tint + its colour on the icon, no gradient */
.print-btn { --tool-from: var(--pd-tool-pdf-from); --tool: var(--pd-tool-pdf); --tool-tint: var(--pd-tool-pdf-tint); --tool-line: var(--pd-tool-pdf-line); }
.reasoning-report-btn { --tool-from: var(--pd-tool-reasoning-from); --tool: var(--pd-tool-reasoning); --tool-tint: var(--pd-tool-reasoning-tint); --tool-line: var(--pd-tool-reasoning-line); }
.excel-report-btn { --tool-from: var(--pd-tool-excel-from); --tool: var(--pd-tool-excel); --tool-tint: var(--pd-tool-excel-tint); --tool-line: var(--pd-tool-excel-line); }
.print-btn .btn-icon-wrapper, .reasoning-report-btn .btn-icon-wrapper, .excel-report-btn .btn-icon-wrapper {
    background: var(--tool-tint) !important; box-shadow: none !important;
    border: 1px solid var(--tool-line);
}
.print-btn .btn-icon-wrapper svg, .reasoning-report-btn .btn-icon-wrapper svg, .excel-report-btn .btn-icon-wrapper svg,
.print-btn .btn-icon-wrapper i, .reasoning-report-btn .btn-icon-wrapper i, .excel-report-btn .btn-icon-wrapper i { color: var(--tool) !important; stroke: var(--tool) !important; }
.btn-text { font-weight: 700; color: var(--pd-ink-2); }
.pd-btn--on-dark .btn-text,
.pd-btn--tool .btn-text,
.pd-btn--primary .btn-text,
.pd-btn--ai .btn-text,
.ai-pdf-btn .btn-text,
.ai-analysis-modal .btn-text {
    color: #fff !important;
}

/* ---- Modals (base classes; inline headers are edited in templates) ----- */
.modal-overlay { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-content { border-radius: var(--pd-r-xl); box-shadow: var(--pd-shadow-lg); }
/* Window header (2026-10-21, user pick "כיוון א" + "קו בצבע הכלי"): light grey like the table headers,
   dark title, the tool's icon with no box in the tool colour, a 2px line in the tool colour (navy for
   a general window). Put the tool class on the header itself: <div class="modal-header pd-tool--mix">. */
.modal-header, .pd-modal-head {
    background: var(--pd-surface-sunk); color: var(--pd-ink); padding: 16px 24px; min-height: 72px; box-sizing: border-box;
    border-bottom: 2px solid var(--tool, var(--pd-navy));
}
.modal-header h2, .modal-header h3, .pd-modal-head h2 { font-size: var(--pd-fs-xl); font-weight: 800; color: var(--pd-ink); }
.modal-header .pd-modal__title, .pd-modal-head .pd-modal__title { color: var(--pd-ink); }
.modal-header .pd-chip-icon, .pd-modal__head .pd-chip-icon, .pd-modal-head .pd-chip-icon,
.adv-exp-header .pd-chip-icon, .period-header .pd-chip-icon, .terms-gate-header .pd-chip-icon {
    width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; color: var(--tool, var(--pd-navy));
}
.modal-header .pd-chip-icon svg, .pd-modal__head .pd-chip-icon svg, .pd-modal-head .pd-chip-icon svg,
.adv-exp-header .pd-chip-icon svg, .period-header .pd-chip-icon svg, .terms-gate-header .pd-chip-icon svg { width: 26px; height: 26px; }
.modal-header .pd-mgr-logo--lg { background: none; box-shadow: none; padding: 0; }
.close-modal {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: var(--pd-r-pill); background: var(--pd-surface-2); color: var(--pd-ink-4); font-size: 1.25rem; line-height: 1;
}
.close-modal:hover { background: var(--pd-line); color: var(--pd-ink); }
.focus-actions { background: var(--pd-surface-sunk); border-top-color: var(--pd-line); }

/* ---- Tooltips ----------------------------------------------------------- */
#globalTooltip { border-radius: var(--pd-r-sm); font-size: var(--pd-fs-xs); line-height: var(--pd-lh-body); box-shadow: var(--pd-shadow-md); }
.metric-tooltip { color: var(--pd-muted) !important; border-color: var(--pd-faint) !important; opacity: 1; }
.metric-tooltip:hover { color: var(--pd-blue) !important; border-color: var(--pd-blue) !important; transform: none; }
.info-trigger { color: var(--pd-muted); opacity: 1; }
.info-icon { background: var(--pd-surface-2); color: var(--pd-ink-4); border-color: var(--pd-line); }
.info-popover { border-color: var(--pd-line); border-radius: var(--pd-r-lg); box-shadow: var(--pd-shadow-lg); }

/* ---- Inputs ------------------------------------------------------------ */
.input-wrapper input:focus, .calc-inputs-v2 select:focus { border-color: var(--pd-blue); box-shadow: var(--pd-focus-ring); }
.input-row label { text-transform: none; letter-spacing: 0; }
.cmp-select:hover { border-color: var(--pd-faint); }
.cmp-select:focus { border-color: var(--pd-blue); box-shadow: var(--pd-focus-ring); }
.chat-input-area input, .focus-search-input { border-color: var(--pd-line-strong); }

/* ---- Portfolio KPI icon tiles (were indigo/violet) --------------------- */
.kpi-icon-indigo { background: var(--pd-blue-tint); color: var(--pd-blue-hover); }
.kpi-icon-purple { background: var(--pd-surface-2); color: var(--pd-navy); }

/* ---- Fund card header (תעודת זהות): long names -------------------------
   The actions and close button used to be absolutely positioned over a
   centred title, so a long blended-track name ran underneath them. On
   desktop the header is now a real flex row, right to left: chip | name
   (right-aligned, max two lines) | reasoning, PDF, star | close. mobile.css
   keeps its own stacked layout below 769px. */
@media (min-width: 769px) {
    #fundModal .modal-header { height: auto !important; min-height: 72px; padding: 10px 20px !important; gap: 12px; justify-content: flex-start !important; }
    #fundModal .fund-modal-title { order: 2; flex: 1 1 auto !important; min-width: 0; padding: 0 !important; line-height: 1.3; justify-content: flex-start !important; }
    #fundModal .fund-modal-actions { position: static !important; transform: none !important; order: 3; flex-shrink: 0; }
    #fundModal .fund-modal-close-btn { position: static !important; transform: none !important; order: 4; flex-shrink: 0; margin-right: 4px; }
    #fundModal .fund-main-info {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
        text-align: right; overflow-wrap: anywhere;
    }
    #fundModal .fund-modal-title.is-long { font-size: var(--pd-fs-lg) !important; }
}

/* ---- Middle filter box: מסלול / חשיפות / סיכון are ONE box -------------
   Switching mode swaps only the content; the box keeps the exact size and
   frame of the select2-premium track select next to it (64px, 1px border,
   1.25rem radius, white, same soft shadow). Risk: label on the right, the
   1-5 squares on the same row. Desktop only - mobile.css reflows below 769. */
@media (min-width: 769px) {
    #riskFilterContainer, #exposureFilterContainer {
        height: 64px !important; box-sizing: border-box !important;
        background: var(--pd-surface) !important; border: 1px solid var(--pd-line-strong) !important;
        border-radius: 1.25rem !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }
    #riskFilterContainer {
        flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
        padding: 0 20px !important; gap: 16px;
    }
    #riskFilterContainer > div:first-child { margin: 0 !important; white-space: nowrap; font-size: var(--pd-fs-sm) !important; color: var(--pd-ink-4) !important; }
    #riskFilterContainer .risk-levels-row { width: auto; gap: 10px; }
    #riskFilterContainer .risk-level-btn { width: 40px; height: 40px; font-size: var(--pd-fs-md); }
    #exposureFilterContainer { padding: 4px 10px !important; overflow: hidden !important; width: 100%; min-width: 0; }
    /* keep the box the width of its column: the grid must shrink, not push the column wider */
    .filter-box { min-width: 0; }
    /* three slider rows stacked (one per exposure), the advanced button beside them */
    #exposureFilterContainer { height: auto !important; min-height: 64px; }
    #exposureFilterContainer > div { grid-template-columns: minmax(0, 1fr) auto !important; gap: 2px 10px !important; height: auto !important; }
    #exposureFilterContainer > div > div:not(:last-child) {
        grid-column: 1; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
        gap: 10px; border-right: none !important; padding-right: 0 !important;
    }
    #exposureFilterContainer > div > div:not(:last-child) > div:first-child { margin-bottom: 0 !important; min-width: 62px; }
    #exposureFilterContainer > div > div:last-child { grid-column: 2; grid-row: 1 / span 3; height: auto !important; }
    #exposureFilterContainer .pd-range__ui { flex-direction: row; align-items: center; gap: 10px; }
    #exposureFilterContainer .pd-range__track { flex: 1; min-width: 0; }
    #exposureFilterContainer .pd-range__val { order: 2; min-width: 86px; text-align: start; }
    #exposureFilterContainer .pd-range { flex: 1; }
}

/* ---- Market table: the column you sorted by ----------------------------
   Header gets a white inner bar + white arrow chip (app JS), the column's
   cells a light blue wash so the sort is visible down the whole table.
   Compare/average rows keep their own !important backgrounds. */
table.mass-table td.pd-sorted-cell { background-color: rgba(37, 99, 235, 0.06); color: var(--pd-ink); font-weight: 700; }
table.mass-table tbody tr:hover td.pd-sorted-cell { background-color: rgba(37, 99, 235, 0.1); }

/* ---- Interest calculator ------------------------------------------------
   Mode toggle (מתקדם / פשוט) sits in the navy header next to "הורד PDF";
   base settings (צבירה, הפקדה, תקופה, and the yield in simple mode) on one row. */
#interestCalculatorModal .calc-mode-selector--header { margin: 0 !important; width: auto !important; }
#interestCalculatorModal .calc-mode-selector--header .calc-mode-btn { padding: 6px 14px !important; white-space: nowrap; }
@media (min-width: 1025px) {
    #interestCalculatorModal .calc-input-group-v2 { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 16px; }
    #interestCalculatorModal .calc-input-group-v2 > .input-row { flex: 1 1 0; min-width: 0; }
    #interestCalculatorModal .calc-input-group-v2 > .calc-period-input-row { flex: 0 0 auto; }
    #interestCalculatorModal .calc-period-row { flex-direction: column; align-items: flex-start; gap: 0; }
    #interestCalculatorModal .calc-period-controls { flex-wrap: nowrap; }
    #interestCalculatorModal .calc-input-group-v2 .input-wrapper input { max-width: none; }
}
@media (max-width: 768px) {
    #interestCalculatorModal .modal-header { flex-wrap: wrap; gap: 10px; }
    #interestCalculatorModal .calc-header-actions { flex-wrap: wrap; }
}

/* ---- Home quick-returns mini tables: all headers centred (incl. "שם קופה") */
.mini-table th { text-align: center; }

/* ---- Accessibility (static/js/a11y.js) ---------------------------------- */
/* Skip link: first tab stop on index.html, visible only while focused. */
.pd-skip-link { position: absolute; top: -200px; right: 16px; z-index: 2147483001; background: var(--pd-navy); color: #fff !important; padding: 10px 18px; border-radius: var(--pd-r-md); font-weight: 700; text-decoration: none; }
.pd-skip-link:focus { top: 12px; }
/* Visually hidden, still read by screen readers (index.html <h1>, honeypot fields). */
.pd-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* index.html brand (top bar) is a <button> (resetSystem): strip the native button look. */
button.animated-prodata-header-wrapper { border: 0; background: transparent; font: inherit; color: inherit; }
button.animated-prodata-header-wrapper:hover { background: var(--pd-blue-tint); }
/* a11y.js focuses the dialog element itself when a modal opens (so its name is read);
   a ring around a full-screen backdrop helps no one. Same for the skip-link target. */
[data-pd-dialog][tabindex]:focus, [data-pd-dialog][tabindex]:focus-visible,
#main-content[tabindex]:focus, #main-content[tabindex]:focus-visible { outline: none !important; box-shadow: none !important; }

/* ---- ניתוח תיק פנסיוני: start box on top of the modal -------------------
   #portfolioStartBox: "התיק שלך ריק כרגע" + the ways to start; app/08_maslaka.js syncPortfolioStartBox
   adds .is-compact once the portfolio has rows. Options are real <button>s; the global
   :focus-visible ring above applies. */
.pd-vp-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 28px 24px; color: var(--pd-ink-3);
    background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); box-shadow: var(--pd-shadow-md);
}
.pd-vp-empty__title { margin: 12px 0 4px; font: var(--pd-fw-heavy) var(--pd-fs-xl)/var(--pd-lh-tight) var(--pd-font); color: var(--pd-ink); }
.pd-vp-empty__lead { margin: 0 0 18px; font: var(--pd-fw-medium) var(--pd-fs-md) var(--pd-font); color: var(--pd-muted); }
.pd-vp-empty__options {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px;
    width: 100%; max-width: 880px;
}
.pd-vp-empty__opt {
    display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: var(--pd-tap); padding: 20px 16px;
    background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); box-shadow: var(--pd-shadow-sm);
    font-family: var(--pd-font); color: var(--pd-ink-2); text-align: center; cursor: pointer;
    transition: border-color var(--pd-dur) var(--pd-ease), box-shadow var(--pd-dur) var(--pd-ease), background-color var(--pd-dur) var(--pd-ease);
}
.pd-vp-empty__opt:hover { border-color: var(--pd-blue); box-shadow: var(--pd-shadow-md); }
.pd-vp-empty__opt:active { background: var(--pd-surface-sunk); }
/* מסלקה card: the bordered drop target (handleMaslakaFileDrop) holding the option button and,
   at its bottom, the blend checkbox. The button inside drops its own frame. */
.pd-vp-empty__card {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg); box-shadow: var(--pd-shadow-sm);
    transition: border-color var(--pd-dur) var(--pd-ease), box-shadow var(--pd-dur) var(--pd-ease);
}
.pd-vp-empty__card:hover { border-color: var(--pd-blue); box-shadow: var(--pd-shadow-md); }
.pd-vp-empty__card.maslaka-dragover { border-style: dashed; }
.pd-vp-empty__card > .pd-vp-empty__opt {
    flex: 1 1 auto; background: transparent; border: 0; box-shadow: none;
    border-radius: var(--pd-r-lg) var(--pd-r-lg) 0 0;
}
.pd-vp-empty__card > .pd-vp-empty__opt:hover { box-shadow: none; }
.pd-vp-empty__icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: var(--pd-r-md); background: var(--pd-blue-tint); color: var(--pd-blue-hover);
}
.pd-vp-empty__icon svg { width: 22px; height: 22px; }
.pd-vp-empty__opt--excel .pd-vp-empty__icon { background: rgba(16, 124, 65, .08); color: var(--pd-excel); }
.pd-vp-empty__opt--excel:hover { border-color: rgba(16, 124, 65, .45); }
.pd-vp-empty__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-vp-empty__opt-title { font: var(--pd-fw-bold) var(--pd-fs-md)/var(--pd-lh-tight) var(--pd-font); color: var(--pd-ink); }
.pd-vp-empty__opt-desc { font: var(--pd-fw-regular) var(--pd-fs-sm)/var(--pd-lh-body) var(--pd-font); color: var(--pd-muted); }
.pd-vp-empty__blend {
    display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px;
    background: var(--pd-surface-sunk); border-top: 1px solid var(--pd-line); border-radius: 0 0 var(--pd-r-lg) var(--pd-r-lg);
    font: var(--pd-fw-semibold) var(--pd-fs-2xs)/var(--pd-lh-body) var(--pd-font); color: var(--pd-ink-4); text-align: right;
    cursor: pointer; user-select: none;
}
.pd-vp-empty__blend input { width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--pd-blue); cursor: pointer; }
.pd-vp-empty__sample {
    margin-top: 12px; min-height: var(--pd-tap-sm); padding: 6px 12px; background: none; border: 0; border-radius: var(--pd-r-sm);
    font: var(--pd-fw-semibold) var(--pd-fs-sm) var(--pd-font); color: var(--pd-blue-hover);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pd-vp-empty__sample:hover { color: var(--pd-blue-pressed); background: var(--pd-blue-tint); }
/* With rows: a compact "add more" box (no chip, no descriptions, row-shaped options) */
.pd-vp-empty.is-compact { padding: 16px 20px; }
.pd-vp-empty.is-compact .pd-vp-empty__chip,
.pd-vp-empty.is-compact .pd-vp-empty__opt-desc { display: none; }
.pd-vp-empty.is-compact .pd-vp-empty__title { margin: 0 0 2px; font-size: var(--pd-fs-lg); }
.pd-vp-empty.is-compact .pd-vp-empty__lead { margin: 0 0 12px; font-size: var(--pd-fs-sm); }
.pd-vp-empty.is-compact .pd-vp-empty__opt { flex-direction: row; justify-content: center; gap: 10px; padding: 8px 14px; }
.pd-vp-empty.is-compact .pd-vp-empty__icon { width: 34px; height: 34px; }
.pd-vp-empty.is-compact .pd-vp-empty__icon svg { width: 18px; height: 18px; }
.pd-vp-empty.is-compact .pd-vp-empty__blend { padding: 6px 12px; }
.pd-vp-empty.is-compact .pd-vp-empty__sample { margin-top: 6px; }
/* מסלקה access gate: no box of its own, the results panel inside is the flex item */
.pd-maslaka-wrap { display: contents; }
@media (prefers-reduced-motion: reduce) { .pd-vp-empty__opt, .pd-vp-empty__card { transition: none; } }
@media (max-width: 640px) {
    /* phone: no frame around the box, so the option cards get the full width */
    .pd-vp-empty, .pd-vp-empty.is-compact { padding: 4px 0; border: 0; background: transparent; box-shadow: none; }
    .pd-vp-empty__options { grid-template-columns: 1fr; gap: 10px; }
    .pd-vp-empty__opt { flex-direction: row; align-items: center; gap: 12px; padding: 14px; text-align: right; }
    .pd-vp-empty.is-compact .pd-vp-empty__opt { justify-content: flex-start; padding: 8px 12px; }
}
/* דוח מפורט: screenshot/collapse/hide buttons in every section's title row (app/12_detailed_and_yields.js decorateDetailedSectionHeads) */
.pd-sec-head--auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; direction: rtl; }
.pd-sec-head__title { font-size: var(--pd-fs-lg); font-weight: 800; color: var(--pd-ink); }
.pd-sec-ctl { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-shrink: 0; }
.pd-sec-btn svg { transition: transform .2s; }
.pd-sec-collapsed .pd-sec-btn--collapse svg { transform: rotate(180deg); }
.pd-sec-collapsed > :not(.pd-sec-head) { display: none !important; }
.pd-sec-collapsed > .pd-sec-head { margin-bottom: 0 !important; }
.pd-sec-collapsed:not(.report-section-wrapper):not(.ai-section) { padding-top: 16px !important; padding-bottom: 16px !important; }
/* דוח מפורט: hide a single table row - button right after the row name (app/12_detailed_and_yields.js applyDetailedRowVisibility); hidden rows stay out of the PDF too */
.pd-row-hide { display: inline-flex; vertical-align: middle; margin-inline-start: 8px; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--pd-line); background: #fff; color: var(--pd-muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; z-index: 2; }
.pd-row-hide svg { width: 13px; height: 13px; }
tr:hover .pd-row-hide, .pd-row-hide:focus-visible { opacity: 1; }
.pd-row-hide:hover { background: var(--pd-surface-2); color: var(--pd-ink); border-color: var(--pd-line-strong); }
.pd-row-hide:focus-visible { outline: 2px solid var(--pd-blue); outline-offset: 2px; }
@media (hover: none) { .pd-row-hide { opacity: .6; } }
tr.pd-row-hidden { display: none !important; }
.pd-rows-restore { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; direction: rtl; font-size: 12.5px; color: var(--pd-muted); }
.pd-rows-restore__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--pd-line-strong); background: #fff; color: var(--pd-ink-3); font-size: 12px; font-weight: 600; cursor: pointer; }
.pd-rows-restore__chip:hover { background: var(--pd-surface-2); border-style: solid; }
.pd-rows-restore__all { border: none; background: none; color: var(--pd-blue); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 3px 4px; }
.pd-rows-restore button:focus-visible { outline: 2px solid var(--pd-blue); outline-offset: 2px; }
/* מחקר שוק chart cards with a centered intro: camera button in the top-left corner (app/14_exposures_charts.js massCardShotBtn) */
#massExposureChartContainer > .pd-card-shot, #massReturnsChartContainer > .pd-card-shot { position: absolute; top: 20px; left: 20px; }
/* "שאל שאלה על התשואות (AI)" at the bottom of טבלת השוואת ביצועים, closed by default (app/18_advantages_custom_columns.js toggleAdvChat) */
.adv-chat { margin-top: 16px; border-top: 1px solid var(--pd-surface-2); padding-top: 12px; direction: rtl; }
.adv-chat__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--pd-line); background: #fff; color: var(--pd-ink); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s; }
.adv-chat__toggle:hover { background: var(--pd-surface-sunk); border-color: var(--pd-line-strong); }
.adv-chat__toggle:focus-visible { outline: 2px solid var(--pd-blue); outline-offset: 2px; }
.adv-chat__chev { width: 14px; height: 14px; transition: transform .2s; }
.adv-chat__toggle[aria-expanded="true"] .adv-chat__chev { transform: rotate(180deg); }
.adv-chat__body { margin-top: 10px; }
.adv-chat__body[hidden] { display: none; }
.adv-chat .message { font-size: 14px; padding: 8px 14px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .pd-sec-btn svg, .adv-chat__chev { transition: none; } }

/* =========================================================================
   PART 3 - Motion (static/js/motion.js, design/DESIGN.md "Motion").
   Enter = ease-out, press = fast, content entrances are the slowest thing.
   Everything here is off under prefers-reduced-motion (bottom of this part).
   ========================================================================= */
@keyframes pdFadeIn { from { opacity: 0; } }
@keyframes pdRiseIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes pdShimmer { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* ---- Top progress bar while a request is slower than 200ms ------------- */
#pdTopProgress {
    position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 30000; pointer-events: none;
    background: linear-gradient(to left, var(--pd-blue), #38BDF8);
    box-shadow: 0 0 10px rgba(37, 99, 235, .45);
    transform-origin: right center; transform: scaleX(0); opacity: 0;
    transition: transform 260ms var(--pd-ease-out), opacity var(--pd-dur-ui) ease;
}
#pdTopProgress.is-on { opacity: 1; }
#pdTopProgress.is-done { opacity: 0; transition: transform var(--pd-dur-ui) var(--pd-ease-out), opacity 300ms ease 150ms; }

/* ---- Report sections / home cards fade up as they come into view ------- */
/* Hiding is instant (an element's own transition, e.g. .mini-table-card's 300ms transform,
   would otherwise animate the hide: a visible dim-out before the fade-in). */
.pd-reveal { opacity: 0; transform: translateY(14px); transition: none !important; }
.pd-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--pd-dur-enter) var(--pd-ease-out) var(--pd-reveal-delay, 0ms), transform var(--pd-dur-enter) var(--pd-ease-out) var(--pd-reveal-delay, 0ms) !important;
}
/* Freshly rendered report / home cards: the Tailwind CDN writes the CSS for new classes a
   moment after the HTML lands, so every `transition-all` element animated from unstyled to
   styled (padding, font size, colour jumping). No transitions until that has settled
   (motion.js settleTransitions, ~2 frames + 350ms). */
.pd-settling *:not(.pd-reveal), .pd-settling *::before, .pd-settling *::after { transition: none !important; }
@media print { .pd-reveal { opacity: 1 !important; transform: none !important; } }
.yields-stats-table td span.font-black { font-variant-numeric: tabular-nums; }
/* hero numbers wait hidden until motion.js starts counting them (whenQuiet) */
.pd-count-wait .yields-stats-table td span.font-black, .pd-count-wait [data-pd-countup] { opacity: 0; }

/* ---- "הפק דוח" loading: a report-shaped skeleton instead of a spinner --
   (app/02_reports.js fetchAndRender adds .is-report). Appears only after 400ms, so a
   fast answer never flashes it. */
#loader.is-report {
    --sk: #EDF2F7;
    position: relative; overflow: hidden; display: block;
    width: 100%; height: 520px; margin: 32px 0 0; padding: 0;
    border: 1px solid var(--pd-line); border-top-color: var(--pd-line) !important;
    border-radius: var(--pd-r-xl); box-shadow: var(--pd-shadow-md);
    animation: pdFadeIn 260ms var(--pd-ease-out) 400ms backwards;
    background:
        linear-gradient(var(--sk), var(--sk)) right 32px top 34px / 200px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 32px top 34px / 96px 28px no-repeat,
        linear-gradient(var(--pd-line), var(--pd-line)) center top 90px / calc(100% - 64px) 58px no-repeat,
        linear-gradient(var(--sk), var(--sk)) right 48px top 180px / 150px 16px no-repeat,
        linear-gradient(var(--sk), var(--sk)) right 48px top 240px / 120px 16px no-repeat,
        linear-gradient(var(--sk), var(--sk)) right 48px top 300px / 140px 16px no-repeat,
        linear-gradient(var(--sk), var(--sk)) right 48px top 360px / 110px 16px no-repeat,
        linear-gradient(var(--sk), var(--sk)) right 48px top 420px / 130px 16px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 18% top 178px / 84px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 18% top 238px / 70px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 18% top 298px / 76px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 18% top 358px / 64px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 18% top 418px / 80px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 46% top 178px / 84px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 46% top 238px / 70px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 46% top 298px / 76px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 46% top 358px / 64px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 46% top 418px / 80px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 74% top 178px / 84px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 74% top 238px / 70px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 74% top 298px / 76px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 74% top 358px / 64px 20px no-repeat,
        linear-gradient(var(--sk), var(--sk)) left 74% top 418px / 80px 20px no-repeat,
        var(--pd-surface);
}
#loader.is-report::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
    animation: pdShimmer 1.3s linear infinite;
}

/* ---- Overlays fade in under the existing modal slide-up --------------- */
.modal-overlay { animation: pdFadeIn var(--pd-dur-ui) var(--pd-ease-out); }

/* ---- Press feedback: the button shrinks a hair while pressed ---------- */
.pd-btn, #btnRun, .excel-report-btn, .print-btn, .reasoning-report-btn, .detailed-view-tab, .action-btn {
    transition-property: background-color, border-color, color, box-shadow, transform;
    transition-duration: var(--pd-dur-ui);
    transition-timing-function: var(--pd-ease-out);
}
.pd-btn:active:not(:disabled), #btnRun:active:not(:disabled), .excel-report-btn:active, .print-btn:active,
.reasoning-report-btn:active, .detailed-view-tab:active, .action-btn:active:not(:disabled) {
    transform: scale(.97); transition-duration: var(--pd-dur-press);
}

/* ---- Home: the tool tiles rise in one after the other on load --------- */
.risk-top-bar > div > button { animation: pdRiseIn var(--pd-dur-enter) var(--pd-ease-out) backwards; }
.risk-top-bar > div > button:nth-child(2) { animation-delay: 50ms; }
.risk-top-bar > div > button:nth-child(3) { animation-delay: 100ms; }
.risk-top-bar > div > button:nth-child(4) { animation-delay: 150ms; }
.risk-top-bar > div > button:nth-child(5) { animation-delay: 200ms; }
.risk-top-bar > div > button:nth-child(6) { animation-delay: 250ms; }

/* ---- "ניתוח מקיף והשוואה" panel: a short blue line circling its edge ---
   SVG rect + stroke-dashoffset, so speed and length stay constant along the
   straight sides and the rounded corners alike (pathLength 1000 = one lap).
   One short bold dash (plus its glow, same length and position). */
.pd-orbit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.pd-orbit rect { width: calc(100% - 2px); height: calc(100% - 2px); rx: calc(2rem - 1px); ry: calc(2rem - 1px); fill: none; stroke-linecap: round; animation: 14s linear infinite; }
.pd-orbit .pd-orbit__head { stroke: #3B82F6; stroke-width: 2; opacity: .7; stroke-dasharray: 12 988; animation-name: pdOrbitHead; }
/* glow = a wider faint stroke. No filter: blur(): a blur re-rendered on every frame, inside a
   card with a 100px backdrop blur, was a large part of the idle CPU/GPU load. */
.pd-orbit .pd-orbit__glow { stroke: #3B82F6; stroke-width: 7; opacity: .1; stroke-dasharray: 12 988; animation-name: pdOrbitHead; }
@keyframes pdOrbitHead { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
/* motion.js pauseLoopsOffscreen: off screen or background tab = no ticking */
.pd-loop-paused, .pd-loop-paused * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .pd-reveal { opacity: 1; transform: none; }
    .pd-orbit { display: none; }
    .pd-count-wait .yields-stats-table td span.font-black, .pd-count-wait [data-pd-countup] { opacity: 1; }
    #loader.is-report, #loader.is-report::after, .modal-overlay, .risk-top-bar > div > button { animation: none; }
    .pd-btn:active, #btnRun:active, .excel-report-btn:active, .print-btn:active,
    .reasoning-report-btn:active, .detailed-view-tab:active, .action-btn:active { transform: none; }
    #pdTopProgress { transition: opacity var(--pd-dur-ui) ease; }
}

/* =========================================================================
   PART 4 - Polish pass (design/alive-ui branch).
   ========================================================================= */
/* Home tool tiles: the white layer inside each tile was square while the tile
   is rounded, so its border disappeared at the corners. */
.risk-top-bar > div > button > div:first-child { border-radius: inherit; }
/* דוח מפורט: "חודשי ניתוח" badge - brand navy instead of indigo (DESIGN.md: no purple outside AI) */
.pd-month-badge {
    background: linear-gradient(135deg, var(--pd-navy) 0%, #0B3A8F 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 30px -12px rgba(0, 35, 102, .5);
}

/* =========================================================================
   PART 5 - Single-fund detailed report ("דף קופה", single_fund.js) + in-page nav.
   ========================================================================= */
/* ID card header: "דוח מפורט לקופה" - white on the navy header, next to the close button */
#fundModal .fund-modal-report-btn { background: var(--pd-surface); color: var(--pd-ink-3); font-weight: var(--pd-fw-bold); border: 1px solid var(--pd-line-strong); box-shadow: none; }
#fundModal .fund-modal-report-btn:hover { background: var(--pd-blue-tint); }

/* In-page nav of the detailed report: sticky chips under the view tabs */
.pd-dnav {
    position: sticky; top: 0; z-index: var(--pd-z-report-nav); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 8px 8px; margin: 0 0 12px; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.2) blur(6px);
    border-bottom: 1px solid var(--pd-line); direction: rtl;
}
.pd-dnav::-webkit-scrollbar { display: none; }
.pd-dnav__chip {
    flex-shrink: 0; padding: 6px 14px; border-radius: var(--pd-r-pill); border: 1px solid var(--pd-line);
    background: var(--pd-surface); color: var(--pd-muted); font: var(--pd-fw-semibold) var(--pd-fs-xs) var(--pd-font);
    cursor: pointer; white-space: nowrap; transition: background-color var(--pd-dur-ui, .15s) ease, color var(--pd-dur-ui, .15s) ease;
}
.pd-dnav__chip:hover { color: var(--pd-ink); border-color: var(--pd-line-strong); }
.pd-dnav__chip.is-active { background: var(--pd-navy); border-color: var(--pd-navy); color: #fff; }

/* Fund-page sections */
.sf-section {
    background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-r-lg);
    padding: 20px 22px; margin: 0 0 24px; box-shadow: var(--pd-shadow-sm); direction: rtl; scroll-margin-top: 70px;
}
.sf-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sf-sec-title { margin: 0; font-size: var(--pd-fs-xl); font-weight: var(--pd-fw-heavy); color: var(--pd-ink); }
.sf-sec-sub { margin: 4px 0 0; font-size: var(--pd-fs-xs); color: var(--pd-muted); line-height: var(--pd-lh-body); }
.sf-empty { color: var(--pd-muted); font-size: var(--pd-fs-sm); margin: 0; }
.sf-scroll { overflow-x: auto; }
.sf-better { color: var(--pd-gain) !important; }
.sf-worse { color: var(--pd-loss) !important; }

.sf-heatmap, .sf-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: var(--pd-fs-sm); font-variant-numeric: tabular-nums; }
.sf-heatmap th, .sf-table th { font-weight: var(--pd-fw-bold); padding: 8px 6px; border-radius: 6px; white-space: nowrap; }
.sf-heatmap tbody th, .sf-table tbody th { background: var(--pd-surface-sunk); color: var(--pd-ink); text-align: right; }
.sf-heatmap td { text-align: center; padding: 7px 4px; border-radius: 6px; font-weight: var(--pd-fw-semibold); white-space: nowrap; }
.sf-heatmap td.sf-hm-empty { background: var(--pd-surface-sunk); color: var(--pd-faint); }
.sf-heatmap td.sf-hm-year { font-weight: var(--pd-fw-heavy); }
.sf-heatmap td.sf-hm-group { background: var(--pd-surface-sunk); color: var(--pd-muted); }
.sf-table td { padding: 8px 10px; background: var(--pd-surface-sunk); border-radius: 6px; text-align: center; white-space: nowrap; }
.sf-table td:first-child { text-align: right; white-space: normal; }

.sf-dd-wrap { margin-top: 18px; }
.sf-dd-title { font-size: var(--pd-fs-sm); font-weight: var(--pd-fw-bold); color: var(--pd-ink); margin-bottom: 8px; }
.sf-dd-canvas { position: relative; height: 240px; }

.sf-insights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-insights li { display: flex; gap: 10px; align-items: flex-start; background: var(--pd-blue-tint); border: 1px solid var(--pd-blue-subtle); border-radius: var(--pd-r-md); padding: 12px 14px; font-size: var(--pd-fs-sm); color: var(--pd-ink); line-height: var(--pd-lh-body); }
.sf-insights li svg { width: 18px; height: 18px; color: var(--pd-navy); flex-shrink: 0; margin-top: 2px; }
.sf-insights li > span { flex: 1; }
.sf-insights li.sf-ins--pos { background: var(--pd-gain-tint); border-color: var(--pd-gain-tint); }
.sf-insights li.sf-ins--pos > svg { color: var(--pd-gain); }
.sf-insights li.sf-ins--neg { background: var(--pd-loss-tint); border-color: var(--pd-loss-tint); }
.sf-insights li.sf-ins--neg > svg { color: var(--pd-loss); }
.sf-ins-hide { background: none; border: 0; padding: 2px; margin: -2px -4px 0 0; cursor: pointer; color: var(--pd-ink-3); border-radius: var(--pd-r-sm, 6px); line-height: 0; opacity: .55; }
.sf-ins-hide:hover, .sf-ins-hide:focus-visible { opacity: 1; color: var(--pd-ink); }
.sf-ins-hide svg { width: 15px; height: 15px; }
.sf-ins-restore { margin-top: 10px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--pd-navy); font-size: var(--pd-fs-sm); font-weight: 700; text-decoration: underline; }
@media (max-width: 700px) { .sf-insights { grid-template-columns: 1fr; } .sf-section { padding: 14px; } }

/* Managing-company logos (manager_logos.js managerLogoHtml): decorative, never text */
/* display: Tailwind's preflight makes every img a block, which put the logo above the name */
.pd-mgr-logo { display: inline-block !important; width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-inline-end: 6px; flex-shrink: 0; }
.pd-mgr-opt { display: inline-flex; align-items: center; gap: 0; }
#mixMgrOptionsList .mix-mgr-option, #aiCompanyDropdownList .ai-dropdown-item { align-items: center; }
/* on the navy headers: a white box (dark marks - מגדל, מור, איילון - vanish on navy without it) */
.pd-mgr-logo--lg { width: 30px; height: 30px; padding: 4px; margin: 0; background: #fff; border-radius: var(--pd-r-sm); box-shadow: var(--pd-shadow-sm); box-sizing: content-box; }
.pd-mgr-logo--sm { width: 15px; height: 15px; margin-inline-end: 5px; }
.pd-mgr-logo--hdr { margin-inline-end: 10px; vertical-align: -10px; }

/* =========================================================================
   PART 6 - Detailed-report tables (.pd-rtable), 2026-10-20, user pick "כיוון א".
   One look for every table in דוח מפורט: light header with a navy rule (DESIGN.md
   "טבלאות הדוח המפורט"), hairline rows, slate first column, 600/700 weights, best value as
   green text only - no dot (user, 2026-10-20), never a filled cell. Markup: app/02_reports.js buildSectionTableHtml,
   updateStatCards, updateAdvantagesTable, updateCorrelationMatrix; single_fund.js .sf-*.
   ========================================================================= */
#reportContent table.pd-rtable {
    border-collapse: separate; border-spacing: 0; background: var(--pd-surface); font-variant-numeric: tabular-nums;
    border: 1px solid var(--pd-line); border-radius: var(--pd-r-md); overflow: hidden; box-shadow: var(--pd-shadow-sm);
}
#reportContent table.pd-rtable thead th {
    background: var(--pd-surface-sunk) !important; background-image: none !important; color: var(--pd-ink) !important;
    border: 0 !important; border-bottom: 2px solid var(--pd-navy) !important; border-radius: 0 !important;
    padding: 13px 16px !important; font-size: var(--pd-fs-xs) !important; font-weight: 700 !important;
    letter-spacing: 0 !important; text-transform: none !important; vertical-align: middle !important; box-shadow: none !important;
}
#reportContent table.pd-rtable thead th:first-child { color: var(--pd-muted) !important; border-left: 1px solid var(--pd-line) !important; }
#reportContent table.pd-rtable thead th .fund-link,
#reportContent table.pd-rtable .pd-rtable__fund { color: var(--pd-ink) !important; font-size: var(--pd-fs-md); font-weight: 700; }
#reportContent table.pd-rtable thead th small,
#reportContent table.pd-rtable thead th .fund-link > span[style*="opacity"],
#reportContent table.pd-rtable .pd-rtable__id { color: var(--pd-muted) !important; opacity: 1 !important; font-size: var(--pd-fs-xs); font-weight: 500; }
#reportContent table.pd-rtable thead th:hover .fund-link { color: var(--pd-blue) !important; }
#reportContent table.pd-rtable tbody td {
    padding: 11px 16px !important; font-size: 0.9rem; font-weight: 600; color: var(--pd-ink-3, var(--pd-ink-3));
    border: 0 !important; border-bottom: 1px solid #EEF2F6 !important; background: var(--pd-surface); box-shadow: none !important;
}
#reportContent table.pd-rtable:not(.pd-rtable--matrix) tbody td { background: var(--pd-surface) !important; }
#reportContent table.pd-rtable tbody tr:last-child td { border-bottom: 0 !important; }
#reportContent table.pd-rtable tbody tr:hover { transform: none !important; box-shadow: none !important; }
#reportContent table.pd-rtable:not(.pd-rtable--matrix) tbody tr:hover td { background: var(--pd-surface-sunk) !important; }
#reportContent table.pd-rtable tbody td:first-child {
    background: var(--pd-surface-sunk) !important; color: var(--pd-ink) !important; font-weight: 700 !important; font-size: 0.88rem !important;
    backdrop-filter: none !important; box-shadow: none !important; border-left: 1px solid var(--pd-line) !important;
}
#reportContent table.pd-rtable td span.font-black { font-weight: 700 !important; font-size: 1rem !important; }
#reportContent table.pd-rtable td, #reportContent table.pd-rtable th { font-family: var(--pd-font) !important; } /* Rubik everywhere (the matrix used font-mono) */
#reportContent table.pd-rtable td.best-val { background: var(--pd-surface) !important; color: var(--pd-gain) !important; font-weight: 800 !important; border-color: transparent !important; }
#reportContent table.pd-rtable .pd-mgr-logo--hdr { width: 22px; height: 22px; padding: 0; background: none; box-shadow: none; border-radius: 0; margin-inline-end: 8px; vertical-align: middle; }
#reportContent table.pd-rtable .detailed-remove-btn { border-color: var(--pd-line-strong); background: var(--pd-surface); color: var(--pd-muted); }
#reportContent table.pd-rtable .detailed-remove-btn:hover, #reportContent table.pd-rtable .detailed-remove-btn:focus-visible { background: var(--pd-loss); border-color: var(--pd-loss); color: #fff; }
/* fund-page tables (single_fund.js) take the same header */
.sf-heatmap th, .sf-table th { background: var(--pd-surface-sunk); color: var(--pd-ink); border-bottom: 2px solid var(--pd-navy); }
.sf-heatmap thead th:first-child, .sf-table thead th:first-child { color: var(--pd-muted); }

/* =========================================================================
   PART 7 - Updates strip ("עדכוני פרודאטה" / "עדכוני הראל"), 2026-10-20.
   Banner notifications under the main feature cards (index.html #pdUpdatesStrip,
   app/16_notifications_screenshots.js renderUpdatesStrip). Closed with X per page load, back on the next one.
   ========================================================================= */
/* Wider than the cards row (user, 2026-10-20) so a long update stays short */
.pd-updates { display: flex; flex-direction: column; gap: var(--pd-space-3); margin: -12px auto var(--pd-space-6); max-width: 1500px; }
.pd-updates[hidden] { display: none; }
.pd-update {
    position: relative; display: flex; gap: var(--pd-space-4); align-items: flex-start; text-align: right;
    background: var(--pd-surface); border: 1px solid var(--pd-line); border-inline-start: 4px solid var(--pd-blue);
    border-radius: var(--pd-r-lg); box-shadow: var(--pd-shadow-sm); padding: var(--pd-space-3) var(--pd-space-5);
    padding-inline-end: calc(var(--pd-tap-sm, 32px) + var(--pd-space-4));
}
.pd-update--company { border-inline-start-color: var(--pd-institution); }
.pd-update__mark {
    flex: none; width: 40px; height: 40px; border-radius: var(--pd-r-md); display: flex; align-items: center; justify-content: center;
    background: var(--pd-blue-tint); color: var(--pd-blue);
}
.pd-update--company .pd-update__mark { background: #fff; color: var(--pd-institution); }
.pd-update__mark .pd-mgr-logo { width: 36px; height: 36px; object-fit: contain; background: #fff; }
.pd-update__body { min-width: 0; flex: 1; }
.pd-update__source { font-size: var(--pd-fs-xs); font-weight: var(--pd-fw-bold); color: var(--pd-blue); margin-bottom: 2px; }
.pd-update--company .pd-update__source { color: var(--pd-institution); }
.pd-update__title { font-size: var(--pd-fs-md); font-weight: var(--pd-fw-heavy); color: var(--pd-ink); line-height: var(--pd-lh-tight); }
.pd-update__text { font-size: var(--pd-fs-sm); color: var(--pd-ink-2); line-height: var(--pd-lh-body); margin-top: 4px; }
.pd-update__text ul, .pd-update__text ol { margin: 4px 0; padding-inline-start: 20px; }
.pd-update__text a { color: var(--pd-blue); text-decoration: underline; }
.pd-update__close {
    position: absolute; top: var(--pd-space-2); inset-inline-end: var(--pd-space-2);
    width: var(--pd-tap-sm, 32px); height: var(--pd-tap-sm, 32px); border-radius: var(--pd-r-pill);
    display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--pd-muted); cursor: pointer;
    transition: background-color var(--pd-dur) var(--pd-ease), color var(--pd-dur) var(--pd-ease);
}
.pd-update__close:hover { background: var(--pd-surface-sunk); color: var(--pd-ink); }
.pd-update__close:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
@media (max-width: 640px) { .pd-updates { margin-top: -8px; padding-inline: var(--pd-gutter, 16px); } .pd-update__mark { display: none; } }

/* =========================================================================
   PART 7 - One table look for the remaining tables, 2026-10-21 (DESIGN.md "כלל הטבלה האחת").
   .modern-table (ניתוח תיק פנסיוני funds table, מחולל תמהיל results, מסלקה retirement +
   simulation) and .nontradable-table (פירוט נכסים לא סחירים) had black headers with white text.
   ========================================================================= */
.modern-table-container { background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-r-md); box-shadow: var(--pd-shadow-sm); }
.modern-table { font-variant-numeric: tabular-nums; }
.modern-table thead { border-bottom: 0; background: none !important; }
.modern-table th {
    background: var(--pd-surface-sunk); color: var(--pd-ink); border-bottom: 2px solid var(--pd-navy);
    font-size: var(--pd-fs-xs); font-weight: 700; text-transform: none; letter-spacing: 0; padding: 12px 16px; vertical-align: middle;
}
.modern-table td { border-bottom: 1px solid #EEF2F6; color: var(--pd-ink-3); font-size: var(--pd-fs-sm); }
.modern-table tr:hover td { background: var(--pd-surface-sunk); }
.nontradable-table { font-variant-numeric: tabular-nums; }
.nontradable-table thead th {
    background: var(--pd-surface-sunk) !important; color: var(--pd-ink) !important; border-bottom: 2px solid var(--pd-navy);
    font-size: var(--pd-fs-xs);
}
.nontradable-table td { border-bottom: 1px solid #EEF2F6; color: var(--pd-ink-3); }
.nontradable-table tr:hover { background: var(--pd-surface-sunk); }
.nontradable-table td:first-child { background: var(--pd-surface-sunk); color: var(--pd-ink); font-weight: 700 !important; }

/* AI section header + its two actions (app/02_reports.js renderDetailedView / renderMassView AI block).
   Title: the AI gradient tokens (כלל ה-AI) instead of #1e1b4b→#4f46e5. "רענן ניתוח" = AI button,
   "מיקוד בקופה" = secondary button (was Material green / blue, with a lift). */
.ai-header-premium { background: linear-gradient(135deg, var(--pd-ai-from), var(--pd-ai-to)); -webkit-background-clip: text; background-clip: text; font-weight: 800 !important; font-size: var(--pd-fs-2xl) !important; letter-spacing: 0; }
.ai-action-btn-premium { border-radius: var(--pd-r-pill); font-size: var(--pd-fs-sm); font-weight: 700; box-shadow: var(--pd-shadow-sm); transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.ai-action-btn-premium:hover { transform: none; }
.ai-action-btn-premium:hover i, .ai-action-btn-premium:hover svg { transform: none; }
.ai-btn-refresh { background: linear-gradient(135deg, var(--pd-ai-from), var(--pd-ai-to)); color: #fff; border: 1px solid transparent; }
.ai-btn-refresh:hover { background: linear-gradient(135deg, var(--pd-ai-from), var(--pd-ai-to)); filter: brightness(1.06); box-shadow: var(--pd-shadow-md); }
.ai-btn-focus { background: var(--pd-surface); color: var(--pd-ink-3); border: 1px solid var(--pd-line-strong); }
.ai-btn-focus:hover { background: var(--pd-surface-2); box-shadow: var(--pd-shadow-sm); }

/* Guided tour (driver.js, mobile.css .driverjs-theme-prodata): indigo -> blue / ink (כלל אפס סגול). */
.driver-popover.driverjs-theme-prodata .driver-popover-title { color: var(--pd-ink) !important; font-weight: 800 !important; font-size: var(--pd-fs-xl) !important; }
.driver-popover.driverjs-theme-prodata .driver-popover-next-btn { background-color: var(--pd-blue) !important; }
.driver-popover.driverjs-theme-prodata .driver-popover-next-btn:hover { background-color: var(--pd-blue-hover) !important; }

/* Home-page mini tables (renderMiniTables): row/name hover was indigo. */
.mini-table { font-variant-numeric: tabular-nums; }
.mini-table th { background: var(--pd-surface-sunk); color: var(--pd-ink); border-bottom: 2px solid var(--pd-navy); font-size: var(--pd-fs-xs); }
.mini-table td { border-bottom: 1px solid #EEF2F6; }
.mini-table tr:hover { background: var(--pd-surface-sunk); }
.mini-table .fund-name:hover { color: var(--pd-blue); }

/* Support chat window (support_chat_widget.html): the same light window header as every modal,
   with the AI colour as its line and icon (was a navy->indigo gradient with white text). */
.support-chat-header { background: var(--pd-surface-sunk); color: var(--pd-ink); border-bottom: 2px solid var(--pd-ai-from); }
.support-chat-title { color: var(--pd-ink); }
.support-chat-status { color: var(--pd-muted); }
.support-chat-avatar { background: none; border: 0; backdrop-filter: none; color: var(--pd-ai-from); width: auto; }
.support-chat-avatar svg { color: var(--pd-ai-from); stroke: var(--pd-ai-from); }
.support-chat-context-badge { background: var(--pd-surface-2); color: var(--pd-ink-4); }
.support-chat-icon-btn { background: var(--pd-surface-2); color: var(--pd-ink-4); }
.support-chat-icon-btn:hover { background: var(--pd-line); color: var(--pd-ink); }

/* Home-screen tool tiles (index.html): the tool's soft colour - light tint square, icon in the
   tool colour (was a strong gradient square with a white icon). One rule for all six tiles. */
.pd-tile-icon {
    position: relative; z-index: 10; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-bottom: 8px; border-radius: 14px;
    background: var(--tool-tint); border: 1px solid var(--tool-line); color: var(--tool);
    transition: transform 500ms var(--pd-ease);
}
.group:hover .pd-tile-icon { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .pd-tile-icon { transition: none; } .group:hover .pd-tile-icon { transform: none; } }

/* Fields without the .pd-input/.pd-select class (≈160 older inputs): at least one shared focus
   look - blue border + the focus ring - so every field answers the same way (DESIGN.md "שדה"). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none; border-color: var(--pd-blue) !important; box-shadow: var(--pd-focus-ring) !important;
}

/* ---- Dual-handle range slider (.pd-range, built by pdRangeInit) ------------
   Used by the dashboard exposure row and the advanced-exposure modal. The two
   number inputs inside stay in the DOM (hidden): they are the filter state. */
.pd-range { display: block; min-width: 0; width: 100%; }
.pd-range > input[type="number"] { display: none; }
.pd-range__ui { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; }
.pd-range__val { font-size: var(--pd-fs-xs); font-weight: 700; color: var(--pd-ink-3); text-align: center; white-space: nowrap; }
.pd-range__track { position: relative; height: 18px; }
.pd-range__track::before, .pd-range__fill {
    content: ""; position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
}
.pd-range__track::before { inset-inline: 0; background: var(--pd-line-strong); }
.pd-range__fill {
    inset-inline-start: var(--from, 0%); inset-inline-end: calc(100% - var(--to, 100%));
    background: var(--pd-blue);
}
.pd-range__thumb {
    position: absolute; inset: 0; width: 100%; height: 18px; margin: 0; background: none;
    pointer-events: none; -webkit-appearance: none; appearance: none; outline: none;
}
.pd-range__thumb::-webkit-slider-runnable-track { background: none; height: 18px; }
.pd-range__thumb::-moz-range-track { background: none; height: 18px; }
.pd-range__thumb::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
    background: #fff; border: 2px solid var(--pd-blue); box-shadow: var(--pd-shadow-sm); cursor: grab;
}
.pd-range__thumb::-moz-range-thumb {
    pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 2px solid var(--pd-blue); box-shadow: var(--pd-shadow-sm); cursor: grab;
}
.pd-range__thumb:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pd-blue); outline-offset: 2px; }
.pd-range__thumb:active::-webkit-slider-thumb { cursor: grabbing; }
/* Modal rows: a fixed-width slider next to the row label */
.adv-exp-row .pd-range { width: 210px; flex-shrink: 0; transition: opacity 0.2s; }
.adv-exp-row.adv-exp-off .pd-range { opacity: 0.45; }

/* Product-type / managing-company dropdowns: exactly 7 rows visible (so the policy products show fully,
   also both "ביטוח מנהלים" and "פוליסות חיסכון" in the הפניקס view - user 2026-10-26), the rest scrolls */
.product-dropdown .select2-results > .select2-results__options { max-height: 252px !important; }