@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');

:root{--ui-font:'DM Sans',sans-serif;--ui-label-font:ui-monospace,'SF Mono',Menlo,monospace;--ui-label-size:11px;--cell-x:12px;--cell-y:7px;--paper:#fcfcfc;--paper-band:#f1f1f1;font-family:var(--ui-font);color:#202020;background:#f4f4f4;font-synthesis:none;--ink:#171717;--yellow:#f5d638;--muted:#636363;--line:#d4d4d4}
*{box-sizing:border-box}
body{margin:0;touch-action:manipulation}
button,input,select{font:inherit;color:inherit;touch-action:manipulation}
button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:not(.gf-input):focus-visible,select:focus-visible{outline:2px solid #171717;outline-offset:3px}
i{display:inline-flex;flex-shrink:0}
i svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

header{height:56px;padding:0 var(--cell-x);display:flex;align-items:center;gap:var(--cell-x);background:var(--paper);border-bottom:1px solid var(--line)}
.brand{text-decoration:none;color:var(--ink);font:600 13px var(--ui-label-font);letter-spacing:.02em}


.primary{border:1px solid #f5d638;border-radius:0;background:var(--yellow);color:var(--ink);padding:var(--cell-y) var(--cell-x);min-height:44px;font-size:13px;font-weight:500;box-shadow:none}
.primary:hover{background:#ffe45c}
header>.primary{margin-left:auto;flex-shrink:0}
main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--cell-x);max-width:1680px;margin:auto;padding:var(--cell-x)}

/* Fixed 3D elevation, presented as a dimensioned drawing sheet. */
.room-area{position:sticky;top:14px;height:min(850px,calc(100vh - 84px));min-height:540px;overflow:hidden;border:1px solid var(--line);background:var(--paper);color:var(--ink)}

.drawing-title{display:flex;align-items:baseline;gap:12px;flex:1}
.room-heading #share{flex-shrink:0}
.drawing-footer{position:absolute;left:0;right:0;bottom:0;display:grid;z-index:3;background:var(--paper)}
.room-heading{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:var(--cell-x);border-bottom:1px solid var(--line);height:46px;padding:0 var(--cell-x);background:var(--paper-band)}
.room-heading h1{font:600 12px var(--ui-label-font);text-transform:uppercase;letter-spacing:.08em;margin:0}
.drawing-title>span{font:var(--ui-label-size) var(--ui-label-font);color:var(--muted)}
#scene{position:absolute;inset:46px 0 68px}
#scene canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
#scene canvas:active{cursor:grabbing}
#drawing-units{margin-left:auto;white-space:nowrap}
.drawing-caption{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;font:var(--ui-label-size)/1.5 var(--ui-label-font)}
.drawing-caption>span{padding:var(--cell-y);border-right:1px solid var(--line)}
.drawing-caption>span:last-child{border-right:0}
.room-hint{border-top:1px solid var(--line);padding:var(--cell-y) var(--cell-x);font:12px/1.5 var(--ui-font);color:var(--muted)}
input[type=range]{accent-color:var(--ink);cursor:pointer;min-width:0;height:44px;margin:0}
.icon-button{flex-shrink:0;width:44px;height:44px;padding:11px;border:1px solid var(--line);border-radius:0;color:var(--ink);background:var(--paper)}
.icon-button:hover,.icon-button[aria-pressed=true]{background:#f5d638;color:#171717}
#labels{position:absolute;inset:0;pointer-events:none}
#labels svg{display:block;width:100%;height:100%;overflow:hidden}
#labels line,#labels circle,#labels path{fill:none;stroke:#777777;stroke-width:.7;vector-effect:non-scaling-stroke}
#labels .dimension-line{stroke:#474747;stroke-width:.8;marker-start:url(#dimension-tick);marker-end:url(#dimension-tick)}
#labels .center-line{stroke:#ababab;stroke-dasharray:12 3 2 3;stroke-width:.6}
#labels .datum-line{stroke:#484848;stroke-width:1.4}
#labels .floor-hatch{stroke:#999999}
#labels .hook-mark circle,#labels .hook-line{stroke:#242424;stroke-width:.8}
#labels text{fill:#242424;font:11px ui-monospace,'SF Mono',monospace;text-anchor:middle;dominant-baseline:auto}
#labels .frame-id{font-size:10px;fill:#686868}
#labels .frame-id.is-selected{font-weight:700;fill:#202020}
#labels .frame-size{font-size:9px;fill:#686868}
.fallback{margin:70px auto;padding:20px;max-width:350px;font-size:14px;line-height:1.6;background:#fdfdfd;border:1px solid #c1c1c1}

/* Formulaire owns the cell grid, labels, wrapping and focus states. */
aside{min-width:0}
.gf{--gf-font:var(--ui-font);--gf-font-label:var(--ui-label-font);--gf-label-size:var(--ui-label-size);--gf-paper:var(--paper);--gf-paper-2:var(--paper-band);--gf-line:#d4d4d4;--gf-ink:#202020;--gf-muted:#636363;--gf-faint:#686868;--gf-accent:#171717;--gf-highlight:#fff9dd;--gf-hover:#f5f5f5;--gf-danger:#9b3e25;--gf-danger-bg:#fff0e8;--gf-radius:0px;--gf-input-size:16px;--gf-min-col:8.5rem;--gf-pad-x:var(--cell-x);--gf-pad-y:var(--cell-y)}
.section-title{display:flex;align-items:center;justify-content:space-between;height:46px;gap:12px;padding-block:0}
h2{font:600 12px var(--ui-label-font);letter-spacing:.08em;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:9px}
.gf-legend h2{font-family:var(--gf-legend-font);font-size:12px;letter-spacing:.08em}
.gf-label{white-space:normal;overflow:visible;line-height:1.5}
.gf-field{cursor:default}
.gf-input{min-height:32px;font-variant-numeric:tabular-nums}
.gf-input:focus-visible{outline:0}
.gf-input[type=number]{appearance:textfield;-moz-appearance:textfield}
.gf-input::-webkit-inner-spin-button{appearance:none}
.number-wrap{display:flex;align-items:center;gap:8px}
.number-wrap input{width:100%;min-width:0}
.unit{font-size:12px;color:var(--gf-muted)}
select.gf-input{appearance:auto;cursor:pointer}
.segmented{display:flex;gap:0;border:1px solid var(--line);border-radius:0;padding:0}
.segmented button{border:0;background:var(--paper);color:var(--muted);min-width:36px;min-height:32px;border-radius:0;font-size:12px;font-weight:600}
.segmented button[aria-pressed=true]{background:var(--yellow);box-shadow:none;color:#171717}
.count{padding:0 6px;display:inline-grid;place-items:center;font:500 var(--ui-label-size) var(--ui-label-font);min-width:22px;height:22px;background:#e8e8e8;color:#414141;border-radius:0}
.frame-toolbar{display:flex;align-items:center;gap:8px;padding:6px var(--cell-x);background:var(--paper)}
.frame-list{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
.frame-chip{flex:0 0 44px;min-width:0;padding:0;height:44px;border:0;border-right:1px solid var(--line);color:var(--muted);border-radius:0;background:var(--paper)}
.frame-chip:last-child{border-right:0}
.frame-chip.active{background:var(--yellow);color:var(--ink)}
.frame-chip span{font:12px var(--ui-label-font);color:inherit;pointer-events:none}
.frame-actions{display:flex;border-left:1px solid var(--line);padding-left:6px}
.frame-actions .icon-button{border:0}
.editor-tabs{display:none}
#share{width:36px;height:36px;padding:8px;border:0;background:transparent}
#labels .selection-outline{fill:none;stroke:var(--yellow);stroke-width:2;vector-effect:non-scaling-stroke}
.diagram-field{align-content:center;justify-items:center;padding:6px}
#drop-diagram{width:100px;height:64px;grid-column:1/-1}
.section-help{background:var(--gf-paper);padding:var(--cell-y) var(--cell-x);font-size:12px;line-height:1.5;color:var(--gf-muted)}
.gf-button{min-height:36px;font-size:13px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);border-color:var(--line);padding:.5em .75em}
#auto{width:100%;padding:8px}
#auto[aria-pressed=true]{background:#f5d638;border-color:#171717;color:#171717}
.position-slider{display:flex;align-items:center;gap:12px;color:var(--gf-muted)}
.position-slider input{width:100%}
.layout-status{background:var(--gf-paper);padding:var(--cell-y) var(--cell-x);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.centered-note{font-size:12px;display:flex;align-items:center;gap:7px;color:#555555}
.centered-note svg{width:15px;height:15px}
#warning{font-size:13px;color:#9b3e25;line-height:1.5;margin:0}
.gf-error{font-size:11px}
.gf-actions{justify-content:flex-start}

/* Printable hanging plan. */
dialog{border:1px solid var(--line);border-radius:0;padding:0;width:min(700px,94vw);max-height:90vh;background:var(--paper);color:var(--ink);box-shadow:none}
dialog::backdrop{background:#17171777;backdrop-filter:blur(7px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:var(--cell-x);padding:var(--cell-y) var(--cell-x);background:var(--paper-band);border-bottom:1px solid var(--line)}
.dialog-top h2{font-size:12px;letter-spacing:.08em}
#plan-drawing svg{width:100%;height:auto;max-height:330px;background:#f7f7f7;border-radius:0}
.plan-note{margin:0;padding:var(--cell-y) var(--cell-x);font-size:12px;color:var(--muted);line-height:1.5}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font:500 var(--ui-label-size) var(--ui-label-font);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
td,th{padding:var(--cell-y) var(--cell-x);border-bottom:1px solid var(--line)}
.dialog-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--cell-x);padding:var(--cell-y) var(--cell-x);border-top:1px solid var(--line);background:var(--paper-band)}
.dialog-bottom>span{font-size:12px;color:var(--muted)}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--yellow);border-radius:0;padding:12px 18px;font-size:13px;opacity:0;pointer-events:none;z-index:10}
#toast.visible{opacity:1}


.primary,.gf-button,.segmented button{font-family:var(--ui-label-font);font-weight:500;box-shadow:none;border-radius:0}
#share-dialog{width:min(600px,94vw)}
#share-url{width:100%;min-width:0;font:16px var(--ui-font)}
.gf-button:hover:not(:disabled),.icon-button:hover:not(:disabled),.frame-chip:hover:not(:disabled),.segmented button:hover:not(:disabled){background:var(--yellow);color:var(--ink);border-color:var(--ink)}
#plan-drawing,#hook-table{padding:var(--cell-y) var(--cell-x)}
@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 330px}}
@media(max-width:720px){
  :root{--drawing-height:clamp(280px,44svh,380px)}
  main{display:flex;flex-direction:column;padding:8px;gap:8px}
  .room-area{position:sticky;top:0;z-index:5;height:var(--drawing-height);min-height:0;max-height:none;flex-shrink:0}
  .drawing-title>span{display:none}
  #scene{inset:46px 0 32px}
  .drawing-caption{flex-wrap:nowrap;height:32px;align-items:stretch;font-size:10px}
  .drawing-caption>span{padding:7px 8px;white-space:nowrap}
  .room-hint{display:none}
  aside{scroll-margin-top:calc(var(--drawing-height) + 8px)}
  .editor-tabs{display:flex;position:sticky;top:var(--drawing-height);z-index:6;background:var(--paper);border:1px solid var(--line)}
  .editor-tabs button{flex:1;height:44px;border:0;border-right:1px solid var(--line);background:var(--paper);font:12px var(--ui-label-font);color:var(--muted)}
  .editor-tabs button:last-child{border-right:0}
  .editor-tabs button[aria-selected=true]{color:var(--ink);background:var(--paper-band);box-shadow:inset 0 -3px var(--yellow)}
  .editor-tabs button[data-invalid]::after{content:'!';color:#9b3e25}
  .gf{--gf-min-col:7rem}
  .frame-toolbar{padding-inline:6px;gap:4px}
  .frame-actions{padding-left:2px}
  .gf-button,.segmented button{min-height:44px}
  .section-title{height:46px}
  .segmented{border:0}
  #plan-drawing,#hook-table{padding:var(--cell-y)}
  td,th{padding:var(--cell-y) 5px}
}
@media(max-height:500px) and (max-width:720px){
  :root{--drawing-height:260px}
  .room-area{position:relative;top:auto}
  .editor-tabs{top:0}
  aside{scroll-margin-top:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}