/* v3 layout prototype styling. Reuses cabinet-tokens.css (the real
   parchment/ink palette) for continuity while the LAYOUT is what's under
   review here -- deliberately not restyling color/type from scratch too,
   see Landing-page-notes.2.0.md's "why reuse tokens" note. */

body.v3-proto {
  margin: 0;
  background: var(--cab-sea);
  color: var(--cab-ink);
  font-family: var(--cab-font-body);
}

.v3-header {
  padding: 24px 32px 12px;
  max-width: 900px;
}

.v3-header h1 {
  font-family: var(--cab-font-heading);
  margin: 0 0 6px;
}

.v3-subtitle {
  margin: 0;
  color: var(--cab-ink-soft);
  font-size: 0.95rem;
}

.v3-subtitle code {
  background: var(--cab-card-bg);
  padding: 1px 5px;
  border-radius: 3px;
}

.v3-warning {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--cab-card-bg-wip);
  border: 1px solid var(--cab-card-border);
  border-radius: 4px;
  font-size: 0.85rem;
  max-width: 640px;
}

.v3-stage-wrap {
  padding: 0 16px 40px;
}

.v3-stage {
  width: 100%;
  height: auto;
  display: block;
  background: var(--cab-sea-deep);
  border-radius: 6px;
}

/* Section region outline -- faint, just enough to show the weighted
   partition itself during layout review. Not part of the final visual
   design; a production pass would likely drop this entirely once the
   archipelagos read clearly enough on their own. */
.v3-region-outline {
  fill: none;
  stroke: var(--cab-ink-faint);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}

/* v3.5: one shared noise-carved landmass for every circle on the page
   (see cabinet-v3-islandshape.js) -- replaces what used to be a filled
   <circle> per entry/extra. Drawn once, first, underneath every region's
   labels/hit-circles/status rings. fill-rule: evenodd so a rare noise-
   carved "lake" fully inside a landmass cuts a hole correctly regardless
   of winding direction. */
.v3-islands-land {
  fill: var(--cab-land);
  stroke: var(--cab-ink);
  stroke-width: 2;
}

/* Invisible hit target at an entry's original (pre-noise) circle --
   fused/traced coastlines mean the visible shape often isn't a clean
   per-entry boundary any more, so the clickable region stays anchored to
   the geometry growCircles() actually decided, not the traced outline.
   fill: transparent (not none) so SVG hit-testing still fires on the
   fill area, not just a stroke. */
.v3-island-hit {
  fill: transparent;
}

.v3-island {
  cursor: pointer;
}

.v3-island:focus-visible {
  outline: 2px solid var(--cab-focus-ring);
  outline-offset: 2px;
}

/* Hover/focus feedback: the shared landmass fill can't change per-entry
   the way a separate circle's fill once could, so an accent ring on the
   (otherwise invisible) hit circle stands in for the old whole-circle
   fill change. */
.v3-island:hover .v3-island-hit,
.v3-island:focus-visible .v3-island-hit {
  stroke: var(--cab-accent);
  stroke-width: 2.5;
}

.v3-island-label {
  font-family: var(--cab-font-body);
  font-size: 13px;
  fill: var(--cab-ink);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--cab-land-light);
  stroke-width: 3px;
}

/* Dashed ring marking "not fully live" -- wip entries (still a link,
   just visually flagged) and coming-soon stubs (not a link at all)
   share this same treatment, drawn on top of the shared landmass at
   that item's own original circle position. */
.v3-status-ring {
  fill: none;
  stroke: var(--cab-ink-soft);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.85;
}

.v3-stub-label {
  font-family: var(--cab-font-body);
  font-size: 11px;
  fill: var(--cab-ink-soft);
  text-anchor: middle;
  dominant-baseline: middle;
  font-style: italic;
}

.v3-section-label {
  font-family: var(--cab-font-heading);
  fill: var(--cab-ink);
  letter-spacing: 0.03em;
}

/* v3.6: dev-only island-shape tuning panel (cabinet-v3-controls.js) --
   fixed to the viewport corner, above the SVG, deliberately plain/utility
   styling (not matching the parchment aesthetic) since it's not part of
   the page's actual design, only a tool for tuning v3Config.island. */
.v3-controls {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 250px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(20, 20, 24, 0.88);
  color: #f0f0f0;
  border-radius: 6px;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.v3-controls-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.v3-controls-group-label {
  margin: 10px 0 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}

.v3-controls-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name value" "input input";
  align-items: center;
  gap: 2px 6px;
  margin-bottom: 6px;
}

.v3-controls-name {
  grid-area: name;
}

.v3-controls-value {
  grid-area: value;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.v3-controls-row input[type="range"] {
  grid-area: input;
  width: 100%;
}

.v3-controls-buttons {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.v3-controls-btn {
  flex: 1;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.v3-controls-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Reserved header strip -- see splitLabelBand() in cabinet-v3-layout.js.
   No circle is ever packed inside this band, so it doesn't need to
   search for a gap; it's a light wash the full width of the region,
   consistent across every section rather than a per-label plate. */
.v3-section-label-band {
  fill: var(--cab-card-bg);
  opacity: 0.55;
}