@import url("./tokens.css");

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.print-controls {
  width: min(960px, calc(100% - 2rem));
  margin: 1rem auto;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.print-controls a, .print-controls button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  padding: 0 .9rem;
  text-decoration: none;
  cursor: pointer;
}

.print-controls .secondary {
  background: var(--gold);
  color: var(--ink);
}

.print-notice {
  width: min(960px, calc(100% - 2rem));
  margin: 0 auto 1rem;
  color: var(--navy);
  font-weight: 800;
}

.print-document {
  display: grid;
  gap: 1rem;
  margin: 0 auto 2rem;
}

.print-page {
  width: 8.5in;
  height: 11in;
  margin: 0 auto;
  padding: .42in;
  background: var(--white);
  border: 1px solid rgba(24,58,90,.18);
  overflow: hidden;
  page-break-after: always;
  break-after: page;
  page-break-inside: avoid;
  break-inside: avoid;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .16in;
}

.print-page:last-child {
  page-break-after: auto;
  break-after: auto;
}

.print-page + .print-page {
  page-break-before: always;
  break-before: page;
}

.print-header {
  border-bottom: 4px solid var(--gold);
  padding-bottom: .12in;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2in;
}

.print-header h1, .print-header h2, .print-section h2, .print-section h3 {
  color: var(--deep-navy);
  margin: 0;
}

.print-header h1 { font-size: 30pt; line-height: .95; }
.print-header h2 { font-size: 20pt; }
.print-header p, .print-section p, .print-section li, .print-footer {
  margin: 0;
  font-size: 9.5pt;
  line-height: 1.22;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 8pt;
  color: var(--navy);
  font-weight: 900;
}

.max-print-photo {
  width: .9in;
  height: .9in;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid var(--gold);
}

.print-grid {
  display: grid;
  gap: .12in;
}

.front-grid {
  grid-template-columns: 1fr 1fr;
}

.print-section {
  border: 1px solid rgba(24,58,90,.18);
  border-radius: 12px;
  padding: .12in;
  background: rgba(244,240,230,.45);
}

.print-section h2 { font-size: 13pt; margin-bottom: .06in; }
.print-section h3 { font-size: 10.5pt; margin-bottom: .04in; }
.print-section ul, .print-section ol {
  margin: .04in 0 0 .16in;
  padding: 0;
}

.marker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .08in;
}

.marker-card {
  border-left: 4px solid var(--gold);
  padding-left: .08in;
}

.quick-card-back {
  grid-template-rows: auto 1fr auto;
}

.family-command-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: .1in;
  min-height: 0;
}

.family-slot {
  border: 1px solid rgba(24,58,90,.22);
  border-radius: 12px;
  padding: .11in;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: .04in;
  overflow: hidden;
}

.family-slot h3 {
  font-size: 15pt;
  color: var(--deep-navy);
  margin: 0;
  text-transform: uppercase;
}

.family-slot p, .family-slot small {
  font-size: 8.6pt;
  line-height: 1.16;
  margin: 0;
}

.family-slot.placeholder {
  border-style: dashed;
  color: var(--muted);
  align-content: center;
  text-align: center;
  background: rgba(24,58,90,.04);
}

.badge-line {
  display: flex;
  flex-wrap: wrap;
  gap: .05in;
}

.print-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(24,58,90,.1);
  color: var(--deep-navy);
  font-size: 7.3pt;
  font-weight: 900;
  padding: .025in .06in;
}

.command-sheet-grid {
  grid-template-columns: 1.1fr .9fr;
  align-content: start;
}

.command-hero {
  border-left: 6px solid var(--gold);
  padding-left: .15in;
}

.compact-list li {
  margin-bottom: .025in;
}

.progress-print {
  display: grid;
  gap: .08in;
}

.progress-line {
  display: grid;
  grid-template-columns: .8in 1fr .45in;
  gap: .08in;
  align-items: center;
  font-size: 9pt;
  font-weight: 900;
}

.meter {
  height: .1in;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(24,58,90,.15);
}

.meter span {
  display: block;
  height: 100%;
  background: var(--success);
}

.handler-print-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .07in;
}

.handler-print-grid div {
  border: 1px solid rgba(24,58,90,.16);
  border-radius: 8px;
  padding: .07in;
  font-size: 8.5pt;
}

.handler-print-grid .verified {
  background: rgba(46,107,69,.1);
  border-color: rgba(46,107,69,.28);
}

.session-print-list {
  display: grid;
  gap: .06in;
}

.session-print-list article {
  border-bottom: 1px solid rgba(24,58,90,.14);
  padding-bottom: .05in;
}

.notes-box {
  min-height: 1.55in;
  border: 1px dashed rgba(24,58,90,.35);
  border-radius: 12px;
  background: rgba(244,240,230,.35);
}

.print-footer {
  border-top: 1px solid rgba(24,58,90,.2);
  padding-top: .08in;
  display: flex;
  justify-content: space-between;
  gap: .2in;
  color: var(--muted);
  font-weight: 800;
}

@media print {
  @page {
    size: letter portrait;
    margin: 0;
  }

  html, body {
    width: 8.5in;
    height: auto;
    margin: 0;
    padding: 0;
    background: var(--white);
  }

  .print-controls, .print-notice {
    display: none !important;
  }

  .print-document {
    display: block;
    margin: 0;
  }

  .print-page {
    width: 8.5in;
    height: 11in;
    margin: 0;
    border: 0;
    box-shadow: none;
  }
}