/* ------------------------------------------------------------------
   report.css - the safe space report form, on its own page.

   It began as a dialog and that was wrong: on a laptop it grew its own
   scrollbar inside the page's, and on a phone it was one long column
   that had to be scrolled blind. As a page it can use the width it has.

   Desktop lays the three parts out at once, the tall "what happened"
   box beside the short fields, so the whole form fits a screen.
   Phones get the same three parts one at a time, because a form that
   asks eleven questions in one scroll is a form people abandon.
   ------------------------------------------------------------------ */

/* a utility page, not a marketing one: the header stays a header and gives
   the form the screen */
.rs-hero { position: relative; padding: 104px 0 22px; overflow: hidden; }
.rs-hero .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .4; z-index: 0; }
.rs-hero .orb.a { width: 400px; height: 400px; background: var(--blue); top: -140px; left: -90px; }
.rs-hero .orb.b { width: 340px; height: 340px; background: var(--crimson); bottom: -170px; right: -60px; }
.rs-hero .inner { position: relative; z-index: 2; max-width: 66ch; }
.rs-hero .k { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-2); margin-bottom: 10px; }
.rs-hero h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 300; letter-spacing: -.03em; }
.rs-hero h1 em { font-style: italic; }
.rs-hero p { margin-top: 12px; color: var(--silver-70); font-size: 15.5px; line-height: 1.55; max-width: 62ch; }

/* ---------- the line that has to be read before anything else ---------- */
.rs-urgent-band { border-top: 1px solid rgba(244,63,107,.22); border-bottom: 1px solid rgba(244,63,107,.22); background: rgba(225,29,72,.10); }
.rs-urgent { display: flex; gap: 13px; align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.ru-i { width: 22px; height: 22px; color: var(--crimson-2); flex: none; margin-top: 1px; }
.ru-i svg { width: 100%; height: 100%; }
.rs-urgent p { color: var(--silver); font-size: 14.6px; line-height: 1.6; }
.rs-urgent b { color: #fff; }
.rs-urgent a { color: var(--crimson-2); font-weight: 600; border-bottom: 1px solid rgba(244,63,107,.5); }

.rs-sec { padding: 30px 0 80px; }
.rs-wrap { max-width: 1060px; }

/* ---------- step bar, phones only ---------- */
.rs-bar { display: none; list-style: none; gap: 8px; margin-bottom: 22px; }
.rs-bar li {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--silver-45);
  border-top: 2px solid var(--hair); padding-top: 10px; transition: color .3s, border-color .3s;
}
.rs-bar li span {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--hair); font-size: 11px; letter-spacing: 0; flex: none;
}
.rs-bar li.on { color: var(--silver); border-top-color: var(--crimson-2); }
.rs-bar li.on span { border-color: transparent; color: #fff; background: linear-gradient(100deg, var(--blue), var(--crimson)); }
.rs-bar li.was { color: var(--silver-70); border-top-color: var(--blue-2); }

/* ---------- layout ----------
   The tall box sits beside the short fields rather than under them, so
   nothing needs scrolling on a normal laptop screen. */
.rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; align-items: start; }
.rs-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; align-content: start; }
.rs-step[data-step="1"] { grid-column: 1; grid-row: 1; }
.rs-step[data-step="3"] { grid-column: 1; grid-row: 2; }
.rs-step[data-step="2"] { grid-column: 2; grid-row: 1 / span 2; }
.rs-tall { display: flex; flex-direction: column; }
/* The box grows with what is written in it, so it never gets a scrollbar of
   its own. Somebody halfway through describing what happened should be able
   to see all of it at once, not two lines through a slot. */
.rs-grow textarea {
  min-height: 250px; height: auto; overflow: hidden; resize: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.rs-legend {
  font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--silver);
  padding: 0; margin-bottom: 2px;
}

.rs-field { display: grid; gap: 8px; position: relative; }
.rs-k { font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--silver-45); }
.rs-k i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--silver-18); margin-left: 7px; font-size: 12px; }
.rs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rs-field input, .rs-field select, .rs-field textarea {
  background: rgba(234,240,255,.05); border: 1px solid var(--hair); border-radius: 13px;
  padding: 13px 15px; color: var(--silver); font-family: var(--sans); font-size: 15.5px; line-height: 1.55;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.rs-field textarea { resize: vertical; }
.rs-field input::placeholder, .rs-field textarea::placeholder { color: var(--silver-45); }
.rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus {
  outline: none; border-color: var(--blue-2); background: rgba(46,75,224,.08); box-shadow: 0 0 0 3px rgba(46,75,224,.12);
}
.rs-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EAF0FF' stroke-width='1.5' fill='none' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.rs-field input:-webkit-autofill, .rs-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--silver); -webkit-box-shadow: 0 0 0 1000px #141a44 inset;
  box-shadow: 0 0 0 1000px #141a44 inset; caret-color: var(--silver);
  transition: background-color 9999s ease-in-out 0s;
}
.rs-count { position: absolute; right: 2px; bottom: -18px; font-size: 11px; color: var(--silver-45); }
.rs-grow { margin-bottom: 8px; }

.rs-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-chip {
  border: 1px solid var(--hair); background: rgba(234,240,255,.03); color: var(--silver-70);
  border-radius: 100px; padding: 10px 16px; font-family: var(--sans); font-size: 13.6px;
  cursor: pointer; transition: .22s var(--ease);
}
.rs-chip:hover { border-color: var(--blue-2); color: var(--silver); }
.rs-chip.sel {
  border-color: transparent; color: #fff;
  background: linear-gradient(100deg, var(--blue), var(--crimson));
  box-shadow: 0 6px 20px -8px rgba(46,75,224,.7);
}
.rs-hint { color: var(--silver-45); font-size: 13px; line-height: 1.55; }

.rs-anon { padding: 16px 18px; border: 1px solid var(--hair); border-radius: 14px; background: rgba(234,240,255,.03); }
.rs-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.rs-check input { margin-top: 3px; accent-color: var(--blue-2); width: 17px; height: 17px; flex: none; }
.rs-check span { color: var(--silver-70); font-size: 13.8px; line-height: 1.6; }
.rs-check b { color: var(--silver); }
#rsWho.off { opacity: .35; pointer-events: none; }

.rs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rs-warn { color: var(--crimson-2); font-size: 13.8px; line-height: 1.5; min-height: 18px; margin: 16px 0 4px; }
/* .cta sets display:inline-flex, which beats the browser's own
   [hidden] { display:none }. Without this the send button stayed on screen
   through every step of the wizard and pushed the row off the side. */
.rs-actions [hidden] { display: none !important; }
.rs-actions { display: flex; gap: 12px; align-items: center; }
.rs-actions .cta { flex: 1; justify-content: center; padding: 16px; font-size: 15.5px; }
.rs-actions .ghost { padding: 15px 26px; }
.rs-actions .cta[disabled] { opacity: .45; pointer-events: none; filter: grayscale(.35); }
.rs-fine { margin-top: 14px; color: var(--silver-45); font-size: 12.5px; line-height: 1.6; text-align: center; }
.rs-fine a { color: var(--blue-2); }

.rs-done { text-align: center; padding: 40px 0 20px; }
.rs-tick {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(100deg, var(--blue), var(--crimson)); box-shadow: 0 12px 30px -12px rgba(46,75,224,.8);
}
.rs-tick svg { width: 26px; height: 26px; }
.rs-done h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); }
.rs-done h2 em { font-style: italic; }
.rs-done > p { margin: 12px auto 0; color: var(--silver-70); font-size: 16px; line-height: 1.6; max-width: 46ch; }
.rs-done .ghost { margin-top: 24px; display: inline-block; }

/* ---------- one column, one step at a time ---------- */
@media (max-width: 860px) {
  .rs-hero { padding: 106px 0 26px; }
  .rs-hero p { font-size: 15.5px; }
  .rs-sec { padding: 30px 0 70px; }
  .rs-grid { grid-template-columns: 1fr; gap: 20px; }
  .rs-step[data-step="1"], .rs-step[data-step="2"], .rs-step[data-step="3"] { grid-column: 1; grid-row: auto; }
  .rs-row { grid-template-columns: 1fr; gap: 16px; }
  .rs-grow textarea { min-height: 220px; }
  /* the step machine, switched on by the script */
  .rs-wizard .rs-bar { display: flex; }
  .rs-wizard .rs-step { display: none; }
  .rs-wizard .rs-step.on { display: grid; }
  .rs-wizard .rs-step.on.rs-tall { display: flex; }
  .rs-actions .ghost { padding: 15px 22px; }
  /* 16px keeps iOS from zooming the page when a field takes focus */
  .rs-field input, .rs-field select, .rs-field textarea { font-size: 16px; }
}
@media (max-width: 420px) {
  .rs-bar li { font-size: 10px; letter-spacing: .08em; gap: 6px; }
  .rs-bar li span { width: 18px; height: 18px; font-size: 10px; }
}