/* ============================================================================
   MEMBER PANEL - Cleaned for new architecture
   ============================================================================ */

/* ============================================================================
   STATUS MESSAGE
   ============================================================================ */

.member-status-message {
  position: fixed;
  top: calc(var(--safe-top, 0px) + 20px);
  left: 50%;
  transform: translate(-50%, -10px);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: var(--layer-dialog);
  font-size: 14px;
}

.member-status-message--error {
  background: #c62828;
  color: #fff;
}

.member-status-message--success {
  background: #2ea060;
  color: #fff;
}

.member-status-message--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================================
   REGISTER TAB (PAID REGISTRATION)
   ============================================================================ */

/* Register tab panel */
#member-tab-register {
  /* No gap - elements use margin-bottom: 10px */
}

.member-supporter-message {
  margin: 0 0 10px 0;
  color: #ddd;
  font-size: 13px;
  line-height: 1.35;
  /* Typed line breaks stand (operator 2026-09-17): admin messages read as
     typed, no tags needed. */
  white-space: pre-line;
}

/* The supporter amount presets and custom box were removed 2026-10-15 (one flat
   registration_price, operator 06:19); their rules went with them. */


.member-supporter-join-toggle {
  margin: 0 0 10px 0;
  height: 44px;
  border-color: rgba(59, 130, 245, 0.6);
}

.member-registrationform-container > * {
  margin-bottom: 10px;
}

.member-registrationform-container .member-panel-field-label {
  margin-bottom: 10px;
}

.member-registrationform-fieldsets {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============================================================================
   PANEL BASE
   ============================================================================ */

.member-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: transparent;
  display: none;
  z-index: var(--layer-panel);
  pointer-events: none;
}

.member-panel--show {
  display: block;
}

/* ============================================================================
   PANEL CONTENT
   ============================================================================ */

.member-panel-contents {
  position: absolute;
  left: auto;
  right: 0;
  top: calc(var(--header-h) + var(--safe-top));
  bottom: auto;
  width: min(440px, 100%);
  max-width: 100%;
  height: var(--panel-area-height, calc((var(--vh, 1vh) * 100) - var(--header-h) - var(--safe-top) - var(--footer-h)));
  max-height: var(--panel-area-height, calc((var(--vh, 1vh) * 100) - var(--header-h) - var(--safe-top) - var(--footer-h)));
  min-height: var(--panel-area-height, calc((var(--vh, 1vh) * 100) - var(--header-h) - var(--safe-top) - var(--footer-h)));
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  /* PANEL LAYER ANIMATION — driven by the PANEL LAYER FUNCTIONS LIST (index.js
     screenlayerOpen/screenlayerClose). Never animate this layer directly or add a
     competing transition here; all open/close animation control lives THERE. */
  transition: transform var(--panel-transition-duration, 0.3s) ease;
  will-change: transform;
  box-sizing: border-box;
  /* TRANSLUCENT like the post/history panels (operator 2026-08-13: the map
     shows through; admin stays opaque, filter cannot — it crosses text).
     The recipe is the post panel's own (post.css .post-panel-content). */
  background: rgba(0, 0, 0, var(--bg-opacity, 0.6));
  color: #fff;
}

/* Mobile animates at the shared navigation speed (DEBUG no-motion rule
   removed 2026-07-05, operator-decided). */

.member-panel-contents--side-left {
  transform: translateX(-100%);
}

.member-panel-contents--side-right {
  transform: translateX(100%);
}

.member-panel-contents--hidden {
  pointer-events: none;
}

.member-panel-contents--visible {
  pointer-events: auto;
  transform: translateX(0);
}

/* Mobile is the SAME below-header box as desktop (the body-header divide,
   operator 2026-07-22: nothing inside the body can ever go above the header)
   — only the width differs. The old in-flow flattening is gone with the
   body-scroll architecture. */
@media (max-width: 530px) {
  .member-panel-contents {
    width: 100%;
    max-width: 100%;
  }
}

/* Internal-scroller behavior (core rule, 2026-07-06; UNIVERSAL since
   2026-07-22 — mobile panels are the same below-header boxes as desktop):
   these are real internal scrollers — contain stops scrolls chaining out, and
   the header pins while the body scrolls beneath it (same rule as filter.css /
   admin.css). */
.member-panel-contents,
.member-panel-body {
  overscroll-behavior: contain;
}
.member-panel-header {
  position: sticky;
  top: 0;
}

/* ============================================================================
   PANEL HEADER
   ============================================================================ */

.member-panel-header {
  /* relative (containing block for absolute children); sticky is DESKTOP-ONLY
     — see the min-width block below the mobile rules. */
  position: relative;
  /* Bleeds edge-to-edge for the shy background; content inset by its own padding
     (operator 2026-08-17): title 20px left, X 10px before the gutter — the
     superlocation header's spacing so a background colour never touches the edge.
     L20/R10 combine with the -10px bleed below. */
  padding: 10px 10px 10px 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* No drag cursor: the member panel is no longer draggable (operator
     2026-07-14) — see initHeaderDrag in member.js. */
  /* Transparent since 2026-08-13 (the panel went translucent): the one
     panel surface shows through — the post panel header overlay's own
     no-background pattern (post.css). Content never passes behind this
     header (it sits above the scroller on desktop; on mobile it scrolls
     away as plain chrome), so no band is needed. */
  background: transparent;
}

/* ...EXCEPT while revealed as a shy header (operator 2026-08-13: text on
   text — the list read straight through it). The panel's surface lives on
   the contents element, so this header must supply its own for the moment
   it floats over content — the shy family's --revealed band that every
   other panel already gets from base.css. Two classes beat the transparent
   rule above; the light skin is in themes.css. */
.member-panel-header.panelchrome-shyheader--revealed {
  background: var(--panel-bg);
}

/* MOBILE in-scroller geometry (operator 2026-08-13, one rule for all panels;
   same block as admin.css): the panel chrome placement registry (index.js)
   has moved the header inside .member-panel-body, so it counters the body's
   side padding to stay flush. Body padding-top is already 0 here, so no gap
   compensation is needed. Desktop never matches this query. AFTER the main
   block above so the cascade lets it win. */
/* -10px bleed BOTH sides (operator 2026-08-24): the right bleed spans the
   scrollbar gutter so the X aligns with the admin header's (pinned outside
   the scroller, full panel width); the 10px right padding keeps the X clear
   of the scrollbar. WAS left-only, which parked the member X 10px left of
   the admin X. */
.member-panel-body > .member-panel-header {
  margin: 0 -10px 0 -10px;
}

.member-panel-header > * {
  margin-bottom: 10px;
}

.member-panel-header > *:last-child {
  margin-bottom: 0;
}

.member-panel-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.member-panel-header-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   PANEL ACTIONS
   ============================================================================ */

.member-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  /* 8px between buttons, copied from .admin-panel-actions (admin.css) — its twin
     panel and the site's chosen standard for panel action rows (operator
     2026-08-17). The injected shy-header Top button lands in this row beside the
     X (index.js ensurePanelChromeShyTopButton), so their spacing is this row's
     own gap. Without it Top and X sat flush. */
  gap: 8px;
}

.member-panel-actions-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.member-panel-actions-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.member-panel-actions-icon-btn-icon {
  width: 30px;
  height: 30px;
  background-color: #fff;
  opacity: 1;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.member-panel-actions-icon-btn-icon--save {
  -webkit-mask-image: var(--ui-icon-save);
  mask-image: var(--ui-icon-save);
}

.member-panel-actions-icon-btn-icon--discard {
  -webkit-mask-image: var(--ui-icon-discard);
  mask-image: var(--ui-icon-discard);
}

.member-panel-actions-icon-btn-icon--close {
  /* 24px (operator 2026-08-29 — panel X icons match the post-header X). */
  width: 24px;
  height: 24px;
  -webkit-mask-image: var(--ui-icon-close);
  mask-image: var(--ui-icon-close);
}

.member-panel-actions-icon-btn--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.member-panel-actions-icon-btn-icon--disabled {
  background-color: #888;
}

.member-panel-actions-icon-btn-icon--save-enabled {
  background-color: #22c55e;
}

.member-panel-actions-icon-btn--save-enabled:hover {
  background: rgba(34, 197, 94, 0.15);
}

.member-panel-actions-icon-btn-icon--save-enabled-hover {
  background-color: #4ade80;
}

.member-panel-actions-icon-btn-icon--discard-enabled {
  background-color: #ef4444;
}

.member-panel-actions-icon-btn--discard-enabled:hover {
  background: rgba(239, 68, 68, 0.15);
}

.member-panel-actions-icon-btn-icon--discard-enabled-hover {
  background-color: #f87171;
}

.member-panel-actions-icon-btn--close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.member-panel-actions-primary {
  background: var(--button-selected-bg, var(--btn-selected));
  border-color: var(--button-selected-border, var(--button-selected-bg, var(--btn-selected)));
  color: var(--button-selected-text, var(--button-active-text));
}

.member-panel-actions-primary:hover {
  background: var(--button-selected-hover, var(--btn-selected-hover));
  border-color: var(--button-selected-hover-border, var(--button-selected-hover, var(--btn-selected-hover)));
  color: var(--button-selected-hover-text, var(--button-selected-text, var(--button-active-text)));
}

.member-panel-actions-discard--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   PANEL BODY
   ============================================================================ */

.member-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
}

/* Bottom slack is provided by `.bottomSlack` elements. */

/* IMPORTANT: panel bodies are flex columns; prevent children shrinking so bottom slack
   always creates real overflow/scroll (especially for short tabs like logged-in Profile). */
.member-panel-body > * {
  flex-shrink: 0;
}


/* Smooth scrollbar resize: fade thumb during spacer/lock transitions */
.member-panel-body.panel-scrollbar-fade {
  scrollbar-color: transparent transparent;
}

.member-panel-body-item {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  min-width: 0;
}

.member-panel-body-item--last {
  margin-bottom: 0;
}

.member-panel-form {
  padding: 10px 10px 0;
}

/* ============================================================================
   PANEL FIELD
   ============================================================================ */

.member-panel-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

/* Last child keeps margin-bottom to provide container bottom spacing */

.member-panel-field[hidden] {
  display: none;
}

.member-panel-field-label {
  display: block;
  text-align: left;
  /* 10px label-to-element gap form-wide (operator law 2026-09-08,
     approved after trial; was 6px) — every member.css label rule follows. */
  margin-bottom: 10px;
  font-size: 13px;
  /* Theme token (2026-09-08): the hardcoded 0.85 white left the editor'''s
     Subcategory picker label invisible in light theme (no light twin
     existed anywhere for this class). */
  color: var(--text-primary);
  font-weight: 500;
}

.member-panel-field-label--alt {
  color: var(--panel-label-color);
}

.member-settings-field-label {
  display: block;
  text-align: left;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: normal;
}

/* Settings group container (2026-08-19: wears container-class-3 again — the
   filter panel's visible box — one around the global switches + Post
   Interaction, one around the theme visuals). */
.member-style-container {
  width: 100%;
  margin: 0 auto 12px auto;
}

.member-style-container > .member-panel-field {
  margin-bottom: 10px;
}

.member-style-container > .member-panel-field > .member-settings-field-label {
  margin-bottom: 10px;
}

/* Theme visuals plain header (2026-08-19: the accordion is gone; its title
   text survives as this header — member.js still retitles it Light/Dark) */
.member-themesettings-header-text {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}

/* Switch rows (Full Screen / Post Overlay / Satellite Map / 3D Globe):
   label left, switch right — same 36px row shape as row-class-1 (base.css)
   and the filter panel's Show Expired Events row. */
.member-panel-field:has(> .switch-class-2) {
  flex-direction: row;
  align-items: center;
  height: 36px;
}

.member-panel-field:has(> .switch-class-2) > .member-settings-field-label {
  flex: 1;
  margin-bottom: 0;
}

.member-theme-section[hidden] {
  display: none;
}

.member-theme-reset {
  width: 100%;
}

/* member-preferences-container removed (no language/currency filters) */

/* Lighting/Style/Wallpaper buttons use toggle-class-1 from base.css */
.member-lighting-buttons,
.member-wallpaper-buttons,
.member-postinteraction-buttons {
  grid-template-columns: repeat(4, 1fr);
}

/* Mobile: Orbit spins up a live WebGL map that pushes iOS Safari past its memory
   ceiling and crashes the tab, so orbit is removed on phones and the wallpaper
   switch drops to three genuine options (Off / Still / Basic). */
@media (max-width: 530px) {
  .member-wallpaper-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
  .member-wallpaper-buttons .member-wallpaper-button[data-wallpaper="orbit"] {
    display: none;
  }
}
/* Touchscreens too (operator 2026-09-16): any device whose main input is a
   finger — iPads included, any width — drops Orbit the same way. Twin of the
   JS test (member.js syncMemberThemePreferenceUi, components.js
   getWallpaperMode): hover:hover + pointer:fine = a mouse device. */
@media not all and (hover: hover) and (pointer: fine) {
  .member-wallpaper-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
  .member-wallpaper-buttons .member-wallpaper-button[data-wallpaper="orbit"] {
    display: none;
  }
}

.member-lighting-button-icon {
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: block;
  opacity: 0;
}

.member-theme-buttons {
  grid-template-columns: repeat(3, 1fr);
}

.member-bgopacity-buttons {
  grid-template-columns: repeat(4, 1fr);
}

.member-panel-field-title {
  color: var(--panel-title-color);
  font-size: var(--panel-title-size);
}

.member-panel-field-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
}

.member-panel-field-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--input-text, #fff);
  font-size: 14px;
}

/* ============================================================================
   TINY BUTTON (Logout button)
   ============================================================================ */

.member-tiny-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--btn);
  cursor: pointer;
  border: 1px solid var(--btn);
}

.member-tiny-btn--disabled {
  background: var(--btn-disabled);
  border-color: var(--btn-disabled);
  color: var(--button-disabled-text);
  cursor: not-allowed;
  opacity: 0.6;
}

.member-tiny-btn-icon {
  width: 18px;
  height: 18px;
}

/* ============================================================================
   BUTTON STYLES
   ============================================================================ */

.member-button-auth {
  background: var(--blue-500);
  border: 1px solid var(--blue-500);
  color: #ffffff;
  font-size: 14px;
  padding: 0 10px;
  height: var(--control-h);
  min-height: var(--control-h);
  min-width: 35px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .05s;
}

.member-button-auth:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #ffffff;
}

.member-button-auth:active {
  background: var(--blue-600);
  border-color: var(--blue-500);
  color: #ffffff;
  transform: scale(0.97);
}

.member-button-auth--disabled {
  background: var(--btn-disabled);
  border-color: var(--btn-disabled);
  color: var(--button-disabled-text);
  cursor: not-allowed;
  opacity: 0.6;
}


/* ============================================================================
   REGISTER TAB: PAYMENT BUTTONS
   ============================================================================ */

/* ============================================================================
   INPUT STYLES
   ============================================================================ */

.member-input-text {
  font: inherit;
  caret-color: auto;
  -webkit-user-select: text;
  user-select: text;
  height: var(--control-h);
  border-radius: 8px;
}

.member-input-text::placeholder {
  color: var(--placeholder-text);
  font-size: inherit;
}

.member-input-dropdown {
  font: inherit;
  background: var(--dropdown-bg);
  color: var(--dropdown-text);
  border-radius: var(--dropdown-radius);
  height: var(--control-h);
}

/* ============================================================================
   TAB BAR
   ============================================================================ */

.member-tab-bar {
  display: flex;
  gap: 6px;
  /* NO side margins (operator 2026-08-17): the bar sits inside the padded
     .member-panel-body, whose 10px left padding places it at 10px and whose
     right side (gutter on Windows / 10px on overlay) places its right edge.
     The old 10px side margins double-inset it to 20px. */
  margin: 0 0 10px;
}

/* (Kept for parity; the main rule above now applies the same at every width.) */
@media (max-width: 530px) {
  .member-panel-body > .member-tab-bar {
    margin: 0 0 10px;
  }
}
.member-tab-bar > * {
  flex: 1;  /* Children fill space equally */
}

/* Settings tab = the cog (operator 2026-09-10): four worded tabs no longer
   fit the 420px bar beside "Post Manager", and everybody reads a cog. A
   36px button-class-2 square at the far right — it MUST stay button-class-2:
   the tab bar wires clicks and aria-selected only to that class (member.js
   cacheDom, '.member-tab-bar > .button-class-2'). The three worded tabs
   share the rest. Glyph = the site's currentColor mask recipe (fieldsets.css
   ~760) on the admin-pickable icon_settings image (--ui-icon-settings). */
.member-tab-bar > .member-tab-settings {
  flex: 0 0 36px;
  width: 36px;
  padding: 0;
}

.member-tab-settings-glyph {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-settings);
  mask-image: var(--ui-icon-settings);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Member tab buttons: .member-tab-[name]-button-class-2 (e.g., member-tab-profile-button-class-2) */

/* ============================================================================
   TAB CONTENTS
   ============================================================================ */

.member-tab-contents {
  display: none;
}

.member-tab-contents--active {
  display: block;
  min-height: 0;
}

/* ============================================================================
   MEMBER FORM CONTAINER
   ============================================================================ */

.member-form {
  display: flex;
  flex-direction: column;
  margin-bottom: 100px;
}

.member-form > * {
  margin-bottom: 10px;
}

.member-form > *:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   MEMBER CREATE STYLES
   ============================================================================ */

/* Still worn by renderConfiguredFields' empty-subcategory placeholder
   (member.js ~3630) — the Create tab's "Loading categories" use is gone. */
.member-create-intro {
  margin: 0 0 10px 0;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.member-create-intro--error {
  color: #ff6b6b;
}

.member-create-selects {
  display: flex;
  flex-wrap: wrap;
}

.member-create-selects > * {
  margin-right: 12px;
  margin-bottom: 10px;
}

.member-create-selects > *:last-child {
  margin-right: 0;
}

.member-create-field {
  margin: 0 0 10px 0;
}

.member-create-select {
  max-width: 240px;
}

.member-create-placeholder {
  margin: 4px 0 0;
  font-style: italic;
  opacity: 0.8;
}

.member-postform-fieldsets {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* THE BRANCHING LINE (operator 2026-09-11): one-pixel edge-to-edge rule
   between the post's fieldsets and the per-location fieldsets - the
   Posting Options heading's own line (postmanager.css ~879): --border
   token (light-safe), -10px side bleed counters the scroller's padding,
   30px above it (the primary container's bottom margin), 12px below to
   the Locations summary (operator 2026-09-11). */
.member-postform-locationsdivider {
  border-top: 1px solid var(--border);
  margin: 0 -10px 12px;
}

/* Form header under the form picker: "{Subcategory} Form" (operator
   2026-08-24). Label above its element → 6px bottom (10-12-6 rule). */
.member-postform-formheader {
  /* Subcategory-colored bar (background set inline from the subcategory
     color), centered white title in BOTH themes. 36px = the site bar height
     (.member-postform-location-header, formbuilder.css); 12px below to the
     first fieldset (sibling-container rule). */
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Edge to edge: -10px side bleed counters the scroller's side padding
     (operator 2026-08-24; side counter technique, admin.css ~285). */
  margin: 0 -10px 12px;
  padding: 0 10px;
  /* Square corners — rounded reads as a button (operator 2026-08-24). */
  border-radius: 0;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.member-create-price-row {
  display: flex;
  flex-wrap: wrap;
}

.member-create-price-row > * {
  margin-right: 8px;
  margin-bottom: 8px;
}

.member-create-price-row > *:last-child {
  margin-right: 0;
}

.member-create-price-row-select {
  flex: 1 1 120px;
  min-width: 120px;
}

.member-create-price-row-input {
  flex: 1 1 120px;
  min-width: 120px;
}

.member-checkout-actions-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 10px;
}

.member-checkout-actions-container > * {
  margin-bottom: 10px;
}

.member-checkout-actions-container > *:last-child {
  margin-bottom: 0;
}

/* Payment submit button styles moved to components.css (PaymentSubmitComponent) */

/* Incomplete-list popover (shown on hover over disabled submit area) */
.member-missing-popover {
  position: absolute;
  right: 0;
  bottom: 42px;
  min-width: 220px;
  max-width: 320px;
  background: rgba(20, 20, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 10px 10px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: var(--layer-popover);
}

/* Touchscreens only: a disabled submit button must pass the tap through to its
   wrapper so the Incomplete popover's tap trigger (member.js
   attachMissingPopoverToButton) can fire — disabled elements swallow their own
   events on touch devices. Desktop hover is untouched (hover: none excludes it). */
@media (hover: none) {
  .component-paymentsubmit-button:disabled,
  .component-paymentsubmit-admin:disabled {
    pointer-events: none;
  }
}

.member-missing-popover-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
}

.member-missing-popover-list {
  display: flex;
  flex-direction: column;
}

.member-missing-popover-list > * {
  margin-bottom: 10px;
}

.member-missing-popover-list > *:last-child {
  margin-bottom: 0;
}

.member-missing-popover-item {
  font-size: 13px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.8);
}

/* Admin submit button styles moved to components.css (PaymentSubmitComponent) */


/* ============================================================================
   COUPON CODE
   ============================================================================ */

/* ============================================================================
   TERMS (checkbox row on form)
   ============================================================================ */

.member-terms {
  margin-bottom: 10px;
  padding-top: 10px;
  border-top: 1px solid #333;
}

.member-terms-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #ffffff;
}

.member-terms-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--blue-500);
  flex-shrink: 0;
}

.member-terms-text {
  color: #ffffff;
}

.member-terms-link {
  color: var(--blue-500);
  text-decoration: underline;
  cursor: pointer;
}

.member-terms-link:hover {
  color: #60a5fa;
}

/* ============================================================================
   ADMIN SKIP PAYMENT BUTTON
   ============================================================================ */

.member-admin-skip-payment-btn {
  background: rgba(100, 150, 200, 0.2);
  border: 1px solid rgba(100, 150, 200, 0.4);
  color: #8ab4ff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.member-admin-skip-payment-btn:hover {
  background: rgba(100, 150, 200, 0.3);
  border-color: rgba(100, 150, 200, 0.6);
}

.member-admin-skip-payment-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   MEMBER AUTH CONTAINER
   ============================================================================ */

.member-auth {
  display: flex;
  flex-direction: column;
}

/* Profile tab: keep layout helpers, but DO NOT force it visible when inactive.
   Visibility is controlled by `.member-tab-contents` / `.member-tab-contents--active`. */
#member-tab-profile {
  /* IMPORTANT: Don't force full-height here.
     When this is 100%, it consumes the panel's extra bottom scroll padding,
     so Profile (logged-in) can't scroll down into the bottom slack area like other panels. */
  min-height: 0;
}

/* Keep profile/login info first, and theme setup underneath. */
#member-tab-profile.member-tab-contents--active {
  display: flex;
  flex-direction: column;
}

#member-tab-profile .member-auth {
  order: 1;
}

#member-tab-profile .member-style-container {
  order: 2;
}

/* When logged in, the auth container should fill available height */
#member-tab-profile .member-auth {
  flex: 1;
  min-height: 0;
}


/* Login form in Profile tab - no top margin, spacing comes from container above */


.member-profile-edit {
  display: flex;
  flex-direction: column;
}

.member-profile-edit > *:last-child {
  margin-bottom: 0;
}

.member-profile-edit > * {
  margin-bottom: 10px;
}


.member-profile-save-btn {
  align-self: flex-start;
}

/* Register tab button hidden when logged in (controlled by JS) */
#member-tab-register-btn[hidden] {
  display: none;
}

/* ============================================================================
   MEMBER PROFILE
   ============================================================================ */

.member-profile {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.member-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  background: #111111;
}

.member-profile-details {
  display: flex;
  flex-direction: column;
  margin-left: 14px;
}

.member-profile-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.member-profile-email {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================================
   UPDATE PROFILE BUTTON AND FORM CONTAINER
   ============================================================================ */

.member-profileform-toggle {
  width: 100%;
  margin-bottom: 12px;
}

/* Registration accordion (operator 2026-09-10): the admin moderation
   accordion's anatomy verbatim (admin.css ~3234-3305) on accordion-class-1;
   the class carries the colors and their light twins. Body padding = the
   container padding rule (10px 10px 0) the swapped container-class-3 gave. */
.member-registrationform-accordion {
  margin-bottom: 12px;
}

.member-registrationform-accordion-header {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  cursor: pointer;
}

.member-registrationform-accordion-title {
  flex: 1;
}

.member-registrationform-accordion-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-registrationform-accordion-arrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-arrow-down);
  mask-image: var(--ui-icon-arrow-down);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.2s;
  transform-origin: center;
}

.member-registrationform-accordion-arrow--open::before {
  transform: rotate(180deg);
}

.member-registrationform-accordion-body {
  display: none;
  padding: 10px 10px 0;
}

.member-registrationform-accordion-body--open {
  display: block;
}

.member-profileform-container > * {
  margin-bottom: 10px;
}

.member-profileform-container .member-panel-field-label {
  margin-bottom: 10px;
}

.member-profileform-container[hidden] {
  display: none;
}

.member-profileform-fieldsets {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Reminder emails toggle row — space-between pushes label left, switch right */
.member-profileform-reminder-row {
  justify-content: space-between;
}

/* Profile edit footer with Save/Discard buttons */
.member-profile-edit-footer {
  display: flex;
  gap: 10px;
  padding: 0;
  margin-bottom: 12px; /* 10-12-6 Rule: 12px between sibling containers */
}

.member-profile-edit-footer button {
  flex: 1;
}

/* ============================================================================
   LOGIN FORM CONTAINER
   ============================================================================ */

.member-loginform-container > * {
  margin-bottom: 10px;
}

.member-loginform-container .member-panel-field {
  margin-bottom: 10px;
}

.member-loginform-container .member-panel-field-label {
  margin-bottom: 10px;
}

.member-login {
  align-self: flex-end;
}

.member-loginform-container[hidden] {
  display: none;
}

/* ============================================================================
   CREATE POST AUTH GATE (shown when logged-out user tries to create post)
   ============================================================================ */

/* Invisible container - no background, border, or padding */
.member-auth-container {
  display: flex;
  flex-direction: column;
}

.member-auth-header {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 12px;
}

.member-auth-body {
  display: flex;
  flex-direction: column;
}

.member-auth-body .member-panel-field {
  margin-bottom: 10px;
}

.member-auth-body .member-panel-field-label {
  margin-bottom: 10px;
}

.member-loginform-fieldsets {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Username row with more button */
.member-profile-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.member-profile-edit-name-input {
  flex: 1;
}

/* Safety menu (3-dot): component-safetymenu (components.css/components.js).
   The mount rides the username row's flex layout. */
#member-profile-safetymenu {
  flex-shrink: 0;
}

/* Hide Account switch is parked (see the safety menu build in member.js) —
   rule kept for when the dedicated member page is built.
#member-profile-safetymenu .component-switch.member-tab-btn--departing-disabled * {
  pointer-events: none;
}
*/

/* Restore Account row (green accent, matches Post Manager's restore) */
.member-profile-more-restore {
  color: #4ade80;
}

.member-profile-more-restore:hover {
  background: #14532d;
}

/* ============================================================================
   AVATAR PICKER / UPLOAD
   ============================================================================ */

/* Note: AvatarPickerComponent styles live in components.css (.component-avatarpicker-*) */
/* Note: AvatarCropperComponent styles live in components.css (.component-avatarcropper-tool-*) */

/* ============================================================================
   LOGIN FORM ACTIONS (Forgot Password + Log In)
   ============================================================================ */

.member-loginform-actions {
  display: flex;
  align-items: center;
}

.member-loginform-actions > .member-loginform-login {
  margin-left: auto;
}

/* ============================================================================
   PROFILE ACTIONS (Refresh Preferences + Logout)
   ============================================================================ */

.member-profile-actions {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
}

/* Refresh Preferences: button + tooltip icon inline */
.member-refresh-preferences {
  display: flex;
  align-items: center;
  position: relative;
}

.member-refresh-preferences-btn {
  white-space: nowrap;
}

/* The tooltip component (components/tooltip.css); hidden for now, infrastructure kept. */
.member-refresh-tooltip {
  display: none;
}

/* Push logout button to the right */
.member-profile-actions > .member-logout {
  margin-left: auto;
}

.member-profile-actions-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  padding: 0 10px;
  white-space: nowrap;
}

/* Logout button uses same auth button styling */
.member-profile-actions-btn.member-button-auth {
  font-size: 14px;
}

/* Spacing under content is handled by `.bottomSlack` at the end of the panel body. */

/* ============================================================================
   UNSAVED PROMPT DIALOG
   ============================================================================ */

.member-unsaved-prompt {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: var(--layer-dialog);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.member-unsaved-prompt--show {
  opacity: 1;
  pointer-events: auto;
}

.member-unsaved-dialog {
  background: var(--dropdown-bg, rgba(17, 17, 17, 0.96));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 20px 0;
  max-width: 360px;
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  color: #fff;
}

.member-unsaved-dialog > * {
  margin-bottom: 10px;
}

/* Visible container - last child keeps margin for bottom spacing */

.member-unsaved-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================================================
   FORMPICKER (Category/Subcategory picker in Create tab)
   ============================================================================ */

.member-formpicker-container {
  width: 100%;
  max-width: 100%;
  margin-bottom: 12px;
}


/* Formpicker dropdowns container */
.member-formpicker-dropdowns {
  display: flex;
  flex-direction: column;
}

.member-formpicker-dropdowns > *:last-child {
  margin-bottom: 0;
}

.member-formpicker-dropdowns > * {
  margin-bottom: 10px;
}


/* Formpicker menu
   Appearance governed by menu-class-3 from base.css.
   This section contains LAYOUT ONLY. */
.member-formpicker-menu {
  position: relative;
}

.member-formpicker-menu-button {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.member-formpicker-menu-button-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.member-formpicker-menu-button-text {
  flex: 1;
  text-align: left;
  padding-left: 10px;
}

.member-formpicker-menu-button-arrow {
  width: 16px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-formpicker-menu-options {
  position: absolute;
  top: 36px;
  left: 0;
  width: 100%;
  z-index: var(--layer-menu);
}

/* Drawer animation: height/overflow on outer via base.css :has() rule.
   max-height + scrolling live on the inner wrapper. */
.member-formpicker-menu-options > .menu-options-inner {
  max-height: 600px;
  overflow-y: auto;
}

.member-formpicker-menu-option {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
}

.member-formpicker-menu-option-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Category icons are single-colour silhouettes painted as CSS masks so they
   take the menu text colour (currentColor) — white in dark theme, dark in
   light theme — exactly like the sort menu's geolocate icon. Subcategory
   icons stay as <img> because they are multi-colour. */
.member-formpicker-menu-option-image--category,
.member-formpicker-menu-button-image--category {
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0;
}

.member-formpicker-menu-option-text {
  flex: 1;
  text-align: left;
  padding-left: 10px;
}

/* ============================================================================
   ADDITIONAL LOCATIONS
   ============================================================================ */

/* Section containers - siblings of main form, elements inside handle spacing */

/* Active state removed - member-postform-container is now transparent wrapper */

/* Checkout section active state */
.member-section-checkout.member-section-container--active {
  border-color: var(--blue-500);
}

/* ============================================================================
   EMAIL VERIFICATION FIELDSET (registration form)
   ============================================================================ */

.member-register-emailverify-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-register-emailverify-sendwrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-register-emailverify-sendbtn {
  width: 100%;
  height: 36px;
}

.member-register-emailverify-sendbtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.member-register-emailverify-sendbtn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: postmanager-spin 0.8s linear infinite;
}

.member-register-emailverify-sendmsg {
  font-size: 12px;
  color: #aaa;
}

.member-register-emailverify-sendmsg--error {
  color: #f87171;
}

.member-register-emailverify-codewrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-register-emailverify-codeinputrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-register-emailverify-codeinput {
  height: 36px;
  width: 130px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
  font-family: monospace;
}

.member-register-emailverify-codemsg {
  font-size: 12px;
  color: #aaa;
}

.member-register-emailverify-codemsg--error {
  color: #f87171;
}

.member-register-emailverify-resendbtn {
  background: none;
  border: none;
  color: #60a5fa;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.member-register-emailverify-donewrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
}

.member-register-emailverify-doneicon {
  color: #4ade80;
  font-size: 18px;
  font-weight: bold;
}

.member-register-emailverify-donetext {
  font-size: 14px;
  color: #4ade80;
}

/* ============================================================================
   DEPARTING MEMBER MODAL
   Shown on login when account has a pending deletion (deleted_at is set).
   No close button — Acknowledge button only.
   ============================================================================ */

.departing-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--layer-departing-modal);
}

.departing-modal-container--hidden {
  display: none;
}

.departing-modal {
  width: 480px;
  max-width: 90%;
  background: var(--list-background);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.departing-modal-content {
  padding: 20px;
  color: #ffffff;
}

.departing-modal-text {
  font-size: 15px;
  line-height: 1.6;
  color: #ffffff;
  /* Typed line breaks stand (operator 2026-09-17): admin messages read as
     typed, no tags needed. */
  white-space: pre-line;
}

.departing-modal-footer {
  padding: 10px 20px 20px;
  display: flex;
  justify-content: flex-end;
}

.member-tab-btn--departing-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.member-tab-btn--departing-disabled.member-departing-tooltip-target {
  pointer-events: auto;
}

@media (max-width: 530px) {
  .departing-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

/* ============================================================================
   MY POSTS TAB
   Styles moved to postmanager.css
   ============================================================================ */

/* (.member-create-editor-open retired 2026-09-16 with the Create Post tab.) */