/* A cut-metal drafting table. Deliberately scoped: the miner, tracker and supply surfaces keep their identity. */
.pw-page { --pw-line: #493027; --pw-muted: #b9a79a; --pw-hot: #ff6b36; padding-bottom: 64px; }
.pw-page button { cursor: pointer; }
.pw-page button:focus-visible, .pw-page input:focus-visible, #pw-canvas:focus-visible { outline: 2px solid var(--heat); outline-offset: 4px; }
.pw-intro { padding-block: 52px 32px; }
.pw-title-row { display: grid; grid-template-columns: 1.65fr 1fr; gap: 32px; align-items: end; margin-top: 20px; }
.pw-title-row h1 { font: 900 clamp(64px, 8.2vw, 116px)/.89 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.pw-title-row h1 span { color: var(--ember); }
.pw-manifesto { max-width: 340px; justify-self: end; }
.pw-manifesto > p { color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.pw-price-stamp { display: flex; gap: 16px; align-items: center; margin-top: 24px; }
.pw-price-stamp strong { font: 900 68px/.8 var(--display); letter-spacing: -.04em; color: var(--heat); }
.pw-price-stamp span { font: 400 12px/1.4 var(--mono); text-transform: uppercase; max-width: 86px; }
.pw-preview-note { display: flex; gap: 16px; align-items: baseline; border-block: 1px solid var(--line-2); padding-block: 12px; margin-bottom: 24px; }
.pw-preview-note b { color: var(--heat); white-space: nowrap; }
.pw-preview-note p { color: var(--pw-muted); font-size: 13px; }
.pw-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.pw-canvas-panel { min-width: 0; position: sticky; top: 100px; }
.pw-canvas-top, .pw-canvas-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pw-canvas-top { min-height: 52px; }
.pw-zoom { display: flex; border: 1px solid var(--pw-line); }
.pw-zoom button { appearance: none; min-width: 44px; min-height: 44px; background: transparent; border: 0; color: var(--fg-2); font: 12px var(--mono); }
.pw-zoom button + button { border-left: 1px solid var(--pw-line); }
.pw-zoom button[aria-pressed=true] { background: var(--ember); color: var(--bg); }
.pw-coordinate-strip { display: flex; justify-content: space-between; color: var(--pw-muted); padding: 14px 0 10px; font-size: 10px; }
.pw-viewport { aspect-ratio: 1; width: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ember) var(--bg); background: #0d0806; border: 1px solid var(--pw-line); overscroll-behavior: contain; }
.pw-surface { position: relative; aspect-ratio: 1; width: 100%; isolation: isolate; }
#pw-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-x pan-y; }
#pw-canvas[data-dragging=true] { cursor: grabbing; touch-action: none; }
.pw-selection { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; border: 1px solid #fff1dc; z-index: 1; box-shadow: 0 0 0 2px var(--ember), 0 0 28px #ff4a1c88; background: #ff4a1c50; }
.pw-selection::before, .pw-selection::after { content: ''; position: absolute; width: 7px; height: 7px; background: var(--heat); border: 1px solid #0d0908; }
.pw-selection::before { top: -5px; left: -5px; }
.pw-selection::after { bottom: -5px; right: -5px; }
.pw-selection-label { position: absolute; bottom: calc(100% + 9px); left: -3px; background: var(--heat); color: var(--bg); font: 600 10px/1 var(--mono); white-space: nowrap; padding: 5px 7px; }
.pw-selection[data-top=true] .pw-selection-label { top: calc(100% + 9px); bottom: auto; }
.pw-logo-plate { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #1b0e09; }
.pw-logo-plate span { font: 900 clamp(7px, 1.8vw, 20px)/1 var(--display); color: var(--heat); white-space: nowrap; }
.pw-logo-plate img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pw-canvas-bottom { flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 10px 0; }
.pw-canvas-bottom > .tag:last-child { color: var(--fg-3); font-size: 9px; }
.pw-selection-key::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--heat); margin-right: 8px; }
#pw-motion { border: 0; background: none; color: var(--fg-2); font: 11px var(--mono); min-height: 44px; }
.pw-instructions { font: 11px/1.5 var(--mono); color: var(--pw-muted); padding-top: 12px; }
.pw-editor { border-top: 2px solid var(--ember); padding-top: 24px; }
.pw-editor-heading h2 { font: 800 38px/.98 var(--display); text-transform: uppercase; letter-spacing: -.015em; margin: 10px 0 24px; max-width: 230px; }
.pw-editor fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.pw-editor legend { font: 12px/1.5 var(--mono); color: var(--pw-muted); margin-bottom: 10px; }
.pw-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.pw-presets button { min-height: 44px; border: 1px solid var(--pw-line); color: var(--fg-2); background: transparent; font: 11px var(--mono); padding: 0 2px; }
.pw-presets button[aria-pressed=true] { border-color: var(--ember); color: var(--heat); background: #ff4a1c12; }
.pw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw-number > span:first-child { display: block; color: var(--fg-3); font: 11px var(--mono); margin-bottom: 6px; }
.pw-number-entry { display: flex; align-items: center; background: var(--inset); border-bottom: 1px solid var(--pw-line); }
.pw-number-entry input { width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 0; color: var(--fg); background: none; font: 20px var(--mono); }
.pw-number-entry small { padding-right: 12px; color: var(--fg-3); font: 10px var(--mono); }
.pw-upload { border: 1px dashed var(--pw-line); padding: 18px; position: relative; margin-bottom: 20px; }
.pw-upload:focus-within { outline: 2px solid var(--heat); outline-offset: 3px; }
.pw-upload label { cursor: pointer; }
.pw-upload label > span { font: 11px var(--mono); color: var(--pw-muted); display: block; }
.pw-upload strong { display: flex; justify-content: space-between; align-items: center; font: 600 15px var(--sans); min-height: 44px; gap: 12px; overflow-wrap: anywhere; }
.pw-upload small { display: block; font-size: 11px; color: var(--fg-3); line-height: 1.5; }
.pw-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#pw-logo-remove { border: 0; background: none; padding: 10px 0 0; min-height: 44px; color: var(--heat); font: 11px var(--mono); position: relative; }
.pw-field { display: block; color: var(--pw-muted); font: 12px var(--mono); margin-bottom: 16px; }
.pw-field input { display: block; width: 100%; min-width: 0; margin-top: 7px; min-height: 44px; padding: 12px; border: 1px solid var(--pw-line); background: var(--inset); color: var(--fg); font: 16px var(--sans); border-radius: 0; }
.pw-field input::placeholder { color: #84766c; }
.pw-field input[aria-invalid=true] { border-color: var(--ember); }
.pw-quote { padding: 20px 0; margin-top: 22px; border-top: 1px solid var(--pw-line); }
.pw-quote > p { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 4px; }
.pw-quote strong { font: 900 66px/.9 var(--display); font-variant-numeric: tabular-nums; color: var(--heat); letter-spacing: -.02em; }
.pw-quote > p > span { font: 12px var(--mono); }
.pw-formula { font: 11px var(--mono); color: var(--pw-muted); }
.pw-quote small { display: block; color: var(--fg-3); font-size: 11px; line-height: 1.5; margin-top: 12px; }
.pw-export { display: flex; justify-content: space-between; width: 100%; padding-inline: 16px; font-size: 13px; }
.pw-export:disabled { cursor: not-allowed; opacity: .4; }
.pw-feedback { color: var(--heat); font-size: 12px; line-height: 1.5; padding-top: 10px; }
.pw-feedback:empty { padding: 0; }
.pw-terms { color: var(--pw-muted); font-size: 11px; line-height: 1.6; margin-top: 14px; }
.pw-reset { border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg-2); font: 11px var(--mono); margin-top: 12px; min-height: 44px; }
.pw-colophon { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; border-top: 1px solid var(--line-2); padding-top: 36px; margin-top: 64px; }
.pw-coordinate-art { font: 900 clamp(56px, 7vw, 100px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--pw-line); }
.pw-colophon h2 { font: 800 32px/1 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.pw-colophon p { font-size: 14px; color: var(--fg-2); max-width: 440px; line-height: 1.6; }
.pw-mobile-dock, .pw-mobile-dock[hidden] { display: none; }
.pw-editor, #pw-canvas { scroll-margin-top: 110px; scroll-margin-bottom: 88px; }
@media (max-width: 1000px) {
  .pw-workspace { grid-template-columns: minmax(0, 1fr) 286px; gap: 24px; }
  .pw-title-row h1 { font-size: clamp(64px, 9vw, 96px); }
  .pw-canvas-bottom > .tag:last-child { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .pw-page { padding-bottom: 96px; }
  .pw-mobile-dock:not([hidden]) { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 8px; background: #130d0bf5; border-top: 1px solid var(--pw-line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .pw-mobile-dock > div { flex: 1; min-width: 0; }
  .pw-mobile-dock strong { font: 800 28px/1 var(--display); color: var(--heat); font-variant-numeric: tabular-nums; }
  .pw-mobile-dock > div > span { font: 9px var(--mono); }
  .pw-mobile-dock small { display: block; font: 9px var(--mono); color: var(--fg-2); margin-top: 4px; }
  .pw-mobile-dock button { min-height: 44px; padding: 10px; border: 1px solid var(--pw-line); background: transparent; color: var(--fg); font: 11px var(--mono); }
  .pw-mobile-dock button:last-child { border-color: var(--ember); color: var(--heat); }
  .pw-intro { padding-top: 32px; }
  .pw-title-row { grid-template-columns: 1fr; gap: 20px; }
  .pw-title-row h1 { font-size: clamp(56px, 12.6vw, 88px); }
  .pw-manifesto { display: flex; flex-direction: row-reverse; max-width: none; gap: 24px; align-items: center; justify-self: stretch; }
  .pw-manifesto > p { font-size: 13px; flex: 1; }
  .pw-price-stamp { margin: 0; gap: 8px; flex: 0 0 95px; }
  .pw-price-stamp strong { font-size: 56px; }
  .pw-price-stamp span { font-size: 10px; max-width: 44px; }
  .pw-preview-note { display: block; margin-bottom: 16px; }
  .pw-preview-note p { margin-top: 7px; font-size: 12px; }
  .pw-workspace { grid-template-columns: 1fr; gap: 32px; }
  .pw-canvas-panel { position: relative; top: auto; }
  .pw-canvas-bottom > .tag:last-child { flex-basis: auto; }
  .pw-canvas-bottom { gap: 4px 8px; }
  .pw-instructions { font-size: 10px; }
  .pw-editor { padding-top: 20px; }
  .pw-editor-heading h2 { max-width: none; font-size: 40px; }
  .pw-editor fieldset { margin-bottom: 22px; }
  .pw-logo-plate span { font-size: 8px; }
  .pw-colophon { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .pw-page *, .pw-page *::before, .pw-page *::after { animation: none !important; transition: none !important; } }

/* ---------------- live wall: ownership keys, price note, order panel (1.12.0) ---------------- */
.pw-price-stamp { flex-wrap: wrap; }
.pw-price-stamp small { flex-basis: 100%; font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.pw-key-owned::before, .pw-key-held::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; }
.pw-key-owned::before { background: #2a1a12; outline: 1px solid var(--line-2); }
.pw-key-held::before { background: rgba(255, 103, 37, .25); outline: 1px dashed rgba(255, 103, 37, .7); }
.pw-order { border: 1px solid var(--line-2); background: var(--inset); padding: 14px 16px; margin-top: 14px; }
.pw-order dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; font: 400 12px/1.4 var(--mono); }
.pw-order dt { color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; }
.pw-order dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pw-order dd a { color: var(--ember-2); }
.pw-manual { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pw-manual summary { cursor: pointer; font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.pw-manual .btn { min-height: 40px; margin-top: 8px; width: 100%; }
#pw-wall-state { color: var(--fg-2); }
.pw-selection[data-small="true"] #pw-brand-mark { display: none; }