/* === Theme tokens (aligned to your Work Checklist) === */
:root{
  --bg:#0b1020; --panel:#0f172a; --panel-2:#111827;
  --text:#e7edf5; --muted:#9fb0c5; --border:#1f2a3a;
  --accent:#22d3ee; --accent-2:#a78bfa;
  --radius:16px; --shadow:0 10px 28px rgba(0,0,0,.35);
  --focus:0 0 0 3px color-mix(in oklch, var(--accent) 35%, white);

  /* Status hues */
  --ok:#10b981;      /* green */
  --warn:#f59e0b;    /* amber */
  --danger:#ef4444;  /* red */

  /* Clarity */
  --gap:14px; --gap-lg:18px; --gap-xl:22px;
  --label:#dbe2ec;
  --panel-3:#0c1222;

  /* Blues */
  --blue:#0ea5e9; /* 500 */
  --blue-600:#0284c7;
}
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:#0e1528; color:var(--text); padding:16px; }
.back { display:inline-block; margin-bottom:12px; color:var(--accent); text-decoration:none; }

#wasting-app.app { background:var(--panel); padding:16px; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); }
#wasting-app h1 { margin:0 0 var(--gap); font-size:26px; display:flex; align-items:center; gap:8px; }
.muted{ color:var(--muted); }

/* Status row */
.metrics{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:var(--gap); }
.badge{ font-size:12px; padding:3px 7px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--panel-2); }
.badge.strong{
  font-size:13px; font-weight:800; letter-spacing:.25px; color:#e8eef6;
  background:linear-gradient(180deg, color-mix(in oklch, var(--panel) 85%, var(--accent) 15%), var(--panel-2));
  border-color: color-mix(in oklch, var(--accent) 35%, var(--border) 65%);
}

/* Generic buttons */
.btn{ display:inline-block; border:1px solid var(--border); background:#0b1220; color:var(--text); border-radius:999px; padding:10px 14px; cursor:pointer; }
.btn.dim{ opacity:.9 }
.primary-blue{ border-color: color-mix(in oklch, var(--blue) 50%, var(--border) 50%); background:linear-gradient(180deg, var(--blue), var(--blue-600)); }

/* Cards */
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--gap-lg); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:var(--gap);
}
.section-title{ margin: var(--gap) 0 var(--gap); font-size:16px; font-weight:800; letter-spacing:.2px; color:#e6edf6; }

/* Columns */
.cols{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width: 1100px){ .cols{ grid-template-columns: 1fr 1fr; } }

/* Simple grid for small input groups */
.grid2{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
@media (min-width:780px){ .grid2{ grid-template-columns:1fr 1fr; } }

/* Form fields */
.fld{ display:flex; flex-direction:column; gap:6px; position:relative; }
.lbl{ font-size:13px; color: var(--label); }
input[type="number"], select{
  padding:12px 14px; border-radius:12px; border:1px solid #334155; background:#0f172a; color:var(--text);
}
input[disabled]{ opacity:.5 }

/* Unit badges */
.fld input[data-unit] + span.unit{
  position:absolute; right:10px; bottom:10px;
  font-size:12px; color: var(--muted);
  padding:2px 6px; border:1px solid var(--border);
  border-radius:999px; background: var(--panel-2);
  pointer-events:none; z-index:1;
}
.fld input[data-unit] + span.unit::before{ content: attr(data-unit); }
.fld input[data-unit]{ padding-right:56px; }

/* Block containers */
.block{
  background: var(--panel-3);
  border:1px solid var(--border);
  border-radius:16px;
  padding:var(--gap);
  display:flex; flex-direction:column; gap:var(--gap);
}

/* Vertical tiles (one per row) */
.tiles-vertical .fld.onoff{
  background:#0f172a;
  border:0.5px solid var(--border);
  border-radius:1px;
  padding:0px 0px;
}

/* ONLINE/OFFLINE pills */
.onoff{ align-items:center; }
.pill{
  margin-left:auto; font-size:12px; font-weight:800; letter-spacing:.2px;
  padding:8px 12px; min-width:92px; text-align:center;
  border-radius:999px; border:1px solid var(--border); background:#111827; color:#e9eef7;
  white-space:nowrap; line-height:1; z-index:2; position:relative;
}
.pill.ok   { border-color: color-mix(in oklch, var(--ok) 35%, var(--border) 65%); }
.pill.danger{ border-color: color-mix(in oklch, var(--danger) 35%, var(--border) 65%); }

/* Offline tile highlight */
.fld.onoff.is-offline{
  background: color-mix(in oklch, #1b1012 75%, var(--panel-2) 25%);
  border-color: color-mix(in oklch, var(--danger) 55%, var(--border) 45%);
  box-shadow: inset 4px 0 0 color-mix(in oklch, var(--danger) 70%, transparent);
}

/* Outputs (shared) */
.card.outputs{ gap: var(--gap); }
.out-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
@media (min-width:900px){ .out-grid{ grid-template-columns:1fr 1fr; } }

.out{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:#101827;
  display:flex; flex-direction:column; gap:10px;
  transition: background .2s ease;
}
.out-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tag{
  font-size:12px; font-weight:900; letter-spacing:.3px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background:#0f172a; color:#e6edf6;
}
.out-num{ font-size:28px; font-weight:900; }

/* Bold color-coded SRT backgrounds */
.out.ok     { background: color-mix(in oklch, var(--ok) 18%, #0f172a); }
.out.warn   { background: color-mix(in oklch, var(--warn) 18%, #0f172a); }
.out.danger { background: color-mix(in oklch, var(--danger) 18%, #0f172a); }

/* Chips */
.chip{
  font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#111827; color:#e5e7eb; font-weight:800;
}
.chip.ok{ border-color: color-mix(in oklch, var(--ok) 40%, var(--border) 60%); color:#d1fae5; }
.chip.warn{ border-color: color-mix(in oklch, var(--warn) 40%, var(--border) 60%); color:#fef3c7; }
.chip.danger{ border-color: color-mix(in oklch, var(--danger) 40%, var(--border) 60%); color:#fee2e2; }

/* CTA row */
.cta-row{
  display:flex; gap:12px; margin-top:var(--gap); flex-wrap:wrap; align-items:center; justify-content:center;
}
.cta-primary{
  border:none; cursor:pointer; padding:14px 22px;
  font-size:16px; font-weight:900; letter-spacing:.2px;
  color:white; border-radius:999px;

  background:linear-gradient(180deg, #16a34a, #15803d); /* Green 600 → 700 */

  box-shadow:0 10px 24px rgba(21,128,61,.25);
}
.cta-primary:disabled{ opacity:.6; cursor:not-allowed; filter:saturate(.7); }
.cta-secondary{
  border:1px solid var(--border); background:#0b1220; color:var(--text);
  border-radius:999px; padding:12px 16px; cursor:pointer;
}

/* Save depths button stands out */
.save-depths{ align-self:flex-start; }

/* Toast */
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; background:#111827; color:var(--text); border:1px solid var(--border); padding:10px 14px; border-radius:12px; display:none; box-shadow:var(--shadow); }
.toast.show{ display:block; }

/* Required chip */
.req-chip{ font-size:11px; margin-left:6px; padding:2px 6px; border-radius:999px; border:1px solid color-mix(in oklch, var(--danger) 40%, var(--border) 60%); color:#fecaca; background:#1b1214; }
.req-chip.hidden{ display:none; }
/* ===== Distinct backgrounds for Bioreactors vs Clarifiers ===== */
:root{
  /* Gentle teal for reactors; gentle purple for clarifiers */
  --reactor-bg: color-mix(in oklch, #0f172a 85%, #0ea5e9 15%);
  --reactor-brd: color-mix(in oklch, var(--border) 70%, #38bdf8 30%);
  --reactor-tile: color-mix(in oklch, #0f172a 90%, #22d3ee 10%);

  --clar-bg: color-mix(in oklch, #0f172a 85%, #8b5cf6 15%);
  --clar-brd: color-mix(in oklch, var(--border) 70%, #a78bfa 30%);
  --clar-tile: color-mix(in oklch, #0f172a 90%, #a78bfa 10%);
}

/* Reactor section wrapper */
.section-reactor{
  background: var(--reactor-bg);
  border-color: var(--reactor-brd);
}
.section-reactor .fld.onoff{
  background: var(--reactor-tile);
  border-color: var(--reactor-brd);
}

/* Clarifier section wrapper */
.section-clar{
  background: var(--clar-bg);
  border-color: var(--clar-brd);
}
.section-clar .fld.onoff{
  background: var(--clar-tile);
  border-color: var(--clar-brd);
}

/* Keep OFFLINE warning dominant on top of the custom colors */
.section-reactor .fld.onoff.is-offline,
.section-clar .fld.onoff.is-offline{
  background: color-mix(in oklch, #1b1012 75%, var(--panel-2) 25%);
  border-color: color-mix(in oklch, var(--danger) 55%, var(--border) 45%);
  box-shadow: inset 4px 0 0 color-mix(in oklch, var(--danger) 70%, transparent);
}

/* Boost East/West section title badges */
.badge.strong {
  font-size: 25px;
  padding: 8px 12px;
  letter-spacing: .3px;
}
/* Center and widen the Save Depths button for visibility */
.save-depths {
  align-self: center;
  width: 26%;
  text-align: center;
  font-weight: 800;
}

/* Three-across inputs on larger screens; stacked on mobile */
.grid3{
  display:grid;
  grid-template-columns:1fr;            /* phones: stacked */
  gap:var(--gap);
}
@media (min-width:700px){
  .grid3{ grid-template-columns:repeat(2,1fr); }  /* small tablets: 2-up */
}
@media (min-width:980px){
  .grid3{ grid-template-columns:repeat(3,1fr); }  /* desktops: 3-up */
}

/* Keep fields tidy in tight spaces */
.inputs-row .fld{ min-width:0; }
.inputs-row input{ width:100%; }

/* Prevent label wrap ugliness on RAS% “required” chip */
.inputs-row .lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ====== Fix inputs row overflow/overlap ====== */

/* Constrain the app/card width so grids never exceed the box */


/* Make the 3-col grid robust on all breakpoints */
.grid3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  width: 100%;
}

@media (min-width: 600px) {
  .grid3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.inputs-row, .inputs-row > * {
  min-width: 0;
}


/* Prevent children from forcing overflow */
.inputs-row { width: 100%; min-width: 0; }
.inputs-row > * { min-width: 0; }

/* Make labels handle chips without pushing width */
.inputs-row .lbl{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: normal;        /* allow wrapping instead of overflow */
}

/* Inputs: ensure they shrink properly and don't overlap badges */
.inputs-row input,
.inputs-row select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Unit badges: keep inside the field bounds */
.fld { position: relative; min-width: 0; }
.fld input[data-unit] + span.unit{
  right: 10px;
  bottom: 10px;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Safety: prevent any unexpected horizontal scroll */
.card, .block, .cols, .grid3, .grid2 { min-width: 0; }

/* Fix tiny square artifact on ONLINE/OFFLINE pills */
.pill {
  background-clip: padding-box;
  overflow: hidden; /* removes that little ghost box */
}

/* East vs West pill tint */
.east-pill {
  background: color-mix(in oklch, var(--accent) 30%, var(--panel));
  border-color: color-mix(in oklch, var(--accent) 50%, var(--border));
}

.west-pill {
  background: color-mix(in oklch, var(--accent-2) 30%, var(--panel));
  border-color: color-mix(in oklch, var(--accent-2) 50%, var(--border));
}

/* === Side-colored title pills (override base .badge.strong) === */
.card > .badge.strong.east-pill{
  /* kill the inherited gradient so our tint shows */
  background-image: none !important;
  background: color-mix(in oklch, var(--accent) 35%, var(--panel) 65%) !important;
  border-color: color-mix(in oklch, var(--accent) 60%, var(--border)) !important;
  color:#e8fafe !important;
}

.card > .badge.strong.west-pill{
  background-image: none !important;
  background: color-mix(in oklch, var(--accent-2) 35%, var(--panel) 65%) !important;
  border-color: color-mix(in oklch, var(--accent-2) 60%, var(--border)) !important;
  color:#f3e8ff !important;
}

/* Neutral gray pill for EAST & WEST titles */
.card .badge.strong.east-pill,
.card .badge.strong.west-pill {
  background-image: none !important;
  background: color-mix(in oklch, var(--panel) 90%, #94a3b8 10%) !important; /* subtle gray-blue */
  border-color: color-mix(in oklch, var(--border) 70%, #cbd5e1 30%) !important; /* soft gray border */
  color: #e2e8f0 !important; /* light gray text for clarity */
}

/* Side section headers */
.side-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

/* Compact tag pill */
.side-pill {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
}

/* Side tint */
.side-pill.east {
  background: #334155; /* slate-700 */
  color: #e2e8f0; /* light gray */
}

.side-pill.west {
  background: #3b4261; /* deeper slate */
  color: #e2e8f0;
}

/* Section header layout */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* Strong section title */
.section-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* Compact side pill */
.side-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* East/West color accents */
.side-pill.east {
  background: #d2d8e0; /* slate-700 */
  color: #00ff48;
}

.side-pill.west {
  background: #e9e9f3; /* neutral-700 */
  color: #e874ff;
}

/* === Section header with side chip === */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 4px 0 10px;
}

.section-head h2{
  margin:0;
  font-size:18px;          /* bigger than body */
  font-weight:700;         /* real title weight */
  letter-spacing:.2px;
  color:var(--text);
}

/* Compact pill tag */
.side-pill{
  display:inline-block;    /* make it “pill”, not text */
  padding:4px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  border:1px solid var(--border);
  background: color-mix(in oklch, var(--panel) 85%, #64748b 15%); /* subtle slate */
  color:#e5e7eb;           /* light gray text */
}

/* Optional: different tint per side (tweak or remove if you want both gray) */
.side-pill.east{
  background: color-mix(in oklch, var(--panel) 85%, #0ea5e9 15%);
  border-color: color-mix(in oklch, var(--border) 70%, #38bdf8 30%);
}
.side-pill.west{
  background: color-mix(in oklch, var(--panel) 85%, #8b5cf6 15%);
  border-color: color-mix(in oklch, var(--border) 70%, #a78bfa 30%);
}

/* If you want *both* pills neutral gray instead, uncomment these and delete the two blocks above:
.side-pill.east,
.side-pill.west{
  background: #374151;
  border-color:#475569;
  color:#f1f5f9;
}
*/

/* Balanced tile padding for bioreactor + clarifier rows */
.tiles-vertical .fld.onoff {
  padding: 14px 14px;       /* even top/bottom padding */
  min-height: 90px;         /* ensures the label isn't smashed up top */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ===== Compact pass ===== */

/* Cards/blocks a bit tighter */
.card           { padding: 12px; }
.block          { padding: 10px; border-radius: 12px; }

/* Section titles + gaps */
.section-title  { margin: 6px 0 8px; font-size: 15px; }
.cols           { gap: 12px; }

/* Inputs row: slightly smaller overall rhythm */
.grid3          { gap: 10px; }
.grid2          { gap: 10px; }
.fld            { gap: 5px; }
input[type="number"], select { padding: 10px 12px; border-radius: 10px; }

/* Reactor/clarifier tiles — compact, balanced */
.tiles-vertical .fld.onoff{
  padding: 10px 12px;      /* even top/bottom */
  min-height: 78px;        /* shorter but still tappable */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Keep the input from floating too high */
.tiles-vertical .fld.onoff input { margin: 4px 0; }

/* ONLINE pill a bit slimmer, so the tile feels lighter */
.pill{
  min-width: 84px;
  padding: 7px 10px;
  font-size: 11.5px;
}

/* Kill native button chrome & tap highlight; fix paint glitch */
.pill {
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
  overflow: hidden;
  outline: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  transform: translateZ(0);                 /* nixes GPU edge artifact */
  -webkit-tap-highlight-color: transparent; /* mobile */
}

/* Firefox removes inner focus padding */
button.pill::-moz-focus-inner { border: 0; padding: 0; }

/* Give an accessible focus style without the glitch */
.pill:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent);
}

/* Page H1 a bit stronger; section headers steady */
#wasting-app h1 { font-size: 24px; margin-bottom: 10px; }

/* Make output notes easier to see */
.out .hint {
  color: #cbd5e1;      /* brighter than muted */
  font-size: 13px;
  margin-top: 4px;
}

/* Keep your existing CSS; add these tiny, safe tweaks at the end */

/* Subhint under inputs (temp °C display, WAS interpretation) */
.subhint{ font-size:12px; color:#94a3b8; margin-top:4px; }

/* Highlight entire field on focus for quick overwrite */
.fld:focus-within{ outline:none; box-shadow: var(--focus); border-radius: 12px; }

/* Ensure columns stay centered on mobile cards */
.col > .card{ margin-left:auto; margin-right:auto; width:100%; }

/* Make sure the new measured-lb input badges render correctly */
.fld input.measured[data-unit] + span.unit::before{ content: attr(data-unit); }
.fld input.measured[data-unit]{ padding-right:56px; }

/* --- Mobile overflow containment (safe patch) --- */

/* Center the whole app and cap width */
#wasting-app { max-width: 1200px; margin: 0 auto; }

/* Let grid columns actually shrink on small screens */
.cols { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ensure cards can’t bleed horizontally */
.col > .card { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Kill intrinsic min-width from nested grids/blocks */
.card, .block, .grid2, .grid3 { min-width: 0; }

/* WAS helper lines wrap instead of forcing width */
.subhint { word-break: break-word; }

/* Optional: on very narrow phones, let ONLINE/OFFLINE pills shrink */
@media (max-width: 420px) {
  .pill { min-width: auto; padding: 6px 8px; }
}

/* Belt-and-suspenders: hide any accidental horizontal scroll inside the app */
#wasting-app { overflow-x: hidden; }

/* --- Side accents without pills (safe, CSS-only) --- */
:root{
  --east-accent: #42744d; /* lighter sky blue */
  --west-accent: #727956; /* purple */
}

/* Hide the EAST/WEST pills */
.section-head .side-pill { display: none; }

/* Top accent bar on each side's card */
.cols .col:first-child > .card { border-top: 4px solid var(--east-accent); }
.cols .col:last-child  > .card { border-top: 4px solid var(--west-accent); }

/* Small colored dot before the section header text */
.cols .col:first-child .section-head h1::before,
.cols .col:last-child  .section-head h1::before{
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.cols .col:first-child .section-head h1::before { background: var(--east-accent); }
.cols .col:last-child  .section-head h1::before { background: var(--west-accent); }

/* Refine the Save Depths button to fit the layout */
.btn.save-depths {
  border-radius: 12px;          /* rectangular, not circular */
  background: rgb(59, 115, 141);          /* calmer blue */
  color: #fff;
  font-weight: 600;
  padding: 10px 16px;
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 12px auto;
  transition: background 0.2s ease;
}
.btn.save-depths:hover {
  background: #0284c7;          /* darker on hover */
}

/* --- Fine-tune label and focus spacing --- */

/* Add a bit more gap between label and field */
.fld .lbl {
  display: block;
  margin-bottom: 8px;  /* was 4px, now a comfortable gap */
}

/* Pull focus outline farther inward so it doesn't hug the label text */
.fld:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.45) inset, 0 0 6px rgba(56,189,248,0.35);
  border-radius: 12px;
  padding-top: 4px; /* pushes field slightly away from label when active */
}

/* --- Refined focus highlight that won't touch or overlap labels --- */

/* Labels sit comfortably above fields */
.fld .lbl {
  display: block;
  margin-bottom: 10px; /* more breathing room */
  position: relative;
  z-index: 2; /* ensures label always sits above highlight */
}

/* Focus glow sits behind text and below label */
.fld {
  position: relative;
  border-radius: 12px;
  overflow: visible; /* so shadow can expand outward */
}

/* Softer, outer focus glow */
.fld:focus-within {
  box-shadow: 0 0 0 3px rgba(56,189,248,0.4);
  outline: none;
  z-index: 1;
}

/* --- Add subtle depth polish without overwriting your colors --- */

/* Keep your existing color variables (don’t redefine them here) */

/* Base card shadow */
.card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.25s ease;
  border-radius: 16px;
}

/* Apply faint tinted halo only if those variables already exist */
.cols .col:first-child > .card {
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 12px color-mix(in srgb, var(--east-accent, #38bdf8) 15%, transparent);
}

.cols .col:last-child > .card {
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 12px color-mix(in srgb, var(--west-accent, #a78bfa) 15%, transparent);
}

/* Hover lift */
.card:hover {
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(255, 255, 255, 0.08);
}

/* Stronger tint on hover (respects your variables) */
.cols .col:first-child > .card:hover {
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.6),
    0 0 16px color-mix(in srgb, var(--east-accent, #38bdf8) 25%, transparent);
}
.cols .col:last-child > .card:hover {
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.6),
    0 0 16px color-mix(in srgb, var(--west-accent, #a78bfa) 25%, transparent);
}







/* =========================
   POLISH PACK (additive)
   Safe to append at end
========================= */

/* 1) Subtle transitions; honors reduced-motion */
* { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 2) Input niceties: softer placeholders + no spinners */
::placeholder { color: #94a3b8; opacity: .8; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* 3) Tabular numerals: digits don’t “wiggle” on change */
.out-num, input[type="number"], .unit, .chip { font-variant-numeric: tabular-nums; }

/* 4) Light divider under section titles */
.section-title { position: relative; padding-bottom: 4px; }
.section-title::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.35), transparent);
}

/* 5) Buttons: tactile press + clear keyboard focus */
.cta-primary, .btn { transform: translateY(0); }
.cta-primary:active, .btn:active { transform: translateY(1px); }
.cta-primary:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, #ffffff);
}

/* 6) Toast: crisper on dark and centered on mobile */
.toast{
  backdrop-filter: blur(6px);
  background: color-mix(in oklch, #0b1220 70%, #111827 30%);
  border-color: color-mix(in oklch, var(--border) 65%, #94a3b8 35%);
  font-weight: 600;
}
@media (max-width: 480px){
  .toast{ left: 8px; right: 8px; transform: none; }
}

/* 7) Keep the action bar handy on small screens */
@media (max-width: 720px){
  .cta-row{
    position: sticky; bottom: 8px; z-index: 50;
    padding: 8px;
    background: linear-gradient(180deg, transparent, rgba(15,23,42,.85) 40%, rgba(15,23,42,.95));
    backdrop-filter: blur(4px);
    border-radius: 14px;
  }
}

/* 8) ONLINE/OFFLINE pills calmer on very small phones */
@media (max-width: 420px){
  .pill { min-width: auto; padding: 6px 8px; font-weight: 700; }
}

/* 9) Softer unit badges (tiny aesthetic touch) */
.fld input[data-unit] + .unit { opacity: .9; }

/* 10) Card depth & side tints (respects your existing variables) */
.card {
  box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 1px rgba(255,255,255,.05);
  transition: box-shadow .25s ease;
  border-radius: 16px;
}
.card:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.6), 0 0 14px rgba(255,255,255,.08);
}
.cols .col:first-child > .card {
  box-shadow:
    0 4px 18px rgba(0,0,0,.45),
    0 0 12px color-mix(in srgb, var(--east-accent, #38bdf8) 15%, transparent);
}
.cols .col:last-child > .card {
  box-shadow:
    0 4px 18px rgba(0,0,0,.45),
    0 0 12px color-mix(in srgb, var(--west-accent, #a78bfa) 15%, transparent);
}
@media (hover:hover){
  .cols .col:first-child > .card:hover {
    box-shadow:
      0 6px 22px rgba(0,0,0,.6),
      0 0 16px color-mix(in srgb, var(--east-accent, #38bdf8) 25%, transparent);
  }
  .cols .col:last-child > .card:hover {
    box-shadow:
      0 6px 22px rgba(0,0,0,.6),
      0 0 16px color-mix(in srgb, var(--west-accent, #a78bfa) 25%, transparent);
  }
}



/* --- Remove small black box artifact on inputs and buttons --- */

/* For number/text inputs (caused by OS-level control background) */
input[type="number"],
input[type="text"],
select {
  background-color: transparent;
  background-image: none;
  color-scheme: dark; /* tell browser to use dark form controls */
}

/* For .pill buttons */
.pill {
  background-image: none;
  background-color: transparent;
  overflow: hidden; /* hides any corner bleed from focus ring */
}


/* === Kill tiny black-corner artifact on inputs & pills (WebKit/Chrome/Safari) === */

/* Remove native chrome, hidden gradients, and OS “corner” layers */
input, select, button.pill {
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Make the control backgrounds opaque (prevents bleed-through) */
input[type="number"],
input[type="text"],
select {
  background-color: #0f172a !important;   /* same as your field bg */
  background-clip: padding-box;
  border-radius: 12px;                     /* match your inputs */
}

/* Pills: same idea */
.pill {
  background-color: #111827 !important;    /* same as your pill bg */
  background-clip: padding-box;
  border-radius: 999px;
  overflow: hidden;                         /* clips any stray layer in corners */
}

/* Hide any residual WebKit controls that can show as tiny boxes */
input[type="text"]::-webkit-clear-button,
input[type="search"]::-webkit-search-cancel-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
}

/* iOS/Android tap highlight can appear as dark corner flashes */
* { -webkit-tap-highlight-color: transparent; }


/* === Kill tiny black-corner artifact on inputs & pills (WebKit/Chrome/Safari) === */

/* Remove native chrome, hidden gradients, and OS “corner” layers */
input, select, button.pill {
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Make the control backgrounds opaque (prevents bleed-through) */
input[type="number"],
input[type="text"],
select {
  background-color: #0f172a !important;   /* same as your field bg */
  background-clip: padding-box;
  border-radius: 12px;                     /* match your inputs */
}

/* Pills: same idea */
.pill {
  background-color: #111827 !important;    /* same as your pill bg */
  background-clip: padding-box;
  border-radius: 999px;
  overflow: hidden;                         /* clips any stray layer in corners */
}

/* Hide any residual WebKit controls that can show as tiny boxes */
input[type="text"]::-webkit-clear-button,
input[type="search"]::-webkit-search-cancel-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
}

/* iOS/Android tap highlight can appear as dark corner flashes */
* { -webkit-tap-highlight-color: transparent; }


/* Put unit as a little help text under each input instead of overlay badge */
.fld input[data-unit] + .unit{
  position: static !important;
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--muted);
  border: 0;
  background: transparent;
  padding: 0;
}

/* Reduce right padding since we no longer overlay the unit */
.fld input[data-unit]{ padding-right: 14px !important; }


/* --- Make unit labels plain helper text (no pill) --- */
.fld input[data-unit] + .unit{
  position: static !important;   /* sits under the input */
  display: block !important;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--muted);

  /* kill the pill styling */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Inputs don’t need extra right padding anymore */
.fld input[data-unit]{ padding-right: 14px !important; }

/* Optional: only show the unit when there’s a value or focus */
.fld input:placeholder-shown + .unit { display: none; }
.fld input:focus + .unit { display: block; }


#eastWasYesterday,
#westWasYesterday {
  border-radius: 999px;
  padding: 10.5px 18px;
  background: #101b33;
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--border) 75%);
}


/* === Sharpened SRT background hues === */
.out.ok {
  background: color-mix(in oklch, #16a34a 80%, #0f172a); /* vivid green */
}
.out.warn {
  background: color-mix(in oklch, #fcb502 65%, #0f172a); /* bright amber */
}
.out.danger {
  background: color-mix(in oklch, #ff0808 80%, #0f172a); /* true red, not purple */
}


/* --- Animated toast: slide + fade, no layout jump --- */

/* Base state: invisible but present (so transitions work) */
.toast{
  position: fixed;
  left: 50%;
  transform: translate(-50%, 8px);   /* start slightly lower */
  bottom: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: block;                    /* override any display:none */
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s;       /* delay visibility hide until fade ends */
}

/* Visible state */
.toast.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);     /* slide up a few pixels */
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s;                   /* show immediately */
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .toast, .toast.show{
    transition: opacity .01s linear, visibility 0s;
    transform: translate(-50%, 0);
  }
}


/* ================================
   ENHANCEMENT PACK (safe add-on)
   Paste at end of style.css
================================ */

/* 0) Smooth scrolling */
html { scroll-behavior: smooth; }

/* 1) Cards: gentle lift on hover (desktop only) */
@media (hover:hover){
  .card {
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
  }
}

/* Also ensure static depth if you disabled motion later */
.card:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* 2) Inputs: unified focus glow + slight hover cue */
input[type="text"],
input[type="number"],
select {
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

/* Subtle hover hint */
input[type="text"]:hover,
input[type="number"]:hover,
select:hover {
  box-shadow: 0 0 0 1px rgba(148,163,184,.25) inset;
}

/* ===== Global neutral input focus (one rule only) ===== */
#wasting-app input:focus,
#wasting-app select:focus,
#wasting-app textarea:focus {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(147,197,253,.35) !important,  /* soft blue-gray outer */
    0 0 0 1px rgba(51,65,85,1) inset !important; /* crisp inner rim */
}

/* Calm the wrapper glow so it doesn't overpower the input ring */
.fld:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); }

/* 3) Active-side ambient light (lint-safe, rgba) */
.cols .col:first-child:focus-within > .card {
  /* ~22% of #38bdf8 */
  box-shadow: 0 0 20px rgba(56,189,248,.22);
}
.cols .col:last-child:focus-within > .card {
  /* ~22% of #a78bfa (or your chosen west color) */
  box-shadow: 0 0 20px rgba(167,139,250,.22);
}

/* 4) Toast: a bit more dimensional */
.toast{
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  border-radius: 12px;
}

/* =======================================
   EAST / WEST accent polish (coordinated)
   ======================================= */
:root {
  --east-accent: #22d3ee;           /* vivid teal-blue */
  --east-glow-rgba: rgba(34,211,238,.25);

  /* Pick the west tone you like; Golden Ochre shown here */
  --west-accent: #d97706;           /* golden ochre — easier on eyes */
  --west-glow-rgba: rgba(217,119,6,.25);
}

/* East side pill + accent ring */
.side-pill.east,
.cols .col:first-child:focus-within > .card {
  border-color: var(--east-accent);
  box-shadow: 0 0 18px var(--east-glow-rgba);
}

/* West side pill + accent ring */
.side-pill.west,
.cols .col:last-child:focus-within > .card {
  border-color: var(--west-accent);
  box-shadow: 0 0 18px var(--west-glow-rgba);
}

/* Side-specific focus rings inside each column */
.cols .col:first-child input:focus,
.cols .col:first-child select:focus {
  box-shadow:
    0 0 0 2px var(--east-glow-rgba) !important,
    0 0 0 1px rgba(51,65,85,1) inset !important;
}
.cols .col:last-child input:focus,
.cols .col:last-child select:focus {
  box-shadow:
    0 0 0 2px var(--west-glow-rgba) !important,
    0 0 0 1px rgba(51,65,85,1) inset !important;
}

/* Header dots to match */
.cols .col:first-child h1::before { background: var(--east-accent); }
.cols .col:last-child h1::before  { background: var(--west-accent); }

/* Vendor + standard appearance (quiet vendorPrefix warning) */
.pill, input, select {
  -webkit-appearance: none;
  appearance: none;
}

/* Mini inline button beside the Temperature field */
.btn.mini {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
  margin-top: 6px;
  align-self: flex-start;
}
@media (min-width: 540px){
  #tempF ~ #applyTempBtn { margin-left: 0; }
}

/* === Option A: small badge polish === */
#overrideBadge { opacity: .95; }


.temp-banner {
  font-size: 0.9rem;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Make "Update targets" stand out with color only */
#applyTempBtn {
  border-color: color-mix(in oklch, var(--accent) 70%, var(--border) 30%);
  color: var(--accent);
  font-weight: 600;
}

/* Slightly dim when disabled, but no special cursor */
#applyTempBtn:disabled {
  opacity: 0.6;
}