/* css/24-inbox.css — Project Officer INBOX sheet.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- INBOX (header pill · Project Officer messages) ----------------
   A FULL-SCREEN notification centre, not a side panel: it fills everything
   under the 52 px brand rail (content + dock) so a whole shift of compliance
   traffic can be read and acknowledged in one pass. z-index sits above the
   dock (26) and the toast dock (46) but BELOW the rail (52), so the rail —
   clock, GPS, NET, the inbox pill itself — never disappears while reading. */
#inboxSheet{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:48;
  display:block;padding:0;background:rgba(7,10,11,.94);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);backdrop-filter:blur(18px) saturate(1.05);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s}
#inboxSheet.on{opacity:1;visibility:visible}
#inboxSheet .box{position:absolute;inset:0;width:auto;max-width:none;height:auto;margin:0;
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  display:flex;flex-direction:column;min-height:0;
  transform:translateY(26px);transition:transform .32s var(--ease)}
#inboxSheet.on .box{transform:none}
/* --- top bar (64px) --- */
#inboxSheet .ihead{flex:0 0 auto;height:64px;display:flex;align-items:center;gap:10px;
  padding:0 20px;border-bottom:1px solid var(--hair)}
#inboxSheet .ihead .hin{width:100%;max-width:960px;margin:0 auto;display:flex;align-items:center;gap:10px}
#inboxSheet .ihead h3{margin:0;font-size:var(--fz-ttl-lg);font-weight:700;letter-spacing:-.02em;flex:0 0 auto}
#inboxSheet .ihead .badge{min-width:24px;height:24px;padding:0 8px;border-radius:12px;
  background:var(--info);color:#04150D;font-size:var(--fz-meta);font-weight:800;
  display:grid;place-items:center;flex:0 0 auto}
#inboxSheet .ihead .sp{flex:1;min-width:8px}
#inboxSheet .ihead .allbtn{flex:0 0 auto;height:44px;padding:0 14px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--hair2);color:var(--acc);
  font-size:var(--fz-body);font-weight:700;display:flex;align-items:center;gap:7px;white-space:nowrap}
#inboxSheet .ihead .allbtn svg{width:16px;height:16px}
#inboxSheet .ihead .sclose{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair);color:var(--tx2);
  display:grid;place-items:center}
/* --- filter chips (48px), same chip family as the Drive filter .tab --- */
#inboxSheet .ifilt{flex:0 0 auto;height:48px;display:flex;align-items:center;padding:0 20px;margin-top:10px}
#inboxSheet .ifilt .fin{width:100%;max-width:960px;margin:0 auto;display:flex;gap:8px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#inboxSheet .ifilt .fin::-webkit-scrollbar{display:none}
#inboxSheet .ifilt .tab{flex:1 1 0;min-width:120px}
/* --- scroller + 960 column --- */
#inboxSheet .ilist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 20px 24px}
#inboxSheet .icol{width:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column}
#inboxSheet .igrp{position:sticky;top:0;z-index:2;padding:10px 0 8px;
  font-size:var(--fz-cap);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);
  background:linear-gradient(180deg,rgba(7,10,11,.97) 0,rgba(7,10,11,.97) 72%,rgba(7,10,11,0) 100%)}
/* --- message card (radius 16 · 1px hairline · 14px padding) --- */
#inboxSheet .irow{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid var(--hair);margin-bottom:8px}
#inboxSheet .irow.read{opacity:.7}
#inboxSheet .irow .meta{display:flex;align-items:center;gap:9px;min-width:0}
#inboxSheet .irow .av{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:rgba(93,168,255,.18);border:1px solid rgba(93,168,255,.42);color:#9CC8FF;
  display:grid;place-items:center;font-size:var(--fz-meta);font-weight:800;letter-spacing:.02em}
#inboxSheet .irow .who{font-size:var(--fz-md);font-weight:600;color:var(--tx);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#inboxSheet .irow .at{font-size:var(--fz-md);font-weight:500;color:var(--tx3);flex:0 0 auto}
#inboxSheet .irow .udot{width:8px;height:8px;border-radius:50%;background:var(--info);flex:0 0 auto}
#inboxSheet .irow .txt{font-size:var(--fz-md-lg);font-weight:500;color:var(--tx);line-height:1.4}
#inboxSheet .irow.read .txt{color:var(--tx2)}
#inboxSheet .irow .ackrow{display:flex;justify-content:flex-end}
#inboxSheet .irow .ackbtn{height:44px;padding:0 16px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--hair2);color:var(--acc);
  font-size:var(--fz-body);font-weight:700;display:flex;align-items:center;gap:7px}
#inboxSheet .irow .ackbtn svg{width:16px;height:16px}
#inboxSheet .irow .ackline{display:flex;align-items:center;gap:7px;font-size:var(--fz-body);font-weight:600;color:var(--tx3)}
#inboxSheet .irow .ackline svg{width:15px;height:15px;color:var(--acc)}
/* --- per-filter empty state --- */
#inboxSheet .iempty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--tx3);text-align:center;padding:64px 24px}
#inboxSheet .iempty svg{width:30px;height:30px}
#inboxSheet .iempty span{font-size:var(--fz-md);color:var(--tx2)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;
    /* the staged detection beat (wave14 §3) collapses to instant, delay included */
    animation-delay:0s!important;transition-delay:0s!important}
}

/* wave12: the guidance banner is a SINGLE row again (arrow · street · speed
   chip) and the state chips moved to .gstat below it, so the two-row column
   layout and its .grow / .grow2 wrappers are gone. */