/* FrenchieOS palette: five brand colors, with lighter/darker tints for readable UI. */
:root {
  --navy: #0f2d50;
  --teal: #14b8a6;
  --off-white: #f8f5ee;
  --charcoal: #1f2937;
  --coral: #ff7f6e;
  --navy-deep: #0a223d;
  --navy-wash: #e7edf2;
  --teal-deep: #08786d;
  --teal-wash: #ddf5f1;
  --coral-wash: #ffe4de;
  --line-brand: #d8e1e4;
  --muted-brand: #52616d;

  --bg: var(--off-white);
  --bg-soft: #fcfaf6;
  --card: #fff;
  --text: var(--charcoal);
  --muted: var(--muted-brand);
  --line: var(--line-brand);
  --primary: var(--navy);
  --primary-dark: var(--navy-deep);
  --secondary: var(--coral-wash);
  --success: var(--teal-deep);
  --warning: #985043;
  --danger: #a13b34;
  --shadow: 0 18px 40px rgba(15, 45, 80, .09);

  --club-plum: var(--navy);
  --club-ink: var(--charcoal);
  --club-coral: var(--coral);
  --club-peach: var(--coral-wash);
  --club-mint: var(--teal-wash);
  --club-lime: var(--teal);
  --club-lilac: var(--navy-wash);
  --club-cream: var(--off-white);
}

html, body { background: var(--off-white); color: var(--charcoal); }
body:not(.is-assessment) { background: var(--navy-deep); }
body:not(.is-assessment) .app-shell { box-shadow: 0 0 75px rgba(10, 34, 61, .22); }

/* Quiz, results, and paywall */
.pill { background: var(--navy-wash); border-color: var(--line-brand); color: var(--navy); }
.pill.soft { background: var(--coral-wash); border-color: #ffc4ba; color: var(--navy); }
.secondary-btn { background: var(--coral-wash); border-color: #ffc4ba; color: var(--navy); }
.ghost-btn { color: var(--navy); }
.progress-bar { background: var(--navy-wash); }
.progress-fill { background: linear-gradient(90deg, var(--teal-deep), var(--teal)); }
.option-btn:hover { border-color: var(--teal); }
.option-btn.selected { border-color: var(--teal-deep); background: var(--teal-wash); box-shadow: inset 0 0 0 1px rgba(20, 184, 166, .2); }
.field-group input:focus { border-color: var(--teal-deep); box-shadow: 0 0 0 4px rgba(20, 184, 166, .16); }
.emergency-card { border-color: #ffc4ba; background: linear-gradient(180deg, #fff, #fff5f2); }
.emergency-badge { background: var(--coral-wash); border-color: #ffc4ba; color: #81352f; }
.emergency-text { color: var(--muted-brand); }
.reason-box { border-color: #ffc4ba; }
.emergency-note { background: #fff5f2; border-color: #ffc4ba; color: #81352f; }
.status-good { background: var(--teal-wash); border-color: #b7e8df; color: var(--teal-deep); }
.status-track { background: var(--navy-wash); border-color: var(--line-brand); color: var(--navy); }
.status-watch { background: var(--coral-wash); border-color: #ffc4ba; color: #8c4338; }
.status-review { background: #fff5f2; border-color: #ffc4ba; color: #a13b34; }
.form-message { background: var(--teal-wash); border-color: #b7e8df; color: var(--teal-deep); }
.pricing-card.featured { border-color: var(--teal); box-shadow: 0 14px 40px rgba(20, 184, 166, .14); }
.featured-tag { background: var(--teal-wash); border-color: #b7e8df; color: var(--teal-deep); }
.price-save { color: var(--teal-deep); }

/* Shared app header, dog picker, and dashboard */
.club-app button:focus-visible, .club-app a:focus-visible,
.dog-switch:focus-visible, .dog-menu button:focus-visible { outline-color: var(--coral); }
.dog-profile-kicker, .dog-profile-header p,
.calendar-page-kicker, .calendar-page-header p { color: #e7edf1; }
.dog-switch { box-shadow: 0 10px 24px rgba(10, 34, 61, .2); }
.dog-switch img, .dog-menu button[role="menuitemradio"] img { background: var(--off-white); }
.dog-switch small, .dog-menu button[role="menuitemradio"] small,
.dog-menu-heading small { color: var(--muted-brand); }
.dog-switch svg { stroke: var(--navy); }
.dog-menu { border-color: var(--line-brand); box-shadow: 0 18px 40px rgba(10, 34, 61, .24); }
.dog-menu.has-more-dogs .dog-options-list { scrollbar-color: var(--teal-deep) var(--teal-wash); }
.dog-options-list::-webkit-scrollbar-track { background: var(--teal-wash); }
.dog-options-list::-webkit-scrollbar-thumb { background: var(--teal-deep); }
.dog-menu button[role="menuitemradio"]:hover,
.dog-menu button[aria-checked="true"] { background: var(--teal-wash); }
.dog-menu .dog-add { border-color: var(--teal); }
.dog-menu .dog-profile-link { background: var(--navy-wash); }
.club-hero { background: linear-gradient(135deg, #ffb0a3, var(--coral) 78%); box-shadow: 0 18px 28px rgba(15, 45, 80, .15); }
.club-kicker { color: var(--navy); }
.club-kicker i { background: var(--teal-deep); }
.club-hero-copy p { color: var(--navy); }
.club-hero-copy button { box-shadow: 0 7px 13px rgba(15, 45, 80, .2); }
.hero-sun { background: var(--coral-wash); }
.club-section-heading > div > span { color: var(--teal-deep); }
.today-progress { background: var(--teal-wash); color: var(--teal-deep); }
.next-care { background: var(--teal-wash); box-shadow: 0 8px 18px rgba(15, 45, 80, .09); }
.next-care-icon { background: #fff; }
.next-care-eyebrow, .next-care p { color: var(--navy); }
.next-care.all-done { background: var(--navy-wash); }
.rhythm-track::before { background: var(--line-brand); }
.rhythm-item { box-shadow: 0 7px 20px rgba(15, 45, 80, .06); }
.rhythm-item.due { background: var(--coral-wash); }
.rhythm-time, .rhythm-copy small, .recent-log,
.health-disclaimer { color: var(--muted-brand); }
.rhythm-dot { background: var(--teal-deep); }
.rhythm-state { color: var(--teal-deep); }
.rhythm-item.due .rhythm-state { color: #81352f; }
.corner-breath { background: #bdebe4; }
.corner-skin { background: var(--navy-wash); }
.corner-weight { background: var(--coral-wash); }
.corner-play { background: #ffc4ba; }
.club-shortcuts button { border-color: var(--line-brand); }
.club-shortcuts button:nth-child(1), .club-shortcuts button:nth-child(4) { border-bottom-color: var(--coral); }
.club-shortcuts button:nth-child(2) { border-bottom-color: var(--teal); }
.club-shortcuts button:nth-child(3) { border-bottom-color: var(--navy); }

/* Dog profile and each dog's calendar */
.dog-profile-page { background: var(--off-white); }
.dog-profile-header { background: radial-gradient(circle at 92% 12%, #2e5273 0 72px, transparent 73px), linear-gradient(140deg, var(--navy), #214969); }
.profile-card, .calendar-card, .agenda-entry, .visit-note { border-color: var(--line-brand); box-shadow: 0 9px 25px rgba(15, 45, 80, .06); }
.profile-section-heading span { color: var(--teal-deep); }
.profile-card > p, .profile-health p,
.profile-health-group > summary small,
.profile-storage-note { color: var(--muted-brand); }
.profile-photo-preview, .profile-gallery button[aria-pressed="true"],
.profile-health-note { background: var(--navy-wash); }
.profile-photo-preview img { background: var(--coral-wash); }
.profile-gallery button { border-color: var(--line-brand); background: #fff; }
.profile-fields label em, .profile-check,
.profile-health-field summary { color: var(--muted-brand); }
.profile-fields input:not([type="checkbox"]), .profile-fields select,
.profile-health-field select, .profile-health-field textarea,
.profile-health-field details { border-color: var(--line-brand); }
.profile-fields input:focus, .profile-fields select:focus,
.profile-health-field select:focus, .profile-health-field textarea:focus { box-shadow: 0 0 0 3px var(--teal-wash); }
.profile-save, .profile-quiz-button { box-shadow: 0 9px 18px rgba(15, 45, 80, .16); }
.profile-quiz-button { background: var(--coral); color: var(--navy); }
.profile-quiz-button:disabled { background: var(--navy-wash); color: var(--muted-brand); }
.profile-health-group { border-color: var(--line-brand); background: #fff; }
.profile-saved-note { color: var(--teal-deep); }
.calendar-page-header { background: linear-gradient(135deg, var(--navy), #214969); }
.calendar-today { border-color: var(--line-brand); background: var(--navy-wash); }
.calendar-toolbar { background: var(--teal-wash); }
.calendar-weekdays, .calendar-agenda-head span,
.calendar-empty, .agenda-entry-copy small,
.agenda-entry-copy em, .agenda-panel form label span { color: var(--muted-brand); }
.calendar-day.is-today:not([aria-pressed="true"]) { background: var(--teal-wash); }
.calendar-day i { background: var(--coral); }
.calendar-day[aria-pressed="true"] i { background: var(--teal); }
.calendar-agenda { border-top-color: var(--line-brand); background: #fcfaf6; }
.calendar-empty { border-color: var(--line-brand); }
.agenda-entry-icon { background: var(--navy-wash); }
.agenda-entry-icon.agenda-activity { background: var(--teal-wash); }
.agenda-entry-icon.agenda-reminder, .agenda-entry-icon.agenda-care { background: var(--coral-wash); }
.agenda-entry-icon.agenda-note { background: var(--navy-wash); }
.agenda-entry-chevron { color: var(--navy); }
.agenda-panel input, .agenda-panel select,
.log-panel textarea { border-color: var(--line-brand); }
.agenda-form-actions .agenda-delete { border-color: #ffc4ba; background: var(--coral-wash); color: #81352f; }
.sunny-note { background: var(--coral-wash); }
.sunny-icon { background: var(--coral); color: var(--navy); }
.sunny-note span, .sunny-note p { color: var(--navy); }
.visit-calendar { background: var(--teal-wash); }
.visit-note > span:nth-child(2) small { color: var(--teal-deep); }
.visit-note em { color: var(--muted-brand); }
.visit-note button { background: var(--navy-wash); }

/* Bottom navigation, support chat, and sheets */
.club-nav { border-color: #325677; background: linear-gradient(125deg, var(--navy-deep), var(--navy) 78%, #214969); box-shadow: 0 12px 30px rgba(10, 34, 61, .3), inset 0 1px rgba(255,255,255,.18); }
.club-nav button { color: #e7edf1; }
.club-nav .active, .club-nav .active:hover { color: var(--navy-deep); box-shadow: 0 4px 0 rgba(10, 34, 61, .26), inset 0 1px rgba(255,255,255,.45); }
.support-fab { border-color: var(--off-white); background: var(--coral); color: var(--navy); box-shadow: 0 7px 0 rgba(10, 34, 61, .26), 0 12px 20px rgba(10, 34, 61, .22); }
.support-ping { border-color: var(--off-white); background: var(--teal); }
.support-backdrop { background: rgba(10, 34, 61, .58); }
.support-panel, .log-panel { background: #fcfaf6; box-shadow: 0 20px 60px rgba(10, 34, 61, .25); }
.support-header img { background: #214969; }
.support-header span { color: #e7edf1; }
.support-message.helper { background: var(--teal-wash); }
.support-topics button, .support-compose input { border-color: var(--line-brand); }
.support-compose { border-top-color: var(--line-brand); }
.log-panel header span { color: var(--teal-deep); }
.log-panel header button { background: var(--navy-wash); }
.log-panel p { color: var(--muted-brand); }
.preview-toast { box-shadow: 0 8px 22px rgba(10, 34, 61, .18); }

/* Feature preview screens: same component layout, new tone families. */
.feature-page-header { background: radial-gradient(circle at 90% 14%,rgba(255,255,255,.13) 0 72px,transparent 73px),linear-gradient(145deg,var(--navy),#214969); }
.feature-preview-label { color: var(--teal-deep); }
.feature-preview-label span { color: #985043; }
.feature-tone-peach { --feature-tone: var(--coral-wash); --feature-ink: var(--navy); }
.feature-tone-mint { --feature-tone: var(--teal-wash); --feature-ink: var(--navy); }
.feature-tone-lime { --feature-tone: #bdebe4; --feature-ink: var(--navy); }
.feature-tone-lilac { --feature-tone: var(--navy-wash); --feature-ink: var(--navy); }
.feature-spotlight { box-shadow: 0 10px 22px rgba(15, 45, 80, .1); }
.feature-spotlight p, .feature-note p { color: var(--navy); }
.feature-spotlight-mark { color: rgba(15, 45, 80, .1); }
.feature-link-list, .feature-facts, .feature-card { border-color: var(--line-brand); box-shadow: 0 9px 25px rgba(15, 45, 80, .06); }
.feature-link-row, .feature-record, .feature-check { border-bottom-color: var(--line-brand); }
.feature-link-copy small, .feature-record small, .feature-check small,
.feature-chart-caption, .feature-chart small { color: var(--muted-brand); }
.feature-link-arrow { color: var(--navy); }
.feature-facts > div { border-right-color: var(--line-brand); }
.feature-facts small, .feature-record > span { color: var(--teal-deep); }
.feature-check > span { border-color: var(--line-brand); }
.feature-form-grid input { border-color: var(--line-brand); background: #fff; color: var(--charcoal); }
.feature-chart { border-bottom-color: var(--line-brand); }
.feature-chart > div > span { background: linear-gradient(var(--teal), var(--teal-deep)); }
.feature-chart > div:nth-child(2n) > span { background: linear-gradient(#ffb0a3, var(--coral)); }
.feature-page button:focus-visible, .feature-page input:focus-visible { outline-color: var(--coral); }

@media (max-width: 355px) {
  .topbar { gap: 4px; padding-inline: 12px; }
  .topbar-actions { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
  #restartBtn { padding-inline: 8px; }
}

/* Unified light brand row, with the navy dashboard kept as a rounded card. */
.brand-wrap.brand-lockup,
.club-logo.brand-lockup {
  display: flex;
  align-items: center;
  gap: 2px;
  width: auto;
  height: 56px;
  flex: 0 0 auto;
  min-width: 0;
  color: var(--navy);
  background: transparent;
  text-decoration: none;
}
.brand-icon { display: block; width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; }
.brand-copy { display: grid; align-content: center; min-width: 0; }
.brand-heading { display: flex; align-items: center; gap: 1px; white-space: nowrap; }
.brand-word { color: var(--navy); font: 800 24px/.95 var(--font-ui); letter-spacing: -.065em; }
.brand-os-pill { display: inline-flex; align-items: center; justify-content: center; height: 31px; padding: 0 5px 1px; border-radius: 15px; background: var(--teal); color: #fff; font: 800 24px/.95 var(--font-ui); letter-spacing: -.07em; box-shadow: none; text-shadow: none; filter: none; }
.brand-tagline,
.club-logo .brand-tagline { display: block; margin-top: 3px; color: var(--muted-brand); font: 600 8px/1.1 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.club-top { background: var(--off-white); }
.club-top::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 85px 0 0;
  border-radius: 33px 33px 38px 38px;
  background:
    radial-gradient(circle at 102% 15%, rgba(255,255,255,.10) 0 78px, transparent 79px),
    radial-gradient(circle at -8% 67%, rgba(255,255,255,.06) 0 95px, transparent 96px),
    var(--navy);
  transform: none;
}
.club-top::after { z-index: 1; }
.club-header { align-items: center; gap: 8px; }
.club-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.club-header-actions button.brand-bell,
.club-header-actions button.brand-profile,
.topbar-actions .brand-bell,
.topbar-actions .brand-profile {
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
.club-header-actions button.brand-bell,
.topbar-actions .brand-bell { background-image: url("./assets/frenchieos-bell.svg"); }
.club-header-actions button.brand-profile,
.topbar-actions .brand-profile { background-image: url("./assets/frenchieos-profile.svg"); }
.club-header-actions button:focus-visible,
.topbar-actions .brand-bell:focus-visible,
.topbar-actions .brand-profile:focus-visible,
.brand-lockup:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }
.club-top { padding-bottom: 30px; }
.walk-weather { position: relative; z-index: 2; min-height: 38px; margin: 0 2px 11px; padding: 3px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: rgba(255,255,255,.09); color: #fff; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 7px; }
.walk-weather > img { width: 25px; height: 25px; }
.walk-weather-copy { min-width: 0; display: flex; align-items: center; gap: 7px; }
.walk-weather-copy strong { color: #fff; font: 800 13px/1.15 var(--font-ui); white-space: nowrap; }
.walk-weather-copy small { padding: 3px 4px; border-radius: 4px; background: rgba(255,255,255,.13); color: #d8f4ef; font-size: 9px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.walk-weather-temp { color: #fff; font: 800 15px/1 var(--font-ui); white-space: nowrap; }
.club-hero { min-height: 177px; border-radius: 24px; }
.club-hero::before { top: -70px; right: -75px; width: 185px; height: 185px; border-width: 22px; }
.club-hero-copy { width: 66%; padding: 15px 0 15px 17px; }
.club-kicker { padding: 5px 8px; font-size: 9px; letter-spacing: .035em; }
.club-hero h2 { margin: 9px 0 13px; font-size: clamp(24px, 6.7vw, 29px); line-height: 1.03; }
.club-hero-copy p { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.club-hero-copy button { min-height: 43px; padding: 0 11px; border-radius: 12px; font-size: 12px; }
.club-hero-copy button span { margin-left: 3px; font-size: 16px; }
.club-hero-art { right: -17px; top: 5px; width: 46%; height: 168px; }
.hero-sun { inset: 0 0 0 0; }
.club-hero-art img { top: 0; right: -8px; width: 169px; height: 169px; }

@media (max-width: 640px) {
  .topbar { align-items: flex-start; }
  .topbar-actions { display: flex; flex: 1; min-width: 88px; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; gap: 5px; }
  .topbar-actions #restartBtn { order: 3; }
}
@media (max-width: 355px) {
  .brand-wrap.brand-lockup,
  .club-logo.brand-lockup { height: 46px; gap: 1px; }
  .brand-icon { width: 46px; height: 46px; flex-basis: 46px; }
  .brand-word { font-size: 20px; }
  .brand-os-pill { height: 26px; padding-inline: 4px; border-radius: 13px; font-size: 20px; }
  .brand-tagline,
  .club-logo .brand-tagline { margin-top: 2px; font-size: 6.5px; }
  .club-top::before { top: 77px; }
  .club-header { gap: 2px; }
  .club-header-actions { gap: 2px; }
  .club-header-actions button.brand-bell,
  .club-header-actions button.brand-profile,
  .topbar-actions .brand-bell,
  .topbar-actions .brand-profile { flex-basis: 38px; width: 38px; height: 38px; }
  .topbar-actions { min-width: 79px; gap: 3px; }
  .topbar-actions #restartBtn { min-height: 32px; padding: 6px 3px; font-size: 11px; white-space: nowrap; }
  .walk-weather { grid-template-columns: 25px minmax(0,1fr) auto; gap: 5px; padding-inline: 7px; }
  .walk-weather > img { width: 23px; height: 23px; }
  .walk-weather-copy { gap: 5px; }
  .walk-weather-copy small { font-size: 8px; }
  .walk-weather-copy strong { font-size: 12px; }
  .walk-weather-temp { font-size: 14px; }
  .club-hero { min-height: 174px; }
  .club-hero-copy { width: 68%; padding-left: 15px; }
  .club-hero h2 { font-size: 23px; }
  .club-hero-art { right: -27px; width: 46%; }
  .club-hero-art img { right: -15px; width: 164px; height: 164px; }
}