/* =========================================================================
   PATERSON LIFEPLAN PACK: SKIN
   1 Tokens   2 Base   3 Frame (desk, index, sheet)   4 Components
   5 Sections 6 Print
   Everything visual is decided here.
   ========================================================================= */

/* ---- 1 TOKENS ---------------------------------------------------------- */
:root{
  color-scheme:light;
  /* colour */
  --paper:#ffffff;        /* the sheet */
  --desk:#edf1f2;         /* the surface behind the sheet */
  --ink:#1c2b33;          /* body text */
  --ink-soft:#56666e;     /* secondary text */
  --petrol:#1d4658;       /* small headings, links */
  --action:#1d4658;       /* primary button */
  --on-action:#ffffff;
  --gold:#c8a95f;         /* rules, lozenges, hairlines. Never text. */
  --gold-deep:#a5843a;    /* display type from 24px, outlines of things you write in */
  --gold-ink:#876b29;     /* gold text below 24px */
  --gold-wash:#f7f1e1;    /* notes, slips, unset placeholders */
  --rule:#dfe5e7;         /* neutral dividers */
  --focus:#2a7fa3;
  --alert:#9c3524;
  --lift:0 1px 2px rgba(20,44,56,.08),0 18px 48px -18px rgba(20,44,56,.28);
  /* type */
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-text:Montserrat,"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --t-small:.8125rem; --t-note:.875rem; --t-body:1rem; --t-lede:1.125rem;
  --t-h3:1.0625rem; --t-h2:1.25rem; --t-display:1.75rem;
  --t-title:clamp(2.4rem,1.5rem + 3.4vw,3.6rem);
  /* space and shape */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2.25rem; --s7:3.5rem;
  --radius:2px; --hair:1px; --stroke:1.5px;
  --sheet-w:47rem;
  /* brand */
  --logo:url("assets/paterson-logo.png");
  /* required by the host page */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#13272f; --desk:#0a171d; --ink:#e6ecee; --ink-soft:#a2b2b9;
    --petrol:#a9cddb; --action:#c8a95f; --on-action:#10212a;
    --gold-deep:#d3b56f; --gold-ink:#d8bb77; --gold-wash:#2b2a1c;
    --rule:#2b4350; --focus:#8fd0ea; --alert:#f0a091;
    --lift:0 1px 2px rgba(0,0,0,.4),0 18px 48px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#13272f; --desk:#0a171d; --ink:#e6ecee; --ink-soft:#a2b2b9;
  --petrol:#a9cddb; --action:#c8a95f; --on-action:#10212a;
  --gold-deep:#d3b56f; --gold-ink:#d8bb77; --gold-wash:#2b2a1c;
  --rule:#2b4350; --focus:#8fd0ea; --alert:#f0a091;
  --lift:0 1px 2px rgba(0,0,0,.4),0 18px 48px -18px rgba(0,0,0,.7);
}

/* ---- 2 BASE ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--desk);color:var(--ink);font:400 var(--t-body)/1.65 var(--font-text)}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
p{margin:0 0 var(--s4)}
a{color:var(--petrol);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Title of a sheet. Italic and centred on pack sheets, after the divider pages of the printed pack. */
h1,.t-title{font:italic 500 var(--t-title)/1.08 var(--font-display);color:var(--gold-deep);text-align:center;text-wrap:balance;margin:0 0 var(--s7)}
h1:focus{outline:none}
h2,.t-h2{font:500 var(--t-h2)/1.3 var(--font-text);color:var(--petrol);margin:var(--s6) 0 var(--s2)}
h3,.t-h3{font:500 var(--t-h3)/1.35 var(--font-text);color:var(--gold-ink);margin:var(--s5) 0 var(--s1)}
.display{font:400 var(--t-display)/1.2 var(--font-display);color:var(--gold-deep);margin:var(--s7) 0 var(--s3)}
.lede{font-size:var(--t-lede)}
.small{font-size:var(--t-note);color:var(--ink-soft)}
.gap-above{margin-top:var(--s5)}

/* ---- 3 FRAME ----------------------------------------------------------- */
.desk{display:grid;grid-template-columns:14.5rem minmax(0,var(--sheet-w));justify-content:center;gap:0 clamp(1.5rem,4vw,4rem);padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,3vw,3rem) 4rem;min-height:100vh}
.stage{min-width:0}
.bar{display:none}
.scrim{position:fixed;inset:0;z-index:30;background:rgba(6,16,21,.5);border:0;padding:0}

/* index: a contents page that sits on the desk, not a boxed sidebar */
.index{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--s6));align-self:start;max-height:calc(100vh - 4.5rem);overflow-y:auto;display:flex;flex-direction:column;padding:var(--s2) var(--s1) var(--s2) 0}
.index-title{font:italic 500 1.5rem/1.15 var(--font-display);color:var(--gold-deep);margin:0}
.index-for{font-size:var(--t-note);color:var(--ink-soft);margin:var(--s1) 0 var(--s5)}
.nav{display:flex;flex-direction:column}
.nav-group{font-size:var(--t-small);color:var(--ink-soft);margin:var(--s4) 0 var(--s1) var(--s3)}
.nav-item{display:grid;grid-template-columns:.9rem 1fr;gap:var(--s3);align-items:center;width:100%;padding:.42rem var(--s3);border:0;border-left:2px solid transparent;background:none;text-align:left;font-size:.94rem;color:var(--ink);cursor:pointer}
.nav-grp{margin:0 0 var(--s2)}
.nav-head{font-weight:600;color:var(--petrol)}
p.nav-head{display:grid;grid-template-columns:.9rem 1fr;gap:var(--s3);align-items:center;padding:.42rem var(--s3);margin:0}
.nav-text{display:flex;flex-direction:column}
.nav-state{font-size:var(--t-small);font-weight:400;color:var(--ink-soft)}
.nav-grp:not(.open) .nav-sub{display:none}
.panel{margin-top:var(--s5);padding:var(--s4) 0 0 var(--s3);border-top:var(--hair) solid var(--gold)}
.panel-h{margin:0 0 var(--s1);font-size:var(--t-small);color:var(--ink-soft)}
.panel-big{margin:0 0 var(--s3);font:400 var(--t-display)/1.2 var(--font-display);color:var(--gold-deep)}
.panel-note{margin:calc(var(--s2) * -1) 0 var(--s4);font-size:var(--t-small);color:var(--ink-soft)}
.nav-item:hover{color:var(--petrol);border-left-color:var(--rule)}
.nav-item[aria-current="page"]{border-left-color:var(--gold);color:var(--petrol);font-weight:600}
.nav-sub .nav-item{padding-left:var(--s5);font-size:.9rem}
.nav-last{margin-top:var(--s4)}
.index-foot{margin-top:var(--s6);padding:var(--s4) 0 0 var(--s3);border-top:var(--hair) solid var(--gold);font-size:var(--t-small);line-height:1.5;color:var(--ink-soft)}
.index-foot p{margin:0 0 var(--s1)}
.index-foot button{display:block;border:0;background:none;padding:0;margin-top:var(--s1);color:var(--petrol);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:var(--t-small)}

/* sheet: one portrait page at a time */
.sheet{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:min(62rem,calc(100vh - 5rem));background:var(--paper);box-shadow:var(--lift);padding:var(--s7) clamp(1.25rem,7vw,4.5rem) var(--s5);animation:sheet-in .2s ease-out}
@keyframes sheet-in{from{opacity:0}to{opacity:1}}
.masthead{height:4rem;margin-bottom:var(--s6);background:var(--logo) center/contain no-repeat;flex:none}
.colophon{margin-top:auto;padding-top:var(--s4);border-top:var(--hair) solid var(--gold);text-align:center}
.colophon p{margin:0}
.colophon.gap-above{margin-top:var(--s7)}
.site{font-size:var(--t-small);letter-spacing:.06em}
.site a{text-decoration:none}
.folio{font-size:var(--t-note);color:var(--gold-ink);margin-bottom:var(--s1)!important}
.pager{display:flex;justify-content:space-between;gap:var(--s4);margin:var(--s7) 0 var(--s6)}
.pager .next{margin-left:auto}

/* LifePlan pre-work sheets: Paterson Center material, marked as the printed pre-work is
   with a running head, corner hairlines and the trademark line. */
.sheet--lp::before,.sheet--lp::after{content:"";position:absolute;pointer-events:none;width:11rem;height:17rem;
  background:
    linear-gradient(to bottom left,transparent calc(50% - .6px),var(--gold) calc(50% - .6px),var(--gold) calc(50% + .6px),transparent calc(50% + .6px)) 100% 0/52% 100% no-repeat,
    linear-gradient(to bottom left,transparent calc(50% - .6px),var(--gold) calc(50% - .6px),var(--gold) calc(50% + .6px),transparent calc(50% + .6px)) 0 0/100% 27% no-repeat}
.sheet--lp::before{top:0;right:0}
.sheet--lp::after{bottom:0;left:0;transform:rotate(180deg)}
.sheet--lp>*{position:relative;z-index:1}
.running{align-self:center;text-align:center;font:500 1.3rem/1.25 var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--gold-deep);border-block:var(--hair) solid var(--gold);padding:var(--s3) var(--s6);margin:0 0 var(--s6)}
.sheet--lp h1{font:400 clamp(1.9rem,1.5rem + 1.6vw,2.4rem)/1.15 var(--font-display);text-align:left;margin-bottom:var(--s5)}
.colophon--lp{border-top:0}
.lp-mark{display:inline-flex;align-items:center;gap:var(--s3);font:500 1.15rem/1 var(--font-display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--s2)!important}
.tm{font-size:.75rem;color:var(--ink-soft)}

/* ---- 4 COMPONENTS ------------------------------------------------------ */
/* lozenge: the mark's unit, used wherever something has a state */
.dia{display:inline-block;flex:none;width:.62rem;height:.62rem;transform:rotate(45deg);border:var(--stroke) solid var(--gold-deep);background:transparent;transition:background-color .25s}
.dia[data-s="started"]{background:linear-gradient(135deg,transparent 50%,var(--gold) 50%)}
.dia[data-s="done"]{background:var(--gold);border-color:var(--gold)}
.nodia{width:.62rem}

/* prose lists take the lozenge too */
.sheet ul:not([class]){list-style:none;padding-left:var(--s5);margin:0 0 var(--s4)}
.sheet ul:not([class]) li{position:relative;margin-bottom:var(--s2)}
.sheet ul:not([class]) li::before{content:"";position:absolute;left:-1.2rem;top:.62em;width:.38rem;height:.38rem;transform:rotate(45deg);background:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:var(--s2) var(--s5);border-radius:var(--radius);border:var(--stroke) solid var(--action);background:var(--action);color:var(--on-action);font-weight:500;cursor:pointer;text-decoration:none}
.btn.quiet{background:var(--paper);color:var(--ink);border-color:var(--rule)}
.sheet>.btn{align-self:flex-start}
.btn.quiet:hover{border-color:var(--gold-deep)}
.btn.small-btn{min-height:2.25rem;padding:var(--s1) var(--s3);font-size:var(--t-note)}
.guide-sheet{overflow:visible} /* so a Link menu on the last row is not cut off by the sheet */
.menu{position:relative;display:inline-block}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:'\25BE';margin-left:var(--s2)}
.menu-list{position:absolute;z-index:5;left:0;top:calc(100% + var(--s1));min-width:11rem;display:flex;flex-direction:column;padding:var(--s1);background:var(--paper);border:var(--stroke) solid var(--gold-deep);border-radius:var(--radius)}
.menu-list button{border:0;background:none;text-align:left;padding:var(--s2) var(--s3);cursor:pointer;color:var(--ink);font-size:var(--t-note)}
.menu-list button:hover,.menu-list button:focus-visible{background:var(--gold-wash)}
.linkish{border:0;background:none;padding:0;color:var(--petrol);font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.icon-btn{width:2.2rem;height:2.75rem;border:0;background:none;color:var(--ink-soft);cursor:pointer;font-size:1.3rem;line-height:1;border-radius:var(--radius)}
.icon-btn:hover{color:var(--alert)}
.row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* things you write in are the only boxes */
.field{display:block;margin:0 0 var(--s5)}
.field .q{display:block;font-weight:500;margin-bottom:var(--s1)}
.field .hint{display:block;font-size:var(--t-note);color:var(--ink-soft);margin-bottom:var(--s2)}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;padding:.6rem .75rem;background:var(--paper);border:var(--stroke) solid var(--gold-deep);border-radius:var(--radius);line-height:1.5}
textarea{display:block;resize:vertical;min-height:5.2rem;overflow:hidden}
input:disabled,textarea:disabled{opacity:.7}
::placeholder{color:var(--ink-soft);opacity:.7}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}

/* a choice is a lozenge; a confirmation is a tick */
input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;width:1rem;height:1rem;margin:0 .2rem;transform:rotate(45deg);border:var(--stroke) solid var(--gold-deep);border-radius:1px;background:var(--paper);cursor:pointer}
input[type=radio]:checked{background:var(--gold);box-shadow:inset 0 0 0 2.5px var(--paper)}
input[type=radio]:disabled{opacity:.6;cursor:default}
input[type=checkbox]{flex:none;width:1.1rem;height:1.1rem;margin:0;accent-color:var(--gold-ink)}
.choice-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:var(--s2) 0 var(--s5)}
.choice-row label,.tick{display:flex;gap:var(--s3);align-items:center;cursor:pointer}
.tick{gap:var(--s2);font-size:var(--t-note)}
.tick.agree{align-items:flex-start;font-size:var(--t-body);margin:var(--s5) 0 var(--s4)}
.tick.agree input{margin-top:.3rem}

/* note, placeholder, message */
.note{background:var(--gold-wash);border-left:3px solid var(--gold);padding:var(--s3) var(--s4);margin:var(--s4) 0}
.note p{margin:0 0 var(--s2)}
.unset{background:var(--gold-wash);padding:0 .2em;border-radius:var(--radius)}
.alert{color:var(--alert);font-weight:500;margin:var(--s3) 0 0}
.status-line{color:var(--ink-soft);margin:var(--s3) 0 0}

/* chart: the gold-ruled table of the printed pack */
.chart{width:100%;border-collapse:collapse;margin:var(--s4) 0 0}
.chart th,.chart td{border:var(--hair) solid var(--gold);padding:var(--s3);text-align:left;vertical-align:middle}
.chart thead th{font-weight:400;color:var(--gold-ink);text-align:center}
.chart .c-state{width:2.75rem;text-align:center}
.chart .by{font-style:italic;font-size:var(--t-note);white-space:nowrap}
.chart .st{font-size:var(--t-note);color:var(--ink-soft)}

/* slips: short answers as paper tags */
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3);padding:0}
.chip-list li{display:inline-flex;align-items:center;gap:var(--s1);background:var(--gold-wash);border:var(--hair) solid var(--gold);border-radius:var(--radius);padding:.15rem .2rem .15rem .7rem;font-size:.94rem;max-width:100%;overflow-wrap:anywhere}
.chip-list button{border:0;background:none;width:1.6rem;height:1.6rem;cursor:pointer;font-size:1.05rem;line-height:1;color:var(--ink-soft)}
.chip-list button:hover{color:var(--alert)}
.chip-entry{display:flex;gap:var(--s3)}
.chip-entry input{flex:1;min-width:0}
.count{font-size:var(--t-small);color:var(--ink-soft);margin:var(--s2) 0 0}

/* dialog */
dialog{width:min(32rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow:auto;border:0;border-top:3px solid var(--gold);border-radius:var(--radius);padding:var(--s6);background:var(--paper);color:var(--ink);box-shadow:var(--lift)}
dialog::backdrop{background:rgba(6,16,21,.55)}
dialog .display{margin-top:0}

/* ---- 5 SECTIONS -------------------------------------------------------- */
/* welcome: a letter, so it starts like one */
.address{text-align:right;font-style:normal;line-height:1.6;margin:0 0 var(--s6)}
.address .date{display:block;margin-top:var(--s4)}
h1.salutation{text-align:left;font-size:clamp(2.1rem,1.5rem + 2.4vw,3rem);margin-bottom:var(--s5)}
.signoff{margin-top:var(--s5)}

/* guide */
.bio{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:var(--s5);align-items:start}
.bio img{width:9.5rem;height:9.5rem}
.bio-lead{font:600 .95rem/1.4 var(--font-text);margin-bottom:var(--s3)}
.quote{font:italic 400 1.5rem/1.3 var(--font-display);color:var(--gold-deep);text-align:center;margin:var(--s6) 0 var(--s2)}
.quote+p{text-align:center}

/* venue: three options divided by rules, the chosen one flagged in the margin */
.options{margin:var(--s4) 0 var(--s5);border-bottom:var(--hair) solid var(--gold)}
.option{border-top:var(--hair) solid var(--gold);border-left:3px solid transparent;margin-left:calc(-1 * var(--s4) - 3px);padding:var(--s5) 0 var(--s3) var(--s4)}
.option.on{border-left-color:var(--gold)}
.option{transition:opacity .2s,filter .2s}
.options:has(.option.on) .option:not(.on){opacity:.4;filter:saturate(.3)}
.option-head{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin-bottom:var(--s3);cursor:pointer}
.option-head .name{font:400 var(--t-display)/1.2 var(--font-display);color:var(--gold-deep)}
.chosen{display:none;font-size:var(--t-note);color:var(--gold-ink);font-weight:500}
.option.on .chosen{display:inline}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s4) 0}
.photos img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hotel{margin-top:var(--s5)}

/* agreement */
.legal-title{font:600 .85rem/1.4 var(--font-text);margin-bottom:var(--s4)}
.parties{list-style:none;padding:0;margin:0 0 var(--s5)}
.parties li{padding-left:var(--s4);text-indent:calc(-1 * var(--s4));margin-bottom:var(--s2)}
.sig-block{border-top:var(--hair) solid var(--gold);padding:var(--s5) 0 var(--s2);margin-top:var(--s5)}
.sig-block p{margin-bottom:var(--s2)}
.sig-paper{display:inline-block;background:#fff;padding:var(--s2) var(--s3);margin:var(--s1) 0 var(--s3)}
.sig-paper img{width:11.5rem}
.sig-label{font-weight:500;margin-bottom:var(--s1)}
.pad-wrap{position:relative;background:#fff;border:var(--stroke) solid var(--gold-deep);border-radius:var(--radius)}
#pad{display:block;width:100%;height:10rem;touch-action:none;cursor:crosshair}
.pad-hint{position:absolute;left:var(--s3);bottom:var(--s2);font-size:var(--t-small);color:#6b7a81;pointer-events:none}
.typed-preview{font:italic 500 2rem/1.3 var(--font-display);color:#14222a;background:#fff;border-bottom:var(--stroke) solid var(--gold-deep);padding:var(--s2) var(--s3);min-height:3.8rem;margin-top:var(--s2);overflow-wrap:anywhere}

/* life domains */
.domain{margin:0 0 var(--s4)}
.domain dt{font:400 var(--t-h2)/1.3 var(--font-text);color:var(--gold-ink);margin-top:var(--s5)}
.domain dd{margin:var(--s1) 0 0}

/* Four Helpful Lists: one ruled chart, the cells are the boxes */
.matrix{border:var(--hair) solid var(--gold);margin-top:var(--s6)}
.matrix-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr)}
.matrix-row+.matrix-row{border-top:var(--hair) solid var(--gold)}
.matrix-domain{display:grid;place-items:center;margin:0;padding:var(--s3);border-right:var(--hair) solid var(--gold);font:400 var(--t-h3)/1.3 var(--font-text);color:var(--ink)}
.matrix-cells{display:grid;grid-template-columns:1fr 1fr;gap:var(--hair);background:var(--gold)}
.cell{display:block;background:var(--paper);padding:var(--s2) var(--s3) var(--s1)}
.cell:focus-within{outline:3px solid var(--focus);outline-offset:-3px}
.cell-q{display:block;font-size:var(--t-small);color:var(--gold-ink)}
.cell textarea{border:0;padding:var(--s1) 0;background:transparent;min-height:4.6rem;resize:none}
.cell textarea:focus{outline:none}

/* life circle */
.role{border-top:var(--hair) solid var(--gold);margin-top:var(--s6)}
.role h2{margin-top:var(--s5);color:var(--gold-ink);font-weight:600;font-size:var(--t-h3)}
.role h2 span{font-weight:400;color:var(--ink-soft)}
.person{display:grid;grid-template-columns:1.1fr .9fr 1.2fr;gap:var(--s3);margin:var(--s4) 0 var(--s2)}
.person-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);align-items:center;margin-bottom:var(--s4);font-size:var(--t-note)}
.person-foot label{display:flex;gap:var(--s2);align-items:center;cursor:pointer}

/* turning points: a life line, each age a point on it */
.tp-head{display:grid;grid-template-columns:4.75rem 1fr 1.5fr 2.2rem;gap:var(--s3);font-size:var(--t-note);color:var(--gold-ink);margin:var(--s5) 0 var(--s2)}
.tp-head span:first-child{text-align:center}
#tp-host{position:relative;padding-bottom:var(--s2)}
#tp-host::before{content:"";position:absolute;top:var(--s3);bottom:0;left:2.375rem;border-left:var(--hair) solid var(--gold)}
.tp{position:relative;display:grid;grid-template-columns:4.75rem 1fr 1.5fr auto;gap:var(--s3);align-items:start;margin-bottom:var(--s4)}
.tp input{text-align:center}
.tp textarea{min-height:2.75rem}

/* talent and heart */
.talent{border-top:var(--hair) solid var(--gold);margin-top:var(--s6)}
.talent h2{margin-top:var(--s5)}

/* send */
.summary{list-style:none;margin:var(--s4) 0 var(--s6);padding:0;border-top:var(--hair) solid var(--gold)}
.summary li{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s1);border-bottom:var(--hair) solid var(--gold)}
.summary .st{margin-left:auto;font-size:var(--t-note);color:var(--ink-soft)}
.steps{padding-left:var(--s5);margin:0 0 var(--s5)}
.steps li{margin-bottom:var(--s2)}

/* skin reference */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:var(--s4);margin:var(--s4) 0}
.swatch i{display:block;height:3.25rem;border:var(--hair) solid var(--rule)}
.swatch b{display:block;font-weight:500;font-size:var(--t-note);margin-top:var(--s2)}
.swatch span{display:block;font-size:var(--t-small);color:var(--ink-soft);line-height:1.4}
.specimen{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--s2) var(--s4);align-items:baseline;margin:var(--s4) 0}
.specimen dt{font-size:var(--t-small);color:var(--ink-soft)}
.specimen dd{margin:0;min-width:0}
.specimen dd>*{margin:0;text-align:left}
.demo{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center;margin:var(--s3) 0 var(--s5)}
.demo-label{display:inline-flex;align-items:center;gap:var(--s3);font-size:var(--t-note)}

/* ---- small screens ---- */
@media (max-width:60rem){
  .desk{display:block;padding:0 0 var(--s6)}
  .bar{display:flex;align-items:center;gap:var(--s4);position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:var(--hair) solid var(--gold);padding:var(--s2) var(--s4)}
  .bar img{height:2rem;width:auto}
  .bar .prog{font-size:var(--t-small);color:var(--ink-soft);margin-left:auto;text-align:right}
  .index{position:fixed;top:0;bottom:0;left:0;z-index:40;align-self:stretch;width:min(19rem,86vw);max-height:none;background:var(--paper);box-shadow:var(--lift);padding:calc(env(safe-area-inset-top,0px) + var(--s5)) var(--s4) calc(env(safe-area-inset-bottom,0px) + var(--s4));transform:translateX(-104%);visibility:hidden;transition:transform .2s ease,visibility .2s}
  .index.open{transform:none;visibility:visible}
  .sheet{box-shadow:none;min-height:calc(100vh - 3.5rem);padding-top:var(--s6)}
  .masthead{display:none} /* the bar already carries the mark */
}
@media (max-width:38rem){
  .bio{grid-template-columns:1fr}
  .address{text-align:left}
  .two,.person,.matrix-cells{grid-template-columns:1fr}
  .matrix-row{grid-template-columns:1fr}
  .matrix-domain{border-right:0;border-bottom:var(--hair) solid var(--gold);background:var(--gold-wash);place-items:start;font-weight:500}
  .chart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .chart,.chart tbody{display:block}
  .chart tr{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:0 var(--s2);padding:var(--s3) 0;border-bottom:var(--hair) solid var(--gold)}
  .chart tr:first-child{border-top:var(--hair) solid var(--gold)}
  .chart td{border:0;padding:0;grid-column:2}
  .chart td.c-state{grid-column:1;grid-row:1 / span 3;width:auto;padding-top:.45rem}
  .tp-head{display:none}
  .tp{grid-template-columns:4.75rem 1fr auto}
  .tp .tp-spec{grid-column:2 / -1;grid-row:2}
  .running{font-size:1.05rem;padding-inline:var(--s4)}
  .sheet--lp::before,.sheet--lp::after{width:6rem;height:10rem}
  .specimen{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- 6 PRINT: the record only ---- */
#print-root{display:none}
@media print{
  :root{padding:0}
  body{background:#fff;color:#111}
  .desk,dialog,.scrim{display:none!important}
  #print-root{display:block}
}

/* ---- guide page (/guide) ------------------------------------------------ */
.guide{max-width:var(--sheet-w);margin:0 auto;padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,3vw,3rem) 4rem}
.guide-sheet{min-height:0;margin-bottom:var(--s6)}
.guide-bar{justify-content:space-between;margin-bottom:var(--s4)}
.guide-who{margin:0}
input[type=password],input[type=date],select{width:100%;padding:.6rem .75rem;background:var(--paper);border:var(--stroke) solid var(--gold-deep);border-radius:var(--radius);line-height:1.5}
.error{display:block;min-height:1.2em;margin:0;font-size:var(--t-note);color:var(--alert)}
.link-box{margin-top:var(--s5);padding:var(--s4);background:var(--gold-wash)}
.link-box input{margin:var(--s2) 0}
.pack-row{padding:var(--s4) 0;border-bottom:var(--hair) solid var(--gold)}
.pack-row p{margin:0 0 var(--s1)}
.tag{font-size:var(--t-note);color:var(--ink-soft);border:var(--hair) solid var(--gold);padding:0 var(--s2);margin-left:var(--s2)}
.pack-client{font-weight:600;color:var(--petrol)}

/* the guide's Advanced section */
.advanced{margin:var(--s5) 0;border-top:var(--hair) solid var(--gold);padding-top:var(--s3)}
.advanced>summary{cursor:pointer;font:500 var(--t-body)/1.4 var(--font-body);color:var(--gold-deep)}
.adv-phase{display:grid;gap:var(--s2);margin:var(--s3) 0;padding-bottom:var(--s3);border-bottom:var(--hair) solid var(--gold)}
.adv-term{margin:var(--s3) 0}
.advanced fieldset{border:0;padding:0;margin:var(--s4) 0}
.advanced textarea,.advanced input[type=text]{width:100%}