/* Car market side project: the dashboard as the review board at full width (tabs on a near-white sheet,
   views ruled rather than boxed), plus the SVG chart kit shared with the project page. Colors are site tokens. */

/* ---------- charts ---------- */
.chart { position: relative; margin-top: 14px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .tick { font: 400 13px var(--text); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--dv-grid); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--c); fill-opacity: .1; stroke: none; }
.chart .col { fill: var(--dv-soft); }
.chart .col.is-hi { fill: var(--dv-1); }
.chart .col.is-up { fill: var(--dv-up); }
.chart .col.is-down { fill: var(--dv-down); }
.chart .break { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.chart .guide { stroke: var(--muted); stroke-width: 1; opacity: 0; }
.chart .guide.is-on { opacity: .55; }
.chart .dot { fill: var(--c); stroke: var(--sheet); stroke-width: 2; opacity: 0; }
.chart .dot.is-on { opacity: 1; }
.chart .hit { fill: transparent; }
.chart .hit:focus, .chart g:focus { outline: none; }
.chart .hit:focus-visible { stroke: var(--focus); stroke-width: 2; }
.chart g:focus-visible .col { stroke: var(--focus); stroke-width: 2; }
.chart .line.is-drawing { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-draw 1600ms var(--ease-out) 120ms forwards; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
.chart-tip {
  position: absolute; z-index: 5; min-width: 156px; padding: 10px 12px; pointer-events: none;
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: 8px;
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 18px 36px -18px rgb(var(--shadow-rgb) / calc(var(--shadow-a) + .12));
  color: var(--ink); font-size: 14px; line-height: 1.45; white-space: nowrap; opacity: 0; transition: opacity 120ms ease;
}
.chart-tip.is-on { opacity: 1; }
.tip-date { margin-bottom: 4px; color: var(--muted); font-weight: 500; }
.tip-row { display: flex; align-items: center; gap: 8px; }
.tip-row i { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.tip-row b { margin-left: auto; padding-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- dashboard band ---------- */
.opening.dash-opening { padding: 14px 0 76px; }
.dash-head { min-width: 0; }
.dash-head .back-link { margin-bottom: 4px; }
.dash-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.dash-title { font: 800 clamp(34px, 9.4vw, 44px)/1.05 var(--display); letter-spacing: -.02em; }
.dash-lead { margin-top: 12px; max-width: 62ch; color: var(--body); font-size: 18px; line-height: 1.5; }
.dash-lang button { min-height: 40px; }
.dash-sources { display: flex; flex-wrap: wrap; gap: 8px; min-height: 28px; margin-top: 16px; }
.dash-sources .date-tag { gap: 8px; min-height: 30px; padding: 0 10px; background: var(--sheet); border-color: var(--line-strong); }
.dash-sources .src-when { color: var(--body); font-weight: 400; }
.src-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--co-success); }
.dash-sources .is-stale .src-dot { background: var(--co-warning); }

/* ---------- the board ---------- */
.dash-wrap { position: relative; margin-top: -52px; padding-bottom: 56px; }
.dash-board {
  --dash-pad: 18px;
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: 8px;
  box-shadow: var(--sheet-lift), 0 1px 2px rgb(var(--shadow-rgb) / .05), 0 24px 48px -30px rgb(var(--shadow-rgb) / var(--shadow-a));
}
.dash-tabs { position: relative; display: flex; gap: 2px; height: 56px; padding: 0 calc(var(--dash-pad) - 12px); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 12px 2px;
  color: var(--muted); font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 160ms ease;
}
.dash-tab:hover { color: var(--ink); }
.dash-tab[aria-current] { color: var(--link); font-weight: 600; }
.dash-tab:focus-visible { outline-offset: -3px; }
.dash-tab-count { display: none; padding: 2px 8px; border-radius: 99px; background: var(--tint); color: var(--body); font-size: 13.5px; font-weight: 500; }
.dash-tab-count:empty { display: none !important; }
.dash-tab-indicator { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--orange); transform-origin: left center; transform: scaleX(0); transition: transform 420ms var(--ease-out); pointer-events: none; }
.dash-panel { padding: 22px var(--dash-pad) 28px; min-height: 70vh; }
.dash-panel:focus { outline: none; }
.dash-noscript { color: var(--body); }
.dash-noscript a { color: var(--link); }

/* view head: title and subtitle, then the period and export controls */
.dash-view-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.dash-view-text { min-width: 0; }
.dash-view-title { font: 700 clamp(26px, 6.6vw, 32px)/1.15 var(--display); letter-spacing: -.018em; color: var(--ink); }
.dash-view-sub { margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.45; }
.dash-view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dash-seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.dash-seg button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--body); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background-color 180ms ease, color 180ms ease; }
.dash-seg button[aria-pressed="true"] { background: var(--resume); color: var(--resume-ink); }
.dash-seg button:not([aria-pressed="true"]):hover { background: var(--hover); color: var(--ink); }
.dash-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--sheet); color: var(--ink);
  font-size: 15px; font-weight: 500; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.dash-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--muted); }
.dash-btn:active:not(:disabled) { transform: scale(.97); }
.dash-btn:disabled { opacity: .45; cursor: not-allowed; }
.dash-btn .lu { width: 18px; height: 18px; }

/* figures: one ruled row, like the board's evidence row */
.dash-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dash-kpi { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 16px 14px 16px 0; }
@media (max-width: 899px) {
  .dash-kpi:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .dash-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.dash-kpi-label { color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.35; }
.dash-kpi-value { color: var(--ink); font: 600 28px/1.15 var(--text); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi-value small { margin-left: 5px; color: var(--muted); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.dash-kpi-sub { color: var(--muted); font-size: 15px; line-height: 1.4; }
.dir-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; vertical-align: -4px; }
.dir-mark .lu, .dir-tag .lu { width: 14px; height: 14px; stroke-width: 2.6; }
.dir-mark.is-up { color: var(--dv-up); background: color-mix(in srgb, var(--dv-up) 15%, transparent); }
.dir-mark.is-down { color: var(--dv-down); background: color-mix(in srgb, var(--dv-down) 15%, transparent); }
.dir-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px 0 7px; border-radius: 99px; background: var(--tint); color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dir-tag.is-up { background: color-mix(in srgb, var(--dv-up) 14%, var(--sheet)); }
.dir-tag.is-up .lu { color: var(--dv-up); }
.dir-tag.is-down { background: color-mix(in srgb, var(--dv-down) 14%, var(--sheet)); }
.dir-tag.is-down .lu { color: var(--dv-down); }

/* blocks are separated by rules, never boxed */
.dash-split, .dash-panel > .dash-block { padding: 28px 0; border-bottom: 1px solid var(--line); }
.dash-panel > :last-child { padding-bottom: 4px; border-bottom: 0; }
.dash-split { display: grid; }
.dash-split > .dash-block + .dash-block { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.dash-block { min-width: 0; }
.dash-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; min-height: 40px; }
.dash-block-head h3 { color: var(--ink); font: 700 21px/1.25 var(--display); letter-spacing: -.015em; }
.dash-hint { color: var(--muted); font-size: 15px; font-weight: 400; }
.dash-block-sub { max-width: 72ch; margin-top: 2px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.dash-sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 4px; color: var(--ink); font: 600 17px/1.3 var(--text); }

/* bar lists */
.dash-bars { display: grid; gap: 2px; margin-top: 10px; }
.dash-bar { display: grid; grid-template-columns: minmax(84px, 128px) minmax(0, 1fr) 64px 44px; align-items: center; gap: 12px; min-height: 32px; font-size: 15px; }
.dash-bar-label { overflow: hidden; color: var(--body); text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track { height: 8px; overflow: hidden; border-radius: 4px; background: var(--dv-track); }
.dash-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--dv-1); }
.dash-bar-fill.is-soft { background: var(--dv-soft); }
.dash-bar-value { color: var(--ink); font-weight: 500; text-align: right; }
.dash-bar-share { color: var(--muted); font-size: 14px; text-align: right; }
.dash-bars.is-scroll { max-height: 300px; overflow-y: auto; padding-right: 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.dash-bars.is-scroll:focus-visible { outline-offset: 2px; }
.dash-countries { display: grid; margin-top: 8px; }
.dash-country { display: grid; grid-template-columns: minmax(84px, 110px) minmax(0, 1fr) 72px; grid-template-areas: "name range value" "meta meta meta"; align-items: center; gap: 2px 12px; padding: 8px 0; }
.dash-country + .dash-country { border-top: 1px solid var(--line); }
.dash-country-name { grid-area: name; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 500; }
.dash-country-name i { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.dash-country .dash-range { grid-area: range; width: 100%; }
.dash-country .dash-bar-value { grid-area: value; }
.dash-country-meta { grid-area: meta; color: var(--muted); font-size: 14px; }
.dash-range { position: relative; display: inline-block; width: 140px; height: 8px; border-radius: 4px; background: var(--dv-track); vertical-align: middle; }
.dash-range b { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--dv-soft); }
.dash-range i { position: absolute; top: -4px; width: 3px; height: 16px; margin-left: -1px; border-radius: 3px; background: var(--dv-1); }
.dash-range-text { margin-left: 10px; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-legend button, .dash-legend span { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--sheet); color: var(--ink); font-size: 14px; font-weight: 500; }
.dash-legend button:hover { background: var(--hover); }
.dash-legend button[aria-pressed="false"] { color: var(--muted); background: transparent; }
.dash-legend button[aria-pressed="false"] i { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.dash-legend.is-static span { padding: 0 4px; border-color: transparent; background: none; }
.dash-legend i { width: 10px; height: 10px; flex: none; border-radius: 3px; }

/* tables */
.dash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.dash-field { position: relative; display: inline-flex; align-items: center; }
.dash-field .lu { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.dash-input, .dash-select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--field); color: var(--ink); font-size: 15px; transition: border-color 140ms ease; }
.dash-input { width: 260px; padding-left: 38px; }
.dash-input::placeholder { color: var(--muted); opacity: 1; }
.dash-select-wrap { position: relative; display: inline-flex; }
.dash-select-wrap::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; pointer-events: none; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dash-select { max-width: 240px; padding-right: 36px; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; cursor: pointer; }
.dash-input:hover, .dash-select:hover { border-color: var(--muted); }
.dash-input:focus-visible, .dash-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.dash-count { margin-left: auto; color: var(--muted); font-size: 15px; }
/* positioned, so the screen-reader labels inside the cells scroll with the table instead of widening the page */
.dash-table-wrap { position: relative; margin: 12px calc(var(--dash-pad) * -1) 0; overflow-x: auto; overscroll-behavior-x: contain; }
.dash-board table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dash-board th { padding: 0; border-bottom: 1px solid var(--line-strong); background: var(--sheet); color: var(--muted); font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; }
.dash-board th > span:not(.sr-only), .dash-board th > button { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; }
.dash-board th > button:hover, .dash-board th[aria-sort] > button { color: var(--ink); }
.dash-board th .lu { width: 14px; height: 14px; opacity: .45; }
.dash-board th[aria-sort] .lu { opacity: 1; }
.dash-board th.num > * { justify-content: flex-end; }
.dash-board th:first-child > :not(.sr-only), .dash-board td:first-child { padding-left: var(--dash-pad); }
.dash-board th:last-child > :not(.sr-only), .dash-board td:last-child { padding-right: var(--dash-pad); }
.dash-board td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--body); vertical-align: middle; white-space: nowrap; }
.dash-board td b, .cell-strong { color: var(--ink); font-weight: 600; }
.dash-board td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-board tbody tr { transition: background-color 120ms ease; }
.dash-board tbody tr:hover { background: var(--hover); }
.dash-board tbody tr:last-child td { border-bottom: 0; }
.mu { color: var(--muted); }
.cell-title { display: flex; align-items: center; gap: 12px; min-width: 220px; max-width: 460px; white-space: normal; }
.cell-title > span:last-child { display: grid; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.dash-thumb { width: 48px; height: 36px; flex: none; border-radius: 4px; background: var(--tint); object-fit: cover; }
.dash-thumb.is-empty { display: grid; place-items: center; color: var(--muted); }
.dash-thumb.is-empty .lu { width: 22px; height: 22px; stroke-width: 1.6; }
.cell-meta-sm { display: none; }
.dash-ext { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--link); }
.dash-ext:hover { background: var(--hover); }
.dash-ext .lu { width: 18px; height: 18px; }
.dash-pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--ink); font-size: 13px; font-weight: 600; }
.dash-empty { padding: 32px 16px; color: var(--muted); text-align: center; white-space: normal; }
.dash-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; color: var(--muted); font-size: 15px; }
.dash-pager[hidden] { display: none; }
.dash-pager div { display: flex; gap: 8px; }

/* states */
.dash-note { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; margin-top: 18px; padding: 14px 16px; border-radius: 8px; font-size: 16px; line-height: 1.5; }
.dash-note > .lu { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.dash-note p { flex: 1 1 260px; }
.dash-note strong { color: inherit; font-weight: 600; }
.dash-note .dash-btn { margin-left: auto; }
.dash-note.is-warning { border: 1px solid color-mix(in srgb, var(--co-warning) 38%, var(--sheet)); background: color-mix(in srgb, var(--co-warning) 9%, var(--sheet)); color: var(--co-warning-ink); }
.dash-note.is-error { border: 1px solid color-mix(in srgb, var(--co-risk) 38%, var(--sheet)); background: color-mix(in srgb, var(--co-risk) 9%, var(--sheet)); color: var(--co-risk-ink); }
.dash-skeleton { margin-top: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--tint) 0%, var(--hover) 50%, var(--tint) 100%); background-size: 200% 100%; animation: dash-shimmer 1.3s linear infinite; }
.dash-kpi .dash-skeleton { margin-top: 0; }
@keyframes dash-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .dash-skeleton { animation: none; }
  .chart .line.is-drawing { animation: none; stroke-dashoffset: 0; }
  .dash-tab-indicator { transition: none; }
}

/* phones: secondary text stays at 16px, wide columns step aside */
@media (max-width: 639px) {
  .dash-board { font-size: 16px; }
  .dash-hint, .dash-block-sub, .dash-bar, .dash-bar-share, .dash-country-meta, .dash-country-name, .dash-count, .dash-pager,
  .dash-kpi-label, .dash-kpi-sub, .dash-legend button, .dash-legend span, .dash-seg button, .dash-btn, .dash-input, .dash-select,
  .dash-board table, .dash-board th, .dir-tag, .dash-sources .date-tag, .chart-tip { font-size: 16px; }
  .dash-seg button, .dash-legend button { min-height: 44px; }
  .dash-lang button { min-height: 44px; }
  .dash-bar { grid-template-columns: minmax(76px, 104px) minmax(0, 1fr) 60px 44px; gap: 10px; }
  .dash-tools .dash-field, .dash-tools .dash-input { flex: 1 1 100%; width: 100%; }
  .dash-tools .dash-select-wrap { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .dash-tools .dash-select { width: 100%; max-width: none; }
  .dash-count { width: 100%; margin-left: 0; }
  .dash-kpi-value { font-size: 24px; }
  .hide-sm { display: none; }
  .dash-view-tools .dash-btn { width: 44px; padding: 0; }
  .dash-view-tools .dash-btn span { display: none; }
  .dash-tabs.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .dash-thumb, .dash-thumb.is-empty { display: none; }
  .cell-title { min-width: 0; max-width: none; }
  .dash-board td:first-child { white-space: normal; min-width: 150px; }
  .cell-meta-sm { display: block; margin-top: 2px; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.35; }
  .chart .tick { font-size: 14px; }
}

@media (min-width: 640px) {
  .dash-board { --dash-pad: 28px; }
  .dash-panel { padding-top: 26px; padding-bottom: 32px; }
  .dash-tab-count { display: inline-block; }
  .dash-title { font-size: clamp(44px, 6vw, 52px); }
}

@media (min-width: 900px) {
  .dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-kpi { padding: 18px 22px; }
  .dash-kpi:first-child { padding-left: 0; }
  .dash-kpi + .dash-kpi { border-left: 1px solid var(--line); }
  .dash-kpi-value { font-size: 30px; }
}

@media (min-width: 1100px) {
  .dash-split { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .dash-split.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-split > .dash-block:first-child { padding-right: 28px; }
  .dash-split > .dash-block + .dash-block { margin-top: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--line); }
}

@media (min-width: 1200px) {
  .opening.dash-opening { padding: 28px 0 84px; }
  .dash-title { font-size: clamp(52px, 4vw, 60px); }
  .dash-wrap { margin-top: -60px; padding-bottom: 72px; }
}

@media (min-width: 1400px) {
  .dash-board { --dash-pad: 40px; }
  .dash-panel { padding-top: 30px; padding-bottom: 40px; }
}