/* The I Ching table. Loads after /styles.css and /assets/sitenav.css and only
   adds the casting table on top of the site's header/footer/tokens. The
   shared table pieces (question box, actions, reading bubble) mirror
   /tarot/tarot.css so the two back rooms feel like one room.
   Mobile first: the hexagram and the coins stack on a phone; wider screens
   put the figures beside the coins. The masthead pieces (.section-mast,
   .section-blurb, .section-lead) come from /styles.css. */

.iching-main {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: clamp(22px, 3.4vw, 40px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
}

/* --- the table ----------------------------------------------------------- */

.table {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: clamp(16px, 3vw, 28px);
  border: var(--border);
  background: var(--paper-light);
  box-shadow: var(--shadow);
  scroll-margin-top: 16px;
}

.control-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.control-label .optional {
  color: #73675b;
}

.question-row {
  display: grid;
  gap: 8px;
}

.question-row textarea {
  min-height: 52px;
  max-height: 120px;
  padding-right: 76px;
}

/* --- the cast: figures and coins ----------------------------------------- */

.cast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 28px);
  align-items: start;
}

.figure {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.figure[hidden] {
  display: none;
}

.figure-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.18em;
}

/* Six bars, line 6 on top. A yang line is one solid bar, a yin line is the
   same bar with the middle missing. A moving line wears the old mark at its
   side: a circle for old yang (9), a cross for old yin (6). */
.hexagram {
  --hex-w: clamp(110px, 32vw, 170px);
  --hex-bar: clamp(10px, 2.8vw, 14px);
  display: grid;
  gap: calc(var(--hex-bar) * 0.75);
  width: var(--hex-w);
  padding: 14px calc(var(--hex-bar) * 1.6) 14px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
}

.hex-line {
  position: relative;
  height: var(--hex-bar);
  border: 2px dashed #b9ad9c;
  background: transparent;
}

.hex-line.is-yang,
.hex-line.is-yin {
  border: 0;
}

.hex-line.is-yang {
  background: var(--ink);
}

.hex-line.is-yin {
  background: linear-gradient(
    to right,
    var(--ink) 0 41%,
    transparent 41% 59%,
    var(--ink) 59% 100%
  );
}

.hex-line.is-moving {
  background-color: var(--pink);
}

.hex-line.is-moving.is-yang {
  background: var(--pink);
  outline: 2px solid var(--ink);
}

.hex-line.is-moving.is-yin {
  background: linear-gradient(
    to right,
    var(--pink) 0 41%,
    transparent 41% 59%,
    var(--pink) 59% 100%
  );
}

.hex-line.is-moving::after {
  content: "○";
  position: absolute;
  top: 50%;
  right: calc(var(--hex-bar) * -1.35);
  font-size: calc(var(--hex-bar) * 1.05);
  font-weight: 950;
  line-height: 1;
  transform: translateY(-52%);
}

.hex-line.is-moving.is-yin::after {
  content: "×";
}

.hex-line.is-new {
  animation: hex-land 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes hex-land {
  from {
    transform: scaleX(0.2);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.figure--heading .hexagram {
  background: var(--paper-light);
}

.figure-caption {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 2.4em;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.8rem, 2.4vw, 0.95rem);
  line-height: 1.2;
}

.figure-name:empty {
  display: none;
}

.figure:not(.is-cast) .figure-name {
  color: #776b5e;
  font-style: italic;
}

/* the hexagram's keywords, so a stranger knows what it means before Roastie
   tells them what it means about them */
.figure-keys {
  max-width: 100%;
  color: #5e5247;
  font-size: clamp(0.66rem, 2vw, 0.8rem);
  font-style: italic;
  line-height: 1.25;
}

.figure-keys:empty {
  display: none;
}

/* --- the coins ----------------------------------------------------------- */

.coins-row {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.coins-row[hidden] {
  display: none;
}

.coins {
  display: flex;
  gap: 12px;
}

.coin {
  --coin: clamp(44px, 12vw, 64px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--coin);
  height: var(--coin);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: calc(var(--coin) * 0.42);
  font-weight: 950;
  color: var(--ink);
}

/* the square hole of a cash coin, until a throw puts a face on it */
.coin:empty::before {
  content: "";
  width: 28%;
  height: 28%;
  border: 2px solid var(--ink);
  background: var(--paper-light);
}

.coin.is-tails {
  background: var(--paper-light);
}

.coin.is-spinning {
  animation: coin-spin 0.5s ease-out;
}

@keyframes coin-spin {
  0% {
    transform: translateY(0) rotateY(0deg);
  }
  50% {
    transform: translateY(-18px) rotateY(540deg);
  }
  100% {
    transform: translateY(0) rotateY(1080deg);
  }
}

.throw-button {
  min-height: 56px;
  padding: 0 22px;
  border: var(--border);
  background: var(--pink);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.throw-button:hover:not(:disabled),
.throw-button:focus-visible {
  background: var(--orange);
}

.throw-button:disabled {
  cursor: default;
  opacity: 0.55;
}

/* what the last throw came to, so the stranger can follow the arithmetic */
.throw-log {
  min-height: 1.3em;
  margin: 0;
  color: #5e5247;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-style: italic;
}

/* --- actions and the reading --------------------------------------------- */

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.table-actions .send-button {
  flex: 1 1 220px;
}

.table-actions .new-chat-button {
  min-height: 56px;
  padding: 0 16px;
}

.table-actions .new-chat-button[hidden] {
  display: none;
}

.table .chat-status {
  padding: 0;
  background: transparent;
}

.table .typing-row {
  padding: 0;
}

.reading[hidden] {
  display: none;
}

/* the reading comes up where the cast was, in the same breath the cast leaves */
.reading:not([hidden]) {
  animation: reading-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes reading-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reading .message-row {
  margin: 0;
}

.reading .message-bubble {
  max-width: 100%;
}

.reading-text p {
  margin: 0 0 0.9em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.reading-text p:last-child {
  margin-bottom: 0;
}

/* the brief Roastie got: the reading is the show, this is the receipt */
.brief {
  margin: 14px 0 0 0;
  border: 2px dashed #b9ad9c;
  padding: 0 14px;
}

.brief summary {
  padding: 10px 0;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  color: #5e5247;
  cursor: pointer;
}

.brief[open] summary {
  border-bottom: 1px dashed #b9ad9c;
}

.brief-text {
  margin: 0;
  padding: 12px 0 14px;
  color: #3f362e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.table-fine-print {
  margin: 18px 0 0;
  color: #73675b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* --- after the reading: the cast steps aside ------------------------------ */
/* Once Roastie has read the cast, the reading is the show. iching.js moves
   the question, the figures, the moving lines and the buttons out of the
   table into this card and animates the trip. The card sits under the title
   on a laptop and under the reading on a phone. */

.cast-aside {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 16px clamp(14px, 2.5vw, 20px) 18px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 4px 4px 0 var(--ink);
}

.cast-aside[hidden] {
  display: none;
}

.cast-aside .cast {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  justify-content: start;
  padding: 0;
}

.cast-aside .hexagram {
  --hex-w: 118px;
  --hex-bar: 9px;
}

.cast-aside .figure-caption {
  font-size: 0.82rem;
}

.cast-aside .figure-keys {
  font-size: 0.7rem;
}

.cast-aside .question-row textarea {
  min-height: 44px;
  font-size: 0.92rem;
}

/* the cast has been read; only "throw again" is left to do */
.cast-aside .send-button {
  display: none;
}

.cast-aside .table-actions .new-chat-button {
  flex: 1 1 auto;
  width: 100%;
}

/* --- how the coins work ---------------------------------------------------- */

.method-panel {
  margin-top: 16px;
}

.method-body {
  padding: 2px 0 16px;
}

.method-body p {
  margin: 12px 0 0;
  color: #3f362e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1.55;
}

.method-body strong {
  display: block;
  margin-bottom: 3px;
  color: var(--pink-dark);
  font-family: "Arial Narrow", "Franklin Gothic Medium", Arial, sans-serif;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.14em;
}

/* --- wider screens --------------------------------------------------------- */

@media (min-width: 720px) {
  .cast {
    grid-template-columns: auto auto 1fr;
    justify-content: start;
    column-gap: clamp(28px, 5vw, 56px);
    padding: 6px clamp(0px, 4vw, 40px) 0;
  }

  .coins-row {
    grid-column: auto;
    align-self: center;
    justify-items: start;
    text-align: left;
  }

  .table-actions .send-button {
    flex: 0 1 280px;
  }
}

/* Laptop: the table sits beside the title, as the chat card does on the
   front page. The title column holds the mast, the blurb and the credits;
   the table takes the rest and grows down as the reading comes in. */
@media (min-width: 1001px) {
  .iching-main {
    display: grid;
    grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr);
    grid-template-rows: repeat(5, auto) 1fr;
    width: 100%;
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
    padding-inline: clamp(20px, 4vw, 58px);
  }

  .iching-main > .section-mast {
    grid-column: 1;
    grid-row: 1;
  }

  .iching-main > .cast-aside {
    grid-column: 1;
    grid-row: 2;
  }

  .iching-main > .section-blurb {
    grid-column: 1;
    grid-row: 3;
    margin-top: 22px;
  }

  .iching-main > .table {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
  }

  .iching-main > .table-fine-print {
    grid-column: 1;
    grid-row: 4;
    margin-top: 26px;
  }

  .iching-main > .method-panel {
    grid-column: 1;
    grid-row: 5;
  }

  .iching-main .section-mast h1 {
    font-size: clamp(2.6rem, 3.8vw, 4rem);
  }

  /* a narrower table than before: both figures and the coins still share
     a row, with a little less air between them */
  .cast {
    column-gap: clamp(20px, 2.5vw, 48px);
  }
}

/* on a phone the cast card follows the reading, ahead of the blurb */
@media (max-width: 759px) {
  .iching-main > .cast-aside {
    order: 1;
  }
}

@media (max-width: 480px) {
  .hexagram {
    box-shadow: 3px 3px 0 var(--ink);
  }

  .table-actions .send-button,
  .table-actions .new-chat-button,
  .throw-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hex-line.is-new,
  .coin.is-spinning,
  .reading:not([hidden]) {
    animation: none;
  }
}

/* --- questions to steal ---------------------------------------------------- */

.chips-hint {
  margin: 6px 0 0;
  color: #73675b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.iching-chips {
  justify-content: flex-start;
}

.iching-chips button {
  text-align: left;
}

/* once the cast has stepped aside the question is settled; the chips go */
.cast-aside .chips-hint,
.cast-aside .iching-chips {
  display: none;
}

/* --- throw the rest --------------------------------------------------------- */

.throw-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.throw-rest {
  min-height: 44px;
}

.throw-rest[hidden] {
  display: none;
}

/* the hexagram's name links to its page in the book */
.figure-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--pink);
}

.figure-name a:hover,
.figure-name a:focus-visible {
  background: var(--pink);
}

/* --- share the reading ------------------------------------------------------ */

.reading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.share-note {
  color: #73675b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.share-note:empty {
  display: none;
}

.table-fine-print a {
  color: inherit;
}

/* --- the book: /iching/<n>/ and /iching/book/ ------------------------------- */
/* Static pages rendered by iching/build-book.js. They borrow the table, the
   figure and the reading bubble from above and stack in one column at every
   width; the laptop two-column grid is for the casting table only. */

.book-main {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: clamp(22px, 3.4vw, 40px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
}

.book-pinyin {
  margin: 8px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #5e5247;
}

.book-pinyin [lang="zh"] {
  margin-right: 6px;
  font-size: 1.5rem;
  font-style: normal;
  color: var(--ink);
}

.book-top {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  justify-items: center;
}

.hexagram--book {
  --hex-w: clamp(120px, 34vw, 160px);
  --hex-bar: clamp(10px, 2.8vw, 13px);
  padding-right: 14px;
}

.book-reading {
  width: 100%;
}

.book-reading .message-bubble {
  max-width: 100%;
}

/* static page: nothing arrives, nothing animates in */
.book-reading:not([hidden]) {
  animation: none;
}

.book-text {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 2px dashed #b9ad9c;
}

.book-text .control-label {
  margin-top: 12px;
  color: var(--pink-dark);
}

.book-judgment,
.book-lines {
  margin: 0;
  color: #3f362e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  line-height: 1.55;
}

.book-lines {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.book-line-number {
  margin-right: 6px;
  font-family: "Arial Narrow", "Franklin Gothic Medium", Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  color: #73675b;
}

.book-actions .send-button {
  text-decoration: none;
}

.book-actions .new-chat-button {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 16px;
  color: var(--ink);
  text-decoration: none;
}

.book-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.book-nav a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--pink);
}

.book-nav a:hover,
.book-nav a:focus-visible {
  background: var(--pink);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.book-card {
  display: grid;
  gap: 4px;
  justify-items: center;
  height: 100%;
  padding: 14px 10px 12px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}

.book-card:hover,
.book-card:focus-visible {
  background: var(--pink);
}

.hexagram--mini {
  --hex-w: 64px;
  --hex-bar: 6px;
  padding: 8px;
  box-shadow: none;
}

.book-card-number {
  margin-top: 6px;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  color: #73675b;
}

.book-card-name {
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.book-card-image {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-style: italic;
  color: #5e5247;
}

.section-blurb a {
  color: inherit;
}

@media (min-width: 720px) {
  .book-top {
    grid-template-columns: auto 1fr;
    align-items: start;
    justify-items: start;
  }
}