/* Mount Herbs — Riverstone, Apothecary Seal and Amber Resin.
   An explicit control allowlist keeps artworks, model gestures, source cards,
   photographic thumbnails, the supplied portal and private forms unchanged. */
:root {
  --mh92-leaf: url('./assets/motion88/botanical-leaf-480.webp');
  --mh92-radius: 30px 24px 28px 22px / 26px 28px 22px 26px;
  --mh92-ink: #254c3c;
  --mh92-face: #f8faf2;
  --mh92-edge: #bac8b3;
  --mh92-pine: #173f35;
  --mh92-paper: #fffdf6;
  --mh92-tab-ink: #e5eadc;
  --mh92-rail: #183a2eb3;
  --mh92-rail-edge: #9eae9059;
}
.room78, .museum-world[data-presentation='gallery'], .commerce-dialog,
.artwork-inspector, .book-source-inspector51, .product-lightbox {
  --mh92-tab-ink: #254c3c;
  --mh92-rail: #dfe5d7;
  --mh92-rail-edge: #b6c4aa;
}

/* Riverstone actions: small, tactile objects rather than rectangular plates. */
html body :is(
  .solid-button, .room78-enter, .primary-action, .scene-follow,
  .field-notes-link, .plant-inspect, .fibre-study-link,
  #play-process, #ingredient-details, #ingredient-enquiry, #product-basket-link,
  #material-lens-reset, #product-reset, #open-seed, #replay-finale,
  #play-journey, #motion-toggle, #sound-toggle,
  .site-header .menu-toggle, .site-header .header-shop, #header-basket,
  .museum-main-controls button, .scene-controls button, .room78-actions button,
  .museum-toolbar button, .museum-object-actions > button,
  .source-book-turn51, .book-face-controls51 button, .art-inspector-toolbar button,
  .search-form button, .timeline-controls button, .utility button,
  .guided-actions button, .guided-navigation button, .guided-scene-controls button, .journey-controls button,
  .view-tools button, .study-motion button, .tissue-map-controls button,
  .scene-evidence > button[aria-pressed], .shoot-controls button,
  .studio-model-controls button, .shop-bar nav button, .shop-add, .shop-product-action > .text-link,
  .shop-detail .text-link[data-save-product], .instagram-feed-button
) {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid var(--mh92-edge);
  border-radius: var(--mh92-radius);
  background: var(--mh92-face);
  color: var(--mh92-ink);
  padding: 10px 18px;
  line-height: 1.45;
  letter-spacing: .005em;
  text-decoration: none;
  text-align: center;
  box-shadow: inset 0 2px 1px #fff, 0 2px 3px #193b2e12;
  transition: background-color .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
html body :is(.solid-button, .primary-action, .scene-follow, #play-journey) {
  background: var(--mh92-pine);
  color: var(--mh92-paper);
  border-color: #627d67;
  box-shadow: inset 0 1px 0 #ffffff38, 0 4px 7px #193b2e22;
}
/* The older river text-link rule has an ID selector and pale ink intended
   for a transparent background. Pair its Riverstone face with dark ink. */
html body #river .field-notes-link {
  color: var(--mh92-ink);
  background: var(--mh92-face);
  border-color: var(--mh92-edge);
}
html body .source-object-track51 .source-book-turn51 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  align-self: flex-start;
  padding: 10px 16px;
}

/* A quiet recessed rail; only selected controls carry the botanical impression. */
html body :is(.anatomy-switch, .process-switch, .modes, .study-controls) {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--mh92-rail-edge);
  border-radius: 30px;
  background: var(--mh92-rail);
  box-shadow: inset 0 2px 3px #24432d15;
  width: fit-content;
  max-width: 100%;
}
html body :is(
  .anatomy-switch button, .process-switch button, .process-stages button, .cycle-list button,
  .modes button, .passage-nav button, .study-controls button, .shop-bar nav button,
  .measurement-layers button, .study-fields .selection-row button,
  .museum-main-controls button[data-view], .timeline-controls button,
  .exhibit-nav a, .book-face-controls51 button
) {
  position: relative;
  isolation: isolate;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--mh92-radius);
  background: transparent;
  box-shadow: none;
  color: var(--mh92-tab-ink);
  line-height: 1.45;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html body :is(
  .anatomy-switch button, .process-switch button, .process-stages button, .cycle-list button,
  .modes button, .passage-nav button, .study-controls button, .shop-bar nav button,
  .measurement-layers button, .study-fields .selection-row button,
  .museum-main-controls button[data-view], .timeline-controls button,
  .exhibit-nav a, .book-face-controls51 button
):is([aria-pressed='true'], [aria-selected='true'], [aria-current='true'],
  [aria-current='page'], [aria-current='step'], .active) {
  border-color: #738b70;
  background: var(--mh92-pine);
  color: var(--mh92-paper);
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 6px #193b2e22;
}
/* The bright room has an inherited important ink rule for editorial links.
   The selected tab is a pine surface, so its paired ivory label is explicit. */
html body.room78 .exhibit-nav a:is([aria-current='page'], [aria-current='true'], .active),
html body.museum-world[data-presentation='gallery'] .exhibit-nav a:is([aria-current='page'], [aria-current='true'], .active) {
  color: var(--mh92-paper) !important;
}
/* Gallery labels have their own ink declaration. Pair the nested label with
   its selected pine surface in resting, hover and keyboard-focus states. */
html body .exhibit-nav a:is([aria-current='page'], [aria-current='true'], .active) span {
  color: var(--mh92-paper) !important;
}
/* Long measurement names retain their reading layout and never become pills
   with clipped, single-line labels. */
html body .measurement-layers button { white-space: normal; border-radius: 18px; }
html body .passage-nav { gap: 6px; padding-block: 10px; }
html body .passage-nav button { flex-shrink: 0; }
/* Scene overlays retain their existing absolute placement and compact padding. */
html body :is(#visual-play, .study-expand) {
  min-height: 44px;
  border: 1px solid var(--mh92-edge);
  border-radius: var(--mh92-radius);
  background: var(--mh92-face);
  color: var(--mh92-ink);
  box-shadow: inset 0 2px 1px #fff, 0 2px 3px #193b2e12;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html body #visual-play {
  border-color: #738b70;
  background: var(--mh92-pine);
  color: var(--mh92-paper);
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 6px #193b2e22;
}
html body #visual-play[aria-pressed='true'] { box-shadow: inset 0 2px 5px #0003; }
html body .cycle-list { gap: 8px; }
html body .cycle-list button { padding-inline: 13px; }
html body .site-header :is(.menu-toggle, .header-shop, #header-basket) {
  border-color: #82967b66;
  background: #173f35e8;
  color: #fffdf6;
  padding-inline: 14px;
  box-shadow: inset 0 1px 0 #ffffff25;
}
html body .shop-bar nav { flex-wrap: wrap; gap: 6px; }

/* Original-image, chapter and scientific-view arrows keep their existing
   compact geometry. There is no decorative medallion inside an icon control. */
html body :is(
  .source-object-controls51 button, .cover-scroll-controls button,
  #gallery-controls51 button, #chapter-previous, #chapter-next,
  #rotate-left, #rotate-right, .view-tools #orbit-left, .view-tools #orbit-right,
  .view-tools #zoom-in, .view-tools #zoom-out,
  .art-inspector-toolbar [data-art-zoom='in'], .art-inspector-toolbar [data-art-zoom='out'],
  .shoot-controls [data-shoot-previous], .shoot-controls [data-shoot-next]
) {
  border-radius: 50%;
  border: 1px solid var(--mh92-edge);
  background: var(--mh92-face);
  color: var(--mh92-ink);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  box-shadow: inset 0 2px 1px #fff, 0 2px 3px #193b2e12;
}
html body :is(.close-dialog, .dialog-close, [data-art-close], [data-book-close51], [data-gallery-close]) {
  border-radius: 999px;
}
html body .museum-navigation77 > summary {
  border-radius: var(--mh92-radius);
  background: #173f35;
  border-color: #71866b;
  color: #fffdf6;
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 6px #193b2e22;
}

/* Apothecary Seal: reserved for room entrances and the main guided invitation.
   The small round impression is decorative, never another logo or control. */
html body :is(.room78-enter, #guided-toggle) {
  min-height: 52px;
  padding: 13px 24px 13px 57px;
  border: 1px solid #b99a72;
  border-radius: 999px;
  background: linear-gradient(165deg, #3f5a44, #264533 68%);
  color: #fff8e9 !important;
  font-family: var(--serif, 'Playfair Display', Georgia, serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .005em;
  box-shadow: inset 0 0 0 2px #c8a77940, inset 0 1px 0 #ebd5a866,
    0 3px 0 #91704f, 0 8px 15px #081a1120;
}
html body :is(.room78-enter, #guided-toggle)::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 8px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid #d3b28a;
  background: var(--mh92-leaf) center / 29px auto no-repeat,
    radial-gradient(ellipse at 30% 15%, #c6b58a, #947956);
  box-shadow: inset 0 0 0 3px #ad956c, inset 0 0 0 4px #ead8b061;
  pointer-events: none;
}

/* Amber Resin belongs to seed pressing and product actions. It does not imply
   an active checkout or alter any availability/admission state. */
html body :is(#play-process, #ingredient-add, #shop-detail-add, .shop-add) {
  border-color: #aa7e2f;
  border-radius: 32px 26px 31px 24px / 29px 27px 28px 25px;
  color: #372a0b;
  background: radial-gradient(ellipse at 24% 0, #ffefb4 0, transparent 50%),
    linear-gradient(160deg, #efd68b 0, #d3a54b 62%, #e5c271 100%);
  box-shadow: inset 0 2px 1px #fff9d4, inset 0 -3px 2px #9c661f6b,
    inset 2px 0 4px #fff4c5b3, 0 3px 0 #ab8240, 0 8px 15px #ad783520;
  text-shadow: 0 1px 0 #fff3c18c;
}

/* The same reviewed leaf asset is softly embedded at the trailing edge.
   It adds no semantic information and cannot intercept pointer input. */
html body :is(.solid-button, .room78-enter, #guided-toggle, #play-journey,
  #play-process, .shop-add)::after,
html body :is(.anatomy-switch button, .process-switch button, .modes button,
  .study-controls button, .measurement-layers button, .exhibit-nav a):is(
    [aria-pressed='true'], [aria-selected='true'], [aria-current='page'], .active)::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--mh92-leaf) right -18px center / 138px auto no-repeat;
  filter: grayscale(1) brightness(2);
  mix-blend-mode: screen;
  opacity: .12;
  mask-image: linear-gradient(90deg, transparent 22%, #000 78%);
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 78%);
  pointer-events: none;
}
html body :is(#play-process, #ingredient-add, #shop-detail-add, .shop-add)::after {
  filter: sepia(1) saturate(.6) brightness(.75);
  mix-blend-mode: multiply;
  opacity: .17;
}

@media (hover: hover) and (pointer: fine) {
  html body :is(.solid-button, .room78-enter, .primary-action, .scene-follow,
    .field-notes-link, .plant-inspect, .fibre-study-link, #play-process,
    #play-journey, #guided-toggle, .shop-add):not(:disabled):hover {
    transform: translateY(-2px);
    border-color: #8e9f7f;
    box-shadow: inset 0 1px 0 #ffffff55, 0 7px 12px #193b2e29;
  }
  html body :is(.anatomy-switch button, .process-switch button, .modes button,
    .passage-nav button, .study-controls button, .measurement-layers button,
    .exhibit-nav a):not([aria-pressed='true']):not([aria-selected='true']):not([aria-current='page']):not([aria-current='true']):not([aria-current='step']):not(:disabled):not([aria-disabled='true']):not(.active):hover {
    background: #dce6d01f;
    border-color: #9aac87;
  }
  html body :is(#play-process, #ingredient-add, #shop-detail-add, .shop-add):not(:disabled):hover {
    color: #372a0b;
    box-shadow: inset 0 2px 1px #fffce4, inset 0 -3px 2px #9c661f6b,
      inset 2px 0 6px #fff4c5, 0 5px 0 #ab8240, 0 11px 18px #ad78352b;
  }
}

/* Existing focus management, pressed/selected attributes and disabled/hidden
   states are authoritative. CSS never supplies interaction behaviour. */
html body :is(.solid-button, .room78-enter, .primary-action, .scene-follow,
  .field-notes-link, .plant-inspect, .fibre-study-link, #play-process,
  #ingredient-details, #ingredient-enquiry, #play-journey, #motion-toggle,
  #sound-toggle, .anatomy-switch button, .process-switch button,
  .process-stages button, .cycle-list button, .modes button, .passage-nav button, .study-controls button,
  .measurement-layers button, .museum-main-controls button, .scene-controls button,
  .room78-actions button, .cover-scroll-controls button, .source-object-controls51 button,
  #gallery-controls51 button, .source-book-turn51, .book-face-controls51 button,
  .art-inspector-toolbar button, .guided-actions button, .guided-navigation button,
  .journey-controls button, #visual-play, .study-expand,
  .view-tools button, .shoot-controls button, .studio-model-controls button,
  .shop-add, .shop-bar nav button, .exhibit-nav a, .museum-navigation77 > summary,
  .site-header .menu-toggle, .site-header .header-shop, #header-basket,
  #chapter-previous, #chapter-next, #rotate-left, #rotate-right):focus-visible {
  outline: 3px solid #b2864b;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #fffdf6;
}
html body :is(.solid-button, .room78-enter, #guided-toggle, #play-process,
  #play-journey, .shop-add):not(:disabled):active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px #0002;
}
html body :is(.solid-button, .shop-add, #play-process, #play-journey,
  .room78-actions button, .guided-actions button, .journey-controls button, .view-tools button,
  .studio-model-controls button, .cover-scroll-controls button,
  .source-object-controls51 button, #gallery-controls51 button):disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}
html body :is(#visual-play, .study-expand):disabled { opacity: .48; cursor: not-allowed; }

@media (max-width: 700px) {
  html body .process-stages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    max-width: 470px;
  }
  html body .process-stages > span[aria-hidden='true'] { display: none; }
  html body #process .process-stages button {
    min-width: 0;
    padding-inline: 3px;
    font-size: 12px;
    white-space: normal;
  }
  html body :is(.anatomy-switch button, .process-switch button, .modes button,
    .study-controls button, .passage-nav button) { padding-inline: 12px; }
  html body :is(#play-journey, #motion-toggle, #sound-toggle) { padding-inline: 12px; }
  html body :is(.room78-enter, #guided-toggle) { min-height: 50px; font-size: 16px; }
  html body .room78-actions { gap: 12px 18px; }
  html body .site-header :is(.menu-toggle, .header-shop, #header-basket) { padding-inline: 11px; }
}
@media (max-width: 370px) {
  html body .anatomy-switch { gap: 3px; padding: 4px; }
  html body .anatomy-switch button { padding-inline: 10px; }
  html body .modes button { padding-inline: 8px; }
  html body :is(#play-journey, #motion-toggle, #sound-toggle) { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(#visual-play, .study-expand, .journey-controls button) { transition: none; }
  html body :is(.solid-button, .room78-enter, #guided-toggle, #play-process,
    #play-journey, .shop-add, .primary-action, .scene-follow, .field-notes-link,
    .plant-inspect, .fibre-study-link) { transition: none; transform: none !important; }
}
@media (forced-colors: active) {
  html body :is(.solid-button, .room78-enter, .primary-action, .scene-follow,
    #guided-toggle, #play-process, #play-journey, #motion-toggle, #sound-toggle,
    #visual-play, .study-expand, .journey-controls button,
    .shop-add, .anatomy-switch button, .process-switch button, .modes button,
    .study-controls button, .measurement-layers button, .exhibit-nav a) {
    border: 1px solid ButtonText;
    box-shadow: none;
    text-shadow: none;
    forced-color-adjust: auto;
  }
  html body :is(.solid-button, .room78-enter, #guided-toggle, #play-process,
    #play-journey, .shop-add, .anatomy-switch button, .process-switch button,
    .modes button, .study-controls button, .measurement-layers button, .exhibit-nav a)::after,
  html body :is(.room78-enter, #guided-toggle)::before { display: none; }
  html body :is(.anatomy-switch button, .process-switch button, .process-stages button, .cycle-list button,
    .modes button, .passage-nav button, .study-controls button, .shop-bar nav button,
    .measurement-layers button, .exhibit-nav a):is([aria-pressed='true'],
      [aria-selected='true'], [aria-current='page'], [aria-current='step'], .active) {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
}
/* Never let a visual family expose an unavailable action. */
html body [hidden] { display: none !important; }