/* ==========================================================================
   Pixel Lamp — pixel.css
   Navy and ember on paper. The render is the loudest thing on the page and
   everything else gets out of its way.
   ========================================================================== */

:root {
  --navy: #05245e;
  --navy-2: #0b3272;
  --ember: #e97b06;
  --ember-lt: #f9a94b;
  --paper: #fbf9f6;
  --card: #ffffff;
  --ink: #16233c;
  --muted: #5d6b84;
  --line: rgba(5, 36, 94, .14);
  --line-2: rgba(5, 36, 94, .08);
  --ok: #1f7a4d;
  --warn: #a8620a;
  --bad: #b3261e;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(5,36,94,.05), 0 8px 24px rgba(5,36,94,.06);

  --body: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --head: Newsreader, Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Form controls do not inherit the page typeface, and this page is built
   almost entirely out of buttons. font-family only — each control keeps the
   size and weight it was designed with. */
button, input, select, textarea { font-family: inherit; }

h1, h2, h3 { font-family: var(--head); font-weight: 500; letter-spacing: -.01em; }

a { color: var(--navy); }

/* ------------------------------------------------------ the app shell --- */

/* One screen, two panes, nothing that scrolls the whole page. The render must
   never leave the viewport while a control is being dragged — that is the
   entire reason to be an app rather than a page. */
.pxl-app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  /* Explicit column track. Without it the implicit `auto` column is sized to
     the max-content of its children, and the canvas's width attribute drags
     the whole shell wider than the viewport. */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.pxl-appbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem clamp(.75rem, 2vw, 1.25rem);
  background: var(--navy);
  color: #fff;
}
/* --- the mark --------------------------------------------------------- */

.pxl-mark {
  margin: 0;
  display: flex; align-items: center; gap: .55rem;
}

/* The glyph is drawn on a 32-unit grid, so it wants to land on whole pixels.
   Sizing it in rem and letting it scale is what makes a pixel logo look
   blurry — 28px on a 1.75rem box keeps the 3-unit squares crisp. */
.pxl-logo { width: 1.75rem; height: 1.75rem; flex: none; display: block; }
.pxl-logo-shade { fill: #fff; }
.pxl-logo-cord { fill: rgba(255,255,255,.5); }
.pxl-logo-light { fill: var(--ember-lt); }

.pxl-word {
  font-family: var(--body);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em;
  color: #fff; line-height: 1;
}
.pxl-word b { font-weight: 700; color: var(--ember-lt); }

.pxl-tag {
  font-family: var(--body); font-size: .6rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  padding-inline-start: .35rem;
  border-inline-start: 1px solid rgba(255,255,255,.2);
  line-height: 1;
}
.pxl-appbar-actions { margin-inline-start: auto; display: flex; gap: .4rem; }

.pxl-tool {
  background: none; border: 1px solid rgba(255,255,255,.28); border-radius: 2px;
  color: rgba(255,255,255,.88); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; padding: .38rem .7rem; cursor: pointer; white-space: nowrap;
}
.pxl-tool:hover:not(:disabled), .pxl-tool.on { background: rgba(255,255,255,.12); color: #fff; }
.pxl-tool:disabled { opacity: .35; cursor: default; }

.pxl-menu { position: relative; }
.pxl-presets {
  position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); z-index: 40;
  width: 19rem; max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 16px 44px rgba(5,36,94,.24); padding: .35rem;
}
.pxl-preset {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  background: none; border: 0; border-radius: 2px; cursor: pointer;
  padding: .5rem .55rem; text-align: start; color: var(--navy);
}
.pxl-preset:hover { background: rgba(5,36,94,.06); }
.pxl-preset svg { width: 1.9rem; height: 2.3rem; flex: none; }
.pxl-preset b { display: block; font-family: var(--head); font-size: .95rem; font-weight: 600; }
.pxl-preset small { display: block; font-size: .7rem; color: var(--muted); line-height: 1.35; }

@media (max-width: 600px) {
  .pxl-tag { display: none; }
  .pxl-tool { padding: .38rem .5rem; font-size: .68rem; }
}

/* --- the designer switcher ---------------------------------------------- */

.pxl-tabs {
  display: flex;
  gap: 2px;
  margin-inline: auto;          /* centres it between mark and actions */
  padding: 2px;
  background: rgba(255, 255, 255, .09);
  border-radius: 3px;
}
.pxl-tab {
  display: block;
  padding: .34rem .95rem;
  border-radius: 2px;
  color: rgba(255, 255, 255, .68);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
}
.pxl-tab:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.pxl-tab.on { background: #fff; color: var(--navy); }

@media (max-width: 780px) {
  .pxl-tabs { margin-inline: 0 auto; }
  .pxl-tab { padding: .34rem .6rem; font-size: .7rem; }
}
@media (max-width: 560px) {
  .pxl-tabs { order: 3; width: 100%; margin: .4rem 0 0; }
  .pxl-appbar { flex-wrap: wrap; }
  .pxl-tab { flex: 1; text-align: center; }
}

/* ------------------------------------------------------- configurator --- */

.dmc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 26rem);
  gap: clamp(.75rem, 2vw, 1.25rem);
  padding: clamp(.75rem, 2vw, 1.25rem);
  min-height: 0;
  min-width: 0;
}

/* --- left: the render --- */

.dmc-left { display: flex; flex-direction: column; gap: .7rem; min-height: 0; min-width: 0; }

.dmc-viewer {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  background:
    radial-gradient(ellipse 80% 60% at 50% 18%, #ffffff, transparent 70%),
    linear-gradient(#f4f1ec, #e9e5df);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: background .5s ease;
}
.dmc-viewer:has(#dmc-canvas.lit) { background: linear-gradient(#1a1512, #0d0b0a); }

/* min-width:0 is load-bearing. A canvas carries its width attribute as an
   intrinsic size, and a grid item defaults to min-width:auto — so the canvas
   would push its own container wider, which the next resize would read back
   and grow again, one frame at a time, forever. */
#dmc-canvas {
  display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
  position: relative; z-index: 2; cursor: grab; touch-action: none;
}
#dmc-canvas.dragging { cursor: grabbing; }

.dmc-ground {
  position: absolute; left: 50%; bottom: 5%; width: 66%; height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(5,36,94,.20), rgba(5,36,94,0) 70%);
  pointer-events: none; z-index: 1; transition: opacity .4s ease;
}
#dmc-canvas.lit ~ .dmc-ground { opacity: 0; }

.dmc-litfx { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .6s ease; }
.dmc-litfx.on { opacity: 1; }
.dmc-litfx-halo {
  position: absolute; left: 50%; top: 42%; width: 78%; height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255,186,110,.34), rgba(255,186,110,0) 68%);
  filter: blur(8px);
}
.dmc-litfx-pool {
  position: absolute; left: 50%; bottom: 2%; width: 86%; height: 26%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 55% 60% at 50% 100%, rgba(255,190,110,.30), rgba(255,190,110,0) 72%);
}

.dmc-wm {
  position: absolute; left: .75rem; top: .7rem; z-index: 3;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(5,36,94,.42); font-weight: 700; pointer-events: none;
}
#dmc-canvas.lit ~ .dmc-wm { color: rgba(255,214,160,.5); }
.dmc-wm-c { color: var(--ember); }

.dmc-drag-hint {
  position: absolute; left: 50%; top: .7rem; transform: translateX(-50%); z-index: 3;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  pointer-events: none;
}
#dmc-canvas.lit ~ .dmc-drag-hint { color: rgba(255,214,160,.55); }

.dmc-render-price {
  position: absolute; right: .75rem; top: .55rem; z-index: 3;
  font-family: var(--head); font-size: 1.3rem; color: var(--navy);
}
#dmc-canvas.lit ~ .dmc-render-price { color: #ffd9a0; }

.dmc-badge {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 3;
  background: rgba(255,255,255,.92); border: 1px solid rgba(31,122,77,.35);
  color: var(--ok); font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  padding: .25rem .6rem; border-radius: 999px;
}
.dmc-badge.warn { color: var(--warn); border-color: rgba(168,98,10,.4); }
.dmc-badge.bad { color: var(--bad); border-color: rgba(179,38,30,.4); }

.dmc-scale-chip {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 3;
  background: rgba(255,255,255,.9); border: 1px solid var(--line); color: var(--navy);
  font-size: .66rem; font-weight: 600; letter-spacing: .03em;
  padding: .25rem .56rem; border-radius: 999px;
}
#dmc-canvas.lit ~ .dmc-scale-chip { background: rgba(23,18,16,.7); color: #ffd9a0; border-color: rgba(255,190,110,.4); }

.dmc-lamp {
  position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  color: var(--navy); border-radius: 999px; padding: .35rem .85rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.dmc-lamp-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); }
.dmc-lamp[aria-pressed="true"] { background: rgba(23,18,16,.8); color: #ffd9a0; border-color: rgba(255,190,110,.45); }
.dmc-lamp[aria-pressed="true"] .dmc-lamp-dot { background: #ffbe6e; box-shadow: 0 0 10px #ffbe6e; }

.dmc-bulbrow { position: absolute; left: 50%; bottom: 3rem; transform: translateX(-50%); z-index: 4; }
/* On the darkened stage this control has to hold its own against whatever
   colour the shade happens to be glowing, so it carries its own backdrop
   rather than relying on contrast with the scene behind it. */
.dmc-seg--bulb {
  background: rgba(18,14,12,.88);
  border-color: rgba(255,190,110,.35);
  backdrop-filter: blur(6px);
}
.dmc-seg--bulb button { color: rgba(255,232,206,.9); }
.dmc-seg--bulb button:hover { color: #fff; background: rgba(255,190,110,.14); }
.dmc-seg--bulb button.sel { background: rgba(255,190,110,.95); color: #241a11; }
.dmc-seg--bulb button small { opacity: .78; }

/* --- issues --- */

.dmc-issues { display: grid; gap: .5rem; max-height: 30vh; overflow-y: auto; flex: none; }
.dmc-issue {
  margin: 0; padding: .6rem .8rem; font-size: .8rem; line-height: 1.5;
  border-inline-start: 3px solid; border-radius: 2px; background: #fff;
}
.dmc-issue.block { border-color: var(--bad); color: #7c1d17; background: #fdf3f2; }
.dmc-issue.warn { border-color: var(--warn); color: #7a4708; background: #fdf8f0; }
.dmc-issue.info { border-color: var(--navy); color: var(--navy); background: #f2f5fb; }

/* --- right: the wizard --- */

.dmc-right {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

/* The only scrolling region in the app. */
.dmc-steps-scroll { overflow-y: auto; overscroll-behavior: contain; }

.dmc-wizhead {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--line-2);
}
.dmc-wizbar {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .25rem; overflow-x: auto; flex: 1;
  scrollbar-width: none;
}
.dmc-wizbar::-webkit-scrollbar { display: none; }
.dmc-wizbar button {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  color: var(--muted); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: .3rem .45rem;
  border-radius: 2px;
}
.dmc-wizbar button i {
  font-style: normal; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .64rem;
  background: rgba(5,36,94,.08); color: var(--navy);
}
.dmc-wizbar button.done i { background: var(--navy); color: #fff; }
.dmc-wizbar button.on { color: var(--navy); }
.dmc-wizbar button.on i { background: var(--ember); color: #fff; }
.dmc-wizbar button:hover { background: rgba(5,36,94,.05); }

.dmc-undo {
  background: none; border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted); font-size: .7rem; font-weight: 600; cursor: pointer;
  padding: .3rem .55rem; white-space: nowrap;
}
.dmc-undo:disabled { opacity: .4; cursor: default; }
.dmc-undo:not(:disabled):hover { color: var(--navy); border-color: var(--navy); }

.dmc-panel { padding: 1.1rem 1.15rem 1.25rem; }
.dmc-step-head { font-family: var(--head); font-size: 1.35rem; margin: 0 0 .2rem; color: var(--navy); }
.dmc-step-why { margin-top: 0; }
.dmc-hint { color: var(--muted); font-size: .79rem; line-height: 1.5; margin: .35rem 0 .5rem; }

.dmc-label {
  display: block; margin: 1.05rem 0 .4rem;
  font-size: .69rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy);
}
.dmc-panel > .dmc-label:first-of-type { margin-top: .75rem; }

/* --- segmented control --- */

.dmc-seg {
  display: flex; flex-wrap: wrap; gap: 2px;
  background: rgba(5,36,94,.05); border: 1px solid var(--line-2);
  border-radius: 2px; padding: 2px;
}
.dmc-seg button {
  flex: 1 1 auto; min-width: 4.5rem;
  background: none; border: 0; cursor: pointer;
  padding: .45rem .5rem; border-radius: 2px;
  color: var(--muted); font-size: .78rem; font-weight: 600; line-height: 1.25;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.dmc-seg button small { font-size: .64rem; font-weight: 500; opacity: .8; }
.dmc-seg button:hover { color: var(--navy); }
.dmc-seg button.sel { background: var(--navy); color: #fff; }
.dmc-seg button.sel small { opacity: .75; }

/* --- silhouette tiles --- */

.dmc-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: .4rem; }
.dmc-shape {
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: .5rem .25rem .4rem; cursor: pointer; color: var(--navy);
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
}
.dmc-shape svg { width: 2rem; height: 2rem; }
.dmc-shape:hover { border-color: var(--navy); }
.dmc-shape.sel { border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); }

/* Ten cap fittings, so the tiles go narrower and the labels wrap rather than
   truncate — the difference between "Rounded Square" and "Rounded Rectangle"
   is the whole label. */
.dmc-caps { grid-template-columns: repeat(auto-fit, minmax(4.1rem, 1fr)); }
.dmc-caps .dmc-shape { font-size: .63rem; line-height: 1.25; padding-inline: .2rem; }
.dmc-caps .dmc-shape svg { width: 1.9rem; height: 1.9rem; }
.dmc-caps .dmc-shape span { text-align: center; }

/* --- ranges --- */

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.4rem; background: none; cursor: pointer; margin: 0 0 .2rem;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: rgba(5,36,94,.16);
}
input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(5,36,94,.16); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.05rem; height: 1.05rem; margin-top: -.5rem;
  border-radius: 50%; background: var(--ember); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(5,36,94,.3);
}
input[type=range]::-moz-range-thumb {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--ember); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(5,36,94,.3);
}

.dmc-two { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 520px) { .dmc-two { grid-template-columns: 1fr; } }

.dmc-size-sense {
  margin: .6rem 0 0; font-size: .78rem; color: var(--navy);
  background: rgba(5,36,94,.045); border-inline-start: 3px solid var(--ember);
  padding: .5rem .7rem; border-radius: 2px;
}

/* --- drag editors --- */

.dmc-profile {
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: .4rem; margin-bottom: .3rem;
}
.dmc-profile canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }

/* --- colour picker --- */

.dmc-cwrap { position: relative; }
.dmc-select {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: .55rem .7rem; cursor: pointer; color: var(--ink); font-size: .85rem; text-align: start;
}
.dmc-select:hover, .dmc-select.open { border-color: var(--navy); }
.dmc-sw {
  width: 1.3rem; height: 1.3rem; border-radius: 2px; flex: none;
  border: 1px solid rgba(5,36,94,.2); background-color: #fff;
}
.dmc-cbtn span:nth-child(2) { flex: 1; }
.dmc-caret {
  width: .5rem; height: .5rem; border-inline-end: 2px solid var(--muted);
  border-block-end: 2px solid var(--muted); transform: rotate(45deg); margin-bottom: .2rem;
}

.dmc-cpanel {
  position: absolute; inset-inline: 0; top: calc(100% + .3rem); z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 14px 40px rgba(5,36,94,.18);
  padding: .55rem;
}
.dmc-csearch {
  width: 100%; border: 1px solid var(--line); border-radius: 2px;
  padding: .45rem .6rem; font-size: .82rem; margin-bottom: .5rem;
}
.dmc-cbody { max-height: 21rem; overflow-y: auto; }
.dmc-cgroup + .dmc-cgroup { margin-top: .6rem; }
.dmc-cglabel {
  margin: 0 0 .35rem; font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.dmc-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .3rem; }
.dmc-cs {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid transparent; border-radius: 2px;
  padding: .28rem .3rem; cursor: pointer; text-align: start;
  font-size: .68rem; color: var(--ink); line-height: 1.2; overflow: hidden;
}
.dmc-cs i {
  width: 1.1rem; height: 1.1rem; border-radius: 2px; flex: none;
  border: 1px solid rgba(5,36,94,.2); display: block;
}
.dmc-cs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmc-cs:hover { border-color: var(--line); background: rgba(5,36,94,.04); }
.dmc-cs.sel { border-color: var(--ember); background: rgba(233,123,6,.08); font-weight: 600; }

/* --- finish notes --- */

.dmc-finish-note { opacity: .55; transition: opacity .2s; }
.dmc-finish-note.on { opacity: 1; color: var(--ink); }

/* --- the buy step --- */

.dmc-price { padding: 1.1rem 1.15rem 1.35rem; }
.dmc-summary {
  margin: 0 0 .7rem; font-size: .78rem; color: var(--muted); line-height: 1.5;
}
.dmc-total {
  display: flex; align-items: baseline; justify-content: space-between;
  border-block: 1px solid var(--line); padding: .7rem 0;
}
.dmc-total span { font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dmc-total strong { font-family: var(--head); font-size: 2.1rem; color: var(--navy); font-weight: 600; }
.dmc-breakdown { margin: .55rem 0 0; font-size: .74rem; color: var(--muted); line-height: 1.55; }

.dmc-qty { margin-top: 1rem; }
.dmc-qty input {
  width: 5rem; border: 1px solid var(--line); border-radius: 2px;
  padding: .45rem .6rem; font-size: .9rem;
}
.dmc-qty small { display: block; margin-top: .3rem; font-size: .7rem; color: var(--muted); }

.dmc-name-label {
  display: block; margin: 1rem 0 .35rem;
  font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
}
.dmc-name-label em { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.dmc-name {
  width: 100%; border: 1px solid var(--line); border-radius: 2px;
  padding: .55rem .7rem; font-size: .88rem;
}

.button, .dmc-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; margin-top: .9rem;
  background: var(--ember); color: #fff; border: 1px solid var(--ember);
  border-radius: 2px; padding: .8rem 1rem; cursor: pointer;
  font-size: .85rem; font-weight: 700; letter-spacing: .04em;
  text-decoration: none;
}
.button:hover, .dmc-add:hover { background: #d06e05; border-color: #d06e05; }
.dmc-ghost { background: none; color: var(--navy); border-color: var(--navy); }
.dmc-ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.dmc-guarantee { margin: .55rem 0 0; font-size: .74rem; color: var(--muted); text-align: center; }
.dmc-share-url {
  width: 100%; margin-top: .5rem; border: 1px solid var(--line); border-radius: 2px;
  padding: .45rem .6rem; font-size: .72rem; color: var(--muted);
}
.dmc-fine { margin: .9rem 0 0; font-size: .68rem; color: var(--muted); line-height: 1.55; }

/* --- wizard nav --- */

.dmc-wiznav {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  padding: .7rem .9rem;
  background: #fff;
  border-top: 1px solid var(--line-2);
}
.dmc-navbtn {
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  border-radius: 2px; padding: .55rem 1.15rem; cursor: pointer;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.dmc-navbtn:disabled { opacity: .35; cursor: default; }
.dmc-navbtn--ghost { background: none; color: var(--navy); }
.dmc-navprice { text-align: center; line-height: 1.15; }
.dmc-navprice span { font-family: var(--head); font-size: 1.15rem; color: var(--navy); }
.dmc-navprice small { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------- narrow screens --- */

/* Below the two-pane threshold the panes stack, and the stage keeps a fixed
   share of the viewport so the render is still visible while a control below
   it is being dragged. */
@media (max-width: 900px) {
  .pxl-app { grid-template-rows: auto minmax(0, 1fr); }
  .dmc-grid { grid-template-columns: 1fr; grid-template-rows: 38vh minmax(0, 1fr); }
  .dmc-left { min-height: 0; }
  .dmc-issues { max-height: 6.5rem; }
  .dmc-right { min-height: 0; }
}

/* Very narrow: the badge, the size chip and the lamp toggle all live along the
   bottom of the stage and start colliding. Lift the toggle clear rather than
   letting them overlap. */
@media (max-width: 460px) {
  .dmc-lamp { bottom: 2.5rem; }
  .dmc-badge, .dmc-scale-chip { font-size: .6rem; padding: .2rem .45rem; }
  .dmc-caps { grid-template-columns: repeat(auto-fit, minmax(3.7rem, 1fr)); }
}

/* -------------------------------------------------------------- toast --- */

.pxl-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 60;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: var(--navy); color: #fff; border-radius: 999px;
  padding: .55rem 1.2rem; font-size: .78rem; font-weight: 600;
  transition: opacity .2s ease, transform .2s ease;
}
.pxl-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* A fitting this shade cannot take. Still legible, still explains itself on
   hover — greyed out rather than removed, so the set does not reshuffle
   under the cursor every time a slider moves. */
.dmc-shape.off {
  opacity: .34;
  cursor: not-allowed;
  border-style: dashed;
}
.dmc-shape.off:hover { border-color: var(--line); }