/* Domain Header internal elements (Phase 2 Overhaul: top-level header は site-header.css に移行)
   各 element は drawer 内 / share menu / 各種 control として引き続き使用 */

/* Share menu (drawer 内の share button から trigger) */
.share-btn {
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border);
  border-radius: var(--t-r-pill);
  padding: 0.22rem 0.7rem;
  color: var(--t-fg-soft);
  font-family: var(--t-font-mono);
  font-size: 0.62rem; font-weight: 600;
  cursor: pointer; transition: all var(--t-trans-fast);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.share-btn:hover { color: var(--t-accent); border-color: var(--t-accent); }
.share-menu {
  position: fixed;
  background: var(--t-surface);
  border: 1px solid var(--t-border-strong);
  border-radius: var(--t-r-md);
  padding: 0.3rem;
  box-shadow: var(--t-shadow-md);
  z-index: 2700;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 9rem;
}
.share-menu.visible { display: flex; }
.share-menu-item {
  background: transparent; border: none;
  color: var(--t-fg);
  font-family: var(--t-font-sans);
  font-size: 0.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  display: flex; align-items: center; gap: 0.4rem;
}
.share-menu-item:hover { background: var(--t-bg-elev); }

/* Theme / Lang switch (drawer 内で使用) — 同じ class 名を drawer-toggle にも fall-through */
.theme-switch, .lang-switch {
  display: flex; background: var(--t-bg-elev);
  border: 1px solid var(--t-border); border-radius: var(--t-r-pill);
  padding: 2px; gap: 2px;
}
.theme-btn, .lang-btn {
  background: transparent; border: none;
  padding: 0.18rem 0.55rem; border-radius: var(--t-r-pill);
  color: var(--t-dim);
  font-size: 0.62rem; font-family: var(--t-font-mono); font-weight: 600;
  cursor: pointer; transition: all var(--t-trans-fast);
}
.theme-btn.on, .lang-btn.on { background: var(--t-accent); }
/* hardcode-ok-begin: theme toggle の正色ペア (dark=暗字/light=白字 on accent、意図的反転) */
:where(html, body)[data-theme="dark"] .theme-btn.on,
:where(html, body)[data-theme="dark"] .lang-btn.on { color: #0a0a12; }
:where(html, body)[data-theme="light"] .theme-btn.on,
:where(html, body)[data-theme="light"] .lang-btn.on { color: #ffffff; }
/* hardcode-ok-end */

/* Domain Switcher (drawer 内に embed) */
.domain-switcher {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.domain-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--t-active-bg);
  border: 1px solid var(--t-active-border);
  border-radius: var(--t-r-pill);
  font-family: var(--t-font-mono);
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--t-accent);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-trans-fast), border-color var(--t-trans-fast);
}
.domain-badge:hover { background: var(--t-bg-elev); border-color: var(--t-accent); }
/* v=66: light theme で accent text on light-tinted bg は 2.82 contrast → fg に */
:where(html, body)[data-theme="light"] .domain-badge { color: var(--t-fg); }
.domain-badge-icon { font-size: 1.15rem; line-height: 1; }
.domain-badge-name { text-transform: uppercase; }
.domain-badge-arrow {
  font-size: 0.7rem; margin-left: 0.05rem; opacity: 0.85;
  transition: transform var(--t-trans);
}
.domain-badge.open .domain-badge-arrow { transform: rotate(180deg); }

.domain-menu {
  position: absolute;
  top: calc(100% + 0.45rem); left: 0;
  background: var(--t-surface);
  border: 1px solid var(--t-border-strong);
  border-radius: var(--t-r-md);
  box-shadow: var(--t-shadow-md);
  padding: 0.35rem;
  z-index: 2700;
  min-width: 200px;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
}
.domain-menu.visible { display: flex; }
.domain-menu-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  background: transparent; border: none;
  border-radius: var(--t-r-sm);
  cursor: pointer;
  font-family: var(--t-font-sans);
  font-size: 0.82rem; font-weight: 600;
  color: var(--t-fg);
  text-align: left;
  width: 100%;
  text-decoration: none;
  transition: background var(--t-trans-fast);
}
.domain-menu-item:hover:not(:disabled) { background: var(--t-bg-elev); }
.domain-menu-item.current { background: var(--t-active-bg); color: var(--t-accent); }
.domain-menu-item:disabled { color: var(--t-fg-soft); cursor: not-allowed; opacity: 0.7; }
.domain-menu-item-icon { font-size: 1.15rem; line-height: 1; width: 1.25em; text-align: center; }
.domain-menu-item-meta {
  margin-left: auto;
  font-family: var(--t-font-mono);
  font-size: 0.65rem; color: var(--t-fg-soft); font-weight: 700;
}
.domain-menu-item.current .domain-menu-item-meta { color: var(--t-accent); }

/* Axis selectors (drawer 内 axes section) */
.axis-selectors {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.axis-select {
  display: flex; align-items: center; gap: 0.3rem;
  border: 1px solid; border-radius: var(--t-r-pill);
  padding: 0.15rem 0.3rem 0.15rem 0.55rem;
  font-family: var(--t-font-mono); font-weight: 700;
}
.axis-label { font-size: 0.6rem; font-weight: 700; }
.axis-dropdown {
  /* translucent-ok: 浮遊面でなく親 chip 内の inline select 風 control (透過が正) */
  background: transparent; border: none; color: inherit;
  font-family: var(--t-font-sans);
  font-size: 0.66rem; font-weight: 600;
  cursor: pointer; outline: none;
  padding: 0.1rem 0.2rem;
}
.axis-dropdown option {
  background: var(--t-surface); color: var(--t-fg);
  font-family: var(--t-font-sans);
}

/* Toggle row (drawer 内 utility toggle) */
.toggle-row { display: flex; gap: 0.4rem; }
.toggle-btn {
  background: var(--t-bg-elev); border: 1px solid var(--t-border);
  border-radius: var(--t-r-pill);
  padding: 0.22rem 0.7rem;
  color: var(--t-fg-soft);
  font-size: 0.6rem; font-family: var(--t-font-mono); font-weight: 600;
  cursor: pointer; transition: all var(--t-trans-fast);
}
.toggle-btn.on {
  background: var(--t-active-bg);
  border-color: var(--t-active-border);
  color: var(--t-accent);
}
/* v=66: light theme で accent text on light-tinted bg contrast 不足 */
:where(html, body)[data-theme="light"] .toggle-btn.on { color: var(--t-fg); }