/* Raising Home (INT-RH2 P1R DOM around the single Pixi field), 2026-09-29.
 *
 * The habitat is the screen. The shell fills the space between the shared
 * status bar and tool dock, the field fills the shell, and the Pixi ranch
 * centres itself inside at a whole-pixel scale (raisingFieldViewport.js).
 * Nothing is reserved for a readout: the resident card floats over the
 * margin when someone is picked and the detail sheet opens over everything.
 * Tokens: ui/tokens.css.
 */

.int-rh2-root,
.int-rh2-root * { box-sizing: border-box; }

.int-rh2-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: var(--c-text-1);
  font-family: var(--font-ui);
  /* A double tap on the frame must not zoom the page on a phone; the canvas
     keeps `none` for its own gestures. */
  touch-action: manipulation;
}

/* The habitat uses the full width of the screen, not a phone-width column. */
.int-rh2-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.int-rh2-field-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The lamp over the terrarium: a soft band of light behind the board, which
   sits in the middle of the frame. Drawn by CSS, under a transparent canvas. */
.int-rh2-field-frame::before {
  content: "";
  position: absolute;
  inset: 8% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c-stage-light) 45%, transparent) 50%, transparent 100%);
}

.int-rh2-field-host,
.int-rh2-field-host canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.int-rh2-field-host { position: relative; z-index: 1; touch-action: none; }

/* One native ring at the phone zoom, with the existing collapsible card.
   Additional monitor space never stretches art or invents duplicate cages. */
body[data-desktop-raising] .int-rh2-field-host {
  max-width: var(--cm-ranch-unique-width, 100%);
}
body[data-desktop-raising] .int-rh2-companion {
  left: auto;
  right: 16px;
  width: min(320px, calc(100% - 32px));
  transform: none;
}
body[data-desktop-raising] .int-rh2-companion[data-open="false"] {
  transform: translateY(14px);
}

.int-rh2-field-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--sp-6);
  color: var(--c-text-2);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  text-align: center;
}

/* ---- First-run hint ------------------------------------------------------ */
.int-rh2-hint {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  transform: translateX(-50%);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-control);
  background: var(--c-surface-glass);
  color: var(--c-text-2);
  font-size: var(--fs-body-sm);
  /* One line when it fits; a longer language or a larger reading size wraps
     inside the screen instead of running off both edges. */
  width: max-content;
  max-width: calc(100% - 32px);
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  animation: none;
}
.int-rh2-hint::before { content: "☝ "; }
.int-rh2-root[data-selection="selected"] .int-rh2-hint { display: none; }
/* One finite visual fade, shared by entry guidance and tool instructions. */
.int-rh2-hint, .cm-toolbar__tool-hint { transition: opacity .3s ease-out; }
.int-rh2-hint[data-hint-phase="fading"], .cm-toolbar__tool-hint[data-hint-phase="fading"] { opacity: 0; }
.int-rh2-hint[hidden], .cm-toolbar__tool-hint[hidden] { display: none; }
:root[data-motion="reduced"] :is(.int-rh2-hint, .cm-toolbar__tool-hint) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) :is(.int-rh2-hint, .cm-toolbar__tool-hint) { transition: none; }
}

/* ---- Resident card (someone is picked) ----------------------------------- *
 * Two rows: who (opens the record) with step/close, then the two traced
 * meters and capacity. It rises from the margin under the board, or drops
 * from the top when the resident stands where it would go. */
.int-rh2-companion {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: var(--z-card);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "portrait copy actions" "vitals vitals vitals";
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: 6px;
  width: min(calc(100% - 24px), 560px);
  padding: 8px 8px 12px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface-hud);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}
.int-rh2-companion::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 9px;
  height: 9px;
  background: var(--motif-stair) no-repeat;
}
.int-rh2-companion[data-placement="top"] { top: 12px; bottom: auto; }
/* A held care item (food, protein, cleaning, medicine) owns the field: the
   card steps aside until the item is put down. The hand is how a resident is
   touched, so its card stays; the hand's own hint over the dock yields while
   the card holds the lower edge (the pressed hand cell still says it is on). */
body[data-tool]:not([data-tool="hand"]) .int-rh2-companion[data-open="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body[data-tool="hand"]:has(.int-rh2-companion[data-open="true"][data-placement="bottom"]) .cm-toolbar__tool-hint { display: none; }
.int-rh2-companion[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(14px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.int-rh2-companion[data-open="false"][data-placement="top"] { transform: translateX(-50%) translateY(-14px); }

.int-rh2-companion__portrait {
  grid-area: portrait;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--r-control);
  background: var(--c-surface-3);
}
.int-rh2-companion__portrait img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

.int-rh2-companion__copy {
  grid-area: copy;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head more" "place more";
  align-items: center;
  column-gap: var(--sp-2);
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 2px 6px 2px 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: inherit;
  text-align: left;
}
@media (hover: hover) { .int-rh2-companion__copy:hover .int-rh2-companion__more { color: var(--c-accent-strong); } }
.int-rh2-companion__head { grid-area: head; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.int-rh2-companion__name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-title-2);
  line-height: 1.25;
  font-weight: var(--fw-heavy);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.int-rh2-companion__species {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--c-text-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.int-rh2-companion__place {
  grid-area: place;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--c-text-2);
  font-size: var(--fs-label);
}
.int-rh2-companion__ranch-icon { width: 16px; height: 16px; flex: 0 0 auto; image-rendering: pixelated; }
.int-rh2-companion__location { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-rh2-companion__more {
  grid-area: more;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--c-accent);
  font-size: var(--fs-label);
  font-weight: var(--fw-strong);
}
.int-rh2-companion__more::after { content: ""; flex: 0 0 auto; width: 6px; height: 11px; margin-left: 2px; background: currentColor; -webkit-mask: var(--icon-chevron-right) center / contain no-repeat; mask: var(--icon-chevron-right) center / contain no-repeat; }

.int-rh2-companion__actions { grid-area: actions; display: flex; align-items: center; gap: 2px; }
.int-rh2-companion__nav,
.int-rh2-companion__close {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--c-text-2);
  font-size: 22px;
  line-height: 1;
}
.int-rh2-companion__close { font-size: 24px; }
@media (hover: hover) {
  .int-rh2-companion__nav:hover,
  .int-rh2-companion__close:hover { background: var(--c-surface-3); color: var(--c-text-1); }
}

/* ---- Meters: HP and TP from the traced stat curve, capacity as a value ---- */
.int-rh2-vitals {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 6px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.int-rh2-vitals__label {
  color: var(--c-text-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
}
.int-rh2-vitals__value { margin: 0; min-width: 0; }
.int-rh2-vitals__bar {
  --meter: var(--c-stat-hp);
  position: relative;
  display: block;
  height: calc(18px * var(--text-scale));
  overflow: hidden;
  border-radius: 5px;
  background: var(--c-surface-3);
}
.int-rh2-vitals__bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--meter) 88%, white), var(--meter));
  opacity: 0.85;
  transition: width var(--dur-slow) var(--ease-out);
}
.int-rh2-vitals__bar[data-stat="tp"] { --meter: var(--c-stat-tp); }
.int-rh2-vitals__bar[data-stat="ap"] { --meter: var(--c-stat-ap); }
.int-rh2-vitals__bar[data-stat="hp"][data-low="true"] { --meter: var(--c-stat-hp-low); }
.int-rh2-vitals__num {
  position: relative;
  display: block;
  padding: 0 6px;
  color: var(--c-text-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: calc(18px * var(--text-scale));
  text-align: right;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--c-ground) 50%, transparent);
}
.int-rh2-companion > .int-rh2-vitals { grid-area: vitals; }
/* Light themes: the meter fills are tints with a solid base line, so the
   dark numbers read over the filled part and the empty track alike. */
:root:is([data-theme="clear"], [data-theme="warm"]) .int-rh2-vitals__bar::before {
  background: color-mix(in srgb, var(--meter) 42%, var(--c-surface-1));
  box-shadow: inset 0 -3px 0 var(--meter);
  opacity: 1;
}
:root:is([data-theme="clear"], [data-theme="warm"]) .int-rh2-vitals__num { text-shadow: none; }
/* Larger reading sizes: a name or a place may take a second line, and the
   meters stack one per row so their numbers are never cut. */
:root:is([data-text-scale="115"], [data-text-scale="130"]) :is(.int-rh2-companion__name, .int-rh2-companion__location) {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}
:root:is([data-text-scale="115"], [data-text-scale="130"]) .int-rh2-companion > .int-rh2-vitals {
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 4px;
}
/* The card shows HP and TP; AP (the original's constant bar) and the record
   live in the detail sheet. Capacity is a value, not a meter. */
.int-rh2-companion .int-rh2-vitals > [data-stat="ap"] { display: none; }
.int-rh2-vitals > dd[data-stat="capacity"] .int-rh2-vitals__bar { height: auto; overflow: visible; background: transparent; }
.int-rh2-vitals > dd[data-stat="capacity"] .int-rh2-vitals__bar::before { display: none; }
.int-rh2-vitals > dd[data-stat="capacity"] .int-rh2-vitals__num { padding: 0; color: var(--c-text-2); text-shadow: none; white-space: nowrap; }

/* ---- Notices: a failed save or the day's events, over the top of the field */
.int-rh2-notice {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: calc(var(--z-card) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: min(calc(100% - 24px), 440px);
  margin: 0;
  padding: 10px 14px;
  transform: translateX(-50%);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-card);
  background: var(--c-surface-hud);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  text-align: center;
  animation: rh2-drop var(--dur-base) var(--ease-out);
}
.int-rh2-notice[hidden] { display: none; }
.int-rh2-notice__text { margin: 0; }
.int-rh2-notice:has(.int-rh2-system-button:not([hidden])) { border-color: var(--c-danger-line); }
@keyframes rh2-drop { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%); } }
/* A picked resident's card at the top would sit under the notice. */
.int-rh2-root:has(.int-rh2-companion[data-open="true"][data-placement="top"]) .int-rh2-notice { top: auto; bottom: 12px; }

.int-rh2-system-button {
  min-width: 88px;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-control);
  background: var(--c-surface-2);
  color: var(--c-text-1);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-strong);
}
.int-rh2-system-button[hidden] { display: none; }

/* ---- Training labels: numbers that rise from a training cage ------------- *
 * Drawn straight over the scene art, so their ink and stroke are the same in
 * every theme: the art behind them does not change with the palette. */
.int-rh2-training-labels { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.int-rh2-training-label {
  position: absolute;
  transform: translate(-50%, -100%);
  color: #ffdcdc;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-text-stroke: 0.4px #3b0f11;
  text-shadow: 0 1px 0 #3b0f11, 0 0 6px rgba(0, 0, 0, 0.6);
}
.int-rh2-training-label[data-positive="true"] { color: #86f2d8; -webkit-text-stroke-color: #06231c; text-shadow: 0 1px 0 #06231c, 0 0 6px rgba(0, 0, 0, 0.6); }

/* ---- Detail sheet (the full record) --------------------------------------- *
 * One component: a bottom sheet on a phone, a side sheet on a tablet. */
.int-rh2-detail {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: min(82vh, 720px);
  margin: 0;
  padding: 0;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--c-line-2);
  border-bottom: 0;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--c-surface-1);
  color: var(--c-text-1);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.int-rh2-detail[open] { display: grid; animation: rh2-sheet-up var(--dur-slow) var(--ease-out); }
.int-rh2-detail::backdrop { background: var(--c-scrim); }
@keyframes rh2-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.int-rh2-detail__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3) var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--c-line-1);
}
.int-rh2-detail__head::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--c-line-3);
}
.int-rh2-detail__titles { flex: 1 1 auto; min-width: 0; }
.int-rh2-detail__name { margin: 0; font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.int-rh2-detail__species { margin: 2px 0 0; color: var(--c-text-2); font-size: var(--fs-body-sm); }
.int-rh2-detail__close {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: var(--c-surface-2);
  color: var(--c-text-1);
  font-size: 24px;
  line-height: 1;
}
.int-rh2-detail__body {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.int-rh2-detail__vitals {
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 8px;
  column-gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-card);
  background: var(--c-ground-raised);
}
.int-rh2-detail__rows { margin: 0; }
.int-rh2-detail__empty { margin: 0; color: var(--c-text-2); }
.int-rh2-detail__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line-1);
}
.int-rh2-detail__footer > .cm-screen-primary { flex: 0 1 200px; }

@media (min-width: 768px) {
  body:not([data-portrait-frame]) .int-rh2-detail {
    inset: 0 0 0 auto;
    width: min(420px, 46vw);
    height: 100%;
    max-height: none;
    border-bottom: 1px solid var(--c-line-2);
    border-right: 0;
    border-radius: var(--r-sheet) 0 0 var(--r-sheet);
    padding-top: env(safe-area-inset-top);
  }
  body:not([data-portrait-frame]) .int-rh2-detail[open] { animation-name: rh2-sheet-side; }
  body:not([data-portrait-frame]) .int-rh2-detail__head::before { display: none; }
  @keyframes rh2-sheet-side { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---- Day change, calendar, letters (application-owned lifecycle) ---------- */
.int-rh2-root:has(.int-rh2-lifecycle:not([hidden])) { z-index: var(--z-lifecycle); }
.int-rh2-lifecycle {
  position: fixed;
  inset: 0;
  z-index: var(--z-lifecycle);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom));
}
.int-rh2-lifecycle[hidden] { display: none; }
.int-rh2-lifecycle [hidden] { display: none; }
.int-rh2-lifecycle__text { margin: 0 12px 0 0; color: var(--c-text-1); font-size: var(--fs-body-sm); }

.int-rh2-day-confirm {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  width: min(calc(100vw - 32px), 340px);
  padding: var(--sp-5);
  transform: translate(-50%, -50%);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sheet);
  background: var(--c-surface-1);
  box-shadow: var(--shadow-lift);
}
.int-rh2-day-confirm__question { grid-column: 1 / -1; margin: 0 0 var(--sp-2); font-size: var(--fs-title-2); font-weight: var(--fw-heavy); text-align: center; }
.int-rh2-day-confirm .int-rh2-system-button { width: 100%; min-height: var(--control); }
.int-rh2-day-confirm .int-rh2-system-button:first-of-type { border-color: transparent; background: var(--c-accent); color: var(--c-text-on-accent); }

.int-rh2-calendar {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-6) var(--sp-4);
  border: 0;
  background: radial-gradient(70% 55% at 50% 45%, color-mix(in srgb, var(--c-stage-light) 60%, transparent), var(--c-void) 75%);
  color: var(--c-text-1);
  --season: var(--c-accent);
}
.int-rh2-calendar[hidden] { display: none; }
.int-rh2-calendar[data-season="0"] { --season: var(--c-season-spring); }
.int-rh2-calendar[data-season="1"] { --season: var(--c-season-summer); }
.int-rh2-calendar[data-season="2"] { --season: var(--c-season-autumn); }
.int-rh2-calendar[data-season="3"] { --season: var(--c-season-winter); }
.int-rh2-calendar__date {
  position: relative;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-surface-1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--season) 60%, transparent), 0 0 40px color-mix(in srgb, var(--season) 22%, transparent);
  color: var(--c-text-1);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
}
.int-rh2-calendar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: min(calc(100vw - 32px), 400px);
  padding: var(--sp-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface-1);
}
.int-rh2-calendar__day {
  min-height: 78px;
  padding: 6px;
  border-radius: var(--r-control);
  background: var(--c-ground-raised);
  color: var(--c-text-2);
  text-align: left;
}
.int-rh2-calendar__day strong { display: block; color: var(--c-text-1); font-size: calc(20px * var(--text-scale)); font-variant-numeric: tabular-nums; }
.int-rh2-calendar__day.is-today { background: color-mix(in srgb, var(--season) 16%, var(--c-surface-2)); box-shadow: inset 0 0 0 1px var(--season); }
.int-rh2-calendar__day.is-today strong { color: var(--season); }
.int-rh2-calendar__counts { display: grid; gap: 2px; margin-top: 4px; font-size: var(--fs-label); font-variant-numeric: tabular-nums; }

.int-rh2-mail-icon {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  top: 14px;
  z-index: var(--z-card);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--c-accent-line);
  border-radius: 50%;
  background: var(--c-surface-glass);
  box-shadow: var(--glow-accent);
}
.int-rh2-mail-icon::before {
  content: "";
  width: 22px;
  height: 16px;
  border: 2px solid var(--c-accent-strong);
  border-radius: 3px;
  background: linear-gradient(35deg, transparent 47%, var(--c-accent-strong) 48% 54%, transparent 55%) left / 50% 100% no-repeat,
    linear-gradient(-35deg, transparent 47%, var(--c-accent-strong) 48% 54%, transparent 55%) right / 50% 100% no-repeat;
}
.int-rh2-mail-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-danger);
  box-shadow: 0 0 0 2px var(--c-surface-1);
  /* The new-mail dot breathes; only its opacity moves, so nothing repaints. */
  animation: rh2-mail 2.4s var(--ease-in-out) infinite;
}
.int-rh2-mail-icon[hidden], .int-rh2-letter[hidden] { display: none; }
@keyframes rh2-mail { 50% { opacity: 0.35; } }

/* Letters are paper (see the opening's letter); system notices stay panels. */
.int-rh2-letter {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: min(calc(100vw - 32px), 440px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-paper);
  color: var(--c-paper-ink);
  box-shadow: var(--shadow-lift);
}
.int-rh2-letter__sender {
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  color: var(--c-paper-muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-strong);
  letter-spacing: 0.06em;
}
.int-rh2-letter__text {
  margin: 0;
  padding: 0 var(--sp-5) var(--sp-4);
  min-height: 120px;
  background: repeating-linear-gradient(180deg, transparent 0 calc(27px * var(--text-scale)), var(--c-paper-line) calc(27px * var(--text-scale)) calc(28px * var(--text-scale)));
  font-size: calc(16px * var(--text-scale));
  line-height: calc(28px * var(--text-scale));
  white-space: pre-wrap;
}
.int-rh2-letter__ack {
  justify-self: end;
  min-width: 112px;
  min-height: var(--control);
  margin: 0 var(--sp-5) var(--sp-5);
  border: 0;
  border-radius: var(--r-control);
  background: var(--c-paper-ink);
  color: var(--c-paper);
  font-weight: var(--fw-strong);
}
.int-rh2-letter__ack:disabled { opacity: 0.4; }
.int-rh2-letter[data-system="true"] { top: 36%; border: 1px solid var(--c-line-2); background: var(--c-surface-1); color: var(--c-text-1); }
.int-rh2-letter[data-system="true"] .int-rh2-letter__sender { display: none; }
.int-rh2-letter[data-system="true"] .int-rh2-letter__text { min-height: 0; padding-top: var(--sp-5); background: none; }
.int-rh2-letter[data-system="true"] .int-rh2-letter__ack { background: var(--c-accent); color: var(--c-text-on-accent); }

/* ---- Phones and short landscape cards (2026-10-15) ------------------------
 * The name is the card's headline: it gets the whole copy column. The species
 * moves under it beside the place, and 詳細 keeps only its chevron (the whole
 * copy block is the 44px button), so a seven-character name is never cut. */
@media (max-width: 520px), (max-height: 460px) {
  .int-rh2-companion__head { display: grid; gap: 0; }
  .int-rh2-companion__name { font-size: var(--fs-body); line-height: 1.3; }
  .int-rh2-companion__species { font-size: var(--fs-caption); line-height: var(--lh-caption); }
  .int-rh2-companion__more { font-size: 0; gap: 0; min-width: 16px; justify-content: center; }
}
body[data-desktop-raising] .int-rh2-companion__name { white-space: normal; overflow-wrap: anywhere; }

/* ---- Narrow phones -------------------------------------------------------- */
@media (max-width: 379px) {
  /* Every control stays 44px; the species line (it is in the record) and the
     word 詳細 (the chevron stays) give way so the name keeps its room. */
  .int-rh2-companion { padding: 8px 6px 10px 10px; column-gap: 6px; }
  .int-rh2-companion__portrait { width: 40px; height: 40px; }
  .int-rh2-companion__species { display: none; }
  .int-rh2-companion__name { font-size: var(--fs-body); }
  .int-rh2-companion__more { font-size: 0; gap: 0; }
  .int-rh2-companion__actions { gap: 0; }
  .int-rh2-vitals { column-gap: 4px; }
}

/* Reduced motion: the player's choice (data-motion on <html>, resolved from
   the setting and, when it is "system", from the OS); the media query only
   covers a page that has no data-motion yet. */
:root[data-motion="reduced"] .int-rh2-hint, :root[data-motion="reduced"] .int-rh2-mail-icon::after { animation: none; }
:root[data-motion="reduced"] .int-rh2-companion, :root[data-motion="reduced"] .int-rh2-companion[data-open="false"], :root[data-motion="reduced"] .int-rh2-companion[data-open="false"][data-placement="top"] { transform: translateX(-50%); }
:root[data-motion="reduced"] .int-rh2-detail[open], :root[data-motion="reduced"] .int-rh2-notice { animation-name: cm-fade; }
:root[data-motion="reduced"] .int-rh2-vitals__bar::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) .int-rh2-hint, :root:not([data-motion]) .int-rh2-mail-icon::after { animation: none; }
  :root:not([data-motion]) .int-rh2-companion, :root:not([data-motion]) .int-rh2-companion[data-open="false"], :root:not([data-motion]) .int-rh2-companion[data-open="false"][data-placement="top"] { transform: translateX(-50%); }
  :root:not([data-motion]) .int-rh2-detail[open], :root:not([data-motion]) .int-rh2-notice { animation-name: cm-fade; }
  :root:not([data-motion]) .int-rh2-vitals__bar::before { transition: none; }
}

/* The disclosure is landscape-only; portrait keeps its existing readout. */
.int-rh2-companion__toggle { display: none; }

/* A quiet journal entry clear of the status bar; no countdown or expiry. */
.int-rh2-discoveries {
  position:absolute;top:calc(60px + env(safe-area-inset-top));right:12px;z-index:12;
  min-height:44px;padding:8px 14px;border:1px solid #b9cbb5;border-radius:14px;
  background:#f6faedee;color:#304b3d;font-family:inherit;font-size:14px;font-weight:600;line-height:1.25;
  box-shadow:0 3px 10px #1c392014;cursor:pointer;max-width:calc(100% - 24px);
}
.int-rh2-discoveries[hidden]{display:none;}
.int-rh2-discoveries:focus-visible{outline:3px solid #398c85;outline-offset:2px;}
.int-rh2-discovery-list{max-height:40dvh;overflow:auto;overscroll-behavior:contain;}
.int-rh2-discovery-item{padding:8px 10px;border-radius:10px;background:#edf4e9;color:#304b3d;}
@media (max-height:450px){.int-rh2-discoveries{right:8px;padding:6px 10px;}}
.cm-ranch-zoom {
  position:absolute;right:12px;
  bottom:calc(var(--cm-toolbar-height, 74px) + var(--cm-raising-dock-gap, 12px) + 12px);z-index:4;
  min-width:44px;min-height:44px;border:1px solid #8eb2bb;border-radius:14px;
  background:rgba(244,252,255,.92);color:#244b57;font:600 14px system-ui;
  touch-action:manipulation;cursor:pointer;box-shadow:0 2px 8px #16344120;
}
.cm-ranch-zoom:focus-visible {outline:3px solid #008e8e;outline-offset:2px;}
.cm-ranch-zoom:disabled {opacity:.5;cursor:default;}

/* Owner 2026-10-15: the habitat fills the available screen. Readouts float
   over it instead of reserving a sidebar. Keep the existing DOM/input owners
   and native zoom adapter; these are CSS pixels, never device pixels. */
body[data-responsive-raising][data-desktop-raising] {
  --cm-raising-card: clamp(256px, 28vw, 340px);
}
body[data-responsive-raising][data-desktop-raising][data-status-bar="on"][data-tutorial-guide] {
  --cm-screen-top: var(--cm-status-bar-height, var(--hud-height));
}
body[data-responsive-raising][data-desktop-raising] .cm-status-bar[data-screen="RAISING_HOME"] {
  padding-top: max(6px, var(--safe-top));
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
}
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] {
  left: 0; right: 0; width: auto; transform: none;
  display: flex; flex-direction: column;
}
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"][hidden] { display: none; }
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__rail {
  width: 100%; max-width: none; margin: 0; flex: 0 0 auto;
}
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__cell {
  min-height: 44px;
}
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__cell-label {
  font-size: var(--fs-caption); white-space: normal;
}
/* This stays in flow and is included in the toolbar owner's ResizeObserver.
   No hint overlays a drop target, including during the hand tutorial. */
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__tool-hint {
  position: static; order: -1; transform: none; animation: none;
  width: 100%; max-width: none; margin: 0;
  max-height: 22dvh; overflow-y: auto; flex: 0 0 auto;
}
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__tool-text {
  white-space: normal; overflow: visible; overflow-wrap: anywhere;
}
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__menu {
  max-height: max(88px, var(--cm-screen-height)); overflow-y: auto;
  overscroll-behavior: contain;
}
/* Shared status/toolbar owners still bound #cm-root vertically. Removing
   the column changes only the measured host, never art/native coordinates. */
body[data-responsive-raising][data-desktop-raising] .int-rh2-root .int-rh2-field-frame {
  left: var(--safe-left); right: var(--safe-right); min-height: 0;
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-root .int-rh2-field-host {
  width: 100%; max-width: none;
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-root .int-rh2-companion,
body[data-responsive-raising][data-desktop-raising] .int-rh2-root .int-rh2-companion[data-placement="top"],
body[data-responsive-raising][data-desktop-raising] .int-rh2-root .int-rh2-companion[data-open="false"] {
  left: auto; right: calc(8px + var(--safe-right)); top: 8px; bottom: auto;
  width: min(var(--cm-raising-card), calc(100% - 16px - var(--safe-left) - var(--safe-right)));
  max-height: calc(100% - 16px);
  transform: none; overflow-y: auto; overscroll-behavior: contain;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "portrait copy" "actions actions" "vitals vitals";
  pointer-events: none;
}
/* Only actual readout controls/content receive input. The rest of the field,
   including the empty overlay space and first-run hint, remains playable. */
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion button,
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion > .int-rh2-vitals { pointer-events: auto; }
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion__actions { justify-content: flex-end; }
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion__toggle { display: grid; }
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion__toggle::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion__toggle[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion[data-expanded="false"] > .int-rh2-vitals { display: none; }
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion__name,
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion__location {
  white-space: normal; overflow: visible; overflow-wrap: anywhere;
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-companion > .int-rh2-vitals {
  grid-template-columns: auto minmax(0, 1fr); row-gap: 4px;
}
/* Guidance takes the opposite corner, never a permanent field column. */
body[data-responsive-raising][data-desktop-raising] .cm-tutorial-guidance {
  left: calc(8px + var(--safe-left)); right: auto; top: calc(var(--cm-screen-top) + 8px);
  width: min(360px, 45vw); max-height: calc(var(--cm-screen-height) - 16px);
  overflow-y: auto; overscroll-behavior: contain; flex-wrap: wrap;
  box-sizing: border-box;
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-root .int-rh2-hint {
  left: calc(8px + var(--safe-left)); right: auto; top: 8px; bottom: auto;
  transform: none; width: max-content; max-width: min(440px, calc(100% - 16px));
  max-height: calc(100% - 16px); overflow-y: auto; pointer-events: none;
}
body[data-responsive-raising][data-desktop-raising][data-tutorial-guide] .int-rh2-hint { display: none; }
body[data-responsive-raising][data-desktop-raising] .int-rh2-root .int-rh2-notice {
  left: calc(8px + var(--safe-left)); right: auto; top: auto; bottom: 8px;
  width: min(440px, calc(100% - var(--cm-raising-card) - 24px - var(--safe-left) - var(--safe-right)));
  max-height: calc(100% - 24px); overflow-y: auto; transform: none;
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-detail {
  inset: var(--safe-top) var(--safe-right) var(--safe-bottom) auto;
  width: min(420px, 50vw); height: auto; max-height: none;
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-letter {
  max-height: calc(var(--cm-screen-height) - 16px); overflow-y: auto;
}
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__tool-hint[hidden],
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__menu[hidden] { display: none; }
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__rail,
body[data-responsive-raising][data-desktop-raising] .cm-toolbar[data-mode="1"] .cm-toolbar__tool-hint {
  padding-left: max(8px, var(--safe-left)); padding-right: max(8px, var(--safe-right));
}
/* Mail stays opposite the top-right card and below onboarding guidance. */
body[data-responsive-raising][data-desktop-raising] .int-rh2-mail-icon {
  left: calc(8px + var(--safe-left)); right: auto; top: auto; bottom: 8px;
}
body[data-responsive-raising][data-desktop-raising][data-tutorial-guide]:has(.int-rh2-mail-icon:not([hidden])) .cm-tutorial-guidance {
  max-height: calc(var(--cm-screen-height) - 72px);
}
body[data-responsive-raising][data-desktop-raising] .int-rh2-root:has(.int-rh2-mail-icon:not([hidden])) .int-rh2-notice {
  bottom: 64px; max-height: calc(100% - 80px);
}

/* Raising-only overlay composition: the world fills the screen behind HUD.
   Shared bars still report their heights for UI placement and other scenes;
   they never subtract those heights from this scene's canvas. */
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) {
  --cm-raising-dock-gap: max(6px, var(--safe-bottom));
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-field-frame { left: 0; right: 0; }
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) #cm-root {
  top: 0; bottom: 0;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-status-bar {
  pointer-events: none;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-status-bar button {
  pointer-events: auto;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar[data-mode="1"] {
  left: calc(50% + (var(--safe-left) - var(--safe-right)) / 2); right: auto; bottom: var(--cm-raising-dock-gap);
  width: min(960px, calc(100% - 16px - var(--safe-left) - var(--safe-right)));
  transform: translateX(-50%); pointer-events: none;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar__rail {
  border: 1px solid var(--c-line-2); border-radius: var(--r-card);
  background: var(--c-surface-hud); box-shadow: var(--shadow-float);
  padding-bottom: 6px; pointer-events: none;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar button,
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar__menu {
  pointer-events: auto;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar[data-mode="1"] .cm-toolbar__tool-hint {
  position: absolute; left: 50%; right: auto; bottom: calc(100% + 8px);
  order: initial; transform: translateX(-50%); animation: none;
  width: max-content; max-width: min(560px, calc(100% - 12px)); margin: 0;
  max-height: min(22dvh, 120px); overflow-y: auto;
  padding: 4px 4px 4px 12px; pointer-events: none;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar__tool-text {
  white-space: normal; overflow-wrap: anywhere;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar__tool-done {
  pointer-events: auto;
}
/* Floating readouts avoid other controls, not the canvas. */
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-companion,
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-companion[data-placement="top"],
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-companion[data-open="false"] {
  top: calc(var(--cm-status-bar-height, var(--hud-height)) + var(--cm-match-notice-offset, 0px) + 8px); bottom: auto;
  max-height: calc(100% - var(--cm-status-bar-height, var(--hud-height)) - var(--cm-match-notice-offset, 0px) - var(--cm-toolbar-height, var(--dock-height)) - var(--cm-raising-dock-gap) - 32px);
  overflow-y: auto;
}
body[data-tool]:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-companion {
  max-height: calc(100% - var(--cm-status-bar-height, var(--hud-height)) - var(--cm-match-notice-offset, 0px) - var(--cm-toolbar-height, var(--dock-height)) - var(--cm-raising-dock-gap) - 104px);
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-tutorial-guidance {
  top: calc(var(--cm-status-bar-height, var(--hud-height)) + var(--cm-match-notice-offset, 0px) + 8px); bottom: auto;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-tutorial-guidance {
  max-height: calc(var(--cm-viewport-height, 100dvh) - var(--cm-status-bar-height, var(--hud-height)) - var(--cm-match-notice-offset, 0px) - var(--cm-toolbar-height, var(--dock-height)) - var(--cm-raising-dock-gap) - 32px);
}
/* Entry guidance uses a lower-left lane above the centered tool instruction.
   Its measured, wrapped height reserves a second lane only while visible;
   both hints keep their independent reading/fade deadlines. */
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-hint {
  left: calc(8px + var(--safe-left)); right: auto; top: auto;
  bottom: calc(var(--cm-toolbar-height, var(--dock-height)) + var(--cm-raising-dock-gap) + 8px + var(--cm-tool-hint-clearance, 0px));
  transform: none; text-align: left;
  max-width: min(560px, calc(100% - 16px - var(--safe-left) - var(--safe-right)));
  max-height: max(0px, calc(100% - var(--cm-status-bar-height, var(--hud-height)) - var(--cm-match-notice-offset, 0px) - var(--cm-toolbar-height, var(--dock-height)) - var(--cm-raising-dock-gap) - var(--cm-tool-hint-clearance, 0px) - 24px));
  overflow-wrap: anywhere; overflow-y: auto; pointer-events: none;
}
/* Extreme text expansion can scroll within the available lane without
   covering the status row. Only this text box, never the field, owns input. */
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-hint[data-scroll="true"] {
  pointer-events: auto; overscroll-behavior: contain;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-mail-icon {
  top: auto; bottom: calc(var(--cm-toolbar-height, var(--dock-height)) + var(--cm-raising-dock-gap) + 12px);
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-notice {
  bottom: calc(var(--cm-toolbar-height, var(--dock-height)) + var(--cm-raising-dock-gap) + 12px);
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-root:has(.int-rh2-mail-icon:not([hidden])) .int-rh2-notice {
  bottom: calc(var(--cm-toolbar-height, var(--dock-height)) + var(--cm-raising-dock-gap) + 70px);
}
/* Tool instructions retain the centered dock anchor at every width. */
body[data-desktop-raising][data-tool]:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-companion {
  max-height: max(130px, calc(100% - var(--cm-status-bar-height, var(--hud-height)) - var(--cm-match-notice-offset, 0px) - var(--cm-toolbar-height, var(--dock-height)) - var(--cm-raising-dock-gap) - 104px));
}

/* Menus must remain reachable on short phones and at enlarged text sizes. */
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar[data-mode="1"] .cm-toolbar__menu {
  max-height: max(44px, calc(var(--cm-viewport-height, 100dvh) - var(--cm-status-bar-height, var(--hud-height)) - var(--cm-match-notice-offset, 0px) - var(--cm-toolbar-height, var(--dock-height)) - var(--cm-raising-dock-gap) - 24px));
  overflow-y: auto; overscroll-behavior: contain;
}
/* The tutorial already carries the first-run instruction. Avoid two bubbles
   sharing the same top corner on portrait phones. */
body[data-tutorial-guide]:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .int-rh2-hint { display: none; }
/* A long translated hint is itself a scroll control; only its visible text
   region receives the gesture, not the empty overlay surrounding it.
   Its viewport uses the card's same 120px cap, minus 16px for insets. */
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-toolbar__tool-text {
  max-height: max(32px, min(104px, calc(22dvh - 16px))); overflow-y: auto;
  pointer-events: auto; overscroll-behavior: contain;
}

/* Raising HUD: keep currency glyphs opaque and readable over the ranch,
   without the header rule or currency plate. Hit targets remain unchanged. */
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-status-bar[data-screen="RAISING_HOME"] {
  border-bottom: 0;
  box-shadow: none;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-status-bar__currencies {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) :is(.cm-status-bar__bits-value, .cm-status-bar__diamond-text) {
  text-shadow: -1px -1px 0 var(--c-ground), 1px -1px 0 var(--c-ground), -1px 1px 0 var(--c-ground), 1px 1px 0 var(--c-ground), 0 1px 2px rgb(0 0 0 / 40%);
}
body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])) .cm-status-bar__currency-icon {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 65%)) drop-shadow(0 -1px 1px rgb(255 255 255 / 65%));
}

/* Alternate-form choice: independent flow layout, never calendar overlay buttons. */
.int-rh2-evolution-choice {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  width: min(calc(100vw - 32px), 560px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--sp-5);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sheet);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  box-shadow: var(--shadow-lift);
}
.int-rh2-evolution-choice__title {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  font-size: var(--fs-title-2);
  font-weight: var(--fw-heavy);
}
.int-rh2-evolution-choice__option {
  position: static;
  inset: auto;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: var(--control);
  padding: var(--sp-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sheet);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  font: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.int-rh2-evolution-choice__option:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .int-rh2-evolution-choice { grid-template-columns: minmax(0, 1fr); }
}

/* Match notices float over the field, not in a new full-width HUD row.
   Move only readout overlays clear of the 44px chip; canvas bounds stay intact. */
@media (max-width: 600px) {
  body:has(#cm-root[data-active-screen="RAISING_HOME"]:not([hidden])):has(.cm-status-bar__matches:not([hidden])) { --cm-match-notice-offset: 50px; }
}


/* Asset recovery remains operable while the world is inert for a lifecycle. */
.int-rh2-root > .int-rh2-resident-assets--recovery { z-index:calc(var(--z-lifecycle) + 1); }