/* ============================================================================
   AMAADOR FREELANCERS — site override (freelancer-rate.com)  ·  Design 3.0
   Loads AFTER amaador-design-system.css AND styles.css.
   1) Sets the site accent.  2) Remaps styles.css's token vocabulary
   (bg tokens, accent tokens, text tokens, glass tokens, font tokens, gold aliases, counter-accents)
   onto the monochrome Design 3.0 palette so every token-driven rule + inline
   style re-skins at once. No colored hex left driving color.
   ============================================================================ */
:root { --accent: #4A3A1A; } /* Bronze — used sparingly (nav-active accents) */

:root{
  /* ---- backgrounds → monochrome ---- */
  --bg-0:#07080F; --bg-1:#040508; --bg-2:#0C0D18; --bg-3:#111220;
  --rail-bg:#040508;

  /* ---- glass — frosted dark, no color ---- */
  --glass-bg:rgba(12,13,24,.50); --glass-bg-strong:rgba(24,25,40,.66);
  --glass-border:rgba(255,255,255,.09); --glass-border-strong:rgba(255,255,255,.16);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.06); --blur:22px;

  /* ---- accents → chrome (monochrome). No colored brand fills. ---- */
  --accent-2:#9496AA; --accent-3:#9496AA;
  --accent-soft:rgba(255,255,255,.08); --accent-line:rgba(255,255,255,.16);
  --magenta:#9496AA; --teal:#9496AA;
  --teal-soft:rgba(255,255,255,.08); --teal-line:rgba(255,255,255,.16);

  /* ---- gold-* aliases → chrome ---- */
  --gold:#C8CAD8; --gold-2:#E8EAF0;
  --gold-soft:rgba(255,255,255,.08); --gold-line:rgba(255,255,255,.16);

  /* ---- semantic — desaturated toward neutral ---- */
  --danger:#c9a8a8; --danger-soft:rgba(255,255,255,.06);
  --success:#9db4a6; --success-soft:rgba(255,255,255,.06);
  --warn:#c9c3a8; --warn-soft:rgba(255,255,255,.06);
  --info:#9496AA; --info-soft:rgba(255,255,255,.06);

  /* ---- text → cool monochrome ink ---- */
  --text-0:#F2F3FA; --text-1:#B8BAD0; --text-2:#6E7090; --text-3:#3A3C52;

  /* ---- CTA → white ---- */
  --cta:#FFFFFF;

  /* ---- glow → neutral chrome, no colored halo ---- */
  --glow-gold:0 0 0 1px rgba(255,255,255,.16),0 10px 38px rgba(0,0,0,.50);
  --glow-teal:0 0 0 1px rgba(255,255,255,.16),0 8px 30px rgba(0,0,0,.42);

  /* ---- gradients → dark-to-chrome, no color ---- */
  --grad:linear-gradient(100deg,#E8EAF0,#C8CAD8 55%,#9496AA);
  --brand-metal:linear-gradient(180deg,#ffffff,#E8EAF0 55%,#C8CAD8);

  /* ---- fonts → Design 3.0 ---- */
  --font-ui:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-display:'Lora','Georgia',serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}

/* ---------------------------------------------------------------------------
   LIGHT THEME — this site's own token vocabulary (--bg-0/--text-0/etc, NOT the
   core's --bg-base/--text-primary names) is what styles.css actually consumes
   throughout, so the core's new html[data-theme="light"] block (which only
   sets ITS OWN token names) cannot reach styles.css on its own. Without this
   block, --bg-0/--text-* would keep falling back to the dark values set in
   :root above and the toggle would still look broken for this site specifically.
   Mirrors the core's light palette: warm off-white surfaces, dark ink. --------- */
html[data-theme="light"]{
  --bg-0:#F2F1EC; --bg-1:#FAF9F6; --bg-2:#FFFFFF; --bg-3:#FFFFFF;
  --rail-bg:#FAF9F6;

  --glass-bg:rgba(255,255,255,.55); --glass-bg-strong:rgba(255,255,255,.78);
  --glass-border:rgba(10,10,15,.10); --glass-border-strong:rgba(10,10,15,.18);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.5); --blur:22px;

  /* --accent: nav-active underline (amaador-design-system.css), .dir-go hover,
     .dp-item.here tile tint, autosave "saving" dot (styles.css). Dark mode uses
     a desaturated bronze (#4A3A1A) as a low-key chrome-adjacent accent; light
     mode darkens it into the same mid-dark chrome family as --gold/--accent-2
     below so it stays legible on the off-white canvas instead of vanishing. */
  --accent:#3D3F52;

  --accent-2:#6B6E85; --accent-3:#6B6E85;
  --accent-soft:rgba(10,10,15,.06); --accent-line:rgba(10,10,15,.14);
  --magenta:#6B6E85; --teal:#6B6E85;
  --teal-soft:rgba(10,10,15,.06); --teal-line:rgba(10,10,15,.14);

  --gold:#3D3F52; --gold-2:#202235;
  --gold-soft:rgba(10,10,15,.06); --gold-line:rgba(10,10,15,.14);

  --danger:#8a5d5d; --danger-soft:rgba(10,10,15,.05);
  --success:#4f7a63; --success-soft:rgba(10,10,15,.05);
  --warn:#8a7d4f; --warn-soft:rgba(10,10,15,.05);
  --info:#6B6E85; --info-soft:rgba(10,10,15,.05);

  --text-0:#14151C; --text-1:#43465A; --text-2:#75778C; --text-3:#B4B6C4;

  --cta:#14151C;

  --glow-gold:0 0 0 1px rgba(10,10,15,.12),0 10px 38px rgba(10,10,15,.10);
  --glow-teal:0 0 0 1px rgba(10,10,15,.12),0 8px 30px rgba(10,10,15,.08);

  --grad:linear-gradient(100deg,#202235,#3D3F52 55%,#6B6E85);
  --brand-metal:linear-gradient(180deg,#14151C,#202235 55%,#3D3F52);
}

/* ===== 2026-07-04 glossy-monochrome polish ===== */

/* ---------------------------------------------------------------------------
   1) MONOCHROME ENFORCEMENT — kill literal saturated hues that the token
   remap above does NOT reach (rules using hardcoded hex/rgba, not tokens).
   Neutralize each to the chrome / white-alpha ladder. --------------------- */

/* Aurora mesh background = full-screen field of violet/blue/magenta/teal blobs.
   Re-cast the same soft-mesh shape as neutral white-alpha lighting on the void. */
body::before{
  background:
    radial-gradient(46% 56% at 6% 32%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(44% 54% at 16% 72%, rgba(255,255,255,.045), transparent 62%),
    radial-gradient(40% 50% at 2% 86%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(38% 46% at 22% 52%, rgba(255,255,255,.035), transparent 60%),
    radial-gradient(50% 60% at 30% 12%, rgba(255,255,255,.03), transparent 64%) !important;
  filter: blur(46px) saturate(1) !important;
}

/* Logo tile — blue drop-shadow glow → neutral */
.brand-mark{ box-shadow:0 8px 24px rgba(0,0,0,.45), var(--glass-inner) !important; }

/* Primary button — blue box-shadow (bg already chrome via tokens/core) */
.btn-primary{ box-shadow:0 8px 26px rgba(0,0,0,.42) !important; }

/* Teal button — literal teal fill + petrol text → chrome sheen on dark */
.btn-teal{
  background:linear-gradient(135deg,#C8CAD8,#9496AA) !important;
  color:#04050A !important;
}

/* Progress bars — literal teal / red gradient stops → chrome / dim-grey */
.bar.teal > span{ background:linear-gradient(90deg,#C8CAD8,#9496AA) !important; }
.bar.danger > span{ background:linear-gradient(90deg,#9496AA,#6E7090) !important; }

/* Directory icon tile — magenta gradient stop → white-alpha */
.dir-ico{
  background:linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,.03)) !important;
  color:#C8CAD8 !important;
}
/* Chip hover used accent-soft/line (remapped) but forced #fff text — keep chrome */
.dir-chip:hover{ color:#F2F3FA !important; }

/* Onboarding backdrop + art — violet/magenta/teal aurora → neutral */
.onb-backdrop{
  background:
    radial-gradient(900px 600px at 70% 10%, rgba(255,255,255,.06), transparent),
    radial-gradient(700px 500px at 12% 90%, rgba(255,255,255,.05), transparent),
    rgba(5,6,9,.86) !important;
}
.onb-art{
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.04) 55%,rgba(255,255,255,.02)) !important;
}

/* Floating FABs — magenta / blue halo glows → neutral shadow */
.fab-donate.near,.fab-donate:hover,.fab-donate:focus-visible,
.fab-tools.near,.fab-tools:hover,.fab-tools:focus-visible,.fab-tools.active,
.fab-net.near,.fab-net:hover,.fab-net:focus-visible,.fab-net.active{
  box-shadow:0 16px 42px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
.fab-donate::after{ box-shadow:0 0 0 0 rgba(255,255,255,.30) !important; }

/* Dock-panel "here" item — blue tint → white-alpha */
.dp-item.here .dp-ico{ background:rgba(255,255,255,.14) !important; color:#E8EAF0 !important; }

/* Autosave status dots — green / blue glow → neutral chrome */
.autosave-line .as-dot{ background:#9db4a6 !important; box-shadow:0 0 6px rgba(255,255,255,.25) !important; }
.autosave-line.saving .as-dot{ background:#C8CAD8 !important; box-shadow:0 0 6px rgba(255,255,255,.40) !important; }

/* ---------------------------------------------------------------------------
   2) DARK THEME REASSERTION — reassert this site's dark token values under
   :root/html/html[data-theme="dark"] so the site's own monochrome ladder
   wins over styles.css defaults. html[data-theme="light"] is intentionally
   EXCLUDED here — the shared core (amaador-design-system.css) now owns a
   complete, correct light-theme token block, and duplicating dark values
   onto the light attribute previously made the theme toggle a no-op. -------- */
:root, html, html[data-theme="dark"]{
  --bg-0:#07080F; --bg-1:#040508; --bg-2:#0C0D18; --bg-3:#111220; --rail-bg:#040508;
  --text-0:#F2F3FA; --text-1:#B8BAD0; --text-2:#6E7090; --text-3:#3A3C52;
}

/* ---------------------------------------------------------------------------
   3) GLOSS REINFORCEMENT — the user wants GLOSSY, not flat matte. Layer a
   specular diagonal sheen + inset top edge-light over this site's real
   surfaces. Additive (background-image), so legitimate backgrounds survive. -- */
.card,.panel,.hero,.dir-card,.kan-card,.dock-panel,.dp-menu,.onb,.palette{
  background-image:linear-gradient(158deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.015) 55%,transparent 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.5) !important;
}

/* ---------------------------------------------------------------------------
   4) SELECTOR OVER-MATCH FIXES — the core's broad [class*="label"] and
   [class*="stat-"] selectors wrongly hit non-eyebrow / non-number classes. -- */

/* [class*="stat-"] forces 42px on caption rows — reset to their real sizes */
.stat-label{ font-size:11.5px !important; letter-spacing:.06em !important; font-weight:600 !important; color:var(--text-2) !important; }
.stat-foot{ font-size:12px !important; font-weight:400 !important; letter-spacing:normal !important; color:var(--text-2) !important; }

/* [class*="label"] force-uppercases + shrinks real button/field text */
.fab-label{ font-size:14px !important; text-transform:none !important; letter-spacing:.01em !important; font-weight:600 !important; color:inherit !important; }
.field-label{ font-size:12.5px !important; text-transform:none !important; letter-spacing:normal !important; color:var(--text-1) !important; }

/* ---------------------------------------------------------------------------
   5) CONTRAST / READABILITY — inputs + placeholder + muted text.
   Switched from hardcoded hex to tokens (previously unconditional hardcoded
   dark hex forced a dark input field even under html[data-theme="light"]);
   token-driven so fields follow whichever theme is active. */
input,select,textarea{ background:var(--bg-2) !important; color:var(--text-0) !important; }
input::placeholder,textarea::placeholder{ color:var(--text-2) !important; }

/* ===== 2026-07-04b round-2 polish ===== */

/* ---------------------------------------------------------------------------
   R2·1) RESIDUAL COLOR-LEAK KILL — leaks round-1 missed. These are glow-shaped
   active indicators + literal-hex badge/text/stop that still read as a jewel
   accent. Force each onto the monochrome / white-alpha ladder with a specific
   selector + !important (styles.css rules lose to override !important). ------ */

/* (a) Active-nav rail marker — glowing gold pip (box-shadow:0 0 10px gold) →
   crisp chrome bar, no halo. Reads as a clean chrome pill accent. */
.nav-item.active::before{
  background:#C8CAD8 !important;
  box-shadow:none !important;
}
/* (b) Active-nav badge — literal warm-brown ink (#1a1200) on chrome pill →
   true near-black for a clean chrome-on-dark read. */
.nav-item.active .nav-badge{ color:#04050A !important; }

/* (c) Active TOC / tab underline — gold bar + gold halo (box-shadow:0 0 8px)
   → crisp chrome hairline, no jewel glow. */
.tab.active{ color:#F2F3FA !important; }
.tab.active::after{
  background:#C8CAD8 !important;
  box-shadow:none !important;
}

/* (d) Segmented-choice selected pill — soft-gold tint fill/text → chrome-filled
   pill so "selected" reads as a solid monochrome chip. */
.seg button.active{
  background:rgba(255,255,255,.14) !important;
  color:#F2F3FA !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
}
/* Language-picker selected row — token-remapped but pin chrome text for clarity. */
.lang-opt.active,.lang-opt.active small{ color:#E8EAF0 !important; }

/* (e) Progress-bar fills — re-assert the chrome ladder over styles.css literal
   gradient stops (#22b8a4 teal / #ef4444 red second-stops) in case round-1's
   rules are pruned. Base bar too. */
.bar > span{ background:linear-gradient(90deg,#E8EAF0,#C8CAD8) !important; }
.bar.teal > span{ background:linear-gradient(90deg,#C8CAD8,#9496AA) !important; }
.bar.danger > span{ background:linear-gradient(90deg,#9496AA,#6E7090) !important; }

/* (f) Live-ticker status dot — teal→chrome (already token-remapped) but pin it
   so the pulsing "online" dot is a neutral chrome pulse, never a teal halo. */
.ticker-dot{ background:#C8CAD8 !important; box-shadow:0 0 6px rgba(255,255,255,.30) !important; }

/* (g) Focus ring — token drives it to chrome already; pin the ladder so no
   jewel outline can ever surface on keyboard focus. */
:focus-visible{ outline-color:#9496AA !important; }
input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.10) !important; }

/* ---------------------------------------------------------------------------
   R2·2) PRIMARY CTA → GLOSSY WHITE. This site's hero/primary call-to-action is
   .btn-primary — the core's white-CTA rule only matches .btn--solid/cta-btn/
   btn-cta, so .btn-primary still renders a chrome gradient with #fff text
   (white-on-light-grey, low contrast). Force it glossy white; keep radius/pad. */
.btn-primary,a.btn-primary,button.btn-primary{
  background:#FFFFFF !important;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#EDEFF5 100%) !important;
  color:#04050A !important;
  border-color:#FFFFFF !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 26px rgba(0,0,0,.42) !important;
}
.btn-primary:hover,a.btn-primary:hover,button.btn-primary:hover{
  filter:brightness(.97) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px rgba(0,0,0,.5) !important;
}
.btn-primary .nav-ico,.btn-primary svg{ color:#04050A !important; }

/* ---------------------------------------------------------------------------
   R2·3) HEADER + NAV BUTTON REFINEMENT.
   (a) Logo links must NOT inherit the core's `nav a` pill (padding/bg/hover).
   Reset every logo/brand anchor for THIS site. */
.amaador-brand-logo,a.amaador-brand-logo,
.brand,.brand-mark,[class*="brand-logo"],[class*="logo"]{
  padding:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.amaador-brand-logo:hover,[class*="brand-logo"]:hover,[class*="logo"]:hover{
  background:none !important; box-shadow:none !important;
}
/* Keep the SPA brand tile's own gradient/glass (it's not a nav pill) — the
   reset above zeroes .brand-mark bg, so restore its intended chrome tile. */
.brand-mark{
  background:linear-gradient(140deg,#E8EAF0,#C8CAD8 55%,#9496AA) !important;
  color:#04050A !important;
  border-radius:13px !important;
}
/* (b) Active rail nav item = clean chrome pill (no jewel underline / tint). */
.nav-item.active{
  background:rgba(255,255,255,.09) !important;
  color:#F2F3FA !important;
  border-color:rgba(255,255,255,.16) !important;
}
.nav-item.active .nav-ico{ color:#E8EAF0 !important; }

/* ---------------------------------------------------------------------------
   R2·4) CHOICE CHIPS / FILTER BUTTONS. The core polishes .pill/.tag/.chip; this
   site's colored pill variants keep a chrome tint via the token remap. Pin the
   selected/active pill to a solid chrome fill so the chosen state is obvious. */
.pill.gold,.pill.teal,.pill.info{ color:#C8CAD8 !important; }
.pill.active,.pill[aria-selected="true"],.tag.active{
  background:rgba(255,255,255,.14) !important;
  color:#F2F3FA !important;
  border-color:rgba(255,255,255,.22) !important;
}
/* Tag-input chips (added tags) — soft-gold fill/text → chrome pill. */
.tag-input .tg{
  background:rgba(255,255,255,.08) !important;
  color:#E8EAF0 !important;
}

/* ---------------------------------------------------------------------------
   R2·5) FOOTER SISTER-SITE ROW — ICONS ONLY, NO VISIBLE TEXT.
   amaador.js progressively enhances the static-page footer's .amaador-net row:
   each <a> keeps its original text in the DOM (title/aria-label + a visually
   hidden .amaador-net-txt span) so it stays crawlable/screen-reader-friendly,
   but visually only the icon shows. This is NOT the FAB launcher (that already
   reveals labels on hover by design and is left untouched) — this is the
   plain crawlable footer nav. Icon-only chips get their own hover/focus tint
   + tooltip-style state so the row never looks broken or unlabeled. ---------- */
.amaador-net.amaador-net--icons{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px;
  vertical-align:middle;
}
.amaador-net.amaador-net--icons > b{ color:var(--text-2); font-weight:600; margin-right:2px; }
/* the literal " · " separators authored between the <a> tags are no longer
   needed once links become icon chips with their own gap; hide them. */
.amaador-net.amaador-net--icons{ font-size:0; }
.amaador-net.amaador-net--icons > b{ font-size:12px; }
.amaador-net.amaador-net--icons a{
  font-size:0; /* collapse the original inline text node's box */
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:8px;
  color:var(--text-2) !important;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  text-decoration:none !important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.amaador-net.amaador-net--icons a svg{ width:15px; height:15px; flex:none; }
/* keep the real label in the DOM (crawlable + read by screen readers) but
   remove it from visual flow — NOT display:none, which some ATs skip. */
.amaador-net.amaador-net--icons a .amaador-net-txt{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; font-size:12px;
}
.amaador-net.amaador-net--icons a:hover,
.amaador-net.amaador-net--icons a:focus-visible{
  background:rgba(255,255,255,.14) !important;
  color:#F2F3FA !important;
  border-color:rgba(255,255,255,.22) !important;
  transform:translateY(-1px);
}
.amaador-net.amaador-net--icons a:focus-visible{
  outline:2px solid rgba(255,255,255,.5); outline-offset:2px;
}
/* light theme: swap the chip surface for the light-token ladder */
html[data-theme="light"] .amaador-net.amaador-net--icons a{
  background:rgba(10,10,15,.04);
  border-color:var(--glass-border);
}
html[data-theme="light"] .amaador-net.amaador-net--icons a:hover,
html[data-theme="light"] .amaador-net.amaador-net--icons a:focus-visible{
  background:rgba(10,10,15,.08) !important;
  color:var(--text-1) !important;
}