/* court-plate.css — the painted minister card.
 *
 * Everything on the plate is sized in cqw: one container query unit is one
 * percent of the plate's own width, so the printed numbers ride the painting at
 * any size instead of sliding off the medallions when the window changes. The
 * positions themselves live in PLATE in court-plate.js, measured off the art;
 * nothing here repeats them.
 */

#card.plated .card-head {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}

.plate {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 1536;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  container-type: inline-size;
  overflow: hidden;
  --plate-ink: #2a1a10;      /* the ink the cards are lettered in */
  --plate-ink-soft: #5b4229;
}

/* The blank panel the painter left below the portrait. */
.plate-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  text-align: center;
  color: var(--plate-ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  overflow: hidden;
}

.plate-office {
  font-size: 3.6cqw;
  line-height: 1.1;
}

.plate-line {
  font-size: 2.1cqw;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--plate-ink-soft);
}

.plate-mandate {
  font-size: 2.25cqw;
  line-height: 1.3;
  padding: 0 1.5cqw;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The six medallions. The disc is painted; only the number is ours. The name
 * of each attribute is in the stat grid under the card, and on hover here. */
.pip {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25cqw;
  color: var(--plate-ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  cursor: help;
}

.pip-tag {
  font-size: 1.7cqw;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--plate-ink-soft);
}

.pip-val {
  font-size: 4.4cqw;
  line-height: 1;
  text-shadow: 0 0.15cqw 0 rgba(255, 250, 235, 0.5);
}

/* Without container queries the plate still holds its shape and the art still
 * reads; the numbers simply size off the viewport instead of off the plate. */
@supports not (container-type: inline-size) {
  .plate-office { font-size: min(3.6vw, 23px); }
  .plate-line { font-size: min(2.1vw, 13px); }
  .plate-mandate { font-size: min(2.25vw, 14px); }
  .pip-tag { font-size: min(1.7vw, 10px); }
  .pip-val { font-size: min(4.4vw, 27px); }
}

/* The Vizier's card: no medallions, a black panel across the foot. His six
 * numbers are printed into it in gold, which is the only ink that reads on it. */
.vizier-plate {
  --plate-gold: #d4af37;
  --plate-gold-soft: #9c7f34;
}

.viz-cell {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  cursor: help;
}

.viz-tag {
  font-size: 1.9cqw;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--plate-gold-soft);
}

.viz-val {
  font-size: 4cqw;
  line-height: 1;
  color: var(--plate-gold);
}

@supports not (container-type: inline-size) {
  .viz-tag { font-size: min(1.9vw, 11px); }
  .viz-val { font-size: min(4vw, 24px); }
}

/* The way out to the export page: present, not loud. */
.floor-links {
  margin: 10px 0 0;
  text-align: right;
  font-size: .8rem;
  opacity: .55;
}
.floor-links a { color: inherit; text-decoration: none; }
.floor-links a:hover { opacity: 1; text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * The plate and the machine, side by side.
 *
 * A card is 2:3. Once the plate took the whole head, the body under it — the
 * mantle, the reading, the conformation, and the six attributes with what each
 * one governs — fell off the bottom of the stage and was never seen again. It
 * was still in the markup; it simply had nowhere to be.
 *
 * At desk width there is room for both, and there was already two-thirds of the
 * screen going unused: the painting takes a column, the machine takes the rest.
 * Below that width the card scrolls instead, which is the honest fallback — the
 * painting is 2:3 and will not be argued out of it.
 * ------------------------------------------------------------------------- */

#card.plated { overflow-y: auto; }

@media (min-width: 920px) {
  #card.plated {
    max-width: 1000px;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }
  #card.plated .card-head {
    flex: 0 0 46%;
    max-width: 440px;
    align-self: flex-start;
  }
  #card.plated .card-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 18px 20px 20px;
  }
}

/* What to say when the shared save has never been written. */
.founding {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.founding p { margin: 0 0 8px; }
.founding .btn { margin-top: 4px; }

/* ---------------------------------------------------------------------------
 * The Floor: the record of the sitting.
 * ------------------------------------------------------------------------- */

.floor-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.floor-count {
  flex: 1 1 auto; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

.floor-log { display: flex; flex-direction: column; gap: 12px; }

.floor-log .entry { border-left: 2px solid var(--line); padding-left: 10px; }
.floor-log .entry.said { border-left-color: var(--gold, #c6a04a); }
.floor-log .entry.failed { border-left-color: var(--cinnabar, #a33); opacity: .78; }

.entry-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 3px;
}
.entry-who { color: var(--gold, #c6a04a); }
.entry-meta { opacity: .7; text-transform: none; letter-spacing: .04em; }
.entry-at { margin-left: auto; opacity: .6; }

.entry-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.entry.said .entry-text { color: var(--ink-1, #e8e0d0); }