/* Cheat sheets (/cheatsheets). Uses the tokens from style.css; tables come
   from the site-wide .article-body table styles. */

/* ---------- Index ---------- */
.cs-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;
  margin:0 auto 3rem;max-width:1100px;
}
.cs-card{
  display:flex;flex-direction:column;gap:0.85rem;padding:1.5rem 1.6rem 1.25rem;min-width:0;
  border:1px solid var(--lc-strong);border-radius:var(--radius-lg);background:var(--surface);
  color:inherit;text-decoration:none;
  transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cs-card:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.28);color:inherit}
.cs-card-kicker{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ac);opacity:0.85}
.cs-card-title{font-family:var(--fh);font-size:1.2rem;color:var(--white);line-height:1.3;transition:color var(--transition)}
.cs-card:hover .cs-card-title{color:var(--ac)}
.cs-card-desc{font-size:0.85rem;line-height:1.65;opacity:0.7}
.cs-card-sections{display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:auto}
.cs-card-sections span{
  font-size:0.7rem;padding:0.15rem 0.5rem;border:1px solid var(--lc);border-radius:999px;
  opacity:0.75;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cs-card-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:0.8rem;font-size:0.75rem;
  padding-top:0.85rem;border-top:1px solid var(--lc);
}
.cs-card-foot > span:first-child{opacity:0.6}
.cs-card-open{color:var(--ac);white-space:nowrap}

.cs-about{max-width:800px;margin:0 auto}
.cs-about h2:first-child{margin-top:0}
.cs-about h3{font-size:1rem}

/* ---------- Sheet ---------- */
.cs-sheet{width:100%;max-width:1060px;margin:0 auto;min-width:0}
.cs-header{margin-bottom:1.25rem;gap:0.5rem}
.cs-intro{font-size:0.95rem;line-height:1.7;opacity:0.82;max-width:78ch}
.cs-header .byline{margin-top:0.2rem}

.cs-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1rem;
  margin-bottom:1rem;
}
.cs-print svg{flex-shrink:0}
.cs-filter{display:flex;align-items:center;gap:0.6rem;flex:1 1 260px;min-width:0;max-width:440px}
.cs-filter[hidden]{display:none}
.cs-filter-input{
  width:100%;min-width:0;padding:0.55rem 0.85rem;
  font-family:var(--fm);font-size:0.85rem;color:var(--white);
  background:var(--surface);border:1px solid var(--lc-strong);border-radius:var(--radius);outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.cs-filter-input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-dim)}
.cs-filter-input::placeholder{color:var(--tx);opacity:0.5}
.cs-filter-count{font-size:0.75rem;opacity:0.7;white-space:nowrap}
.cs-back{margin-left:auto;font-size:0.8rem;color:var(--tx);opacity:0.75;white-space:nowrap}
.cs-back:hover{opacity:1;color:var(--ac)}

.cs-toc{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.4rem 0.9rem;
  padding:0.8rem 1rem;margin-bottom:1.5rem;
  border:1px solid var(--lc);border-radius:var(--radius-lg);background:var(--surface);
}
.cs-toc-label{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;opacity:0.55}
.cs-toc ul{display:flex;flex-wrap:wrap;gap:0.3rem 0.9rem;min-width:0}
.cs-toc a{font-size:0.8rem;color:var(--tx);opacity:0.85;text-decoration:none}
.cs-toc a:hover{color:var(--ac);opacity:1}

/* Sections: the markdown h2 + its content, wrapped server-side */
.cs-body{gap:0}
.cs-section{display:flex;flex-direction:column;gap:1rem;padding-bottom:1.5rem;min-width:0;
  scroll-margin-top:calc(var(--header-h) + 1rem)}
.cs-section > h2{margin-top:0.75rem}
.cs-body [hidden]{display:none !important}
.cs-body p{line-height:1.7}
.cs-body li{line-height:1.7}
.cs-body pre{margin:0;position:relative;padding:1.1rem 1.25rem}
.cs-body .table-wrap table{font-size:0.82rem}
.cs-body th,.cs-body td{padding:0.5rem 0.8rem;min-width:6rem}
.cs-body td code{white-space:normal}
/* Show operators exactly as typed: no |= ^= ~= != => ligatures */
.cs-body code,.cs-body pre,.cs-card,.cs-toc,.cs-filter-input{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.cs-body td:first-child code{white-space:nowrap}

/* Copy affordances */
.cs-copy{
  position:absolute;top:0.5rem;right:0.5rem;
  font-family:var(--fm);font-size:0.7rem;padding:0.2rem 0.55rem;cursor:pointer;
  color:var(--tx);background:var(--surface);border:1px solid var(--lc-strong);border-radius:var(--radius);
  opacity:0.7;transition:opacity var(--transition), color var(--transition), border-color var(--transition);
}
.cs-copy:hover,.cs-copy:focus-visible{opacity:1;color:var(--ac);border-color:var(--ac)}
.cs-copy.is-copied{opacity:1;color:var(--ac);border-color:var(--ac)}
.cs-copyable{cursor:copy;transition:box-shadow var(--transition)}
.cs-copyable:hover{box-shadow:0 0 0 1px rgba(107,138,255,0.45)}
.cs-copyable.is-copied{box-shadow:0 0 0 1px var(--ac);background-color:var(--ac-dim) !important}

.cs-empty{margin:1rem 0 2rem;opacity:0.8}
.cs-empty[hidden]{display:none}
.cs-linklike{background:none;border:0;padding:0;font:inherit;color:var(--ac);cursor:pointer;text-decoration:underline}

.cs-print-source{display:none}

.cs-more{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--lc)}
.cs-more-list{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.5rem}
.cs-more-list a{
  display:inline-block;font-size:0.8rem;padding:0.35rem 0.8rem;color:var(--tx);text-decoration:none;
  border:1px solid var(--lc-strong);border-radius:999px;background:var(--surface);
  transition:border-color var(--transition), color var(--transition);
}
.cs-more-list a:hover{border-color:var(--ac);color:var(--ac)}
.cs-sheet .related-lessons{margin-top:2rem}

/* Desktop: keep the print button and filter in reach while scrolling */
@media(min-width:901px){
  .cs-toolbar{
    position:sticky;top:var(--header-h);z-index:20;
    padding:0.6rem 0;margin-top:-0.6rem;
    background:linear-gradient(var(--bg) 82%, rgba(30,30,34,0));
  }
  .cs-section{scroll-margin-top:calc(var(--header-h) + 4.5rem)}
}
@media(max-width:820px){
  .cs-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
  .cs-card{padding:1.25rem 1.2rem 1.1rem}
  .cs-toolbar{gap:0.6rem}
  .cs-filter{flex-basis:100%;max-width:none;order:1}
  .cs-back{margin-left:0;order:3}
  .cs-print{order:0}
  .cs-body th,.cs-body td{min-width:5rem;padding:0.5rem 0.6rem}
  .cs-body pre{padding:1rem 0.9rem}
  .cs-intro{font-size:0.9rem}
}

/* ---------- Print: black on white, tables fit the page ---------- */
@media print{
  @page{margin:12mm}
  html,body{background:#fff !important;color:#000 !important}
  body{display:block;padding:0;background-image:none !important;font-size:10pt}
  .container{max-width:none;min-height:0;display:block}
  header,footer,.site-footer,.crumbs,.cs-toolbar,.cs-toc,.cs-copy,.cs-more,.cs-empty,
  .related-lessons,.byline{display:none !important}
  main{padding:0}
  .cs-sheet{max-width:none}
  .cs-header{margin-bottom:6pt;padding-bottom:6pt;border-bottom:1px solid #999}
  .article-title{color:#000 !important;font-size:18pt}
  .article-title::before{content:none}
  .category-tag{color:#444 !important;opacity:1}
  .cs-intro{color:#222;opacity:1;max-width:none;font-size:9.5pt}
  .article-body h2{color:#000 !important;font-size:12.5pt;border-bottom:1px solid #999;margin-top:8pt;padding-bottom:2pt;break-after:avoid;page-break-after:avoid}
  .article-body h3{color:#000 !important;break-after:avoid}
  .cs-section{padding-bottom:6pt;gap:5pt}
  .article-body p,.article-body li{color:#000;opacity:1;font-size:9.5pt;line-height:1.45}
  .article-body strong{color:#000}
  .article-body em{color:#000}
  .article-body a{color:#000;text-decoration:underline}
  .article-body .table-wrap{overflow:visible !important;border:1px solid #999;border-radius:0;background:#fff !important}
  .article-body table{width:100%;font-size:8.5pt !important;line-height:1.35;table-layout:auto}
  .article-body thead{display:table-header-group}
  .article-body tr{break-inside:avoid;page-break-inside:avoid}
  .article-body th,.article-body td{
    min-width:0 !important;padding:3pt 5pt !important;color:#000 !important;background:#fff !important;
    border:1px solid #bbb !important;overflow-wrap:anywhere;word-break:break-word;
  }
  .article-body th{font-size:7.5pt;letter-spacing:0.04em}
  .article-body code,.article-body td code,.article-body p code,.article-body li code{
    color:#000 !important;background:#f1f1f1 !important;box-shadow:none !important;padding:0 2pt;
  }
  .article-body pre{
    white-space:pre-wrap;overflow-wrap:anywhere;background:#f6f6f6 !important;border:1px solid #bbb !important;
    padding:6pt !important;margin:0 !important;break-inside:avoid;page-break-inside:avoid;
  }
  .article-body pre code,.hljs,.hljs *{color:#000 !important;background:none !important;font-size:8pt !important}
  .cs-body td:first-child code{white-space:normal}
  .cs-print-source{display:block;margin-top:10pt;font-size:8pt;color:#444}
}