/* =====================================================================
   reach-chrome.css - the header, the sidebar and every dialog, for BOTH sides

   This file is byte-for-byte identical in
       home/assets/css/reach-chrome.css
       admin/public/assets/css/reach-chrome.css
   and loads LAST on every page of both. Edit one, copy it to the other.

   WHY IT EXISTS
   The public site and the admin portal had two headers and two sidebars
   that looked alike at a glance and differed everywhere else:

                        public            admin (before)
     logo               30px + wordmark   35px, no wordmark
     burger -> logo     27px              14px
     rail padding       12px 8px          15px 0
     nav text / icon    14px / 16px       14.4px / 17.6px (40px wide)
     collapsed rail     72px              80px
     header             sticky            scrolled away
     unread count       bell              badge on the avatar
     account menu       one design        another design

   Both sides now use the same markup (rx-topbar, rx-brand, rx-rail,
   rx-navitem, rx-menu), the same script (layout.js) and the rules
   below. The old per-side classes (global-menu-toggle, mini-nav-item,
   admin-header, admin-sidebar, nav-item, admin-profile-menu ...) are no
   longer in either template, so the legacy rules in reachhome.css and
   reachadmin.css that still target them no longer reach the chrome.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Topbar
   --------------------------------------------------------------------- */

/* One fixed gap between burger, brand and the rest - no per-side margins. */
.rx-topbar { gap: var(--s-3); }
.rx-topbar > .rx-spacer { flex: 1 1 auto; }

/* Logo: 48px on a full-width screen (was 30), inside the 56px bar. The
   mark is a wide lock-up (about 4.8 : 1), so it steps down with the
   screen instead of pushing the account controls off a phone. These
   override the older 30 / 26 / 22 px steps in reach-ui.css section 2. */
.rx-brand img { height: 48px; }
@media (max-width: 900px) { .rx-brand img { height: 44px; } }
@media (max-width: 640px) { .rx-brand img { height: 40px; } }
@media (max-width: 480px) { .rx-brand img { height: 34px; } }
@media (max-width: 360px) { .rx-brand img { height: 28px; } }

/* Two logo images side by side (university + BSU REACH), both the same
   height. Two wide lock-ups take about 470px; below 900 that leaves the
   public search box too narrow to type in (115px at 850, 34px at 769),
   so from 900 down only the first is shown. */
.rx-brand { gap: var(--s-3); }
@media (max-width: 900px) { .rx-brand .rx-brand-mark2 { display: none; } }

/* ---------------------------------------------------------------------
   2. Rail - stays in view while the page scrolls (above 768)

   Both rails used to scroll away with the content, so on a long table
   the navigation disappeared off the top. Held under the sticky header
   instead, with its own scroll if the list is taller than the screen.
   --------------------------------------------------------------------- */
@media (min-width: 769px) {
  .rx-rail {
    position: sticky;
    top: var(--header-h);
    align-self: flex-start;
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Positioning context for the corner count below. (Icon-only items carry
   a title attribute, so the label still appears on hover.) */
.rx-navitem { position: relative; }

/* Nav items - ONE geometry, open or collapsed.

   Before, the collapsed strip had its own: items 44px tall and 63px wide
   with the icon centred in them, against 40px tall with the icon 12px in
   when open. So the highlight grew when the rail closed and every icon
   jumped about 6px sideways, and in neither state did the icons sit under
   the burger (burger centre 36px from the left, icons at 30 / 35.5).

   Now the rail is inset 8px in both states and every item is 40px tall
   with an 18px left pad and a 20px icon column, so the icon's centre is
   8 + 18 + 10 = 36px - the burger's centre - whether the rail is open or
   not. Collapsing only hides the label and trims the highlight to 56px
   (18px either side of the icon); its height, left edge, corners and the
   icon's position do not move.

   Collapsed means either .is-collapsed (the burger, above 768) or the
   769-900 band, where the rail is an icon strip by media query. */
@media (min-width: 769px) {
  .rx-rail,
  .rx-rail.is-collapsed { padding-left: var(--s-2); padding-right: var(--s-2); }

  .rx-rail .rx-navitem,
  .rx-rail.is-collapsed .rx-navitem {
    height: 40px;
    padding: 0 var(--s-3) 0 18px;
    justify-content: flex-start;
  }
  .rx-rail .rx-navitem i,
  .rx-rail.is-collapsed .rx-navitem i { width: 20px; }

  .rx-rail.is-collapsed .rx-navitem { width: 56px; padding-right: 0; }
  .rx-rail.is-collapsed .rx-rail-sep { margin-left: var(--s-2); margin-right: var(--s-2); }
}
@media (min-width: 769px) and (max-width: 900px) {
  .rx-rail .rx-navitem { width: 56px; padding-right: 0; }
  .rx-rail .rx-rail-sep { margin-left: var(--s-2); margin-right: var(--s-2); }
}

/* Drawer (768 and below): the same 20px icon column and the icon under
   the burger. The bar's side padding is 12px here and 8px from 480 down,
   putting the burger's centre at 32 and then 28, so the pad follows it
   (8 + 14 + 10 = 32, 8 + 10 + 10 = 28). Rows stay 44px here - a
   finger-sized target on a phone. */
@media (max-width: 768px) {
  .rx-rail .rx-navitem { padding-left: 14px; }
  .rx-rail .rx-navitem i { width: 20px; }
}
@media (max-width: 480px) {
  .rx-rail .rx-navitem { padding-left: 10px; }
}

/* Counts: inline at the end of the row when there is room, a small
   corner badge on the icon when the rail is icons only. */
.rx-navitem .rx-navcount { margin-left: auto; }
@media (min-width: 769px) {
  .rx-rail.is-collapsed .rx-navcount {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    font-size: 10px;
  }
}

/* ---------------------------------------------------------------------
   3. Account menu (rx-menu) - was two stylesheets' worth of
      profile-dropdown-* and admin-profile-* rules that had drifted
   --------------------------------------------------------------------- */
.rx-menu-wrap { position: relative; display: flex; align-items: center; }

.rx-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-overlay);
  overflow: hidden;
}

.rx-menu-head {
  padding: var(--s-4);
  text-align: center;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}
.rx-menu-name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); line-height: 1.35; }
.rx-menu-role {
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rx-menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.rx-menu-item i { width: 20px; text-align: center; color: var(--text-muted); flex-shrink: 0; }
.rx-menu-item:hover { background: var(--surface-sunken); color: var(--brand-ink); }
.rx-menu-item:hover i { color: var(--brand); }
.rx-menu-item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.rx-menu-item .rx-navcount { margin-left: auto; }
.rx-menu-sep { height: 1px; background: var(--border); }

@media (max-width: 480px) {
  .rx-menu { width: min(240px, calc(100vw - 16px)); }
}

/* ---------------------------------------------------------------------
   4. Admin content area - same breathing room as the public .rx-main,
      so the gap between the rail and the page is the same on both sides.
      (The admin pages keep their own wrapper: their layout inside it is
      not part of this change.)
   --------------------------------------------------------------------- */
.admin-content-area { padding: var(--s-6); }
.admin-content-area > .dashboard-panel { padding: 0; }
@media (max-width: 768px) { .admin-content-area { padding: var(--s-4); } }
@media (max-width: 480px) { .admin-content-area { padding: var(--s-3); } }

/* =====================================================================
   5. DIALOGS - every dialog on both sides

   One anatomy for all of them, applied by assets/js/rx-dialogs.js to
   every SweetAlert2 popup (confirmations, alerts, forms, notices):

       [icon tile]  Title
                    subtitle
       body / fields
       --------------------------------------------------------
       [tertiary]                          [Cancel] [Confirm]

   This replaces SweetAlert's own look (centred 80px animated icons,
   blue and grey buttons in inline colours), the .rx-modal-* notice
   built inside a popup, and the admin's .rx-modal-overlay pages. The
   same question - "delete this?" - now looks the same wherever it is
   asked.
   ===================================================================== */
.swal2-container { z-index: 100000; }

/* The page's scrollbar while a dialog is open. SweetAlert hides the body
   overflow and pads the body by the scrollbar's width so the page does
   not jump. It works that padding out by adding the scrollbar to the
   body's CURRENT padding - and when one dialog opens straight from
   another (a message -> "Delete this?"), the body is still
   transitioning back from the first one's padding (every element has a
   1ms transition when the reader asks for reduced motion), so it read
   the old padding and added to it: the gap on the right grew by one
   scrollbar each time. rx-dialogs.js turns SweetAlert's padding off and
   measures the scrollbar once, while no dialog is open; this rule
   applies it, so it is the same width however dialogs are chained. */
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  padding-right: var(--rx-scrollbar, 0px) !important;
  transition: none !important;
}
.swal2-container.rx-dialog-container.swal2-backdrop-show { background: rgba(15, 23, 42, 0.45); }

.swal2-popup.rx-dialog {
  grid-template-columns: minmax(0, 1fr);
  width: min(460px, 100%);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  text-align: left;
  overflow: hidden;
}
.swal2-popup.rx-dialog.rx-has-icon { grid-template-columns: auto minmax(0, 1fr); }
.swal2-popup.rx-dialog.rx-dialog-wide { width: min(720px, 100%); }
.swal2-popup.rx-dialog > * { grid-column: 1 / -1; }

/* Head: icon tile beside the title. */
.rx-dialog .swal2-icon.rx-dialog-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: var(--s-6) 0 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  border-color: var(--brand-tint-line);
  color: var(--brand-ink);
  line-height: 1;
  animation: none;
}
.rx-dialog .swal2-icon.rx-dialog-icon .swal2-icon-content { font-size: 1.125rem; }
.rx-dialog.rx-tone-success .swal2-icon.rx-dialog-icon { background: var(--success-surface); border-color: var(--success-surface); color: var(--success); }
.rx-dialog.rx-tone-warning .swal2-icon.rx-dialog-icon { background: var(--warning-surface); border-color: var(--warning-surface); color: var(--warning); }
.rx-dialog.rx-tone-danger  .swal2-icon.rx-dialog-icon { background: var(--danger-surface);  border-color: var(--danger-line);    color: var(--danger); }

.rx-dialog .swal2-title.rx-dialog-title {
  grid-row: 1;
  align-self: center;
  margin: var(--s-6) var(--s-12) 0 var(--s-6);
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
  text-align: left;
}
.rx-dialog.rx-has-icon .swal2-title.rx-dialog-title { grid-column: 2; margin-left: var(--s-4); }
.rx-dialog-title-main { display: block; }
.rx-dialog-sub {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.rx-dialog-sub a { color: var(--brand-ink); }

/* Body. */
.rx-dialog .swal2-html-container.rx-dialog-body {
  margin: var(--s-4) var(--s-6) 0;
  padding: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  text-align: left;
}
.rx-dialog .rx-dialog-body p { margin: 0 0 var(--s-2); }
.rx-dialog .rx-dialog-body p:last-child { margin-bottom: 0; }
/* A message you opened to read (RX.notice) is the point of the dialog,
   so it is set in the main text colour, on a quiet panel. */
.rx-dialog .rx-dialog-message {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text);
  overflow-wrap: anywhere;
}
.rx-dialog .rx-dialog-message b,
.rx-dialog .rx-dialog-message strong { color: var(--text); }

/* Fields: SweetAlert's own inputs, and the .rx-swal-field forms. */
.rx-dialog .swal2-input.rx-dialog-input,
.rx-dialog .swal2-textarea.rx-dialog-input,
.rx-dialog .swal2-select.rx-dialog-input {
  width: auto;
  min-height: 40px;
  margin: var(--s-4) var(--s-6) 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  color: var(--text);
}
.rx-dialog .swal2-textarea.rx-dialog-input { min-height: 112px; line-height: var(--lh-normal); resize: vertical; }
.rx-dialog .swal2-input.rx-dialog-input:focus,
.rx-dialog .swal2-textarea.rx-dialog-input:focus,
.rx-dialog .swal2-select.rx-dialog-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.rx-dialog .swal2-input.rx-dialog-input::placeholder,
.rx-dialog .swal2-textarea.rx-dialog-input::placeholder { color: var(--text-subtle); }
.rx-dialog .rx-swal-field label { color: var(--text); }
.rx-dialog .rx-swal-field:last-child { margin-bottom: 0; }

.rx-dialog .swal2-validation-message.rx-dialog-error {
  justify-content: flex-start;
  margin: var(--s-3) var(--s-6) 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--danger-surface);
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.rx-dialog .swal2-validation-message.rx-dialog-error::before {
  width: 1.1em; min-width: 1.1em; height: 1.1em;
  margin: 0 var(--s-2) 0 0;
  background: var(--danger);
  font-size: 0.75rem;
}

/* Foot: the actions, on a quiet strip. Cancel sits left of Confirm
   everywhere; a tertiary action (Delete in a notice) goes far left. */
.rx-dialog .swal2-actions.rx-dialog-actions {
  justify-content: flex-end;
  gap: var(--s-2);
  width: 100%;
  box-sizing: border-box;
  margin: var(--s-6) 0 0;
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}
.rx-dialog .rx-dialog-actions .rx-btn { min-height: 38px; padding: 0 var(--s-4); margin: 0; }
.rx-dialog .rx-dialog-actions .rx-dialog-deny { order: -1; margin-right: auto; color: var(--danger); }
.rx-dialog .rx-dialog-actions .rx-dialog-deny:hover { background: var(--danger-surface); color: var(--danger); }
/* A dialog with nothing to press (a notice that only closes) keeps the
   strip, so every dialog ends the same way. While a request runs the
   strip holds the spinner instead of the buttons. */
.rx-dialog.swal2-loading .swal2-actions.rx-dialog-actions { justify-content: center; }
.rx-dialog .swal2-loader.rx-dialog-loader {
  width: 28px; height: 28px; margin: 5px 0;
  border-width: 3px;
  border-color: var(--brand) transparent var(--brand) transparent;
}
/* A spinner dialog ("Deleting...") has only a title: centre it. */
.rx-dialog.rx-no-icon.swal2-loading .swal2-title.rx-dialog-title { margin-right: var(--s-6); text-align: center; }

.rx-btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.rx-btn-danger-solid:hover { background: #8A1F16; border-color: #8A1F16; color: #fff; }
.rx-btn-warning-solid { background: var(--warning); color: #fff; border-color: var(--warning); }
.rx-btn-warning-solid:hover { filter: brightness(0.92); color: #fff; }

.rx-dialog .swal2-close.rx-dialog-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
}
.rx-dialog .swal2-close.rx-dialog-close:hover { background: var(--surface-sunken); color: var(--text); }
.rx-dialog .swal2-close.rx-dialog-close:focus { outline: none; box-shadow: var(--focus-ring); }

/* Long text in a dialog (the Terms of Use at sign-up) scrolls inside
   the body, so the buttons stay in view. */
.rx-dialog .rx-dialog-scroll {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding-right: var(--s-3);
  color: var(--text);
}

/* Toasts ("Saved") keep SweetAlert's small corner layout, in the site's
   type and surfaces. */
.swal2-popup.swal2-toast.rx-toast {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
}
.swal2-popup.swal2-toast.rx-toast .swal2-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.swal2-popup.swal2-toast.rx-toast .swal2-timer-progress-bar { background: var(--brand-tint-line); }

@media (max-width: 480px) {
  .swal2-popup.rx-dialog .swal2-icon.rx-dialog-icon { width: 40px; height: 40px; margin: var(--s-5) 0 0 var(--s-5); }
  .rx-dialog .swal2-title.rx-dialog-title { margin: var(--s-5) var(--s-10) 0 var(--s-5); font-size: var(--fs-lg); }
  .rx-dialog.rx-has-icon .swal2-title.rx-dialog-title { margin-left: var(--s-3); }
  .rx-dialog .swal2-html-container.rx-dialog-body,
  .rx-dialog .swal2-input.rx-dialog-input,
  .rx-dialog .swal2-textarea.rx-dialog-input,
  .rx-dialog .swal2-select.rx-dialog-input,
  .rx-dialog .swal2-validation-message.rx-dialog-error { margin-left: var(--s-5); margin-right: var(--s-5); }
  .rx-dialog .swal2-actions.rx-dialog-actions { padding: var(--s-3) var(--s-5); margin-top: var(--s-5); }
  .rx-dialog .rx-dialog-actions .rx-btn { flex: 1 1 auto; }
  .rx-dialog .rx-dialog-actions .rx-dialog-deny { flex-basis: 100%; margin-right: 0; }
}
/* Corner toasts sit below the sticky header, not on top of it. */
.swal2-container.swal2-top-end:has(.rx-toast),
.swal2-container.swal2-top-right:has(.rx-toast) { padding-top: calc(var(--header-h) + var(--s-2)); }

/* ---------------------------------------------------------------------
   The sign-in / register dialog (home/includes/footer.php, auth.js).
   It keeps its two-panel layout - it is a whole form, not a question -
   but takes the same backdrop, frame, close button, type, fields and
   buttons as every other dialog. It had its own: a near-opaque green
   backdrop, a red hover on the close button, uppercase labels and a
   near-black submit button.
   --------------------------------------------------------------------- */
.auth-modal-overlay { background-color: rgba(15, 23, 42, 0.45); padding: var(--s-4); }
.auth-modal-overlay .auth-modal-wrapper {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
}
.auth-modal-overlay .btn-close-modal-new {
  top: var(--s-3);
  right: var(--s-3);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.auth-modal-overlay .btn-close-modal-new:hover { background: var(--surface-sunken); color: var(--text); }
.auth-modal-overlay .btn-close-modal-new:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.auth-modal-overlay .auth-header { margin-bottom: var(--s-5); }
.auth-modal-overlay .auth-title {
  margin: 0 0 var(--s-1);
  font-family: var(--font-ui);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
}
.auth-modal-overlay .auth-subtitle { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text-muted); }
.auth-modal-overlay .auth-form-group { margin-bottom: var(--s-4); }
.auth-modal-overlay .auth-label {
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}
.auth-modal-overlay .auth-input {
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  color: var(--text);
}
.auth-modal-overlay .auth-input:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.auth-modal-overlay .auth-otp-input { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: 0.4em; color: var(--text); }
.auth-modal-overlay .auth-checkbox-label { font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text); }
.auth-modal-overlay .auth-toggle-link,
.auth-modal-overlay .auth-terms-link { color: var(--brand-ink); font-weight: var(--fw-semibold); }
.auth-modal-overlay .auth-toggle-link:hover,
.auth-modal-overlay .auth-terms-link:hover { color: var(--brand); text-decoration: underline; }
.auth-modal-overlay .auth-footer-text { font-size: var(--fs-md); font-weight: var(--fw-regular); }
/* The submit button is .rx-btn-primary in everything but name. */
.auth-modal-overlay .auth-submit-btn {
  min-height: 42px;
  padding: 0 var(--s-4);
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.auth-modal-overlay .auth-submit-btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--text-on-brand); }
.auth-modal-overlay .auth-submit-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.auth-modal-overlay .auth-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* Required fields carry a red asterisk; the button stays greyed out until
   they are filled (auth.js). */
.auth-modal-overlay .auth-req { color: var(--danger); font-weight: var(--fw-bold); margin-left: 2px; }
.auth-modal-overlay .auth-submit-btn:disabled { background: var(--n-100); border-color: var(--n-200); color: var(--n-500); opacity: 1; cursor: not-allowed; }
.auth-modal-overlay .auth-submit-btn:disabled:hover { background: var(--n-100); border-color: var(--n-200); color: var(--n-500); }
.auth-modal-overlay .auth-terms-row { margin: var(--s-1) 0 var(--s-4); }

/* The password rules, ticked as the password is typed. */
.auth-pw-rules { list-style: none; margin: calc(var(--s-1) * -1) 0 var(--s-4); padding: var(--s-2) var(--s-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--s-3); background: var(--surface-sunken); border-radius: var(--r-md); }
.auth-pw-rules li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.35; }
.auth-pw-rules li i { font-size: 0.8em; color: var(--n-400); width: 1em; text-align: center; flex: none; }
.auth-pw-rules li.is-ok { color: var(--success, #15803d); }
.auth-pw-rules li.is-ok i { color: var(--success, #15803d); font-size: 0.95em; }
.auth-pw-rules li.is-bad { color: var(--text); }
.auth-pw-rules li.is-bad i { color: var(--danger); font-size: 0.95em; }

/* Lets auth.js notice a browser filling in a saved login. */
@keyframes rxAutofill { from { opacity: 1; } to { opacity: 1; } }
.auth-modal-overlay .auth-input:-webkit-autofill { animation: rxAutofill 1ms; }

/* One column (no picture): the dialog is only as tall as its form, with
   even, modest space around it - not a fixed 550px with the form floating
   in the middle. */
@media (max-width: 1024px) {
  .auth-modal-overlay .auth-modal-wrapper { min-height: 0; max-height: calc(100dvh - 2 * var(--s-3)); width: 460px; }
  .auth-modal-overlay .auth-modal-right { padding: var(--s-5) var(--s-5) var(--s-5); }
  .auth-modal-overlay .auth-view-container { margin: 0; }
  .auth-modal-overlay .auth-header { margin-bottom: var(--s-4); padding-right: 36px; }
  .auth-modal-overlay .auth-footer-text { margin-top: var(--s-4); }
}
@media (max-width: 480px) {
  .auth-modal-overlay { padding: var(--s-3); }
  .auth-modal-overlay .auth-title { font-size: var(--fs-xl); }
  .auth-modal-overlay .auth-modal-right { padding: var(--s-4); }
  .auth-modal-overlay .auth-form-group { margin-bottom: var(--s-3); }
  .auth-modal-overlay .auth-label { margin-bottom: var(--s-1); }
  .auth-pw-rules { grid-template-columns: minmax(0, 1fr); }
}