/* =============================================================
   Jiminy App — Shared / Global Styles — layout shell, nav, buttons, cards
   /css/shared.css

   Global layout shell, navigation, buttons, cards, and any
   component reused across 2+ pages. Load SECOND, after
   variables.css and before the page-specific stylesheet.
============================================================= */


    *{box-sizing:border-box}


    html{scroll-behavior:smooth}


    html{min-height:calc(100% + env(safe-area-inset-top));background:#fff;}
    body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(135deg,#fff8e7 0%,#f6f9ff 54%,#fff 100%);overflow-x:hidden;-webkit-text-size-adjust:100%;min-height:100%;}


    a{color:inherit;text-decoration:none}


    button{font:inherit}



    .app-shell{min-height:100svh;display:grid;grid-template-columns:var(--side) 1fr;transition:grid-template-columns .22s ease;background-image:linear-gradient(180deg,var(--navy2),var(--navy));background-repeat:no-repeat;background-size:var(--side) 100%;background-position:top left;}


    .app-shell.collapsed{background-size:var(--sideClosed) 100%;}


    .app-shell.collapsed{grid-template-columns:var(--sideClosed) 1fr}


    .sidebar{position:sticky;top:0;height:100svh;background:linear-gradient(180deg,var(--navy2),var(--navy));color:#fff;z-index:30;padding:22px 16px;padding-top:calc(22px + env(safe-area-inset-top));display:flex;flex-direction:column;box-shadow:14px 0 40px rgba(7,31,65,.16)}


    .side-head{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:16px;min-height:70px}


    .side-head img{width:min(190px,100%);height:auto;display:block}


    .brand-text{font-family:Georgia,serif;font-size:30px;font-weight:900;letter-spacing:-.04em}


    .tag{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#bcd2ff;font-weight:900;margin-top:0;text-align:center;margin-bottom:24px}


    .collapse-btn{position:absolute;right:-17px;top:22px;border:1px solid rgba(255,255,255,.28);width:34px;height:34px;border-radius:999px;background:#fff;color:var(--navy);font-weight:1000;box-shadow:0 12px 26px rgba(7,31,65,.2);cursor:pointer}


    .app-shell.collapsed .collapse-btn{transform:rotate(180deg)}


    .app-shell.collapsed .brand-text,.app-shell.collapsed .tag,.app-shell.collapsed .nav-label,.app-shell.collapsed .side-card,.app-shell.collapsed .more-sub,.app-shell.collapsed .side-user-name{display:none}


    .app-shell.collapsed .side-head{justify-content:center}

    .app-shell.collapsed .side-user{justify-content:center;padding:12px 8px;gap:0;}

.app-shell.collapsed .side-head img{width:54px;max-width:54px;object-fit:cover;object-position:left center}

.app-shell.collapsed .side-nav button{justify-content:center;padding:12px 8px}

.app-shell.collapsed .nav-ico{width:38px;height:38px}



    .side-nav{display:grid;gap:8px}


    .nav-btn{border:0;background:transparent;color:#dce8ff;border-radius:18px;padding:13px 14px;display:flex;align-items:center;gap:12px;font-weight:900;cursor:pointer;text-align:left;width:100%}


    .nav-btn:hover,.nav-btn.active{background:rgba(255,255,255,.1);color:#fff}


    .nav-ico{width:30px;height:30px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--gold);flex:0 0 auto}


    .more-sub{margin-left:44px;display:none;gap:6px;padding:4px 0 8px}

.more-open .more-sub{display:grid}


    .sub-btn{border:0;background:transparent;color:#dce8ff;text-align:left;border-radius:14px;padding:10px 12px;font-weight:850;cursor:pointer}

.sub-btn:hover{background:rgba(255,255,255,.1)}


    .side-card{margin-top:auto;border:1px solid rgba(244,184,37,.42);background:rgba(244,184,37,.08);border-radius:22px;padding:16px;line-height:1.35;color:#e8f0ff}

.side-card b{display:block;color:#fff;margin-bottom:7px}

.side-card button{margin-top:13px;border:0;border-radius:14px;padding:12px 14px;background:var(--gold);color:var(--navy);font-weight:1000;width:100%;cursor:pointer}



    .main{min-width:0;display:flex;flex-direction:column;min-height:100svh;padding-bottom:108px;overflow-x:hidden}


    .topbar{height:calc(56px + env(safe-area-inset-top));display:flex;align-items:flex-end;justify-content:space-between;padding:0 clamp(16px,3vw,34px) 10px;padding-top:env(safe-area-inset-top);background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(232,237,245,.75);position:sticky;top:0;z-index:20}


    .mobile-menu{display:none;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:15px;padding:10px 12px;font-weight:1000;cursor:pointer}


    .top-logo{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;flex:1}

.top-logo img{height:48px;width:auto;max-width:190px;object-fit:contain;object-position:center;display:block}

.top-logo span{display:none}


    .hey-pill{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:10px 14px;font-weight:950;box-shadow:0 10px 30px rgba(7,31,65,.08);cursor:pointer}

.hey-pill .dot{width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center}



    .content{width:min(1200px,calc(100% - 32px));margin:0 auto;padding:24px 0 0}

.page{display:none;animation:fade .2s ease}

.page.active{display:block}

@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}


    .grid{display:grid;gap:18px}

.two{grid-template-columns:1.1fr .9fr}

.three{grid-template-columns:repeat(3,1fr)}


    .card{background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:0 18px 48px rgba(7,31,65,.09)}


    .hero-card{padding:30px;background:linear-gradient(135deg,#ffffff 0%,#fff6df 46%,#eef6ff 100%);overflow:hidden;position:relative}

.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;color:var(--blue);font-size:13px;font-weight:1000}

.title{font-family:Georgia,serif;font-size:clamp(42px,6.4vw,78px);line-height:.94;margin:20px 0 16px;color:var(--navy);letter-spacing:-.055em}

.lead{font-size:18px;line-height:1.55;color:#293656;max-width:700px}

.gold{color:var(--gold)}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.btn{border:0;border-radius:18px;padding:14px 18px;font-weight:1000;cursor:pointer;display:inline-flex;align-items:center;gap:9px}

.btn:disabled{opacity:.45;cursor:not-allowed}

.primary{background:linear-gradient(135deg,var(--blue),#0643a5);color:#fff;box-shadow:0 18px 36px rgba(29,95,205,.25)}

.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}


    .metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}

.metric{border:1px solid var(--line);border-radius:22px;background:#fff;padding:16px}

.metric b{display:block;font-size:28px;color:var(--navy)}

.metric span{color:var(--muted);font-size:13px;font-weight:850}


    .phone{background:#0c1020;border-radius:38px;padding:10px;box-shadow:var(--shadow);max-width:390px;margin:0 auto}

.screen{height:690px;border-radius:30px;background:#fff;overflow:hidden;position:relative}

.screen-head{height:218px;background:linear-gradient(135deg,#eaf3ff,#fff2cf);padding:24px}

.screen-head img{height:52px}

.screen-head h3{margin:16px 0 8px;font-family:Georgia,serif;color:var(--navy);font-size:34px;line-height:1}

.quick{position:absolute;left:18px;right:18px;top:182px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:0 18px 34px rgba(7,31,65,.14)}

.quick b{display:block;color:var(--navy)}

.quick small{color:var(--muted)}

.screen-body{padding:96px 18px 92px}

.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:20px;background:#fff;padding:14px;margin-bottom:12px}

.list-item small{color:var(--muted);font-weight:750}

.thumb{width:46px;height:46px;border-radius:16px;background:#fff3d0;display:grid;place-items:center}

.assistant-bar{position:absolute;left:16px;right:16px;bottom:72px;background:var(--navy);color:#fff;border-radius:20px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between}

.assistant-bar small{color:#d7e4ff}

.mini-tabs{position:absolute;left:0;right:0;bottom:0;height:58px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:#fff;color:#69738d;font-size:11px;text-align:center}

.mini-tabs div{padding-top:7px}

.mini-tabs b{color:var(--blue)}



    .section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}

.section-title h2{margin:0;font-family:Georgia,serif;color:var(--navy);font-size:42px;letter-spacing:-.04em}

.section-title p{margin:0;color:var(--muted);max-width:560px}

.cal{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}

.day{border:1px solid var(--line);background:#fff;border-radius:20px;padding:14px;text-align:center;font-weight:900}

.day.active{background:var(--navy);color:#fff}

.mapbox{height:540px;border-radius:30px;background:linear-gradient(135deg,#e7f0ff,#fff6da);position:relative;overflow:hidden;border:1px solid var(--line)}

.path{position:absolute;inset:70px 50px;border:5px dashed rgba(29,95,205,.45);border-radius:42% 58% 48% 52%;transform:rotate(-12deg)}

.pin{position:absolute;width:42px;height:42px;border-radius:50% 50% 50% 8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:1000;transform:rotate(-45deg);box-shadow:0 12px 25px rgba(7,31,65,.2)}

.pin span{transform:rotate(45deg)}

.map-panel{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:0 16px 40px rgba(7,31,65,.12)}


    .food-list .row{display:grid;grid-template-columns:1fr auto;gap:12px;border:1px solid var(--line);border-radius:22px;background:#fff;padding:16px;margin-bottom:12px}

.price{font-weight:1000;color:var(--navy)}

.creator-card{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:center}

.avatar{width:86px;height:86px;border-radius:26px;background:linear-gradient(135deg,var(--navy),#123d7e);color:#fff;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:1000;line-height:1.1}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.feature{border:1px solid var(--line);border-radius:24px;background:#fff;padding:18px}

.feature .icon{font-size:25px}

.feature h3{font-size:14px;letter-spacing:.08em;color:var(--navy)}

.feature p{color:var(--muted);margin-bottom:0}

.plan-days{display:grid;grid-template-columns:repeat(5,1fr) 72px;gap:14px;margin-bottom:18px}

.plan-day,.calendar-btn{border:1px solid var(--line);background:#fff;border-radius:22px;padding:14px 10px;text-align:center;font-weight:950;box-shadow:0 12px 28px rgba(7,31,65,.07)}

.plan-day b{display:block;font-size:30px;line-height:1;color:var(--ink)}

.plan-day small{display:block;color:var(--muted);font-weight:900;margin-top:3px}

.calendar-btn{display:grid;place-items:center;font-size:28px;color:var(--navy)}

.surprise-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;border:1px solid rgba(244,184,37,.38);background:linear-gradient(135deg,#fffdf7,#fff8e6);border-radius:26px;padding:20px;margin-bottom:20px}

.surprise-icon{font-size:38px;color:var(--gold)}

.surprise-card b{display:block;color:var(--navy);font-size:24px}

.surprise-card p{margin:5px 0 0;color:#293656;line-height:1.4}

.plan-add{display:grid;grid-template-columns:1.1fr .9fr .65fr auto;gap:10px;margin-bottom:16px}

.plan-add input{border:1px solid var(--line);background:#fff;border-radius:17px;padding:13px 14px;font:inherit;color:var(--ink);outline:0}

.plan-list{display:grid;gap:12px}

.check-dot{width:34px;height:34px;border:2px solid #a2a9b8;border-radius:999px}

.price-tag{display:inline-flex;align-items:center;gap:5px;margin-top:8px;border-radius:999px;padding:5px 9px;background:#eaf3ff;color:#275190;font-size:13px;font-weight:1000}

.remove-item{border:0;background:var(--soft);color:var(--muted);width:36px;height:36px;border-radius:999px;font-weight:1000;cursor:pointer}

.plan-empty{display:none;border:1px dashed var(--line);border-radius:24px;padding:24px;text-align:center;color:var(--muted);background:#fff}

@media(max-width:760px){
@media(max-width:760px){.recommendation-grid{grid-template-columns:1fr}.creator-link-card{grid-template-columns:54px 1fr}.creator-link-card .btn{grid-column:1/-1;justify-content:center;width:100%}.creator-mini-avatar{width:54px;height:54px;border-radius:17px}}
.plan-days{grid-template-columns:repeat(5,1fr);gap:8px}
.calendar-btn{display:none}
.plan-day{border-radius:18px;padding:12px 6px}
.plan-day b{font-size:24px}
.surprise-card{grid-template-columns:1fr;gap:12px}
.surprise-card .btn{width:100%;justify-content:center}
.plan-add{grid-template-columns:1fr}
}

.story-phone-head{height:190px;background:linear-gradient(135deg,#eaf3ff,#fff2cf);padding:22px}

.story-phone-head img{height:48px}

.story-phone-head h3{margin:14px 0 4px;font-family:Georgia,serif;color:var(--navy);font-size:34px;line-height:1}

.story-stats{position:absolute;left:16px;right:16px;top:158px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

.story-stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;text-align:center;box-shadow:0 12px 28px rgba(7,31,65,.11)}

.story-stat b{display:block;color:var(--navy);font-size:18px}

.story-stat small{color:var(--muted);font-weight:800;font-size:10px}

.story-phone-body{padding:92px 16px 92px}

.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:12px}

.photo-tile{height:86px;border-radius:18px;background:linear-gradient(135deg,#fff3d0,#eaf3ff);border:1px solid var(--line);display:grid;place-items:center;font-size:26px}

.rank-card,.review-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:13px;margin-bottom:11px}

.rank-card b,.review-card b{color:var(--navy)}

.rank-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:7px;font-size:13px}

.stars{color:var(--gold);font-weight:1000}

.review-card p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.35}

.saved-pill{display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid var(--line);border-radius:999px;padding:8px 10px;color:var(--blue);font-size:12px;font-weight:1000;margin-top:9px}

.story-hero{background:linear-gradient(135deg,#ffffff 0%,#fff7df 45%,#eef6ff 100%)}

.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.story-card{border:1px solid var(--line);border-radius:24px;background:#fff;padding:18px}

.story-card b{color:var(--navy)}

.story-card small{display:block;color:var(--muted);font-weight:750;margin-top:5px}

.memory-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.memory-tile{min-height:92px;border-radius:20px;background:linear-gradient(135deg,#eaf3ff,#fff2cf);display:grid;place-items:center;font-size:28px;border:1px solid var(--line)}

.footer-note{color:var(--muted);font-size:13px;text-align:center;padding:16px 0 0}



/* ── COMPACT ICON-ONLY MOBILE FOOTER NAV ────────────────────
   Five slots: Home | Discover | Hey Jiminy | Plan | Account
   Icon-only, no text labels. Compact 60px height.
   Hidden on desktop (≥1081px) via rule at bottom of file.
   This is the ONLY active bottom-nav implementation.
──────────────────────────────────────────────────────────── */
.bottom-nav{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(8px + env(safe-area-inset-bottom));
  height:60px;
  border-radius:22px;
  background:#60738D;
  display:flex;
  align-items:center;
  justify-content:space-around;
  z-index:300;
  box-shadow:0 4px 24px rgba(7,31,65,.32);
  width:auto;
  transform:none;
  grid-template-columns:none;
  padding:0;
  gap:0;
}
/* Nav buttons — 52x52 tap target, icon-only */
.bottom-nav-btn{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--navy);
  cursor:pointer;
  text-decoration:none;
  font-size:0;
  line-height:1;
  border-radius:12px;
  transition:color .15s;
  flex-shrink:0;
}
.bottom-nav-btn:hover{color:var(--navy2);}
.bottom-nav-btn.active{color:#d4af37;}

/* SVG icons — fixed 26px, never inherit image sizing */
.bottom-nav-icon{
  width:26px !important;
  height:26px !important;
  max-width:26px !important;
  max-height:26px !important;
  display:block;
  flex-shrink:0;
  stroke:currentColor;
  overflow:visible;
}

/* Active gold dot under icon */
.bottom-nav-btn.active::after{
  content:'';
  position:absolute;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  width:4px;height:4px;
  border-radius:50%;
  background:#d4af37;
}
.bottom-nav-btn{position:relative;}

/* Hey Jiminy center button — slightly elevated, gold ring, compact */
.bottom-nav-btn.bottom-nav-hey{
  width:52px;
  height:52px;
  border-radius:999px;
  border:2px solid #d4af37;
  background:#071f3f;
  transform:translateY(-10px);
  box-shadow:0 4px 16px rgba(212,175,55,.25);
  color:#d4af37;
  padding:0;
  position:relative;
}
.bottom-nav-btn.bottom-nav-hey::after{display:none;}


/* Hey ring span — centers the image */
.bottom-nav-hey-ring{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

/* Umbrella image — MUST be constrained, never natural size */
.bottom-nav-hey-img{
  width:30px !important;
  height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  display:block;
  border-radius:0;
  flex-shrink:0;
}



    .hey-dialog{position:fixed;left:50%;bottom:calc(106px + env(safe-area-inset-bottom));transform:translate(-50%,14px);opacity:0;visibility:hidden;display:none;pointer-events:none;width:min(460px,calc(100% - 26px));background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:0 28px 80px rgba(7,31,65,.26);padding:18px;z-index:42;transition:opacity .2s,transform .2s,visibility .2s}

.hey-dialog.open{opacity:1;visibility:visible;display:block;pointer-events:auto;transform:translate(-50%,0)}

.hey-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

.hey-dialog-title{display:flex;align-items:center;gap:12px;font-weight:1000;color:var(--navy)}

.hey-orb{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#0643a5);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 14px 30px rgba(29,95,205,.28)}

.hey-close{border:0;background:var(--soft);color:var(--navy);width:36px;height:36px;border-radius:999px;font-weight:1000;cursor:pointer}

.hey-prompt{background:linear-gradient(135deg,#f7fbff,#fff8e8);border:1px solid var(--line);border-radius:22px;padding:14px;color:#293656;line-height:1.4}

.hey-input{margin-top:12px;display:flex;gap:8px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:8px}

.hey-input input{border:0;outline:0;flex:1;min-width:0;padding:10px;color:var(--ink);font:inherit}

.hey-input button{border:0;border-radius:15px;background:var(--blue);color:#fff;font-weight:1000;padding:10px 14px;cursor:pointer}

/* Old hey-tab styles removed in Phase 4 — replaced by .bottom-nav-hey */



/* Old bottom-nav library/hey-label styles removed in Phase 4 */


    .more-sheet{position:fixed;left:50%;bottom:calc(102px + env(safe-area-inset-bottom));transform:translate(-50%,14px);opacity:0;pointer-events:none;width:min(420px,calc(100% - 26px));background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 24px 70px rgba(7,31,65,.22);padding:12px;z-index:39;transition:.2s}

.more-sheet.open{opacity:1;pointer-events:auto;transform:translate(-50%,0)}

.more-sheet button{width:100%;border:0;background:#fff;border-radius:18px;padding:15px;text-align:left;font-weight:1000;color:var(--navy);cursor:pointer}

.more-sheet button:hover{background:var(--soft)}

.more-sheet small{display:block;color:var(--muted);font-weight:750;margin-top:3px}

.scrim{position:fixed;inset:0;background:rgba(4,23,47,.42);z-index:25;display:none}

.scrim.show{display:block}

@media(max-width:1080px){

      .app-shell{display:block;background-image:none;}
      .main{height:100svh;overflow-y:scroll;overflow-x:hidden;}
      .sidebar{position:fixed;left:-292px;width:280px;z-index:150;padding-top:calc(22px + env(safe-area-inset-top));}
.sidebar.open{left:0}
.collapse-btn{display:none}
.mobile-menu{display:inline-flex;flex:0 0 auto}
.top-logo span{display:none}
.top-logo{flex:1;justify-content:center;min-width:0;padding:0 8px}
.top-logo img{height:42px;width:auto;max-width:min(168px,42vw);object-fit:contain;object-position:center;display:block}
.hey-pill{flex:0 0 auto}
.two,.three,.feature-grid,.story-grid{grid-template-columns:1fr}
.content{width:min(760px,calc(100% - 28px))}
.desktop-only{display:none}
.hero-card{padding:22px}
.screen{height:650px}
.mapbox{height:460px}
}

@media(max-width:620px){

      .topbar{padding:0 12px 10px;gap:8px;}
.hey-pill{padding:9px 10px}
.hey-pill span:not(.dot){display:none}
.content{width:calc(100% - 20px);padding-top:12px}
.card{border-radius:24px;padding:16px}
.title{font-size:45px}
.lead{font-size:16px}
.metric-row{grid-template-columns:1fr}
.cal{grid-template-columns:repeat(3,1fr)}
.phone{border-radius:30px;padding:8px}
.screen{height:620px;border-radius:24px}
.screen-body{padding-top:88px}
/* old bottom-nav mobile override removed Phase 4 */
.section-title{display:block}
.section-title h2{font-size:34px}
.creator-card{grid-template-columns:1fr}
.avatar{width:74px;height:74px}
.mapbox{height:420px}
.food-list .row{grid-template-columns:1fr}
.main{padding-bottom:98px}
}


  .profile-header-icon{width:42px;height:42px;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;display:block;background:transparent;flex:0 0 auto;border-radius:50%;transform:none}

@media(max-width:620px){

      #page-home .phone{max-width:360px}

      #page-home .screen{height:640px}

      #page-home .story-phone-head{height:172px;padding:20px}

      #page-home .story-stats{top:142px;left:14px;right:14px;gap:7px}

      #page-home .story-phone-body{padding:88px 14px 92px}

      #page-home .rank-row{font-size:12px;align-items:flex-start}

      #page-home .assistant-bar{bottom:62px}
}



    .prompt-card{background:linear-gradient(135deg,#ffffff 0%,#f8fbff 48%,#fff8e6 100%);border:1px solid var(--line);border-radius:32px;padding:22px;box-shadow:var(--shadow);height:100%;display:flex;flex-direction:column;gap:14px}


    .prompt-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}


    .prompt-card-head h3{margin:0;font-family:Georgia,serif;color:var(--navy);font-size:34px;line-height:1}


    .prompt-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(244,184,37,.42);background:#fff8e6;color:#8a6412;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:1000;white-space:nowrap}


    .chat-thread{display:grid;gap:12px}


    .chat-pair{display:grid;gap:8px}


    .bubble{max-width:86%;border-radius:22px;padding:13px 15px;line-height:1.38;font-weight:750;box-shadow:0 10px 24px rgba(7,31,65,.07)}


    .bubble.user{justify-self:end;background:linear-gradient(135deg,var(--blue),#0643a5);color:#fff;border-bottom-right-radius:8px}


    .bubble.jiminy{justify-self:start;background:#fff;color:#293656;border:1px solid var(--line);border-bottom-left-radius:8px}


    .bubble small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:1000;margin-bottom:5px;opacity:.72}


    .prompt-footer{margin-top:auto;border:1px solid rgba(29,95,205,.12);background:rgba(255,255,255,.72);border-radius:22px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}


    .prompt-footer span{color:var(--muted);font-weight:850;line-height:1.35}

@media(max-width:620px){
.prompt-card{border-radius:26px;padding:16px}
.prompt-card-head{display:block}
.prompt-card-head h3{font-size:30px;margin-bottom:10px}
.bubble{max-width:94%;font-size:14px}
.prompt-footer{display:grid}
.prompt-footer .btn{width:100%;justify-content:center}
}




    .prompt-extra{display:none;gap:12px}


    .prompt-extra.open{display:grid}


    .expand-prompts-btn{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 14px;font-weight:1000;color:var(--navy);cursor:pointer}




    .profile-header-btn{display:flex;align-items:center;gap:10px}


    .profile-header-btn img{width:42px;height:42px;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;display:block;background:transparent;border-radius:50%;transform:none}

@media(max-width:620px){

      .profile-header-btn{width:46px;height:46px;border-radius:999px;padding:8px;justify-content:center;background:#fff}

      .profile-header-btn span{display:none!important}

      .profile-header-btn img{width:40px;height:40px;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;transform:none}
}




    .public-private-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}


    .mode-card{border:1px solid var(--line);background:#fff;border-radius:24px;padding:18px;box-shadow:0 12px 30px rgba(7,31,65,.06)}


    .mode-card.public{background:linear-gradient(135deg,#ffffff,#eef6ff)}


    .mode-card.private{background:linear-gradient(135deg,#ffffff,#fff8e6)}


    .mode-card h4{font-family:Georgia,serif;color:var(--navy);font-size:27px;line-height:1;margin:0 0 7px}


    .mode-card p{color:var(--muted);font-size:14px;line-height:1.4;margin:0 0 14px}


    .mode-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:1000;margin-bottom:12px}


    .mode-pill.public{background:#eff6ff;color:#275190;border:1px solid #dbeaff}


    .mode-pill.private{background:#fff8e6;color:#8a6412;border:1px solid rgba(244,184,37,.42)}


    .signin-note{border:1px dashed rgba(29,95,205,.35);background:#f7fbff;border-radius:20px;padding:13px 14px;color:#293656;font-weight:850;line-height:1.4;margin-top:14px}

@media(max-width:760px){
.public-private-grid{grid-template-columns:1fr}
.mode-card .btn{width:100%;justify-content:center}
}

@media(max-width:1080px){

      .sidebar .side-nav .nav-btn[data-page="discover"],
      .sidebar .side-nav .nav-btn[data-page="plan"]{display:none}
}

@media(min-width:1081px){

      .footer-nav,
      .mobile-footer,
      footer.footer-bar{
        display:none !important;
      }
}

@media(min-width:1081px){

      .bottom-nav{
        display:none !important;
      }

      .main{
        padding-bottom:0 !important;
      }
}

@media(max-width:1080px){

      .sidebar .side-card{display:none}

      .sidebar .side-nav .nav-btn[data-page="lists"]{display:none}


      .mobile-stories-toggle{justify-content:space-between}

      .mobile-stories-toggle .nav-label{flex:1}

      .mobile-stories-caret{font-weight:1000;color:var(--gold);transition:transform .18s ease}


      .mobile-stories-sub{margin-left:44px;gap:6px;padding:2px 0 8px}

      .mobile-stories-sub .sub-btn{color:#dce8ff}
}


    .filter-chip{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:9px 12px;font-weight:1000;font-size:13px;cursor:pointer}


    .filter-chip.active{background:linear-gradient(135deg,var(--blue),#0643a5);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(29,95,205,.18)}



    /* Site-wide responsive button feedback */
    .btn{
      transition:transform .14s ease, box-shadow .14s ease, background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
      position:relative;
    }


    .btn:hover:not(:disabled){
      transform:translateY(-1px);
      box-shadow:0 16px 30px rgba(7,31,65,.14);
    }


    .btn:active:not(:disabled){
      transform:translateY(1px) scale(.98);
      box-shadow:0 8px 18px rgba(7,31,65,.1);
    }


    .btn.is-loading{
      opacity:.72;
      pointer-events:none;
    }


    .btn.is-added,
    .btn.is-success{
      background:linear-gradient(135deg,#2f8f57,#1f6f43)!important;
      color:#fff!important;
      border-color:transparent!important;
      box-shadow:0 14px 28px rgba(31,111,67,.22)!important;
    }


    .btn.is-warning{
      background:linear-gradient(135deg,#f4b825,#d89b11)!important;
      color:var(--navy)!important;
      border-color:transparent!important;
    }


    .quick-list-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:14px;
    }


    .quick-list-card{
      border:1px solid var(--line);
      background:#fff;
      border-radius:22px;
      padding:16px;
      box-shadow:0 12px 30px rgba(7,31,65,.06);
    }


    .quick-list-card b{color:var(--navy)}


    .quick-list-card small{display:block;color:var(--muted);font-weight:800;margin-top:5px;line-height:1.35}

@media(max-width:760px){

      .quick-list-grid{grid-template-columns:1fr}
}


    .list-cascade-grid{grid-template-columns:1fr 1fr 1.25fr .8fr .9fr auto}


    .ride-slot-grid{display:grid;gap:9px}

@media(max-width:1180px){
.list-cascade-grid{grid-template-columns:1fr 1fr 1fr}
}

@media(max-width:760px){

      .trip-date-controls,
      .trip-day-count-controls,
      .meal-assignment-grid,
      .phase3-search-row,
      .plan-add{
        grid-template-columns:1fr!important;
        gap:9px;
      }

      .trip-date-field input,
      .meal-assignment-field select,
      .phase3-search-row input,
      .plan-add input{
        min-height:46px;
        font-size:16px;
      }

      .filter-chip{
        flex:1 1 auto;
        text-align:center;
        justify-content:center;
        padding:10px 9px;
        font-size:12px;
      }

      .trip-day-actions .btn,
      .phase3-card-actions .btn,
      .map-plan-actions .btn,
      .meal-assignment-grid .btn,
      .plan-add .btn,
      .surprise-card .btn{
        width:100%;
        justify-content:center;
      }
}



    /* v91: resilient Jiminy Locations loading + auth controls */
    .jiminy-load-status{
      border:1px dashed rgba(29,95,205,.28);
      background:rgba(255,255,255,.82);
      color:var(--muted);
      border-radius:16px;
      padding:10px 12px;
      font-size:13px;
      font-weight:850;
      line-height:1.35;
      margin:8px 0;
    }


    body.jiminy-signed-in #jiminySignInBtn,
    body.jiminy-signed-in #jiminyCreateAccountBtn{display:none}


    body:not(.jiminy-signed-in) #jiminySignOutBtn{display:none}


    body.jiminy-signed-in #jiminySignOutBtn{display:inline-flex}


    .jiminy-action-sheet{
      position:fixed;
      left:50%;
      bottom:calc(102px + env(safe-area-inset-bottom));
      transform:translate(-50%,14px);
      opacity:0;
      pointer-events:none;
      width:min(440px,calc(100% - 26px));
      background:#fff;
      border:1px solid var(--line);
      border-radius:26px;
      box-shadow:0 24px 70px rgba(7,31,65,.22);
      padding:16px;
      z-index:80;
      transition:.2s;
    }


    .jiminy-action-sheet.open{
      opacity:1;
      pointer-events:auto;
      transform:translate(-50%,0);
    }


    .jiminy-action-sheet h3{
      margin:0 0 6px;
      font-family:Georgia,serif;
      color:var(--navy);
      font-size:28px;
      line-height:1;
    }


    .jiminy-action-sheet p{
      margin:0 0 12px;
      color:var(--muted);
      line-height:1.4;
      font-weight:800;
    }


    .jiminy-action-sheet .sheet-actions{
      display:grid;
      gap:8px;
    }


    .jiminy-action-sheet .sheet-actions .btn{
      width:100%;
      justify-content:center;
    }


    .jiminy-action-sheet .sheet-close{
      position:absolute;
      top:12px;
      right:12px;
      border:0;
      background:var(--soft);
      color:var(--navy);
      width:36px;
      height:36px;
      border-radius:999px;
      font-weight:1000;
      cursor:pointer;
    }



  
    /* v109 JPG share preview helpers */
    .jiminy-share-preview{
      width:100%;
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      background:#fff;
      margin:10px 0 12px;
    }


    .jiminy-share-preview img{
      width:100%;
      display:block;
    }



  
    /* v110 iPhone share fallback helpers */
    .jiminy-share-status{
      border:1px dashed rgba(29,95,205,.28);
      background:#f7fbff;
      color:#293656;
      border-radius:16px;
      padding:11px 12px;
      font-size:13px;
      font-weight:850;
      line-height:1.35;
      margin:10px 0;
    }


    .jiminy-status-line{border:1px dashed rgba(29,95,205,.28);background:rgba(255,255,255,.76);border-radius:16px;padding:11px 12px;color:var(--muted);font-size:13px;font-weight:850;line-height:1.35;margin-top:12px}

@media(max-width:1080px){

/* old bottom-nav z-index block removed Phase 4 */
}





  /* v378: Story builder dropdowns reset to no selection when entering/changing Story pages. */
  #storyV376FoodPark option[value=""], #storyV376RidePark option[value=""]{font-weight:900;}






  /* v456 authoritative Home render. Uses new v456 classes so older v454/v455 Home rules cannot compete. */
  html,body{overflow-x:hidden!important;max-width:100%!important;}

@media(max-width:620px){

    .content{width:calc(100% - 20px)!important;margin-left:auto!important;margin-right:auto!important;}

/* old z-index removed Phase 4 */
}

@media(max-width:1080px){

/* old bottom-nav block 1 removed Phase 4 */
}

@media(max-width:1080px){

/* old bottom-nav block 2 removed Phase 4 */
}





/* v281 Story Route View: Plan List map styling + reliable Story day selector */
#storyV273RouteView,#storyV274RouteView,#storyV275RouteView,#storyV276RouteView,#storyV278RouteView,#storyV280RouteView{display:none!important}


/* old 3-col grid removed Phase 4 */

@media(max-width:1080px){

    .sidebar .side-nav .nav-btn[data-page="home"]{display:flex!important;}

  /* old 3-col grid removed Phase 4 */

    .bottom-nav button[data-page="home"]{display:none!important;}
}

@media(max-width:1080px){

    .sidebar .side-nav .nav-btn[data-page="creator"]{display:flex!important;}
}

@media(max-width:1080px){
.sidebar .side-nav .nav-btn[data-page="account"]{display:flex!important;}
}





.rating-modal-v395{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(7,31,65,.52);backdrop-filter:blur(4px)}


.rating-modal-v395.open{display:flex}


.rating-dialog-v395{width:min(760px,100%);max-height:86vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:30px;padding:24px;box-shadow:0 24px 70px rgba(7,31,65,.28)}


.rating-dialog-v395 h3{margin:0 0 8px;font-family:Georgia,serif;color:var(--navy);font-size:42px;line-height:1}


.rating-dialog-v395 p{margin:0 0 18px;color:var(--muted);font-weight:850;line-height:1.4}


.rating-question-v395{border:1px solid var(--line);border-radius:22px;padding:16px;margin:12px 0;background:#fff}


.rating-question-v395 b{display:block;color:var(--navy);font-size:20px;margin-bottom:10px}


.rating-stars-v395{display:flex;gap:12px;flex-wrap:wrap}


.rating-star-v395{border:0;background:transparent;color:#cfd6e6;font-size:42px;line-height:1;cursor:pointer;padding:2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}


.rating-star-v395.active{color:#f4b825}


.rating-dialog-actions-v395{display:grid;gap:10px;margin-top:16px}


.rating-dialog-actions-v395 .btn{min-height:52px;justify-content:center;border-radius:18px}

@media(max-width:760px){
.rating-modal-v395{padding:18px}
.rating-dialog-v395{border-radius:26px;padding:18px;max-height:82vh}
.rating-dialog-v395 h3{font-size:34px}
.rating-question-v395 b{font-size:18px}
.rating-star-v395{font-size:36px}
}





  /* v401: unified Must-Do/Favorites rating dialog with food-vs-ride questions. */
  .rating-modal-v401{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:rgba(7,31,65,.52);
    backdrop-filter:blur(4px);
  }


  .rating-modal-v401.open{display:flex}


  .rating-dialog-v401{
    width:min(760px,100%);
    max-height:86vh;
    overflow:auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius:30px;
    padding:24px;
    box-shadow:0 24px 70px rgba(7,31,65,.28);
  }


  .rating-dialog-v401 h3{
    margin:0 0 8px;
    font-family:Georgia,serif;
    color:var(--navy);
    font-size:42px;
    line-height:1;
  }


  .rating-dialog-v401 p{
    margin:0 0 18px;
    color:var(--muted);
    font-weight:850;
    line-height:1.4;
  }


  .rating-question-v401{
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    margin:12px 0;
    background:#fff;
  }


  .rating-question-v401 b{
    display:block;
    color:var(--navy);
    font-size:20px;
    margin-bottom:10px;
  }


  .rating-stars-v401{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }


  .rating-star-v401{
    border:0;
    background:transparent;
    color:#cfd6e6;
    font-size:42px;
    line-height:1;
    cursor:pointer;
    padding:2px;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }


  .rating-star-v401.active{color:#f4b825}


  .rating-dialog-actions-v401{
    display:grid;
    gap:10px;
    margin-top:16px;
  }


  .rating-dialog-actions-v401 .btn{
    min-height:52px;
    justify-content:center;
    border-radius:18px;
  }

@media(max-width:760px){

    .rating-modal-v401{padding:18px}

    .rating-dialog-v401{border-radius:26px;padding:18px;max-height:82vh}

    .rating-dialog-v401 h3{font-size:34px}

    .rating-question-v401 b{font-size:18px}

    .rating-star-v401{font-size:36px}
}





  /* v404: Clear Ratings action for the unified Must-Do/Favorites rating dialog. */
  .rating-dialog-actions-v401 [data-v401-rating-clear]{
    border-color:rgba(154,52,18,.22);
    background:#fff7ed;
    color:#9a3412;
  }


  @keyframes jiminyBadgePopV406{
    from{transform:scale(.96);opacity:.55}
    to{transform:scale(1);opacity:1}
  }





  /* v452: replaces the competing v448-v451 icon scripts/styles with one stable renderer. */
  .top-logo{
    cursor:pointer!important;
    -webkit-tap-highlight-color:rgba(29,95,205,.08);
    touch-action:manipulation;
  }


  .top-logo:active{transform:scale(.985)}



  .bottom-nav button[data-page="discover"],
  .bottom-nav button[data-page="plan"]{
    justify-content:center!important;
    gap:0!important;
    padding-top:4px!important;
    padding-bottom:5px!important;
    overflow:visible!important;
    position:relative!important;
    z-index:2!important;
  }


/* old hey-tab rule removed Phase 4 */


  .bottom-nav button[data-page="discover"] .bi,
  .bottom-nav button[data-page="plan"] .bi{
    width:56px!important;
    height:48px!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
    margin-bottom:1px!important;
    color:var(--gold)!important;
    overflow:visible!important;
  }


  .bottom-nav button[data-page="discover"] .bi img,
  .bottom-nav button[data-page="plan"] .bi img{
    width:56px!important;
    height:56px!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    display:block!important;
    background:transparent!important;
    transform:scale(2.1)!important;
    transform-origin:center center!important;
  }



  /* Profile header icon — perfectly circular, no transforms */
  .profile-header-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid var(--line)!important;
    box-shadow:0 4px 16px rgba(7,31,65,.1)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    flex:0 0 auto!important;
  }

  .profile-header-btn span{display:none!important;}

  .profile-header-btn img,
  .profile-header-icon,
  .topbar img[alt="Passport"],
  .topbar img[alt="Account Page"]{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    aspect-ratio:1/1!important;
    object-fit:cover!important;
    object-position:50% 50%!important;
    border-radius:50%!important;
    display:block!important;
    transform:none!important;
    transform-origin:center center!important;
    max-width:none!important;
    max-height:none!important;
    clip-path:none!important;
    background:transparent!important;
  }

@media(max-width:620px){
  .profile-header-btn{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
  .profile-header-btn img,
  .profile-header-icon,
  .topbar img[alt="Passport"],
  .topbar img[alt="Account Page"]{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
}

@media(min-width:621px){
  .profile-header-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  .profile-header-btn img,
  .profile-header-icon,
  .topbar img[alt="Passport"],
  .topbar img[alt="Account Page"]{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
}


  button,.btn,[data-page],[data-story-v500-action],[data-list-v205-action]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(29,95,205,.08)}
  .jiminy-v500-tap-active{transform:scale(.985)!important;opacity:.9!important;transition:transform .08s ease,opacity .08s ease!important}
/* v500 performance stability: prevents clipped overflow on pages with
   tall dynamic content (Story builder, Account list pages, Plan).
   Intentionally cross-page — applies to multiple #page- ids at once. */
body.jiminy-v500-stability #page-story-page,
body.jiminy-v500-stability #page-account-mustdo,
body.jiminy-v500-stability #page-account-favorites,
body.jiminy-v500-stability #page-account-jewels,
body.jiminy-v500-stability #page-account-ratings,
body.jiminy-v500-stability #page-account-routes,
body.jiminy-v500-stability #page-plan{overflow:visible!important;max-height:none!important;contain:none!important}

/* ── AUTH DRAWER ──────────────────────────────────────────────
   Slides in from the right on desktop, up from the bottom on
   mobile. Opened by openAuthDrawer() in app.js.
   body.jiminy-signed-in controls visibility of signed-in state.
─────────────────────────────────────────────────────────────── */
.auth-drawer-scrim{
  position:fixed;inset:0;background:rgba(7,31,65,.38);
  opacity:0;pointer-events:none;z-index:1100;
  transition:opacity .25s ease;
  visibility:hidden;
}
.auth-drawer-scrim.show{opacity:1;pointer-events:all;visibility:visible;}

.auth-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);
  background:#fff;z-index:1101;
  display:flex;flex-direction:column;gap:0;
  padding:0;overflow-y:auto;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 48px rgba(7,31,65,.18);
  /* Defensive: guarantees the drawer is fully inert and invisible
     until .open is added, even if a stale/cached stylesheet or
     load-order issue ever interferes with the transform alone. */
  visibility:hidden;
  pointer-events:none;
}
.auth-drawer.open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
}

.auth-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 28px 0;
}
.auth-drawer-title{
  font-family:Georgia,serif;font-size:26px;color:var(--navy);
  margin:0;line-height:1;letter-spacing:-.03em;
}
.auth-drawer-close{
  width:36px;height:36px;border-radius:50%;border:0;
  background:var(--line);color:var(--navy);font-size:20px;
  cursor:pointer;display:grid;place-items:center;line-height:1;
  transition:background .15s;
}
.auth-drawer-close:hover{background:#dfe7f5;}

.auth-tabs{
  display:flex;gap:0;padding:20px 28px 0;border-bottom:1px solid var(--line);
  margin-top:16px;
}
.auth-tab{
  flex:1;padding:10px 0;border:0;background:transparent;
  color:var(--muted);font-weight:900;font-size:15px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s, border-color .15s;
}
.auth-tab.active{color:var(--navy);border-bottom-color:var(--navy);}

.auth-fields{display:flex;flex-direction:column;gap:14px;padding:24px 28px 0;}
.auth-field{display:flex;flex-direction:column;gap:6px;}
.auth-field label{font-size:13px;font-weight:1000;color:var(--navy);}
.auth-field input{
  height:48px;border:1px solid var(--line);border-radius:14px;
  padding:0 16px;font-size:15px;color:var(--navy);
  background:#fff;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.auth-field input:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(7,31,65,.1);
}

.auth-status{
  min-height:20px;margin:10px 28px 0;
  font-size:13px;font-weight:900;color:var(--muted);
}

.auth-panel,.auth-signed-in{padding:16px 28px 28px;}
.auth-submit{width:100%;justify-content:center;min-height:52px;}

.auth-signed-in{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;text-align:center;padding:32px 28px;
}
.auth-signed-in-icon{font-size:36px;color:var(--gold);}
.auth-signed-in-msg{margin:0;color:var(--navy);font-weight:900;font-size:16px;}

/* Signed-in user display in sidebar */
.side-user{
  display:none;align-items:center;gap:12px;
  padding:12px 16px;margin-bottom:8px;
  border-radius:18px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
}

/* ── ANTI-FLICKER: pre-paint auth state ─────────────────────
   When the inline <body> script detects a cached session and
   adds jiminy-signed-in to body before first paint, the sidebar
   shows the signed-in state from frame 1 with no flash.
   The side-user block is hidden by default and revealed only
   when body.jiminy-signed-in is present — which the inline
   script sets synchronously before any element renders.
──────────────────────────────────────────────────────────── */
.side-user{visibility:hidden;}
body.jiminy-signed-in .side-user{visibility:visible;}
body.jiminy-signed-in .side-user{display:flex;}
.side-user-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--gold);color:var(--navy);
  display:grid;place-items:center;
  font-size:18px;font-weight:1000;flex-shrink:0;
  box-shadow:0 4px 12px rgba(244,184,37,.35);
}
.side-user-name{
  color:#fff;font-size:14px;font-weight:1000;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.01em;
}

/* Mobile: drawer slides down, positioned between the sticky header
   and the floating bottom-nav so the title/close button and the
   full drawer content are always fully visible and reachable
   (nothing hidden above the header or under the bottom-nav pill). */
@media(max-width:620px){
  .auth-drawer{
    top:calc(56px + env(safe-area-inset-top));
    right:0;left:0;bottom:auto;width:100%;
    border-radius:0 0 24px 24px;
    transform:translateY(-100%);
    max-height:calc(100vh - (56px + env(safe-area-inset-top)) - (76px + env(safe-area-inset-bottom)));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .auth-drawer.open{transform:translateY(0);}
  /* Sit above the header but below/clear of the bottom-nav pill */
  .auth-drawer{z-index:290;}
  .auth-drawer-scrim{z-index:280;}
}

/* Hide bottom-nav on desktop — sidebar handles navigation above 1080px */
@media(min-width:1081px){
  .bottom-nav{display:none!important;}
}

/* ── EXPLORER BACKGROUND — Discover + Plan pages only ── */
.jiminy-explorer-page {
  background-color: #faf6ed;
  background-image: url("/images/jiminy-explorer-background.png");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

/* ── AUTH DRAWER: expanded Create Account fields ── */
.auth-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.auth-field-hint{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4;}
@media(max-width:480px){.auth-field-row{grid-template-columns:1fr;}}

/* ── BOOK YOUR TRIP PROMO ─────────────────────────────────────
   In-page content card added directly to each page's content
   section. NOT in any shared component. NOT fixed/sticky.
   Does NOT interact with bottom-nav z-index or position. ──── */
.book-trip-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #0d2347 0%, #071626 100%);
  border: 1.5px solid rgba(244,184,37,.45);
  border-radius: 20px;
  padding: 16px 18px;
  margin: 24px 0 calc(90px + env(safe-area-inset-bottom));
  box-shadow: 0 8px 28px rgba(7,31,65,.3);
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.book-trip-promo__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(244,184,37,.6);
  background: rgba(244,184,37,.1);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.book-trip-promo__icon svg { width: 22px; height: 22px; }
.book-trip-promo__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.book-trip-promo__title {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}
.book-trip-promo__text {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
}
.book-trip-promo__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: #071026;
  font-weight: 1000;
  font-size: 13px;
  border-radius: 999px;
  padding: 11px 20px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.book-trip-promo__button:hover { filter: brightness(1.06); }
@media(min-width: 1081px) {
  .book-trip-promo { max-width: 900px; margin: 24px auto 8px; }
}

/* ── EXPLORE DIALOGS (Discover / Plan, mobile bottom-nav) ─────
   Self-contained overlay, independent of #scrim (whose onclick is
   hardcoded to closeSidebar()) — each dialog gets its own backdrop
   so clicking outside closes the right thing. */
.explore-dialog-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 31, 65, .55);
  backdrop-filter: blur(3px);
}
.explore-dialog-modal.open { display: flex; }

.explore-dialog-card {
  position: relative;
  width: min(340px, 100%);
  aspect-ratio: 1108 / 1401;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16% 13%;
  text-align: center;
}
#discoverDialog .explore-dialog-card {
  background-image: url('/images/discover-dialog.png?v2');
  /* discover-dialog.png has a "Discover" ribbon graphic near the top —
     push content down below it instead of vertically centering, which
     let the heading overlap the ribbon. */
  justify-content: flex-start;
  padding-top: 36%;
}
#planDialog .explore-dialog-card {
  aspect-ratio: 1080 / 1401;
  background-image: url('/images/plan-dialog.png?v2');
}

.explore-dialog-close {
  position: absolute;
  top: 4%;
  right: 5%;
  width: 44px;
  height: 44px;
  transform: translate(6px, -6px);
  background: none;
  border: none;
  cursor: pointer;
  color: transparent;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.explore-dialog-close:focus-visible {
  outline: 2px solid var(--gold);
  border-radius: 50%;
}

.explore-dialog-heading {
  margin: 0 0 22px;
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: clamp(16px, 4.6vw, 20px);
  line-height: 1.35;
  color: var(--navy);
}
#planDialog .explore-dialog-heading { color: #fff; }

.explore-dialog-pills {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 230px;
}
.explore-dialog-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  background: var(--cream);
  border: 2px solid var(--navy);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(7, 31, 65, .18);
  font-weight: 900;
  font-size: 13px;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: .01em;
  transition: transform .12s ease, background .12s ease;
}
.explore-dialog-pill:hover {
  background: #fff;
  transform: translateY(-1px);
}
.explore-dialog-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
#planDialog .explore-dialog-pill {
  background: var(--cream);
  border-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .explore-dialog-modal { transition: none; }
}

/* ── SIDEBAR NAV ACCORDIONS (Discover / Plan) ─────────────────
   Applies on both the desktop persistent sidebar and the mobile
   slide-in sidebar — same markup, same CSS, no separate mobile
   variant needed. */
.nav-accordion { display: flex; flex-direction: column; }

.nav-accordion-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
}
.nav-accordion-chevron {
  margin-left: auto;
  font-size: 13px;
  opacity: .65;
  transition: transform .2s ease;
}
.nav-accordion.open .nav-accordion-chevron { transform: rotate(90deg); }

.nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.nav-submenu-inner { overflow: hidden; }
.nav-accordion.open .nav-submenu { grid-template-rows: 1fr; }

.nav-submenu-link {
  display: block;
  padding: 9px 14px 9px 44px;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
}
.nav-submenu-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-submenu-link.active { color: var(--gold); font-weight: 900; }

.app-shell.collapsed .nav-accordion-chevron,
.app-shell.collapsed .nav-submenu {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-accordion-chevron, .nav-submenu { transition: none; }
}