/* ==========================================================================
   Theme: Chinese almanac / Luopan compass / ink-and-seal aesthetic.
   Grounded in the actual subject matter (Xuan Kong Flying Star practice)
   rather than a generic "spa feng shui" look.

   HARD CONSTRAINT: none of the pixel dimensions below that govern the
   flying-star grid geometry (.yuan-yun-outer cell/outer-cell, .zibai,
   .month-zibai, .ming-xing) have been changed from their previous values.
   Only color, border style, and typography change in this file for those
   selectors - the mountain/facing characters and compass markers sit in
   exactly the same pixel positions as before, corners included.
   ========================================================================== */

:root {
  --paper: #F3ECDC;
  --paper-deep: #EAE0C8;
  --ink: #1C1C1C;
  --seal: #A2231D;
  --gold: #A6791E;
  --indigo: #2B3A55;
}

body {
  font-family: "Noto Serif TC", "PMingLiU", "Microsoft JhengHei", serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><g fill='none' stroke='%232B3A55' stroke-width='2' opacity='0.05'><circle cx='300' cy='300' r='260'/><circle cx='300' cy='300' r='210'/><circle cx='300' cy='300' r='8'/><line x1='510' y1='300' x2='560' y2='300'/><line x1='449' y1='449' x2='484' y2='484'/><line x1='300' y1='510' x2='300' y2='560'/><line x1='151' y1='449' x2='116' y2='484'/><line x1='90' y1='300' x2='40' y2='300'/><line x1='151' y1='151' x2='116' y2='116'/><line x1='300' y1='90' x2='300' y2='40'/><line x1='449' y1='151' x2='484' y2='116'/></g></svg>");
  background-repeat: no-repeat;
  background-position: top center;
  margin: 24px 0;
}

h1 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: 0.05em;
}

/* Outer double-line frame (gold hairline, then ink hairline) around the
   whole page's content table, echoing a scroll or book-page edge - flat
   and rectangular by choice, not rounded, matching the subject. */
table.panel-frame {
  border: 1px solid var(--ink) !important;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--gold);
  background: var(--paper);
}

/* Section header banners (廿四山向..., 年份 紫白飛星, 宅主資料) - a small
   red seal-stamp banner rather than a plain bordered box. */
.category {
  background-color: var(--seal);
  color: var(--paper);
  font-weight: 700;
  text-align: center;
  padding: 4px 0;
  letter-spacing: 0.1em;
}

/* ---- Flying-star grid: geometry unchanged, only palette/type restyled ---- */

table.yuan-yun-outer { border-style: none; border-collapse: collapse; }
table.yuan-yun-outer td.outer-cell { width: 30px; height: 30px; }
table.yuan-yun-outer td.cell { border: 1px solid var(--indigo); width: 90px; height: 90px; }

table.yuan-yun-xing { border-style: none; border-collapse: collapse; }
table.yuan-yun-xing td { text-align: center; padding: 0 10px; font-size: 1.05em; }
/* Mountain-star (first column) in ink, facing-star (second column) in seal
   red - mirrors the two-colour convention used in real published Xuan Kong
   charts to distinguish the two, so this is functional, not decorative. */
table.yuan-yun-xing tr:first-child td:first-child { color: var(--ink); font-weight: 700; }
table.yuan-yun-xing tr:first-child td:nth-child(2) { color: var(--seal); font-weight: 700; }
table.yuan-yun-xing tr:last-child td { color: var(--gold); font-size: 0.85em; }

/* The 山/向 compass markers rendered as small seal-stamp squares. */
.compass-marker {
  display: inline-block;
  width: 20px; height: 20px; line-height: 20px;
  background-color: var(--seal);
  color: var(--paper);
  font-weight: 700;
  text-align: center;
}

table.zibai { border-style: none; border-collapse: collapse; }
table.zibai td { border: 1px solid var(--indigo); width: 40px; height: 40px; text-align: center; color: var(--indigo); }

table.month-zibai { border-style: none; border-collapse: collapse; }
table.month-zibai td { border: 1px solid var(--indigo); width: 25px; height: 25px; text-align: center; font-size: 0.85em; color: var(--indigo); }

table.ming-xing { border-style: none; border-collapse: collapse; }
table.ming-xing td { border: 1px solid var(--indigo); width: 40px; height: 40px; text-align: center; color: var(--indigo); }

.resident-name-cell { text-align: left; font-weight: 700; }

/* ---- Form page ---- */

td.fsHdr1 {
  background-color: var(--seal);
  color: var(--paper);
  font-size: 16pt;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  height: 50px;
  letter-spacing: 0.1em;
}
td.fsDtl0 { background-color: var(--paper); }
td.fsDtl1 { background-color: var(--paper-deep); }
tr.fsDtl0 { background-color: var(--paper); vertical-align: middle; }
tr.fsDtl1 { background-color: var(--paper-deep); vertical-align: middle; }

select, input[type="text"] {
  font-family: inherit;
  border: 1px solid var(--gold);
  background: var(--paper);
  color: var(--ink);
  padding: 2px 4px;
}

input[type="submit"] {
  font-family: inherit;
  font-weight: 700;
  background-color: var(--seal);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 6px 24px;
  letter-spacing: 0.15em;
  cursor: pointer;
}
input[type="submit"]:hover { background-color: var(--indigo); }

a { color: var(--seal); }
a:hover { color: var(--indigo); }

/* ---- Printing: use the page fully, landscape suits the wide 2-column
   chart layout better than portrait, and keep the seal-red/indigo colours
   instead of letting the browser strip them to save ink. ---- */
@media print {
  .no-print { display: none !important; }

  body {
    background-image: none; /* watermark is a screen-only flourish, not worth the ink */
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  table.panel-frame {
    box-shadow: none; /* the box-shadow frame trick doesn't print reliably - use a plain border instead */
    border: 2px solid var(--ink);
  }

  @page {
    size: landscape;
    margin: 1cm;
  }
}