/* ===========================================================================
   s2t-theme.css — S2T design FOUNDATION (UI-05 redesign, owner-approved 2026-06-22).
   Spec: web/docs/superpowers/specs/2026-06-22-s2t-redesign-foundation-design.md
   Tokens mirror MASTER.md §2–§9/§14/§16/§19 as literal values (S2T has no Frega
   token file). S2T-SCOPED: linked ONLY by defaultFregaCom.master, loaded AFTER
   global.css and BEFORE s2t-bs5-shim/s2t-nav/s2t-auth/s2t-member so those can
   consume these tokens. Component classes are `s2t-`-prefixed and INERT until a
   page opts in (token-first + progressive migration). Never repaints other brands.
   ========================================================================= */
:root {
  /* ── Brand greens (MASTER §2) ───────────────────────────────────────── */
  --s2t-brand:         #4A8A68;  /* buttons, active icons, links, checkboxes */
  --s2t-brand-strong:  #136242;  /* hover/pressed, dark text links */
  --s2t-brand-deep:    #044D31;  /* legal links, high-contrast labels */
  --s2t-brand-light:   #86AF99;  /* input borders, dividers, muted accents */
  --s2t-brand-subtle:  #F6F8F7;  /* page/card field background */

  /* ── Neutrals (MASTER §2) ───────────────────────────────────────────── */
  --s2t-surface:       #FFFFFF;
  --s2t-bg:            #F6F8F7;
  --s2t-text:          #1A1A1A;  /* body text (MASTER §2 uses #000; soften to #1A1A1A per existing s2t usage) */
  --s2t-muted:         #848484;
  --s2t-placeholder:   #6B6B6B;
  --s2t-icon-muted:    #808080;
  --s2t-btn-disabled:  #c2d7cc;

  /* ── S2T accent + status (MASTER §2 / §16) ──────────────────────────── */
  --s2t-accent:        #F07A2D;  /* the wordmark "2"; restrained spark only */
  --s2t-accent-strong: #D9621A;
  --s2t-error:         #b3261e;  /* matches existing s2t danger usage */
  --s2t-band-1:        #e21e0e;  /* critical */
  --s2t-band-2:        #ffa602;  /* warning  */
  --s2t-band-3:        #ffe327;  /* neutral  */
  --s2t-band-4:        #bdf120;  /* positive */
  --s2t-band-5:        #21dd24;  /* top tier */

  /* ── Field (form) ───────────────────────────────────────────────────── */
  --s2t-field-border:  #86AF99;  /* green-outline inputs (= brand-light) */

  /* ── Spacing scale, base 8 (MASTER §4) ──────────────────────────────── */
  --s2t-space-1: 4px;  --s2t-space-2: 8px;  --s2t-space-3: 12px;
  --s2t-space-4: 16px; --s2t-space-5: 24px; --s2t-space-6: 32px;
  --s2t-space-7: 40px; --s2t-space-8: 48px; --s2t-space-9: 64px;

  /* ── Shadow scale (MASTER §5) ───────────────────────────────────────── */
  --s2t-shadow-0: none;
  --s2t-shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --s2t-shadow-2: 0 2px 8px rgba(0,0,0,0.10);
  --s2t-shadow-3: 0 4px 16px rgba(0,0,0,0.12);

  /* ── Radii (MASTER §6) ──────────────────────────────────────────────── */
  --s2t-radius-xs:    4px;
  --s2t-radius-sm:    8px;
  --s2t-radius-md:    12px;
  --s2t-radius-input: 10px;
  --s2t-radius-btn:   50px;
  --s2t-radius-pill:  9999px;

  /* ── Z-index named layers (MASTER §7) ───────────────────────────────── */
  --s2t-z-card: 1;
  --s2t-z-dropdown: 50;
  --s2t-z-modal: 300;

  /* ── Motion (MASTER §9) ─────────────────────────────────────────────── */
  --s2t-dur-fast:     100ms;
  --s2t-dur-standard: 200ms;
  --s2t-dur-slow:     300ms;
  --s2t-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --s2t-ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --s2t-ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* ── Typography (MASTER §3) ─────────────────────────────────────────── */
  --s2t-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --s2t-text-display: clamp(22px, 5.5vw, 32px);
  --s2t-text-h1:      clamp(20px, 4.8vw, 28px);
  --s2t-text-h2:      clamp(17px, 4vw, 22px);
  --s2t-text-body:    16px;   /* never below 16px — iOS input zoom (MASTER §3) */
  --s2t-text-small:   14px;
  --s2t-text-label:   12px;
  --s2t-text-btn:     16px;

  /* ── Layout caps (MASTER §18/§19) ───────────────────────────────────── */
  --s2t-content-max: 1100px;
  --s2t-form-max:    min(100%, 720px);   /* in-shell form cap (§19.2) */

  /* ── Swappable functional accents (owner directive 2026-06-23: "easy to swap
     colours at any time"). ONE place to retint the page's functional colour-
     coding. Toned from the legacy off-brand hex into the Frega palette while
     KEEPING the colour MEANINGFUL (not flattened to neutral). Bands/stock/edit
     carry their own literal value (swap here); invest/toggle deliberately track
     the brand tokens. Reusable beyond productmanage — semantic, token-only.
     Map: legacy #61AAE6 -> library band; #61e6c1 -> listings band;
          #cfe8e7 -> panel head; #eeff7e -> stock; #e5a220 -> invest;
          #2196F3 -> toggle-on; rgb(255,209,117) -> edit highlight. */
  --s2t-band-library-bg:   #E8F2EC;            /* Product Library section band  */
  --s2t-band-library-fg:   #136242;
  --s2t-band-listings-bg:  #FCEFE4;            /* Active Listings band (distinct */
  --s2t-band-listings-fg:  #9A4A12;            /*   from library via orange tint)*/
  --s2t-panel-head-bg:     #F1F6F3;            /* setup-panel header strip       */
  --s2t-accent-stock:      #F6E7C8;            /* low/in-stock highlight (warm)  */
  --s2t-accent-edit:       #FBE3C4;            /* inline-edit cell highlight     */
  --s2t-accent-invest:     var(--s2t-accent);  /* InvestPlus -> brand orange     */
  --s2t-toggle-on:         var(--s2t-brand);   /* premium toggle on -> brand grn */
}

/* ── Layout primitives (spec §3 contained-panel; MASTER §18/§19) ───────────
   The contained-panel posture: ONE white panel on the grey field; sections
   delimited by uppercase muted labels + hairline dividers; paired fields md+,
   single column on mobile. INERT until a page applies these classes.

   SCOPED under #EchoMainContent (the SPA content target) — NOT flat classes.
   The Stage-2 auth modals already use bare `.s2t-field`/`.s2t-label`/`.s2t-input`
   markup inside the `.s2t-auth` SweetAlert2 popup, which Swal appends to
   document.body OUTSIDE #EchoMainContent. Flat foundation rules would bleed the
   properties the more-specific `.s2t-auth .x` rules don't set (e.g. display/gap)
   and shift the modal. Anchoring to #EchoMainContent keeps these primitives live
   for content/member/merchant fragments (which load into #EchoMainContent) while
   they can never reach the auth popup or the nav. (Same isolation boundary A7 +
   the nav-overlap fix use.) DEVIATION from the flat-class plan A2 — see commit. */

/* The grey frame: a page wrapper that sits the panel on --s2t-bg. */
#EchoMainContent .s2t-page {
  background: var(--s2t-bg);
  font-family: var(--s2t-font);
  color: var(--s2t-text);
  padding: var(--s2t-space-5) var(--s2t-space-4);
}

/* The single contained panel */
#EchoMainContent .s2t-panel {
  max-width: var(--s2t-content-max);
  margin: 0 auto;
  background: var(--s2t-surface);
  border: 1px solid #E6ECE9;
  border-radius: var(--s2t-radius-md);
  box-shadow: var(--s2t-shadow-1);
  overflow: hidden;
}
#EchoMainContent .s2t-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2t-space-4);
  padding: var(--s2t-space-5);
  border-bottom: 1px solid #E6ECE9;
}
#EchoMainContent .s2t-panel-title { font-size: var(--s2t-text-h2); font-weight: 700; color: var(--s2t-brand-deep); margin: 0; line-height: 1.2; }
#EchoMainContent .s2t-panel-body { padding: var(--s2t-space-5); }
#EchoMainContent .s2t-panel-actions {
  display: flex; gap: var(--s2t-space-3); justify-content: flex-end;
  padding: var(--s2t-space-5);
  border-top: 1px solid #E6ECE9;
}

/* Section label + divider inside the panel */
#EchoMainContent .s2t-sec {
  font-size: var(--s2t-text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--s2t-muted);
  margin: var(--s2t-space-6) 0 var(--s2t-space-3);
}
#EchoMainContent .s2t-sec:first-child { margin-top: 0; }
#EchoMainContent .s2t-rule { border: 0; border-top: 1px solid #E6ECE9; margin: var(--s2t-space-5) 0; }

/* The field-pairing ladder (MASTER §19.2): single column xs/sm; pairs md+ */
#EchoMainContent .s2t-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s2t-space-4); }
@media (min-width: 768px) {
  #EchoMainContent .s2t-form-grid { grid-template-columns: 1fr 1fr; }
  #EchoMainContent .s2t-col-full { grid-column: 1 / -1; }   /* email, addresses, textarea — never pair */
}

/* A label+control stack */
#EchoMainContent .s2t-field { display: flex; flex-direction: column; gap: var(--s2t-space-1); min-width: 0; }

/* ── Form controls (spec §3/§4.3; MASTER §3/§8/§14) ───────────────────────
   White, green-outline, 48px tall, ≥16px font, brand focus ring. Leading
   green icon where it aids scanning. SCOPED under #EchoMainContent — like the
   A2 primitives, the bare .s2t-input/.s2t-label names are already used by the
   .s2t-auth modal markup (where .s2t-input is a flex wrapper, not the control),
   so flat rules would corrupt the auth popup. INERT until applied. */
#EchoMainContent .s2t-input {
  display: block; width: 100%;
  min-height: 48px;                       /* MASTER §8 mobile field height */
  padding: var(--s2t-space-3) var(--s2t-space-4);
  font-family: var(--s2t-font);
  font-size: var(--s2t-text-body);        /* 16px — no iOS zoom */
  line-height: 1.2;
  color: var(--s2t-text);
  background: var(--s2t-surface);
  border: 1px solid var(--s2t-field-border);
  border-radius: var(--s2t-radius-input);
  transition: border-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              box-shadow var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-input::placeholder { color: var(--s2t-placeholder); }
#EchoMainContent textarea.s2t-input { min-height: 120px; resize: vertical; line-height: 1.5; }
#EchoMainContent select.s2t-input { -webkit-appearance: none; appearance: none; cursor: pointer; }
#EchoMainContent .s2t-input:disabled { background: var(--s2t-brand-subtle); color: var(--s2t-muted); cursor: not-allowed; }
#EchoMainContent .s2t-input:focus-visible,
#EchoMainContent .s2t-input:focus {
  outline: none;
  border-color: var(--s2t-brand);
  box-shadow: 0 0 0 3px rgba(74,138,104,0.25);   /* MASTER §8 ring */
}

/* Leading-icon input group */
#EchoMainContent .s2t-input-group { position: relative; display: block; }
#EchoMainContent .s2t-input-group .s2t-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--s2t-brand); font-size: 16px; pointer-events: none; line-height: 1;
}
#EchoMainContent .s2t-input-group .s2t-input { padding-left: 42px; }
/* trailing addon (e.g. ".something2trade.com") */
#EchoMainContent .s2t-input-group .s2t-input-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--s2t-muted); font-size: var(--s2t-text-small); pointer-events: none;
}

/* Labels (MASTER §3 label step + §14 required asterisk BEFORE the label) */
#EchoMainContent .s2t-label {
  font-size: var(--s2t-text-label); font-weight: 600; color: var(--s2t-text);
  letter-spacing: .01em;
}
#EchoMainContent .s2t-label.is-required::before { content: '* '; color: var(--s2t-error); }

/* Help text — one italic line per field group; orange "immutable/warning" variant */
#EchoMainContent .s2t-help { font-size: var(--s2t-text-small); font-style: italic; color: var(--s2t-muted); margin-top: var(--s2t-space-1); }
#EchoMainContent .s2t-help-warn { color: var(--s2t-accent); }

/* Inline validation message */
#EchoMainContent .s2t-error-msg { font-size: var(--s2t-text-small); color: var(--s2t-error); margin-top: var(--s2t-space-1); }
#EchoMainContent .s2t-input.is-invalid { border-color: var(--s2t-error); }
#EchoMainContent .s2t-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179,38,30,0.20); }

/* Brand radios / checkboxes */
#EchoMainContent .s2t-check, #EchoMainContent .s2t-radio { display: inline-flex; align-items: center; gap: var(--s2t-space-2); cursor: pointer; font-size: var(--s2t-text-body); }
#EchoMainContent .s2t-check input, #EchoMainContent .s2t-radio input { width: 20px; height: 20px; accent-color: var(--s2t-brand); cursor: pointer; }

/* ── Buttons (spec §4.4; MASTER §6/§8/§14) — pill, green leads, orange spark ──
   SCOPED under #EchoMainContent (consistent with A2/A3 primitives + A7 a11y):
   the foundation is the S2T-content component library; the auth modal + nav own
   their own button skins outside #EchoMainContent. INERT until a page applies
   these classes. Consumed by Part B (Store Profile panel actions / FAQ outline). */
#EchoMainContent .s2t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2t-space-2);
  min-height: 44px;                          /* §8 touch target */
  padding: var(--s2t-space-3) var(--s2t-space-6);
  font-family: var(--s2t-font); font-size: var(--s2t-text-btn); font-weight: 700;
  letter-spacing: .02em; line-height: 1;
  border: 1px solid transparent; border-radius: var(--s2t-radius-btn);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              border-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,138,104,0.25); }
#EchoMainContent .s2t-btn:disabled { background: var(--s2t-btn-disabled); border-color: var(--s2t-btn-disabled); color: #fff; cursor: not-allowed; }

#EchoMainContent .s2t-btn-primary { background: var(--s2t-brand); color: #fff; }
#EchoMainContent .s2t-btn-primary:hover { background: var(--s2t-brand-strong); color: #fff; }

#EchoMainContent .s2t-btn-secondary { background: #fff; color: var(--s2t-text); border-color: #D5DAD7; }
#EchoMainContent .s2t-btn-secondary:hover { background: var(--s2t-brand-subtle); color: var(--s2t-text); }

#EchoMainContent .s2t-btn-outline { background: #fff; color: var(--s2t-brand); border-color: var(--s2t-brand); }
#EchoMainContent .s2t-btn-outline:hover { background: var(--s2t-brand); color: #fff; }

#EchoMainContent .s2t-btn-accent { background: var(--s2t-accent); color: #fff; }     /* rare high-urgency only */
#EchoMainContent .s2t-btn-accent:hover { background: var(--s2t-accent-strong); color: #fff; }
#EchoMainContent .s2t-btn-accent:focus-visible { box-shadow: 0 0 0 3px rgba(240,122,45,0.30); }

/* ── Data table (spec §4.5; MASTER §14 numbers) — one tokenised skin ──────────
   SCOPED under #EchoMainContent (consistent with the rest of the foundation).
   Replaces ad-hoc teal/blue/purple/orange table styling per page as each is
   swept. INERT until a page applies .s2t-table. Consumed by future member/
   merchant page loops (purchasehistory, cart). */
#EchoMainContent .s2t-table { width: 100%; border-collapse: collapse; font-family: var(--s2t-font); font-size: var(--s2t-text-small); }
#EchoMainContent .s2t-table thead th {
  text-align: left; font-weight: 700; color: var(--s2t-brand-deep);
  background: var(--s2t-brand-subtle);
  padding: var(--s2t-space-3) var(--s2t-space-4);
  border-bottom: 2px solid var(--s2t-brand-light);
}
#EchoMainContent .s2t-table tbody td { padding: var(--s2t-space-3) var(--s2t-space-4); border-bottom: 1px solid #E6ECE9; color: var(--s2t-text); }
#EchoMainContent .s2t-table tbody tr:nth-child(even) td { background: #FAFCFB; }                 /* subtle zebra */
#EchoMainContent .s2t-table tbody tr:hover td { background: rgba(74,138,104,0.06); }            /* green-tint hover */
#EchoMainContent .s2t-table .s2t-num { text-align: right; font-variant-numeric: tabular-nums; } /* currency columns */

/* ── Links, badges, status bands (spec §4.6; MASTER §16) ─────────────────────
   SCOPED under #EchoMainContent. Status bands are a dot/bar that MUST always be
   paired with a label/percentage (never colour-alone — a11y, MASTER §16).
   INERT until a page applies these classes. Consumed by future page loops. */
#EchoMainContent .s2t-link { color: var(--s2t-brand); text-decoration: none; font-weight: 600; }
#EchoMainContent .s2t-link:hover { color: var(--s2t-accent); text-decoration: underline; }

#EchoMainContent .s2t-badge {
  display: inline-flex; align-items: center; gap: var(--s2t-space-1);
  padding: 2px var(--s2t-space-2); border-radius: var(--s2t-radius-pill);
  font-size: var(--s2t-text-label); font-weight: 700;
  background: var(--s2t-brand-subtle); color: var(--s2t-brand-deep);
}

/* Status band dot — 8-10px circle; ALWAYS pair with a label/percentage (MASTER §16) */
#EchoMainContent .s2t-band { display: inline-block; width: 10px; height: 10px; border-radius: var(--s2t-radius-pill); vertical-align: middle; }
#EchoMainContent .s2t-band-1 { background: var(--s2t-band-1); }
#EchoMainContent .s2t-band-2 { background: var(--s2t-band-2); }
#EchoMainContent .s2t-band-3 { background: var(--s2t-band-3); }
#EchoMainContent .s2t-band-4 { background: var(--s2t-band-4); }
#EchoMainContent .s2t-band-5 { background: var(--s2t-band-5); }

/* ── A11y globals (spec §4.7; MASTER §8 focus, §9 reduced-motion) ─────────────
   The two highest-value wins MASTER §15 flags as currently missing. Scoped to
   the S2T content target #EchoMainContent so it lifts content pages without
   double-ringing nav/auth (which own their rings) — and never the other brands
   (this file is S2T-only anyway). Excludes elements that already opt in. */
#EchoMainContent a:focus-visible,
#EchoMainContent button:focus-visible,
#EchoMainContent input:focus-visible,
#EchoMainContent select:focus-visible,
#EchoMainContent textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74,138,104,0.25);
  border-radius: var(--s2t-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  #EchoMainContent *, #EchoMainContent *::before, #EchoMainContent *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   Store Profile page (B2, 2026-06-22) — form-width discipline + page-specifics.
   .s2t-form / .s2t-w-* are reusable form helpers (brand-agnostic, token-driven);
   the rest are scoped to .s2t-profile. .s2t-crop-wrap lives in a Swal popup on
   document.body, so it is deliberately NOT #EchoMainContent-scoped.
   ========================================================================= */

/* Form-width discipline (spec 3.1 / MASTER 19): cap the FORM tight inside the
   wider panel, regardless of screen width; size each field to its content.
   Flex column = one consistent vertical rhythm between every field/grid/section
   (fields were stacking with 0 gap; section breaks jumped to ~32px). */
#EchoMainContent .s2t-form {
  max-width: var(--s2t-form-max); margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s2t-space-4);
}
/* Section label: extra top break, no bottom margin (the flex gap handles below) */
#EchoMainContent .s2t-profile .s2t-sec { margin: var(--s2t-space-3) 0 0; }
#EchoMainContent .s2t-profile .s2t-sec:first-child { margin-top: 0; }
#EchoMainContent .s2t-w-xs { max-width: 120px; }
#EchoMainContent .s2t-w-sm { max-width: 200px; }
#EchoMainContent .s2t-w-md { max-width: 300px; }

/* Logo / backdrop upload preview tiles */
#EchoMainContent .s2t-profile .s2t-upload-tile {
  border: 1px dashed var(--s2t-brand-light); border-radius: var(--s2t-radius-sm);
  background: var(--s2t-brand-subtle); padding: var(--s2t-space-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  min-height: 140px; overflow: hidden;
  transition: border-color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-profile .s2t-upload-tile:hover { border-color: var(--s2t-brand); }
/* The runat=server #imgLogo / #imgBG wrapper must fill the tile so the preview can too */
#EchoMainContent .s2t-profile .s2t-upload-tile > div {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* Preview fills the tile (width or height, whichever fits first), aspect kept, no crop.
   Note: the img endpoint serves ~200x80 thumbnails, so contain may upscale slightly. */
#EchoMainContent .s2t-profile .s2t-upload-tile img,
#EchoMainContent .s2t-profile .s2t-upload-img {
  display: block; margin: auto;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

/* Upload progress bar */
#EchoMainContent .s2t-profile .s2t-progress {
  height: 6px; background: var(--s2t-brand-subtle); border-radius: var(--s2t-radius-pill);
  overflow: hidden; margin-top: var(--s2t-space-2);
}
#EchoMainContent .s2t-profile .s2t-progress > div {
  height: 100%; width: 0; background: var(--s2t-brand);
  transition: width var(--s2t-dur-standard) var(--s2t-ease-standard);
}

/* Visually-hidden file inputs (triggered by the upload tiles) */
#EchoMainContent .s2t-profile .s2t-hidden-file {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* Inline location map (Leaflet) */
#EchoMainContent .s2t-profile .s2t-map {
  height: 280px; width: 100%; border: 1px solid var(--s2t-field-border);
  border-radius: var(--s2t-radius-input); overflow: hidden;
  margin-top: var(--s2t-space-2); position: relative; z-index: 0;
}
#EchoMainContent .s2t-profile .s2t-map-search {
  display: flex; gap: var(--s2t-space-2); align-items: stretch; flex-wrap: wrap;
}
#EchoMainContent .s2t-profile .s2t-map-search .s2t-input { flex: 1 1 200px; }
#EchoMainContent .s2t-profile .s2t-map-search .s2t-btn { flex: 0 0 auto; min-height: 48px; }

/* Spectrum colour picker rendered as a clean SWATCH (not an input field) */
#EchoMainContent .s2t-profile .sp-replacer {
  display: inline-flex; align-items: center; gap: var(--s2t-space-2);
  border: 0; background: transparent; padding: 0;
}
#EchoMainContent .s2t-profile .sp-replacer .sp-preview {
  width: 48px; height: 32px; margin: 0;
  border: 1px solid var(--s2t-field-border); border-radius: var(--s2t-radius-sm);
  transition: border-color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-profile .sp-replacer:hover .sp-preview { border-color: var(--s2t-brand); }
#EchoMainContent .s2t-profile .sp-replacer .sp-dd { color: var(--s2t-icon-muted); font-size: 12px; }

/* Crop dialog body (rendered inside a Swal popup on document.body) */
.s2t-crop-wrap { max-height: 60vh; }
.s2t-crop-wrap img { display: block; max-width: 100%; }

/* ============================================================
   BUSY SPINNER -- MOVED.
   The dual-arc spinner, busy card, scrim overlay and inline spinner used to
   be defined here AND duplicated in css/s2t-busy.css, so the two drifted
   (this copy still carried z-index 1050 while the other had been corrected
   to 10000 to clear the 9000 sticky header). There is now ONE definition:
   css/frega-loading.css, loaded by all 7 masters and paired with
   js/frega-loading.js. Legacy .s2t-* class aliases live there too.
   ============================================================ */

/* ===========================================================================
   Legal-doc modal retint (Terms / Privacy) -- light S2T-scoped touch-up
   (owner-approved 2026-06-26). The shared platform T&C + Privacy docs
   (/content/tandc/content/ via tnc(); /content/tandc/privacy/ via
   privacypopup()) hard-code off-brand blue/purple inline + BS3 buttons.
   They load via appModal() into #ModalContent inside the .app-modal-popup
   Swal popup (appended to document.body, OUTSIDE #EchoMainContent -- so these
   rules are intentionally NOT #EchoMainContent-scoped). s2t-theme.css is linked
   ONLY by defaultFregaCom.master, so this is inert on the other 5 brands.
   No markup edits: scoped via the popup + the docs' unique inline hex + the
   Back-To-Top #contents anchor. Reusable pattern; only the token values are
   S2T-specific.
   ========================================================================= */
.app-modal-popup [style*="#333399"],
.app-modal-popup [style*="#000080"] { color: var(--s2t-brand-deep) !important; }

.app-modal-popup [style*="#0000ff"],
.app-modal-popup [style*="#0000FF"] { color: var(--s2t-brand) !important; }
.app-modal-popup a[style*="#0000ff"]:hover,
.app-modal-popup a[style*="#0000FF"]:hover { color: var(--s2t-brand-strong) !important; }

/* BS3 "Back To Top" -> s2t pill. :has() keeps this to the legal docs' own
   #contents-anchored buttons (btn-default btn-lg also appears on unrelated
   merchant pages). Engines without :has() leave the legacy button -- graceful,
   no over-reach. */
.app-modal-popup .btn-default.btn-lg:has(> a[href="#contents"]) {
  background: var(--s2t-brand);
  border: 0;
  border-radius: var(--s2t-radius-btn);
  padding: 8px 24px;
  box-shadow: var(--s2t-shadow-1);
  transition: background var(--s2t-dur-standard) var(--s2t-ease-standard);
}
.app-modal-popup .btn-default.btn-lg:has(> a[href="#contents"]):hover {
  background: var(--s2t-brand-strong);
}
.app-modal-popup .btn-default.btn-lg:has(> a[href="#contents"]) > a {
  color: #fff !important;
  text-decoration: none;
}

/* Modal close "x" -> match FregaForce (site.css .swal2-close): clean borderless
   2em glyph, grey -> black on hover, no default box/focus-ring. Targets ALL S2T
   modal flavors (.app-modal-popup FAQ/legal AND .bd-shim-popup dialog shim) via
   .swal2-popup. s2t-theme.css is linked solely by defaultFregaCom.master, so this
   is inert on the other 5 brands. NO !important -> the auth modals' brand-green
   close (s2t-auth.css `.swal2-popup:has(.s2t-auth) .swal2-close`, specificity 0,3,0)
   still wins over this 0,2,0 base rule, so auth keeps its blessed green. */
.swal2-popup .swal2-close {
  font-size: 2em;
  color: #6e6e6e;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: color 0.2s ease;
}
.swal2-popup .swal2-close:hover {
  color: #000;                 /* FregaForce: darken on hover only */
  background: transparent;
}
.swal2-popup .swal2-close:focus {
  box-shadow: none;            /* kill swal2's default blue inset focus ring */
  outline: none;
}

/* =========================================================================
   DUW managedash modals (members / requests / type) -- s2t page-loop 2026-06-27
   These load via loadModal() -> appModal() into .app-modal-popup (OUTSIDE
   #EchoMainContent), so the .s2t-managedash dashboard scope can't reach them.
   Retint here, scoped under .app-modal-popup, overriding each fragment's own
   inline <style> (specificity 0,2,0 > the fragments' 0,1,0 class rules; inline
   style="color:#168248" needs !important). s2t-theme.css is S2T-only -> inert on
   the other 5 brands. De-rainbow = DEMOTE to on-brand tints; red kept ONLY for
   genuinely destructive actions (remove affiliate / decline request).
   ========================================================================= */
/* modal table header -> tokenised brand (matches the dashboard table) */
.app-modal-popup .TableFixed_Green th {
  background: var(--s2t-brand);
  color: #fff;
  border-bottom: 1px solid var(--s2t-brand-strong);
  text-shadow: none;
  font-weight: 600;
}
.app-modal-popup .TableFixed_Green td { vertical-align: middle; }

/* legacy green CTA (Send / Change type) -> brand pill */
.app-modal-popup .btnGlobalStyle.btnGreen2 {
  background: var(--s2t-brand);
  color: #fff;
  border: 1px solid var(--s2t-brand);
  border-radius: var(--s2t-radius-btn);
  font-weight: 700;
}
.app-modal-popup .btnGlobalStyle.btnGreen2:hover {
  background: var(--s2t-brand-strong);
  border-color: var(--s2t-brand-strong);
  color: #fff;
}

/* requests: accept action (legacy bright green) -> brand green tint */
.app-modal-popup .reqAction1 {
  background: var(--s2t-brand-subtle);
  border: 1px solid var(--s2t-brand-light);
  color: var(--s2t-brand-deep);
  border-radius: var(--s2t-radius-sm);
  font-weight: 600;
}
.app-modal-popup .reqAction1:hover { background: #DCEAE2; }

/* destructive: remove affiliate (members .webMR) + decline request (.reqAction2)
   -> subtle on-brand red (red reserved for destructive only) */
.app-modal-popup .webMR,
.app-modal-popup .reqAction2 {
  background: #FBECEC;
  border: 1px solid #E7C3C3;
  color: #B3261E;
  border-radius: var(--s2t-radius-sm);
  font-weight: 600;
}
.app-modal-popup .webMR:hover,
.app-modal-popup .reqAction2:hover { background: #F7DCDC; }

/* resend-invite link (legacy blue) -> brand link */
.app-modal-popup .affilInviteResend { color: var(--s2t-brand-strong); }
.app-modal-popup .affilInviteResend:hover { color: var(--s2t-brand-deep); text-shadow: none; }

/* type modal: green section heading (inline hex) + fee checkboxes */
.app-modal-popup [style*="#168248"] { color: var(--s2t-brand-deep) !important; }
.app-modal-popup .chbFee { accent-color: var(--s2t-brand); width: 18px; height: 18px; cursor: pointer; }

/* modal titles + error banner */
.app-modal-popup #webMemTitle,
.app-modal-popup #webReqTitle { color: var(--s2t-brand-deep); }
.app-modal-popup #webMemError { border-radius: var(--s2t-radius-xs); }

/* =========================================================================
   selecturl "Create your URL" modal -- FORM REDESIGN (owner 2026-06-27)
   loadModal -> .app-modal-popup; scoped under #formSelectUrl. Fixes: faint/
   hard-to-read top text -> full-contrast; the loose BS3 .input-group-addon
   (".weblet.me") -> a flush, height-matched suffix on the input; cleaner
   sectioned spacing + readable summary/pricing cards.
   ========================================================================= */
.app-modal-popup #formSelectUrl { color: var(--s2t-text); font-size: 15px; line-height: 1.5; }
.app-modal-popup #formSelectUrl b { color: var(--s2t-brand-deep); }
/* readable intro + NB lines (were faint grey italic) */
.app-modal-popup #formSelectUrl > .row i,
.app-modal-popup #formSelectUrl ul li i { color: var(--s2t-text); font-style: italic; }

/* selection summary card (Weblet / Payment) -> readable, structured */
.app-modal-popup .webOptions {
  background: var(--s2t-brand-subtle);
  border: 1px solid var(--s2t-brand-light);
  border-radius: var(--s2t-radius-sm);
  padding: 12px 16px;
  color: var(--s2t-text);
}
.app-modal-popup .webOptionNote,
.app-modal-popup .webPayNote { display: flex; gap: 8px; align-items: baseline; }
.app-modal-popup .webPayNote { margin-top: 4px; }
.app-modal-popup .optionHead { color: var(--s2t-brand-deep); font-weight: 700; width: auto; min-width: 74px; display: inline-block; }
.app-modal-popup .optionTxt { color: var(--s2t-text); }

/* URL input + ".weblet.me" suffix as ONE flush, height-matched unit */
.app-modal-popup #formSelectUrl .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; max-width: 520px; }
.app-modal-popup #displaySelectedUrl {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; font-size: 15px;
  border: 1px solid var(--s2t-brand-light); border-right: 0;
  border-radius: var(--s2t-radius-input) 0 0 var(--s2t-radius-input); outline: none;
}
.app-modal-popup #displaySelectedUrl:focus { border-color: var(--s2t-brand); box-shadow: 0 0 0 3px rgba(74,138,104,.15); }
.app-modal-popup #displaySelectedUrl:disabled { background: var(--s2t-brand-subtle); color: var(--s2t-muted); }
.app-modal-popup #formSelectUrl .input-group-addon {
  display: flex; align-items: center; height: 44px; padding: 0 14px; white-space: nowrap;
  background: var(--s2t-brand-subtle); color: var(--s2t-brand-deep); font-weight: 700;
  border: 1px solid var(--s2t-brand-light); border-left: 0;
  border-radius: 0 var(--s2t-radius-input) var(--s2t-radius-input) 0;
}
/* char-warning hint (#960101): readable muted, drop the odd 50px indent */
.app-modal-popup #formSelectUrl [style*="#960101"] {
  color: var(--s2t-muted) !important; margin-left: 0 !important;
  display: block; margin-top: 6px; font-size: 13px;
}

/* NB + pricing note */
.app-modal-popup #formSelectUrl ul { padding-left: 0; margin-bottom: 0; }
.app-modal-popup #formSelectUrl ul li { list-style: none; margin-bottom: 10px; }
.app-modal-popup #urlPricing {
  background: var(--s2t-brand-subtle); border: 1px solid var(--s2t-brand-light);
  border-radius: var(--s2t-radius-sm); padding: 10px 14px; color: var(--s2t-text);
}

/* Terms link + agree/submit row */
.app-modal-popup #duwUrlTc { color: var(--s2t-brand-strong); font-weight: 700; }
.app-modal-popup #duwUrlTc:hover { color: var(--s2t-brand-deep); text-shadow: none; }
.app-modal-popup .big-checkbox { accent-color: var(--s2t-brand); vertical-align: middle; }
.app-modal-popup .btnGlobalStyle.btnOrange {     /* "Submit Selection" = primary -> brand pill */
  background: var(--s2t-brand); color: #fff; border: 1px solid var(--s2t-brand);
  border-radius: var(--s2t-radius-btn); font-weight: 700; white-space: nowrap;
}
.app-modal-popup .btnGlobalStyle.btnOrange:hover { background: var(--s2t-brand-strong); border-color: var(--s2t-brand-strong); color: #fff; }
.app-modal-popup #urlMsg { border-radius: var(--s2t-radius-xs); }

/* =========================================================================
   DUW "Change Weblet Type" modal -- REWORK to the designoption bar
   (owner 2026-06-27). type/Default.aspx loads via loadModal() into
   .app-modal-popup (OUTSIDE #EchoMainContent), so the designoption
   .s2t-optcard/.s2t-spec styles (scoped under #EchoMainContent .s2t-duw-page)
   cannot reach it -- these are the modal-scoped equivalents. Inline SVG icon
   replaces the legacy duwebimg1/2.jpg; spec rows + .s2t-pay-opt mirror the
   designoption visual language. Wiring preserved (chbFee/mfpby/mfpbm,
   webChangeType, <%=websiteID%>). .btnGreen2 already pilled above.
   ========================================================================= */
.app-modal-popup .s2t-typemodal { color: var(--s2t-text); font-size: 15px; line-height: 1.5; }
.app-modal-popup .s2t-typemodal-head { display: flex; gap: 18px; align-items: flex-start; }
.app-modal-popup .s2t-typemodal-svg { flex: 0 0 auto; width: 72px; height: 72px; color: var(--s2t-brand); }
.app-modal-popup .s2t-typemodal-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--s2t-brand-deep); }
.app-modal-popup .s2t-typemodal-lede { margin: 0; color: var(--s2t-text); }
.app-modal-popup .s2t-typemodal-spec { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #E1E6E3; display: grid; gap: 12px; }
.app-modal-popup .s2t-typemodal .s2t-spec-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: start; }
.app-modal-popup .s2t-typemodal .s2t-spec-row dt { margin: 0; font-weight: 700; color: var(--s2t-brand-deep); }
.app-modal-popup .s2t-typemodal .s2t-spec-row dd { margin: 0; color: var(--s2t-text); }
.app-modal-popup .s2t-typemodal .s2t-spec-row dd b { color: var(--s2t-brand-strong); }
.app-modal-popup .s2t-typemodal .s2t-pay-opt { display: flex; align-items: center; gap: 9px; padding: 4px 0; cursor: pointer; }
.app-modal-popup .s2t-typemodal .s2t-pay-opt input { accent-color: var(--s2t-brand); width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; }
.app-modal-popup .s2t-typemodal .s2t-pay-opt:has(input:checked) { color: var(--s2t-brand-deep); font-weight: 700; }
.app-modal-popup .s2t-typemodal-foot { margin-top: 20px; display: flex; justify-content: flex-end; }
@media (max-width: 560px) {
  .app-modal-popup .s2t-typemodal-head { flex-direction: column; align-items: center; text-align: center; }
  .app-modal-popup .s2t-typemodal-foot { justify-content: stretch; }
  .app-modal-popup .s2t-typemodal-foot .btnGlobalStyle { width: 100%; }
}

/* =========================================================================
   FAQ modal body redesign -- UI-06 (owner-approved 2026-06-27: pure restyle,
   all collapsed). The shared showFAQs(catid,title) [js/main.js] opens via the
   BootstrapDialog->SweetAlert2 shim, so the popup carries .bd-shim-popup; the
   body is /faq/Default.aspx (a QuickAccord accordion of question links ->
   answer panels). main.js, QuickAccord.css and the faq page are SHARED across
   all 6 brands -- but s2t-theme.css is linked solely by defaultFregaCom.master,
   so scoping every rule under .bd-shim-popup retints the FAQ on S2T ONLY, with
   zero edits to the shared CSS/JS/aspx (same pattern as the legal-modal retint).
   De-rainbow: legacy off-brand blue (.accordion-a #4b83b1) + reserved-RED
   expanded (.accordion-trigger.expanded #ff0000) -> brand greens. Both legacy
   rules use !important, so the colour overrides here must too (and win on
   specificity). Container padding stays on the BASE rule so QuickAccord's
   height-auto measurement (taken before .expanded is added) is not clipped.
   ========================================================================= */
/* swal2 centres .swal2-html-container by default -- FAQ content must read left. */
.bd-shim-popup .swal2-html-container { text-align: left; }
.bd-shim-popup .swal2-title { color: var(--s2t-brand-deep); font-size: 22px; font-weight: 700; }

/* outer accordion list: kill the default <ul> bullets/indent WITHOUT touching
   any <ul> inside an answer body (those have <li>, not .accordion-trigger). */
.bd-shim-popup ul:has(> .accordion-trigger) { list-style: none; margin: 0; padding: 0; }

/* question rows -> clean disclosure cards */
.bd-shim-popup .accordion-trigger {
  background-color: var(--s2t-surface);
  border: 1px solid #E4EAE6;
  border-radius: var(--s2t-radius-sm);
  padding: 12px 44px 12px 14px;   /* right room for the caret */
  margin-top: 8px;
  font-weight: 600;
  text-decoration: none;          /* these are <a> -> drop the link underline; the caret + hover signal it */
  transition: background-color var(--s2t-dur-standard) var(--s2t-ease-standard),
              border-color var(--s2t-dur-standard) var(--s2t-ease-standard);
}
.bd-shim-popup .accordion-trigger:hover {
  background-color: var(--s2t-brand-subtle);
  border-color: var(--s2t-field-border);
  text-decoration: underline;     /* subtle affordance on hover only */
}
.bd-shim-popup .accordion-trigger:focus-visible { outline: 2px solid var(--s2t-brand); outline-offset: 2px; }
/* override legacy off-brand blue (.accordion-a is !important) */
.bd-shim-popup .accordion-a { color: var(--s2t-brand-deep) !important; font-weight: 600 !important; }
/* expanded question: override legacy RED (!important) -> calm brand-deep + subtle fill */
.bd-shim-popup .accordion-trigger.expanded {
  color: var(--s2t-brand-deep) !important;
  background-color: var(--s2t-brand-subtle);
  border-color: var(--s2t-field-border);
}
/* caret inherits the trigger colour otherwise -> pin it to brand */
.bd-shim-popup .accordion-trigger:after { color: var(--s2t-brand); }

/* answer panel -> white background, black text (owner steer 2026-06-27: max
   readability/contrast). No big vertical container padding so the collapsed
   height:0 state stays clean; <p> supplies the vertical rhythm. */
.bd-shim-popup .accordion-content {
  background: var(--s2t-surface);
  border: 1px solid #E4EAE6;
  border-radius: var(--s2t-radius-sm);
  color: #000;
  font-size: 15px;
  line-height: 1.6;
  padding: 2px 16px;
}
/* force true black on the answer body even if the stored HTML carries its own
   light colour (owner steer 2026-06-27: white background, black text).
   Exclude <a> so answer hyperlinks keep their brand affordance below. */
.bd-shim-popup .accordion-content,
.bd-shim-popup .accordion-content *:not(a) { color: #000 !important; }
.bd-shim-popup .accordion-content.expanded { margin: 6px 0 14px; }   /* override legacy margin:8px all-sides */
.bd-shim-popup .accordion-content p { padding: 12px 0; margin: 0; }
.bd-shim-popup .accordion-content a { color: var(--s2t-brand-strong); font-weight: 600; }

/* footer "Close" (shim default .bd-shim-btn.btn-default) -> S2T green pill */
.bd-shim-popup .bd-shim-btn.btn-default {
  background: var(--s2t-brand);
  color: #fff;
  border: 1px solid var(--s2t-brand);
  border-radius: var(--s2t-radius-btn);
  font-weight: 700;
  padding: 8px 22px;
}
.bd-shim-popup .bd-shim-btn.btn-default:hover {
  background: var(--s2t-brand-strong);
  border-color: var(--s2t-brand-strong);
  color: #fff;
}

/* ===========================================================================
   Site footer — slim, always-visible bar (owner-approved 2026-06-28, Option A).
   Replaces the legacy #footer, which global.css hid (display:none + position:fixed)
   and the S2T master never revealed (no slide-reveal JS, unlike besorted/kp/duw).
   Flat-scoped under the unique .s2t-footer class: the footer renders OUTSIDE
   #EchoMainContent at master level, and the name can't collide with the .s2t-auth
   modal classes. S2T-only file (linked solely by defaultFregaCom.master) => never
   repaints the other 5 brands. Reusable pattern; only the tokens carry identity.
   ========================================================================= */
.s2t-footer {
  border-top: 1px solid var(--s2t-brand-light);
  background: var(--s2t-surface);
  padding: var(--s2t-space-4) var(--s2t-space-5);
  margin-top: var(--s2t-space-7);
  font-family: Lato, system-ui, -apple-system, sans-serif;
}
.s2t-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2t-space-2) var(--s2t-space-5);
}
.s2t-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2t-space-2) var(--s2t-space-4);
}
.s2t-footLink {
  color: var(--s2t-brand-deep);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--s2t-dur-standard) var(--s2t-ease-standard);
}
.s2t-footLink:hover { color: var(--s2t-brand); text-decoration: underline; }
.s2t-footLink:focus-visible {
  color: var(--s2t-brand);
  outline: 2px solid var(--s2t-brand);
  outline-offset: 2px;
  border-radius: var(--s2t-radius-xs);
}
.s2t-footer-copy {
  color: var(--s2t-muted);
  font-size: 13px;
}

/* =========================================================================
   UI-27 — the footer stays at the bottom on short pages
   Owner, 2026-07-17: "footer should stay at the bottom". On any page shorter
   than the viewport the footer floated mid-page (/content/register/ guest:
   footer ended at y=589 on a 900 viewport = 311px of dead grey below it).

   Why sticky and not flex: the flex-column option (min-height:100vh +
   .s2t-footer{margin-top:auto}) was REJECTED — margin-top:auto overrides the
   footer's own margin-top:var(--s2t-space-7), a 40px regression on EVERY long
   page (measured: /content/tandc/ docH 14335 -> 14295). Sticky reflows nothing:
   long pages stay byte-identical (14335 -> 14335, /store/ 1108 -> 1108).

   .fullheight is the master's wrapper div. Despite the name it had NO height
   rule on any S2T route: its only declaration is height:100% in stores.css,
   which no master links — it is linked by store/Default.aspx alone. So the
   class was an unstyled name everywhere else and nothing established viewport
   height. On /store/ this min-height combines with that height:100%; measured
   there, docH is unchanged (1108 -> 1108).
   ========================================================================= */
.fullheight { min-height: 100vh; }
.s2t-footer { position: sticky; top: 100vh; }

/* The 26px that made the above unshippable, fixed at its real source.
   #hiddendata is a DISCARD SINK: main.js POSTs /content/login/external/?a=logout
   and dumps the whole response into it just to throw it away — on
   /content/register/ that is a 2067-char ASP.NET page (<form action="./?a=logout">
   + __VIEWSTATE) whose <form> renders a 25.7px line box. The master marks it
   visibility:hidden, which RESERVES layout space; its siblings #hiddencontent
   and #hiddenurl use display:none and correctly contribute 0. That ~26px sat
   below .fullheight on every S2T page all along — min-height:100vh merely made
   it visible by tipping docH (926) past the viewport (900) into a scrollbar.
   Removing the div in-browser gave docH 900 and no scrollbar: that is the proof.

   display:none is safe for BOTH consumers, tested — not assumed:
     - the logout response is never read (it is discarded), and jQuery .html()
       executes any embedded <script> regardless of display;
     - rooms.js zoomChris() injects an <iframe> here; under display:none the
       iframe STILL issues its request (verified in-browser), and it was already
       invisible under visibility:hidden, so nothing regresses.
   position:absolute does NOT work: with no top, its static position falls after
   the now-900px .fullheight and it still extends the scroll area to 926.
   S2T-only — this file is linked solely by defaultFregaCom.master, so the same
   div on duw.master / weblet.master is untouched. */
#hiddendata { display: none; }

/* UI-26 cookie banner: extracted to the SHARED css/frega-cookie.css
   (linked by defaultFregaCom.master + duw.master) so S2T and the Hub
   share one source. Do not re-add the rules here - a copy drifts. */