/* RhymeFinder（押韻查詢器）計算器專屬樣式
   移植自 tools/rhyme/template.html 的原型工具。
   顏色改走 CalWhat 既有色票（CLAUDE.md Design System：主色 #667eea/#764ba2、輸入框綠 #48bb78），
   不重新定義 .glass-card、.form-input、.btn- 開頭、.seo-section 等全域 class（見 GLOBAL_CSS_CLASSES.md）。
   押韻標色系統（--rf-u0..11 內韻分組色、--rf-r0..7 句尾韻腳色、--rf-mark/--rf-soft 命中底色）
   是這個工具獨有的語意標記，維持成頁面專屬 CSS 變數（不是站台主題色，故不用全站色票）。
   全部 class 一律加 rf- 前綴，避免像 .row/.panel/.tag 這種泛用字跟其他頁或未來的全域樣式撞名
   （尤其 .row 若不改名會被 layout.js 的 exportToPDF 預設選擇器 '.row' 誤吃進 PDF 匯出）。
*/

:root {
  /* 內韻分組色（最多 12 組輪流用色，取自原型工具，彼此對比度足夠） */
  --rf-u0: #B8860B; --rf-u1: #1E7FC0; --rf-u2: #C8385F; --rf-u3: #2F8F3A;
  --rf-u4: #7B4FC8; --rf-u5: #D06A1E; --rf-u6: #11897B; --rf-u7: #8C7A10;
  --rf-u8: #B23FA6; --rf-u9: #4260D0; --rf-u10: #9C5A18; --rf-u11: #23875A;
  /* 句尾韻腳字母底色（8 組輪流） */
  --rf-r0: #FBE38A; --rf-r1: #BFE3F5; --rf-r2: #F8C9D3; --rf-r3: #C9EDC4;
  --rf-r4: #E2D2F6; --rf-r5: #FAD3B0; --rf-r6: #B9E8E0; --rf-r7: #E6E0B8;
  /* 句中「押到句尾」的字用外框標示（不填色，跟句尾的實心底色、內韻底線區分開）：
     直接借用色相對應的 --rf-u0..7（本來就是同一組色的飽和版本，白底上對比夠），不用另外調色 */
  --rf-rb0: var(--rf-u0); --rf-rb1: var(--rf-u1); --rf-rb2: var(--rf-u2); --rf-rb3: var(--rf-u3);
  --rf-rb4: var(--rf-u4); --rf-rb5: var(--rf-u5); --rf-rb6: var(--rf-u6); --rf-rb7: var(--rf-u7);
  /* 查詞分頁「押到的字」底色 */
  --rf-mark: #FBE38A;
  --rf-mark-ink: #16202A;
  --rf-soft: #E6F1EF;
}

.rf-wrap { display: grid; gap: 20px; }
.rf-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rf-row.rf-bar { justify-content: space-between; }

.rf-sub { color: #718096; margin: 4px 0 0; max-width: 62ch; }

.rf-panel { display: grid; gap: 16px; }

/* 查詢輸入框：刻意不用全域 .form-input（那是給一般數字/選單欄位），
   這裡要放大字級凸顯查詢的字/詞，是這個工具的核心互動焦點 */
.rf-input-q {
  font: 600 28px/1.2 'Noto Sans TC', sans-serif;
  color: #2d3748;
  background: #fff;
  border: 2px solid #cbd5e0;
  border-radius: 8px;
  padding: 10px 14px;
  width: 11em;
  max-width: 100%;
}
.rf-input-q:focus-visible,
.rf-tabs button:focus-visible,
.rf-seg input:focus-visible + span,
.rf-chk input:focus-visible,
.rf-textarea:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

.rf-seg { display: inline-flex; border: 1px solid #cbd5e0; border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.rf-seg label { position: relative; }
.rf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.rf-seg span { display: block; padding: 8px 14px; cursor: pointer; font-size: 16px; color: #718096; }
.rf-seg input:checked + span { background: #667eea; color: #fff; font-weight: 500; }

.rf-lbl { font-size: 16px; color: #718096; letter-spacing: .04em; }

.rf-syls { display: flex; flex-wrap: wrap; gap: 10px; }
.rf-syl { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; display: grid; gap: 2px; min-width: 6.5em; background: #f7fafc; }
.rf-syl .rf-ch { font: 600 26px/1.2 'Noto Sans TC', sans-serif; color: #2d3748; }
.rf-syl .rf-ch.rf-en { font: 600 22px/1.3 'Roboto Mono', monospace; }
.rf-py { font-family: 'Roboto Mono', monospace; font-size: 16px; color: #4a5568; }
.rf-syl .rf-grp { font-size: 16px; color: #667eea; }
.rf-syl select { font: 16px 'Roboto Mono', monospace; color: #2d3748; background: #fff; border: 1px solid #cbd5e0; border-radius: 6px; padding: 2px 4px; }

.rf-note { font-size: 16px; color: #718096; line-height: 1.7; }

.rf-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 16px; color: #718096; }
.rf-legend i { font-style: normal; display: inline-block; width: 1em; height: 1em; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.rf-legend .rf-legend-mark { background: var(--rf-mark); }
.rf-legend .rf-legend-soft { background: var(--rf-soft); border: 1px solid #667eea; }

.rf-tier { display: grid; gap: 12px; margin-top: 16px; }
.rf-tier h2 { font: 700 20px/1.3 'Noto Sans TC', sans-serif; margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: #2d3748; }
.rf-tier h2 .rf-n { font: 500 16px 'Roboto Mono', monospace; color: #718096; }
.rf-tier .rf-desc { margin: -6px 0 0; color: #718096; font-size: 16px; }

.rf-words { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-w { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 12px; display: grid; justify-items: center; gap: 0; }
.rf-w b { font: 600 22px/1.3 'Noto Sans TC', sans-serif; color: #2d3748; }
.rf-w b.rf-en { font: 600 20px/1.45 'Roboto Mono', monospace; }
.rf-w .rf-py { color: #718096; }
.rf-w .rf-py em { font-style: normal; background: var(--rf-mark); color: var(--rf-mark-ink); border-radius: 3px; padding: 0 2px; }
.rf-w.rf-same { border-color: #667eea; background: var(--rf-soft); }

.rf-sublbl { font-size: 16px; color: #718096; margin-top: 4px; }

.rf-more { justify-self: start; font: 16px 'Noto Sans TC', sans-serif; background: none; border: 1px solid #cbd5e0; color: #2d3748; border-radius: 8px; padding: 6px 14px; cursor: pointer; }
.rf-more:hover { border-color: #667eea; }

.rf-empty { color: #718096; font-size: 16px; }

.rf-details { font-size: 16px; color: #718096; }
.rf-details .rf-tblwrap { overflow-x: auto; }
.rf-details table { border-collapse: collapse; margin-top: 8px; }
.rf-details td { padding: 4px 12px 4px 0; border-bottom: 1px solid #e2e8f0; vertical-align: top; }

.rf-tabs { display: inline-flex; gap: 4px; border-bottom: 1px solid #e2e8f0; }
.rf-tabs button { font: 500 18px 'Noto Sans TC', sans-serif; background: none; border: 0; border-bottom: 3px solid transparent; color: #718096; padding: 8px 14px; cursor: pointer; }
.rf-tabs button[aria-selected="true"] { color: #2d3748; border-bottom-color: #667eea; }

.rf-textarea {
  font: 20px/1.8 'Noto Sans TC', sans-serif;
  color: #2d3748;
  background: #f7fafc;
  border: 2px solid #cbd5e0;
  border-radius: 8px;
  padding: 10px 14px;
  width: 100%;
  resize: vertical;
}

.rf-chk { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-size: 16px; }
.rf-chk input { width: 18px; height: 18px; accent-color: #667eea; }

#rfLyricOut { gap: 6px; }
.rf-ln { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 12px; align-items: baseline; padding: 4px 0; }
/* .rf-sch／.rf-c 系列規則刻意不掛在 .rf-ln 底下（原本是），改成全站級：
   這兩個 class 本來就靠 rf- 前綴保證不撞名，拿掉 .rf-ln 這層祖先限制才能讓下面的
   圖例（.rf-ilegend，在 rf-ln 結構之外）直接複用同一份正式樣式，畫面才會跟真的歌詞行一致 */
.rf-sch { font: 600 18px 'Roboto Mono', monospace; text-align: center; border-radius: 6px; padding: 0 4px; }
.rf-sch.rf-none { color: #718096; font-weight: 400; }
.rf-ln .rf-txt { font: 22px/1.7 'Noto Sans TC', sans-serif; overflow-wrap: anywhere; color: #2d3748; }
.rf-c { border-radius: 3px; padding: 0 1px; }
.rf-c.rf-end { font-weight: 600; }
/* 句中跟句尾押到的字：外框不填色，避免跟句尾的實心底色、以及底線內韻混在一起分不出誰是誰
   （三個外部審查者反應看不出差異才改的，見 session log） */
.rf-c.rf-pause { border: 2px solid; border-radius: 4px; padding: 0 2px; background: none; }
.rf-c.rf-in { text-decoration: underline 3px; text-underline-offset: 7px; cursor: default; }
.rf-c.rf-multi { text-decoration-thickness: 5px; font-weight: 700; }
/* 底線樣式編碼準確度層級：exact 完全同韻／near 同組近韻／cross 中英近似（粗細規則不變，見上） */
.rf-c.rf-layer-exact { text-decoration-style: solid; }
.rf-c.rf-layer-near { text-decoration-style: dashed; }
.rf-c.rf-layer-cross { text-decoration-style: dotted; }
.rf-c.rf-hl { background: var(--rf-soft); outline: 2px solid #667eea; outline-offset: 1px; }

.rf-density { font-size: 16px; color: #718096; display: flex; flex-wrap: wrap; gap: 16px; }
.rf-density b { color: #2d3748; font: 600 18px 'Roboto Mono', monospace; }

/* 歌詞標色圖例：跟正式歌詞行共用 .rf-sch／.rf-c 系列 class，顏色改用 style 內嵌示範色，
   不做另一份仿造樣式，CSS 改了圖例就自動跟著變（見上面 .rf-sch／.rf-c 拿掉 .rf-ln 祖先限制的說明） */
.rf-ilegend { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 16px; color: #718096; align-items: center; }
.rf-ilegend .rf-ilegend-item { display: inline-flex; align-items: center; gap: 6px; }

.rf-ln .rf-tag { font: 16px 'Noto Sans TC', sans-serif; border: 1px solid #e2e8f0; background: #fff; color: #2d3748; border-radius: 999px; padding: 2px 12px; cursor: pointer; white-space: nowrap; }
.rf-ln .rf-tag:hover { border-color: #667eea; }
.rf-ln.rf-blank { min-height: 1em; }
.rf-ln.rf-section { display: block; font: 500 16px 'Roboto Mono', monospace; color: #718096; padding-top: 8px; }

/* 資料載入狀態 */
.rf-data-status { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #718096; }
.rf-data-error { color: #e53e3e; font-size: 16px; }

/* 英文發音：整塊可點（滑鼠／手指），另外附一顆真的 button 給鍵盤與讀螢幕軟體用。
   cursor 規則一定要排在 .rf-c.rf-in 之後：同樣是兩個 class 的權重，靠順序才蓋得掉那條 cursor: default */
.rf-say { cursor: pointer; }
.rf-c.rf-say { cursor: pointer; }
.rf-w.rf-say:hover, .rf-syl.rf-say:hover { border-color: #667eea; }
.rf-saybtn {
  background: none; border: 0; margin: 0; padding: 0 0 0 6px;
  color: #667eea; font-size: 16px; line-height: 1; cursor: pointer; vertical-align: 2px;
}
.rf-saybtn:hover { color: #4c51bf; }
.rf-saybtn:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 520px) {
  .rf-ln { grid-template-columns: 2em 1fr; }
  .rf-ln .rf-tag { grid-column: 2; justify-self: start; }
}