/*
 * TOBIRA V1.1 component contracts
 * Approved Figma families: Icon Button, Door Island, Filter, Archive Card,
 * Detail Stage, Search Morph, More Menu, Component Card, Component Detail,
 * Footer Lockup, and Key Cursor. Loaded after page-specific legacy layers.
 */

/* Navigation / Door Island — 180 × 48, fixed 40 / 84 / 40 slots. */
.door-header,
.door-island {
  position: fixed;
  z-index: 70;
  top: 12px;
  left: 50%;
  box-sizing: border-box;
  width: var(--tobira-control-navigation-width);
  min-width: var(--tobira-control-navigation-width);
  height: var(--tobira-control-header);
  min-height: var(--tobira-control-header);
  display: grid;
  grid-template-columns: 40px 84px 40px;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: var(--tobira-radius-full);
  background: var(--tobira-paper);
  color-scheme: light;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .72),
    0 22px 70px rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(28px) saturate(1.12) brightness(1.04);
  backdrop-filter: blur(28px) saturate(1.12) brightness(1.04);
  transform: translateX(-50%);
  animation: tobira-door-island-intro 480ms var(--tobira-ease) both;
}

.door-header > .door-mark,
.door-header > .component-nav-link,
.door-header > .shelf-nav-mark,
.door-island > .door-island-slot,
.door-island > .door-island-destination {
  position: relative;
  inset: auto;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--tobira-radius-full);
  background: transparent;
  color: var(--tobira-bg-deep);
  text-decoration: none;
}

/* header destinations speak in the display voice — the same Mulish as the
   TOBIRA GALLERY title. Monospace is for code, never for chrome labels. */
.door-header > .component-nav-link,
.door-island > .door-island-destination {
  color: rgba(6, 6, 6, .62);
  font-family: var(--tobira-font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}

.door-header > .door-mark:hover,
.door-header > .component-nav-link:hover,
.door-header > .shelf-nav-mark:hover,
.door-island > .door-island-slot:hover,
.door-island > .door-island-destination:hover {
  background: rgba(6, 6, 6, .07);
  color: var(--tobira-bg-deep);
}

.door-header > .door-mark:focus-visible,
.door-header > .component-nav-link:focus-visible,
.door-header > .shelf-nav-mark:focus-visible,
.door-island > .door-island-slot:focus-visible,
.door-island > .door-island-destination:focus-visible {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 0;
}

.door-header .tobira-door-svg--header,
.door-island .tobira-door-svg--header { width: 22px; }
.door-header .shelf-glyph,
.door-island .shelf-glyph { width: 27px; height: 27px; }
.door-header .shelf-nav-mark,
.door-island .shelf-control {
  position: relative;
  inset: auto;
  width: 40px;
  height: 40px;
}

.door-header .tobira-shelf-cabinet,
.door-island .tobira-shelf-cabinet {
  fill: var(--tobira-paper);
  stroke: var(--tobira-bg-deep);
}
.door-header .tobira-shelf-frame-lines,
.door-island .tobira-shelf-frame-lines { stroke: var(--tobira-bg-deep); }
.door-header .tobira-shelf-door-leaf,
.door-island .tobira-shelf-door-leaf {
  fill: var(--tobira-bg-deep);
  stroke: var(--tobira-paper);
}
.door-header .tobira-shelf-handle,
.door-island .tobira-shelf-handle { fill: var(--tobira-paper); }

@keyframes tobira-door-island-intro {
  from { opacity: 0; transform: translate(-50%, -18px) scale(.94); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* A centred 180px island and the account chip meet in the middle of a phone
   screen — they overlapped by 26px at 390px wide. Below 640px the island
   leaves the centre and docks to the left edge instead; shrinking either
   piece would have cost a tap target. The chip keeps the right edge. */
@media (max-width: 640px) {
  .door-header {
    left: max(10px, env(safe-area-inset-left));
    transform: none;
    animation-name: tobira-door-island-intro-docked;
  }
}

@keyframes tobira-door-island-intro-docked {
  from { opacity: 0; transform: translateY(-18px) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* Selection guide — Landing mirrors Component Gallery's liquid-glass bar. */
.tier-guide {
  padding: 10px clamp(18px, 2.4vw, 44px);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tier-guide .control-row,
.tier-guide.is-stuck .control-row {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 74px;
  margin-inline: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--tobira-radius-glass);
  background: var(--tobira-paper);
  color-scheme: light;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 22px 70px rgba(0, 0, 0, .28);
  color: var(--tobira-bg-deep);
  -webkit-backdrop-filter: blur(30px) saturate(1.12) brightness(1.04);
  backdrop-filter: blur(30px) saturate(1.12) brightness(1.04);
  pointer-events: auto;
}

.component-guide-inner {
  border: 0;
  background: var(--tobira-paper);
  color: var(--tobira-bg-deep);
  color-scheme: light;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 22px 70px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(30px) saturate(1.12) brightness(1.04);
  backdrop-filter: blur(30px) saturate(1.12) brightness(1.04);
}

/* Selection / Filter — labels only, one indicator per group. */
.tier-filter,
.source-filters {
  position: relative;
  isolation: isolate;
  border: 0;
  background: var(--tobira-surface);
}
.source-filters {
  background: transparent;
  box-shadow: none;
}
.tier-guide .tier-filter,
.tier-guide.is-stuck .tier-filter {
  min-width: 0;
  width: auto;
  display: flex;
  flex: 1;
  gap: 4px;
  padding: 0;
  border: 0;
  overflow-x: auto;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}
.tier-guide .tier-filter::-webkit-scrollbar { display: none; }

.tier-filter button,
.source-filters button {
  position: relative;
  z-index: 1;
  width: auto;
  min-width: 0;
  height: var(--tobira-control-filter);
  min-height: var(--tobira-control-filter);
  flex: 0 0 auto;
  padding-inline: 16px;
  border: 0;
  border-radius: var(--tobira-radius-full);
  background: transparent;
  color: rgba(6, 6, 6, .62);
  font-family: var(--tobira-font-body);
  white-space: nowrap;
  scale: 1;
  transition:
    color 180ms var(--tobira-ease),
    background-color 180ms var(--tobira-ease),
    scale 100ms cubic-bezier(.23, 1, .32, 1);
}
.tier-guide .tier-filter button {
  min-width: 0;
  min-height: var(--tobira-control-filter);
  height: var(--tobira-control-filter);
  padding-inline: 16px;
  color: rgba(6, 6, 6, .62);
  font-size: 12px;
  font-weight: 700;
  gap: 0;
}

.tier-filter button:hover,
.source-filters button:not(.is-active):hover {
  background: rgba(6, 6, 6, .07);
  color: var(--tobira-bg-deep);
}

.tier-filter button:active,
.source-filters button:active { scale: .97; transform: none; }
.tier-filter button:focus-visible,
.source-filters button:focus-visible {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 2px;
}

#tier-filter.has-tier-indicator,
.source-filters { padding: 0; }
#tier-filter.has-tier-indicator .tier-filter-indicator,
.source-filter-indicator {
  border-radius: var(--tobira-radius-full);
  background: var(--tobira-accent);
  box-shadow: none;
}
#tier-filter.has-tier-indicator button.is-active,
.source-filters button.is-active {
  background: transparent;
  color: var(--tobira-bg-deep);
}
#tier-filter.has-tier-indicator button:not(.is-active) {
  color: rgba(6, 6, 6, .62);
}

/* Content / Archive Card — three fluid desktop columns let the artwork own
   the available width. Each frame follows the selected asset's real ratio so
   editorial highlights do not crop their left or right edge. */
#grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  align-items: start;
  gap: 44px 22px;
}

#grid .work-card,
#grid .work-card.reveal-done {
  position: relative;
  width: 100%;
  height: auto;
  align-self: start;
  contain-intrinsic-size: auto 440px;
  overflow: visible;
  transform: none;
  transition: none;
}

#grid .work-card .work-card-open {
  display: flex;
  width: 100%;
  flex-direction: column;
}

#grid .work-card:hover,
#grid .work-card.fx-hot,
#grid .work-card:focus-visible,
#grid .work-card:active,
#grid .work-card:hover:active,
#grid .work-card.fx-hot:active,
#grid .work-card:focus-visible:active {
  z-index: auto;
  transform: none;
}

#grid .work-card .thumb {
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: var(--thumb-ratio, 1.45 / 1);
  border: 0;
  border-radius: var(--tobira-radius-media);
  background: var(--tobira-bg-deep);
  box-shadow: none;
  transform: none;
  transition: none;
}

#grid .work-card .thumb::after { display: none; }
#grid .work-card .thumb > img,
#grid .work-card .thumb > video,
#grid .work-card .thumb > iframe {
  transform: scale(1);
  transform-origin: center;
  transition: transform 240ms var(--tobira-ease), opacity 250ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #grid .work-card:hover .thumb > img,
  #grid .work-card:hover .thumb > video,
  #grid .work-card:hover .thumb > iframe,
  #grid .work-card.fx-hot .thumb > img,
  #grid .work-card.fx-hot .thumb > video,
  #grid .work-card.fx-hot .thumb > iframe {
    filter: none;
    transform: scale(1.018);
  }
}

#grid .work-card:focus-visible { outline: 0; }
#grid .work-card:focus-visible .thumb {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 3px;
}

#grid .work-card .card-caption {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  box-sizing: border-box;
  height: 62px;
  margin: 14px 0 0;
  padding: 0 2px;
  align-items: flex-start;
  overflow: hidden;
}

#grid .work-card .card-title { font-size: 16px; line-height: 22px; }
#grid .work-card .card-action {
  border: 0;
  background: transparent;
  color: var(--tobira-ink-faint);
}
#grid .work-card:hover .card-action { background: var(--tobira-paper); color: var(--tobira-bg); }

/* Editorial highlight — the curated pick owns a complete 2 × 2 archive area. */
@media (min-width: 821px) {
  #grid:not(.is-compact) .work-card.is-pick,
  #grid:not(.is-compact) .work-card.is-pick.reveal-done {
    width: 100%;
    height: auto;
    align-self: start;
    contain-intrinsic-size: auto 860px;
  }

  #grid:not(.is-compact) .work-card.is-pick .thumb {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: var(--thumb-ratio, 1.45 / 1);
  }

  #grid:not(.is-compact) .work-card.is-pick .card-caption {
    top: auto;
    bottom: auto;
  }
}

@media (hover: hover) and (pointer: fine) {
  #grid:not(.is-compact) .work-card.is-pick:hover .thumb > img,
  #grid:not(.is-compact) .work-card.is-pick:hover .thumb > video,
  #grid:not(.is-compact) .work-card.is-pick:hover .thumb > iframe,
  #grid:not(.is-compact) .work-card.is-pick.fx-hot .thumb > img,
  #grid:not(.is-compact) .work-card.is-pick.fx-hot .thumb > video,
  #grid:not(.is-compact) .work-card.is-pick.fx-hot .thumb > iframe {
    transform: scale(1);
  }
}

.fx-ambient #grid:not(.is-compact) .work-card.is-pick .thumb > img {
  animation: none;
  transform: scale(1);
}

@media (max-width: 1120px) {
  #grid:not(.is-compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #grid:not(.is-compact) { grid-template-columns: minmax(0, 1fr); }
}

#grid.is-compact {
  grid-template-columns: repeat(auto-fit, 228px);
  gap: 14px 10px;
}
#grid.is-compact .work-card {
  width: 228px;
  height: 157px;
  contain-intrinsic-size: 228px 157px;
}
#grid.is-compact .work-card.is-pick {
  grid-column: auto;
  grid-row: auto;
}
#grid.is-compact .work-card .thumb { height: 157px; }
#grid.is-compact .work-card::after {
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

/* Components / Search Morph — persistent icon, 48 → 280, stable radius. */
.component-search-control {
  --search-open-width: 280px;
  width: var(--tobira-control-search-closed-width);
  height: var(--tobira-control-header);
  border-radius: var(--tobira-radius-full);
}
.component-search-surface {
  border-radius: inherit;
  background: rgba(6, 6, 6, .07);
  box-shadow: none;
}
.component-search-control:focus-within .component-search-surface {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 3px;
  box-shadow: none;
}
.component-search-control > .guide-command,
.component-search-control.is-open > .guide-command {
  width: var(--tobira-control-header);
  height: var(--tobira-control-header);
  padding: 0;
}
.component-search-label { display: none; }
.component-search-icon,
.component-search-control.is-open .component-search-icon,
.component-search-control.is-morphing:not(.is-open) .component-search-icon,
.component-search-control.is-closing .component-search-icon {
  position: static;
  width: 20px;
  height: 20px;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.component-search-panel {
  transform: none;
  transition: opacity 160ms var(--tobira-ease);
}
.component-search-control.is-open .component-search-panel {
  transition-delay: 180ms;
}
.component-search-control.is-closing .component-search-panel {
  opacity: 0;
  visibility: visible;
  transform: none;
  transition: opacity 90ms linear;
}
.component-search-control.is-morphing.is-closing:not(.is-open) .component-search-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.component-search-panel input {
  padding: 0 46px;
  color: var(--tobira-bg-deep);
}
.component-search-panel input::placeholder { color: rgba(6, 6, 6, .48); }
.component-search-panel button:hover { background: rgba(6, 6, 6, .07); }
.component-search-panel button img { filter: brightness(0); }

.component-guide-inner .guide-command,
.component-guide-inner .component-more > summary {
  background: rgba(6, 6, 6, .07);
  color: var(--tobira-bg-deep);
  box-shadow: none;
}
.component-guide-inner .guide-command:hover,
.component-guide-inner .component-more > summary:hover {
  background: rgba(6, 6, 6, .11);
  color: var(--tobira-bg-deep);
}
.component-guide-inner .component-more.is-materialized > summary {
  background: var(--tobira-accent);
  color: var(--tobira-bg-deep);
}

/* Components / More Menu — fixed trigger, 248 × 164 panel, top-right origin. */
.component-more { position: relative; width: 48px; height: 48px; flex: 0 0 48px; }
.component-more > summary {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: rgba(6, 6, 6, .07);
  color: var(--tobira-bg-deep);
  box-shadow: none;
  font-size: 9px;
}
.component-more > summary:focus-visible {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 3px;
}
.component-more.is-materialized > summary { background: var(--tobira-accent); color: var(--tobira-bg); }
.component-more-panel {
  top: 60px;
  right: 0;
  box-sizing: border-box;
  width: 248px;
  height: 164px;
  padding: 8px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 70px);
  gap: 8px;
  border: 0;
  border-radius: var(--tobira-radius-panel);
  background: rgba(242, 239, 233, .94);
  color: var(--tobira-bg-deep);
  color-scheme: light;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .36);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  transform: translateY(-6px);
  transform-origin: top right;
  transition:
    opacity 160ms ease,
    transform 160ms var(--tobira-ease),
    visibility 0s linear 160ms;
}
.component-more.is-materialized .component-more-panel {
  transform: none;
  transition:
    opacity 220ms ease,
    transform 220ms var(--tobira-ease),
    visibility 0s;
}
.component-more-panel label { position: relative; }
.component-more-panel label > span {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 12px;
  margin: 0;
  color: rgba(6, 6, 6, .52);
  font-size: 8px;
  pointer-events: none;
}
.component-more-panel select {
  height: 70px;
  padding: 19px 12px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tobira-bg-deep);
}
.component-more-panel select:hover { background: var(--tobira-accent); color: var(--tobira-bg); }

/* Landing / Guide Actions — the same Search and More anatomy. */
.tier-guide .component-guide-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}
.tier-guide .guide-command,
.tier-guide .component-more > summary {
  height: var(--tobira-control-header);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--tobira-radius-full);
  background: rgba(6, 6, 6, .07);
  color: var(--tobira-bg-deep);
  font-family: var(--tobira-font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: none;
  transition: background 180ms ease, color 180ms ease, scale 100ms ease;
}
.tier-guide .guide-command:hover,
.tier-guide .component-more > summary:hover { background: rgba(6, 6, 6, .11); }
.tier-guide .guide-command:active,
.tier-guide .component-more > summary:active { scale: .97; }

.tier-guide .component-search-control {
  position: relative;
  width: var(--tobira-control-search-closed-width);
  height: var(--tobira-control-header);
  flex: 0 0 auto;
  overflow: visible;
  border-radius: var(--tobira-radius-full);
  background: transparent;
}
.tier-guide .component-search-surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: rgba(6, 6, 6, .07);
  box-shadow: none;
  pointer-events: none;
}
.tier-guide .component-search-control:focus-within .component-search-surface {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 3px;
}
.tier-guide .component-search-control > .guide-command,
.tier-guide .component-search-control.is-open > .guide-command {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: var(--tobira-control-header);
  height: var(--tobira-control-header);
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.tier-guide .component-search-label { display: none; }
.tier-guide .component-search-icon,
.tier-guide .component-search-control.is-open .component-search-icon,
.tier-guide .component-search-control.is-morphing:not(.is-open) .component-search-icon,
.tier-guide .component-search-control.is-closing .component-search-icon {
  position: static;
  width: 20px;
  height: 20px;
  opacity: 1;
  visibility: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
  transform: none;
  transition: none;
}
.tier-guide .component-search-panel {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity 160ms var(--tobira-ease);
}
.tier-guide .component-search-control.is-open .component-search-panel {
  opacity: 1;
  visibility: visible;
  transition-delay: 180ms;
}
.tier-guide .component-search-control.is-closing .component-search-panel {
  opacity: 0;
  visibility: visible;
  transition: opacity 90ms linear;
}
.tier-guide .component-search-control.is-morphing.is-closing:not(.is-open) .component-search-panel {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.tier-guide .component-search-panel input {
  width: 100%;
  height: 100%;
  padding: 0 46px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--tobira-bg-deep);
  outline: 0;
  font-family: var(--tobira-font-body);
  font-size: 13px;
}
.tier-guide .component-search-panel input::placeholder { color: rgba(6, 6, 6, .48); }
.tier-guide .component-search-panel input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.tier-guide .component-search-panel button {
  position: absolute;
  right: 4px;
  width: var(--tobira-control-icon-md);
  height: var(--tobira-control-icon-md);
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--tobira-radius-full);
  background: transparent;
  cursor: pointer;
}
.tier-guide .component-search-panel button:hover { background: rgba(6, 6, 6, .07); }
.tier-guide .component-search-panel button img {
  width: 18px;
  height: 18px;
  filter: brightness(0);
}

.tier-guide .component-more {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}
.tier-guide .component-more > summary {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 0;
  list-style: none;
  user-select: none;
  background: rgba(6, 6, 6, .07);
  color: var(--tobira-bg-deep);
  box-shadow: none;
  font-size: 9px;
}
.tier-guide .component-more > summary::-webkit-details-marker { display: none; }
.tier-guide .component-more.is-materialized > summary {
  background: var(--tobira-accent);
  color: var(--tobira-bg);
}
.tier-guide .component-more-panel {
  position: absolute;
  z-index: 4;
  top: 60px;
  right: 0;
  box-sizing: border-box;
  width: 248px;
  height: 164px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 70px);
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: var(--tobira-radius-panel);
  background: rgba(242, 239, 233, .94);
  color: var(--tobira-bg-deep);
  color-scheme: light;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .36);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  transform: translateY(-6px);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 160ms var(--tobira-ease), visibility 0s linear 160ms;
}
.tier-guide .component-more.is-materialized .component-more-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 220ms ease, transform 220ms var(--tobira-ease), visibility 0s;
}
.tier-guide .component-more-panel label { position: relative; }
.tier-guide .component-more-panel label > span {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 12px;
  margin: 0;
  color: rgba(6, 6, 6, .52);
  font-family: var(--tobira-font-body);
  font-size: 8px;
  pointer-events: none;
}
.tier-guide .component-more-panel select {
  width: 100%;
  height: 70px;
  padding: 19px 12px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tobira-bg-deep);
  font-family: var(--tobira-font-body);
  font-size: 12px;
}
.tier-guide .component-more-panel select:hover { background: var(--tobira-accent); color: var(--tobira-bg); }
.tier-guide .component-more-panel option { background: var(--tobira-paper); color: var(--tobira-bg); }

/* Components / Card — 348 × 328 with a fixed 240 px preview. */
.component-grid {
  grid-template-columns: repeat(auto-fit, 348px);
  justify-content: center;
  gap: 34px 22px;
}
.component-card,
.component-card:hover,
.component-card:focus-within,
.component-card:active,
.component-card:hover:active,
.component-card:focus-within:active {
  width: 348px;
  height: 328px;
  contain-intrinsic-size: 348px 328px;
  transform: none;
  transition: none;
}
.component-card-open { height: 328px; }
.component-card-stage {
  width: 348px;
  height: 240px;
  aspect-ratio: 1.45 / 1;
  border: 0;
  background: var(--tobira-surface-warm);
}
.component-card-preview-layer {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  transform: scale(1);
  transform-origin: center;
  transition: transform 240ms var(--tobira-ease);
}
@media (hover: hover) and (pointer: fine) {
  .component-card:hover .component-card-preview-layer {
    transform: scale(1.018);
  }
}
.component-card-open:focus-visible { outline: 0; }
.component-card-open:focus-visible .component-card-stage {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 3px;
}
.component-card-caption {
  box-sizing: border-box;
  height: 74px;
  min-height: 74px;
  margin-top: 14px;
  gap: 6px;
}
.component-card-caption strong {
  font-size: 22px;
  line-height: 28px;
}
.component-card-meta {
  font-family: var(--tobira-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}
.component-card-review {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--tobira-accent);
  color: var(--tobira-bg-deep);
  font-family: var(--tobira-font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

/* Content / Detail Stage — the Landing copy plane is liquid glass. */
.detail-veil,
.component-detail-veil {
  background: rgba(4, 4, 4, .72);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.detail-veil {
  background: rgba(4, 4, 4, .24);
  -webkit-backdrop-filter: blur(8px) saturate(1.16);
  backdrop-filter: blur(8px) saturate(1.16);
}
.detail-dialog {
  width: min(1354px, calc(100vw - 86px));
  height: min(522px, calc(100dvh - 24px));
  border: 0;
  border-radius: var(--tobira-radius-stage);
  background: rgba(18, 18, 18, .38);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .09),
    inset 0 0 42px rgba(255, 255, 255, .025),
    0 50px 160px -20px rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(30px) saturate(1.65) brightness(1.18);
  backdrop-filter: blur(30px) saturate(1.65) brightness(1.18);
}
.detail-dialog::before { display: none; }
.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 835fr) minmax(0, 519fr);
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.detail-dialog.is-swapping .detail-body { opacity: 1; transform: none; }
.detail-media {
  height: 100%;
  min-width: 0;
  background: var(--tobira-bg-deep);
}
.detail-prompt-pane {
  height: 100%;
  min-width: 0;
  overflow-y: auto;
  border: 0;
  background: rgba(24, 24, 24, .42);
  box-shadow:
    inset 1px 0 rgba(255, 255, 255, .09),
    inset 18px 0 48px rgba(255, 255, 255, .02);
  -webkit-backdrop-filter: blur(32px) saturate(1.55) brightness(1.12);
  backdrop-filter: blur(32px) saturate(1.55) brightness(1.12);
}
.detail-media > *,
.detail-prompt-pane > * {
  transition: opacity 160ms ease, transform 160ms var(--tobira-ease);
}
.detail-dialog.is-swapping .detail-media > *,
.detail-dialog.is-swapping .detail-prompt-pane > * {
  opacity: 0;
  transform: translateX(10px);
}
.detail-actions { background: var(--tobira-surface-warm); box-shadow: 0 14px 42px rgba(0, 0, 0, .38); }
.detail-actions button::before,
.detail-actions button::after { display: none; }
.detail-actions .tobira-icon-button { display: grid; }
.detail-actions .close-action { background: var(--tobira-surface); color: var(--tobira-ink); }
.detail-prompt-pane #detail-primary { height: 48px; min-height: 48px; }

.component-detail {
  width: min(1354px, calc(100vw - 86px));
  height: min(760px, calc(100dvh - 24px));
  border: 0;
  border-radius: var(--tobira-radius-stage);
  background: var(--tobira-surface);
  box-shadow: 0 50px 160px -20px rgba(0, 0, 0, .62);
}
.component-detail-layout { grid-template-columns: minmax(0, 835fr) minmax(0, 519fr); }
.component-detail-visual,
.component-detail-stage { background: var(--tobira-surface-warm); }
.component-detail-copy {
  background: var(--tobira-surface);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.component-detail-copy::before { display: none; }
.component-detail-actions { height: 40px; }
.component-detail-actions button,
.component-detail-actions .component-detail-shelf {
  width: var(--tobira-control-icon-md);
  height: var(--tobira-control-icon-md);
}
.component-detail-actions button:hover { background: var(--tobira-surface-warm); }
.component-detail-content { padding: 78px 28px 28px; }
.component-detail.is-swapping .component-detail-stage,
.component-detail.is-swapping .component-detail-content {
  opacity: 0;
  transform: translateX(10px);
}

/* Shared / Footer Lockup — equal side columns keep the brand optically fixed. */
.tobira-footer,
.site-footer.tobira-footer,
.component-footer.tobira-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 212px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  margin-top: 40px;
  padding: 36px max(28px, calc((100vw - 1200px) / 2));
  border: 0;
  background: var(--tobira-paper);
  color: var(--tobira-bg-deep);
  box-shadow: none;
}
.tobira-footer-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.tobira-footer-info strong {
  font-family: var(--tobira-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.tobira-footer-info > span { font-size: 12px; color: rgba(10, 10, 10, .62); }
.tobira-footer .tobira-footer-brand { justify-self: center; }
.tobira-footer .tobira-footer-brand svg { width: 36px; height: 49px; }
.tobira-footer .tobira-footer-brand span {
  font-family: var(--tobira-font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 13px;
  letter-spacing: 1.56px;
}
.tobira-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 22px;
}
.tobira-footer-links a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--tobira-bg-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.tobira-footer-links a:focus-visible {
  outline: 2px solid #9b2d1d;
  outline-offset: 3px;
}

/* Shared / Footer Lockup — LANDING variant.
   The archive does not end on a band ruled across the page — it ends on the
   door. A rounded paper island stands in the black with air on all four
   sides, split down the middle into two leaves, a knob on each. 60/30/10
   holds: black is the room, paper is the door, and the only orange on the
   whole surface is the two knobs, which is what makes them read as the
   way through. */
.site-footer.tobira-footer.tobira-footer--landing {
  --door-inset: clamp(20px, 3.4vw, 52px);   /* black left showing around the pair */
  --door-gap: clamp(9px, 1vw, 15px);        /* the shut line: black, not a rule */
  --door-pad: clamp(26px, 3vw, 48px);       /* leaf edge to its contents */
  /* Board edge to the name. It has to clear the slant, not just the glyph:
     the display face ships no italic, so the browser shears the upright one,
     and that shear throws the top of each letter to the right by an amount no
     measurement of the text box reports. Checked by eye, not by number. */
  --door-lip: clamp(28px, 3.4vw, 48px);
  --door-radius: clamp(18px, 2vw, 28px);

  position: relative;
  z-index: 2;
  /* two boards standing side by side, with the page showing between them */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  /* the shared lockup centres its items; a board that only takes its content's
     width is not a door, so hold both leaves out to the full column */
  justify-items: stretch;
  gap: var(--door-gap);
  width: min(1200px, calc(100% - 2 * var(--door-inset)));
  min-height: 0;
  /* the black below and beside the doors matches, so they read as standing
     free; above it stays wider, that gap is the room they stand in */
  margin: clamp(44px, 6vw, 96px) auto var(--door-inset);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(10, 10, 10, .62);
  overflow: visible;
}
.tobira-footer--landing .footer-leaf {
  /* The name is sized against its own leaf, not the window. The side padding
     is carried by the children rather than the leaf, so 1cqw stays equal to
     1% of the board itself at every width — otherwise the name is measured
     against a box whose share of the leaf changes as the padding does. */
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 48px);
  min-width: 0;
  padding: clamp(52px, 6vw, 84px) 0 22px;
  border-radius: var(--door-radius);
  background: var(--tobira-paper);
  /* the name runs to the leaf edges; the radius is what cuts it */
  overflow: hidden;
}
.tobira-footer--landing .footer-leaf > * { margin-inline: var(--door-pad); }
/* One knob per leaf, set against the shut line at the same height on both,
   so the pair reads as the handles of a door that opens down the middle. */
.tobira-footer--landing .footer-leaf::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 42%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tobira-accent);
}
.tobira-footer--landing .footer-leaf--left::after { right: clamp(18px, 2vw, 28px); }
.tobira-footer--landing .footer-leaf--right::after { left: clamp(18px, 2vw, 28px); }
.tobira-footer--landing .tobira-footer-info { gap: 16px; }
.tobira-footer--landing .tobira-footer-info strong { color: rgba(10, 10, 10, .45); }
.tobira-footer--landing .tobira-footer-info > span {
  max-width: 16ch;
  color: var(--tobira-bg-deep);
  font-family: var(--tobira-font-display);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.14;
}
.tobira-footer--landing .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}
.tobira-footer--landing .footer-cols h3 {
  margin: 0 0 12px;
  color: rgba(10, 10, 10, .45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.tobira-footer--landing .footer-cols a {
  display: block;
  padding: 5px 0;
  color: var(--tobira-bg-deep);
  font-size: 14px;
  text-decoration: none;
}
.tobira-footer--landing .footer-cols a:hover { color: var(--tobira-accent); }
.tobira-footer--landing .footer-cols a:focus-visible {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 3px;
}
/* TOB on one leaf, IRA on the other, each pushed hard against the shut line
   so the name reads across the gap. Sunk to the bottom of its leaf, and set
   in ink not accent: at this size colour would take the orange far past a
   tenth of the surface and cost the knobs their scarcity. */
.tobira-footer--landing .footer-wordmark {
  margin: auto 0 -.12em;
  /* The lip is what keeps the letterforms whole. Aligned hard against the
     board with no lip, the B was shaved flat by the clip however small the
     type got — the glyph's curve overshoots the width the box reports, and
     the alignment pins that edge in place, so shrinking only opened a gap on
     the far side. */
  padding-inline: var(--door-lip);
  color: var(--tobira-bg-deep);
  font-family: var(--tobira-font-display);
  /* sized against TOB, the wider half, to sit inside the lip on both sides.
     No upper bound: the name is tied to the board, and a ceiling would strand
     it mid-leaf on the stacked layout, where the boards are wider. */
  font-size: max(40px, 42cqw);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .82;
  user-select: none;
}
.tobira-footer--landing .footer-leaf--left .footer-wordmark { text-align: right; }
.tobira-footer--landing .footer-leaf--right .footer-wordmark {
  /* Measured, not judged: the sheared B overreaches its box toward the shut
     line while the bare I stem hangs back inside its side bearing, so equal
     lips read as unequal air. The indent cancels the I's bearing plus the
     B's overshoot (both em-scaled, .221em at the measured seam), leaving
     ink-to-edge equal on both leaves at every width the boards scale to. */
  text-indent: -.221em;
  text-align: left;
}
.tobira-footer--landing .footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(6, 6, 6, .12);
}
.tobira-footer--landing .footer-note {
  /* matches the height of the legal links on the other leaf, so both bottom
     rows come out the same and the two halves of the name sit level */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(10, 10, 10, .45);
  font-size: 11px;
}
.tobira-footer--landing .tobira-footer-links { justify-content: flex-start; }
.tobira-footer--landing .tobira-footer-links a {
  color: rgba(10, 10, 10, .45);
  font-size: 11px;
  font-weight: 600;
}
.tobira-footer--landing .tobira-footer-links a:hover { color: var(--tobira-bg-deep); }
.tobira-footer--landing .tobira-footer-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: rgba(10, 10, 10, .45);
  text-decoration: none;
}
.tobira-footer--landing .tobira-footer-brand svg { width: 14px; height: 19px; }
.tobira-footer--landing .tobira-footer-brand span { font-size: 10px; line-height: 1; }
@media (max-width: 820px) {
  .site-footer.tobira-footer.tobira-footer--landing {
    min-height: 0;
    text-align: left;
  }
  /* too narrow for two boards side by side: the leaves stack, so they close
     top to bottom instead. The knobs go — there is no shut line to set them
     against — and each half of the name centres on its own board. */
  .site-footer.tobira-footer.tobira-footer--landing {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
  }
  .tobira-footer--landing .footer-leaf::after { content: none; }
  .tobira-footer--landing .footer-leaf--left .footer-wordmark,
  .tobira-footer--landing .footer-leaf--right .footer-wordmark {
    padding-inline: var(--door-lip);
    text-indent: 0;
    text-align: center;
  }
  .tobira-footer--landing .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the shared lockup reorders its children on narrow screens; the landing
     stack has its own order, so keep the tagline above the link columns */
  .tobira-footer.tobira-footer--landing .tobira-footer-info,
  .tobira-footer.tobira-footer--landing .tobira-footer-links,
  .tobira-footer.tobira-footer--landing .tobira-footer-brand { grid-row: auto; }
  .tobira-footer--landing .tobira-footer-info { align-items: flex-start; }
  .tobira-footer--landing .tobira-footer-info > span { max-width: none; }
  .tobira-footer--landing .tobira-footer-brand { margin-left: 0; }
}

/* Key Cursor: Figma specifies a clean glyph with contrast switching only. */
.gallery-smooth-cursor { filter: none; }

@media (max-width: 820px) {
  .tier-guide { padding: 10px 18px; }
  .tier-guide .control-row,
  .tier-guide.is-stuck .control-row {
    min-height: 120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 28px;
  }
  .tier-guide .tier-filter,
  .tier-guide.is-stuck .tier-filter {
    width: 100%;
    flex: none;
    scroll-snap-type: x proximity;
  }
  .tier-guide .component-guide-actions {
    width: 100%;
    flex: none;
    justify-content: flex-end;
  }
  .tier-guide .component-more-panel { top: 56px; }

  .tier-filter button,
  .source-filters button {
    height: var(--tobira-control-icon-touch);
    min-height: var(--tobira-control-icon-touch);
    padding-inline: 15px;
  }
  .tier-guide .tier-filter button {
    height: var(--tobira-control-icon-touch);
    min-height: var(--tobira-control-icon-touch);
    flex: 0 0 auto;
    padding-inline: 15px;
    scroll-snap-align: start;
  }

  .detail-dialog,
  .component-detail {
    inset: 0;
    width: min(390px, 100%);
    max-width: none;
    height: min(844px, 100dvh);
    max-height: none;
    margin: auto;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .detail-dialog {
    background: rgba(18, 18, 18, .4);
    -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(1.14);
    backdrop-filter: blur(28px) saturate(1.5) brightness(1.14);
  }
  .component-detail { background: var(--tobira-surface); }
  .detail-dialog.is-open,
  .component-detail.is-open { transform: none; }
  .detail-body,
  .component-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px minmax(0, 1fr);
    overflow: hidden;
  }
  .detail-media,
  .component-detail-visual { height: 300px; min-height: 300px; }
  .detail-prompt-pane {
    height: auto;
    min-height: 0;
    overflow-y: auto;
    padding: 28px 20px calc(36px + env(safe-area-inset-bottom));
    border: 0;
    background: rgba(24, 24, 24, .46);
    -webkit-backdrop-filter: blur(28px) saturate(1.45) brightness(1.1);
    backdrop-filter: blur(28px) saturate(1.45) brightness(1.1);
  }
  .detail-actions {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }
  .detail-actions button,
  .detail-actions .fav-toggle,
  .component-detail-actions button,
  .component-detail-actions .component-detail-shelf {
    width: var(--tobira-control-icon-touch);
    min-width: var(--tobira-control-icon-touch);
    height: var(--tobira-control-icon-touch);
  }
  .component-detail-copy { height: auto; min-height: 0; }
  .component-detail-actions {
    position: relative;
    top: auto;
    right: auto;
    height: 68px;
    background: var(--tobira-surface);
  }
  .component-detail-content {
    height: calc(100% - 68px);
    overflow-y: auto;
    padding: 20px 18px calc(38px + env(safe-area-inset-bottom));
  }

  .tobira-footer,
  .site-footer.tobira-footer,
  .component-footer.tobira-footer {
    min-height: 320px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: 22px;
    padding: 32px 18px;
    text-align: center;
  }
  .tobira-footer .tobira-footer-brand { grid-row: 1; }
  .tobira-footer .tobira-footer-info { grid-row: 2; align-items: center; }
  .tobira-footer .tobira-footer-links { grid-row: 3; justify-content: center; }
}

@media (max-width: 700px) {
  .tier-guide .component-search-control.is-open {
    width: min(280px, calc(100vw - 72px)) !important;
  }
}

@media (max-width: 540px) {
  .tier-guide .component-guide-actions { gap: 4px; }
  .tier-guide .component-guide-actions.is-searching .component-more {
    width: 0;
    flex-basis: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .detail-veil {
    background: rgba(4, 4, 4, .88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .detail-dialog,
  .detail-prompt-pane {
    background: var(--tobira-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 700px) {
  .component-search-control.is-open { width: min(280px, calc(100vw - 92px)) !important; }
  .component-more-panel { right: 0; }
  .component-grid { grid-template-columns: minmax(0, 348px); }
  .component-card,
  .component-card:hover,
  .component-card:focus-within,
  .component-card:active,
  .component-card-stage {
    width: min(348px, calc(100vw - 36px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .door-header,
  .door-island { animation: none; }
  .tier-filter button:active,
  .source-filters button:active { opacity: .78; scale: 1; }
  .component-card-preview-layer,
  #grid .work-card .thumb > img,
  #grid .work-card .thumb > video,
  #grid .work-card .thumb > iframe { transition: none; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .door-header,
  .door-island,
  .tier-guide .control-row,
  .tier-guide.is-stuck .control-row,
  .component-guide-inner,
  .tier-guide .component-more-panel,
  .component-more-panel {
    background: var(--tobira-paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .component-search-surface,
  .tier-guide .component-search-surface { background: rgba(6, 6, 6, .08); }
}

/* Landing Door Island → guide fusion.
 * The original 180 × 48 island is the shared element: no duplicate mark.
 * Filters stay left, the intact island docks in the
 * center, and Search / More stay right.
 */
.tier-guide-merge-sentinel {
  display: block;
  width: 100%;
  height: 0;
  pointer-events: none;
}

#tier-guide .control-row,
#tier-guide.is-stuck .control-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--tobira-control-navigation-width)
    minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
}

#tier-guide .tier-filter,
#tier-guide.is-stuck .tier-filter {
  grid-column: 1;
  grid-row: 1;
  width: max-content;
  max-width: 100%;
  flex: none;
  justify-self: start;
}

.tier-guide-island-slot {
  grid-column: 2;
  grid-row: 1;
  width: var(--tobira-control-navigation-width);
  min-width: var(--tobira-control-navigation-width);
  height: var(--tobira-control-header);
  min-height: var(--tobira-control-header);
  justify-self: center;
}

.tier-guide-island-slot > .door-header {
  position: relative;
  z-index: 2;
  inset: auto;
  top: auto;
  left: auto;
  width: var(--tobira-control-navigation-width);
  min-width: var(--tobira-control-navigation-width);
  height: var(--tobira-control-header);
  min-height: var(--tobira-control-header);
  margin: 0;
  animation: none;
  transform: none;
}

/* The island and guide use the same paper-white glass. GSAP eases away the
 * nested island coat while docking so the two translucent layers do not stack
 * into a visibly whiter pill. Only the material changes; controls stay solid. */
#tier-guide.is-fused .tier-guide-island-slot > .door-header {
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#tier-guide .landing-guide-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

#tier-guide.is-merging,
#tier-guide.is-merging .control-row,
#tier-guide.is-merging .door-header,
.door-header.is-merging,
.header-auth-slot.is-merging {
  will-change: transform;
}

@media (max-width: 820px) {
  body::before {
    transform: translateY(0);
    transition: transform 220ms var(--tobira-ease);
  }
  body.tier-guide-fused::before { transform: translateY(-105%); }

  #tier-guide .control-row,
  #tier-guide.is-stuck .control-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  #tier-guide .tier-filter,
  #tier-guide.is-stuck .tier-filter {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  .tier-guide-island-slot { display: none; }
  #tier-guide .landing-guide-actions {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  #tier-guide.is-fused .control-row,
  #tier-guide.is-fused.is-stuck .control-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows:
      var(--tobira-control-header)
      var(--tobira-control-icon-touch);
  }
  #tier-guide.is-fused .tier-guide-island-slot {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #tier-guide.is-fused .tier-filter,
  #tier-guide.is-fused.is-stuck .tier-filter {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  #tier-guide.is-fused .landing-guide-actions {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

@media (max-width: 540px) {
  .tier-guide .tier-filter button {
    padding-inline: 11px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before { transition: none; }
}

/* Component Gallery uses the same physical shared-element handoff as Landing:
 * Source stays left, the original Door Island docks in the center, and the
 * search actions stay right. */
.component-guide-merge-sentinel {
  display: block;
  width: 100%;
  height: 0;
  pointer-events: none;
}

#source-guide .component-guide-inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--tobira-control-navigation-width)
    minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
}

#source-guide .source-filters {
  grid-column: 1;
  grid-row: 1;
  width: max-content;
  max-width: 100%;
  flex: none;
  justify-self: start;
}

.component-guide-island-slot {
  grid-column: 2;
  grid-row: 1;
  width: var(--tobira-control-navigation-width);
  min-width: var(--tobira-control-navigation-width);
  height: var(--tobira-control-header);
  min-height: var(--tobira-control-header);
  justify-self: center;
}

#source-guide .component-guide-island-slot > .door-island {
  position: relative;
  z-index: 2;
  inset: auto;
  top: auto;
  left: auto;
  width: var(--tobira-control-navigation-width);
  min-width: var(--tobira-control-navigation-width);
  height: var(--tobira-control-header);
  min-height: var(--tobira-control-header);
  margin: 0;
  animation: none;
  transform: none;
}

#source-guide.is-fused .component-guide-island-slot > .door-island {
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#source-guide .component-guide-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

#source-guide.is-merging,
#source-guide.is-merging .component-guide-inner,
#source-guide.is-merging .door-island,
.door-island.is-merging {
  transition: none;
  will-change: transform;
}

@media (max-width: 820px) {
  #source-guide .component-guide-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  #source-guide .source-filters {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  .component-guide-island-slot { display: none; }
  #source-guide .component-guide-actions {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  #source-guide.is-fused .component-guide-inner {
    min-height: 120px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows:
      var(--tobira-control-header)
      var(--tobira-control-icon-touch);
  }
  #source-guide.is-fused .component-guide-island-slot {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #source-guide.is-fused .source-filters {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  #source-guide.is-fused .component-guide-actions {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}