/* HoodCad — dark drafting-table skin. Namespaced .hc-* (module convention). */
:root {
  --hc-bg: #1b1f23; --hc-panel: #23282e; --hc-panel2: #2a3038; --hc-line: #353c45; --hc-text: #e6e8eb; --hc-muted: #8e98a3;
  --hc-accent: #4fd1ff; --hc-primary: #ffb347; --hc-ok: #5fd77a; --hc-warn: #ffd166; --hc-err: #ff6b6b; --hc-mono: Menlo, "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body.hc { margin: 0; height: 100%; background: var(--hc-bg); color: var(--hc-text); font: 13px/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; overflow: hidden; }
/* The footer is a fixed bottom bar (not a grid row) so the platform shell's
   launcher measures it and lifts its own furniture above the command line. */
.hc-app { display: grid; grid-template-rows: auto auto 1fr; height: 100vh; padding-bottom: var(--hc-bottom-h, 150px); }
button, select, input { font: inherit; color: inherit; }
#level-select { background: var(--hc-panel2); border: 1px solid var(--hc-line); border-radius: 4px; padding: 3px 6px; max-width: 170px; }
#tg-below.on { color: var(--hc-accent); border-color: var(--hc-accent); }
button { background: var(--hc-panel2); border: 1px solid var(--hc-line); border-radius: 4px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
button:hover { border-color: #566170; background: #313842; }
button.active { background: #1f3d4d; border-color: var(--hc-accent); color: var(--hc-accent); }
button.hc-primary { background: #4a3413; border-color: var(--hc-primary); color: var(--hc-primary); }
button.hc-accent { background: #143747; border-color: var(--hc-accent); color: var(--hc-accent); }
button:disabled { opacity: .5; cursor: progress; }

.hc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; background: #15181b; border-bottom: 1px solid var(--hc-line); }
.hc-brand { display: flex; align-items: baseline; gap: 8px; }
.hc-logo { font-size: 20px; color: var(--hc-primary); }
.hc-name { font-weight: 700; font-size: 17px; letter-spacing: .3px; }
.hc-tag { color: var(--hc-muted); font-size: 12px; }
.hc-menu { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hc-home { color: var(--hc-muted); text-decoration: none; margin-left: 8px; font-size: 12px; }
.hc-home:hover { color: var(--hc-text); }

.hc-ribbon { display: flex; gap: 14px; padding: 6px 12px; background: var(--hc-panel); border-bottom: 1px solid var(--hc-line); overflow-x: auto; }
.hc-group { display: flex; gap: 4px; align-items: center; padding-right: 14px; border-right: 1px solid var(--hc-line); }
.hc-group:last-child { border-right: 0; }
.hc-glabel { color: var(--hc-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-right: 4px; }
.hc-group-bp button { border-color: #4a3413; }

.hc-main { display: grid; grid-template-columns: 230px 1fr 280px; min-height: 0; }
.hc-side { background: var(--hc-panel); overflow-y: auto; border-right: 1px solid var(--hc-line); }
.hc-right { border-right: 0; border-left: 1px solid var(--hc-line); }
.hc-panel { padding: 10px 12px; border-bottom: 1px solid var(--hc-line); }
.hc-panel h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--hc-muted); display: flex; justify-content: space-between; gap: 6px; }
.hc-panel h3 .hc-muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hc-muted { color: var(--hc-muted); }
.hc-small { font-size: 12px; }
.hc-help { color: var(--hc-muted); font-size: 12px; margin: 0 0 8px; }
.hc-row { display: flex; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.hc-kv { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin: 4px 0; }
.hc-kv label { display: flex; align-items: center; gap: 6px; }
.hc-opt { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.hc-opt input.hc-len { width: 62px; background: #15181b; border: 1px solid var(--hc-line); border-radius: 3px; padding: 2px 5px; font-family: var(--hc-mono); font-size: 12px; }
.hc-opt input[type=number] { width: 58px; background: #15181b; border: 1px solid var(--hc-line); border-radius: 3px; padding: 2px 5px; }
.hc-scale { margin: 6px 0 2px; font-size: 12px; }
.hc-scale.warn { color: var(--hc-warn); }
.hc-legend { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--hc-muted); margin: 6px 0; align-items: center; }
.hc-legend i { display: inline-block; width: 14px; height: 4px; background: var(--c); margin-right: 3px; border-radius: 2px; }

.hc-layers { list-style: none; margin: 0; padding: 0; }
.hc-layer { display: grid; grid-template-columns: 22px 22px 22px 1fr auto; gap: 4px; align-items: center; padding: 2px 4px; border-radius: 4px; }
.hc-layer.current { background: #1f3d4d; }
.hc-layer .name { cursor: pointer; font-family: var(--hc-mono); font-size: 12px; }
.hc-layer .n { color: var(--hc-muted); font-size: 11px; }
.hc-layer button { padding: 0; width: 22px; height: 20px; font-size: 11px; background: transparent; border: 0; color: var(--hc-muted); }
.hc-layer button.on { color: var(--hc-text); }
.hc-layer input[type=color] { width: 22px; height: 18px; padding: 0; border: 0; background: transparent; }
.hc-prop { display: grid; grid-template-columns: 74px 1fr; gap: 6px; align-items: center; margin: 4px 0; }
.hc-prop label { color: var(--hc-muted); font-size: 12px; }
.hc-prop input { background: #15181b; border: 1px solid var(--hc-line); border-radius: 3px; padding: 3px 6px; font-family: var(--hc-mono); font-size: 12px; min-width: 0; }
.hc-prop button { margin-right: 4px; }

.hc-view { position: relative; min-width: 0; min-height: 0; background: #20252b; }
#view { width: 100%; height: 100%; display: block; cursor: none; }
.hc-drop { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; background: rgba(79,209,255,.12); border: 2px dashed var(--hc-accent); color: var(--hc-accent); font-size: 16px; }
.hc-drop.over { display: flex; }

.hc-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #15181b; border-top: 1px solid var(--hc-line); }
.hc-cmdlog { height: 68px; overflow-y: auto; padding: 4px 12px; font-family: var(--hc-mono); font-size: 12px; color: #b9c2cc; }
.hc-logline.info { color: var(--hc-text); }
.hc-logline.err { color: var(--hc-err); }
.hc-cmdline { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-top: 1px solid var(--hc-line); background: #101316; }
.hc-cmdline span { font-family: var(--hc-mono); color: var(--hc-primary); white-space: nowrap; }
.hc-cmdline input { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--hc-mono); font-size: 13px; padding: 4px 0; }
.hc-status { display: flex; gap: 14px; align-items: center; padding: 3px 12px; border-top: 1px solid var(--hc-line); font-size: 12px; }
.hc-status button { padding: 1px 8px; font-size: 11px; color: var(--hc-muted); }
.hc-status button.on { color: var(--hc-accent); border-color: var(--hc-accent); }
.hc-mono { font-family: var(--hc-mono); min-width: 190px; }
.hc-right-note { margin-left: auto; }

.hc-walk { position: fixed; inset: 0; background: #0e1114; z-index: 20; display: grid; grid-template-rows: auto 1fr; }
.hc-walk[hidden], [hidden] { display: none !important; }
.hc-walkbar { display: flex; gap: 8px; align-items: center; padding: 6px 12px; background: #15181b; border-bottom: 1px solid var(--hc-line); }
.hc-walkbar .hc-close { margin-left: auto; }
.hc-walkstage { position: relative; min-height: 0; }
.hc-walkstage canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.hc-dialog { background: var(--hc-panel); color: var(--hc-text); border: 1px solid var(--hc-line); border-radius: 8px; padding: 18px 20px; min-width: 320px; }
.hc-dialog::backdrop { background: rgba(0,0,0,.55); }
.hc-dialog h3 { margin: 0 0 10px; }
.hc-dialog label { display: grid; grid-template-columns: 1fr 140px; gap: 8px; align-items: center; margin: 6px 0; }
.hc-dialog input, .hc-dialog select { background: #15181b; border: 1px solid var(--hc-line); border-radius: 3px; padding: 4px 6px; font-family: var(--hc-mono); }

@media (max-width: 1000px) { .hc-main { grid-template-columns: 200px 1fr 240px; } }
@media (max-width: 760px) { .hc-main { grid-template-columns: 1fr; grid-template-rows: minmax(42vh, 1fr) auto; } .hc-left { display: none; } .hc-right { max-height: 32vh; border-left: 0; border-top: 1px solid var(--hc-line); } .hc-view { min-height: 42vh; } }

.hc-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
.hc-table th { text-align: left; color: var(--hc-muted); font-weight: 500; padding: 2px 4px; border-bottom: 1px solid var(--hc-line); }
.hc-table td { padding: 2px 4px; border-bottom: 1px solid #2a3038; white-space: nowrap; }
.hc-table tr { cursor: pointer; }
.hc-table tr:hover td { background: #262c34; }
.hc-table input { width: 100%; min-width: 60px; background: transparent; border: 0; border-bottom: 1px dashed var(--hc-line); color: var(--hc-text); font: inherit; padding: 1px 0; }
.hc-symcat { color: var(--hc-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 3px; }
.hc-symgrid { display: flex; flex-wrap: wrap; gap: 4px; }
.hc-sym { padding: 2px 7px; font-size: 11px; }
.hc-sym.active { background: #1f3d4d; border-color: var(--hc-accent); color: var(--hc-accent); }
#rooms-totals { margin-top: 4px; color: var(--hc-muted); }
#rooms-totals b { color: var(--hc-text); }