/* Player-facing session page, in the idiom of an early D&D hardback.
 *
 * Serif body, small-caps rules headings, a single spot colour, ink illustrations on
 * paper. Typography is set for screens first: the period faces go muddy small, so the
 * body runs large with generous leading and the character of the face carries the
 * headings and the drop cap.
 *
 * No external requests: the font stack is entirely local faces with Georgia as the
 * floor, which every platform has and which shares the warm, wide look.
 */

:root {
  /* Paper, ink, rules and the spot all come from tokens.css now, shared with the
   * workbench. The rust of a 1e cover was here for a while and read well, but the two
   * surfaces having different accents made them look like two products. */
  --surround: #e2dac8;
  --gm: #3c4a52;
  /* The family comes from tokens.css, which both surfaces share. */
  --body: var(--serif);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The page stays paper; the room around it goes dark. Inverted ink reads badly
     * and line art on black looks like a mistake. */
    --surround: #16151a;
  }
}
:root[data-theme='dark'] { --surround: #16151a; }
:root[data-theme='light'] { --surround: #e2dac8; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--surround);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
}

.page {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--paper);
  padding: 3rem 2.5rem 3.5rem;
  border-left: 1px solid var(--paper-edge);
  border-right: 1px solid var(--paper-edge);
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.18);
}

/* --- masthead ------------------------------------------------------------- */

.masthead { text-align: center; margin-bottom: 2.5rem; }

.campaign {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spot);
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

.session-date {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}

.double-rule {
  border: 0;
  border-top: 2px solid var(--spot);
  border-bottom: 1px solid var(--spot);
  height: 3px;
  margin: 1.5rem auto;
  max-width: 14rem;
}

/* --- section headings ----------------------------------------------------- */

h2 {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spot);
  margin: 3rem 0 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

h2 + p, h2 + .scene, h2 + .cards { margin-top: 1.25rem; }

/* --- the recap box -------------------------------------------------------- */

.recap {
  border: 1px solid var(--rule);
  border-top: 3px double var(--rule);
  border-bottom: 3px double var(--rule);
  padding: 1.75rem 1.75rem 1.25rem;
  margin: 0;
  background: rgba(255, 255, 255, 0.35);
}

.recap p { margin: 0 0 1rem; text-align: justify; hyphens: auto; }
.recap p:last-child { margin-bottom: 0; }

.recap > p:first-of-type::first-letter {
  float: left;
  font-size: 3.6rem;
  line-height: 0.82;
  padding: 0.1rem 0.5rem 0 0;
  color: var(--spot);
}

/* --- scenes and their beats ----------------------------------------------- */

.scene { margin: 2rem 0 0; }

.scene h3 {
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
}

.scene h3 .ordinal {
  color: var(--spot);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  margin-right: 0.55rem;
  vertical-align: 0.12em;
}

.scene .summary {
  margin: 0 0 0.75rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* Early books set lists as hanging indents with a dash, not bullets. */
.beats { list-style: none; margin: 0; padding: 0; }

.beats li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.4rem;
}

.beats li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--spot);
}

/* --- entity cards --------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.card {
  border: 1px solid var(--rule);
  padding: 0.9rem 1rem 1rem;
  background: rgba(255, 255, 255, 0.4);
}

.card h3 {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 0.15rem;
}

.card .kind {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spot);
  margin-bottom: 0.6rem;
}

.card p { margin: 0; font-size: 0.95rem; }

.card .sessions {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* Where an illustration will sit: an ink mat, hatched, at a portrait ratio. */
.plate {
  aspect-ratio: 4 / 5;
  margin-bottom: 0.7rem;
  border: 1px solid var(--ink);
  padding: 0.3rem;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 6px,
      rgba(36, 31, 27, 0.07) 6px 7px
    ),
    #fbf7ef;
  display: grid;
  place-items: center;
}

.plate span {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 0 0.5rem;
}

.plate.wide { aspect-ratio: 3 / 2; }

/* --- threads -------------------------------------------------------------- */

.threads { margin: 1.25rem 0 0; padding: 0; list-style: none; }

.threads li {
  border-left: 2px solid var(--rule);
  padding: 0 0 0 0.9rem;
  margin-bottom: 1rem;
}

.threads .label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spot);
}

.threads strong { font-weight: 400; letter-spacing: 0.01em; }
.threads p { margin: 0.2rem 0 0; font-size: 0.95rem; }

/* --- the GM-only block ---------------------------------------------------- */

.gm-only {
  margin-top: 3rem;
  border: 1px dashed var(--gm);
  padding: 1.25rem 1.5rem;
  background: rgba(60, 74, 82, 0.06);
}

.gm-only h2 { color: var(--gm); border-bottom-color: var(--gm); margin-top: 0; }
.gm-only .note { font-size: 0.8rem; font-style: italic; color: var(--gm); }

/* --- colophon ------------------------------------------------------------- */

.colophon {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.colophon p { margin: 0.3rem 0; }

/* --- narrow screens ------------------------------------------------------- */

@media (max-width: 34rem) {
  .page { padding: 2rem 1.25rem 2.5rem; border: 0; }
  body { font-size: 1.0625rem; }
  h1 { font-size: 1.65rem; }
  .recap { padding: 1.25rem 1.1rem 0.9rem; }
  .recap p { text-align: left; }
}

/* --- print: this is where the aesthetic belongs --------------------------- */

@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.45; }
  .page { max-width: none; box-shadow: none; border: 0; padding: 0; background: #fff; }
  /* Two columns are right on paper, wrong on a scrolling screen. */
  .body-columns { column-count: 2; column-gap: 7mm; }
  .scene, .card, .threads li { break-inside: avoid; }
  h2 { break-after: avoid; }
  .gm-only, .colophon { display: none; }
  .plate { break-inside: avoid; }
}


/* --- drawn plates --------------------------------------------------------- */

.plate.drawn {
  padding: 0;
  background: #fbf7ef;
  display: block;
  overflow: hidden;
}

.plate.drawn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The illustrations come on their own cream ground. Multiplying drops it into the
   * page's paper instead of leaving a pale rectangle sitting on top of it, and it
   * keeps working when the surround goes dark because the mat stays light. */
  mix-blend-mode: multiply;
}

/* A portrait plate crops to the figure rather than shrinking it to fit. */
.plate.drawn img { object-position: center 20%; }
.plate.wide.drawn img { object-position: center center; }

@media print {
  .plate.drawn img { mix-blend-mode: normal; }
}

/* --- reader chrome: navigation, indexes, entity history, login ------------- */

.page.narrow { max-width: 30rem; }

.trail {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.trail a { color: var(--spot); text-decoration: none; }
.trail a:hover { text-decoration: underline; }

.sessions, .index { list-style: none; margin: 1.25rem 0 0; padding: 0; }

.sessions li, .index li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--paper-edge);
}

.sessions a, .index a { color: var(--ink); text-decoration: none; }
.sessions a:hover, .index a:hover { color: var(--spot); text-decoration: underline; }

.meta {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ink-soft);
  white-space: nowrap;
}

h3.group {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.5rem 0 0;
}

.entity-head { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.entity-head .plate { margin: 0; }
.entity-notes p { margin: 0 0 0.9rem; }

.history { list-style: none; margin: 1.25rem 0 0; padding: 0; }

.history .when {
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.history .when a { color: var(--spot); text-decoration: none; }
.history .fact { position: relative; padding-left: 1.35rem; margin-bottom: 0.4rem; }
.history .fact::before { content: '\2014'; position: absolute; left: 0; color: var(--spot); }

.moments { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.moments li { border-left: 2px solid var(--spot); padding-left: 0.9rem; margin-bottom: 1rem; }
.moments strong { font-weight: 400; }
.moments p { margin: 0.2rem 0 0; }

.empty, .preview-notice, .warning {
  border: 1px solid var(--rule);
  padding: 0.9rem 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--ink-soft);
}

.preview-notice { border-color: var(--gm); color: var(--gm); border-style: dashed; }
.warning { border-color: var(--spot); color: var(--spot); font-style: normal; }

.login { display: grid; gap: 1rem; margin: 2rem 0; }

.login label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Square everything: the borrowed look has no rounded corners anywhere. */
.login input, .login select, .login textarea, .login button, button {
  font: inherit;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  padding: 0.6rem 0.7rem;
  background: #fbf7ef;
  color: var(--ink);
}

.login button { background: var(--spot); color: #fbf7ef; border-color: var(--spot); cursor: pointer;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.8rem; }

form.inline { display: inline; }

button.link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--spot);
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
}


/* --- threads -------------------------------------------------------------- */

.thread {
  border-left: 2px solid var(--rule);
  padding: 0 0 0 1.1rem;
  margin: 1.75rem 0 0;
}

.thread h3 {
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0.1rem 0 0.35rem;
}

.thread .summary { margin: 0 0 0.6rem; font-style: italic; color: var(--ink-soft); }
.thread .history { margin-top: 0.5rem; }
.thread .history .when { margin-top: 0.9rem; }
.thread .empty { margin: 0.4rem 0 0; border: 0; padding: 0; }

.jump { margin: 0 0 1.5rem; font-size: 0.85rem; }
.jump a { color: var(--spot); text-decoration: none; letter-spacing: 0.04em; }
.jump a:hover { text-decoration: underline; }


/* Guidance under a field on the invitation page. Quieter than a warning, which is for
   something having gone wrong, and not a label, which names the field above it. */
.hint {
  margin: -0.4rem 0 0.2rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* --- character pages ------------------------------------------------------ */
/* What a player wrote about their own character: read-only on the entity page,
   and with forms on the page they control. */

.character-page { margin: 1.5rem 0 0; }

.character-page h2 {
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}

.character-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
  margin: 0.9rem 0;
}

.character-gallery figure { margin: 0; }

.character-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink);
  padding: 0.3rem;
}

.character-gallery figcaption {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.35rem;
}

.character-links { margin: 0.9rem 0; padding: 0; list-style: none; }

.character-links li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding: 0.55rem 0;
}

/* The name takes the room; controls sit at the end and keep their size. */
.character-links li > span:first-child { flex: 1 1 10rem; }
.character-links li .muted {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.character-links audio { flex: 1 1 16rem; max-width: 100%; }
.character-links form { margin: 0; }

.character-page textarea {
  width: 100%;
  min-height: 9rem;
  font: inherit;
  line-height: 1.5;
}

.login button.secondary, button.secondary {
  background: #fbf7ef;
  color: var(--ink);
  border-color: var(--ink);
}

/* --- what the party carries ------------------------------------------------ */
/*
   Set as a page in a ledger rather than as a web table: the numbers are the reason
   anybody opens this, so they are lined up in a column of their own and the actions
   stay quiet enough not to compete with them.
*/
.purse {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 2rem;
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.purse p { margin: 0; }
.purse-pot { display: flex; align-items: baseline; gap: 0.6rem; }
.purse-pot span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.purse-pot strong { font-size: 1.5rem; font-weight: 400; }
.purse-mine strong { font-weight: 700; }
.purse-others { font-size: 0.85rem; }

table.loot { width: 100%; border-collapse: collapse; }
table.loot th {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 0 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
table.loot td {
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
table.loot th.number, table.loot td.number { text-align: right; width: 5rem; }
/* The last column holds the one thing you can do to a row, and it should not look like
   the row is mostly a button. */
table.loot td:last-child { width: 1%; white-space: nowrap; text-align: right; }
table.loot form { margin: 0; display: inline; }
table.loot button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--spot);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
}
table.loot button:hover { text-decoration: none; }
table.loot button.quiet { color: var(--ink-soft); }
/* What is still on the table is the part anybody is deciding about. */
table.loot tr.unclaimed td:first-child { font-weight: 700; }

/* --- what we know, one evening at a time ----------------------------------- */
/*
   An entity a campaign has carried for twenty-five sessions filled a screen and a half
   with no way to fold any of it away. A reader nearly always wants one evening -- the
   last, or the one they half remember -- and a flat list makes them hunt past the rest.
*/
.knowing { margin-top: 1.25rem; }
.knew {
  border-bottom: 1px solid var(--rule);
  padding: 0.35rem 0;
}
.knew > summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
  cursor: pointer;
  list-style: none;
}
.knew > summary::-webkit-details-marker { display: none; }
/* A mark that turns, so a shut card looks shut rather than looking like a heading. */
.knew > summary::before {
  content: "\203A";
  display: inline-block;
  color: var(--ink-soft);
  transition: transform 120ms ease;
}
.knew[open] > summary::before { transform: rotate(90deg); }
.knew-when { font-weight: 700; }
/* How much a shut card is holding, so closing one does not hide how much there is. */
.knew-count {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.knew .history { margin: 0.2rem 0 0.6rem; }
.knew-open { margin: 0 0 0.5rem; font-size: 0.85rem; }
.knew-open a { color: var(--spot); text-decoration: none; }
.knew-open a:hover { text-decoration: underline; }