:root{
  --paper:#F1ECE0; --paper-deep:#E4DCC9; --card:#F7F3EA; --bg:#F1ECE0;
  --ink:#17262B; --ink-soft:#5C6E70;
  --rubric:#B4322A; --verdigris:#2E7263; --gold:#A8842C;
  --rule:rgba(23,38,43,.16);
  --paper-rgb:241,236,224; --ink-rgb:23,38,43;
  --ar:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --la:"Karla",system-ui,sans-serif;
  --ut:"JetBrains Mono",ui-monospace,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);        /* settle curve — a stand-in for a critically-damped spring where a JS spring isn't worth the wiring */
  --press:120ms; --settle:220ms;
}
/* Same manuscript — read at night. Ink well instead of paper, same three accents
   muted for the darker ground. Follows the OS by default (the media query);
   :not([data-theme="light"]) lets a manual "Light" choice in Settings override
   an OS set to dark, and the [data-theme="dark"] rule below covers the reverse —
   "Dark" chosen manually while the OS itself is still in light mode. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1B1815; --paper-deep:#221E19; --card:#211D19; --bg:#1B1815;
    --ink:#E4DBC8; --ink-soft:#A69C8C;
    --rubric:#B96257; --verdigris:#4C8F7F; --gold:#BB9855;
    --rule:rgba(228,219,200,.13);
    --paper-rgb:27,24,21; --ink-rgb:228,219,200;
  }
}
:root[data-theme="dark"]{
  --paper:#1B1815; --paper-deep:#221E19; --card:#211D19; --bg:#1B1815;
  --ink:#E4DBC8; --ink-soft:#A69C8C;
  --rubric:#B96257; --verdigris:#4C8F7F; --gold:#BB9855;
  --rule:rgba(228,219,200,.13);
  --paper-rgb:27,24,21; --ink-rgb:228,219,200;
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;overflow-x:hidden}
html,body{overscroll-behavior:none} /* this is an app shell, not a document — no page-wide pull-to-refresh/rubber-band */
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--la);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
h1,.hero h1{letter-spacing:-0.01em} /* large Latin display text tightens; never on .ar — tracking breaks Arabic letter joining */
input,textarea,select{font-size:16px} /* the floor: anything smaller and iOS Safari zooms the page in on focus */
:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:4px}
/* Touchscreens leave a button focused after a tap, so the ring lingers with no
   purpose. Keyboard users on a pointer device still get one. */
@media (hover:none) and (pointer:coarse){
  :focus-visible,button:focus,a:focus,[role=button]:focus,select:focus{outline:none}
}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),
[role=button]:focus:not(:focus-visible){outline:none}
/* Tapping a button in iOS Safari leaves it focused; an inset ring keeps that
   from bleeding into the element next to it. */
button:focus:not(:focus-visible),a:focus:not(:focus-visible),
[role=button]:focus:not(:focus-visible){outline:none}
a{color:inherit;text-decoration:none}
.label{font-family:var(--ut);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.tag{display:inline-block;font-family:var(--ut);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:2px;padding:3px 7px}

/* nav — a translucent layer floating over content, not an opaque strip consuming it */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 30px;border-bottom:1px solid var(--rule);position:sticky;top:0;
  background:rgba(var(--paper-rgb),.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);z-index:5}
@media (prefers-reduced-transparency:reduce){
  .nav,.tabbar,.arkb{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.brand{font-family:var(--ar);font-size:20px;font-weight:600;direction:rtl;line-height:1.7;padding:2px 0;
  display:inline-flex;align-items:center;gap:10px}
.brand .bmark{width:28px;height:28px;flex:0 0 auto;border-radius:7px;background:var(--ink);position:relative;
  display:inline-block}
.brand .bmark::before{content:'ر';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ar);font-size:19px;line-height:1;color:var(--paper);padding-bottom:3px}
.brand .bmark::after{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--rubric)}
.brand span{color:var(--rubric)}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{font-size:13px;color:var(--ink-soft)}
.navlinks a.active{color:var(--ink);border-bottom:2px solid var(--verdigris);padding-bottom:2px}

/* buttons */
.btn{font-family:var(--la);font-size:15px;font-weight:500;border-radius:3px;border:1px solid var(--verdigris);background:var(--verdigris);color:var(--paper);padding:12px 26px;cursor:pointer;
  transition:background .18s,border-color .18s,transform var(--press) var(--ease-out);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.btn.ghost{background:transparent;color:var(--verdigris)}
.btn.danger{border-color:var(--rubric);background:transparent;color:var(--rubric)}
/* Respond the instant a finger lands, not when it lifts — the single biggest thing
   that separated every button here from feeling native. Works identically on touch and mouse. */
.btn:active{transform:scale(.97)}
.btn.ghost:active{background:rgba(var(--ink-rgb),.06)}

.wrap{max-width:1000px;margin:0 auto;padding:0 30px}

@media (max-width:860px){
  body{-webkit-tap-highlight-color:transparent}
  button,a{touch-action:manipulation}
  .nav{padding:11px 16px;flex-wrap:wrap;gap:8px}
  .brand{font-size:19px}
  .navlinks{gap:13px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{font-size:12.5px;white-space:nowrap;padding:4px 0}
  .wrap{padding:0 16px}
  .btn{min-height:46px;padding:12px 20px;font-size:15px}
}
@media (max-width:400px){ .navlinks{gap:11px} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* Bottom bar: three destinations within thumb reach, mobile only. */
.tabbar{display:none}
@media (max-width:860px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(var(--paper-rgb),.82);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -6px 14px -10px rgba(var(--ink-rgb),.35)}
  .tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px 7px;
    font-size:10px;color:var(--ink-soft);text-decoration:none;min-height:52px;justify-content:center;text-align:center;
    touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform var(--press) var(--ease-out)}
  .tabbar a:active{transform:scale(.94)}
  .tabbar a .ti{font-family:var(--ar);font-size:15px;line-height:1.5;white-space:nowrap}
  .tabbar a.on{color:var(--ink)}
  .tabbar a.on .ti{color:var(--rubric)}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .nav .navlinks{display:none}
  .nav{justify-content:center;padding:12px 16px}
}

/* Progress ring for the vocab session */
.ring{--pct:0;width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--verdigris) calc(var(--pct)*1%), var(--paper-deep) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.ring::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--bg)}
.ring span{position:relative;z-index:1;font-family:var(--ut);font-size:12px;color:var(--ink)}
.sessionbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sessionbar .meta{min-width:0}
.sessionbar .meta b{display:block;font-size:15px}
.sessionbar .meta span{font-size:12.5px;color:var(--ink-soft)}

/* Pointer devices only — :hover sticks after a tap on touchscreens. */
@media (hover:hover) and (pointer:fine){

.navlinks a:hover{color:var(--ink)}
.btn:hover{background:#265f52;transform:translateY(-1px)}
.btn.ghost:hover{background:rgba(46,114,99,.08)}
.btn.danger:hover{background:rgba(180,50,42,.08)}
}


/* Audio settings — same control on every page */
.headrow{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.cog{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--rule);
  border-radius:6px;padding:8px 13px;cursor:pointer;color:var(--ink-soft);font-family:var(--la);font-size:13px;min-height:42px;
  touch-action:manipulation;transition:background .15s,border-color .15s,color .15s,transform var(--press) var(--ease-out)}
.cog:active{transform:scale(.96)}
.cog[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* A settings panel opening is a tap, not a drag — no finger to hand velocity off from,
   so a plain settle transition (not a JS spring) is the right tool here. It still
   materializes rather than just appearing: scale and opacity together, from the trigger. */
.voicebox{display:flex;flex-direction:column;gap:10px;min-width:280px;transform-origin:top left;
  background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:14px 16px;margin-top:10px;
  opacity:0;transform:scale(.96) translateY(-4px);max-height:0;overflow:hidden;visibility:hidden;
  transition:opacity var(--settle) var(--ease-out),transform var(--settle) var(--ease-out),max-height var(--settle) var(--ease-out),visibility var(--settle);
  pointer-events:none}
body.gear-open .voicebox{opacity:1;transform:scale(1) translateY(0);max-height:600px;visibility:visible;pointer-events:auto}
.voicerow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.voicerow select{max-width:190px;border:1px solid var(--rule);border-radius:4px;background:var(--bg);
  height:38px;padding:0 8px;font-family:var(--la);font-size:13px;color:var(--ink)}
.voicerow input[type=range]{accent-color:var(--verdigris);width:110px}
.warn{font-size:12px;color:var(--rubric);max-width:46ch;line-height:1.5}
.warn b{color:var(--ink)}
.acctrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--rule)}
.acctrow .btn{min-height:40px}
.wdismiss{font-family:var(--la);font-size:11px;border:1px solid var(--rule);background:transparent;
  border-radius:3px;padding:3px 9px;margin-top:6px;cursor:pointer;color:var(--ink);display:inline-block}
@media (max-width:860px){ .headrow{flex-direction:column} .voicebox{min-width:0;width:100%} .cog{width:100%;justify-content:center} }


/* Account row — sign out lives here now the settings panel is gone */
.acctbar{max-width:1000px;margin:34px auto 0;padding:16px 30px 0;border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:860px){ .acctbar{padding:14px 16px 0;margin-top:26px} .acctbar .btn{min-height:44px} }
@media (min-width:861px){ .acctbar{display:none} }   /* desktop already has Log out in the top nav */