/* PAREA 0.7.26: the top controls share the garden's quiet, illustrated palette.
   Decorative layers never obscure labels, keyboard focus or touch controls. */
body.visual-refresh .topbar {
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse 230px 110px at 2% 20%,rgba(180,215,179,.32),transparent 75%),
    radial-gradient(ellipse 180px 90px at 77% 2%,rgba(250,218,174,.30),transparent 75%),
    radial-gradient(ellipse 200px 120px at 101% 95%,rgba(238,206,218,.38),transparent 75%),
    linear-gradient(108deg,#eaf2e4 0%,#f8f9ed 47%,#fff4e5 75%,#f5ebec 100%) !important;
  border-bottom:1px solid #d5dec8;
  box-shadow:0 7px 22px rgba(49,84,61,.065),inset 0 1px 0 rgba(255,255,255,.75);
}
body.visual-refresh .topbar::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("assets/header-garden-pattern.svg") center center / 910px 150px repeat-x;
  opacity:.43;
}
body.visual-refresh .topbar > * { position:relative; z-index:1; }
body.visual-refresh .topbar .breadcrumb,
body.visual-refresh .topbar .breadcrumb strong {color:#345b4a}
body.visual-refresh .topbar .welcome-top-link,
body.visual-refresh .topbar .age-top-button,
body.visual-refresh .topbar .round-button,
body.visual-refresh .topbar .profile-button,
body.visual-refresh .topbar .quiet-btn {
  color:#315845;
  transition:background-color .2s ease,box-shadow .2s ease,border-color .2s ease;
}
body.visual-refresh .topbar .welcome-top-link,
body.visual-refresh .topbar .age-top-button,
body.visual-refresh .topbar .round-button{
  background:rgba(255,254,249,.83);
  border:1px solid rgba(162,187,156,.53);
  box-shadow:0 2px 7px rgba(55,87,60,.045);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
body.visual-refresh .topbar .quiet-btn,
body.visual-refresh .topbar .profile-button {
  border:1px solid transparent;
  border-radius:14px;
  background:rgba(255,253,244,.36);
}
body.visual-refresh .topbar .quiet-btn[aria-pressed="true"] {background:#e1ecdc;border-color:#b9ceb5}
@media(hover:hover){
  body.visual-refresh .topbar :is(.welcome-top-link,.age-top-button,.round-button,.quiet-btn,.profile-button):hover {
    background:#fffefa;
    border-color:#a5c3a6;
    box-shadow:0 3px 10px rgba(57,93,68,.085);
  }
}
body.visual-refresh .topbar :is(button,a):focus-visible {
  outline:3px solid #438270;
  outline-offset:3px;
}
@media(max-width:935px){
  body.visual-refresh .topbar{box-shadow:0 4px 13px rgba(49,84,61,.06)}
  body.visual-refresh .topbar::before{opacity:.35;background-size:780px 140px}
}
@media(max-width:650px){
  body.visual-refresh .topbar{padding-top:9px;padding-bottom:9px}
  body.visual-refresh .topbar .top-actions{position:relative;scrollbar-width:none}
  body.visual-refresh .topbar::before{opacity:.26}
}
@media(prefers-contrast:more){body.visual-refresh .topbar::before{opacity:.12}}
@media print{body.visual-refresh .topbar::before{display:none}}
/* Medium desktop widths: keep a complete line of controls together.
   This avoids leaving the profile selector alone on a third row. */
@media(min-width:936px) and (max-width:1400px){
  body.visual-refresh .topbar.has-public-version{grid-template-columns:minmax(0,1fr);row-gap:7px}
  body.visual-refresh .topbar.has-public-version>.breadcrumb{grid-column:1;grid-row:1}
  body.visual-refresh .topbar.has-public-version>.top-actions{
    grid-column:1;grid-row:2;justify-self:stretch;justify-content:flex-end;
    width:100%;min-width:0;max-width:100%;flex-wrap:nowrap;gap:8px;
    overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain;
  }
  body.visual-refresh .topbar.has-public-version>.top-actions::-webkit-scrollbar{display:none}
  body.visual-refresh .topbar.has-public-version>.public-version{grid-column:1;grid-row:1;justify-self:end}
}