Files
2026-09-18 00:01:42 +02:00

722 lines
54 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en" style=""><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&amp;family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;display=swap" rel="stylesheet"/><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script><script id="tailwind-config">tailwind.config = { darkMode: 'class', theme: { extend: { colors: { 'on-tertiary-container': '#e1f9db', 'surface-container': '#f1ede6', 'on-primary-container': '#ffefe1', 'primary-fixed-dim': '#d9c3ac', 'tertiary-fixed-dim': '#b5cdb0', 'surface': '#fdf9f2', 'on-secondary-fixed-variant': '#713714', 'surface-container-lowest': '#ffffff', 'error-container': '#ffdad6', 'primary': '#635341', 'outline-variant': '#d0c4ba', 'tertiary': '#465b44', 'surface-dim': '#dddad3', 'primary-container': '#7d6b58', 'outline': '#7f756d', 'on-error-container': '#93000a', 'surface-bright': '#fdf9f2', 'background': '#fdf9f2', 'secondary-container': '#feaa7f', 'tertiary-container': '#5e745c', 'surface-tint': '#6c5b49', 'on-secondary-container': '#783d1a', 'on-primary-fixed-variant': '#544433', 'on-primary-fixed': '#25190b', 'tertiary-fixed': '#d1e9cc', 'on-error': '#ffffff', 'on-secondary': '#ffffff', 'on-tertiary-fixed-variant': '#374c36', 'on-surface': '#1c1c18', 'surface-container-high': '#ece8e1', 'secondary': '#8e4d2a', 'secondary-fixed-dim': '#ffb691', 'secondary-fixed': '#ffdbcb', 'inverse-surface': '#31302c', 'inverse-on-surface': '#f4f0e9', 'on-primary': '#ffffff', 'primary-fixed': '#f6dfc7', 'on-surface-variant': '#4d453e', 'surface-container-highest': '#e6e2db', 'on-tertiary-fixed': '#0d200d', 'on-secondary-fixed': '#341100', 'on-background': '#1c1c18', 'surface-variant': '#e6e2db', 'on-tertiary': '#ffffff', 'error': '#ba1a1a', 'inverse-primary': '#d9c3ac', 'surface-container-low': '#f7f3ec' }, borderRadius: { DEFAULT: '1rem', lg: '2rem', xl: '3rem', full: '9999px' }, spacing: { 'space-xs': '0.25rem', 'margin': '1.5rem', 'gutter': '1rem', 'space-xl': '2.5rem', 'margin-mobile': '1.25rem', 'gutter-mobile': '0.75rem', 'space-sm': '0.5rem', 'space-lg': '1.5rem', 'space-md': '1rem' }, fontFamily: { 'label-lg': ['Plus Jakarta Sans'], 'label-sm': ['Plus Jakarta Sans'], 'headline-xl-mobile': ['Newsreader'], 'body-lg': ['Plus Jakarta Sans'], 'body-sm': ['Plus Jakarta Sans'], 'headline-lg-mobile': ['Newsreader'], 'headline-md': ['Newsreader'], 'headline-lg': ['Newsreader'], 'body-md': ['Plus Jakarta Sans'], 'headline-xl': ['Newsreader'], 'label-md': ['Plus Jakarta Sans'] }, fontSize: { 'label-lg': ['15px', { lineHeight: '20px', letterSpacing: '0.01em', fontWeight: '600' }], 'label-sm': ['11px', { lineHeight: '16px', letterSpacing: '0.04em', fontWeight: '600' }], 'headline-xl-mobile': ['32px', { lineHeight: '40px', letterSpacing: '-0.01em', fontWeight: '400' }], 'body-lg': ['18px', { lineHeight: '28px', fontWeight: '400' }], 'body-sm': ['14px', { lineHeight: '20px', fontWeight: '400' }], 'headline-lg-mobile': ['26px', { lineHeight: '34px', letterSpacing: '0em', fontWeight: '400' }], 'headline-md': ['22px', { lineHeight: '30px', fontWeight: '400' }], 'headline-lg': ['30px', { lineHeight: '38px', letterSpacing: '-0.01em', fontWeight: '400' }], 'body-md': ['16px', { lineHeight: '24px', fontWeight: '400' }], 'headline-xl': ['40px', { lineHeight: '48px', letterSpacing: '-0.02em', fontWeight: '400' }], 'label-md': ['13px', { lineHeight: '18px', letterSpacing: '0.02em', fontWeight: '500' }] } } } };</script><style>@layer base { html, body { width: 100vw; margin: 0; padding: 0; } body { overscroll-behavior: none; } .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); } .pt-safe { padding-top: env(safe-area-inset-top, 0px); } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } } ::-webkit-scrollbar { display: none; }</style></head><body class="bg-surface font-body-md text-body-md text-on-surface min-h-screen flex flex-col pt-safe pb-safe"><main class="flex-1 flex flex-col relative w-full bg-surface"><div class="flex flex-col w-full pb-32">
<!-- Top Bar & Contextual Back Navigation -->
<div class="px-5 pt-3 pb-4 flex items-center justify-between">
<button class="inline-flex items-center gap-1.5 text-primary py-1 px-2.5 rounded-full bg-surface-container active:scale-95 transition-transform duration-150" type="button">
<span class="material-symbols-outlined text-[18px]">arrow_back</span>
<span class="font-label-md text-label-md">Back to Ranking</span>
</button>
<div class="flex items-center gap-1 text-on-surface-variant bg-surface-container px-3 py-1 rounded-full">
</div>
</div>
<!-- Editorial Header & Summary -->
<header class="px-5 pt-2 pb-5 flex flex-col gap-2">
<div class="flex items-baseline justify-between">
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">All Sorted Values</h1>
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-widest bg-surface-container-high px-2.5 py-1 rounded-full">100 Cards</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
A bird’s-eye view of your 100 cards distributed across the 5 reflective piles. Review your intuition or gently rebalance.
</p>
<!-- Visual Density Indicator Metric Row -->
<div class="mt-3 p-4 rounded-2xl bg-surface-container flex flex-col gap-3">
<div class="flex items-center justify-between font-label-md text-label-md">
<span class="text-on-surface font-semibold flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
Distribution Profile
</span>
<span class="text-on-surface-variant" id="metric-summary">8 Core Nominees</span>
</div>
<!-- Tactile Proportional Pill Bar -->
<div class="flex h-2.5 w-full rounded-full overflow-hidden bg-surface-container-highest gap-0.5">
<div class="h-full bg-secondary transition-all" style="width: 8%" title="Most: 8%"></div>
<div class="h-full bg-secondary-container transition-all" style="width: 18%" title="Very: 18%"></div>
<div class="h-full bg-tertiary-container transition-all" style="width: 32%" title="Important: 32%"></div>
<div class="h-full bg-surface-dim transition-all" style="width: 24%" title="Somewhat: 24%"></div>
<div class="h-full bg-outline-variant transition-all" style="width: 18%" title="Not: 18%"></div>
</div>
<div class="flex justify-between items-center text-on-surface-variant font-label-sm text-label-sm pt-0.5">
<span class="">P5: 8</span>
<span class="">P4: 18</span>
<span class="">P3: 32</span>
<span class="">P2: 24</span>
<span class="">P1: 18</span>
</div>
</div>
</header>
<!-- Serene Search / In-situ Query -->
<div class="px-5 mb-5">
<div class="relative flex items-center bg-surface-container rounded-2xl px-3.5 py-2.5 shadow-sm transition-all focus-within:bg-surface-container-lowest">
<span class="material-symbols-outlined text-outline text-[20px] mr-2.5">search</span>
<input class="bg-transparent text-on-surface placeholder:text-outline text-body-sm font-body-sm w-full outline-none" id="value-search" placeholder="Find where 'Creativity' or 'Peace' rests..." type="text"/>
<button class="hidden text-outline hover:text-on-surface ml-1 p-0.5" id="clear-search" type="button">
<span class="material-symbols-outlined text-[18px]">close</span>
</button>
</div>
</div>
<!-- Interactive Horizontal Sticky Pile Scroller -->
<nav aria-label="Pile quick jump" class="sticky top-0 z-20 bg-surface/95 backdrop-blur-md px-5 py-2.5 mb-4 flex items-center gap-2 overflow-x-auto no-scrollbar">
<a class="pile-tab active flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-secondary text-on-secondary whitespace-nowrap font-label-md text-label-md shadow-sm transition-all" href="#pile-5">
<span class="">Most</span>
<span class="px-1.5 py-0.2 rounded-full bg-on-secondary/20 text-on-secondary font-label-sm text-label-sm" id="tab-p5-count">8</span>
</a>
<a class="pile-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface whitespace-nowrap font-label-md text-label-md transition-all" href="#pile-4">
<span class="">Very</span>
<span class="px-1.5 py-0.2 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">18</span>
</a>
<a class="pile-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface whitespace-nowrap font-label-md text-label-md transition-all" href="#pile-3">
<span class="">Important</span>
<span class="px-1.5 py-0.2 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">32</span>
</a>
<a class="pile-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface whitespace-nowrap font-label-md text-label-md transition-all" href="#pile-2">
<span class="">Somewhat</span>
<span class="px-1.5 py-0.2 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">24</span>
</a>
<a class="pile-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface whitespace-nowrap font-label-md text-label-md transition-all" href="#pile-1">
<span class="">Not</span>
<span class="px-1.5 py-0.2 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">18</span>
</a>
</nav>
<!-- Piles Container -->
<div class="px-5 flex flex-col gap-8" id="piles-list">
<!-- PILE 5: MOST IMPORTANT (CORE NOMINEES) -->
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="flex h-6 w-6 rounded-full bg-secondary text-on-secondary font-label-sm text-label-sm items-center justify-center font-bold">5</span>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Most Important</h2>
</div>
</div>
<span class="bg-secondary-fixed text-on-secondary-fixed px-2.5 py-0.5 rounded-full font-label-sm text-label-sm font-semibold" id="p5-badge-count">8 cards</span>
</div>
<!-- Pile 5 Rich Cards -->
<div class="grid grid-cols-1 gap-3 mt-1" id="pile-5-items">
<!-- Authenticity -->
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Authenticity">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Authenticity</h3>
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Authenticity" type="button">
<span>Demote</span>
<span class="material-symbols-outlined text-[16px]">expand_more</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Living in genuine alignment with inner truth and speaking without pretense or performance.
</p>
</article>
<!-- Courage -->
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Courage">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Courage</h3>
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Courage" type="button">
<span>Demote</span>
<span class="material-symbols-outlined text-[16px]">expand_more</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Stepping directly into the unknown and acting in alignment with what is right, despite palpable fear.
</p>
</article>
<!-- Compassion -->
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Compassion">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Compassion</h3>
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Compassion" type="button">
<span>Demote</span>
<span class="material-symbols-outlined text-[16px]">expand_more</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Meeting suffering—in myself and others—with a gentle, unwavering posture of mercy and assistance.
</p>
</article>
<!-- Freedom -->
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Freedom">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Freedom</h3>
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Freedom" type="button">
<span>Demote</span>
<span class="material-symbols-outlined text-[16px]">expand_more</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Possessing agency over my time, movement, and life path without undue coercion or arbitrary constraints.
</p>
</article>
<!-- Curiosity -->
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Curiosity">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Curiosity</h3>
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Curiosity" type="button">
<span>Demote</span>
<span class="material-symbols-outlined text-[16px]">expand_more</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Approaching life, people, and puzzles with wonder, humility, and an open thirst for understanding.
</p>
</article>
<!-- Integrity -->
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Integrity">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Integrity</h3>
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Integrity" type="button">
<span>Demote</span>
<span class="material-symbols-outlined text-[16px]">expand_more</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Upholding moral wholeness and consistency in character when nobody is watching.
</p>
</article>
<!-- Connection -->
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Connection">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Connection</h3>
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Connection" type="button">
<span>Demote</span>
<span class="material-symbols-outlined text-[16px]">expand_more</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Fostering deep mutual bonds and empathy where souls are seen, understood, and cherished.
</p>
</article>
<!-- Wisdom -->
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Wisdom">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Wisdom</h3>
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Wisdom" type="button">
<span>Demote</span>
<span class="material-symbols-outlined text-[16px]">expand_more</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Synthesizing deep experience and discernment into mindful, centered action.
</p>
</article>
</div>
</section>
<!-- PILE 4: VERY IMPORTANT -->
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="flex h-6 w-6 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">4</span>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Very Important</h2>
<p class="font-label-sm text-label-sm text-on-surface-variant">Strong priorities shaping everyday rhythms</p>
</div>
</div>
<span class="bg-surface-container-high text-on-surface-variant px-2.5 py-0.5 rounded-full font-label-sm text-label-sm" id="p4-badge-count">18 cards</span>
</div>
<div class="p-4 rounded-2xl bg-surface-container flex flex-col gap-3">
<div class="flex flex-wrap gap-2" id="pile-4-chips">
<!-- Values Chips with quick promote/demote indicators -->
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Creativity" type="button">
<span class="">Creativity</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Peace" type="button">
<span class="">Peace</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Autonomy" type="button">
<span class="">Autonomy</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Growth" type="button">
<span class="">Growth</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Kindness" type="button">
<span class="">Kindness</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Health" type="button">
<span class="">Health</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Gratitude" type="button">
<span class="">Gratitude</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Purpose" type="button">
<span class="">Purpose</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Joy" type="button">
<span class="">Joy</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Humor" type="button">
<span class="">Humor</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Resilience" type="button">
<span class="">Resilience</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Empathy" type="button">
<span class="">Empathy</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Self-Respect" type="button">
<span class="">Self-Respect</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Justice" type="button">
<span class="">Justice</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Generosity" type="button">
<span class="">Generosity</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Harmony" type="button">
<span class="">Harmony</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Nature" type="button">
<span class="">Nature</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Simplicity" type="button">
<span class="">Simplicity</span>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
</button>
</div>
<div class="text-right">
<span class="font-label-sm text-label-sm text-outline">Tap chip arrow to promote to Most Important</span>
</div>
</div>
</section>
<!-- PILE 3: IMPORTANT -->
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="flex h-6 w-6 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">3</span>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Important</h2>
<p class="font-label-sm text-label-sm text-on-surface-variant">Meaningful aspects kept in calm balance</p>
</div>
</div>
<span class="bg-surface-container-high text-on-surface-variant px-2.5 py-0.5 rounded-full font-label-sm text-label-sm" id="p3-badge-count">32 cards</span>
</div>
<div class="p-4 rounded-2xl bg-surface-container flex flex-col gap-3">
<div class="flex flex-wrap gap-2" id="pile-3-chips">
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Security">Security</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Order">Order</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Adventure">Adventure</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Discipline">Discipline</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Patience">Patience</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Loyalty">Loyalty</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Knowledge">Knowledge</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Beauty">Beauty</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Playfulness">Playfulness</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Solitude">Solitude</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Reliability">Reliability</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Honesty">Honesty</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Openness">Openness</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Mastery">Mastery</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Intimacy">Intimacy</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Balance">Balance</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Presence">Presence</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Acceptance">Acceptance</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Clarity">Clarity</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Modesty">Modesty</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Vitality">Vitality</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Insight">Insight</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Contribution">Contribution</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Depth">Depth</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Cooperation">Cooperation</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Resourcefulness">Resourcefulness</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Adaptability">Adaptability</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Spontaneity">Spontaneity</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Family">Family</span>
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Community">Community</span>
</div>
</div>
</section>
<!-- PILE 2: SOMEWHAT IMPORTANT -->
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="flex h-6 w-6 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">2</span>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Somewhat Important</h2>
<p class="font-label-sm text-label-sm text-on-surface-variant">Present, but rarely leading choices</p>
</div>
</div>
<span class="bg-surface-container-high text-on-surface-variant px-2.5 py-0.5 rounded-full font-label-sm text-label-sm">24 cards</span>
</div>
<div class="p-4 rounded-2xl bg-surface-container flex flex-col gap-2">
<div class="flex flex-wrap gap-1.5 opacity-90" id="pile-2-chips">
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Comfort">Comfort</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Tradition">Tradition</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Efficiency">Efficiency</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Leisure">Leisure</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Predictability">Predictability</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Novelty">Novelty</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Ambition">Ambition</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Status">Status</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Precision">Precision</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Competition">Competition</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Thrift">Thrift</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Privacy">Privacy</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Recognition">Recognition</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Power">Power</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Popularity">Popularity</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Conformity">Conformity</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Charm">Charm</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Intensity">Intensity</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Pleasure">Pleasure</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Influence">Influence</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Formality">Formality</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Thrill">Thrill</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Reputation">Reputation</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Speed">Speed</span>
</div>
</div>
</section>
<!-- PILE 1: NOT IMPORTANT -->
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-1">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="flex h-6 w-6 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">1</span>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Not Important</h2>
<p class="font-label-sm text-label-sm text-on-surface-variant">Consciously released from my life compass</p>
</div>
</div>
<span class="bg-surface-container-high text-on-surface-variant px-2.5 py-0.5 rounded-full font-label-sm text-label-sm">18 cards</span>
</div>
<div class="p-4 rounded-2xl bg-surface-container flex flex-col gap-2">
<div class="flex flex-wrap gap-1.5 opacity-60" id="pile-1-chips">
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Wealth">Wealth</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Fame">Fame</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Authority">Authority</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Luxury">Luxury</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Winning">Winning</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Glamour">Glamour</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Perfection">Perfection</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Control">Control</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Hierarchy">Hierarchy</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Ritual">Ritual</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Dominance">Dominance</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Appearance">Appearance</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Acquisition">Acquisition</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Strictness">Strictness</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Exclusivity">Exclusivity</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Superiority">Superiority</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Pride">Pride</span>
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Publicity">Publicity</span>
</div>
</div>
</section>
<!-- Empty Search State Container (hidden by default) -->
<div class="hidden flex-col items-center justify-center py-12 px-4 text-center bg-surface-container rounded-2xl" id="empty-state">
<span class="material-symbols-outlined text-[36px] text-outline mb-2">sentiment_content</span>
<p class="font-headline-md text-headline-md text-on-surface">No values found</p>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1 max-w-xs">
Try searching for another keyword or clear the search to view all 100 cards.
</p>
<button class="mt-4 px-4 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md" id="reset-search-btn" type="button">
Show All Piles
</button>
</div>
</div>
<!-- Tactile Sticky Bottom Bar -->
<aside class="fixed bottom-0 left-0 right-0 z-30 bg-surface/95 backdrop-blur-md px-5 pt-3 pb-safe shadow-xl">
<div class="max-w-md mx-auto flex flex-col gap-2 pb-3">
<button class="w-full py-3.5 px-6 rounded-full bg-primary text-on-primary font-label-lg text-label-lg flex items-center justify-center gap-2 shadow-md active:scale-[0.98] transition-transform duration-150" type="button">
<span class="">Return to Ranking</span>
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</aside>
</div>
<!-- Demote Bottom Sheet Drawer -->
<div aria-hidden="true" class="fixed inset-0 z-50 pointer-events-none transition-opacity duration-300 opacity-0" id="demote-sheet-container">
<!-- Backdrop overlay -->
<div class="absolute inset-0 bg-inverse-surface/40 backdrop-blur-sm transition-opacity" id="demote-backdrop"></div>
<!-- Drawer Content -->
<div class="absolute bottom-0 left-0 right-0 bg-surface rounded-t-3xl shadow-2xl border-t border-outline-variant/30 flex flex-col max-h-[85vh] transform translate-y-full transition-transform duration-300 ease-out pb-safe" id="demote-sheet-panel">
<!-- Handle bar -->
<div class="w-full flex justify-center pt-3 pb-1">
<span class="w-10 h-1 rounded-full bg-outline-variant/60"></span>
</div>
<!-- Sheet Header -->
<div class="px-6 pt-2 pb-4 flex items-start justify-between border-b border-surface-container">
<div>
<span class="font-label-sm text-label-sm uppercase tracking-wider text-secondary font-semibold">Demote Value</span>
<h2 class="font-headline-md text-headline-md text-on-surface mt-0.5" id="demote-sheet-title">Move to pile:</h2>
</div>
<button aria-label="Close sheet" class="text-outline hover:text-on-surface p-1 rounded-full bg-surface-container active:scale-95 transition-transform" id="close-demote-sheet" type="button">
<span class="material-symbols-outlined text-[20px]">close</span>
</button>
</div>
<!-- Piles Selection List -->
<div class="px-6 py-4 flex flex-col gap-2.5 overflow-y-auto">
<!-- Destination Pile 4 -->
<button class="dest-pile-btn flex items-center justify-between p-3.5 rounded-2xl bg-surface-container-low hover:bg-surface-container active:scale-[0.99] border border-transparent hover:border-secondary/20 transition-all text-left group" data-pile="4" data-pile-name="Very Important" type="button">
<div class="flex items-center gap-3">
<span class="flex h-7 w-7 rounded-full bg-surface-container-highest text-on-surface font-label-md text-label-md items-center justify-center font-bold">4</span>
<div>
<p class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-secondary transition-colors">Pile 4: Very Important</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">Deeply held guide</p>
</div>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[20px]">south</span>
</button>
<!-- Destination Pile 3 -->
<button class="dest-pile-btn flex items-center justify-between p-3.5 rounded-2xl bg-surface-container-low hover:bg-surface-container active:scale-[0.99] border border-transparent hover:border-secondary/20 transition-all text-left group" data-pile="3" data-pile-name="Important" type="button">
<div class="flex items-center gap-3">
<span class="flex h-7 w-7 rounded-full bg-surface-container-highest text-on-surface font-label-md text-label-md items-center justify-center font-bold">3</span>
<div>
<p class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-secondary transition-colors">Pile 3: Important</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">Valued aspect</p>
</div>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[20px]">south</span>
</button>
<!-- Destination Pile 2 -->
<button class="dest-pile-btn flex items-center justify-between p-3.5 rounded-2xl bg-surface-container-low hover:bg-surface-container active:scale-[0.99] border border-transparent hover:border-secondary/20 transition-all text-left group" data-pile="2" data-pile-name="Somewhat Important" type="button">
<div class="flex items-center gap-3">
<span class="flex h-7 w-7 rounded-full bg-surface-container-highest text-on-surface font-label-md text-label-md items-center justify-center font-bold">2</span>
<div>
<p class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-secondary transition-colors">Pile 2: Somewhat Important</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">Contextual value</p>
</div>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[20px]">south</span>
</button>
<!-- Destination Pile 1 -->
<button class="dest-pile-btn flex items-center justify-between p-3.5 rounded-2xl bg-surface-container-low hover:bg-surface-container active:scale-[0.99] border border-transparent hover:border-secondary/20 transition-all text-left group" data-pile="1" data-pile-name="Not Important" type="button">
<div class="flex items-center gap-3">
<span class="flex h-7 w-7 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">1</span>
<div>
<p class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-secondary transition-colors">Pile 1: Not Important</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">Not a current compass</p>
</div>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[20px]">south</span>
</button>
</div>
<div class="px-6 pt-1 pb-4 text-center">
<span class="font-label-sm text-label-sm text-outline">You can reorder or bring cards back anytime</span>
</div>
</div>
</div>
<!-- Notification Toast -->
<div class="fixed top-5 left-1/2 -translate-x-1/2 z-50 pointer-events-none transition-all duration-300 opacity-0 -translate-y-3" id="toast-message">
<div class="flex items-center gap-2 bg-inverse-surface text-inverse-on-surface px-4 py-2.5 rounded-full shadow-lg font-label-md text-label-md">
<span class="material-symbols-outlined text-secondary-fixed text-[18px]">check_circle</span>
<span id="toast-text">Card moved</span>
</div>
</div>
<script>
(function() {
const searchInput = document.getElementById('value-search');
const clearBtn = document.getElementById('clear-search');
const resetBtn = document.getElementById('reset-search-btn');
const valueItems = document.querySelectorAll('.value-item');
const pileGroups = document.querySelectorAll('.pile-group');
const emptyState = document.getElementById('empty-state');
const tabs = document.querySelectorAll('.pile-tab');
// Demote Drawer Elements
const sheetContainer = document.getElementById('demote-sheet-container');
const sheetPanel = document.getElementById('demote-sheet-panel');
const sheetBackdrop = document.getElementById('demote-backdrop');
const closeSheetBtn = document.getElementById('close-demote-sheet');
const sheetTitle = document.getElementById('demote-sheet-title');
const destPileBtns = document.querySelectorAll('.dest-pile-btn');
const toast = document.getElementById('toast-message');
const toastText = document.getElementById('toast-text');
let activeCardTitle = '';
let activeCardElement = null;
function openDemoteSheet(cardTitle, cardEl) {
activeCardTitle = cardTitle;
activeCardElement = cardEl;
sheetTitle.textContent = `Move '${cardTitle}' to:`;
sheetContainer.classList.remove('pointer-events-none', 'opacity-0');
sheetContainer.classList.add('opacity-100');
sheetPanel.classList.remove('translate-y-full');
sheetPanel.classList.add('translate-y-0');
}
function closeDemoteSheet() {
sheetPanel.classList.remove('translate-y-0');
sheetPanel.classList.add('translate-y-full');
sheetContainer.classList.remove('opacity-100');
sheetContainer.classList.add('opacity-0');
setTimeout(() => {
sheetContainer.classList.add('pointer-events-none');
}, 300);
}
function showToast(msg) {
toastText.textContent = msg;
toast.classList.remove('opacity-0', '-translate-y-3');
toast.classList.add('opacity-100', 'translate-y-0');
setTimeout(() => {
toast.classList.remove('opacity-100', 'translate-y-0');
toast.classList.add('opacity-0', '-translate-y-3');
}, 2500);
}
// Attach Demote click handlers
document.querySelectorAll('.demote-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const card = btn.closest('.value-item');
const valName = btn.getAttribute('data-value') || card.getAttribute('data-title');
openDemoteSheet(valName, card);
});
});
// Destination Pile Selection
destPileBtns.forEach(btn => {
btn.addEventListener('click', () => {
const destPileNum = btn.getAttribute('data-pile');
const destPileName = btn.getAttribute('data-pile-name');
if (activeCardElement) {
// Animate removal from pile 5
activeCardElement.style.transition = 'opacity 0.25s, transform 0.25s';
activeCardElement.style.opacity = '0';
activeCardElement.style.transform = 'scale(0.95)';
setTimeout(() => {
activeCardElement.remove();
// Append chip to destination pile container
const destContainer = document.getElementById(`pile-${destPileNum}-chips`);
if (destContainer) {
const newChip = document.createElement('span');
newChip.className = destPileNum === '1'
? 'value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline transition-all'
: destPileNum === '2'
? 'value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md transition-all'
: destPileNum === '3'
? 'value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md transition-all'
: 'value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all';
newChip.setAttribute('data-title', activeCardTitle);
newChip.textContent = activeCardTitle;
destContainer.prepend(newChip);
}
// Update P5 counts
const remainingP5 = document.querySelectorAll('#pile-5-items .value-item').length;
const badge = document.getElementById('p5-badge-count');
const tabBadge = document.getElementById('tab-p5-count');
const metric = document.getElementById('metric-summary');
if (badge) badge.textContent = `${remainingP5} cards`;
if (tabBadge) tabBadge.textContent = remainingP5;
if (metric) metric.textContent = `${remainingP5} Core Nominees`;
}, 250);
}
closeDemoteSheet();
showToast(`'${activeCardTitle}' moved to Pile ${destPileNum}: ${destPileName}`);
});
});
if (sheetBackdrop) sheetBackdrop.addEventListener('click', closeDemoteSheet);
if (closeSheetBtn) closeSheetBtn.addEventListener('click', closeDemoteSheet);
function filterValues(query) {
const term = query.trim().toLowerCase();
let matchCount = 0;
if (!term) {
clearBtn.classList.add('hidden');
document.querySelectorAll('.value-item').forEach(item => item.classList.remove('hidden'));
pileGroups.forEach(group => group.classList.remove('hidden'));
emptyState.classList.add('hidden');
return;
}
clearBtn.classList.remove('hidden');
pileGroups.forEach(group => {
const itemsInGroup = group.querySelectorAll('.value-item');
let visibleInGroup = 0;
itemsInGroup.forEach(item => {
const title = (item.getAttribute('data-title') || '').toLowerCase();
const text = item.textContent.toLowerCase();
if (title.includes(term) || text.includes(term)) {
item.classList.remove('hidden');
visibleInGroup++;
matchCount++;
} else {
item.classList.add('hidden');
}
});
if (visibleInGroup === 0) {
group.classList.add('hidden');
} else {
group.classList.remove('hidden');
}
});
if (matchCount === 0) {
emptyState.classList.remove('hidden');
emptyState.classList.add('flex');
} else {
emptyState.classList.add('hidden');
emptyState.classList.remove('flex');
}
}
if (searchInput) {
searchInput.addEventListener('input', (e) => filterValues(e.target.value));
}
if (clearBtn) {
clearBtn.addEventListener('click', () => {
searchInput.value = '';
filterValues('');
searchInput.focus();
});
}
if (resetBtn) {
resetBtn.addEventListener('click', () => {
searchInput.value = '';
filterValues('');
});
}
// Tab active styling updates on click
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => {
t.classList.remove('bg-secondary', 'text-on-secondary');
t.classList.add('bg-surface-container', 'text-on-surface');
const badge = t.querySelector('span:last-child');
if (badge) {
badge.classList.remove('bg-on-secondary/20', 'text-on-secondary');
badge.classList.add('bg-surface-container-high', 'text-on-surface-variant');
}
});
tab.classList.add('bg-secondary', 'text-on-secondary');
tab.classList.remove('bg-surface-container', 'text-on-surface');
const activeBadge = tab.querySelector('span:last-child');
if (activeBadge) {
activeBadge.classList.add('bg-on-secondary/20', 'text-on-secondary');
activeBadge.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
}
});
});
})();
</script></main></body></html>