/* SAMG Floor Plan Builder — styles.
   Extracted verbatim from the original inline <style> so the app can run under a
   strict Content-Security-Policy. Fonts are self-hosted (was Google Fonts). */

/* ---- Self-hosted variable fonts (Outfit + JetBrains Mono) ---- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- App chrome (original palette: gold #c9a84c on charcoal) ---- */
:root { --ink: #0e0e0e; --ink-2: #1a1a1a; --ink-3: #2a2a2a; --rule: #3a3733; --paper: #f6f3ec; --gold: #c9a84c; --gold-2: #e0bb52; --select: #c9a84c; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #0e0e0e; color: #e8e3d6; font-family: 'Outfit', system-ui, sans-serif; overflow: hidden; }
.topbar { height: 48px; flex-shrink: 0; background: var(--ink); border-bottom: 1px solid var(--rule); display: flex; align-items: center; padding: 0 16px; gap: 14px; }
.brand { color: var(--gold); font-weight: 700; letter-spacing: 2px; font-size: 13px; }
.brand-sub { color: #8c8478; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.topbar-spacer { flex: 1; }
.top-btn { background: transparent; color: #c9a84c; border: 1px solid var(--rule); padding: 6px 14px; font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: all 0.15s; }
.top-btn:hover { background: var(--gold); color: #111; }
.top-btn.primary { background: var(--gold); color: #111; border-color: var(--gold); }
.top-btn.primary:hover { background: var(--gold-2); }
.app { display: grid; grid-template-columns: 220px 1fr 320px; height: calc(100vh - 48px); }
.palette { background: var(--ink-2); border-right: 1px solid var(--rule); padding: 14px 12px; overflow-y: auto; }
.palette-h { font-size: 10px; letter-spacing: 2px; color: #8c8478; text-transform: uppercase; margin: 0 0 10px 4px; font-family: 'JetBrains Mono', monospace; }
.palette-h:not(:first-child) { margin-top: 18px; }
.palette-item { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--ink-3); border: 1px solid transparent; color: #e8e3d6; padding: 9px 10px; margin-bottom: 4px; cursor: pointer; border-radius: 3px; font-family: inherit; font-size: 12px; text-align: left; transition: all 0.12s; }
.palette-item:hover { border-color: var(--gold); color: var(--gold); }
.palette-item .icon { width: 24px; height: 18px; flex-shrink: 0; }
.palette-item .icon svg { width: 100%; height: 100%; }
.palette-item .label { flex: 1; }
.preset-row { display: flex; gap: 6px; margin-top: 6px; }
.preset-btn { flex: 1; background: transparent; color: #b5a17c; border: 1px dashed var(--rule); padding: 7px 8px; font-size: 10px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 2px; }
.preset-btn:hover { color: var(--gold); border-color: var(--gold); }
.hint { margin-top: 14px; padding: 10px; background: rgba(201,168,76,0.06); border-left: 2px solid var(--gold); font-size: 10.5px; line-height: 1.55; color: #b5a17c; }
.hint kbd { font-family: 'JetBrains Mono', monospace; font-size: 9px; background: var(--ink); color: var(--gold); padding: 1px 4px; border-radius: 2px; border: 1px solid var(--rule); }
.canvas-wrap { background-image: radial-gradient(circle at 50% 50%, #232323 0%, #0e0e0e 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.canvas-paper { background: var(--paper); box-shadow: 0 8px 32px rgba(0,0,0,0.5); width: min(95%, 1100px); height: min(92%, 800px); position: relative; }
.canvas-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.canvas-status { position: absolute; bottom: 12px; left: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8c8478; letter-spacing: 1px; pointer-events: none; }
.canvas-status .v { color: var(--gold); }
.el { cursor: move; }
.el.selected .el-bg { stroke: var(--select); stroke-dasharray: 0.4 0.3; stroke-width: 0.12; fill: none; }
.el-handle { cursor: crosshair; }
.el-handle.rotate { cursor: alias; }
.el-handle.corner { cursor: nwse-resize; }
.el-handle:hover { fill: #c9a84c !important; }
.unit-vertex { cursor: move; }
.unit-edge { cursor: ew-resize; }
.unit-vertex:hover { fill: #c9a84c; }
.unit-edge:hover { fill: #c9a84c; }
.grid-line { stroke: #ddd6c5; stroke-width: 0.04; }
.grid-line.major { stroke: #c9c0aa; stroke-width: 0.06; }
.right { background: var(--ink-2); border-left: 1px solid var(--rule); overflow-y: auto; }
.panel-h { font-size: 10px; letter-spacing: 2px; color: #8c8478; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; padding: 14px 14px 8px 14px; border-bottom: 1px solid var(--rule); }
.panel-section { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.field { margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 10px; color: #8c8478; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; }
.field input, .field textarea, .field select { width: 100%; padding: 7px 9px; background: var(--ink); border: 1px solid var(--rule); color: #e8e3d6; font-family: 'JetBrains Mono', monospace; font-size: 12px; border-radius: 2px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.props-empty { padding: 24px 16px; text-align: center; color: #6e6759; font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; }
.btn-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.small-btn { flex: 1; min-width: 0; background: var(--ink); color: #b5a17c; border: 1px solid var(--rule); padding: 6px 8px; font-size: 10px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 2px; white-space: nowrap; }
.small-btn:hover { color: var(--gold); border-color: var(--gold); }
.small-btn.danger:hover { color: #ff6b6b; border-color: #ff6b6b; }
.tb-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 11px; }
.tb-grid .k { color: #8c8478; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; }
.tb-grid .v { background: var(--ink); border: 1px solid var(--rule); padding: 4px 7px; color: #e8e3d6; border-radius: 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; min-height: 12px; outline: none; }
.tb-grid .v:focus { border-color: var(--gold); }
@page { size: letter landscape; margin: 0.4in; }
@media print {
  body { background: white; overflow: visible; }
  .topbar, .palette, .right, .canvas-status { display: none !important; }
  .app { display: block; height: auto; }
  .canvas-wrap { background: white; box-shadow: none; height: auto; padding: 0; }
  .canvas-paper { width: 10.2in; height: 7.7in; box-shadow: none; }
  .canvas-svg { width: 100%; height: 100%; }
  .el.selected .el-bg, .el-handle, .el-handle-line, .unit-vertex, .unit-edge { display: none !important; }
}