/* Kabayan+ profile themes (feature "custom_themes"). Layout of /profile and
   /member/{slug} is untouched — a theme only swaps colours and the hero
   artwork. profile-themes.js sets data-pfx-theme="<id>" on the .pfx wrapper;
   no attribute (or "default") = the standard look from profile-view.css.
   Each theme block below just fills in the --t-* palette; the shared rules
   underneath do the actual recolouring. Hero art: /assets/profile-themes/<id>.svg */

.pfx[data-pfx-theme] {
  --pf-purple: var(--t-accent);
  --pf-purple-bg: var(--t-abg);
  --pfx-line: var(--t-line);
  --pfx-soft: var(--t-soft);
  --pfx-ink: var(--t-ink);
  --white: var(--t-card);
  --dark: var(--t-ink);
  --muted: var(--t-sub);
  --border: var(--t-line);
  background: var(--t-page);
  border-radius: 22px;
  padding: 18px;
  color: var(--t-ink);
}
@media (max-width: 640px) { .pfx[data-pfx-theme] { padding: 10px; border-radius: 16px; } }

/* ---- Palettes ---------------------------------------------------------- */
.pfx[data-pfx-theme="midnight"], html[data-pfx-page-theme="midnight"] {
  --t-accent: #8F82FF; --t-accent2: #5B8CFF; --t-abg: #262A6B; --t-line: #2E3378; --t-soft: #222663;
  --t-ink: #F1F2FF; --t-sub: #A9AEDD; --t-card: #191C4A; --t-page: #0E1030; --t-track: #2C3172;
  --t-hero-ink: #fff; --t-hero-sub: #C5C9F2; --t-hero-line: rgba(255,255,255,.22); --t-flame: #FFA24A; --t-btn-ink: #fff;
}
.pfx[data-pfx-theme="sunrise"], html[data-pfx-page-theme="sunrise"] {
  --t-accent: #E8522B; --t-accent2: #C93A1A; --t-abg: #FDE5DA; --t-line: #F6D9CB; --t-soft: #FEF0E8;
  --t-ink: #3B1E17; --t-sub: #8A5B4C; --t-card: #FFFFFF; --t-page: #FFF7F2; --t-track: #F6DCCF;
  --t-hero-ink: #3B1E17; --t-hero-sub: #7A4A3A; --t-hero-line: rgba(122,74,58,.22); --t-flame: #E8522B; --t-btn-ink: #fff;
}
.pfx[data-pfx-theme="ocean"], html[data-pfx-page-theme="ocean"] {
  --t-accent: #1B78D6; --t-accent2: #0E4FA8; --t-abg: #DDEEFB; --t-line: #D3E6F3; --t-soft: #EAF5FC;
  --t-ink: #12324F; --t-sub: #52728C; --t-card: #FFFFFF; --t-page: #F3FAFE; --t-track: #D6E8F5;
  --t-hero-ink: #10304E; --t-hero-sub: #3B6180; --t-hero-line: rgba(16,48,78,.2); --t-flame: #F08A24; --t-btn-ink: #fff;
}
.pfx[data-pfx-theme="cosmic"], html[data-pfx-page-theme="cosmic"] {
  --t-accent: #C25CFF; --t-accent2: #7A3DE0; --t-abg: #3A1B78; --t-line: #40217F; --t-soft: #2F1666;
  --t-ink: #F6EFFF; --t-sub: #BFA9E6; --t-card: #22104F; --t-page: #150838; --t-track: #3B2080;
  --t-hero-ink: #fff; --t-hero-sub: #D9C5FA; --t-hero-line: rgba(255,255,255,.22); --t-flame: #FF9E4A; --t-btn-ink: #fff;
}
.pfx[data-pfx-theme="bayanihan"], html[data-pfx-page-theme="bayanihan"] {
  --t-accent: #B9781A; --t-accent2: #7A4A12; --t-abg: #F7E7C4; --t-line: #EBD9AE; --t-soft: #FBF1DA;
  --t-ink: #4A2C0E; --t-sub: #8A6634; --t-card: #FFFBF1; --t-page: #FBF3E0; --t-track: #EBD9AE;
  --t-hero-ink: #3F250B; --t-hero-sub: #6E4A1E; --t-hero-line: rgba(63,37,11,.22); --t-flame: #D9691A; --t-btn-ink: #fff;
}
.pfx[data-pfx-theme="sandigang"], html[data-pfx-page-theme="sandigang"] {
  --t-accent: #C8202F; --t-accent2: #9B1422; --t-abg: #FBE1E4; --t-line: #DCE2F2; --t-soft: #EEF1FA;
  --t-ink: #142455; --t-sub: #5B6799; --t-card: #FFFFFF; --t-page: #F5F7FC; --t-track: #DCE2F2;
  --t-hero-ink: #fff; --t-hero-sub: #D5DCF5; --t-hero-line: rgba(255,255,255,.25); --t-flame: #F8C93B; --t-btn-ink: #fff;
}
.pfx[data-pfx-theme="barong"], html[data-pfx-page-theme="barong"] {
  --t-accent: #C98A14; --t-accent2: #8A5A0A; --t-abg: #F7E8C6; --t-line: #EBDBB4; --t-soft: #FBF3DF;
  --t-ink: #3E1C0E; --t-sub: #86643F; --t-card: #FFFCF4; --t-page: #FBF6E9; --t-track: #EBDBB4;
  --t-hero-ink: #3E1C0E; --t-hero-sub: #6F4A28; --t-hero-line: rgba(62,28,14,.2); --t-flame: #D9691A; --t-btn-ink: #fff;
}
.pfx[data-pfx-theme="sakura"], html[data-pfx-page-theme="sakura"] {
  --t-accent: #E2477F; --t-accent2: #BC2C62; --t-abg: #FDE1EC; --t-line: #F7D6E3; --t-soft: #FFF0F6;
  --t-ink: #4A1D33; --t-sub: #94566F; --t-card: #FFFFFF; --t-page: #FFF6FA; --t-track: #F7D6E3;
  --t-hero-ink: #4A1D33; --t-hero-sub: #86486A; --t-hero-line: rgba(74,29,51,.2); --t-flame: #F08A24; --t-btn-ink: #fff;
}
.pfx[data-pfx-theme="forest"], html[data-pfx-page-theme="forest"] {
  --t-accent: #17936F; --t-accent2: #0E5E48; --t-abg: #D8F1E6; --t-line: #D2E9DE; --t-soft: #EAF7F1;
  --t-ink: #0F3A2E; --t-sub: #4E7A69; --t-card: #FFFFFF; --t-page: #F2F9F5; --t-track: #D2E9DE;
  --t-hero-ink: #fff; --t-hero-sub: #CDEFE0; --t-hero-line: rgba(255,255,255,.25); --t-flame: #FFA24A; --t-btn-ink: #fff;
}

.pfx[data-pfx-theme] { --t-panel: rgba(255,255,255,.5); }
.pfx[data-pfx-theme="midnight"], .pfx[data-pfx-theme="cosmic"],
.pfx[data-pfx-theme="sandigang"], .pfx[data-pfx-theme="forest"] { --t-panel: rgba(8,8,40,.38); }

/* ---- Hero ---------------------------------------------------------------- */
.pfx[data-pfx-theme] .pfx-hero {
  background: var(--t-hero-art) var(--t-art-x, 50%) center / cover no-repeat, var(--t-page);
  border-color: var(--t-line);
  box-shadow: 0 2px 10px rgba(20,20,60,.08);
}
.pfx[data-pfx-theme] .pfx-hero-decor { display: none; }
/* keeps the stats readable when the artwork runs behind them */
.pfx[data-pfx-theme] .pfx-hero-stats { background: var(--t-panel); border-radius: 14px; padding: 8px 0; }
@media (max-width: 860px) { .pfx[data-pfx-theme] .pfx-hero-stats { padding: 12px 0; } }
.pfx[data-pfx-theme] .pfx-name { color: var(--t-hero-ink); }
.pfx[data-pfx-theme] .pfx-hero-meta,
.pfx[data-pfx-theme] .pfx-hero-stat-label,
.pfx[data-pfx-theme] .pfx-hero-stat:first-child .pfx-hero-stat-label,
.pfx[data-pfx-theme] .pfx-hero-stat:last-child .pfx-hero-stat-label { color: var(--t-hero-sub); }
.pfx[data-pfx-theme] .pfx-hero-stat-num { color: var(--t-hero-ink); }
.pfx[data-pfx-theme] .pfx-hero-stat { border-left-color: var(--t-hero-line); }
.pfx[data-pfx-theme] .pfx-hero-meta-item svg,
.pfx[data-pfx-theme] .pfx-hero-stat-icon { color: var(--t-hero-ink); }
.pfx[data-pfx-theme] .pfx-hero-stat-icon.pfx-flame { color: var(--t-flame); }
.pfx[data-pfx-theme] .pfx-hero-stat-link:hover .pfx-hero-stat-num { color: var(--t-hero-ink); opacity: .85; }
.pfx[data-pfx-theme] .pfx-hero-bar::before { background: var(--t-hero-line); }
.pfx[data-pfx-theme] .pfx-hero-bar-fill,
.pfx[data-pfx-theme] .pfx-bar-fill { background: linear-gradient(90deg, var(--t-accent), var(--t-accent2)); }
.pfx[data-pfx-theme] .pf-avatar,
.pfx[data-pfx-theme] .pf-avatar-placeholder { border-color: #fff; }
.pfx[data-pfx-theme] .pf-camera-btn { background: #fff; }
.pfx[data-pfx-theme] .pf-role-badge { background: rgba(255,255,255,.88); color: var(--t-accent2); }
.pfx[data-pfx-theme] .pf-btn-primary { background: var(--t-accent); color: var(--t-btn-ink); }
@media (max-width: 860px) {
  .pfx[data-pfx-theme] .pfx-hero-stats { border-top-color: var(--t-hero-line); }
}

/* ---- Tabs, cards, text --------------------------------------------------- */
.pfx[data-pfx-theme] .pfx-tabs { border-bottom-color: var(--t-line); }
.pfx[data-pfx-theme] .pfx-tab { color: var(--t-sub); }
.pfx[data-pfx-theme] .pfx-tab:hover,
.pfx[data-pfx-theme] .pfx-tab.active { color: var(--t-accent); }
.pfx[data-pfx-theme] .pfx-tab.active { border-bottom-color: var(--t-accent); }
.pfx[data-pfx-theme] .pf-card { background: var(--t-card); border-color: var(--t-line); box-shadow: 0 1px 4px rgba(10,10,40,.08); }
.pfx[data-pfx-theme] .pf-card-title,
.pfx[data-pfx-theme] .pfx-level-name,
.pfx[data-pfx-theme] .pfx-streak-big,
.pfx[data-pfx-theme] .pfx-contrib-num { color: var(--t-ink); }
.pfx[data-pfx-theme] .pf-btn-outline { background: var(--t-card); color: var(--t-ink); border-color: var(--t-line); }
.pfx[data-pfx-theme] .pf-btn-outline:hover { border-color: var(--t-accent); }
.pfx[data-pfx-theme] .pfx-hero .pf-btn-outline { background: rgba(255,255,255,.9); color: #1B1B3A; }

.pfx[data-pfx-theme] .pfx-friends-count,
.pfx[data-pfx-theme] .pfx-contrib-label,
.pfx[data-pfx-theme] .pfx-act-text,
.pfx[data-pfx-theme] .pfx-bar-labels,
.pfx[data-pfx-theme] .pfx-streak-sub,
.pfx[data-pfx-theme] .pfx-week-day,
.pfx[data-pfx-theme] .pfx-post-stats,
.pfx[data-pfx-theme] .pfx-post-action,
.pfx[data-pfx-theme] .pfx-post-composer-tools,
.pfx[data-pfx-theme] .pfx-about-row-label,
.pfx[data-pfx-theme] .pfx-about-row svg { color: var(--t-sub); }
.pfx[data-pfx-theme] .pfx-bar-labels span:last-child { color: var(--t-accent); }
.pfx[data-pfx-theme] .pfx-about-rows,
.pfx[data-pfx-theme] .pfx-act-row,
.pfx[data-pfx-theme] .pfx-post-actions,
.pfx[data-pfx-theme] .pfx-post-composer-tools,
.pfx[data-pfx-theme] .pfx-xph-row { border-color: var(--t-line); }
.pfx[data-pfx-theme] .pfx-bar { background: var(--t-track); }
.pfx[data-pfx-theme] .pfx-hero-bar::before { background: var(--t-hero-line); }
.pfx[data-pfx-theme] .pfx-nodes::before { background: var(--t-track); }
.pfx[data-pfx-theme] .pfx-node-dot { background: var(--t-track); }
.pfx[data-pfx-theme] .pfx-node.done .pfx-node-dot { background: var(--t-accent); }
.pfx[data-pfx-theme] .pfx-week-dot { border-color: var(--t-track); }
.pfx[data-pfx-theme] .pfx-week-day.visited .pfx-week-dot { background: var(--t-flame); border-color: var(--t-flame); }
.pfx[data-pfx-theme] .pfx-week-day.today .pfx-week-dot { border-color: var(--t-accent); }
.pfx[data-pfx-theme] .pfx-week-day.today.visited .pfx-week-dot { box-shadow: 0 0 0 2px var(--t-card), 0 0 0 4px var(--t-accent); }
.pfx[data-pfx-theme] .pfx-friend img,
.pfx[data-pfx-theme] .pfx-friend > div:first-child { border-color: var(--t-line); }
.pfx[data-pfx-theme] .pfx-post-avatar { background: var(--t-track); }
.pfx[data-pfx-theme] .pfx-post-composer-top:hover .pfx-post-composer-input { background: var(--t-abg); }
.pfx[data-pfx-theme] .pfx-post-action:hover:not(:disabled) { background: var(--t-soft); }
.pfx[data-pfx-theme] .pfx-ach-tile,
.pfx[data-pfx-theme] .pfx-ach-row-icon { background: var(--t-abg); }
.pfx[data-pfx-theme] .pfx-ach-pct { box-shadow: 0 0 0 3px var(--t-card); }
.pfx[data-pfx-theme] .pfx-ach-ring { background: conic-gradient(var(--t-accent) calc(var(--pct) * 1%), var(--t-track) 0); }
.pfx[data-pfx-theme] .pfx-ach-ring.maxed { background: conic-gradient(#1E8449 calc(var(--pct) * 1%), var(--t-track) 0); }
.pfx[data-pfx-theme] .pfx-empty-box svg { color: var(--t-track); }
.pfx[data-pfx-theme] .pfx-freeze:not(.used) { color: var(--t-accent); }

/* Level hexagon follows the accent */
.pfx[data-pfx-theme] .pfx-hex stop:first-child { stop-color: var(--t-accent); }
.pfx[data-pfx-theme] .pfx-hex stop:last-child { stop-color: var(--t-accent2); }

/* Text inputs on the page (post composer, comments, referral code) on dark cards */
.pfx[data-pfx-theme] .pfx-post-input,
.pfx[data-pfx-theme] .rf-redeem-row input { background: var(--t-soft); color: var(--t-ink); border-color: var(--t-line); }
.pfx[data-pfx-theme] .rf-code { background: var(--t-abg); }

/* ---- Hero artwork ---------------------------------------------------------- */
.pfx[data-pfx-theme="midnight"]  { --t-hero-art: url("/assets/profile-themes/midnight.svg"); }
.pfx[data-pfx-theme="sunrise"]   { --t-hero-art: url("/assets/profile-themes/sunrise.svg"); }
.pfx[data-pfx-theme="ocean"]     { --t-hero-art: url("/assets/profile-themes/ocean.svg"); }
.pfx[data-pfx-theme="cosmic"]    { --t-hero-art: url("/assets/profile-themes/cosmic.svg"); }
.pfx[data-pfx-theme="bayanihan"] { --t-hero-art: url("/assets/profile-themes/bayanihan.svg"); }
.pfx[data-pfx-theme="sandigang"] { --t-hero-art: url("/assets/profile-themes/sandigang.svg"); }
.pfx[data-pfx-theme="barong"]    { --t-hero-art: url("/assets/profile-themes/barong.svg"); }
.pfx[data-pfx-theme="sakura"]    { --t-hero-art: url("/assets/profile-themes/sakura.svg"); }
.pfx[data-pfx-theme="forest"]    { --t-hero-art: url("/assets/profile-themes/forest.svg"); }

/* The main feature of every artwork (sun, moon, planet, mountain, palm...) is
   drawn in the right-hand part of the picture, and the picture is anchored to
   the right edge. However narrow the hero gets, the crop only ever trims the
   left side, so that feature always stays in view. */
.pfx[data-pfx-theme] { --t-art-x: 100%; }

/* ---- Mobile hero ------------------------------------------------------------
   The artwork stays full-bleed behind the whole hero so it blends into the
   page. On light themes a soft light veil sits over it on phones, so the name
   and stats stay readable without switching to a plain card. */
.pfx[data-pfx-theme="sunrise"], .pfx[data-pfx-theme="ocean"], .pfx[data-pfx-theme="bayanihan"],
.pfx[data-pfx-theme="barong"], .pfx[data-pfx-theme="sakura"] { --t-scrim: rgba(255,255,255,.5); }
@media (max-width: 640px) {
  .pfx[data-pfx-theme] .pfx-hero {
    background: linear-gradient(var(--t-scrim, transparent), var(--t-scrim, transparent)), var(--t-hero-art) var(--t-art-x, 50%) center / cover no-repeat, var(--t-page);
  }
  .pfx[data-pfx-theme] .pfx-hero-stats { background: var(--t-panel); }
  .pfx[data-pfx-theme="sunrise"] .pfx-hero-stats, .pfx[data-pfx-theme="ocean"] .pfx-hero-stats,
  .pfx[data-pfx-theme="bayanihan"] .pfx-hero-stats, .pfx[data-pfx-theme="barong"] .pfx-hero-stats,
  .pfx[data-pfx-theme="sakura"] .pfx-hero-stats { background: rgba(255,255,255,.7); }
}

/* ---- Theme picker (Edit profile) ------------------------------------------- */
.pft-lead { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.pft-upsell { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #FFF3D6; border: 1px solid #F0D48A; color: #6B4700; border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.pft-upsell a { color: #6B4700; font-weight: 700; white-space: nowrap; }
.pft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pft-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 2px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; cursor: pointer; font: inherit; color: inherit; }
.pft-card:hover { border-color: #4B3FD1; }
.pft-card.selected { border-color: #4B3FD1; box-shadow: 0 0 0 3px rgba(75,63,209,.18); }
.pft-card.locked { cursor: pointer; }
.pft-card.locked .pft-thumb { filter: saturate(.85); }
.pft-thumb { height: 64px; background-size: cover; background-position: center; background-color: #EEEAFB; }
.pft-body { padding: 9px 11px 10px; }
.pft-name { display: block; font-size: 13.5px; font-weight: 700; color: #1B1B3A; }
.pft-tag { display: block; font-size: 11.5px; color: #777; margin-top: 1px; }
.pft-dots { display: flex; gap: 5px; margin-top: 7px; }
.pft-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.pft-check, .pft-lock { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.pft-check { background: #4B3FD1; color: #fff; }
.pft-lock { background: rgba(255,255,255,.92); color: #6B4700; }
.pft-card.selected .pft-check { display: flex; }
.pft-card.locked .pft-lock { display: flex; }
.pft-status { font-size: 12.5px; margin-top: 10px; min-height: 1em; }

/* ---- Full-width page colour -------------------------------------------------
   profile-themes.js also puts data-pfx-page-theme on <html>, so the theme's
   background colour (--t-page) fills the whole screen edge to edge, not just
   the rounded panel around the profile. Only the colour goes full width; the
   hero artwork stays inside the hero. */
html[data-pfx-page-theme] { background: var(--t-page); }
html[data-pfx-page-theme] body { background: transparent; }