/* Nomii Go — open sky, soft sunshine, one shared component language.
   Glass here is a CSS approximation; map tiles and provider controls stay native. */
:root {
  --canvas: #f5faff;
  --paper: #fff;
  --ink: #29485b;
  --muted: #526e81;
  --brand: #356b8d;
  --brand-strong: #295a79;
  --brand-soft: #e4f2fc;
  --brand-light: #cfe8f9;
  --brand-border: #b1d2e7;
  /* Compatibility aliases for existing components; the brand is now blue. */
  --green: var(--brand);
  --green-soft: var(--brand-soft);
  --line: #dde9f1;
  --lilac: #eef0fb;
  --purple: #5c6a90;
  --danger: #a0454f;
  --accent-sun: #fff1bd;
  --accent-sun-ink: #806827;
  --accent-peach: #f9dec7;
  --accent-peach-ink: #895938;
  --accent-blue: var(--brand-soft);
  --accent-blue-ink: var(--brand);
  --accent-lilac: #eef0fb;
  --accent-lilac-ink: #5c6a90;
  --accent-rose: var(--accent-peach);
  --accent-rose-ink: var(--accent-peach-ink);
  --radius-control: 12px;
  --radius-card: 24px;
  --shadow-card: 0 4px 18px #2a628510;
  --shadow-control: 0 2px 6px #2a62850c;
}
body { background: var(--canvas); color: var(--ink); }
button:hover:not(:disabled) { filter: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 3px;
}
h1 { font-weight: 700; letter-spacing: -.7px; }
h2, h3 { letter-spacing: -.2px; }
.icon, .nt-dock-icon { stroke-width: 1.8; }
.btn {
  border-radius: 14px; min-height: 44px; gap: 8px; font-size: 14px;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.btn.primary { background: var(--brand-light); color: var(--brand-strong); border: 1px solid var(--brand-border); box-shadow: var(--shadow-control); }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-control); }
.btn.purple { background: var(--accent-lilac); color: var(--accent-lilac-ink); }
.btn.quiet { box-shadow: none; }
.btn .icon { width: 19px; height: 19px; }
.iconbtn { border-radius: 14px; transition: background .16s, box-shadow .16s; }
.pill { border-radius: 8px; font-size: 12px; line-height: 1.5; padding: 4px 8px; }
.pill.outline { background: #ffffffa6; color: var(--muted); border-color: var(--line); }
.btn:active:not(:disabled), .iconbtn:active:not(:disabled) { box-shadow: inset 0 1px 4px #29485b24; }
@media(hover:hover) {
  .btn.primary:hover:not(:disabled) { background: #bdddf2; box-shadow: 0 4px 12px #356b8d25; }
  .btn.secondary:hover:not(:disabled), .iconbtn:hover:not(:disabled) { background: #edf6fd; border-color: #b1d2e7; }
  .btn.purple:hover:not(:disabled) { background: #e7dff3; }
  .btn.quiet:hover:not(:disabled) { background: var(--green-soft); }
}

/* Navigation is light; selected destinations carry a compact color accent. */
.sidebar { background: #fdfefe; border-color: var(--line); }
.sidebar .wordmark { padding-left: 10px; }
.wordmark { color: var(--green); }
.wordmark .doublei { color: #679cc0; }
.wordmark .go { background: #fbe4d1; border-color: #ebd4c0; color: #80533a; }
.navbtn { border-radius: 14px; padding: 12px; font-size: 14px; }
.navbtn.active { background: var(--green-soft); color: var(--green); font-weight: 650; }
.navbtn.active .icon { color: var(--green); }
.navbtn[data-page=tickets] .icon { color: var(--accent-lilac-ink); }
.navbtn[data-page=finance] .icon { color: var(--accent-blue-ink); }
.navbtn[data-page=packing] .icon { color: var(--accent-peach-ink); }
.navlabel { color: var(--muted); letter-spacing: 1.2px; }
.profile .avatar { background: var(--accent-peach); color: var(--accent-peach-ink); }
.topbar {
  background: rgba(248,252,255,.85); border-color: #dde9f1ba;
  backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: inset 0 1px 0 #fff, 0 3px 16px #2a628505;
}
.topbar .btn.purple { background: var(--accent-lilac); color: var(--accent-lilac-ink); border-color: #e5dcf0; box-shadow: var(--shadow-control); }
.topbar .top-actions>.iconbtn { background: #fff; border: 1px solid var(--line); color: var(--muted); }
.avatar { background: var(--accent-rose); color: var(--accent-rose-ink); }
.avatar:nth-child(2) { background: var(--green-soft); color: var(--green); }
.avatar:nth-child(3) { background: var(--accent-blue); color: var(--accent-blue-ink); }
.bottomnav { background: rgba(248,252,255,.84); border-color: #dde9f1ba; box-shadow: 0 -4px 20px #2a628509, inset 0 1px 0 #fff; }
.bottomnav button { border-radius: 16px; min-height: 52px; }
.bottomnav button.active { background: #e4f2fc; border-color: #c9e1f1; color: var(--green); box-shadow: inset 0 1px 0 #fff, var(--shadow-control); }
.bottomnav button[data-page=finance] .icon { color: var(--accent-blue-ink); }
.bottomnav button[data-page=packing] .icon { color: var(--accent-peach-ink); }
.bottomnav button[data-page=more] .icon { color: var(--accent-lilac-ink); }

/* Home is a collection of trips, with no featured-trip details or duplicate CTAs. */
.home-heading { margin-bottom: 24px; align-items: center; }
.home-heading h1 { font-size: 30px; }
.home-heading p { font-size: 14px; margin-top: 8px; }
.home-heading .btn.primary { background: var(--brand-light); color: var(--brand-strong); border: 1px solid var(--brand-border); box-shadow: var(--shadow-control); }
.project-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr)); gap: 24px; align-items: start; }
.project-card, .project-card.current, .project-card:nth-child(3n+2), .project-card:nth-child(3n+3) {
  --trip-tint: var(--green-soft); --trip-color: var(--green);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 24px; box-shadow: var(--shadow-card); overflow: hidden;
}
.project-card:nth-child(3n+2) { --trip-tint: var(--accent-sun); --trip-color: var(--accent-sun-ink); }
.project-card:nth-child(3n+3) { --trip-tint: var(--accent-rose); --trip-color: var(--accent-rose-ink); }
.project-card-top { margin-bottom: 20px; gap: 16px; }
.project-card-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.project-symbol {
  width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--trip-tint); color: var(--trip-color); box-shadow: inset 0 1px 0 #fff;
}
.project-symbol .icon { width: 25px; height: 25px; transform: rotate(-7deg); }
.project-destination { font-size: 13px; font-weight: 600; color: var(--trip-color); overflow-wrap: anywhere; }
.project-card h2 { font-size: 26px; line-height: 1.45; font-weight: 650; letter-spacing: -.5px; }
.project-card .project-date { display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:13px;color:var(--muted);margin:10px 0 20px; }
.project-date .icon { width: 16px; height: 16px; }
.project-date time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.project-card-meta { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: auto; }
.project-card-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 9px; border-radius: 9px; background: #edf6fd; color: var(--green); }
.project-card-meta span:last-child { background: var(--accent-lilac); color: var(--accent-lilac-ink); }
.project-card-meta .icon { width: 15px; height: 15px; }
.project-card-actions { padding-top: 18px; border-top: 1px solid #e8f0f6; margin-top: 20px; gap: 10px; }
.project-card-actions .btn { min-height: 44px; border-radius: 14px; font-size: 14px; }
.project-storage { margin: 20px 2px 0; font-size: 12px; line-height: 1.65; }
@media(hover:hover) { .home-heading .btn.primary:hover { background: #bdddf2; } }

/* Daily planning: distinct controls, white cards and restrained semantic color. */
.trip-context h1 { font-weight: 650; color: var(--ink); }
.trip-context .back-to-trips { background: #fff; border: 1px solid var(--line); margin-right: 6px; border-radius: 50%; }
.trip-tools .segment { background: #eaf3fa; border-color: #d8e8f3; border-radius: 15px; padding: 3px; }
.trip-tools .segment button { border-radius: 11px; }
.trip-tools .segment button.active { background: #fff; color: var(--green); box-shadow: var(--shadow-control); }
.trip-tools .reading { border-radius: 13px; color: var(--muted); }
.trip-tools .reading[aria-pressed=true] { background: var(--accent-blue); color: var(--accent-blue-ink); }
.trip-tools .trip-assistant { background: var(--accent-lilac); color: var(--accent-lilac-ink); border: 1px solid #e5dcf0; }
.trip-workspace { gap: 16px; }
.trip-workspace .datebtn { border-radius: 15px; min-height: 60px; padding: 8px 15px; background: #fff; border-color: var(--line); }
.trip-workspace .datebtn.active { background: var(--green-soft); border-color: #9cc5e1; color: #295a79; box-shadow: inset 0 1px 0 #fff, var(--shadow-control); }
.trip-workspace .datebtn.active small { color: #426e8b; }
.trip-workspace .timeline-head { padding-bottom: 12px; border-color: var(--line); gap: 12px; }
.trip-workspace .day-summary { gap: 3px 10px; }
.trip-workspace .day-summary span { font-size: 12px; }
.trip-workspace .day-summary span:first-child { color: var(--green); }
.trip-workspace .density { background: #eaf2f8; border-radius: 13px; padding: 3px; }
.trip-workspace .density button { border-radius: 10px; }
.trip-workspace .density button.active { background: #fff; color: var(--green); box-shadow: var(--shadow-control); }
.trip-workspace .stop-body { background: #fff; border-color: var(--line); border-radius: 18px; box-shadow: 0 2px 10px #2a628506; }
.trip-workspace .stop.selected .stop-body { border-color: #a1c9e4; box-shadow: 0 3px 14px #356b8d10; }
.trip-workspace .stop-title h3 { color: var(--ink); }
.trip-workspace .stop-title .type { color: var(--green); }
.trip-workspace .stop-thumb { background: #eaf5fd; border-color: #d5e9f6; border-radius: 13px; }
.trip-workspace .stop:nth-of-type(3n+2) .stop-thumb.placeholder { background: #e9f6fa; border-color: #d2e8ef; }
.trip-workspace .stop-thumb .icon { color: #658ca6; }
.trip-workspace .thumb-number { background: var(--green); }
.trip-workspace .thumb-credit { font-size: 11px; }
.trip-workspace .stop-controls .icon { width: 20px; height: 20px; }
.trip-workspace .drag-handle .icon, .trip-workspace .stop-menu .icon { stroke-width: 2.8; }
.trip-workspace .stop-controls .iconbtn { color: #638093; border-radius: 11px; }
.trip-workspace .stop-controls button:hover { background: #edf6fd; }
.trip-workspace .stop-tags .pill { background: var(--green-soft); color: var(--green); border-radius: 8px; }
.trip-workspace .stop-tags .ticket-link { color: var(--accent-lilac-ink); border-radius: 10px; }
.trip-workspace .time-col { color: var(--green); font-weight: 600; }
.trip-workspace .time-col:after { border-color: #cadfec; }
.trip-workspace .transport button { color: var(--accent-blue-ink); font-size: 13px; border-radius: 11px; padding: 0 7px; }
.trip-workspace .transport button>small:not(:empty) { background: var(--accent-blue); color: var(--accent-blue-ink); border-radius: 5px; font-size: 11px; }
.trip-workspace .insert-stop { color: #94603c; border-radius: 11px; }
.trip-workspace .insert-stop .icon { background: #fbe8d8; padding: 3px; width: 23px; height: 23px; border-radius: 8px; }
.trip-workspace .compact .stop-body { padding: 8px 10px; border-radius: 13px; }
.trip-workspace .compact .stop-title { gap: 8px; }
.trip-workspace .compact .stop-title h3 { font-size: 16px; }
.easy .trip-workspace .compact .stop-title h3 { font-size: 19px; }
.trip-workspace .is-dragging .stop-body { background: #edf6fd; border-color: var(--green); }

/* Frame the actual map; never recolor the map tiles or hide attribution. */
.trip-workspace .route-panel { border-radius: 20px; border-color: #d3e5f2; box-shadow: var(--shadow-card); }
.route-panel>.route-top { padding: 8px 12px; background: #eaf5fd; min-height: 64px; }
.route-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.route-heading>div { min-width: 0; }
.route-title-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; background: #dceffa; border: 1px solid #cfe5f4; color: var(--accent-blue-ink); border-radius: 12px; }
.route-title-icon .icon { width: 18px; height: 18px; }
.route-panel>.route-top .iconbtn { color: var(--accent-blue-ink); border-radius: 12px; }
.route-panel>.route-top .map-collapse-button { color: var(--accent-blue-ink); }
.route-panel>.map-peek { background: #fff; padding: 7px 14px; }
.route-panel>.map-peek .map-navigation { color: var(--accent-blue-ink); padding: 0 10px; border-radius: 11px; background: var(--accent-blue); }
.route-panel .map-viewport .map-toolbar { border-radius: 14px; background: #ffffffeb; border-color: #ffffff; box-shadow: 0 3px 14px #2a62851b; }
.route-panel .map-viewport .map-toolbar button { border-radius: 10px; }
.route-panel .map-viewport .map-toolbar .locate-button { background: var(--accent-blue); color: var(--accent-blue-ink); }
.route-panel .map-viewport .map-toolbar .map-fit-button { background: #fff; border: 1px solid #d7e7f2; color: #285f80; font-weight: 650; }
.route-panel .map-viewport .map-toolbar .map-fit-button:hover { background: #edf7fd; }
.route-panel .map-empty-state { background: #f1f8fd; }
.topbar .nt-clocks-compact strong { color: var(--accent-blue-ink); }

/* Preserve the light, vertical PDF/FX tool pair. */
.nt-tools .nt-export { color: var(--accent-lilac-ink)!important; }
.nt-tools .nt-launcher { color: var(--accent-blue-ink)!important; }
.nt-dock-button::before { border-color: #d5e6f2; box-shadow: 0 3px 10px #2a628510, inset 0 1px 0 #ffffffb3; }
.nt-tools[data-nt-glass=true] .nt-dock-button::before { background: #ffffff52; border-color: #ffffffb8; }
.nt-tools[data-nt-glass=false] .nt-dock-button::before,
.nt-tools[data-nt-easy=true] .nt-dock-button::before,
#root:not(.solid-ui) ~ .nt-tools[data-nt-easy=true] .nt-dock-button::before { background: #fdfefe; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); }

/* Readability overrides win over decorative treatments. */
.solid-ui .topbar, .solid-ui .bottomnav, .reduce-effects .topbar, .reduce-effects .bottomnav { background: #fdfefe; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); box-shadow: none; }
.solid-ui .datebtn.active, .solid-ui .trip-workspace .datebtn.active { background: var(--green-soft); border-color: #9cc5e1; }
.solid-ui .topbar .btn.purple { background: var(--accent-lilac); }
.easy .home-heading h1 { font-size: 36px; }
.easy .project-card h2 { font-size: 29px; }
.easy .project-date, .easy .project-card-meta span, .easy .project-card-actions .btn { font-size: 16px; }
.easy .trip-workspace .day-summary span { font-size: 15px; }
@media(max-width:720px) {
  .home-heading h1 { font-size: 28px; }
  .home-heading { gap: 12px; margin-bottom: 22px; }
  .home-heading .btn { padding: 10px 14px; }
  .project-grid { grid-template-columns: 1fr; gap: 18px; }
  .project-card, .project-card.current { padding: 22px; }
  .project-card h2 { font-size: 25px; }
  .topbar .wordmark { font-size: 26px; }
  .trip-workspace .datebtn { min-height: 58px; padding: 8px 13px; }
  .route-panel>.route-top { padding: 7px 10px; }
  .trip-workspace .route-panel { border-radius: 18px; }
  .route-heading { gap: 8px; }
}
@media(max-width:420px) {
  .home-heading { align-items: flex-start; }
  .home-heading h1 { font-size: 27px; }
  .home-heading p { max-width: 190px; font-size: 13px; }
  .home-heading .btn { font-size: 13px; padding: 9px 12px; gap: 5px; }
  .project-card, .project-card.current { padding: 20px; }
  .project-card h2 { font-size: 24px; }
  .project-symbol { width: 46px; height: 46px; border-radius: 15px; }
  .route-title-icon { display: none; }
  .trip-context .back-to-trips { width: 44px; min-width: 44px; margin-right: 3px; }
  .trip-workspace .timeline-head { gap: 8px; }
  .trip-workspace .day-summary { column-gap: 8px; }
}
@media(hover:hover) {
  .trip-workspace .datebtn:not(.active):hover { border-color: #b1d2e7; background: #eef7fd; }
  .trip-workspace .transport button:hover { background: var(--accent-blue); }
  .trip-workspace .insert-stop:hover { background: #fcf0e5; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .topbar, .bottomnav, .nt-tools[data-nt-glass=true] .nt-dock-button::before { background: #fdfefe; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .topbar, .bottomnav, .route-panel .map-viewport .map-toolbar,
  .nt-tools[data-nt-glass=true] .nt-dock-button::before { background: #fdfefe; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #9fbfd4; }
  .pill.outline { background: #fff; }
}
@media(prefers-reduced-motion:reduce) { .btn, .iconbtn, .datebtn, .bottomnav button { transition: none; } }

/* A pair of travelling companions hides in the two i letters. */
.wordmark { align-items: center; gap: 7px; min-height: 44px; padding-top: 2px; padding-bottom: 6px; }
.wordmark .wordmark-name { white-space: nowrap; flex: 0 0 auto; font-family: "Arial Rounded MT Bold","Avenir Next",sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -1.9px; line-height: 1.1; }
.wordmark .doublei { position: relative; display: inline-block; color: #679cc0; letter-spacing: -1.3px; }
.wordmark .go { width: 30px; height: 30px; display: grid; place-items: center; margin: 2px 0 0 0; padding: 0; border: 1px solid #e8c1a0; border-radius: 11px 11px 11px 4px; background: #f8d7bb; font-family: "Avenir Next",sans-serif; font-size: 13px; font-weight: 750; line-height: 1; color: #80533a; transform: rotate(-8deg); box-shadow: inset 0 1px 0 #fff4; }
@media(max-width:960px) { .topbar .wordmark .wordmark-name { font-size: 30px; } .topbar .wordmark .go { width: 27px; height: 27px; font-size: 12px; border-radius: 10px 10px 10px 4px; } }

.icon.icon-direction { fill: currentColor; stroke: none; }
.nt-triangle-swap { fill: currentColor; stroke: none; }
.nt-swap { display: grid; place-items: center; }
.nt-rate-footer a { gap: 4px; }
.easy .trip-workspace .transport button { font-size: 16px; }
.easy .home-heading .btn { font-size: 16px; }
.trip-context>.iconbtn:last-child { width: 44px; min-width: 44px; }
.prototype-tools { padding-top: 0; }
.prototype-tools summary { line-height: 20px; }
.solid-ui .route-panel .map-viewport .map-toolbar, .reduce-effects .route-panel .map-viewport .map-toolbar { background: #fff; box-shadow: none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .settings-material-preview.is-glass .settings-preview-bar { background: #fff; } }

.wordmark .go, .topbar .wordmark .go { position: relative; isolation: isolate; width: 34px; height: 34px; margin: 1px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 12px; transform: rotate(-7deg); }
.wordmark .brand-bubble { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; fill: var(--accent-sun); stroke: #e4d69f; stroke-width: 1; }
.wordmark .go>span { position: relative; top: -2px; color: var(--accent-sun-ink); }

.icon .icon-arrowhead { fill: currentColor; stroke: none; }

/* A tiny folded map and rounded pin is the default for arrangements without a photo. */
.place-placeholder-icon { width: 46px; height: 46px; overflow: visible; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.place-icon-map { fill: #fffdf5; stroke: #83a5bc; }
.place-icon-fold { stroke: #c3dce9; }
.place-icon-pin { fill: #f6d8bc; stroke: #b48c6d; }
.place-icon-center { fill: #fffaf0; stroke: #b48c6d; }
.place-icon-spark { stroke: #91b9d3; }


/* Carry the sky palette through remaining legacy states and custom map markers. */
.prototypebar { background: #eaf3fa; color: var(--muted); }
.navbtn:hover:not(.active) { background: var(--canvas); }
.profile { border-color: var(--line); }
.segment { background: var(--brand-soft); border-color: var(--line); }
.trip-tools .segment { box-shadow: inset 0 1px 3px #2a628509; }
.next-stop { background: var(--brand-soft); color: var(--ink); border-color: var(--brand-border); }
.next-stop .eyebrow, .next-stop p { color: var(--brand); }
.next-stop .btn { background: var(--brand-light); color: var(--brand-strong); border: 1px solid var(--brand-border); }
.edit-feedback { background: var(--brand-soft); border-color: var(--line); }
.schedule-note { background: #fff9e7; color: var(--accent-sun-ink); border-color: #e4d49c; }
.leg-endpoints { background: var(--canvas); }
.leg-endpoints>span { color: var(--brand); }
.trip-workspace .stop.is-dragging .stop-body { background: var(--brand-soft); border-color: var(--brand); box-shadow: var(--shadow-control); }
.trip-workspace .stop.is-dragging .drag-handle { background: var(--brand-light); color: var(--brand-strong); }
.trip-workspace .stop.drop-before::before, .trip-workspace .stop.drop-after::after { background: var(--brand); box-shadow: 0 0 0 2px var(--canvas); }
.reorder-live-region { border-color: var(--line); box-shadow: var(--shadow-control); }
.real-map { background: var(--brand-soft); }
.real-place-marker span { background: var(--brand); box-shadow: 0 2px 8px #29485b40; }
.real-place-marker.is-selected span { background: var(--accent-peach-ink); box-shadow: 0 0 0 5px #f9dec7cc, 0 2px 8px #29485b30; }
.real-place-marker:focus-visible { outline-color: var(--brand); }
.legend-dot { background: var(--brand); }
.legend-dot.me { background: #347ec0; }
.map-info summary::marker, .map-empty-state>.icon { color: var(--brand); }
.phone-preview { background: var(--canvas); }
.phone-preview iframe { border-color: var(--brand-border); box-shadow: var(--shadow-card); }


/* nomii's cloud companion: soft waves, curious eyes, clear action badges. */
.nomii-sprite { width: 38px; height: 40px; flex: 0 0 auto; overflow: visible; }
.sprite-body { fill: #d4ecfb; stroke: #8db6d0; stroke-width: 1.3; stroke-linejoin: round; }
.sprite-eye { fill: #fff; }
.sprite-pupil { fill: var(--brand-strong); }
.wordmark .sprite-brand { margin-right: 1px; transform: none; }
.sprite-badge { fill: #fffdf5; stroke: #b3cbdb; stroke-width: 1.2; }
.sprite-symbol { fill: none; stroke: var(--brand-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.navbtn .sprite-nav { width: 29px; height: 29px; }
.bottomnav .sprite-nav { width: 31px; height: 31px; }
.bottomnav button { gap: 1px; }
.navbtn.active .sprite-body, .bottomnav button.active .sprite-body { fill: #acd7f1; stroke: var(--brand); }
.navbtn[data-page=finance] .sprite-badge, .bottomnav [data-page=finance] .sprite-badge { fill: var(--accent-sun); }
.navbtn[data-page=packing] .sprite-badge, .bottomnav [data-page=packing] .sprite-badge { fill: var(--accent-peach); }
.navbtn[data-page=more] .sprite-badge, .bottomnav [data-page=more] .sprite-badge { fill: var(--accent-lilac); }
@media (max-width: 420px) { .wordmark .sprite-brand { width: 34px; height: 36px; } }


/* The companion and its GO bubble form one mark at the end of the wordmark. */
.wordmark .brand-companion { position: relative; display: inline-block; width: 73px; height: 44px; flex: 0 0 auto; margin-left: -5px; }
.wordmark .brand-companion .sprite-brand { position: absolute; left: 0; top: 0; width: 42px; height: 44px; margin: 0; transform: none; }
.wordmark .brand-companion .go, .topbar .wordmark .brand-companion .go { position: absolute; left: 32px; right: auto; top: 0; bottom: auto; width: 42px; height: 34px; margin: 0; font-size: 11px; transform: none; }
.wordmark .brand-companion .go>span { top: -1.5px; left: 3px; }
.bottomnav button { gap: 4px; }

.sidebar .wordmark { padding-left: 0; padding-right: 0; gap: 4px; }
.sidebar .wordmark .wordmark-name { font-size: 32px; }

/* September refinement: soft blue structure, a small sunshine accent, less chrome. */
:root { --radius-control: 14px; --radius-card: 25px; --shadow-card: 0 5px 22px #37688709; --line: #dce9f1; }
.btn { border-radius: 15px; font-weight: 650; }
.btn.primary { background: #d6ecfa; border-color: #bcd9ec; box-shadow: inset 0 1px 0 #ffffffb3,0 2px 5px #356b8d08; }
.btn.secondary { box-shadow: none; }
.page-heading h1 { letter-spacing: -.6px; }
.project-card, .project-card.current, .project-card:nth-child(3n+2), .project-card:nth-child(3n+3) { background: linear-gradient(155deg,#f1f8fd 0%,#fff 44%); }
.project-card:nth-child(3n+2) { background: linear-gradient(155deg,#fffae8 0%,#fff 44%); }
.project-card:nth-child(3n+3) { background: linear-gradient(155deg,#f1f7f6 0%,#fff 44%); }
.project-symbol { border-radius: 19px; background: #deeffa; border: 1px solid #d3e7f4; }
.project-card:nth-child(3n+2) .project-symbol { background: #fff1c6; border-color: #efe4bf; }
.project-card:nth-child(3n+3) .project-symbol { background: #e4f1eb; border-color: #d6e7df; }
.project-card-actions { border-top-style: dashed; border-color: #d7e6ef; }
.home-heading .btn.primary { background: #ffedb6; color: #725b24; border-color: #ebd99e; }
.navbtn.active { background: #e6f3fc; box-shadow: inset 3px 0 0 #91c3e1; }
.trip-workspace .datebtn { border-radius: 18px; box-shadow: 0 2px 5px #356b8d04; }
.trip-workspace .datebtn.active { background: #dceffb; border-color: #a5cde5; box-shadow: inset 0 2px 0 #ffffffb3,0 3px 8px #356b8d08; }
.trip-workspace .density, .trip-tools .segment { background: #eaf2f7; border: 1px solid #dfeaf2; }
.trip-workspace .stop-body { border-radius: 21px; box-shadow: 0 4px 14px #356b8d05; }
.trip-workspace .stop.selected .stop-body { border-color: #a6cce2; box-shadow: inset 3px 0 0 #b3d9ee,0 4px 14px #356b8d08; }
.trip-workspace .stop-tags .pill:not(.reservation-pending) { background: #eaf5f0; color: #477665; }
.trip-workspace .insert-stop { color: #657f91; }
.trip-workspace .insert-stop .icon { background: #fff0c4; color: #917238; border-radius: 9px; }
.trip-workspace .transport button { color: #54768d; }
.trip-workspace .route-panel { border-radius: 23px; border-color: #d5e7f2; }
.route-panel>.route-top { background: #f0f8fd; }
.route-title-icon { background: #e0eff9; border: 0; border-radius: 13px; }
.bottomnav button.active { background: #e1f1fc; border-color: #d0e6f5; border-radius: 18px; }
.bottomnav button.active .icon { color: #3f7ca0; }
.bottomnav button:active { background: #eaf4fb; }

/* Transparent wordmark: preserve the supplied lettering, trim only layout whitespace. */
.brand-image-frame { position: relative; display: block; width: 166px; height: 46px; overflow: hidden; flex: 0 0 auto; }
.brand-wordmark-image { position: absolute; width: 187px; height: auto; max-width: none; left: -11px; top: -11px; }
.sidebar .wordmark, .topbar .wordmark { padding: 0; min-height: 48px; }
.sidebar { top: 0; }
@media(max-width:960px) {
  .topbar .brand-image-frame { width: 138px; height: 42px; }
  .topbar .brand-wordmark-image { width: 156px; left: -9px; top: -8px; }
}
@media(max-width:600px) {
  .topbar .brand-image-frame { width: 111px; height: 38px; }
  .topbar .brand-wordmark-image { width: 125px; left: -7px; top: -3px; }
  .topbar:not(:has(.clock-weather-cluster)) .brand-image-frame { width: 151px; height: 44px; }
  .topbar:not(:has(.clock-weather-cluster)) .brand-wordmark-image { width: 170px; left: -10px; top: -8px; }
  .project-card-top { margin-bottom: 17px; }
  .trip-workspace .stop-body { border-radius: 19px; }
  .trip-workspace .compact .stop-body { border-radius: 14px; }
}
.trip-title-main { display: flex; gap: 6px; min-height: 46px; margin-bottom: 14px; }
.trip-title-main h1 { font-size: 27px; letter-spacing: -.6px; }
.trip-title-main .back-to-trips { background: #fff; border-color: #d9e8f1; }
.trip-title-main>.iconbtn:last-child { color: #6b95b0; }
.btn .icon-direction { width: 21px; height: 21px; padding: 4px; border-radius: 50%; background: #ffffff99; }
.topbar .settings-toggle[aria-pressed=true] { background: #dceffc; color: #356b8d; border-color: #b6d5e9; box-shadow: inset 0 1px 0 #fff; }
@media(max-width:600px) {
  .trip-title-main { margin: 0 0 9px; gap: 2px; }
  .trip-title-main h1 { font-size: 22px; }
  .trip-title-main .back-to-trips { width: 44px; min-width: 44px; height: 44px; background: transparent; border: 0; margin: 0; }
}
.easy .trip-title-main h1 { font-size: 28px; }
@media(prefers-reduced-motion:no-preference) and (hover:hover) {
  .project-card { transition: border-color .18s,box-shadow .18s; }
  .project-card:hover { border-color: #bbd9eb; box-shadow: 0 7px 22px #356b8d10; }
}