/* ==========================================================================
   Home page — design tokens on top of Bootstrap 5.3 (light + dark).
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --hp-bg: #f3f4f1;
    --hp-surface: #fcfcfb;
    --hp-surface-2: #f4f4f1;
    --hp-border: #e3e2dd;
    --hp-ink: #0b0b0b;
    --hp-ink-2: #52514e;
    --hp-ink-3: #75746f;
    --hp-accent: #2a78d6;
    --hp-accent-soft: #e4eefb;
    --hp-up: #2a78d6;      /* diverging pole: gain  (blue, CVD-safe vs red) */
    --hp-down: #e34948;    /* diverging pole: loss */
    --hp-ma: #eb6834;      /* categorical slot 2 */
    --hp-volume: #c9c8c2;
    --hp-grid: #efeee9;
    --hp-new: #2a78d6;
    --hp-shadow: 0 1px 2px rgba(20, 20, 10, .04), 0 4px 16px rgba(20, 20, 10, .04);

    --bs-body-bg: var(--hp-bg);
    --bs-body-color: var(--hp-ink);
    --bs-secondary-color: var(--hp-ink-2);
    --bs-border-color: var(--hp-border);
    --bs-link-color-rgb: 26, 92, 171;
    --bs-link-hover-color-rgb: 13, 54, 107;
}

[data-bs-theme="dark"] {
    --hp-bg: #121211;
    --hp-surface: #1a1a19;
    --hp-surface-2: #222220;
    --hp-border: #2f2f2c;
    --hp-ink: #ffffff;
    --hp-ink-2: #c3c2b7;
    --hp-ink-3: #97968e;
    --hp-accent: #3987e5;
    --hp-accent-soft: #1c2c42;
    --hp-up: #3987e5;
    --hp-down: #e66767;
    --hp-ma: #d95926;
    --hp-volume: #45453f;
    --hp-grid: #262624;
    --hp-new: #6da7ec;
    --hp-shadow: 0 1px 2px rgba(0, 0, 0, .3);

    --bs-body-bg: var(--hp-bg);
    --bs-body-color: var(--hp-ink);
    --bs-secondary-color: var(--hp-ink-2);
    --bs-border-color: var(--hp-border);
    --bs-link-color-rgb: 134, 182, 239;
    --bs-link-hover-color-rgb: 183, 211, 246;
}

html { color-scheme: light; }
html[data-bs-theme="dark"] { color-scheme: dark; }

body {
    background: var(--hp-bg);
    color: var(--hp-ink);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: .925rem;
    -webkit-font-smoothing: antialiased;
}

.num, .local-time, .price, .city-time { font-variant-numeric: tabular-nums; }

/* ---- Header ---------------------------------------------------------------- */

.app-header {
    position: sticky; top: 0; z-index: 20;
    padding: .7rem 0;
    background: color-mix(in srgb, var(--hp-surface) 85%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--hp-border);
}
.avatar {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: var(--hp-accent); color: #fff; font-weight: 700; letter-spacing: .02em;
}
.app-title { font-size: 1.15rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.local-time { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.local-time .sec { color: var(--hp-ink-3); font-size: .9rem; margin-left: 1px; }
.btn-icon {
    width: 38px; height: 38px; border-radius: 10px; padding: 0;
    border: 1px solid var(--hp-border); background: var(--hp-surface); color: var(--hp-ink-2);
}
.btn-icon:hover { background: var(--hp-surface-2); color: var(--hp-ink); }

/* ---- Panels ---------------------------------------------------------------- */

.panel {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: 14px;
    box-shadow: var(--hp-shadow);
    overflow: hidden;
    display: flex; flex-direction: column;
    min-width: 0;
}
.panel-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .8rem 1rem .6rem;
}
.panel-head h2 { white-space: nowrap; font-size: .95rem; font-weight: 650; margin: 0; letter-spacing: -.005em; }
.panel-head h2 .bi { color: var(--hp-accent); margin-right: .35rem; }
.panel-meta { color: var(--hp-ink-3); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-body.scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* ---- World clock ----------------------------------------------------------- */

.world-map {
    position: relative;
    aspect-ratio: 2 / 1;
    margin: 0 1rem;
    border-radius: 10px;
    overflow: hidden;
    background: #0d2033;
}
.world-map > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-map img { object-fit: cover; }
.world-map svg { overflow: visible; }
.world-map .coast { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .45; vector-effect: non-scaling-stroke; }
.world-map .border { fill: none; stroke: rgba(255,255,255,.22); stroke-width: .35; vector-effect: non-scaling-stroke; }
.world-map .city-dot { fill: #fff; stroke: rgba(0,0,0,.55); stroke-width: 1; }
.world-map .city-dot.local { fill: #86b6ef; stroke: #fff; }
.world-map .city-label rect { fill: rgba(10, 12, 16, .72); }
.world-map .city-label text { fill: #fff; font-size: 8.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.world-map .sun { fill: #ffd166; stroke: rgba(255, 209, 102, .35); stroke-width: 5; }

.city-strip {
    list-style: none; margin: 0; padding: .75rem 1rem 1rem;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
}
.city-strip li {
    background: var(--hp-surface-2); border-radius: 10px; padding: .45rem .6rem;
    border: 1px solid transparent;
}
.city-strip li.local { border-color: var(--hp-accent); }
.city-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem; }
.city-main { min-width: 0; }
.city-wx { text-align: right; flex: none; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wx-now { font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.wx-now .bi { font-size: 1.15rem; margin-right: .25rem; vertical-align: -2px; color: var(--hp-ink-2); }
.wx-now .bi.is-day.bi-sun, .wx-now .bi.is-day.bi-cloud-sun, .wx-now .bi.is-day.bi-cloud-sun-fill { color: #e0a100; }
.wx-now .bi.is-night { color: #7f8fb5; }
.wx-range { font-size: .7rem; color: var(--hp-ink-3); white-space: nowrap; margin-top: .1rem; }
.wx-rain { font-size: .68rem; color: var(--hp-ink-3); white-space: nowrap; }
.wx-rain .bi { color: #3987e5; margin-right: .1rem; }
.city-name { font-size: .75rem; color: var(--hp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city-time { font-size: 1.1rem; font-weight: 600; line-height: 1.2; }
.city-sub { font-size: .7rem; color: var(--hp-ink-3); white-space: nowrap; }
.city-sub .bi-sun-fill { color: #e0a100; }
.city-sub .bi-moon-stars-fill { color: #7f8fb5; }
.city-sun {
    display: flex; flex-wrap: wrap; gap: 0 .55rem; margin-top: .25rem; padding-top: .25rem;
    border-top: 1px solid var(--hp-border);
    font-size: .7rem; color: var(--hp-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.city-sun .bi { color: #e0a100; font-size: .95rem; line-height: 0; vertical-align: -2px; margin-right: -.05rem; }
.city-sun .bi-moon { color: #7f8fb5; }

/* ---- Holidays -------------------------------------------------------------- */

.holidays-panel { flex: 1 1 auto; min-height: 320px; }
.holidays { flex: 1 1 0; min-height: 0; padding: 0 .5rem .6rem; }
.hol-day {
    position: sticky; top: 0; z-index: 1;
    background: var(--hp-surface);
    font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
    color: var(--hp-ink-3); padding: .55rem .5rem .3rem;
}
.hol-day .count { font-weight: 500; text-transform: none; letter-spacing: 0; }
.hol-row {
    display: grid; grid-template-columns: 22px minmax(0, 9rem) minmax(0, 1fr); gap: .6rem; align-items: center;
    padding: .32rem .5rem; border-radius: 8px;
}
.hol-row:hover { background: var(--hp-surface-2); }
.hol-row .fi { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.hol-city { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hol-city small { display: block; font-weight: 400; color: var(--hp-ink-3); font-size: .72rem; }
.hol-reason { color: var(--hp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--hp-ink-3); padding: 1rem; text-align: center; }

/* ---- News ------------------------------------------------------------------ */

.news-toolbar {
    display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center;
    padding: 0 1rem .6rem; border-bottom: 1px solid var(--hp-border);
}
.chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 auto; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--hp-border); background: var(--hp-surface);
    color: var(--hp-ink-2); border-radius: 999px;
    padding: .2rem .6rem .2rem .35rem; font-size: .8rem; line-height: 1.2;
    transition: background-color .12s, border-color .12s, color .12s;
}
.chip:hover { background: var(--hp-surface-2); color: var(--hp-ink); }
.chip[aria-pressed="true"] { background: var(--hp-accent-soft); border-color: var(--hp-accent); color: var(--hp-ink); }
.chip .count { color: var(--hp-ink-3); font-variant-numeric: tabular-nums; font-size: .72rem; }
.chip.all { padding-left: .6rem; }
.chip .bi-check2 { color: var(--hp-accent); margin-left: -.1rem; }
.news-search { position: relative; flex: 0 1 220px; min-width: 160px; }
.news-search .bi { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--hp-ink-3); font-size: .8rem; }
.news-search input { padding-left: 1.8rem; border-radius: 999px; background: var(--hp-surface-2); border-color: var(--hp-border); }

.feed-icon {
    width: 16px; height: 16px; flex: none; border-radius: 4px; object-fit: contain;
}
.feed-badge {
    width: 16px; height: 16px; flex: none; border-radius: 4px;
    display: inline-grid; place-items: center;
    background: var(--hp-surface-2); color: var(--hp-ink-2); font-size: 10px; font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--hp-border);
}

.news-list { list-style: none; margin: 0; padding: .25rem .5rem .5rem; height: 460px; }
.news-item {
    display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: .65rem; align-items: start;
    padding: .5rem .5rem; border-radius: 8px;
}
.news-item + .news-item { border-top: 1px solid var(--hp-grid); }
.news-item:hover { background: var(--hp-surface-2); }
.news-item .feed-icon, .news-item .feed-badge { margin-top: 3px; }
.news-item a { color: var(--hp-ink); text-decoration: none; font-weight: 500; line-height: 1.35; }
.news-item a:hover { text-decoration: underline; text-underline-offset: 2px; }
.news-item a:visited { color: var(--hp-ink-2); }
.news-src { font-size: .75rem; color: var(--hp-ink-3); margin-top: .1rem; }
.news-time { font-size: .75rem; color: var(--hp-ink-3); white-space: nowrap; margin-top: 2px; }
.news-item.is-new .news-time::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--hp-new); margin-right: .35rem; vertical-align: 1px;
}
mark { padding: 0 .1em; border-radius: 3px; background: color-mix(in srgb, var(--hp-accent) 22%, transparent); color: inherit; }

/* ---- AI briefing ---------------------------------------------------------- */

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .4rem; vertical-align: 1px; }
.status-dot.online { background: #0ca30c; }
.status-dot.offline { background: #d03b3b; }

.briefing {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem;
    padding: 0 1rem 1rem;
}
.brief-card {
    background: var(--hp-surface-2); border-radius: 10px; padding: .6rem .75rem .65rem;
    display: flex; flex-direction: column; gap: .3rem; min-width: 0;
}
.brief-card.is-muted { opacity: .75; }
.brief-head { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--hp-ink-3); }
.brief-src { font-weight: 600; color: var(--hp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-time::before { content: "·"; margin-right: .45rem; }
.brief-refresh {
    margin-left: auto; border: 0; background: none; color: var(--hp-ink-3);
    width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; padding: 0;
}
.brief-refresh:hover:not(:disabled) { background: var(--hp-surface); color: var(--hp-ink); }
.brief-refresh:disabled { opacity: .5; }
.brief-refresh.spinning .bi { animation: hp-spin 1s linear infinite; display: inline-block; }
@keyframes hp-spin { to { transform: rotate(360deg); } }
.brief-headline { font-size: .92rem; font-weight: 650; line-height: 1.3; margin: 0; letter-spacing: -.005em; }
.brief-summary { font-size: .82rem; color: var(--hp-ink-2); margin: 0; line-height: 1.45; }
.brief-sources { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.brief-sources li { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hp-ink-3); }
.brief-sources li::before { content: "↗"; margin-right: .3rem; }
.brief-sources a { color: var(--hp-ink-3); text-decoration: none; }
.brief-sources a:hover { color: var(--hp-ink); text-decoration: underline; }
.brief-warn { font-size: .7rem; color: var(--hp-ink-3); }
.brief-card .placeholder-glow { display: flex; flex-direction: column; gap: .35rem; padding-top: .2rem; }
.brief-card .placeholder { border-radius: 4px; }

/* ---- Markets --------------------------------------------------------------- */

.watchlist {
    display: flex; gap: .5rem; overflow-x: auto; padding: 0 1rem .75rem;
    scrollbar-width: thin; scroll-snap-type: x proximity;
}
.tile {
    flex: 0 0 132px; scroll-snap-align: start;
    text-align: left; border: 1px solid var(--hp-border); background: var(--hp-surface);
    border-radius: 10px; padding: .45rem .6rem .35rem; color: var(--hp-ink);
    transition: background-color .12s, border-color .12s;
}
.tile:hover { background: var(--hp-surface-2); }
.tile[aria-selected="true"] { border-color: var(--hp-accent); background: var(--hp-accent-soft); }
.tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: .3rem; }
.tile-sym { font-weight: 700; font-size: .85rem; letter-spacing: .01em; }
.tile-px { font-size: .8rem; color: var(--hp-ink-2); font-variant-numeric: tabular-nums; }
.tile-chg { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--hp-ink-2); }
.tile svg { display: block; width: 100%; height: 26px; margin-top: .15rem; }
.tile svg .line { fill: none; stroke: var(--hp-ink-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tile svg .area { opacity: .12; }

.tile.stale .tile-px, .tile.stale .tile-chg { opacity: .55; }
.stale-note {
    display: inline-flex; gap: .35rem; align-items: center; margin: .15rem 0 .1rem;
    font-size: .75rem; color: var(--hp-ink); background: color-mix(in srgb, #fab219 22%, transparent);
    border-radius: 6px; padding: .1rem .45rem;
}
.stale-note .bi { color: #b37a00; }
.arrow-up { color: var(--hp-up); }
.arrow-down { color: var(--hp-down); }

.chart-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem;
    padding: .25rem 1rem .5rem; border-top: 1px solid var(--hp-border); padding-top: .75rem;
}
.quote .sym { font-size: 1.05rem; font-weight: 700; margin-right: .5rem; }
.quote .price { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; }
.quote .chg { font-size: .85rem; color: var(--hp-ink-2); margin-left: .5rem; font-variant-numeric: tabular-nums; }
.quote .sub { font-size: .75rem; color: var(--hp-ink-3); }
.btn-group .btn { --bs-btn-padding-x: .6rem; font-variant-numeric: tabular-nums; }
.btn-outline-secondary { --bs-btn-color: var(--hp-ink-2); --bs-btn-border-color: var(--hp-border); --bs-btn-hover-bg: var(--hp-surface-2); --bs-btn-hover-color: var(--hp-ink); --bs-btn-hover-border-color: var(--hp-border); --bs-btn-active-bg: var(--hp-accent-soft); --bs-btn-active-color: var(--hp-ink); --bs-btn-active-border-color: var(--hp-accent); }
.form-check-input:checked { background-color: var(--hp-accent); border-color: var(--hp-accent); }

.chart-wrap { position: relative; height: 420px; padding: 0 .5rem .5rem 1rem; }
.chart { position: absolute; inset: 0 .5rem .5rem 1rem; transition: opacity .15s; }
.chart.loading { opacity: .45; }
.chart-legend {
    position: absolute; z-index: 3; left: 1.4rem; top: .35rem; pointer-events: none;
    font-size: .75rem; color: var(--hp-ink-2); font-variant-numeric: tabular-nums;
    display: flex; flex-wrap: wrap; gap: .15rem .7rem; max-width: calc(100% - 7rem);
    background: color-mix(in srgb, var(--hp-surface) 80%, transparent); border-radius: 6px; padding: .15rem .35rem;
}
.chart-legend b { color: var(--hp-ink); font-weight: 600; }
.chart-legend .swatch { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: .3rem; background: var(--hp-ma); }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hp-ink-3); }

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 575.98px) {
    .app-header { padding: .5rem 0; }
    .app-title { white-space: nowrap; font-size: 1.05rem; }
    .demo-badge .label { display: none; }
    .container-xxl { --bs-gutter-x: 2rem; }
    .panel-head { padding: .7rem .8rem .5rem; }
    .world-map { margin: 0 .8rem; }
    .city-strip { padding: .6rem .8rem .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-toolbar, .watchlist, .chart-head { padding-left: .8rem; padding-right: .8rem; }
    .news-search { flex: 1 1 100%; }
    .news-list { height: 60vh; }
    .holidays { max-height: 420px; flex-basis: auto; }
    .hol-row { grid-template-columns: 22px minmax(0, 7rem) minmax(0, 1fr); }
    .chart-wrap { height: 340px; padding-left: .5rem; }
    .chart { left: .5rem; }
    .chart-legend { left: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}