/* mobile.css — the phone layer for the family tree. Linked after app.css.
   Everything is wrapped in media queries so desktop keeps app.css untouched.

   Blocks, in cascade order:
     A  touch sizing    <=760px wide, or <=1000px wide and <=500px tall (landscape phones)
     B  phone layout    <=760px wide: compact top bar, fixed menus, bottom sheets, stacked dialogs
     B2 dvh refinement  same, where dynamic viewport units exist
     C  landscape       <=1000px wide and <=500px tall: panels become side columns
     D  :has() helpers  hide the view bar and the branch compass while a sheet is open (z-order is the fallback)
     E  touch hover     no sticky hover on coarse pointers; pressed feedback instead
     F  reduced motion

   --vvh is optional: JS may set it to visualViewport.height in px (see jsRecommendations);
   without it the sheets size from 100vh / 100dvh. */

@keyframes m-sheet-in {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes m-menu-in {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ======================================================================
   A. touch sizing — phones in either orientation
   ====================================================================== */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
  :root {
    --tap: 44px;            /* minimum hit size */
    --topbar-h: 60px;       /* 44px controls + 8px above and below */
    --sheet-radius: 20px;
  }

  /* app.css relies on the host shell for [hidden]; keep that guarantee on phones */
  [hidden] { display: none !important; }

  /* no 300ms delay, no double-tap zoom, no grey flash, no text selection on controls */
  .btn, .seg button, .links button, .swatch, .style-grid button, .biome-grid button,
  .menu-list button, .switch, .tree-title, input[type="range"], input[type="color"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .btn, .viewbar, .topbar .actions, .seg, .swatches, .style-grid, .biome-grid, .rel-grid,
  .menu-list, .panel-head, .panel-foot, .switch, .kicker {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }

  /* ---- buttons: 44x44 minimum ---- */
  .btn { min-height: var(--tap); min-width: var(--tap); padding: 9px 16px; font-size: 14px; }
  .btn.icon { width: var(--tap); height: var(--tap); min-width: var(--tap); font-size: 18px; }
  .btn:active { transform: scale(0.97); }
  .tree-title { min-height: var(--tap); }

  /* ---- form controls: 16px so iOS does not zoom, 44px tall ---- */
  input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select {
    font-size: 16px; min-height: var(--tap); padding: 10px 12px; border-radius: 12px;
  }
  textarea { min-height: 88px; line-height: 1.4; }
  select { padding-right: 32px; }
  input[type="color"] { width: var(--tap); height: var(--tap); border-radius: 12px; }
  .field { gap: 6px; }
  .field > span { font-size: 11.5px; }
  .switch { min-height: var(--tap); gap: 12px; font-size: 14px; }
  .switch input { width: 24px; height: 24px; }
  .seg { padding: 4px; gap: 4px; border-radius: 12px; }
  .seg button { min-height: var(--tap); font-size: 14px; }
  .links { gap: 8px; }
  .links button { min-height: var(--tap); padding: 8px 14px; font-size: 13.5px; }
  .rel-grid { gap: 10px; }
  .photo-row { gap: 12px; }
  .photo-frame { width: 84px; height: 84px; font-size: 32px; }

  /* ---- range sliders: thin track, 28px thumb, 44px touch band ---- */
  input[type="range"] {
    -webkit-appearance: none; appearance: none;
    height: var(--tap); margin: 0; padding: 0; background: transparent; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); border: 0;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
    background: var(--accent); border: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }
  input[type="range"]::-moz-range-track {
    height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); border: 0;
  }
  input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: rgba(242, 179, 90, 0.6); }
  input[type="range"]::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); border: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }
  input[type="range"]:focus-visible { outline-offset: -2px; border-radius: 8px; }

  /* ---- customize panel: thumb-sized pickers ---- */
  .cz { gap: 10px; padding-bottom: 10px; }
  .cz h3 { font-size: 18px; margin-bottom: 6px; }
  .style-grid { gap: 10px; }
  .style-grid button { min-height: 60px; padding: 10px 12px; border-radius: 14px; }
  .style-grid b { font-size: 16px; }
  .style-grid small { font-size: 12px; white-space: normal; }
  .swatches { gap: 10px; }
  .swatch { width: var(--tap); height: var(--tap); border-width: 2px; }
  .swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(242, 179, 90, 0.45); }
  .biome-grid { gap: 8px; }
  .biome-grid button { min-height: 78px; padding: 6px; gap: 6px; font-size: 12px; border-radius: 12px; }
  .biome-grid i { height: 44px; border-radius: 8px; }
  .color-row { gap: 8px; }
  .color-row .field > span { font-size: 10px; letter-spacing: 0.03em; }
  .color-row input[type="color"] { height: var(--tap); }
  .dna-box { font-size: 14px; padding: 12px 14px; }

  /* ---- menu entries ---- */
  .menu-list button { min-height: 52px; padding: 10px 14px; justify-content: center; gap: 3px; }
  .menu-list button b { font-size: 14px; }
  .menu-list button small { font-size: 12.5px; white-space: normal; }

  /* ---- toasts ---- */
  .toast { padding: 12px 16px; font-size: 14px; border-radius: 14px; }

  /* ---- guest bar (shared-tree viewers) and example bar: one scrollable row, reachable buttons ---- */
  #guestbar, #examplebar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px var(--gutter-r) 8px var(--gutter-l);
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  #guestbar::-webkit-scrollbar, #examplebar::-webkit-scrollbar { display: none; }
  #guestbar .btn, #examplebar .btn { flex: none; min-height: var(--tap); }
  #guestbar > :not(.btn), #examplebar > :not(.btn) { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
  #examplebar { flex-wrap: nowrap; }
  #examplebar .long { display: none; }
  #examplebar .short { display: inline; }
  #planbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    padding: 8px var(--gutter-r) 8px var(--gutter-l);
    overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  }
  #planbar[hidden] { display: none; }
  #planbar::-webkit-scrollbar { display: none; }
  #planbar .btn { flex: none; min-height: var(--tap); }
  #planbar .gb-actions { flex: none; flex-wrap: nowrap; }
  #planbar #pb-text { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
  #planbar .long { display: none; }
  #planbar .short { display: inline; }

  /* ---- branch compass: thumb-sized chips ---- */
  .compass .chip { height: auto; min-height: 40px; min-width: 0; padding: 0 13px; font-size: 13px; touch-action: manipulation; }
  .compass .chip:active { transform: none; }
}

/* ======================================================================
   B. phone layout — portrait phones and narrow landscape (<=760px)
   ====================================================================== */
@media (max-width: 760px) {

  /* ---- top bar: one row that never wraps. Actions become 44px icon buttons,
          the title takes whatever is left and truncates. ---- */
  .topbar {
    align-items: center; gap: 8px;
    padding: calc(8px + var(--top-inset)) var(--gutter-r) 8px var(--gutter-l);
  }
  .brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .brand-text { flex: 1 1 auto; min-width: 0; }
  .logo { width: 30px; height: 30px; }
  .tree-title {
    display: block; width: 100%; max-width: 100%; box-sizing: border-box;
    font-size: 20px; line-height: var(--tap); padding: 0 2px;
  }
  .topbar .actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; }
  .topbar .actions .menu { flex: none; }

  /* icon-only: the label text keeps its place in the accessibility tree (font-size 0 is not
     display:none), the glyph is a currentColor mask so .primary and plain buttons both read. */
  #btn-import, #btn-export, #btn-share, #btn-account {
    width: var(--tap); height: var(--tap); min-width: var(--tap); padding: 0; border-radius: 50%;
    font-size: 0; letter-spacing: 0; gap: 0; line-height: 0;
  }
  #btn-import::before, #btn-export::before, #btn-share::before, #btn-account::before {
    content: ""; display: block; width: 22px; height: 22px; flex: none; background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  }
  /* the Customize label stays as text while it fits; only the narrowest phones get the icon */
  @media (max-width: 429px) {
    #btn-customize {
      width: var(--tap); height: var(--tap); min-width: var(--tap); padding: 0; border-radius: 50%;
      font-size: 0; letter-spacing: 0; gap: 0; line-height: 0;
    }
    #btn-customize::before {
      content: ""; display: block; width: 22px; height: 22px; flex: none; background: currentColor;
      -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
    }
  }
  #btn-import    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M8 11l4 4 4-4M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1'/%3E%3C/svg%3E"); }
  #btn-export    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M8 8l4-4 4 4M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1'/%3E%3C/svg%3E"); }
  #btn-customize { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h7M19 7h1M4 12h1M13 12h7M4 17h5M17 17h3'/%3E%3Ccircle cx='15' cy='7' r='2.25'/%3E%3Ccircle cx='9' cy='12' r='2.25'/%3E%3Ccircle cx='13' cy='17' r='2.25'/%3E%3C/svg%3E"); }
  #btn-share     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M12 15V3M8 7l4-4 4 4'/%3E%3C/svg%3E"); }
  #btn-account   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }

  /* ---- menus: a dropdown anchored to a button near the left edge would run off-screen,
          so on phones the list is a fixed full-width card under the top bar ---- */
  .menu-list {
    position: fixed; left: var(--gutter-l); right: var(--gutter-r); top: calc(var(--topbar-h) + var(--top-inset) + 4px);
    min-width: 0; width: auto; padding: 8px; border-radius: 16px;
    max-height: calc(var(--vvh, 100vh) - var(--topbar-h) - var(--top-inset) - 24px);
    overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    animation: m-menu-in 0.16s ease-out;
  }

  /* ---- panels as bottom sheets ---- */
  .panel {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    max-height: calc(var(--vvh, 100vh) * 0.7);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    border-bottom: 0; border-top-color: var(--line-strong);
    padding-bottom: var(--bottom-inset);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
    animation: m-sheet-in 0.22s ease-out;
  }
  .panel-left, .panel-right { left: 0; right: 0; }
  #panel-customize { width: auto; }   /* (its desktop width would leave a gap at the sheet's right) */
  /* drag handle (visual; swipe-to-dismiss is a JS job) */
  .panel::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
    border-radius: 3px; background: rgba(255, 255, 255, 0.3); z-index: 1; pointer-events: none;
  }
  .panel-head { flex: none; align-items: center; padding: 20px 16px 10px; }
  .panel-head h2 { font-size: 22px; }
  .panel-body {
    padding: 12px 16px 16px; gap: 14px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin;
    scroll-padding-bottom: 16px;
  }
  .panel-foot { flex: none; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }

  /* ---- view bar: stays left, scrolls if a translation is wider, fades out under sheets (block D) ---- */
  .viewbar {
    bottom: calc(10px + var(--bottom-inset)); padding: 4px; gap: 2px;
    max-width: calc(100vw - var(--gutter-l) - var(--gutter-r));
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .viewbar::-webkit-scrollbar { display: none; }

  /* ---- branch compass: one row above the view bar (10px + 54px), scrolling sideways when it is wider
          than the screen; it fades out under sheets like the view bar (block D) ---- */
  .compass {
    left: var(--gutter-l); right: auto; bottom: calc(72px + var(--bottom-inset));
    max-width: calc(100vw - var(--gutter-l) - var(--gutter-r));
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  .compass::-webkit-scrollbar { display: none; }
  .compass-label { display: none; }
  .viewbar .btn { min-height: var(--tap); min-width: var(--tap); padding: 0 11px; font-size: 13px; flex: none; }
  .hint { display: none; }

  /* ---- landing page: tagline and two rows of two buttons under the top bar ---- */
  .landing { top: calc(64px + var(--top-inset)); gap: 8px; }
  .landing-tag { font-size: clamp(20px, 6vw, 26px); }
  .landing-actions { width: 100%; max-width: 420px; }
  .landing-actions .btn { flex: 1 1 calc(50% - 4px); padding: 10px 12px; }
  .landing .long { display: none; }
  .landing .short { display: inline; }
  .landing-fine { font-size: 11.5px; }
  .showcase-caption { bottom: calc(22px + var(--bottom-inset)); font-size: clamp(20px, 5.6vw, 24px); padding: 4px 14px; max-width: calc(100% - 28px); }
  .showcase-caption.at-top { top: calc(var(--topbar-h) + var(--top-inset) + 2px); }
  body.showcase.sc-bar .showcase-caption:not(.at-top), body.showcase.sc-compass .showcase-caption:not(.at-top) { bottom: calc(70px + var(--bottom-inset)); }
  /* (the compass prop takes the view bar's place, hidden while the reel plays, under the caption) */
  body.showcase.sc-compass .compass { bottom: calc(10px + var(--bottom-inset)); }
  /* the reel's person demo: a shorter sheet, so the card it opened stays in view above it */
  body.showcase #panel-person.sc-open { max-height: calc(var(--vvh, 100dvh) * 0.5); }
  /* the compact Start my tree, Example and Sign in in the top bar (the strip under it faded out) */
  .landing-mini { padding: 0 12px; font-size: 13.5px; }
  .landing-mini .long { display: none; }
  .landing-mini .short { display: inline; }
  body.showcase.sc-zoom #btn-help { display: none; }
  .showcase-look { font-size: 13px; }
  .fine { margin-top: 12px !important; }

  /* ---- modals: same treatment ---- */
  .modal { padding: calc(12px + var(--top-inset)) var(--gutter-r) calc(12px + var(--bottom-inset)) var(--gutter-l); }
  .modal-card {
    max-height: calc(var(--vvh, 100vh) - 24px - var(--top-inset) - var(--bottom-inset));
    padding: 18px 16px 16px; border-radius: 18px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .modal h2 { font-size: 26px; }
  .modal h3 { font-size: 18px; }
  .modal p { font-size: 14.5px; }
  .modal textarea { min-height: 120px; font-size: 16px; }
  .modal img { max-height: 50vh; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
  .modal .actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
  .modal .actions .btn { width: 100%; }

  /* ---- toasts sit just under the top bar ---- */
  .toasts { top: calc(var(--topbar-h) + var(--top-inset) + 8px); width: calc(100vw - var(--gutter-l) - var(--gutter-r)); }
}

/* very narrow phones (<=400px): drop the logo so the title keeps ~100px beside five icon buttons */
@media (max-width: 400px) {
  .logo { display: none; }
}
/* the reel's top bar on a narrow phone, its three buttons up (Start my tree, Example, Sign in):
   the logo beside them, never the reel family's name cut down to a few letters */
@media (max-width: 429px) {
  body.showcase.sc-zoom .logo { display: block; }
  body.showcase.sc-zoom .tree-title { display: none; }
}
@media (max-width: 359px) {
  body.showcase.sc-zoom .logo { display: none; }
  .landing-mini { padding: 0 9px; font-size: 13px; }
}

/* B2. where dynamic viewport units exist, size from them (toolbar show/hide on iOS and Android) */
@supports (height: 1dvh) {
  @media (max-width: 760px) {
    .panel { max-height: calc(var(--vvh, 100dvh) * 0.7); }
    .menu-list { max-height: calc(var(--vvh, 100dvh) - var(--topbar-h) - var(--top-inset) - 24px); }
    .modal-card { max-height: calc(var(--vvh, 100dvh) - 24px - var(--top-inset) - var(--bottom-inset)); }
    .modal img { max-height: 50dvh; }
  }
}

/* ======================================================================
   C. landscape phones (<=1000px wide, <=500px tall): panels become side columns
   ====================================================================== */
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  .topbar { padding-top: calc(6px + var(--top-inset)); padding-bottom: 6px; }
  :root { --topbar-h: 56px; }

  .panel {
    top: calc(var(--topbar-h) + var(--top-inset) + 6px); bottom: calc(8px + var(--bottom-inset));
    left: auto; right: var(--gutter-r); width: min(360px, 52vw); max-height: none;
    border-radius: 16px; border: 1px solid var(--line); padding-bottom: 0;
    box-shadow: var(--shadow);
  }
  .panel-left { left: var(--gutter-l); right: auto; }
  .panel-right { right: var(--gutter-r); left: auto; }
  #panel-customize { width: min(320px, calc(100vw - var(--gutter-l) - var(--gutter-r))); }   /* (a side panel again here) */
  .panel::before { display: none; }
  .panel-head { padding: 12px 14px 8px; }
  .panel-head h2 { font-size: 20px; }
  .panel-body { padding: 10px 14px 14px; gap: 10px; }
  .panel-foot { padding: 8px 14px; }
  .grid2 { grid-template-columns: 1fr 1fr; }
  .photo-frame { width: 64px; height: 64px; font-size: 26px; }

  .menu-list { left: auto; right: var(--gutter-r); width: min(340px, calc(100vw - var(--gutter-l) - var(--gutter-r))); }
  .viewbar { bottom: calc(8px + var(--bottom-inset)); }
  .compass { bottom: calc(66px + var(--bottom-inset)); }
  .toasts { top: calc(var(--topbar-h) + var(--top-inset) + 6px); }

  .landing { top: calc(var(--topbar-h) + var(--top-inset) + 4px); }
  .landing-tag, .landing-fine { display: none; }
  .landing-actions { max-width: none; }
  .landing-actions .btn { flex: 0 0 auto; }   /* (one row: the screen is short) */
  .modal-card { padding: 14px 16px; }
  .modal h2 { font-size: 22px; }
  .modal textarea { min-height: 80px; }
  .modal .actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .modal .actions .btn { width: auto; }
}

/* ======================================================================
   D. :has() — hide the view bar while a sheet is open.
      Fallback without :has(): the sheet (z 18) already paints over the bar (z 15).
   ====================================================================== */
@supports selector(:has(*)) {
  @media (max-width: 760px) {
    #app:has(.panel:not([hidden])) .viewbar {
      opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
    }
    #app:has(.panel:not([hidden])) .compass { opacity: 0; visibility: hidden; pointer-events: none; }
  }
  @media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
    /* side columns: only a left-hand column collides with the bar */
    #app:has(.panel:not([hidden])) .viewbar { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
    #app:has(.panel-left:not([hidden])) .viewbar {
      opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
    }
    /* (the compass can stand on either side here, so any open column puts it away) */
    #app:has(.panel:not([hidden])) .compass { opacity: 0; visibility: hidden; pointer-events: none; }
  }
}

/* ======================================================================
   E. coarse pointers: no sticky :hover after a tap; :active gives the feedback
   ====================================================================== */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line); }
  .btn.primary:hover { background: var(--accent); }
  .btn.ghost:hover { background: transparent; }
  .btn[aria-pressed="true"]:hover { background: rgba(242, 179, 90, 0.18); border-color: var(--accent); }
  .viewbar .btn:hover { background: transparent; border-color: transparent; }
  .tree-title:hover { color: var(--fg); }
  .menu-list button:hover { background: none; }
  .links button:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--line); }
  .style-grid button:hover, .biome-grid button:hover { background: rgba(255, 255, 255, 0.05); }
  .style-grid button[aria-pressed="true"]:hover, .biome-grid button[aria-pressed="true"]:hover { background: rgba(242, 179, 90, 0.12); }

  .btn:active, .viewbar .btn:active { background: rgba(255, 255, 255, 0.18); }
  .btn.primary:active { background: #ffc46b; }
  .btn.ghost:active { background: rgba(255, 255, 255, 0.12); }
  .menu-list button:active, .links button:active, .style-grid button:active,
  .biome-grid button:active, .seg button:active { background: rgba(255, 255, 255, 0.14); }
  .swatch:active { transform: scale(0.92); }
}

/* ======================================================================
   F. reduced motion — only undoes what this file adds
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .panel, .menu-list { animation: none; }
  .viewbar, .compass { transition: none; }
  .swatch:active, .btn:active { transform: none; }
  .panel-body, .modal-card, .menu-list { scroll-behavior: auto; }
}

/* narrowest phones: the view bar's five buttons plus the Customize icon must fit without scrolling */
@media (max-width: 400px) {
  .viewbar { gap: 2px; padding: 4px; }
  .viewbar .btn { padding: 0 8px; font-size: 12.5px; }
}

/* Customize on phones: a shorter sheet, so the tree stays in view while colours change */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
  #panel-customize { max-height: calc(var(--vvh, 100vh) * 0.48); }
  #panel-customize .style-grid { grid-template-columns: 1fr 1fr 1fr; }
  #panel-customize .biome-grid { grid-template-columns: repeat(4, 1fr); }
}