/* ─────────────────────────────────────────────────────────────
   DBF Print System — Design Tokens & Page Styles
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;600&display=swap');

:root {
  /* ─── Color: warm paper, ink, brand gold ─── */
  --ink:        #14110D;
  --ink-soft:   #3b342a;
  --ink-mute:   #6a614f;
  --gold:       #B89357;
  --gold-deep:  #8C6E3E;
  --gold-soft:  #E5D4AB;
  --gold-wash:  #F2E6C8;
  --paper:      #F6EFDF;
  --paper-deep: #ECE1C4;
  --paper-cool: #FAF6EC;
  --rule:       rgba(20,17,13,0.18);
  --rule-soft:  rgba(20,17,13,0.10);
  --gold-rule:  rgba(184,147,87,0.55);

  /* ─── Type ─── */
  --f-display: "Archivo Black", "Arial Black", sans-serif;
  --f-eyebrow: "Bebas Neue", "Helvetica Neue", sans-serif;
  --f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", "Menlo", monospace;
  --f-hand:    "Caveat", cursive;

  /* ─── Geometry ─── */
  --page-w: 8.5in;
  --page-h: 11in;
  --page-pad: 0.6in;
  --radius: 6px;
}

/* ───────────────────────── Paper ───────────────────────── */
.dbf-page {
  width: var(--page-w);
  height: var(--page-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 11pt;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--page-pad);
  /* Subtle paper grain layered over warm cream */
  background-image:
    radial-gradient(ellipse at top left,  rgba(184,147,87,0.10), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(140,110,62,0.08), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.28  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-blend-mode: multiply, multiply, multiply;
}

.dbf-page.cool {
  background-color: var(--paper-cool);
}

/* Letterpress / printed-feel subtle vignette */
.dbf-page::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(80,55,20,0.10);
}

/* ───────────────────────── Brand Band ───────────────────────── */
.dbf-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
}
.dbf-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--gold);
}
.dbf-band .mark {
  height: 30px;
  display: block;
}
.dbf-band .page-tag {
  font-family: var(--f-eyebrow);
  font-size: 14pt;
  letter-spacing: 0.42em;
  color: var(--ink);
}
.dbf-band .page-num {
  font-family: var(--f-mono);
  font-size: 9pt;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* ───────────────────────── Footer ───────────────────────── */
.dbf-foot {
  position: absolute;
  bottom: calc(var(--page-pad) - 0.18in);
  left: var(--page-pad);
  right: var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-eyebrow);
  font-size: 11pt;
  letter-spacing: 0.45em;
  color: var(--ink-soft);
}
.dbf-foot .url {
  /* Spaced like the V1 footer: D  R  E  A  M  B  I  G  F  A  S  T  .  C  O  M */
  letter-spacing: 0.55em;
}
.dbf-foot .pg {
  font-family: var(--f-mono);
  font-size: 9pt;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.dbf-foot .rule {
  flex: 1;
  height: 1px;
  background: var(--gold);
  margin: 0 14px;
  opacity: 0.65;
}

/* ───────────────────────── Title Block ───────────────────────── */
.dbf-title-block {
  margin-top: 28px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: flex-end;
}
.dbf-title-block .num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 88pt;
  line-height: 0.85;
  color: var(--gold);
  -webkit-text-stroke: 1.5px var(--ink);
  margin: 0;
}
.dbf-title-block .lockup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
}
.dbf-title-block .eyebrow {
  font-family: var(--f-eyebrow);
  font-size: 12pt;
  letter-spacing: 0.4em;
  color: var(--gold-deep);
}
.dbf-title-block h1 {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 34pt;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
}

/* ───────────────────────── Section Heads ───────────────────────── */
.dbf-section {
  margin-top: 18px;
}
.dbf-h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17pt;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.dbf-h2 .step {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--gold);
  -webkit-text-stroke: 1px var(--ink);
  font-size: 22pt;
  line-height: 1;
}
.dbf-h2 .line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--ink) 0 30%, var(--gold) 30% 100%);
  position: relative;
  top: -4px;
  opacity: 0.85;
}

.dbf-eyebrow {
  font-family: var(--f-eyebrow);
  font-size: 10.5pt;
  letter-spacing: 0.32em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

/* ───────────────────────── Prompt / Question rows ───────────────────────── */
.dbf-prompt {
  margin: 8px 0;
}
.dbf-prompt .q {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 10.5pt;
  color: var(--ink);
  margin-bottom: 4px;
}
.dbf-prompt .a-line {
  border-bottom: 1px dashed var(--rule);
  height: 22px;
}
.dbf-prompt .a-line + .a-line { margin-top: 6px; }

/* ───────────────────────── Boxed callouts ───────────────────────── */
.dbf-card {
  background: rgba(255,253,247,0.55);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  position: relative;
}
.dbf-card.tinted {
  background: var(--gold-wash);
  border-color: var(--gold-rule);
}
.dbf-card.ink {
  background: var(--ink);
  color: var(--paper);
}
.dbf-card.ink .dbf-eyebrow { color: var(--gold-soft); }

/* Gold corner brackets — echo of the graph icon */
.dbf-bracket {
  position: relative;
}
.dbf-bracket::before,
.dbf-bracket::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--gold);
  pointer-events: none;
}
.dbf-bracket::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.dbf-bracket::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ───────────────────────── Checkbox ───────────────────────── */
.dbf-check {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink);
  background: rgba(255,255,255,0.5);
  vertical-align: -2px;
  margin-right: 6px;
  border-radius: 2px;
}
.dbf-yn {
  display: inline-flex;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 9pt;
  letter-spacing: 0.12em;
  margin-left: 8px;
}
.dbf-yn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}

/* ───────────────────────── Numbered priority slots ───────────────────────── */
.dbf-priority {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.dbf-priority .n {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18pt;
  line-height: 1;
  color: var(--gold);
  -webkit-text-stroke: 0.8px var(--ink);
  text-align: center;
}
.dbf-priority.big .n { color: var(--ink); -webkit-text-stroke: 0; }
.dbf-priority .l {
  border-bottom: 1px solid var(--rule);
  height: 18px;
}
.dbf-priority .tag {
  font-family: var(--f-eyebrow);
  font-size: 9pt;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
}

/* ───────────────────────── Tables / Habit grid ───────────────────────── */
.dbf-habit-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
}
.dbf-habit-grid th, .dbf-habit-grid td {
  border: 1px solid var(--rule);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
  height: 28px;
}
.dbf-habit-grid th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-eyebrow);
  letter-spacing: 0.22em;
  font-weight: 400;
  font-size: 10pt;
  text-transform: uppercase;
}
.dbf-habit-grid td:last-child {
  width: 80px; text-align: center;
}

/* ───────────────────────── Lists ───────────────────────── */
.dbf-list {
  list-style: none; padding: 0; margin: 8px 0;
}
.dbf-list li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 10.5pt;
}
.dbf-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.dbf-list.check li::before {
  content: "✓";
  left: 0; top: 4px;
  width: auto; height: auto;
  background: transparent;
  transform: none;
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 12pt;
}

/* ───────────────────────── Pull quote ───────────────────────── */
.dbf-pull {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 19pt;
  line-height: 1.1;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 12px 0;
}
.dbf-pull .accent { color: var(--gold); -webkit-text-stroke: 0.5px var(--ink); }

/* ───────────────────────── Stamp / signature row ───────────────────────── */
.dbf-sign {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  margin-top: 8px;
}
.dbf-sign .line {
  border-bottom: 1.5px solid var(--ink);
  height: 32px;
}
.dbf-sign .label {
  font-family: var(--f-eyebrow);
  font-size: 9pt;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  margin-top: 4px;
}
.dbf-sign .x {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 28pt;
  color: var(--gold);
  -webkit-text-stroke: 1px var(--ink);
}

/* ───────────────────────── Date strip ───────────────────────── */
.dbf-date {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--f-eyebrow);
  letter-spacing: 0.28em;
  font-size: 10pt;
  color: var(--gold-deep);
}
.dbf-date .slot {
  border-bottom: 1.5px solid var(--ink);
  min-width: 80px;
  height: 22px;
}

/* ───────────────────────── Two col helpers ───────────────────────── */
.dbf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dbf-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ───────────────────────── Print rules ───────────────────────── */
@media print {
  @page {
    size: letter;
    margin: 0;
  }
  html, body { background: white; margin: 0; padding: 0; }
  .dbf-page {
    page-break-after: always;
    box-shadow: none !important;
    margin: 0;
  }
  .dbf-page:last-child { page-break-after: auto; }
  .canvas-frame, .preview-chrome { display: none !important; }
}