/* Phone layout (screens up to 820 px wide)
 * Loaded after styles.css, only on narrow screens; computers never load it.
 * Top to bottom: app bar (the only piece held at the top; it slides away while scrolling down), showcase line, trip title and actions, one row of days
 * (onward travel, tour days, return travel, with the stay between them), then the plan for the picked day: summary, notes, tools, and one card per stop.
 * At the bottom: a tab bar (Plan, Explore, Group, Trip) and the map as a sheet above it. */
@media (max-width: 820px) {
  :root { --tabH: calc(58px + env(safe-area-inset-bottom)); }
  html, body { height: auto; }
  #shell { display: block; height: auto; }
  #left { width: 100% !important; max-width: none; min-width: 0; height: auto; overflow: visible; }
  body:not(.on-landing) #left { padding-bottom: calc(var(--tabH) + 84px); }
  #divider { display: none; }
  #app { display: flex; flex-direction: column; }
  #app > *, #tabsSec, .sec-top, .brandbar { order: 20; min-width: 0; }
  #appHead, .pinned { display: contents; }
  .brandbar { order: 0; } .sec-top { order: 2; } #tabsSec { order: 3; display: block; } .sec-search, .daybar, #stopStrip, #app .sec-review { display: none !important; } #app > .anchor-card { order: 8; } #app > .sec-itin { order: 9; }

  /* ---- app bar: Preferences at the left, My trips and a new trip at the right; slides away while scrolling down ---- */
  .topbar.brandbar { position: sticky; top: 0; z-index: 40; grid-template-columns: auto 1fr auto auto; margin: -12px -12px 0; padding: 5px 10px; min-height: 0; border-radius: 0; transition: transform .2s ease; }
  body.bar-hide .topbar.brandbar { transform: translateY(-100%); }
  .topbar.brandbar > .tb-side:first-child { display: contents; }
  #prefsBtn { grid-column: 1; grid-row: 1; } .tb-brand { grid-column: 2; grid-row: 1; min-width: 0; } #prevBtn { grid-column: 3; grid-row: 1; } .tb-right { grid-column: 4; grid-row: 1; }
  .tb-logo { width: 24px; height: 24px; min-width: 24px; display: block; } .tb-name { font-size: 1rem; }
  .topbar.brandbar .lbl { display: none; } .tb-side .btn { padding: 8px 10px; }

  /* ---- showcase: one line that opens on a tap ---- */

  /* ---- trip name with its dates and the Edit / View switch, then one row of actions with their words ---- */
  .sec-top { margin: 0 -12px !important; padding: 10px 12px 8px !important; border-radius: 0; border-width: 0 0 1px; text-align: left; }

  .sec-top .top.compact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
  .trip-head { display: block; flex: 1 1 0; min-width: 0; }
  .top.compact h1, .top.compact .title-input { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font-size: 1.05rem !important; font-weight: 700; line-height: 1.2; text-align: left; box-shadow: none; }
  .top.compact h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trip-sub { display: block; margin-top: 2px; font-size: .74rem; color: var(--ink-2); }
  .mode-seg { flex: none; }
  .top-acts { display: flex; flex: 1 1 100%; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .top-acts::-webkit-scrollbar { display: none; }
  .top.compact .top-acts .btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; min-height: 38px; padding: 4px 11px; font-size: .78rem; font-weight: 700; line-height: 1; border-radius: 10px; }
  .top.compact .btn svg { width: 16px; height: 16px; } .top.compact .btn .lbl { display: inline; }
  .copies { font-size: .74rem; padding: 0 6px; }

  /* ---- the day row: onward travel, tour days and return travel in one scrolling row, with the stay between days ---- */
  #tabsSec { margin: 0 -12px 8px; padding: 8px 12px 10px; border-radius: 0; border-width: 0 0 1px; background: var(--surface); }
  #tabs.tabs.grouped { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; overflow-x: auto; margin: 0; padding: 2px 0; scrollbar-width: none; }
  #tabs.tabs.grouped::-webkit-scrollbar { display: none; }
  .tab-group { display: flex; flex-direction: row; align-items: center; gap: 6px; flex: none; margin: 0; padding: 0; border: 0; background: none; }
  .tab-head { margin: 0; padding: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
  .tab-head .gl { font-size: 0; } .tab-head .gl::after { content: attr(data-short); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
  .tab-head .gt, .tab-head .gh, .tab-head .gw, .tab-head .hint, .tab-opts { display: none; }
  .tab-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; width: auto; padding: 0; }
  .tab-row.has-adj { padding-right: 0; } .tab-row .adj-seg, .tabs .tab-cal { display: none; }
  .tabs button[data-day] { flex: 0 0 auto; min-width: 72px; min-height: 48px; padding: 4px 10px; border-radius: 14px; font-size: .8rem; line-height: 1.2; text-align: center; }
  .tabs button[data-day] .ti { display: none; } .tabs button[data-day] small { font-size: .74rem; opacity: .85; }
  .tabs .slot, .tabs .tab-row > .slot { flex: 0 0 34px; width: 34px !important; height: 40px !important; border-radius: 10px !important; border-width: 1px; font-size: .9rem; }
  .tabs .tab-del { transform: scale(.85); } .tabwrap { display: inline-flex; align-items: center; gap: 4px; }

  /* ---- the plan for the picked day ---- */
  .sec-itin { margin: 0 -8px; padding: 6px; }
  .itin-h { position: static !important; margin: 0 0 6px; padding: 6px 4px; box-shadow: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0; }
  .itin-h > :not(.itin-note):not(.itin-actions) { display: none; } .itin-h .itin-note { font-size: .78rem; }
  .itin-actions { display: none; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; padding: 4px 0; } .sec-itin.tools-open .itin-actions { display: flex; }
  .itin-actions .btn, .itin-actions .seg .btn { min-height: 34px; padding: 2px 9px; font-size: .74rem; border-radius: 8px; } .itin-actions .seg .btn { border-radius: 0; } .itin-actions .seg .btn:first-child { border-radius: 8px 0 0 8px; } .itin-actions .seg .btn:last-child { border-radius: 0 8px 8px 0; }
  .day-box .ins-toggle { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; margin: 0; background: none; }
  .ins-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; margin: 6px 0; padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
  .ins-toggle[hidden] { display: none; } .ins-toggle[aria-expanded="true"] span:last-child { transform: rotate(180deg); }
  .insights:not(.open) { display: none; }
  .summary { padding: 8px 10px; } .sum-stats { gap: 4px 6px; } .sum-stats .stat { padding: 3px 9px; font-size: .78rem; border-radius: 8px; } .sum-range { font-size: .76rem; } .sum-head { font-size: .8rem; }
  .travel-card { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); } .travel-card h3 { margin: 0; font-size: .9rem; } .travel-card p { margin: 0; font-size: .82rem; color: var(--ink-2); }
  .travel-card .adj-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; } .travel-card .adj-seg .btn { border-radius: 10px !important; min-height: 38px; padding: 4px 12px; font-size: .78rem; }

  /* ---- drive between two places, and lunch ---- */
  #itinerary .leg { display: flex; align-items: center; gap: 6px; margin: 6px 0 !important; padding: 7px 10px !important; line-height: 1.2; border: 1px solid var(--line-soft); border-left: 3px solid #0f766e; border-radius: 10px; background: var(--surface); }
  #itinerary .leg svg { flex: none; margin: 0; }
  .lunch { display: grid !important; grid-template-columns: 1fr auto; align-items: start; gap: 0 8px; padding: 6px 10px; margin: 6px 0 !important; border: 1px solid var(--line-soft); border-left: 3px solid var(--warn); border-radius: 10px; background: var(--surface); }
  .lunch > strong { grid-column: 1; font-size: .85rem; } .lunch > .muted { grid-column: 1; font-size: .74rem; line-height: 1.25; }
  .lunch .lunch-tools { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .lunch .lunch-tools .chip.ask { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); padding: 2px 9px; min-height: 28px; font-size: .74rem; }
  .lunch .lunch-len .btn { min-height: 24px !important; padding: 1px 7px !important; font-size: .74rem; } .lunch > .ins { grid-column: 1 / -1; margin-top: 2px; }

  /* ---- a stop: number, name and tag, then time and visit; a tap unfolds conditions, address, photos, quick actions, like and edit buttons ---- */
  #itinerary .tl { display: grid; grid-template-columns: minmax(0, 1fr) 28px; column-gap: 8px; margin: 6px 0 !important; padding: 10px 12px; cursor: pointer; }
  #itinerary .tl-body, #itinerary .stop-head { display: contents; }
  #itinerary .stop-title { grid-column: 1; grid-row: 1; display: block; position: relative; padding-left: 36px; min-height: 28px; font-size: .95rem; line-height: 1.25; }
  #itinerary .stop-title .num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .82rem; }
  #itinerary .stop-title .n-txt { display: none; } #itinerary .stop-title .tag { display: inline-block; margin-left: 6px; vertical-align: middle; }
  #itinerary .stop-chev { display: block; grid-column: 2; grid-row: 1; justify-self: end; color: var(--ink-3); transition: transform .2s; } #itinerary .tl.pv-open .stop-chev { transform: rotate(180deg); }
  #itinerary .tl-time { grid-column: 1; grid-row: 2; display: block; margin: 2px 0 0; padding: 0 0 0 36px; font-size: .78rem; font-weight: 500; color: var(--ink-3); } #itinerary .tl-time br, #itinerary .tl-time .grip { display: none; } #itinerary .tl-time .muted::before { content: ' – '; } #itinerary .tl-time > :first-child:not(.muted) { color: inherit; }
  #itinerary .tl-time .tl-dur { display: inline; color: #0f766e; font-weight: 700; } #itinerary .tl-time .muted { display: inline; }
  #itinerary .visit-line { display: none; }
  #itinerary .tl-body > .late, #itinerary .tl-body > .small.muted:not(.visit-line) { grid-column: 1 / -1; grid-row: 3; margin: 6px 0 0; }
  #itinerary .tl-body > .ins { grid-column: 1 / -1; grid-row: 4; margin: 8px 0 0; }
  #itinerary .tl-body > .muted.small { grid-column: 1 / -1; grid-row: 5; margin: 6px 0 0; } #itinerary .tl-body > .muted.small:empty { display: none; }
  #itinerary .tl-body > .preview { grid-column: 1 / -1; grid-row: 6; margin: 8px 0 0; }
  #itinerary .stop-quick { grid-column: 1 / -1; grid-row: 7; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
  #itinerary .crowd-bar { grid-column: 1 / -1; grid-row: 8; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 6px 0 0; }
  #itinerary .crowd-bar .seg { display: contents; } #itinerary .crowd-bar .react-count { padding: 4px 8px; }
  #itinerary .stop-actions { grid-column: 1 / -1; grid-row: 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 0; width: auto; }
  #itinerary .stop-actions .seg { display: contents; } #itinerary .stop-actions .lbl, #itinerary .crowd-bar .lbl { display: inline !important; }
  #itinerary .tl-body > .edit-panel, #itinerary .tl-body > .ep { grid-column: 1 / -1; grid-row: 10; margin-top: 8px; }
  #itinerary .stop-quick .act, #itinerary .crowd-bar .btn, #itinerary .stop-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 4px 6px; border-radius: 12px; font-size: .76rem; font-weight: 700; text-align: center; text-decoration: none; }
  #itinerary .stop-quick .act.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
  #itinerary .tl:not(.pv-open) :is(.ins, .tl-body > .muted.small, .preview, .stop-quick, .crowd-bar, .stop-actions) { display: none; }
  #itinerary .tl:not(.pv-open) .stop-title { margin-bottom: 0; }
  #itinerary .tl-body > .stop-head .mark { margin-left: 4px; }

  /* ---- photos and text inside an unfolded stop ---- */
  .pv.pv-has { display: grid; grid-template-columns: 104px 1fr; gap: 4px 10px; align-items: start; }
  .pv-has .pv-photos { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 6px; } .pv-has .pv-photos img { width: 104px; height: auto; max-height: 84px; object-fit: cover; } .pv-has .pv-photos img:nth-child(n+3) { display: none; }
  .pv-has .pv-text { grid-column: 2; margin: 0; display: block; overflow: hidden; }
  .pv-more { grid-column: 2; justify-self: start; border: 0; background: none; color: var(--brand); font: inherit; font-size: .8rem; font-weight: 700; padding: 0; min-height: 0 !important; cursor: pointer; }
  .pv > .muted.small { grid-column: 1 / -1; }

  /* ---- stay, start and end details: a box of their own above the day ---- */
  .anchor-card { margin: 8px -8px !important; padding: 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); box-shadow: none; } .ac-h { margin: 0 0 6px; font-size: .85rem; color: var(--ink-2); }
  #anchorCard #anchorPanel, #anchorCard #anchorPanel > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; box-sizing: border-box; } #anchorCard #anchorPanel > *:last-child { margin-bottom: 0 !important; }

  /* ---- bottom tab bar, map sheet and full-screen panels ---- */
  body:not(.on-landing) #tabBar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; height: var(--tabH); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line-soft); box-shadow: 0 -4px 12px rgba(15, 23, 42, .08); }
  #tabBar button { position: relative; display: grid; place-items: center; align-content: center; border: 0; background: none; min-height: 0; padding: 4px 0; font: inherit; font-size: .74rem; font-weight: 700; color: var(--ink-3); cursor: pointer; }
  #tabBar button[aria-selected="true"] { color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); } #tabBar svg { width: 22px; height: 22px; }
  .tab-bd { position: absolute; top: 4px; left: 54%; min-width: 16px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .74rem; font-style: normal; font-weight: 700; line-height: 16px; text-align: center; }
  body[data-sheet="peek"] { --sheetH: 64px; } body[data-sheet="half"] { --sheetH: min(46vh, 340px); }
  body[data-sheet="full"] { --sheetH: calc(100vh - var(--s1, 0px) - var(--tabH)); } @supports (height: 100dvh) { body[data-sheet="full"] { --sheetH: calc(100dvh - var(--s1, 0px) - var(--tabH)); } }
  body:not(.on-landing) #right { position: fixed; left: 0; right: 0; top: auto; bottom: var(--tabH); height: var(--sheetH, 64px); z-index: 45; display: flex; flex-direction: column; border: 0; border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -6px 20px rgba(15, 23, 42, .18); overflow: hidden; transition: height .25s ease; }
  body:not(.on-landing) #right #map { flex: 1 1 auto; min-height: 0; height: auto; }
  .sheet-grip { color: var(--ink); display: block; flex: none; width: 100%; min-height: 64px; padding: 8px 14px 6px; border: 0; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
  .grip-bar { display: block; width: 38px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--line); }
  .grip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .grip-row b { font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.phone-panel #right { display: none; }
  .attr-overlay { position: fixed !important; inset: 0 0 var(--tabH, 0px) 0 !important; width: auto !important; max-height: none !important; border-radius: 0; z-index: 60; padding-bottom: 24px; }
  .phone-panel-box:not([hidden]) { display: block; position: fixed; inset: 0 0 var(--tabH) 0; z-index: 60; overflow-y: auto; padding: 14px 14px 28px; background: var(--bg); }
  .pp-h { margin: 0 0 8px; font-size: 1.15rem; } .pp-s { margin: 14px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .pp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
  .next-card { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--brand); color: #fff; } .next-card h3 { margin: 0; font-size: 1.25rem; } .next-card .btn { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; }
  #grpReview #review { display: block; margin: 0; }
  /* Explore: the Attractions panel on the plain page colour, with a big title, like the other full-screen panels */
  .attr-overlay, .sec-attr.attr-overlay { background: var(--bg) !important; border: 0 !important; box-shadow: none; padding: 14px 14px 24px; }
  .attr-overlay .sec-h, .attr-overlay .attr-h { margin: 0 0 10px; font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--ink) !important; }
  .attr-overlay .attr-summary { font-size: .8rem; font-weight: 500; color: var(--ink-2); }
  .undo-toast { bottom: calc(var(--tabH) + 10px); }

  /* ---- small buttons keep their size but get a touch area of about 44px ---- */
  .itin-actions .btn, .lunch-tools .btn, .chip.ask { position: relative; }
  .itin-actions .btn::before, .lunch-tools .btn::before, .chip.ask::before { content: ''; position: absolute; inset: -9px -3px; }

  /* ---- the day card: status pill and summary and notes in one box, then the day tools; plain page colour behind it ---- */
  .sec-itin, .sec-itin.state-warn, .sec-itin.state-good { display: flex; flex-direction: column; background: none !important; border: 0 !important; box-shadow: none !important; margin: 0 -4px; padding: 0 4px; }
  .sec-itin > * { order: 5; } .sec-itin > .anchor-card { order: 0; } .day-box { order: 1; } #toolsToggle { order: 2; } .itin-h { order: 3; } #plan { order: 4; } #itinerary { order: 6; } #stayDetail { order: 7; }
  .day-box > .itin-note { display: inline-flex !important; margin: 10px 0 0 12px; font-size: .78rem; font-weight: 700; } .day-box > .itin-note[hidden] { display: none !important; }
  .day-box .summary { padding: 6px 12px 8px; }

  /* ---- the picked travel day is teal, like the dashed travel chips ---- */
  .tabs button.travel-out .ti, .tabs button.travel-back .ti { display: none; }
  .tabs button.travel-out.active, .tabs button.travel-back.active { background: #0f766e !important; border-color: #0f766e !important; border-style: solid; color: #fff; } .tabs button.travel-out.active *, .tabs button.travel-back.active * { color: #fff !important; }

  /* ---- an unfolded stop: Navigate, Food and Suggest in one row, then Like and Dislike ---- */
  #itinerary .stop-quick.q3 { grid-template-columns: repeat(3, 1fr); } #itinerary .stop-quick.q3 .act { font-size: .74rem; padding: 4px 3px; }
  #itinerary .crowd-bar { grid-template-columns: 1fr 1fr; } #itinerary .crowd-bar > [data-sugday] { display: none; }
  #itinerary .crowd-bar .btn.react .lbl { display: inline !important; } #itinerary .crowd-bar .btn.react { gap: 6px; }

  /* ---- the day box header and stats, as in the prototype ---- */
  .sd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .sd-t { font-size: 1.1rem; } .sd-date { font-size: .85rem; color: var(--ink-2); }
  .sd-head > .itin-note { margin: 0 !important; }
  .day-box .summary { padding: 12px 12px 4px; }
  .sd-stats { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 8px; font-size: .84rem; color: var(--ink-2); } .sd-stats b { color: var(--ink); font-variant-numeric: tabular-nums; } .sd-stats i { font-style: normal; opacity: .6; }
  .day-box > .itin-note { display: none !important; }
  .day-box .insights .insight-line, .day-box .insights > div > div { font-size: .8rem; }
  #travelCard { order: 1; } #travelCard:empty { display: none; }
  .travel-card { margin: 8px 0 0; }
  .brk { display: block; margin: 6px 0; padding: 7px 10px; border: 1px dashed var(--line); border-radius: 10px; font-size: .8rem; background: var(--surface); }
  .add-places { order: 5; width: 100%; margin: 8px 0 0; min-height: 44px; border-radius: 12px; font-weight: 700; }
  .swipe-hint { margin: 14px 0 6px; text-align: center; font-size: .74rem; color: var(--ink-3); }
  /* the friend's note, as a quiet blue box under the actions */
  .sec-top .role-note { display: block !important; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--brand-soft); border: 0; font-size: .82rem; line-height: 1.35; text-align: left; color: var(--ink); }
}
@media (max-width: 820px) { .sd-head > .ok-note { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--good-bg); color: var(--good-ink); font-size: .78rem; font-weight: 700; } }
@media (max-width: 820px) { .add-places { display: inline-flex; align-items: center; justify-content: center; } .swipe-hint { display: block; } }
@media (max-width: 820px) {
  .day-box .ins-toggle { border-top: 0 !important; font-weight: 800; font-size: .95rem; color: var(--ink); min-height: 44px; padding: 6px 14px; }
  .day-box .insights { padding: 0 12px 12px; display: grid; gap: 6px; } .day-box .insights:not(.open) { display: none; }
  .day-box .insights .insight-line, .day-box .insights > div > .chip, .day-box .insights > div > div:not(:empty) { padding: 8px 12px; border-radius: 10px; background: var(--brand-soft); font-size: .84rem; line-height: 1.35; }
  .day-box .insights > div:empty { display: none; }
  .sd-stats { margin-bottom: 4px; }
}
@media (max-width: 820px) { .travel-card p, .travel-card strong { color: var(--ink); } .travel-card p { font-weight: 700; font-size: .9rem; } }
/* Day tools: the row and what it opens are one card */
@media (max-width: 820px) {
  #toolsToggle { min-height: 56px; margin: 8px 0 0; padding: 8px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 1rem; font-weight: 800; }
  .sec-itin.tools-open #toolsToggle { border-radius: 14px 14px 0 0; border-bottom-color: transparent; margin-bottom: 0; }
  .sec-itin:not(.tools-open) .itin-h { display: none; }
  .sec-itin.tools-open .itin-h { margin: 0 0 8px; padding: 0 14px 14px; background: var(--surface); border: 1px solid var(--line-soft); border-top: 0; border-radius: 0 0 14px 14px; }
  .sec-itin.tools-open .itin-actions { padding: 0; gap: 8px; align-items: center; }
  .itin-actions .btn, .itin-actions .seg .btn { min-height: 40px; font-size: .84rem; font-weight: 700; }
  .itin-actions .pace-note, .itin-actions #paceSeg { margin-right: 4px; }
}

@media (max-width: 820px) {
  .itin-h { display: none !important; }
  .phone-tools { display: none; }
  .sec-itin.tools-open .phone-tools { display: grid; gap: 10px; order: 2; padding: 4px 14px 14px; background: var(--surface); border: 1px solid var(--line-soft); border-top: 0; border-radius: 0 0 14px 14px; margin-bottom: 8px; }
  #phoneTools { order: 2; }
  .tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tool-l { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); min-width: 64px; }
  .tool-btn { justify-self: start; display: inline-flex; align-items: center; min-height: 42px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
  .tool-btn[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .tool-btn:disabled { opacity: .5; cursor: default; }
  .sec-itin.tools-open #toolsToggle { margin-bottom: 0; }
}
@media (max-width: 820px) {
  .drive-card { margin: 8px 0; padding: 12px 14px; border-radius: 14px; background: var(--good-bg); color: var(--good-ink); font-weight: 700; font-size: 1rem; line-height: 1.3; } .drive-card small { display: block; margin-top: 4px; font-weight: 500; font-size: .86rem; color: var(--ink-2); }
  .rest-card { display: grid; gap: 6px; margin: 8px 0; padding: 10px 14px; border: 1px dashed var(--line); border-left: 3px solid var(--travel); border-radius: 12px; background: var(--surface); } .rest-card b { font-size: .95rem; } .rest-card span { font-size: .84rem; color: var(--ink-2); } .rest-card .btn { justify-self: start; min-height: 38px; text-decoration: none; }
}
/* Day insights: one tinted row for each insight, coloured by how much it matters (like the prototype), not boxes inside a box */
@media (max-width: 820px) {
  .day-box .insights .park-tip, .day-box .insights .road-tip { display: contents; }
  .day-box .insights .park-name { padding: 2px 4px 0; font-size: .8rem; }
  .day-box .insights .chip { display: block; margin-bottom: 6px; width: 100%; box-sizing: border-box; padding: 8px 12px; border: 0; border-radius: 10px; font-size: .84rem; line-height: 1.35; background: var(--brand-soft); color: var(--ink); }
  .day-box .insights .chip.good { background: var(--good-bg); color: var(--good-ink); }
  .day-box .insights .chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
  .day-box .insights .chip.bad { background: var(--bad-bg, #fef2f2); color: var(--bad-ink); }
  .day-box .insights > div > div:not(:empty):not(.park-tip):not(.road-tip) { background: transparent; padding: 0; }
}
/* Day view options sit under the counts: what to show on the left, the maps app on the right */
@media (max-width: 820px) {
  .sd-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 8px 0 4px; }
  .sd-opts, .sd-nav { display: inline-flex; flex-wrap: wrap; gap: 6px; }
  .sd-nav { margin-left: auto; justify-content: flex-end; }
  .sd-actions .tool-btn { width: auto; min-height: 32px; padding: 4px 10px; font-size: .78rem; }
  .pace-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 0; background: var(--brand-soft); color: var(--ink); font: inherit; font-size: .78rem; font-weight: 700; }
  button.pace-pill { cursor: pointer; }
}
@media (max-width: 820px) { .sd-head { gap: 4px 6px; flex-wrap: wrap; } .sd-head .sd-date { font-size: .76rem; } .sd-head .ok-note, .sd-head .itin-note, .pace-pill { padding: 2px 8px !important; font-size: .74rem !important; } }
@media (max-width: 820px) { .sd-head .sd-t { font-size: 1rem; white-space: nowrap; } .sd-head { column-gap: 5px; } }
/* Rest break: the text on the left, the find button at the right end */
@media (max-width: 820px) {
  .rest-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .rest-card .rc-tx { display: grid; gap: 4px; min-width: 0; } .rest-card .btn { flex: none; margin-left: auto; white-space: nowrap; }
  .map-ico { width: 15px; height: 15px; vertical-align: -3px; }
}
  /* the maps icons keep a gap from the word; the rest break's Find button looks like the lunch break's Show button */
@media (max-width: 820px) {
  .map-ico { margin-right: 5px; }
  .rest-card a.btn { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); padding: 2px 9px; min-height: 28px; font-size: .74rem; font-weight: 400; }
}
/* Phone app bar: My trips at the far left, the name in the middle, Plan a trip (+) at the right; the Plan a trip in the actions is not needed */
@media (max-width: 820px) {
  .topbar.brandbar { grid-template-columns: auto 1fr auto; }
  .topbar.brandbar .tb-trips { display: contents; } #prevBtn { grid-column: 1; grid-row: 1; }
  .topbar.brandbar .tb-brand { grid-column: 2; grid-row: 1; justify-content: center; }
  .topbar.brandbar .tb-right { display: flex; grid-column: 3; grid-row: 1; }
  .plan-new { display: none !important; }
}
/* The first drive sits the same distance from the day card as from the stop below it */
@media (max-width: 820px) { .day-box { margin-bottom: 0; } #itinerary { margin-top: 0; } }
/* both maps buttons are blue: they are two ways to open the day's route, not a switch */
@media (max-width: 820px) { .sd-nav .tool-btn { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } }
/* Phone day card: the counts one under another on the left, the maps buttons in a column on the right; every insight is open */
@media (max-width: 820px) {
  .sd-body { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start; margin-top: 8px; }
  .sd-body .sd-stats { display: grid; gap: 3px; margin: 0; } .sd-body .sd-stats i { display: none; }
  .sd-body .sd-actions { margin: 0; display: flex; flex-direction: column; align-items: flex-end; } .sd-body .sd-nav { flex-direction: column; margin-left: 0; align-items: stretch; }
  .day-box .ins-toggle { display: none !important; }
  .day-box .insights { display: grid; padding: 4px 12px 12px; } .day-box .insights[hidden] { display: none; }
}
@media (max-width: 820px) { .lunch > strong { font-size: .95rem; } }
/* Lunch break cards are sized like rest breaks: the same padding, text sizes, gaps and button */
@media (max-width: 820px) {
  .lunch { padding: 10px 14px !important; gap: 4px 10px !important; align-items: center !important; }
  .lunch > strong { font-size: .95rem; } .lunch > .muted { font-size: .84rem; line-height: 1.3; }
  .lunch .lunch-tools .chip.ask { min-height: 28px; padding: 2px 9px; font-size: .74rem; }
}
@media (max-width: 820px) { .tabs .daybox > .add-day { width: auto !important; height: 20px !important; line-height: 20px !important; } }
/* "Viewing as <name>" sits as a small line under the app bar on a phone */
@media (max-width: 820px) { .topbar.brandbar .who-pill { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding: 2px 10px; font-size: .74rem; margin-top: 2px; } }

/* Live Trip: the map takes the screen; its card sits over the bottom */
@media (max-width: 820px) {
  body.live-trip #sheetGrip { display: none; }
  .live-card { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; max-height: 46%; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); box-shadow: 0 6px 20px rgba(15, 23, 42, .25); }
  .live-card[hidden] { display: none; }
  .lv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .lv-head .small-btn { margin-left: auto; }
  .lv-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .lv-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .8rem; }
  .lv-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .lv-acts .btn { flex: 0 1 auto; } .lv-note { margin: 6px 0 0; font-size: .8rem; color: var(--ink-3); }
}
.live-label { background: rgba(15, 23, 42, .82) !important; color: #fff !important; border: 0 !important; border-radius: 6px !important; padding: 1px 6px !important; font: 700 12px/1.3 system-ui, sans-serif !important; white-space: nowrap; box-shadow: none !important; }

@media (max-width: 820px) { .lv-head .lv-day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; } .lv-head .small-btn { margin-left: 0; } .lv-head #lvMe { margin-left: 4px; } }

@media (max-width: 820px) { .lv-stop { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; align-items: center; } .lv-arrow { align-self: stretch; padding: 0; font-size: 1.5rem; line-height: 1; min-height: 0; } .lv-body { min-width: 0; } }

/* Live Trip action buttons: equal width, label centred both ways */
@media (max-width: 820px) {
  .lv-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
  .lv-acts .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
}

/* Bigger on a phone: a larger base so text is easy to read, taps are at least 44px, and fields never make iPhone zoom in */
@media (max-width: 820px) {
  html { font-size: calc(19px * var(--ts, 1)); } /* one CSS pixel is physically smaller on a phone than on a laptop screen, so the same layout looks smaller in the hand than in the simulator */
  :root { --tap: 44px; }
  .btn, .small-btn, button.chip, .seg button, .seg2 button, .stay-tab, .react, button.add-day, .lv-acts .btn, .modal-act .btn { min-height: var(--tap); }
  .btn.small-btn, .small-btn { padding-top: 6px; padding-bottom: 6px; font-size: .86rem; }
  .seg button, .seg2 button, .stay-tab { padding-left: 12px; padding-right: 12px; }
  .modal-x, .icon-btn { min-width: var(--tap); min-height: var(--tap); }
  input, select, textarea { font-size: max(16px, 1rem) !important; }
  .day-box a:not(.btn):not(.chip), #insights a:not(.btn):not(.chip), .sd-body a:not(.btn):not(.chip) { display: inline-block; padding: 11px 2px; margin: -11px 0; }
  #tabBar button { font-size: .72rem; }
  .small, .muted.small, .meta { font-size: max(.85rem, 14px); }
}

/* Tap size: the specific rules above set 24 to 38 px heights; on a phone every control is at least 44 px (40 for chips inside cards), and tiny round buttons keep their look with a larger touch area */
@media (max-width: 820px) {
  .top.compact .top-acts .btn, .itin-actions .btn, .itin-actions .seg .btn, .travel-card .adj-seg .btn, .sd-actions .tool-btn, .seg2 button, .modal-x, .attr-close, .sd-nav .tool-btn, .sd-nav button { min-height: var(--tap) !important; }
  .lunch .lunch-tools .chip.ask, .lunch .lunch-len .btn, .rest-card a.btn, .rest-card .chip { min-height: 40px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
  .modal-x, .attr-close { min-width: var(--tap); }
  .tabs .add-day, .chev, .tabs .tab-cal, .tabs .tab-del, .tabs .rp, .attr-tabs .rp, .dbcard .rp { position: relative; }
  .tabs .add-day::after, .chev::after, .tabs .tab-cal::after, .tabs .tab-del::after { content: ''; position: absolute; inset: -12px; } /* the button looks the same; the touch area is 44 px */
  .tabs .slot { width: 40px; height: 40px; }
}
@media (max-width: 820px) { .tb-brand { min-height: var(--tap); display: inline-flex; align-items: center; } .credit-chip { min-height: 40px; } footer a, .legal a, .site-foot a, a[href*="terms"], a[href*="privacy"] { display: inline-block; padding: 12px 6px; } }

/* Phone menus: Costs and Print sit in the top bar as icons, Explore lives in the bottom bar (with its count), and the map is only on the Trip Maps tab */
@media (max-width: 820px) {
  .tb-icon { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 !important; font-size: 1.15rem; }
  .tb-right { display: flex; align-items: center; gap: 6px; }
  .top-acts #attrMenu, .top-acts #costBtn, .top-acts #printLink { display: none !important; }
  body:not(.live-trip):not(.on-landing) #right, body:not(.live-trip):not(.on-landing) #sheetGrip { display: none !important; }
  body:not(.on-landing) #left { padding-bottom: calc(var(--tabH) + 24px) !important; }
  #tabBar [data-tab="explore"] .tab-bd { background: var(--brand); }
  /* the open / close arrow on a stop: a real target with a filled triangle */
  #itinerary .stop-chev { display: grid !important; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--line-soft); align-self: start; }
  #itinerary .stop-chev svg { display: block; }
  /* chips on a stop: compact, with the label in the middle */
  .ins .chip, .ins .mark, .ins .badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; padding: 3px 11px; line-height: 1.2; text-align: center; box-sizing: border-box; }
  .stop-title .tag, .stop-title .mark, .stop-title .badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 2px 10px; line-height: 1.2; vertical-align: middle; }
  /* Trip Maps arrows */
  .lv-head .btn, .lv-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); padding: 0 8px; }
  .lv-arrow svg, .lv-head .btn svg { display: block; }
}

/* Phone: the top bar holds Costs, Print, Share, + and Make it mine as icons; the cost window shows three families in a row with a small add button and smaller figures */
@media (max-width: 820px) {
  .tb-name { display: none; } .topbar.brandbar .tb-right { gap: 2px; } .tb-icon svg { width: 20px; height: 20px; }
  .est-fams { flex-wrap: nowrap; gap: 6px; align-items: stretch; }
  .est-fam { flex: 1 1 0; min-width: 0; padding: 6px; }
  .est-fam input { width: 100%; box-sizing: border-box; } .est-fam label { font-size: .8rem; }
  .est-fam .small-btn { min-height: 32px; padding: 2px 6px; }
  #estAddFam { flex: none; align-self: center; width: 36px; min-width: 36px; min-height: 36px !important; padding: 0 !important; border-radius: 50%; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; } #estAddFam .lbl { display: none; }
  .modal .est-table { font-size: .86em; } .modal .est-table .small { font-size: .8em; } .modal .est-table th, .modal .est-table td { padding-left: 6px; padding-right: 6px; }
}

/* Phone: Invite friends and Make it mine live in the top bar now, and every top-bar icon is the same 44 px square with the same gap */
@media (max-width: 820px) {
  .top-acts #share, .top-acts #copyTour { display: none !important; }
  .topbar.brandbar .tb-right { gap: 4px; }
  .topbar.brandbar .tb-right > .btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); min-width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; margin: 0; line-height: 1; font-size: 1.15rem; }
  .topbar.brandbar .tb-right > .btn.primary { font-size: 1.5rem; font-weight: 400; }
  .topbar.brandbar .tb-right > #copyTop { font-size: 1.15rem; }
}

/* Phone home page: one line in the top bar, the three steps in one row, and no second set of start buttons under them (the top bar has Start a trip) */
@media (max-width: 820px) {
  .ld-nav { gap: 8px; align-items: center; flex-wrap: nowrap; }
  .ld-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; } .ld-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ld-nav nav { flex: none; flex-wrap: nowrap; gap: 6px; align-items: center; }
  .ld-nav nav .btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; font-size: .8rem; line-height: 1; }
  ol.ld-how { flex-wrap: nowrap; justify-content: stretch; gap: 8px; margin-bottom: 14px; }
  ol.ld-how li { flex: 1 1 0; min-width: 0; max-width: none; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .74rem; line-height: 1.3; }
  ol.ld-how .ld-n { width: 26px; height: 26px; font-size: .8rem; }
  ol.ld-how .ld-st { display: flex; flex-direction: column; gap: 2px; align-items: center; } ol.ld-how strong { font-size: .8rem; line-height: 1.25; }
  .ld-cta { display: none; }
}

/* Phone home page: no tagline and no step descriptions, only the three step titles */
@media (max-width: 820px) {
  .ld-hero > p { display: none; }
  ol.ld-how .ld-st > span { display: none; }
}

/* Trip Maps: bold icon buttons for food, restrooms and the two maps apps; the attraction's lines are centred */
@media (max-width: 820px) {
  .lv-acts { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
  .lv-acts .lv-ic svg { width: 24px; height: 24px; stroke-width: 2.6; } .lv-acts .lv-ic { font-size: 1.35rem; font-weight: 800; }
  .lv-acts .lv-app svg { width: 26px; height: 26px; }
  .lv-acts .lv-ic.on { background: var(--select-bg); border-color: var(--brand); }
  .lv-acts .spin { width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: chatspin .8s linear infinite; }
  .lv-body { text-align: center; } .lv-title { justify-content: center; }
}
@keyframes chatspin { to { transform: rotate(360deg); } }

/* Trip Maps: a thin line between the day and the attraction, centred hints, arrows that stay in their own columns; the trip title and its dates are centred */
@media (max-width: 820px) {
  .lv-head { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
  .lv-note { text-align: center; }
  .lv-stop { grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); gap: 4px; }
  .lv-arrow { min-width: 0; width: var(--tap); padding: 0; }
  .trip-head { text-align: center; } .top.compact h1, .top.compact .title-input { text-align: center; } .trip-sub { text-align: center; }
}

/* Phone spacing: the title block has the same space above and below (no empty menu row under it), the +/- on a day card is not clipped at the top, and the Group buttons share one line */
@media (max-width: 820px) {
  .sec-top { padding: 10px 12px !important; }
  .top-acts:not(:has(> :not(#attrMenu, #costBtn, #printLink, #share, #copyTour, .plan-new, #rebalance, #verBtn))) { display: none; }
  #tabs.tabs.grouped, #tabs.tabs { padding-top: 14px; padding-bottom: 4px; }
  .pp-actions { flex-wrap: nowrap; gap: 6px; }
  .pp-actions .btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; font-size: .8rem; white-space: nowrap; text-align: center; }
}

/* Trip Maps results: Me, Go there and Close sit side by side in the middle, never on top of each other */
@media (max-width: 820px) {
  .lv-acts.lv-res { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 8px; }
  .lv-acts.lv-res .btn { flex: 0 0 auto; width: auto; min-width: 0; padding: 0 16px; white-space: nowrap; }
}
/* Pop-ups on an iPhone are as tall as the screen you can see (the toolbar is not counted), so the title bar and the close button are never pushed above the top */
@media (max-width: 820px) {
  .modal-overlay .modal, .modal-overlay.anchored .modal { max-height: calc(100% - max(env(safe-area-inset-top, 0px), 12px)) !important; }
  .modal-h { position: sticky; top: 0; z-index: 2; background: var(--surface); }
}

/* Review polish: the Trip Maps card has an edge and does not scroll the page behind it, the day bar does not chain its swipe, small pills have a larger touch area, long day titles shorten */
@media (max-width: 820px) {
  .live-card { max-height: min(46%, 340px); overscroll-behavior: contain; touch-action: pan-y; border: 1px solid var(--line); }
  .tabs, #tabs.tabs.grouped { overscroll-behavior-x: contain; }
  .pace-pill { position: relative; } .pace-pill::after { content: ''; position: absolute; inset: -9px -4px; }
  .sd-head .sd-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tb-brand { min-width: 0; overflow: hidden; }
  body:not(.on-landing) #left { padding-bottom: calc(var(--tabH) + 32px) !important; }
}

/* Clean on a phone: like Dark, the day's panel is not wrapped in a box */
@media (max-width: 820px) {
  [data-theme="clean"] .sec-itin, [data-theme="clean"] .sec-itin.state-warn, [data-theme="clean"] .sec-itin.state-good { background: none !important; border: 0 !important; box-shadow: none !important; }
}

/* Owner on a phone: the remove and Confirm buttons share one row, at the right, instead of the remove button dropping under the name */
@media (max-width: 820px) {
  .stay-head .sh-top { row-gap: 8px; }
  .stay-head .sh-top > [data-rmopt], .stay-head .sh-top > [data-decline] { order: 5; margin-left: auto; }
  .stay-head .sh-top > .sh-confirm { order: 6; margin-left: 0; }
}

/* Phone day summary: two centred lines (places and total, then visit and drive), and a stop's single Maps button fills its row */
@media (max-width: 820px) {
  .sd-stats.sd-center { display: grid; gap: 4px; justify-items: center; text-align: center; margin: 10px 0 4px; font-size: .95rem; color: var(--ink-2); }
  .sd-stats.sd-center b { color: var(--ink); } .sd-stats.sd-center i.dot { display: inline; font-style: normal; margin: 0 .5em; color: var(--ink-3); }
  #itinerary .stop-quick:has(> :only-child) { grid-template-columns: 1fr; }
}

/* Phone: Smart plan and Versions are icons in the top bar (new and own trips); six icons fit by using 42 px squares and a small gap */
@media (max-width: 820px) {
  .top-acts #rebalance, .top-acts #verBtn { display: none !important; }
  .topbar.brandbar .tb-right { gap: 3px; }
  .topbar.brandbar .tb-right > #verTop svg { width: 20px; height: 20px; }
}

/* Phone: the title and its dates sit with the same space above and below */
@media (max-width: 820px) {
  .sec-top { padding: 16px 12px !important; }
  .top.compact { gap: 0; }
  .trip-sub { margin-top: 3px; }
}

/* Phone top bar: the app's name sits next to its logo on one line, as large as the room allows; icons are 40 px squares so six fit */
@media (max-width: 820px) {
  .topbar.brandbar { padding-left: 6px; padding-right: 6px; column-gap: 2px; }
  .topbar.brandbar .tb-right { gap: 2px; }
  .topbar.brandbar .tb-right > .btn { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .topbar.brandbar .tb-brand { container-type: inline-size; justify-self: stretch; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; min-height: var(--tap); min-width: 0; overflow: hidden; }
  .topbar.brandbar .tb-logo { width: 22px; height: 22px; min-width: 22px; flex: none; }
  .topbar.brandbar .tb-name { display: none; font-weight: 800; line-height: 1.1; white-space: nowrap; }
  .topbar.brandbar .tb-status { display: none; }
}
@container (min-width: 94px) { .topbar.brandbar .tb-name { display: block; font-size: .66rem; } .topbar.brandbar .tb-logo { width: 20px; height: 20px; min-width: 20px; } }
@container (min-width: 122px) { .topbar.brandbar .tb-name { font-size: .8rem; } .topbar.brandbar .tb-logo { width: 24px; height: 24px; min-width: 24px; } .topbar.brandbar .tb-brand { gap: 6px; } }

/* Phone travel day: the summary is the drive hours and miles, a Maps button, and the whole trip's drive as the last line */
@media (max-width: 820px) {
  .sd-maps { display: flex; justify-content: center; margin: 6px 0 2px; }
  .sd-travel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); text-align: center; font-weight: 700; font-size: .92rem; color: var(--ink); }
}

@media (max-width: 820px) { .lv-acts.lv-6 { grid-template-columns: auto repeat(5, minmax(0, 1fr)); } }

/* Everything that opens Trip Maps is a blue button with the Trip Maps arrow; the summary's Maps button sits on the figures' line, centred */
@media (max-width: 820px) {
  .btn.tm, .chip.ask.tm, .lunch .lunch-tools .chip.ask.tm, .rest-card .btn.tm, #itinerary .stop-quick .act.primary { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; }
  .tm .tm-ic, .stop-quick .tm-ic { flex: none; vertical-align: -3px; }
  .sd-stats.sd-center .sd-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 0; }
  .sd-stats.sd-center .sd-row .btn { margin-left: 12px; min-height: 36px; padding: 0 14px; }
}

@media (max-width: 820px) { .tm .ic, .tm .ic svg { opacity: 1 !important; color: inherit !important; } }

/* Phone: a travel day's rest-break note sits above the line, the trip's drive below it; the start card sits above the first drive */
@media (max-width: 820px) {
  .sd-restnote { margin-top: 10px; text-align: center; font-size: .9rem; color: var(--ink-2); }
  #startDetail { order: 6; }
}

/* The day's status pill on a phone: green when good, amber when something needs a look, quiet blue for a light day */
@media (max-width: 820px) {
  .sd-head > .warn-note, .sd-head > .info-note { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
  .sd-head > .warn-note { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn); }
  .sd-head > .info-note { background: var(--brand-soft); color: var(--brand); }
}

/* Phone travel day: the weather in a few words, then a chip for anything unusual about driving it */
@media (max-width: 820px) {
  .sd-cond { margin-top: 8px; text-align: center; } .sd-wx { font-weight: 700; font-size: .95rem; color: var(--ink); }
  .sd-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
  .sd-flags .chip { padding: 4px 12px; font-size: .84rem; font-weight: 700; } .sd-flags .chip.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn); }
  .sd-flags .chip.bad { background: color-mix(in srgb, var(--bad) 18%, var(--surface)); color: var(--bad-ink); border-color: var(--bad); }
}

@media (max-width: 820px) { .lv-acts.lv-7 { grid-template-columns: auto repeat(6, minmax(0, 1fr)); } .lv-acts.lv-7 .lv-ic { padding-left: 2px; padding-right: 2px; } }