:root{
  --ink:#16202a; --ink-2:#43535f; --ink-3:#77868f;
  --bg:#f4f2ee; --panel:#ffffff; --rail:#fbfaf8; --line:#dcd8d0;
  --line-2:#ece8e1; --hi:#fff6dd;
  --brand:#1d4e5c; --brand-2:#2c6d7e;
  --must:#146b45; --must-bg:#e6f2ec;
  --ext:#a8271f;  --ext-bg:#fbeae8;
  --opt:#0e5f96;  --opt-bg:#e6f0f8;
  --lab:#8a4f06;  --lab-bg:#fcf1e2;
  --warn:#8b1e3f;
  --m1:#1f5fa0; --m2:#c07a1e; --m3:#6b3f9e; --m4:#2f7d3a; --m5:#1a7f78; --m6:#b1502a;
  --b1:#a8271f; --b2:#2f7d3a; --b3:#6b7a3a; --b4:#1a7f78; --b5:#c05d1e; --b6:#3f5fa8; --b7:#2f7d5a;
  --bar-bg:#233442; --bar-fg:#ffffff; --bar-sub:rgba(255,255,255,.72);
  --shadow:0 1px 2px rgba(22,32,42,.06), 0 8px 24px rgba(22,32,42,.06);
  --radius:14px;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Assistant","Rubik","Heebo","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8e4dc; --ink-2:#b3aca1; --ink-3:#8b8479;
    --bg:#14181c; --panel:#1b2126; --rail:#181d22; --line:#2e3740;
    --line-2:#242b31; --hi:#2d2718;
    --brand:#7fc3ce; --brand-2:#a3d7df;
    --must:#5fc294; --must-bg:#14291f;
    --ext:#f08a80;  --ext-bg:#2c1a18;
    --opt:#6fb6e8;  --opt-bg:#15242f;
    --lab:#e2a75c;  --lab-bg:#2a2013;
    --warn:#e888a6;
    --m1:#6ba0d8; --m2:#e0a54a; --m3:#a884d8; --m4:#66b872; --m5:#54bdb4; --m6:#e08a63;
    --b1:#e8776c; --b2:#66b872; --b3:#a8b96c; --b4:#54bdb4; --b5:#e08c4a; --b6:#7f9ad8; --b7:#5fb894;
    --bar-bg:#2c3b46; --bar-fg:#f2f7f9; --bar-sub:rgba(242,247,249,.72);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ink:#e8e4dc; --ink-2:#b3aca1; --ink-3:#8b8479;
  --bg:#14181c; --panel:#1b2126; --rail:#181d22; --line:#2e3740;
  --line-2:#242b31; --hi:#2d2718;
  --brand:#7fc3ce; --brand-2:#a3d7df;
  --must:#5fc294; --must-bg:#14291f;
  --ext:#f08a80;  --ext-bg:#2c1a18;
  --opt:#6fb6e8;  --opt-bg:#15242f;
  --lab:#e2a75c;  --lab-bg:#2a2013;
  --warn:#e888a6;
  --m1:#6ba0d8; --m2:#e0a54a; --m3:#a884d8; --m4:#66b872; --m5:#54bdb4; --m6:#e08a63;
  --b1:#e8776c; --b2:#66b872; --b3:#a8b96c; --b4:#54bdb4; --b5:#e08c4a; --b6:#7f9ad8; --b7:#5fb894;
  --bar-bg:#2c3b46; --bar-fg:#f2f7f9; --bar-sub:rgba(242,247,249,.72);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  direction:rtl; text-align:right; -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
a{color:var(--brand-2);}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand-2); outline-offset:2px; border-radius:6px;
}

header.top{
  position:sticky; top:0; z-index:30;
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:14px clamp(14px,3vw,28px) 12px;
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end;
}
.brandblock{display:flex; align-items:center; gap:12px; margin-inline-end:auto;}
.brandblock svg{color:var(--brand); flex:none;}
h1{margin:0; font-size:clamp(17px,2.2vw,22px); font-weight:800;
   letter-spacing:-.01em; text-wrap:balance;}
.sub{margin:2px 0 0; font-size:12.5px; color:var(--ink-3);}
.tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.search{display:flex; align-items:center; gap:7px;
  background:var(--rail); border:1px solid var(--line);
  border-radius:999px; padding:6px 13px; min-width:190px;}
.search svg{color:var(--ink-3); flex:none;}
.search input{border:0; background:transparent; color:var(--ink);
  font:inherit; font-size:13.5px; width:100%; outline:0;}
.chip{border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  border-radius:999px; padding:6px 14px; font:inherit; font-size:13px;
  font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;}
.chip:hover{background:var(--rail);}
.chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--panel);}
.chip.k-must[aria-pressed="true"]{background:var(--must); border-color:var(--must); color:#fff;}
.chip.k-ext[aria-pressed="true"]{background:var(--ext); border-color:var(--ext); color:#fff;}
.chip.k-lab[aria-pressed="true"]{background:var(--lab); border-color:var(--lab); color:#fff;}
.chip.k-mat[aria-pressed="true"]{background:var(--m1); border-color:var(--m1); color:#fff;}
.chip.k-bio[aria-pressed="true"]{background:var(--b2); border-color:var(--b2); color:#fff;}

.shell{display:grid; grid-template-columns:minmax(300px,380px) 1fr;
  max-width:1560px; margin:0 auto; align-items:start;}

.rail{background:var(--rail); border-inline-start:1px solid var(--line);
  max-height:calc(100vh - 74px); overflow-y:auto; overflow-x:hidden; padding-bottom:24px;}

#railToggle{display:none;}
/* ---- rail: three clear levels — unit bar, week title, quiet meta ---- */
.grouphead{position:sticky; top:0; z-index:5;
  background:var(--bar-bg); color:var(--bar-fg);
  padding:10px 16px 10px 13px;
  display:flex; align-items:baseline; gap:10px;
  border-inline-start:5px solid var(--accent, var(--brand));
  box-shadow:0 1px 0 rgba(0,0,0,.10);}
.grouphead .nm{font-size:13px; font-weight:800; letter-spacing:.01em;
  line-height:1.35; flex:1 1 auto;}
.grouphead .rng{flex:none; font-size:11px; font-weight:650;
  color:var(--bar-sub); font-variant-numeric:tabular-nums; white-space:nowrap;}

.wk{width:100%; text-align:right; display:grid;
  grid-template-columns:26px 1fr; gap:3px 10px; align-items:start;
  padding:11px 16px 12px 13px; border:0;
  border-bottom:1px solid var(--line-2);
  border-inline-start:5px solid transparent;
  background:transparent; color:inherit; font:inherit; cursor:pointer;}
.wk:hover{background:var(--panel);}
.wk[aria-current="true"]{background:var(--panel);
  border-inline-start-color:var(--accent, var(--brand));}
.wk[aria-current="true"] .ttl{color:var(--ink);}
.wk .num{grid-row:span 2; align-self:start; margin-top:1px;
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--ink-3); font-variant-numeric:tabular-nums; text-align:center;}
.wk[aria-current="true"] .num{color:var(--accent, var(--brand));}
.wk .ttl{font-size:14.5px; font-weight:650; line-height:1.4; color:var(--ink-2);}
.wk .meta{display:flex; flex-wrap:wrap; gap:4px 9px; align-items:center;
  font-size:11.5px; color:var(--ink-3);}
.wk .pg{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.wk .lab{display:inline-flex; align-items:center; gap:3px; color:var(--lab);
  font-weight:700;}
.wk .flag{display:inline-flex; align-items:center; gap:3px; font-weight:700;}
.wk .flag::before{content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor;}
.wk .f-ext{color:var(--ext);}
.wk .f-opt{color:var(--opt);}
.wk .f-green{color:var(--must);}

.tag{border-radius:999px; padding:1px 8px; font-weight:700; font-size:10.5px; white-space:nowrap;}
.t-must{background:var(--must-bg); color:var(--must);}
.t-ext{background:var(--ext-bg); color:var(--ext);}
.t-opt{background:var(--opt-bg); color:var(--opt);}
.t-lab{background:var(--lab-bg); color:var(--lab); display:inline-flex; align-items:center; gap:4px;}
.t-pg{color:var(--ink-3); font-family:var(--mono); font-weight:600;}

.detail{padding:clamp(16px,2.4vw,30px) clamp(14px,3vw,34px) 40px; min-width:0;}
.eyebrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; font-weight:800; letter-spacing:.05em; color:var(--ink-3);}
.eyebrow .dot{width:10px; height:10px; border-radius:3px;}
h2{margin:4px 0 0; font-size:clamp(19px,2.6vw,26px); font-weight:800;
   line-height:1.3; text-wrap:balance;}
.dbar{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 10px;}
.statusnote{margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--ink-3);}
.pill{display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:4px 13px;
  font-size:12.5px; font-weight:650; color:var(--ink-2); background:var(--panel);}
.pill svg{color:var(--ink-3);}
.pill.p-must{background:var(--must-bg); border-color:transparent; color:var(--must);}
.pill.p-must svg{color:var(--must);}
.pill.p-ext{background:var(--ext-bg); border-color:transparent; color:var(--ext);}
.pill.p-ext svg{color:var(--ext);}
.pill.p-opt{background:var(--opt-bg); border-color:transparent; color:var(--opt);}
.pill.p-opt svg{color:var(--opt);}

/* ---- the thesis: read this first, no label at all ---- */
.thesis{margin:0 0 24px; padding:0 16px 0 0;
  border-inline-end:4px solid var(--accent, var(--brand));
  font-size:clamp(16.5px,1.5vw,19px); font-weight:600; line-height:1.55;
  color:var(--ink); text-wrap:pretty;}

/* ---- two-track body: what to do on one side, supporting detail on the other ---- */
.body2{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:16px; align-items:start;}
@media (max-width:1240px){ .body2{grid-template-columns:1fr;} }
.track{display:grid; gap:14px; min-width:0;}

.card{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px 16px; box-shadow:var(--shadow); min-width:0;}
.card h3{margin:0 0 8px; font-size:11px; font-weight:750; letter-spacing:.06em;
  color:var(--ink-3); text-transform:none;}
.card.hero{padding:17px 19px 19px;}
.card.hero h3{color:var(--lab);}
.card.mis h3{color:var(--warn);}
.card.res h3{color:var(--opt);}
.card.lab{border-inline-start:4px solid var(--lab);}
.card.mis{border-inline-start:4px solid var(--warn);}
.lead{margin:0; font-size:15px; line-height:1.62;}
.card.hero .lead{font-size:15.5px; line-height:1.66;}
.metaline{margin:0; font-size:13.2px; line-height:1.55; color:var(--ink-2);}
.metaline b{font-weight:750; color:var(--ink-3); font-size:11px;
  letter-spacing:.06em; display:block; margin-bottom:3px;}
ul.clean{margin:0; padding:0; list-style:none; display:grid; gap:7px;}
ul.clean li{position:relative; padding-inline-start:16px; font-size:13.8px; line-height:1.55;}
ul.clean li::before{content:""; position:absolute; inset-inline-start:0; top:.62em;
  width:6px; height:6px; border-radius:2px; background:var(--brand);}
ul.mislist li::before{background:var(--warn); border-radius:50%;}
.terms{display:flex; flex-wrap:wrap; gap:6px;}
.term{background:var(--rail); border:1px solid var(--line-2); border-radius:8px;
  padding:3px 9px; font-size:12.8px; font-weight:600; color:var(--ink-2);}
.term.tt-ext{background:var(--ext-bg); border-color:transparent; color:var(--ext);}
.term.tt-opt{background:var(--opt-bg); border-color:transparent; color:var(--opt);}
.term.tt-green{background:var(--must-bg); border-color:transparent; color:var(--must);}
.term .tg{font-style:normal; font-size:10.5px; font-weight:800; margin-inline-start:6px;
  padding:0 6px; border-radius:999px; background:var(--panel); opacity:.95;}
.linkrow{display:grid; gap:8px;}
.linkrow a{display:flex; gap:8px; align-items:flex-start; text-decoration:none;
  font-size:13.4px; font-weight:600; line-height:1.45; padding:8px 10px;
  border-radius:9px; background:var(--rail); border:1px solid var(--line-2);
  word-break:break-word;}
.linkrow a:hover{background:var(--opt-bg); border-color:var(--opt);}
.linkrow svg{color:var(--opt); flex:none; margin-top:2px;}
.nolinks{margin:0; font-size:13px; color:var(--ink-3);}
.note{background:var(--hi); border:1px solid var(--line-2);}
.note h3 svg{color:var(--lab);}
.safety{margin-top:11px; padding:9px 11px; border-radius:9px;
  background:var(--ext-bg); color:var(--ext); font-size:12.8px; font-weight:650;
  display:flex; gap:8px; align-items:flex-start;}
.safety svg{flex:none; margin-top:2px;}

.toprow{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;}
.toprow .eyebrow{flex:1 1 auto; min-width:0;}
.copybtn{display:inline-flex; align-items:center; gap:7px; flex:none;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  border-radius:999px; padding:6px 15px; font:inherit; font-size:13px;
  font-weight:700; cursor:pointer; transition:background .15s,color .15s,border-color .15s;}
.copybtn:hover{background:var(--rail); color:var(--ink); border-color:var(--ink-3);}
.copybtn svg{flex:none;}
.copybtn[data-state="ok"]{background:var(--must-bg); color:var(--must); border-color:transparent;}
.copybtn[data-state="fail"]{background:var(--ext-bg); color:var(--ext); border-color:transparent;}
.copybox{margin:10px 0 0; width:100%; min-height:150px; resize:vertical;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  background:var(--panel); color:var(--ink); font:inherit; font-size:13px; line-height:1.55;
  direction:rtl;}
.copyhint{margin:8px 0 0; font-size:12.5px; color:var(--ext);}
.nav{display:flex; gap:8px; margin-top:24px; flex-wrap:wrap;}
.navbtn{display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  border-radius:999px; padding:8px 16px; font:inherit; font-size:13px;
  font-weight:650; cursor:pointer;}
.navbtn:hover{background:var(--rail); color:var(--ink);}
.navbtn[disabled]{opacity:.4; cursor:default;}

.ref{max-width:1560px; margin:0 auto; padding:0 clamp(14px,3vw,34px) 20px;}
details.ref-d{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); margin-top:12px; overflow:hidden;}
details.ref-d>summary{cursor:pointer; padding:13px 17px; font-weight:750;
  font-size:14px; display:flex; align-items:center; gap:9px; list-style:none;}
details.ref-d>summary::-webkit-details-marker{display:none;}
details.ref-d>summary svg{color:var(--brand); flex:none;}
details.ref-d>summary .chev{margin-inline-start:auto; transition:transform .2s;}
details.ref-d[open]>summary .chev{transform:rotate(180deg);}
.tblwrap{overflow-x:auto; border-top:1px solid var(--line-2);}
table{border-collapse:collapse; width:100%; font-size:13.3px; min-width:520px;}
th,td{padding:9px 14px; text-align:right; border-bottom:1px solid var(--line-2); vertical-align:top;}
th{background:var(--rail); font-size:11.5px; letter-spacing:.04em; color:var(--ink-3); font-weight:800;}
td:first-child{font-weight:700;}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;}

footer{border-top:1px solid var(--line); background:var(--panel);
  padding:18px clamp(14px,3vw,34px) 26px; margin-top:14px;}
.finner{max-width:1560px; margin:0 auto; display:flex; flex-wrap:wrap;
  gap:12px 18px; align-items:center; font-size:13px; color:var(--ink-3);}
.credit{display:flex; align-items:center; gap:9px; font-weight:650; color:var(--ink-2);}
.credit svg{color:var(--brand);}
.credit a{text-decoration:none; font-weight:800;}
.credit a:hover{text-decoration:underline;}
.fb{margin-inline-start:auto; display:inline-flex; align-items:center; gap:7px;
  background:var(--brand); color:var(--panel); text-decoration:none;
  border-radius:999px; padding:8px 18px; font-weight:750; font-size:13px;}
.fb:hover{background:var(--brand-2);}
:root[data-theme="dark"] .fb{color:#101418;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .fb{color:#101418;} }

/* ---------- narrow screens: one column, list behind a toggle ---------- */
@media (max-width:1024px){
  header.top{position:static; padding:12px 14px 10px; gap:10px;}
  .brandblock{margin-inline-end:0; width:100%;}
  h1{font-size:19px;}
  .tools{width:100%; gap:6px; overflow-x:auto; padding-bottom:2px;
         -webkit-overflow-scrolling:touch;}
  .search{order:-1; flex:1 1 100%; min-width:0;}
  .chip{flex:0 0 auto; font-size:12.5px; padding:5px 12px;}

  .shell{grid-template-columns:1fr;}
  .detail{order:1; padding:16px 14px 8px;}
  #railToggle{order:2; display:flex; align-items:center; gap:8px;
    margin:4px 14px 0; padding:11px 16px; width:calc(100% - 28px);
    border:1px solid var(--line); border-radius:999px;
    background:var(--panel); color:var(--ink); font:inherit;
    font-size:14px; font-weight:750; cursor:pointer;}
  #railToggle svg{color:var(--brand); transition:transform .2s;}
  #railToggle[aria-expanded="true"] svg.chev{transform:rotate(180deg);}
  #railToggle .cnt{margin-inline-start:auto; font-size:12px;
    font-weight:650; color:var(--ink-3);}
  .rail{order:3; max-height:none; border:0; margin-top:10px;
        border-top:1px solid var(--line); display:none;}
  .rail.open{display:block;}
  .grouphead{position:static;}

  h2{font-size:21px;}
  .lead{font-size:14.5px;}
  ul.clean li{font-size:14px;}
  .grid{grid-template-columns:1fr; gap:12px;}
  .card{padding:14px 15px 15px;}
  .dbar{margin:10px 0 16px;}
  .ref{padding:0 14px 16px;}
  footer{padding:16px 14px 22px;}
  .fb{margin-inline-start:0;}
}
@media (max-width:520px){
  h1{font-size:17.5px;}
  h2{font-size:19.5px;}
  .wk .ttl{font-size:13px;}
  table{font-size:12.6px;}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important;}}
@media print{
  #railToggle,.copybtn,#copyFallback{display:none !important;}
  header.top,.rail,.nav,.tools,footer .fb{display:none;}
  .shell{grid-template-columns:1fr;}
  .card{box-shadow:none; break-inside:avoid;}
}

/* ================= site bar: move between the grades ================= */
.sitebar{display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto;
  padding:7px clamp(14px,3vw,28px); background:var(--rail);
  border-bottom:1px solid var(--line); font-size:12.5px; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;}
.sitebar a{flex:0 0 auto; text-decoration:none; white-space:nowrap;}
.sitehome{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2);
  font-weight:700; padding:4px 8px 4px 4px; border-radius:999px;}
.sitehome:hover{color:var(--ink);}
.sitesep{flex:none; width:1px; height:16px; background:var(--line); margin:0 4px;}
.sitepill{color:var(--ink-2); font-weight:650; padding:4px 13px; border-radius:999px;
  border:1px solid transparent; transition:background .15s,color .15s,border-color .15s;}
.sitepill:hover{background:var(--panel); border-color:var(--line); color:var(--ink);}
.sitepill[aria-current="page"]{background:var(--brand); color:var(--panel);
  border-color:var(--brand);}
:root[data-theme="dark"] .sitepill[aria-current="page"]{color:#101418;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sitepill[aria-current="page"]{color:#101418;}
}

/* ================= resume strip ================= */
.resume{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  padding:9px clamp(14px,3vw,28px); background:var(--hi);
  border-bottom:1px solid var(--line-2); font-size:13.5px; color:var(--ink-2);}
.resume[hidden]{display:none;}
.resume .rtxt{flex:1 1 auto; min-width:0;}
.resume b{color:var(--ink);}
.rbtn{flex:none; border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  border-radius:999px; padding:5px 14px; font:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer;}
.rbtn:hover{background:var(--rail); color:var(--ink);}

/* ================= home page ================= */
.home{max-width:1080px; margin:0 auto; padding:clamp(22px,4vw,48px) clamp(14px,3vw,28px) 24px;}
.home h1{font-size:clamp(24px,3.6vw,34px); line-height:1.2; margin:0 0 8px;}
.home .lede{margin:0 0 26px; max-width:62ch; color:var(--ink-2); font-size:16px; line-height:1.65;}
.home .brandmark{display:flex; align-items:center; gap:10px; margin-bottom:14px; color:var(--brand);
  font-weight:800; font-size:13px; letter-spacing:.04em;}
.pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px;}
.pcard{position:relative; display:flex; flex-direction:column; gap:10px; text-decoration:none;
  color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px; box-shadow:var(--shadow);
  border-block-start:5px solid var(--accent, var(--brand));
  transition:transform .15s, border-color .15s;}
.pcard:hover{transform:translateY(-2px); border-color:var(--ink-3);}
.pcard h2{margin:0; font-size:19px; line-height:1.3;}
.pcard .psub{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55;}
.pcard .pmeta{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px;}
.pcard .pmeta span{font-size:12px; font-weight:700; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:999px; padding:2px 10px;}
.pcard .pkind{align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.05em;
  color:var(--lab); background:var(--lab-bg); border-radius:999px; padding:2px 10px;}
.pcard .pgo{display:flex; align-items:center; gap:8px; border-top:1px solid var(--line-2);
  margin-top:6px; padding-top:11px; font-size:13.5px; font-weight:700; color:var(--brand-2);}
.pcard .pgo small{display:block; font-weight:600; color:var(--ink-3); font-size:12px;
  line-height:1.4; margin-top:2px;}
.pcard .pgo svg{flex:none; margin-inline-start:auto;}
@media (max-width:520px){ .home h1{font-size:23px;} .pcard h2{font-size:18px;} }

/* ================= taught tick + personal note (local to this device) ================= */
/* rail: progress strip + per-row markers */
.rprog{display:flex; align-items:center; gap:12px; padding:9px 16px; font-size:12.5px;
  color:var(--ink-2); background:var(--must-bg); border-bottom:1px solid var(--line-2);}
.rprog[hidden]{display:none;}
.rprog b{font-variant-numeric:tabular-nums; color:var(--must);}
.rprog .bar{flex:1 1 auto; height:6px; border-radius:999px; background:var(--line); overflow:hidden;}
.rprog .bar i{display:block; height:100%; background:var(--must); border-radius:999px;}
.wk .mk{display:contents;}
.wk .mk-note{display:inline-flex; align-items:center; gap:3px; font-weight:700;}
.wk .mk-note{color:var(--lab);}
.wk.done .ttl{color:var(--ink-3);}

/* the note card */
.card.mine{border-inline-start:4px solid var(--must);}
.card.mine h3{color:var(--must);}
.notebox{display:block; width:100%; min-height:96px; resize:vertical;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  background:var(--rail); color:var(--ink); font:inherit; font-size:14.5px; line-height:1.6;
  direction:rtl;}
.notebox:focus{outline:2px solid var(--brand-2); outline-offset:1px; background:var(--panel);}
.noteline{min-height:20px; margin-top:4px; font-size:12.5px; font-weight:650; color:var(--must);}
.privacy{display:flex; gap:8px; align-items:flex-start; margin:6px 0 0; font-size:12.5px;
  line-height:1.55; color:var(--ink-3);}
.privacy svg{flex:none; margin-top:2px; color:var(--ink-3);}
.privacy b{color:var(--ink-2);}
.privacy.warn{color:var(--ext); font-weight:650;}
.linkbtn{margin-top:10px; border:0; background:transparent; padding:2px 0; font:inherit;
  font-size:12.5px; font-weight:650; color:var(--ink-3); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;}
.linkbtn:hover,.linkbtn[data-arm="1"]{color:var(--ext);}
@media print{ .tick,.card.mine,.rprog{display:none !important;} }
.pcard .pmeta .pdone{color:var(--must); background:var(--must-bg); border-color:transparent;}

/* ================= the "taught" circle (list rows + lesson title) ================= */
:root{ --tick-fg:#ffffff; }
:root[data-theme="dark"]{ --tick-fg:#0c1a13; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --tick-fg:#0c1a13; } }

.tick{position:relative; flex:none; display:inline-grid; place-items:center;
  width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer;
  border:2.5px solid var(--ink-3); background:transparent; color:transparent;
  transition:background .15s,border-color .15s,color .15s,transform .12s;}
.tick svg{display:block; stroke-width:3.2;}
.tick:hover{border-color:var(--must); color:var(--must);}
.tick:active{transform:scale(.92);}
.tick:focus-visible{outline:3px solid var(--brand-2); outline-offset:3px;}
.tick[aria-pressed="true"]{background:var(--must); border-color:var(--must); color:var(--tick-fg);}
.tick[aria-pressed="true"]:hover{filter:brightness(1.1);}

/* the word, on hover / keyboard focus / just after a tap */
.tick::after{content:attr(data-tip); position:absolute; z-index:40; white-space:nowrap;
  top:calc(100% + 8px); inset-inline-start:50%; transform:translateX(50%);
  background:var(--ink); color:var(--bg); font-size:12.5px; font-weight:750; line-height:1;
  padding:7px 12px; border-radius:999px; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .12s;}
[dir="rtl"] .tick::after{transform:translateX(50%);}
.tick:hover::after,.tick:focus-visible::after,.tick.flash::after{opacity:1; visibility:visible;}

/* list rows: circle on the far side, away from the title, like a to-do list */
.wkrow{position:relative; display:block;}
.wkrow .wk{padding-inline-end:58px;}
.wkrow .tick{position:absolute; inset-inline-end:14px; top:50%; margin-top:-15px;}
/* the circle sits at the physical left edge in RTL: keep its tooltip inside the list */
.wkrow .tick::after{inset-inline-start:auto; inset-inline-end:-6px; transform:none;
  top:calc(100% + 6px);}
.wkrow.done{background:var(--must-bg);}
.wkrow.done .wk{background:transparent;}
.wkrow.done .wk .ttl{color:var(--ink-3);}

/* the big one at the start of the lesson title */
.titlerow{display:flex; align-items:flex-start; gap:14px; margin:6px 0 0;}
.titlerow h2{margin:0; flex:1 1 auto; min-width:0;}
.tick.big{width:44px; height:44px; margin-top:-2px; border-width:3px;}
.tick.big::after{top:calc(100% + 8px); inset-inline-start:0; transform:none;}
@media (max-width:520px){
  .tick.big{width:40px; height:40px;}
  .wkrow .tick{width:32px; height:32px; margin-top:-16px;}
}