/* ======================================
   CHARACTER PROFILE HEADER (responsive)
   ====================================== */
/* On phones the portrait + info + traits row squeezes the title to one word
   per line and pushes trait pills off-screen. Let the row wrap: portrait +
   info share the top row, traits drop to a full-width row below. */
@media (max-width: 768px) {
  .cp-head { flex-wrap: wrap; align-items: flex-start !important; }
  .cp-head #cp-traits {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 0.5rem;
  }
}

/* ======================================
   TRAIT PILLS
   ====================================== */
.traits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

/* ONE LOOK FOR A TRAIT, EVERYWHERE (maggie, 2026-08-11). These were filled
   gold lozenges with dark text; the NPC profile's visual overhaul drew traits
   as quiet outlined rectangles instead and she asked for that look wherever
   traits appear - her own sheet included. The gold fill (an inline
   background at both render sites) went with it. */
.trait-pill, .wound-pill {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
  border: 1px solid var(--border-bright);
  background: transparent;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* A TRAIT EARNED IN PLAY - a `mark` in traits.json, Adulterer and its kind -
   wears the whispers violet (maggie, 2026-09-21). */
.trait-pill.is-mark { border-color: var(--accent-violet); color: var(--accent-violet); }

/* ======================================
   WOUND PILLS
   ====================================== */
/* WHAT WAS DONE TO YOU, not who you are (2026-08-27). A wound sits in its own
   row under the traits and never among them - the reason is in server/wounds.js
   and it is not cosmetic: `traits` is client-owned, so a wound written into it
   would come back off on the bearer's next autosave.
   Same lozenge as .trait-pill, deliberately, so the two rows sit together as one
   block - only the colour differs, and it is the same danger red the attribute
   line uses for the number this pill explains. */
.wounds-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.wound-pill { border-color: var(--text-danger); color: var(--text-danger); cursor: help; }

/* ======================================
   PROPERTIES TABLE
   ====================================== */
.props-table {
  width: 100%;
  border-collapse: collapse;
}
.props-table td {
  padding: 0.4rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-dim);
  /* The label wraps to two lines where the value is one; baseline hung the
     figure off the top of the taller cell, so "1" read as a superscript. */
  vertical-align: middle;
}
.props-table td:first-child {
  color: var(--text-muted);
  /* Wide enough for the longest label at its own size, so the two columns keep
     a gutter between them instead of the value starting against the label. */
  width: 45%;
  padding-right: 0.9rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* THE VALUES SIT ON THE RIGHT-HAND EDGE (maggie, 2026-09-18: "align to the
   right"). A ragged left column of values against a ragged right column of
   labels had no line anywhere; the card now reads label-left, value-right, and
   the rules between the rows run the full width of it. */
.props-table td:last-child {
  color: var(--text-primary);
  font-family: var(--font-prose);
  text-align: right;
}


/* THE CHILDREN CARD (maggie, 2026-09-16). One row per living child of the
   character you are playing, wherever it is being raised: the tick is the
   nursery clock, and under it whatever giving is open to you for that child.
   A child on somebody else's account draws the tick and nothing else - its
   clock is still yours to set, its keeping is not yours to give. */
.child-row {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-dim);
}
.child-row:last-child { border-bottom: 0; padding-bottom: 0; }
.child-clock {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.76rem;
  cursor: pointer;
}
/* The game's own gold rather than the browser's blue, which was the one
   unbranded control on the page. */
.child-clock input { align-self: center; accent-color: var(--accent-gold); }
/* What the tick does, said once over the column rather than on every row. */
.child-note {
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}
.child-name { color: var(--text-primary); }
.child-age  { color: var(--text-muted); font-size: 0.66rem; margin-left: auto; white-space: nowrap; }
.child-hand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.child-btn   { font-size: 0.66rem; padding: 0.15rem 0.5rem; }
.child-offer { font-size: 0.66rem; color: var(--accent-gold); }