/* Shared Blush & sky controls with the approved Soft Linen site background. Layout and type remain in style.css. */
:root{
 --brand-pink:#f6dee9;
 --brand-blue:#dceaf8;
 --brand-surface:#fffcf9;
 --brand-primary:#345c7b;
 --brand-primary-hover:#294a65;
 --brand-love:#9d3f61;
 --brand-love-surface:#fff0f5;
 --brand-maybe-surface:#e5f0fa;
 --brand-focus:#963d67;
 --brand-error:#ac342b;
 --paper:#fff9f4;
 --ink:#26394a;
 --muted:#56616d;
 --line:#d8dce3;
 --sage:var(--brand-maybe-surface);
 --accent:var(--brand-focus);
 --teal:var(--brand-primary);
 --field-border:#8192a3;
}

body{
 background-color:#f0eae4;
 background-image:none;
 color:var(--ink);
}
header{background-color:var(--brand-surface);border-bottom-color:var(--line)}
.brand,.card .nameButton{color:var(--ink)}
.brand .dot,.intro .eyebrow{color:var(--brand-love)}
.intro h1 em,.name-arrow{color:var(--brand-primary)}
nav .active{background-color:var(--brand-maybe-surface);border-color:var(--field-border);color:var(--brand-primary)}

.intro{
 border-color:var(--line);
 background-color:var(--brand-surface);
 background-image:linear-gradient(rgba(255,252,249,.52),rgba(255,252,249,.52)),url('/hero-clouds-v2.webp');
}
.filters{background-color:var(--brand-surface);border-color:var(--line);border-top-color:var(--field-border)}
.card{background-color:var(--brand-surface);border-color:var(--line)}
.card-usage{border-top-color:var(--line)}
button:hover{background-color:var(--brand-maybe-surface)}
button.primary,.name-sharing>summary{background-color:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
button.primary:hover,.name-sharing>summary:hover{background-color:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:#fff}
.card .actions button:hover{border-color:var(--field-border)}

.card .actions [data-love-id],.detail-choices [data-love-id]{color:var(--brand-love);background-color:var(--brand-love-surface);border-color:var(--brand-love)}
.card .actions [data-love-id].saved,.detail-choices [data-love-id].saved,
.comparison-choices button[data-love-id][aria-pressed="true"]{color:#fff;background-color:var(--brand-love);border-color:var(--brand-love)}
.card .actions [data-maybe-id],.detail-choices [data-maybe-id]{color:var(--brand-primary);background-color:var(--brand-surface);border-color:var(--field-border)}
.card .actions [data-maybe-id].saved,.detail-choices [data-maybe-id].saved,
.comparison-choices button[data-maybe-id][aria-pressed="true"]{color:var(--brand-primary);background-color:var(--brand-maybe-surface);border-color:var(--brand-primary)}
.comparison-choices button[data-love-id]{color:var(--brand-love)}
.comparison-choices button[data-maybe-id]{color:var(--brand-primary)}

.badge{background-color:var(--brand-maybe-surface);color:var(--brand-primary);border-color:var(--line)}
.card .check input,.check input{accent-color:var(--brand-primary)}
.chart circle{fill:var(--brand-primary)}
.chart text{fill:var(--muted)}
.history-chart,.chart{background-color:var(--brand-surface)}
.compare-guide,.name-comparison thead th,.name-comparison thead th:first-child,
.comparison-name-rail,.comparison-name-rail th:first-child{background-color:var(--brand-maybe-surface);border-color:var(--field-border)}
.name-comparison th:first-child{background-color:var(--paper)}
.comparison-name-rail .name-comparison th:first-child{background-color:var(--brand-maybe-surface)}

.name-sharing>.share-panel,.device-choices-settings,.search-mode-notice{background-color:var(--brand-maybe-surface);border-color:var(--field-border)}
.share-actions a{border-color:var(--field-border)}
.baby-card-callout{background-color:var(--brand-love-surface);border-color:var(--line);border-left-color:var(--brand-love);color:var(--ink)}
.account-notice{background-color:var(--brand-love-surface);border-color:var(--brand-love)}
.guest-login-hint a,.preferences-shortcut[aria-pressed="true"]{color:var(--brand-primary)}
footer{background-color:var(--brand-surface)}
dialog::backdrop{background-color:rgba(38,57,74,.50)}
.share-actions :focus-visible,.name-sharing summary:focus-visible,.baby-card-callout-action:focus-visible,
.guest-login-hint a:focus-visible,#resultsTitle:focus,#shortlistTitle:focus,.share-preview:focus,
#comparison:focus-visible,.scroll-top:focus-visible{outline-color:var(--brand-focus)}
#country.country-attention{outline-color:var(--brand-error)}
.scroll-top{color:var(--brand-primary);background-color:var(--brand-surface);border-color:var(--field-border)}
.scroll-top:hover{background-color:var(--brand-maybe-surface)}
@media print{body{background-color:#fff;background-image:none}}


/* Family circle joins the existing navigation; keep account and navigation rows compact. */
header{flex-wrap:wrap}
header nav{min-width:0}
header nav .family-nav-link{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:10px 16px;border:1px solid var(--line);
 border-radius:8px;text-decoration:none;text-align:center;
 color:var(--ink);font:inherit;white-space:nowrap;
}
header nav .family-nav-link:hover{background-color:var(--brand-maybe-surface)}
header nav .family-nav-link:focus-visible{outline:3px solid var(--brand-focus);outline-offset:3px}
@media(min-width:561px) and (max-width:1100px){
 header nav{order:1;width:100%;margin-left:0}
 header .pill{display:none}
}
@media(min-width:561px) and (max-width:900px){
 header nav .family-nav-link{padding:8px}
}
@media(max-width:560px){
 header nav{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-column:1/-1;grid-row:2;width:100%;margin:0;gap:6px;
 }
 header nav button,header nav .family-nav-link{
  min-width:0;min-height:44px;padding:6px 4px;
  font-size:12.5px;line-height:1.25;white-space:normal;overflow-wrap:normal;
 }
 header nav #listNav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
 header nav .nav-shortlist-prefix{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 header nav .nav-shortlist-label{text-transform:capitalize}
 header nav #savedCount{white-space:nowrap;line-height:1.25}
 header nav #openSettings{grid-column:auto;grid-row:auto;justify-self:stretch;padding:6px 4px}
}

/* Explain Family Circle without adding another navigation control. */
header nav .family-nav-link{flex-direction:column;gap:2px}
header nav .family-nav-purpose{font-size:11px;line-height:1.2;font-weight:400}
@media(max-width:560px){header nav .family-nav-purpose{font-size:10.5px}}