/* help.kluvan.com: the calm white template of the Kluvan UI spec (docs\kluvan\ui\tokens.css, brand kit 14 Oct 2026).
   Logical properties only, so Arabic and Urdu mirror with no extra sheet. */
:root{
  color-scheme:light;
  --kv-blue:#5056E6; --kv-purple:#7950DE; --kv-violet:#B244D9; --kv-ink:#171B32; --kv-paper:#F7F8FC;
  --kv-gradient:linear-gradient(90deg,var(--kv-blue),var(--kv-purple) 50%,var(--kv-violet));
  --primary:#5056E6; --primary-hover:#4349D6; --on-primary:#fff;
  --bg:#F7F8FC; --surface:#fff; --surface-2:#FAFBFD; --sunken:#F0F2F7;
  --border:#E4E7EF; --border-strong:#D1D6E2; --control:#8A90A3;
  --text:#171B32; --text-2:#555B71; --text-3:#6A7086;
  --ok:#17744A; --ok-bg:#E8F5EE; --warn:#A15C07; --warn-bg:#FFF4E5; --bad:#C0362C; --bad-bg:#FDECEA; --info:#2457C5; --info-bg:#EAF0FD;
  --focus:#4349D6; --accent:#5056E6;
  --font-latin:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font:var(--font-latin);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --shadow-1:0 1px 2px rgb(23 27 50 / .06);
  --shadow-2:0 4px 16px rgb(23 27 50 / .08),0 1px 3px rgb(23 27 50 / .06);
  --lh:1.6; --gutter:16px; --max:1200px;
}
html[lang=ar]{ --font:"IBM Plex Sans Arabic","Segoe UI","Noto Sans Arabic",Tahoma,var(--font-latin); --lh:1.75 }
html[lang=ur]{ --font:"Noto Naskh Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,var(--font-latin); --lh:1.95 }
html[lang=hi]{ --font:var(--font-latin),"Noto Sans Devanagari",sans-serif; --lh:1.75 }
html[lang=bn]{ --font:var(--font-latin),"Noto Sans Bengali",sans-serif; --lh:1.75 }
html[lang=zh]{ --font:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif; --lh:1.8 }
html[lang=ml]{ --font:var(--font-latin),"Noto Sans Malayalam",sans-serif; --lh:1.8 }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:76px }
body{ margin:0; background:var(--bg); color:var(--text); font:15px/var(--lh) var(--font); }
html[lang=ar] body,html[lang=ur] body{ font-size:16px }
img{ max-width:100%; height:auto }
a{ color:var(--primary); text-underline-offset:2px }
a:hover{ color:var(--primary-hover) }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }
code,kbd{ font-family:var(--mono); font-size:.9em; background:var(--sunken); padding:.1em .35em; border-radius:4px; direction:ltr; unicode-bidi:isolate }
bdi,.num{ direction:ltr; unicode-bidi:isolate }
.skip{ position:absolute; inset-inline-start:-9999px; top:8px; background:var(--surface); padding:8px 12px; z-index:50 }
.skip:focus{ inset-inline-start:8px }
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---- top bar ---- */
.top{ position:sticky; top:0; z-index:20; background:var(--surface); border-block-end:1px solid var(--border) }
.top .wrap{ display:flex; align-items:center; gap:16px; min-height:60px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex:none }
.brand img{ display:block; width:116px; height:auto }
.brand span{ font-weight:600; color:var(--text-2); padding-inline-start:10px; border-inline-start:1px solid var(--border-strong); line-height:1.2 }
.topsearch{ flex:1; max-width:440px; position:relative }
.topsearch input{ width:100%; height:38px; border:1px solid var(--border-strong); border-radius:var(--r-md); padding-inline:36px 12px; font:inherit; font-size:14px; background:var(--surface-2) url("search.svg") no-repeat; background-size:16px; background-position:12px 50% }
html[dir=rtl] .topsearch input{ background-position:calc(100% - 12px) 50% }
.topsearch input:focus{ background-color:var(--surface); border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgb(80 86 230 / .15) }
.topnav{ display:flex; gap:4px; margin-inline-start:auto; align-items:center }
.topnav a{ color:var(--text-2); text-decoration:none; font-size:14px; padding:8px 10px; border-radius:var(--r-sm); white-space:nowrap }
.topnav a:hover{ background:var(--sunken); color:var(--text) }
.lang{ position:relative }
.lang summary{ list-style:none; cursor:pointer; font-size:14px; color:var(--text-2); padding:8px 10px; border-radius:var(--r-sm); border:1px solid var(--border) ; white-space:nowrap }
.lang summary::-webkit-details-marker{ display:none }
.lang[open] summary{ background:var(--sunken) }
.lang ul{ position:absolute; inset-inline-end:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); list-style:none; margin:0; padding:6px; min-width:200px; z-index:30 }
.lang li a{ display:flex; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:var(--r-sm); color:var(--text); text-decoration:none; font-size:14px }
.lang li a:hover,.lang li a[aria-current]{ background:var(--sunken) }
.lang li small{ color:var(--text-3) }
.menu-btn{ display:none }

/* ---- search dropdown ---- */
.sresults{ position:absolute; inset-inline:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); list-style:none; margin:0; padding:6px; max-height:70vh; overflow:auto; z-index:30 }
.sresults[hidden]{ display:none }
.sresults a{ display:block; padding:8px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--text) }
.sresults a:hover,.sresults a[aria-selected=true]{ background:var(--sunken) }
.sresults b{ display:block; font-weight:600; font-size:14px }
.sresults small{ color:var(--text-3); font-size:12px }
.sresults .empty{ padding:10px; color:var(--text-2); font-size:14px }

/* ---- layout ---- */
main{ display:block }
.page{ display:grid; grid-template-columns:240px minmax(0,1fr) 200px; gap:40px; padding-block:28px 56px }
.page.no-toc{ grid-template-columns:240px minmax(0,1fr) }
.side{ font-size:14px }
.side nav{ position:sticky; top:84px; max-height:calc(100vh - 100px); overflow:auto; padding-inline-end:6px }
.side h2{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin:0 0 8px; font-weight:600 }
html[lang=ar] .side h2,html[lang=ur] .side h2{ text-transform:none; letter-spacing:0; font-size:13px }
.side ul{ list-style:none; margin:0 0 18px; padding:0 }
.side li a{ display:block; padding:6px 10px; border-radius:var(--r-sm); color:var(--text-2); text-decoration:none; border-inline-start:2px solid transparent }
.side li a:hover{ background:var(--sunken); color:var(--text) }
.side li a[aria-current=page]{ background:color-mix(in srgb,var(--accent) 10%,white); color:var(--text); border-inline-start-color:var(--accent); font-weight:600 }
.side details summary{ cursor:pointer; font-weight:600; padding:8px 0; display:none }
.toc{ font-size:13px }
.toc nav{ position:sticky; top:84px }
.toc h2{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin:0 0 8px }
html[lang=ar] .toc h2,html[lang=ur] .toc h2{ text-transform:none; letter-spacing:0 }
.toc ul{ list-style:none; margin:0; padding:0; border-inline-start:1px solid var(--border) }
.toc a{ display:block; padding:4px 12px; color:var(--text-2); text-decoration:none }
.toc a:hover{ color:var(--primary) }

/* ---- breadcrumbs ---- */
.crumbs{ font-size:13px; color:var(--text-3); margin:0 0 14px }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.crumbs li+li::before{ content:"›"; margin-inline-end:6px; color:var(--border-strong) }
html[dir=rtl] .crumbs li+li::before{ content:"‹" }
.crumbs a{ color:var(--text-2); text-decoration:none }
.crumbs a:hover{ color:var(--primary); text-decoration:underline }

/* ---- article ---- */
.article{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 40px; min-width:0 }
.article h1{ font-size:30px; line-height:1.25; margin:0 0 10px; letter-spacing:-.01em }
html[lang=ar] .article h1,html[lang=ur] .article h1{ letter-spacing:0; line-height:1.5 }
.article .lead{ font-size:17px; color:var(--text-2); margin:0 0 20px }
.article h2{ font-size:21px; margin:34px 0 10px; padding-top:6px; line-height:1.35 }
.article h3{ font-size:17px; margin:24px 0 8px }
.article h4{ font-size:15px; margin:18px 0 6px }
.article p,.article li{ max-width:72ch }
.article ul,.article ol{ padding-inline-start:24px }
.article li{ margin:6px 0 }
.article ol>li::marker{ font-weight:600; color:var(--primary) }
.article table{ border-collapse:collapse; width:100%; margin:16px 0; font-size:14px; display:block; overflow-x:auto }
.article th,.article td{ border-block-end:1px solid var(--border); padding:8px 10px; text-align:start; vertical-align:top }
.article th{ background:var(--surface-2); font-weight:600 }
.article hr{ border:0; border-block-start:1px solid var(--border); margin:28px 0 }
.article blockquote{ margin:18px 0; padding:12px 16px; background:var(--info-bg); border-inline-start:3px solid var(--info); border-radius:var(--r-md) }
.article blockquote.important{ background:var(--warn-bg); border-inline-start-color:var(--warn) }
.article blockquote p{ margin:4px 0 }
.badges{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--sunken); color:var(--text-2) }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor }
.badge.early{ background:#F1EEFD; color:#5B3FC4 }
.badge.region{ background:var(--ok-bg); color:var(--ok) }
.badge.en{ background:var(--sunken); color:var(--text-2) }
.callout{ margin:0 0 20px; padding:12px 16px; border-radius:var(--r-md); font-size:14px; background:var(--surface-2); border:1px solid var(--border) }
.callout.early{ background:#F7F5FE; border-color:#E2DCFA }
.callout.region{ background:#F2FAF5; border-color:#CDE9D8 }

/* ---- screenshots and art ---- */
.shot{ margin:20px 0; }
.shot img{ display:block; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-1) }
.shot figcaption{ font-size:13px; color:var(--text-3); margin-top:6px }
.shot.ph .box{ display:flex; flex-direction:column; justify-content:center; gap:6px; border:1.5px dashed var(--border-strong); border-radius:var(--r-md); background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 12px,var(--sunken) 12px,var(--sunken) 24px); padding:24px; min-height:140px; color:var(--text-2); font-size:14px }
.shot.ph .box b{ font-family:var(--mono); font-size:12px; color:var(--text-3); direction:ltr; unicode-bidi:isolate }
.art{ display:block; width:96px; height:96px; object-fit:contain }
.art-ph{ display:flex; align-items:center; justify-content:center; width:96px; height:96px; border:1.5px dashed var(--border-strong); border-radius:var(--r-lg); font-family:var(--mono); font-size:10px; color:var(--text-3); text-align:center; padding:6px; direction:ltr }

/* ---- helpful + support ---- */
.helpful{ margin-top:36px; padding-top:20px; border-block-start:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.helpful p{ margin:0; font-weight:600 }
.helpful .q{ display:flex; flex-wrap:wrap; align-items:center; gap:12px }
[hidden]{ display:none!important }
.btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding-inline:14px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font:inherit; font-size:14px; cursor:pointer; text-decoration:none }
.btn:hover{ background:var(--sunken); color:var(--text) }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary) }
.btn.primary:hover{ background:var(--primary-hover); color:var(--on-primary) }
.btn.wa{ background:#1F8A4C; border-color:#1F8A4C; color:#fff }
.btn.wa:hover{ background:#18703D; color:#fff }
.helpful .thanks{ color:var(--ok); font-weight:500 }
.support{ margin-top:24px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px }
.support h2{ font-size:16px; margin:0 0 4px }
.support p{ margin:0; color:var(--text-2); font-size:14px; max-width:60ch }
.related{ margin-top:28px }
.related h2{ font-size:16px }
.related ul{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px }
.related li{ margin:0 }
.related a{ display:block; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:var(--text); background:var(--surface) }
.related a:hover{ border-color:var(--primary) }

/* ---- home ---- */
.hero{ background:var(--surface); border-block-end:1px solid var(--border); padding-block:56px 48px; text-align:center }
.hero h1{ font-size:40px; margin:0 0 10px; letter-spacing:-.02em; background:var(--kv-gradient); -webkit-background-clip:text; background-clip:text; color:transparent }
html[lang=ar] .hero h1,html[lang=ur] .hero h1{ letter-spacing:0; line-height:1.5 }
.hero p{ color:var(--text-2); font-size:17px; margin:0 auto 24px; max-width:60ch }
.hero .bigsearch{ max-width:620px; margin:0 auto; position:relative; text-align:start }
.hero .bigsearch input{ width:100%; height:52px; font:inherit; font-size:16px; border:1px solid var(--border-strong); border-radius:var(--r-lg); padding-inline:48px 16px; background:var(--surface) url("search.svg") no-repeat; background-size:20px; background-position:16px 50%; box-shadow:var(--shadow-1) }
html[dir=rtl] .hero .bigsearch input{ background-position:calc(100% - 16px) 50% }
.hero .bigsearch input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgb(80 86 230 / .15) }
.hero .hint{ font-size:13px; color:var(--text-3); margin-top:10px }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:32px 0 }
.card{ display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; text-decoration:none; color:var(--text); transition:border-color .16s,box-shadow .16s }
.card:hover{ border-color:var(--primary); box-shadow:var(--shadow-2); color:var(--text) }
.card .art,.card .art-ph{ width:56px; height:56px; flex:none }
.card .art-ph{ font-size:8px }
.card h2,.card h3{ font-size:16px; margin:0 0 4px }
.card p{ margin:0; color:var(--text-2); font-size:14px }
.card small{ color:var(--text-3); font-size:12px }
h2.band{ font-size:22px; margin:40px 0 4px }
p.band{ color:var(--text-2); margin:0 0 8px }
.fam{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin:22px 0 10px; font-weight:600 }
html[lang=ar] .fam,html[lang=ur] .fam{ text-transform:none; letter-spacing:0; font-size:13px }
.apps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px }
.app{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:var(--text); font-weight:500 }
.app:hover{ border-color:var(--accent,var(--primary)); color:var(--text) }
.tile{ flex:none; width:32px; height:32px; border-radius:8px; background:var(--accent,var(--primary)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; overflow:hidden }
.tile img{ width:32px; height:32px; object-fit:cover; background:#fff }
.app small{ display:block; color:var(--text-3); font-weight:400; font-size:12px }
.list{ list-style:none; padding:0; margin:16px 0; display:grid; gap:10px }
.list a{ display:block; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:var(--text) }
.list a:hover{ border-color:var(--primary) }
.list b{ display:block; font-weight:600 }
.list span{ color:var(--text-2); font-size:14px }
.list .badge{ margin-inline-start:8px; vertical-align:middle }

/* ---- errors ---- */
.errfilter{ position:sticky; top:61px; z-index:5; background:var(--surface); padding:12px 0; margin:0 0 8px; border-block-end:1px solid var(--border) }
.errfilter input{ width:100%; height:42px; font:inherit; border:1px solid var(--border-strong); border-radius:var(--r-md); padding-inline:12px }
.err{ border-block-start:1px solid var(--border); padding-block:16px 8px }
.err h3{ font-size:17px; margin:0 0 6px }
.err h3 .codes{ display:block; font-family:var(--mono); font-size:12px; color:var(--text-3); font-weight:500; margin-bottom:2px; direction:ltr; unicode-bidi:isolate; text-align:start }
.err h3 .codes a{ color:inherit; text-decoration:none }
.err:target{ background:color-mix(in srgb,var(--primary) 5%,white); outline:2px solid color-mix(in srgb,var(--primary) 30%,white); outline-offset:8px; border-radius:4px }
.err .anchor{ display:block; position:relative; top:-80px; visibility:hidden }
.err .staff{ color:var(--text-3); font-size:14px }
.err-retired{ margin-block-start:32px; border-block-start:1px solid var(--border); padding-block-start:12px }
.err-retired > summary{ cursor:pointer; font-weight:600; font-size:17px; color:var(--text-2, inherit) }
.err-retired[open] > summary{ margin-block-end:8px }
.area-intro{ color:var(--text-2) }

/* ---- footer ---- */
.foot{ border-block-start:1px solid var(--border); background:var(--surface); padding-block:28px; font-size:13px; color:var(--text-3) }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center }
.foot a{ color:var(--text-2); text-decoration:none }
.foot a:hover{ color:var(--primary) }
.foot nav{ display:flex; flex-wrap:wrap; gap:14px }

/* ---- responsive ---- */
@media (max-width:1180px){
  .page{ grid-template-columns:220px minmax(0,1fr) }
  .toc{ display:none }
}
@media (max-width:860px){
  .page,.page.no-toc{ grid-template-columns:minmax(0,1fr); gap:16px; padding-block:16px 40px }
  .side nav{ position:static; max-height:none }
  .side details summary{ display:block }
  .side details:not([open]) .side-body{ display:none }
  .side details{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:4px 14px }
  .topnav a.opt{ display:none }
  .article{ padding:20px 18px; border-radius:var(--r-md) }
  .article h1{ font-size:24px }
  .hero{ padding-block:36px 32px }
  .hero h1{ font-size:30px }
}
@media (max-width:640px){
  .top .wrap{ flex-wrap:wrap; gap:8px 10px; padding-block:8px }
  .brand img{ width:96px }
  .topsearch{ order:3; flex-basis:100%; max-width:none }
  .topnav{ gap:2px }
  .topnav a{ padding:6px 8px }
  .errfilter{ top:0; position:static }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; scroll-behavior:auto!important } }
@media print{ .top,.side,.toc,.helpful,.support,.foot,.related{ display:none } .page{ display:block } .article{ border:0; padding:0 } }
.article .crumbs ol{ padding:0 }
.article ul.list{ padding:0 }
.article .list li{ max-width:none }
#search-page-form{ display:flex; gap:8px; margin:0 0 8px }
#search-page-form input{ flex:1; height:42px; font:inherit; border:1px solid var(--border-strong); border-radius:var(--r-md); padding-inline:12px }
#search-page-form input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgb(80 86 230 / .15) }
#search-page-form .btn{ height:42px }
.consent{ position:fixed; inset-inline:16px; bottom:16px; z-index:40; max-width:560px; margin-inline:auto; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:14px 16px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; font-size:14px }
.consent p{ margin:0; flex:1 1 260px; color:var(--text-2) }
.consent .row{ display:flex; gap:8px }
@media print{ .consent{ display:none } }