/* ============================================================
   Course overview pages: /browse/{subject} and /browse/{subject}/{unit}
   (Oct 2026 redesign). The dashboard's top bar, type and brand
   (classic.html, css/pages.css), drawn as a plain list: the units of a
   course in order, then the lessons of a unit in order, each with the
   student's progress. Loaded after style.css + reskin.css, which stay
   only for the shared pieces (welcome modal, what's new, install prompt).
   Every rule here is scoped to body.svb.
   ============================================================ */
body.svb{
  --paper:#faf8f5; --card:#ffffff; --ink:#2d2a26; --sec:#57534a; --mut:#84806f;
  --line:#e6e0d4; --linel:#efeae1; --rust:#c06325;
  --sc:#5b4632;                                   /* subject colour (NAMEC), set by the loader */
  --sc-ink:var(--sc);
  --sc-soft:color-mix(in srgb,var(--sc) 11%,var(--card));
  --sc-track:color-mix(in srgb,var(--sc) 14%,var(--paper));
  --head:'Schibsted Grotesk',system-ui,sans-serif; --read:'Literata',Georgia,serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --radius:16px;
  --shadow:0 1px 2px rgba(45,42,38,.05),0 10px 28px -16px rgba(45,42,38,.18);
  /* tokens the shared pieces read (exam countdown, welcome modal) */
  --accent:var(--sc); --accent-light:var(--sc-soft); --accent-badge:color-mix(in srgb,var(--sc) 22%,var(--card));
  --text-primary:var(--ink); --text-secondary:var(--sec); --text-muted:var(--mut); --radius-sm:6px;
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--head);
  -webkit-font-smoothing:antialiased;
}
html:has(body.svb){background:#faf8f5}
html.dark-mode:has(body.svb){background:#181614}
body.svb::before{display:none}                    /* the reader skin's hero glow */
body.svb *{box-sizing:border-box}

/* ---- top bar: the dashboard's ---- */
body.svb .br-top{max-width:1000px;margin:0 auto;padding:18px clamp(16px,4vw,32px) 6px;display:flex;align-items:center;gap:14px}
body.svb .brand{font-family:'Young Serif',serif;font-size:1.22rem;font-weight:400;color:#1d1c1a;white-space:nowrap;text-decoration:none;flex:none}
body.svb .brandlock{height:.30em;width:auto;margin-left:.5px;vertical-align:baseline}
body.svb .br-schoollogo{height:30px;width:auto;max-width:130px;object-fit:contain;flex:none}
body.svb .br-schoollogo[hidden]{display:none}
body.svb .sp{flex:1}
body.svb .br-nav{display:flex;align-items:center;gap:1.1rem}
body.svb .br-nav a{font:600 .88rem var(--head);color:var(--sec);text-decoration:none;position:relative;white-space:nowrap}
body.svb .br-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--rust);transform:scaleX(0);transform-origin:left center;transition:transform .25s var(--ease)}
body.svb .br-nav a:hover{color:var(--ink)}
body.svb .br-nav a:hover::after{transform:scaleX(1)}
@media (max-width:600px){
  body.svb .br-nav .br-nav-wide{display:none}      /* the revision link sits under the list on a phone */
  body.svb .br-schoollogo{height:24px;max-width:90px}
}

/* ---- page ---- */
body.svb .br-wrap{max-width:760px;margin:0 auto;padding:18px clamp(16px,4vw,32px) 56px}
body.svb #browse-content{animation:br-in .45s var(--ease) both}
@keyframes br-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

body.svb .br-head{margin:.6rem 0 1.4rem}
body.svb .br-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;font:600 .78rem var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 .55rem}
body.svb .br-eyebrow a{color:var(--sc-ink);text-decoration:none}
body.svb .br-eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}
body.svb .br-eyebrow .br-dot{color:var(--mut);opacity:.7}
body.svb .br-head h1{font:800 clamp(1.7rem,4.2vw,2.3rem)/1.12 var(--head);letter-spacing:-.025em;margin:0;color:var(--ink)}
body.svb .br-lede{font:400 1.02rem/1.55 var(--read);color:var(--sec);margin:.55rem 0 0;max-width:60ch}
body.svb .br-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;margin:.9rem 0 0;font:500 .9rem var(--head);color:var(--sec)}
body.svb .br-meta b{font-weight:700;color:var(--ink)}
body.svb .br-meta .br-sep{width:1px;height:13px;background:var(--line)}
body.svb .br-bar{height:6px;border-radius:3px;background:var(--sc-track);overflow:hidden;margin:.75rem 0 0;max-width:340px}
body.svb .br-bar i{display:block;height:100%;background:var(--sc);border-radius:3px;transform-origin:left center;animation:br-grow .9s var(--ease) .15s both}
@keyframes br-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
body.svb .br-head .exam-cd{margin-top:.9rem}

/* ---- the list card ---- */
body.svb .br-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
body.svb .br-list{list-style:none;margin:0;padding:0}
body.svb .br-list li+li{border-top:1px solid var(--linel)}
body.svb .br-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:0 14px;align-items:center;padding:.95rem 1.1rem;color:inherit;text-decoration:none;transition:background-color .3s var(--ease)}
body.svb .br-row:hover{background:color-mix(in srgb,var(--sc) 5%,var(--card))}
body.svb .br-row:focus-visible{outline:3px solid color-mix(in srgb,var(--sc) 45%,transparent);outline-offset:-3px}
body.svb .br-num{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--sc-soft);color:var(--sc-ink);font:700 .92rem var(--head);font-variant-numeric:tabular-nums;align-self:start}
body.svb .br-body{min-width:0}
body.svb .br-title{display:block;font:650 1.02rem/1.3 var(--head);color:var(--ink);letter-spacing:-.005em}
body.svb .br-desc{display:block;font:400 .92rem/1.5 var(--read);color:var(--sec);margin-top:.2rem}
body.svb .br-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;margin-top:.35rem;font:500 .8rem var(--head);color:var(--mut)}
body.svb .br-sub .br-kind{font-weight:700;color:var(--sc-ink)}
body.svb .br-end{display:flex;align-items:center;gap:.7rem;color:var(--mut)}
body.svb .br-chev{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
body.svb .br-row:hover .br-chev{transform:translateX(3px);color:var(--sc-ink)}
/* progress inside a unit row: count + a short bar, only once something is done */
body.svb .br-prog{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;min-width:64px}
body.svb .br-prog span{font:700 .8rem var(--head);color:var(--sec);font-variant-numeric:tabular-nums}
body.svb .br-prog .br-bar{width:64px;height:4px;margin:0}
body.svb .br-row.is-complete .br-num{background:var(--sc);color:#fff}

/* lesson rows: number, or a tick once the lesson is done */
body.svb .br-lesson .br-num{border-radius:50%}
body.svb .br-lesson.is-done .br-num{background:var(--sc);color:#fff}
body.svb .br-lesson.is-done .br-num svg{width:16px;height:16px}
body.svb .br-lesson.is-opened .br-num{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--sc)}
body.svb .br-next{font:700 .78rem var(--head);color:var(--sc-ink);white-space:nowrap}

/* the guide link under the list */
body.svb .br-after{margin-top:1rem}
body.svb .br-after .br-row{grid-template-columns:34px minmax(0,1fr) auto}
body.svb .br-after .br-num svg{width:17px;height:17px}

body.svb .br-back{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.6rem;font:600 .9rem var(--head);color:var(--sec);text-decoration:none}
body.svb .br-back:hover{color:var(--ink)}

/* the subject notice (settings.subject_notice): a quiet card above the list */
body.svb .br-notice{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 1rem;padding:.85rem 1rem;background:#fdf6e3;border:1px solid #efd9a6;border-radius:12px;font:400 .92rem/1.5 var(--head);color:#5f4a1c}
body.svb .br-notice svg{flex:none;width:18px;height:18px;margin-top:.15rem}
body.svb .br-notice .br-notice-x{background:none;border:0;padding:0;margin-left:auto;cursor:pointer;color:inherit;line-height:0}
body.svb .br-notice .br-notice-x svg{margin:0;width:16px;height:16px}
body.svb .br-notice div{flex:1}
body.svb .br-notice a{color:inherit}

/* board picker */
body.svb .br-foot{margin:1.2rem 0 0;font:400 .9rem/1.5 var(--head);color:var(--mut)}
body.svb .br-foot a{color:var(--rust)}

/* error */
body.svb .br-error{padding:3rem 0;text-align:left}
body.svb .br-error h1{font:800 1.8rem var(--head);letter-spacing:-.02em;margin:0 0 .5rem}
body.svb .br-error p{font:400 1rem/1.55 var(--read);color:var(--sec);margin:0}
body.svb .br-error .br-back{margin-top:1.2rem}

/* loading skeleton */
body.svb .br-loading{padding-top:.6rem}
body.svb .br-sk{background:var(--linel);border-radius:6px;animation:br-pulse 1.4s ease-in-out infinite}
body.svb .br-sk-eyebrow{width:120px;height:12px;margin:.6rem 0 .8rem}
body.svb .br-sk-title{width:min(320px,70%);height:34px;margin-bottom:.9rem}
body.svb .br-sk-meta{width:200px;height:14px;margin-bottom:1.6rem}
body.svb .br-sk-card{padding:.4rem 1.1rem}
body.svb .br-sk-row{height:46px;margin:.7rem 0;border-radius:8px;background:var(--linel);animation:br-pulse 1.4s ease-in-out infinite}
@keyframes br-pulse{50%{opacity:.55}}

/* footer: the dashboard's legal row */
body.svb .sv-legal-footer{border-top:0;margin-top:0;padding:0 1rem 2rem}
body.svb .sv-legal-footer p{font:400 .76rem/1.6 var(--head);color:var(--mut)}
body.svb .sv-legal-footer a{color:var(--mut);text-decoration:none}
body.svb .sv-legal-footer p.sv-company{font-size:.68rem;margin-top:.3rem;opacity:.8}
body.svb .sv-legal-footer a:hover{color:var(--ink)}

/* ---- phone ---- */
@media (max-width:600px){
  body.svb .br-wrap{padding-top:10px}
  body.svb .br-row{grid-template-columns:30px minmax(0,1fr) auto;gap:0 12px;padding:.85rem .9rem}
  body.svb .br-num{width:30px;height:30px;font-size:.85rem;border-radius:8px}
  body.svb .br-title{font-size:.98rem}
  body.svb .br-desc{font-size:.88rem}
  body.svb .br-prog{min-width:44px}
  body.svb .br-prog .br-bar{width:44px}
  body.svb .br-chev{display:none}
  body.svb .br-unit .br-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---- dark mode (js/dash-a11y.js, the same switch as the lessons and the dashboard) ---- */
body.svb.dark-mode{--paper:#181614;--card:#211f1c;--ink:#ece9e4;--sec:#b3aea6;--mut:#8a857c;--line:#36332e;--linel:#2b2925;
  --sc-ink:color-mix(in srgb,var(--sc) 45%,#ece9e4);
  --sc-soft:color-mix(in srgb,var(--sc) 34%,#211f1c);
  --sc-track:#2b2925;
  --shadow:none;
  background:var(--paper); color:var(--ink)}
body.svb.dark-mode .brand{color:#f1ede6}
body.svb.dark-mode .br-num{color:#f1ede6}
body.svb.dark-mode .br-bar i{background:color-mix(in srgb,var(--sc) 70%,#ece9e4)}
body.svb.dark-mode .br-row.is-complete .br-num,
body.svb.dark-mode .br-lesson.is-done .br-num{background:color-mix(in srgb,var(--sc) 75%,#ece9e4);color:#181614}
body.svb.dark-mode .br-lesson.is-opened .br-num{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--sc-ink)}
body.svb.dark-mode .br-row:hover{background:#26231f}
body.svb.dark-mode .br-notice{background:#2a2518;border-color:#4a4228;color:#e8d9b0}
body.svb.dark-mode .exam-cd{color:var(--ink)}
body.svb.dark-mode .exam-cd .exam-cd-label{color:var(--sec)}
body.svb.dark-mode .exam-cd .exam-cd-date,body.svb.dark-mode .exam-cd .exam-cd-x{color:var(--mut)}
body.svb.dark-mode .exam-cd:not(.exam-cd-soon):not(.exam-cd-urgent) .exam-cd-days,
body.svb.dark-mode .exam-cd:not(.exam-cd-soon):not(.exam-cd-urgent) .exam-cd-clock{color:var(--sc-ink)}
body.svb.dark-mode .br-sk,body.svb.dark-mode .br-sk-row{background:#2b2925}

@media (prefers-reduced-motion:reduce){
  body.svb #browse-content,body.svb .br-bar i,body.svb .br-sk,body.svb .br-sk-row{animation:none}
  body.svb .br-row,body.svb .br-chev,body.svb .br-nav a::after{transition:none}
}
body.svb .br-board{grid-template-columns:minmax(0,1fr) auto}
/* the exam countdown's holder (js/exam-countdown.js looks for .hero) */
body.svb .br-head .hero.br-cd{display:block;text-align:left;padding:0;margin:0;max-width:none;animation:none;background:none;border:0}
body.svb .br-head .hero.br-cd:empty{display:none}
body.svb .br-head .hero.br-cd .exam-cd{margin-top:.9rem;max-width:100%}
/* the paper's name stays on a phone: "227d" alone says nothing */
body.svb .br-head .exam-cd-label{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* what the list is: "Units" on a course page, "Lessons in this unit" on a unit page */
body.svb .br-section{font:700 .8rem var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:1.6rem 0 .6rem}
/* the bug reporter lives in the footer on these pages, not as a floating button over the list */
body.svb .bugr-fab{display:none!important}
body.svb .sv-report-link{cursor:pointer}
body.svb .br-head + .br-section{margin-top:0}