:root {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "Anton Softshift";
  src: url("/tilt-club/fonts/anton-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/tilt-club/fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/tilt-club/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #241d24;
  --muted: #584754;
  --paper: #c8c5bc;
  --line: #2B1330;
  --persimmon: #E94A2F;
  --aubergine: #2B1330;
  --chartreuse: #D7F23A;
  --lilac: #C8A7E8;
  --silver: #C8C5BC;
  --module: #E94A2F;
  --clear: #2f7b54;
  --tight: #b37416;
  --blocked: #bd312a;
}

:root[data-fabric="AUBERGINE-CORDUROY"] { --module: var(--aubergine); }
:root[data-fabric="CHARTREUSE-WOOL"] { --module: var(--chartreuse); }
:root[data-fabric="LILAC-BOUCLE"] { --module: var(--lilac); }
:root[data-fabric="WARM-SILVER-TEXTURE"] { --module: var(--silver); }
:root.prototype { --module: #8e949a; --paper: #f1f2f2; --line: #4d5358; --persimmon: #8e949a; --aubergine: #34383c; --chartreuse: #c8cccf; --lilac: #aeb4b8; --silver: #c8cccf; }
:root[data-clearance="CLEAR"] { --status: var(--clear); }
:root[data-clearance="TIGHT"] { --status: var(--tight); }
:root[data-clearance="BLOCKED"] { --status: var(--blocked); }

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--paper); color: var(--ink); }
body { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, select, input { min-height: 44px; border: 1px solid color-mix(in srgb, var(--line) 45%, transparent); background: color-mix(in srgb, var(--paper) 92%, white); color: var(--ink); border-radius: 4px; }
button { padding: 0 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 0; font-size: 12px; font-weight: 800; }
button:hover, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--chartreuse) 70%, white); outline-offset: 2px; }

.planner-shell { height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 14px 18px; border-bottom: 2px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, white); }
.brand { display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.brand strong { font-family: "Anton Softshift", Impact, sans-serif; font-size: 26px; line-height: 1; font-weight: 400; }
.brand span, .utility a { color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 800; }
.status-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { border: 1px solid var(--line); padding: 8px 10px; min-height: 34px; display: inline-flex; align-items: center; background: color-mix(in srgb, var(--paper) 80%, white); font-size: 12px; text-transform: uppercase; font-weight: 900; }
.chip.status { color: white; background: var(--status); }
.utility { display: flex; gap: 12px; align-items: center; justify-content: end; }

.workspace { min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px; }
.rail, .inspector { min-height: 0; overflow: auto; padding: 16px; border-right: 2px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, white); }
.inspector { border-right: 0; border-left: 2px solid var(--line); }
.panel-title { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0; color: var(--muted); }
.button-grid, .preset-grid, .fabric-grid, .control-grid, .door-grid { display: grid; gap: 8px; margin-bottom: 18px; }
.fabric-grid { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
.swatch { aspect-ratio: 1; padding: 0; border-width: 2px; background: var(--swatch); }
.swatch span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.control-grid, .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.control-grid label, .door-grid label { display: grid; gap: 5px; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.control-grid input, .door-grid input, .door-grid select { width: 100%; padding: 0 8px; }
.selected-readout, #planner-status { font-size: 12px; line-height: 1.4; color: var(--muted); }

.canvas-wrap { min-width: 0; min-height: 0; padding: 18px; display: grid; place-items: center; background: radial-gradient(circle at 30% 10%, color-mix(in srgb, var(--persimmon) 16%, transparent), transparent 34%), var(--paper); }
#planner-svg { width: min(100%, 980px); height: auto; max-height: calc(100dvh - 140px); aspect-ratio: 4200 / 3800; touch-action: none; overflow: visible; }
.floor { fill: color-mix(in srgb, var(--persimmon) 10%, var(--paper)); }
.grid { fill: url(#softshift-grid); }
.room-wall { fill: none; stroke: var(--line); stroke-width: 4; vector-effect: non-scaling-stroke; }
.obstacle { fill: color-mix(in srgb, var(--line) 28%, white); stroke: var(--line); stroke-width: 24; }
.door-swing { fill: color-mix(in srgb, var(--chartreuse) 42%, transparent); stroke: var(--status); stroke-dasharray: 42 34; stroke-width: 20; }
.door-line { stroke: var(--line); stroke-width: 42; stroke-linecap: round; }
.module { color: var(--module); cursor: grab; transform-origin: center; transform-box:fill-box; transition: transform 180ms ease, opacity 180ms ease; }
.module rect { fill: url(#cushion-texture); stroke: color-mix(in srgb, var(--line) 55%, black); stroke-width: 20; }
.module text { text-anchor: middle; dominant-baseline: central; font-size: 116px; font-weight: 900; fill: color-mix(in srgb, white 86%, var(--ink)); pointer-events: none; }
.module .cushion-cut { stroke: color-mix(in srgb, white 42%, var(--line)); stroke-width: 16; stroke-linecap: round; pointer-events: none; }
.module.selected { transform: scale(1.03); }
.module.selected rect { stroke: var(--chartreuse); stroke-width: 34; }
.module.blocked rect { stroke: var(--blocked); stroke-dasharray: 48 34; }
.dimension { fill: var(--muted); font-size: 120px; font-weight: 900; text-anchor: middle; }
.summary-list { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 12px; line-height: 1.55; }
.summary-list button { min-height: 44px; padding: 0 6px; font-size: 10px; }
#json-backup { width: 100%; min-height: 150px; margin-top: 12px; padding: 10px; border: 1px solid var(--line); background: white; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.invalid-drop #planner-svg { animation: invalid-shake 260ms ease; }

@keyframes invalid-shake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}

@media (max-width: 1199px) {
  body { overflow: auto; }
  .planner-shell { height: auto; min-height: 100dvh; }
  .workspace { grid-template-columns: 1fr; }
  .rail, .inspector { border: 0; border-top: 2px solid var(--line); }
  .rail { order: 2; }
  .canvas-wrap { order: 1; min-height: 56dvh; }
  .inspector { order: 3; }
  .button-grid, .preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body { overflow: hidden; }
  .planner-shell { height: 100dvh; min-height:0; grid-template-rows: auto minmax(0,1fr); }
  .topbar { grid-template-columns: 1fr auto; gap: 6px; padding: 8px 12px; }
  .brand strong { font-size: 20px; }
  .brand span {display:none}
  .status-strip{grid-column:1/-1;grid-row:2;gap:4px;justify-content:flex-start}
  .status-strip .chip{min-height:25px;padding:4px 6px;font-size:9px}
  .utility { justify-content: end;gap:6px;font-size:9px; }
  .utility .chip{font-size:9px;padding:2px 5px;min-height:34px}
  .utility a{font-size:9px;display:flex;align-items:center;min-height:44px}
  .workspace { display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(220px,43%) minmax(0,1fr);overflow:hidden; }
  .canvas-wrap { grid-column:1/-1;grid-row:1;min-height: 0; height: 100%; padding: 8px 14px; align-content: center; }
  #planner-svg { max-height: 100%; width: 100%; }
  .rail { grid-column:1;grid-row:2;display: block; min-height: 0; overflow: auto; border-top: 2px solid var(--line); padding: 10px; }
  .inspector { grid-column:2;grid-row:2;display: block; min-height: 0; overflow: auto; border-top: 2px solid var(--line);border-left:1px solid var(--line); padding: 10px; }
  .button-grid, .preset-grid { grid-template-columns: 1fr;gap:6px; }
  .fabric-grid { grid-template-columns: repeat(2,minmax(44px,1fr)); }
  .control-grid, .door-grid { grid-template-columns: 1fr; }
  button{font-size:10px;padding:0 7px}
  .panel-title { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

.topbar{background:var(--line);color:#f3e9da;border-bottom:4px double #f3e9da}
.brand{color:#f3e9da}.brand span,.utility a{color:#f3e9da}
.utility .chip,.status-strip .chip{color:var(--ink)}.status-strip .status{color:white}
#cushion-texture>rect{fill:var(--module)}
.module rect{filter:drop-shadow(12px 24px 16px #2b133050)}
.canvas-wrap{background-color:var(--paper);background-image:linear-gradient(#2b133012 1px,transparent 1px),linear-gradient(90deg,#2b133012 1px,transparent 1px);background-size:30px 30px}