/* diagnose.css — Fachwerkhaus Diagnostic Tool
   Institute for Collaboration Architecture, 2026
*/

/* ── Global ── */
body {
  font-family: monospace;
  font-size: 14px;
  color: #000;
  background: #fff;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

/* ── Header ── */
h1 {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.draft-badge {
  display: inline-block;
  border: 2px solid #000;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 16px;
}

hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

/* ── Intro ── */
.intro {
  color: #444;
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 600px;
  font-size: 13px;
}

/* ── Split layout ── */
.main {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.questions {
  flex: 1;
  min-width: 0;
}

.house-side {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

/* ── Free-text fields ── */
.freitext-block {
  margin: 10px 0 22px;
  padding-left: 12px;
}

.freitext-block label {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 5px;
}

.freitext {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
  padding: 8px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
  border: 1px solid #ccc;
  background: #fff;
  resize: vertical;
}

.freitext:focus {
  outline: none;
  border-color: #000;
}

/* ── Export button ── */
.export-wrap { margin-top: 16px; }

.export-btn {
  font-family: Georgia, serif;
  font-size: 15px;
  padding: 7px 18px;
  border: 2px solid #000;
  background: #fff;
  cursor: pointer;
}

.export-btn:hover {
  background: #000;
  color: #fff;
}

.export-note {
  display: block;
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
}

/* ── Questions ── */
.section-title {
  font-weight: bold;
  font-size: 13px;
  margin: 18px 0 8px;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
}

.q {
  margin-bottom: 14px;
  padding-left: 12px;
}

.q p {
  margin-bottom: 4px;
  font-size: 13px;
}

.q label {
  display: block;
  font-size: 12px;
  color: #444;
  padding: 2px 0;
  cursor: pointer;
}

.q label:hover {
  color: #000;
}

.q input[type=radio] {
  margin-right: 6px;
}

/* ── House box ── */
.house-box {
  border: 2px solid #000;
  padding: 10px;
  background: #fff;
  overflow: hidden;
}

.static-house img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.house-box h3 {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 8px;
}

/* ══════════════════════════════════════════════════
   HOUSE GRID
   
   The house is 320px wide inside the box.
   We use a fixed-height grid so beams connect 
   without gaps.
   
   Row 1: 140px — roof (rafters + label)
   Row 2:  28px — ceiling beam
   Row 3: 200px — walls + cross-braces  
   Row 4:  28px — floor beam
   
   Columns: wall-post | center | wall-post
   Wall posts overlap into the ceiling/floor rows 
   via negative margins so there are no gaps.
   ══════════════════════════════════════════════════ */
.house-grid {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  grid-template-rows: 140px 28px 200px 28px;
  gap: 0;
  width: 100%;
  position: relative;
}

/* ── Roof ── */
.h-roof-left {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  position: relative;
  overflow: visible;
  z-index: 2;
  pointer-events: none;
}

.h-roof-center {
  grid-column: 1 / 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}

.h-roof-right {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  position: relative;
  overflow: visible;
  z-index: 2;
  pointer-events: none;
}

.h-roof-left .el {
  position: absolute;
  top: 0;
  left: 50%;
}

.h-roof-left .el img {
  height: 220px;
  width: auto;
  transform: rotate(45deg);
  transform-origin: top left;
  display: block;
}

.h-roof-right .el {
  position: absolute;
  top: 0;
  right: 50%;
}

.h-roof-right .el img {
  height: 220px;
  width: auto;
  transform: rotate(-45deg);
  transform-origin: top right;
  display: block;
}

.roof-label {
  font-size: 10px;
  color: #666;
  line-height: 1.4;
  margin-top: 80px;
}

/* ── Ceiling beam (top, full width, no gaps) ── */
.h-top { 
  grid-column: 1 / 4; 
  grid-row: 2; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 1;
}

/* ── Wall posts (vertical, full height of row 3) ── */
.h-left { 
  grid-column: 1; 
  grid-row: 3; 
  display: flex; 
  align-items: stretch; 
  justify-content: center;
   padding-left: 30px
}

.h-right { 
  grid-column: 3; 
  grid-row: 3; 
  display: flex; 
  align-items: stretch; 
  justify-content: center;
   padding-right: 30px
}

/* ── Cross-brace area (center, full height of row 3) ── */
.h-center { 
  grid-column: 2; 
  grid-row: 3; 
  position: relative; 
  overflow: hidden;
}

/* ── Floor beam (bottom, full width, no gaps) ── */
.h-bottom { 
  grid-column: 1 / 4; 
  grid-row: 4; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

/* ── Element states ── */
.el      { opacity: 0; transition: opacity .3s; }
.el.show { opacity: 1; }
.el img  { object-fit: contain; }

/* Wall posts: stretch full height of their cell */
.h-left .el, .h-right .el { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  height: 100%; 
}
.h-left img, .h-right img { 
  height: 100%; 
  width: auto; 
  max-width: 50px;
}

/* Ceiling and floor beams: stretch full width */
.h-top .el, .h-bottom .el {
  width: 100%;
  text-align: center;
}
.h-top img, .h-bottom img { 
  width: 100%; 
  height: 28px; 
  object-fit: fill;
}

/* ── Cross-braces ── 
   Both braces originate alongside each other from the center of the ceiling beam.
   Culture: from center-top down to left wall  (/)
   Habits:  from center-top down to right wall (\)
   Both at 45 degrees.
*/
.brace-culture { 
  position: absolute;
  left: 40%; 
  top: 0; 
  width: 0;
  height: 0;
  pointer-events: none;
}
.brace-culture .el {
  position: absolute;
  top: 0;
  left: 0;
}
.brace-culture .el img {
  height: 260px;
  width: auto;
  max-width: none;
  transform: rotate(-45deg);
  transform-origin: top center;
}

.brace-habits { 
  position: absolute;
  left: 40%; 
  top: 0; 
  width: 0;
  height: 0;
  pointer-events: none;
}
.brace-habits .el {
  position: absolute;
  top: 0;
  left: 0;
}
.brace-habits .el img {
  height: 260px;
  width: auto;
  max-width: none;
  transform: rotate(45deg);
  transform-origin: top center;
}

/* Cross-brace images */
.h-center img { max-height: none; }

/* ── Center figure (appears on gravity) ── */
.figure-center { 
  display: none; 
  position: absolute; 
  bottom: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 5; 
}
.figure-center.show { display: block; }
.figure-center img {
  height: 180px;
  width: auto;
}
.foundation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 2px;
  text-align: center;
}

.found img {
  width: 100%;
  height: auto;
}

/* ── Labels ── */
.el-name {
  font-size: 8px;
  color: #999;
  text-align: center;
  margin-top: 2px;
}

/* Labels on walls: below the post */
.h-left .el-name, .h-right .el-name {
  font-size: 7px;
  white-space: nowrap;
}

/* Labels on cross-braces: positioned at bottom of center area */
.brace-habits .el-name,
.brace-culture .el-name {
  position: absolute;
  bottom: -14px;
  font-size: 7px;
  white-space: nowrap;
}
.brace-culture .el-name { left: 0; }
.brace-habits .el-name { right: 0; }

/* ── Absent element placeholder ── */
.figure      { display: none; font-size: 24px; text-align: center; }
.figure.show { display: block; }

/* ── Foundation ── */
.foundation {
  grid-column: 1 / 4;
  text-align: center;
  font-size: 9px;
  color: #aaa;
  border: 1px solid #ddd;
  padding: 4px;
  margin-top: 4px;
}

/* ── Progress ── */
.progress {
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
}

/* ── Gravity button ── */
.gravity-section      { text-align: center; margin: 20px 0; display: none; }
.gravity-section.show { display: block; }

.gravity-btn {
  font-family: Georgia, serif;
  font-size: 18px;
  padding: 8px 24px;
  border: 2px solid #000;
  background: #fff;
  cursor: pointer;
}

.gravity-btn:hover {
  background: #000;
  color: #fff;
}

/* ── Results ── */
.results      { display: none; border: 2px solid #000; padding: 16px; margin: 20px 0; }
.results.show { display: block; }

.results h2 {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.results p {
  font-size: 13px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 8px;
}

.results-cta { margin-top: 14px; }

.cost-box {
  background: #f8f0f0;
  border-left: 3px solid #c44;
  padding: 10px;
  margin: 10px 0;
  font-size: 13px;
}

.grav-box {
  background: #f4f4f4;
  border-left: 3px solid #888;
  padding: 10px;
  margin: 10px 0;
  font-size: 13px;
}

/* ── Footer ── */
footer {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  margin-top: 30px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

footer a { color: #888; }

/* ── Mobile ── */
@media (max-width: 780px) {
  .main { flex-direction: column; }
  .house-side { width: 100%; position: static; order: -1; }
}