/* =====================================================================================
   Big moves: the new-trip steps (js/newtrip.js). Built from the boards Big-Where, Big-Travel and Big-Stay
   (handoff/design/canvas/pub/project). Theme tokens only, so charcoal comes free. Every class is "nt-";
   the shared d-road, d-on-road, d-pebble, d-row, d-chip, d-btn, d-status and d-t-* are used as they are.
   ===================================================================================== */

/* ---------- the sheet's head: the trip name, then the steps strip across the full width ---------- */
.nt-flow .d-sheet-head{flex-wrap:wrap;row-gap:2px;}
.nt-head{flex:1;min-width:0;display:flex;align-items:center;min-height:var(--tap);}
.nt-tripname{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nt-steps{position:relative;flex:0 0 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:2px 0 0;}
.nt-steps[hidden]{display:none;}
.nt-groove{position:absolute;left:16.67%;right:16.67%;top:3px;height:10px;border-radius:5px;background:var(--well);box-shadow:var(--in-sm);}
.nt-groove::after{content:"";position:absolute;left:8px;right:8px;top:4px;border-top:2px dashed var(--road);}
.nt-step{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:var(--tap);min-width:0;padding:0 2px;border:0;background:none;color:var(--ink-2);font:500 var(--fs-body-sm)/1.3 var(--font);white-space:nowrap;cursor:pointer;}
.nt-step i{display:block;width:12px;height:12px;margin:2px 0;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 2px var(--ink-2),0 0 0 3px var(--ground);z-index:1;}
.nt-step-done i{background:var(--sage);box-shadow:0 0 0 3px var(--ground);}
.nt-step[aria-current="step"]{color:var(--ink);font-weight:600;cursor:default;}
.nt-step[aria-current="step"] i{width:16px;height:16px;margin:0;background:var(--brass);box-shadow:0 0 0 3px var(--ground);}

/* ---------- body and foot ---------- */
.nt-title{margin:4px 0 0;outline:none;}
.nt-mt16{margin-top:16px;}
.nt-nights{margin:4px 0 0;}
.nt-nights:empty{display:none;}
.nt-err{margin:10px 0 0;}
.nt-err:empty{display:none;}
.nt-road{margin-top:16px;padding-bottom:8px;}
.nt-one .nt-road{margin-top:4px;}
.nt-foot{display:flex;align-items:center;gap:12px;}
.nt-foot .nt-fwd{flex:1;min-height:48px;}
.nt-foot .nt-skip{color:var(--ink-2);}
/* Staying: a quiet Skip beside "Invite the crew" (not ready to invite yet) */
.nt-foot .nt-skip-end{flex:none;min-height:48px;padding-inline:14px;}
.nt-grow{flex:1;min-width:0;}
.nt-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- Where: Leaving from, the places, Add a place ---------- */
.nt-flow .d-row.nt-prow{grid-template-columns:minmax(0,1fr) auto 20px;width:100%;border:0;background:none;color:var(--ink);text-align:start;font:inherit;}
.nt-home-pin{position:absolute;inset-inline-start:-42px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--ground);color:var(--ink-2);box-shadow:0 0 0 3px var(--ground);display:flex;align-items:center;justify-content:center;z-index:1;}
.nt-home-pin .d-ic{width:16px;height:16px;}
.nt-leaving-pick{display:flex;flex-direction:column;gap:6px;padding:8px 0 12px;}
.nt-leaving-pick .nt-home-pin{top:46px;margin-top:0;}
.nt-add{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:8px 0;border:0;background:transparent;color:var(--ink);font:600 1rem/1.25 var(--font);text-align:start;cursor:pointer;}
.nt-add:active{opacity:.7;}
.nt-first{margin-top:16px;}
.nt-remove{margin-top:16px;}

/* ---------- Getting there: every hop is one raised card on the road; the card is the button ---------- */
.nt-hops-road{padding-top:4px;}
.nt-hops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.nt-hops>.d-on-road>.d-pebble{top:18px;margin-top:0;}
.nt-hop{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:start;width:100%;min-height:68px;padding:13px 14px;border:0;border-radius:var(--r-md);background:var(--ground);color:var(--ink);box-shadow:var(--e1);text-align:start;font:inherit;cursor:pointer;transition:box-shadow 120ms var(--ease);}
.nt-hop:active{box-shadow:var(--in);}
.nt-hop>.d-ic{margin-top:1px;color:var(--ink-2);}
.nt-hop-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.nt-hop-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;}
.nt-hop-title{min-width:0;font:600 1rem/1.35 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nt-hop-sub{min-width:0;font:400 var(--fs-label)/1.4 var(--font);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nt-hop-date{flex:none;font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}
/* a long hop wraps to two lines before it cuts ("Fort Lauderdale to Chicago"); the date keeps its own column */
.nt-hop .nt-hop-title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;}
.nt-hop-line .d-status{flex:none;}
.nt-hop-line .d-status .d-ic{width:16px;height:16px;}
/* "Add the confirmation" sits inside the same card, under a hairline (never a second button) */
.nt-confirm{grid-column:1 / -1;display:flex;align-items:center;gap:12px;margin:12px -14px -13px;padding:6px 14px;min-height:46px;border-top:1px solid var(--line);color:var(--ink);font:600 .9375rem/1.3 var(--font);}
.nt-confirm-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:12px;}
.nt-confirm-title,.nt-confirm-sub{white-space:nowrap;}
.nt-confirm-sub{font-weight:400;}
/* an empty hop, opened in place: pressed, the ways sit on it */
.nt-hop-open{position:relative;border-radius:var(--r-md);background:var(--well);box-shadow:var(--in);padding:0 12px 14px;}
.nt-hop-head{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:start;width:100%;min-height:64px;padding:13px 2px 8px;border:0;background:transparent;color:var(--ink);text-align:start;font:inherit;cursor:pointer;}
.nt-hop-head>.d-ic{margin-top:1px;color:var(--ink-2);}
/* the question wraps rather than cut ("How are you getting to San Sebastián?") */
.nt-hop-head .nt-hop-line:first-child{align-items:flex-start;}
.nt-hop-head .nt-hop-title{flex:1;white-space:normal;}
/* a drive re-opened: the answer, not the question */
.nt-hop-head .nt-hop-answer{color:var(--ink);font-weight:500;}
.nt-hop-head .nt-caret{align-self:flex-start;margin-top:2px;}
.nt-hop-open:has(.nt-ways[hidden]){padding-bottom:0;}
.nt-caret{width:18px;height:18px;flex:none;align-self:center;color:var(--ink-2);transition:transform 160ms var(--ease);}
[aria-expanded="true"] .nt-caret{transform:rotate(180deg);}
.nt-ways{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.nt-ways[hidden]{display:none;}
.nt-way{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;min-width:0;padding:8px 2px;border:0;border-radius:var(--r-sm);background:var(--ground);color:var(--ink);box-shadow:var(--e1);font:500 var(--fs-label)/1.2 var(--font);cursor:pointer;transition:box-shadow 120ms var(--ease);}
.nt-way .d-ic{color:var(--ink-2);}
.nt-way:active{box-shadow:var(--in);}
/* the way already picked: pressed in, ringed and inked in brass so it reads in charcoal as well as oat */
.nt-way[aria-pressed="true"]{background:var(--well);box-shadow:var(--in),inset 0 0 0 2px var(--brass-ink);color:var(--ink);font-weight:600;}
.nt-way[aria-pressed="true"] .d-ic{color:var(--brass-ink);}

/* ---------- Staying: a base per place; the raised card is the button ---------- */
.nt-stays{display:flex;flex-direction:column;gap:16px;}
.nt-stay-li{display:flex;flex-direction:column;gap:12px;}
.nt-stay-li>.d-pebble{top:22px;margin-top:0;}
.nt-stay{display:flex;flex-direction:column;gap:2px;width:100%;padding:14px 16px 16px;border:0;border-radius:var(--r-md);background:var(--ground);color:var(--ink);box-shadow:var(--e1);text-align:start;font:inherit;cursor:pointer;transition:box-shadow 120ms var(--ease);}
.nt-stay:active{box-shadow:var(--in);}
.nt-stay-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.nt-stay-top .d-status .d-ic{width:16px;height:16px;}
.nt-stay-name{display:flex;align-items:center;gap:10px;min-width:0;}
.nt-stay-name .d-ic{color:var(--ink-2);}
.nt-stay-name span{min-width:0;font:600 var(--fs-head)/1.33 var(--font);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nt-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.nt-fact{display:flex;flex-direction:column;min-width:0;}
.nt-fact-v{font:500 var(--fs-body-sm)/1.35 var(--font);}
.nt-stay .nt-confirm{margin:12px -16px -16px;padding:6px 16px;}
/* nothing yet: a pressed well; its head collapses it */
.nt-stay-open{border-radius:var(--r-md);background:var(--well);box-shadow:var(--in);padding:4px 14px 16px;}
.nt-stay-open:has(> div[hidden]){padding-bottom:4px;}
.nt-stay-head{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:var(--tap);padding:10px 0 4px;border:0;background:transparent;color:inherit;text-align:start;font:inherit;cursor:pointer;}
.nt-stay-q{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.nt-stay-head .nt-caret{margin-top:2px;align-self:flex-start;}
.nt-kinds{display:flex;flex-wrap:wrap;gap:10px 8px;margin-top:12px;}
.nt-kinds .d-chip{padding:6px 12px;}
.nt-lab{margin:18px 0 0;color:var(--ink-2);}
.nt-drop{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin-top:6px;padding:10px 16px;border:0;border-radius:var(--r-md);background:var(--ground);color:var(--ink);box-shadow:var(--e1);text-align:start;font:inherit;cursor:pointer;transition:box-shadow 120ms var(--ease);}
.nt-drop:active{box-shadow:var(--in);}
.nt-drop>.d-ic{color:var(--ink-2);}
.nt-drop-text{display:flex;flex-direction:column;min-width:0;}
.nt-drop-title{font:500 var(--fs-body)/1.35 var(--font);}

/* ---------- right to left: chevrons and Back point the other way ---------- */
[dir="rtl"] .nt-back .d-ic,[dir="rtl"] .nt-flow .d-row-caret{transform:scaleX(-1);}