/* OffensiveRamen — /cheatsheets/ : list index + per-sheet page.
   Each sheet is its own crawlable page (/cheatsheets/<slug>). Uses the shared
   design tokens from style.css (--bg,--bg2,--panel,--ink,--dim,--red,--red2,
   --ember,--line,--mono,--wrap). No inline styles. */

.cs-main{padding-bottom:40px}

/* ---- header block ---- */
.cs-head{padding:8px 0 24px;border-bottom:1px solid var(--line)}
.back-link,.cs-back a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--dim);text-decoration:none;font:600 .85rem/1 var(--mono)}
.back-link:hover,.back-link:focus-visible,.cs-back a:hover,.cs-back a:focus-visible{color:var(--ink)}
.cs-head h1,.cs-view h1{font-weight:900;font-size:clamp(1.7rem,5vw,3rem);margin:.1em 0 .35em}
.cs-icon{font-size:.8em}
.cs-lead{font-size:clamp(1rem,2.2vw,1.2rem);color:var(--ink);max-width:60ch}
.cs-warn{
  margin-top:1em;padding:12px 14px;max-width:70ch;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:3px;color:var(--dim);font:600 .9rem/1.5 var(--mono)}
.cs-warn strong{color:var(--ember)}
/* 'try the interactive tool' callout linking a sheet to its matching tool */
.cs-tool{
  margin-top:1em;padding:10px 14px;max-width:70ch;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ember);
  border-radius:3px;font:600 .9rem/1.5 var(--mono);color:var(--dim)}
.cs-tool a{
  display:inline-flex;align-items:center;gap:.35em;min-height:32px;
  color:var(--red2);text-decoration:none}
.cs-tool a:hover,.cs-tool a:focus-visible{color:var(--ember);text-decoration:underline}
.cs-tool-icon{font-style:normal}

/* ---- index: searchable list of links ---- */
.cs-index{margin-top:24px;max-width:900px}
#search{
  width:100%;min-height:44px;padding:10px 12px;
  font:14px/1.2 var(--mono);background:var(--bg2);color:var(--ink);
  border:1px solid var(--line);border-radius:3px;outline:none}
#search::placeholder{color:var(--dim)}
#search:focus{border-color:var(--red2)}
#count{font:600 11px/1 var(--mono);color:var(--dim);padding:10px 2px}
#list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
#list li{margin:0}
#list li[hidden]{display:none}
#list li a{
  display:flex;align-items:center;min-height:44px;padding:8px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  color:var(--dim);text-decoration:none;font:13px/1.3 var(--mono);word-break:break-word}
#list li a:hover{background:var(--bg2);color:var(--ink);border-color:var(--red2)}
#list li a:focus-visible{outline:2px solid var(--ember);outline-offset:-2px;color:#fff}
#noresults{color:var(--dim);font:600 .9rem/1.5 var(--mono);margin-top:16px}

/* ---- per-sheet page ---- */
.cs-view{max-width:900px}
.cs-back{margin:0 0 6px}

.cs-toc{
  margin:20px 0;padding:12px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:3px}
.cs-toc-title{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
.cs-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.cs-toc li{margin:0}
.cs-toc a{font:13px/1.4 var(--mono);color:var(--red2);text-decoration:none}
.cs-toc a:hover,.cs-toc a:focus-visible{color:var(--ember);text-decoration:underline}

.cs-body{display:flex;flex-direction:column;gap:22px;margin-top:20px}
.cs-section{scroll-margin-top:80px}
.cs-h{
  margin:0 0 8px;font:800 .95rem/1.3 var(--mono);letter-spacing:.02em;color:var(--ink);
  scroll-margin-top:80px}
.cs-anchor{margin-left:.4rem;color:var(--dim);text-decoration:none;font-weight:400;opacity:.4;transition:opacity .12s ease}
.cs-h:hover .cs-anchor,.cs-h:focus-within .cs-anchor,.cs-anchor:focus-visible{opacity:1}
.cs-anchor:hover{color:var(--red2)}
.cs-h:target{color:var(--ember)}
@media (hover:hover){.cs-anchor{opacity:0}}

.cs-sheet{
  margin:0;padding:14px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto;
  font:13px/1.6 var(--mono);color:var(--ink);tab-size:4}

@media (max-width:480px){
  #list{grid-template-columns:1fr}
  .cs-sheet{font:12px/1.55 var(--mono);padding:10px 12px}
}

@media print{
  .cs-back,.cs-toc,#gate,.sh,.sf{display:none}
  .cs-sheet{border:none;padding:0}
}