/* Instagram-style theme for personal.html#rolemodels -- active only while
   body.theme-stories is set by assets/personal-stories.js.
   v1 (2026-09-29): profile header, story rings coloured by stars (rainbow 5★,
   green 4★, grey ≤3★), profession highlights, 3-column grid, full-screen
   story viewer with auto-advancing progress bars. */

body.theme-stories {
    --ig-bg: #000; --ig-text: #f5f5f5; --ig-sub: #a8a8a8; --ig-line: #262626;
    --ig-grad: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
    background: #000;
}
body.theme-stories .gallery-wrap { max-width: 935px; padding: 0 16px 5rem; }
body.theme-stories .back-bar,
body.theme-stories .hero-title,
body.theme-stories .hero-sub,
body.theme-stories .category-view-header,
body.theme-stories .pcms-admin-only[onclick="openDraftModal()"],
body.theme-stories[data-ig-cat="rolemodels"] .gallery-section[data-category="rolemodels"] { display: none !important; }

#storiesView { display: none; font-family: -apple-system, 'Segoe UI', 'Outfit', 'Mitr', var(--font-body, 'Plus Jakarta Sans', 'Sarabun'), sans-serif; color: var(--ig-text); }
body.theme-stories #storiesView { display: block; }

/* ---------- top bar + profile ---------- */
.ig-top { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; height: 52px; border-bottom: 1px solid var(--ig-line); margin: 0 -16px; padding: 0 12px; }
.ig-back, .ig-add { background: none; border: 0; color: var(--ig-text); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px 4px; }
.ig-add { font-size: 1.5rem; justify-self: end; }
.ig-handle { text-align: center; font-weight: 700; font-size: 1.05rem; }
.ig-profile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 14px 28px; align-items: center; padding: 26px 0 20px; }
.ig-me { width: 150px; height: 150px; grid-row: 1 / span 2; }
.ig-me .ig-av { font-size: 3.4rem; }
.ig-stats { display: flex; gap: 34px; font-size: 1rem; }
.ig-stats span { display: flex; flex-direction: column; align-items: center; color: var(--ig-sub); font-size: .88rem; }
.ig-stats b { color: var(--ig-text); font-size: 1.2rem; font-weight: 700; }
.ig-bio { display: flex; flex-direction: column; gap: 3px; font-size: .92rem; line-height: 1.4; }
.ig-bio span { color: #d6d6d6; }
.ig-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--ig-sub) !important; margin-top: 4px; }
.ig-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 6px; }
.ig-dot:first-child { margin-left: 0; }
.ig-dot.is-r5 { background: var(--ig-grad); }
.ig-dot.is-r4 { background: #1ed760; }
.ig-dot.is-rx { background: #555; }

/* ---------- rings / avatars ---------- */
.ig-ring { position: relative; display: inline-grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; padding: 3px; border: 0; cursor: pointer; background: #555; flex: 0 0 auto; }
.ig-ring.is-r5 { background: var(--ig-grad); }
.ig-ring.is-r4 { background: #1ed760; }
.ig-av { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #262626; border: 3px solid #000; box-sizing: border-box; }
.ig-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-noav { font-size: 1.8rem; }
.ig-ring.is-sm { width: 38px; height: 38px; padding: 2px; }
.ig-ring.is-sm .ig-av { border-width: 2px; }

/* ---------- stories tray + highlights ---------- */
.ig-tray, .ig-highlights { display: flex; gap: 16px; overflow-x: auto; padding: 8px 2px 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.ig-tray::-webkit-scrollbar, .ig-highlights::-webkit-scrollbar { height: 6px; }
.ig-tray::-webkit-scrollbar-track, .ig-highlights::-webkit-scrollbar-track { background: transparent; }
.ig-tray::-webkit-scrollbar-thumb, .ig-highlights::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
.ig-tray::-webkit-scrollbar-thumb:hover, .ig-highlights::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.ig-tray { border-top: 1px solid var(--ig-line); padding-top: 18px; }
.ig-story, .ig-hl { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ig-text); }
.ig-story:hover .ig-ring, .ig-hl:hover .ig-hl-ring { transform: scale(1.05); }
.ig-ring, .ig-hl-ring { transition: transform .15s ease; }
.ig-story-name { max-width: 84px; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-hl-ring { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 1px solid #3a3a3a; padding: 3px; }
.ig-hl-in { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #1a1a1a; }
.ig-hl-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ig-hl-ico { position: relative; font-size: 1.7rem; filter: drop-shadow(0 1px 3px #000); }
/* Highlights filter the grid: the chosen one gets the IG gradient ring,
   the rest fade back. */
.ig-hl.is-on .ig-hl-ring { border: 0; padding: 3px; background: var(--ig-grad); }
.ig-hl.is-on .ig-hl-in { border: 3px solid #000; box-sizing: border-box; }
.ig-hl.is-on .ig-hl-in img { opacity: .8; }
.ig-hl.is-on .ig-story-name { font-weight: 700; }
#storiesView.is-filtering .ig-hl:not(.is-on) { opacity: .45; }
#storiesView.is-filtering .ig-hl:not(.is-on):hover { opacity: .8; }
.ig-hl { transition: opacity .15s ease; }

/* ---------- grid ---------- */
.ig-tabs { position: relative; display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--ig-line); margin-top: 8px; }
.ig-clear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #262626; color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.ig-clear:hover { background: #363636; }
.ig-clear:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ig-tabs span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: 14px 0; color: var(--ig-sub); }
.ig-tabs .is-on { color: var(--ig-text); border-top: 1px solid var(--ig-text); margin-top: -1px; font-weight: 600; }
.ig-grid-outer {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    padding-bottom: 24px;
}
.ig-grid-track.is-marq {
    display: flex;
    width: max-content;
}
.ig-grid-track.is-marq:hover {
    animation-play-state: paused;
}
.ig-grid-set {
    display: flex;
    gap: 14px;
    padding-right: 14px;
}
.ig-cell { display: flex; flex-direction: column; min-width: 0; flex: 0 0 clamp(160px, 35vw, 240px); }
.ig-cell > .ig-post { width: 100%; }

/* Kind tabs: 👥 all · 🎯 role models · 💖 just a fan */
.ig-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 18px; }
.ig-kind { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; border-radius: 12px; border: 1px solid #363636; background: #121212;
    color: var(--ig-text); font: inherit; font-size: .95rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.ig-kind:hover { background: #1c1c1c; border-color: #4a4a4a; }
.ig-kind:active { transform: scale(.98); }
.ig-kind-ico { font-size: 1.15rem; line-height: 1; }
.ig-kind b { font-weight: 600; white-space: nowrap; }
.ig-kind-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #2a2a2a; color: #d6d6d6; font-size: .78rem; font-weight: 700; text-align: center; }
.ig-kind.is-on { border-color: transparent; background: #f5f5f5; color: #000; }
.ig-kind.is-on .ig-kind-n { background: #000; color: #fff; }
.ig-kind.is-model.is-on { background: linear-gradient(135deg, #feda75, #fa7e1e 55%, #d62976); color: #1a0b00; }
.ig-kind.is-fan.is-on { background: linear-gradient(135deg, #ff9ecf, #d62976 60%, #962fbf); color: #fff; }
.ig-kind.is-fan.is-on .ig-kind-n { background: rgba(0,0,0,0.35); }
.ig-kind:focus-visible, .ig-kind-set button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ig-kind-todo { display: inline-block; margin: -8px 0 16px; font-size: .82rem; color: #ffd66b; background: rgba(255, 214, 107, 0.1); border: 1px solid rgba(255, 214, 107, 0.2); padding: 6px 12px; border-radius: 12px; cursor: pointer; font: inherit; transition: all 0.15s ease; }
.ig-kind-todo:hover { background: rgba(255, 214, 107, 0.2); }
.ig-kind-todo.is-on { background: #ffd66b; color: #121212; font-weight: 600; }
.ig-kind-todo.is-err { color: #ff6b6b; }
.ig-empty { text-align: center; color: var(--ig-sub); padding: 30px 10px; margin: 0; }
.ig-post-kind { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .85rem; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.7); }
/* Edit mode: two toggles under every photo. */

.ig-kind-set { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px 0 6px; }
.ig-kind-set button { padding: 6px 4px; border-radius: 6px; border: 1px solid #363636; background: #121212; color: #bdbdbd; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.15s ease; position: relative; z-index: 10; pointer-events: auto; }
.ig-kind-set button:hover { border-color: #888; background: #2a2a2a; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.ig-kind-set button:active { transform: scale(0.96); }
.ig-kind-set button.is-on.is-model { background: #fa7e1e; border-color: #fa7e1e; color: #1a0b00; transform: none; box-shadow: none; }
.ig-kind-set button.is-on.is-fan { background: #d62976; border-color: #d62976; color: #fff; transform: none; box-shadow: none; }
.ig-kind-set.is-sv { margin-bottom: 4px; }

.ig-post { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1a; border: 0; padding: 0; cursor: pointer; color: #fff; font: inherit; }
.ig-post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ig-post .ig-noav { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; }
.ig-post-hover { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: .85rem; font-weight: 600; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity .15s ease; }
.ig-post-play { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.9); color: #111; font-size: 1.1rem; padding-left: 3px; }
/* Name + profession tag, always visible, on a fade so faces stay clear. */
.ig-post::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }
.ig-post-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; }
.ig-post-cap b { font-size: .95rem; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,0.7); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(38,38,38,0.85); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(4px); }
.ig-post:hover .ig-post-hover, .ig-post:focus-visible .ig-post-hover { opacity: 1; }
.ig-post:hover img { transform: scale(1.03); }
.ig-post-badge { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ig-post-badge.is-r5 { background: linear-gradient(135deg, #F3C351, #D89823); color: #1a0b00; text-shadow: none; box-shadow: 0 4px 12px rgba(243, 195, 81, 0.4); border: 1px solid #FFE49E; }
.ig-post-badge.is-r4 { background: linear-gradient(135deg, #8A52F3, #5D24C7); box-shadow: 0 4px 10px rgba(138, 82, 243, 0.3); }
.ig-post-badge.is-r3 { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.ig-post-badge.is-r2 { background: linear-gradient(135deg, #10B981, #047857); }
.ig-post-badge.is-r1 { background: #555; }
.ig-story:focus-visible, .ig-hl:focus-visible, .ig-post:focus-visible, .ig-ring:focus-visible, .ig-back:focus-visible, .ig-add:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- story viewer ---------- */
.ig-sv { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; gap: 18px; background: #1a1a1a; font-family: -apple-system, 'Segoe UI', 'Outfit', 'Mitr', 'Plus Jakarta Sans', 'Sarabun', sans-serif; color: #fff; }
.ig-sv-bg { position: absolute; inset: 0; overflow: hidden; }
.ig-sv-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) brightness(.35); transform: scale(1.2); }
.ig-sv-frame { position: relative; z-index: 1; width: min(420px, 100vw); height: min(calc(420px * 16 / 9), 100dvh); border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 20px 70px rgba(0,0,0,0.6); }
.ig-sv-media { position: absolute; inset: 0; }
.ig-sv-media img { width: 100%; height: 100%; object-fit: cover; }
.ig-sv-media .ig-noav { display: grid; place-items: center; height: 100%; font-size: 5rem; }
.ig-sv-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.8) 100%); z-index: 1; }
.ig-sv-bars { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3; display: flex; gap: 3px; }
.ig-sv-bar { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.35); overflow: hidden; }
.ig-sv-bar i { display: block; height: 100%; background: #fff; }
.ig-sv-head { position: absolute; left: 10px; right: 8px; top: 18px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.ig-sv-who { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.ig-sv-who b { font-size: .92rem; }
.ig-sv-who span { font-size: .76rem; opacity: .85; }
.ig-sv-btn { background: none; border: 0; color: #fff; font-size: 1.05rem; cursor: pointer; padding: 6px 8px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.ig-sv-tap { position: absolute; top: 70px; bottom: 120px; z-index: 2; cursor: pointer; }
.ig-sv-tap.is-l { left: 0; width: 34%; }
.ig-sv-tap.is-r { right: 0; width: 66%; }
.ig-sv-foot { position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.ig-sv-stars { font-size: 1.2rem; color: #ffd66b; letter-spacing: .06em; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.ig-sv-stars i { font-style: normal; color: rgba(255,255,255,0.3); }
.ig-sv-text { margin: 0; font-size: .95rem; line-height: 1.45; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.ig-sv-more { align-self: flex-start; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); color: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .85rem; cursor: pointer; backdrop-filter: blur(6px); }
.ig-sv-more:hover { background: rgba(255,255,255,0.3); }
.ig-sv-nav { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.85); color: #111; font-size: 1.4rem; line-height: 1; cursor: pointer; padding-bottom: 3px; }
.ig-sv-nav:disabled { opacity: 0; pointer-events: none; }
.ig-sv button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

body.theme-stories .modal-content { background: #121212; border-color: #262626; }

@media (prefers-reduced-motion: reduce) { .ig-post img, .ig-ring, .ig-hl-ring { transition: none; } }
@media (max-width: 640px) {
    .ig-profile { grid-template-columns: auto 1fr; gap: 12px 18px; padding: 18px 0 14px; }
    .ig-me { width: 86px; height: 86px; grid-row: 1; }
    .ig-me .ig-av { font-size: 2.2rem; }
    .ig-stats { gap: 18px; justify-content: space-around; }
    .ig-bio { grid-column: 1 / -1; }
    .ig-ring { width: 68px; height: 68px; }
    .ig-story, .ig-hl { width: 72px; }
    .ig-story-name { max-width: 72px; }
    .ig-hl-ring { width: 64px; height: 64px; }
    .ig-grid { gap: 10px; }
    .ig-post-cap { left: 6px; right: 6px; bottom: 6px; gap: 3px; }
    .ig-post-cap b { font-size: .74rem; }
    .ig-tag { font-size: .6rem; padding: 2px 6px; }
    .ig-kinds { gap: 6px; }
    .ig-kind { flex-direction: column; gap: 3px; padding: 9px 4px; font-size: .84rem; }
    .ig-post-kind { top: 5px; left: 5px; width: 22px; height: 22px; font-size: .72rem; }
    .ig-kind-set button { font-size: .64rem; padding: 5px 2px; }
    .ig-sv { gap: 0; background: #000; }
    .ig-sv-nav { display: none; }
    .ig-sv-frame { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* Admin add: Instagram's blue "Follow" button */
.ig-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.ig-add-pill { flex: 0 1 220px; border: 0; border-radius: 8px; padding: 8px 16px; background: #0095f6; color: #fff; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.ig-add-pill:hover { background: #1877f2; }
.ig-add-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Category Tag Colors */
.ig-tag.is-finance { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.ig-tag.is-actor { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.ig-tag.is-idol { background: rgba(236, 72, 153, 0.2); color: #f472b6; border: 1px solid rgba(236,72,153,0.3); }
.ig-tag.is-singerband { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168,85,247,0.3); }
.ig-tag.is-ceo { background: rgba(234, 179, 8, 0.2); color: #facc15; border: 1px solid rgba(234,179,8,0.3); }
.ig-tag.is-sport { background: rgba(249, 115, 22, 0.2); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
.ig-tag.is-business { background: rgba(14, 165, 233, 0.2); color: #38bdf8; border: 1px solid rgba(14,165,233,0.3); }
.ig-tag.is-composer { background: rgba(20, 184, 166, 0.2); color: #2dd4bf; border: 1px solid rgba(20,184,166,0.3); }
.ig-tag.is-contentcreator { background: rgba(244, 63, 94, 0.2); color: #fb7185; border: 1px solid rgba(244,63,94,0.3); }