/* Figure import workspace. Drawing tools and the outer-wall editor are retired. */
.figure-workspace { padding-block: clamp(24px,4vw,56px); color:#162c43; }
.figure-heading { margin-bottom:24px; }
.figure-heading h1 { font-size:clamp(27px,3.5vw,43px);margin:8px 0;letter-spacing:-.035em; }
.figure-heading p { color:#52677a;max-width:680px; }
.figure-layout { display:grid;grid-template-columns:minmax(280px,370px) minmax(0,1fr);gap:24px;align-items:start; }
.figure-settings { display:grid;gap:16px; }
.figure-settings section,.figure-preview { border:1px solid #d7e2ec;border-radius:16px;background:#fff;padding:20px;box-shadow:0 5px 20px #173f6407; }
.figure-settings h2,.figure-preview h2 { font-size:17px;margin:0 0 16px; }
.figure-settings p { font-size:12px;line-height:1.6;color:#53677b; }
.figure-settings label { display:grid;gap:7px;margin-bottom:12px;font-size:13px; }
.figure-settings input:not([type=range]),.figure-settings select { width:100%;min-width:0;min-height:42px;border:1px solid #c8d6e3;border-radius:7px;background:white;color:#152c44;padding:8px;font:inherit;box-sizing:border-box; }
.figure-settings .field__control {display:flex;align-items:center;gap:8px;}
.figure-settings .field__unit {font-size:12px;}
.figure-upload { border:1px dashed #7a9bb7;border-radius:10px;padding:16px;background:#f4f9fe; }
.figure-upload span {font-size:11px;}
.figure-upload input {font-size:11px!important;}
.figure-settings .measurement-grid {display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.figure-settings button {margin:6px 4px 6px 0;}
.figure-settings details {font-size:12px;}
.figure-settings summary {cursor:pointer;margin:12px 0;}
.figure-preview { position:sticky;top:90px;min-height:540px;overflow:hidden; }
.figure-preview-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.figure-preview-heading button {font-size:12px;}
.figure-facts {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.figure-facts span {padding:7px 10px;border-radius:6px;background:#eef5fa;font-size:12px;}
.figure-canvas {padding:20px;min-height:420px;display:grid;place-items:center;background:#f8fafc;border:1px solid #e1e8ed;border-radius:10px;}
.figure-canvas svg {width:100%;height:auto;max-height:650px;}
.figure-empty {min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#526b81;}
.figure-empty>.material-symbols-outlined {font-size:48px;}
.figure-empty p {max-width:340px;line-height:1.6;}
.figure-error {padding:12px;background:#fff5e9;color:#714315;border:1px solid #edd3af;border-radius:8px;font-size:13px;}
@media(max-width:850px){.figure-layout{grid-template-columns:1fr;}.figure-preview{position:static;min-height:350px;}.figure-canvas{min-height:260px;padding:10px;}.figure-workspace{padding-bottom:100px;}.figure-preview-heading{align-items:start;}}
.figure-preview-heading button,.figure-settings details button {border:1px solid #bcd0df;border-radius:7px;padding:9px 12px;background:#f2f7fc;color:#24506e;cursor:pointer;font-weight:600;}
.figure-upload input::file-selector-button {border:0;border-radius:5px;padding:8px 10px;background:#245f80;color:#fff;cursor:pointer;margin-right:10px;}

/* Keep import and the result together; mobile users see the figure before the long form. */
.figure-layout {grid-template-areas:"import preview" "measures preview" "export preview";gap:18px 24px;}
.figure-settings {display:contents;}
.figure-import-panel {grid-area:import;}
.figure-measures-panel {grid-area:measures;}
.figure-export-panel {grid-area:export;}
.figure-preview {grid-area:preview;}
.figure-settings .figure-hole-option {display:flex;align-items:center;gap:10px;font-size:13px;margin-top:16px;}
.figure-settings .figure-hole-option input {width:18px;min-height:18px;height:18px;accent-color:#245f80;flex:0 0 18px;}
.figure-export-panel>.button {width:100%;justify-content:center;margin:6px 0;}
.figure-heading .eyebrow {letter-spacing:.16em;font-size:12px;font-weight:700;color:#52718c;}
.figure-canvas {background:#fff;min-height:460px;}
.figure-canvas svg {filter:drop-shadow(0 3px 5px #16304715);}
@media(max-width:850px){
 .figure-layout {grid-template-areas:"import" "preview" "measures" "export";}
 .figure-settings section,.figure-preview {padding:18px;}
 .figure-canvas {min-height:260px;}
 .figure-canvas svg {max-height:400px;}
 .figure-preview {min-height:0;}
 .figure-empty {min-height:230px;}
}

/* A quiet workbench: numbered settings alongside a generous drawing surface. */
.figure-workspace { max-width: 1440px; color: var(--text); padding-top: 32px; }
.figure-heading { display: flex; align-items: end; justify-content: space-between; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.figure-heading h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 750; letter-spacing: -.045em; }
.figure-heading p { margin-bottom: 0; color: var(--text-soft); font-size: 14px; line-height: 1.6; }
.figure-heading .eyebrow { color: var(--sapphire); font-size: 10px; letter-spacing: .2em; }
.figure-layout { grid-template-columns: minmax(300px, 350px) minmax(0,1fr); gap: 16px 24px; }
.figure-settings section, .figure-preview { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 30px -24px #162c4340; }
.figure-settings h2 { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 750; letter-spacing: -.015em; margin-bottom: 20px; }
.figure-step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--sapphire) 9%, var(--surface)); color: var(--sapphire); font-size: 10px; font-variant-numeric: tabular-nums; }
.figure-settings p, .figure-settings label { color: var(--text-soft); }
.figure-settings label { font-size: 12px; gap: 6px; margin-bottom: 14px; }
.figure-settings label > strong { color: var(--text); }
.figure-settings input:not([type=range]), .figure-settings select { min-height: 42px; border-color: var(--line); background: var(--surface-subtle); color: var(--text); border-radius: 8px; padding: 10px; transition: border-color .15s, box-shadow .15s; }
.figure-settings input:focus-visible, .figure-settings select:focus-visible { outline: 2px solid var(--sapphire); outline-offset: 2px; }
.figure-settings .measurement-grid { gap: 0 14px; }
.figure-upload { border: 1px dashed color-mix(in srgb, var(--sapphire) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--sapphire) 4%, var(--surface)); padding: 20px 16px; }
.figure-upload strong { font-size: 13px; }
.figure-upload > span { margin-bottom: 8px; }
.figure-settings .figure-upload input { background: var(--surface); padding: 6px; font-size: 10px !important; }
.figure-upload input::file-selector-button { border-radius: 6px; padding: 9px 10px; background: #245f80; font-size: 11px; font-weight: 650; }
.figure-settings .figure-hole-option input { min-height: 18px; }
.figure-settings details { border-top: 1px solid var(--line); padding-top: 2px; color: var(--text-soft); }
.figure-settings summary { padding-block: 4px; font-weight: 600; }
.figure-preview { top: 100px; padding: 0; overflow: hidden; }
.figure-preview-heading { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.figure-preview-heading h2 { margin: 0; font-size: 15px; font-weight: 750; }
.figure-preview-heading button, .figure-settings details button { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; padding: 9px 12px; }
.figure-preview-heading button:hover { border-color: var(--sapphire); }
.figure-facts { gap: 8px; margin: 16px 22px; }
.figure-facts span { background: color-mix(in srgb, var(--sapphire) 7%, var(--surface)); color: var(--text); border: 1px solid var(--line); border-radius: 7px; font-size: 11px; font-variant-numeric: tabular-nums; }
.figure-canvas { border: 0; border-top: 1px solid var(--line); border-radius: 0; min-height: 490px; padding: 32px; background-color: var(--surface-subtle); background-image: radial-gradient(color-mix(in srgb, var(--text-soft) 18%, transparent) .7px, transparent .7px); background-size: 18px 18px; }
.figure-canvas svg { max-height: 610px; }
.figure-empty { min-height: 480px; padding: 32px; color: var(--text-soft); background: radial-gradient(ellipse, color-mix(in srgb, var(--sapphire) 5%, var(--surface)), var(--surface) 70%); }
.figure-empty > .material-symbols-outlined { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 20px; font-size: 32px; color: var(--sapphire); background: var(--surface); }
.figure-empty h3 { color: var(--text); font-size: 18px; margin: 16px 0 0; }
.figure-empty p { font-size: 13px; max-width: 300px; }
.figure-preview > .figure-error { margin: 16px 22px; }
.figure-export-panel > .button { min-height: 44px; border-radius: 8px; font-size: 12px; }
@media(max-width:850px) {
 .figure-workspace { padding-top: 20px; padding-bottom: 32px; }
 .figure-heading { padding-bottom: 18px; margin-bottom: 18px; }
 .figure-heading p { font-size: 13px; }
 .figure-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .figure-settings section { padding: 20px; }
 .figure-preview { position: static; padding: 0; }
 .figure-preview-heading { padding: 16px 18px; align-items: center; }
 .figure-canvas { min-height: 270px; padding: 18px; }
 .figure-empty { min-height: 270px; padding: 24px; }
 .figure-empty > .material-symbols-outlined { width: 56px; height: 56px; font-size: 26px; border-radius: 14px; }
 .figure-facts { margin: 12px 16px; gap: 6px; }
}

/* Only the unit cap receives the light stone finish; the input stays clear. */
.figure-settings .field__control { align-items:stretch; gap:0; }
.figure-settings .field__control input { border:0; border-radius:0; }

.figure-settings .field__unit {
  align-self:stretch;
  color:#55534e;
  background-color:#e9e7e2;
  background-image:radial-gradient(ellipse at 20% 30%,#9d999340 0 .7px,transparent 1.2px),radial-gradient(ellipse at 70% 65%,#ffffffb3 0 1px,transparent 1.6px),radial-gradient(ellipse at 45% 80%,#aaa59d40 0 .6px,transparent 1px),linear-gradient(125deg,#f1efeb,#dedbd4);
  background-size:9px 11px,13px 17px,7px 13px,100% 100%;
  border-left:1px solid #cfcac1;
}
.figure-cut-note {font-size:12px;line-height:1.55;color:var(--text-muted);margin:12px 0;}
.figure-empty__example { display: block; width: min(100%, 680px); height: auto; margin: 0 auto 16px; border-radius: 10px; }
.figure-empty > small { font-size: 11px; letter-spacing: .1em; color: var(--text-soft); }