/* ========================================================================
   Vertex Medic: account review (the request that follows the homepage close).
   A page layer over vertex.css. Every selector is prefixed rv- so nothing
   here can collide with the homepage. Same tokens, same notation, same
   breakpoints: 760 for the measure, 1024 and 1280 for the two-column desk.
   ======================================================================== */

/* -- page ---------------------------------------------------------------- */
.rv-main { padding-bottom: 8px; }
.rv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* on a phone the side blocks take their place in the single column */
.rv-side { display: contents; }
.rv-head { order: 1; }
.rv-record { order: 2; }
.rv-boundary--lead, .rv-side > .rv-boundary { order: 3; }
.rv-form, .rv-received { order: 4; }
.rv-next { order: 5; }

/* -- head ---------------------------------------------------------------- */
.rv-head { padding: 14px var(--vx-gut) 0; }
.rv-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--vx-tap);
  font-family: var(--vx-mono);
  font-size: var(--vx-t-label);
  letter-spacing: var(--vx-track-label);
  text-transform: uppercase;
  color: var(--vx-ink-3);
  text-decoration: none;
}
.rv-back:hover { color: var(--vx-ink); }
.rv-head .vx-eyebrow { margin-top: 6px; }
.rv-title { font-size: 36px; margin-top: 8px; }
.rv-lede { max-width: 40ch; }

/* -- the request record --------------------------------------------------- */
.rv-record {
  margin: 24px var(--vx-gut) 0;
  border: 1px solid var(--vx-ink);
  background: var(--vx-paper-raised);
  scroll-margin-top: calc(var(--vx-chrome) + 10px);
}
.rv-record__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--vx-ink);
}
.rv-record__title {
  margin: 0;
  font-family: var(--vx-mono);
  font-weight: 400;
  font-size: var(--vx-t-label-lg);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vx-ink);
}
.rv-record__state { color: var(--vx-open); margin-left: 6px; }
.rv-record__state::before { content: "· "; color: var(--vx-ink-3); }
.is-received .rv-record__state { color: var(--vx-ink); }
.rv-record__left {
  margin: 0;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-nano);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vx-ink-3);
  text-align: right;
  white-space: nowrap;
}
.rv-lines { list-style: none; margin: 0; padding: 0; }
.rv-line + .rv-line { border-top: 1px solid var(--vx-rule); }
.rv-line__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "k m" "v v";
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  width: 100%;
  min-height: var(--vx-tap);
  padding: 8px 14px 9px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}
.rv-line__btn:not(:disabled) { cursor: pointer; }
.rv-line__btn:not(:disabled):hover .rv-line__v { text-decoration: underline; text-decoration-color: var(--vx-rule-strong); text-underline-offset: 3px; }
.rv-line__k {
  grid-area: k;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-label);
  letter-spacing: var(--vx-track-label);
  text-transform: uppercase;
  color: var(--vx-ink-3);
}
.rv-line__v {
  grid-area: v;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-sm);
  line-height: 1.4;
  color: var(--vx-ink-3);
  overflow-wrap: anywhere;
}
.rv-line:not(.is-recorded) .rv-line__v { font-style: italic; }
.rv-line.is-recorded .rv-line__v { color: var(--vx-ink); }
.rv-line__m { grid-area: m; display: flex; justify-content: flex-end; min-width: 0; }
.rv-line__m:empty::before { content: ""; width: 6px; height: 6px; box-shadow: inset 0 0 0 1px var(--vx-rule-strong); }
.rv-line [aria-current] .rv-line__k { color: var(--vx-open); }
.rv-line [aria-current] { box-shadow: inset 2px 0 0 var(--vx-open); }
.rv-mark--received { color: var(--vx-ink); }

/* -- the data boundary ------------------------------------------------------ */
.rv-boundary {
  margin: 18px var(--vx-gut) 0;
  padding: 11px 14px 11px 14px;
  border-left: 2px solid var(--vx-stop);
  background: var(--vx-paper);
}
.rv-boundary p {
  margin: 0;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-mono);
  line-height: 1.7;
  color: var(--vx-ink-2);
}
.rv-boundary b {
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vx-stop);
}
.rv-boundary--inline { margin: 26px 0 0; }
@media (max-width: 1023px) {
  .vx-js body:not([data-stage="clinic"]) .rv-side > .rv-boundary, .vx-js .is-received .rv-side > .rv-boundary { display: none; }
}

/* -- what happens next (compact, under the form on a phone) --------------- */
.is-received .rv-next { display: none; }   /* the received state carries the full steps */
.rv-next { margin: 36px var(--vx-gut) 0; padding-top: 16px; border-top: 1px solid var(--vx-rule-strong); }
.rv-k {
  margin: 0;
  font-family: var(--vx-mono);
  font-weight: 400;
  font-size: var(--vx-t-label);
  letter-spacing: var(--vx-track-label);
  text-transform: uppercase;
  color: var(--vx-ink-3);
}
.rv-next__list, .rv-steps { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: rv; }
.rv-next__list li, .rv-steps li {
  counter-increment: rv;
  display: block;
  position: relative;
  padding: 9px 0 9px 32px;
  border-bottom: 1px solid var(--vx-rule);
  font-size: var(--vx-t-base);
  line-height: 1.5;
  color: var(--vx-ink-2);
}
.rv-next__list li::before, .rv-steps li::before {
  content: counter(rv);
  position: absolute;
  left: 0;
  top: 11px;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-label-lg);
  color: var(--vx-ink-3);
}
.rv-steps li::before { top: 13px; }
.rv-steps li { font-size: var(--vx-t-body); padding: 11px 0 11px 32px; }
.rv-steps b { font-weight: 500; color: var(--vx-ink); }

/* -- the form: three lines shown one at a time ---------------------------- */
.rv-form { margin-top: 28px; min-width: 0; }
.rv-stage { border: 0; padding: 0 var(--vx-gut); margin: 0; min-width: 0; }
.rv-stage + .rv-stage { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--vx-rule-strong); }
.vx-js .rv-stage + .rv-stage { margin-top: 0; padding-top: 0; border-top: 0; }
.vx-js .rv-stage[hidden], .rv-received[hidden], .vx-js .rv-form[hidden] { display: none; }
.rv-stage__k {
  margin: 0;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-label);
  letter-spacing: var(--vx-track-label);
  text-transform: uppercase;
  color: var(--vx-ink-3);
}
.rv-stage__title {
  margin: 8px 0 0;
  font-family: var(--vx-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--vx-ink);
  text-wrap: balance;
}
.rv-stage__title:focus, .rv-received__title:focus { outline: none; }
.rv-stage__lede { margin: 10px 0 0; font-size: var(--vx-t-body); line-height: 1.5; color: var(--vx-ink-2); max-width: 38ch; }

.rv-field { margin-top: 22px; }
.rv-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  font-size: var(--vx-t-body);
  font-weight: 500;
  color: var(--vx-ink);
}
legend.rv-label { float: left; width: 100%; }
.rv-opt {
  font-family: var(--vx-mono);
  font-weight: 400;
  font-size: var(--vx-t-nano);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vx-ink-3);
}
.rv-input {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--vx-ink-2);
  border-radius: 0;
  background: var(--vx-paper);
  color: var(--vx-ink);
  font: 400 16px/1.3 var(--vx-sans);
  appearance: none;
  -webkit-appearance: none;
}
.rv-input--mono { font-family: var(--vx-mono); font-size: 15px; }
.rv-input:focus, .rv-input:focus-visible { outline: none; border-color: var(--vx-ink); box-shadow: inset 0 0 0 1px var(--vx-ink); }
.rv-input[aria-invalid="true"], .rv-input[aria-invalid="true"]:focus { border-color: var(--vx-open); box-shadow: inset 0 0 0 1px var(--vx-open); }
.rv-input::placeholder { color: var(--vx-ink-3); }
.rv-select-wrap { position: relative; }
.rv-select { padding-right: 40px; }
.rv-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px; top: calc(50% + 4px);
  width: 8px; height: 8px;
  border-right: 1.3px solid var(--vx-ink); border-bottom: 1.3px solid var(--vx-ink);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.rv-hint {
  margin: 8px 0 0;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-mono);
  line-height: 1.65;
  color: var(--vx-ink-3);
}
.rv-error {
  display: none;
  margin: 8px 0 0;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-mono);
  line-height: 1.65;
  color: var(--vx-open);
}
.rv-error.is-on { display: flex; gap: 8px; align-items: flex-start; }
.rv-error.is-on::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 6px; box-shadow: inset 0 0 0 1.5px currentColor; }

/* the bands: ledger cells, a mark that fills when chosen */
.rv-group { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.rv-bands {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 10px;
  padding: 1px;
  background: var(--vx-rule);
}
.rv-bands[aria-invalid="true"] { background: var(--vx-open); }
.rv-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--vx-paper);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rv-band--wide { grid-column: 1 / -1; }
.rv-band input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}
.rv-band__mark { flex: 0 0 auto; width: 10px; height: 10px; box-shadow: inset 0 0 0 1.5px var(--vx-ink-2); transition: background var(--vx-dur-fast) var(--vx-ease); }
.rv-band__t { font-size: var(--vx-t-body); line-height: 1.3; color: var(--vx-ink-2); }
.rv-band input:checked ~ .rv-band__mark { background: var(--vx-ink); box-shadow: inset 0 0 0 1.5px var(--vx-ink); }
.rv-band input:checked ~ .rv-band__t { color: var(--vx-ink); font-weight: 500; }
.rv-band:has(input:checked) { background: var(--vx-paper-raised); box-shadow: inset 0 0 0 1px var(--vx-ink); z-index: 1; }
.rv-band input:focus-visible ~ .rv-band__mark { outline: var(--vx-focus-width) solid var(--vx-focus-color); outline-offset: 4px; }
.rv-band:has(input:focus-visible) { outline: var(--vx-focus-width) solid var(--vx-focus-color); outline-offset: -2px; z-index: 2; }
.rv-band:has(input:focus-visible) input:focus-visible ~ .rv-band__mark { outline: none; }

/* -- actions -------------------------------------------------------------- */
.rv-actions { margin-top: 28px; }
.rv-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--vx-ink);
  background: var(--vx-ink);
  color: var(--vx-paper);
  font-family: var(--vx-mono);
  font-size: var(--vx-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.rv-btn svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform var(--vx-dur-fast) var(--vx-ease); }
.rv-btn:hover svg { transform: translateX(3px); }
.rv-btn:focus-visible { outline: var(--vx-focus-width) solid var(--vx-focus-color); outline-offset: 3px; }
.rv-actions__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.rv-back-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--vx-tap);
  padding: 0 2px;
  border: 0;
  background: none;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-label-lg);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vx-ink-2);
  cursor: pointer;
}
.rv-back-btn:hover { color: var(--vx-ink); text-decoration: underline; text-underline-offset: 4px; }
.rv-keep {
  margin: 10px 0 0;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-nano);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vx-ink-3);
  line-height: 1.6;
}
.rv-actions__row .rv-keep { margin: 0; text-align: right; }
.rv-fine { margin: 18px 0 0; font-size: var(--vx-t-sm); line-height: 1.55; color: var(--vx-ink-3); max-width: 44ch; }
/* Without the runtime the three lines are shown together and the form posts
   natively, so the send button stays: only the script-driven navigation goes. */
.rv-nojs { margin: 12px 0 0; font-family: var(--vx-mono); font-size: var(--vx-t-mono); line-height: 1.65; color: var(--vx-ink-2); }
.vx-js .rv-nojs { display: none; }
html:not(.vx-js) .rv-back-btn, html:not(.vx-js) .rv-keep { display: none; }

/* The honeypot: reachable by a script, not by a person or a screen reader.
   Clipped rather than pushed off-screen, so it can never widen the page. */
.rv-trap {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the send button while the request is in flight */
.rv-btn[aria-busy="true"] { cursor: progress; background: var(--vx-ink-2); border-color: var(--vx-ink-2); }
.rv-btn[aria-busy="true"] svg { opacity: .45; }
.rv-btn[disabled] { cursor: default; }

/* a request the server could not accept. Same voice as the boundary note,
   marked open rather than stop: it is a thing to retry, not a thing refused. */
.rv-alert {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-left: 2px solid var(--vx-open);
  background: var(--vx-open-bg);
  font-family: var(--vx-mono);
  font-size: var(--vx-t-mono);
  line-height: 1.65;
  color: var(--vx-ink);
}
.rv-alert b { font-weight: 400; text-transform: uppercase; letter-spacing: var(--vx-track-label); }

.rv-privacy { color: var(--vx-ink); text-decoration: underline; text-underline-offset: 3px; }
.rv-privacy:hover { color: var(--vx-open); }

/* -- the account state after the request -------------------------------- */
.rv-received { padding: 0 var(--vx-gut); min-width: 0; margin-top: 30px; }
.rv-received__title { font-size: 32px; }
.rv-meta {
  margin: 22px 0 0;
  border-top: 1px solid var(--vx-ink);
  border-bottom: 1px solid var(--vx-rule-strong);
}
.rv-meta > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 10px 0;
}
.rv-meta > div + div { border-top: 1px solid var(--vx-rule); }
.rv-meta dt {
  font-family: var(--vx-mono);
  font-size: var(--vx-t-label);
  letter-spacing: var(--vx-track-label);
  text-transform: uppercase;
  color: var(--vx-ink-3);
}
.rv-meta dd { margin: 0; font-family: var(--vx-mono); font-size: var(--vx-t-base); color: var(--vx-ink); overflow-wrap: anywhere; }
.rv-block { margin-top: 30px; }
.rv-list { list-style: none; margin: 8px 0 0; padding: 0; }
.rv-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--vx-rule);
  font-size: var(--vx-t-body);
  line-height: 1.5;
  color: var(--vx-ink-2);
}
.rv-list .vx-mark { flex: 0 0 auto; margin-top: 3px; }
.rv-received .rv-boundary { margin: 28px 0 0; }
.rv-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--vx-rule-strong); }
.rv-links a, .rv-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--vx-tap);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--vx-mono);
  font-size: var(--vx-t-label-lg);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vx-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--vx-rule-strong);
  cursor: pointer;
}
.rv-links a:hover, .rv-link-btn:hover { text-decoration-color: var(--vx-ink); }

/* -- motion, only where it is welcome ------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .vx-js .rv-stage:not([hidden]), .rv-received:not([hidden]) { animation: rv-in .28s var(--vx-ease) both; }
  @keyframes rv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .rv-line.is-recorded .rv-line__v { animation: rv-ink .5s var(--vx-ease) both; }
  @keyframes rv-ink { from { color: var(--vx-open); } to { color: var(--vx-ink); } }
}

/* -- 320 ------------------------------------------------------------------- */
@media (max-width: 340px) {
  .rv-title { font-size: 31px; }
  .rv-line__btn { padding: 8px 12px 9px; }
  .rv-bands { grid-template-columns: minmax(0, 1fr); }
  .rv-record__left { display: none; }
  .rv-meta > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* -- tablet: the measure ----------------------------------------------------- */
@media (min-width: 760px) {
  .rv-head, .rv-record, .rv-boundary, .rv-next, .rv-form, .rv-received { margin-left: auto; margin-right: auto; max-width: 720px; }
  .rv-form, .rv-received { width: 100%; }
}

/* -- desk: the record and the boundary stay put while the lines are written -- */
@media (min-width: 1024px) {
  .rv-layout {
    grid-template-columns: 380px minmax(0, 560px);
    column-gap: 72px;
    padding: 0 var(--vx-inset);
    justify-content: start;
  }
  .rv-head { grid-column: 1 / -1; order: 0; padding: 28px 0 0; max-width: none; margin: 0; }
  .rv-back { display: none; }
  .rv-title { font-size: 44px; }
  .rv-side {
    display: block;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: calc(var(--vx-chrome) + 24px);
    margin-top: 34px;
  }
  .rv-record, .rv-boundary, .rv-next { margin-left: 0; margin-right: 0; max-width: none; }
  .rv-record { margin-top: 0; }
  .rv-side > .rv-boundary { margin-top: 16px; }
  .rv-next { margin-top: 26px; padding-top: 14px; }
  .rv-form, .rv-received { grid-column: 2; grid-row: 2; margin: 34px 0 0; max-width: none; }
  .rv-stage, .rv-received { padding: 0; }
  .rv-stage__title { font-size: 28px; }
  .rv-received__title { font-size: 36px; }
  .rv-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-meta > div { display: block; padding: 12px 16px 12px 0; }
  .rv-meta > div + div { border-top: 0; border-left: 1px solid var(--vx-rule); padding-left: 16px; }
  .rv-meta dd { margin-top: 6px; }
  .rv-next__list li { font-size: var(--vx-t-sm); }
}
@media (min-width: 1280px) {
  .rv-layout { grid-template-columns: 400px minmax(0, 600px); column-gap: 96px; }
}

/* a note about something not yet settled, rather than a boundary being held */
.rv-boundary--pending { border-left-color: var(--vx-ink-3); }