/* ═══════════════════════════════════════════════════════════════════════
   homestead-rooms.css — b227
   The House screen's Rooms tab, and the homestead half of the shared
   room-modal themes.

   SCOPE, deliberately narrow. This sheet owns exactly two things:
     1. `.hh-rooms` / `.hh-room*` — the room grid, which is new and has no
        prior art anywhere else in the game.
     2. The homestead's `[data-room-theme]` values on the SHARED room modal.

   It does NOT restyle the modal itself. `src/styles/clan-seat.css` owns
   `.hr-room-*` and `.hr-cs-*` and is held by another agent; the room modal is
   a published seam and the entire point of consuming it unchanged is that the
   two pillars keep looking like one game. Everything below either targets a
   class this sheet invented or adds a theme value the seam already reads.

   COLOUR: no literals. Every value is a token from theme-cozy.css or a
   color-mix off one, per the standing hard rule. The grid inherits the
   castle's own "lit vs ghosted vs dim" language rather than inventing a
   third vocabulary for the same three states.

   TYPE: nothing here is below 14.5px. The b225 floor guard is 13.5px and a
   parallel agent may be raising it to 14.5 — built above both so this sheet
   cannot be what makes that guard go red.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the grid ──────────────────────────────────────────────────────────
   Two columns on a desktop card, one on a phone. `auto-fill` rather than a
   fixed count so the eight rooms of today and the eleven of Phase 3 lay out
   without anyone editing a number here. */
.hh-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
}

/* THE ROOM CARD. A button, not a div — this is navigation, and a room has to
   be reachable by keyboard and announce itself to a screen reader. The whole
   card is the target because a card with one small hit area inside it is a
   row wearing a costume. */
.hh-room {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--surface-2, var(--card, transparent));
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.hh-room:hover,
.hh-room:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-2);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .7);
}
.hh-room:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hh-room { transition: none; }
  .hh-room:hover, .hh-room:focus-visible { transform: none; }
}

/* The scene. Fixed aspect so eight rooms make an even grid regardless of what
   each interior draws. */
.hh-room-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 620 / 190;
  overflow: hidden;
  background: var(--scene-ridge-far, var(--surface-3, transparent));
  border-bottom: 1px solid var(--line-soft);
}
.hh-room-art .hr-room-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hh-room-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hh-room-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 11px;
  min-width: 0;
}
.hh-room-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.hh-room-nm {
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── THE OWNERSHIP BADGE ────────────────────────────────────────────────
   The reason this whole file exists. Tyler could not tell that the Forge was
   his, so ownership is now a gilt slab with the level in it, top-right, the
   highest-contrast object on the card — and it is the ONLY thing drawn in
   that treatment, so nothing competes with it. */
.hh-room-badge {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: 14.5px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  /* b229 (Tyler): the pill was gilt-on-gilt and unreadable. Two causes:
     --ink-inv resolved light, AND theme-cozy's #panel-house color blanket
     (b222) forces var(--ink) !important — its carve-out list predates the
     homestead's .hh-* classes. Gilt fills take dark ink; !important is the
     only way past the blanket, same as board-and-shop.css / clan-seat.css. */
  color: #241a06 !important;
  font-weight: 700;
  background: var(--gold-2);
  white-space: nowrap;
}
/* b229: the base rule above still loses to theme-cozy's #panel-house color
   blanket — two !important rules fall to specificity and a lone class can't
   beat an id. Match the blanket's id+class weight; homestead-rooms.css loads
   after theme-cozy.css, so the tie breaks our way. */
body[data-theme="hearthlight"] #panel-house .hh-room-badge,
#panel-house .hh-room-badge { color: #241a06 !important; }
.hh-room-badge i { font-style: normal; opacity: .78; }
.hh-room-badge.is-lock {
  background: transparent;
  color: var(--ink-3);
  font-size: 15px;
  padding: 2px 0 0;
}

.hh-room-rung {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--gold-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hh-room-rung.is-open,
.hh-room-rung.is-lock { color: var(--ink-3); font-style: italic; }
.hh-room-eff {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.hh-room-foot {
  margin-top: 2px;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "ready" is the only state that earns colour in the footer — it is the one
   that is asking the player to do something. */
.hh-room-foot.is-ready { color: var(--gold-2); }

/* ── the three states ─────────────────────────────────────────────────
   Same language as the castle: built rooms are LIT, unbuilt ones are an
   outline you can see through, locked ones are dim. A player who has learned
   one pillar's screen has learned the other's — which is the entire argument
   for reusing the seam in the first place. */
.hh-room.is-owned {
  border-color: color-mix(in srgb, var(--gold-2) 42%, var(--line-soft));
  background: color-mix(in srgb, var(--gold-2) 5%, var(--surface-2, transparent));
}
.hh-room.is-owned .hh-room-nm { color: var(--gold-2); }

/* Unbuilt-but-available: the castle's dashed "there is a plot here" idiom. */
.hh-room.is-open { border-style: dashed; border-color: var(--line-soft); }
.hh-room.is-open .hh-room-art { opacity: .58; filter: saturate(.5); }

.hh-room.is-locked { opacity: .5; }
.hh-room.is-locked .hh-room-art { filter: grayscale(1) brightness(.8); }

/* A fully built room says so without a badge change — the /N in the badge
   already reads 3/5 vs 5/5, and a second signal for the same fact is noise.
   The one thing max earns is a steady gilt edge. */
.hh-room.is-max { border-color: var(--gold-2); }

/* ── the room modal, homestead themes ─────────────────────────────────
   clan-seat.css defines six castle themes on `.hr-room-wrap[data-room-theme]`;
   these are the eight homestead ones. Only the interior LIGHT changes — the
   frame, the type and the ladder are the shared component's and stay untouched,
   because the moment a pillar restyles the shared modal there are two modals
   again and the seam has failed. */
.hr-room-wrap[data-room-theme="hearth"],
.hr-room-wrap[data-room-theme="forge"] {
  box-shadow: 0 24px 64px -18px rgba(0, 0, 0, .86), inset 0 80px 120px -60px var(--scene-litglow);
}
.hr-room-wrap[data-room-theme="cellar"],
.hr-room-wrap[data-room-theme="shrine"] {
  box-shadow: 0 24px 64px -18px rgba(0, 0, 0, .86), inset 0 46px 76px -60px var(--scene-glow-2);
}
.hr-room-wrap[data-room-theme="workshop"],
.hr-room-wrap[data-room-theme="library"],
.hr-room-wrap[data-room-theme="trophy"] {
  box-shadow: 0 24px 64px -18px rgba(0, 0, 0, .86), inset 0 60px 90px -60px var(--scene-glow-2);
}
/* The garden is the one room that is not an interior — it is lit from above,
   so it takes the sky glow rather than a firelight wash. */
.hr-room-wrap[data-room-theme="garden"] {
  box-shadow: 0 24px 64px -18px rgba(0, 0, 0, .86), inset 0 50px 80px -60px var(--scene-glow-1);
}

/* ── INTERIOR LIGHT ───────────────────────────────────────────────────
   The scenes were unreadable on the first pass and the reason is measurable,
   not a matter of taste: in the dark theme the back wall is `--scene-ridge-far`
   (#1a150f) and the furniture is `--scene-build` (#090705). Those are eleven
   points apart in luminance, so a silhouette drawn in one against the other is
   a black shape on a black wall — every room came out as an orange blob and
   some rectangles.

   The castle interiors avoid this by carrying a lot of small `hrcs-lit`
   accents that do the actual drawing. The homestead rooms get the same
   treatment plus two structural fixes, both token-derived and scoped to the
   eight homestead themes so the castle's own rooms are untouched:

     1. the wall is lifted toward the room's own firelight, so it is genuinely
        the lighter surface and the furniture reads as a silhouette against it
        (the inversion the castle wave had to discover by looking);
     2. furniture takes a warm rim, which is what an edge catching a fire
        actually looks like and what separates two dark shapes that overlap.  */
.hh-rooms .hr-room-svg .hrcs-wall-2,
.hr-room-wrap[data-room-theme="hearth"]   .hr-room-svg .hrcs-wall-2,
.hr-room-wrap[data-room-theme="garden"]   .hr-room-svg .hrcs-wall-2,
.hr-room-wrap[data-room-theme="workshop"] .hr-room-svg .hrcs-wall-2,
.hr-room-wrap[data-room-theme="cellar"]   .hr-room-svg .hrcs-wall-2,
.hr-room-wrap[data-room-theme="forge"]    .hr-room-svg .hrcs-wall-2,
.hr-room-wrap[data-room-theme="library"]  .hr-room-svg .hrcs-wall-2,
.hr-room-wrap[data-room-theme="shrine"]   .hr-room-svg .hrcs-wall-2,
.hr-room-wrap[data-room-theme="trophy"]   .hr-room-svg .hrcs-wall-2 {
  fill: color-mix(in srgb, var(--scene-lit) 14%, var(--scene-ridge-far));
}
.hh-rooms .hr-room-svg .hrcs-furn > *,
.hr-room-wrap[data-room-theme="hearth"]   .hr-room-svg .hrcs-furn > *,
.hr-room-wrap[data-room-theme="garden"]   .hr-room-svg .hrcs-furn > *,
.hr-room-wrap[data-room-theme="workshop"] .hr-room-svg .hrcs-furn > *,
.hr-room-wrap[data-room-theme="cellar"]   .hr-room-svg .hrcs-furn > *,
.hr-room-wrap[data-room-theme="forge"]    .hr-room-svg .hrcs-furn > *,
.hr-room-wrap[data-room-theme="library"]  .hr-room-svg .hrcs-furn > *,
.hr-room-wrap[data-room-theme="shrine"]   .hr-room-svg .hrcs-furn > *,
.hr-room-wrap[data-room-theme="trophy"]   .hr-room-svg .hrcs-furn > * {
  stroke: var(--scene-rim);
  stroke-width: 1.1;
}
/* The floor is the near surface and should fall away from the wall, or the
   room reads as a flat backdrop with objects pasted on it. */
.hh-rooms .hr-room-svg .hrcs-floor,
.hr-room-wrap[data-room-theme="hearth"]   .hr-room-svg .hrcs-floor,
.hr-room-wrap[data-room-theme="garden"]   .hr-room-svg .hrcs-floor,
.hr-room-wrap[data-room-theme="workshop"] .hr-room-svg .hrcs-floor,
.hr-room-wrap[data-room-theme="cellar"]   .hr-room-svg .hrcs-floor,
.hr-room-wrap[data-room-theme="forge"]    .hr-room-svg .hrcs-floor,
.hr-room-wrap[data-room-theme="library"]  .hr-room-svg .hrcs-floor,
.hr-room-wrap[data-room-theme="shrine"]   .hr-room-svg .hrcs-floor,
.hr-room-wrap[data-room-theme="trophy"]   .hr-room-svg .hrcs-floor {
  fill: color-mix(in srgb, var(--scene-lit) 6%, var(--scene-ridge-near));
}

/* ── the ladder rows, homestead additions ─────────────────────────────
   The seam injects `effect` as raw HTML and escapes everything else, which is
   the documented way to add a marker without the shared renderer learning a
   new state. `is-locked` / `is-next` are the component's own and are NOT
   restyled here. */
.hh-rung-nm {
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--ink);
}
.hr-room-rung.is-locked .hh-rung-nm { color: var(--ink-3); }
.hh-rung-eff {
  display: block;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
/* A payload that is specced but deliberately not shipped yet. Stated in the
   ladder, in the room's own words, rather than silently dropped (which loses
   the design) or falsely promised (which is a ghost bonus — the exact thing
   this wave exists to retire). Deliberately the quietest text on the row. */
.hh-rung-resv {
  display: block;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-3);
  font-style: italic;
  opacity: .85;
}

/* An owned rung is a receipt, not an offer: it keeps its name and its effect,
   loses its price, and gains the one word that says you already did this. */
.hh-rung-owned {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--ink-inv, var(--bg-0));
  background: var(--gold-2);
  vertical-align: 1px;
}

/* ── COSTS ARE READ, NOT DECODED ──────────────────────────────────────
   Tyler, on a screenshot of the Workshop row: "It's hard to see what is
   actually required for these upgrades... it should be bigger and either have
   visible text or hover text."

   So every price on this screen is named text at 14.5px or above, with the
   met/short answer carried in colour so nobody has to subtract, and a hover
   naming the item and what you hold. `.hh-cost` is emitted by both the card
   and the legacy House rows (via _costPart), so one rule covers both. */
.hh-room-cost {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.hh-room-cost > i { font-style: normal; color: var(--ink-3); opacity: .5; }

.hh-cost {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14.5px;
  line-height: 1.35;
  white-space: nowrap;
  cursor: help;                 /* there IS hover text — say so */
}
.hh-cost b { font-variant-numeric: tabular-nums; font-weight: 700; }
/* Met and short are the two answers the row already knows. `--good` / `--red`
   are the project's own semantic tokens; no literals enter here. */
.hh-cost.is-met   { color: var(--green, var(--gold-2)); }
.hh-cost.is-short { color: var(--red, var(--ink-3)); }
.hh-cost .hr-cost-art { flex: 0 0 auto; }
/* b355 — an item gate (blueprint) sits in the same strip as the costs so the
   card states EVERY requirement, but it is not the same kind of thing: costs
   are grindable, a blueprint is a place you have to go. The dotted underline
   is the tell that this chip's hover carries the source. Same met/short
   colours as any cost, inherited — no new colour enters the card. */
.hh-cost-gate { text-decoration: underline dotted; text-underline-offset: 3px; }

/* The legacy House rows (Plot tab, and the rooms fallback) run their costs
   inline inside a `.shop-row .info span`, which is set small elsewhere. The
   requirement text must clear the floor there too. */
#house-panel .shop-row .hh-cost { font-size: 14.5px; }

/* The shared modal's ladder prices. clan-seat.css sets `.hr-cs-meta` and
   `.hr-cs-qty` at 13.5px, which is the OLD floor; this raises them to 14.5
   for homestead rooms only — the component keeps its own type everywhere
   else, because restyling the shared modal for one pillar is how two pillars
   stop looking like one game. Selected via the eight homestead theme values,
   which are the one pillar-specific hook the seam publishes. */
.hr-room-wrap[data-room-theme="hearth"]   .hr-cs-meta,
.hr-room-wrap[data-room-theme="garden"]   .hr-cs-meta,
.hr-room-wrap[data-room-theme="workshop"] .hr-cs-meta,
.hr-room-wrap[data-room-theme="cellar"]   .hr-cs-meta,
.hr-room-wrap[data-room-theme="forge"]    .hr-cs-meta,
.hr-room-wrap[data-room-theme="library"]  .hr-cs-meta,
.hr-room-wrap[data-room-theme="shrine"]   .hr-cs-meta,
.hr-room-wrap[data-room-theme="trophy"]   .hr-cs-meta {
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
}
/* The b217 checklist treatment the spec's §5 descriptor asks for: the item's
   own name, your count over the needed count, and a met/short state readable
   without parsing the numbers. `is-full` is the component's own "met" class. */
.hr-room-wrap[data-room-theme="hearth"]   .hr-cs-qty,
.hr-room-wrap[data-room-theme="garden"]   .hr-cs-qty,
.hr-room-wrap[data-room-theme="workshop"] .hr-cs-qty,
.hr-room-wrap[data-room-theme="cellar"]   .hr-cs-qty,
.hr-room-wrap[data-room-theme="forge"]    .hr-cs-qty,
.hr-room-wrap[data-room-theme="library"]  .hr-cs-qty,
.hr-room-wrap[data-room-theme="shrine"]   .hr-cs-qty,
.hr-room-wrap[data-room-theme="trophy"]   .hr-cs-qty {
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  color: var(--red, var(--ink-3));
}
.hr-room-wrap[data-room-theme="hearth"]   .hr-cs-qty.is-full,
.hr-room-wrap[data-room-theme="garden"]   .hr-cs-qty.is-full,
.hr-room-wrap[data-room-theme="workshop"] .hr-cs-qty.is-full,
.hr-room-wrap[data-room-theme="cellar"]   .hr-cs-qty.is-full,
.hr-room-wrap[data-room-theme="forge"]    .hr-cs-qty.is-full,
.hr-room-wrap[data-room-theme="library"]  .hr-cs-qty.is-full,
.hr-room-wrap[data-room-theme="shrine"]   .hr-cs-qty.is-full,
.hr-room-wrap[data-room-theme="trophy"]   .hr-cs-qty.is-full {
  color: var(--green, var(--gold-2));
}

/* ── mobile ───────────────────────────────────────────────────────────
   The project's standard breakpoint (portrait phones AND landscape phones).
   One column, and the scene gets shorter because on a phone the card's job is
   the badge and the name, not the furniture. */
@media (max-width: 540px), (max-height: 540px) and (max-width: 1024px) {
  .hh-rooms { grid-template-columns: 1fr; gap: 8px; }
  .hh-room-art { aspect-ratio: 620 / 132; }
  .hh-room-txt { padding: 9px 11px 10px; }
  /* The cost stays named text on a phone — it is the one line that must never
     degrade to an icon and a number, because a phone is where a tooltip is
     least reachable. It wraps instead. */
  .hh-room-cost { gap: 3px 6px; }
}