:root {
  --desk: #ece6db;
  --panel: #fbf8f2;
  --text: #2d2a26;
  --muted: #655c51;
  --border: #ddd4c6;
  --control: #978b77;
  --brand: #2b3a55;
  --warn: #a8432b;
  --hand: "Caveat", "Segoe Print", cursive;
  --serif: "Lora", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -48px; z-index: 10;
  padding: 8px 14px; border-radius: 8px; background: var(--brand); color: #fff; text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--text);
  font: 15px/1.5 var(--sans);
}

.hero { max-width: 1200px; margin: 0 auto; padding: 40px 16px 8px; }
.hero h1 { font: 600 clamp(40px, 7vw, 64px)/1 var(--hand); margin: 0 0 8px; color: var(--brand); }
.hero p { max-width: 560px; margin: 0; color: var(--muted); font: 17px/1.5 var(--serif); }

.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ── configurator ─────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 20px 20px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

fieldset { border: 0; border-bottom: 1px solid var(--border); margin: 0; padding: 14px 0; display: grid; gap: 10px; }
legend { font: 600 22px var(--hand); color: var(--brand); padding: 0; float: left; width: 100%; }
.sub { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: -4px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--control); border-radius: 999px;
  cursor: pointer; font-size: 14px; background: #fff;
}
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: #eef0f4; font-weight: 600; }
.chips label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); flex: none; }
.sw-cream { background: #f5ecd7; } .sw-white { background: #fff; } .sw-kraft { background: #d8c09a; }
.sw-none { background: repeating-linear-gradient(45deg, #fff 0 3px, #e3dccf 3px 5px); }
.accents label { padding: 5px; }
.accents .swatch { width: 20px; height: 20px; }
.ac-ink { background: #2b3a55; } .ac-sage { background: #5f7f66; } .ac-terracotta { background: #b2593a; }
.ac-plum { background: #7a4a6b; } .ac-charcoal { background: #3b3b3b; }
.f-hand { font: 600 18px var(--hand); line-height: 1; } .f-classic { font: 14px var(--serif); }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 14px; }
.checks label, .inline { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.range { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; }
.range input { grid-column: 1 / -1; accent-color: var(--brand); }
.stack { display: grid; gap: 4px; font-size: 14px; }
.habits { display: grid; gap: 6px; }
.habits[hidden] { display: none; }
.panel input[type="text"], .panel input:not([type]), .panel input[type="date"] {
  font: inherit; padding: 7px 10px; border: 1px solid var(--control); border-radius: 8px; background: #fff; color: var(--text);
}
input[type="checkbox"] { accent-color: var(--brand); }

.note { margin: 0; font-size: 13px; color: var(--muted); }
.warning { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: #f6e1d9; color: var(--warn); font-size: 14px; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 8px; }
.actions button {
  font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--control); background: #fff; cursor: pointer;
}
.actions .primary { grid-column: 1 / -1; background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; font-size: 16px; }
.actions .quiet { grid-column: 2; }
.actions button:hover { filter: brightness(.96); }

/* ── preview ──────────────────────────────────── */
.preview-wrap { min-width: 0; }
#preview { display: flex; flex-direction: column; gap: 24px; width: 210mm; }
#preview .sheet { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 32px rgba(60, 45, 25, .14); }
#preview .sheet.overflow { outline: 3px solid var(--warn); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .panel { position: static; max-height: none; }
}

/* ── the sheet (sized in mm so screen and paper match) ── */
.sheet {
  --accent: #2b3a55;
  --line: rgba(70, 55, 40, .3);
  --margin: rgba(196, 92, 92, .45);
  --ink: #2d2a26;
  --soft: #6b6155;
  --title: var(--hand);
  --label: var(--hand);
  position: relative;
  width: 210mm;
  height: 297mm;
  padding: 12mm 12mm 8mm 27mm;
  display: flex;
  flex-direction: column;
  gap: 4mm;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}
.paper-cream { --paper: #f5ecd7; }
.paper-white { --paper: #fff; }
.paper-kraft { --paper: #dcc6a1; --line: rgba(70, 50, 25, .38); --soft: #54493c; }
.paper-none { --paper: #fff; }

/* Paper grain on screen only — on paper the real paper does that job. */
@media screen {
  .paper-cream, .paper-kraft {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

.font-classic { --title: var(--serif); --label: var(--serif); }
.accent-ink { --accent: #2b3a55; } .accent-sage { --accent: #4f7058; } .accent-terracotta { --accent: #a9522f; }
.accent-plum { --accent: #74435f; } .accent-charcoal { --accent: #3b3b3b; }

.margin-line { position: absolute; top: 0; bottom: 0; left: 21mm; border-left: .4mm solid var(--margin); }

.head .date { font: 600 9mm/1.05 var(--title); color: var(--accent); }
.font-classic .head .date { font-size: 6.6mm; }
.date-blank { display: flex; align-items: flex-end; gap: 2mm; }
.date-blank .blank { width: 70mm; border-bottom: .3mm solid var(--line); height: 7mm; }
.head .name { font: 600 3.2mm var(--sans); letter-spacing: .4mm; text-transform: uppercase; color: var(--soft); margin-top: 1.5mm; }
.head .quote { font: italic 3.8mm var(--serif); color: var(--soft); margin-top: 1mm; }

.body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 8mm; }
.body.single { grid-template-columns: 1fr; }
.col { display: flex; flex-direction: column; gap: 4.5mm; overflow: hidden; min-height: 0; }

.blk-title { margin: 0 0 .5mm; font: 600 5.6mm/1.1 var(--title); color: var(--accent); }
.font-classic .blk-title { font-size: 4.2mm; letter-spacing: .1mm; }

.row {
  height: 8mm;
  display: flex;
  align-items: flex-end;
  gap: 2.5mm;
  padding-bottom: 1mm;
  border-bottom: .25mm solid var(--line);
}
.lines-dotted .row { border-bottom: .6mm dotted var(--line); }
.lines-blank .row { border-bottom-color: transparent; }
.rows-tight .row { height: 6.2mm; }

.box { width: 4mm; height: 4mm; flex: none; border: .35mm solid var(--accent); border-radius: .8mm; }
.num { width: 3mm; font: 600 4.4mm/1 var(--title); color: var(--accent); }
.hour { width: 6mm; font: 3.2mm/1 var(--sans); color: var(--soft); }
.habit { font: 4.4mm/1 var(--label); color: var(--ink); }

.icons { display: flex; gap: 2.6mm; padding-top: 1mm; }
.glass { width: 5.5mm; height: 7mm; fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linejoin: round; }
.face { width: 7.5mm; height: 7.5mm; fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; }
.face .eye { fill: var(--accent); stroke: none; }

.end { border-top: .35mm solid var(--accent); padding-top: 3mm; }
.end .label { font: 4.6mm/1.2 var(--label); }
.font-classic .end .label { font-size: 3.6mm; }
.satisfaction { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2mm; }
.dots { display: flex; gap: 3mm; }
.dot {
  width: 7.5mm; height: 7.5mm; border: .35mm solid var(--accent); border-radius: 50%;
  display: grid; place-items: center; font: 2.8mm var(--sans); color: var(--soft);
}
.words { display: flex; align-items: flex-end; gap: 2mm; margin-top: 3mm; }
.blanks { flex: 1; display: flex; align-items: flex-end; gap: 2mm; color: var(--soft); }
.blanks span { flex: 1; height: 6mm; border-bottom: .25mm solid var(--line); }
.hint { display: none; margin-top: 1.2mm; font: 2.8mm var(--sans); color: var(--soft); }

.tip {
  position: relative; flex: none; align-self: center;
  width: 4.6mm; height: 4.6mm; padding: 0; border-radius: 50%;
  border: .3mm solid var(--accent); background: none; color: var(--accent);
  font: italic 600 3mm/1 var(--serif); cursor: help;
}
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 2mm); left: 50%; transform: translateX(-50%);
  width: 62mm; padding: 2.4mm 3mm; border-radius: 1.6mm;
  background: var(--ink); color: #fff; font: 3.2mm/1.35 var(--sans); text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.tip:hover::after, .tip:focus::after { opacity: 1; pointer-events: auto; }
/* Escape hides it (WCAG 1.4.13) until the pointer or focus comes back. */
.tips-off .tip::after { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.foot { margin-top: auto; text-align: center; font: 2.6mm var(--sans); color: var(--soft); letter-spacing: .1mm; }