/* Site shell extras: nav quick-search, search results. Loaded on every page by layout.js. */
/* Search lives at the right end of the nav row (dropping under the tabs on phones), tucked in like another tab. */
.quick-search { display: flex; gap: 6px; align-items: center; margin: 8px 0 10px; flex: none; }
.quick-search input { width: 11rem; margin: 0; padding: 6px 14px; border-width: 2px; border-radius: 999px; box-shadow: var(--shadow-sm); }
@media (max-width: 560px) {
  .quick-search { flex: 1 1 100%; margin: 0 0 10px; }
  .quick-search input { width: auto; flex: 1; min-width: 0; }
}

.search-group h2 small { font: 600 var(--fs-sm) var(--body); margin-left: 6px; }
.search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.search-art { display: flex; align-items: center; gap: 10px; }
.search-art svg { flex: none; }
kbd { font: 700 .9em var(--body); padding: 0 .4em; border: 2px solid var(--ink); border-radius: 6px; background: var(--tint); }

/* Settings page, and what two of its switches do. .reduce-motion copies style.css's prefers-reduced-motion rule. */
.settings-form { display: grid; gap: 14px; max-width: 560px; }
.settings-toggle { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.settings-toggle input { flex: none; margin-top: .3em; }
.settings-toggle span { display: grid; }
.settings-toggle small { font-size: var(--fs-sm); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.compact { --gap: 10px; --gap-sm: 6px; }
.compact .site-head { padding-top: 8px; padding-bottom: 10px; }
.compact .site-body { padding-top: 10px; }
.compact .card { padding: 12px 16px; }
#restore-form input[type=file] { width: 17em; }

/* Footer ♪ toggle for land music (public/music.js unhides it). Lit up while music is on. */
.music-toggle { font: 700 var(--fs-sm) var(--display); color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; margin-left: 8px; cursor: pointer; }
.music-toggle[aria-pressed="true"] { background: var(--pick); }
.music-toggle[hidden] { display: none; }

/* ---------- Tablet and phone shell ----------
   768-1024px: all tabs in one top row, search folds into a header icon that opens a popover.
   Up to 767px: a fixed bottom tab bar (four tabs + a More sheet), a one-line header, and a slim pet bar. */
.site-nav .nav-ic, .search-btn, .tab-morebtn, .acct-sky, .pet-toggle, .narrow-only { display: none; }
.sheet, .search-pop { margin: 0; padding: 10px; color: var(--ink); background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: visible; }
.sheet:not(:popover-open), .search-pop:not(:popover-open) { display: none; }
.search-pop { inset: 88px 16px auto auto; width: min(360px, calc(100vw - 32px)); }
.search-pop form { display: flex; gap: 8px; margin: 0; }
.search-pop input { flex: 1; min-width: 0; margin: 0; }
.search-pop .btn { min-height: 44px; }
.sheet::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.search-btn { align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; background: #fff; border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm); }
.search-btn:hover, .search-btn[aria-expanded="true"] { background: var(--pick); }

@media (max-width: 1024px) {
  .quick-search { display: none; }
  .search-btn { display: inline-flex; }
}
/* 9 tabs across 768px: tighter tabs, no sideways scrolling. */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-nav ul { overflow: visible; gap: 6px; }
  .site-nav a { padding: 8px 6px; font-size: .92rem; } /* 6px sides: 9 logged-in tabs fit 768px with room to spare */
}

@media (max-width: 767px) {
  :root { --bar-h: 64px; }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

  /* Header on one line: logo, search, coins, bell, menu. Mail lives in More; the sky clock and land chip move into the menu. */
  .site-head { flex-wrap: nowrap; gap: 8px; padding: 8px 10px 12px; }
  .logo { flex: 0 1 150px; min-width: 0; }
  .site-head:not(.signed-in) .logo { flex-shrink: 0; flex-basis: 140px; } /* logged out there is room: search, Log in, Join */
  @media (max-width: 359px) { /* 320px logged out: logo, search, Log in and Join need 365px at full size */
    .site-head:not(.signed-in) .logo { flex-shrink: 1; min-width: 104px; }
    .site-head:not(.signed-in) .who > .btn { padding-inline: 10px; }
  }
  .logo svg { height: auto; width: 100%; }
  .land-chip, .who-mail, .charms .sky-charm { display: none; }
  .who { flex: none; margin-left: auto; gap: 8px; }
  .charms { gap: 8px; }
  .charm { min-width: 44px; min-height: 44px; padding: 0; }
  .coins { min-height: 44px; padding: 0 10px; font-size: .95rem; }
  .account summary { padding: 2px; }
  .account-panel { width: min(260px, calc(100vw - 20px)); }
  .account-panel a, .account-panel button { min-height: 44px; align-content: center; }
  .acct-sky { display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px; border-bottom: 2px dashed var(--rule); }
  .acct-sky .sky-charm { cursor: default; }
  .acct-sky a { padding: 8px 12px; min-height: 44px; align-content: center; background: color-mix(in oklab, var(--land-accent) 18%, #fff); border: 2px solid var(--ink); border-radius: 999px; }
  .who > .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .search-pop { inset: 68px 10px auto 10px; width: auto; }

  /* Bottom tab bar: icon over label, equal-width tabs, the current one on the --pick pill. */
  .site-nav { position: fixed; inset: auto 0 0 0; z-index: 40; display: block; padding: 0 8px env(safe-area-inset-bottom); background: var(--card); border-top: var(--line) solid var(--ink); }
  .site-nav ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 6px 0; overflow: visible; }
  .site-nav li { display: flex; }
  .site-nav .tab-more { display: none; }
  .site-nav .tab-morebtn { display: flex; position: relative; }
  .site-nav a, .site-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 2px 0;
    font: 700 .76rem/1.1 var(--display); color: var(--ink); text-decoration: none; background: none; cursor: pointer;
    border: 2px solid transparent; border-radius: 14px; box-shadow: none;
  }
  .site-nav a:hover, .site-nav button:hover { background: var(--hi-soft); }
  .site-nav a[aria-current="page"], .site-nav button[aria-current="page"], .site-nav button[aria-expanded="true"] { background: var(--pick); border-color: var(--ink); }
  .site-nav .nav-ic { display: block; }
  .site-nav a, .site-nav button { min-width: 0; } /* a long label never widens its column into the next tab */
  .tab-badge, .sheet .tab-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font: 700 .72rem var(--display); color: #fff; background: var(--pink); border: 2px solid var(--ink); border-radius: 999px; }
  .site-nav .tab-badge { position: absolute; top: 0; left: calc(50% + 6px); }

  @media (max-width: 360px) { .site-nav a, .site-nav button { font-size: .72rem; } } /* "Glimlings" fits a 54px tab at 320px */

  /* More sheet: a card resting on the bar, one 52px row per page. */
  .sheet { inset: auto 10px calc(var(--bar-h) + env(safe-area-inset-bottom) + 10px) 10px; padding: 6px; }
  .sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .sheet a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 4px 12px; font: 700 1.05rem var(--display); color: var(--ink); text-decoration: none; border-radius: 12px; }
  .sheet a:hover { background: var(--hi); }
  .sheet a[aria-current="page"] { background: var(--pick); }
  .sheet .tab-badge { margin-left: auto; }

  /* Pet strip: a 56px bar (face, name, level, three tiny meters, chevron) until the chevron opens today's strip. */
  .pet-toggle { display: grid; place-items: center; position: absolute; top: 0; right: 0; z-index: 2; width: 44px; height: 44px; padding: 0; color: var(--ink); background: none; border: 0; cursor: pointer; }
  .pet-toggle svg { transition: rotate .2s; }
  .pet-toggle[aria-expanded="true"] svg { rotate: 180deg; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) {
    grid-template-columns: auto minmax(0, 1fr) 44px; grid-template-areas: "face id tog" "face meters tog"; gap: 0 10px; min-height: 56px; padding: 6px 4px 6px 8px; align-items: center; cursor: pointer;
  }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) > :not(.pet-stage, .pet-id, .pet-meters, .pet-toggle) { display: none; }
  /* Collapsed, the toggle is the chevron cell and its ::before stretches over the whole bar, so any tap opens it. */
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-toggle { position: static; grid-area: tog; width: auto; height: auto; align-self: stretch; }
  .pet-toggle[aria-expanded="false"]::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-stage { width: 44px; height: 44px; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-stage svg { width: 68px; margin: 2px 0 0 -12px; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-id { flex-wrap: nowrap; gap: 8px; align-items: center; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-id > :not(.pet-name, .pet-level) { display: none; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-name { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-level { flex: none; width: 24px; height: 24px; font-size: .7rem; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-meters { flex-wrap: nowrap; gap: 8px; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-meters li { display: flex; align-items: center; gap: 3px; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-meters li > span:not(.stat-bar) { display: none; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-meters li > b { font-size: .68rem; font-weight: 700; }
  .pet-panel:has(.pet-toggle[aria-expanded="false"]) .pet-meters .stat-bar { display: block; width: 24px; height: 8px; }
  .pet-panel-empty { min-height: 56px; padding: 6px 12px; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
  .pet-panel-empty p { display: none; }
  .pet-panel-empty .btn { min-height: 44px; display: inline-flex; align-items: center; }

  /* Footer: centred, links and the music toggle 44px tall with 12px between them. */
  .site-foot p:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .site-foot a, .music-toggle { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 6px; }
  .music-toggle { padding: 0 16px; }

  /* Fixed bottom things clear the bar: the corner visitor (finds.css). */
  body .find-visitor { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px); }
}
/* 320px phones: the coin pill gives up its padding so the logo keeps some width. */
@media (max-width: 359px) {
  .site-head { padding-inline: 8px; }
  .coins { padding: 0 8px; font-size: .82rem; }
}