:root {
  --pl-bg: #f5f7fb; --pl-text: #111827; --pl-muted: #536176;
  --pl-line: #dce3ee; --pl-soft: #eef3ff; --pl-accent: #2563eb; --pl-hover: #1d4ed8;
  --pl-shadow: 0 6px 24px #17255408;
}
body[data-planlah] { margin: 0; color: var(--pl-text); font-family: "Manrope", "Segoe UI", sans-serif; background: radial-gradient(circle at 20% -10%, #dbeafe 0%, transparent 45%), radial-gradient(circle at 85% 0%, #fce7f3 0%, transparent 40%), var(--pl-bg); min-height: 100vh; }
.pl-bar, .pl-bar * { box-sizing: border-box; }
.pl-bar { background: #ffffffed; border-bottom: 1px solid var(--pl-line); }
.pl-bar-inner { max-width: 1180px; padding: 14px 20px; margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.pl-home { display: inline-flex; align-items: baseline; font: 800 24px/1.2 "Trebuchet MS", "Segoe UI", sans-serif; color: #172a46; letter-spacing: -.06em; white-space: nowrap; text-decoration: none; }
.pl-home span { color: var(--pl-accent); }
.pl-home small { font-size: 15px; font-weight: 500; letter-spacing: -.025em; color: var(--pl-muted); }
.pl-switcher { display: flex; flex-wrap: wrap; min-width: 0; align-items: stretch; gap: 5px; }
.pl-switcher a { flex: 0 0 auto; min-width: 73px; min-height: 48px; padding: 6px 12px; border: 1px solid transparent; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--pl-muted); font: 650 .875rem/1.4 "Manrope", "Segoe UI", sans-serif; text-decoration: none; white-space: nowrap; }
.pl-switcher a small { font-size: .75rem; font-weight: 400; line-height: 1.3; }
.pl-switcher a:hover { background: #f5f7fb; color: var(--pl-hover); }
.pl-switcher a[aria-current="page"] { background: var(--pl-soft); border-color: #c8d9fb; color: var(--pl-hover); }
.pl-bar a:focus-visible, .pl-coming-links a:focus-visible { outline: 3px solid var(--pl-accent); outline-offset: 3px; }
.pl-skip { position: fixed; top: 8px; left: 16px; z-index: 10000; transform: translateY(-200%); padding: 10px 16px; background: #172a46; color: white; border-radius: 8px; font: 600 16px/1.5 "Segoe UI", sans-serif; }
.pl-skip:focus { transform: none; }
.pl-wordmark { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: baseline; color: #172a46; font-size: 2.15rem; line-height: 1.15; letter-spacing: -.075em; }
.pl-wordmark-brand { font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -.07em; }
.pl-wordmark-dot { color: var(--pl-accent); font-weight: 900; margin: 0 .025em 0 .015em; }
.pl-wordmark-tool { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; }
/* A shared blue theme for the location planner; semantic and map colours remain distinct. */
body[data-planlah="where"] { --coral: #2563eb; --coral-d: #1d4ed8; --teal: #2563eb; --ink: #111827; --muted: #536176; --line: #dce3ee; --bg: #f5f7fb; --soft: #eef3ff; --cream: #f8fafe; --mint: #eef3ff; --shadow: var(--pl-shadow); line-height: 1.5; }
body[data-planlah="where"] .wrap { max-width: 1180px; padding: 24px 20px 0; }
body[data-planlah="where"] .topnav { height: auto; min-height: 35px; gap: 16px; flex-wrap: wrap; border: 0; margin-bottom: 18px; }
body[data-planlah="where"] .nav-note { font-size: 13px; }
body[data-planlah="where"] .hero { padding: 28px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--pl-shadow); }
body[data-planlah="where"] .hero:before { content: none; }
body[data-planlah="where"] h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.18; letter-spacing: -.025em; max-width: 650px; margin: 0 0 12px; }
body[data-planlah="where"] .sub { max-width: 720px; margin: 0; font-size: 16px; line-height: 1.6; }
body[data-planlah="where"] .proof { justify-content: flex-start; margin-top: 20px; gap: 8px; }
body[data-planlah="where"] .proof span { font-size: 13px; background: #f8fafe; box-shadow: none; }
body[data-planlah="where"] .app { grid-template-columns: 360px minmax(0, 1fr); gap: 20px; margin-top: 20px; }
body[data-planlah="where"] .app > * { min-width: 0; }
body[data-planlah="where"] :is(.panel,#map,.placeholder,.summary,.room-panel,.compare-card) { border-radius: 16px; box-shadow: var(--pl-shadow); }
body[data-planlah="where"] :is(.panel,.room-panel,.summary) { background: #fff; }
body[data-planlah="where"] .placeholder { background: linear-gradient(140deg,#fff,#eef3ff); }
body[data-planlah="where"] :is(.map-glyph,.go) { box-shadow: 0 6px 18px #2563eb14; }
body[data-planlah="where"] :is(.chip.on,.reset-zone:hover,.route-retry:hover,.room-option.on) { background: var(--pl-soft); }
body[data-planlah="where"] :is(.pp:focus-within,.tripitem:has(.ptcard[aria-expanded="true"])) { border-color: #93b4f5; box-shadow: 0 0 0 3px #2563eb12; }
body[data-planlah="where"] :is(.route-detail,.ptcard:hover) { background: #f8fafe; }
body[data-planlah="where"] .room-panel { border-color: #c8d9fb; }
body[data-planlah="where"] .room-trust { color: var(--muted); }
body[data-planlah="where"] :is(button,input,select) { min-height: 44px; }
body[data-planlah="where"] :is(.panel .hint,.hint,.pp input,.pp select,.addbtn,.samplebtn,.status,.placeholder span,.room-btn,.chip,.share,.compare-card p,.room-help,.room-place p) { font-size: 14px; }
body[data-planlah="where"] :is(button,input,select,a,[role="button"]):focus-visible { outline: 3px solid var(--pl-accent); outline-offset: 3px; }
body[data-planlah="where"] .how { background: #fff; color: var(--ink); border: 1px solid var(--line); }
body[data-planlah="where"] .how :is(.lede,.step p) { color: var(--muted); }
body[data-planlah="where"] .how .step { background: var(--pl-soft); border-color: var(--line); }
body[data-planlah="where"] .how .step .n { background: var(--pl-accent); color: #fff; }
.pl-coming-shell { box-sizing: border-box; max-width: 1180px; margin: auto; padding: 28px 20px; }
.pl-coming-card { max-width: 760px; margin-top: 22px; padding: clamp(28px, 5vw, 56px); background: #fff; border: 1px solid var(--pl-line); border-radius: 16px; box-shadow: var(--pl-shadow); }
.pl-badge { display: inline-block; margin: 0 0 20px; padding: 6px 12px; border-radius: 999px; color: var(--pl-hover); background: var(--pl-soft); font-size: 14px; font-weight: 650; }
.pl-coming-card h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.04em; line-height: 1.15; margin: 0 0 18px; }
.pl-coming-card > p:not(.pl-badge) { font-size: 17px; line-height: 1.65; color: var(--pl-muted); max-width: 540px; }
.pl-coming-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pl-coming-links a { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; padding: 12px 18px; border-radius: 10px; background: var(--pl-accent); color: #fff; text-decoration: none; font-weight: 650; }
.pl-coming-links a + a { background: var(--pl-soft); color: var(--pl-hover); }
@media (max-width: 920px) { body[data-planlah="where"] .app { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) {
  .pl-bar-inner { padding: 12px; flex-direction: column; align-items: stretch; gap: 12px; }
  .pl-home { align-self: flex-start; padding-left: 4px; }
  .pl-switcher { gap: 4px; }
  .pl-switcher a { flex: 1 0 auto; min-width: 4rem; padding: 7px 8px; }
  body[data-planlah="where"] .wrap { padding: 20px 12px 0; }
  body[data-planlah="where"] .hero { padding: 22px; }
  body[data-planlah="where"] .nav-note { font-size: 13px; }
  .pl-coming-shell { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) { .pl-bar *, .pl-coming-shell * { scroll-behavior: auto; transition: none; } }