/* Reset Password, O5.
 *
 * Ported from claude/designs/"Old Reset Password.css" + reset-password.png.
 *
 * NAMESPACE AUDITED against bootstrap.min.css, which master loads on every
 * page and cannot be removed: none of rp-*, is-*, .n, .b collide with a
 * single-class Bootstrap selector. .n and .b are the design's own names and
 * are generic enough to be worth watching -- both are kept DESCENDANT-SCOPED
 * (.rp-steps .n, .rp-rules .b) so neither becomes a global rule of ours
 * either.
 *
 * sid-field, sid-pwd and .eye are NOT redefined here. They are the sign-in
 * drawer's field and eye-toggle in oh-overrides.css, which this page already
 * loads -- so the reset fields are the same control as the sign-in fields,
 * rather than a second one that drifts.
 */

.rp-wrap { padding: 64px 24px; background: var(--o5-surface-2, #f7f5f0); }

.rp-shell {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: #fff;
  border: 1px solid var(--o5-line, #e7e5e0);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .25);
}
/* The expired/invalid card has no tracker, so its panels are shorter and the
   red side would otherwise stretch to a form that is not there. */
.rp-shell.is-dead { max-width: 820px; }

.rp-side {
  background: linear-gradient(160deg, #e11d2e, #b3121f);
  color: #fff; padding: 44px 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.rp-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.rp-side h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.rp-side > p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.55; }

.rp-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.rp-steps li { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.rp-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px;
  width: 2px; background: rgba(255, 255, 255, .3);
}
.rp-steps li.is-done:not(:last-child)::after { background: #fff; }
.rp-steps .n {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; background: transparent;
}
.rp-steps li.is-done .n { background: #fff; border-color: #fff; color: #d62133; }
.rp-steps li.is-cur .n { border-color: #141414; color: #fff; background: #141414; }
.rp-steps b { display: block; font-size: 14px; font-weight: 700; margin-top: 5px; }
.rp-steps small { display: block; font-size: 12px; color: rgba(255, 255, 255, .8); margin-top: 2px; }
.rp-steps li:not(.is-done):not(.is-cur) b { color: rgba(255, 255, 255, .85); }

.rp-note {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .18);
  font-size: 12.5px; color: #fff;
}
.rp-note svg { flex: none; color: #fff; }

.rp-main { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.rp-main h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--o5-ink, #111); }
.rp-lede { margin: 6px 0 24px; font-size: 13.5px; color: var(--o5-ink2, #555); }
.rp-lbl {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--o5-ink2, #555); margin: 0 0 8px;
}

/* The server's answer, in the card. The old page put a system error in a
   sweetalert over the top of everything; an expired token arriving at POST
   time belongs next to the button that sent it. */
.rp-alert {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 12px;
  background: #fdecee; border: 1px solid #f5c2c7; color: #a4121f;
  font-size: 13px; font-weight: 600;
}

.rp-meter { display: flex; align-items: center; gap: 6px; margin: 12px 0; }
.rp-meter i { flex: 1; height: 5px; border-radius: 99px; background: var(--o5-line, #e7e5e0); transition: background .2s; }
.rp-meter span { flex: none; width: 64px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--o5-ink3, #999); }
.rp-meter[data-s="1"] i:nth-child(-n+1) { background: #d62133; }
.rp-meter[data-s="2"] i:nth-child(-n+2) { background: #ea580c; }
.rp-meter[data-s="3"] i:nth-child(-n+3) { background: #ca8a04; }
.rp-meter[data-s="4"] i { background: #1f8a5b; }

.rp-rules { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-rules li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 6px; border-radius: 99px;
  background: var(--o5-surface-2, #f5f4f1);
  font-size: 12px; font-weight: 600; color: var(--o5-ink3, #888);
  transition: background .15s, color .15s;
}
.rp-rules li .b {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--o5-line, #ddd);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; background: #fff;
}
.rp-rules li.is-ok { background: #e9f4ee; color: #1f8a5b; }
.rp-rules li.is-ok .b { background: #1f8a5b; border-color: #1f8a5b; color: #fff; }

.rp-match { font-size: 12.5px; font-weight: 600; min-height: 18px; margin: 8px 0 14px; }
.rp-match.is-ok { color: #1f8a5b; }
.rp-match.is-bad { color: #d62133; }

/*
 * THE PAGE'S PRIMARY ACTION, STYLED HERE BECAUSE NOTHING ELSE DOES.
 *
 * Every CTA on this page carries `class="rg-submit lo1-submit rp-save"` --
 * and `.rg-submit` lives in register-o5.css, `.lo1-submit` in login-o5.css,
 * and this page loads NEITHER. It loads oh-overrides.css and this file. So
 * the classes resolved to nothing and the controls fell back to the browser's
 * own chrome: the live Save button rendered as a grey system rectangle in the
 * system font, and the dead card's "Send a new link" anchor rendered as plain
 * black text with no button around it at all.
 *
 * Found by screenshotting the card while building the resend (2026-10-10),
 * not by anybody reporting it -- it is the shape of fault that survives
 * because each person assumes the other two stylesheets are loaded.
 *
 * Styled on .rp-save, which is this page's own class, rather than by adding
 * the other two sheets: pulling in register-o5.css for one rule would bring
 * every register rule with it, onto a page whose markup it was never written
 * for. The values match register-o5.css's .rg-submit so the three screens
 * still agree.
 *
 * SCOPED TO .rp-shell FOR ONE POINT OF SPECIFICITY, and that is not tidiness.
 * option5.css carries `.o5 a { color: inherit }` -- 0,1,1 against a bare
 * `.rp-save`'s 0,1,0 -- so on the ANCHOR the white lost and the label
 * inherited the card's near-black ink: dark text on the red pill, measured at
 * rgb(26,26,26) on rgb(214,33,51). The <button> was unaffected, which is
 * exactly the sort of difference that ships. `.rp-shell .rp-save` is 0,2,0 and
 * wins cleanly. (bootstrap.min.css's own `a` rule is in that cascade too --
 * the collision CLAUDE.md records for ported designs.)
 *
 * font-family is the point as much as the colour. A <button> that inherits
 * nothing uses the UA's font, which is why Save looked foreign next to its
 * own labels.
 */
.rp-shell .rp-save {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 32px;
  background: var(--red, #d62133);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--display, var(--o5-display, inherit));
  font-size: 14.5px; font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 14px 28px -14px rgba(214, 33, 51, 0.5);
  transition: background .15s;
}
.rp-shell .rp-save:hover { background: var(--red-dark, #b91c2c); }
/* The design ships the button disabled until all four rules pass. Opacity
   alone would leave it looking clickable to a pointer, so the cursor says so
   too -- and the button is a real [disabled], not a class, so a keyboard
   cannot submit past it either. */
.rp-save[disabled] { opacity: .45; cursor: not-allowed; }

.rp-foot { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--o5-ink2, #555); }
.rp-foot a { color: #d62133; font-weight: 700; text-decoration: none; }

/* The expired/invalid card's icon. The success tick lives in the modal. */
.rp-warn {
  width: 60px; height: 60px; border-radius: 50%;
  background: #fdecee; color: #d62133;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.rp-warn svg { width: 28px; height: 28px; }
.rp-shell.is-dead .rp-main { text-align: center; }
.rp-shell.is-dead .rp-save {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}

/* The modal's thumbs-up, sized to match the forgot-password modal's own. */
.rp-thumb { font-size: 34px; line-height: 1; }

@media (max-width: 820px) {
  .rp-shell { grid-template-columns: 1fr; }
  .rp-side { padding: 32px 28px; }
  .rp-note { margin-top: 4px; }
  .rp-main { padding: 32px 28px; }
  .rp-wrap { padding: 36px 16px; }
}