/* Urban slate: cool blue, warm stone, and a quiet mauve undertone. */
:root {
  --blue: #4d607e;
  --brand-fill: #5e5653;
  --brand-ink: #f7eee7;
  --focus: #526850;
  --sage: #526850;
  --sage-line: #758574;
  --gold: #ab978c;
  --hover: #b8b2bd;
  --ink: #363338;
  --line: #c6bfc4;
  --muted: #5e5653;
  --paper: #e9e6e7;
  --selected-fill: #526850;
  --selected-ink: #fff8f3;
  --soft: #dce0e8;
  --surface: #f8f5f3;
  --toolbar: #e0e6dc;
  --warning-fill: #eee0d4;
  --warning-ink: #64452e;
  color-scheme: light;
}
html[data-theme="dark"] {
  --blue: #b0c2de;
  --brand-fill: #ab978c;
  --brand-ink: #27242a;
  --focus: #b2c5ac;
  --sage: #b2c5ac;
  --sage-line: #8d9e87;
  --gold: #c5ab9c;
  --hover: #7b7f8a;
  --ink: #e9e6e7;
  --line: #55515d;
  --muted: #c2b8b2;
  --paper: #24242b;
  --selected-fill: #b2c5ac;
  --selected-ink: #252630;
  --soft: #3a4050;
  --surface: #2e2e37;
  --toolbar: #343e37;
  --warning-fill: #493b35;
  --warning-ink: #efd1ba;
  color-scheme: dark;
}
body { background: var(--paper); }
.brandmark, html[data-theme="dark"] .brandmark {
  background: var(--brand-fill);
  color: var(--brand-ink);
}
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible {
  outline-color: var(--focus);
}
.number { color: var(--muted); }
.sync button { color: var(--ink); }
.day.selected, .filters button.active {
  background: var(--selected-fill);
  border-color: var(--selected-fill);
  color: var(--selected-ink);
}
.calendar-tools { background: var(--toolbar); }
.day-detail { border-top-color: var(--gold); }
.hotel-card, .flight-card { border-top: 3px solid var(--gold); }
.utility-button:hover, .sync button:hover { background: var(--soft); }
.utility-button[aria-pressed="true"] { border-color: var(--blue); }
.destination:hover, .wish-card:hover,
html[data-theme="dark"] .destination:hover,
html[data-theme="dark"] .wish-card:hover { border-color: var(--hover); }
#error, html[data-theme="dark"] #error {
  background: var(--warning-fill);
  color: var(--warning-ink);
}
.photo { background: #363338; }
.photo-controls button { background-color: #363338c9; }
.photo-dots button { background: transparent; }
.photo-dots button[aria-pressed="true"]:after { background: #e0c6b3; }
.photo-controls button:focus-visible { outline-color: #e0c6b3; }

/* Keep header controls aligned, including narrow screens and larger text sizes. */
.topbar #theme-toggle,.topbar #focus-plans{align-items:center;box-sizing:border-box;display:inline-flex;height:44px;justify-content:center;min-height:44px;white-space:nowrap}
.topbar #theme-toggle{width:44px}
@media(max-width:600px){
  .topbar{align-items:center;column-gap:10px;display:grid;grid-template-columns:minmax(0,1fr) 44px auto;row-gap:14px}
  .topbar .brand{grid-column:1;margin:0;max-width:none;min-width:0;font-size:.6rem;gap:8px;letter-spacing:.07em}.topbar .brandmark{width:30px;height:38px}.topbar #theme-toggle{grid-column:2}.topbar #focus-plans{grid-column:3}
  .topbar #theme-toggle{padding:10px}
  .topbar #focus-plans{font-size:.75rem;padding:8px 10px}
  .topbar .sheet-link{grid-column:1/-1;justify-self:end;align-items:center;display:inline-flex;font-size:.75rem;justify-content:flex-end;margin:0;min-height:44px;padding:0}
  .page-nav{gap:20px;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin}
  .page-nav a{flex-shrink:0;white-space:nowrap}
}

main{overflow-x:clip}.workspace{position:relative}.page-transition-ghost{margin:0;pointer-events:none;position:fixed;z-index:4;overflow:hidden;background:var(--paper)}

@media(max-width:600px){
  .topbar{grid-template-columns:minmax(0,1fr) auto auto}
  .topbar #focus-plans{height:auto;line-height:1.35;max-width:96px;white-space:normal}
  .topbar #theme-toggle{height:var(--header-control-size,44px);width:var(--header-control-size,44px)}
}

.topbar .brandmark{background:transparent;border-radius:9px;height:40px;width:40px}.brandmark svg{display:block;height:100%;width:100%}@media(max-width:600px){.topbar .brandmark{height:38px;width:38px}}
.sync span{min-height:2.8em}.workspace{min-height:50vh}

/* Explicit title lines keep words separated even where older layouts hide line breaks. */
body .intro h1,body:not([data-page="explore"]) .intro h1{line-height:1.12;letter-spacing:-.025em;max-width:100%}
.intro h1 .title-line{display:block}.intro h1 em.title-line{margin-top:.03em}.intro>div:first-child{min-width:0}
@media(max-width:600px){body .intro h1,body:not([data-page="explore"]) .intro h1{font-size:clamp(2rem,8.6vw,2.8rem)}.intro-copy{line-height:1.6;max-width:34ch}}

/* Sage connects the emblem to the trip tools; slate links and stone surfaces stay in balance. */
.page-nav a.active,.view-tabs button.active{border-bottom-color:var(--sage)}
.day-detail{border-top-color:var(--sage-line)}
.destination[open]{border-top-color:var(--sage-line)}
.traveler,.date-label{color:var(--sage)}
.utility-button[aria-pressed="true"]{border-color:var(--sage-line)}
.photo-dots button[aria-pressed="true"]:after{background:#c5d4bf}
.photo-controls button:focus-visible{outline-color:#c5d4bf}

.photo-gallery{column-count:3;column-gap:20px}.gallery-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;break-inside:avoid;overflow:hidden;margin-bottom:20px}.gallery-card img{display:block;width:100%;height:auto}.gallery-metadata{padding:16px 18px}.gallery-metadata h3{font-size:1rem;line-height:1.5;margin:0 0 8px}.gallery-metadata p{font-size:.85rem;margin:4px 0;color:var(--muted)}.gallery-location{color:var(--sage)!important}@media(max-width:900px){.photo-gallery{column-count:2}}@media(max-width:480px){.photo-gallery{column-count:1}}

.gallery-filters{align-items:end;display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.gallery-filters label{color:var(--muted);display:flex;flex:1 1 145px;flex-direction:column;font-size:.8rem;gap:6px}.gallery-filters select{background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--ink);font:inherit;font-size:.9rem;min-height:44px;padding:8px;width:100%}.gallery-filters select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}