/* /content/static/styles.css v1.01.20 */

/* Self-hosted so the page makes no third-party request and the CSP can stay
   at default-src 'self'. Archivo is a variable font - one file covers every
   weight. No unicode-range: glyphs a face lacks (the shekel sign among them)
   fall through to the next family in the stack, as they always did. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/archivo.woff2?v=1.01.20') format('woff2');
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-serif.woff2?v=1.01.20') format('woff2');
}

:root {
    --ink: #10212b;
    --muted: #64798a;
    --faint: #8296a4;
    --line: #e3eaee;
    --hair: #f0f4f6;
    --page: #f6f8f9;
    --surface: #ffffff;
    --accent: #0e6b80;
    --accent-soft: #e6f2f5;
    --track: #eef3f5;
    --gain: #0f7a52;
    --gain-soft: #eaf6f0;
    --loss: #b3321f;
    --loss-soft: #fbeceb;
    --low: #2b6f8a;
    --high: #a8562a;
    --carried: #b06a12;
    --carried-soft: #fdf3e3;
    --radius: 14px;
    --ui: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --figure: "Instrument Serif", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { height: 100%; }

/* Fixed three-row frame: header and footer never move, only the middle
   scrolls. min-height:0 on the middle is what makes it scroll rather than
   push the footer off-screen. */
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--ink);
    background: var(--page);
    font-family: var(--ui);
    -webkit-font-smoothing: antialiased;
}

.app-header,
.app-footer { flex: 0 0 auto; z-index: 1030; background: var(--surface); }
.app-header { border-bottom: 1px solid var(--line); }
.app-footer { border-top: 1px solid var(--line); }

.app-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 58px;
    padding-left: 16px;
    padding-right: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.brand-sub { font-size: 14px; color: var(--muted); }

.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status.is-live { color: var(--gain); background: var(--gain-soft); border-color: #cfe8dd; }
.status.is-loading { color: var(--muted); background: var(--track); border-color: var(--line); }
.status.is-empty { color: var(--carried); background: var(--carried-soft); border-color: #f2dfbe; }
.status.is-error { color: var(--loss); background: var(--loss-soft); border-color: #f3d3cf; }

.shell { max-width: 1480px; padding: 18px 16px 22px; }

/* ------------------------------------------------------------- toolbar */

.toolbar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 33, 43, 0.04), 0 8px 24px -16px rgba(16, 33, 43, 0.18);
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
    margin-bottom: 18px;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

/* segmented control: only the selected item is filled, so a hover can never
   be mistaken for the selection. */
.segmented { display: flex; align-items: center; gap: 4px; height: 44px; padding: 4px; background: var(--track); border-radius: 10px; }
.segmented .seg {
    appearance: none;
    border: 0;
    background: transparent;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #5e7382;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.segmented .seg:hover:not(.is-on) { background: rgba(255, 255, 255, 0.6); color: var(--accent); }
.segmented .seg:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented .seg.is-on { background: var(--surface); color: var(--accent); font-weight: 700; box-shadow: 0 1px 2px rgba(16, 33, 43, 0.10); }
.segmented.is-small { height: 32px; padding: 3px; border-radius: 8px; }
.segmented.is-small .seg { height: 26px; padding: 0 12px; font-size: 12px; border-radius: 6px; }

/* currency picker: a styled shell with the real <select> laid over it, so the
   native dropdown (and mobile picker) still does the work. */
.picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 12px 0 8px;
    border: 1px solid #d6e1e7;
    border-radius: 10px;
    background: var(--surface);
    min-width: 240px;
    color: var(--muted);
}
.picker:hover { border-color: var(--accent); }
.picker:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 107, 128, 0.14); }
.picker select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px; /* keeps iOS from zooming when the picker opens */
}
.picker-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.picker-code { font-size: 14px; font-weight: 700; color: var(--ink); }
.picker-name { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-caret { flex: 0 0 auto; margin-left: auto; }

.badge-cur {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    background: var(--accent-soft);
    color: var(--accent);
}
.badge-cur.is-text { font-size: 11px; letter-spacing: -0.02em; }
.badge-cur.is-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.badge-cur.is-sm.is-text { font-size: 10px; }

.stepper { display: flex; align-items: center; height: 44px; border: 1px solid #d6e1e7; border-radius: 10px; background: var(--surface); overflow: hidden; }
.stepper .step {
    appearance: none;
    border: 0;
    background: transparent;
    width: 38px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
}
.stepper .step:hover:not(:disabled) { background: var(--track); color: var(--accent); }
.stepper .step:disabled { color: #b4c2ca; cursor: default; }
.stepper .step:first-child { border-right: 1px solid var(--hair); }
.stepper .step:last-child { border-left: 1px solid var(--hair); }
.step-label {
    appearance: none;
    border: 0;
    background: transparent;
    height: 42px;
    min-width: 150px;
    padding: 0 12px;
    text-align: center;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
.step-label:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the datepicker is anchored in the field so it travels with the scroll */
#datePickerWrap { position: relative; }
#datePickerWrap .datepicker-dropdown { z-index: 1000; }

/* The picker theme ships Bootstrap 3 blue (#337ab7 / #286090) for the selected
   cell. Repaint it in the app's accent so the one teal carries all the way
   through, and make hover a soft tint rather than a second solid fill - the
   same rule the segmented controls follow, so a hover can never be mistaken
   for the selection. Scoped to the wrapper the picker is anchored in. */
#datePickerWrap .datepicker table tr td.active,
#datePickerWrap .datepicker table tr td.active.highlighted,
#datePickerWrap .datepicker table tr td span.active,
#datePickerWrap .datepicker table tr td span.active.disabled {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    text-shadow: none;
}

/* Pseudo-classes only here: `.active.active` would match every selected cell,
   not just a pressed one, and outrank the rule above. */
#datePickerWrap .datepicker table tr td.active:hover,
#datePickerWrap .datepicker table tr td.active:focus,
#datePickerWrap .datepicker table tr td.active:active,
#datePickerWrap .datepicker table tr td span.active:hover,
#datePickerWrap .datepicker table tr td span.active:focus,
#datePickerWrap .datepicker table tr td span.active:active {
    background-color: #0a505f;
    border-color: #0a505f;
    color: #ffffff;
}

#datePickerWrap .datepicker table tr td span:hover:not(.active):not(.disabled),
#datePickerWrap .datepicker table tr td span.focused:not(.active),
#datePickerWrap .datepicker .datepicker-switch:hover,
#datePickerWrap .datepicker .prev:hover,
#datePickerWrap .datepicker .next:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ------------------------------------------------------------- panels */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 0; }
.panel-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.panel-title h2 { margin: 0; font-size: 15px; font-weight: 700; }
.panel-title span { font-size: 12px; color: var(--muted); }
.panel-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legend-avg { width: 14px; height: 0; border-top: 2px dashed #b4c2ca; display: block; }
.legend-carried { width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 1.6px solid var(--carried); display: block; }

/* ------------------------------------------------------------- hero */

.hero { padding: 18px 20px 0; margin-bottom: 16px; }
.hero-top { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.hero-figure { display: flex; flex-direction: column; gap: 2px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.hero-rate { display: flex; align-items: baseline; gap: 12px; font-family: var(--figure); font-size: 64px; line-height: 1.05; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
/* Instrument Serif carries no shekel sign, so the unit renders from a stack
   that does rather than falling through to a missing-glyph box. */
.hero-unit { font-family: Archivo, "Segoe UI", Arial, "Helvetica Neue", sans-serif; font-size: 20px; color: var(--muted); }
.hero-change { display: flex; flex-direction: column; gap: 6px; padding-top: 22px; }
.hero-since { font-size: 12px; color: var(--muted); padding-left: 2px; }
.hero-spark { margin-left: auto; padding-top: 24px; }
.hero-spark svg { display: block; }

.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 5px 10px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--track); color: var(--muted); }
.chip.is-up { background: var(--gain-soft); color: var(--gain); }
.chip.is-down { background: var(--loss-soft); color: var(--loss); }
.chip .pct { font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--hair); }
.stat { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px 15px; border-left: 1px solid var(--hair); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.stat-value { font-size: 21px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-value.is-low { color: var(--low); }
.stat-value.is-high { color: var(--high); }
.stat-value.is-carried { color: var(--carried); }
.stat small { font-size: 11px; color: var(--faint); }

/* ------------------------------------------------------------- layout */

/* The currency view puts the chart and the whole period of values side by side,
   so both are on screen at once and the page itself does not scroll to reach
   the table. */
#dataView {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr);
    grid-template-areas: "hero hero" "chart values";
    gap: 16px;
}
#dataView .hero { grid-area: hero; margin-bottom: 0; }
#dataView .chart-panel { grid-area: chart; }
#dataView .values-panel { grid-area: values; margin-bottom: 0; }
#dataView #chartContainer { height: 360px; }
/* Deliberately dense: a full 31-day month is 16 two-up rows, and they have to
   sit beside the chart without either one scrolling. */
#dataView .table-scroll { max-height: none; padding: 2px 8px 8px; }
#dataView table.grid td {
    padding: 3px 10px;
    font-size: 12.5px;
    line-height: 1.3;
}
#dataView table.grid th { padding: 4px 10px; font-size: 10px; }
#dataView table.grid td:first-child { color: var(--muted); }
#dataView .panel-head { padding: 12px 16px 0; }

/* the headline block gives up height too, so the pair below it fits */
#dataView .hero { padding: 14px 18px 0; }
#dataView .hero-rate { font-size: 46px; }
#dataView .hero-change { padding-top: 12px; }
#dataView .hero-spark { padding-top: 12px; }
#dataView .stats { margin-top: 10px; }
#dataView .stat { padding: 8px 14px 10px; }
#dataView .stat:first-child { padding-left: 0; }
#dataView .stat-value { font-size: 18px; }

/* the all-currencies view is a plain stack: trends, then the numbers */
#allView { display: grid; gap: 16px; }

/* the divider between the two halves of the month */
table.grid th.split-col,
table.grid td.split-col { border-left: 1px solid var(--line); padding-left: 14px; }
table.grid td.split-col { text-align: left; color: var(--muted); }
.chart-panel { display: flex; flex-direction: column; padding-bottom: 12px; }
#chartContainer { width: 100%; height: 340px; padding: 8px 14px 0; }
#chartContainer canvas { width: 100% !important; height: 100% !important; }

/* ------------------------------------------------------------- cards */

/* Auto-fill rather than a fixed column count: the card list is however many
   currencies the payload happens to carry, and that is not ours to decide. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 8px; padding: 14px 16px 18px; }
.card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.card:hover { background: var(--page); border-color: #c9d8df; }
.card.is-on { background: #f2f8fa; border-color: var(--accent); }
.card:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.card-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.card-code { font-size: 13px; font-weight: 700; color: var(--ink); }
.card-name { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.card-spark { margin-left: auto; flex: 0 0 auto; }
.card-spark svg { display: block; }
.card-figures { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; flex: 0 0 auto; min-width: 62px; }
.card-rate { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-chg { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.card-chg.is-up { color: var(--gain); }
.card-chg.is-down { color: var(--loss); }

/* ------------------------------------------------------------- tables */

.values-panel { padding-bottom: 6px; }
.table-scroll { overflow-x: auto; overflow-y: auto; max-height: 420px; padding: 8px 8px 10px; }
.table-scroll.is-matrix { max-height: none; }

table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
table.grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: right;
    white-space: nowrap;
}
table.grid th:first-child { text-align: left; }
table.grid td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; }
table.grid td:first-child { text-align: left; color: var(--muted); }
table.grid tbody tr:hover td { background: var(--page); }
table.grid tbody tr:last-child td { border-bottom: 0; }

.cell-rate { font-weight: 700; color: var(--ink); }
.cell-low { color: var(--low); font-weight: 700; }
.cell-high { color: var(--high); font-weight: 700; }
.cell-avg { font-weight: 700; }
.cell-empty { color: #b4c2ca; }
/* A day carried forward from an earlier date is not a rate published for that
   day, so it is marked - by colour alone, no trailing glyph. The hover title
   still names the day it was carried from. */
.is-carried-cell { color: var(--carried); }
/* the date column is muted by default and that rule is more specific, so it
   has to be beaten explicitly - otherwise only half the entry reads as
   carried over, which matters now that colour is the only marker */
table.grid td.is-carried-cell,
#dataView table.grid td.is-carried-cell { color: var(--carried); }
tr.is-carried-row td:first-child { color: var(--carried); }

/* the matrix keeps the date column pinned while the currencies scroll */
table.grid.is-matrix th:first-child,
table.grid.is-matrix td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    border-right: 1px solid var(--line);
}
table.grid.is-matrix th:first-child { z-index: 3; }
table.grid.is-matrix tbody tr:hover td:first-child { background: var(--page); }
.matrix-head { display: inline-flex; align-items: center; gap: 6px; }
.matrix-head .badge-cur { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
.matrix-head .badge-cur.is-text { font-size: 9px; }

/* ------------------------------------------------------------- misc */

.alerts { margin-top: 16px; }
.alerts .alert { border-radius: 10px; font-size: 13px; }
.alerts .alert:last-child { margin-bottom: 0; }

.app-footer .bar { height: auto; padding-top: 11px; padding-bottom: 11px; font-size: 12px; color: var(--muted); }
.app-footer .bar > :first-child { justify-self: start; }
.clock { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.app-footer a { color: var(--accent); }

@media (max-width: 1199.98px) {
    /* too narrow for the chart and a two-up month side by side: stack them */
    #dataView {
        display: block;
    }
    #dataView .hero { margin-bottom: 16px; }
    #dataView .chart-panel { margin-bottom: 16px; }
    #dataView #chartContainer { height: 300px; }
}

@media (max-width: 991.98px) {
    .shell { padding: 14px 12px 18px; }
    .toolbar { padding: 12px; }
    .field { flex: 1 1 200px; }
    .segmented { width: 100%; }
    .segmented .seg { flex: 1 1 0; padding: 0 8px; }
    .picker { min-width: 0; width: 100%; }
    .stepper { width: 100%; }
    .step-label { flex: 1 1 auto; min-width: 0; }
    .hero-rate { font-size: 52px; }
    .hero-spark { display: none; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { border-left: 0; padding-left: 0; padding-right: 12px; border-top: 1px solid var(--hair); }
    .stats .stat:nth-child(1),
    .stats .stat:nth-child(2) { border-top: 0; }
    #chartContainer { height: 260px; padding: 8px 4px 0; }
    .panel-head { padding: 14px 14px 0; }
    .hero { padding: 16px 14px 0; }
}

@media (max-width: 575.98px) {
    .brand-sub { display: none; }
    .hero-rate { font-size: 44px; }
    .stat-value { font-size: 18px; }
    .app-footer .bar { flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
}