/* Layout and controls share the harmonic tool's token palette and Manager chrome. */
.ht-body { margin: 0; overflow: hidden; font: var(--type-body-sm); color: var(--text-body); }
.ht-body * { box-sizing: border-box; }
.ht-body [hidden] { display: none !important; }
.ht-page { height: 100dvh; display: grid; grid-template-rows: 64px 60px auto minmax(0,1fr) auto 28px; }
.ht-siteheader { background: var(--ink-800); color: var(--text-inverse); display: flex; align-items: center; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--line-chrome); }
.ht-logo { flex: none; display: flex; }
.ht-logo img { display: block; width: 174px; height: auto; }
.ht-sitenav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ht-sitenav a, .ht-headerlink { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-100); padding: 0 12px; font-weight: 600; font-size: 12px; text-decoration: none; border: 0; }
.ht-sitenav a:hover, .ht-headerlink:hover { color: var(--text-inverse); background: var(--surface-hover-inverse); text-decoration: none; }
.ht-headerlink { border-left: 1px solid var(--line-chrome); font-weight: 400; }
.ht-dot { display: inline-block; width: 6px; height: 6px; background: var(--green-500); border-radius: var(--radius-pill); flex: none; }
.ht-sitenav .ht-dot { background: var(--red-500); }
.ht-dot--amber { background: var(--amber-500); }
.ht-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ht-toolbar { background: var(--surface-card); border-bottom: 1px solid var(--line-default); display: flex; align-items: center; gap: 12px; padding: 0 20px; min-width: 0; }
.ht-title { font: var(--type-h4); color: var(--text-primary); white-space: nowrap; margin-right: 5px; }
.ht-tool-badge { font: var(--type-label); letter-spacing: var(--tracking-label); border: 1px solid var(--line-default); padding: 5px 6px; white-space: nowrap; }
.ht-project-button { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ht-project-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-spacer { flex: 1; }
.ht-btn { min-height: 44px; border: 1px solid var(--line-default); border-radius: var(--radius-1); background: var(--surface-card); padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: var(--type-caption); font-weight: 600; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); color: var(--text-body); }
.ht-btn:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.ht-btn svg { width: 16px; height: 16px; flex: none; }
.ht-outline-project svg { width: 20px; height: 20px; flex: none; }
.ht-tier-row svg,.ht-mini-row svg { width: 16px; height: 16px; vertical-align: middle; }
.ht-btn:active { transform: translateY(1px); }
.ht-btn:disabled { background: var(--surface-disabled); color: var(--text-secondary); cursor: not-allowed; }
.ht-btn--icon { width: 44px; min-width: 44px; padding: 0; }
.ht-btn--quiet { background: transparent; border-color: transparent; }
.ht-btn--primary { background: var(--surface-brand); color: var(--text-inverse); border-color: var(--surface-brand); }
.ht-btn--primary:hover { background: var(--surface-brand-hover); border-color: var(--surface-brand-hover); }
.ht-btn[aria-pressed='true'] { background: var(--surface-brand-subtle); border-color: var(--line-brand); }
.ht-body :is(button,a,input,select,summary,[tabindex]):focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.ht-notice { display: flex; align-items: center; min-height: 36px; gap: 14px; padding: 4px 20px; background: var(--surface-sunken); border-bottom: 1px solid var(--line-default); font: var(--type-caption); }
.ht-notice > .ht-status { font-weight: 600; }
.ht-notice button { margin-left: auto; border: 0; background: none; min-height: 28px; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.ht-workspace { min-height: 0; min-width: 0; display: grid; grid-template-columns: 200px minmax(0,1fr) 292px; }
.ht-outline { background: var(--surface-chrome); color: var(--text-inverse); border-right: 1px solid var(--line-chrome); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.ht-panelhead { height: 48px; min-height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-default); }
.ht-outline .ht-panelhead { border-color: var(--line-chrome); }
.ht-label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ht-count { font: var(--type-mono); color: var(--text-secondary); }
.ht-outline .ht-count { color: var(--ink-200); }
.ht-outline-project { display: flex; gap: 10px; align-items: center; min-height: 64px; background: none; border: 0; color: var(--ink-100); width: 100%; padding: 12px 16px; cursor: pointer; text-align: left; }
.ht-outline-project strong { display: block; font: var(--type-caption); font-weight: 600; color: var(--text-inverse); }
.ht-outline-project small { display: block; font: var(--type-caption); color: var(--ink-200); }
.ht-tier-row { display: flex; gap: 10px; padding: 12px 14px; min-height: 76px; align-items: flex-start; text-align: left; color: var(--ink-100); width: 100%; background: transparent; border: 0; border-top: 1px solid var(--line-chrome); border-left: 2px solid transparent; cursor: pointer; }
.ht-tier-row:hover,.ht-outline-project:hover { background: var(--surface-hover-inverse); }
.ht-tier-row[aria-pressed='true'] { border-left-color: var(--red-500); background: var(--surface-chrome-raised); }
.ht-tier-row svg { margin-top: 3px; flex: none; }
.ht-tier-row strong { display: block; font: var(--type-body-sm); color: var(--text-inverse); }
.ht-tier-row .ht-row-meta { font: var(--type-caption); color: var(--ink-200); margin-top: 4px; }
.ht-tier-row .ht-row-watts { font: var(--type-mono); color: var(--ink-100); margin-top: 3px; }
.ht-outline-add { margin: 12px; color: var(--ink-100); border: 1px dashed var(--ink-400); background: none; }
.ht-outline-add:hover { background: var(--surface-hover-inverse); color: var(--text-inverse); }
.ht-outline-foot { margin-top: auto; border-top: 1px solid var(--line-chrome); padding: 16px; color: var(--ink-200); font: var(--type-caption); }
.ht-outline-foot p { margin: 8px 0 0; }
.ht-outline-foot .ht-label { color: var(--ink-100); }
.ht-center { display: grid; grid-template-rows: minmax(245px,1fr) 280px; min-width: 0; min-height: 0; overflow: hidden; }
.ht-workspace[data-pane='results'] .ht-center { grid-template-rows: minmax(0,1fr); }
.ht-workspace[data-pane='results'] .ht-drawing { display: none; }
.ht-drawing { display: grid; grid-template-rows: auto minmax(0,1fr) 30px; min-height: 0; overflow: hidden; }
.ht-drawbar { display: flex; gap: 3px; align-items: center; padding: 5px 10px; background: var(--surface-card); border-bottom: 1px solid var(--line-default); overflow-x: auto; min-height: 54px; }
.ht-drawbar .ht-btn { font-weight: 400; padding: 0 9px; }
.ht-drawbar .ht-btn--icon { padding: 0; }
.ht-tool-separator { border-left: 1px solid var(--line-default); height: 24px; margin: 0 4px; }
.ht-canvas { position: relative; overflow: hidden; min-height: 0; background: var(--surface-canvas); touch-action: none; }
.ht-board { display: block; width: 100%; height: 100%; user-select: none; }
.ht-grid-minor { fill: none; stroke: var(--grid-line); stroke-width: 1; }
.ht-grid-major { fill: none; stroke: var(--grid-line-major); stroke-width: 1; }
.ht-board-paper { fill: var(--surface-canvas); }
.ht-tier-body { fill: var(--surface-card); stroke: var(--line-strong); stroke-width: 1.4; }
.ht-tier-selected .ht-tier-body { fill: var(--surface-brand-subtle); stroke: var(--line-brand); stroke-width: 2; }
.ht-tier-inner { fill: none; stroke: var(--line-default); }
.ht-tier-handle { fill: var(--surface-card); stroke: var(--line-brand); stroke-width: 1.2; }
.ht-board-text { fill: var(--text-body); font: var(--type-body-sm); }
.ht-board-id { fill: var(--text-primary); font: var(--type-h4); }
.ht-board-number { fill: var(--text-body); font: var(--type-mono); font-variant-numeric: tabular-nums; }
.ht-board-small { fill: var(--text-secondary); font: var(--type-caption); }
.ht-board-dimension { stroke: var(--text-secondary); stroke-width: 1; fill: none; }
.ht-board-divider { stroke: var(--line-default); }
.ht-partition-line { stroke: var(--line-strong); stroke-width: 2; }
.ht-partition-target { stroke: transparent; stroke-width: 16; cursor: pointer; }
.ht-vent-body { fill: var(--surface-sunken); stroke: var(--text-secondary); }
.ht-vent-line { stroke: var(--text-secondary); stroke-width: 1; }
.ht-selected-feature { stroke: var(--line-brand); stroke-width: 2; }
.ht-board-ghost { fill: var(--surface-brand-subtle); stroke: var(--line-brand); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.ht-drawing-footer { background: var(--surface-sunken); border-top: 1px solid var(--line-default); display: flex; gap: 16px; justify-content: space-between; padding: 6px 12px; font: var(--type-caption); white-space: nowrap; overflow: hidden; }
.ht-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ht-metrics { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-default); border-bottom: 1px solid var(--line-default); background: var(--surface-card); }
.ht-metric { padding: 9px 16px; border-right: 1px solid var(--line-default); min-width: 0; }
.ht-metric:last-child { border-right: 0; }
.ht-metric-label { font: var(--type-caption); color: var(--text-secondary); }
.ht-metric-value { font: 500 20px/1.35 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.ht-metric-value small { font: var(--type-caption); margin-left: 5px; }
.ht-inspector { min-height: 0; min-width: 0; overflow-y: auto; background: var(--surface-card); border-left: 1px solid var(--line-default); }
.ht-inspector-heading { padding: 18px 18px 14px; border-bottom: 1px solid var(--line-default); }
.ht-inspector-heading h2 { margin: 5px 0; font: var(--type-h3); }
.ht-inspector-heading p { margin: 0; font: var(--type-caption); color: var(--text-secondary); }
.ht-section { padding: 16px 18px; border-bottom: 1px solid var(--line-default); }
.ht-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ht-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ht-field { display: flex; flex-direction: column; gap: 5px; font: var(--type-caption); min-width: 0; }
.ht-field--wide { grid-column: 1 / -1; }
.ht-input-wrap { position: relative; display: flex; align-items: center; }
.ht-field input,.ht-field select { width: 100%; height: 44px; border: 1px solid var(--line-default); border-radius: var(--radius-1); background: var(--surface-page); padding: 0 10px; min-width: 0; font: var(--type-mono); color: var(--text-primary); }
.ht-field select { font: var(--type-caption); }
.ht-field input:invalid { border-color: var(--line-brand); }
.ht-input-wrap input { padding-right: 38px; appearance: textfield; }
.ht-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ht-input-wrap:has(.ht-unit) input { padding-right: 42px; }
.ht-unit { position: absolute; right: 10px; pointer-events: none; color: var(--text-secondary); font: var(--type-caption); }
.ht-field-note { font: var(--type-caption); color: var(--text-secondary); margin: 9px 0 0; }
.ht-mini-row { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; gap: 8px; background: var(--surface-page); border: 1px solid var(--line-default); border-radius: var(--radius-1); padding: 10px; min-height: 44px; cursor: pointer; margin-top: 6px; font: var(--type-caption); }
.ht-mini-row:hover { background: var(--surface-hover); }
.ht-mini-row .ht-mono { color: var(--text-secondary); }
.ht-section-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ht-section-actions .ht-btn { flex: 1; }
.ht-placeholder { padding: 12px; background: var(--surface-sunken); border: 1px dashed var(--line-default); font: var(--type-caption); color: var(--text-secondary); }
.ht-result-value { font: 500 28px/1.25 var(--font-mono); color: var(--text-secondary); margin: 12px 0 3px; }
.ht-statusbar { background: var(--ink-800); color: var(--ink-100); display: flex; align-items: center; gap: 22px; padding: 0 14px; font: var(--type-caption); border-top: 1px solid var(--line-chrome); min-width: 0; overflow: hidden; white-space: nowrap; }
.ht-statusbar-end { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.ht-divider { color: var(--ink-400); }
.ht-mobilebar { display: none; }
.ht-dialog { width: min(560px,calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-default); border-radius: var(--radius-2); box-shadow: var(--shadow-3); background: var(--surface-card); color: var(--text-body); }
.ht-dialog::backdrop { background: var(--surface-active); }
.ht-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--line-default); }
.ht-dialog h2 { font: var(--type-h3); margin: 0; }
.ht-dialog-content { padding: 20px; }
.ht-dialog-content p { margin: 0 0 16px; }
.ht-dialog-content li { margin: 8px 0; }
.ht-report-allowance { border-top: 1px solid var(--line-default); padding-top: 16px; font: var(--type-mono); }
.ht-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line-default); }
.ht-toast { position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%); max-width: min(560px,90vw); background: var(--surface-chrome); color: var(--text-inverse); padding: 12px 20px; border: 1px solid var(--line-chrome); border-radius: var(--radius-2); box-shadow: var(--shadow-2); z-index: 100; }
.ht-noscript { position: fixed; inset: 140px 20px auto; background: var(--surface-card); padding: 30px; z-index: 20; }
@media (max-width: 760px) {
  .ht-workspace:not([data-pane='results']) .ht-center > .ht-results { display: none; }
}
@media (min-width: 1600px) { .ht-workspace { grid-template-columns: 220px minmax(0,1fr) 320px; } .ht-center { grid-template-rows: minmax(280px,1fr) 300px; } }
@media (max-height: 900px) and (min-width: 761px) { .ht-center { grid-template-rows: minmax(190px,1fr) 45px; } .ht-workspace:not([data-pane='results']) .ht-results-body,.ht-workspace:not([data-pane='results']) .ht-results-footer { display: none; } }
@media (max-width: 1200px) { .ht-workspace { grid-template-columns: 168px minmax(0,1fr) 266px; } .ht-sitenav a { padding: 0 8px; } .ht-headerlink { display: none; } .ht-toolbar { gap: 6px; padding: 0 12px; } .ht-tool-badge { display: none; } .ht-outline-foot { padding: 12px; } .ht-drawbar .ht-btn span { display: none; } .ht-drawbar .ht-btn { min-width: 44px; } .ht-drawing-footer > span:last-child { display: none; } .ht-metric { padding-left: 10px; padding-right: 8px; } .ht-metric-value { font-size: 18px; } }
@media (max-width: 1000px) { .ht-workspace { grid-template-columns: minmax(0,1fr) 266px; } .ht-outline { display: none; } .ht-siteheader { padding: 0 16px; } .ht-project-button { max-width: 175px; } .ht-notice { padding: 5px 12px; gap: 10px; } .ht-notice button { display: none; } .ht-statusbar-end { display: none; } }
@media (max-width: 760px) { .ht-page { grid-template-rows: 52px auto auto minmax(0,1fr) 48px 26px; } .ht-siteheader { padding: 0 12px; } .ht-logo img { width: 140px; } .ht-sitenav a { display: none; } .ht-sitenav a[aria-current] { display: flex; } .ht-toolbar { flex-wrap: wrap; gap: 4px; padding: 6px 10px; } .ht-title { flex: 1; } .ht-project-button,.ht-toolbar .ht-spacer { display: none; } .ht-toolbar .ht-btn:not(.ht-btn--primary) span { display: none; } .ht-toolbar .ht-btn { padding: 0 8px; min-width: 44px; } .ht-notice { align-items: flex-start; font-size: 12px; padding: 7px 12px; } .ht-notice > .ht-status { padding-top: 2px; } .ht-workspace { display: block; position: relative; overflow: hidden; } .ht-center { height: 100%; grid-template-rows: minmax(0,1fr); } .ht-drawing { min-height: 0; } .ht-results { display: none; } .ht-inspector { display: none; height: 100%; border-left: 0; } .ht-workspace[data-pane='properties'] .ht-center { display: none; } .ht-workspace[data-pane='properties'] .ht-inspector { display: block; } .ht-workspace[data-pane='results'] .ht-center { display: block; overflow: auto; } .ht-workspace[data-pane='results'] .ht-drawing,.ht-workspace[data-pane='results'] .ht-metrics { display: none; } .ht-workspace[data-pane='results'] .ht-results { display: block; min-height: 100%; height: auto; } .ht-mobilebar { display: flex; border-top: 1px solid var(--line-default); background: var(--surface-card); } .ht-mobilebar button { flex: 1; min-height: 44px; background: transparent; border: 0; border-top: 2px solid transparent; font: var(--type-caption); cursor: pointer; } .ht-mobilebar button[aria-pressed='true'] { border-top-color: var(--line-brand); font-weight: 600; background: var(--surface-brand-subtle); } .ht-statusbar { font-size: 12px; gap: 12px; } #status-detail { display: none; } .ht-metric-value { font-size: 16px; } .ht-metric { padding: 9px 8px; } .ht-toast { bottom: 88px; } }

/* The drawing and results each get a dedicated working area. */
@media (min-width: 761px) {
  .ht-center { grid-template-rows: minmax(190px,1fr) 45px; }
  .ht-workspace:not([data-pane='results']) .ht-results-body,
  .ht-workspace:not([data-pane='results']) .ht-results-footer { display: none; }
  .ht-workspace[data-pane='results'] { grid-template-columns: 200px minmax(0,1fr); }
  .ht-workspace[data-pane='results'] .ht-inspector { display: none; }
  .ht-workspace[data-pane='results'] .ht-center { grid-template-rows: minmax(0,1fr); }
}
@media (min-width: 1600px) { .ht-workspace[data-pane='results'] { grid-template-columns: 220px minmax(0,1fr); } }
@media (min-width: 761px) and (max-width: 1000px) { .ht-workspace[data-pane='results'] { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 760px) { .ht-workspace[data-pane='results'] .ht-inspector { display: none; } }
@media (min-width: 761px) and (max-width: 1100px) { .ht-project-button { max-width: 130px; } .ht-toolbar > .ht-btn:not(.ht-btn--primary):not(.ht-project-button) span { display: none; } }

/* Clear section hierarchy without filling the property panel with colour. */
.ht-inspector .ht-section { border-bottom-color: var(--red-200); }
.ht-inspector .ht-section-title .ht-label { color: var(--red-500); font-weight: 700; }
.ht-inspector .ht-section-title { border-left: 3px solid var(--red-500); padding-left: 9px; }
.ht-section > .ht-field-note + .ht-fields { margin-top: 12px; }

/* Calculator workspace alignment: shared red rules and quiet view controls. */
.ht-siteheader { border-bottom-color: var(--red-500); }
.ht-statusbar { border-top-color: var(--red-500); }
.ht-outline .ht-panelhead { border-bottom: 2px solid var(--red-500); }
.ht-outline .ht-panelhead .ht-label { color: var(--red-400); }
.ht-inspector-heading { border-bottom: 2px solid var(--red-500); background: var(--surface-page); }
.ht-canvas { box-shadow: inset 0 0 0 1px var(--red-500); }
.ht-drawbar .ht-btn { border-radius: 0; border: 0; border-bottom: 2px solid transparent; }
.ht-drawbar .ht-btn[aria-pressed='true'] { background: var(--surface-sunken); border-bottom-color: var(--red-500); }
.ht-drawbar .ht-btn:hover { background: var(--surface-hover); }
.ht-canvas .ht-board-view-button[aria-pressed='true'] { background: var(--surface-sunken); }
.ht-canvas .ht-board-view-button:hover { background: var(--surface-hover); }
.ht-toolbar > button[title='Open tier results'], .ht-toolbar > button[title='Back to switchboard layout'] { border: 0; border-bottom: 2px solid var(--red-500); border-radius: 0; }


.ht-page { grid-template-rows: 64px 64px auto minmax(0,1fr) 28px; }
.ht-panelhead { height: 54px; min-height: 54px; }
@media (max-width: 760px) { .ht-page { grid-template-rows: 52px auto auto minmax(0,1fr) 48px 28px; } }