/* =====================================================================
   AL TAMAYUZ CLIENT PORTAL — LEDGER 4
   Production stylesheet. Descends from 02B (visual DNA) and 02E-V1
   (visual journey + character Guide), with the Owner UX corrections
   applied as first-class architecture rather than overrides:

     * EN/AR are one layout expressed with CSS logical properties, so
       Arabic mirrors structurally (rail, journey, chevrons, drawers)
       instead of being right-aligned text.
     * Light and Dark are two authored palettes, not an inversion.
     * The rail collapses to an icon rail and the preference persists.
     * Operational type is Dubai; El Messiri is confined to .brandmoment.
   ===================================================================== */

/* ---------------- fonts ---------------------------------------------
   Dubai ships with Windows 10/11 and is the Owner-preferred operational
   face; Cairo (self-hosted, AR + latin subsets) is the readable fallback
   everywhere else, including Linux servers rendering screenshots. */
@font-face{font-family:"Cairo";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/Cairo-400-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:"Cairo";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/Cairo-400-normal-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"Cairo";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/Cairo-600-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:"Cairo";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/Cairo-600-normal-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"Cairo";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/Cairo-700-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:"Cairo";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/Cairo-700-normal-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"El Messiri";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/ElMessiri-600-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:"El Messiri";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/ElMessiri-600-normal-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF;}

/* ---------------- LAYER 1 · primitives (never referenced by components) */
:root{
  --p-petrol-900:#052733; --p-petrol-800:#08384a; --p-petrol-700:#0c4d5c;
  --p-teal:#0f766e; --p-teal-dk:#0c5f59; --p-teal-bright:#1a9dad; --p-teal-lt:#2aa39a;
  --p-cyan:#7adfea;
  --p-gold:#c9a24d; --p-gold-deep:#8a6a2a; --p-gold-lt:#d9b96a; --p-gold-border:#d9bc78;
  --p-slate-050:#f3f7f8; --p-slate-900:#0d1c24; --p-slate-850:#102229; --p-slate-800:#132833;
  --gold-grad:linear-gradient(120deg,#e1cb8e 0%,#bf9b4f 100%);
  --petrol-grad:linear-gradient(160deg,#0c4d5c 0%,#08384a 55%,#052733 100%);
  --petrol-grad-dark:linear-gradient(160deg,#0a3f4d 0%,#062c3b 55%,#041e28 100%);
  --rail-grad:linear-gradient(178deg,#08384a 0%,#052733 100%);
  --rail-grad-dark:linear-gradient(178deg,#062c3b 0%,#041e28 100%);

  --ui:"Dubai","Cairo","Segoe UI",system-ui,-apple-system,sans-serif;
  --brand:"El Messiri","Dubai","Cairo",serif;
  --rail-w:248px; --rail-w-collapsed:76px; --topbar-h:64px;
}

/* ---------------- LAYER 2 · semantic roles — LIGHT ------------------- */
:root, html[data-theme="light"]{
  --bg:#f3f7f8; --surface:#ffffff; --surface-subtle:#fbfdfd; --surface-tint:#f0f6f7;
  --ink:#10242c; --ink-2:#42606b; --ink-3:#567079; --heading:#08384a;
  --border:#e2ebee; --border-strong:#c9d9de;
  --action:#0f766e; --action-hover:#0c5f59; --accent:#1a9dad;
  --accent-tint:#e1f1f4; --accent-tint-strong:#cfe8ec;
  --btn-primary-text:#ffffff; --chip-teal-text:#0f766e;
  --gold:#c9a24d; --gold-text:#8a6a2a; --gold-tint:#faf5e8; --gold-border:#d9bc78;
  --ok:#16714f; --ok-tint:#e7f4ec;
  --warn:#855a0d; --warn-tint:#fdf4e3; --warn-border:#ecd9ab;
  --err:#b3372e; --err-tint:#fbecea; --err-border:#efc4bf;
  --info:#1c5d8f; --info-tint:#e8f1f8; --info-border:#c3d9e8;
  --brand-field:var(--petrol-grad); --rail-field:var(--rail-grad);
  --onbrand:#ffffff; --onbrand-2:#9fbac2; --onbrand-accent:#7adfea;
  --onbrand-border:rgba(255,255,255,.14);
  --sh-card:0 1px 2px rgba(8,56,74,.05), 0 4px 14px rgba(8,56,74,.05);
  --sh-raised:0 2px 6px rgba(8,56,74,.08), 0 10px 28px rgba(8,56,74,.10);
  --sh-gold:0 2px 10px rgba(191,155,79,.35);
  --node-bg:#ffffff; --wm-opacity:.07;
}

/* ---------------- LAYER 2 · semantic roles — DARK (authored) --------- */
html[data-theme="dark"]{
  --bg:#0d1c24; --surface:#132833; --surface-subtle:#102229; --surface-tint:#0f242e;
  --ink:#eef6f8; --ink-2:#b7cdd4; --ink-3:#8aa4ad; --heading:#d7ecf1;
  --border:#1e3b48; --border-strong:#2b5163;
  --action:#2aa39a; --action-hover:#37b5ab; --accent:#3fc0d0;
  --accent-tint:rgba(42,163,154,.16); --accent-tint-strong:rgba(42,163,154,.28);
  /* measured: white on the lightened teal fill is 3.09:1, so dark ink here */
  --btn-primary-text:#04201e; --chip-teal-text:#7adfea;
  --gold:#c9a24d; --gold-text:#d9b96a; --gold-tint:rgba(201,162,77,.13); --gold-border:#8a6a2a;
  --ok:#5cc493; --ok-tint:rgba(23,113,79,.22);
  --warn:#e3b665; --warn-tint:rgba(133,90,13,.22); --warn-border:rgba(227,182,101,.4);
  --err:#ef8f86; --err-tint:rgba(179,55,46,.22); --err-border:rgba(239,143,134,.4);
  --info:#7cb4dd; --info-tint:rgba(28,93,143,.24); --info-border:rgba(124,180,221,.38);
  --brand-field:var(--petrol-grad-dark); --rail-field:var(--rail-grad-dark);
  --onbrand:#ffffff; --onbrand-2:#9fbac2; --onbrand-accent:#7adfea;
  --onbrand-border:rgba(255,255,255,.14);
  --sh-card:0 1px 2px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.28);
  --sh-raised:0 2px 6px rgba(0,0,0,.42), 0 10px 28px rgba(0,0,0,.36);
  --sh-gold:0 2px 10px rgba(191,155,79,.28);
  --node-bg:#0f242e; --wm-opacity:.05;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--ui);font-size:16px;line-height:1.55;color:var(--ink);
  background:var(--bg);min-height:100vh;}
html[lang="ar"] body{font-size:17px;line-height:1.7;}
img,svg{max-width:100%;vertical-align:middle;}
a{color:var(--action);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}
.ic-sm{width:16px;height:16px;} .ic-lg{width:28px;height:28px;}
/* Directional glyphs mirror with the document, not with a second icon set. */
html[dir="rtl"] .ic-dir{transform:scaleX(-1);}

.lrule{position:relative;padding-block-end:10px;}
.lrule::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:44px;
  border-block-start:2px solid var(--accent);border-block-end:1px solid var(--border-strong);
  padding-block-start:3px;}
.brandmoment{font-family:var(--brand);font-weight:600;letter-spacing:.01em;}

/* =====================================================================
   SHELL — rail + topbar + content. All offsets are logical, so Arabic
   moves the rail to the right with no RTL-specific layout rules.
   ===================================================================== */
.shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;
  transition:grid-template-columns .18s ease;}
body[data-rail="collapsed"] .shell{grid-template-columns:var(--rail-w-collapsed) minmax(0,1fr);}

.rail{background:var(--rail-field);color:var(--onbrand);padding:20px 16px;
  display:flex;flex-direction:column;position:sticky;inset-block-start:0;height:100vh;
  overflow:hidden;}
.rail-logo{display:flex;align-items:center;gap:10px;min-height:44px;}
.rail-logo img{width:150px;height:auto;transition:width .18s ease;}
.rail-logo .desc{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--onbrand-accent);margin-block-start:8px;font-weight:600;}
body[data-rail="collapsed"] .rail-logo img{width:40px;content-visibility:auto;}
body[data-rail="collapsed"] .rail-logo .desc,
body[data-rail="collapsed"] .rail .navlabel,
body[data-rail="collapsed"] .rail .rail-section{display:none;}
body[data-rail="collapsed"] .rail{padding-inline:14px;align-items:center;}
body[data-rail="collapsed"] .rail a.nav-item{justify-content:center;padding-inline:0;}

.rail nav{margin-block-start:26px;display:flex;flex-direction:column;gap:2px;}
.rail .rail-section{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--onbrand-2);opacity:.75;margin:14px 12px 6px;}
.rail a.nav-item{display:flex;gap:11px;align-items:center;padding:10px 12px;
  border-radius:10px;color:var(--onbrand-2);font-size:15px;font-weight:500;position:relative;}
.rail a.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none;}
.rail a.nav-item.active{background:rgba(255,255,255,.10);color:#fff;}
.rail a.nav-item.active::before{content:"";position:absolute;inset-inline-start:-10px;
  inset-block:9px;width:3px;border-radius:3px;background:var(--onbrand-accent);}
.rail .nav-badge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--err);color:#fff;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
body[data-rail="collapsed"] .rail .nav-badge{position:absolute;inset-block-start:4px;
  inset-inline-end:8px;margin:0;min-width:17px;height:17px;font-size:10px;padding:0 4px;}
.rail .rail-foot{margin-block-start:auto;border-block-start:1px solid var(--onbrand-border);
  padding-block-start:12px;display:flex;flex-direction:column;gap:2px;}
.rail .rail-foot button, .rail .rail-foot a{color:var(--onbrand-2);font-size:14.5px;
  display:flex;gap:10px;align-items:center;padding:9px 12px;width:100%;border-radius:10px;}
.rail .rail-foot button:hover, .rail .rail-foot a:hover{background:rgba(255,255,255,.07);color:#fff;
  text-decoration:none;}

.topbar{display:flex;align-items:center;gap:10px;padding:11px 26px;min-height:var(--topbar-h);
  background:var(--surface);border-block-end:1px solid var(--border);
  position:sticky;inset-block-start:0;z-index:30;}
.topbar .grow{flex:1;}
.org-chip{display:flex;gap:10px;align-items:center;padding:8px 14px;border:1px solid var(--border);
  border-radius:11px;font-size:15px;font-weight:500;color:var(--ink);background:var(--surface);
  max-width:340px;}
.org-chip .o{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:11px;color:var(--ink-2);position:relative;}
.iconbtn:hover{background:var(--accent-tint);color:var(--action);}
.iconbtn .badge{position:absolute;inset-block-start:4px;inset-inline-end:4px;min-width:17px;
  height:17px;border-radius:9px;background:var(--err);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;}
.acct{display:flex;align-items:center;gap:9px;padding:5px 10px;border-radius:12px;}
.acct:hover{background:var(--accent-tint);}
.acct .avatar{width:33px;height:33px;border-radius:50%;background:var(--accent-tint-strong);
  color:var(--action);font-size:13px;font-weight:700;display:flex;align-items:center;
  justify-content:center;}
.acct .aname{font-size:15px;font-weight:600;color:var(--ink);}
html[data-theme="dark"] .acct .avatar{color:#dff5f2;}

.menu-anchor{position:relative;}
.menu{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;min-width:240px;
  background:var(--surface);border:1px solid var(--border);border-radius:13px;
  box-shadow:var(--sh-raised);padding:7px;display:none;z-index:60;text-align:start;}
.menu.open{display:block;}
.menu a,.menu button{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;
  border-radius:9px;font-size:14.5px;color:var(--ink);text-align:start;}
.menu a:hover,.menu button:hover{background:var(--surface-tint);text-decoration:none;}
.menu .m-head{padding:8px 12px 4px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;}
.menu .m-div{height:1px;background:var(--border);margin:6px 4px;}
.notif{display:flex;gap:10px;padding:11px 12px;border-radius:9px;font-size:14px;color:var(--ink);
  align-items:flex-start;line-height:1.45;}
.notif:hover{background:var(--surface-tint);text-decoration:none;}
.notif .ndot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  margin-block-start:6px;flex:none;}
.notif.read .ndot{background:var(--border-strong);}
.notif.t-err .ndot{background:var(--err);} .notif.t-gold .ndot{background:var(--gold);}
.notif .nmeta{font-size:12.5px;color:var(--ink-3);margin-block-start:2px;}

.content{padding:26px 32px 96px;max-width:1180px;}
.crumb{font-size:13.5px;color:var(--ink-3);display:flex;gap:7px;align-items:center;
  margin-block-end:14px;flex-wrap:wrap;}
.crumb a{color:var(--ink-3);}
.h1{font-size:26px;font-weight:700;color:var(--heading);line-height:1.25;}
html[lang="ar"] .h1{font-size:27px;}
.h2{font-size:20px;font-weight:700;color:var(--heading);}
.h3{font-size:17px;font-weight:600;color:var(--heading);}
.answer{font-size:19px;color:var(--ink);margin-block-start:8px;max-width:64ch;}
html[lang="ar"] .answer{font-size:20px;}
.sec{font-size:14.5px;color:var(--ink-2);} html[lang="ar"] .sec{font-size:15.5px;}
.meta{font-size:13px;color:var(--ink-3);} html[lang="ar"] .meta{font-size:14px;}
.legal{font-size:16px;color:var(--ink);} html[lang="ar"] .legal{font-size:17px;}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--sh-card);padding:22px 24px;}
.stack{display:flex;flex-direction:column;gap:16px;}

/* ---------------- buttons / chips ------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;
  font-weight:600;font-size:15px;padding:11px 19px;min-height:44px;
  transition:background .15s,box-shadow .15s;}
html[lang="ar"] .btn{font-size:16px;}
.btn-primary{background:var(--action);color:var(--btn-primary-text);}
.btn-primary:hover{background:var(--action-hover);text-decoration:none;}
.btn-gold{background:var(--gold-grad);color:#3d2f10;box-shadow:var(--sh-gold);}
.btn-gold:hover{text-decoration:none;filter:brightness(1.03);}
.btn-gold[aria-disabled="true"]{filter:grayscale(.55);opacity:.55;cursor:not-allowed;box-shadow:none;}
.btn-line{background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-2);}
.btn-line:hover{border-color:var(--action);color:var(--action);text-decoration:none;}
.btn-quiet{background:var(--surface-tint);color:var(--ink-2);}
.btn-quiet:hover{background:var(--accent-tint);color:var(--action);}
.btn-sm{padding:8px 14px;min-height:38px;font-size:14px;border-radius:9px;}
.chip{display:inline-flex;gap:6px;align-items:center;padding:4px 12px;border-radius:999px;
  font-size:13px;font-weight:600;border:1px solid transparent;}
html[lang="ar"] .chip{font-size:14px;}
.chip-ok{background:var(--ok-tint);color:var(--ok);}
.chip-warn{background:var(--warn-tint);color:var(--warn);border-color:var(--warn-border);}
.chip-err{background:var(--err-tint);color:var(--err);border-color:var(--err-border);}
.chip-info{background:var(--info-tint);color:var(--info);border-color:var(--info-border);}
.chip-gold{background:var(--gold-tint);color:var(--gold-text);border-color:var(--gold-border);}
.chip-teal{background:var(--accent-tint);color:var(--chip-teal-text);border-color:var(--accent-tint-strong);}
.chip-neutral{background:var(--surface-tint);color:var(--ink-2);border-color:var(--border);}

/* =====================================================================
   VISUAL JOURNEY — the orientation instrument
   ===================================================================== */
.jmap{display:flex;align-items:flex-start;padding:38px 6px 8px;overflow-x:auto;}
.jstep{flex:1;min-width:104px;display:flex;flex-direction:column;align-items:center;
  position:relative;text-align:center;padding-inline:3px;cursor:pointer;border-radius:12px;
  background:none;}
/* The connector is drawn on the inline-start side, so RTL reverses the whole
   chain by flipping the axis rather than by re-authoring the map. */
.jstep::before{content:"";position:absolute;inset-block-start:31px;inset-inline-end:50%;
  width:100%;height:0;border-block-start:2.5px solid var(--action);z-index:0;}
.jstep:first-child::before{display:none;}
.jstep.s-upcoming::before,.jstep.s-upcoming ~ .jstep::before{
  border-block-start-style:dashed;border-block-start-color:var(--border-strong);}
.jnode{width:62px;height:62px;border-radius:50%;background:var(--node-bg);
  border:2.5px solid var(--border-strong);color:var(--ink-3);display:flex;align-items:center;
  justify-content:center;position:relative;z-index:1;transition:transform .15s,box-shadow .15s;}
.jnode .ic{width:28px;height:28px;stroke-width:1.6;}
.jstep:hover .jnode{transform:translateY(-2px);box-shadow:var(--sh-raised);}
.jtext{display:flex;flex-direction:column;align-items:center;}
.jlabel{margin-block-start:9px;font-size:13.5px;font-weight:600;color:var(--heading);line-height:1.25;}
.jstate{font-size:12px;font-weight:600;margin-block-start:2px;color:var(--ink-3);}
html[lang="ar"] .jlabel{font-size:14.5px;} html[lang="ar"] .jstate{font-size:13px;}

.s-complete .jnode{background:var(--action);border-color:var(--action);color:#fff;}
html[data-theme="dark"] .s-complete .jnode{color:#04201e;}
.s-complete .jstate{color:var(--ok);}
.s-current .jnode{border:3px solid var(--accent);color:var(--heading);
  box-shadow:0 0 0 6px var(--accent-tint);animation:youpulse 2.6s ease-in-out infinite;}
@keyframes youpulse{0%,100%{box-shadow:0 0 0 5px var(--accent-tint);}
  50%{box-shadow:0 0 0 9px var(--accent-tint-strong);}}
.s-needs .jnode{background:var(--gold-tint);border-color:var(--gold);color:var(--gold-text);}
.s-needs .jstate{color:var(--gold-text);}
.s-waitus .jnode{background:var(--accent-tint);border-color:var(--accent-tint-strong);color:var(--action);}
.s-waitauth .jnode{background:var(--info-tint);border-color:var(--info-border);color:var(--info);}
.s-waitauth .jstate{color:var(--info);}
.s-blocked .jnode{background:var(--err-tint);border-color:var(--err);color:var(--err);}
.s-blocked .jstate{color:var(--err);}
.s-upcoming .jnode{border-style:dashed;color:var(--ink-3);opacity:.75;}
.jstep.selected .jnode{outline:2px solid var(--heading);outline-offset:3px;}

.youare{position:absolute;inset-block-start:-34px;inset-inline-start:50%;
  transform:translateX(-50%);background:var(--heading);color:var(--surface);font-size:10.5px;
  font-weight:700;letter-spacing:.09em;padding:4px 10px;border-radius:999px;white-space:nowrap;z-index:2;}
html[dir="rtl"] .youare{transform:translateX(50%);}
html[data-theme="dark"] .youare{background:var(--onbrand-accent);color:#052733;}
.jbadge{position:absolute;inset-block-start:-7px;inset-inline-end:calc(50% - 42px);z-index:3;
  min-width:21px;height:21px;padding:0 6px;border-radius:11px;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--surface);}
.jbadge.b-err{background:var(--err);color:#fff;}
.jbadge.b-gold{background:var(--gold);color:#3d2f10;}
.jbadge.b-info{background:var(--info);color:#fff;}
.jnote{margin-block-start:5px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;}
.jnote.b-err{background:var(--err-tint);color:var(--err);}
.jnote.b-gold{background:var(--gold-tint);color:var(--gold-text);}
.jnote.b-info{background:var(--info-tint);color:var(--info);}

.jmap.mini{padding:30px 0 2px;}
.jmap.mini .jstep{min-width:84px;max-width:132px;}
.jmap.mini .jnode{width:48px;height:48px;border-width:2px;}
.jmap.mini .jnode .ic{width:23px;height:23px;}
.jmap.mini .jstep::before{inset-block-start:24px;border-block-start-width:2px;}
.jmap.mini .jlabel{font-size:12.5px;margin-block-start:8px;}
.jmap.mini .jstate{display:none;}
.jmap.mini .youare{inset-block-start:-28px;font-size:9.5px;padding:3px 8px;}
.jmap.mini .jbadge{inset-inline-end:calc(50% - 34px);}

.stepdetail{margin-block-start:18px;border-block-start:1px solid var(--border);
  padding-block-start:20px;animation:fadein .25s ease-out;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.sd-head{display:flex;gap:12px;align-items:center;margin-block-end:6px;flex-wrap:wrap;}
.sd-ic{width:50px;height:50px;border-radius:14px;background:var(--accent-tint);color:var(--action);
  display:flex;align-items:center;justify-content:center;flex:none;}
.sd-ic .ic{width:25px;height:25px;}
.sd-state{margin-inline-start:auto;}

/* ---------------- matter cards (Home) -------------------------------- */
.matter{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--sh-card);padding:18px 22px 14px;margin-block-start:16px;
  border-block-start:3px solid var(--accent);}
.matter.gold{border-block-start-color:var(--gold);}
.matter .mhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.matter .mic{width:46px;height:46px;border-radius:13px;background:var(--accent-tint);
  color:var(--action);display:flex;align-items:center;justify-content:center;flex:none;}
.matter .mic .ic{width:23px;height:23px;}
.matter.gold .mic{background:var(--gold-tint);color:var(--gold-text);}
.matter .mtitle{font-size:16.5px;font-weight:700;color:var(--heading);}
.matter .mdue{font-size:13.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center;
  margin-block-start:2px;}
.matter .mdue.overdue{color:var(--err);font-weight:600;}
.matter .mact{margin-inline-start:auto;}
.steppeek{border-block-start:1px solid var(--border);margin-block-start:12px;
  padding:14px 4px 6px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  animation:fadein .2s ease-out;}
.steppeek .pk-ic{width:34px;height:34px;border-radius:10px;background:var(--surface-tint);
  color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex:none;}
.steppeek p{font-size:14.5px;color:var(--ink-2);flex:1;min-width:220px;}
.steppeek p b{color:var(--heading);}

/* ---- one stage line, in place of the ten-node second journey --------
   `TAXOPS-ONE-TRUTH-PER-CASE-01` P0-06. What stood here was a stepper that
   could show four "YOU ARE HERE" markers at once. Logical properties only, so
   Arabic mirrors without a second rule. */
.docstage{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;
  color:var(--ink-2);background:var(--surface-tint);border:1px solid var(--border);
  border-radius:12px;padding:10px 14px;margin-block-start:14px;}
.docstage>.ic{color:var(--ink-3);flex:none;}
.docstage-at{font-weight:600;color:var(--heading);}
.docstage-pos{font-size:12.5px;color:var(--ink-3);font-weight:500;margin-inline-start:4px;}
.docstage-who{color:var(--ink-2);}
.docstage-who::before{content:"·";margin-inline-end:8px;color:var(--ink-3);}
.docstage-back{margin-inline-start:auto;display:inline-flex;align-items:center;gap:3px;
  font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap;}

/* ---- the case switcher this page never had -------------------------- */
.docswitch{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;
  margin-block-start:10px;color:var(--ink-3);}
.docswitch-lab{font-weight:600;}
.docswitch a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  border-radius:999px;padding:4px 11px;color:var(--ink-2);background:var(--surface);}
.docswitch a:hover{border-color:var(--accent);color:var(--accent);}
.docswitch-n{min-width:18px;height:18px;border-radius:9px;background:var(--gold-tint);
  color:var(--gold-text);font-size:11.5px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;padding:0 5px;}
.docswitch-n.b-err{background:var(--err);color:#fff;}

.dgrid-choose{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.dchoose{text-decoration:none;}

/* ---------------- document tiles + upload ---------------------------- */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;
  margin-block-start:14px;}
.dtile{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;
  padding:15px 14px 13px;text-align:start;cursor:pointer;position:relative;display:flex;
  flex-direction:column;gap:9px;transition:border-color .15s,box-shadow .15s,transform .15s;}
.dtile:hover{border-color:var(--accent);box-shadow:var(--sh-card);transform:translateY(-1px);}
.dtile .d-ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:var(--surface-tint);color:var(--ink-2);}
.dtile .d-ic .ic{width:25px;height:25px;}
.dtile .d-name{font-size:14.5px;font-weight:600;color:var(--heading);line-height:1.3;}
.dtile .d-state{display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;}
.dtile .d-glyph{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex:none;}
.dtile.ds-ok .d-glyph{background:var(--ok-tint);color:var(--ok);} .dtile.ds-ok .d-state{color:var(--ok);}
.dtile.ds-needs{border-color:var(--gold-border);}
.dtile.ds-needs .d-glyph{background:var(--gold-tint);color:var(--gold-text);}
.dtile.ds-needs .d-state{color:var(--gold-text);}
.dtile.ds-over{border-color:var(--err-border);}
.dtile.ds-over .d-glyph{background:var(--err-tint);color:var(--err);}
.dtile.ds-over .d-state{color:var(--err);}
.dtile.ds-wait .d-glyph{background:var(--info-tint);color:var(--info);}
.dtile.ds-wait .d-state{color:var(--info);}
.dtile.selected{border-color:var(--heading);box-shadow:var(--sh-raised);}
.dtile .d-flag{position:absolute;inset-block-start:-8px;inset-inline-end:10px;}
.pulse-target{animation:target 1.6s ease-out 2;}
@keyframes target{0%,100%{box-shadow:none;}30%{box-shadow:0 0 0 6px var(--gold-tint);}}

.ddetail{margin-block-start:16px;border:1px solid var(--border);background:var(--surface-subtle);
  border-radius:14px;padding:20px 22px;animation:fadein .25s ease-out;}
.ddetail h3{font-size:17px;color:var(--heading);display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.ddetail .why{margin-block-start:8px;font-size:15px;color:var(--ink-2);max-width:66ch;}
.ddetail .fmt{margin-block-start:10px;display:flex;gap:8px;flex-wrap:wrap;}
.ddetail .reason{margin-block-start:10px;background:var(--err-tint);border:1px solid var(--err-border);
  color:var(--err);border-radius:10px;padding:9px 14px;font-size:14.5px;max-width:66ch;}

.upzone{margin-block-start:16px;border:2px dashed var(--border-strong);border-radius:14px;
  background:var(--surface);padding:26px 20px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;}
.upzone:hover{border-color:var(--accent);}
.upzone.dragover{border-color:var(--action);background:var(--accent-tint);}
.upzone .up-ic{width:46px;height:46px;margin-inline:auto;border-radius:50%;
  background:var(--accent-tint);color:var(--action);display:flex;align-items:center;
  justify-content:center;transition:transform .15s;}
.upzone.dragover .up-ic{transform:translateY(-3px) scale(1.06);}
.upzone .up-main{margin-block-start:10px;font-size:15.5px;font-weight:600;color:var(--heading);}
.upzone .up-main .browse{color:var(--action);text-decoration:underline;text-underline-offset:3px;}
.upzone .up-sub{margin-block-start:3px;font-size:13px;color:var(--ink-3);}
.upfile{margin-block-start:14px;display:flex;gap:13px;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:13px 16px;text-align:start;
  animation:fadein .2s ease-out;flex-wrap:wrap;}
.upfile .f-ic{width:38px;height:38px;border-radius:10px;background:var(--accent-tint);
  color:var(--action);display:flex;align-items:center;justify-content:center;flex:none;}
.upfile .f-body{flex:1;min-width:180px;}
.upfile .f-name{font-size:14.5px;font-weight:600;color:var(--heading);word-break:break-all;}
.upfile .f-meta{font-size:12.5px;color:var(--ink-3);margin-block-start:1px;}
.upbar{height:5px;border-radius:3px;background:var(--surface-tint);margin-block-start:8px;overflow:hidden;}
.upbar i{display:block;height:100%;width:0;background:var(--action);border-radius:3px;
  transition:width .18s linear;}
.upfile .f-done{display:flex;gap:6px;align-items:center;color:var(--ok);font-size:13px;
  font-weight:600;margin-block-start:6px;}
.upfile .f-acts{display:flex;gap:8px;flex:none;}

/* ---------------- services gateway ----------------------------------- */
.gateway-hero{background:var(--brand-field);color:#fff;border-radius:18px;padding:32px 34px 28px;
  position:relative;overflow:hidden;}
.gateway-hero h1{font-size:27px;color:#fff;}
.gateway-hero .gsub{color:var(--onbrand-2);font-size:15.5px;margin-block-start:6px;max-width:60ch;}
.needchips{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:18px;}
.needchip{background:rgba(255,255,255,.09);border:1px solid var(--onbrand-border);color:#e8f3f5;
  border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:500;transition:background .15s;}
.needchip:hover{background:rgba(255,255,255,.16);}
.famgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
  margin-block-start:22px;}
.famcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--sh-card);padding:22px 20px 19px;text-align:start;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;position:relative;display:block;
  color:inherit;}
.famcard:hover{border-color:var(--accent);box-shadow:var(--sh-raised);transform:translateY(-2px);
  text-decoration:none;}
.famcard .f-ic{width:66px;height:66px;border-radius:18px;background:var(--accent-tint);
  color:var(--action);display:flex;align-items:center;justify-content:center;}
.famcard .f-ic .ic{width:33px;height:33px;stroke-width:1.5;}
.famcard h3{font-size:16.5px;color:var(--heading);margin-block-start:13px;}
.famcard p{font-size:13.5px;color:var(--ink-3);margin-block-start:4px;line-height:1.45;}
.famcard .f-go{position:absolute;inset-block-start:20px;inset-inline-end:16px;
  color:var(--border-strong);transition:color .15s;}
.famcard:hover .f-go{color:var(--accent);}
.svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;
  margin-block-start:14px;}
.svctile{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;
  padding:18px 16px;text-align:start;cursor:pointer;display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s,box-shadow .15s,transform .15s;position:relative;color:inherit;}
.svctile:hover{border-color:var(--accent);box-shadow:var(--sh-card);transform:translateY(-1px);
  text-decoration:none;}
.svctile .s-ic{width:54px;height:54px;border-radius:15px;background:var(--surface-tint);
  color:var(--action);display:flex;align-items:center;justify-content:center;}
.svctile .s-ic .ic{width:27px;height:27px;}
.svctile .s-name{font-size:15px;font-weight:600;color:var(--heading);line-height:1.3;}
.svctile .s-hint{font-size:12.5px;color:var(--ink-3);}
.svctile.live{border-color:var(--accent-tint-strong);background:linear-gradient(180deg,var(--accent-tint) 0%,var(--surface) 60%);}
.svctile .s-live{position:absolute;inset-block-start:-8px;inset-inline-end:12px;}

/* ---------------- knowledge centre ----------------------------------- */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.kcat{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--sh-card);padding:20px;text-align:start;cursor:pointer;color:inherit;display:block;}
.kcat:hover{border-color:var(--accent);text-decoration:none;box-shadow:var(--sh-raised);}
.kcat .k-ic{width:52px;height:52px;border-radius:15px;background:var(--accent-tint);
  color:var(--action);display:flex;align-items:center;justify-content:center;}
.kcat .k-ic .ic{width:26px;height:26px;}
.kcat h3{font-size:16px;color:var(--heading);margin-block-start:12px;}
.kcat p{font-size:13.5px;color:var(--ink-3);margin-block-start:4px;}
.qa{border:1px solid var(--border);border-radius:12px;background:var(--surface);
  margin-block-start:10px;overflow:hidden;}
.qa-head{display:flex;gap:10px;align-items:center;width:100%;padding:14px 16px;
  font-size:15.5px;font-weight:600;color:var(--heading);text-align:start;}
.qa-head:hover{background:var(--surface-tint);}
.qa-head .qchev{margin-inline-start:auto;transition:transform .18s;}
.qa-head[aria-expanded="true"] .qchev{transform:rotate(180deg);}
.qa-body{display:none;padding:0 16px 16px;}
.qa-body.open{display:block;animation:fadein .2s ease-out;}
.qa-body p{font-size:15px;color:var(--ink-2);max-width:70ch;}
.provenance{margin-block-start:10px;font-size:12.5px;color:var(--ink-3);border-inline-start:3px solid var(--accent-tint-strong);
  padding-inline-start:10px;}
.draft-flag{display:inline-flex;gap:6px;align-items:center;margin-block-start:10px;
  background:var(--warn-tint);color:var(--warn);border:1px solid var(--warn-border);
  border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;}
.ksearch{display:flex;gap:10px;align-items:center;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:12px;padding:10px 16px;margin-block-start:16px;}
.ksearch input{flex:1;border:none;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none;}

/* ---------------- entry ---------------------------------------------- */
.entry{min-height:100vh;background:var(--brand-field);color:var(--onbrand);display:flex;
  flex-direction:column;position:relative;overflow:hidden;}
.e-top{display:flex;align-items:center;gap:14px;padding:18px 26px;position:relative;z-index:1;}
.e-top img{width:150px;}
.e-top .links{margin-inline-start:auto;display:flex;gap:8px;align-items:center;font-size:15px;}
.e-top .links a,.e-top .links button{color:var(--onbrand-2);padding:8px 12px;border-radius:10px;}
.e-top .links a:hover,.e-top .links button:hover{background:rgba(255,255,255,.10);color:#fff;
  text-decoration:none;}
.e-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px 20px;position:relative;z-index:1;}
.desc-eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--onbrand-accent);font-weight:600;}
.entry h1{font-size:40px;line-height:1.2;margin-block-start:10px;max-width:20ch;}
.entry .esub{color:var(--onbrand-2);font-size:16.5px;margin-block-start:14px;max-width:56ch;}
.e-card{background:var(--surface);color:var(--ink);border-radius:18px;padding:28px 30px;
  margin-block-start:26px;max-width:460px;width:100%;box-shadow:var(--sh-raised);text-align:center;}
.e-card h2{font-size:21px;color:var(--heading);}
.e-card p{font-size:14.5px;color:var(--ink-2);margin-block-start:8px;}
.e-card .uaepass-btn{margin-block-start:18px;display:inline-flex;}
.e-card .uaepass-btn img{height:48px;width:auto;}
.e-or{display:flex;gap:12px;align-items:center;color:var(--ink-3);font-size:13px;margin-block:18px;}
.e-or::before,.e-or::after{content:"";flex:1;height:1px;background:var(--border);}
.e-foot{padding:18px 26px;display:flex;gap:14px;align-items:center;justify-content:space-between;
  font-size:13.5px;color:var(--onbrand-2);border-block-start:1px solid var(--onbrand-border);
  flex-wrap:wrap;position:relative;z-index:1;}
.e-foot .links{display:flex;gap:14px;}
.e-foot a{color:var(--onbrand-2);text-decoration:underline;text-underline-offset:3px;}
.cred{display:flex;gap:10px;justify-content:center;margin-block-start:20px;flex-wrap:wrap;}
.cred span{display:flex;gap:7px;align-items:center;background:rgba(255,255,255,.08);
  border:1px solid var(--onbrand-border);border-radius:999px;padding:7px 15px;font-size:13.5px;
  color:#dcebee;}
.testauth{background:var(--warn-tint);color:var(--warn);border:1px solid var(--warn-border);
  border-radius:10px;padding:10px 14px;font-size:13.5px;margin-block-start:16px;text-align:start;}

/* ---------------- back to top ---------------------------------------- */
.backtotop{position:fixed;inset-block-end:26px;inset-inline-end:96px;z-index:88;width:46px;
  height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--border-strong);
  color:var(--action);display:none;align-items:center;justify-content:center;
  box-shadow:var(--sh-raised);}
.backtotop.show{display:flex;}
.backtotop:hover{border-color:var(--accent);transform:translateY(-2px);}

/* ---------------- toasts --------------------------------------------- */
.toastwrap{position:fixed;inset-block-end:24px;inset-inline-start:50%;transform:translateX(-50%);
  z-index:130;display:flex;flex-direction:column;gap:8px;align-items:center;}
html[dir="rtl"] .toastwrap{transform:translateX(50%);}
.toast{background:var(--heading);color:var(--surface);border-radius:12px;padding:11px 18px;
  font-size:14px;box-shadow:var(--sh-raised);display:flex;gap:12px;align-items:center;
  max-width:min(560px,calc(100vw - 40px));animation:fadein .2s ease-out;}
html[data-theme="dark"] .toast{background:var(--surface);color:var(--ink);
  border:1px solid var(--border-strong);}
.toast button{color:var(--ink-3);font-size:18px;line-height:1;}

/* ---------------- responsive ----------------------------------------- */
.mobile-top{display:none;} .tabbar{display:none;}
@media (max-width:900px){
  .shell,body[data-rail="collapsed"] .shell{grid-template-columns:minmax(0,1fr);}
  .rail{display:none;} .topbar{display:none;}
  .mobile-top{display:flex;position:sticky;inset-block-start:0;z-index:40;align-items:center;
    gap:10px;background:var(--brand-field);color:#fff;padding:11px 16px;}
  .mobile-top img{width:34px;}
  .mobile-top .morg{flex:1;min-width:0;}
  .mobile-top .morg .o{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;color:#fff;}
  .mobile-top .morg .r{font-size:11.5px;color:var(--onbrand-2);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;}
  .mobile-top .iconbtn{color:#cfe3e8;}
  .mobile-top .iconbtn:hover{background:rgba(255,255,255,.1);color:#fff;}
  .mobile-top .acct .aname{display:none;}
  .content{padding:20px 16px 130px;}
  .h1{font-size:22px;} .answer{font-size:17px;} .entry h1{font-size:30px;}
  .tabbar{position:fixed;inset-block-end:0;inset-inline:0;display:flex;z-index:80;
    background:var(--surface);border-block-start:1px solid var(--border);
    padding:6px 4px calc(7px + env(safe-area-inset-bottom));}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;
    color:var(--ink-3);padding:6px 0;min-height:52px;font-weight:500;}
  .tabbar a.active{color:var(--action);}
  .tabbar a:hover{text-decoration:none;}
  .tabbar .ic{width:22px;height:22px;}
  .backtotop{inset-block-end:96px;inset-inline-end:16px;}

  /* The journey becomes an honest vertical sequence, never a squeezed map. */
  .jmap.vertical{flex-direction:column;align-items:stretch;padding:6px 2px;overflow:visible;}
  .jmap.vertical .jstep{flex-direction:row;align-items:center;text-align:start;gap:16px;
    min-width:0;padding:14px 6px;}
  .jmap.vertical .jnode{width:56px;height:56px;}
  .jmap.vertical .jnode .ic{width:26px;height:26px;}
  .jmap.vertical .jstep::before{inset-block-start:auto;inset-block-end:calc(100% - 14px);
    inset-inline-end:auto;inset-inline-start:34px;width:0;height:28px;border-block-start:none;
    border-inline-start:2.5px solid var(--action);}
  .jmap.vertical .jstep.s-upcoming::before,
  .jmap.vertical .jstep.s-upcoming ~ .jstep::before{border-inline-start-style:dashed;
    border-inline-start-color:var(--border-strong);}
  .jmap.vertical .jtext{align-items:flex-start;}
  .jmap.vertical .jlabel{margin-block-start:0;font-size:15px;}
  .jmap.vertical .youare{inset-block-start:auto;inset-inline-start:auto;inset-inline-end:0;
    transform:none;position:absolute;}
  .jmap.vertical .jbadge{position:static;margin-inline-start:auto;border:none;}
  .jmap.vertical .jnote{margin-inline-start:8px;}
  .jmap.mini{overflow-x:auto;padding-block-end:6px;}
  .jmap.mini .jstep{min-width:72px;}
  .jmap.mini .jnode{width:44px;height:44px;}
  .jmap.mini .jnode .ic{width:21px;height:21px;}
  .jmap.mini .jstep::before{inset-block-start:22px;}
  .matter .mact{margin-inline-start:0;width:100%;}
  .matter .mact .btn{width:100%;}
}
@media (min-width:1600px){ .content{max-width:1280px;} }
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* =====================================================================
   LEDGER 4.1 — UNIFIED REFINEMENT (CLIENT-PORTAL-UX-REFINEMENT-01)

   Everything below is new architecture, not overrides. The audit's visual
   findings were (a) two surfaces that never received the design system,
   (b) one page that was never finished, (c) an RTL overlap in the Guide, and
   (d) raw tokens leaking through the label layer. So this section adds the
   missing primitives — fields, callouts, choices, groups, a public shell —
   using the same tokens as everything above, instead of adding per-page CSS.

   Two rules held throughout:
     * logical properties only, so Arabic mirrors structurally;
     * every colour comes from a semantic role, so Light and Dark stay two
       authored palettes rather than an inversion.
   ===================================================================== */

/* ---------------- shell additions ------------------------------------ */
.skiplink{position:absolute;inset-block-start:-60px;inset-inline-start:12px;z-index:200;
  background:var(--surface);color:var(--action);border:1px solid var(--action);
  border-radius:10px;padding:10px 16px;font-weight:600;transition:inset-block-start .15s;}
.skiplink:focus{inset-block-start:12px;text-decoration:none;}
.shell-main{min-width:0;display:flex;flex-direction:column;}
.rail-mark{display:none;width:38px;}
body[data-rail="collapsed"] .rail-logo img:not(.rail-mark){display:none;}
body[data-rail="collapsed"] .rail-mark{display:block;}
.rail .nav-badge.b-err{background:var(--err);}
.tabbar a{position:relative;}
.tab-dot{position:absolute;inset-block-start:5px;inset-inline-end:calc(50% - 16px);
  width:7px;height:7px;border-radius:50%;background:var(--gold);}
.tab-dot.b-err{background:var(--err);}

/* The organisation context: a label when there is one org, a switcher when
   there are several. Never a pill that looks like a control and is not one. */
.org-label{display:inline-flex;gap:10px;align-items:center;color:var(--ink-2);
  font-size:14.5px;max-width:420px;min-width:0;}
.org-label .o-lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;}
.org-label .o{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.org-switch{cursor:pointer;}
.org-switch:hover{border-color:var(--accent);background:var(--accent-tint);}
.menu .m-tick{margin-inline-start:auto;color:var(--action);}
.menu .m-person{display:flex;gap:11px;align-items:center;padding:10px 12px;}
.menu .m-person > span:last-child{display:flex;flex-direction:column;min-width:0;}
.menu .m-name{font-size:15px;font-weight:600;color:var(--heading);}
.menu .m-sub{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.avatar-lg{width:40px;height:40px;font-size:15px;flex:none;}
.menu .m-head-row{display:flex;align-items:center;gap:10px;}
.menu .m-action{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--action);
  text-transform:none;letter-spacing:0;padding:2px 6px;border-radius:7px;width:auto;}
.menu .m-action:hover{background:var(--accent-tint);}
.menu .m-prefs{padding:4px 12px 10px;}
.menu .m-prefs-label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;}
.menu .m-prefs-row{display:flex;gap:8px;margin-block-start:8px;flex-wrap:wrap;}
.menu .m-prefs-row .btn{width:auto;}
.pref-form{display:inline-flex;}
.iconbtn-lang{gap:2px;}
.langtag{position:absolute;inset-block-end:3px;inset-inline-end:3px;font-size:9.5px;
  font-weight:700;letter-spacing:.02em;background:var(--surface);color:var(--ink-3);
  border-radius:4px;padding:0 2px;line-height:1.3;}
.mobile-top .langtag{background:transparent;color:#cfe3e8;}

/* Notifications: the panel scrolls inside itself, items are distinct, and a
   repeated event says how many times rather than repeating (audit F-16). */
.menu-notif{min-width:340px;max-width:min(400px,calc(100vw - 28px));}
.notif-list{max-height:min(58vh,420px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;}
.notif .nbody{display:flex;flex-direction:column;min-width:0;gap:2px;}
.notif .ntext{line-height:1.45;}
.notif .nmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;
  color:var(--ink-3);}
.notif .nmeta time:empty{display:none;}
.notif .nrepeat{background:var(--surface-tint);border:1px solid var(--border);
  border-radius:999px;padding:0 7px;font-size:11.5px;font-weight:600;}
.notif-empty{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 16px;color:var(--ink-3);font-size:14px;text-align:center;}
.notif-empty .ic{width:26px;height:26px;opacity:.55;}

/* ---------------- shared page furniture ------------------------------ */
.page-head{margin-block-end:18px;}
.page-head .answer{margin-block-start:10px;}
.page-head .meta{margin-block-start:6px;}
.content-centred{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;
  justify-content:center;flex:1;}

.callout{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 15px;
  font-size:14.5px;line-height:1.55;margin-block-start:12px;max-width:70ch;}
html[lang="ar"] .callout{font-size:15.5px;}
.callout .ic{flex:none;margin-block-start:2px;}
.callout-info{background:var(--info-tint);border:1px solid var(--info-border);color:var(--info);}
.callout-gold{background:var(--gold-tint);border:1px solid var(--gold-border);color:var(--gold-text);}
.callout-warn{background:var(--warn-tint);border:1px solid var(--warn-border);color:var(--warn);}
.callout-err{background:var(--err-tint);border:1px solid var(--err-border);color:var(--err);}

.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:38px 24px;margin-block-start:16px;}
.empty-state .es-ic{width:62px;height:62px;border-radius:18px;background:var(--surface-tint);
  color:var(--ink-3);display:flex;align-items:center;justify-content:center;}
.empty-state .es-ic .ic{width:30px;height:30px;}
.btn-lg{padding:14px 24px;min-height:52px;font-size:16px;border-radius:12px;}
html[lang="ar"] .btn-lg{font-size:17px;}

/* ---------------- form primitives ------------------------------------
   The audit found native, unstyled date / text / select controls that stayed
   stark white on a dark card. These are themed once, here, so no page has to
   inline a border colour again. */
.field{display:block;width:100%;padding:13px 15px;font:inherit;font-size:16px;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--border-strong);
  border-radius:11px;min-height:50px;
  transition:border-color .15s,box-shadow .15s,background .15s;
  color-scheme:light dark;}
html[data-theme="dark"] .field{color-scheme:dark;background:var(--surface-subtle);}
.field:hover{border-color:var(--ink-3);}
.field:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 4px var(--accent-tint);}
.field::placeholder{color:var(--ink-3);}
.field[aria-invalid="true"]{border-color:var(--err);background:var(--err-tint);}
/* `color-scheme` above already makes the browser draw its own picker glyph
   for the active theme. Dark stays an authored palette, never an inversion. */
.field-date::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;}
.field-date::-webkit-calendar-picker-indicator:hover{opacity:1;}
.field-money{display:flex;align-items:stretch;}
.field-money .fm-cur{display:flex;align-items:center;padding-inline:15px;font-size:14px;
  font-weight:600;color:var(--ink-2);background:var(--surface-tint);
  border:1.5px solid var(--border-strong);border-inline-end:none;
  border-start-start-radius:11px;border-end-start-radius:11px;white-space:nowrap;}
.field-money .field{border-start-start-radius:0;border-end-start-radius:0;}
.field-money:focus-within .fm-cur{border-color:var(--action);}
.field-num{font-variant-numeric:tabular-nums;letter-spacing:.02em;}

.q{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;}
.q + .q{margin-block-start:26px;padding-block-start:24px;border-block-start:1px solid var(--border);}
.q-num{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  font-weight:700;}
.q-label{font-size:18px;font-weight:600;color:var(--heading);line-height:1.4;padding:0;}
html[lang="ar"] .q-label{font-size:19px;}
.q-help{font-size:14px;color:var(--ink-3);max-width:56ch;}
html[lang="ar"] .q-help{font-size:15px;}
.q-err{display:flex;gap:7px;align-items:center;color:var(--err);font-size:14px;font-weight:600;
  margin-block-start:2px;}
.q.has-err .q-label{color:var(--err);}

.choices{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:4px;}
.choice{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:1.5px solid var(--border-strong);border-radius:12px;padding:12px 18px;
  background:var(--surface);font-size:16px;font-weight:500;color:var(--ink);min-height:50px;
  transition:border-color .15s,background .15s;}
.choice:hover{border-color:var(--accent);}
.choice input{position:absolute;opacity:0;width:1px;height:1px;}
.choice .ch-box{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:transparent;flex:none;
  transition:background .15s,border-color .15s,color .15s;}
.choice input:checked ~ .ch-box{background:var(--action);border-color:var(--action);
  color:var(--btn-primary-text);}
.choice:has(input:checked){border-color:var(--action);background:var(--accent-tint);}
.choice input:focus-visible ~ .ch-box{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------------- HOME — the Client Command Home --------------------- */
.home-head{margin-block-end:18px;}
.home-hello{font-size:24px;color:var(--heading);line-height:1.3;}
html[lang="ar"] .home-hello{font-size:25px;}
.home-hello .home-name{font-weight:700;}
.home-org{font-size:14px;color:var(--ink-3);margin-block-start:2px;}

.doblock{background:var(--surface);border:1px solid var(--border);
  border-inline-start:4px solid var(--gold);border-radius:16px;box-shadow:var(--sh-raised);
  padding:24px 26px;margin-block-end:20px;}
.doblock-over{border-inline-start-color:var(--err);}
.doblock-clear{border-inline-start-color:var(--ok);}
.do-head{display:flex;gap:16px;align-items:flex-start;}
.do-ic{width:54px;height:54px;border-radius:16px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--gold-tint);color:var(--gold-text);}
.doblock-over .do-ic{background:var(--err-tint);color:var(--err);}
.do-ic.ok{background:var(--ok-tint);color:var(--ok);}
.do-ic .ic{width:27px;height:27px;}
.do-title{min-width:0;}
.do-sub{font-size:17px;color:var(--ink-2);margin-block-start:4px;}
html[lang="ar"] .do-sub{font-size:18px;}

.dolist{list-style:none;display:flex;flex-direction:column;gap:10px;margin-block-start:20px;}
.doitem{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface-subtle);
  border:1px solid var(--border);border-radius:13px;padding:15px 18px;
  transition:border-color .15s,box-shadow .15s;}
.doitem:hover{border-color:var(--accent);box-shadow:var(--sh-card);}
.doitem.is-over{border-color:var(--err-border);background:var(--err-tint);}
.do-i-ic{width:42px;height:42px;border-radius:12px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--surface);border:1px solid var(--border);
  color:var(--ink-2);}
.doitem.is-over .do-i-ic{color:var(--err);border-color:var(--err-border);}
.do-i-body{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px;}
.do-i-name{font-size:16px;font-weight:600;color:var(--heading);}
html[lang="ar"] .do-i-name{font-size:17px;}
.do-i-why{font-size:13.5px;color:var(--ink-3);line-height:1.5;max-width:62ch;}
html[lang="ar"] .do-i-why{font-size:14.5px;}
.do-i-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-block-start:5px;}
.do-i-due{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;color:var(--ink-3);
  font-weight:600;}
.do-i-due.over{color:var(--err);}
.do-i-go{flex:none;}

.casecard{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--sh-card);padding:20px 24px 14px;margin-block-end:20px;
  border-block-start:3px solid var(--accent);}
.casecard.gold{border-block-start-color:var(--gold);}
.case-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.case-ic{width:50px;height:50px;border-radius:14px;background:var(--accent-tint);
  color:var(--action);display:flex;align-items:center;justify-content:center;flex:none;}
.casecard.gold .case-ic{background:var(--gold-tint);color:var(--gold-text);}
.case-id{display:flex;flex-direction:column;gap:1px;min-width:200px;}
.case-eyebrow{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;}
.case-ref{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.case-now{display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding-inline-start:18px;border-inline-start:1px solid var(--border);min-width:180px;}
.case-step{display:inline-flex;gap:7px;align-items:center;font-size:15.5px;font-weight:600;
  color:var(--heading);}
.case-go{margin-inline-start:auto;flex:none;}
.case-next{display:flex;gap:10px;align-items:flex-start;border-block-start:1px solid var(--border);
  margin-block-start:12px;padding-block-start:13px;font-size:14.5px;color:var(--ink-2);}
html[lang="ar"] .case-next{font-size:15.5px;}
.case-next .cn-ic{color:var(--accent);margin-block-start:3px;flex:none;}
.case-next b{color:var(--heading);}

.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.home-panel{padding:18px 20px;}
.home-panel .h3{display:flex;gap:8px;align-items:center;margin-block-end:12px;}
.datelist,.updlist{list-style:none;display:flex;flex-direction:column;gap:10px;}
.datelist li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;}
.datelist .dl-when{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2);
  background:var(--surface-tint);border-radius:8px;padding:3px 9px;font-size:12.5px;flex:none;}
.datelist li.over .dl-when{background:var(--err-tint);color:var(--err);}
.datelist .dl-what{flex:1;min-width:140px;color:var(--ink);}
.updlist li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.5;}
.updlist .ndot{margin-block-start:7px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);flex:none;}
.updlist .ndot.t-success{background:var(--ok);}
.updlist .ndot.t-gold{background:var(--gold);}
.updlist .ndot.t-error{background:var(--err);}
.updlist a{color:var(--ink);flex:1;min-width:0;}
.updlist time{font-size:12px;color:var(--ink-3);flex:none;white-space:nowrap;}
.home-help .help-acts{display:flex;gap:9px;flex-wrap:wrap;margin-block-start:14px;}

/* ---------------- JOURNEY — full step content ------------------------ */
.jpanel{margin-block-start:6px;}
.jstrip{margin-block-start:14px;padding:10px 18px 6px;}
.jwho{font-size:11.5px;color:var(--ink-3);margin-block-start:1px;}
html[lang="ar"] .jwho{font-size:12.5px;}
.jmap.vertical .jstep{border-radius:12px;}
.jmap.vertical .jstep:hover{background:var(--surface-tint);text-decoration:none;}
.jmap.vertical .jstep.selected{background:var(--accent-tint);}
.sd-title{display:flex;flex-direction:column;gap:1px;min-width:0;}
.sd-who{font-size:13px;color:var(--ink-3);font-weight:600;}
.sd-state{margin-inline-start:auto;flex:none;}
.sd-ic.sd-s-needs{background:var(--gold-tint);color:var(--gold-text);}
.sd-ic.sd-s-complete{background:var(--ok-tint);color:var(--ok);}
.sd-ic.sd-s-blocked{background:var(--err-tint);color:var(--err);}
.sd-ic.sd-s-upcoming{background:var(--surface-tint);color:var(--ink-3);}
.sd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  margin-block-start:18px;}
.sd-block{display:flex;flex-direction:column;gap:5px;}
.sd-lab{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;}
.sd-block p{font-size:15px;color:var(--ink-2);line-height:1.6;}
html[lang="ar"] .sd-block p{font-size:16px;}
.sd-actor{display:inline-flex;gap:7px;align-items:center;font-weight:600;color:var(--ink);}
.sd-note{display:flex;gap:9px;align-items:flex-start;margin-block-start:18px;
  background:var(--surface-tint);border-radius:11px;padding:12px 15px;font-size:14px;
  color:var(--ink-2);line-height:1.55;}
html[lang="ar"] .sd-note{font-size:15px;}
.sd-note .ic{flex:none;margin-block-start:2px;color:var(--accent);}
.sd-extra{margin-block-start:22px;border-block-start:1px solid var(--border);
  padding-block-start:18px;}

/* ---------------- DOCUMENTS ------------------------------------------ */
.dgroup{margin-block-start:26px;}
.dgroup-h{display:flex;gap:9px;align-items:center;}
.dgroup-n{background:var(--surface-tint);border:1px solid var(--border);border-radius:999px;
  min-width:22px;height:22px;padding:0 7px;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;color:var(--ink-2);}
.dgroup-needs .dgroup-n{background:var(--gold-tint);border-color:var(--gold-border);
  color:var(--gold-text);}
.dtile .d-fmt{display:flex;gap:5px;flex-wrap:wrap;}
.fmt-tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-3);
  background:var(--surface-tint);border:1px solid var(--border);border-radius:5px;padding:1px 5px;}
.ddetail .dd-help{margin-block-start:6px;font-size:14px;color:var(--ink-3);max-width:66ch;}
.ddetail .fmt{align-items:center;}
.ddetail .fmt-lab{font-size:12.5px;font-weight:600;color:var(--ink-3);}
.ddetail .reason{display:flex;gap:8px;align-items:flex-start;}
.ddetail .reason .ic{flex:none;margin-block-start:2px;}

/* Upload: four visible states, a retry, and a route to a person.
   The audit's flow had a bar and one English toast reading "upload failed". */
.upstate{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:600;
  color:var(--ink-2);margin-block-start:7px;}
.upstate .spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--accent-tint-strong);
  border-block-start-color:var(--action);animation:upspin .7s linear infinite;flex:none;}
@keyframes upspin{to{transform:rotate(360deg);}}
.upfile.is-done .upstate{color:var(--ok);}
.upfile.is-err{border-color:var(--err-border);background:var(--err-tint);}
.upfile.is-err .upstate{color:var(--err);}
.uperror{margin-block-start:8px;font-size:14px;color:var(--err);line-height:1.5;}
.uperror b{display:block;font-size:14.5px;}
.upacts{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:10px;}

/* ---------------- SBR pre-check -------------------------------------- */
.sbr-head{max-width:70ch;}
.sbr-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;
  align-items:start;margin-block-start:18px;}
.sbr-form{padding:26px 28px;}
.sbr-form .btn-lg{margin-block-start:28px;width:100%;}
.sbr-result{padding:24px 26px;position:sticky;inset-block-start:calc(var(--topbar-h) + 16px);}
.sbr-result.r-ok{border-block-start:3px solid var(--ok);}
.sbr-result.r-warn{border-block-start:3px solid var(--gold);}
.sbr-result.r-info{border-block-start:3px solid var(--info);}
.sbr-result.r-err{border-block-start:3px solid var(--err);}
.res-head{display:flex;gap:14px;align-items:flex-start;}
.res-ic{width:46px;height:46px;border-radius:13px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--surface-tint);color:var(--ink-2);}
.r-ok .res-ic{background:var(--ok-tint);color:var(--ok);}
.r-warn .res-ic{background:var(--gold-tint);color:var(--gold-text);}
.r-info .res-ic{background:var(--info-tint);color:var(--info);}
.res-head .h2{font-size:19px;line-height:1.35;}
html[lang="ar"] .res-head .h2{font-size:20px;}
.res-body{font-size:15.5px;color:var(--ink-2);line-height:1.65;margin-block-start:12px;}
html[lang="ar"] .res-body{font-size:16.5px;}
.res-why{margin-block-start:18px;}
/* One marker, not two: the audit found a literal bullet inside a list item
   that already had a marker (F-33). */
.res-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-block-start:8px;}
.res-list li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);
  line-height:1.55;}
html[lang="ar"] .res-list li{font-size:15.5px;}
.res-list li .ic{flex:none;margin-block-start:3px;color:var(--accent);}
.res-continues{margin-block-start:16px;font-size:15px;color:var(--ink);line-height:1.6;}
html[lang="ar"] .res-continues{font-size:16px;}
.res-acts{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:20px;}

/* ---------------- KNOWLEDGE / SERVICES ------------------------------- */
.kcat-block{margin-block-start:24px;}
.qa-q{flex:1;text-align:start;min-width:0;}
.qa-links{margin-block-start:12px;display:flex;gap:14px;flex-wrap:wrap;}
.qa-links a{display:inline-flex;gap:5px;align-items:center;font-size:14px;font-weight:600;}
.ksearch button{flex:none;}
.no-results-live{margin-block-start:18px;color:var(--ink-3);font-size:15px;}

.famcard.is-open{border-color:var(--accent);box-shadow:var(--sh-raised);}
.famopen{margin-block-start:24px;scroll-margin-block-start:calc(var(--topbar-h) + 18px);}
.famopen:focus{outline:none;}
.svctile{min-height:190px;}
.svctile.direct{border-color:var(--accent-tint-strong);}
.svctile .s-cta{margin-block-start:auto;align-self:flex-start;}
.svctile .s-avail{align-self:flex-start;}
.svctile .s-signin{font-size:12.5px;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:3px;}
.svctile .btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------------- PUBLIC SHELL (gate, pre-check, knowledge, problems) - */
.pubshell{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}
.pub-top{display:flex;align-items:center;gap:10px;padding:13px 26px;background:var(--surface);
  border-block-end:1px solid var(--border);position:sticky;inset-block-start:0;z-index:30;
  flex-wrap:wrap;}
.pub-brand{display:flex;gap:11px;align-items:center;color:inherit;}
.pub-brand:hover{text-decoration:none;}
.pub-brand img{width:38px;}
.pub-wordmark{display:flex;flex-direction:column;line-height:1.15;}
.pub-name{font-size:15px;font-weight:700;color:var(--heading);letter-spacing:.02em;}
.pub-role{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  font-weight:600;}
.pub-links{display:flex;gap:4px;}
.pub-links a{font-size:14.5px;color:var(--ink-2);padding:8px 12px;border-radius:10px;}
.pub-links a:hover{background:var(--accent-tint);color:var(--action);text-decoration:none;}
.pub-top .grow{flex:1;}
.pubshell .content{flex:1;width:100%;max-width:1180px;margin-inline:auto;}
.pub-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:18px 26px;
  border-block-start:1px solid var(--border);font-size:13.5px;color:var(--ink-3);
  background:var(--surface);}
.pub-cred{display:inline-flex;gap:7px;align-items:center;}
.pub-foot .grow{flex:1;}

.gate-shell .content{display:flex;align-items:center;}
.gate-card{max-width:480px;margin-inline:auto;text-align:center;padding:34px 32px;}
.gate-ic{width:60px;height:60px;border-radius:18px;margin-inline:auto;display:flex;
  align-items:center;justify-content:center;background:var(--accent-tint);color:var(--action);
  margin-block-end:16px;}
.gate-ic .ic{width:30px;height:30px;}
.gate-card .sec{margin-block-start:10px;max-width:44ch;margin-inline:auto;}
.gate-form{display:flex;flex-direction:column;gap:10px;margin-block-start:22px;text-align:start;}
.gate-form .btn{width:100%;margin-block-start:6px;}
.gate-card .q-err{justify-content:center;margin-block-start:14px;}

.problem{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:44px 20px;}
.pb-ic{width:76px;height:76px;border-radius:22px;display:flex;align-items:center;
  justify-content:center;background:var(--info-tint);color:var(--info);}
.pb-ic .ic{width:38px;height:38px;}
.pb-err{background:var(--err-tint);color:var(--err);}
.pb-warn{background:var(--gold-tint);color:var(--gold-text);}
.problem .answer{max-width:52ch;}
.pb-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-block-start:12px;}

/* ---------------- ENTRY — the theme must be visible above the fold ---
   Audit F-35: choosing Light still produced a dark hero; only the sign-in
   card changed, so the control looked half-broken while working correctly.
   Light is now an authored light hero rather than the dark one reused. */
:root, html[data-theme="light"]{
  --entry-field:radial-gradient(1200px 520px at 78% -10%, #e4f1f3 0%, transparent 62%),
                linear-gradient(168deg,#fbfdfd 0%,#eef6f7 58%,#e6f1f3 100%);
  --entry-ink:#10242c; --entry-ink-2:#42606b; --entry-eyebrow:#0f766e;
  --entry-border:rgba(8,56,74,.10); --entry-cred-bg:rgba(8,56,74,.05);
}
html[data-theme="dark"]{
  --entry-field:var(--petrol-grad-dark);
  --entry-ink:#ffffff; --entry-ink-2:#9fbac2; --entry-eyebrow:#7adfea;
  --entry-border:rgba(255,255,255,.14); --entry-cred-bg:rgba(255,255,255,.08);
}
.entry{background:var(--entry-field);color:var(--entry-ink);}
.entry h1{color:var(--entry-ink);}
.entry .esub{color:var(--entry-ink-2);}
.entry .desc-eyebrow{color:var(--entry-eyebrow);}
.e-top .links a,.e-top .links button,.e-top .links .iconbtn{color:var(--entry-ink-2);}
.e-top .links a:hover,.e-top .links button:hover{background:var(--entry-cred-bg);
  color:var(--entry-ink);}
.e-foot{color:var(--entry-ink-2);border-block-start-color:var(--entry-border);}
.e-foot a{color:var(--entry-ink-2);}
.cred span{background:var(--entry-cred-bg);border-color:var(--entry-border);
  color:var(--entry-ink-2);}
.e-logo-light{display:none;} .e-logo-dark{display:block;}
html[data-theme="light"] .e-logo-light{display:block;}
html[data-theme="light"] .e-logo-dark{display:none;}
.e-top img{width:150px;}
.e-form{margin-block-start:18px;}
.e-card .testauth{margin-block-start:14px;display:flex;gap:8px;align-items:flex-start;}
.e-card .testauth .ic{flex:none;margin-block-start:2px;}
.e-alt{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;}
.e-returning{text-align:start;margin-block-end:16px;margin-block-start:0;}
.e-top .langtag{background:transparent;}

/* The Guide's labelled way back (audit F-28/F-29). */
.guide-restore{position:fixed;inset-inline-end:22px;inset-block-end:22px;z-index:96;
  display:inline-flex;gap:8px;align-items:center;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:999px;padding:10px 18px;
  font-size:14px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-raised);}
.guide-restore:hover{border-color:var(--action);color:var(--action);}
.guide-restore[hidden]{display:none;}
html[dir="rtl"] .guide-restore{inset-inline-end:auto;inset-inline-start:22px;}

/* ---------------- responsive ----------------------------------------- */
@media (max-width:1100px){
  .sbr-layout{grid-template-columns:minmax(0,1fr);}
  .sbr-result{position:static;}
}
@media (max-width:900px){
  .pub-top{padding:11px 16px;}
  .pub-links{order:5;width:100%;}
  .pub-signin{order:4;}
  .pub-foot{padding:16px;}
  .doblock{padding:18px;border-radius:14px;}
  .do-head{gap:12px;}
  .do-ic{width:44px;height:44px;border-radius:13px;}
  .do-ic .ic{width:22px;height:22px;}
  .doitem{padding:14px;}
  .do-i-go{width:100%;justify-content:center;}
  .case-head{gap:12px;}
  .case-go{width:100%;margin-inline-start:0;}
  .case-now{padding-inline-start:0;border-inline-start:none;
    border-block-start:1px solid var(--border);padding-block-start:10px;width:100%;}
  .sbr-form{padding:20px 18px;}
  .sbr-result{padding:20px 18px;}
  .home-hello{font-size:21px;}
  .problem{padding:30px 8px;}
  .pb-ic{width:62px;height:62px;}
  /* The mini strip scrolls with snap points rather than shrinking until the
     labels are unreadable. */
  .jmap.mini{scroll-snap-type:inline mandatory;padding-inline:2px;}
  .jmap.mini .jstep{scroll-snap-align:center;min-width:88px;}
  .jmap.mini .jlabel{font-size:12px;}
  .jmap.mini .jstate{display:block;font-size:10.5px;}
  .jstrip{padding:8px 10px 4px;}
  .menu-notif{min-width:min(340px,calc(100vw - 24px));}
  .notif-list{max-height:56vh;}
  .field{font-size:16px;}
}
@media (max-width:560px){
  .home-grid{grid-template-columns:minmax(0,1fr);}
  .sd-grid{grid-template-columns:minmax(0,1fr);}
  .choices{flex-direction:column;align-items:stretch;}
  .choice{width:100%;}
  .res-acts .btn,.pb-acts .btn,.help-acts .btn{width:100%;justify-content:center;}
  .dgrid{grid-template-columns:minmax(0,1fr);}
  .entry h1{font-size:26px;}
  .e-card{padding:22px 18px;}
  .guide-restore{inset-block-end:76px;}
}
/* Touch targets stay at least 44px on coarse pointers. */
@media (pointer:coarse){
  .iconbtn,.gdock button,.gask button{min-width:44px;min-height:44px;}
  .qa-head{min-height:52px;}
  .notif{min-height:52px;}
}

/* =====================================================================
   LEDGER 4.2 — corrections found by looking at the captured screens.
   Every rule below fixes something visible in a real render, not something
   suspected from reading the markup.
   ===================================================================== */

/* The mobile top bar was carrying five controls plus the wordmark at 390px,
   which crushed the organisation name to "G..." and the role line to "Clie...".
   Language and theme both live in the account menu, so on mobile the bar keeps
   only what has no other home: notifications and the account. */
@media (max-width:900px){
  .mobile-top .pref-form,
  .mobile-top [data-guide-summon]{display:none;}
  .mobile-top{gap:12px;padding-inline:14px;}
  .mobile-top img{width:30px;flex:none;}
  .mobile-top .morg{min-width:0;flex:1;}
  .mobile-top .morg .o{font-size:14.5px;}
  .mobile-top .morg .r{font-size:11px;}
  .mobile-top .acct{padding:4px 6px;}
  .mobile-top .acct .avatar{width:30px;height:30px;}
}

/* In the vertical journey the "you are here" pill was absolutely positioned
   over the state text, so on a narrow screen it sat on top of "needs a
   professional review". In a vertical list it is just another line. */
@media (max-width:900px){
  .jmap.vertical .youare{position:static;transform:none;align-self:flex-start;
    margin-block-start:5px;display:inline-flex;}
  .jmap.vertical .jtext{gap:1px;}
  .jmap.vertical .jbadge{position:static;margin-inline-start:auto;border:none;
    align-self:center;}
  .jmap.vertical .jstep{gap:12px;padding-inline:10px;}
}

/* A floating assistant must not be the last thing between a client and a
   button. On narrow screens the page keeps a gutter for it even when the
   Guide is collapsed. */
@media (max-width:900px){
  .content{padding-block-end:150px;}
}

/* Latin identifiers inside Arabic copy stay isolated so the surrounding RTL
   run cannot reorder them. */
.case-ref,.provenance div,.fmt-tag,.d-fmt{unicode-bidi:isolate;}
.dl-when,.do-i-due{unicode-bidi:isolate;}

/* =====================================================================
   LEDGER 4.3 — Arabic typography correction

   Arabic is a joined script. `letter-spacing` inserts gaps between letters
   that are supposed to connect, which breaks the joining and can make a word
   unreadable: "أنتم هنا" was rendering as though a letter were missing on the
   journey's YOU-ARE-HERE pill at small sizes.

   `text-transform: uppercase` is equally meaningless in Arabic — there is no
   case — and only signals to the browser that it may apply casing rules that
   do not exist.

   Both are legitimate for the Latin eyebrow labels this design uses, so they
   stay for English and are switched off for Arabic rather than removed.
   ===================================================================== */
html[lang="ar"] .desc-eyebrow,
html[lang="ar"] .case-eyebrow,
html[lang="ar"] .sd-lab,
html[lang="ar"] .youare,
html[lang="ar"] .gname-tag,
html[lang="ar"] .pub-role,
html[lang="ar"] .rail .desc,
html[lang="ar"] .rail .rail-section,
html[lang="ar"] .menu .m-head,
html[lang="ar"] .menu .m-prefs-label,
html[lang="ar"] .gsheet .t-head,
html[lang="ar"] .fmt-tag,
html[lang="ar"] .q-num,
html[lang="ar"] .o-lab{letter-spacing:normal;text-transform:none;}

/* Small Arabic labels need a little more size than their Latin counterparts
   to stay legible once the artificial tracking is gone. */
html[lang="ar"] .youare{font-size:11.5px;}
html[lang="ar"] .desc-eyebrow,
html[lang="ar"] .case-eyebrow,
html[lang="ar"] .sd-lab,
html[lang="ar"] .q-num,
html[lang="ar"] .o-lab{font-size:12px;}
html[lang="ar"] .rail .desc{font-size:12.5px;}

/* Ten steps have to fit the content column at 1366 before they start
   scrolling, otherwise the first step is clipped mid-word and the strip reads
   as broken rather than as scrollable. Below that width it scrolls, with a
   fade that says so. */
@media (min-width:901px){
  .jmap.vertical .jstep{min-width:92px;padding-inline:2px;}
  .jmap.vertical .jlabel{font-size:12.5px;}
  .jmap.vertical .jstate{font-size:11.5px;}
  html[lang="ar"] .jmap.vertical .jlabel{font-size:13.5px;}
  html[lang="ar"] .jmap.vertical .jstate{font-size:12.5px;}
  .jmap.vertical .jnode{width:54px;height:54px;}
  .jmap.vertical .jnode .ic{width:25px;height:25px;}
  .jmap.vertical .jstep::before{inset-block-start:27px;}
}
.jmap{scrollbar-width:thin;}
.jmap::-webkit-scrollbar{height:6px;}
.jmap::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;}

/* The expected date order, stated in the client's language, because the
   native control draws its own placeholder from the browser locale. */
.q-hint{font-size:12.5px;color:var(--ink-3);margin-block-start:-2px;}
html[lang="ar"] .q-hint{font-size:13.5px;}

/* One column until there is a result to sit beside it. */
.sbr-layout.no-result{grid-template-columns:minmax(0,1fr);max-width:720px;}

/* ---------------- services page: catalog additions ---------------------
   The Services page now renders the governed Tax Service Catalog — nine
   groups, 120 services — instead of one hand-written family of five. Three
   marks are new, and all three exist so that a card which cannot be started
   still says something true rather than "coming soon". */
.famcard .f-count{display:block;margin-block-start:8px;font-size:12px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;}
.famcard.is-open .f-count{color:var(--chip-teal-text);}
.svctile .s-maturity{display:block;font-size:12px;line-height:1.5;color:var(--ink-3);
  margin-block-start:6px;}
.svctile .s-open{margin-block-start:8px;font-size:12px;}
.svctile .s-open summary{cursor:pointer;color:var(--ink-2);font-weight:600;
  list-style:none;display:flex;align-items:center;gap:5px;}
.svctile .s-open summary::-webkit-details-marker{display:none;}
.svctile .s-open summary::before{content:"";width:0;height:0;flex:none;
  border-block:4px solid transparent;border-inline-start:5px solid currentColor;
  transition:transform .15s;}
html[dir="rtl"] .svctile .s-open summary::before{transform:scaleX(-1);}
.svctile .s-open[open] summary::before{transform:rotate(90deg);}
html[dir="rtl"] .svctile .s-open[open] summary::before{transform:rotate(90deg) scaleX(-1);}
.svctile .s-open ul{margin:6px 0 0;padding-inline-start:16px;color:var(--ink-3);
  line-height:1.55;}
.svctile .s-open li{margin-block-end:4px;}

/* =====================================================================
   TAXOPS-MINIMUM-COHERENT-PRODUCT-SLICE-01 — surfaces added by the first
   operational vertical. Same token vocabulary as everything above; no
   physical inline-axis property anywhere, so every one of these mirrors in
   Arabic without a second rule.
   ===================================================================== */

/* ---- identity selector ---------------------------------------------- */
.idpick{display:flex;flex-direction:column;gap:14px;}
.idpick-head{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--ink-2);font-weight:600;}
.idgroup{display:flex;flex-direction:column;gap:7px;}
.idgroup-lab{display:flex;align-items:center;gap:6px;font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700;}
html[lang="ar"] .idgroup-lab{letter-spacing:normal;text-transform:none;}
.idgroup-list{display:flex;flex-direction:column;gap:6px;}
.idform{display:block;}
.idbtn{inline-size:100%;display:flex;align-items:center;gap:10px;
  padding-block:10px;padding-inline:13px;border:1px solid var(--border-strong);
  border-radius:11px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:14px;cursor:pointer;text-align:start;
  transition:border-color .15s ease, background .15s ease;}
.idbtn:hover{border-color:var(--accent);background:var(--accent-tint);}
.idbtn-on{border-color:var(--gold-border);background:var(--gold-tint);}
.idbtn-who{font-weight:650;}
.idbtn-org{color:var(--ink-3);font-size:12.5px;margin-inline-start:auto;}
.idbtn-tick{color:var(--gold-text);display:inline-flex;}
.idpick-note{display:flex;gap:7px;align-items:flex-start;font-size:12px;
  color:var(--ink-3);line-height:1.5;margin-block-start:2px;}

/* ---- starting a service ---------------------------------------------- */
.startsteps{margin:10px 0 20px;padding-inline-start:20px;display:flex;
  flex-direction:column;gap:7px;color:var(--ink-2);font-size:14px;line-height:1.55;}
.evplan{list-style:none;margin:10px 0 20px;padding:0;display:flex;
  flex-direction:column;gap:11px;}
.evplan li{display:flex;flex-direction:column;gap:3px;padding-block-end:11px;
  border-block-end:1px solid var(--border);}
.evplan li:last-child{border-block-end:0;}
.ev-name{display:flex;align-items:center;gap:7px;font-weight:620;font-size:14px;}
.ev-why{color:var(--ink-3);font-size:13px;line-height:1.5;}
.ev-fmt{display:flex;gap:5px;flex-wrap:wrap;margin-block-start:3px;}
.startform{margin-block:16px 12px;}

/* ---- the governed journey -------------------------------------------- */
.jgov-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  margin-block-end:10px;}
.jgov-meta{margin-inline-start:auto;display:flex;align-items:center;gap:9px;
  flex-wrap:wrap;}
.jgov-prog{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.jprogress{block-size:6px;border-radius:99px;background:var(--surface-tint);
  overflow:hidden;margin-block:12px 16px;}
.jprogress span{display:block;block-size:100%;background:var(--gold-grad);
  border-radius:99px;}
.jowes{border:1px solid var(--gold-border);background:var(--gold-tint);
  border-radius:12px;padding:12px 14px;margin-block-end:14px;}
.jowes ul{list-style:none;margin:7px 0 0;padding:0;display:flex;
  flex-direction:column;gap:5px;}
.jowes a{display:flex;align-items:center;gap:7px;font-size:13.5px;
  color:var(--gold-text);font-weight:600;}
.jstages{margin-block-start:14px;border-block-start:1px solid var(--border);
  padding-block-start:12px;}
.jstages summary{cursor:pointer;font-size:13px;color:var(--ink-2);font-weight:600;}
.jstage-list{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:2px;counter-reset:jst;}
.jst{display:flex;align-items:center;gap:9px;padding-block:7px;
  padding-inline:9px;border-radius:8px;font-size:13.5px;}
.jst-ic{display:inline-flex;color:var(--ink-3);}
.jst-name{font-weight:560;}
.jst-who{margin-inline-start:auto;font-size:12px;color:var(--ink-3);}
.jst-why{inline-size:100%;font-size:12.5px;color:var(--err);}
.jst-done .jst-ic{color:var(--ok);}
.jst-done .jst-name{color:var(--ink-3);}
.jst-active{background:var(--accent-tint);}
.jst-active .jst-ic{color:var(--action);}
.jst-waiting{background:var(--gold-tint);}
.jst-waiting .jst-ic{color:var(--gold-text);}
.jst-blocked{background:var(--err-tint);}
.jst-blocked .jst-ic{color:var(--err);}
.jst-skipped{opacity:.55;}
.jhist{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:9px;font-size:13px;}
.jhist li{display:flex;flex-wrap:wrap;gap:4px 12px;padding-block-end:8px;
  border-block-end:1px solid var(--border);}
.jhist li:last-child{border-block-end:0;}
.jh-when{color:var(--ink-3);font-variant-numeric:tabular-nums;}
.jh-what{font-weight:600;}
.jh-who{color:var(--ink-2);}
.jh-why{inline-size:100%;color:var(--ink-3);}
.jlegacy-note{display:flex;gap:7px;align-items:center;font-size:12px;
  color:var(--ink-3);margin-block-end:12px;}

/* ---- client authorization -------------------------------------------- */
.authgrid{display:grid;grid-template-columns:minmax(140px,auto) 1fr;
  gap:8px 18px;margin-block:12px 4px;font-size:14px;}
.authgrid dt{color:var(--ink-3);font-size:12.5px;font-weight:600;}
.authgrid dd{margin:0;color:var(--ink);overflow-wrap:anywhere;}
.fingerprint{font-size:11.5px;color:var(--ink-2);}
.authform{display:flex;flex-direction:column;gap:14px;margin-block:14px 10px;}
.ackline{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  line-height:1.55;color:var(--ink-2);}
.ackline input{margin-block-start:3px;inline-size:17px;block-size:17px;
  accent-color:var(--action);flex:0 0 auto;}
.authalt{display:flex;gap:10px;flex-wrap:wrap;margin-block-end:14px;}

/* Acceptance selector cards (corrected roster: four capacities, not a list). */
.idbtn{flex-direction:column;align-items:flex-start;gap:5px;padding-block:13px;}
.idbtn-role{display:flex;align-items:center;gap:6px;font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;}
html[lang="ar"] .idbtn-role{letter-spacing:normal;text-transform:none;}
.idbtn-means{font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.idbtn-goes{font-size:11.5px;color:var(--ink-3);}
.idbtn-goes code{font-size:11px;background:var(--surface-tint);
  padding-inline:5px;padding-block:1px;border-radius:5px;}

/* =====================================================================
   TAXOPS-HUMAN-EXPERIENCE-COLLAPSE-01 — the human-facing surfaces.
   One dominant purpose per page, one dominant action, generous whitespace.
   Logical properties only.
   ===================================================================== */

/* ---- the NOW card: the single most prominent thing on the page ------- */
.nowcard{border:1px solid var(--border-strong);border-radius:18px;
  background:var(--surface);padding:30px 28px;margin-block-end:26px;
  box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:14px;}
.nowcard-you{border-color:var(--gold-border);
  background:linear-gradient(180deg,var(--gold-tint) 0%,var(--surface) 62%);}
.nowcard-blocked{border-color:var(--err-border);
  background:linear-gradient(180deg,var(--err-tint) 0%,var(--surface) 62%);}
.nowcard-eyebrow{display:flex;align-items:center;gap:7px;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;}
html[lang="ar"] .nowcard-eyebrow{letter-spacing:normal;text-transform:none;
  font-size:13px;}
.nowcard-heading{font-family:var(--brand);font-size:clamp(25px,3.6vw,36px);
  line-height:1.25;color:var(--heading);margin:0;font-weight:600;}
.nowcard-explain{font-size:16.5px;line-height:1.65;color:var(--ink-2);margin:0;
  max-inline-size:62ch;}
.nowcard-block{margin-block:2px;}
.nowcard-action{align-self:flex-start;margin-block-start:6px;}
.nowcard-next{font-size:13.5px;color:var(--ink-3);line-height:1.6;margin:0;
  padding-block-start:14px;border-block-start:1px dashed var(--border-strong);
  max-inline-size:62ch;}
.nowcard-next-lab{display:block;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;color:var(--ink-3);
  margin-block-end:3px;}
html[lang="ar"] .nowcard-next-lab{letter-spacing:normal;text-transform:none;}

/* ---- what we need, and why ------------------------------------------ */
.needlist{list-style:none;margin:4px 0 0;padding:0;display:flex;
  flex-direction:column;gap:2px;}
.needitem a{display:flex;flex-direction:column;gap:4px;padding:13px 14px;
  border-radius:11px;border:1px solid transparent;color:var(--ink);
  transition:background .15s ease,border-color .15s ease;}
.needitem a:hover{background:var(--surface-tint);border-color:var(--border-strong);}
.needitem-title{display:flex;align-items:center;gap:8px;font-weight:620;
  font-size:15px;}
.needitem-why{font-size:13.5px;color:var(--ink-3);line-height:1.55;
  padding-inline-start:24px;}
.needitem-flag{font-size:11px;font-weight:700;color:var(--err);
  background:var(--err-tint);border:1px solid var(--err-border);
  padding-inline:7px;padding-block:1px;border-radius:99px;}

/* ---- the six macro stages: secondary to the action ------------------- */
.macrotrack{border:1px solid var(--border);border-radius:14px;
  background:var(--surface-subtle);padding:18px 20px;margin-block-end:20px;}
.macrotrack-head{display:flex;align-items:baseline;gap:10px;
  margin-block-end:12px;}
.macrotrack-pos{font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;font-weight:700;}
.macrotrack-name{font-size:15px;font-weight:620;color:var(--heading);}
.macrolist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:6px 10px;}
.macrostep{display:flex;align-items:center;gap:7px;padding-block:7px;
  padding-inline:11px;border-radius:99px;font-size:13px;
  border:1px solid transparent;background:var(--surface);color:var(--ink-3);}
.macrostep-dot{display:inline-flex;}
.macrostep-done{color:var(--ok);}
.macrostep-current{border-color:var(--gold-border);background:var(--gold-tint);
  color:var(--gold-text);font-weight:650;}
.macrostep-upcoming{opacity:.62;}
.macrostep-you{font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;}
html[lang="ar"] .macrostep-you{letter-spacing:normal;text-transform:none;}

/* ---- the collapsed detail ------------------------------------------- */
.jdetail{border:1px solid var(--border);border-radius:12px;
  background:var(--surface);padding:14px 18px;}
.jdetail summary{cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--ink-2);}
.jdetail-facts{display:grid;grid-template-columns:minmax(120px,auto) 1fr;
  gap:6px 16px;margin-block:14px 10px;font-size:13.5px;}
.jdetail-facts dt{color:var(--ink-3);font-size:12.5px;font-weight:600;}
.jdetail-facts dd{margin:0;}

/* One card per active service. Replaces the per-case mini dashboard. */
.svccard{border:1px solid var(--border-strong);border-radius:14px;
  background:var(--surface);margin-block-end:12px;box-shadow:var(--sh-card);}
.svccard-you{border-color:var(--gold-border);}
.svccard-main{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 20px;color:var(--ink);}
.svccard-main:hover{background:var(--surface-tint);border-radius:14px;}
.svccard-title{font-size:17px;font-weight:650;color:var(--heading);}
.svccard-stage{font-size:13.5px;color:var(--ink-2);display:flex;
  align-items:center;gap:7px;}
.svccard-pos{font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;}
.svccard-who{margin-inline-start:auto;display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--ink-3);}
.svccard-you .svccard-who{color:var(--gold-text);}

/* Unified operating experience: one line per service, not a wall of cards. */
.needsummary{display:flex;align-items:center;gap:9px;font-size:14.5px;
  color:var(--ink-2);margin:0;}
.needsummary-first{color:var(--ink);font-weight:600;}
.dogroups{list-style:none;margin:14px 0 0;padding:0;display:flex;
  flex-direction:column;gap:8px;}
.dogroup{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid var(--gold-border);border-radius:12px;
  background:var(--surface);}
.dogroup-svc{font-size:16px;font-weight:650;color:var(--heading);}
.dogroup-n{font-size:13.5px;color:var(--ink-3);}
.dogroup-go{margin-inline-start:auto;}
.doblock-sub{font-size:15px;color:var(--ink-2);margin:8px 0 0;line-height:1.6;}

/* Intent-first service discovery. */
.intentlist{list-style:none;margin:0 0 18px;padding:0;display:flex;
  flex-direction:column;gap:10px;max-inline-size:640px;}
.intentbtn{display:flex;align-items:center;gap:14px;padding:20px 22px;
  border:1px solid var(--border-strong);border-radius:14px;
  background:var(--surface);color:var(--ink);font-size:17px;font-weight:600;
  box-shadow:var(--sh-card);transition:border-color .15s ease,background .15s ease;}
.intentbtn:hover{border-color:var(--accent);background:var(--accent-tint);}
.intentbtn span{flex:1;}
.intentall{font-size:13.5px;}
.intentall a{display:inline-flex;align-items:center;gap:5px;color:var(--action);
  font-weight:600;}