/* intuchi.css — mobile-first sheet for daily.html.
 *
 * Modelled on the Intuchi "Wisdom Tools" screens (Desktop/Intuchi Style): a
 * light grey page, white cards, and ONE saturated accent per section — brown for
 * Daily Structures, teal for Destiny, crimson for Forecasting, navy for Feng
 * Shui. This page is the Daily/brown one, so the accent is set once as a custom
 * property and every rule below reads it; retheming to another section means
 * changing --accent alone.
 *
 * Deliberately separate from app.css: that sheet dresses the desktop
 * Metasoft-template board, whose markup is held byte-identical by
 * test/template-fidelity.test.js. Nothing here may leak into it.
 */
:root {
  --accent: #8a5a0a;
  --accent-dark: #6d4708;
  --bg: #f1f1f1;
  --surface: #fff;
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --line: #d8d8d8;
  /* palace bar colours follow the palace ELEMENT, as Intuchi does
     (SE "Xun Wood" green, S "Li Fire" red, SW "Kun Earth" brown) */
  --wood: #17961d; --fire: #c62828; --earth: #8d6e3a; --metal: #8e8e93; --water: #1565c0;
}

* { box-sizing: border-box; }
body.intuchi {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 72px;                      /* clears the fixed tab bar */
}
.wrap { max-width: 560px; margin: 0 auto; padding: 12px 14px 0; }

/* ── header ─────────────────────────────────────────────────────────── */
.ih { display: flex; align-items: baseline; gap: 8px; padding: 6px 0 14px; }
.ih h1 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: .2px; color: var(--accent); text-transform: uppercase; }
.ih .who { font-size: 20px; color: var(--ink); text-transform: none; }

/* ── controls ───────────────────────────────────────────────────────── */
.ctl { display: grid; grid-template-columns: 1fr 84px 84px; gap: 8px; align-items: end; }
.ctl label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.ctl input, .ctl select {
  width: 100%; padding: 11px 10px; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--accent); border-radius: 8px;
}
.ctl .go {
  grid-column: 1 / -1; margin-top: 10px; padding: 12px; width: 100%;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.ctl .go:active { background: var(--accent-dark); }
.stamp { margin: 14px 0 8px; font-size: 16px; color: var(--ink); }
.err { color: #b00020; min-height: 1em; margin: 6px 0; font-size: 14px; }

/* ── section heading ────────────────────────────────────────────────── */
h2.sec {
  margin: 22px 0 10px; font-size: 19px; font-weight: 500; letter-spacing: .3px;
  color: var(--accent); text-transform: uppercase;
}

/* ── four-pillar table ──────────────────────────────────────────────── */
/* table-layout:fixed is what makes every pillar the SAME size. With auto layout
   the browser widens whichever column holds the most content — a pillar with
   three hidden stems came out visibly fatter than one with a single stem, and a
   long ten-god name stretched its column further still. Fixed layout ignores
   content and divides the width evenly, so the four pillars read as a set. */
table.pillars {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  background: var(--surface); border: 1.5px solid var(--accent);
}
table.pillars th {
  background: var(--accent); color: #fff; font-weight: 500; font-size: 16px;
  padding: 9px 4px; border-right: 1px solid rgba(255,255,255,.35);
}
table.pillars th:last-child { border-right: 0; }
/* No width here: under fixed layout, columns without one share the remaining
   space equally, so this stays correct for 4 natal pillars, 10 大運 or 12 流月. */
table.pillars td { border: 1px solid var(--accent); vertical-align: top; padding: 8px 4px; text-align: center; }
.gz { font-size: 27px; line-height: 1.1; }
.sub { font-size: 11px; color: var(--muted); }
.pin { font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.god { font-size: 11px; color: var(--muted); }

/* branch cell: the 十二長生 stage rides a vertical tab down the left edge,
   exactly as Intuchi renders it (Bath / Growth / Youth / Thriving) */
td.branch { position: relative; padding-left: 20px; }
.stage {
  position: absolute; left: 3px; top: 6px; bottom: 6px; width: 15px;
  border: 1px solid var(--accent); border-radius: 3px; color: var(--accent);
  font-size: 9px; letter-spacing: .3px;
  writing-mode: vertical-rl; text-orientation: mixed;
  display: flex; align-items: center; justify-content: center;
}
.hidden-row td { padding: 6px 2px; }
/* Three hidden stems must fit the same column width as one, so the row wraps
   and its cells may shrink instead of forcing the column wider (which is what
   min-width: 34px used to do under auto layout). */
.hid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.hid > div { min-width: 0; flex: 0 1 auto; }
.hid .gz { font-size: 19px; }

/* ── 五行 element ink ────────────────────────────────────────────────────
   The 干支 and the 十神 take their element's colour, as every printed chart
   does. These are a touch darker than the --wood/--fire/... block colours,
   which are tuned for filled bars: an 11px god label in #8e8e93 metal on this
   surface falls under the contrast floor, while the same hue at #6f6f76 clears
   it. Declared after .sub/.pin/.god so they win on source order. */
.e-wood { color: #12771a; }
.e-fire { color: #b0201f; }
.e-earth { color: #7a5c2e; }
.e-metal { color: #6f6f76; }
.e-water { color: #12539e; }

/* ── 9-palace board ─────────────────────────────────────────────────── */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--accent); background: var(--surface); }
.cell { border: .5px solid var(--line); min-height: 118px; display: flex; flex-direction: column; }
.bar { color: #fff; font-size: 10.5px; padding: 3px 5px; display: flex; justify-content: space-between; letter-spacing: .2px; }
.bar b { font-weight: 700; }
.cell .body { flex: 1; padding: 6px 5px; display: flex; flex-direction: column; justify-content: space-between; }
.trio { display: flex; justify-content: space-between; gap: 3px; }
.trio > div { text-align: center; flex: 1; }
.trio .zh { font-size: 16px; line-height: 1.15; }
.trio .en { font-size: 8.5px; color: var(--muted); display: block; }
.hot { color: var(--fire); }
.foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: 9.5px; color: var(--muted); }
.foot .no { font-size: 13px; font-weight: 700; color: var(--accent); }
.cell.centre .body { align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }

/* ── bottom tab bar ─────────────────────────────────────────────────── */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface);
  border-top: 1px solid var(--line); display: flex; z-index: 5;
}
.tabs a {
  flex: 1; text-align: center; padding: 8px 2px 10px; text-decoration: none;
  color: var(--muted); font-size: 10px; letter-spacing: .2px;
}
.tabs a .ic { display: block; font-size: 19px; line-height: 1.25; }
.tabs a.on { color: var(--accent); font-weight: 700; }
.note { color: var(--muted); font-size: 12px; font-style: italic; margin: 8px 0 0; }

@media (max-width: 380px) {
  .gz { font-size: 23px; }
  .trio .zh { font-size: 14px; }
}

/* ── forms (Record) ─────────────────────────────────────────────────── */
.form .row, .form .row2 > div { margin-bottom: 10px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.form input, .form select {
  width: 100%; padding: 11px 10px; font-size: 15px; background: var(--surface);
  border: 1.5px solid var(--accent); border-radius: 8px; color: var(--ink);
}
.btns { display: flex; gap: 8px; margin-top: 4px; }
.btns .go { flex: 1; margin: 0; }
.ghost {
  flex: 0 0 auto; padding: 12px 14px; background: var(--surface); color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;
}

/* ── people list ────────────────────────────────────────────────────── */
ul.people { list-style: none; margin: 0; padding: 0; }
ul.people li {
  display: flex; align-items: center; gap: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; padding: 4px 6px 4px 12px;
}
ul.people li.empty { display: block; color: var(--muted); font-style: italic; padding: 14px 12px; }
.pmain { flex: 1; text-decoration: none; color: var(--ink); padding: 8px 0; min-width: 0; }
.pname { display: block; font-size: 16px; }
.pmeta { display: block; font-size: 12px; color: var(--muted); }
.edit, .del {
  background: none; border: 0; font-size: 17px; padding: 8px 9px; cursor: pointer; color: var(--muted);
}
.del { color: #b00020; }

/* ── person page ────────────────────────────────────────────────────── */
.tabbar { display: flex; gap: 8px; margin: 10px 0 4px; }
.tb {
  flex: 1; padding: 11px; font-size: 15px; cursor: pointer; border-radius: 6px;
  background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent);
}
.tb.on { background: var(--accent); color: #fff; }
table.kv { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
table.kv td { border: 1px solid var(--line); padding: 8px 10px; font-size: 14px; }
table.kv td.k { color: var(--muted); width: 52%; }
table.kv td.v { font-weight: 600; }
.scroll { overflow-x: auto; }
.scroll table.pillars { min-width: 520px; }
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.bar-row .bl { width: 22px; font-size: 17px; }
.bar-row .bt { flex: 1; background: #e3e3e3; border-radius: 3px; height: 14px; overflow: hidden; }
.bar-row .bt i { display: block; height: 100%; }
.bar-row .bv { width: 30px; text-align: right; color: var(--muted); }

/* ── forecast split ─────────────────────────────────────────────────── */
.split { display: grid; gap: 10px; }
table.pillars.mini th { font-size: 13px; padding: 6px 2px; }
table.pillars.mini .gz { font-size: 22px; }
@media (min-width: 520px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

/* 大運 runs wide — scroll it rather than crushing ten columns into 360px */
.scroll table.pillars.run { min-width: 640px; }
.scroll table.pillars.run th { font-size: 13px; }
.scroll table.pillars.run .gz { font-size: 21px; }
.scroll table.pillars.run .hid .gz { font-size: 15px; }
svg.radar { display: block; width: 100%; max-width: 300px; margin: 0 auto 6px; height: auto; }

/* ── layer toggles (神煞 / relations) ────────────────────────────────── */
.chips { display: flex; gap: 8px; margin: 12px 0 2px; flex-wrap: wrap; }
.chip {
  padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 13px;
  background: var(--surface); color: var(--muted); border: 1.5px solid var(--line);
}
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.layer[hidden] { display: none; }

/* relations + shen sha tone colouring */
ul.rel { list-style: none; margin: 0; padding: 0; }
ul.rel li {
  background: var(--surface); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: 14px;
}
ul.rel li.good { border-left-color: var(--wood); }
ul.rel li.bad { border-left-color: var(--fire); }
ul.rel .sub { display: block; }
table.kv td.v.good { color: #14701a; }
table.kv td.v.bad { color: #b00020; }
table.kv td.v.neutral { color: var(--ink); }
table.kv .sub { display: block; font-size: 11px; color: var(--muted); }

/* ── 八宅 ────────────────────────────────────────────────────────────── */
.guacard { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.guanum { font-size: 34px; font-weight: 700; color: var(--accent); line-height: 1; }
.dirgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dcell {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 4px; text-align: center; min-height: 66px;
}
.dcell b { display: block; font-size: 12px; color: var(--muted); }
.dcell .zh { display: block; font-size: 15px; }
.dcell .en { display: block; font-size: 9.5px; color: var(--muted); }
.dcell.good { border-color: #b7ddb9; background: #f2fbf2; }
.dcell.bad { border-color: #f0c6c6; background: #fdf4f4; }
.dcell.mid { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }


.godname { font-size: 9px; color: var(--muted); line-height: 1.15; margin-top: 1px; }
table.pillars th .yrs { display: block; font-size: 9.5px; font-weight: 400; opacity: .85; }

/* 天 / 地 / 人 gutter on the natal table */
table.pillars th.rowlab {
  background: var(--accent); color: #fff; width: 28px; padding: 4px 2px; font-weight: 500;
}
table.pillars th.rowlab span { display: block; font-size: 14px; }
table.pillars th.rowlab small { display: block; font-size: 7.5px; opacity: .85; letter-spacing: .2px; }

.ctl2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ctl2 label { font-size: 13px; color: var(--muted); }
.ctl2 input {
  width: 100px; padding: 8px 10px; font-size: 15px; background: var(--surface);
  border: 1.5px solid var(--accent); border-radius: 8px; color: var(--ink);
}

/* Focus mode — 干支 only, secondary captions hidden */
body.focus .sub, body.focus .pin, body.focus .godname, body.focus .trio .en { display: none; }
body.focus .gz { font-size: 30px; }
body.focus .hid .gz { font-size: 20px; }

/* ── Metasoft board host ────────────────────────────────────────────────
 * The board keeps Metasoft's fixed pixel geometry (those widths ARE the
 * fidelity), so it is rendered at natural size and scaled to fit. overflow
 * hidden clips the pre-scale box during the first paint. */
.msf-host { overflow: hidden; width: 100%; position: relative; }
.msf-host .msf-scale { width: max-content; }
.msf-host::after {
  content: "mintfully"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
  font-size: 38px; letter-spacing: 4px; color: var(--accent); opacity: .06;
  text-transform: uppercase; font-weight: 700;
}

/* ── Feng Shui grid ─────────────────────────────────────────────────── */
.legend { display: flex; gap: 14px; margin: 4px 0 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend i.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.legend i.mtn { background: #1565c0; } .legend i.wtr { background: #c62828; } .legend i.yun { background: var(--accent); }

.fsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--accent); background: var(--surface); }
.fscell { border: .5px solid var(--line); min-height: 104px; display: flex; flex-direction: column; }
.fsbar { color: #fff; font-size: 10.5px; padding: 3px 5px; display: flex; justify-content: space-between; }
.fsbar b { font-weight: 700; }
.fsbody { flex: 1; padding: 6px 5px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.fstop { display: flex; gap: 14px; font-size: 14px; font-weight: 700; }
.fscell .mtn { color: #1565c0; } .fscell .wtr { color: #c62828; }
.fscell .yun.big { font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1; }
.fsfoot { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 10px; color: var(--muted); }
.fsfoot .role { color: var(--accent); font-weight: 700; font-size: 12px; }
.fscell.mid { display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted); font-size: 12px; gap: 6px; padding: 8px; }
.fscell.mid .yun.big { font-size: 24px; }
.qline { font-size: 15px; line-height: 1.2; }
.qline.hot { color: var(--fire); font-weight: 700; }

/* `hidden` must beat any display we set. .row2/.layer declare display:grid or
   block, and a bare [hidden] attribute loses to them — which showed the Qimen-
   only fields on the Xuan Kong tab. */
[hidden] { display: none !important; }

/* Primary button, outside .ctl too (the Feng Shui form is a .form, not a .ctl) */
.go {
  padding: 12px 16px; background: var(--accent); color: #fff; border: 0;
  border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.go:active { background: var(--accent-dark); }
.form .go { width: 100%; margin-top: 4px; }
.qsub { font-size: 9.5px; color: var(--muted); line-height: 1.25; }
.legend i.ann { background: #6a1b9a; }
.legend .yrpick { color: var(--muted); }
.legend .yrpick input { width: 74px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.fscell .ann { color: #6a1b9a; font-weight: 700; font-size: 12px; }
.struct { margin: 6px 0 10px; font-size: 13px; color: var(--accent); font-weight: 600; }
.legend i.mon { background: #8e8e93; }
.fscell .mon { color: #5c5c62; font-weight: 700; font-size: 12px; }

/* ── Account tab ────────────────────────────────────────────────────────── */
/* Five tabs across a 360px phone leaves ~72px each; "Forecasting" must not
   wrap to two lines and shove the bar taller than the others. */
.tabs a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .tabs a { font-size: 9px; } }

.acard {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 12px 13px; margin: 10px 0;
}
.acard h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
.acard .who { font-size: 19px; margin: 0 0 2px; }
.acard .sub { color: var(--muted); font-size: 12.5px; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: #fff; letter-spacing: .3px; white-space: nowrap;
}
.badge.off { background: var(--muted); }
.ghost2 {
  padding: 9px 14px; background: transparent; color: var(--accent); cursor: pointer;
  border: 1px solid var(--accent); border-radius: 8px; font-size: 14px; font-weight: 600;
}
.mypil { display: flex; gap: 6px; margin-top: 10px; }
.mypil div { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 2px; }
.mypil b { display: block; font-size: 19px; font-weight: 500; line-height: 1.15; }
.mypil span { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }

/* the plan chooser — a native <dialog> so Esc and the backdrop behave */
dialog.plans {
  border: 0; border-radius: 14px; padding: 0; width: min(94vw, 460px);
  background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.32);
}
dialog.plans::backdrop { background: rgba(20,16,12,.55); }
dialog.plans .dhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
dialog.plans .dhead h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--accent); }
dialog.plans .x { background: none; border: 0; font-size: 25px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
dialog.plans .body { padding: 4px 16px 16px; max-height: 74vh; overflow-y: auto; }
.plan { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; }
.plan.on { border-color: var(--accent); border-width: 2px; padding: 10px 11px; }
.plan .pt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plan .pn { font-size: 16px; font-weight: 700; }
.plan .pz { font-size: 15px; color: var(--muted); }
.plan .pp { font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.plan .pb { font-size: 12.5px; color: var(--muted); margin: 5px 0 9px; line-height: 1.45; }
.plan .go, .plan .ghost2 { width: 100%; }
.acard .acta { margin: 11px 0 0; }
/* the account card tints its 干支 with the same element ink as the chart */
.mypil b.e-wood, .mypil b.e-fire, .mypil b.e-earth, .mypil b.e-metal, .mypil b.e-water { font-weight: 500; }

/* ── Feng Shui: 八宅 grid, combinations ──────────────────────────────────── */
.fscell.good { box-shadow: inset 0 0 0 2px #17961d55; }
.fscell.bad  { box-shadow: inset 0 0 0 2px #c6282855; }
.mstar { font-size: 21px; line-height: 1.15; margin-top: 2px; }
.fscell.good .mstar { color: #12771a; }
.fscell.bad .mstar { color: #b0201f; }
.men { font-size: 10px; color: var(--muted); letter-spacing: .2px; }
.fscell .gua { font-size: 26px; display: block; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin: 2px 0 10px; }
.chk input { width: 17px; height: 17px; }

.pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill.good { background: #17961d1a; color: #12771a; }
.pill.bad { background: #c628281a; color: #b0201f; }

table.mtab { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
table.mtab th {
  background: var(--accent); color: #fff; font-weight: 500; font-size: 11.5px;
  padding: 7px 6px; text-align: left; letter-spacing: .3px;
}
table.mtab td { border-top: 1px solid var(--line); padding: 7px 6px; font-size: 13px; vertical-align: top; }
table.mtab td.pal { font-weight: 700; white-space: nowrap; }
table.mtab td.desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
table.mtab tr.good td.pal { color: #12771a; }
table.mtab tr.bad td.pal { color: #b0201f; }

.cmb { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px;
  background: var(--surface); padding: 9px 11px; margin-bottom: 8px; }
.cmb.good { border-left-color: var(--wood); }
.cmb.bad { border-left-color: var(--fire); }
.cmbh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cmbh .pair { font-size: 12px; font-weight: 700; color: var(--accent); }
.cmb p { margin: 3px 0; font-size: 13px; line-height: 1.45; }
.cmb p.rem { color: var(--muted); font-size: 12.5px; }
.struct { font-size: 14px; font-weight: 600; color: var(--accent); margin: 10px 0 6px; }

/* A second, tighter tab row for granularity pickers (年/月/日/時) — four of
   them must fit under the date controls without wrapping. */
.tabbar-sm { gap: 5px; margin: 8px 0 2px; }
.tabbar-sm .tb { padding: 7px 4px; font-size: 12.5px; }

/* Ze Ri results */
ul.zlist { list-style: none; margin: 6px 0 0; padding: 0; }
ul.zlist li { border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 8px; background: var(--surface); padding: 8px 11px; margin-bottom: 7px; }
ul.zlist li.sub { border-left-color: var(--line); color: var(--muted); font-size: 12.5px; }
.zwhen { font-size: 15.5px; font-weight: 600; }
.zmeta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── collapsible sections ────────────────────────────────────────────────── */
h2.sec.fold { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
h2.sec.fold .caret { font-size: 14px; transition: transform .15s; }
h2.sec.fold.closed .caret { transform: rotate(-90deg); }
h2.sec.fold.closed { opacity: .75; }

/* relation arcs sit directly under the 人 row, as the reference sheets draw them */
.relarcs { margin-top: -1px; }
.relarcs svg.arcs { display: block; width: 100%; overflow: visible; }

/* The 人 row must fit each pillar's hidden stems on ONE line: a 地支 can hide
   three stems and the column width is fixed, so the whole cell steps down a
   size rather than wrapping into a second row. */
.hidden-row .hid { gap: 0 3px; flex-wrap: nowrap; }
.hidden-row .hid > div { flex: 1 1 0; min-width: 0; }
.hidden-row .hid .gz { font-size: 15px; }
.hidden-row .hid .sub, .hidden-row .hid .pin, .hidden-row .hid .god { font-size: 8.5px; letter-spacing: 0; }
.hidden-row .hid .godname { display: none; }      /* the long name never fits three-up */
@media (max-width: 380px) { .hidden-row .hid .gz { font-size: 13.5px; } }

/* ── personal calendar ───────────────────────────────────────────────────── */
.calnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.calnav #calmonth { font-size: 15px; font-weight: 600; min-width: 84px; text-align: center; }
.calnav .ghost { padding: 4px 12px; font-size: 17px; line-height: 1; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cdh { text-align: center; font-size: 10px; color: var(--muted); padding-bottom: 2px; letter-spacing: .5px; }
.cd {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 48px; padding: 3px 1px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); font: inherit; cursor: pointer; overflow: hidden;
}
.cd.pad { border: 0; background: none; min-height: 0; }
.cdn { font-size: 12px; font-weight: 700; line-height: 1.1; }
.cdp { font-size: 11px; line-height: 1.15; }
.cdg { font-size: 8px; color: var(--muted); letter-spacing: .2px; }
/* the lean, not a verdict — a tint only, so the day pillar stays readable */
.cd.up { background: #17961d12; border-color: #17961d55; }
.cd.down { background: #c6282810; border-color: #c6282855; }
.cd.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 380px) { .cd { min-height: 44px; } .cdp { font-size: 10px; } .cdg { display: none; } }

/* Three Victories table: the .sub caption sits on the accent header, where the
   muted grey would fall below contrast — use a translucent white instead. */
table.mtab th .sub { color: rgba(255,255,255,.82); font-size: 9.5px; font-weight: 400; }
table.mtab td b { font-size: 15px; }
table.mtab tr.good td { background: #17961d10; }
table.mtab tr.good td.pal { font-weight: 700; }

/* Ze Ri almanac results */
ul.zlist .zmeta.bad { color: #b0201f; }
ul.zlist .zmeta.sub { font-style: italic; }
ul.zlist .zmeta.good { color: #12771a; font-weight: 600; }

/* ── Ze Ri results, laid out as Metasoft's own 擇日 result table ─────────── */
.ztab { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); font-size: 11px; table-layout: fixed; }
.ztab th { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  padding: 5px 4px; text-align: left; letter-spacing: .2px; }
.ztab td { border-top: 1px solid var(--line); padding: 5px 4px; vertical-align: top; line-height: 1.35; }
.ztab td.zdate { width: 21%; }
.ztab td.zinfo { width: 30%; }
.ztab td.zgood, .ztab td.zbad { width: 18%; }
.ztab td.zper { width: 15%; }
.ztab .zgz { font-size: 15px; }
.ztab td.zinfo span { display: block; }
.ztab td.zgood { color: #12771a; }
.ztab td.zbad { color: #b0201f; }
.ztab .up { color: #12771a; font-weight: 700; }
.ztab .down { color: #b0201f; font-weight: 700; }
/* the table is wide by nature — let it scroll rather than crushing the page */
#tout { overflow-x: auto; }
@media (max-width: 520px) { .ztab { min-width: 560px; } }
.warn { color: #b0201f; font-weight: 700; }

/* ── "coming up" strip: horizontally scrolling formation cards ───────────── */
.strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.strip::-webkit-scrollbar { height: 4px; }
.strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.scard {
  flex: 0 0 auto; width: 168px; scroll-snap-align: start;
  border: 1px solid var(--line); border-left: 4px solid var(--wood); border-radius: 9px;
  background: var(--surface); padding: 9px 10px;
}
.scard .szh { font-size: 17px; font-weight: 600; line-height: 1.2; }
/* The strip cards colour themselves from the served tone, not from the name.
   The three defaults are all auspicious, but any of the 134 格局 can be asked
   for, and a card that is always green would misread an inauspicious one. */
.scard.t-auspicious { border-left-color: #12771a; }
.scard.t-auspicious .szh { color: #12771a; }
.scard.t-inauspicious { border-left-color: #b0201f; }
.scard.t-inauspicious .szh { color: #b0201f; }
.scard.t-moderate, .scard.t-unknown { border-left-color: var(--line); }
.scard.t-moderate .szh, .scard.t-unknown .szh { color: var(--ink); }
.scard .sen { font-size: 10px; color: var(--muted); margin-bottom: 6px; line-height: 1.25; }
.snext {
  display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; padding: 4px 0 3px; cursor: pointer; color: var(--ink);
}
.snext b { display: block; font-size: 12.5px; }
.snext span { font-size: 10px; color: var(--muted); }
.snext:active { background: #17961d12; }

/* ── the day as an almanac page: 吉 / 凶 / activities ────────────────────── */
.yiji { display: grid; gap: 8px; margin-top: 10px; }
@media (min-width: 480px) { .yiji { grid-template-columns: 1fr 1fr; } .yiji .acts { grid-column: 1 / -1; } }
.yj { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 9px 11px; }
.yj h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.yj span { display: inline-block; font-size: 12px; line-height: 1.5; margin-right: 8px; }
.yj.good { border-left: 4px solid var(--wood); } .yj.good h4 { color: #12771a; }
.yj.bad { border-left: 4px solid var(--fire); } .yj.bad h4 { color: #b0201f; }
.yj.acts { border-left: 4px solid var(--accent); } .yj.acts h4 { color: var(--accent); }
.warn2 { margin: 7px 0 0; font-size: 11px; font-style: italic; color: #b0201f; line-height: 1.45; }
h3.sub3 { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; }

/* 格局 tone. AUSPICIOUS IS GREEN — the Green Dragon's own colour — and
   inauspicious is red. This is deliberately NOT Metasoft's mapping: their page
   prints auspicious in red, which reads as danger here. The class name carries
   the word so the meaning never lives in the colour alone. */
.t-auspicious { color: #12771a; font-weight: 600; }
.t-inauspicious { color: #b0201f; font-weight: 600; }
.t-moderate { color: var(--earth); font-weight: 600; }
.t-unknown { color: var(--muted); }

/* 擇日 Day Special Info column — the 21 fitted day-conditions. */
.ztab td.zspec { font-size: 11px; line-height: 1.45; color: var(--ink); vertical-align: top; }
.ztab td.zxk { font-size: 11px; line-height: 1.45; vertical-align: top; white-space: nowrap; }

/* ══ facing-up luopan grid ══════════════════════════════════════════════════
   The flying-star chart as fengshui.mintfully.id draws it: an indigo frame
   carrying the direction labels, a 3×3 of cells, and the HOUSE FACING at the
   top rather than North. The rotation is the server's (engine/mountains24.js),
   verified against 144 reference charts — this sheet only styles it. */
:root {
  --fs-indigo: #38557e;
  --fs-cinnabar: #c2362b;
  --fs-cell: #f4f3ef;
  /* the nine flying-star colours 九星, legible on a light cell */
  --s1: #2c6fb0; --s2: #5e5648; --s3: #1f7a5a; --s4: #3e8e3f; --s5: #b8902a;
  --s6: #6c7480; --s7: #c0392b; --s8: #a9772a; --s9: #6e3fa0;
}
.s1 { color: var(--s1); } .s2 { color: var(--s2); } .s3 { color: var(--s3); }
.s4 { color: var(--s4); } .s5 { color: var(--s5); } .s6 { color: var(--s6); }
.s7 { color: var(--s7); } .s8 { color: var(--s8); } .s9 { color: var(--s9); }

.topbar { display: grid; grid-template-columns: 0.8fr 1.25fr 1.25fr; gap: 6px; margin-bottom: 4px; }
.topbox { border: 1px solid var(--fs-indigo); border-radius: 3px; overflow: hidden; }
.topbox .th { background: var(--fs-indigo); color: #fff; text-align: center; font-size: 10.5px;
  letter-spacing: .06em; padding: 6px 3px; font-weight: 700; }
.topbox .tb { background: var(--surface); min-height: 76px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; padding: 7px 5px; text-align: center; }
.topbox .tb-period { background: var(--fs-indigo); }
.topbox .big-num { font-size: 36px; font-weight: 700; color: #fff; line-height: 1; }
.topbox .mtn { font-size: 30px; font-weight: 600; line-height: 1.05; }
.topbox .py { font-size: 11.5px; color: var(--muted); }
.topbox .code { font-size: 10px; color: var(--muted); letter-spacing: .04em; }

.arrow { text-align: center; font-size: 22px; color: var(--fs-cinnabar); margin: 7px 0 8px; line-height: 1; }

.lo { position: relative; background: var(--fs-indigo); padding: 28px; border-radius: 3px;
  box-shadow: 0 6px 22px rgba(40, 60, 95, .16); }
.lo .dl { position: absolute; color: #fff; font-weight: 700; font-size: 12.5px;
  letter-spacing: .05em; opacity: .92; }
.lo .dl-nw { top: 8px; left: 11px; } .lo .dl-ne { top: 8px; right: 11px; }
.lo .dl-sw { bottom: 8px; left: 11px; } .lo .dl-se { bottom: 8px; right: 11px; }
.lo .dl-n { top: 8px; left: 50%; transform: translateX(-50%); }
.lo .dl-s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.lo .dl-w { left: 8px; top: 50%; transform: translateY(-50%); }
.lo .dl-e { right: 8px; top: 50%; transform: translateY(-50%); }

.lo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: #cfd2d8; border: 1px solid #cfd2d8; }
.lo-cell { position: relative; background: var(--fs-cell); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center; }
/* 向 and 坐 are marked by a bar on the cell edge, so the two are distinguishable
   at a glance without reading the frame labels */
.lo-cell.facing::before, .lo-cell.sitting::before { content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px; }
.lo-cell.facing::before { background: var(--fs-cinnabar); }
.lo-cell.sitting::before { background: var(--fs-indigo); }
.lo-cell .tl { position: absolute; top: 8px; left: 10px; font-size: 17px; font-weight: 600; }
.lo-cell .tr { position: absolute; top: 8px; right: 10px; font-size: 17px; font-weight: 600; }
.lo-cell .ctr { font-size: 40px; font-weight: 700; line-height: 1; }
.lo-cell .am { position: absolute; bottom: 6px; left: 0; right: 0; display: flex;
  justify-content: center; gap: 9px; font-size: 12px; font-weight: 600; font-style: normal; }
.lo-cell .am i { font-style: normal; }

@media (max-width: 380px) {
  .lo { padding: 24px; }
  .lo-cell .ctr { font-size: 33px; }
  .lo-cell .tl, .lo-cell .tr { font-size: 15px; }
  .topbox .mtn { font-size: 25px; }
}

/* ── 羅盤 luopan compass ─────────────────────────────────────────────────── */
.lp { display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 22px 14px; border-radius: 10px; user-select: none;
  background: radial-gradient(circle at 50% 34%, #f2ebda 0%, #d3c6aa 100%); }
.lp-disc-wrap { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; }
.lp-disc { position: absolute; inset: 0; transition: transform .12s linear; will-change: transform; }
.lp-overlay { position: absolute; inset: 0; pointer-events: none; }
.lp-foot { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.lp-btn, .lp-apply { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #f4ead0; background: #2b2520; border: 0; padding: 10px 20px; border-radius: 30px;
  cursor: pointer; box-shadow: 0 3px 10px rgba(58, 42, 20, .25); }
.lp-apply { background: #b22f28; }
.lp-status { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: #6f6557;
  text-align: center; }

/* The 奇門風水 board is now the REAL Metasoft board (see js/qm-fs-board.js),
   so it is styled by board.css and needs nothing here. The bespoke .qfs-*
   card grid that used to live at this spot is gone with it. */


/* ── 八宅 cells on the shared luopan frame ───────────────────────────────── */
.lo-cell.m-cell { flex-direction: column; gap: 3px; }
.lo-cell.m-good { background: #eef7f0; }
.lo-cell.m-bad { background: #fbeeed; }
.m-star { font-size: 28px; font-weight: 700; line-height: 1; }
.m-name { font-size: 10.5px; text-align: center; line-height: 1.25; padding: 0 3px; }
.lo-cell.m-good .m-star, .lo-cell.m-good .m-name { color: #1c6b3b; }
.lo-cell.m-bad .m-star, .lo-cell.m-bad .m-name { color: var(--fs-cinnabar); }
.m-roles { font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: 1px; }
.lo-cell.m-centre { flex-direction: column; gap: 3px; background: #fbfbfc; }
.m-gua { font-size: 32px; font-weight: 700; line-height: 1; }
.m-guan { font-size: 10px; color: var(--muted); letter-spacing: .05em; }
@media (max-width: 380px) { .m-star { font-size: 23px; } .m-gua { font-size: 26px; } }