/* Wayback: sign-in, My map and share-card dialog styles (on top of wayback.css) */

/* ---------- sign in ---------- */
.auth-wrap { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 32px 16px 64px; }
.auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow); }
.auth-card h1 { font-family: var(--font-display); font-weight: 400; font-size: 38px; letter-spacing: -.015em; margin-bottom: 6px; }
.auth-card .sub { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; }
.auth-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 20px; }
.auth-tabs button { flex: 1; border: 0; background: transparent; padding: 9px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; min-height: 40px; }
.auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.field { display: grid; gap: 6px; margin: 14px 0; }
.field > span, .field > label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input, select.input, textarea.input {
  width: 100%; min-height: 46px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2);
  color: var(--ink); padding: 0 14px; font: inherit;
}
textarea.input { padding: 12px 14px; min-height: 120px; resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
.hint-text { font-size: 12.5px; color: var(--ink-3); }
.btn-block { width: 100%; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; margin: 18px 0 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social { display: grid; gap: 10px; }
.social a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 600; font-size: 15px; }
.social a:hover { border-color: var(--ink-3); }
.social svg { width: 20px; height: 20px; }
.alert { padding: 11px 14px; border-radius: 10px; font-size: 14px; margin: 12px 0; border: 1px solid transparent; }
.alert.err { background: color-mix(in srgb, #d14343 13%, var(--surface)); border-color: color-mix(in srgb, #d14343 40%, var(--line)); }
.alert.ok { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.alert[hidden] { display: none; }
.small-links { margin-top: 18px; font-size: 13px; color: var(--ink-3); text-align: center; }
.small-links a { color: var(--ink-2); }

/* ---------- My map ---------- */
.app-head { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end; justify-content: space-between; }
.app-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.userbar { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 14px; color: var(--ink-2); }
.userbar button { border: 0; background: transparent; cursor: pointer; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tabs.four button { font-size: 13px; padding: 12px 4px; }
.onboard { margin: 0 0 18px; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--surface); display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.onboard[hidden] { display: none; }
.onboard b { display: block; font-size: 16px; }
.onboard span { color: var(--ink-2); font-size: 14.5px; }

.panel h3 { font-size: 15px; margin: 6px 0 10px; }
.panel h3 small { font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-left: 6px; }
.panel .block-gap { margin-top: 22px; }
.toggle-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; min-height: 46px; }
.toggle-row:hover { background: var(--surface-2); }
.toggle-row b { font-size: 14.5px; font-weight: 600; display: block; }
.toggle-row small { color: var(--ink-3); font-size: 12px; }
.sw { position: relative; width: 44px; height: 26px; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background .15s; pointer-events: none; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.sw input:checked + i { background: var(--accent); }
.sw input:checked + i::after { transform: translateX(18px); }
.sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.state-toggles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
.state-toggles .toggle-row { grid-template-columns: 1fr auto; min-height: 42px; }
.row-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; }
.row-x:hover { background: var(--surface-2); color: var(--ink); }
.promptbox { position: relative; }
.promptbox pre { margin: 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font: 12px/1.55 ui-monospace, Consolas, monospace; white-space: pre-wrap; max-height: 190px; overflow: auto; color: var(--ink-2); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-xs { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.result { font-size: 13.5px; line-height: 1.5; }
.danger { color: #c0392b; }
.btn-danger { background: transparent; border-color: color-mix(in srgb, #d14343 55%, var(--line)); color: #c0392b; }
.stage .hint { z-index: 2; }

/* ---------- share card dialog ---------- */
dialog.wb-dialog { border: 0; padding: 0; border-radius: 20px; background: var(--surface); color: var(--ink); width: min(1000px, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
dialog.wb-dialog::backdrop { background: rgba(5, 10, 15, .62); backdrop-filter: blur(3px); }
.wb-dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.wb-dlg-head h2 { font-size: 20px; }
.wb-dlg-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface-2); font-size: 22px; cursor: pointer; color: var(--ink); line-height: 1; }
.wb-dlg-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 20px; overflow: auto; max-height: calc(100vh - 96px); }
.wb-dlg-preview { display: grid; place-items: center; background: var(--surface-2); border-radius: 14px; padding: 14px; min-height: 300px; }
.wb-dlg-preview canvas { max-width: 100%; max-height: calc(100vh - 190px); width: auto; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.wb-dlg-side { display: flex; flex-direction: column; gap: 4px; }
.wb-field { display: grid; gap: 6px; margin: 8px 0; }
.wb-field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wb-field input[type=text] { min-height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--ink); padding: 0 12px; font: inherit; }
.wb-dlg-side .seg { display: flex; flex-wrap: wrap; border-radius: 14px; }
.wb-dlg-side .seg button { flex: 1 1 auto; padding: 6px 10px; }
.wb-check { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 8px 0; min-height: 32px; }
.wb-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.wb-dlg-actions { display: grid; gap: 8px; margin-top: 10px; }
.wb-dlg-actions .btn { width: 100%; min-height: 44px; }
.wb-dlg-actions [hidden] { display: none; }
.wb-dlg-note { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }
.wb-dlg-status { font-size: 13.5px; color: var(--accent); min-height: 20px; }
@media (max-width: 760px) { .wb-dlg-body { grid-template-columns: 1fr; padding: 14px; } .wb-dlg-preview canvas { max-height: 56vh; } }

/* ---------- stats: x of world total ---------- */
.stat b small { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.bar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 10px; }
.bar u { display: block; height: 100%; background: var(--accent); border-radius: 999px; text-decoration: none; min-width: 0; }

/* ---------- continent breakdown ---------- */
.cont-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; margin: 16px 6px 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.cont-head:first-child { border-top: 0; padding-top: 2px; margin-top: 4px; }
.cont-head b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cont-head span { font-size: 12.5px; color: var(--ink-3); text-align: right; }
.cont-head .bar { grid-column: 1 / -1; margin-top: 4px; height: 4px; }

/* ---------- intake form ---------- */
.intake { padding: 22px; }
.intake-head { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.intake-head h2 { font-size: 26px; font-family: var(--font-display); font-weight: 400; margin-bottom: 4px; }
.intake-head p { color: var(--ink-2); font-size: 15px; max-width: 46em; }
.demo-note { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; max-width: 360px; }
.itabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.itabs button { flex: none; border: 1px solid transparent; background: transparent; padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; min-height: 44px; white-space: nowrap; }
.itabs button[aria-selected="true"] { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
.tier { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); margin-left: 4px; }
.tier.free { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ipanel { padding-top: 18px; }
.ipanel[hidden] { display: none; }
.ipanel h3 { font-size: 16px; margin: 6px 0 10px; }
.intake-foot { margin-top: 18px; font-size: 12px; color: var(--ink-3); }
.cgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 18px; align-items: start; }
.cgroup { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cgroup summary { cursor: pointer; display: flex; justify-content: space-between; padding: 12px 14px; list-style: none; font-size: 14px; }
.cgroup summary::-webkit-details-marker { display: none; }
.cgroup summary::after { content: "+"; margin-left: 10px; color: var(--ink-3); }
.cgroup[open] summary::after { content: "–"; }
.cgroup .cnt { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.cgroup .rows { padding: 0 8px 10px; max-height: 420px; overflow: auto; }
.cgroup[hidden] { display: none; }
.imp-row { display: grid; gap: 12px; }
.imp-row.two { grid-template-columns: 1fr 1fr; }
.suggest-wrap { position: relative; }
.suggest { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 20; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); max-height: 280px; overflow: auto; }
.suggest li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14.5px; min-height: 44px; display: flex; align-items: center; }
.suggest li:hover, .suggest li:focus { background: var(--surface-2); outline: none; }
.suggest[hidden] { display: none; }
.chosen { margin: 6px 0 4px; padding: 10px 14px; background: var(--accent-soft); border-radius: 10px; font-size: 14px; }
.recent { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; }
.recent li { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; background: var(--surface-2); border-radius: 10px; font-size: 14px; }
.steps-sm { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; display: grid; gap: 6px; }
.muted { color: var(--ink-3); }
.nw { white-space: nowrap; }
.pv { margin-top: 16px; }
.pv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.pv-sum b { display: block; font-size: 16px; }
.pv-sum span { font-size: 13.5px; color: var(--ink-2); }
.pv-title { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 6px; font-weight: 600; }
.pv-title small { font-weight: 500; margin-left: 6px; }
.pv-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ptable th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 600; padding: 8px 10px; }
.ptable td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.ptable tr.off { opacity: .45; }
.ptable input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.ptable.sample { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pv-bad { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 3px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; }
.tiles div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tiles b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.tiles span { font-size: 12.5px; color: var(--ink-3); }
.ext-priv { background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px; }
.ext-help { margin: 10px 0; font-size: 14px; }
.ext-help summary { cursor: pointer; font-weight: 600; }
.ext-help div, .ext-help ul { margin-top: 8px; color: var(--ink-2); }
.ext-help ul { padding-left: 18px; display: grid; gap: 6px; }
.ext-live { margin: 12px 0; }
.xbar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.xbar u { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; text-decoration: none; }
.xlog { margin: 8px 0 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; font: 12px/1.55 ui-monospace, Consolas, monospace; max-height: 150px; overflow: auto; white-space: pre-wrap; color: var(--ink-2); }
.block-gap { margin-top: 22px; }
@media (max-width: 640px) { .intake { padding: 16px 14px; } .imp-row.two { grid-template-columns: 1fr; } .cgroups { grid-template-columns: 1fr; } }

/* ---------- flags ---------- */
.flag { display: block; border-radius: 3px; box-shadow: 0 0 0 1px var(--line-2); object-fit: cover; background: var(--surface-2); flex: none; }
.flag.big { border-radius: 5px; }
.flag-ph { display: block; width: 28px; height: 21px; border-radius: 3px; background: var(--surface-2); }
.flag-ph.big { width: 44px; height: 33px; }

/* ---------- visits ---------- */
.stay { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 2px 10px; background: var(--surface); }
.stay.click { cursor: pointer; }
.stay.click:hover { border-color: var(--line-2); }
.stay-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stay-top b { font-size: 15.5px; }
.stay-top .sdates { color: var(--ink-2); font-size: 13.5px; margin-left: auto; }
.stay-cities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pchip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.pchip button { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; margin-left: 4px; color: var(--ink-3); padding: 0 2px; }
.stay-meta { font-size: 13.5px; margin-top: 8px; color: var(--ink-2); }
.stay-notes { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); padding: 8px 10px; background: var(--surface-2); border-radius: 8px; white-space: pre-wrap; }
.stay-actions { display: flex; gap: 8px; margin-top: 10px; }
.info .stay { box-shadow: none; margin: 10px 0 0; padding: 10px 12px; }
.info .stay-top .sdates { margin-left: 0; }

/* ---------- visit form ---------- */
.vform .vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.vform .full { grid-column: 1 / -1; }
.vform .suggest-wrap { position: relative; }
.vform .suggest li { gap: 10px; }
.vform .suggest li .flag { width: 24px; height: 18px; }
.vform .chipbox { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 10px; }
.vform .quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vform .quick button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); min-height: 30px; }
.vform .quick button:hover { border-color: var(--ink-3); }
.vform .quick button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.vform .picked { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--accent-soft); border-radius: 10px; margin: 8px 0 0; font-size: 14px; }
.vform .picked[hidden] { display: none; }
.vform .hint-text em { font-style: normal; }
dialog.vdialog { border: 0; padding: 0; border-radius: 20px; background: var(--surface); color: var(--ink); width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
dialog.vdialog::backdrop { background: rgba(5, 10, 15, .62); backdrop-filter: blur(3px); }
dialog.vdialog .vform { padding: 6px 22px 22px; }
@media (max-width: 640px) { .vform .vgrid { grid-template-columns: 1fr; } }

/* ---------- sample/app: consistent stat cards, collapsible continents ---------- */
.stat { display: flex; flex-direction: column; }
.stat .bar { margin-top: auto; }
.stat span { margin-bottom: 10px; min-height: 2.6em; }
.bar.route { height: 6px; background: none; border-radius: 0; background-image: radial-gradient(circle, var(--hot) 1.6px, transparent 2px); background-size: 10px 6px; background-repeat: repeat-x; background-position: 0 50%; }
details.cont { border-top: 1px solid var(--line); margin-top: 10px; }
details.cont:first-of-type { border-top: 0; margin-top: 0; }
details.cont > summary.cont-head { list-style: none; cursor: pointer; border-top: 0; margin: 6px 4px 4px; padding: 10px 6px 8px 28px; position: relative; min-height: 44px; border-radius: 10px; }
details.cont > summary.cont-head::-webkit-details-marker { display: none; }
details.cont > summary.cont-head::before { content: ""; position: absolute; left: 8px; top: 17px; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s; }
details.cont[open] > summary.cont-head::before { transform: rotate(45deg); top: 14px; }
details.cont > summary.cont-head:hover { background: var(--surface-2); }
.cont-list { display: grid; gap: 2px; padding-bottom: 6px; }
.src-new { margin-top: 6px; }

/* ---------- order confirmation dialog ---------- */
dialog.confirm { border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); color: var(--ink); padding: 28px; width: min(480px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
dialog.confirm::backdrop { background: rgba(8, 14, 24, .6); }
dialog.confirm h2 { font-size: 34px; margin: 0 0 14px; }
.order { margin: 0 0 16px; display: grid; gap: 0; }
.order > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.order > div:last-child { border-bottom: 1px solid var(--line); }
.order dt { color: var(--ink-3); } .order dd { margin: 0; font-weight: 600; text-align: right; }
.agree { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; margin-bottom: 12px; }
.agree input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
dialog.confirm .hint-text { display: block; margin-bottom: 18px; }
dialog.confirm .row-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- sign in / create account ---------- */
.auth-split { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 56px; align-items: center; }
.auth-aside h2 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.02; margin: 0 0 24px; }
.auth-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; color: var(--ink-2); max-width: 28em; }
.auth-aside li { padding-left: 22px; position: relative; }
.auth-aside li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--hot); }
.auth-aside b { color: var(--ink); }
.social a.off { opacity: .6; cursor: not-allowed; }
.social a.off:hover { border-color: var(--line-2); }
.social-note { font-size: 13px; color: var(--ink-3); margin: 10px 2px 0; }
.field-err { display: block; color: #b4281b; font-size: 13.5px; margin-top: 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-err { color: #ff8f7e; } }
.input[aria-invalid="true"] { border-color: #b4281b; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-width: 64px; min-height: 40px; border: 0; background: transparent; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; border-radius: 10px; }
.meter { display: block; height: 4px; border-radius: 999px; background: var(--line); margin-top: 8px; overflow: hidden; }
.meter u { display: block; height: 100%; width: 0; background: var(--hot); text-decoration: none; transition: width .2s; }
.meter u.ok { background: #d9a21b; } .meter u.good { background: var(--accent); }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; gap: 28px; justify-items: center; } .auth-aside { display: none; } .auth-card { max-width: 440px; } }

[hidden] { display: none !important; }

/* states list has no flag column: label fills the row and the switch sits on the right */
.rows.st .toggle-row { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 14px; }
.rows.st .toggle-row b { font-size: 15px; }

/* ================= Workspace: sample page and My map =================
   One screen: stats ribbon on top, country list on the left, the map filling the rest,
   and a detail drawer that slides over the map the moment a country is picked. */
body.wsb .nav .wrap { max-width: none; padding: 0 clamp(16px, 2.2vw, 36px); }
.ws {
  width: 100%; padding: 0 clamp(16px, 2.2vw, 36px);
  --map-ocean: #b9dce0; --map-land: #f3efe2; --map-border: #d9d3bf; --map-grat: rgba(11,123,133,.12);
  --c-location: #0f8b8d; --c-email: #5b6cf2; --c-photos: #f4845f; --c-manual: #b565d9; --map-home: #086a73;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws {
  --map-ocean: #0b2f3b; --map-land: #1f5563; --map-border: #0b2f3b; --map-grat: rgba(255,255,255,.06);
  --c-location: #3dd6d0; --c-email: #8e9bff; --c-photos: #ff9a76; --c-manual: #d49bff; --map-home: #6fe3ea;
} }
:root[data-theme="dark"] .ws { --map-ocean: #0b2f3b; --map-land: #1f5563; --map-border: #0b2f3b; --c-location: #3dd6d0; --c-email: #8e9bff; --c-photos: #ff9a76; --c-manual: #d49bff; --map-home: #6fe3ea; }

.ws .app-top { padding: 20px 0 0; }
.ws .app-top .row { align-items: end; margin-top: 10px !important; }
.ws .app-top h1, .ws .app-head h1 { font-size: clamp(30px, 3.2vw, 46px); margin: 6px 0 2px; }
.ws .app-top .lede { font-size: 15px; max-width: 64em; margin: 0; }
.ws .back { margin-bottom: 0; }

.ws .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 14px; }
.ws .stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 0; align-items: center; padding: 12px 16px 12px; }
.ws .stat b { grid-row: 1 / span 2; font-size: 32px; align-self: center; white-space: nowrap; }
.ws .stat span { margin: 0; min-height: 0; font-size: 13px; line-height: 1.3; align-self: end; }
.ws .stat .bar { margin: 8px 0 0; align-self: start; }

.ws-body { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "side map"; gap: 14px; height: clamp(620px, calc(100vh - 250px), 1000px); }
.ws .side { grid-area: side; min-height: 0; max-height: none; height: 100%; }
.ws .mapcard { grid-area: map; min-height: 0; height: 100%; border-radius: 20px; display: block; background: var(--map-ocean); border-color: transparent; }
.ws .stage { position: absolute; inset: 0; height: auto; flex: none; min-height: 0; background: var(--map-ocean); }

/* legend and globe/flat switch float over the map, top-left */
.ws .maptools { position: absolute; z-index: 4; top: 14px; left: 14px; right: 76px; padding: 0; border: 0; background: none; pointer-events: none; gap: 8px 10px; }
.ws .maptools > * { pointer-events: auto; }
.ws .seg, .ws .chip { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(11,35,50,.14); }
.ws .chips { margin-left: 0; gap: 8px; }
.ws .chip { border-color: transparent; }
.ws .zoom { top: 14px; right: 14px; z-index: 6; }
.ws .zoom button { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); border-color: transparent; }
.ws .hint { left: 50%; transform: translateX(-50%); bottom: 14px; }

/* detail drawer: slides over the right side of the map */
.ws .info {
  display: block; position: absolute; z-index: 5; top: 62px; right: 66px; bottom: 12px; width: min(430px, calc(100% - 96px)); margin: 0; overflow: auto; overscroll-behavior: contain;
  padding: 0; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 60px -12px rgba(8, 28, 40, .45);
  transform: translateX(calc(100% + 90px)); opacity: 0; visibility: hidden; transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .2s, visibility 0s .32s;
}
.ws .info.on { transform: none; opacity: 1; visibility: visible; transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.d-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.d-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; }
.d-head .sub { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.d-head .x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-2); flex: none; }
.d-head .x:hover { background: var(--line); }
.d-head img.flag.big { width: 52px; height: 39px; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.d-facts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 14px 18px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.d-facts div { padding: 10px 6px; text-align: center; background: var(--surface-2); }
.d-facts div + div { border-left: 1px solid var(--line); }
.d-facts b { display: block; white-space: nowrap; font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.d-facts span { font-size: 12px; color: var(--ink-3); }
.d-sel { margin: 12px 18px 0; padding: 9px 12px; border-radius: 10px; background: var(--accent-soft); display: flex; justify-content: space-between; font-size: 14px; }
.d-sec { padding: 16px 18px 4px; }
.d-sec h4 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 9px; }
.d-sec h4 small { color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.d-year { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); margin: 14px 0 8px; }
.vcard { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; background: var(--surface); }
.v-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v-top b { font-size: 15px; font-weight: 600; }
.v-trip { display: inline-block; margin: 6px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; }
.vcard .stay-meta, .stay .stay-meta { font-size: 13.5px; margin-top: 7px; color: var(--ink-2); }
.vcard .stay-meta.muted { color: var(--ink-3); }
.vcard .stay-cities { margin-top: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); margin: 0 5px 5px 0; }
.pchip small { color: var(--ink-3); }
.stay-notes { margin-top: 9px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.stay-notes .nt { margin: 6px 0 0; }
.stay-notes .nl { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 10px; margin-top: 7px; }
.stay-notes .nl b { font-size: 12px; font-weight: 600; color: var(--ink-3); padding-top: 1px; }
.stay-notes .nl ul { margin: 0; padding-left: 16px; }
.stay-notes .nl li { margin: 0 0 3px; }
details.more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 8px; list-style: none; }
details.more > summary::before { content: "▸ "; }
details.more[open] > summary::before { content: "▾ "; }

/* country list: roomier rows with the years you were there */
.ws .panel { padding: 12px 12px 18px; }
.ws .row-btn { grid-template-columns: 40px 1fr auto; padding: 8px 10px; border-radius: 12px; }
.ws .row-btn img.flag { width: 36px; height: 27px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.ws .row-btn:hover { background: var(--surface-2); }
.ws .row-btn[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.ws .tabs { padding: 8px 8px 0; }

@media (max-width: 1000px) {
  .ws .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-body { grid-template-columns: 1fr; grid-template-areas: "map" "side"; height: auto; }
  .ws .mapcard { height: 68vh; min-height: 440px; }
  .ws .side { height: 560px; }
  .ws .maptools { right: 14px; top: 10px; }
  .ws .zoom { top: auto; bottom: 14px; right: 14px; }
  .ws .hint { display: none; }
  .ws .info { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 62%; transform: translateY(calc(100% + 20px)); }
}
.ws .stay-notes { background: none; border: 0; padding: 0; border-radius: 0; }
.ws .stay-notes ul { display: block; margin: 0; padding-left: 16px; list-style: disc; }
.ws .stay-notes li { display: list-item; border: 0; background: none; border-radius: 0; padding: 0; margin: 0 0 4px; font-size: 13.5px; }

@media (max-width: 640px) {
  .ws .stats { gap: 8px; }
  .ws .stat { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 12px 14px; }
  .ws .stat b { grid-row: auto; font-size: 28px; }
  .ws .stat span { margin-top: 2px; min-height: 2.6em; }
  .ws .stat .bar { margin-top: 6px; }
  .ws .mapcard { height: 72vh; min-height: 460px; }
}

.ws .stats .stat, .ws .stats .stat:nth-last-child(-n+2) { grid-column: auto; }

@media (max-width: 1000px) { .ws .chips { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; } .ws .chip { padding: 4px 10px; font-size: 12.5px; min-height: 30px; } }

.v-place { margin: 7px 0 0; font-size: 15px; font-weight: 600; }

.lives { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.field .hint-text { font-weight: 400; }

/* the picked country or state is outlined in gold */
.ws, :root[data-theme="dark"] .ws { --map-select: #ffc928; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws { --map-select: #ffd54a; } }

.searchrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.searchrow .search { margin-bottom: 0; flex: 1; min-width: 0; }
.us-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); white-space: nowrap; cursor: pointer; min-height: 44px; }
.us-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.area-toggle { display: inline-flex; align-items: center; gap: 4px 14px; flex: none; flex-wrap: nowrap; white-space: nowrap; }`r`n.area-toggle .us-toggle { flex: none; }`r`n.stat.off { opacity: .4; }
.area-toggle .us-toggle input:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 420px) { .searchrow { flex-wrap: wrap; gap: 0 12px; } .searchrow .search { flex-basis: 100%; margin-bottom: 4px; } }

/* ================= Layout v2: slimmer list panel that can dock left or right, drawer beside it, account menu ================= */
.ws-body { grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "side map"; height: clamp(640px, calc(100vh - 230px), 1100px); }
.ws-body[data-dock="right"] { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "map side"; }
.ws .side { position: relative; }
.ws .side.dragging { z-index: 30; opacity: .92; box-shadow: 0 28px 70px -10px rgba(8, 28, 40, .5); transition: none; pointer-events: none; }
.grip { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 30px; padding: 4px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font: 600 12px/1 var(--font-ui); cursor: grab; touch-action: none; border-radius: 16px 16px 0 0; }
.grip:hover { color: var(--ink); background: var(--line); }
.grip:active { cursor: grabbing; }
.ws .tabs { padding: 6px 6px 0; }
.ws .tabs button { font-size: 13px; padding: 8px 4px; min-height: 38px; }
.ws .panel { padding: 10px 10px 14px; }
.ws .search { min-height: 40px; font-size: 14px; }
.ws .row-btn { grid-template-columns: 34px 1fr auto; padding: 6px 8px; min-height: 44px; gap: 9px; }
.ws .row-btn img.flag { width: 30px; height: 22px; }
.ws .row-btn b { font-size: 14px; }
.ws .row-btn small { font-size: 12px; }
.ws .cont-head b { font-size: 12px; }
.ws .trip-row b { font-size: 14px; }

/* drop zones while dragging the panel */
.dz { display: none; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 20; border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--accent) 6%, transparent); pointer-events: none; place-items: center; color: var(--accent); font-weight: 600; font-size: 15px; }
.dz-left { left: 0; } .dz-right { right: 0; }
.ws-body.dropzones .dz { display: grid; }
.ws-body.dropzones[data-target="left"] .dz-left, .ws-body.dropzones[data-target="right"] .dz-right { background: color-mix(in srgb, var(--accent) 16%, transparent); border-style: solid; }

/* legend sits along the bottom of the map; the details drawer starts near the top, beside the list */
.ws .maptools { top: auto; bottom: 14px; left: 14px; right: 76px; align-items: flex-end; }
.ws .hint { top: 14px; bottom: auto; left: 14px; transform: none; }
.ws .mapcard:has(.info.on) .hint { display: none; }
.ws .info { top: 14px; bottom: 12px; left: 12px; right: auto; width: min(430px, calc(100% - 96px)); transform: translateX(calc(-100% - 40px)); }
.ws-body[data-dock="right"] .info { left: auto; right: 66px; transform: translateX(calc(100% + 90px)); }
.ws .info.on, .ws-body[data-dock="right"] .info.on { transform: none; }
.ws-body[data-dock="left"] .mapcard:has(.info.on) .maptools { left: 456px; }
.ws-body[data-dock="right"] .mapcard:has(.info.on) .maptools { right: 520px; }

/* account menu */
.userbar { margin-left: auto; }
.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 12px 4px 5px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 14px var(--font-ui); cursor: pointer; text-decoration: none; }
.acct-btn:hover { border-color: var(--ink-3); }
.acct-btn #who { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 250px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 60px -12px rgba(8, 28, 40, .35); }
.acct-menu[hidden] { display: none; }
.acct-id { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-id b { display: block; font-size: 15px; }
.acct-id small { color: var(--ink-3); font-size: 12.5px; word-break: break-all; }
.acct-menu [role=menuitem] { display: block; width: 100%; text-align: left; padding: 10px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 500 14.5px var(--font-ui); cursor: pointer; text-decoration: none; min-height: 40px; }
.acct-menu [role=menuitem]:hover, .acct-menu [role=menuitem]:focus-visible { background: var(--surface-2); outline: none; }
dialog.acct-dlg { width: min(520px, calc(100vw - 24px)); }
.acct-body { padding: 16px 20px 22px; overflow: auto; max-height: calc(100vh - 110px); }

@media (max-width: 1000px) {
  .ws-body, .ws-body[data-dock] { grid-template-columns: 1fr; grid-template-areas: "map" "side"; height: auto; }
  .grip, .dz { display: none !important; }
  .ws .maptools, .ws-body[data-dock] .mapcard:has(.info.on) .maptools { top: 10px; bottom: auto; left: 14px; right: 14px; }
  .ws .info, .ws-body[data-dock="right"] .info { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 62%; transform: translateY(calc(100% + 20px)); }
  .ws .info.on, .ws-body[data-dock="right"] .info.on { transform: none; }
  .ws .hint { top: auto; bottom: 14px; display: none; }
  .acct-btn #who { max-width: 12ch; }
}
/* v3: Globe/Flat and the colour legend are back along the top of the map; only the details drawer moves */
.ws .maptools { top: 14px; bottom: auto; left: 14px; right: 76px; align-items: center; }
.ws .hint { top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); }
.ws .mapcard:has(.info.on) .hint { display: none; }
.ws .info, .ws-body[data-dock="right"] .info { top: 68px; bottom: 12px; left: 12px; right: auto; transform: translateX(calc(-100% - 40px)); }
.ws .info.on, .ws-body[data-dock="right"] .info.on { transform: none; }
.ws .info.moved { transform: none; }
.ws .info.moved:not(.on) { opacity: 0; visibility: hidden; }
.ws .info.dragging { transition: none; box-shadow: 0 30px 70px -10px rgba(8, 28, 40, .55); user-select: none; }
.ws .info .d-head { cursor: grab; touch-action: none; }
.ws .info.dragging .d-head { cursor: grabbing; }
.ws-body[data-dock] .mapcard:has(.info.on) .maptools { left: 14px; right: 76px; }
@media (max-width: 1000px) { .ws .info .d-head { cursor: default; } .ws .info.moved { top: auto; left: 8px; right: 8px; bottom: 8px; height: 62% !important; } .ws .hint { display: none; } }
.searchrow { gap: 8px; }
.us-toggle { gap: 5px; font-size: 12.5px; }

/* My map: the title sits in the top bar next to the logo, and the stats share a row with the actions */
.nav-title { display: flex; flex-direction: column; justify-content: center; margin-left: 6px; padding-left: 18px; border-left: 1px solid var(--line-2); line-height: 1.15; min-width: 0; }
.nav-title h1 { font-size: 24px; margin: 0; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-title .lives { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws .app-top { padding: 14px 0 0; }
.top-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; }
.top-row .stats { margin: 0 0 14px; }
.top-row .app-actions { display: flex; flex-direction: column; justify-content: center; gap: 8px; margin: 0 0 14px; }
.top-row .app-actions .btn { white-space: nowrap; }
@media (max-width: 1000px) { .top-row { grid-template-columns: 1fr; } .top-row .app-actions { flex-direction: row; margin: 0 0 14px; } .nav-title h1 { font-size: 20px; } }
@media (max-width: 640px) { .nav-title { padding-left: 10px; } .nav-title .lives { display: none; } }
body.wsb:has(.nav-title) .ws-body { height: clamp(640px, calc(100vh - 186px), 1200px); }

/* separate pages: Add visit and Manage visits */
.subnav { display: flex; gap: 4px; margin-left: 18px; }
.subnav a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.subnav a:hover { background: var(--surface-2); color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.sub-main { padding-top: 22px; padding-bottom: 72px; }
.sub-main .intake-card { margin-bottom: 0; }
.manage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.manage-bar .searchrow { flex: 1 1 360px; margin: 0; }
.manage-count { color: var(--ink-3); font-size: 14px; min-width: 12em; white-space: nowrap; }
html { scrollbar-gutter: stable; }
.manage-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; align-items: start; }
.manage-list .year { grid-column: 1 / -1; margin: 14px 0 0 2px; }
.manage-list .stay { margin: 0; }
.del-visit { margin-left: auto; }
.app-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-actions .btn:last-child { grid-column: 1 / -1; }
@media (max-width: 760px) { .subnav { display: none; } .manage-list { grid-template-columns: 1fr; } }
/* trips with several countries are stacked: the trip, then one chip per country */
.trip-card { margin: 0 0 4px; }
.trip-card .trip-row { margin: 0; }
.trip-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px 34px; }
.trip-sub { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 12.5px var(--font-ui); cursor: pointer; min-height: 30px; }
.trip-sub:hover { border-color: var(--accent); background: var(--accent-soft); }
.trip-sub img.flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; }
.d-head .flags { display: flex; flex: none; }
.d-head .flags img.flag.big + img.flag.big { margin-left: -14px; }
.d-head .flags img.flag.big { width: 46px; height: 34px; border-radius: 6px; box-shadow: 0 0 0 2px var(--surface); object-fit: cover; }
.d-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 18px 0; padding-bottom: 2px; }
.d-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 600 13.5px var(--font-ui); cursor: pointer; min-height: 36px; }
.d-tabs button img.flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; }
.d-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.d-all { margin: 4px 0 14px; }
/* theme switch under the name in the account menu */
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.theme-row > span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.theme-seg button { padding: 5px 11px; min-height: 30px; font-size: 12.5px; }.userbar .theme-seg button { text-decoration: none; font-weight: 600; color: var(--ink-2); background: transparent; border-radius: 999px; padding: 5px 11px; }
.userbar .theme-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.theme-row { flex-wrap: wrap; }
/* days per visit, trip links and the edit-trip window */
.v-days { color: var(--ink-3); font-weight: 500; }
.d-tabs button small { font-weight: 500; opacity: .75; margin-left: 4px; }
.d-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.v-trip-link { margin-top: 10px; }
dialog.trip-dialog { width: min(760px, calc(100vw - 24px)); }
.trip-edit { padding: 16px 20px 24px; overflow: auto; max-height: calc(100vh - 110px); }
.trip-name-row { display: flex; gap: 10px; margin-top: 6px; }
.trip-name-row .input { flex: 1; }
.trip-visit { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.trip-visit h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 6px; }
.trip-visit h3 small { margin-left: auto; font-weight: 500; color: var(--ink-3); font-size: 13px; }
.trip-visit h3 img.flag { width: 28px; height: 21px; border-radius: 4px; object-fit: cover; }
/* Visit and Trip are different things: a visit is one stay in one country or state; a trip groups visits */
.kind { display: inline-block; padding: 2px 9px; margin-right: 8px; border-radius: 999px; font: 700 11px/1.5 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.kind-trip { background: var(--accent); color: #fff; }
.kind-visit { border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface-2); }
.d-note { margin: 10px 18px 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.d-top { margin: 12px 18px 0; }
.d-top.back { margin-top: 12px; }
.vcard.click { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vcard.click:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.v-top { gap: 8px; }
.v-top b { margin-right: auto; }
.v-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.d-tripbox { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); display: grid; gap: 4px; justify-items: start; }
.d-tripbox b { font-size: 15px; }
.d-tripbox small { color: var(--ink-3); }
.d-tripbox .btn { margin-top: 6px; }
/* trip categories and people */
.kind-cat { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.kind-none { border: 1px dashed var(--line-2); color: var(--ink-3); background: transparent; }
.d-people { margin: 10px 18px 0; font-size: 13.5px; }
.d-people b { margin-right: 6px; color: var(--ink-2); }
.page-note { color: var(--ink-2); font-size: 14.5px; margin: 0 0 14px; max-width: 70ch; }
.cat-filter { min-width: 180px; max-width: 220px; min-height: 40px; }
.manage-list.trips-grid .stay { margin: 0; }
.trip-card-m .v-top { flex-wrap: wrap; }
.trip-card-m .v-top b { flex: 1 1 auto; font-size: 16px; }
.people-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; align-items: start; }
.pcard { padding: 22px 22px 26px; }
.pcard h2 { font-size: 22px; margin-bottom: 4px; }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.add-row .input { flex: 1 1 160px; min-width: 0; min-height: 42px; }
.plist { margin-top: 12px; }
.prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.prow .input { flex: 1 1 150px; min-width: 0; min-height: 40px; }
.prow select.input { flex: 0 1 150px; }
.pcount { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.pgroup { margin: 18px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pgroup small { font-weight: 500; margin-left: 4px; }
.people-page .search { margin: 10px 0 0; }
@media (max-width: 900px) { .people-cols { grid-template-columns: 1fr; } }
/* the trip editor's category and people block */
.trip-meta { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.trip-meta h3 { font-size: 16px; margin: 0 0 4px; }
.trip-meta .field { margin: 12px 0; }
.trip-meta .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tm-newcat, .tm-add { display: flex; gap: 8px; margin: 8px 0; }
.tm-newcat .input, .tm-add .input { flex: 1; min-height: 40px; }
.tm-group { margin: 10px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tm-checks { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.tm-check { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 14px; cursor: pointer; min-height: 38px; }
.tm-check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.tm-check input { width: 17px; height: 17px; accent-color: var(--accent); }
.tv-head { margin: 22px 0 0; font-size: 17px; }
.subnav { flex-wrap: wrap; }
/* groups as chips under "Who did you go with?" */
.tm-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tm-chip { padding: 7px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 600 14px var(--font-ui); cursor: pointer; min-height: 40px; }
.tm-chip:hover { border-color: var(--accent); }
.tm-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tm-add-chip { border-style: dashed; background: transparent; color: var(--ink-3); }
/* Edit trip stays small; Add trip; visits listed with an Edit visit button */
.trip-lead { margin: 0 0 12px; max-width: 60ch; }
.trip-edit .field { margin: 14px 0; }
.trip-edit textarea.input { min-height: 96px; font-family: var(--font-ui); font-size: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tv-list { margin-top: 8px; }
.tv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tv-row img.flag { width: 30px; height: 22px; border-radius: 4px; object-fit: cover; flex: none; }
.tv-name { flex: 1; min-width: 0; }
.tv-name b { display: block; font-size: 15px; }
.tv-name small { color: var(--ink-3); font-size: 13px; }
.tv-add { display: flex; gap: 8px; margin-top: 12px; }
.tv-add .input { flex: 1; min-height: 42px; }
.at-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.at-chosen .pchip button { border: 0; background: transparent; cursor: pointer; color: var(--ink-3); font-size: 16px; line-height: 1; padding: 0 0 0 4px; }
.d-flights { margin: 10px 18px 0; }
.d-flights ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.d-flights li { margin: 0 0 4px; }
/* trips group their visits */
.sec-h { font-size: 18px; margin: 26px 0 12px; }
.sec-h small { color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.mback { margin: 0 0 14px; }
.trip-block { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 16px; background: var(--surface); margin: 0 0 18px; padding: 18px 20px 20px; }
.tb-head { display: grid; gap: 8px; }
.tb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tb-title { margin: 0; font: 400 26px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-align: left; }
.tb-link { border: 0; background: transparent; padding: 0; cursor: pointer; }
.tb-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.tb-meta { color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.tb-desc { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 90ch; }
.tb-desc.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tb-flights ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.tb-head .stay-actions { display: flex; gap: 8px; margin-top: 4px; }
.tb-visits { margin: 16px 0 0 10px; padding-left: 18px; border-left: 2px dashed var(--line-2); display: grid; gap: 12px; }
.tb-visits .stay { margin: 0; position: relative; }
.tb-visits .stay::before { content: ""; position: absolute; left: -20px; top: 22px; width: 18px; border-top: 2px dashed var(--line-2); }
.tb-visits .stay { background: var(--surface-2); }
/* two columns again: single visits are plain cards, trips with several visits span the width */
.manage-list .trip-block { grid-column: 1 / -1; margin: 0; }
.tb-visits { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
@media (max-width: 760px) { .tb-visits { grid-template-columns: 1fr; } }
/* visits inside a trip stay in two columns too */
.tb-visits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 6px; padding-left: 14px; }
.tb-visits .stay::before { left: -16px; width: 14px; }
@media (max-width: 760px) { .tb-visits { grid-template-columns: 1fr; } }
/* one scroll bar only: the dialog scrolls, nothing inside it does */
.trip-edit, .acct-body { overflow: visible; max-height: none; }
dialog.vdialog .wb-dlg-head, dialog.acct-dlg .wb-dlg-head { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.trip-edit textarea.input { field-sizing: content; min-height: 96px; max-height: 45vh; }
/* the window is the only thing that scrolls; text boxes grow instead of scrolling */
.trip-edit, .acct-body { overflow: visible !important; max-height: none !important; }
.trip-edit textarea.input { overflow: hidden; resize: none; }
/* the visit form: notes grow instead of scrolling; the trip is shown, and managed from the trip */
dialog.vdialog .vform textarea.input, .vform textarea.input { overflow: hidden; resize: none; min-height: 96px; }
.tripbox .tripline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: var(--accent-soft); }
.tripbox .tripline b { font-size: 15px; }
/* the account button is just a round icon with the first letter, on every screen size */
.acct-btn { width: 44px; height: 44px; min-height: 0; padding: 0; gap: 0; justify-content: center; border: 0; border-radius: 50%; background: transparent; text-decoration: none; }
.acct-btn #who, .acct-btn > svg { display: none !important; }
.acct-btn .avatar { width: 40px; height: 40px; font-size: 17px; flex: none; border-radius: 50%; }
.acct-btn:hover .avatar, .acct-btn[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px var(--accent-soft); }
.acct-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.userbar .acct-btn, .userbar .acct-btn .avatar { text-decoration: none; }

/* the trip and its days sit on top of a visit */
.tripctx { margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: var(--accent-soft); display: grid; gap: 4px; }
.tbx-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbx-line b { font-size: 16px; margin-right: auto; }
.tbx-dates { font-size: 15px; font-weight: 600; color: var(--ink); }
.d-tripbox.top { margin: 12px 18px 0; }
.d-tripbox .tbx-line { width: 100%; }
/* trip drawer: title across the full width, close button on top, dates in a card */
.d-head.trip { align-items: flex-start; gap: 12px; padding: 18px 18px 8px; border-bottom: 0; }
.d-head.trip h3 { flex: 1; min-width: 0; font-size: 28px; line-height: 1.1; }
.d-head.trip .x { margin-left: 0; }
.d-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 18px; }
.d-badges .kind { margin-right: 0; }
.d-datecard { margin: 14px 18px 0; padding: 14px 16px 16px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: var(--accent-soft); }
.dc-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dc-dates { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.dc-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 12px; border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); padding-top: 12px; }
.dc-stats div { text-align: left; }
.dc-stats div + div { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.dc-stats b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-stats span { font-size: 13px; color: var(--ink-2); }
.dc-with { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); font-size: 14px; }
.dc-with span { color: var(--ink-3); font-weight: 600; margin-right: 8px; }
/* compact version of the trip dates card */
.d-datecard { margin: 10px 18px 0; padding: 9px 12px 10px; border-radius: 12px; }
.dc-label { display: none; }
.dc-dates { margin: 0; font-size: 17px; line-height: 1.25; }
.dc-stats { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; padding-top: 0; border-top: 0; }
.dc-stats div, .dc-stats div + div { display: inline-flex; align-items: baseline; gap: 4px; padding-left: 0; border-left: 0; }
.dc-stats b { display: inline; font-size: 14.5px; }
.dc-stats span { font-size: 13px; }
.dc-with { margin-top: 3px; padding-top: 0; border-top: 0; font-size: 13.5px; }
.d-head.trip { padding-bottom: 4px; }
.d-head.trip h3 { font-size: 25px; }
/* where a visit sits inside its trip: a thin bar for the whole trip, filled for this visit */
.tbar { position: relative; height: 8px; margin: 8px 0 2px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); overflow: hidden; width: 100%; }
.tbar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.tbar-l { display: flex; justify-content: space-between; width: 100%; font-size: 11.5px; color: var(--ink-3); }
.d-tripbox.top { justify-items: stretch; }
.d-tripbox.top .btn { justify-self: start; }
/* slider with two handles over the trip's days */
.rs-wrap { margin: 6px 0 4px; }
.rs { position: relative; height: 34px; }
.rs-track { position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.rs-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.rs input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 34px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.rs input[type=range]::-webkit-slider-runnable-track { background: none; height: 34px; }
.rs input[type=range]::-moz-range-track { background: none; }
.rs input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 6px; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: grab; }
.rs input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: grab; }
.rs input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-labels { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-2); }
.rs-labels b { color: var(--ink); font-size: 13.5px; }
/* the trip's thin line, coloured by where each visit's data came from */
.tline { position: relative; height: 9px; margin: 12px 18px 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.tline i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: opacity .2s; }
.tline i.off { opacity: .12; }
.tline-l { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 5px 18px 0; font-size: 12px; color: var(--ink-3); }
.tline-l span { display: inline-flex; align-items: center; gap: 6px; }
.tline-l i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.v-ctry { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.v-ctry img.flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; }
.v-ctry b { font-size: 15px; }
/* phones: the details are a full-screen sheet; a thin strip of map shows on top and scrolling up reveals more of it */
@media (max-width: 1000px) {
  .ws .info, .ws-body[data-dock="right"] .info, .ws .info.moved {
    position: fixed; z-index: 70; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto !important; margin: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .ws .info .peek { height: 78vh; height: 78svh; }
  .ws .info .sheet { position: relative; min-height: calc(100vh - 30px); min-height: calc(100svh - 30px); background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 32px rgba(8, 28, 40, .3); padding-bottom: 40px; }
  .ws .info .grab { width: 44px; height: 5px; border-radius: 999px; background: var(--line-2); margin: 8px auto 0; }
  .ws .info .sheet .d-head { background: var(--surface); border-radius: 20px 20px 0 0; }
}

/* year line on the right. Every year has an equal slot, so the line never shifts; the labels grow smoothly toward the year you are in. On phones it fades away and a big year pops up in the middle while you scroll */
.ylayout { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; align-items: start; }
.yrail { position: sticky; top: 84px; height: calc(100vh - 110px); max-height: 680px; display: flex; flex-direction: column; border-left: 2px solid var(--line-2); cursor: grab; user-select: none; touch-action: none; }
.yrail.drag { cursor: grabbing; }
.yrail .yr { flex: 1 1 0; min-height: 0; display: flex; align-items: center; padding-left: 14px; }
.yrail .yr span { display: block; font-size: 12px; line-height: 1; font-weight: 600; color: var(--ink-3); transform-origin: left center; will-change: transform; }
.yrail .yr span.on { color: var(--ink); font-weight: 700; }
.yrail .ythumb { position: absolute; left: -6px; top: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); pointer-events: none; }
.manage-list .year { scroll-margin-top: 96px; }
.ypop { display: none; }
@media (max-width: 760px) {
  .ylayout { display: block; }
  .yrail { position: fixed; right: 0; top: 72px; bottom: 20px; height: auto; max-height: none; z-index: 60; width: 62px; border: 0; border-radius: 18px 0 0 18px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: -6px 0 22px rgba(8,28,40,.2); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transform: translateX(16px); transition: opacity .22s ease, transform .22s ease; }
  .yrail.show, .yrail.drag { opacity: 1; transform: none; pointer-events: auto; }
  .yrail .yr { padding-left: 12px; }
  .yrail .ythumb { left: 2px; }
  .yrail .yr span { will-change: auto; font-size: 12px; } .yrail .yr span.on { font-weight: 800; color: var(--ink); }
  .ypop { display: block; position: fixed; left: 50%; top: 44%; z-index: 61; transform: translate(-50%, -50%) scale(.9); padding: 16px 38px; border-radius: 24px; font: 800 56px/1 Montserrat, Inter, sans-serif; letter-spacing: .01em; color: #fff; background: rgba(8,28,40,.8); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
  .ypop.show { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) { .yrail, .ypop { transition: none; } }
/* My map on desktop: the map page fits the window. The slim stats strip sits on top, the list and the map fill the rest, and the list and the details panel scroll inside themselves, so the page never needs scrolling to see a full panel */
@media (min-width: 1001px) {
  body.wsb:has(main.ws.fit) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; }
  body.wsb:has(main.ws.fit) > .nav { flex: none; }
  main.ws.fit { flex: 1 1 auto; min-height: 560px; display: flex; flex-direction: column; padding-bottom: 14px; }
  main.ws.fit .app-top { flex: none; padding: 10px 0 0; }
  main.ws.fit .top-row { gap: 10px; }
  main.ws.fit .top-row .stats { margin: 0 0 10px; gap: 8px; }
  main.ws.fit .top-row .app-actions { flex-direction: row; margin: 0 0 10px; gap: 8px; align-items: center; }
  main.ws.fit .top-row .app-actions .btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
  main.ws.fit .stat { padding: 7px 14px; column-gap: 12px; border-radius: 14px; }
  main.ws.fit .stat b { font-size: 26px; line-height: 1; }
  main.ws.fit .stat b small { font-size: 13px; }
  main.ws.fit .stat span { font-size: 12.5px; line-height: 1.2; }
  main.ws.fit .stat .bar { margin: 5px 0 0; height: 4px; }
  main.ws.fit .ws-body, body.wsb:has(.nav-title) main.ws.fit .ws-body { flex: 1 1 auto; height: auto; min-height: 0; }
  main.ws.fit .side, main.ws.fit .mapcard { height: 100%; min-height: 0; }
  main.ws.fit .info { top: 62px; bottom: 12px; }
}
@media (min-width: 1001px) and (max-width: 1280px) { main.ws.fit .top-row { grid-template-columns: 1fr; } main.ws.fit .top-row .app-actions { margin: 0 0 10px; } }
/* My map: the buttons live in the top bar next to the other pages, so the stats strip can use the whole row */
.top-row { grid-template-columns: minmax(0, 1fr) !important; }
.userbar .nav-share { text-decoration: none; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 0 16px; min-height: 40px; font-weight: 600; font-size: 14px; }
.userbar .nav-share:hover { background: var(--surface-2); }
.acct-menu .m-only { display: none; }
@media (max-width: 760px) { .nav-share { display: none; } .acct-menu .m-only { display: block; } }
/* top bar: the page title on the left; the page buttons, Share card and your avatar line up on the right, in the same order on every page */
.nav .wrap .subnav { margin-left: auto; margin-right: 0; flex-wrap: nowrap; white-space: nowrap; }
.nav .wrap .userbar { margin-left: 4px; }
.nav .wrap .nav-title { flex: 0 1 auto; min-width: 0; }
/* full-screen button on the detail cards: the card fills the whole map section */
.d-head .d-full { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); cursor: pointer; color: var(--ink-2); flex: none; display: grid; place-items: center; }
.d-head .d-full:hover { background: var(--line); color: var(--ink); }
.d-head .d-full + .x { margin-left: 0; }
.d-head.trip .d-full { margin-left: 0; }
@media (min-width: 1001px) {
  .ws .info.full, .ws-body[data-dock="right"] .info.full, .ws .info.moved.full { top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; border-radius: 20px; transform: none; z-index: 50; }
  .ws .info.full > * { max-width: 980px; margin-left: auto; margin-right: auto; }
  .ws .info.full .d-head { cursor: default; }
  .ws .info.full .d-head h3 { font-size: 34px; }
  .ws .mapcard:has(.info.full) .maptools, .ws .mapcard:has(.info.full) .zoom { visibility: hidden; }
}
@media (max-width: 1000px) { .d-head .d-full { display: none; } .d-head .d-full + .x { margin-left: auto; } }
/* detail card facts: one slim line (visits, cities, years, days) instead of a tall grid */
.d-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 8px 18px 0; border: 0; border-radius: 0; overflow: visible; font-size: 13.5px; color: var(--ink-2); }
.d-facts div { display: inline-flex; align-items: baseline; gap: 4px; padding: 0; text-align: left; background: none; }
.d-facts div + div { border-left: 0; }
.d-facts div + div::before { content: "\00b7"; margin: 0 9px; color: var(--ink-3); font-weight: 700; }
.d-facts b { display: inline; font-size: 14.5px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.d-facts span { font-size: 13.5px; color: var(--ink-2); }
.d-head { padding-bottom: 10px; }
/* edit and add dialogs: the corners stay rounded on both sides (the body scrolls inside, so the scroll bar no longer cuts the right corners), and a Back button sits at the left of the header */
dialog.vdialog { overflow: hidden; }
dialog.vdialog[open] { display: flex; flex-direction: column; }
dialog.vdialog > .vbody, dialog.vdialog > .trip-edit { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
dialog.vdialog .wb-dlg-head { flex: none; justify-content: flex-start; gap: 12px; }
dialog.vdialog .wb-dlg-head h2 { flex: 1; min-width: 0; }
.wb-dlg-back { flex: none; border: 0; background: var(--surface-2); color: var(--ink); border-radius: 999px; min-height: 38px; padding: 0 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.wb-dlg-back:hover { background: var(--line); }
/* Visits and trips uses the whole browser window; the year line on the right has room to grow */
main.sub-main.wide { max-width: none; width: 100%; padding-left: clamp(16px, 2.2vw, 36px); padding-right: clamp(16px, 2.2vw, 36px); }
main.sub-main.wide .ylayout { grid-template-columns: minmax(0, 1fr) 104px; gap: 18px; }
main.sub-main.wide .manage-list { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
@media (max-width: 760px) { main.sub-main.wide .ylayout { display: block; } }
/* the trip line and country tabs inside a trip block on Visits and trips */
.tb-line .tline, .tb-line .tline-l { margin-left: 0; margin-right: 0; }
.tb-head .d-tabs { margin: 4px 0 0; }
.trip-block.full .tline { height: 12px; }
/* trip line with days: each segment shows its days, and the ends show the dates and the total */
.tline { height: 20px; }
.tline i { display: grid; place-items: center; overflow: hidden; }
.tline i b { font-size: 11px; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); white-space: nowrap; padding: 0 4px; }
.tline-ax { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 5px 18px 0; font-size: 12px; color: var(--ink-3); }
.tline-ax b { color: var(--ink); font-weight: 700; font-size: 12.5px; }
.tb-line .tline-ax { margin-left: 0; margin-right: 0; }
.trip-block.full .tline { height: 24px; }
.trip-block.full .tline i b { font-size: 12px; }
.tb-meta b { color: var(--ink); }
/* one place for visit actions everywhere: a row at the bottom left of the card, with a faint divider, Edit visit first, then Edit trip, then See the entire trip */
.stay .stay-actions, .vcard .v-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tb-head .stay-actions { margin-top: 4px; padding-top: 0; border-top: 0; }
.stay .stay-actions .btn, .vcard .v-actions .btn { min-height: 32px; }

/* Add visit uses the whole window: on wide screens the form becomes a 4-column grid, so country, dates, cities and who sit side by side instead of one long stretched column */
main.sub-main.wide .intake-card { width: 100%; max-width: none; }
@media (min-width: 1100px) {
  main.sub-main.wide .vform .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; }
  main.sub-main.wide .vform .vgrid > :nth-child(1), main.sub-main.wide .vform .vgrid > :nth-child(4), main.sub-main.wide .vform .vgrid > :nth-child(5) { grid-column: span 2; }
  main.sub-main.wide .vform .vgrid > :nth-child(2), main.sub-main.wide .vform .vgrid > :nth-child(3) { grid-column: span 1; }
  main.sub-main.wide .vform .vgrid > :nth-child(6) { grid-column: 1 / -1; }
}
/* phones: the page buttons (My map, Visits and trips, Add visit, Share card) sit in a scrolling row under the top bar on every page */
.subnav .m-only { display: none; }
@media (max-width: 760px) {
  .nav .wrap { flex-wrap: wrap; height: auto; min-height: 56px; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; align-content: center; }
  .nav .wrap .userbar { margin-left: auto; }
  .nav .wrap .subnav { display: flex; order: 10; flex: 1 1 100%; margin: 0; gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding: 0 0 2px; scrollbar-width: none; }
  .nav .wrap .subnav::-webkit-scrollbar { display: none; }
  .subnav a, .subnav .m-only { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-2); background: var(--surface); }
  .subnav a[aria-current="page"] { border-color: transparent; }
  .nav-share { display: none; }
}
/* My map on phones: the map fills the screen and stays put; the list is a bottom sheet over it (drag the handle: peek, half, full) */
.sheet-handle { display: none; }
@media (max-width: 1000px) {
  body.wsb:has(main.ws.fit) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.wsb:has(main.ws.fit) > .nav { flex: none; }
  main.ws.fit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
  main.ws.fit .ws-body { flex: 1 1 auto; height: auto !important; min-height: 0; position: relative; display: block; }
  main.ws.fit .mapcard { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; border: 0; }
  main.ws.fit .side { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; height: 158px; min-height: 0; max-height: none; border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(8, 28, 40, .3); display: flex; flex-direction: column; overflow: hidden; transition: height .3s cubic-bezier(.2, .8, .2, 1); }
  main.ws.fit .sheet-handle { display: block; flex: none; height: 30px; position: relative; touch-action: none; cursor: grab; }
  main.ws.fit .sheet-handle::after { content: ""; position: absolute; left: 50%; top: 11px; width: 42px; height: 5px; margin-left: -21px; border-radius: 999px; background: var(--line-2); }
  main.ws.fit .sheet-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 22px 22px 0 0; }
  main.ws.fit .side .app-top { flex: none; padding: 0 12px 8px; }
  main.ws.fit .side .app-top .top-row { display: block; }
  main.ws.fit .side .app-top .stats { display: flex; grid-template-columns: none; gap: 8px; margin: 0; overflow-x: auto; scrollbar-width: none; }
  main.ws.fit .side .app-top .stats::-webkit-scrollbar { display: none; }
  main.ws.fit .side .app-top .stat { flex: none; min-width: 150px; padding: 7px 12px; }
  main.ws.fit .side .tabs { flex: none; }
  main.ws.fit .side .panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 28px; }
  main.ws.fit .zoom { top: 132px; bottom: auto; right: 10px; }
  main.ws.fit .maptools { top: 10px; }
}
/* phone sheet: slim stat chips so the peek shows the handle, the stats and the tabs */
@media (max-width: 1000px) {
  main.ws.fit .side .app-top .stat { display: flex; align-items: baseline; gap: 7px; min-width: 0; padding: 8px 14px; border-radius: 999px; }
  main.ws.fit .side .app-top .stat b { grid-row: auto; font-size: 19px; line-height: 1; }
  main.ws.fit .side .app-top .stat b small { font-size: 12px; }
  main.ws.fit .side .app-top .stat span { margin: 0; min-height: 0; font-size: 12.5px; white-space: nowrap; }
  main.ws.fit .side .app-top .stat .bar { display: none; }
  main.ws.fit .side .app-top { padding-bottom: 6px; }
}
/* legend colour rows in Account details */
.color-grid { display: grid; gap: 8px; margin: 8px 0 10px; }
.color-row { display: flex; align-items: center; gap: 12px; }
.color-row input[type="color"] { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); cursor: pointer; flex: none; }
.color-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }

/* phones: a short header (first name and the round icon on one row, the menu right under it) and the legend along the bottom of the map, riding above the sheet */
@media (max-width: 760px) {
  .nav .wrap { gap: 10px; min-height: 0; padding-top: 6px; padding-bottom: 6px; row-gap: 6px; }
  .nav .wrap .logo .logo-word small { display: none; }
  .nav .wrap .nav-title { flex: 1 1 0; min-width: 0; margin-left: 0; padding-left: 12px; }
  .nav .wrap .nav-title h1 { font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .wrap .userbar { flex: none; margin-left: 0; }
  .nav .wrap .subnav { margin-bottom: 0; }
  .subnav a, .subnav .m-only { min-height: 34px; padding: 0 13px; font-size: 13.5px; }
  main.ws.fit .maptools { inset: 0; pointer-events: none; }
  main.ws.fit .maptools .seg { position: absolute; top: 10px; left: 10px; pointer-events: auto; }
  main.ws.fit .maptools .chips { position: absolute; left: 10px; right: 10px; bottom: calc(var(--sheet-h, 158px) + 10px); flex: none; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 4px; gap: 8px; scrollbar-width: none; pointer-events: auto; transition: bottom .3s cubic-bezier(.2, .8, .2, 1); }
  main.ws.fit.sheet-drag .maptools .chips { transition: none; }
  main.ws.fit .maptools .chips::-webkit-scrollbar { display: none; }
  main.ws.fit .maptools .chips .chip { flex: none; }
  main.ws.fit .zoom { top: 62px; }
}
/* the colour of each way of adding entries, shown above the add forms and changeable there */
.src-color { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.src-color[hidden] { display: none; }
.src-color .dot { width: 14px; height: 14px; flex: none; }
.src-color b { color: var(--ink); }
.src-color .sc-pick { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer; }
.src-color input[type="color"] { width: 38px; height: 28px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); cursor: pointer; }
.itabs button .dot { width: 10px; height: 10px; margin-right: 8px; display: inline-block; vertical-align: 1px; }
/* ready-made colour palettes in Account details */
.preset-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 12px; }
.preset { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 600 13.5px var(--font-ui); cursor: pointer; text-align: left; }
.preset:hover { border-color: var(--ink-3); background: var(--surface-2); }
.preset .sw { display: inline-flex; flex: none; }
.preset .sw i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -5px; }
.preset .sw i:first-child { margin-left: 0; }
/* phones: Back sits at the bottom, within thumb reach, on the pages and cards that open on top of others */
.sheet-foot, .wb-dlg-foot, .page-foot { display: none; }
@media (max-width: 1000px) {
  .ws .info .sheet-foot { display: block; position: sticky; bottom: 0; z-index: 4; margin-top: 18px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .sheet-backbtn { width: 100%; min-height: 48px; font-size: 15.5px; }
}
@media (max-width: 760px) {
  dialog.vdialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  dialog.vdialog .wb-dlg-head .wb-dlg-back { display: none; }
  dialog.vdialog .wb-dlg-foot { display: block; flex: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  dialog.vdialog .wb-dlg-foot .btn { width: 100%; min-height: 48px; font-size: 15.5px; }
  .page-foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .page-foot .btn { width: 100%; min-height: 48px; font-size: 15.5px; }
  body:has(.page-foot) main.sub-main { padding-bottom: 96px; }
  .mback { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .mback[hidden] { display: none; }
  .mback .btn { width: 100%; min-height: 48px; font-size: 15.5px; }
  body:has(.mback:not([hidden])) main.sub-main { padding-bottom: 96px; }
}
@media (max-width: 1000px) { .ws .info .sheet { padding-bottom: 0; } }
/* the Edit trip and Add trip windows scroll inside (the earlier "no inner scroll" rules used !important, which hid the bottom of the form) */
dialog.vdialog > .trip-edit { overflow-y: auto !important; max-height: none !important; flex: 1 1 auto; min-height: 0; }
dialog.vdialog > .vbody { overflow-y: auto; max-height: none; }
/* Visits and trips on phones: no sideways overflow (the wide-screen card columns had a 440 px minimum, which made the page wider than the screen),
   and the year rail is a thin strip on the right edge that works like a photo-library scrubber */
.ypop { display: none !important; }
.ytip { display: none; }
@media (max-width: 760px) {
  main.sub-main.wide { padding-left: 14px; padding-right: 44px; }
  main.sub-main.wide .manage-list { grid-template-columns: minmax(0, 1fr); }
  main.sub-main.wide .manage-list > *, main.sub-main.wide .stay, main.sub-main.wide .trip-block { min-width: 0; }
  main.sub-main.wide .stay, main.sub-main.wide .trip-block { overflow-wrap: anywhere; }
  .yrail { position: fixed; right: 0; top: 104px; bottom: 14px; width: 44px; height: auto; max-height: none; z-index: 40; padding: 0 5px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: .62; pointer-events: auto; transform: none; align-items: flex-end; touch-action: none; transition: opacity .2s ease; }
  .yrail.show, .yrail.drag { opacity: 1; }
  .yrail .yr { padding: 0; justify-content: flex-end; }
  .yrail .yr span { font-size: 11px; font-weight: 600; transform-origin: right center; color: var(--ink-2); text-shadow: 0 0 3px var(--bg, #fff), 0 0 3px var(--bg, #fff); }
  .yrail .yr span.on { font-size: 13px; font-weight: 800; color: var(--ink); }
  .yrail .ythumb { display: none; }
  .yrail.drag { background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 14px 0 0 14px; }
  .ytip { display: block; position: fixed; z-index: 62; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 700 16px/1 var(--font-ui, system-ui); box-shadow: 0 6px 18px rgba(8, 28, 40, .3); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
  .ytip.show { opacity: 1; }
}
/* phones: the year rail is hidden until you scroll or touch the right edge, then fades away after 1.5 s.
   At rest only a 28 px strip on the right edge is touchable (it sits in the page's right margin, so it never covers a card);
   the top menu pills share one row and fit at 360 px */
@media (max-width: 760px) {
  .yrail { opacity: 0; width: 28px; overflow: visible; transition: opacity .3s ease, width .15s ease; }
  .yrail.show, .yrail.drag { opacity: 1; width: 44px; }
  .nav .wrap .subnav { gap: 5px; }
  .subnav a, .subnav .m-only { flex: 1 1 auto; justify-content: center; min-height: 34px; padding: 0 8px; font-size: 12.5px; letter-spacing: 0; white-space: nowrap; }
}
@media (max-width: 340px) { .subnav a, .subnav .m-only { padding: 0 5px; font-size: 11.5px; } }
/* menu pills: tighter so all four share one row from 360 px up */
@media (max-width: 760px) {
  .nav .wrap .subnav { gap: 4px; }
  .subnav a, .subnav .m-only { padding: 0 7px; font-size: 12px; min-height: 34px; }
}
@media (max-width: 340px) { .subnav a, .subnav .m-only { padding: 0 4px; font-size: 11px; } }
.atag { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px; margin-left: 8px; white-space: nowrap; }