/* ============================================================
   UNDER THE HOLO — market.css   (/market/ only)
   Session 11. Built from the Porcelain kit; this adds the row
   list, the movers columns and the card sheet's sparkline.
   Tokens only — no colour literals, no literal gradients.
   ============================================================ */

.uth-market { padding-top: var(--pc-sp-8); padding-bottom: var(--pc-section); }
.mk-head { margin-bottom: var(--pc-sp-7); }
.mk-head h1 { margin: var(--pc-sp-2) 0 var(--pc-sp-3); font-size: var(--pc-t-h1); line-height: var(--pc-lh-h1); }
.mk-head p { margin: 0; max-width: 68ch; color: var(--pc-ink-2); }

.mk-note { margin: var(--pc-sp-2) 0 0; font-size: var(--pc-t-sm); color: var(--pc-ink-2); max-width: 68ch; }
.mk-note--quiet { color: var(--pc-ink-3); margin-top: var(--pc-sp-6); }

.mk-block { margin-top: var(--pc-sp-5); }
.mk-block__head {
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: var(--pc-sp-4); margin-bottom: var(--pc-sp-4);
}
.mk-block__head .pc-card__title { margin: 0; }

.mk-search { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.mk-search .uth-i { position: absolute; left: 13px; color: var(--pc-ink-3); pointer-events: none; }
.mk-search input {
	font-family: var(--pc-font-ui); font-size: .9375rem; color: var(--pc-ink);
	background: var(--pc-surface); border: 1px solid var(--pc-hairline);
	border-radius: var(--pc-r-pill); padding: 9px 15px 9px 38px; min-height: 42px;
	width: min(260px, 100%);
}
.mk-search input::placeholder { color: var(--pc-ink-3); opacity: 1; }
.mk-search input:focus-visible { outline: none; border-color: var(--pc-focus); box-shadow: 0 0 0 4px var(--pc-focus-halo); }

/* ---------- rows ---------- */
.mk-rows { list-style: none; margin: 0; padding: 0; }
.mk-row { border-bottom: 1px solid var(--pc-hairline); }
.mk-rows > .mk-row:last-child { border-bottom: 0; }
.mk-row__btn {
	width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
	gap: var(--pc-sp-3); align-items: center; text-align: left;
	background: transparent; border: 0; padding: var(--pc-sp-3) var(--pc-sp-2);
	cursor: pointer; border-radius: var(--pc-r-sm); color: inherit;
}
.mk-row__btn:hover { background: var(--pc-tint-1); }
.mk-movers .mk-row__btn { grid-template-columns: minmax(0, 1fr) auto; }
.mk-row__thumb {
	width: 40px; height: 55px; border-radius: var(--pc-r-xs); overflow: hidden;
	background: var(--pc-surface-2); border: 1px solid var(--pc-hairline);
	display: flex; align-items: center; justify-content: center; color: var(--pc-ink-faint);
}
.mk-row__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-row__id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-row__name {
	font-family: var(--pc-font-display); font-size: .9375rem; font-weight: 600; color: var(--pc-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-row__set { font-size: var(--pc-t-sm); color: var(--pc-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row__figs { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
/* A money figure is one word: it never breaks. (Session 11, the "EUR 60.0 0" rule.) */
.mk-row__trend {
	font-family: var(--pc-font-display); font-weight: 600; color: var(--pc-ink);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mk-row__range, .mk-row__pct { font-size: var(--pc-t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pc-ink-3); }

/* ---------- movers ---------- */
.mk-movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--pc-sp-6); }
.mk-movers__title {
	margin: 0 0 var(--pc-sp-2); font-size: var(--pc-t-micro); font-weight: 600;
	letter-spacing: var(--pc-track-micro); text-transform: uppercase;
}

/* ---------- the card sheet ---------- */
.mk-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--pc-sp-5); align-items: start; }
.mk-card__media { margin: 0; border-radius: var(--pc-r-sm); overflow: hidden; background: var(--pc-surface-2); border: 1px solid var(--pc-hairline); padding: 6px; }
.mk-card__media img { display: block; width: 100%; height: auto; }
.mk-card__meta { margin: 0 0 var(--pc-sp-4); font-size: var(--pc-t-sm); color: var(--pc-ink-2); }
.mk-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--pc-sp-4); margin: 0; }
.mk-figs dt { font-size: var(--pc-t-micro); font-weight: 600; letter-spacing: var(--pc-track-micro); text-transform: uppercase; color: var(--pc-ink-3); }
.mk-figs dd { margin: 2px 0 0; font-family: var(--pc-font-display); font-size: 1.125rem; font-weight: 600; color: var(--pc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-figs dd.is-none { color: var(--pc-ink-3); font-size: var(--pc-t-sm); font-weight: 500; }
@media (max-width: 560px) { .mk-card { grid-template-columns: 84px minmax(0, 1fr); gap: var(--pc-sp-4); } }

.mk-spark { margin-top: var(--pc-sp-5); }
.mk-spark__empty {
	display: flex; flex-direction: column; gap: 4px; padding: var(--pc-sp-5);
	border: 1px dashed var(--pc-hairline); border-radius: var(--pc-r); background: var(--pc-surface-2);
	text-align: center;
}
.mk-spark__empty strong { font-family: var(--pc-font-display); color: var(--pc-ink); }
.mk-spark__empty span { font-size: var(--pc-t-sm); color: var(--pc-ink-2); }

.mk-actions { display: flex; flex-wrap: wrap; gap: var(--pc-sp-2); margin-top: var(--pc-sp-5); padding-top: var(--pc-sp-4); border-top: 1px solid var(--pc-hairline); }

/* ============================================================
   Session 12 — the dashboard
   KPI strip, the index chart, mover sparklines and the set
   table. Chart chrome matches the portfolio plot: solid
   hairline grid, ink axis text, one series colour per chart.
   ============================================================ */

/* ---------- KPI strip ---------- */
.mk-kpis {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--pc-sp-4); margin-bottom: var(--pc-sp-5);
	padding: var(--pc-sp-4) var(--pc-sp-5);
	background: var(--pc-surface); border: 1px solid var(--pc-hairline); border-radius: var(--pc-r);
}
.mk-kpis .pc-stat__val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- chart chrome (index card + card sheet) ---------- */
/* One variable per chart drives line, wash, dot and legend together.
   The index takes its verdict (up/down over the visible window) on the panel;
   the card sheet keeps the accent — the catalogue's figure, not a position. */
.mk-index { --mk-series: var(--pc-accent); }
.mk-index.is-up { --mk-series: var(--pc-up-fill); }
.mk-index.is-down { --mk-series: var(--pc-down-fill); }
.mk-plot--card { --mk-series: var(--pc-accent); }

.mk-plot { position: relative; width: 100%; }
.mk-plot__svg { display: block; width: 100%; height: clamp(200px, 26vw, 280px); }
.mk-plot--card .mk-plot__svg { height: clamp(150px, 22vw, 200px); }
.mk-plot__grid { stroke: var(--pc-hairline); stroke-width: 1; }
.mk-plot__axis { fill: var(--pc-ink-3); font-family: var(--pc-font-ui); font-size: 11px; }
.mk-plot__line { fill: none; stroke: var(--mk-series); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-plot__area { stroke: none; }
.mk-plot__grad-top { stop-color: var(--mk-series); stop-opacity: .16; }
.mk-plot__grad-bottom { stop-color: var(--mk-series); stop-opacity: 0; }
.mk-plot__dot { fill: var(--mk-series); stroke: var(--pc-surface); stroke-width: 2; }

/* ---------- second series, legend, coverage bars (S13) ----------
   The low line shares the axis with the trend, so it is separated by weight and
   a dash rather than by a second scale: quieter, thinner, and never the wash. */
.mk-plot__second {
	fill: none; stroke: var(--pc-ink-faint); stroke-width: 1.5;
	stroke-dasharray: 5 4; stroke-linecap: round;
}
.mk-tipkey { flex: none; display: inline-block; width: 12px; height: 2px; border-radius: 1px; margin-right: 6px; background: var(--pc-ink-faint); }
.mk-tipkey--line { background: var(--mk-series); }
.mk-tipkey--second { background: var(--pc-ink-faint); }
.mk-legend {
	display: flex; flex-wrap: wrap; gap: var(--pc-sp-2) var(--pc-sp-5);
	margin-top: var(--pc-sp-3);
	font-size: var(--pc-t-sm); color: var(--pc-ink-2);
}
.mk-legend span { display: inline-flex; align-items: center; gap: 7px; }
.mk-legend__key { width: 18px; height: 3px; border-radius: 2px; background: var(--pc-ink-faint); }
.mk-legend__key--line { background: var(--mk-series); }
.mk-legend__key--second { background: var(--pc-ink-faint); }

/* Coverage: a count per day, so bars — a line between two counts would imply the
   days in between were observed. Its own chart, never the index's axis. */
.mk-sub { margin-top: var(--pc-sp-6); padding-top: var(--pc-sp-5); border-top: 1px solid var(--pc-hairline); }
.mk-sub__title {
	margin: 0 0 2px; font-family: var(--pc-font-ui); font-size: var(--pc-t-micro);
	font-weight: 600; letter-spacing: var(--pc-track-micro); text-transform: uppercase;
	color: var(--pc-ink-3);
}
.mk-plot--bars .mk-plot__svg { height: clamp(90px, 12vw, 130px); }
.mk-plot__bar { fill: var(--pc-ink-faint); opacity: .85; }
.mk-plot__bar:hover { fill: var(--mk-series); opacity: 1; }

/* Index watermarks in the panel header. */
.mk-marks { display: flex; gap: var(--pc-sp-5); margin: 0; }
.mk-marks dt {
	font-family: var(--pc-font-ui); font-size: var(--pc-t-micro); font-weight: 600;
	letter-spacing: var(--pc-track-micro); text-transform: uppercase; color: var(--pc-ink-3);
}
.mk-marks dd {
	margin: 0; font-family: var(--pc-font-display); font-size: 1.05rem;
	color: var(--pc-ink); font-variant-numeric: tabular-nums;
}
.mk-marks small { display: block; font-family: var(--pc-font-ui); font-size: var(--pc-t-micro); color: var(--pc-ink-3); }

/* ---------- price bands (S13) ----------
   One colour for every bar: the count is the length. An empty band keeps its row
   so a hole in the middle of the market stays visible. */
.mk-bandlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pc-sp-3); }
.mk-bandrow {
	display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) 3.4rem;
	gap: var(--pc-sp-4); align-items: center;
}
.mk-bandrow__label { font-size: var(--pc-t-sm); color: var(--pc-ink); font-variant-numeric: tabular-nums; }
.mk-bandrow__track { position: relative; display: flex; align-items: center; gap: var(--pc-sp-3); height: 10px; }
.mk-bandrow__track i {
	display: block; height: 10px; min-width: 2px; border-radius: var(--pc-r-pill);
	background: var(--pc-accent);
}
.mk-bandrow__val { font-size: var(--pc-t-sm); font-weight: 600; color: var(--pc-ink); font-variant-numeric: tabular-nums; }
.mk-bandrow__pct { text-align: right; font-size: var(--pc-t-sm); color: var(--pc-ink-2); font-variant-numeric: tabular-nums; }
.mk-bandrow.is-empty .mk-bandrow__label,
.mk-bandrow.is-empty .mk-bandrow__val,
.mk-bandrow.is-empty .mk-bandrow__pct { color: var(--pc-ink-3); }

/* ---------- drill-down triggers (S13) ---------- */
.mk-setbtn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; color: var(--pc-ink); text-align: left;
	transition: color var(--pc-t-fast) var(--pc-ease);
}
.mk-setbtn:hover { color: var(--pc-accent-ink); }
.mk-setbtn .uth-i { color: var(--pc-ink-3); flex: none; }
.mk-setbtn small { display: block; font-size: var(--pc-t-micro); color: var(--pc-ink-3); font-weight: 400; }
.mk-row__pct.is-none { color: var(--pc-ink-3); font-weight: 400; }

/* The card sheet's range switch sits above its plot. */
.mk-cardchart__head { display: flex; justify-content: flex-end; margin-bottom: var(--pc-sp-2); }
.pc-seg--sm .pc-seg__btn { padding: 4px 10px; font-size: var(--pc-t-micro); }

@media (max-width: 620px) {
	.mk-bandrow { grid-template-columns: minmax(0, 1fr) 3.4rem; }
	.mk-bandrow__track { grid-column: 1 / -1; }
	.mk-marks { gap: var(--pc-sp-4); }
}
.mk-plot__cross { stroke: var(--pc-hairline-strong); stroke-width: 1; opacity: 0; pointer-events: none; transition: opacity var(--pc-t-fast) var(--pc-ease); }
.mk-plot__cross.is-on { opacity: 1; }
.mk-plot__endlabel {
	fill: var(--pc-ink); font-family: var(--pc-font-display);
	font-size: 12px; font-weight: 600;
	paint-order: stroke; stroke: var(--pc-surface); stroke-width: 3px; stroke-linejoin: round;
}
.mk-plot__tip {
	position: absolute; z-index: 2; pointer-events: none;
	transform: translate(-50%, 0);
	background: var(--pc-surface); border: 1px solid var(--pc-hairline);
	border-radius: var(--pc-r-sm); box-shadow: var(--pc-shadow-2);
	padding: 8px 11px; min-width: 132px;
	font-size: var(--pc-t-sm); color: var(--pc-ink-2); line-height: 1.5;
}
.mk-plot__tip strong { display: block; color: var(--pc-ink); font-family: var(--pc-font-display); margin-bottom: 2px; }
.mk-plot__tip span { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mk-plot__tip b { margin-left: auto; color: var(--pc-ink); font-weight: 600; }
.mk-plot__tipnote { color: var(--pc-ink-3); }

/* ---------- index table ---------- */
.mk-datatable { margin-top: var(--pc-sp-4); }
.mk-datatable > summary {
	cursor: pointer; width: fit-content; padding: 4px 0;
	font-size: var(--pc-t-sm); color: var(--pc-ink-3);
}
.mk-datatable > summary:hover { color: var(--pc-ink); }
.mk-datatable[open] > summary { margin-bottom: var(--pc-sp-3); }
/* A scroll container only clips if it is allowed to be narrower than its
   content. As a grid/flex item its min-width resolves to `auto` — the width of
   the widest table — so the container grew instead of scrolling and the whole
   document went with it: 540px of scrollWidth in a 390px viewport. */
.mk-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.mk-scroll table { width: 100%; border-collapse: collapse; font-size: var(--pc-t-sm); }
.mk-scroll th, .mk-scroll td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--pc-hairline); white-space: nowrap; }
.mk-scroll thead th { font-size: var(--pc-t-micro); font-weight: 600; letter-spacing: var(--pc-track-micro); text-transform: uppercase; color: var(--pc-ink-3); }
.mk-scroll tbody tr:last-child th, .mk-scroll tbody tr:last-child td { border-bottom: 0; }
.mk-scroll td, .mk-scroll tbody th { color: var(--pc-ink-2); font-variant-numeric: tabular-nums; }
.mk-scroll tbody th { color: var(--pc-ink); font-weight: 600; }
.mk-scroll .is-num { text-align: right; }

/* ---------- mover sparklines ---------- */
.mk-row__spark { flex: none; width: 64px; height: 24px; align-self: center; color: var(--pc-ink-faint); }
.mk-row__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mk-row__spark path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mk-row__spark circle { fill: currentColor; }
.mk-row__spark.is-up { color: var(--pc-up-fill); }
.mk-row__spark.is-down { color: var(--pc-down-fill); }
/* The movers' rows gain a third column for the sparkline. */
.mk-movers .mk-row__btn { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 480px) {
	.mk-row__spark { display: none; }
	.mk-movers .mk-row__btn { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- movement by set ---------- */
.mk-sets__barcol { width: 30%; min-width: 120px; }
.mk-sets__bar {
	display: block; height: 8px; border-radius: 4px;
	width: var(--mk-bar, 0%); min-width: 2px;
	background: var(--pc-ink-faint);
}
.mk-sets__bar.is-up { background: var(--pc-up-fill); }
.mk-sets__bar.is-down { background: var(--pc-down-fill); }

/* ---------- verdict tints shared by pct chips ---------- */
.mk-row__pct.is-up, .mk-movers__title.is-up { color: var(--pc-up); }
.mk-row__pct.is-down, .mk-movers__title.is-down { color: var(--pc-down); }