/* ===========================================================================
   THE HOUSEHOLD, REBUILT (maggie, 2026-08-19, from her mockups)
   ===========================================================================
   Your Retinue and the courts were a stack of tall cards, each carrying every
   fact it had at the same weight - three meters, a price, a perk list, a work
   list and a note, all open, all the time. Five retainers was a page you had to
   scroll to compare two of them.

   Now a person is ONE ROW until you open them: who they are, what they are to
   you (the three meters, small), what they cost, and a chevron. Pressing the
   row unfolds everything that was there before - nothing was removed, it is
   folded. Two columns when there is width for them: what they are to you on the
   left, what you may set them to on the right.

   The dot at the far left is presence: filled when they are beside you, hollow
   when they are not. It is the one fact a glance down the list should answer.
   ========================================================================== */

.ret-section-head {
  display: flex; align-items: center; gap: .7rem;
  margin: 1.1rem 0 .55rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.ret-section-head .ret-rule { flex: 1; height: 1px; background: var(--border-dim); }
.ret-section-head .ret-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.ret-row {
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  background: var(--bg-panel);
  margin-bottom: .5rem;
  overflow: hidden;
}
.ret-row.open { border-color: var(--text-muted); }

.ret-head {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .8rem;
  cursor: pointer;
}
@media (hover: hover) { .ret-head:hover { background: var(--bg-surface); } }

.ret-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--text-muted); background: transparent;
}
/* FOUR STATES, AND ONE FOR "NONE OF THEM APPLIES" (maggie, 2026-08-20).
   The bare .ret-dot - a hollow ring - is an officeholder with no hire price.
     .mine   the whispers violet: they are already yours
     .taken  red: sworn to somebody else, and no sum will move them
     .poor   amber: free to take, your purse is short - the one gold can fix
     .free   green: free to take, and you can pay for them today
   Filled discs, not rings, so the state reads at a glance down a long list. */
.ret-dot.mine  { background: var(--accent-violet); border-color: var(--accent-violet); }
.ret-dot.taken { background: #9d3b30; border-color: #9d3b30; }
.ret-dot.poor  { background: #c9992f; border-color: #c9992f; }
.ret-dot.free  { background: #6a9a5b; border-color: #6a9a5b; }
/* Kept so nothing that still writes the old presence class draws an empty ring. */
.ret-dot.on    { background: #6a9a5b; border-color: #6a9a5b; }

.ret-who { flex: 1 1 auto; min-width: 0; }
.ret-name {
  font-family: var(--font-display); font-variant: small-caps;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .03em;
  color: var(--text-primary);
}
.ret-title { font-style: italic; font-size: .76rem; color: var(--text-muted); margin-left: .45rem; }
.ret-chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; }
.ret-chip {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .08rem .4rem; border-radius: 3px;
  border: 1px solid var(--border-dim); color: var(--text-muted);
}
.ret-chip.role { color: var(--accent-ember); border-color: color-mix(in srgb, var(--accent-ember) 45%, transparent); }
.ret-chip.office { color: var(--accent-violet); border-color: color-mix(in srgb, var(--accent-violet) 45%, transparent); }

/* The three meters, small enough to sit in a row and still be read. */
.ret-meters { flex: 0 0 auto; display: none; flex-direction: column; gap: .18rem; }
.ret-meter { display: flex; align-items: center; gap: .4rem; }
.ret-meter .n {
  width: 2.1rem; text-align: right; font-size: .72rem;
  font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.ret-meter .t { width: 58px; height: 3px; background: var(--border-bright); border-radius: 2px; overflow: hidden; }
.ret-meter .f { height: 100%; display: block; }
.ret-meter.friendship .n { color: var(--accent-gold); }
.ret-meter.friendship .f { background: var(--accent-gold); }
.ret-meter.love .n { color: #c0554a; }
.ret-meter.love .f { background: #c0554a; }
.ret-meter.hate .f { background: var(--text-muted); }

.ret-cost { flex: 0 0 auto; text-align: right; min-width: 6.5rem; }
.ret-cost .state, .ret-served .state {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #6a9a5b;
}
.ret-cost .price {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--accent-gold);
}
.ret-cost .moon { font-size: .72rem; color: var(--text-muted); }

.ret-chev { flex: 0 0 auto; color: var(--text-muted); font-size: .6rem; transition: transform .15s; }
.ret-row.open .ret-chev { transform: rotate(180deg); }

.ret-body { display: none; padding: 0 .8rem .8rem; border-top: 1px solid var(--border-dim); }
.ret-row.open .ret-body { display: grid; }
.ret-body { grid-template-columns: 1fr 1fr; gap: 1.1rem; padding-top: .75rem; }
.ret-col { min-width: 0; }
.ret-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 .3rem;
}
.ret-served {
  border: 1px solid color-mix(in srgb, #6a9a5b 45%, transparent);
  border-radius: 5px; padding: .45rem .6rem; margin: .6rem 0;
}
.ret-served .up { font-size: .7rem; font-style: italic; color: var(--text-secondary); margin-top: .1rem; }

/* Narrow screens: the meters go under the name, and the two columns stack. */
@media (min-width: 620px) { .ret-meters { display: flex; } }
/* NOT ON A PHONE (maggie, 2026-09-23: "we can hide these bars of love hate etc
   in this view"). They were drawn under the name on narrow screens from
   2026-09-17; on a phone they were a third line on every card of a long list.
   Friendship, Love and Hate stay on the person's own card and on wider screens. */
@media (max-width: 619px) {
  .ret-head { flex-wrap: wrap; }
  .ret-meters { display: none; }
}
/* The dots and the green state words are bright for the dark page and fade
   into parchment; light mode takes the theme's own gold and green. */
:root.light-mode .ret-dot.poor { background: var(--accent-gold); border-color: var(--accent-gold); }
:root.light-mode .ret-dot.free,
:root.light-mode .ret-dot.on { background: var(--status-online); border-color: var(--status-online); }
:root.light-mode .ret-cost .state,
:root.light-mode .ret-served .state { color: var(--status-online); }
@media (max-width: 900px) { .ret-body { grid-template-columns: 1fr; } }

/* ONE SHAPE FOR EVERY JOB (maggie, 2026-08-20: "one of them is just in a border
   but other are not?? Make it look tidy"). A service used to be a bare block and
   a bespoke action a bordered box, so a household's work read as a ragged column
   of two different controls. Both are this card now: the name and the button on
   one line, what the work DOES underneath in figures, and anything you have to
   choose before pressing on its own line below that. No flavour prose - it is on
   the person's own card, and five jobs' worth of it buried the numbers. */
.ret-job {
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: .45rem .55rem;
  margin-bottom: .4rem;
}
.ret-job.betrayal { border-color: var(--text-danger); }
/* THE NAME KEEPS ITS WIDTH (maggie, 2026-09-23: "fix this UI"). Two buttons
   beside a job's name used to squeeze the name to one word per line; now the
   name asks for a real width first and the buttons wrap below it when there is
   not room for both on one line. */
.ret-job-head { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: baseline; }
.ret-job-name { flex: 1 1 11rem; min-width: 0; font-size: .74rem; color: var(--text-secondary); line-height: 1.4; }
.ret-job-head .btn { flex: 0 0 auto; }
.ret-job-ctl { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; }

/* The chips for what somebody is BESIDE their post - a teacher, a maker. */
.ret-chip.craft { color: var(--accent-gold); border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent); }

/* Hire / release on a Retinue row (2026-09-23), and the reason when hiring is shut. */
.ret-act { margin-top: .6rem; }
.ret-act .btn { font-size: .7rem; padding: .2rem .7rem; }
.ret-release { border-color: var(--text-danger); color: var(--text-danger); }
.ret-why { font-size: .66rem; color: var(--text-muted); font-style: italic; margin-top: .3rem; line-height: 1.4; }