/* DesignTube — Room Plan brand (Dezinly)
   Tier 1 primitives → Tier 2 semantic → Tier 3 component tokens.
   Hex values live ONLY in the primitives block. Use logical properties only. */

/* ---------- Fonts ----------
   Brand font is Thmanyah. Its license must be confirmed for web use before it is
   self-hosted (see DESIGNTUBE_REBRAND.md). Until then we ask for a locally
   installed Thmanyah and fall back to open-licensed IBM Plex Sans Arabic and
   Noto Naskh Arabic (OFL, shipped in /fonts). */
@font-face{font-family:"DT Sans";src:local("Thmanyah Sans"),url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"DT Sans";src:local("Thmanyah Sans Medium"),url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"DT Sans";src:local("Thmanyah Sans Bold"),url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"DT Sans";src:local("Thmanyah Sans"),url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2212}
@font-face{font-family:"DT Sans";src:local("Thmanyah Sans Medium"),url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2212}
@font-face{font-family:"DT Sans";src:local("Thmanyah Sans Bold"),url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2212}
@font-face{font-family:"DT Display";src:local("Thmanyah Serif Display Bold"),url(fonts/noto-naskh-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"DT Display";src:local("Thmanyah Serif Display Bold"),url(fonts/noto-naskh-arabic-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2212}

/* ---------- Tier 1: primitives (brand guide) ---------- */
:root{
  --p-terracotta:#CB7C5D;
  --p-oat:#F3F1EA;
  --p-paper:#FAF9F4;
  --p-ink:#0B0B09;
  --p-ink-700:#5C5A54;   /* 6.1:1 on oat */
  --p-ink-600:#6B6860;   /* 4.9:1 on oat — smallest allowed text color */
  --p-line:#D9D3C3;
  --p-line-soft:#E6E1D3;
  --p-terra-700:#9E4F35; /* 5.1:1 on oat — terracotta as text */
  --p-terra-600:#B2613F;
  --p-terra-100:#F1E1D8; /* tint for selected states */
  --p-shadow:rgb(11 11 9 / .08);
  --p-scrim:rgb(11 11 9 / .55);
  --p-paper-50:rgb(250 249 244 / .5);
}

/* ---------- Tier 2: semantic ---------- */
:root{
  --bg-canvas:var(--p-oat);
  --bg-surface:var(--p-paper);
  --bg-brand:var(--p-terracotta);
  --bg-inverse:var(--p-ink);
  --bg-selected:var(--p-terra-100);
  --text-primary:var(--p-ink);
  --text-secondary:var(--p-ink-700);
  --text-meta:var(--p-ink-600);
  --text-accent:var(--p-terra-700);
  --text-on-brand:var(--p-ink);
  --text-on-inverse:var(--p-paper);
  --border-default:var(--p-line);
  --border-soft:var(--p-line-soft);
  --border-strong:var(--p-ink);
  --focus-ring:var(--p-ink);

  --font-sans:"DT Sans","Thmanyah Sans",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-display:"DT Display","Thmanyah Serif Display",Georgia,serif;

  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --page-margin:clamp(20px,4vw,48px);
  --shadow-float:0 1px 0 var(--p-shadow),0 8px 24px var(--p-shadow);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* Type scale per script (brand guide p.4). Arabic always gets taller line-height. */
:root{
  --type-display:clamp(34px,4.6vw,56px)/1.15 var(--font-display);
  --type-h2:700 clamp(24px,2.6vw,32px)/1.25 var(--font-sans);
  --type-h3:700 17px/1.45 var(--font-sans);
  --type-body:400 16px/1.56 var(--font-sans);
  --type-control:500 14px/1.43 var(--font-sans);
  --type-meta:400 13px/1.45 var(--font-sans);
  --type-eyebrow:500 13px/1.25 var(--font-sans);
}
:lang(ar){
  --type-display:clamp(34px,4.6vw,56px)/1.35 var(--font-display);
  --type-h2:700 clamp(24px,2.6vw,32px)/1.45 var(--font-sans);
  --type-h3:700 17px/1.65 var(--font-sans);
  --type-body:400 17px/1.65 var(--font-sans);
  --type-control:500 15px/1.6 var(--font-sans);
  --type-meta:400 14px/1.6 var(--font-sans);
  --type-eyebrow:500 14px/1.45 var(--font-sans);
}

/* ---------- Tier 3: components ---------- */
:root{
  --btn-height:44px; --btn-radius:var(--r-sm);
  --btn-primary-bg:var(--p-ink); --btn-primary-fg:var(--p-paper);
  --card-bg:var(--bg-surface); --card-border:var(--border-default); --card-radius:var(--r-md);
  --chip-bg:var(--bg-surface);
  --progress-track:var(--border-soft); --progress-fill:var(--p-terracotta);
  --header-height:72px; --sidebar-width:248px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font:var(--type-body);font-variant-numeric:tabular-nums}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-inline-size:100%}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-sm)}
[hidden]{display:none !important}
.skip{position:absolute;inset-inline-start:var(--s-4);inset-block-start:-100px;background:var(--btn-primary-bg);color:var(--btn-primary-fg);padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);z-index:20}
.skip:focus{inset-block-start:var(--s-4)}
/* Never letter-space or uppercase Arabic. */
.eyebrow{font:var(--type-eyebrow);color:var(--text-secondary);display:flex;align-items:center;gap:var(--s-2);margin-block-end:var(--s-3)}
.eyebrow::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--bg-brand)}
:lang(en) .eyebrow{letter-spacing:.06em;text-transform:uppercase;font-size:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-block-size:var(--btn-height);padding-inline:var(--s-5);border-radius:var(--btn-radius);font:var(--type-control);font-weight:700;transition:background-color .2s var(--ease),transform .2s var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn-primary:hover{background:var(--text-secondary)}
.btn-secondary{border:1.5px solid var(--border-strong);color:var(--text-primary);background:transparent}
.btn-secondary:hover{background:var(--bg-surface)}
.btn-on-brand{background:var(--p-ink);color:var(--p-paper)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link-btn{font:var(--type-control);color:var(--text-accent);text-decoration:underline;text-underline-offset:3px;min-block-size:32px}
.icon-btn{inline-size:40px;block-size:40px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:18px}
.icon-btn:hover{background:var(--border-soft)}
/* Arrows point the reading direction */
.arrow::after{content:"←"}
:dir(ltr) .arrow::after{content:"→"}

/* ---------- Header ---------- */
.site-header{position:sticky;inset-block-start:0;z-index:10;block-size:var(--header-height);display:flex;align-items:center;gap:var(--s-6);padding-inline:var(--page-margin);background:var(--bg-canvas);border-block-end:1px solid var(--border-default)}
.brand{display:flex;align-items:center;gap:var(--s-3);color:var(--text-primary)}
.brand-symbol{inline-size:32px;block-size:32px;flex:none}
.brand-dot{fill:var(--bg-brand)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font:700 19px/1.1 var(--font-sans);letter-spacing:-.01em}
.brand-text small{font:var(--type-meta);font-size:12px;color:var(--text-meta)}
.main-nav{display:flex;gap:var(--s-5);block-size:100%;margin-inline-start:auto}
.nav{position:relative;block-size:100%;font:var(--type-control);color:var(--text-secondary);padding-inline:var(--s-1)}
.nav:hover{color:var(--text-primary)}
.nav.active{color:var(--text-primary);font-weight:700}
.nav.active::after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;block-size:3px;background:var(--border-strong)}
.count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:22px;padding-inline:6px;border-radius:var(--r-pill);background:var(--bg-surface);border:1px solid var(--border-default);font-size:12px;font-weight:700}
.lang-switch{min-inline-size:44px;block-size:40px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);font:700 14px/1 var(--font-sans)}
.lang-switch:hover{background:var(--bg-surface)}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.sidebar{position:sticky;inset-block-start:var(--header-height);align-self:start;block-size:calc(100vh - var(--header-height));overflow:auto;padding:var(--s-6) var(--s-5);border-inline-end:1px solid var(--border-default);display:flex;flex-direction:column}
.aside-label{font:var(--type-eyebrow);color:var(--text-meta);margin-block-end:var(--s-2)}
.aside-label.space{margin-block-start:var(--s-6)}
:lang(en) .aside-label{letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.side,.topic,.external{display:flex;justify-content:space-between;align-items:center;inline-size:100%;min-block-size:38px;padding-inline:var(--s-3);border-radius:var(--r-sm);font:var(--type-control);color:var(--text-secondary);text-align:start}
.side:hover,.topic:hover,.external:hover{background:var(--border-soft);color:var(--text-primary)}
.side.active,.topic.active{background:var(--bg-surface);color:var(--text-primary);font-weight:700;box-shadow:inset 0 0 0 1px var(--border-default)}
.topic small,.side b{font-size:12px;color:var(--text-meta);font-weight:500}
.aside-note{margin-block-start:auto;padding-block-start:var(--s-6);color:var(--text-secondary)}
.aside-note .plan-line{inline-size:96px;color:var(--text-primary);margin-block-end:var(--s-3)}
.aside-note p{font:var(--type-h3)}
.aside-note small{font:var(--type-meta);color:var(--text-meta)}
main{min-inline-size:0;padding-inline:var(--page-margin);padding-block-end:var(--s-8)}

/* ---------- Intro ---------- */
.intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-7);align-items:center;padding-block:var(--s-8) var(--s-7)}
.intro h1{font:var(--type-display);font-weight:700;margin-block-end:var(--s-4)}
.intro p{color:var(--text-secondary);max-inline-size:52ch}
.intro-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-5)}
.intro-panel{position:relative;background:var(--bg-brand);border-radius:var(--r-lg);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.intro-plan{inline-size:82%;color:var(--text-on-brand)}
.intro-plan .draw{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter}
.intro-plan .draw.thin{stroke-width:2}
.intro-plan .sofa{fill:var(--bg-surface);stroke:currentColor;stroke-width:3}
.intro-plan .dot{fill:var(--bg-surface)}
.intro-chip{position:absolute;inset-block-end:var(--s-4);inset-inline-start:var(--s-4);background:var(--bg-surface);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);font:var(--type-control);font-weight:700;display:flex;gap:var(--s-2);align-items:center;box-shadow:var(--shadow-float)}
.intro-chip .play{color:var(--text-accent)}
@media (prefers-reduced-motion:no-preference){
  .js .intro-plan .draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:none}
  .js.ready .intro-plan .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease)}
}

/* ---------- Section heads ---------- */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s-4);margin-block-end:var(--s-5)}
.section-head h2{font:var(--type-h2)}
.section-sub{color:var(--text-secondary);margin-block-start:var(--s-2);max-inline-size:62ch}

/* ---------- Tracks ---------- */
.tracks-strip{padding-block:var(--s-7);border-block-start:1px solid var(--border-default)}
.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s-5)}
.track-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);overflow:hidden}
.track-thumbs{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;aspect-ratio:16/8;background:var(--border-default)}
.track-thumbs img{inline-size:100%;block-size:100%;object-fit:cover}
.track-thumbs img:first-child{grid-row:1/3}
.track-body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.track-meta{display:flex;flex-wrap:wrap;gap:var(--s-2);font:var(--type-meta);color:var(--text-meta)}
.pill{display:inline-flex;align-items:center;block-size:26px;padding-inline:var(--s-3);border-radius:var(--r-pill);border:1px solid var(--border-default);font:var(--type-meta);font-size:12px;color:var(--text-secondary);background:var(--chip-bg)}
.pill.brand{background:var(--bg-brand);border-color:transparent;color:var(--text-on-brand);font-weight:700}
.track-card h3{font:var(--type-h2);font-size:22px}
.track-card p{color:var(--text-secondary)}
.progress{display:flex;align-items:center;gap:var(--s-3);font:var(--type-meta);color:var(--text-meta)}
.progress-bar{flex:1;block-size:6px;border-radius:var(--r-pill);background:var(--progress-track);overflow:hidden}
.progress-bar span{display:block;block-size:100%;background:var(--progress-fill);border-radius:inherit;transition:inline-size .4s var(--ease)}
.track-card .btn{align-self:flex-start;margin-block-start:auto}

/* Single track */
.track-view{padding-block:var(--s-7) var(--s-6)}
.track-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s-6);align-items:start;margin-block-end:var(--s-6)}
.track-hero h1{font:var(--type-display);font-weight:700;font-size:clamp(30px,3.6vw,46px);margin-block:var(--s-2) var(--s-3)}
.track-hero p{color:var(--text-secondary)}
.track-outcome{background:var(--bg-brand);color:var(--text-on-brand);border-radius:var(--r-md);padding:var(--s-5)}
.track-outcome p{color:var(--text-on-brand)}
.track-outcome strong{display:block;font:var(--type-h3);margin-block-end:var(--s-2)}
.track-outcome .progress{color:var(--text-on-brand);margin-block:var(--s-4)}
.track-outcome .progress-bar{background:var(--p-paper-50)}
.track-outcome .progress-bar span{background:var(--p-ink)}
.back{display:inline-flex;gap:var(--s-2);align-items:center;font:var(--type-control);color:var(--text-secondary)}
.back:hover{color:var(--text-primary)}
.back::before{content:"→"}
:dir(ltr) .back::before{content:"←"}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);counter-reset:step}
.step{display:grid;grid-template-columns:44px 176px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:var(--s-3)}
.step.done{background:var(--bg-canvas)}
.step-num{inline-size:40px;block-size:40px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--font-sans);border:1.5px solid var(--border-strong);justify-self:center}
.step.done .step-num{background:var(--p-ink);color:var(--p-paper);border-color:var(--p-ink)}
.step-thumb{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/9;background:var(--border-default)}
.step-thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.step-thumb .duration{inset-block-end:6px;inset-inline-start:6px}
.step h3{font:var(--type-h3)}
.step h3 button{text-align:start}
.step h3 button:hover{text-decoration:underline;text-underline-offset:3px}
.step p{font:var(--type-meta);color:var(--text-secondary);margin-block-start:var(--s-1)}
.step .source{font:var(--type-meta);font-size:12px;color:var(--text-meta);margin-block-start:var(--s-2)}
.step-check{display:inline-flex;align-items:center;gap:var(--s-2);min-block-size:40px;padding-inline:var(--s-3);border-radius:var(--r-sm);border:1.5px solid var(--border-default);font:var(--type-control);color:var(--text-secondary);white-space:nowrap}
.step-check:hover{border-color:var(--border-strong);color:var(--text-primary)}
.step-check[aria-pressed="true"]{background:var(--p-ink);border-color:var(--p-ink);color:var(--p-paper)}
.track-complete{margin-block-start:var(--s-6);padding:var(--s-6);border-radius:var(--r-lg);background:var(--bg-inverse);color:var(--text-on-inverse);display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between}
.track-complete h2{font:var(--type-h2);color:inherit}
.track-complete p{opacity:.85}
.track-complete .btn{background:var(--p-paper);color:var(--p-ink)}
.track-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

/* ---------- Catalog strip & library ---------- */
.catalog-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);align-items:center;padding-block:var(--s-3);border-block:1px solid var(--border-default);font:var(--type-meta);color:var(--text-meta)}
.library{padding-block-start:var(--s-7)}
.toolbar{display:grid;grid-template-columns:minmax(220px,1fr) repeat(3,minmax(140px,190px));gap:var(--s-3)}
.search{display:flex;align-items:center;gap:var(--s-2);block-size:var(--btn-height);padding-inline:var(--s-4);border:1px solid var(--border-default);border-radius:var(--r-sm);background:var(--bg-surface)}
.search:focus-within{border-color:var(--border-strong)}
.search span{color:var(--text-meta);font-size:18px}
.search input{flex:1;min-inline-size:0;border:0;background:transparent;outline:0;block-size:100%}
select{block-size:var(--btn-height);padding-inline:var(--s-3);border:1px solid var(--border-default);border-radius:var(--r-sm);background:var(--bg-surface);font:var(--type-control)}
select:focus-visible{border-color:var(--border-strong)}
#mobileTopic{display:none}
.secondary-filters{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;margin-block-start:var(--s-3);font:var(--type-meta);color:var(--text-secondary)}
.secondary-filters label{display:flex;align-items:center;gap:var(--s-2)}
.secondary-filters select{block-size:36px}
.results-line{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-block:var(--s-5) var(--s-4);font:var(--type-meta);color:var(--text-meta)}
#results{color:var(--text-primary);font-weight:700}
#collectionNote{margin-inline-start:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-6) var(--s-5)}
.card{display:flex;flex-direction:column;gap:var(--s-2);min-inline-size:0}
.thumb{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--border-default);border:1px solid var(--border-default)}
.thumb > button:first-child{display:block;inline-size:100%;block-size:100%}
.thumb img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .thumb img{transform:scale(1.03)}
.hover-play{position:absolute;inset:0;margin:auto;inline-size:48px;block-size:48px;border-radius:50%;display:grid;place-items:center;background:var(--bg-surface);color:var(--text-primary);opacity:0;transition:opacity .2s var(--ease)}
.card:hover .hover-play,.thumb button:focus-visible .hover-play{opacity:1}
.duration{position:absolute;inset-block-end:var(--s-2);inset-inline-start:var(--s-2);background:var(--p-ink);color:var(--p-paper);border-radius:6px;padding:2px 6px;font:500 12px/1.4 var(--font-sans);direction:ltr}
.save{position:absolute;inset-block-start:var(--s-2);inset-inline-end:var(--s-2);inline-size:36px;block-size:36px;border-radius:var(--r-sm);background:var(--bg-surface);color:var(--text-primary);font:700 18px/1 var(--font-sans);display:grid;place-items:center;box-shadow:var(--shadow-float)}
.save[aria-pressed="true"]{background:var(--p-ink);color:var(--p-paper)}
.tag{font:var(--type-meta);font-size:12px;color:var(--text-accent);font-weight:500}
.card h3{font:var(--type-h3);font-size:15px}
.title-button{text-align:start;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.title-button:hover{text-decoration:underline;text-underline-offset:3px}
.creator{display:flex;align-items:center;gap:var(--s-2);font:var(--type-meta);color:var(--text-meta)}
.creator > span{inline-size:22px;block-size:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg-brand);color:var(--text-on-brand);font-size:11px;font-weight:700}
.creator-link:hover{color:var(--text-primary);text-decoration:underline}
.channel-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)}
.channel-card h3{font:var(--type-h2);font-size:22px}
.channel-card p{color:var(--text-secondary)}
.channel-card small{color:var(--text-meta)}
.channel-card button,.channel-card a{font:var(--type-control);color:var(--text-accent);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.empty{grid-column:1/-1;text-align:center;padding:var(--s-8) var(--s-4);border:1px dashed var(--border-default);border-radius:var(--r-md);background:var(--bg-surface)}
.empty h3{font:var(--type-h2);margin-block-end:var(--s-2)}
.empty p{color:var(--text-secondary);margin-block-end:var(--s-4)}
.pagination{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-4);margin-block-start:var(--s-7);padding-block-start:var(--s-5);border-block-start:1px solid var(--border-default);font:var(--type-meta);color:var(--text-meta)}
.page-controls{display:flex;gap:var(--s-1)}
.page-controls button{min-inline-size:40px;block-size:40px;border-radius:var(--r-sm);border:1px solid var(--border-default);background:var(--bg-surface);font:var(--type-control)}
.page-controls button[aria-current]{background:var(--p-ink);border-color:var(--p-ink);color:var(--p-paper)}
.page-controls button:disabled{opacity:.4}
.ellipsis{align-self:center;padding-inline:var(--s-1)}
.jump-label{display:flex;align-items:center;gap:var(--s-2)}
.jump-label input{inline-size:72px;block-size:40px;border:1px solid var(--border-default);border-radius:var(--r-sm);padding-inline:var(--s-2);background:var(--bg-surface)}
.jump-label button{block-size:40px;padding-inline:var(--s-3);border-radius:var(--r-sm);background:var(--p-ink);color:var(--p-paper);font-weight:700}

/* ---------- Footer ---------- */
.site-footer{margin-block-start:var(--s-9);color:var(--text-secondary);display:grid;gap:var(--s-3)}
.footer-line{inline-size:100%;block-size:8px;color:var(--text-primary)}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);color:var(--text-primary)}
.footer-link{color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}
.site-footer small{color:var(--text-meta)}

/* ---------- Dialogs ---------- */
dialog{inline-size:min(940px,calc(100vw - 32px));max-block-size:calc(100vh - 32px);padding:0;border:0;border-radius:var(--r-lg);background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-float)}
dialog::backdrop{background:var(--p-scrim)}
.dialog-top{display:flex;justify-content:space-between;align-items:center;padding:var(--s-3) var(--s-4) var(--s-3) var(--s-5);border-block-end:1px solid var(--border-default);font:var(--type-eyebrow);color:var(--text-meta)}
:lang(en) .dialog-top{letter-spacing:.06em;text-transform:uppercase;font-size:12px}
#videoFrame{aspect-ratio:16/9;background:var(--p-ink)}
#videoFrame iframe{inline-size:100%;block-size:100%;border:0;display:block}
.dialog-body{padding:var(--s-5)}
.dialog-body h2{font:var(--type-h2);font-size:22px;margin-block:var(--s-2)}
.dialog-body > p,.dialog-body p{color:var(--text-secondary);font:var(--type-meta)}
.inferred{color:var(--text-meta)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-block:var(--s-4)}
.playback-help{font-size:13px}
.dialog-body label{display:block;font:var(--type-control);font-weight:700;margin-block:var(--s-5) var(--s-2)}
.dialog-body label .hint{font-weight:400;color:var(--text-meta)}
textarea{inline-size:100%;min-block-size:96px;padding:var(--s-3);border:1px solid var(--border-default);border-radius:var(--r-sm);background:var(--bg-canvas);resize:vertical}
textarea:focus-visible{border-color:var(--border-strong)}
#noteStatus{color:var(--text-meta)}
.track-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-5);background:var(--bg-brand);color:var(--text-on-brand);font:var(--type-control)}
.track-bar strong{font-weight:700}
.track-bar .spacer{flex:1}
.track-bar .step-check{border-color:var(--p-ink);color:var(--p-ink);background:transparent}
.track-bar .step-check[aria-pressed="true"]{background:var(--p-ink);color:var(--p-paper)}
.table-wrap{overflow-x:auto;margin-block:var(--s-4)}
table{inline-size:100%;border-collapse:collapse;font:var(--type-meta)}
th,td{padding:var(--s-2) var(--s-3);border-block-end:1px solid var(--border-default);text-align:start}
td{font-variant-numeric:tabular-nums}
.download-catalog{display:inline-block;margin-block-start:var(--s-3);color:var(--text-accent);text-decoration:underline;font:var(--type-control)}

/* ---------- Toast ---------- */
#toast{position:fixed;inset-block-end:var(--s-5);inset-inline-start:50%;transform:translate(-50%,20px);background:var(--p-ink);color:var(--p-paper);padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);font:var(--type-control);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:30}
:dir(rtl) #toast{transform:translate(50%,20px)}
#toast.visible{opacity:1;transform:translate(-50%,0)}
:dir(rtl) #toast.visible{transform:translate(50%,0)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .toolbar{grid-template-columns:1fr 1fr}
  .search{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--header-height:64px}
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none}
  #mobileTopic{display:block}
  .intro{grid-template-columns:1fr;padding-block:var(--s-6)}
  .intro-panel{aspect-ratio:16/10;order:-1}
  .track-hero{grid-template-columns:1fr}
  .step{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"num thumb" "num text" "num check"}
  .step-num{grid-area:num;align-self:start}
  .step-thumb{grid-area:thumb}
  .step-text{grid-area:text}
  .step-check{grid-area:check;justify-self:start}
  #collectionNote{margin-inline-start:0}
}
@media (max-width:640px){
  .site-header{gap:var(--s-3)}
  .brand-text small{display:none}
  .main-nav{position:fixed;inset-inline:0;inset-block-end:0;block-size:60px;margin:0;justify-content:space-around;background:var(--bg-surface);border-block-start:1px solid var(--border-default);z-index:10;gap:0}
  .nav{flex:1}
  .nav.active::after{inset-block-end:auto;inset-block-start:-1px}
  .lang-switch{margin-inline-start:auto}
  body{padding-block-end:60px}
  .toolbar{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-3)}
  .section-head{flex-direction:column;align-items:stretch}
  .section-head .btn{align-self:flex-start}
  .track-grid{grid-template-columns:1fr}
  .pagination{justify-content:center}
  .jump-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* a #library link lands with the heading just under the sticky header */
#library{scroll-margin-top:80px}