/* Laguna Hub — the phase-2 frame and its five looks (spec §4).
   «جوهرة» (jewel) هو الشكل الأساسي، ومعاه «كحلي» و«فاتح» و«دافي» و«ليلي». الصفحة بتاخد شكلها من <html data-theme>.
   Every colour below is a variable copied verbatim from the approved canvas (Main.dc.html, THEMES, v17);
   the rest of the file only uses those variables. Platform colours: Facebook --s1, Instagram --s4,
   Meta (platform unknown) --s5; --s1 never sits next to --s3 (they fail the colour-blindness check).
   Fonts: Almarai (Arabic), Inter (English), Cormorant Garamond for the «Laguna Hub» wordmark only.
   Mobile first: a top bar with a sideways-scrolling section row below 1024px, the sidebar from 1024px. */

/* ── 1. The five looks ─────────────────────────────────────────────────────────── */
html[data-theme="jewel"], html:not([data-theme]) {
  color-scheme: dark;
  --bg: radial-gradient(64rem 28rem at 50% -9rem, rgba(45, 212, 191, 0.22), transparent 70%), radial-gradient(44rem 24rem at 100% -7rem, rgba(14, 165, 233, 0.24), transparent 70%), radial-gradient(36rem 22rem at 0% -5rem, rgba(79, 224, 255, 0.14), transparent 70%), linear-gradient(180deg, #06161E 0, #030B12 34rem, #020609 100%);
  --side: rgba(2, 8, 13, 0.55); --side-line: rgba(255, 255, 255, 0.07); --side-ink: #B9C8CA; --side-muted: #7F9499; --side-act-bg: rgba(45, 212, 191, 0.13); --side-act-ink: #F1F7F7; --side-icon: #E0BE6E; --side-card: rgba(255, 255, 255, 0.045);
  --badge-bg: #D6B061; --badge-ink: #04121A;
  --card: #0D1B24; --soft: #12242E; --line: rgba(255, 255, 255, 0.08); --grid: rgba(255, 255, 255, 0.06); --axis: rgba(255, 255, 255, 0.16);
  --ink: #E8F3F3; --ink2: #BED0D2; --muted: #8FA6AB; --accent: #D6B061; --btn: #D6B061; --btn-ink: #04121A;
  --hero: #0A2630; --hero-ink: #EAF6F5; --hero-muted: #A7C4C6; --hero-line: rgba(255, 255, 255, 0.12); --hero-num: #E9CF8F;
  --good: #6EE7B7; --good-bg: #0E3328; --bad: #FCA5A5; --bad-bg: #3A1A1F; --warn: #F5C76B; --warn-bg: #33270F; --info: #7CC4F8; --info-bg: #0E2A3D;
  --s1: #3B8DEB; --s2: #BB8A1C; --s3: #9679E2; --s4: #D9653A; --s5: #0FA48C;
  --o1: #1F6676; --o2: #2A8497; --o3: #3AA3B6; --o4: #5CC2D1; --o5: #98E0EA;
  --bar: #31505C; --bar-strong: #5CC8E8; --spark: #2DD4BF; --note-bg: #2A2414; --note-ink: #E9CF8F;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.28);
  --c-facebook: var(--s1); --c-instagram: var(--s4); --c-meta: var(--s5);
}
html[data-theme="navy"] {
  color-scheme: light;
  --bg: #EEF1F5;
  --side: #13233A; --side-line: transparent; --side-ink: #C5CEDC; --side-muted: #8F9CB3; --side-act-bg: #1D3150; --side-act-ink: #F3F5F9; --side-icon: #D3B06A; --side-card: #1A2C47;
  --badge-bg: #D3B06A; --badge-ink: #13233A;
  --card: #FAFBFC; --soft: #F1F3F7; --line: #E1E6EE; --grid: #E9EDF2; --axis: #C7CFDA;
  --ink: #1E2A3B; --ink2: #4A5669; --muted: #5F6B7E; --accent: #CFAE69; --btn: #1D3150; --btn-ink: #F3F5F9;
  --hero: #15263F; --hero-ink: #F3F5F9; --hero-muted: #AEB9CB; --hero-line: #24395A; --hero-num: #D9B970;
  --good: #1F7A4A; --good-bg: #E3F1E8; --bad: #A8352B; --bad-bg: #F8E7E4; --warn: #85590C; --warn-bg: #F8EED9; --info: #2A4878; --info-bg: #E5EBF5;
  --s1: #2E5AA8; --s2: #C1902A; --s3: #7356C8; --s4: #D0602E; --s5: #2FA595;
  --o1: #93ABD6; --o2: #6F8FC8; --o3: #4E71B5; --o4: #33579D; --o5: #1E3E7B;
  --bar: #A9B6CB; --bar-strong: #2A4878; --spark: #B48A36; --note-bg: #F6EEDC; --note-ink: #6E5317;
  --shadow: 0 1px 2px rgba(30, 42, 59, 0.04);
  --c-facebook: var(--s1); --c-instagram: var(--s4); --c-meta: var(--s5);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F5F7;
  --side: #FAFBFC; --side-line: #E3E7ED; --side-ink: #4A5669; --side-muted: #667385; --side-act-bg: #E9EEF5; --side-act-ink: #1E2A3B; --side-icon: #A88232; --side-card: #F1F3F7;
  --badge-bg: #1E2A3B; --badge-ink: #FAFBFC;
  --card: #FCFCFD; --soft: #F2F4F7; --line: #E3E7ED; --grid: #ECEFF3; --axis: #CBD2DC;
  --ink: #1E2A3B; --ink2: #4A5669; --muted: #626E80; --accent: #CFAE69; --btn: #1E2A3B; --btn-ink: #FCFCFD;
  --hero: #F3EEE3; --hero-ink: #1E2A3B; --hero-muted: #6A5B3E; --hero-line: #E2D8C3; --hero-num: #1E2A3B;
  --good: #1F7A4A; --good-bg: #E3F1E8; --bad: #A8352B; --bad-bg: #F8E7E4; --warn: #85590C; --warn-bg: #F8EED9; --info: #2A4878; --info-bg: #E5EBF5;
  --s1: #2E5AA8; --s2: #C1902A; --s3: #7356C8; --s4: #D0602E; --s5: #2FA595;
  --o1: #93ABD6; --o2: #6F8FC8; --o3: #4E71B5; --o4: #33579D; --o5: #1E3E7B;
  --bar: #B9C3D3; --bar-strong: #1E2A3B; --spark: #B48A36; --note-bg: #F3EEE3; --note-ink: #6E5317;
  --shadow: 0 1px 3px rgba(30, 42, 59, 0.05);
  --c-facebook: var(--s1); --c-instagram: var(--s4); --c-meta: var(--s5);
}
html[data-theme="warm"] {
  color-scheme: light;
  --bg: #EFEBE3;
  --side: #2B2721; --side-line: transparent; --side-ink: #D8D0C2; --side-muted: #A69C8B; --side-act-bg: #3A342C; --side-act-ink: #F5F0E6; --side-icon: #D4B26B; --side-card: #352F28;
  --badge-bg: #D4B26B; --badge-ink: #2B2721;
  --card: #F8F5EF; --soft: #F0EBE2; --line: #E2DACD; --grid: #EAE4DA; --axis: #CFC5B5;
  --ink: #2E2922; --ink2: #574F44; --muted: #6E6556; --accent: #C7A25E; --btn: #3A342C; --btn-ink: #F5F0E6;
  --hero: #2F2A23; --hero-ink: #F5F0E6; --hero-muted: #CBBFAC; --hero-line: #463F35; --hero-num: #D9B970;
  --good: #2E6B3F; --good-bg: #E4EDDF; --bad: #9E3A2C; --bad-bg: #F4E2DB; --warn: #7E5714; --warn-bg: #F2E7D2; --info: #3D527A; --info-bg: #E6E8EC;
  --s1: #2E5AA8; --s2: #C1902A; --s3: #7356C8; --s4: #D0602E; --s5: #2FA595;
  --o1: #93ABD6; --o2: #6F8FC8; --o3: #4E71B5; --o4: #33579D; --o5: #1E3E7B;
  --bar: #C9BFAE; --bar-strong: #3A342C; --spark: #A9813A; --note-bg: #F2E9D6; --note-ink: #6B511B;
  --shadow: 0 1px 2px rgba(46, 41, 34, 0.05);
  --c-facebook: var(--s1); --c-instagram: var(--s4); --c-meta: var(--s5);
}
html[data-theme="night"] {
  color-scheme: dark;
  --bg: #0F1A2A;
  --side: #0B1422; --side-line: #1A2740; --side-ink: #B6C1D3; --side-muted: #8391A8; --side-act-bg: #1A2A44; --side-act-ink: #E6EBF2; --side-icon: #D3B06A; --side-card: #15233A;
  --badge-bg: #D3B06A; --badge-ink: #0F1A2A;
  --card: #15233A; --soft: #1A2A43; --line: #24344F; --grid: #1F2E48; --axis: #34466A;
  --ink: #DCE3EC; --ink2: #B7C2D2; --muted: #93A1B6; --accent: #D3B06A; --btn: #D3B06A; --btn-ink: #0F1A2A;
  --hero: #1A2C47; --hero-ink: #E6EBF2; --hero-muted: #A9B6CA; --hero-line: #2A3E60; --hero-num: #D9B970;
  --good: #6BC596; --good-bg: #16332A; --bad: #E89286; --bad-bg: #3A2226; --warn: #DDB467; --warn-bg: #33291A; --info: #94B4E8; --info-bg: #1D3150;
  --s1: #4E8CE6; --s2: #BB7F00; --s3: #9477DD; --s4: #C25A1C; --s5: #00A890;
  --o1: #33539F; --o2: #3F60B0; --o3: #5072C4; --o4: #6C8AD6; --o5: #8AA6E8;
  --bar: #34466A; --bar-strong: #94B4E8; --spark: #D3B06A; --note-bg: #2C2718; --note-ink: #E2C98E;
  --shadow: none;
  --c-facebook: var(--s1); --c-instagram: var(--s4); --c-meta: var(--s5);
}

/* «زجاج» (Belal 23 Oct): the iPhone Control Center — frosted grey glass, white text, iOS blue. The variables are the
   opaque look (the contrast checks read them); the glass itself is the translucent fill and blur in section «glass». */
html[data-theme="glass"] {
  color-scheme: dark;
  --bg: radial-gradient(60rem 30rem at 80% -10rem, #8E8E93, transparent 70%), linear-gradient(180deg, #6C6C72 0, #4B4B51 30rem, #2C2C30 100%);
  --side: rgba(255, 255, 255, 0.1); --side-line: rgba(255, 255, 255, 0.14); --side-ink: #F2F2F7; --side-muted: #D1D1D6; --side-act-bg: rgba(255, 255, 255, 0.24); --side-act-ink: #FFFFFF; --side-icon: #64D2FF; --side-card: rgba(255, 255, 255, 0.12);
  --badge-bg: #FFFFFF; --badge-ink: #1C1C1E;
  --card: #4E4E54; --soft: #45454B; --line: rgba(255, 255, 255, 0.18); --grid: rgba(255, 255, 255, 0.1); --axis: rgba(255, 255, 255, 0.3);
  --ink: #FFFFFF; --ink2: #F2F2F7; --muted: #E0E0E5; --accent: #0A84FF; --btn: #FFFFFF; --btn-ink: #1C1C1E;
  --hero: #3A3A40; --hero-ink: #FFFFFF; --hero-muted: #E0E0E5; --hero-line: rgba(255, 255, 255, 0.18); --hero-num: #64D2FF;
  --good: #7BE495; --good-bg: #173A22; --bad: #FFB4AE; --bad-bg: #4A1E1C; --warn: #FFE066; --warn-bg: #3D3410; --info: #9EDCFF; --info-bg: #123447;
  --s1: #0A84FF; --s2: #FF9F0A; --s3: #BF5AF2; --s4: #FF6B3D; --s5: #30D158;
  --o1: #1D4E89; --o2: #2465AE; --o3: #2E7DD1; --o4: #5AA2EC; --o5: #9ECBF7;
  --bar: #77777E; --bar-strong: #64D2FF; --spark: #64D2FF; --note-bg: #3D3410; --note-ink: #FFE066;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 32px rgba(0, 0, 0, 0.22);
  --c-facebook: var(--s1); --c-instagram: var(--s4); --c-meta: var(--s5);
}
/* «خريطة» (Belal 23 Oct): the dark «AI engineer's map» — near-black with a faint grid, each card tinted its own colour
   (blue, teal, amber, orange, purple, green) with a matching border, a yellow highlight and monospace tags. */
html[data-theme="map"] {
  color-scheme: dark;
  --bg: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px, #0A0C10;
  --side: #0E1117; --side-line: #1E2430; --side-ink: #C9D1DE; --side-muted: #8A94A6; --side-act-bg: #3A2210; --side-act-ink: #FFE8D2; --side-icon: #F7C948; --side-card: #141923;
  --badge-bg: #F7C948; --badge-ink: #14110A;
  --card: #141B2B; --soft: #1A2336; --line: rgba(120, 150, 210, 0.3); --grid: rgba(255, 255, 255, 0.06); --axis: rgba(255, 255, 255, 0.18);
  --ink: #EEF2F8; --ink2: #C3CCDA; --muted: #9EAABD; --accent: #F7C948; --btn: #F7C948; --btn-ink: #14110A;
  --hero: #2A1A0E; --hero-ink: #FFF1E4; --hero-muted: #E6BE98; --hero-line: #5A3418; --hero-num: #FFB45C;
  --good: #5EE0B5; --good-bg: #0F2C26; --bad: #FF9A9A; --bad-bg: #36171B; --warn: #F7C948; --warn-bg: #33290C; --info: #8CB4FF; --info-bg: #172544;
  --s1: #4F86E8; --s2: #E0A23A; --s3: #9B7BE0; --s4: #F07A3A; --s5: #2CC4A8;
  --o1: #22375F; --o2: #2E4C83; --o3: #3D63A8; --o4: #5F86CC; --o5: #8CB4FF;
  --bar: #2A3550; --bar-strong: #8CB4FF; --spark: #F7C948; --note-bg: #33290C; --note-ink: #F7C948;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --c-facebook: var(--s1); --c-instagram: var(--s4); --c-meta: var(--s5);
}

/* ── 2. Base ───────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* the page background is the look's --bg; in «جوهرة» that is the emerald and blue glow at the top,
   painted once over the whole page (no fixed background, so no seams on long pages or iPhones) */
html { min-height: 100%; background: var(--bg); }
html[data-theme="jewel"], html:not([data-theme]) { background-repeat: no-repeat; background-color: #020609; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font-family: 'Almarai', Tahoma, sans-serif; font-size: 14px; line-height: 1.6;
  font-variant-numeric: tabular-nums; overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
html[lang="en"] body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
a { color: var(--info); }
a:hover { color: var(--ink); }
button { cursor: pointer; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; } /* 16px keeps iPhones from zooming into a field */
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
::placeholder { color: var(--muted); }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
h2, h3 { line-height: 1.4; }
/* read by screen readers, not shown */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; top: 8px; inset-inline-start: 12px; z-index: 100; transform: translateY(-200%); padding: 10px 14px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-weight: 700; text-decoration: none; }
.skip:focus { transform: none; color: var(--btn-ink); }

/* ── 3. The frame ──────────────────────────────────────────────────────────────── */
.app { min-height: 100vh; }
.side { color: var(--side-ink); background: var(--side); }
.side :focus-visible { outline-color: var(--side-icon); }
.side-brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
.side-brand:hover { color: inherit; }
.logo { flex: 0 0 auto; display: block; }
/* the company logo: white on a dark background, navy on a light one (the sidebar is light in «light» only; the top bar
   sits on the page, which is light in «navy», «light» and «warm») */
.logo img { display: block; width: auto; height: 36px; }
.logo .logo-on-light { display: none; }
.side .logo img { height: 40px; }
html[data-theme="jewel"] .side .brand, html:not([data-theme]) .side .brand { font-size: 20px; }
html[data-theme="light"] .side .logo .logo-on-dark,
html[data-theme="navy"] .top .logo .logo-on-dark, html[data-theme="light"] .top .logo .logo-on-dark, html[data-theme="warm"] .top .logo .logo-on-dark { display: none; }
html[data-theme="light"] .side .logo .logo-on-light,
html[data-theme="navy"] .top .logo .logo-on-light, html[data-theme="light"] .top .logo .logo-on-light, html[data-theme="warm"] .top .logo .logo-on-light { display: block; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.3; }
.brand { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--ink); }
.side .brand { color: var(--side-act-ink); }
/* in «جوهرة» the name is the gold Cormorant wordmark */
html[data-theme="jewel"] .brand, html:not([data-theme]) .brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; font-weight: 600; letter-spacing: .3px; line-height: 1.1; color: #E9CF8F; }

.nav-list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* position: relative keeps the hidden words (.sr, .lbl) inside the link, so the scrolling row clips them */
.nav a { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--side-ink); font-size: 14px; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--side-card); color: var(--side-act-ink); }
.nav a.on { background: var(--side-act-bg); color: var(--side-act-ink); font-weight: 700; }
.nav a.on .ico { color: var(--side-icon); }
.ico { display: flex; flex: 0 0 auto; }
.nav .count { margin-inline-start: auto; }
.nav-head { margin: 0; color: var(--side-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }

.side-foot form { margin: 0; }
.side-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--side-ink); font: inherit; font-size: 14px; text-align: start; text-decoration: none; white-space: nowrap; }
.side-btn:hover { background: var(--side-card); color: var(--side-act-ink); }
.side-btn.on { background: var(--side-act-bg); color: var(--side-act-ink); font-weight: 700; }
.n8n-line { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--side-card); color: var(--side-muted); font-size: 12px; line-height: 1.6; }

/* «الموافقات»: the closed posts folded under the rest, opening in place (Belal 23 Oct) */
.closed-fold { margin-top: 8px; }
.failed-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.failed-item form { display: flex; justify-content: flex-end; }
.closed-fold > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.closed-fold > summary::-webkit-details-marker { display: none; }
.closed-fold[open] > summary { margin-bottom: 14px; }

/* the «الشكل» menu: a <details>, so it opens without JS; picking a look posts the form */
.theme-menu > summary { list-style: none; }
.theme-menu > summary::-webkit-details-marker { display: none; }
.theme-menu[open] > summary { background: var(--side-act-bg); color: var(--side-act-ink); }
.chev { display: flex; flex: 0 0 auto; }
.theme-list { position: absolute; z-index: 30; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 14px 36px rgba(5, 12, 23, .28); }
.theme-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; text-align: start; }
.theme-list button:hover, .theme-list button[aria-pressed="true"] { background: var(--soft); }
.theme-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.35; white-space: normal; }
.theme-name { font-weight: 700; }
.theme-desc { font-size: 12px; color: var(--muted); }
.tick { display: flex; flex: 0 0 auto; color: var(--accent); visibility: hidden; }
.theme-list button[aria-pressed="true"] .tick { visibility: visible; }
/* each look's swatch: its page colour and its strongest colour, as on the canvas */
.sw { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); background: linear-gradient(135deg, var(--sw-a) 0 50%, var(--sw-b) 50% 100%); }
.side-btn .sw { width: 18px; height: 18px; box-shadow: 0 0 0 1px var(--side-muted); }
.sw-jewel { --sw-a: #030B12; --sw-b: #2DD4BF; }
.sw-navy { --sw-a: #13233A; --sw-b: #D3B06A; }
.sw-light { --sw-a: #F4F5F7; --sw-b: #1E2A3B; }
.sw-warm { --sw-a: #EFEBE3; --sw-b: #2B2721; }
.sw-night { --sw-a: #15233A; --sw-b: #94B4E8; }
.sw-glass { --sw-a: #6C6C72; --sw-b: #0A84FF; }
.sw-map { --sw-a: #0A0C10; --sw-b: #F7C948; }

.main { display: block; min-width: 0; padding: 16px 16px 48px; }
.main.solo { max-width: 1100px; margin: 0 auto; padding: 18px 16px 48px; }

/* phones and tablets: a sticky bar — the name, then settings, look, language and sign-out as icons
   (their words stay for screen readers) — and under it all the sections in one sideways-scrolling row */
@media (max-width: 1023.98px) {
  .side {
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand foot" "nav nav";
    align-items: center; gap: 4px 8px; padding: 6px 12px 4px;
    border-bottom: 1px solid var(--side-line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .side-brand { grid-area: brand; gap: 8px; }
  .side .logo img { height: 28px; }
  html[data-theme="jewel"] .side .brand, html:not([data-theme]) .side .brand { font-size: 17px; }
  .nav { grid-area: nav; display: flex; align-items: center; gap: 4px; margin: 0 -12px; padding: 0 12px 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-list { flex: 0 0 auto; }
  .nav-head { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; margin: 8px 2px; padding-inline-start: 10px; border-inline-start: 1px solid color-mix(in srgb, var(--side-muted) 45%, transparent); }
  .side-foot { grid-area: foot; display: flex; align-items: center; gap: 2px; }
  .side-foot .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .side-foot .lang .ico, .n8n-line, .chev { display: none; }
  /* the open menu drops under the bar, inside the screen */
  .theme-list { top: calc(100% + 4px); inset-inline-end: 12px; width: 320px; max-width: calc(100% - 24px); }
}

/* laptops: the sidebar, 232px, sticky and as tall as the window */
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
  .side {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 28px; padding: 24px 16px;
    border-inline-end: 1px solid var(--side-line);
    scrollbar-width: thin; scrollbar-color: var(--side-card) transparent;
  }
  .side-brand { gap: 12px; padding: 0 8px; }
  .nav-list { flex-direction: column; }
  .nav a { gap: 12px; }
  .nav a .lbl { flex: 1 1 auto; }
  .nav-head { margin: 14px 0 6px; padding: 14px 12px 0; border-top: 1px solid color-mix(in srgb, var(--side-muted) 30%, transparent); }
  .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
  .n8n-line { margin-bottom: 8px; }
  .side-btn { justify-content: flex-start; width: 100%; padding: 0 12px; }
  .side-btn .lbl { flex: 1 1 auto; }
  /* the menu opens upwards, over the sections */
  .theme-menu { position: relative; }
  .theme-list { bottom: calc(100% + 6px); inset-inline: 0; transform-origin: bottom center; }
  .main { width: 100%; max-width: 1384px; margin-inline: auto; padding: 24px 32px 48px; }
}

/* ── 4. Pages outside the sign-in: the small header ────────────────────────────── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.top-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-brand .logo img { height: 28px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-link { padding: 6px 12px; border-radius: 999px; color: var(--ink2); text-decoration: none; }
.top-link.on { background: var(--btn); color: var(--btn-ink); font-weight: 700; }
.lang { margin: 0; }
.top .lang button { min-height: 44px; padding: 0 16px; border: 1px solid var(--axis); border-radius: 999px; background: transparent; color: var(--ink); }
.top .lang button:hover { border-color: var(--accent); }

/* ── 5. Text ───────────────────────────────────────────────────────────────────── */
h1 { margin: 8px 0 6px; font-size: 28px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.muted { margin: 0 0 16px; color: var(--muted); }
.small { font-size: 13px; }
.section { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.sub { margin: 14px 0 8px; font-size: 14px; color: var(--muted); }
.user-content { unicode-bidi: plaintext; overflow-wrap: anywhere; }
.ok { margin: 0; color: var(--good); }
.err { min-height: 1.2em; margin: 0; color: var(--bad); }
.err-text { color: var(--bad); }
.back { color: var(--info); font-weight: 700; text-decoration: none; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a { color: var(--info); font-weight: 700; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); color: var(--info); word-break: break-all; }
.codes { columns: 2; padding-inline-start: 22px; font-family: ui-monospace, Menlo, monospace; font-size: 16px; color: var(--ink); }
/* the number badge: posts waiting, items in a group */
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-ink); font-size: 12px; font-weight: 700; line-height: 1; }
/* a status word in a pill; the tone picks the colour. No margin: a muted chip is also ".muted", whose paragraph margin
   above would lift it off the line (this rule has the same specificity and comes later, so it wins) */
.chip { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--soft); color: var(--ink2); font-size: 12px; font-weight: 700; line-height: 1.6; }
.chip.ok { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.muted { background: var(--soft); color: var(--ink2); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 6. Notices ────────────────────────────────────────────────────────────────── */
.banner { margin: 8px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-inline-start: 3px solid var(--warn); border-radius: 12px; background: var(--warn-bg); color: var(--ink); }
.alerts { margin: 12px 0; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); border-inline-start: 3px solid var(--bad); border-radius: 14px; background: var(--bad-bg); color: var(--ink); }
.alerts h2 { margin: 0 0 6px; font-size: 15px; color: var(--bad); }
.alerts ul { margin: 0; padding-inline-start: 18px; }

/* ── 7. Cards, lists and forms of the existing screens ─────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.card { display: block; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
a.card:hover { color: inherit; border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.card.tool { position: relative; min-height: 72px; display: flex; align-items: center; padding-inline-start: 24px; }
.card.tool::before { content: ''; position: absolute; inset-inline-start: 12px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--accent); }
.tool-name { font-weight: 700; color: var(--ink); }
.card.task p { margin: 6px 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-head h3 { margin: 0; font-size: 15px; color: var(--ink); }
.card.post { display: flex; gap: 12px; align-items: flex-start; }
.post-body { flex: 1 1 auto; min-width: 0; }
.post-body p { margin: 4px 0; }
.thumb { flex: 0 0 72px; width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 12px; object-fit: cover; background: var(--soft); }
.thumb.none { background: repeating-linear-gradient(45deg, var(--soft), var(--soft) 8px, var(--card) 8px, var(--card) 16px); }
.post-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.post-row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.post-row a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: inherit; text-decoration: none; }
.post-row .when { font-weight: 800; color: var(--ink); }
.wf-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wf { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.wf p { margin: 4px 0 0; }
.wf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-name { font-weight: 700; color: var(--ink); }
.media { display: grid; gap: 10px; margin: 12px 0; }
.media.carousel { grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; }
.media img, .media video { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 16px; background: var(--soft); scroll-snap-align: start; }
.caption { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); white-space: pre-wrap; }
.decisions { margin: 0; padding-inline-start: 18px; }
.decisions li { margin: 6px 0; }
.retry-list { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.retry-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.result { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; color: var(--ink2); }

/* a block of a screen; the sign-in pages and Settings keep it narrow */
.panel { min-width: 0; margin: 0 0 20px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.panel h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
h1 + .panel { margin-top: 16px; }
.panel.wide { max-width: none; }
.panel.wide p { margin: 6px 0; }
.solo .panel { max-width: 520px; margin: 24px auto; }
#settings > .panel { max-width: 640px; }
.action-bar { margin: 16px 0; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.stack { display: grid; gap: 12px; }
.stack label { display: grid; gap: 6px; font-weight: 700; color: var(--ink2); }
.stack-label { display: grid; gap: 6px; margin-bottom: 12px; font-weight: 700; color: var(--ink2); }
.stack input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .stack select, .stack textarea, .action-bar textarea {
  width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid var(--axis); border-radius: 12px; background: var(--soft); color: var(--ink);
}
.check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--btn); color: var(--btn-ink); font: inherit; font-weight: 700; text-align: center; text-decoration: none; }
.btn:hover { color: var(--btn-ink); filter: brightness(1.06); }
.btn.ghost { border: 1px solid var(--axis); background: transparent; color: var(--ink); }
.btn.ghost:hover { color: var(--ink); border-color: var(--accent); filter: none; }
.btn.bad { border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-bg); color: var(--bad); }
.btn.bad:hover { color: var(--bad); }
.btn.small { padding: 0 14px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* ── 8. Building blocks of the dashboard screens ───────────────────────────────── */
/* page title row: <div class="page-head"><div><h1/><p class="page-meta"/></div><div class="page-actions"/></div> */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 0 0 20px; }
.page-head h1 { margin: 0; }
.page-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* a block's title row: <div class="panel-head"><div><h2/><p/></div>…badge…</div> */
.panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin: 0 0 14px; }
.panel-head h2 { margin: 0; }
.panel-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
/* blocks side by side when there is room, one under the other on a phone */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); align-items: start; gap: 20px; margin: 0 0 20px; }
.cols > * { min-width: 0; }
.cols > .panel { margin: 0; }
/* the row of number tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(176px, 100%), 1fr)); gap: 16px; margin: 0 0 20px; }
.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.kpi-unit { margin-inline-start: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.kpi-sub { font-size: 12px; color: var(--muted); }
/* «لسه مش متوصل»: a source that is not connected yet, in the place its numbers will take */
.nc { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border: 1px dashed var(--axis); border-radius: 14px; background: var(--soft); color: var(--ink2); overflow-wrap: anywhere; }
.nc h2, .nc h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.nc p { margin: 0; font-size: 13px; line-height: 1.7; }
/* a table that scrolls inside its own box instead of widening the page */
.tbl { --tbl-to: to right; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
html[dir="rtl"] .tbl { --tbl-to: to left; }
/* The swipe cue: while a table goes on past its box, the box's edge on that side fades out, so the cut column reads as
   "more this way". Each edge fades over as many pixels as the table goes on past it, up to 28px: two scroll timelines on
   the box itself, in either direction, the start's over the first 28px of the swipe and the end's over the last 28px.
   A box with nothing to scroll sideways has no timeline, so a table that fits never fades. Nothing moves on its own —
   the fade only follows the reader's own swipe — so it stays under reduced motion (section 9's rule stops movement;
   !important outranks its "*"). A mask reads only alpha: --ink is any opaque colour. The keyboard ring shows unfaded.
   A browser without scroll timelines shows the table as before. */
@property --tbl-s { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --tbl-e { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes tblStart { from { --tbl-s: 0px; } to { --tbl-s: 28px; } }
@keyframes tblEnd { from { --tbl-e: 28px; } to { --tbl-e: 0px; } }
@supports (animation-timeline: scroll()) {
  .tbl {
    mask-image: linear-gradient(var(--tbl-to), transparent, var(--ink) var(--tbl-s), var(--ink) calc(100% - var(--tbl-e)), transparent);
    animation: tblStart auto linear both, tblEnd auto linear both !important;
    animation-timeline: scroll(self inline), scroll(self inline) !important;
    animation-range: 0px 28px, calc(100% - 28px) 100% !important;
  }
  .tbl:focus-visible { mask-image: none; }
}
.tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { padding: 9px 12px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 700; text-align: start; white-space: nowrap; }
.tbl th:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.tbl th:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--grid); text-align: start; vertical-align: middle; overflow-wrap: anywhere; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--soft); }
.tbl .num { text-align: end; white-space: nowrap; }
/* a labelled bar: <li class="bar-row"><span class="bar-top"><b/><small/></span><span class="bar-line"><span class="bar" style="--w:40%"></span><b/></span></li> */
.bar-row { display: grid; gap: 6px; min-width: 0; }
.bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.bar-top small { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.bar-line { display: flex; align-items: center; gap: 8px; }
.bar { display: block; width: var(--w, 0%); min-width: 2px; height: 12px; border-radius: 6px; background: var(--bar); }
.bar.strong { background: var(--bar-strong); }
/* the morning summary on «النهارده» */
.hero { border-radius: 18px; padding: 24px 28px; background: var(--hero); color: var(--hero-muted); }

/* «جوهرة»: a soft sheen at the top of every card, and the glow behind the morning summary (canvas) */
html[data-theme="jewel"] :is(.panel, .card, .kpi, .wf, .post-row, .theme-list) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 160px); }
html[data-theme="jewel"] .hero { background-image: radial-gradient(42rem 18rem at 85% -5rem, rgba(45, 212, 191, .26), transparent 70%), radial-gradient(30rem 16rem at 0% 115%, rgba(14, 165, 233, .2), transparent 70%); }

/* ── 9. Motion: a calm entrance, and nothing at all for prefers-reduced-motion ─── */
@keyframes lhRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lhPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .panel, .kpi, .nc { animation: lhRise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .kpis > :nth-child(2) { animation-delay: .05s; }
  .kpis > :nth-child(3) { animation-delay: .1s; }
  .kpis > :nth-child(4) { animation-delay: .15s; }
  .kpis > :nth-child(n+5) { animation-delay: .2s; }
  .theme-menu[open] .theme-list { animation: lhPop .18s cubic-bezier(.2, .8, .2, 1) both; }
  .nav a, .side-btn, .btn, .card, .theme-list button, .top .lang button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* charts */
/* Server-side charts (src/views/charts.ts). A series colour arrives as --c on the mark and is never used for text:
   text wears --ink, --ink2 and --muted. Hover and keyboard focus are CSS only (:hover, :focus-within, :focus), and
   every number is also written out (legend, tooltip, aria-label or the table). Motion lives in the
   no-preference query at the bottom of this section. Nothing here can widen the page: a tip is display:none
   until it opens and then stays inside its chart, and a long name wraps (overflow-wrap: anywhere). */
.chart { min-width: 0; max-width: 100%; }
ul.chart, .chart ul { margin: 0; padding: 0; list-style: none; }
.chart .ky { flex: 0 0 auto; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--bar)); }
.chart .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font-size: 12px; color: var(--ink2); }
.chart .legend li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.chart .legend b { font-weight: 700; color: var(--ink); }

/* sparkline: <svg class="spark"> — 2px line, soft fill, flat on the floor when every value is 0 */
.spark { display: block; width: 100%; height: var(--h, 56px); overflow: visible; }
.spark .ln { fill: none; stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .ln.pt { stroke-width: 8; }
.spark .fill { stroke: none; }
.spark .base { stroke: var(--axis); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* stacked area: legend, then y axis | plot | x axis; the plot reads left to right in both languages */
.chart.area { --tw: 196px; }
.chart.area .plot { display: grid; grid-template-columns: calc(var(--ch, 2) * 7px + 10px) minmax(0, 1fr); grid-template-rows: 220px auto; direction: ltr; }
.chart.area .yaxis { position: relative; grid-column: 1; grid-row: 1; font-size: 12px; line-height: 18px; color: var(--muted); }
.chart.area .yt { position: absolute; right: 8px; top: calc(var(--p) * 1%); transform: translateY(-50%); white-space: nowrap; }
.chart.area .field { position: relative; grid-column: 2; grid-row: 1; min-width: 0; }
.chart.area .field > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart.area .gr { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart.area .ax { stroke: var(--axis); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart.area .ln { fill: none; stroke: var(--c, var(--spark)); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart.area .band { stroke: none; }
.chart.area.empty .yaxis { visibility: hidden; }
.chart.area .nil { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 0 12px; font-size: 13px; text-align: center; color: var(--muted); unicode-bidi: plaintext; pointer-events: none; }
.chart.area .xaxis { position: relative; grid-column: 2; grid-row: 2; height: 20px; margin-top: 10px; font-size: 12px; line-height: 20px; color: var(--muted); }
.chart.area .xt { position: absolute; top: 0; left: calc(var(--p) * 1%); transform: translateX(-50%); white-space: nowrap; }
.chart.area .xt:first-child { transform: none; }
.chart.area .xt:last-child { transform: translateX(-100%); }
.chart.area .xt:only-child { transform: translateX(-50%); }
/* one hover column per day; the first and last are half width because their data points sit on the plot's edges */
.chart.area .hit { position: absolute; inset: 0; display: flex; }
.chart.area .col { flex: 1 1 0; min-width: 0; height: 100%; cursor: crosshair; }
.chart.area .col:first-child, .chart.area .col:last-child { flex-grow: .5; }
.chart.area .col:only-child { flex-grow: 1; }
.chart.area .col:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; border-radius: 4px; }
.chart.area .col .gl, .chart.area .col .pt { display: none; position: absolute; pointer-events: none; }
.chart.area .col .gl { top: 0; bottom: 0; left: calc(var(--x) * 100%); width: 1px; margin-left: -.5px; background: var(--axis); }
.chart.area .col .pt { left: calc(var(--x) * 100%); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--card); }
.chart.area .col:hover .gl, .chart.area .col:hover .pt, .chart.area .col:focus-within .gl, .chart.area .col:focus-within .pt { display: block; }
/* the tip opens beside the guide line (right of it in the first half of the plot, left of it in the second) and
   never leaves the plot: clamp() keeps it inside */
.col .tip { display: none; }
.col:hover .tip, .col:focus-within .tip { display: block; }
.chart.area .col .tip { position: absolute; top: 4px; z-index: 3; width: var(--tw); max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 10px 28px color-mix(in oklab, var(--ink) 16%, transparent); text-align: start; pointer-events: none; left: clamp(0px, calc(var(--x) * 100% + 12px - clamp(0, (var(--x) - .5) * 1000, 1) * (var(--tw) + 24px)), calc(100% - var(--tw))); }
.chart.area .tt { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.chart.area .tip ul { display: grid; gap: 5px; padding: 8px 12px; }
.chart.area .tip li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--ink2); }
.chart.area .tip li > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.chart.area .tip li b { flex: 0 0 auto; font-weight: 700; color: var(--ink); }
.chart.area .tip .tot { justify-content: space-between; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 480px) { .chart.area { --tw: 168px; } }

/* donut: arcs are exactly proportional; the little gaps are separators in the card colour drawn on top */
.chart.donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; }
.chart.donut .dn { position: relative; flex: 0 0 auto; width: 160px; height: 160px; }
.chart.donut .dn svg { display: block; width: 100%; height: 100%; }
.chart.donut .trk { fill: none; stroke: var(--grid); stroke-width: 24; }
.chart.donut .seg { fill: none; stroke: var(--c, var(--bar)); stroke-width: 24; }
.chart.donut .gap { fill: none; stroke: var(--card); stroke-width: 3; }
.chart.donut .mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 0 30px; text-align: center; pointer-events: none; }
.chart.donut .mid span { font-size: 12px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.chart.donut .mid b { font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.chart.donut .legend { flex: 1 1 180px; display: grid; gap: 0; margin: 0; }
.chart.donut .legend li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 3.4em; gap: 8px; min-height: 36px; border-bottom: 1px solid var(--grid); }
.chart.donut .legend li:last-child { border-bottom: 0; }
.chart.donut .legend small { text-align: end; font-size: 12px; color: var(--muted); }

/* horizontal bars: the .bar-row / .bar blocks of the base, with a track so the bar and its number share a line;
   a row with a link is one 44px tap target (the link stretches over the row) */
.chart.hbars { display: grid; gap: 2px; }
.chart.hbars .bar-row { padding: 6px 8px; margin-inline: -8px; border-radius: 10px; }
.chart.hbars .bar-row.go { position: relative; min-height: 44px; align-content: center; }
.chart.hbars .bar-row.go:hover { background: var(--soft); }
.chart.hbars .bar-row.go:focus-within { outline: 2px solid var(--info); outline-offset: -2px; }
.chart.hbars a { color: var(--ink); text-decoration: none; }
.chart.hbars a:hover { color: var(--ink); text-decoration: underline; }
.chart.hbars a:focus-visible { outline: none; }
.chart.hbars a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.chart.hbars .bar-top b { min-width: 0; font-weight: 600; color: var(--ink); }
.chart.hbars .bar-top small { flex: 0 1 auto; min-width: 0; max-width: 50%; text-align: end; overflow-wrap: anywhere; }
.chart.hbars .bar-track { flex: 1 1 auto; min-width: 0; }
.chart.hbars .bar { background: var(--bc, var(--bar)); transform-origin: 0 50%; }
.chart.hbars .bar.strong { background: var(--bc, var(--bar-strong)); }
.chart.hbars .bar.zero { width: 2px; min-width: 0; background: var(--grid); }
.chart.hbars .bar-line > b { flex: 0 0 auto; min-width: 4ch; text-align: end; font-weight: 700; color: var(--ink); }
html[dir="rtl"] .chart.hbars .bar { transform-origin: 100% 50%; }

/* heatmap: rows × columns of squares; a cell's strength is --a (0.08 to 0.96) of the series colour --hc over the card.
   The number lives in the cell's tip (hover, or a tap) and its aria-label, never in the colour alone */
.chart.heat { --rlw: 58px; --hc: var(--s1); }
.chart.heat .hm { display: grid; gap: 3px; direction: ltr; }
.chart.heat .hr { display: grid; grid-template-columns: var(--rlw) repeat(var(--n, 1), minmax(0, 1fr)); gap: 3px; align-items: center; }
.chart.heat .rl { min-width: 0; padding-inline-end: 6px; font-size: 12px; line-height: 1.3; text-align: end; color: var(--muted); overflow-wrap: anywhere; }
.chart.heat .cell { position: relative; height: 26px; border-radius: 4px; background: color-mix(in oklab, var(--hc, var(--s1)) calc(var(--a) * 100%), var(--card)); }
.chart.heat .cell:hover, .chart.heat .cell:focus { outline: 2px solid var(--ink2); outline-offset: 1px; }
.chart.heat .cell::after { content: attr(data-tip); display: none; position: absolute; z-index: 4; box-sizing: border-box; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(180px, 46vw); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: 0 10px 28px color-mix(in oklab, var(--ink) 16%, transparent); font-size: 12px; line-height: 1.5; text-align: start; unicode-bidi: plaintext; white-space: normal; overflow-wrap: anywhere; color: var(--ink); pointer-events: none; }
.chart.heat .cell.s::after { left: auto; inset-inline-start: 0; transform: none; }
.chart.heat .cell.e::after { left: auto; inset-inline-end: 0; transform: none; }
.chart.heat .cell:hover::after, .chart.heat .cell:focus::after { display: block; }
.chart.heat .hx { display: grid; grid-template-columns: var(--rlw) repeat(var(--k, 1), minmax(0, 1fr)); gap: 3px; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.chart.heat .hx span { min-width: 0; white-space: nowrap; }
.chart.heat .hkey { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.chart.heat .sc { display: flex; gap: 3px; }
.chart.heat .sc i { display: block; width: 18px; height: 10px; border-radius: 3px; background: color-mix(in oklab, var(--hc, var(--s1)) calc(var(--a) * 100%), var(--card)); }
/* A browser without color-mix() (Safari before 16.2) would draw the squares transparent. A plain background declared
   before the mix would not save them: a value with var() in it is only checked once the variables are filled in, so the
   mix still wins the cascade there and then falls back to transparent. This block wins instead: the card under the
   square, and the series colour over it at the strength --a. The cell's tip is its ::after, so the colour is the
   ::before. The test has no var() in it, or it would pass in every browser. */
@supports not (background: color-mix(in oklab, currentColor 50%, transparent)) {
  .chart.heat .cell, .chart.heat .sc i { position: relative; background: var(--card); }
  .chart.heat .cell::before, .chart.heat .sc i::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--hc, var(--s1)); opacity: var(--a); }
}

/* progress ring */
.chart.ring { position: relative; width: 160px; max-width: 100%; aspect-ratio: 1; }
.chart.ring svg { display: block; width: 100%; height: 100%; }
.chart.ring .trk { fill: none; stroke: var(--grid); stroke-width: 14; }
.chart.ring .arc { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; }
.chart.ring .mid { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 24px; text-align: center; pointer-events: none; }
.chart.ring .mid b { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }

/* columns (a histogram): the number on the cap, the name underneath, the note in a strip under the chart on hover or focus */
.chart.hcols { position: relative; padding-bottom: 32px; }
.chart.hcols .hrow { display: flex; align-items: flex-end; gap: 8px; }
.chart.hcols .hc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 4px; border-radius: 8px; }
.chart.hcols .pl { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: 150px; border-bottom: 1px solid var(--axis); }
.chart.hcols .pl b { margin-bottom: 4px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.chart.hcols .mk { display: block; width: min(24px, 70%); height: calc(var(--k, 0) * (100% - 22px)); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--bar); transform-origin: 50% 100%; }
.chart.hcols .mk.acc { background: var(--bar-strong); }
.chart.hcols .mk.zero { height: 2px; border-radius: 1px; background: var(--grid); }
.chart.hcols .hn { max-width: 100%; font-size: 12px; line-height: 1.4; text-align: center; color: var(--muted); overflow-wrap: anywhere; }
.chart.hcols .note { display: none; position: absolute; inset-inline: 0; bottom: 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--ink2); overflow-wrap: anywhere; }
.chart.hcols .hc:hover, .chart.hcols .hc:focus { background: var(--soft); }
.chart.hcols .hc:hover .hn, .chart.hcols .hc:focus .hn { color: var(--ink); }
.chart.hcols .hc:hover .note, .chart.hcols .hc:focus .note { display: block; }

/* data table: a row header is a <th scope="row">, so it must not look like the column heads of the base .tbl */
.tbl tbody th { min-width: 7em; max-width: 20em; padding: 10px 12px; border-bottom: 1px solid var(--grid); background: none; font-size: 13px; font-weight: 600; text-align: start; white-space: normal; vertical-align: middle; color: var(--ink); overflow-wrap: anywhere; }
/* the base's rounded head corners are set on th:first-child and th:last-child, which outrank ".tbl tbody th" */
.tbl tbody th:first-child, .tbl tbody th:last-child { border-radius: 0; }
.tbl tbody tr:last-child th { border-bottom: 0; }

@keyframes lhFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lhGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lhBarUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lhSweep { from { stroke-dasharray: 0 440; } }
@keyframes lhWipe { from { clip-path: inset(-8px 100% -8px -8px); } to { clip-path: inset(-8px -8px -8px -8px); } }
@media (prefers-reduced-motion: no-preference) {
  .spark, .chart.area .field > svg { animation: lhWipe 1.2s cubic-bezier(.3, .7, .2, 1) .3s both; }
  .chart.donut .seg { animation: lhSweep 1s cubic-bezier(.3, .7, .2, 1) .35s both; }
  .chart.donut .seg:nth-child(3) { animation-delay: .45s; }
  .chart.donut .seg:nth-child(4) { animation-delay: .55s; }
  .chart.donut .seg:nth-child(5) { animation-delay: .65s; }
  .chart.donut .seg:nth-child(n+6) { animation-delay: .75s; }
  .chart.ring .arc { animation: lhSweep 1.4s cubic-bezier(.3, .7, .2, 1) .4s both; }
  .chart.hbars .bar { animation: lhGrow .9s cubic-bezier(.2, .7, .2, 1) .4s both; }
  .chart.hcols .mk { animation: lhBarUp .8s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .chart.heat .hm { animation: lhFade .8s ease-out .2s both; }
  .chart .legend li { animation: lhRise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .chart .legend li:nth-child(2) { animation-delay: .05s; }
  .chart .legend li:nth-child(3) { animation-delay: .1s; }
  .chart .legend li:nth-child(4) { animation-delay: .15s; }
  .chart .legend li:nth-child(n+5) { animation-delay: .2s; }
  .col:hover .tip, .col:focus-within .tip { animation: lhFade .12s ease-out both; }
  .chart.hbars .bar-row.go, .chart.hcols .hc { transition: background-color .15s ease; }
  .chart.hcols .hc .hn { transition: color .15s ease; }
}

/* A screen with no hover (a phone). iOS Safari is reported to emulate :hover on a tap (and so open a tip) only for an
   element it treats as clickable, and cursor: pointer is the usual way to say so. A mouse keeps its crosshair; a touch
   screen draws no cursor, so nothing visible changes. Not yet confirmed on a real iPhone. */
@media (hover: none) {
  .chart.area .col, .chart.heat .cell, .chart.hcols .hc { cursor: pointer; }
}
/* end charts */

/* parts */
/* The shared parts of the dashboard screens (src/views/parts.ts): the number tile, the «not connected yet» card and
   tile, the filter bar. Theme variables only, so all five looks wear them. Every control is 44px or taller, and a long
   name wraps or shrinks instead of widening the page. Motion sits in the no-preference query at the bottom. */

/* the head of a screen: a long title or sub line (it can carry a project name) wraps inside the head instead of widening it.
   «anywhere» (not the body's break-word) so that the text's smallest width is one letter, and the boxes around it can shrink */
.page-head h1 { overflow-wrap: anywhere; }
.page-meta > span { overflow-wrap: anywhere; }

/* number tile: the label with its tags (on a narrow tile the tags drop under the label instead of squeezing it), the
   value, one small line, and a sparkline that runs from edge to edge under the text. The base .kpi clips it to the
   rounded corners. In a row where a neighbour is taller the tile stretches, and the line stays at the bottom edge (the
   auto margin takes the slack). */
.kpi-head { flex-wrap: wrap; }
.kpi-label { flex: 1 1 auto; font-weight: 500; }
.kpi-tags { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; max-width: 100%; gap: 4px 6px; }
.kpi-tags .chip { gap: 2px; padding: 1px 8px; }
.kpi.has-spark { padding-bottom: 0; }
.kpi-spark { margin: auto -18px 0; padding-top: 8px; }

/* «لسه مش متوصل»: the dashed card of the base in two sizes — a strip that takes the whole row of a grid, and a block
   that fills its own cell — and the tile that stands where a number would be */
.nc-text { display: flex; flex-direction: column; gap: 6px; }
.nc-wide { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.nc-wide .nc-text { flex: 1 1 22rem; }
.nc-block { gap: 12px; padding: 20px 22px; border-radius: 16px; }
.nc-tile { gap: 4px; }
.nc-state { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.nc-tile .nc-need { font-size: 12px; line-height: 1.7; }

/* the filter bar: a GET form. The period is a segmented group of submit buttons (the chosen one is aria-pressed and
   filled), the other filters are selects, and «طبّق» and «مسح الفلتر» sit at the end. A select shrinks to the bar, so a
   300-character project name cannot widen it. The period group is ".seg" only inside the bar: the donut's arcs are
   <circle class="seg"> too (charts). */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 20px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.filters .seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 12px; background: var(--soft); }
.filters .seg button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink2); font-size: 13px; font-weight: 500; }
.filters .seg button:hover { color: var(--ink); }
.filters .seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); font-weight: 700; }
.filters select { flex: 0 1 auto; min-width: 0; max-width: min(100%, 24rem); min-height: 44px; padding: 0 12px; border: 1px solid var(--axis); border-radius: 10px; background: var(--soft); color: var(--ink); text-overflow: ellipsis; }
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
@media (min-width: 1024px) {
  .filters select { font-size: 14px; } /* 16px below this, so an iPhone does not zoom into the select */
}
@media (max-width: 480px) {
  .filters select { flex: 1 1 100%; max-width: none; }
  .filter-actions { flex: 1 1 100%; }
  .filter-actions .btn { flex: 1 1 0; }
  /* the period group takes the row and its buttons share it, so four short labels stay on one line at 360px */
  .filters .seg { flex: 1 1 100%; }
  .filters .seg button { flex: 1 1 auto; padding: 0 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .filters .seg button { transition: background-color .15s ease, color .15s ease, filter .15s ease; }
}
/* end parts */

/* screen: site */
/* «الموقع» (src/views/site.ts), after the canvas Site.dc.html. Everything sits under .site and uses the look's variables
   only, so the five looks wear it. Every link and summary is 44px or taller; a path or search term from n8n wraps
   (overflow-wrap: anywhere) and keeps its own direction; the two wide tables scroll inside their own box, never the page.
   Motion sits in the no-preference query at the end. */
.site-ext { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.site-muted { color: var(--muted); }
.site-key { flex: 0 0 auto; display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--bar)); }
.site-key-now { --c: var(--spark); }
.site-key-prev { --c: var(--bar); }
.site-key-ar { --c: var(--ink2); }
.site-key-en { --c: var(--bar); }
.site-path { unicode-bidi: isolate; overflow-wrap: anywhere; }

/* the «حقيقي» note and the period strip under the head */
.site-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); font-size: 13px; }
.site-span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.site-span > span { color: var(--muted); }
.site-span b { font-weight: 700; color: var(--ink); }
.site-counts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-inline-start: auto; color: var(--muted); }

/* six tiles: two to a row on a phone, three on a tablet or a small laptop, six from 1280px; each with this period and
   the one before as two bars (the tile's line slot, kept inside the padding instead of edge to edge) */
.site-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .site-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1280px) { .site-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.site-kpis .kpi.has-spark { padding-bottom: 16px; }
.site-kpis .kpi-spark { margin: auto 0 0; padding-top: 10px; }
.site-pair { display: flex; flex-direction: column; gap: 5px; }
.site-track { display: block; height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.site-now, .site-prev { display: block; width: var(--w, 0%); height: 100%; border-radius: 999px; }
.site-now { background: var(--spark); }
.site-prev { background: var(--bar); }

/* «أهم 3 حاجات»: the dark summary card with a big number per finding */
.site-hero { display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; padding: 22px 24px; border-radius: 18px; background: var(--hero); color: var(--hero-ink); }
html[data-theme="jewel"] .site-hero, html:not([data-theme]) .site-hero { background-image: radial-gradient(42rem 18rem at 85% -5rem, rgba(45, 212, 191, .26), transparent 70%), radial-gradient(30rem 16rem at 0% 115%, rgba(14, 165, 233, .2), transparent 70%); }
.site-hero-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.site-hero-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--hero-ink); }
.site-hero-head p { margin: 0; font-size: 13px; color: var(--hero-muted); }
.site-tks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.site-tk { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border: 1px solid var(--hero-line); border-radius: 14px; }
.site-tk-big { font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--hero-num); }
.site-tk p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--hero-ink); }

/* Arabic and English: one split bar per measure, Arabic first */
.site-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; color: var(--ink2); }
.site-legend li { display: flex; align-items: center; gap: 7px; }
.site-legend .site-key { width: 10px; height: 10px; }
.site-splits { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.site-split { display: grid; gap: 6px; min-width: 0; }
.site-split-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 13px; }
.site-split-top b { font-weight: 700; color: var(--ink); }
.site-split-top span { color: var(--muted); }
.site-split-bar { display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; }
.site-half { flex: var(--g, 1) 1 0; min-width: 44px; display: flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.site-half-ar { background: var(--ink2); color: var(--card); }
.site-half-en { justify-content: flex-end; background: var(--bar); color: var(--ink); }

/* coverage: each section's sitemap pages as a track, the part that showed in the section's colour */
.site-cov { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.site-cov-row { display: grid; gap: 5px; min-width: 0; }
.site-cov-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; font-size: 13px; }
.site-cov-top b { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; color: var(--ink); }
.site-cov-top .site-key { width: 10px; height: 10px; }
.site-cov-track { display: block; height: 12px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.site-cov-track > span { display: block; width: var(--w, 0%); height: 100%; border-radius: 999px; background: var(--c, var(--bar-strong)); }
.site-cov-nums { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--ink2); }
.site-cov-nums b { font-weight: 700; color: var(--ink); }

/* positions: the «الصفحة الأولى» bracket over the page-one columns (gold, like the canvas), the other columns in the
   strong bar colour; a column with no pages keeps the chart's flat zero mark */
.site-bracket { display: flex; flex-direction: column; gap: 4px; width: calc((100% - (var(--n, 5) - 1) * 8px) * var(--k, 2) / var(--n, 5) + (var(--k, 2) - 1) * 8px); margin: 0 0 6px; text-align: center; }
.site-bracket span { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.site-bracket i { display: block; height: 8px; border: 2px solid var(--accent); border-bottom: 0; border-radius: 6px 6px 0 0; }
.site [data-block="positions"] .chart.hcols .mk:not(.zero) { background: var(--bar-strong); }
.site [data-block="positions"] .chart.hcols .mk.acc:not(.zero) { background: var(--accent); }

/* the table twin of a chart: a <details> whose summary is a 44px button */
.site-twin { margin-top: 12px; }
.site-twin > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--axis); border-radius: 10px; color: var(--ink); font-size: 13px; font-weight: 700; list-style: none; cursor: pointer; user-select: none; }
.site-twin > summary::-webkit-details-marker { display: none; }
.site-twin > summary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.site-twin[open] > summary { margin-bottom: 10px; }
.site-twin[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.site-twin > summary:hover { border-color: var(--accent); }

/* the top pages and the search terms: the cells' own widths decide; whatever does not fit scrolls inside the table's
   box (on a phone), never the page. Head words may wrap, so the five search-term columns fit beside the opportunities. */
.site-tbl thead th { white-space: normal; }
.site-tbl tbody th { min-width: 13rem; max-width: 26rem; }
.site-qo .site-tbl tbody th { min-width: 9rem; }
.site-tbl small { display: block; font-size: 11px; font-weight: 400; line-height: 1.4; }
.site-tbl .chip { padding: 1px 7px; font-size: 11px; }
.site-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.site-cell-row { flex-direction: row; align-items: center; gap: 8px; }
.site-num { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.site-mini { flex: 0 0 auto; display: block; width: 64px; height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.site-mini > span { display: block; width: var(--w, 0%); height: 100%; border-radius: 999px; background: var(--bar-strong); }
.site-link { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; max-width: 100%; color: var(--ink); font-weight: 600; text-decoration: none; }
.site-link:hover { color: var(--info); text-decoration: underline; }
.site-link .site-ext { color: var(--muted); }
.site-tag { flex: 0 0 auto; padding: 0 6px; border-radius: 6px; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 700; }
.site-good { color: var(--good); font-weight: 700; }
/* the search terms are the wider block from 1280px, as on the canvas (3 : 2) */
@media (min-width: 1280px) { .site-qo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
/* a phone: the bars beside the numbers are decoration, so they give their room to the numbers */
@media (max-width: 639.98px) {
  .site-mini { display: none; }
  .site-tbl tbody th, .site-qo .site-tbl tbody th { min-width: 9rem; }
}

/* close opportunities */
.site-opps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-opp { display: grid; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.site-opp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.site-opp-top > b { min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.site-opp .site-open { flex: 0 0 auto; padding: 0 12px; }
.site-opp-nums { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--ink2); }
.site-opp-nums b { font-weight: 700; color: var(--ink); }
.site-opp > .site-path { display: block; font-size: 12px; }
html[dir="rtl"] .site-opp > .site-path { text-align: right; }

/* small facts in a row of boxes (pages with no impressions, the audit) */
.site-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(7.5rem, 100%), 1fr)); gap: 8px; margin: 0 0 14px; }
.site-dl > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.site-dl dt { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.site-dl dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.site-examples h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.site-examples ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-examples li { max-width: 100%; }
.site-chip, .site-examples li > .site-path { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 500; }
.site-examples li > .site-path { display: inline-flex; align-items: center; border-style: dashed; }
.site-chip:hover { border-color: var(--accent); }

/* the site audit: «مفيش نتيجة لسه» until the first monthly run, then the facts, the counts by importance and the top 5 */
.site-wait { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px dashed var(--axis); border-radius: 12px; background: var(--soft); }
.site-wait p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink2); }
.site-sev { margin: 0 0 12px; }
.site-h3 { margin: 4px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.site-issues { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-issues li { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.site-issue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-issues p { margin: 0; font-size: 13px; line-height: 1.7; }
.site-issues .site-path { font-size: 12px; }

/* n8n answered, but with no Search Console numbers yet */
.site-none p { margin: 0; }
.site-none p + p { margin-top: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .site-hero, .site-period { animation: lhRise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .site-now, .site-prev, .site-cov-track > span, .site-mini > span { transform-origin: 0 50%; animation: lhGrow .9s cubic-bezier(.2, .7, .2, 1) .4s both; }
  html[dir="rtl"] :is(.site-now, .site-prev, .site-cov-track > span, .site-mini > span) { transform-origin: 100% 50%; }
  .site-prev { animation-delay: .55s; }
  .site-link, .site-chip, .site-twin > summary { transition: color .15s ease, border-color .15s ease; }
}
/* end screen: site */

/* screen: leads */
/* «الليدز» (src/views/leads.ts): the numbers, the arrival heatmap beside the card that waits for the CRM, the latest leads
   with names and phones, and the forms. Theme variables only, so all five looks wear it. Every control is 44px. A long
   name from the feed wraps inside its own cell, and the two wide tables scroll inside their own box on a phone instead
   of widening the page (Review Focus 3). Motion sits in the no-preference query at the bottom. */

/* the number row, the feed notice above it and the «no comparison» line under it */
.lv-kpis { margin: 0 0 20px; }
.lv-kpis > .kpis { margin: 0; }
.lv-kpis > .banner { margin: 0 0 12px; }
.lv-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
/* «ماوصلتش الـ CRM» above zero: the wrapper has no box (the tile stays a cell of the grid) and the number turns red.
   While the page shows more than those leads the wrapper is a link to them, and then it is the grid cell itself: the
   whole tile is the target, its small line reads as a link, and the keyboard ring goes round the tile */
.lv-bad { display: contents; }
.lv-bad .kpi { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.lv-bad .kpi-value { color: var(--bad); }
a.lv-bad { display: flex; min-width: 0; border-radius: 14px; color: inherit; text-decoration: none; }
a.lv-bad:hover { color: inherit; }
a.lv-bad > .kpi { flex: 1 1 auto; }
a.lv-bad:hover > .kpi { border-color: var(--bad); }
a.lv-bad .kpi-sub { color: var(--info); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* the heatmap beside the card that waits for the CRM; one under the other on a phone */
.lv-pair { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; margin: 0 0 20px; }
.lv-pair > .panel { flex: 2 1 420px; min-width: 0; margin: 0; }
.lv-pair > .lv-crm { flex: 1 1 280px; }
.lv-peak { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink2); }
.lv-empty { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
/* a chart's table twin: a <details> whose summary is a 44px button, open without JS */
.lv-twin { margin-top: 14px; }
.lv-twin > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--axis); border-radius: 10px; color: var(--ink2); font-size: 13px; font-weight: 700; list-style: none; cursor: pointer; user-select: none; }
.lv-twin > summary::-webkit-details-marker { display: none; }
.lv-twin > summary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lv-twin[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.lv-twin > summary:hover { color: var(--ink); border-color: var(--accent); }
.lv-twin > .tbl { margin-top: 10px; }

/* the card that waits for the CRM: the shared «لسه مش متوصل» card opened up, so the list of what it waits for sits
   under its text. The inner card has no box of its own; this wrapper wears the dashed border. */
.lv-crm { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px dashed var(--axis); border-radius: 16px; background: var(--soft); color: var(--ink2); overflow-wrap: anywhere; }
.lv-crm > .nc { display: contents; }
.lv-waits { order: 1; }
.lv-waits p { margin: 0 0 8px; font-size: 13px; color: var(--ink2); }
.lv-waits ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lv-waits li { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 700; color: var(--ink2); }

/* «آخر الليدز»: the search box in the head; a fixed table layout, so a 300-character campaign wraps in its own column
   instead of squeezing the others, and a minimum width that makes it scroll inside its box on a phone. The time, the
   customer and the CRM state come first; each column is wide enough for its longest word («Yesterday», a phone, the
   «Unexpected» of a CRM chip), so nothing breaks inside a word */
.lv-search { display: flex; flex: 1 1 320px; gap: 8px; min-width: 0; max-width: 440px; }
.lv-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--axis); border-radius: 10px; background: var(--soft); color: var(--ink); }
.lv-search .btn { flex: 0 0 auto; }
.lv-table table { table-layout: fixed; min-width: 780px; }
.lv-c-time { width: 11%; }
.lv-c-client { width: 18%; }
.lv-c-crm { width: 14%; }
.lv-c-platform { width: 13%; }
.lv-c-formProject { width: 23%; }
.lv-c-campaign { width: 21%; }
/* a phone: the first three columns take 306px of the 780, so on a 390px screen the time, the customer and the CRM state
   are in view before any swipe; the cells' sides are 8px there */
@media (max-width: 639.98px) {
  .lv-table th, .lv-table td { padding-inline: 8px; }
  .lv-table .chip { padding-inline: 8px; }
  .lv-c-time { width: 76px; }
  .lv-c-client { width: 126px; }
  .lv-c-crm { width: 104px; }
  .lv-c-platform { width: 110px; }
  .lv-c-formProject { width: 192px; }
  .lv-c-campaign { width: 172px; }
}
.lv-table td { vertical-align: top; }
.lv-time, .lv-name { display: block; font-weight: 700; color: var(--ink); }
.lv-phone { display: inline-block; font-size: 12px; color: var(--muted); }
.lv-table small, .lv-forms th small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
/* a line of its own (a name, the project under a form) is as wide as its text, so it sits at the column's start edge
   under the heading: user content takes its own direction, and an English name would otherwise align to the far side */
.lv-name, .lv-table small, .lv-forms th > span, .lv-forms th small { width: fit-content; max-width: 100%; }
/* a chip wraps inside its cell: «Unexpected reply» is wider than the CRM column on a phone */
.lv-table .chip { max-width: 100%; }
.lv-plat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lv-plats { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lv-dot { flex: 0 0 auto; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-meta); }
.lv-dot.facebook { background: var(--c-facebook); }
.lv-dot.instagram { background: var(--c-instagram); }
.lv-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.lv-pages p { margin: 0; font-size: 13px; color: var(--muted); }
.lv-pager { display: flex; gap: 8px; }
.lv-retry { margin: 10px 0 0; }

/* «الفورمات»: the form with its project under it, the leads, the change, a small weekly line and the platforms */
.lv-forms .tbl table { min-width: 600px; }
.lv-forms th > span { display: block; }
.lv-spark { display: block; width: 112px; }
/* a phone: the form's column keeps a set width, so a long form name wraps in it instead of taking the room the table has
   over the screen, and the leads beside it stay in view */
@media (max-width: 639.98px) {
  .lv-forms .tbl tbody th { width: 9em; }
}

@media (max-width: 480px) {
  .lv-search { flex-basis: 100%; max-width: none; }
  .lv-pager { flex: 1 1 100%; }
  .lv-pager .btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .lv-crm { animation: lhRise .5s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .lv-twin > summary::after { transition: transform .15s ease; }
  .lv-twin > summary { transition: border-color .15s ease, color .15s ease; }
}
/* end screen: leads */

/* screen: assistant */
/* «المساعد» (spec §5.6, canvas Assistant.dc.html): the chat card, its question box held at the bottom of the screen while
   the chat scrolls, and beside it (under it on a phone) the ready questions, where it reads from and its six rules.
   Questions and answers are plain text: pre-wrap keeps their line breaks, and «anywhere» lets a long unbroken run wrap
   instead of widening the page. Theme variables only; every control is 44px or taller. */
.assistant .banner { margin: 0 0 16px; }
.as-clear { margin: 0; }
/* the day's count sits on the page, not on a card: a hairline keeps the pill's shape in the light looks */
.assistant .page-actions .chip { border: 1px solid var(--line); }
.as-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.as-side { display: flex; flex: 1 1 300px; flex-direction: column; gap: 16px; min-width: 0; }
.as-side .panel { margin: 0; }
.as-side .panel-head { margin-bottom: 12px; }
.as-panel { padding: 18px 20px; }

/* the chat: the card holds the messages and, at its foot, the question box */
.as-chat { display: flex; flex: 2 1 600px; flex-direction: column; margin: 0; padding: 0; border-radius: 18px; }
.as-msgs { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 8px; }
.as-empty { margin: 0; padding: 16px 0 8px; color: var(--muted); }
.as-day { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12px; color: var(--muted); }
.as-day::before, .as-day::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
/* #last lands below the top of the window, not under it */
.as-msg { min-width: 0; margin: 0; scroll-margin-top: 16px; }
.as-msg time { font-size: 11px; color: var(--muted); }
/* Belal's question: a bubble at the end side, its small corner towards the edge it sits on */
.as-user { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; gap: 4px; max-width: 78%; }
.as-bubble { margin: 0; padding: 10px 14px; border-radius: 16px; border-end-end-radius: 4px; background: var(--btn); color: var(--btn-ink); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the assistant: its mark, then the answer, its small corner towards the mark */
.as-bot { display: flex; align-items: flex-start; gap: 12px; max-width: 92%; }
.as-ava { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hero); color: var(--hero-num); }
.as-answer { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; border-start-start-radius: 4px; background: var(--card); }
.as-text { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.as-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.as-src ul { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.as-src li { min-width: 0; padding: 1px 8px; border-radius: 6px; background: var(--soft); color: var(--ink2); overflow-wrap: anywhere; }
/* n8n did not answer: the same place as an answer, dashed, in the warning colours */
.as-err .as-ava { background: var(--warn-bg); color: var(--warn); }
.as-error { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px; border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); border-radius: 16px; border-start-start-radius: 4px; background: var(--warn-bg); color: var(--ink); }
.as-error p { margin: 0; font-size: 14px; line-height: 1.7; }

/* the question box: stays at the bottom of the window while the chat above it scrolls */
.as-ask { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 14px 24px 18px; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; background: var(--card); }
.as-box { display: flex; align-items: flex-end; gap: 10px; padding: 8px; padding-inline-start: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.as-box textarea { flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 40vh; padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); line-height: 1.6; resize: none; field-sizing: content; }
/* the ring goes round the whole box, where the button sits too */
@supports selector(:has(*)) {
  .as-box textarea:focus-visible { outline: none; }
  .as-box:has(textarea:focus-visible) { outline: 2px solid var(--info); outline-offset: 2px; }
}
.as-send { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--btn); color: var(--btn-ink); }
.as-send:hover { filter: brightness(1.06); }
.as-box textarea:disabled, .as-send:disabled, .as-sug-btn:disabled { cursor: not-allowed; opacity: .55; filter: none; }
html[dir="ltr"] .as-send svg, html[dir="ltr"] .as-sug-btn svg { transform: scaleX(-1); }
.as-wait { margin: 0; font-size: 13px; font-weight: 700; color: var(--info); }
/* the waiting line is a live region (role=status): until the script gives it words it is hidden from the eye only, the
   .sr way, and out of the box's flow, so it stays in the accessibility tree and a screen reader announces its words */
.as-wait:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* the ready questions: each one a button that sends it */
.as-sug { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.as-sug-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.5; text-align: start; overflow-wrap: anywhere; }
.as-sug-btn:hover { background: var(--soft); }
.as-sug-btn svg { flex: 0 0 auto; color: var(--muted); }

/* «بيقرا من فين»: one row per source, its state in a pill */
.as-status { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.as-status li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.as-status li:last-child { border-bottom: 0; }
.as-status-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.as-status-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.as-status-sub { font-size: 12px; color: var(--muted); }

/* «بيعمل إيه ومش بيعمل إيه»: on the hero colours, as on the canvas («جوهرة» adds its glow through .hero) */

/* phones and tablets: the top bar is sticky, so #last stops just below it; on a phone the cards give the text more room */
@media (max-width: 1023.98px) {
  .as-msg { scroll-margin-top: 128px; }
}
@media (max-width: 480px) {
  .as-msgs { gap: 16px; padding: 16px 14px 8px; }
  .as-ask { padding: 12px 14px 14px; }
  .as-user { max-width: 88%; }
  .as-bot { gap: 8px; max-width: 100%; }
  .as-ava { width: 28px; height: 28px; }
  .as-answer { padding: 12px 14px; }
  .as-error { padding: 10px 12px; }
  .as-panel { padding: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  .as-send, .as-sug-btn { transition: background-color .15s ease, filter .15s ease; }
  .as-wait:not(:empty) { animation: asWait 1.4s ease-in-out infinite; }
  @keyframes asWait {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
  }
}
/* end screen: assistant */

/* screen: campaigns-social */
/* «الحملات» and «السوشيال» (src/views/campaigns.ts, src/views/social.ts). Theme variables only, so all five looks wear
   them. Every control is 44px or taller, and a name from a feed (a campaign, a form, a Postiz channel) wraps inside its
   cell or card: nothing here can widen the page. Motion sits in the no-preference query at the bottom. */

/* «الحملات»: a card per ad platform — its name and state, what it needs and the ads manager. One, two or four cards
   to a row, so the four never leave one alone on a row. */
.cs-connect { margin: 0 0 20px; }
.cs-plats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 560px) { .cs-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .cs-plats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-plat { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; }
.cs-plat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cs-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.cs-dot { flex: 0 0 auto; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--bar)); }
.cs-need { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink2); }
.cs-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: auto; }
.cs-actions .btn { padding: 0 14px; font-size: 13px; }

/* the paid leads beside the spend tile: one row on a laptop, one under the other on a phone */
.cs-kpis { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; margin: 0 0 20px; }
.cs-kpis > .kpi { flex: 1 1 220px; }
.cs-kpis > .nc-tile { flex: 2 1 320px; }
.cs-kpis > .banner { flex: 1 1 220px; align-self: center; margin: 0; }

/* the campaigns table: eight columns keep their room and scroll inside the table's own box on a phone; the campaign
   name (the row header) wraps inside its cell, with its project under it. The numbers come right after the name; on a
   phone the name's column keeps a set width, so a long name wraps in it instead of taking the room the table has over
   the screen, and the leads and their share stay in view beside it */
.cs-count { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cs-table table { min-width: 720px; }
.cs-table tbody th { min-width: 10em; max-width: 18em; }
@media (max-width: 639.98px) {
  .cs-table tbody th { width: 10em; }
}
.cs-cname { display: block; font-weight: 700; color: var(--ink); }
.cs-none { font-weight: 400; color: var(--muted); }
.cs-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.cs-pls { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cs-pl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cs-forms { display: flex; flex-direction: column; gap: 2px; min-width: 9em; max-width: 16em; }
.cs-more { font-size: 12px; color: var(--muted); }
.cs-last { white-space: nowrap; }
.cs-trend { width: 112px; }
.cs-trend .spark { width: 96px; }
.cs-spend { margin: 0 0 20px; }
/* Google Ads block (Belal 17 Oct): its tiles inside the panel, its table like the leads table */
.cs-gads { margin: 0 0 20px; }
.cs-gads .cs-kpis { margin: 0 0 16px; }
.cs-gads-table table { min-width: 860px; }
.cs-gads-table td[data-col="channel"] { white-space: nowrap; }

/* «السوشيال»: a card per channel — the picture (or two letters) with the platform dot, the name and handle, the state,
   and the page and inbox buttons along the bottom */
.so-pages { margin: 0 0 20px; }
.so-real { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.so-pages > .banner, .so-pages > .muted { margin: 0 0 14px; }
.so-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.so-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px 16px; border-radius: 16px; }
.so-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
/* the state chip, right under the name and handle (the block's 2px gap; the base .chip has no margin) */
.so-id > .chip { align-self: flex-start; }
.so-avatar { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--soft); color: var(--ink); font-size: 13px; }
.so-avatar b { font-weight: 700; }
.so-avatar.so-logo { background: none; overflow: hidden; }
.so-avatar.so-logo svg { display: block; border-radius: 12px; }
/* The picture lies over the platform's letters, so they show while it loads and when it does not load (a picture link
   from Meta can expire), in every browser: WebKit draws no ::after on an <img>, so nothing here relies on one. The <img>
   stays inline and takes its size from min and max alone (width and height stay auto), so a broken one with its empty
   alt draws nothing over the letters: Chromium draws its broken-image icon and frame only for an <img> with a width and
   height, and WebKit collapses an inline broken image whose alt is empty. A picture that loads fills the badge, cropped
   to it. */
.so-pic { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; line-height: 0; }
.so-pic img { width: auto; height: auto; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; vertical-align: top; object-fit: cover; }
.so-dot { position: absolute; bottom: -3px; inset-inline-end: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--axis)); box-shadow: 0 0 0 2px var(--card); }
.so-id { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
/* the name keeps its own direction (user-content) but lines up with the rest of the card: "start" under plaintext would
   follow the name's own direction, so the side is named (match-parent stays "start" in Chrome) */
.so-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
html[dir="rtl"] .so-name { text-align: right; }
html[dir="ltr"] .so-name { text-align: left; }
.so-handle { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.so-handle > span { min-width: 0; }
.so-note { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink2); }
.so-why { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--soft); font-size: 13px; line-height: 1.8; color: var(--ink2); }
.so-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.so-actions > * { flex: 1 1 130px; }
.so-actions .btn { padding: 0 12px; font-size: 13px; }
/* not a control: says the page link is missing, in the place the button would take */
.so-missing { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px dashed var(--axis); border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; }
/* «كل السوشيال» (Belal 24 Oct): the followers of every platform together, their growth, share and a short read */
.so-sum { margin: 0 0 20px; }
.so-sum-kpis { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; margin: 0 0 18px; }
.so-share-logo svg { display: block; border-radius: 7px; }
.so-sum-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px 28px; }
.so-sum-h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.so-share { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.so-sq { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.so-sq-head { display: flex; align-items: center; gap: 8px; }
.so-sq-head .so-share-logo { width: 28px; height: 28px; }
.so-share-name { color: var(--ink); font-weight: 600; font-size: 14px; }
.so-sq-n { font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.so-sq-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); }
.so-share-logo { display: inline-flex; width: 18px; height: 18px; flex: none; }
.so-share-bar { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.so-share-bar > span { display: block; height: 100%; border-radius: inherit; }
.so-insights { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--ink2); font-size: 14px; line-height: 1.6; }
.so-stats { margin: 0 0 20px; }
/* the filter bar's chosen days (Belal 24 Oct): two date fields and their button, wrapping on a phone */
.filter-days { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.filter-day { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.filter-day input { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; color-scheme: inherit; }
.filter-day input:focus-within { outline: 2px solid var(--info); outline-offset: 2px; } /* the calendar button inside a date field is focused without :focus-visible on the field */
.filter-days button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); font-weight: 700; }
.filter-days:has(button[aria-pressed="true"]) .filter-day input { border-color: var(--btn); }
/* «أرقام السوشيال»: the period links, then a card per channel with its numbers (kpi tiles, a sparkline for daily counts) */
.so-period { display: flex; flex-wrap: wrap; gap: 6px; }
.so-period a[aria-current="page"] { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.so-stats > .banner, .so-stats > .muted { margin: 0 0 14px; }
.so-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.so-stat { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 20px; border-radius: 16px; }
.so-stat-kpis { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin: 0; }


@media (prefers-reduced-motion: no-preference) {
  .cs-plat, .so-card { animation: lhRise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .cs-plat:nth-child(2), .so-card:nth-child(2) { animation-delay: .05s; }
  .cs-plat:nth-child(3), .so-card:nth-child(3) { animation-delay: .1s; }
  .cs-plat:nth-child(n+4), .so-card:nth-child(n+4) { animation-delay: .15s; }
}
/* end screen: campaigns-social */

/* screen: today */
/* «النهارده» (src/views/today.ts): the morning summary, the rows of blocks, «محتاج انتباهك» and the two tables. Theme
   variables only, so all five looks wear it; every link and summary is 44px or taller; long names wrap or scroll inside
   their own box, never the page. Motion sits in the no-preference query at the bottom. */

/* a feed that answered from its snapshot: one notice at the top that names it */
.t-stales { display: grid; gap: 8px; margin: 0 0 16px; }
.t-stale { display: grid; gap: 2px; }
.t-stale .banner { margin: 0; }
.t-stale-name { font-size: 12px; font-weight: 700; color: var(--muted); }

/* «صباح الخير يا بلال»: today's count, the line of the day, today's leaders (canvas: three columns that wrap) */
.t-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px 40px; margin: 0 0 20px; }
.t-hero > .banner { flex: 1 1 100%; }
.t-hero p { margin: 0; }
.t-count { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.t-greet { font-size: 16px; font-weight: 700; color: var(--hero-ink); }
.t-num { display: flex; align-items: flex-end; gap: 14px; }
.t-big { font-size: 64px; font-weight: 700; line-height: .9; color: var(--hero-num); }
.t-num span { min-width: 0; font-size: 15px; line-height: 1.5; color: var(--hero-ink); }
.t-yday { font-size: 13px; }
.t-day { flex: 2 1 340px; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.t-day-t { font-size: 13px; font-weight: 700; color: var(--hero-ink); }
/* the day runs left to right in both languages, like a clock face laid flat (canvas) */
.t-line, .t-hours { position: relative; direction: ltr; }
.t-line { height: 46px; }
.t-track, .t-past { position: absolute; left: 0; top: 27px; height: 2px; border-radius: 2px; }
.t-track { right: 0; background: var(--hero-line); }
.t-past { width: calc(var(--p) * 1%); background: var(--hero-muted); opacity: .6; }
.t-dot { position: absolute; left: calc(var(--p) * 1%); top: 22px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--hero); }
.t-now { position: absolute; left: calc(var(--p) * 1%); top: 18px; width: 2px; height: 22px; margin-left: -1px; border-radius: 2px; background: var(--hero-ink); }
.t-now > span { position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1.4; white-space: nowrap; color: var(--hero-ink); }
.t-now.s > span { left: 0; transform: none; }
.t-now.e > span { left: auto; right: 0; transform: none; }
.t-hours { height: 20px; font-size: 12px; line-height: 20px; }
.t-hours span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.t-hours span:nth-child(1) { left: 0; transform: none; }
.t-hours span:nth-child(2) { left: 25%; }
.t-hours span:nth-child(3) { left: 50%; }
.t-hours span:nth-child(4) { left: 75%; }
.t-hours span:nth-child(5) { left: auto; right: 0; transform: none; }
.t-side { flex: 1 1 250px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.t-dl { margin: 0; }
.t-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--hero-line); }
.t-dl dt { flex: 0 0 auto; font-size: 13px; }
.t-dl dd { min-width: 0; margin: 0; font-weight: 700; text-align: end; color: var(--hero-ink); }
.t-hero-go { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; color: var(--hero-num); text-decoration: none; }
.t-hero-go:hover { color: var(--hero-ink); text-decoration: underline; }
.t-hero :focus-visible { outline-color: var(--hero-num); }

/* the period the numbers cover, under the filters */
.t-range { margin: -10px 0 16px; font-size: 12px; color: var(--muted); }

/* a tile whose feed is down keeps its label, and the notice sits where the number would be */
.t-down .banner { margin: 6px 0 0; font-size: 13px; }
/* six tiles: two to a row on a phone (as on «الموقع»), the three real numbers over the three not connected yet on a
   tablet or a laptop, and one row of six from 1440px (canvas), so a row never ends with one tile alone */
.today .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .today .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1440px) { .today .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* cost per lead and spend wait for the same token: its sentence shows once, on the first of the two tiles */
.today .kpis .nc-tile[data-kpi="spend"] .nc-need { display: none; }

/* rows of blocks: the chart beside the goal, then three, then two (canvas widths); one under the other on a phone */
.t-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; margin: 0 0 20px; }
.t-row > .panel, .t-grid3 > .panel, .t-grid2 > .panel { margin: 0; }
.t-wide { flex: 2 1 560px; } /* the base .panel has min-width: 0, so a wide chart shrinks with the row */
.t-narrow { flex: 1 1 300px; }
.t-grid3, .t-grid2 { display: grid; align-items: start; gap: 20px; margin: 0 0 20px; }
.t-grid3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.t-grid2 { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }

/* the sources that are not connected: one quiet line under the chart and the donut; over the chart's, the day the
   chart starts on when the log began inside the period */
.t-off { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.t-from + .t-off { margin-top: 2px; }

/* the table twin of a chart: a closed <details>, the summary is a 44px button */
.t-twin { margin-top: 12px; }
.t-twin > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--axis); border-radius: 10px; color: var(--ink); font-size: 13px; font-weight: 700; list-style: none; cursor: pointer; user-select: none; }
.t-twin > summary::-webkit-details-marker { display: none; }
.t-twin > summary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.t-twin[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.t-twin > summary:hover { border-color: var(--accent); }
.t-twin[open] > summary { margin-bottom: 10px; }
.t-twin .tbl { max-height: 22rem; overflow: auto; }

/* «هدف الشهر» */
.t-goal { display: flex; flex-direction: column; }
.t-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.t-ring .chart.ring { width: 180px; }
.t-ring-of { margin: 0; font-size: 13px; color: var(--muted); }
.t-goal-dl { display: flex; flex-wrap: wrap; gap: 1px; margin: 14px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.t-goal-dl > div { flex: 1 1 8rem; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--card); }
.t-goal-dl dt { font-size: 12px; color: var(--muted); }
.t-goal-dl dd { margin: 0; font-weight: 700; color: var(--ink); }
.t-goal-state { margin: 12px 0 0; font-size: 13px; font-weight: 700; }
.t-goal-state.ok { color: var(--good); }
.t-goal-state.warn { color: var(--warn); }
.t-goal-none { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--ink2); }
.t-goal-n { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.t-set { align-self: flex-start; margin-top: 14px; }

/* «الليد وصل لفين»: the CRM card fills the block */
.t-funnel .nc { margin: 0; }

/* the projects and tasks blocks end with a link to the full screen */
.t-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 13px; font-weight: 700; text-decoration: none; }
.t-more:hover { text-decoration: underline; }
.t-empty, .t-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

/* «محتاج انتباهك»: each line is one link, a row of at least 44px */
.t-att-list { margin: 0; padding: 0; list-style: none; }
.t-att-item + .t-att-item { border-top: 1px solid var(--grid); }
.t-att-link { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0 -8px; padding: 12px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
a.t-att-link:hover { color: inherit; background: var(--soft); }
a.t-att-link:focus-visible { outline-offset: -2px; }
.t-att-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--info-bg); color: var(--info); }
.t-att-ico.bad { background: var(--bad-bg); color: var(--bad); }
.t-att-ico.warn { background: var(--warn-bg); color: var(--warn); }
.t-att-ico.ok { background: var(--good-bg); color: var(--good); }
.t-att-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-att-t { font-weight: 700; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.t-att-d { font-size: 13px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.t-att-go { font-size: 13px; font-weight: 700; color: var(--info); }
html[dir="rtl"] .t-att-go::after { content: " ←"; }
html[dir="ltr"] .t-att-go::after { content: " →"; }
.t-att-partial { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: var(--warn); }
.t-att-calm { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--good); }

/* the two tables: the task's label with its schedule in the first cell, the status chip beside the time */
.t-name { display: block; }
.t-sched { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.t-run { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.t-err { display: block; margin-top: 4px; font-size: 12px; color: var(--bad); }
.t-muted { color: var(--muted); }
.t-health .t-when, .t-health .t-took { white-space: nowrap; }
.t-health .t-state { min-width: 9rem; }

@media (max-width: 480px) {
  .t-hero { gap: 20px; padding: 20px 18px; }
  .t-big { font-size: 52px; }
}

/* «صحة الأتمتة» on a phone: five columns do not fit, and the status would be off the screen. Each row becomes the
   name with its status beside it, and under them the schedule, the last run and how long it took, each with its label.
   The markup gives the table its roles, so it stays a table for screen readers when its rows are no longer table rows. */
@media (max-width: 640px) {
  .t-health thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .t-health table, .t-health tbody { display: block; }
  .t-health tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
  .t-health tbody tr:last-child { border-bottom: 0; }
  .t-health tbody tr::after { content: ""; order: 2; flex: 1 1 100%; }
  .t-health tbody th, .t-health tbody td { display: block; min-width: 0; max-width: none; padding: 0; border: 0; text-align: start; }
  .t-health tbody th { order: 0; flex: 1 1 0; }
  .t-health .t-state { order: 1; flex: 0 1 auto; min-width: 0; max-width: 55%; text-align: end; }
  .t-health .t-when, .t-health .t-took { order: 3; font-size: 12px; color: var(--muted); white-space: normal; }
  .t-health .t-when::before, .t-health .t-took::before { content: attr(data-label) ": "; }
}

@media (prefers-reduced-motion: no-preference) {
  .t-line { animation: lhWipe 1.2s cubic-bezier(.3, .7, .2, 1) .35s both; }
  .t-now { animation: lhTodayNow 1.8s ease-in-out 2; } /* two blinks, then still: nothing blinks for more than 5 s (WCAG 2.2.2) */
  .t-att-link, .t-twin > summary { transition: background-color .15s ease, border-color .15s ease; }
  .t-twin > summary::after { transition: transform .15s ease; }
}
@keyframes lhTodayNow { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* end screen: today */

/* screen: realtime — «الزوار دلوقتي» (Belal 16 Oct). The look's own variables only, so all five looks wear it: the hero is
   --hero with the --hero-num gold, the countries with visitors are --accent gold on the map. The live dot and the map's
   dots pulse twice after each refresh, then stay still (nothing moves for more than 5 s, WCAG 2.2.2). A refreshed block
   (class «again», set by /js/realtime.js) does not replay the entrance, so the page does not bounce every minute. */
.rt-card { display: flex; align-items: center; gap: 14px; min-height: 64px; margin: 0 0 20px; padding: 14px 18px; border-radius: 16px; background: var(--hero); color: var(--hero-ink); text-decoration: none; box-shadow: var(--shadow); }
.rt-card:hover { color: var(--hero-ink); filter: brightness(1.06); }
.rt-card-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.rt-card-text b { font-size: 16px; }
.rt-card-go { flex: 0 0 auto; font-size: 20px; color: var(--hero-num); }
.rt-live-dot { position: relative; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }
.rt-updated { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.rt-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0 0 20px; padding: 22px 24px; border-radius: 18px; background: var(--hero); color: var(--hero-ink); box-shadow: var(--shadow); }
.rt-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.rt-total { font-size: 64px; font-weight: 800; line-height: 1; color: var(--hero-num); }
.rt-word { display: flex; flex-direction: column; min-width: 0; }
.rt-word span { font-size: 17px; font-weight: 700; }
.rt-word small { font-size: 13px; color: var(--hero-muted); }
.rt-minutes { min-width: 0; }
.rt-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 3px; height: 92px; }
.rt-bar { display: block; height: max(var(--h), 4%); border-radius: 3px 3px 1px 1px; background: var(--hero-num); opacity: .78; }
.rt-bar.zero { height: 2px; opacity: .28; }
.rt-bar.now { opacity: 1; box-shadow: 0 0 0 1px var(--hero-ink); }
.rt-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--hero-muted); }
@media (min-width: 900px) {
  .rt-hero { grid-template-columns: minmax(220px, auto) minmax(0, 1fr); align-items: center; gap: 28px; }
  .rt-total { font-size: 76px; }
}
@media (max-width: 480px) {
  .rt-hero { padding: 20px 16px; }
  .rt-total { font-size: 52px; }
  .rt-bars { gap: 2px; height: 72px; }
}
.rt-map-wrap { position: relative; overflow: hidden; border-radius: 12px; background: var(--soft); }
.rt-map { display: block; width: 100%; height: auto; }
/* the land keeps hairline borders at any zoom (non-scaling strokes); the countries with visitors are a light gold tint */
.rt-map .land path, .rt-map .land circle { fill: color-mix(in srgb, var(--ink) 15%, transparent); stroke: var(--soft); stroke-width: .6; vector-effect: non-scaling-stroke; }
.rt-map .land .lit { fill: color-mix(in srgb, var(--accent) 32%, color-mix(in srgb, var(--ink) 12%, transparent)); }
/* a circle per city (Belal 16 Oct 19:51, «زي انلتكس»): gold, partly see-through, with a solid gold ring; its radius is set
   from the box's width (src/lib/realtime/map.ts, public/js/realtime.js) so it reads the same at every zoom */
.rt-map .spot { fill: var(--accent); fill-opacity: .42; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; cursor: pointer; outline: none; }
.rt-map .spot:hover, .rt-map .spot:focus-visible { fill-opacity: .7; stroke: var(--ink); stroke-width: 2.2; }
.rt-map .pl { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; }
.rt-zoom { position: absolute; z-index: 1; top: 8px; inset-inline-start: 8px; display: flex; gap: 6px; }
.rt-zb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; font-size: 19px; font-weight: 700; line-height: 1; box-shadow: var(--shadow); cursor: pointer; }
.rt-zb:hover { border-color: var(--accent); }
.rt-zb-world { padding: 0 10px; font-size: 13px; }
@media (max-width: 480px) {
  .rt-zoom { top: 6px; inset-inline-start: 6px; gap: 4px; }
  .rt-zb-world { padding: 0; }
  .rt-zb-world span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* a phone shows the globe; the name stays for screen readers */
}
.rt-tip { position: absolute; z-index: 2; max-width: calc(100% - 16px); padding: 4px 10px; border-radius: 8px; background: var(--ink); color: var(--card); font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); }
.rt-tip.below { transform: translate(-50%, 8px); }
.rt-map-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.rt-credit { margin-inline-start: auto; color: var(--muted); }
.rt-empty { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rt-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--good); animation: rtPing 1.6s ease-out 3; }
  .rt-map .pl { transform-box: fill-box; transform-origin: center; animation: rtPulse 1.6s ease-out 3; }
  .rt-bars .rt-bar { transform-origin: bottom; animation: lhBarUp .6s cubic-bezier(.2, .7, .2, 1) both; }
  .rt-live.again .panel, .rt-live.again .nc, .rt-live.again .chart.hbars .bar, .rt-live.again .rt-bar { animation: none; }
}
@keyframes rtPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes rtPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
/* end screen: realtime */

/* ── «زجاج» and «خريطة»: what the variables alone cannot do (Belal 23 Oct) ─────────────── */
/* glass: the panels are frosted glass over the grey, with the iPhone's big round corners */
html[data-theme="glass"] { background-color: #2C2C30; background-repeat: no-repeat; }
html[data-theme="glass"] :is(.card, .panel, .kpi, .nc, .side-card, .so-stat, .so-card) {
  background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); border-radius: 26px;
}
html[data-theme="glass"] :is(.btn, .chip) { border-radius: 999px; }
/* map: each card in a row takes the next tint and its border; tags and chips in monospace */
html[data-theme="map"] :is(.kpis, .so-cards, .so-stat-cards, .cards, .so-stat-kpis) > * { border-width: 1.5px; }
html[data-theme="map"] :is(.kpis, .so-cards, .so-stat-cards, .cards, .so-stat-kpis) > :nth-child(6n+1) { background-color: #131E36; border-color: #3B5B9A; }
html[data-theme="map"] :is(.kpis, .so-cards, .so-stat-cards, .cards, .so-stat-kpis) > :nth-child(6n+2) { background-color: #0F2A2C; border-color: #2C7A78; }
html[data-theme="map"] :is(.kpis, .so-cards, .so-stat-cards, .cards, .so-stat-kpis) > :nth-child(6n+3) { background-color: #2A2112; border-color: #8A6A2A; }
html[data-theme="map"] :is(.kpis, .so-cards, .so-stat-cards, .cards, .so-stat-kpis) > :nth-child(6n+4) { background-color: #2E1A0E; border-color: #C2672A; }
html[data-theme="map"] :is(.kpis, .so-cards, .so-stat-cards, .cards, .so-stat-kpis) > :nth-child(6n+5) { background-color: #1E1B30; border-color: #5E4E9A; }
html[data-theme="map"] :is(.kpis, .so-cards, .so-stat-cards, .cards, .so-stat-kpis) > :nth-child(6n) { background-color: #122418; border-color: #3D7A52; }
html[data-theme="map"] :is(.chip, .count)[lang="en"], html[lang="en"][data-theme="map"] :is(.chip, .count, .kpi-label) { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0; }
/* «كل أرقام المنصة»: what Postiz gives besides the five shared numbers, one tap away */
.so-raw > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink2); font-size: 13px; font-weight: 600; }
.so-raw[open] > summary { margin-bottom: 10px; }

/* «تحكم المحتوى» (Belal 25 Oct, for the iPad): a number and its button on one row, 44px to touch */
.num-form { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.num-form input[type=number] { width: 84px; min-height: 44px; font-size: 16px; text-align: center; }
.order-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.mode-head { margin: 10px 0 0; }

/* «الموقع»: the content system's blocks and the item page (src/views/site-content.ts). Everything is under .sc-blocks or
   .sc-item and wears the look's variables only. «مستنيك» is the one loud thing: the rest is small type and colour dots.
   Every link and control is a 44px target. Motion (transform and opacity only) sits in the no-preference query at the end. */
.sc-blocks { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; margin: 0 0 24px; }
.sc-blocks > .panel, .sc-item .panel { margin: 0; animation: none; }
.sc-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sc-item > .page-head { margin: 0; align-items: flex-start; }
.sc-item > .page-head h1 { font-size: clamp(20px, 2.4vw + 12px, 28px); font-weight: 800; line-height: 1.45; unicode-bidi: plaintext; }
@media (max-width: 759px) { .sc-item > .page-head { flex-direction: column-reverse; gap: 6px; } }
@media (min-width: 1100px) {
  .sc-blocks { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
  .sc-blocks > :not(.sc-list) { grid-column: 1 / -1; }
}

/* small things shared by the blocks */
.sc-blocks .sc-h, .sc-item .sc-h { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 6px; }
.sc-more, .sc-kind, .sc-when { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.sc-more { margin: 0; }
.sc-none { margin: 0; padding: 8px 0 10px; color: var(--muted); }
.sc-what { display: flex; flex-direction: column; min-width: 0; }
.sc-what > .sc-kind { margin-top: -9px; padding-bottom: 9px; }
.sc-link { text-wrap: balance; display: inline-flex; align-items: center; align-self: flex-start; min-width: 44px; min-height: 44px; max-width: 100%; padding: 6px 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 700; line-height: 1.55; text-decoration: none; }
.sc-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sc-blocks :is(input, select, textarea), .sc-item textarea { min-width: 0; min-height: 48px; padding: 11px 12px; border: 1px solid var(--axis); border-radius: 12px; background: var(--soft); color: var(--ink); }
.sc-blocks .btn, .sc-item .btn { min-height: 48px; }

/* the colour dot: green ran on time, yellow late, red failed or stopped, an empty ring has nothing to say yet */
.sc-dot { position: relative; flex: 0 0 auto; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--axis); }
.sc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
.sc-dot.sc-ok { background: var(--good); }
.sc-dot.sc-warn { background: var(--warn); }
.sc-dot.sc-bad { background: var(--bad); }
.sc-dot.sc-muted { background: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--axis) 70%, var(--ink2)); } /* the ring stays visible on a dark look */
.sc-dot.sc-busy { background: var(--info); box-shadow: none; }
.sc-st { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink2); white-space: nowrap; }

/* the line that answers a button: «اتضاف», «اتعاد للكاتب» … */
.sc-notice { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 6px 16px 6px 14px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-weight: 700; }
.sc-notice[data-tone="muted"] { background: var(--soft); color: var(--ink2); }
.sc-tick { flex: 0 0 auto; width: 7px; height: 12px; margin: -3px 4px 0; border: solid currentColor; border-width: 0 2.5px 2.5px 0; border-radius: 1px; transform: rotate(45deg); }
.sc-notice[data-tone="muted"] .sc-tick { display: none; }

/* مستنيك */
.sc-blocks > .sc-wait { padding: 18px 20px 6px; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.sc-wait-head { display: flex; align-items: center; gap: 12px; margin: 0 0 2px; }
.sc-wait-head h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.sc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-ink); font-size: 15px; font-weight: 800; line-height: 1; }
.sc-wait-list { margin: 0; padding: 0; list-style: none; }
.sc-wait-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; padding: 12px 0 16px; border-top: 1px solid var(--line); }
.sc-wait-item:first-child { border-top: 0; }
.sc-wait-title { font-size: 18px; font-weight: 800; }
.sc-wait-do { position: relative; min-width: 0; }
.sc-wait-do > .sc-go { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: calc(50% - 5px); }
.sc-wait-do .btn { width: 100%; min-height: 52px; border-radius: 14px; font-size: 17px; font-weight: 800; }
.sc-wait-do .sc-back > summary { margin-inline-start: calc(50% + 5px); width: calc(50% - 5px); list-style: none; cursor: pointer; user-select: none; }
.sc-back > summary::-webkit-details-marker { display: none; }
.sc-back[open] > summary { border-color: var(--accent); background: var(--soft); }
.sc-back > .sc-return { display: flex; gap: 10px; margin-top: 10px; transform-origin: top; }
.sc-back > .sc-return input { flex: 1 1 0; min-height: 52px; border-radius: 14px; }
.sc-back > .sc-return .btn { flex: 0 0 auto; width: auto; padding: 0 22px; border-color: var(--bad); color: var(--bad); }
@media (min-width: 760px) {
  .sc-wait-item { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; padding: 10px 0 14px; }
  .sc-wait-do { margin-top: 4px; }
}
/* جاهز للنشر: the second voice. What was approved on one side, the one «انشر» on the other (under the list on a phone).
   After the press the button's place is taken by «اتطلب» and the time; when more is waiting the button comes back under it. */
.sc-blocks > .sc-ready { padding: 14px 20px 18px; }
.sc-ready-head { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; }
.sc-ready-head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--ink); scroll-margin-top: 84px; }
.sc-n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--axis); color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1; }
.sc-ready-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 28px; }
.sc-ready-list { margin: 0; padding: 0; list-style: none; }
.sc-ready-list > li { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--grid); }
.sc-ready-list > li:first-child { border-top: 0; }
.sc-ready-list .sc-what, .sc-ready-list .sc-st { grid-column: 1; grid-row: 1; }
.sc-ready-list .sc-st { align-self: end; justify-self: end; padding-bottom: 9px; }
.sc-ready-list [data-pub="unverified"] > .sc-st { color: var(--bad); }
.sc-ready-do { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; }
.sc-ready-do form { margin: 0; }
.sc-ready-do .btn { width: 100%; min-height: 58px; gap: 10px; border-radius: 14px; font-size: 19px; font-weight: 800; }
.sc-ready-do .btn b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 14px; line-height: 1; }
.sc-asked { display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 0; padding: 0 18px; border-radius: 14px; background: var(--soft); color: var(--ink); font-size: 17px; }
.sc-asked b { font-weight: 800; }
.sc-asked .sc-when { margin-inline-start: auto; font-size: 13.5px; color: var(--ink2); }
.sc-ready-do > .sc-asked + form { margin-top: 2px; }
@media (min-width: 760px) {
  .sc-ready-body { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .sc-ready-do { margin-top: 6px; }
}
/* nothing waiting: one quiet line, no card */
.sc-quiet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 0 4px; }
.sc-quiet p { margin: 0; color: var(--ink2); }

/* الحالة */
.sc-blocks > .sc-status { padding: 12px 20px; }
.sc-blocks > .sc-status.sc-calm { padding: 0 4px; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
.sc-calm .sc-head { justify-content: flex-start; margin: 0; }
.sc-status .sc-head { flex-wrap: wrap; }
.sc-status:not(.sc-calm) .sc-head > .sc-h { margin-inline-end: auto; } /* the runs count and the Semrush line stay together at the end */
.sc-status .sc-head > .sc-more { white-space: nowrap; } /* a figure and its name never wrap alone on a phone */
.sc-off { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ink2); }
.sc-parts, .sc-stuck, .sc-queue, .sc-live, .sc-reasons { margin: 0; padding: 0; list-style: none; }
.sc-part { display: flex; align-items: center; gap: 4px 10px; min-height: 40px; border-top: 1px solid var(--grid); }
.sc-part:first-child { border-top: 0; }
.sc-part b { font-weight: 700; color: var(--ink); }
.sc-part .sc-when { margin-inline-start: auto; }
.sc-part .sc-more { order: 1; padding: 1px 9px; border-radius: 999px; background: var(--soft); color: var(--ink2); }
.sc-part[data-tone="bad"] .sc-more { color: var(--bad); }
.sc-part[data-tone="warn"] .sc-more { color: var(--warn); }
.sc-stuck { margin-top: 4px; border-top: 1px solid var(--line); }
.sc-stuck li { display: flex; align-items: center; gap: 10px; }
.sc-stuck .sc-link { flex: 1 1 auto; align-self: auto; }
.sc-stuck .sc-kind { flex: 0 0 auto; color: var(--bad); font-weight: 700; }
@media (min-width: 900px) {
  .sc-parts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .sc-part { flex-wrap: wrap; align-content: start; min-height: 52px; padding: 6px 18px; border-top: 0; border-inline-start: 1px solid var(--grid); }
  .sc-part:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .sc-part .sc-when { order: 2; flex: 0 0 100%; margin: 0; padding-inline-start: 20px; }
}

/* القايمة and اللي نزل */
.sc-blocks > .sc-list { padding: 14px 20px 10px; }
.sc-queue { counter-reset: scq; }
.sc-q, .sc-live > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 14px; border-top: 1px solid var(--grid); }
.sc-q { grid-template-columns: 22px minmax(0, 1fr); counter-increment: scq; }
.sc-q::before { content: counter(scq); align-self: start; padding-top: 11px; color: var(--muted); font-size: 13px; font-weight: 700; }
.sc-q > .sc-what { grid-column: 2; grid-row: 1; }
.sc-q > .sc-st { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; padding-bottom: 9px; }
.sc-q:first-child, .sc-live > li:first-child { border-top: 0; }
.sc-pos { min-width: 44px; font-size: 16px; font-weight: 800; text-align: end; color: var(--ink); }
.sc-pos.sc-top { color: var(--good); }
.sc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.sc-ix { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink2); }
.sc-ix .sc-dot { width: 8px; height: 8px; }
.sc-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "k a"; gap: 8px; margin: 8px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-topic select { grid-area: k; }
.sc-topic input { grid-area: t; }
.sc-topic .btn { grid-area: a; padding: 0 28px; }
@media (min-width: 560px) {
  .sc-topic { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k t a"; }
}

/* the item page */
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: -6px 0 0; }
.sc-meta .sc-kind, .sc-meta .sc-st { font-size: 13px; }
.sc-meta .sc-st .sc-when { font-weight: 400; }
.sc-reasons .sc-kind { font-size: 11.5px; font-weight: 700; }
.sc-item .sc-decide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.sc-do { min-width: 0; padding: 4px; border-radius: 16px; }
.sc-do form { margin: 0; }
.sc-decide .sc-go .btn { width: 100%; min-height: 56px; border-radius: 14px; font-size: 18px; font-weight: 800; }
.sc-decide .sc-return { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 10px; }
.sc-decide .sc-return textarea { width: 100%; min-height: 56px; border-radius: 14px; resize: vertical; }
.sc-decide .sc-return .btn { min-height: 56px; padding: 0 28px; border-color: var(--bad); border-radius: 14px; color: var(--bad); font-size: 17px; font-weight: 800; }
.sc-focus { box-shadow: 0 0 0 2px var(--accent); }
@media (min-width: 760px) {
  .sc-item .sc-decide { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); align-items: start; }
  .sc-decide .sc-return { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-item .sc-decide.sc-two { grid-template-columns: repeat(2, minmax(0, 280px)); }
}
.sc-decide.sc-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-item .sc-said, .sc-item .sc-before { padding: 12px 20px 14px; }
.sc-said p { margin: 4px 0 0; font-size: 15px; line-height: 1.8; color: var(--ink); }
.sc-reasons { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; }
.sc-reasons li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sc-reasons code { font: inherit; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.sc-item .sc-after { margin: 6px 4px -4px; }
.sc-fields.sc-facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 6px; }
.sc-fields.sc-facts > div { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; border: 0; }
@media (max-width: 559px) { .sc-fields.sc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .sc-facts > .sc-wide { grid-column: 1 / -1; } }
.sc-facts dd { font-weight: 700; }
.sc-locales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); align-items: start; gap: 12px; }
.sc-item .sc-locale { min-width: 0; padding: 14px 20px 20px; }
.sc-fields { display: grid; gap: 0; margin: 4px 0 0; }
.sc-fields > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--grid); }
.sc-fields > div:first-child { border-top: 0; }
.sc-fields dt { font-size: 12.5px; color: var(--muted); }
.sc-fields dd { margin: 0; color: var(--ink); line-height: 1.7; overflow-wrap: anywhere; }
.sc-f-title dd { font-size: 17px; font-weight: 800; line-height: 1.5; }
.sc-frame { display: block; width: 100%; height: 460px; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (max-width: 759px) { .sc-frame { height: max(460px, 70vh); } }

/* motion: one entrance for what waits, a ring on red and late dots, the reason field opening, the line after a button,
   «اتطلب» setting in after «انشر» */
@keyframes scIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scDrop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes scTick { from { opacity: 0; transform: rotate(45deg) scale(.2); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes scPing { 0% { opacity: .6; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3); } }
@keyframes scBreath { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes scOpen { from { opacity: 0; transform: translateY(-6px) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes scSet { from { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes scFresh { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes scFreshRtl { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sc-wait-item { animation: scIn .45s cubic-bezier(.2, .8, .2, 1) both; }
  .sc-wait-item:nth-child(2) { animation-delay: .06s; }
  .sc-wait-item:nth-child(3) { animation-delay: .12s; }
  .sc-wait-item:nth-child(n+4) { animation-delay: .18s; }
  .sc-count { animation: lhPop .4s cubic-bezier(.3, 1.6, .5, 1) .15s both; }
  .sc-notice { animation: scDrop .4s cubic-bezier(.2, .9, .3, 1.2) both; }
  .sc-tick { animation: scTick .35s cubic-bezier(.3, 1.8, .5, 1) .25s both; }
  :is(.sc-part, .sc-stuck, .sc-meta, .sc-ready-list) .sc-dot.sc-bad::after { animation: scPing 1.8s cubic-bezier(.2, .6, .3, 1) infinite; }
  :is(.sc-part, .sc-asked) .sc-dot.sc-warn::after { animation: scPing 2.8s cubic-bezier(.2, .6, .3, 1) .4s infinite; }
  /* the answer to «انشر»: the plate sets in where the button was, then each covered row gets its mark */
  .sc-ready[data-fresh] .sc-asked { animation: scSet .5s cubic-bezier(.2, .8, .2, 1) both; }
  .sc-ready[data-fresh] [data-pub="requested"] > .sc-st { animation: scIn .4s cubic-bezier(.2, .8, .2, 1) .28s both; }
  .sc-ready[data-fresh] li:nth-child(2) > .sc-st { animation-delay: .36s; }
  .sc-ready[data-fresh] li:nth-child(3) > .sc-st { animation-delay: .44s; }
  .sc-ready[data-fresh] li:nth-child(n+4) > .sc-st { animation-delay: .52s; }
  .sc-dot.sc-busy { animation: scBreath 1.6s ease-in-out 3; }
  .sc-back[open] > .sc-return { animation: scOpen .22s cubic-bezier(.2, .8, .2, 1) both; }
  .sc-q.sc-new { animation: scFresh .5s cubic-bezier(.2, .8, .2, 1) .1s both; }
  html[dir="rtl"] .sc-q.sc-new { animation-name: scFreshRtl; }
  .sc-blocks .btn, .sc-item .btn { transition: transform .12s ease, opacity .12s ease; }
  .sc-blocks .btn:active, .sc-item .btn:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-blocks *, .sc-blocks *::after, .sc-item *, .sc-item *::after { animation: none !important; transition: none !important; }
}