/* Farooq Music 2.0 — admin. 114 (owner 31 Oct 2026, 00:16: «go with A and D day/night mode, two styles»): the new face.
   NIGHT = A · Night Studio (near-black, one green accent) — the default.  DAY = D · Control Room (white and blue, grouped side menu).
   The look is <html data-look="day|night|auto">, written by the server from the cookie fm2_look (App\Support\AdminLook); "auto" (no
   cookie yet) follows the computer (prefers-color-scheme). Every colour is a variable of the two blocks below — the page sheets use only
   these, so a colour changes in ONE place. Every text/background pair of both looks reaches 4.5:1 (the adminweb self-test checks it).
   Fonts self-hosted (SIL OFL, see fonts/OFL-*.txt): Night = Plus Jakarta Sans, Day = IBM Plex Sans, code and logs = IBM Plex Mono,
   Urdu = Noto Naskh Arabic (113). No inline styles anywhere (CSP). Before 114: the "control room" look of 18 Sep 2026 (D16-2). */
@font-face{font-family:"Plex Mono";font-weight:400;font-display:swap;src:url("fonts/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"Plex Mono";font-weight:500;font-display:swap;src:url("fonts/plex-mono-500.woff2") format("woff2")}
/* 113 (owner, 30 Oct 2026): the admin's Urdu is the FarooqStars face too — Noto Naskh Arabic, 12% larger (size-adjust 112%), as the website since 064.
   The family keeps the name "Nastaliq" so every older rule follows; the Nastaliq file stays on disk, unused. */
@font-face{font-family:"Nastaliq";font-weight:400;font-display:swap;size-adjust:112%;src:url("fonts/noto-naskh-arabic-regular.woff2") format("woff2")}
@font-face{font-family:"Nastaliq";font-weight:700;font-display:swap;size-adjust:112%;src:url("fonts/noto-naskh-arabic-bold.woff2") format("woff2")}
/* 114: the two faces of the new look (the Chakra Petch files of the old look stay on disk, unused) */
@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url("fonts/plus-jakarta-sans-400.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url("fonts/plus-jakarta-sans-600.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url("fonts/plus-jakarta-sans-700.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url("fonts/plus-jakarta-sans-800.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url("fonts/ibm-plex-sans-700.woff2") format("woff2")}

/* NIGHT — A · Night Studio (the default, and "auto" on a computer set to dark) */
:root{
  color-scheme:dark;
  --ground:#121212; --side:#000000; --side-line:#000000; --side-ink:#B0B0B0;
  --panel:#1C1C1C; --panel-2:#262626; --sel:#262626; --sel-ink:#FFFFFF;
  --line:#2E2E2E; --line-2:#262626; --line-3:#3D3D3D;
  --ink:#E8E8E8; --ink-hi:#FFFFFF; --dim:#B0B0B0; --soft:#D0D0D0; --placeholder:#8F8F8F;
  --phos:#2BD67B; --accent-ink:#05230F; --accent-hover:#5BE59A; --accent-soft:rgba(43,214,123,.2);
  --good:#3BE38A; --good-ink:#05230F; --amber:#F5B83D; --amber-ink:#1A1200; --red:#FF7A7A; --red-ink:#2A0606; --blue:#8AB4FF; --violet:#D7A6FF;
  --chip-bg:#163A26; --chip-ink:#3BE38A; --warn-bg:#3A2C0D; --bad-bg:#3B1717;
  --off:#6B6B6B; --knob:#FFFFFF; --backdrop:rgba(0,0,0,.72); --shadow:none; --pop-shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:16px; --radius-item:999px; --radius-sm:12px; --logo-radius:999px;
  --ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fs:.9375rem; --title-w:800; --num-w:800; --label-ls:.07em;
  --mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --display:var(--ui);
  --side-w:16.5rem;
}
/* DAY — D · Control Room, when chosen … */
:root[data-look=day]{
  color-scheme:light;
  --ground:#F3F5F9; --side:#FFFFFF; --side-line:#DFE4EC; --side-ink:#0F172A;
  --panel:#FFFFFF; --panel-2:#F7F9FC; --sel:#EAF0FD; --sel-ink:#1D4ED8;
  --line:#DFE4EC; --line-2:#E8ECF2; --line-3:#C3CCD9;
  --ink:#0F172A; --ink-hi:#020617; --dim:#4B5A70; --soft:#334155; --placeholder:#5B6B82;
  --phos:#1D4ED8; --accent-ink:#FFFFFF; --accent-hover:#1E40AF; --accent-soft:rgba(29,78,216,.14);
  --good:#147A3A; --good-ink:#FFFFFF; --amber:#A15C07; --amber-ink:#FFFFFF; --red:#B91C1C; --red-ink:#FFFFFF; --blue:#1E40AF; --violet:#7E22CE;
  --chip-bg:#E9F6EE; --chip-ink:#166534; --warn-bg:#FDF3E1; --bad-bg:#FDECEC;
  --off:#8593A8; --knob:#FFFFFF; --backdrop:rgba(15,23,42,.45); --shadow:none; --pop-shadow:0 18px 50px rgba(15,23,42,.18);
  --radius:8px; --radius-item:6px; --radius-sm:6px; --logo-radius:8px;
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fs:.875rem; --title-w:600; --num-w:600; --label-ls:.07em;
}
/* … and when nothing is chosen yet on a computer set to light (keep this block the same as the one above — the self-test compares them) */
@media (prefers-color-scheme:light){
:root[data-look=auto]{
  color-scheme:light;
  --ground:#F3F5F9; --side:#FFFFFF; --side-line:#DFE4EC; --side-ink:#0F172A;
  --panel:#FFFFFF; --panel-2:#F7F9FC; --sel:#EAF0FD; --sel-ink:#1D4ED8;
  --line:#DFE4EC; --line-2:#E8ECF2; --line-3:#C3CCD9;
  --ink:#0F172A; --ink-hi:#020617; --dim:#4B5A70; --soft:#334155; --placeholder:#5B6B82;
  --phos:#1D4ED8; --accent-ink:#FFFFFF; --accent-hover:#1E40AF; --accent-soft:rgba(29,78,216,.14);
  --good:#147A3A; --good-ink:#FFFFFF; --amber:#A15C07; --amber-ink:#FFFFFF; --red:#B91C1C; --red-ink:#FFFFFF; --blue:#1E40AF; --violet:#7E22CE;
  --chip-bg:#E9F6EE; --chip-ink:#166534; --warn-bg:#FDF3E1; --bad-bg:#FDECEC;
  --off:#8593A8; --knob:#FFFFFF; --backdrop:rgba(15,23,42,.45); --shadow:none; --pop-shadow:0 18px 50px rgba(15,23,42,.18);
  --radius:8px; --radius-item:6px; --radius-sm:6px; --logo-radius:8px;
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fs:.875rem; --title-w:600; --num-w:600; --label-ls:.07em;
}
}
@media (min-width:2400px){html{font-size:18px}}
@media (min-width:3200px){html{font-size:20px}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{background:var(--ground)}
body.fm2{background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:var(--fs);line-height:1.5;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
body.fm2.ur{font-family:"Nastaliq",var(--ui);line-height:2}
[hidden]{display:none!important}
a{color:var(--phos);text-decoration:none}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.accent{color:var(--phos)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.scan{display:none}   /* the old look's moving line — gone with 114 */
.blink{animation:none}

/* 114 · the ONE side menu (resources/views/admin/_nav): the menu is the first column — left in English, right in Urdu (the grid
   follows dir) — and everything else of the page sits in the second column, untouched. */
body.fm2.with-menu{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);grid-template-rows:repeat(12,auto) 1fr;align-items:start}
body.fm2.with-menu > *{grid-column:2;min-width:0}
body.fm2.with-menu > .side{grid-column:1;grid-row:1 / -1;align-self:stretch}
body.fm2.with-menu > .view{width:100%}   /* a page view fills its column (up to its own max-width) even before its data has come */
.nav.side{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:1.1rem;background:var(--side);border-inline-end:1px solid var(--side-line);padding:1.4rem .85rem 1.6rem;min-width:0;position:relative;z-index:2}
.side-brand{display:flex;align-items:center;gap:.75rem;padding:0 .45rem}
.side-logo{width:2.5rem;height:2.5rem;flex:0 0 auto;border-radius:var(--logo-radius);background:var(--phos);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--ui);font-weight:800;font-size:.95rem;line-height:1;letter-spacing:0}
.side-name{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.side-name b{font-weight:700;color:var(--ink-hi);font-size:1.05rem}
.side-name small{color:var(--dim);font-size:.8rem}
.ur .side-name b{font-size:1.1rem}
.ur .side-name small{font-size:.85rem}
.side-tools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:0 .2rem}
.look{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-item);overflow:hidden;background:var(--panel)}
.look-btn{min-height:2.75rem;display:inline-flex;align-items:center;gap:.4rem;padding:0 .85rem;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.look-btn:hover{color:var(--ink-hi);background:var(--panel-2)}
.look-btn[aria-pressed=true]{background:var(--phos);color:var(--accent-ink)}
.ur .look-btn{font-size:.95rem}
.side-tools .navbtn{min-height:2.75rem}
.ur .side-lang{font-family:var(--ui)}
.side-group{display:flex;flex-direction:column;gap:2px}
.side-head{margin:0;padding:0 .75rem .3rem;font-size:.72rem;font-weight:600;letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--dim)}
.ur .side-head{letter-spacing:0;text-transform:none;font-size:.85rem}
.side-link{min-height:2.75rem;display:flex;align-items:center;gap:.75rem;padding:0 .75rem;border-radius:var(--radius-item);color:var(--side-ink);font-weight:500;text-decoration:none;line-height:1.3}
.side-link:hover{background:var(--panel-2);color:var(--ink-hi)}
.side-link.is-here{background:var(--sel);color:var(--sel-ink);font-weight:700}
.side-link .ic{flex:0 0 auto}
.side-link .t{flex:1 1 auto;min-width:0}
.side-link .out{font-size:.85em}
.side-link .badge{margin-inline-start:auto;min-width:1.4rem;padding:0 .45rem;border:0;border-radius:999px;background:var(--amber);color:var(--amber-ink);font-size:.72rem;font-weight:700;line-height:1.4rem;text-align:center;letter-spacing:0}
.side-out{align-self:flex-start;margin-inline-start:.2rem}

/* the top of each page: its plain name, one line on what it is, the connection chip and the Doha clock */
.bar{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.6rem 2rem .4rem}
.brand{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.bar .brand:has(> .logo){flex-direction:row;align-items:center;gap:1rem}
.logo{color:var(--phos);flex-shrink:0}
.title{margin:0;font-family:var(--ui);font-weight:var(--title-w);font-size:1.75rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink-hi)}
.ur .title{font-family:"Nastaliq",var(--ui);font-weight:700;letter-spacing:0;font-size:1.8rem;line-height:1.8}
.sub{margin:0;font-size:.92rem;line-height:1.5;color:var(--dim)}
.ur .sub{font-size:.95rem;line-height:1.9}
.bar-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem 1.25rem;flex-wrap:wrap;min-width:0}
.pill{margin:0;display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .85rem;border:0;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink);font-size:.78rem;font-weight:600;letter-spacing:.04em}
.ur .pill{letter-spacing:0;padding:.05rem .85rem;font-size:.85rem}
.pill.warn{background:var(--warn-bg);color:var(--amber)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;display:inline-block}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.ur .clock{align-items:flex-start}
.clock span{font-family:var(--ui);font-weight:700;font-size:1.35rem;letter-spacing:0;color:var(--ink-hi);font-variant-numeric:tabular-nums;min-width:8.2ch;text-align:right;display:inline-block}   /* 26 Sep: every digit the same width, a fixed width - the header no longer wiggles each second */
.ur .clock span{text-align:left}
.clock small{font-size:.68rem;font-weight:600;letter-spacing:var(--label-ls);color:var(--dim)}
.ur .clock small{letter-spacing:0;font-size:.8rem;font-weight:400}
/* the old header menu (only the pages that now open the website still carry it) */
.nav{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;min-width:0}

/* buttons */
.navbtn{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:0 1rem;border:1px solid var(--line);border-radius:var(--radius-item);background:var(--panel);color:var(--ink);font:inherit;font-size:.82rem;font-weight:600;letter-spacing:.02em;line-height:1.2;cursor:pointer;text-decoration:none}
.ur .navbtn{letter-spacing:0;font-size:.9rem}
.navbtn:hover{border-color:var(--phos);color:var(--ink-hi)}
.btn-primary{min-height:2.75rem;padding:0 1.3rem;border:1px solid var(--phos);border-radius:var(--radius-item);background:var(--phos);color:var(--accent-ink);font:inherit;font-weight:700;letter-spacing:.02em;cursor:pointer}
.ur .btn-primary{letter-spacing:0}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-primary:disabled{opacity:.5;cursor:wait}

/* panels (cards) */
.view{position:relative;z-index:1;flex-grow:1;padding:1rem 2rem 2rem}
.panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow)}
.label{margin:0;font-size:.72rem;font-weight:600;letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--dim)}
.ur .label{letter-spacing:0;text-transform:none;font-size:.85rem}
.label.gap{margin-top:1rem}
.note{margin:0;font-size:.85rem;line-height:1.65;color:var(--dim)}
.ur .note{line-height:2.1;font-size:.9rem}
.note.dashed{padding:1.25rem 1.1rem;border-top:1px dashed var(--line)}   /* the empty state of a list */
.stack{display:flex;flex-direction:column;gap:.5rem}
.row-between{display:flex;justify-content:space-between;margin:.75rem 0 0;font-size:.85rem}
.row-end{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.25rem}
.panel-head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
/* the boxes of the page sheets take the radius of the look (their sheets give them no radius of their own) */
.tile,.place,.counter,.cardx,.card,.run,.req,.alert,.notice,.notice-row,.job,.actions,.list,.watch-list,.watch-panel,.pane,.errors,.blocks-table,.sesh,.vault,.types,.meter,.g-count,.g-shot,.g-rows li,.bell-panel,.row,.evt{border-radius:var(--radius-sm)}
.st,.tag,.count,.g-tag,.g-num{border-radius:999px}
.tbl{border-radius:var(--radius-sm)}

/* sign in / denied */
.view-signin,.view-denied{display:flex;align-items:center;justify-content:center;min-height:60vh}
.signin{width:min(28rem,100%);padding:2rem;display:flex;flex-direction:column;gap:.6rem}
.signin label{font-size:.85rem;font-weight:600;color:var(--soft)}
/* fields: every field of every page takes the look's radius; the page sheets set their own size */
input[type=email],input[type=password],input[type=search],input[type=text],input[type=number],input[type=url],select{border-radius:var(--radius-item)}
textarea{border-radius:var(--radius-sm)}
input[type=email],input[type=password],input[type=search]{min-height:2.75rem;padding:0 1rem;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-hi);font:inherit;font-size:.92rem}
.ur input[type=search]{font-family:"Nastaliq",var(--ui)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--phos);outline-offset:1px}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}
.signin .btn-primary{margin-top:.8rem}
.msg{min-height:1.4rem;margin:.2rem 0 0;color:var(--red);font-size:.85rem}
.denied{padding:3rem 3.5rem;text-align:center;max-width:36rem}
.denied .big{margin:0;font-family:var(--ui);font-weight:var(--num-w);font-size:5rem;line-height:1;color:var(--red)}
.denied .label{margin:.8rem 0 1rem;color:var(--red)}

/* users view */
.view-users{display:grid;grid-template-columns:minmax(14rem,17rem) minmax(0,1fr) minmax(22rem,28rem);gap:1.25rem;align-items:start}
.col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.filters{gap:.6rem}
.chip{min-height:2.75rem;display:flex;align-items:center;justify-content:space-between;padding:0 .95rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-item);color:var(--ink);font:inherit;font-size:.85rem;font-weight:600;letter-spacing:.02em;cursor:pointer;text-align:start}
.ur .chip{letter-spacing:0;font-size:.9rem}
.chip[aria-pressed=true]{background:var(--sel);border-color:var(--phos);color:var(--sel-ink)}
.chip .n{color:var(--dim);font-family:var(--ui);font-variant-numeric:tabular-nums}

.thead,.trow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:.75rem;align-items:center}
.thead{padding:.75rem 1.1rem;border-bottom:1px solid var(--line);font-size:.7rem;font-weight:600;letter-spacing:var(--label-ls);color:var(--dim)}
.ur .thead{letter-spacing:0;font-size:.85rem;padding:.2rem 1.1rem}
.trow{width:100%;min-height:4rem;padding:.8rem 1.1rem;background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.trow:hover{background:var(--panel-2)}
.trow[aria-current=true]{background:var(--sel)}
.agent{display:flex;align-items:center;gap:.75rem;min-width:0}
.avatar{width:2.25rem;height:2.25rem;flex-shrink:0;border:0;border-radius:50%;background:var(--sel);display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:700;color:var(--sel-ink)}
.who{display:flex;flex-direction:column;min-width:0}
.who b{font-weight:600;color:var(--ink-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{color:var(--dim);font-family:var(--mono);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tags{display:flex;gap:.35rem;flex-wrap:wrap}
.tag{padding:.12rem .6rem;border:1px solid currentColor;font-size:.7rem;font-weight:600;letter-spacing:.04em}
.ur .tag{letter-spacing:0;font-size:.8rem;padding:0 .55rem}
.status{display:flex;align-items:center;gap:.5rem;font-size:.78rem}
.status .sq{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;display:inline-block}
.ok{color:var(--good)} .bad{color:var(--red)} .warn{color:var(--amber)}
.r-admin{color:var(--amber)} .r-creator{color:var(--phos)} .r-moderator{color:var(--blue)} .r-worker{color:var(--violet)} .r-listener{color:var(--soft)}
.muted-cell{color:var(--dim)}

.matrix{padding:1rem 1.1rem}
.mrow{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(5,minmax(0,1fr));border-top:1px solid var(--line-2);font-size:.82rem}
.mrow.head{border-top:0;color:var(--dim);font-size:.7rem;font-weight:600;letter-spacing:.04em}
.ur .mrow.head{letter-spacing:0;font-size:.8rem}
.mrow span{padding:.45rem 0}
.ur .mrow span{padding:.1rem 0}
.mrow span+span{text-align:center}

.dossier{padding:1.25rem;position:sticky;top:1rem}
.dossier-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-top:.4rem}
.name{margin:0;font-family:var(--ui);font-weight:var(--title-w);font-size:1.6rem;line-height:1.25;color:var(--ink-hi)}
.ur .name{font-family:"Nastaliq",var(--ui);font-weight:700;font-size:1.6rem;line-height:1.9}
.badge{padding:.3rem .7rem;border:1px solid var(--amber);border-radius:999px;color:var(--amber);font-size:.7rem;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.ur .badge{letter-spacing:0;font-size:.8rem;padding:0 .6rem}
.toggle{min-height:3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem .95rem;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.toggle:disabled{cursor:not-allowed}
.toggle .t{display:flex;flex-direction:column}
.toggle .t b{font-weight:600;color:var(--ink-hi)}
.toggle .t small{font-size:.75rem;color:var(--dim)}
.switch{width:2.75rem;height:1.5rem;flex-shrink:0;background:var(--off);border-radius:999px;position:relative;display:inline-block;direction:ltr}
.switch::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--knob);transition:left .15s}
.toggle[aria-pressed=true] .switch{background:currentColor}
.toggle[aria-pressed=true] .switch::after{left:1.45rem}
.history{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem;max-height:18rem;overflow:auto}
.history li{padding:.5rem 0;border-bottom:1px solid var(--line-2);font-size:.8rem;line-height:1.5}
.ur .history li{line-height:2;font-size:.85rem}
.history time{display:block;color:var(--dim);font-family:var(--mono);font-size:.75rem}

.dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--pop-shadow);padding:1.5rem;max-width:32rem}
.dialog::backdrop{background:var(--backdrop)}
.confirm-text{margin:.8rem 0 0;font-size:1rem;line-height:1.6;color:var(--ink-hi)}
.ur .confirm-text{line-height:2.1}

/* 114: with the side menu the page is narrower — below 1600px the search and the role filter go on top, the list and the file side by side */
@media (max-width:1600px){
  .view-users{grid-template-columns:minmax(0,1fr) minmax(20rem,26rem)}
  .view-users > .filters{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
  .view-users > .filters #q{flex:1 1 16rem;min-width:0;max-width:26rem}
  .view-users > .filters .label.gap{margin-top:0}
  .view-users > .filters .stack{flex-direction:row;flex-wrap:wrap;gap:.4rem}
  .view-users > .filters .chip{min-width:7.5rem;gap:.9rem}
}
@media (max-width:600px){
  .thead{display:none}
  .trow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:.45rem}   /* 114: on a phone each person is two short lines */
}
@media (max-width:1100px){
  .view-users{grid-template-columns:1fr}
  .dossier{position:static}
  .bar{flex-wrap:wrap}
}
/* 114 · a phone or a narrow window: the menu stacks ABOVE the page (never sticky, never the full screen height); its lines wrap */
@media (max-width:900px){
  body.fm2.with-menu{display:flex;flex-direction:column}
  .nav.side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.6rem .7rem;padding:.9rem 1rem 1rem;border-inline-end:0;border-bottom:1px solid var(--side-line)}
  .side-brand{flex:1 1 auto;padding:0}
  .side-group{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.35rem}
  .side-head{flex:0 0 100%;padding:.15rem .2rem 0}
  .side-link{flex:0 1 auto;padding:0 .8rem;border:1px solid var(--line);background:var(--panel)}
  .side-link.is-here{border-color:var(--phos)}
  .side-out{flex:0 0 auto}
  .bar{padding:1.1rem 1rem .3rem}
  .title{font-size:1.45rem}
  .view{padding:1rem}
}