/* ==========================================================================
   KrugerBody Library / Discover — choice-driven content flow.

   Ported from an earlier KrugerBody prototype (KBP-choice-library) that
   worked out this exact interaction: Domain -> Topic -> Presentation ->
   Detail, five title-only choices per step, no descriptions until the
   user has actually chosen something. Only the classes this app's own
   version of that flow actually uses are kept here -- the prototype's
   home-screen redesign, bottom nav and full "My Library" hub page were
   not adopted (this app keeps its own home/shell structure), so their
   styles aren't ported either.
   ========================================================================== */

/* Home screen -- the subtle, full-width "Explore" button under today's list. */
.home-explore-btn{
  display:block; width:100%; margin-top:22px; padding:14px 16px; text-align:center;
  border-radius:14px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); font-family:var(--font-display); font-weight:700; font-size:15px;
  cursor:pointer;
}
.home-explore-btn:active{ background:var(--surface-2); }

/* Explore hub page (Apps / Discover / Features) -- reuses .hub-intro and
   .title-grid / .title-tile from the shell's own launcher styles. */

/* Discover flow: five conversational choices per step, "Pick one...".
   Each card leads with a short, second-person sentence (library.hook() /
   library.domainHook()) and keeps the plain name as a small caption
   underneath -- both for quick scanning and so the card's own identity
   (used for click targets, test selectors, etc.) stays stable even though
   the sentence above it can vary between sessions. */
.simple-pick{display:flex;flex-direction:column;gap:16px;padding-top:4px;}
.simple-pick h1{margin:0;font-size:28px;line-height:1.1;letter-spacing:-.02em;}
.discover-interest-note{margin:-6px 0 0;font-size:13.5px;line-height:1.4;color:var(--text-muted);}
.pick-list{display:flex;flex-direction:column;gap:10px;}
.pick-card{width:100%;padding:16px 17px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;color:var(--text);font:inherit;cursor:pointer;}
.pick-card .chevron{color:var(--text-faint);flex-shrink:0;}
.pick-card:active,.format-pick-card:active{background:var(--surface-2);}
.pick-card-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.pick-card-hook{font-size:17px;font-weight:800;line-height:1.3;}
.pick-card-title{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);}
.format-pick-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.format-pick-card{padding:18px 14px;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--text);font:inherit;cursor:pointer;}
.format-pick-name{font-size:16.5px;font-weight:800;line-height:1.25;}
.format-pick-blurb{font-size:12.5px;font-weight:500;line-height:1.3;color:var(--text-muted);}

/* Detail page: selected presentation + What / Do / Why / Make it easier / Related. */
.item-kicker{display:flex;align-items:center;gap:8px;color:var(--accent-500);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.minutes-chip{background:var(--surface-2);color:var(--text-muted);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;}
.presentation-card{padding:17px;}
.result-presentation{border-left:4px solid var(--accent-500);}
.result-presentation p{font-size:17px;color:var(--text);line-height:1.5;margin:10px 0 0;}
.detail-form{padding:0 18px;overflow:hidden;}
.detail-block{padding:17px 0;border-bottom:1px solid var(--border);}
.detail-block:last-child{border-bottom:0;}
.detail-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-500);margin-bottom:5px;}
.detail-block p{margin:0;font-size:15.5px;line-height:1.48;color:var(--text);}
.choice-state{font-size:12px;font-weight:800;padding:4px 8px;border-radius:999px;background:var(--success-100);color:var(--success);}
.choice-state.paused{background:var(--surface-2);color:var(--text-faint);}
.relation-grid{display:flex;gap:9px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.relation-grid::-webkit-scrollbar{display:none;}
.relation-card{min-width:210px;max-width:230px;padding:14px;cursor:pointer;border:1px solid var(--border);color:var(--text);font:inherit;text-align:left;display:flex;flex-direction:column;gap:5px;}
.relation-card:active{background:var(--surface-2);}
.relation-card-hook{margin:0;font-size:14.5px;font-weight:700;line-height:1.3;}
.relation-card-title{margin:0;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);}

@media(max-width:380px){
  .format-pick-list{grid-template-columns:1fr;}
  .pick-card-hook{font-size:16px;}
}

/* ---- Evidence + "Check first" (added with the FAST domain) ---- */
.caution-block{background:var(--warning-100, #fdf1dc);margin:0 -8px;padding:14px 8px;border-radius:12px;border-bottom:0;}
.caution-block .detail-label{color:var(--warning, #a8650a);}
.evidence-block summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;}
.evidence-block summary::-webkit-details-marker{display:none;}
.evidence-block summary::after{content:"+";font-weight:800;color:var(--text-muted);margin-left:6px;}
.evidence-block[open] summary::after{content:"\2212";}
.evidence-block .ev-grade{margin-left:auto;font-size:12px;font-weight:800;color:var(--accent-600);background:var(--accent-100, #dcedf9);border-radius:999px;padding:3px 9px;}
.evidence-block p{margin-top:10px;}
.ev-sources{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.45;}
.ev-sources li{margin:0 0 6px;}
.ev-sources a{color:var(--accent-600);overflow-wrap:anywhere;}
.evidence-block .ev-note{font-size:12.5px;color:var(--text-muted);}

/* ---- Presentation picker: colour hero + picture cards (v36) ---- */
.pick-hero{--dom-a:#2f8fd1;--dom-b:#0b64a0;position:relative;overflow:hidden;border-radius:var(--radius-lg);color:#fff;margin:2px 0 18px;min-height:168px;display:flex;align-items:flex-end;box-shadow:var(--shadow-md);background:linear-gradient(150deg,var(--dom-a),var(--dom-b));animation:pickHeroIn .45s ease both;}
.pick-hero.dom-movement{--dom-a:#d9622b;--dom-b:#a8352a;}
.pick-hero.dom-nutrition{--dom-a:#2f9e66;--dom-b:#18704f;}
.pick-hero.dom-fasting{--dom-a:#c97a14;--dom-b:#9a4710;}
.pick-hero.dom-sleep{--dom-a:#5a5fcf;--dom-b:#30348f;}
.pick-hero.dom-mindset{--dom-a:#8a5cd6;--dom-b:#56309f;}
.pick-hero.dom-connection{--dom-a:#d95c8f;--dom-b:#a02a5c;}
.pick-hero.dom-adherence{--dom-a:#1fa39c;--dom-b:#126579;}
.pick-hero.dom-recovery{--dom-a:#2f8fd1;--dom-b:#0b5a95;}
.pick-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(8,14,30,.3));pointer-events:none;}
.pick-hero-art{position:absolute;left:0;top:0;width:100%;height:104px;}
.pick-hero-body{position:relative;z-index:1;padding:92px 18px 18px;display:flex;flex-direction:column;gap:8px;width:100%;}
.pick-hero-chips{position:absolute;top:14px;left:18px;display:flex;gap:6px;}
.pick-hero-chip{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(2px);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.pick-hero-q{margin:0;font-family:var(--font-display);font-size:22px;line-height:1.22;font-weight:800;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.25);}
.pick-hero-title{margin:0;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.95;display:flex;align-items:center;gap:8px;}
.pick-hero-title::before{content:"";width:22px;height:3px;border-radius:3px;background:#fff;opacity:.85;}
.pick-formats{gap:14px;}
.pick-formats h1{font-size:22px;}
.format-pick-card{position:relative;overflow:hidden;--fa:#1f8fd6;--fb:#0b64a0;border:1px solid var(--border);animation:pickCardIn .4s ease both;animation-delay:calc(var(--pick-i,0) * 70ms + 120ms);transition:transform .12s ease, box-shadow .12s ease;}
.format-pick-card::before{content:"";position:absolute;right:-26px;top:-26px;width:92px;height:92px;border-radius:50%;background:color-mix(in srgb,var(--fa) 14%,transparent);}
.format-pick-card:active{transform:scale(.97);}
.format-pick-card.fmt-quick{--fa:#1f8fd6;--fb:#0b64a0;}
.format-pick-card.fmt-why{--fa:#e3a21b;--fb:#c46d0e;}
.format-pick-card.fmt-story{--fa:#8a5cd6;--fb:#5a34a8;}
.format-pick-card.fmt-light{--fa:#ec6a9b;--fb:#c93f7c;}
.format-pick-card{min-height:150px;padding:18px 12px 14px;gap:7px;}
.format-pick-badge{position:relative;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--fa),var(--fb));box-shadow:0 6px 14px color-mix(in srgb,var(--fb) 38%,transparent);margin-bottom:2px;}
.format-pick-meta{position:relative;margin-top:2px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fb);background:color-mix(in srgb,var(--fa) 14%,transparent);border-radius:999px;padding:2px 9px;}
.format-pick-name,.format-pick-blurb{position:relative;}
@keyframes pickHeroIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes pickCardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.pick-hero,.format-pick-card{animation:none;transition:none;}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pick-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.12) 20%,rgba(2,6,16,.5));}
  :root:not([data-theme="light"]) .format-pick-meta{color:var(--fa);}}
:root[data-theme="dark"] .pick-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.12) 20%,rgba(2,6,16,.5));}
:root[data-theme="dark"] .format-pick-meta{color:var(--fa);}
@media(max-width:380px){
  .format-pick-card{display:grid;grid-template-columns:46px 1fr;column-gap:12px;row-gap:3px;align-items:center;justify-items:start;text-align:left;min-height:84px;padding:14px;}
  .format-pick-badge{grid-row:1 / span 3;align-self:center;margin:0;width:46px;height:46px;}
  .format-pick-meta{margin-top:3px;}
  .pick-hero-q{font-size:20px;}
}

/* ---- HOP story card (v37) ---- */
.hop-story{padding:20px 18px 18px;border-left:4px solid var(--accent-500);background:linear-gradient(180deg,color-mix(in srgb,var(--accent-100) 55%,var(--surface)),var(--surface) 140px);}
.hop-story .item-kicker{justify-content:space-between;}
.hop-title{margin:8px 0 12px;font-family:var(--font-display);font-size:25px;line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--text);}
.hop-story .hop-p{margin:0 0 13px;font-size:17px;line-height:1.58;color:var(--text);}
.hop-rule{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 14px;border-radius:14px;background:var(--accent-100);color:var(--accent-700);}
.hop-rule-mark{flex-shrink:0;color:var(--accent-600);display:flex;margin-top:1px;}
.hop-rule-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-600);margin-bottom:3px;}
.hop-story .hop-rule p{margin:0;font-family:var(--font-display);font-size:18px;line-height:1.3;font-weight:800;color:var(--text);}
.hop-note{display:flex;gap:10px;align-items:flex-start;margin:-4px 0 14px;padding:11px 12px;border-radius:12px;background:var(--surface-2);border:1px dashed var(--border-strong);}
.hop-note-mark{flex-shrink:0;color:var(--accent-600);display:flex;}
.hop-story .hop-note p{margin:0;font-size:14.5px;line-height:1.45;color:var(--text-muted);font-style:italic;}