/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === Bundled fonts === */
@font-face {
  font-family: 'PrintClearly';
  src: url('fonts/PrintClearly-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PrintClearly-Bold';
  src: url('fonts/PrintClearly-Bold.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PrintClearly-Dashed';
  src: url('fonts/PrintClearly-Dashed.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Andika';
  src: url('fonts/Andika-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Andika-Bold';
  src: url('fonts/Andika-Bold.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LearningCurve';
  src: url('fonts/LearningCurve-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LearningCurve-Bold';
  src: url('fonts/LearningCurve-Bold.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LearningCurve-Dashed';
  src: url('fonts/LearningCurve-Dashed.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* === Palette ===
   Two-tone risograph: deep blue ink + warm yellow ink on cream paper.
   Every surface uses exactly these two inks (plus paper); the red
   accent is reserved for the "pain and suffering" easter egg.
     bg:        cream paper, the "page"
     bg-alt:    near-white for content panes
     text:      deep navy body copy
     primary:   blue ink (the dominant tone)
     primary-d: darker blue, used for headings + emphasis
     secondary: yellow ink (the second pass)
     secondary-d: deeper yellow for hover/active
     muted:     softened navy for secondary text
     pain:      red, used exclusively on the easter-egg span
     warn:      muted amber for overflow warnings */
:root {
  /* Pale dusty blue paper, lunar-white panes for warm readable contrast.
     Yellow second-pass is the soft buttery #FFE491; the red accent
     is the deeper crimson rose #B83843, used only on the easter-egg
     span (it has to read against the blue paper). */
  --bg: #c5dceb;
  --bg-alt: #f4f1ea;
  --text: #0c1e5e;
  --primary: #1e3a8a;
  --primary-d: #172554;
  --secondary: #ffe491;
  --secondary-d: #f5d77a;
  --muted: #475569;
  --pain: #b83843;
  --warn: #b45309;
  /* Riso "second pass" offset shadow: a flat yellow rectangle behind
     the element, slightly offset down/right, evoking imperfect
     two-color registration. Used on toolbar, panes, and the preview. */
  --riso-offset: 4px 4px 0 var(--secondary);
  --radius: 8px;
  --gap: 20px;
}

body {
  font-family: 'Andika', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  min-height: 100vh;
}

/* === Layout === */
.editor-wrap { max-width: 1300px; margin: 0 auto; padding: 24px 20px; }

header { text-align: center; margin-bottom: calc(var(--gap) + 4px); }
header h1 {
  font-size: 2.6em;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--primary-d);
  /* Riso second pass: yellow ink registered slightly off behind the blue */
  text-shadow: 3px 3px 0 var(--secondary);
}
header .subtitle {
  color: var(--text);
  font-style: italic;
  font-size: 1em;
  font-weight: 500;
}
header .subtitle .pain {
  color: var(--pain);
  font-weight: 700;
  /* Mid-sentence flash of red, the very thing Mergeless removes */
  text-decoration: line-through;
  text-decoration-color: var(--pain);
  text-decoration-thickness: 2px;
}
header .header-note {
  margin-top: 8px;
  font-size: 0.78em;
  color: var(--muted);
}
.donate-link {
  color: var(--primary-d);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--primary-d);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.donate-link:hover {
  color: var(--primary);
  text-decoration-color: var(--primary);
}

/* === Toolbar === */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 14px 18px;
  border: 2px solid var(--primary-d);
  border-radius: var(--radius);
  margin-bottom: calc(var(--gap) + 4px);
  background: var(--bg-alt);
  box-shadow: var(--riso-offset);
}
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-group label {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-d);
}
.toolbar select, .toolbar button {
  font-family: inherit;
  font-size: 0.9em;
  padding: 6px 10px;
  border: 1.5px solid var(--primary-d);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}
.toolbar select:hover, .toolbar button:hover {
  background: var(--secondary);
  color: var(--primary-d);
}
.toolbar select:focus, .toolbar button:focus { outline: 2px solid var(--secondary-d); outline-offset: 1px; }
.toolbar input[type="range"] { width: 96px; accent-color: var(--primary-d); }

#size-value {
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  width: 56px;
  padding: 5px 6px;
  border: 1.5px solid var(--primary-d);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text);
  text-align: center;
  -moz-appearance: textfield;
}
#size-value:disabled { opacity: 0.4; cursor: not-allowed; }
#size-value::-webkit-outer-spin-button,
#size-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.unit-label {
  font-size: 0.8em;
  color: var(--primary-d);
  font-weight: 600;
  margin-left: -2px;
}

#pad-value {
  font-size: 0.8em;
  min-width: 42px;
  color: var(--primary-d);
  font-weight: 600;
}

#show-bounds { width: 16px; height: 16px; accent-color: var(--primary-d); cursor: pointer; }

.toolbar-actions { margin-left: auto; gap: 6px; }

#print-btn {
  background: var(--secondary);
  color: var(--primary-d);
  border-color: var(--primary-d);
  font-weight: 700;
}
#print-btn:hover {
  background: var(--primary-d);
  color: var(--secondary);
  border-color: var(--primary-d);
}

#help-btn { font-weight: 700; width: 36px; text-align: center; color: var(--primary-d); }

/* === Workspace === */
.workspace {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--gap);
}
.workspace > * { min-width: 0; }

.pane {
  position: relative;
  border: 2px solid var(--primary-d);
  border-radius: var(--radius);
  background: var(--bg-alt);
  box-shadow: var(--riso-offset);
}
.pane::before {
  content: attr(data-title);
  position: absolute;
  top: -12px;
  left: 14px;
  background: var(--secondary);
  color: var(--primary-d);
  padding: 2px 10px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1.5px solid var(--primary-d);
  border-radius: 4px;
}

/* === Input pane === */
.pane-input { display: flex; }
#text-input {
  width: 100%;
  min-height: 600px;
  padding: 22px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  font-family: 'Andika', system-ui, sans-serif;
  font-size: 1em;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  outline: none;
}
/* The placeholder doubles as the inline how-to on first load, so make
   it readable rather than ghost-faded. */
#text-input::placeholder {
  color: var(--primary-d);
  opacity: 0.7;
}

/* === Preview pane === */
.pane-preview {
  padding: 22px 12px 12px;
  text-align: center;
}
.preview-scaler { display: inline-block; /* zoom set by JS */ }

#preview-page {
  position: relative;
  width: 8.5in;
  height: 11in;
  background: #fff;
  color: #000;
  overflow: hidden;
  border: 2px solid var(--primary-d);
  box-shadow: var(--riso-offset);
  text-align: left;
}

#preview-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* === Label cells === */
.label {
  position: absolute;
  overflow: hidden;
  /* Inline styles supply top/left/width/height (computed from sheet spec)
     and --inner-pad / --label-font / --label-size / etc. */
  padding: var(--inner-pad, 0.1in);
  font-family: var(--label-font, 'Andika');
  font-size: var(--label-size, 14pt);
  line-height: 1.2;
  color: #000;
  display: flex;
  flex-direction: column;
  white-space: pre;
}

/* On-screen guide outlines (toggled by JS via .show-bounds on the page).
   Flat hex tint, not rgba(): the preview-scaler applies CSS `zoom`,
   and chromium composites rgba() backgrounds under `zoom` such that
   the alpha effectively collapses and the cells render nearly opaque.
   A flat color dodges the bug; #fef9e3 is what 12% yellow over white
   would produce in a non-zoomed context. */
#preview-page.show-bounds .label {
  outline: 1px dashed var(--primary);
  outline-offset: -1px;
  background: #fef9e3;
}

.label.align-left   { text-align: left;   align-items: flex-start; }
.label.align-center { text-align: center; align-items: center; }
.label.align-right  { text-align: right;  align-items: flex-end; }

.label.valign-top    { justify-content: flex-start; }
.label.valign-middle { justify-content: center; }
.label.valign-bottom { justify-content: flex-end; }

.label .content {
  /* Allow the block to be measured by the auto-fit routine and to
     hold multi-line text. white-space: pre on the parent preserves
     the newlines the parser emits. */
  width: 100%;
}

/* Overflow indicator on individual labels in manual mode */
.label.overflow {
  outline: 2px solid var(--warn) !important;
  outline-offset: -2px;
}

/* === Overflow warning === */
#overflow-warning {
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--warn);
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  text-align: center;
  display: inline-block;
}
.hidden { display: none !important; }

/* === Help Modal === */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(12, 30, 94, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-inner {
  background: var(--bg-alt);
  color: var(--text);
  border: 2px solid var(--primary-d);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--secondary);
  padding: 30px;
  max-width: 620px;
  width: 92%;
  max-height: 86vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.6em;
  cursor: pointer;
  color: var(--primary-d);
  line-height: 1;
  font-weight: 700;
}
.modal-close:hover { color: var(--pain); }
.modal-inner h2 {
  font-size: 1.5em;
  margin-bottom: 14px;
  color: var(--primary-d);
  letter-spacing: -0.01em;
  text-shadow: 2px 2px 0 var(--secondary);
}
.modal-inner h3 {
  font-size: 1em;
  margin: 18px 0 8px;
  color: var(--primary-d);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.modal-inner table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.modal-inner td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--primary);
  vertical-align: top;
  font-size: 0.9em;
}
.modal-inner td:first-child { white-space: nowrap; width: 38%; }
.modal-inner ul { margin: 0 0 10px 1.4em; }
.modal-inner li, .modal-inner p { font-size: 0.9em; margin-bottom: 5px; line-height: 1.5; }
.modal-inner a {
  color: var(--primary-d);
  font-weight: 700;
  text-decoration-color: var(--primary-d);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* === Print === */
@media print {
  body { background: #fff; margin: 0; padding: 0; }
  body, html { width: 8.5in; height: 11in; overflow: hidden; }
  header, .toolbar, .pane-input, #overflow-warning, .modal,
  .pane::before, .pane-preview::before { display: none !important; }
  .editor-wrap, .workspace, .pane-preview, .preview-scaler, .pane {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    width: auto;
    height: auto;
    overflow: visible;
    text-align: left;
    background: #fff;
  }
  .preview-scaler { zoom: 1 !important; }
  #preview-page {
    width: 8.5in;
    height: 11in;
    border: none;
    margin: 0;
    overflow: hidden;
  }
  /* Never print the on-screen label guide outlines */
  #preview-page.show-bounds .label {
    outline: none;
    background: transparent;
  }
  .label.overflow { outline: none !important; }
  @page { size: letter; margin: 0; }
}

/* === Responsive === */
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  header h1 { font-size: 1.9em; }
  #text-input { min-height: 280px; }
  .toolbar { gap: 10px 14px; }
  .toolbar-actions { margin-left: 0; }
}