/* =====================================================================================================
   DoctorPay Intelligence — design system
   One visual language for every service: DoctorPay's brand (Pantone 286 C blue, warm ivory and stone
   neutrals, Persian red) on the structure of the two original tools (MomGene's dense, quiet panels and
   the P&L model's Swiss grids). Tokens first; every component reads them, so light and dark are one switch.
   The page CSP forbids inline styles: dynamic values go through the CSSOM (dom.js applyCss).
   ===================================================================================================== */

/* Text in Plus Jakarta Sans; figures in charts and dashboards in JetBrains Mono. Both self-hosted, SIL OFL. */
@font-face {
  font-family: "Jakarta"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Persian names (categories, people) render in Vazirmatn; Latin stays in Jakarta. */
  font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* ---- brand */
  --brand: #21409A;           /* DoctorPay Blue, Pantone 286 C */
  --logo-blue: #093FB4;       /* the wordmark's own accent */
  --brand-strong: #1A3380;
  --brand-ink: #FFFFFF;       /* text on brand */
  --brand-soft: #EEF3FF;      /* Soft Mist Blue */
  --brand-tint: #E3E7F9;
  --brand-line: #C3CEF6;
  --brand-bright: #2F5BFF;
  --persian: #7B2E3A;         /* Persian Red, used sparingly for emphasis */
  --campaign: #C86B4A;        /* campaign accent */

  /* ---- neutrals: warm ivory paper, stone rules, brand-black ink */
  --paper: #F6F3EE;
  --surface: #FFFFFF;
  --surface-2: #FAF8F5;
  --surface-3: #F1EDE7;
  --sunken: #F3F0EA;
  --rule: #E6E0D8;            /* Light Stone */
  --rule-strong: #D3CBC0;
  --ink: #0B051D;             /* Brand Black */
  --ink-2: #48445A;
  --ink-3: #625E70;           /* ≥ 4.5:1 on every light surface, surface-3 included */
  --ink-4: #9B958C;           /* Warm Taupe — decorative only */

  /* ---- meaning: always paired with a sign, word or icon, never colour alone */
  --pos: #12775A;   --pos-soft: #E2F3EC;
  --neg: #AE203B;   --neg-soft: #FBE8EC;
  --warn: #9A5B07;  --warn-soft: #FBF0DC;
  --info: var(--brand); --info-soft: var(--brand-soft);

  /* ---- data series (charts, legends): brand first, then the palette's tonal partners */
  --s1: #21409A; --s2: #6B8AFD; --s3: #12775A; --s4: #7FC4AA;
  --s5: #AE203B; --s6: #7B2E3A; --s7: #C86B4A; --s8: #9B958C;

  /* ---- shape, depth, motion */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 5, 29, .06), 0 1px 1px rgba(11, 5, 29, .03);
  --shadow-2: 0 6px 18px -6px rgba(11, 5, 29, .14), 0 2px 6px -2px rgba(11, 5, 29, .06);
  --shadow-3: 0 24px 48px -18px rgba(11, 5, 29, .28), 0 8px 18px -8px rgba(11, 5, 29, .10);
  --ring: 0 0 0 3px rgba(47, 91, 255, .22);
  --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: 140ms; --t-med: 220ms;

  /* ---- type */
  --font: "Jakarta", "Vazirmatn", ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* figures in charts and dashboards */
  --w-light: 300; --w-body: 450; --w-ui: 550; --w-strong: 650; --w-title: 700; --w-heavy: 800; --w-black: 800;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;
  --fs-3xl: 34px; --fs-hero: clamp(34px, calc(4.2 * var(--vw)), 54px);

  /* ---- layout */
  --topbar-h: 60px; --gutter: 24px; --maxw: 1440px;
  --z-sticky: 20; --z-top: 40; --z-pop: 60; --z-dialog: 80; --z-toast: 100;

  /* ---- MomGene and P&L vocabulary (kept so both tools' component CSS reads the shared palette) */
  --accent: var(--brand); --accent-soft: var(--brand-soft);
  --in: var(--pos); --in-soft: var(--pos-soft); --out: var(--neg); --out-soft: var(--neg-soft);
  --radius: var(--r-sm);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo-blue: #8FA6FF; --brand: #8FA6FF; --brand-strong: #B3C2FF; --brand-ink: #0B051D; --brand-soft: rgba(143, 166, 255, .13);
    --brand-tint: rgba(143, 166, 255, .2); --brand-line: rgba(143, 166, 255, .38); --brand-bright: #A9B9FF;
    --persian: #E08A9A; --campaign: #E39A7C;
    --paper: #0B0817; --surface: #131021; --surface-2: #181528; --surface-3: #201C33; --sunken: #0F0C1C;
    --rule: #2A2640; --rule-strong: #3A3554;
    --ink: #F1EFF7; --ink-2: #BEB9CF; --ink-3: #928CA6; --ink-4: #6C6782;
    --pos: #4CCB9F; --pos-soft: rgba(76, 203, 159, .14); --neg: #F27A90; --neg-soft: rgba(242, 122, 144, .14);
    --warn: #EBB061; --warn-soft: rgba(235, 176, 97, .14);
    --s1: #8FA6FF; --s2: #4F6BE0; --s3: #4CCB9F; --s4: #2A8F70; --s5: #F27A90; --s6: #B5546A; --s7: #E39A7C; --s8: #8E889E;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 8px 22px -8px rgba(0, 0, 0, .6);
    --shadow-3: 0 28px 56px -20px rgba(0, 0, 0, .8); --ring: 0 0 0 3px rgba(143, 166, 255, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --logo-blue: #8FA6FF; --brand: #8FA6FF; --brand-strong: #B3C2FF; --brand-ink: #0B051D; --brand-soft: rgba(143, 166, 255, .13);
  --brand-tint: rgba(143, 166, 255, .2); --brand-line: rgba(143, 166, 255, .38); --brand-bright: #A9B9FF;
  --persian: #E08A9A; --campaign: #E39A7C;
  --paper: #0B0817; --surface: #131021; --surface-2: #181528; --surface-3: #201C33; --sunken: #0F0C1C;
  --rule: #2A2640; --rule-strong: #3A3554;
  --ink: #F1EFF7; --ink-2: #BEB9CF; --ink-3: #928CA6; --ink-4: #6C6782;
  --pos: #4CCB9F; --pos-soft: rgba(76, 203, 159, .14); --neg: #F27A90; --neg-soft: rgba(242, 122, 144, .14);
  --warn: #EBB061; --warn-soft: rgba(235, 176, 97, .14);
  --s1: #8FA6FF; --s2: #4F6BE0; --s3: #4CCB9F; --s4: #2A8F70; --s5: #F27A90; --s6: #B5546A; --s7: #E39A7C; --s8: #8E889E;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 8px 22px -8px rgba(0, 0, 0, .6);
  --shadow-3: 0 28px 56px -20px rgba(0, 0, 0, .8); --ring: 0 0 0 3px rgba(143, 166, 255, .3);
  color-scheme: dark;
}

/* ===================================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
/* On a desktop the platform reads as the browser's 90% zoom would show it (kamyab, 1405/08/04: at 100% everything
   was too big); phones keep their own size, their tap targets with it */
/* The window's height and width, in this page's pixels: under the zoom, 100vh would cover only 90% of the window, so
   full-height drawers, rails and sheets use calc(100 * var(--vh)) and the like. */
:root { --vh: 1vh; --dvh: 1dvh; --vw: 1vw; }
@media (min-width: 1024px) { html { zoom: .9; } :root { --vh: calc(1vh / .9); --dvh: calc(1dvh / .9); --vw: calc(1vw / .9); } }
body {
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; font-weight: 450;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1, "cv11" 1; font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.mono, .fig { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--brand); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--brand-tint); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .mut { color: var(--ink-3); }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.grow { flex: 1; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; } .icon.lg { width: 22px; height: 22px; } .icon.xl { width: 28px; height: 28px; }
.eyebrow { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--ink); color: var(--surface); padding: 8px 14px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top var(--t-fast); }
.skip-link:focus { top: 10px; }

/* ===================================================================================== buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: var(--r-sm); border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink);
  font-weight: 650; font-size: var(--fs-md); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.btn.ghost:hover { border-color: var(--ink-3); background: var(--surface-2); }
.btn.quiet { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn.quiet:hover { background: var(--surface-3); color: var(--ink); }
.btn.danger { background: var(--neg); border-color: var(--neg); color: var(--surface); }
.btn.danger:hover { filter: brightness(.95); }
.btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-sm); gap: 6px; }
.btn.block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn.bordered { border-color: var(--rule-strong); background: var(--surface); }
.icon-btn svg { width: 18px; height: 18px; }
.link-btn { border: 0; background: none; color: var(--brand); cursor: pointer; padding: 4px 0; font-size: var(--fs-sm); font-weight: 650; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--neg); }

/* ===================================================================================== pills, badges */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 650; border: 1px solid transparent; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.pill.ok { background: var(--pos-soft); color: var(--pos); }
.pill.bad { background: var(--neg-soft); color: var(--neg); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
button.pill { cursor: pointer; }
.pill svg { width: 14px; height: 14px; }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; white-space: nowrap; flex: none; padding: 0 8px; border-radius: var(--r-xs); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-3); color: var(--ink-2); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }
.badge.pos { background: var(--pos-soft); color: var(--pos); }
.badge.neg { background: var(--neg-soft); color: var(--neg); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }

/* ===================================================================================== forms */
.fld { display: grid; gap: 6px; min-width: 0; }
.fl { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.fld small, .hint { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.inp { position: relative; display: flex; align-items: center; }
.inp > .icon { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.inp > .icon ~ input { padding-left: 38px; }
.inp input, .inp select, .inp textarea, select.sel, input.input, select.input {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--surface); min-width: 0; font-variant-numeric: tabular-nums;
  /* no transition: the focus state shows at once (WebKit draws no box-shadow on native selects, so the border carries it) */
}
.inp input:hover, .inp select:hover, select.sel:hover, input.input:hover { border-color: var(--ink-3); }
.inp input:focus, .inp select:focus, select.sel:focus, input.input:focus, select.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.inp input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.form-error { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--neg-soft); color: var(--neg); font-size: var(--fs-sm); font-weight: 550; }
.fld-error { color: var(--neg); font-size: var(--fs-xs); min-height: 0; }
.fld-error:empty { display: none; }
/* a value shown but never edited there (the personnel code; the sign-in email for a People delegate) */
.inp.locked { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 40px; border: 1px dashed var(--rule-strong); border-radius: var(--r-md); background: var(--surface-3); cursor: default; }
.inp.locked .code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-num); font-weight: 650; letter-spacing: .03em; color: var(--ink); }
.inp.locked .mut { flex: 1; font-size: var(--fs-sm); }
.inp.locked > .icon { position: static; color: var(--ink-4); }
input.invalid, .inp input.invalid { border-color: var(--neg) !important; box-shadow: 0 0 0 3px var(--neg-soft) !important; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-sm); }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-sm); background: var(--surface-3); }
.seg button { border: 0; background: none; padding: 5px 11px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: var(--ink-2); border-radius: 4px; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ===================================================================================== surfaces */
.card, .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.panel { padding: 22px 24px; min-width: 0; }
.panel-h { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin-bottom: 14px; }
.panel-h h2 { font-size: var(--fs-lg); }
.panel-h p { flex-basis: 100%; color: var(--ink-3); font-size: var(--fs-sm); max-width: 80ch; }
.divider { height: 1px; background: var(--rule); border: 0; margin: 18px 0; }

/* ===================================================================================== popovers, menus, dialogs, toasts */
.menu-wrap { position: relative; }
.popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-pop); min-width: 240px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-3);
  padding: 6px; animation: pop-in var(--t-med) var(--ease);
}
.popover.right { left: auto; right: 0; }
@keyframes pop-in { from { transform: translateY(-4px) scale(.98); } to { transform: none; } }
.menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; display: grid; gap: 2px; }
.menu-head b { font-weight: 700; }
.menu-head span { color: var(--ink-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); text-decoration: none; font-size: var(--fs-md); font-weight: 550; cursor: pointer; text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-3); outline: none; }
.menu-item .icon { color: var(--ink-3); width: 17px; height: 17px; }
.menu-item.danger { color: var(--neg); } .menu-item.danger .icon { color: var(--neg); }
.menu-sep { height: 1px; background: var(--rule); margin: 6px 4px; }
dialog.dlg {
  border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 0; width: min(520px, calc(calc(100 * var(--vw)) - 32px));
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
}
dialog.dlg::backdrop { background: rgba(11, 5, 29, .42); backdrop-filter: blur(3px); }
dialog.dlg[open] { animation: pop-in var(--t-med) var(--ease); }
.dlg-h { position: relative; padding: 20px 64px 14px 22px; display: grid; gap: 6px; }
.dlg-h h2 { font-size: var(--fs-xl); }
.dlg-h p { color: var(--ink-3); font-size: var(--fs-sm); }
.dlg-b { padding: 14px 22px 16px; display: grid; gap: 14px; align-content: start; }
.dlg-f { padding: 14px 22px 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* Every dialog with a body: the header (with its close button) and the buttons stay put; only the body scrolls. */
dialog.dlg[open]:has(> .dlg-b), dialog.dlg[open]:has(> form > .dlg-b) { display: flex; flex-direction: column; max-height: min(calc(92 * var(--dvh)), 980px); overflow: hidden; }
dialog.dlg[open] > form:has(> .dlg-b) { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
dialog.dlg > .dlg-h, dialog.dlg > form > .dlg-h { flex: none; border-bottom: 1px solid var(--rule); }
dialog.dlg > .dlg-b, dialog.dlg > form > .dlg-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
dialog.dlg > .dlg-f, dialog.dlg > form > .dlg-f { flex: none; border-top: 1px solid var(--rule); background: color-mix(in oklab, var(--surface-2) 55%, var(--surface)); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.dlg-x { position: absolute; top: 16px; right: 16px; }
.dlg-h > .icon-btn[data-close]:last-child, .dlg-h > .lv-x { position: absolute; top: 16px; right: 16px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); transform: translate(-50%, 20px); opacity: 0;
  max-width: min(560px, calc(calc(100 * var(--vw)) - 32px)); padding: 11px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--surface);
  font-size: var(--fs-sm); font-weight: 550; box-shadow: var(--shadow-3); pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med) var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* shown as a popover (the top layer, above any dialog): undo the browser's popover box */
.toast[popover] { top: auto; right: auto; left: 50%; bottom: 24px; margin: 0; border: 0; overflow: visible; }
.toast.bad { background: var(--neg); color: var(--surface); }
.secret { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunken); border: 1px dashed var(--rule-strong); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-md); word-break: break-all; }

/* ===================================================================================== tables */
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.dtable th { text-align: left; font-weight: 650; color: var(--ink-3); font-size: var(--fs-xs); padding: 0 12px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dtable td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.dtable tr:last-child > td, .dtable tbody tr:last-child > th { border-bottom: 0; }
.dtable tbody tr:hover td { background: var(--surface-2); }

/* ===================================================================================== shell */
/* The sections sidebar (left) and a slim top bar. Wide screens get the full sidebar, medium ones an icon rail, phones
   a menu that slides in. Someone can collapse or expand it; the choice is kept (shell.js, data-sidebar on <html>). */
:root { --sb-w: 272px; --sb-rail: 72px; }
@media (min-width: 900px) { :root[data-sidebar="collapsed"] { --sb-w: var(--sb-rail); } }
@media (min-width: 900px) and (max-width: 1279px) { :root:not([data-sidebar="expanded"]) { --sb-w: var(--sb-rail); } }
body:has(> .sidebar) { padding-left: var(--sb-w); transition: padding-left var(--t-med) var(--ease); }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: calc(var(--z-top) + 2); width: var(--sb-w); display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--rule); transition: width var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  overflow: hidden;
}
.sb-head { display: flex; align-items: center; gap: 8px; height: var(--topbar-h); padding: 0 14px 0 20px; flex: none; border-bottom: 1px solid var(--rule); }
.sb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.sb-brand svg.logo { height: 21px; width: auto; display: block; flex: none; }
.sb-product { font-size: var(--fs-sm); font-weight: 750; letter-spacing: -0.01em; padding-left: 10px; border-left: 1px solid var(--rule-strong); white-space: nowrap; }
.sb-close { display: none; margin-left: auto; }
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 12px 12px; }
.sb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sb-list + .sb-solo, .sb-solo + .sb-solo { margin-top: 2px; }
.sb-list + .sb-group { margin-top: 18px; }
.sb-solo + .sb-group { margin-top: 18px; }
.sb-group { margin: 18px 10px 6px; font-size: var(--fs-2xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sb-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink-2); text-decoration: none; font: inherit; font-size: var(--fs-sm); font-weight: 650; text-align: left;
  white-space: nowrap; cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.sb-item .icon { width: 18px; height: 18px; flex: none; }
.sb-item span { overflow: hidden; text-overflow: ellipsis; }
.sb-item:hover { background: var(--surface-2); color: var(--ink); }
.sb-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.sb-item[aria-current="page"] .icon { color: var(--brand); }
.sb-foot { flex: none; display: grid; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--rule); }
/* The account, at the foot of the sidebar: avatar, name and e-mail; its menu opens upwards. */
.sb-account { position: relative; }
.sb-acct { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-md);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.sb-acct:hover, .sb-acct[aria-expanded="true"] { background: var(--surface-2); border-color: var(--rule); }
.sb-acct .avatar { flex: none; width: 34px; height: 34px; font-size: var(--fs-xs); cursor: inherit; }
.sb-acct-text { display: grid; min-width: 0; line-height: 1.25; }
.sb-acct-text b { font-size: var(--fs-sm); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct-text small { color: var(--ink-3); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct-more { margin-left: auto; flex: none; color: var(--ink-3); }
.popover.up { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; min-width: 240px; }
.sb-collapse { color: var(--ink-3); }
.sb-collapse .icon { transition: transform var(--t-med) var(--ease); }
.sb-scrim { position: fixed; inset: 0; z-index: calc(var(--z-top) + 1); background: rgba(11, 5, 29, .42); backdrop-filter: blur(2px); }

/* The icon rail: labels and group names give way to icons (each item keeps its name as a tooltip). */
.sb-mark { display: none; width: 34px; height: 34px; border-radius: 10px; place-items: center; overflow: hidden; }
.sb-mark img { display: block; width: 34px; height: 34px; }
@media (min-width: 900px) {
  :root[data-sidebar="collapsed"] .sidebar :is(.sb-product, .sb-item span, .sb-tag:not(.sb-count), .sb-group, .sb-brand svg.logo, .sb-acct-text, .sb-acct-more) { display: none; }
  :root[data-sidebar="collapsed"] .sidebar .sb-acct { justify-content: center; padding: 6px 0; }
  /* The rail clips anything wider than itself, so the account menu opens beside it instead of above it. */
  :root[data-sidebar="collapsed"] .sidebar .sb-account .popover.up { position: fixed; left: calc(var(--sb-rail) + 8px); right: auto; top: auto; bottom: 58px; }
  :root[data-sidebar="collapsed"] .sidebar .sb-mark { display: grid; }
  :root[data-sidebar="collapsed"] .sidebar .sb-head { padding: 0; justify-content: center; }
  :root[data-sidebar="collapsed"] .sidebar .sb-list + .sb-group { display: block; height: 1px; margin: 12px 8px; overflow: hidden; color: transparent; background: var(--rule); }
  :root[data-sidebar="collapsed"] .sidebar .sb-item { justify-content: center; padding: 0; position: relative; }
  /* on the rail a count is a small badge on the icon's corner, as on an app icon, so the icon stays centred */
  :root[data-sidebar="collapsed"] .sidebar .sb-tag.sb-count { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px;
    font-size: 9.5px; line-height: 16px; text-align: center; border-radius: 8px; box-shadow: 0 0 0 2px var(--surface); }
  :root[data-sidebar="collapsed"] .sidebar .sb-collapse .icon { transform: rotate(180deg); }
}
@media (min-width: 900px) and (max-width: 1279px) {
  :root:not([data-sidebar="expanded"]) .sidebar :is(.sb-product, .sb-item span, .sb-tag:not(.sb-count), .sb-group, .sb-brand svg.logo, .sb-acct-text, .sb-acct-more) { display: none; }
  :root:not([data-sidebar="expanded"]) .sidebar .sb-acct { justify-content: center; padding: 6px 0; }
  :root:not([data-sidebar="expanded"]) .sidebar .sb-mark { display: grid; }
  :root:not([data-sidebar="expanded"]) .sidebar .sb-head { padding: 0; justify-content: center; }
  :root:not([data-sidebar="expanded"]) .sidebar .sb-list + .sb-group { display: block; height: 1px; margin: 12px 8px; overflow: hidden; color: transparent; background: var(--rule); }
  :root:not([data-sidebar="expanded"]) .sidebar .sb-item { justify-content: center; padding: 0; position: relative; }
  :root:not([data-sidebar="expanded"]) .sidebar .sb-tag.sb-count { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px;
    font-size: 9.5px; line-height: 16px; text-align: center; border-radius: 8px; box-shadow: 0 0 0 2px var(--surface); }
  :root:not([data-sidebar="expanded"]) .sidebar .sb-collapse .icon { transform: rotate(180deg); }
}

.topbar {
  position: sticky; top: 0; z-index: var(--z-top); height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 18px 0 var(--gutter);
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.sb-open, .topbar > .brandmark { display: none; }
.brandmark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; flex: none; }
.brandmark svg.logo { height: 20px; width: auto; display: block; }
.logo-ink { fill: var(--ink); } .logo-mark { fill: var(--logo-blue); }
.topbar .tools { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topbar .end { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), var(--brand-bright)); color: #fff; font-weight: 750; font-size: var(--fs-sm); letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--brand-line);
}
.page { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--gutter) 72px; }

/* Phones and small tablets: the drawer, the app bar and the rest are in the Mobile section at the end. */

/* ===================================================================================== sign-in */
@media (max-width: 900px) {
}

/* ===================================================================================== launcher */
.hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.hello h1 { font-size: var(--fs-3xl); letter-spacing: -0.03em; }
.hello p { color: var(--ink-3); margin-top: 8px; font-size: var(--fs-lg); }
.hello .today { text-align: right; color: var(--ink-3); font-size: var(--fs-sm); }
.hello .today b { display: block; color: var(--ink); font-size: var(--fs-lg); font-weight: 700; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 20px; }
.svc-card {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 22px; min-height: 300px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med);
}
.svc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; z-index: -1; opacity: .9;
  background: radial-gradient(420px 160px at 100% 0%, var(--brand-soft), transparent 70%);
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--brand-line); }
.svc-card:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; }
.svc-top { display: flex; align-items: flex-start; gap: 16px; }
.svc-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(145deg, var(--brand-bright), var(--brand) 60%, #182E73); box-shadow: 0 10px 22px -10px rgba(33, 64, 154, .7); }
.svc-card.alt .svc-ico { background: linear-gradient(145deg, #E39A7C, var(--campaign) 55%, var(--persian)); box-shadow: 0 10px 22px -10px rgba(123, 46, 58, .6); }
.svc-ico .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.svc-name { display: grid; gap: 6px; min-width: 0; }
.svc-name h2 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-card .summary { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.55; max-width: 60ch; }
.svc-facts { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; margin-top: auto; }
.svc-fact { flex: 1 1 160px; background: var(--surface-2); padding: 12px 14px; display: grid; gap: 3px; min-width: 0; }
.svc-fact span { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.svc-fact b { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-fact b.pos { color: var(--pos); } .svc-fact b.neg { color: var(--neg); }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--brand); font-weight: 700; font-size: var(--fs-md); }
.svc-cta .go { display: inline-flex; align-items: center; gap: 6px; transition: gap var(--t-med) var(--ease); }
.svc-card:hover .svc-cta .go { gap: 10px; }
.svc-card.locked { opacity: .7; min-height: 0; box-shadow: none; background: var(--surface-2); }
.svc-card.locked:hover { transform: none; box-shadow: none; border-color: var(--rule); }
.svc-card.add { border-style: dashed; background: transparent; box-shadow: none; min-height: 0; justify-content: center; align-items: flex-start; color: var(--ink-3); }
.svc-card.add::before { display: none; }
.svc-card.add:hover { transform: none; box-shadow: none; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 36px 0 14px; }
.section-title h2 { font-size: var(--fs-md); color: var(--ink-2); }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ===================================================================================== account & admin */
.settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: 2px; }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.settings-nav a:hover { background: var(--surface-3); color: var(--ink); }
.settings-body { display: grid; gap: 20px; min-width: 0; }
.settings-body .panel form { display: grid; gap: 14px; max-width: 460px; }
.note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 20px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.note.warn { background: var(--warn-soft); color: var(--ink); }
.note.warn svg { color: var(--warn); flex: none; margin-top: 2px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mfa-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.mfa-state .pill + .hint { margin-right: auto; }
.mfa-state[data-mfa-off] .btn { margin-left: auto; }
.mfa-steps { display: grid; gap: 18px; padding-left: 20px; font-size: var(--fs-sm); color: var(--ink-2); }
.mfa-steps li { display: grid; gap: 10px; }
.mfa-steps li::marker { font-weight: 700; color: var(--ink); }
.mfa-qr { width: fit-content; padding: 10px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--rule); }
.mfa-qr img { display: block; width: 205px; height: 205px; image-rendering: pixelated; }
.mfa-steps code, .codes li { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-sm); letter-spacing: .04em; word-break: break-all; }
.mfa-codes { display: grid; gap: 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.codes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 28px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--sunken); border: 1px dashed var(--rule-strong); color: var(--ink); }
.sess-list { list-style: none; display: grid; margin-bottom: 14px; }
.sess-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.sess-list li:first-child { border-top: 0; padding-top: 0; }
.sess-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); }
.sess-list b { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: var(--fs-sm); }
.sess-list small { display: block; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.page-head h1 { font-size: var(--fs-2xl); letter-spacing: -0.025em; }
.page-head p { color: var(--ink-3); margin-top: 6px; }
.user-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-cell .avatar { width: 34px; height: 34px; box-shadow: none; font-size: var(--fs-xs); color: #fff; }
.user-cell b { display: block; font-weight: 700; }
.user-cell span { color: var(--ink-3); font-size: var(--fs-xs); }
.role-sel { height: 32px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--rule-strong); background: var(--surface); font-size: var(--fs-sm); }
.table-wrap { position: relative; overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
@media (max-width: 860px) {
  .settings { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; }
  .hello .today { text-align: left; }
}

/* ===================================================================================== error pages */
.empty-state { min-height: calc(calc(100 * var(--vh)) - var(--topbar-h)); display: grid; place-items: center; padding: 40px 20px; text-align: center; }
.empty-state .card { padding: 40px 36px; max-width: 480px; display: grid; gap: 14px; justify-items: center; }
.empty-state .big { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: var(--brand); line-height: 1; }
.empty-state p { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===================================================================================== the loader (js/loader.js) */
.dp-loader { display: grid; justify-items: center; align-content: center; gap: 14px; padding: 48px 16px; text-align: center; color: var(--ink-2); }
.dp-loader[hidden] { display: none; }
.dp-loader.lg { min-height: min(calc(62 * var(--vh)), 560px); }
.dp-loader.sm { padding: 22px 12px; gap: 10px; }
.dp-spiral { width: 96px; height: 96px; overflow: visible; animation: dp-turn 3.2s linear infinite; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent)); }
.dp-loader.sm .dp-spiral { width: 56px; height: 56px; }
.dp-spiral path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dp-spiral .sp-track { stroke: color-mix(in srgb, var(--ink-3) 16%, transparent); stroke-width: 2; }
.dp-spiral .sp-comet { stroke-width: 4.5; stroke-dasharray: 120 480; animation: dp-comet 1.9s cubic-bezier(.45, .05, .35, 1) infinite; }
.dp-spiral stop:first-child { stop-color: var(--brand); }
.dp-spiral stop:last-child { stop-color: #2FB57C; }
.dp-spiral .sp-orbit { transform-origin: 60px 60px; animation: dp-turn 2.4s linear infinite reverse; }
.dp-spiral .sp-orbit circle { fill: var(--brand); opacity: .75; }
.dp-spiral .sp-orbit circle:nth-child(2) { fill: #2FB57C; opacity: .6; }
.dp-spiral .sp-orbit circle:nth-child(3) { fill: #F0A030; opacity: .55; }
.dp-spiral .sp-core { fill: var(--brand); transform-origin: 60px 60px; animation: dp-pulse 1.9s ease-in-out infinite; }
.dp-loader-word { display: inline-flex; align-items: baseline; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; color: var(--ink); min-height: 1.5em; }
.dp-loader.sm .dp-loader-word { font-size: var(--fs-sm); }
.dp-loader-word span { display: inline-block; background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 35%, var(--brand) 50%, var(--ink) 65%, var(--ink) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dp-shine 2.2s linear infinite; transition: opacity .22s, transform .22s; }
.dp-loader-word span.out { opacity: 0; transform: translateY(-6px); }
.dp-loader-word span.in { animation: dp-shine 2.2s linear infinite, dp-rise .26s ease-out; }
.dp-loader-word i { font-style: normal; color: var(--brand); animation: dp-blink 1.2s steps(2, start) infinite; margin-left: 1px; }
.dp-loader-hint { max-width: 46ch; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.dp-loader-hint[hidden] { display: none; }
@keyframes dp-turn { to { transform: rotate(360deg); } }
@keyframes dp-comet { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes dp-pulse { 50% { transform: scale(1.6); opacity: .55; } }
@keyframes dp-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes dp-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dp-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .dp-spiral, .dp-spiral .sp-orbit, .dp-spiral .sp-comet, .dp-spiral .sp-core, .dp-loader-word span, .dp-loader-word i { animation: none; }
  .dp-spiral .sp-comet { stroke-dasharray: none; }
}
.mg-loader { position: absolute; inset: 0; z-index: 5; display: grid; place-items: start center; padding-top: calc(12 * var(--vh)); background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(2px); }
.main:not(.loading) > .mg-loader { display: none; }
.main.loading { position: relative; }
.ai-convs .dp-loader.sm, .ac-panel .dp-loader.sm { padding: 18px 8px; }

/* "Ask Aghaye Doctor" is coming soon (js/soon.js): a card beside what was clicked, with a close button and a bar
   that runs down while it shows (held while hovered or focused) */
.soon-bubble { position: absolute; z-index: var(--z-toast); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
  width: min(320px, calc(calc(100 * var(--vw)) - 24px)); padding: 12px 8px 14px 12px; overflow: hidden;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-3);
  pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med); }
.soon-bubble.on { pointer-events: auto; visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.soon-av { position: relative; width: 38px; height: 38px; border-radius: 50%; padding: 2px; flex: none;
  background: linear-gradient(140deg, var(--brand), color-mix(in oklab, var(--brand) 30%, transparent)); }
.soon-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface); }
.soon-b { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.soon-b small { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.soon-b b { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; }
.soon-b > span { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); }
.soon-x { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.soon-x:hover { background: var(--surface-3); color: var(--ink); }
.soon-x:focus-visible { outline: none; box-shadow: var(--ring); color: var(--ink); }
.soon-x .icon { width: 16px; height: 16px; }
.soon-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.soon-bubble.on .soon-timer { animation: soon-run 4s linear forwards; }
.soon-bubble.on:hover .soon-timer, .soon-bubble.on:focus-within .soon-timer, .soon-bubble.on.held .soon-timer { animation-play-state: paused; }
@keyframes soon-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .soon-bubble { transform: none; } .soon-bubble.on .soon-timer { animation-duration: 6s; } }

/* sections that are coming: dimmer, tagged, not clickable */
.sb-item.sb-soon { color: var(--ink-3); cursor: default; }
.sb-item.sb-soon:hover { background: none; color: var(--ink-3); }
.sb-item.sb-soon .icon { color: var(--ink-4); }
.sb-tag { margin-left: auto; flex: none; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  padding: 4px 7px 3px; border-radius: 999px; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
.sb-nav { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sb-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* CashFlow Simulation: one box per partner programme */
.sim-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sim-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; min-height: 150px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-1); color: var(--ink-3); text-decoration: none; }
.sim-card .sim-mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 22px;
  background: var(--surface-2); color: var(--ink-4); border: 1px solid var(--rule); }
.sim-card .sim-body { display: grid; gap: 6px; }
.sim-card .sim-body b { font-size: var(--fs-md); color: var(--ink-2); }
.sim-card .sim-body small { font-size: var(--fs-sm); line-height: 1.5; }
.sim-card .sb-tag { position: absolute; top: 16px; right: 16px; }
.sim-card.live { color: var(--ink-2); transition: border-color var(--t-fast), transform var(--t-fast); }
.sim-card.live:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--rule)); transform: translateY(-1px); }
.sim-card.live .sim-mark { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.sim-card.live .sim-body b { color: var(--ink); }
.sim-go { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 700; font-size: var(--fs-sm); }

/* every dropdown draws its own chevron, a comfortable step in from the right edge */
select, .inp select, select.sel, select.input { -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A97AE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; }
select[multiple] { padding-right: 12px; background-image: none; }

@media (max-width: 899px) { .sb-fab { z-index: calc(var(--z-top) + 5); } }
/* While the drawer is open only its × closes it: the menu button would sit on the logo. */
:root.sb-is-open .sb-fab, :root.sb-is-open .m-appbar [data-m-menu] { visibility: hidden; }

/* CashFlow Simulation boxes: calm cards, one height, a thin line in each partner's colour */
.sim-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.sim-grid > li { display: flex; }
.sim-card { --hue: 230; --tone: hsl(var(--hue) 70% 66%); flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 220px; padding: 22px 20px 20px;
  background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--tone); box-shadow: var(--shadow-1); }
.sim-card .sim-mark { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; font-weight: 800; color: var(--tone);
  background: hsl(var(--hue) 60% 60% / .12); border: 1px solid hsl(var(--hue) 60% 60% / .22); }
.sim-card .sim-body { flex: 1; align-content: start; }
.sim-card .sim-body b { font-size: var(--fs-md); color: var(--ink); }
.sim-card .sim-body small { color: var(--ink-3); }
.sim-card .sb-tag { top: 20px; right: 18px; }
.sim-card.live .sim-body small { color: var(--ink-2); }
.sim-card.live:hover { transform: none; border-color: hsl(var(--hue) 60% 60% / .45); border-top-color: var(--tone); background: var(--surface-2); }
.sim-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--tone); font-weight: 700; font-size: var(--fs-sm); padding: 0; background: none; border: 0; }
.sim-soon { margin-top: auto; color: var(--ink-4); font-size: var(--fs-xs); }
.sim-card.sim-momgene { --hue: 300; } .sim-card.sim-novin-irana { --hue: 175; } .sim-card.sim-arta-dental { --hue: 210; } .sim-card.sim-mom-clinic { --hue: 345; }
.sim-card.live .sim-mark { color: var(--tone); background: hsl(var(--hue) 60% 60% / .12); border-color: hsl(var(--hue) 60% 60% / .22); }

/* ---------------------------------------------------------------- sign in, redesigned */



/* ---- the mini loader: a turning asterisk and a word that keeps changing (js/loader.js: mini(), spin()) ---- */
.dp-mini { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; }
.dp-star { display: inline-block; font-style: normal; font-size: 15px; line-height: 1; color: var(--brand); animation: dp-star-turn 1.6s linear infinite, dp-star-glow 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
.dp-mini-word { display: inline-block; transition: opacity .18s ease, transform .18s ease; }
.dp-mini-word.out { opacity: 0; transform: translateY(4px); }
.dp-mini-dots { font-style: normal; letter-spacing: 1px; animation: dp-dots 1.2s steps(4, end) infinite; }
@keyframes dp-star-turn { to { transform: rotate(360deg); } }
@keyframes dp-star-glow { 0%, 100% { color: var(--brand); text-shadow: 0 0 0 transparent; } 50% { color: color-mix(in srgb, var(--brand) 60%, #fff); text-shadow: 0 0 10px color-mix(in srgb, var(--brand) 60%, transparent); } }
@keyframes dp-dots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
/* a skeleton of the widget to come, with a light sweeping across it */
.dp-skel { position: relative; overflow: hidden; }
.dp-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--brand) 7%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: dp-sweep 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes dp-sweep { to { transform: translateX(100%); } }
.dp-bar { display: block; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--ink-3) 14%, transparent); }
.dp-bar.lg { height: 22px; width: 55%; } .dp-bar.sm { width: 38%; } .dp-bar.xs { height: 8px; width: 70%; }
@media (prefers-reduced-motion: reduce) { .dp-star, .dp-skel::after, .dp-mini-dots { animation: none; } }

/* ===================================================================================== switch
   An on/off control: <span class="switch"><input type="checkbox"><i></i></span>. */
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 11px; background: var(--rule-strong); transition: background var(--t-fast); pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--t-fast); }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:disabled + i { opacity: .45; }
.switch.via i { opacity: .55; }
.switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ===================================================================================== empty states
   One way to say "nothing here yet" everywhere: an icon on a soft tile, what this is, why it is empty, and
   when or how it fills in (dom.js emptyHtml, templates/_empty.html). .sm inside cards, .inline for a list row,
   .ok for "all quiet", .warn for "needs attention". */
.dp-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 30px 20px; color: var(--ink-3); }
.dp-empty-ic { position: relative; flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in oklab, var(--brand) 11%, var(--surface-2)); color: var(--brand); animation: dp-empty-float 5s ease-in-out infinite; }
.dp-empty-ic::before { content: ""; position: absolute; inset: -6px; border-radius: 23px; border: 1px dashed color-mix(in oklab, var(--brand) 38%, transparent); }
.dp-empty-ic .icon { width: 24px; height: 24px; }
.dp-empty-b { display: grid; gap: 4px; max-width: 48ch; justify-items: center; }
.dp-empty b { color: var(--ink); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }
.dp-empty p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.dp-empty small { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); font-size: var(--fs-2xs); color: var(--ink-3); }
.dp-empty small .icon { width: 12px; height: 12px; color: var(--ink-4); }
.dp-empty .btn, .dp-empty a.btn { margin-top: 8px; text-decoration: none; }
.dp-empty.ok .dp-empty-ic { background: var(--pos-soft); color: var(--pos); } .dp-empty.ok .dp-empty-ic::before { border-color: color-mix(in oklab, var(--pos) 40%, transparent); }
.dp-empty.warn .dp-empty-ic { background: var(--warn-soft); color: var(--warn); } .dp-empty.warn .dp-empty-ic::before { border-color: color-mix(in oklab, var(--warn) 45%, transparent); }
.dp-empty.sm { padding: 18px 12px; gap: 9px; }
.dp-empty.sm .dp-empty-ic { width: 42px; height: 42px; border-radius: 13px; } .dp-empty.sm .dp-empty-ic::before { inset: -4px; border-radius: 17px; } .dp-empty.sm .dp-empty-ic .icon { width: 18px; height: 18px; }
.dp-empty.sm b { font-size: var(--fs-sm); } .dp-empty.sm p { font-size: var(--fs-xs); }
.dp-empty.inline { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 12px; padding: 10px 2px; }
.dp-empty.inline .dp-empty-ic { width: 36px; height: 36px; border-radius: 11px; animation: none; } .dp-empty.inline .dp-empty-ic::before { inset: -3px; border-radius: 14px; } .dp-empty.inline .dp-empty-ic .icon { width: 16px; height: 16px; }
.dp-empty.inline .dp-empty-b { justify-items: start; gap: 2px; } .dp-empty.inline b { font-size: var(--fs-sm); } .dp-empty.inline p { font-size: var(--fs-xs); } .dp-empty.inline small { margin-top: 2px; }
.dp-empty-host { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); margin-bottom: 14px; }
.dp-empty-host[hidden] { display: none; }
@keyframes dp-empty-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dp-empty-ic { animation: none; } }

/* ask(): the platform's confirmation dialog */
dialog.dlg.dp-ask { width: min(460px, calc(calc(100 * var(--vw)) - 32px)); }
.dp-ask-h { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 10px; }
.dp-ask-h > div { display: grid; gap: 8px; min-width: 0; }
.dp-ask-h p { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.dp-ask-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-bright); }
.dp-ask-ic.danger { background: var(--neg-soft); color: var(--neg); }

/* Jalali date fields (jdate.js): typed as 1405/07/25 or picked on a Jalali calendar, Saturday first */
.inp.jd { position: relative; }
.inp.jd .jd-text { flex: 1; min-width: 0; padding-right: 44px; font-family: var(--font-num); letter-spacing: .02em; }
.inp.jd .jd-text[aria-invalid="true"] { border-color: var(--neg); box-shadow: 0 0 0 3px var(--neg-soft); }
.jd-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; }
.jd-btn:hover { background: var(--surface-3); color: var(--ink); }
.jd-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.jd-pop { position: fixed; z-index: var(--z-pop); width: 292px; padding: 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-3); display: grid; gap: 10px; }
.jd-head { display: flex; align-items: center; gap: 6px; }
.jd-pop .jd-month { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 650; }
.jd-pop .jd-year { width: 72px; height: 32px; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--surface-2); color: var(--ink); font-family: var(--font-num); font-size: var(--fs-sm); }
.jd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jd-wd { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--ink-4); padding: 4px 0; }
.jd-cell { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-family: var(--font-num); font-size: var(--fs-sm); cursor: pointer; }
.jd-cell.empty { cursor: default; }
button.jd-cell:hover { background: var(--surface-3); color: var(--ink); }
.jd-cell.today { box-shadow: inset 0 0 0 1px var(--brand); color: var(--ink); }
.jd-cell.on { background: var(--brand); color: #fff; font-weight: 700; }
button.jd-cell:disabled { color: var(--ink-4, var(--ink-3)); opacity: .4; cursor: not-allowed; background: transparent; }
.jd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.jd-cal-note { font-size: var(--fs-2xs); color: var(--ink-4); }

/* a count on a sidebar item (e.g. leave requests awaiting your approval) */
.sb-tag.sb-count { letter-spacing: 0; font-size: 10px; padding: 3px 7px; color: #1a1205; background: var(--warn); border-color: transparent; }

/* ---------------------------------------------------------------- tabs: one look across the platform
   The Analytics navigation's pills: page sections (.ga-nav with labelled groups, .dash-tabs, .pp-tabs, .ac-tabs)
   and the studios' two pages (.ms-tabs). The current one is tinted with the brand. */
.ga-nav, .dash-tabs, .pp-tabs, .ac-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; padding: 4px 0 12px; margin: 4px 0 14px; border-bottom: 1px solid var(--rule); }
.ga-nav { gap: 10px 22px; }
.ga-nav-group { display: grid; gap: 6px; }
.ga-nav-label { font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-left: 4px; white-space: nowrap; }
.ga-nav-items { display: flex; flex-wrap: wrap; gap: 4px; }
.ms-tabs { display: inline-flex; gap: 4px; }
.ga-nav-item, .dash-tabs > a, .pp-tab, .ac-tabs > button, .ms-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 650; line-height: 1.3;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.ga-nav-item:hover, .dash-tabs > a:hover, .pp-tab:hover, .ac-tabs > button:hover, .ms-tab:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }
:is(.ga-nav-item, .dash-tabs > a, .pp-tab, .ms-tab)[aria-current="page"], .ac-tabs > button[aria-selected="true"] {
  color: var(--ink); background: color-mix(in oklab, var(--brand) 18%, transparent); border-color: color-mix(in oklab, var(--brand) 40%, transparent); }
:is(.ga-nav-item, .dash-tabs > a, .pp-tab, .ac-tabs > button, .ms-tab) .icon { width: 15px; height: 15px; }
:is(.ga-nav-item, .dash-tabs > a, .pp-tab, .ac-tabs > button, .ms-tab):focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------------------------------------------------------------- "done": one look wherever something is complete
   A deep green disc, a soft ring, a bold white tick (steps, timelines, ticked boxes). */
:root { --done-bg: linear-gradient(150deg, #34c47c 0%, #16935a 100%); --done-ring: 0 0 0 4px color-mix(in oklab, #22b06c 22%, transparent); --done-edge: #1fa866; }
.is-done-dot { background: var(--done-bg) !important; border-color: var(--done-edge) !important; color: #fff !important; box-shadow: var(--done-ring), inset 0 1px 0 rgba(255, 255, 255, .25); }
.is-done-dot .icon { stroke-width: 3; width: 60%; height: 60%; }

/* the page the app shows with no network */
.offline-page { margin: 0; min-height: calc(100 * var(--dvh)); display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; background: radial-gradient(90% 60% at 50% 0%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 70%), var(--bg, #0B0B14); color: var(--ink); font-family: var(--font); }
.offline-card { width: min(440px, 100%); box-sizing: border-box; display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center; padding: 36px 28px 28px; border: 1px solid var(--rule); border-radius: var(--r-lg, 14px); background: var(--surface); box-shadow: var(--shadow-3, 0 20px 50px rgba(0, 0, 0, .35)); }
.offline-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--rule); margin-bottom: 4px; }
.offline-chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 99px; font-size: var(--fs-2xs); font-weight: 750; letter-spacing: .02em; color: var(--warn); background: color-mix(in oklab, var(--warn) 12%, transparent); border: 1px solid color-mix(in oklab, var(--warn) 35%, transparent); }
.offline-chip i { width: 7px; height: 7px; border-radius: 99px; background: currentColor; animation: offline-pulse 1.6s ease-in-out infinite; }
@keyframes offline-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .offline-chip i { animation: none; } }
.offline-card h1 { margin: 4px 0 0; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.offline-card p { color: var(--ink-3); line-height: 1.6; margin: 0; max-width: 34ch; }
.offline-btn { margin-top: 8px; min-width: 160px; justify-content: center; }
.offline-foot { color: var(--ink-4); font-size: var(--fs-2xs); line-height: 1.5; margin-top: 4px; }

/* soft navigation: a thin bar at the top while the next page is fetched */
.nav-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 40%, #9C7BF2)); box-shadow: 0 0 10px color-mix(in oklab, var(--brand) 60%, transparent); }
.nav-progress.on { opacity: 1; animation: nav-go 6s cubic-bezier(.1, .7, .2, 1) forwards; }
.nav-progress.done { opacity: 0; transform: scaleX(1); transition: opacity .35s .1s, transform .15s; }
@keyframes nav-go { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
/* in-app moves animate through soft navigation (nav.js); full page loads are not animated */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

/* ===================================================================================== touch screens */
/* A finger needs about 44px: on touch screens buttons and menu items grow to it (small ones to 36px, so tables
   stay readable). A mouse keeps the denser sizes above. */
@media (pointer: coarse) {
  .btn, .icon-btn, .sb-item, .menu-item, .seg button, .tab, [role="tab"] { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .btn.sm, .card-seg button { min-height: 36px; }
  .check input, .checklist input { width: 20px; height: 20px; }
}

/* ===================================================================================== puzzle layout (masonry.js) */
.is-packed { grid-auto-rows: 2px; row-gap: 0 !important; grid-auto-flow: row dense; align-items: start; }
.is-packed > * { margin-bottom: var(--pack-gap, 14px); align-self: start; }

/* ---------------------------------------------------------------- CashFlow Simulation: the programmes as a table */
.sim-panel { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); padding: 6px 20px; }
.sim-panel .table-wrap { margin: 0 -20px; padding: 0 20px; }
.sim-table { width: 100%; border-collapse: collapse; }
.sim-table th { padding: 14px 12px 10px; color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: left; border-bottom: 1px solid var(--rule); }
.sim-table td { padding: 16px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.sim-table tbody tr:last-child td { border-bottom: 0; }
.sim-table th.right, .sim-table td.right { text-align: right; }
.sim-row { --hue: 230; --tone: hsl(var(--hue) 70% 66%); }
.sim-row.sim-momgene { --hue: 300; } .sim-row.sim-novin-irana { --hue: 175; } .sim-row.sim-arta-dental { --hue: 210; } .sim-row.sim-mom-clinic { --hue: 345; }
.sim-row.live { cursor: pointer; }
.sim-row.live:hover td { background: hsl(var(--hue) 60% 60% / .06); }
.sim-name { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.sim-name .sim-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; font-weight: 800; font-size: 16px; color: var(--tone); background: hsl(var(--hue) 60% 60% / .12); box-shadow: inset 0 0 0 1px hsl(var(--hue) 60% 60% / .25); }
.sim-row:not(.live) .sim-mark { filter: saturate(.55); opacity: .8; }
.sim-name b { font-size: var(--fs-sm); color: var(--ink); }
.sim-link { color: inherit; text-decoration: none; }
.sim-link::after { content: ""; position: absolute; inset: 0; } /* the whole row opens it */
.sim-row.live { position: relative; }
.sim-about { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; min-width: 280px; }
.sim-row:not(.live) .sim-about { color: var(--ink-3); }
.sim-state { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px 0 9px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; }
.sim-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sim-state.live { color: var(--pos); background: color-mix(in oklab, var(--pos) 14%, transparent); }
.sim-state.live i { box-shadow: 0 0 0 3px color-mix(in oklab, var(--pos) 25%, transparent); }
.sim-state.soon { color: var(--ink-3); background: var(--surface-3); }
.sim-open { position: relative; z-index: 1; white-space: nowrap; background: var(--tone); color: #0b0b14; }
.sim-open:hover { filter: brightness(1.08); }
.sim-later { color: var(--ink-4); font-size: var(--fs-xs); white-space: nowrap; }
@media (max-width: 760px) { .sim-table th:nth-child(2), .sim-table td.sim-about { display: none; } }
/* The To-do Board's count in the sidebar: my open tasks (red once one is late); done ones drop out */
.sb-tag.sb-count.td-badge { color: var(--ink); background: color-mix(in oklab, var(--brand) 28%, transparent); font-variant-numeric: tabular-nums; transition: transform .16s ease-out; }
.sb-tag.sb-count.td-badge.late { color: #fff; background: #FF2D46; font-weight: 800; }
.sb-tag.sb-count.td-badge[hidden] { display: none; }
.sb-tag.sb-count.td-badge.bump { transform: scale(1.18); }

/* ---------------------------------------------------------------- Aghaye Doctor's insight (one form everywhere: js/insight.js)
   The title line: a small face right beside the title, "by Aghaye Doctor", the day. */
.ins-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-tface { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--rule-strong); }
.ins-by, .ins-day { padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 650; line-height: 1.5; white-space: nowrap; }
.ins-by { background: color-mix(in srgb, var(--s4) 18%, transparent); color: color-mix(in oklab, var(--s4) 62%, var(--ink)); } /* readable on dark and light (axe 4.5:1) */
.ins-day { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink-2); }
.ins-day:empty { display: none; }
.ins-by ~ .ins-day, .ins-by ~ .card-tag { margin-left: -5px; } /* the tags sit 3px apart */
.chart-card:has(.ins-think) .ins-tface { display: none; } /* while he writes, the face thinks in the body */
/* The reading. Minimal: the headline, "What to do" as a numbered list (it stands out by weight and its numbers, not a box), the
   findings folded under "Why", one quiet line for when it was written. One spacing scale: 8 / 12 / 16. */
.ins { display: grid; gap: 16px; }
.ins-head { margin: 0; max-width: 72ch; color: var(--ink); font-size: var(--fs-md); font-weight: 600; line-height: 1.5; }
.ins-label { margin: 0 0 8px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ins-do { padding-left: 14px; border-left: 2px solid var(--brand); }
.ins-do .ins-label { color: var(--brand-strong, var(--brand)); }
.ins-do ol, .ins-more { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ins-do li, .ins-more li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.ins-n { color: var(--brand-strong, var(--brand)); font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.ins-do li p, .ins-more li p { margin: 0; max-width: 72ch; color: var(--ink); font-size: calc(var(--fs-sm) + 1px); font-weight: 600; line-height: 1.5; }
.ins-own { color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; text-transform: capitalize; }
.ins-why { border-top: 1px solid var(--rule); padding-top: 12px; }
.ins-why summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 650; }
.ins-why summary::-webkit-details-marker { display: none; }
.ins-why summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.ins-why[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.ins-why summary span { color: var(--ink-3); font-weight: 500; }
.ins-why summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.ins-why[open] > :not(summary) { margin-top: 12px; }
.ins-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ins-pts li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: baseline; max-width: 80ch; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.ins-pts li i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4, var(--ink-3)); transform: translateY(-1px); }
.ins-pts li.pos i { background: var(--pos); } .ins-pts li.neg i { background: var(--neg); } .ins-pts li.warn i { background: var(--warn); }
.ins-pts li b, .ins-do li b, .ins-more li b { font-family: inherit; font-weight: 700; color: var(--ink); }
.ins-meta, .ins-none { margin: 0; color: var(--ink-3); font-size: var(--fs-2xs); line-height: 1.5; }
.ins-none { font-size: var(--fs-sm); }

/* thinking: his avatar in one thin turning ring, breathing; a line saying what he is doing; three lines taking shape */
.ins-think { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 4px 0; }
.ins-think-b p { margin: 0; display: inline-flex; align-items: center; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.ins-orbit { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.ins-orbit .ins-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; animation: ins-breathe 2.6s ease-in-out infinite; }
.ins-orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--brand);
  border-right-color: color-mix(in oklab, var(--brand) 35%, transparent); animation: ins-spin 1.4s linear infinite; }
.ins-orbit.xs { width: 22px; height: 22px; } .ins-orbit.xs .ins-face { width: 16px; height: 16px; } .ins-orbit.xs::before { border-width: 1px; }
.ins-ghost { display: grid; gap: 7px; margin-top: 10px; max-width: 420px; }
.ins-ghost i { position: relative; display: block; height: 7px; border-radius: 4px; overflow: hidden; background: color-mix(in oklab, var(--ink) 7%, transparent); }
.ins-ghost i:nth-child(1) { width: 86%; } .ins-ghost i:nth-child(2) { width: 64%; } .ins-ghost i:nth-child(3) { width: 74%; }
.ins-ghost i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: ins-shimmer 1.6s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brand) 30%, transparent), transparent); }
.ins-ghost i:nth-child(2)::after { animation-delay: .2s; } .ins-ghost i:nth-child(3)::after { animation-delay: .4s; }
.ins-dots { display: inline-flex; gap: 3px; margin-left: 6px; }
.ins-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; animation: ins-dot 1.2s ease-in-out infinite; }
.ins-dots i:nth-child(2) { animation-delay: .2s; } .ins-dots i:nth-child(3) { animation-delay: .4s; }

/* one quiet line above a reading that stays on screen: being updated, or the update didn't finish */
.ins-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }
.ins-status small { color: var(--ink-3); font-weight: 500; }
.ins-status small::before { content: "·"; margin-right: 8px; }
.ins-warn { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.ins-status.failed { color: var(--warn); }
@keyframes ins-spin { to { transform: rotate(360deg); } }
@keyframes ins-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ins-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@keyframes ins-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ins-orbit::before, .ins-orbit .ins-face, .ins-dots i, .ins-ghost i::after { animation: none; } }

/* =====================================================================================================
   MOBILE: the platform as a native-feeling app on phones and small tablets.
   The spec is docs/MOBILE-APP.md; js/mobile.js builds the chrome (status band, app bar, tab bar, sheets' drag,
   tables as cards, filter sheets). NOTHING here applies at 900px and wider: every rule is inside a max-width query
   (or styles an element that only exists on narrow screens).

   Layers
     ≤899px  the app layer: the sidebar as a drawer, the app bar and status band, safe areas, gutters, large titles,
             section tabs (sticky), press feedback, scroll locking, toasts.
     ≤640px  the phone layer: the floating tab bar, every dialog/drawer/menu/date picker as a bottom sheet, tables
             as cards, filters in a sheet, 16px/48px form fields, KPI tiles, chart cards, sticky action bars.

   Global classes (no-ops at 900px+; safe to add to any page's markup):
     .m-only / .m-hide       shown only on phones (≤640) / hidden on phones
     .m-tabs                 a row of section tabs: chips that scroll sideways, sticky under the bar
     .m-seg                  a segmented control that takes the full width
     .m-kpis / .m-swipe      KPI tiles two-up / a sideways carousel that snaps
     .m-card, .m-rows/.m-row an inset card / a grouped list of tappable rows (icon, text, value, chevron)
     .m-chart                a chart card sized for a phone
     .m-actionbar            a form's sticky bottom bar (above the tab bar and the home indicator)
     .m-section              a section heading row (title + one action)
     .m-press                press feedback on anything tappable that has no other
     .m-full (on a dialog)   a full-height sheet (long forms)
   ===================================================================================================== */
:root {
  --m-bar-h: 0px; --m-tab-h: 0px; --m-sticky-top: 0px; --m-bar-core: 52px;
  --m-safe-t: env(safe-area-inset-top, 0px); --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-safe-l: env(safe-area-inset-left, 0px); --m-safe-r: env(safe-area-inset-right, 0px);
  --m-gut: 16px; --m-gut-l: max(var(--m-gut), var(--m-safe-l)); --m-gut-r: max(var(--m-gut), var(--m-safe-r));
  --m-r-tile: 16px; --m-r-card: 20px; --m-r-sheet: 24px;
  --m-press: color-mix(in oklab, var(--ink) 9%, transparent);
  --m-scrim: rgba(5, 3, 14, .56);
  --m-glass: color-mix(in srgb, var(--paper) 80%, transparent);
  --m-spring: cubic-bezier(.3, 1.3, .5, 1); --m-out: cubic-bezier(.22, 1, .36, 1);
  /* the bar and the band under the status bar: see-through at rest, frosted once the page scrolls (dark) */
  --m-chrome-rest: transparent; --m-chrome: var(--m-glass); --m-chrome-ink: var(--ink); --m-chrome-rule: var(--rule);
}
/* Light theme: iOS draws the status bar's text white (black-translucent), so the band behind it is the brand blue */
:root[data-theme="light"] { --m-chrome-rest: var(--brand); --m-chrome: var(--brand); --m-chrome-ink: var(--brand-ink); --m-chrome-rule: transparent; --m-scrim: rgba(11, 5, 29, .42); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --m-chrome-rest: var(--brand); --m-chrome: var(--brand); --m-chrome-ink: var(--brand-ink); --m-chrome-rule: transparent; } }
.m-appbar, .m-tabbar, .m-only { display: none; }
/* built by mobile.js on a phone; a window widened past 640px keeps them but doesn't show them (the phone layer does) */
.m-filterbar, .m-fold { display: none; }

/* ===================================================================================== ≤899px: the app layer */
@media (max-width: 899px) {
  :root { --sb-w: 0px; --m-gut: 24px; --m-sticky-top: var(--m-bar-h); }
  html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; scroll-padding-top: calc(var(--m-sticky-top) + 64px); }
  /* a sheet, the drawer or the filters are up: the page under them stays still */
  html:has(dialog[open]:modal), :root.sb-is-open, :root.m-fs-on { overflow: hidden; }
  :root.sb-is-open body, :root.m-fs-on body { overflow: hidden; }

  /* ---------------------------------------------------------------- the drawer (the sidebar, opened by More) */
  /* Hidden (not just moved away) while closed, so it is out of the tab order and away from screen readers. */
  .sidebar {
    width: min(320px, calc(86 * var(--vw))); transform: translateX(-104%); visibility: hidden; z-index: calc(var(--z-top) + 8);
    padding: var(--m-safe-t) 0 var(--m-safe-b) var(--m-safe-l); border-right: 0; border-radius: 0 var(--m-r-sheet) var(--m-r-sheet) 0;
    box-shadow: none; transition: transform .32s var(--m-out), visibility 0s .32s; touch-action: pan-y;
  }
  :root.sb-is-open .sidebar { transform: translateX(var(--m-drag-x, 0px)); visibility: visible; box-shadow: var(--shadow-3); transition: transform .32s var(--m-out); }
  .sidebar.m-dragging { transition: none !important; }
  .sb-scrim { z-index: calc(var(--z-top) + 7); background: var(--m-scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: m-fade var(--t-med) ease-out; }
  .sb-head { height: 64px; padding: 0 10px 0 20px; border-bottom: 0; }
  .sidebar .sb-close { display: inline-grid; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); }
  .sb-brand { min-height: 44px; }
  .sb-nav { padding: 4px 12px 16px; overscroll-behavior: contain; }
  .sb-group { margin: 22px 12px 8px; font-size: var(--fs-2xs); }
  .sb-list { gap: 2px; }
  .sb-item { height: 48px; gap: 14px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
  .sb-item .icon { width: 20px; height: 20px; color: var(--ink-3); }
  .sb-item[aria-current="page"] .icon { color: var(--brand); }
  .sb-foot { padding: 10px 12px 12px; border-top: 1px solid var(--rule); }
  .sb-foot .sb-collapse { display: none; }
  .sb-acct { min-height: 60px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface-2); }
  .sb-acct .avatar { width: 38px; height: 38px; }
  .sb-acct-text b { font-size: 15px; }
  .sb-acct-text small { font-size: var(--fs-xs); }
  .sb-account .popover.up { left: 0; right: 0; min-width: 0; border-radius: 18px; padding: 8px; }
  .sb-account .popover.up .menu-item { min-height: 48px; border-radius: 12px; font-size: 15px; }
  /* the floating menu button of wider screens; the app bar replaces it once mobile.js has built it */
  .sb-open { display: inline-grid; margin-left: -6px; }
  .topbar > .brandmark { display: flex; }
  .sb-fab { position: fixed; top: calc(10px + var(--m-safe-t)); left: max(10px, var(--m-safe-l)); z-index: calc(var(--z-top) + 5); margin: 0; width: 44px; height: 44px; border-radius: 14px;
    background: var(--m-glass); border: 1px solid var(--rule); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-1); }
  .topbar { padding-left: 64px; }
  body:not(:has(.topbar)) .page { padding-top: calc(64px + var(--m-safe-t)); }

  /* ---------------------------------------------------------------- the app bar (and the band under the status bar)
     Always there: at rest on a section's home it is only the status bar's band; on a sub-page it holds Back (with
     the section's name) and the page's title, which fades in once the large title has scrolled under it. */
  :root.m-has-bar { --m-bar-h: calc(var(--m-safe-t) + var(--m-bar-core)); --topbar-h: var(--m-bar-h); }
  .m-appbar {
    position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-top) + 4); display: grid; align-items: center; gap: 4px;
    grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
    height: calc(var(--m-safe-t) + var(--m-bar-core)); padding: var(--m-safe-t) max(6px, var(--m-safe-r)) 0 max(6px, var(--m-safe-l)); overflow: hidden;
    color: var(--m-chrome-ink); background: var(--m-chrome-rest); box-shadow: 0 1px 0 transparent;
    transition: height .28s var(--m-out), background-color var(--t-med), box-shadow var(--t-med);
  }
  :root.m-scrolled .m-appbar { background: var(--m-chrome); box-shadow: 0 1px 0 var(--m-chrome-rule); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); }
  .m-ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; color: inherit;
    font: inherit; font-size: var(--fs-lg); font-weight: 550; cursor: pointer; text-decoration: none; transition: transform var(--t-fast), background-color var(--t-fast); }
  .m-ab-btn[hidden] { display: none; }
  .m-ab-btn:active { background: var(--m-press); transform: scale(.94); }
  .m-ab-btn .icon { width: 24px; height: 24px; stroke-width: 2.2; }
  .m-appbar > [data-m-back], .m-appbar > [data-m-menu] { grid-column: 1; grid-row: 1; justify-self: start; }
  .m-appbar > [data-m-back] { max-width: 100%; padding: 0 8px 0 2px; color: var(--brand-bright); }
  :root[data-theme="light"] .m-appbar > [data-m-back] { color: inherit; }
  .m-appbar > [data-m-back] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the title hidden (at rest): its column folds away and Back takes the room; both showing, the title takes at most
     half the bar and Back's label ellipsizes in what is left */
  .m-appbar:not(.m-titled) { grid-template-columns: minmax(44px, 1fr) 0 44px; }
  .m-appbar.m-titled { grid-template-columns: minmax(44px, 1fr) fit-content(50%) minmax(44px, 1fr); }
  .m-ab-title { grid-column: 2; grid-row: 1; margin: 0; min-width: 0; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(6px); transition: opacity var(--t-med), transform var(--t-med) var(--m-out); }
  .m-appbar.m-titled .m-ab-title { opacity: 1; transform: none; }
  .m-ab-me { grid-column: 3; grid-row: 1; justify-self: end; }
  .m-ab-me .avatar { width: 32px; height: 32px; font-size: var(--fs-2xs); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--brand-line); cursor: inherit; }
  :root.m-has-bar .sb-fab { display: none; }
  :root.m-has-bar body { padding-top: var(--m-bar-h); }
  :root.sb-is-open .m-appbar [data-m-menu] { visibility: hidden; }
  /* a page with no app bar (signed out, the error pages): only the band under the status bar */
  body:not(:has(> .sidebar))::before { content: ""; position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-top) + 4); height: var(--m-safe-t); pointer-events: none; background: var(--m-chrome-rest); transition: background-color var(--t-med); }
  :root.m-scrolled body:not(:has(> .sidebar))::before { background: var(--m-chrome); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); }
  /* a page's own tools (``tools`` in _shell.html): one row under the bar, sideways if it must */
  /* no backdrop filter here: it would make the bar the box its menus (fixed, at the bottom) are placed in */
  :root.m-has-bar .topbar { position: sticky; top: var(--m-sticky-top); min-height: 54px; height: auto; padding: 0 var(--m-gut-r) 0 var(--m-gut-l); backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); border-bottom: 1px solid var(--rule); }
  :root.m-has-bar .topbar > .brandmark, :root.m-has-bar .topbar > .sb-open { display: none; }
  .topbar .tools:empty { display: none; }
  .topbar .tools:not(:empty) { gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  :root.m-has-bar .topbar .tools:not(:empty) { order: 0; flex: 1 1 auto; border-top: 0; min-height: 54px; }
  :root.m-has-bar body:has(.topbar .tools:not(:empty)) { --topbar-h: calc(var(--m-bar-h) + 54px); }

  /* ---------------------------------------------------------------- the page: gutters and the large title */
  .page { padding: 16px var(--m-gut-r) 40px var(--m-gut-l); }
  :root.m-has-bar body:not(:has(.topbar)) .page { padding-top: 16px; }
  .page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .page-head h1 { font-size: clamp(28px, calc(8 * var(--vw)), 34px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
  .page-head p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
  .page-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--fs-2xs); }
  .page-head :is(.fresh, .m-fresh) { align-self: flex-start; max-width: 100%; white-space: normal; }
  /* a module's .fresh chip wraps as one run of text (as a flex box its words and figures broke into columns) */
  .page-head .fresh:not([hidden]) { display: block; width: fit-content; border-radius: 16px; line-height: 1.35; white-space: normal; }
  .page-head .fresh > i { display: inline-block; margin-right: 8px; vertical-align: 0; }
  .page-head .fresh b { white-space: nowrap; }
  .m-fresh { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 12px 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--rule);
    color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }
  .m-fresh i { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px color-mix(in oklab, var(--pos) 22%, transparent); flex: none; }
  .m-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
  .m-section h2 { font-size: var(--fs-xl); letter-spacing: -0.02em; }

  /* ---------------------------------------------------------------- section tabs: chips in one row, sticky under the bar */
  .ga-nav, .dash-tabs, .pp-tabs, .ac-tabs, .m-tabs, .ms-tabs {
    position: sticky; top: var(--m-sticky-top); z-index: calc(var(--z-sticky) + 1); display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    margin: 0 calc(-1 * var(--m-gut-r)) 16px calc(-1 * var(--m-gut-l)); padding: 8px var(--m-gut-r) 10px var(--m-gut-l); scroll-padding-inline: var(--m-gut-l);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; border-bottom: 1px solid transparent;
    background: var(--paper); transition: border-color var(--t-med), box-shadow var(--t-med);
  }
  :is(.ga-nav, .dash-tabs, .pp-tabs, .ac-tabs, .m-tabs, .ms-tabs).m-stuck { border-bottom-color: var(--rule); box-shadow: 0 8px 16px -14px rgba(0, 0, 0, .5); }
  :is(.ga-nav, .dash-tabs, .pp-tabs, .ac-tabs, .m-tabs, .ms-tabs)[data-m-static] { position: static; }
  :is(.ga-nav, .dash-tabs, .pp-tabs, .ac-tabs, .m-tabs, .ms-tabs)::-webkit-scrollbar { display: none; }
  .ga-nav-group, .ga-nav-items { display: contents; }
  .ga-nav-label { display: none; }
  :is(.ga-nav-item, .dash-tabs > a, .pp-tab, .ac-tabs > button, .m-tabs > :is(a, button), .ms-tabs > .ms-tab) {
    flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); white-space: nowrap;
    border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-md); font-weight: 650; text-decoration: none; cursor: pointer; }
  :is(.ga-nav-item, .dash-tabs > a, .pp-tab, .m-tabs > :is(a, button), .ms-tabs > .ms-tab)[aria-current="page"], :is(.ac-tabs, .m-tabs) > button[aria-selected="true"] {
    color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
  :is(.ga-nav-item, .dash-tabs > a, .pp-tab, .ac-tabs > button, .m-tabs > :is(a, button), .ms-tabs > .ms-tab) .icon { width: 16px; height: 16px; }

  /* ---------------------------------------------------------------- press feedback: every tappable answers the finger */
  :is(.btn, .icon-btn, .m-tab, .seg button, .m-chip, .m-filter-btn, button.pill, a.pill, .ga-nav-item, .dash-tabs > a, .pp-tab, .ac-tabs > button, .ms-tab, .m-tabs > :is(a, button), .m-press, .jd-cell, .sb-close) {
    transition: transform 120ms var(--ease), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
  :is(.btn, .icon-btn, .m-tab, .seg button, .m-chip, .m-filter-btn, button.pill, a.pill, .ga-nav-item, .dash-tabs > a, .pp-tab, .ac-tabs > button, .ms-tab, .m-tabs > :is(a, button), .m-press, .jd-cell, .sb-close):active:not(:disabled) { transform: scale(.96); }
  :is(.sb-item, .menu-item, .m-action, .m-row, .prow-link, .tdw-link, .where-card, a.m-card, table.m-cards tr.m-go, .sb-acct):active { background-color: var(--m-press); }
  /* hover lifts mean nothing to a finger (and stick after a tap) */
  :is(.svc-card, .adf-card, .tsb-card, .sim-card.live, a.stat-card):hover { transform: none; }

  /* ---------------------------------------------------------------- toasts: a pill above the tab bar */
  .toast, .toast[popover] { bottom: max(calc(var(--m-tab-h) + 12px), calc(16px + var(--m-safe-b)));
    max-width: calc(calc(100 * var(--vw)) - 32px); width: max-content; padding: 12px 18px; border-radius: 16px; font-size: var(--fs-md); text-align: center; }
}

/* ===================================================================================== ≤640px: the phone layer */
@media (max-width: 640px) {
  :root { --gutter: 16px; --m-gut: 16px; --topbar-h: 56px; }
  .m-only { display: revert; }
  .m-hide { display: none !important; }
  body { -webkit-tap-highlight-color: transparent; }

  /* ---------------------------------------------------------------- the tab bar
     It floats above the page (kamyab, 1405/08/05): a frosted, rounded bar with a pill that slides to the tab you are
     on. --m-tab-h is the room it takes at the bottom, so the page, toasts and action bars stay clear of it. */
  :root.m-has-tabs { --m-tab-h: calc(64px + 20px + var(--m-safe-b)); }
  .m-tabbar {
    --n: 5; --i: 0;
    position: fixed; inset: auto max(10px, var(--m-safe-r)) calc(10px + var(--m-safe-b)) max(10px, var(--m-safe-l));
    z-index: calc(var(--z-top) + 3); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 64px; padding: 6px;
    border-radius: 24px; border: 1px solid color-mix(in oklab, var(--rule-strong) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(1.6) blur(22px); -webkit-backdrop-filter: saturate(1.6) blur(22px);
    box-shadow: 0 12px 32px rgba(5, 2, 18, .38), 0 1px 0 rgba(255, 255, 255, .05) inset; transition: transform .3s var(--m-out);
  }
  :root[data-theme="light"] .m-tabbar { box-shadow: 0 10px 30px -8px rgba(11, 5, 29, .22), 0 1px 0 rgba(255, 255, 255, .7) inset; }
  :root.m-kbd .m-tabbar, :root.m-fs-on .m-tabbar, :root.m-pop-on .m-tabbar { transform: translateY(calc(100% + 24px + var(--m-safe-b))); }
  /* the pill is a tab wide and slides between tabs; what shows is a capsule behind the icon, the label free under it */
  .m-tab-pill { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n)); pointer-events: none;
    transform: translateX(calc(var(--i) * 100%)); transition: transform .32s var(--m-spring), opacity var(--t-fast); }
  .m-tab-pill::before { content: ""; position: absolute; top: 5px; left: 50%; width: 56px; height: 30px; margin-left: -28px; border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 34%, transparent), color-mix(in oklab, var(--brand) 18%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 42%, transparent); }
  .m-tabbar.m-tab-none .m-tab-pill { opacity: 0; }
  .m-tab { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; height: 52px; border: 0; border-radius: 18px;
    background: none; padding: 9px 2px 0; color: var(--ink-3); text-decoration: none; font: inherit; font-size: 10.5px; font-weight: 650; letter-spacing: .01em;
    cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-tab .icon { width: 22px; height: 22px; transition: transform .25s var(--ease); }
  .m-tab[aria-current="page"] { color: var(--ink); font-weight: 750; }
  .m-tab[aria-current="page"] .icon { color: var(--brand-bright); }
  :root[data-theme="light"] .m-tab[aria-current="page"] .icon { color: var(--brand); }
  .m-tab:active { transform: none; }
  .m-tab:active .icon { transform: scale(.86); }
  .m-tab-count { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--neg); color: #fff;
    font-style: normal; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
  .m-tab-count[hidden] { display: none; }
  /* With the tab bar, More opens the sidebar (the sections and the account): the bar's own menu and account buttons
     step aside, their places kept so the title stays centred */
  :root.m-has-tabs .m-appbar :is([data-m-menu], [data-m-account]) { visibility: hidden; pointer-events: none; }
  /* …so on a section's home (no Back) the bar folds to the status bar's band, and the page starts at the top; once the
     large title has scrolled away, a compact bar with the page's name slides down (iOS's large-title behaviour) */
  :root.m-has-tabs.m-no-back { --m-bar-h: var(--m-safe-t); }
  :root.m-has-tabs.m-no-back .m-appbar:not(.m-titled) { height: var(--m-safe-t); }
  :root.m-has-tabs.m-no-back.m-title-on { --m-sticky-top: calc(var(--m-safe-t) + var(--m-bar-core)); }
  :root.m-has-tabs body { padding-bottom: var(--m-tab-h); }
  :root.m-has-tabs .page { padding-bottom: 28px; }

  /* ---------------------------------------------------------------- touch: 44px targets, 16px fields (no zoom on focus) */
  .btn { min-height: 44px; padding: 0 16px; border-radius: 12px; }
  .btn.sm { min-height: 44px; height: auto; padding: 0 12px; border-radius: 12px; }
  .btn.block, .m-actionbar .btn { min-height: 50px; border-radius: 14px; font-size: var(--fs-lg); }
  .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
  .link-btn { min-height: 44px; }
  .menu-item { min-height: 48px; }
  .fld { gap: 8px; }
  .fl { font-size: var(--fs-md); }
  .inp input, .inp select, .inp textarea, select.sel, input.input, select.input, textarea, input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], input:not([type]) { font-size: 16px; }
  .inp input, .inp select, select.sel, input.input, select.input { height: 48px; padding-left: 14px; border-radius: 12px; }
  .inp > .icon ~ input { padding-left: 40px; }
  .inp textarea, textarea { border-radius: 12px; }
  .inp.locked { min-height: 48px; border-radius: 12px; }
  .check { min-height: 44px; font-size: var(--fs-md); }
  .check input { width: 22px; height: 22px; }
  .switch { width: 51px; height: 44px; margin-block: -6.5px; } .switch i { inset: 6.5px 0; border-radius: 16px; } .switch i::after { top: 2px; left: 2px; width: 27px; height: 27px; } .switch input:checked + i::after { transform: translateX(20px); }
  /* a segmented control: the full width, its options sharing it */
  .seg { border-radius: 12px; padding: 3px; }
  .seg button { min-height: 44px; padding: 6px 12px; border-radius: 9px; }
  .m-seg, :is(dialog, form, .drawer-b) .seg:not([role="tablist"]) { display: flex; width: 100%; }
  :is(.m-seg, :is(dialog, form, .drawer-b) .seg:not([role="tablist"])) button { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.25; }
  .seg[role="tablist"] { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg[role="tablist"]::-webkit-scrollbar { display: none; }
  .seg[role="tablist"] button { flex: none; white-space: nowrap; }
  /* a form's sticky bottom bar: its buttons share the width, clear of the tab bar and the home indicator */
  .m-actionbar { position: sticky; bottom: max(calc(var(--m-tab-h) + 8px), calc(12px + var(--m-safe-b))); z-index: var(--z-sticky); display: flex; gap: 10px;
    margin: 20px calc(-1 * var(--m-gut-r)) 0 calc(-1 * var(--m-gut-l)); padding: 12px var(--m-gut-r) 12px var(--m-gut-l);
    background: linear-gradient(to top, var(--paper) 70%, transparent); }
  .m-actionbar > .btn { flex: 1 1 0; min-width: 0; }

  /* ---------------------------------------------------------------- surfaces: cards, panels, KPI tiles, lists */
  .panel { padding: 16px; border-radius: var(--m-r-card); }
  .panel-h { margin-bottom: 12px; }
  .panel-h h2 { font-size: 17px; }
  .card { border-radius: var(--m-r-card); }
  .m-card { padding: 16px; border-radius: var(--m-r-card); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-1); color: inherit; text-decoration: none; }
  .table-wrap { margin: 0 calc(-1 * var(--m-gut-r)) 0 calc(-1 * var(--m-gut-l)); padding: 0 var(--m-gut-r) 0 var(--m-gut-l); }
  /* KPI tiles: two to a row (.m-kpis) or a sideways carousel that snaps (.m-swipe) */
  .m-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m-kpis > * { min-width: 0; padding: 14px; border-radius: var(--m-r-tile); }
  .m-kpis > .m-wide { grid-column: 1 / -1; }
  .m-swipe { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); grid-template-columns: none; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--m-gut-r)) 0 calc(-1 * var(--m-gut-l)); padding: 2px var(--m-gut-r) 6px var(--m-gut-l); scroll-padding-inline: var(--m-gut-l); }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { scroll-snap-align: start; min-width: 0; }
  /* a grouped list: rows with an icon, two lines of text, a value and a chevron */
  .m-rows { list-style: none; margin: 0; padding: 4px 0; border-radius: var(--m-r-card); background: var(--surface); border: 1px solid var(--rule); overflow: hidden; }
  .m-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; color: inherit; text-decoration: none; }
  .m-row + .m-row::before, .m-rows > li + li > .m-row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--rule); }
  .m-row b { display: block; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-row small { display: block; color: var(--ink-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  a.m-row::after { content: ""; width: 8px; height: 8px; border: solid var(--ink-4); border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-inline-end: 4px; }
  /* a chart card: a phone's height, the legend under it in a wrapping row, the tooltip on a tap */
  .m-chart { padding: 14px 14px 12px; border-radius: var(--m-r-card); }
  .m-chart :is(canvas, svg.chart) { max-height: 240px; }
  .m-chart .legend, .m-chart [class$="-legend"] { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); }

  /* ---------------------------------------------------------------- badges, chips, avatars */
  .pill { min-height: 26px; padding: 4px 11px; }

  /* ---------------------------------------------------------------- empty, loading, error */
  .dp-loader.lg { min-height: min(calc(40 * var(--vh)), 360px); }
  .dp-empty { padding: 32px 20px; gap: 14px; }
  .dp-empty b { font-size: var(--fs-lg); }
  .dp-empty p { font-size: var(--fs-md); }
  .dp-empty .btn { min-width: 160px; }
  /* the error pages (404, 403) and the offline page: the whole screen, the mark large, one way out across the width */
  .empty-state { min-height: calc(calc(100 * var(--dvh)) - var(--m-bar-h) - var(--m-tab-h)); padding: max(24px, var(--m-safe-t)) var(--m-gut-r) max(24px, var(--m-safe-b)) var(--m-gut-l); }
  :root.m-has-bar .empty-state { padding-top: 24px; }
  .empty-state .card { width: 100%; max-width: 420px; padding: 24px 8px; gap: 16px; background: none; border: 0; box-shadow: none; }
  .empty-state .big { font-size: 96px; letter-spacing: -0.06em; background: linear-gradient(160deg, var(--brand-bright), var(--brand) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .empty-state .svc-ico { width: 76px; height: 76px; border-radius: 24px; }
  .empty-state .svc-ico .icon { width: 34px; height: 34px; }
  .empty-state h1 { font-size: 26px; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
  .empty-state p { font-size: var(--fs-lg); line-height: 1.5; text-wrap: pretty; }
  .empty-state p:has(> .btn) { width: 100%; margin-top: 8px; }
  .empty-state .btn, .offline-btn { width: 100%; min-height: 50px; border-radius: 14px; font-size: var(--fs-lg); }
  .offline-page { background: radial-gradient(90% 60% at 50% 0%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 70%), var(--paper); padding: max(24px, var(--m-safe-t)) var(--m-gut-r) max(24px, var(--m-safe-b)) var(--m-gut-l); }
  .offline-card { padding: 36px 20px 24px; border-radius: var(--m-r-card); }
  .offline-card h1 { font-size: 28px; }
  .offline-card p { font-size: var(--fs-lg); }

  /* ---------------------------------------------------------------- menus: action sheets from the bottom */
  .popover:not(.jd-pop):not(.up) {
    position: fixed; inset: auto max(8px, var(--m-safe-r)) calc(8px + var(--m-safe-b)) max(8px, var(--m-safe-l)) !important; top: auto !important; min-width: 0; max-height: calc(70 * var(--dvh));
    overflow-y: auto; overscroll-behavior: contain; border-radius: 22px; padding: 22px 8px 8px; z-index: calc(var(--z-dialog) - 1);
    box-shadow: 0 0 0 100vmax var(--m-scrim), var(--shadow-3); animation: m-sheet-up .3s var(--m-out); }
  .popover:not(.jd-pop):not(.up)::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--rule-strong); }
  .popover:not(.jd-pop) .menu-item { min-height: 52px; border-radius: 14px; font-size: 16px; }
  .popover:not(.jd-pop) .menu-head { padding: 4px 12px 12px; }
  /* the Jalali calendar: a sheet at the bottom */
  .jd-pop { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; z-index: calc(var(--z-dialog) + 1);
    border-radius: var(--m-r-sheet) var(--m-r-sheet) 0 0; padding: 22px max(16px, var(--m-safe-r)) calc(16px + var(--m-safe-b)) max(16px, var(--m-safe-l));
    box-shadow: 0 0 0 100vmax var(--m-scrim), var(--shadow-3); animation: m-sheet-up .3s var(--m-out); }
  .jd-pop::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--rule-strong); }
  .jd-pop .jd-month, .jd-pop .jd-year { height: 44px; font-size: 16px; }
  .jd-cell { height: 44px; font-size: var(--fs-md); border-radius: 12px; }
  .jd-btn { width: 44px; height: 44px; }

  /* ---------------------------------------------------------------- sheets
     Every dialog and drawer rises from the bottom with a grab handle; its head (title, Close) and its buttons stay put
     and only the body scrolls. Drawers (a person, a flag, a task) and .m-full sheets take the whole screen. A sheet is
     dragged down by its head to close (mobile.js). */
  :is(dialog.dlg, dialog.drawer, dialog.rc-drawer, dialog.td-drawer, dialog.td-sheet, dialog.g-dlg) {
    position: fixed; inset: auto 0 0 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important;
    max-height: calc(calc(100 * var(--dvh)) - var(--m-safe-t) - 12px) !important; border-radius: var(--m-r-sheet) var(--m-r-sheet) 0 0 !important; border-width: 1px 0 0 !important;
    padding-bottom: var(--m-safe-b); padding-left: var(--m-safe-l); padding-right: var(--m-safe-r); overscroll-behavior: contain; touch-action: pan-y;
    box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, .45);
  }
  :is(dialog.dlg, dialog.drawer, dialog.rc-drawer, dialog.td-drawer, dialog.td-sheet, dialog.g-dlg)[open] { animation: m-sheet-up .34s var(--m-out); }
  :is(dialog.dlg, dialog.drawer, dialog.rc-drawer, dialog.td-drawer, dialog.td-sheet, dialog.g-dlg)::backdrop { background: var(--m-scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: m-fade .3s ease-out; }
  :is(dialog.dlg, dialog.drawer, dialog.rc-drawer, dialog.td-drawer, dialog.td-sheet, dialog.g-dlg)::before {
    content: ""; display: block; flex: none; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--rule-strong); }
  :is(dialog.drawer, dialog.rc-drawer, dialog.td-drawer, dialog.dlg.m-full, dialog.m-full) { height: calc(calc(100 * var(--dvh)) - var(--m-safe-t) - 12px) !important; }
  /* the head: drag it to close (no page scroll steals the gesture) */
  :is(dialog.dlg, dialog.drawer, dialog.rc-drawer, dialog.td-drawer, dialog.td-sheet, dialog.g-dlg) :is(.dlg-h, .dr-h, .rc-dr-h, .td-dr-h) { touch-action: none; }
  dialog.m-dragging { animation: none !important; transition: none !important; }
  dialog.m-leaving { transition: transform .22s ease-in !important; transform: translateY(105%) !important; }
  dialog:not(.m-dragging):is(.dlg, .drawer, .rc-drawer, .td-drawer, .td-sheet, .g-dlg) { transition: transform .3s var(--m-out); }
  .dlg-h { padding: 12px 64px 14px 20px; gap: 4px; }
  .dlg-h h2 { font-size: 19px; letter-spacing: -0.015em; }
  .dlg-h p { font-size: var(--fs-md); }
  /* Close: a round button in the head's corner (44px to the finger, a 32px disc to the eye) */
  :is(.dlg-x, .dlg-h > .icon-btn[data-close]:last-child, .dlg-h > .lv-x) { top: 6px; right: 10px; width: 44px; height: 44px; border-radius: 50%; background: none; }
  :is(.dlg-x, .dlg-h > .icon-btn[data-close]:last-child, .dlg-h > .lv-x)::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-3); z-index: -1; }
  :is(.dlg-x, .dlg-h > .icon-btn[data-close]:last-child, .dlg-h > .lv-x) { isolation: isolate; color: var(--ink-2); }
  :is(.dlg-x, .dlg-h > .icon-btn[data-close]:last-child, .dlg-h > .lv-x) .icon { width: 17px; height: 17px; stroke-width: 2.4; }
  .dlg-b { padding: 16px 20px 18px; gap: 16px; }
  /* a body of fixed height: rows keep their own height and the body scrolls (auto rows would be squeezed together) */
  :is(dialog .dlg-b, .drawer-b, .rc-dr-b, .td-dr-b, dialog .g-dlg-b) { grid-auto-rows: max-content; }
  /* focus moved to the sheet (its content replaced after it opened) rings nothing; its controls keep their rings */
  dialog:focus-visible { outline: none; }
  .dlg-f { padding: 12px 16px calc(12px + var(--m-safe-b)); gap: 10px; flex-wrap: nowrap; }
  .dlg-f > .btn { flex: 1 1 0; min-width: 0; min-height: 50px; border-radius: 14px; font-size: var(--fs-lg); }
  .dlg-f > .grow, .dlg-f > .hint, .dlg-f > small, .dlg-f > p { flex-basis: 100%; }
  .dlg-f:has(> .grow, > .hint, > small, > p) { flex-wrap: wrap; }
  .dlg-f > .grow:empty, .dlg-f > span.grow { display: none; }
  /* three or more actions: two to a row, the main one across */
  .dlg-f:has(> .btn ~ .btn ~ .btn) { flex-wrap: wrap; }
  .dlg-f:has(> .btn ~ .btn ~ .btn) > .btn { flex: 1 1 calc(50% - 5px); }
  .dlg-f:has(> .btn ~ .btn ~ .btn) > .btn:not(.ghost):not(.quiet):not(.danger):last-child { flex-basis: 100%; }
  dialog.dlg[open]:has(> .dlg-f), dialog.dlg[open]:has(> form > .dlg-f) { padding-bottom: 0; }
  /* a question (ask()): an action sheet, the answer first and full width */
  dialog.dlg.dp-ask .dlg-f { flex-direction: column-reverse; }
  dialog.dlg.dp-ask .dlg-f > .btn { flex: none; width: 100%; }
  dialog.dlg.dp-ask .dp-ask-h { padding-top: 16px; padding-right: 20px; }
  /* our own sheets (mobile.js sheet()): the account, a page's filters; action sheets have Cancel and no ✕ */
  .m-sheet .dlg-b { padding-top: 6px; }
  .m-action-sheet .dlg-x { display: none; }
  .m-actions { display: grid; gap: 2px; }
  .m-action { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
  .m-action .icon { width: 20px; height: 20px; color: var(--ink-3); }
  .m-action.danger, .m-action.danger .icon { color: var(--neg); }
  .m-cancel { padding: 6px 16px calc(10px + var(--m-safe-b)); border-top: 1px solid var(--rule); }
  .m-cancel .m-action { justify-content: center; font-weight: 750; }

  /* ---------------------------------------------------------------- tables as cards (mobile.js marks them; data-m) */
  /* a box that scrolled a wide table sideways holds cards now: no bleed, no scrolling */
  :is(.table-wrap, .xl-wrap, .rc-scroll, .tscroll, .pm-log-wrap):has(> table:is(.m-cards, .m-list)) { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: visible; max-width: none; max-height: none; height: auto; border: 0; box-shadow: none; background: none; }
  table.m-cards { display: block; width: 100%; border: 0; }
  table.m-cards > thead { display: none; }
  table.m-cards > tbody, table.m-cards > tfoot { display: grid; gap: 10px; }
  table.m-cards > tfoot { margin-top: 10px; }
  table.m-cards > tbody > tr, table.m-cards > tfoot > tr {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--m-r-tile); box-shadow: var(--shadow-1); }
  table.m-cards > tbody > tr > :is(td, th), table.m-cards > tfoot > tr > :is(td, th) {
    display: grid; align-content: start; gap: 3px; min-width: 0; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important;
    white-space: normal; overflow-wrap: anywhere; position: static !important; width: auto !important; max-width: none !important; box-shadow: none !important; font-size: var(--fs-md); }
  table.m-cards :is(td, th)::before {
    content: attr(data-label); font-family: var(--font); font-size: var(--fs-2xs); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  /* the title cell: Persian names read right to left inside but stay at the card's left, like every other title */
  table.m-cards :is(td, th).m-title { grid-column: 1 / -1; font-size: 16px; font-weight: 700; color: var(--ink); unicode-bidi: plaintext; }
  table.m-cards :is(td, th):is(.m-title, .m-bare, [data-label=""], :not([data-label]))::before { display: none; }
  table.m-cards :is(td, th).m-key { grid-column: 1 / -1; font-family: var(--font-num); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
  table.m-cards :is(td, th).m-key::before { font-size: var(--fs-2xs); letter-spacing: .03em; font-weight: 650; }
  table.m-cards :is(td, th).m-wide { grid-column: 1 / -1; }
  table.m-cards :is(td, th).m-bare { grid-column: 1 / -1; }
  table.m-cards :is(td, th).m-bare:empty { display: none; }
  table.m-cards tr:not(.m-unfold) > .m-extra { display: none !important; }
  table.m-cards .m-fold { grid-column: 1 / -1; }
  .m-fold-btn { justify-self: start; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--brand-bright); font: inherit; font-family: var(--font); font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
  table.m-cards tr.m-go { padding-inline-end: 40px; cursor: pointer; }
  table.m-cards tr.m-go::after { content: ""; position: absolute; right: 18px; top: 22px; width: 8px; height: 8px; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(-45deg); }
  table.m-cards > tbody > tr.m-span { display: block; padding: 12px 16px; }
  table.m-cards > tbody > tr.m-span > :is(td, th) { display: block; }
  table.m-cards > tfoot > tr { background: color-mix(in oklab, var(--brand) 10%, var(--surface)); border-color: color-mix(in oklab, var(--brand) 32%, var(--rule)); }
  table.m-cards :is(td, th) .num, table.m-cards .num { white-space: normal; }
  table.m-cards tr[hidden] { display: none !important; }
  table.m-cards > :is(tbody, tfoot) > tr > :is(td, th):is(.hide-sm, .hide-md) { display: none !important; }
  /* a log or feed (data-m="list"): items, not cards; the time small above, the rest on one wrapping line */
  table.m-list { display: block; width: 100%; }
  table.m-list > thead { display: none; }
  table.m-list > tbody { display: block; }
  table.m-list > tbody > tr { display: block; padding: 12px 2px; border-bottom: 1px solid var(--rule); }
  table.m-list > tbody > tr:last-child { border-bottom: 0; }
  table.m-list > tbody > tr > :is(td, th) { display: inline; padding: 0 !important; border: 0 !important; background: none !important; white-space: normal; font-size: var(--fs-md); color: var(--ink-2); text-align: left !important; }
  table.m-list > tbody > tr > .m-title { display: block; margin-bottom: 3px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
  table.m-list > tbody > tr > :is(td, th):nth-child(2) { color: var(--ink); font-weight: 650; }
  table.m-list > tbody > tr > :is(td, th):not(.m-title):not(.m-bare) ~ :is(td, th):not(.m-bare)::before { content: " · "; color: var(--ink-4); }
  table.m-list > tbody > tr > .m-bare { display: none; }
  /* a table that scrolls (data-m="scroll"): the first column pinned, a fade where there is more */
  .m-scroll-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--m-gut-r)) 0 calc(-1 * var(--m-gut-l)); padding: 0 var(--m-gut-r) 0 var(--m-gut-l); }
  .m-scroll-box { position: relative; scrollbar-width: thin; }
  .m-scroll-box.m-cue-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
  table.m-scroll-t :is(th, td):first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--rule); }
  table.m-scroll-t thead :is(th, td):first-child { z-index: 3; }

  /* ---------------------------------------------------------------- filters behind one button (mobile.js; data-m-filters) */
  .m-folded { display: none !important; }
  .m-filterbar { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; min-width: 0; }
  .m-filter-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
    background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
  .m-filter-btn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); font-size: 11px; line-height: 20px; text-align: center; }
  .m-filter-btn b[hidden] { display: none; }
  .m-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding-inline-end: 8px; }
  .m-chips::-webkit-scrollbar { display: none; }
  .m-chip { flex: none; height: 36px; padding: 0 14px; border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent); border-radius: var(--r-pill); background: color-mix(in oklab, var(--brand) 14%, transparent);
    color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; cursor: pointer; }
  /* the panel itself rises as a sheet (it stays where it is in the page, so its listeners keep working) */
  [data-m-filters].m-fs-open {
    position: fixed !important; inset: auto 0 0 0 !important; z-index: calc(var(--z-dialog) - 1); display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important; gap: 16px !important; width: 100% !important; max-width: none !important; max-height: calc(72 * var(--dvh)); overflow-y: auto; overscroll-behavior: contain;
    margin: 0 !important; padding: 8px max(18px, var(--m-safe-r)) calc(20px + var(--m-safe-b)) max(18px, var(--m-safe-l)) !important; background: var(--surface) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    transform: none !important; animation: m-sheet-up .3s var(--m-out); }
  [data-m-filters].m-fs-open > * { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; flex: none !important; }
  [data-m-filters].m-fs-open .seg { display: flex; overflow-x: auto; }
  [data-m-filters].m-fs-open .seg button { flex: 1 0 auto; }
  .m-fs-head { position: fixed; left: 0; right: 0; z-index: calc(var(--z-dialog) - 2); display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 22px max(18px, var(--m-safe-r)) 10px max(18px, var(--m-safe-l)); background: var(--surface); border: 1px solid var(--rule); border-width: 1px 0 0; border-radius: var(--m-r-sheet) var(--m-r-sheet) 0 0; animation: m-sheet-up .3s var(--m-out); }
  .m-fs-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--rule-strong); }
  .m-fs-head b { font-size: 19px; font-weight: 750; }
  .m-fs-head .btn { min-width: 84px; }
  .m-fs-head[hidden], .m-fs-scrim[hidden] { display: none; }
  .m-fs-scrim { position: fixed; inset: 0; z-index: calc(var(--z-dialog) - 2); background: var(--m-scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: m-fade .3s ease-out; }
}
/* tablets and foldables in portrait (641–899px, a finger): the phone's touch sizes, the desktop's layout */
@media (min-width: 641px) and (max-width: 899px) and (pointer: coarse) {
  .btn.sm { min-height: 44px; height: auto; }
  .inp input, .inp select, .inp textarea, select.sel, input.input, select.input, textarea, input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"], input[type="url"], input:not([type]) { font-size: 16px; min-height: 44px; }
}
/* Aghaye Doctor's reading: its "Why" opens with a full-size tap on phones and tablets, wherever a reading shows */
@media (max-width: 899px) { .ins-why summary { min-height: 44px; } }
/* the narrowest phones (320–374px): the tab bar's labels a touch smaller, so "Settlements" fits */
@media (max-width: 374px) {
  .m-tab { font-size: 10px; letter-spacing: -0.01em; }
  .m-tab span[data-tiny] { font-size: 0; }
  .m-tab span[data-tiny]::after { content: attr(data-tiny); font-size: 10px; }
}
@keyframes m-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m-appbar, .m-tabbar, .m-ab-title, .m-tab-pill, .m-tab .icon, .sidebar { transition: none !important; } }