/* ============================================================================
   MEMORIZE MEDICINE — STUDENT SKIN  (v186, owner: "restyle using BioRender
   as a reference", scope chosen by the owner: the whole student area, Source
   Sans headings, course covers on the My courses cards)
   ----------------------------------------------------------------------------
   Loaded LAST on student.html (after app.css, the page's <style> and
   canvas.css) and switched on by <html data-skin="bio">, so nothing changes
   on any page that does not carry the attribute. Every selector starts with
   [data-skin="bio"], which is also what lets it outrank canvas.css's doubled
   (0,2,0) utility rules on load order without a single !important.

   The look, in one paragraph: the calm scientific clarity of BioRender. One
   typeface (Source Sans 3, already self-hosted), bold headings with tight
   tracking, a clear bright blue for everything you can press, pill buttons,
   white cards on a soft grey page with no dot grid, pastel tags in sentence
   case instead of tracked capitals, and course covers as the one visual
   anchor. Department colour lives on the covers and the small dot beside the
   department name; everything else stays neutral.

   Radius hierarchy is deliberate: 24px hero, 16px cards, 10px inputs and nav,
   999px for buttons and tags. Contrast: every text/background pair below was
   checked at 4.5:1 or better (brand #006BD1 is 4.87:1 on the #F6F7FA page).
   ========================================================================== */

/* ------------------------------ 1. TOKENS -------------------------------- */
html[data-skin="bio"]{
  --fd:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fb:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fm:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r-obj:16px; --r-btn:999px; --r-sm:10px; --r-tag:999px; --r-hero:24px;
  /* the planner's display face (Fraunces) joins the one-family rule */
  --fs:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
/* light (the default every page ships with) */
html[data-skin="bio"][data-theme="light"]{
  --paper:#F6F7FA; --bg:#F6F7FA; --bg2:#FFFFFF;
  --surface:#FFFFFF; --surface-2:#F9FAFC; --surface-3:#EDF1F6;
  --glass:#FFFFFF; --glass2:#F9FAFC;
  --line:#E4E8EE; --line-2:#EEF1F5; --stroke:#E4E8EE;
  --text:#293039; --text2:#4F5763; --text3:#646E7B; --ink:#293039;
  --brand:#006BD1; --brand-ink:#00509E; --brand-soft:#EEF2FD; --brand-on:#FFFFFF;
  --blue:#006BD1; --blue-hi:#0061BE; --stroke-hi:#006BD1;
  --accent:#B45309; --accent-ink:#8F4207; --accent-soft:#FFF4CC; --accent-on:#FFFFFF;
  --amber:#8A5A00; --amber-soft:#FFF4CC;
  --jade:#37734F; --jade-soft:#E6F5EC; --green:#37734F;
  --crimson:#B23A41; --crimson-soft:#FDEEEE; --danger:#B23A41;
  --edge-brand:#B6DBFF; --edge-accent:#FFE080; --edge-amber:#FFE080;
  --edge-jade:#ABDABC; --edge-crimson:#F8A29F;
  --shadow:0 1px 2px rgba(41,48,57,.04),0 4px 18px rgba(41,48,57,.05);
  --shadow-lift:0 2px 4px rgba(41,48,57,.05),0 12px 32px rgba(41,48,57,.10);
}
/* dark (opt-in) */
html[data-skin="bio"]:not([data-theme="light"]){
  --paper:#12171E; --bg:#12171E; --surface:#1A2029; --surface-2:#1F2631; --surface-3:#28303C;
  --glass:#1A2029; --glass2:#1F2631; --line:#2E3744; --line-2:#242C37;
  --brand:#69B6FF; --brand-ink:#B6DBFF; --brand-soft:#132A44; --brand-on:#04203A;
  --blue:#69B6FF; --blue-hi:#B6DBFF; --stroke-hi:#69B6FF;
  --accent-soft:#2E2210; --amber-soft:#2E2210;
  --edge-brand:#23507D; --edge-accent:#6B4A1A; --edge-amber:#6B4A1A;
  --edge-jade:#2D5A43; --edge-crimson:#6A2E33;
  --shadow:0 1px 2px rgba(0,0,0,.30);
  --shadow-lift:0 2px 4px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.35);
}

/* ------------------------------- 2. BASE --------------------------------- */
/* No dot grid: BioRender's surfaces are plain. canvas.css paints the grid on
   `html body` (0,0,2), so this needs the attribute to win. */
html[data-skin="bio"] body{background-image:none;background-color:var(--paper);font-size:15px;line-height:1.55}
[data-skin="bio"] h1,[data-skin="bio"] h2,[data-skin="bio"] h3,[data-skin="bio"] h4{font-weight:700;letter-spacing:-.015em}
[data-skin="bio"] a:hover{text-decoration:none}
[data-skin="bio"] :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[data-skin="bio"] .grad-text{background:none;-webkit-text-fill-color:currentColor;color:inherit}

/* Sentence case everywhere. BioRender never tracks capitals, and the old
   tracked mono labels were the loudest thing on most panels. */
[data-skin="bio"] :is(.eyebrow,.nav-label,.badge,a.badge,.table th,.field label,.hero-eyebrow,.crow-chip,
  .aside-card h3,.help-h,.coach-kicker,.spday-h,.spsch-now,.spsch-num i,.spsch-gnow,.spsch-tlnow,
  .spmast-decks-label,.spmonth-dow,.sprm-trophy,.sprm-now-chip,.sprm-date,.sprm-today span,
  .sporb-gl-label,.sprm-axis-tick,.spprog-col-title,.spshape-tabs-label,.spmast-eyebrow span,
  .spmast-exam span,.spmast-today-label span,.spmast-gauge-label,.qrv-n,.qrv-line span,.qrv-note span,
  .cs-14,.cs-61,.cs-62,.cs-63,.cs-64,.acc-tbl th,.mem-utbl th,.qbn-lbl){
  text-transform:none;letter-spacing:0;font-family:var(--fb)
}
[data-skin="bio"] :is(.field label,.cs-14,.cs-61,.cs-62,.cs-63,.cs-64){font-size:13px;font-weight:600;color:var(--text2)}

/* ------------------------------ 3. CHROME -------------------------------- */
[data-skin="bio"] .sidebar{background:var(--surface);border-right:1px solid var(--line)}
[data-skin="bio"] .sidebar-logo{border-bottom-color:var(--line)}
[data-skin="bio"] .nav-label{font-size:12.5px;font-weight:600;color:var(--text3);padding:18px 22px 6px}
[data-skin="bio"] .sidebar .nav-item,[data-skin="bio"] .sidebar a.nav-item{
  border-radius:var(--r-sm);padding:9px 12px;font-size:14.5px;font-weight:600;color:var(--text2);
  font-family:var(--fb);text-decoration:none
}
[data-skin="bio"] .sidebar .nav-item:hover{background:var(--surface-2);color:var(--text)}
[data-skin="bio"] .sidebar .nav-item.active{background:var(--brand-soft);color:var(--brand-ink)}
[data-skin="bio"] .sidebar .nav-item.active::before{content:none}
[data-skin="bio"] .sidebar .nav-item.active .nav-icon{color:var(--brand)}
[data-skin="bio"] .nav-caret{border-radius:8px}
[data-skin="bio"] .sidebar-footer{border-top-color:var(--line)}
[data-skin="bio"] .sidebar-footer .avatar{background:var(--brand-soft);color:var(--brand-ink);border-color:transparent;font-weight:700}
[data-skin="bio"] .user-name{font-size:14px}

[data-skin="bio"] .topbar{background:var(--surface);border-bottom-color:var(--line);padding:0 28px}
[data-skin="bio"] .topbar-title{font-size:18px;font-weight:700;letter-spacing:-.01em}
[data-skin="bio"] .topbar .icon-btn{width:38px;height:38px;border-radius:50%;background:var(--surface);border-color:var(--line)}
[data-skin="bio"] .topbar .icon-btn:hover{background:var(--surface-2);border-color:var(--text3)}
[data-skin="bio"] .notif-dot{border-radius:50%;top:7px;right:8px}
[data-skin="bio"] .pwa-install-btn{border-radius:999px;height:38px;padding:0 16px;background:var(--brand);border-color:var(--brand);color:var(--brand-on);font-weight:600}
[data-skin="bio"] .pwa-install-btn:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
@media(max-width:760px){[data-skin="bio"] .pwa-install-btn{padding:0;width:38px}}
[data-skin="bio"] #memSearch{border-radius:999px;padding:8px 16px;background:var(--surface-2);border-color:var(--line);width:280px}
[data-skin="bio"] #memSearch:focus-within{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

[data-skin="bio"] .content{padding:32px 36px 56px;width:100%;max-width:1320px;margin:0 auto}
@media(max-width:760px){[data-skin="bio"] .content{padding:20px 16px 44px}}

/* ---------------------------- 4. COMPONENTS ------------------------------ */
[data-skin="bio"] .glass{border-color:var(--line);box-shadow:var(--shadow)}
[data-skin="bio"] .pad{padding:20px 22px}

/* buttons: BioRender pills */
[data-skin="bio"] .btn{border-radius:999px;padding:10px 20px;font-size:14.5px;font-weight:600;font-family:var(--fb);letter-spacing:.01em;line-height:1.1}
[data-skin="bio"] .btn.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-on);font-weight:600}
[data-skin="bio"] .btn.btn-primary:hover{background:var(--blue-hi);border-color:var(--blue-hi)}
[data-skin="bio"] .btn.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--brand-ink)}
[data-skin="bio"] .btn.btn-ghost:hover{background:var(--brand-soft);border-color:var(--edge-brand);color:var(--brand-ink)}
[data-skin="bio"] .btn.btn-accent{font-weight:600}
[data-skin="bio"] .btn-sm,[data-skin="bio"] .btn.btn-sm{padding:7px 14px;font-size:13.5px}
[data-skin="bio"] .btn-lg{padding:13px 26px;font-size:16px}

/* form controls */
[data-skin="bio"] :is(.input,.select){border-radius:var(--r-sm);border-color:var(--line);padding:11px 14px;font-size:15px}
[data-skin="bio"] :is(.input,.select):focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* tags: pastel fill, soft border, dark text, like BioRender's eyebrow tags */
[data-skin="bio"] :is(.badge,a.badge){font-size:12.5px;font-weight:600;padding:3px 11px}
[data-skin="bio"] .bg-blue{background:var(--brand-soft);border-color:var(--edge-brand);color:var(--brand-ink)}
[data-skin="bio"] .bg-orange,[data-skin="bio"] .bg-amber{background:var(--accent-soft);border-color:var(--edge-accent);color:var(--amber)}
[data-skin="bio"] .bg-green{background:var(--jade-soft);border-color:var(--edge-jade);color:var(--jade)}
[data-skin="bio"] .bg-red{background:var(--crimson-soft);border-color:var(--edge-crimson);color:var(--crimson)}
[data-skin="bio"]:not([data-theme="light"]) .bg-orange,[data-skin="bio"]:not([data-theme="light"]) .bg-amber{color:#FFCE64}

/* progress: rounded track, still no shimmer */
[data-skin="bio"] .progress{border-radius:999px;background:var(--surface-3);height:6px}
[data-skin="bio"] .progress-fill{border-radius:999px}

[data-skin="bio"] .stat-val{font-family:var(--fb);font-weight:700;letter-spacing:-.02em}
[data-skin="bio"] .table th{font-size:13px;font-weight:600;color:var(--text2)}

/* panel headings (My courses, Study planner, Payments, Settings...) */
[data-skin="bio"] .panel h2.cs-1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
[data-skin="bio"] .panel > .flex-between > div > .small.text2{font-size:15px;color:var(--text2);max-width:70ch}
[data-skin="bio"] .cs-95,[data-skin="bio"] .cs-96{font-size:18px;font-weight:700}

/* ----------------------------- 5. DASHBOARD ------------------------------ */
[data-skin="bio"] .dash{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media(min-width:1100px){[data-skin="bio"] .dash{grid-template-columns:minmax(0,1fr) 320px}}

[data-skin="bio"] .dash-head{display:flex;align-items:center;gap:18px;margin-bottom:28px}
[data-skin="bio"] .dash-avatar{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-weight:700;font-size:22px;background:var(--brand-soft);color:var(--brand-ink)}
[data-skin="bio"] .dash-head-text{flex:1;min-width:0}
[data-skin="bio"] .dash-head h1.cs-104{font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.025em;margin:0}
[data-skin="bio"] .dash-date{display:block;font-family:var(--fb);font-size:15px;color:var(--text2);letter-spacing:0;margin-top:4px}
@media(max-width:560px){
  [data-skin="bio"] .dash-head h1.cs-104{font-size:26px}
  [data-skin="bio"] .dash-avatar{width:46px;height:46px;font-size:18px}
}

/* notices: announcements, exam countdown, payment and trial strips */
[data-skin="bio"] .annhot-wrap{gap:12px;margin-bottom:14px}
[data-skin="bio"] #annHot .annhot,[data-skin="bio"] #annOld .glass{border-radius:16px;padding:18px 22px}
[data-skin="bio"] #annHot .annhot b,[data-skin="bio"] #annOld .glass b{font-size:15.5px}
[data-skin="bio"] #annPlan > .glass{border-radius:16px;padding:20px 22px;margin-bottom:14px}
[data-skin="bio"] #annPlan > .glass > b{font-size:16px}
[data-skin="bio"] .dash-strip{display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:12px;border-radius:14px;font-size:14.5px;
  border:1px solid var(--edge-accent);border-left-width:1px;background:var(--accent-soft);box-shadow:none}
[data-skin="bio"] .dash-strip > .ic{color:var(--amber);flex:none}
[data-skin="bio"] .trial-strip{flex-wrap:wrap}
[data-skin="bio"] .trial-strip > span:not(.trial-banner){flex:1 1 220px}
[data-skin="bio"] .trial-strip.ended{background:var(--surface-2);border-color:var(--line)}
[data-skin="bio"] .trial-banner{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 11px;border-radius:999px;white-space:nowrap;flex:none;
  background:#FFE080;color:#5C3D00}
[data-skin="bio"] .trial-banner.ended{background:var(--surface-3);color:var(--text2)}
[data-skin="bio"] .hero-trial .btn,[data-skin="bio"] .trial-strip .btn{padding:8px 16px;font-size:13.5px;flex:none}

/* the hero: the one large element on the page. Cover on the left, what to
   do next on the right. */
/* v188: the cover is an inset tile, not a bleed. Course covers are wide
   artwork (a wordmark on a colour field); the old full-bleed column was
   taller than it was wide, so object-fit:cover cropped the sides off and the
   title in the picture was cut in half. Same 16:9 box the My courses cards
   use, centred in the card, so the artwork arrives whole on both screens. */
[data-skin="bio"] .hero{display:grid;grid-template-columns:minmax(200px,38%) minmax(0,1fr);gap:18px;padding:14px;overflow:hidden;
  border-radius:var(--r-hero);border:1px solid var(--line);border-left-width:1px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:20px}
[data-skin="bio"] .hero .ccover{min-height:0;aspect-ratio:16/9;align-self:center;border-radius:14px}
[data-skin="bio"] .hero-main{padding:14px 18px 16px 0;display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
[data-skin="bio"] .hero-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;font-weight:600;
  color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--edge-brand);border-radius:999px;padding:4px 12px}
[data-skin="bio"] .hero-title{font-family:var(--fd);font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.025em;margin:0}
[data-skin="bio"] .hero-meta{font-size:15px;color:var(--text2)}
[data-skin="bio"] .hero-bar{display:flex;align-items:center;gap:14px;margin:4px 0 6px}
[data-skin="bio"] .hero-bar .progress{flex:1;height:8px}
[data-skin="bio"] .hero-pct{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
[data-skin="bio"] .hero-act{display:flex;gap:10px;flex-wrap:wrap}
[data-skin="bio"] .hero-trial{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;padding:10px 12px;border-radius:14px;
  background:var(--accent-soft);border:1px solid var(--edge-accent);margin:0}
[data-skin="bio"] .hero-trial span:not(.trial-banner){flex:1 1 180px}
@media(max-width:760px){
  [data-skin="bio"] .hero{grid-template-columns:1fr}
  [data-skin="bio"] .hero .ccover{aspect-ratio:16/9}
  [data-skin="bio"] .hero-main{padding:4px 6px 10px}
  [data-skin="bio"] .hero-title{font-size:24px}
}

/* course cover: the uploaded course image, or a department-tinted plate
   with two soft "cells" and the course-type icon when there is none */
[data-skin="bio"] .ccover{position:relative;display:block;overflow:hidden;
  background-color:var(--brand-soft);
  background-color:color-mix(in srgb,var(--dept,var(--brand)) 11%,var(--surface));
  background-image:
    radial-gradient(circle at 88% 112%,color-mix(in srgb,var(--dept,var(--brand)) 20%,transparent) 0 36%,transparent 36.5%),
    radial-gradient(circle at 6% -12%,color-mix(in srgb,var(--dept,var(--brand)) 13%,transparent) 0 30%,transparent 30.5%)}
[data-skin="bio"] .ccover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
[data-skin="bio"] .ccover-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:var(--surface);color:var(--dept,var(--brand));display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(41,48,57,.10)}
[data-skin="bio"] .ccover-ic .ic{width:28px;height:28px}
[data-skin="bio"] .ccover .trial-banner{position:absolute;top:12px;left:12px;z-index:1;box-shadow:0 1px 4px rgba(41,48,57,.12)}

/* the three numbers: one card, three columns, not three boxes */
[data-skin="bio"] .dash-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:24px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
[data-skin="bio"] .dash-nums .stat-card{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:18px 22px;
  border:none;border-radius:0;box-shadow:none;background:none}
[data-skin="bio"] .dash-nums .stat-card + .stat-card{border-left:1px solid var(--line)}
[data-skin="bio"] .dash-nums .stat-icon{grid-row:span 2;margin:0;width:44px;height:44px;border-radius:50%;border:none;background-image:none}
[data-skin="bio"] .dash-nums .stat-icon.si-orange{background-color:var(--accent-soft);color:var(--amber)}
[data-skin="bio"] .dash-nums .stat-icon.si-green{background-color:var(--jade-soft);color:var(--jade)}
[data-skin="bio"] .dash-nums .stat-icon.si-blue{background-color:var(--brand-soft);color:var(--brand)}
[data-skin="bio"] .dash-nums .stat-val{font-size:28px;line-height:1.05}
[data-skin="bio"] .dash-nums .stat-lbl{font-size:14px;margin:0}
@media(max-width:560px){
  [data-skin="bio"] .dash-nums .stat-card{grid-template-columns:1fr;justify-items:start;row-gap:6px;padding:14px}
  [data-skin="bio"] .dash-nums .stat-icon{grid-row:auto;width:34px;height:34px}
  [data-skin="bio"] .dash-nums .stat-icon .ic{width:17px;height:17px}
  [data-skin="bio"] .dash-nums .stat-val{font-size:24px}
  [data-skin="bio"] .dash-nums .stat-lbl{font-size:13px}
}
[data-skin="bio"] .dash-main .glass.pad.cs-10{padding:44px 32px;border-radius:var(--r-hero)}

/* the aside */
[data-skin="bio"] .dash-aside{display:flex;flex-direction:column;gap:18px}
[data-skin="bio"] .aside-card{padding:20px 22px;border-radius:16px}
[data-skin="bio"] .aside-card h3{font-size:16px;font-weight:700;color:var(--text);margin:0 0 10px}
[data-skin="bio"] .aside-card .aside-row{padding:11px 0;font-size:14px;border-top-color:var(--line-2)}
[data-skin="bio"] .aside-card .aside-row:first-of-type{border-top:none}
[data-skin="bio"] .aside-card .btn{margin-top:10px}
/* the daily quote reads like a BioRender testimonial: tinted, borderless */
[data-skin="bio"] .quote-card{background:var(--brand-soft);border:none;box-shadow:none;border-left:none;padding:22px 22px 24px}
[data-skin="bio"] .quote-card h3{font-size:14px;font-weight:600;color:var(--brand-ink);margin-bottom:8px}
[data-skin="bio"] .quote-mark{position:static;display:block;font-family:Georgia,'Times New Roman',serif;font-size:44px;line-height:.6;
  height:22px;color:var(--brand);opacity:1;margin:6px 0 4px}
[data-skin="bio"] .quote-text{font-size:16.5px;line-height:1.5;font-style:normal;font-weight:600;color:var(--text);padding:0;letter-spacing:-.005em}

/* ---------------------------- 6. MY COURSES ------------------------------ */
[data-skin="bio"] #panel-courses > .flex-between{align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
[data-skin="bio"] .clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:24px}
[data-skin="bio"] :where(.clist) .crow{display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;position:relative;
  border:1px solid var(--line);border-left-width:1px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);
  cursor:pointer;transition:box-shadow .18s ease,border-color .18s ease}
[data-skin="bio"] :where(.clist) .crow:hover{transform:none;box-shadow:var(--shadow-lift);border-color:var(--edge-brand)}
[data-skin="bio"] :where(.clist) .crow:focus-within{border-color:var(--brand)}
[data-skin="bio"] :where(.clist) .crow .ccover{aspect-ratio:16/9;flex:none}
[data-skin="bio"] .crow-body{display:flex;flex-direction:column;gap:5px;padding:18px 20px 4px;flex:1;min-width:0}
[data-skin="bio"] .crow-dept{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text2);min-width:0}
[data-skin="bio"] .crow-dept::before{content:'';width:8px;height:8px;border-radius:50%;flex:none;background:var(--dept,var(--brand))}
[data-skin="bio"] .crow-dept span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin="bio"] :where(.clist) .crow .crow-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;
  font-family:var(--fd);font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--text);padding:2px 0;text-decoration:none}
[data-skin="bio"] :where(.clist) .crow .crow-t:hover{color:var(--brand)}
[data-skin="bio"] .crow-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--text2);margin:0;white-space:normal}
[data-skin="bio"] .crow-chip{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;margin:0;vertical-align:0;
  background:var(--accent-soft);border:1px solid var(--edge-accent);color:var(--amber)}
[data-skin="bio"] .crow-prog{display:flex;align-items:center;gap:10px;margin-top:10px}
[data-skin="bio"] .crow-prog .progress{flex:1;height:6px}
[data-skin="bio"] .crow-pct{font-size:13.5px;font-weight:700;color:var(--text2);font-variant-numeric:tabular-nums;background:none;border:none;padding:0}
[data-skin="bio"] .crow-pct.done{color:var(--jade)}
[data-skin="bio"] .crow-foot{display:flex;align-items:center;gap:8px;padding:14px 20px 18px}
[data-skin="bio"] .crow-go{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;
  background:var(--brand-soft);color:var(--brand-ink);text-decoration:none;border:1px solid transparent}
[data-skin="bio"] :where(.clist) .crow:hover .crow-go{background:var(--brand);color:var(--brand-on)}
[data-skin="bio"] .crow-act{margin-left:auto;display:flex;gap:6px}
[data-skin="bio"] .crow-act a,[data-skin="bio"] .crow-act button{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text2);padding:0;cursor:pointer;text-decoration:none}
[data-skin="bio"] .crow-act a:hover,[data-skin="bio"] .crow-act button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
[data-skin="bio"] .crow-act .ic{width:16px;height:16px}
[data-skin="bio"] .crow-act .crow-pay{width:auto;border-radius:999px;padding:0 16px;font-size:13.5px;font-weight:600;
  background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
[data-skin="bio"] .crow-act .crow-pay:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent-on)}
/* free trial / ended trial */
[data-skin="bio"] :where(.clist) .crow.trial{border-left-style:solid}
[data-skin="bio"] :where(.clist) .crow.ended{border-left-style:solid;border-color:var(--line)}
[data-skin="bio"] :where(.clist) .crow.ended .ccover{filter:grayscale(1);opacity:.6}
[data-skin="bio"] :where(.clist) .crow.ended .crow-m{display:block}
[data-skin="bio"] :where(.clist) .crow.ended .crow-act{margin-left:0}
[data-skin="bio"] #panel-courses .clist > .glass.pad.cs-10{padding:44px 32px;border-radius:var(--r-hero)}
@media(max-width:560px){
  [data-skin="bio"] .clist{grid-template-columns:1fr;gap:18px}
}

/* -------------------------- 7. OTHER PANELS ------------------------------ */
/* Help guide and tour: same tokens, just the rounder, calmer idiom */
[data-skin="bio"] .help-item{border-radius:14px;padding:18px 20px}
[data-skin="bio"] .help-item h4{font-size:15.5px;font-weight:700}
[data-skin="bio"] .help-item p{font-size:14px}
[data-skin="bio"] .help-h{font-size:14px;font-weight:700;color:var(--text2)}
[data-skin="bio"] .help-chapter{border-radius:12px}
[data-skin="bio"] .help-chapter-ic,[data-skin="bio"] .tour-cta-ic{border-radius:50%}
[data-skin="bio"] .help-video-frame{border-radius:16px}
[data-skin="bio"] .coach-tip{border-radius:16px;box-shadow:var(--shadow-lift)}
[data-skin="bio"] .coach-kicker{font-size:13px;font-weight:600}
[data-skin="bio"] .coach-title{font-size:17px}

@media(prefers-reduced-motion:reduce){
  [data-skin="bio"] :where(.clist) .crow{transition:none}
}

/* ------------------------------ 8. FIXES --------------------------------- */
/* the fixed .atmos layer paints the old dot grid behind everything */
[data-skin="bio"] .atmos{background-image:none;background-color:var(--paper)}
/* #annOld is an empty slot until there are read announcements; an empty
   flex child still takes a gap */
[data-skin="bio"] .dash-aside > :empty{display:none}
/* the topbar install button joins the blue pills (it was the one orange
   control in the bar) */
[data-skin="bio"] .topbar .btn.install-btn{background:var(--brand);border-color:var(--brand);color:var(--brand-on)}
[data-skin="bio"] .topbar .btn.install-btn:hover{background:var(--blue-hi);border-color:var(--blue-hi)}
/* a finished course reads green all the way along */
[data-skin="bio"] .crow-prog:has(.crow-pct.done) .progress-fill{background:var(--jade)}
/* slightly larger small print: BioRender's smallest body size is 14px */
[data-skin="bio"] .panel .small{font-size:14px}
[data-skin="bio"] .panel .small.text3{font-size:13.5px}
/* the grid gap already separates the main column from the aside */
[data-skin="bio"] .dash-main > :last-child{margin-bottom:0}
@media(max-width:560px){[data-skin="bio"] :where(.clist) .crow .ccover{aspect-ratio:16/7}}

/* ---------------------------- 9. PLANNER --------------------------------- */
/* The planner had its own editorial idiom: a double rule under the
   masthead, 2-3px corners and square buttons. Same components, same
   layout; only the corners, the rule and the button shape join the skin. */
[data-skin="bio"] .spmast-rule{height:1px;border-top:1px solid var(--line);margin:18px 0 24px}
[data-skin="bio"] .spmast-rule::after{content:none}
[data-skin="bio"] :is(.spmast-card,.spmast-stat,.spmode-wrap,.spsetup-wrap,.spweek){border-radius:16px}
[data-skin="bio"] :is(.spmast-warn,.sprm-trophy,.sprm-now-chip){border-radius:12px}
[data-skin="bio"] :is(.spmday,.spmode-opt,.spmod-move){border-radius:10px}
[data-skin="bio"] .spmast-card .sp-minutes{border-radius:12px}
[data-skin="bio"] .spmast-card .sp-minutes .input{border-radius:8px}
[data-skin="bio"] :is(.spmast-btn,.spmast-cta .btn,.spmast-card .sp-timer-controls .btn,.spmast-warn .btn,
  .spmode-wrap .btn,.spsetup-wrap .btn,.sptoday-cta .btn){border-radius:999px}

/* ═══════════ 10. THE LECTURE PAGES (v189) ═══════════════════════════════════
   Owner's brief for the PDF page: merge the three stacked bars into one, give
   the document more room, rework the notes panel, make both rails collapsible
   (open by default), and bring the video page along so the two match.

   Nothing moves that the viewer depends on: the lesson nav (.lessonnav) and
   the tool bar (.nvbar) are the same elements with the same ids, re-parented
   into .ltop by the page and laid out here as three clusters — what you are
   reading (left), what you are doing to it (centre), where you go next
   (right). The reading hint leaves the bar for the line under the document,
   where it does not cost 40px of height on every scroll.
   ────────────────────────────────────────────────────────────────────────── */
[data-skin="bio"] .lwrap{background:var(--paper)}

/* ── one bar ── */
[data-skin="bio"] .ltop{flex-wrap:nowrap;gap:10px;padding:0 16px;min-height:58px;background:var(--surface);
  border-bottom:1px solid var(--line);position:relative;z-index:30}
[data-skin="bio"] .ltop-logo{flex:none;gap:0}
[data-skin="bio"] .ltop-logo img{height:24px}
[data-skin="bio"] .ltop-logo .lock-name,[data-skin="bio"] .ltop-crumbs{display:none}  /* the mark is enough on a reading page */
/* Download is an arrow here; the word costs more room than it earns on a bar
   that already carries the title, the counter and Mark as complete */
@media(max-width:1500px){
  [data-skin="bio"] .ltop-right a.btn[target="_blank"]{font-size:0;padding:7px 11px}
  [data-skin="bio"] .ltop-right a.btn[target="_blank"]::before{content:'\2193';font-size:16px;line-height:1}
}
/* under 1400 the way out is an arrow too, so the lesson title keeps its room
   (the Pages and Notes toggles stay worded: they are new on a desktop and a
   student has to be able to find them) */
@media(max-width:1400px){
  [data-skin="bio"] .ltop-right a.btn.btn-ghost:not([target]):not(.pgrail-toggle):not(.nrail-toggle){font-size:0;padding:7px 11px}
  [data-skin="bio"] .ltop-right a.btn.btn-ghost:not([target]):not(.pgrail-toggle):not(.nrail-toggle)::before{content:'\2190';font-size:16px;line-height:1}
}
[data-skin="bio"] .ltop .menu-btn{display:none}   /* the rails are the navigation here */
[data-skin="bio"] .ltop-title{font-family:var(--fd);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text);
  flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
[data-skin="bio"] .ltop-title .lt-lesson{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
[data-skin="bio"] .ltop-title .lt-course{font-size:13px;font-weight:600;color:var(--text3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:0 1 auto;min-width:0}
@media(max-width:1200px){[data-skin="bio"] .ltop-title .lt-course{display:none}}
[data-skin="bio"] .ltop-right{gap:6px;margin-left:0;flex:none}
[data-skin="bio"] .ltop .btn{padding:7px 14px;font-size:13.5px}
[data-skin="bio"] .ltop .icon-btn{width:36px;height:36px;border-radius:50%;border-color:var(--line);background:var(--surface)}
[data-skin="bio"] .ltop .icon-btn:hover{background:var(--surface-2);border-color:var(--text3)}
[data-skin="bio"] .savebar{font-size:12.5px;color:var(--text3);gap:6px;padding:0 4px}

/* the lesson counter and its arrows, sitting beside the title */
[data-skin="bio"] .ltop .lessonnav{display:flex;align-items:center;gap:4px;border:none;background:none;padding:0;margin:0;flex:none;
  border-bottom:none}
[data-skin="bio"] .ltop .lessonnav a{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text2);font-size:14px;text-decoration:none;overflow:hidden}
[data-skin="bio"] .ltop .lessonnav a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
[data-skin="bio"] .ltop .lessonnav a span{display:none}          /* the title lives in the tooltip */
[data-skin="bio"] .ltop .lessonnav .ln-pos{font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap;padding:0 4px;
  font-variant-numeric:tabular-nums}

/* the tools float over the document, the way a PDF reader does it: one pill
   the student can reach without giving up a strip of the page to it */
[data-skin="bio"] .lmain{position:relative}
[data-skin="bio"] .nvbar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:25;width:auto;
  max-width:calc(100% - 28px);flex-wrap:nowrap;gap:4px;padding:6px 10px;border:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:999px;background:var(--surface);box-shadow:var(--shadow-lift);overflow-x:auto;overflow-y:visible}
[data-skin="bio"] .nvbar .tool{width:34px;height:34px;border-radius:50%;border-color:transparent;background:transparent;color:var(--text2);flex:none}
[data-skin="bio"] .nvbar .tool:hover{background:var(--surface-2);color:var(--text)}
[data-skin="bio"] .nvbar .tool.on{background:var(--brand);border-color:transparent;color:var(--brand-on)}
[data-skin="bio"] .nvbar .tsep{height:22px;margin:0 4px;background:var(--line);flex:none}
[data-skin="bio"] .nvbar .zoomlbl{font-size:13px;font-weight:600;color:var(--text2);min-width:46px;text-align:center;
  font-variant-numeric:tabular-nums;flex:none}
[data-skin="bio"] .nvbar .swbtn{border-radius:50%;border-color:transparent}
[data-skin="bio"] .nvbar .swbtn:hover{background:var(--surface-2)}
[data-skin="bio"] .nvbar .sp{display:none}
[data-skin="bio"] .nvbar #pgLbl{font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap;padding:0 8px 0 2px;
  font-variant-numeric:tabular-nums;flex:none}
[data-skin="bio"] .nvbar .hint{display:none}
[data-skin="bio"] .nvbar .swpop{bottom:calc(100% + 10px);top:auto}

/* v192: down, centred, in its own row under the document (owner: "return the
   bar to be down"). Not floating ON the page: a pill over the document would
   take the pointer back from the ink layer in the strip it covers. */
[data-skin="bio"] .lmain .ltop{order:1}
[data-skin="bio"] .lmain .lstage{order:2}
[data-skin="bio"] .lmain .nvbar{order:3;position:static;transform:none;align-self:center;flex-shrink:0;
  margin:8px 12px 12px;max-width:calc(100% - 24px);overflow:visible;flex-wrap:wrap;justify-content:center}

/* the hint moved under the document */
[data-skin="bio"] .lstage-foot{max-width:980px;margin:18px auto 4px;display:flex;flex-direction:column;gap:4px;
  text-align:center;font-size:13px;color:var(--text3);line-height:1.6}
[data-skin="bio"] .lstage-foot .hint{color:var(--text2)}

/* ── the document gets the room ── */
[data-skin="bio"] .lstage{padding:22px 24px 40px;background:var(--paper)}
[data-skin="bio"] .pages{gap:18px}
[data-skin="bio"] .pgw{border-radius:10px;box-shadow:0 1px 2px rgba(41,48,57,.06),0 8px 28px rgba(41,48,57,.10)}
[data-skin="bio"] .pgw .pgno{font-family:var(--fb);font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px}

/* ── rails: collapsible, open by default ── */
/* the PDF page's thumbnail rail; the video page's curriculum rail keeps its
   own 320px, so only the page-thumbnail one is sized here */
[data-skin="bio"] .lrail{background:var(--surface);border-color:var(--line)}
/* :not([id]) rather than :not(#lrail): a :not() carrying an id would take the
   id's weight with it and outrank the collapse rules below. */
[data-skin="bio"] .lwrap > .lrail:not([id]){width:186px;border-right:1px solid var(--line);padding:16px 12px}
[data-skin="bio"] .lrail h3{font-family:var(--fb);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text3)}
[data-skin="bio"] .nrail{width:330px;background:var(--surface);border-left:1px solid var(--line)}
@media(min-width:1101px){
  [data-skin="bio"] .lwrap.pages-off.pages-off > .lrail,
  [data-skin="bio"] .lwrap.notes-off.notes-off > .nrail,
  [data-skin="bio"] .lwrap.lects-off.lects-off > .lrail{width:0;min-width:0;padding-left:0;padding-right:0;border-width:0;overflow:hidden}
  [data-skin="bio"] .lwrap.pages-off.pages-off > .lrail > *,
  [data-skin="bio"] .lwrap.notes-off.notes-off > .nrail > *,
  [data-skin="bio"] .lwrap.lects-off.lects-off > .lrail > *{display:none}
  [data-skin="bio"] .pgrail-toggle,[data-skin="bio"] .nrail-toggle,[data-skin="bio"] .lrail-toggle{display:inline-flex}
}
[data-skin="bio"] .pgrail-toggle[aria-expanded="true"],
[data-skin="bio"] .nrail-toggle[aria-expanded="true"],
[data-skin="bio"] .lrail-toggle[aria-expanded="true"]{background:var(--brand-soft);border-color:var(--edge-brand);color:var(--brand-ink)}

/* ── the notes panel ── */
[data-skin="bio"] .nrail-top{padding:14px 16px 12px;border-bottom:1px solid var(--line);gap:8px}
[data-skin="bio"] .nrail-top h3{font-family:var(--fd);font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--text)}
[data-skin="bio"] .nrail-count{font-family:var(--fb);font-size:12px;font-weight:600;border-radius:999px;padding:1px 9px;
  background:var(--brand-soft);border-color:transparent;color:var(--brand-ink)}
[data-skin="bio"] .nrail-top .btn{padding:6px 12px;font-size:13px}
[data-skin="bio"] .nrail-filter{padding:12px 14px;gap:10px;border-bottom:1px solid var(--line)}
[data-skin="bio"] .nrail-filter input{border-radius:999px;padding:8px 14px;font-size:14px;background:var(--surface-2);border-color:var(--line)}
[data-skin="bio"] .nrail-filter input:focus{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
[data-skin="bio"] .nf-chip,[data-skin="bio"] .nrail-filter .chip{border-radius:999px;font-size:13px;font-weight:600;padding:5px 12px;
  border:1px solid var(--line);background:var(--surface);color:var(--text2)}
[data-skin="bio"] .nf-chip.on,[data-skin="bio"] .nrail-filter .chip.on{background:var(--brand-soft);border-color:var(--edge-brand);color:var(--brand-ink)}
[data-skin="bio"] .nrail-list{padding:14px;gap:12px}
[data-skin="bio"] .ncard{border-radius:14px;padding:14px 15px;background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
[data-skin="bio"] .ncard:hover{border-color:var(--edge-brand);box-shadow:var(--shadow-lift)}
[data-skin="bio"] .ncard.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
[data-skin="bio"] .ncard .nq{font-size:13.5px;line-height:1.55;color:var(--text2);border-left-width:3px;border-radius:2px;padding-left:11px;margin-bottom:9px}
[data-skin="bio"] .ncard .nt{font-size:14px;line-height:1.6}
[data-skin="bio"] .ncard .nmeta{font-family:var(--fb);font-size:12px;gap:6px;margin-top:11px}
[data-skin="bio"] .ncard .nmeta button{font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 10px;color:var(--text2)}
[data-skin="bio"] .ncard .nmeta button:hover{background:var(--surface-2);color:var(--text)}
[data-skin="bio"] .ncard textarea{border-radius:10px;font-size:14px;padding:10px 12px}
[data-skin="bio"] .nrail-empty{font-size:14px;line-height:1.7;color:var(--text2);padding:20px 6px}

/* ── narrow screens keep the drawers ── */
@media(max-width:1100px){
  [data-skin="bio"] .ltop{flex-wrap:wrap;padding:8px 12px;gap:8px}
  [data-skin="bio"] .ltop-right{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start;margin-left:0}
  [data-skin="bio"] .nvbar{bottom:12px;padding:5px 8px;max-width:calc(100% - 16px)}
  [data-skin="bio"] .ltop-title{max-width:100%;font-size:14px}
  [data-skin="bio"] .lstage{padding:14px 10px 28px}
  [data-skin="bio"] .nrail{width:min(360px,90vw)}
}
@media(max-width:760px){
  [data-skin="bio"] .ltop .lessonnav .ln-pos{display:none}
  [data-skin="bio"] .nvbar .zoomlbl,[data-skin="bio"] .nvbar #pgLbl{font-size:12px;min-width:38px}
  [data-skin="bio"] .ltop-title{font-size:13.5px}
}

/* ------------------------- 10. STAFF PAGES (v213) ------------------------ */
/* v213: admin, tutor, support and affiliate now carry data-skin="bio" too.
   Their stat cards use the same .stat-icon/.si-* markup as the student
   dashboard numbers, outside .dash-nums, so the hatch/stipple patterns of the
   old look are swapped for the student's soft round tiles here as well. */
[data-skin="bio"] .stat-icon{width:44px;height:44px;border-radius:50%;border:none;background-image:none;background-color:var(--surface-3)}
[data-skin="bio"] .stat-icon.si-blue{background-color:var(--brand-soft);color:var(--brand)}
[data-skin="bio"] .stat-icon.si-orange{background-color:var(--accent-soft);color:var(--amber)}
[data-skin="bio"] .stat-icon.si-green{background-color:var(--jade-soft);color:var(--jade)}
[data-skin="bio"] .stat-icon.si-gray{background-color:var(--surface-3);color:var(--text2)}
/* the "Reading your PDF…" bar (admin + tutor studios): its tinted ground
   took the skin's --text3 to 4.48:1 (audit-contrast). Brand-soft ground and
   --text2 inside it: above 4.5:1 in both themes. */
[data-skin="bio"] .genbar{background:var(--brand-soft)}
[data-skin="bio"] .genbar .text3{color:var(--text2)}