/* Fuel, tips & wire (STOCK slice) — module styles only. Colours, radii, shadows and motion come from app.css tokens,
 * so light and dark themes both work. Prefix: cons-. Phone first (360/390 px); targets ≥ 44 px.
 * R6: type ramp, 4-pt spacing and the five radii only; task screens use the shared task header and action bar
 * (.taskh, .abar), lists the shared rows (.lrow, .glist) and the summary the shared stat strip (.stats).
 * R8 (§2.9, §2.10): hairline rows instead of item cards; the overview is a hub with a "More" list (no tab strip); the
 * ledger shows six columns and expands a day; phones get day summaries. Motion (Emil Kowalski rules): only the day
 * chevron turns (transform, --d-fast, ease-out); nothing animates on the 100×-a-day actions (typing, tab picks). */

.cons { display: grid; gap: var(--s-5); min-width: 0; }
.cons-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cons-nowrap { white-space: nowrap; }
.cons-layout { display: grid; gap: var(--s-6); min-width: 0; }
.cons-main, .cons-side { display: grid; gap: var(--s-6); align-content: start; min-width: 0; }
@media (min-width: 1024px) { .cons-layout { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
.cons-sub { font: var(--t-h3); }

/* ---------------------------------------------------------------- overview: stat strip, branch rows, More */
.cons .stats { margin-bottom: 0; }
.cons-branch { display: grid; gap: var(--s-3); min-width: 0; }
.cons-branch__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.cons-branch__title { font: var(--t-h2); }
.cons-branch__st { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cons-fresh { margin: 0; font: var(--t-meta); }
.cons-fresh .stxt { white-space: normal; }
.cons-rows .lrow__lead .ic, .cons-morelist .lrow__lead .ic { color: var(--ink-3); }
.cons-morebox { display: grid; gap: var(--s-2); }
.cons-morebox__t { font: var(--t-h2); }

.cons-kv { display: grid; gap: var(--s-2); font: var(--t-meta); font-weight: 400; }
.cons-kv > div { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.cons-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cons-kv dt { color: var(--ink-3); flex: none; }
.cons-kv dd { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cons-kv--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
.cons-kv--2 > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
.cons-owed { color: var(--warn); }

/* fuel order line (item detail) */
.cons-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-input); background: var(--info-soft); }
.cons-order > .ic { color: var(--info); flex: none; }
.cons-order--warn { background: var(--warn-soft); }
.cons-order--warn > .ic { color: var(--warn); }
.cons-order__text { flex: 1 1 220px; min-width: 0; }
.cons-order__pay { display: block; margin-top: 2px; font: var(--t-meta); font-weight: 400; color: var(--ink-2); overflow-wrap: anywhere; }
.cons-order .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------- item detail (Sortly item details) */
.cons-itemtop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.cons-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cons-meta > div { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4) var(--s-3) 0; min-width: 0; }
.cons-meta > div:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--line); }
.cons-meta > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.cons-meta dt { font: var(--t-label); color: var(--ink-3); }
.cons-meta dd { margin: 0; font: var(--t-h3); overflow-wrap: anywhere; }
.cons-meta dd .stxt { font: var(--t-meta); font-weight: 600; white-space: normal; }
.cons-meta__sub { font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
@media (min-width: 1024px) { .cons-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cons-meta > div:nth-child(n + 2) { padding-left: var(--s-4); border-left: 1px solid var(--line); } .cons-meta > div:nth-child(n + 3) { border-top: 0; } }

/* ledger: six columns by default, a day expands in place; "Show all columns" brings back the full table (desktop) */
.cons-led, .cons-dsums { min-width: 0; }
.cons-led__bar { display: flex; justify-content: flex-end; margin-bottom: var(--s-2); }
.cons-led .table th, .cons-led .table td { padding-inline: var(--s-3); }
/* the day is a row header: it reads like a cell, not like the column labels */
.cons-led tbody th, .cons-led tfoot th { position: static; height: 56px; padding-block: var(--s-1); background: none; color: var(--ink); font: var(--t-body); font-weight: 600; letter-spacing: normal; text-transform: none; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cons-led tbody tr:last-child th { border-bottom: 0; }
.cons-led tfoot th { border-top: 2px solid var(--line-strong); border-bottom: 0; background: var(--surface-3); font-weight: 700; }
.cons-led tbody td { padding-block: var(--s-1); }
.cons-led__x { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-2) 0 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cons-led__x .ic { color: var(--ink-3); flex: none; transition: transform var(--d-fast) var(--ease-out); }
.cons-led__x[aria-expanded="true"] .ic { transform: rotate(90deg); }
.cons-led__more > td { background: var(--surface-3); padding: var(--s-3) var(--s-4) var(--s-4); }
.cons-led__more .cons-kv--2 { max-width: 640px; }
.cons-exc { display: inline-block; max-width: 280px; font: var(--t-meta); font-weight: 400; color: var(--ink-2); }
.cons-exc.tone-warn { color: var(--warn); font-weight: 600; }
.cons-rcvlist { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-1); font: var(--t-meta); font-weight: 400; color: var(--ink-2); }
.cons-rcvlist li { display: flex; align-items: flex-start; gap: var(--s-2); }
.cons-rcvlist .ic { flex: none; margin-top: 3px; color: var(--ink-3); }
.cons-dsums { display: none; }
@media (max-width: 719px) {
  .cons-led { display: none; }
  .cons-dsums { display: grid; border-top: 1px solid var(--line); }
}
.cons-dsum { border-bottom: 1px solid var(--line); }
.cons-dsum > summary { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) 16px; align-items: baseline; gap: 2px var(--s-3); min-height: 56px; padding: var(--s-3) 0; list-style: none; cursor: pointer; }
.cons-dsum > summary::-webkit-details-marker { display: none; }
.cons-dsum > summary::after { content: ""; grid-row: 1; grid-column: 3; justify-self: end; align-self: center; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform var(--d-fast) var(--ease-out); }
.cons-dsum[open] > summary::after { transform: rotate(45deg); }
.cons-dsum__d { font-weight: 600; }
.cons-dsum__n { text-align: right; font: var(--t-meta); color: var(--ink-2); }
.cons-dsum__x { grid-column: 1 / 3; }
.cons-dsum__body { display: grid; gap: var(--s-3); padding: 0 0 var(--s-4); }
.cons-dsum--off { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); color: var(--ink-3); }

/* expandable secondary facts */
.cons-xrows { display: grid; border-top: 1px solid var(--line); }
.cons-xrows > details { border-bottom: 1px solid var(--line); }
.cons-xrows > details > summary { font-weight: 600; padding-block: var(--s-2); }
.cons-xbody { display: grid; gap: var(--s-4); padding: var(--s-2) 0 var(--s-4); }
.cons-xrow { display: grid; gap: var(--s-2); }
.cons-xrow__t { font: var(--t-label); color: var(--ink-3); }
.cons-cnts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); font: var(--t-meta); font-weight: 400; }
.cons-cnts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.cons-value__head { display: flex; align-items: center; gap: var(--s-2); }
.cons-value__v { margin: 0; }

/* ---------------------------------------------------------------- checks */
.cons-cgroup { display: grid; gap: var(--s-3); }
.cons-cgroup__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1); font: var(--t-h3); }
.cons-cgroup__n { font: var(--t-meta); color: var(--ink-2); }
.cons-checks { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.cons-check { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-input); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--warn-bar); }
.cons-check--danger { border-left-color: var(--danger-strong); }
.cons-check.is-checked { border-left-color: var(--line-strong); background: var(--surface-3); }
.cons-check__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.cons-check__text { overflow-wrap: anywhere; }
.cons-check__done { display: flex; gap: var(--s-2); align-items: flex-start; font: var(--t-meta); font-weight: 400; color: var(--ink-2); }
.cons-check__done .ic { color: var(--ok); flex: none; margin-top: 2px; }
.cons-check__act { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cons-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.cons-chip { min-height: var(--tap); cursor: pointer; color: var(--ink); white-space: normal; text-align: left; }
.cons-chip:active { background: var(--surface-2); }
.cons-hist > summary { font-weight: 600; }
.cons-hist .cons-checks { margin-top: var(--s-3); }

/* ratio table */
.cons-ratio__days { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: var(--s-2); }
.cons-ratio__day { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font: var(--t-meta); font-weight: 400; }
.cons-ratio__d { font-weight: 600; }
.cons-ratio__n { color: var(--ink-2); min-width: 0; }
@media (max-width: 379px) { .cons-ratio__day { grid-template-columns: minmax(0, 1fr) auto; } .cons-ratio__n { grid-column: 1 / -1; grid-row: 2; } }

/* ---------------------------------------------------------------- suppliers owed */
.cons-sups { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.cons-sups--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cons-sup { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.cons-sup__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cons-sup__name { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cons-sup__name .ic { color: var(--ink-3); flex: none; }
.cons-sup__sub { margin: 0; font: var(--t-label); color: var(--ink-3); }
.cons-sup__more > summary { font: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.cons-sup__lines { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-1); font: var(--t-label); font-weight: 400; color: var(--ink-2); }
.cons-sup__lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-3); }

/* ---------------------------------------------------------------- machines, bought vs received */
.cons-week { display: grid; gap: var(--s-2); justify-items: start; }
.cons-mach__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.cons-mach__row { display: grid; grid-template-columns: minmax(0, 150px) 120px minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-4); }
.cons-mach__name { display: flex; align-items: center; gap: var(--s-2); }
.cons-mach__name .ic { color: var(--ink-3); flex: none; }
.cons-mach__nums { font: var(--t-meta); font-weight: 400; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.cons-mbars { display: flex; align-items: flex-end; gap: var(--s-1); height: 32px; }
.cons-mbar { display: block; flex: 1; min-height: 2px; height: var(--h, 0%); border-radius: var(--r-plate) var(--r-plate) 0 0; background: var(--bar-exp); }
@media (max-width: 719px) { .cons-mach__row { grid-template-columns: minmax(0, 1fr) 96px; } .cons-mach__nums { grid-column: 1 / -1; } }
.cons-notes { display: grid; gap: var(--s-2); padding-left: var(--s-5); color: var(--ink-2); }

/* ---------------------------------------------------------------- task screens: end of day, record a delivery */
.cons-end { display: grid; gap: var(--s-5); max-width: 640px; }
.cons-end__pick { display: grid; gap: var(--s-2); }
.cons-date .field { margin-top: var(--s-2); max-width: 260px; }
.cons-live { padding: var(--s-3); border-radius: var(--r-input); background: var(--surface-3); border: 1px dashed var(--line-strong); display: grid; gap: var(--s-1); }
.cons-live__t { font: var(--t-label); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cons-live__v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); font: var(--t-meta); font-weight: 400; }
.cons-choice .seg { margin-top: var(--s-1); }
.cons-end.is-nothing .cons-usage { display: none; }
.cons-usage { display: grid; gap: var(--s-5); }
.cons-fs { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-4); min-width: 0; }
.cons-fs__t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font: var(--t-h3); padding: 0; margin-bottom: var(--s-1); }
.cons-fs__t .ic { color: var(--ink-3); }
.cons-mrow { display: grid; gap: 2px; }
.cons-mrow__label { display: inline-flex; align-items: center; gap: var(--s-2); }
.cons-mrow__label .ic { color: var(--ink-3); }
.cons-mrow__label--item { font: var(--t-h3); }
.cons-cans { min-height: 20px; font: var(--t-meta); font-weight: 400; color: var(--ink-3); text-align: center; }
.cons-cans:empty { display: none; }
.cons-cans.is-warn { color: var(--warn); font-weight: 600; }
.cons-total { font-weight: 600; color: var(--ink-2); }
.cons-total:empty { display: none; }
.cons-grid3 { display: grid; align-items: start; gap: var(--s-3) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); margin-top: var(--s-3); }
.cons-cnt, .cons-more { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.cons-cnt__done { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-3) 0; font: var(--t-meta); font-weight: 400; color: var(--ink-2); }
.cons-cnt__done > .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.cons-cnt > summary, .cons-more > summary { font-weight: 600; min-height: var(--tap); flex-wrap: wrap; }
.cons-rcvsum, .cons-rcvdone { display: grid; gap: var(--s-2); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.cons-rcvsum__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cons-saved { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); font: var(--t-meta); font-weight: 400; }
.cons-saved li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-input); background: var(--ok-soft); }
.cons-saved li > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.cons-done { flex-wrap: wrap; align-items: center; }
.cons-done > span { flex: 1 1 200px; }

/* the save bar is the shared .abar (one primary); --sticky-foot (measured in consumables.js) feeds the shared
   scroll-padding so the bar never covers the focused field. With the on-screen keyboard open the bar is lifted by the
   keyboard's height (consumables.js trackBar); it follows the keyboard instantly, so it has no transition. */
/* R8 UX-01: while the bar is lifted by the keyboard, the same height is added above it (--kb, set in trackBar), so the
   page can scroll its last field (Note) clear of the bar; 0 when the keyboard is down. Instant, like the lift. */
.cons-bar { margin-top: calc(var(--s-6) + var(--kb, 0px)); }
.cons-bar .cons-bar__t { display: block; white-space: normal; color: var(--ink-2); }
.cons-bar .cons-bar__t:empty { display: none; }
.cons-rcvform .abar__total { font: var(--t-h3); }

/* ---------------------------------------------------------------- manager home */
.cons-home { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) { .cons-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cons-today { grid-column: 1 / -1; } }
.cons-today .card__body { display: grid; gap: var(--s-4); }
.cons-today__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.cons-today__t { font: var(--t-h2); }
.cons-home__btns { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .cons-home__btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .cons-home__lists { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cons-home__lists .glist__label { padding-inline: 0; }
.cons-home__none { margin: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }

/* settings */
.cons-set .cons-fs { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.cons-set .cons-fs:first-child { border-top: 0; padding-top: 0; }
.cons-set .card__head { flex-wrap: wrap; }

/* ---------------------------------------------------------------- press feedback and reduced motion */
.cons-dsum > summary { transition: background-color var(--d-fast) var(--ease-out); }
.cons-dsum > summary:active { background: var(--surface-3); }
@media (hover: hover) and (pointer: fine) {
  .cons-led__x:hover span { text-decoration: underline; }
}
html.no-motion .cons-led__x .ic, html.no-motion .cons-dsum > summary::after { transition: none; }

/* ---------------------------------------------------------------- R9 §2.13 J: the supplier's fuel tank
 * Sortly item details + Wallet add-record: the level as one large figure, a plain bar, today's draws as hairline rows,
 * the owner's owed line apart. The bar is a transform scaleX of its fill and never animates (a level is read, not
 * watched); nothing moves on the 100x-a-day draw. Phone first; at 1024 the tank card sits left, today's draws right. */
.cons-tankpage { gap: var(--s-6); }
.cons-tank__grid { display: grid; gap: var(--s-4); min-width: 0; }
@media (min-width: 1024px) { .cons-tank__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--s-6); } }
.cons-tank .card__body { display: grid; gap: var(--s-3); }
.cons-tank__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.cons-tank__t { font: var(--t-h3); }
.cons-tank__lvl { margin: 0; overflow-wrap: anywhere; }
.cons-tank__lvl strong { font: var(--t-title); font-variant-numeric: tabular-nums; }
.cons-tank__of { font: var(--t-meta); color: var(--ink-3); }
.cons-tank__bar { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cons-tank__bar > span { position: absolute; inset: 0; background: var(--accent); border-radius: inherit; transform: scaleX(var(--f, 0)); transform-origin: left center; }
.cons-tank__bar.is-low > span { background: var(--warn-bar); }
.cons-tank__acts { display: grid; gap: var(--s-3); }
@media (min-width: 480px) { .cons-tank__acts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.cons-tank__acts .btn, .cons-tank .cons-home__btns .btn { min-height: var(--tap); }
.cons-tank__today { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.cons-tank__owed { display: grid; gap: var(--s-1); justify-items: start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cons-tank__owedl { margin: 0; font: var(--t-meta); color: var(--ink-3); overflow-wrap: anywhere; }
.cons-tank__owedv { margin: 0; font: var(--t-h2); color: var(--warn); }
.cons-tank__owed .btn { min-height: var(--tap); margin-inline-start: calc(-1 * var(--s-3)); }
.cons-tank__line { display: grid; gap: var(--s-2); margin: 0; font: var(--t-meta); color: var(--ink-2); }
.cons-home > .cons-tank { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- R10 §8.7: the tank gauge beside the level
 * art.tankGauge at 96 px tall: the level fill (scaleY from the bottom, --warn-bar when below the tick) and the dashed
 * low tick, "Low at 400" under it. The figure and the bar stay to its right (the bar is still read, never animated).
 * The fill moves only on the first view this session and when the level changed since (consumables.js gaugeMoments). */
.cons-tank__vis { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3) var(--s-4); min-width: 0; }
.cons-tank__read { display: grid; gap: var(--s-3); min-width: 0; }
.cons-tank__gauge { display: grid; justify-items: center; gap: var(--s-1); width: 112px; }
.cons-tank__gauge .illo { width: 112px; height: 96px; }
.cons-tank__gaugelow { font: var(--t-meta); color: var(--ink-3); white-space: nowrap; }
.cons-tank__st { display: inline-flex; }
@media (max-width: 359px) { .cons-tank__vis { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
/* beside the gauge the figure stands alone; "of 2,000 L" goes under it instead of wrapping mid-phrase */
.cons-tank__vis .cons-tank__of { display: block; }

/* ================================================================ R11.1 concept A — "site instruments"
 * Only under html[data-concept="a"]; with no concept nothing here applies. Tokens come from concept-a.css; the A band is
 * added by consumables.js (aDecorate) after each R10 screen renders. Prefix: cons-a-. */
html[data-concept="a"] .cons-a { display: grid; gap: var(--s-4); min-width: 0; }
html[data-concept="a"] .cons--a-overview > .cons-strip { display: none; }          /* the KPI strip says the same, with sparks */
html[data-concept="a"] .cons--a-tank .cons-tank__vis { display: none; }             /* the upright tank above says the level */
html[data-concept="a"] .cons-tank--a .cons-tank__lvl, html[data-concept="a"] .cons-tank--a .cons-tank__bar { display: none; }
html[data-concept="a"] .cons-a-sub { margin: 0; font: 600 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
html[data-concept="a"] .cons-a-sub span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-family: var(--font); }
html[data-concept="a"] .cons-a-none { margin: 0; font: var(--t-meta); color: var(--ink-3); }

/* R10 sections sit on A's white surfaces */
html[data-concept="a"] .cons--a .cons-branch, html[data-concept="a"] .cons--a .cons-morebox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: var(--s-4); }
html[data-concept="a"] .cons--a .cons-branch__title, html[data-concept="a"] .cons--a .cons-morebox__t { font: 600 15px/20px var(--font); letter-spacing: -.01em; }

/* ---- instruments card */
html[data-concept="a"] .cons-a-inst__grid { display: grid; gap: var(--s-5); min-width: 0; }
html[data-concept="a"] .cons-a-tankinst { display: grid; gap: var(--s-4); min-width: 0; }
html[data-concept="a"] .cons-a-tankinst__tank { display: flex; align-items: flex-end; gap: var(--s-4); min-width: 0; }
html[data-concept="a"] .cons-a-tankinst__trend { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
html[data-concept="a"] .cons-a-rings { display: grid; gap: 2px; align-content: start; min-width: 0; }
@media (min-width: 640px) { html[data-concept="a"] .cons-a-tankinst { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); } html[data-concept="a"] .cons-a-tankinst__tank { flex-direction: column; align-items: flex-start; } }
@media (min-width: 1100px) {
  html[data-concept="a"] .cons-a-inst__grid { grid-template-columns: minmax(0, 1.75fr) minmax(250px, 1fr); }
  html[data-concept="a"] .cons-a-inst__grid.is-notank { grid-template-columns: minmax(0, 1fr); }
  html[data-concept="a"] .cons-a-inst__grid > .cons-a-rings { border-left: 1px solid var(--line); padding-left: var(--s-5); }
  html[data-concept="a"] .cons-a-inst--tank .cons-a-inst__grid { grid-template-columns: minmax(0, 1fr); }
}

/* the upright tank */
html[data-concept="a"] .cons-a-tank { flex: none; line-height: 0; }
html[data-concept="a"] .cons-a-tank__svg { display: block; overflow: visible; }
html[data-concept="a"] .cons-a-tank__body { fill: var(--surface-2); }
html[data-concept="a"] .cons-a-tank__fill { fill: currentColor; }
html[data-concept="a"] .cons-a-tank__sheen { fill: var(--hero-ink); opacity: .16; }
html[data-concept="a"] .cons-a-tank__rim { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
html[data-concept="a"] .cons-a-tank__tick { stroke: var(--line-strong); stroke-width: 1.5; }
html[data-concept="a"] .cons-a-tank__alert { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 5 3; }
html[data-concept="a"] .cons-a-read { display: grid; gap: 2px; min-width: 0; }
html[data-concept="a"] .cons-a-read__v { margin: 0; font: 500 28px/34px var(--font-mono); letter-spacing: -.03em; white-space: nowrap; }
html[data-concept="a"] .cons-a-read__of { margin: 0 0 var(--s-2); font-size: 13px; line-height: 18px; color: var(--ink-3); }
html[data-concept="a"] .cons-a-read__al { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-2); font-size: 12px; line-height: 16px; color: var(--ink-2); }
html[data-concept="a"] .cons-a-read__al i { width: 16px; height: 0; border-top: 2px dashed var(--danger); }
html[data-concept="a"] .cons-a-read .ca-tag { justify-self: start; }

/* 7-day level line */
html[data-concept="a"] .cons-a-line { color: var(--accent); min-width: 0; }
html[data-concept="a"] .cons-a-line--bad { color: var(--danger); }
html[data-concept="a"] .cons-a-line__plot { position: relative; height: 104px; margin-top: 4px; }
html[data-concept="a"] .cons-a-line__svg { display: block; width: 100%; height: 100%; overflow: visible; }
html[data-concept="a"] .cons-a-line__grid { stroke: var(--line); stroke-width: 1; }
html[data-concept="a"] .cons-a-line__alert { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 5 4; }
html[data-concept="a"] .cons-a-line__path { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
html[data-concept="a"] .cons-a-line__dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--surface); border: 2px solid currentColor; }
html[data-concept="a"] .cons-a-line__dot.is-now { background: currentColor; box-shadow: 0 0 0 4px var(--ca-glow); }
html[data-concept="a"] .cons-a-line__dot.is-refill { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-color: var(--ok); background: var(--ok); }
html[data-concept="a"] .cons-a-line__al { position: absolute; right: 0; transform: translateY(-120%); padding: 0 4px; border-radius: 4px; background: var(--surface); font-size: 11px; line-height: 14px; color: var(--danger); }
html[data-concept="a"] .cons-a-axis { display: flex; justify-content: space-between; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; font: 400 11px/14px var(--font-mono); color: var(--ink-3); }
html[data-concept="a"] .cons-a-axis li.is-today { color: var(--accent-text); font-weight: 600; }
html[data-concept="a"] .cons-a-axis--14 { padding: 0 4px; }
html[data-concept="a"] .cons-a-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding-top: var(--s-3); margin-top: var(--s-1); border-top: 1px solid var(--line); }
html[data-concept="a"] .cons-a-stat { min-width: 0; }
html[data-concept="a"] .cons-a-stat + .cons-a-stat { border-left: 1px solid var(--line); padding-left: var(--s-3); }
html[data-concept="a"] .cons-a-stat__k { margin: 0; font: 500 12px/16px var(--font); color: var(--ink-3); }
html[data-concept="a"] .cons-a-stat__v { margin: 2px 0 0; font: 500 18px/24px var(--font-mono); letter-spacing: -.03em; white-space: nowrap; }
html[data-concept="a"] .cons-a-stat__m { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .cons-a-stat__eta { margin: 2px 0 0; font: 500 13px/18px var(--font); color: var(--ink-2); }
@media (max-width: 479px) {
  html[data-concept="a"] .cons-a-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-concept="a"] .cons-a-stat:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; padding-top: var(--s-2); border-top: 1px solid var(--line); }
}

/* daily bars */
html[data-concept="a"] .cons-a-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; min-width: 0; }
html[data-concept="a"] .cons-a-bars__c { display: grid; justify-items: center; gap: 4px; min-width: 0; }
html[data-concept="a"] .cons-a-bars__v { font-size: 11px; line-height: 12px; height: 12px; color: var(--ink-2); white-space: nowrap; }
html[data-concept="a"] .cons-a-bars__t { position: relative; width: 100%; height: 64px; }
html[data-concept="a"] .cons-a-bars__t i { position: absolute; left: 50%; width: min(72%, 34px); margin-left: calc(min(72%, 34px) / -2); bottom: 0; min-height: 2px; border-radius: 3px 3px 1px 1px; transform-origin: bottom; }
html[data-concept="a"] .cons-a-bars__c.is-zero .cons-a-bars__t i { background: var(--line); height: 2px !important; }
html[data-concept="a"] .cons-a-bars__c:not(.is-today) .cons-a-bars__t i { opacity: .78; }
html[data-concept="a"] .cons-a-bars__mk { position: absolute; left: 50%; bottom: -7px; width: 10px; height: 8px; margin-left: -5px; background: var(--ok); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
html[data-concept="a"] .cons-a-bars__d { margin-top: 4px; font: 400 11px/13px var(--font-mono); color: var(--ink-3); white-space: nowrap; }
html[data-concept="a"] .cons-a-bars__c.is-today .cons-a-bars__d { color: var(--accent-text); font-weight: 600; }

/* ring gauges (tips, wire) */
html[data-concept="a"] .cons-a-ring { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: var(--s-3); width: 100%; min-height: 88px; padding: 4px var(--s-2); border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; }
html[data-concept="a"] button.cons-a-ring:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] button.cons-a-ring:hover { background: var(--surface-3); } }
html[data-concept="a"] .cons-a-ring__dial { position: relative; width: 80px; height: 80px; }
html[data-concept="a"] .cons-a-ring__svg { display: block; overflow: visible; }
html[data-concept="a"] .cons-a-ring__track { fill: none; stroke: var(--surface-2); stroke-width: 8; stroke-linecap: round; }
html[data-concept="a"] .cons-a-ring__fill { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
html[data-concept="a"] .cons-a-ring__tick { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: .6; }
html[data-concept="a"] .cons-a-ring__v { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 500; }
html[data-concept="a"] .cons-a-ring__txt { display: grid; gap: 2px; justify-items: start; min-width: 0; }
html[data-concept="a"] .cons-a-ring__n { font: 600 14px/20px var(--font); }
html[data-concept="a"] .cons-a-ring__m { font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* end of day as a checklist */
html[data-concept="a"] .cons-a-eod { display: grid; gap: var(--s-3); }
html[data-concept="a"] .cons-a-eod__row { display: grid; gap: var(--s-2); min-width: 0; }
html[data-concept="a"] .cons-a-eod__t { display: flex; justify-content: space-between; margin: 0; font: 600 13px/18px var(--font); }
html[data-concept="a"] .cons-a-eod__t .ca-num { font-weight: 500; color: var(--ink-3); font-size: 12px; }
html[data-concept="a"] .cons-a-eod__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
html[data-concept="a"] .cons-a-eod__b { display: grid; justify-items: center; gap: 3px; width: 100%; min-height: 72px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-3); color: var(--ink); font: inherit; text-align: center; }
html[data-concept="a"] button.cons-a-eod__b:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] button.cons-a-eod__b:hover { border-color: var(--line-strong); } }
html[data-concept="a"] .cons-a-eod__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
html[data-concept="a"] .is-done .cons-a-eod__ic { background: var(--ok-soft); color: var(--ok); }
html[data-concept="a"] .is-due .cons-a-eod__ic { background: var(--accent-soft); color: var(--accent-text); }
html[data-concept="a"] .is-due .cons-a-eod__b { border-style: dashed; border-color: var(--accent); }
html[data-concept="a"] .is-missing .cons-a-eod__ic { background: var(--warn-soft); color: var(--warn); }
html[data-concept="a"] .is-missing .cons-a-eod__b { border-color: var(--warn-bar); background: var(--warn-soft); }
html[data-concept="a"] .cons-a-eod__d { font: 400 11px/14px var(--font-mono); color: var(--ink-2); white-space: nowrap; }
html[data-concept="a"] .cons-a-eod__d b { font-weight: 600; color: var(--ink); }
html[data-concept="a"] .cons-a-eod__s { font-size: 11px; line-height: 14px; color: var(--ink-3); white-space: nowrap; }
html[data-concept="a"] .is-missing .cons-a-eod__s { color: var(--warn); font-weight: 600; }
html[data-concept="a"] .is-due .cons-a-eod__s { color: var(--accent-text); font-weight: 600; }
@media (max-width: 559px) { html[data-concept="a"] .cons-a-eod__days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { html[data-concept="a"] .cons-a-col .cons-a-eod__s { font-size: 11px; } }

/* deliveries and draws timeline */
html[data-concept="a"] .cons-a-tl { display: grid; margin: 0; padding: 0; list-style: none; }
html[data-concept="a"] .cons-a-tl__day { padding: var(--s-2) 0 var(--s-1); font: 600 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html[data-concept="a"] .cons-a-tl__day:first-child { padding-top: 0; }
html[data-concept="a"] .cons-a-tl__ev { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: 6px 0; }
html[data-concept="a"] .cons-a-tl__ev::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--line); }
html[data-concept="a"] .cons-a-tl__dot { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); box-shadow: 0 0 0 3px var(--surface); }
html[data-concept="a"] .cons-a-tl__ev.is-draw .cons-a-tl__dot { background: var(--accent-soft); color: var(--accent-text); }
html[data-concept="a"] .cons-a-tl__ev.is-rcv .cons-a-tl__dot, html[data-concept="a"] .cons-a-tl__ev.is-refill .cons-a-tl__dot { background: var(--ok-soft); color: var(--ok); }
html[data-concept="a"] .cons-a-tl__main { display: grid; min-width: 0; }
html[data-concept="a"] .cons-a-tl__t { font: 500 14px/20px var(--font); }
html[data-concept="a"] .cons-a-tl__m { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-concept="a"] .cons-a-tl__r { display: grid; justify-items: end; gap: 4px; }
html[data-concept="a"] .cons-a-tl__at { font-size: 12px; line-height: 20px; color: var(--ink-2); }

/* usage per load: tips per wire in its band, flags as markers */
html[data-concept="a"] .cons-a-eff { display: grid; gap: var(--s-5); }
html[data-concept="a"] .cons-a-eff__row { display: grid; gap: var(--s-2); min-width: 0; }
html[data-concept="a"] .cons-a-eff__row + .cons-a-eff__row { padding-top: var(--s-4); border-top: 1px solid var(--line); }
html[data-concept="a"] .cons-a-eff__t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 600 13px/18px var(--font); }
html[data-concept="a"] .cons-a-eff__t > span:first-child { margin-right: auto; }
html[data-concept="a"] .cons-a-eff__plot { position: relative; height: 112px; margin: 10px 0 4px; border-bottom: 1px solid var(--line); background-image: linear-gradient(var(--ca-grid) 1px, transparent 1px); background-size: 100% 25%; }
html[data-concept="a"] .cons-a-eff__band { position: absolute; left: 0; right: 0; background: var(--ok-soft); border-top: 1px dashed var(--ok); border-bottom: 1px dashed var(--ok); }
html[data-concept="a"] .cons-a-eff__bl { position: absolute; right: 2px; transform: translateY(-50%); padding: 0 3px; border-radius: 3px; background: var(--surface); font-size: 11px; line-height: 12px; color: var(--ok); }
html[data-concept="a"] .cons-a-eff__mk { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface); }
html[data-concept="a"] .cons-a-eff__mk.is-high { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
html[data-concept="a"] .cons-a-eff__mk.is-low, html[data-concept="a"] .cons-a-eff__mk.is-tipsNoWire, html[data-concept="a"] .cons-a-eff__mk.is-wireNoTips { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--warn-bar); box-shadow: 0 0 0 3px var(--warn-soft); }
html[data-concept="a"] .cons-a-eff__mk.is-missing { background: var(--surface); border: 2px solid var(--line-strong); box-shadow: none; margin-top: -11px; }
html[data-concept="a"] .cons-a-eff__mk.is-none { background: var(--line-strong); width: 6px; height: 6px; margin: -9px 0 0 -3px; }
html[data-concept="a"] .cons-a-key { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .cons-a-key span { display: inline-flex; align-items: center; gap: 6px; }
html[data-concept="a"] .cons-a-key .cons-a-eff__mk { position: static; margin: 0; }
html[data-concept="a"] .cons-a-key__band { width: 14px; height: 10px; background: var(--ok-soft); border-top: 1px dashed var(--ok); border-bottom: 1px dashed var(--ok); }
html[data-concept="a"] .cons-a-pers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
html[data-concept="a"] .cons-a-per { padding: var(--s-3); border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line); min-width: 0; }
html[data-concept="a"] .cons-a-per__k { margin: 0; font: 500 12px/16px var(--font); color: var(--ink-3); }
html[data-concept="a"] .cons-a-per__v { margin: 2px 0; font: 500 22px/28px var(--font-mono); letter-spacing: -.03em; }
html[data-concept="a"] .cons-a-per__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* overview layout */
html[data-concept="a"] .cons-a-kpis .ca-kpi__value { white-space: nowrap; }
html[data-concept="a"] .cons-a-row, html[data-concept="a"] .cons-a-col { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
@media (min-width: 1100px) { html[data-concept="a"] .cons-a-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* checks: counts by kind */
html[data-concept="a"] .cons-a-cnts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 900px) { html[data-concept="a"] .cons-a-cnts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-concept="a"] .cons-a-cnt { padding: 14px var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); min-width: 0; }
html[data-concept="a"] .cons-a-cnt.is-bad { box-shadow: inset 3px 0 0 var(--danger), var(--shadow-1); }
html[data-concept="a"] .cons-a-cnt.is-warn { box-shadow: inset 3px 0 0 var(--warn-bar), var(--shadow-1); }
html[data-concept="a"] .cons-a-cnt__k { margin: 0; font: 500 13px/18px var(--font); color: var(--ink-2); }
html[data-concept="a"] .cons-a-cnt__v { margin: 4px 0 0; font: 500 30px/36px var(--font-mono); letter-spacing: -.03em; }
html[data-concept="a"] .cons-a-cnt.is-bad .cons-a-cnt__v { color: var(--danger); }
html[data-concept="a"] .cons-a-cnt.is-none .cons-a-cnt__v { color: var(--ink-3); }
html[data-concept="a"] .cons-a-cnt__m { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* bought vs received, side by side */
html[data-concept="a"] .cons-a-pairs { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { html[data-concept="a"] .cons-a-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-5); } }
html[data-concept="a"] .cons-a-pair { display: grid; gap: var(--s-2); min-width: 0; }
html[data-concept="a"] .cons-a-pair__n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 500 14px/20px var(--font); }
html[data-concept="a"] .cons-a-pair__n .ic { color: var(--ink-3); }
html[data-concept="a"] .cons-a-pair__n > span:first-of-type { margin-right: auto; }
html[data-concept="a"] .cons-a-pair__bars { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 6px var(--s-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .cons-a-pair__t, html[data-concept="a"] .cons-a-owe__t { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
html[data-concept="a"] .cons-a-pair__t i, html[data-concept="a"] .cons-a-owe__t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transform-origin: left; }
html[data-concept="a"] .cons-a-pair__v { color: var(--ink); text-align: right; white-space: nowrap; }

/* suppliers owed */
html[data-concept="a"] .cons-a-owes { display: grid; margin: 0; padding: 0; list-style: none; }
html[data-concept="a"] .cons-a-owe { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(60px, 1.4fr) auto; grid-template-areas: "n t v" "n m m"; align-items: center; gap: 2px var(--s-3); padding: var(--s-2) 0; }
html[data-concept="a"] .cons-a-owe + .cons-a-owe { border-top: 1px solid var(--line); }
html[data-concept="a"] .cons-a-owe__n { grid-area: n; display: inline-flex; align-items: center; gap: 6px; font: 500 14px/20px var(--font); min-width: 0; }
html[data-concept="a"] .cons-a-owe__n .ic { color: var(--ink-3); flex: none; }
html[data-concept="a"] .cons-a-owe__t { grid-area: t; }
html[data-concept="a"] .cons-a-owe__v { grid-area: v; font-size: 14px; text-align: right; white-space: nowrap; }
html[data-concept="a"] .cons-a-owe__m { grid-area: m; font-size: 12px; color: var(--ink-3); text-align: right; }
@media (max-width: 479px) { html[data-concept="a"] .cons-a-owe { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "t t" "m m"; } html[data-concept="a"] .cons-a-owe__m { text-align: left; } }

/* task screens: compact */
html[data-concept="a"] .cons-a--task { margin: 0 0 var(--s-4); }
html[data-concept="a"] .cons-a-taskcard { padding: var(--s-3); gap: var(--s-2); }
html[data-concept="a"] .cons-a-today { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
html[data-concept="a"] .cons-a-today span { display: inline-flex; align-items: center; gap: 6px; }
html[data-concept="a"] .cons-a-today .ic { color: var(--ink-3); }
html[data-concept="a"] form.cons-end + .cons-a--task { margin: var(--s-5) 0 0; }
html[data-concept="a"] .cons-a--home { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
html[data-concept="a"] .cons-a--hometank { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
html[data-concept="a"] .cons-tank--a .cons-tank__head + .cons-home__btns { margin-top: var(--s-2); }

/* motion: the tank fills, the lines draw, bars and rings grow — first look this session only, never under no-motion */
html[data-concept="a"] .ca-enter .cons-a-tank__fill { transform-box: fill-box; transform-origin: 50% 100%; animation: cons-a-fill 900ms var(--ease-out) both; animation-delay: 160ms; }
html[data-concept="a"] .ca-enter .cons-a-line__path { stroke-dasharray: 1; animation: cons-a-draw 760ms var(--ease-out) both; animation-delay: 200ms; }
html[data-concept="a"] .ca-enter .cons-a-line__area, html[data-concept="a"] .ca-enter .cons-a-line__dot, html[data-concept="a"] .ca-enter .cons-a-eff__mk { animation: cons-a-fade 360ms var(--ease-out) both; animation-delay: 600ms; }
html[data-concept="a"] .ca-enter .cons-a-bars__t i { animation: cons-a-grow 600ms var(--ease-out) both; animation-delay: 240ms; }
html[data-concept="a"] .ca-enter .cons-a-pair__t i, html[data-concept="a"] .ca-enter .cons-a-owe__t i { animation: cons-a-growx 600ms var(--ease-out) both; animation-delay: 200ms; }
html[data-concept="a"] .ca-enter .cons-a-ring__fill { animation: ca-gauge 900ms var(--ease-out) both; animation-delay: 200ms; }
html[data-concept="a"] .ca-enter .cons-a-cnt, html[data-concept="a"] .ca-enter .cons-a-eod__c, html[data-concept="a"] .ca-enter .cons-a-tl__ev { animation: ca-rise 280ms var(--ease-out) both; }
html[data-concept="a"] .ca-enter .cons-a-cnt { animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes cons-a-fill { from { transform: scaleY(0); } to { transform: none; } }
@keyframes cons-a-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cons-a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cons-a-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes cons-a-growx { from { transform: scaleX(0); } to { transform: none; } }
html[data-concept="a"].no-motion .cons-a *, html[data-concept="a"].no-motion .cons-a-eod__b, html[data-concept="a"].no-motion .cons-a-ring { animation: none !important; transition: none !important; }
html[data-concept="a"] .cons-a-item { display: grid; gap: var(--s-4); min-width: 0; }
html[data-concept="a"] .cons-a-item__ring { display: grid; gap: 2px; align-content: start; }
html[data-concept="a"] .cons-a-item__avg { margin: 0 0 0 var(--s-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .cons-a-item__c { display: grid; gap: var(--s-2); min-width: 0; }
@media (min-width: 1100px) { html[data-concept="a"] .cons-a-item { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); } }
html[data-concept="a"] .cons--a-item .cons-a { margin-bottom: var(--s-2); }
@media (min-width: 1100px) { html[data-concept="a"] .cons--a-item .cons-a { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } html[data-concept="a"] .cons--a-item .cons-a-item { grid-template-columns: minmax(0, 1fr); } }
/* on a task screen the 7 days stay one compact row (read-only there, nothing to tap) */
html[data-concept="a"] .cons-a--task .cons-a-eod__days, html[data-concept="a"] .cons-a--home .cons-a-eod__days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
html[data-concept="a"] .cons-a--task .cons-a-eod__b, html[data-concept="a"] .cons-a--home .cons-a-eod__b { min-height: 52px; padding: 6px 0; }
@media (max-width: 559px) {
  html[data-concept="a"] .cons-a--task .cons-a-eod__s, html[data-concept="a"] .cons-a--home .cons-a-eod__s { display: none; }
  html[data-concept="a"] .cons-a--task .cons-a-eod__d, html[data-concept="a"] .cons-a--home .cons-a-eod__d { display: grid; font-size: 11px; line-height: 12px; }
}
/* R11.2: Design A's .btn--sm is 36 px (44 on touch); the tank page keeps its approved 48 px targets (R9) */
html[data-concept="a"] .cons-tankpage .btn--sm { min-height: var(--tap); }