:root {
    color-scheme: light dark;
    --text-color: #172d29;
    --page-background: #fafbf9;
    --divider-color: #e5e9e2;
    --portrait-background: #e9ede7;
    --accent-color: #176d4d;
    --button-border-color: #d8e0d5;
    --button-hover-background: #eef3e9;
    --focus-color: #339b76;
    --muted-color: #52665c;
    --probability-margin-color: #6b7280;
    --card-background: #fff;
    --card-shadow: 0 8px 28px #172d2908;
    --error-color: #906014;
    font-family: Arial, "Noto Sans Hebrew", sans-serif;
    color: var(--text-color);
    background: var(--page-background);
    font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #e4eee8;
        --page-background: #101a17;
        --divider-color: #2b3c34;
        --portrait-background: #26372f;
        --accent-color: #80d5ae;
        --button-border-color: #496355;
        --button-hover-background: #21392d;
        --focus-color: #80d5ae;
        --muted-color: #a5b9ac;
        --probability-margin-color: #9ca3af;
        --card-background: #18251f;
        --card-shadow: 0 8px 28px #00000014;
        --error-color: #e8bc75;
    }
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.page { max-width: 680px; margin: 48px auto; padding: 0 24px; }
.updates { margin-bottom: 36px; padding: 22px 24px 18px; border: 1px solid var(--divider-color); border-radius: 20px; background: var(--card-background); box-shadow: var(--card-shadow); }
.source-note { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; line-height: 1.7; }
.source-note a { color: var(--accent-color); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.source-note a:hover { text-decoration: none; }
.status-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 0 4px var(--button-hover-background); }
.updates[data-state="loading"] .status-dot { background: var(--muted-color); }
.updates[data-state="error"] .status-dot { background: var(--error-color); }
.last-updated { margin: 6px 17px 18px 0; color: var(--muted-color); font-size: 13px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.update-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid var(--divider-color); }
.next-update { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--muted-color); font-size: 13px; line-height: 1.6; }
#countdown { min-width: 46px; padding: 3px 7px; border-radius: 6px; background: var(--button-hover-background); color: var(--accent-color); direction: ltr; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.refresh { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--button-border-color); border-radius: 10px; background: var(--card-background); color: var(--accent-color); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s; }
.refresh:hover:not(:disabled) { background: var(--button-hover-background); }
.refresh:disabled { cursor: wait; color: var(--muted-color); }
.refresh svg { width: 17px; height: 17px; flex-shrink: 0; }
.refresh:disabled svg { animation: spin 1s linear infinite; }
.update-error { margin: 16px 0 0; color: var(--error-color); font-size: 13px; line-height: 1.6; }
h1, h2 { margin: 0 0 14px; font-size: clamp(26px, 5vw, 34px); line-height: 1.35; letter-spacing: -.7px; text-wrap: balance; }
.heading-end { white-space: nowrap; }
.market-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 8px; font-size: 24px; line-height: 1; vertical-align: middle; text-decoration: none; }
.market-link:hover { background: var(--button-hover-background); }
.election-summary { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--divider-color); }
.election-outcomes { display: grid; gap: 12px; margin: 0; }
.election-outcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--divider-color); border-radius: 14px; background: var(--card-background); }
.election-outcome dt { font-size: 20px; font-weight: 600; line-height: 1.5; }
.election-outcome dd { margin: 0; color: var(--accent-color); }
.period-outcomes abbr { text-decoration: none; }
.section-description { margin: -4px 0 18px; color: var(--muted-color); font-size: 14px; line-height: 1.7; }
.coalition-outcome dt { font-size: 16px; overflow-wrap: anywhere; }
.coalition-outcome .probability { font-size: 26px; }
.market-chooser { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chooser-market-source { flex: 0 0 48px; min-height: 56px; border: 1px solid var(--button-border-color); border-radius: 14px; background: var(--card-background); font-size: 22px; }
.market-select-control { position: relative; flex: 1; min-width: 0; }
.market-select { display: block; position: absolute; inset: 0; appearance: none; width: 100%; height: 100%; min-height: 56px; padding: 14px 18px; padding-inline-end: 52px; border: 1px solid var(--button-border-color); border-radius: 14px; background: var(--card-background); color: transparent; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.market-select:hover:not(:disabled) { border-color: var(--accent-color); }
.market-select:disabled { cursor: wait; }
.market-select option { color: var(--text-color); background: var(--card-background); }
.market-select-value { position: relative; display: block; min-height: 56px; padding: 14px 18px; padding-inline-end: 52px; border: 1px solid transparent; font-size: 17px; font-weight: 600; line-height: 1.6; pointer-events: none; }
.role-select-deadline { display: inline-block; color: var(--muted-color); font-size: 15px; white-space: nowrap; }
.market-select:disabled + .market-select-value { color: var(--muted-color); }
.market-select-control svg { position: absolute; inset-inline-end: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--accent-color); pointer-events: none; }
.empty-state { padding: 24px 0; color: var(--muted-color); font-size: 15px; line-height: 1.7; text-align: center; }
.site-footer { max-width: 680px; margin: 0 auto 32px; padding: 24px; border-top: 1px solid var(--divider-color); color: var(--muted-color); font-size: 13px; line-height: 1.7; text-align: center; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--accent-color); text-underline-offset: 3px; }
.site-footer a:hover { text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.candidates { list-style: none; margin: 0; padding: 0; }
.candidate {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--divider-color);
}
.candidate:last-child { border-bottom: 0; }
.portrait { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--portrait-background); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.candidate-name { font-size: 22px; font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.probability { direction: ltr; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.8px; }
.probability-range { white-space: nowrap; }
.probability-margin { color: var(--probability-margin-color); font-size: .65em; font-weight: 400; letter-spacing: normal; }
.feedback { display: flex; justify-content: center; }
.loading { width: 24px; height: 24px; margin: 24px; border: 2px solid var(--divider-color); border-top-color: var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; }
:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .loading, .refresh:disabled svg { animation: none; }
    .refresh { transition: none; }
}

@media (max-width: 540px) {
    .page { margin: 24px auto; padding: 0 20px; }
    .updates { margin-bottom: 28px; padding: 18px 16px 16px; border-radius: 16px; }
    .election-summary { margin-bottom: 28px; padding-bottom: 28px; }
    .market-select, .market-select-value { padding-inline-start: 14px; padding-inline-end: 40px; }
    .market-select-control svg { inset-inline-end: 12px; }
    .election-outcome { gap: 14px; padding: 16px; }
    .election-outcome dt { font-size: 18px; }
    .coalition-outcome, .election-outcome:has(.probability-range) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .coalition-outcome dd { justify-self: end; }
    .period-outcomes .election-outcome { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
    .period-outcomes dt { font-size: 16px; }
    .period-outcomes .probability { font-size: clamp(18px, 5vw, 26px); }
    .period-outcomes .market-link { min-width: 32px; font-size: 20px; }
    .candidate { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; padding: 20px 0; }
    .portrait { width: 56px; height: 56px; }
    .candidate-name { font-size: 18px; }
    .probability { font-size: 26px; }
}