/* =====================================================================
   quiz.css · what the rebuild adds on top of base.css

   base.css is the original stylesheet, carried over unchanged so every
   ported piece still looks like itself. This file holds only the new
   surfaces: the quiz inside the side panel, the liquid metal progress
   bar, the pose picker, and the side by side reveal.
   ===================================================================== */

/* ---------- the quiz inside the panel ---------- */
.qstep{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);margin-bottom:9px}
.qtext{font-size:16px;line-height:1.45;margin-bottom:13px}
.qopts{display:flex;flex-direction:column;gap:7px}
.qopt{position:relative}
.qopt input{position:absolute;opacity:0;width:0;height:0}
.qopt label{display:block;padding:11px 13px;border:1px solid rgba(67,102,146,.35);
  border-radius:9px;background:rgba(255,255,255,.02);cursor:pointer;
  font-family:var(--serif);font-size:12px;line-height:1.5;
  color:var(--bone);transition:border-color .18s,background .18s}
.qopt label:hover{border-color:rgba(127,145,170,.7);background:rgba(255,255,255,.045)}
.qopt input:focus-visible+label{outline:2px solid var(--flash);outline-offset:2px}
.qopt input:checked+label{border-color:var(--ck,var(--chrome));
  background:color-mix(in srgb,var(--ck,var(--chrome)) 16%,transparent);
  box-shadow:inset 0 0 0 1px var(--ck,var(--chrome))}

.qprompt{margin-top:4px}
.qprompt label{display:block;font-size:16px;line-height:1.45;margin-bottom:8px}
.qhint{font-family:var(--serif);font-size:10.5px;line-height:1.55;
  color:var(--slate);margin-bottom:10px}
.qprompt textarea{width:100%;min-height:92px;resize:vertical;
  border:1px solid rgba(67,102,146,.4);background:rgba(4,10,9,.5);color:var(--bone);
  border-radius:9px;padding:11px;line-height:1.55;outline:none;
  font-family:var(--serif);font-size:14px}
.qprompt textarea:focus{border-color:var(--flash);box-shadow:0 0 0 3px rgba(157,195,226,.1)}
.qprompt textarea::placeholder{color:#5d6d69}

.qerr{min-height:15px;margin-top:9px;font-family:var(--serif);
  font-size:11px;color:#D4796A}

.readbar{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.rc{font-size:20px;font-variant-numeric:tabular-nums;color:var(--slate);min-width:26px}

/* ---------- the liquid metal progress bar ---------- */
#quizprog{position:fixed;left:0;right:0;top:0;z-index:45;pointer-events:none;
  opacity:0;transition:opacity .5s}
#quizprog.on{opacity:1}
.mfx-track{position:relative;height:16px;width:100%;
  background:rgba(255,255,255,.045);overflow:hidden;
  box-shadow:inset 0 -1px 0 rgba(67,102,146,.35)}
.mfx-mask{position:absolute;inset:0 auto 0 0;width:0;overflow:hidden;
  transition:width .55s cubic-bezier(.16,1,.3,1)}
.mfx-canvas{display:block;height:16px}
/* if webgl is refused the bar still reads, it just reads in one colour */
.mfx-track.mfx-flat .mfx-mask{background:linear-gradient(90deg,#8C3A2E,#C1682F,#C9A24B,
  #4F7A5A,#0F3A38,#3A3A6B,#D9CFE0)}
.proglbl{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:45;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);pointer-events:none;
  opacity:0;transition:opacity .5s}
.proglbl.on{opacity:1}

/* ---------- pose picker ---------- */
#poses{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
#poses .btn{font-size:10px;padding:6px 11px}
#poses .btn.cur{border-color:var(--bone);color:var(--bone)}
.posenote{font-family:var(--serif);font-size:10.5px;line-height:1.6;
  color:var(--slate);margin-top:8px;min-height:17px}


/* =====================================================================
   THE RESULTS SHEET

   Three zones laid over the running scene: a left column, a right column,
   and a band across the bottom. The middle stays empty on purpose, because
   that is where the figure is. Panels are transparent with a soft edge so
   the prana keeps drifting through them.
   ===================================================================== */
#reveal.sheet{display:block;pointer-events:none}
#reveal.sheet .cs-left,
#reveal.sheet .cs-right,
#reveal.sheet .cs-bottom{opacity:0;transition:opacity 1.2s}
#reveal.sheet.settle .cs-left,
#reveal.sheet.settle .cs-right,
#reveal.sheet.settle .cs-bottom{opacity:1;pointer-events:auto}

.cs-left,.cs-right{position:absolute;top:62px;bottom:calc(31vh + 10px);
  width:min(25vw,330px);overflow-y:auto;padding:2px 2px 10px;
  scrollbar-width:thin;scrollbar-color:var(--chrome) transparent}
.cs-left{left:22px}
.cs-right{right:22px}
.cs-left::-webkit-scrollbar,.cs-right::-webkit-scrollbar{width:3px}
.cs-left::-webkit-scrollbar-thumb,.cs-right::-webkit-scrollbar-thumb{
  background:var(--chrome);border-radius:2px}

.cs-bottom{position:absolute;left:22px;right:22px;bottom:30px;height:29vh;
  max-height:290px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-bottom .cs-panel{overflow-y:auto}

.cs-panel{background:rgba(8,18,16,.62);border:1px solid rgba(67,102,146,.32);
  border-radius:10px;padding:15px 16px;margin-bottom:12px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.cs-bottom .cs-panel{margin-bottom:0}

.cs-head{font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);margin-bottom:11px}
.cs-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase}
.cs-name{font-family:var(--sans);font-weight:500;
  font-size:clamp(26px,2.9vw,40px);line-height:1.02;letter-spacing:-.02em;
  margin:10px 0 10px}
.cs-summary{font-size:14px;line-height:1.5;color:var(--bone)}
.cs-not{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);margin-top:10px}

/* the headline archetype moves with the dial, and shows what it moved from */
.cs-name{transition:opacity .28s ease}
.cs-name.turned{animation:csturn .42s ease}
@keyframes csturn{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
.cs-moved{font-size:12px;line-height:1.5;color:var(--slate);margin-top:9px}
.cs-moved i{font-style:italic;color:var(--bone)}
.cs-moved button{background:none;border:none;padding:0;margin-left:2px;font:inherit;
  color:var(--bone);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cs-moved button:hover{color:var(--chrome)}

/* the seven centres as levelled bars */
.cs-bars{display:grid;gap:9px}
.cs-bar{display:block;width:100%;background:none;border:none;padding:2px 3px;
  text-align:left;color:inherit;cursor:pointer;border-radius:5px}
.cs-bar:hover{background:rgba(255,255,255,.04)}
.cs-bar:focus-visible{outline:2px solid var(--flash);outline-offset:1px}
.cs-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-bottom:4px}
.cs-bar-name{display:flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;color:var(--bone)}
.cs-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none;
  box-shadow:0 0 8px 0 var(--c)}
.cs-bar-state{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate)}
.cs-bar-state.excessive{color:#E7A69A}
.cs-bar-state.dormant{color:#B8B3D8}
.cs-bar-state.balanced{color:#A9D6B0}
.cs-track{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.07);
  overflow:hidden}
.cs-fill{display:block;height:100%;border-radius:inherit;background:var(--c);
  box-shadow:0 0 9px 0 var(--c);transition:width .5s cubic-bezier(.16,1,.3,1)}

/* the diagnostics, folded away */
.cs-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;
  background:none;border:none;padding:0;color:var(--slate);cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase}
.cs-toggle:hover,.cs-toggle:focus-visible{color:var(--bone)}
.cs-toggle span{font-size:14px;line-height:1}
.cs-secwrap{margin-top:13px}
.cs-card{border-left:2px solid var(--c);padding:0 0 0 12px;margin-bottom:16px}
.cs-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cs-card h4{font-size:16px;font-weight:400;margin:0}
.cs-sk{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-top:4px}
.cs-pill{font-family:var(--mono);font-size:8px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);white-space:nowrap;text-align:right}
.cs-pill.excessive{color:#E7A69A}
.cs-pill.dormant{color:#B8B3D8}
.cs-pill.balanced{color:#A9D6B0}
.cs-diag{font-size:13.5px;line-height:1.5;margin-top:9px}
.cs-quote{margin-top:9px;font-style:italic;font-size:12px;line-height:1.5;
  color:var(--bone);opacity:.85}
.cs-sig{font-family:var(--serif);font-size:9px;line-height:1.55;
  color:var(--slate);margin-top:7px}

.cs-actions .btnrow{margin:0}
.cs-disclaim{font-family:var(--serif);font-size:8.5px;line-height:1.7;
  color:var(--slate);opacity:.75;margin-top:12px}

/* the bottom band */
.cs-fname{font-size:24px;font-weight:400;margin:0 0 12px}
.cs-gunas{display:grid;gap:8px;margin-bottom:12px}
.cs-gline{display:grid;grid-template-columns:52px 1fr 34px;gap:10px;align-items:center}
.cs-gline b{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;color:var(--slate)}
.cs-gtrack{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.07);
  overflow:hidden}
.cs-gtrack span{display:block;height:100%;border-radius:inherit;background:var(--bone)}
.cs-gline small{text-align:right;font-family:var(--serif);
  font-size:9.5px;color:var(--slate)}
.cs-fcopy{font-family:var(--serif);font-size:11px;line-height:1.65;
  color:var(--slate);margin:0 0 12px}
.cs-watch{padding:11px 12px;border:1px solid rgba(67,102,146,.32);border-radius:8px;
  font-size:13.5px;line-height:1.5}
.cs-watch b{display:block;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--flash);font-weight:400;
  margin-bottom:5px}
.cs-law{margin-bottom:14px}
.cs-law:last-child{margin-bottom:0}
.cs-lname{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate)}
.cs-lmax{font-style:italic;font-size:15px;line-height:1.45;margin:5px 0 5px}
.cs-lgloss{font-family:var(--serif);font-size:10.5px;line-height:1.6;
  color:var(--slate)}

/* a centre reopened from the sheet */
#panel.overlay{z-index:46}
.btn.subtlebtn{background:transparent;color:var(--slate);border-color:rgba(67,102,146,.4)}

@media (max-width:1180px){
  .cs-left,.cs-right{width:min(30vw,300px)}
  .cs-name{font-size:26px}
}
@media (max-width:900px){
  #reveal.sheet{overflow-y:auto;pointer-events:auto}
  .cs-left,.cs-right,.cs-bottom{position:static;width:auto;height:auto;max-height:none;
    overflow:visible;margin:0 14px}
  .cs-left{margin-top:74px}
  .cs-bottom{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:40px}
  .cs-panel{background:rgba(8,18,16,.9)}
}


/* =====================================================================
   SHORT WINDOWS

   The only breakpoint here used to be max-width 900px, which never fires
   on a wide short window. Measured at 1440 by 622 the right column was
   showing 357 of the 965 pixels it needed, so 63 percent of it was
   hidden with no affordance saying so, and the left column hid 28
   percent. Below 780 tall the bottom band stops being a band: samkhya
   and the laws move into the right column, the two side columns take the
   full height, and a fade at the bottom edge says there is more.
   ===================================================================== */
@media (max-height: 780px){
  /* wider columns wrap less, which is the cheapest way to cut the scroll
     when the window has no vertical room to give */
  .cs-left,.cs-right{width:min(31vw,372px);top:56px;bottom:26px}
  /* ui.js moves the forecast and the laws into the right column here, so
     the band stops being a band and becomes two more stacked panels */
  .cs-right .cs-bottom{position:static;display:block;height:auto;max-height:none;
    left:auto;right:auto;bottom:auto}
  .cs-right .cs-bottom .cs-panel{margin-bottom:12px;overflow:visible}
  .cs-panel{padding:13px 14px}
  .cs-name{font-size:clamp(22px,2.3vw,30px);margin:8px 0 8px}
  .cs-summary{font-size:13px}
  .cs-fname{font-size:20px;margin-bottom:9px}
  .cs-bars{gap:7px}
}
@media (max-height: 620px){
  .cs-left,.cs-right{width:min(30vw,340px);top:52px;bottom:20px}
  .cs-summary{font-size:12.5px;line-height:1.45}
  .cs-diag{font-size:12.5px}
  .cs-lmax{font-size:13.5px}
}

/* a scrollable column says so: the content fades out at the bottom edge
   instead of just stopping mid sentence */
.cs-left,.cs-right{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.cs-left::-webkit-scrollbar,.cs-right::-webkit-scrollbar{width:5px}
.cs-left::-webkit-scrollbar-thumb,.cs-right::-webkit-scrollbar-thumb{
  background:rgba(67,102,146,.85);border-radius:3px}

/* the reveal sits underneath, so the library needs to be opaque over it */
#library{background:rgba(11,15,14,.975)}

/* the line under the exhale button */
.cs-exhale-note{
  margin-top:8px; font-size:12.5px; line-height:1.45;
  color:color-mix(in srgb, var(--bone) 46%, transparent);
}

/* spec section 5, the research block above the clinical disclaimer */
.cs-about{margin-top:16px}
.cs-about p{font-size:11.5px; line-height:1.6; margin:0 0 8px;
  color:color-mix(in srgb, var(--bone) 62%, transparent)}
.cs-about a{color:var(--chrome); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--chrome) 40%, transparent)}


/* ── the second consent, on the sheet ──────────────────────────────────
   Nothing in here carries its own measure. The column the sheet gives it
   is the measure: min(25vw,330px) on a desktop, the full width on a
   phone. A max-width on a paragraph inside a box that is already narrow
   only makes the text stop short of the border it sits in. */
.sharebox{margin-top:18px; padding:15px 16px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--chrome) 52%, transparent);
  background:color-mix(in srgb, var(--chrome) 10%, transparent)}
.sharebox .btnrow{margin-top:0}
.btn.wide{width:100%; padding:11px 12px; text-align:center; white-space:normal;
  line-height:1.35; letter-spacing:.08em}
.sb-line{font-size:12.5px; line-height:1.6; margin:13px 0 0;
  color:color-mix(in srgb, var(--bone) 70%, transparent)}
.sb-line b{color:var(--bone); font-weight:400}
.sb-done{color:var(--flash)}
.sb-fail{color:var(--flash)}
.sb-rec{font-size:12px; line-height:1.6; margin-top:13px;
  color:color-mix(in srgb, var(--bone) 50%, transparent)}
.inner-panel{margin:16px 0 0; padding:12px 13px; background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-color:color-mix(in srgb, var(--chrome) 26%, transparent)}
.inner-panel .cs-about{margin-top:0}
.secondary{margin-top:20px; padding-top:16px;
  border-top:1px solid color-mix(in srgb, var(--slate) 20%, transparent)}
.secondary .btn{white-space:normal; line-height:1.35; text-align:left}

/* declined at the threshold: no record, no button, so the block is only
   carrying the notice and does not need the emphasis of the ask */
.sharebox.notice-only{border-color:color-mix(in srgb, var(--chrome) 28%, transparent);
  background:transparent}
.sharebox.notice-only .inner-panel{margin-top:0; padding:0; border:none}