/* PSRefSheet — shared "reference / cheat sheet" styling.
   ---------------------------------------------------------------------------
   THE STANDARD for cheat-sheet / command-reference sheets on printsheet.io.
   A reference sheet is a real HTML/CSS document (not an SVG) sized in real mm
   inside .ps-preview-wrap, printed as HTML so the styling is exact and the
   browser paginates naturally across pages.

   Structure produced by assets/refsheet.js:
     <article class="ref-doc">
       <table class="ref-sheet">              // print-table paging harness
         <thead><tr><td class="ref-space"></td></tr></thead>   // top margin, repeats each page
         <tfoot><tr><td class="ref-space"></td></tr></tfoot>    // bottom margin, repeats each page
         <tbody><tr><td class="ref-cell">      // side margin = cell padding
           <header class="header"> … masthead (eyebrow, h1, intro, quick-start) …
           <div class="content"> legend + <section class="grid"> cards … </section> </div>
         </td></tr></tbody>
       </table>
     </article>

   Per-page margins survive the print dialog's "Margins: None" because they come
   from the repeating thead/tfoot spacers + cell side padding, NOT @page margin.
   Screen preview is scaled to fit with CSS `zoom` (--ref-scale); print resets it
   and cards never split (break-inside: avoid).

   Design tokens (override --accent per sheet; --accent-dark/-soft are derived
   in JS from the chosen accent). Keep defaults on the shared 16-colour palette
   so the swatch selector, the input value and the applied colour all agree. */

.ps-preview-wrap { overflow-x: hidden; align-items: flex-start; height: auto; }

.ref-doc {
  --accent: #e67e22;
  --accent-dark: #854914;
  --accent-soft: #fdf3eb;
  --ink: #172033;
  --muted: #5f6b7a;
  --line: #d8dee8;
  --paper: #ffffff;
  --panel: #f8fafc;
  --radius: 12px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* width / min-height set inline by JS in mm */
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.35;
  box-shadow: 0 18px 50px rgba(23, 32, 51, 0.14);
  zoom: var(--ref-scale, 1);
}

.ref-doc * { box-sizing: border-box; }

/* ---- print-table paging harness --------------------------------------- */
.ref-doc .ref-sheet { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ref-doc .ref-space { height: var(--ref-margin, 6mm); padding: 0; border: 0; }
.ref-doc .ref-cell { padding: 0 var(--ref-margin, 6mm); vertical-align: top; }

/* ---- masthead --------------------------------------------------------- */
.ref-doc .header {
  position: relative;
  padding: 14mm 12mm 10mm;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(255,255,255,0.15) 0 70px, transparent 71px),
    linear-gradient(135deg, var(--accent-dark), var(--accent));
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ref-doc .header::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -56px;
  width: 210px;
  height: 150px;
  border: 2px solid rgba(255,255,255,0.13);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.ref-doc .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;              /* keep pill on one line, hug the text */
}
.ref-doc .header h1 {
  margin: 0;
  font-size: 2.15rem;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.ref-doc .header p {
  max-width: 620px;
  margin: 8px 0 0;
  color: rgba(255,255,255,0.86);
  font-size: 0.95rem;
}
.ref-doc .site-tag {
  position: absolute;
  top: 14mm;
  right: 12mm;
  color: rgba(255,255,255,0.78);
  font-size: 0.72rem;
  font-weight: 700;
}
.ref-doc .quick-start {
  display: grid;
  grid-template-columns: repeat(var(--ref-qs-cols, 4), minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}
.ref-doc .quick-start div {
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  background: rgba(0,0,0,0.12);
}
.ref-doc .quick-start span {
  display: block;
  color: rgba(255,255,255,0.68);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ref-doc .quick-start code {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-family: var(--mono);
  font-size: 0.66rem;
  white-space: nowrap;
}

/* ---- content ---------------------------------------------------------- */
/* Panel grid spans the FULL sheet width — exactly the full-bleed header block
   width (edge to edge). Outer white border comes from the ref-cell padding +
   thead/tfoot spacers (the per-page margin). */
.ref-doc .content { padding: 9mm 0 10mm; }

.ref-doc .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.68rem;
}
.ref-doc .legend strong { color: var(--ink); }

.ref-doc .grid {
  display: grid;
  grid-template-columns: repeat(var(--ref-cols, 2), minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.ref-doc .card {
  break-inside: avoid;
  page-break-inside: avoid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.ref-doc .card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ref-doc .icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Command/description sections */
.ref-doc .commands { padding: 3px 9px 6px; }
.ref-doc .command {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed #e4e8ef;
  break-inside: avoid;
}
.ref-doc .command:last-child { border-bottom: 0; }
.ref-doc .command code {
  align-self: start;
  color: #111827;
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ref-doc .command p {
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
}
.ref-doc .wide { grid-column: 1 / -1; }
.ref-doc .wide .commands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

/* Formula / reference-line sections (physics, chemistry, maths, constants…).
   Each line is a mono formula or a small note; `.two` lays them in 2 columns. */
.ref-doc .formulas { padding: 5px 10px 7px; }
.ref-doc .formulas.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}
.ref-doc .formula {
  padding: 3px 0;
  border-bottom: 1px dashed #e4e8ef;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  color: #111827;
  break-inside: avoid;
  overflow-wrap: anywhere;
}
.ref-doc .formula:last-child { border-bottom: 0; }
.ref-doc .formula.note {
  font-family: var(--font);
  font-weight: 500;
  color: var(--muted);
  border-bottom: 0;
}
.ref-doc .wide .formulas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

/* Inline value table (e.g. trig exact values) inside a formula card. */
.ref-doc .ref-vtable {
  width: calc(100% - 20px);
  margin: 2px 10px 6px;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.6rem;
}
.ref-doc .ref-vtable th,
.ref-doc .ref-vtable td {
  padding: 2px 5px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ref-doc .ref-vtable th {
  color: var(--accent-dark);
  background: var(--accent-soft);
  font-weight: 800;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ref-doc .ref-vtable tr:last-child td { border-bottom: 0; }

/* Inline SVG figure (right triangle, Ohm triangle, resistor bands…). */
.ref-doc .ref-figwrap { padding: 2px 10px 8px; }
.ref-doc .ref-fig {
  display: block;
  width: 60%;
  max-width: 46mm;
  height: auto;
  margin: 2px auto 0;
}

/* ---- black & white mode ----------------------------------------------- */
.ref-doc.mono-print {
  --accent: #222222;
  --accent-dark: #000000;
  --accent-soft: #f1f1f1;
  --ink: #000000;
  --muted: #333333;
  --line: #bcbcbc;
  --panel: #f5f5f5;
}
.ref-doc.mono-print .header { background: #1f1f1f; }

/* ---- print: reset screen scaling, let the browser paginate ------------ */
@media print {
  .site-header, .site-footer, .controls, .print-note, .ad-slot, .tool-copy, .no-print { display: none !important; }
  .container, .tool-layout, .preview-col, .ps-preview-wrap, #preview {
    display: block !important; margin: 0 !important; padding: 0 !important;
    max-width: none !important; width: auto !important; background: #fff !important;
    box-shadow: none !important; overflow: visible !important;
  }
  .ref-doc {
    zoom: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: auto !important;
    min-height: 0 !important;
  }
}