/* Valheim Base Build Planner.
 *
 * Three surfaces side by side on a wide screen — the hammer, the plan, the 3D
 * view — and stacked on a phone, plan first. The plan and the 3D view carry
 * fixed data colours (material, support) that must read the same in either
 * theme, so they sit on their own dark ground rather than the page's. */
[data-product="valheim-build"] {
  --vb-ground: #1f2a24;
  --vb-grid-minor: rgba(220, 232, 214, .07);
  --vb-grid-major: rgba(220, 232, 214, .17);
  --vb-ink: #eef1e6;
  --vb-gold: #f4c95d;
}

[data-product="valheim-build"] .vb-h { margin: 0 0 .5rem; font-size: 1rem; }
[data-product="valheim-build"] .vb-muted { color: var(--muted); }
[data-product="valheim-build"] .vb-field { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; }
[data-product="valheim-build"] .vb-field .input { min-height: 2.4rem; }
[data-product="valheim-build"] .vb-inline { display: inline-flex; align-items: center; gap: .45rem; }
[data-product="valheim-build"] .vb-inline .input { width: auto; }
[data-product="valheim-build"] .vb-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
[data-product="valheim-build"] .vb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Bases and toolbar ─────────────────────────────────────────────── */

[data-product="valheim-build"] .vb-bases {
  display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(10rem, 1fr) auto;
  gap: .75rem; align-items: end; margin-bottom: .75rem;
}
[data-product="valheim-build"] .vb-toolbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: center;
  margin-bottom: .75rem;
}
[data-product="valheim-build"] .vb-tools { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
[data-product="valheim-build"] .vb-levels { display: flex; flex-wrap: wrap; gap: .35rem; }
[data-product="valheim-build"] .vb-level {
  display: grid; gap: 0; text-align: left; padding: .35rem .7rem; min-height: 2.6rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: inherit; cursor: pointer;
}
[data-product="valheim-build"] .vb-level span { font-size: .75rem; color: var(--muted); }
[data-product="valheim-build"] .vb-level[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
[data-product="valheim-build"] .vb-level:focus-visible,
[data-product="valheim-build"] .vb-group:focus-visible,
[data-product="valheim-build"] .vb-piece:focus-visible,
[data-product="valheim-build"] .vb-plan:focus-visible,
[data-product="valheim-build"] .vb-zoom:focus-visible,
[data-product="valheim-build"] .vb-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Stage ─────────────────────────────────────────────────────────── */

[data-product="valheim-build"] [data-pane-body="planner"] { container-type: inline-size; }
[data-product="valheim-build"] .vb-stage {
  display: grid; gap: .75rem; align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
[data-product="valheim-build"] .vb-planpanel { order: 1; }
[data-product="valheim-build"] .vb-palette { order: 2; }
[data-product="valheim-build"] .vb-view { order: 3; }
/* The plan and the hammer side by side, the 3D view full width under them. */
@container (min-width: 44rem) {
  [data-product="valheim-build"] .vb-stage { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); }
  [data-product="valheim-build"] .vb-palette { order: 0; }
  [data-product="valheim-build"] .vb-view { grid-column: 1 / -1; }
}
/* Wide enough for all three at once: build on the plan, watch it in 3D. */
@container (min-width: 78rem) {
  [data-product="valheim-build"] .vb-stage { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1.3fr) minmax(0, 1fr); }
  [data-product="valheim-build"] .vb-view { grid-column: auto; }
}

[data-product="valheim-build"] .vb-palette {
  display: flex; flex-direction: column; gap: .5rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .7rem;
  max-height: 40rem; overflow: hidden;
}
[data-product="valheim-build"] .vb-groups { display: flex; flex-wrap: wrap; gap: .3rem; }
[data-product="valheim-build"] .vb-group {
  font: inherit; font-size: .8rem; padding: .3rem .55rem; min-height: 2rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
}
[data-product="valheim-build"] .vb-group[aria-checked="true"] { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
[data-product="valheim-build"] .vb-armed {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; font-size: .82rem;
  padding: .45rem .55rem; border-radius: var(--radius); background: color-mix(in srgb, var(--vb-gold) 22%, var(--surface));
}
[data-product="valheim-build"] .vb-pieces { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 8rem; flex: 1 1 auto; display: grid; gap: .25rem; align-content: start; }
[data-product="valheim-build"] .vb-piece {
  width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .5rem; align-items: center;
  text-align: left; padding: .3rem .4rem; min-height: 2.75rem; border-radius: var(--radius);
  border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; cursor: grab;
  /* A vertical swipe still scrolls the list on a phone; tap to choose, tap the plan to place. */
  touch-action: pan-y;
}
[data-product="valheim-build"] .vb-piece:hover { border-color: var(--border); }
[data-product="valheim-build"] .vb-piece[aria-pressed="true"] { border-color: var(--vb-gold); background: color-mix(in srgb, var(--vb-gold) 16%, transparent); }
[data-product="valheim-build"] .vb-piece-text { display: grid; min-width: 0; }
[data-product="valheim-build"] .vb-piece-text strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-product="valheim-build"] .vb-piece-text span { font-size: .72rem; color: var(--muted); }
[data-product="valheim-build"] .vb-badge { font-size: .68rem; padding: .1rem .35rem; border-radius: 4px; border: 1px dashed var(--muted); color: var(--muted); white-space: nowrap; }
[data-product="valheim-build"] .vb-icon-frame { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: #2a332d; overflow: hidden; flex: none; }
[data-product="valheim-build"] .vb-icon-frame.is-small { width: 24px; height: 24px; }
[data-product="valheim-build"] .vb-icon-frame[data-image-state="missing"] { background: repeating-linear-gradient(45deg, #2a332d 0 4px, #333d36 4px 8px); }
[data-product="valheim-build"] .vb-icon { width: 100%; height: 100%; object-fit: contain; }
[data-product="valheim-build"] .vb-insp-head .vb-icon-frame { width: 48px; height: 48px; }

[data-product="valheim-build"] .vb-planpanel { display: grid; gap: .45rem; min-width: 0; }
[data-product="valheim-build"] .vb-plan-wrap {
  position: relative; height: clamp(20rem, 58vh, 36rem); border-radius: var(--radius); overflow: hidden;
  background: var(--vb-ground); border: 1px solid var(--border);
}
[data-product="valheim-build"] .vb-plan { display: block; width: 100%; height: 100%; touch-action: none; cursor: default; user-select: none; }
[data-product="valheim-build"] .vb-zooms { position: absolute; right: .5rem; top: .5rem; display: grid; gap: .3rem; }
[data-product="valheim-build"] .vb-zoom {
  width: 2.4rem; height: 2.4rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(20, 26, 22, .82); color: var(--vb-ink); font-size: 1.15rem; cursor: pointer;
}
[data-product="valheim-build"] .vb-keys { margin: 0; }

/* Plan drawing, in metres: every stroke width here is a fraction of a metre. */
[data-product="valheim-build"] .vb-ground { pointer-events: none; }
[data-product="valheim-build"] .vb-grid-minor { stroke: var(--vb-grid-minor); stroke-width: .02; fill: none; }
[data-product="valheim-build"] .vb-grid-major { stroke: var(--vb-grid-major); stroke-width: .035; fill: none; }
[data-product="valheim-build"] .vb-origin { stroke: rgba(255, 255, 255, .35); stroke-width: .05; }
[data-product="valheim-build"] .vb-p { cursor: pointer; }
[data-product="valheim-build"] .vb-body { stroke: rgba(10, 14, 12, .75); stroke-width: .045; }
[data-product="valheim-build"] .vb-shape-floor .vb-body,
[data-product="valheim-build"] .vb-shape-roof .vb-body,
[data-product="valheim-build"] .vb-shape-ridge .vb-body,
[data-product="valheim-build"] .vb-shape-stair .vb-body { fill-opacity: .55; }
[data-product="valheim-build"] .vb-body.is-thin { stroke-width: .06; }
[data-product="valheim-build"] .vb-arrow { stroke: rgba(10, 14, 12, .8); stroke-width: .08; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
[data-product="valheim-build"] .vb-high { fill: rgba(10, 14, 12, .8); pointer-events: none; }
[data-product="valheim-build"] .vb-cross { stroke: #fff; stroke-width: .08; pointer-events: none; }
[data-product="valheim-build"] .vb-icon-plan { pointer-events: none; opacity: .92; }
[data-product="valheim-build"] .vb-p.is-ghost { opacity: .22; pointer-events: none; }
[data-product="valheim-build"] .vb-p.is-selected .vb-body { stroke: var(--vb-gold); stroke-width: .12; }
[data-product="valheim-build"] .vb-p.is-preview { opacity: .7; pointer-events: none; }
[data-product="valheim-build"] .vb-hip { stroke: rgba(10, 14, 12, .55); stroke-width: .05; stroke-dasharray: .14 .1; pointer-events: none; }
[data-product="valheim-build"] .vb-flag { fill: #d93226; stroke: #fff; stroke-width: .05; pointer-events: none; }
[data-product="valheim-build"] .vb-boxsel { fill: rgba(244, 201, 93, .12); stroke: var(--vb-gold); stroke-width: .05; stroke-dasharray: .2 .12; pointer-events: none; }
[data-product="valheim-build"] .vb-range { fill: none; stroke: var(--vb-gold); stroke-width: .08; stroke-dasharray: .6 .3; pointer-events: none; }
[data-product="valheim-build"] .vb-cell { fill: #8a6d3b; stroke: rgba(138, 109, 59, .9); stroke-width: .03; pointer-events: none; }
[data-product="valheim-build"] .vb-cell-h { fill: #f1e3c4; font-size: .42px; font-family: var(--font-body); pointer-events: none; }
[data-product="valheim-build"] .vb-cell-cursor { fill: none; stroke: var(--vb-gold); stroke-width: .1; pointer-events: none; }
[data-product="valheim-build"] .vb-groundlayer.is-shaping ~ .vb-below,
[data-product="valheim-build"] .vb-groundlayer.is-shaping ~ .vb-here { opacity: .45; }
[data-product="valheim-build"] .vb-groundtools { display: flex; flex-wrap: wrap; gap: .3rem; }
[data-product="valheim-build"] .vb-groundtools[hidden] { display: none; }
[data-product="valheim-build"] [data-vb-shape][aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
[data-product="valheim-build"] .vb-ramp { gap: .4rem; }
[data-product="valheim-build"] .vb-key i.vb-ramp-bar { width: 4.5rem; }
[data-product="valheim-build"] .vb-have { width: 5.5rem; min-height: 2.25rem; text-align: right; padding: .2rem .4rem; }
[data-product="valheim-build"] .vb-table tr.is-done td:last-child { color: var(--muted); }
[data-product="valheim-build"] .vb-p.is-collapse .vb-body { stroke: #fff; }
[data-product="valheim-build"] .vb-rest-ring { fill: rgba(244, 201, 93, .05); stroke: var(--vb-gold); stroke-width: .06; stroke-dasharray: .4 .25; pointer-events: none; }
[data-product="valheim-build"] .vb-rest-dot { fill: var(--vb-gold); stroke: #1d1d1d; stroke-width: .06; cursor: move; }
[data-product="valheim-build"] .vb-rest-mark { fill: none; stroke: #1d1d1d; stroke-width: .07; pointer-events: none; }
[data-product="valheim-build"] .vb-rest.is-elsewhere { opacity: .45; }

[data-product="valheim-build"] .vb-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .78rem; color: var(--muted); }
[data-product="valheim-build"] .vb-key { display: inline-flex; align-items: center; gap: .35rem; }
[data-product="valheim-build"] .vb-key i,
[data-product="valheim-build"] .vb-support i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .35); }

[data-product="valheim-build"] .vb-view { display: grid; gap: .45rem; min-width: 0; }
[data-product="valheim-build"] .vb-view-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem; }
[data-product="valheim-build"] .vb-view-head .vb-h { margin: 0; }
[data-product="valheim-build"] .vb-3d { display: block; width: 100%; height: clamp(18rem, 50vh, 32rem); border-radius: var(--radius); border: 1px solid var(--border); background: #1c2421; touch-action: none; }
[data-product="valheim-build"] .vb-3d-note { margin: 0; }

.vb-floater {
  position: fixed; z-index: 1000; pointer-events: none; padding: .3rem .55rem; border-radius: 6px;
  background: #f4c95d; color: #1d1d1d; font-size: .82rem; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* ── Cards ─────────────────────────────────────────────────────────── */

[data-product="valheim-build"] .vb-cards {
  display: grid; gap: .75rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
[data-product="valheim-build"] .vb-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .85rem;
  min-width: 0;
}
[data-product="valheim-build"] .vb-bill { margin-top: .75rem; }
[data-product="valheim-build"] .vb-insp-head { display: flex; gap: .65rem; align-items: center; margin-bottom: .4rem; }
[data-product="valheim-build"] .vb-insp-head .vb-h { margin: 0; }
[data-product="valheim-build"] .vb-insp-head p { margin: 0; }
[data-product="valheim-build"] .vb-support { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .3rem 0; }
[data-product="valheim-build"] .vb-pos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0; }
[data-product="valheim-build"] .vb-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .75rem; margin: .6rem 0 0; font-size: .85rem; }
[data-product="valheim-build"] .vb-facts dt { color: var(--muted); }
[data-product="valheim-build"] .vb-facts dd { margin: 0; }
[data-product="valheim-build"] .vb-link {
  background: none; border: 0; padding: .15rem 0; color: var(--accent); font: inherit; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; text-align: left; min-height: 1.9rem;
}
[data-product="valheim-build"] .vb-onlevel,
[data-product="valheim-build"] .vb-more,
[data-product="valheim-build"] .vb-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
[data-product="valheim-build"] .vb-comfort-big { margin: .1rem 0 .3rem; font-size: 1rem; }
[data-product="valheim-build"] .vb-comfort-big strong { font-size: 1.9rem; line-height: 1; }
[data-product="valheim-build"] .vb-comfort-list { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .2rem; font-size: .88rem; }
[data-product="valheim-build"] .vb-comfort-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.2rem; gap: .5rem; }
[data-product="valheim-build"] .vb-comfort-list strong { text-align: right; }
[data-product="valheim-build"] .vb-check-list li { padding: .4rem .55rem; border-radius: 6px; border-left: 4px solid var(--border); font-size: .9rem; display: grid; gap: .1rem; }
[data-product="valheim-build"] .vb-check-list .tone-bad { border-left-color: #d9472b; }
[data-product="valheim-build"] .vb-check-list .tone-warn { border-left-color: #e8862a; }
[data-product="valheim-build"] .vb-check-list .tone-good { border-left-color: #38a845; }
[data-product="valheim-build"] .vb-check-list .tone-info { border-left-color: var(--muted); }
[data-product="valheim-build"] .vb-table-wrap { overflow-x: auto; }
[data-product="valheim-build"] .vb-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
[data-product="valheim-build"] .vb-table th,
[data-product="valheim-build"] .vb-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); text-align: left; }
[data-product="valheim-build"] .vb-table th[scope="row"] { display: flex; gap: .45rem; align-items: center; font-weight: 600; }
[data-product="valheim-build"] .vb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
[data-product="valheim-build"] .vb-counts { list-style: none; margin: .4rem 0 0; padding: 0; columns: 14rem; font-size: .85rem; }
[data-product="valheim-build"] .vb-counts li { display: flex; justify-content: space-between; gap: .5rem; break-inside: avoid; }
[data-product="valheim-build"] .vb-exports { margin-top: .75rem; }
[data-product="valheim-build"] .vb-print { display: none; }

@media (max-width: 760px) {
  [data-product="valheim-build"] .vb-bases { grid-template-columns: 1fr; }
  [data-product="valheim-build"] .vb-palette { max-height: 22rem; }
  [data-product="valheim-build"] .vb-plan-wrap { height: 62vh; }
  [data-product="valheim-build"] .vb-pos { grid-template-columns: 1fr 1fr 1fr; }
}

@media print {
  body[data-printing-scope] [data-product="valheim-build"] .vb-print[data-printing] {
    display: block; position: absolute; left: 0; top: 0; width: 100%; color: #000; background: #fff;
    font: 10pt/1.35 Helvetica, Arial, sans-serif;
  }
  .vb-print h2 { font-size: 16pt; margin: 0 0 .2rem; }
  .vb-print figure { margin: 0 0 12pt; break-inside: avoid; }
  .vb-print figcaption { font-size: 8.5pt; color: #333; }
  .vb-print-plan { width: 100%; max-height: 8.5in; border: .5pt solid #999; }
  .vb-print .vb-body { stroke: #222; stroke-width: .04; }
  .vb-print .vb-arrow { stroke: #222; stroke-width: .06; fill: none; }
  .vb-print .vb-cross { stroke: #000; stroke-width: .06; }
  .vb-print .is-ghost { opacity: .25; }
  .vb-print .vb-table { border-collapse: collapse; width: 60%; }
  .vb-print .vb-table th, .vb-print .vb-table td { border-bottom: .5pt solid #bbb; padding: 2pt 6pt; text-align: left; }
  .vb-print .num { text-align: right; }
  .vb-print-note { font-size: 8pt; color: #444; }
}