/* The admin layer over kit.css (ADR 0003 6.6, 6.8).
   kit.css is copied in at build and never edited. It is a phone kit: it pins <html> and <body> to a
   402x874 frame and has no shell, table or pager. This file (1) takes the phone frame off, (2) adds the
   fonts, (3) adds the few admin-only pieces the approved admin screens draw with page CSS (shell, table,
   pager, filters), using the kit's tokens and logical properties only. Promote (3) into the kit when DS owns it. */

/* ---------- fonts (SIL OFL, web/fonts/OFL.txt) ----------
   IBM Plex Sans Arabic carries Arabic only here (unicode-range), so Latin text uses IBM Plex Sans. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-Bold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;src:url(/fonts/IBMPlexSansArabic-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;src:url(/fonts/IBMPlexSansArabic-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;src:url(/fonts/IBMPlexSansArabic-SemiBold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;src:url(/fonts/IBMPlexSansArabic-Bold.woff2) format("woff2")}

/* ---------- take the phone frame off ---------- */
:root{--on-accent:#2A2E31;--drawer-w:304px;--hdr-h:64px;--font:"IBM Plex Sans Arabic","IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;--side:#075E54;--sideink:#F9E2C6;--sidelab:#EFD9BC;--sideline:rgba(249,226,198,.2);--pat:#075E54;--pat-top:.05;--pat-bot:.015}
html{position:static;inline-size:auto;block-size:auto;overflow:visible;overflow-x:clip;direction:ltr}
body{position:static;inline-size:auto;block-size:auto;min-block-size:100vh;overflow:visible;background:var(--ivory);font-family:var(--font);line-height:1.5}
button,input,select{font-family:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.app{min-block-size:100vh;font-family:var(--font)}
.sprite{position:absolute;inline-size:0;block-size:0}
/* Latin display titles use the body face; Arabic keeps the kit's display face. */
.app .h2,.app .topbar h1,.app .side .brand b,.app .t-ttl,.app .t-rd b{font-family:var(--font)}
:lang(ar) .h2,:lang(ar) .topbar h1,:lang(ar) .side .brand b,:lang(ar) .t-ttl,:lang(ar) .t-rd b{font-family:Amiri,"Amiri Quran",serif}
.sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;clip:rect(0,0,0,0);inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:8px;inset-block-start:-64px;z-index:100;background:var(--card);color:var(--primary);padding:10px 16px;border-radius:8px;font-weight:600}
.skip-link:focus{inset-block-start:8px}
.clip{display:block;max-inline-size:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}

/* ---------- kit buttons, links and fields on real elements ---------- */
.app .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 24px;border:0;font:inherit;font-size:17px;font-weight:600;white-space:nowrap}
.app .btn.sm{block-size:40px;font-size:15px;padding:0 16px;border-radius:12px;box-shadow:none}
.app .btn.text{padding:0 14px}
.app .btn.dis{cursor:not-allowed}
.app .btn .ic{inline-size:20px;block-size:20px}
.app .btn .spin{margin:0;inline-size:18px;block-size:18px;border-width:2.4px}
.lnk{cursor:pointer}
/* The forward-source dialog's chain (item 49): one row per source, the unavailable end as a quiet line. */
.fsrc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fsrc li{display:flex;align-items:center;gap:10px;padding:8px 4px;border-block-end:1px solid var(--line)}
.fsrc li:last-child{border-block-end:0}
.fsrc .ua{flex:1;min-inline-size:0}
.fsrc .lnk{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:13px}
.fsrc-u{color:var(--t2);font-size:13.5px}
.fsrc-u .ic{width:15px;height:15px;stroke-width:2}
.in:focus-within{border:1.5px solid var(--primary);box-shadow:0 0 0 3px rgba(7,94,84,.14)}
.in.multi{height:auto;min-height:112px;align-items:flex-start;padding-block:12px}
.in.multi textarea{flex:1;min-width:0;min-height:88px;resize:vertical;border:0;background:transparent;font:inherit;color:inherit;outline:0}
.in select{flex:1;min-inline-size:0;border:0;background:transparent;color:inherit;font:inherit;outline:0}
.in .eye{flex:none;display:grid;place-items:center;inline-size:36px;block-size:36px;margin-inline-end:-8px;border:0;border-radius:50%;background:none;color:var(--text-2)}
.fl label{display:block}

/* ---------- signed-out pages ---------- */
.auth-card{position:relative;inline-size:min(450px,100%);background:var(--card);color:var(--text);border-radius:22px;padding:72px 36px 26px;box-shadow:0 18px 48px rgba(2,35,31,.35)}
.auth-card .med{inset-block-start:-48px;inset-inline-start:50%;margin-inline-start:-48px;--md:96px}
.auth-card h1.h2{margin-block-start:0}
.auth-card .sub.small{font-size:14px;margin-block-start:18px}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin-block-start:6px}
.auth-actions{display:flex;flex-direction:column;gap:8px;margin-block-start:16px}
.auth-actions .btn{inline-size:100%}
.auth-locale{position:absolute;inset-block-start:16px;inset-inline-end:16px}
.notice{display:flex;align-items:center;gap:10px;margin-block-start:16px;padding:10px 14px;border-radius:12px;background:var(--tile);color:var(--text);font-size:15px;line-height:22px}
.notice .btn{margin-inline-start:auto}
.summary{margin-block-start:18px;padding:12px 16px;border:1.5px solid var(--danger);border-radius:12px;background:var(--danger-tile);color:var(--text)}
.summary strong{display:block;color:var(--danger);margin-block-end:4px}
.summary ul{margin:0;padding-inline-start:20px}
.summary a{color:var(--danger);font-weight:600;text-decoration:underline}
.app .splash.hdr{position:relative;inset-inline:auto;block-size:auto;min-block-size:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;font-weight:500}

/* ---------- the shell ---------- */
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-block-size:100vh}
.app .side.hdr{position:sticky;inset-inline:auto;inset-block-start:0;block-size:100vh;display:flex;flex-direction:column;padding:0 12px 12px;color:var(--sideink);z-index:2;background:var(--side)}
.side .brand{display:flex;align-items:center;gap:12px;flex:none;block-size:var(--hdr-h);margin:0 -12px 8px;padding-inline:18px;border-block-end:1px solid var(--sideline)}
.side .med{position:relative;inset-block-start:auto;inset-inline-start:auto;--md:40px;flex:none;box-shadow:0 0 0 2px var(--primary-deep)}
.side .brand b{flex:1;min-inline-size:0;font-size:18px;line-height:24px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side nav{display:flex;flex-direction:column;flex:1;min-block-size:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(249,226,198,.35) transparent}
.side .lo{flex:none;margin-block-start:auto;padding-block-start:8px;border-block-start:1px solid var(--sideline)}
.side .nav-sec{flex-shrink:0}
.side .nav-sec+.nav-sec{margin-block-start:6px;padding-block-start:6px;border-block-start:1px solid var(--sideline)}
.side .sl{padding:8px 12px 4px;color:var(--sidelab);font-size:13.5px;line-height:20px;font-weight:600;letter-spacing:.04em}
:lang(en) .side .sl{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:12px;inline-size:100%;min-block-size:40px;padding:6px 12px;border:0;border-radius:12px;background:none;color:var(--sideink);font:inherit;font-size:15px;font-weight:500;line-height:20px;text-align:start}
.nav-label{flex:1;min-inline-size:0;overflow-wrap:anywhere}
.nav-item .ic{flex:none;inline-size:20px;block-size:20px}
.nav-item:hover{background:rgba(251,248,242,.12)}
.nav-item.on{background:var(--pill);color:var(--pill-ink);font-weight:600}
/* orange means "needs a person" and nothing else: digit contrast 5.73:1 */
.nav-item .nb{flex:none;margin-inline-start:auto;min-inline-size:24px;block-size:22px;padding:0 7px;border-radius:11px;background:var(--accent);color:var(--on-accent);font-size:13.5px;font-weight:700;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
@media (max-height:800px){.nav-item{min-block-size:36px;padding-block:3px}.side .sl{padding-block-start:6px}.side .nav-sec+.nav-sec{margin-block-start:4px;padding-block-start:4px}.side .brand{margin-block-end:4px}}
.dclose,.tb-menu,.tb-med,.drawer-acct,.dscrim{display:none}
.main{position:relative;display:flex;flex-direction:column;min-inline-size:0;background:var(--ivory)}
/* the sidebar's tilework at alpha .05 under the header, fading to .015 at the bottom of the page (design pattern.txt) */
.main::before{content:"";position:absolute;inset-block:var(--hdr-h) 0;inset-inline:0;z-index:0;pointer-events:none;background:var(--pat);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%221%22 stroke-width=%22.7%22 stroke-linejoin=%22miter%22%3E%3Cpolygon points=%225.86,5.86 34.14,5.86 34.14,34.14 5.86,34.14%22/%3E%3Cpolygon points=%2220.00,0.00 40.00,20.00 20.00,40.00 0.00,20.00%22/%3E%3Cg stroke-opacity=%22.76%22%3E%3Cpolygon points=%2213.49,13.49 26.51,13.49 26.51,26.51 13.49,26.51%22/%3E%3Cpolygon points=%2220.00,10.80 29.20,20.00 20.00,29.20 10.80,20.00%22/%3E%3C/g%3E%3Cg transform=%22rotate(45 0 0)%22 stroke-opacity=%22.86%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 0) rotate(45)%22 stroke-opacity=%22.86%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(0 40) rotate(45)%22 stroke-opacity=%22.86%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 40) rotate(45)%22 stroke-opacity=%22.86%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 1px 0/40px 40px,linear-gradient(180deg,rgb(0 0 0/var(--pat-top)) 0,rgb(0 0 0/var(--pat-bot)) 100%);
 -webkit-mask-composite:source-in;
 mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%221%22 stroke-width=%22.7%22 stroke-linejoin=%22miter%22%3E%3Cpolygon points=%225.86,5.86 34.14,5.86 34.14,34.14 5.86,34.14%22/%3E%3Cpolygon points=%2220.00,0.00 40.00,20.00 20.00,40.00 0.00,20.00%22/%3E%3Cg stroke-opacity=%22.76%22%3E%3Cpolygon points=%2213.49,13.49 26.51,13.49 26.51,26.51 13.49,26.51%22/%3E%3Cpolygon points=%2220.00,10.80 29.20,20.00 20.00,29.20 10.80,20.00%22/%3E%3C/g%3E%3Cg transform=%22rotate(45 0 0)%22 stroke-opacity=%22.86%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 0) rotate(45)%22 stroke-opacity=%22.86%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(0 40) rotate(45)%22 stroke-opacity=%22.86%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 40) rotate(45)%22 stroke-opacity=%22.86%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 1px 0/40px 40px,linear-gradient(180deg,rgb(0 0 0/var(--pat-top)) 0,rgb(0 0 0/var(--pat-bot)) 100%);
 mask-composite:intersect}
.topbar{position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:14px;block-size:var(--hdr-h);padding:0 32px;background:var(--card);border-block-end:1px solid var(--line-2)}
.topbar h1{flex:1;min-inline-size:0;color:var(--primary-deep);font-size:26px;line-height:36px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:lang(ar) .topbar h1{font-size:30px}
/* the person search (header_search.dart) */
.find{position:relative;flex:0 1 360px;min-inline-size:0}
.fbox{display:flex;align-items:center;gap:10px;block-size:40px;padding:0 14px;border-radius:12px;background:var(--fill);border:1px solid var(--line-2);color:var(--text-2);font-size:14.5px;cursor:text}
.fbox:focus-within{background:var(--card);border:1.5px solid var(--primary);box-shadow:0 0 0 3px rgba(7,94,84,.14);color:var(--text)}
.fbox .ic{inline-size:18px;block-size:18px}
.fbox input{flex:1;min-inline-size:0;block-size:100%;padding:0;border:0;outline:0;background:none;color:var(--text);font:inherit}
.fbox input::placeholder{color:var(--text-2);opacity:1}
.fbox input::-webkit-search-cancel-button{display:none}
.fdrop{position:absolute;inset-inline:0;inset-block-start:46px;z-index:5;padding:6px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);box-shadow:0 12px 30px var(--shadow-sheet)}
.fres{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer}
.fres.hl,.fres:hover{background:var(--tile)}
.fres .la{inline-size:32px;block-size:32px;font-size:14px}
.fres-t{flex:1;min-inline-size:0}
.fres-t b{display:block;max-inline-size:none;font-size:15px;line-height:20px;font-weight:600}
.fres-t small{display:block;max-inline-size:none;color:var(--text-2);font-size:13px;line-height:18px}
.fhint{margin-block-start:4px;padding:8px 12px 4px;border-block-start:1px solid var(--line);color:var(--text-2);font-size:13px}
.fempty{padding:18px 12px;text-align:center;color:var(--text-2);font-size:14.5px}
.fempty .lnk{display:inline;padding:0;border:0;background:none;color:var(--primary);font:inherit;font-weight:600}
.who{display:flex;align-items:center;gap:10px;min-inline-size:0;font-size:14.5px;color:var(--text-2)}
.who-email{max-inline-size:24ch;direction:ltr;unicode-bidi:isolate}
/* the account menu: the signed-in person is its button */
.acct{position:relative;min-inline-size:0}
button.who{display:flex;align-items:center;gap:10px;color:var(--text);padding:4px 10px;border:0;border-radius:14px;background:none;font:inherit;font-size:14px;text-align:start}
button.who:hover,button.who[aria-expanded=true]{background:var(--fill)}
.who-av{flex:none;display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;background:var(--tile);color:var(--primary);font-weight:700}
.who-t{display:flex;flex-direction:column;min-inline-size:0}
.who-t .who-email{font-weight:600;line-height:18px}
.who-role{color:var(--text-2);font-size:13px;line-height:17px}
.who-chev{flex:none;inline-size:18px;block-size:18px;opacity:.7}
.menu-scrim{position:fixed;inset:0;z-index:40}
.menu{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;z-index:41;min-inline-size:200px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 12px 30px var(--shadow-sheet)}
.menu-item{display:flex;align-items:center;gap:10px;inline-size:100%;block-size:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;font-size:15px;text-align:start;white-space:nowrap}
.menu-item:hover{background:var(--tile)}
.menu-item .ic{flex:none;inline-size:20px;block-size:20px;color:var(--primary)}
.pl2{display:inline-flex;align-items:center;gap:5px;block-size:30px;padding:0 12px;border-radius:15px;background:var(--tile);color:var(--primary);font-size:14px;font-weight:600;white-space:nowrap}
.locale select{block-size:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--text)}
.body{position:relative;z-index:1;flex:1;margin-block-start:0;padding:24px 32px 32px;min-inline-size:0}
.body:focus{outline:0}

/* ---------- states ---------- */
.state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 24px;text-align:center;color:var(--text-2)}
.state.err{color:var(--danger)}
.state.err .btn{margin-block-start:6px}
.app .emp.flow{padding:48px 24px}
.emp .btn{margin-block-start:22px}

/* ---------- table, pager, filters ---------- */
.tbl{overflow:hidden}
.tbl-scroll{overflow-x:auto}
.tbl table{inline-size:100%;border-collapse:collapse}
.tbl th{block-size:44px;padding:0 16px;background:var(--field);color:var(--text-2);font-size:14px;font-weight:600;text-align:start;white-space:nowrap}
.tbl td{block-size:52px;padding:6px 16px;border-block-start:1px solid var(--line);font-size:15px;vertical-align:middle}
.tbl tbody tr:hover{background:var(--field)}
.tbl th.num,.tbl td.num{text-align:end;font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-block:14px}
.pager-count{margin-inline-end:auto;color:var(--text-2);font-size:15px}
.filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-block-end:14px}
.filter label{display:block;margin-block-end:4px;color:var(--text-2);font-size:14px;font-weight:500}
.filter .in{block-size:44px;border-radius:12px;background:var(--card);min-inline-size:200px}

/* ---------- J1 pages: dashboard, users, roles, policy, audit, settings ---------- */
.page-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-block-end:14px}
.page-actions>.sc{margin:0;margin-inline-end:auto}
.page-actions>.muted:first-child{margin-inline-end:auto}
.acts-row{margin-block-start:14px}
.row-actions{display:flex;gap:8px}
.muted{color:var(--text-2);font-size:14.5px;line-height:22px}
.with-icon{display:flex;align-items:center;gap:8px}
.with-icon .ic{inline-size:18px;block-size:18px;flex:none}
.spaced{margin-block-start:22px}
.sec{margin-block-end:22px}
.sc{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:17px;font-weight:600;line-height:26px;color:var(--text)}
.cnt{display:inline-block;min-inline-size:26px;block-size:24px;padding:0 9px;border-radius:12px;background:var(--tile);color:var(--primary);font-size:14px;font-weight:600;line-height:24px;text-align:center}
.grid{display:grid;gap:14px;margin-block-end:14px}
.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))}
.stat{display:flex;align-items:center;gap:14px;padding:14px 16px;min-block-size:78px}
.stat .tile{inline-size:44px;block-size:44px;border-radius:12px}
.stat .tile .ic{inline-size:24px;block-size:24px}
.stat small{display:block;font-size:14px;color:var(--text-2);line-height:20px}
.stat b{display:block;font-size:24px;line-height:30px;color:var(--primary);font-weight:700;font-variant-numeric:tabular-nums}
.opt{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 20px;min-block-size:76px;margin-block-end:14px}
.grid>.opt{margin-block-end:0}
.opt .tile{flex:none;inline-size:40px;block-size:40px;border-radius:12px}
.opt .tx{flex:1 1 260px;min-inline-size:0} /* below 260px of text the control wraps under it instead of squeezing it */
.opt .tx b{display:block;font-size:16px;font-weight:600;line-height:24px}
.opt .tx small{display:block;font-size:14.5px;color:var(--text-2);line-height:22px}
.form-card{padding:16px 20px;margin-block-end:14px}
.form-card .fl,.form-card .fl+.fl{margin-block-start:0}
.form-card.grid{align-items:start}
.inline-switch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pl2.o{background:#E9F7EE;color:#0B6B3A}
.pl2.g{background:var(--fill);color:var(--text-2)}
.pl2.pro{background:var(--sand);color:var(--accent-text)}
.pl2.sup{background:var(--danger-tile);color:var(--danger)}
.pl2.w{background:#FDEFD9;color:var(--accent-text)}
.pl2 .ic{inline-size:16px;block-size:16px;margin-inline-end:6px}
.who-cell{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.who-cell b{font-size:15.5px;font-weight:600;line-height:22px}
.mail{direction:ltr;unicode-bidi:isolate;color:var(--text-2);font-size:13.5px;line-height:20px;text-align:start}
.mono{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.wrap{overflow-wrap:anywhere}
.profile{display:flex;align-items:center;gap:20px;padding:20px 24px;margin-block-end:14px}
.avatar-initial{flex:none;display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:50%;background:var(--tile);color:var(--primary);font-size:26px;font-weight:700}
.profile-text{min-inline-size:0;display:flex;flex-direction:column;gap:4px}
.profile-text h2{font-size:24px;line-height:32px;font-weight:700;color:var(--primary)}
.chs{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:6px}
.facts{margin-block-start:14px}
.ic2{padding:14px 18px;min-block-size:76px}
.ic2 small{display:block;font-size:14px;color:var(--text-2);line-height:20px}
.ic2 b{display:block;font-size:16px;font-weight:600;line-height:26px;margin-block-start:2px;font-variant-numeric:tabular-nums}
.role{padding:16px 20px}
.role.dashed{border-style:dashed;background:transparent}
.role-head{display:flex;align-items:center;gap:12px;margin-block-end:6px}
.role-head .tile{inline-size:36px;block-size:36px;border-radius:10px}
.role-head b{flex:1;font-size:17px}
.role-count{font-size:24px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.caps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.caps li{display:flex;align-items:center;gap:10px;font-size:15px}
.caps li .ic{inline-size:18px;block-size:18px;color:var(--primary)}
.caps li.no{color:var(--text-2)}
.caps li.no .ic{color:var(--text-3)}
.matrix th[scope=row]{background:transparent;color:var(--text);font-size:15px}
.matrix td{vertical-align:top;padding:10px 16px}
.cell{display:flex;flex-direction:column;gap:8px}
.cell-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-inline-size:130px}
.sw{border:0;padding:0;cursor:pointer}
.sw:disabled,.sw[aria-disabled=true]{cursor:not-allowed;opacity:.5;filter:grayscale(1)}
.sw i{transition:inset-inline-start .15s}
.seg{margin-block-end:14px;max-inline-size:680px}
.seg.choice{margin:0;flex:none;min-inline-size:220px}
.seg a,.seg button{flex:1;display:grid;place-items:center;border:0;border-radius:11px;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--text-2);padding:0 12px;white-space:nowrap}
.seg a.on,.seg button.on{background:var(--card);color:var(--primary);font-weight:600;box-shadow:0 1px 3px rgba(2,35,31,.14)}
.seg button:disabled{cursor:not-allowed;opacity:.6}
.tabs-seg{overflow-x:auto}
.media-limits{margin-block-start:0}
.filters .filter input[type=date]{min-inline-size:150px}
.dlg .fl:first-of-type{margin-block-start:16px}
.dlg .acts{margin-block-start:20px}
@media (max-width:860px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .opt{flex-wrap:wrap}
}

/* ---------- overlays and toasts (the kit positions these inside a phone) ---------- */
.app .scrim{position:fixed;inset:0;z-index:50}
.app .dlg{position:fixed;z-index:60;inline-size:min(440px,calc(100vw - 32px));max-block-size:calc(100vh - 32px);overflow:auto;text-align:start}
.app .dlg:focus{outline:0}
.dlg h3,.dlg p{text-align:start}
.toasts{position:fixed;inset-block-start:16px;inset-inline:16px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toasts .toast{position:static;inline-size:min(520px,100%);pointer-events:auto}
.toast span{flex:1}
.toast-close{flex:none;display:grid;place-items:center;inline-size:32px;block-size:32px;border:0;border-radius:50%;background:none;color:inherit}

/* ---------- admin v2: Home and Users (design/2026-10-09-admin-v2, CHROME.md "v2 shared rules") ---------- */
:root{--hatch1:#B07A2E;--hatch2:#F9E2C6;--chart-1:#075E54;--chart-2:#2C8C7B;--chart-3:#4E9F90;--danger-line:#E9B9B4;--ok-tint:#E9F7EE;--ok-ink:#0B6B3A}
/* rule 6: primary and save buttons carry no drop shadow */
.app .btn{box-shadow:none}
.btn.rs{background:var(--danger-tile);color:var(--danger)}
.btn.dn{background:var(--card);border:1.5px solid var(--danger);color:var(--danger)}
/* rule 1: orange means "needs a person" and nothing else */
.cnt.np,.utabs a.w .cnt{background:var(--accent);color:var(--on-accent);font-weight:700}
.hd{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.hd h2{margin:0;color:var(--primary-deep);font-size:19px;font-weight:600;line-height:28px}
.hd .cnt{background:var(--tile);color:var(--primary-deep)}
.hd .cnt.np{background:var(--accent);color:var(--on-accent)}
.hd-end{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.tbm{color:var(--text);font-size:14px}
.nc{overflow:hidden;display:flex;flex-direction:column}
.prow{display:flex;align-items:center;gap:14px;padding:0 20px;min-block-size:64px;border-block-start:1px solid var(--line)}
.prow .ua{flex:1}
.prow .jd{inline-size:128px;color:var(--text-2);font-size:13.5px;line-height:19px}
.lnk .ic{inline-size:16px;block-size:16px}
.ua{display:flex;align-items:center;gap:12px;min-inline-size:0}
.ua-t{min-inline-size:0}
.ua b{display:block;font-size:15.5px;font-weight:600;line-height:22px}
.ua small{display:block;color:var(--text-2);font-size:13.5px;line-height:20px}
.la img,.avatar-initial img{inline-size:100%;block-size:100%;border-radius:50%;object-fit:cover}
.la,.avatar-initial{overflow:hidden}
.la{flex:none;display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:50%;background:var(--tile);color:var(--primary);font-size:18px;font-weight:600}
.kb{display:inline-flex;align-items:center;justify-content:center;block-size:38px;padding:0 16px;border:1.5px solid var(--primary);border-radius:12px;background:var(--card);color:var(--primary);font:inherit;font-size:14.5px;font-weight:600;white-space:nowrap}
.kb:hover{background:var(--tile)}
.kb:disabled{opacity:.55;cursor:wait}
.kbs{display:flex;gap:8px}
.nfoot{display:flex;align-items:center;margin-block-start:auto;padding:12px 20px;border-block-start:1px solid var(--line);color:var(--text-2);font-size:14px}
.nfoot .lnk{margin-inline-start:auto}
.ok{display:flex;align-items:center;gap:14px;flex:1;padding:22px 20px 26px;border-block-start:1px solid var(--line)}
.ok .tile{inline-size:44px;block-size:44px;border-radius:50%;background:var(--ok-tint);color:var(--ok-ink)}
.ok b{display:block;font-size:16px;font-weight:600;line-height:24px}
.ok small{display:block;color:var(--text-2);font-size:14px;line-height:21px}
.pl2.sm{block-size:26px;padding:0 10px;font-size:13.5px}
.ua b .pl2{margin-inline-start:8px;vertical-align:1px}
/* Home (dashboard redesign 01): the Needs you card and the figures beside it */
.dashboard-home{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px 20px;align-items:start}
.home-main,.home-side{display:grid;gap:16px;min-inline-size:0;align-content:start}
.dashboard-home .card{overflow:hidden}
.qhead{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:16px 20px 12px}
.qhead h2{margin:0;color:var(--primary-deep);font-size:19px;font-weight:600;line-height:28px}
.qh-t small{display:block;color:var(--text-2);font-size:13.5px;line-height:19px}
.cnt{font-variant-numeric:tabular-nums}
.cnt.big{min-inline-size:34px;block-size:32px;padding:0 11px;border-radius:16px;font-size:18px;line-height:32px}
.clear{display:inline-flex;align-items:center;gap:6px;color:var(--ok-ink);font-size:14.5px;font-weight:600}
.clear .ic{inline-size:18px;block-size:18px}
.qrow{display:flex;align-items:center;gap:14px;padding:0 20px;min-block-size:68px;border-block-start:1px solid var(--line);color:inherit}
a.qrow:hover,.qrow.open{background:var(--field)}
.qrow .tile{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:var(--tile);color:var(--primary)}
.qrow .tx{flex:1;min-inline-size:0}
.qrow .tx b{display:block;font-size:16px;font-weight:600;line-height:24px}
.qrow .sub{display:block;color:var(--text-2);font-size:14px;line-height:20px}
.qrow>.ic{flex:none;inline-size:16px;block-size:16px;color:var(--text-2)}
.qrow .lnk{color:var(--primary);font-size:15px;font-weight:600;white-space:nowrap}
.dashboard-home .prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:12px 20px}
.dashboard-home .prow .jd{grid-column:1;grid-row:2;inline-size:auto}
.dashboard-home .prow .kbs{grid-column:2;grid-row:1/span 2}
.dashboard-home .prow .kb{min-block-size:44px}
.dashboard-home .tbm{font-size:13.5px}
.pad{padding:16px 20px}
.divd{border-block-start:1px solid var(--line);margin:14px 0}
.gh{display:flex;align-items:baseline;gap:8px;margin-block-end:10px;font-size:15px;font-weight:600;line-height:22px}
.gh span{color:var(--text-2);font-size:13.5px;font-weight:400}
.banner{display:flex;align-items:center;gap:12px;margin-block-end:16px;padding:10px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--fill);color:var(--text);font-size:14.5px;font-weight:500}
.banner .ic{flex:none;inline-size:18px;block-size:18px}
.banner .lnk{margin-inline-start:auto;border:0;background:none;color:var(--primary);font:inherit;font-weight:600}
.sk.skl{block-size:14px;margin-block:6px}.sk.skb{block-size:120px;margin-block-start:10px}.sk.skt{flex:none;inline-size:40px;block-size:40px;border-radius:12px}
.sk.w40{inline-size:40%}.sk.w70{inline-size:70%}
@media (min-width:861px) and (max-width:1200px){
  .dashboard-home{grid-template-columns:minmax(0,1fr)}
  .dashboard-home .prow .kbs{grid-column:1/-1;grid-row:3;flex-wrap:wrap;margin-block-start:4px}
}
@media (max-width:860px){
  .dashboard-home{grid-template-columns:minmax(0,1fr)}
  .dashboard-home .prow{display:flex}
  .dashboard-home .prow .jd{display:block;flex:1 1 100%}
}
@media (max-width:520px){
  .qrow{padding-inline:14px;gap:10px}
  .qhead{padding-inline:14px}
}
.sbar{display:flex;gap:2px;block-size:16px;border-radius:8px;overflow:hidden}
.sbar i{display:block;min-inline-size:4px}
.c1{background:var(--chart-1)}.c2{background:var(--chart-2)}.c3{background:var(--chart-3)}
/* "waiting to be placed" is a sand hatch, never orange: orange means a person must act (owner, 2026-10-11) */
.cw{background:repeating-linear-gradient(135deg,var(--hatch1) 0 2px,var(--hatch2) 2px 6px)}
.leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-block-start:8px}
.leg div{display:flex;align-items:center;gap:7px;color:var(--text);font-size:14px;line-height:20px}
.leg i{flex:none;inline-size:11px;block-size:11px;border-radius:3px}
.leg b{font-weight:700}
.leg span{color:var(--text-2)}
.figs{display:flex;flex-wrap:wrap;gap:12px 22px}
.figs b{display:block;color:var(--primary);font-size:26px;font-weight:700;line-height:32px;font-variant-numeric:tabular-nums}
.figs small{display:block;color:var(--text-2);font-size:13.5px;line-height:19px;white-space:nowrap}
.trend{padding:18px 20px}
.trend-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.trend-h h3{font-size:16.5px;font-weight:600;line-height:26px}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-block-start:10px}
.chart h4{font-size:14.5px;font-weight:400;line-height:22px;color:var(--text-2)}
.chart h4 b{color:var(--text);font-weight:600}
.bars{display:block;inline-size:100%;block-size:auto;aspect-ratio:520/210;margin-block-start:4px}
.bars-m rect{fill:var(--chart-2)}
.bars-c rect{fill:var(--chart-1)}
.bars .grid-line{stroke:var(--line)}
.bars .tick{fill:var(--text-2);font-size:11px}
.bars rect:hover{opacity:.8}
/* Users */
.utabs{display:flex;gap:2px;margin-block-end:16px;border-block-end:1px solid var(--line-2);overflow-x:auto;overflow-y:hidden}
.utabs a{display:flex;align-items:center;gap:8px;flex:none;block-size:48px;padding:0 16px;margin-block-end:-1px;border-block-end:3px solid transparent;color:var(--text);font-size:15.5px;font-weight:500}
.utabs a:first-child{padding-inline-start:0}
.utabs a.on{border-color:var(--primary);color:var(--primary);font-weight:600}
.utabs .cnt{background:var(--card);color:var(--text);min-inline-size:26px}
.utabs a.on .cnt{background:var(--tile);color:var(--primary)}
.utabs a.w .cnt{background:var(--accent);color:var(--on-accent)}
.sfx{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-block-end:14px}
.sfx .hint{margin-inline-start:auto;color:var(--text)}
.srch{display:flex;align-items:center;gap:10px;flex:1 1 260px;max-inline-size:420px;block-size:48px;padding:0 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);color:var(--text-2)}
.srch:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,94,84,.14)}
.srch .ic{flex:none;inline-size:20px;block-size:20px}
.srch input{flex:1;min-inline-size:0;border:0;background:none;color:var(--text);font:inherit;font-size:15.5px;outline:0}
.mut{color:var(--text-2);font-size:14px}
.rb{display:inline-flex;align-items:center;gap:6px;block-size:28px;padding:0 11px;border-radius:14px;font-size:13.5px;font-weight:600;white-space:nowrap}
.rb .ic{inline-size:15px;block-size:15px}
.rb.su{background:var(--primary);color:#fff}
.rb.ad{background:var(--tile);color:var(--primary)}
.rb.vw{background:var(--fill);color:var(--text-2);border:1px solid var(--line-2)}
/* rule 3: one pagination row, inside the card */
.pgn{display:flex;align-items:center;gap:12px;padding:12px 20px;border-block-start:1px solid var(--line);background:var(--card);color:var(--text-2);font-size:14px}
.pgn .bsm{margin-inline-start:auto}
.bsm{display:inline-flex;align-items:center;gap:8px;block-size:36px;padding:0 16px;border-radius:12px;background:var(--tile);color:var(--primary);font-size:14.5px;font-weight:600;white-space:nowrap}
.bsm .ic{inline-size:18px;block-size:18px}
.tbl td .kbs{justify-content:flex-start}
/* user detail */
.dg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:20px;align-items:start}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-block:14px}
.acard{padding:20px 22px;margin-block-end:14px}
.acard h3{font-size:16.5px;font-weight:600;line-height:26px}
.acard>p{margin-block-start:2px;color:var(--text-2);font-size:14px;line-height:21px}
.sec2{display:flex;align-items:center;gap:14px;margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line)}
.sec2.first{margin-block-start:10px;padding-block-start:4px;border-block-start:0}
.sec2 .mx{flex:1;min-inline-size:0}
.sec2 b{display:block;font-size:15px;font-weight:600;line-height:22px}
.sec2 small{display:block;color:var(--text-2);font-size:13.5px;line-height:20px}
.dz{border:1.5px solid var(--danger-line)}
.dz h3{color:var(--danger)}
/* the undo toast (CHROME.md rule 7): dark, bottom centre */
.toasts-undo{position:fixed;inset-block-end:24px;inset-inline:16px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast2{display:flex;align-items:center;gap:16px;padding:12px 12px 12px 18px;border-radius:14px;background:var(--primary-deep);color:#fff;font-size:15px;box-shadow:0 14px 34px rgba(2,35,31,.38);pointer-events:auto}
.toast2 .ic{inline-size:20px;block-size:20px}
.toast2 .un{padding:6px 10px;border:0;background:none;color:#fff;font:inherit;font-weight:700;text-decoration:underline}
.toast2 .x{display:grid;place-items:center;inline-size:32px;block-size:32px;border:0;border-radius:50%;background:none;color:#fff}

/* ---------- admin v2 phase 3a: Chat policy, Staff & roles, Audit log, Settings, Sign in ---------- */
:root{--side-w:240px;--changed-tint:#F6FAF8;--lock-line:#9DBDB6;--lock-fill:#F1F6F4;--lock-check:#6F9F96;--save-dot:#9CCFC3}
.spaced-sm{margin-block-start:14px}
.hd.spaced{margin:22px 0 12px}
.grow{flex:1}
.aud{display:flex;align-items:center;gap:12px;margin-block-end:14px;padding:12px 16px;border:1px solid var(--sand);border-radius:14px;background:var(--ivory);color:var(--text);font-size:15px;line-height:24px}
.aud .ic{flex:none;inline-size:22px;block-size:22px;color:var(--accent-text)}
.aud.ro2{border-color:var(--line-2);background:var(--fill)}
.aud.ro2 .ic{color:var(--text-2)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.quiet{margin-block-start:12px;color:var(--text-2);font-size:13.5px;line-height:20px}
.lknote{display:flex;align-items:center;gap:10px;margin:12px 0 4px;color:var(--text);font-size:14px;line-height:20px}
.lknote .ic{flex:none;inline-size:18px;block-size:18px;color:var(--text-2)}
.chtag{display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:9px;background:var(--tile);color:var(--primary-deep);font-size:12.5px;font-weight:600;vertical-align:2px}
/* reach cards */
.prc{overflow:hidden}
.prc .ph{display:flex;align-items:center;gap:12px;padding:14px 20px}
.prc .ph h3{font-size:16.5px;font-weight:600;line-height:24px}
.prc .ph .tile,.rcd .rh .tile{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:var(--tile);color:var(--primary)}
.prl{display:flex;align-items:center;gap:12px;min-block-size:58px;padding:0 20px;border-block-start:1px solid var(--line)}
.prl .to{flex:1;min-inline-size:0;font-size:15.5px;line-height:22px}
.prl .to small{display:block;color:var(--primary-deep);font-size:13.5px;font-weight:600;line-height:19px}
.prl.chd{box-shadow:inset 3px 0 0 var(--primary-deep);background:var(--changed-tint)}
.cchip{position:relative;display:inline-flex;align-items:center;gap:8px;block-size:38px;padding:0 15px 0 8px;border:1.5px solid var(--line-2);border-radius:19px;background:var(--card);color:var(--text-2);font:inherit;font-size:14.5px;font-weight:600;white-space:nowrap}
.cchip .ck{display:grid;place-items:center;inline-size:22px;block-size:22px;border:1.5px solid var(--line-2);border-radius:50%;color:#fff}
.cchip .ck .ic{inline-size:14px;block-size:14px;stroke-width:3}
.cchip.on{border-color:var(--primary);background:var(--tile);color:var(--primary)}
.cchip.on .ck{border-color:var(--primary);background:var(--primary)}
.cchip.lk{border-style:dashed;cursor:default}
.cchip.lk.on{border-color:var(--lock-line);background:var(--lock-fill)}
.cchip.lk.on .ck{border-color:var(--lock-check);background:var(--lock-check)}
/* the one save bar */
.skbar-gap{block-size:84px}
.skbar{position:fixed;z-index:4;inset-block-end:20px;inset-inline:calc(var(--side-w) + 32px) 32px;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 22px;border-radius:18px;background:var(--primary-deep);color:#fff;box-shadow:0 14px 34px rgba(2,35,31,.38)}
.skbar b{display:flex;align-items:center;margin-inline-end:auto;font-size:15.5px;font-weight:600}
.skbar .dot{position:static;box-shadow:none;display:inline-block;inline-size:10px;block-size:10px;margin-inline-end:10px;border-radius:50%;background:var(--save-dot)}
.skbar .sd{display:flex;align-items:center;block-size:44px;padding:0 14px;border:0;background:none;color:#fff;font:inherit;font-size:15px;font-weight:600}
.skbar .ss{display:flex;align-items:center;gap:8px;block-size:44px;padding:0 20px;border:0;border-radius:12px;background:#fff;color:var(--primary-deep);font:inherit;font-size:15px;font-weight:700}
.skbar .ss .ic{inline-size:18px;block-size:18px}
.skbar button:disabled{opacity:.7;cursor:wait}
/* staff & roles */
.rolecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block-end:22px}
.rcd{padding:18px 20px}
.rcd .rh{display:flex;align-items:center;gap:12px}
.rcd .rh b{flex:1;font-size:17px;font-weight:600}
.rcd .rh .n{color:var(--text-2);font-size:14px;font-weight:400}
.rcd p{margin:8px 0;color:var(--text-2);font-size:14px;line-height:21px}
.rcd ul{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none;font-size:14.5px;line-height:21px}
.rcd li{display:flex;gap:8px}
.rcd li .ic{flex:none;inline-size:18px;block-size:18px;margin-block-start:2px;color:var(--primary)}
.rcd li.no,.rcd li.no .ic{color:var(--text-2)}
.rads{display:flex;flex-direction:column}
.rad{display:flex;align-items:flex-start;gap:12px;margin-block-start:10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);color:var(--text);font:inherit;text-align:start}
.rad.on{border-color:var(--primary);background:var(--tile)}
.rad i{flex:none;display:grid;place-items:center;inline-size:22px;block-size:22px;margin-block-start:2px;border:2px solid var(--line-2);border-radius:50%;color:#fff}
.rad.on i{border-color:var(--primary);background:var(--primary)}
.rad i .ic{inline-size:14px;block-size:14px;stroke-width:3}
.rad b{display:block;font-size:15.5px;line-height:24px}
.rad small{display:block;color:var(--text-2);font-size:14px;line-height:21px}
/* audit log */
.aud-f{display:grid;grid-template-columns:1.25fr 1.25fr 1.1fr .8fr .8fr;gap:12px;align-items:start;margin-block-end:14px}
.af{position:relative;min-inline-size:0}
.af>label,.af .lbl{display:block;margin-block-end:5px;color:var(--text);font-size:13.5px;font-weight:600}
.af .in{block-size:44px;border-radius:12px;background:var(--card);min-inline-size:0}
.af .in select,.af .in input{inline-size:100%;min-inline-size:0;border:0;background:none;color:var(--text);font:inherit;font-size:15px;outline:0}
.af .srch{block-size:44px;max-inline-size:none;padding:0 12px;border-radius:12px}
.af .in.chosen{display:flex;align-items:center;gap:8px;padding:0 6px 0 12px}
.af .in.chosen .ic{flex:none;inline-size:18px;block-size:18px;color:var(--text-2)}
.af .in.chosen .x{display:grid;place-items:center;flex:none;margin-inline-start:auto;inline-size:32px;block-size:32px;border-radius:50%;color:var(--text-2)}
.af .in.chosen .x:hover{background:var(--fill)}
.pf-results{position:absolute;z-index:5;inset-inline:0;margin-block-start:4px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 12px 30px var(--shadow-sheet)}
.pf-results ul{margin:0;padding:0;list-style:none}
.pf-results a{display:block;padding:8px 10px;border-radius:8px}
.pf-results a:hover{background:var(--tile)}
.pf-results b{display:block;font-size:14.5px;line-height:20px}
.pf-results small{display:block;font-size:13px;line-height:18px}
.pf-results .mut{padding:8px 10px}
.alog{overflow:visible}
.day{display:flex;align-items:baseline;gap:8px;margin:0;padding:12px 20px 8px;border-block-start:1px solid var(--line);background:var(--ivory);color:var(--text);font-size:14px;font-weight:600}
.alog>.day:first-child{border-block-start:0;border-radius:16px 16px 0 0}
.dayiso{font-weight:400}
.arows{margin:0;padding:0;list-style:none}
.arow{display:flex;align-items:center;gap:14px;min-block-size:60px;padding:10px 20px;border-block-start:1px solid var(--line)}
.arow .tm{flex:none;inline-size:48px;color:var(--text-2);font-size:14px;font-variant-numeric:tabular-nums}
.arow .tx2{flex:1;min-inline-size:0;font-size:15.5px;line-height:23px;overflow-wrap:anywhere}
.arow .tx2>b{font-weight:600}
.arow .tx2 small{display:block;color:var(--text-2);font-size:13px;line-height:18px}
.arow-open{margin-block-start:4px}
.arow .lnk{color:var(--primary);font-size:14px;font-weight:600}
.arow .lnk .ic{inline-size:15px;block-size:15px}
.pchip{display:inline-flex;align-items:center;gap:6px;block-size:28px;padding:0 10px 0 3px;border-radius:14px;background:var(--tile);vertical-align:-6px}
.pchip .mi{display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;background:var(--card);color:var(--primary);font-size:12.5px;font-weight:700}
.pchip b{color:var(--primary-deep);font-size:14.5px;font-weight:600}
.pchip.gone{border:1px solid var(--line-2);background:var(--fill)}
.pchip.gone b{color:var(--text)}
.pchip.gone .mi{background:var(--line-2);color:var(--text)}
.idc{display:inline-flex;align-items:center;block-size:20px;padding:0 8px;border-radius:10px;background:var(--card);border:1px solid var(--line-2);color:var(--text);font-family:ui-monospace,Menlo,monospace;font-size:12px}
.retn{display:flex;align-items:center;gap:12px;margin-block-start:14px;color:var(--text-2);font-size:13.5px;line-height:20px}
.retn .ic{flex:none;inline-size:18px;block-size:18px}
.retn .lnk{margin-inline-start:auto;border:0;background:none;color:var(--primary);font:inherit;font-weight:600}
/* settings: calls */
.limf{padding:16px 20px}
/* sign in: a tilework band with the card half over it */
.auth{position:relative;display:grid;justify-items:center;align-content:start;min-block-size:100vh;padding:300px 16px 40px;background:var(--ivory)}
.auth-band{--hh:380px}
.auth-card{z-index:1}
.auth-locale{z-index:2}
.auth-card .summary{margin-block-start:14px;padding:12px 14px;border:0;border-radius:12px;background:var(--danger-tile);color:var(--danger);font-size:14.5px;line-height:22px}
.auth-card .summary strong{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.auth-card .summary ul{margin:0;list-style:none;padding:0}
.auth-card .summary a{font-weight:400;text-decoration:none}

/* ---------- admin v2 phase 3b: Groups, Announcements, Oversight, Stories ---------- */
.help{margin-block-start:6px;color:var(--text-2);font-size:13.5px;line-height:20px}
.help.pad{padding:10px 18px 6px}
.lede{margin:-4px 0 14px;color:var(--text);font-size:15px}
.gav{flex:none;display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:12px;background:var(--tile);color:var(--primary);font-size:19px;font-weight:700}
.gav.lg{inline-size:52px;block-size:52px;border-radius:14px}
.gav.sm{inline-size:38px;block-size:38px;font-size:15px}
.gav .ic{inline-size:22px;block-size:22px}
.gav{overflow:hidden}.gav img{inline-size:100%;block-size:100%;object-fit:cover}.gph{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.thumb{flex:none;display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:10px;background:var(--tile);color:var(--primary)}
.chipb{display:inline-flex;align-items:center;gap:8px;block-size:36px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:18px;background:var(--card);color:var(--text);font-size:14px;font-weight:600}
.chipb .ic{inline-size:16px;block-size:16px;color:var(--text-2)}
.chipb.on{border-color:var(--primary);background:var(--tile);color:var(--primary)}
.bk2{display:grid;place-items:center;flex:none;inline-size:44px;block-size:44px;margin-inline-start:-10px;border-radius:50%;color:var(--primary-deep)}
.bk2:hover{background:var(--fill)}
.hd small{font-size:14px;font-weight:400}
.hd .wrap{min-inline-size:0}
/* a card header with an icon tile, a title and a small line */
.ch2{display:flex;align-items:center;gap:12px;padding:14px 20px}
.ch2 h3{font-size:16.5px;font-weight:600;line-height:24px}
.ch2 small{display:block;color:var(--text-2);font-size:13.5px;line-height:19px;font-weight:400}
.ch2 .tile,.sent .tile,.chn-link .tile{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:var(--tile);color:var(--primary)}
.chn-link{display:flex;align-items:center;gap:12px;min-inline-size:0}
.chn-link .pl{flex:none}
.ch2 .lnk{margin-inline-start:auto;display:flex;align-items:center;gap:4px;min-block-size:44px;color:var(--primary);font-size:15px;font-weight:600}
.ch2 .btn{margin-inline-start:auto}
.ch2.tight{padding:14px 16px}
.ch2.plain{padding-inline:0}
/* group detail */
.gsum{display:flex;align-items:center;gap:18px;margin-block-end:14px;padding:16px 22px}
.gsum-t{flex:1;min-inline-size:0}
.gsum-t .chs{margin-block-start:6px}
.dg.gd{grid-template-columns:minmax(0,1fr) minmax(0,310px)}
.tbl td .acts-row .btn{padding:0 12px}
.runs{margin-block-end:14px;overflow:hidden}
.rl{display:flex;align-items:center;gap:12px;padding:12px 20px;border-block-start:1px solid var(--line)}
.rl .mx{flex:1;min-inline-size:0}
.rl b{display:block;font-size:15px;line-height:22px}
.rl small{display:block;color:var(--text-2);font-size:13.5px;line-height:20px}
.rl.rules{background:var(--ivory)}
.rules ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;font-size:13.5px;line-height:20px;color:var(--text-2)}
.rules li{display:flex;gap:10px}
.rules .ic{flex:none;inline-size:18px;block-size:18px;margin-block-start:1px}
.lk2{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:14px}
.lk2 .ic{inline-size:16px;block-size:16px}
.flow2{display:flex;flex-direction:column;gap:8px;margin-block-start:14px;padding:12px 14px;border-radius:12px;background:var(--ivory)}
.flow2 div{display:flex;align-items:center;gap:10px;font-size:14.5px}
.flow2 .ic{flex:none;inline-size:18px;block-size:18px;color:var(--primary)}
.in.static{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:0 14px;color:var(--text)}
/* announcements */
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block-end:16px;align-items:start}
.lrow{display:flex;align-items:center;gap:12px;min-block-size:60px;padding:8px 20px;border-block-start:1px solid var(--line);color:var(--text)}
.lrow:hover{background:var(--field)}
.lrow .mx{flex:1;min-inline-size:0}
.lrow b{display:block;font-size:15px;line-height:22px}
.lrow small{display:block;color:var(--text-2);font-size:13.5px;line-height:20px}
.lrow .ic{flex:none;inline-size:18px;block-size:18px;color:var(--text-2)}
.sent{margin-block-start:6px}
.sent h3{font-size:16.5px;font-weight:600}
.sent small{display:block;color:var(--text-2);font-size:13.5px}
.bad{color:var(--danger);font-weight:600}
.pushbox{margin-block-start:14px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.optc{display:flex;align-items:center;gap:12px;padding:10px 16px}
.pushbox .optc{padding:12px 16px}
.optc .tile{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:var(--tile);color:var(--primary)}
.optc .tx{flex:1;min-inline-size:0}
.optc .tx b{display:block;font-size:15px;line-height:22px}
.optc .tx small{display:block;color:var(--text-2);font-size:13.5px;line-height:20px}
.pt2{padding:0 16px 14px}
.sumline{display:flex;align-items:center;gap:8px;margin-block-start:14px;color:var(--text);font-size:14.5px}
.sumline .ic{inline-size:18px;block-size:18px;color:var(--text-2)}
.fl>label{display:block;margin-block-end:6px;font-weight:600}
/* oversight */
.aud.calm{border-color:var(--line-2);background:var(--fill)}
.aud.calm .ic{color:var(--primary)}
.dg.ov{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
.res{display:flex;align-items:center;gap:12px;padding:10px 18px;border-block-start:1px solid var(--line);color:var(--text)}
.res .ua{flex:1}
.res:hover{background:var(--field)}
.res.on{background:var(--tile)}
.quiet-card{margin-block-start:14px;padding:14px 16px;border-style:dashed;background:transparent}
.quiet-card b{display:block;font-size:14.5px;line-height:22px}
.quiet-card p{margin:2px 0 10px;font-size:13.5px;line-height:20px}
/* stories */
.fsel{display:flex;align-items:center;gap:8px}
.fsel-l{color:var(--text-2);font-size:14px}
.fsel .in{block-size:44px;border-radius:12px;background:var(--card)}
.fsel select{border:0;background:none;color:var(--text);font:inherit;font-size:15px;outline:0}
.rowmenu{display:flex;justify-content:flex-end}
.ovf{display:grid;place-items:center;inline-size:40px;block-size:40px;border:0;border-radius:50%;background:none;color:var(--text-2)}
.ovf:hover,.ovf[aria-expanded=true]{background:var(--fill)}
.menu-item.dng,.menu-item.dng .ic{color:var(--danger)}
.menu-item:disabled{opacity:.55;cursor:not-allowed}
.acct.rowmenu .menu{inset-inline-end:0}

/* a table cell that holds a date or a pair of buttons stays on one line */
.tbl td time,.tbl td [title]:not(.clip),.tbl td .acts-row{white-space:nowrap}
.tbl td .acts-row{display:flex;gap:8px;flex-wrap:nowrap}

/* ---------- narrow screens (and tablet): the sidebar is a drawer, the top bar is one row ---------- */
@media (min-width:861px) and (max-width:1180px){
  .shell{grid-template-columns:232px minmax(0,1fr)}
  .topbar{padding-inline:24px}
}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .app .side.hdr{position:fixed;inset-block:0;inset-inline-start:0;inline-size:min(var(--drawer-w),88vw);block-size:100dvh;padding:0 12px 12px;z-index:45;box-shadow:0 0 36px rgba(2,35,31,.5);visibility:hidden;transform:translateX(-105%);transition:transform .2s ease,visibility 0s linear .2s}
  .app .side.hdr:dir(rtl){transform:translateX(105%)}
  .app .side.hdr.open{visibility:visible;transform:none;transition:transform .2s ease,visibility 0s}
  .app .side.hdr.still{transition:none}
  .dscrim{display:block;position:fixed;inset:0;z-index:44;background:var(--scrim)}
  .dclose{display:grid;place-items:center;flex:none;align-self:center;margin-inline-start:auto;inline-size:44px;block-size:44px;border:0;border-radius:50%;background:rgba(251,248,242,.12);color:var(--sideink)}
  .dclose .ic{inline-size:20px;block-size:20px}
  .drawer-acct{display:block;margin-block-end:6px}
  .who2{display:flex;flex-direction:column;gap:2px;margin-block-end:6px;padding:9px 12px;border-radius:16px;background:rgba(251,248,242,.12)}
  .who2 b{font-size:13.5px;line-height:20px}
  .who2 small{font-size:13px;line-height:18px;color:var(--sand)}
  :root{--hdr-h:60px}
  .topbar{padding:0 16px;gap:10px}
  .topbar h1{font-size:22px;line-height:30px}
  :lang(ar) .topbar h1{font-size:25px}
  /* the search is an icon here; focusing it (a tap on the icon) opens it over the whole bar */
  .find{flex:none;inline-size:44px}
  .find .fbox{inline-size:44px;block-size:44px;padding:0;justify-content:center}
  .find .fbox input{inline-size:0;flex:none}
  .find:focus-within{position:absolute;z-index:6;inset-block-start:8px;inset-inline:12px;inline-size:auto}
  .find:focus-within .fbox{inline-size:100%;padding:0 14px;justify-content:flex-start}
  .find:focus-within .fbox input{flex:1;inline-size:auto}
  .find:focus-within .fdrop{inset-block-start:52px}
  .body{margin-block-start:0;padding:14px 16px 32px}
  .tb-menu{position:relative;display:grid;place-items:center;flex:none;inline-size:44px;block-size:44px;border:0;border-radius:12px;background:var(--tile);color:var(--primary)}
  .tb-menu .ic{inline-size:24px;block-size:24px}
  .tb-menu i{position:absolute;inset-block-start:7px;inset-inline-end:7px;inline-size:11px;block-size:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--tile)}
  .who-t,.who-chev{display:none}
  button.who{padding:0}
  .charts,.dg{grid-template-columns:minmax(0,1fr)}
  .hd{flex-wrap:wrap}
  .hd-end{inline-size:100%;margin-inline-start:0;justify-content:space-between}
  .prow{flex-wrap:wrap;padding:12px 16px;gap:10px}
  .prow .ua{flex:1 1 100%}
  .prow .kbs{flex:1 1 100%}
  .prow .kb{flex:1}
  .prow .jd{display:none}
  .rrow,.nch{padding-inline:16px}
  .facts3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sfx .hint{margin-inline-start:0;flex:1 1 100%}
  .pgn{padding-inline:16px}
  .sec2{flex-wrap:wrap}
  .tbl.stack thead{display:none}
  .tbl.stack table,.tbl.stack tbody{display:block}
  .tbl.stack tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:12px 16px;border-block-start:1px solid var(--line)}
  .tbl.stack tr:first-child{border-block-start:0}
  .tbl.stack td{display:block;block-size:auto;padding:0;border:0;color:var(--text-2);font-size:13.5px}
  .tbl.stack td:first-child,.tbl.stack td:last-child{flex:1 1 100%}
  .tbl.stack td:first-child{color:var(--text);font-size:15px}
  .tbl.stack td .kbs .kb{flex:1}
  .fgrid,.rolecards{grid-template-columns:minmax(0,1fr)}
  .aud-f{grid-template-columns:minmax(0,1fr)}
  .skbar{inset-inline:16px;inset-block-end:12px;flex-wrap:wrap;padding:12px 14px}
  .skbar b{flex:1 1 100%}
  .prl{flex-wrap:wrap;padding:10px 16px}
  .prl .to{flex:1 1 100%}
  .arow{flex-wrap:wrap;padding:10px 16px}
  .arow .tm{inline-size:auto}
  .arow .tx2{flex:1 1 100%}
  .retn{flex-wrap:wrap}
  .auth{padding-block-start:190px}
  .auth-band{--hh:260px}
  .cols2,.dg.ov,.dg.gd{grid-template-columns:minmax(0,1fr)}
  .gsum{flex-wrap:wrap}
  .lrow,.rl{padding-inline:16px}
  .ch2{padding-inline:16px}
  .fsel{flex:1 1 100%}
  .fsel .in{flex:1}
  .auth-card{padding:72px 20px 20px}
}

.overlay{display:contents}

/* ---------- story rules and the institute story composer (admin-v2 14, 14b, 14c, 14d; structure from the design page CSS) ---------- */
.matx{display:grid;grid-template-columns:minmax(120px,200px) repeat(3,minmax(0,1fr));align-items:center}
.matx>div{display:flex;flex-direction:column;justify-content:center;gap:2px;min-block-size:58px;padding:8px 16px;border-block-start:1px solid var(--line)}
.matx>div.h{min-block-size:44px;border-block-start:0;background:var(--ivory);color:var(--text-2);font-size:14px;font-weight:600}
.matx>div.c,.matx>div.c.h{align-items:center}
.matx .k b{font-size:15.5px;line-height:22px}
.matx>div.span3{grid-column:2 / span 3;flex-direction:row;align-items:center;gap:10px;color:var(--text-2);font-size:14.5px;line-height:21px}
.matx .span3 .ic{flex:none;inline-size:18px;block-size:18px}
.matx>div.chd{box-shadow:none;background:var(--changed-tint)}
.matx>div.k.chd{box-shadow:inset 3px 0 0 var(--primary-deep)}
.dflt{display:flex;align-items:center;gap:8px;padding:10px 20px 12px;border-block-start:1px solid var(--line);background:var(--ivory);color:var(--text-2);font-size:13.5px;line-height:20px}
.dflt .ic{flex:none;inline-size:16px;block-size:16px}
.lrow.chd,.rl.chd{box-shadow:inset 3px 0 0 var(--primary-deep);background:var(--changed-tint)}
.mk{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;white-space:nowrap}
.mk.y{color:var(--primary)}
.mk.n{color:var(--text-2)}
.mk .ic{inline-size:18px;block-size:18px;stroke-width:2.6}
.mk .dash{display:inline-block;inline-size:14px;block-size:2px;border-radius:1px;background:currentColor}
.swt{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:6px}
.swt button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--text-2);font:inherit;font-size:13px;line-height:16px}
.swt i{display:block;inline-size:46px;block-size:46px;border:3px solid var(--card);border-radius:50%;box-shadow:0 0 0 1.5px var(--line-2)}
.swt .on{color:var(--text);font-weight:600}
.swt .on i{box-shadow:0 0 0 3px var(--primary)}
.swt .bg-default{background:linear-gradient(165deg,#075E54,#053F39)}
.swt .bg-primary2{background:#008069}
.swt .bg-accent-text{background:#B04810}
.swt .bg-sand{background:#F9E2C6}
.swt .bg-text{background:#2A2E31}
.chips2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-start:10px}
.chp{display:inline-flex;align-items:center;gap:8px;block-size:34px;padding-block:0;padding-inline:12px 6px;border-radius:17px;background:var(--tile);color:var(--primary);font-size:14px;font-weight:600;white-space:nowrap}
button.chp{border:0;padding-inline:10px;font-family:inherit;cursor:pointer}
.chp>.ic{inline-size:16px;block-size:16px}
.chp button{display:grid;place-items:center;inline-size:22px;block-size:22px;padding:0;border:0;border-radius:50%;background:none;color:var(--primary)}
.chp button .ic{inline-size:14px;block-size:14px;stroke-width:2.4}
.pvs{position:relative;inline-size:min(300px,100%);block-size:520px;margin-inline:auto;overflow:hidden;border-radius:24px;background:linear-gradient(165deg,#075E54,#053F39);box-shadow:0 12px 30px rgba(2,35,31,.25);color:#fff}
.pvs .bars{position:absolute;inset-block-start:14px;inset-inline:12px;block-size:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.pvs .bars:after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:22%;border-radius:2px;background:#fff}
.pvs .pwho{position:absolute;inset-block-start:28px;inset-inline:14px;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;line-height:20px}
.pvs .pwho small{display:block;font-size:13px;font-weight:400}
.pvs .txt{position:absolute;inset-inline:26px;inset-block-start:50%;transform:translateY(-50%);text-align:center;font-size:25px;line-height:36px;font-weight:600;overflow-wrap:anywhere}
.pvs .pmedia{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:15px;overflow-wrap:anywhere}
.pvs img{inline-size:100%;block-size:100%;object-fit:cover}
.pvs .ft{position:absolute;inset-block-end:16px;inset-inline:16px;text-align:center;font-size:13px;line-height:18px}
.pvs.story-bg-sand .pwho,.pvs.story-bg-sand .ft,.pvs.story-bg-sand .txt{color:#2A2E31}
.pvs.story-bg-sand .bars{background:rgba(42,46,49,.25)}
.pvs.story-bg-sand .bars:after{background:#2A2E31}
.inst{flex:none;display:block;inline-size:38px;block-size:38px;border:2px solid var(--accent);border-radius:50%;background:#fff url("logo.png") center/78% no-repeat}
.inst.logo{background-size:cover}
.note3{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);color:var(--text);font-size:14.5px;line-height:22px}
.note3 .ic{flex:none;inline-size:22px;block-size:22px;margin-block-start:1px;color:var(--primary)}
.compose-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;margin-block-start:18px}
.compose-acts .sumline{margin:0;margin-inline-end:auto}
.filerow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--text-2);font-size:14px}
.filerow b{color:var(--text);overflow-wrap:anywhere}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.logo-row .inst{inline-size:56px;block-size:56px}
@media (max-width:860px){
  .matx{grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,64px))}
  .matx>div{padding-inline:10px}
}

/* ---------- a text story on its background (stories-v2 storyBackground) ----------
   The five swatches of kit screen s03b, fixed in light and dark like the app's; the kit tokens flip in dark mode, so these are
   the literal kit values (hg-mid to hg-edge, primary-2, accent-text, sand, text). White ink on four (4.89:1 or more), the kit
   text colour on sand (10.90:1). */
.story-bg{padding:24px;border-radius:12px;text-align:center;font-size:18px;line-height:28px;color:#fff;background:linear-gradient(165deg,#075E54,#053F39)}
.story-bg-primary2{background:#008069}
.story-bg-accent-text{background:#B04810}
.story-bg-sand{background:#F9E2C6;color:#2A2E31}
.story-bg-text{background:#2A2E31}

/* ---------- the product tour (design/2026-10-09-tour/SPEC.md; tokens and the band are the kit's) ---------- */
.tour{position:fixed;inset:0;z-index:80;overflow:hidden}
.t-dim{position:absolute;inset:0;background:var(--scrim)}
.t-dim.off{display:none}
.t-hole{position:absolute;box-sizing:border-box;border:2px solid var(--tour-ring);border-radius:var(--hr);box-shadow:0 0 0 9999px var(--scrim);transition:left var(--motion-glide),top var(--motion-glide),width var(--motion-glide),height var(--motion-glide),border-radius var(--motion-glide);animation:t-fade var(--motion-fade)}
.t-hole:after{content:"";position:absolute;inset:-7px;border-radius:calc(var(--hr) + 5px);border:2px solid var(--tour-halo);animation:t-pulse var(--motion-pulse) infinite}
.t-hole.still,.t-card.still,.t-card.still .t-nt{transition:none}
@keyframes t-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.07,1.12);opacity:0}}
@keyframes t-fade{from{opacity:0}to{opacity:1}}
.t-card{position:absolute;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;inline-size:380px;max-inline-size:calc(100% - 32px);border-radius:18px;background:var(--sheet);color:var(--text);box-shadow:0 0 0 1px var(--tour-card-edge),0 18px 48px var(--tour-shadow);transition:left var(--motion-glide),top var(--motion-glide)}
.t-card.flip{animation:t-fade var(--motion-fade)}
.t-card:focus{outline:0}
.t-card h3,.t-card p{margin:0;text-align:start}
.app .t-band.hdr{position:relative;inset-inline:auto;block-size:auto;min-block-size:72px;flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px 18px 0 0;color:#fff}
.t-rd{position:relative;flex:none;inline-size:48px;block-size:48px}
.t-rd svg{position:absolute;inset:0;inline-size:48px;block-size:48px;transition:transform var(--motion-glide)}
.t-rd polygon{fill:var(--primary);stroke:var(--sand);stroke-width:1.8;stroke-linejoin:round}
.t-rd b{position:absolute;inset:0;display:grid;place-items:center;padding-block-start:2px;font-size:22px;font-weight:700;line-height:1;color:var(--ivory);animation:t-fade var(--motion-fade)}
.t-hx{flex:1;min-inline-size:0}
.t-of{display:block;font-size:14px;line-height:1.3;font-weight:500;color:var(--sand)}
.t-ttl{font-size:22px;font-weight:700;line-height:1.3;color:#fff;text-shadow:0 2px 6px var(--tour-shadow)}
.t-ic{flex:none;display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:11px;color:#fff;background:color-mix(in srgb,var(--ivory) 14%,transparent);border:1px solid color-mix(in srgb,var(--sand) 32%,transparent)}
.t-ic .ic{inline-size:22px;block-size:22px}
.t-seam{flex:none;block-size:2px;background:var(--accent)}
.t-sh{min-block-size:0;padding:16px 20px 20px;overflow:auto}
.t-sh p{font-size:15.5px;line-height:1.55;color:var(--text)}
.t-mk{display:flex;align-items:center;gap:6px;block-size:22px;margin-block-start:14px}
.t-mk svg{flex:none;inline-size:16px;block-size:16px;transition:width var(--motion-swell),height var(--motion-swell)}
.t-mk svg.now{inline-size:22px;block-size:22px}
.t-mk polygon{stroke-linejoin:round;transition:fill var(--motion-swell),stroke var(--motion-swell)}
.t-mk .done polygon{fill:var(--tour-mk-done);stroke:var(--tour-mk-done);stroke-width:3}
.t-mk .now polygon{fill:var(--tour-mk-now);stroke:var(--tour-mk-now-edge);stroke-width:5}
.t-mk .todo polygon{fill:none;stroke:var(--tour-mk-todo);stroke-width:5}
.t-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-start:14px}
/* DOM order is the focus order (Next, Back, Skip); row-reverse and order put them in reading order */
.t-grp{display:flex;flex-direction:row-reverse;gap:8px;margin-inline-start:auto}
.t-acts>.btn{order:-1}
.tour .btn{margin:0;block-size:auto;min-block-size:44px;padding:10px 20px;border-radius:14px;font-size:16px;line-height:1.2;white-space:nowrap}
.tour .btn.text{padding:10px;font-size:15px;color:var(--text-2)}
.t-nt{position:absolute;inset-block-start:-11px;z-index:2;inline-size:30px;block-size:12px;color:var(--hg-mid);transition:left var(--motion-glide)}
.t-nt.down{inset-block-start:auto;inset-block-end:-11px;transform:scaleY(-1);color:var(--sheet)}
.t-nt .fill{fill:currentColor}
.t-nt .edge{fill:none;stroke:color-mix(in srgb,var(--sand) 85%,transparent);stroke-width:1.5}
@media (max-width:599px){
  .t-card{inline-size:354px}
  .tour .btn{min-block-size:48px}
}
@media (prefers-reduced-motion:reduce){
  .tour *,.tour *:after{animation:none!important;transition:none!important}
}

/* ---------- reactions in oversight (concept 12d, 12e): page-local, from existing tokens ---------- */
.rfs{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:12px}
.rf{display:inline-flex;align-items:center;gap:6px;block-size:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;cursor:pointer}
.rf i{font-style:normal;font-size:16px}
.rf.on{background:var(--tile);border-color:var(--primary);color:var(--primary)}
.qt{margin-block:12px;padding:10px 14px;border-radius:12px;background:var(--ivory);color:var(--text);font-size:14px;line-height:22px;overflow-wrap:anywhere}
.em{font-size:22px;line-height:1}

/* Replies inbox: the orange waiting count, the origin line under a name and the staff writer cell */
.wt{display:inline-flex;align-items:center;block-size:28px;padding:0 11px;border-radius:14px;background:var(--accent);color:var(--on-accent);font-size:13.5px;font-weight:700;white-space:nowrap}
.wt.z{background:var(--fill);color:var(--text-2);font-weight:600}
.ua small.rsub{display:flex;align-items:center;gap:6px}
.rsub .ic{inline-size:15px;block-size:15px;flex:none}
.who2c{display:flex;align-items:center;gap:8px;min-inline-size:0}
.who2c .la{inline-size:28px;block-size:28px;font-size:13px}
/* member reports (design/2026-10-11-member-reports) */
.aud .btn{margin-inline-start:auto}
.mrk{display:flex;align-items:center;gap:6px;margin-block-end:12px;color:var(--text-2);font-size:13.5px;font-weight:600}
.mrk .ic{inline-size:16px;block-size:16px}
.mrk .mut{font-weight:400}
.cols2 .card.pad .ua{margin-block-end:10px}
.cols2 .card.pad .lnk{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-size:14.5px;font-weight:600}
.mrs{margin-block-end:16px}
.mrs h3{margin-block-end:10px}
.mrm{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mrt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.mrt li{padding-inline-start:14px;border-inline-start:2px solid var(--line-2)}
.mrt li.now{border-inline-start-color:var(--accent)}
.mrt b{display:block;font-size:15px}
.mrt small{display:block;color:var(--text-2);font-size:13.5px}
.dp .fl{margin-block-start:14px}
.dp .btn{inline-size:100%;margin-block-start:10px}
.dp .help.mrh{margin-block:6px 4px;text-align:center}
.dp .banner.stale{align-items:flex-start;margin-block-start:12px;border-color:var(--accent)}
.dp .banner.stale .btn{inline-size:auto;margin-block-start:0}
.dp .cur{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-start:12px}
.cn2{margin-block-start:4px;text-align:end;color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums}
.cn2.lim{color:var(--danger);font-weight:600}
.nn{display:flex;align-items:center;gap:8px;margin-block-start:16px;color:var(--text-2);font-size:14px}
.nn .ic{inline-size:16px;block-size:16px;flex:none}

/* ---------- People and the person page (dashboard redesign 04, slice 5a) ---------- */
/* waiting = sand, never orange: orange means a person must act now */
.pl2.wt{background:var(--sand);color:var(--sandink,#8A3A08)}
.kcell{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.pgn .bsm.prev{margin-inline-start:auto;border:0;font-family:inherit}
.pgn .bsm.prev+.bsm{margin-inline-start:0}
/* the loading table: grey bars the size of what will be there */
.tbl .sk.skl{display:block;margin-block:6px}
.tbl .sk.skc{flex:none;display:block;inline-size:42px;block-size:42px;border-radius:50%}
.sk.w90{inline-size:90px}.sk.w140{inline-size:140px}.sk.w190{inline-size:190px}
/* the person page: one column, facts in one card */
.pp{display:grid;gap:16px;min-inline-size:0}
.pp>*{margin:0;min-inline-size:0}
.pp .qhead+.pad{padding-block-start:0}
.profile-end{flex-wrap:wrap;margin-inline-start:auto}
.pfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;background:var(--line)}
.pfacts>div{padding:14px 20px;background:var(--card)}
.pfacts small{display:block;color:var(--text-2);font-size:13.5px;line-height:20px}
.pfacts b{display:block;font-size:16px;font-weight:600;line-height:26px;font-variant-numeric:tabular-nums}
@media (max-width:1180px){.pfacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.profile-end{margin-inline-start:0}}
@media (max-width:520px){.pfacts{grid-template-columns:minmax(0,1fr)}}
/* reports about one person, on the person page (design 2026-10-11-member-reports d08) */
.rdr{display:flex;align-items:flex-start;gap:12px;padding:14px 20px;border-block-start:1px solid var(--line)}
.rdr .la{inline-size:36px;block-size:36px;font-size:15px}
.rdr .tx{flex:1;min-inline-size:0}
.rdr .tx>b{font-size:15.5px;line-height:22px}
.rdr .tx .mut{font-size:13.5px}
.rdr .reasons{display:flex;gap:8px;align-items:center;margin-block-start:4px}
.rdr .t2{font-size:14.5px;line-height:22px;margin-block-start:4px;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rdr .sd{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.rdr .ic{inline-size:16px;block-size:16px}
.rdr-all{display:flex;justify-content:flex-end;padding:12px 20px;border-block-start:1px solid var(--line)}
.rdr-all .lnk{color:var(--primary);font-size:14.5px;font-weight:600}
.rdr-all .lnk .ic{inline-size:15px;block-size:15px}