/* Clear blue accents complement the shared black, red and gold identity. */
:root {
  --city-accent: #2360D6;
  --city-accent-dark: #194BAA;
  --city-soft: #EFF4FF;
  --city-ink: #244D8C;
  --city-decoration: #AFC8FF;
  --gold: #D6AA32;
  --gold-ink: #806014;
  --guide-soft: #F7F5EF;
  --guide-line: #E2DCCF;
  --guide-gold-soft: #FBF6E6;
}
.brand-icon { width:48px; height:48px; }
.brand-icon svg { overflow:visible; }
/* The shared black, red and gold identity frames every city guide. */
.header-main { position:relative; }
.site-header:after { content:""; display:block; height:4px; background:linear-gradient(to right,var(--ink) 0 33.333%,var(--red) 33.333% 66.666%,var(--gold) 66.666%); pointer-events:none; }
.planner-promo:before { content:""; position:absolute; left:36px; top:-1px; width:150px; height:4px; background:linear-gradient(to right,#090C0E 0 33.333%,var(--red) 33.333% 66.666%,var(--gold) 66.666%); pointer-events:none; }

.button {
  color:#fff;
  background:var(--city-accent);
  border-color:var(--city-accent);
}
.button:hover {
  color:#fff;
  background:var(--city-accent-dark);
  border-color:var(--city-accent-dark);
}
.hero-search button { background:var(--city-accent); color:#fff; }
.hero-search button:hover { background:var(--city-accent-dark); color:#fff; }
.button.red { color:#fff; background:var(--city-accent); border-color:var(--city-accent); }
.button.red:hover { color:#fff; background:var(--city-accent-dark); border-color:var(--city-accent-dark); }
.button.light { color:var(--ink); background:#fff; border-color:#D6D5CF; }
.button.light:hover { color:var(--city-ink); background:var(--city-soft); border-color:var(--city-accent); }
.button.gold { color:#19232a; background:var(--gold); border-color:var(--gold); }
.button.gold:hover { color:#19232a; background:#E2BA4C; border-color:#E2BA4C; }
.nav .saved { border-color:#D8E5FC; color:var(--city-ink); }
.nav .saved span { background:var(--city-soft); color:var(--city-ink); }
.nav a:hover, .secondary-categories a:hover, .text-link:hover { color:var(--city-ink); }
.save-button[aria-pressed="true"] { color:#fff; background:var(--city-accent); }
.filter-categories button[aria-pressed="true"] { color:#fff; background:var(--city-accent); border-color:var(--city-accent); }
.quick-links a:hover { color:var(--city-ink); border-color:var(--city-accent); }
.route-card { border-top-color:var(--gold); }
.info-box { border-left-color:var(--gold); }
.stars { color:var(--gold-ink); }
.spotlight .eyebrow { color:#E5C469; }
.weather-tip { background:var(--guide-soft); color:var(--ink); }
.plan-controls { background:#fff; border:1px solid var(--guide-line); border-top:3px solid var(--gold); border-radius:9px; }
.plan-controls h2 { font-size:27px; }
.hero { border-bottom:3px solid var(--gold); }
.hero-plan-cta .button { background:var(--city-accent); border-color:var(--city-accent); color:#fff; }
.hero-plan-cta .button:hover { background:var(--city-accent-dark); border-color:var(--city-accent-dark); color:#fff; }
.category-tile { border-top:3px solid var(--ink); }
.category-tile:nth-child(3n+2) { border-top-color:var(--red); }
.category-tile:nth-child(3n) { border-top-color:var(--gold); }
.category-tile:nth-child(3n) .cat-icon { color:var(--gold-ink); }
.site-footer { border-top:4px solid var(--red); }
.section-heading .eyebrow:before { width:26px; height:4px; background:linear-gradient(to right,var(--ink) 0 33.333%,var(--red) 33.333% 66.666%,var(--gold) 66.666%); }

/* Blue highlights actions and a few small details without replacing the shared frame. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline-color:var(--city-accent); }
.planner-promo a:focus-visible, .planner-promo button:focus-visible { outline-color:var(--city-decoration); }
.category-nav a:hover { color:var(--city-ink); }
.category-nav a:hover:after { background:var(--city-accent); }
.category-tile:hover { border-inline-color:var(--city-accent); border-bottom-color:var(--city-accent); }
.hero-copy .eyebrow:after, .planner-promo .eyebrow:after { content:""; flex:0 0 18px; width:18px; height:5px; border-radius:9px; background:var(--city-decoration); }

/* Explicit colors prevent the old light-background/dark-button cascade conflict. */
.wishlist-actions { display:flex; flex-wrap:wrap; gap:8px; }
.wishlist-actions .button-icon,
.wishlist-actions .button-text {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  min-width:44px;
  min-height:44px;
  padding:10px 13px;
  font-size:12px;
  font-weight:650;
  line-height:1.3;
  border-radius:5px;
  opacity:1;
}
.wishlist-actions .button-icon {
  color:var(--city-ink);
  background:var(--city-soft);
  border:1px solid #CBDCF8;
}
.wishlist-actions .button-icon:not(:disabled):hover {
  color:#fff;
  background:var(--city-accent-dark);
  border-color:var(--city-accent-dark);
}
.wishlist-actions .button-text { color:#90212A; background:#fff; border:1px solid #DDC3C6; }
.wishlist-actions .button-text:not(:disabled):hover { color:#762029; background:#FFF1F2; border-color:#B62C36; }
.wishlist-actions button:disabled {
  color:#5D6A6E;
  background:#EFF2F2;
  border-color:#D4DDDE;
  opacity:1;
  cursor:not-allowed;
}
.wishlist-item { border-radius:8px; }
.wishlist-item img { border-radius:5px; }
.wishlist-content { flex:1; }
.wishlist-actions .button-icon:focus-visible,
.wishlist-actions .button-text:focus-visible { outline:3px solid var(--city-accent); outline-offset:3px; }
.plan-budget-list { list-style:none; padding:0; margin:18px 0 0; }
.plan-budget-list li { display:flex; justify-content:space-between; align-items:start; gap:14px; padding:10px 0; border-bottom:1px solid var(--guide-line); font-size:12px; line-height:1.5; }
.plan-budget-list li span:first-child { min-width:0; }
.plan-budget-list li span:last-child { flex-shrink:0; font-weight:650; color:var(--ink); }
.plan-controls .plan-budget-total { display:block; padding:16px 0 8px; font-size:20px; line-height:1.35; font-weight:750; color:var(--ink); letter-spacing:-.025em; }
.plan-budget-total strong { display:block; font-size:27px; }

/* An immediately understandable path into the personal day planner. */
.planner-promo {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:26px 42px;
  padding:36px;
  color:#fff;
  background:var(--ink);
  border-radius:12px;
  border:1px solid var(--ink);
  position:relative;
  margin-block:30px;
}
.planner-promo > * { min-width:0; }
.planner-promo h2 { font-size:clamp(28px,3.3vw,40px); margin:0 0 14px; color:#fff; }
.planner-promo p { color:#D8DADC; font-size:15px; line-height:1.7; margin-bottom:0; }
.planner-promo .eyebrow { color:#EDD17E; }
.planner-promo .eyebrow:before { background:var(--gold); }
.planner-steps { list-style:none; counter-reset:planner-step; display:grid; gap:15px; padding:0; margin:0; align-content:center; }
.planner-steps li { display:grid; grid-template-columns:31px minmax(0,1fr); gap:2px 12px; counter-increment:planner-step; font-size:13px; line-height:1.55; }
.planner-steps li:before { content:counter(planner-step,decimal-leading-zero); grid-row:1 / span 2; align-self:start; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--guide-gold-soft); color:var(--ink); font-size:11px; font-weight:750; }
.planner-steps strong { display:block; grid-column:2; color:#fff; font-size:14px; }
.planner-steps span { grid-column:2; color:#D8DADC; }
.planner-promo-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.planner-promo .button { color:#fff; background:var(--city-accent); border-color:#FFFFFF60; }
.planner-promo .button:hover { color:#fff; background:var(--city-accent-dark); border-color:#FFFFFF80; }
.planner-promo-actions > a:not(.button) { color:#fff; min-height:44px; display:inline-flex; align-items:center; font-size:13px; }
.planner-dock { display:none; }

/* Editorial best-of pages remain readable, linkable and useful on a phone. */
.category-guide { padding-bottom:56px; }
.category-intro { max-width:850px; }
.category-intro > p { color:var(--muted); font-size:17px; line-height:1.8; }
.category-jumps { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }
.category-jumps a { display:inline-flex; align-items:center; min-height:44px; padding:9px 13px; background:#fff; color:var(--ink); border:1px solid var(--guide-line); border-radius:5px; text-decoration:none; font-size:12px; font-weight:600; line-height:1.45; }
.category-jumps a:hover { color:var(--red-dark); border-color:var(--red); background:#FCF8F7; }
.selection-note { padding:16px 20px; border-left:3px solid var(--gold); background:var(--paper); font-size:13px; line-height:1.7; color:var(--muted); margin:22px 0 30px; }
.toplist { list-style:none; padding:0; margin:32px 0 45px; display:grid; gap:28px; }
.toplist-item { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr); background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; scroll-margin-top:104px; }
.toplist-media { position:relative; min-width:0; background:var(--paper); min-height:250px; }
.toplist-media img { width:100%; height:100%; min-height:250px; object-fit:cover; }
.toplist-number { position:absolute; top:16px; left:16px; display:grid; place-items:center; min-width:44px; height:44px; padding-inline:8px; background:#fff; color:var(--ink); border-radius:7px; font-size:23px; line-height:1; font-weight:750; box-shadow:0 2px 14px #19232a12,inset 0 -3px 0 var(--city-accent); }
.toplist-copy { min-width:0; padding:28px; }
.toplist-copy h3 { font-size:28px; margin:0 0 12px; line-height:1.2; }
.toplist-copy h3 a { text-decoration:none; }
.toplist-copy h3 a:hover { color:var(--red-dark); }
.toplist-copy > p { font-size:14px; line-height:1.8; margin-bottom:16px; color:var(--muted); }
.toplist-copy .toplist-bestfor { display:inline-flex; padding:5px 9px; margin-bottom:14px; background:var(--guide-gold-soft); color:#69531D; border-radius:4px; font-size:12px; font-weight:650; line-height:1.5; }
.toplist-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-block:16px; margin:20px 0 16px; border-block:1px solid var(--line); }
.toplist-facts > div { min-width:0; }
.toplist-facts dt { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:6px; }
.toplist-facts dd { margin:0; font-size:12px; font-weight:600; line-height:1.55; overflow-wrap:break-word; }
.toplist-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.toplist-actions .button { font-size:12px; padding:10px 14px; min-height:44px; }
.toplist-actions button[aria-pressed="true"] { background:var(--city-soft); color:var(--city-ink); border-color:var(--city-accent); }
.comparison-wrap { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--line); border-radius:8px; margin:26px 0 35px; -webkit-overflow-scrolling:touch; }
.comparison-wrap:focus-visible { outline:3px solid var(--city-accent); outline-offset:3px; }
.comparison-table { border-collapse:collapse; width:100%; min-width:670px; font-size:13px; line-height:1.55; text-align:left; }
.comparison-table caption { padding:17px 20px; text-align:left; font-weight:650; color:var(--ink); background:var(--guide-soft); }
.comparison-table th { padding:16px; font-size:10px; letter-spacing:.055em; text-transform:uppercase; color:var(--ink); background:var(--guide-soft); font-weight:750; vertical-align:top; }
.comparison-table td { padding:10px 16px; border-top:1px solid var(--line); vertical-align:middle; }
.comparison-table tbody tr:nth-child(even) { background:#FCFBF8; }
.comparison-table tbody tr:hover { background:var(--guide-gold-soft); }
.comparison-table td:first-child { color:var(--ink); font-weight:750; width:48px; }
.comparison-table a { display:inline-flex; align-items:center; min-height:44px; font-weight:650; text-decoration-thickness:1px; }
.category-advice { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:36px 0; }
.category-advice > section { min-width:0; padding:26px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.category-advice h2, .category-advice h3 { font-size:24px; margin:0 0 14px; }
.category-advice p { font-size:14px; line-height:1.8; color:var(--muted); }
.category-advice p:last-child { margin-bottom:0; }
.category-faq { max-width:900px; margin-block:44px; }
.category-faq .faq summary { min-height:44px; }
.related-categories { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:24px; margin-top:32px; border-top:1px solid var(--line); }
.related-categories h2, .related-categories h3 { width:100%; font-size:25px; margin:0 0 12px; }
.related-categories a { display:inline-flex; align-items:center; min-height:44px; padding:9px 13px; border:1px solid var(--guide-line); background:var(--guide-soft); color:var(--ink); border-radius:5px; font-size:12px; font-weight:600; text-decoration:none; }
.related-categories a:hover { border-color:var(--gold); background:var(--guide-gold-soft); }
.startup-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-block:30px; }
.resource-card { min-width:0; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:8px; padding:25px; background:#fff; }
.resource-card h2, .resource-card h3 { font-size:24px; }
.resource-card p { color:var(--muted); font-size:14px; line-height:1.75; }
.resource-card a { display:inline-flex; align-items:center; min-height:44px; color:var(--red-dark); font-size:13px; font-weight:650; }

/* The complete directory uses text cards after the illustrated top selection. */
.activity-card-compact { display:flex; height:100%; border-top:3px solid var(--ink); }
.activity-card-compact:nth-child(3n+2) { border-top-color:var(--red); }
.activity-card-compact:nth-child(3n) { border-top-color:var(--gold); }
.activity-card-compact .card-body { display:flex; flex-direction:column; width:100%; min-width:0; padding:22px; }
.activity-card-compact .card-title { font-size:21px; line-height:1.25; margin-bottom:12px; }
.activity-card-compact .card-meta, .activity-card-compact .card-title { padding-right:48px; }
.activity-card-compact .save-button { top:12px; right:12px; color:var(--red-dark); background:#FCF5F5; border:1px solid #E8D5D7; box-shadow:none; }
.activity-card-compact .save-button[aria-pressed="true"] { color:#fff; background:var(--city-accent); border-color:var(--city-accent); }
.activity-card-compact .card-excerpt { flex:1; font-size:13px; line-height:1.75; margin-bottom:18px; }
.activity-card-compact .card-bottom { flex-wrap:wrap; gap:5px 16px; margin-top:auto; padding-top:10px; }
.activity-card-compact .card-bottom > span { font-size:11px; line-height:1.7; }
.activity-card-compact .card-bottom > a { color:var(--red-dark); font-size:12px; font-weight:650; min-height:44px; }
.route-card { display:flex; flex-direction:column; }
.route-card .button-row { gap:9px; margin-top:auto; }
.route-card .button-row > .button { width:100%; flex:1 1 100%; min-height:46px; text-align:center; white-space:normal; }
.route-card .button[data-add-plan] { color:#fff; background:var(--city-accent); border-color:var(--city-accent); }
.route-card .button[data-add-plan]:hover { color:#fff; background:var(--city-accent-dark); border-color:var(--city-accent-dark); }
.hero-plan-cta { align-items:center; margin:18px 0 20px; }
.hero-plan-cta .small { font-size:12px; line-height:1.5; }

/* Match the actual guide markup: row headings and budget bases are separate. */
.toplist-facts dd small, .comparison-table td small { display:block; margin-top:4px; font-size:11px; font-weight:400; line-height:1.5; color:var(--muted); }
.comparison-table th[scope="row"] { font-size:13px; letter-spacing:0; text-transform:none; font-weight:650; background:inherit; border-top:1px solid var(--line); vertical-align:middle; }
.category-advice > h2 { grid-column:1 / -1; margin:0 0 2px; font-size:clamp(28px,3vw,38px); }
.planner-steps li:before { content:"♡"; font-size:17px; }
.planner-steps li:nth-child(2):before { content:"↕"; }
.planner-steps li:nth-child(3):before { content:"↗"; }

@media (max-width:1050px) {
  .toplist-item { grid-template-columns:minmax(210px,.75fr) minmax(0,1.25fr); }
  .toplist-copy { padding:23px; }
  .toplist-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .startup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:780px) {
  .brand-icon { width:42px; height:42px; }
  .planner-promo { grid-template-columns:minmax(0,1fr); gap:24px; padding:26px; border-radius:9px; }
  .planner-promo:before { left:26px; }
  .planner-promo p { font-size:14px; }
  .planner-promo-actions { gap:10px; }
  .planner-promo-actions .button { width:100%; }
  .planner-steps { gap:18px; }
  .planner-dock {
    position:fixed;
    z-index:45;
    left:50%;
    bottom:max(14px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:min(560px,calc(100% - 28px));
    min-height:56px;
    padding:14px 17px;
    background:var(--city-accent);
    color:#fff;
    border:1px solid #FFFFFF40;
    border-bottom:3px solid var(--gold);
    border-radius:10px;
    box-shadow:0 8px 28px #19232A33;
    text-align:center;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
  }
  .planner-dock:hover { background:var(--city-accent-dark); color:#fff; }
  .planner-dock-count { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:25px; min-height:25px; width:auto; height:auto; padding:3px 8px; background:#fff; color:var(--city-ink); border-radius:5px; font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
  body:has(.planner-dock:not([hidden])) { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  .toplist-item { grid-template-columns:minmax(0,1fr); scroll-margin-top:86px; }
  .toplist-media { min-height:0; aspect-ratio:1.75; }
  .toplist-media img { min-height:0; aspect-ratio:1.75; }
  .toplist-copy { padding:24px; }
  .toplist-copy h3 { font-size:25px; }
  .toplist-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .category-advice { grid-template-columns:minmax(0,1fr); gap:18px; }
  .category-advice > section { padding:23px; }
  .category-intro > p { font-size:16px; }
  .selection-note { padding:15px 17px; }
  .wishlist-actions { gap:7px; }
  .wishlist-actions .button-icon, .wishlist-actions .button-text { flex:1 0 auto; }
}
@media (max-width:460px) {
  .planner-promo { padding:22px; }
  .planner-promo:before { left:22px; }
  .planner-promo h2 { font-size:30px; }
  .planner-dock { font-size:13px; padding-inline:12px; }
  .toplist { gap:23px; }
  .toplist-copy { padding:20px; }
  .toplist-copy h3 { font-size:24px; }
  .toplist-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toplist-actions .button { flex:1 1 120px; }
  .category-jumps { gap:7px; }
  .category-jumps a { padding-inline:10px; }
  .startup-grid { grid-template-columns:minmax(0,1fr); }
  .resource-card { padding:22px; }
  .activity-card-compact .card-body { padding:20px; }
}
@media (max-width:360px) {
  .brand-icon { width:38px; height:38px; }
  .planner-promo { padding:19px; }
  .planner-promo:before { left:19px; }
  .planner-promo h2 { font-size:28px; }
  .toplist-copy { padding:18px; }
  .toplist-actions .button { width:auto; }
  .wishlist-actions .button-icon, .wishlist-actions .button-text { font-size:11px; padding-inline:10px; }
}
@media print {
  .planner-promo, .planner-dock, .wishlist-actions { display:none !important; }
  body:has(.planner-dock) { padding-bottom:0; }
  .toplist-item { break-inside:avoid; display:block; }
  .toplist-media { display:none; }
  .comparison-wrap { overflow:visible; }
  .comparison-table { min-width:0; font-size:10pt; }
}
[hidden] { display:none !important; }