/* vision.html: the LegacyRx One-Page Vision (LegacyRx.co/vision), the worksheet Chapter 7 of
   the book sends readers to and prints at the back of it. On screen it is a paper sheet on the
   navy desk (the Prescription's paper colours) that the reader can type into; printed, it is the
   sheet alone on one Letter page, ink on white. The words are Kyle's, from
   Book/Oct 19/LegacyRx One-Page Vision.docx. */

.vs-sec{padding-top:10px}
.vs-wrap{max-width:1060px;margin:0 auto}
.vs-tools{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.vs-tools .btn{padding:15px 26px}
.vs-privacy{margin:16px auto 30px;max-width:60ch;text-align:center;font-size:13px;color:var(--sub)}

/* the sheet */
.vs{
  --ink:#0A1128;--ink-2:#2F3B5E;--ink-3:#5A6785;--bronze:#7A5A22;
  --rule:rgba(16,32,74,.30);--fs:15px;--lh:2em;
  background:linear-gradient(180deg,#F8F4EB,#F4F0E6 30%,#EFEADF);
  border:1px solid rgba(16,32,74,.16);border-radius:calc(var(--r-card) + 10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 40px 90px rgba(3,6,16,.6);
  padding:clamp(22px,4.4vw,56px);color:var(--ink);font-family:var(--text)
}
.vs-mast{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;
  border-bottom:2px solid #10204A;padding-bottom:14px}
.vs-title{margin:0;font-family:var(--text);font-weight:600;font-size:clamp(24px,3vw,32px);letter-spacing:.01em;line-height:1.1;color:var(--ink)}
.vs-title span{display:inline-block;margin-left:12px;font-family:var(--display);font-weight:400;font-size:.36em;
  letter-spacing:.34em;text-transform:uppercase;vertical-align:.45em;color:var(--ink-2)}
.vs-tag{margin:0;font-family:var(--display);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  line-height:1.9;text-align:right;color:var(--bronze)}
@media(max-width:560px){.vs-tag{text-align:left}}
.vs-intro{margin:16px auto 0;max-width:62ch;text-align:center;font-size:15px;color:var(--ink-2)}

.vs-row{display:grid;gap:20px 26px;margin-top:26px;grid-template-columns:1fr}
@media(min-width:640px){.vs-row[data-n="2"]{grid-template-columns:1fr 1fr}.vs-row[data-n="5"]{grid-template-columns:1fr 1fr}}
@media(min-width:760px){.vs-row[data-n="3"]{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.vs-row[data-n="5"]{grid-template-columns:repeat(5,1fr);gap:20px 18px}}
.vs-cell{display:flex;flex-direction:column;min-width:0}
.vs-cell h3{margin:0;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;line-height:1.6;color:var(--bronze)}
.vs-cell p{margin:4px 0 6px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
/* each cell's label, prompt and lines share the row's three tracks (subgrid), so the lines of a
   row start at the same height however long its prompts run, as on the printed sheet */
@supports (grid-template-rows:subgrid){
  .vs-cell{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
}

/* a ruled box: the rules are real borders (spans behind the text box), because Chrome prints a
   gradient-drawn rule as a blurred double line. The text box sits on top with one line per rule;
   when a box fills up, vision.js shrinks its type (--fit) so more words fit on each line. */
.vs-box{position:relative;height:calc(var(--rows) * var(--fs) * 2)}
.vs-box>span{display:block;height:calc(var(--fs) * 2);border-bottom:1px solid var(--rule)}
.vs-text{
  position:absolute;inset:0;width:100%;height:100%;resize:none;overflow:hidden;border:0;border-radius:0;
  padding:0 2px;margin:0;background:transparent;
  font-family:var(--text);font-size:calc(var(--fs) * var(--fit,1));line-height:calc(var(--fs) * 2);color:var(--ink)
}
.vs-list{list-style:none;margin:0;padding:0;counter-reset:vs}
.vs-list li{counter-increment:vs;display:flex;align-items:baseline;gap:8px;height:calc(var(--fs) * 2);
  border-bottom:1px solid var(--rule)}
.vs-list li::before{content:counter(vs) ".";flex:none;min-width:1.4em;font-size:13px;color:var(--ink-3)}
.vs-list input{flex:1;min-width:0;border:0;background:transparent;padding:0 2px;
  font-family:var(--text);font-size:calc(var(--fs) * var(--fit,1));line-height:calc(var(--fs) * 2);color:var(--ink)}
.vs-text:focus,.vs-list input:focus{outline:none;background-color:rgba(217,179,108,.12);box-shadow:0 0 0 2px rgba(122,90,34,.35);border-radius:4px}
.vs-text.full{box-shadow:0 0 0 2px rgba(126,42,56,.45);border-radius:4px}

.vs-foot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:30px;padding-top:12px;border-top:1.5px solid #10204A}
.vs-dice{font-family:var(--display);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.vs-dice b{font-weight:700;color:var(--bronze)}
.vs-url{font-size:13px;color:var(--ink-2)}

.vs-after{margin-top:34px}

/* ---------------- print: the sheet alone, one Letter page ---------------- */
@page{size:letter portrait;margin:.45in}
@media print{
  html,body{background:#fff !important}
  #bg,.side-brand,.gnav,.hero,.foot,.ytmodal,#page>section:not(.vs-sec),.vs-tools,.vs-privacy{display:none !important}
  body::after{display:none !important}          /* the site's grain overlay would print as a grey box */
  #page{z-index:auto}
  .vs-sec{padding:0 !important}
  .vs-wrap{max-width:none}
  .rv{opacity:1 !important;transform:none !important}
  .vs{--fs:10pt;--lh:.28in;--rule:#9AA3B8;background:#fff;border:0;border-radius:0;box-shadow:none;padding:0}
  .vs-title{font-size:20pt}
  .vs-tag{font-size:6.5pt}
  .vs-intro{margin-top:8pt;max-width:none;font-size:10pt}
  .vs-row{margin-top:12pt;gap:10pt 14pt}
  .vs-row[data-n="2"]{grid-template-columns:1fr 1fr}
  .vs-row[data-n="3"]{grid-template-columns:repeat(3,1fr)}
  .vs-row[data-n="5"]{grid-template-columns:repeat(5,1fr);gap:10pt 10pt}
  .vs-cell h3{font-size:6.8pt}
  .vs-cell p{margin:2pt 0 3pt;font-size:8.6pt;line-height:1.35}
  .vs-box{height:calc(var(--rows) * var(--lh))}
  .vs-box>span{height:var(--lh)}
  .vs-text{line-height:var(--lh)}
  .vs-list li{height:var(--lh)}
  .vs-list li::before{font-size:8.6pt}
  .vs-list input{line-height:var(--lh)}
  .vs-text:focus,.vs-list input:focus,.vs-text.full{background-color:transparent;box-shadow:none}
  .vs-foot{margin-top:16pt;padding-top:7pt}
  .vs-dice{font-size:6.5pt}
  .vs-url{font-size:9pt}
}