/* =====================================================================
   OnPoint "Process" look, lifted from the Big D water treatment demo
   (desktop Process theme) and generalised so it can dress any page.

   Nothing here is specific to a process diagram. It is the palette,
   the panel treatment, the label plate and the typography, which is
   what actually makes that screen look the way it does.

   Drop this in and build with the classes at the bottom.
   ===================================================================== */

:root{
  /* ---- ground and paper ---- */
  --bg-a:#fbf4e2;              /* page gradient, top      */
  --bg-b:#f3e6c6;              /* page gradient, middle   */
  --bg-c:#efe0bd;              /* page gradient, bottom   */
  --panel:#fffdf6;             /* card / panel fill       */
  --panel2:#f3ead2;            /* recessed fill, hovers   */
  --line:#e2d7b6;             /* panel border            */
  --hair:rgba(140,128,96,.28); /* table rules             */

  /* ---- ink ---- */
  --txt:#1a1c22;               /* primary text            */
  --lbl:#2c2f38;               /* secondary text          */
  --dim:#6d6550;               /* labels, captions        */
  --val:#0d3f6b;               /* numbers, navy           */

  /* ---- accents ---- */
  --accent:#f5c400;            /* Big D yellow            */
  --accent-ink:#1a1c22;
  --rule:#1c8fd0;              /* blue left rule on plates */
  --tab:#24262c;               /* dark number tab          */
  --plate:#fbe7a4;             /* plate body, normal       */
  --plate-warn:#f9cf9a;
  --plate-bad:#f3b7bb;

  /* ---- status ---- */
  --grn:#1c8f4e; --amb:#c07b00; --red:#c22b33; --cyan:#0e7fa0;
  --okbg:#d8ecdd; --ambg:#fbeaba; --rdbg:#f6d8da;

  /* ---- shape and type ---- */
  --rad:12px; --rad2:7px;
  --shadow:0 2px 5px rgba(80,66,34,.07), 0 16px 34px rgba(80,66,34,.09);
  --shadow-lift:0 5px 14px rgba(72,58,26,.34);
  --ui:"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
  --mono:"Consolas","SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ui);
  font-size:13px;
  color:var(--txt);
  background:linear-gradient(160deg,var(--bg-a),var(--bg-b) 46%,var(--bg-c));
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------
   HEADER  <header> ... </header>
   --------------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,253,246,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:12px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
header .brand{font-size:17px;font-weight:800;letter-spacing:-.02em;font-style:italic;
  text-transform:uppercase}
header .brand small{display:block;font-style:normal;font-weight:600;font-size:9.5px;
  letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-top:1px}

/* ---------------------------------------------------------------
   PANEL  <section class="p"><h2>Title</h2> ... </section>
   --------------------------------------------------------------- */
.p{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--rad);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-bottom:16px;
}
.p>h2{
  margin:0; padding:13px 16px 11px;
  font-size:12.5px; font-weight:800; font-style:italic;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--txt);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
}
.p>h2 .note{margin-left:auto;font-style:normal;font-weight:600;font-size:10px;
  letter-spacing:.12em;color:var(--dim)}
.p .body{padding:14px 16px 16px}

/* ---------------------------------------------------------------
   LABEL PLATE  the signature element
   <span class="plate"><b class="no">4</b>
     <span class="bd"><b class="ti">Title</b>
       <span class="vl"><i class="dot on"></i><em>value</em></span></span></span>
   Add .warn or .bad to the plate for amber / red.
   --------------------------------------------------------------- */
.plate{
  display:inline-flex; align-items:stretch;
  border-radius:5px; overflow:hidden;
  box-shadow:var(--shadow-lift);
  transition:transform .18s ease;
  vertical-align:middle;
}
a.plate,button.plate,.plate[role="button"]{cursor:pointer;border:0;font:inherit;padding:0}
.plate:hover{transform:translateY(-2px)}
.plate .no{
  background:var(--tab); color:#fff;
  font-weight:800; font-style:italic; font-size:16px; letter-spacing:-.02em;
  display:flex; align-items:center; padding:0 10px;
}
.plate .bd{background:var(--plate);border-left:3px solid var(--rule);padding:6px 12px 7px;
  text-align:left}
.plate .ti{display:block;font-style:italic;font-weight:800;font-size:12px;
  letter-spacing:-.01em;line-height:1.15;text-transform:uppercase;color:var(--txt)}
.plate .vl{display:flex;align-items:center;gap:7px;margin-top:2px;
  font-family:var(--mono);font-weight:700;font-size:13.5px;color:var(--val);
  white-space:nowrap}
.plate .vl em{font-style:normal}
.plate.warn .bd{background:var(--plate-warn);border-left-color:var(--amb)}
.plate.bad  .bd{background:var(--plate-bad); border-left-color:var(--red)}
.plate.off  .vl{color:var(--dim)}

/* the live dot */
.dot{width:7px;height:7px;border-radius:50%;background:#b3aa8e;flex:0 0 auto}
.dot.on{background:var(--grn);box-shadow:0 0 0 3px rgba(28,143,78,.22);
  animation:dotpulse 1.6s ease-in-out infinite}
@keyframes dotpulse{
  0%,100%{box-shadow:0 0 0 3px rgba(28,143,78,.22)}
  50%    {box-shadow:0 0 0 6px rgba(28,143,78,.08)}
}
@media(prefers-reduced-motion:reduce){ .dot.on{animation:none} }

/* ---------------------------------------------------------------
   GRID / SHEET  the spreadsheet feel
   <table class="sheet"> ... </table>
   --------------------------------------------------------------- */
.sheet{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.sheet th{
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  font-weight:700;text-align:center;padding:9px 6px;
  border-bottom:1px solid var(--line);
  background:var(--panel2);
  position:sticky;top:0;z-index:2;
}
.sheet th.name,.sheet td.name{text-align:left;padding-left:14px;min-width:160px}
.sheet td{padding:0;border-bottom:1px solid var(--hair);text-align:center;height:42px}
.sheet tr:last-child td{border-bottom:0}
.sheet tbody tr:hover td{background:rgba(245,196,0,.06)}
.sheet .who{font-weight:700;font-size:13px}
.sheet .who small{display:block;font-weight:600;font-size:10px;color:var(--dim);
  font-family:var(--mono);letter-spacing:.02em}
.sheet .sect td{
  background:var(--panel2);height:30px;text-align:left;padding:0 14px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--dim);border-bottom:1px solid var(--line)
}

/* on / off cells. Click targets, so they read as editable. */
.cell{
  display:block;width:100%;height:100%;border:0;font:inherit;cursor:pointer;
  background:transparent;color:var(--dim);
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.04em;
  transition:background .12s ease;
}
.cell:hover{background:rgba(28,143,208,.09)}
.cell.on { background:var(--okbg); color:var(--grn) }
.cell.off{ background:transparent; color:#b3aa8e }
.cell.tvl{ background:var(--ambg); color:var(--ambd,#a87400) }   /* travel / turnaround */
.cell:focus-visible{outline:2px solid var(--rule);outline-offset:-2px}

/* truck chip */
.truck{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--panel2);border:1px solid var(--line);border-radius:20px;
  padding:3px 10px;font-family:var(--mono);font-weight:700;font-size:11px;
  color:var(--val);cursor:pointer
}
.truck:hover{border-color:var(--hov,#c0ae7c)}
.truck i{width:6px;height:6px;border-radius:50%;background:var(--rule);font-style:normal}

/* ---------------------------------------------------------------
   BUTTONS / SEGMENTS
   --------------------------------------------------------------- */
.seg{display:inline-flex;align-items:center;gap:5px}
.seg>span{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  margin-right:3px;font-weight:700}
.seg button{
  font:inherit;font-size:11.5px;font-weight:700;padding:6px 12px;cursor:pointer;
  border-radius:var(--rad2);border:1px solid var(--line);
  background:var(--panel);color:var(--lbl)
}
.seg button:hover{border-color:#c0ae7c;color:var(--txt)}
.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.btn{
  font:inherit;font-size:12.5px;font-weight:800;padding:9px 16px;cursor:pointer;
  border-radius:var(--rad2);border:1px solid var(--line);
  background:var(--panel);color:var(--txt)
}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover{filter:brightness(.97)}

/* ---------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:18px 20px 60px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.scroll{overflow-x:auto}

@media(max-width:760px){
  .wrap{padding:14px 12px 48px}
  .plate .ti{font-size:10px}
  .plate .vl{font-size:11.5px}
  .plate .no{font-size:13px;padding:0 7px}
  .sheet th.name,.sheet td.name{min-width:128px;padding-left:10px}
}