/* ===========================================================================
   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.
   ========================================================================== */

/* THE MANUSCRIPT LOOK (2026-10-01, maggie: "redesign it so it matches the new
   UI style"). The rows are RULED ENTRIES on the page rather than boxes inside
   boxes: a gilt hairline under each person, a face in the gilt arch (chat.css
   .chat-frame / .chat-face), the name in the display face's small caps, the
   style in italic, what they are as gilt rubric words, and the prices in the
   book face. An open row lies on a small leaf of vellum. */

/* A court's rubric: the place, whether you are here, how many you know. */
.ret-region {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .7rem;
  margin: 0 0 .5rem; padding: 0 0 .4rem;
  background: var(--gilt-rule);
}
.ret-region-name {
  font-family: var(--font-display); font-variant: small-caps; font-weight: 500;
  font-size: 1.3571rem; letter-spacing: .08em; color: var(--text-primary);
}
.ret-region.here .ret-region-name { color: var(--accent-gold); }
.ret-region-here {
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-text);
  color: var(--text-muted);
}
.ret-region-here.on { color: var(--accent-gold); }
.ret-region-count {
  margin-left: auto;
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-small);
  font-variant-numeric: oldstyle-nums; color: var(--text-muted);
}

.ret-section-head {
  display: flex; align-items: center; gap: .7rem;
  margin: 1.1rem 0 .55rem;
  font-family: var(--font-display); font-variant: small-caps; font-weight: 500;
  font-size: var(--fs-text); letter-spacing: .12em; text-transform: lowercase;
  color: var(--gild-ink);
}
.ret-section-head .ret-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gild-faint), transparent); }
.ret-section-head .ret-count {
  font-family: var(--font-serif); font-variant-numeric: oldstyle-nums tabular-nums;
  letter-spacing: 0; color: var(--text-muted);
}

.ret-row {
  border-bottom: 1px solid var(--gild-faint);
  background: transparent;
  overflow: hidden;
}
.ret-row.open {
  background: var(--leaf);
  border: 1px solid var(--gild-faint);
  border-radius: 2px;
  box-shadow: var(--vellum-shadow);
  margin: .3rem 0 .5rem;
}

.ret-head {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .35rem;
  cursor: pointer;
}
.ret-row.open .ret-head { padding: .6rem .7rem; }
@media (hover: hover) { .ret-head:hover { background: color-mix(in srgb, var(--accent-gold) 5%, transparent); } }

.ret-arch { flex: none; display: block; }
.ret-arch .chat-frame { display: block; width: 54px; padding: 2px; border-radius: 27px 27px 3px 3px; box-shadow: 0 1px 4px color-mix(in srgb, #000 40%, transparent); }
.ret-arch .chat-face { width: 50px; height: 66px; border-radius: 25px 25px 2px 2px; }

.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; display: flex; flex-direction: column; gap: .05rem; overflow: hidden; }
.ret-name {
  font-family: var(--font-display); font-variant: small-caps;
  font-size: 1.2143rem; font-weight: 500; letter-spacing: .05em; line-height: 1.15;
  color: var(--text-primary);
}
.ret-title {
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-text);
  line-height: 1.3; color: var(--text-secondary);
}
/* What they are, beside their post: gilt rubric words, set off by a point.
   Every word carries its point in front, and the box is pulled left by one
   point's width, and .ret-who clips it, so the point that would open a line - the first,
   or one that wrapped - is hidden. */
.ret-chips { display: flex; flex-wrap: wrap; margin: .15rem 0 0 -.9rem; }
.ret-chip {
  font-family: var(--font-display); font-variant: small-caps; text-transform: lowercase;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: .1em;
  color: var(--gild-ink);
}
.ret-chip::before { content: '\00B7'; display: inline-block; width: .9rem; text-align: center; color: var(--text-muted); }
.ret-chip.role { color: var(--accent-gold); }
.ret-chip.office { color: var(--accent-violet); }

/* The three meters, small enough to sit in a row and still be read: the name
   in small caps, the shared thin bar (bars.css), the figure (2026-10-02). */
.ret-meters { flex: 0 0 auto; display: none; flex-direction: column; gap: .2rem; }
.ret-meter { display: grid; grid-template-columns: 5.6rem 64px 1.8rem; align-items: center; gap: .45rem; }
.ret-meter .l {
  font-family: var(--font-display); font-variant: small-caps; text-transform: lowercase;
  font-size: var(--fs-micro); letter-spacing: .08em; line-height: 1.1;
  color: var(--text-muted); text-align: right; white-space: nowrap;
}
.ret-meter .bar-track { flex: none; }
.ret-meter .n {
  text-align: right;
  font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text-muted);
}
.ret-meter.friendship .n { color: var(--accent-gold); }
.ret-meter.love .n { color: var(--rubric); }

/* The price and the wage, in the book face. */
.ret-cost { flex: 0 0 auto; text-align: right; min-width: 6.5rem; font-family: var(--font-serif); }
.ret-cost .state, .ret-served .state {
  font-family: var(--font-display); font-variant: small-caps; text-transform: lowercase;
  font-size: var(--fs-text); letter-spacing: .1em; color: #6a9a5b;
}
.ret-cost .price {
  font-family: var(--font-serif); font-size: 1.2143rem; font-weight: 600;
  font-variant-numeric: oldstyle-nums; color: var(--accent-gold);
}
.ret-cost .moon {
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-small);
  font-variant-numeric: oldstyle-nums; color: var(--text-muted);
}

/* An open row says what they cost beside its own hire button, so the head
   stops saying it a second time. */
.ret-row.open .ret-head .ret-cost { display: none; }

.ret-chev { flex: 0 0 auto; color: var(--gild-ink); font-size: var(--fs-micro); transition: transform .15s; }
.ret-row.open .ret-chev { transform: rotate(180deg); }

.ret-body { display: none; padding: 0 .8rem .8rem; border-top: 1px dotted var(--gild-faint); }
.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; }
/* the body is in the book face; the price and wage as gold figures */
.ret-body, .npc-card-price, .npc-card-keeps { font-family: var(--font-serif); }
.ret-fig {
  font-family: var(--font-serif); font-size: 1.2143rem; font-weight: 600; line-height: 1;
  font-variant-numeric: oldstyle-nums; color: var(--accent-gold);
}
.ret-fig-label { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-small); color: var(--text-muted); }
.ret-label {
  font-family: var(--font-display); font-variant: small-caps; text-transform: lowercase;
  font-size: var(--fs-text); font-weight: 500; letter-spacing: .1em;
  color: var(--gild-ink); margin: 0 0 .3rem;
}
.ret-served {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  border-left: 2px solid color-mix(in srgb, var(--status-online) 60%, transparent);
  padding: .2rem .6rem; margin: .1rem 0 .7rem;
}
.ret-served .btn { font-size: var(--fs-small); padding: .15rem .6rem; margin-left: auto; }

/* == The card's chips and skill rows (2026-10-02, "make it more visual").
   A chip is a short fact in a hairline frame; its colour says what kind:
   gold for coin, green and red for what moves a price, violet for a plot. */
.ret-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; }
.ret-tag {
  display: inline-flex; align-items: baseline; gap: .25rem;
  padding: .05rem .45rem;
  border: 1px solid var(--gild-faint); border-radius: var(--radius);
  font-family: var(--font-serif); font-size: var(--fs-fine); font-style: normal;
  line-height: 1.45; letter-spacing: 0; text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-gold) 4%, transparent);
}
.ret-tag.gold, .ret-tag.gain, .ret-tag.item {
  color: var(--accent-gold);
  border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
}
.ret-tag.good { color: var(--status-online); border-color: color-mix(in srgb, var(--status-online) 45%, transparent); }
.ret-tag.bad  { color: var(--text-danger);   border-color: color-mix(in srgb, var(--text-danger) 45%, transparent); }
.ret-tag.plot { color: var(--accent-violet); border-color: color-mix(in srgb, var(--accent-violet) 45%, transparent); }
.ret-tag.gain { font-weight: 600; white-space: nowrap; }
/* A materials chip sits inline after a job's name. */
.ret-job-name .ret-tag { font-size: var(--fs-micro); margin-left: .15rem; }

/* A skill, as the Duty & Leisure page sets one (routine.css .rt-skill): the
   name in the book face, YOUR rank as five lozenges, the gain in a chip. */
.ret-skill {
  display: grid; grid-template-columns: minmax(0, 10rem) auto auto; justify-content: start;
  align-items: center; gap: .55rem;
  margin: .3rem 0 0;
  font-family: var(--font-serif); font-size: var(--fs-small); color: var(--text-primary);
}
.ret-skill-name { min-width: 0; line-height: 1.25; }
.ret-pips { margin: 0; }
.ret-out { margin-top: .1rem; }
.ret-out .ret-tags { margin-top: .25rem; }
.ret-perk-line { font-size: var(--fs-fine); font-style: italic; color: var(--text-muted); line-height: 1.45; margin-top: .3rem; }
.npc-card-keeps.bare { margin: 0 0 .2rem; }

/* What they cost: the two gold figures side by side. */
.ret-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.1rem; }
.ret-price-fig { display: inline-flex; align-items: baseline; gap: .3rem; }
.npc-card-price { margin-top: .45rem; }
.npc-card-price.bare { margin-top: .75rem; padding-top: .6rem; border-top: 1px dotted var(--gild-faint); }

/* The private note, folded until it is wanted. */
.ret-note { margin-top: .7rem; }
.ret-note > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.ret-note > summary::-webkit-details-marker { display: none; }
.ret-note > summary::before { content: '\25B8'; font-size: var(--fs-micro); color: var(--gild-ink); transition: transform .15s; }
.ret-note[open] > summary::before { transform: rotate(90deg); }
.ret-note textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: .3rem;
  background: var(--bg-surface); border: 1px solid var(--gild-faint); border-radius: var(--radius);
  color: var(--text-primary); padding: .3rem; font-size: var(--fs-fine); font-family: inherit; resize: vertical;
}

/* 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 { gap: .55rem; padding-left: .15rem; padding-right: .15rem; }
  .ret-meters { display: none; }
  .ret-cost { min-width: 0; max-width: 6.5rem; }
  .ret-arch .chat-frame { width: 46px; border-radius: 23px 23px 3px 3px; }
  .ret-arch .chat-face { width: 42px; height: 56px; border-radius: 21px 21px 2px 2px; }
}
/* 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. */
/* A ruled entry, not a box in a box (2026-10-01): a dotted gilt line under
   each job; a betrayal keeps its red, as a rule down its left edge. */
.ret-job {
  border-bottom: 1px dotted var(--gild-faint);
  padding: .45rem .1rem;
}
.ret-job.betrayal { border-left: 2px solid var(--text-danger); padding-left: .5rem; }
/* 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: var(--fs-small); 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: var(--fs-small); padding: .2rem .7rem; }
.ret-release { border-color: var(--text-danger); color: var(--text-danger); }
.ret-why { font-size: var(--fs-fine); color: var(--text-muted); font-style: italic; margin-top: .3rem; line-height: 1.4; }