/* ============================================================================
   CORRECTIVE PASS v80 — loaded after polish-v68.css.

   Blocks 1–3 undo damage that pass caused. It is kept as a separate file, and
   named as a correction, so the mistakes stay visible rather than being quietly
   edited out of history.
   ========================================================================== */

/* ── 1. SEARCH FIELDS: I BROKE THESE ──────────────────────────────────────
   polish-v68 assumed the glyph was a direct <svg> child of .list-search and that
   the input carried the visible box. Neither is true: the markup is
       .list-search > span > svg  +  input.input.field
   and the WRAPPER is the visible field — the input inside it is chrome-less.
   So `.list-search>svg{position:absolute}` matched nothing (the glyph stayed in
   flow at the top-left) while `padding-left:38px` pushed the placeholder away
   from it, and `.list-search{border:0;background:none}` deleted the only border
   the control had. That is exactly what the screenshots show.

   Correct model: the wrapper IS the control. It gets the border, the background
   and the focus ring; the input is transparent and fills the rest. */
body .list-search,body .hc-search,body .cc-map-search{
  position:relative;display:flex;align-items:center;gap:8px;
  border:var(--hair) solid var(--line-2);background:var(--panel);
  border-radius:9px;padding:0 11px;min-height:36px;box-shadow:none}
body .list-search>span,body .hc-search>span,body .cc-map-search>span{
  position:static;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:16px;height:16px;transform:none;opacity:.55;color:var(--fg)}
body .list-search>span svg,body .hc-search>span svg,body .cc-map-search>span svg{
  width:16px;height:16px;display:block}
body .list-search>input,body .hc-search input,body .cc-map-search input{
  flex:1 1 auto;min-width:0;width:auto;
  border:0;background:none;box-shadow:none;padding:0;height:34px;border-radius:0}
/* A composite control's ring belongs on the box you can SEE, which here is the
   wrapper. This is not the "ring on a wrapper" mistake — the input has no box. */
body .list-search:focus-within,body .hc-search:focus-within,body .cc-map-search:focus-within{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--line-3)}
body .list-search>input:focus-visible,body .hc-search input:focus-visible{outline:none}

/* ── 2. FORM GRID: I BROKE THIS TOO ───────────────────────────────────────
   polish-v68 replaced .form-grid with repeat(auto-fit,minmax(min(100%,220px),1fr)).
   auto-fit generated a THIRD, zero-width track for two children (measured:
   "336.667px 336.667px 0px") and re-sized every paired row, so labels and inputs
   stopped lining up down the form. Two equal columns is what the form wants; the
   single-column collapse is a media query, not a guess made by the grid. */
body .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
body .form-grid>*{min-width:0}
@media (max-width:720px){body .form-grid{grid-template-columns:minmax(0,1fr)}}

/* ── 3. NUMBER INPUTS: SPINNER OVER THE UNIT ──────────────────────────────
   Hovering a number field revealed the native spinner, which sits exactly where
   the unit suffix is drawn — so "months" and the arrows overlapped. The unit is
   the useful thing; the spinner is not, on a field this size. */
body input[type=number]{-moz-appearance:textfield;appearance:textfield}
body input[type=number]::-webkit-outer-spin-button,
body input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
/* the suffix sits inside the field's padding, so text can never run under it */
.veh-unit-wrap{position:relative;display:block}
.veh-unit-wrap>input{width:100%;padding-right:52px}
.veh-unit-suffix{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--muted);pointer-events:none;line-height:1}

/* ── 4. STATUS DOT ALIGNMENT ──────────────────────────────────────────────
   .veh-status-row put an <i class="dot"> next to a <select> with no cross-axis
   alignment, so the dot sat 7px below the select's centre (measured). Any
   dot-beside-a-control row gets the same treatment. */
.veh-status-row,.status-row9{display:flex;align-items:center;gap:9px}
.veh-status-row>.dot,.status-row9>.dot{flex:0 0 auto;margin:0;align-self:center}
/* The select carried a 14px bottom margin, so the flex line measured 50px while
   the control was only 36px tall: the dot centred on the LINE and the select sat
   at its top, which is the whole 7px offset. Zero the margin and both agree. */
body .veh-status-row>select,body .veh-status-row>.input,
body .status-row9>select,body .status-row9>.input{
  flex:1 1 auto;min-width:0;margin:0}
/* the same pattern anywhere a dot precedes text */
.dot{flex:0 0 auto;vertical-align:middle}

/* ── 5. TABLES SCROLL SIDEWAYS ────────────────────────────────────────────
   Columns are sized to their content now, so a wide table must be pannable
   rather than clipped — and the header has to travel with the body. */
.dtable-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain}
.dtable{min-width:var(--minw,100%)}
.dtable-wrap::-webkit-scrollbar{height:10px}
.dtable-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.dtable-wrap::-webkit-scrollbar-track{background:transparent}

/* ── 6. WIDGETS ARE NOT ALL THE SAME SIZE ─────────────────────────────────
   Every dashboard tile was one grid cell, so a six-month bar chart got the same
   footprint as a two-number counter and was unreadable. A chart earns width and
   height; a counter does not. */
/* .dash-grid is TWELVE 67.5px tracks and an ordinary tile spans 3 (235px wide).
   My first attempt said `span 2`, which made the fuel chart NARROWER than a
   plain counter - the opposite of the point. A time-series needs half the row to
   be legible; a donut is square, so 4 tracks is enough for it. */
body .dash-grid,body .dw-grid{grid-auto-rows:minmax(0,auto)}
body .dash-grid>.dw:has(.chart),body .dash-grid>.dw:has(.dw-chart),
body .dash-grid>.dw:has(canvas),body .dash-grid>.card:has(.chart),
body .dw-grid>.dw:has(.chart),body .dw-grid>.dw:has(.dw-chart){grid-column:span 6}
body .dash-grid>.dw:has(.chart) .chart,body .dash-grid>.dw:has(.dw-chart) .dw-chart,
body .dash-grid>.card:has(.chart) .chart,
body .dw-grid>.dw:has(.chart) .chart{min-height:250px}
/* a donut/pie is square, so it does not need half the row */
body .dash-grid>.dw:has(.donut),body .dash-grid>.card:has(.donut){grid-column:span 4}
body .dash-grid>.dw:has(.donut) .chart{min-height:220px}
@media (max-width:1100px){
  body .dash-grid>.dw:has(.chart),body .dash-grid>.dw:has(.dw-chart),
  body .dash-grid>.dw:has(canvas),body .dash-grid>.card:has(.chart){grid-column:1/-1}
}
/* chart labels must not collide when the axis is tight */
.chart text,.dw-chart text{font-size:10.5px}

/* ── 7. BOXES THAT READ AS BOXES ──────────────────────────────────────────
   Reported: the vehicle form looked like one continuous background. In light mode
   the card surface (#FFFFFF) and the content surface behind it were near enough
   to identical that a 62%-alpha hairline could not separate them. Cards get a
   full-strength edge plus a low shadow; the page behind them gets the page
   colour, so the separation comes from the surfaces, not just the line. */
.page,.detail-page,.settings-page2{background:var(--bg)}
/* No shadow here on purpose. design-system.css declares
   `.card,.row,.dtr{box-shadow:none!important}` - the flat look is a deliberate
   decision, and answering an intentional !important with another one would just
   start a fight. Separation comes from the two things that do work: a card
   surface that differs from the page (white on #F4F2EE, dark panel on #1A1917)
   and a full-strength --line-3 edge instead of the 62% hairline. */
body .card,body .dw,body .dw-card,body .dtable-wrap,
body .veh-form-sec.vfs-card9,body .cfg-card9{
  background:var(--panel);border:var(--hair) solid var(--line-3)}
.vfs-head9{background:var(--hover)}

/* ── 8. FIELD TEXT AND LABEL RHYTHM ───────────────────────────────────────
   Reported repeatedly as "text spacing looks bad everywhere". Labels, hints and
   inputs each carried their own margins from different eras, so vertical rhythm
   drifted within a single card. One scale for the field primitive. */
.field-wrap,.field,.form-row{display:block}
.field-label,.field-wrap>.field-label{
  display:block;margin:0 0 6px;font-size:12.5px;line-height:1.35;font-weight:560;
  color:var(--fg);letter-spacing:0;text-transform:none}
.field-label>.req9,.field-label>.req,.field-label i{color:var(--danger);margin-left:3px;font-style:normal}
.field-wrap>.field-hint,.field>.field-hint,p.field-hint{
  margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.field-error,.form-error{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--danger)}
.field-error:empty{display:none;margin:0}
body .input,body select,body textarea{
  padding:8px 11px;font-size:13.5px;line-height:1.4;min-height:36px}
body textarea{min-height:84px;padding-top:9px}
.field-wrap+.field-wrap{margin-top:14px}
/* Inline control groups: one baseline, one gap, no inherited stacking margin.
   .money-row is a price input plus a currency select and must read as one
   control, not two fields that happen to be near each other. */
body .money-row,body .input-group9,body .unit-row9{
  display:flex;align-items:center;gap:8px}
body .money-row>*,body .input-group9>*,body .unit-row9>*{margin:0}
body .money-row>input{flex:1 1 auto;min-width:0}
body .money-row>select{flex:0 0 auto;width:auto;min-width:88px}
.section-label+.form-grid,.section-label+.field-wrap,.section-label+.field{margin-top:0}

/* ============================================================================
   CORRECTIONS ROUND 2 — three of these are my own regressions.
   ========================================================================== */

/* ── 9. LIGHT-MODE HOVER MADE FILLED BUTTONS UNREADABLE ───────────────────
   polish-v68 applied `.btn:hover{background:var(--hover)}` to EVERY button.
   .btn-primary carries color:var(--on-accent) — white — so on hover its
   background became #F3F0EA in light mode while the text stayed white: an
   invisible label. A filled button already has its own hover colour; only the
   transparent ones need one supplied. */
@media (hover:hover){
  body .btn:not(:disabled):hover{background:revert}
  body .btn-ghost:not(:disabled):hover,body .icon-btn:not(:disabled):hover,
  body .btn-plain:not(:disabled):hover{background:var(--hover);color:var(--fg)}
  body .btn-primary:not(:disabled):hover{background:var(--accent-hover);color:var(--on-accent)}
  body .btn-danger:not(:disabled):hover{filter:brightness(1.08);color:#fff}
}

/* ── 10. DASHBOARD TILES SAT ON DIFFERENT BASELINES ──────────────────────
   The first tile had margin:0 while every other tile carried margin-top:16px, so
   tile one floated 16px above its own row (measured). The grid's gap already
   provides that spacing; the margins were doubling it and staggering the row. */
body .dash-grid>*,body .dw-grid>*{margin:0}

/* ── 11. GRID CELLS INHERITED A STACKING MARGIN (mine) ───────────────────
   polish-v68 added `.field-wrap+.field-wrap{margin-top:14px}` for vertical
   stacking, but inside .form-grid the siblings are side by side — so the second
   COLUMN was pushed 14px down and every paired row lost its baseline. That is
   the Sell Price card: Description at y1159, Price at y1173. */
body .form-grid>.field-wrap+.field-wrap,body .form-grid>.field+.field,
body .form-grid>*+*{margin-top:0}
/* rows of controls that belong on one line share a baseline and a gap */
body .oi-fee-row,body .fee-row9,body .inline-row9{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
body .oi-fee-row>*,body .fee-row9>*{margin:0}

/* ── 12. THE PIE TOOLTIP WAS PERMANENTLY VISIBLE ─────────────────────────
   .chart-tip is toggled with an `.on` class, but nothing hid it without one, so
   the "6 86% Idle" bubble sat over the chart at all times and read as a
   permanent highlight rather than a hover readout. */
.chart-tip:not(.on){opacity:0;visibility:hidden;pointer-events:none}
.chart-tip{transition:opacity .12s}

/* ── 13. WIDGET TITLES AND SIZES ──────────────────────────────────────────
   "VEHICLE RENEWAL REMINDERS" wrapped to THREE lines in a 235px tile, which both
   looked broken and pushed each card's content to a different height. Tighter
   tracking, a smaller cap size and a reserved two-line header height mean every
   card's body starts at the same y whatever its title length. */
body .dw h3,body .dw-card h3,body .dash-grid>.card>h3,
body .dash-grid .dw-title{
  font-size:11.5px;font-weight:700;letter-spacing:.045em;line-height:1.35;
  text-transform:uppercase;color:var(--muted);margin:0;
  min-height:2.7em;display:flex;align-items:flex-start;
  overflow-wrap:anywhere;text-wrap:balance}

/* Anything drawing a chart needs room, but `:has(svg)` matched EVERY tile - each
   card carries a small svg for its "..." menu - so counters were widened to chart
   size. These are the real containers, read off the live page:
     bar / line : .chart.bar-chart, .dw-cost-chart
     pie        : .pie  (a conic-gradient div - there is no svg to match)
     list       : .hist-list, .activity  */
body .dash-grid>.dw:has(.chart.bar-chart),body .dash-grid>.dw:has(.dw-cost-chart),
body .dash-grid>.dw:has(.line-chart),body .dash-grid>.dw:has(canvas),
body .dash-grid>.card:has(.chart.bar-chart){grid-column:span 6}
body .dash-grid>.dw:has(.chart.bar-chart) .chart,
body .dash-grid>.dw:has(.dw-cost-chart) .chart{min-height:250px}

/* a pie is square: it wants width for its legend, not half the row */
body .dash-grid>.dw:has(.pie),body .dash-grid>.dw:has(.donut-wrap),
body .dash-grid>.card:has(.pie){grid-column:span 4}
body .dash-grid>.dw:has(.pie) .pie,body .dash-grid>.card:has(.pie) .pie{
  width:150px;height:150px}
body .dash-grid>.dw:has(.pie) .donut-wrap,body .dash-grid>.dw:has(.pie) .pie-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* a list of records needs rows, so give it the same width as a pie */
body .dash-grid>.dw:has(.hist-list),body .dash-grid>.dw:has(.activity){grid-column:span 4}

@media (max-width:1100px){
  body .dash-grid>.dw:has(.chart.bar-chart),body .dash-grid>.dw:has(.dw-cost-chart),
  body .dash-grid>.dw:has(canvas),body .dash-grid>.card:has(.chart.bar-chart){grid-column:1/-1}
}
/* ── 14. WIDGETS FILL THEIR TILE ───────────────────────────────────────────
   Giving a chart more room only helps if the chart GROWS into it. The pie sat at
   a fixed 132px in a 318px tile, so the extra width became empty space - which is
   fairly the opposite of the point. Chart bodies now stretch. */
body .dw-body{display:flex;flex-direction:column;gap:12px;min-height:0}
body .dw-body>.donut-wrap,body .dw-body>.pie-row{flex:1 1 auto;align-items:center}
body .dash-grid>.dw:has(.pie) .pie-row{justify-content:space-between}
body .dash-grid>.dw:has(.pie) .pie{width:min(190px,42vw);height:min(190px,42vw)}
body .dash-grid>.dw:has(.pie) .chart-legend{flex:1 1 auto;min-width:0}
body .dw-body>.chart,body .dw-body>.dw-cost-chart{flex:1 1 auto}
body .dw-body>.chart>svg,body .dw-body .bar-main{height:100%}
/* a list widget uses the height it was given rather than leaving a gap below */
body .dw-body>.hist-list,body .dw-body>.activity{flex:1 1 auto;overflow:auto;min-height:0}

/* ── 15. THE FEE ROW ──────────────────────────────────────────────────────
   "+ Add fee" is a ghost button and "Add saved fee..." is a select; they sat at
   different heights with a large gap between them and the fields above. One row,
   one baseline, one gap. */
body .oi-fees,body .fees-box9,body .oi-fee-add9{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
body .oi-fees>*,body .fees-box9>*{margin:0}
body .oi-fees select,body .fees-box9 select{min-height:34px;width:auto;min-width:180px}
body .oi-fees .btn,body .fees-box9 .btn{min-height:34px}
/* the total line belongs against the fields it totals, not floating away */
body .oi-totalrow{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:14px;padding-top:12px;border-top:var(--hair) solid var(--line-1)}

/* ── 16. SELECTED ROW IN A POPOVER ────────────────────────────────────────
   The size menu marks the active choice; without this it looked like any row. */
.top-pop-row.on{background:var(--hover);font-weight:600}
/* ── 17. THE FEE ROW, FOR REAL ─────────────────────────────────────────────
   The real container is .oi-tools (my earlier guess named the wrong class). It is
   already flex/centre, but "+ Add fee" is a 28px btn-sm and "Add saved fee..." is
   a 36px select, so they read as sitting on different lines. Matching their
   heights makes the alignment exact whatever the row measures. */
body .oi-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body .oi-tools>*{margin:0}
body .oi-tools>.btn,body .oi-tools>select,body .oi-tools>.input{
  min-height:34px;height:34px;line-height:1}
body .oi-tools>select{width:auto;min-width:170px}
body .oi-feesbox{margin-top:14px}
body .oi-feesbox>*+*{margin-top:10px}