/*
 * Durvog.xyz — market intelligence
 *
 * The market section is the one place on the site that publishes a number of
 * its own rather than relaying what a citizen said. So it is dressed to be
 * read the way a financial page is read: one dominant figure, its movement
 * beside it, and — always — how much data stands behind it.
 *
 * Loaded only on the market pages, on top of durvog.css.
 */

/* ------------------------------------------------------------- headline */

.mkt-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 1.75rem;
    align-items: center;
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background:
        radial-gradient(900px 320px at 12% -20%, color-mix(in srgb, var(--green-500) 12%, transparent), transparent 62%),
        linear-gradient(160deg, var(--surface), var(--ground));
    box-shadow: var(--shadow);
}

.mkt-head__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--green-700);
}
.mkt-head__eyebrow i { font-size: .7rem; }

/* The index itself. Tabular figures so the digits do not shuffle sideways
   when the number changes. */
.mkt-index {
    display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
    margin: .5rem 0 .25rem;
}
.mkt-index__value {
    font-size: clamp(2.6rem, 6vw, 3.8rem);
    font-weight: 800; line-height: 1; letter-spacing: -.03em;
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.mkt-index__unit { font-size: .95rem; color: var(--muted); font-weight: 600; }

.mkt-move {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .7rem; border-radius: 999px;
    font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.mkt-move--up { background: var(--red-100); color: var(--red-600); }
.mkt-move--down { background: var(--green-100); color: var(--green-700); }
.mkt-move--flat { background: var(--line-soft); color: var(--muted); }

.mkt-head__note { font-size: .88rem; color: var(--ink-2); margin: .5rem 0 0; max-width: 46ch; }

/* The basket cost, shown as the human translation of the index. */
.mkt-basket {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.15rem;
    box-shadow: var(--shadow);
}
.mkt-basket__label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.mkt-basket__value {
    font-size: 2rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--green-700); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.mkt-basket__meta { font-size: .8rem; color: var(--muted); margin-top: .3rem; }

/* ---------------------------------------------------------- data health */

/* How much the reader should trust the figure above. This is the piece most
   price trackers leave out, and the reason to believe the rest. */
.mkt-trust {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: .9rem;
    border-top: 1px dashed var(--line);
    font-size: .82rem; color: var(--muted);
}
.mkt-trust__pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-weight: 700; font-size: .78rem;
}
.mkt-trust__pill--green { background: var(--green-100); color: var(--green-800); }
.mkt-trust__pill--amber { background: var(--amber-100); color: var(--notice-ink, #92400e); }
.mkt-trust__pill--grey { background: var(--line-soft); color: var(--muted); }

.mkt-coverage {
    flex: 1; min-width: 120px; max-width: 220px;
    height: 5px; border-radius: 999px; background: var(--line-soft); overflow: hidden;
}
.mkt-coverage span { display: block; height: 100%; border-radius: 999px; background: var(--green-500); }

/* -------------------------------------------------------------- movers */

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

.mkt-mover {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
}
.mkt-mover:last-child { border-bottom: 0; }
.mkt-mover__name { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; }
.mkt-mover__name small { display: block; color: var(--muted); font-weight: 400; font-size: .76rem; }
.mkt-mover__price { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.mkt-mover__delta { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .85rem; white-space: nowrap; }
.mkt-mover__delta--up { color: var(--red-600); }
.mkt-mover__delta--down { color: var(--green-700); }

/* --------------------------------------------------------------- board */

.mkt-board { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mkt-board th {
    text-align: start; padding: .6rem .8rem;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 800;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.mkt-board td { padding: .7rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.mkt-board tbody tr:hover { background: var(--green-50); }
.mkt-board .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt-board__name { font-weight: 700; color: var(--ink); }
.mkt-board__name small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }

.mkt-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.mkt-delta--up { color: var(--red-600); }
.mkt-delta--down { color: var(--green-700); }
.mkt-delta--flat { color: var(--muted); }

/* The spread between the cheapest and dearest report — a wide bar is itself
   information: it means the same thing costs very different amounts nearby. */
.mkt-range { display: flex; align-items: center; gap: .4rem; min-width: 120px; }
.mkt-range__track { flex: 1; height: 4px; border-radius: 999px; background: var(--line-soft); position: relative; }
.mkt-range__fill { position: absolute; inset-block: 0; border-radius: 999px; background: var(--green-500); opacity: .55; }
.mkt-range__text { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mkt-reports {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.mkt-reports i { font-size: .7rem; }

.mkt-tag-basket {
    display: inline-block; margin-inline-start: .35rem;
    font-size: .66rem; font-weight: 800; letter-spacing: .04em;
    color: var(--green-700); background: var(--green-100);
    padding: .05rem .35rem; border-radius: 4px; vertical-align: middle;
}

/* --------------------------------------------------------------- chart */

.mkt-chart { width: 100%; height: 260px; display: block; }
.mkt-chart .line { fill: none; stroke: var(--green-600); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mkt-chart .area { fill: var(--green-500); opacity: .12; }
.mkt-chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.mkt-chart .dot { fill: var(--surface); stroke: var(--green-600); stroke-width: 2; }
.mkt-chart .label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.mkt-chart-empty {
    height: 260px; display: grid; place-items: center;
    color: var(--muted); font-size: .9rem; text-align: center;
    border: 1px dashed var(--line); border-radius: var(--radius-sm);
}

/* ------------------------------------------------------- market compare */

.mkt-place {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem 0; border-bottom: 1px solid var(--line-soft);
}
.mkt-place:last-child { border-bottom: 0; }
.mkt-place__rank {
    width: 24px; height: 24px; flex: none; border-radius: 999px;
    display: grid; place-items: center; font-size: .72rem; font-weight: 800;
    background: var(--line-soft); color: var(--muted);
}
.mkt-place--best .mkt-place__rank { background: var(--green-100); color: var(--green-800); }
.mkt-place--worst .mkt-place__rank { background: var(--red-100); color: var(--red-600); }
.mkt-place__name { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; }
.mkt-place__name small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }
.mkt-place__price { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------- disclosure */

.mkt-method {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1rem 1.15rem;
    font-size: .86rem; color: var(--ink-2); line-height: 1.7;
}
.mkt-method h3 { font-size: .95rem; margin-bottom: .4rem; }
.mkt-method code {
    background: var(--line-soft); padding: .1rem .35rem; border-radius: 4px;
    font-size: .82rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .mkt-head { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
    .mkt-movers { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .mkt-index__value { font-size: 2.4rem; }
    .mkt-basket__value { font-size: 1.6rem; }

    /* The board keeps its columns and scrolls, rather than collapsing into
       something that can no longer be compared down a column. */
    .mkt-board-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mkt-board { min-width: 620px; }
}

/* -------------------------------------------------- long-term index chart */
/* The base line is the reference the whole series is read against, so it is
   drawn solid and darker than the gridlines it sits among. */
.mkt-chart--index .base { stroke: var(--muted); stroke-width: 1.5; opacity: .55; }
.mkt-chart--index .label--base { fill: var(--muted); font-size: 10px; letter-spacing: .04em; }

.mkt-history__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.mkt-history__level { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.mkt-history__since { color: var(--muted); font-size: .85rem; }

.mkt-weeks { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .9rem; }
.mkt-weeks__cell {
    font-size: .72rem; padding: .2rem .45rem; border-radius: 4px;
    background: var(--surface-2); border: 1px solid var(--line);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mkt-weeks__cell--up { color: var(--red-600); border-color: color-mix(in srgb, var(--red-600) 30%, var(--line)); }
.mkt-weeks__cell--down { color: var(--green-700); border-color: color-mix(in srgb, var(--green-600) 30%, var(--line)); }