/* ============================================================
   LEARN — the basics, styled native to the codex manuscript.
   Everything is scoped under .learn-doc so it never collides
   with the app's own classes (.card, .hero, .note, .lead...).
   Variables are mapped onto the codex palette so it stays green.
   ============================================================ */
.learn-doc{
  --text:var(--bone); --text-2:var(--muted); --text-3:var(--dim);
  --green:var(--forest); --green-l:var(--sage);
  --green-f:rgba(47,138,85,0.08); --green-f2:rgba(47,138,85,0.20);
  --amber:#c08a3a; --amber-f:rgba(192,138,58,0.10);
  --purple:var(--violet-dk); --purple-l:var(--violet); --purple-f:rgba(104,73,179,0.10);
  --line:var(--rule); --line-2:var(--rule); --line-3:var(--rule-l);
  --bg-1:var(--ink-1); --bg-2:var(--ink-2); --bg-3:var(--ink-3);
  --serif:var(--display); --sans:var(--body); --mono:var(--rubric);
  max-width:760px;
}

/* head */
.learn-doc .page-head{ padding:0 0 26px; border-bottom:1px solid var(--line); margin-bottom:34px; }
.learn-doc .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-l); margin-bottom:14px; display:inline-block; }
.learn-doc .page-head h1{ font-family:var(--serif); font-size:clamp(32px,5vw,50px); line-height:1.04; font-weight:500; color:var(--text); margin-bottom:16px; }
.learn-doc .lede{ font-family:var(--serif); font-size:20px; font-style:italic; line-height:1.55; color:var(--text-2); max-width:640px; }

/* prose */
.learn-doc .prose{ font-family:var(--sans); font-size:18px; line-height:1.68; padding-bottom:30px; }
.learn-doc .prose h2{ font-family:var(--serif); font-size:28px; font-weight:500; color:var(--text); margin:42px 0 14px; }
.learn-doc .prose h2:first-child{ margin-top:0; }
.learn-doc .prose h3{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--text); margin:28px 0 8px; }
.learn-doc .prose p{ margin-bottom:15px; color:var(--text-2); }
.learn-doc .prose strong{ color:var(--text); font-weight:600; }
.learn-doc .prose em{ font-style:italic; color:var(--text); }
.learn-doc .prose ul, .learn-doc .prose ol{ margin:8px 0 18px 22px; color:var(--text-2); }
.learn-doc .prose li{ margin-bottom:6px; }
.learn-doc .prose hr{ border:none; border-top:1px solid var(--line); margin:36px 0; }
.learn-doc .prose a{ color:var(--green-l); border-bottom:1px solid var(--green-f2); transition:border-color .15s, color .15s; }
.learn-doc .prose a:hover{ color:var(--text); border-bottom-color:var(--green-l); }

/* callouts */
.learn-doc .callout{ background:var(--bg-2); border:1px solid var(--rule); border-left:2px solid var(--green); padding:16px 20px; margin:22px 0; border-radius:4px; font-style:normal; }
.learn-doc .callout .label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-l); margin-bottom:6px; }
.learn-doc .callout p{ margin-bottom:10px; color:var(--text-2); }
.learn-doc .callout p:last-child{ margin-bottom:0; }
.learn-doc .callout b{ color:var(--text); }
.learn-doc .callout.warn{ border-left-color:var(--amber); background:var(--amber-f); }
.learn-doc .callout.warn .label{ color:var(--amber); }
.learn-doc .callout.note{ border-left-color:var(--purple); background:var(--purple-f); }
.learn-doc .callout.note .label{ color:var(--purple-l); }

/* pull quote */
.learn-doc .pull{ font-family:var(--serif); font-style:italic; font-size:23px; line-height:1.5; color:var(--text); border-left:2px solid var(--green); padding:6px 0 6px 22px; margin:28px 0; }

/* tables */
.learn-doc .table-wrap{ overflow-x:auto; margin:22px 0; }
.learn-doc table.t{ width:100%; border-collapse:collapse; font-size:15px; }
.learn-doc table.t th, .learn-doc table.t td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--text-2); vertical-align:top; }
.learn-doc table.t th{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.learn-doc table.t td strong{ color:var(--text); }

/* faq accordion */
.learn-doc .faq-item{ border-bottom:1px solid var(--line); padding:16px 0; }
.learn-doc .faq-q{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.learn-doc .faq-q::after{ content:"+"; font-family:var(--serif); color:var(--green-l); font-size:20px; }
.learn-doc .faq-item.open .faq-q::after{ content:"\2212"; }
.learn-doc .faq-a{ display:none; padding-top:12px; color:var(--text-2); font-size:17px; line-height:1.62; }
.learn-doc .faq-item.open .faq-a{ display:block; }
.learn-doc .faq-a p{ margin-bottom:10px; }
.learn-doc .faq-a a{ color:var(--green-l); border-bottom:1px solid var(--green-f2); }

/* glossary */
.learn-doc .gl-item{ border-bottom:1px solid var(--line); padding:15px 0; display:grid; grid-template-columns:210px 1fr; gap:24px; align-items:baseline; }
.learn-doc .gl-term{ font-family:var(--mono); font-size:14px; letter-spacing:.04em; color:var(--green-l); }
.learn-doc .gl-def{ font-size:16px; color:var(--text-2); line-height:1.55; }
.learn-doc .gl-def strong{ color:var(--text); }

/* table of contents block */
.learn-doc .toc{ background:var(--bg-2); border:1px solid var(--rule); border-radius:5px; padding:16px 20px; margin-bottom:30px; }
.learn-doc .toc .label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }
.learn-doc .toc ul{ margin:0; list-style:none; padding:0; }
.learn-doc .toc li{ margin:6px 0; }
.learn-doc .toc a{ color:var(--text-2); }
.learn-doc .toc a:hover{ color:var(--green-l); }

/* dose calculator + static chart */
.learn-doc .dose-tool{ background:var(--bg-1); border:1px solid var(--rule); border-radius:8px; padding:22px; margin:26px 0; }
.learn-doc .dose-tool .tool-label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-l); margin-bottom:14px; }
.learn-doc .dose-tool .controls{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.learn-doc .dose-tool .controls.solo{ grid-template-columns:1fr; }
.learn-doc .dose-tool label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:6px; }
.learn-doc .dose-tool select, .learn-doc .dose-tool input{ width:100%; background:var(--bg-3); border:1px solid var(--rule-l); color:var(--text); padding:10px 12px; border-radius:5px; font-family:var(--sans); font-size:15px; outline:none; transition:border-color .15s; }
.learn-doc .dose-tool select:focus, .learn-doc .dose-tool input:focus{ border-color:var(--green); }
.learn-doc .dose-tool .custom-row{ display:none; grid-column:1 / -1; }
.learn-doc .dose-tool .custom-row.show{ display:block; }
.learn-doc #xfactorRow.hidden{ display:none; }
.learn-doc .dose-results{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:5px; overflow:hidden; }
.learn-doc .dose-cell{ background:var(--bg-2); padding:14px 12px; text-align:center; }
.learn-doc .dose-cell .tier{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; min-height:1.2em; }
.learn-doc .dose-cell .val{ font-family:var(--serif); font-size:24px; color:var(--text); line-height:1.1; }
.learn-doc .dose-cell .unit{ font-family:var(--mono); font-size:11px; color:var(--text-3); margin-top:4px; }
.learn-doc .dose-cell.threshold .val{ color:var(--green-l); }
.learn-doc .dose-cell.annihilation .val{ color:var(--amber); }
.learn-doc .dose-source{ font-size:13px; color:var(--text-3); margin-top:14px; font-style:italic; }
.learn-doc .dose-chart{ background:var(--bg-1); border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin:26px 0; }
.learn-doc .dose-chart h4{ padding:13px 20px; background:var(--bg-2); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-l); border-bottom:1px solid var(--rule); }
.learn-doc .dose-chart .chart-table{ width:100%; border-collapse:collapse; font-size:15px; }
.learn-doc .dose-chart .chart-table th, .learn-doc .dose-chart .chart-table td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:center; color:var(--text-2); }
.learn-doc .dose-chart .chart-table th{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); background:var(--bg-2); }
.learn-doc .dose-chart .chart-table td:first-child, .learn-doc .dose-chart .chart-table th:first-child{ text-align:left; color:var(--text); }
.learn-doc .dose-chart .chart-table tbody tr.threshold td:first-child{ color:var(--green-l); }
.learn-doc .dose-chart .chart-table tbody tr.uncomf td:first-child{ color:var(--amber); }

/* the learn sidebar chapter number sits in the manuscript rubric face */
.side button .n{ font-family:var(--rubric); }

/* ============================================================
   HOME — offerings extras (the lead-in + the closing note)
   ============================================================ */
.hsub{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.hsub .subhead{ margin:6px 0 0; }
.hsub p{ font-family:var(--body); font-style:italic; color:var(--muted); margin:5px 0 0; max-width:60ch; }
.hnote{ max-width:760px; margin:clamp(40px,7vh,80px) auto 0; padding:0 clamp(20px,5vw,40px); }
.hnote p{ font-family:var(--body); font-style:italic; font-size:17px; line-height:1.62; color:var(--muted); border-top:1px solid var(--rule); padding-top:22px; }
.hnote b{ color:var(--bone); font-style:normal; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:820px){
  .learn-doc{ max-width:none; }
  .learn-doc .gl-item{ grid-template-columns:1fr; gap:4px; }
  .learn-doc .dose-tool .controls{ grid-template-columns:1fr; }
  .learn-doc .dose-results{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .learn-doc .prose{ font-size:17px; }
  .learn-doc .dose-results{ grid-template-columns:1fr; }
}


/* resource link card (e.g. the AllowedHere legality map under Legality) */
.learn-doc .reslink-wrap{ margin:24px 0; }
.learn-doc a.reslink{ display:flex; gap:18px; align-items:center; text-decoration:none; border:1px solid var(--rule); border-left:2px solid var(--green); border-radius:8px; padding:16px; background:var(--bg-2); transition:border-color .15s, background .15s; }
.learn-doc a.reslink:hover{ border-color:var(--green-l); background:var(--bg-3); }
.learn-doc .reslink-img{ width:124px; height:86px; object-fit:cover; border-radius:6px; border:1px solid var(--rule); flex-shrink:0; }
.learn-doc .reslink-body{ display:flex; flex-direction:column; gap:5px; }
.learn-doc .reslink-t{ font-family:var(--serif); font-size:19px; color:var(--text); }
.learn-doc .reslink-d{ font-size:15px; color:var(--text-2); line-height:1.5; }
.learn-doc .reslink-go{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-l); margin-top:3px; }
@media (max-width:520px){ .learn-doc a.reslink{ flex-direction:column; align-items:flex-start; } .learn-doc .reslink-img{ width:100%; height:150px; } }


/* homepage email link */
.hnote .emaillink{ color:var(--sage); border-bottom:1px solid rgba(47,138,85,0.30); transition:color .15s, border-color .15s; }
.hnote .emaillink:hover{ color:var(--bone); border-bottom-color:var(--sage); }


/* ---- in-place editing (editor mode only; body.ss-edit) ---- */
body.ss-edit [data-ek]{ cursor:text; }
body.ss-edit [data-ek]:hover{ outline:1px dashed rgba(111,165,128,0.5); outline-offset:3px; border-radius:3px; }
body.ss-edit [data-ek]:focus{ outline:1px solid #6fa580; outline-offset:3px; background:rgba(111,165,128,0.07); }
body.ss-edit [data-sort]>[data-sk]{ cursor:grab; }
body.ss-edit [data-sort]>[data-sk]:active{ cursor:grabbing; }
body.ss-edit .ss-dragging{ opacity:.4; }
.ss-editbar{ position:fixed; left:14px; bottom:14px; z-index:9000; background:#19231d; border:1px solid #2f8a55; color:#cfe3d6; font:12px/1.45 system-ui,-apple-system,sans-serif; padding:8px 13px; border-radius:9px; box-shadow:0 8px 28px rgba(0,0,0,.45); max-width:330px; }
.ss-editbar b{ color:#7bbf93; }
.learn-doc .flabel, .side .flabel{ display:inline; }


/* edit-mode toggle in the topbar (only Mariano sees it) */
.ss-edittoggle{ display:inline-flex; align-items:center; gap:6px; margin-left:16px; cursor:pointer; font-family:var(--rubric,ui-monospace,monospace); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dim,#8a9690); user-select:none; white-space:nowrap; }
.ss-edittoggle input{ accent-color:#2f8a55; width:14px; height:14px; cursor:pointer; margin:0; }
body.ss-edit .ss-edittoggle{ color:#7bbf93; }
/* the bottom instruction bar shows only while editing is ON */
.ss-editbar{ display:none; }
body.ss-edit .ss-editbar{ display:block; }