/*
 * Retroprose account pages: a DOS setup screen.
 * A grey dialog box with a hard black shadow on the blue screen.
 * Colours and contrast ratios are listed in directives/frontend-design-system.md.
 */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* The CGA palette of the editor's blue screen */
  --rp-blue: #0000aa;
  --rp-grey: #aaaaaa;
  --rp-white: #ffffff;
  --rp-black: #000000;
  --rp-yellow: #ffff55;
  --rp-red: #aa0000;
  --rp-error-text: #700000;   /* 5.4:1 on the grey dialog */
  --rp-ok: #55ff55;           /* 15.8:1 on black */
  --rp-font: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --rp-shadow: 0.75rem;

  /* Bootstrap, re-pointed at the palette */
  --bs-body-font-family: var(--rp-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-bg: var(--rp-blue);
  --bs-body-color: var(--rp-grey);
  --bs-link-color: var(--rp-blue);
  --bs-link-color-rgb: 0, 0, 170;
  --bs-link-hover-color: var(--rp-black);
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-border-radius: 0;
  --bs-border-color: var(--rp-black);
  --bs-focus-ring-width: 0;
}

html { background: var(--rp-blue); }

body.rp-account {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--rp-blue);
  color: var(--rp-grey);
  font-family: var(--rp-font);
  font-feature-settings: "zero" 0;
}

/* Skip link: hidden until focused, then a yellow bar at the top */
.rp-skip {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--rp-yellow);
  color: var(--rp-black);
  font-weight: 700;
  text-decoration: none;
}
.rp-skip:focus { top: 0.5rem; outline: 3px solid var(--rp-black); outline-offset: 0; }

/* Focus: black on the grey dialog, yellow on the blue screen. Always visible. */
:focus-visible { outline: 3px solid var(--rp-yellow); outline-offset: 3px; }
.rp-dialog :focus-visible { outline: 3px solid var(--rp-black); outline-offset: 2px; box-shadow: none; }

/* Header */
.rp-header {
  padding: 1.5rem 1rem 0;
  text-align: center;
}
.rp-wordmark {
  display: inline-block;
  color: var(--rp-white);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-decoration: none;
  padding-left: 0.35em; /* balances the letter spacing */
}
.rp-wordmark:hover { color: var(--rp-yellow); }
.rp-cursor {
  display: inline-block;
  margin-left: -0.3em;
  color: var(--rp-yellow);
  animation: rp-blink 1s steps(1, end) 3;
}
@keyframes rp-blink { 50% { opacity: 0; } }
.rp-tagline {
  margin: 0.25rem 0 0;
  color: var(--rp-grey);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

/* Main area */
.rp-main {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1rem 3rem;
}

/* The dialog box: grey panel, double black rule inside, hard shadow */
.rp-dialog {
  position: relative;
  width: calc(100% - var(--rp-shadow));
  max-width: 34rem;
  margin-right: var(--rp-shadow);
  padding: 0.5rem;
  background: var(--rp-grey);
  color: var(--rp-black);
  box-shadow: var(--rp-shadow) var(--rp-shadow) 0 var(--rp-black);
}
.rp-dialog__frame {
  border: 4px double var(--rp-black);
  padding: 1.75rem 1.5rem 1.5rem;
}
.rp-dialog__title {
  position: absolute;
  top: 0.15rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0 1ch;
  background: var(--rp-grey);
  color: var(--rp-black);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.rp-dialog__title::before { content: "[ "; }
.rp-dialog__title::after { content: " ]"; }

.rp-dialog p,
.rp-dialog li,
.rp-dialog dd,
.rp-dialog dt { color: var(--rp-black); }

.rp-dialog a { color: var(--rp-blue); text-underline-offset: 0.2em; }
.rp-dialog a:hover { color: var(--rp-black); }

.rp-lead { margin-bottom: 1.25rem; }

/* Fields */
.rp-field { margin-bottom: 1.25rem; }
.rp-dialog .form-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--rp-black);
  font-weight: 700;
}
.rp-hint {
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
}
.rp-dialog .form-control {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--rp-black);
  border-radius: 0;
  background: var(--rp-white);
  color: var(--rp-black);
  font-family: var(--rp-font);
  caret-color: var(--rp-blue);
}
.rp-dialog .form-control:focus { border-color: var(--rp-black); box-shadow: none; }
.rp-field--error .form-control { border-color: var(--rp-error-text); border-width: 3px; }
.rp-field-error {
  margin: 0 0 0.375rem;
  color: var(--rp-error-text);
  font-weight: 700;
}
.rp-field-error::before { content: "\25BA  "; } /* ► */

.rp-code-input {
  max-width: 12ch;
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  text-align: center;
}

/* Password field with a Show button (added by account.js) */
.rp-password { display: flex; }
.rp-password .form-control { flex: 1 1 auto; min-width: 0; }
.rp-password .rp-show {
  flex: 0 0 auto;
  min-width: 5.5rem;
  border: 2px solid var(--rp-black);
  border-left: 0;
  background: var(--rp-grey);
  color: var(--rp-black);
  font-family: var(--rp-font);
  font-weight: 700;
}
.rp-password .rp-show:hover { background: var(--rp-black); color: var(--rp-white); }

/* Checkboxes */
.rp-dialog .form-check { display: flex; align-items: center; gap: 0.75rem; padding-left: 0; min-height: 2.75rem; margin-bottom: 1rem; }
.rp-dialog .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--rp-black);
  border-radius: 0;
  background-color: var(--rp-white);
}
.rp-dialog .form-check-input:checked { background-color: var(--rp-blue); border-color: var(--rp-black); }
.rp-dialog .form-check-input:focus { box-shadow: none; border-color: var(--rp-black); }
.rp-dialog .form-check-label { color: var(--rp-black); }

/* Buttons: blue with white text, black on hover */
.rp-dialog .btn {
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--rp-black);
  border-radius: 0;
  font-family: var(--rp-font);
  font-weight: 700;
}
.rp-dialog .btn-primary {
  --bs-btn-bg: var(--rp-blue);
  --bs-btn-color: var(--rp-white);
  --bs-btn-border-color: var(--rp-black);
  --bs-btn-hover-bg: var(--rp-black);
  --bs-btn-hover-color: var(--rp-white);
  --bs-btn-hover-border-color: var(--rp-black);
  --bs-btn-active-bg: var(--rp-black);
  --bs-btn-active-color: var(--rp-yellow);
  --bs-btn-active-border-color: var(--rp-black);
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
}
.rp-dialog .btn-primary::before { content: "\25B8 "; } /* ▸ */
.rp-dialog .btn-secondary {
  --bs-btn-bg: var(--rp-grey);
  --bs-btn-color: var(--rp-black);
  --bs-btn-border-color: var(--rp-black);
  --bs-btn-hover-bg: var(--rp-black);
  --bs-btn-hover-color: var(--rp-white);
  --bs-btn-hover-border-color: var(--rp-black);
  --bs-btn-active-bg: var(--rp-black);
  --bs-btn-active-color: var(--rp-white);
}
.rp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
}

.rp-links {
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 2px solid var(--rp-black);
  list-style: none;
}
.rp-links li + li { margin-top: 0.5rem; }

/* Sign in with a passkey: under the sign in form, after a ruled "or" */
.rp-passkey { margin-top: 1.5rem; }
.rp-or { display: flex; align-items: center; gap: 1ch; margin: 0 0 1rem; color: var(--rp-black); }
.rp-or::before, .rp-or::after { content: ""; flex: 1; border-top: 2px solid var(--rp-black); }
.rp-passkey__status { margin: 0.75rem 0 0; color: var(--rp-black); font-weight: 700; }
.rp-passkey__status:empty { display: none; }

/* Messages: an error box in white on red, a status box in green on black */
.rp-alert {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--rp-black);
}
.rp-alert--error { background: var(--rp-red); }
.rp-alert--error,
.rp-alert--error p,
.rp-alert--error li,
.rp-alert--error a { color: var(--rp-white); }
.rp-alert--error:focus-visible { outline: 3px solid var(--rp-black); outline-offset: 2px; }
.rp-alert--ok { background: var(--rp-black); }
.rp-alert--ok,
.rp-alert--ok p { color: var(--rp-ok); }
.rp-alert__title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; }
.rp-alert ul { margin: 0; padding-left: 1.25rem; }
.rp-alert p:last-child { margin-bottom: 0; }

.rp-section-title {
  margin: 1.75rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--rp-black);
  color: var(--rp-black);
  font-size: 1rem;
  font-weight: 700;
}

/* A wider dialog for long text (about 70 characters a line) */
.rp-dialog--text { max-width: 48rem; }

/* The links between the pages (app/Views/partials/app_nav.php), at the
 * top of the dialog, with the page on screen in bold */
.rp-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0 0 0.75rem;
  border-bottom: 2px solid var(--rp-black);
  list-style: none;
}
.rp-nav a { display: inline-block; min-height: 1.5rem; }
.rp-nav a[aria-current="page"] { color: var(--rp-black); font-weight: 700; text-decoration: none; }
/* Sign out: a form with a button that looks like the links */
.rp-nav form { display: inline; margin: 0; }
.rp-nav__out { display: inline-block; min-height: 1.5rem; margin: 0; padding: 0; border: 0; background: none; color: var(--rp-blue); font: inherit; text-decoration: underline; cursor: pointer; }
.rp-nav__out:hover { color: var(--rp-black); }

/* Long text, such as the privacy notice */
.rp-prose ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.rp-prose li + li { margin-top: 0.375rem; }
.rp-prose strong { font-weight: 700; }

/* Key hints at the foot of the screen, like a DOS status line */
.rp-keys {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  background: var(--rp-grey);
  color: var(--rp-black);
  font-size: 0.875rem;
}
.rp-keys ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp-keys kbd {
  padding: 0 0.4em;
  border-radius: 0;
  background: var(--rp-black);
  color: var(--rp-white);
  font-family: var(--rp-font);
  font-size: inherit;
  font-weight: 700;
}

/* Small screens: keep a 16px gutter and a smaller shadow */
@media (max-width: 575.98px) {
  :root { --rp-shadow: 0.5rem; }
  .rp-main { padding: 1.5rem 1rem 2rem; }
  .rp-dialog__frame { padding: 1.75rem 1rem 1.25rem; }
  .rp-wordmark { font-size: 1.375rem; letter-spacing: 0.25em; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-cursor { animation: none; }
}

/* ---------- The amber screen, for signed-out visitors ----------
 * Sign in, sign up, the codes and Account deleted, when no one is signed
 * in (Config\Editor::$signedOutTheme, set on <html> by layouts/account).
 * The editor's amber colours (--bg, --fg, --hi, --acc, --dim in
 * screen.css): a monochrome screen, so the dialog is the screen's own
 * colour inside an amber double frame, as the editor's menus are on
 * amber, and what the blue screen shows in black on grey or white on
 * blue is shown inverted. Contrast on #1A1000: amber 11.5:1, pale amber
 * 16:1, the link colour 12.8:1, black on amber 11.5:1, the dim rules 4:1. */
:root[data-skin="amber"] {
  --rp-am-bg: #1a1000;
  --rp-am-fg: #ffb000;
  --rp-am-hi: #ffe6b0;
  --rp-am-acc: #ffcf5c;
  --rp-am-dim: #9a6b00;

  --bs-body-bg: var(--rp-am-bg);
  --bs-body-color: var(--rp-am-fg);
  --bs-link-color: var(--rp-am-acc);
  --bs-link-color-rgb: 255, 207, 92;
  --bs-link-hover-color: var(--rp-am-hi);
  --bs-link-hover-color-rgb: 255, 230, 176;
  --bs-border-color: var(--rp-am-fg);
}
:root[data-skin="amber"],
[data-skin="amber"] body.rp-account { background: var(--rp-am-bg); color: var(--rp-am-fg); }

[data-skin="amber"] .rp-skip { background: var(--rp-am-hi); color: var(--rp-black); }
[data-skin="amber"] :focus-visible,
[data-skin="amber"] .rp-dialog :focus-visible { outline: 3px solid var(--rp-am-hi); outline-offset: 2px; box-shadow: none; }

[data-skin="amber"] .rp-wordmark,
[data-skin="amber"] .rp-cursor { color: var(--rp-am-hi); }
[data-skin="amber"] .rp-wordmark:hover { color: var(--rp-am-acc); }
[data-skin="amber"] .rp-tagline { color: var(--rp-am-fg); }

[data-skin="amber"] .rp-dialog {
  background: var(--rp-am-bg);
  color: var(--rp-am-fg);
  box-shadow: var(--rp-shadow) var(--rp-shadow) 0 var(--rp-am-dim);
}
[data-skin="amber"] .rp-dialog__frame { border-color: var(--rp-am-fg); }
[data-skin="amber"] .rp-dialog__title { background: var(--rp-am-bg); color: var(--rp-am-hi); }
[data-skin="amber"] .rp-dialog :is(p, li, dd, dt, .form-check-label) { color: var(--rp-am-fg); }
[data-skin="amber"] .rp-dialog a { color: var(--rp-am-acc); }
[data-skin="amber"] .rp-dialog a:hover { color: var(--rp-am-hi); }

[data-skin="amber"] .rp-dialog .form-label { color: var(--rp-am-hi); }
[data-skin="amber"] .rp-dialog .form-control {
  border-color: var(--rp-am-fg);
  background: var(--rp-black);
  color: var(--rp-am-hi);
  caret-color: var(--rp-am-hi);
}
[data-skin="amber"] .rp-dialog .form-control:focus { border-color: var(--rp-am-fg); }
[data-skin="amber"] .rp-field--error .form-control { border-color: var(--rp-am-hi); }
[data-skin="amber"] .rp-dialog .rp-field-error { color: var(--rp-am-hi); }

[data-skin="amber"] .rp-password .rp-show { border-color: var(--rp-am-fg); background: var(--rp-am-bg); color: var(--rp-am-fg); }
[data-skin="amber"] .rp-password .rp-show:hover { background: var(--rp-am-fg); color: var(--rp-black); }

[data-skin="amber"] .rp-dialog .form-check-input { border-color: var(--rp-am-fg); background-color: var(--rp-black); }
[data-skin="amber"] .rp-dialog .form-check-input:checked {
  border-color: var(--rp-am-fg);
  background-color: var(--rp-am-fg);
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-skin="amber"] .rp-dialog .form-check-input:focus { border-color: var(--rp-am-fg); }

[data-skin="amber"] .rp-dialog .btn { border-color: var(--rp-am-fg); }
[data-skin="amber"] .rp-dialog .btn-primary {
  --bs-btn-bg: var(--rp-am-fg);
  --bs-btn-color: var(--rp-black);
  --bs-btn-border-color: var(--rp-am-fg);
  --bs-btn-hover-bg: var(--rp-am-hi);
  --bs-btn-hover-color: var(--rp-black);
  --bs-btn-hover-border-color: var(--rp-am-hi);
  --bs-btn-active-bg: var(--rp-am-hi);
  --bs-btn-active-color: var(--rp-black);
  --bs-btn-active-border-color: var(--rp-am-hi);
}
[data-skin="amber"] .rp-dialog .btn-secondary {
  --bs-btn-bg: var(--rp-am-bg);
  --bs-btn-color: var(--rp-am-fg);
  --bs-btn-border-color: var(--rp-am-fg);
  --bs-btn-hover-bg: var(--rp-am-fg);
  --bs-btn-hover-color: var(--rp-black);
  --bs-btn-hover-border-color: var(--rp-am-fg);
  --bs-btn-active-bg: var(--rp-am-hi);
  --bs-btn-active-color: var(--rp-black);
}

[data-skin="amber"] .rp-links,
[data-skin="amber"] .rp-section-title { border-top-color: var(--rp-am-dim); }
[data-skin="amber"] .rp-section-title { color: var(--rp-am-hi); }
[data-skin="amber"] .rp-or { color: var(--rp-am-fg); }
[data-skin="amber"] .rp-or::before,
[data-skin="amber"] .rp-or::after { border-top-color: var(--rp-am-dim); }
[data-skin="amber"] .rp-passkey__status { color: var(--rp-am-hi); }

/* The error summary inverted, the status line pale amber on black. */
[data-skin="amber"] .rp-alert { border-color: var(--rp-am-fg); }
[data-skin="amber"] .rp-alert--error { background: var(--rp-am-fg); }
[data-skin="amber"] .rp-alert--error :is(p, li, a),
[data-skin="amber"] .rp-alert--error { color: var(--rp-black); }
[data-skin="amber"] .rp-alert--error:focus-visible { outline-color: var(--rp-am-hi); }
[data-skin="amber"] .rp-alert--ok { background: var(--rp-black); }
[data-skin="amber"] .rp-alert--ok,
[data-skin="amber"] .rp-alert--ok p { color: var(--rp-am-hi); }

[data-skin="amber"] .rp-keys { background: var(--rp-am-fg); color: var(--rp-black); }
[data-skin="amber"] .rp-keys kbd { background: var(--rp-black); color: var(--rp-am-fg); }

/* Windows high contrast and other forced colour modes */
@media (forced-colors: active) {
  .rp-dialog { border: 2px solid CanvasText; box-shadow: none; }
  .rp-dialog__title { forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .rp-dialog .btn-primary::before,
  .rp-field-error::before { forced-color-adjust: auto; }
}