/* Learn pages: builds on ../css/style.css tokens. */
:root {
  --f0: #fde2e1; --f1: #dbeafe; --f2: #dcfce7; --f3: #fef3c7; --f4: #ede9fe; --f5: #ccfbf1; --f6: #fce7f3; --f7: #e0e7ff;
  --hl: #b3261e; --hv: rgb(179 38 30 / .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --f0: #4a2525; --f1: #1f3550; --f2: #1f4030; --f3: #4a3b16; --f4: #352a50; --f5: #18403b; --f6: #4a2238; --f7: #283058;
    --hl: #ff8a80; --hv: rgb(255 138 128 / .22);
  }
}
:root[data-theme="dark"] {
  --f0: #4a2525; --f1: #1f3550; --f2: #1f4030; --f3: #4a3b16; --f4: #352a50; --f5: #18403b; --f6: #4a2238; --f7: #283058;
  --hl: #ff8a80; --hv: rgb(255 138 128 / .22);
}

.learn main { padding-bottom: 48px; }
.learn section { padding-top: 40px; }
.learn section > p, .learn section > ul, .learn section > ol { max-width: 50rem; }
.learn h3 { margin-top: 1.6rem; }
.mono { font-family: var(--mono); }

/* ---------- page header / nav ---------- */
.learn .masthead { padding: 36px 0 28px; }
.sectionnav a.here { color: var(--text); border-bottom-color: var(--accent); }
.sectionnav .back { margin-left: auto; }

/* ---------- cards on the overview ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 16px; }
.card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; color: inherit; text-decoration: none; }
.card:hover { border-color: var(--accent); }
.card strong { display: block; color: var(--accent); margin-bottom: 4px; }
.card span { font-size: .9rem; color: var(--muted); }

/* ---------- comparison table ---------- */
.tablewrap table.cmp { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.cmp th, .cmp td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.cmp th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* ---------- layout bars ---------- */
.layout { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 16px 0; font-size: .78rem; min-height: 64px; }
.layout > div { padding: 8px; border-right: 1px solid var(--border); min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; justify-content: center; }
.layout > div:last-child { border-right: 0; }
.layout b { font-size: .82rem; }
.layout .mono { color: var(--muted); font-size: .72rem; }

/* ---------- formulas / tips ---------- */
.formula { font-family: var(--mono); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin: 12px 0; overflow-x: auto; white-space: pre; font-size: .88rem; max-width: 50rem; }
.tip { background: var(--ok-soft); border-left: 4px solid var(--ok); border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; max-width: 50rem; }
.tip b:first-child { color: var(--ok); }
details.toolout { margin: 12px 0; max-width: 50rem; }
details.toolout summary { cursor: pointer; font-weight: 600; color: var(--muted); }
details.toolout pre { font-size: .78rem; max-height: 360px; overflow: auto; }


/* ---------- hex widget ---------- */
.hexwidget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 16px 0 24px; overflow: hidden; transition: box-shadow .3s; }
.hexwidget.flash { box-shadow: 0 0 0 3px var(--accent); }
.hw-head { padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); overflow-wrap: anywhere; }
.hw-body { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.hw-dump { font: 12.5px/1.55 var(--mono); padding: 8px 12px; max-height: 460px; overflow: auto; border-right: 1px solid var(--border); }
.hr { white-space: nowrap; }
.ho { color: var(--muted); margin-right: 12px; user-select: none; }
.hx span { display: inline-block; width: 2.4ch; text-align: center; cursor: pointer; border-radius: 2px; }
.hx span:nth-child(8) { margin-right: 1ch; }
.ha { margin-left: 12px; }
.ha span { display: inline-block; width: 1ch; text-align: center; cursor: pointer; }
.f0 { background: var(--f0); } .f1 { background: var(--f1); } .f2 { background: var(--f2); } .f3 { background: var(--f3); }
.f4 { background: var(--f4); } .f5 { background: var(--f5); } .f6 { background: var(--f6); } .f7 { background: var(--f7); }
.hb.big, .ab.big { background: transparent; color: var(--muted); }
.hv { box-shadow: inset 0 0 0 99px var(--hv); }
.hl { outline: 2px solid var(--hl); outline-offset: -1px; position: relative; z-index: 1; }

.hw-side { display: flex; flex-direction: column; min-width: 0; max-height: 460px; }
.hw-explain { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .88rem; min-height: 4.2em; overflow-wrap: anywhere; }
.hw-explain .desc { margin: 6px 0 0; color: var(--text); }
.hw-fields { overflow: auto; padding: 4px 10px 10px; }
table.ft { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: 8px; }
table.ft caption { text-align: left; font-weight: 700; padding: 4px 6px; background: var(--surface-2); border-radius: 4px 4px 0 0; }
table.ft.del caption { background: var(--accent-soft); color: var(--accent); }
table.ft.lfn caption { font-style: italic; }
table.ft.dim { opacity: .6; }
table.ft td { padding: 3px 6px 3px 0; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
table.ft td.fo { font-family: var(--mono); color: var(--muted); width: 3.4em; }
table.ft td.fn { width: 38%; }
table.ft tr { cursor: pointer; }
table.ft tr:hover td { background: var(--surface-2); }
table.ft tr.sel td { background: var(--accent-soft); }
table.ft tr.derived td, table.ft tr.jump td { color: var(--muted); font-style: italic; }
table.ft tr.has-desc .fn::after { content: " ⓘ"; color: var(--muted); font-size: .85em; }
table.ft .go { font-style: normal; color: var(--accent); text-decoration: underline; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; border: 1px solid var(--border); }
.sw.f-1 { background: transparent; border: 1px dashed var(--border); }

@media (max-width: 860px) {
  .hw-body { grid-template-columns: minmax(0, 1fr); }
  .hw-dump { border-right: 0; border-bottom: 1px solid var(--border); max-height: 300px; }
  .hw-side { max-height: none; }
  .hw-fields { max-height: 420px; }
  .layout { flex-wrap: wrap; }
  .layout > div { flex: 1 1 40% !important; border-bottom: 1px solid var(--border); }
}

/* ---------- exercises and playgrounds (js/exercises.js) ---------- */
.lx, .lx-play { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; max-width: 56rem; }
.lx.solved { border-color: var(--ok); background: linear-gradient(to bottom, var(--ok-soft), var(--surface) 40%); }
.lx-badge { display: inline-block; font: 700 .72rem/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 12px; background: var(--surface-2); color: var(--muted); margin-bottom: 6px; }
.lx.solved .lx-badge { background: var(--ok-soft); color: var(--ok); }
.lx.solved .lx-badge::after { content: " ✓"; }
.lx-q { margin: 4px 0 10px; }
.lx-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lx-row input { font: 1rem var(--mono); padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); min-width: 0; flex: 0 1 16rem; }
.lx-row input:focus, .lx-grid input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.lx .btn-sm, .lx-play .btn-sm { font-size: .85rem; padding: 6px 12px; border-radius: 6px; }
.lx-play .btn-secondary { font: 600 .85rem var(--sans); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.lx-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-choices button { font: inherit; font-size: .92rem; text-align: left; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; cursor: pointer; }
.lx-choices button:hover { border-color: var(--accent); }
.lx-choices button.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lx-fb { margin: 10px 0 0; font-size: .9rem; }
.lx-fb:empty { display: none; }
.lx-fb.ok { color: var(--ok); }
.lx-fb.err { color: var(--accent); }
.lx-acts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: .9rem; }
.lx-hint, .lx-sol { display: none; margin: 10px 0 0; padding: 10px 14px; border-radius: 6px; font-size: .92rem; }
.lx-hint { background: var(--surface-2); color: var(--muted); }
.lx-sol { border: 1px dashed var(--border); background: var(--surface-2); }
.lx-hint.show, .lx-sol.show { display: block; }
.lx-sol p { margin: .3rem 0; }
.lx-progress { margin: 0 0 4px; }
.lx-play > p { margin: 4px 0 10px; max-width: 50rem; }
.lx-grid { font-family: var(--mono); overflow-x: auto; padding-bottom: 4px; }
.lx-line { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.lx-off { color: var(--muted); font-size: .8rem; margin-right: 8px; }
.lx-grid input { width: 2.1em; padding: 3px 0; text-align: center; font: .9rem var(--mono); text-transform: uppercase; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--text); margin: 1px 0; }
.lx-grid input:nth-of-type(8) { margin-right: 8px; }
.lx-grid input.changed { background: var(--hv); border-color: var(--hl); font-weight: 700; }
.lx-grid input.bad { border-color: var(--accent); outline: 2px solid var(--accent); }
.lx-out { margin: 12px 0 0; }