/* Profile Shell design tokens (Phase 3).
 *
 * NOT a parallel design system -- every color value here is copied
 * verbatim from tailwind.config.js (single source of truth for the
 * brand palette) so profile pages stay visually identical to the rest
 * of the site. This file exists only for the handful of things Tailwind
 * utility classes can't express cleanly: a couple of reusable component
 * classes for shell chrome (tabs, cards, skeletons) that need logical
 * (dir-aware) properties instead of physical left/right, and a few
 * tokens (focus ring, skeleton shimmer) with no Tailwind utility
 * equivalent in this project's config. Every profile-shell component
 * class below is deliberately written with logical properties
 * (margin-inline/padding-inline/border-inline/inset-inline/text-align:
 * start|end) so it renders correctly under both dir="ltr" and
 * dir="rtl" with zero per-language overrides.
 */

:root {
  /* Copied from tailwind.config.js -- keep these in lockstep with that
     file's `colors` block; do not invent new brand colors here.
     DARK LUXURY CORRECTION (obsidian, not navy -- see css/cinematic.css's
     header comment for the full rationale): Main Obsidian #0B0E12 (=
     `obsidian`, MAM's pre-existing identity color), Deep Charcoal #111315,
     Container #141619, Elevated Dark #17191B, Card Surface Dark #1C1F21,
     Highest Surface #22262A, Warm Ivory #F4EFE7, Soft Cream #DDD4C7,
     Darwesh Gold #C69A4B, Soft Gold #D4AF60. Text tiers tuned for
     contrast on these dark surfaces: on-surface (headings) #F4EFE7,
     on-surface-variant (body copy) #B8B0A5, outline (muted metadata)
     #8F887C -- never a low-opacity trick, every one of these is a real,
     readable solid color. Default borders (outline-variant) are a
     neutral #2B2C2A, never gold-tinted or navy. error/error-container
     and tertiary*/on-tertiary* (success green) are UNCHANGED -- semantic
     status colors, out of scope for this pass. */
  --ps-color-primary: #0b0e12;
  --ps-color-on-primary: #f4efe7;
  --ps-color-secondary: #c69a4b;
  --ps-color-on-secondary: #0b0e12;
  --ps-color-secondary-container: #d4af60;
  --ps-color-tertiary-container: #0f2e1c;
  --ps-color-on-tertiary-container: #6bd99a;
  --ps-color-error: #ff8a80;
  --ps-color-error-container: #5c1a1a;
  --ps-color-surface-bright: #0b0e12;
  --ps-color-surface-container: #141619;
  --ps-color-surface-container-low: #111315;
  --ps-color-surface-container-lowest: #17191b;
  --ps-color-on-surface: #f4efe7;
  --ps-color-on-surface-variant: #b8b0a5;
  --ps-color-outline: #8f887c;
  --ps-color-outline-variant: #2b2c2a;

  /* ---- THE BRAND SYSTEM: obsidian / gold / ivory / charcoal ----------
   * Named aliases, not new colors. An audit of every hex value in this
   * codebase (css/*.css, every *.html) turned up no burgundy or red used
   * as a brand color anywhere -- the handful of dark-red hexes that
   * exist (#8b0000, #c62828, #8f1c1c) are a Leaflet draw-tool boundary
   * stroke and map verification-pin/legend colors, both semantic and
   * both left untouched. The site's actual dominant palette has been
   * obsidian + gold + ivory since the Phase 3 token system above and the
   * cinematic system in css/cinematic.css -- this block only gives that
   * existing palette one canonical, brand-named layer instead of two
   * differently-named systems (M3's "primary/secondary" here, "cine-*"
   * and "mamco-*" elsewhere) that happen to agree.
   *
   * One Darwesh Gold (--brand-gold / --ps-color-secondary / Tailwind
   * `secondary`, all #C69A4B) is used everywhere including admin.html/
   * agent-dashboard.html -- restraint is enforced by usage (CTAs,
   * selected state, focus rings, price emphasis only), not by a second,
   * duller value.
   *
   * Also exported as JSON at docs/brand/darwesh-brand-tokens.json, flat
   * and framework-agnostic, so a future iOS/Android app can import the
   * identical hex values rather than re-eyeballing them off screenshots.
   */
  /* OBSIDIAN -- the page default (see .cine-scope's `background`,
     css/cinematic.css), not an occasional accent surface. Kept as
     "--brand-navy" for backward name compatibility with anything that
     may still read it, but the value is neutral obsidian, never navy. */
  --brand-navy: #0b0e12;
  --brand-navy-container: #17191b;   /* Elevated Dark -- Tailwind primary-container */
  --brand-navy-on: #f4efe7;          /* Warm Ivory text/icons on an obsidian surface */
  /* GOLD -- controlled accent only: CTAs, selected state, focus rings,
     price emphasis. Never a wash. */
  --brand-gold: #c69a4b;
  --brand-gold-soft: #d4af60;        /* Soft Gold -- CTA/premium accent */
  --brand-gold-on: #0b0e12;          /* obsidian text on a gold-filled surface */
  /* IVORY -- text and photography only, not a background family: the
     dark-luxury pass retired every literal light/white surface (see
     css/cinematic.css's header comment). --brand-ivory-surface keeps its
     old name but is one of the dark card tiers, never white;
     --brand-ivory-alt is the warm-neutral body-copy tone. */
  --brand-ivory: #f4efe7;
  --brand-ivory-surface: #17191b;
  --brand-ivory-alt: #b8b0a5;
  /* OBSIDIAN -- Main Background. Was "used only where necessary, not the
     default background anywhere"; under dark luxury it now IS the page
     default (see .cine-scope's `background`, css/cinematic.css). */
  --brand-neutral-dark: #0b0e12;
  --brand-neutral-dark-raised: #111315;   /* Deep Charcoal */

  /* Tokens with no existing Tailwind config equivalent. */
  --ps-radius-card: 16px;
  --ps-radius-control: 10px;

  /* ---- Restrained corner system --------------------------------------
   * Global (harmless by itself -- nothing references these yet outside
   * the cinematic-scoped pages, see css/cinematic.css's .cine-scope
   * override of --ps-radius-card/--ps-radius-control). Small, consistent,
   * "architectural" radii instead of the large 16-24px rounding used
   * elsewhere on the site (office.html etc., left untouched). */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 9px;
  --ps-shadow-card: 0 1px 2px rgba(11, 14, 18, 0.04), 0 8px 24px -12px rgba(11, 14, 18, 0.12);
  --ps-shadow-elevated: 0 4px 12px rgba(11, 14, 18, 0.06), 0 16px 40px -16px rgba(11, 14, 18, 0.18);
  --ps-focus-ring: 0 0 0 2px var(--ps-color-surface-bright), 0 0 0 4px var(--ps-color-secondary);

  /* ---- Premium auth (signup) 3D system ----------------------------------
   * Layered-depth shadow scale and a restrained gold edge-highlight,
   * composed entirely from the existing primary/secondary palette above
   * (obsidian / warm gold) -- no new brand colors. */
  --ps-shadow-3d-1: 0 1px 1px rgba(11, 14, 18, 0.05), 0 4px 10px -4px rgba(11, 14, 18, 0.10);
  --ps-shadow-3d-2: 0 2px 4px rgba(11, 14, 18, 0.06), 0 14px 32px -10px rgba(11, 14, 18, 0.20);
  --ps-shadow-3d-3: 0 6px 16px rgba(11, 14, 18, 0.10), 0 32px 64px -20px rgba(11, 14, 18, 0.32);
  --ps-gold-edge: linear-gradient(120deg, transparent, var(--ps-color-secondary-container) 45%, var(--ps-color-secondary) 55%, transparent);

  /* ---- Motion tokens -----------------------------------------------------
   * One shared timing system instead of ad hoc per-rule millisecond
   * values. Defined globally (not scoped to the cinematic pages) with
   * values chosen to match what every existing hardcoded transition on
   * this site already used, so introducing them here changes nothing
   * visually by itself -- component rules below now reference these
   * instead of a literal duration. css/cinematic.css overrides these
   * same variable names to a slightly slower, calmer set on the pages
   * that opt into the cinematic system (see .cine-scope). */
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --motion-slow: 420ms;
  --ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

  /* ---- Design-system consolidation (Phase 1) --------------------------
   * Everything below is new as of this pass. Nothing above this comment
   * changed value -- existing pages keep rendering identically. This is
   * the single canonical source every other token namespace in the repo
   * (--ash-* admin, --ar-* arena, --mamco-* MAM) now aliases into instead
   * of re-seeding its own hex, and the source map.html's own inline
   * "champagne glass" recipe and every competing solid-gold chip now draw
   * from instead of hardcoding a fourth/fifth gold.
   */

  /* Completes the surface ladder the header comment above already named
     (Deep Charcoal/Container/Elevated Dark/Card Surface Dark/Highest
     Surface) but that previously stopped at 4 defined tiers -- these two
     hexes were always the documented design, just never given variables. */
  --ps-color-surface-container-high: #1c1f21;    /* Card Surface Dark */
  --ps-color-surface-container-highest: #22262a; /* Highest Surface */

  /* Gold, by strength -- replaces "one flat gold used everywhere" with
     the three deliberate tiers the brand brief asks for. -subtle is
     admin's own already-correct wash value, promoted to canonical rather
     than replaced. -glass-* is map.html's own "smoked champagne glass"
     recipe (the literal accent in the approved Map reference image),
     copied verbatim so the segmented-control treatment becomes a real,
     reusable token instead of four inline rgba literals. */
  --ps-color-gold-subtle: rgba(198, 154, 75, 0.16);   /* wash / hover fill */
  --ps-color-gold: var(--ps-color-secondary);          /* #C69A4B -- primary CTA / solid accent */
  --ps-color-gold-strong: var(--ps-color-secondary-container); /* #D4AF60 -- emphasis/hover */
  --ps-color-gold-glass-1: rgba(224, 190, 130, 0.22);  /* selected/active glass, top stop */
  --ps-color-gold-glass-2: rgba(224, 190, 130, 0.07);  /* selected/active glass, bottom stop */
  --ps-color-gold-glass-border: rgba(224, 190, 130, 0.32);
  --ps-color-gold-glass-glow: rgba(224, 190, 130, 0.28);
  --ps-color-gold-glass-text: #F2ECDD;

  /* Semantic status -- profile-tokens.css previously had only error/
     tertiary(success); this completes the set to match admin's already
     well-tuned values (admin-tokens.css keeps its own copies in sync with
     these rather than the other way around -- see that file's header).
     --ps-color-error/-error-container are pre-existing and untouched;
     --ps-color-danger is the newer, more-used red (matches
     css/darwesh-marker.css's unverified-state red and admin's --ash-error)
     kept as a second name rather than silently reassigning -error's
     existing callers. */
  --ps-color-success: #4ae183;
  --ps-color-success-wash: rgba(74, 225, 131, 0.14);
  --ps-color-warning: #e0ab52;
  --ps-color-warning-wash: rgba(224, 171, 82, 0.14);
  --ps-color-info: #7fb0e8;
  --ps-color-info-wash: rgba(127, 176, 232, 0.14);
  --ps-color-danger: #e5787a;
  --ps-color-danger-wash: rgba(229, 120, 122, 0.14);

  /* Spacing -- a real 4px-based scale (generalized from admin-tokens.css's
     --space-*, which pioneered this for the site) so component CSS stops
     hand-picking one-off px values. */
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 20px;
  --ps-space-6: 24px;
  --ps-space-8: 32px;
  --ps-space-10: 40px;
  --ps-space-12: 48px;
  --ps-space-16: 64px;

  /* A second, larger-radius scale for new shared components (buttons,
     panels, badges) built in the phases after this one -- deliberately a
     new name, not a redefinition of the existing --radius-xs/sm/md/lg
     "architectural" corner system above, which several live cinematic
     rules already depend on at its current small values. */
  --ps-radius-sm: 8px;
  --ps-radius-md: 12px;
  --ps-radius-lg: 18px;

  /* A generic 3-tier elevation scale for the same future shared
     components; --ps-shadow-card/-elevated/-3d-* above are unchanged and
     still what existing rules reference. */
  --ps-shadow-sm: 0 1px 2px rgba(11, 14, 18, 0.24);
  --ps-shadow-md: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.30);
  --ps-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px rgba(0, 0, 0, 0.38);

  /* Referenced by .ps-btn[disabled] below via a literal today; named here
     so new shared components (inputs, badges) can share the same value
     instead of a second bare 0.6. */
  --ps-opacity-disabled: 0.6;
}

/* Every native checkbox/radio on the site, one rule, everywhere this file
   loads (all 33 pages). Without this a checkbox renders the browser's
   default blue -- confirmed live on login.html's "Remember me": every
   other color on that screen is obsidian/gold/ivory and the checkbox was
   plain OS blue, a stray off-brand color with no semantic meaning to
   protect. Two pages had already fixed this locally (admin.html's
   map-layer toggles at a lighter gold, signup-professional.html's
   checkbox row) -- both keep their own more specific rule and simply
   agree with this default now instead of overriding a browser blue. */
html {
  accent-color: var(--brand-gold);
}

/* ---- Layout shell -------------------------------------------------- */

.ps-shell {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* ---- Header / hero --------------------------------------------------
 * Split layout on wide screens, compact stacked layout under 768px --
 * one shared markup structure (no separate mobile-only DOM), driven
 * entirely by this single rule so there's exactly one place the
 * breakpoint lives. */

.ps-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  border-radius: var(--ps-radius-card);
  padding: clamp(20px, 4vw, 40px);
  position: relative;
  overflow: hidden;
  background: var(--ps-color-primary);
  color: var(--ps-color-on-primary);
}

@media (min-width: 768px) {
  .ps-hero {
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: 28px;
  }
}

.ps-hero-glow {
  position: absolute;
  inset-block-start: -96px;
  inset-inline-end: -96px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: var(--ps-color-secondary);
  opacity: 0.14;
  filter: blur(60px);
  pointer-events: none;
}

/* ---- Avatar / logo --------------------------------------------------- */

.ps-avatar {
  position: relative;
  width: clamp(72px, 18vw, 104px);
  height: clamp(72px, 18vw, 104px);
  flex: none;
}

.ps-avatar-frame {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 3px solid var(--ps-color-surface-container-lowest);
  background: var(--ps-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--ps-shadow-elevated);
}

.ps-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-avatar-upload {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ps-color-secondary-container);
  color: var(--ps-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ps-shadow-card);
  cursor: pointer;
  border: 2px solid var(--ps-color-surface-container-lowest);
}

/* ---- Badges ------------------------------------------------------------ */

.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-block: 3px;
  padding-inline: 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.ps-badge-verified { background: var(--ps-color-tertiary-container); color: var(--ps-color-on-tertiary-container); }
.ps-badge-unverified { background: rgba(255, 255, 255, 0.14); color: var(--ps-color-on-primary); }
.ps-badge-unassigned { background: var(--ps-color-error-container); color: var(--ps-color-error); }
.ps-badge-neutral { background: var(--ps-color-surface-container); color: var(--ps-color-on-surface-variant); }

/* ---- Tabs (data-driven, replaces the copy-pasted .acct-tab/.listings-tab
 * /.admin-tab pattern) -- horizontally scrollable strip at any width
 * instead of wrapping, snap points for a clean mobile swipe. */

.ps-tablist {
  display: flex;
  gap: clamp(16px, 3vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  border-block-end: 1px solid var(--ps-color-outline-variant);
  scrollbar-width: none;
}

.ps-tablist::-webkit-scrollbar { display: none; }

.ps-tab {
  flex: none;
  scroll-snap-align: start;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ps-color-on-surface-variant);
  padding-block: 12px;
  padding-inline: 4px;
  border: none;
  background: none;
  border-block-end: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
}

.ps-tab[aria-selected="true"] {
  color: var(--ps-color-primary);
  border-block-end-color: var(--ps-color-secondary);
}

.ps-tab:focus-visible { box-shadow: var(--ps-focus-ring); border-radius: 4px; }

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

/* ---- Cards -------------------------------------------------------------- */

.ps-card {
  background: var(--ps-color-surface-container-lowest);
  border: 1px solid var(--ps-color-outline-variant);
  border-radius: var(--ps-radius-card);
  box-shadow: var(--ps-shadow-card);
}

/* ---- Buttons (composed with existing Tailwind utility classes in markup;
 * this only supplies the disabled/loading state Tailwind alone doesn't
 * give a single reusable class for). */

.ps-btn[disabled], .ps-btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.ps-btn:focus-visible { box-shadow: var(--ps-focus-ring); }

/* ---- Skeleton loading state --------------------------------------------- */

.ps-skeleton {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--ps-color-surface-container) 25%,
    var(--ps-color-surface-container-low) 37%,
    var(--ps-color-surface-container) 63%
  );
  background-size: 400% 100%;
  animation: ps-shimmer 1.4s ease infinite;
}

@keyframes ps-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

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

/* ---- Empty / error state ------------------------------------------------- */

.ps-empty {
  text-align: center;
  padding-block: clamp(32px, 8vw, 56px);
  padding-inline: 16px;
  color: var(--ps-color-on-surface-variant);
}

/* An empty/error state can be the only real content on the page -- short
 * enough that the page never grows past one viewport, so there's no scroll
 * distance left to reveal anything below the fixed mobile bottom-nav (the
 * page-level pb-24 safe-area padding only helps once content already
 * exceeds viewport height). Longer RTL copy for the same message can then
 * push a state's own action button low enough to render under the nav,
 * unclickable with no way to scroll clear of it. Reserving real space
 * below the block, mobile only (desktop has no fixed bottom-nav), keeps
 * its button above that band regardless of how long the translated text
 * wraps. */
@media (max-width: 767px) {
  .ps-empty { margin-block-end: 72px; }
}

/* ---- Form fields --------------------------------------------------------- */

.ps-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-color-on-surface);
  margin-block-end: 6px;
}

.ps-input {
  width: 100%;
  border: 1px solid var(--ps-color-outline-variant);
  border-radius: var(--ps-radius-control);
  padding-block: 9px;
  padding-inline: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ps-color-on-surface);
  background: var(--ps-color-surface-container-lowest);
  text-align: start;
}

.ps-input:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); }

/* Product/listing grid -- auto-fits from a comfortable minimum card
 * width down to a single mobile column, no manual breakpoint list. */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

/* =========================================================================
 * PREMIUM AUTH SYSTEM -- signup.html / signup-professional.html
 *
 * Hoisted here (was previously copy-pasted, near-identically, inside each
 * page's own <style> block) so both pages share one definition and one
 * visual language -- not a second design system, every color still comes
 * from the --ps-color-* tokens above, which are themselves copied from
 * tailwind.config.js's primary (deep navy) / secondary (warm gold/bronze)
 * palette. Logical properties throughout for RTL (Kurdish/Arabic) safety.
 * ========================================================================= */

/* ---- Form primitives (was duplicated per-page) -------------------------- */

.auth-input {
  width: 100%;
  border: 1px solid var(--ps-color-outline-variant);
  border-radius: var(--ps-radius-control);
  padding: 12px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ps-color-on-surface);
  background: var(--ps-color-surface-container-lowest);
  transition: border-color var(--motion-fast, .15s) var(--ease-premium, ease), box-shadow var(--motion-fast, .15s) var(--ease-premium, ease);
}
.auth-input:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); border-color: var(--ps-color-secondary); }
.auth-input[aria-invalid="true"] { border-color: var(--ps-color-error); }
.auth-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ps-color-on-surface-variant);
  display: block;
  margin-block-end: 6px;
}
.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-inline-start: 42px; }
.auth-input-wrap .auth-input-icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--ps-color-outline); pointer-events: none; }
.auth-input-wrap .auth-input.has-toggle { padding-inline-end: 42px; }
.auth-toggle-visibility { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; border-radius: 50%; cursor: pointer; color: var(--ps-color-outline); display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; transition: background-color var(--motion-fast, .15s) var(--ease-premium, ease), color var(--motion-fast, .15s) var(--ease-premium, ease); }
.auth-toggle-visibility:hover { background: var(--ps-color-surface-container-low); color: var(--ps-color-on-surface-variant); }
.auth-toggle-visibility:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); }
.auth-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: auth-spin .7s linear infinite; vertical-align: -3px; margin-inline-end: 8px; flex: none; }
/* Two-class selector beats Tailwind's single-class .hidden{display:none}
 * regardless of stylesheet load order (this was a latent bug even before
 * this class lived here -- .auth-spinner's own display:inline-block was
 * quietly winning the tie against .hidden on every page that used it). */
.auth-spinner.hidden { display: none; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spinner { animation-duration: 1.6s; } }
.field-err { color: var(--ps-color-error); font-size: 12px; margin-block-start: 4px; display: none; }
.field-err.show { display: block; }

/* ---- Premium card: layered depth + restrained gold edge highlight ------- */

.auth-card {
  position: relative;
  background: var(--ps-color-surface-container-lowest);
  border: 1px solid var(--ps-color-outline-variant);
  border-radius: var(--radius-md);
  padding: clamp(22px, 4vw, 40px);
  box-shadow: var(--ps-shadow-3d-2);
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--ps-gold-edge);
  opacity: 0.9;
}
.auth-card { animation: auth-card-in .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

/* ---- Split desktop layout ------------------------------------------------
 * A visual left panel + form right panel from 1024px up; a single
 * stacked column (compact header, no visual panel) below it, so the
 * form never competes for space against illustration on a phone. */

.auth-split {
  display: block;
  min-height: 100dvh;
}
@media (min-width: 1024px) {
  .auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.auth-visual {
  display: none;
  position: relative;
  background: var(--ps-color-primary);
  color: var(--ps-color-on-primary);
  overflow: hidden;
  padding: clamp(40px, 5vw, 72px);
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  .auth-visual { display: flex; }
}

.auth-visual-inner { position: relative; z-index: 1; max-width: 440px; }

.auth-visual-wordmark { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: var(--ps-color-secondary-container); margin-block-end: 40px; display: flex; align-items: center; gap: 8px; }

.auth-visual-title { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; margin-block-end: 14px; }

.auth-visual-subtitle { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.72); margin-block-end: 36px; max-width: 380px; }

/* Layered "floating surfaces" 3D composition -- pure CSS, no external
 * image dependency (keeps this within the existing img-src CSP, and
 * renders identically for every visitor regardless of network). */
.auth-visual-stage { position: relative; height: clamp(150px, 20vw, 210px); margin-block-end: 36px; }
.auth-visual-card {
  position: absolute;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  overflow: hidden;
}
.auth-visual-card.c1 { inset-inline-start: 0; inset-block-start: 8%; width: 62%; height: 68%; transform: rotate(-4deg); z-index: 1; }
.auth-visual-card.c2 { inset-inline-start: 30%; inset-block-start: 0; width: 58%; height: 62%; transform: rotate(3deg); background: rgba(254,212,136,0.08); border-color: rgba(254,212,136,0.28); z-index: 2; }
.auth-visual-card.c3 { inset-inline-start: 14%; inset-block-end: 0; width: 46%; height: 40%; transform: rotate(-2deg); z-index: 3; background: rgba(255,255,255,0.09); }
.auth-visual-card .auth-visual-icon { position: absolute; inset-inline-start: 16px; inset-block-end: 14px; font-size: 26px; color: var(--ps-color-secondary-container); opacity: 0.85; }
.auth-visual-glow { position: absolute; inset-block-start: -140px; inset-inline-end: -140px; width: 380px; height: 380px; border-radius: 999px; background: var(--ps-color-secondary); opacity: 0.10; filter: blur(90px); pointer-events: none; }

.auth-trust-row { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding-block: 6px; padding-inline: 12px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: var(--ps-color-on-primary); }
.auth-trust-badge .material-symbols-outlined { font-size: 15px; color: var(--ps-color-secondary-container); }

.auth-visual-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-visual-step { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,0.82); }
.auth-visual-step-num { flex: none; width: 24px; height: 24px; border-radius: var(--radius-xs); background: rgba(254,212,136,0.16); border: 1px solid rgba(254,212,136,0.4); color: var(--ps-color-secondary-container); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 56px) 16px;
  background: var(--ps-color-surface-bright);
}
.auth-form-side-inner { width: 100%; max-width: 460px; }

/* ---- Premium button system ----------------------------------------------
 * One definition for every primary/secondary action across both pages;
 * .ps-btn (defined above) still supplies the disabled/aria-busy dimming
 * so withBusyButton() keeps working unchanged. */

.auth-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: var(--ps-color-primary);
  color: var(--ps-color-on-primary);
  border: 1px solid var(--ps-color-primary);
  border-radius: 14px;
  padding-block: 13px;
  padding-inline: 20px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--ps-shadow-3d-1);
  transition: box-shadow var(--motion-standard, .18s) var(--ease-premium, ease), transform var(--motion-fast, .1s) var(--ease-premium, ease), background-color var(--motion-standard, .18s) var(--ease-premium, ease), border-color var(--motion-standard, .18s) var(--ease-premium, ease);
  cursor: pointer;
}
.auth-btn-primary:hover { box-shadow: var(--ps-shadow-3d-2); border-color: var(--ps-color-secondary); }
.auth-btn-primary:active { transform: scale(0.98); box-shadow: var(--ps-shadow-3d-1); }
.auth-btn-primary:focus-visible { outline: none; box-shadow: var(--ps-focus-ring), var(--ps-shadow-3d-2); }
@media (prefers-reduced-motion: reduce) { .auth-btn-primary { transition: none; } .auth-btn-primary:active { transform: none; } }

.auth-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ps-color-surface-container-lowest);
  color: var(--ps-color-on-surface);
  border: 1px solid var(--ps-color-outline-variant);
  border-radius: 14px;
  padding-block: 12px;
  padding-inline: 20px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color var(--motion-fast, .15s) var(--ease-premium, ease), background-color var(--motion-fast, .15s) var(--ease-premium, ease);
  cursor: pointer;
}
.auth-btn-secondary:hover { border-color: var(--ps-color-secondary); background: var(--ps-color-surface-container-low); }
.auth-btn-secondary:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); }

.auth-btn-ghost {
  background: none;
  border: none;
  color: var(--ps-color-on-surface-variant);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding-block: 8px;
  padding-inline: 4px;
}
.auth-btn-ghost:hover { color: var(--ps-color-primary); }
.auth-btn-ghost:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); border-radius: var(--radius-xs); }
.auth-btn-ghost:disabled { color: var(--ps-color-outline-variant); cursor: not-allowed; }

/* Secondary-CTA panel (e.g. signup.html's "Create a Professional
 * Profile" path) -- a restrained gold-accented card, not a competing
 * primary action. */
.auth-cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--ps-color-secondary-container);
  background: linear-gradient(135deg, var(--ps-color-surface-container-lowest), var(--ps-color-surface-container-low));
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--ps-shadow-3d-1);
}
.auth-cta-panel-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--ps-color-primary); color: var(--ps-color-secondary-container); display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* ---- Premium stepper (professional wizard) -------------------------------
 * Same JS-toggled classes as before (.done / .current on
 * .pro-step-dot / .pro-step-line) -- only the visual treatment changes,
 * so renderStepIndicator() needs no logic change. */

.pro-steps { display: flex; align-items: flex-start; justify-content: center; gap: 2px; margin-block-end: 30px; overflow-x: auto; padding-block: 6px 2px; }
.pro-step-unit { display: flex; flex-direction: column; align-items: center; flex: none; }
.pro-step-dot {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--ps-color-surface-container-lowest);
  border: 1.5px solid var(--ps-color-outline-variant);
  color: var(--ps-color-on-surface-variant);
  flex: none;
  transition: background-color var(--motion-standard, .2s) var(--ease-premium, ease), color var(--motion-standard, .2s) var(--ease-premium, ease), border-color var(--motion-standard, .2s) var(--ease-premium, ease), box-shadow var(--motion-standard, .2s) var(--ease-premium, ease);
  box-shadow: var(--ps-shadow-3d-1);
}
.pro-step-dot.done { background: var(--ps-color-secondary); border-color: var(--ps-color-secondary); color: var(--ps-color-on-secondary); }
.pro-step-dot.current { background: var(--ps-color-primary); border-color: var(--ps-color-primary); color: var(--ps-color-on-primary); box-shadow: 0 0 0 4px var(--ps-color-secondary-container), var(--ps-shadow-3d-2); }
.pro-step-name { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ps-color-on-surface-variant); margin-block-start: 6px; max-width: 68px; text-align: center; display: none; }
.pro-step-unit:has(.pro-step-dot.current) .pro-step-name { color: var(--ps-color-primary); }
@media (min-width: 640px) { .pro-step-name { display: block; } }
.pro-step-line { width: clamp(14px, 3vw, 32px); height: 2px; background: var(--ps-color-outline-variant); flex: none; margin-block-start: 15px; border-radius: 2px; }
.pro-step-line.done { background: var(--ps-color-secondary); }
@media (prefers-reduced-motion: reduce) { .pro-step-dot { transition: none; } }

/* ---- Premium type-picker cards -------------------------------------------
 * JS still only toggles aria-pressed; every visual state lives here. */

.type-card {
  position: relative;
  border: 1.5px solid var(--ps-color-outline-variant);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: start;
  background: var(--ps-color-surface-container-lowest);
  cursor: pointer;
  transition: border-color var(--motion-fast, .15s) var(--ease-premium, ease), box-shadow var(--motion-standard, .18s) var(--ease-premium, ease), transform var(--motion-standard, .12s) var(--ease-premium, ease), background-color var(--motion-fast, .15s) var(--ease-premium, ease);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  box-shadow: var(--ps-shadow-3d-1);
}
.type-card:hover { border-color: var(--ps-color-secondary); box-shadow: var(--ps-shadow-3d-2); transform: translateY(-1px); }
.type-card[aria-pressed="true"] { border-color: var(--ps-color-secondary); background: linear-gradient(135deg, var(--ps-color-secondary-container), var(--ps-color-surface-container-lowest) 70%); box-shadow: var(--ps-shadow-3d-2); }
.type-card:active { transform: scale(0.98); }
.type-card:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); }
.type-card-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--ps-color-primary); color: var(--ps-color-secondary-container); display: flex; align-items: center; justify-content: center; box-shadow: var(--ps-shadow-3d-1); overflow: hidden; }
.type-card[aria-pressed="true"] .type-card-icon { background: var(--ps-color-secondary); color: var(--ps-color-on-secondary); }
.type-card-body { min-width: 0; }
.type-card-title { font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--ps-color-on-surface); }
.type-card-desc { font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--ps-color-on-surface-variant); margin-block-start: 2px; line-height: 1.4; }
.type-card-check { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 18px; height: 18px; border-radius: 999px; background: var(--ps-color-secondary); color: var(--ps-color-on-secondary); font-size: 12px; display: none; align-items: center; justify-content: center; }
.type-card[aria-pressed="true"] .type-card-check { display: flex; }
@media (prefers-reduced-motion: reduce) { .type-card { transition: none; } .type-card:active, .type-card:hover { transform: none; } }

/* ---- Field groups (Step 3 grouped sections) ------------------------------ */

.ps-field-group { border: 1px solid var(--ps-color-outline-variant); border-radius: var(--radius-md); padding: 16px; background: var(--ps-color-surface-container-low); }
.ps-field-group + .ps-field-group { margin-block-start: 16px; }
.ps-field-group-title { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ps-color-secondary); margin-block-end: 12px; }
.ps-field-group-title .material-symbols-outlined { font-size: 16px; }
.ps-field-group-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .ps-field-group-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.ps-field-group-grid .span-2 { grid-column: 1 / -1; }

/* ---- Media dropzone (premium drag/drop) ----------------------------------- */

.media-tile {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  border: 1.5px dashed var(--ps-color-outline-variant);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: var(--ps-color-surface-container-low);
  overflow: hidden;
  position: relative;
  box-shadow: var(--ps-shadow-3d-1);
  transition: border-color var(--motion-fast, .15s) var(--ease-premium, ease), box-shadow var(--motion-fast, .15s) var(--ease-premium, ease), background-color var(--motion-fast, .15s) var(--ease-premium, ease);
}
.media-tile:hover { border-color: var(--ps-color-secondary); box-shadow: var(--ps-shadow-3d-2); }
.media-tile.drag-over { border-color: var(--ps-color-secondary); background: var(--ps-color-secondary-container); box-shadow: var(--ps-shadow-3d-2); }
.media-tile img { width: 100%; height: 100%; object-fit: cover; }
.media-tile:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); }
.media-tile-progress { position: absolute; inset-inline: 10%; inset-block-end: 12px; height: 4px; border-radius: 999px; background: rgba(11,14,18,0.12); overflow: hidden; display: none; }
.media-tile-progress-bar { height: 100%; width: 40%; background: var(--ps-color-secondary); border-radius: 999px; animation: media-progress-sweep 1.1s ease-in-out infinite; }
@keyframes media-progress-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .media-tile-progress-bar { animation-duration: 2s; } }

/* ---- Review dossier ------------------------------------------------------- */

.review-dossier-card { background: var(--ps-color-surface-container-lowest); border: 1px solid var(--ps-color-outline-variant); border-radius: var(--radius-md); box-shadow: var(--ps-shadow-3d-1); padding: 14px 16px; }
.review-dossier-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.review-dossier-title { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ps-color-secondary); }
.review-dossier-title .material-symbols-outlined { font-size: 16px; }

/* ---- Premium OTP cells ----------------------------------------------------- */

.otp-digits { display: flex; gap: 9px; justify-content: center; direction: ltr; }
.otp-digit {
  width: 46px;
  height: 56px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 23px;
  font-weight: 700;
  border: 1.5px solid var(--ps-color-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--ps-color-surface-container-lowest);
  color: var(--ps-color-on-surface);
  box-shadow: var(--ps-shadow-3d-1);
  transition: border-color var(--motion-fast, .15s) var(--ease-premium, ease), box-shadow var(--motion-fast, .15s) var(--ease-premium, ease);
}
.otp-digit:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); border-color: var(--ps-color-secondary); }
.otp-digit[aria-invalid="true"] { border-color: var(--ps-color-error); }
@media (max-width: 380px) { .otp-digit { width: 39px; height: 48px; font-size: 19px; } .otp-digits { gap: 6px; } }

.auth-security-badge { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--ps-color-primary); color: var(--ps-color-secondary-container); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: 14px; box-shadow: var(--ps-shadow-3d-2); overflow: hidden; }

/* =========================================================================
 * `.hidden` must always win over `.ps-*` component rules -- root-cause
 * fix, not a per-element patch. Found while investigating the Designer/
 * Engineer profile's "Verified and Unverified shown at the same time"
 * bug: `.ps-badge { display: inline-flex; ... }` above is a SINGLE-class
 * rule, same (0,1,0) specificity as Tailwind's `.hidden { display: none }`
 * (compiled into css/tailwind.css). At equal specificity the cascade
 * falls back to source order, and this file is `<link>`ed AFTER
 * tailwind.css on every page that uses it -- so `.ps-badge`'s
 * `display: inline-flex` always won, and `element.classList.add('hidden')`
 * on a `.ps-badge` (e.g. #verifiedBadge / #unverifiedBadge in
 * js/profile-role.js's renderProvider()) silently did nothing: both
 * badges stayed rendered at once. Verified directly (a `.ps-badge.hidden`
 * test element computed to `display: inline-flex`, not `none`, before
 * this fix). The same risk applies to any other single-class `.ps-*`
 * rule here that sets `display` (e.g. `.ps-field-group-title`,
 * `.ps-field-group-grid`) if it is ever toggled with `.hidden`.
 *
 * Fix: one attribute-substring selector, `[class*="ps-"]`, adds one more
 * specificity unit -- `[class*="ps-"].hidden` is (0,2,0), which beats
 * every single-class `.ps-*` rule unconditionally, regardless of file
 * order, without `!important` and without hunting down every current and
 * future `.ps-*` class individually (the same fragile per-element
 * pattern that caused this bug). Every class in this codebase containing
 * the substring "ps-" is one of this design system's own components
 * (verified by grepping every *.html file's class attributes), so this
 * never matches an unrelated class by accident. */
[class*="ps-"].hidden { display: none; }

/* ---------------------------------------------------------------------
   Material Symbols load guard (see js/icon-fallback.js)

   Every icon here is a ligature span whose text content is a word
   ("notifications", "expand_more"). If the Material Symbols font is slow
   or blocked, the browser paints that word. These rules stop that.

   All three selectors are scoped to a class that only js/icon-fallback.js
   sets, so with JS disabled nothing below matches and behaviour is
   unchanged -- this can never be the reason an icon goes missing.
   --------------------------------------------------------------------- */

/* Font still loading: keep the box, hide the word. No reflow on arrival. */
html.ds-icons-pending .material-symbols-outlined {
  visibility: hidden;
}

/* Font failed. font-size:0 collapses the ligature word away; the pseudo
   element re-establishes its own size and draws a neutral placeholder, so
   icon-only controls stay visible and tappable instead of vanishing.
   !important is needed because most icon spans carry a Tailwind
   text-[Npx] utility of equal specificity. */
html.ds-icons-failed .material-symbols-outlined {
  font-size: 0 !important;
  line-height: 1;
}
html.ds-icons-failed .material-symbols-outlined::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: 0.45;
  vertical-align: -0.15em;
}

/* ---------------------------------------------------------------------
   Loading skeletons. Used where the UI must show "this is arriving"
   rather than a value it does not have yet -- see index.html's city
   counts and Featured Properties, where rendering 0 / "no listings"
   during a pending or failed query stated something false about the
   business.
   --------------------------------------------------------------------- */
.ds-skeleton {
  display: inline-block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(128, 128, 128, 0.10) 25%,
    rgba(128, 128, 128, 0.20) 37%,
    rgba(128, 128, 128, 0.10) 63%
  );
  background-size: 400% 100%;
  animation: ds-skeleton-shimmer 1.4s ease infinite;
}
/* Sized to the digits it stands in for, so the row doesn't jump when the
   real count lands. */
.ds-skeleton--count { width: 18px; height: 13px; vertical-align: -1px; }

@keyframes ds-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-skeleton { animation: none; }
}

/* ---- Owner-only profile completion card (js/profile-completion.js) ----
   Deliberately quiet: this is a to-do list for the profile's owner, not a
   badge, so it uses the surface tone rather than the gold accent and
   spends colour only on the progress fill. It is never rendered for a
   visitor -- renderCompletion() returns early unless isOwnerView. */
.pc-card {
  border: 1px solid var(--mamco-outline, #5D482B);
  background: var(--mamco-surface-high, #221E15);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  max-width: 42rem;
}
.pc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pc-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mamco-glow, #F2EEE5);
}
/* tabular-nums so the figure does not shift width as it climbs. */
.pc-percent {
  font-size: 18px;
  font-weight: 700;
  color: var(--mamco-accent, #B89A63);
  font-variant-numeric: tabular-nums;
}
.pc-bar {
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.pc-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mamco-accent, #B89A63);
  transition: width 420ms cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .pc-fill { transition: none; }
}
.pc-hint {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #A79F91;
}
.pc-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-item { font-size: 13px; }
/* The step is a real button (it opens the editor), so it carries a real
   focus ring; `text-align: start` keeps it correct under RTL. */
.pc-step-btn {
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  color: var(--mamco-glow, #F2EEE5);
  font: inherit;
  text-align: start;
  width: 100%;
  border-radius: 6px;
}
.pc-step-btn::before {
  content: "+";
  color: var(--mamco-accent, #B89A63);
  font-weight: 700;
  margin-inline-end: 8px;
}
.pc-step-btn:hover { color: var(--mamco-accent, #B89A63); }
.pc-step-btn:focus-visible {
  outline: 2px solid var(--mamco-accent, #B89A63);
  outline-offset: 2px;
}

/* Agent hero variant. Same shell as the serviceProviders role heroes so
   an agent profile is visibly part of the same family; the tint differs
   only enough to distinguish the surface. */
.rp-hero--agent { --rp-hero-tint: rgba(184, 154, 99, .16); }

/* ---- Installment discovery (installments.html) ----------------------
   Deliberately restrained: the published TERMS are the content, so the
   card spends its contrast on the figures and keeps the chrome quiet. */
.inst-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Wide enough to read a placeholder, free to shrink on a 390px screen
   rather than forcing the row to overflow sideways. */
.inst-filter { flex: 1 1 150px; min-width: 0; max-width: 220px; }
/* The shared .ps-grid uses auto-FIT, which collapses unused tracks and
   stretches the remaining cards across the full row. That is right for a
   profile page's fixed handful of panels, but wrong here: a genuinely
   quiet market with two published offers would render two ~600px cards
   whose 16:10 covers are ~370px tall. auto-FILL keeps the tracks, so a
   short result set reads as a short result set instead of as two
   billboards. Scoped to this grid -- the shared rule other pages depend
   on is untouched. */
.inst-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.inst-cover {
  aspect-ratio: 16 / 10;
  background: var(--mamco-surface-high, #221E15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.inst-cover-img { width: 100%; height: 100%; object-fit: cover; }
.inst-cover-fallback { font-size: 34px; color: #A79F91; opacity: .5; }
.inst-badge { flex: none; }
/* Two columns of label/value so figures line up down the card; the
   values are tabular so differing digit counts don't ragged-edge. */
.inst-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.inst-term dt {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #A79F91;
}
.inst-term dd {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mamco-glow, #F2EEE5);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.inst-provider {
  font-size: 12.5px;
  color: #A79F91;
  border-top: 1px solid var(--mamco-outline, #5D482B);
  padding-top: 10px;
}
.inst-provider span { color: var(--mamco-glow, #F2EEE5); font-weight: 600; }
@media (max-width: 420px) {
  .inst-filter { max-width: none; flex-basis: 100%; }
}

/* ---- Brand logo circle -------------------------------------------------
   Shared shape/color rule for the Darwesh logo's circular badge -- a
   plain white circle (never a rounded square: the logo image already
   has a near-white background baked into its own pixels, so a
   rectangular container doubled that up as a visible box), no border/
   glow/shadow. Used by both js/site-header.js (own .hdr-mark size, see
   that file's own <style> injection) and js/site-footer.js (own
   .sf-brand-mark / .sf-brand-circle sizes, see css/site-footer.css) --
   each host sizes the circle and its inner image in em relative to its
   own font-size; this rule only owns the shape. */
.brand-logo-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #FFFFFF;
  overflow: hidden;
  line-height: 0;
}

/* PERFORMANCE FOUNDATION (P0-7): opt-in Cross-Document View Transitions.
 * Not "Profile Shell" scoped -- placed here only because this file is
 * one of the two CSS files every one of this site's 42 pages already
 * loads (the other, css/tailwind.css, is a vendored/generated bundle
 * this project doesn't hand-edit). This site is a true multi-page app
 * (see creative-preview/PERFORMANCE_ARCHITECTURE.md section 6) -- this
 * single rule is the realistic way to soften that without a router
 * rewrite: supporting browsers (Chromium-based, as of this writing) get
 * a smooth cross-fade between two same-origin page loads instead of a
 * hard cut; unsupporting browsers (Firefox, Safari) simply ignore an
 * at-rule they don't recognize and see today's plain navigation,
 * unchanged. No JS, no opt-out needed, nothing to fall back from. */
@view-transition {
  navigation: auto;
}