/* Huisje: calm light "baseplate" page, LEGO primary accents, bricks for buttons, 1x1 tiles and plates for status
   and colour. Colour values are the official LDraw/Rebrickable ones. */

:root {
  --bg: #f3f5f8;
  --plate: #ffffff;
  --plate-edge: #dbe1e8;
  --stud: #eceff3;
  --ink: #1b2a34;          /* LEGO Black */
  --muted: #55616b;
  --grey: #a0a5a9;         /* Light Bluish Gray */
  --grey-dark: #6c6e68;    /* Dark Bluish Gray */
  --red: #c91a09;
  --red-edge: #8f1206;
  --yellow: #f2cd37;
  --yellow-edge: #c4a31f;
  --blue: #0055bf;
  --green: #237841;
  --green-edge: #17542d;
  --focus: #0055bf;
  --radius: 10px;
  --display: 'Titan One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Rubik', system-ui, sans-serif;
  --bin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath d='M5 0h4l1 2h4v2H0V2h4zM1 5h12l-1 10H2z'/%3E%3C/svg%3E");
  --stud-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Crect width='16' height='14' rx='3'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
  min-height: 100vh;
}

h1, h2, p, ol, ul, dl, dd, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.nowrap { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* ---------- bricks (buttons) ---------- */

.brick {
  --b: var(--red);
  --edge: var(--red-edge);
  position: relative;
  margin-top: 8px;                        /* room for the studs */
  padding: 14px 26px 17px;
  border: 0;
  border-radius: 6px;
  background: var(--b);
  color: #fff;
  font: 400 18px/1.1 var(--display);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: inset 0 -6px 0 var(--edge), inset 0 2px 0 rgb(255 255 255 / 0.22), 0 3px 0 rgb(27 42 52 / 0.12);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.brick::before {                          /* the studs: a row of rounded bumps along the top */
  content: '';
  position: absolute;
  left: 10px; right: 10px; top: -7px;
  height: 8px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.28), transparent 70%), var(--b);
  -webkit-mask: var(--stud-mask) 0 0 / 16px 8px space no-repeat;
  mask: var(--stud-mask) 0 0 / 16px 8px space no-repeat;
}
.brick:hover:not(:disabled) { transform: translateY(-1px); }
.brick:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 -3px 0 var(--edge), inset 0 2px 0 rgb(255 255 255 / 0.22);
}
.brick:disabled { cursor: not-allowed; }
.brick-red:disabled { opacity: 0.7; }
.brick-grey { --b: #c7cbcf; --edge: #a4a9ae; color: #3c4750; }
.brick-remove {                            /* a small white brick with a red bin: take this row away */
  --b: #ffffff; --edge: #d5dbe1;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 6px 11px 9px;
  color: var(--red-edge);
  font: 500 14px/1 var(--body); letter-spacing: 0;
  box-shadow: inset 0 -4px 0 var(--edge), inset 0 0 0 1px var(--edge);
}
.brick-remove::before { left: 6px; right: 6px; top: -5px; height: 6px; -webkit-mask-size: 10px 6px; mask-size: 10px 6px; filter: drop-shadow(0 -1px 0 var(--edge)); }
.brick-remove::after {                     /* the bin */
  content: ''; order: -1;
  width: 14px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--bin) center / contain no-repeat;
  mask: var(--bin) center / contain no-repeat;
}
.brick-remove:hover:not(:disabled) { color: var(--red); }
.brick-remove[hidden] { display: none; }

/* ---------- hero ---------- */

.hero {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  min-height: 100vh;
  padding: 48px 16px 64px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, var(--stud) 0 5px, transparent 5.5px) 0 0 / 24px 24px,
    var(--bg);
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 400 22px/1 var(--display);
  letter-spacing: 0.02em;
}
.brand-brick {
  position: relative;
  width: 34px; height: 18px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--red);
  box-shadow: inset 0 -4px 0 var(--red-edge);
}
.brand-brick::before {
  content: '';
  position: absolute; left: 4px; right: 4px; top: -5px; height: 6px;
  background: var(--red);
  -webkit-mask: var(--stud-mask) 0 0 / 10px 6px space no-repeat;
  mask: var(--stud-mask) 0 0 / 10px 6px space no-repeat;
}

.hero h1 {
  max-width: 13em;
  font: 400 clamp(38px, 7vw, 76px)/1.02 var(--display);
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.address { width: min(680px, 100%); display: grid; gap: 8px; text-align: left; }
.address-label { font-weight: 700; font-size: 15px; }
.address-row { display: flex; gap: 14px; align-items: flex-end; }
.address input {
  flex: 1; min-width: 0;
  height: 60px;
  padding: 0 18px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--plate);
  font-size: 19px;
  box-shadow: 0 5px 0 var(--ink);
}
.address input::placeholder { color: #7d878f; }
.address input:focus-visible { outline-offset: 4px; }
.address .brick { height: 60px; white-space: nowrap; font-size: 20px; padding: 0 26px 5px; }
.address-msg:empty { display: none; }
.address-msg { font-weight: 500; color: var(--red-edge); }
.address-note { color: var(--muted); font-size: 14px; }

/* With a project open, the hero becomes a slim bar with the address box. */
body.has-project .hero {
  min-height: 0;
  grid-template-columns: auto minmax(0, 620px);
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 18px;
  text-align: left;
  background: var(--bg);
}
body.has-project .hero h1,
body.has-project .address-label,
body.has-project .address-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.has-project .address input { height: 50px; font-size: 17px; box-shadow: 0 4px 0 var(--ink); }
body.has-project .address .brick { height: 50px; font-size: 17px; padding: 0 20px 5px; }

/* ---------- workspace ---------- */

.workspace {
  display: grid;
  grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
  grid-template-areas: "net net" "panels stage";
  gap: 22px;
  padding: 4px 24px 40px;
  max-width: 1600px;
  margin: 0 auto;
}
.workspace[hidden] { display: none; }
.net-msg { grid-area: net; padding: 10px 14px; border-radius: 8px; background: #fde9e7; color: var(--red-edge); font-weight: 500; }
.panels { grid-area: panels; display: grid; gap: 20px; align-content: start; }

/* Cards are baseplates: white plate, faint stud grid, a chunky edge underneath. */
.card {
  padding: 20px 20px 22px;
  border: 2px solid var(--plate-edge);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12px 12px, var(--stud) 0 4.5px, transparent 5px) 0 0 / 24px 24px,
    var(--plate);
  background-size: 24px 24px, auto;
  box-shadow: 0 5px 0 var(--plate-edge);
}
.card > * { position: relative; }
.card-title {
  display: inline-block;
  margin-bottom: 14px;
  padding: 2px 10px 3px;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  font: 400 17px/1.35 var(--display);
  letter-spacing: 0.03em;
}

/* ---------- stage: the 3D view ---------- */

.stage {
  grid-area: stage;
  position: sticky; top: 16px;
  align-self: start;
  display: grid; gap: 12px;
}
.stage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.stage-address { font: 400 clamp(24px, 3vw, 34px)/1.1 var(--display); }
.detail-level { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.level-studs { display: inline-flex; gap: 3px; }
.level-studs span { width: 12px; height: 12px; border-radius: 50%; background: #d4d9de; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12); }
.level-studs span.on { background: var(--green); }

.viewer {
  position: relative;
  height: calc(100vh - 150px);
  min-height: 420px;
  border: 2px solid var(--plate-edge);
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, #ffffff 0%, #eef1f5 60%, #e2e7ed 100%);
  box-shadow: 0 5px 0 var(--plate-edge);
}
.viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.viewer-msg {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  color: var(--muted); text-align: center; font-weight: 500;
}
.viewer-msg[hidden] { display: none; }
.viewer.is-building::after {             /* a new version is being built: tag the corner, keep the old one visible */
  content: 'Rebuilding…';
  position: absolute; top: 14px; left: 14px;
  padding: 5px 12px 6px;
  border-radius: 5px;
  background: var(--yellow);
  box-shadow: inset 0 -3px 0 var(--yellow-edge);
  font: 400 14px/1.2 var(--display);
  letter-spacing: 0.02em;
}
.viewer-hint { color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- scale switch: two bricks side by side, the chosen one pressed in ---------- */

.scales { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
.scales[hidden] { display: none; }
.scale {
  --b: var(--plate);
  --edge: var(--plate-edge);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ratio name" "ratio note" "meta meta";
  align-items: baseline;
  gap: 0 12px;
  margin-top: 8px;
  padding: 12px 16px 16px;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--b);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 -5px 0 var(--edge);
  transition: transform 0.08s ease;
}
.scale::before {                           /* studs, like the buttons */
  content: '';
  position: absolute; left: 12px; right: 12px; top: -8px; height: 8px;
  background: var(--edge);
  -webkit-mask: var(--stud-mask) 0 0 / 16px 8px space no-repeat;
  mask: var(--stud-mask) 0 0 / 16px 8px space no-repeat;
}
.scale:hover:not(.is-on) { transform: translateY(-1px); }
.scale.is-on { --b: var(--yellow); --edge: var(--yellow-edge); transform: translateY(2px); box-shadow: inset 0 -3px 0 var(--edge); }
.scale-ratio { grid-area: ratio; font: 400 30px/1 var(--display); letter-spacing: 0.01em; }
.scale-name { grid-area: name; font-weight: 700; }
.scale-note { grid-area: note; font-size: 13px; color: var(--muted); line-height: 1.2; }
.scale-note:empty::before { content: 'ready to order'; visibility: hidden; }   /* both bricks the same height */
.scale.is-on .scale-note { color: var(--ink); }
.scale-meta { grid-area: meta; margin-top: 8px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.scale.is-error .scale-meta { color: var(--red-edge); }
.scale-bar {                               /* progress of a running build, along the bottom edge */
  position: absolute; left: 0; bottom: 0;
  width: calc(var(--p, 1) * 100%); height: 5px;
  border-radius: 0 0 0 6px;
  background: var(--blue);
  opacity: 0;
  transition: width 0.3s ease;
}
.scale.is-running .scale-bar { opacity: 1; }
.scale.is-running .scale-meta::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--blue); animation: blink 0.8s ease-in-out infinite alternate; }

/* ---------- build ---------- */

.build-summary { font-weight: 500; margin-bottom: 14px; }
.build-summary.is-error { color: var(--red-edge); }

.stages { display: grid; gap: 9px; }
.stage-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "brick label" "brick status";
  align-items: center;
  column-gap: 12px;
  font-size: 15px; line-height: 1.3;
}
.stage-row .mini-brick { grid-area: brick; }
.stage-label { grid-area: label; }
.stage-status { grid-area: status; color: var(--muted); font-size: 13px; }

/* Each step is a 2x1 brick that snaps on when the step is done. */
.mini-brick {
  --b: var(--red);
  --edge: var(--red-edge);
  position: relative;
  width: 32px; height: 16px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--b);
  box-shadow: inset 0 -4px 0 var(--edge);
}
.mini-brick::before {
  content: '';
  position: absolute; left: 4px; right: 4px; top: -5px; height: 6px;
  background: var(--b);
  -webkit-mask: var(--stud-mask) 0 0 / 9px 6px space no-repeat;
  mask: var(--stud-mask) 0 0 / 9px 6px space no-repeat;
}
.stage-row:nth-child(5n+1) .mini-brick { --b: #0055bf; --edge: #003d8a; }
.stage-row:nth-child(5n+2) .mini-brick { --b: var(--red); --edge: var(--red-edge); }
.stage-row:nth-child(5n+3) .mini-brick { --b: var(--yellow); --edge: var(--yellow-edge); }
.stage-row:nth-child(5n+4) .mini-brick { --b: var(--green); --edge: var(--green-edge); }
.stage-row:nth-child(5n+5) .mini-brick { --b: #fe8a18; --edge: #c96a0c; }

.stage-row.is-pending .mini-brick,
.stage-row.is-idle .mini-brick { --b: transparent; --edge: transparent; outline: 2px dashed #b9c0c7; outline-offset: -2px; }
.stage-row.is-pending .mini-brick::before,
.stage-row.is-idle .mini-brick::before { background: #c9cfd5; }
.stage-row.is-pending .stage-label, .stage-row.is-idle .stage-label { color: var(--muted); }
.stage-row.is-running .mini-brick { animation: hover-in 0.9s ease-in-out infinite alternate; }
.stage-row.is-running .stage-label { font-weight: 700; }
.stage-row.is-done .mini-brick { animation: snap 0.25s ease-out; }
.stage-row.is-error .mini-brick { --b: var(--red); --edge: var(--red-edge); }
.stage-row.is-error .stage-status { color: var(--red-edge); font-weight: 500; }

@keyframes hover-in { from { transform: translateY(-5px); opacity: 0.55; } to { transform: translateY(-1px); opacity: 1; } }
@keyframes snap { from { transform: translateY(-6px); } to { transform: none; } }

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 18px; padding-top: 14px;
  border-top: 2px dashed var(--plate-edge);
}
.stats[hidden] { display: none; }
.stats dt { color: var(--muted); font-size: 13px; }
.stats dd { font: 400 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stats .is-bad dd { color: var(--red); }

/* ---------- options: brick switch ---------- */

.option { margin-bottom: 18px; }
.switch { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative;
  width: 62px; height: 32px;
  margin-top: 4px;
  border-radius: 6px;
  background: #cfd4d9;
  box-shadow: inset 0 3px 0 rgb(0 0 0 / 0.12);
  transition: background 0.15s ease;
}
.switch-knob {                             /* a 1x1 brick that slides across */
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 -4px 0 #d3d8dd, 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 0.15s ease;
}
.switch-knob::before {
  content: '';
  position: absolute; left: 6px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 0 #c2c8ce, inset 0 0 0 1px #e5e9ed;
}
.switch input:checked + .switch-track { background: var(--green); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(30px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 3px; }
.switch-text { font-weight: 700; }
.switch-text small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }

/* ---------- colour pickers: round 1x1 plates ---------- */

.colours + .colours { margin-top: 16px; }
.colours legend { margin-bottom: 8px; font-weight: 700; }
.colours-name { font-weight: 400; color: var(--muted); }
.colours-name:not(:empty)::before { content: '· '; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), inset 0 -3px 0 rgb(0 0 0 / 0.16);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.swatch::before {                          /* the stud */
  content: '';
  position: absolute; inset: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.swatch:hover { transform: translateY(-2px); }
input:checked + .swatch { box-shadow: 0 0 0 3px var(--plate), 0 0 0 6px var(--ink), inset 0 -3px 0 rgb(0 0 0 / 0.16); }
input:focus-visible + .swatch { outline: 3px solid var(--focus); outline-offset: 7px; }
.swatch::after {                           /* the name, on hover or keyboard focus */
  content: attr(data-name);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 2;
}
.swatch:hover::after, input:focus-visible + .swatch::after { opacity: 1; }

/* ---------- cars: one row per car spot; type as small bricks, colour as plates ---------- */

.cars-note { margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.cars-note[hidden] { display: none; }
.car-list { display: grid; gap: 18px; }
.car + .car { padding-top: 16px; border-top: 2px dashed var(--plate-edge); }
.car-title {                               /* floats, so it sits inside the row, not on its border */
  float: left; width: 100%; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 400 17px/1.3 var(--display); letter-spacing: 0.02em;
}
.car-empty { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.car-empty .add-row { margin-top: 0; }
.car-empty[hidden], .car-body[hidden] { display: none; }
.car-where { font: 400 14px/1.3 var(--body); color: var(--muted); letter-spacing: 0; }
.car-body { clear: both; display: grid; gap: 14px; margin-top: 14px; }
.car:disabled { opacity: 0.6; }
.car-label, .car-colours legend { margin-bottom: 8px; font-weight: 700; }
.types { display: flex; flex-wrap: wrap; gap: 8px; }
.type {                                     /* a 2x1 plate, pressed in when chosen (as the scale bricks) */
  display: grid;
  padding: 7px 14px 10px;
  border-radius: 6px;
  background: #e3e7eb;
  box-shadow: inset 0 -4px 0 #c6ccd2;
  font-weight: 500; line-height: 1.2;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.type small { font-size: 12px; font-weight: 400; color: var(--muted); }
.type:hover { transform: translateY(-1px); }
input:checked + .type { background: var(--yellow); box-shadow: inset 0 -3px 0 var(--yellow-edge); transform: translateY(2px); }
input:checked + .type small { color: var(--ink); }
input:focus-visible + .type { outline: 3px solid var(--focus); outline-offset: 3px; }
input:disabled + .type { background: transparent; box-shadow: none; outline: 2px dashed #b9c0c7; outline-offset: -2px; color: var(--muted); cursor: not-allowed; transform: none; }
.car-swatches { display: grid; gap: 10px; }

/* ---------- household and plaque ---------- */

.pet-list:not(:empty) { margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--plate-edge); }
.breed-field[hidden] { display: none; }
.row-head { clear: both; display: flex; gap: 8px; }
.row-name-input, #plaque {
  flex: 1; min-width: 0; padding: 8px 12px;
  border: 2px solid var(--plate-edge); border-radius: 8px; background: var(--plate);
}
.row-name-input:focus, #plaque:focus { border-color: var(--focus); outline: none; }
.shuffle, .add-row {
  padding: 7px 14px 10px; border: 0; border-radius: 6px; cursor: pointer; font-weight: 500;
  background: #e3e7eb; box-shadow: inset 0 -4px 0 #c6ccd2;
}
.shuffle:hover, .add-row:hover { transform: translateY(-1px); }
.add-row { margin-top: 14px; }
.add-row:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.clothes { display: flex; align-items: center; gap: 10px; }
.clothes-note, .face-note { font-size: 14px; color: var(--muted); }
.face-note { margin: 0; }
.plaque-option { margin-top: 18px; display: grid; gap: 8px; }
.plaque-label { font-weight: 700; }
.plaque-first {                               /* the address line as it stands on the black tile */
  padding: 6px 12px; border-radius: 4px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 500; text-align: center;
}
.plaque-first:empty { display: none; }
.plaque-note { font-size: 14px; color: var(--muted); }
.options-msg { font-size: 14px; font-weight: 500; color: var(--red); }
.swatch-group-label { font-size: 13px; color: var(--muted); }

/* ---------- sources: 1x1 round tiles as status lights ---------- */

.sources { display: grid; gap: 11px; }
.source { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.tile {
  width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%;
  background: var(--t, #cfd4d9);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18), inset 0 2px 0 rgb(255 255 255 / 0.35);
}
.source.is-ok { --t: var(--green); }
.source.is-pending { --t: var(--yellow); }
.source.is-pending .tile { animation: blink 1s ease-in-out infinite alternate; }
.source.is-missing { --t: #cfd4d9; }
.source.is-error { --t: var(--red); }
.source-text { display: grid; line-height: 1.3; }
.source-label { font-weight: 500; }
.source-detail { font-size: 14px; color: var(--muted); }
.source.is-error .source-detail { color: var(--red-edge); }
@keyframes blink { from { opacity: 0.45; } to { opacity: 1; } }

.dropzone {
  margin-top: 18px;
  border: 2px dashed #b9c0c7;
  border-radius: 10px;
  background: var(--plate);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.is-over { border-color: var(--blue); background: #eaf1fb; }
.dropzone-label { display: grid; gap: 4px; padding: 16px; cursor: pointer; font-size: 14px; color: var(--muted); }
.dropzone-label strong { color: var(--blue); font-size: 16px; }
.dropzone:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.dropzone-msg { padding: 0 16px 14px; font-size: 14px; font-weight: 500; }
.dropzone-msg:empty { display: none; }

/* ---------- order ---------- */

.card-order p { color: var(--muted); }
.card-order .brick { margin-top: 18px; width: 100%; }
.order-note { margin-top: 8px; font-size: 14px; text-align: center; }

/* ---------- footer ---------- */

.foot { padding: 8px 16px 28px; text-align: center; color: var(--muted); font-size: 13px; }
body:not(.has-project) .foot { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "net" "stage" "panels";
    padding: 4px 16px 32px;
  }
  .stage { position: static; }
  .viewer { height: 62vh; min-height: 320px; }
  body.has-project .hero { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px 14px; }
}

@media (max-width: 560px) {
  .address-row { flex-direction: column; align-items: stretch; gap: 18px; }
  .address .brick { width: 100%; }
  body.has-project .address-row { flex-direction: row; gap: 10px; }
  body.has-project .address .brick { width: auto; padding: 0 18px 5px; font-size: 16px; }
  body.has-project .btn-long { display: none; }
  .scale { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ratio" "name" "note" "meta"; padding: 10px 14px 14px; }
  .scale-ratio { font-size: 26px; margin-bottom: 4px; }
  .hero { gap: 18px; }
  .stats dd { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- the buyer's order page (order.html) ---------- */

.order-page {
  background:
    radial-gradient(circle at 50% 50%, var(--stud) 0 5px, transparent 5.5px) 0 0 / 24px 24px,
    var(--bg);
}
.order-wrap { width: min(640px, 100%); margin: 0 auto; padding: 32px 16px 48px; display: grid; gap: 20px; }
.order-wrap .brand { color: var(--ink); text-decoration: none; justify-self: start; }
.order-address { font: 400 clamp(24px, 5vw, 34px)/1.15 var(--display); }
.order-sub { color: var(--muted); font-size: 15px; }
.order-progress { margin-top: 14px; font-weight: 700; }
.steps { display: grid; gap: 10px; margin-top: 12px; }
.step { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; }
.step-tick {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; color: #fff;
  background: #dfe3e7;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.15), inset 0 2px 0 rgb(255 255 255 / 0.35);
}
.step.is-done .step-tick { background: var(--green); }
.step.is-open .step-label { color: var(--muted); }
.order-foot { color: var(--muted); font-size: 14px; text-align: center; }