/* content.css - section cards, headings, math blocks, theorems, forms,
   curve player, tables, galleries, figures, footer */

.wrap > section{
  background:var(--panel);
  border:1.5px solid var(--rule);
  border-top-width:4px;
  box-shadow:4px 4px 0 rgba(24,21,17,.07);
  padding:20px 26px 14px;
  margin:22px 0;
  transition:box-shadow .25s ease, transform .25s ease;
}
.wrap > section:hover{box-shadow:7px 7px 0 rgba(24,21,17,.10);transform:translateY(-1px)}
.wrap > section:nth-of-type(5n+1){border-top-color:var(--link)}
.wrap > section:nth-of-type(5n+2){border-top-color:var(--orange)}
.wrap > section:nth-of-type(5n+3){border-top-color:var(--green)}
.wrap > section:nth-of-type(5n+4){border-top-color:var(--kill)}
.wrap > section:nth-of-type(5n+5){border-top-color:var(--purple)}

h2.h{font-size:16px;font-weight:700;margin:0 0 8px;letter-spacing:.2px;
  position:relative;padding-bottom:8px}
h2.h .cm{color:var(--green)}
h2.h .id{color:var(--dim)}
h2.h::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--rule);transition:width .6s ease .1s}
.reveal.in h2.h::after{width:46px}

/* math / display blocks */
.block{background:var(--panel);border:1.5px solid var(--rule);
  box-shadow:4px 4px 0 var(--rule);padding:16px 18px;margin:18px 0;overflow-x:auto}
.block .cap{color:var(--dim);font-size:12.5px;margin-bottom:8px}
.tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:#181511;color:#f5f2ea;padding:1px 8px}
.note{color:var(--dim);font-size:13px}

/* theorems / proofs */
.thm{border:1.5px solid var(--rule);background:var(--panel);margin:22px 0;
  box-shadow:5px 5px 0 var(--rule)}
.thm .head{background:var(--fg);color:var(--bg);padding:7px 14px;font-size:13px;letter-spacing:.06em}
.thm .body{padding:14px 18px}
.proof{border-left:3px solid var(--line);padding:2px 0 2px 16px;margin:14px 0;color:#2a2620;font-size:13px;line-height:1.55}
.proof .qed{float:right}
.caseh{color:var(--orange);font-weight:700}

/* three collapsible forms */
.forms .row{border:1.5px solid var(--rule);margin:10px 0;background:var(--panel)}
.forms .row>button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;
  align-items:center;width:100%;cursor:pointer;padding:11px 16px;font-family:var(--mono);font-size:14px}
.forms .row>button:hover{background:#dde1e7}
.forms .row .arr{color:var(--green);transition:transform .25s}
.forms .row.open .arr{transform:rotate(90deg)}
.forms .row .panel{max-height:0;overflow:hidden;transition:max-height .35s ease;
  border-top:0 solid var(--line)}
.forms .row.open .panel{max-height:320px;border-top-width:1.5px}
.forms .row .panel .inner{padding:14px 16px}
.forms .keep{color:var(--link);font-weight:700}

/* curve player */
svg.fig{display:block;width:100%;height:auto;background:#fff;border:1.5px solid var(--rule)}
.player-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.tasks button{font-family:var(--mono);font-size:12.5px;border:1.5px solid var(--rule);border-right:none;
  background:var(--panel);padding:6px 11px;cursor:pointer}
.tasks button:last-child{border-right:1.5px solid var(--rule)}
.tasks button.on{background:var(--fg);color:var(--bg)}
.transport{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:13px}
.transport button{font-family:var(--mono);font-size:13px;border:1.5px solid var(--rule);
  background:var(--panel);padding:5px 14px;cursor:pointer}
.transport input[type=range]{flex:1;accent-color:var(--link)}
.curve-legend{font-size:13px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px 18px;margin-top:12px}
.curve-legend b{font-weight:400;display:flex;align-items:center;justify-content:space-between}
.curve-legend .sw{display:flex;align-items:center;gap:8px}
.curve-legend .sw i{width:22px;border-top-width:3px;border-top-style:solid;display:inline-block}
.curve-legend .val{font-weight:700}

/* tables / kill-fraction bars / galleries */
table{border-collapse:collapse;width:100%;font-size:13px;margin:12px 0}
th,td{border:1.5px solid var(--rule);padding:6px 9px;text-align:right}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--fg);color:var(--bg)}
tr.hard td{background:#e7eef7}
table.kv th,table.kv td{text-align:left}
table.kv{width:auto;max-width:100%}
table.kv td:last-child,table.kv th:last-child{padding-left:22px}
.killrow{display:grid;grid-template-columns:120px 1fr 52px;gap:10px;align-items:center;margin:6px 0;font-size:13px}
.killrow .t{text-align:right}
.killtrack{height:16px;border:1.5px solid var(--rule);background:#fff}
.killfill{height:100%;width:0;background:var(--kill);transition:width .9s ease}
h3.grp{font-family:var(--mono);font-size:13.5px;font-weight:700;margin:24px 0 2px;
  padding-bottom:5px;border-bottom:1.5px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:10px}
.gallery figure{margin:0;min-width:0;border:1.5px solid var(--rule);background:#fff;padding:8px;box-shadow:4px 4px 0 var(--rule)}
.gallery img{width:100%;height:auto;display:block}
.gallery figcaption{color:var(--dim);font-size:11.5px;margin-top:6px}

/* beta_t landscape figure */
.betafig{display:block;max-width:380px;width:100%;height:auto;margin:10px auto 2px;
  border:1.5px solid var(--rule);background:#fff}

/* two small side-by-side explanatory figures */
.twofig{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.twofig figure{flex:1 1 220px;max-width:300px;margin:0;border:1.5px solid var(--rule);
  background:#fff;padding:10px 10px 8px;box-shadow:4px 4px 0 var(--rule)}
.twofig figure > img{display:block;width:100%;height:auto;margin:2px auto 0}
.twofig figcaption{margin-top:6px}

/* selectable algorithm flowcharts */
.algos{margin-top:6px}
.algo-tabs{display:flex;gap:0;margin-bottom:12px;border:1.5px solid var(--rule);
  width:max-content;max-width:100%;box-shadow:3px 3px 0 var(--rule)}
.algo-tab{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 16px;
  font-family:var(--mono);font-size:13px;color:var(--fg);
  border-right:1.5px solid var(--rule)}
.algo-tab:last-child{border-right:none}
.algo-tab.on{background:var(--fg);color:var(--bg)}
.algo-tab:not(.on):hover{background:#dde1e7}
.algo-fig{margin:0;border:1.5px solid var(--rule);background:#fff;padding:12px;
  box-shadow:4px 4px 0 var(--rule)}
.algo-fig img{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.algo-fig figcaption{margin-top:10px}

/* footer + authors */
footer{border-top:2px solid #000;background:#101216;margin-top:48px;
  padding:24px 0 44px;color:#aab1bd;font-size:13px}
footer a{color:#9cc0ec;border-bottom-color:#3d5878}
footer a:hover{background:#1c2230}
footer .nm{color:#f3f4f6}
.authors{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px}
.author{display:flex;gap:14px;align-items:center}
.author img{width:64px;height:64px;border:1.5px solid var(--rule);object-fit:cover;background:#fff}
.author .nm{font-weight:700}
.author .meta{font-size:13px;line-height:1.5}
.author .meta a{border-bottom:1px dotted}