/* Long distance visit planner: layout on top of engine-u02-trip-cost.css. */
.tool .vp-pane { display: flex; flex-direction: column; gap: 16px; }
.tool .vp-tabs button { font-size: 14px; padding: 0 2px; }
.tool .vp-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tool .vp-who input[type="text"] { min-height: 40px; padding: 6px 12px; font-size: 16px; }
.tool .vp-big { font-size: 46px; line-height: 50px; font-weight: 950; letter-spacing: -.035em; color: rgb(var(--ink)); margin: 0; font-variant-numeric: tabular-nums; }
.tool .vp-strip { position: relative; height: 38px; border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.tool .vp-strip i { position: absolute; top: 6px; bottom: 6px; min-width: 6px; border-radius: 6px; background: rgb(var(--accent)); animation: vp-in .4s var(--ease-out) both; }
.tool .vp-strip i.is-b { background: rgb(var(--ink)); }
@keyframes vp-in { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
.tool .vp-ends { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: rgb(var(--ink) / .7); margin-top: 4px; }
.tool .vp-legend { display: flex; gap: 14px; font-size: 13px; font-weight: 750; color: rgb(var(--ink) / .74); }
.tool .vp-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: rgb(var(--accent)); }
.tool .vp-legend .is-b::before { background: rgb(var(--ink)); }
.tool .vp-rows { display: grid; gap: 6px; }
.tool .vp-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.tool .vp-d { font-size: 15px; line-height: 20px; font-weight: 850; color: rgb(var(--ink)); }
.tool .vp-c { font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .vp-t { grid-column: 1 / -1; font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(var(--ink) / .72); }
.tool .vp-busy { display: flex; flex-wrap: wrap; gap: 6px; }
.tool .vp-busy button { min-height: 36px; padding: 0 12px; border-radius: 18px; background: var(--surface); font-size: 13px; font-weight: 800; color: rgb(var(--ink)); display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); }
.tool .vp-busy svg { width: 14px; height: 14px; }
.tool .vp-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.tool .vp-add .btn { padding: 0 16px; }

/* Checklists */
.tool .vp-prog { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .8); }
.tool .vp-prog .tool-meter { flex: 1; }
.tool .vp-h { font-size: 17px; line-height: 24px; font-weight: 900; letter-spacing: -.01em; margin: 6px 0 0; }
.tool .vp-list { display: flex; flex-direction: column; gap: 8px; }
.tool .vp-items { display: grid; gap: 6px; }
.tool .vp-items button { width: 100%; min-height: 48px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 14px; background: var(--surface); text-align: left; font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink)); }
.tool .vp-box { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgb(var(--ink) / .22); color: transparent; transition: background-color .2s ease; }
.tool .vp-box svg { width: 16px; height: 16px; }
.tool [aria-checked="true"] .vp-box { background: rgb(var(--accent)); box-shadow: none; color: var(--surface); }
.tool [aria-checked="true"] .vp-txt { color: rgb(var(--ink) / .62); text-decoration: line-through; }
.tool .vp-help { padding: 16px; border-radius: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 2px rgb(var(--accent) / .4); }
.tool .vp-help p { font-size: 15px; line-height: 22px; }
.tool .vp-help b { color: rgb(var(--ink)); }
.tool .vp-starters { padding: 14px 16px; border-radius: 16px; background: rgb(var(--accent) / .1); font-size: 16px; line-height: 24px; font-weight: 800; color: rgb(var(--ink)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (prefers-reduced-motion: reduce) { .tool .vp-strip i { animation: none; } }
@media print { html.vp-print body * { visibility: hidden; } html.vp-print .vp-list, html.vp-print .vp-list * { visibility: visible; } html.vp-print .vp-list { position: absolute; left: 0; top: 0; width: 100%; } }
.tool .vp-tworow { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.tool .vp-tworow .u2-seg button { font-size: 14px; padding: 0 2px; }
.tool .vp-tworow select { min-height: 52px; padding: 0 8px; font-size: 14px; }
.tool .u2-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.tool .u2-actions .btn { min-width: 0; padding: 0 14px; white-space: nowrap; gap: 6px; font-size: 15px; }
.tool .u2-actions .btn-primary { padding: 0 12px; }
.tool .u2-actions .vp-sq:only-of-type { padding: 0 14px; }
.tool .u2-result .u2-split { padding-top: 0; border-top: 0; }

.tool .vp-plan { display: flex; flex-direction: column; gap: 16px; }
.tool .vp-stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool .vp-stats3 > div { padding: 10px; }
.tool .vp-stats3 b { font-size: 18px; }
.tool .vp-pane > .tool-hint:empty { display: none; }
@media (min-width: 900px) {
  .tool .vp-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "basic answer" "fine answer"; gap: 20px; align-items: start; }
  .tool .vp-basic { grid-area: basic; } .tool .vp-fine { grid-area: fine; } .tool .vp-answer { grid-area: answer; position: sticky; top: 96px; }
  .tool .vp-basic .u2-route { display: flex; flex-direction: column; gap: 10px; }
}

.tool .vp-strip u { position: absolute; top: 0; bottom: 0; background: rgb(var(--ink) / .14); text-decoration: none; }
.tool .vp-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.tool .vp-add input[type="date"], .tool .vp-add2 input[type="date"] { padding: 10px 8px; min-width: 0; font-size: 15px; }
@media (max-width: 420px) { .tool .vp-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tool .vp-add .btn { grid-column: 1 / -1; } }
.tool .vp-basic .u2-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.tool .vp-basic .u2-route .u2-place input { padding-right: 12px; }
.tool .vp-tabs { background: transparent; box-shadow: inset 0 -2px 0 rgb(var(--ink) / .12); border-radius: 0; padding: 0; }
.tool .vp-tabs::before { top: auto; bottom: 0; left: 0; height: 3px; border-radius: 2px; background: rgb(var(--accent)); width: calc(100% / var(--n)); }
.tool .vp-tabs button { border-radius: 0; min-height: 48px; color: rgb(var(--ink) / .74); }
.tool .vp-tabs button[aria-checked="true"] { color: rgb(var(--ink)); font-weight: 900; }
.tool .vp-lead { font-size: 17px; line-height: 25px; font-weight: 750; color: rgb(var(--ink)); }
.tool .vp-doneline { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--link); }
.tool .vp-doneline:empty { display: none; }
.tool .vp-startlist { display: grid; gap: 8px; }
.tool .vp-startlist li { font-size: 16px; line-height: 24px; font-weight: 800; color: rgb(var(--ink)); }
.tool .vp-starters { margin-top: 8px; }
.tool .vp-trip { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface-2); }
.tool .vp-nextbox { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface); }
.tool .vp-add2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.tool .vp-add2 .btn { padding: 0 14px; white-space: nowrap; }
.tool .vp-golink { font-size: 15px; font-weight: 800; }
.tool .u2-actions .vp-sq { padding: 0 14px; }
.tool .tool-hint, .tool .tool-sub { color: rgb(var(--ink) / .74); }
.tool .vp-stats3 span { display: block; line-height: 16px; }
.tool .vp-london { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .8); }
.tool .vp-add .btn { min-height: 40px; width: auto; justify-self: start; }
.tool .vp-add2 { grid-template-columns: minmax(0, 1fr); }
.tool .vp-golink { text-align: center; }
.tool .vp-tworow { grid-template-columns: minmax(0, 1fr) 88px; }
.tool .vp-tworow .u2-seg button { font-size: 13px; }
.tool .u2-rate { display: inline; padding: 0; font: inherit; font-weight: 800; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.tool .vp-entry { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .8); }
.tool .vp-five { padding: 14px 16px; border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 2px rgb(var(--accent) / .35); }
.tool .vp-five ol { list-style: decimal; padding-left: 20px; display: grid; gap: 4px; }
.tool .vp-five li { font-size: 15px; line-height: 22px; font-weight: 750; color: rgb(var(--ink)); }
.tool .vp-unit { width: 150px; }
.tool .vp-strip i.is-b { background: transparent; box-shadow: inset 0 0 0 2px rgb(var(--ink)); }
.tool .vp-legend .is-b::before { background: transparent; box-shadow: inset 0 0 0 2px rgb(var(--ink)); }
.tool .vp-t { color: rgb(var(--ink) / .8); font-size: 14px; }
.tool .vp-items + .tool-cta, .tool section > .tool-cta { margin-top: 10px; }
.tool .vp-flags { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.tool .vp-flags ul { list-style: disc; padding-left: 18px; display: grid; gap: 2px; }
.tool .vp-flags li { font-size: 15px; line-height: 22px; font-weight: 700; color: rgb(var(--ink)); }
.tool .vp-big { font-size: 40px; line-height: 46px; }
.tool .vp-legend span { white-space: nowrap; }
.tool .vp-legend { flex-wrap: wrap; }
.tool .vp-nextbox .btn { white-space: normal; min-height: 48px; height: auto; padding: 8px 14px; font-size: 15px; }
.tool .vp-add .tool-field { min-width: 0; }
.tool .vp-add { align-items: end; }

/* Fix round: stat tile labels on tight lines. */
.tool .vp-stats3 > div span { display: block; font-size: 13px; line-height: 17px; }