:root {
  color-scheme: light;
  --bg: #f4f7f8;
  --panel: #ffffff;
  --ink: #0f2e44;
  --muted: #5a717b;
  --soft: #f8fafb;
  --accent: #800020;
  --accent-dark: #66001a;
  --brand: linear-gradient(180deg, #9c0b28 0%, #66001a 100%);
  --line: #d6e4e9;
  --line-strong: #bfd3da;
  --danger: #b23a3a;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(12, 52, 65, 0.10);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--bg);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ink);
}

.shell {
  width: min(calc(100% - 48px), 980px);
  margin: 24px auto;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.brand,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.brand {
  background: var(--brand);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-color: rgba(128, 0, 32, 0.5);
}

.brand-top {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brand-logo img {
  width: 100%;
  height: auto;
  display: block;
  padding: 12px;
}

.eyebrow {
  font-size: 1.2rem;
  letter-spacing: 0;
  opacity: 0.82;
  font-weight: 700;
  text-align: center;
}

p {
  margin: 0;
  line-height: 1.6;
}

.panel h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.45rem;
  line-height: 1.2;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

label {
  font-weight: 600;
  font-size: 0.88rem;
}

input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: white;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.18);
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 4.5rem;
}

.password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  width: auto;
  padding: 4px 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  letter-spacing: 0;
  border-radius: 8px;
}

.password-toggle:focus-visible {
  outline: 3px solid rgba(128, 0, 32, 0.28);
  outline-offset: 2px;
}

/*
  The generic 'button:hover' rule further down out-specifies a bare '.password-toggle', so this chip fills
  with the brand colour on hover whether it asked to or not - and burgundy text on a burgundy fill is what
  made the Show/Hide label vanish. The colours invert together instead: filled chip, white label. Reached
  through .password-field so it wins that tie outright rather than depending on where it sits in the file.
*/
.password-field .password-toggle:hover,
.password-field .password-toggle:focus-visible,
.password-field .password-toggle:active {
  background: var(--accent-dark);
  color: #fff;
}

button,
.button-link {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  background: var(--accent);
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.button-link {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

button:hover,
.button-link:hover {
  background: var(--accent-dark);
}

button:focus-visible,
.button-link:focus-visible {
  outline: 3px solid rgba(128, 0, 32, 0.3);
  outline-offset: 2px;
}

.confirm-text,
.intro-text {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 0.95rem;
}

.button-row {
  display: flex;
  gap: 12px;
}

.button-row button,
.button-row .button-link {
  flex: 1;
}

button.secondary {
  background: var(--soft);
  color: var(--accent);
  border: 1px solid var(--line-strong);
}

button.secondary:hover {
  background: #eef4f6;
}

.auth-link {
  margin: 18px 0 0;
  text-align: center;
}

.auth-link a {
  color: var(--accent);
  font-weight: 700;
}

.secondary-link {
  background: var(--soft);
  color: var(--accent);
}

.success-message {
  border: 1px solid rgba(39, 133, 93, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(39, 133, 93, 0.08);
  color: #1f6d4c;
}

.validation-summary-errors,
.field-error {
  color: var(--danger);
}

.validation-summary-errors {
  border: 1px solid rgba(178, 58, 58, 0.24);
  border-radius: 10px;
  background: #fff7f7;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 18px;
}

.field-error {
  min-height: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.field-help {
  color: var(--muted);
  font-size: 0.8rem;
}

.planadiq-mark {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.planadiq-mark img {
  max-width: 50%;
  height: auto;
  display: block;
}

@media (max-width: 860px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .brand {
    min-height: 210px;
  }
}

@media (max-width: 520px) {
  .shell {
    width: min(calc(100% - 24px), 980px);
    margin: 12px auto;
    gap: 12px;
  }

  .brand,
  .panel {
    padding: 20px;
  }

  .brand {
    min-height: 180px;
  }
}

/* --- Two-step verification (ported from Apool, which took it from the PlanadIQ CRM) --- */

/* The Paste button on a code field. Same idiom as .password-toggle above, including its hover: reached
   through .code-field so the generic 'button:hover' fill cannot leave burgundy text on a burgundy chip.
   Hidden until auth.js confirms the browser can actually read the clipboard. */
.code-field {
  position: relative;
}

.code-field input {
  padding-right: 5rem;
}

.paste-code {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  width: auto;
  padding: 4px 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  letter-spacing: 0;
  border-radius: 8px;
}

.paste-code:focus-visible {
  outline: 3px solid rgba(128, 0, 32, 0.28);
  outline-offset: 2px;
}

.code-field .paste-code:hover,
.code-field .paste-code:focus-visible,
.code-field .paste-code:active {
  background: var(--accent-dark);
  color: #fff;
}

.paste-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

/* .field is a grid with a gap, so an empty status span would still cost a row of dead space. */
.paste-status:empty {
  display: none;
}

/* user-select: all makes one tap select the whole key, which is the copy route where the Copy key button is
   not offered. It wraps between its groups of four, never inside one (overflow-wrap only breaks a group
   that cannot fit a line on its own) - a group split across lines is easy to mistype. */
.secret-key {
  display: block;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--soft);
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
  text-align: center;
  -webkit-user-select: all;
  user-select: all;
}

.setup-text {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* The two ways to add the account. The computer (QR) route comes first in the markup; on a touch device the
   phone (copy the key) route is moved ahead of it, because a phone cannot scan its own screen. A touch
   laptop reports a fine primary pointer, so it keeps the desk order. */
.setup-routes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
}

.setup-route {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.setup-route h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.setup-route .qr-code {
  margin-bottom: 0;
}

@media (hover: none) and (pointer: coarse) {
  .setup-route--phone {
    order: -1;
  }
}

.copy-status {
  margin: 8px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.copy-status:empty {
  display: none;
}

.setup-apps {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.setup-apps li + li {
  margin-top: 8px;
}

.setup-apps strong {
  color: var(--ink);
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--soft);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.95rem;
  list-style: none;
}

.status-message {
  margin-bottom: 16px;
}

.status-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.status-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.status-list li:last-child {
  border-bottom: 0;
}

.status-list .value {
  font-weight: 700;
}

/* The enrolment QR code. Fixed white background and a border whatever the palette: a camera reads this by
   measuring contrast, so it is the one image here that must not follow the colours. */
.qr-code {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #ffffff;
}

.qr-code svg {
  display: block;
  width: min(232px, 100%);
  height: auto;
}