/* ============================================================================
   UMRAH OS — COMPONENT LIBRARY
   Consumes tokens.css only. Every class here is documented in /docs → Components.
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:var(--fw-regular) var(--fs-md)/var(--lh-base) var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none}
h1,h2,h3,h4,h5,h6,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
/* A solid two-tone ring: an inner light halo so the outline stays visible on
   dark surfaces too. Measured ~5.2:1 against every surface token. */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--surface) 85%,transparent);
  border-radius:var(--r-sm)}

/* Keyboard users should not traverse the whole sidebar on every page. */
.skip{position:absolute;left:var(--s-5);top:-100px;z-index:var(--z-tip);
  padding:var(--s-5) var(--s-7);border-radius:var(--r-md);
  background:var(--primary);color:var(--primary-text);
  font-size:var(--fs-sm);font-weight:var(--fw-semi);box-shadow:var(--sh-lg);
  transition:top var(--dur-2) var(--ease)}
.skip:focus{top:var(--s-5)}
::selection{background:color-mix(in srgb,var(--primary) 26%,transparent)}
hr{border:0;border-top:1px solid var(--border);margin:var(--s-8) 0}

/* ---------- Icons ----------
   Base size for every inline icon. Contexts that need a different size
   (buttons, nav, tab bar) override it explicitly. Without this an icon
   dropped into a card head expands to fill its container. */
.i{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
.i--sm{width:14px;height:14px}
.i--lg{width:24px;height:24px}
.i--xl{width:32px;height:32px}

/* ---------- Typography ---------- */
.h1{font:var(--fw-bold) var(--fs-4xl)/var(--lh-tight) var(--font-display);letter-spacing:var(--tr-tight)}
.h2{font:var(--fw-bold) var(--fs-3xl)/var(--lh-tight) var(--font-display);letter-spacing:var(--tr-tight)}
.h3{font:var(--fw-semi) var(--fs-2xl)/var(--lh-snug) var(--font-display);letter-spacing:var(--tr-snug)}
.h4{font:var(--fw-semi) var(--fs-xl)/var(--lh-snug) var(--font-sans);letter-spacing:var(--tr-snug)}
.h5{font:var(--fw-semi) var(--fs-lg)/var(--lh-snug) var(--font-sans)}
.h6{font:var(--fw-semi) var(--fs-md)/var(--lh-snug) var(--font-sans)}
.display{font:var(--fw-bold) var(--fs-6xl)/1.02 var(--font-display);letter-spacing:-0.03em}
.serif{font-family:var(--font-serif)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ar{font-family:var(--font-ar);direction:rtl;line-height:2.05;font-size:var(--fs-2xl)}
.eyebrow{font:var(--fw-semi) var(--fs-2xs)/1 var(--font-sans);letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--text-3)}
.lead{font-size:var(--fs-lg);line-height:var(--lh-loose);color:var(--text-2)}
.small{font-size:var(--fs-sm)}
.tiny{font-size:var(--fs-xs)}
.muted{color:var(--text-2)}
.muted-2{color:var(--text-3)}
.strong{font-weight:var(--fw-semi)}
.center{text-align:center}
.right{text-align:right}
.prose{max-width:var(--reading-max)}
.prose p+p{margin-top:var(--s-5)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* overflow:hidden cannot clip an inline box — spans need a block-ish display
   or the nowrap text pushes the page wide on phones. */
span.truncate{display:inline-block;max-width:100%;vertical-align:bottom}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.grad-gold{background:linear-gradient(100deg,var(--gold-600),var(--gold-300) 45%,var(--gold-500));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Layout primitives ---------- */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.row-top{display:flex;align-items:flex-start}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.gap-5{gap:var(--s-5)}
.gap-6{gap:var(--s-6)}.gap-7{gap:var(--s-7)}.gap-8{gap:var(--s-8)}.gap-9{gap:var(--s-9)}
.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.mt-9{margin-top:var(--s-9)}.mb-6{margin-top:0;margin-bottom:var(--s-6)}
.grid{display:grid;gap:var(--s-6)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-full{grid-column:1/-1}
@media (max-width:1080px){.g4,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2-1,.g-1-2{grid-template-columns:minmax(0,1fr)}.span-3{grid-column:span 2}}
@media (max-width:720px){.g2,.g3,.g4,.g6{grid-template-columns:minmax(0,1fr)}
  .span-2,.span-3{grid-column:span 1}}
.divide>*+*{border-top:1px solid var(--border)}

/* ---------- App shell ---------- */
.app{min-height:100dvh;display:grid;grid-template-columns:var(--sidebar-w) 1fr}
.app.no-nav{grid-template-columns:minmax(0,1fr)}
.sidebar{background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;z-index:var(--z-sticky)}
.sidebar__brand{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-6) var(--s-6) var(--s-5);
  border-bottom:1px solid var(--border)}
.sidebar__nav{flex:1;overflow-y:auto;padding:var(--s-5) var(--s-4);scrollbar-width:thin}
.sidebar__foot{padding:var(--s-5);border-top:1px solid var(--border)}
.navgroup{margin-bottom:var(--s-6)}
.navgroup>.eyebrow{padding:0 var(--s-4) var(--s-3)}
.navitem{display:flex;align-items:center;gap:var(--s-5);width:100%;text-align:left;
  padding:var(--s-4) var(--s-4);border-radius:var(--r-md);color:var(--text-2);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.navitem:hover{background:var(--surface-3);color:var(--text)}
.navitem[aria-current="page"]{background:var(--primary-soft);color:var(--text-brand);font-weight:var(--fw-semi)}
.navitem[aria-current="page"] .i{color:var(--primary)}
.navitem .i{width:18px;height:18px;flex:none;color:var(--text-3)}
.navitem .tag{margin-left:auto}

.topbar{position:sticky;top:0;z-index:var(--z-sticky);height:var(--topbar-h);
  display:flex;align-items:center;gap:var(--s-6);padding:0 var(--s-8);
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--border)}
.main{min-width:0;display:flex;flex-direction:column}
.content{padding:var(--s-8);max-width:var(--content-max);width:100%;margin-inline:auto}
.content.tight{max-width:960px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-8)}
@media (max-width:920px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(84vw,var(--sidebar-w));
    transform:translateX(-102%);transition:transform var(--dur-3) var(--ease-out);
    box-shadow:var(--sh-xl);z-index:var(--z-drawer)}
  .app.nav-open .sidebar{transform:none}
  .content{padding:var(--s-6)}
}

/* ---------- Phone frame (PWA previews on desktop) ---------- */
.phone-wrap{display:flex;justify-content:center;padding:var(--s-9) var(--s-6)}
.phone{width:390px;height:844px;border-radius:44px;background:var(--surface);
  border:1px solid var(--border-2);box-shadow:var(--sh-xl);overflow:hidden;position:relative;
  display:flex;flex-direction:column}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:118px;height:29px;border-radius:var(--r-full);background:var(--char-950);z-index:5}
.phone__screen{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.phone__screen::-webkit-scrollbar{display:none}
@media (max-width:720px){
  .phone-wrap{padding:0}
  .phone{width:100%;height:100dvh;border-radius:0;border:0;box-shadow:none}
  .phone__notch{display:none}
}

/* Mobile app chrome */
.appbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;
  gap:var(--s-5);padding:var(--s-6) var(--s-6) var(--s-5);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.appbar.plain{border-bottom:0;background:none;backdrop-filter:none}
.appbar__title{font:var(--fw-semi) var(--fs-lg)/1.2 var(--font-display);letter-spacing:var(--tr-snug)}
.screen{padding:var(--s-6) var(--s-6) calc(var(--tabbar-h) + var(--s-11))}
.screen.flush{padding-inline:0}
.tabbar{position:sticky;bottom:0;z-index:var(--z-sticky);display:grid;
  grid-template-columns:repeat(5,1fr);height:var(--tabbar-h);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7);
  border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:var(--fs-3xs);font-weight:var(--fw-medium);color:var(--text-3);
  letter-spacing:.01em;transition:color var(--dur-2) var(--ease)}
.tabbar button .i{width:21px;height:21px}
.tabbar button[aria-current="page"]{color:var(--primary)}
.tabbar button[aria-current="page"] .i{transform:translateY(-1px)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-4);
  height:38px;padding:0 var(--s-6);border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:var(--fw-semi);letter-spacing:var(--tr-snug);
  border:1px solid transparent;white-space:nowrap;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
             transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.btn:active{transform:scale(.985)}
.btn .i{width:16px;height:16px;flex:none}
.btn--primary{background:var(--primary);color:var(--primary-text);box-shadow:var(--sh-sm)}
.btn--primary:hover{background:var(--primary-hover)}
.btn--accent{background:var(--accent);color:var(--accent-text);box-shadow:var(--sh-sm)}
.btn--accent:hover{background:var(--accent-hover)}
.btn--dark{background:var(--char-900);color:#fff}
:root[data-theme="dark"] .btn--dark{background:var(--surface-3);color:var(--text)}
.btn--outline{border-color:var(--border-2);background:var(--surface);color:var(--text)}
.btn--outline:hover{background:var(--surface-3);border-color:var(--border-strong)}
.btn--ghost{color:var(--text-2)}
.btn--ghost:hover{background:var(--surface-3);color:var(--text)}
.btn--soft{background:var(--primary-soft);color:var(--text-brand)}
.btn--soft:hover{background:color-mix(in srgb,var(--primary) 18%,transparent)}
.btn--danger{background:var(--err-500);color:#fff}
.btn--danger:hover{background:var(--err-600)}
.btn--lg{height:48px;padding:0 var(--s-8);font-size:var(--fs-md);border-radius:var(--r-lg)}
.btn--xl{height:56px;padding:0 var(--s-9);font-size:var(--fs-lg);border-radius:var(--r-lg)}
.btn--sm{height:30px;padding:0 var(--s-5);font-size:var(--fs-xs);border-radius:var(--r-sm)}
.btn--block{width:100%}
.btn--icon{width:38px;padding:0}
.btn--icon.btn--sm{width:30px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btnbar{display:flex;gap:var(--s-4);flex-wrap:wrap}

/* ---------- Badges, pills, chips ---------- */
.tag{display:inline-flex;align-items:center;gap:var(--s-3);height:22px;padding:0 var(--s-4);
  border-radius:var(--r-full);font-size:var(--fs-2xs);font-weight:var(--fw-semi);
  letter-spacing:.02em;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.tag--ok{background:var(--ok-50);color:var(--ok-700)}
.tag--warn{background:var(--warn-50);color:var(--warn-700)}
.tag--err{background:var(--err-50);color:var(--err-700)}
.tag--info{background:var(--info-50);color:var(--info-700)}
.tag--gold{background:var(--accent-soft);color:var(--gold-700)}
.tag--brand{background:var(--primary-soft);color:var(--text-brand)}
.tag--solid{background:var(--char-900);color:#fff}
:root[data-theme="dark"] .tag--ok{color:var(--ok-text)}
:root[data-theme="dark"] .tag--warn{color:var(--warn-text)}
:root[data-theme="dark"] .tag--err{color:var(--err-text)}
:root[data-theme="dark"] .tag--info{color:var(--info-text)}
:root[data-theme="dark"] .tag--gold{color:var(--gold-300)}
.tag .dot{width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
.chip{display:inline-flex;align-items:center;gap:var(--s-3);height:32px;padding:0 var(--s-5);
  border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-2);
  transition:all var(--dur-2) var(--ease)}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--char-900);border-color:var(--char-900);color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--surface-inv);color:var(--text-inv)}
.chiprow{display:flex;gap:var(--s-4);overflow-x:auto;padding-bottom:var(--s-2);
  scrollbar-width:none;-ms-overflow-style:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow>*{flex:none}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-7);box-shadow:var(--sh-xs)}
.card--flat{box-shadow:none}
.card--pad-sm{padding:var(--s-6)}
.card--pad-lg{padding:var(--s-9)}
.card--flush{padding:0;overflow:hidden}
.card--hover{transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),
  border-color var(--dur-2) var(--ease);cursor:pointer}
.card--hover:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--border-2)}
.card--dark{background:var(--char-900);border-color:transparent;color:#fff}
.card--dark .muted{color:rgba(255,255,255,.62)}
.card--brand{background:linear-gradient(160deg,var(--emerald-700),var(--emerald-900));
  border-color:transparent;color:#fff}
.card--brand .muted{color:rgba(255,255,255,.68)}
.card--gold{background:linear-gradient(160deg,var(--gold-500),var(--gold-700));
  border-color:transparent;color:#1B1608}
.card__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-5);margin-bottom:var(--s-6)}
.card__title{font:var(--fw-semi) var(--fs-lg)/1.25 var(--font-sans);letter-spacing:var(--tr-snug)}
.card__sub{font-size:var(--fs-sm);color:var(--text-2);margin-top:2px}
.card__body{padding:var(--s-7)}
.card__foot{padding:var(--s-5) var(--s-7);border-top:1px solid var(--border);background:var(--surface-2)}
.card__media{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--surface-3)}

/* ---------- Stat tiles ---------- */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-7);display:flex;flex-direction:column;gap:var(--s-4);position:relative;overflow:hidden}
.stat__label{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-2)}
.stat__value{font:var(--fw-bold) var(--fs-4xl)/1 var(--font-display);letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums}
.stat__value small{font-size:var(--fs-lg);font-weight:var(--fw-semi);color:var(--text-2);margin-left:2px}
.stat__delta{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--fs-xs);
  font-weight:var(--fw-semi)}
.stat__delta.up{color:var(--ok-600)}.stat__delta.down{color:var(--err-600)}
.stat__spark{position:absolute;right:0;bottom:0;width:110px;height:44px;opacity:.5}

/* ---------- Tables ---------- */
.tablewrap{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden;min-width:0;max-width:100%}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Long unbroken tokens (URLs, refs) in card copy must wrap, not widen the page. */
.card__sub .mono,.card__sub code,.li-sub .mono{overflow-wrap:anywhere}
table.data{font-size:var(--fs-sm);min-width:640px}
table.data th{text-align:left;font-weight:var(--fw-semi);font-size:var(--fs-xs);color:var(--text-2);
  letter-spacing:var(--tr-wide);text-transform:uppercase;padding:var(--s-5) var(--s-6);
  background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0}
table.data td{padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background var(--dur-1) var(--ease)}
table.data tbody tr:hover{background:var(--surface-2)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data .cellmain{font-weight:var(--fw-semi);color:var(--text)}
table.data .cellsub{font-size:var(--fs-xs);color:var(--text-3)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:var(--s-4)}
.label{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2)}
.hint{font-size:var(--fs-xs);color:var(--text-3)}
.error{font-size:var(--fs-xs);color:var(--err-600);font-weight:var(--fw-medium)}
.input,.select,.textarea{width:100%;height:40px;padding:0 var(--s-5);background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--r-md);font-size:var(--fs-sm);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.textarea{height:auto;min-height:96px;padding:var(--s-5);resize:vertical;line-height:var(--lh-base)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--sh-ring)}
.input::placeholder,.textarea::placeholder{color:var(--text-4)}
.input[aria-invalid="true"]{border-color:var(--err-500)}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
  linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s-9)}
.inputgroup{position:relative}
.inputgroup .input{padding-left:var(--s-10)}
.inputgroup .i{position:absolute;left:var(--s-5);top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--text-3);pointer-events:none}
.switch{position:relative;width:42px;height:24px;border-radius:var(--r-full);background:var(--border-2);
  transition:background var(--dur-2) var(--ease);flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:var(--r-full);background:#fff;box-shadow:var(--sh-sm);
  transition:transform var(--dur-3) var(--ease-spring)}
.switch[aria-checked="true"]{background:var(--primary)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.segment{display:inline-flex;padding:3px;background:var(--surface-3);border-radius:var(--r-md);gap:2px}
.segment button{height:30px;padding:0 var(--s-6);border-radius:var(--r-sm);font-size:var(--fs-xs);
  font-weight:var(--fw-semi);color:var(--text-2);transition:all var(--dur-2) var(--ease)}
.segment button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sh-xs)}

/* Checklist */
.checklist{display:flex;flex-direction:column;gap:var(--s-2)}
.checklist li{display:flex;align-items:flex-start;gap:var(--s-5);padding:var(--s-5);
  border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-2) var(--ease)}
.checklist li:hover{background:var(--surface-2)}
.checklist .box{width:20px;height:20px;flex:none;margin-top:1px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-strong);display:grid;place-items:center;
  transition:all var(--dur-2) var(--ease)}
.checklist .box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.6);
  transition:all var(--dur-2) var(--ease-spring)}
.checklist li[aria-checked="true"] .box{background:var(--primary);border-color:var(--primary)}
.checklist li[aria-checked="true"] .box svg{opacity:1;transform:none}
.checklist li[aria-checked="true"] .txt{color:var(--text-3);text-decoration:line-through}
.checklist .txt{font-size:var(--fs-sm);line-height:1.45}

/* ---------- Progress ---------- */
.bar{height:6px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:var(--r-full);background:var(--primary);
  transition:width var(--dur-5) var(--ease-out)}
.bar.gold>span{background:var(--accent)}
.bar.warn>span{background:var(--warn-500)}
.bar.err>span{background:var(--err-500)}
.bar.lg{height:10px}
.ring{--pct:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--primary) calc(var(--pct)*1%),var(--surface-3) 0)}
.ring::after{content:"";position:absolute;width:50px;height:50px;border-radius:50%;background:var(--surface)}
.ring>span{position:relative;z-index:1;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums}
.ring{position:relative}

/* ---------- Timeline / stepper ---------- */
.timeline{position:relative;padding-left:var(--s-9)}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:var(--border);border-radius:2px}
.timeline li{position:relative;padding-bottom:var(--s-8)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:calc(-1 * var(--s-9) + 5px);top:3px;
  width:14px;height:14px;border-radius:50%;background:var(--surface);
  border:2px solid var(--border-strong);z-index:1}
.timeline li.done::before{background:var(--primary);border-color:var(--primary)}
.timeline li.now::before{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 26%,transparent)}
.timeline li.done::after,.timeline li.now::after{content:"";position:absolute;
  left:calc(-1 * var(--s-9) + 11px);top:17px;bottom:-3px;width:2px;background:var(--primary);z-index:1}
.timeline li:last-child::after{display:none}
.timeline .t-when{font-size:var(--fs-xs);color:var(--text-3);font-weight:var(--fw-medium)}
.timeline .t-title{font-size:var(--fs-sm);font-weight:var(--fw-semi);margin-top:2px}
.timeline .t-desc{font-size:var(--fs-sm);color:var(--text-2);margin-top:var(--s-3)}

.stepper{display:flex;align-items:center;gap:var(--s-2);overflow-x:auto;scrollbar-width:none}
.stepper::-webkit-scrollbar{display:none}
.stepper .step{display:flex;align-items:center;gap:var(--s-4);flex:none}
.stepper .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);background:var(--surface-3);color:var(--text-3);
  border:1px solid var(--border)}
.stepper .step.done .dot{background:var(--primary);color:#fff;border-color:var(--primary)}
.stepper .step.now .dot{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.stepper .lbl{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-2);white-space:nowrap}
.stepper .step.now .lbl{color:var(--text);font-weight:var(--fw-semi)}
.stepper .link{width:22px;height:2px;background:var(--border);border-radius:2px;flex:none}
.stepper .link.done{background:var(--primary)}

/* ---------- Lists ---------- */
.list{display:flex;flex-direction:column}
.list>li{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5) 0;
  border-bottom:1px solid var(--border)}
.list>li:last-child{border-bottom:0}
.list.rows>li{padding:var(--s-5) var(--s-6)}
.li-main{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.li-sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4) var(--s-7);font-size:var(--fs-sm)}
.kv dt{color:var(--text-3)}
.kv dd{text-align:right;font-weight:var(--fw-medium)}

/* ---------- Avatar ---------- */
.avatar{width:36px;height:36px;border-radius:var(--r-full);flex:none;display:grid;place-items:center;
  background:var(--surface-3);color:var(--text-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:.02em;overflow:hidden;border:1px solid var(--border)}
.avatar.sm{width:28px;height:28px;font-size:var(--fs-3xs)}
.avatar.lg{width:52px;height:52px;font-size:var(--fs-md)}
.avatar.xl{width:76px;height:76px;font-size:var(--fs-xl)}
.avatar.brand{background:var(--primary-soft);color:var(--text-brand);border-color:transparent}
.avatar.gold{background:var(--accent-soft);color:var(--gold-700)}
.avstack{display:flex}
.avstack .avatar+.avatar{margin-left:-10px;box-shadow:0 0 0 2px var(--surface)}

/* ---------- Alerts / callouts ---------- */
.alert{display:flex;gap:var(--s-5);padding:var(--s-6);border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface-2);font-size:var(--fs-sm);line-height:1.5}
.alert .i{width:18px;height:18px;flex:none;margin-top:1px}
.alert__title{font-weight:var(--fw-semi);margin-bottom:2px}
.alert--ok{background:var(--ok-50);border-color:color-mix(in srgb,var(--ok-500) 26%,transparent);color:var(--ok-700)}
.alert--warn{background:var(--warn-50);border-color:color-mix(in srgb,var(--warn-500) 26%,transparent);color:var(--warn-700)}
.alert--err{background:var(--err-50);border-color:color-mix(in srgb,var(--err-500) 26%,transparent);color:var(--err-700)}
.alert--info{background:var(--info-50);border-color:color-mix(in srgb,var(--info-500) 26%,transparent);color:var(--info-700)}
.alert--brand{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 26%,transparent);color:var(--text-brand)}
:root[data-theme="dark"] .alert--ok{color:var(--ok-text)}
:root[data-theme="dark"] .alert--warn{color:var(--warn-text)}
:root[data-theme="dark"] .alert--err{color:var(--err-text)}
:root[data-theme="dark"] .alert--info{color:var(--info-text)}
:root[data-theme="dark"] .stat__delta.up{color:var(--ok-text)}
:root[data-theme="dark"] .stat__delta.down{color:var(--err-text)}
:root[data-theme="dark"] .error{color:var(--err-text)}

/* ---------- Empty / loading / error states ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--s-12) var(--s-7);gap:var(--s-5)}
.empty__art{width:96px;height:96px;border-radius:var(--r-2xl);display:grid;place-items:center;
  background:var(--surface-3);color:var(--text-4);margin-bottom:var(--s-2)}
.empty__title{font:var(--fw-semi) var(--fs-lg)/1.3 var(--font-sans)}
.empty__body{font-size:var(--fs-sm);color:var(--text-2);max-width:38ch}
.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.skel.line{height:12px;margin-bottom:var(--s-4)}
.skel.title{height:20px;width:52%;margin-bottom:var(--s-5)}
.skel.block{height:120px;border-radius:var(--r-lg)}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-2);
  border-top-color:var(--primary);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Modal / sheet / drawer ---------- */
.scrim{position:fixed;inset:0;background:var(--overlay);z-index:var(--z-modal);
  backdrop-filter:blur(3px);animation:fade var(--dur-3) var(--ease)}
@keyframes fade{from{opacity:0}}
.modal{position:fixed;z-index:var(--z-modal);left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 32px));max-height:86dvh;overflow:auto;background:var(--surface);
  border-radius:var(--r-xl);box-shadow:var(--sh-xl);border:1px solid var(--border);
  animation:pop var(--dur-3) var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding:var(--s-7);border-bottom:1px solid var(--border)}
.modal__body{padding:var(--s-7)}
.modal__foot{display:flex;justify-content:flex-end;gap:var(--s-4);padding:var(--s-6) var(--s-7);
  border-top:1px solid var(--border);background:var(--surface-2)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-modal);background:var(--surface);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;box-shadow:var(--sh-xl);max-height:88dvh;overflow:auto;
  padding-bottom:env(safe-area-inset-bottom);animation:slideup var(--dur-4) var(--ease-out)}
@keyframes slideup{from{transform:translateY(100%)}}
.sheet__grab{width:38px;height:4px;border-radius:var(--r-full);background:var(--border-2);
  margin:var(--s-5) auto var(--s-2)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 16px);transform:translateX(-50%);
  z-index:var(--z-toast);background:var(--char-900);color:#fff;padding:var(--s-5) var(--s-7);
  border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  box-shadow:var(--sh-lg);animation:slideup var(--dur-3) var(--ease-out);max-width:90vw}
:root[data-theme="dark"] .toast{background:var(--surface-3);border:1px solid var(--border)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:var(--s-7);border-bottom:1px solid var(--border);overflow-x:auto;
  scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:var(--s-5) 0 var(--s-5);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--primary);
  font-weight:var(--fw-semi)}

/* ---------- Kanban ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:290px;gap:var(--s-6);
  overflow-x:auto;padding-bottom:var(--s-5)}
.kancol{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  display:flex;flex-direction:column;min-height:240px}
.kancol__head{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-6);
  border-bottom:1px solid var(--border);font-size:var(--fs-sm);font-weight:var(--fw-semi)}
.kancol__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-5);flex:1}
.kancard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s-6);box-shadow:var(--sh-xs);cursor:grab;
  transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.kancard:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}

/* ---------- Charts (pure CSS/SVG) ---------- */
.chart{width:100%}
.chart .axis{stroke:var(--border);stroke-width:1}
.chart .gridline{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.chart .ser-1{fill:var(--emerald-600);stroke:var(--emerald-600)}
.chart .ser-2{fill:var(--gold-500);stroke:var(--gold-500)}
.chart .ser-3{fill:var(--info-500);stroke:var(--info-500)}
.chart .ser-4{fill:var(--char-400);stroke:var(--char-400)}
.chart .ser-5{fill:var(--emerald-300);stroke:var(--emerald-300)}
.chart .lbl{fill:var(--text-3);font-size:10px;font-family:var(--font-sans)}
.chart .val{fill:var(--text);font-size:11px;font-weight:600;font-family:var(--font-sans)}
.chart .line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .area{opacity:.12;stroke:none}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-7);font-size:var(--fs-xs);color:var(--text-2)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:var(--s-3)}
.hbar{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
.hbar .r{display:grid;grid-template-columns:110px 1fr auto;gap:var(--s-5);align-items:center;
  font-size:var(--fs-xs)}

/* ---------- Islamic geometric ornament ---------- */
.ornament{color:var(--accent);opacity:.85}
.pattern-bg{position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'>\
<g fill='none' stroke='%23C8A24A' stroke-width='1'>\
<path d='M30 0 L60 30 L30 60 L0 30 Z'/><path d='M30 12 L48 30 L30 48 L12 30 Z'/>\
<path d='M0 0 L12 0 M60 0 L48 0 M0 60 L12 60 M60 60 L48 60'/></g></svg>");
  background-size:60px 60px}
.rule-orn{display:flex;align-items:center;gap:var(--s-5);color:var(--text-4)}
.rule-orn::before,.rule-orn::after{content:"";height:1px;flex:1;background:var(--border)}

/* ---------- Utility ---------- */
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rel{position:relative}
.pointer{cursor:pointer}
.scroll-x{overflow-x:auto;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.sticky-top{position:sticky;top:var(--topbar-h);z-index:10}
.br-md{border-radius:var(--r-md)}.br-lg{border-radius:var(--r-lg)}.br-xl{border-radius:var(--r-xl)}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--ok-500);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ok-500) 60%,transparent);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.tabbar,.appbar,.no-print{display:none !important}
  .app{display:block}
  .content{padding:0;max-width:none}
  .card,.stat,.tablewrap{box-shadow:none;break-inside:avoid}
  body{background:#fff}
}