/* Accessibility: visible focus rings on every interactive element.
   Uses :focus-visible so mouse clicks don't draw the ring (only
   keyboard / programmatic focus does). All button-likes share a
   single consistent style so the keyboard-nav user always knows
   where they are. */
.btn:focus-visible,
.tab:focus-visible,
.ren-sidebar-btn:focus-visible,
.ren-btn-primary:focus-visible,
.ren-btn-secondary:focus-visible,
.ren-btn-ghost:focus-visible,
.ren-input:focus-visible,
.ren-select:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid #185FA5;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reduced-motion users: disable testimonial auto-rotate fade
   transitions and any other transition-driven animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print stylesheet: hide app chrome (sidebar, top bar, action
   buttons, badges, mobile menu) when the user prints any page. The
   visible main content section + its headings + any text body
   remain so the print is readable. */
@media print {
  .ren-sidebar,
  .ren-topbar,
  #mobileMenuToggle,
  #mobileMenuBackdrop,
  .sidebar-badge,
  .ren-pill,
  .actions,
  .btn,
  .ren-btn-primary,
  .ren-btn-secondary,
  .ren-btn-ghost,
  .tab,
  details > summary .question-accordion-toggle,
  #renConfirmBackdrop,
  #renPromptBackdrop,
  #renAlertBackdrop,
  #renAsciiGuardBubble {
    display: none !important;
  }
  body, .ren-main {
    background: #fff !important;
    color: #000 !important;
  }
  .section, .ren-card {
    box-shadow: none !important;
    border: none !important;
  }
  details {
    /* Always expand accordions on print so the user gets the full
       content, not collapsed summaries. */
    border: none !important;
  }
  details > summary {
    list-style: none;
  }
}

.ren-warning-banner {
  background: #fef9c3;
  border: 1px solid #facc15;
  color: #854d0e;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 600;
  border-radius: 12px;
  /* border-box so padding/border are inside the parent width — otherwise
     the banner overflows its parent by ~34px when used inline in email bodies
     or form containers. */
  box-sizing: border-box;
  max-width: 100%;
  /* Force long tokens (URLs without spaces, long hashes) to break so the
     banner never pushes its container wider than the viewport. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ren-warning-banner strong {
  color: #854d0e;
  display: inline;
  margin-bottom: 0;
}

    :root {
      --bg: #f7fafc;
      --card: #ffffff;
      --border: #dbe4ee;
      --text: #0f172a;
      --muted: #0f172a;
      --subtle: #0f172a;
      --accent: #111827;
      --good: #15803d;
      --danger: #b91c1c;
      --warn: #92400e;
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      --radius: 16px;
    }

    * { box-sizing: border-box; }
    html { font-size: 22px; }
    html, body { margin: 0; height: 100%; }
    body { font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); font-size: 22px; line-height: 1.6; }
    .hidden { display: none !important; }
    .page { min-height: 100vh; padding: 24px; }
    .container { max-width: 1480px; margin: 0 auto; }
    h1, h2, h3, p { margin: 0; }
    h1 { font-size: 1.85rem; margin-bottom: 8px; }
    .subtitle { color: var(--muted); line-height: 1.5; }

    .topbar { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
    .pill { border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; background: #f8fbff; font-size: 0.82rem; }
    .badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

    .tabs { display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: var(--shadow); margin: 16px 0; }
    .tab { border: 0; background: transparent; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 600; color: var(--muted); font-size: inherit; }
    .tab.active { background: #111827; color: #fff; }

    .section { display: none; }
    .section.active { display: block; }

    .grid-2, .grid-3, .grid-4 { display: grid; gap: 14px; }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Form-cell pairs: when one label wraps to 2 lines and its neighbor's
       label is 1 line, the inputs below them land at different y-coords.
       Stretch each cell to equal height and anchor the last child (the
       input) to the bottom so inputs line up across the row. Scoped to
       form contexts so lists/cards with richer content aren't affected. */
    .card-body.form .grid-2 > div, .card-body.form .grid-3 > div, .card-body.form .grid-4 > div { display: flex; flex-direction: column; }
    .card-body.form .grid-2 > div > input, .card-body.form .grid-2 > div > select, .card-body.form .grid-2 > div > textarea,
    .card-body.form .grid-3 > div > input, .card-body.form .grid-3 > div > select, .card-body.form .grid-3 > div > textarea,
    .card-body.form .grid-4 > div > input, .card-body.form .grid-4 > div > select, .card-body.form .grid-4 > div > textarea { margin-top: auto; }
    .commitments-layout { max-width: 1180px; margin: 0 auto; }
    .commitments-grid { display: grid; gap: 14px; grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr); }
    .packets-layout { max-width: 980px; margin: 0 auto; }
    .unlocked-layout { max-width: 1120px; margin: 0 auto; }
    .past-layout { max-width: 980px; margin: 0 auto; }

    .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
    .card-header { padding: 18px 20px 12px; }
    .card-body { padding: 0 20px 18px; }
    .card-title { font-weight: 700; margin-bottom: 3px; font-size: 1.05rem; }
    .card-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }

    .metric { padding: 16px; }
    .metric .label { color: var(--subtle); font-size: 0.8rem; }
    .metric .value { font-size: 1.6rem; font-weight: 800; margin: 5px 0; }
    .metric .sub { color: var(--subtle); font-size: 0.82rem; }

    .list { display: grid; gap: 10px; }
    .fields-grid { display: grid; gap: 8px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-field-lock { border:1px solid #dbe4ee; background:#f8fbff; border-radius:14px; padding:14px; display:flex; flex-direction:column; align-self:stretch; }
    .fields-grid .profile-field-lock { height:100%; }
    .profile-field-lock-title { font-size:0.88rem; font-weight:700; color:#334155; margin-bottom:8px; }
    .profile-field-pills { display:flex; flex-wrap:wrap; gap:8px; }
    .profile-field-pill { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:#e8f0fb; color:#174ea6; font-size:0.88rem; font-weight:600; border:1px solid #c7d8f5; }
    .profile-layout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    .item { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: #fff; }
    /* Polished accordion styling for <details class="item"> blocks
       used across admin pending tab and admin Users tab. Replaces
       the browser-default triangle marker with a chevron that
       rotates on open, gives the summary a light blue background
       so it reads as a clickable header (matches the landing-page
       accordion language), and adds a separator when open. */
    details.item { padding: 0; overflow: hidden; }
    details.item > summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 40px 12px 16px;
      background: #f8fbff;
      font-weight: 600;
      font-size: 15px;
      color: #0f172a;
      position: relative;
      user-select: none;
    }
    details.item > summary::-webkit-details-marker { display: none; }
    details.item > summary::marker { content: ''; }
    details.item > summary::after {
      content: '';
      position: absolute;
      right: 16px;
      top: 50%;
      width: 9px;
      height: 9px;
      border-right: 2px solid #64748b;
      border-bottom: 2px solid #64748b;
      transform: translateY(-75%) rotate(45deg);
      transition: transform 0.2s;
    }
    details.item:not([open]) > summary::after { transform: translateY(-25%) rotate(-45deg); }
    details.item > summary:hover { background: #eef5fc; }
    details.item[open] > summary { border-bottom: 1px solid #dbe4ee; }
    details.item > *:not(summary) { padding-left: 16px; padding-right: 16px; }
    details.item > *:last-child { padding-bottom: 14px; }
    .small { font-size: 0.9rem; color: var(--muted); }
    .tiny { font-size: 0.82rem; color: var(--subtle); }

    .form { display: grid; gap: 12px; }
    /* Empty layout placeholders inside .form (e.g. reviewDownloadActions /
       reviewContextPanel) still consume a 12px grid-gap slot above and
       below themselves even when they have no content. That created a
       visible empty band between the Reviewer rules accordion and the
       How-to-complete accordion when no paper was selected. Collapse
       empty .form children with display:none so the grid gap doesn't
       reserve space for them. */
    .form > :empty:not(input):not(select):not(textarea):not(button):not(label) { display: none; }
    label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
    input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; color: var(--text); font-size: 0.95rem; }
    /* Overrides for native toggle controls: the broad rule above makes ALL
       inputs width:100% + padding:10px, which turns radios and checkboxes
       into giant stretched rectangles (see the admin Suspend user UI before
       this fix). Reset them to their native box-model so the circle/check
       renders at the expected size and sits inline with its label. */
    input[type="radio"], input[type="checkbox"] {
      width: auto;
      padding: 0;
      border: none;
      background: transparent;
      border-radius: 0;
      margin-right: 4px;
      flex: 0 0 auto;
    }
    textarea { min-height: 96px; resize: vertical; }
    .input-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.18) inset; }

    .actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .btn { border: 0; border-radius: 10px; padding: 10px 16px; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; background: var(--accent); color: #fff; }
    .btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
    /* Tap target: bumped padding for mobile thumbs (iOS 44px / Android 48dp). */
    .btn.small { padding: 10px 14px; font-size: 0.85rem; min-height: 36px; }
    .btn.warn { background: #9a3412; color: #fff; }
    /* WCAG AA-compliant disabled state: white-on-slate ~5:1 contrast. */
    .btn:disabled { opacity: 1; cursor: not-allowed; color: #fff; background: #94a3b8; border-color: #94a3b8; }
    /* Generic disabled-button styling for buttons styled with inline
       background colors (which override .btn:disabled because inline
       wins specificity). Applies to every <button> regardless of class
       so admin / inline-styled buttons get a clear "I'm disabled" cue.
       pointer-events kept ON so cursor:not-allowed actually shows and
       title="" tooltips ("Already flagged", "Retraction window expired")
       remain reachable. The disabled attribute alone blocks clicks. */
    button:disabled, button[disabled] { opacity: 0.7; cursor: not-allowed; filter: saturate(0.6); }

    .note { border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; line-height: 1.5; }
    .note.good { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
    .note.warn { border-color: #facc15; background: #fef9c3; color: #854d0e; font-weight: 600; }
    .note.bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

    .status-line { margin-top: 8px; font-size: 0.88rem; color: var(--subtle); }
    .error { color: var(--danger); }
    .success { color: var(--good); }

    html, body { height:100%; }
    body { margin:0; background:#f8fafc; overflow:auto; }
    .auth-wrap { min-height:100svh; display:grid; place-items:center; padding:16px; background:#f8fafc; }
    .auth-wrap.landing-mode { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:6px 20px 22px; }
    .auth-wrap.auth-mode { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:12px 16px 24px; }
    /* Flex (not grid) so a single visible card auto-centers regardless
       of how many other cards are hidden. The grid version needed a JS
       class toggle (auth-grid-single) to switch column counts, which
       produced a ~2s flicker on initial paint while the JS caught up.
       With flex + justify-content:center, the visible card sits centered
       from the first render. .auth-grid-single is kept as a no-op alias
       so any callers that toggle the class still work. */
    .auth-grid { width:100%; max-width:1180px; display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; justify-content:center; margin:0 auto; }
    .auth-grid.auth-grid-single { max-width:600px; }
    .auth-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 18px; }
    .landing-card { width: 100%; max-width: 860px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 18px; margin-bottom: 12px; }
    .landing-headline { font-size: 1.72rem; margin-bottom: 8px; }
    .landing-accordion { display: grid; gap: 8px; margin-top: 12px; }
    .landing-toggle { border: 1px solid var(--border); background: #f8fbff; color: var(--text); border-radius: 10px; padding: 10px 12px; text-align: left; cursor: pointer; font-weight: 700; }
    .landing-toggle.active { background: #111827; color: #fff; border-color: #111827; }
    .landing-panel { border: 1px solid var(--border); background: #fbfdff; border-radius: 12px; padding: 12px; }
    .landing-preview-img { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: block; }
    .about-item > summary { list-style: none; cursor: pointer; }
    .about-item > summary::-webkit-details-marker { display: none; }
    .about-item > summary .card-header { position: relative; padding: 12px 14px; padding-right: 30px; }
    .about-item > summary .card-header::after { content: '+'; position: absolute; right: 12px; top: 12px; font-weight: 800; color: var(--subtle); font-size: 18px; }
    .about-item[open] > summary .card-header::after { content: '-'; }
    .about-item > summary:focus { outline: none; }
    .about-item > summary:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 10px; }
    /* FAQ font sizing matched to the surrounding landing-page
       accordions (which use inline font-size:17px / weight:600
       summaries and 15px / line-height:1.62 body via .landing-body-copy).
       The earlier 16px / 14px override made the FAQ smaller than its
       neighbours. !important is needed because .ren-main .card-title
       has equal specificity but comes later in the file. */
    .about-item .card-title { font-size: 17px !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 0 !important; }
    .about-item .card-body { padding: 0 16px 14px !important; }
    .about-item .card-body .small { font-size: 15px !important; line-height: 1.62 !important; color: #0f172a; }
    .about-item .card-header { padding: 14px 16px !important; padding-right: 32px !important; }
    /* Landing FAQ override: same sizing applies inside the landing
       FAQ mount, plus a slightly tighter border + spacing to match
       the landing accordions visually. */
    #landingFaqMount .about-item { border: 1px solid #dbe4ee; border-radius: 10px; margin-bottom: 8px; background: #fff; }
    #landingFaqMount .about-item > summary .card-header { background: #f8fbff; }
    #landingFaqMount .list { display: grid; gap: 8px; }

    .ren-accordion { display: grid; gap: 10px; }
    .ren-accordion-item { border: 1px solid var(--border); border-radius: 10px; background: #fbfdff; overflow: hidden; }
    .ren-accordion-item > summary { list-style: none; cursor: pointer; padding: 12px 40px 12px 14px; font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--text); position: relative; }
    .ren-accordion-item > summary::-webkit-details-marker { display: none; }
    .ren-accordion-item > summary::after { content: '+'; position: absolute; right: 14px; top: 12px; color: var(--subtle); font-weight: 800; font-size: 18px; line-height: 1; }
    .ren-accordion-item[open] > summary::after { content: '-'; }
    .ren-accordion-item > summary:focus { outline: none; }
    .ren-accordion-item > summary:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 10px; }
    .ren-accordion-body { padding: 0 14px 14px; font-size: 14px; line-height: 1.7; color: var(--muted); }

    .email-body { white-space: pre-wrap; background: #fbfdff; border: 1px solid var(--border); padding: 8px; border-radius: 8px; margin-top: 6px; }

    .dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
    .dialog-backdrop.show { display: flex; }
    .dialog { width: 100%; max-width: 920px; max-height: 90vh; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; }
    .dialog-section { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-top: 8px; background: #fbfdff; }

    .protected-inline-viewer-host { display:none; margin-top:14px; margin-bottom:14px; }
    .protected-inline-viewer-host.show { display:block; }
    .protected-viewer-modal { width: min(1360px, 100%); max-width: 100%; background: #fff; border: 1px solid #dbe4ee; border-radius: 18px; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16); overflow: hidden; display: flex; flex-direction: column; }
    .protected-viewer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #dbe4ee; background: #f8fbff; }
    .protected-viewer-title { font-size: 18px; font-weight: 700; color: #0f172a; }
    .protected-viewer-meta { font-size: 13px; color:#0f172a; margin-top: 3px; line-height: 1.55; }
    .protected-viewer-notice { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; padding: 9px 22px; font-size: 13px; line-height: 1.55; }
    /* Allow text selection (visual highlight) inside the protected viewer.
       copy/cut stay blocked at the JS layer, so reviewers can highlight
       passages they want to revisit but can't extract text. */
    .protected-viewer-scroll { height: 520px; overflow-y: auto; overflow-x: hidden; background: #e5e7eb; padding: 10px 18px 16px; user-select: text; -webkit-user-select: text; scroll-behavior: auto; }
    .protected-viewer-scroll::-webkit-scrollbar { width: 10px; }
    .protected-viewer-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
    .protected-viewer-page { position: relative; width: 100%; max-width: 100%; margin: 0 auto 24px; text-align: center; }
    .protected-viewer-page canvas { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12); margin: 0 auto; }
    /* PDF text layer overlay — renders real text positioned to match the
       canvas pixels, so the user can drag-select to highlight passages.
       Spans are color: transparent so visually only the canvas shows; the
       ::selection rule below paints a yellow highlight when text is
       selected. copy + cut still blocked at the JS layer. */
    .protected-viewer-page .textLayer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; opacity: 1; line-height: 1; text-align: left; transform-origin: 0 0; }
    .protected-viewer-page .textLayer > span,
    .protected-viewer-page .textLayer > br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
    /* Highlight uses a soft cyan-tinted blue (rgba(56, 189, 248, 0.55))
       which sits well over both light and slightly tinted PDF pages
       and reads as a deliberate "highlighted" rectangle rather than
       the washed-out yellow that earlier blended into the page. */
    .protected-viewer-page .textLayer ::selection { background: rgba(56, 189, 248, 0.55); color: transparent; }
    .protected-viewer-page .textLayer ::-moz-selection { background: rgba(56, 189, 248, 0.55); color: transparent; }
    .protected-viewer-status { padding: 20px 22px; font-size: 14px; color:#0f172a; }
    .ren-warning-banner { background:#fef9c3; border:1px solid #facc15; color:#854d0e; border-radius:12px; padding:14px 16px; font-size:15px; line-height:1.65; margin-bottom:14px; font-weight:600; box-sizing:border-box; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
    .ren-warning-banner strong { color:#854d0e; }
    .ren-draft-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:4px; }

    .admin-only { display: none; }

    @media (max-width: 1020px) {
      .auth-grid, .grid-2, .grid-3, .grid-4, .fields-grid, .commitments-grid, .profile-layout { grid-template-columns: 1fr; }
    }

    /* REN Design System */
    .ren-pill { display:inline-block;font-size:13px;background:#E6F1FB;color:#185FA5;padding:4px 14px;border-radius:20px;border:1px solid #B5D4F4;font-weight:500;margin-bottom:16px; }
    .ren-title { font-family:Georgia,serif;font-size:28px;font-weight:700;letter-spacing:-0.3px;color:#0f172a; }
    .ren-title .blue { color:#185FA5; }
    .ren-blue { color:#185FA5; }
    .join-title { white-space: normal; overflow-wrap: anywhere; }
    .landing-body-copy { font-size:15px; color:#0f172a; line-height:1.62; }
    .ren-input { width:100%;padding:10px 13px;font-size:15px;border:1px solid #dbe4ee;border-radius:10px;background:#fff;color:#0f172a;font-family:inherit;outline:none;box-sizing:border-box; }
    .ren-input:focus { border-color:#185FA5;box-shadow:0 0 0 2px #E6F1FB; }
    /* Password show/hide toggle. Wrap any password input in
       <div class="ren-pwd-wrap"> ... <button class="ren-pwd-toggle" ...>
       and the eye icon appears on the right. Browsers like Edge auto-add
       their own reveal button via ::-ms-reveal — suppressed here so we
       don't get two icons stacked. The wrap is position:relative + the
       toggle absolutely positioned + the input gets extra right padding
       so typed text never runs under the icon. */
    .ren-pwd-wrap { position:relative; }
    .ren-pwd-wrap > input { padding-right:42px; }
    .ren-pwd-wrap > input::-ms-reveal,
    .ren-pwd-wrap > input::-ms-clear { display:none; }
    .ren-pwd-toggle {
      position:absolute; right:6px; top:50%; transform:translateY(-50%);
      width:32px; height:32px; padding:0; border:none; background:transparent;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      color:#64748b; border-radius:8px;
    }
    .ren-pwd-toggle:hover { color:#185FA5; background:#e6f1fb; }
    .ren-pwd-toggle:focus-visible { outline:2px solid #185FA5; outline-offset:1px; }
    .ren-pwd-toggle svg { width:20px; height:20px; pointer-events:none; }
    .ren-pwd-toggle .icon-hidden { display:none; }
    .ren-pwd-toggle.is-visible .icon-shown { display:none; }
    .ren-pwd-toggle.is-visible .icon-hidden { display:block; }
    .ren-select { width:100%;padding:10px 13px;font-size:15px;border:1px solid #dbe4ee;border-radius:10px;background:#fff;color:#0f172a;font-family:inherit;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23888' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;box-sizing:border-box; }
    .ren-select:focus { border-color:#185FA5;box-shadow:0 0 0 2px #E6F1FB; }
    .ren-label { display:block;font-size:14px;color:#0f172a;margin-bottom:6px;font-weight:500; }
    .ren-field { margin-bottom:16px; }
    .ren-hint { font-size:13px;color:#0f172a;margin-top:5px;line-height:1.55; }
    .ren-card { background:#fff;border:1px solid #dbe4ee;border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,0.08);padding:32px 36px;margin-bottom:16px;width:100%;box-sizing:border-box; }
    /* Auth-card max widths. Login is leaner (just email + password +
       buttons) so 560 keeps it visually tight. Join has many more
       fields and benefits from extra breathing room at 600. Both
       widths are below the .auth-grid 1180-max so two cards side-by-
       side still fit when both are visible. */
    #loginCard { max-width:560px; }
    #joinCard { max-width:600px; }
    #joinCard .ren-field { margin-bottom:0; }
    #joinCard .ren-field .ren-hint { margin-top:0; margin-bottom:0 !important; }
    #joinCard .ren-field > p { margin-bottom:0 !important; }
    .ren-btn-primary { background:#185FA5;color:#fff;border:none;border-radius:10px;padding:10px 24px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap; }
    .ren-btn-secondary { background:#fff;color:#0f172a;border:1px solid #dbe4ee;border-radius:10px;padding:9px 20px;font-size:14px;cursor:pointer;font-family:inherit;white-space:nowrap; }
    .ren-btn-ghost { background:none;border:none;color:#0f172a;font-size:14px;cursor:pointer;font-family:inherit;padding:9px 12px;white-space:nowrap; }
    .ren-btn-ghost:hover { color:#0f172a; }
    .ren-divider { border-top:1px solid #dbe4ee;margin-top:20px;padding-top:18px; }
    .ren-inline-error { font-size:12px;color:#b91c1c;margin-top:4px;display:none; }

    /* Sidebar layout */
    .ren-topbar { display:flex;align-items:center;justify-content:space-between;padding:0 36px;height:72px;background:#fff;border-bottom:1px solid #dbe4ee;flex-shrink:0;position:sticky;top:0;z-index:100; }
    .ren-app-body { display:flex;flex:1;min-height:calc(100vh - 72px); }
    .ren-sidebar { width:300px;min-width:300px;background:#fff;border-right:1px solid #dbe4ee;padding:20px 0 40px;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;position:sticky;top:72px;height:calc(100vh - 72px); }
    .ren-sidebar-heading { padding:20px 26px 7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:#0f172a;margin-top:4px; }
    .ren-sidebar-btn { display:flex;align-items:center;gap:13px;padding:13px 26px 13px 28px;font-size:17px;color:#0f172a;background:none;border:none;border-left:3px solid transparent;text-align:left;cursor:pointer;font-family:inherit;width:100%;line-height:1.35;transition:background 0.1s; }
    .ren-sidebar-btn:hover { background:#f8fbff;color:#0f172a; }
    .ren-sidebar-btn.active { background:#E6F1FB;color:#185FA5;border-left-color:#185FA5;font-weight:600; }
    .ren-sidebar-btn svg { flex-shrink:0;opacity:0.7;width:18px;height:18px; }
    .ren-sidebar-btn.active svg { opacity:1; }
    .ren-sidebar-btn .sidebar-badge { display:none;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:#185FA5;color:#fff;font-size:11px;font-weight:700;border-radius:10px;margin-left:auto;flex-shrink:0; }
    .ren-main { flex:1;padding:36px 44px;overflow-y:auto;background:#f8fbff;min-width:0; }
    /* Mobile responsive layout. Below 768px the fixed-300px sidebar
       consumed 80% of a phone screen, leaving the main content unusable.
       Hide the sidebar by default and surface a hamburger toggle in the
       topbar; tapping it slides the sidebar in as an overlay. Tapping a
       nav button or the backdrop closes it (wired in 11b-handlers-init). */
    @media (max-width: 768px) {
      .ren-topbar { padding: 0 14px; height: 64px; }
      .ren-topbar-title { font-size: 18px !important; }
      .ren-app-body { min-height: calc(100vh - 64px); }
      .ren-sidebar { display: none; }
      .ren-sidebar.mobile-open {
        display: flex;
        position: fixed;
        top: 64px;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 86vw;
        height: calc(100vh - 64px);
        z-index: 95;
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.25);
      }
      #mobileMenuBackdrop.mobile-open { display: block !important; top: 64px !important; }
      /* Hamburger tap target: was ~20px due to padding:6px 10px on the inline
         element. WCAG minimum is 44×44; bump to 44 unconditionally so
         thumb-taps land. Use !important because the inline style on the
         button uses padding:6px 10px which has higher specificity than
         the cascade. */
      #mobileMenuToggle {
        display: inline-flex !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        align-items: center;
        justify-content: center;
      }
      .ren-main { padding: 18px 14px; }
      .ren-main .card { padding: 16px; }
      /* Card padding was 24px 30px / 26px 30px / 32px 36px on desktop —
         on a 320px screen that's 60-72px of horizontal padding, leaving
         < 260px for content. Tighten to 16-18px for narrow widths. */
      .ren-main .card-header { padding: 16px 18px 12px; }
      .ren-main .card-body { padding: 18px 16px; }
      .ren-card { padding: 18px 16px; }
      .ren-main .card-title { font-size: 18px; }
      /* Button tap targets + wrap. .btn.small was 9px 18px ≈ 31px tall.
         Bump to 44px min-height. Allow buttons to wrap text instead of
         overflowing the container at 320px (.ren-btn-* white-space:nowrap
         in the base rules). */
      .btn, .ren-btn-primary, .ren-btn-secondary, .ren-btn-ghost {
        min-height: 44px;
        white-space: normal;
      }
      /* Modals: dialog was padding:16px which overflows on a 320px viewport
         once you add the inner content's own padding. Tighten and ensure
         the modal can't push past viewport edges. */
      .dialog, .protected-viewer-modal { padding: 12px; }
      .protected-viewer-header { padding: 14px 16px; }
      /* iOS Safari auto-zooms on focus when input font-size < 16px. The
         landing/auth `.ren-input` was 15px — bump to 16px so signup +
         login forms don't zoom on iPhone. */
      .ren-input, .ren-select { font-size: 16px; }
    }
    /* Even narrower (small phones, ~360px and below). Cards / dialogs need
       to give back another ~4-6px of padding so the content area is wide
       enough for a typical reviewer Q1-Q8 textarea or a paper title. */
    @media (max-width: 380px) {
      .ren-main { padding: 14px 10px; }
      .ren-main .card { padding: 12px; }
      .ren-main .card-header { padding: 12px 14px 10px; }
      .ren-main .card-body { padding: 14px 12px; }
      .ren-card { padding: 14px 12px; }
      .ren-main .card-title { font-size: 17px; }
      .dialog, .protected-viewer-modal { padding: 10px; }
    }
    /* Admin tabs show one panel at a time — the visible card should take the
       entire grid width instead of being confined to a single grid-2 column. */
    #adminPanelsGrid > .admin-panel-card:not(.hidden) { grid-column: 1 / -1; }
    /* Cleaner accordion styling for the admin Users / Meta flags / Flags for
       assessment lists. Replaces the default <details> marker with a large
       +/− chevron and gives each accordion a bordered, rounded box with a
       light header tint when open. */
    #adminAssessFlagsList details,
    #adminAllFlagsList details,
    #adminUsersList details {
      border: 1px solid #dbe4ee;
      border-radius: 12px;
      background: #fff;
      /* overflow intentionally NOT hidden — the protected PDF viewer mounts
         as a child of the accordion and must extend freely. */
      padding: 0;
      margin-top: 12px;
      box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    }
    #adminAssessFlagsList details > summary,
    #adminAllFlagsList details > summary,
    #adminUsersList details > summary {
      list-style: none;
      cursor: pointer;
      padding: 16px 52px 16px 18px;
      font-weight: 700;
      font-size: 15px;
      color: #0f172a;
      position: relative;
      user-select: none;
      transition: background 0.12s;
    }
    #adminAssessFlagsList details > summary:hover,
    #adminAllFlagsList details > summary:hover,
    #adminUsersList details > summary:hover { background: #f8fbff; }
    #adminAssessFlagsList details > summary::-webkit-details-marker,
    #adminAllFlagsList details > summary::-webkit-details-marker,
    #adminUsersList details > summary::-webkit-details-marker { display: none; }
    #adminAssessFlagsList details > summary::after,
    #adminAllFlagsList details > summary::after,
    #adminUsersList details > summary::after {
      content: '+';
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 22px;
      font-weight: 700;
      color: #185FA5;
      line-height: 1;
    }
    #adminAssessFlagsList details[open] > summary::after,
    #adminAllFlagsList details[open] > summary::after,
    #adminUsersList details[open] > summary::after { content: '−'; }
    #adminAssessFlagsList details[open] > summary,
    #adminAllFlagsList details[open] > summary,
    #adminUsersList details[open] > summary {
      border-bottom: 1px solid #dbe4ee;
      background: #EFF3F7;
    }
    #adminAssessFlagsList details > *:not(summary),
    #adminAllFlagsList details > *:not(summary),
    #adminUsersList details > *:not(summary) { padding: 0 18px; }
    #adminAssessFlagsList details > *:not(summary):first-of-type,
    #adminAllFlagsList details > *:not(summary):first-of-type,
    #adminUsersList details > *:not(summary):first-of-type { padding-top: 14px; }
    #adminAssessFlagsList details > *:not(summary):last-child,
    #adminAllFlagsList details > *:not(summary):last-child,
    #adminUsersList details > *:not(summary):last-child { padding-bottom: 16px; }
    /* Nested accordions inside these admin lists (e.g. reviewer reports /
       meta review inside a paper accordion) should look subtly different
       so the nesting is visible. */
    #adminAssessFlagsList details details,
    #adminAllFlagsList details details {
      background: #f8fbff;
      box-shadow: none;
      margin-top: 10px;
    }
    #adminAssessFlagsList details details > summary,
    #adminAllFlagsList details details > summary {
      padding: 12px 44px 12px 16px;
      font-size: 14px;
    }
    #adminAssessFlagsList details details[open] > summary,
    #adminAllFlagsList details details[open] > summary { background: #e6f1fb; }
    .review-quality-notice { background:#EFF3F7;border-left:4px solid #185FA5;padding:18px 20px;margin:14px 0 18px;line-height:1.78;border-radius:0 10px 10px 0;font-size:15px;color:#1e293b; }
    .review-q-label { font-size:17px;font-weight:700;color:#0f172a;margin-bottom:6px;line-height:1.45; }
    .review-q-hint { font-size:14px;color:#0f172a;font-style:italic;margin-bottom:8px;line-height:1.72; }
    .question-accordion { background:#f8fbff;border:1px solid #dbe4ee;border-radius:12px;overflow:visible;margin-bottom:12px; }
    .question-accordion summary { list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;font-weight:700;color:#0f172a; }
    .question-accordion summary::-webkit-details-marker { display:none; }
    .question-accordion .question-accordion-title { flex:1; }
    .question-accordion .question-accordion-toggle { font-size:12px;color:#0f172a;font-weight:600;white-space:nowrap; }
    .question-accordion-body { padding:0 16px 16px 16px; }
    .question-accordion-body label { display:block;font-size:16px;font-weight:700;color:#0f172a;margin-bottom:6px;line-height:1.5; }
    .ren-sidebar-btn .sidebar-badge.visible { display:inline-flex; }
    #adminPanelTabs .admin-panel-tab.active { background:#185FA5 !important;color:#fff !important;border-color:#185FA5 !important;font-weight:600 !important; }
    #adminPanelTabs .admin-panel-tab:hover:not(.active) { background:#f8fbff !important;color:#0f172a !important; }

    /* Unified inner page styling */
    .ren-main .card { background:#fff;border:1px solid #dbe4ee;border-radius:14px;box-shadow:0 2px 12px rgba(15,23,42,0.05);margin-bottom:22px;overflow:hidden; }
    .ren-main .card-header { padding:24px 30px 16px;border-bottom:1px solid #dbe4ee;background:#fff; }
    .ren-main .card-title { font-size:20px;font-weight:700;color:#0f172a;margin-bottom:3px; }
    .ren-main .card-desc { font-size:15px;color:#0f172a;line-height:1.55; }
    .ren-main .card-body { padding:26px 30px; }
    .ren-main .card-body.form { display:grid; gap:18px; }
    .ren-main .card-body label { font-size:15px; color:#0f172a; font-weight:500; margin-bottom:6px; display:block; }
    .ren-main .card-body input[type=text], .ren-main .card-body input[type=email], .ren-main .card-body input[type=url], .ren-main .card-body input[type=password], .ren-main .card-body input[type=number], .ren-main .card-body textarea, .ren-main .card-body select { width:100%;padding:11px 15px;font-size:16px;border:1px solid #dbe4ee;border-radius:9px;background:#fff;color:#0f172a;font-family:inherit;outline:none;box-sizing:border-box; }
    .ren-main .card-body input:focus, .ren-main .card-body textarea:focus, .ren-main .card-body select:focus { border-color:#185FA5; box-shadow:0 0 0 3px #E6F1FB; }
    .ren-main .card-body input[readonly] { background:#f8fbff; cursor:default; }
    .ren-main .card-body textarea { min-height:120px; resize:vertical; line-height:1.65; }
    #commitments .card-body.form label, #meta .card-body.form label { font-size: 17px; line-height: 1.45; font-weight: 700; color: #0f172a; }
    #commitments .card-body.form textarea, #meta .card-body.form textarea, #meta .card-body.form select { font-size: 17px; line-height: 1.7; padding: 14px 16px; }
    #commitments .card-body.form textarea, #meta .card-body.form textarea { min-height: 150px; }
    #commitments .card-body.form .word-min-hint, #meta .card-body.form .word-min-hint, #meta .card-body.form .word-min-hint-inline, #commitments .card-body.form .tiny, #meta .card-body.form .tiny { font-size: 14px; line-height: 1.55; }
    #commitments .card-body.form .note, #meta .card-body.form .note, #metaSelectedPaperInfo, #reviewAssignmentHint { font-size: 15px; line-height: 1.6; }
    .task-assignment-picker { margin-bottom: 14px; padding: 14px 16px; border: 1px solid #dbe4ee; border-radius: 12px; background: #f8fbff; }
    .task-assignment-picker label { margin-bottom: 8px; }
    .task-selected-paper-card { margin-bottom: 16px; padding: 14px 16px; border: 1px solid #dbe4ee; border-radius: 12px; background: #ffffff; }
    .task-selected-paper-card .title { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
    .task-selected-paper-card .meta { font-size: 14px; color:#0f172a; line-height: 1.55; }
    .task-list-item-selected { border-color:#B5D4F4 !important; background:#F8FBFF !important; box-shadow: inset 0 0 0 1px rgba(24,95,165,0.04); }
    .task-selected-pill { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; font-size:12px; font-weight:700; padding:6px 10px; min-width:78px; border-radius:999px; background:#E6F1FB; color:#185FA5; border:1px solid #B5D4F4; line-height:1; }
    .task-select-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-end; flex-shrink:0; min-width:96px; }
    #commitments .card-body.form, #meta .card-body.form { gap:16px; }
    #commitments .card-body.form > div, #meta .card-body.form > div { margin-bottom:4px; }
    #commitments .card-body.form label, #meta .card-body.form label { font-size:17px; font-weight:700; line-height:1.5; color:#0f172a; }
    #commitments .card-body.form textarea, #meta .card-body.form textarea { min-height:150px; font-size:16px; line-height:1.72; padding:14px 15px; }
    #commitments .card-body.form select, #meta .card-body.form select { font-size:15px; padding:12px 13px; }
    #commitments .card-body.form .tiny, #meta .card-body.form .tiny { font-size:13px; line-height:1.6; }
    .task-form-question { background:#fbfdff; border:1px solid #dbe4ee; border-radius:14px; padding:16px 18px; box-shadow:0 1px 2px rgba(15,23,42,0.03); }
    .task-form-question textarea { margin-top:8px; }
    .task-assignment-summary { background:#f8fbff; border:1px solid #cfe1f6; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
    .task-assignment-summary .title { font-size:17px; font-weight:700; color:#0f172a; margin-bottom:4px; }
    .task-assignment-summary .meta { font-size:14px; color:#0f172a; line-height:1.65; }
    .meta-grade-card { background:#ffffff; border:1px solid #dbe4ee; border-radius:12px; padding:16px; position:relative; z-index:2; overflow:visible; }
    .meta-grade-card label { display:block; margin-bottom:6px; }
    .meta-grade-score { position:relative; z-index:3; pointer-events:auto; -webkit-appearance:menulist; appearance:menulist; background-color:#fff; }
    .meta-grade-score:disabled { pointer-events:none; }
    .meta-grade-justification { position:relative; z-index:2; }
    .question-accordion-body, .meta-review-accordion-body { overflow:visible; }
    .ren-main .card-body .btn { padding:11px 24px;border-radius:9px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;border:none;background:#185FA5;color:#fff; }
    .ren-main .card-body .btn.secondary { background:#fff; color:#0f172a; border:1px solid #dbe4ee; font-weight:500; }
    .ren-main .card-body .btn.warn { background:#fff; color:#b91c1c; border:1px solid #fca5a5; font-weight:500; }
    .ren-main .card-body .btn.small { padding:9px 18px; font-size:14px; }
    .ren-main .note { background:#EFF3F7; border-left:3px solid #185FA5; border-radius:0 8px 8px 0; padding:14px 18px; font-size:15px; color:#0f172a; line-height:1.6; }
    .ren-main .note.bad { background:#FEF2F2; border-left-color:#ef4444; color:#7f1d1d; }
    .ren-main .note.warn { background:#fef9c3; border-left-color:#facc15; color:#854d0e; font-weight:600; }
    .ren-main .note.good { background:#F0FDF4; border-left-color:#22c55e; color:#14532d; }
    .ren-main .status-line { font-size:15px; margin-top:8px; }
    /* Add icon prefix + weight so colorblind users (~8% of men) can
       distinguish success/error states without relying on red/green
       color alone. WCAG 1.4.1 (Use of Color). */
    .ren-main .status-line.success { color:#15803d; font-weight:600; }
    .ren-main .status-line.success:not(:empty)::before { content:"✓ "; }
    .ren-main .status-line.error { color:#b91c1c; font-weight:600; }
    .ren-main .status-line.error:not(:empty)::before { content:"⚠ "; }
    .ren-main .item { padding:14px 0; border-bottom:1px solid #f1f5f9; }
    .ren-main .item:last-child { border-bottom:none; }
    .ren-main .item .small { font-size:15px; color:#0f172a; line-height:1.65; }
    .ren-main .item .tiny { font-size:13px; color:#0f172a; line-height:1.5; margin-top:3px; }
    .ren-main .actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding-top:6px; }
    .ren-main .commitments-grid { display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:20px; align-items:start; }
    #commitments .commitments-grid,
    #meta .commitments-grid,
    #packets .commitments-grid,
    #unlocked .commitments-grid,
    #past .commitments-grid { grid-template-columns:minmax(0,1fr); }
    #commitments .commitments-grid > .card:first-child,
    #meta .commitments-grid > .card:first-child,
    #packets .commitments-grid > .card:first-child,
    #unlocked .commitments-grid > .card:first-child,
    #past .commitments-grid > .card:first-child { display:none; }
    @media(max-width:1100px){
      .ren-main .commitments-grid { grid-template-columns:1fr; }
    }
    .task-context-card { background:#fbfdff; border:1px solid #dbe4ee; border-radius:14px; padding:16px 18px; box-shadow:0 1px 2px rgba(15,23,42,0.03); margin-bottom:14px; }
    .task-context-card .title { font-size:17px; font-weight:700; color:#0f172a; margin-bottom:6px; }
    .task-context-card .meta { font-size:14px; color:#0f172a; line-height:1.6; margin-bottom:12px; }
    .task-context-accordion { display:grid; gap:10px; }
    .task-context-accordion details { border:1px solid #dbe4ee; border-radius:12px; background:#fff; overflow:hidden; }
    .task-context-accordion summary { list-style:none; cursor:pointer; padding:14px 16px; font-size:15px; font-weight:700; color:#0f172a; display:flex; justify-content:space-between; align-items:center; background:#f8fbff; }
    .task-context-accordion summary::-webkit-details-marker { display:none; }
    .task-context-panel { padding:14px 16px 16px; }
    .task-context-answer { font-size:14px; color:#0f172a; white-space:pre-wrap; line-height:1.7; background:#f8fbff; border:1px solid #dbe4ee; border-radius:8px; padding:10px 12px; }
    .task-context-question { margin-bottom:16px; }
    .task-context-question:last-child { margin-bottom:0; }
    .task-context-question .q-label { font-size:14px; font-weight:700; color:#0f172a; margin-bottom:4px; }
    .task-context-question .q-hint { font-size:13px; color:#0f172a; font-style:italic; line-height:1.6; margin-bottom:6px; }
    .ren-main .profile-layout { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
    @media(max-width:900px){ .ren-main .profile-layout { grid-template-columns:1fr; } }
    .ren-metrics-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px; }
    @media(max-width:1200px){ .ren-metrics-grid { grid-template-columns:repeat(2,1fr); } }

    /* Shell isolation hardening */
    body.ren-shell-auth, body.ren-shell-app { overflow:hidden; }
    #loginView { position:relative; width:100%; min-height:100dvh; z-index:20; overflow-y:auto; overflow-x:hidden; }
    #appView { position:fixed; inset:0; width:100%; min-height:100dvh; z-index:10; }
    /* Allow text selection throughout the app; restrict only sensitive sections below. */
    #appView { user-select:none; -webkit-user-select:none; }
    #appView * { user-select:text; -webkit-user-select:text; }
    #appView input,
    #appView textarea,
    #appView select,
    #appView option,
    #appView [contenteditable=""],
    #appView [contenteditable="true"] {
      user-select:text;
      -webkit-user-select:text;
    }
    /* Protected PDF viewer: text selection (visual highlight) IS allowed.
       Reviewers asked for the ability to highlight passages they want to
       revisit. copy + cut stay blocked at the JS layer. */
    .protected-viewer-scroll,
    .protected-viewer-scroll * { user-select: text !important; -webkit-user-select: text !important; }
    /* Restricted sections: unlocked reviews, review tasks, meta tasks, completed tasks.
       Text selection (copying) is blocked. Paste into inputs is blocked via JS. */
    #unlocked, #commitments, #meta, #completed {
      user-select:none; -webkit-user-select:none;
    }
    /* Within restricted sections, inputs/textareas stay typeable but paste is blocked via JS. */
    #unlocked input, #unlocked textarea, #unlocked select,
    #commitments input, #commitments textarea, #commitments select,
    #meta input, #meta textarea, #meta select,
    #completed input, #completed textarea, #completed select {
      user-select:text; -webkit-user-select:text;
    }
    #loginView.hidden, #appView.hidden { display:none !important; }
    #loginView.landing-mode { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 20px; }
    #loginView.auth-mode {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
    }
    #loginAuthGrid {
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
    }
    #loginView #landingGate, #loginView #loginAuthGrid, #loginView #loginPublicReadView, #loginView #passwordResetCard { flex:0 0 auto; }
    /* CSS-level enforcement: auth-mode MUST hide landing gate, landing-mode MUST hide auth grid.
       This prevents JS race conditions from leaving both visible or neither visible. */
    #loginView.auth-mode #landingGate { display:none !important; }
    #loginView.auth-mode #landingGate > div:nth-last-child(2),
    #loginView.auth-mode #landingGate > div:last-child {
      display: none !important;
    }
    #loginView.landing-mode #loginAuthGrid { display:none !important; }
    #loginView.landing-mode #landingGate > div:first-child { font-size:19px !important; }
    #loginView.landing-mode #landingGate > div:nth-child(2) { font-size:20px !important; }
    #loginView.landing-mode #landingGate button[onclick*="rnToggleAcc"] { font-size:16px !important; }
    #loginView.landing-mode #landingGate .question-accordion summary { font-size:16px; }
    #loginView.landing-mode #landingGate .question-accordion-body,
    #loginView.landing-mode #landingGate .review-q-hint { font-size:15px; }
    #appView:not(.hidden) { display:flex; flex-direction:column; }

    .meta-review-accordion { border:1px solid #dbe4ee; border-radius:12px; background:#fff; margin-top:12px; overflow:visible; }
    .meta-review-accordion > summary { list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; font-size:18px; color:#0f172a; display:flex; align-items:center; justify-content:space-between; }
    .meta-review-accordion > summary::-webkit-details-marker { display:none; }
    .meta-review-accordion > summary::after { content:'+'; color:#0f172a; font-weight:800; font-size:20px; }
    .meta-review-accordion[open] > summary::after { content:'−'; }
    .meta-review-accordion-body { padding:0 16px 16px; border-top:1px solid #dbe4ee; }


@keyframes spin{to{transform:rotate(360deg)}}