/* ============================================================================
   White Sand OS — Shell: topbar, sidebar, login, command palette
   ========================================================================== */

/* ---- Topbar ----------------------------------------------------------- */
.topbar{display:flex;align-items:center;gap:var(--sp-4);height:var(--topbar-h);
  padding-inline:var(--sp-4);background:color-mix(in srgb,var(--surface-1) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:relative;z-index:40}
.topbar .menu-btn{display:none}
@media(max-width:920px){.topbar .menu-btn{display:grid}}
.topbar-search{flex:1;max-width:520px}
.topbar-spacer{flex:1}
.icon-btn{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-2);
  font-size:17px;transition:all var(--t-fast);position:relative}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn .ndot{position:absolute;top:7px;inset-inline-end:7px;width:7px;height:7px;border-radius:50%;background:var(--brand);border:2px solid var(--surface-1)}
/* live unread count on the bell (notifyCenter.js) — hidden attr = zero unread */
.icon-btn .nbadge{position:absolute;top:2px;inset-inline-end:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--danger);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;line-height:1;border:2px solid var(--surface-1);pointer-events:none}
/* #2259: was --text-3 (3.45:1 on --surface-3 — axe color-contrast serious
   violation, small 10px mono text). --text-2 clears WCAG 2.2 AA's 4.5:1. */
.kbd{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;background:var(--surface-3);border:1px solid var(--line-strong);color:var(--text-2)}

/* user menu trigger */
.user-trigger{display:flex;align-items:center;gap:var(--sp-2);padding:4px 6px 4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface-1);transition:all var(--t-fast)}
[dir="rtl"] .user-trigger{padding:4px 10px 4px 6px}
.user-trigger:hover{border-color:var(--line-strong);background:var(--surface-2)}
.user-meta{display:flex;flex-direction:column;line-height:1.25;text-align:start}
/* #2259: the role label was --text-3 (3.45:1 on the user-trigger button —
   axe color-contrast serious violation). --text-2 clears 4.5:1. */
.user-meta b{font-size:var(--fs-sm)} .user-meta span{font-size:var(--fs-xs);color:var(--text-2)}
@media(max-width:560px){.user-meta{display:none}}

/* popover */
.popover{position:absolute;inset-block-start:calc(var(--topbar-h) - 6px);inset-inline-end:var(--sp-4);
  width:240px;background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--sh-pop);z-index:80;padding:var(--sp-2);animation:pop var(--t-fast) var(--ease-out)}
.pop-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;width:100%;text-align:start;color:var(--text);transition:background var(--t-fast)}
.pop-item:hover{background:var(--surface-2)}
.pop-item.danger{color:var(--danger)}
.pop-sep{height:1px;background:var(--line);margin:var(--sp-1) 0}

/* notification center popover (notifyCenter.js) */
.ntc-pop{width:min(360px,calc(100vw - 2*var(--sp-4)));padding:0;overflow:hidden}
.ntc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-3) var(--sp-2);border-bottom:1px solid var(--line)}
.ntc-list{max-height:min(420px,60vh);overflow-y:auto;padding:var(--sp-1)}
.ntc-item{align-items:flex-start}
.ntc-item.unread{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.ntc-item.unread:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.ntc-ic{flex:none;font-size:16px;margin-top:1px}
.ntc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-weight:500}
.ntc-txt b{font-size:var(--fs-sm);font-weight:700}
.ntc-txt span{font-size:var(--fs-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntc-time{flex:none;font-size:var(--fs-xs);color:var(--text-3)}
.ntc-empty{padding:var(--sp-6);text-align:center;color:var(--text-3);font-size:var(--fs-sm)}
.ntc-foot{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line)}
.ntc-foot:empty{display:none}
.pop-head{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--text-2)}
.theme-swatch{width:22px;height:22px;border-radius:7px;border:1px solid var(--line-strong);flex-shrink:0}

/* topbar search keyboard hint */
.searchbox .kbd{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);pointer-events:none}
@media(max-width:560px){.searchbox .kbd{display:none}}

/* ---- Sidebar ---------------------------------------------------------- */
.sidebar{height:100vh;display:flex;flex-direction:column;background:var(--sidebar-bg);border-inline-end:1px solid var(--sidebar-line);color:var(--sidebar-text)}
.sidebar .sb-brand-txt b{color:var(--sidebar-text-strong)}
.sidebar .sb-brand .brand-mark{color:var(--sidebar-text-strong)}

/* sidebar nav filter */
.sb-navsearch{position:relative;display:flex;align-items:center;padding:var(--sp-3) var(--sp-3) 0;flex-shrink:0}
.sb-navsearch .ic{position:absolute;inset-inline-start:calc(var(--sp-3) + 10px);color:var(--text-3);pointer-events:none;display:flex}
.sb-navsearch input{width:100%;height:34px;padding-inline:34px var(--sp-3);background:color-mix(in srgb,var(--sidebar-text) 8%,transparent);
  border:1px solid var(--sidebar-line);border-radius:var(--r-sm);color:var(--sidebar-text-strong);font-size:var(--fs-sm)}
.sb-navsearch input:focus{border-color:var(--color-focus-ring)}
.app-frame.collapsed .sb-navsearch{display:none}
.sb-noresults{padding:var(--sp-6) var(--sp-3);text-align:center;color:var(--text-3);font-size:var(--fs-sm)}

/* favorites / recents quick-access */
.sb-quick{margin-bottom:var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line-soft)}
.sb-sec-static{cursor:default}
.app-frame.collapsed .sb-quick{border-bottom:none}

/* favorite star inside a nav link (appears on hover / when active) */
.ni-fav{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--text-3);
  opacity:0;transition:opacity var(--t-fast),color var(--t-fast),background var(--t-fast);flex-shrink:0}
.ni:hover .ni-fav,.ni-fav.on{opacity:1}
.ni-fav:hover{background:var(--surface-3);color:var(--text)}
.ni-fav.on{color:var(--warn)}
.ni-fav.on .icn{fill:var(--warn)}
.app-frame.collapsed .ni-fav{display:none}
.sb-brand{display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding-inline:var(--sp-4);border-bottom:1px solid var(--sidebar-line);flex-shrink:0}
.sb-brand .brand-mark{width:32px;height:32px}
.sb-logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;font-weight:800;font-size:18px;box-shadow:0 4px 14px var(--brand-glow)}
.sb-brand-txt{display:flex;flex-direction:column;line-height:1.2;overflow:hidden}
.sb-brand-txt b{font-size:var(--fs-md);font-weight:800;white-space:nowrap}
/* #2259: was --text-3 (3.45:1 on the sidebar canvas — axe color-contrast
   serious violation, 10px mono text). --sidebar-text (= --text-2 on every
   registered theme) clears WCAG 2.2 AA's 4.5:1 and is the token this
   component already uses elsewhere (see --sidebar-text-strong above). */
.sb-brand-txt span{font-size:10px;color:var(--sidebar-text);font-family:var(--mono);letter-spacing:.12em;white-space:nowrap}
.app-frame.collapsed .sb-brand-txt,.app-frame.collapsed .sb-sec-label,.app-frame.collapsed .ni-label,.app-frame.collapsed .ni-badge{display:none}
.app-frame.collapsed .sb-brand{justify-content:center;padding-inline:0}
.app-frame.collapsed .ni{justify-content:center;padding-inline:0}

.sb-scroll{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-2)}
.sb-group{margin-bottom:var(--sp-1)}
.sb-sec{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--sp-3) var(--sp-3) var(--sp-1);cursor:pointer;text-align:start;color:var(--sidebar-text);opacity:.72;transition:opacity var(--t-fast)}
.sb-sec:hover{opacity:1;color:var(--sidebar-text-strong)}
.sb-sec-label{font-size:10px;font-weight:700;color:inherit;text-transform:uppercase;letter-spacing:.08em}
.sb-sec-caret{display:flex;line-height:1;transition:transform var(--t-fast);opacity:.7}
.sb-items{overflow:hidden;transition:max-height var(--t) var(--ease),opacity var(--t-fast);max-height:1400px;opacity:1}
.sb-group.collapsed .sb-items{max-height:0;opacity:0;pointer-events:none}
.sb-group.collapsed .sb-sec-caret{transform:rotate(-90deg)}
.app-frame.collapsed .sb-sec-caret{display:none}
.app-frame.collapsed .sb-sec{pointer-events:none;justify-content:center}
.app-frame.collapsed .sb-group.collapsed .sb-items{max-height:1400px;opacity:1;pointer-events:auto}
.ni{display:flex;align-items:center;gap:var(--sp-3);min-height:40px;padding-inline:var(--sp-3);border-radius:var(--r-sm);
  color:var(--sidebar-text);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background var(--t-fast),color var(--t-fast);position:relative;margin-bottom:1px}
.ni:hover{background:color-mix(in srgb,var(--sidebar-text) 9%,transparent);color:var(--sidebar-text-strong)}
.ni-ic{display:grid;place-items:center;width:22px;flex-shrink:0;color:var(--sidebar-text);opacity:.8}
.ni:hover .ni-ic,.ni.active .ni-ic{color:inherit;opacity:1}
.app-frame.collapsed .ni-ic{opacity:1}
.ni-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:99px;background:color-mix(in srgb,var(--sidebar-text) 14%,transparent);color:var(--sidebar-text-strong);font-family:var(--font-num)}
.ni.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text)}
.ni.active::before{content:"";position:absolute;inset-inline-start:0;inset-block:8px;width:3px;border-radius:99px;background:var(--sidebar-active-text)}
.ni.active .ni-badge{background:var(--sidebar-active-text);color:#fff}
.sb-foot{padding:var(--sp-3);border-top:1px solid var(--sidebar-line);flex-shrink:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.collapse-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;height:34px;border-radius:var(--r-sm);color:var(--text-3);font-size:var(--fs-xs);font-weight:600;transition:all var(--t-fast)}
.collapse-btn:hover{background:var(--surface-2);color:var(--text)}
/* Role-view switch (manager ⇄ rep) */
.sb-roleswitch{display:flex;gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--r-sm)}
.rs-btn{flex:1;height:28px;border-radius:calc(var(--r-sm) - 3px);font-size:var(--fs-xs);font-weight:600;color:var(--text-3);transition:all var(--t-fast)}
.rs-btn:hover{color:var(--text)}
.rs-btn.on{background:var(--surface-1);color:var(--text);box-shadow:var(--sh-sm)}
.app-frame.collapsed .sb-roleswitch{display:none}
/* Language toggle pill in the topbar */
.lang-btn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.02em}

/* ---- Command palette -------------------------------------------------- */
.cmdk-overlay{position:fixed;inset:0;background:rgba(6,8,14,.6);backdrop-filter:blur(6px);z-index:180;
  display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;animation:fade-in var(--t-fast)}
.cmdk{width:min(620px,94vw);background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;animation:pop var(--t) var(--ease-out)}
.cmdk-input{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.cmdk-input .ic{font-size:19px;color:var(--text-3)}
.cmdk-input input{flex:1;background:none;border:none;font-size:var(--fs-lg);color:var(--text)}
.cmdk-list{max-height:54vh;overflow:auto;padding:var(--sp-2)}
.cmdk-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-sm);font-weight:600}
.cmdk-item .ic{font-size:17px;width:24px;text-align:center;color:var(--text-2)}
.cmdk-item .sec{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--text-3)}
.cmdk-item.sel,.cmdk-item:hover{background:var(--brand-tint);color:var(--brand)}
.cmdk-item.sel .ic{color:var(--brand)}
.cmdk-item .cmdk-fav{color:var(--warn);display:flex}
.cmdk-item .cmdk-fav .icn{fill:var(--warn)}
.cmdk-empty{padding:var(--sp-8);text-align:center;color:var(--text-3);font-size:var(--fs-sm)}
/* omni-bar (Phase 2): group headers, help rows, normalized-match highlight */
.cmdk-group-h{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:var(--fs-xs);font-weight:700;color:var(--text-3)}
.cmdk-help{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);color:var(--text-2);font-size:var(--fs-sm)}
.cmdk-item mark,#os-res mark{background:var(--brand-tint);color:var(--brand);border-radius:3px;padding:0 1px}
.cmdk-foot{display:flex;align-items:center;gap:6px;padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--line);
  color:var(--text-3);font-size:var(--fs-xs);flex-wrap:wrap}
.cmdk-foot .kbd{margin-inline-start:4px}

/* ---- Login ------------------------------------------------------------ */
.login-screen{height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:880px){.login-screen{grid-template-columns:1fr}.login-aside{display:none}}
.login-aside{position:relative;overflow:hidden;background:linear-gradient(150deg,#0b0e16,#13101a 55%,#1a0f12);display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-12)}
.login-aside::before{content:"";position:absolute;inset:0;background:
  radial-gradient(680px 380px at 78% 12%,var(--brand-glow),transparent 60%),
  radial-gradient(520px 360px at 10% 90%,color-mix(in srgb,var(--info) 30%,transparent),transparent 60%)}
.login-aside .grid-bg{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 60% 40%,#000,transparent 75%)}
.login-aside>*{position:relative;z-index:1}
/* Brand stage: the full White Sand wordmark, centered. The wordmark inherits
   this light color (currentColor) so it reads white on the dark aside; the mark,
   the "D" swoosh and the separator line stay White Sand red. */
.brand-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--sp-4);color:#fff}
.brand-full{width:min(460px,74%)}
.brand-full svg{width:100%;height:auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.35))}
.brand-tag{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;font-style:italic;letter-spacing:.02em;color:color-mix(in srgb,#fff 82%,transparent)}
.brand-tag b{color:var(--brand-soft);font-style:italic}
.brand-sub{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.42em;color:color-mix(in srgb,#fff 55%,transparent);padding-inline-start:.42em}
/* Four-square mark used in the login card + sidebar (recolors per theme). */
.brand-mark{display:inline-grid;place-items:center;flex-shrink:0;color:var(--text)}
.brand-mark svg{width:100%;height:100%;display:block}
.login-main{display:grid;place-items:center;padding:var(--sp-6);background:var(--surface-0)}
.login-card{width:min(400px,94vw)}
.login-card .brand-mark{width:46px;height:46px;margin-bottom:var(--sp-5)}
.login-card h2{font-size:var(--fs-2xl);font-weight:800;margin-bottom:4px}
.login-card .sub{color:var(--text-2);font-size:var(--fs-sm);margin-bottom:var(--sp-6)}
.login-err{display:none;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-sm);background:var(--danger-tint);color:var(--danger);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--sp-4)}
.login-err.show{display:flex;animation:pop var(--t-fast)}
.conn-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.conn-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.conn-pill.ok .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.conn-pill.bad .dot{background:var(--danger)}

/* ---- Unified Employee Shell (EOX-09) ---------------------------------- */
/* Global entries + persona / context chips at the top of the sidebar scroll
   (js/shell/shellView.js). Additive, logical properties only, tokens only. */
.gsh-host{margin-block:var(--ds-space-1) var(--ds-space-3);margin-inline:var(--ds-space-2);padding-block-end:var(--ds-space-2);border-block-end:1px solid var(--sidebar-line)}
.gsh{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.gsh-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1)}
.gsh-status .badge{height:auto;min-height:22px;padding-block:2px;white-space:normal;line-height:var(--ds-leading-snug);text-align:start}
.gsh-k{font-weight:var(--ds-weight-bold)}
.gsh-refresh{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--ds-radius-sm);color:var(--sidebar-text);background:transparent;border:0;cursor:pointer}
.gsh-refresh:hover{background:color-mix(in srgb,var(--sidebar-text) 9%,transparent);color:var(--sidebar-text-strong)}
.gsh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.gsh-li{margin:0}
.gsh-item{display:flex;align-items:center;gap:var(--ds-space-3);width:100%;min-height:40px;padding-inline:var(--ds-space-3);border-radius:var(--ds-radius-sm);
  color:var(--sidebar-text);font:inherit;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-semibold);background:transparent;border:0;text-align:start;text-decoration:none;cursor:pointer;position:relative}
.gsh-item:hover{background:color-mix(in srgb,var(--sidebar-text) 9%,transparent);color:var(--sidebar-text-strong)}
.gsh-item:focus-visible{outline:none;box-shadow:var(--ds-focus-ring);border-radius:var(--ds-radius-sm)}
.gsh-item[aria-current="page"]{background:var(--sidebar-active-bg);color:var(--sidebar-active-text)}
.gsh-item[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:0;inset-block:8px;width:3px;border-radius:var(--ds-radius-pill);background:var(--sidebar-active-text)}
.gsh-item[aria-expanded="true"]{background:color-mix(in srgb,var(--sidebar-text) 9%,transparent);color:var(--sidebar-text-strong)}
.gsh-ic{display:grid;place-items:center;width:22px;flex-shrink:0;opacity:.85}
.gsh-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsh-mode{font-size:var(--ds-text-xs);font-weight:var(--ds-weight-medium);color:var(--ds-color-text-muted)}
.gsh-mode[data-mode="OBSERVE"]{border:1px solid var(--ds-color-status-info-border);border-radius:var(--ds-radius-pill);padding-inline:6px}
.gsh-badge{min-width:18px;padding-inline:6px;border-radius:var(--ds-radius-pill);background:var(--ds-color-accent-strong);color:var(--ds-color-text-on-accent);font-size:var(--ds-text-xs);font-weight:var(--ds-weight-bold);font-family:var(--ds-font-numeric);text-align:center;line-height:18px}
.gsh-badge:not([data-unread]){background:color-mix(in srgb,var(--sidebar-text) 14%,transparent);color:var(--sidebar-text-strong)}
.gsh-fallback .gsh-label::after{content:" ↗";opacity:.6}
.gsh-spaces{margin-block-start:var(--ds-space-1);margin-inline-start:var(--ds-space-2)}
.gsh-spaces[hidden]{display:none}
.gsh-banner,.gsh-reason{margin:0;padding:var(--ds-space-2) var(--ds-space-3);border-radius:var(--ds-radius-sm);font-size:var(--ds-text-xs);line-height:var(--ds-leading-snug);color:var(--ds-color-text-primary);background:var(--ds-color-status-warning-surface);border:1px solid var(--ds-color-status-warning-border)}
.gsh-banner[data-gsh-banner="UNAVAILABLE"],.gsh-banner[data-gsh-banner="UNAUTHORIZED"]{background:var(--ds-color-status-danger-surface);border-color:var(--ds-color-status-danger-border)}
.app-frame.collapsed .gsh-status,.app-frame.collapsed .gsh-label,.app-frame.collapsed .gsh-mode,.app-frame.collapsed .gsh-banner,.app-frame.collapsed .gsh-reason,.app-frame.collapsed .gsh-spaces{display:none}
.app-frame.collapsed .gsh-item{justify-content:center;padding-inline:0}
@media (max-width:900px){.gsh-item{min-height:var(--ds-tap-target-min)}}
@media (prefers-reduced-motion:reduce){.gsh-item,.gsh-refresh{transition:none}}

/* ---- Notifications inbox screen (EOX-09, js/shell/notificationsInboxView.js) */
.nin{display:flex;flex-direction:column;gap:var(--ds-space-4)}
.nin-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-3)}
.nin-title-h{font-size:var(--ds-text-2xl);font-weight:var(--ds-weight-black);margin:0}
.nin-sub{margin:0}
.nin-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2)}
.nin-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-space-2)}
.nin-li{display:flex;align-items:flex-start;gap:var(--ds-space-2);padding:var(--ds-space-3);border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);background:var(--ds-color-surface-raised)}
.nin-li[data-unread="1"]{border-inline-start:3px solid var(--ds-color-accent);background:var(--ds-color-accent-surface)}
.nin-item{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:var(--ds-color-text-primary);text-decoration:none;border-radius:var(--ds-radius-sm)}
.nin-item:focus-visible{outline:none;box-shadow:var(--ds-focus-ring)}
.nin-title{font-weight:var(--ds-weight-bold);font-size:var(--ds-text-md)}
.nin-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2)}
.nin-state{flex-shrink:0}
.nin-body{font-size:var(--ds-text-sm);color:var(--ds-color-text-secondary)}
.nin-meta{font-size:var(--ds-text-xs);color:var(--ds-color-text-muted)}
.nin-mark{flex-shrink:0}
.nin-more{justify-content:center}
.nin-hint{margin:0}
@media (max-width:640px){.nin-li{flex-direction:column}.nin-mark{align-self:flex-end}}