/* engine/styles/home_map.css — v0.4.0 (r4-4). The map home's own rules, scoped under
 * `.hmv-*` / `#home-map` / `#home-view-toggle` so nothing here can collide with engine.css or
 * a corpus's own stylesheet (the same discipline sync.css's header documents for `.sync-home`).
 * Ported from docs/design/home_r4/home_r4.css (Vision r4-3, signed mock, L-69/B-1) — the class
 * names differ (`hmv-*` here, the mock's own short names there) because this file styles the
 * live DOM views/home_map.js actually builds, not the mock's static pages; the values (sizes,
 * radii, the ring/card/tray/index rules) are carried over unchanged. Every colour below is
 * either an existing `--tc-*`/`--bm-*` token (already corpus-supplied, engine_split.md §4) or a
 * data-driven inline custom property (`--c`/`--cd`, a region's own colour, set per element in
 * JS) — no corpus literal. Inert for chunqiu: this file is never linked from an index.html
 * whose `config.home.mode` isn't "map", and every selector here is scoped under ids/classes
 * `views/home_map.js` alone creates. */

#home-view-toggle {
  display: inline-flex;
  border: 1.5px solid var(--tc-ink);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 10px;
}
#home-view-toggle button {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  font: 600 14.5px/1 var(--tc-sans, sans-serif);
  color: var(--tc-ink);
  background: var(--tc-surface-alt);
  border: 0;
  cursor: pointer;
}
#home-view-toggle button + button { border-left: 1.5px solid var(--tc-ink); }
#home-view-toggle button[aria-pressed="true"] { background: var(--tc-ink); color: var(--tc-surface-alt); }
#home-view-toggle button:focus-visible { outline: 3px solid var(--tc-accent); outline-offset: -3px; }

.hmv-summary { margin: 0 0 10px; font: 12px/1.4 var(--tc-mono, monospace); color: var(--tc-ink-soft); }

/* Full-bleed (Vision r4-3 §9.1's own first sign-off line, "full-bleed base map"): break out of
 * `main`'s `max-width`/`--content-pad` (engine.css) so the stage's rendered width is the actual
 * viewport width the placement rule (`views/home_map.js`'s `computeDesktopLayout`/
 * `computeMobileLayout`) is keyed to — 960/1024/1280/1440/1920 desktop, 360/390/430/768 phone,
 * per §7.8's own width list. Without this, `main`'s own padding/max-width leaves the stage's
 * `clientWidth` short of the viewport (measured live in scratch: 1201.66px stage at a 1280px
 * viewport), which is still a valid width for the algorithm to run at — it just silently isn't
 * the width the acceptance battery's own numbers were measured against. The classic
 * negative-margin break-out; `100vw` is safe here because `.hmv-stagewrap` carries no vertical
 * scrollbar-affecting content wider than the viewport on the axis that matters (horizontal). */
.hmv-stagewrap {
  position: relative; border-block: 1px solid var(--tc-line); overflow-x: auto;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.hmv-stage { position: relative; width: 100%; margin: 0 auto; }
.hmv-bm { line-height: 0; }
.hmv-bm svg { display: block; width: 100%; height: auto; }
.hmv-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; }

.hmv-m {
  position: absolute; width: 0; height: 0; text-decoration: none; color: inherit;
}
.hmv-disc {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c, #767676); color: #fff; box-shadow: 0 0 0 1.5px var(--tc-surface-alt);
}
.hmv-m.hollow .hmv-disc {
  background: var(--tc-surface-alt); color: var(--c, #767676);
  box-shadow: inset 0 0 0 2px var(--c, #767676), 0 0 0 1.5px var(--tc-surface-alt);
}
.hmv-disc .hmv-em, .hmv-disc svg { width: 18px; height: 18px; display: block; }
.hmv-m.hmv-hist-traditional .hmv-disc { outline: 1.5px dashed var(--tc-ink); outline-offset: 2px; }
.hmv-m.hmv-hist-anonymous .hmv-disc { outline: 1.5px dotted var(--tc-ink); outline-offset: 2px; }
.hmv-m:hover .hmv-disc, .hmv-m:focus-within .hmv-disc {
  z-index: 6; left: -17px; top: -17px; width: 34px; height: 34px;
}
.hmv-m:hover .hmv-disc .hmv-em, .hmv-m:hover .hmv-disc svg,
.hmv-m:focus-within .hmv-disc .hmv-em, .hmv-m:focus-within .hmv-disc svg { width: 24px; height: 24px; }
.hmv-mono { font: 700 11px/1 var(--tc-sans, sans-serif); }
.hmv-m:hover .hmv-mono, .hmv-m:focus-within .hmv-mono { font-size: 14px; }
.hmv-disc:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--tc-surface-alt), 0 0 0 4.5px var(--tc-ink);
}

.hmv-cap {
  position: absolute; z-index: 4; font: 12px/15px var(--tc-serif, serif); color: var(--tc-ink);
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 2px var(--bm-land, #fff), 0 0 2px var(--bm-land, #fff), 0 0 4px var(--bm-land, #fff);
}

.hmv-card {
  display: none; position: absolute; z-index: 20; left: 24px; top: -24px; width: 268px;
  background: var(--tc-surface-alt); color: var(--tc-ink); border: 1px solid var(--tc-line);
  border-top: 4px solid var(--c, #767676); border-radius: 3px; padding: 10px 12px 11px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font: 13px/1.45 var(--tc-sans, sans-serif);
}
.hmv-m:hover .hmv-card, .hmv-m:focus-within .hmv-card { display: block; }
.hmv-ch { font: 600 16px/1.25 var(--tc-serif, serif); }
.hmv-orig { font-weight: 400; color: var(--tc-ink-soft); margin-left: 4px; }
.hmv-role { margin: 3px 0 7px; color: var(--tc-ink-soft); font-size: 12.5px; }
.hmv-card p { margin: 0; }
.hmv-life { font: 12px/1.45 var(--tc-mono, monospace); }
.hmv-axis { position: relative; height: 7px; margin: 5px 0 2px; background: var(--tc-line); border-radius: 2px; }
.hmv-axis i { position: absolute; inset: 0; border-radius: 2px; }
.hmv-where { margin-top: 8px; font-size: 12.5px; }
.hmv-chip {
  display: inline-block; font: 10.5px/1.5 var(--tc-mono, monospace); letter-spacing: .04em;
  text-transform: uppercase; color: var(--tc-ink-soft); border: 1px solid var(--tc-ink-soft);
  border-radius: 2px; padding: 0 4px;
}
.hmv-go { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hmv-go a { color: var(--tc-accent); text-underline-offset: 2px; }

.hmv-pin {
  position: absolute; z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  display: grid; place-items: center; border-radius: 50%; background: var(--tc-surface-alt);
  box-shadow: 0 0 0 1.5px var(--tc-surface-alt), 0 0 0 2.5px var(--tc-line); text-decoration: none;
  color: var(--tc-ink); font: 700 13px/1 var(--tc-mono, monospace); cursor: pointer;
}
.hmv-pin::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.hmv-pin:focus-visible { outline: 2.5px solid var(--tc-ink); outline-offset: 4px; border-radius: 50%; }

.hmv-sheet {
  scroll-margin-top: 70px; margin: 10px 0 18px; border: 1px solid var(--tc-line);
  border-top: 3px solid var(--tc-ink); border-radius: 3px; background: var(--tc-surface-alt);
  padding: 10px 12px 2px;
}
.hmv-sheet h2 { margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 16px/1.3 var(--tc-serif, serif); }
.hmv-sheet h2 small { font: 400 11.5px var(--tc-mono, monospace); color: var(--tc-ink-soft); }
.hmv-sheet h2 a { font: 600 14px var(--tc-sans, sans-serif); color: var(--tc-accent); }
.hmv-rows { list-style: none; margin: 0; padding: 0; }
.hmv-row { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--tc-line); }
.hmv-rb { min-width: 0; }
.hmv-nm { font: 600 15px/1.35 var(--tc-sans, sans-serif); text-decoration: none; display: block; }
.hmv-meta { display: block; font: 11.5px/1.45 var(--tc-mono, monospace); color: var(--tc-ink-soft); }

.hmv-sm {
  position: relative; width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; background: var(--c, #767676); color: #fff;
}
.hmv-sm .hmv-em, .hmv-sm svg { width: 69%; height: 69%; display: block; }
.hmv-sm.hollow { background: var(--tc-surface-alt); color: var(--c, #767676); box-shadow: inset 0 0 0 2px var(--c, #767676); }

.hmv-below { max-width: 1240px; margin: 0 auto; padding: 14px 0 44px; }
.hmv-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 18px; font: 12.5px/1.45 var(--tc-sans, sans-serif); color: var(--tc-ink-soft); }
.hmv-legend .hmv-nb { flex-basis: 100%; }

.hmv-tray { position: relative; border: 1px dashed var(--tc-line); border-radius: 3px; padding: 12px 14px; margin: 0 0 24px; }
.hmv-tray h2 { margin: 0 0 6px; font: 600 13px/1.4 var(--tc-mono, monospace); }
.hmv-tray p { margin: 0 0 8px; font: 12px/1.5 var(--tc-mono, monospace); color: var(--tc-ink-soft); }
.hmv-tray ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hmv-tray li { display: flex; align-items: center; gap: 8px; font: 13.5px/1.3 var(--tc-sans, sans-serif); }
.hmv-tray li small { display: block; font: 11px/1.35 var(--tc-mono, monospace); color: var(--tc-ink-soft); font-weight: 400; }

.hmv-index h2 { margin: 0 0 10px; font: 600 15px/1.3 var(--tc-sans, sans-serif); }
.hmv-index section { break-inside: avoid; margin: 0 0 16px; }
.hmv-index h3 { margin: 0 0 6px; padding-top: 6px; border-top: 4px solid var(--mc, #767676); font: 600 14px/1.3 var(--tc-sans, sans-serif); }
.hmv-index h3 span { font: 11px var(--tc-mono, monospace); color: var(--tc-ink-soft); margin-left: 7px; font-weight: 400; }
.hmv-index ul { list-style: none; margin: 0; padding: 0; }
.hmv-index li { font: 13.5px/1.6 var(--tc-sans, sans-serif); }
.hmv-index li small { font: 11px var(--tc-mono, monospace); color: var(--tc-ink-soft); margin-left: 6px; }

#home-map-view[hidden] { display: none; }