/* =====================================================================
   RAYA · showcase — documentation surface (design-system.html, brand guide, hub, audit)
   Prefix ds-* · uses only DS tokens/components. Not part of the product surfaces.
   ===================================================================== */
body.ds{background:var(--bg)}
.ds-top{position:sticky;inset-block-start:0;z-index:150;height:64px;display:flex;align-items:center;gap:14px;padding-inline:clamp(12px,2vw,28px);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-block-end:var(--bw-h) solid var(--hair-c)}
.ds-top .ver{font-family:var(--f-num);font-weight:800;font-size:12px;background:var(--ink);color:var(--amber);padding:.15rem .6rem;border-radius:var(--r-pill)}
.ds-top .grow{min-width:0}
.ds-top .ds-q{max-width:300px;width:100%}
.ds-layout{display:grid;grid-template-columns:var(--ds-side,280px) minmax(0,1fr);align-items:start}
.ds-side{position:sticky;inset-block-start:64px;height:calc(100vh - 64px);overflow:auto;padding:18px 14px 40px 10px;border-inline-end:var(--bw-h) solid var(--hair-c);scrollbar-width:thin}
.ds-side h6{margin:18px 0 6px;padding-inline:12px;font:700 11px/1.4 var(--f-display);letter-spacing:.14em;color:var(--text-3);text-transform:uppercase}
.ds-side a{display:flex;align-items:center;gap:10px;padding:.42rem .8rem;border-radius:var(--r-sm);font-size:var(--fs-14);color:var(--text-2);font-weight:500;transition:all var(--t-fast)}
.ds-side a:hover{background:var(--surface-2);color:var(--text)}
.ds-side a.on{background:var(--ink);color:#F5EEE2}
[data-theme="dark"] .ds-side a.on{background:var(--amber);color:var(--ink)}
.ds-side a .n{margin-inline-start:auto;font:700 11px var(--f-num);opacity:.55}
.ds-main{min-width:0;padding:clamp(1.2rem,3vw,3.5rem) clamp(1rem,3vw,3.5rem) 6rem}
.ds-sec{padding-block:clamp(2.5rem,5vw,5rem);border-block-end:var(--bw) solid var(--hair-c);scroll-margin-top:84px}
.ds-sec:last-of-type{border-block-end:0}
.ds-sh{display:grid;gap:.7rem;max-width:52rem;margin-block-end:2.4rem}
.ds-sh h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem)}
.ds-sh p{color:var(--text-2)}
.ds-blk{margin-block-start:2.6rem}
.ds-blk>h3{font-size:var(--fs-20);display:flex;align-items:center;gap:10px;margin-block-end:.4rem}
.ds-blk>h3 .tag{font-family:var(--f-body)}
.ds-blk>p.sm{color:var(--text-2);max-width:48rem;margin-block-end:1rem}
.ds-demo{padding:clamp(1.1rem,2vw,2rem);background:var(--surface);border:var(--bw-h) solid var(--hair-c);border-radius:var(--r-md);position:relative;overflow:hidden}
.ds-demo.dots{background-image:radial-gradient(var(--hair-c) 1.2px,transparent 1.2px);background-size:18px 18px;background-color:var(--surface)}
.ds-demo.on-dark{background:var(--ink);color:#F5EEE2;--text-2:#BBAA8F;--hair-c:rgba(245,238,226,.18);border-color:var(--ink)}
.ds-demo.flow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ds-demo.col{display:grid;gap:18px}
.ds-demo>.lab{position:absolute;inset-block-start:8px;inset-inline-end:12px;font:700 10px var(--f-display);letter-spacing:.14em;color:var(--text-3)}
.ds-code{margin-block-start:-1px;border:var(--bw-h) solid var(--hair-c);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);background:var(--ink);color:#EBDDC6;overflow:hidden}
.ds-code summary{cursor:pointer;padding:.55rem 1rem;font:600 12px var(--f-display);color:var(--amber);display:flex;justify-content:space-between;align-items:center;list-style:none}
.ds-code summary::-webkit-details-marker{display:none}
.ds-code pre{margin:0;padding:1rem 1.2rem;overflow:auto;font:500 12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;text-align:left;max-height:340px;border-block-start:1px solid rgba(245,238,226,.12);white-space:pre}
.ds-code .cp{font:600 11px var(--f-display);background:var(--amber);color:var(--ink);border-radius:var(--r-pill);padding:.1rem .7rem}
.ds-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--m,220px)),1fr))}
.ds-note{display:flex;gap:10px;padding:.8rem 1rem;border-radius:var(--r-sm);background:var(--amber-bg);font-size:var(--fs-14);border-inline-start:5px solid var(--amber);color:var(--ink)}
[data-theme="dark"] .ds-note{color:var(--text)}
.ds-do,.ds-dont{padding:1rem 1.1rem;border-radius:var(--r-md);border:var(--bw) solid var(--ol);font-size:var(--fs-14);position:relative;background:var(--surface)}
.ds-do::before,.ds-dont::before{position:absolute;inset-block-start:-12px;inset-inline-start:14px;font:800 11px var(--f-display);padding:.1rem .7rem;border-radius:var(--r-pill);color:#fff}
.ds-do::before{content:"اعمل";background:var(--sage)}
.ds-dont::before{content:"ما تعملش";background:var(--rust)}
.ds-do{border-color:var(--sage)}.ds-dont{border-color:var(--rust)}
/* colour cards */
.cc{border:var(--bw) solid var(--ink);border-radius:var(--r-md);overflow:hidden;background:var(--surface);cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast);display:flex;flex-direction:column}
.cc:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-2)}
.cc .sw{height:96px;background:var(--c);display:flex;align-items:flex-end;justify-content:space-between;padding:8px 12px;font:800 12px var(--f-num);color:var(--t,#fff);direction:ltr}
.cc .bd{padding:.8rem 1rem 1rem;display:grid;gap:3px;font-size:var(--fs-13)}
.cc .bd b{font-family:var(--f-display);font-size:var(--fs-15)}
.cc .bd code{font:600 11.5px var(--f-num);color:var(--text-2);direction:ltr;text-align:start}
.cc .mean{color:var(--text-2);line-height:1.6}
/* type specimens */
.spec-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.2rem;align-items:baseline;padding-block:1rem;border-block-end:var(--bw-h) solid var(--hair-c)}
.spec-row:last-child{border-block-end:0}
.spec-row small{font:600 11.5px/1.6 var(--f-num);color:var(--text-2);direction:ltr;text-align:start}
@media (max-width:760px){.spec-row{grid-template-columns:1fr;gap:.3rem}}
/* scale bars */
.sbar-s{display:grid;grid-template-columns:70px 1fr 64px;gap:14px;align-items:center;font:600 12px var(--f-num);padding-block:6px}
.sbar-s i{display:block;height:var(--h,16px);width:var(--w);background:var(--amber);border:var(--bw-h) solid var(--ink);border-radius:5px}
/* radius / shadow tiles */
.tile{aspect-ratio:1.4;display:grid;place-items:center;background:var(--amber);border:var(--bw) solid var(--ink);font:800 12px var(--f-num);color:var(--ink)}
/* motion demo */
.mo{display:grid;gap:12px}
.mo .trk{height:46px;border-radius:var(--r-pill);background:var(--surface-2);position:relative;border:var(--bw-h) solid var(--hair-c);overflow:hidden}
.mo .ball{position:absolute;inset-block:5px;inset-inline-start:5px;width:36px;border-radius:50%;background:var(--amber);border:var(--bw) solid var(--ink)}
.mo.play .ball{animation:mo-go 1.6s var(--e) infinite alternate}
@keyframes mo-go{to{inset-inline-start:calc(100% - 41px)}}
.mo .nm{display:flex;justify-content:space-between;font:600 12px var(--f-num);color:var(--text-2);direction:ltr}
/* icon grid */
.ig{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:560px;overflow:auto;padding:4px}
.ig button{display:grid;gap:8px;place-items:center;padding:14px 4px 10px;border-radius:var(--r-sm);border:var(--bw-h) solid var(--hair-c);background:var(--surface);font:500 10.5px/1.3 var(--f-num);color:var(--text-2);direction:ltr;word-break:break-all;text-align:center;transition:all var(--t-fast)}
.ig button:hover{border-color:var(--ol);background:var(--amber-bg);color:var(--text);transform:translateY(-2px)}
.ig .ic{width:26px;height:26px;color:var(--text)}
/* token table */
.tt{width:100%;font-size:var(--fs-13)}
.tt td,.tt th{padding:.5rem .8rem;border-block-end:var(--bw-h) solid var(--hair-c);text-align:start;vertical-align:middle}
.tt th{font:700 11px var(--f-display);letter-spacing:.08em;color:var(--text-2)}
.tt code{font:600 12px var(--f-num);direction:ltr;unicode-bidi:isolate;display:inline-block;background:var(--surface-2);padding:.1rem .5rem;border-radius:6px;cursor:pointer}
.tt .chipc{display:inline-block;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ink);vertical-align:middle;margin-inline-end:8px}
/* contrast */
.ct{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ct .p{border-radius:var(--r-md);padding:1rem;border:var(--bw-h) solid var(--hair-c);display:grid;gap:4px;font-size:var(--fs-14)}
.ct .p b{font:800 1.4rem var(--f-num);direction:ltr;text-align:start}
.ct .p .r{display:flex;justify-content:space-between;align-items:center;font:700 11px var(--f-num)}
/* phone frames in DS */
.phf{width:195px;height:422px;border-radius:30px;border:6px solid var(--ink);background:var(--ink);overflow:hidden;position:relative;box-shadow:var(--sh-2);flex:none}
.phf iframe{width:390px;height:844px;border:0;transform:scale(.5);transform-origin:top left;position:absolute;top:0;left:0;pointer-events:none;background:var(--paper)}
/* mini browser frame */
.bro{border:var(--bw) solid var(--ink);border-radius:var(--r-md);overflow:hidden;background:var(--ink);box-shadow:var(--sh-2)}
.bro .bar{height:28px;background:var(--ink-3);display:flex;gap:6px;align-items:center;padding-inline:12px}
.bro .bar i{width:9px;height:9px;border-radius:50%;background:#F5EEE2;opacity:.35}
.bro .vp{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--paper)}
.bro iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:top left;pointer-events:none}
/* section mini-diagrams */
.diag{display:grid;gap:6px;padding:12px;border:2px dashed var(--hair-c);border-radius:var(--r-md);font:600 11px var(--f-display);text-align:center}
.diag>div{padding:.5rem;border-radius:8px;border:var(--bw-h) solid var(--ol);background:var(--bg)}
.diag .a{background:var(--amber)}.diag .d{background:var(--ink);color:#F5EEE2}.diag .u{background:var(--dusk);color:#fff}.diag .r{background:var(--rust);color:#fff}.diag .s{background:var(--sage);color:#fff}.diag .w{background:var(--walnut);color:#fff}
@media (max-width:1100px){.ds-layout{grid-template-columns:1fr}.ds-side{display:none}.ds-top .ds-q{display:none}}
body.ds.side-show .ds-side{display:block;position:fixed;inset-inline-start:0;z-index:140;background:var(--bg);width:min(320px,88vw);box-shadow:var(--sh-pop)}
.ds-burger{display:none}
@media (max-width:1100px){.ds-burger{display:inline-grid}}
/* page-wide */
.ds-hero{padding-block:clamp(2.5rem,5vw,5rem);position:relative}
.ds-hero .display{max-width:15ch}
.principle{display:grid;gap:.6rem;padding:1.3rem;border-radius:var(--r-md);border:var(--bw) solid var(--ol);background:var(--surface);box-shadow:var(--sh-1);position:relative}
.principle .n{font:900 2.6rem/1 var(--f-num);color:var(--amber);-webkit-text-stroke:1.5px var(--ink);direction:ltr;text-align:start}
.principle h3{font-size:var(--fs-18)}
@media print{.ds-top,.ds-side{display:none}.ds-layout{display:block}}
/* forced-state helpers (documentation only) */
.btn.is-hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow-c)}
.btn.is-active{transform:translate(2px,2px);box-shadow:0 0 0 var(--shadow-c)}
.btn.is-focus,.inp.is-focus-v,.chip.is-focus{outline:3px solid var(--focus);outline-offset:3px}
.inp.is-focus{border-color:var(--ink);box-shadow:4px 4px 0 var(--amber);background:var(--card)}
.inp.is-hover{box-shadow:var(--sh-1)}
.ds-state{display:grid;gap:8px;justify-items:start}
.ds-state>small{font:700 10.5px var(--f-num);letter-spacing:.08em;color:var(--text-3);direction:ltr}

.ds-grid.top{align-items:start}
.spec-row .display{font-size:clamp(2rem,4vw,3.6rem)}.spec-row h1{font-size:clamp(1.8rem,3.2vw,2.9rem)}.spec-row h2{font-size:clamp(1.6rem,2.5vw,2.3rem)}
.ds-wrap{min-width:0}
/* app tab bar (documentation copy of the app.css component) */
.ds-demo .tabbar{position:static;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px 14px;background:var(--surface);border-block-start:1.5px solid var(--hair-c)}
.ds-demo .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 13px var(--f-display);color:var(--text-2);min-height:44px;justify-content:center}
.ds-demo .tabbar .ti{position:relative;width:52px;height:30px;border-radius:15px;display:grid;place-items:center;border:2px solid transparent}
.ds-demo .tabbar a.on{color:var(--text)}.ds-demo .tabbar a.on .ti{background:var(--amber);border-color:var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.ds-demo .tabbar .badge-n{position:absolute;top:-6px;inset-inline-end:2px}

.ds-main code.ltr{display:inline;word-break:break-word}
.ds-main .card,.ds-main li{min-width:0;overflow-wrap:anywhere}
@media (max-width:760px){.spec-row .h1{font-size:1.8rem}}
@media (max-width:560px){.ds-top .ver,.ds-top .hide-m,.ds-top .logo .lt span{display:none}.ds-top{gap:8px;padding-inline:10px}}