/* TwentyDZ skin for the older worlds (2026-10-03, Claude): index.html (lessons hub, textbook, Arabic, English
   archive, exam, board, physics), student/, en/, arabic-academy/book.
   Loaded last on those pages, after ../ui/tdz.css. It does not rewrite the worlds: it feeds the variables they
   already read from the pupil's look (clean, night, bold) and restyles their shared chrome. */

/* ---------- the variables the older worlds read, filled from the look ---------- */
html body[data-studio],html body.tdz-skin{
  --paper:var(--bg);--card:var(--surface-2);--ink:var(--text);--ink-soft:var(--muted);--pen:var(--accent);--pen-soft:var(--accent-2);
  --line:var(--border-2);--red:var(--accent);--red-soft:var(--accent-2);--green:var(--ok);--green-soft:var(--ok-bg);--hl:#FFD93D;--hl-soft:var(--accent-2);
  --margin:var(--accent);--grid:transparent;--atelier:var(--text);--atelier-soft:var(--surface-2);--orange:var(--accent);
  --body:var(--font)!important;--display:var(--head);--ruqaa:var(--head);
  background:var(--bg-img),var(--bg)!important;background-color:var(--bg)!important;background-attachment:fixed!important;color:var(--text)!important;font-family:var(--font)}
html[data-look="clean"] body[data-studio],html[data-look="clean"] body.tdz-skin{--card:#FFFFFF}
html[data-look="bold"] body[data-studio],html[data-look="bold"] body.tdz-skin{--card:#FFFFFF;--line:#111111}
body[data-studio] :is(button,input,select,textarea),body.tdz-skin :is(button,input,select,textarea){font-family:var(--font)}
body[data-studio] :is(h1,h2,h3),body.tdz-skin :is(h1,h2,h3){font-family:var(--head)!important;font-weight:var(--head-w)!important;color:var(--text)}
/* the board keeps its own scene */
body[data-studio="board"]{background:#1F2B26!important}

/* ---------- top bar: same as the app shell ---------- */
.studio-nav,body.tdz-skin .suite-bar,body.tdz-skin>.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;max-width:none!important;margin:0!important;padding:12px clamp(14px,4vw,36px)!important;
  background:color-mix(in srgb,var(--bg) 82%,transparent)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:0!important;box-shadow:none!important}
html[data-look="bold"] :is(.studio-nav,body.tdz-skin .suite-bar,body.tdz-skin>.bar){border-bottom:3px solid #111!important;background:var(--bg)!important}
html[data-look="night"] :is(.studio-nav,body.tdz-skin .suite-bar,body.tdz-skin>.bar){border-bottom:1px solid rgba(255,255,255,.08)!important}
:is(.studio-nav .brand,body.tdz-skin .wordmark,body.tdz-skin>.bar .brand){display:flex;align-items:center;gap:8px;text-decoration:none;direction:ltr;font-family:var(--head)!important;font-weight:var(--head-w)!important;font-size:21px!important;color:var(--text)!important}
:is(.studio-nav .brand-symbol,body.tdz-skin .wordmark i,body.tdz-skin>.bar .brand i){font-style:normal;width:38px;height:38px;padding:0!important;border-radius:12px!important;display:grid;place-items:center;background:var(--accent-fill)!important;color:var(--accent-ink)!important;font-size:16px!important;font-family:var(--head)!important}
html[data-look="bold"] :is(.studio-nav .brand-symbol,body.tdz-skin .wordmark i,body.tdz-skin>.bar .brand i){border:3px solid #111;box-shadow:3px 3px 0 #111}
:is(body.tdz-skin .wordmark b,body.tdz-skin>.bar .brand b){color:var(--accent-text)!important;font-weight:inherit}
.studio-nav .brand>span:last-child{font-family:var(--head);font-weight:var(--head-w);font-size:21px;color:var(--text)}
.studio-nav .brand small{display:none}
.studio-nav nav a{font-family:var(--font);font-weight:700;color:var(--muted)!important;border-radius:999px;padding:8px 14px!important;text-decoration:none;background:none}
.studio-nav nav a:hover{color:var(--text)!important}
.studio-nav .preferences summary{border:var(--bw) solid var(--border-2);border-radius:999px;font-weight:700;color:var(--text);background:var(--surface)}
html[data-look="clean"] .studio-nav .preferences summary{border:2px solid var(--border-2)}
body.tdz-skin>.bar>a:last-child,body.tdz-skin .suite-bar>a:last-child{font-weight:700;color:var(--muted)!important;text-decoration:none}
.tdz-lookslot{display:flex;margin-inline-start:auto}

/* ---------- buttons, labels, cards ---------- */
:is(body[data-studio],body.tdz-skin) :is(.btn,.primary-link,button.primary,.ink-button,.primary){background:var(--btn)!important;color:var(--btn-ink)!important;border:var(--btn-bw) solid var(--border)!important;border-radius:var(--r-sm)!important;box-shadow:var(--btn-shadow)!important;font-weight:800}
:is(body[data-studio],body.tdz-skin) :is(.btn,.primary-link,.ink-button):active{transform:var(--press);box-shadow:none!important}
:is(body[data-studio],body.tdz-skin) .eyebrow{font-family:var(--font);font-size:14px;font-weight:800;color:var(--accent-text)!important}
body[data-studio] :is(.world,.lesson-row,.exam-config,.unit,.today-strip,.city-entry){background:var(--surface)!important;border:var(--bw) solid var(--border)!important;border-radius:var(--r)!important;box-shadow:var(--shadow)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--text)}
html[data-look="clean"] body[data-studio] :is(.world,.lesson-row,.exam-config,.unit,.today-strip,.city-entry){background:#fff!important}
body.tdz-skin :is(.notebook,main.notebook){background:var(--surface)!important;border:var(--bw) solid var(--border)!important;border-radius:calc(var(--r) + 4px)!important;box-shadow:var(--shadow)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);background-image:none!important;color:var(--text)}
html[data-look="clean"] body.tdz-skin :is(.notebook,main.notebook){background:#fff!important}
body.tdz-skin :is(.notebook,main.notebook)::before{display:none}
body.tdz-skin :is(.margin-mark,.margin-note){display:none}
body.tdz-skin .tabs a{font-weight:800;border-radius:999px!important;border:var(--bw) solid var(--border-2)!important;background:var(--surface-2)!important;color:var(--text)!important;margin-bottom:6px}
body.tdz-skin .tabs a[aria-current]{background:var(--btn)!important;color:var(--btn-ink)!important}
body.tdz-skin .tabs{border-bottom:0!important}
body.tdz-skin :is(input,select,textarea){border-radius:var(--r-sm)!important;border:var(--bw) solid var(--border-2)!important;background:var(--surface-2)!important;color:var(--text)!important}
html[data-look="clean"] body.tdz-skin :is(input,select,textarea){border:2px solid var(--border-2)!important;background:#fff!important}

/* ---------- the embedded textbooks ---------- */
body.tdz-book{--green:var(--accent);--ink:var(--text)}
body.tdz-book header{background:var(--surface)!important;color:var(--text)!important;border-bottom:var(--bw) solid var(--border)}
body.tdz-book header a{color:var(--text)!important}
html[data-look="clean"] body.tdz-book header{background:#fff!important;border-bottom:1px solid #ECEEF4}
body.tdz-book .toolbar{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;border-bottom:0!important}
body.tdz-book :is(button,select){border-radius:var(--r-sm);border:var(--bw) solid var(--border-2);background:var(--surface);color:var(--text);font-weight:700}
html[data-look="clean"] body.tdz-book :is(button,select){border:2px solid var(--border-2);background:#fff}

/* ---------- spots the older worlds paint with fixed light colours ---------- */
body[data-studio] nav[aria-label="اختيار المادة"]{background:var(--surface)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:var(--r-sm);margin:10px clamp(14px,3vw,24px)}
body[data-studio] nav[aria-label="اختيار المادة"] a{color:var(--muted);font-weight:700;text-decoration:none}
body[data-studio] nav[aria-label="اختيار المادة"] a[aria-current]{color:var(--accent-text)}
.studio-nav .preferences>div{background:var(--surface-2)!important;color:var(--text)!important;border:var(--bw) solid var(--border-2);border-radius:var(--r-sm)}
html[data-look="night"] .studio-nav .preferences>div{background:#15183A!important}
:is(body[data-studio],body.tdz-skin) select{background:var(--surface-2)!important;color:var(--text)!important}
html[data-look="night"] :is(body[data-studio],body.tdz-skin) select option{background:#15183A;color:#F2F3FF}
body.tdz-skin :is(.provenance,.example){background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--border-2)!important}
html[data-look="clean"] body.tdz-skin :is(.provenance,.example){background:#F7F8FB!important}
html[data-look="bold"] body.tdz-skin :is(.provenance,.example){background:#FFF1C9!important;border:3px solid #111!important}

/* pages that paint their own light scene opt in with body.tdz-keep-light: in the night look they keep the light tokens */
html[data-look="night"] body.tdz-keep-light{
  --bg:#F5F6FA;--bg-img:none;--surface:#FFFFFF;--surface-2:#F0F1F6;--bw:0px;--border:transparent;--border-2:#E3E5EE;
  --shadow:0 1px 2px rgba(20,22,31,.06),0 14px 32px -20px rgba(20,22,31,.22);--blur:none;
  --text:#14161F;--muted:#6B7083;--soft:#3A3F52;--accent-2:#FFE9DE;--accent-text:#C2501C;--ok-bg:#E6F8F0;--ok-ink:#0B6B47;--track:#E3E5EE;color-scheme:light}