/* =========================================================
   Re-Bible MVP – layout & search bar (sticky-safe)
   全行差し替えOK：固定ヘッダー/thead sticky/新検索バー
   ========================================================= */

/* ---------- 基本レイアウト（stickyが効く前提を作る） ---------- */
:root{
  /* 調整ノブ */
  --rb-border: var(--rb-search-border);

  --rb-cell-py: 0.18rem;
  --rb-line-h: 1.38;

  --rb-form-gap: .5rem;
  --rb-topbar-py: .5rem;
  --rb-sticky-header-offset: 0px;

  /* 検索バー */
  --rb-searchbar-h: 56px;
  --rb-searchpad-x: .75rem;
  --rb-searchpad-y: .5rem;
  --rb-search-result-maxh: 40vh;
  --rb-action-size: 44px;
  --rb-aimikoto-slot-w: var(--rb-action-size);
  --rb-search-compact-offset: 0px;
  --rb-search-field-h: 44px;
}

html,
body{
  margin:0;
  min-height:100%;            /* 旧ブラウザ向けの下支え。高さを固定しない */
}

html{
  height:auto;                /* rb-base.css の height:100% を打ち消して柔軟に */
  min-height:100vh;           /* body と足並みを揃え、動的vh未対応環境でもヘッダーを保持 */
  overflow-y:hidden;          /* 本文用スクロール領域と競合しないようにルートの縦スクロールを殺す */
}

/* 全体を縦方向のフレックスにし、ヘッダー固定 + 本文スクロールの器を作る */
body{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height:100vh;            /* 1画面を満たしつつ、動的ビューポートで高さが足りなくなってもスクロール可 */
  height:100vh;                /* flex 子(main)の overflow を効かせるための基準高さ */
  background:var(--rb-bg);
  color:var(--rb-fg);
  overflow-x:hidden;           /* 横方向だけを制御し、縦方向は自然なスクロールに任せる */
}

@supports (height: 100svh){
  body{
    min-height:100svh;        /* アドレスバー表示時の実効ビューポートに追随 */
    height:100svh;
  }
  html{
    min-height:100svh;
  }
}

@supports (height: 100dvh){
  body{
    min-height:100dvh;        /* フルスクリーン時も滑らかに */
    height:100dvh;
  }
  html{
    min-height:100dvh;
  }
}

body > .sticky-header-group{
  flex:0 0 auto;
}

/* ヘッダー帯（上段） */
.sticky-header-group{
  position:sticky;
  top:0;
  z-index:8;
  background:var(--rb-header-bg);
  border-bottom:1px solid var(--rb-border);
  margin-bottom: calc(-1 * var(--rb-sticky-header-offset, 0px));
}

/* 章節フォーム行（中段） */
.sticky-header-group .panel{
  background:var(--rb-header-inner-bg);
  border-top:1px solid var(--rb-border);
  border-bottom:1px solid var(--rb-border);
  padding-left: calc(0px + 0.75rem);
  /* padding: var(--rb-topbar-py) calc(var(--rb-searchpad-x) + var(--rb-safe-right)) var(--rb-topbar-py) calc(var(--rb-searchpad-x) + var(--rb-safe-left)); */
}

.rb-translation-header{
  background:var(--rb-header-inner-bg);
  border-top:1px solid var(--rb-border);
  border-bottom:1px solid var(--rb-border);
  height: 30px;
}

.rb-translation-header[hidden]{
  display:none;
}

.rb-translation-header-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  height:3.5em;
  padding: 0 calc(12px + var(--rb-safe-right)) 0 calc(12px + var(--rb-safe-left));
}

.rb-translation-header-scroll::-webkit-scrollbar{
  display:none;
}

.rb-translation-header-grid{
  display:grid;
  gap:12px;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px, 1fr);
  min-height:var(--rb-translation-header-row-height, var(--rb-translation-header-height));
  max-height:var(--rb-translation-header-row-height, var(--rb-translation-header-height));
  align-items:center;
}

.rb-translation-header-cell{
  display:flex;
  /* align-items:center; */
  font-weight:600;
  font-size:.95rem;
  color:var(--rb-muted);
  min-width:280px;
  padding:6px 12px;
  box-sizing:border-box;
  height:var(--rb-translation-header-row-height, var(--rb-translation-header-height));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width: 480px){
  .rb-translation-header-cell{
    min-width:220px;
  }
}

/* 本文：この要素だけ縦スクロールにする（stickyが効く） */
main#chapterMount{
  flex:1 1 auto;
  min-height:0;                /* Flex 子要素が縮む余地を確保 */
  overflow-y:auto;
  overflow-x:auto;             /* フォント拡大時もヘッダーが横方向に切れないようにする */
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  padding-top: var(--rb-sticky-header-offset, 0px);
  scroll-padding-top: calc(var(--rb-sticky-header-offset, 0px) + 16px);
  /* 下部の検索バー高さぶん余白を確保（被らないように） */
  padding-bottom: calc(var(--rb-searchbar-h) + var(--rb-safe-bottom));
}

/* テーブル（章本文） */
table.rb-chapter{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

table.rb-chapter th,
table.rb-chapter td{
  padding: var(--rb-cell-py) .75rem;
  line-height: var(--rb-line-h);
  border-bottom:1px solid var(--rb-border);
  vertical-align: top;
}

/* thead を常時上部固定（本文スクロール時に見出しが残る） */
table.rb-chapter thead th{
  position:sticky;
  top:var(--rb-sticky-header-offset, 0px);  /* 上部の固定ヘッダー高ぶんだけ本文を下げる */
  background:var(--rb-header-inner-bg);
  z-index:2;
}

/* 節番号セル */
.rb-verse-no{
  width:4rem;
  color:var(--rb-verse-no-color);
}

/* .rb-highlight は rb-base.css 側に統一（ここでは定義しない） */

/* ---------- 新：下部固定の検索バー ---------- */
#rb-searchbar{
  position:fixed;
  left:0; right:0; bottom:0;
  height: calc(var(--rb-searchbar-h) + var(--rb-safe-bottom));
  background: var(--rb-searchbar-bg);
  border-top:1px solid var(--rb-border);
  z-index: 20;                 /* thead(2) より大きく */
  display:flex;
  align-items:center;
  padding: var(--rb-searchpad-y) calc(var(--rb-searchpad-x) + var(--rb-safe-right)) calc(var(--rb-searchpad-y) + var(--rb-safe-bottom)) calc(var(--rb-searchpad-x) + var(--rb-safe-left));
  overflow:visible;
}

#rb-searchbar .rb-searchbar-inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

.rb-searchbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  order:0;
}

.rb-chap-nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.rb-chap-nav-btn{
  font-size:20px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.02em;
}

.rb-chap-nav-btn span[aria-hidden="true"]{
  pointer-events:none;
}

.rb-search-fields{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:1 1 auto;
  order:1;
}

.rb-action-btn{
  appearance:none;
  border:1px solid var(--rb-search-input-border);
  background:var(--rb-search-input-bg);
  color:var(--rb-search-input-color);
  width:var(--rb-action-size);
  height:var(--rb-action-size);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  padding:0;
  flex:0 0 auto;
}

.rb-action-btn:hover,
.rb-action-btn:focus-visible{
  background:var(--rb-search-input-hover, rgba(255,255,255,0.1));
  color:var(--rb-search-focus);
}

.rb-action-btn:focus-visible{
  outline:2px solid var(--rb-search-focus);
  outline-offset:2px;
}

.rb-action-btn svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.rb-search-toggle{
  display:none;
}

.rb-search-toggle-icon{
  width:22px;
  height:22px;
  fill:currentColor;
}

.rb-aimikoto-slot,
.rb-workspace-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--rb-aimikoto-slot-w);
  height:var(--rb-action-size);
  flex:0 0 auto;
}

.rb-aimikoto-slot:empty,
.rb-workspace-slot:empty{
  pointer-events:none;
  width:0;
}

.rb-search-input{
  width:100%;
  height: var(--rb-search-field-h);
  min-height: var(--rb-search-field-h);
  padding:0 .75rem;
  border:1px solid var(--rb-search-input-border);
  background:var(--rb-search-input-bg);
  color:var(--rb-search-input-color);
  border-radius:.5rem;
  outline:none;
}
.rb-search-input:focus{ border-color:var(--rb-search-focus); }

.rb-search-translation{
  height: var(--rb-search-field-h);
  min-height: var(--rb-search-field-h);
  padding:0 .75rem;
  border:1px solid var(--rb-search-input-border);
  border-radius:.5rem;
  background:var(--rb-search-input-bg);
  color:var(--rb-search-input-color);
  flex: 0 1 160px;
  width: min(200px, 100%);
  min-width: 120px;
}

.rb-search-translation:focus{
  outline:2px solid var(--rb-search-focus);
  outline-offset:0;
}

.rb-reader-toggle{
  position:relative;
}

.rb-reader-toggle:hover,
.rb-reader-toggle:focus-visible{
  background:var(--rb-search-input-hover, rgba(255,255,255,0.1));
  color:var(--rb-search-focus);
}

.rb-reader-toggle:focus-visible{
  outline:2px solid var(--rb-search-focus);
  outline-offset:2px;
}

.rb-reader-toggle.is-open{
  background:var(--rb-search-input-hover, rgba(255,255,255,0.14));
  color:var(--rb-search-focus);
}

.rb-reader-icon{ display:inline-flex; }
.rb-reader-icon svg{ width:22px; height:22px; fill:currentColor; }

.rb-reader-badge{
  position:absolute;
  top:4px;
  right:4px;
  min-width:16px;
  height:16px;
  border-radius:999px;
  background:var(--rb-search-focus);
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
}

.rb-reader-toggle.has-active .rb-reader-badge{ display:inline-flex; }

#rb-reader-menu{
  position:fixed;
  z-index:32;
  background:var(--rb-search-result-bg);
  border:1px solid var(--rb-search-result-border);
  color:var(--rb-search-input-color);
  border-radius:12px;
  padding:12px;
  width:min(320px, calc(var(--rb-viewport-w) - 24px));
  max-height:min(70vh, 360px);
  overflow:auto;
  box-shadow:0 18px 36px rgba(3,6,15,0.35);
  display:flex;
  flex-direction:column;
  gap:8px;
}

#rb-reader-menu[hidden]{ display:none; }

.rb-reader-menu-header{
  font-weight:600;
  font-size:0.92rem;
}

.rb-reader-slot{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}

.rb-reader-slot:hover,
.rb-reader-slot:focus-visible{
  border-color:var(--rb-search-focus);
  background:rgba(59,91,219,0.16);
  outline:none;
}

.rb-reader-slot.is-active{
  border-color:var(--rb-search-focus);
  background:rgba(59,91,219,0.2);
}

.rb-reader-slot-title{
  font-weight:600;
  font-size:0.9rem;
}

.rb-reader-slot-ref{
  font-size:0.78rem;
  color:var(--rb-search-result-ref);
}

.rb-reader-slot-ref.is-empty{
  color:var(--rb-muted);
  font-style:italic;
}

.rb-reader-sync{
  display:grid;
  grid-template-columns:auto 1fr auto;
  column-gap:10px;
  row-gap:6px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--rb-search-result-border);
  border-radius:10px;
  background:rgba(255,255,255,0.02);
}

.rb-reader-sync-title{
  font-weight:600;
  font-size:0.9rem;
  grid-column:1;
}

.rb-reader-sync-desc{
  grid-column:2;
  flex:1;
  font-size:0.78rem;
  color:var(--rb-search-result-ref);
  line-height:1.4;
}

.rb-reader-sync-status{
  display:block;
  grid-column:1 / -1;
  width:100%;
  font-size:0.74rem;
  color:var(--rb-search-result-ref);
  line-height:1.4;
}

.rb-reader-sync-status.is-error{
  color:var(--rb-error, #ff6b6b);
}

.rb-reader-sync-status.is-off{
  color:var(--rb-muted);
}

.rb-reader-sync-toggle{
  grid-column:3;
  justify-self:end;
  width:18px;
  height:18px;
  accent-color:var(--rb-search-focus);
}

.rb-reader-hint{
  font-size:0.75rem;
  color:var(--rb-search-result-ref);
  line-height:1.4;
  padding:4px 4px 0;
}

/* ---------- 検索結果パネル（検索バー直上に出す） ---------- */
#rb-search-results{
  position:fixed;
  left: calc(var(--rb-searchpad-x) + var(--rb-safe-left));
  right: calc(var(--rb-searchpad-x) + var(--rb-safe-right));
  bottom: calc(var(--rb-searchbar-h) + var(--rb-searchpad-y) + var(--rb-safe-bottom));
  max-height: var(--rb-search-result-maxh);
  background:var(--rb-search-result-bg);
  border:1px solid var(--rb-search-result-border);
  border-radius:.5rem;
  overflow:auto;
  z-index: 19;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

#rb-search-results[hidden]{ display:none; }

/* 結果リストの中身用の軽い整形（任意） */
#rb-search-results .rb-hit{
  padding:.5rem .75rem;
  border-bottom:1px solid var(--rb-border);
  cursor:pointer;
}
#rb-search-results .rb-hit:hover{
  background:var(--rb-search-result-hover);
}
#rb-search-results .rb-hit .rb-ref{
  font-size:.85rem;
  color:var(--rb-search-result-ref);
  margin-right:.5rem;
}

.rb-search-info{
  font-size:.85rem;
  color:var(--rb-search-result-ref);
  cursor:default;
}

.rb-search-loading{
  text-align:center;
  font-size:.85rem;
  color:var(--rb-search-result-ref);
}

/* ---------- モバイル調整 ---------- */
@media (max-width: 767px){
  #rb-searchbar.is-compact .rb-search-toggle{
    display:flex;
  }

  #rb-searchbar.is-compact .rb-search-fields{
    display:none;
  }

  #rb-searchbar.is-compact-expanded .rb-search-fields{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:.5rem;
    position:absolute;
    left: var(--rb-searchpad-x);
    right: var(--rb-searchpad-x);
    bottom: calc(100% + var(--rb-searchpad-y));
    background: var(--rb-searchbar-bg);
    border:1px solid var(--rb-border);
    border-radius:.75rem;
    padding:.65rem;
    box-shadow:0 16px 40px rgba(0,0,0,.45);
    z-index: 30;
  }

  #rb-searchbar.is-compact-expanded .rb-search-translation,
  #rb-searchbar.is-compact-expanded .rb-search-input{
    width:100%;
    max-width:100%;
  }
}

/* 本文の検索語ハイライト（app.js が <span class="rb-mark"> を付ける） */
span.rb-mark {
  background: rgba(255,230,150,.45);
  color: #000;
  padding: 0 .06em;
  border-radius: .15em;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}

/* 節の列を狭める */
.rb-verse-no{
  width: 1.0ch;             /* 数字2桁 */
  font-variant-numeric: tabular-nums; /* 桁揃えで見やすく */
  text-align: right;
}

/* メインのフッター調整 */
#chapterMount { padding-bottom: calc(150px + var(--rb-safe-bottom)) !important; }

/* search results stacked above nav, below search bar (and below Mikoto) */
#rb-search-results { z-index: var(--z-search) !important; }

body.rb-search-compact-open #rb-search-results {
  bottom: calc(var(--rb-searchbar-h) + var(--rb-searchpad-y) + var(--rb-search-compact-offset) + var(--rb-safe-bottom));
}

@media (max-width:520px){
  #rb-searchbar .rb-searchbar-inner{ gap: 10px; }
  .rb-searchbar-actions{ gap: 8px; }
  .rb-search-fields{ gap: 8px; }
  .rb-search-translation{ flex-basis: 150px; min-width: 110px; }
  #rb-search-input{ flex-basis: 180px; }
}

@media (max-width:480px){
  :root{
    --rb-action-size: 44px;
    --rb-search-field-h: 44px;
  }
  .rb-searchbar-actions{ gap: 6px; }
  .rb-search-toggle-icon,
  .rb-action-btn svg{ width: 24px; height: 24px; }
  .rb-reader-badge{
    top: 2px;
    right: 2px;
  }
}

:root[data-footer-align="right"] #rb-searchbar .rb-searchbar-actions,
#rb-searchbar[data-footer-align="right"] .rb-searchbar-actions,
#rb-searchbar .rb-searchbar-inner[data-footer-align="right"] .rb-searchbar-actions{
  order: 2;
  margin-left: auto;
}

:root[data-footer-align="right"] #rb-searchbar .rb-search-fields,
#rb-searchbar[data-footer-align="right"] .rb-search-fields,
#rb-searchbar .rb-searchbar-inner[data-footer-align="right"] .rb-search-fields{
  order: 1;
}

#rb-searchbar .rb-searchbar-actions{
  margin-left: 0;
}

/* 入力幅はフレックスで伸縮：右寄せしつつ狭い画面でも縮む */
#rb-search-input{
  flex: 1 1 22px;
  min-width: 0;
  width: auto;
}

/* 検索対象の選択は基準160px（必要に応じて縮む） */
.rb-search-translation{ flex:0 1 16px; }


/* アプリ全体で使えるフック */
:root{
  --rb-font-scale: 0; /* -3..+5 */
}
/* data-theme */
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }
/* 密度（例：行間/パディング微縮） */
:root[data-dense="true"] .rb-verse, 
:root[data-dense="true"] .rb-sp-item{
  line-height: 1.35;
}
/* フォントスケール（例：本文） */
#chapterMount{ font-size: calc(1rem + var(--rb-font-scale)*0.0625rem); }