/* ============================================================================
   mise-cloud web — hand-rolled, no framework.
   Gold-on-near-black elegance. Phone-first. One heartbeat per screen.

   LOCKED brand palette (do not change without ratification):
     ink    #1a0e08   — the page
     gold   #8a5e0c   — structural accent: borders, fills, the badge
     cream  #f5ead6   — text
     bronze #c8a878   — interactive accent, secondary text warmth
   Serif headings — always.

   DERIVED support tones (warm mixes of ink/gold/cream — ratify or adjust):
     panel #241811 · panel-2 #2d1e13 · line #3e2c1a · muted #b3a186
     faint #7d6b52 · gold-bright #dfb35c (legibility tint of the locked gold)
   Lane colors ported verbatim from the original PASS:
     ok #42A86E · warn #E0A53F · call #D2483F
   ========================================================================== */
:root{
  --ink:#1a0e08; --panel:#241811; --panel-2:#2d1e13; --line:#3e2c1a;
  --txt:#f5ead6; --muted:#b3a186; --faint:#7d6b52;
  --gold:#8a5e0c; --bronze:#c8a878; --gold-bright:#dfb35c;
  --ok:#42A86E; --warn:#E0A53F; --call:#D2483F;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* the single easing/timing system (ported exact) */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.9,.34,1);
  --ease-spring:cubic-bezier(.34,1.46,.5,1);
  --ease-inout:cubic-bezier(.65,.05,.36,1);
  --t-fast:140ms; --t-base:280ms; --t-slow:520ms; --stagger:52ms;
}
*{box-sizing:border-box}

/* scroll guarantee: no class, overlay or stale state may ever lock the page */
html,body{overflow-y:auto!important; height:auto!important}
html,body{margin:0;padding:0}

body{
  background:
    radial-gradient(1300px 760px at 72% -12%, rgba(200,168,120,.06), transparent 58%),
    radial-gradient(900px 600px at 0% 110%, rgba(138,94,12,.05), transparent 55%),
    var(--ink);
  color:var(--txt); font-family:var(--serif); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
a{color:var(--bronze); text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif)}   /* serif headings — locked */
.mono{font-family:var(--mono)}

/* ---------------- header ---------------- */
header.shell{padding:18px 20px 6px; border-bottom:1px solid var(--line)}
.hd-row{display:flex; align-items:baseline; gap:12px}
.mark{font-weight:600; font-size:22px; letter-spacing:.26em;
  background:linear-gradient(135deg,var(--bronze),var(--gold-bright) 45%,var(--gold));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}
.hd-tag{font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--faint); text-transform:uppercase}
.hd-clock{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap}
.lede{font-size:19px; line-height:1.35; margin:12px 0 10px; color:var(--txt); font-style:italic}

/* ---------------- layout ---------------- */
main.shell{max-width:1180px; margin:0 auto; padding:0 20px}
@media (min-width:900px){
  main.shell.two-col{display:grid; grid-template-columns:60% 1fr; gap:0 34px; align-items:start}
  .col-l{grid-column:1;min-width:0} .col-r{grid-column:2;min-width:0}
}
section.beat{padding:22px 0 10px; border-bottom:1px solid var(--line)}
section.beat:last-child{border-bottom:none}
.beat-head{display:flex; align-items:center; gap:11px; margin-bottom:6px}
.beat-title{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze)}
.beat-lede{font-size:16.5px; margin:2px 0 14px; color:var(--txt)}
.beat-lede b{color:var(--gold-bright); font-weight:600}

/* THE one heartbeat — the WAITING count badge. Exactly one per screen. */
.wait-badge{position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 8px; border-radius:13px; font-family:var(--mono);
  font-size:13px; font-weight:600; color:var(--txt); background:var(--gold);
  animation:hb-beat 4.2s var(--ease-inout) infinite}
.wait-badge.call{background:var(--warn); color:#1a0e08; animation-duration:2.6s}
.wait-badge::after{content:""; position:absolute; inset:0; border-radius:13px; background:inherit;
  opacity:.45; z-index:-1; animation:hb-ring 4.2s var(--ease-out) infinite}
.wait-badge.call::after{animation-duration:2.6s}
@keyframes hb-beat{0%,100%{transform:scale(1)} 6%{transform:scale(1.18)} 12%{transform:scale(1)} 18%{transform:scale(1.1)} 26%{transform:scale(1)}}
@keyframes hb-ring{0%{transform:scale(1);opacity:.45} 16%{opacity:.25} 55%,100%{transform:scale(1.9);opacity:0}}

/* ---------------- cards (lanes) ---------------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:15px 16px;
  margin-bottom:12px; opacity:0; animation:rise var(--t-base) var(--ease-soft) forwards;
  overflow:hidden; transition:max-height var(--t-slow) var(--ease-inout), opacity var(--t-base) var(--ease-inout),
  margin var(--t-slow) var(--ease-inout), padding var(--t-slow) var(--ease-inout)}
@keyframes rise{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.card.gone{max-height:0!important; opacity:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0}
.card.gate{border-left:3px solid var(--gold); background:linear-gradient(90deg, rgba(138,94,12,.12), var(--panel) 55%)}
.card.green{border-left:3px solid var(--ok)}
.card.red{border-left:3px solid var(--call)}
.card.yellow{border-left:3px solid var(--warn)}
.card .kind{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:5px}
.card h3{margin:0 0 4px; font-size:17px; font-weight:600; line-height:1.3}
.card h3 .dollar, .dollar{font-weight:800; color:var(--gold-bright); letter-spacing:.005em}
.card .sub{font-size:13.5px; color:var(--muted)}
.card .verbatim{font-size:14px; color:var(--txt); font-style:italic; margin:6px 0 2px; line-height:1.45}
.card .meta{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:7px}
.card-actions{display:flex; align-items:center; gap:14px; margin-top:12px}
.boundary{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:8px}
.empty-pass{font-size:18px; font-style:italic; color:var(--muted); padding:26px 4px}
.overflow-link{display:block; font-family:var(--mono); font-size:11px; color:var(--bronze); padding:4px 2px 10px}

/* HOLD TO FIRE — press-and-hold 600ms, gold fill sweep. The completed hold IS the go. */
.hold-fire{position:relative; flex:1; min-height:56px; border-radius:8px; border:1px solid var(--gold);
  background:var(--panel-2); color:var(--gold-bright); font-family:var(--mono); font-size:13px;
  letter-spacing:.14em; font-weight:600; cursor:pointer; overflow:hidden;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation}
.hold-fire .fill{position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg, rgba(200,168,120,.24), rgba(138,94,12,.55)); z-index:0}
.hold-fire.holding .fill{width:100%; transition:width 600ms linear}
.hold-fire span{position:relative; z-index:1}
.hold-fire:disabled{opacity:.6; cursor:default}
.done-btn{flex:1; min-height:56px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2);
  color:var(--txt); font-family:var(--mono); font-size:13px; letter-spacing:.12em; font-weight:600; cursor:pointer}
.done-btn:active{border-color:var(--gold)}

/* ---------------- money (owner surfaces ONLY — never on crew paper) ------- */
.money-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px}
.money-cell{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:13px 13px 11px}
.money-cell .lbl{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.money-cell .num{font-size:24px; font-weight:600; margin-top:4px; letter-spacing:-.01em}
.money-cell .note{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4}
@media (max-width:560px){ .money-grid{grid-template-columns:1fr} .money-cell .num{font-size:22px} }
.cash-line{font-size:14.5px; font-style:italic; color:var(--warn); margin:10px 0 4px; font-weight:600}
.cash-line.live{color:var(--txt)}

/* ---------------- day card lines (crew-paper grammar) --------------------- */
.day-line{display:flex; gap:12px; padding:10px 2px; border-bottom:1px dashed var(--line); align-items:baseline}
.day-line:last-of-type{border-bottom:none}
.day-line .t{font-family:var(--mono); font-size:12px; color:var(--bronze); white-space:nowrap; min-width:64px}
.day-line .act{font-size:15px; font-weight:600}
.day-line .who{font-family:var(--mono); font-size:11px; color:var(--faint); margin-left:auto; white-space:nowrap; text-transform:uppercase; letter-spacing:.08em}
.day-line.red .act{color:var(--call)}
.day-line.yellow .act{color:var(--warn)}

/* ---------------- week strip ---------------- */
.week-strip{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 14px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.week-strip::-webkit-scrollbar{display:none}
.week-tile{flex:0 0 132px; scroll-snap-align:start; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; padding:12px 13px 10px; opacity:0; animation:rise var(--t-base) var(--ease-soft) forwards}
.week-tile.today{border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold)}
.week-tile .d{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.week-tile.today .d{color:var(--bronze)}
.week-tile .n{font-size:24px; font-weight:600; margin-top:3px}
.week-tile .h{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.35}

/* ---------------- watchlist ---------------- */
.watch-line{display:flex; gap:10px; padding:7px 2px; font-size:14px; align-items:baseline}
.watch-line .dot{flex:none; width:7px; height:7px; border-radius:50%; background:var(--ok); position:relative; top:-1px}
.watch-line.call .dot{background:var(--call)}
.watch-line.warn .dot{background:var(--warn)}
.watch-line .wl-meta{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-left:auto; white-space:nowrap}

/* ---------------- lists (clients / engagements) ---------------- */
.row-list{padding:0; margin:0; list-style:none}
.row{display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  background:none; border:none; border-bottom:1px dashed var(--line); color:var(--txt);
  font-family:var(--serif); font-size:16px; padding:14px 2px; min-height:48px; cursor:pointer}
.row:active{background:var(--panel)}
.row .name{font-weight:600}
.row .sub{font-size:13px; color:var(--muted)}
.row .tail{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--bronze); white-space:nowrap}
.lane-chip{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:2px 8px; border-radius:9px; border:1px solid var(--line); color:var(--muted)}
.lane-chip.green{color:var(--ok); border-color:rgba(66,168,110,.4)}
.lane-chip.yellow{color:var(--warn); border-color:rgba(224,165,63,.4)}
.lane-chip.red{color:var(--call); border-color:rgba(210,72,63,.4)}
.detail-panel{margin-top:8px}

/* ---------------- forms ---------------- */
.field{display:block; margin:14px 0}
.field .lbl{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{
  width:100%; min-height:48px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  color:var(--txt); font-family:var(--serif); font-size:16px; padding:10px 13px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold)}
.btn-primary{display:block; width:100%; min-height:56px; border-radius:8px; border:1px solid var(--gold);
  background:linear-gradient(90deg, rgba(138,94,12,.35), rgba(138,94,12,.18)); color:var(--gold-bright);
  font-family:var(--mono); font-size:13px; letter-spacing:.14em; font-weight:600; cursor:pointer}
.btn-primary:active{background:rgba(138,94,12,.5)}
.btn-ghost{background:none; border:1px solid var(--line); color:var(--bronze); font-family:var(--mono);
  font-size:11px; padding:10px 14px; min-height:44px; border-radius:6px; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease-out)}
.btn-ghost:active{border-color:var(--gold)}
details.adder summary{cursor:pointer; font-family:var(--mono); font-size:11px; color:var(--bronze);
  letter-spacing:.1em; list-style:none; padding:10px 2px; min-height:44px; display:flex; align-items:center}
details.adder summary::-webkit-details-marker{display:none}
details.adder[open] summary{color:var(--gold-bright)}

/* ---------------- staleness grammar (uniform) ---------------- */
.asof-chip{font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:var(--faint)}
.asof-chip.amber{color:var(--warn)}
.asof-chip.old{color:var(--warn); font-weight:700}

/* ---------------- skeletons — never fake zeros ---------------- */
.skel{height:14px; border-radius:4px; margin:8px 0;
  background:linear-gradient(90deg, var(--panel-2) 25%, #382817 50%, var(--panel-2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s var(--ease-inout) infinite}
@keyframes shimmer{0%{background-position:200% 0} 100%{background-position:-200% 0}}
.board-fail{font-size:14px; font-style:italic; color:var(--warn); padding:10px 2px}

/* ---------------- dock (thumb reach, safe-area) ---------------- */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:60; height:calc(49px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom); display:flex;
  background:rgba(26,14,8,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.dock a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--faint);
  background:none; border:none; cursor:pointer; text-transform:uppercase; min-height:44px}
.dock a.active{color:var(--bronze)}
.dock .ic{font-size:15px; font-family:var(--serif)}

/* ---------------- toast ---------------- */
.toast{position:fixed; left:50%; transform:translateX(-50%) translateY(16px);
  bottom:calc(62px + env(safe-area-inset-bottom));
  z-index:90; background:var(--panel-2); border:1px solid var(--gold); color:var(--txt);
  font-size:14px; padding:11px 18px; border-radius:8px; opacity:0; pointer-events:none;
  transition:opacity var(--t-base) var(--ease-inout), transform var(--t-base) var(--ease-out); max-width:86vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.fail{border-color:var(--call)}

/* ---------------- login ---------------- */
.login-wrap{min-height:78vh; display:flex; align-items:center; justify-content:center; padding:24px 20px}
.login-card{width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:26px 24px 22px}
.login-card .mark{font-size:28px; display:block; text-align:center}
.login-card .hd-tag{display:block; text-align:center; margin-top:6px}
.login-note{font-size:13.5px; color:var(--muted); margin-top:14px; line-height:1.5}

/* ---------------- stations (laptop-first worker pages) ----------------
   Plain pages, plain forms, post-redirect-get. The one new interaction is
   DONE: a completion event, not a delete. */
.row.static{cursor:default; background:none}
.inline-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px}
.inline-form input[type=text]{flex:1 1 180px; min-width:0}
.card-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}
.quote-form{display:grid; gap:10px}
.quote-number{font-family:var(--serif); font-size:34px; letter-spacing:.01em; margin:4px 0 2px}
.cleared-log{margin-top:14px}
.cleared-log summary{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--faint)}

/* ---------------- editing the person (laptop-first) ----------------
   The salesperson is on a call with a laptop open. The edit fields ARE the
   record: no modal, no "click to edit", nothing to discover. Two columns on a
   laptop, one on anything narrower — the same page either way. */
.edit-grid{display:grid; grid-template-columns:1fr; gap:0 18px}
@media (min-width:720px){ .edit-grid{grid-template-columns:1fr 1fr} }
.edit-grid .field{margin:10px 0}
.edit-grid .wide{grid-column:1/-1}
.was-line{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:5px;
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.was-line .was-val{color:var(--bronze)}
.undo-inline{background:none; border:none; padding:0; cursor:pointer; color:var(--gold-bright);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-decoration:underline}
.undo-inline[disabled]{color:var(--faint); text-decoration:none; cursor:default}
.check-line{display:flex; gap:9px; align-items:center; font-size:14.5px; margin:10px 0}
.check-line input[type=checkbox]{width:20px; min-height:20px; height:20px; accent-color:var(--gold)}
.diff{font-family:var(--mono); font-size:11.5px}
.diff .from{color:var(--faint)}
.diff .arrow{color:var(--bronze); padding:0 5px}
.diff .to{color:var(--txt)}