/* ==========================================================================
   eLova Brain Wellness Report — sheet styles
   Each sheet is drawn at A4 @ 96dpi (794 × 1123 px) and scaled to fit.
   ========================================================================== */

.sheet {
  --paper: #FAF7F2;
  --paper-2: #F3EEE5;
  --ink: #1A1A1A;
  --deep: #1F2A2E;
  --sand: #C9B89A;
  --stone: #6B6B6B;
  --hair: rgba(26, 26, 26, 0.12);
  --hair-2: rgba(26, 26, 26, 0.26);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;

  width: 794px;
  height: 1123px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  padding: 40px 52px 0;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.04), 0 50px 90px -50px rgba(31, 42, 46, 0.45), 0 18px 36px -24px rgba(31, 42, 46, 0.18);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }
.sheet svg { display: block; overflow: visible; }
.sheet .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.sheet .cap { font-size: 8.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--stone); }
.sheet .stone { color: var(--stone); }

/* Header */
.sh-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.sh-brand { display: flex; align-items: center; gap: 14px; }
.sh-brand img { height: 26px; width: auto; display: block; }
.sh-brand .cap { padding-left: 14px; border-left: 1px solid var(--hair-2); line-height: 1.3; color: var(--ink); }
.sh-id { text-align: right; font-size: 9.5px; color: var(--stone); line-height: 1.55; }
.sh-id b { color: var(--ink); font-weight: 500; }
.sh-meta { display: flex; gap: 22px; padding: 10px 0 0; font-size: 9.5px; color: var(--stone); }
.sh-meta b { font-weight: 500; color: var(--ink); }

/* Vitality */
.sh-vital { display: grid; grid-template-columns: 196px 1fr; gap: 34px; align-items: center; padding: 18px 0 18px; }
.ring-wrap { position: relative; width: 172px; height: 172px; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-center .n { font-family: var(--serif); font-size: 76px; line-height: 0.85; font-weight: 300; }
.ring-center .of { font-size: 9.5px; color: var(--stone); margin-top: 8px; letter-spacing: 0.06em; }
.ring-center .cap { margin-top: 10px; font-size: 7.5px; }
.vital-copy .cap { margin-bottom: 10px; }
.vital-copy .h { font-family: var(--serif); font-size: 30px; line-height: 1.08; font-weight: 400; margin: 0 0 12px; letter-spacing: -0.01em; }
.vital-copy p { margin: 0 0 16px; color: var(--stone); font-size: 11px; line-height: 1.6; max-width: 400px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { font-size: 9.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink); display: inline-flex; gap: 6px; align-items: center; letter-spacing: 0.02em; white-space: nowrap; }
.pill.fill { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sand); }

/* Brain age */
.sh-age { background: var(--paper-2); border-radius: 10px; padding: 18px 24px 14px; display: grid; grid-template-columns: 196px 1fr; gap: 30px; }
.age-num .cap { margin-bottom: 8px; }
.age-num .big { display: flex; align-items: baseline; gap: 8px; }
.age-num .big .n { font-family: var(--serif); font-size: 76px; line-height: 0.85; font-weight: 300; }
.age-num .big .u { font-size: 11px; color: var(--stone); }
.age-num .vs { margin-top: 12px; font-size: 10.5px; color: var(--stone); }
.age-num .vs b { color: var(--ink); font-weight: 500; }
.age-num .pills { margin-top: 12px; }
.age-chart .row { display: flex; justify-content: space-between; align-items: baseline; }
.age-chart .row + .row { margin-top: 12px; }

/* Readings */
.sh-section-title { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0 10px; border-bottom: 1px solid var(--hair); }
.sh-section-title .t { font-family: var(--serif); font-size: 20px; line-height: 1; }
.sh-read { display: grid; grid-template-columns: repeat(3, 1fr); }
.read { padding: 14px 20px 4px 0; border-right: 1px solid var(--hair); }
.read + .read { padding-left: 20px; }
.read:last-child { border-right: 0; padding-right: 0; }
.read .top { display: flex; justify-content: space-between; align-items: baseline; }
.read .name { font-family: var(--serif); font-size: 24px; line-height: 1; }
.read .status { font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); display: inline-flex; align-items: center; gap: 6px; }
.read .status.support::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sand); }
.read .score { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; }
.read .score .n { font-family: var(--serif); font-size: 54px; line-height: 0.85; font-weight: 300; }
.read .score .of { font-size: 9.5px; color: var(--stone); }
.read .score .d { margin-left: auto; font-size: 10px; color: var(--ink); }
.read .scale { margin: 12px 0 0; }
.read .ends { display: flex; justify-content: space-between; font-size: 8.5px; color: var(--stone); margin-top: 7px; letter-spacing: 0.04em; }
.read .trend { margin-top: 12px; }
.read .trend-h { display: flex; justify-content: space-between; font-size: 8.5px; color: var(--stone); margin-bottom: 4px; }
.read .trend-h b { color: var(--ink); font-weight: 500; }

/* Bottom: profile + journey */
.sh-bottom { display: grid; grid-template-columns: 236px 1fr; gap: 34px; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--hair); }
.profile .cap, .journey .cap { margin-bottom: 12px; }
.legend { display: flex; gap: 16px; font-size: 8.5px; color: var(--stone); margin-top: 2px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 0; border-top: 1px dashed var(--stone); display: inline-block; }
.legend i.solid { border-top: 1.5px solid var(--ink); }
.journey .h { font-family: var(--serif); font-size: 22px; line-height: 1.1; margin: 0 0 6px; }
.journey p { margin: 0 0 14px; color: var(--stone); font-size: 10.5px; }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.steps4::before { content: ""; position: absolute; left: 7px; right: 12%; top: 7px; height: 1px; background: var(--ink); }
.steps4 > div { position: relative; padding-right: 8px; }
.steps4 .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--ink); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.steps4 .dot svg { width: 8px; height: 8px; }
.steps4 b { display: block; font-weight: 500; font-size: 10px; margin-top: 10px; }
.steps4 span { font-size: 9px; color: var(--stone); }
.next-visit { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--hair-2); border-radius: 8px; }
.next-visit .l { display: flex; align-items: center; gap: 10px; font-size: 10.5px; }
.next-visit .l .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sand); }
.next-visit .r { font-family: var(--serif); font-size: 17px; }

/* Footer */
.sh-foot { position: absolute; left: 52px; right: 52px; bottom: 26px; padding-top: 12px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; }
.sh-foot p { margin: 0; font-size: 7.5px; line-height: 1.55; color: var(--stone); max-width: 500px; }
.sh-foot .r { text-align: right; font-size: 8px; color: var(--stone); line-height: 1.5; }
.sh-foot .r img { height: 13px; width: auto; display: inline-block; margin-bottom: 3px; }

/* ---------- Sheet 2 ---------- */
.sh-h2 { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 0 12px; border-bottom: 1px solid var(--ink); }
.sh-h2 .t { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -0.01em; }
.understand { display: grid; grid-template-columns: 1fr 1fr; }
.u-item { padding: 16px 26px 16px 0; border-bottom: 1px solid var(--hair); }
.u-item:nth-child(2n) { padding: 16px 0 16px 26px; border-left: 1px solid var(--hair); }
.u-item .i { font-family: var(--serif); font-size: 13px; color: var(--stone); }
.u-item .n { font-family: var(--serif); font-size: 24px; line-height: 1.05; margin: 2px 0 8px; }
.u-item p { margin: 0 0 10px; font-size: 10.5px; line-height: 1.6; }
.u-item .ex { font-size: 9.5px; color: var(--stone); padding-top: 8px; border-top: 1px dashed var(--hair-2); line-height: 1.55; }
.suggest { display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; padding-top: 16px; }
.practices { list-style: none; margin: 0; padding: 0; }
.practices li { display: grid; grid-template-columns: 26px 1fr; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 11px; }
.practices li:first-child { border-top: 1px solid var(--hair); }
.practices .i { font-family: var(--serif); font-size: 14px; color: var(--stone); line-height: 1.2; }
.practices small { display: block; color: var(--stone); font-size: 9.5px; margin-top: 2px; }
.factors { display: grid; gap: 6px; }
.factors div { font-size: 10.5px; padding: 8px 12px; background: var(--paper-2); border-radius: 6px; display: flex; justify-content: space-between; }
.factors div span { color: var(--stone); font-size: 9px; }
.method { margin-top: 18px; font-size: 9.5px; color: var(--stone); line-height: 1.6; }
.method b { color: var(--ink); font-weight: 500; }
.sh-close { margin-top: 20px; background: var(--deep); color: var(--paper); border-radius: 10px; padding: 18px 24px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.sh-close .q { font-family: var(--serif); font-size: 20px; line-height: 1.25; }
.sh-close .q em { font-style: normal; color: var(--sand); }
.sh-close .cap { color: rgba(250, 247, 242, 0.6); margin-bottom: 8px; }
.sh-close .r { text-align: right; font-size: 10px; color: rgba(250, 247, 242, 0.7); line-height: 1.5; }
.sh-close .r b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--paper); }