/* Lessons (learn/lessons/*.html), on top of /assets/site.css and /learn/learn.css (header, kicker, lede).
   Long-form reading column, formula and worked-example blocks, the poker lens, tables and the interactive widgets
   (lesson.js). Bump the ?v= on every lesson page when this file changes. */
.lesson{padding:12px 0 84px;}
.lesson .col{max-width:780px;}
.toc{margin:6px 0 34px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);}
.toc b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;color:var(--dim);font-size:14.5px;line-height:1.9;}
.toc a{color:var(--cream);}
.toc a:hover{color:var(--cyan-neon);}

.lesson section{padding-top:30px;scroll-margin-top:84px;}
.lesson h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,29px);font-weight:700;line-height:1.25;color:var(--cream);margin-bottom:12px;}
.lesson h2 .n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--gold);margin-bottom:6px;}
.lesson h3{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--gold-hi);margin:22px 0 8px;}
.lesson p{font-size:16.5px;line-height:1.7;color:var(--cream);margin:0 0 14px;}
.lesson p.dim{color:var(--dim);}
.lesson ul.pts{margin:0 0 16px 20px;font-size:16px;line-height:1.7;}
.lesson ul.pts li{margin-bottom:6px;}
.lesson a.g{color:var(--cream);text-decoration:underline dotted var(--gold);text-underline-offset:3px;}
.lesson a.g:hover{color:var(--cyan-neon);}
.lesson strong{color:var(--gold-hi);font-weight:700;}

.formula{margin:16px 0 18px;padding:14px 18px;border-left:3px solid var(--gold);border-radius:0 10px 10px 0;background:var(--card);
  font-family:var(--mono);font-size:15px;line-height:1.7;color:var(--cream);overflow-x:auto;}
.formula .lab{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.formula .where{display:block;margin-top:8px;font-family:var(--sans);font-size:14px;color:var(--dim);line-height:1.6;}

.worked{margin:18px 0 20px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--card2) 0%,var(--card) 70%);}
.worked .lab{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.worked p{font-size:15.5px;margin-bottom:8px;}
.worked p:last-child{margin-bottom:0;}

.lens{margin:20px 0;padding:14px 18px;border-left:3px solid var(--pink);border-radius:0 10px 10px 0;background:rgba(255,62,154,.06);}
.lens .lab{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--pink-neon);margin-bottom:6px;}
.lens p{font-size:15.5px;margin-bottom:0;}

.tblw{overflow-x:auto;margin:14px 0 20px;}
table.t{border-collapse:collapse;width:100%;font-size:14.5px;}
table.t th{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
table.t td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--cream);vertical-align:top;}
table.t td.num{font-family:var(--mono);white-space:nowrap;text-align:right;}
table.t td:first-child{white-space:nowrap;}
.lesson sup,.lesson sub{font-size:12px;}
table.t .up{color:var(--green);}
table.t .down{color:var(--red);}

/* the interactive widgets (lesson.js) */
.widget{margin:22px 0 26px;padding:18px;border:1px solid var(--gold-line);border-radius:14px;background:var(--bg2);}
.widget .wh{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.ctrls{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 14px;margin-bottom:14px;}
.ctrls label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--dim);}
.ctrls input,.ctrls select{font:14px var(--mono);color:var(--cream);background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;min-height:36px;width:100%;}
.ctrls input:focus-visible,.ctrls select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-color:var(--cyan-deep);}
.ctrls input[type=range]{padding:0;accent-color:var(--cyan);}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px;}
.days label{font-size:12.5px;color:var(--dim);display:flex;flex-direction:column;gap:4px;}
.days input{font:14px var(--mono);color:var(--cream);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 6px;width:100%;min-height:36px;}
.days input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.chart{width:100%;height:auto;display:block;margin:4px 0 10px;}
.chart text{font-family:var(--mono);font-size:12px;fill:var(--dim);}
.out{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--dim);}
.out b{font-family:var(--mono);color:var(--cream);font-weight:500;}
.out .up{color:var(--green);}
.out .down{color:var(--red);}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--dim);margin-top:4px;}
.legend i{display:inline-block;width:18px;height:0;border-top:3px solid var(--gold);vertical-align:middle;margin-right:6px;}
.legend i.today{border-top:2px dashed var(--cream);}
.legend i.maint{border-top:2px dashed var(--red);}
.nojs{color:var(--dim);font-size:14.5px;}
html.js .nojs{display:none;}
html:not(.js) .widget .live{display:none;}

.next{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.next a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--cream);}
.next a:hover{border-color:var(--gold-line);}
.next a span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.callout{margin-top:40px;border-left:3px solid var(--pink);padding:12px 18px;background:rgba(255,62,154,.05);border-radius:0 8px 8px 0;color:var(--dim);font-size:15px;}
.callout b{color:var(--cream);font-weight:500;}

@media(max-width:720px){
  .toc ol{columns:1;}
  .lesson p{font-size:16px;}
  .days{grid-template-columns:repeat(3,minmax(0,1fr));}
  .widget{padding:14px;}
}