/*
 * 画面の下のタブ（スマホのみ）。
 *
 * **見た目はスマート給付・空き家ナビのタブに合わせてある**（2026-09-27のご指示）。
 * 画面の端から浮かせた丸いカプセルで、いまいる場所はアイコンの後ろに
 * 楕円の下地が付く。iOS 26 のタブバーと同じ作法。
 *
 * **設計のページと記事のページで同じものを出す。**入口が消えるページがあると、
 * 「タブ」ではなくただの飾りになる。どちらからも読めるよう、ここに切り出してある。
 *
 * **ここだけは影とすりガラスを使う。**構想書16-3は「影は使わない。階層は線と余白で」
 * だが、浮いているものが本文の上を滑っていくことは、線では伝わらない。
 * 他の2つのプロダクト（スマート給付・空き家ナビ）と手が揃っていることを優先した。
 */

/*
 * 下端からどれだけ浮かせるか。**ここでは決めない。**
 * 設計のページは判定の帯（畳んで3.5rem）が下に居るので app.css が入れる。
 * ここで :root に既定値を置くと、あとから読まれるこちらが勝って上書きを潰す
 * （実際そうなって、帯の上に乗った）。使う側で var(…, 0.75rem) と書く。
 */

.tabbar {
  display: none;
}

@media (max-width: 1079px) {
  .tabbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 0 var(--space-2);
    /*
     * 下端の物差しは dvh。判定の帯と同じ取り方にしてある。
     * **bottom: 0 では届かない。** iPhone の Safari はアドレスバーを下に重ねるので、
     * bottom が指す「下端」はバーの下になる（app.css の帯の注に詳しい）。
     */
    top: 100dvh;
    transform: translateY(calc(-100% - var(--tabbar-lift, 0.75rem)));
    transition:
      opacity var(--duration-state) var(--easing),
      transform var(--duration-state) var(--easing);
  }

  /* dvh を知らないブラウザ向け */
  @supports not (height: 100dvh) {
    .tabbar {
      top: auto;
      bottom: calc(var(--tabbar-lift, 0.75rem) + env(safe-area-inset-bottom, 0px));
      transform: none;
    }
  }

  /*
   * 判定の帯を引き上げているあいだは引っ込める。
   * 出したままだと、読んでいる最中の判定の上にカプセルが乗る。
   */
  body[data-sheet='open'] .tabbar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-100% - var(--tabbar-lift, 0.75rem) + 1rem));
  }

  @supports not (height: 100dvh) {
    body[data-sheet='open'] .tabbar {
      transform: translateY(1rem);
    }
  }

  /*
   * 計測の案内が出ているあいだも引っ込める。
   * 1回だけ出る札だが、答えるまで下に居座るので、カプセルが上に乗る。
   */
  body:has(#consent:not([hidden])) .tabbar {
    display: none;
  }

  .tabbar ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    padding: 0;
    max-width: 32rem;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 1.75rem;
    /* すりガラス。下の図面や本文がうっすら透ける */
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lifted);
  }

  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    /* 指で押せる大きさ。iOS の下限 44px より大きく取る */
    min-height: 3.5rem;
    padding: 4px 0;
    font: inherit;
    border-radius: 1.75rem;
    color: var(--ink-muted);
    text-decoration: none;
  }

  .tabbar a[aria-current='page'] {
    color: var(--brand);
  }

  .tabbar a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
  }

  .tabbar__mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    transition: background var(--duration-ui) var(--easing);
  }

  /* **色だけで居場所を伝えない**（構想書16-7）。下地の楕円が形でも示す */
  .tabbar a[aria-current='page'] .tabbar__mark {
    background: var(--brand-soft);
  }

  .tabbar__mark svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tabbar a[aria-current='page'] .tabbar__mark svg {
    stroke-width: 2.1;
  }

  .tabbar__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /*
   * 上の並びは下げる。**同じものを上下に置かない。**
   * どちらが本物か分からなくなるうえ、狭い幅では見出しと押し合う。
   */
  .masthead .tabs {
    display: none;
  }
}

@media print {
  .tabbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabbar,
  .tabbar__mark {
    transition: none;
  }
}