/* Opt-in readability and depth pass, 31 August 2026.
 * Keep palette, type families, geometry and state semantics on their owners.
 * Separate from token-only base.css; load after page styles. Body specificity
 * also handles curation's injected CSS. Palette fallbacks are the exact base.css
 * values, since curation declares them in JS rather than a linked stylesheet.
 * No visibility or positioning rules.
 */
:root {
  --ww-elevation-panel: 0 2px 5px rgba(41,54,74,.07), 0 14px 32px rgba(41,54,74,.12);
  --ww-elevation-small: 0 1px 3px rgba(41,54,74,.08), 0 6px 16px rgba(41,54,74,.08);
  --ww-panel-edge: rgba(41,54,74,.22);
}

html body {
  background: var(--paper-dim, #e0e6e5);
  /* Existing advisor colors: readable on the dim canvas as well as white. */
  --muted-ink: #4a5568;
  --copper-text: #1f6b6d;
}

/* Editorial masthead with a crisp teal baseline, not another floating card.
 * Inset shadow preserves existing header/nav measurements and hit targets. */
body .hero,
body .topbar,
body .cur-topbar,
body .ww-topbar {
  background: var(--card, #fff);
  border-bottom-color: var(--ww-panel-edge);
  box-shadow: inset 0 -3px var(--copper, #78ccce), 0 6px 18px rgba(41,54,74,.09);
}

body .hero h1,
body .hello,
body .dw-title,
body .tw-trip-head h1 {
  text-wrap: balance;
}

/* Top-level surfaces only. Nested destination rows, status pills and stops
 * inside the trip's country group do not receive another shadow. */
body :is(.ac-card, .ac-add, .ac-note, .ct-card, .ct-state, .tp-card, .tp-state,
  .country-card, .card, .city-card, .cur-tools, .cur-import, .cur-card,
  .dw-rail, .tw-plan, .tw-state) {
  border-color: var(--ww-panel-edge);
  box-shadow: var(--ww-elevation-panel);
}

body #tripHero,
body #advisorTrips {
  border-color: var(--ww-panel-edge);
  box-shadow: var(--ww-elevation-panel);
}

/* Paper bands tie section titles to their panels. Status colors retain their
 * existing meaning; no decorative recoloring of pending/approved states. */
body :is(.ac-card-head, .ct-card-head, .tp-card-head, .tw-plan-head) {
  background: var(--paper, #f7f9f9);
  border-bottom-color: var(--ww-panel-edge);
  color: var(--ink, #29364a);
  /* The destination panel allows autocomplete to escape its bounds. Match its
   * top corners without adding overflow:hidden and clipping those choices. */
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

body .tp-card,
body .country-card,
body .card {
  margin-bottom: 28px;
}

body .tp-dest + .tp-dest,
body .ct-row + .ct-row {
  border-top-color: var(--ww-panel-edge);
}

body .ac-table td {
  border-bottom-color: var(--ww-panel-edge);
}

/* Controls have an edge at rest, not only on hover. Their selected, disabled,
 * danger and save states remain owned by their existing component rules. */
body .btn.outline,
body .ac-scope select,
body .ct-scope select,
body .dw-search input,
body .dw-secondary,
body .tw-button:not(.tw-button-primary) {
  border-color: #6b7171;
  background: var(--card, #fff);
  box-shadow: var(--ww-elevation-small);
}

body .btn.outline:hover {
  border-color: var(--copper-text);
  background: var(--paper, #f7f9f9);
  color: var(--copper-text);
}

body .btn.outline:focus-visible {
  outline: 3px solid var(--ink, #29364a);
  outline-offset: 3px;
}

/* These links sit directly on the canvas, not on a white card. */
body .cur-tripback a,
body .dw-kicker,
body .dw-link {
  color: var(--copper-text);
}

/* Numbered catalogue/map markers retain teal versus Michelin blush and the
 * navy selected state, but use the existing text-safe shades under white. */
body .cur-num:not(.mich),
body .wvm-pin:not(.mich):not(.on) {
  background: var(--copper-text);
}

body .cur-num.mich,
body .wvm-pin.mich:not(.on) {
  background: var(--brick-text, #ad4569);
}

body .cur-fact-count {
  color: var(--muted-ink);
}

/* These workspace labels had hard-coded neutral ink instead of tokens. */
body :is(.dw-sub, .dw-trip-picker label, .dw-context, .dw-rail-empty,
  .dw-saved, .dw-help, .tw-save, .tw-context) {
  color: var(--muted-ink);
}

/* Reuse the existing 12px metadata step in the small Dining plan. */
body .dw-rail-item small,
body .dw-rail-when,
body .dw-rail-head small,
body .dw-rail-empty,
body .dw-saved {
  font-size: 12px;
  line-height: 1.5;
}

body .dw-rail-item small {
  color: var(--muted-ink);
}

@media (max-width: 640px) {
  body .tp-card,
  body .country-card,
  body .card {
    margin-bottom: 24px;
  }
}

@media print {
  html body { background: var(--card, #fff); }
  body :is(.hero, .topbar, .cur-topbar, .ww-topbar, .ac-card, .ac-add, .ac-note,
    .ct-card, .ct-state, .tp-card, .tp-state, .country-card, .card, .city-card,
    .cur-tools, .cur-import, .cur-card, .dw-rail, .tw-plan, .tw-state,
    .btn.outline, .ac-scope select, .ct-scope select, .dw-search input,
    .dw-secondary, .tw-button),
  body #tripHero,
  body #advisorTrips {
    box-shadow: none;
  }
}