/* ============================================================
   Marshmallow Paper — Responsive Stylesheet
   Inspired by the ActionCable paper layout
   ============================================================ */

:root {
  --primary: #2D5A3D;
  --primary-dark: #1a3a28;
  --accent: #f58220;
  --bg: #FAFAF7;
  --card: #FFFFFF;
  --text: #1a1a2e;
  --muted: #555;
  --border: #e0ddd5;
  --highlight: #FDF8F0;
  --border-accent: #2D5A3D;
}

/* ── Reset & base ─────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: clamp(14px, 1.5vw + 12px, 18px);
  scroll-behavior: smooth;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; }

/* ── Fluid container ──────────────────────────────────────── */
body > *:not(style) {
  max-width: 100%;
}

/* TeX4ht wraps everything — constrain the reading width */
div.center,
div.flushleft,
.minipage {
  max-width: 100%;
}

/* Override TeX4ht's fixed margins for a fluid experience */
/* Cap the reading column to match the 1200px inline images (slightly wider).
   On screens wider than the cap, the extra space becomes symmetric side
   margins via auto margins instead of padding. */
@media (min-width: 768px) {
  body {
    padding: 0 clamp(60px, 6vw, 120px);
  }
}

/* Above 1400px the column would exceed the image width — clamp it and center */
@media (min-width: 1400px) {
  body {
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
  }
}

/* ── Typography ───────────────────────────────────────────── */
p {
  margin-bottom: 0.8em;
  text-align: justify;
  hyphens: auto;
}

p.noindent { text-indent: 0; }
p.indent   { text-indent: 1.5em; }
p + p      { margin-top: 0.6em; }

/* Section headings */
h3.sectionHead,
h3.likesectionHead {
  font-size: clamp(1.3rem, 3.5vw, 1.7em);
  color: var(--primary);
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 6px;
  margin: 2.5em 0 0.8em;
}

h3.likesectionHead {
  border-bottom: none;
  padding-bottom: 0;
  font-style: italic;
  color: var(--text);
}

/* ── Table of contents ────────────────────────────────────── */
#table-of-contents {
  margin: 2em 0 2.5em;
  padding: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 36px);
  background: var(--highlight);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
}
#table-of-contents .toc-title {
  font-size: clamp(1.1rem, 2.5vw, 1.35em);
  color: var(--primary);
  font-weight: 700;
  margin: 0 0 0.6em;
  border: none;
}
#table-of-contents .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: 2em;
}
@media (min-width: 700px) {
  #table-of-contents .toc-list {
    columns: 2;
  }
}
#table-of-contents .toc-list li {
  margin-bottom: 0.45em;
  break-inside: avoid;
}
#table-of-contents .toc-link {
  display: flex;
  gap: 0.6em;
  align-items: baseline;
  color: var(--text);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.15s ease;
}
#table-of-contents .toc-link:hover {
  color: var(--primary);
  text-decoration: underline;
}
#table-of-contents .toc-num {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--accent);
  flex: 0 0 auto;
  min-width: 1.8em;
}

/* Anchor offset so jumped-to sections aren't hidden at the very top */
h3.sectionHead,
h3.likesectionHead {
  scroll-margin-top: 1rem;
}

h5.likesubsubsectionHead,
h5.subsubsectionHead {
  font-size: clamp(1.05rem, 2.5vw, 1.2em);
  font-weight: 700;
  margin: 1.8em 0 0.6em;
  color: var(--text);
}

/* Title block */
.ecbx-2488 { font-size: clamp(1.8rem, 4.5vw, 2.4em); font-weight: 900; }
.ecrm-1728 { font-size: clamp(1.1rem, 2.5vw, 1.5em); }
.ecti-1440 { font-size: clamp(0.9rem, 2vw, 1.2em); font-style: italic; color: var(--muted); }
.ecrm-1000 { font-size: 0.9em; }
.ecrm-0800 { font-size: 0.8em; color: var(--muted); }
.ecbx-0800 { font-size: 0.8em; font-weight: 700; }

/* Body text classes */
.ecti-1200, .ecti-1000 { font-style: italic; }
.ecbx-1200, .ecbx-1000 { font-weight: 700; }
.ectt-1200 { font-family: 'Courier New', Courier, monospace; }
.ecss-1095 { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85em; }
.ecsi-1095 { font-style: italic; font-size: 0.85em; }
.small-caps { font-variant: small-caps; }
.bar-css { text-decoration: overline; }

/* ── Images — fluid, filling the width ────────────────────── */
img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}

/* Figures fill the container */
div.figure {
  margin: 1.5em 0;
  text-align: center;
}

div.figure img {
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* ── Inline article images with zoom ──────────────────────── */
.figure-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.figure-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Zoom button — upper right corner */
.zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(45, 90, 61, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
  transform: scale(0.85);
}

.figure-wrap:hover .zoom-btn,
.zoom-btn:focus {
  opacity: 1;
  transform: scale(1);
}

.zoom-btn:hover {
  background: rgba(245, 130, 32, 0.9);
}

.zoom-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Lightbox overlay */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: zoom-out;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: pinch-zoom;
  user-select: none;
}

.lightbox-overlay.active img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10000;
}

.lightbox-close:hover {
  background: rgba(245, 130, 32, 0.85);
}

@media (max-width: 768px) {
  .zoom-btn {
    opacity: 1;
    transform: scale(1);
  }
}

/* Figure separators */
hr.figure,
hr.endfigure {
  display: none;
}

/* Captions */
div.caption {
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: clamp(0.8em, 1.5vw, 0.9em);
  color: var(--muted);
  font-style: italic;
  text-indent: 0;
  margin-left: 0;
  margin-right: 0;
}

div.caption span.id {
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}

/* ── Cover image (first centered image) ───────────────────── */
div.center img:first-child {
  max-width: 80%;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  margin-bottom: 1em;
}

@media (min-width: 600px) {
  div.center img:first-child {
    max-width: 60%;
  }
}

/* Cover image — now wrapped in figure-wrap; center the wrap itself */
div.center > p.noindent:first-of-type .figure-wrap {
  display: block;
  margin: 0 auto 1em;
  max-width: 60%;
}

@media (max-width: 600px) {
  div.center > p.noindent:first-of-type .figure-wrap {
    max-width: 80%;
  }
}

div.center > p.noindent:first-of-type .figure-wrap img {
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* ── Tables — scrollable on small screens ─────────────────── */
.table-wrap,
div.center div.longtable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
}

div.longtable {
  margin: 1.5em 0;
}

table.longtable,
table.tabular {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: clamp(0.75em, 1.3vw, 0.9em);
  margin: 0 auto;
}

table.longtable td,
table.tabular td {
  border: 1px solid var(--border);
  padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
  text-align: left;
  vertical-align: top;
}

/* Header row styling */
#TBL-7-2- td {
  background-color: var(--primary) !important;
  color: #fff;
  font-weight: 700;
}

/* ── Table 1 (manufacturers) — auto-sized columns ─────────── */
/* Let columns size to their content instead of stretching to
   full page width. Col 2 = Share (just the %), so it stays tight. */
#TBL-7 {
  width: auto;
  min-width: 0;
}
#TBL-7 col {
  width: auto;
}

/* Share column: centered, no wrapping, shrinks to content */
#TBL-7 td:nth-child(2) {
  text-align: center;
  white-space: nowrap;
  width: 1%;           /* auto-size hint: shrink to fit */
}

/* Company column: name + location, allow wrap, location styled */
#TBL-7 td:nth-child(1) {
  white-space: normal;
}
#TBL-7 td:nth-child(1) .loc {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.9em;
  white-space: nowrap;
}

/* Key details column: left, normal */
#TBL-7 td:nth-child(3) {
  text-align: left;
}

/* Remove trailing spacer rows in TeX4ht longtables */
table.longtable tr {
  counter-increment: row;
}

table.longtable tr td {
  /* Target cells that contain only whitespace */
}

table.longtable tr td:only-child {
  /* Rows with a single cell (colspan filler) — hide if content is just whitespace */
}

table.longtable #TBL-7-11-,
table.longtable #TBL-7-12-,
table.longtable #TBL-7-13-,
table.longtable #TBL-7-14- {
  display: none !important;
}

table.longtable #TBL-7-15- td {
  padding: 0 !important;
  border: none !important;
}

/* Table caption */
div.fbox {
  border: none !important;
  padding: 0.5em 0;
  margin: 1em 0;
  font-size: clamp(0.8em, 1.4vw, 0.9em);
}

.ecsx-0900 {
  font-weight: 700;
  font-size: 0.85em;
  color: var(--primary);
}

.ecso-1000 {
  font-style: italic;
  font-size: 0.8em;
  color: var(--muted);
}

/* ── Color box (quote block) ──────────────────────────────── */
#colorbox1 {
  border: solid 2px var(--primary) !important;
  background-color: var(--highlight) !important;
  border-radius: 8px;
  padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 28px) !important;
  margin: 1.5em 0;
  font-style: italic;
}

/* ── Recipe boxes (tcolorbox) ────────────────────────────── */
.tcolorbox {
  margin: 1.5em 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  page-break-inside: avoid;
}

.tcolorbox .tcolorbox-title {
  color: #FFFFFF !important;
  background-color: var(--primary) !important;
  padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2.5vw, 20px) !important;
  font-size: clamp(0.95em, 2vw, 1.1em);
  font-weight: 700;
  margin: 0;
}

.tcolorbox .tcolorbox-content {
  color: #000000 !important;
  background-color: var(--highlight) !important;
  padding: clamp(10px, 2vw, 18px) clamp(12px, 2.5vw, 22px) !important;
}

/* Override TeX4ht inline padding for recipe boxes */
#tcolobox-1 div,
#tcolobox-2 div,
#tcolobox-3 div,
#tcolobox-4 div {
  padding: 0 !important;
}

/* ── Description lists (manufacturer profiles, Peep rituals) ── */
dl.description {
  margin: 0.8em 0;
}

dl.description dt {
  font-weight: 700;
  margin-top: 0.8em;
  color: var(--primary-dark);
}

dl.description dd {
  margin-left: 1.5em;
  margin-bottom: 0.6em;
}

/* ── Enumerated lists (recipes, references) ───────────────── */
dl.enumerate-enumitem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 1em;
  margin: 0.8em 0 1.2em;
}

dl.enumerate-enumitem dt {
  font-weight: 700;
}

dl.enumerate-enumitem dd {
  margin: 0;
}

/* ── Bullet lists ─────────────────────────────────────────── */
ul.itemize1 {
  margin: 0.6em 0 1em 1.5em;
}

ul.itemize1 li {
  margin-bottom: 0.4em;
}

/* ── Horizontal rules (section dividers) ─────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}

/* ── Footnotes ────────────────────────────────────────────── */
.footnote-mark sup.textsuperscript {
  font-size: 0.75em;
  vertical-align: super;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Back-link (from paper2.html) ─────────────────────────── */
.footnote-text {
  margin: 1em 0;
  font-size: 0.85em;
}

/* ── Minipage fix ─────────────────────────────────────────── */
div.minipage {
  width: 100%;
  margin: 0;
}

div.center div {
  text-align: center;
}

/* ── Print styles ─────────────────────────────────────────── */
@media print {
  body {
    font-size: 11pt;
    padding: 0;
    background: #fff;
  }

  img {
    max-width: 90% !important;
  }

  table.longtable {
    page-break-inside: avoid;
  }

  .tcolorbox {
    page-break-inside: avoid;
  }

  a {
    color: #000;
  }
}

/* ── Mobile refinements ───────────────────────────────────── */
@media (max-width: 480px) {
  dl.description dd {
    margin-left: 0.8em;
  }

  dl.enumerate-enumitem {
    grid-template-columns: auto 1fr;
    gap: 0.2em 0.6em;
  }

  table.longtable {
    min-width: 400px;
  }
}