/* Mizan workspace — identity: "balance" (ميزان). Ink, ivory, one muted casal accent (palette scale follows the legal-AI category: warm neutrals, small radii).
   Logical properties throughout so FR (ltr) and AR (rtl) share one stylesheet. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400 650;font-display:swap;src:url("fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/eb-garamond-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/noto-sans-arabic-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Naskh Arabic";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/noto-naskh-arabic-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  color-scheme:light;
  /* Warm neutral scale (ink → ivory), one muted accent. Category reference: ivory canvas, near-black ink, small radii. */
  --ink:#0F0E0D; --g900:#1F1D1A; --g800:#33312C; --g700:#524F49; --g600:#706D66; --g500:#8F8B85; --g400:#ADABA5; --g300:#CCCAC6; --g200:#E5E5E3; --g100:#F2F1F0;
  --paper:#FAFAF9; --surface:#FFFFFF; --sunken:#F2F1F0;
  --ink-2:#33312C; --muted:#706D66;
  --line:#E5E5E3; --line-strong:#CCCAC6;
  --accent:#2D4A47; --accent-hover:#223836; --accent-tint:#E8EEEC; --on-accent:#FAFAF9;
  --bronze:#593D3A; --blush:#F3ECEA; --blush-line:#D9CDCC;
  --brass:#C29A44;
  --mark:#F6F2A8;
  --danger:#9B2C2C; --danger-tint:#F8E7E5;
  --ok:#1F6B3A; --ok-tint:#E3F0E7;
  --focus:#0F0E0D;

  --font-sans:"Inter","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"EB Garamond","Noto Naskh Arabic",Georgia,"Times New Roman",serif;

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --t-fast:150ms;

  /* concentric radii: card = control + padding-ish; sharp like the category */
  --r-control:6px; --r-card:10px; --r-tag:4px; --r-pill:999px;

  --elev-1:0 0 0 1px var(--line),0 1px 2px rgb(15 14 13 / .04);
  --elev-2:0 0 0 1px var(--g300),0 2px 6px rgb(15 14 13 / .06),0 12px 24px -14px rgb(15 14 13 / .14);

  --side-w:264px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html[lang="ar"] body{line-height:1.8}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.2;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.1rem,1.6rem + 2vw,3rem);letter-spacing:-.018em;font-weight:500}
h2{font-size:1.5rem}
h3{font-size:1.2rem}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.45}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
small{font-size:.875rem;color:var(--muted)}
bdi,.num{font-variant-numeric:tabular-nums}
pre{margin:0;font:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
::selection{background:var(--mark)}
.sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r-control);z-index:100;transition:inset-block-start var(--t-fast) var(--ease-out)}
.skip:focus{inset-block-start:12px}

/* icons */
.i{inline-size:20px;block-size:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .i-flip{transform:scaleX(-1)}

/* ───────── shell ───────── */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-block-size:100dvh}
.side{background:var(--ink);color:var(--paper);position:sticky;inset-block-start:0;block-size:100dvh;display:flex;flex-direction:column;padding:22px 14px 16px;gap:18px;overflow-y:auto;overscroll-behavior:contain}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px;color:var(--paper);text-decoration:none}
.brand-mark{--mark-bg:var(--paper);--mark-fg:var(--ink)}
.mk-bg{fill:var(--mark-bg)}
.mk-fg{stroke:var(--mark-fg)}
.brand:hover{color:#fff}
.brand-mark{inline-size:40px;block-size:40px;flex:none}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-latin{font-family:var(--font-display);font-size:1.75rem;font-weight:500;letter-spacing:-.005em}
.brand-ar{font-family:"Noto Naskh Arabic",var(--font-display);font-size:.95rem;color:var(--blush-line);margin-block-start:2px;letter-spacing:0}
.side-sub{padding:0 10px;font-size:.8125rem;color:var(--g400);margin:-6px 0 0}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--g500);padding:14px 12px 6px}
[dir="rtl"] .nav-label{letter-spacing:0;text-transform:none;font-size:.8rem}
.nav a{display:flex;align-items:center;gap:12px;min-block-size:44px;padding:0 12px;border-radius:var(--r-control);color:var(--g300);text-decoration:none;font-weight:500;font-size:.9375rem;position:relative;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.nav a[aria-current="page"]{background:var(--g900);color:#fff}
.nav a[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-14px;inset-block:10px;inline-size:4px;border-radius:0 4px 4px 0;background:var(--paper)}
[dir="rtl"] .nav a[aria-current="page"]::before{border-radius:4px 0 0 4px}
@media (hover:hover) and (pointer:fine){.nav a:hover{background:var(--g900);color:#fff}}
.side-foot{margin-block-start:auto;display:flex;flex-direction:column;gap:12px;padding-block-start:14px;border-block-start:1px solid var(--g800)}
.who{display:flex;align-items:center;gap:10px;padding:0 6px}
.avatar{inline-size:36px;block-size:36px;border-radius:var(--r-pill);background:var(--paper);color:var(--ink);display:grid;place-items:center;font-weight:650;font-size:.95rem;flex:none}
.who-text{min-inline-size:0;line-height:1.25}
.who-text b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-text span{font-size:.8125rem;color:var(--g400)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--g900);border-radius:var(--r-control)}
.seg button{min-block-size:36px;border:0;border-radius:4px;background:transparent;color:var(--g400);font:inherit;font-size:.875rem;font-weight:550;cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.seg button:active{transform:scale(.96)}
.logout{display:flex;align-items:center;gap:10px;inline-size:100%;min-block-size:44px;padding:0 12px;border:0;border-radius:var(--r-control);background:transparent;color:var(--g300);font:inherit;font-weight:500;font-size:.9375rem;cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.logout:hover{background:var(--g900);color:#fff}}
.logout:active{transform:scale(.96)}
.side .nav a:focus-visible,.side button:focus-visible,.side a:focus-visible{outline-color:var(--paper)}

.main{padding:28px clamp(18px,4vw,56px) 72px;min-inline-size:0}
.main-inner{max-inline-size:1040px;margin-inline:auto;animation:enter 200ms var(--ease-out) both}
@keyframes enter{from{opacity:0}to{opacity:1}}
.notice{display:flex;align-items:flex-start;gap:10px;background:var(--blush);color:var(--bronze);border-radius:var(--r-control);padding:10px 14px;font-size:.875rem;line-height:1.5;margin-block-end:28px;box-shadow:inset 0 0 0 1px var(--blush-line)}
.notice .i{margin-block-start:1px;color:var(--bronze)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-block-end:24px}
.page-head p{margin:6px 0 0;color:var(--muted);max-inline-size:60ch}

/* mobile top bar */
.topbar{display:none}
.scrim{display:none}

/* ───────── controls ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;padding:0 18px;border:0;border-radius:var(--r-control);font:inherit;font-weight:550;font-size:.9375rem;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;touch-action:manipulation;transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:0 1px 2px rgb(15 14 13 / .25)}
.btn-primary:hover{color:var(--paper)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--g800)}}
.btn-secondary{background:var(--surface);color:var(--ink);box-shadow:var(--elev-1)}
@media (hover:hover) and (pointer:fine){.btn-secondary:hover{background:var(--g100);color:var(--ink)}}
.btn-quiet{background:transparent;color:var(--ink);padding:0 12px}
@media (hover:hover) and (pointer:fine){.btn-quiet:hover{background:var(--g100)}}
.btn-sm{min-block-size:36px;padding:0 12px;font-size:.875rem}
@media (pointer:coarse){.btn-sm{min-block-size:44px}}
.btn.is-loading{opacity:.7;cursor:progress}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.field{display:flex;flex-direction:column;gap:6px;margin:0}
.field>.lbl{font-weight:550;font-size:.9375rem;color:var(--ink)}
.hint{font-size:.8125rem;color:var(--muted);line-height:1.45}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-control);padding:0 14px;min-block-size:44px;inline-size:100%;max-inline-size:100%;transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
textarea{padding:11px 14px;min-block-size:96px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--g600)}
input:hover,select:hover,textarea:hover{border-color:var(--g500)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgb(15 14 13 / .10)}
input[readonly]{background:var(--sunken);color:var(--ink-2);border-color:var(--line)}
select{appearance:none;-webkit-appearance:none;padding-inline-end:38px;background-image:url("chevron-down.svg");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;cursor:pointer}
[dir="rtl"] select{background-position:left 14px center}
input[type="file"]{padding:9px 12px;min-block-size:48px;cursor:pointer}
input[type="file"]::file-selector-button{font:inherit;font-weight:550;border:0;border-radius:4px;background:var(--g100);color:var(--ink);padding:7px 12px;margin-inline-end:12px;cursor:pointer}
[dir="rtl"] textarea,[dir="rtl"] input[dir="rtl"]{text-align:start}
.pw{position:relative}
.pw input{padding-inline-end:48px}
.pw button{position:absolute;inset-block-start:0;inset-inline-end:0;inline-size:48px;block-size:44px;border:0;background:transparent;color:var(--muted);border-radius:var(--r-control);cursor:pointer;display:grid;place-items:center;transition:color var(--t-fast) var(--ease-out)}
.pw button:hover{color:var(--ink)}
.pw button[aria-pressed="true"]{color:var(--ink)}

/* ───────── cards ───────── */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--elev-1);padding:24px;border:0;margin:0;min-inline-size:0}
.card+.card{margin-block-start:18px}
fieldset.card{display:block}
.card>legend,.card-title{font-family:var(--font-display);font-size:1.35rem;font-weight:500;padding:0;margin:0 0 14px;float:left;inline-size:100%;line-height:1.3}
.card>legend+*{clear:both}
.card-sub{color:var(--muted);font-size:.9rem;margin:0 0 18px}
.grid{display:grid;gap:18px 20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-all{grid-column:1/-1}
.stack>*+*{margin-block-start:18px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:22px}
.sticky-actions{position:sticky;inset-block-end:0;margin-block-start:22px;padding:14px 0;background:linear-gradient(to top,var(--paper) 70%,transparent);display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ───────── badges ───────── */
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:6px;min-block-size:24px;padding:0 8px;border-radius:var(--r-tag);font-size:.75rem;font-weight:550;line-height:1;background:var(--g100);color:var(--g800);white-space:nowrap}
.tag-lang{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--g800)}
.tag-answerable .dot{background:var(--accent)}
.tag-out_of_scope .dot{background:var(--g500)}
.tag-trap .dot{background:var(--bronze)}
.tag-draft .dot{background:var(--g500)}
.tag-lawyer_approved{background:var(--ok-tint);color:#17502C}
.tag-lawyer_approved .dot{background:var(--ok)}
.tag .dot{inline-size:6px;block-size:6px;border-radius:50%;background:currentColor}
[dir="rtl"] .tag{font-size:.8125rem}

/* ───────── lists ───────── */
.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin-block-end:18px}
.toolbar .field{min-inline-size:160px;flex:1 1 160px;max-inline-size:240px}
.toolbar .field>.lbl{font-size:.8125rem;color:var(--muted);font-weight:550}
.count{color:var(--muted);font-size:.875rem;margin-inline-start:auto;align-self:center}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.qcard{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--elev-1);padding:18px 20px;transition:box-shadow var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.qcard:hover{box-shadow:var(--elev-2)}}
.qcard-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-block-end:10px}
.qid{font-weight:600;font-size:.9375rem;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;display:inline-flex;gap:6px;align-items:center}
.qid:hover{text-decoration:underline}
.qid{padding-block:10px;margin-block:-10px}
.qtext{margin:0 0 12px;font-size:1.0625rem;line-height:1.6;max-inline-size:72ch}
.qtext[dir="rtl"]{font-size:1.125rem;line-height:1.85;max-inline-size:none}
.qmeta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:.8125rem;align-items:center}
.review-box{margin-block-start:16px;padding-block-start:16px;border-block-start:1px solid var(--line);display:grid;gap:12px}
.empty{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--elev-1);padding:44px 24px;text-align:center;color:var(--muted)}
.empty .i{inline-size:32px;block-size:32px;color:var(--g500);margin-block-end:8px}
.empty b{display:block;font-family:var(--font-display);font-size:1.4rem;color:var(--ink);margin-block-end:4px;font-weight:500}
.empty .btn{margin-block-start:14px}

/* article search hits (htmx) */
.hits{display:grid;gap:8px;margin-block-start:10px}
.hit{display:flex;gap:12px;align-items:flex-start;background:var(--sunken);border-radius:var(--r-control);padding:10px 12px;font-size:.9rem;animation:enter 150ms var(--ease-out) both}
.hit .btn{inline-size:36px;padding:0;flex:none}
.hit-body{min-inline-size:0;flex:1}
.hit-body b{font-weight:600;color:var(--ink)}
.hit-text{display:block;color:var(--ink-2);margin-block-start:2px;max-block-size:4.8em;overflow:hidden}
.hits-none{color:var(--muted);font-size:.875rem}

/* comments */
.comment{border-inline-start:3px solid var(--bronze);background:var(--blush);border-radius:0 var(--r-control) var(--r-control) 0;padding:10px 14px;font-size:.9375rem}
[dir="rtl"] .comment{border-radius:var(--r-control) 0 0 var(--r-control)}
.comment b{font-weight:600}
.comment time,.comment .when{color:var(--muted);font-size:.8125rem;margin-inline-start:6px}
.comment p{margin:4px 0 0}

/* meta strip on edit page */
.meta-strip{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-block-end:18px;color:var(--ink-2);font-size:.9rem}
.meta-strip b{font-weight:600}

/* grading */
.answer-q{font-size:1.0625rem;margin:6px 0 14px}
.answer-text{background:var(--sunken);border-radius:var(--r-control);padding:14px 16px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.cites{display:grid;gap:10px;margin-block:12px 4px}
.cite{border-inline-start:3px solid var(--ink);padding:6px 14px;background:var(--g100);border-radius:0 var(--r-control) var(--r-control) 0}
[dir="rtl"] .cite{border-radius:var(--r-control) 0 0 var(--r-control)}
.cite b{font-weight:600;color:var(--ink);background:var(--mark);padding:0 4px;border-radius:2px}
.cite p{margin:2px 0 0;font-size:.9375rem;color:var(--ink-2)}
.section-label{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 6px}
[dir="rtl"] .section-label{letter-spacing:0;text-transform:none;font-size:.875rem}
.import{border:1.5px dashed var(--line-strong);background:rgb(255 255 255 / .55);box-shadow:none}

/* ───────── prose (guide) ───────── */
.prose{max-inline-size:760px}
.prose h1{margin-block-end:12px}
.prose .lead{font-size:1.125rem;color:var(--ink-2);margin-block-end:22px}
.prose .notice-ar{background:var(--sunken);border-radius:var(--r-control);padding:10px 14px;font-size:.9rem;color:var(--ink-2);margin-block-end:16px}
.prose details{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--elev-1);margin:0 0 12px;overflow:hidden}
.prose summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;min-block-size:56px;font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"";flex:none;inline-size:16px;block-size:16px;background:url("chevron-down.svg") center/16px no-repeat;transition:transform var(--t-fast) var(--ease-out)}
.prose details[open] summary::after{transform:rotate(180deg)}
.prose details>*:not(summary){margin-inline:20px}
.prose details>*:nth-child(2){margin-block-start:0}
.prose details>*:last-child{margin-block-end:20px}
.prose dt{font-weight:600;margin-block-start:14px}
.prose dd{margin:2px 0 0;color:var(--ink-2)}
.prose li{margin-block:4px}
.prose ul,.prose ol{padding-inline-start:1.3em;margin-block:0 1em}
@media (hover:hover) and (pointer:fine){.prose summary:hover{background:var(--g100)}}

.flow-title{font-size:1.5rem;margin:0 0 14px}
.flow{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:0}
.flow-step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding-block-end:22px}
.flow-step:last-child{padding-block-end:0}
.flow-step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:17px;inset-block:40px 4px;inline-size:2px;background:var(--line-strong)}
.flow-n{inline-size:36px;block-size:36px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--font-display);font-size:1.15rem;font-weight:500;font-variant-numeric:tabular-nums}
.flow-step strong{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:500;line-height:1.3;margin-block:4px 2px}
.flow-step p{margin:0 0 6px;color:var(--ink-2);max-inline-size:60ch}
.flow-step a{font-weight:550;font-size:.9375rem;display:inline-flex;align-items:center;min-block-size:44px;margin-block:-8px -10px}
/* ───────── error page ───────── */
.errorpage{min-block-size:60dvh;display:grid;place-content:center;text-align:center;gap:10px;justify-items:center}
.errorpage .brand-mark,.main .brand-mark{--mark-bg:var(--ink);--mark-fg:var(--paper)}
.errorpage .code{font-family:var(--font-display);font-size:4.5rem;color:var(--g400);line-height:1;font-weight:500}
.errorpage p{color:var(--muted);max-inline-size:44ch}

/* ───────── login ───────── */
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-block-size:100dvh}
.auth-brand{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.auth-brand .motif{position:absolute;inset-inline-end:-10%;inset-block-end:-10%;inline-size:58%;max-inline-size:460px;color:var(--g900);pointer-events:none}
.auth-brand .brand{padding:0}
.auth-brand .brand-mark{inline-size:48px;block-size:48px}
.auth-brand .brand-latin{font-size:2.1rem}
.auth-copy{position:relative;max-inline-size:30rem}
.auth-copy h1{color:var(--paper);font-weight:400;font-size:clamp(2rem,1.4rem + 2vw,3.1rem);line-height:1.12;margin-block-end:14px}
.auth-copy .ar{display:block;inline-size:fit-content;font-family:"Noto Naskh Arabic",var(--font-display);font-size:1.5rem;line-height:1.7;color:var(--blush-line);margin:0 0 18px;font-weight:500}
.auth-copy p{color:var(--g300);font-size:1rem;max-inline-size:44ch}
.auth-foot{position:relative;font-size:.8125rem;color:var(--g500)}
.auth-form{display:grid;place-items:center;padding:clamp(24px,5vw,64px)}
.auth-card{inline-size:100%;max-inline-size:400px}
.auth-card h2{font-size:2.2rem;margin-block-end:6px}
.auth-card .sub{color:var(--muted);margin-block-end:22px}
.auth-card .btn{inline-size:100%;margin-block-start:8px;min-block-size:48px}
.alert{display:flex;gap:10px;align-items:flex-start;background:var(--danger-tint);color:#6F1D1D;border-radius:var(--r-control);padding:11px 14px;font-size:.9rem;margin-block-end:16px;box-shadow:inset 0 0 0 1px rgb(155 44 44 / .22)}
.alert .i{color:var(--danger);margin-block-start:1px}
.auth-card .notice{margin:22px 0 0}
.stagger>*{animation:rise 420ms var(--ease-out) both}
.stagger>*:nth-child(2){animation-delay:100ms}
.stagger>*:nth-child(3){animation-delay:200ms}
.stagger>*:nth-child(4){animation-delay:300ms}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ───────── responsive ───────── */
@media (max-width:960px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset-block:0;inset-inline-start:0;inline-size:min(86vw,320px);block-size:100dvh;z-index:50;transform:translateX(-102%);visibility:hidden;transition:transform 220ms var(--ease-out),visibility 0s linear 220ms;box-shadow:var(--elev-2)}
  [dir="rtl"] .side{transform:translateX(102%)}
  body.nav-open .side{transform:none;visibility:visible;transition:transform 220ms var(--ease-out),visibility 0s}
  .scrim{display:block;position:fixed;inset:0;background:rgb(15 14 13 / .55);opacity:0;pointer-events:none;z-index:40;transition:opacity 200ms var(--ease-out)}
  body.nav-open .scrim{opacity:1;pointer-events:auto}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-start:0;z-index:30;background:var(--ink);color:var(--paper);padding:8px 12px 8px 14px;padding-inline:14px 8px}
  .topbar .brand-mark{inline-size:32px;block-size:32px}
  .topbar .brand-latin{font-size:1.4rem}
  .topbar .brand-ar{font-size:.8rem}
  .menu-btn{inline-size:44px;block-size:44px;border:0;border-radius:var(--r-control);background:var(--g900);color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
  .menu-btn:active{transform:scale(.96)}
  .main{padding-block-start:20px}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-brand{padding-block:28px 32px;gap:24px}
  .auth-copy .ar,.auth-copy p,.auth-brand .motif{display:none}
  .auth-copy h1{font-size:1.75rem;margin:0}
}
@media (max-width:640px){
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .card{padding:18px}
  .qcard{padding:16px}
  .toolbar .field{max-inline-size:none;flex-basis:100%}
  .count{margin-inline-start:0;flex-basis:100%}
  .actions .btn,.sticky-actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:active,.seg button:active,.logout:active,.menu-btn:active{transform:none}
}
@media print{.side,.topbar,.scrim,.notice{display:none}.shell{display:block}body{background:#fff}}

/* Contribution brief */
.brief .progress-card{margin-block-end:28px}
.meter{margin-block-end:14px}
.meter-head{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--ink-2);margin-block-end:6px}
.meter-head b{font-variant-numeric:tabular-nums}
progress{appearance:none;-webkit-appearance:none;display:block;inline-size:100%;block-size:8px;border:0;border-radius:4px;background:var(--sunken);overflow:hidden}
progress::-webkit-progress-bar{background:var(--sunken);border-radius:4px}
progress::-webkit-progress-value{background:var(--accent);border-radius:4px;transition:inline-size 300ms var(--ease-out)}
progress::-moz-progress-bar{background:var(--accent);border-radius:4px}
.prose .brief-stats{list-style:none;padding-inline-start:0;display:flex;flex-wrap:wrap;gap:6px 22px;padding:0;margin:18px 0 20px;color:var(--ink-2);font-size:.9rem}
.brief-stats b{font-variant-numeric:tabular-nums;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.kinds{display:grid;gap:14px;margin-block-end:14px}
.kind{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--elev-1);padding:20px 22px}
.kind h3{font-family:var(--font-display);font-size:1.2rem;font-weight:500;margin:12px 0 6px}
.kind p{margin:0 0 10px;color:var(--ink-2)}
.kind .eg{background:var(--sunken);border-radius:var(--r-control);padding:10px 12px;margin:0;font-size:.95rem}
.kind .eg span{display:block;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-block-end:2px}
[dir="rtl"] .kind .eg span{letter-spacing:0;text-transform:none;font-size:.8125rem}
.brief-note{color:var(--muted);font-size:.9rem;margin:0 0 28px}
.two-col{display:grid;gap:18px}
.two-col .card+.card{margin-block-start:0}
.plain{margin:0;padding-inline-start:1.2em;color:var(--ink-2)}
.plain li+li{margin-block-start:6px}
@media (min-width:880px){.two-col{grid-template-columns:1fr 1fr}}