/* =========================================================================
   AI House-Design — DESIGNER styles (Slice D, local-only single page)
   Same visual language as the public dashboard (site/styles.css): architect's
   drafting paper — cool light ground, blueprint grid, ink-blue accent.
   Tokens are copied verbatim from styles.css so the two surfaces stay in step.
   Fonts: the CSP is font-src 'self' with no webfont vendored, so the family
   stacks below intentionally resolve to their system fallbacks.
   ========================================================================= */

:root {
  /* --- paper & ink (verbatim from styles.css) --- */
  --paper:      #e7edf2;
  --paper-2:    #f4f7fa;
  --paper-3:    #dbe3ea;
  --grid:       rgba(31, 92, 153, 0.055);
  --grid-major: rgba(31, 92, 153, 0.10);

  --ink:        #14273b;
  --ink-soft:   #47596c;
  --ink-faint:  #6b7c8d;
  --line:       #c1ccd7;
  --line-soft:  #d5dde5;

  --accent:        #1f5c99;
  --accent-strong: #123f6b;
  --accent-tint:   rgba(31, 92, 153, 0.10);
  --accent-tint-2: rgba(31, 92, 153, 0.18);

  --done:         #3f8f6b;  --done-tint:    rgba(63, 143, 107, 0.15);
  --active:       #c08411;  --active-tint:  rgba(192, 132, 17, 0.16);
  --planned:      #7d8b99;  --planned-tint: rgba(125, 139, 153, 0.16);
  --risk:         #b0553f;  --risk-tint:    rgba(176, 85, 63, 0.14);

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(18, 39, 59, 0.06), 0 8px 24px rgba(18, 39, 59, 0.07);
  --shadow-sm: 0 1px 2px rgba(18, 39, 59, 0.08);
  --topbar-h: 60px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

a { color: var(--accent); text-decoration-color: var(--accent-tint-2); }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  background: var(--accent-strong); color: #fff;
  padding: 10px 16px; border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* =========================================================================
   Top bar (dashboard idiom)
   ========================================================================= */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: rgba(244, 247, 250, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--accent-strong); color: #eaf2fb;
  box-shadow: var(--shadow-sm);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.01em; }
.brand-sub {
  font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink-faint); margin-top: 2px;
}
.topbar-meta {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft);
}
.meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 100px; background: var(--paper-2);
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft);
  white-space: nowrap;
}
.meta-chip b { color: var(--ink); font-weight: 600; }

/* =========================================================================
   Buttons (chip-adjacent, drafting palette)
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-2); box-shadow: var(--shadow-sm);
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.btn:hover { color: var(--accent-strong); border-color: var(--accent-tint-2); background: var(--paper); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed;
  color: var(--ink-faint); border-color: var(--line-soft); background: var(--paper-3);
}
.btn-primary {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: #fff; background: var(--accent); border-color: var(--accent-strong);
}
.btn-primary:hover { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-primary:disabled { color: #fff; background: var(--planned); border-color: var(--planned); }
.btn-small { padding: 4px 10px; font-size: 0.7rem; }

/* =========================================================================
   Layout
   ========================================================================= */
.content { padding: 26px clamp(16px, 4vw, 44px) 80px; max-width: 1500px; margin: 0 auto; }

/* --- brief card --- */
.brief-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(31,92,153,0.08), transparent 55%),
    var(--paper-2);
  padding: 18px 22px 20px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.brief-card::before {  /* corner registration tick, like a drawing sheet */
  content: ""; position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px;
  border-top: 2px solid var(--accent-tint-2); border-right: 2px solid var(--accent-tint-2);
}
.brief-label {
  display: block; margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.brief-row { display: flex; gap: 10px; }
#brief-input {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 1.05rem; color: var(--ink);
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff;
}
#brief-input::placeholder { color: var(--ink-faint); }
#brief-input:disabled { background: var(--paper-3); color: var(--ink-faint); }

/* --- public-test privacy notice (always visible; no JS) --- */
.public-notice {
  margin: 0 0 14px; padding: 11px 15px;
  border-radius: var(--r-md); border-left: 3px solid var(--active);
  background: var(--active-tint); color: var(--ink-soft);
  font-size: 0.9rem; line-height: 1.45;
}
.public-notice-tag {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--active);
  margin-right: 6px;
}

/* --- notices --- */
.notices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: 0 var(--r-md) var(--r-md) 0;
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  color: var(--ink-soft); font-size: 0.92rem;
}
.callout .co-body { flex: 1; min-width: 0; }
.callout .co-title {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px;
}
.callout ul { margin: 0; padding-left: 20px; }
.callout li { margin: 3px 0; }
.callout li::marker { color: currentColor; }
.callout.warn  { border-left-color: var(--active); background: var(--active-tint); }
.callout.warn  .co-title { color: var(--active); }
.callout.error { border-left-color: var(--risk); background: var(--risk-tint); }
.callout.error .co-title { color: var(--risk); }
.callout.info  .co-title { color: var(--accent); }
.callout .co-dismiss {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin: -3px -6px 0 0;
  background: transparent; border: none; cursor: pointer;
  color: inherit; font-size: 1.15rem; line-height: 1;
}
.callout .co-dismiss:hover { background: rgba(18, 39, 59, 0.08); }

/* --- empty state --- */
.empty-state {
  margin-top: 18px; padding: 34px 26px;
  border: 1.5px dashed var(--line); border-radius: var(--r-lg);
  text-align: center; color: var(--ink-soft);
}
.empty-title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.example-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--paper-2); padding: 7px 14px;
  color: var(--ink-soft); font-size: 0.86rem; font-family: var(--font-body);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.chip:hover { color: var(--accent-strong); border-color: var(--accent-tint-2); background: var(--paper); }
.empty-note {
  margin: 16px auto 0; max-width: 56ch;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint);
}

/* =========================================================================
   Workspace: toolbar + panels
   ========================================================================= */
.workspace { margin-top: 16px; }
.plan-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.plan-meta { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.brief-chip { max-width: 34ch; }
.brief-chip .brief-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-actions { margin-left: auto; display: flex; gap: 8px; }

.panels {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas:
    "plan2d aside"
    "plan3d aside";
  align-items: start;
}
.panel-2d  { grid-area: plan2d; }
.panel-3d  { grid-area: plan3d; }
.panel-asm { grid-area: aside; }

.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2); box-shadow: var(--shadow-sm);
  padding: 14px 16px 16px; min-width: 0;
}
.panel-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.panel-head h2 {
  margin: 0; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent);
}
.panel-head .rule { flex: 1; height: 1px; background: var(--line); }
.panel-note { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-faint); }
.panel-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
}
.panel-toggle input { accent-color: var(--accent); margin: 0; }

/* --- 2D SVG --- */
.svg-host {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: #fff; overflow: hidden;
}
.svg-host svg { display: block; width: 100%; height: auto; }
.svg-empty {
  margin: 0; padding: 40px 16px; text-align: center;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint);
}

/* --- 3D viewer --- */
.viewer-host {
  position: relative; height: 400px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden;
}
#viewer-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#viewer-canvas:active { cursor: grabbing; }
#viewer-canvas:focus-visible { outline-offset: -3px; }
.viewer-status {
  position: absolute; inset: auto 0 0 0; margin: 0;
  padding: 8px 12px; text-align: center;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-soft);
  background: rgba(244, 247, 250, 0.92); border-top: 1px solid var(--line-soft);
}
.viewer-status.error { color: var(--risk); }
.viewer-hint {
  margin: 8px 2px 0; font-family: var(--font-mono); font-size: 0.66rem;
  color: var(--ink-faint); text-align: right;
}

/* =========================================================================
   Assumptions panel
   ========================================================================= */
.asm-caption { margin: 0 0 12px; font-size: 0.84rem; color: var(--ink-soft); }
.asm-group-label {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 6px;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint);
}
.asm-group-label::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.asm-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 8px 10px; margin: 2px -10px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.asm-row:hover { background: rgba(255, 255, 255, 0.55); }
.asm-row.pending { background: var(--active-tint); border-color: rgba(192, 132, 17, 0.35); }
.asm-row.invalid { background: var(--risk-tint); border-color: rgba(176, 85, 63, 0.4); }

.asm-label { flex: 1 1 120px; min-width: 0; font-size: 0.9rem; color: var(--ink); }
.asm-control { display: inline-flex; align-items: center; gap: 6px; }
.asm-control input[type="number"], .asm-control select {
  font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink);
  padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; width: 84px;
}
.asm-control select { width: auto; }
.asm-control input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.asm-unit { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); }
.asm-value { font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink-soft); }

.badge-flag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px; border: 1px solid;
}
.badge-flag.inferred  { color: var(--active); border-color: var(--active); background: var(--active-tint); }
.badge-flag.confirmed { color: var(--done); border-color: var(--done); background: var(--done-tint); }
.badge-flag.derived   { color: var(--planned); border-color: var(--planned); background: var(--planned-tint); }

.confirm-btn {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--paper-2); color: var(--ink-soft); cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.confirm-btn:hover { color: var(--done); border-color: var(--done); }
.confirm-btn[aria-pressed="true"] { color: var(--done); border-color: var(--done); background: var(--done-tint); }

.apply-bar {
  position: sticky; bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--active); border-radius: var(--r-md);
  background: #fdf6e7; box-shadow: var(--shadow);
}
.apply-count { flex: 1; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink); }

/* --- advisory scorecard --- */
.scorecard { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 10px; }
.scorecard summary {
  cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--ink-soft); letter-spacing: 0.04em;
}
.scorecard summary:hover { color: var(--accent-strong); }
.scorecard-list { list-style: none; margin: 10px 0 0; padding: 0; }
.scorecard-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 2px; border-top: 1px solid var(--line-soft);
  font-size: 0.82rem; color: var(--ink-soft);
}
.scorecard-list .sc-rule { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); }
.scorecard-list .sc-detail { flex: 1; min-width: 0; }
.badge-sc {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 100px; border: 1px solid;
}
.badge-sc.pass { color: var(--done); border-color: var(--done); background: var(--done-tint); }
.badge-sc.trip { color: var(--active); border-color: var(--active); background: var(--active-tint); }
.scorecard-foot { margin: 10px 0 0; font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-faint); }

/* =========================================================================
   Busy overlay
   ========================================================================= */
.busy-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: rgba(18, 39, 59, 0.35); backdrop-filter: blur(2px);
}
.busy-overlay[hidden] { display: none; }
.busy-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: min(360px, 86vw);
  padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2); box-shadow: var(--shadow); text-align: center;
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--accent-tint-2); border-top-color: var(--accent);
  margin-bottom: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin 0.9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}
.busy-label { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.busy-sub { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
.busy-elapsed { margin: 4px 0 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); }

/* =========================================================================
   Saved-plans dialog
   ========================================================================= */
.plans-dialog {
  width: min(560px, 92vw); max-height: 80vh;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow);
}
.plans-dialog::backdrop { background: rgba(18, 39, 59, 0.5); backdrop-filter: blur(2px); }
.plans-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--paper-2);
}
.plans-head h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.dialog-close {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.dialog-close:hover { border-color: var(--accent-tint-2); color: var(--accent-strong); }
.plans-body { padding: 10px 12px 14px; overflow-y: auto; }
.plans-empty { margin: 0; padding: 26px 10px; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); }
.plan-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  text-align: left; margin: 4px 0; padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer; font: inherit; color: inherit;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.plan-item:hover { border-color: var(--accent-tint-2); background: #fff; }
.plan-item .pi-brief { font-size: 0.92rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-item .pi-meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-faint); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1060px) {
  .panels { grid-template-columns: 1fr; grid-template-areas: "plan2d" "plan3d" "aside"; }
  .viewer-host { height: 340px; }
}
@media (max-width: 560px) {
  .topbar-meta { display: none; }
  .brand-sub { display: none; }
  .content { padding: 18px 14px 60px; }
  .brief-row { flex-direction: column; }
  .plan-actions { margin-left: 0; width: 100%; }
  .plan-actions .btn { flex: 1; }
  .viewer-host { height: 280px; }
}

/* =========================================================================
   Reduced motion (dashboard idiom)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}