/* THE ARCHITECT'S SET, ON SCREEN.
 *
 * Two screens with one job between them: let her SEE what was read off her drawing before a
 * single wall is built. So the sheet is the biggest thing here and the numbers sit beside it —
 * the reverse of every other panel in the studio, because this is the one surface where the
 * document is the subject and we are only annotating it.
 *
 * Every token comes from app.css. The sheet itself is shown on PAPER, not on the studio's navy,
 * because that is what it is and because a white drawing on a dark page reads as an inversion
 * of her own file.
 */

.sd-overlay {
  /* Above the bar (silk.css pins #topbar at 220) and below a toast, which has to stay readable
   * over anything — the same stacking the scheme board settled. */
  position: fixed; inset: 0; z-index: 240;
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 20px 24px;
  background: rgba(6,8,18,.74); backdrop-filter: blur(10px);
  animation: sd-in .18s ease both;
}
.sd-overlay[hidden] { display: none; }
@keyframes sd-in { from { opacity: 0; } }

.sd-sheet {
  display: flex; flex-direction: column;
  width: min(1120px, 100%); max-height: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
  overflow: hidden;
}

.sd-head {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: 14px;
  padding: 17px 20px 14px; border-bottom: 1px solid var(--line);
}
.sd-head > div { flex: 1 1 auto; min-width: 0; }
.sd-head h2 {
  font: 500 20px/1.2 "Unbounded", var(--sans); letter-spacing: -.015em; color: var(--text);
  margin: 0; overflow-wrap: anywhere;
}
.sd-head p { font: 400 12px/1.5 var(--sans); color: var(--text-3); margin: 4px 0 0; }
.sd-x {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-3); font-size: 22px; line-height: 1;
}
.sd-x:hover { background: var(--panel-2); color: var(--text); }

.sd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; }

/* ── screen one: which sheet ─────────────────────────────────────────────── */

.sd-rows { display: flex; flex-direction: column; gap: 5px; }
.sd-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 11px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  transition: background .12s, border-color .12s;
}
.sd-row:hover { background: var(--panel-2); border-color: var(--line-2, var(--line)); }
.sd-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The sheet the set itself points at. Marked, never auto-opened: opening a document on her
   behalf is a decision, and the page it lands on is one she should be able to see us choose. */
.sd-row.is-pick { border-color: rgba(109,123,255,.45); background: rgba(109,123,255,.08); }

.sd-no {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font: 600 12px var(--mono); color: var(--text-2); background: var(--panel); border: 1px solid var(--line);
}
.sd-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-what b { font: 500 13.5px/1.3 var(--sans); color: var(--text); }
.sd-what em {
  font: 400 11px var(--mono); color: var(--text-3); font-style: normal;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-tag {
  flex: 0 0 auto; padding: 3px 8px; border-radius: 999px;
  font: 600 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.sd-measured { background: rgba(94,214,160,.14); color: var(--good); }
.sd-scan { background: rgba(255,196,107,.14); color: var(--warn); }

.sd-note { font: 400 11.5px/1.65 var(--sans); color: var(--text-3); margin-top: 14px; max-width: 76ch; }
.sd-note b { color: var(--text-2); font-weight: 600; }

/* ── screen two: the sheet, with the reading over it ─────────────────────── */

.sd-stage {
  /* CAPPED, BECAUSE THE DECISION HAS TO BE ON SCREEN WITH THE DRAWING. Shown full width, an A3
   * sheet filled the panel and pushed the scale, the counts and the Build button below the fold
   * — she was looking at her own drawing with no way to see what had been read off it without
   * scrolling away from it. The page's own ratio is set inline, so the overlay and the picture
   * are stretched to the same box and a wall lands where the drawing has it. */
  position: relative; border-radius: 12px; overflow: hidden;
  width: auto; max-width: 100%; max-height: 46vh; margin: 0 auto 15px;
  background: #fff;                        /* it is paper; it is shown as paper */
  border: 1px solid var(--line);
}
.sd-stage img { display: block; width: 100%; height: 100%; object-fit: fill; }

/* The overlay is stretched to the page box, so a wall lands exactly where the drawing has it.
   preserveAspectRatio is off on purpose: the viewBox IS the page in millimetres and the image
   IS the same page, so the two cannot disagree unless one of them is wrong. */
.sd-over { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-w {
  stroke: #d8366a; stroke-width: 1.6; stroke-linecap: round;
  opacity: .85;
}
.sd-o { stroke: #2f6fe0; stroke-width: 2.6; stroke-linecap: butt; opacity: .9; }

.sd-read { display: flex; flex-direction: column; gap: 13px; }

.sd-scale {
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 11px;
}
.sd-scale b { font: 600 17px var(--mono); letter-spacing: -.01em; }
.sd-scale span { font: 400 11.5px/1.5 var(--sans); color: var(--text-2); flex: 1 1 14ch; }
/* MEASURED AND STATED ARE DIFFERENT CLAIMS and they do not get to look the same. One was
   divided out of the drawing; the other is a sentence in a title block that may describe a page
   this PDF is no longer printed at. */
.sd-scale.is-measured { background: rgba(94,214,160,.08); border: 1px solid rgba(94,214,160,.22); }
.sd-scale.is-measured b { color: var(--good); }
.sd-scale.is-stated { background: rgba(255,196,107,.08); border: 1px solid rgba(255,196,107,.24); }
.sd-scale.is-stated b { color: var(--warn); }

.sd-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sd-facts li {
  flex: 1 1 150px; display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  font: 400 11px var(--sans); color: var(--text-3);
}
.sd-facts b { font: 600 15px var(--mono); color: var(--text); }
.sd-facts em { font: 400 10.5px var(--mono); color: var(--text-3); font-style: normal; }
/* A STATED HEIGHT AND AN ASSUMED ONE ARE DIFFERENT FACTS. The first came off an elevation; the
   second is us filling a gap, and a designer who specifies against it finds out on site. */
.sd-facts li.is-stated { border-color: rgba(94,214,160,.3); }
.sd-facts li.is-stated b { color: var(--good); }
.sd-facts li.is-guess { border-color: rgba(255,196,107,.32); }
.sd-facts li.is-guess b { color: var(--warn); }

.sd-rooms { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sd-rooms li {
  padding: 5px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  font: 400 11.5px var(--sans); color: var(--text-2);
}
.sd-rooms b { color: var(--text); font-weight: 500; }
.sd-rooms em { font: 400 10.5px var(--mono); color: var(--text-3); font-style: normal; }

.sd-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-go {
  height: 36px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--grad); color: var(--accent-ink); font: 600 13px var(--sans);
  transition: filter .12s;
}
.sd-go:hover { filter: brightness(1.08); }
.sd-mini { height: 30px; padding: 0 13px; font-size: 12px; }
.sd-back {
  height: 36px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line); font: 500 12.5px var(--sans);
}
.sd-back:hover { background: var(--panel-2); color: var(--text); }

.sd-fix { border-top: 1px solid var(--line); padding-top: 11px; }
.sd-fix summary { font: 500 12px var(--sans); color: var(--text-3); cursor: pointer; }
.sd-fix summary:hover { color: var(--text-2); }
.sd-fix p { font: 400 11.5px/1.6 var(--sans); color: var(--text-3); margin: 9px 0; max-width: 70ch; }
.sd-fix label { font: 400 12px var(--sans); color: var(--text-2); display: inline-flex;
  align-items: center; gap: 7px; margin-right: 9px; }
.sd-fix input {
  width: 92px; height: 30px; padding: 0 9px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  font: 500 12.5px var(--mono);
}

/* ── refusals, and waiting ───────────────────────────────────────────────── */

.sd-refuse {
  padding: 15px 16px; border-radius: 12px;
  background: rgba(255,196,107,.07); border: 1px solid rgba(255,196,107,.24);
}
.sd-refuse b { font: 600 13.5px var(--sans); color: var(--warn); }
.sd-refuse p { font: 400 12.5px/1.65 var(--sans); color: var(--text-2); margin: 7px 0 12px; max-width: 72ch; }
.sd-refuse button + button { margin-left: 8px; }

.sd-wait {
  height: 170px; border-radius: 12px;
  background: linear-gradient(100deg, var(--bg-2) 20%, var(--panel-2) 40%, var(--bg-2) 60%);
  background-size: 300% 100%; animation: sd-shimmer 1.4s ease-in-out infinite;
}
@keyframes sd-shimmer { to { background-position: -150% 0; } }

/* ── phone ───────────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .sd-overlay { padding: 0; }
  .sd-sheet { height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .sd-body { padding: 13px 16px 22px; }
  .sd-head { padding: 13px 16px 11px; }
  .sd-facts li { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-overlay { animation: none; }
  .sd-wait { animation: none; }
}