/* ══════════════════════════════════════════════════════════════
   LubeSuite — Lubricant Recommendation page layer (dashboard band).
   Palette, sidebar, tiles, inputs, buttons, nav, guide marks and both
   themes now come from the shared /assets/ls-dash.css; this file keeps
   only what is specific to this page (top-pick card, KPI tiles, ranked
   table, working drawer, two-column work area, phone ordering).
   Every selector stays scoped under body.lr-dash.
══════════════════════════════════════════════════════════════ */

/* ── Header ── */
body.lr-dash .calc-head { margin-bottom:1rem; }
body.lr-dash .calc-sub { font-size:calc(0.9rem * var(--fs)); }

/* ── Page cards ── */
body.lr-dash .dash-card { background:var(--lsd-card); border:1px solid var(--lsd-border); border-radius:12px; box-shadow:var(--lsd-card-shadow); margin-bottom:1.1rem; }
body.lr-dash .dash-card-head {
  background:transparent; border-bottom:1px solid var(--lsd-border); border-radius:12px 12px 0 0;
  padding:0.75rem 1rem; font-family:'Barlow','Barlow Fallback','Barlow Fallback R',sans-serif; font-weight:600;
  font-size:calc(0.95rem * var(--fs)); letter-spacing:0.01em; text-transform:none; color:var(--lsd-ink);
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem; flex-wrap:wrap;
}
body.lr-dash .tile-header { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; flex-wrap:wrap; }
body.lr-dash .lr-live-tag, body.lr-dash .dash-card-note {
  font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-size:calc(0.68rem * var(--fs)); font-weight:400;
  color:var(--lsd-ink-light); letter-spacing:0.03em;
}

/* inputs — denser grid on wide screens */
body.lr-dash .lr-fieldset { border:1px solid var(--lsd-border); border-radius:10px; padding:0.7rem 0.85rem 0.8rem; }
body.lr-dash .lr-legend { color:var(--lsd-ink-light); font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-weight:400; font-size:calc(0.7rem * var(--fs)); letter-spacing:0.1em; }
body.lr-dash .lr-req { color:var(--lsd-ink-faint); font-weight:400; }
body.lr-dash .field label { font-size:calc(0.66rem * var(--fs)); }
body.lr-dash input[type="number"], body.lr-dash input[type="search"], body.lr-dash input[type="text"], body.lr-dash select { font-size:calc(16px * var(--fs)); }
body.lr-dash #grSpeedFactorRow { background:var(--lsd-surface); border-left-color:var(--lsd-accent); color:var(--lsd-ink-mid); }
body.lr-dash .lr-more { border-color:var(--lsd-border); border-radius:10px; }
body.lr-dash .lr-more > summary { font-family:'Barlow','Barlow Fallback','Barlow Fallback R',sans-serif; text-transform:none; letter-spacing:0; font-weight:600; font-size:calc(0.9rem * var(--fs)); }
body.lr-dash #lrStatus { border-color:var(--lsd-border-heavy); border-radius:10px; }

/* ── Results area ── */
body.lr-dash .dash-results[hidden] { display:none; }
body.lr-dash .dash-top {
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem 1.25rem; flex-wrap:wrap;
  padding:0.95rem 1.1rem; margin-bottom:0.9rem;
  background:var(--lsd-card); border:1px solid var(--lsd-border); border-left:3px solid var(--lsd-accent); border-radius:12px;
}
body.lr-dash .dash-top-k { font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-size:calc(0.68rem * var(--fs)); letter-spacing:0.12em; text-transform:uppercase; color:var(--lsd-ink-light); }
body.lr-dash .dash-top-name { font-family:'Barlow','Barlow Fallback','Barlow Fallback R',sans-serif; font-weight:700; font-size:calc(clamp(1.15rem,2vw,1.45rem) * var(--fs)); color:var(--lsd-cta-ink); line-height:1.25; }  /* top pick = key result: orange */
body.lr-dash .dash-top-meta { font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-size:calc(0.74rem * var(--fs)); color:var(--lsd-ink-light); margin-top:0.15rem; }
body.lr-dash .dash-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.9rem; margin-bottom:1.1rem; }
body.lr-dash .dash-kpi { background:var(--lsd-card); border:1px solid var(--lsd-border); border-radius:12px; padding:0.85rem 1rem 0.9rem; min-width:0; }
body.lr-dash .dash-kpi-label { font-size:calc(0.8rem * var(--fs)); color:var(--lsd-ink-light); margin-bottom:0.35rem; font-family:'Barlow','Barlow Fallback','Barlow Fallback R',sans-serif; }
body.lr-dash .dash-kpi-row { display:flex; align-items:baseline; gap:0.55rem; flex-wrap:wrap; }
body.lr-dash .dash-kpi-val { font-family:'Barlow','Barlow Fallback','Barlow Fallback R',sans-serif; font-weight:700; font-size:calc(1.85rem * var(--fs)); line-height:1.1; color:var(--lsd-ink); letter-spacing:-0.01em; overflow-wrap:anywhere; }
body.lr-dash .dash-top > * { min-width:0; }
body.lr-dash .dash-top-name, body.lr-dash .dash-top-meta { overflow-wrap:anywhere; }
body.lr-dash .dash-kpi-unit { font-size:calc(0.85rem * var(--fs)); font-weight:500; color:var(--lsd-ink-light); margin-left:0.15rem; }
body.lr-dash .dash-badge {
  display:inline-flex; align-items:center; gap:0.25rem; white-space:normal; max-width:100%; overflow-wrap:anywhere; line-height:1.3;
  font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-size:calc(0.68rem * var(--fs)); letter-spacing:0.02em;
  padding:0.12rem 0.45rem; border-radius:6px;
  color:var(--lsd-accent-ink); background:var(--lsd-accent-dim); border:1px solid var(--lsd-accent-border);
}
body.lr-dash .dash-badge.muted { color:var(--lsd-ink-mid); background:var(--lsd-card-hover); border-color:var(--lsd-border-heavy); }
body.lr-dash .dash-badge.warn { color:var(--lsd-red); background:var(--lsd-red-dim); border-color:var(--lsd-red); }

/* table */
body.lr-dash .dash-table { width:100%; border-collapse:collapse; font-size:calc(0.86rem * var(--fs)); }
body.lr-dash .dash-table th {
  text-align:left; font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-weight:400; font-size:calc(0.66rem * var(--fs));
  letter-spacing:0.1em; text-transform:uppercase; color:var(--lsd-ink-light);
  padding:0.65rem 0.75rem; border-bottom:1px solid var(--lsd-border); white-space:nowrap;
}
body.lr-dash .dash-table td { padding:0.7rem 0.75rem; border-bottom:1px solid var(--lsd-border-soft); vertical-align:middle; color:var(--lsd-ink-mid); }
body.lr-dash .dash-table tr:last-child td { border-bottom:none; }
body.lr-dash .dash-table .c-rank { color:var(--lsd-ink-faint); font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; width:2rem; }
body.lr-dash .dash-table .c-name { color:var(--lsd-ink); font-weight:600; }
body.lr-dash .dash-table .c-sub { display:block; font-weight:400; font-size:calc(0.74rem * var(--fs)); color:var(--lsd-ink-light); margin-top:0.1rem; }
body.lr-dash .dash-table .c-lis { font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-size:calc(0.76rem * var(--fs)); color:var(--lsd-ink-mid); white-space:nowrap; }
body.lr-dash .dash-table .c-num { font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; white-space:nowrap; }
body.lr-dash .dash-bar { display:flex; align-items:center; gap:0.55rem; min-width:150px; }
body.lr-dash .dash-bar-track { flex:1; height:6px; border-radius:3px; background:var(--lsd-track); overflow:hidden; min-width:70px; }
body.lr-dash .dash-bar-fill { height:100%; border-radius:3px; background:var(--lsd-accent); }
body.lr-dash .dash-bar-num { font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-size:calc(0.76rem * var(--fs)); color:var(--lsd-ink); min-width:3.2rem; text-align:right; }
body.lr-dash .dash-use { min-height:34px; padding:0.2rem 0.7rem; font-size:calc(0.74rem * var(--fs)); white-space:nowrap; }
body.lr-dash .dash-use.on { color:var(--lsd-accent-ink); border-color:var(--lsd-accent-border); }

/* working / full engine output */
body.lr-dash .dash-working { margin:0 0 1.1rem; background:var(--lsd-card); border:1px solid var(--lsd-border); border-radius:12px; }
body.lr-dash .dash-working > summary {
  cursor:pointer; list-style:none; min-height:46px; padding:0.75rem 1rem;
  font-weight:600; font-size:calc(0.92rem * var(--fs)); color:var(--lsd-ink); display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap;
}
body.lr-dash .dash-working > summary::-webkit-details-marker { display:none; }
body.lr-dash .dash-working > summary::before { content:'▸'; color:var(--lsd-accent-ink); transition:transform .15s; }
body.lr-dash .dash-working[open] > summary::before { transform:rotate(90deg); }
body.lr-dash .dash-working-body { padding:0 1rem 1rem; }
body.lr-dash #grResultBox { margin-top:0; }

/* field notes + inventory */
body.lr-dash .field-notes { background:var(--lsd-card); border-color:var(--lsd-border); border-left-color:var(--lsd-accent); border-radius:0 12px 12px 0; }
body.lr-dash .iso-mode-btn.iso-mode-active { background:var(--lsd-accent); color:var(--lsd-accent-on); }
body.lr-dash #invGrList, body.lr-dash #invOilList { background:var(--lsd-input); border-color:var(--lsd-border); }

/* ── Width-driven layout (2026-10) ──────────────────────────────────────────
   The work area, KPI tiles and ranked list follow the space they actually have
   (container queries on .calc-main and the results column, measured in rem so
   the 112–150 % text sizes switch earlier), not the viewport. Before this the
   results column could be ~450–620 px wide on a laptop while the 8-column table
   still needed ~1000 px: product names squeezed to a word per line, the
   "Use on this job" button ran out of the card, KPI badges spilled. */
body.lr-dash .calc-main { container-type:inline-size; }
@media (min-width: 901px) { body.lr-dash .dash-col-out { container-type:inline-size; min-width:0; } }
body.lr-dash .dash-col-in, body.lr-dash .dash-col-out { min-width:0; }
@container (min-width: 46rem) {
  body.lr-dash .dash-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container (max-width: 21rem) {
  body.lr-dash .dash-kpis { grid-template-columns:minmax(0,1fr); }
}
/* Ranked products: one card per lubricant, fields stacked with their own labels (no side-scrolling table).
   Narrow (phone / results column at large text): label above value, two fields per line, button + stock at the foot.
   Wide card (≥ 40rem): compact multi-column card — name + button on top, LIS · VG · NLGI · stock in one row.
   The match-strength score (points / bar) is not shown to users (2026-10-02): the ranking order still uses it.
   The LIS cell keeps its title tooltip (set by the page script on td.c-lis). */
body.lr-dash .dash-table-wrap { overflow:visible; padding:0.75rem; }
body.lr-dash .dash-table, body.lr-dash .dash-table tbody { display:block; width:100%; }
body.lr-dash .dash-table thead { display:none; }
body.lr-dash .dash-table tbody { display:flex; flex-direction:column; gap:0.7rem; }
body.lr-dash .dash-table tr {
  display:grid; grid-template-columns:2rem minmax(0,1fr) minmax(0,1fr); gap:0.6rem 0.9rem; align-items:start;
  padding:0.85rem 0.95rem 0.9rem; background:var(--lsd-surface, var(--lsd-card)); border:1px solid var(--lsd-border); border-radius:10px;
}
body.lr-dash .dash-table td { display:block; padding:0; border:none; min-width:0; }
body.lr-dash .dash-table tr td.c-rank {
  grid-column:1; grid-row:1 / span 6; width:auto; font-size:calc(0.8rem * var(--fs)); color:var(--lsd-ink-light);
  border:1px solid var(--lsd-border-heavy); border-radius:999px; min-width:1.7rem; height:1.7rem; display:flex !important; align-items:center; justify-content:center;
}
body.lr-dash .dash-table .c-name { grid-column:2 / 4; min-width:0; overflow-wrap:anywhere; font-size:calc(0.95rem * var(--fs)); line-height:1.3; }
body.lr-dash .dash-table .c-sub { line-height:1.4; }
body.lr-dash .dash-table :is(.c-lis, .c-vg, .c-nlgi, .c-stock)::before {
  display:block; margin-bottom:0.2rem; font-family:'Share Tech Mono','Share Tech Mono Fallback',monospace; font-weight:400; font-size:calc(0.62rem * var(--fs));
  letter-spacing:0.1em; text-transform:uppercase; color:var(--lsd-ink-light); white-space:normal;
}
body.lr-dash .dash-table .c-lis::before { content:'LIS code'; }
body.lr-dash .dash-table .c-vg::before { content:'ISO VG'; }
body.lr-dash .dash-table .c-nlgi::before { content:'NLGI'; }
body.lr-dash .dash-table .c-match, body.lr-dash #dashTableNote { display:none !important; }
body.lr-dash .dash-table .c-stock::before { content:'Stock'; }
body.lr-dash .dash-table .c-lis { grid-column:2 / 4; white-space:normal; overflow-wrap:anywhere; color:var(--lsd-ink); }
body.lr-dash .dash-table .c-vg { grid-column:2; }
body.lr-dash .dash-table .c-nlgi { grid-column:3; }
body.lr-dash .dash-table .c-num { color:var(--lsd-ink); }
body.lr-dash .dash-table .c-stock { grid-column:2; }
body.lr-dash .dash-table .c-act { grid-column:3; align-self:end; justify-self:end; }
body.lr-dash .dash-table .c-act:empty { display:none; }
body.lr-dash .dash-table td[colspan] { grid-column:1 / -1; }
body.lr-dash .dash-bar { min-width:0; }
body.lr-dash .dash-use { white-space:normal; text-align:center; }
/* very narrow card (phone at 125–150 %): VG + NLGI share a line, everything else full width */
@container (max-width: 22rem) {
  body.lr-dash .dash-table tr { grid-template-columns:1.8rem minmax(0,1fr) minmax(0,1fr); gap:0.55rem 0.75rem; padding:0.8rem 0.8rem 0.85rem; }
  body.lr-dash .dash-table :is(.c-stock, .c-act) { grid-column:2 / 4; }
  body.lr-dash .dash-table .c-act { justify-self:start; }
}
/* wide card: compact multi-column */
@container (min-width: 40rem) {
  body.lr-dash .dash-table tr { grid-template-columns:2rem minmax(0,1.6fr) minmax(4rem,0.55fr) minmax(3.5rem,0.5fr) minmax(7.5rem,0.9fr); gap:0.55rem 1.1rem; }
  body.lr-dash .dash-table tr td.c-rank { grid-row:1 / span 2; }
  body.lr-dash .dash-table .c-name { grid-column:2 / 5; grid-row:1; align-self:center; }
  body.lr-dash .dash-table .c-act { grid-column:5; grid-row:1; align-self:center; }
  body.lr-dash .dash-table .c-lis { grid-column:2; grid-row:2; }
  body.lr-dash .dash-table .c-vg { grid-column:3; grid-row:2; }
  body.lr-dash .dash-table .c-nlgi { grid-column:4; grid-row:2; }
  body.lr-dash .dash-table .c-stock { grid-column:5; grid-row:2; }
}
/* browsers without container queries keep the old phone rules */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) { body.lr-dash .dash-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
}
@media (max-width: 640px) {
  body.lr-dash .dash-kpis { gap:0.6rem; }
  body.lr-dash .dash-kpi { padding:0.7rem 0.8rem; }
  body.lr-dash .dash-kpi-val { font-size:calc(1.5rem * var(--fs)); }
}
@media print {
  body.lr-dash .dash-working .dash-working-body { display:block !important; }
}

/* ── Two-column work area on wide screens: inputs left, live results right ── */
body.lr-dash .dash-empty[hidden] { display:none; }
body.lr-dash .dash-empty-text { color:var(--lsd-ink-light); font-size:calc(0.9rem * var(--fs)); margin:0; }
/* inputs left, live results right — only when .calc-main has room for both at the current text size
   (100 %: ≥ 864 px, i.e. a 1180 px window as before; 125–150 %: stacks unless the window is very wide) */
@container (min-width: 54rem) {
  body.lr-dash .dash-grid { display:grid; grid-template-columns:minmax(22.5rem,26.25rem) minmax(0,1fr); gap:1.1rem; align-items:start; }
  body.lr-dash .dash-col-in .lr-fieldset .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.6rem 0.75rem; }
  body.lr-dash .dash-col-in .field { margin-bottom:0; }
  body.lr-dash .dash-col-in .tile { margin-bottom:0; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1180px) {
    body.lr-dash .dash-grid { display:grid; grid-template-columns:minmax(360px,420px) minmax(0,1fr); gap:1.1rem; align-items:start; }
    body.lr-dash .dash-col-in .lr-fieldset .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.6rem 0.75rem; }
  }
}
/* input rows: number box + unit picker share the field; the picker is sized in rem so "mm" / "°F" stay readable at 150 % */
body.lr-dash .lr-fieldset .form-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr)); }
body.lr-dash .field { min-width:0; }
body.lr-dash .field-row { min-width:0; }
body.lr-dash .field-row > input { min-width:0; flex:1 1 4rem; }
body.lr-dash .field-row .unit-sel { flex:0 0 4.6rem; min-width:0; }
body.lr-dash .field select { max-width:100%; min-width:0; text-overflow:ellipsis; }
body.lr-dash .field label { overflow-wrap:anywhere; }
body.lr-dash .lr-legend { white-space:normal; max-width:100%; }

/* Top-pick card + KPIs sit next to (desktop) or above (phone) the inputs, so the inline echo is redundant */
body.lr-dash #lrTopPick { display:none !important; }

/* Long intro stays in the DOM (SEO / desktop); clamps on narrow screens, tap to expand */
body.lr-dash .calc-sub .lr-sub-more { display:none; }

/* ══ Phone (≤ 900px): results first when a result exists, inputs next, full list after ══ */
@media (max-width: 900px) {
  body.lr-dash .dash-grid { display:flex; flex-direction:column; gap:0; }
  body.lr-dash .dash-col-out, body.lr-dash .dash-results { display:contents; }
  body.lr-dash .dash-results[hidden], body.lr-dash .dash-results[hidden] > * { display:none !important; }
  body.lr-dash .dash-empty[hidden] { display:none !important; }
  body.lr-dash .dash-top { order:1; }
  body.lr-dash .dash-kpis { order:2; }
  body.lr-dash .dash-col-in { order:3; margin-bottom:1.1rem; }
  body.lr-dash .dash-empty { order:4; }
  body.lr-dash .dash-results > .dash-card { order:5; }
  body.lr-dash .dash-working { order:6; }
  body.lr-dash .calc-rail { display:none; }           /* this page: job bar + top pick carry context on phone */
}
@media (max-width: 640px) {
  /* compact header so the top pick lands on the first screen */
  body.lr-dash .calc-trail { margin:0.2rem 0 0.35rem; }
  body.lr-dash .calc-cat { display:none; }
  body.lr-dash .calc-head { margin-bottom:0.5rem; }
  body.lr-dash .calc-title { font-size:calc(1.45rem * var(--fs)); margin-bottom:0.2rem; }
  body.lr-dash .calc-sub {
    font-size:calc(0.84rem * var(--fs)); line-height:1.45; cursor:pointer;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  body.lr-dash .calc-sub.lr-sub-open { display:block; -webkit-line-clamp:unset; overflow:visible; }
  body.lr-dash .ls-guide-banner {
    font-size:calc(0.76rem * var(--fs)); line-height:1.35; padding:0.3rem 0.75rem; gap:0.4rem; flex-wrap:nowrap;
  }
  body.lr-dash .ls-guide-banner span:nth-child(2) {
    min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  body.lr-dash .ls-guide-skip { padding:0.2rem 0.4rem; font-size:calc(0.58rem * var(--fs)); }
  body.lr-dash .ls-continue-chips { flex-wrap:nowrap; margin:0.35rem 0 0.7rem; padding:0.35rem 0.5rem; gap:0.5rem; box-shadow:none; }
  body.lr-dash .ls-cont-row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0; }
  body.lr-dash .ls-cont-row::-webkit-scrollbar { display:none; }
  body.lr-dash .ls-cont-chip { min-height:36px; padding:0.25rem 0.65rem; font-size:calc(0.8rem * var(--fs)); box-shadow:none; flex:0 0 auto; }
  body.lr-dash .dash-top { padding:0.75rem 0.85rem; margin-bottom:0.6rem; }
  body.lr-dash .dash-kpis { margin-bottom:0.9rem; }
}

/* Facility inventory rows: the brand/thickener/grade line wraps under the name instead of running off the list */
body.lr-dash #invGrList .inv-item, body.lr-dash #invOilList .inv-item, body.lr-dash #invGrList label, body.lr-dash #invOilList label { flex-wrap:wrap; min-width:0; }
body.lr-dash .inv-name { flex:1 1 12rem; min-width:0; overflow-wrap:anywhere; }
body.lr-dash .inv-meta { white-space:normal; flex:0 1 auto; min-width:0; overflow-wrap:anywhere; }