/* ---- OS chrome: refusal cards and the recovery bar -----------------------
   Was `resident.css`, which also carried a decorative pixel character that
   walked along the bottom of the client OS. Removed 2026-09-06 (Solomon): a
   business owner opening their operations app does not want a mascot, and the
   sprite cost a second requestAnimationFrame loop, eight PNGs and a pre-auth
   route to serve them. The file kept its other two tenants and lost the name
   that no longer described it. */
/* ── WHAT'S WORKING ───────────────────────────────────────────────────────
   A business owner is not reading a dashboard for pleasure. They are asking
   one question — is this thing working — so the verdict is the only large
   type on the page and everything under it is either a fix or a fact.

   Semantic colour only (--ok / --warn / --stop). The client's own brand
   accents are for their content, not for telling them something is broken. */
.wk-loading{color:var(--faint);font-size:14px}
.wk-verdict{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:14px}
.wk-verdict i{width:10px;height:10px;border-radius:50%;flex:none;margin-top:9px;background:var(--muted)}
.wk-verdict p{margin:0;font:600 19px/1.45 var(--sans);letter-spacing:-.015em;color:var(--text);text-wrap:pretty}
.wk-verdict small{display:block;margin-top:7px;font:400 13.5px/1.6 var(--sans);color:var(--muted);letter-spacing:0}
.wk-verdict.ok    i{background:var(--ok);box-shadow:0 0 12px rgba(110,231,183,.5)}
.wk-verdict.partial i{background:var(--warn);box-shadow:0 0 12px rgba(253,230,138,.45)}
.wk-verdict.stuck i{background:var(--stop);box-shadow:0 0 12px rgba(253,164,175,.5)}
.wk-verdict.idle  i{background:var(--faint)}

.wk-h{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:26px 0 11px}
.wk-fix{display:flex;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-left:2px solid var(--warn);
  border-radius:0 var(--r) var(--r) 0;padding:15px 18px;margin-bottom:9px}
.wk-fix .who{font:600 14.5px var(--sans);color:var(--text)}
.wk-fix .what{font:400 13.5px var(--sans);color:var(--muted);line-height:1.5}
.wk-fix .what b{color:var(--warn);font-weight:600}
.wk-fix button{margin-left:auto;flex:none;cursor:pointer;border-radius:10px;padding:10px 15px;
  font:600 11.5px var(--sans);letter-spacing:.02em;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid var(--line-2);color:var(--text);transition:all .16s}
.wk-fix button:hover{background:rgba(255,255,255,.13);border-color:var(--line-3)}

.wk-cols{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:640px){.wk-cols{grid-template-columns:1fr}}
.wk-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.wk-col h4{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 13px}
.wk-row{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid rgba(255,255,255,.055)}
.wk-row:first-of-type{border-top:none}
.wk-row i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint);align-self:center}
.wk-row.on i{background:var(--ok)} .wk-row.off i{background:var(--faint)}
.wk-row.warn i{background:var(--warn)}
.wk-row span{font:500 13.5px var(--sans);color:var(--text)}
.wk-row em{margin-left:auto;font-style:normal;font:400 11.5px var(--mono);color:var(--faint);text-align:right}

.wk-taps{display:flex;gap:26px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 22px}
.wk-tap b{display:block;font:700 25px/1 var(--sans);letter-spacing:-.03em;color:var(--text);
  font-variant-numeric:tabular-nums}
.wk-tap span{display:block;margin-top:5px;font:600 9.5px var(--mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint)}
.wk-tap.corr b{color:var(--warn)}
.wk-teach{flex:1;min-width:200px;align-self:center;font:400 13px/1.6 var(--sans);color:var(--muted);
  padding-left:22px;border-left:1px solid var(--line)}
@media(max-width:640px){.wk-teach{padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:14px}}
.wk-teach b{color:var(--text);font-weight:600}
.wk-since{margin-top:12px;font:400 11.5px var(--mono);color:var(--faint)}

/* ── THE ONE QUESTION ─────────────────────────────────────────────────────
   Shown after a reject has already landed. Calm, not a form: the client has
   done the thing they came to do, and this is an offer rather than a toll. */
.card.asking{border-color:var(--line-2)}
.whybox{padding:4px 2px}
.why-q{margin:0 0 12px;font:400 14.5px/1.5 var(--sans);color:var(--muted)}
.why-q b{color:var(--text);font-weight:600}
.why-row{display:flex;gap:8px;flex-wrap:wrap}
.why-in{flex:1;min-width:190px;background:rgba(255,255,255,.045);border:1px solid var(--line-2);
  border-radius:11px;padding:12px 14px;color:var(--text);font:400 14px var(--sans);outline:none}
.why-in:focus{border-color:var(--accent-dim)}
.why-in::placeholder{color:var(--faint)}
.why-go,.why-skip{cursor:pointer;border-radius:11px;padding:12px 17px;white-space:nowrap;
  font:600 12px var(--sans);letter-spacing:.02em;border:1px solid var(--line-2)}
.why-go{background:var(--paper);color:#0A0A0A;border-color:var(--paper)}
.why-go:hover{opacity:.88}
.why-skip{background:none;color:var(--faint)}
.why-skip:hover{color:var(--muted);border-color:var(--line-3)}
.why-note{margin:10px 0 0;font:400 11.5px/1.55 var(--sans);color:var(--faint)}


/* What they have taught. Their words, not a summary of their words. */
.wk-taught{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:17px 19px}
.wk-taught-lede{margin:0 0 13px;font:400 12.5px/1.6 var(--sans);color:var(--faint)}
.wk-lesson{display:flex;gap:11px;align-items:baseline;padding:9px 0;border-top:1px solid rgba(255,255,255,.055)}
.wk-lesson:first-of-type{border-top:none;padding-top:0}
.wk-scope{flex:none;font:700 8.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.06);color:var(--faint)}
.wk-scope.all{background:rgba(110,231,183,.14);color:var(--ok)}
.wk-note{flex:1;min-width:0;font:400 13.5px/1.6 var(--sans);color:var(--text)}
.wk-lesson em{flex:none;font-style:normal;font:600 10.5px var(--mono);color:var(--faint)}

/* ── WHAT A DRAFT IS BASED ON ─────────────────────────────────────────────
   Quieter than the draft, because the draft is still the thing being judged.
   Closed by default so a client who trusts a lane is not made to read a
   paragraph per card — but one tap away, every time, for the ones they doubt.
   The dot carries the meaning at a glance: green means the agent checked,
   amber means the agent reasoned and you should look harder. */
.basis{margin:11px 0 0;border-top:1px solid rgba(255,255,255,.055);padding-top:10px}
.basis summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  font:600 11px var(--mono);letter-spacing:.06em;color:var(--faint);padding:2px 0}
.basis summary::-webkit-details-marker{display:none}
.basis summary:hover{color:var(--muted)}
.basis-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--faint)}
.basis.b-fact .basis-dot{background:var(--ok);box-shadow:0 0 7px rgba(110,231,183,.55)}
.basis.b-inferred .basis-dot{background:var(--warn);box-shadow:0 0 7px rgba(253,230,138,.5)}
.basis.b-fact summary{color:#8FD9BC}
.basis.b-inferred summary{color:#D9C68F}
.basis-lead{flex:1;min-width:0;text-transform:uppercase}
.basis-chip{flex:none;font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--muted)}
.basis-chip.b-watch{background:rgba(253,230,138,.14);color:var(--warn)}
.basis-chip.b-ignore{background:rgba(255,255,255,.05);color:var(--faint)}
.basis-chev{flex:none;font-size:9px;transition:transform .18s}
.basis[open] .basis-chev{transform:rotate(180deg)}
.basis-body{padding:10px 0 2px}
.basis-body p{margin:0 0 9px;font:400 12.5px/1.62 var(--sans);color:var(--muted)}
.basis-body p:last-child{margin-bottom:0}
.basis-k{display:block;font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px}

/* ── RECOVERY BAR ─────────────────────────────────────────────────────────
   Nobody should ever have to quit and reopen this. Refresh is the only repair
   step there is, and this bar performs it for them.
   Fixed to the bottom so it cannot push the page around mid-read, and above
   everything so a broken screen underneath cannot hide the way out. */
#recovery-bar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);
  z-index:99999;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 28px));
  padding:13px 15px 13px 17px;border-radius:14px;background:rgba(16,16,20,.97);
  backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--line-2);
  box-shadow:0 12px 40px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .28s}
#recovery-bar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#recovery-bar .rb-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}
#recovery-bar.rb-update .rb-dot{background:var(--ok);box-shadow:0 0 10px rgba(110,231,183,.6)}
#recovery-bar.rb-broken .rb-dot{background:var(--stop);box-shadow:0 0 10px rgba(253,164,175,.6)}
#recovery-bar.rb-offline .rb-dot{background:var(--warn)}
#recovery-bar .rb-say{font:500 13.5px/1.45 var(--sans);color:var(--text);flex:1;min-width:0}
#recovery-bar .rb-do{flex:none;cursor:pointer;border-radius:9px;padding:9px 15px;
  font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--paper);border:none;color:#0A0A0A}
#recovery-bar .rb-do:hover{opacity:.88}
#recovery-bar .rb-x{flex:none;cursor:pointer;background:none;border:none;color:var(--faint);
  font-size:19px;line-height:1;padding:0 3px}
#recovery-bar .rb-x:hover{color:var(--text)}
@media(prefers-reduced-motion:reduce){#recovery-bar{transition:opacity .2s}}
@media(max-width:520px){#recovery-bar{left:14px;right:14px;transform:translate(0,140%);max-width:none}
  #recovery-bar.on{transform:translate(0,0)}}