/* Steady's styles, out of index.html for the page budget. Linked in the
   head, so Review's Steady card is styled before the page is opened. */
/* ---------------- STEADY ----------------
   The vault pane. Visually quieter than the rest of the bench on purpose:
   nothing here should feel like a scoreboard, because a log of anxiety that
   rewards you for filling it in is a log you will fill in instead of living. */
.v-lock{display:flex;justify-content:center;padding:40px 0 110px}
.v-lock .card h2{text-align:left}
.v-lock .card .sub{text-align:left;margin-bottom:22px}
.v-lock .note{text-align:left}
.v-strength{font-size:11.5px;color:var(--dim);margin:-12px 0 16px;min-height:16px}
.v-strength.weak{color:var(--warn)}
.v-strength.ok{color:var(--gold)}
.v-strength.good{color:var(--ok)}

.v-split{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start;padding-bottom:110px}
.v-list{display:flex;flex-direction:column;gap:10px;min-width:0}

.v-new{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:18px 20px}
.v-new h3{font-family:'Lexend';font-weight:400;font-size:16px;letter-spacing:.02em;margin-bottom:4px}
.v-new .vsub{font-size:12px;color:var(--dim);line-height:1.6;margin-bottom:16px}
.v-field{margin-bottom:15px}
.v-field label{display:block;font-family:'Lexend';font-size:15px;color:var(--gold);margin-bottom:7px}
.v-field .vhint{font-size:11.5px;color:var(--dim);line-height:1.55;margin-bottom:7px}
.v-field textarea{
  width:100%;min-height:62px;resize:vertical;padding:10px 12px;border:1px solid var(--line-soft);
  border-radius:9px;background:var(--well);color:var(--white);font-family:'Lexend';font-size:13.5px;line-height:1.6
}
.v-field textarea:focus{outline:none;border-color:var(--gold)}
.v-scale{display:flex;align-items:center;gap:12px}
.v-scale input[type=range]{flex:1;accent-color:var(--gold);background:none}
.v-scale output{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--gold-hi);min-width:44px;text-align:right}
.v-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.v-item{border:1px solid var(--line-soft);border-radius:11px;background:var(--panel);padding:15px 17px}
.v-item.closed{border-color:rgba(150,190,150,.22)}
.v-item .vtop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.v-item time{font-size:11px;color:var(--dim)}
.v-item .vtrigger{font-size:14.5px;line-height:1.55;color:var(--white);white-space:pre-wrap;overflow-wrap:anywhere}
.v-line{font-size:13px;line-height:1.65;color:var(--grey);margin-top:9px;white-space:pre-wrap;overflow-wrap:anywhere}
.v-line b{color:var(--white);font-weight:500}
.v-line .k{font-family:'Lexend';font-size:15px;color:var(--gold);display:block;margin-bottom:3px}
.v-gap{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ok);margin-top:10px}
.v-gap.up{color:var(--warn)}
.v-brake{
  border-left:2px solid var(--warn);background:rgba(228,160,160,.07);border-radius:0 8px 8px 0;
  padding:8px 13px;margin-top:11px;font-size:12.5px;line-height:1.6;color:var(--grey)
}
.v-reply{
  border-left:2px solid var(--gold);background:rgba(var(--gold-rgb),.06);border-radius:0 8px 8px 0;
  padding:10px 14px;margin-top:12px;font-size:13px;line-height:1.7;color:var(--grey);
  white-space:pre-wrap;overflow-wrap:anywhere
}
.v-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.v-empty{font-size:13px;line-height:1.7;color:var(--dim);padding:26px 2px}

/* Words rather than a slider. A 0-10 scale asks you to calibrate against
   yourself on the worst day you have had, which is a different ruler every
   time and one more decision when you have none spare. Four named states you
   can recognise take one tap and mean the same thing in March as in October. */
.v-pick{display:grid;gap:8px}
.v-pick.tight{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.v-opt{
  text-align:left;background:var(--well);border:1px solid var(--line-soft);border-radius:10px;
  padding:11px 13px;color:var(--grey);cursor:pointer;font:inherit;display:block;width:100%
}
.v-opt:hover{border-color:var(--line)}
.v-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.v-opt b{display:block;font-family:'Lexend';font-weight:400;font-size:14px;color:var(--white);letter-spacing:.01em}
.v-opt span{display:block;font-size:11.5px;line-height:1.55;color:var(--dim);margin-top:3px}
.v-opt.on{border-color:var(--gold);background:rgba(var(--gold-rgb),.09)}
.v-opt.on b{color:var(--gold-hi)}

.v-kind{font-family:'Lexend';font-size:15px;color:var(--dim)}
.v-grip{font-size:12px;color:var(--grey)}

/* The tally. Three outcomes, counted, with the bar drawn from the counts
   rather than from anything anybody scored. */
.v-tally{display:flex;height:7px;border-radius:4px;overflow:hidden;margin:4px 0 14px;background:var(--well)}
.v-tally i{display:block}
.v-tally i.better{background:var(--ok)}
.v-tally i.same{background:var(--gold)}
.v-tally i.worse{background:var(--warn)}
.v-key{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--grey);padding:5px 0}
.v-key s{width:9px;height:9px;border-radius:3px;flex:none;text-decoration:none}
.v-key s.better{background:var(--ok)}
.v-key s.same{background:var(--gold)}
.v-key s.worse{background:var(--warn)}
.v-key b{margin-left:auto;font-family:ui-monospace,Menlo,monospace;color:var(--gold-hi);font-weight:400}

/* Groundwork. The validated instrument and the questions written for this
   page get visibly different blocks, because only one of them has earned the
   authority and blurring them would lend it to both. */
.g-block{border:1px solid var(--line-soft);border-radius:13px;background:var(--panel);padding:18px 20px;margin-bottom:10px}
.g-block h4{font-family:'Lexend';font-weight:400;font-size:15px;letter-spacing:.02em;color:var(--gold-hi);margin-bottom:5px}
.g-stem{font-size:13px;line-height:1.6;color:var(--white);margin:14px 0 4px}
.g-row{padding:13px 0;border-top:1px solid var(--line-soft)}
.g-row:first-of-type{border-top:none}
.g-item{font-size:13.5px;line-height:1.6;color:var(--white);margin-bottom:8px}
.g-row .vhint{margin-bottom:9px}
.g-row textarea{
  width:100%;min-height:64px;resize:vertical;padding:10px 12px;border:1px solid var(--line-soft);
  border-radius:9px;background:var(--well);color:var(--white);font-family:'Lexend';font-size:13.5px;line-height:1.6
}
.g-row textarea:focus{outline:none;border-color:var(--gold)}
.g-score{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:13px;line-height:1.7;color:var(--grey)
}
.g-score.high{color:var(--gold-hi)}

.v-steps{margin-top:11px;display:flex;flex-direction:column;gap:6px}
.v-step{font-size:12.5px;line-height:1.6;color:var(--grey);padding-left:15px;position:relative;overflow-wrap:anywhere}
.v-step::before{content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--ok)}
.v-step time{color:var(--dim);font-size:11px;margin-left:6px}

.v-stat{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--grey)}
.v-stat:last-child{border-bottom:none}
.v-stat b{font-family:ui-monospace,Menlo,monospace;color:var(--gold-hi);font-weight:400}
.v-verdict{font-size:12.5px;line-height:1.7;color:var(--grey);margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}

@media (max-width:1040px){.v-split{grid-template-columns:1fr}}