/* ============================ Formula booklet ============================
   Panel dùng lại khung .calcguide-* (dock, head, section <details>) của
   calculator guide; file này chỉ thêm phần riêng: thẻ công thức, bảng ký hiệu,
   bảng hằng số. Tách file riêng thay vì nối vào app.css. */

.fx-search{flex:0 0 auto; padding:10px 14px 0;}
.fx-search .text-input{width:100%; font-size:.8rem;}

.fx-suggest{margin-bottom:12px;}
.fx-group{margin-top:10px;}
.fx-group:first-child{margin-top:0;}
.calcguide-sec-body > .fx-group:first-child{margin-top:0;}
.fx-group-head{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin:0 0 6px; font-size:.76rem; font-weight:600; color:var(--ink);
}
.fx-via{font-weight:400; font-size:.68rem; color:var(--ink-faint);}
.fx-hidden-note,.fx-count{margin:4px 0 0; font-size:.7rem; color:var(--ink-faint);}
.fx-count{margin:0 0 8px;}
.fx-crumb{margin:10px 0 4px; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);}

/* ---- Thẻ công thức ---- */
.fx-card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  margin-bottom:6px; overflow:hidden;
}
.fx-card.is-open{border-color:var(--accent);}
.fx-card-head{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:7px 10px 0; border:0; background:none; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
}
.fx-card-head:disabled{cursor:default;}
.fx-name{flex:1; min-width:0; font-size:.74rem; color:var(--ink-soft);}
.fx-level{
  flex:0 0 auto; padding:1px 6px; border-radius:999px;
  background:var(--hl-soft); color:var(--hl); font-size:.6rem; font-weight:600; letter-spacing:.03em;
}
.fx-toggle{flex:0 0 auto; font-size:.66rem; color:var(--accent-ink);}
.fx-toggle::after{content:" ›"; display:inline-block; transition:transform .15s;}
.fx-card.is-open .fx-toggle::after{transform:rotate(90deg);}

/* Công thức: mỗi dòng một display. KaTeX không tự xuống dòng, nên dòng nào vẫn quá
   rộng thì cuộn ngang TRONG thẻ thay vì đẩy cả panel. */
.fx-math{padding:2px 10px 6px; overflow-x:auto; overflow-y:hidden;}
.fx-math .katex-display{margin:.35em 0; text-align:left;}
.fx-math .katex-display > .katex{text-align:left;}
.fx-math .katex{font-size:1.06em;}
.fx-conv .katex{font-size:.9em;}

.fx-detail{border-top:1px solid var(--line); background:var(--surface-2); padding:8px 10px 9px;}
.fx-detail[hidden]{display:none;}
.fx-symbols{display:flex; flex-direction:column; gap:4px;}
.fx-sym-row,.fx-const-row{
  display:grid; grid-template-columns:minmax(34px, max-content) 1fr auto;
  align-items:baseline; gap:4px 10px; font-size:.74rem; line-height:1.4;
}
.fx-sym{color:var(--ink); white-space:nowrap;}
.fx-meaning{color:var(--ink-soft); min-width:0;}
.fx-unit{color:var(--ink-faint); font-size:.7rem; white-space:nowrap;}
.fx-const{color:var(--accent-ink); font-size:.7rem; text-align:right;}
.fx-notes{margin:7px 0 0; padding-left:17px;}
.fx-notes li{font-size:.71rem; line-height:1.45; color:var(--ink-soft);}

/* Bảng hằng số: giá trị dài (khối lượng electron có ba cách viết) xuống hẳn dòng
   riêng thay vì ép cột nghĩa còn vài chữ. */
.fx-table{display:flex; flex-direction:column; gap:7px;}
.fx-const-row{grid-template-columns:minmax(34px, max-content) 1fr;}
.fx-const-row .fx-const{grid-column:2; text-align:left;}

.fx-mult{display:grid; grid-template-columns:1fr auto auto; gap:3px 14px; font-size:.75rem; color:var(--ink-soft);}
.fx-abbr{font-family:var(--font-mono); color:var(--ink);}

/* ---------- Bảng tuần hoàn (Chemistry) — lưới 18 cột vừa bề ngang panel; hàng 8 là khe trước họ Lanthan/Actin ---------- */
.fx-pt-grid{
  display:grid; grid-template-columns:repeat(18, minmax(0, 1fr));
  grid-template-rows:repeat(7, auto) 6px repeat(2, auto); gap:1px;
}
.fx-pt-cell{
  min-width:0; aspect-ratio:1 / 1.2; padding:0; border:0; border-radius:2px;
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:.56rem; font-weight:600; line-height:1;
  cursor:pointer; overflow:hidden;
}
.fx-pt-cell:hover{background:var(--accent-soft);}
.fx-pt-cell.is-on{background:var(--accent); color:#fff;}
.fx-pt-cell:focus-visible{outline:2px solid var(--accent); outline-offset:0;}
.fx-pt-hint{margin:0 0 8px; font-size:.74rem; line-height:1.5; color:var(--ink-soft);}
.fx-pt-info{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin:0 0 8px; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:.8rem; color:var(--ink);
}
.fx-pt-sym{font-size:1.15rem;}
.fx-pt-name{font-weight:600;}
.fx-pt-note{flex-basis:100%; font-size:.7rem; color:var(--ink-faint);}

/* ---------- Thuộc tính nguyên tố (mục 8–10) trong dòng chi tiết ---------- */
.fx-pt-props{
  flex-basis:100%; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:6px 0 0; padding-top:6px;
  border-top:1px solid var(--line); font-size:.74rem;
}
.fx-pt-props dt{color:var(--ink-soft);}
.fx-pt-props dd{margin:0; color:var(--ink); font-variant-numeric:tabular-nums;}
.fx-pt-unit{color:var(--ink-soft);}

/* ---------- Bảng số liệu (mục 11–22) ---------- */
.fx-dt-note{margin:0 0 8px; font-size:.72rem; line-height:1.5; color:var(--ink-soft);}
.fx-dt-wrap{margin:0 0 10px;}
.fx-dt{width:100%; border-collapse:collapse; font-size:.72rem; line-height:1.35; color:var(--ink);}
.fx-dt th{
  padding:4px 5px; text-align:left; vertical-align:bottom; font-weight:600; font-size:.68rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line-strong); background:var(--surface-2);
}
.fx-dt td{padding:3px 5px; vertical-align:top; border-bottom:1px solid var(--line); overflow-wrap:anywhere;}
.fx-dt td.is-num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.fx-dt tr:last-child td{border-bottom:0;}
.fx-dt sub, .fx-dt sup{font-size:.72em; line-height:0;}
.fx-dt-sub{display:block; font-size:.66rem; color:var(--ink-soft);}
.fx-figure svg{display:block; width:100%; height:auto;}

/* ---------- Nút "Data in the booklet" trong phần gợi ý ---------- */
.fx-chips{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 10px;}
.fx-chips-label{flex-basis:100%; font-size:.7rem; color:var(--ink-soft);}
.fx-chip{
  padding:3px 9px; border:1px solid var(--accent); border-radius:999px; background:var(--accent-soft);
  color:var(--accent-ink); font:inherit; font-size:.72rem; cursor:pointer;
}
.fx-chip:hover{background:var(--accent); color:#fff;}