/* PrintableRuler — shared styles */
:root {
  --brand: #1a6b5c;
  --brand-dark: #124b40;
  --accent: #e8703a;
  --ink: #1c2321;
  --ink-soft: #4a5550;
  --bg: #fbfaf7;
  --card: #ffffff;
  --line: #e4e1d8;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(20, 30, 25, 0.06);
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  /* Full-bleed elements (e.g. .digital-ruler-track) use 100vw, which on
     some browsers counts the scrollbar's own width and overflows the
     page by a few px — this keeps that from creating a page-wide
     horizontal scrollbar. */
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Header */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: block;
}
.brand small { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 0.95rem;
}
.nav-links a { color: var(--ink-soft); font-weight: 600; }
.nav-links a:hover { color: var(--brand); text-decoration: none; }
.nav-links .btn { color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1.3rem;
  padding: 4px 10px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 20px 20px;
    display: none;
    gap: 14px;
  }
  .nav-links.open { display: flex; }
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn.secondary {
  background: transparent;
  color: var(--brand) !important;
  border: 1.5px solid var(--brand);
}
.btn.secondary:hover { background: rgba(26,107,92,0.08); }
.btn.accent { background: var(--accent); }
.btn.accent:hover { background: #c85a29; }

/* Hero */
.hero {
  padding: 28px 0 36px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 14px;
}
.hero p.lead {
  max-width: none;
  margin: 0 auto 26px;
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Sections */
section { padding: 7.2px 0 25.6px; }
section h2,
section > h3 {
  font-size: 1.6rem;
  margin: 0 0 8px;
}
section .section-intro {
  color: var(--ink-soft);
  max-width: 700px;
  margin: 0 0 24px;
}
#tool .section-intro,
#presets .section-intro,
#pdf-downloads .section-intro,
#accuracy .section-intro,
#about-ruler .section-intro,
#custom .section-intro {
  max-width: none;
}

/* Cards / grid */
.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card h3 { margin: 6px 0 8px; font-size: 1.1rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.card .icon { font-size: 1.6rem; }

.pdf-card {
  display: block;
  color: var(--ink);
  min-width: 0;
}
.pdf-card:hover {
  text-decoration: none;
  border-color: var(--brand);
}
.pdf-card:hover h3 { color: var(--brand); }
.pdf-thumb {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  margin-bottom: 10px;
}

/* Tool panel */
.tool-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.tool-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tool-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.tool-form .form-row {
  flex: 1 1 160px;
  min-width: 140px;
  margin-bottom: 0;
}
.tool-form .form-row:nth-child(1),
.tool-form .form-row:nth-child(5) {
  flex-basis: 110px;
  min-width: 100px;
}
.tool-form .form-row:nth-child(2) {
  flex-basis: 210px;
  min-width: 190px;
}
.tool-form .form-actions {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.tool-form .form-actions .btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.tool-form .form-actions .btn { flex: 0 0 auto; }
.tool-form .form-actions #sheet-count { margin: 0; flex: 0 0 auto; }
.preview-col { min-width: 0; }
.form-row { margin-bottom: 16px; }
.form-row label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--ink);
}
.form-row .hint { font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; margin-top: 4px; }
.form-row input[type="number"],
.form-row select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.95rem;
  background: #fff;
}
.form-row.inline { display: flex; align-items: center; gap: 8px; }
.form-row.inline label { margin: 0; }
.unit-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
.unit-toggle button {
  flex: 1;
  padding: 8px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.unit-toggle button.active {
  background: var(--brand);
  color: #fff;
}

.preview-wrap {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 18px;
  overflow: auto;
  background: repeating-linear-gradient(45deg, #fdfcf9, #fdfcf9 10px, #f7f5ef 10px, #f7f5ef 20px);
}
.preview-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 10px;
}
.warn-box {
  background: #fff4e9;
  border: 1px solid #f0c894;
  color: #7a4a12;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.87rem;
  margin-top: 14px;
}
.ok-box {
  background: #eaf7f0;
  border: 1px solid #b6e3c8;
  color: #145b34;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.87rem;
  margin-top: 14px;
}

/* Ruler rendering */
.ruler-page {
  background: #fff;
  box-shadow: 0 0 0 1px #ddd8ca;
  margin: 0 auto 16px;
  position: relative;
  padding: 10mm;
}
.ruler-page .page-label {
  position: absolute;
  top: 2mm; right: 4mm;
  font-size: 8px;
  color: #aaa;
}
.ruler-strip {
  position: relative;
  background: #fff;
}
.ruler-strip.horizontal { height: 26mm; }
.ruler-strip.vertical { width: 26mm; }

.tick {
  position: absolute;
  background: #111;
}
.tick-label {
  position: absolute;
  font-size: 3mm;
  color: #111;
  font-family: Arial, sans-serif;
  transform: translateX(-50%);
}
.tick-label.vert { transform: translateY(-50%); }

.align-mark {
  position: absolute;
  border: 1px dashed #c0392b;
}
.align-note {
  position: absolute;
  font-size: 2.6mm;
  color: #c0392b;
  font-family: Arial, sans-serif;
}

/* Accuracy checker */
.card-check {
  width: 85.6mm;
  height: 53.98mm;
  border: 1.5px solid #111;
  border-radius: 3mm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 3.2mm;
  color: #333;
  text-align: center;
  margin: 14px auto;
  background: #fff;
}

/* Presets */
.preset-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.preset-list a {
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
}
.preset-list a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 42px;
  border-left: 2px solid var(--line);
  margin-left: 14px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: -15px; top: 0;
  width: 28px; height: 28px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.steps h4 { margin: 0 0 4px; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 18px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  padding: 14px 0;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  color: var(--brand);
  font-weight: 700;
}
.faq-item[open] summary::before { content: "\2212"; }
.faq-item p { margin: 0 0 16px; padding-left: 18px; color: var(--ink-soft); font-size: 0.95rem; }

/* Inline calibration widget (homepage tool panel) */
.calib-inline {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
  background: #fbfbf9;
}
.calib-inline-card {
  border: 1.5px solid #111;
  border-radius: 3px;
  margin: 10px 0;
  background: #fff;
}

/* Digital ruler — full-bleed so it spans the whole device width, however
   wide that happens to be, instead of being boxed into the site's content
   column. Ticks are drawn dynamically to exactly fill this width. */
.digital-ruler-track {
  height: 60px;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 16px 0;
  padding: 0 16px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.calib-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* Article / content pages */
.prose { max-width: 760px; margin: 0 auto; }
.prose h1 { font-size: 2rem; margin-bottom: 6px; }
.prose .meta { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 24px; }
.prose h2 { font-size: 1.35rem; margin-top: 34px; }
.prose p { color: var(--ink-soft); }
.prose ul, .prose ol { color: var(--ink-soft); }
.prose .callout {
  background: #eef6f3;
  border-left: 4px solid var(--brand);
  padding: 14px 18px;
  border-radius: 6px;
  margin: 20px 0;
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 0.92rem;
}
table.compare th, table.compare td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}
table.compare th { background: #f3f1ea; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 36px 0 24px;
  background: #f4f2ea;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-grid h4 { margin: 0 0 10px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--ink-soft); }
.footer-bottom {
  border-top: 1px solid #e4e0d2;
  padding-top: 18px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Print */
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; }
  .container { max-width: none; padding: 0; }
  .ruler-page {
    box-shadow: none;
    margin: 0;
    /* Keep the page's own 10mm padding (matches PAGE_PADDING_MM in main.js)
       so the ruler sits inset from the physical paper edge instead of
       printing flush against it — most printers can't print to the edge
       anyway, and the ruler's length math already reserves this space. */
    page-break-after: always;
  }
  #ruler-output { transform: none !important; }
  @page { margin: 0; }

  /* Horizontal rulers are wider than a portrait page, so rotate the sheet
     to landscape for those pages — keeps everything on as few sheets as
     possible and matches the ruler-page's own landscape width above. */
  .ruler-page.landscape { page: ruler-landscape; }
  @page ruler-landscape { size: landscape; margin: 0; }

  /* When "Print This Ruler" is used on the builder page, print only the
     ruler output — not the marketing sections around the tool. */
  body.print-ruler-only main > section:not(#tool) { display: none !important; }
  body.print-ruler-only #tool > h2,
  body.print-ruler-only #tool > .section-intro,
  body.print-ruler-only .tool-form,
  body.print-ruler-only .preview-note {
    display: none !important;
  }
  body.print-ruler-only .tool-panel {
    border: none;
    box-shadow: none;
    padding: 0;
    background: none;
  }
  body.print-ruler-only .preview-wrap {
    border: none;
    padding: 0;
    background: none;
    overflow: visible;
  }

  /* When "Print the Test Box" is used, print only the accuracy checker
     card — not the marketing sections around it. */
  body.print-accuracy-only main > section:not(#accuracy) { display: none !important; }
  body.print-accuracy-only #accuracy > h2,
  body.print-accuracy-only #accuracy > .section-intro {
    display: none !important;
  }
  body.print-accuracy-only .tool-panel {
    border: none;
    box-shadow: none;
    padding: 0;
    background: none;
  }
}