/* =========================================================================
   MATT DAILY // OS — detail pages (/body, /deep)
   Loads AFTER hud.css and consumes the same --md-* tokens. Only layout and
   chart chrome live here; re-skinning stays a hud.css-only job.
   ========================================================================= */

.detail-deck { display: grid; gap: 22px; margin-top: 18px; }
/* grid items default to min-width:auto — one wide ledger row or chart head
   would inflate the whole column past a phone viewport; let them shrink and
   wrap internally instead */
.detail-deck > *, .duo > * { min-width: 0; }

/* header back link */
.back {
	color: var(--md-ink-dim); text-decoration: none; font-size: 13px;
	letter-spacing: .16em; border: 1px solid var(--md-line); padding: 4px 12px;
}
.back:hover { color: var(--md-accent); border-color: var(--md-accent); }

/* stat tile row — same tile DNA as the HUD, five up */
.tile-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tile-row .tile { padding: 14px 16px; }
.tile-row .tile-v { font-size: 27px; }

/* tiles double as chart tabs on the body page */
.tile-tab {
	text-align: left; font-family: inherit; cursor: pointer; color: inherit;
	background: var(--md-bg-raise); transition: border-color .15s ease, box-shadow .15s ease;
}
.tile-tab:hover { border-color: var(--md-accent); }
.tile-tab.on { border-color: var(--md-accent); box-shadow: 0 0 16px var(--md-glow); }
.tile-tab.on::before { border-top-width: 3px; border-left-width: 3px; } /* brighter corner ticks */
.tile-tab.on .tile-k { color: var(--md-accent); }
.tile-d { font-size: var(--md-fs-small); margin-top: 4px; letter-spacing: .06em; color: var(--md-ink-dim); }
.tile-d.good { color: var(--md-good); }
.tile-d.warn { color: var(--md-warn); }
.tile-d.crit { color: var(--md-crit); }

/* chart panels */
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.chart-body { margin-top: 8px; }
.chart-body svg { display: block; width: 100%; }
.range-chips { display: flex; gap: 8px; }
.range-chip {
	background: none; border: 1px solid var(--md-line-dim); color: var(--md-ink-dim);
	font-size: 12.5px; letter-spacing: .12em; padding: 3px 12px;
}
.range-chip.on { border-color: var(--md-accent); color: var(--md-accent); background: var(--md-accent-15); }
.range-chip:hover { border-color: var(--md-accent); }

/* svg chart chrome — stroke/fill read the tokens via currentColor tricks */
.ax { stroke: var(--md-line-dim); stroke-width: 1; }
.ax-lab { fill: var(--md-ink-dim); font-family: var(--md-font-mono); font-size: 11.5px; letter-spacing: .08em; }
.gridline { stroke: var(--md-line-dim); stroke-width: 1; stroke-dasharray: 2 5; }
.target-line { stroke: var(--md-accent-2); stroke-width: 1.5; stroke-dasharray: 6 5; }
.target-lab { fill: var(--md-accent-2); font-family: var(--md-font-mono); font-size: 11px; letter-spacing: .1em; }
.raw-dot { fill: var(--md-ink-dim); opacity: .55; }
.trend-path { fill: none; stroke: var(--md-accent); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--md-glow)); }
.line-b { fill: none; stroke: var(--md-accent-2); stroke-width: 2; }
.area-fill { fill: var(--md-accent); opacity: .07; }
.bar { fill: var(--md-accent); opacity: .8; }
.bar.today { opacity: 1; filter: drop-shadow(0 0 6px var(--md-glow)); }
.bar.off { fill: var(--md-line); opacity: .55; }
.bar.extra { fill: var(--md-accent-2); opacity: .75; }
.bar-hour { fill: var(--md-accent); opacity: .75; }
.legend { display: flex; gap: 20px; margin-top: 10px; font-size: 12.5px; letter-spacing: .1em; color: var(--md-ink-dim); }
.legend i { display: inline-block; width: 14px; height: 3px; margin-right: 7px; vertical-align: middle; }
.legend .l-a i { background: var(--md-accent); }
.legend .l-b i { background: var(--md-accent-2); }
.legend .l-dim i { background: var(--md-ink-dim); height: 5px; width: 5px; border-radius: 50%; }

/* two-up lower panels */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }

/* training dots (body page) */
.train-dots { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.train-dots i {
	width: 13px; height: 13px; border-radius: 50%;
	border: 1px solid var(--md-line); flex: 0 0 auto;
}
.train-dots i.hit { background: var(--md-good); border-color: var(--md-good); }
.train-dots i.off { border-style: dashed; opacity: .5; }
.train-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14.5px; }
.train-row .t { color: var(--md-ink-dim); }
.train-row .w { color: var(--md-ink); }

/* session ledger (deep page) */
.ledger-row { display: flex; gap: 14px; padding: 6px 0; font-size: 14.5px; align-items: baseline; }
.ledger-row .t { color: var(--md-ink-dim); white-space: nowrap; }
.ledger-row .l { flex: 1; color: var(--md-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row .s-completed { color: var(--md-good); white-space: nowrap; }
.ledger-row .s-abandoned { color: var(--md-crit); white-space: nowrap; }

/* meta strip (BMI / RM / body age) */
.meta-strip { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--md-line-dim); font-size: var(--md-fs-small); color: var(--md-ink-dim); letter-spacing: .08em; }
.meta-strip b { color: var(--md-ink); font-weight: 400; }

@media (max-width: 1180px) {
	/* minmax(0,…) matters: bare 1fr floors at min-content and a "TARGET 7:30"
	   tile shoves the grid past a phone viewport */
	.tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.duo { grid-template-columns: 1fr; }
}