/*
 * The same design as the two apps, in a browser.
 *
 * The palette, the cloud ground and the chart's colour semantics are carried
 * across rather than reinvented: the six relatives, moving, void and clash are
 * categories a reader has to tell apart at a glance, and they should mean the
 * same thing on every screen this product has.
 */

:root {
  color-scheme: light dark;

  --ink: #16242d;
  --dim: #5a6b75;
  --ground: #f7f5f0;
  --surface: #ffffff;
  --rule: #e3dfd5;
  --primary: #12556e;

  /* Chart semantics. Not decoration -- each one is a category. */
  --mark: #1b5fa8;      /* 世 / 应 */
  --moving: #b3261e;    /* 动爻 */
  --warn: #8a5300;      /* 空 / 月破 / 日冲 / 伏神 */
  --option: #4b3fa8;    /* option binding */

  --computed: rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 2px rgba(22, 36, 45, 0.08);
  --radius: 12px;
  --column: 680px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e3d5;
    --dim: #9fb0ba;
    --ground: #0c1820;
    --surface: #16232b;
    --rule: #26343d;
    --primary: #7fc3de;
    --mark: #8ab8f0;
    --moving: #f2857c;
    --warn: #e0a852;
    --option: #a9a0f0;
    --computed: rgba(255, 255, 255, 0.08);
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  color: var(--ink);
  background-color: var(--ground);
  /* The tile is 540x1080 of artwork shown at 270x540 px, the size both apps
     use. One repeat is then wider than a phone, so the clouds read at the
     size they were drawn instead of collapsing into a mesh. */
  background-image: url("../assets/cloud-pattern.png");
  background-size: 270px 540px;
  background-repeat: repeat;
}

/* The artwork is dark ink on transparency. On a dark ground it has to be
   inverted or it disappears, and laid lighter, because a light mark on a dark
   field reads considerably stronger than the reverse. */
@media (prefers-color-scheme: dark) {
  body { background-blend-mode: screen; }
}

main {
  max-width: var(--column);
  margin: 0 auto;
  padding: 16px 16px 64px;
}

header.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--column);
  margin: 0 auto;
  padding: 12px 16px;
}
header.bar h1 { font-size: 1.15rem; margin: 0; flex: 1; }
header.bar button { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 0.9rem; }

/* Renamed from .mark: that collided with .badge.mark, the 世/应 badge, and
   the logo's 84px grid was landing on a badge meant to be a small pill. The
   chart's colour classes mirror the apps' accent names and should keep them,
   so the logo is the one that moves. */
.app-mark {
  width: 84px; height: 84px; margin: 8px auto 6px;
  border-radius: 19px;
  background: var(--primary);
  display: grid; align-content: center; gap: 5px;
  padding: 20px 22px;
}
.app-mark i { display: block; height: 5px; background: #f5efe0; }
.app-mark i.broken {
  background: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}
.app-mark i.broken::before, .app-mark i.broken::after { content: ""; height: 5px; background: #f5efe0; }

.subtitle { text-align: center; color: var(--dim); font-size: 0.85rem; margin: 0 0 20px; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 12px;
}

label.field { display: block; font-size: 0.78rem; color: var(--dim); margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: 8px;
  padding: 8px 0;
  resize: vertical;
}
input:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 4px; }

button.primary {
  width: 100%;
  font: inherit; font-weight: 600;
  color: #fff; background: var(--primary);
  border: 0; border-radius: var(--radius);
  padding: 12px; cursor: pointer;
}
button.primary:disabled { opacity: 0.4; cursor: default; }

.segmented { display: flex; background: var(--surface); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); margin-bottom: 8px; }
.segmented button {
  flex: 1; font: inherit; border: 0; border-radius: 999px;
  padding: 8px; cursor: pointer; color: var(--dim); background: none;
}
.segmented button[aria-selected="true"] { background: #dce8ee; color: #0e3f52; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .segmented button[aria-selected="true"] { background: #1e3d4b; color: #c6e4f0; }
}

.help { font-size: 0.8rem; color: var(--dim); margin: 0 0 12px; }

/* The seam. The one distinction the fact audit, the disclaimer and the whole
   product rest on, so it is a labelled rule and not a hairline. */
.seam {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); margin: 20px 0 8px;
}
.seam::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.chart {
  /* The row grid, in one place. The header reads the same variables, so the
     two cannot drift apart again. */
  --cols: 44px 62px 50px 52px 50px 62px;
  --gap: 8px;
  background: var(--computed);
  border-radius: var(--radius);
  padding: 12px;
  overflow-x: auto;
}
/* The header sits on the same grid as the rows, so each title is over the
   columns it names. It used to be a flex row spread across the whole panel
   while the rows were a fixed-width grid left-aligned inside it: on a wide
   screen the 变卦 title ended up 252px right of the column it labelled, which
   is not a title any more, it is a caption for the empty space beside it.

   Which columns: the six spirits belong to neither hexagram, so 本卦 covers
   its relative and its lines (2-3) and 变卦 covers its lines and relative
   (5-6), with 之 over the badges between them. */
.chart .hexagrams {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap);
  justify-content: center;
  align-items: end;
  margin-bottom: 4px;
}
.chart .hexagrams .name { text-align: center; font-weight: 700; font-size: 0.95rem; }
.chart .hexagrams .name.primary { grid-column: 2 / 4; }
.chart .hexagrams .becomes { grid-column: 4; text-align: center; font-size: 0.72rem; color: var(--dim); }
.chart .hexagrams .name.changed { grid-column: 5 / 7; }
.chart .hexagrams .caption { font-weight: 400; font-size: 0.72rem; color: var(--dim); }
.chart .cast-at { font-size: 0.75rem; color: var(--dim); margin-bottom: 10px; text-align: center; }

.line { display: grid; grid-template-columns: var(--cols); gap: var(--gap); justify-content: center; align-items: center; padding: 3px 0; }

/* The chart is six fixed columns, and at their desktop sizes they need 360px:
   320 of columns plus 40 of gaps. A 375px phone offers 319 inside the page and
   card padding, so every phone narrower than about 430px was scrolling the
   chart sideways to read it -- the panel the whole reading rests on, and the
   one thing a reader looks at first.

   Narrower columns rather than a smaller font: the najia and the six relatives
   are already at 0.7rem, and shrinking them further is how a chart becomes
   something you squint at. 266px of columns plus 30 of gaps fits with room. */
@media (max-width: 430px) {
  .chart { --cols: 34px 54px 40px 44px 40px 54px; --gap: 6px; }
  .yao u { width: 40px; }
  .yao.broken u { width: 16px; }
  .yao { gap: 8px; }
  .spirit { font-size: 0.56rem; }
  .chart { padding: 10px; }
  main { padding-left: 12px; padding-right: 12px; }
}

/* An iPhone SE is 320px, which leaves 276 inside the padding -- still short of
   the 296 above. This is the floor: below these sizes the najia stops being
   readable and hiding a column would be hiding part of the chart. */
@media (max-width: 360px) {
  .chart { --cols: 28px 48px 34px 38px 34px 48px; --gap: 5px; }
  .yao u { width: 34px; }
  .yao.broken u { width: 13px; }
  .yao { gap: 6px; }
  .relative b { font-size: 0.74rem; }
  .relative span { font-size: 0.66rem; }
}
.line.moving { background: color-mix(in srgb, var(--moving) 6%, transparent); }
.spirit { font-size: 0.6rem; color: var(--dim); text-align: right; }
.relative { text-align: right; }
.relative b { display: block; font-size: 0.78rem; }
.relative span { display: block; font-size: 0.7rem; color: var(--dim); }
.relative.changed { text-align: left; }
.still { font-size: 0.7rem; color: var(--dim); }

.yao { display: flex; gap: 10px; justify-content: center; }
.yao u { display: block; width: 50px; height: 7px; border-radius: 4px; background: var(--ink); }
.yao.broken u { width: 20px; }
.yao.moving u { background: var(--moving); }

.badges { display: grid; gap: 2px; justify-items: center; }
.badge { font-size: 0.58rem; font-weight: 700; padding: 2px 4px; border-radius: 3px; }
.badge.mark { color: var(--mark); background: color-mix(in srgb, var(--mark) 15%, transparent); }
.badge.moving { color: var(--moving); background: color-mix(in srgb, var(--moving) 15%, transparent); }
.badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.badge.option { color: var(--option); background: color-mix(in srgb, var(--option) 15%, transparent); }

/* On the grid as well, or a centred chart leaves the hidden line stranded
   against the panel's left edge with nothing above or below it. It starts at
   the six relatives column, where the line it is hidden under sits. */
.hidden-line {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap);
  justify-content: center;
  font-size: 0.7rem;
  color: var(--dim);
}
.hidden-line span { grid-column: 2 / 7; }
.hidden-line b { color: var(--warn); }

.reading h1, .reading h2 { font-size: 1rem; margin: 18px 0 6px; }
.reading p { margin: 0 0 10px; }
.reading li { margin-bottom: 6px; }
.disclaimer { font-size: 0.72rem; color: var(--dim); margin-top: 16px; }

.recent a {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
.recent a:last-child { border-bottom: 0; }
.recent .q { flex: 1; font-size: 0.9rem; }
.recent .meta { font-size: 0.72rem; color: var(--dim); }
.glyph { display: grid; gap: 2px; width: 26px; }
.glyph i { height: 2px; background: var(--primary); }
.glyph i.broken { background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.glyph i.broken::before, .glyph i.broken::after { content: ""; height: 2px; background: var(--primary); }

.notice { font-size: 0.85rem; color: var(--moving); }
.muted { color: var(--dim); font-size: 0.82rem; }
[hidden] { display: none !important; }