/* brkw.css — Breakwater design studio (v31) */
.bw-map { position: relative; height: 420px; overflow: hidden; border: 1px solid var(--rule, #cdbf9f); border-radius: 8px; background: #b9d3e6; touch-action: none; cursor: crosshair; user-select: none; margin: 10px 0 12px; }
.bw-map:focus-visible { outline: 3px solid var(--brass, #b08d4a); outline-offset: 2px; }
.bw-tiles { position: absolute; inset: 0; }
.bw-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.bw-ovl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bw-mapctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.bw-mapctl button, .bw-maplay button { font: 600 14px/1 system-ui, sans-serif; min-width: 32px; min-height: 32px; border: 1px solid #8a7a5a; border-radius: 6px; background: rgba(255, 253, 247, .94); color: #2a2026; cursor: pointer; }
.bw-maplay { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.bw-maplay button { font-size: 12px; padding: 0 9px; }
.bw-maplay button[aria-pressed="true"] { background: #6b2d5c; color: #fff; border-color: #6b2d5c; }
.bw-attr { position: absolute; right: 0; bottom: 0; font: 11px/1.3 system-ui, sans-serif; background: rgba(255, 255, 255, .85); color: #333; padding: 2px 6px; border-top-left-radius: 4px; }
.bw-coord { position: absolute; left: 0; bottom: 0; font: 600 11px/1.3 ui-monospace, monospace; background: rgba(42, 32, 38, .82); color: #fff; padding: 3px 7px; border-top-right-radius: 4px; }
.bw-search { display: flex; gap: 6px; }
.bw-search input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--rule, #cdbf9f); border-radius: 6px; background: var(--paper, #fffdf7); color: inherit; font: inherit; }
.bw-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bw-sitegrid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.bw-stack { display: grid; gap: 14px; align-content: start; min-width: 0; }
.bw-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-types { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.bw-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.bw-steps { display: grid; gap: 2px; font-size: 14px; }
.bw-ref { margin: 0 0 6px; font-size: 12px; color: var(--plum, #6b2d5c); font-weight: 600; }
.bw-eq { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 4px 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px dotted var(--rule, #d8ccb4); }
.bw-lab { color: var(--muted, #6a5d55); font-size: 13px; }
.bw-sym { font-family: "Cambria Math", Cambria, Georgia, serif; font-style: italic; overflow-wrap: anywhere; }
.bw-sub { font-style: normal; color: var(--muted, #6a5d55); font-family: inherit; font-size: 13px; }
.bw-val { white-space: nowrap; text-align: right; }
.bw-val.bad { color: #a3241c; }
.bw-3dbar { align-items: center; }
.bw-3dbar > span:first-child { font-weight: 600; font-size: 13px; }
.bw-amp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.bw-3d { min-height: 380px; border-radius: 8px; overflow: hidden; background: #eef3f6; }
.bw-3d canvas { display: block; width: 100%; }
@media (max-width: 980px) { .bw-sitegrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .bw-map { height: 320px; } .bw-eq { grid-template-columns: minmax(0, 1fr); } .bw-val { text-align: left; } }
html[data-mode="dark"] .bw-3d { background: #1b2228; }
.bw-off { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(80%, 360px); margin: 0; padding: 10px 14px; background: rgba(255, 253, 247, .95); border: 1px solid #b08d4a; border-radius: 8px; font-size: 13px; text-align: center; color: #2a2026; }