/* Application styles. The look comes from v4.css (GENERATED from the approved Design v4 prototype by scripts/build-v4css.mjs): shell, side rail, header, plates, buttons,
   pills, cards, tables, tabs, forms, Launcher. This file holds only what the app needs on top of it: reset glue, the app's own menus, dialog, toast and drawer
   behaviour, and aliases that give the app's older class names (btn pri, pill ok, .fld ...) the v4 look. Colour and type come from packages/ui/tokens.css. */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul.rows,dl,dd,figure,fieldset{margin:0}
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.2;letter-spacing:-.025em}
h1{font-size:clamp(28px,3.4vw,40px);line-height:1.05;letter-spacing:-.035em;font-weight:700}h2{font-size:22px;font-weight:700}h3{font-size:17px;font-weight:700;letter-spacing:-.015em}
h4{font:600 12px var(--font);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
button,select,input,textarea{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer}a{color:inherit}
[dir=rtl],[lang=ur]{font-family:var(--urdu),var(--font)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted)}.fine{font-size:13px;color:var(--muted)}
[data-page-title]:focus{outline:none}
.skip{position:absolute;left:12px;top:-100px;background:var(--surface);padding:12px;z-index:300;border-radius:12px}.skip:focus{top:12px}
.devbadge{position:fixed;right:8px;bottom:8px;z-index:250;background:var(--text);color:var(--bg);font:600 12px var(--font);padding:4px 10px;border-radius:999px;display:flex;gap:6px;align-items:center;pointer-events:none}

/* ---- shell glue: the side rail, header and content come from v4.css; these are the app's additions */
.app{min-height:100vh;display:block;background:var(--bg)}
.app.in-launcher{background:var(--stage)}
.shell>.main{min-width:0;display:flex;flex-direction:column}
.shell .content{width:100%;flex:1;min-width:0}
.side .nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--text2);font-weight:550;font-size:14.5px;position:relative;text-decoration:none;transition:background 200ms,color 200ms}
.side-top .launch-btn{flex:none}
.side-top .appsw{position:relative}
.hdr .orgwrap,.hdr .swwrap{position:relative}
.hdr .search{margin-left:auto;display:flex;align-items:center;gap:10px;min-height:44px;width:min(360px,34vw);padding:0 10px 0 14px;border-radius:12px;background:var(--sunk);color:var(--muted);font-size:14px}
.hdr .search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:14px}
.hdr .search:focus-within{outline:3px solid var(--action);outline-offset:2px}
.hdr .search input:disabled{cursor:not-allowed}
.hdr .crumb a{color:inherit;text-decoration:none}
button.who{width:44px;height:44px;border-radius:50%;font:700 13px/1 var(--font);display:grid;place-items:center;cursor:pointer}
.iconbtn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.hdr>.hide-s{display:inline-grid}

@media (max-width:760px){.hdr .hide-s{display:none!important}.hdr .search{margin-left:auto}.hdr .appsw{display:block}}
.hdr .only-m{display:none}
.hdr .crumb{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.hdr .search{flex:1 1 120px;width:auto;max-width:360px;min-width:0}
.hdr{flex-wrap:nowrap}
@media (max-width:760px){.hdr .only-m{display:inline-block}.hdr{-webkit-backdrop-filter:none;backdrop-filter:none}}
.menu{opacity:0;transform:translateY(-4px);pointer-events:none;visibility:hidden;transition:opacity .14s ease-out,transform .14s ease-out,visibility 0s linear .14s;animation:none}
.menu[data-open=true]{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.menu.apps,.menu.appmenu{width:min(360px,calc(100vw - 24px));left:0;right:auto}
.menu .mh{padding:8px 10px 6px;font:600 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.menu .opt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px;border-radius:12px;text-align:left;border:0;background:transparent}
.menu .opt:hover,.menu .opt:focus-visible{background:var(--sunk)}
.menu .opt .tx{display:grid;flex:1;min-width:0;line-height:1.25}.menu .opt .tx small{color:var(--muted);font-size:12.5px;font-weight:400}
.menu .opt .st{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:600;color:var(--ok)}
.menu .opt-plain{min-height:44px}
.menu .mfoot{padding:8px 10px 4px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:8px}
.menu hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.menu .back,.appmenu .home{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px;border-radius:12px;font-weight:600;text-decoration:none}
.appmenu .grid a{display:grid;justify-items:center;gap:6px;padding:10px 2px;border-radius:14px;font-size:12.5px;font-weight:600;color:var(--text2);text-decoration:none;text-align:center;min-height:44px}
.appmenu .grid a:hover{background:var(--surface2);color:var(--text)}
.appmenu .grid a[aria-current=page]{background:var(--brand-soft);color:var(--text)}
.profile-menu{width:260px;left:auto;right:0}
.seg-theme{display:flex;gap:4px;padding:8px 10px}.seg-theme button{flex:1;min-height:44px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);font-weight:600}
.seg-theme button[aria-checked=true]{background:var(--action);color:var(--action-ink);border-color:var(--action)}
.orgsw[data-pending=true] .chev{display:none}.orgsw .spin{display:none}.orgsw[data-pending=true] .spin{display:block}
.orgsw .chev{width:16px;height:16px}
@media (max-width:760px){.menu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;transform:translateY(12px)}.profile-menu{width:auto}}
/* bottom bar (phones): our items are links */
.bbar .pillic svg{width:22px;height:22px}
.bbar .bsheet a.btn{width:100%;justify-content:flex-start;margin-bottom:8px}

/* ---- aliases: the app's older class names get the v4 look */
.btn{min-width:44px}
.btn:not(.primary):not(.ink):not(.action):not(.dng):not(.quiet):not(.link):not(.ghost){border:var(--bw) solid var(--line2);background:var(--surface);box-shadow:0 2px 0 var(--line)}
.btn:not(.primary):not(.ink):not(.action):not(.dng):not(.quiet):not(.link):not(.ghost):hover{background:var(--surface2)}
.btn.dng{background:var(--danger);color:var(--surface);box-shadow:0 3px 0 color-mix(in srgb,var(--danger) 55%,var(--text))}
.btn.dng:active{box-shadow:0 1px 0 color-mix(in srgb,var(--danger) 55%,var(--text))}
.btn.link{border:0;background:none;box-shadow:none;color:var(--action);text-decoration:underline;padding:0 8px;min-height:44px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn svg.i{width:18px;height:18px}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--action);font-weight:600;text-decoration:underline;background:none;border:0;padding:0;text-align:left}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.pill.ok{background:var(--ok-tint);color:var(--ok)}.pill.bad{background:var(--danger-tint);color:var(--danger)}.pill.pri{background:var(--action-tint);color:var(--action)}
.pill.dark{background:var(--text);color:var(--bg)}.pill svg.i{width:14px;height:14px}
.chip svg.i{width:14px;height:14px}.chip.ok{background:var(--ok-tint);color:var(--ok)}.chip.warn{background:var(--warn-tint);color:var(--warn)}.chip.bad{background:var(--danger-tint);color:var(--danger)}.chip.act{background:var(--action-tint);color:var(--action)}
.notice.info{background:var(--action-tint);color:var(--text)}.notice.err{background:var(--danger-tint);color:var(--danger)}.notice p{flex:1}.notice .acts,.notice .act{margin-left:auto}
.notice{margin-bottom:16px}
.banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:14px;background:var(--action-tint);margin-bottom:16px;font-size:14px}.banner.ro{background:var(--sunk)}
.field-ro{background:var(--sunk)!important;color:var(--text)}

.plate svg{width:calc(var(--s)*.47);height:calc(var(--s)*.47);stroke-width:2}
.plate.dim{filter:saturate(.25) brightness(1.05);opacity:.75}
.card{display:block;gap:0;padding:0;box-shadow:var(--sh1);transform:none}.card:hover{transform:none;box-shadow:var(--sh1)}
a.card:hover,button.card:hover{transform:translateY(-2px);box-shadow:var(--sh2)}.card.pad,.pad{padding:20px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
ul.rows{list-style:none;margin:0;padding:0}ul.rows li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:var(--bw) solid var(--line);min-height:56px}ul.rows li:last-child{border-bottom:0}
.rows a,.rows button.lnk{color:var(--action);font-weight:600;text-decoration:underline;background:none;border:0;padding:0;min-height:44px;text-align:left}
.content .crumb,.content .crumbs{display:none}   /* the breadcrumb lives in the header (Design v4 section 5) */
.sub{color:var(--text2);margin:6px 0 24px;max-width:68ch;font-size:15.5px}
.pj-head,.page-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pj-head h1{margin:0}.pj-head .sub,.page-actions .sub{margin-bottom:0}
.empty{max-width:520px;margin:24px auto}.empty p{color:var(--muted)}
.big{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 0 16px;background:var(--action-tint);color:var(--action)}.big svg{width:28px;height:28px}.big.w{background:var(--warn-tint);color:var(--warn)}
.empty .big,.center .big{margin-inline:auto}.center{text-align:center}.full{width:100%}
/* forms: .fld is the app's name for the prototype's .field */
.fld{display:grid;gap:7px;margin-bottom:16px}.fld label,.fld .lb{font-weight:600;font-size:13.5px}.fld .hint{font-size:13px;color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;padding:0 14px;border-radius:12px;border:var(--bw) solid var(--control);background:var(--surface);font-size:15px;transition:border-color 160ms,box-shadow 160ms}
.fld textarea{padding:12px 14px;min-height:110px;resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--action);box-shadow:0 0 0 4px var(--action-tint)}
.fld input[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-tint)}
.fld input[readonly],.fld textarea[readonly],.fld select:disabled{background:var(--sunk);color:var(--text2)}
.fld .err{color:var(--danger);font-size:13px;display:flex;gap:6px;align-items:center}.fld .err[hidden]{display:none}
.chk{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0}.chk input{width:22px;height:22px;margin-top:2px;accent-color:var(--action)}
.pw{position:relative}.pw input{padding-right:52px}.pw button{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:none;color:var(--muted);border-radius:10px}
.tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}.tools .search{flex:1;min-width:200px}
.tools select,.tbl select{min-height:44px;padding:0 10px;border:var(--bw) solid var(--line2);border-radius:12px;background:var(--surface)}
.tools .search{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:var(--bw) solid var(--line2);border-radius:12px;background:var(--surface);color:var(--muted);width:auto;margin:0}
.tools .search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text)}
/* tables: the app's .tbl-wrap / .stack */
.tbl-wrap,.table-wrap{overflow-x:auto;position:relative}
.tbl.stk td[data-l]::before{content:attr(data-l);display:none}
@media (max-width:720px){.tbl.stk thead{display:none}.tbl.stk,.tbl.stk tbody,.tbl.stk tr,.tbl.stk td{display:block}.tbl.stk tr{padding:12px 16px;border-bottom:var(--bw) solid var(--line)}.tbl.stk td{border:0;padding:2px 0}.tbl.stk td[data-l]::before{display:block;font:600 11.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}}
/* segmented control (ui.js seg() emits the v4 .vsw) and tabs */
.vsw button{min-height:44px;min-width:44px}
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.subnav button{min-height:44px;padding:0 16px;border:var(--bw) solid var(--line2);border-radius:999px;background:var(--surface);font-weight:600;font-size:14px}
.subnav button[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.tabs button{min-height:46px}
/* dialog, toast, drawer: the app's own behaviour (focus trap, announcements) in the v4 look */
.ovl{position:fixed;inset:0;z-index:calc(var(--z-dialog) + 10);background:rgba(10,11,14,.5);display:grid;place-items:center;padding:16px;overflow:auto;animation:fade 200ms}
.dlg{color:var(--text)}.dlg.wide{max-width:620px;width:100%}
.dlg .bd{color:var(--text2);margin:0}.dlg .bd .fld{color:var(--text)}
.dlg .acts{margin-top:22px;justify-content:flex-end}
.dlg p+p{margin-top:8px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);z-index:calc(var(--z-dialog) + 20);display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--text);color:var(--bg);box-shadow:var(--sh3);font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out;max-width:calc(100% - 32px)}
.toast svg{color:color-mix(in srgb,var(--action) 70%,var(--bg))}
.toast[data-show=true]{opacity:1;transform:translate(-50%,0)}.toast[data-show=false]{visibility:hidden}
@media (max-width:760px){.toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.drawer-back{position:fixed;inset:0;z-index:var(--z-dialog);background:rgba(10,10,14,.45)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-dialog) + 1);width:min(520px,100vw);display:flex;flex-direction:column;background:var(--surface);border-left:var(--bw) solid var(--line);box-shadow:var(--sh3);animation:drawer-in var(--motion-base) var(--e-out)}
.drawer header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:var(--bw) solid var(--line)}
.drawer-bd{flex:1;overflow:auto;padding:20px 22px}.drawer footer{display:flex;gap:8px;justify-content:flex-end;padding:16px 22px;border-top:var(--bw) solid var(--line);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
@keyframes drawer-in{from{transform:translateX(24px);opacity:0}}
@media (max-width:600px){.drawer{width:100vw;border-left:0}}
.ribbon{display:flex;gap:8px;align-items:center;padding:8px 16px;background:var(--warn-tint);color:var(--warn);font-weight:600;font-size:13px;border-bottom:var(--bw) solid var(--line2)}.ribbon svg.i{width:16px;height:16px}
.skel .bar{height:14px;border-radius:7px;background:var(--sunk);margin-bottom:12px;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.5}}
.skel-wrap{padding:8px 0}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
/* auth screens: the frame, stage and card come from v4.css */
.auth-card .sub{color:var(--text2);margin:0 0 22px}.auth-card .fine{color:var(--muted)}
.auth-card .btn.full{width:100%}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:16px 0}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line2)}
.rule{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}.rule.ok{color:var(--ok)}
.mark{flex:none}
/* misc app glue */
.hero{display:flex;gap:24px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.gh{display:flex;gap:8px;align-items:center;margin:16px 0 8px}.gh h3{font-size:15px}
.editbar,.stickybar{position:sticky;bottom:0;background:var(--surface);border-top:var(--bw) solid var(--line2);padding:12px 20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;z-index:20}
.editbar{margin-top:16px}
@media (max-width:760px){.editbar{bottom:calc(60px + env(safe-area-inset-bottom,0px))}}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 20px;border-bottom:var(--bw) solid var(--line);align-items:center;min-height:64px}.item:last-child{border-bottom:0}.item b{display:block}.item .m{font-size:13px;color:var(--muted)}
.dl{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:var(--bw) solid var(--line)}.dl:last-child{border-bottom:0}
.sec{padding:16px 20px;border-bottom:var(--bw) solid var(--line)}.sec:last-child{border-bottom:0}.sec h4{margin-bottom:4px}.sec p{white-space:pre-wrap}
.card>.sec:first-child{padding-top:20px}
.int{background:var(--warn-tint);border-radius:14px;padding:12px 16px;margin:16px 20px}.int h4{color:var(--warn)}
.eb{padding:20px;color:var(--muted);font-size:14px;display:flex;gap:12px;align-items:center}
.short{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 20px 20px}
.tile2{display:grid;gap:8px;padding:16px;text-align:left;width:100%;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh1);transition:transform .16s ease-out,box-shadow .16s ease-out;min-height:112px;text-decoration:none}
.tile2:hover{transform:translateY(-2px);box-shadow:var(--sh2)}.tile2 .num{font:700 30px var(--font-d)}
.unavail{max-width:560px;margin:48px auto;text-align:center}.unavail .ic{width:56px;height:56px;border-radius:50%;background:var(--warn-tint);color:var(--warn);display:grid;place-items:center;margin:0 auto 16px}.unavail .ic svg{width:28px;height:28px}
.unavail p{color:var(--muted);margin:12px 0 20px}.unavail .acts{justify-content:center}
.who2{display:flex;gap:12px;align-items:center}.av{width:36px;height:36px;border-radius:50%;background:var(--action-tint);color:var(--action);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.yes{color:var(--ok);font-weight:600;display:inline-flex;gap:4px;align-items:center}.no{color:var(--muted)}.why{display:flex;gap:6px;flex-wrap:wrap}
.lbl-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.page-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}.legend span{display:flex;gap:6px;align-items:center}
details.support{margin-top:12px;font-size:13px;color:var(--muted)}
.mnote{margin:8px 12px;padding:12px;border-radius:14px;background:var(--warn-tint);color:var(--warn);font-size:13px;display:flex;gap:8px}
.real{animation:fadein .18s ease-out}@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* input borders keep the stronger --control colour (WCAG 1.4.11): the one deliberate departure from the prototype's softer line colour */
.inp,.sel,.tools select,.tbl select,.pj-add input,.cmdk-in{border-color:var(--control)}
.inp input,.inp{min-height:44px}.office-docs .findwrap input,.office-team .findwrap input{min-height:44px}
.toolbar>input[type=search],.toolbar>input[type=text]{flex:1 1 220px;min-width:0;min-height:44px;padding:0 14px;border-radius:12px;border:var(--bw) solid var(--control);background:var(--surface)}
.toolbar>select,.toolbar select{min-height:44px;padding:0 12px;border-radius:12px;border:var(--bw) solid var(--control);background:var(--surface)}
.toolbar>input:focus,.toolbar>select:focus{border-color:var(--action);box-shadow:0 0 0 4px var(--action-tint)}
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}.authnarrow{width:100%;max-width:440px}
/* Phone header (Design v4): the search is an icon, so the page name keeps its room */
@media (max-width:620px){.hdr .search{flex:0 0 44px;width:44px;max-width:44px;padding:0;justify-content:center;background:none}.hdr .search input{display:none}}
/* header bell (notifications, migration 0034) */
.bell-menu{left:auto;right:0;width:380px;max-height:min(70vh,560px);overflow:auto}
.bell-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.bell-item{display:flex;gap:var(--space-2);align-items:flex-start;min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--text);text-decoration:none}
.bell-item:hover,.bell-item:focus-visible{background:var(--tint)}
.bell-item .tx{display:grid;gap:2px;min-width:0}.bell-item strong{font-weight:500;overflow-wrap:anywhere}.bell-item small{color:var(--muted)}
.bell-item.unread strong{font-weight:700}.bell-item.unread::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--action)}
@media (max-width:600px){.bell-menu{width:auto}}
.badge[hidden]{display:none}
/* the bell's unread count sits on the bell (V4 header) */
.bell-wrap{position:relative}.bell-wrap #bell{position:relative}.bell-wrap .badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:var(--surface);font:700 11px/18px var(--font-b);text-align:center;pointer-events:none}