/* widgets/needs-you — the Court Strip + the alert button skin. The slide-out drawer
   (#nu-drawer / .nd-*) was REMOVED ENTIRELY 2026-07-26 (Craig 7:37p: "This drawer goes
   away right?"), and its skin went with it — a stylesheet for a panel nothing builds is
   the same lie as the markup was. The needs-you surfaces are the Court Strip below and
   The Study. Base .obtn stays in the shell. */
.obtn.nu-alert{background:var(--action,#15a850);border-color:var(--action,#15a850);color:#fff}
.obtn.nu-alert:hover{background:var(--action-deep,#0c7a38);border-color:var(--action-deep,#0c7a38)}

/* FRESHNESS RULE (Craig 7/17 12:07p): every union item wears its added-date; past 48h a
   subtle verify-freshness treatment — muted tan, never alarm ink. A stale ask that costs
   Craig a click is a defect; the nightly re-verify closes what reality already resolved. */
.nu-fresh{display:inline-flex;align-items:center;font:500 10px Inter;color:#647062;white-space:nowrap}
.nu-fresh.stale{background:#faf6e8;border:1px solid #e8ddb8;border-radius:999px;padding:1px 8px;color:#8a7a3a;font-weight:600}

/* THE FIX-IT FLOW (Craig 7/18): one FIX NOW per craig-court auth/stmt row → grab the
   responsible bot, land its browser on the main display at the login page, watch for the
   session to come alive, flip GREEN + resume. Court-honest: FIX NOW is a green ACTION
   button (--action); the live strip glows warning-amber ONLY while waiting on Craig;
   success is calm green and walk-away is neutral — never alarm ink. */
.nu-fixbtn{flex:none;align-self:center;font:800 10.5px Inter;letter-spacing:.04em;background:var(--action,#15a850);border:1px solid var(--action,#15a850);color:#fff;border-radius:999px;padding:5px 13px;cursor:pointer;box-shadow:0 1px 3px rgba(21,168,80,.28)}
.nu-fixbtn:hover{background:var(--action-deep,#0c7a38);border-color:var(--action-deep,#0c7a38)}
.nu-fixstrip{margin-top:9px;padding:10px 12px;background:var(--signal-tint,#eef6f1);border:1px solid var(--action-line,#8fdba8);border-radius:10px;display:flex;flex-direction:column;gap:7px;cursor:default}
.nu-fixstrip[data-phase="success"]{background:var(--action-tint,#e4f6ea);border-color:var(--action,#15a850)}
.nu-fixstrip[data-phase="walkaway"]{background:#faf9f4;border-color:var(--motm-grey-300,#d4d8d6)}
.nu-fixstrip .nfx-line{display:flex;align-items:center;gap:9px;font:600 12.5px Inter;color:var(--brand-deep,#1f4a2d);line-height:1.45}
.nu-fixstrip .nfx-line.ok{color:var(--action-deep,#0c7a38)}
.nu-fixstrip .nfx-msg{flex:1;min-width:0}
.nu-fixstrip .nfx-sub{font:400 11px Inter;color:var(--motm-grey-700,#525854);line-height:1.5}
.nu-fixstrip .nfx-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:1px}
.nu-fixstrip .nfx-done{font:700 11.5px Inter;background:var(--action,#15a850);border:1px solid var(--action,#15a850);color:#fff;border-radius:999px;padding:6px 14px;cursor:pointer}
.nu-fixstrip .nfx-done:hover{background:var(--action-deep,#0c7a38)}
.nu-fixstrip .nfx-later{font:600 11px Inter;background:#fff;border:1px solid var(--motm-grey-300,#d4d8d6);color:var(--motm-grey-700,#525854);border-radius:999px;padding:6px 12px;cursor:pointer}
.nu-fixstrip .nfx-later:hover{background:#f3f1ea}
.nu-fixstrip .nfx-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--motm-grey-300,#c9cfca)}
.nu-fixstrip .nfx-dot.live{background:var(--motm-warning,#b87a14);animation:nfxpulse 1.6s infinite}
.nu-fixstrip .nfx-dot.spin{border:2px solid var(--action-line,#8fdba8);border-top-color:var(--action,#15a850);background:none;width:11px;height:11px;animation:nfxspin .7s linear infinite}
.nu-fixstrip .nfx-dot.done{background:var(--action,#15a850)}
/* DEGRADED — the bridge could not open the browser and Craig has to do two steps himself
   (Craig 7/27: the old fallback changed one small sub-line under an otherwise-identical green
   strip, and he read it as "nothing happens"). The WHOLE panel flips amber, gets a heavier
   border and its own numbered steps. Amber, not alarm: this is his own court and it is a
   detour, not a failure — the strip's standing law still holds. */
.nu-fixstrip[data-phase="degraded"]{background:#fdf6e4;border-color:#e0a92e;border-width:1px;
  border-left:4px solid var(--motm-warning,#b87a14);padding:12px 14px;gap:9px}
.nu-fixstrip[data-phase="degraded"] .nfx-line{font:800 13px Inter;color:#7a4a06}
.nu-fixstrip[data-phase="degraded"] .nfx-done{background:var(--motm-warning,#b87a14);border-color:var(--motm-warning,#b87a14)}
.nu-fixstrip[data-phase="degraded"] .nfx-done:hover{background:#9a6410;border-color:#9a6410}
.nu-fixstrip .nfx-steps{display:flex;flex-direction:column;gap:6px;padding:9px 11px;background:#fffdf6;
  border:1px solid #ecdcb4;border-radius:8px}
.nu-fixstrip .nfx-step{font:500 11.5px/1.5 Inter;color:#5c4a24}
.nu-fixstrip .nfx-step b{font-weight:800;color:#7a4a06}
.nu-fixstrip .nfx-url{display:inline-block;margin-top:3px;font:600 10.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#7a4a06;word-break:break-all}
.nu-fixstrip .nfx-why{font:500 10.5px/1.45 Inter;color:#8a7038}
.nu-fixstrip .nfx-why b{font-weight:800;color:#7a4a06}
.nu-fixstrip .nfx-dot.warn{background:var(--motm-warning,#b87a14);animation:nfxpulse 1.6s infinite}
@keyframes nfxpulse{0%{box-shadow:0 0 0 0 rgba(184,122,20,.5)}70%{box-shadow:0 0 0 7px rgba(184,122,20,0)}100%{box-shadow:0 0 0 0 rgba(184,122,20,0)}}
@keyframes nfxspin{to{transform:rotate(360deg)}}

/* ═══ THE COURT STRIP (Craig 7/26, R1 approved as rendered) ══════════════════════════
   ONE Craig-court zone, top of the center column, fed ONLY by needsYouUnion. Every other
   needs-you costume (the HQ card badge, the 'Your court' banner inside Month-End Close,
   the drawer subtitle) demotes to a POINTER into this strip — exactly one surface may
   HOLD court items; the rest may only point. Four places to check becomes one.
   Chrome = the close card's card math (16px radius, 1px #e7e2d4) + the ONLY two alarm
   affordances the court-honest law allows on a whole card: a 4px amber left edge and the
   alfred-board calm glow (breathing, never flashing). Fill is #fffdf6 — parchment warmed
   one step, NOT an amber box. Row-level amber is confined to the age figure and the
   existing .lr-act pill. */
#ops-pane-today .courtstrip{position:relative;background:#fffdf6;border:1px solid var(--line,#e7e2d4);
  border-left:4px solid var(--motm-warning,#b87a14);border-radius:16px;padding:15px 20px 8px;
  animation:csGlow 4.6s ease-in-out infinite}
@keyframes csGlow{0%,100%{box-shadow:0 0 0 0 rgba(224,169,46,0)}50%{box-shadow:0 0 0 5px rgba(224,169,46,.13)}}
@media (prefers-reduced-motion:reduce){ #ops-pane-today .courtstrip{animation:none;box-shadow:0 0 0 4px rgba(224,169,46,.11)} }
/* THE WHOLE TAN SURFACE IS THE DOOR (Craig 7/27 8:17a): "click anywhere in the tan area to open
   The Study instead of having to move my mouse all the way over to the buttons." The pointer is
   the promise — it must be true over the header, the padding and the foot line, not only over
   the pills. Geometry is untouched on purpose: this is an R1-approved surface, and widening the
   row hit-box to the card edges would have redrawn the separators along with it. */
#ops-pane-today .courtstrip{cursor:pointer}
#ops-pane-today .courtstrip .cs-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
#ops-pane-today .courtstrip .cs-ct{font:800 11px Inter;color:#fff;background:#956010;border-radius:99px;
  padding:2px 9px;box-shadow:0 0 0 3px rgba(224,169,46,.22);font-variant-numeric:tabular-nums}
#ops-pane-today .courtstrip .cs-say{font:400 12.5px Inter;color:#736c5d}
#ops-pane-today .courtstrip .cs-fresh{margin-left:auto;font:500 11px Inter;color:#736c5d;white-space:nowrap}
#ops-pane-today .courtstrip .cs-row{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid #f4efdf;min-width:0}
#ops-pane-today .courtstrip .cs-row:last-of-type{border-bottom:none}
/* a row is its own target — it lands The Study ON this item. The hover tint is the parchment
   one step warmer, never a highlight: this strip's alarm ink is spent on the age figure. */
#ops-pane-today .courtstrip .cs-row{cursor:pointer;transition:background .12s}
#ops-pane-today .courtstrip .cs-row:hover{background:#fdf8ea}
#ops-pane-today .courtstrip .cs-row:focus-visible{outline:2px solid var(--motm-warning,#b87a14);
  outline-offset:-3px;border-radius:8px}
#ops-pane-today .courtstrip .cs-em{flex:none;font-size:15px;line-height:1;filter:saturate(.78);opacity:.9}
#ops-pane-today .courtstrip .cs-t{flex:1;min-width:0}
#ops-pane-today .courtstrip .cs-t .t1{font:600 14px Inter;color:#1f2937;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ops-pane-today .courtstrip .cs-t .t1 .cli{font-weight:400;color:#647062}
#ops-pane-today .courtstrip .cs-t .t2{display:flex;align-items:baseline;font:500 12px Inter;color:#736c5d;
  margin-top:2px;line-height:1.35;min-width:0;white-space:nowrap}
/* the detail gives way; 'since' and the age figure never do — the age is the row's only alarm ink */
#ops-pane-today .courtstrip .cs-t .t2 .d{min-width:0;overflow:hidden;text-overflow:ellipsis}
#ops-pane-today .courtstrip .cs-t .t2 .w{flex:none}
#ops-pane-today .courtstrip .cs-t .t2 .sep{flex:none;color:#736c5d;margin:0 6px}
#ops-pane-today .courtstrip .cs-t .t2 .age{color:var(--motm-warning,#b87a14);font-weight:700}
/* the source chip and the action pill each hold ONE column — rows whose verbs differ in
   length must not leave a ragged right edge */
#ops-pane-today .courtstrip .cs-src{flex:none;font:600 10px Inter;letter-spacing:.06em;text-transform:uppercase;
  color:#736c5d;background:#faf5e8;border:1px solid #efe7d2;border-radius:99px;padding:2px 8px;white-space:nowrap;
  min-width:78px;text-align:center}
#ops-pane-today .courtstrip .cs-row .lr-act{flex:none;font:600 13px Inter;background:#fdf6ea;border:1px solid #e3c878;
  color:var(--motm-warning,#b87a14);border-radius:999px;padding:5px 14px;cursor:pointer;white-space:nowrap;
  min-width:140px;text-align:center}
#ops-pane-today .courtstrip .cs-row .lr-act:hover{background:#fbeed6}
/* THE ✕ ON A STRIP ROW (Craig 8/5). Quiet by default and only surfacing when the eye is already
   on the row — a dismiss is destructive and must never out-shout the action pill beside it.
   It stays keyboard-reachable at all times (:focus-within / :focus-visible), because
   "visible on hover" is a mouse rule and would otherwise take the button from the keyboard. */
#ops-pane-today .courtstrip .cs-row .abw-x{flex:none;margin-left:2px;font:700 12px/1 Inter;
  border:1px solid transparent;border-radius:999px;background:transparent;color:#736c5d;
  padding:5px 7px;cursor:pointer;opacity:0;transition:opacity .12s,color .12s,background .12s}
#ops-pane-today .courtstrip .cs-row:hover .abw-x,
#ops-pane-today .courtstrip .cs-row:focus-within .abw-x{opacity:1}
#ops-pane-today .courtstrip .cs-row .abw-x:hover{color:#8a5a0f;background:#f7efdd;border-color:#e6d9bb}
#ops-pane-today .courtstrip .cs-row .abw-x:focus-visible{opacity:1;outline:2px solid var(--motm-warning,#b87a14);outline-offset:1px}
#ops-pane-today .courtstrip .cs-row .abw-x:disabled{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){ #ops-pane-today .courtstrip .cs-row .abw-x{transition:none} }
/* CLEAR ALL — calm, never alarm ink. It sweeps his whole court, so it reads as a quiet utility
   beside the count rather than a red button begging to be pressed. */
#ops-pane-today .courtstrip .cs-hd .cs-xall{flex:none;font:600 11px Inter;color:#736c5d;
  background:#faf5e8;border:1px solid #efe7d2;border-radius:999px;padding:3px 10px;cursor:pointer;
  white-space:nowrap;transition:color .12s,background .12s,border-color .12s}
#ops-pane-today .courtstrip .cs-hd .cs-xall:hover{color:#8a5a0f;background:#f7efdd;border-color:#e6d9bb}
#ops-pane-today .courtstrip .cs-hd .cs-xall:focus-visible{outline:2px solid var(--motm-warning,#b87a14);outline-offset:1px}
#ops-pane-today .courtstrip .cs-hd .cs-xall:disabled{opacity:.6;cursor:default}
#ops-pane-today .courtstrip .cs-foot{display:flex;align-items:center;gap:10px;margin:2px -20px -8px;
  padding:9px 20px 10px;border-top:1px solid #f4efdf;background:#fdfbf2;border-radius:0 0 13px 13px}
#ops-pane-today .courtstrip .cs-foot .fl{font:500 12px Inter;color:#736c5d;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ops-pane-today .courtstrip .cs-foot .fb{margin-left:auto;flex:none;font:600 12px Inter;color:#5b6b5e;background:#fff;
  border:1px solid var(--line,#e7e2d4);border-radius:99px;padding:4px 12px;cursor:pointer}
#ops-pane-today .courtstrip .cs-foot .fb:hover{border-color:var(--brand-line,#b9d8b4)}
/* EMPTY STATE — the reward. No left edge, no glow, no amber, ONE quiet line. The strip
   never disappears entirely: a zone that vanishes teaches Craig to distrust its absence. */
#ops-pane-today .courtstrip.clear{background:#fbfaf6;border-left:1px solid var(--line,#e7e2d4);
  padding:10px 16px;animation:none;box-shadow:none;cursor:pointer}
#ops-pane-today .courtstrip.clear .cs-clear{display:flex;align-items:center;gap:9px;
  font:500 13px Inter;color:#647062}
#ops-pane-today .courtstrip.clear .cs-clear .tick{color:var(--brand-ok,#15803d);font-weight:700}
#ops-pane-today .courtstrip.clear .cs-fresh{margin-left:auto}

/* ── the demoted costumes: a POINTER chip, never a second count. The gold #e0a92e badge
   becomes a neutral #f2f0e9 chip whose only gold is the numeral — it still catches the eye
   at the seat, but it no longer competes with the strip for "where do I go". ── */
.ptr{display:inline-flex;align-items:center;gap:4px;font:600 11px Inter;color:#647062;background:#f2f0e9;
  border:1px solid #e3ded1;border-radius:99px;padding:2px 9px;white-space:nowrap;cursor:pointer}
.ptr:hover{border-color:#d3ccb9;color:#6b7669}
.ptr b{font-weight:800;color:#8a6d1f;font-variant-numeric:tabular-nums}

/* ── COMMITMENTS PANEL (Craig 7/29 6:06p — "one view for all of it"). Supersedes the 7/26
   three-row OWED rail: EVERY open commitment renders, court-grouped, nothing behind a click.
   Same .vr card math (10px radius, 1px #e7e2d4, white) so it still belongs to the rail — but the
   promise text now WRAPS to 3 lines instead of ellipsing at one, because in a 308px rail a single
   nowrap line clipped every promise to a fragment and Craig could not read what he owed.
   Court-honest: overdue is amber-calm in every court (never red), and only a CRAIG-COURT overdue
   row earns the 3px left edge + calm glow — the alarm-shaped tell belongs to the court that can
   actually act on it. ── */
#ops-pane-today .ow-ct{display:inline-block;margin-left:6px;font:700 10px Inter;font-variant-numeric:tabular-nums;
  color:#647062;background:#f2f0e9;border:1px solid #e3ded1;border-radius:99px;padding:1px 7px;vertical-align:1px}
#ops-pane-today .ow-ct.od{color:var(--motm-warning,#b87a14);background:#faf3e3;border-color:#eddfbb}
#ops-pane-today .ow-list{display:flex;flex-direction:column;gap:6px;min-width:0}
/* cap ONLY a long ledger — a short list gets no scrollbar and no clipped final row */
#ops-pane-today .ow-list.cap{max-height:520px;overflow-y:auto;padding-right:2px;
  scrollbar-width:thin;scrollbar-color:#ddd8c8 transparent}
/* group header: the court, named in Craig's words, with its own count */
#ops-pane-today .ow-g{display:flex;align-items:baseline;gap:6px;padding:4px 2px 0;min-width:0}
#ops-pane-today .ow-g-l{font:700 9.5px Inter;letter-spacing:.07em;text-transform:uppercase;color:#647062;flex:none}
#ops-pane-today .ow-g-n{font:600 9.5px Inter;color:#736c5d;font-variant-numeric:tabular-nums;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ops-pane-today .ow{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;
  background:#fff;border:1px solid var(--line,#e7e2d4);cursor:pointer;transition:border-color .12s;width:100%;text-align:left}
#ops-pane-today .ow:hover{border-color:var(--brand-line,#b9d8b4)}
/* a promise is a sentence, not a metric — up to 3 lines, then ellipsis */
#ops-pane-today .ow .ow-t{font:600 12.5px Inter;color:var(--motm-charcoal,#1a1d1c);line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
#ops-pane-today .ow .ow-s{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;
  font:400 var(--fs-micro,10px)/14px Inter;color:#647062;min-width:0}
#ops-pane-today .ow .ow-who{font-weight:600;color:#647062;flex:none}
#ops-pane-today .ow .ow-since{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ops-pane-today .ow .ow-by{flex:none;color:#647062;white-space:nowrap}
#ops-pane-today .ow .ow-age{margin-left:auto;flex:none;font:600 10px Inter;border-radius:99px;padding:1px 7px;white-space:nowrap;
  color:#647062;background:#f4f3ee}
#ops-pane-today .ow .ow-age.due{color:var(--motm-warning,#b87a14);background:#faf3e3}
/* .od = overdue in ANY court (calm amber wash) · .due = CRAIG-court overdue (edge + slow glow) */
#ops-pane-today .ow.od{background:#fffdf6}
#ops-pane-today .ow.due{border-left:3px solid #e6d3a4;
  box-shadow:inset 3px 0 0 #e0a92e,0 0 0 0 rgba(224,169,46,0);animation:owCalmGlow 3.6s ease-in-out infinite}
@keyframes owCalmGlow{0%,100%{box-shadow:inset 3px 0 0 #e0a92e,0 0 0 0 rgba(224,169,46,0)}
  50%{box-shadow:inset 3px 0 0 #e0a92e,0 0 8px 1px rgba(224,169,46,.22)}}
@media (prefers-reduced-motion:reduce){#ops-pane-today .ow.due{animation:none;
  box-shadow:inset 3px 0 0 #e0a92e,0 0 8px 1px rgba(224,169,46,.22)}}
/* one readable line, not a stacked explainer — .ow-empty-src went with the sentence it styled */
#ops-pane-today .ow-empty{font:500 12px Inter;color:#647062;padding:7px 10px}

/* ── THE MIRROR (Craig 8/18 4:53p): a client request renders with the client's own words on the
   card. A .ow row with a body preview and a door — same card math as every other commitment, so
   the mirror belongs to the panel rather than sitting on it. The green hairline on the left is
   the ONE tell that separates "someone is waiting on an answer" from a promise we logged
   ourselves; it is --signal green (a live request), never alarm — nothing here is overdue-red.
   The preview clamps at 3 lines: enough to know what they asked, short enough that four requests
   still fit a rail. The whole email lives one click away in .cq-read. ── */
#ops-pane-today .ow.cq{border-left:3px solid var(--brand-line,#b9d8b4);gap:4px}
#ops-pane-today .ow.cq:hover{border-color:var(--brand-line,#b9d8b4);background:#fcfdfb}
#ops-pane-today .ow .cq-prev{font:400 11.5px/1.5 Inter;color:#5b6b5e;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
#ops-pane-today .ow .cq-prev.cq-none{font-style:italic;color:#8b948a}
#ops-pane-today .ow .cq-go{font:600 10.5px Inter;color:var(--brand-ok,#15803d)}
/* the linked artifact on a directly-authored commitment — a caption, never a second button */
#ops-pane-today .ow .cq-link{font:500 10px/1.4 Inter;color:#7d8a7e;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── THE READER — his "show them in a nice clean way to look at". Serif headline, one meta line,
   then the email exactly as the client typed it: pre-wrap, because a numbered list of four
   questions about undeposited funds IS the structure of the request and reflowing it to a
   paragraph destroys the thing he opened it to read. ── */
#ops-modal .cq-read{max-width:760px;margin:0 auto}
#ops-modal .cq-read-h{font:700 20px/1.3 Fraunces,Georgia,serif;color:#1f4a2d;margin:0 0 6px}
#ops-modal .cq-read-m{font:500 12.5px Inter;color:#647062;margin:0 0 14px;
  padding:0 0 12px;border-bottom:1px solid var(--line,#e7e2d4)}
#ops-modal .cq-read-m .cq-em{margin-left:6px;color:#8b948a;font-weight:400}
#ops-modal .cq-read-m .cq-dot{margin:0 7px;color:#c3ccc4}
#ops-modal .cq-read-b{font:400 14.5px/1.72 Inter;color:#1f2937;white-space:pre-wrap;
  word-break:break-word;max-height:58vh;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:#ddd8c8 transparent}
#ops-modal .cq-read-n{font:400 12px/1.55 Inter;color:#736c5d;background:#fbf6e8;
  border:1px solid #ece0c4;border-radius:9px;padding:9px 12px;margin:12px 0 0}
#ops-modal .cq-read-a{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;
  padding:14px 0 0;border-top:1px solid var(--line,#e7e2d4)}
#ops-modal .cq-read-a .cq-act{font:600 12.5px Inter;color:var(--brand-ok,#15803d);
  background:#f2f8f3;border:1px solid #cfe6d4;border-radius:99px;padding:7px 15px;text-decoration:none}
#ops-modal .cq-read-a .cq-act:hover{background:#eaf4ec;border-color:#b9d8b4}
/* .ow-explain removed 8/6 (Craig: "Don't need all the gray explainers"). The rules went with the
   markup — a dead selector is an invitation to re-add the paragraph it used to dress. */

/* ═══ THE 🔑 DROP (Craig 8/3) — the room every login lives in now ═══════════════════════
   The cards themselves are widgets/alfred-board's .abw-* rows, rendered by the ONE
   abAuthCardHTML: this sheet dresses the room around them and nothing else, so the card
   cannot drift between the two places it is drawn. */
#nu-keydrop .nu-kd-say{font:400 12.5px/1.55 Inter;color:#5b6b5e;background:#fbf6e8;
  border:1px solid #ece0c4;border-radius:10px;padding:10px 13px;margin:0 0 13px}
#nu-keydrop .nu-kd-zero{font:500 13px/1.6 Inter;color:#5b6660;background:#f4f7f4;
  border:1px solid #dfe7e0;border-radius:10px;padding:14px 16px}
/* THE KEY, GROUPED BY DOOR (Craig 8/5 — nine walls read as four errands). A group header, not a
   card: it names the provider, how many separate sign-ins sit behind it and what they cost in
   parked jobs. Amber-calm, the 🔑's own ink — an errand, never an alarm. */
#nu-keydrop .nu-kd-fam{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:16px 0 6px;padding:0 0 5px;border-bottom:1px solid #f0e8d6}
#nu-keydrop .nu-kd-fam:first-of-type{margin-top:2px}
#nu-keydrop .nu-kd-fam-n{font:700 12px Inter;letter-spacing:.05em;text-transform:uppercase;color:#8a5a0f}
#nu-keydrop .nu-kd-fam-c{font:600 11px Inter;color:#a8895a;background:#fbf3df;
  border-radius:99px;padding:2px 9px}
#nu-keydrop .nu-kd-fam-j{margin-left:auto;font:500 11px Inter;color:#736c5d}