/* Journeyfolio app UI — mockup components shared by /concept/ and the homepage.
   A brand is ONLY the --b-* tokens on .t-<brand>; nothing else may change per agency. */
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-latin-wght-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:300 800;font-display:swap}

:root{
 --t1:12px;--t2:14px;--t3:16px;--t4:20px;--t5:25px;--t6:31px;--t7:39px;--t8:49px;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
 --r1:12px;--r2:20px;--r3:28px;
 --f-display:Fraunces,Georgia,serif;--f-ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* ---- brand themes (white-label = these blocks only) ---- */
.t-saltmarsh{--b-ink:#10302f;--b-accent:#0e6b62;--b-accent-2:#e9a23b;--b-on-accent:#fff;--b-paper:#f6f1e7;--b-card:#fffdf8;--b-line:#e7dfd0;--b-muted:#4c5856;--b-soft:#e3efe9;--b-warm:#fbefd9;--b-display:var(--f-display);--b-logo:"Saltmarsh";--b-r:var(--r2)}
.t-edelweiss{--b-ink:#1d1b2b;--b-accent:#a3263a;--b-accent-2:#2f6b4f;--b-on-accent:#fff;--b-paper:#f3f2ef;--b-card:#ffffff;--b-line:#e2e0da;--b-muted:#55535d;--b-soft:#f3e3e5;--b-warm:#e6efe9;--b-display:var(--f-ui);--b-r:var(--r1)}
.t-dark{--b-ink:#eef1ec;--b-accent:#5cc2b2;--b-accent-2:#f0b45a;--b-on-accent:#0b1f1d;--b-paper:#0d1716;--b-card:#16231f;--b-line:#253531;--b-muted:#9fb0aa;--b-soft:#173a35;--b-warm:#33291a}

/* ---- device ---- */
.device{width:390px;height:844px;flex:none;border-radius:56px;padding:12px;background:#121414;box-shadow:0 0 0 2px #2b2f2f,0 40px 80px -20px rgba(16,30,28,.45),0 18px 36px -18px rgba(16,30,28,.35);position:relative}
.device::after{content:"";position:absolute;top:24px;left:50%;width:120px;height:34px;margin-left:-60px;border-radius:20px;background:#000;z-index:5}
.screen{width:100%;height:100%;border-radius:44px;overflow:hidden;background:var(--b-paper);color:var(--b-ink);font:400 var(--t3)/1.45 var(--f-ui);position:relative;display:flex;flex-direction:column}
.status{height:54px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:var(--s2) var(--s8) 0;font:600 var(--t2) var(--f-ui);position:relative;z-index:4}
.status.on-photo{color:#fff;position:absolute;inset:0 0 auto 0}
.scroll{flex:1;overflow:hidden;position:relative}
.pad{padding:0 var(--s5)}

/* ---- tab bar ---- */
.tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);padding:var(--s2) var(--s2) 28px;background:color-mix(in srgb,var(--b-card) 92%,transparent);border-top:1px solid var(--b-line);backdrop-filter:blur(12px)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 var(--t1) var(--f-ui);color:var(--b-muted)}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--b-accent)}
.tab .dot{position:relative;display:block;height:24px}
.tab .dot::after{content:"";position:absolute;top:0;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--b-accent-2);box-shadow:0 0 0 2px var(--b-card)}

/* ---- type ---- */
.eyebrow{font:600 var(--t1)/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--b-muted)}
.h-xl{font:500 var(--t6)/1.1 var(--b-display,var(--f-display));letter-spacing:-.01em;margin:0}
.h-l{font:500 var(--t5)/1.15 var(--b-display,var(--f-display));letter-spacing:-.01em;margin:0}
.h-m{font:600 var(--t4)/1.2 var(--b-display,var(--f-display));margin:0}
.muted{color:var(--b-muted)}
.small{font-size:var(--t2)}
.tiny{font-size:var(--t1)}
.num{font-variant-numeric:tabular-nums}

/* ---- photo hero ---- */
.hero-photo{position:relative;height:300px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s5) var(--s5) 72px}
.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 28%,rgba(8,20,19,.15) 45%,rgba(8,20,19,.82) 100%)}
.hero-photo>*{position:relative}
.hero-photo .eyebrow{color:rgba(255,255,255,.85)}
.brandmark{display:inline-flex;align-items:center;gap:var(--s2);font:600 var(--t2) var(--f-ui);letter-spacing:.02em}
.brandmark i{width:24px;height:24px;border-radius:50%;background:var(--b-accent);display:grid;place-items:center;font:italic 600 var(--t2) var(--f-display);color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s3);border-radius:999px;font:600 var(--t1) var(--f-ui);background:var(--b-soft);color:var(--b-accent);white-space:nowrap}
.chip.glass{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(8px)}
.chip.warm{background:var(--b-warm);color:color-mix(in srgb,var(--b-accent-2) 55%,var(--b-ink))}
.chip.line{background:transparent;border:1px solid var(--b-line);color:var(--b-muted)}
.chip.solid{background:var(--b-accent);color:var(--b-on-accent)}

/* ---- cards ---- */
.card{background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r,var(--r2));padding:var(--s4)}
.card.lift{box-shadow:0 12px 32px -16px rgba(16,40,36,.35);border-color:transparent}
.next{margin-top:-56px;position:relative;z-index:2}
.next .when{display:flex;align-items:baseline;gap:var(--s2)}
.next .big{font:500 var(--t7)/1 var(--b-display,var(--f-display));color:var(--b-accent);letter-spacing:-.02em}
.meta{display:flex;gap:var(--s4);margin:var(--s3) 0;font-size:var(--t2);color:var(--b-muted)}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta svg,.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s2);height:48px;border-radius:999px;background:var(--b-accent);color:var(--b-on-accent);font:600 var(--t3) var(--f-ui);border:0;width:100%}
.btn.ghost{background:var(--b-soft);color:var(--b-accent)}
.btn.sm{height:36px;font-size:var(--t2);width:auto;padding:0 var(--s4)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}

/* notice */
.notice{display:flex;gap:var(--s3);align-items:flex-start;background:var(--b-warm);border-radius:var(--r1);padding:var(--s3) var(--s4);font-size:var(--t2)}
.notice .av{width:32px;height:32px;border-radius:50%;flex:none;background:var(--b-accent) center/cover}

/* timeline */
.tl{position:relative;margin:0;padding:0;list-style:none}
.tl li{display:grid;grid-template-columns:52px 16px 1fr;gap:var(--s3);padding-bottom:var(--s4);position:relative}
.tl li::before{content:"";position:absolute;left:71px;top:18px;bottom:-2px;width:2px;background:var(--b-line)}
.tl li:last-child::before{display:none}
.tl .t{font:600 var(--t2)/1.6 var(--f-ui);color:var(--b-muted);text-align:right;font-variant-numeric:tabular-nums}
.tl .d{width:12px;height:12px;border-radius:50%;margin-top:6px;border:2px solid var(--b-accent);background:var(--b-paper);position:relative;z-index:1}
.tl .past .d,.tl li.past .d{background:var(--b-line);border-color:var(--b-line)}
.tl li.past .what{opacity:.5}
.tl li.now .d{background:var(--b-accent);box-shadow:0 0 0 4px var(--b-soft)}
.tl .what b{display:block;font-weight:600}
.tl .what .small{color:var(--b-muted)}
.tag{display:inline-block;font:600 var(--t1)/1 var(--f-ui);padding:4px 8px;border-radius:999px;margin-left:4px;vertical-align:1px;white-space:nowrap}
.tag.booked{background:var(--b-soft);color:var(--b-accent)}
.tag.sugg{background:var(--b-warm);color:color-mix(in srgb,var(--b-accent-2) 55%,var(--b-ink))}
.tag.open{border:1px dashed var(--b-line);color:var(--b-muted)}

/* day chips */
.days{display:flex;gap:var(--s2);overflow:hidden;padding:var(--s2) var(--s5) var(--s4)}
.day{flex:none;width:52px;padding:var(--s2) 0;border-radius:var(--r1);text-align:center;background:var(--b-card);border:1px solid var(--b-line)}
.day small{display:block;font:600 var(--t1) var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--b-muted)}
.day b{font:500 var(--t4) var(--b-display,var(--f-display))}
.day.on{background:var(--b-ink);border-color:var(--b-ink);color:var(--b-paper)}
.day.on small{color:inherit;opacity:.7}

/* map */
.map{height:168px;border-radius:var(--r2);overflow:hidden;position:relative;background:var(--b-soft)}
.map svg{width:100%;height:100%;display:block}

/* wallet */
.pass{border-radius:var(--r2);overflow:hidden;background:var(--b-ink);color:var(--b-paper);position:relative}
.pass .top{padding:var(--s4) var(--s5);display:flex;justify-content:space-between;align-items:center}
.pass .route{display:grid;grid-template-columns:auto 1fr auto;align-items:end;padding:0 var(--s5) var(--s4);gap:var(--s3)}
.pass .route .code{font:500 var(--t7)/1 var(--b-display,var(--f-display));letter-spacing:-.02em}
.pass .route .r{text-align:right}
.pass .route .mid{margin-bottom:var(--s6);opacity:.75;text-align:center;font-size:var(--t1);white-space:nowrap;border-bottom:1px dashed rgba(255,255,255,.4);padding-bottom:var(--s1)}
.pass .route .k{white-space:normal}
.pass .cut{height:24px;position:relative;border-top:2px dashed rgba(255,255,255,.18);margin:0 var(--s4)}
.pass .cut::before,.pass .cut::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--b-paper)}
.pass .cut::before{left:-28px}.pass .cut::after{right:-28px}
.pass .bottom{display:grid;grid-template-columns:auto auto 1fr 88px;gap:var(--s3);padding:0 var(--s5) var(--s5);align-items:end}
.pass .k{font:600 var(--t1) var(--f-ui);letter-spacing:.08em;text-transform:uppercase;opacity:.7;display:block;white-space:nowrap}
.pass .v{font:600 var(--t3) var(--f-ui);white-space:nowrap}
.qr{width:88px;height:88px;background:#fff;border-radius:8px;padding:6px}
.qr svg{width:100%;height:100%;display:block}
.wrow{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--b-line)}
.wrow:first-child{border-top:0}
.wico{width:40px;height:40px;border-radius:var(--r1);display:grid;place-items:center;background:var(--b-soft);color:var(--b-accent);flex:none}
.wico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrow .grow{flex:1;min-width:0}
.wrow b{display:block;font-weight:600;font-size:var(--t3)}
.how{background:var(--b-soft);border-radius:var(--r1);padding:var(--s3);font-size:var(--t2);margin-top:var(--s2)}

/* chat */
.chat{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s5)}
.scroll>.chat{position:absolute;left:0;right:0;bottom:0}
.msg{max-width:82%;padding:var(--s3) var(--s4);border-radius:20px;font-size:var(--t3);line-height:1.4}
.msg.me{align-self:flex-end;background:var(--b-accent);color:var(--b-on-accent);border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;background:var(--b-card);border:1px solid var(--b-line);border-bottom-left-radius:6px}
.who{display:flex;align-items:center;gap:var(--s2);font:600 var(--t1) var(--f-ui);color:var(--b-muted);margin-bottom:-4px}
.who i{width:20px;height:20px;border-radius:50%;background:var(--b-accent) center/cover;display:inline-block}
.place{display:grid;grid-template-columns:64px 1fr;gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--b-line);align-items:center}
.place .ph{width:64px;height:64px;border-radius:var(--r1);background:center/cover}
.pending{align-self:flex-start;display:flex;gap:var(--s2);align-items:center;font:600 var(--t1) var(--f-ui);color:color-mix(in srgb,var(--b-accent-2) 55%,var(--b-ink));background:var(--b-warm);padding:var(--s2) var(--s3);border-radius:999px}
.compose{flex:none;margin:0 var(--s4) var(--s3);display:flex;align-items:center;gap:var(--s2);height:52px;padding:0 var(--s2) 0 var(--s4);border-radius:999px;background:var(--b-card);border:1px solid var(--b-line);color:var(--b-muted);font-size:var(--t3)}
.compose .send{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--b-accent);display:grid;place-items:center}
.compose .send svg{width:18px;height:18px;stroke:var(--b-on-accent);fill:none;stroke-width:2}
.appbar{flex:none;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s5) var(--s3);border-bottom:1px solid var(--b-line)}
.appbar .av{width:40px;height:40px;border-radius:50%;background:var(--b-accent) center/cover;position:relative}
.appbar .av::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:#3cc479;box-shadow:0 0 0 2px var(--b-paper)}

/* guide */
.gcard{border-radius:var(--r2);overflow:hidden;background:var(--b-card);border:1px solid var(--b-line)}
.gcard .ph{height:120px;background:center/cover}
.gcard .body{padding:var(--s3) var(--s4)}
.hscroll{display:flex;gap:var(--s3);overflow:hidden;padding:0 var(--s5)}
.hscroll .gcard{flex:none;width:200px}
.segs{display:flex;gap:var(--s2);padding:0 var(--s5)}

/* advisor */
.inbox-card{background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--r2);padding:var(--s4)}
.diff{border-radius:var(--r1);overflow:hidden;font-size:var(--t2);margin:var(--s3) 0;border:1px solid var(--b-line)}
.diff div{padding:var(--s2) var(--s3);display:flex;gap:var(--s2)}
.diff .del{background:color-mix(in srgb,#c0392b 9%,var(--b-card));text-decoration:line-through;color:var(--b-muted)}
.diff .add{background:var(--b-soft)}
.src{font-size:var(--t1);color:var(--b-muted);display:flex;gap:var(--s2);flex-wrap:wrap}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.stat div{background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--r1);padding:var(--s3)}
.stat b{display:block;font:500 var(--t5)/1.1 var(--b-display,var(--f-display));color:var(--b-accent)}

.stack{display:flex;flex-direction:column;gap:var(--s4)}
.sp2{height:var(--s2)}.sp4{height:var(--s4)}.sp6{height:var(--s6)}
.between{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}

/* v2 — moves from reference pass (design/ref-c-*.png): photo of the actual next stop, paper-map
   texture, ticket with real notches and a foil rule, serif card titles, depth on cards. */
.screen{background:linear-gradient(180deg,var(--b-paper),color-mix(in srgb,var(--b-paper) 92%,var(--b-accent-2)))}
.card.lift{background:linear-gradient(180deg,var(--b-card),color-mix(in srgb,var(--b-card) 94%,var(--b-accent-2)));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 20px 40px -20px rgba(16,40,36,.45)}
.h-page{color:var(--b-accent)}
.day{border-radius:999px;padding:var(--s3) 0;background:transparent;border:1.5px solid color-mix(in srgb,var(--b-accent) 30%,var(--b-line))}
.day.on{background:var(--b-accent);border-color:var(--b-accent);color:var(--b-on-accent)}
.map{box-shadow:0 0 0 1px var(--b-line) inset}
.pass{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--b-accent) 55%,var(--b-ink)) 0%,var(--b-ink) 60%);box-shadow:0 24px 40px -24px rgba(8,30,28,.6)}
.pass::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--b-accent-2),transparent)}
.wrow b,.inbox-card .h-m{font-family:var(--b-display,var(--f-display));font-weight:600;font-size:var(--t3);letter-spacing:0}
.wico{background:linear-gradient(160deg,var(--b-soft),color-mix(in srgb,var(--b-soft) 70%,var(--b-card)))}
.tl li.now .d{box-shadow:0 0 0 4px var(--b-soft),0 0 0 8px color-mix(in srgb,var(--b-soft) 50%,transparent)}
.btn.gold{background:linear-gradient(180deg,color-mix(in srgb,var(--b-accent-2) 80%,#fff),var(--b-accent-2));color:var(--b-ink)}
.gcard{box-shadow:0 16px 32px -20px rgba(16,40,36,.45)}
.ini{display:grid!important;place-items:center;background:var(--b-accent)!important;color:var(--b-on-accent);font:600 var(--t1)/1 var(--f-ui);font-style:normal}
.who i.ini{font-size:var(--t1);width:20px;height:20px}
.scroll:has(>.chat){-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 48px);mask-image:linear-gradient(180deg,transparent 0,#000 48px)}
/* v3 — Chat with uploads */
.msg.photo{padding:var(--s1) var(--s1) var(--s3);overflow:hidden}
.msg .att{display:block;height:120px;border-radius:16px 16px 4px 16px;background:center/cover;margin-bottom:var(--s3)}
.msg.photo{padding-left:var(--s1);padding-right:var(--s1)}
.msg.photo>:not(.att){padding:0 var(--s3)}
.msg.file{display:flex;gap:var(--s3);align-items:center}
.msg.file .fico{width:40px;height:40px;border-radius:var(--r1);background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.msg.file b{display:block}
.compose .att-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--b-accent);background:var(--b-soft);flex:none}
.compose{padding-left:var(--s2)}