/* public/assets/report-page.css — the design of a whole reading as a page: the public sample (/sample) and the buyer's own
   reading (/r/<token>). report-view.js writes the reading; report-page.js adds the contents and the planet cards.
   One file, so the sample and what a buyer receives always look the same. Tokens (--btn, --day, the type colours) come from manuscript.css. */
:root{--paper:#FBF8F1;--card:#FFFFFF;--inkk:#26201A;--ink2k:#6E6355;--line:#E7DFCE;--sheet:#FBF3E4;--dark:#2A1D14;--gold:#E9B949;
      --acc:#B3321A;--accDeep:#7A2410;--accSoft:#F6E1DA;--accInk:#F3D3CC;--accWarm:#FFB47C}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--inkk);font-family:var(--text);line-height:1.66;font-size:17px;overflow-wrap:break-word}
.w{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.14;margin:0;text-wrap:balance}
.lab{font-family:var(--label);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2k)}
.kick{display:block;font-family:var(--label);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--labelOnLight);margin-bottom:12px}
.rubw{font-family:var(--brandfont);font-weight:400;color:var(--acc)}
.mono2{font-family:var(--label);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
a{color:var(--accDeep)}

/* the homepage's menu, buttons and footer, unchanged */
.nav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.nav .w{display:flex;align-items:center;gap:16px;padding-block:12px;overflow-x:auto}
.brandx{font-size:1.15rem;white-space:nowrap;color:var(--inkk);text-decoration:none}
.brandx .b1{font-family:var(--brandfont);color:var(--acc)}
.brandx .b2{font-family:var(--display);color:var(--inkk)}
.navlinks{display:flex;gap:2px;margin-left:auto}
.navlinks a{font-family:var(--label);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2k);text-decoration:none;padding:6px 10px;border-radius:99px;white-space:nowrap}
.navlinks a:hover{color:var(--inkk)}
@media(max-width:640px){.navlinks{display:none} .nav .btnp{margin-left:auto}}
.btnp{display:inline-block;background:var(--btn);color:var(--btnInk);box-shadow:inset 0 0 0 1.5px var(--btnLine);font-family:var(--brandfont);font-size:1.3rem;letter-spacing:.01em;text-transform:none;line-height:1.1;font-weight:400;font-synthesis:none;text-decoration:none;padding:9px 22px 7px;border-radius:99px;white-space:nowrap}
.btnp:hover{background:var(--btnHover)}
.nav .btnp{font-size:1.12rem;padding:7px 18px 5px;color:var(--btnInk);font-weight:400}       /* the menu's button: the same lettering, a size smaller */
.foot2{background:var(--inkk);color:#EFE8DC;margin-top:64px}
.foot2 .w{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding-block:38px}
@media(max-width:760px){.foot2 .w{grid-template-columns:1fr 1fr}}
.foot2 .mono2{color:#C9A45C}
.foot2 p,.foot2 a{font-size:.82rem;color:#D8CFC0;text-decoration:none}
.foot2 ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.foot2 .base{border-top:1px solid rgba(255,255,255,.15);padding-block:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.75rem;color:#B9AE9C}

/* ── opening: who the reading is for, and the four areas as the homepage lists them ── */
.sHero{padding-block:52px 10px}
.sHero h1{font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.05;max-width:18ch}
.sHero .lede{color:var(--inkk);font-family:var(--display);font-size:1.12rem;max-width:56ch;margin:.9em 0 0}
.sHero .lede2{color:var(--ink2k);max-width:62ch;margin:.6em 0 0}
.toc{margin-top:30px;border-top:1px solid rgba(38,32,26,.16)}
.trow{display:grid;grid-template-columns:64px minmax(0,1fr) auto 40px;gap:4px 20px;align-items:center;padding:16px 8px;border-bottom:1px solid rgba(38,32,26,.16);
      color:var(--inkk);text-decoration:none;transition:background .25s}
.trow:hover{background:var(--wash)}
.trow .md{width:64px;height:64px;border-radius:50%;background:var(--c);color:#FBF6EE;display:grid;place-items:center;font-family:var(--brandfont);font-size:1rem;
          padding-top:.16em;-webkit-text-stroke:.5px currentColor;box-shadow:0 6px 14px -8px rgba(38,32,26,.55)}
.trow .nm b{display:block;font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.15}
.trow .nm span{font-family:var(--label);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2k)}
.trow .rn{font-family:var(--brandfont);font-size:1.5rem;line-height:1.1;color:var(--acc);-webkit-text-stroke:.4px currentColor;text-align:right}
.trow .ar{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--inkk);display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s}
.trow .ar svg{width:16px;height:16px}
.trow:hover .ar{background:var(--c);border-color:var(--c);color:#FBF6EE}
@media(max-width:620px){.trow{grid-template-columns:48px minmax(0,1fr) 34px;padding:14px 4px}
  .trow .md{width:48px;height:48px;font-size:.72rem} .trow .rn{grid-column:2;grid-row:2;text-align:left;font-size:1.25rem} .trow .ar{grid-column:3;grid-row:1/span 2;width:34px;height:34px}}

/* ── an area: the planet's card on the left, the reading on the right ── */
.jumpX{display:none}                              /* the contents above replace the renderer's own jump links */
.badgeX{display:inline-block;background:#FFF5DC;color:#7A5200;border:1px solid #E8CD8A;border-radius:99px;padding:5px 12px;font-family:var(--label);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;margin-top:24px}
.areaX{margin-top:56px;padding-top:56px;border-top:1px solid rgba(38,32,26,.16);scroll-margin-top:70px}
.aGrid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.aSide{position:sticky;top:84px}
.aBody{min-width:0;max-width:680px}
@media(max-width:860px){.aGrid{grid-template-columns:minmax(0,1fr);gap:22px} .aSide{position:static}}

.kickX{color:var(--labelOnLight)}
.headX h2{font-size:clamp(1.7rem,3.8vw,2.5rem);margin-top:8px;line-height:1.1}
.headX h2 b,.whyX li b{font-family:var(--brandfont);font-weight:400;font-synthesis:none;color:var(--brandOnLight)}   /* a planet's name: the brand lettering, as on the planet cards */
.ofX{margin:.5em 0 0;color:var(--ink2k)}
.whyX{margin-top:26px}
.whyX ul{list-style:none;margin:10px 0 0;padding:0;border-top:1px dotted rgba(38,32,26,.3)}
.whyX li{padding:10px 0;border-bottom:1px dotted rgba(38,32,26,.3);color:var(--ink2k);font-size:.96rem}
.whyX li b{font-size:1.3rem}
.sumX{margin:.5em 0 0;max-width:62ch}

/* what was marked: the mirror's statements, each with the True it was given */
.markX{margin-top:26px;background:var(--card);border:1px solid rgba(38,32,26,.12);border-radius:16px;padding:18px 20px 20px;box-shadow:0 16px 30px -22px rgba(38,32,26,.4)}
.ticksX{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.ticksX li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 12px;background:var(--paper);border-radius:10px;
           font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.35}
.ticksX .tickX{font-size:0}
.ticksX .tickX::after{content:'True';font-family:var(--label);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--true);border-radius:99px;padding:4px 9px;display:inline-block;vertical-align:.15em}

/* the ritual itself */
.ritX{margin-top:40px;border-top:2px solid var(--inkk);padding-top:22px}
.ritHeadX{display:block}
.medalX{display:none}
.ritHeadX h3{font-family:var(--brandfont);font-weight:400;font-size:clamp(2.3rem,5.4vw,3.4rem);line-height:1.02;color:var(--acc);margin-top:6px;-webkit-text-stroke:.5px currentColor}
.subX{margin:.45em 0 0;color:var(--ink2k);font-size:1.02rem}
.startX{margin:.5em 0 0;color:var(--inkk)} .startX b{color:var(--acc)}
.stripX{margin:18px 0 0;padding:10px 0;border-top:1px dotted rgba(38,32,26,.3);border-bottom:1px dotted rgba(38,32,26,.3);
        font-family:var(--label);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accDeep)}

.partX{padding:26px 0 0}
.phX{margin-bottom:10px}
.phX h4{font-size:1.35rem;display:flex;align-items:center;gap:12px}
.phX h4::after{content:'';flex:1;border-top:2px dotted rgba(184,146,63,.8)}          /* the homepage's gold thread */
.partX p{margin:.5em 0 0;max-width:64ch}
/* how we arrived at this: the argument as a walk, each paragraph a step along the thread */
.dotsX p{position:relative;padding-left:22px;margin:.9em 0 0}
.dotsX p::before{content:'';position:absolute;left:4px;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.dotsX p::after{content:'';position:absolute;left:7px;top:1.35em;bottom:-1.05em;border-left:1.5px dotted rgba(184,146,63,.8)}
.dotsX p:last-child::after{display:none}
.needX,.doingX{list-style:none;margin:.5em 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.needX li,.doingX li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line);position:relative}
.needX li::before,.doingX li::before{content:'·';position:absolute;left:4px;top:4px;color:var(--acc);font-size:1.6rem;line-height:1}

/* the practice: the planet's paper, and steps numbered like the homepage's four steps */
.doX{margin-top:30px;padding:24px 24px 26px;border-radius:14px;background:linear-gradient(180deg,var(--accSoft) 0%,var(--sheet) 150px,var(--sheet) calc(100% - 120px),var(--accSoft) 100%);
     box-shadow:0 0 0 1px rgba(38,32,26,.08)}
.blockX + .blockX{margin-top:22px;padding-top:18px;border-top:1px dashed rgba(38,32,26,.2)}
.whenX{font-family:var(--label);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--labelOnLight)}
.stepsX{counter-reset:s;list-style:none;margin:14px 0 0;padding:0;display:grid;gap:16px}
.stepsX li{counter-increment:s;position:relative;padding-left:46px;min-height:34px}
.stepsX li::before{content:counter(s);position:absolute;left:0;top:-.28em;width:34px;text-align:center;font-family:var(--brandfont);font-size:2rem;line-height:1;color:var(--acc);-webkit-text-stroke:.4px currentColor}
.stepsX li::after{content:'';position:absolute;left:16px;top:1.9em;bottom:-14px;border-left:2px dotted rgba(184,146,63,.8)}
.stepsX li:last-child::after{display:none}
.oneX{margin:12px 0 0!important}

/* the three things that make it yours: where it lands, the sign, the nakshatra */
.tuneX .phX h4{font-size:1.15rem}
.tuneX .phX h4 .placeX{color:var(--acc)}
.tuneX p.kindX{color:var(--ink2k)}
.tuneX .swapX{margin:.8em 0 0;background:var(--card);border:1px solid rgba(38,32,26,.12);border-radius:12px;padding:12px 16px;box-shadow:0 12px 24px -20px rgba(38,32,26,.45)}
.tuneX .swapX .lab{display:block;color:var(--labelOnLight);margin-bottom:3px}
.tuneX .swapX p{margin:0}

.strongX{margin-top:22px;border:1px dashed rgba(38,32,26,.25);border-radius:12px;padding:14px 16px}
.strongX.lead{border-style:solid;border-color:var(--acc);background:var(--accSoft)}
.knowX p{font-family:var(--display);font-weight:500;font-size:1.2rem;line-height:1.4;max-width:52ch}
/* the giving: the one part that leaves the house */
.giveX{margin-top:30px;padding:22px 22px 24px;border-radius:14px;background:var(--dark) radial-gradient(circle at 20% 0%,rgba(233,185,73,.16),transparent 60%);color:#FBF1DC}
.giveX .phX h4{color:#FBF1DC} .giveX .phX h4::after{border-color:rgba(233,185,73,.55)}
.giveX p{color:rgba(251,241,220,.9)}
.extraX{margin-top:24px;border:1px dashed rgba(38,32,26,.25);border-radius:12px;padding:16px 18px}
.extraX p{color:var(--ink2k)}
.endX{margin-top:56px;color:var(--ink2k);font-size:.92rem}

/* the planet's card, style E (paper), as on the homepage */
.pc{--g:#333;--gt:#eee;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;margin:0;color:var(--inkk);
    background:linear-gradient(180deg,var(--gt) 0%,var(--sheet) 150px,var(--sheet) calc(100% - 170px),var(--gt) 100%);
    box-shadow:0 0 0 1px rgba(38,32,26,.1),0 22px 40px -28px rgba(38,32,26,.6)}
.pc .tp{display:grid;justify-items:center;padding:14px 12px 10px;text-align:center}
.pc .rg{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--devfont);font-weight:600;font-size:.78rem;color:var(--g);
        background:#FFFBF2;box-shadow:inset 0 0 0 1.2px var(--g),inset 0 0 0 4px #FFFBF2,inset 0 0 0 5px color-mix(in srgb,var(--g) 50%,#fff)}
.pc .nm{font-family:var(--brandfont);font-size:2.2rem;line-height:1;margin-top:8px;-webkit-text-stroke:.6px currentColor;color:color-mix(in srgb,var(--g) 82%,#000)}
.pc .ru{font-family:var(--label);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;margin-top:7px;color:color-mix(in srgb,var(--g) 30%,#3a3128)}
.pc .ru b{font-weight:600;color:color-mix(in srgb,var(--g) 85%,#000)}
.pc .art{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--gt)}
.pc .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc .lb{padding:12px 12px 13px}
.pc .bx{display:block;border:1.5px solid var(--g);background:rgba(255,251,242,.9)}
.pc .dy{display:block;background:var(--g);color:#fff;font-family:var(--label);font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:6px 8px}
.pc .md{display:block;padding:9px 10px;font-size:.9rem;line-height:1.3}
.pc .md b{display:block;font-family:var(--display);font-weight:500;font-size:.96rem}
@media(max-width:860px){
  .pc{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"art tp" "art lb"}
  .pc .art{grid-area:art;aspect-ratio:auto;min-height:104px}
  .pc .tp{grid-area:tp;grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;column-gap:10px;text-align:left;padding:12px 14px 4px}
  .pc .rg{width:34px;height:34px;font-size:.66rem}
  .pc .nm{margin-top:0;font-size:1.6rem}
  .pc .ru{grid-column:1/-1;margin-top:6px;font-size:.5rem;letter-spacing:.1em}
  .pc .lb{grid-area:lb;padding:2px 14px 12px}
  .pc .bx{border:0;background:transparent}
  .pc .dy{background:transparent;color:color-mix(in srgb,var(--g) 60%,#3a3128);text-align:left;padding:0}
  .pc .md{display:none}
}

/* the close, as the homepage's eighth card */
.go{margin-top:64px;background:var(--dark) radial-gradient(circle at 50% 30%,rgba(233,185,73,.18),transparent 62%);color:#FBF1DC;border-radius:8px;
    padding:34px 30px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px 30px;align-items:center;overflow:hidden}
.go b{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;display:block}
.go p{margin:.4em 0 0;opacity:.85}
.go a{display:block;text-align:center;padding:13px 24px 10px;font-size:1.65rem;background:var(--gold);color:var(--dark);text-decoration:none;margin:4px -30px 0;border-radius:0;white-space:nowrap;font-family:var(--brandfont);letter-spacing:.01em;text-transform:none;line-height:1.1;font-weight:400;font-synthesis:none}
.go a:focus-visible{outline:2px solid #FBF1DC;outline-offset:3px}
@media(max-width:620px){.go{padding:28px 22px 0} .go a{margin-inline:-22px}}

/* ── the buyer's own reading: a private note under the title, and the close (keep it; and, after one area, the rest) ── */
.privX{display:flex;gap:10px;align-items:baseline;margin:1.1em 0 0;max-width:62ch;color:var(--ink2k);font-size:.94rem}
.privX .lab{flex:none;color:var(--labelOnLight)}
.ends{margin-top:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;align-items:stretch}
.ends.one{max-width:680px}
.ends .go{margin-top:0;display:flex;flex-direction:column;align-items:stretch}
.ends .go a{margin-top:auto}
.ends .go > div{margin-bottom:22px}
.keep{border:2.5px solid transparent;border-radius:14px;padding:30px 24px 0;background:var(--frameCard);box-shadow:var(--frameShadow);display:flex;flex-direction:column;overflow:hidden}
.keep > div{margin-bottom:22px}
.keep b{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;display:block}
.keep p{margin:.4em 0 0;color:var(--ink2k)}
.keep button{margin:auto -24px 0;width:calc(100% + 48px);border:0;border-radius:0 0 11.5px 11.5px;background:var(--btn);color:var(--btnInk);cursor:pointer;
             font-family:var(--brandfont);font-size:1.65rem;letter-spacing:.01em;text-transform:none;line-height:1.1;font-weight:400;font-synthesis:none;padding:13px 24px 10px}
.keep button:hover{background:var(--btnHover)}
.keep button:focus-visible{outline:2.5px solid var(--dayDeep);outline-offset:-5px}

@media(prefers-reduced-motion:reduce){.trow{transition:none}}
@media print{.nav,.toc,.go,.ends,.privX,.foot2{display:none} body{font-size:12pt} .aSide{position:static} .areaX{break-before:page;border:0} .partX,.blockX{break-inside:avoid}}