/* ishlar — design system v2. RTL-first, logical properties, token-driven. Brand #2757ce.
   Layers: 1 tokens · 2 base · 3 primitives · 4 shell · 5 pages · 6 responsive. No one-off colours, sizes or radii: use the tokens. */
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* ---------- 1. Tokens ---------- */
:root {
  /* brand scale (#2757ce = 500) */
  --brand-50: #eef3fd; --brand-100: #dbe6fb; --brand-200: #b9cdf7; --brand-300: #8eabf0; --brand-400: #5f84e3;
  --brand-500: #2757ce; --brand-600: #1f47ab; --brand-700: #1a3a8a;
  /* semantic colour */
  --bg: #f5f7fb; --surface: #ffffff; --surface-2: #f0f3f9; --surface-3: #e6ebf4;
  --border: #e1e6f0; --border-strong: #cfd6e6;
  --text: #141a2b; --text-2: #4a5470; --muted: #6b7592;
  --primary: var(--brand-500); --primary-600: var(--brand-600); --primary-soft: var(--brand-50); --on-primary: #ffffff;
  --danger: #c42b3a; --danger-soft: #fdeaec; --success: #12805c; --success-soft: #e3f6ee; --warn: #b45309; --warn-soft: #fdf1dc; --star: #f59e0b;
  --scrim: rgb(10 14 30 / .55);
  /* type scale: 12 / 14 / base / 18 / 22 / 28 */
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --lh-body: 1.8; --lh-ui: 1.6; --lh-head: 1.35;
  /* spacing (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-11: 44px;
  /* shape */
  --r-sm: 8px; --r: 12px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;
  --ctl: 44px; --ctl-sm: 36px;
  /* elevation */
  --shadow-sm: 0 1px 2px rgb(20 26 43 / .06), 0 1px 1px rgb(20 26 43 / .04);
  --shadow: 0 4px 14px rgb(20 26 43 / .08), 0 1px 3px rgb(20 26 43 / .06);
  --shadow-lg: 0 16px 40px rgb(20 26 43 / .2);
  --ring: 0 0 0 3px rgb(39 87 206 / .25);
  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 150ms; --t-med: 220ms;
  /* layout */
  --topbar-h: 64px; --bottomnav-h: 64px; --sidebar-w: 268px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand-50: #16213f; --brand-100: #1b2a52;
  --bg: #0c1020; --surface: #141a2e; --surface-2: #1a2139; --surface-3: #232c49;
  --border: #252e4b; --border-strong: #33405f;
  --text: #eef1fa; --text-2: #b3bbd3; --muted: #8c96b5;
  --primary: #6b8fe8; --primary-600: #86a3ee; --primary-soft: #18244a; --on-primary: #0b1230;
  --danger: #ff7a88; --danger-soft: #3a1a20; --success: #4cc9a0; --success-soft: #12302a; --warn: #f0b35a; --warn-soft: #38290f;
  --scrim: rgb(0 0 0 / .65);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow: 0 6px 18px rgb(0 0 0 / .4); --shadow-lg: 0 20px 50px rgb(0 0 0 / .6);
  --ring: 0 0 0 3px rgb(107 143 232 / .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --brand-50: #16213f; --brand-100: #1b2a52;
    --bg: #0c1020; --surface: #141a2e; --surface-2: #1a2139; --surface-3: #232c49;
    --border: #252e4b; --border-strong: #33405f;
    --text: #eef1fa; --text-2: #b3bbd3; --muted: #8c96b5;
    --primary: #6b8fe8; --primary-600: #86a3ee; --primary-soft: #18244a; --on-primary: #0b1230;
    --danger: #ff7a88; --danger-soft: #3a1a20; --success: #4cc9a0; --success-soft: #12302a; --warn: #f0b35a; --warn-soft: #38290f;
    --scrim: rgb(0 0 0 / .65);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow: 0 6px 18px rgb(0 0 0 / .4); --shadow-lg: 0 20px 50px rgb(0 0 0 / .6);
    --ring: 0 0 0 3px rgb(107 143 232 / .4);
    color-scheme: dark;
  }
}
@media (max-width: 860px) { :root { --fs-base: 16px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* the scrollbar's strip is always reserved, so the header does not jump sideways between a short and a long page */
html:has(body.page-board) { scrollbar-gutter: auto; } /* the board fills the screen and scrolls inside: no empty strip */
body { margin: 0; font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--text); background: var(--bg); min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; letter-spacing: 0; overflow-wrap: break-word; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-head); font-weight: 700; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--ring); }
.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
.muted { color: var(--muted); }
.sm { font-size: var(--fs-sm); }
.bold { font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.mt { margin-block-start: var(--sp-4); } .mt-lg { margin-block-start: var(--sp-8); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. Primitives ---------- */
/* buttons: 44px target (small ones are 36px with an invisible 44px hit area) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-5); border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-ui); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast); white-space: nowrap; text-decoration: none !important; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn.loading { opacity: .55; pointer-events: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 4px 12px rgb(39 87 206 / .25); }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
:root[data-theme="dark"] .btn-primary { box-shadow: none; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn-danger:hover { background: var(--danger); color: var(--surface); }
.btn-sm { min-height: var(--ctl-sm); padding-inline: var(--sp-3); font-size: var(--fs-sm); }
.btn-sm::before { content: ''; position: absolute; inset-inline: 0; inset-block: -4px; }
.btn-icon { width: var(--ctl); padding: 0; flex: none; }
.btn-icon.btn-sm { width: var(--ctl-sm); }
.btn-icon.btn-sm::before { inset-inline: -4px; }
.btn-block { width: 100%; }
.btn .spin { display: none; }
.btn.loading .spin { display: inline-block; }

/* forms */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field > label { font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); }
.input, .select, .textarea { width: 100%; min-height: var(--ctl); padding-inline: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); font-size: max(var(--fs-base), 16px); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
@media (min-width: 861px) { .input, .select, .textarea { font-size: var(--fs-base); } }
.textarea { min-height: 96px; padding: var(--sp-3); resize: vertical; line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; }
.input.error { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: var(--fs-sm); }
.input-icon { position: relative; }
.input-icon > i { position: absolute; inset-inline-start: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon > .input { padding-inline-start: var(--sp-10); }
.input-icon > .toggle-pass { position: absolute; inset-inline-end: var(--sp-1); top: 50%; transform: translateY(-50%); }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch::before { content: ''; position: absolute; inset-block: -8px; inset-inline: -4px; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--r-full); transition: background var(--t-med) var(--ease), border-color var(--t-med); }
.switch span::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease); }
.switch input:checked + span { background: var(--primary); border-color: var(--primary); }
.switch input:checked + span::after { transform: translateX(-20px); }
[dir="ltr"] .switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { box-shadow: var(--ring); }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; min-height: var(--ctl-sm); }
.check input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: var(--sp-5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: var(--fs-base); }
.badge { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 24px; padding-inline: var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-ui); background: var(--surface-3); color: var(--text-2); }
.badge.primary { background: var(--primary-soft); color: var(--primary); }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.avatar { --size: 32px; width: var(--size); height: var(--size); border-radius: 50%; display: inline-grid; place-items: center; font-size: calc(var(--size) * .4); font-weight: 700; color: #fff; flex: none; background: var(--primary); letter-spacing: 0; user-select: none; }
.avatar.lg { --size: 44px; } .avatar.xs { --size: 24px; }
.avatar.gen { overflow: hidden; } .avatar.gen svg { width: 100%; height: 100%; display: block; }
.avatars { display: inline-flex; }
.avatars .avatar { border: 2px solid var(--surface); margin-inline-start: -8px; }
.avatars .avatar:first-child { margin-inline-start: 0; }
/* the first person is the front one: each avatar overlaps the one that follows it, not the one before it */
.avatars .avatar { position: relative; }
.avatars .avatar:nth-child(1) { z-index: 5; } .avatars .avatar:nth-child(2) { z-index: 4; } .avatars .avatar:nth-child(3) { z-index: 3; } .avatars .avatar:nth-child(4) { z-index: 2; }
.progress { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--success); border-radius: var(--r-full); transition: width var(--t-med); }
.empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--muted); }
.empty i { font-size: var(--fs-2xl); opacity: .5; margin: 0 auto var(--sp-3); display: block; width: auto; text-align: center; }
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r); font-size: var(--fs-sm); line-height: var(--lh-body); background: var(--danger-soft); color: var(--danger); }
.alert.info { background: var(--primary-soft); color: var(--primary); }
.alert.ok, .alert.success { background: var(--success-soft); color: var(--success); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* table */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: start; font-size: var(--fs-xs); color: var(--muted); font-weight: 700; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); white-space: nowrap; }
table.t td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); vertical-align: middle; }
table.t tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* dropdown / popover */
.dd { position: relative; }
.dd-menu { position: absolute; inset-inline-end: 0; top: calc(100% + var(--sp-2)); max-height: calc(100vh - 90px); overflow-y: auto; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-2); z-index: 60; animation: pop var(--t-fast) var(--ease); }
.dd-menu a, .dd-menu button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--ctl); padding: var(--sp-2) var(--sp-3); border: 0; background-color: transparent; border-radius: var(--r-sm); color: var(--text); cursor: pointer; text-align: start; text-decoration: none !important; font-size: var(--fs-sm); }
.dd-menu a:hover, .dd-menu button:hover { background-color: var(--surface-2); }
.dd-menu hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-2) 0; }
.bell { position: relative; }
/* unread badge: on the top-left corner of the bell, mostly outside the icon, so the bell itself stays visible */
.bell .dot { position: absolute; inset-block-start: 2px; inset-inline-end: -2px; inset-inline-start: auto; top: 2px; min-inline-size: 20px; min-width: 20px; block-size: 20px; height: 20px; padding-inline: var(--sp-1); background: var(--danger); color: #fff; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; display: grid; place-items: center; line-height: 1; border: 0; box-shadow: 0 0 0 2px var(--surface); box-sizing: border-box; }
.notif-panel { width: 360px; max-width: calc(100vw - 24px); padding: 0; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-all { display: flex; align-items: center; justify-content: center; min-height: var(--ctl); border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 700; text-decoration: none !important; }
.notif-all:hover { background: var(--surface-2); }
.notif-item { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none !important; position: relative; }
.notif-item:last-child { border-bottom: 0; }
.notif-item > * { min-width: 0; }
.notif-item .ni-title { font-weight: 700; font-size: var(--fs-sm); line-height: var(--lh-ui); display: flex; align-items: center; gap: var(--sp-2); text-align: start; }
.notif-item .ni-title .t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-link, .nl-link { flex: none; font-size: var(--fs-xs); color: var(--primary); opacity: .85; }
.notif-item .ni-body { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.notif-item .ni-time { font-size: var(--fs-xs); color: var(--muted); text-align: end; }
.notif-item.unread { background: var(--primary-soft); }
/* bell message (design E): the circle at the far end of the row is the read switch (blue = unread, empty = read); the date is relative, on the right */
.notif-item { padding-inline-end: calc(var(--sp-4) + 26px); }
.dd-menu .notif-item .ni-dot { position: absolute; inset-inline-end: var(--sp-4); inset-block-start: 14px; flex: none; inline-size: 14px; width: 14px; block-size: 14px; min-block-size: 0; padding: 0; gap: 0; border-radius: 50%; border: 2px solid var(--primary); background: var(--primary); cursor: pointer; transition: box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.dd-menu .notif-item .ni-dot::before { content: ""; position: absolute; inset: -15px; } /* 44px tap area */
.dd-menu .notif-item .ni-dot:hover, .dd-menu .notif-item .ni-dot:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); outline: none; }
.dd-menu .notif-item:not(.unread) .ni-dot { background: transparent; border-color: var(--border-strong); }
.dd-menu .notif-item:not(.unread) .ni-dot:hover, .dd-menu .notif-item:not(.unread) .ni-dot:focus-visible { border-color: var(--primary); }
.notif-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.notif-tools label { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl-sm); cursor: pointer; }
.notif-tools input { accent-color: var(--primary); inline-size: 18px; block-size: 18px; }
.notif-none { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.notif-none i { color: var(--success); margin-inline-end: var(--sp-1); }
@media (prefers-reduced-motion: reduce) { .dd-menu .notif-item .ni-dot { transition: none; } }.notif-item:hover { background: var(--surface-2); }

/* ---------- 4. Shell ---------- */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-2); padding-inline: var(--sp-5); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: 800; font-size: var(--fs-lg); color: var(--text); text-decoration: none !important; flex: none; margin-inline-end: var(--sp-3); }
.brand .logo, .auth-mobile-brand .logo { width: 36px; height: 36px; border-radius: var(--r); background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); display: grid; place-items: center; color: #fff; font-size: var(--fs-base); box-shadow: 0 4px 10px rgb(39 87 206 / .35); }
.topnav { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.topnav > a, .topnav .nav-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-3); border-radius: var(--r); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none !important; border: 0; background: none; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.topnav > a i, .topnav .nav-link i { color: var(--muted); font-size: var(--fs-sm); transition: color var(--t-fast); }
.topnav > a:hover, .topnav .nav-link:hover { background: var(--surface-2); color: var(--text); }
.topnav > a.active, .topnav .nav-link.active { background: var(--primary-soft); color: var(--primary); }
.topnav > a.active i, .topnav .nav-link.active i { color: var(--primary); }
.topnav .caret { font-size: var(--fs-xs) !important; }
.nav-menu a.active { background: var(--primary-soft); color: var(--primary); }
.nav-label { font-size: var(--fs-xs); color: var(--muted); padding: var(--sp-3) var(--sp-3) var(--sp-1); font-weight: 700; }
.mob-only { display: none !important; }
.userchip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding: 0 var(--sp-1) 0 var(--sp-3); border-radius: var(--r-full); border: 1px solid transparent; background: none; cursor: pointer; color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.userchip .uname { max-width: 110px; }
.menu-head { padding: var(--sp-2) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--border); margin-block-end: var(--sp-2); }
.menu-foot { margin: var(--sp-2) var(--sp-2) var(--sp-1); padding: var(--sp-2) var(--sp-3); text-align: center !important; background: var(--surface-2); border-radius: var(--r-sm); font-size: var(--fs-xs); }
main.page { padding: var(--sp-6); max-width: none; width: 100%; margin-inline: auto; flex: 1; }
.main-board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.site-foot { text-align: center; padding: var(--sp-4); border-top: 1px solid var(--border); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-6); flex-wrap: wrap; }
.page-head h2 { font-size: var(--fs-xl); }
.menu-btn { display: none; }
.scrim { display: none; }
.bottom-nav { display: none; }

/* ---------- 5. Pages ---------- */
/* dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); margin-block-end: var(--sp-6); }
.stat { padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); }
.stat .ic { width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; font-size: var(--fs-lg); flex: none; }
.stat .num { font-size: var(--fs-2xl); font-weight: 800; line-height: var(--lh-head); }
.ic.indigo { background: var(--primary-soft); color: var(--primary); }
.ic.rose { background: var(--danger-soft); color: var(--danger); }
.ic.amber { background: var(--warn-soft); color: var(--warn); }
.ic.emerald { background: var(--success-soft); color: var(--success); }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); align-items: start; }
.task-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); min-height: var(--ctl); border-top: 1px solid var(--border); color: var(--text); text-decoration: none !important; }
.task-row:first-child { border-top: 0; }
.task-row:hover { background: var(--surface-2); }
.prio { width: 4px; align-self: stretch; border-radius: var(--sp-1); background: var(--border-strong); flex: none; }
.prio.p0 { background: var(--border-strong); } .prio.p1 { background: var(--brand-300); } .prio.p2 { background: var(--warn); } .prio.p3 { background: var(--danger); }

/* boards index */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.board-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; padding: var(--sp-4); border-radius: var(--r-lg); color: #fff; text-decoration: none !important; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.board-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.board-tile::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgb(255 255 255 / .2), transparent 55%); pointer-events: none; }
.board-tile h3 { font-size: var(--fs-lg); text-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.board-tile .meta { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); opacity: .95; position: relative; z-index: 1; }
.board-tile.new { background: var(--surface); color: var(--muted); border: 2px dashed var(--border-strong); align-items: center; justify-content: center; gap: var(--sp-2); cursor: pointer; font-weight: 600; box-shadow: none; }
.board-tile.new::after { display: none; }
.board-tile.new:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.bg-indigo { background: linear-gradient(135deg, #2757ce, #5f84e3); } .bg-violet { background: linear-gradient(135deg, #6d4fd6, #a07cf0); }
.bg-rose { background: linear-gradient(135deg, #d6456b, #f0846a); } .bg-amber { background: linear-gradient(135deg, #d98a14, #e8613c); }
.bg-emerald { background: linear-gradient(135deg, #0f9d7a, #2db8a0); } .bg-sky { background: linear-gradient(135deg, #0e8fd0, #4c7be6); }
.bg-slate { background: linear-gradient(135deg, #4a5670, #232c42); } .bg-teal { background: linear-gradient(135deg, #14a89a, #3b82d6); }
.swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: var(--r-sm); border: 3px solid transparent; cursor: pointer; padding: 0; }
.swatch.on { border-color: var(--text); }

/* kanban */
.page-board .shell { height: 100vh; height: 100dvh; }
.page-board { overflow: hidden; }
.board-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.board-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); color: #fff; background: rgb(0 0 0 / .2); backdrop-filter: blur(8px); flex-wrap: wrap; }
.board-bar h2 { font-size: var(--fs-lg); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.board-bar .btn { background: rgb(255 255 255 / .18); border-color: transparent; color: #fff; }
.board-bar .btn:hover { background: rgb(255 255 255 / .3); }
.board-bar .avatars .avatar { border-color: rgb(255 255 255 / .6); }
.board-bar .filter { background: rgb(255 255 255 / .18); border: 0; color: #fff; min-height: var(--ctl); border-radius: var(--r); padding-inline: var(--sp-3); width: 200px; }
.board-bar .filter::placeholder { color: rgb(255 255 255 / .8); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgb(74 222 128 / .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgb(74 222 128 / 0); } 100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); } }
.lists { flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-6); overflow-x: auto; overflow-y: hidden; }
.list { flex: none; width: 312px; max-height: 100%; display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface-2) 94%, transparent); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); }
.list-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2); cursor: grab; }
.list-head h3 { font-size: var(--fs-base); flex: 1; min-width: 0; }
.list-head .count { font-size: var(--fs-xs); background: var(--surface); color: var(--text-2); border-radius: var(--r-full); padding-inline: var(--sp-2); min-width: 24px; text-align: center; border: 1px solid var(--border); }
.list-title-input { width: 100%; font-weight: 700; border: 1px solid var(--primary); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); background: var(--surface); }
.list-cards { flex: 1; min-height: 40px; overflow-y: auto; padding: var(--sp-1) var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-3); }
.list-foot { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.add-card-btn { width: 100%; justify-content: flex-start; color: var(--muted); }
/* pasting several lines into a new-card box: the «ایجاد کارت» question */
.paste-pop { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.paste-pop b { flex: 1; text-align: center; font-size: var(--fs-sm); color: var(--text-2); padding-inline-start: var(--sp-8); }
.paste-pop p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--text); }
/* `.dd-menu button` restyles every button in a popup as a menu row; these (more specific) rules keep real buttons looking like buttons */
.paste-pop .btn { inline-size: 100%; justify-content: center; min-block-size: var(--ctl); border: 1px solid var(--border-strong); border-radius: var(--r); background-color: var(--surface); color: var(--text); font-weight: 600; text-align: center; }
.paste-pop .btn:hover { background-color: var(--surface-2); }
.paste-pop .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.paste-pop .btn-primary:hover { background-color: var(--primary-600); border-color: var(--primary-600); }
.paste-pop .btn-ghost { inline-size: var(--ctl-sm); min-block-size: var(--ctl-sm); padding: 0; border-color: transparent; background-color: transparent; color: var(--muted); }
.paste-pop .btn-ghost:hover { background-color: var(--surface-2); color: var(--text); }
.paste-pop .row { align-items: center; }
/* completing a card: sparks from the circle, and the whole card takes a pale green for a moment (opacity only) */
.kdone.pop { overflow: visible; }
.kburst { position: absolute; inset: 0; pointer-events: none; }
.kburst b { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 5px; block-size: 5px; margin: -2.5px; border-radius: 50%; background: var(--success); opacity: 0; animation: kSpark 520ms var(--ease) forwards; animation-delay: calc(var(--i) * 12ms); }
@keyframes kSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(30px) scale(.4); } }
.kcard.pop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--success); opacity: 0; pointer-events: none; animation: kWash 700ms var(--ease) forwards; }
@keyframes kWash { 0% { opacity: 0; } 25% { opacity: .16; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kburst b, .kcard.pop::after { animation: none; display: none; } }
/* card hover actions (mouse only): rename in place, archive when completed */
.kact { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); z-index: 2; display: flex; gap: var(--sp-1); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
.kcard:hover .kact, .kcard:focus-within .kact { opacity: 1; pointer-events: auto; }
.kact-btn { inline-size: var(--sp-8); block-size: var(--sp-8); padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); display: grid; place-items: center; font-size: var(--fs-xs); cursor: pointer; box-shadow: var(--shadow-sm); transition: color var(--t-fast), border-color var(--t-fast); }
.kact-btn:hover, .kact-btn:focus-visible { color: var(--primary); border-color: var(--primary); }
.kact-btn.archive:hover, .kact-btn.archive:focus-visible { color: var(--warn); border-color: var(--warn); }
@media (hover: none) { .kact { display: none; } }
@media (prefers-reduced-motion: reduce) { .kact, .kact-btn { transition: none; } }
.kcard.editing .kact { display: none; }
.krow .kedit { flex: 1; min-inline-size: 0; }
.kedit { inline-size: 100%; min-block-size: var(--sp-8); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--primary); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; line-height: var(--lh-ui); resize: none; overflow: hidden; box-shadow: var(--ring); }
.kedit:focus { outline: none; }
/* «+» with a line in the gap between two cards: shows on hover (mouse only), click opens a new-card box at that spot */
.list-cards { position: relative; }
.gap-add { position: absolute; inset-inline: var(--sp-3); block-size: var(--sp-6); transform: translateY(-50%); z-index: 3; display: grid; place-items: center; pointer-events: none; animation: gap-in var(--t-fast) var(--ease); }
.gap-add::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 2px; margin-block-start: -1px; border-radius: var(--r-full); background: var(--primary); opacity: .55; }
.gap-add-btn { position: relative; inline-size: var(--sp-6); block-size: var(--sp-6); padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: var(--fs-xs); cursor: pointer; pointer-events: auto; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease); }
.gap-add-btn:hover, .gap-add-btn:focus-visible { transform: scale(1.15); }
@keyframes gap-in { from { opacity: 0; } }
@media (hover: none) { .gap-add { display: none; } }
@media (prefers-reduced-motion: reduce) { .gap-add { animation: none; } .gap-add-btn { transition: none; } }
.kcard { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3); box-shadow: var(--shadow-sm); cursor: pointer; touch-action: pan-y; transition: box-shadow var(--t-med) var(--ease), border-color var(--t-fast), transform var(--t-med) var(--ease); user-select: none; }
@media (hover: hover) { .kcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); } }
.kcard.done .ktitle { text-decoration: line-through; color: var(--muted); }
.kcard .ktop { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-block-end: var(--sp-2); }
.kcard .ktitle { font-weight: 600; font-size: var(--fs-base); line-height: var(--lh-ui); word-break: break-word; }
.kcard .kfoot { display: flex; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap; }
.kcard .kfoot .sp { flex: 1; }
.kcard .kmeta { display: inline-flex; align-items: center; gap: var(--sp-1); }
.kcard .kmeta.late { color: var(--danger); font-weight: 700; }
.kcard .kmeta.soon { color: var(--warn); font-weight: 700; }
.kcard .kmeta.ok { color: var(--success); }
.kcard.ghost { opacity: .35; }
.kcard.dragging, .list.dragging { position: fixed; z-index: 200; pointer-events: none; box-shadow: var(--shadow-lg); transform: rotate(-2.5deg) scale(1.02); opacity: .96; }
.list.dragging { transform: rotate(-1.5deg); }
.placeholder { border: 2px dashed var(--primary); background: var(--primary-soft); border-radius: var(--r); min-height: var(--ctl); flex: none; }
.list.placeholder { border-radius: var(--r-lg); }
.lbl { height: 8px; min-width: 40px; border-radius: var(--r-full); }
.lbl.text { height: 22px; padding-inline: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; color: #fff; display: inline-flex; align-items: center; min-width: 0; }
.lc-indigo { background: #2757ce; } .lc-violet { background: #6d4fd6; } .lc-rose { background: #d6456b; } .lc-amber { background: #d98a14; }
.lc-emerald { background: #0f9d7a; } .lc-sky { background: #0e8fd0; } .lc-slate { background: #64748b; } .lc-teal { background: #14a89a; }
.add-list { flex: none; width: 312px; }
.add-list > button { width: 100%; background: rgb(255 255 255 / .2); color: #fff; border: 0; min-height: 48px; border-radius: var(--r-lg); cursor: pointer; font-weight: 600; backdrop-filter: blur(6px); }
.add-list > button:hover { background: rgb(255 255 255 / .32); }
.composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }

/* modal */
.modal-back { position: fixed; inset: 0; z-index: 100; background: var(--scrim); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 4vh var(--sp-4); overflow-y: auto; animation: fade var(--t-fast); }
.modal { background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); animation: pop var(--t-med) var(--ease); }
.modal.wide { max-width: 940px; }
.modal-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-2); }
.modal-head h3 { font-size: var(--fs-lg); flex: 1; }
.modal-body { padding: var(--sp-3) var(--sp-6) var(--sp-6); }
.modal-foot { padding: 0 var(--sp-6) var(--sp-6); display: flex; gap: var(--sp-3); justify-content: flex-start; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.card-modal { display: grid; grid-template-columns: 1fr 260px; gap: var(--sp-6); }
.card-modal h4 { font-size: var(--fs-sm); color: var(--muted); margin-block-end: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.card-title-input { font-size: var(--fs-xl); font-weight: 800; width: 100%; border: 1px solid transparent; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); background: transparent; margin-inline-start: -8px; line-height: var(--lh-head); }
.card-title-input:hover { background: var(--surface-2); }
.card-title-input:focus { background: var(--surface); border-color: var(--primary); box-shadow: var(--ring); outline: none; }
.side-section { margin-block-end: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); align-items: stretch; }
.side-section > * { margin-block: 0 !important; }
.side-section > h4 { margin-block-end: 0 !important; }
.side-section > .btn:not(.side-btn) { align-self: flex-start; }
.side-section > .stack { gap: var(--sp-2) !important; }
.card-gap { height: var(--sp-5); }
.side-btn { justify-content: flex-start; width: 100%; }
.chip-set { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding-inline: var(--sp-3); border-radius: var(--r-full); background: var(--surface-2); font-size: var(--fs-sm); border: 1px solid var(--border); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.chk-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-1); border-radius: var(--r-sm); min-height: var(--ctl-sm); }
.chk-item:hover { background: var(--surface-2); }
.chk-item.done span.t { text-decoration: line-through; color: var(--muted); }
.chk-item .del { opacity: 0; } .chk-item:hover .del, .chk-item:focus-within .del { opacity: 1; }
@media (hover: none) { .chk-item .del { opacity: 1; } }
.chk-item { flex-wrap: wrap; }
.chk-item .chk-edit { flex: 1 1 144px; }
.chk-meta { display: inline-flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.chk-chip { min-height: var(--ctl-sm); padding-inline: var(--sp-2); }
.chk-chip.is-empty { opacity: 0; transition: opacity var(--t-fast); }
.chk-item:hover .chk-chip.is-empty, .chk-item:focus-within .chk-chip.is-empty { opacity: 1; }
@media (hover: none) { .chk-chip.is-empty { opacity: 1; } }
.comment { display: flex; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.comment .bubble { background: var(--surface-2); border-radius: var(--sp-1) var(--r-lg) var(--r-lg) var(--r-lg); padding: var(--sp-2) var(--sp-3); flex: 1; min-width: 0; }
.comment .body { white-space: pre-wrap; word-break: break-word; }
/* long comment: cut with a fade; «نمایش بیشتر» sits under it */
.cmt-clamp { position: relative; }
.cmt-clamp.is-long .body { overflow: hidden; }
.cmt-clamp.cmt-anim .body { transition: max-block-size 260ms var(--ease); }
.cmt-clamp::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: var(--ctl-sm); block-size: var(--sp-10); background: linear-gradient(to bottom, transparent, var(--surface-2)); opacity: 0; transition: opacity 260ms var(--ease); pointer-events: none; }
.cmt-clamp.is-long:not(.is-open)::after { opacity: 1; }
.cmt-more-btn { display: flex; margin-inline: auto; color: var(--muted); gap: var(--sp-2); font-size: var(--fs-sm); }
.cmt-more-btn[hidden] { display: none; }
.cmt-more-btn:hover { color: var(--text); }
.cmt-more-btn i { font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { .cmt-clamp::after, .cmt-clamp.cmt-anim .body { transition: none; } }
.file-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r); margin-block-end: var(--sp-2); }
.file-row .thumb { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; color: var(--muted); overflow: hidden; flex: none; }
.file-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r); padding: var(--sp-4); text-align: center; color: var(--muted); cursor: pointer; transition: all var(--t-fast); }
.dropzone:hover, .dropzone.over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.activity li { padding: var(--sp-1) 0; color: var(--text-2); font-size: var(--fs-sm); list-style: none; }
.activity { padding: 0; margin: 0; }

/* Jalali date picker */
.jp { position: absolute; z-index: 300; width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-3); animation: pop var(--t-fast); }
.jp-head { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-2); }
.jp-head .title { flex: 1; text-align: center; font-weight: 700; cursor: pointer; padding: var(--sp-2); border-radius: var(--r-sm); }
.jp-head .title:hover { background: var(--surface-2); }
.jp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.jp-grid .wd { font-size: var(--fs-xs); color: var(--muted); padding: var(--sp-1) 0; font-weight: 700; }
.jp-grid button { height: 36px; border: 0; background: none; border-radius: var(--r-sm); cursor: pointer; color: var(--text); font-size: var(--fs-sm); }
.jp-grid button:hover { background: var(--surface-2); }
.jp-grid button.today { box-shadow: inset 0 0 0 1.5px var(--primary); }
.jp-grid button.sel { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.jp-grid button.fri { color: var(--danger); }
.jp-grid button.sel.fri { color: var(--on-primary); }
.jp-grid button.out { opacity: .3; }
.jp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.jp-months button { height: var(--ctl); border: 0; background: var(--surface-2); border-radius: var(--r-sm); cursor: pointer; }
.jp-months button:hover, .jp-months button.sel { background: var(--primary); color: var(--on-primary); }
.jp-foot { display: flex; justify-content: space-between; margin-block-start: var(--sp-2); }

/* toast & theme options */
.toasts { position: fixed; inset-block-end: var(--sp-5); inset-inline-start: var(--sp-5); z-index: 500; display: flex; flex-direction: column; gap: var(--sp-3); }
.toast { min-width: 260px; max-width: 380px; background: var(--text); color: var(--bg); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--sp-3); animation: pop var(--t-med) var(--ease); font-size: var(--fs-sm); }
.theme-opt { position: relative; border: 2px solid var(--border-strong); background: transparent; color: var(--text); }
.theme-opt:hover { background: transparent; border-color: var(--primary); }
.btn.theme-opt.on, .btn.theme-opt.on:hover { border-color: var(--primary); background: var(--primary-soft) !important; color: var(--text); font-weight: 700; }
.theme-opt.on i { color: var(--primary); }
.theme-opt.on::after { content: "\f00c"; font-family: "Font Awesome 7 Pro"; font-weight: 900; position: absolute; inset-block-start: -8px; inset-inline-end: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: var(--fs-xs); }
.toast { position: relative; overflow: hidden; }
.toast-bar { position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: currentColor; opacity: .45; transform-origin: right; animation: toastBar linear forwards; }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.error { background: var(--danger); color: #fff; } .toast.success { background: var(--success); color: #fff; }
:root[data-theme="dark"] .toast.error, :root[data-theme="dark"] .toast.success { color: #0b1230; }

/* auth */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-hero { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--brand-700), var(--brand-500) 55%, var(--brand-400)); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-10) var(--sp-10); }
.auth-hero h1 { font-size: var(--fs-2xl); font-weight: 800; line-height: var(--lh-head); }
.auth-hero p { opacity: .92; max-width: 440px; margin-block-start: var(--sp-3); font-size: var(--fs-base); }
.auth-hero .feat { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-8); }
.auth-hero .feat div { display: flex; align-items: center; gap: var(--sp-3); background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); backdrop-filter: blur(6px); max-width: 420px; font-size: var(--fs-sm); }
.auth-hero::before, .auth-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgb(255 255 255 / .07); }
.auth-hero::before { width: 420px; height: 420px; inset-block-start: -140px; inset-inline-end: -120px; }
.auth-hero::after { width: 280px; height: 280px; inset-block-end: -90px; inset-inline-start: -60px; }
.auth-hero > * { position: relative; z-index: 1; }
.auth-form-wrap { display: grid; place-items: center; padding: var(--sp-8); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { font-size: var(--fs-xl); margin-block-end: var(--sp-1); }

/* roles matrix */
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: start; }
.matrix .grp td { background: var(--surface-2); font-weight: 700; color: var(--text-2); text-align: start; }

/* ---------- 6. Responsive ---------- */
@media (max-width: 1000px) {
  .grid-2 { grid-template-columns: 1fr !important; }
  .card-modal { grid-template-columns: 1fr; }
  .cal-layout { grid-template-columns: 1fr; }
  .userchip { padding-inline: 0; min-inline-size: var(--ctl); justify-content: center; } /* name hidden: the avatar sits centred in a 44px target, in line with the other top-bar buttons */
  .userchip .uname { display: none; }
}
@media (max-width: 860px) {
  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
  .page-board { padding-bottom: 0; }
  .topbar { padding-inline: var(--sp-3); gap: var(--sp-1); height: 56px; }
  .brand { margin-inline-end: auto; }
  .topbar > .grow { display: none; }
  /* the main menu becomes a bottom sheet above the tab bar */
  .topnav { position: fixed; inset-inline: 0; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: var(--sp-1); padding: var(--sp-3); background: var(--surface); border-top: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg); max-height: 70dvh; overflow-y: auto; transform: translateY(110%); visibility: hidden; transition: transform var(--t-med) var(--ease), visibility var(--t-med); z-index: 45; }
  body.nav-open .topnav { transform: none; visibility: visible; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: var(--scrim); touch-action: none; }
  body.nav-open { overflow: hidden; } /* the page behind the «بیشتر» sheet does not scroll */
  .topnav { overscroll-behavior: contain; } /* the sheet's own scroll never chains to the page */
  .desk-only { display: none !important; }
  .mob-only { display: inline-flex !important; }
  .nav-label.mob-only { display: block !important; }
  .bottom-nav { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 50; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); }
  .bottom-nav a, .bottom-nav button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-decoration: none !important; border: 0; background: none; cursor: pointer; position: relative; line-height: var(--lh-ui); }
  .bottom-nav i { font-size: var(--fs-lg); transition: transform var(--t-med) var(--ease); }
  .bottom-nav .active { color: var(--primary); }
  .bottom-nav .active i { transform: translateY(-1px) scale(1.08); }
  .bottom-nav .active::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--primary); }
  main.page { padding: var(--sp-4); }
  .auth { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-mobile-brand { display: flex !important; }
  .lists { padding: var(--sp-4) var(--sp-3) var(--sp-5); scroll-snap-type: x proximity; }
  .list { width: 86vw; scroll-snap-align: center; }
  .board-bar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .board-bar h2 { flex: 1; max-width: none; font-size: var(--fs-base); }
  .board-bar .grow { display: none; }
  .board-bar .filter, .live-dot { display: none; }
  .hide-sm { display: none; }
  .modal-back { padding: 0; align-items: stretch; }
  .modal { border-radius: 0; min-height: 100vh; min-height: 100dvh; max-width: none !important; }
  .modal-head { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
  .modal-body { padding: var(--sp-3) var(--sp-4) var(--sp-5); }
  .modal-foot { padding: 0 var(--sp-4) var(--sp-5); }
  .grid-2e { grid-template-columns: 1fr !important; }
  .page-head { margin-block-end: var(--sp-4); }
  .page-head h2 { font-size: var(--fs-lg); }
  .notif-panel { position: fixed; inset-inline: var(--sp-2); top: calc(56px + var(--sp-1)); width: auto; }
  .toasts { inset-inline: var(--sp-3); inset-block-end: calc(var(--bottomnav-h) + var(--sp-3)); }
  .toast { min-width: 0; max-width: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .stat { padding: var(--sp-3); gap: var(--sp-3); }
  .stat .num { font-size: var(--fs-xl); }
  .stat .ic { width: 40px; height: 40px; font-size: var(--fs-base); }
  .tabs { overflow-x: auto; white-space: nowrap; }
  .tips { grid-template-columns: 1fr !important; }
  table.t th, table.t td { padding: var(--sp-3); }
  .task-row { padding: var(--sp-3) var(--sp-4); }
  .arch-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .stat .num { font-size: var(--fs-lg); }
  .board-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .board-tile { min-height: 110px; padding: var(--sp-3); }
}
@media print { .topbar, .bottom-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* =====================================================================
   Page components (carried from v1, normalised to the tokens)
   ===================================================================== */
/* =====================================================================
   Ishlar additions
   ===================================================================== */
.hide-sm { }
.sep { border: 0; border-top: 1px solid var(--border); width: 100%; margin: 4px 0; }
.sec-title { font-size: var(--fs-base); margin-block: 4px 12px; display: flex; align-items: center; gap: 8px; }
.grid-2e { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--border); align-items: center; }
.filter-row .input, .filter-row .select { min-height: var(--ctl); }
/* /my-tasks and /archive filters: wrap onto a second line when they do not fit, never wider than the box; the clear button, count and select-all keep their place so nothing shifts when a filter is set. */
.mt-filters { flex-wrap: wrap; }
.mt-filters > * { flex: 0 0 auto; max-inline-size: 100%; }
.mt-filters > .grow { flex: 1 0 0; }
.mt-filters > [data-lf-clear][hidden], .mt-filters > .arch-all[hidden] { display: inline-flex; visibility: hidden; }
.mt-filters > [data-lf-count] { min-inline-size: 96px; white-space: nowrap; }
.mt-filters > .input { flex: 2 1 240px; min-inline-size: 0; }
.mt-filters > .select { flex: 1 1 150px; min-inline-size: 0; inline-size: auto; text-overflow: ellipsis; }
.warn-t { color: var(--warn); } .danger-t { color: var(--danger); }
.info-list { display: grid; gap: 8px; }
.info-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); border-bottom: 1px dashed var(--border); padding-block-end: 8px; }
.avatar.img { background: var(--surface-3); overflow: hidden; } .avatar.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { --size: 30px; }
.avatar.lg.av-prev, .av-prev .avatar { --size: 56px; }
.auth-mobile-brand { display: none; align-items: center; gap: 12px; font-size: var(--fs-xl); }
.lock-ic, .update-ic { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; font-size: var(--fs-2xl); background: var(--primary-soft); color: var(--primary); }
.lock-ic { background: var(--danger-soft); color: var(--danger); }
.captcha-img { border-radius: var(--r); border: 1px solid var(--border); background: #eef0f8; flex: none; }
.captcha-in { text-align: center; letter-spacing: 6px; font-size: var(--fs-lg); font-weight: 700; max-width: 150px; }
.update-back { z-index: 900; }
.dot.warn { background: var(--warn); }
.btn.danger-ic { color: var(--danger); }
.count-badge { min-width: 18px; height: 18px; padding-inline: 4px; border-radius: var(--r-full); background: #fff; color: var(--primary); font-size: var(--fs-xs); font-weight: 800; display: inline-grid; place-items: center; }
.btn.on { background: rgb(255 255 255 / .4) !important; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-block-end: 20px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; background: none; color: var(--muted); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-block-end: -1px; text-decoration: none !important; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab .count { background: var(--surface-3); border-radius: var(--r-full); padding-inline: 8px; font-size: var(--fs-xs); }
.sm-tabs { margin-block: 8px 16px; } .sm-tabs .tab { padding: 8px 12px; font-size: var(--fs-sm); }

/* boards index */
.board-tile .tile-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.board-tile .tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .08), rgb(0 0 0 / .45)); }
.board-tile .tile-top, .board-tile .meta { position: relative; z-index: 1; }
.board-tile .tile-star { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; color: var(--star); text-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.board-tile { overflow: hidden; }

/* board page: full-page background (#7) */
.board-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
/* dark theme: dim the board background a little so it sits calmer behind the lists */
.board-bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .28); opacity: 0; pointer-events: none; transition: opacity var(--t-med); }
:root[data-theme="dark"] .board-bg::after { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board-bg::after { opacity: 1; } }
.board-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.board-bg-img.blurred { inset: -30px; filter: blur(var(--blur, 0px)); }

.bg-prev { position: relative !important; inset: auto !important; height: 150px; border-radius: var(--r-lg); z-index: 0 !important; }
.page-board .topbar { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.board-bar { padding: 12px 20px; }
.board-bar h2 { max-width: 40vw; }
.board-bar .filter { background: rgb(255 255 255 / .18); color: #fff; }
/* dropdowns in the board bar must stay readable (#4) */
.board-bar select.filter { color-scheme: light; }
.board-bar select.filter option, select option { color: var(--text); background: var(--surface); }
.lists { padding-block-end: 28px; }
.list { background: color-mix(in srgb, var(--surface-2) 90%, transparent); }
.list-head .count.over { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.pop-menu { position: fixed !important; min-width: 210px; max-width: min(340px, 94vw); z-index: 400 !important; }
.pop-menu.wide { min-width: 260px; }
.pop-menu.dd-menu button.danger { color: var(--danger); }
.pop-list { display: flex; flex-direction: column; gap: 2px; }
.pop-list .pop-title { font-weight: 700; font-size: var(--fs-sm); padding: 8px 12px; color: var(--muted); }
.pop-list button.on { background-color: var(--primary-soft); }
.lbl-dot { display: inline-block; border-radius: 50%; flex: none; }
.lbl.text { }
.kcover { height: 64px; margin: -12px -12px 8px; border-radius: var(--r) var(--r) 0 0; background-size: cover; background-position: center; }
.kcard.urgent { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent), var(--shadow-sm); }
.urgent-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: var(--danger); border-radius: var(--r-full); padding: 1px 8px; margin-block-end: 4px; }
.kcard .ktop { margin-block-end: 8px; }
.list-cards > .kcard:not(.dragging) { content-visibility: auto; contain-intrinsic-size: auto 92px; }
.kcard .krow { display: flex; align-items: flex-start; }
.kcard .krow .ktitle { flex: 1; min-width: 0; }
.kdone { flex: none; width: 0; height: 20px; margin-block-start: 2px; margin-inline-end: 0; padding: 0; overflow: hidden; opacity: 0; border-radius: 50%; border: 2px solid var(--border-strong); background: transparent; color: transparent; display: inline-grid; place-items: center; cursor: pointer; font-size: var(--fs-xs); transition: width .15s, margin .15s, opacity .15s, background .2s, color .2s, border-color .15s; }
.kcard:hover .kdone, .kcard:focus-within .kdone, .kdone.on { width: 20px; margin-inline-end: 8px; opacity: 1; border-width: 2px; }
.kdone:hover:not(:disabled) { border-color: var(--success); color: color-mix(in srgb, var(--success) 55%, transparent); }
.kdone.on, .kdone.on:hover:not(:disabled) { background: var(--success); border-color: var(--success); color: #fff; }
.kdone:disabled { cursor: default; }
.kcard.cover-full { color: #fff; border-color: transparent; }
.kcard.cover-full .ktitle, .kcard.cover-full .kfoot, .kcard.cover-full .kmeta, .kcard.cover-full .kmeta.ok { color: #fff; }
.kcard.cover-full.done .ktitle { color: rgba(255, 255, 255, .75); }
.kcard.cover-full .kdone:not(.on) { border-color: rgba(255, 255, 255, .8); }
/* card right-click menu header: one small bar with the card id (#ISH-000050); click copies it */
.pop-key { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); inline-size: 100%; min-block-size: var(--sp-6); margin: 0 0 var(--sp-1); padding: var(--sp-1) var(--sp-3); border: 0; border-block-end: 1px solid var(--border); border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-xs); line-height: var(--lh-ui); cursor: pointer; transition: color var(--t-fast); }
.pop-key:hover, .pop-key:focus-visible { color: var(--primary); outline: none; }
.pop-key .pk-t { font-weight: 400; }
.pop-key .pk-id { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-2); } .pop-key:hover .pk-id, .pop-key:focus-visible .pk-id { color: inherit; }
/* labels on board cards: clickable strip, and a ring so a label stays visible on a card of the same colour */
.kcard .ktop { cursor: pointer; padding: 2px; }
.kcard .ktop.open { gap: 4px; }
.kcard .ktop .lbl, .kcard .ktop .lbl-pill { box-shadow: 0 0 0 2px rgb(255 255 255 / .92); }
.kcard .ktop .lbl-pill { font-size: var(--fs-xs); padding: 1px 8px; min-height: 20px; line-height: 18px; border-radius: var(--r-sm); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head-row { position: sticky; top: 0; z-index: 4; background: var(--surface); padding-block: 8px; margin-inline: -2px; padding-inline: 2px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.meta-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.meta-chip:hover:not(:disabled):not(.static) { border-color: var(--primary); background: var(--surface); }
.meta-chip:disabled, .meta-chip.static { cursor: default; }
.meta-chip.due-late { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.meta-chip.due-soon { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.meta-chip.due-ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.meta-chip .avatars { display: inline-flex; } .meta-chip .lbl-pill { margin: 0; }
.ai-key { margin-inline-start: auto; opacity: .7; }
.kcheck { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2; width: 22px; height: 22px; border-radius: var(--r-sm); border: 2px solid var(--border-strong); background: var(--surface); color: transparent; display: grid; place-items: center; font-size: var(--fs-xs); }
.done-note { padding: var(--sp-2) var(--sp-3); text-align: center; }
/* new-card box: «مسئول کارت» avatar button at the end of the buttons row (empty = dashed ＋) and its member list */
.composer .row { align-items: center; }
.asg-btn { position: relative; flex: none; box-sizing: border-box; block-size: var(--ctl-sm); min-inline-size: var(--ctl-sm); padding-inline: var(--sp-2); border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; font-size: var(--fs-sm); line-height: 1; transition: border-color var(--t-fast), color var(--t-fast); }
.asg-btn::before { content: ""; position: absolute; inset: -4px; } /* hit area grows to 44px, like the neighbouring small buttons */
.asg-btn > i { font-size: var(--fs-sm); }
.asg-btn .avatars { display: inline-flex; align-items: center; }
.asg-btn:hover, .asg-btn:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.asg-btn.none { border-style: dashed; background: none; color: var(--muted); }
.av-more { display: inline-grid; place-items: center; min-inline-size: 24px; block-size: 24px; margin-inline-start: -8px; padding-inline: var(--sp-1); border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); border: 2px solid var(--surface); }
.asg-pop { padding: var(--sp-1); }
.asg-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.asg-pop .asg-noav { inline-size: 24px; block-size: 24px; flex: none; border-radius: 50%; border: 1px dashed var(--border-strong); color: var(--muted); display: inline-grid; place-items: center; font-size: var(--fs-xs); }
.asg-pop .asg-none:disabled { opacity: .5; cursor: not-allowed; }
.asg-pop hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-1) var(--sp-2); }
.asg-pop .asg-row { gap: var(--sp-3); }
.asg-note { padding: var(--sp-2) var(--sp-3); }
.asg-defaults { margin-block-start: var(--sp-3); display: grid; gap: var(--sp-2); }
.asg-defaults[hidden] { display: none; }
.asg-defaults .opt { display: flex; align-items: center; gap: var(--sp-3); min-block-size: var(--ctl); padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; font-size: var(--fs-sm); }
.asg-defaults .opt.on { border-color: var(--primary); background: var(--primary-soft); }
.asg-defaults .opt input { accent-color: var(--primary); inline-size: 18px; block-size: 18px; }
@media (prefers-reduced-motion: reduce) { .asg-btn { transition: none; } }
/* settings → SMS → test message: number field with the send button on the same line, admin quick-fill chips under it */
.test-send { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; inline-size: 100%; }
.test-send .field { flex: 1 1 220px; min-inline-size: 0; }
.test-go { flex: none; min-block-size: var(--ctl); }
.test-fill { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.test-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.test-chips .chip { min-block-size: var(--ctl-sm); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
/* members pane: «following this board» bell per member (owners and managers only) */
.mem-watch { color: var(--muted); }
.mem-watch.on { color: var(--primary); background: var(--primary-soft); }
.mem-watch:disabled { opacity: .45; cursor: default; }
.mem-hint { margin: 0; }
.mem-hint i { color: var(--primary); }
.list-head .list-help { color: var(--muted); }
.help-pop { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.help-pop b { font-size: var(--fs-sm); }
.help-pop ul { margin: 0; padding-inline-start: var(--sp-4); display: grid; gap: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--text-2); }
/* reopened card in a done list: a strip at the bottom of the card counts down to the move back (the card grows smoothly to fit it) */
.kret { position: relative; display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) calc(var(--sp-3) * -1) calc(var(--sp-3) * -1); padding: var(--sp-1) var(--sp-3); border-block-start: 1px solid var(--border); border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px); background: var(--primary-soft); color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-ui); cursor: default; overflow: hidden; }
.kret > i:first-child { flex: none; color: var(--primary); font-size: var(--fs-xs); }
.kret-t { flex: 1; min-inline-size: 0; }
.kret-x { position: relative; flex: none; min-block-size: var(--ctl-sm); padding-inline: var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.kret-x::before { content: ""; position: absolute; inset-inline: 0; inset-block: -4px; }
.kret-x:hover, .kret-x:focus-visible { background: color-mix(in srgb, var(--primary) 12%, transparent); outline: none; }
.kret-bar { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--primary); transform-origin: 100% 50%; animation: retBar linear forwards; }
@keyframes retBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .kret-bar { animation: none; } }
/* select mode: a checkbox in the list header selects / clears every card of that list (dash = some of them) */
.lcheck { position: relative; flex: none; inline-size: 22px; block-size: 22px; padding: 0; border: 2px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.lcheck::before { content: ""; position: absolute; inset: -11px; }
.lcheck:hover:not(:disabled) { border-color: var(--primary); }
.lcheck[aria-checked="true"], .lcheck[aria-checked="mixed"] { background: var(--primary); border-color: var(--primary); }
.lcheck:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lcheck:disabled { opacity: .4; cursor: default; }
@media (prefers-reduced-motion: reduce) { .lcheck { transition: none; } }
.kcard.selecting { cursor: pointer; }
.kcard.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.kcard.selected .kcheck { background: var(--primary); border-color: var(--primary); color: #fff; }
.bulk-bar { position: absolute; inset-block-end: 16px; inset-inline: 16px; z-index: 60; margin-inline: auto; max-width: 860px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
#selectBtn.on { background: var(--primary-soft); border-color: var(--primary); }
.search-list { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); }
.search-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none !important; }
.search-item:last-child { border-bottom: 0; }
.search-item i { color: var(--muted); width: 18px; text-align: center; }
.search-item.on { background: var(--primary-soft); }
.search-item .done-t { text-decoration: line-through; color: var(--muted); }
kbd { font: inherit; font-size: var(--fs-xs); padding: 2px 8px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); }
.tpl-row { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px; border-bottom: 1px solid var(--border); }
.tpl-row:last-child { border-bottom: 0; }
.tpl-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.tpl-edit textarea { height: 100%; }
.tpl-preview { border: 1px dashed var(--border); border-radius: var(--r); padding: 8px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.tpl-preview [data-preview] { white-space: pre-wrap; line-height: 1.9; word-break: break-word; }
@media (max-width: 720px) { .tpl-edit { grid-template-columns: 1fr; } }
.tpl-row[hidden], #tplBox section[hidden] { display: none; }.tpl-row textarea { min-height: 54px; line-height: 1.9; }
.tpl-row .chip { cursor: pointer; font-size: var(--fs-xs); }
.tpl-tok { color: var(--muted); font-size: var(--fs-xs); }
.sms-docs { flex-basis: 100%; }
.sms-docs[hidden] { display: none; }
.sms-credit { padding-block: var(--sp-2); }
.sms-credit [data-prov][hidden] { display: none; }
.tpl-help { margin-block-end: var(--sp-5); }
.tpl-help[hidden] { display: none; }
.tpl-help-body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.tpl-help-list { margin: 0; padding-inline-start: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); line-height: var(--lh-body); }
.tpl-help-body > .muted { line-height: var(--lh-body); padding-block-start: var(--sp-3); border-block-start: 1px dashed var(--border); }
.tpl-kg { display: flex; align-items: center; gap: var(--sp-3); margin-inline-start: auto; }
.tpl-kg-name { border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.tpl-kg-name:hover { color: var(--primary); }
.tpl-kg-copy { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 28px; padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-xs); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.tpl-kg-copy:hover { border-color: var(--primary); color: var(--primary); }
.tpl-kg-name:focus-visible, .tpl-kg-copy:focus-visible, .tpl-reset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.tpl-reset { display: inline-flex; align-items: center; gap: var(--sp-2); border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.tpl-reset:hover { color: var(--text); }
.tpl-preview { line-height: 1.8; }
.danger-t { color: var(--danger); }
.note-list { margin: 12px 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-xs); line-height: 1.9; color: var(--muted); }
.sys-table { font-size: var(--fs-sm); width: 100%; direction: ltr; }
.sys-table th, .sys-table td { font-size: var(--fs-sm); text-align: left; vertical-align: top; padding: 8px 12px; }
.sys-table .sys-k { color: var(--muted); white-space: nowrap; text-align: left; }
.sys-table .sys-v { font-weight: 700; text-align: left; word-break: break-word; }
.sys-table .sys-d { color: var(--text-2); line-height: 1.8; min-width: 190px; }
.theme-menu { min-width: max-content; }
.theme-menu button { white-space: nowrap; }
.dd-menu button.on { background: var(--primary-soft); font-weight: 700; }
.dd-menu button .grow { flex: 1; }
/* welcome wizard */
.modal.wz-modal { max-width: 520px; }
.wz { display: flex; flex-direction: column; gap: 20px; height: 470px; max-height: calc(100vh - 90px); text-align: center; }
.wz-dots { display: flex; justify-content: center; gap: 8px; }
.wz-dots span { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--border-strong); transition: all .2s; }
.wz-dots span.done { background: var(--primary); opacity: .5; } .wz-dots span.on { width: 26px; background: var(--primary); }
.wz-body { flex: 1; min-height: 0; overflow-y: auto; align-items: center; justify-content: center; }
.wz-body h2 { font-size: var(--fs-xl); } .wz-body p { max-width: 420px; line-height: 2; }
.wz-themes { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 440px; margin-inline: auto; }
.wz-theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wz-theme-row .theme-opt { width: 100%; height: 46px; }
.wz-theme-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: start; border: 2px solid var(--border-strong); border-radius: var(--r); background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.wz-theme-card:hover { border-color: var(--primary); }
.wz-theme-card.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.wz-theme-card > i:first-child { font-size: var(--fs-lg); color: var(--muted); width: 22px; text-align: center; } .wz-theme-card.on > i:first-child { color: var(--primary); }
.wz-tc-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wz-tc-tx small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.7; }
.wz-tc-ck { color: var(--primary); font-size: var(--fs-lg); }
.wz-ic { width: 68px; height: 68px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: var(--fs-2xl); color: #fff; background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); margin-inline: auto; }
.wz-ic.ok { background: linear-gradient(135deg, var(--success), var(--brand-400)); }
.wz-tips { display: flex; flex-direction: column; gap: 8px; text-align: start; font-size: var(--fs-sm); color: var(--text-2); }
.wz-foot { display: flex; align-items: center; gap: 8px; }
.team-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.team-row:last-child { border-bottom: 0; }
tr.clickable { cursor: pointer; } tr.clickable:hover td, tr.clickable:focus td { background: var(--surface-2); }
.lists.panning { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.badge.card-id { border: 0; cursor: pointer; height: 24px; padding-inline: 12px; }
.list.over { background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
.kcover:not(.img) { height: 14px; margin-block-end: 8px; }
.card-cover:not(.img) { height: 36px; }
.done-circle.on:hover:not(:disabled) { background: #fff; border-color: var(--warn); color: var(--warn); }
.done-circle.on:hover:not(:disabled) i::before { content: "\f0e2"; }
/* admin layout: grouped side menu on desktop, a swipeable chip strip on phones */
.admin-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.admin-content { min-width: 0; }
.admin-side { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); display: flex; flex-direction: column; gap: 2px; max-height: calc(100dvh - var(--topbar-h) - var(--sp-8)); overflow-y: auto; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.admin-side a { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl); padding-inline: var(--sp-3); border-radius: var(--r); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none !important; transition: background var(--t-fast), color var(--t-fast); }
.admin-side a i { color: var(--muted); width: 18px; text-align: center; transition: color var(--t-fast); }
.admin-side .side-group { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.admin-side .side-group:first-child { padding-block-start: var(--sp-1); }
.admin-side a:hover { background: var(--surface-2); color: var(--text); }
.admin-side a.active { background: var(--primary-soft); color: var(--primary); }
.admin-side a.active i { color: var(--primary); }
@media (max-width: 860px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .admin-side { position: sticky; top: 56px; z-index: 10; flex-direction: row; gap: var(--sp-2); max-height: none; overflow-x: auto; overflow-y: hidden; margin-inline: calc(var(--sp-4) * -1); padding: var(--sp-2) var(--sp-4); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border: 0; border-radius: 0; box-shadow: none; scrollbar-width: none; }
  .admin-side::-webkit-scrollbar { display: none; }
  .admin-side .side-group, .admin-side a i { display: none; }
  .admin-side a { flex: none; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-full); }
  .admin-side a.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
}

/* settings panels: a titled card made of rows (text on one side, control on the other) */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel + .panel, .panels > .panel { margin-block-start: 0; }
.panels { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.panel-h { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.panel-h .ic { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.panel-h h2, .panel-h h3 { font-size: var(--fs-base); line-height: var(--lh-ui); }
.panel-h p { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-ui); }
.panel.danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.panel.danger .panel-h .ic { background: var(--danger-soft); color: var(--danger); }
.srow { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.srow:last-child { border-bottom: 0; }
label.srow { cursor: pointer; }
.srow .t { flex: 1; min-width: 0; }
.srow .t b { display: block; font-size: var(--fs-sm); line-height: var(--lh-ui); }
.srow .t > span { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body); }
.srow .c { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
.srow.col { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.panel-note { display: flex; gap: var(--sp-3); margin: 0 var(--sp-5) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); line-height: var(--lh-body); }
.panel-note i { margin-top: var(--sp-1); }
.panel-status { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); background: var(--success-soft); color: var(--success); border-bottom: 1px solid var(--border); font-weight: 700; font-size: var(--fs-sm); }
.panel-status.locked { background: var(--danger-soft); color: var(--danger); }
.panel-status .pulse { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: pulse-ring 2s infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; min-height: calc(var(--ctl) + 2px); background: var(--surface); }
.stepper button { width: var(--ctl); align-self: stretch; color: var(--text-2); font-size: var(--fs-lg); background: none; border: 0; cursor: pointer; }
.stepper button:hover { background: var(--surface-2); color: var(--primary); }
.stepper input { width: 64px; border: 0; text-align: center; background: transparent; color: var(--text); align-self: stretch; direction: ltr; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.stepper input:focus { outline: 0; box-shadow: none; background: var(--primary-soft); }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.panel-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border-top: 1px solid var(--border); }
.stepper .unit { padding-inline: var(--sp-3); border-inline-start: 1px solid var(--border); align-self: stretch; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); }
.segmented { display: inline-flex; padding: var(--sp-1); background: var(--surface-2); border-radius: var(--r); gap: 2px; }
.segmented button { min-height: 36px; padding-inline: var(--sp-4); border: 0; background: none; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.segmented button.on { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: var(--shadow-sm); }
.person { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); min-height: var(--ctl); }
.person:last-child { border-bottom: 0; }
.person small { color: var(--muted); direction: ltr; unicode-bidi: isolate; margin-inline-start: var(--sp-2); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); background: var(--surface); overflow: hidden; }
.kv > div { padding: var(--sp-3) var(--sp-5); border-block-end: 1px solid var(--border); border-inline-end: 1px solid var(--border); } /* hairlines on the cells, so a short last row leaves no grey blocks */
.kv small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.kv b { font-size: var(--fs-sm); direction: ltr; unicode-bidi: isolate; display: inline-block; }
.kv b.ltr { direction: ltr; } .kv b { direction: rtl; }
.kv-h { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--text-2); background: var(--surface-2); border-block: 1px solid var(--border); }
.kv-h i { color: var(--primary); }
.kv-dot { display: inline-block; inline-size: var(--sp-2); block-size: var(--sp-2); margin-inline-end: var(--sp-2); border-radius: 50%; background: var(--muted); vertical-align: middle; }
.kv-dot.ok { background: var(--success); } .kv-dot.warn { background: var(--warn); } .kv-dot.bad { background: var(--danger); }
.savebar { position: fixed; inset-inline: 0; bottom: var(--sp-5); display: flex; justify-content: center; pointer-events: none; z-index: 80; transition: transform var(--t-med) var(--ease), opacity var(--t-med); transform: translateY(160%); opacity: 0; }
.savebar.show { transform: none; opacity: 1; }
.savebar > div { pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); background: var(--text); color: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); }
.savebar .btn { min-height: var(--ctl-sm); }
.savebar .ghost { background: transparent; color: inherit; border-color: transparent; opacity: .85; }
@media (max-width: 860px) {
  .srow { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4); }
  .srow .c { width: 100%; justify-content: space-between; }
  label.srow { flex-wrap: nowrap; } label.srow .c { width: auto; }
  .panel-h, .person { padding-inline: var(--sp-4); }
  .panel-note { margin-inline: var(--sp-4); }
  .savebar { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--sp-3)); }
}
.card-id { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: inherit; cursor: pointer; }
.card-id:hover { color: var(--primary); }
.card-idtitle { font-size: var(--fs-xs); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* card modal */
.card-modal { grid-template-columns: 1fr 260px; }
.card-modal > div { min-width: 0; }
.card-cover { height: 110px; border-radius: var(--r); margin-block-end: 12px; background-size: cover; background-position: center; }
.side-btn { justify-content: flex-start; }
.add-to-card { border-style: dashed; color: var(--primary); }
.chip.on-static { background: var(--surface-2); cursor: default; }
.member-line { padding: 2px 0; }
.desc-actions { margin-block-start: 8px; }
.checklist { margin-block-end: 12px; }
.files-grid { display: grid; gap: 8px; }
.file-row .thumb { width: 52px; height: 52px; border: 0; cursor: pointer; padding: 0; font-size: var(--fs-xl); }
.file-row .thumb:hover { outline: 2px solid var(--primary); }
.cover-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-block-start: 8px; }
.cover-pick button { padding: 0; height: 52px; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; background: none; }
.cover-pick button.on { border-color: var(--primary); } .cover-pick img { width: 100%; height: 100%; object-fit: cover; }
.hist-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.mention { background: var(--primary-soft); color: var(--primary); border-radius: var(--r-sm); padding: 0 4px; font-weight: 600; }
.mention-pop { position: fixed; z-index: 800; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 4px; max-width: 94vw; }
.mention-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: none; border-radius: var(--r-sm); cursor: pointer; text-align: start; color: var(--text); }
.mention-item.on, .mention-item:hover { background: var(--primary-soft); }
.label-edit { border: 1px solid var(--border); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; }
.swatches.small .swatch { width: 26px; height: 26px; border-radius: var(--r-sm); border-width: 2px; }
.swatch[disabled] { opacity: .5; cursor: default; }
/* file viewer: top bar (zoom, download, close, name), the file, and a footer with ‹ counter › */
.lightbox { position: fixed; inset: 0; z-index: 700; background: rgb(8 10 22 / .94); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #fff; animation: lb-in var(--t-med) var(--ease); }
.lightbox:focus { outline: none; }
@keyframes lb-in { from { opacity: 0; } }
.lb-top { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.lb-title { flex: 1; min-width: 0; margin-inline-start: var(--sp-2); text-align: start; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-btn { flex: none; inline-size: var(--sp-11); block-size: var(--sp-11); border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: var(--fs-base); text-decoration: none; transition: background var(--t-fast); }
.lb-btn:hover { background: rgb(255 255 255 / .28); text-decoration: none; }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-btn[hidden] { display: none; }
.lb-mid { position: relative; min-height: 0; }
.lb-foot { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); font-size: var(--fs-sm); }
/* counter: same height as the round buttons next to it, text centred both ways (line-height 1 so the Persian digits sit in the middle of the shape) */
.lb-pill { display: inline-flex; align-items: center; justify-content: center; block-size: var(--sp-11); padding-inline: var(--sp-5); border-radius: var(--r-full); background: rgb(255 255 255 / .14); min-inline-size: 96px; line-height: 1; font-variant-numeric: tabular-nums; }
.lb-linkbox { inline-size: 100%; display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); border: 1px solid rgb(255 255 255 / .2); border-radius: var(--r-lg); background: rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); min-inline-size: 0; }
.lb-linkbox > i { font-size: var(--fs-2xl); color: rgb(255 255 255 / .7); margin-block-end: var(--sp-1); }
.lb-linkbox .lb-none-sub { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-none { position: absolute; inset: 0; margin: auto; inline-size: min(360px, calc(100% - var(--sp-8))); block-size: fit-content; display: grid; justify-items: center; gap: var(--sp-2); text-align: center; }
.lb-none > i { font-size: 56px; color: rgb(255 255 255 / .6); margin-block-end: var(--sp-2); }
.lb-none b { font-weight: 600; max-inline-size: 100%; overflow-wrap: anywhere; }
.lb-none-sub { font-size: var(--fs-sm); color: rgb(255 255 255 / .7); }
.lb-none p { margin: var(--sp-2) 0 var(--sp-3); color: rgb(255 255 255 / .8); }
@media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } .lb-btn { transition: none; } }
.pub-board { min-height: 100vh; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.pub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; color: #fff; }
.pub-head h1 { font-size: var(--fs-2xl); } .pub-head p { opacity: .9; max-width: 640px; margin-top: 4px; }
.pub-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-lists { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 16px; flex: 1; }
.pub-list { flex: 0 0 290px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pub-list h3 { font-size: var(--fs-sm); padding: 4px 8px; } .pub-list .count { color: var(--muted); font-weight: 500; }
.pub-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.pub-card > summary { list-style: none; cursor: pointer; padding: 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.pub-card > summary::-webkit-details-marker { display: none; }
.pub-card .kcover { display: block; height: 14px; margin: -12px -12px 4px; border-radius: var(--r) var(--r) 0 0; }
.pub-card.done .pub-title { text-decoration: line-through; color: var(--muted); }
.pub-title { font-weight: 600; line-height: 1.6; word-break: break-word; }
.pub-lbls { display: flex; gap: 4px; flex-wrap: wrap; }
.pub-foot { display: flex; gap: 12px; align-items: center; font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap; }
.pub-detail { padding: 0 12px 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.pub-desc { white-space: normal; line-height: 1.9; margin-bottom: 8px; }
.pub-check { padding: 3px 0; } .pub-check.on { color: var(--muted); text-decoration: line-through; }
.pub-foot-note { text-align: center; color: #fff; opacity: .85; }
.lb-stage { position: absolute; inset: 0; display: flex; overflow: hidden; }
.lb-stage img { margin: auto; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: var(--r-sm); cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
/* zoomed: the image gets a pixel width and the stage scrolls; margin:auto keeps a small image centred instead of pinned to a corner */
.lb-stage.zoom { overflow: auto; overscroll-behavior: contain; }
.lb-stage.zoom img { max-inline-size: none; max-block-size: none; cursor: grab; }
.lb-stage.zoom.pan img { cursor: grabbing; }
.lb-pdf { inline-size: min(1000px, 100%); block-size: 100%; margin: auto; border: 0; border-radius: var(--r-sm); background: #fff; }

/* archive / reports / calendar */
.arch-row { gap: 12px; }
.tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tip { display: flex; gap: 12px; padding: 16px 16px; align-items: flex-start; }
.tip .ic { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; flex: none; }
.rep-h { font-size: var(--fs-sm); margin-block-end: 12px; color: var(--text-2); }
.bar-row { display: grid; grid-template-columns: minmax(70px, 130px) 1fr 40px; align-items: center; gap: 12px; padding: 4px 0; font-size: var(--fs-sm); }
.bar-t { height: 8px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; } .bar-t i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-400), var(--primary)); border-radius: var(--r-full); }
.bar-n { text-align: end; }
.cols { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-block-end: 20px; position: relative; }
.cols .col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; position: relative; }
.cols .col i { display: block; width: 100%; max-width: 18px; background: var(--primary); border-radius: var(--r-sm) var(--r-sm) 0 0; opacity: .85; }
.cols.two .col i.a { background: var(--primary); } .cols.two .col i.b { background: var(--success); }
.cols .col span { position: absolute; bottom: -18px; font-size: var(--fs-xs); color: var(--muted); }
.dot-a, .dot-b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 4px; } .dot-a { background: var(--primary); } .dot-b { background: var(--success); }
.cal-layout { display: grid; grid-template-columns: 1fr 290px; gap: 20px; align-items: start; }
.cal-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cal-scroll { overflow-x: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(98px, 1fr)); min-width: 720px; }
.cal-wd { padding: 8px; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--surface-2); }
.cal-wd.fri { color: var(--danger); }
.cal-day { min-height: 112px; border-inline-start: 1px solid var(--border); border-top: 1px solid var(--border); padding: 4px; transition: background .12s; }
.cal-day.out { background: var(--surface-2); opacity: .5; }
.cal-day.today { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.cal-day.today .cal-num { background: var(--primary); color: #fff; }
.cal-day.fri .cal-num { color: var(--danger); } .cal-day.today.fri .cal-num { color: #fff; }
.cal-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; margin-block-end: 3px; }
.cal-items { display: flex; flex-direction: column; gap: 3px; }
.drop-over { background: var(--primary-soft) !important; outline: 2px dashed var(--primary); outline-offset: -2px; }
.cal-card { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); padding: 3px 8px; border-radius: var(--r-sm); color: #fff !important; text-decoration: none !important; cursor: pointer; min-width: 0; box-shadow: var(--shadow-sm); }
.cal-card[draggable="true"] { cursor: grab; } .cal-card.dragging { opacity: .4; } .cal-card.done { opacity: .55; text-decoration: line-through !important; }
.cal-card.urgent { box-shadow: 0 0 0 2px #ef4444; }
.cal-more { border: 0; background: none; color: var(--primary); font-size: var(--fs-xs); cursor: pointer; text-align: start; }
.cal-side { position: sticky; top: calc(var(--topbar-h) + 14px); max-height: calc(100vh - var(--topbar-h) - 28px); display: flex; flex-direction: column; }
.cal-un { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.cal-un-row { display: flex; align-items: center; gap: 4px; } .cal-un-row .cal-card { flex: 1; padding: 8px 8px; }
@media (max-width: 1000px) { .cal-side { position: static; max-height: none; } }
/* ===== markdown editor ===== */
.md-editor { border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.md-editor:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.md-bar { display: flex; align-items: center; gap: 2px; padding: 4px 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.md-bar.raw .md-btn:not(.md-rawbtn) { opacity: .35; pointer-events: none; }
.md-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 0; background: none; border-radius: var(--r-sm); cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-sm); }
.md-btn:hover { background: var(--surface-3); } .md-btn.on { background: var(--primary-soft); color: var(--primary); }
.md-rawbtn { font-weight: 600; font-size: var(--fs-xs); }
.md-sep { width: 1px; height: 18px; background: var(--border-strong); margin-inline: 4px; }
.md-linkrow { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .md-linkrow[hidden] { display: none; }
.md-linkrow .input { min-height: var(--ctl); }
.md-body { line-height: 1.9; word-break: break-word; }
.md-area { min-height: 120px; padding: 12px 16px; outline: none; max-height: 420px; overflow-y: auto; }
.md-area.empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.md-raw { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: ui-monospace, Consolas, monospace; direction: ltr; text-align: left; min-height: 160px; }
.md-view { padding: 4px 2px; }
.md-body > :first-child { margin-top: 0; } .md-body > :last-child { margin-bottom: 0; }
.md-body p { margin: 0 0 12px; } .md-body h3 { font-size: var(--fs-lg); margin: 16px 0 8px; } .md-body h4 { font-size: var(--fs-base); margin: 12px 0 8px; } .md-body h5 { font-size: var(--fs-base); margin: 12px 0 4px; }
.md-body ul, .md-body ol { margin: 0 0 12px; padding-inline-start: 24px; } .md-body li { margin-block: 2px; }
.md-body blockquote { margin: 0 0 12px; padding: 4px 12px; border-inline-start: 3px solid var(--primary); background: var(--surface-2); border-radius: var(--r-sm); color: var(--text-2); }
.md-body code { background: var(--surface-3); padding: 1px 8px; border-radius: var(--r-sm); font-family: ui-monospace, Consolas, monospace; font-size: .9em; direction: ltr; unicode-bidi: isolate; }
.md-body pre { background: var(--surface-3); padding: 12px 12px; border-radius: var(--r-sm); overflow-x: auto; direction: ltr; text-align: left; } .md-body pre code { background: none; padding: 0; }
.md-body hr { border: 0; border-top: 1px solid var(--border-strong); margin: 16px 0; }
.md-body a { color: var(--primary); text-decoration: underline; }

/* ===== custom dropdowns ===== */
.cselect { position: relative; display: block; width: 100%; }
.cselect.disabled { opacity: .55; }
.cs-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; inset-inline-start: 0; top: 0; }
.cselect-btn { width: 100%; min-height: var(--ctl); display: flex; align-items: center; gap: 8px; padding-inline: 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer; text-align: start; transition: border-color .15s, box-shadow .15s; }
.cselect-btn:hover:not(:disabled) { border-color: var(--primary); }
.cselect-btn:focus-visible { border-color: var(--primary); box-shadow: var(--ring); outline: none; }
.cselect-btn:disabled { cursor: not-allowed; }
.cs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-caret { font-size: var(--fs-xs); color: var(--muted); transition: transform .15s; }
.cselect-menu { position: fixed; z-index: 800; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 4px; overflow-y: auto; animation: pop .12s; }
.cselect-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: none; border-radius: var(--r-sm); color: var(--text); cursor: pointer; text-align: start; font-size: var(--fs-sm); }
.cselect-opt:hover, .cselect-opt.hi { background: var(--surface-2); }
.cselect-opt.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.cselect-opt.dis { opacity: .4; cursor: not-allowed; }
.cselect-opt i { font-size: var(--fs-xs); }
.filter-row .cselect, .page-head .cselect { width: auto; min-width: 150px; }

/* ===== add-to-card panel, dates, links, pager ===== */
.add-panel { min-width: 270px; display: flex; flex-direction: column; gap: 2px; }
.add-panel .pop-title { font-weight: 700; font-size: var(--fs-sm); padding: 8px 12px; color: var(--muted); text-align: center; }
.add-item { display: flex !important; align-items: center; gap: 12px !important; padding: 12px 12px !important; }
.add-item .ai-ic { width: 38px; height: 38px; border-radius: var(--r); background: var(--surface-2); display: grid; place-items: center; color: var(--primary); flex: none; }
.add-item .ai-tx { display: flex; flex-direction: column; flex: 1; line-height: 1.5; } .add-item .ai-tx small { color: var(--muted); font-size: var(--fs-xs); }
.add-item.is-on .ai-ic { background: var(--primary-soft); } .add-item .ai-ck { color: var(--success); }
.add-extra { display: flex; gap: 8px; padding: 2px 8px 8px; flex-wrap: wrap; }
.date-field { display: flex; align-items: center; gap: 4px; margin-block-end: 8px; }
.field-btn { flex: 1; justify-content: flex-start; min-width: 0; }
.field-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-clear { color: var(--muted); } .date-clear:hover { color: var(--danger); }
.link-form { margin-block-start: 8px; } .link-form .input { flex: 1; min-width: 150px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-block-start: 12px; flex-wrap: wrap; }
.pg { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); }
.pg:hover:not(:disabled) { border-color: var(--primary); } .pg.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; } .pg:disabled { opacity: .4; cursor: default; } .pg-gap { color: var(--muted); }
.jp-time { display: flex; align-items: center; gap: 12px; margin-block-start: 8px; padding-block-start: 8px; border-top: 1px solid var(--border); font-weight: 600; font-size: var(--fs-sm); }
.jp-time-input { flex: 1; min-height: var(--ctl); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); padding-inline: 12px; direction: ltr; font: inherit; }
.jp-foot { gap: 4px; }
/* ===== done circle, label pills, colour picker ===== */
.done-circle { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); background: transparent; color: transparent; display: inline-grid; place-items: center; cursor: pointer; padding: 0; font-size: var(--fs-xs); transition: border-color .15s, background .2s, color .2s, transform .15s; }
.done-circle:hover:not(:disabled) { border-color: var(--success); transform: scale(1.08); }
.done-circle:hover:not(:disabled):not(.on) { color: color-mix(in srgb, var(--success) 45%, transparent); }
.done-circle.on { background: var(--success); border-color: var(--success); color: #fff; }
.done-circle:disabled { cursor: default; }
.done-circle.on.anim { animation: donePop .5s cubic-bezier(.2, 1.6, .4, 1); }
.done-circle.on.anim i { animation: doneTick .45s .08s ease-out both; }
.done-circle.on.anim::after { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--success); animation: doneRing .6s ease-out forwards; pointer-events: none; }
.done-circle { position: relative; }
@keyframes donePop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes doneTick { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes doneRing { from { transform: scale(1); opacity: .8; } to { transform: scale(2.3); opacity: 0; } }
.lbl-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbl-pill.block { display: flex; width: 100%; min-height: 32px; }
.pill-set { display: flex; flex-wrap: wrap; gap: 8px; }
.lbl-opt { gap: 8px !important; } .lbl-opt .lbl-pill { flex: 1; } .lbl-opt.on { background: var(--surface-2); }
.lbl-prev { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lbl-prev .lbl-pill.real { font-size: var(--fs-xs); padding: 1px 8px; min-height: 20px; line-height: 18px; border-radius: var(--r-sm); box-shadow: 0 0 0 2px rgb(255 255 255 / .92); }
.lbl-prev .lbl { box-shadow: 0 0 0 2px rgb(255 255 255 / .92); }
.pill-pick { cursor: pointer; opacity: .45; border-radius: var(--r-sm); outline: 2px solid transparent; outline-offset: 2px; transition: opacity .15s; } .pill-pick.on { opacity: 1; outline-color: var(--primary); }
.color-wrap { position: relative; width: 38px; height: 34px; flex: none; border: 1px solid var(--border-strong); border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; color: var(--muted); overflow: hidden; background: var(--surface); }
.color-wrap:hover { border-color: var(--primary); color: var(--primary); }
.color-wrap .color-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.color-wrap i { pointer-events: none; }
/* ---------- Notification history page ---------- */
.nl-list { overflow: hidden; }
.nl-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none !important; }
.nl-item:last-child { border-bottom: 0; }
a.nl-item:hover { background: var(--surface-2); }
.nl-item.unread { background: var(--primary-soft); }
.nl-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); }
.nl-ic.app { background: var(--primary-soft); color: var(--primary); }
.nl-ic.sms { background: var(--success-soft); color: var(--success); }
.nl-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nl-title { font-weight: 700; display: flex; gap: 8px; align-items: center; text-align: right; }
.nl-body { font-size: var(--fs-sm); line-height: 1.9; color: var(--text-2); overflow-wrap: anywhere; text-align: right; }
.nl-time { font-size: var(--fs-xs); color: var(--muted); text-align: left; }
.nl-wrap { max-width: 760px; margin-inline: auto; }
a.pg, span.pg { display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; }
a.pg.on, a.pg.on:hover { color: #fff; }
a.chip, a.chip:hover { text-decoration: none !important; }
/* bell dropdown: `.dd-menu a` centers flex items; keep the notification rows stretched, titles/text right, time left, no sideways scroll */
.notif-list { overflow-x: hidden; }
.dd-menu .notif-item { align-items: stretch; justify-content: flex-start; gap: 2px; width: 100%; border-radius: 0; padding: 8px 16px; overflow: hidden; }
.dd-menu .notif-item { padding-inline-end: 42px; }
.dd-menu .notif-item .ni-time { display: block; direction: rtl; text-align: start; align-self: stretch; }
.notif-panel { overflow-x: hidden; }
.dd-menu .notif-item { border-bottom: 1px solid var(--border); }
.dd-menu .notif-item:last-of-type { border-bottom: 1px solid var(--border); }
a.chip { transition: background .15s, border-color .15s, color .15s; }
a.chip:not(.on):hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.notif-item .ni-body { white-space: pre-wrap; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* SMS log: one line per record (the detail popup shows everything) */
.sms-log td, .sms-log th { white-space: nowrap; }
.sms-log .cell-trim { overflow: hidden; text-overflow: ellipsis; }
.sms-log th.tc, .sms-log td.tc { text-align: center; }
.sms-log .tc, .sms-log .tc * { text-align: center !important; }

.keys { display: inline-flex; align-items: center; gap: 8px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.keys .kw { font-size: var(--fs-xs); color: var(--muted); }

/* dashboard: personal notes (same look as the rest of the UI) */
/* notes: spacing aligned with the card header (20px sides), actions only while editing */

/* ---------- Board menu: full-page modal with a right-hand sidebar ---------- */
.modal-back.full { padding: 0; align-items: stretch; overflow: hidden; }
.modal.full { max-width: none; width: 100%; height: 100vh; border-radius: 0; display: flex; flex-direction: column; animation: fade .15s; }
.modal.full .modal-head { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.modal.full .modal-body { flex: 1; min-height: 0; padding: 0; display: flex; }
.bm { display: flex; flex: 1; min-height: 0; width: 100%; }
.bm-side { flex: none; width: 250px; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); border-inline-end: 1px solid var(--border); overflow-y: auto; }
.bm-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-radius: var(--r); background: none; color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; text-align: start; }
.bm-link i { width: 18px; text-align: center; color: var(--muted); }
.bm-link:hover { background: var(--surface-3); color: var(--text); }
.bm-link.active { background: var(--primary-soft); color: var(--primary); }
.bm-link.active i { color: var(--primary); }
.bm-main { flex: 1; min-width: 0; overflow-y: auto; padding: 28px 32px 40px; }
.bm-pane { max-width: 860px; margin-inline: auto; }
@media (max-width: 760px) {
  .bm { flex-direction: column; }
  .bm-side { width: auto; flex-direction: row; overflow-x: auto; padding: 8px; border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .bm-link { width: auto; white-space: nowrap; padding: 8px 12px; }
  .bm-main { padding: 20px 16px 32px; }
}
.setting-group { display: grid; gap: 16px; padding-block-start: 16px; border-top: 1px solid var(--border); }
.setting-group h4 { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }

/* board menu: 2/3-page modal, one continuous page, right sidebar = anchors */
.modal-back.part { padding: 6vh 0; align-items: center; justify-content: center; overflow: hidden; }
.modal.part { width: max(66vw, 780px); max-width: calc(100vw - 32px); height: 84vh; border-radius: var(--r-lg); animation: pop .18s ease-out; }
.modal.part .modal-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.bm-main { position: relative; scroll-behavior: auto; }
.bm-sec { padding-block-end: 28px; margin-block-end: 28px; border-bottom: 1px solid var(--border); max-width: 860px; margin-inline: auto; }
.bm-sec:last-of-type { border-bottom: 0; }
.bm-sec-title { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lg); margin-block-end: 16px; }
.bm-sec-title i { color: var(--primary); }
.bm-end { height: 55vh; }
.bm-main .bm-pane { max-width: none; }
@media (max-width: 860px) { .modal-back.part { padding: 0; } .modal.part { width: 100%; max-width: none; height: 100vh; border-radius: 0; } }

/* board menu: settings as separated rows */
.bm-sec { padding-block: 8px 36px; margin-block-end: 36px; }
.bm-sec-title { padding-block-end: 12px; border-bottom: 2px solid var(--border); margin-block-end: 8px; }
.set-list { display: grid; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--border); }
.set-row:last-child, .set-row.end { border-bottom: 0; }
.set-row.end { padding-block-end: 0; justify-content: flex-start; }
.set-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.set-text { display: grid; gap: 4px; line-height: 1.9; max-width: 560px; }
.who-list { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); }
.who { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.who:last-child { border-bottom: 0; }
.who:hover { background: var(--surface-2); }
.bm-pane .stack > .field + hr.sep { margin-block: 4px; }
.bm-pane { max-width: 860px; margin-inline: auto; }
.bm-end { display: none; }
.bm-main > .bm-pane { max-width: 860px; margin-inline: auto; }
.tip-ic { color: var(--muted); font-size: var(--fs-sm); cursor: help; margin-inline-start: 2px; }
/* board menu: the save row stays pinned to the bottom of the modal while the form scrolls; at the end it simply rests in its place */
.bm-main { --bm-pad-b: 40px; --bm-pad-i: 32px; }
@media (max-width: 760px) { .bm-main { --bm-pad-b: 32px; --bm-pad-i: 16px; } }
/* sticky offsets are measured from the scroller's padding edge, so the bar reaches out over the padding on the bottom and both sides */
.bm-save { position: sticky; inset-block-end: calc(-1 * var(--bm-pad-b)); z-index: 5; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); margin-block: var(--sp-4) calc(-1 * var(--bm-pad-b)); margin-inline: calc(-1 * var(--bm-pad-i)); padding-block: var(--sp-3) calc(var(--sp-3) + var(--bm-pad-b)); padding-inline: var(--bm-pad-i); background: var(--surface); border-block-start: 1px solid var(--border); }
.bm-save, .bm-save.set-row.end { justify-content: flex-end; } /* the button sits at the left edge (end side in RTL) */
.bm-save.set-row.end { padding-block: var(--sp-3) calc(var(--sp-3) + var(--bm-pad-b)); border-bottom: 0; }
/* the pane fills the modal, so on a short tab the save bar still sits at the bottom edge; corners follow the modal's radius */
.modal.part { overflow: hidden; }
.bm-main:has(.bm-save) { --bm-pad-b: 0px; padding-block-end: 0; } /* the bar itself closes the modal: no padding strip under it */
.bm-main { display: flex; flex-direction: column; }
.bm-main > .bm-pane { flex: 1 0 auto; inline-size: 100%; display: flex; flex-direction: column; }
.bm-pane > .bm-body { flex: 1 0 auto; display: flex; flex-direction: column; }
.bm-body > :has(> .bm-save) { flex: 1 0 auto; display: flex; flex-direction: column; }
.bm-save { margin-block-start: auto; }
.tip-ic:hover, .tip-ic:focus { color: var(--primary); outline: 0; }
.team-pick { max-height: 190px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); }
.team-opt { display: flex; align-items: center; gap: 8px; padding-block: 8px; padding-inline-end: 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.team-opt:last-child { border-bottom: 0; }
.team-opt:hover { background: var(--surface-2); }
.modal.w23 { max-width: min(max(66vw, 760px), calc(100vw - 32px)); }
.pw-reset { display: grid; gap: 12px; }
.pw-reset h4 { font-size: var(--fs-base); }

/* ---------- User edit / create form ---------- */
.uf { display: grid; gap: 24px; }
.uf-top { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: start; }
.uf-av { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 16px 12px; border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--r-lg); }

.uf-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
.uf-fields .field label { font-size: var(--fs-xs); }

.uf-wide { grid-column: 1 / -1; line-height: 1.9; }
.uf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.uf-sec { display: grid; gap: 12px; align-content: start; padding-block-start: 20px; border-top: 1px solid var(--border); }
.uf-sec > h4 { font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.uf-sec > h4 i { color: var(--primary); }
.uf-teams .team-pick { max-height: 150px; }
.uf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.uf-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); cursor: default; }
.uf-card-t { display: grid; gap: 2px; line-height: 1.7; }
.uf-actions { position: sticky; bottom: -22px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 16px; margin-block-end: -24px; background: var(--surface); border-top: 1px solid var(--border); }
.pw-reset .pw-block { max-width: 520px; }
@media (max-width: 860px) {
  .uf-top, .uf-cols { grid-template-columns: 1fr; }
  .uf-fields, .uf-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .uf-fields, .uf-cards { grid-template-columns: 1fr; } }

/* ---------- Custom tooltip (replaces native title tooltips everywhere) ---------- */
.ui-tip { position: fixed; z-index: 400; max-width: min(320px, calc(100vw - 20px)); padding: 8px 12px; border-radius: var(--r); font-size: var(--fs-xs); line-height: 1.8; font-weight: 500;
  background: #1c2030; color: #f1f3fa; box-shadow: 0 8px 24px rgb(0 0 0 / .28); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; white-space: pre-line; overflow-wrap: anywhere; text-align: start; }
.ui-tip.show { opacity: 1; transform: none; }
.ui-tip::after { content: ''; position: absolute; left: var(--ax, 50%); width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.ui-tip.up::after { bottom: -4px; }
.ui-tip.down::after { top: -4px; }
:root[data-theme="dark"] .ui-tip { background: #e8ebf5; color: #1c2030; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-tip { background: #e8ebf5; color: #1c2030; } }


/* password panel */
.pw-panel { display: grid; gap: 12px; max-width: 760px; }
.pw-mode { display: inline-flex; width: fit-content; gap: 3px; padding: 3px; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r); background: var(--surface-2); }
.pw-mode label { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); }
.pw-mode label input { position: absolute; opacity: 0; pointer-events: none; }
.pw-mode label.on { background: var(--primary); color: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.pw-manual { display: flex; gap: 8px; align-items: center; }
.pw-manual .input { flex: 1; }
.pw-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uf-card.off { opacity: .5; filter: grayscale(1); }
.uf-card.off .btn { pointer-events: none; }
.pw-reset .pw-panel + .row { margin-block-start: 4px; }
@media (max-width: 640px) { .pw-opts { grid-template-columns: 1fr; } }
.pw-panel { max-width: 640px; gap: 12px; }


.pw-opts { gap: 12px; }
.pw-opts .uf-card { padding: 8px 12px; }

.pw-last { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); } .pw-last i { color: var(--muted); }
.trash-row { gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); align-items: center; }
.pw-reset [data-setpw]:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }

/* ---------- Roles & permissions matrix: compact, sticky header / first column / save row ---------- */
.matrix-wrap { max-height: calc(100vh - 230px); overflow: auto; border-radius: var(--r); }
table.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: center; background: var(--surface); }
.matrix thead th { position: sticky; top: 0; z-index: 3; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; box-shadow: 0 1px 0 var(--border); background: var(--surface-2); }
.matrix .pk { position: sticky; inset-inline-start: 0; z-index: 2; text-align: start; min-width: 260px; white-space: nowrap; background: var(--surface); border-inline-end: 1px solid var(--border); }
.matrix thead th.pk { z-index: 4; background: var(--surface-2); }
.matrix td.pk code { margin-inline-start: 8px; font-size: var(--fs-xs); color: var(--muted); background: none; padding: 0; }
.matrix tr.grp td { position: sticky; inset-inline-start: 0; text-align: start; padding: 4px 12px; font-size: var(--fs-xs); font-weight: 700; color: var(--primary); background: var(--primary-soft); }
.matrix tbody tr:not(.grp):hover td { background: var(--surface-2); }
.matrix td .check { justify-content: center; }
.matrix input[type=checkbox] { width: 16px; height: 16px; }
.matrix tfoot td { position: sticky; bottom: 0; z-index: 3; padding: 8px 8px; background: var(--surface-2); box-shadow: 0 -1px 0 var(--border); border-bottom: 0; }
.matrix tfoot .btn { height: 30px; padding-inline: 12px; font-size: var(--fs-xs); }
.matrix td, .matrix th { padding-block: 4px; line-height: 1.5; } .matrix td .check { padding: 0; margin: 0; min-height: 0; line-height: 1; display: flex; }

/* ---------- Site footer ---------- */
.site-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; text-align: center; padding: 16px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); }
.sf-text { font-weight: 600; }
.sf-ver { display: inline-flex; align-items: center; padding: 2px 12px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.foot-preview { border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--r); background: var(--bg, var(--surface-2)); }
.foot-preview .site-foot { border-top: 0; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.emoji-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--fs-lg); line-height: 1; transition: transform .1s, border-color .15s; }
.emoji-btn:hover { transform: scale(1.12); border-color: var(--primary); }

/* ---------- "Don't leave!" dialog: minimal, burning fuse countdown (6 s) ---------- */
.leave-dlg { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 16px 8px 4px; }
.leave-dlg h2 { font-size: var(--fs-lg); }
.leave-dlg p { font-size: var(--fs-sm); }
.leave-stay { margin-block-start: 4px; min-width: 180px; }
.leave-dlg.gone { opacity: .5; }
.modal-back.center { align-items: center; padding-block: 16px; }

.menu-head .uname-l { direction: ltr; text-align: left; unicode-bidi: isolate; }
.matrix td.pk code { margin-inline-start: 16px; padding-inline-start: 12px; border-inline-start: 1px solid var(--border); }
.matrix tfoot td.pk { z-index: 3; }
.matrix tfoot .btn { height: 36px; font-size: var(--fs-sm); padding-inline: 16px; }

/* system status: the standard attention dot - a small solid red dot on the icon's corner, shown only when something needs attention */
#sysBtn { position: relative; }
.status-ping { position: absolute; top: 9px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.status-ping[hidden] { display: none; }
/* the key is a direction:ltr element, so logical margins would flip: use the physical side that faces the (RTL) label */
.matrix td.pk code { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; margin-right: 16px; padding-right: 12px; border-right: 1px solid var(--border); }

/* ---------- Custom checkboxes (all of them; the on/off switches keep their own look) ---------- */
:where(input[type=checkbox]) { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; display: inline-grid; place-items: center; vertical-align: middle; position: relative; cursor: pointer;
  border: 1.5px solid var(--border-strong, #b9bfd0); border-radius: var(--r-sm); background: var(--surface); transition: background .14s, border-color .14s, box-shadow .14s; }
:where(input[type=checkbox])::after { content: ''; width: 5px; height: 9px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .14s cubic-bezier(.3, 1.4, .5, 1); }
input[type=checkbox]:hover:not(:disabled) { border-color: var(--primary); }
input[type=checkbox]:checked { background: var(--primary); border-color: var(--primary); }
input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }
input[type=checkbox]:indeterminate { background: var(--primary); border-color: var(--primary); }
input[type=checkbox]:indeterminate::after { width: 8px; height: 0; margin-top: 0; border-width: 0 0 2px 0; transform: none; }
input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--ring); }
input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.switch input[type=checkbox] { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.switch input[type=checkbox]::after { display: none; }
.matrix input[type=checkbox] { width: 16px; height: 16px; border-radius: var(--r-sm); }
.matrix input[type=checkbox]::after { width: 4px; height: 8px; }

/* ---------- Shared pagination bar ---------- */
.pgbar { display: grid; justify-items: center; gap: 12px; margin-block: 20px 8px; }
.pgbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.pg-per, .pg-go { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.pg-per select, .pg-go input { min-height: var(--ctl); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-sm); background: var(--surface); color: var(--text); padding-inline: 12px; font: inherit; font-size: var(--fs-sm); }
.pg-per select { min-width: 66px; cursor: pointer; }
.pg-go input { width: 84px; text-align: center; -moz-appearance: textfield; }
.pg-go input::-webkit-outer-spin-button, .pg-go input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pg-per select:focus, .pg-go input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.pg-nav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 36px; height: 36px; padding-inline: 12px; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: var(--fs-sm); text-decoration: none !important; transition: background .15s, border-color .15s, color .15s; }
a.pg-b:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pg-b.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.pg-b.off { color: var(--muted); opacity: .6; cursor: not-allowed; }
.pg-b.gap { border-color: transparent; background: none; min-width: 24px; padding-inline: 4px; color: var(--muted); }
.pg-b i { font-size: var(--fs-xs); }
.pg-info { font-size: var(--fs-xs); color: var(--muted); }

/* footer rows (sentence / version / link, arranged by the admin's settings) */
.site-foot { flex-direction: column; gap: 8px; }
.sf-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.sf-inline { color: var(--primary); font-weight: 700; text-decoration: none; border-bottom: 1px dashed currentColor; }
.sf-inline:hover { border-bottom-style: solid; }
.sf-inline, .sf-inline:hover { text-decoration: none !important; } /* the dashed border is the only underline (the global a:hover underline made two) */

/* footer on every page except the dashboard: a quiet "back to top" */
.to-top { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: var(--r-full); background: none; color: var(--muted); font: inherit; font-size: var(--fs-xs); cursor: pointer; transition: color .15s, background .15s; }
.to-top i { font-size: var(--fs-xs); transition: transform .2s; }
.to-top[hidden], .site-foot[hidden] { display: none; } /* hidden while the page has nothing to scroll */
.to-top:hover { color: var(--primary); background: var(--primary-soft); }
.to-top:hover i { transform: translateY(-2px); }
.to-top:focus-visible { outline: none; box-shadow: var(--ring); }

/* send-notification: recipients summary, history table, preview, recipients picker tree */
.bc-rec { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.bc-summary { flex: 1; min-width: 0; font-size: var(--fs-sm); line-height: 1.8; }
.bc-table .bc-t { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-table .bc-b { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-prev { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-sm); }
.bc-prev-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.rp-tree { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); }
.rp-node { border-bottom: 1px solid var(--border); }
.rp-node:last-child { border-bottom: 0; }
.rp-team { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--surface-2); }
.rp-caret { width: 22px; height: 22px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: var(--fs-xs); }
.rp-caret:hover { background: var(--surface-3); color: var(--text); }
.rp-body { padding-inline-start: 24px; border-inline-start: 2px solid var(--border); margin-inline-start: 24px; }
.rp-body .rp-team { background: transparent; border-top: 1px solid var(--border); }
.rp-user { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; border-top: 1px solid var(--border); }
.rp-user:first-child { border-top: 0; }
.rp-user:hover { background: var(--surface-2); }

/* SMS settings: "current status" block */
.st-now { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.st-title { font-size: var(--fs-sm); color: var(--text-2); }
.danger-t { color: var(--danger); font-weight: 700; }
#smsModes { flex-wrap: wrap; }
#smsModes { display: flex; width: 100%; } #smsModes label { flex: 1; justify-content: center; }
.conn { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; }
.conn.ok { color: var(--success); } .conn.fail { color: var(--danger); }
.conn i { font-size: var(--fs-base); }

/* users table: every column centered, rows open the edit window */
.users-t th, .users-t td { text-align: center; vertical-align: middle; }
.users-t td.ltr { direction: ltr; unicode-bidi: isolate; text-align: center; }
.users-t tr.clickable { cursor: pointer; }
.users-t tr.clickable:hover td { background: var(--surface-2); }
.users-t tr.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.users-t td.uc-user .row { justify-content: flex-start; text-align: start; }
.users-t .copy { cursor: copy; padding: 2px 8px; border-radius: var(--r-sm); transition: background .15s, color .15s; }
.users-t .copy:hover { background: var(--primary-soft); color: var(--primary); }

/* teams: the organisation as a tree with connector lines from each parent to its children */
#teamsBox .tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#teamsBox .tree .tree { margin-block-start: 8px; margin-inline-start: 20px; }
#teamsBox .tree .tree > li { position: relative; padding-inline-start: 28px; }
#teamsBox .tree .tree > li::before { content: ''; position: absolute; inset-inline-start: 0; top: -8px; bottom: -8px; border-inline-start: 2px solid var(--border-strong, var(--border)); }
#teamsBox .tree .tree > li:last-child::before { bottom: auto; height: calc(21px + 8px); }
#teamsBox .tree .tree > li::after { content: ''; position: absolute; inset-inline-start: 0; top: 21px; width: 22px; border-top: 2px solid var(--border-strong, var(--border)); border-start-start-radius: 0; }
#teamsBox .team-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); flex-wrap: wrap; border-bottom: 1px solid var(--border); min-height: 44px; }
#teamsBox .tree-root > li > .team-row { background: var(--surface); box-shadow: var(--shadow-sm); }
#teamsBox .team-row:hover { border-color: var(--primary); }
#teamsBox .tm-ic { color: var(--primary); width: 20px; text-align: center; }
.auth-card .alert.warn { display: flex; gap: 8px; align-items: flex-start; line-height: 1.9; }

/* login: multi-step */
#authCard form[hidden], #authCard [hidden] { display: none !important; }
.who-chip { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.who-chip i { color: var(--muted); font-size: var(--fs-lg); }
.who-chip b { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.alt-login { display: grid; gap: 12px; }
.alt-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-xs); }
.alt-or::before, .alt-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.link-btn { background: none; border: 0; padding: 4px; color: var(--primary); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: center; }
.link-btn:hover { text-decoration: underline; }
/* one-character code boxes (login / reset) */
.otp{display:flex;gap: 8px;justify-content:center;direction:ltr}
.otp-c{width:44px;height:52px;padding: 0;text-align:center;font-size: var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums}
.otp.ok .otp-c{border-color:var(--success,#16a34a);background:color-mix(in srgb,var(--success,#16a34a) 10%,transparent)}
.otp.bad .otp-c{border-color:var(--danger,#dc2626)}
.otp-note{text-align:center;font-size: var(--fs-sm);color:var(--success,#16a34a);margin-top: 8px}
.hp{position:absolute!important;inset:auto;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none} /* hidden trap field: clipped in place (an off-screen offset made the RTL page scroll sideways without end) */

/* ---------- profile page ---------- */
.prof { display: grid; gap: 16px; }
.prof-hero { display: grid; gap: 16px; overflow: hidden; padding-block-end: 20px; }

.prof-name { display: grid; gap: 4px; min-width: 0; }
.prof-name h3 { font-size: var(--fs-lg); }
.prof-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.prof-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prof-fact { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); min-width: 0; overflow-wrap: anywhere; }
.prof-fact > i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-xs); }
.prof-fact > div { display: grid; gap: 1px; min-width: 0; }
.prof-fact b { font-weight: 600; font-size: var(--fs-sm); }
.prof-note { display: flex; gap: 8px; align-items: baseline; line-height: 1.9; }
.prof-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.opt { position: relative; display: grid; justify-items: center; gap: 8px; padding: 12px 8px; border: 1.5px solid var(--border); border-radius: var(--r); cursor: pointer; font-size: var(--fs-sm); text-align: center; background: var(--surface); transition: border-color .15s, background .15s; }
.opt i, .opt b { font-size: var(--fs-lg); line-height: 1; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt:hover { border-color: var(--primary); }
.opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 860px) { .prof-cols { grid-template-columns: minmax(0, 1fr); } .prof-top { flex-direction: column; align-items: center; text-align: center; } .prof-tags { justify-content: center; } .prof-av-act { margin-inline-start: 0; } }



.prof-hero > .prof-facts, .prof-hero > .prof-note { margin-inline: 20px; }
.prof-banner { height: 52px; background: linear-gradient(120deg, var(--brand-600), var(--brand-300)); opacity: .9; }
.prof-top { display: flex; align-items: flex-end; gap: 16px; padding-inline: 20px; margin-block-start: -36px; flex-wrap: wrap; }
.prof-av .avatar { border: 4px solid var(--surface); box-shadow: var(--shadow-sm, 0 2px 8px rgb(0 0 0 / .15)); }
.avatar.xl { --size: 88px; font-size: var(--fs-2xl); }
.prof-top .prof-name { flex: 1; min-width: 200px; padding-block-start: 40px; }
.prof-av-act { margin-inline-start: auto; }
.feat-head { display: flex; align-items: center; gap: 12px; }
.feat-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-lg); }
.feat-head h3 { font-size: var(--fs-base); }
.prof-av { position: relative; border-radius: 50%; }
.av-edit { position: absolute; inset: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(0 0 0 / .5); color: #fff; font-size: var(--fs-xl); cursor: pointer; opacity: 0; transition: opacity .15s; }
.prof-av:hover .av-edit, .av-edit:focus-visible { opacity: 1; }
@media (hover: none) { .av-edit { inset: auto; inset-inline-end: 0; bottom: 0; width: 30px; height: 30px; font-size: var(--fs-sm); opacity: 1; background: var(--primary); border: 2px solid var(--surface); } }
/* avatar cropper */
.crop-frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #000; cursor: grab; touch-action: none; user-select: none; }
.crop-frame.grab { cursor: grabbing; }
.crop-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .55); outline: 2px solid rgb(255 255 255 / .85); outline-offset: -2px; }
.prof-time { font-weight: 400; font-size: var(--fs-xs); margin-inline-start: 2px; }

/* board menu → tools */
.tool-group h4 { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-block-end: 8px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tool-tile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.tool-tile:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.tool-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-base); }
.tool-tx { display: grid; gap: 2px; min-width: 0; flex: 1; line-height: 1.6; }
.tool-tx b { font-weight: 600; font-size: var(--fs-sm); }
.tool-go { color: var(--muted); font-size: var(--fs-xs); }
.tool-group.danger h4 { color: var(--danger); }
.tool-tile.danger .tool-ic { background: var(--danger-soft); color: var(--danger); }
.tool-tile.danger:hover { border-color: var(--danger); background: var(--danger-soft); }

/* board menu: members, general, tools hover */
.mem-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mem-list { display: grid; gap: 8px; }
.mem-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.mem-row:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.mem-name { min-width: 0; }
.mem-del:hover { color: var(--danger); background: var(--danger-soft); }
.rp-user.off { opacity: .55; cursor: default; }
.set-list.plain .set-row { border-bottom: 0; }
.tool-tile, .tool-tile:hover, .tool-tile:focus { text-decoration: none; }
.tool-tile:hover * { text-decoration: none; }

/* user modal: avatar, role cards, team directory */
.uf-av .prof-av { margin-inline: auto; width: 96px; height: 96px; }
.uf-av .av-prev .avatar { --size: 96px; font-size: var(--fs-2xl); }
.uf-av .av-prev { width: 96px; height: 96px; }
.role-pick { display: grid; gap: 8px; }
.role-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 1.5px solid var(--border); border-radius: var(--r); cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; }
.role-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.role-opt > i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); }
.role-t { display: grid; line-height: 1.5; }
.role-opt:hover { border-color: var(--primary); }
.role-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.role-opt:has(input:checked) > i { background: var(--primary); color: #fff; }
.role-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.team-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 28px; align-items: center; }
.chip-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: var(--fs-base); line-height: 1; padding: 0 0 0 2px; opacity: .7; }
.chip-x:hover { opacity: 1; }
.team-tree { max-height: 230px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); padding: 8px; background: var(--surface); }
.tn-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: var(--r-sm); cursor: pointer; }
.tn-row:hover { background: var(--surface-2); }
.tn-row.on { background: var(--primary-soft); }
.tn-ic { color: var(--muted); font-size: var(--fs-xs); }
.tn-caret { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; font-size: var(--fs-xs); }
.tn-caret:hover { background: var(--surface-3); }
.tn-caret.none { cursor: default; }
.tn-body { margin-inline-start: 20px; padding-inline-start: 12px; border-inline-start: 1px dashed var(--border); }

/* ===== user modal: one spacing system (sections 20px apart, 18px inside, fields 14px/16px apart, 8px label→control) ===== */
.uf { display: grid; gap: 20px; }
.uf-sec { display: block; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.uf-sec-h { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; }
.uf-sec-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-sm); }
.uf-sec-h h4 { font-size: var(--fs-base); margin: 0; color: var(--text); }
.uf-sec-h p { margin: 2px 0 0; line-height: 1.7; }
.uf-sec-b { display: grid; gap: 16px; }
.uf-top { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: start; }
.uf-av { border: 0; padding: 0; display: grid; justify-items: center; gap: 12px; }
.uf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; align-content: start; }
.uf-fields .field { gap: 8px; }
.uf-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.uf-grp { display: grid; gap: 8px; align-content: start; }
.uf-lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.role-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.seg-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border: 1.5px solid var(--border); border-radius: var(--r); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; background: var(--surface); transition: border-color .15s, background .15s, color .15s; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-opt:hover { border-color: var(--text-2); }
.seg-opt.ok:has(input:checked) { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.seg-opt.warn:has(input:checked) { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.seg-opt.bad:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.seg-opt:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.uf-rows { display: grid; gap: 12px; }
.uf-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
label.uf-row { cursor: pointer; }
.uf-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); }
.uf-row-t { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.7; }
.uf-row.off { opacity: .55; }
.uf-row.off .btn { pointer-events: none; }
.pw-reset { display: block; }
.uf-actions { margin-block-start: 0; }
@media (max-width: 760px) { .uf-top, .uf-cols { grid-template-columns: minmax(0, 1fr); } .uf-fields { grid-template-columns: minmax(0, 1fr); } }
.uf .field .err:empty { display: none; }
.uf-fields > .field:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* user modal: photo trash, required mark, boards list; job titles page */
.av-del { position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--danger); color: #fff; font-size: var(--fs-xs); cursor: pointer; opacity: 0; transition: opacity .15s; }
.prof-av:hover .av-del, .av-del:focus-visible { opacity: 1; }
@media (hover: none) { .av-del { opacity: 1; } }
.av-removed { opacity: .35; filter: grayscale(1); }
.req { color: var(--danger); }
.ub-list { display: grid; gap: 8px; max-height: 240px; overflow: auto; }
.ub-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.ub-dot { width: 12px; height: 12px; flex: none; border-radius: var(--r-sm); }
.jt-row { display: flex; align-items: center; gap: 8px; }
.jt-row .input { flex: 1; min-width: 0; }


/* user modal: no row is wider than it needs to be */
.uf-av .av-prev { transform: none; margin: 0; width: 96px; height: 96px; }
.uf-av .prof-av, .uf-av .av-edit, .uf-av .av-prev .avatar { border-radius: 50%; }
.uf-av .av-prev .avatar { width: 96px; height: 96px; }
.uf-sec-b > .field { max-width: 440px; }
.uf-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uf-teams { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 20px; align-items: start; }
.uf-teams > .team-chips { grid-column: 2; grid-row: 1 / span 3; align-content: start; padding: 12px; border: 1px dashed var(--border); border-radius: var(--r); min-height: 120px; }
.uf-teams > .team-chips::before { content: 'انتخاب‌شده'; flex-basis: 100%; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.uf-teams > .input, .uf-teams > .team-tree { grid-column: 1; }
.uf-teams > .muted { grid-column: 1 / -1; }
@media (max-width: 760px) { .uf-rows, .ub-list { grid-template-columns: minmax(0, 1fr); } .uf-teams { grid-template-columns: minmax(0, 1fr); } .uf-teams > .team-chips { grid-column: 1; grid-row: auto; } }
/* searchable select menu */
.cselect-menu.searchable { padding-top: 0; }
.cs-search-wrap { position: sticky; top: 0; z-index: 1; margin: 0 -4px 4px; padding: 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cs-search { min-height: var(--ctl); }

/* user modal: team drop-down, password options, legend */
.uf-legend { margin-block-end: -8px; }
.tp-trigger { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-sm, var(--r)); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tp-trigger:hover, .tp-trigger.open { border-color: var(--primary); }
.tp-trigger:focus-visible { border-color: var(--primary); box-shadow: var(--ring); outline: none; }
.tp-trigger.disabled { opacity: .6; cursor: not-allowed; }
.tp-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-trigger .cs-caret { color: var(--muted); font-size: var(--fs-xs); transition: transform .15s; }
.tp-trigger.open .cs-caret { transform: rotate(180deg); }
.tp-menu { width: min(460px, calc(100vw - 16px)); }
.tp-list { padding: 4px 0; }
.tp-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px -4px -4px; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--border); }
.tn-row { user-select: none; }
.tn-check { color: var(--primary); font-size: var(--fs-sm); }
.uf-teams { display: block; }
.uf-teams > .team-chips { display: none; }
.pw-choice { display: grid; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 260px; }
.seg-opt.neutral:has(input:checked) { border-color: var(--text-2); background: var(--surface-3); color: var(--text); }

/* user modal: compact password card */
.pw-reset .uf-sec-b { gap: 12px; }
.pw-panel.compact { max-width: none; gap: 12px; }
.pw-panel.compact .pw-manual { max-width: 560px; }
.pw-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pw-line .pw-choice { display: flex; align-items: center; gap: 12px; padding: 4px 8px 4px 12px; border-radius: var(--r); }
.pw-line .pw-choice > b { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pw-line .seg.two { width: auto; max-width: none; gap: 4px; }
.pw-line .seg-opt { padding: 4px 12px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.pw-line .btn-primary { margin-inline-start: auto; }
.pw-last { margin-block-end: 2px; }

/* settings → security: two-step reset list */
.tf-list { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); }
.tf-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--border); cursor: pointer; }
.tf-row:first-child { border-top: 0; }
.tf-row:hover { background: var(--surface-2); }
.tf-row[hidden] { display: none; }
.tf-all { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* user modal: password card in 3 columns */
.pw-grid3 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px 16px; align-items: start; }
.pw-grid3 .field { gap: 8px; }
.pw-panel.compact .pw-manual { max-width: none; }
.pw-grid3 .pw-choice { display: flex; padding: 0; border: 0; background: none; }
.pw-grid3 .seg.two { width: 100%; max-width: none; gap: 8px; }
.pw-grid3 .seg-opt { height: 38px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r); }
@media (max-width: 860px) { .pw-grid3 { grid-template-columns: minmax(0, 1fr); } }
.pw-grid3 .seg.two { width: auto; max-width: none; gap: 4px; justify-self: start; }
.pw-grid3 .seg-opt { height: 30px; padding: 0 16px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.pw-grid3 .pw-choice .seg { margin-block-start: 4px; }
.pw-grid3 .seg-opt { height: 38px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r); min-width: 62px; }
.pw-grid3 .seg.two { width: auto; justify-self: start; gap: 8px; }
.pw-grid3 .pw-choice .seg { margin-block-start: 0; }

/* small visual controls keep a 44px hit area */
.kdone::before, .done-circle::before { content: ''; position: absolute; inset: -12px; }
.kdone, .done-circle { position: relative; }
.kcard .ktop { position: relative; }
.kcard .ktop::before { content: ''; position: absolute; inset: -8px; }
.to-top { min-height: var(--ctl); }
.card-head a, .link-btn { display: inline-flex; align-items: center; min-height: var(--ctl); }
@media (max-width: 480px) { .brand-name { display: none; } .brand { margin-inline-end: auto; } }
/* touch devices: every small control grows to a 44px target */
@media (pointer: coarse) {
  .btn-sm { min-height: var(--ctl); }
  .btn-icon.btn-sm { width: var(--ctl); }
  .md-btn { min-width: var(--ctl); height: var(--ctl); }
  .pg, .pg-b { min-width: var(--ctl); height: var(--ctl); }
  .emoji-btn, .color-wrap { width: var(--ctl); height: var(--ctl); }
  .jp-grid button { height: var(--ctl); }
  .chip { min-height: var(--ctl); }
  .segmented button { min-height: var(--ctl); }
}
.grid-2 > *, .grid-2e > *, .panels > *, .admin-content > * { min-width: 0; }

/* tables that become card lists on phones (needs data-label on each td) */
@media (max-width: 860px) {
  table.stack-m, table.stack-m tbody, table.stack-m tr, table.stack-m td { display: block; width: 100%; }
  table.stack-m thead { display: none; }
  table.stack-m tr { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
  table.stack-m tr:first-child { border-top: 0; }
  table.stack-m td { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border: 0; text-align: end; }
  table.stack-m td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-xs); flex: none; text-align: start; }
  table.stack-m td:not([data-label]) { display: block; text-align: start; }
  table.stack-m td:not([data-label])::before { content: none; }
  table.stack-m td.uc-user { padding-block-end: var(--sp-2); }
  table.stack-m td.u-act { display: flex; justify-content: flex-start; gap: var(--sp-2); padding-block-start: var(--sp-3); }
  table.stack-m tr:hover td { background: none; }
  .users-t th, .users-t td { text-align: end; }
  .users-t td.ltr { text-align: end; }
  .users-t td.uc-user .row { justify-content: flex-start; }
}@media (max-width: 860px) { table.stack-m td.ltr { direction: rtl; } table.stack-m td.ltr > span { direction: ltr; unicode-bidi: isolate; } }

/* mode picker (radio labels) — same look as .segmented, 44px targets */
.pw-mode { display: flex; width: 100%; padding: var(--sp-1); background: var(--surface-2); border: 0; border-radius: var(--r); gap: 2px; }
.pw-mode label { flex: 1; justify-content: center; min-height: var(--ctl); padding: 0 var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); text-align: center; transition: background var(--t-fast), color var(--t-fast); }
.pw-mode label.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.tpl-row { padding: var(--sp-4) var(--sp-5); }
.panel .tpl-row:last-child { border-bottom: 0; }
.opt { min-height: var(--ctl); }
.prof-hero { box-shadow: var(--shadow-sm); }
.panel > #twofaBody:empty { display: none; }
/* calendar: the month grid becomes an agenda (only days with cards, plus today) on phones */
.cal-wdl { display: none; }
@media (max-width: 860px) {
  .cal-grid { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .cal-scroll { overflow-x: visible; }
  .cal-wd, .cal-day.out { display: none; }
  .cal-day { min-height: 0; border-inline-start: 0; padding: var(--sp-3) var(--sp-4); display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; }
  .cal-day:not(.today):not(:has(.cal-card)) { display: none; }
  .cal-num { grid-row: 1 / span 2; width: 36px; height: 36px; margin: 0; font-size: var(--fs-sm); }
  .cal-wdl { display: block; font-size: var(--fs-xs); color: var(--muted); grid-column: 2; }
  .cal-items { grid-column: 2; }
  .cal-card { min-height: var(--ctl); padding-inline: var(--sp-3); font-size: var(--fs-sm); }
  .cal-head { flex-wrap: wrap; }
}
@media (max-width: 1000px) { .cal-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .panel-h { flex-wrap: wrap; }
  .panel-h .grow { flex: 1 1 180px; }
  .prof-top { align-items: center; margin-block-start: -44px; }
  .prof-top .prof-name { padding-block-start: 0; min-width: 0; flex-basis: 100%; }
  .prof-top .prof-av-act { margin: 0; }
}
@media (max-width: 860px) {
  .prof-top { flex-direction: column; flex-wrap: nowrap; align-items: center; text-align: center; gap: var(--sp-2); }
  .prof-top .prof-name { flex: none; width: 100%; text-align: center; }
  .prof-tags { justify-content: center; }
}
/* board: column tabs on phones */
.col-tabs { display: none; }
@media (max-width: 860px) {
  .col-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) var(--sp-3); scrollbar-width: none; background: rgb(0 0 0 / .12); backdrop-filter: blur(6px); }
  .col-tabs::-webkit-scrollbar { display: none; }
  .col-tabs button { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-4); border: 0; border-radius: var(--r-full); background: rgb(255 255 255 / .2); color: #fff; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
  .col-tabs button b { font-weight: 700; opacity: .85; font-size: var(--fs-xs); }
  .col-tabs button.on { background: var(--surface); color: var(--primary); }
}
.jt-row { gap: var(--sp-3); }
.jt-row .input { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .team-row { gap: var(--sp-2); }
  .jt-row { flex-wrap: nowrap; }
  .jt-row .c { width: auto; }
}
/* =====================================================================
   Card modal v2: header (done · list · id · menu), property chips, one column
   ===================================================================== */
.modal:has(.card-modal) { max-width: 720px; }
.modal:has(.card-modal) .modal-body { padding: 0; }
.card-modal { display: block; }
.cm-cover { position: relative; height: 72px; border-radius: var(--r-lg) var(--r-lg) 0 0; background-size: cover; background-position: center; }
.cm-cover.img { height: 140px; }
.cm-cover-edit { position: absolute; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2); opacity: 0; transition: opacity var(--t-fast); }
.cm-cover:hover .cm-cover-edit, .cm-cover:focus-within .cm-cover-edit { opacity: 1; }
@media (hover: none) { .cm-cover-edit { opacity: 1; } }
.cm-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) 0; background: var(--surface); }
.cm-head .done-circle { width: 28px; height: 28px; }
.cm-list { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-3); border-radius: var(--r); border: 0; background: none; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.cm-list b { color: var(--text); }
.cm-list i { font-size: var(--fs-xs); color: var(--muted); }
.cm-list:hover:not(:disabled) { background: var(--surface-2); }
.cm-list:disabled { cursor: default; }
.cm-id { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-3); border-radius: var(--r); border: 0; background: none; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; cursor: pointer; }
.cm-id:hover { background: var(--surface-2); color: var(--text); }
.card-modal .alert { margin: var(--sp-3) var(--sp-5) 0; }
.cm-body { padding: var(--sp-2) var(--sp-5) var(--sp-6); }
.cm-body .card-title-input { margin-inline-start: calc(var(--sp-2) * -1); }
.cm-sub { font-size: var(--fs-xs); color: var(--muted); margin-block: var(--sp-1) var(--sp-3); }
.cm-props { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-block-end: var(--sp-5); }
.prop { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-3); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.prop:hover:not(:disabled):not(.static) { border-color: var(--primary); background: var(--surface); }
.prop:disabled, .prop.static { cursor: default; }
.prop.is-empty { background: none; border-style: dashed; color: var(--muted); font-weight: 400; }
.prop.late, .prop.urgent { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.prop.soon { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.prop.ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.prop-add { background: none; border-style: dashed; color: var(--primary); }
.prop .lbl-pill { min-height: 22px; padding-block: 0; font-size: var(--fs-xs); }
.cm-sec { margin-block-end: var(--sp-5); }
.cm-sec > h4 { margin-block-end: var(--sp-2); }
.cm-composer { display: flex; gap: var(--sp-2); align-items: flex-end; margin-block-end: var(--sp-4); }
.cm-composer .textarea { flex: 1; min-height: var(--ctl); }
.cm-body .tabs.sm-tabs { margin-block: var(--sp-2) var(--sp-4); }
@media (max-width: 860px) {
  .modal:has(.card-modal) { max-width: none; }
  .cm-head { position: sticky; top: 0; z-index: 5; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
  .cm-list .lbl-in { display: none; }
  .cm-body { padding-inline: var(--sp-4); padding-block-end: calc(var(--ctl) + var(--sp-10)); }
  .cm-props { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); scrollbar-width: none; }
  .cm-props::-webkit-scrollbar { display: none; }
  .prop { flex: none; }
  .cm-composer { position: fixed; inset-inline: 0; bottom: 0; z-index: 6; margin: 0; padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  /* popovers become bottom sheets (the huge shadow dims the page behind) */
  .pop-menu { inset-inline: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-width: none; min-width: 0; max-height: 75dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax var(--scrim); animation: sheet var(--t-med) var(--ease); z-index: 420 !important; }
  @keyframes sheet { from { transform: translateY(100%); } }
}.cm-composer .textarea { height: 96px; min-height: 96px; resize: none; }
/* card modal polish */
.dd-menu .swatch { width: 36px; min-height: 0; height: 36px; padding: 0; border: 3px solid transparent; border-radius: var(--r-sm); flex: none; }
.dd-menu .swatch.on { border-color: var(--text); }
.dd-menu .swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dd-menu .cover-pick button { min-height: 0; height: 52px; padding: 0; border: 2px solid transparent; }
.dd-menu .cover-pick button.on { border-color: var(--primary); }
.cm-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.cm-cover + .cm-head { border-radius: 0; }
.md-area { text-align: start; }
.md-area.empty::before { display: block; text-align: start; }
@media (max-width: 860px) { .cm-head { border-radius: 0; } .cm-composer .textarea { height: 72px; min-height: 72px; } }
/* comment composer: full-width box with the submit button underneath (start side); on phones a compact send bar */
.cm-composer { flex-direction: column; align-items: stretch; }
.cm-composer .textarea { width: 100%; }
.cm-composer .send { align-self: flex-start; }
.pop-list .badge { margin-inline-start: auto; font-weight: 400; }
@media (max-width: 860px) {
  .cm-composer { flex-direction: row; align-items: flex-end; }
  .cm-composer .textarea { flex: 1; width: auto; }
  .cm-composer .send { align-self: flex-end; width: var(--ctl); padding: 0; }
  .cm-composer .send .lbl { display: none; }
}
/* =====================================================================
   Motion: boards page + board (all disabled by prefers-reduced-motion at the top level)
   ===================================================================== */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-8px); } }
@keyframes pickup { from { transform: none; box-shadow: var(--shadow-sm); } }
@keyframes ph-in { from { opacity: 0; transform: scaleY(.6); } }
main.page { animation: fade-up .35s var(--ease) backwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* /boards: staggered tiles, image tiles with a soft blur that eases on hover */
.board-tile { animation: rise-in .5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.board-tile:active { transform: scale(.98); }
.board-tile .tile-img { transform: scale(1.1); filter: blur(var(--tb, 3px)); transition: transform .7s var(--ease), filter .45s var(--ease); }
.board-tile:hover .tile-img { transform: scale(1.16); filter: blur(calc(var(--tb, 3px) * .5)); }
.board-tile .tile-shade { background: linear-gradient(180deg, rgb(0 0 0 / .12), rgb(0 0 0 / .5)); backdrop-filter: blur(1.5px); }
.board-tile .tile-star { transition: transform .3s var(--ease); }
.board-tile:hover .tile-star { transform: rotate(18deg) scale(1.15); }
.board-tile.new i { transition: transform .35s var(--ease); }
.board-tile.new:hover i { transform: rotate(90deg) scale(1.2); }
.sec-title { animation: fade-up .4s var(--ease) backwards; }
.page-head { animation: fade-up .35s var(--ease) backwards; }

/* board: entrance, hover, drag */
.board-bar { animation: fade-down .35s var(--ease) backwards; }
.lists.enter .list { animation: rise-in .5s var(--ease) backwards; }
.lists.enter .list:nth-child(2) { animation-delay: 60ms; } .lists.enter .list:nth-child(3) { animation-delay: 120ms; }
.lists.enter .list:nth-child(4) { animation-delay: 180ms; } .lists.enter .list:nth-child(5) { animation-delay: 240ms; }
.lists.enter .list:nth-child(n+6) { animation-delay: 300ms; }
.lists.enter .kcard { animation: rise-in .45s var(--ease) backwards; animation-delay: 160ms; }
.lists.enter .kcard:nth-child(2) { animation-delay: 220ms; } .lists.enter .kcard:nth-child(3) { animation-delay: 280ms; }
.lists.enter .kcard:nth-child(4) { animation-delay: 340ms; } .lists.enter .kcard:nth-child(n+5) { animation-delay: 400ms; }
.list { transition: box-shadow var(--t-med) var(--ease), border-color var(--t-fast); }
.list:hover { box-shadow: var(--shadow); }
.list-head .count, .add-card-btn, .composer { transition: background var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease); }
.composer { animation: rise-in .25s var(--ease) backwards; }
.kcard { transition: box-shadow var(--t-med) var(--ease), border-color var(--t-fast), transform var(--t-med) var(--ease), background var(--t-fast); }
.kcard:active:not(.dragging) { transform: scale(.985); }
.kcard.dragging, .list.dragging { animation: pickup .2s var(--ease); }
.placeholder { animation: ph-in .22s var(--ease); transform-origin: top; }
.kcard .kmeta, .kcard .ktitle { transition: color var(--t-fast); }
@media (prefers-reduced-motion: reduce) { .lists { scroll-behavior: auto; } }
/* settings keep a narrower centred column (as in the approved trial); report pages use the full width with a back bar */
.admin-layout.is-settings { max-width: 1120px; margin-inline: auto; }
.report-page { width: 100%; }
.report-bar { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.panel .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
/* card modal: description autosave status, composer actions, centred segmented buttons */
.desc-state { text-align: end; min-height: 20px; margin-block-start: var(--sp-1); }
.cm-composer-actions { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-sm); }
.cm-composer .send { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); line-height: 1; white-space: nowrap; }
.cm-composer .send .lbl { line-height: 1; }
.cm-composer .send[hidden] { display: none; }
.dd-menu .segmented button { justify-content: center; text-align: center; width: auto; flex: 1; }
.mention-btn { color: var(--muted); }
.mention-btn:hover { color: var(--primary); }
@media (max-width: 860px) {
  .cm-composer { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .cm-composer .textarea { flex: 1 1 100%; width: 100%; height: 72px; min-height: 72px; }
  .cm-composer-actions { flex: 1 1 100%; }
  .cm-composer .send { width: auto; padding-inline: var(--sp-4); }
  .cm-composer .send .lbl { display: inline; }
}
/* settings: tab strip (one panel at a time) and a side menu that scrolls with the page (no nested scroll) */
.set-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-block-end: var(--sp-4); } /* tabs wrap onto more rows instead of scrolling sideways */
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-4); border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.set-tab i { color: var(--muted); }
.set-tab:hover { border-color: var(--primary); color: var(--text); }
.set-tab.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.set-tab.on i { color: inherit; }
.panels > .panel { animation: fade-up .3s var(--ease) backwards; }
@media (min-width: 861px) { .admin-side { position: static; max-height: none; overflow: visible; } }
/* "@" lives inside the comment box and shows only while the box is active; sort button sits at the end of the tab row */
.cm-input-wrap { position: relative; }
.cm-input-wrap .textarea { padding-inline-end: var(--sp-10); }
.cm-input-wrap .mention-btn { position: absolute; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
.cm-input-wrap:focus-within .mention-btn { opacity: 1; pointer-events: auto; }
.cm-composer-actions:has(.send[hidden]) { display: none; }
.sort-btn { color: var(--text-2); margin-block-end: var(--sp-1); }
.sort-btn i { color: var(--muted); }
@media (max-width: 860px) { .cm-input-wrap { flex: 1 1 100%; } .cm-input-wrap .textarea { height: 72px; min-height: 72px; } }
/* users list: six compact columns that wrap instead of scrolling sideways */
.users-t { table-layout: auto; }
.users-t th, .users-t td { text-align: start; vertical-align: middle; }
.users-t td.uc-user { min-width: 170px; }
.users-t .contact { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.users-t .badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.users-t td.u-act { white-space: nowrap; text-align: end; }
.users-t td.u-act .btn + .btn { margin-inline-start: var(--sp-1); }
.users-t .badge i { font-size: var(--fs-xs); }
@media (max-width: 860px) { .users-t td.uc-user { min-width: 0; } .users-t .contact { align-items: flex-end; } }
/* notes inside panels get room above and below */
.panel-note { margin: var(--sp-4) var(--sp-5); }
@media (max-width: 860px) { .panel-note { margin-inline: var(--sp-4); } }
.panel .filter-row { padding: var(--sp-3) var(--sp-5); }
/* random avatar creator */
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); width: 100%; max-width: 360px; }
.av-opt { aspect-ratio: 1; border: 3px solid transparent; border-radius: 50%; padding: 0; overflow: hidden; background: none; cursor: pointer; transition: transform var(--t-med) var(--ease), border-color var(--t-fast); }
.av-opt svg, .av-big svg { width: 100%; height: 100%; display: block; }
.av-opt:hover { transform: scale(1.08); }
.av-opt.on { border-color: var(--primary); box-shadow: var(--ring); }
.av-big { --size: 96px; }
.prof-av-act { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.uf-av .btn { margin-block-start: var(--sp-1); }
/* user form: three tabs instead of one long scroll */
.uf-tabs { padding-block-end: var(--sp-2); }
.uf-pane { display: grid; gap: var(--sp-5); }
.uf-pane[hidden] { display: none; }
.uf-sec { box-shadow: var(--shadow-sm); }
.uf-actions { position: sticky; bottom: calc(var(--sp-6) * -1); }
/* my tasks: grouped rows */
.panel-h .ic.danger { background: var(--danger-soft); color: var(--danger); }
.panel-h .ic.warn { background: var(--warn-soft); color: var(--warn); }
.panel-h .ic.success { background: var(--success-soft); color: var(--success); }
.mt-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); min-height: var(--ctl); border-top: 1px solid var(--border); color: var(--text); text-decoration: none !important; transition: background var(--t-fast); }
.mt-row:first-of-type { border-top: 0; }
.panel-h + .mt-row { border-top: 0; }
.mt-row:hover { background: var(--surface-2); }
.mt-row .prio { align-self: stretch; }
.done-t { text-decoration: line-through; color: var(--muted); }
.panels > .card .filter-row { padding: var(--sp-3) var(--sp-5); }
@media (max-width: 860px) { .mt-row { padding-inline: var(--sp-4); flex-wrap: wrap; } }

/* archive */
.arch-row { padding-inline: var(--sp-5); }
.arch-row .btn + .btn { margin-inline-start: var(--sp-1); }

/* calendar toolbar */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.cal-nav { display: flex; align-items: center; gap: var(--sp-2); }
.cal-nav h3 { font-size: var(--fs-xl); min-width: 140px; text-align: center; }
.cal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cal-filters .select { width: auto; min-width: 150px; }
.cal-day { transition: background var(--t-fast); }
.cal-day:not(.out):hover { background: var(--surface-2); }
.cal-wd { border-bottom: 1px solid var(--border); }
.cal-card { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast); }
.cal-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
@media (max-width: 860px) { .cal-toolbar { padding: var(--sp-3) var(--sp-4); } .cal-nav h3 { min-width: 0; flex: 1; font-size: var(--fs-lg); } }
/* boards page */
.board-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-5); }
.board-filter .input-icon { flex: 1 1 220px; max-width: 360px; }
.board-filter .select { width: auto; min-width: 150px; max-width: 100%; }
.board-filter [data-lf-count] { min-inline-size: 72px; white-space: nowrap; }
.board-filter [data-lf-clear][hidden] { display: none; }
@media (max-width: 560px) { .board-filter .input-icon { max-width: none; flex-basis: 100%; } .board-filter .select { flex: 1 1 140px; } }
.board-tile .tile-top h3 { font-size: var(--fs-lg); }
.board-tile { min-height: 144px; }
.board-tile .meta span { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-full); background: rgb(255 255 255 / .18); backdrop-filter: blur(4px); }
.cal-filters .cselect, .filter-row .cselect, .board-filter .cselect { width: auto; min-width: 150px; }
.cal-filters .check { white-space: nowrap; }
/* one shared width: the admin settings shell (1120px; the content column next to the menu is ~848px) */
.settings-width { max-width: 1120px; margin-inline: auto; }
.modal.w23 { max-width: min(848px, calc(100vw - 32px)); }
/* user form modal: keeps a margin to the page edges; only its body scrolls (header and action bar stay inside the frame) */
@media (min-width: 861px) {
  .modal-back:has(.modal.w23) { align-items: center; overflow: hidden; padding: var(--sp-6) var(--sp-4); }
  .modal.w23 { display: flex; flex-direction: column; max-height: calc(100dvh - var(--sp-6) * 2); }
  .modal.w23 .modal-head { flex: none; }
  .modal.w23 .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding-block-end: 0; overscroll-behavior: contain; }
  .modal.w23 .uf-actions { position: sticky; bottom: 0; margin-block: 0; padding-block: var(--sp-3); background: var(--surface); }
}
/* avatar actions: small round icons on the edge of the picture (upload, random, remove) */
.prof-av { position: relative; }
.av-ic { position: absolute; z-index: 2; width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--surface); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); cursor: pointer; font-size: var(--fs-xs); transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.av-ic::before { content: ''; position: absolute; inset: -6px; }
.av-ic:hover { transform: scale(1.12); background: var(--primary-600); }
.av-ic.pen { inset-block-end: 0; inset-inline-end: 0; }
.av-ic.gen { inset-block-end: 0; inset-inline-start: 0; background: var(--surface-3); color: var(--text); border-color: var(--surface); }
.av-ic.gen:hover { background: var(--primary); color: var(--on-primary); }
.av-ic.danger { inset-block-start: 0; inset-inline-end: 0; background: var(--danger); color: #fff; }
.av-ic.danger:hover { background: var(--danger); filter: brightness(1.1); }
.uf-av .av-ic { width: 28px; height: 28px; }
.uf-av .prof-av { width: 96px; height: 96px; margin-inline: auto; }
.uf-actions .btn-danger:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; opacity: .7; }
/* ===== roles page (cards + matrix) ===== */
.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); margin-block-end: var(--sp-5); }
.role-card { display: flex; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.role-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.role-card .ic { width: 40px; height: 40px; flex: none; border-radius: var(--r); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.role-card.super .ic { background: var(--warn-soft); color: var(--warn); }
.role-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-block-start: var(--sp-2); }
.matrix-card { overflow: hidden; }
.matrix-wrap { max-height: calc(100vh - 220px); }
.matrix thead th { padding: var(--sp-3) var(--sp-3); background: var(--surface-2); vertical-align: bottom; }
.matrix thead th small { display: block; font-weight: 400; font-size: var(--fs-xs); }
.matrix .role-th { font-weight: 700; }
.matrix td { height: var(--ctl); padding-block: var(--sp-1); }
.matrix td.pk { min-width: 240px; white-space: normal; }
.matrix td.pk code { margin-inline-start: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.matrix tr.grp td { background: var(--primary-soft); color: var(--primary); font-weight: 700; height: 40px; }
.matrix tr.grp td.pk .grp-t { font-size: var(--fs-sm); }
.matrix tr.grp td .muted { color: var(--muted); font-weight: 400; }
.matrix tbody tr:not(.grp):hover td { background: var(--surface-2); }
.matrix .check { min-height: 0; justify-content: center; }
.matrix input[type=checkbox] { width: 20px; height: 20px; border-radius: 6px; }
.matrix input[type=checkbox]::after { width: 5px; height: 10px; }
.matrix tfoot { display: none; }

/* per-user special permissions (user form) */
.ov-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r); }
.ov-grp { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--border); }
.ov-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); }
.ov-grp + .ov-row { border-top: 0; }
.ov-row code { display: block; font-size: var(--fs-xs); color: var(--muted); direction: ltr; text-align: end; } /* the English key stays LTR but sits on the right edge, under the Persian name */
.ov-row.has-ov.allow { background: var(--success-soft); }
.ov-row.has-ov.deny { background: var(--danger-soft); }
.ov-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--r); flex: none; }
.ov-seg button { min-height: 36px; padding-inline: var(--sp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); transition: background var(--t-fast), color var(--t-fast); }
.ov-seg button:hover:not(.on) { background: var(--surface-3); }
.ov-seg button.on.follow { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 700; }
.ov-seg button.on.allow { background: var(--success); color: #fff; font-weight: 700; }
.ov-seg button.on.deny { background: var(--danger); color: #fff; font-weight: 700; }
@media (pointer: coarse) { .ov-seg button { min-height: var(--ctl); } }
@media (max-width: 860px) { .ov-row { flex-wrap: wrap; } .ov-seg { width: 100%; } .ov-seg button { flex: 1; justify-content: center; } .matrix td.pk { min-width: 180px; } }
.tip-wrap { display: inline-flex; cursor: not-allowed; }
.tip-wrap > .btn:disabled { pointer-events: none; }
/* toast progress bar: clearer, pauses on hover */
.toast-bar { height: 4px; opacity: .7; border-radius: 0 var(--r-full) var(--r-full) 0; transform-origin: right; }
.toast.success .toast-bar, .toast.error .toast-bar { background: #fff; opacity: .85; }
.toast:hover .toast-bar { animation-play-state: paused; }
.toast { padding-block-end: calc(var(--sp-3) + 2px); }
.toast-bar { animation: none !important; }
/* logout dialog: the burning-fuse bar sits at the bottom, flush with the dialog edges */
/* toast bar empties from right to left */
.toast-bar { transform-origin: left; border-radius: 0 var(--r-full) var(--r-full) 0; }
/* logout dialog v2: short smooth fuse, quiet gray text button under it */
.leave-stay { min-width: 0; min-height: 44px; margin: 0; padding-inline: var(--sp-4); background: none; border: 0; color: var(--text-3, var(--muted, #6b7280)); font: inherit; font-size: var(--fs-sm); cursor: pointer; border-radius: var(--r-md); }
.leave-stay:hover { color: var(--text); background: var(--surface-2, rgb(0 0 0 / .05)); }

/* admin notifications: picture + live preview */
.bc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-5); align-items: start; }
.bc-side { position: sticky; top: calc(var(--topbar-h, 56px) + var(--sp-4)); display: grid; gap: var(--sp-2); }
.bc-side h3 { font-size: var(--fs-md); }
.bc-cap { margin-block-start: var(--sp-2); }
.bc-pv { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.bc-pv .notif-item { border-bottom: 0; }
.bc-pv-meta { margin-block-start: var(--sp-2); }
.bc-img { display: grid; gap: var(--sp-2); justify-items: start; }
.bc-img-box { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; max-width: 320px; background: var(--surface-2); }
.bc-img-box img, .ni-img, .nl-img, .bc-pv-img, .pv-push-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.ni-img, .nl-img, .bc-pv-img { margin-block: var(--sp-2); border-radius: var(--r-md); max-width: 320px; }
.pv-push { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.pv-push-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.pv-push-head img { width: 16px; height: 16px; border-radius: var(--r-sm); }
.pv-push-head .muted { margin-inline-start: auto; }
.pv-push-body { color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-push-img { border-radius: var(--r-md); margin-block-start: var(--sp-2); }
@media (max-width: 900px) { .bc-grid { grid-template-columns: 1fr; } .bc-side { position: static; } }
/* toast with a picture (admin announcements) */
.toast.has-img { flex-wrap: wrap; }
.toast-img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background: rgb(0 0 0 / .15); }

.bc-cd { font-size: var(--fs-xs); margin-block-start: var(--sp-1); font-variant-numeric: tabular-nums; }

.toast .toast-body { font-weight: 400; margin-block-start: var(--sp-1); white-space: pre-wrap; overflow-wrap: anywhere; opacity: .9; }

.chip.on-static.seen { background: var(--success-soft, var(--primary-soft)); color: var(--success, var(--primary)); }

/* lock notice: the icon is centred on the first text line */
.auth-card .alert.warn > i { flex: 0 0 auto; display: inline-flex; align-items: center; height: 1.9em; }
.auth-card .alert.warn > span { min-width: 0; overflow-wrap: anywhere; }

/* label strip: only the labels are clickable (they switch between names and compact view) */
.kcard .ktop { cursor: default; }
.kcard .ktop::before { content: none; }
.kcard .ktop .lbl, .kcard .ktop .lbl-pill { cursor: pointer; }

/* board menu → background: blur card */
.blur-card { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.blur-card.off { opacity: .6; }
.blur-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.blur-head > b { background: var(--primary-soft); color: var(--primary); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-sm); white-space: nowrap; }
.blur-scale { display: flex; align-items: center; gap: var(--sp-3); }
.rng { --fill: 0%; flex: 1; min-width: 0; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rng:disabled { cursor: not-allowed; }
.rng::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-full); background: linear-gradient(to right, var(--primary) var(--fill), var(--surface-3) var(--fill)); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); box-shadow: var(--shadow-sm); }
.rng::-moz-range-track { height: 6px; border-radius: var(--r-full); background: var(--surface-3); }
.rng::-moz-range-progress { height: 6px; border-radius: var(--r-full); background: var(--primary); }
.rng::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); }
.rng:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-full); }
html[dir="rtl"] .rng::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--primary) var(--fill), var(--surface-3) var(--fill)); }
.blur-presets { justify-self: start; }
.blur-presets button:disabled { opacity: .5; cursor: not-allowed; }

/* board menu → members */
.mem-sum { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mem-chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.mem-chip b { min-width: 20px; padding-inline: var(--sp-1); border-radius: var(--r-full); background: var(--surface-2); color: var(--text); font-size: var(--fs-xs); text-align: center; }
.mem-chip:hover { border-color: var(--primary); }
.mem-chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.mem-chip.on b { background: var(--primary); color: #fff; }
.mem-list { display: grid; gap: var(--sp-2); }
.mem-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.mem-row:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-sm); }
.mem-name { min-width: 0; }
.mem-n { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.mem-n b { min-width: 0; }
.mem-crown { color: var(--warn); font-size: var(--fs-sm); }
.mem-role { width: auto; min-width: 128px; height: 36px; border-radius: var(--r-full); padding-inline: var(--sp-4); background-color: var(--surface-2); }
@media (max-width: 600px) { .mem-row { flex-wrap: wrap; } .mem-name { flex: 1 1 calc(100% - 64px); } .mem-role { flex: 1; } }
.mem-row .mem-name { flex: 1 1 0; min-width: 0; }
.mem-row .mem-role { flex: 0 0 140px; width: 140px; min-width: 0; }
.mem-row .badge { flex: 0 0 auto; }

.mem-row .cselect { flex: 0 0 148px; width: 148px; min-width: 0; }
.mem-row .cselect .mem-role { width: 100%; min-width: 0; }
@media (max-width: 600px) { .mem-row .cselect { flex: 1 1 140px; width: auto; } }

/* add-member dialog: the w23 body has no bottom padding (it is made for sticky action bars), so give the content its own */
.add-mem { padding-block-end: var(--sp-6); }
.add-mem .rp-tree { margin-block: var(--sp-1); }

.bsw-dot { flex: 0 0 auto; width: 28px; height: 20px; border-radius: var(--r-sm); border: 1px solid rgb(0 0 0 / .12); }

/* card templates */
.foot-row { display: flex; align-items: center; gap: var(--sp-1); }
.foot-row .add-card-btn { flex: 1; min-width: 0; }
.tpl-btn { flex: 0 0 auto; color: var(--muted); }
.tpl-list { display: grid; gap: var(--sp-2); }
.ctpl-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.ctpl-main { min-width: 0; display: grid; gap: 2px; }
.tpl-empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); text-align: center; }
.tpl-empty > i { font-size: 28px; color: var(--muted); }
.tpl-empty p { margin: 0; }

/* done circle: pop on completion, undo toast action */
@keyframes donePop { 0% { transform: scale(.6); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes doneRing { 0% { transform: scale(.7); opacity: .65; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes doneTick { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.35) rotate(0); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* board card circle: completing = one effect, in order: the circle fills, the tick is drawn (below), sparks (.kburst) and a green wash (.kcard.pop) — no scale pop, no ring, no spinning tick */
.kdone.pop i { animation: kTick 240ms var(--ease) 60ms both; }
@keyframes kTick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .kdone.pop i { animation: none; } }
.toast-act { margin-inline-start: auto; flex: 0 0 auto; min-height: 32px; padding-inline: var(--sp-3); border: 1px solid rgb(255 255 255 / .6); border-radius: var(--r-md); background: rgb(255 255 255 / .18); color: inherit; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.toast-act:hover { background: rgb(255 255 255 / .32); }
/* dashboard trial */
.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-block-end: var(--sp-5); }
.dash-stat { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none !important; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.dash-stat:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.dash-stat .ic { grid-row: span 2; }
.dash-stat b { font-size: var(--fs-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-stat.bad b { color: var(--danger); }
.dash-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-5); align-items: start; }
.dash-tl { display: grid; }
.dash-ev { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }
.dash-ev:first-child { border-top: 0; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: minmax(0, 1fr); } .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* board bar: star in a warmer yellow; live-updates button */
/* (the star's colour now comes from the .on class on the button, see the board bar block at the end) */
.live-btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 28px; min-height: 28px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-full); background: none; color: inherit; font: inherit; font-size: var(--fs-xs); cursor: pointer; justify-content: center; }
.live-btn:hover { background: rgb(255 255 255 / .18); }
.live-btn.off .live-dot { background: var(--muted); box-shadow: none; animation: none; }
.live-btn.off { background: rgb(255 255 255 / .22); }
@media (max-width: 860px) { .board-bar .live-btn:not(.off) { display: none; } }
/* real card dialog opened over my-tasks / calendar / archive (board page in a transparent frame) */
.card-frame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 150; background: transparent; color-scheme: normal; }
html.embed, html.embed body { background: transparent !important; }
html.embed .topbar, html.embed .bottom-nav, html.embed .board-bar, html.embed .lists, html.embed .col-tabs, html.embed .site-foot, html.embed #boardBg, html.embed .scrim { display: none !important; }
html.embed .shell, html.embed main { background: transparent; }
/* checklist: titles and items edit in place (saved when you click away) */
.chk-edit { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; }
.chk-edit:hover { background: var(--surface-2); }
.chk-edit:focus { outline: none; background: var(--surface); border-color: var(--primary); }
.chk-title { font-weight: 700; font-size: inherit; }
.chk-item.done .chk-edit { text-decoration: line-through; color: var(--muted); }
.set-tab, .set-tab:hover, .set-tab:focus-visible { text-decoration: none; }

/* per-line direction: each line / paragraph of a comment or description takes the direction of its own first strong letter */
.bidi-lines, .md-raw { unicode-bidi: plaintext; text-align: start; }
.md-body > *, .md-body li, .md-body blockquote { unicode-bidi: plaintext; text-align: start; }
/* comments: links, and a thin line under the name / time / icons row */
.comment .cmt-head { padding-block-end: var(--sp-1); margin-block-end: var(--sp-1); border-bottom: 1px solid var(--border); }
.comment .body a.cmt-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; unicode-bidi: isolate; direction: ltr; overflow-wrap: anywhere; }
.comment .body a.cmt-link:hover { text-decoration-thickness: 2px; }
/* comments: icons only on hover, load-more, link highlight; mention button stays inside the box */
.cmt-more { width: 100%; justify-content: center; margin-block-start: var(--sp-2); color: var(--primary); }
.comment.flash .bubble { animation: cmtFlash 2.4s ease-out; }
@keyframes cmtFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--primary); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .comment.flash .bubble { animation: none; box-shadow: 0 0 0 3px var(--primary); } }
.cm-input-wrap .mention-btn { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: var(--r-sm); transform: none !important; box-shadow: none !important; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2); }
.cm-input-wrap .mention-btn:hover { background: var(--surface-2); }
.cm-input-wrap .textarea { display: block; }

/* board defaults editor (settings) */
.bd-list { display: grid; gap: var(--sp-2); }
.bd-row { display: flex; align-items: center; gap: var(--sp-2); }
.bd-row .input { flex: 1; min-width: 0; }
.bd-row .check { white-space: nowrap; }
.bd-n { width: 20px; text-align: center; }
.bd-row .color-in { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; cursor: pointer; }
/* new-board setup popup */
.setup-pop { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-6) var(--sp-4) var(--sp-4); }
.setup-pop h3 { margin: 0; font-size: var(--fs-lg); }
.setup-pop p { margin: 0; max-width: 360px; line-height: 1.9; }
.setup-emoji { font-size: 44px; line-height: 1; }
.cmt-jump { margin-inline-start: var(--sp-1); color: var(--muted); }
.cmt-jump:hover { color: var(--primary); }
/* dashboard stat tiles: same icon box as the old stat cards (square with rounded corners) */
.dash-stat .ic { width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; font-size: var(--fs-lg); flex: none; }

.dash-ev .grow, .task-row .grow { overflow-wrap: anywhere; min-width: 0; }

/* admin side menu search */
.side-search { position: relative; margin-block-end: var(--sp-2); }
.side-search > i { position: absolute; inset-inline-start: var(--sp-3); inset-block-start: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-sm); pointer-events: none; }
.side-search .input { padding-inline-start: var(--sp-8); height: 40px; }
.side-empty { padding: var(--sp-3); text-align: center; }
.admin-side [hidden] { display: none !important; }
.stepper .unit { padding-inline: var(--sp-4); font-size: var(--fs-sm); }
.bd-prev { display: grid; gap: var(--sp-2); }
.bd-prev-set { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); }
.bd-prev-set .lbl-pill { max-width: 100%; }

/* time field: hour and minute as two selects (no AM/PM, Persian digits, 24h) */
.time-pick { display: inline-flex; align-items: center; gap: var(--sp-2); direction: ltr; }
.time-pick .time-sep { font-weight: 700; color: var(--muted); }
.time-pick .select, .time-pick .cselect { min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
.time-pick-wrap { display: grid; gap: var(--sp-1); }
/* a stepper keeps its full width (in a crowded settings row it was squeezed and clipped its unit label) */
.stepper { flex: none; max-width: 100%; }
.stepper button { flex: none; }
.stepper input { flex: none; }

/* time wheel popup */
.tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: var(--ctl); min-width: 140px; padding-inline: var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; direction: ltr; }
.tw-btn:hover { border-color: var(--primary); }
.tw-btn i { color: var(--muted); }
.tw-val { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tw-backdrop { position: fixed; inset: 0; z-index: 199; }
.tw-pop { position: fixed; z-index: 200; display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 240px; animation: pop var(--t-med) var(--ease); }
.tw-pop.sheet { inset: auto 0 0 0; width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
.tw-cols { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); direction: ltr; height: calc(var(--tw-h, 40px) * 5); }
.tw-band { position: absolute; inset-inline: 0; top: 50%; height: 40px; transform: translateY(-50%); border-radius: var(--r-md); background: var(--primary-soft); pointer-events: none; }
.tw-col { position: relative; flex: 1; height: 200px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding-block: 80px; outline: none; -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); cursor: grab; overscroll-behavior: contain; touch-action: pan-y; }
.tw-col::-webkit-scrollbar { display: none; }
.tw-col:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); border-radius: var(--r-md); }
.tw-item { height: 40px; display: grid; place-items: center; scroll-snap-align: center; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; color: var(--text-2); user-select: none; transition: opacity var(--t-fast), transform var(--t-fast); }
.tw-item.on { color: var(--primary); font-weight: 700; }
.tw-sep { font-size: var(--fs-lg); font-weight: 700; color: var(--muted); z-index: 1; }
.tw-lab { display: flex; justify-content: space-around; color: var(--muted); font-size: var(--fs-xs); direction: ltr; padding-inline: var(--sp-6); }
@media (prefers-reduced-motion: reduce) { .tw-item { transition: none; } }
/* automation */
.bm-sec-h { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-3); }
.bm-sec-h > i { font-size: var(--fs-xl); color: var(--primary); }
.auto-tabs { flex-wrap: wrap; align-self: start; }
.auto-lead { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.auto-ex { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-5); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.9; }
.auto-list { display: grid; gap: var(--sp-2); }
.auto-rule { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.auto-rule.off .auto-rule-main { opacity: .55; }
.auto-rule-main { min-width: 0; display: grid; gap: 2px; }
.auto-sentence { font-weight: 600; line-height: 1.8; overflow-wrap: anywhere; }
.auto-rule > .ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: var(--primary-soft); color: var(--primary); flex: none; }
.auto-steps { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.auto-steps li { display: inline-flex; align-items: center; gap: var(--sp-2); padding-block: var(--sp-1); padding-inline: var(--sp-1) var(--sp-3); border-radius: var(--r-full); border: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); }
.auto-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-weight: 700; }
.auto-steps li.on { border-color: var(--primary); color: var(--text); }
.auto-steps li.on .n { background: var(--primary); color: var(--on-primary, #fff); }
.auto-steps li.done .n { background: var(--success); color: #fff; }
.auto-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.auto-opt { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.auto-opt i { color: var(--muted); width: 18px; text-align: center; }
.auto-opt:hover { border-color: var(--primary); }
.auto-opt.on { border-color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.auto-opt.on i { color: var(--primary); }
.auto-opts.small { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.auto-params, .auto-act { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.auto-act-h { display: flex; align-items: center; gap: var(--sp-2); }
.auto-act-h .ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); }
.auto-field { margin: 0; }
.auto-review { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--primary-soft); }
.auto-review > i { font-size: var(--fs-xl); color: var(--primary); margin-block-start: 4px; }
.auto-review p { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 2; }
.auto-log { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; border-bottom: 1px dashed var(--border); }
.auto-log.ok > i { color: var(--success); } .auto-log.error > i { color: var(--danger); } .auto-log.skipped > i { color: var(--muted); }
.time-slot { display: inline-flex; }
@media (max-width: 600px) { .auto-lead { flex-direction: column; } .auto-rule { flex-wrap: wrap; } }
/* automation: spacing pass */
.auto-intro { margin-block-end: var(--sp-4); line-height: 1.9; }
.auto-tabs { margin-block-end: var(--sp-4); }
.auto-wiz { display: grid; gap: var(--sp-4); padding-block-end: var(--sp-6); }
.auto-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-start: var(--sp-2); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border); }
.auto-wiz .alert { margin: 0; }
.auto-params, .auto-act { gap: var(--sp-4); }
.auto-field input[type=number] { text-align: center; }
.auto-field .muted.sm { line-height: 1.8; margin-block-start: var(--sp-1); }
.auto-review { margin: 0; }
.auto-list { margin-block-start: var(--sp-1); }
.auto-lead { margin-block-end: var(--sp-1); }
/* archive: card rows open the card, so they show it */
.arch-row.clickable { cursor: pointer; transition: background var(--t-fast); }
.arch-row.clickable:hover { background: var(--surface-2); }
.arch-row.clickable .btn { cursor: pointer; }
/* a comment of one short line gets room below it */
.comment .bubble { padding-block-end: var(--sp-3); }
.comment .body:only-child { min-height: 1.9em; }

.auto-ex-h { margin-block-start: var(--sp-2); font-weight: 700; }
.auto-ex { margin-block-start: var(--sp-1); }
.auto-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-inline-start: var(--sp-2); padding-inline: var(--sp-1); border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.segmented button.on .auto-count { background: var(--primary); color: var(--on-primary, #fff); }

/* the automation robot's SVG avatar sits on a light disc so it shows in dark mode too */
.avatar.img.robot { background: #fff; }
.avatar.img.robot img { object-fit: contain; padding: 12%; }
.robot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.robot-tile { position: relative; display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.robot-tile.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.robot-tile .mem-del { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); }
.robot-tile .avatar.xl { --size: 96px; }

.auto-intro { display: flex; align-items: center; gap: var(--sp-3); }
.auto-review > .avatar { flex: none; --size: 40px; }

/* automation intro: the robot sits inside the sentence and grows on hover / click */
.auto-intro { display: block; }
.auto-intro .muted { line-height: 2.2; }
.robot-inline { display: inline-grid; width: 22px; height: 22px; vertical-align: middle; margin-inline: 2px; position: relative; z-index: 1; cursor: zoom-in; transform-origin: center; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.robot-inline:hover { transform: scale(2.6); z-index: 6; box-shadow: var(--shadow-lg); }
.robot-inline.big { transform: scale(3.4); z-index: 6; box-shadow: var(--shadow-lg); }
.robot-inline-i { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .robot-inline { transition: none; } }

/* job-title delete: searchable list */
.jt-other { display: grid; gap: var(--sp-2); padding-inline-start: var(--sp-6); transition: opacity var(--t-fast); }
.jt-other.off { opacity: .45; pointer-events: none; }
.jt-pick { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.jt-opt { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 40px; padding-inline: var(--sp-3); border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.jt-opt:last-child { border-bottom: 0; }
.jt-opt i { visibility: hidden; color: var(--primary); }
.jt-opt:hover { background: var(--surface-2); }
.jt-opt.on { background: var(--primary-soft); font-weight: 700; }
.jt-opt.on i { visibility: visible; }

/* comment header: the thin line sits between the title row and the text with room on both sides */
.comment .cmt-head { padding-block-end: 0; margin-block-end: var(--sp-2); }
.comment .cmt-head .btn-icon { min-height: 28px; height: 28px; width: 28px; }
/* robot zoom (click on the robot in the automation intro) */
.robot-zoom { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; background: transparent; transition: background .35s; cursor: zoom-out; }
.robot-zoom.on { background: rgb(0 0 0 / .5); backdrop-filter: blur(3px); }
.robot-zoom-card { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); transition: transform .45s cubic-bezier(.34, 1.25, .64, 1), opacity .3s; }
.robot-zoom-img { border-radius: var(--r-lg) !important; }
.robot-zoom-img img { object-fit: contain; }
.robot-zoom-cap { font-size: var(--fs-md); font-weight: 700; color: var(--text-2); }
.robot-zoom-i { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .robot-zoom, .robot-zoom-card { transition: none; } }
.robot-inline.big { transform: none; box-shadow: none; }
/* exit dialog trials */
@keyframes leaveWave { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(16deg); } 40% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
.leave-wave { font-size: 56px; line-height: 1; transform-origin: 70% 80%; animation: leaveWave 2.2s ease-in-out infinite; }
.leave-dlg.gone { transition: opacity .4s, transform .4s; opacity: 0; transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .leave-wave { animation: none; } }

/* header buttons: a <button> and an <a> get the same box */
.page-head .btn { padding-block: 0; }

/* Trello import wizard */
.imp-how { margin: 0; padding-inline-start: var(--sp-5); color: var(--text-2); line-height: 2.1; }
.imp-drop { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.imp-drop > i { font-size: 32px; color: var(--muted); }
.imp-drop:hover, .imp-drop.over, .imp-drop:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: none; }
.imp-drop.ok { border-style: solid; border-color: var(--success); }
.imp-drop.ok > i { color: var(--success); }
.imp-sum { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--primary-soft); }
.imp-sum > i { font-size: var(--fs-xl); color: var(--primary); }
.imp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.imp-tile { display: grid; justify-items: center; gap: 2px; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); text-align: center; }
.imp-tile .ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: var(--primary-soft); color: var(--primary); }
.imp-tile b { font-size: var(--fs-xl); line-height: 1.3; font-variant-numeric: tabular-nums; }
.imp-lists { display: grid; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.imp-lists > div { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); }
.imp-lists > div:first-child { border-top: 0; }
.imp-notes ul { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-5); color: var(--text-2); font-size: var(--fs-sm); line-height: 2; }
.imp-notes li.skip { list-style: none; margin-inline-start: calc(var(--sp-5) * -1); color: var(--muted); }
@media (max-width: 600px) { .imp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .imp-drop { flex-direction: column; text-align: center; } }
.imp-person { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.imp-av { width: var(--ctl); height: var(--ctl); flex: none; display: grid; place-items: center; border-radius: var(--r-full); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.imp-lists .badge { flex: none; }
.imp-person { flex-direction: column; align-items: stretch; }
.imp-who { display: flex; align-items: center; gap: var(--sp-3); }
.imp-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
.imp-ctl > .input:first-child, .imp-ctl > .imp-opts { grid-column: 1 / -1; }
.imp-ctl .imp-picked + .input { width: auto; min-width: 140px; }
.imp-picked { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-3) var(--sp-1); border: 1px solid var(--success); border-radius: var(--r); background: var(--success-soft); }
.imp-picked > i { color: var(--success); }
.imp-opts { display: grid; max-height: 176px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.imp-opt { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding-inline: var(--sp-3); border: 0; border-top: 1px solid var(--border); background: none; text-align: start; cursor: pointer; }
.imp-opt:first-child { border-top: 0; }
.imp-opt:hover, .imp-opt:focus-visible { background: var(--primary-soft); outline: none; }
.imp-none { padding: var(--sp-3); }
/* user modal (کاربر جدید / ویرایش کاربر): fixed height across tabs, spacing from tokens */
.uf { gap: var(--sp-5); min-height: min(calc(100dvh - 124px), 740px); align-content: start; }
.uf-sec { padding: var(--sp-5); }
.uf-sec-h { gap: var(--sp-3); margin-block-end: var(--sp-4); }
.uf-sec-ic, .uf-ic { width: var(--ctl-sm); height: var(--ctl-sm); }
.uf-sec-b, .uf-fields { gap: var(--sp-4); }
.uf-top { grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-6); }
.uf-cols { gap: var(--sp-5); }
.uf-row { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.ub-row { gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.ub-dot { width: var(--sp-3); height: var(--sp-3); }
.uf-lbl, .uf-fields .field label { font-size: var(--fs-sm); }
@media (max-width: 760px) { .uf { min-height: 0; } .uf-top { grid-template-columns: minmax(0, 1fr); } }
.uf { display: flex; flex-direction: column; }
.uf > .uf-actions { margin-block-start: auto; }

/* mobile number: the input is transparent, a mirror layer draws the digits grouped as 09xx xxx xxxx (visual only) */
.mob { position: relative; }
.mob-in { color: transparent; caret-color: transparent; font-variant-numeric: tabular-nums; }
.mob-in::selection { background: transparent; }
.mob-mirror { position: absolute; inset: 0; display: flex; align-items: center; border-color: transparent; background: none; pointer-events: none; overflow: hidden; font-variant-numeric: tabular-nums; }
.mob-mirror .d { display: inline-block; min-width: 1ch; }
.mob-mirror .d.gap { margin-inline-end: var(--sp-2); }
.mob-mirror .d.ph { color: var(--muted); }
.mob-mirror .d.sel { background: var(--primary-soft); border-radius: 2px; }
.mob-caret { width: 2px; height: 1.2em; margin-inline-end: -2px; background: var(--primary); animation: mob-blink 1s steps(1) infinite; }
@keyframes mob-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mob-caret { animation: none; } }
/* dropdowns: same shape, size and spacing as inputs (tokens only, 44px rows) */
.cselect-btn, .tp-trigger { min-height: var(--ctl); gap: var(--sp-2); padding-inline: var(--sp-3); border-radius: var(--r); font-size: max(var(--fs-base), 16px); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.tp-trigger { padding-block: var(--sp-1); }
.cselect-btn:hover:not(:disabled), .tp-trigger:hover { border-color: var(--muted); }
.cselect-btn[aria-expanded="true"] { border-color: var(--primary); }
.cs-caret, .tp-trigger .cs-caret { transition: transform var(--t-fast) var(--ease); }
.cselect-menu { padding: var(--sp-1); border-radius: var(--r); animation: pop var(--t-fast) var(--ease); }
.cselect-opt { gap: var(--sp-2); min-height: var(--ctl); padding-block: var(--sp-1); padding-inline: var(--sp-3); font-size: var(--fs-base); line-height: var(--lh-ui); }
.cselect-opt.on i { color: var(--primary); }
.cs-search-wrap { margin: 0 calc(var(--sp-1) * -1) var(--sp-1); padding: var(--sp-2); }
.tp-menu { width: min(460px, calc(100vw - var(--sp-4))); }
.tp-foot { gap: var(--sp-2); margin: var(--sp-1) calc(var(--sp-1) * -1) calc(var(--sp-1) * -1); padding: var(--sp-2) var(--sp-3); }
.tp-chips { gap: var(--sp-2); }
@media (min-width: 861px) { .cselect-btn, .tp-trigger { font-size: var(--fs-base); } }
@media (prefers-reduced-motion: reduce) { .cselect-menu { animation: none; } }


.robot-zoom-cap { display: grid; justify-items: center; gap: var(--sp-1); font-size: var(--fs-lg); font-weight: 700; color: var(--text); text-align: center; }
.robot-zoom-by { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.sys-robot { width: var(--ctl); height: var(--ctl); margin: 0; flex: none; align-self: center; }
.sys-robot:hover, .sys-robot:focus-visible { transform: scale(1.6); }
/* robot credit popup */
.robot-zoom-cap { gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.robot-zoom-line { width: 100%; margin: var(--sp-1) 0; border: 0; border-top: 1px solid var(--border); }
.robot-zoom-links { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-1); }
.robot-zoom-link { width: var(--ctl); height: var(--ctl); display: grid; place-items: center; border-radius: 50%; color: var(--text-2); font-size: var(--fs-lg); transition: background var(--t-fast), color var(--t-fast); }
.robot-zoom-link:hover, .robot-zoom-link:focus-visible { background: var(--primary-soft); color: var(--primary); text-decoration: none; outline: none; }
/* robot credit popup, layout H: banner + round picture, one bold line, divider, credit, labelled links */
.robot-zoom-card { width: min(320px, calc(100vw - var(--sp-8))); padding: 0 var(--sp-5) var(--sp-5); justify-items: stretch; text-align: center; overflow: hidden; }
.rz-top { display: grid; justify-items: center; margin-inline: calc(var(--sp-5) * -1); padding: var(--sp-6) var(--sp-4) 0; background: linear-gradient(160deg, var(--brand-500), var(--brand-700)); }
.rz-top .robot-zoom-img, .rz-top .robot-zoom-i { margin-block-end: calc(var(--sp-10) * -1); border-radius: 50% !important; border: 4px solid var(--surface); box-shadow: var(--shadow); }
.rz-top .robot-zoom-i { display: grid; place-items: center; width: 120px; height: 120px; background: var(--surface); }
.rz-name { margin-block-start: calc(var(--sp-10) + var(--sp-4)); font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-head); color: var(--text); }
.rz-links { display: grid; gap: var(--sp-2); }
.rz-link { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl); padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); }
.rz-link:hover, .rz-link:focus-visible { border-color: var(--primary); background: var(--primary-soft); text-decoration: none; outline: none; }
.rz-link i { width: 20px; text-align: center; color: var(--primary); }
.rz-link span { flex: 1; text-align: start; }
.rz-link bdi { color: var(--muted); font-size: var(--fs-sm); }
.sf-credit { min-height: var(--ctl); padding-inline: var(--sp-3); border: 0; border-radius: var(--r); background: none; color: inherit; font: inherit; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.sf-credit:hover, .sf-credit:focus-visible { background: var(--primary-soft); color: var(--primary); outline: none; }
.site-foot { flex-direction: column; gap: 0; }
/* notify channel picker: in-app / browser / both, then a divider, then the dashboard popup */
.opts.opts-sep { display: flex; flex-wrap: wrap; }
.opts-sep .opt { flex: 1 1 96px; }
.opt-sep { inline-size: 1px; align-self: stretch; background: var(--border); margin-inline: var(--sp-1); }
@media (max-width: 520px) { .opt-sep { flex-basis: 100%; inline-size: auto; block-size: 1px; margin: 0; align-self: auto; } }
.site-foot .sf-credit { color: var(--muted); font-weight: 400; }
.site-foot .sf-credit:hover, .site-foot .sf-credit:focus-visible { color: var(--primary); }
.site-foot .sf-ver { padding: 0; border: 0; background: none; font-weight: 400; font-variant-numeric: tabular-nums; opacity: .7; }

.robot-zoom { overscroll-behavior: contain; touch-action: none; }

/* Trello import: progress + done views */
.imp-busy .modal-head .btn { visibility: hidden; }
.imp-run { display: grid; gap: var(--sp-4); }
.imp-bar { height: var(--sp-3); border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.imp-fill { display: block; width: 100%; height: 100%; border-radius: var(--r-full); background: var(--primary); transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--t-med) var(--ease); }
.imp-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.imp-stages li { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl-sm); color: var(--muted); }
.imp-st-ic { width: var(--ctl-sm); height: var(--ctl-sm); display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: var(--fs-sm); }
.imp-stages li.now { color: var(--text); font-weight: 700; }
.imp-stages li.now .imp-st-ic { background: var(--primary-soft); color: var(--primary); animation: imp-pulse 1s ease-in-out infinite; }
.imp-stages li.done { color: var(--text-2); }
.imp-stages li.done .imp-st-ic { background: var(--success-soft); color: var(--success); }
@keyframes imp-pulse { 50% { opacity: .5; } }
.imp-done { display: grid; justify-items: center; gap: var(--sp-4); text-align: center; padding-block: var(--sp-4); }
.imp-done .imp-stats { width: 100%; }
.imp-ok { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: var(--fs-xl); }
@media (prefers-reduced-motion: reduce) { .imp-fill { transition: none; } .imp-stages li.now .imp-st-ic { animation: none; } }
/* board overview: every list shown at once (zoomed out); each list carries a button that zooms back to it */
.list { position: relative; }
.lists.overview { overflow: hidden; gap: calc(var(--sp-4) * var(--z)); padding-inline: calc(var(--sp-6) * var(--z)); animation: ov-in var(--t-med) var(--ease); }
.lists.overview > * { zoom: var(--z); }
.ov-hit { position: absolute; inset: 0; z-index: 5; display: grid; align-content: start; justify-items: center; gap: calc(var(--sp-2) / var(--z)); padding: calc(var(--sp-5) / var(--z)) calc(var(--sp-3) / var(--z)); border: 0; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text); font: inherit; font-size: calc(var(--fs-base) / var(--z)); cursor: zoom-in; text-align: center; transition: background var(--t-fast); }
.ov-hit:hover, .ov-hit:focus-visible { background: color-mix(in srgb, var(--primary-soft) 80%, transparent); outline: none; box-shadow: inset 0 0 0 calc(2px / var(--z)) var(--primary); }
.ov-hit b { line-height: var(--lh-head); overflow-wrap: anywhere; }
.ov-hit span { color: var(--text-2); font-size: calc(var(--fs-sm) / var(--z)); }
.ov-hit i { color: var(--primary); font-size: calc(var(--fs-lg) / var(--z)); }
@keyframes ov-in { from { opacity: .4; } }
#zoomBtn.on, #expandAllBtn.on { background: rgb(255 255 255 / .4); }
#zoomBtn[hidden], #expandAllBtn[hidden] { display: none; } /* zoom: only while some lists are out of view; expand-all: only while every column is collapsed */
@media (max-width: 860px) { #zoomBtn { display: none; } }
@supports not (zoom: 1) { #zoomBtn { display: none; } }
@media (prefers-reduced-motion: reduce) { .lists.overview { animation: none; } }
/* overview overlay: fades from solid at the top (title and count readable) to see-through at the bottom (cards still visible) */
.ov-hit { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent) 0%, color-mix(in srgb, var(--surface) 88%, transparent) 30%, color-mix(in srgb, var(--surface) 30%, transparent) 70%, transparent 100%); }
.ov-hit:hover, .ov-hit:focus-visible { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 96%, transparent) 0%, color-mix(in srgb, var(--primary-soft) 85%, transparent) 30%, color-mix(in srgb, var(--primary-soft) 30%, transparent) 70%, transparent 100%); }
/* the list the overview zoomed back to: a focus outline that fades out */
.list.flash::after { content: ''; position: absolute; inset: calc(var(--sp-1) * -1); border: 3px solid var(--ring-c, #fff); border-radius: calc(var(--r-lg) + var(--sp-1)); box-shadow: 0 0 0 3px var(--ring-g, rgb(0 0 0 / .25)), 0 0 28px 6px var(--ring-g, rgb(255 255 255 / .5)); pointer-events: none; z-index: 6; animation: list-flash 2.4s var(--ease) forwards; }
/* the ring is the opposite of the board's background: white on dark colours and pictures, near-black on light colours */
.board-wrap { --ring-c: #fff; --ring-g: rgb(255 255 255 / .5); }
.board-wrap.tone-light { --ring-c: #111827; --ring-g: rgb(17 24 39 / .35); }
@keyframes list-flash { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .list.flash::after { animation: none; } }
/* board density (trial D): tighter lists and cards on desktop; weight follows the cover */
.kcard .ktitle { font-weight: 400; }
.kcard:has(> .kcover) .ktitle, .kcard.cover-full .ktitle { font-weight: 700; }
@media (min-width: 861px) {
  .lists { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .list, .add-list { width: 296px; }
  .list-head { padding: var(--sp-2) var(--sp-3) var(--sp-1); }
  .list-cards { gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1); }
  .list-foot { padding: var(--sp-1) var(--sp-2) var(--sp-2); }
  .kcard { padding: var(--sp-2) var(--sp-3); }
  .kcard .kret { margin-block: var(--sp-2) calc(var(--sp-2) * -1); }
  .kcard .ktop { margin-block-end: var(--sp-1); }
  .kcard .kfoot { margin-block-start: var(--sp-1); gap: var(--sp-2); }
  .kcover { height: 40px; margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) var(--sp-2); }
  .kcover:not(.img) { height: 10px; }
}
/* card dialog motion: enter (pop / sheet), content fade-in after loading, exit fade */
.cm-skel { display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-5); min-height: min(520px, 70dvh); }
.cm-fade { animation: fade var(--t-med) var(--ease); }
.modal-back.closing { pointer-events: none; animation: fade-out var(--t-fast) var(--ease) forwards; }
.modal-back.closing .modal { animation: pop-out var(--t-fast) var(--ease) forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 860px) { .modal.card-sheet { animation: sheet var(--t-med) var(--ease); } .modal-back.closing .modal.card-sheet { animation: sheet-out var(--t-fast) var(--ease) forwards; } @keyframes sheet-out { to { transform: translateY(100%); } } }
@media (prefers-reduced-motion: reduce) { .modal-back.closing { display: none; } }
/* activity graph (dashboard): one cell per day, Saturday-first weeks; colour = how many actions that day */
.heat-wrap { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); }
.heat-months, .heat { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); gap: var(--sp-1); }
.heat { grid-template-rows: repeat(7, auto); grid-auto-flow: column; }
.hc { display: block; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--surface-3); min-width: 0; }
.hc.none { background: none; }
.hc.l1 { background: color-mix(in srgb, var(--primary) 28%, var(--surface-3)); }
.hc.l2 { background: color-mix(in srgb, var(--primary) 50%, var(--surface-3)); }
.hc.l3 { background: color-mix(in srgb, var(--primary) 75%, var(--surface-3)); }
.hc.l4 { background: var(--primary); }
.heat .hc:not(.none):hover { outline: 2px solid var(--text-2); outline-offset: 1px; }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); }
.heat-legend .hc { width: var(--sp-3); }
.heat-legend span:first-child { margin-inline-end: var(--sp-1); } .heat-legend span:last-child { margin-inline-start: var(--sp-1); }
/* dashboard «بردهای من»: slim rows with a colour stripe */
.bw-row { gap: var(--sp-3); }
.bw-bar { width: var(--sp-2); align-self: stretch; border-radius: var(--r-full); flex: none; }
/* dashboard «اشاره‌ها و پاسخ‌ها» */
.mn-row { gap: var(--sp-3); align-items: flex-start; transition: opacity var(--t-fast), transform var(--t-fast); }
.mn-row.clickable { cursor: pointer; }
.mn-row.mn-out { opacity: 0; transform: translateX(calc(var(--sp-5) * -1)); }
.mn-ic { width: var(--ctl-sm); height: var(--ctl-sm); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-sm); }
.mn-ic.cm { background: var(--surface-3); color: var(--text-2); }
.mn-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-read { align-self: center; }
@media (prefers-reduced-motion: reduce) { .mn-row { transition: none; } }
/* notifications page: card items open the dialog; ✓ marks read */
.nl-item.clickable { cursor: pointer; }
.nl-item .nl-read { align-self: center; flex: none; }
/* comment replies: quote of the answered comment, reply chip above the composer */
.cmt-quote { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--ctl-sm); margin-block-end: var(--sp-2); padding: var(--sp-1) var(--sp-3); border: 0; border-inline-start: 3px solid var(--primary); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: var(--fs-sm); text-align: start; cursor: pointer; }
.cmt-quote:hover:not(:disabled) { background: var(--primary-soft); }
.cmt-quote i { color: var(--primary); flex: none; }
.cmt-quote b { flex: none; color: var(--text); }
.cmt-quote.gone { cursor: default; color: var(--muted); border-inline-start-color: var(--border-strong); }
.cmt-reply { color: var(--text-2); }
.reply-chip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); margin-block-end: var(--sp-2); border-radius: var(--r); background: var(--primary-soft); color: var(--text-2); font-size: var(--fs-sm); }
.reply-chip > i { color: var(--primary); flex: none; }
.reply-chip b { color: var(--text); }
/* board admins (owner, manager): a small shield at the corner of the picture */
.avatar.is-admin { position: relative; overflow: visible; }
.avatar.is-admin > img, .avatar.is-admin > svg { border-radius: 50%; }
.av-adm { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; display: grid; place-items: center; width: max(12px, calc(var(--size) * .4)); height: max(12px, calc(var(--size) * .4)); border-radius: 50%; border: 2px solid var(--surface); background: var(--brand-700); color: #fff; font-size: max(6px, calc(var(--size) * .2)); line-height: 1; box-sizing: border-box; }
.mn-ic.rp { background: var(--success-soft); color: var(--success); }
/* locked cards: a lock mark on the tile; others cannot open or move it */
.kcard .klock { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.kcard.locked-me { cursor: not-allowed; } /* only for people who cannot open it; the creator keeps the normal pointer */
.kcard.cover-full .klock { color: #fff; }
.pop-menu button:disabled { opacity: .5; cursor: not-allowed; }
.pop-menu .pop-hint { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--muted); }
/* roles page: collapsible help (system role vs board role) */
.help-panel { margin-block-end: var(--sp-5); }
.help-panel > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.help-panel > summary::-webkit-details-marker { display: none; }
.help-panel[open] > summary { border-bottom: 1px solid var(--border); }
.help-caret { color: var(--muted); font-size: var(--fs-xs); transition: transform var(--t-fast) var(--ease); }
.help-panel[open] .help-caret { transform: rotate(180deg); }
.help-body { display: grid; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.help-lead { margin: 0; line-height: var(--lh-body); }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.help-grid h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.help-grid dl { margin: 0 0 var(--sp-2); display: grid; gap: var(--sp-2); }
.help-grid dt { font-weight: 700; }
.help-grid dd { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body); padding-inline-start: var(--sp-3); border-inline-start: 2px solid var(--border); }
@media (max-width: 760px) { .help-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .help-caret { transition: none; } }
.uf-birth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); gap: var(--sp-2); max-width: 480px; }

/* comment attachments: picked files above the send button, thumbnails and file chips under a comment */
.cm-pick-files { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.cm-pick-files:empty { display: none; }
.pick-file { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding-inline: var(--sp-3) var(--sp-1); min-height: var(--ctl-sm); border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); }
.pick-file > i { color: var(--primary); }
.pick-file .ellipsis { max-width: 160px; }
.cm-composer-actions { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; }
.cmt-files { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.cmt-file { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.cmt-thumb { display: block; width: 96px; height: 96px; padding: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface-3); cursor: zoom-in; }
.cmt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt-chip { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 260px; min-height: var(--ctl-sm); padding-inline: var(--sp-3); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); }
.cmt-chip:hover { border-color: var(--primary); text-decoration: none; }
.cmt-chip > i { color: var(--primary); flex: none; }
.cmt-file-x { margin-inline-start: calc(var(--sp-1) * -1); }
.cmt-file.is-img .cmt-file-x { position: absolute; inset-block-start: var(--sp-1); inset-inline-end: var(--sp-1); background: rgb(0 0 0 / .55); color: #fff; width: var(--ctl-sm); }

/* roles page help: smaller */
.help-panel > summary.panel-h { padding: var(--sp-2) var(--sp-4); gap: var(--sp-3); }
.help-panel > summary .ic { width: var(--ctl-sm); height: var(--ctl-sm); }
.help-panel > summary h3 { font-size: var(--fs-sm); }
.help-panel > summary p { font-size: var(--fs-xs); }
.help-body { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.help-lead { font-size: var(--fs-sm); }
.help-grid { gap: var(--sp-5); }
.help-grid h4 { font-size: var(--fs-sm); }
.help-grid dt { font-size: var(--fs-sm); }
.help-grid dd { font-size: var(--fs-xs); }
/* roles help: smooth open/close (grid rows 0fr -> 1fr) instead of the native details jump */
.help-panel > .help-toggle { width: 100%; text-align: start; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; cursor: pointer; }
.help-panel > .help-toggle:focus-visible { box-shadow: inset var(--ring); outline: none; }
.help-wrap { display: grid; grid-template-rows: 0fr; border-top: 1px solid transparent; transition: grid-template-rows var(--t-med) var(--ease), border-color var(--t-med); }
.help-inner { overflow: hidden; min-height: 0; opacity: 0; transition: opacity var(--t-med) var(--ease); }
.help-panel.open .help-wrap { grid-template-rows: 1fr; border-top-color: var(--border); }
.help-panel.open .help-inner { opacity: 1; }
.help-panel.open .help-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .help-wrap, .help-inner { transition: none; } }

/* role cards: pop on hover, open a details popup on click */
.role-card { cursor: pointer; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-fast); }
.role-card:hover, .role-card:focus-visible { transform: translateY(calc(var(--sp-1) * -1)); box-shadow: var(--shadow); border-color: var(--primary); outline: none; }
.role-card:active { transform: translateY(0) scale(.99); }
@media (prefers-reduced-motion: reduce) { .role-card { transition: none; } .role-card:hover { transform: none; } }
.rp-sec { display: grid; gap: var(--sp-2); }
.rp-sec h4 { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.rp-users { display: grid; gap: var(--sp-1); max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r); }
.rp-user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); }
.rp-user:first-child { border-top: 0; }
.rp-perms { display: grid; gap: var(--sp-3); max-height: 240px; overflow-y: auto; }
.rp-perms .chip-set { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.rp-perms .chip-s { padding: 2px var(--sp-2); border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); }
.rp-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-block-start: var(--sp-2); border-top: 1px solid var(--border); }

/* quoted comment: a little tint so it reads as a quote */
.cmt-quote { background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); }
.cmt-quote:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 18%, var(--surface-2)); }
.cmt-quote.gone { background: var(--surface-2); }
/* birth date wheel (one field): three drums, day · month · year, read right to left */
.tw-date-btn { width: 100%; max-width: 320px; justify-content: flex-start; direction: rtl; }
.tw-date-btn .tw-val.ph { color: var(--muted); font-weight: 400; }
.tw-pop.tw-date { width: 320px; }
.tw-date .tw-cols { direction: rtl; gap: var(--sp-2); }
.tw-date .tw-lab { direction: rtl; padding-inline: var(--sp-4); }
.tw-date .tw-item { font-size: var(--fs-base); }
@media (max-width: 600px) { .tw-pop.tw-date.sheet { width: auto; } }
/* comment box: the paperclip sits beside «@» (always visible); picker dialog tiles */
.cm-input-wrap .textarea { padding-inline-end: calc(var(--sp-2) + 2 * var(--ctl-sm) + var(--sp-3)); }
.cm-input-wrap .attach-btn { position: absolute; inset-block-end: var(--sp-2); inset-inline-end: calc(var(--sp-2) + var(--ctl-sm) + var(--sp-1)); width: 32px; height: 32px; min-height: 0; padding: 0; color: var(--muted); transform: none !important; box-shadow: none !important; }
.cm-input-wrap .attach-btn:hover { color: var(--primary); background: var(--surface-2); }
/* the three icons (@, #, paperclip) sit on the box's own background, so text scrolling underneath never shows through them */
.cm-input-wrap .mention-btn, .cm-input-wrap .attach-btn { background: var(--surface); }
.cm-input-wrap .mention-btn:hover, .cm-input-wrap .attach-btn:hover { background: var(--surface-2); }
.att-sec { display: grid; gap: var(--sp-2); }
.att-sec h4 { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); max-height: 280px; overflow-y: auto; padding: 2px; }
.att-tile { position: relative; display: grid; gap: var(--sp-1); justify-items: stretch; padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); text-align: center; cursor: pointer; font: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
.att-tile:hover { border-color: var(--primary); }
.att-tile.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.att-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--surface-3); overflow: hidden; font-size: var(--fs-xl); color: var(--muted); }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-name { font-size: var(--fs-xs); }
.att-ck { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); color: var(--primary); background: var(--surface); border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity var(--t-fast), transform var(--t-fast); }
.att-tile.on .att-ck { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .att-ck { transition: none; } }
/* «@» in the comment box is always visible, like the paperclip */
.cm-input-wrap .mention-btn { opacity: 1; pointer-events: auto; }

/* comment box: the buttons sit under the text (bottom corner), so the text keeps normal side padding and starts at the edge */
.cm-input-wrap .textarea { padding-inline: var(--sp-3); padding-block-end: calc(var(--ctl-sm) + var(--sp-3)); }
.cm-composer .cm-input-wrap .textarea { height: 112px; min-height: 112px; }
/* an empty comment / description box: the caret and the placeholder sit on the right (RTL); once text is typed each line picks its own direction again */
.bidi-lines:placeholder-shown { unicode-bidi: normal; direction: rtl; text-align: start; }
/* description: saved text is a preview with an edit button */
.desc-h { display: flex; align-items: center; gap: var(--sp-2); }
.cm-sec .md-view { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
/* description box (editor and preview): same corners as inputs (--r, it was the smaller --r-sm) and a lighter, faintly tinted background */
.md-editor { border-radius: var(--r); background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.md-area, .md-raw { background: transparent; }
.cm-sec .md-view { border-radius: var(--r); background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.md-bar { border-start-start-radius: var(--r); border-start-end-radius: var(--r); }
.md-idle .md-bar, .md-idle .md-linkrow { display: none; }
.md-count { padding: var(--sp-1) var(--sp-4) var(--sp-2); font-size: var(--fs-xs); color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.md-count[hidden] { display: none; }
.md-count.full { color: var(--danger); }
/* empty and unfocused: just one line tall; the box grows to its normal height when it gets focus */
.md-area { transition: min-height 220ms var(--ease); }
.md-idle .md-area { min-height: var(--ctl); }
@media (prefers-reduced-motion: reduce) { .md-area { transition: none; } }
.md-editor:not(.md-idle) .md-bar { animation: md-bar-in var(--t-fast) var(--ease); }
@keyframes md-bar-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .md-editor:not(.md-idle) .md-bar { animation: none; } }
/* long saved description: text cut at --md-clamp-h with a fade, and a full-width «نمایش بیشتر» strip joined to the bottom edge */
.md-clampable { --md-bg: color-mix(in srgb, var(--primary) 3%, var(--surface)); position: relative; }
.md-clampable.is-long .md-view { border-block-end: 0; border-end-start-radius: 0; border-end-end-radius: 0; overflow: hidden; }
.md-clampable.md-anim .md-view { transition: max-block-size 260ms var(--ease); }
/* the fade is tall (about three lines) and eases in; it fades out when the text is opened */
.md-clampable::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: var(--ctl); block-size: calc(var(--sp-11) * 2); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--md-bg) 55%, transparent) 40%, color-mix(in srgb, var(--md-bg) 92%, transparent) 75%, var(--md-bg)); opacity: 0; transition: opacity 260ms var(--ease); pointer-events: none; }
.md-clampable.is-long:not(.is-open)::after { opacity: 1; }
.md-more { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); inline-size: 100%; min-block-size: var(--ctl); border: 0; border-block-start: 1px solid var(--border); background: var(--md-bg); color: var(--primary); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--t-fast); }
.md-more[hidden] { display: none; }
.md-more:hover { background: var(--primary-soft); }
.md-more:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.md-more i { font-size: var(--fs-xs); transition: transform var(--t-fast) var(--ease); }
.md-clampable.is-open .md-more i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .md-more, .md-more i, .md-clampable::after, .md-clampable.md-anim .md-view { transition: none; } }
/* drop overlay (files dragged over an open card dialog) */
.drop-ov { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; padding: var(--sp-6); background: color-mix(in srgb, var(--primary) 18%, var(--scrim)); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.drop-ov.on { opacity: 1; }
.drop-ov-card { display: grid; justify-items: center; gap: var(--sp-3); width: min(420px, 100%); padding: var(--sp-8) var(--sp-6); border: 3px dashed var(--primary); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; }
.drop-ov-card > i { font-size: 44px; color: var(--primary); animation: drop-bob 1.2s ease-in-out infinite; }
.drop-ov.busy .drop-ov-card { border-style: solid; }
.drop-ov.busy .drop-ov-card > i { animation: none; }
.drop-prog { width: 100%; }
@keyframes drop-bob { 50% { transform: translateY(calc(var(--sp-1) * -1)); } }
@media (prefers-reduced-motion: reduce) { .drop-ov { transition: none; } .drop-ov-card > i { animation: none; } }
/* upload dialog: files with an optional display name, then a progress bar per file */
.up-list { display: grid; gap: var(--sp-2); max-height: 360px; overflow-y: auto; }
.up-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.up-row.ok { border-color: var(--success); background: var(--success-soft); }
.up-row.bad { border-color: var(--danger); background: var(--danger-soft); }
.up-row.canceled { opacity: .7; border-style: dashed; }
.up-row .up-cancel { color: var(--danger); }
.up-ic { width: var(--ctl-sm); height: var(--ctl-sm); flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); }
.up-name { font-weight: 600; text-align: start; }
.up-title { margin-block-start: var(--sp-2); min-height: var(--ctl-sm); font-size: var(--fs-sm); }
.up-bar { margin-block-start: var(--sp-2); }
.up-st { margin-block-start: var(--sp-1); }
.up-row.bad .up-st { color: var(--danger); }
.up-more { padding: var(--sp-2); font-size: var(--fs-sm); }
/* card links: «#» button beside @ and the paperclip; the list popup; the chip shown for an ISH-code */
.cm-input-wrap .hash-btn { inset-inline-end: calc(var(--sp-2) + 2 * (var(--ctl-sm) + var(--sp-1))); }
.cm-input-wrap .attach-btn { inset-inline-end: calc(var(--sp-2) + var(--ctl-sm) + var(--sp-1)); }
.cardlink-pop { max-height: 320px; overflow-y: auto; }
.cl-item { gap: var(--sp-3); min-height: var(--ctl); }
.cl-ic { color: var(--primary); flex: none; }
.cl-t { display: block; font-weight: 600; }
.cl-s { display: block; line-height: var(--lh-ui); }
a.card-ref { display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; padding: 0 var(--sp-2); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text); font-size: .95em; font-weight: 600; vertical-align: baseline; text-decoration: none; border: 1px solid var(--border); }
a.card-ref:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
a.card-ref > i { color: var(--primary); font-size: .85em; }
a.card-ref .ref-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
a.card-ref .ref-k { color: var(--muted); font-size: .8em; font-weight: 500; direction: ltr; }
a.card-ref.done .ref-t { text-decoration: line-through; color: var(--text-2); }
a.card-ref.done > i { color: var(--success); }
a.card-ref.locked > i { color: var(--muted); }
a.card-ref.ref-missing { color: var(--muted); background: none; border-style: dashed; font-weight: 400; direction: ltr; cursor: help; }
.ext-list { display: grid; }
.ext-row .t b { display: inline-block; font-size: var(--fs-base); } /* shrink-wrapped, so the LTR «.pdf» sits on the start (right) edge instead of the left */

/* card-link dialog: one scroll area (the list), roomy rows */
.cp-dlg { display: grid; gap: var(--sp-3); width: min(440px, 100%); }
.cp-head { display: flex; align-items: center; gap: var(--sp-3); padding-inline: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); }
.cp-head:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.cp-head > i { color: var(--muted); }
.cp-head .input { border: 0; box-shadow: none !important; padding-inline: 0; background: transparent; }
.cp-list { display: grid; gap: var(--sp-1); max-height: min(50vh, 360px); overflow-y: auto; }
.cp-none { padding: var(--sp-4); text-align: center; }
.cardlink-pop { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
/* card-link list rows: the title shortens with «…» (it used to push the row wider than the dialog and hide the code) */
.cp-list { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.cl-item { width: 100%; padding: var(--sp-2) var(--sp-3); }
.cl-item > .grow { min-width: 0; }
.cl-t, .cl-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-s { margin-block-start: var(--sp-1); }
.cl-item > .ltr { flex: none; }
.cl-item > .cl-ic { width: var(--sp-5); text-align: center; }
/* card-link rows, tightened: same corners as the search field, normal UI line height, a clear edge on the highlighted row */
.cl-item { border-radius: var(--r); }
.cl-t { line-height: var(--lh-ui); }
.cl-s { margin-block-start: 0; line-height: var(--lh-ui); }
.cl-item.on, .cl-item:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
/* card-link rows: taller (the 12px / 16px spacing steps) */
.cl-item { padding-block: var(--sp-3); }
.cl-s { margin-block-start: var(--sp-1); }

/* the card-link list: rows keep their full height. With many cards the capped list squashed every row to the 44px min-height (grid tracks were allowed to shrink) */
.cp-list { grid-auto-rows: max-content; align-content: start; }
.cl-item { min-height: 0; }
.cl-all { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); flex: none; }

/* checklist: a vertical guide line runs from the title's icon down beside the items (and the progress bar) */
.checklist { margin-block-end: var(--sp-5); }
.checklist .chk-body { margin-inline-start: var(--sp-2); padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--border-strong); border-end-start-radius: var(--r-sm); }
.checklist .chk-body > :last-child { margin-block-end: 0; }
.chk-hint { display: inline-block; margin-block: var(--sp-1); padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.checklist .btn.on { background: var(--primary-soft); color: var(--primary); }
/* ---- card attachments: one list for files and links (grip to reorder, ⋯ menu) ---- */
.at-box { position: relative; }
.at-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); position: relative; }
.at-row { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2); border-radius: var(--r); background: var(--surface); border: 1px solid transparent; transition: background var(--t-fast), box-shadow var(--t-fast); }
.at-row:hover { background: var(--surface-2); }
.at-grip { flex: none; width: var(--sp-8); min-height: var(--ctl); display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: var(--r-sm); cursor: grab; touch-action: none; opacity: .55; transition: opacity var(--t-fast); }
.at-grip.off { cursor: default; opacity: 0; width: var(--sp-2); }
.at-row:hover .at-grip, .at-grip:focus-visible, .at-row.held .at-grip { opacity: 1; }
.at-grip.off, .at-row:hover .at-grip.off { opacity: 0; }
@media (hover: none) { .at-grip:not(.off) { opacity: 1; } }
.at-grip:focus-visible, .at-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.at-th { flex: none; width: 64px; height: 48px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; background: var(--surface-3); font: inherit; font-weight: 500; font-size: var(--fs-xs); color: var(--muted); cursor: pointer; text-decoration: none; }
.at-th:hover { outline: 2px solid var(--primary); }
.at-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-info { flex: 1; min-width: 0; display: grid; }
.at-info b { font-weight: 500; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-info > span { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; max-inline-size: 100%; } /* only as wide as the text, so its tooltip points at the text and not the row's middle */
.at-act:hover, .at-th:hover, .at-menu a:hover { text-decoration: none; }
.at-info .u-line { display: flex; gap: var(--sp-1); min-width: 0; }
.at-info .u { direction: ltr; text-align: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.at-info .d { flex: none; }
.at-cover { color: var(--warn); margin-inline-start: var(--sp-1); }
.at-act { flex: none; width: var(--ctl); min-height: var(--ctl); display: grid; place-items: center; border: 1px solid transparent; background: none; color: var(--muted); border-radius: var(--r); cursor: pointer; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.at-act:hover, .at-act[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
.at-menu { position: absolute; z-index: 5; inset-inline-end: var(--sp-2); inset-block-start: calc(100% - var(--sp-1)); min-width: 208px; padding: var(--sp-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg, var(--shadow)); animation: at-pop var(--t-fast) var(--ease); }
.at-menu button, .at-menu a { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--ctl); padding-inline: var(--sp-3); border: 0; background: none; border-radius: var(--r-sm); color: var(--text); text-align: start; text-decoration: none; cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.at-menu button:hover, .at-menu button:focus-visible, .at-menu a:hover, .at-menu a:focus-visible { background: var(--surface-2); outline: 0; }
.at-menu i { width: var(--sp-4); color: var(--muted); text-align: center; }
.at-menu .danger, .at-menu .danger i { color: var(--danger); }
.at-meta { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) var(--sp-3) var(--sp-3); margin-block-end: var(--sp-1); border-block-end: 1px solid var(--border); font-size: var(--fs-xs); line-height: 1.7; color: var(--muted); }
.at-meta > i { margin-block-start: 3px; }
.at-meta b { display: block; font-weight: 500; font-size: var(--fs-sm); color: var(--text); }
@keyframes at-pop { from { opacity: 0; transform: translateY(-4px); } }
.at-row.drag { z-index: 60; background: var(--surface); border-color: var(--primary); box-shadow: var(--shadow-lg, var(--shadow)); cursor: grabbing; transition: none; }
.at-row.held { background: var(--surface-2); border-color: var(--primary); }
.at-gap { height: 0; }
body.dragging { user-select: none; cursor: grabbing; }
.at-more { margin-block-start: var(--sp-3); }
.at-live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) { .at-row, .at-menu { transition: none; animation: none; } }
.at-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-2); }
.at-head > h4 { margin: 0; }
.at-click { cursor: pointer; }
.at-click .at-th { cursor: inherit; }
.at-th:hover { outline: 0; }
.at-info:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }
.add-att { gap: var(--sp-4); }
.att-or { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.att-or::before, .att-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.at-more { color: var(--muted); font-weight: 500; font-size: var(--fs-sm); gap: var(--sp-2); margin-inline: auto; }
.at-more[hidden] { display: none; }
.at-more i { font-size: var(--fs-xs); }
.at-more:hover { color: var(--text); }

.at-grip:not(.off):hover { background: var(--surface-3); color: var(--text); }
.at-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.at-link { gap: var(--sp-2); flex-wrap: nowrap; }
.at-link .input { flex: 1; min-width: 0; }

.at-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; }
@media (max-width: 560px) { .at-link { grid-template-columns: minmax(0, 1fr); } }

.at-link { display: flex; flex-wrap: nowrap; gap: var(--sp-2); align-items: center; }
.at-link .input { min-width: 0; flex: 1 1 0; }
.at-link .input.ltr { flex-grow: 1.4; }
.at-link .btn { flex: none; }
@media (max-width: 560px) { .at-link { display: flex; } }

.at-link, .at-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.at-link .input, .at-link .input.ltr { width: 100%; flex: none; }
.at-link .btn { justify-self: start; }

/* link field: the Persian hint reads from the right; a typed address is Latin, so it reads from the left */
.at-url:placeholder-shown { direction: rtl; text-align: start; }
.at-url:not(:placeholder-shown) { direction: ltr; text-align: start; }

/* bell dropdown: every message is its own card, the tools row stays on one line, the footer link is grey */
.notif-panel .notif-list { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-3); background: var(--surface-2); }
.dd-menu .notif-item { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); padding: var(--sp-3) 42px var(--sp-3) var(--sp-3); }
.dd-menu .notif-item.unread { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.dd-menu .notif-item:hover { border-color: var(--primary); }
.dd-menu .notif-item .ni-dot { inset-inline-end: var(--sp-3); inset-block-start: var(--sp-3); }
.notif-item .ni-title .t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: clip; } /* long titles wrap onto a second line instead of being cut in the middle */
.notif-tools label { flex: none; white-space: nowrap; }
.dd-menu .notif-tools button { flex: none; width: auto; min-block-size: var(--ctl-sm); padding-inline: var(--sp-2); }
.dd-menu .notif-all { color: var(--muted); }
.dd-menu .notif-all i { color: var(--muted); }
.dd-menu .notif-all:hover { color: var(--text); }

/* bell message cards, final look (design B): type icon on the right, coloured edge when unread, the read circle at the far end.
   The time is only as wide as its text, so its date tooltip points at the time and not at the middle of the card. */
.dd-menu .notif-item { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border-inline-start: 4px solid var(--border); }
.dd-menu .notif-item.unread { background: var(--surface); border-color: var(--border); border-inline-start-color: var(--c, var(--primary)); }
.dd-menu .notif-item:not(.unread) { opacity: .78; }
.dd-menu .notif-item:not(.unread) .ni-title { font-weight: 500; }
.dd-menu .notif-item:hover { opacity: 1; background: var(--surface); box-shadow: var(--shadow); }
.notif-item .ni-ty { flex: none; inline-size: 34px; block-size: 34px; border-radius: var(--r); display: inline-grid; place-items: center; background: color-mix(in srgb, var(--c, var(--primary)) 14%, transparent); color: var(--c, var(--primary)); font-size: var(--fs-sm); }
.notif-item .ni-tx { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: stretch; }
.dd-menu .notif-item .ni-time { display: inline-flex; align-items: center; gap: var(--sp-1); inline-size: fit-content; width: fit-content; justify-self: start; align-self: start; }
.dd-menu .notif-item .ni-dot { position: relative; inset: auto; flex: none; margin-block-start: 4px; border-color: var(--c, var(--primary)); background: var(--c, var(--primary)); }
.dd-menu .notif-item .ni-dot:hover, .dd-menu .notif-item .ni-dot:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--primary)) 25%, transparent); }
.dd-menu .notif-item:not(.unread) .ni-dot { background: transparent; border-color: var(--border-strong); }
.dd-menu .notif-item:not(.unread) .ni-dot:hover, .dd-menu .notif-item:not(.unread) .ni-dot:focus-visible { border-color: var(--c, var(--primary)); }
.notif-tools button[hidden] { display: none; }

/* /boards: dragging a tile and its landing spot, and the right-click menu */
.board-tile.dragging { position: fixed; z-index: 450; margin: 0; pointer-events: none; box-shadow: var(--shadow-lg); transform: rotate(1.5deg) scale(1.02); transition: none; animation: none; opacity: .96; }
.board-gap { min-block-size: 144px; border: 2px dashed var(--primary); border-radius: var(--r-lg); background: var(--primary-soft); }
body.dragging-boards { user-select: none; cursor: grabbing; }
body.dragging-boards .board-tile { cursor: grabbing; }
a.board-tile[data-id] { touch-action: pan-y; -webkit-user-drag: none; user-select: none; }
.ctx-menu { min-inline-size: 220px; }
.ctx-menu button i { inline-size: var(--sp-4); color: var(--muted); text-align: center; }
.ctx-menu button.danger, .ctx-menu button.danger i { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .board-tile.dragging { transform: none; } }

/* board bar (design B3, trimmed): identity on the right, search + one joined tool group + «منو ▾» on the left; one icon family (solid) */
.board-bar { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); min-block-size: 52px; }
.board-bar h2 { font-size: var(--fs-base); max-width: 38vw; }
.board-bar .filter { min-height: 36px; height: 36px; border-radius: var(--r-full); padding-inline: var(--sp-4); width: 220px; }
.board-bar .btn-group { display: inline-flex; gap: 1px; border-radius: var(--r); overflow: hidden; }
.board-bar .btn-group .btn { border-radius: 0; }
.board-bar #starBtn i { color: rgb(255 255 255 / .72); transition: color var(--t-fast); }
.board-bar #starBtn.on i { color: var(--star); }
.board-bar #boardMenuBtn .caret { font-size: var(--fs-xs); opacity: .8; }
.closed-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: 28px; padding-inline: var(--sp-3); border-radius: var(--r-full); background: rgb(255 255 255 / .22); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.closed-chip[hidden], .closed-bar[hidden] { display: none; }
.closed-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: color-mix(in srgb, var(--surface) 94%, transparent); border-block: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.closed-bar > i { color: var(--warn); }
@media (max-width: 860px) {
  .board-bar { padding: var(--sp-2) var(--sp-3); }
  .board-bar h2 { max-width: none; flex: 1; }
  .board-bar #selectBtn { display: none; }                 /* phones: «انتخاب چند کارت» lives in the «منو» dropdown */
  .board-bar.search-open .filter { display: block; order: 20; flex: 1 1 100%; width: 100%; }
  .board-bar .btn-group { border-radius: var(--r); }
  .closed-bar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .board-bar #starBtn i { transition: none; } }
/* status chips (closed / deadline passed) are ordinary meta chips in the bottom row, so the title never moves; chips sit close together */
.board-tile .meta { gap: var(--sp-2); }

/* phones: a lighter top bar (theme moves into the user menu as three small buttons); icons in the bars are all solid */
.menu-theme { align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.menu-theme .seg-mini { display: inline-flex; padding: 3px; border-radius: var(--r); background: var(--surface-2); gap: 2px; }
.dd-menu .menu-theme .seg-mini button { inline-size: 40px; width: 40px; min-block-size: 36px; padding: 0; justify-content: center; border-radius: var(--r-sm); color: var(--text-2); }
.dd-menu .menu-theme .seg-mini button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
@media (max-width: 860px) { #themeDd { display: none; } .menu-theme { display: flex !important; } }
.board-bar #starBtn, .board-bar #starBtn:hover { background: none; box-shadow: none; }
.board-bar #starBtn.on, .board-bar #starBtn.on:hover { background: none !important; } /* a starred board: the gold star alone, without the «.btn.on» highlight behind it */
.board-bar #starBtn:hover i { color: #fff; }
.board-bar #starBtn.on:hover i { color: var(--star); }

/* comment reactions (layout B): chips under the text + emoji picker */
.cmt-rx { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-block-start: var(--sp-2); }
.cmt-rx[hidden] { display: none; }
.rx-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: 32px; padding-inline: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2, var(--text)); font: inherit; font-size: var(--fs-sm); line-height: 1; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.rx-chip:hover:not(:disabled) { border-color: var(--primary); }
.rx-chip:disabled { cursor: default; }
.rx-chip.mine { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.rx-chip .rx-e { font-size: var(--fs-lg); line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.rx-chip .rx-n { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-xs); }
.emoji-picker { position: fixed; z-index: 3000; inline-size: 340px; max-inline-size: calc(100vw - 16px); max-block-size: min(420px, calc(100dvh - 16px)); display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: ep-in var(--t-fast) var(--ease); }
@keyframes ep-in { from { opacity: 0; transform: translateY(4px); } }
.emoji-picker .ep-head { padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-2); border-block-end: 1px solid var(--border); }
.emoji-picker .ep-head input { inline-size: 100%; min-block-size: 32px; padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm); }
@media (max-width: 860px) { .emoji-picker .ep-head input { font-size: 16px; } }
.emoji-picker .ep-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.emoji-picker .ep-tabs button { block-size: 36px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.emoji-picker .ep-tabs button.on { background: var(--primary-soft); color: var(--primary); }
.emoji-picker .ep-body { overflow-y: auto; overflow-x: hidden; padding: var(--sp-2) var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-3); align-content: start; flex: 1; min-block-size: 160px; }
.emoji-picker h6 { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.emoji-picker .ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-picker .ep-grid button { block-size: 36px; min-inline-size: 0; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font-size: var(--fs-xl); line-height: 1; display: grid; place-items: center; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.emoji-picker .ep-grid button:hover, .emoji-picker .ep-grid button:focus-visible { background: var(--surface-2); transform: scale(1.12); outline: none; }
.emoji-picker .ep-empty { padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.emoji-picker .ep-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-block-start: 1px solid var(--border); min-block-size: 44px; }
.emoji-picker .ep-more { inline-size: 36px; block-size: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.emoji-picker .ep-more:hover, .emoji-picker .ep-more.on { background: var(--surface-2); color: var(--primary); }
.emoji-picker .ep-hint { font-size: var(--fs-xs); color: var(--muted); }
.emoji-picker .ep-tones { display: flex; gap: var(--sp-2); }
.emoji-picker .ep-tones button { inline-size: 28px; block-size: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.emoji-picker .ep-tones button.on { border-color: var(--primary); }
@media (max-width: 860px) {
  .emoji-picker { inset-inline: 0; inset-block-end: 0; inline-size: auto; max-inline-size: none; max-block-size: 62dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; animation-name: ep-up; }
  .rx-chip { min-block-size: 36px; }
}
@keyframes ep-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .emoji-picker { animation: none; } .emoji-picker .ep-grid button, .rx-chip { transition: none; } }

/* collapsed column: a narrow strip with the title rotated 90° */
.list.collapsed { inline-size: var(--sp-11); min-inline-size: var(--sp-11); align-self: stretch; max-block-size: 100%; }
.list-strip { inline-size: 100%; flex: 1; min-block-size: 160px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-1); border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; border-radius: var(--r-lg); }
.list-strip:hover { background: var(--surface-3); }
.list-strip .count { font-size: var(--fs-xs); background: var(--surface); color: var(--text-2); border-radius: var(--r-full); padding-inline: var(--sp-2); min-inline-size: 24px; text-align: center; border: 1px solid var(--border); }
.list-strip > i { font-size: var(--fs-xs); color: var(--muted); }
.list-strip .strip-title { writing-mode: vertical-rl; font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-head); max-block-size: 60vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-head .list-collapse { color: var(--muted); }

/* list colours: a soft tint of the column plus a coloured top edge; the swatches use the same variable */
[data-color="blue"] { --lc: #3b6fe0; } [data-color="green"] { --lc: #2f9e62; } [data-color="yellow"] { --lc: #d4a60f; } [data-color="orange"] { --lc: #e0792b; } [data-color="red"] { --lc: #d64550; }
[data-color="purple"] { --lc: #8355d6; } [data-color="pink"] { --lc: #d6559a; } [data-color="teal"] { --lc: #1c9aa6; } [data-color="gray"] { --lc: #6b7690; }
.list[data-color] { background: color-mix(in srgb, var(--lc) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--lc) 35%, var(--border)); border-block-start: 4px solid var(--lc); }
.list[data-color] .list-head .count, .list[data-color] .list-strip .count { background: color-mix(in srgb, var(--lc) 14%, var(--surface)); }
.list[data-color].over { background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); }
.lc-pop { padding: var(--sp-2) var(--sp-3) var(--sp-3); inline-size: 296px; max-inline-size: 100%; }
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-1) var(--sp-2); }
.lc-name { font-size: var(--fs-sm); color: var(--text-2); }
.lc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-1); }
.lc-sw { block-size: var(--sp-11); border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); display: grid; place-items: center; padding: 0; }
.lc-dot { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: var(--r-sm); background: var(--lc, var(--surface-3)); display: grid; place-items: center; color: #fff; font-size: var(--fs-sm); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); transition: transform var(--t-fast) var(--ease); }
.lc-sw:not([data-color]) .lc-dot { color: var(--muted); border: 1px dashed var(--border-strong); box-shadow: none; }
.lc-sw:hover .lc-dot, .lc-sw:focus-visible .lc-dot { transform: scale(1.1); }
.lc-sw:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.lc-sw.on .lc-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--lc, var(--primary)); }
.lc-note { margin-block-start: var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-ui); }
@media (prefers-reduced-motion: reduce) { .lc-dot { transition: none; } }
[data-color="sky"] { --lc: #2a9fd8; } [data-color="lime"] { --lc: #7fb12a; } [data-color="magenta"] { --lc: #c2358f; } [data-color="indigo"] { --lc: #4a4fc4; } [data-color="brown"] { --lc: #8b6143; } [data-color="slate"] { --lc: #475569; }

.done-note .link-btn { border: 0; background: none; padding: 0; min-block-size: var(--sp-8); color: var(--primary); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.done-note .link-btn:hover { text-decoration: underline; }

/* colour popup never scrolls sideways; done-column note: thin rule above, link right under the sentence */
.lc-pop { box-sizing: border-box; inline-size: min(296px, calc(100vw - 32px)); overflow: hidden; }
.lc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lc-note { overflow-wrap: anywhere; }
.list-foot .done-note { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: start; border-block-start: 1px solid var(--border); padding-block-start: var(--sp-2); }
.list-foot .done-note .link-btn { text-align: start; min-block-size: var(--sp-8); padding: 0; margin-block-start: calc(var(--sp-1) * -1); }

.bulk-count { margin-block-start: var(--sp-2); color: var(--text-2); }
.bulk-count.over { color: var(--danger); }

/* bulk card dialogs */
.imp { display: grid; gap: var(--sp-4); }
.imp-zone { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.imp-zone[hidden], .imp-file[hidden] { display: none; }
.imp-zone:hover, .imp-zone:focus-visible, .imp-zone.drag { border-color: var(--primary); background: var(--primary-soft); outline: none; }
.imp-zone > i { font-size: var(--fs-2xl); color: var(--primary); }
.imp-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.imp-fmts { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; margin-block-start: var(--sp-1); }
.imp-fmt { font-size: var(--fs-xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.imp-file { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.imp-file > i { font-size: var(--fs-xl); color: var(--success); }
.imp-file.bad { border-color: var(--danger); }
.imp-file.bad > i { color: var(--danger); }
.imp-meta { flex: 1; min-width: 0; display: grid; }
.imp-err { color: var(--danger); }
.imp-head { min-block-size: var(--sp-11); align-items: center; }
.imp-facts { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); border-radius: var(--r); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-ui); }
.imp-facts li { display: flex; align-items: center; gap: var(--sp-2); }
.imp-facts i { inline-size: var(--sp-4); text-align: center; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .imp-zone { transition: none; } }

/* automation tab: «ارائه‌شده توسط روبوروح» chip, smooth tab content, run log */
.bm-sec-title:has(.robot-chip) { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.robot-chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--sp-8); padding-inline: var(--sp-3) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-xs); font-weight: 400; line-height: var(--lh-ui); cursor: pointer; transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease); }
.robot-chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.robot-chip > i, .robot-chip .avatar { inline-size: var(--sp-5); block-size: var(--sp-5); font-size: var(--fs-sm); display: grid; place-items: center; color: var(--primary); flex: none; }
.robot-chip .avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 50%; }
.auto-content { will-change: height; }
.auto-log > i { flex: none; inline-size: var(--sp-5); block-size: calc(1em * var(--lh-ui)); display: grid; place-items: center; }
.auto-log { line-height: var(--lh-ui); align-items: flex-start; }
.auto-log .auto-log-msg { overflow-wrap: anywhere; }
.auto-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block-start: var(--sp-3); }
@media (prefers-reduced-motion: reduce) { .robot-chip { transition: none; } }

/* report pages share the width of /my-tasks; «show more» rows */
.report-page { max-width: 1120px; margin-inline: auto; }
.more-row { display: flex; justify-content: center; padding: var(--sp-3); }
.more-row .more-btn { min-block-size: var(--sp-11); }
[data-more] > [hidden] { display: none; }

#reports { scroll-margin-block-start: calc(var(--sp-11) + var(--sp-6)); }

/* ---- background picker (new board, board menu → پس‌زمینه) ---- */
.bgp { display: grid; gap: var(--sp-3); }
.bgp-weekly { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; min-block-size: var(--sp-11); position: relative; transition: border-color var(--t-fast), background var(--t-fast); }
.bgp-weekly:hover { border-color: var(--primary); }
.bgp-weekly.on { border-color: var(--primary); background: var(--primary-soft); }
.bgp-wk-sw { inline-size: var(--sp-10); block-size: var(--sp-8); border-radius: var(--r-sm); flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.bgp-wk-tx { display: grid; line-height: var(--lh-ui); flex: 1; min-width: 0; }
.bgp-ck { display: none; color: #fff; font-size: var(--fs-sm); }
.bgp-weekly .bgp-ck { color: var(--primary); }
.bgp-weekly.on .bgp-ck { display: block; }
.bgp-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 3px; border-radius: var(--r); background: var(--surface-2); }
.bgp-tabs button { flex: 1 1 auto; min-block-size: 36px; padding-inline: var(--sp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.bgp-tabs button.on { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: var(--shadow-sm); }
.bgp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: var(--sp-2); }
.bgp-sw { block-size: 40px; border: 2px solid transparent; border-radius: var(--r-sm); cursor: pointer; padding: 0; position: relative; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); transition: transform var(--t-fast) var(--ease); }
.bgp-sw:hover { transform: scale(1.06); }
.bgp-sw.on { outline: 2px solid var(--primary); outline-offset: 2px; }
.bgp-sw.on .bgp-ck, .bgp-pic.on .bgp-ck { display: block; }
.bgp-sw .bgp-ck { text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.bgp-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.bgp-pic { position: relative; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; background: var(--surface-3); aspect-ratio: 16 / 10; display: block; }
.bgp-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.bgp-pic-n { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .65)); text-align: start; }
.bgp-pic.on { outline: 3px solid var(--primary); outline-offset: 2px; }
.bgp-pic .bgp-ck { position: absolute; inset-block-start: var(--sp-1); inset-inline-end: var(--sp-1); inline-size: var(--sp-5); block-size: var(--sp-5); border-radius: 50%; background: var(--primary); place-items: center; font-size: var(--fs-xs); }
.bgp-pic.on .bgp-ck { display: grid; }
.bgp-empty { padding: var(--sp-4); text-align: center; }
@media (prefers-reduced-motion: reduce) { .bgp-sw, .bgp-weekly { transition: none; } }

/* ---- label colour popover ---- */
.color-btn { inline-size: var(--sp-11); block-size: var(--sp-11); border: 0; border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.color-btn i { font-size: var(--fs-xs); opacity: .85; }
.color-btn:hover { filter: brightness(1.06); }
.color-pop { position: fixed; z-index: 3000; inline-size: 280px; max-inline-size: calc(100vw - 16px); max-block-size: calc(100dvh - 16px); overflow-y: auto; padding: var(--sp-3); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: grid; gap: var(--sp-3); animation: ep-in var(--t-fast) var(--ease); }
.cp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.cp-sw { block-size: var(--sp-11); border: 0; border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.cp-sw:hover { transform: scale(1.06); }
.cp-sw.on { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp-custom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); padding-block-start: var(--sp-2); border-block-start: 1px solid var(--border); font-size: var(--fs-sm); cursor: pointer; }
.cp-custom .muted { grid-column: 2 / 3; grid-row: 2; }
.cp-custom .color-in { grid-column: 3; grid-row: 1 / 3; inline-size: var(--sp-11); block-size: var(--sp-8); border: 0; padding: 0; background: none; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .color-pop { animation: none; } }

/* ---- light backgrounds: the board bar switches to dark text on a white glass ---- */
.board-wrap.tone-light .board-bar { color: #1f2937; background: rgb(255 255 255 / .6); }
.board-wrap.tone-light .board-bar h2 { color: #1f2937; text-shadow: none; }
.board-wrap.tone-light .board-bar .btn { background: rgb(0 0 0 / .07); color: #1f2937; }
.board-wrap.tone-light .board-bar .btn:hover { background: rgb(0 0 0 / .13); }
.board-wrap.tone-light .board-bar .filter { background: rgb(0 0 0 / .07); color: #1f2937; }
.board-wrap.tone-light .board-bar .filter::placeholder { color: rgb(31 41 55 / .65); }
.board-wrap.tone-light .board-bar #starBtn i { color: rgb(31 41 55 / .55); }
.board-wrap.tone-light .board-bar #starBtn.on i { color: var(--star); }
.board-wrap.tone-light .closed-chip { background: rgb(0 0 0 / .1); color: #1f2937; }
.board-wrap.tone-light .col-tabs button { color: #1f2937; }

/* ---- admin: wallpaper library ---- */
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.wp-card { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); align-content: start; transition: opacity var(--t-fast); }
.wp-card.busy { opacity: .5; pointer-events: none; }
.wp-img { aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); }
.wp-img img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.wp-acts { gap: var(--sp-1); }
.wp-note { padding: 0 var(--sp-5) var(--sp-4); display: flex; gap: var(--sp-2); align-items: flex-start; line-height: var(--lh-ui); }

/* ---- new board: template cards + background chooser ---- */
.nb-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.nb-tpl { position: relative; display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; min-block-size: var(--sp-11); transition: border-color var(--t-fast), background var(--t-fast); }
.nb-tpl:hover { border-color: var(--primary); }
.nb-tpl.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.nb-tpl-ic { inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; flex: none; font-size: var(--fs-lg); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.nb-tpl-tx { display: grid; gap: 2px; min-width: 0; line-height: var(--lh-ui); }
.nb-tpl-tx b { font-size: var(--fs-base); }
.nb-tpl-meta { font-size: var(--fs-xs); color: var(--muted); }
.nb-tpl-ck { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); font-size: var(--fs-xs); color: var(--primary); opacity: 0; }
.nb-tpl.on .nb-tpl-ck { opacity: 1; }
.nb-bg { display: flex; align-items: center; gap: var(--sp-3); inline-size: 100%; min-block-size: var(--sp-11); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: start; }
.nb-bg-sw { inline-size: var(--sp-10); block-size: var(--sp-6); border-radius: var(--r-sm); background-size: cover; background-position: center; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.nb-bg[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.nb-bg .fa-chevron-down { transition: transform var(--t-fast) var(--ease); color: var(--muted); }
.nb-bg-pick { margin-block-start: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); max-block-size: 320px; overflow-y: auto; }
.nb-bg-pick[hidden] { display: none; }
@media (max-width: 520px) { .nb-tpls { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .nb-bg .fa-chevron-down, .nb-tpl { transition: none; } }

/* ---- admin: board templates editor ---- */
.tpl-ed { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); align-items: start; }
.tpl-side { display: grid; gap: var(--sp-2); align-content: start; position: sticky; inset-block-start: var(--sp-4); }
.tpl-item { display: grid; gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.tpl-item.on { border-color: var(--primary); background: var(--primary-soft); }
.tpl-pick { display: flex; align-items: center; gap: var(--sp-3); border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; min-block-size: var(--sp-11); padding: 0; min-width: 0; }
.tpl-pick-tx { display: grid; min-width: 0; line-height: var(--lh-ui); }
.tpl-acts { display: flex; gap: 2px; justify-content: flex-end; }
.tpl-add { justify-self: start; }
.tpl-main { display: grid; gap: var(--sp-5); min-width: 0; }
.tpl-sec { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.tpl-sec h4 { margin: 0; font-size: var(--fs-base); }
.tpl-sec > p { margin: 0; line-height: var(--lh-ui); }
.tpl-head { display: flex; gap: var(--sp-3); align-items: flex-end; }
.tpl-icbtn { border: 0; cursor: pointer; flex: none; inline-size: var(--sp-11); block-size: var(--sp-11); }
.tpl-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.tpl-icons[hidden] { display: none; }
.tpl-ic { block-size: var(--sp-11); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-lg); }
.tpl-ic:hover { background: var(--surface-3); }
.tpl-ic.on { background: var(--primary-soft); color: var(--primary); }
.tpl-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tpl-card { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.tpl-cards { display: grid; gap: var(--sp-2); }
.tpl-card-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.tpl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tpl-chip { min-block-size: 32px; padding-inline: var(--sp-3); border: 1px dashed var(--c, var(--border-strong)); border-radius: var(--r-full); background: none; color: var(--text-2); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.tpl-chip.on { border-style: solid; border-color: transparent; font-weight: 700; }
@media (max-width: 860px) { .tpl-ed { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3); } .tpl-side { position: static; } .tpl-card-opts { grid-template-columns: minmax(0, 1fr); } }
.bgp-tabs button { flex: 1 1 0; min-inline-size: 0; padding-inline: var(--sp-2); }
.bgp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bgp-tabs button { flex: none; }
@media (max-width: 520px) { .nb-bg-pick { max-block-size: none; overflow: visible; } }
.cp-custom .color-in { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: var(--r-sm); } .cp-custom .muted { line-height: var(--lh-ui); }
@media (max-width: 860px) { .tpl-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-item:not(.on) .tpl-acts, .tpl-pick-tx .muted { display: none; } .tpl-add { grid-column: 1 / -1; } }

/* ---- background picker v2: category list (with a small fan of previews) beside the swatches; stacks on narrow containers ---- */
.bgp { container-type: inline-size; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.bgp-main { display: grid; gap: var(--sp-3); min-width: 0; align-content: start; }
.bgp-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); align-content: start; }
.bgp-cat { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-block-size: var(--sp-11); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.bgp-cat:hover { border-color: var(--primary); }
.bgp-cat.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.bgp-fan { display: inline-flex; flex: none; padding-inline-start: var(--sp-3); }
.bgp-fan-i { inline-size: var(--sp-6); block-size: var(--sp-6); border-radius: 50%; border: 2px solid var(--surface); margin-inline-start: calc(var(--sp-3) * -1); background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.bgp-cat.on .bgp-fan-i { border-color: var(--primary-soft); }
.bgp-cat-t { display: grid; line-height: var(--lh-ui); min-width: 0; flex: 1; }
.bgp-cat-t b { font-size: var(--fs-sm); }
.bgp-cat-ic { display: none; color: var(--muted); font-size: var(--fs-sm); }
.bgp-has { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); font-size: 8px; color: var(--primary); opacity: 0; }
.bgp-cat.has .bgp-has { opacity: 1; }
.bgp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-3) var(--sp-2); }
.bgp-tile { display: grid; gap: var(--sp-1); padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.bgp-tile .bgp-sw { block-size: 56px; inline-size: 100%; border-radius: var(--r-sm); }
.bgp-tn { font-size: var(--fs-xs); color: var(--text-2); }
.bgp-tile:hover .bgp-sw { transform: scale(1.04); }
.bgp-tile.on .bgp-sw { outline: 2px solid var(--primary); outline-offset: 2px; }
.bgp-tile.on .bgp-ck { display: block; }
.bgp-tile.on .bgp-tn { color: var(--primary); font-weight: 700; }
@container (min-width: 560px) {
  .bgp { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-4); }
  .bgp-cats { grid-template-columns: minmax(0, 1fr); }
  .bgp-cat-ic { display: block; }
}

/* new board dialog: the larger (w23) modal, three template cards per row, picker without an inner scroll, buttons stay in view */
@media (min-width: 900px) { .nb-form .nb-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-form .nb-bg-pick { max-block-size: none; overflow: visible; }
.modal.w23 .nb-form .modal-foot { position: sticky; inset-block-end: 0; background: var(--surface); padding-block: var(--sp-3) !important; margin-block-end: 0; }
/* the query container is .bgp; the grid it switches is the inner .bgp-in */
.bgp-in { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 560px) { .bgp-in { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-4); } .bgp-in .bgp-cats { grid-template-columns: minmax(0, 1fr); } .bgp-in .bgp-cat-ic { display: block; } }

/* ---- admin: ready-made boards (list of titles → one board's page with tabs) ---- */
.pb-list { display: grid; gap: var(--sp-4); }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.pb-card { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.pb-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.pb-open { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; min-block-size: var(--sp-11); }
.pb-ic { inline-size: var(--sp-11); block-size: var(--sp-11); font-size: var(--fs-lg); flex: none; }
.pb-ic.sm { inline-size: var(--sp-8); block-size: var(--sp-8); font-size: var(--fs-base); }
.pb-tx { display: grid; gap: 2px; min-width: 0; line-height: var(--lh-ui); }
.pb-tx b { font-size: var(--fs-base); }
.pb-meta { font-size: var(--fs-xs); color: var(--muted); }
.pb-acts { display: flex; align-items: center; gap: 2px; border-block-start: 1px solid var(--border); padding-block-start: var(--sp-2); }
.pb-add { display: grid; place-items: center; align-content: center; gap: var(--sp-2); min-block-size: 140px; border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.pb-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pb-add > i { font-size: var(--fs-xl); }
.pb-edit-view, .pb-edit { display: grid; gap: var(--sp-4); }
.pb-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pb-title { font-size: var(--fs-lg); }
.pb-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; padding: 3px; border-radius: var(--r); background: var(--surface-2); inline-size: fit-content; max-inline-size: 100%; }
.pb-tab { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--sp-11); padding-inline: var(--sp-4); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.pb-tab.on { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: var(--shadow-sm); }
.tpl-body .tpl-sec { max-inline-size: 760px; }
@media (max-width: 520px) { .pb-tabs { inline-size: 100%; } .pb-tab { flex: 1 1 calc(50% - var(--sp-1)); justify-content: center; padding-inline: var(--sp-2); } }

.tpl-ed { display: block; }
@media (max-width: 860px) { .tpl-ed { padding: var(--sp-3); } }
.pb-cfg { font-size: var(--fs-sm); color: var(--primary); font-weight: 700; padding-inline: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-2); }
.bgp-body > .bgp-weekly { margin-block-end: var(--sp-3); inline-size: 100%; }
/* «انتخاب تصادفی» is a tile like the others: this week's pick with a shuffle icon on it */
.bgp-rand .bgp-sw { display: grid; place-items: center; position: relative; }
.bgp-rand-ic { color: #fff; font-size: var(--fs-lg); text-shadow: 0 1px 3px rgb(0 0 0 / .55); }
.bgp-rand.on .bgp-rand-ic { display: none; }
.bgp-rand.lt .bgp-rand-ic { color: #1f2937; text-shadow: none; }

/* «ستون جدید» follows the board background: dark text on a light one */
.board-wrap.tone-light .add-list > button { background: rgb(0 0 0 / .08); color: #1f2937; }
.board-wrap.tone-light .add-list > button:hover { background: rgb(0 0 0 / .14); }
/* pictures: the random tile, and no captions */
.bgp-pic-rand .bgp-rand-scrim { position: absolute; inset: 0; background: rgb(15 23 42 / .45); }
.bgp-pic-rand .bgp-rand-ic { position: absolute; inset: 0; margin: auto; inline-size: fit-content; block-size: fit-content; color: #fff; font-size: var(--fs-xl); text-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.bgp-pic-rand.on .bgp-rand-ic { display: none; }

/* ---- new board: multi-step dialog ---- */
.nb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 200px)); justify-content: center; gap: 0; counter-reset: nb; }
.nb-steps li { position: relative; }
.nb-steps li::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: calc(50% + 18px); inset-inline-end: calc(-50% + 18px); block-size: 2px; background: var(--border); }
.nb-steps li:last-child::after { display: none; }
.nb-steps li.done::after { background: var(--primary); }
.nb-steps button { display: grid; justify-items: center; gap: var(--sp-1); inline-size: 100%; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; padding: 0; min-block-size: var(--sp-11); }
.nb-steps button:disabled { cursor: default; }
.nb-sn { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border-strong); background: var(--surface); font-weight: 700; font-size: var(--fs-sm); position: relative; z-index: 1; }
.nb-steps li.on .nb-sn { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.nb-steps li.on button { color: var(--text); font-weight: 700; }
.nb-steps li.done .nb-sn { border-color: var(--primary); color: var(--primary); }
.nb-steps li.done button { color: var(--text-2); }
.nb-step { display: grid; gap: var(--sp-3); }
.nb-step[hidden] { display: none; }
.nb-step-t { margin: 0; font-size: var(--fs-base); line-height: var(--lh-head); }
.nb-recap { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.nb-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.nb-form .nb-bg-pick { margin-block-start: 0; }

/* ready-made boards: switch on the card, switched-off cards are dimmed */
.pb-sw { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--sp-11); cursor: pointer; }
.pb-card.off .pb-open { opacity: .5; }
.pb-card.off { border-style: dashed; }

/* background picker: the random tiles keep their shuffle icon when selected; a small check sits in the corner instead */
.bgp-rand.on .bgp-rand-ic, .bgp-pic-rand.on .bgp-rand-ic { display: block; }
.bgp-rand .bgp-ck, .bgp-pic-rand .bgp-ck { position: absolute; inset-block-start: var(--sp-1); inset-inline-end: var(--sp-1); inline-size: var(--sp-5); block-size: var(--sp-5); border-radius: 50%; background: var(--primary); color: var(--on-primary); place-items: center; font-size: 10px; text-shadow: none; display: none; }
.bgp-rand.on .bgp-ck, .bgp-pic-rand.on .bgp-ck { display: grid; }
.bgp-rand .bgp-sw { position: relative; }
/* «random picture»: a simple flat SVG (sky, sun, two hills) instead of this week's actual picture */
.bgp-pic-rand { background: linear-gradient(135deg, #64748b, #334155); }
.bgp-pic-rand .bgp-rand-scrim { display: none; }
.bgp-pic-rand .bgp-rand-ic { text-shadow: 0 1px 4px rgb(0 0 0 / .55); }
.imp-zone.busy { opacity: .6; pointer-events: none; }

/* pictures category: heading above the library, «یا» divider, then the board's own upload / remove / blur */
.bgp-sub { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); margin-block-end: var(--sp-2); }
.bgp-or { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); margin-block: var(--sp-4); }
.bgp-or::before, .bgp-or::after { content: ""; flex: 1; block-size: 1px; background: var(--border-strong); }
.bgp-own { padding-block-end: var(--sp-1); }

/* pictures category: the upload card, the board's own picture, and the blur card (no pixel value, title and presets on one row) */
.bgp-pic.bgp-up { display: grid; place-items: center; align-content: center; gap: var(--sp-1); background: var(--surface); border: 2px dashed var(--border-strong); color: var(--text-2); font: inherit; font-size: var(--fs-xs); text-align: center; padding: var(--sp-2); }
.bgp-pic.bgp-up > i { font-size: var(--fs-xl); color: var(--primary); }
.bgp-pic.bgp-up:hover, .bgp-pic.bgp-up:focus-visible { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); outline: none; }
.bgp-pic.bgp-mine { cursor: default; }
.bgp-own .blur-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bgp-own .blur-head { flex: 1 1 220px; min-width: 0; }
.bgp-own .blur-presets { flex: none; }
/* «سن کارت» */
.kmeta.age { color: var(--warn); }
.prop.static.age { color: var(--text-2); }
.prop.static.age .prop-x { border: 0; background: none; color: var(--muted); cursor: pointer; min-inline-size: var(--sp-6); min-block-size: var(--sp-6); display: inline-grid; place-items: center; border-radius: 50%; margin-inline-start: var(--sp-1); }
.prop.static.age .prop-x:hover { background: var(--surface-3); color: var(--danger); }

/* one feed: «نظرات و فعالیت‌ها» (header with details + sort, thread filter bar, activity rows between comments) */
.cm-feed-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; border-block-end: 1px solid var(--border); padding-block-end: var(--sp-2); margin-block-end: var(--sp-3); }
.cm-feed-head h4 { margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); }
.cm-feed-head .count { font-size: var(--fs-xs); font-weight: 700; min-inline-size: 22px; text-align: center; padding-inline: var(--sp-2); border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); }
.details-btn.on { background: var(--primary-soft); color: var(--primary); }
.cmt-thread { gap: var(--sp-1); color: var(--primary); min-inline-size: var(--sp-8); }
.cmt-thread.on { background: var(--primary-soft); }
.thread-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); margin-block-end: var(--sp-3); border-radius: var(--r); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.hist-item.in-feed { padding: var(--sp-2) 0 var(--sp-2) 0; font-size: var(--fs-sm); color: var(--text-2); border-inline-start: 2px solid var(--border); padding-inline-start: var(--sp-3); margin-inline-start: var(--sp-4); }

/* opening a card: a softer, slower entrance (backdrop fades in, the dialog rises and settles, the content follows) */
.modal-back.card-back { animation: fade 280ms var(--ease); }
.modal.card-sheet { animation: card-in 320ms cubic-bezier(.22, .9, .3, 1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(.97); } }
.modal.card-sheet .cm-body { animation: fade-up 300ms var(--ease) backwards; animation-delay: 110ms; }
@media (max-width: 860px) { .modal.card-sheet { animation: sheet 340ms var(--ease); } }
@media (prefers-reduced-motion: reduce) { .modal-back.card-back, .modal.card-sheet, .modal.card-sheet .cm-body { animation: none; } }
@media (min-width: 861px) { .emoji-picker { block-size: min(420px, calc(100dvh - 16px)); } } /* a fixed height, so switching tabs or searching never pushes it off the screen */
/* the card dialog is 720px wide from the first frame, so it no longer narrows when the card has loaded */
.modal.wide.card-sheet { max-width: 720px; }

/* «back to default» icon next to a setting's title */
.reset-def { display: inline-grid; place-items: center; inline-size: var(--sp-8); block-size: var(--sp-8); margin-inline-start: var(--sp-1); border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; vertical-align: middle; }
.reset-def[hidden] { display: none; }
.reset-def:hover, .reset-def:focus-visible { background: var(--primary-soft); color: var(--primary); outline: none; }
.bgp-pics + .bgp-own, .bgp-main .bgp-own { margin-block-start: var(--sp-4); }

/* ---- mirror cards: a card of another board shown in a column (look B: a tinted strip with the origin board) ---- */
.kcard.mirror { overflow: hidden; --origin: var(--primary); }
.kcard.mirror > .mc-strip { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-2); padding: var(--sp-1) var(--sp-3); background: color-mix(in srgb, var(--origin) 16%, var(--surface)); color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-ui); white-space: nowrap; }
.kcard.mirror > .mc-strip i { color: var(--origin); flex: none; }
.kcard.mirror > .mc-strip b { font-weight: 700; min-width: 0; }
.kcard.mirror > .mc-strip .mc-strip-list { flex: 1 1 0; min-width: 0; }
.kcard.mirror-locked .ktitle { color: var(--text-2); }
.mc-ribbon { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--origin, var(--primary)); color: #fff; font-size: var(--fs-sm); line-height: var(--lh-ui); }
.mc-ribbon .grow { min-width: 0; }
.mc-ribbon b { font-weight: 700; }
.mc-ribbon .btn { background: rgb(255 255 255 / .2); color: #fff; border-color: transparent; min-block-size: 44px; flex: none; }
.mc-ribbon .btn:hover { background: rgb(255 255 255 / .3); }
.mc-note-warn { display: flex; align-items: center; gap: var(--sp-2); padding-block-end: var(--sp-2); font-size: var(--fs-sm); color: var(--warn); line-height: var(--lh-ui); }
.mc-list { display: grid; gap: var(--sp-2); }
.mc-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); min-block-size: var(--sp-11); }
.mc-row .grow { min-width: 0; }
.mc-row .mc-dot { inline-size: 28px; block-size: 20px; border-radius: var(--r-sm); flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.mc-note { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-ui); }
.mc-note i { color: var(--primary); margin-block-start: var(--sp-1); }
.mc-noacc { display: grid; gap: var(--sp-2); justify-items: center; text-align: center; }
.mc-noacc-ic { font-size: var(--fs-2xl); color: var(--muted); }
.mc-noacc h3, .mc-noacc p { margin: 0; }
.cm-sec.mc-sec { display: grid; gap: var(--sp-2); }

/* system-status panel: link icon next to the title of a row that has a warning */
.sys-lbl { display: inline-flex; align-items: center; gap: var(--sp-1); }
.sys-link { position: relative; display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: var(--r-sm); color: var(--primary); font-size: var(--fs-xs); }
.sys-link::before { content: ""; position: absolute; inset: -10px; } /* 44px tap area */
.sys-link:hover, .sys-link:focus-visible { background: var(--primary-soft); }
.sys-lbl { white-space: nowrap; flex: none; }
.dd-menu .sys-link, .dd-menu .sys-link:hover { color: var(--primary); padding: 0; min-block-size: 0; }

/* message templates: direct link icon next to the title, and the highlight when a link scrolls to a template */
.tpl-link { position: relative; display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: var(--r-sm); color: var(--muted); font-size: var(--fs-xs); }
.tpl-link::before { content: ""; position: absolute; inset: -10px; }
.tpl-link:hover, .tpl-link:focus-visible { color: var(--primary); background: var(--primary-soft); }
.tpl-row { scroll-margin-block: var(--sp-8); }
.tpl-row.flash { animation: tpl-flash 2.4s var(--ease); }
@keyframes tpl-flash { 0%, 60% { background: var(--primary-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tpl-row.flash { animation: none; background: var(--primary-soft); } }

/* background picker: the note about the «random» option under the cards */
.bgp-note { margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-ui); }

.tpl-link, .tpl-link:hover, .sys-link, .sys-link:hover { text-decoration: none; }
[data-cred] + [data-cred] { border-block-start: 1px solid var(--border); }
[data-cred-err][hidden] { display: none; }

/* «type its name» confirmation: the name is a click-to-copy word in the text and a gray placeholder behind the field that fills in as you type */
.nc-name { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: copy; overflow-wrap: anywhere; text-align: start; }
.nc-name:hover, .nc-name:focus-visible { color: var(--primary); }
.nc-field { position: relative; border-radius: var(--r); background: var(--surface); }
.nc-ghost, .nc-field .nc-in { box-sizing: border-box; inline-size: 100%; block-size: 44px; padding-inline: var(--sp-3); font: inherit; line-height: var(--lh-ui); letter-spacing: 0; }
.nc-ghost { position: absolute; inset: 0; display: flex; align-items: center; white-space: pre; overflow: hidden; color: var(--muted); pointer-events: none; }
.nc-typed { visibility: hidden; }
.nc-field .nc-in { position: relative; z-index: 1; background: transparent; }
.nc-field .nc-in.bad { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); color: var(--danger); }
.nc-field .nc-in.good { border-color: var(--success); }
.cq-opt { display: grid; gap: var(--sp-1); text-align: start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; min-block-size: var(--sp-11); transition: border-color var(--t-fast), background var(--t-fast); }
.cq-opt:hover, .cq-opt:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.cq-opt.rec { border-color: var(--primary); }
.cq-t { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* archive page: row checkboxes and the bulk bar */
.arch-pick { display: inline-grid; place-items: center; inline-size: var(--sp-11); block-size: var(--sp-11); flex: none; margin-inline-start: calc(var(--sp-2) * -1); cursor: pointer; }
.arch-pick input { inline-size: 18px; block-size: 18px; accent-color: var(--primary); cursor: pointer; }
.arch-bar { position: sticky; inset-block-end: var(--sp-4); z-index: 20; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-block-start: var(--sp-4); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.arch-bar[hidden], .arch-all[hidden] { display: none; }
.arch-bar .grow { flex: 1; }
@media (prefers-reduced-motion: no-preference) { .arch-bar { animation: fade-up .2s var(--ease) backwards; } }
@media (max-width: 860px) { .arch-bar { inset-block-end: calc(var(--sp-4) + 72px + env(safe-area-inset-bottom, 0px)); } } /* above the bottom navigation on phones */
.cf-warn { margin-block-end: var(--sp-4); }
.cq-opt .cq-dot { inline-size: 16px; block-size: 16px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); box-sizing: border-box; }
.cq-opt.on { border-color: var(--primary); background: var(--primary-soft); }
.cq-opt.on .cq-dot { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 45%, var(--surface) 50%); }
.cq-opt .cq-h { padding-inline-start: calc(16px + var(--sp-2)); }

/* board: hover strips at the left / right edge that scroll the columns sideways (desktop, mouse only; shown only while there is more board that way) */
.edge-scroll { position: absolute; z-index: 15; inline-size: var(--sp-10); display: grid; place-items: center; color: #fff; font-size: var(--fs-lg); background: linear-gradient(var(--grad, to right), rgb(0 0 0 / .32), rgb(0 0 0 / 0)); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease); }
.edge-scroll.start { inset-inline-start: 0; }
.edge-scroll.end { inset-inline-end: 0; }
.edge-scroll.on { opacity: 1; pointer-events: auto; }
.edge-scroll i { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
@media (hover: none), (max-width: 860px) { .edge-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .edge-scroll { transition: none; } }
/* empty result of the board search */
.lists .no-match { align-self: flex-start; display: grid; justify-items: start; gap: var(--sp-2); inline-size: min(100%, 340px); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); color: var(--text); line-height: var(--lh-ui); }
.lists .no-match > i { display: grid; place-items: center; inline-size: var(--sp-11); block-size: var(--sp-11); border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-lg); }
.lists .no-match .btn { margin-block-start: var(--sp-2); }

/* column colour picker: each sample is a tiny column in that colour (coloured header, two cards) instead of a plain square */
.lc-dot { inline-size: 32px; block-size: 40px; border-radius: var(--r-sm); color: var(--lc, var(--muted)); font-size: var(--fs-sm); padding-block-start: 10px;
  background:
    linear-gradient(var(--surface), var(--surface)) 4px 15px / calc(100% - 8px) 6px no-repeat,
    linear-gradient(var(--surface), var(--surface)) 4px 24px / calc(100% - 8px) 6px no-repeat,
    linear-gradient(var(--lc, var(--border-strong)), var(--lc, var(--border-strong))) 0 0 / 100% 10px no-repeat,
    color-mix(in srgb, var(--lc, var(--border-strong)) 22%, var(--surface-2)); }
.lc-sw:not([data-color]) .lc-dot { background: var(--surface); color: var(--muted); padding-block-start: 0; }
.lc-dot i { font-size: var(--fs-xs); filter: drop-shadow(0 0 2px var(--surface)); }

/* board dropdown: a «روشن / خاموش» pill at the end of a row shows whether that setting is on (green) or off (red) */
.pop-menu .pop-state { flex: none; margin-inline-start: auto; font-size: var(--fs-xs); line-height: var(--lh-ui); padding: 0 var(--sp-2); border-radius: var(--r-full); background: var(--success-soft); color: var(--success); font-weight: 700; }
.pop-menu .pop-state.off { background: var(--danger-soft); color: var(--danger); }

/* section title inside popup menus (e.g. «اعلان‌ها و به‌روزرسانی»): same look as the titles of the other popup lists */
.pop-menu .pop-title { font-weight: 700; font-size: var(--fs-sm); line-height: var(--lh-ui); padding: var(--sp-2) var(--sp-3); color: var(--muted); }

/* label colour popover: 9 colour families x 4 shades, no titles; stays open until «تأیید» / «انصراف» */
.color-pop .cp-top { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.color-pop .cp-pill { margin-inline-start: auto; max-inline-size: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); line-height: var(--lh-ui); padding: 0 var(--sp-2); border-radius: var(--r-sm); }
.color-pop .cp-rows { display: grid; gap: var(--sp-1); }
.color-pop .cp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.color-pop .cp-sw { display: grid; place-items: center; block-size: var(--sp-8); padding: 0; border: 0; border-radius: var(--r-sm); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.color-pop .cp-sw i { font-size: var(--fs-xs); }
.color-pop .cp-sel { display: flex; align-items: center; gap: var(--sp-2); padding-block-start: var(--sp-2); border-block-start: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); }
.color-pop .cp-chip { inline-size: 20px; block-size: 20px; flex: none; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.color-pop .cp-foot { display: flex; gap: var(--sp-2); }
.color-pop .cp-foot .grow { flex: 1; }
.color-pop { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
@media (pointer: coarse) { .color-pop .cp-sw { block-size: var(--sp-11); } } /* finger: full-size targets */
/* card cover colour: one button that opens the palette picker */
.cover-clr { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cover-clr-sw { inline-size: 18px; block-size: 18px; border-radius: var(--r-sm); background: var(--surface-3); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
/* a full-colour cover in a light palette colour: dark text */
.kcard.cover-full.cover-light, .kcard.cover-full.cover-light .ktitle, .kcard.cover-full.cover-light .kfoot, .kcard.cover-full.cover-light .kmeta, .kcard.cover-full.cover-light .klock { color: #2c3e50; }
.kcard.cover-full.cover-light.done .ktitle { color: rgb(44 62 80 / .7); }
.kcard.cover-full.cover-light .kdone:not(.on) { border-color: rgb(44 62 80 / .5); }

/* message window from the system manager (shown on the dashboard after sign-in; also the preview in Admin → ارسال اعلان) */
.pp { display: flex; flex-direction: column; gap: var(--sp-3); }
.pp-img { inline-size: 100%; max-block-size: 220px; object-fit: cover; border-radius: var(--r); background: var(--surface-2); }
.pp-cap { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.pp-ic { display: grid; place-items: center; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.pp-n { margin-inline-start: auto; font-size: var(--fs-xs); }
.pp-t { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-head); }
.pp-b { margin: 0; white-space: pre-wrap; color: var(--text-2); line-height: var(--lh-body); overflow-wrap: anywhere; }
.pp-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.pp-demo { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }

/* ---------- صندوق ورودی (inbox) + bot link code ---------- */
.nav-count { display: inline-block; min-inline-size: var(--sp-5); margin-inline-start: var(--sp-1); padding: 0 var(--sp-1); border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-ui); text-align: center; }
.ib { display: flex; flex-direction: column; gap: var(--sp-4); }
.ib-add { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.ib-add-row { display: flex; gap: var(--sp-2); }
.ib-add-row .input { flex: 1; min-inline-size: 0; }
.ib-bots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ib-bot { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl); padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text-2); font-size: var(--fs-sm); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
a.ib-bot:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.ib-bot.on { border-color: transparent; background: var(--success-soft); color: var(--success); }
.ib-list-card { padding: 0; overflow: hidden; }
.ib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--border); }
.ib-tools .input { max-inline-size: 280px; }
.ib-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ib-chip { min-block-size: var(--ctl); padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.ib-chip:hover { background: var(--surface-2); }
.ib-chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.ib-list { display: flex; flex-direction: column; min-block-size: calc(var(--sp-10) * 3); }
.ib-skel { block-size: calc(var(--sp-10) + var(--sp-6)); margin: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--surface-2); animation: ib-pulse 1.2s ease-in-out infinite; }
@keyframes ib-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.ib-row { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--border); border-inline-start: 3px solid transparent; cursor: pointer; transition: background var(--t-fast); }
.ib-row:hover, .ib-row:focus-visible { background: var(--surface-2); outline: none; }
.ib-row.pinned { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.ib-row.urgent { border-inline-start-color: var(--danger); }
.ib-row.dragging { opacity: .95; background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); } /* the row being moved: tinted and outlined, so the live preview shows exactly where it will land */
.ib-row.dragging .ib-grip { color: var(--primary); }
.ib-del { color: var(--muted); }
.ib-del:hover { color: var(--danger); background: var(--danger-soft); }
.ib-drag-chip { position: fixed; inset-block-start: -200px; inset-inline-start: 0; display: inline-flex; align-items: center; gap: var(--sp-2); max-inline-size: 280px; min-block-size: var(--ctl-sm); padding-inline: var(--sp-3); border: 1px solid var(--primary); border-radius: var(--r-full); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-ui); }
.ib-drag-chip i { color: var(--primary); flex: none; }
.ib-drag-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-grip { color: var(--muted); cursor: grab; }
.ib-src { display: grid; place-items: center; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--surface-3); color: var(--text-2); }
.ib-main { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ib-title { font-weight: 700; line-height: var(--lh-ui); overflow-wrap: anywhere; }
.ib-note { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.ib-tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); line-height: var(--lh-ui); }
.ib-tag.urgent, .ib-tag.late { background: var(--danger-soft); color: var(--danger); }
.ib-tag.high { background: var(--warn-soft); color: var(--warn); }
.ib-tag.pin { background: var(--primary-soft); color: var(--primary); }
.ib-acts { display: flex; align-items: center; gap: var(--sp-1); }
/* outlined split button: move + arrow (more actions); the long label shortens on small screens */
.ib-split { display: inline-flex; }
.ib-split .btn { background: var(--surface); border-color: var(--border-strong, var(--border)); color: var(--text-2); box-shadow: none; }
.ib-split .btn:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); } /* calm grey; the brand blue only on hover */
.ib-split-main { border-start-end-radius: 0; border-end-end-radius: 0; }
.ib-split-more { inline-size: var(--ctl-sm); padding: 0; border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start-width: 0; }
.ib-lbl-short { display: none; }
@media (max-width: 640px) { .ib-lbl-long { display: none; } .ib-lbl-short { display: inline; } }
.ib-mv-title { padding: var(--sp-3); border-radius: var(--r); background: var(--surface-2); font-weight: 700; line-height: var(--lh-ui); }
@media (max-width: 719px) {
  .ib-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .ib-grip { display: none; }
  .ib-acts .btn-primary span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ib-skel { animation: none; } }
.bot-code { margin-block-start: var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.bot-code-n { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--primary); user-select: all; }
.bot-cmd { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--surface-3); font-size: var(--fs-xs); user-select: all; }

/* count pill inside a settings tab: readable on both the idle and the selected (primary) tab */
.set-tab .tab-n { min-inline-size: var(--sp-6); padding-inline: var(--sp-2); border-radius: var(--r-full); background: var(--surface-3); color: var(--text); font-size: var(--fs-xs); line-height: var(--sp-6); text-align: center; }
.set-tab.on .tab-n { background: color-mix(in srgb, var(--on-primary) 24%, transparent); color: var(--on-primary); }
.set-tab.on .muted { color: inherit; }

/* bot status bar + proxy fields (Admin → ربات‌های پیام‌رسان) */
.bot-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); margin-block-end: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: var(--fs-sm); }
.bot-status .bs { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl-sm); padding-inline: var(--sp-3); border-radius: var(--r-full); background: var(--surface-2); }
.bot-status .bs .bs-st { min-inline-size: 0; }
.bot-proxy { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2); }

/* logout confirmation (login-style scene: three columns + the circle) */
.lv-back { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--sp-4); background: rgb(12 16 32 / .5); opacity: 0; transition: opacity var(--t-med); }
.lv-back.on { opacity: 1; }
.lv-dlg { inline-size: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(var(--sp-4)) scale(.97); opacity: 0; transition: transform var(--t-med) var(--ease), opacity var(--t-med); }
.lv-back.on .lv-dlg { transform: none; opacity: 1; }
.lv-art { block-size: 148px; display: grid; place-items: center; background: linear-gradient(160deg, var(--brand-100), var(--brand-50)); overflow: hidden; }
.lv-art svg { inline-size: 220px; block-size: 132px; overflow: visible; }
.lv-col { fill: var(--surface); opacity: .75; }
.lv-cd { fill: var(--primary); transition: transform 260ms var(--ease), opacity 260ms; } .lv-cd.b { fill: var(--brand-300); } .lv-cd.c { fill: var(--success); }
.lv-core { fill: var(--success); opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: transform var(--t-med) var(--ease), opacity var(--t-med); }
.lv-wave { fill: none; stroke: var(--on-primary); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 300ms var(--ease) 80ms; }
.lv-hand { display: none; fill: none; stroke: var(--on-primary); stroke-width: 5; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: lv-wave 1.6s ease-in-out infinite; }
.lv-back.bye .lv-core { opacity: 1; transform: scale(1.12); }
.lv-back.bye .lv-wave { stroke-dashoffset: 0; }
.lv-back.bye .lv-hand { display: none; }
.lv-back.bye .lv-cd { opacity: 0; transform: translateY(var(--sp-4)); }
.lv-back.bye .lv-cd:nth-of-type(2n) { transition-delay: 40ms; } .lv-back.bye .lv-cd:nth-of-type(3n) { transition-delay: 80ms; }
@keyframes lv-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
.lv-txt { padding: var(--sp-5) var(--sp-5) var(--sp-2); display: grid; gap: var(--sp-1); text-align: center; }
.lv-txt h2 { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-head); }
.lv-txt p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2); }
.lv-txt .sw { display: none; }
.lv-back.bye .lv-txt .st { display: none; } .lv-back.bye .lv-txt .sw { display: block; }
.lv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.lv-back.bye .lv-acts { opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
.lv-out { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.lv-out:hover { background: var(--danger); color: var(--on-primary); }
@media (prefers-reduced-motion: reduce) { .lv-back *, .lv-back { transition-duration: 1ms !important; transition-delay: 0s !important; animation: none !important; } }
.bot-status .bs .bs-st { max-inline-size: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* system info is English and left-aligned (labels and values) */
.sys-en .kv, .sys-en .kv-h { direction: ltr; text-align: left; }
.sys-en .kv b { direction: ltr; }
.sys-en .kv-h { border-block-start: 0; }
.sys-en .kv { margin-inline-end: -1px; } /* hides the last column's right hairline against the panel edge */
.sys-en .kv > div { padding-block: var(--sp-3); }

/* ---------- Calendar page: one shell — toolbar, one-line filter, side rail, calendar ---------- */
.cal-shell { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.cal-shead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.cal-nav h3 { min-inline-size: 0; font-size: var(--fs-lg); line-height: var(--lh-head); padding-inline: var(--sp-2); text-align: start; }
.cal-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--surface-2); }
.cal-seg button { min-block-size: var(--ctl); padding-inline: var(--sp-4); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.cal-seg button.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: var(--shadow-sm); }
.cal-seg button:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-fstrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-5); background: var(--surface-2); border-block: 1px solid var(--border); }
.cal-fsearch { position: relative; flex: 1 1 220px; min-inline-size: 0; }
.cal-fsearch > i { position: absolute; inset-inline-start: var(--sp-3); inset-block-start: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.cal-fsearch .input { inline-size: 100%; padding-inline-start: var(--sp-10); }
.cal-fstrip .select { inline-size: auto; flex: 0 1 150px; }
.cal-fclear { white-space: nowrap; }
.cal-bsel { position: relative; }
.cal-bchips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.cal-bchip { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl-sm); padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.cal-bchip:not(.on) { opacity: .55; text-decoration: line-through; }
.cal-bchip.on { color: var(--text); }
.cal-dot { display: inline-block; inline-size: var(--sp-2); block-size: var(--sp-2); border-radius: 50%; flex: none; }
.cal-bbtn { gap: var(--sp-2); }
.cal-bpop { position: absolute; inset-block-start: calc(100% + var(--sp-1)); inset-inline-start: 0; z-index: 20; inline-size: min(320px, 86vw); padding: var(--sp-3); display: grid; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.cal-bhead { display: flex; align-items: center; gap: var(--sp-1); }
.cal-bhead .input { flex: 1; min-inline-size: 0; }
.cal-blist { max-block-size: 264px; overflow: auto; display: grid; }
.cal-brow { display: flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl); padding-inline: var(--sp-2); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); }
.cal-brow:hover { background: var(--surface-2); }
.cal-sbody { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.cal-side2 { display: grid; gap: var(--sp-5); align-content: start; padding: var(--sp-5); border-inline-end: 1px solid var(--border); }
.cal-mini { display: grid; gap: var(--sp-3); }
.cal-mini-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.cal-mini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini-w { text-align: center; font-size: var(--fs-xs); color: var(--muted); padding-block: var(--sp-1); }
.cal-mini-d { position: relative; display: grid; place-items: center; min-block-size: var(--sp-8); border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.cal-mini-d:hover { background: var(--surface-2); }
.cal-mini-d.wk { background: var(--primary-soft); }
.cal-mini-d.today { color: var(--primary); font-weight: 700; }
.cal-mini-d.sel { background: var(--primary); color: var(--on-primary); }
.cal-mini-d:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-mini-dot { position: absolute; inset-block-end: 3px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: transparent; }
.cal-mini-dot.on { background: var(--primary); } .cal-mini-d.sel .cal-mini-dot.on { background: var(--on-primary); }
.cal-unb { display: grid; gap: var(--sp-3); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--border); border-radius: var(--r-sm); }
.cal-unb-h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.cal-unb .cal-un { padding: 0; max-block-size: 420px; }
.cal-main2 { padding: var(--sp-5); min-inline-size: 0; }
.cal-skel { min-block-size: 360px; border-radius: var(--r); background: var(--surface-2); }
.cal-main2 .cal-grid { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
/* week / five days */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.cal-week.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cal-col { border: 1px solid transparent; border-radius: var(--r); background: var(--surface-2); overflow: hidden; min-inline-size: 0; transition: background var(--t-fast); }
.cal-col.today { border-color: var(--primary); }
.cal-col.center { box-shadow: 0 0 0 1px var(--primary); border-color: var(--primary); }
.cal-col-h { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3); border-block-end: 1px solid var(--border); font-size: var(--fs-xs); }
.cal-col-h b { font-size: var(--fs-base); }
.cal-col.fri .cal-col-h > span:first-child { color: var(--danger); }
.cal-col.today .cal-col-h { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.cal-col.today .cal-col-h .muted, .cal-col.today .cal-col-h > span:first-child { color: inherit; }
.cal-cnt { margin-inline-start: auto; opacity: .8; }
.cal-col-b { display: grid; gap: var(--sp-2); padding: var(--sp-3); min-block-size: 160px; align-content: start; }
.cal-col-empty { text-align: center; color: var(--muted); padding: var(--sp-2); }
/* a card as a block (week columns, unscheduled list, day list) */
.cal-card.big { padding: var(--sp-2) var(--sp-3); min-block-size: var(--ctl); align-items: center; }
.cal-card.big .cal-ct { display: grid; min-inline-size: 0; flex: 1; }
.cal-card.big small { font-size: var(--fs-xs); opacity: .85; }
.cal-card.big .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-pop-list { display: grid; gap: var(--sp-2); min-inline-size: min(360px, 78vw); }
/* drag & drop */
.cal-card.dragging { opacity: .45; }
.is-dragging .cal-day:not(.out), .is-dragging .cal-col, .is-dragging .cal-mini-d, .is-dragging .cal-unb { outline: 1px dashed var(--border-strong); outline-offset: -3px; }
.drop-over { background: var(--primary-soft) !important; outline: 2px solid var(--primary) !important; outline-offset: -2px; }
@media (max-width: 900px) {
  .cal-sbody { grid-template-columns: minmax(0, 1fr); }
  .cal-side2 { order: 2; border-inline-end: 0; border-block-start: 1px solid var(--border); padding: var(--sp-4); }
  .cal-week, .cal-week.n5 { grid-template-columns: minmax(0, 1fr); }
  .cal-col-b { min-block-size: 0; }
  .cal-shead { padding: var(--sp-3) var(--sp-4); } .cal-fstrip { padding: var(--sp-3) var(--sp-4); } .cal-main2 { padding: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .cal-col, .cal-seg button { transition: none; } }
.cal-fstrip .select, .cal-fstrip .cselect { inline-size: auto; min-inline-size: 150px; flex: 0 1 160px; }
.cal-fstrip .cselect { margin: 0; }

/* cards in the calendar: neutral block with the board colour as a bar (same look as the design trial) */
.cal-shell .cal-card { background: var(--surface-2); color: var(--text) !important; box-shadow: none; gap: var(--sp-2); min-block-size: var(--ctl-sm); padding: 0 var(--sp-2); border-radius: var(--r-sm); }
.cal-shell .cal-card:hover { background: var(--surface-3); transform: none; box-shadow: none; }
.cal-shell .cal-card:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-shell .cal-card.urgent { box-shadow: none; }
.cal-shell .cal-card .fa-bolt { color: var(--danger); font-size: var(--fs-xs); flex: none; }
.cal-shell .cal-card.done { opacity: 1; color: var(--muted) !important; }
.cal-shell .cal-card.big { min-block-size: var(--ctl); padding-block: var(--sp-1); }
.cal-shell .cal-card.big small { color: var(--muted); opacity: 1; }
.cal-bar { flex: none; align-self: stretch; inline-size: 3px; margin-block: var(--sp-1); border-radius: var(--r-full); }
.cal-seg button { min-block-size: var(--ctl-sm); }
.cal-fclear { min-inline-size: 136px; }
.cal-fclear.is-off { visibility: hidden; }
.cal-hint { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--muted); }
.cal-unb .cal-un-row .cal-card { padding-inline: var(--sp-2); }


.cal-fstrip .select, .cal-fstrip .cselect { min-inline-size: 132px; flex: 0 1 140px; }
.cal-fsearch { flex: 1 1 160px; }

/* ---- exact look of the design trial (calendar-trial.html#d): cards, columns ---- */
.cal-shell .cal-card.big { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); min-block-size: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.cal-shell .cal-card.big:hover { background: var(--surface); border-color: var(--border-strong); }
.cal-shell .cal-card.big .cal-bar { align-self: stretch; inline-size: 4px; margin: 0; }
.cal-shell .cal-card.big .cal-ct { display: grid; flex: 1; min-inline-size: 0; }
.cal-shell .cal-card.big .cal-ct b { font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-ui); white-space: normal; overflow-wrap: break-word; }
.cal-shell .cal-card.big small { font-size: var(--fs-xs); color: var(--muted); }
.cal-shell .cal-card.big.done .cal-ct b { color: var(--muted); text-decoration: line-through; }
.cal-ok { color: var(--success); flex: none; }
.cal-col-h { padding: var(--sp-3); gap: var(--sp-2); font-size: var(--fs-xs); }
.cal-col-b { padding: var(--sp-3); gap: var(--sp-3); }
.cal-mini-d.off { color: var(--muted); }
.cal-mini-d.wk { background: var(--primary-soft); }
.cal-mini-d.sel { background: var(--primary); color: var(--on-primary); }

/* ---------- card timeline: «نظرات و فعالیت‌ها» (comments with nested replies, activity as coloured dots) ---------- */
.tl { display: grid; --tl-av: var(--sp-6); }
.tl-day { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.tl-day::after { content: ""; flex: 1; border-block-start: 1px solid var(--border); }
.tl-newfrom { margin-block: var(--sp-1) var(--sp-3); border-block-start: 1px dashed var(--border-strong); animation: fade var(--t-med) var(--ease); } /* where «نمایش بیشتر» added the next comments */
@media (prefers-reduced-motion: reduce) { .tl-newfrom { animation: none; } }
.tl-it { position: relative; display: grid; grid-template-columns: var(--sp-8) minmax(0, 1fr); gap: var(--sp-2); padding-block-end: var(--sp-4); }
.tl-it::before { content: ""; position: absolute; inset-inline-start: calc(var(--sp-4) - 1px); inset-block: 0; border-inline-start: 2px solid var(--border); }
.tl-it:last-of-type::before { inset-block-end: auto; block-size: var(--sp-4); }
.tl-pin { position: relative; z-index: 1; display: grid; place-items: start center; }
.tl-pin .avatar { box-shadow: 0 0 0 3px var(--surface); }
.tl-dot { display: inline-block; inline-size: var(--sp-3); block-size: var(--sp-3); margin-block-start: var(--sp-2); border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); box-sizing: border-box; flex: none; }
.tl-dot.mv { border-color: var(--primary); } .tl-dot.due { border-color: var(--warn); } .tl-dot.ok { border-color: var(--success); background: var(--success); }
.tl-dot.adds { border-color: var(--primary); background: var(--primary); } .tl-dot.oth { border-color: var(--muted); } .tl-dot.arch { border-color: var(--danger); }
.tl-act { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); min-block-size: var(--sp-6); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--text-2); }
.tl-act b { color: var(--text); }
.tl-act.hl { border-inline-start: 3px solid var(--primary); padding-inline-start: var(--sp-2); }
.tl-when { font-size: var(--fs-xs); color: var(--muted); }
.tl-th { display: grid; gap: var(--sp-2); min-inline-size: 0; }
.tl-th > .comment { margin: 0; }
.tl-th > .comment > .avatar { display: none; }
.tl .cmt-quote, .tl .cmt-thread { display: none; }
.tl-th.hl > .comment .bubble, .tl-node.hl > .comment .bubble { border-inline-start: 3px solid var(--primary); }
.tl-empty { padding: var(--sp-4); text-align: center; }
/* reply tree: the rail runs down the start of a group, every reply has a tick to its avatar, the last one ends the rail */
.tl { --ind: var(--sp-5); } /* reply indent per level (tighter on phones, where three levels would squeeze the bubbles); the start margin stays sp-3 so the lines meet the avatars */
@media (max-width: 860px) { .tl { --ind: var(--sp-3); } }
.tl-replies { --cy: calc(var(--sp-3) + var(--sp-3)); margin-inline-start: var(--mg, var(--sp-3)); padding-inline-start: var(--ind); display: grid; }
/* from the 4th level on the step shrinks (12px a level instead of 32), so a chain of 20 levels still leaves room for the bubbles; the parent's vertical line moves with it */
.tl-replies .tl-replies .tl-replies .tl-replies { --ind: var(--sp-2); --mg: var(--sp-1); }
.tl-replies .tl-replies .tl-replies > .tl-node.has-kids > .comment::after { inset-inline-start: calc(var(--sp-1) - 1px); }
.tl-node { position: relative; padding-block-start: var(--sp-3); min-inline-size: 0; }
.tl-node::before { content: ""; position: absolute; inset-inline-start: calc(var(--ind) * -1 - 1px); inset-block: 0; border-inline-start: 2px solid var(--border); }
.tl-node.last::before { inset-block-end: auto; block-size: var(--cy); }
.tl-node::after { content: ""; position: absolute; inset-inline-start: calc(var(--ind) * -1); inset-block-start: calc(var(--cy) - 1px); inline-size: calc(var(--ind) - var(--sp-1)); border-block-start: 2px solid var(--border); }
.tl-node > .comment { position: relative; margin: 0; }
.tl-node.has-kids > .comment::after { content: ""; position: absolute; inset-inline-start: calc(var(--sp-3) - 1px); inset-block: calc(var(--tl-av) + var(--sp-1)) 0; border-inline-start: 2px solid var(--border); }
.tl-morenode { --cy: calc(var(--sp-3) + var(--sp-5)); }
/* below the last indented level the replies form one flat list (one more level of the ordinary tree lines) and each says who it answers */
.tl-to { display: flex; align-items: center; gap: var(--sp-2); block-size: var(--sp-5); font-size: var(--fs-xs); color: var(--muted); }
.tl-node.has-to { --cy: calc(var(--sp-3) + var(--sp-3) + var(--sp-5)); } /* the elbow meets the avatar, which sits below the «در پاسخ به» line */
.tl-to b { color: var(--text-2); font-weight: 600; }
.tl-to i { font-size: var(--fs-xs); }
.tl-fold { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl); padding-inline: var(--sp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--primary); font: inherit; font-size: var(--fs-sm); cursor: pointer; justify-self: start; }
.tl-fold:hover { background: var(--surface-2); }
.tl-fold i { transition: transform var(--t-med) var(--ease); }
.tl-th.folded > .tl-replies { display: none; }
.tl-th.folded > .tl-fold i { transform: rotate(-90deg); }
.tl-more[aria-expanded="false"] i { transform: rotate(-90deg); } /* same as the thread fold: collapsed points sideways, open points down */
.tl-more[aria-expanded="true"] i { transform: none; }
.tl-replies:not(.open-rest) > .tl-hid { display: none; }
.tl-focus { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.tl-user { inline-size: auto; min-inline-size: 160px; }
.tl-legw { position: relative; display: inline-flex; }
.tl-q { inline-size: var(--ctl); block-size: var(--ctl); border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.tl-q:hover { color: var(--primary); }
.tl-pop { position: absolute; inset-block-start: calc(100% + var(--sp-1)); inset-inline-end: 0; z-index: 8; inline-size: 280px; padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); font-size: var(--fs-xs); color: var(--text-2); }
.tl-pop b { font-size: var(--fs-sm); color: var(--text); }
.tl-pop span { display: flex; align-items: center; gap: var(--sp-2); }
.tl-pop .tl-dot { margin: 0; }
@media (prefers-reduced-motion: reduce) { .tl-fold i { transition: none; } }
/* filter dropdowns: one size for all of them */
.cal-fstrip .cal-bbtn, .cal-fstrip .cselect, .cal-fstrip .select { inline-size: 168px; min-inline-size: 168px; flex: 0 0 168px; min-block-size: var(--ctl); }
.cal-fstrip .cal-bbtn { justify-content: space-between; gap: var(--sp-2); }
.cal-fstrip .cal-bbtn > span { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.cal-fsearch { flex: 1 1 200px; }
.cal-bpop { inline-size: max(100%, 260px); }

.cal-fstrip .cal-bbtn, .cal-fstrip .cselect, .cal-fstrip .select { inline-size: 172px; min-inline-size: 172px; flex: 0 0 172px; }

/* filter row: five equal dropdowns + the clear button fit one row next to the search field */
.cal-fstrip .cal-bbtn, .cal-fstrip .cselect, .cal-fstrip .select { inline-size: 152px; min-inline-size: 152px; flex: 0 0 152px; }
.cal-fstrip .cal-fclear { min-block-size: var(--ctl); min-inline-size: 0; flex: 0 0 auto; padding-inline: var(--sp-3); }
.cal-fsearch { flex: 1 1 160px; }

/* the small buttons in the comments header: shorter and smaller */
.cm-feed-head .btn.btn-sm, .cm-feed-head .details-btn, .cm-feed-head .sort-btn { min-block-size: var(--sp-8); block-size: var(--sp-8); padding-inline: var(--sp-2); gap: var(--sp-1); font-size: var(--fs-xs); }
.cm-feed-head .btn i { font-size: var(--fs-xs); }
.cm-feed-head .tl-q { inline-size: var(--sp-8); block-size: var(--sp-8); font-size: var(--fs-xs); }
.tl-pop[hidden] { display: none; }
#calPriBox .cal-bbtn, #calStBox .cal-bbtn { inline-size: 124px; min-inline-size: 124px; flex-basis: 124px; padding-inline: var(--sp-3); }
#calPriBox, #calStBox { flex: 0 0 124px; }

#calPriBox .cal-bpop, #calStBox .cal-bpop { inline-size: max(100%, 168px); }
#calPriBox .cal-bhead .btn, #calStBox .cal-bhead .btn { padding-inline: var(--sp-2); }

#calPriBox .cal-bbtn, #calStBox .cal-bbtn { inline-size: 134px; min-inline-size: 134px; flex-basis: 134px; padding-inline: var(--sp-2) var(--sp-3); }
#calPriBox, #calStBox { flex: 0 0 134px; }
#calPriBox .cal-bpop, #calStBox .cal-bpop { inline-size: max(100%, 188px); }

.cmt-reply-box { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-3); }

/* week / five-day column header: always one line */
.cal-col-h { flex-wrap: nowrap; white-space: nowrap; gap: var(--sp-1); padding-inline: var(--sp-2); }
.cal-col-h > span:first-child { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-col-h b { flex: none; }
.cal-cnt { flex: none; margin-inline-start: auto; min-inline-size: var(--sp-5); padding-inline: var(--sp-1); border-radius: var(--r-full); background: color-mix(in srgb, currentColor 12%, transparent); text-align: center; line-height: var(--sp-5); }
.cal-cnt:empty { display: none; }

.cal-cnt { min-inline-size: var(--sp-4); padding-inline: 0; line-height: var(--sp-4); }
.cal-col-h { padding-inline: var(--sp-2); }
.cal-col-h b { font-size: var(--fs-sm); }

/* inline reply box: toolbar like the main comment box (same order, muted icons, 32 px), a centred send button */
.cmt-reply-box .row.between { align-items: center; }
.cmt-reply-box .btn-icon { inline-size: var(--sp-8); block-size: var(--sp-8); min-block-size: 0; padding: 0; color: var(--muted); background: none; }
.cmt-reply-box .btn-icon:hover { color: var(--primary); background: var(--surface); }
.cmt-reply-box .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-inline-size: 112px; padding-inline: var(--sp-4); box-shadow: none; }
.cmt-reply-box .btn-primary i { font-size: var(--fs-sm); line-height: 1; }
.cmt-reply-box .btn-primary .lbl { line-height: 1; }
.cmt-reply-box .btn-ghost.btn-sm:not(.btn-icon) { color: var(--text-2); }
/* send-reply button: icon + label centred in the blue button, both ways */
.cmt-reply-box .btn-primary { min-inline-size: 0; padding-block: 0; padding-inline: var(--sp-4); min-block-size: var(--sp-8); block-size: var(--sp-8); justify-content: center; align-items: center; gap: var(--sp-2); text-align: center; }
.cmt-reply-box .btn-primary i, .cmt-reply-box .btn-primary .lbl { display: block; margin: 0; padding: 0; line-height: var(--sp-5); block-size: var(--sp-5); }
.cmt-reply-box .btn-primary i { inline-size: var(--sp-4); text-align: center; }
.cmt-reply-box .btn-primary .spin { display: none; }
.cmt-reply-box .btn-primary.loading .spin { display: inline-block; }

.mc-row.mc-go { cursor: pointer; border-radius: var(--r-sm); transition: background var(--t-fast); }
.mc-row.mc-go:hover { background: var(--surface-2); }
.mc-row.mc-go:focus-visible { outline: none; box-shadow: var(--ring); }

/* «ثبت نظر»: icon and label centred in the blue button, both ways */
.cm-composer .send { align-items: center; justify-content: center; padding-block: 0; }
.cm-composer .send i, .cm-composer .send .lbl { display: block; margin: 0; padding: 0; line-height: var(--sp-5); block-size: var(--sp-5); }
.cm-composer .send i { inline-size: var(--sp-4); text-align: center; }
.cm-composer .send .spin { display: none; }
.cm-composer .send.loading .spin { display: inline-block; }

/* a mirror card has a strip on top, so its cover is no longer the first thing: no overlap with the strip, square top corners */
.kcard.mirror > .mc-strip:has(+ .kcover) { margin-block-end: 0; }
.kcard.mirror > .mc-strip + .kcover { margin-block-start: 0; border-radius: 0; }
/* the same in the card dialog: the mirror ribbon is the top, so the cover below it has square corners */
.mc-ribbon + .cm-cover { border-radius: 0; }

/* mirror strip / ribbon: a slow soft shimmer sweeps across, right to left (transform only, off for reduced motion) */
.kcard.mirror > .mc-strip, .mc-ribbon { position: relative; overflow: hidden; }
.kcard.mirror > .mc-strip::after, .mc-ribbon::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 40%; background: linear-gradient(80deg, transparent, color-mix(in srgb, var(--surface) 45%, transparent), transparent); transform: translateX(120%); animation: mc-shimmer 12s ease-in-out 1s infinite; pointer-events: none; }
@keyframes mc-shimmer { 0% { transform: translateX(120%); } 60%, 100% { transform: translateX(-320%); } }
@media (prefers-reduced-motion: reduce) { .kcard.mirror > .mc-strip::after, .mc-ribbon::after { animation: none; display: none; } }
/* dashboard «صندوق ورودی» panel */
.dib-add { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.dib-add .input { flex: 1; min-inline-size: 0; }
.dib-list { display: flex; flex-direction: column; padding-block-end: var(--sp-2); min-block-size: calc(var(--sp-10) * 2); }
.dib-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-5); min-block-size: var(--ctl); border-block-start: 1px solid var(--border); }
.dib-row:first-child { border-block-start: 0; }
.dib-row { cursor: pointer; transition: background var(--t-fast); }
.dib-row:hover, .dib-row:focus-visible { background: var(--surface-2); outline: none; }
.dib-src { color: var(--muted); flex: none; }
.dib-flag { flex: none; font-size: var(--fs-xs); } /* small grey pin after the title; an urgent item gets a red line on the row's start (right) side instead of an icon */
.dib-flag.pin { color: var(--muted); }
.dib-row { border-inline-start: 3px solid transparent; }
.dib-row.urgent { border-inline-start-color: var(--danger); }
.dib-t { flex: 1; min-inline-size: 0; color: var(--text); text-decoration: none; }
.dib-list .empty { padding: var(--sp-5); }
/* «نسخه‌ی جدید» dialog: the logout look with an arrow in the circle */
.ud-core { fill: var(--primary); transition: transform var(--t-med) var(--ease); transform-box: fill-box; transform-origin: center; }
.ud-arrow { fill: none; stroke: var(--on-primary); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; animation: ud-bob 2.4s ease-in-out infinite; }
.lv-back.bye .ud-core { transform: scale(1.12); }
.lv-back.bye .ud-arrow { animation: none; }
.ud-acts { grid-template-columns: minmax(0, 1fr); }
.lv-txt .ltr { margin-block-start: var(--sp-1); }
@keyframes ud-bob { 0%, 100% { transform: translateY(calc(var(--sp-1) * -.5)); } 50% { transform: translateY(var(--sp-1)); } }
.dib-row a, .dib-row a:hover, a.ib-bot, a.ib-bot:hover { text-decoration: none; }
/* logout dialog: blue circle with a waving goodbye hand (like the update dialog's circle); «خروج» turns it into the green check */
.lv-art { position: relative; }
.lv-core { fill: var(--primary); opacity: 1; transform: none; transition: transform var(--t-med) var(--ease), fill var(--t-med); }
.lv-back.bye .lv-core { fill: var(--success); opacity: 1; transform: scale(1.12); }
.lv-hand-w { position: absolute; inset-inline: 0; margin-inline: auto; inline-size: var(--sp-8); block-size: var(--sp-8); inset-block-start: calc(50% + var(--sp-2)); translate: 0 -50%; display: grid; place-items: center; color: var(--on-primary); font-size: var(--fs-xl); line-height: 1; pointer-events: none; transition: opacity var(--t-fast); }
.lv-hand-i { display: block; transform-origin: 60% 90%; animation: lv-bye-wave 1.4s ease-in-out infinite; }
.lv-back.bye .lv-hand-w { opacity: 0; }
@keyframes lv-bye-wave { 0%, 100% { transform: rotate(-8deg); } 25% { transform: rotate(18deg); } 50% { transform: rotate(-8deg); } 75% { transform: rotate(18deg); } }
/* update dialog: the version under the text, grey and centred */
.ud-ver { text-align: center; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-ui); }
/* inbox: bulk selection */
.ib-all { display: grid; place-items: center; inline-size: var(--ctl); block-size: var(--ctl); cursor: pointer; }
.ib-chk, .ib-all input { inline-size: var(--sp-5); block-size: var(--sp-5); accent-color: var(--primary); cursor: pointer; flex: none; }
.ib-row.sel { background: var(--primary-soft); }
.ib-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--primary-soft); border-block-end: 1px solid var(--border); position: sticky; inset-block-start: 0; z-index: 5; }
/* dialog circle: the brand blue with a white hand / arrow in both themes (the dark theme's on-primary is near-black) */
:root { --on-brand: #fff; }
.lv-core, .ud-core { fill: var(--brand-500); }
.lv-back.bye .lv-core { fill: var(--success); }
.lv-hand-w { color: var(--on-brand); }
.ud-arrow { stroke: var(--on-brand); }
/* the goodbye hand is the waving-hand emoji now (same one the dashboard greeting uses) */
.lv-hand-w { font-size: var(--fs-2xl); }
.lv-hand-i { transform-origin: 70% 85%; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
/* Admin → بردهای پیش‌ساخته → ورود و خروج */
.io-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.io-note { margin: 0; padding: 0 var(--sp-5) var(--sp-4); }

/* update dialog: after «به‌روزرسانی» the button stays visible (busy) instead of vanishing */
.lv-back.bye .ud-acts { opacity: 1; }
.ud-acts .btn:disabled { opacity: 1; cursor: progress; }
.ud-acts .btn.loading > i { display: none; }

/* bots help: one column; numbered steps with copyable code blocks */
.help-grid.one { grid-template-columns: minmax(0, 1fr); }
.help-steps { display: grid; gap: var(--sp-4); }
.help-steps > li { line-height: var(--lh-body); }
.help-code { margin: var(--sp-2) 0 0; padding: var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: var(--lh-ui); white-space: pre-wrap; direction: ltr; text-align: left; overflow-x: auto; user-select: all; }.help-steps { list-style-type: persian; padding-inline-start: var(--sp-6); }
.help-grid .tpl-help-list { list-style-type: persian; }

/* bots page: relay code generator */
[data-relay-pane] { display: grid; gap: var(--sp-4); } /* steps, code box and «نشانی Worker شما» field no longer touch each other */
[data-relay-pane][hidden] { display: none; }
.relay-code { position: relative; }
.relay-copy { position: absolute; inset-block-start: var(--sp-1); inset-inline-start: var(--sp-1); background: var(--surface-2); }
.relay-code pre { margin: 0; padding: var(--sp-3) var(--sp-4); padding-inline-end: calc(var(--ctl) + var(--sp-2)); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); overflow-x: auto; font-size: var(--fs-xs); line-height: 1.7; text-align: left; white-space: pre; }
.relay-steps { display: grid; gap: var(--sp-4); }
.relay-step { display: grid; gap: var(--sp-2); }
.relay-step p { margin: 0; }
/* update dialog button: icon + label centred in the button, both ways */
.ud-acts .btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding-block: 0; text-align: center; }
.ud-acts .btn i, .ud-acts .btn .lbl { display: block; margin: 0; padding: 0; line-height: var(--sp-5); block-size: var(--sp-5); }
.ud-acts .btn i { inline-size: var(--sp-4); text-align: center; }
.ud-acts .btn .spin { display: none; }
.ud-acts .btn.loading .spin { display: inline-block; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }

.opt-group { display: grid; gap: var(--sp-3); }
.help-tip { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--primary-soft); border-radius: var(--r); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* help panels: headings and definition lists also outside .help-grid (bots page) */
.help-body > h4 { margin: var(--sp-3) 0 0; font-size: var(--fs-base); }
.help-body > dl { margin: 0; display: grid; gap: var(--sp-3); }
.help-body > dl dt { font-weight: 700; font-size: var(--fs-sm); }
.help-body > dl dd { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body); padding-inline-start: var(--sp-3); border-inline-start: 2px solid var(--border); }
.ud-acts .btn .lbl.ud-wait { min-inline-size: calc(var(--sp-10) * 2); text-align: start; }

.ud-acts .btn .spin, .ud-acts .btn.loading .spin { display: none; }

/* update button while updating: only the spinner, centred */
.ud-acts .btn.ud-busy .lbl, .ud-acts .btn.ud-busy i { display: none; }
.ud-acts .btn.ud-busy .spin { display: inline-block; margin: 0; }

/* bots page: recent events list */
.bl-list { display: grid; }
.bl-row { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-block-start: 1px solid var(--border); }
.bl-row:first-child { border-block-start: 0; }
.bl-ic { display: grid; place-items: center; flex: none; inline-size: var(--ctl); block-size: var(--ctl); border-radius: var(--r-full); background: var(--surface-2); color: var(--primary); }
.bl-main { display: grid; gap: var(--sp-1); min-inline-size: 0; flex: 1; }
.bl-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.bl-time { margin-inline-start: auto; }
.bl-text { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bl-err { color: var(--danger); }
.cm-feed-head .tl-q { display: inline-grid; place-items: center; font-size: var(--fs-sm); }
.tl-q i { font-size: inherit; line-height: 1; }

.rz-sub { margin-block-start: calc(var(--sp-1) * -1); color: var(--muted); font-size: var(--fs-sm); }
/* ---- week / 5 days as rows (one row per day, compact chips) ---- */
.cal-rows { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cal-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); border-block-end: 1px solid var(--border); transition: background var(--t-fast); }
.cal-row:last-child { border-block-end: 0; }
.cal-row.today { background: var(--primary-soft); }
.cal-row.fri .cal-row-wd { color: var(--danger); }
.cal-row-date { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--sp-3) var(--sp-4); border-inline-end: 1px solid var(--border); min-inline-size: 0; }
.cal-row-wd { font-size: var(--fs-xs); color: var(--text-2); }
.cal-row-num { display: flex; align-items: baseline; gap: var(--sp-1); font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-head); }
.cal-row-num small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.cal-row.today .cal-row-num { color: var(--primary); }
.cal-row-date .cal-cnt { align-self: flex-start; margin: 0; min-inline-size: var(--sp-5); padding-inline: var(--sp-1); line-height: var(--sp-5); }
.cal-row.today .cal-row-date .cal-cnt { background: var(--primary); color: var(--on-primary); }
.cal-row-body { display: flex; align-items: center; min-block-size: 76px; padding: var(--sp-3) var(--sp-4); min-inline-size: 0; }
.cal-row-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); inline-size: 100%; }
.cal-row-empty { color: var(--muted); font-size: var(--fs-sm); }
.cal-shell .cal-card.rowchip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-1) var(--sp-3); min-block-size: var(--ctl-sm); max-inline-size: 100%; }
.cal-shell .cal-card.rowchip:hover { background: var(--surface); border-color: var(--border-strong); }
.cal-rt { display: flex; align-items: baseline; gap: var(--sp-2); min-inline-size: 0; }
.cal-rt b { font-size: var(--fs-sm); font-weight: 700; min-inline-size: 0; }
.cal-rt small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.cal-shell .cal-card.rowchip.done b { color: var(--muted); text-decoration: line-through; }
.cal-row.drop-over { box-shadow: inset 0 0 0 2px var(--primary); }
@media (max-width: 640px) {
  .cal-row { grid-template-columns: minmax(0, 1fr); }
  .cal-row-date { flex-direction: row; align-items: center; gap: var(--sp-3); border-inline-end: 0; border-block-end: 1px solid var(--border); padding: var(--sp-2) var(--sp-4); }
  .cal-row-date .cal-cnt { margin-inline-start: auto; }
  .cal-row-body { min-block-size: 0; }
}

/* ---- Gantt chart ---- */
.cal-gt { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); isolation: isolate; clip-path: inset(0 round var(--r)); } /* sticky label cells sit on their own layers and can paint over a plain overflow + radius clip: clip-path rounds them reliably */
.cal-gt-grid { --lab: 200px; position: relative; display: grid; grid-template-columns: var(--lab) calc(var(--n) * var(--w)); min-inline-size: calc(var(--lab) + var(--n) * var(--w)); background: var(--surface); }
.cal-gt-lab { position: sticky; inset-inline-start: 0; z-index: 2; display: grid; align-content: center; gap: 2px; min-block-size: var(--sp-11); padding: var(--sp-1) var(--sp-3); background: var(--surface); color: var(--text); text-decoration: none !important; border-inline-end: 1px solid var(--border); border-block-end: 1px solid var(--border); min-inline-size: 0; }
a.cal-gt-lab:hover { background: var(--surface-2); }
.cal-gt-lab small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.cal-gt-lt { font-size: var(--fs-sm); line-height: var(--lh-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-gt-lab.done .cal-gt-lt { color: var(--muted); text-decoration: line-through; }
.cal-gt-corner { background: var(--surface-2); font-size: var(--fs-xs); color: var(--muted); }
.cal-gt-grp { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--sp-2); background: var(--surface-2); min-block-size: var(--ctl-sm); font-size: var(--fs-sm); }
.cal-gt-days { display: grid; grid-template-columns: repeat(var(--n), var(--w)); background: var(--surface-2); border-block-end: 1px solid var(--border); }
.cal-gt-d { display: grid; place-items: center; align-content: center; min-block-size: var(--sp-11); border-inline-end: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); }
.cal-gt-d b { font-size: var(--fs-sm); color: var(--text); }
.cal-gt-d.fri small, .cal-gt-d.fri b { color: var(--danger); }
.cal-gt-d.today { background: var(--primary-soft); } .cal-gt-d.today b { color: var(--primary); }
.cal-gt-d.first { border-inline-start: 2px solid var(--border-strong); }
.cal-gt-lane { position: relative; min-block-size: var(--sp-11); border-block-end: 1px solid var(--border); background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--w) - 1px), var(--border) calc(var(--w) - 1px), var(--border) var(--w)); }
.cal-gt-lane-grp { min-block-size: var(--ctl-sm); background-color: var(--surface-2); }
.cal-gt-bar { position: absolute; inset-block: var(--sp-3); inset-inline-start: calc(var(--s) * var(--w) + 2px); inline-size: calc(var(--l) * var(--w) - 4px); display: flex; align-items: center; justify-content: flex-start; padding-inline: var(--sp-2); border-radius: var(--r-sm); color: #fff !important; font-size: var(--fs-xs); box-shadow: var(--shadow-sm); text-decoration: none !important; }
.cal-gt-bar:hover { filter: brightness(1.08); }
.cal-gt-bar:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-gt-bar.done { opacity: .5; }
/* RTL: time starts at the right (inline-start) and ends at the left (inline-end). A bar cut off by the range is square on the cut side only. */
.cal-gt-bar.cut-s { border-start-start-radius: 0; border-end-start-radius: 0; } .cal-gt-bar.cut-e { border-start-end-radius: 0; border-end-end-radius: 0; }
.cal-gt-today { position: absolute; inset-block: 0; inset-inline-start: calc(var(--lab) + var(--s) * var(--w) + var(--w) / 2 - 1px); inline-size: 2px; background: var(--primary); opacity: .7; pointer-events: none; z-index: 1; }
.cal-gt-none { grid-column: 1 / -1; padding: var(--sp-8); text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.cal-seg button { padding-inline: var(--sp-3); }
@media (max-width: 640px) { .cal-gt-grid { --lab: 132px; } .cal-gt-lab { padding-inline: var(--sp-2); } }
/* Gantt: drag bars (move / resize ends) and drag the chart to scroll */
.cal-gt-lane, .cal-gt-days { cursor: grab; }
.cal-gt.panning, .cal-gt.panning * { cursor: grabbing !important; user-select: none; }
.cal-gt-bar.editable { cursor: grab; touch-action: none; }
.cal-gt.dragging-bar, .cal-gt.dragging-bar * { cursor: grabbing !important; user-select: none; }
.cal-gt-h { position: absolute; inset-block: 0; inline-size: var(--sp-2); cursor: ew-resize; }
.cal-gt-h.s { inset-inline-start: 0; } .cal-gt-h.e { inset-inline-end: 0; }
.cal-gt-h::after { content: ""; position: absolute; inset-block: var(--sp-1); inset-inline: 3px; border-radius: var(--r-full); background: rgb(255 255 255 / .7); opacity: 0; transition: opacity var(--t-fast); }
.cal-gt-bar:hover .cal-gt-h::after, .cal-gt-bar:focus-visible .cal-gt-h::after, .dragging-bar .cal-gt-h::after { opacity: 1; }
.cal-gt-bar.cut-s .cal-gt-h.s, .cal-gt-bar.cut-e .cal-gt-h.e { display: none; }
/* the card count in a row's date block: smaller */
.cal-row-date .cal-cnt { font-size: calc(var(--fs-xs) - 1px); min-inline-size: var(--sp-4); line-height: var(--sp-4); }
/* Gantt zoom: toolbar, hour ticks, pixel-based bars */
.cal-gt-wrap { display: grid; gap: var(--sp-2); min-inline-size: 0; }
.cal-gt-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cal-gt-zl { min-inline-size: var(--sp-10); padding-inline: var(--sp-2); text-align: center; font-size: var(--fs-sm); }
.cal-gt-hint { flex: 1 1 200px; }
.cal-gt-bar { inset-inline-start: var(--x, 0px) !important; inline-size: var(--bw, var(--w)) !important; }
.cal-gt-today { inset-inline-start: calc(var(--lab) + var(--x, 0px) - 1px) !important; }
.cal-gt-grid.fine .cal-gt-lane { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--hp) - 1px), color-mix(in srgb, var(--border) 55%, transparent) calc(var(--hp) - 1px), color-mix(in srgb, var(--border) 55%, transparent) var(--hp)), repeating-linear-gradient(to right, transparent 0, transparent calc(var(--w) - 1px), var(--border) calc(var(--w) - 1px), var(--border) var(--w)); }
.cal-gt-d { position: relative; padding-block-end: var(--sp-4); }
.cal-gt-grid.fine .cal-gt-d { padding-block-end: var(--sp-5); }
.cal-gt-hrs { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--sp-4); }
.cal-gt-hrs i { position: absolute; inset-inline-start: calc(var(--k) * var(--w) / 24 + 2px); font-style: normal; font-size: var(--fs-xs); color: var(--muted); line-height: var(--sp-4); }

/* developer popup: the logo sits in an Instagram-style ring (yellow #f9ce34 → pink #ee2a7b → purple #6228d7) that turns slowly, plus a thin light-grey outer ring */
.rz-top .dev-ring { --ig-a: #f9ce34; --ig-b: #ee2a7b; --ig-c: #6228d7; position: relative; display: block; inline-size: calc(var(--sp-10) * 3 + var(--sp-2)); block-size: calc(var(--sp-10) * 3 + var(--sp-2)); border-radius: 50%; margin-block-end: calc(var(--sp-10) * -1); box-shadow: 0 0 0 var(--sp-1) var(--surface), 0 0 0 calc(var(--sp-1) + 1px) var(--border-strong), var(--shadow); }
.dev-ring .dev-spin { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--ig-a), var(--ig-b), var(--ig-c), var(--ig-b), var(--ig-a)); animation: dev-turn 6s linear infinite; }
.dev-ring img { position: absolute; inset: calc(var(--sp-1) * .75); inline-size: calc(100% - var(--sp-1) * 1.5); block-size: calc(100% - var(--sp-1) * 1.5); border-radius: 50%; border: var(--sp-1) solid var(--surface); object-fit: cover; background: var(--surface); }
@keyframes dev-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dev-ring .dev-spin { animation: none; } }
/* system info thumbnail: the developer logo on the soft primary colour (the logo's white square blends into it) */
.avatar.img.sys-robot { background: var(--primary-soft); }
.sys-robot img { mix-blend-mode: multiply; }
/* dark theme: the logo is dark ink on white, so flip it to light ink and let «screen» drop the (now black) square into the background */
:root[data-theme="dark"] .sys-robot img { filter: invert(1); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sys-robot img { filter: invert(1); mix-blend-mode: screen; } }

/* Gantt drop marker: a line at the time under the pointer (a day-wide band when zoomed out) */
.cal-gt-drop { position: absolute; inset-block: 0; inset-inline-start: calc(var(--lab) + var(--x, 0px)); inline-size: 2px; background: var(--primary); pointer-events: none; z-index: 3; }
.cal-gt-drop.day { inline-size: var(--w); background: color-mix(in srgb, var(--primary) 18%, transparent); border-inline: 1px solid var(--primary); }
.cal-gt-drop[hidden] { display: none; }

/* Gantt drop: start + deadline dialog */
.sch { display: grid; gap: var(--sp-3); min-inline-size: min(360px, 78vw); }
.sch-row { display: flex; align-items: center; gap: var(--sp-3); }
.sch-l { flex: 0 0 var(--sp-10); font-size: var(--fs-sm); color: var(--text-2); }
.sch-btn { flex: 1; min-inline-size: 0; justify-content: flex-start; text-align: start; gap: var(--sp-2); }
.sch-btn i { flex: none; inline-size: var(--sp-4); text-align: center; color: var(--muted); }
.sch-v { flex: 1; text-align: start; unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sch .err { color: var(--danger); font-size: var(--fs-sm); min-block-size: var(--sp-5); }

/* workspaces */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.ws-card { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); color: inherit; text-decoration: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.ws-card:hover, .ws-card:focus-visible { border-color: var(--primary); box-shadow: var(--shadow); text-decoration: none; outline: none; }
.ws-ic { display: grid; place-items: center; flex: none; inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: var(--r); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-lg); }
.ws-tx { display: grid; gap: var(--sp-1); min-inline-size: 0; flex: 1; }
.ws-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ws-add { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
.ws-add .input { flex: 1 1 200px; min-inline-size: 0; }
.ws-add .select { width: auto; flex: 0 0 160px; }
.ws-badge { margin-inline-start: var(--sp-2); }
.ws-counts { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.tile-ws { white-space: nowrap; }

.help-body > .table-wrap { border: 1px solid var(--border); border-radius: var(--r); }
.tm-work { margin-block-start: var(--sp-1); }
.tm-work i { color: var(--muted); }

/* Gantt: outside the person's working time (days; hours when zoomed in) is dimmed in each board's lanes */
.cal-gt-grid { --gt-off: color-mix(in srgb, var(--success) 10%, transparent); }
.cal-gt-lane::before { content: ''; position: absolute; inset: 0; background: var(--off, none); pointer-events: none; }
.cal-gt-key { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl); font-size: var(--fs-sm); color: var(--text); margin-inline-start: auto; cursor: pointer; }
.cal-gt-zl { inline-size: 96px; padding-inline: 0; white-space: nowrap; flex: none; } /* fixed width: the buttons stay put while the zoom name changes */
.cal-gt-tools > .btn { flex: none; }
.cal-gt-info { flex: none; }
.cal-gt-info .tl-q { display: inline-grid; place-items: center; inline-size: var(--sp-8); block-size: var(--sp-8); font-size: var(--fs-sm); background: none; color: var(--muted); transition: background var(--t-fast), color var(--t-fast); }
.cal-gt-info .tl-q:hover, .cal-gt-info .tl-q[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary); }
.cal-gt-info .tl-q:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-gt-info .tl-pop { inset-inline-start: 0; inset-inline-end: auto; max-inline-size: calc(100vw - var(--sp-8)); }
.cal-gt-info .tl-pop i { flex: none; inline-size: var(--sp-4); text-align: center; color: var(--muted); }
/* working-time editor: one row per day */
.wt-grid { display: grid; gap: var(--sp-2); }
.wt-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
.wt-row.off .input { opacity: .5; }
.wt-day { min-block-size: var(--ctl); }
@media (max-width: 480px) { .wt-row { grid-template-columns: 1fr 1fr; } .wt-row .wt-day { grid-column: 1 / -1; } .wt-row > span { display: none; } }
/* workspaces pages: as wide as the content next to the admin side menu (e.g. /admin/teams) */
.settings-width.narrow { max-inline-size: calc(1120px - 248px - var(--sp-6)); }

/* inbox empty state: title and hint on their own lines */
#ibEmpty { display: grid; justify-items: center; gap: var(--sp-1); text-align: center; }
#ibEmpty[hidden] { display: none; }
#ibEmpty b { font-size: var(--fs-base); color: var(--text); }

/* workspace icon picker */
.ws-icgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--sp-2); }
.ws-icgrid.collapsed { max-block-size: calc(var(--ctl) * 3 + var(--sp-2) * 2); overflow: hidden; }
.ws-icgrid + .btn { margin-block-start: var(--sp-2); }
.ws-icopt { inline-size: 100%; block-size: var(--ctl); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text-2); font-size: var(--fs-md); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.ws-icopt:hover { border-color: var(--primary); color: var(--primary); }
.ws-icopt[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.ws-icopt:focus-visible { outline: none; box-shadow: var(--ring); }

.ws-mini { color: var(--muted); font-size: var(--fs-xs); margin-inline-end: var(--sp-1); }

/* ---- licence page ---- */
.lic-bar { flex: 0 0 min(40%, 240px); }
.progress > i.near { background: var(--warn); }
.progress > i.full { background: var(--danger); }
.lic-drop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-6) var(--sp-4); border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); color: var(--text-2); text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.lic-drop > i { font-size: var(--fs-xl); color: var(--primary); }
.lic-drop:hover, .lic-drop.on { border-color: var(--primary); background: var(--primary-soft); }
.nocopy, [data-nocopy] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lic-terms { padding: var(--sp-4) var(--sp-5); line-height: var(--lh-body); }
.lic-terms p { margin: 0 0 var(--sp-3); }
.lic-terms ul { margin: 0; padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-2); }
.lic-contact { padding: 0 var(--sp-5) var(--sp-4); } /* shortcut to the developer dialog under the terms */
@media print { [data-nocopy] { display: none; } }
.lic-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); line-height: var(--lh-body); }
.lic-banner.danger { background: var(--danger-soft); color: var(--danger); }
.lic-banner a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ---- reset page ---- */
.rs-row { cursor: pointer; }
.rs-ic { color: var(--text-2); margin-inline-end: var(--sp-1); }
.rs-c { display: flex; align-items: center; gap: var(--sp-3); }
.rs-cb { inline-size: var(--sp-5); block-size: var(--sp-5); accent-color: var(--danger); cursor: pointer; }
.rs-row.forced { background: var(--warn-soft); }
.rs-needs { display: block; color: var(--warn); font-size: var(--fs-sm); }
.rs-bar { position: sticky; inset-block-end: var(--sp-4); z-index: 5; box-shadow: var(--shadow-lg); }

/* ---- board countdown: ring + short text in the board bar (exact time in the tooltip), the bar after the deadline, the settings tab and the blocked page ---- */
.cd-timer { --cd-bg: rgb(255 255 255 / .2); --cd-fg: #fff; position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 36px; padding-inline: var(--sp-2) var(--sp-3); border-radius: var(--r-full); background: var(--cd-bg); color: var(--cd-fg); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; }
.cd-timer[hidden] { display: none; }
.board-bar { position: relative; z-index: 30; } /* the timer's tooltip hangs below the bar and must paint over the columns */
.cd-timer[data-st="warn"] { --cd-bg: var(--warn-soft); --cd-fg: var(--warn); }
.cd-timer[data-st="urgent"] { --cd-bg: var(--danger-soft); --cd-fg: var(--danger); }
.cd-timer[data-st="done"] { --cd-bg: var(--danger); --cd-fg: var(--on-primary); }
.cd-timer:focus-visible { outline: none; box-shadow: var(--ring); }
.cd-timer svg { inline-size: 26px; block-size: 26px; flex: none; transform: rotate(-90deg); }
.cd-timer circle { fill: none; stroke: currentColor; stroke-width: 4; }
.cd-timer .trk { opacity: .25; }
.cd-timer .val { stroke-linecap: round; transition: stroke-dashoffset .6s linear; }
.cd-timer[data-st="done"] svg { display: none; } /* expired: text only, no ring and no pulse */
.cd-timer[data-st="done"] { padding-inline: var(--sp-3); }
.cd-timer[data-st="urgent"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--cd-fg); opacity: 0; pointer-events: none; animation: cd-pulse 1.6s ease-out infinite; }
@keyframes cd-pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.cd-tip { position: absolute; inset-block-start: calc(100% + var(--sp-2)); inset-inline-start: 0; z-index: 12; inline-size: max-content; max-inline-size: min(280px, 80vw); padding: var(--sp-2) var(--sp-3); border-radius: var(--r); background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: var(--fs-xs); font-weight: 400; line-height: var(--lh-body); white-space: normal; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); pointer-events: none; }
.cd-timer:hover .cd-tip, .cd-timer:focus-visible .cd-tip { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .cd-timer .val, .cd-tip { transition: none; } .cd-timer::after { animation: none !important; } }
.cd-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); border-block: 1px solid var(--border); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.cd-bar[hidden] { display: none; }
.cd-bar.warn { background: var(--warn-soft); color: var(--warn); }
.cd-bar.lock { background: var(--danger-soft); color: var(--danger); }
.cd-bar.info { background: var(--primary-soft); color: var(--primary); }
.cd-timer[data-mode="notice"][data-st="done"] { --cd-bg: var(--primary-soft); --cd-fg: var(--primary); } /* a plain notice ends calmly, not in red */
.cd-chk.is-locked { opacity: .6; cursor: not-allowed; }
.cd-timer .txt { overflow: hidden; text-overflow: ellipsis; max-inline-size: 260px; }
.cd-bar .grow { flex: 1; min-inline-size: 200px; color: var(--text); }
.cd-bar > i { font-size: var(--fs-lg); }
.cdf { gap: var(--sp-4); }
/* the line under the date changes every second: equal-width digits and room for two lines, so it can never wrap on and off and nudge everything below it */
.cd-live { min-block-size: calc(2 * var(--fs-sm) * var(--lh-body)); font-variant-numeric: tabular-nums; }
.cdf .field > label { font-weight: 600; font-size: var(--fs-sm); }
.cd-modes { display: grid; gap: var(--sp-2); }
.cd-mode { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; text-align: start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.cd-mode.on { border-color: var(--primary); background: var(--primary-soft); }
.cd-mode i { margin-block-start: var(--sp-1); color: var(--muted); }
.cd-mode.on i { color: var(--primary); }
.cd-mode b { display: block; font-size: var(--fs-sm); }
.cd-mode span { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body); }
.cd-chk { display: flex; gap: var(--sp-3); align-items: flex-start; min-block-size: 44px; padding-block: var(--sp-2); margin-block: calc(-1 * var(--sp-2)); font-size: var(--fs-sm); line-height: var(--lh-body); cursor: pointer; }
.cd-chk input { flex: none; inline-size: 18px; block-size: 18px; margin: var(--sp-1) 0 0; accent-color: var(--primary); }
.cd-rec { margin-block-start: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--success-soft); color: var(--success); font-size: var(--fs-xs); line-height: var(--lh-body); }
.cd-block { position: fixed; inset-block: var(--topbar-h) 0; inset-inline: 0; z-index: 10; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); overflow-y: auto; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--primary) 60%, #000), color-mix(in srgb, var(--primary) 18%, #000) 72%); }
main.page:has(.cd-block) { animation: none; } /* the page's fade-up transform would become the overlay's containing block and push it down while it plays */
@media (max-width: 860px) { .cd-block { inset-block-end: var(--bottomnav-h); } } /* keep the bottom navigation visible on phones */
.cd-block-card { max-inline-size: 420px; display: grid; justify-items: center; gap: var(--sp-3); text-align: center; color: #fff; }
.cd-block-card h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.4; }
.cd-block-card p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-body); opacity: .92; }
.cd-block-ic { inline-size: 72px; block-size: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: rgb(255 255 255 / .12); color: #ff8a97; }
.cd-block-who, .cd-block-when { font-size: var(--fs-sm) !important; opacity: .75 !important; }
.cd-block-acts { margin-block-start: var(--sp-3); }
.cd-block .btn-primary { background: #fff; color: var(--primary); border-color: #fff; box-shadow: none; }

/* =====================================================================
   Mobile hardening: modals, sheets, touch targets, iOS zoom, small-screen limits
   ===================================================================== */
.modal-back { overscroll-behavior: contain; overflow-x: hidden; } /* scrolling a dialog never scrolls (or reveals) the page under it */
.modal-body { overscroll-behavior: contain; }
.jp { max-inline-size: calc(100vw - 16px); }
.tw-pop.tw-date { max-inline-size: calc(100vw - 16px); }
@supports (height: 100dvh) {
  .modal.full { height: 100dvh; }
  .wz { max-height: calc(100dvh - 90px); }
  .dd-menu { max-height: calc(100dvh - 90px); }
  .matrix-wrap { max-height: calc(100dvh - 220px); }
  .cal-side { max-height: calc(100dvh - var(--topbar-h) - 28px); }
  .pub-board { min-height: 100dvh; }
}
@media (max-width: 860px) {
  /* a phone's dialog covers the whole screen and is opaque, so no part of the page shows, not even while overscrolling */
  .modal-back:not(.center):not(.sheet) { background: var(--surface); backdrop-filter: none; }
  .modal.part { height: 100dvh; }
  /* a small dialog (confirm, rename, pick one…) is a bottom sheet instead of an empty full page */
  .modal-back.sheet { align-items: flex-end; padding: 0; }
  .modal-back.sheet .modal { min-height: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-block-end: env(safe-area-inset-bottom); animation: sheet var(--t-med) var(--ease); }
  .modal-back.center .modal { min-height: 0; border-radius: var(--r-lg); margin-inline: var(--sp-4); inline-size: auto; }
  /* the date picker rests at the bottom of the screen, within thumb reach, and can never run off an edge */
  .jp { position: fixed; left: var(--sp-3) !important; right: var(--sp-3) !important; top: auto !important; bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)) !important; width: auto; max-inline-size: none; z-index: 600; }
  /* inputs at 16px: iOS does not zoom the page when one is focused */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), select, textarea, .select, .input { font-size: 16px !important; }
  /* touch targets of 44px */
  .brand { position: relative; }
  .brand::before { content: ''; position: absolute; inset: -4px; }
  .segmented button, .cal-seg button, .cal-mini-d { min-height: var(--ctl); min-block-size: var(--ctl); }
  .done-note .link-btn, .list-foot .done-note .link-btn { min-block-size: var(--ctl); padding-inline: var(--sp-2); }
  .link-btn { min-block-size: var(--ctl); padding-inline: var(--sp-3); }
  .tpl-link, .tpl-kg-name, .tpl-reset, .tpl-kg-copy { min-block-size: var(--ctl); display: inline-flex; align-items: center; }
  .tpl-link { min-inline-size: var(--ctl); justify-content: center; }
  .matrix tfoot .btn, #rolesDiscard, #saveAllRoles, #tplDiscard, #tplSave { height: auto; min-height: var(--ctl); }
  .ib-split-more::before { inset-inline: -4px; }
  /* the inbox edit dialog's buttons: move + delete on one line, cancel + save sharing the next */
  .ib-foot { gap: var(--sp-2); }
  .ib-foot > .grow { flex: 1 0 100%; block-size: 0; }
  .ib-foot > [data-close], .ib-foot > .btn-primary { flex: 1 1 0; }
}@media (hover: none) { .kbd-hint { display: none; } } /* keyboard shortcuts mean nothing on a touch screen */
@media (max-width: 860px) {
  /* checklist items: tick + text + delete on one line, the date / assignee chips under the text */
  .chk-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-2); row-gap: 0; }
  .chk-item > input { grid-column: 1; grid-row: 1; }
  .chk-item > .chk-edit, .chk-item > .t { grid-column: 2; grid-row: 1; min-inline-size: 0; }
  .chk-item > .del { grid-column: 3; grid-row: 1; }
  .chk-item > .chk-meta { grid-column: 2 / -1; grid-row: 2; margin-inline-start: 0; justify-self: start; padding-block-end: var(--sp-2); }
}@media (max-width: 480px) {
  /* card modal header: status, id and the two icon buttons stay inside the screen (they wrap to a second line only on the very narrowest phones) */
  .cm-head { flex-wrap: wrap; gap: 2px; padding-inline: var(--sp-2); }
  .cm-list, .cm-id { padding-inline: var(--sp-2); }
  .cm-list b { max-inline-size: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}@media (max-width: 400px) { .cm-id > i, .cm-list > i { display: none; } } /* tiny phones: the copy icon and the chevron give way so the close button stays on the first line */
/* =====================================================================
   Mobile fixes, round 2 (from the phone screenshots)
   ===================================================================== */
@media (hover: none) { .ui-tip { display: none !important; } } /* a tapped title never leaves a dark tooltip stuck on the screen */
@media (max-width: 860px) {
  /* a dialog taller than the screen grows with its content (before it was stretched to exactly one screen, so the white box ended mid-scroll and its shadow showed as a grey band) */
  .modal-back { align-items: flex-start; }
  .modal-back.sheet { align-items: flex-end; }
  .modal-back.center { align-items: center; }
  .modal-back[data-under], .modal-back[data-under] .modal, .modal-back[data-under] .modal-body, .modal-back[data-under] .cm-body { overflow: hidden; } /* the dialog under another one is frozen */
  /* card modal */
  .cm-head { flex-wrap: nowrap; }
  .cm-list { min-inline-size: 0; flex: 0 1 auto; }
  .cm-list b { max-inline-size: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .go-board .go-lbl { display: none; }
  .go-board { inline-size: var(--ctl); padding: 0; justify-content: center; }
  .lock-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-2) var(--sp-3); }
  .lock-banner > .btn { grid-column: 1 / -1; justify-self: stretch; }
  /* comment box: one line until it is focused; the card body keeps exactly as much room as the box takes */
  .cm-composer:not(:focus-within) .cm-input-wrap .textarea { height: 48px; min-height: 48px; padding-block-end: var(--sp-3); }
  .cm-composer:not(:focus-within) .cm-input-wrap > .btn { display: none; }
  .cm-body { padding-block-end: calc(var(--cm-comp-h, 120px) + var(--sp-6)); }
}
/* ---- round 2: lists, filters, tables and settings pages on phones ---- */
.d-block { display: block; }
.kcard { flex-shrink: 0; } /* a card never shrinks below its content (mirrored cards were cut at the bottom) */
.fbox-toggle, .fbox-body > [hidden] { display: none; }
.fbox-body { display: contents; }
@media (max-width: 860px) {
  /* board: swipe one list at a time, keep a gap above the bottom menu, tidy bulk-action bar */
  .lists { scroll-snap-type: x mandatory; }
  .list { scroll-snap-stop: always; }
  .page-board .shell { padding-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
  .bulk-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); inset-inline: var(--sp-3); inset-block-end: calc(var(--bottomnav-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
  .bulk-bar > b { grid-column: 1 / 3; order: 0; align-self: center; }
  .bulk-bar > .btn-ghost { order: 1; }
  .bulk-bar > .btn:last-child { order: 2; }
  .bulk-bar > .grow { display: none; }
  .bulk-bar > .btn { order: 3; justify-content: center; min-block-size: var(--ctl); }
  .bulk-bar > .btn-ghost, .bulk-bar > .btn:last-child { order: initial; }
  .bulk-bar > .btn-ghost { order: 1; } .bulk-bar > .btn:last-child { order: 2; }
  /* board tiles: «۵ کارت» / «۲ عضو» stay on one line */
  .board-tile .meta { flex-wrap: wrap; gap: var(--sp-1); }
  .board-tile .meta span { white-space: nowrap; padding-inline: var(--sp-2); }
  /* two header buttons share one row at equal widths */
  .page-head > .row:has(> .btn:nth-child(2)) { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; gap: var(--sp-2); }
  .page-head > .row:has(> .btn:nth-child(2)) > .btn { justify-content: center; }
  /* filters: the search field stays, the dropdowns fold into a box */
  .fbox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .fbox > .input-icon, .fbox > input[type=search], .fbox > .cal-fsearch { flex: 1 1 100%; }
  .fbox-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); inline-size: 100%; justify-content: flex-start; min-block-size: var(--ctl); }
  .fbox-toggle .fbox-caret { margin-inline-start: auto; font-size: var(--fs-xs); transition: transform var(--t-fast); }
  .fbox.fbox-open .fbox-toggle .fbox-caret { transform: rotate(180deg); }
  .fbox-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--primary); }
  .fbox-body { display: none; }
  .fbox.fbox-open .fbox-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); inline-size: 100%; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
  .fbox-body > * { min-inline-size: 0; inline-size: 100%; max-inline-size: none; }
  .fbox-body > .cal-fclear, .fbox-body > [data-lf-clear] { grid-column: 1 / -1; }
  .fbox-body > .cal-bsel { inline-size: 100%; }
  /* calendar week: an empty day is one slim line, days with tasks keep date on the start side and the count on the end */
  .cal-row-date { justify-content: flex-start; }
  .cal-row.is-empty { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .cal-row.is-empty .cal-row-date { border-block-end: 0; padding-block: var(--sp-2); }
  .cal-row.is-empty .cal-row-body { padding: 0 var(--sp-4); justify-content: flex-end; }
  /* task rows (dashboard, my tasks): chips go under the title */
  .mt-row { flex-wrap: wrap; position: relative; row-gap: var(--sp-2); }
  .mt-row > .prio { position: absolute; inset-block: var(--sp-2); inset-inline-end: 0; }
  .mt-row > .grow { flex: 1 1 100%; min-inline-size: 0; }
  /* inbox rows: the arrow and menu buttons go under the text */
  .ib-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .ib-grip { display: none; }
  .ib-acts { grid-column: 3; grid-row: 2; justify-self: start; }
  /* archive rows */
  .arch-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .arch-row > .grow { flex: 1 0 calc(100% - 96px); min-inline-size: 0; }
  .arch-row > .btn { flex: 1 1 calc(50% - var(--sp-2)); justify-content: center; }
  /* board menu: shorter tab bar; automation rules and member rows stack */
  .bm-link { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .bm-side { padding-block: var(--sp-1); }
  .auto-rule { flex-wrap: wrap; }
  .auto-rule-main { flex: 1 1 calc(100% - 72px); }
  .mem-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--sp-2) var(--sp-3); align-items: center; }
  .mem-row > .mem-name { grid-column: 2 / -1; min-inline-size: 0; }
  .mem-row > .cselect { grid-column: 1 / 3; }
  .mem-row .mem-name .ellipsis, .mem-row .mem-name bdi { overflow-wrap: anywhere; }
  /* card-style table rows: label above value */
  table.stack-m td[data-label] { display: grid; justify-content: stretch; justify-items: start; gap: 2px; text-align: start; }
  table.stack-m td.contact .copy { display: block; }
  table.stack-m td.u-act { flex-wrap: wrap; }
  /* settings pages */
  .tpl-row > .row.between { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .tpl-row > .row.between > .row { flex-wrap: wrap; inline-size: 100%; }
  .tpl-row > .row.between > .row > b { flex: 1 1 100%; }
  .tpl-kg, .tpl-kg-name { max-inline-size: 100%; overflow-wrap: anywhere; text-align: start; }
  .panel-foot { flex-wrap: wrap; }
  .panel-foot > .grow { order: -1; flex: 1 1 100%; }
  .pw-mode { flex-direction: column; }
  .pw-mode label { inline-size: 100%; }
  .pgbar-row { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; gap: var(--sp-3); }
  .pgbar .pg-nav { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ctl), 1fr)); inline-size: 100%; gap: var(--sp-2); }
  .pgbar .pg-per, .pgbar .pg-go { justify-content: space-between; }
  .pgbar .pg-per select, .pgbar .pg-go input { inline-size: 100%; max-inline-size: 110px; }
  .rs-bar .srow .c { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); inline-size: 100%; }
  .rs-bar #rsGo { grid-column: 1 / -1; inline-size: 100%; }
  main.page:has(.rs-bar) { padding-block-end: calc(var(--sp-12, 64px) + 160px); }
  /* teams tree: small indent, actions under the name */
  #teamsBox .tree .tree { margin-inline-start: var(--sp-1); }
  #teamsBox .tree .tree > li { padding-inline-start: var(--sp-4); }
  #teamsBox .tree .tree > li::after { width: var(--sp-3); }
  .team-row > .grow { flex: 1 1 calc(100% - 44px); min-inline-size: 0; }
  /* relay / help panels: nothing is wider than its panel (long code scrolls inside its own box) */
  .panel, .panel > *, .panel .srow, .panel .field, .panel .help-inner, .tpl-help-body, .tpl-help-body > *, .relay-code { min-inline-size: 0; max-inline-size: 100%; }
  .relay-code pre { max-inline-size: 100%; }
  .heat-day { display: grid; gap: var(--sp-3); text-align: center; }
  .heat-day-d { font-size: var(--fs-lg); }
}
.heat .hc:not(.none) { cursor: pointer; }
/* attach dialog: a long file name never makes the dialog wider than the screen */
.up-row { min-inline-size: 0; max-inline-size: 100%; }
.up-row > .grow { min-inline-size: 0; }
.cm-pick-files > .up-row { flex: 1 1 100%; }
.up-name { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  /* on-screen keyboard (see --kb in core.js): sheets and full-screen dialogs rise above it, the comment box too */
  .modal-back { padding-block-end: var(--kb, 0px); }
  .cm-composer { bottom: var(--kb, 0px); }
}@media (max-width: 860px) {
  /* reply threads: a small indent for the first levels, none after that, so deep replies keep the whole width */
  .tl-replies { margin-inline-start: 2px; padding-inline-start: var(--sp-2); }
  .tl-replies .tl-replies .tl-replies .tl-replies { margin-inline-start: 0; padding-inline-start: 0; }
  .tl-replies .tl-replies .tl-replies .tl-replies .tl-node::before, .tl-replies .tl-replies .tl-replies .tl-replies .tl-node::after, .tl-replies .tl-replies .tl-replies .tl-replies::before { display: none; }
  .comment .cmt-head { flex-wrap: wrap; }
}@media (max-width: 860px) {
  .fbox-body > .cal-fclear:disabled { display: none; }
  .fbox-body .cal-bsel, .fbox-body .cal-bsel > .btn, .fbox-body .cal-bbtn { inline-size: 100%; max-inline-size: none; }
  .fbox-body .cal-bbtn { justify-content: space-between; }
}@media (max-width: 860px) { .fbox-body .cselect, .fbox-body .cselect-btn { inline-size: 100% !important; max-inline-size: none; flex: 1 1 auto !important; } }@media (max-width: 860px) { .topbar { backdrop-filter: none; background: var(--surface); } } /* a backdrop-filter makes the bar the containing block of the fixed «بیشتر» sheet inside it, which then flew off the top of the screen */
/* theme picker in the phone user menu: a 2x2 grid of labelled choices (light / dark / system / scheduled) */
@media (max-width: 860px) {
  .menu-theme { display: grid !important; gap: var(--sp-2); justify-content: stretch; padding: var(--sp-3); }
  .menu-theme-t { color: var(--muted); font-size: var(--fs-sm); }
  .theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .dd-menu .theme-grid button { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); min-block-size: var(--ctl); padding-inline: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); inline-size: 100%; }
  .dd-menu .theme-grid button i { color: var(--muted); inline-size: var(--sp-4); text-align: center; }
  .dd-menu .theme-grid button.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
  .dd-menu .theme-grid button.on i { color: var(--primary); }
}@media (max-width: 860px) { .dd-menu .theme-grid button span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* Relay helper: the code box never widens its panel (a long IP typed in the field used to push it off-screen) */
#relayBox, #relayBox > *, [data-relay-pane], [data-relay-pane] > * { min-inline-size: 0; max-inline-size: 100%; }
.relay-code { max-inline-size: 100%; overflow: hidden; }
.relay-code pre { max-inline-size: 100%; }

/* Inbox drag: a floating pill follows the pointer; red with a forbidden sign where the row may not be dropped (pinned ↔ unpinned) */
.ib-fly { position: fixed; inset-block-start: 0; left: 0; z-index: 400; display: inline-flex; align-items: center; gap: var(--sp-2); max-inline-size: 280px; min-block-size: var(--ctl-sm); padding-inline: var(--sp-3); border: 1px solid var(--primary); border-radius: var(--r-full); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-ui); pointer-events: none; will-change: transform; }
.ib-fly i { color: var(--primary); flex: none; }
.ib-fly span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-fly .ib-ban { display: none; }
.ib-fly.no { border-color: var(--danger); background: var(--danger-soft, var(--surface)); color: var(--danger); }
.ib-fly.no i { color: var(--danger); }
.ib-fly.no .ib-ban { display: inline-block; }
.ib-fly.no .ib-grab { display: none; }

/* A layer never hands its scroll over to the one beneath */
.modal-back, .cselect-menu, .pop-menu, .emoji-picker, .color-pop, .mention-pop, .tw-pop { overscroll-behavior: contain; }
.modal-back[data-under] { overflow: hidden; }

@media (max-width: 860px) {
  /* inbox: no bot ids, no per-row source icon (the chips above filter by source) */
  .ib-bot bdi, .ib-src, .dib-src { display: none; }
  .ib-row { grid-template-columns: auto minmax(0, 1fr); }
  .ib-acts { grid-column: 2; }
  /* boards: one tile per row */
  .board-grid { grid-template-columns: 1fr; }
  /* filters: an icon button at the end of the search field opens the panel */
  .fbox { flex-wrap: wrap; gap: var(--sp-2); }
  .fbox > .input-icon, .fbox > input[type=search], .fbox > .cal-fsearch { flex: 1 1 0; min-inline-size: 0; max-inline-size: none; }
  .fbox-toggle { position: relative; inline-size: var(--ctl); flex: none; padding: 0; justify-content: center; }
  .fbox-toggle .fbox-lbl, .fbox-toggle .fbox-caret { display: none; }
  .fbox.fbox-open .fbox-toggle { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
  .fbox-dot { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); }
  .fbox-dot[hidden] { display: none; }
  /* dashboard header buttons: «برد جدید» on its own row, the two links share the next */
  .page-head > .row.wrap:has(> .btn-primary) { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; gap: var(--sp-2); }
  .page-head > .row.wrap > .btn-primary { grid-column: 1 / -1; order: -1; }
  .page-head > .row.wrap > .btn { justify-content: center; }
}
@media (max-width: 860px) {
  .fbox-body .cselect, .fbox-body .select, .fbox-body .cal-bsel { min-inline-size: 0 !important; }
}
@media (max-width: 480px) { .fbox.fbox-open .fbox-body { grid-template-columns: minmax(0, 1fr); } } /* a full-width select shows its whole label and cannot touch its neighbour */

.heat-day-n { font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-ui); }

@media (max-width: 860px) { .kcard { touch-action: manipulation; } } /* pan-y on a card stopped a sideways swipe that starts on a card from moving the board to the next column */

/* ---- Mobile fixes, round 3 ---- */
@media (max-width: 860px) {
  /* inbox edit dialog footer: delete + move on one row, cancel and save equal widths on the next */
  .ib-foot { display: grid; grid-template-columns: var(--ctl) 1fr 1fr var(--ctl); gap: var(--sp-2); }
  .ib-foot > .grow { display: none; }
  .ib-foot > .ib-del { grid-column: 1; grid-row: 1; }
  .ib-foot > .btn:first-child { grid-column: 2 / -1; grid-row: 1; justify-content: center; }
  .ib-foot > [data-close] { grid-column: 1 / 3; grid-row: 2; justify-content: center; }
  .ib-foot > .btn-primary { grid-column: 3 / 5; grid-row: 2; justify-content: center; }
  /* inbox page: bots on one row, select-all beside the search, source chips in equal columns */
  .ib-bots { display: grid; grid-template-columns: 1fr 1fr; }
  .ib-bots > .muted { grid-column: 1 / -1; }
  .ib-bots > .ib-bot { justify-content: center; }
  .ib-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
  .ib-tools > .input { grid-column: 2; max-inline-size: none; }
  .ib-tools > .ib-all { grid-column: 1; grid-row: 1; }
  .ib-tools > .ib-chips, .ib-tools > #ibCount { grid-column: 1 / -1; }
  .ib-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ib-chip { padding-inline: var(--sp-1); white-space: nowrap; }
  /* dashboard: panel header keeps its button on the title row; board rows keep the role beside the counts */
  .dash-cols .panel-h { flex-wrap: nowrap; }
  .dash-cols .panel-h .grow { flex: 1 1 0; min-inline-size: 0; }
  .dash-cols .panel-h > .btn { flex: none; }
  .dash-stat .muted { white-space: nowrap; }
  .mt-row.bw-row > .grow { flex: 1 1 0; }
  .bw-row .badge { margin-inline-start: var(--sp-2); }
  /* boards: import / archive sit in one small «⋯» menu on the title row */
  .page-head:has(.bd-head-acts) { flex-wrap: nowrap; }
  .page-head:has(.bd-head-acts) > .row.bd-head-acts { display: flex; inline-size: auto; flex-wrap: nowrap; flex: none; }
  .bd-head-acts .btn { inline-size: var(--ctl); min-inline-size: var(--ctl); padding: 0; justify-content: center; }
  .bd-head-acts .btn-lbl { display: none; }
  /* an empty result counter must not take a slot beside the search field */
  .fbox > [data-lf-count]:empty { display: none; }
  .fbox-body .cal-bsel > .cal-bbtn { inline-size: 100% !important; min-inline-size: 0 !important; max-inline-size: none !important; flex: 1 1 auto !important; }
  /* board menu rules: text on top, the control under it */
  .set-row:has(.stepper) { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .set-row:has(.stepper) .set-text { inline-size: 100%; }
  /* archive and settings tab strips: equal-width grid instead of ragged rows */
  .set-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .set-tabs[aria-label="نوع آیتم‌های بایگانی"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .set-tab { justify-content: center; padding-inline: var(--sp-2); min-inline-size: 0; }
  .set-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .arch-meta > span { display: block; }
  /* template rows: title and link icon on one line, badges under */
  .tpl-row > .row > .row { flex-wrap: wrap; row-gap: var(--sp-1); }
  .tpl-row > .row > .row > b { flex: 1 1 calc(100% - 48px); min-inline-size: 0; }
  /* theme picker: icon above the label so nothing is cut */
  .dd-menu .theme-grid button { flex-direction: column; justify-content: center; gap: var(--sp-1); padding-block: var(--sp-2); min-block-size: 56px; }
  .dd-menu .theme-grid button span { overflow: visible; text-overflow: clip; white-space: normal; text-align: center; line-height: var(--lh-ui); }
}
@media (max-width: 860px) {
  .set-tab > span { white-space: normal; text-align: center; line-height: var(--lh-ui); }
  .set-tab { padding-block: var(--sp-1); }
  .fbox-body .cal-bbtn, .fbox-body .cselect-btn { font-weight: 500; }
}

/* ---- Mobile fixes, round 4 ---- */
@media (max-width: 860px) {
  .set-row:has(.stepper) > .stepper { align-self: flex-start; }
  .set-tab { gap: var(--sp-1); padding-inline: var(--sp-2); }
  .set-tab > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .heat-day-n { font-size: var(--fs-sm); font-weight: 400; line-height: var(--lh-ui); }
}

@media (max-width: 860px) { .set-tabs:not([aria-label="نوع آیتم‌های بایگانی"]) .set-tab { font-size: var(--fs-xs); } }

/* ---- Mobile fixes, round 5 ---- */
.opts { align-content: start; } /* option cards keep their own height when the panel is stretched by its neighbour column */
.prof-fact .ltr { white-space: nowrap; }
.bm-meta .dot { display: none; }
@media (min-width: 861px) { .bm-meta .dot { display: inline; font-style: normal; } }
@media (max-width: 860px) {
  .bm-meta > span { display: block; }
  .prof-fact { gap: var(--sp-2); padding-inline: var(--sp-2); }
}

/* ---- Users page ---- */
.users-filter > input[type=search] { max-inline-size: 340px; }
@media (max-width: 860px) {
  .users-filter { padding: var(--sp-3); }
  .users-filter > input[type=search] { max-inline-size: none; }
  /* user card: only what matters - name, job title, role and workspace, status; edit button in the corner */
  table.stack-m.users-t tr { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-4); }
  table.stack-m.users-t td.u-hide-m { display: none; }
  table.stack-m.users-t td[data-label] { display: block; padding: 0; }
  table.stack-m.users-t td[data-label]::before { content: none; }
  table.stack-m.users-t td.uc-user { padding: 0; padding-inline-end: calc(var(--ctl) * 2 + var(--sp-2)); }
  table.stack-m.users-t td.u-act { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); inline-size: auto; padding: 0; }
  .users-t .badges { gap: var(--sp-1); }
}
@media (max-width: 860px) {
  table.stack-m.users-t td.u-hide-m { display: none !important; }
  table.stack-m.users-t tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  table.stack-m.users-t td.uc-user { flex: 1 0 100%; }
  table.stack-m.users-t td[data-label] { inline-size: auto; }
  .page-head > .row.pg-acts-eq:has(> .btn-primary) > .btn-primary { grid-column: auto; order: 0; }
}

/* ---- Profile: info as two grouped lists (label left, value right), same on desktop and phone ---- */
.srow.col { flex-wrap: nowrap; } /* a wrapping column flex stretched its single line to the panel height and left a blank band under the option cards */
.prof-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.prof-group { display: grid; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.prof-group h4 { padding: var(--sp-2) var(--sp-4); background: var(--surface-2); border-block-end: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-ui); }
.prof-row { display: grid; grid-template-columns: var(--sp-6) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); min-block-size: var(--ctl); padding: var(--sp-1) var(--sp-4); border-block-end: 1px solid var(--border); }
.prof-row:last-child { border-block-end: 0; }
.prof-row > i { color: var(--primary); font-size: var(--fs-sm); text-align: center; }
.prof-k { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
.prof-v { min-inline-size: 0; font-size: var(--fs-sm); font-weight: 600; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-v .ltr { white-space: nowrap; }
.prof-hero > .prof-facts { margin-inline: var(--sp-5); }

@media (max-width: 480px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 860px) {
  /* inbox bulk bar: count, then the main action, then pairs of equal buttons */
  .ib-bulk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .ib-bulk > b, .ib-bulk > .btn-primary { grid-column: 1 / -1; }
  .ib-bulk > .grow { display: none; }
  .ib-bulk > .btn { justify-content: center; min-block-size: var(--ctl); white-space: nowrap; }
  .ib-bulk > .btn-ghost { border: 1px solid var(--border-strong); background: var(--surface); }
}
@media (max-width: 860px) {
  /* the four toggles: icon over label, centred, labels may wrap - equal tiles */
  .ib-bulk > .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) { flex-direction: column; gap: var(--sp-1); min-block-size: 56px; padding-block: var(--sp-2); white-space: normal; text-align: center; line-height: var(--lh-ui); }
}
@media (max-width: 860px) {
  /* bulk bar: the four toggles are icon-only tiles in one row */
  .ib-bulk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ib-bulk > .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) { min-block-size: var(--ctl); padding: 0; }
  .ib-bulk > .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) .ib-lbl { display: none; }
  .ib-bulk > .btn-danger, .ib-bulk > .btn-ghost { grid-column: span 2; }
}
.ib-del .ib-del-lbl { display: none; }
@media (max-width: 860px) {
  /* edit dialog actions: save on top, move under it, then cancel and delete side by side */
  .ib-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .ib-foot > .btn-primary { grid-column: 1 / -1; grid-row: 1; min-block-size: var(--ctl); justify-content: center; }
  .ib-foot > .btn:first-child { grid-column: 1 / -1; grid-row: 2; min-block-size: var(--ctl); justify-content: center; }
  .ib-foot > [data-close] { grid-column: 1; grid-row: 3; min-block-size: var(--ctl); justify-content: center; }
  .ib-foot > .ib-del { grid-column: 2; grid-row: 3; inline-size: auto; min-block-size: var(--ctl); display: inline-flex; gap: var(--sp-2); justify-content: center; border: 1px solid var(--danger); color: var(--danger); background: var(--danger-soft); }
  .ib-foot > .ib-del .ib-del-lbl { display: inline; }
}

/* ---- «فعالیت من»: month names are buttons; one month shows as a calendar-like grid ---- */
.heat-title { gap: var(--sp-2); align-items: center; }
.heat-mname { justify-self: start; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-xs); line-height: var(--lh-ui); cursor: pointer; white-space: nowrap; }
.heat-mname:hover, .heat-mname:focus-visible { color: var(--primary); text-decoration: underline; }
.heat[hidden], .heat-months[hidden] { display: none; }
@media (max-width: 860px) { .heat-mname { min-block-size: var(--ctl); display: inline-flex; align-items: center; } .heat-month .hc { cursor: pointer; } }

/* phone bottom menu: a small dot on «بیشتر» while the inbox has items */
.nav-dot { position: absolute; inset-block-start: var(--sp-1); inset-inline-start: calc(50% + var(--sp-2)); min-inline-size: var(--sp-5); block-size: var(--sp-5); padding-inline: var(--sp-1); display: grid; place-items: center; border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); border: 2px solid var(--surface); box-sizing: content-box; font-size: var(--fs-xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.nav-dot[hidden] { display: none; }

body.nav-open .nav-dot { display: none; } /* the sheet itself lists the inbox with its own count */
/* zoomed month: same coloured dots stretched into pills that fill the box; the box keeps the height of the full chart */
.heat-month { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.heat-month .hc { inline-size: auto; block-size: auto; aspect-ratio: auto; border-radius: var(--r-full); }
.heat-month .hc:hover { outline: 2px solid var(--text-2); outline-offset: 1px; }
@media (max-width: 860px) { .heat-month .hc { cursor: pointer; } }

.heat-title { block-size: var(--sp-6); } /* the reset icon (44px tap area) overflows this row instead of making the box taller */

@media (min-width: 861px) { .userchip { background: var(--surface-2); transition: background var(--t-fast); } } /* desktop: the chip rests as a light-gray pill */
@media (hover: hover) and (min-width: 861px) { .userchip:hover { background: var(--surface-3); } } /* and goes a step darker under the pointer */

/* the board-menu dialog (.full.part) keeps a gap above and below on desktop; the 100dvh rule for full dialogs had overridden its 84vh height */
@supports (height: 100dvh) { .modal.full.part { height: 84dvh; } }
@media (max-width: 860px) { .modal.part { border-radius: 0; width: 100%; } .modal.part .modal-head { border-radius: 0; } .modal.full.part { height: 100dvh; } .modal.full.part .modal-head { padding-block: var(--sp-1); padding-inline: var(--sp-3); } } /* board menu on phones: a slimmer header (close button stays 44px) leaves more room for the content */

/* mirror cards (trial design 2): the strip takes the origin board's colour, a touch darker so white text reads on any colour; the dialog ribbon matches */
.kcard.mirror > .mc-strip { background: color-mix(in srgb, var(--origin) 72%, #0b1020); color: #fff; }
.kcard.mirror > .mc-strip i, .kcard.mirror > .mc-strip b { color: #fff; }
.mc-ribbon { background: color-mix(in srgb, var(--origin, var(--primary)) 72%, #0b1020); }
.kcard.mirror-locked .mc-strip { opacity: .92; }
/* activity chart: hovering a month name fades the days of the other months */
.heat .hc.dim { opacity: .22; transition: opacity var(--t-fast); }
.heat .hc { transition: opacity var(--t-fast); }
@media (prefers-reduced-motion: reduce) { .heat .hc { transition: none; } }

/* calendar header on phones: row 1 = the period title (never breaks), row 2 = arrows + «برو به امروز» (when shown) */
@media (max-width: 860px) {
  .cal-nav { flex-wrap: wrap; }
  .cal-nav h3 { order: -1; flex: 1 1 100%; white-space: nowrap; padding-inline: 0; }
  .cal-nav #calToday { flex: 1 1 0; min-inline-size: 0; min-block-size: var(--ctl); justify-content: center; }
}
/* calendar view switcher (۵ روز / هفته / ماه / گانت) spans the full width on phones, four equal segments */
@media (max-width: 860px) {
  .cal-shead .cal-seg { inline-size: 100%; }
  .cal-shead .cal-seg button { flex: 1 1 0; min-inline-size: 0; padding-inline: var(--sp-1); }
}