/* موثّق dashboard. Tokens and base come from the public site's site.css; one step denser, for daily editing work.
   Wax red is Muwathaq's own mark only: the dots before a section heading, one primary button per screen, the
   current nav item, row arrows, firm stamps, and validation. Never a background, a badge or a hover. */

@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("fonts/redhatmono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Vazirmatn Fallback"; src: local("Segoe UI"), local("Tahoma"), local("Arial"); size-adjust: 104%; ascent-override: 98%; descent-override: 36%; }

:root {
  --ink: #15171A;
  --ink-2: #393E44;
  --mute: #5A626B;
  --line: #D6DADE;
  --line-2: #BEC4CA;
  --table: #EEF0F2;
  --table-2: #E3E6E9;
  --sheet: #FFFFFF;
  --wax: #B0241C;
  --wax-deep: #7E1712;
  --wax-hover: #951E17;
  --wax-1: #EBC8C6;
  --wax-2: #D79290;
  --wax-3: #C45B55;
  --cord: #6B737C;
  --on-ink: #FFFFFF;
  --on-ink-2: #C5CBD1;
  --on-ink-3: #8F98A1;
  --head: #F7F8F9;
  --c1: #15171A;
  --c2: #41474E;
  --c3: #717A83;
  --c4: #A5ADB5;
  --c5: #CDD2D7;

  --font: "Vazirmatn", "Vazirmatn Fallback", system-ui, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-title: 1.5rem;
  --fs-h2: 1.25rem;
  --fs-ui: .9375rem;
  --fs-xs: .8125rem;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 18px;

  --shadow-1: 0 1px 2px rgb(21 23 26 / .04);
  --shadow-2: 0 2px 4px rgb(21 23 26 / .05), 0 12px 24px -14px rgb(21 23 26 / .18);
  --shadow-pop: 0 2px 6px rgb(21 23 26 / .08), 0 24px 48px -18px rgb(21 23 26 / .32);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t: 260ms;

  --top-h: 60px;
  --side-w: 248px;
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.5 -.5 1 1'%3E%3Cg fill='%23B0241C'%3E%3Ccircle cy='-.219' r='.2'/%3E%3Ccircle cx='-.27' cy='.184' r='.2'/%3E%3Ccircle cx='.27' cy='.184' r='.2'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden], [x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); scrollbar-color: var(--cord) var(--table); scrollbar-width: thin; }
body { margin: 0; background: var(--table); color: var(--ink); font: 400 var(--fs-ui)/1.65 var(--font); letter-spacing: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-feature-settings: "kern", "calt"; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color var(--t-fast); }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: normal; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; letter-spacing: normal; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
::selection { background: var(--ink); color: var(--on-ink); }
input, textarea { caret-color: var(--wax); }
:focus-visible { outline: 2px solid var(--wax); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.seal { width: 18px; height: 18px; flex: none; overflow: visible; color: var(--ink); --seal-on: #fff; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0; font-feature-settings: "zero"; font-size: .8125rem; direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; }
.mute { color: var(--mute); }
.xs { font-size: var(--fs-xs); line-height: 1.6; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -80px; z-index: 200; background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1.5px solid transparent; font-weight: 700; font-size: var(--fs-ui); line-height: 1.2; text-decoration: none; white-space: nowrap; background: none; transition: background var(--t-fast), border-color var(--t-fast); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .icon { width: 18px; height: 18px; }
.btn-wax { background: var(--wax); color: var(--on-ink); }
.btn-wax:hover { background: var(--wax-hover); }
.btn-wax:disabled { background: var(--line-2); color: var(--sheet); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: #2B3036; }
.btn-line { background: var(--sheet); color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--ink); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-xs); border-radius: 9px; }
.btn-block { width: 100%; }
.btn-text { background: none; border: 0; padding: 0; min-height: 44px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: .3em; }
.btn.is-busy { position: relative; }
.btn.is-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }

/* ---------- shell ---------- */
.dash { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr); min-height: 100dvh; }
.dash-side { grid-row: 1 / -1; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--ink); color: var(--on-ink-2); min-width: 0; }
.dash-brand { display: flex; align-items: center; gap: 12px; height: var(--top-h); padding-inline: 18px; text-decoration: none; flex: none; }
.dash-brand .mark { width: 32px; height: 32px; }
.dash-brand .word { height: 24px; width: auto; }
.dash-nav { flex: 1; padding: 4px 10px 12px; overflow-y: auto; display: grid; align-content: start; gap: 2px; scrollbar-width: thin; scrollbar-color: #3A3F46 transparent; }
.nav-group { margin-top: 18px; padding: 0 10px 6px; font-size: 12px; font-weight: 600; color: var(--on-ink-3); }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: 10px; color: var(--on-ink-2); font-weight: 500; font-size: .875rem; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.nav-item .icon { width: 19px; height: 19px; color: var(--on-ink-3); transition: color var(--t-fast); }
.nav-item:hover { background: rgb(255 255 255 / .06); color: var(--on-ink); }
.nav-item:hover .icon { color: var(--on-ink); }
.nav-item[aria-current="page"] { background: var(--wax); color: var(--on-ink); font-weight: 700; }
.nav-item[aria-current="page"] .icon { color: var(--on-ink); }
.nav-item[aria-current="page"]::after { content: ""; margin-inline-start: auto; width: 14px; height: 14px; background: var(--dots) center / contain no-repeat; }
.nav-item:focus-visible, .dash-brand:focus-visible, .side-user a:focus-visible, .side-user .icon-btn:focus-visible { outline-color: var(--on-ink); }
.nav-badge { margin-inline-start: auto; min-width: 22px; height: 20px; padding-inline: 6px; display: grid; place-items: center; border-radius: 6px; background: var(--wax); color: var(--on-ink); font-size: 12px; font-weight: 600; }
.nav-item[aria-current="page"] .nav-badge { margin-inline-start: auto; background: var(--on-ink); color: var(--wax); }
.dash-side .nav-item[aria-current="page"]::after { display: none; }
.side-user { flex: none; display: flex; align-items: center; gap: 4px; margin: 10px; padding: 6px; border-radius: 12px; background: rgb(255 255 255 / .06); }
.side-user a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-ink); border-radius: 8px; }
.side-user .avatar { width: 32px; height: 32px; background: var(--on-ink); color: var(--ink); }
.side-user-t { min-width: 0; display: grid; line-height: 1.35; }
.side-user-t b { font-size: .8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-t small { font-size: 12px; color: var(--on-ink-3); }
.side-user .icon-btn { width: 36px; height: 36px; color: var(--on-ink-2); }
.side-user .icon-btn:hover { background: rgb(255 255 255 / .1); color: var(--on-ink); }

.dash-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding-inline: clamp(16px, 2vw, 32px); background: rgb(255 255 255 / .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.dash-main { min-width: 0; padding: 24px clamp(16px, 2vw, 32px) 64px; }
.dash-main > * { max-width: 1400px; margin-inline: auto; }
.top-menu { display: none; width: 44px; min-height: 44px; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--r-sm); }
.top-menu .icon { width: 22px; height: 22px; }
.dash-top .top-fold { width: 36px; height: 36px; color: var(--mute); }
.top-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.top-search { margin-inline-end: 0 !important; }
.top-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--sheet); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast); }
.top-btn:hover { border-color: var(--ink); color: var(--ink); }
.top-btn .icon { width: 16px; height: 16px; }
.top-sep { width: 1px; height: 24px; margin-inline: 4px; background: var(--line); }
.top-caret { width: 14px !important; height: 14px !important; opacity: .7; transition: transform var(--t-fast); }
.top-menu-d[open] .top-caret { transform: rotate(180deg); }
.top-menu-d > summary { list-style: none; }
.top-menu-d > summary::-webkit-details-marker { display: none; }
.top-count { position: absolute; inset-block-start: 3px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding-inline: 4px; display: grid; place-items: center; border-radius: 9px; background: var(--ink); color: var(--on-ink); font-size: 10.5px; font-weight: 600; box-shadow: 0 0 0 2px var(--sheet); }
.top-user-t { display: grid; line-height: 1.3; text-align: start; }
.top-user-t b { font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.top-user-t small { font-size: 11.5px; color: var(--mute); }
.menu-pop { position: absolute; z-index: 40; inset-block-start: calc(100% + 8px); inset-inline-end: 0; width: 260px; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); overflow: hidden; animation: rise var(--t-fast) var(--ease); }
.menu-pop.is-wide { width: min(360px, calc(100vw - 24px)); }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-block-end: 1px solid var(--line); }
.pop-head b { font-size: .875rem; }
.pop-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.pop-list a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
.pop-list a:hover, .pop-list a:focus-visible { background: var(--table); }
.pop-list .panel-ic { width: 34px; height: 34px; }
.pop-t { display: grid; min-width: 0; line-height: 1.45; }
.pop-t b { font-size: var(--fs-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-t small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-empty { display: grid; justify-items: center; gap: 8px; padding: 24px 16px; font-size: var(--fs-xs); color: var(--mute); }
.pop-foot { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border-block-start: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; }
.pop-foot:hover { background: var(--table); }
.pop-foot .icon { width: 14px; height: 14px; }
.pop-me { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-block-end: 1px solid var(--line); }
.avatar.is-lg { width: 40px; height: 40px; font-size: 14px; background: var(--ink); color: var(--on-ink); }
.pop-links { padding: 6px; }
.pop-links a, .pop-out button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: none; font-size: var(--fs-xs); font-weight: 500; color: var(--ink); text-decoration: none; text-align: start; }
.pop-links a:hover, .pop-out button:hover, .pop-links a:focus-visible, .pop-out button:focus-visible { background: var(--table); }
.pop-links .icon, .pop-out .icon { width: 17px; height: 17px; color: var(--mute); }
.pop-out { padding: 6px; border-block-start: 1px solid var(--line); }
.top-add .menu-list { inset-inline-start: auto; inset-inline-end: 0; }
@media (max-width: 767px) { .top-btn, .top-sep, .top-caret, .top-user-t { display: none; } .top-user { padding: 2px; } }
.top-bell { position: relative; width: 40px; height: 40px; color: var(--ink-2); }
.top-dot { position: absolute; inset-block-start: 8px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--sheet); }
.top-user { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 8px 2px 4px; border-radius: 10px; cursor: pointer; transition: background var(--t-fast); }
.top-user:hover, .top-menu-d[open] > .top-user { background: var(--table); }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--table-2); color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1; flex: none; transition: background var(--t-fast), color var(--t-fast); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; z-index: 40; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-width: 190px; padding: 6px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); animation: rise var(--t-fast) var(--ease); }
.menu-list a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: .875rem; font-weight: 500; text-decoration: none; }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--table); }
.menu-list .icon { width: 18px; height: 18px; color: var(--mute); }

.drawer { padding: 0; border: 0; margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(300px, 86vw); background: var(--ink); color: var(--on-ink-2); box-shadow: var(--shadow-pop); }
.drawer::backdrop { background: rgb(21 23 26 / .5); }
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in var(--t) var(--ease); }
.drawer .dash-brand { justify-content: space-between; }
.drawer .dash-brand .icon-btn { color: var(--on-ink); }
.drawer .dash-brand .icon-btn:hover { background: rgb(255 255 255 / .1); }
@keyframes drawer-in { from { transform: translateX(16px); opacity: 0; } }

@media (min-width: 1024px) {
  .side-rail .dash { --side-w: 72px; }
  .side-rail .dash-side .dash-brand { justify-content: center; padding: 0; }
  .side-rail .dash-side .word, .side-rail .dash-side .nav-group, .side-rail .dash-side .nav-label, .side-rail .dash-side .side-user-t, .side-rail .dash-side .side-user form { display: none; }
  .side-rail .dash-side .nav-item { justify-content: center; padding: 0; min-height: 44px; }
  .side-rail .dash-side .nav-item[aria-current="page"]::after { position: absolute; inset-inline-end: 4px; top: 4px; width: 8px; height: 8px; }
  .side-rail .dash-side .nav-badge { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; min-width: 18px; height: 16px; padding-inline: 3px; font-size: 11px; }
  .side-rail .dash-side .side-user { justify-content: center; background: none; }
  .side-rail .dash-side .side-user a { flex: none; }
  .side-rail .top-fold .icon { transform: scaleX(-1); }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .dash { --side-w: 72px; }
  .dash-side .dash-brand { justify-content: center; padding: 0; }
  .dash-side .word, .dash-side .nav-group, .dash-side .nav-label, .dash-side .side-user-t, .dash-side .side-user form { display: none; }
  .dash-side .nav-item { justify-content: center; padding: 0; min-height: 44px; }
  .dash-side .nav-item[aria-current="page"]::after { position: absolute; inset-inline-end: 4px; top: 4px; width: 8px; height: 8px; }
  .dash-side .nav-badge { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; min-width: 18px; height: 16px; padding-inline: 3px; font-size: 11px; }
  .dash-side .side-user { justify-content: center; background: none; }
  .dash-side .side-user a { flex: none; }
  .dash-top .top-fold { display: none; }
}
@media (max-width: 1023px) {
  .dash { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr); }
  .dash-side, .dash-top .top-fold { display: none; }
  .top-menu { display: inline-flex; }
  .top-add .nav-label { display: none; }
}

/* ---------- page ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-title); font-weight: 800; line-height: 1.45; }
.page-head h1 .mono { font-size: .9375rem; color: var(--mute); }
.page-head p { color: var(--mute); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-xs); color: var(--mute); margin-bottom: 8px; }
.crumbs li + li::before { content: "‹"; margin-inline-end: 8px; color: var(--line-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; box-shadow: var(--shadow-1); }
.sheet + .sheet { margin-top: 16px; }
.mark-h { display: flex; align-items: center; gap: .5em; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.mark-h::before { content: ""; flex: none; width: .72em; height: .72em; background: var(--dots) center / contain no-repeat; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 18px 20px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.panel-h { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.panel-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--table); color: var(--ink); }
.panel-ic .icon { width: 17px; height: 17px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grid-2 > .sheet + .sheet { margin-top: 0; }
@media (max-width: 767px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.facts { display: grid; gap: 0; }
.facts > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { color: var(--mute); }
.facts dd { font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }

.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.counts > div { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.counts .ring { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--table); }
.counts .ring .icon { width: 19px; height: 19px; }
.counts dd { grid-column: 2; grid-row: 1; font-size: 1.5rem; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.counts dd small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.counts dt { grid-column: 2; grid-row: 2; font-size: var(--fs-xs); color: var(--mute); }
.counts dt a { text-decoration: none; }
.counts dt a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .counts > div:has(a):hover dt a { text-decoration: underline; } }
@media (max-width: 767px) { .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- table ---------- */
.table-wrap { position: relative; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: clip; }
.table { width: 100%; min-width: 760px; }
.table.has-links { min-width: 0; }
.table th { position: sticky; top: var(--top-h); z-index: 5; height: 42px; text-align: start; font-size: 12.5px; font-weight: 700; color: var(--mute); padding: 0 14px; background: var(--head); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; transition: background var(--t-fast); }
.table tbody tr:first-child td { border-top: 0; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.th-sort .icon { width: 14px; height: 14px; color: var(--line-2); transition: color var(--t-fast); }
.th-sort:hover { color: var(--ink); }
.th-sort:hover .icon, [aria-sort] .th-sort .icon { color: var(--ink); }
[aria-sort] .th-sort { color: var(--ink); }
.col-tick { width: 44px; padding-inline-end: 0 !important; }
.tick { display: block; position: relative; z-index: 1; width: 18px; height: 18px; margin: 0; accent-color: var(--wax); cursor: pointer; }
.cell-person { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 700; }
.cell-person small { display: block; font-weight: 400; color: var(--mute); font-size: var(--fs-xs); }
.cell-text { display: grid; gap: 1px; min-width: 0; }
.cell-text small, .cell-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .row-link { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; line-height: 1.55; }
.cell-title { display: grid; gap: 2px; min-width: 0; }
.cell-title small { font-size: var(--fs-xs); color: var(--mute); }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.state .icon { width: 16px; height: 16px; }
.state.is-off { color: var(--mute); }
.state.is-warn { color: var(--wax); }
.stage-cell { display: inline-grid; gap: 4px; }
.stage-cell small { font-size: 12px; color: var(--mute); white-space: nowrap; }
.bulk-bar { position: sticky; bottom: 16px; z-index: 18; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 6px 8px 6px 6px; padding-inline-start: 16px; background: var(--ink); color: var(--on-ink); border-radius: 14px; box-shadow: var(--shadow-pop); animation: rise var(--t) var(--ease); }
.bulk-n { margin-inline-end: 12px; font-size: .875rem; }
.bulk-n .mono { font-size: .9375rem; font-weight: 600; }
.bulk-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: inherit; font-size: .8125rem; font-weight: 600; }
.bulk-btn:hover { background: rgb(255 255 255 / .12); }
.bulk-btn .icon { width: 16px; height: 16px; }
.bulk-btn:focus-visible { outline-color: var(--on-ink); }
@media (max-width: 767px) {
  .table-wrap { overflow: visible; }
  .table { min-width: 0; display: block; }
  .table thead { display: none; }
  .table tbody, .table tr, .table td { display: block; }
  .table tr { position: relative; padding: 12px 16px; border-top: 1px solid var(--line); }
  .table tbody tr:first-child { border-top: 0; }
  .table td { border: 0; padding: 0; }
  .table td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
  .table td.col-wide { display: none; }
  .table td[data-label]::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--mute); }
  .table td.col-tick { position: absolute; inset-block-start: 14px; inset-inline-end: 12px; width: auto; }
  .table .cell-person { margin-bottom: 6px; padding-inline-end: 28px; }
  .table .cell-title { margin-bottom: 6px; padding-inline-end: 28px; }
  .table .row-actions { margin-top: 8px; justify-content: stretch; }
  .table .row-actions .btn { flex: 1; min-height: 44px; }
}

/* ---------- forms ---------- */
.stack { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field > label, .field > .lab, .field > legend { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; }
.field .req { color: var(--wax); }
.input, .select, textarea.input { width: 100%; min-height: 42px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--sheet); padding: 9px 12px; font-size: var(--fs-ui); line-height: 1.5; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.select { appearance: none; padding-inline-end: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%2315171A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; background-size: 12px; }
.input:hover, .select:hover { border-color: var(--cord); }
.input:focus, .select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(21 23 26 / .08); }
.input::placeholder { color: var(--mute); opacity: 1; }
.input.is-ltr { direction: ltr; text-align: right; }
.input.is-code { font-family: var(--mono); font-size: 1.5rem; letter-spacing: .2em; text-align: center; direction: ltr; }
.field .help { font-size: var(--fs-xs); color: var(--mute); line-height: 1.6; }
.field .err { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--wax); line-height: 1.6; }
.field .err .icon { width: 16px; height: 16px; }
.field.is-invalid .input, .field.is-invalid .select { border-color: var(--wax); }
.check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.65; cursor: pointer; }
.check span { min-width: 0; overflow-wrap: anywhere; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--wax); flex: none; }
.radio-cards { display: grid; gap: 8px; }
.radio-cards label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; cursor: pointer; transition: border-color var(--t-fast); }
.radio-cards label:hover { border-color: var(--cord); }
.radio-cards label:has(input:checked) { border-color: var(--ink); }
.radio-cards input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--wax); flex: none; }
.radio-cards b { display: block; font-weight: 700; }
.radio-cards small { display: block; color: var(--mute); font-size: var(--fs-xs); line-height: 1.6; }
.pass-wrap { position: relative; }
.pass-wrap .input { padding-inline-end: 48px; }
.pass-toggle { position: absolute; inset-inline-end: 2px; top: 0; bottom: 0; width: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--mute); }
.pass-toggle .icon { width: 20px; height: 20px; }

/* ---------- alerts, toasts, dialogs ---------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--line); line-height: 1.6; }
.alert .icon { width: 20px; height: 20px; margin-top: 2px; }
.alert.is-error { color: var(--wax); border-color: var(--wax); font-weight: 600; }
.alert.is-quiet { background: var(--table); border-color: transparent; }
.toasts { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 300; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: center; background: var(--ink); color: var(--on-ink); border-radius: 12px; padding: 12px 14px; line-height: 1.5; animation: rise var(--t) var(--ease); }
.toast .seal { width: 22px; height: 22px; color: var(--on-ink); --seal-on: var(--ink); animation: press var(--t) var(--ease); }
@keyframes press { from { transform: scale(1.5); opacity: 0; } }
.toast.is-fail { background: var(--sheet); color: var(--wax); border: 1px solid var(--wax); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

dialog { color: inherit; }
.side-sheet { padding: 0; border: 0; margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(480px, 100vw); max-width: 100vw; background: var(--sheet); box-shadow: var(--shadow-pop); overflow: hidden; }
.side-sheet::backdrop, .confirm::backdrop { background: rgb(21 23 26 / .4); }
.side-sheet[open] { display: flex; flex-direction: column; animation: drawer-in var(--t) var(--ease); }
.side-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); flex: none; }
.side-head h2 { font-size: var(--fs-h2); font-weight: 700; }
.side-body { flex: 1; padding: 20px; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.side-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); flex: none; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; border-radius: var(--r-sm); }
.icon-btn:hover { background: var(--table); }
.icon-btn .icon { width: 20px; height: 20px; }
.confirm { padding: 20px; border: 0; border-radius: var(--r); width: min(440px, calc(100vw - 32px)); background: var(--sheet); box-shadow: var(--shadow-pop); }
.confirm[open] { animation: rise var(--t) var(--ease); }
.confirm h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 6px; }
.confirm-actions { display: flex; gap: 8px; margin-top: 16px; }

.empty { display: grid; justify-items: center; gap: 10px; padding: 32px 16px; text-align: center; color: var(--mute); }
.empty .ring { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.empty .ring .icon { width: 22px; height: 22px; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--mute); }
.pager-n b { color: var(--ink); font-weight: 700; }
.pager-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pager-size { display: inline-flex; align-items: center; gap: 8px; }
.pager-size .select { min-height: 34px; width: auto; padding-block: 0; padding-inline: 12px 32px; font-size: var(--fs-xs); }
.pager-pages { display: flex; align-items: center; gap: 6px; }
.pager-pages ol { display: flex; align-items: center; gap: 4px; list-style: none; }
.pager-pages ol button, .pager-step { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding-inline: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--sheet); color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; line-height: 1; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.pager-step { font-family: var(--font); }
.pager-step .icon { width: 15px; height: 15px; }
.pager-pages ol button:hover, .pager-step:hover:not(:disabled) { border-color: var(--line-2); background: var(--table); color: var(--ink); }
.pager-pages ol button[aria-current="page"] { border-color: var(--wax); background: var(--wax); color: var(--on-ink); }
.pager-step:disabled { color: var(--c5); background: transparent; }
.pager-gap { min-width: 18px; text-align: center; color: var(--c4); }
@media (max-width: 560px) {
  .pager { justify-content: center; }
  .pager-step span { display: none; }
  .pager-step { padding-inline: 0; }
}

/* ---------- sign-in ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-art { position: relative; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--ink); overflow: hidden; }
.auth-cord { position: absolute; inset-block: 0; inset-inline-start: 50%; width: 2px; background: repeating-linear-gradient(to bottom, var(--cord) 0 7px, transparent 7px 12px); opacity: .55; }
.auth-seal { position: relative; width: 112px; height: 112px; }
.auth-word { position: relative; height: 40px; width: auto; padding-inline: 10px; background: var(--ink); }
.auth-pane { display: grid; place-items: center; padding: 24px 16px; }
.auth-sheet { width: min(400px, 100%); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 18px; box-shadow: var(--shadow-2); }
.auth-pane .auth-brand { display: none; }
@media (max-width: 899px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
  .auth-pane .auth-brand { display: flex; }
}
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand .mark { width: 36px; height: 36px; }
.auth-brand .word { height: 26px; width: auto; }
.auth-sheet h1 { font-size: var(--fs-title); font-weight: 800; line-height: 1.45; }
.auth-sheet > p { color: var(--mute); }
.auth-links { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); }
.setup-steps { display: grid; gap: 20px; counter-reset: step; }
.setup-steps > li { display: grid; gap: 10px; }
.setup-steps h2 { font-size: 1rem; font-weight: 700; }
.qr { width: 200px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); margin-inline: auto; }
.qr svg { width: 100%; height: auto; }
.key { padding: 8px 10px; background: var(--table); border-radius: var(--r-sm); overflow-wrap: anywhere; text-align: center; }
.codes { display: grid; gap: 4px; padding: 12px; background: var(--table); border-radius: var(--r-sm); text-align: center; overflow-wrap: anywhere; }

.error-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }

/* ---------- marks: seals say what a record is worth, squares say where it is ---------- */
.id { font-family: var(--mono); font-weight: 500; font-size: .8125rem; direction: rtl; unicode-bidi: isolate; white-space: nowrap; }
.wf-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.wf-label.is-big { font-size: var(--fs-ui); font-weight: 700; }
.wf-label.is-big .wf { width: 16px; height: 16px; }
.wf { position: relative; display: inline-block; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 2px; }
.wf.is-draft { border-style: dashed; }
.wf.is-in_review::after { content: ""; position: absolute; inset: 2px; background: var(--ink); border-radius: 1px; }
.wf.is-reviewed { background: linear-gradient(to left, var(--ink) 50%, transparent 50%); }
.wf.is-approved, .wf.is-published, .wf.is-changed { background: var(--ink); }
.wf.is-published::after { content: ""; position: absolute; inset-inline-start: 2.5px; top: .5px; width: 3px; height: 6px; border: solid var(--on-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
.wf.is-changed { clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%); }
.wf.is-archived::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink); }
.sg { display: block; flex: none; width: 18px; height: 13px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .9; }
.sg.is-firm { border: 4px double var(--wax); }
.sg.is-charged { border: 3px double currentColor; }
.sg.is-loose { border-style: dashed; }
.sg-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.face { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--table-2); }
.face.is-none { display: grid; place-items: center; color: var(--cord); }
.face.is-none .icon { width: 18px; height: 18px; }
.face.is-big { width: 72px; height: 72px; }
.face.is-big.is-none .icon { width: 28px; height: 28px; }
.re-id { display: inline-flex; align-items: center; gap: 8px; }
.re-id .icon { width: 16px; height: 16px; color: var(--wax); }
.table.has-links tr { position: relative; }
.narrow-only { display: none; }
.rich { min-width: 0; }
.rich .jodit-container:not(.jodit_inline) { border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--sheet); overflow: hidden; }
.rich .jodit-container:not(.jodit_inline):hover { border-color: var(--cord); }
.rich .jodit-container:not(.jodit_inline):focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgb(21 23 26 / .08); }
.rich .jodit-toolbar__box:not(:empty) { background: var(--table); border-block-end: 1px solid var(--line); }
.rich .jodit-toolbar__box:not(:empty) .jodit-toolbar-editor-collection::after { display: none; }
.rich .jodit-toolbar-button__button:focus-visible, .rich .jodit-toolbar-button__trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rich .jodit-workplace, .rich .jodit-wysiwyg { background: var(--sheet); }
.rich .jodit-wysiwyg { padding: 12px !important; font: inherit; font-size: var(--fs-ui); line-height: 1.9; color: var(--ink); }
.rich .jodit-wysiwyg > * + * { margin-block-start: .6em; }
.rich .jodit-wysiwyg ul, .rich .jodit-wysiwyg ol { padding-inline-start: 1.4em; }
.rich .jodit-wysiwyg blockquote { margin: 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--line-2); }
.rich .jodit-wysiwyg h2, .rich .jodit-wysiwyg h3, .rich .jodit-wysiwyg h4 { font-weight: 800; line-height: 1.5; }
.rich .jodit-wysiwyg h2 { font-size: 1.25rem; }
.rich .jodit-wysiwyg h3 { font-size: 1.125rem; }
.rich .jodit-wysiwyg h4 { font-size: 1rem; }
.rich .jodit-wysiwyg table { width: 100%; border-collapse: collapse; }
.rich .jodit-wysiwyg td, .rich .jodit-wysiwyg th { border: 1px solid var(--line-2); padding: 6px 8px; }
.rich .jodit-source * { direction: ltr; }
.rich .jodit-wysiwyg figure { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px; padding: 8px; border: 1px dashed var(--line-2); border-radius: 8px; }
.rich .jodit-wysiwyg figure img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; }
.rich .jodit-status-bar { display: none; }
.rec-fields[disabled] .rich .jodit-toolbar__box { display: none; }
.top-search { position: relative; flex: 1; min-width: 0; max-width: 460px; margin-inline-end: auto; }
.top-results { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px); max-block-size: 70vh; overflow-y: auto; padding-block: 6px; background: var(--sheet); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-pop); }
.top-group { display: flex; align-items: center; gap: 6px; padding: 10px 12px 4px; font-size: 12px; font-weight: 700; color: var(--mute); }
.top-group .icon { width: 14px; height: 14px; }
.top-results a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 6px 12px; font-size: var(--fs-xs); text-decoration: none; }
.top-results a:hover, .top-results a:focus-visible { background: var(--table); }
.top-results a span:first-child { min-width: 0; font-weight: 600; }
.is-date { width: auto; }
.term-list { display: grid; }
.term-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--line); }
.term-list li:first-child { border-top: 0; }
.term-label { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-xs); }
.term-count { color: var(--mute); }
.repeat-meta.is-word { font-family: inherit; }
.rec-section.is-spaced { margin-top: 16px; }
.panel-head.is-sub { margin-top: 20px; }
.alert-list { display: grid; }
.alert-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.alert-list li:first-child { border-top: 0; }
.alert-list .icon { flex: none; width: 18px; height: 18px; color: var(--wax); }
.alert-list span:nth-child(2) { flex: 1; min-width: 0; }
.cell-title { display: grid; gap: 2px; min-width: 0; }
.cell-title small { font-size: var(--fs-xs); color: var(--mute); }
.face.is-square { border-radius: 8px; }
.thumb { flex: none; width: 56px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--table); }
.thumb.is-none { display: grid; place-items: center; color: var(--cord); }
.thumb.is-none .icon { width: 18px; height: 18px; }
.thumb.is-small { width: 40px; height: 40px; border-radius: 10px; }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-xs); font-weight: 600; }
.who .avatar { width: 26px; height: 26px; font-size: 11px; }
.fw-6 { font-weight: 600; }
.icon.is-inline { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.dot.is-received, .dot.is-triage { background: var(--ink); }
.dot.is-accepted { background: var(--cord); }
.is-loading { opacity: .55; pointer-events: none; transition: opacity var(--t-fast) 80ms; }
.release-way { display: grid; gap: 12px; margin-bottom: 12px; }
.release-way .cord { max-width: 620px; }
.linked-record { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-xs); }
.linked-record .icon { flex: none; width: 16px; height: 16px; color: var(--mute); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 4px 16px; max-block-size: 220px; overflow-y: auto; }
@media (max-width: 1099px) { .table .col-wide { display: none; } .narrow-only { display: block; } }
.row-link { font-weight: 700; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.table.has-links tbody tr:hover { background: color-mix(in srgb, var(--table) 50%, transparent); }
.table.has-links tbody tr:hover .row-link { text-decoration: underline; }

/* ---------- filters: the toolbar and the table read as one card ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.filters:has(+ .table-wrap), .filters:has(+ .chips + .table-wrap) { margin-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; border-block-end: 0; box-shadow: none; }
.filters + .table-wrap, .filters + .chips + .table-wrap { border-start-start-radius: 0; border-start-end-radius: 0; }
.filters + .chips { margin: 0; padding: 0 10px 10px; background: var(--sheet); border-inline: 1px solid var(--line); }
.filters .select { width: auto; min-width: 128px; min-height: 38px; padding-block: 6px; font-size: .8125rem; border-width: 1px; border-radius: 9px; }
.filters .input { min-height: 38px; padding-block: 6px; font-size: .875rem; border-width: 1px; border-radius: 9px; }
.filters .select:not([data-empty]) { color: var(--ink); }
.tools-more summary .mono { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: var(--on-ink); font-size: 11px; }
.tools-more summary { min-height: 38px; }
.menu-filters { display: grid; gap: 10px; min-width: 240px; padding: 12px; inset-inline-start: auto; inset-inline-end: 0; }
.menu-filters label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--mute); }
.menu-filters .select { width: 100%; }
.filters .select.is-set, .tools-more summary.is-set { border-color: var(--ink); background-color: var(--head); color: var(--ink); font-weight: 700; }
.btn-clear { display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 8px; border: 0; background: none; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); border-radius: 8px; }
.btn-clear:hover { background: var(--table); color: var(--ink); }
.btn-clear .icon { width: 14px; height: 14px; }
.tools-end { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.tools-end .btn { min-height: 38px; }
.search-box { position: relative; flex: 1 1 220px; min-width: 0; }
.search-box .icon { position: absolute; inset-inline-start: 12px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--mute); pointer-events: none; }
.search-box .input { padding-inline-start: 38px; }
.seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 10px; background: var(--table); }
.seg button { border: 0; background: transparent; border-radius: 8px; min-height: 32px; padding: 0 12px; font-weight: 600; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-1); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); font-size: var(--fs-xs); font-weight: 600; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.chip .mono { font-size: 12px; color: var(--mute); }
.chip:hover { border-color: var(--cord); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.chip[aria-pressed="true"] .mono { color: var(--on-ink-2); }
.chip[aria-pressed="true"] .sg.is-firm { border-color: var(--on-ink); }

/* ---------- rules and media lists ---------- */
.acc { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; }
.acc summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; font-weight: 700; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary > span:first-child { flex: 1; min-width: 0; }
.acc summary .icon { width: 18px; height: 18px; color: var(--mute); transition: transform var(--t-fast); }
.acc[open] summary .icon { transform: rotate(180deg); }
.rule-rows li { display: flex; align-items: center; padding-inline-end: 8px; border-top: 1px solid var(--line); }
.rule-rows li > a { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center; min-height: 48px; padding: 8px 16px; text-decoration: none; }
.row-actions { position: relative; z-index: 1; display: inline-flex; flex: none; gap: 6px; }
.row-actions .icon-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--sheet); color: var(--ink-2); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.row-actions .icon-btn:hover { border-color: var(--line-2); background: var(--table); color: var(--ink); }
.row-actions a.icon-btn:hover { border-color: var(--wax); background: var(--wax); color: var(--on-ink); }
.row-actions .icon { width: 17px; height: 17px; }
.table th.col-actions, .table td:has(> .row-actions) { width: 1%; text-align: end; white-space: nowrap; }
.tiles li { position: relative; }
.tile-actions { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; background: var(--sheet); border-radius: var(--r-sm); box-shadow: var(--shadow-2); }
@media (hover: hover) {
  .tile-actions { opacity: 0; transition: opacity var(--t-fast); }
  .tiles li:hover .tile-actions, .tiles li:focus-within .tile-actions { opacity: 1; }
}
.rule-rows li > a:hover b { text-decoration: underline; }
.rule-art { font-size: var(--fs-xs); color: var(--mute); }
.rule-rows b { font-weight: 600; min-width: 0; }
@media (max-width: 767px) { .rule-rows li > a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; } .rule-rows .rule-art { grid-column: 1 / -1; } .rule-rows .xs { display: none; } }
@media (min-width: 768px) and (max-width: 1099px) { .rule-rows li > a { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) auto; } .rule-rows .xs { display: none; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.tile { display: grid; gap: 6px; height: 100%; align-content: start; padding: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; }
.tile { box-shadow: var(--shadow-1); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.tile:hover { border-color: var(--cord); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--table-2); }
.tile-t { font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; }
.tile-m { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--mute); }
.tile-m .mono { font-size: 12px; }
.tile-gap { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--wax); }
.tile-gap .icon { width: 14px; height: 14px; }
.tile-uses { display: inline-flex; align-items: center; gap: 4px; }
.tile-uses .icon { width: 14px; height: 14px; }
.sheet.is-flat { padding: 0; margin-top: 12px; }
.sheet.is-flat .pager { border-top: 0; }
.media-preview { width: min(100%, 640px); border-radius: var(--r-sm); background: var(--table-2); }
.hash { display: block; max-width: 44ch; overflow-wrap: anywhere; font-size: 12px; }
.file-actions { display: flex; gap: 8px; }
.file-list { display: grid; gap: 8px; }
.file-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--fs-xs); }
.file-list .icon { width: 18px; height: 18px; color: var(--cord); margin-top: 2px; }
.file-t { display: grid; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.file-t small { font-size: 12px; font-weight: 400; color: var(--mute); }
.note-line { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2); }
.note-line .icon { width: 18px; height: 18px; flex: none; }

/* ---------- record ---------- */
.rec-page { display: grid; gap: 16px; }
.rec-page > nav .crumbs { margin-bottom: 0; }
.rec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); align-items: center; gap: 20px 32px; padding: 22px 24px; }
.rec-id { display: grid; gap: 10px; min-width: 0; }
.rec-head h1 { font-size: 1.625rem; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.rec-where { display: grid; gap: 14px; padding: 14px 16px 12px; border-radius: var(--r-sm); background: var(--head); border: 1px solid var(--line); }
.rec-where-h { font-size: 12px; font-weight: 700; color: var(--mute); }
.chip-id { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font-family: var(--mono); font-size: 12.5px; font-weight: 600; direction: rtl; unicode-bidi: isolate; }
.rec-head-row > :not(.chip-id) { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); font-size: 12.5px; font-weight: 600; }
.rec-head-row > .seal { box-sizing: content-box; width: 18px; padding: 4px 8px; }
@media (max-width: 1023px) { .rec-head { grid-template-columns: minmax(0, 1fr); } }
.rec-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-xs); color: var(--mute); }
.rec-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.rec-meta .icon { width: 15px; height: 15px; }
.rec-meta .mono { font-size: 12px; }
.usage { display: grid; gap: 6px; font-size: var(--fs-xs); }
.usage div { display: flex; justify-content: space-between; gap: 12px; }
.conflict-diff { max-block-size: 40vh; overflow-y: auto; }
.rec-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rec { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.rec-main { min-width: 0; display: grid; gap: 16px; }
.rec-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.rec-fields[disabled] .input, .rec-fields[disabled] .select { background: var(--table); border-color: transparent; opacity: 1; color: var(--ink); }
.rec-fields[disabled] .btn, .rec-fields[disabled] .repeat-tools, .rec-fields[disabled] .picker { display: none; }
.rec-section { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 16px; min-width: 0; scroll-margin-top: calc(var(--top-h) + 16px); box-shadow: var(--shadow-1); }
.grid-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.grid-fields > * { min-width: 0; }
@media (max-width: 767px) { .grid-fields { grid-template-columns: minmax(0, 1fr); } }
.input.is-official { font-size: 1.0625rem; line-height: 2; }
textarea.input { line-height: 1.9; resize: vertical; field-sizing: content; min-block-size: 6em; max-block-size: 24lh; }
.table time { white-space: nowrap; }
.input:disabled, .select:disabled { background: var(--table); color: var(--ink-2); cursor: not-allowed; }
.repeat { display: grid; border: 1px solid var(--line); border-radius: var(--r); }
.repeat:empty { display: none; }
.repeat-item { min-width: 0; }
.repeat-item + .repeat-item { border-top: 1px solid var(--line); }
.repeat-head { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; cursor: pointer; list-style: none; }
.repeat-head::-webkit-details-marker { display: none; }
.repeat-head:hover { background: color-mix(in srgb, var(--table) 50%, transparent); }
.repeat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-xs); }
.repeat-meta { flex: none; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.repeat-head .icon, .more > summary .icon { flex: none; width: 16px; height: 16px; color: var(--mute); transition: transform var(--t-fast); }
details[open] > .repeat-head .icon, .more[open] > summary .icon { transform: rotate(180deg); }
.repeat-body { display: grid; gap: 14px; padding: 14px; border-top: 1px solid var(--line); min-width: 0; }
.repeat-tools { display: flex; align-items: center; gap: 4px; }
.repeat-tools .icon-btn { width: 36px; height: 36px; }
.repeat-tools .icon-btn:disabled { opacity: .35; cursor: default; }
.repeat-tools .icon { width: 18px; height: 18px; }
.repeat-tools .btn-text { margin-inline-start: auto; }
.claim-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.claim-link .check { min-height: 42px; align-items: center; }
.more { min-width: 0; }
.more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { color: var(--ink); }
.more > summary .mono { font-size: 12px; color: var(--mute); }
.more-body { display: grid; gap: 14px; padding-top: 10px; min-width: 0; }
.rule-chips { display: grid; gap: 6px; }
.rule-chips:empty { display: none; }
.rule-chips li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 4px 4px 4px; padding-inline-start: 12px; background: var(--table); border-radius: var(--r-sm); font-size: var(--fs-xs); }
.rule-chips button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; }
.rule-chips button:hover { background: var(--table-2); }
.rule-chips .icon { width: 16px; height: 16px; }
.picker { position: relative; min-width: 0; }
.picker-list { position: absolute; z-index: 10; inset-inline: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto; background: var(--sheet); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-pop); }
.picker-list button { display: grid; gap: 2px; width: 100%; padding: 8px 12px; border: 0; background: none; text-align: start; font-size: var(--fs-xs); }
.picker-list button:hover, .picker-list button:focus-visible { background: var(--table); }
.picker-list b { font-weight: 600; }
.confirm .picker-list { position: static; margin-top: 8px; max-height: 44vh; box-shadow: none; }
.media-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.media-pick button { display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); text-align: start; transition: border-color var(--t-fast); }
.media-pick button { position: relative; }
.media-pick button:hover { border-color: var(--wax); }
.media-pick-wait { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: var(--sheet); color: var(--ink-2); font-size: 11px; font-style: normal; font-weight: 700; box-shadow: var(--shadow-1); }
.media-pick-wait .icon { width: 12px; height: 12px; }
.media-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; background: var(--table-2); }
.media-pick span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.picked li { position: relative; }
.picked img { width: 64px; height: 48px; object-fit: cover; border-radius: 7px; }
.picked button { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); }
.picked .icon { width: 12px; height: 12px; }
.confirm.is-wide { width: min(720px, calc(100vw - 32px)); }
.picker-empty { padding: 10px 12px; font-size: var(--fs-xs); color: var(--mute); }
.portrait-field { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.portrait-field .picker { flex: 1 1 220px; }
.rec-bar { position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.rec-bar span { margin-inline-end: auto; font-weight: 600; font-size: var(--fs-xs); }
.draft-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--sheet); font-size: var(--fs-xs); font-weight: 600; }
.draft-note[hidden] { display: none; }
.draft-note .icon { width: 16px; height: 16px; }
.draft-note span { margin-inline-end: auto; }
.phone-note { display: none; font-size: var(--fs-xs); color: var(--mute); }
.rec-rail { position: sticky; top: calc(var(--top-h) + 16px); max-height: calc(100dvh - var(--top-h) - 32px); overflow-y: auto; display: grid; gap: 12px; min-width: 0; }
.rail { display: grid; gap: 12px; min-width: 0; }
.rail-box { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; min-width: 0; box-shadow: var(--shadow-1); }
.rail-h { font-size: var(--fs-xs); font-weight: 700; color: var(--mute); }
.rail-actions { display: grid; gap: 8px; }
.rail-actions:empty { display: none; }
.why { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2); }
.why .icon { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.toc { display: grid; padding-block: 8px; gap: 0; }
.toc a { position: relative; display: block; padding: 7px 10px; border-radius: 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--mute); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.toc a:hover { background: var(--table); color: var(--ink); }
.toc a[aria-current] { background: var(--table); color: var(--ink); font-weight: 700; }
.rail-work { display: grid; gap: 12px; min-width: 0; }
.rail-work[inert] { opacity: .5; }
.history { display: grid; gap: 10px; }
.history li { display: grid; gap: 1px; font-size: var(--fs-xs); line-height: 1.6; }
.history .mono { font-size: 12px; }
.side-sheet.is-wide { width: min(600px, 100vw); }
.diff { width: 100%; font-size: var(--fs-xs); }
.diff th { text-align: start; font-weight: 700; color: var(--mute); padding: 8px 0 8px 12px; vertical-align: top; width: 34%; border-top: 1px solid var(--line); }
.diff td { padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.diff tr:first-child th, .diff tr:first-child td { border-top: 0; }
.diff del, .diff ins { display: block; line-height: 1.7; }
.diff del { color: var(--mute); text-decoration: line-through; }
.diff ins { text-decoration: none; font-weight: 600; }
.diff ins::before { content: "+ "; font-family: var(--mono); color: var(--mute); }
@media (max-width: 899px) {
  .rec { grid-template-columns: minmax(0, 1fr); }
  .rec-rail { position: static; max-height: none; overflow: visible; order: -1; }
  .rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
  .rail > :nth-child(n + 3) { grid-column: 1 / -1; }
  .toc { display: none; }
}
@media (max-width: 767px) {
  .rec-bar { display: none !important; }
  .phone-note { display: block; }
}

/* ---------- overview ---------- */
.ov { display: grid; gap: 16px; }
.hero { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding: 22px 28px; background: var(--ink); color: var(--on-ink); border-radius: var(--r-lg); }
.hero h1 { font-size: 1.375rem; font-weight: 800; line-height: 1.45; }
.hero-n { margin-top: 2px; font-size: .875rem; color: var(--on-ink-2); }
.hero-n b { font-family: var(--mono); font-size: 1.0625rem; font-weight: 600; color: var(--on-ink); }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.flow li + li::before { content: ""; position: absolute; inset-inline-end: 50%; inset-block-start: 49px; width: 100%; height: 2px; background: repeating-linear-gradient(to left, var(--cord) 0 6px, transparent 6px 10px); }
.flow b { font-size: 1.625rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.flow span { font-size: var(--fs-xs); color: var(--on-ink-2); }
.flow-knot { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cord); color: var(--on-ink); }
.flow-knot .icon { width: 16px; height: 16px; }
.flow .is-last .flow-knot { background: var(--wax); box-shadow: none; }
.hero-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: rgb(255 255 255 / .08); color: var(--on-ink); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--t-fast); }
.hero-cta:hover { background: rgb(255 255 255 / .14); }
.hero-cta:focus-visible { outline-color: var(--on-ink); }
.hero-cta .icon { width: 18px; height: 18px; }
.hero-cta b { font-family: var(--mono); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { display: grid; gap: 8px; height: 100%; padding: 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); text-decoration: none; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.kpi:hover { border-color: var(--wax-2); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kpi-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kpi-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--wax); color: var(--on-ink); }
.kpi-ic .icon { width: 18px; height: 18px; }
.kpi-l { flex: 1; min-width: 0; font-size: .875rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-go { flex: none; width: 16px !important; height: 16px !important; color: var(--line-2); transition: color var(--t-fast), transform var(--t-fast); }
.kpi:hover .kpi-go { color: var(--wax); transform: translateX(-2px); }
.kpi > b { font-size: 2rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-m { display: block; height: 6px; border-radius: 3px; background: var(--table-2); overflow: hidden; }
.kpi-m i { display: block; width: var(--v); height: 100%; border-radius: 3px; background: var(--wax); }
.kpi-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 12px; color: var(--mute); }
.kpi-f > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kpi-f b { color: var(--ink); font-weight: 600; }
.dot.is-on { background: var(--wax); }
.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.mini-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mini-stats li { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; }
.mini-stats .icon { grid-row: span 2; align-self: center; width: 18px; height: 18px; color: var(--cord); }
.mini-stats b { font-size: 1.125rem; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.mini-stats span { grid-column: 2; font-size: 12px; color: var(--mute); }
.note-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; }
.note-card:hover { border-color: var(--ink); }
.note-card .icon { width: 18px; height: 18px; }
.queue { display: grid; }
.queue li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--line); }
.queue li:first-child { border-top: 0; }
.queue-t { min-width: 0; }
.queue-t small { display: block; font-size: var(--fs-xs); color: var(--mute); }
.queue .row-link, .queue-t > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.feed { display: grid; }
.feed li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 50px; padding-block: 6px; border-top: 1px solid var(--line); }
.feed-t { min-width: 0; }
.feed-t .row-link, .feed-t > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; }
.feed-t small { display: block; font-size: 12px; color: var(--mute); }
.feed time { font-size: 12px; color: var(--mute); }
@media (max-width: 1279px) { .hero { grid-template-columns: minmax(0, 1fr) auto; } .flow { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 1023px) { .span-4, .span-5, .span-7, .span-8 { grid-column: span 12; } }
@media (max-width: 767px) {
  .hero { padding: 18px; gap: 16px; }
  .flow b { font-size: 1.25rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi > b { font-size: 1.5rem; }
  .kpi-f { display: grid; }
  .queue li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .feed time { display: none; }
  .feed li { grid-template-columns: auto minmax(0, 1fr); }
}

/* ---------- charts: wax for the measure and the firmest step, greys for the rest; the mark, never a colour alone, carries the meaning ---------- */
.ch-cols { display: flex; align-items: flex-end; gap: 4px; min-height: 176px; }
.ch-col { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; justify-items: center; }
.ch-stem { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 140px; border-block-end: 1px solid var(--line); }
.ch-stem i { position: relative; display: block; width: min(100%, 24px); height: max(var(--v), 2px); border-radius: 4px 4px 0 0; background: var(--c3); transition: background var(--t-fast); }
.ch-col:hover .ch-stem i { background: var(--wax-3); }
.ch-stem i.is-peak { background: var(--wax); }
.ch-stem b { position: absolute; inset-block-end: calc(100% + 4px); inset-inline: -12px; text-align: center; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-stem b::before { content: ""; display: block; width: 11px; height: 11px; margin: 0 auto 2px; background: var(--dots) center / contain no-repeat; }
.ch-col small { min-height: 1.5em; font-family: var(--mono); font-size: 12px; color: var(--mute); white-space: nowrap; }
.ch-bars { display: grid; gap: 8px; }
.ch-bars li { display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 30px; align-items: center; gap: 10px; min-height: 26px; }
.ch-bar-l { font-size: var(--fs-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-bar { display: block; height: 12px; }
.ch-bar i { display: block; width: max(var(--v), 3px); height: 100%; border-radius: 0 4px 4px 0; background: var(--wax); transition: opacity var(--t-fast); }
[dir="rtl"] .ch-bar i { border-radius: 4px 0 0 4px; }
.ch-bars li:hover .ch-bar i { opacity: .72; }
.ch-bars b { font-size: var(--fs-xs); font-weight: 600; text-align: end; }
.ch-seg { display: flex; gap: 2px; height: 28px; }
.ch-seg i { display: block; flex: 1 1 0; min-width: 3px; transition: opacity var(--t-fast); }
.ch-seg i:first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.ch-seg i:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.ch-seg i:hover { opacity: .78; }
.s1 { background: var(--wax); } .s2 { background: var(--c2); } .s3 { background: var(--c3); } .s4 { background: var(--c4); } .s5 { background: var(--c5); } .s6 { background: var(--table-2); }
.ch-legend { display: grid; gap: 4px; }
.ch-legend li { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; font-size: var(--fs-xs); }
.ch-legend > li > i:first-child { width: 10px; height: 10px; border-radius: 3px; }
.ch-legend .seal { width: 20px; height: 20px; }
.ch-legend .sg { width: 18px; height: 13px; }
.ch-legend b { font-weight: 600; }
.heat { display: grid; gap: 10px; min-width: 0; }
.heat-grid { display: grid; grid-template-columns: auto repeat(var(--weeks), minmax(0, 1fr)); gap: 4px; align-items: center; }
.heat-grid i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--table); transition: box-shadow var(--t-fast); }
.heat-grid i.is-out { background: none; }
.heat-grid i:not(.is-out):hover { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--ink); }
.heat-m { min-width: 0; font-size: 11px; line-height: 1.4; color: var(--mute); white-space: nowrap; overflow: visible; }
/* The newest columns sit at the far edge, so their month name runs back over the older ones instead of out of the card. */
.heat-m.is-end { direction: ltr; text-align: left; }
.heat-d { padding-inline-end: 8px; font-size: 11px; line-height: 1; color: var(--mute); white-space: nowrap; }
.heat .h1 { background: var(--wax-1); } .heat .h2 { background: var(--wax-2); } .heat .h3 { background: var(--wax-3); } .heat .h4 { background: var(--wax); }
.heat-key { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--mute); }
.heat-key i { display: block; width: 11px; height: 11px; border-radius: 3px; background: var(--table); }
.heat-key span:first-child { margin-inline-end: 4px; }
.heat-key span:last-child { margin-inline-start: 4px; }
.act-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-sm); }
.act-sum > div { display: grid; gap: 2px; padding: 10px 14px; }
.act-sum > div + div { border-inline-start: 1px solid var(--line); }
.act-sum dt { font-size: 12px; color: var(--mute); }
.act-sum dd { font-size: 1.375rem; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat-group { display: grid; gap: 2px; }
.stat-group + .stat-group { padding-top: 12px; border-top: 1px solid var(--line); }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; font-size: 12px; font-weight: 700; color: var(--mute); }
.stat-head a { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.stat-head a:hover { color: var(--ink); text-decoration: underline; }
.stat-head .icon { width: 14px; height: 14px; }
.stat-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.stat-rows dt { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.stat-rows dt .icon { flex: none; width: 17px; height: 17px; color: var(--cord); }
.stat-rows dd { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-rows .is-zero dd { color: var(--mute); font-weight: 500; }
.stat-rows .is-warn dt { color: var(--ink); font-weight: 600; }
.stat-rows .is-warn .icon, .stat-rows .is-warn dd { color: var(--wax); }
.span-12 { grid-column: span 12; }
@media (max-width: 767px) { .act-sum dd { font-size: 1.125rem; } .heat-grid { gap: 2px; } .heat-grid i { border-radius: 2px; } .heat-d { padding-inline-end: 4px; } .act-sum > div { padding: 8px 10px; } }
.tip { position: fixed; z-index: 400; max-width: 260px; padding: 5px 9px; border-radius: 7px; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 500; line-height: 1.5; pointer-events: none; box-shadow: var(--shadow-pop); transform: translate(50%, calc(-100% - 8px)); }

/* ---------- the cord: where a record stands, one knot per step ---------- */
.cord { display: flex; align-items: flex-start; min-width: 0; }
.cord li { position: relative; flex: 1 1 0; display: grid; justify-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--mute); text-align: center; }
.cord li + li::before { content: ""; position: absolute; inset-block-start: 5px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--line-2); }
.cord li.is-done + li::before, .cord li.is-now::before, .cord li.is-done::before { background: var(--ink); }
.cord .knot { position: relative; z-index: 1; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--line-2); }
.cord .is-done .knot { background: var(--ink); box-shadow: none; }
.cord .is-now .knot { background: var(--wax); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wax) 18%, transparent); }
.cord .is-now { color: var(--ink); font-weight: 700; }
.cord.is-mini { display: inline-flex; gap: 0; }
.cord.is-mini li { flex: none; width: 16px; }
.cord.is-mini li + li::before { inset-block-start: 3px; height: 1.5px; }
.cord.is-mini .knot { width: 8px; height: 8px; }
.cord.is-mini .is-now .knot { box-shadow: none; }

/* ---------- publishing ---------- */
.pub-list { display: grid; gap: 8px; }
.pub-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.pub-list a { min-width: 0; font-weight: 600; }
.cell-error { display: block; max-inline-size: 32ch; color: var(--wax); }
.table-wrap.is-spaced { margin-top: 16px; }
.table td .btn { white-space: nowrap; }

/* ---------- articles ---------- */
.stage-list { display: grid; gap: 0; font-size: var(--fs-xs); color: var(--mute); }
.stage-list li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 30px; }
.stage-list li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); background: var(--sheet); position: relative; z-index: 1; }
.stage-list li + li::after { content: ""; position: absolute; inset-inline-start: 4px; inset-block-end: 50%; width: 2px; height: 100%; background: var(--line-2); }
.stage-list .is-done::before, .stage-list [aria-current]::before { background: var(--ink); box-shadow: none; }
.stage-list .is-done + li::after, .stage-list .is-done::after { background: var(--ink); }
.stage-list [aria-current] { color: var(--ink); font-weight: 700; }

/* ---------- inbox ---------- */
.inbox-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.inbox-main { display: grid; gap: 16px; min-width: 0; }
.inbox-main .sheet + .sheet { margin-top: 0; }
.pre { white-space: pre-line; overflow-wrap: anywhere; }
.crumbs { font-size: var(--fs-xs); color: var(--mute); margin-bottom: 8px; }
.attach-list { display: grid; gap: 12px; }
.attach-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.attach-list img, .attach-icon { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--table); display: grid; place-items: center; }
.attach-body { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.note-row { display: grid; gap: 2px; padding-block: 8px; border-block-end: 1px solid var(--line); }
@media (max-width: 1023px) { .inbox-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- review fixes ---------- */
.table td .mono { white-space: nowrap; }
.counts > div { position: relative; }
.counts dt a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .counts > div:has(a):hover dt a { text-decoration: underline; } }
.rec-rail { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.date-field { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--mute); }
@media (max-width: 767px) {
  .table td.col-id { display: none; }
  .filters .select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .date-field { flex: 1 1 160px; }
  .date-field .input { flex: 1; min-width: 0; }
  .input, .select { font-size: 1rem; }
}

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

/* ---------- media library ---------- */
.lib { display: grid; gap: 14px; }
.lib-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.lib-bar .search-box { flex: 1 1 260px; }
.lib-bar .search-box .input { min-height: 38px; background: var(--head); border-color: transparent; font-size: .875rem; }
.lib-sort, .lib-dates { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding-inline-start: 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--sheet); color: var(--mute); }
.lib-sort .icon, .lib-dates .icon { width: 16px; height: 16px; }
.lib-sort .select { min-height: 36px; width: auto; border: 0; padding-block: 0; font-size: .8125rem; font-weight: 600; background-color: transparent; }
.lib-dates { padding-inline-end: 6px; font-size: 12px; }
.lib-dates .input { min-height: 30px; width: auto; padding: 2px 6px; border: 0; font-size: .8125rem; background: transparent; }
.lib-view button { display: grid; place-items: center; min-width: 38px; padding: 0 8px; }
.lib-view .icon { width: 17px; height: 17px; }
.lib-view button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.lib-bar .tools-end { margin-inline-start: 0; }
.lib-shelves { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lib-shelves .chip { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: .8125rem; }
.lib-shelves .chip .icon { width: 16px; height: 16px; }
.lib-shelves .chip .mono { min-width: 22px; height: 20px; display: grid; place-items: center; padding-inline: 5px; border-radius: 6px; background: var(--table); color: var(--ink-2); }
.lib-shelves .chip[aria-pressed="true"] .mono { background: rgb(255 255 255 / .16); color: var(--on-ink); }
.lib-shelves .select { width: auto; min-height: 36px; margin-inline-start: auto; font-size: .8125rem; }
.lib-drop { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: var(--sheet); text-align: start; transition: border-color var(--t-fast), background var(--t-fast); }
.lib-drop:hover, .lib-drop.is-over { border-color: var(--ink); background: var(--head); }
.lib-drop b { display: block; font-size: .9375rem; }
.lib-drop small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.lib-card { position: relative; display: grid; align-content: start; overflow: hidden; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.lib-card:hover { border-color: var(--cord); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.lib-card.is-ticked { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lib-shot { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--table-2); overflow: hidden; }
.lib-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t) var(--ease); }
.lib-card:hover .lib-shot img { transform: scale(1.03); }
.lib-tick { position: absolute; z-index: 3; inset-block-start: 10px; inset-inline-start: 10px; width: 20px; height: 20px; opacity: 0; transition: opacity var(--t-fast); }
.lib-card:hover .lib-tick, .lib-card:focus-within .lib-tick, .lib-card.is-ticked .lib-tick { opacity: 1; }
@media (hover: none) { .lib-tick { opacity: 1; } }
.lib-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 7px; border-radius: 6px; background: rgb(21 23 26 / .78); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 600; backdrop-filter: blur(4px); }
.lib-badge .icon { width: 12px; height: 12px; }
.lib-badge.is-format { inset-block-end: 10px; inset-inline-end: 10px; }
.lib-badge.is-uses { inset-block-start: 10px; inset-inline-end: 10px; }
.lib-badge.is-gap { inset-block-end: 10px; inset-inline-start: 10px; background: var(--wax); }
.lib-body { display: grid; gap: 6px; padding: 12px 14px 10px; }
.lib-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; font-size: .8125rem; font-weight: 600; line-height: 1.5; text-decoration: none; }
.lib-t:hover { text-decoration: underline; }
.lib-m { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--mute); direction: ltr; }
.lib-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.lib-f .row-actions .icon-btn { width: 32px; height: 32px; }
.lib .pager { border: 1px solid var(--line); border-radius: var(--r); }
.lib .table-wrap .pager { border: 0; border-radius: 0; border-top: 1px solid var(--line); }
@media (max-width: 767px) { .lib-dates { display: none; } .lib-shelves .select { margin-inline-start: 0; } }

/* ---------- tables, second pass ---------- */
.filters { padding: 12px; gap: 10px; }
.filters .search-box { flex: 1 1 280px; }
.filters .search-box .input { background: var(--head); border-color: transparent; }
.filters .search-box .input:hover { border-color: var(--line-2); }
.filters .search-box .input:focus { background: var(--sheet); }
.filters .select { background-color: var(--sheet); border-color: var(--line-2); font-weight: 500; }
.table th { color: var(--ink-2); font-size: 12px; letter-spacing: normal; }
.table tbody tr { transition: background var(--t-fast); }
.table.has-links tbody tr:hover { background: var(--head); }
.table td { padding-block: 14px; }
.table td.col-tick, .table th.col-tick { padding-inline-start: 18px; }
.date { font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.table .wf-label, .table .sg-label { padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--sheet); }
.table .seal { width: 20px; height: 20px; }
.thumb { width: 64px; height: 48px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(21 23 26 / .06); }
.thumb.is-none { background: var(--head); box-shadow: inset 0 0 0 1px var(--line); }
.table td[data-label="أدلة"] .mono, .table td[data-label="أفعال"] .mono, .table td[data-label="وقائع"] .mono { display: inline-grid; place-items: center; min-width: 28px; height: 24px; border-radius: 6px; background: var(--table); font-weight: 600; }
.table.has-links tbody tr td:last-child { position: relative; }
@media (hover: hover) and (min-width: 768px) {
  .table.has-links tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow var(--t-fast); }
  [dir="rtl"] .table.has-links tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--wax); }
}
.pager { padding: 12px 18px; background: var(--head); }

/* ---------- settings ---------- */
.set { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-nav { position: sticky; top: calc(var(--top-h) + 16px); display: grid; gap: 2px; padding: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.set-nav button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font-size: .875rem; font-weight: 500; color: var(--ink-2); text-align: start; }
.set-nav button .icon { width: 18px; height: 18px; color: var(--mute); }
.set-nav button:hover { background: var(--table); color: var(--ink); }
.set-nav button[aria-current] { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.set-nav button[aria-current] .icon { color: var(--on-ink); }
.set-body { display: grid; gap: 16px; min-width: 0; }
.set-save { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }
.set-images { display: grid; gap: 0; }
.set-images > li { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(220px, 280px); align-items: center; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.set-images > li:first-child { border-top: 0; }
.set-img { width: 120px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--head); border: 1px solid var(--line); }
.set-img img { width: 100%; height: 100%; object-fit: cover; }
.set-img-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--line-2); }
.set-img-t { display: grid; gap: 2px; min-width: 0; }
.set-img-t b { font-size: .875rem; }
.set-img-t small { font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.set-img-a { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.wm .set-img-a { justify-content: flex-start; }
.serp { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet); max-width: 640px; }
.serp-url { font-family: var(--mono); font-size: 12px; color: var(--mute); direction: ltr; text-align: right; }
.serp-t { font-size: 1.0625rem; font-weight: 600; color: #1a0dab; }
.serp-d { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.7; }
.radio-cards label > span { display: grid; gap: 2px; }
.wm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.wm-preview { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: linear-gradient(135deg, #8d969f, #3b4148); }
.wm-sample { position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgb(255 255 255 / .25), transparent 60%); }
.wm-mark { position: absolute; width: var(--wm-size); opacity: var(--wm-op); }
.wm-preview.pos-bottom-left .wm-mark { left: 3%; bottom: 3%; } .wm-preview.pos-bottom-right .wm-mark { right: 3%; bottom: 3%; }
.wm-preview.pos-top-left .wm-mark { left: 3%; top: 3%; } .wm-preview.pos-top-right .wm-mark { right: 3%; top: 3%; }
.wm-preview.pos-center .wm-mark { left: 50%; top: 50%; transform: translate(-50%, -50%); }
input[type="range"] { width: 100%; accent-color: var(--wax); }
.ai-step { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: .875rem; }
.ai-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 700; }
.ai-providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.ai-providers button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet); text-align: start; transition: border-color var(--t-fast), background var(--t-fast); }
.ai-providers button:hover { border-color: var(--cord); }
.ai-providers button[aria-pressed="true"] { border-color: var(--ink); background: var(--head); box-shadow: 0 0 0 1px var(--ink); }
.ai-providers .ai-on { margin-inline-start: auto; width: 20px; height: 20px; color: var(--ink); }
.ai-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-xs); }
.ai-key .icon { width: 16px; height: 16px; }
.ai-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--head); }
.ai-tools-h { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ai-tools-h .icon { width: 16px; height: 16px; }
.ai-tools .chip { min-height: 30px; font-size: 12.5px; }
.ai-suggest { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--sheet); }
.ai-suggest-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .875rem; }
.ai-suggest-h .icon { width: 16px; height: 16px; }
.ai-suggest-a { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1023px) {
  .set { grid-template-columns: minmax(0, 1fr); }
  .set-nav { position: static; display: flex; overflow-x: auto; }
  .set-nav button { flex: none; }
  .set-images > li { grid-template-columns: 96px minmax(0, 1fr); }
  .set-images .set-img { width: 96px; }
  .set-img-a { grid-column: 1 / -1; }
  .wm { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- home page builder: the sections on the start side, the page itself beside them ---------- */
.hp-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--mute); }
.hp-state .icon { width: 16px; height: 16px; }
.hp-state.is-dirty { color: var(--wax); }
.hp { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.hp > * { min-width: 0; }
.hp-side { position: sticky; inset-block-start: 84px; padding: 0; gap: 0; max-height: calc(100dvh - 104px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.hp-side-head { position: sticky; inset-block-start: 0; z-index: 2; background: var(--sheet); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-block-end: 1px solid var(--line); }
.hp-side-head h2 { font-size: var(--fs-ui); }
.hp-side-head p { font-size: var(--fs-xs); color: var(--mute); }
.hp-side-head p b { color: var(--ink); font-family: var(--mono); }
.hp-list { list-style: none; }
.hp-sec { border-block-end: 1px solid var(--line); transition: background var(--t-fast); }
.hp-sec:last-child { border-block-end: 0; }
.hp-sec.is-open { background: var(--head); }
.hp-sec.is-dragging { opacity: .45; }
.hp-sec.is-over { box-shadow: inset 0 3px 0 var(--wax); }
.hp-row { display: grid; grid-template-columns: 20px 18px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; }
.hp-grip { display: grid; place-items: center; height: 36px; color: var(--c4); cursor: grab; }
.hp-grip:hover { color: var(--ink); }
.hp-grip .icon { width: 18px; height: 18px; }
.hp-n { font-size: var(--fs-xs); color: var(--mute); text-align: center; }
.hp-pick { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; padding: 4px; margin: -4px; background: none; border: 0; border-radius: var(--r-sm); text-align: start; color: inherit; }
.hp-pick .hp-shape { width: 60px; height: 37px; padding: 3px; background: var(--sheet); border: 1px solid var(--line); border-radius: 7px; }
.hp-t { display: grid; gap: 2px; min-width: 0; }
.hp-t b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-ui); }
.hp-t b .icon { width: 16px; height: 16px; color: var(--cord); flex: none; }
.hp-t small { font-size: var(--fs-xs); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-sec.is-off .hp-pick { opacity: .5; }
.hp-moves { display: grid; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); overflow: hidden; }
.hp-moves button { display: grid; place-items: center; width: 28px; height: 18px; background: none; border: 0; color: var(--ink-2); }
.hp-moves button + button { border-block-start: 1px solid var(--line); }
.hp-moves button:hover:not(:disabled) { background: var(--table); color: var(--ink); }
.hp-moves button:disabled { color: var(--c5); }
.hp-moves .icon { width: 14px; height: 14px; }
.hp-switch { position: relative; flex: none; width: 36px; height: 22px; padding: 0; background: var(--line-2); border: 0; border-radius: 99px; transition: background var(--t-fast); }
.hp-switch i { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 16px; height: 16px; background: var(--sheet); border-radius: 50%; box-shadow: 0 1px 2px rgb(21 23 26 / .25); transition: transform var(--t-fast); }
.hp-switch[aria-checked="true"] { background: var(--wax); }
.hp-switch[aria-checked="true"] i { transform: translateX(-14px); }
[dir="ltr"] .hp-switch[aria-checked="true"] i { transform: translateX(14px); }
.hp-shapes { display: grid; gap: 10px; padding: 0 14px 16px; padding-inline-start: 58px; }
.hp-shapes > p { font-size: var(--fs-xs); color: var(--mute); }
.hp-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hp-opt { display: grid; gap: 4px; justify-items: start; padding: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; text-align: start; color: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.hp-opt:hover { border-color: var(--line-2); }
.hp-opt.is-on { border-color: var(--wax); box-shadow: 0 0 0 1px var(--wax); }
.hp-opt .hp-shape { width: 100%; height: auto; aspect-ratio: 72 / 44; padding: 4px; background: var(--table); border-radius: 6px; margin-block-end: 4px; }
.hp-opt b { font-size: var(--fs-xs); }
.hp-opt small { font-size: .75rem; color: var(--mute); line-height: 1.5; }
.hp-one { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--mute); }
.hp-one .icon { width: 15px; height: 15px; }
.hp-shape { display: block; fill: var(--c5); }
.hp-shape .is-soft { fill: var(--table-2); }
.hp-opt .hp-shape .is-soft { fill: var(--sheet); }
.hp-shape .is-ink { fill: var(--c2); }
.hp-shape .is-line { fill: none; stroke: var(--c4); stroke-width: 1.4; }
.hp-view { padding: 0; gap: 0; overflow: hidden; }
.hp-view-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-block-end: 1px solid var(--line); }
.hp-view-head .seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; }
.hp-view-head .seg .icon { display: block; width: 16px; height: 16px; flex: none; }
.hp-live { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: var(--fs-xs); color: var(--mute); }
.hp-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--table-2); }
.hp-stage { position: relative; height: calc(100dvh - 206px); min-height: 480px; background: var(--table); overflow: hidden; }
.hp-frame { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1280px; height: calc(100% / var(--hp-scale, 1)); transform: scale(var(--hp-scale, 1)); transform-origin: top right; }
[dir="ltr"] .hp-frame { transform-origin: top left; }
.hp-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--sheet); }
.hp-stage:not(.is-phone) { padding: 0; }
.hp-stage.is-phone .hp-frame { inset-inline-start: 50%; width: 390px; height: calc(100% - 40px); margin-block-start: 20px; transform: translateX(50%); border: 8px solid var(--ink); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-pop); }
[dir="ltr"] .hp-stage.is-phone .hp-frame { transform: translateX(-50%); }
.hp-wait { position: absolute; inset: 0; display: none; place-items: center; background: rgb(238 240 242 / .55); }
.hp-wait span { width: 28px; height: 28px; border: 3px solid var(--line-2); border-block-start-color: var(--ink); border-radius: 50%; animation: hp-spin .8s linear infinite; }
.hp-stage.is-loading .hp-wait { display: grid; }
@keyframes hp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hp-wait span { animation-duration: 2.4s; } }
@media (max-width: 1100px) {
  .hp { grid-template-columns: minmax(0, 1fr); }
  .hp-side { position: static; max-height: none; }
  .hp-stage { height: 70dvh; }
}
@media (max-width: 560px) {
  .hp-shapes { padding-inline-start: 14px; }
  .hp-pick { grid-template-columns: minmax(0, 1fr); }
  .hp-pick .hp-shape { display: none; }
  .hp-view-head .btn, .hp-live { display: none; }
}

/* ---------- people's photos and the account page ---------- */
.avatar { overflow: hidden; }
.avatar.has-photo { background: var(--table-2); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.is-xl { width: 96px; height: 96px; font-size: 2.25rem; background: var(--wax); color: var(--on-ink); box-shadow: 0 0 0 4px var(--sheet), 0 0 0 5px var(--line); }
.profile { margin-bottom: 20px; padding: 22px 24px; }
.profile-id { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: 22px; }
.profile-photo { position: relative; }
.profile-busy { position: absolute; inset: 0; display: none; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .7); }
.profile-busy span { width: 26px; height: 26px; border: 3px solid var(--line-2); border-block-start-color: var(--wax); border-radius: 50%; animation: hp-spin .8s linear infinite; }
.profile-who { display: grid; gap: 6px; min-width: 0; }
.profile-who h2 { font-size: var(--fs-title); line-height: 1.4; }
.profile-who > p { color: var(--mute); }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 2px; }
.profile-photo-actions label { cursor: pointer; }
.profile-photo-actions label:focus-within { outline: 2px solid var(--wax); outline-offset: 3px; }
.profile-facts { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--head); border: 1px solid var(--line); }
.profile-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; font-size: var(--fs-xs); }
.profile-facts dt { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); }
.profile-facts dt .icon { width: 15px; height: 15px; color: var(--cord); }
.profile-facts dd { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-line { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--mute); }
.note-line .icon { width: 15px; height: 15px; flex: none; }
@media (max-width: 900px) {
  .profile-id { grid-template-columns: auto minmax(0, 1fr); }
  .profile-facts { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .profile { padding: 18px 16px; }
  .profile-id { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* ---------- an image field in an editor: the picture, then where it comes from ---------- */
.img-field { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 18px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--head); }
.img-field.is-set { border-style: solid; border-color: var(--line); background: var(--sheet); }
.img-field.is-round .img-prev { border-radius: 50%; }
.img-prev { display: grid; place-items: center; width: 132px; aspect-ratio: 1; border-radius: 12px; background: var(--table-2); color: var(--c4); overflow: hidden; }
.img-field.is-wide .img-prev { aspect-ratio: 4 / 3; }
.img-prev img { width: 100%; height: 100%; object-fit: cover; }
.img-prev .icon { width: 36px; height: 36px; }
.img-body { display: grid; gap: 8px; min-width: 0; }
.img-body b { font-size: var(--fs-ui); }
.img-body p { font-size: var(--fs-xs); color: var(--mute); line-height: 1.6; }
.img-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.img-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; }
.img-state .icon { width: 15px; height: 15px; }
.img-state.is-wait { color: var(--wax); }
@media (max-width: 560px) {
  .img-field { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .img-prev { width: 96px; }
}
.choose-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.choose-head h2 { font-size: var(--fs-h2); }

/* ---------- phone numbers: the country and its dial code on the start of a left-to-right field ---------- */
.phone-field .iti { display: block; width: 100%; }
/* The number is read left to right but sits against its dial code, which the page's direction puts on the right. */
.phone-field .iti .input { width: 100%; direction: ltr; text-align: right; font-family: var(--mono); letter-spacing: normal; }
.phone-field .iti__selected-country { border-radius: 0 10px 10px 0; border-inline-end: 1px solid var(--line); }
.phone-field .iti__selected-country-primary { padding-inline: 12px 8px; }
.phone-field .iti__selected-country:hover .iti__selected-country-primary, .phone-field .iti__selected-country[aria-expanded="true"] .iti__selected-country-primary { background: var(--table); }
.phone-field .iti__selected-dial-code { direction: ltr; unicode-bidi: isolate; margin-inline-start: 6px; padding-left: 10px; font-family: var(--mono); font-size: var(--fs-ui); color: var(--ink); }
.phone-field .iti__arrow { border-top-color: var(--mute); }
.phone-field .iti__arrow--up { border-bottom-color: var(--mute); }
.phone-field.is-invalid .input { border-color: var(--wax); }
.iti--container { z-index: 1200; }
.iti__dropdown-content { direction: rtl; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); box-shadow: var(--shadow-pop); overflow: hidden; font-family: var(--font); }
.iti__search-input { direction: rtl; min-height: 42px; padding-inline: 14px; border: 0; border-block-end: 1px solid var(--line); font: inherit; font-size: var(--fs-ui); outline: 0; }
.iti__country-list { max-height: 260px; scrollbar-width: thin; }
.iti__country { gap: 10px; padding: 8px 14px; font-size: var(--fs-xs); }
.iti__country.iti__highlight { background: var(--table); }
.iti__country-name { margin-inline: 0; color: var(--ink); }
.iti__dial-code { margin-inline-start: auto; direction: ltr; font-family: var(--mono); color: var(--mute); }
.phone-field .iti__dropdown-content { z-index: 30; width: 100%; margin-block-start: 4px; }

/* ---------- fields that carry their kind: email, link, date. The symbol sits where the text starts ---------- */
.affix { position: relative; display: block; }
.affix .affix-ic { position: absolute; inset-block-start: 50%; inset-inline-start: 13px; width: 17px; height: 17px; color: var(--c4); transform: translateY(-50%); pointer-events: none; transition: color var(--t-fast); }
/* Physical sides: the value inside may run left to right, which would turn its logical start to the left. */
[dir="rtl"] .affix .input { padding-right: 40px; }
[dir="ltr"] .affix .input { padding-left: 40px; }
.affix:focus-within .affix-ic { color: var(--wax); }
/* left-to-right values are right-aligned under the label here, so the symbol stays on the right beside them */
.affix-go { position: absolute; inset-block-start: 50%; inset-inline-end: 6px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--mute); transform: translateY(-50%); }
.affix-go:hover { background: var(--table); color: var(--wax); }
.affix-go .icon { width: 16px; height: 16px; }
[dir="rtl"] .affix.has-link .input { padding-left: 44px; }
[dir="ltr"] .affix.has-link .input { padding-right: 44px; }
.field.is-invalid .affix-ic { color: var(--wax); }