/* ======================================
   LETTER COMPOSE / INBOX
   ====================================== */
.letter-textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  background: color-mix(in srgb, var(--bg-surface) 80%, #2a1800 20%);
  font-family: var(--font-prose);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0.75rem;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  color: var(--text-primary);
}

.tone-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.tone-pill {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.tone-pill.selected, .tone-pill:hover {
  border-color: var(--accent-ember);
  color: var(--accent-ember);
  background: rgba(200, 98, 42, 0.08);
}

/* ======================================
   RELATIONSHIPS GRID
   ====================================== */

/* A PORTRAIT AND WHO THEY ARE TO YOU (maggie, 2026-10-01). Each person is a
   small leaf standing upright: the face in the chat's gilt arch (.chat-frame /
   .chat-face, chat.css), what they are to you as a gold rubric, their name in
   the book face and their style in italic. Two to a row on a phone, as many as
   fit on a wide page. The three feelings are on the person's own card. */
.relationships-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 620px) {
  .relationships-grid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.9rem; }
}
.rel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  border: 1px solid var(--gild-faint);
  border-radius: 2px;
  padding: 0.95rem 0.6rem 0.8rem;
  background: var(--leaf);
  box-shadow: var(--vellum-shadow);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
@media (hover: hover) {
  .rel-card:hover { border-color: var(--gild); }
}
/* Somebody you dealt with TODAY: a hairline in the colour of the feeling. */
.rel-card.hue-love   { border-color: var(--accent-gold);  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 35%, transparent), var(--vellum-shadow); }
.rel-card.hue-friend { border-color: var(--accent-ember); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-ember) 35%, transparent), var(--vellum-shadow); }
.rel-card.hue-hate   { border-color: var(--text-danger);  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-danger) 35%, transparent), var(--vellum-shadow); }
.rel-card.unmet { opacity: 0.85; }

/* the arch, generously sized */
.rel-arch { display: block; flex: none; margin-bottom: 0.6rem; }
.rel-arch .chat-frame { display: block; width: 92px; padding: 3px; border-radius: 46px 46px 4px 4px; }
.rel-arch .chat-face { width: 86px; height: 114px; border-radius: 43px 43px 2px 2px; }
@media (min-width: 620px) {
  .rel-arch .chat-frame { width: 104px; padding: 4px; border-radius: 52px 52px 5px 5px; }
  .rel-arch .chat-face { width: 96px; height: 128px; border-radius: 48px 48px 3px 3px; }
}
/* the dead: pewter for gold, the face gone to ash (as the family tree) */
.rel-card.dead { opacity: 0.75; }
.rel-card.dead .chat-frame { background: linear-gradient(160deg, #9a969e, #4a474e 55%, #77737c); }
.rel-card.dead .chat-face { filter: grayscale(1) brightness(.72) contrast(.95); }

/* who they are to you: the gold rubric */
.rel-standing {
  font-family: var(--font-display);
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: var(--fs-text);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: var(--gild-ink);
}
.rel-standing.kin { color: var(--accent-gold); }
.rel-npc { color: var(--text-muted); letter-spacing: 0.04em; }
.rel-name, .letter-from {
  font-size: 1.2143rem;
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}
.rel-name {
  display: block;
  max-width: 100%;
  margin-top: 0.15rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rel-name .person-link { color: var(--text-primary); text-decoration: none; }
.rel-name .person-link:hover, .rel-name .person-link:focus-visible { color: var(--accent-gold); }
.rel-title, .rel-note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}
.rel-note {
  color: var(--text-muted);
  border-top: 1px dotted var(--gild-faint);
  padding-top: 0.3rem;
  margin-top: 0.4rem;
}
/* The Dynasty card sits straight in the tab; the tabs and lists below it are inset. */
#tab-relations > .panel-card { margin-left: 0.75rem; margin-right: 0.75rem; }

/* ======================================
   LETTER CARDS
   ====================================== */

/* A LETTER IS A SMALL LEAF too (stage 2, 2026-09-30). */
.letter-card {
  border: 1px solid var(--gild-faint);
  border-radius: 2px;
  padding: 0.8rem 0.95rem;
  background: var(--leaf);
  box-shadow: var(--vellum-shadow);
  margin-bottom: 0.6rem;
  transition: box-shadow 0.15s;
}
.letter-card:last-child { margin-bottom: 0; }
/* Inside a leaf (the Ravens tab's own panel) a letter is a ruled entry on the
   page, not a box within a box; an unread one keeps its ember mark. */
.panel-card .letter-card {
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--gild-faint);
  border-radius: 0;
  box-shadow: none;
  padding: 0.85rem 0.1rem;
  margin: 0;
}
.panel-card .letter-card:last-child { border-bottom: 0; }
.panel-card .letter-card.letter-unread {
  border-left: 2px solid var(--accent-ember);
  padding-left: 0.75rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-ember) 8%, transparent), transparent 55%);
}
.panel-card .letter-card.letter-found {
  border-left: 2px solid var(--accent-violet);
  padding-left: 0.75rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-violet) 10%, transparent), transparent 55%);
}
.panel-card .letter-card:hover { box-shadow: none; }
.letter-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.letter-unread {
  border-left: 3px solid var(--accent-ember);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-ember) 10%, transparent), transparent 60%), var(--leaf);
}

/* A RAVEN SOMEBODY ELSE THREW AWAY. Violet is the whisper colour everywhere
   else in the game - the whisper skills, whisper diary entries, the dragon bond
   - so a letter you were never meant to read wears it too, and is recognisable
   in the inbox before you have read a word of it.

   `.letter-card.letter-found` rather than `.letter-found`: a found letter is
   also unread the moment it lands, so both classes are on the card and this one
   has to outrank .letter-unread's ember left border. The whole outline is
   violet, not just the left edge, because that is what marks it as a different
   KIND of letter rather than merely a new one. */
.letter-card.letter-found {
  border: 1px solid var(--accent-violet);
  border-left: 3px solid var(--accent-violet);
  background: color-mix(in srgb, var(--bg-surface) 88%, var(--accent-violet) 12%);
}
.letter-card.letter-found:hover {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-violet) 35%, transparent);
}

/* A RAVEN SOMEBODY SHOWED YOU (F03, maggie, 2026-10-08: "in a fitting colour
   (not violet)" - blue, her answer Q5). Written like .letter-found, and for the
   same reason: it has to outrank .letter-unread's ember edge, because what
   matters first is that it was never written to you. */
.panel-card .letter-card.letter-shown {
  border-left: 2px solid var(--status-info);
  padding-left: 0.75rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--status-info) 10%, transparent), transparent 55%);
}
.letter-card.letter-shown {
  border: 1px solid var(--status-info);
  border-left: 3px solid var(--status-info);
  background: color-mix(in srgb, var(--bg-surface) 88%, var(--status-info) 12%);
}
.letter-card.letter-shown:hover {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--status-info) 35%, transparent);
}

.letter-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}
.letter-date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.letter-subject {
  font-family: var(--font-serif);
  font-size: var(--fs-text);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}
.letter-tone {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-variant: small-caps;
  text-transform: lowercase;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
/* the letter itself is read in the book face, like the chronicle */
.letter-body {
  font-size: 1.1786rem;
  color: var(--text-primary);
  line-height: 1.5;
  font-family: var(--font-serif);
  border-top: 1px dotted var(--gild-faint);
  padding-top: 0.4rem;
  margin-top: 0.1rem;
  white-space: pre-wrap;
}

/* -- Compose: recipient picker (tap-friendly list, players only) -- */
.recipient-list {
  margin-top: 0.35rem;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-surface) 85%, #000 15%);
}
.recipient-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.6rem;   /* generous touch target for mobile */
  border: none;
  border-bottom: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-text);
  text-align: left;
  cursor: pointer;
}
.recipient-option:last-child { border-bottom: none; }
.recipient-option:hover { background: rgba(200, 98, 42, 0.08); }
.recipient-option.selected {
  background: rgba(200, 98, 42, 0.14);
  color: var(--accent-ember);
}
.recipient-option .ro-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.45;
  flex: none;
}
.recipient-option .ro-dot.online { background: var(--status-online); opacity: 1; }
.recipient-option .ro-name { font-weight: 600; }
.recipient-option .ro-region {
  margin-left: auto;
  font-size: var(--fs-fine);
  color: var(--text-muted);
}
.recipient-empty {
  padding: 0.55rem 0.6rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-style: italic;
}

.stance-pill { font-size: var(--fs-fine); padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--border-dim); background: transparent; color: var(--text-muted); cursor: pointer; }
.stance-pill.selected { background: var(--accent-ember); border-color: var(--accent-ember); color: #fff; }

/* THE DECISIONS SECTION (maggie, 2026-08-10).

   The lower half of the character popup had grown five shapes for the same
   idea - a number box with a small button beside it, a dropdown with a smaller
   one, two secondary pills on a line, and a full-width bar under all of them.
   First pass made them one full-width family; her second look said the same
   thing more precisely: make them the interaction TILES, in a row, under their
   own heading, because they are not interactions and should not look like a
   stray one.

   So `.cp-action` is a `.btn` tile of the same shape as the CONVERSE/BEFRIEND
   grid above it, laid out in the same three columns, and anything that needs a
   CHOICE opens the shared dialog (#cp-sheet-modal) rather than parking a
   control on the page. `.cp-action.danger` is the red one - irons and the holy
   orders. */
.cp-decisions {
  display: grid;
  /* minmax(0, ...): a plain 1fr cannot shrink below its longest word, and a
     Polish tile pushed the third column past the card (2026-10-01) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
/* Five renderers own five containers; this puts their children in the ONE grid
   so the whole section lines up. Without it each container would be a single
   grid cell and the tiles inside it would stack. */
.cp-decisions > div { display: contents; }
/* A line of small print - a tutoring note, a prisoner's term - is not a tile
   and takes the full width wherever it falls. */
.cp-decisions > div > div,
.cp-decisions > div > span { grid-column: 1 / -1; }
/* EXCEPT THE PROMISE TO WED, which is tiles and not small print. Its buttons
   are asked for from the server after the rest of the row is drawn, so they
   live one level deeper, in a container of their own - and the rule above read
   that container as a note and gave it the whole width. Arrange a match for
   them was a full-width slab beside third-width tiles. `contents` dissolves
   the container so its buttons join the same three columns as their
   neighbours; the rule above still catches every real note. */
#cp-betroth-row { display: contents; }

.cp-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem;
  font-size: var(--fs-small);
  width: 100%;
  min-height: 4.5rem;
  text-align: center;
  line-height: 1.25;
}
/* THE POPUP'S TILES ARE THE ONE PLACE THAT STAYS PALE (maggie, 2026-08-10).

   The plain `.btn` is an ember fill everywhere else in the game now (see the
   long note in components/controls.css). Not here. Both grids in this popup -
   the interactions above and the Decisions below - are where you deal with a
   PERSON, and nine or fourteen orange slabs in one panel is a wall, not a
   choice. Her call, seeing it: keep these two grids as they were.

   `revert` rather than a colour of our own, deliberately: pale is what these
   tiles were before the ember default existed, and what they were was the
   browser's own button face. Naming a colour here would be inventing a third
   look and would need a light-theme twin to go with it. `border-color` is set
   back to transparent by hand instead, because reverting THAT would hand the
   tiles the browser's 3D button border as well. */
#cp-interact-actions .btn:not([style*="color"]),
.btn.cp-action {
  background: revert;
  color: revert;
  border-color: transparent;
}
/* UPPERCASE, AND NOT BOLD (maggie, 2026-08-10). The two grids disagreed: the
   interaction tiles were uppercase because `.btn` says so, the Decisions tiles
   were not because `.cp-action` had turned that off - and both were bold, the
   interaction ones through a `font-weight:600` written inline on every label
   span. The weight now lives here, in one rule over both grids, so the four
   inline copies could go. `.btn`'s own uppercase and letter-spacing are simply
   left alone, which is what makes the Decisions tiles match. */
#cp-interact-actions .btn,
#cp-interact-actions .btn span,
.btn.cp-action {
  font-weight: 400;
}
#cp-interact-actions .btn:not([style*="color"]):hover:not(:disabled),
.btn.cp-action:hover:not(:disabled) {
  background: revert;
  border-color: var(--accent-ember);
}
/* The one tile that is not an ordinary choice: the same pale tile, spoken in
   red. It has to name its colours after the reset above, or the reset wins. */
.btn.cp-action.danger {
  border-color: var(--text-danger);
  color: var(--text-danger);
}
.btn.cp-action.danger:hover:not(:disabled) { background: var(--text-danger); color: var(--bg-base); }
.cp-action-note {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0.1rem 0 0.25rem;
}
/* The shared dialog's fields. */
.cp-sheet-label { display: block; font-size: var(--fs-fine); color: var(--text-muted); margin: 0 0 0.2rem; }
.cp-sheet-field { width: 100%; box-sizing: border-box; margin-bottom: 0.6rem; background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: 4px; color: var(--text-primary); padding: 0.35rem 0.5rem; font-size: var(--fs-text); }
.cp-sheet-check { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); margin-bottom: 0.6rem; cursor: pointer; }
.cp-sheet-note { font-size: var(--fs-micro); color: var(--text-muted); margin: -0.3rem 0 0.6rem; }
.cp-sheet-help { font-size: var(--fs-small); color: var(--text-secondary); margin: 0 0 0.7rem; border: 1px solid var(--border-dim); border-radius: 4px; padding: 0.35rem 0.5rem; }
.cp-sheet-help summary { cursor: pointer; color: var(--accent-gold); }
.cp-sheet-help p { margin: 0.3rem 0 0; line-height: 1.4; }
.cp-sheet-list { max-height: 170px; overflow: auto; margin-bottom: 0.6rem; border: 1px solid var(--border-dim); border-radius: 4px; padding: 0.35rem; }
.cp-sheet-list label { display: block; font-size: var(--fs-small); margin: 0.12rem 0; cursor: pointer; }

/* THE TREE KEEPS ITS OWN FACE (stage 2, 2026-09-30). The leaf around it now
   sets the book face on everything that names none; the family tree is being
   redesigned on its own, so it is held to the Inter it was drawn in until
   then rather than restyled in passing. */
#family-tree { font-family: var(--font-ui); }