/* board.css — the Metasoft chart-board frame, split out of app.css.
 *
 * Shared by the desktop chart page and the mobile Intuchi pages, which must
 * render the SAME board: its markup is held byte-identical to Metasoft's own by
 * test/template-fidelity.test.js, so the two views must not drift into separate
 * implementations.
 *
 * Every rule stays scoped under .chart-page, which is what lets a mobile page
 * wrap only the board in that class without app.css's page chrome leaking in.
 */
/* ---- Chart page (index.html) -- structural port of Chinese Metasoft's own chart
   template (ref/chart-full.json boards['6'].chart + .tables). Same table/tr/td
   nesting, widths, heights and colours as their harvested markup, restored as
   the base frame (5-row outer table: dirbar / 3 palace rows w/ 30px gutters /
   dirbar, 180x100px #E6E6E6 palace cells, nested position:relative glyph cards
   with 9px captions). Where they hotlink a coloured PNG glyph (TianPanColour/
   ShenPanColour/RenPanColour/StemsColour/Stems/Branches/Trigrams/Void/Qmdj) we
   emit the mirrored local copy instead (img/star, img/deity, img/door,
   img/stem-colour, img/trigram, img/mark/{kong,horse}.png), never hotlinking
   Metasoft directly. Scoped under .chart-page so almanac/zeri/fengshui (sharing
   this stylesheet) are unaffected. */
:root {
  --c-star: #8b1e1e;        /* 九星 TianPanColour -- heaven-plate star */
  --c-deity: #134e8a;       /* 八神 ShenPanColour -- deity */
  --c-door: #1d6b1d;        /* 八門 RenPanColour -- door */
  --c-stem-plate: #134e8a;  /* 天干/地支 StemsColour -- big plate stems */
  --c-stem-najia: #6b4b12;  /* 天干 Stems (no -Colour suffix) -- small 納甲 triad stems */
  --c-branch: #6b4b12;      /* 地支 Branches */
  --c-trigram: #555;        /* 八卦 Trigrams */
  --c-void: #999;           /* 空亡 Void kong marker */
}
.chart-page .msf-board { border:1px solid var(--ink); border-collapse:collapse; margin:0 auto }
.chart-page .msf-board .dirbar td.db { height:26px; color:#fff; font-weight:700; font-size:12px; text-align:center; padding:2px 6px }
.chart-page .msf-board .dirbar td.db img { vertical-align:middle }
.chart-page .msf-board .gutter { width:30px; height:100px; color:#fff; font-weight:700; font-size:11px; text-align:center; border:0 }
.chart-page .msf-board .gutter img { vertical-align:middle }
.chart-page .pal-cell { width:180px; border:1px solid black; border-collapse:collapse; padding:0; vertical-align:top; position:relative }
.chart-page .pal-cell.centre { text-align:center; vertical-align:middle }
.chart-page .pal { width:100%; height:100%; border-collapse:collapse }
.chart-page .pal-centre .c5 { text-align:center; font-size:16px; font-weight:700; color:#777; padding-top:6px }
/* Per-glyph card: Metasoft's `position:relative` table -- glyph row + up to two
   9px caption rows sitting tight under it (negative-margin captions collapse to
   ordinary flow here since we don't need pixel-exact absolute stacking). */
.chart-page .glyph-card { position:relative; display:inline-block; width:60px; vertical-align:top }
.chart-page .glyph-card td { text-align:center }
.chart-page .glyph-card .cap1,.chart-page .glyph-card .cap2 { font-size:9px; color:gray; line-height:1.1; min-height:9px }
.chart-page .glyph { font-size:26px; font-weight:700; line-height:1.05; font-family:sans-serif; display:inline-block }
.chart-page .glyph.star { color:var(--c-star) }
.chart-page .glyph.deity { color:var(--c-deity) }
.chart-page .glyph.door { color:var(--c-door) }
.chart-page .trigram-badge { position:absolute; top:2px; right:2px }
/* 八神 (deity) level overlay -- p.level, the per-instance 0-7 value the engine
   assigns each chart. Rendered as a bold red digit above-left of the deity
   glyph, mirroring Metasoft's own overlaid ordinal in that position. */
.chart-page .ord-overlay { position:absolute; top:-4px; left:2px; font-size:13px; font-weight:800; color:#b22b2b }
.chart-page .circle-phase { display:inline-block; min-width:10px; height:10px; border:1px solid gray; border-radius:50%; font-size:8px; text-align:center; line-height:10px; margin-left:2px }
.chart-page .stem-plate .stem { color:var(--c-stem-plate) }
.chart-page .najia,.chart-page .tagcol { width:60px; font-size:9px }
.chart-page .najia-hex { font-size:9px; text-align:center; color:var(--c-trigram) }
.chart-page .formcol .form-tag { font-size:9px; color:var(--accent); text-align:left }
.chart-page .pal-num-cell { font-size:26px; font-family:sans-serif; font-weight:700; text-align:center; position:relative }
.chart-page .pal-num-cap .cap1,.chart-page .pal-num-cap .cap2 { font-size:9px; color:gray }
.chart-page .stems { font-weight:700; font-size:1.05em }
.chart-page .stem.heaven { color:var(--c-stem-plate) } .chart-page .stem.earth { color:var(--c-stem-plate) }
.chart-page table.structs798 { border-collapse:collapse; width:100%; margin:6px 0 }
.chart-page table.structs798 .structs-hdr td { background:black; color:#fff; text-transform:uppercase; font-size:.7em; padding:4px; text-align:center }
.chart-page table.structs798 td { border:1px solid var(--line); padding:4px 8px; font-size:.85em }
.chart-page table.structs798 .desc { text-align:left; color:#444 }
.chart-page table.pill { border-collapse:collapse; width:100% }
.chart-page table.pill td,.chart-page table.pill th { border:1px solid #b58; padding:6px 10px; text-align:center }
.chart-page table.pill th { background:#8a1f1f; color:#fff; font-size:14px; font-weight:600 }
.chart-page .pname { font-size:.65em; color:#888 } .chart-page .pstem { font-size:1.3em } .chart-page .pbranch { font-size:1.2em } .chart-page .phid { font-size:.75em; color:#666 }
.chart-page .pill small { display:block; font-size:.6em; color:#888 }
/* Metasoft's 185px bordered info box: centred header cell (colspan=2, border-bottom
   1px solid gray) then key/value rows -- verbatim chrome from tables[0..2]. */
.chart-page .msf-info { border:1px solid gray; border-collapse:collapse; width:185px; margin:6px 0 }
.chart-page .msf-info table { width:100%; border-collapse:collapse }
.chart-page .msf-info tr:not(.hdr) { border:1px solid gray }
.chart-page .msf-info .hdr td { text-align:center; border-bottom:1px solid gray; font-weight:600; padding:3px }
.chart-page .msf-info .k { font-size:.9em; padding:3px 6px } .chart-page .msf-info .v { padding:3px 6px }
.chart-page .msf-calendar { text-align:center; font-size:12px; margin:8px 0; color:#333 }
.chart-page .msf-calendar .hdr { font-weight:700 }
.chart-page table.structs { border-collapse:collapse; width:100% }
.chart-page table.structs thead td { background:black; color:#fff; text-transform:uppercase; font-size:.75em; padding:4px }
.chart-page table.structs tbody td { border:1px solid var(--line); padding:4px 8px; font-size:.85em }
.chart-page table.structs .desc { font-size:.85em; color:#444; text-align:left }
.chart-page h3 { font-size:.95em; color:var(--gold); margin:16px 0 4px; border-bottom:1px solid var(--line); padding-bottom:2px }
.chart-page .note { color:#888; font-size:.8em; margin:10px 0; font-style:italic }
@media (max-width:640px){
  /* Legacy fixed shrink for the DESKTOP page on a narrow window. It must not
     apply inside .msf-inner: the mobile pages wrap the board in a scaler that
     already sizes it to the device, and two transforms MULTIPLY — 0.602 x 0.72
     drew the board at 43% of natural inside a host sized for 60%, leaving it
     visibly short of the screen edge while every measured number looked right. */
  .chart-page:not(.msf-inner) .msf-board { transform:scale(.72); transform-origin:top left }
  .chart-page .msf-info { width:100% }
}