/* TASTEOME persistent header link (Sprint 1 audit fix B) */
/* Brand mark inline (Sprint 3 Day 9) */
.hub-brand {
  display: inline-flex; align-items: center; gap: 0.5em;
}
.hub-brand::before {
  content: '';
  /* 1 : 2.02 の縦長。方式の理由は site-header.css の .site-brand::before を参照。 */
  width: 0.6em; height: 1.2em;
  background-color: var(--t-fg);
  -webkit-mask-image: url('/assets/logo-mark.svg');
  mask-image: url('/assets/logo-mark.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ドメイン header 内のレイアウト調整 */
.header-tasteome {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 768px) {
  .header-tasteome { margin-left: 0.5rem; }
}

.tasteome-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.45em 0.85em;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem; font-weight: 600;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.tasteome-link.active {
  background: color-mix(in srgb, var(--t-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--t-accent) 40%, transparent);
  color: inherit;
}
.tasteome-link.partial {
  background: color-mix(in srgb, var(--t-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--t-accent) 30%, transparent);
  color: inherit;
}
.tasteome-link.new {
  background: var(--accent, var(--t-accent));
  color: var(--t-on-accent);
}
.tasteome-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  text-decoration: none;
}
.tasteome-link .tl-icon { font-size: 1.1em; line-height: 1; }
.tasteome-link .tl-text { line-height: 1; }
@media (max-width: 480px) {
  .tasteome-link .tl-text { display: none; }
  .tasteome-link { padding: 0.45em 0.6em; }
}

/* 🔴 タップ目標 (2026-08-30 mobile view 精査 batch 4 / I-6) — root で実測
   `.header-search` **29x26** / `.tasteome-link` **37x33**。root は `.site-nav` を持たず
   独自の `.topbar` に置くので、`site-header.css` のモバイル折り畳みが効かず**出たまま**。
   サービスの入口なので最初に触られる可能性が高い。
   ⚠ `padding` は上げない (≤480 で icon-only になった時の見た目を保つ)。箱だけ広げる。
   ⚠ `.site-nav` 内の同じ class は同幅で display:none なので、この規則の影響を受けない。 */
@media (max-width: 767px) {
  .header-search,
  .tasteome-link {
    min-width: var(--t-tap-min, 44px);
    min-height: var(--t-tap-min, 44px);
  }
}