/* ======================================
   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: 0.72rem;
  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
   ====================================== */

.relationships-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.6rem;
}

.rel-card {
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  background: var(--bg-surface);
  transition: box-shadow 0.15s;
}
.rel-card-header {
  display: flex;
  justify-content: flex-start;
  gap: 0.35rem;
  align-items: baseline;
  margin-bottom: 0.2rem;
}
/* Standing to the far right; the [NPC] tag stays beside the name, not mid-card. */
.rel-card-header .rel-standing { margin-left: auto; }
/* 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; }
.rel-name, .letter-from {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.rel-standing {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rel-title {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.4rem;
}
/* relationship affinity bars reuse the shared .bar-track.thin / .bar-fill system */
.rel-lfh-row .bar-track { margin: 0.35rem 0; }
.rel-note {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
  font-style: italic;
  border-top: 1px solid var(--border-dim);
  padding-top: 0.3rem;
}

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

.letter-card {
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  background: var(--bg-surface);
  margin-bottom: 0.5rem;
  transition: box-shadow 0.15s;
}
.letter-card:last-child { margin-bottom: 0; }
.letter-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.letter-unread {
  border-left: 3px solid var(--accent-ember);
  background: color-mix(in srgb, var(--bg-surface) 85%, var(--accent-ember) 15%);
}

/* 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);
}

.letter-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}
.letter-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.letter-subject {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}
.letter-tone {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}
.letter-body {
  font-size: 0.86rem;
  color: var(--text-primary);
  line-height: 1.6;
  font-family: var(--font-prose);
  border-top: 1px solid var(--border-dim);
  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: 0.8rem;
  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: 0.68rem;
  color: var(--text-muted);
}
.recipient-empty {
  padding: 0.55rem 0.6rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* -- L/F/H Relationship bars -- */
.rel-lfh-bars {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.4rem 0;
}
.rel-lfh-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.rel-lfh-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  width: 10px;
  text-align: right;
  flex-shrink: 0;
}
.rel-lfh-value {
  font-size: 0.72rem;
  color: var(--text-muted);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}


.stance-pill { font-size: .68rem; 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;
  grid-template-columns: 1fr 1fr 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: 0.7rem;
  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: 0.72rem;
  color: var(--text-muted);
  margin: 0.1rem 0 0.25rem;
}
/* The shared dialog's fields. */
.cp-sheet-label { display: block; font-size: 0.68rem; 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: 0.78rem; }
.cp-sheet-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; margin-bottom: 0.6rem; cursor: pointer; }
.cp-sheet-note { font-size: 0.64rem; color: var(--text-muted); margin: -0.3rem 0 0.6rem; }
.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: 0.72rem; margin: 0.12rem 0; cursor: pointer; }