/*
 * FOR’U vNext · Phase C1
 * Shared visual foundation and navigation shell.
 * Loaded after the existing domain stylesheets; content renderers remain untouched.
 */
:root {
  --ivory: #f4f1e9;
  --paper: #fbfaf6;
  --ink: #20231f;
  --muted: #686b62;
  --line: #d8d4c9;
  --moss: #566454;
  --moss-dark: #3f4d3d;
  --sage: #dde1d6;
  --stone: #e9e4da;
  --oxblood: #713b35;

  /* Existing screens consume these legacy names; keep them on the approved palette. */
  --cream: var(--ivory);
  --sand: var(--stone);
  --soft-ink: var(--muted);
  --mute: var(--muted);
  --green: var(--moss-dark);
  --green-tint: var(--sage);
  --sky: var(--stone);
  --sky-tint: var(--stone);
  --soft: var(--stone);
  --faint: var(--muted);
  --olive: var(--moss);
  --olive-soft: var(--sage);
  --rose: var(--oxblood);
  --pink: var(--stone);
  --pink-tint: var(--stone);
  --blue: var(--stone);
  --blue-tint: var(--stone);
  --lime: var(--sage);
  --lime-tint: var(--sage);
  --apricot: var(--stone);
  --apricot-tint: var(--stone);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-heading: 34px;
  --font-size-ui-body: 16px;
  --font-size-ui-metadata: 13px;
  --font-size-ui-control: 13px;
  --font-size-ui-label: 11px;
  --serif: var(--font-display);
  --sans: var(--font-ui);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-control: 6px;
  --r-card: 10px;
  --r-hero: 12px;
  --r-sheet: 12px;
  --page-max: 1380px;
  --shadow: none;
  --focus: 0 0 0 3px rgba(86, 100, 84, .24);
}

html,
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
}

body {
  min-width: 0;
}

/* A shorter destination must not gain the scrollbar's width and shift the grid. */
html {
  scrollbar-gutter: stable;
}

button,
input,
textarea,
select {
  font-family: var(--sans);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a[href]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  box-shadow: var(--focus);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.brand-apostrophe {
  color: var(--oxblood);
}

.app-shell {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* Desktop: an editorial rail, not a dashboard sidebar. */
.desktop-rail {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
  min-width: 0;
}

.topbar > .brand {
  min-width: 0;
}

.topbar::before {
  background: rgba(244, 241, 233, .96);
  border-color: var(--line);
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-height: 34px;
}

.header-date,
.cloud-header-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.header-date {
  white-space: nowrap;
}

.cloud-header-status {
  max-width: 190px;
  text-align: right;
}

.mobile-utilities {
  display: none;
}

/* The single language control belongs to the shell, never a page. */
#interfaceLanguage {
  box-sizing: border-box;
  width: 106px;
  min-width: 106px;
  min-height: 44px;
  padding: 0 24px 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--paper);
  color: var(--ink);
  font: 500 12px/1.2 var(--sans);
  cursor: pointer;
}

#interfaceLanguage:hover {
  background-color: var(--ivory);
}

.icon-btn,
.round-btn {
  min-width: 44px;
  min-height: 44px;
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}

.capture-card,
.memory-details,
.modal-card {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}

.primary-btn,
.card-btn.dark,
.universal-add {
  background: var(--moss-dark);
  border-color: var(--moss-dark);
  color: var(--paper);
  box-shadow: none;
}

.primary-btn,
.soft-btn,
.card-btn,
.add-option {
  min-height: 44px;
  border-radius: var(--radius-control);
}

.text-button {
  min-height: 44px;
}

.soft-btn,
.card-btn,
.add-option {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}

.settings-link,
.text-button,
.row-action,
.feedback-control button {
  color: var(--moss-dark);
}

.chip,
.chip:nth-child(4n + 2),
.chip:nth-child(4n + 3),
.chip:nth-child(4n + 4) {
  background: var(--sage);
  border-color: var(--line);
  color: var(--moss-dark);
}

.quiet-prompt,
.capture-result {
  background: var(--sage);
}

.cloud-gate {
  background: var(--ivory);
  color: var(--ink);
}

.cloud-card {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}

.cloud-error {
  color: var(--oxblood) !important;
}

.bottom-nav {
  background: var(--paper);
  border-top-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
}

.bottom-nav .tab {
  min-height: 48px;
  color: var(--muted);
}

.bottom-nav .tab.active {
  background: var(--sage);
  color: var(--ink);
}

.universal-add {
  width: 48px;
  height: 48px;
}

.secondary-nav {
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-wrap: nowrap;
  padding: 3px 0 7px;
  justify-content: flex-start;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 12px;
}

.secondary-nav::-webkit-scrollbar {
  display: none;
}

.subtab {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.subtab.active {
  border-color: var(--moss);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
}

.subtab:not(.active):hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

.desktop-nav .tab:not(.active):hover,
.bottom-nav .tab:not(.active):hover {
  color: var(--ink);
  background: var(--stone);
}

.text-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.subtab:focus-visible,
.tab:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

/* Shell-owned Home masthead. Domain styles only own content below its nav.
   Preserve the existing display scale; this is not a typography calibration. */
#homeGroup > .destination-title {
  display: none;
}

#homeGroup > .home-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 112px;
  margin: 0 0 15px;
}

#homeGroup > .home-overview-header .home-overview-heading {
  min-width: 0;
}

#homeGroup > .home-overview-header .home-overview-eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font: 500 11px/1.3 var(--sans);
  letter-spacing: .14em;
  letter-spacing: .17em;
  text-transform: uppercase;
}

#homeGroup > .home-overview-header h1 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(54px, 5.5vw, 76px)/.92 var(--serif);
  letter-spacing: -.045em;
}

#homeGroup > .home-overview-header .home-overview-add {
  display: grid;
  flex: 0 0 48px;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--moss-dark);
  color: var(--paper);
  font: 400 28px/1 var(--sans);
  cursor: pointer;
  transition: opacity .18s ease;
}

#homeGroup > .home-overview-header .home-overview-add:hover {
  opacity: .88;
}

#homeGroup > .secondary-nav {
  margin-bottom: 30px;
}

main {
  position: relative;
  display: flow-root;
}

main > .destination > .destination-title {
  margin: 0 0 20px;
}

main > .destination {
  padding-top: 0;
}

#shopping > .shopping-heading {
  margin: 0 0 17px;
}

@media (min-width: 768px) {
  .app-shell {
    padding: 22px clamp(40px, 5vw, 78px) var(--space-8) clamp(164px, calc(120px + 4vw), 190px);
  }

  .desktop-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    width: 132px;
    min-width: 132px;
    height: 100dvh;
    box-sizing: border-box;
    padding: 20px 12px 18px;
    border-right: 1px solid var(--line);
    background: var(--ivory);
  }

  .rail-brand {
    display: block;
    margin: 22px 0 68px;
    text-align: center;
    font-size: 27px;
  }

  .rail-utilities {
    position: fixed;
    left: 12px;
    bottom: 18px;
    z-index: 46;
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: auto;
  }

  .rail-utilities .icon-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
  }

  .topbar {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 1120px;
    min-height: 38px;
    margin: 0 auto 28px;
    padding: 0;
  }

  .topbar::before {
    display: none;
  }

  .topbar > .brand {
    display: none;
  }

  .top-actions {
    width: auto;
  }

  .desktop-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .desktop-nav .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 60px;
    padding: 7px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
  }

  .desktop-nav .tab .line-icon {
    width: 18px;
    height: 18px;
    color: var(--moss);
  }

  .desktop-nav .tab.active {
    border-color: transparent;
    background: transparent;
    color: var(--ink);
  font-weight: 500;
  }

  .desktop-nav .tab.active::before {
    content: "";
    position: absolute;
    left: -12px;
    width: 2px;
    height: 60px;
    background: var(--moss);
  }

  main {
    width: 100%;
    max-width: 1120px;
    min-width: 0;
    margin: 0 auto;
  }

  .bottom-nav {
    display: none;
  }

  main > .universal-add {
    position: absolute;
    top: 2px;
    right: 0;
    bottom: auto;
    z-index: 35;
  }

  .toast {
    bottom: 25px;
  }

  .secondary-nav {
    gap: clamp(16px, 2vw, 30px);
  }

  #homeGroup > .home-overview-header {
    display: flex;
  }

  #homeGroup > .destination-title {
    display: none;
  }

  #homeGroup > .home-overview-header .home-overview-add {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }

  #appShell:has(#homeGroup.active-page) main > .universal-add {
    display: none;
  }
}

/* The existing side-by-side Calendar has a narrow month-label slot at tablet
   widths. Fit its display text through type size, not a layout change. */
@media (min-width: 768px) and (max-width: 1023px) {
  #appShell #plansCalendar .plans-month-head {
    --font-size-heading: clamp(18px, 2.4vw, 26px);
  }
}

@media (max-width: 767px) {
  .app-shell {
    padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(140px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .desktop-rail {
    display: none;
  }

  /* Utilities live in the mobile masthead; the rail group must not float over
     capture or review content. The install action remains in the desktop rail. */
  .rail-utilities {
    display: none !important;
  }

  .topbar {
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 60;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0 14px;
    align-items: center;
  }

  .topbar::before {
    inset: -12px -16px -1px;
    width: auto;
    transform: none;
  }

  .topbar > .brand {
    display: block;
    flex: none;
    font-size: 29px;
  }

  .top-actions {
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
  }

  .top-actions .header-date {
    display: none;
  }

  /* Canonical transient/error status remains in the masthead and Settings. */
  .today-editorial .today-provenance {
    display: none;
  }

  .mobile-utilities {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .mobile-language-control {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: 500 11px/1 var(--sans);
    letter-spacing: .06em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-language-control #interfaceLanguage {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: transparent;
    font-size: 16px;
    opacity: 0;
    cursor: pointer;
  }

  .mobile-language-control #interfaceLanguage:focus-visible {
    outline: 2px solid var(--moss);
    outline-offset: 2px;
    box-shadow: none;
  }

  .mobile-language-control:focus-within {
    outline: 2px solid var(--moss);
    outline-offset: 2px;
  }

  .mobile-utilities #settingsBtn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
  }

  .mobile-utilities #settingsBtn .line-icon {
    width: 18px;
    height: 18px;
  }

  .cloud-header-status {
    display: none;
    max-width: min(110px, 32vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cloud-header-status[data-mobile-state="syncing"],
  .cloud-header-status[data-mobile-state="error"] {
    display: block;
    font-size: 10px;
    line-height: 1.2;
  }

  .cloud-header-status[data-mobile-state="error"] {
    color: var(--oxblood);
  }

  .bottom-nav {
    display: flex;
    justify-content: space-around;
    gap: 2px;
    box-sizing: border-box;
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .bottom-nav .tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .bottom-nav .shopping-count {
    position: absolute;
    top: 2px;
    right: calc(50% - 32px);
    margin: 0;
  }

  .bottom-nav .line-icon {
    width: 18px;
    height: 18px;
  }

  .universal-add {
    position: absolute;
    top: 2px;
    right: 0;
    bottom: auto;
    width: 44px;
    height: 44px;
  }

  button.universal-add {
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--moss-dark);
    color: var(--paper);
    font-size: 27px;
    box-shadow: none;
  }

  .secondary-nav {
    gap: 18px;
    margin-bottom: 24px;
  }

  .subtab {
    font-size: 13px;
  }

  #homeGroup > .home-overview-header {
    display: flex;
    min-height: 91px;
    margin: 0 0 10px;
    gap: 12px;
  }

  #homeGroup > .home-overview-header .home-overview-eyebrow {
    margin-bottom: 7px;
    font-size: 9px;
  }

  #homeGroup > .home-overview-header h1 {
    font-size: clamp(48px, 14vw, 58px);
  }

  #homeGroup > .home-overview-header .home-overview-add {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #homeGroup > .secondary-nav {
    gap: 15px;
    margin: 0 -16px 23px;
    padding-right: 16px;
    padding-left: 16px;
    scroll-snap-type: x proximity;
  }

  #homeGroup > .secondary-nav .subtab {
    scroll-snap-align: start;
  }

  /* Preserve the original mobile actions: Overview captures in Today;
     other destinations use the existing Add-information modal. Same anchor. */
  #appShell:has(#homeGroup.active-page #homeOverview.active-page) main > .universal-add {
    display: none;
  }

  #homeGroup:not(:has(#homeOverview.active-page)) > .home-overview-header .home-overview-add {
    display: none;
  }

  #appShell:not(:has(#homeGroup.active-page #homeOverview.active-page)) main > .universal-add {
    display: grid;
    place-items: center;
  }

  .today-welcome {
    padding-right: 56px;
  }
}

/* Today desktop returns to the quiet narrow-rail composition. Keep this
   destination-specific so the rest of the application shell is unchanged. */
@media (min-width: 768px) {
  #appShell:has(#today.active-page) {
    position: relative;
    padding: 44px clamp(52px, 6.8vw, 110px) var(--space-8)
      clamp(160px, 16vw, 230px);
  }

  #appShell:has(#today.active-page) .desktop-rail {
    width: 96px;
    min-width: 96px;
    padding: 20px 6px 18px;
  }

  #appShell:has(#today.active-page) .rail-brand {
    margin: 22px 0 48px;
  }

  #appShell:has(#today.active-page) .desktop-nav .tab.active::before {
    left: -6px;
  }

  #appShell:has(#today.active-page) .rail-utilities {
    left: 2px;
    width: 92px;
  }

  #appShell:has(#today.active-page) .rail-utilities #interfaceLanguage {
    width: 92px;
    min-width: 92px;
    padding-right: 17px;
    padding-left: 10px;
  }

  #appShell:has(#today.active-page) .topbar {
    position: absolute;
    top: 20px;
    right: clamp(52px, 6.8vw, 110px);
    z-index: 40;
    width: auto;
    min-height: 0;
    margin: 0;
  }

  #appShell:has(#today.active-page) .top-actions {
    min-height: 0;
  }

  #appShell:has(#today.active-page) .header-date {
    display: none;
  }

  #appShell:has(#today.active-page) .cloud-header-status {
    max-width: 190px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
  }

  #appShell:has(#today.active-page) .cloud-header-status.cloud-error {
    color: var(--oxblood);
  }

  #appShell:has(#today.active-page) .today-editorial > .today-provenance {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .secondary-nav {
    scroll-behavior: auto;
  }
  #homeGroup > .home-overview-header .home-overview-add {
    transition: none;
  }
}

@media print {
  .desktop-rail,
  .rail-utilities,
  .bottom-nav,
  .topbar,
  .universal-add {
    display: none !important;
  }

  .app-shell {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
  }
}

/* Mobile Today atmosphere. The original portrait stays proportional beneath a
   page-height ivory fade; this is paint only and leaves the shell geometry intact. */
@media (max-width: 767px) {
  #appShell:has(#today.active-page) {
    background-color: var(--ivory);
    background-image:
      linear-gradient(
        to bottom,
        rgba(244, 241, 233, .55) 0,
        rgba(244, 241, 233, .55) 29svh,
        var(--ivory) 42svh
      ),
      url("/objects/today-curtain-light.webp");
    background-position: left top, center top;
    background-size: 100% 100%, 100% auto;
    background-repeat: no-repeat;
  }

  /* Let a little of the image through at the masthead while keeping its
     established opaque-enough ivory paint for legibility when it sticks. */
  #appShell:has(#today.active-page) .topbar::before {
    background: rgba(244, 241, 233, .76);
  }

  /* The two small/quiet lines need the existing ink over the darker folds.
     Keep their approved type, spacing and hierarchy otherwise unchanged. */
  #appShell:has(#today.active-page) #todayEditorialDate,
  #appShell:has(#today.active-page) .today-welcome > p {
    color: var(--ink);
  }
}

/* =========================================================
   FOR’U vNext — consolidated global typography system
   Editorial display is reserved for meaningful hierarchy;
   operational text and controls remain Inter.
   ========================================================= */
html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Preserve existing domain token names as aliases to the approved pair. */
:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: var(--font-display);
  --sans: var(--font-ui);
  --tp-serif: var(--font-display);
  --tp-sans: var(--font-ui);
}

/* Normalize UA bold defaults without breaking weight inheritance in controls.
   Source declarations are limited to 400/500; rendered checks enforce this.
   Family overrides leave SVG and technical/icon fonts intact. */
#appShell :where(h1, h2, h3, h4, h5, h6, strong, b, th) {
  font-weight: 400;
}

#appShell :where(
  h1, h2, h3, h4, h5, h6, p, span, strong, small, label, button, a, li, time,
  summary, legend, dt, dd, th, td, input, textarea, select, option, b
):where(:not(.line-icon):not([class*="icon"])) {
  font-family: var(--font-ui);
}

#appShell :where(button, a, label, summary, select, input[type="button"], input[type="submit"]) {
  font-weight: 500;
}

#authGate :where(*) {
  font-weight: 400;
}

#authGate :where(h1, h2, h3, h4, p, span, strong, small, label, button, a, li, input) {
  font-family: var(--font-ui);
  font-weight: 400;
}

#authGate :where(button, a, label, input[type="button"], input[type="submit"]) {
  font-weight: 500;
}

#authGate h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 54px);
  font-weight: 400;
  line-height: 1.04;
}

#authGate input::placeholder {
  font-family: var(--font-ui);
  font-size: var(--font-size-ui-metadata);
  font-weight: 400;
}

/* Named editorial page headings. Ordinary card/status text stays UI sans. */
#appShell :is(
  .today-welcome h1,
  #homeGroup > .home-overview-header h1,
  .destination-title,
  .maintenance-operational-header h1,
  .thought-heading h2,
  #homeThoughts .thought-heading h2,
  .useful-header h2,
  .wtu-heading h2,
  .wtu-shell > h2,
  .hcu-heading h2,
  .in-heading h2,
  .plans-month-head h2,
  .plans-calendar-heading,
  .meal-editorial-heading,
  .trips-section-head h2,
  .passport-heading h2,
  .person-profile-heading h3,
  #detailContent[data-settings="true"] > .settings-sheet > h2,
  .tp-modal-title
) {
  font-family: var(--font-display);
  font-weight: 400;
}

#appShell .today-welcome h1 {
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.01em;
}

#appShell #homeGroup > .home-overview-header h1,
#appShell .destination-title,
#appShell .maintenance-operational-header h1 {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
}

#appShell .today-editorial .today-welcome > p {
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

#appShell .today-provenance .today-sync-summary {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
}

/* Today, To do, Delegated and similar group names remain small UI labels.
   The first Today section is the specifically rendered “Needs you” heading. */
#appShell :is(
  .today-editorial-date,
  .home-overview-eyebrow,
  .plans-masthead-eyebrow,
  .today-section-head h2,
  .section-label,
  .eyebrow,
  .kicker,
  .shopping-group h2,
  .delegation-eyebrow,
  .thought-date-heading,
  .thought-card-meta,
  .thought-search-label,
  .thought-results-heading,
  .maintenance-eyebrow,
  .passport-create-section h3,
  .tp-eyebrow
) {
  font-family: var(--font-ui);
  font-size: var(--font-size-ui-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#appShell #today .today-main > .today-section:first-child .today-section-head h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-heading);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
}

#appShell .today-provenance-top:has(.today-sync-summary:not([hidden]))::before {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#appShell .capture-main .capture-prompt {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
}

#appShell .capture-main #captureInput {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
}

#appShell .capture-main #captureInput::placeholder {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
}

/* Reusable primary editorial section-title surfaces across destinations. */
#appShell :is(
  .section-title h2,
  .page-title h2,
  #homeOverview .home-overview-index-heading h2,
  #homeOverview .home-overview-group-copy h3,
  #assets .household-editorial-heading h1,
  #assets .household-section-heading h2,
  .household-editorial-heading h1,
  .household-section-heading h2,
  #family .people-index-heading h2,
  #family .people-group-heading h3,
  .people-index-heading h2,
  .people-group-heading h3,
  .today-main > .today-section:first-child .today-section-head h2,
  .useful-header h2,
  .useful-panel-heading h3,
  .useful-panel-heading .section-title h3,
  .thought-heading h2,
  .wdu-heading h2,
  .in-heading h2,
  .meal-editorial-intro h1,
  .meal-plans-section-head h2,
  .shopping-heading h1,
  .travel-editorial-heading h2,
  .place-memory-browser-heading h2,
  .place-memory-section-head h2,
  .travel-detail-hero-copy h2,
  .place-memory-detail h2,
  .plans-month-head h2,
  .plans-selected-day h2,
  .delegation-overview-head h2,
  .wdu-modal h2,
  .maintenance-history > summary,
  .passport-heading h2,
  .person-profile-heading h3,
  #detailContent[data-settings="true"] > .settings-sheet > h2,
  .tp-modal-title,
  .wtu-heading h2,
  .wtu-shell > h2,
  .hcu-heading h2,
  .maintenance-section-heading h2,
  .tp-section-header h3,
  .tp-accommodation h3,
  .wtu-trip-section header h3,
  .hcu-toolbar h3,
  .trips-section-head h2,
  .meal-plans-section-head h2,
  .wdu-heading h2
) {
  font-family: var(--font-display);
  font-size: var(--font-size-heading);
  font-weight: 500;
  line-height: 1.1;
}

#appShell #homeGroup > .home-overview-header h1,
#appShell .destination-title,
#appShell .maintenance-operational-header h1 {
  font-weight: 500;
}

#appShell .trip-destination {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

/* Thoughts alone keeps its journal-like body in the display face. */
#appShell #homeThoughts .thought-body,
#appShell .thought-collection-view .thought-body {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Calm operational rows: tasks, calendar events, shopping and delegated work. */
#appShell :is(
  .today-row-body strong,
  .today-agenda-row .today-row-body button,
  .agenda-row strong,
  .calendar-event-title,
  .plans-event-title,
  .plans-agenda-event > strong,
  .plans-coming-copy strong,
  .calendar-card .calendar-event-title,
  .calendar-event strong,
  .shopping-name,
  .delegation-open-copy strong,
  .trip-task,
  .maintenance-task-title,
  .maintenance-row-main h3,
  .maintenance-history-row h3,
  .hcu-record-title strong,
  .hcu-metric-main strong,
  .people-record .people-name,
  .thought-card h4,
  .meal-recipe-body h3,
  .meal-recipe-title,
  .useful-row-title,
  .in-card-title,
  .passport-card-title,
  .wtu-record-main strong,
  .wtu-trip-row strong,
  .wtu-launcher strong,
  .wtu-empty h3,
  .wtu-originals h3,
  .wtu-upload-box strong,
  .wdu-card-title,
  .wdu-upload-placeholder strong,
  .delegation-helper-role,
  .delegation-helper-name,
  .delegation-person-name,
  .delegation-person-link,
  .household-open-row-title,
  .household-passport-name,
  .home-overview-link-label,
  .plans-agenda-date h2
) {
  font-family: var(--font-ui);
  font-size: var(--font-size-ui-body);
  font-weight: 400;
  line-height: 1.4;
}

#appShell :is(
  .today-row-body p,
  .today-row-body small,
  .row-copy,
  .row-meta,
  .item-copy,
  .doc-meta,
  .shopping-source,
  .trip-date,
  .trip-people,
  .today-provenance-note,
  .maintenance-detail,
  .maintenance-row-meta,
  .thought-card-detail,
  .thought-index-status,
  .thought-card-date,
  .hcu-record-title span,
  .cloud-header-status
) {
  font-family: var(--font-ui);
  font-size: var(--font-size-ui-metadata);
  font-weight: 400;
  line-height: 1.4;
}

#appShell :is(time, .agenda-row time, .today-agenda-row time, .plans-agenda-time) {
  font-family: var(--font-ui);
  font-size: var(--font-size-ui-metadata);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Domain metadata shares one quiet operational role. This also covers
   existing card/detail metadata without changing their containers. */
#appShell :is(
  [class*="-meta"]:where(:not([class*="label"]):not([class*="heading"])),
  .meal-recipe-source,
  .in-card-category,
  .wdu-card-meta
) {
  font-family: var(--font-ui);
  font-size: var(--font-size-ui-metadata);
  font-weight: 400;
  line-height: 1.4;
}

#appShell :is(
  .today-link,
  .today-calendar-link,
  .text-button,
  .settings-link,
  .row-action,
  .service-link,
  .subtab,
  .card-btn,
  .primary-btn,
  .soft-btn,
  .add-option,
  .shopping-tab,
  .wtu-back,
  .wtu-primary,
  .wtu-secondary,
  .tp-detail-link,
  .tp-add
) {
  font-family: var(--font-ui);
  font-size: var(--font-size-ui-control);
  font-weight: 500;
  letter-spacing: .02em;
}

#appShell .brand,
#appShell .rail-brand,
#appShell .brand .brand-apostrophe {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .04em;
}

#appShell .desktop-nav .tab,
#appShell .desktop-rail .tab {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}

#appShell .bottom-nav .tab {
  font-family: var(--font-ui);
  font-weight: 500;
}

#appShell :is(.shopping-count, .shopping-tab-count, .today-section-head h2 span, .count-badge) {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
}

/* A date eyebrow is a label, not an event time. */
#appShell .today-welcome .today-editorial-date {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
}

@media (min-width: 768px) {
  #appShell #today .today-main > .today-section:first-child .today-section-head h2 {
    font-size: 36px;
    line-height: 1.1;
  }
}

@media (max-width: 767px) {
  #appShell .today-welcome h1 {
    font-size: clamp(40px, 13.5vw, 56px);
  }

  #appShell .today-provenance .today-sync-summary {
    font-size: 22px;
  }

  #appShell .capture-main h2.capture-prompt {
    font-size: clamp(30px, 8.2vw, 32px);
  }

  #appShell .capture-main .capture-prompt,
  #appShell :is(
    #today .today-main > .today-section:first-child .today-section-head h2,
    .section-title h2,
    .page-title h2,
    #homeOverview .home-overview-index-heading h2,
    #homeOverview .home-overview-group-copy h3,
    #assets .household-editorial-heading h1,
    #assets .household-section-heading h2,
    .household-editorial-heading h1,
    .household-section-heading h2,
    #family .people-index-heading h2,
    #family .people-group-heading h3,
    .people-index-heading h2,
    .people-group-heading h3,
    .useful-header h2,
    .useful-panel-heading h3,
    .useful-panel-heading .section-title h3,
    .thought-heading h2,
    .wdu-heading h2,
    .in-heading h2,
    .meal-editorial-intro h1,
    .meal-plans-section-head h2,
    .shopping-heading h1,
    .travel-editorial-heading h2,
    .place-memory-browser-heading h2,
    .place-memory-section-head h2,
    .travel-detail-hero-copy h2,
    .place-memory-detail h2,
    .plans-month-head h2,
    .plans-selected-day h2,
    .delegation-overview-head h2,
    .wdu-modal h2,
    .maintenance-history > summary,
    .passport-heading h2,
    .person-profile-heading h3,
    #detailContent[data-settings="true"] > .settings-sheet > h2,
    .tp-modal-title,
    .wtu-heading h2,
    .wtu-shell > h2,
    .hcu-heading h2,
    .maintenance-section-heading h2,
    .tp-section-header h3,
    .tp-accommodation h3,
    #homeGroup > .home-overview-header h1,
    .destination-title,
    .maintenance-operational-header h1
  ) {
    font-size: clamp(29px, 8vw, 32px);
  }

  #appShell #today .today-main > .today-section:first-child .today-section-head h2 {
    font-size: clamp(30px, 8vw, 32px);
  }
}