/* =====================================================================
   POP BENTO — WP-7: NICK'S UPDATES view reskin (taste-gate screen)
   Contract: POP-BENTO-SPEC.md + redesign-mockups/direction-b2-pop-bento.html
   Loads LAST (after the mains). Visual layer only — zero behavior, zero
   selector renames. Scope: #view-updates ONLY. Matches the established
   Pop Bento pattern already shipped for #view-health in bento.css:
   scoped --pb-* tokens, hard ink outlines, offset "sticker" shadows,
   Bricolage headings + Space Grotesk numerals/micro.
   The renderer (js/updates.js) emits the frozen .nu-* class names; this
   sheet only re-skins them. Nothing here leaks outside #view-updates.
   ===================================================================== */

/* ---- 1. Tokens (scoped — cascade only inside the Updates subtree) ---- */
#view-updates{
  --pb-paper:#faf6ee; --pb-ink:#191621; --pb-butter:#ffd66b; --pb-lilac:#cfc0f5;
  --pb-mint:#c2e7c6; --pb-coral:#ff9d7a; --pb-sky:#bcd9f2; --pb-blush:#f6c6cf;
  --pb-dim:#6f6a78; --pb-line:rgba(25,22,33,.18);
  --pb-head:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --pb-num:"Space Grotesk","Hanken Grotesk",system-ui,sans-serif;
  --pb-body:"Hanken Grotesk",system-ui,sans-serif;
  --pb-shadow:4px 4px 0 var(--pb-ink);
  --pb-shadow-sm:3px 3px 0 var(--pb-ink);
}

/* paper page behind the Updates view (modern browsers; fail-soft to app bg) */
body:has(#view-updates:not([hidden])){ background:var(--pb-paper, #faf6ee); }

/* ---- 2. Header ---- */
#view-updates .topbar{ background:transparent; border:0; }
#view-updates .topbar h1{
  font-family:var(--pb-head); font-weight:800; font-size:34px;
  letter-spacing:-.03em; color:var(--pb-ink); line-height:1.02;
}
/* 🔴 RESKIN-REDO 2026-07-25 (agent a76b8e37): the previous
   `max-width:720px; margin:0 auto` PAGE CAP here was the exact mid-width defect
   Nick rejected. REMOVED — full-width now, so this screen fills the canvas like
   Home/Health/Business. The `.page` ancestor already carries desktop.css §2's
   `max-width:var(--dw)` + 36px padding (the same full-width rule the reference
   screens use), so no horizontal padding is added here. NO page-level cap. */
#view-updates .nu-wrap{ max-width:none; margin:0; padding:6px 2px 108px; }
/* Full-width card grid — fill the page, never a mid-width column. 2-col
   masonry ≥700px (mirrors #view-business #ov-flags.ov-flags-cols, the layout
   Nick approves), single column on phones. The .nu-sub eyebrow stays full-width
   (it's a direct child of .nu-wrap, outside the #nu-live/#nu-seen card lists). */
#view-updates #nu-live, #view-updates #nu-seen{ column-count:2; column-gap:18px; }
#view-updates #nu-live > .nu-card, #view-updates #nu-seen > .nu-card{
  break-inside:avoid; -webkit-column-break-inside:avoid; display:inline-block; width:100%;
}
@media (max-width:700px){
  #view-updates #nu-live, #view-updates #nu-seen{ column-count:1; }
}
#view-updates .nu-sub{
  font-family:var(--pb-num); font-weight:500; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.13em; color:var(--pb-dim);
  opacity:1; margin:0 2px 18px;
}

/* ---- 3. The card (prow / feature treatment) ---- */
#view-updates .nu-card{
  background:#fff; border:1.5px solid var(--pb-ink);
  border-radius:22px; padding:16px 17px 15px; margin:0 0 15px;
  box-shadow:var(--pb-shadow); position:relative;
  transition:box-shadow .15s ease, transform .15s ease, opacity .2s ease;
}
/* severity identity — a thick left "spine" bar, ink-outlined, per severity */
#view-updates .nu-card::before{
  content:""; position:absolute; left:-1.5px; top:16px; bottom:16px; width:6px;
  background:var(--pb-butter); border-radius:0 6px 6px 0;
  border:1.5px solid var(--pb-ink); border-left:0;
}
#view-updates .nu-card:has(.nu-dot.nu-urgent)::before{ background:var(--pb-coral); }
#view-updates .nu-card:has(.nu-dot.nu-fyi)::before{ background:var(--pb-sky); }

#view-updates .nu-card.nu-acked{
  opacity:.72; box-shadow:2px 2px 0 rgba(25,22,33,.35);
  background:#fbfaf7;
}
#view-updates .nu-card.nu-acked::before{ opacity:.5; }

/* ---- 4. Headline + severity dot ---- */
#view-updates .nu-head{
  font-family:var(--pb-head); font-weight:700; font-size:17px; line-height:1.24;
  letter-spacing:-.015em; color:var(--pb-ink);
  display:flex; align-items:flex-start; gap:9px;
  overflow-wrap:anywhere; word-break:normal;
}
#view-updates .nu-head span.nu-htext{ flex:1; min-width:0; }
#view-updates .nu-htext strong{ font-weight:800; }
#view-updates .nu-htext em{ font-style:italic; }
#view-updates .nu-dot{
  width:13px; height:13px; border-radius:50%; display:inline-block;
  margin:2px 0 0; vertical-align:top; flex:none;
  background:var(--pb-butter); border:1.5px solid var(--pb-ink);
}
#view-updates .nu-dot.nu-urgent{ background:var(--pb-coral); }
#view-updates .nu-dot.nu-fyi{ background:var(--pb-sky); }

/* ---- 5. Meta line — severity/domain chips ---- */
#view-updates .nu-meta{
  font-family:var(--pb-num); font-weight:600; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--pb-dim);
  opacity:1; margin:9px 0 0 22px;
}

/* ---- 6. Explain — sky info card ---- */
#view-updates .nu-explain{
  font-family:var(--pb-body); font-size:13.5px; line-height:1.45;
  color:var(--pb-ink); margin:11px 0 0 22px; padding:10px 12px;
  background:var(--pb-sky); border:1.5px solid var(--pb-ink);
  border-radius:13px; box-shadow:var(--pb-shadow-sm);
}
#view-updates .nu-explain strong{ font-weight:800; }

/* ---- 7. Bullets — ink square bullet ---- */
#view-updates .nu-bullets{ margin:12px 0 0 22px; padding:0; list-style:none; }
#view-updates .nu-bullets li{
  position:relative; padding-left:17px; font-family:var(--pb-body);
  font-size:14px; line-height:1.42; margin:0 0 6px; color:var(--pb-ink);
  overflow-wrap:anywhere;
}
#view-updates .nu-bullets li:last-child{ margin-bottom:0; }
#view-updates .nu-bullets li:before{
  content:""; position:absolute; left:0; top:7px; width:7px; height:7px;
  border-radius:2px; background:var(--pb-ink); opacity:1;
}
#view-updates .nu-bullets li strong{ font-weight:800; }
#view-updates .nu-bullets li em{ font-style:italic; }
#view-updates .nu-bullets li code,
#view-updates .nu-detail code,
#view-updates .nu-explain code{
  font-family:var(--pb-num); font-size:.9em; background:rgba(25,22,33,.07);
  border:1px solid var(--pb-line); border-radius:6px; padding:.5px 5px;
}

/* ---- 8. Detail (expanded) — paper inner card ---- */
#view-updates .nu-detail{
  margin:12px 0 0 22px; font-family:var(--pb-body); font-size:13.5px;
  line-height:1.55; color:var(--pb-ink);
  background:var(--pb-paper); border:1.5px solid var(--pb-line);
  border-radius:13px; padding:12px 13px; white-space:normal; display:none;
}
#view-updates .nu-detail.nu-open{ display:block; }
#view-updates .nu-detail > div{ white-space:pre-wrap; overflow-wrap:anywhere; }
#view-updates .nu-detail strong{ font-weight:800; }
#view-updates .nu-detail em{ font-style:italic; }
#view-updates .nu-detail a{
  color:#245a86; font-weight:700; text-decoration:underline;
  text-underline-offset:2px; overflow-wrap:anywhere; word-break:break-word;
}

/* ---- 9. Reply — inline box + sent (mint = answered) ---- */
#view-updates .nu-reply-box{ margin:12px 0 0 22px; display:none; }
#view-updates .nu-reply-box.nu-open{ display:flex; flex-direction:column; gap:9px; }
#view-updates .nu-reply-input{
  font-family:var(--pb-body); font-size:14px; line-height:1.4; padding:11px 12px;
  border:1.5px solid var(--pb-ink); border-radius:13px; background:#fff;
  color:var(--pb-ink); resize:vertical; width:100%; box-sizing:border-box;
}
#view-updates .nu-reply-input:focus{ outline:none; box-shadow:var(--pb-shadow-sm); }
#view-updates .nu-reply-box .nu-btn{ align-self:flex-end; }
#view-updates .nu-reply-sent{
  margin:12px 0 0 22px; padding:11px 12px; font-family:var(--pb-body);
  font-size:14px; line-height:1.45; color:var(--pb-ink);
  background:var(--pb-mint); border:1.5px solid var(--pb-ink);
  border-radius:13px; box-shadow:var(--pb-shadow-sm);
}
#view-updates .nu-reply-label{
  font-family:var(--pb-num); font-size:10px; font-weight:700; color:var(--pb-ink);
  opacity:.7; text-transform:uppercase; letter-spacing:.11em; margin-bottom:4px;
}
#view-updates .nu-reply-text{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- 10. Actions row — pill buttons ---- */
#view-updates .nu-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:15px 0 0 22px;
}
#view-updates .nu-btn{
  font-family:var(--pb-num); font-size:12px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--pb-ink); background:#fff; color:var(--pb-ink);
  border-radius:999px; padding:8px 15px; line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#view-updates .nu-btn:hover{ box-shadow:var(--pb-shadow-sm); }
#view-updates .nu-btn:active{ transform:translate(2px,2px); box-shadow:none; }
#view-updates .nu-btn.nu-primary{ background:var(--pb-butter); color:var(--pb-ink); }
#view-updates .nu-btn[disabled]{
  opacity:.45; cursor:default; box-shadow:none; transform:none;
}
#view-updates .nu-chip{
  font-family:var(--pb-num); font-size:11px; font-weight:500; font-style:normal;
  color:var(--pb-dim); opacity:1; align-self:center;
  padding:5px 11px; border:1.5px dashed var(--pb-line); border-radius:999px;
}

/* ---- 11. Seen header ---- */
#view-updates .nu-seenhdr{
  font-family:var(--pb-num); font-size:11px; font-weight:700; color:var(--pb-dim);
  opacity:1; text-transform:uppercase; letter-spacing:.13em; margin:30px 2px 12px;
  display:flex; align-items:center; gap:10px;
}
#view-updates .nu-seenhdr::after{
  content:""; flex:1; height:1.5px; background:var(--pb-line);
}

/* ---- 12. Empty / loading / error states ---- */
#view-updates .nu-empty,
#view-updates .nu-err{
  text-align:center; margin:8px 0 0; padding:40px 22px;
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:22px;
  box-shadow:var(--pb-shadow);
}
#view-updates .nu-empty{
  font-family:var(--pb-head); font-weight:700; font-size:17px;
  letter-spacing:-.01em; color:var(--pb-ink);
}
#view-updates .nu-err{
  font-family:var(--pb-body); font-size:14px; font-weight:600;
  color:#8a2f2f; background:#fff2ef; border-color:var(--pb-coral);
  box-shadow:3px 3px 0 var(--pb-coral);
}

/* ---- 13. 375px safety — never overflow horizontally ---- */
#view-updates *{ min-width:0; }
@media (max-width:400px){
  #view-updates .topbar h1{ font-size:30px; }
  #view-updates .nu-wrap{ padding-left:11px; padding-right:11px; }
  #view-updates .nu-card{ padding:15px 14px 14px; }
}