+ {/* donut + legend row: the gap folds at a 320px card, below 240px the row wraps
+ and the ring centers over the full-width legend (all keyed to the lc-card container). */}
+
.lc-card { margin-bottom: 0; }
.lc-col > .lc-card:last-child { margin-bottom: 0; }
.lc-col-browser { display: flex; flex-direction: column; }
@@ -102,24 +96,19 @@
/*
Head band: TWO rows of two EQUAL-width cards — the session's shape beside
the plugin card (context / plugin), then the two donut cards together
- (token / timing). `flex-basis: 0` + equal grow halves each row exactly, and
- `min-width: 0` lets the split ignore content. Each row is its own
- `lc-head-row` query container, so the split folds instead of crushing the
- cards (issue #48): below 720px of row width (a half under ~350px — where the
- donut cards' ring+legend single-line and the context card's 3-column cell
- grid both start to cramp) the pair stacks single-column. Cards under that
- end of the band sit under their own lc-card reflows (stats.css: the ring
- stacks over its legend, the cell grid folds), so the two-card line is the
- trade this threshold buys. Engines without container queries keep the wide
- two-across layout. The right Sidebar's panel renders only the donut row (it
- drops the context stats / plugin info row — see contextView.tsx); the same
- rules then stack the pair in the narrow pane.
+ (token / timing). The rows are `.lc-cols` flex-wrap rows and the cards ride
+ the shared column idiom (`flex-1 min-w-[min(360px,100%)]` in the
+ components): equal `flex: 1` halves each row exactly and the min-width
+ floor is the fold — below 2 x 360px + gap of row width (a half under
+ ~360px, where the donut cards' ring+legend single-line and the count grid
+ both start to cramp, issue #48) the pair wraps onto full-width lines. Cards
+ under that end of the band sit under their own lc-card reflows (stats.css:
+ the ring stacks over its legend, the cell grid folds), so the two-card
+ line is the trade this floor buys. Engines without container queries keep
+ the wide two-across layout. The right Sidebar's panel renders only the
+ donut row (it drops the context stats / plugin info row — see
+ contextView.tsx); the same wrap then stacks the pair in the narrow pane.
*/
-.lc-head { container: lc-head-row / inline-size; }
-.lc-head > .lc-card { flex: 1 1 0; min-width: 0; }
-@container lc-head-row (max-width: 720px) {
- .lc-head > .lc-card { flex-basis: 100%; }
-}
/* The context card's cell grid stretches to the plugin card's height, so the row reads as one level band. */
.lc-head > .lc-card:has(.lc-stats) { display: flex; flex-direction: column; }
.lc-head .lc-stats { flex: 1; align-content: stretch; }
diff --git a/src/client/styles/events.css b/src/client/styles/events.css
index cbfa95b..32e2521 100644
--- a/src/client/styles/events.css
+++ b/src/client/styles/events.css
@@ -18,15 +18,3 @@
.lc-event-tokens { color: var(--dsw-alias-state-success-primary); font-weight: 600; white-space: nowrap; }
.lc-event-tokens.lc-up { color: var(--dsw-alias-state-warn-primary); }
.lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }
-/*
- Narrow cards (phone panes): the single-line row crushes the label to a
- couple of characters and the no-shrink meta tail (at/tokens/time) overflows
- into a horizontal scrollbar. Wrap instead: the label's near-full-width
- basis keeps line 1 to icon + kind + label, and the meta tail folds onto
- line 2 intact. The 92px reservation covers icon + gap + the widest kind
- chip (both locales) + gap.
- */
-@container lc-card (max-width: 380px) {
- .lc-event { flex-wrap: wrap; }
- .lc-event-label { flex-basis: calc(100% - 92px); }
-}
diff --git a/src/client/styles/fileCard.css b/src/client/styles/fileCard.css
index e9aa386..a7ab66e 100644
--- a/src/client/styles/fileCard.css
+++ b/src/client/styles/fileCard.css
@@ -22,22 +22,7 @@
.lc-fa-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 13px; padding: 0 2px; border-radius: 4px; font-size: 8px; font-weight: 700; line-height: 1; }
/* The chevron sits close to the icon: only half the row gap stays visible. */
.lc-fa-row .lc-br-chev { margin-right: -2px; }
-.lc-fa-path { flex: 1; min-width: 0; word-break: break-all; }
-/*
- Narrow cards (phone panes): the nowrap row's break-all path otherwise
- collapses into a one-character-wide vertical strip beside the chips. Wrap
- instead: the path's near-full-width basis keeps line 1 to chevron + icon +
- path (free to wrap to two text lines), and the badges/delta/time fold onto
- line 2 intact. The 46px reservation is chevron (12) + gaps (2×7) + form
- icon (20). Must sit AFTER the `.lc-fa-path` base rule — equal specificity,
- so only source order lets the query's basis beat the `flex: 1` shorthand.
- */
-@container lc-card (max-width: 380px) {
- .lc-fa-row { flex-wrap: wrap; }
- .lc-fa-path { flex-basis: calc(100% - 46px); }
- /* The five purpose chips (labels + counts) overflow a ~300px card in English — let the segmented group flow to two lines. */
- .lc-fa-ctl .lc-gran { flex-wrap: wrap; }
-}
+.lc-fa-path { min-width: 0; word-break: break-all; }
.lc-fa-file { cursor: pointer; }
.lc-fa-path em { font-style: normal; color: var(--dsw-alias-label-secondary); }
/* Per-purpose count badges: pill chips, one fixed tint per purpose (read = brand, write = success, search = warn). */
diff --git a/src/client/styles/stats.css b/src/client/styles/stats.css
index 62b8dd6..df4b102 100644
--- a/src/client/styles/stats.css
+++ b/src/client/styles/stats.css
@@ -4,10 +4,6 @@
* the composition overview's big number, and the cards' shared anatomy
* — section heading, donut, slice list, plugin-info rows.
*/
-/* The context card's six count cells: the session's shape, the cache-hit
- rate, and the cost — 3×2 by default (the cells stay wide enough for the
- longest English label), folding to a single row on wide cards. */
-.lc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lc-stat { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 6px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* The 5-cell stats grid shares a half-width head-row card with a sibling, so its cells are moderate: tighter padding plus a corner-pinned '?' (out of the label's line) keep the longest labels on one line. */
.lc-stats .lc-stat { padding: 6px 3px; }
@@ -36,11 +32,13 @@
row, and the token card's cost line (the '.lc-tip' bubble pattern). ----
*/
.lc-stat-head { font-size: 11px; font-weight: 600; color: var(--dsw-alias-label-secondary); margin: 12px 0 8px; }
-/* The ring hugs the left edge; the legend fills the rest of the card with its quantity and share columns right-aligned. The donut cards stretch the group over their full height, so the head row's extra space sits around the chart instead of pooling under it. */
-.lc-donut-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; }
+/* The ring hugs the left edge; the legend fills the rest of the card with its quantity and share columns
+ right-aligned. The donut cards stretch the donut+legend row over their full height (`flex: 1` below), so
+ the head row's extra space sits around the chart instead of pooling under it; the row's own flex layout
+ and its 320px/240px folds ride utilities on the elements (statsTokens.tsx / statsTiming.tsx /
+ sliceList.tsx / donut.tsx). */
.lc-col-donut { display: flex; flex-direction: column; }
.lc-col-donut .lc-donut-row { flex: 1; }
-.lc-donut-row .lc-sl { flex: 1 1 auto; }
.lc-donut { position: relative; flex: none; }
.lc-donut svg { display: block; }
.lc-donut-track { stroke: color-mix(in srgb, var(--color-neutral-500) 18%, transparent); }
@@ -99,37 +97,9 @@
*/
.lc-pi-value { min-width: 0; color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.lc-pi-row-btn .lc-pi-value { font-weight: 400; }
-/*
- Wide head cards: on roomy panes the context card's six cells fit ONE line
- (~110px each at the 700px mark). Degrades silently on engines without
- container queries.
- */
-@container lc-card (min-width: 700px) {
- .lc-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-}
-/*
- Narrow head cards: the side-by-side ring + legend reads single-line only
- above ~320px of card content width. The two-tier rows already absorb the
- squeeze — the name gives ground before the fixed share column — so the
- compact block only tightens the ring gap. The context card's 6-cell grid
- folds to 2 columns instead: three ~65px cells would ellipsize the longer
- English labels (Tool Calls). Below 240px even the ring stops
- fitting, so the card stacks: the ring centers over the full-width legend
- rows. Cards resolve these queries against themselves (the shared `lc-card`
- container in base.css) at every split of the head band — two-across or
- stacked. Engines without container queries drop both blocks and keep
- the wide layout. The 240px block must stay AFTER the 320px one — at that
- width both match and the stack rules win by order.
- */
-@container lc-card (max-width: 320px) {
- .lc-donut-row { gap: 8px; }
- .lc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@container lc-card (max-width: 240px) {
- .lc-donut-row { flex-wrap: wrap; }
- .lc-donut { margin: 0 auto; }
- .lc-donut-row .lc-sl { flex-basis: 100%; }
-}
+/* The stats grid's cell count is intrinsic (`repeat(auto-fit, minmax(108px,1fr))` on the element, see
+ statsContext.tsx); the donut row's 320px gap fold and 240px stack still ride
+ `@max-[…]/lc-card` utilities — statsTokens.tsx / statsTiming.tsx / sliceList.tsx / donut.tsx. */
/* Reduced motion (the harness's own idiom): the ring shows its final arcs immediately. */
@media (prefers-reduced-motion: reduce) {
.lc-donut-seg { animation: none; }