/* Driftr v45: onboarding, photo control, travel profile, Traveling with you, Plan with my AI.
   Owner: FE-ONBOARD+AI. Every class here starts with ob- (plan 3.6); never restyle another prefix or a d- class.
   Tokens only (theme.css); hex only where plan 3.6 allows it. prefers-reduced-motion: opacity only, 120 ms.
   Linked in index.html after theme.css. */

/* [hidden] wins over the flex and grid displays below, inside these screens only */
.ob-body [hidden],.ob-sheetbody [hidden],.ob-aiplan [hidden],.ob-aientry-wrap[hidden],.ob-aientry-wrap [hidden]{display:none!important;}

/* ---------- onboarding frame: the road on top, the question, the pinned primary ---------- */
.ob-top{gap:14px;}
.ob-prog{position:relative;flex:1;min-width:0;height:12px;border-radius:6px;background:var(--well);box-shadow:var(--in-sm);}
.ob-prog-line{position:absolute;left:10px;right:10px;top:5px;border-top:2px dashed var(--road);}
.ob-prog-stops{position:absolute;top:50%;left:0;right:0;height:0;display:flex;align-items:center;justify-content:space-between;}
.ob-pp{display:block;width:12px;height:12px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 2px var(--ink-2),0 0 0 3px var(--ground);}
.ob-pp-done{background:var(--sage);box-shadow:0 0 0 3px var(--ground);}
.ob-pp-now{width:20px;height:20px;margin:0 -4px;background:var(--brass);box-shadow:0 0 0 4px var(--ground);}
.ob-pp-now:first-child{margin-left:0;}
.ob-pp-now:last-child{margin-right:0;}
.ob-prog-txt{white-space:nowrap;flex:none;}

.ob-body{padding:12px 0 8px;}
.ob-head{margin:12px 0 24px;}
.ob-head>*+*{margin-top:6px;}
.ob-q{margin-top:4px;}
.ob-q:focus{outline:none;}
.ob-q:focus-visible{outline:2px solid var(--brass-ink);outline-offset:3px;}
.ob-dock{display:flex;flex-direction:column;align-items:center;gap:4px;padding-bottom:env(safe-area-inset-bottom);}
.ob-quiet{color:var(--ink-2);}
.ob-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px 0;text-align:center;}

/* the last first-run screen: Put Driftr on your phone (the app icon, the steps, Later, the arrow) */
.ob-apptile{display:block;width:88px;height:88px;margin:16px auto 4px;border-radius:22px;overflow:hidden;background:var(--tile);box-shadow:var(--e2);}
.ob-apptile img{display:block;width:100%;height:100%;object-fit:cover;}
.ob-inst{display:flex;flex-direction:column;}
.ob-inst-go{min-height:56px;font-size:1.0625rem;}

/* welcome */
.ob-wordmark{display:flex;align-items:center;justify-content:center;width:264px;max-width:100%;height:166px;margin:16px auto 28px;padding:0;overflow:hidden;border-radius:var(--r-lg);background:var(--tile);box-shadow:var(--e1);}
.ob-wordmark img{height:162px;width:auto;max-width:none;flex:none;display:block;transform:translateY(-3px);}
.ob-legs{margin:24px 0 0;}
.ob-leg{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 0;}
.ob-leg-main{display:flex;flex-direction:column;min-width:0;}
.ob-crew{display:flex;align-items:center;gap:12px;margin-top:20px;}
.ob-crew p{margin:0;}

/* questions */
.ob-form{display:flex;flex-direction:column;gap:22px;}
.ob-qblock{display:flex;flex-direction:column;gap:8px;}
.ob-qlabel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}
.ob-qright{font-weight:400;}
.ob-qblock .d-help{margin:0;}
.ob-chips{display:flex;flex-wrap:wrap;gap:12px 8px;padding:4px 0;}
.ob-chips-stack{flex-direction:column;align-items:flex-start;}
.ob-chips .d-chip{white-space:normal;text-align:left;}
.ob-chip-skip{color:var(--ink-2);text-decoration:line-through;}
.ob-seg{width:100%;}
.ob-seg button{line-height:1.2;}
.ob-stack{display:flex;flex-direction:column;gap:10px;}
.ob-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ob-other{margin-top:10px;}
.ob-subrows{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.ob-subrow{padding:8px 8px 12px 14px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e1);}
.ob-subrow-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-2);}
.ob-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ob-pick{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:72px;padding:14px;border:0;border-radius:var(--r-md);background:var(--ground);box-shadow:var(--e1);color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow 120ms var(--ease);}
.ob-pick[aria-pressed="true"]{background:var(--well);box-shadow:var(--in);}
.ob-pick-l{font:600 var(--fs-body-sm)/1.3 var(--font);}
.ob-pick-t{font:500 var(--fs-micro)/1.35 var(--font);color:var(--ink-2);}
.ob-pick-big{min-height:96px;align-items:center;}
.ob-pick-big .ob-pick-l{font-size:var(--fs-head);}
.ob-more-link{margin-top:8px;gap:4px;}
.ob-slider{display:flex;flex-direction:column;gap:2px;}
.ob-slider-ends{display:flex;justify-content:space-between;color:var(--ink-2);}
.ob-range{width:100%;height:44px;margin:0;accent-color:var(--brass);background:transparent;}
.ob-city{position:relative;}
.ob-typeahead{margin-top:8px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e2);overflow:hidden;}
.ob-tarow{display:block;width:100%;min-height:var(--tap);padding:10px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:400 var(--fs-body-sm)/1.4 var(--font);text-align:left;cursor:pointer;}
.ob-tarow:last-child{border-bottom:0;}
.ob-tarow:active{background:var(--well);}
.ob-loc{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;}
.ob-loc:empty{display:none;}
.ob-change{flex:none;}
.ob-locsel{display:flex;flex-direction:column;gap:16px;margin-top:12px;}
.ob-locsel:empty{display:none;}
.ob-select,.ob-time{appearance:none;-webkit-appearance:none;background-image:var(--select-caret);background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
.ob-time{position:relative;}
.ob-year{max-width:180px;}

/* the "Traveling with you" slab, and the AI entry slab */
.ob-slab{margin-top:28px;min-height:68px;text-align:left;}
.ob-slab-main{display:flex;align-items:center;gap:14px;min-width:0;}
.ob-slab-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.ob-slab-txt>span:last-child{overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.ob-slab .d-av-stack{min-height:0;flex:none;}

/* ---------- the photo control ---------- */
.ob-photo{position:relative;flex:none;display:inline-flex;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink);}
.ob-photo-face{width:100%;height:100%;}
.ob-photo-lg{width:112px;height:112px;}
.ob-photo-lg .ob-photo-face{font-size:2.25rem;box-shadow:var(--e2),0 0 0 3px var(--ground);}
.ob-photo-md{width:64px;height:64px;}
.ob-photo-md .ob-photo-face{font-size:1.25rem;box-shadow:var(--e1),0 0 0 2px var(--ground);}
.ob-photo-sm{width:44px;height:44px;}
.ob-photo-sm .ob-photo-face{font-size:.8125rem;}
.ob-photo-empty{width:40%;height:40%;color:var(--on-av);}
.ob-photo-badge{position:absolute;right:-2px;bottom:-2px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--ground);box-shadow:var(--e1);color:var(--ink);}
.ob-photo-md .ob-photo-badge{width:26px;height:26px;right:-4px;bottom:-4px;}
.ob-photo-md .ob-photo-badge .d-ic{width:15px;height:15px;}
.ob-photo-sm .ob-photo-badge{width:20px;height:20px;right:-4px;bottom:-4px;}
.ob-photo-sm .ob-photo-badge .d-ic{width:12px;height:12px;}
.ob-photo.is-busy{opacity:.6;pointer-events:none;}
.ob-photo-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px;}
.ob-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;}
.ob-sheetrows{display:flex;flex-direction:column;padding-bottom:12px;}
.ob-sheetrow{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:8px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:500 var(--fs-body)/1.35 var(--font);text-align:left;cursor:pointer;}
.ob-sheetrow:last-of-type{border-bottom:0;}
.ob-sheetrow:active{opacity:.7;}
.ob-sheetrow-danger{color:var(--alert-ink);}

/* ---------- Traveling with you ---------- */
.ob-cmplist{display:flex;flex-direction:column;}
.ob-cmprow{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;}
.ob-cmprow:active{opacity:.7;}
.ob-cmprow.is-leaving{opacity:.4;}
.ob-cmprow-txt{display:flex;flex-direction:column;min-width:0;}
.ob-cmprow-txt>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ob-cmprow-name{font:500 var(--fs-body)/1.35 var(--font);}
.ob-add{margin-top:16px;}
.ob-cmpform{display:flex;flex-direction:column;gap:20px;}
.ob-cmphead{display:flex;align-items:flex-end;gap:16px;}
.ob-cmpname{flex:1;min-width:0;}
.ob-cmp-priv{margin:0;}
.ob-more{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:12px 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);font:600 var(--fs-body-sm)/1.3 var(--font);cursor:pointer;}
.ob-more .d-ic{transition:transform 160ms var(--ease);}
.ob-more[aria-expanded="true"] .d-ic{transform:rotate(90deg);}
.ob-remove{margin-top:24px;}

/* trip vibe */
.ob-togrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;font:500 var(--fs-body-sm)/1.3 var(--font);cursor:pointer;}
.ob-togrow-txt{display:flex;flex-direction:column;min-width:0;}
.ob-vibecrew{display:flex;flex-wrap:wrap;gap:10px 14px;}
.ob-vibemember{display:inline-flex;align-items:center;gap:6px;}
.ob-addlink{align-self:flex-start;gap:6px;}
.ob-backlink{gap:6px;margin-bottom:8px;padding-left:0;}
.ob-sheetbody{display:flex;flex-direction:column;}
.ob-sheetfoot{display:flex;flex-direction:column;align-items:center;gap:4px;}

/* style card, Relationships, empty road */
.ob-stylecard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;margin:12px 0;padding:16px;border:0;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e1);color:var(--ink);text-align:left;font:inherit;}
button.ob-stylecard{cursor:pointer;}
button.ob-stylecard:active{box-shadow:var(--in);}
.ob-stylechips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.ob-tag{padding:3px 10px;border-radius:var(--r-pill);background:var(--well);color:var(--ink-2);font:500 var(--fs-micro)/1.35 var(--font);}
.ob-relrow{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);}
.ob-relwho{display:flex;align-items:center;gap:10px;font:500 var(--fs-body)/1.35 var(--font);}
.ob-empty{margin:24px 0;min-height:160px;}
.ob-empty .d-on-road{padding-top:2px;}
.ob-empty .d-pebble{top:12px;margin-top:0;}
.ob-empty p{margin:4px 0 0;}
.ob-empty .d-btn{margin-top:16px;}

/* Home nudge (one card), profile menu line */
.ob-nudge{display:flex;align-items:center;gap:12px;min-height:64px;margin:12px 0 4px;padding:10px 4px 10px 14px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e1);}
.ob-nudge-face{flex:none;}
.ob-nudge-txt{flex:1;min-width:0;}
.ob-nudge-txt p{margin:0;}
.ob-nudge-t{font:600 var(--fs-body-sm)/1.35 var(--font);color:var(--ink);}
.ob-nudge-tap{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ob-nudge-tap:active{box-shadow:var(--in);}
.ob-nudge-tap:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.ob-nudge-x{flex:none;color:var(--ink-2);}
.ob-menuline{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:var(--tap);padding:10px 0;border:0;background:transparent;color:var(--ink);font:600 var(--fs-body-sm)/1.3 var(--font);text-align:left;cursor:pointer;}
.ob-menunote{margin:8px 0 0;}

/* ---------- Plan with my AI ---------- */
.ob-aiplan .ob-head{margin:12px 0 18px;}
.ob-airoad{padding-bottom:8px;}
.ob-slot+.ob-slot{margin-top:16px;}
.ob-step{padding:2px 0;}
.ob-step>.d-pebble{top:6px;margin-top:0;}
.ob-step>*+*:not(.d-pebble){margin-top:8px;}
.ob-step-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;}
.ob-step-title{margin:0;font:500 var(--fs-body)/1.35 var(--font);}
.ob-step-ahead .ob-step-title{color:var(--ink-2);}
.ob-step-ahead p,.ob-step p{margin:0;}
.ob-stepcard{padding:18px 18px 14px;}
.ob-stepcard>*+*:not(.d-pebble){margin-top:10px;}
.ob-stepcard p,.ob-stepcard h2{margin-bottom:0;}
.ob-stepcard>.ob-readout+h2{margin-top:4px;}
.ob-readout{margin:0;font:600 var(--fs-body-sm)/1.4 var(--font);color:var(--brass-ink);}
.ob-go{gap:8px;}
.ob-stepcard>.ob-go{margin-top:14px;}
.ob-appchips{padding:4px 0;}
.ob-appchips a.d-chip{text-decoration:none;}
.ob-quietrow{display:flex;justify-content:center;gap:20px;}
.ob-stepcard>.ob-quietrow{margin-top:4px;}
.ob-pastefield{padding:10px 16px;min-height:0;}
.ob-pastefield:focus-within{outline:2px solid var(--brass-ink);outline-offset:3px;}
.ob-paste{display:block;width:100%;min-height:44px;height:44px;margin:0;padding:0;border:0;background:transparent;resize:none;overflow:hidden;color:var(--ink);font:400 var(--fs-body-sm)/22px var(--font);}
.ob-paste::placeholder{color:var(--ink-2);opacity:1;}
.ob-paste:focus{outline:none;}
.ob-step .ob-paste{color:var(--ink-2);}
.ob-stepcard .ob-paste{height:88px;}
.ob-startover{align-self:flex-start;}
.ob-step .ob-startover,.ob-stepcard .ob-startover{display:flex;margin:4px auto 0;}
.ob-phead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;}
.ob-seeall{gap:4px;padding:10px 0;font-size:var(--fs-label);}
.ob-merged{display:inline-flex;align-items:center;gap:6px;}
.ob-prow{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:52px;}
.ob-stepcard>.ob-prow{margin-top:0;}
.ob-prow-main{display:flex;flex-direction:column;min-width:0;}
.ob-prow-over{display:inline-flex;align-items:center;gap:4px;}
.ob-prow-title{font:500 var(--fs-body)/1.35 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ob-prow.is-off .ob-prow-title{color:var(--ink-2);}
.ob-tick{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--sage-ink);cursor:pointer;}
.ob-tick::before{content:"";position:absolute;left:8px;top:8px;width:28px;height:28px;border-radius:9px;background:var(--ground);box-shadow:var(--e1);transition:box-shadow 120ms var(--ease);}
.ob-tick .d-ic{position:relative;opacity:0;}
.ob-tick[aria-checked="true"]::before{background:var(--well);box-shadow:var(--in);}
.ob-tick[aria-checked="true"] .d-ic{opacity:1;}
.ob-tickspace{width:44px;}
.ob-extra{margin:0;}
.ob-notes{gap:4px;padding:10px 0;font-size:var(--fs-label);}
.ob-notes .d-ic{transition:transform 160ms var(--ease);}
.ob-notes[aria-expanded="true"] .d-ic{transform:rotate(90deg);}
.ob-notelist{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:18px;}
.ob-errlist{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 14px 10px 30px;border-radius:var(--r-sm);background:var(--alert-bg);color:var(--alert-ink);}
.ob-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* how-to sheet: four steps on a short road, "Got it" pinned */
.ob-howto{margin:4px 0 0;list-style:none;}
.ob-howstep{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:14px;min-height:64px;padding:6px 0;}
.ob-howmain{display:flex;flex-direction:column;min-width:0;}
.ob-howtitle{font:500 var(--fs-body)/1.35 var(--font);}
.ob-howkey{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink);}
.ob-howfoot{margin:0 0 10px;text-align:center;}
.ob-howlink{align-self:flex-start;font-size:var(--fs-body-sm);}
.ob-stepcard>.ob-howlink{display:flex;margin:4px auto 0;}

/* entry points */
.ob-aientry-wrap{margin:12px 0;}
.ob-aientry-wrap .d-help{margin:8px 0 0;}
.ob-aientry{margin-top:0;}
.ob-aiback{display:flex;align-items:center;gap:8px;min-height:56px;margin:12px 0;padding:6px 4px 6px 16px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e1);}
.ob-aiback-txt{display:flex;flex-direction:column;flex:1;min-width:0;font:500 var(--fs-body-sm)/1.35 var(--font);}
.ob-aiback-go{flex:none;padding:8px 14px;font-size:.875rem;}
.ob-geo{margin:4px 0;}

/* RTL: chevrons, the back arrow and the road side mirror; logos and photos never do */
[dir="rtl"] .ob-top .d-btn-icon .d-ic,[dir="rtl"] .ob-slab>.d-ic:last-child,[dir="rtl"] .ob-cmprow>.d-ic,[dir="rtl"] .ob-seeall .d-ic,[dir="rtl"] .ob-more-link .d-ic,[dir="rtl"] .ob-backlink .d-ic{transform:scaleX(-1);}
[dir="rtl"] .ob-more[aria-expanded="true"] .d-ic,[dir="rtl"] .ob-notes[aria-expanded="true"] .d-ic{transform:rotate(-90deg);}
[dir="rtl"] .ob-photo-badge{right:auto;left:-2px;}
[dir="rtl"] .ob-tick::before{left:auto;right:8px;}

@media (prefers-reduced-motion:reduce){
  .ob-more .d-ic,.ob-notes .d-ic,.ob-tick::before,.ob-pick{transition:opacity 120ms linear;}
}