/* journey-hub.css — the Journey Hub template pieces that sit on top of hub.css:
   stage header, This week / This stage / Saved tabs, section headings, grouped
   lists, the stage roadmap, and the bottom sheet. Additive only: none of these
   class names exist in hub.css, so pages that don't load this file are unaffected.

   Preconception is the first page on this template. It has no due date, so its
   header subline names the stage ("Before pregnancy") and there is no week strip.
   From first trimester on the subline becomes "You're N weeks, N days" and a week
   strip sits between the header and the tabs; that slot is intentionally left free.

   Page provides the same :root tokens as hub.css expects (--rust, --ink, etc.). */

/* ── Stage header ── */
.stage-header { background:linear-gradient(135deg,#2A1F2E 0%,#4A3D5C 50%,#8B6F7A 100%); padding:20px 20px 22px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.stage-header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 30%,rgba(239,217,208,.12) 0%,transparent 60%); pointer-events:none; }
.sh-text { position:relative; min-width:0; }
.sh-eyebrow { font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px; }
.sh-title { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:400; color:#fff; line-height:1.1; margin-bottom:6px; }
.sh-title em { font-style:italic; color:#E8D5EB; }
.sh-sub { font-size:14px; color:rgba(255,255,255,.75); line-height:1.4; }
.sh-moon { width:76px; height:76px; flex-shrink:0; position:relative; border-radius:50%; box-shadow:0 0 22px rgba(232,213,235,.22); }

/* Layout wrappers: on phones they just pass the row through; the wide block below gives them a max width. */
.stage-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:1; min-width:0; position:relative; }
.hub-banner .wrap { display:flex; align-items:flex-start; gap:12px; flex:1; }

/* ── Tabs ── */
.jh-tabs .wrap { flex:1; }
.jh-tabrow { display:flex; }
.jh-tabs { display:flex; background:rgba(255,252,250,.95); border-bottom:1px solid var(--border-light); }
.jh-tab { flex:1; min-height:46px; padding:0 6px; font:500 13px 'DM Sans',sans-serif; color:var(--ink-light); background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; margin-bottom:-1px; -webkit-tap-highlight-color:transparent; }
.jh-tab[aria-selected="true"] { color:var(--rust); font-weight:700; border-bottom-color:var(--rust); }
.jh-panel[hidden] { display:none; }

/* ── Section headings inside a hub grid ── */
.tier { grid-column:1/-1; margin:8px 0 -4px; }
.tier-title { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; line-height:1.15; }
.tier-title em { font-style:italic; }

/* ── Grouped list: rows share one card. .tint is the rose wash used for the Support group. ── */
.hub-list { grid-column:1/-1; background:var(--warm-white); border:1px solid var(--border-light); border-radius:18px; overflow:hidden; }
.hub-list.tint { background:rgba(223,203,204,.42); border-color:rgba(107,45,60,.12); }
.hub-row { display:flex; align-items:center; gap:14px; padding:14px 18px; min-height:68px; border-top:1px solid var(--border-light); text-decoration:none; color:inherit; cursor:pointer; background:none; width:100%; text-align:left; font:inherit; border-left:0; border-right:0; border-bottom:0; -webkit-tap-highlight-color:transparent; }
.hub-list.tint .hub-row { border-top-color:rgba(107,45,60,.1); }
.hub-row:first-child { border-top:0; }
.hub-row-icon { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hub-row-body { flex:1; min-width:0; }
.hub-row-title { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; line-height:1.15; }
.hub-row-title em { font-style:italic; }
.hub-row-desc { font-size:12px; color:var(--ink-light); line-height:1.45; margin-top:2px; }
.hub-list.tint .hub-row-desc { color:var(--ink-mid); }
.hub-row-arrow { color:var(--ink-light); font-size:18px; flex-shrink:0; }
.hub-row.plain { min-height:56px; }
.hub-row.plain .hub-row-title { font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; }

/* ── Stage roadmap: expandable groups on a rail. Deliberately no progress rings and no checkboxes:
   it is somewhere to browse, not a checklist. ── */
.road { grid-column:1/-1; position:relative; padding-left:26px; }
.road::before { content:''; position:absolute; left:5px; top:26px; bottom:26px; width:2px; background:var(--rust-light); }
.rd-node { position:relative; margin-bottom:12px; }
.rd-node::before { content:''; position:absolute; left:-26px; top:26px; width:12px; height:12px; border-radius:50%; background:var(--rust); box-shadow:0 0 0 3px var(--cream-light); }
.rd-card { background:var(--warm-white); border:1px solid var(--border-light); border-radius:16px; overflow:hidden; }
.rd-head { display:flex; align-items:center; gap:12px; padding:14px 16px; min-height:64px; cursor:pointer; width:100%; background:none; border:0; font:inherit; text-align:left; color:inherit; -webkit-tap-highlight-color:transparent; }
.rd-htext { flex:1; min-width:0; }
.rd-title { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; line-height:1.15; }
.rd-title em { font-style:italic; }
.rd-sub { font-size:12px; color:var(--ink-light); margin-top:1px; }
.rd-chev { color:var(--ink-light); display:flex; transition:transform .2s; }
.rd-node.open .rd-chev { transform:rotate(180deg); }
.rd-body { display:none; border-top:1px solid var(--border-light); padding:0 16px; }
.rd-node.open .rd-body { display:block; }
.rd-item { display:flex; align-items:center; gap:4px; border-top:1px solid var(--border-light); min-height:56px; }
.rd-item:first-child { border-top:0; }
.rd-link { flex:1; min-width:0; padding:12px 0; text-decoration:none; color:inherit; }
.rd-iname { font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; }
.rd-idesc { font-size:12px; color:var(--ink-light); line-height:1.45; margin-top:1px; }
.rd-link { background:none; border:0; text-align:left; font:inherit; cursor:pointer; }
.rd-bm { flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; color:var(--ink-light); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.rd-bm[aria-pressed="true"] { color:var(--rust); }
.rd-bm[aria-pressed="true"] svg { fill:currentColor; }

/* ── End-of-tab links and empty state ── */
.jh-end { grid-column:1/-1; text-align:center; border-top:1px solid var(--border-light); padding:18px 8px 4px; font-size:12px; color:var(--ink-light); line-height:1.9; margin-top:6px; }
.jh-end button { color:var(--rust); font:600 12px 'DM Sans',sans-serif; background:none; border:0; cursor:pointer; padding:6px 4px; }
.jh-empty { grid-column:1/-1; text-align:center; background:var(--warm-white); border:1px dashed var(--border); border-radius:18px; padding:40px 26px; }
.jh-empty-icon { width:52px; height:52px; border-radius:14px; background:var(--mauve-light); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }

/* ── Bottom sheet (used for "Choose your circle") ── */
.sheet[hidden] { display:none; }
.sheet { position:fixed; inset:0; z-index:400; display:flex; align-items:flex-end; justify-content:center; }
.sheet-backdrop { position:absolute; inset:0; background:rgba(28,24,22,.45); }
.sheet-panel { position:relative; background:var(--cream-light); width:100%; max-width:560px; max-height:86vh; overflow-y:auto; border-radius:22px 22px 0 0; padding:14px 0 max(env(safe-area-inset-bottom,0px),24px); }
.sheet-bar { display:flex; align-items:center; justify-content:space-between; padding:0 20px 8px; }
.sheet-title { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; }
.sheet-title em { font-style:italic; }
.sheet-done { font:600 13px 'DM Sans',sans-serif; color:var(--rust); background:none; border:0; cursor:pointer; padding:10px 4px; }
.sheet-note { font-size:12px; color:var(--ink-mid); line-height:1.5; padding:0 20px 12px; }

/* ── Wider screens: the web pass. hub.css caps .hub-grid at 560px, so opt in with .jh-wide on <body>. ── */
@media (min-width:769px) {
  .jh-wide .wrap { max-width:1040px; margin:0 auto; padding:0 32px; }
  .jh-wide .top-nav { padding:0 32px; }
  .jh-wide .stage-header { padding:0; }
  .jh-wide .stage-header .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:34px; padding-bottom:34px; position:relative; }
  .jh-wide .sh-title { font-size:42px; }
  .jh-wide .sh-sub { font-size:16px; }
  .jh-wide .sh-moon { width:112px; height:112px; }
  .jh-wide .jh-tabs { background:none; border-bottom:0; }
  .jh-wide .jh-tabrow { border-bottom:1px solid var(--border-light); max-width:520px; }
  .jh-wide .hub-banner { padding:12px 0; margin-top:14px; border-top:1px solid var(--border-light); }
  .jh-wide .hub-banner .wrap { display:flex; gap:12px; align-items:center; }
  .jh-wide .hub-grid { max-width:none; grid-template-columns:repeat(12,1fr); gap:18px; padding:22px 0 56px; }
  .jh-wide .priority-card { padding:32px; gap:22px; }
  .jh-wide .priority-icon { width:64px; height:64px; border-radius:18px; }
  .jh-wide .priority-name { font-size:32px; }
  .jh-wide .priority-sub { font-size:14px; max-width:520px; }
  .jh-wide .tier { margin-top:20px; }
  .jh-wide .hub-list { display:grid; grid-template-columns:repeat(var(--n,3),1fr); }
  .jh-wide .hub-row { border-top:0; border-left:1px solid var(--border-light); align-items:flex-start; padding:20px 22px; }
  .jh-wide .hub-list.tint .hub-row { border-left-color:rgba(107,45,60,.1); }
  .jh-wide .hub-row:first-child { border-left:0; }
  .jh-wide .hub-row-arrow { display:none; }
  .jh-wide .hub-list.one .hub-row { align-items:center; padding:16px 22px; }
  .jh-wide .hub-list.one .hub-row-arrow { display:block; margin-left:auto; }
  .jh-wide .road { max-width:820px; }
  .jh-wide .hub-card.link-card { grid-column:1/-1; }
  .sheet { align-items:center; }
  .sheet-panel { border-radius:22px; }
}