:root {
  color-scheme: dark;
  --bg: #091018;
  --bg-soft: #0d1620;
  --panel: rgba(18, 27, 37, 0.96);
  --surface: #0f1823;
  --text: #eef4fb;
  --muted: #a6b7ca;
  --btn: #1d6ec8;
  --btn-hover: #165ba7;
  --chip: #172637;
  --chip-border: #2a394a;
  --panel-border: #2a394a;
  --input-bg: #101a26;
  --input-bd: #22344b;
  --input-halo: #3b74c6;
  --line: #223042;
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
}

* {
  box-sizing: border-box;
  scrollbar-color: #3a3a3a #0f0f0f;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #0f0f0f;
}

*::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 999px;
  border: 2px solid #0f0f0f;
}

*::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(46, 116, 201, 0.16), transparent 28%),
    linear-gradient(180deg, #0c141d 0%, #081018 100%);
  color: var(--text);
  font: 14px/1.45 Arial, Helvetica, sans-serif;
}

body.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(7, 12, 18, 0.44), rgba(8, 16, 24, 0.7)),
    url('./assets/login-bg.svg?v=20260627top') center top / cover no-repeat,
    #091018;
}

body.auth-shell .site-header,
body.auth-shell .session-panel,
body.auth-shell .user-menu,
body.auth-shell .module-tabs,
body.auth-shell .app-shell {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

.hidden {
  display: none !important;
}

.login-shell {
  width: min(480px, 100%);
  background: rgba(18, 27, 37, 0.96);
  border: 1px solid rgba(42, 57, 74, 0.76);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow);
  text-align: center;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.header-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.login-brand-icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  border-radius: 10px;
}

.header-title-icon {
  width: auto;
  height: 1.9em;
  object-fit: contain;
  border-radius: 10px;
  flex: 0 0 auto;
}

/* Dynamic header wordmark (Tyler 2026-07-21): "PlanScope" on the chooser, or the
   active module's name on a module screen. Sized to sit level with the animated icon. */
.header-title-text {
  font-size: clamp(19px, 4.2vw, 28px);
  font-weight: 800;
  color: #eef4fb;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.login-brand-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.login-brand-subtitle,
.login-copy {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.login-primary-btn {
  width: 100%;
}

body.has-test-banner {
  padding-top: 48px;
}

.test-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px;
  background: #8a1f2d;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.test-banner-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.test-banner-btn {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.test-banner-btn[data-enabled="false"] {
  background: rgba(0, 0, 0, 0.24);
  border-color: rgba(255, 255, 255, 0.22);
}

.test-banner-btn:disabled {
  opacity: 0.68;
  cursor: wait;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  padding: 16px 12px 14px;
  background: linear-gradient(180deg, rgba(9, 16, 24, 0.98), rgba(9, 16, 24, 0.92));
  border-bottom: 1px solid rgba(42, 57, 74, 0.76);
  backdrop-filter: blur(10px);
}

.header-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
}

/* Left brand + home affordance (Tyler 2026-07-20): the "PlanScope" wordmark-button
   sits top-LEFT on every app-shell screen and returns to the module chooser. It is
   hidden only with the whole header (login / the full-bleed takeoff viewer). The
   user pill now lives on the RIGHT, so this clears it. */
.modules-home-btn {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 31;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--chip-border);
  border-radius: 10px;
  background: rgba(12, 20, 29, 0.92);
  color: #d9ebff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.modules-home-btn:hover { background: #16304d; border-color: #2b5c91; }

.site-header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: #eef4fb;
  text-align: center;
  line-height: 1.05;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1c2330, #121821);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--panel-border);
  display: grid;
  place-items: center;
  color: #eef4fb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.status-chip,
.meta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--chip-border);
  background: var(--chip);
  color: var(--text);
}

.status-chip {
  min-height: 20px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #16304d;
  color: #8ec3ff;
}

.meta-chip {
  padding: 4px 8px;
  color: var(--muted);
}

.user-menu {
  position: fixed;
  right: 16px;
  left: auto;
  top: 70px;
  z-index: 31;
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
}

body.has-test-banner .user-menu {
  top: 118px;
}

.section-label {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7fa8d6;
}

.session-panel {
  position: fixed;
  right: 16px;
  top: 12px;
  z-index: 30;
  display: inline-flex;
  width: fit-content;
  max-width: min(calc(100vw - 32px), 420px);
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  cursor: pointer;
}

body.has-test-banner .session-panel {
  top: 60px;
}

.session-meta .section-label {
  display: none;
}

.session-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.session-meta {
  min-width: 0;
  max-width: 330px;
}

.session-meta h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.session-meta .muted-copy {
  margin: 2px 0 0;
  font-size: 12px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

fieldset.field {
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 0;
}

fieldset.field > legend {
  padding: 0;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.user-menu button {

  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

.user-menu button:hover {
  background: rgba(29, 110, 200, 0.14);
}

.auth-message {
  width: min(1120px, calc(100% - 32px));
  margin: 14px auto 0;
  padding: 12px 14px;
  border: 1px solid #7e3743;
  border-radius: 12px;
  background: #2a1418;
  color: #ffd6dc;
  box-shadow: var(--shadow);
}

.auth-message[data-tone="info"] {
  border-color: #274462;
  background: #102031;
  color: #b9d9fb;
}

.auth-message[data-tone="error"] {
  border-color: #7e3743;
  background: #2a1418;
  color: #ffd6dc;
}

.app-shell {
  width: 100%;
  max-width: 100%;
}

.module-tabs {
  width: min(680px, calc(100% - 32px));
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--chip-border);
  border-radius: 14px;
  background: rgba(12, 20, 29, 0.92);
  box-shadow: var(--shadow);
}

.module-tab {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
}

.module-tab.is-active {
  background: #16304d;
  border-color: #2b5c91;
  color: #d9ebff;
}

/* ---- Home hub (module chooser) redesign v2 (Tyler 2026-07-21) ----------------
   No hero (the header carries the title). A featured Takeoff card + a module grid
   over a faint blueprint backdrop so the space reads as a workspace, not a void.
   Overrides the old .module-tabs grid + .module-tab button styles above. */
.module-tabs {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  min-height: calc(100vh - 156px);
  display: flex;
  /* Sections (heading + its own .home-grid) stack; each stretches to the full
     column width. Before the section split this held a single .home-grid, so a
     row-direction centred flex was fine — with multiple children it laid the
     headings and both grids out side by side and collapsed the tiles. */
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 32px 0 56px;
  border: 0;
  box-shadow: none;
  grid-template-columns: none;
  position: relative;
  z-index: 1;
  background: transparent;   /* kill the earlier .module-tabs dark card so the grid shows through */
}
/* blueprint backdrop fills the WHOLE screen on EVERY signed-in screen EXCEPT the
   fullbleed takeoff viewer (Tyler 2026-07-21) — painted as the body's fixed
   background so it sits behind all content, edge to edge. */
body.signed-in:not(.tk-viewer-fullbleed):not(.ins-workspace) {
  background-color: #0b0f1a;
  background-image:
    radial-gradient(1200px 680px at 50% 42%, rgba(47, 111, 237, 0.13), transparent 66%),
    linear-gradient(rgba(130, 160, 220, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 160, 220, 0.075) 1px, transparent 1px);
  background-size: 100% 100%, 38px 38px, 38px 38px;
  background-attachment: fixed;
  background-repeat: no-repeat, repeat, repeat;
}
/* let the grid show THROUGH the module-screen containers (their own inner panels
   stay solid over it), on every signed-in screen except the fullbleed viewer. */
body.signed-in:not(.tk-viewer-fullbleed):not(.ins-workspace) .app-shell,
body.signed-in:not(.tk-viewer-fullbleed):not(.ins-workspace) .page,
body.signed-in:not(.tk-viewer-fullbleed):not(.ins-workspace) .content-shell {
  background: transparent;
}
.home-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.module-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 170px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #17212f, #121a28);   /* solid — no grid behind the buttons */
  color: var(--text);
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  transition: transform .13s ease, border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
.module-tab:hover {
  transform: translateY(-4px);
  border-color: #3d7ff0;
  background: linear-gradient(180deg, #1d2b41, #16223a);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(61, 127, 240, 0.35);
}
.module-tab:focus-visible { outline: 2px solid #3d7ff0; outline-offset: 2px; }
.mt-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 13px; flex: 0 0 auto;
  background: rgba(61, 127, 240, .18); color: #6fa2ff;
  border: 1px solid rgba(61, 127, 240, .30);
}
.mt-ic svg { width: 26px; height: 26px; }
.mt-t { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.mt-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; font-weight: 500; }
/* featured Takeoff — spans the row, centered content, translucent + emphasized */

.page {
  padding: 22px 16px 32px;
  width: 100%;
  max-width: 100%;
}

.content-shell {
  display: grid;
  gap: 10px;
}

.workspace {
  display: grid;
  gap: 10px;
}

.simple-workspace {
  grid-template-columns: 420px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.panel {
  padding: 24px;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.filters-panel {
  position: sticky;
  top: 106px;
}

.simple-panels {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-head h2,
.panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.panel-copy {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 66ch;
}

.intake-form,
.detail-list,
.lane-body {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.search-field {
  margin-top: 14px;
  margin-bottom: 8px;
  gap: 8px;
}

.field label {
  color: var(--muted);
  font-size: 13px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-bd);
  border-radius: 10px;
  color: var(--text);
  padding: 11px 12px;
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--input-halo);
  box-shadow: 0 0 0 3px rgba(59, 116, 198, 0.25);
}

.field textarea {
  min-height: 88px;
  resize: vertical;
}

.upload-dropzone {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--input-bd);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(15, 24, 35, 0.94), rgba(12, 20, 29, 0.98));
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.upload-dropzone.is-drag-over {
  border-color: #6fa6de;
  background: linear-gradient(180deg, rgba(28, 63, 100, 0.72), rgba(14, 29, 43, 0.98));
  box-shadow: 0 0 0 3px rgba(111, 166, 222, 0.18);
}

.card-subline {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.upload-title {
  font-size: 15px;
  font-weight: 700;
}

.upload-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#pdfUpload,
#doorTemplateUpload,
#frameTemplateUpload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.check-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input-bd);
  background: rgba(16, 26, 38, 0.94);
  cursor: pointer;
}

.check-option span {
  font-size: 12px;
  font-weight: 700;
}

.check-option input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.template-row:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.template-row:last-of-type {
  padding-bottom: 0;
}

.template-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.template-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.primary-btn,
.ghost-btn,
.upload-btn {
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.primary-btn,
.upload-btn {
  border: 0;
  background: var(--btn);
  color: #fff;
}

.primary-btn:hover,
.upload-btn:hover {
  background: var(--btn-hover);
}

.secondary-upload-btn {
  background: #1e2b3e;
  border: 1px solid #2a3c57;
}

.secondary-upload-btn:hover {
  background: #25354b;
}

.ghost-btn {
  background: transparent;
  border: 1px solid #2a3c57;
  color: var(--text);
}

.ghost-btn:hover {
  background: #182232;
}

.danger-btn {
  border-color: #7a2d38;
  color: #ffb6c0;
}

.danger-btn:hover {
  background: rgba(122, 45, 56, 0.24);
  border-color: #b64252;
}

.action-row,
.top-controls,
.viewer-actions,
.meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.intake-form .action-row {
  justify-content: center;
}

.card {
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 24, 35, 0.92), rgba(12, 20, 29, 0.98));
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  border-color: #2b4b74;
  transform: translateY(-1px);
}

.card.is-selected {
  border-color: #244b7b;
  box-shadow: inset 0 0 0 1px #244b7b;
}

.card.status-failed {
  border-color: #7a2d38;
}

.card.status-running {
  border-color: #7b6d24;
}

.card h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.card-line {
  line-height: 1.45;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.detail-item {
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 24, 35, 0.92), rgba(12, 20, 29, 0.98));
  line-height: 1.5;
}

.detail-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-item-error,
.analysis-item-error {
  border-color: #7a2d38;
  background: rgba(122, 45, 56, 0.16);
  color: #ffd6dc;
}

.viewer-frame {
  margin-top: 16px;
  min-height: 184px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 24, 35, 0.92), rgba(12, 20, 29, 0.98));
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}

.viewer-frame strong {
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.muted-copy {
  color: var(--muted);
  text-align: center;
}

.viewer-actions .primary-btn {
  min-width: 280px;
  font-weight: 700;
}

.viewer-actions .ghost-btn {
  min-width: 150px;
  font-weight: 700;
}

.viewer-actions {
  justify-content: center;
}

.rename-project-form {
  width: min(520px, 100%);
  margin: 16px auto 0;
  display: grid;
  gap: 8px;
  text-align: left;
}

.rename-project-form label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rename-project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.rename-project-row input {
  min-width: 0;
}

.delete-confirm-panel {
  width: min(520px, 100%);
  margin: 16px auto 0;
  padding: 14px;
  border: 1px solid #7a2d38;
  border-radius: var(--radius-md);
  background: rgba(122, 45, 56, 0.14);
  display: grid;
  gap: 12px;
  text-align: center;
}

.delete-confirm-text {
  color: #ffd6dc;
  line-height: 1.5;
}

.delete-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.danger-confirm-btn {
  background: #a93747;
}

.danger-confirm-btn:hover {
  background: #8e2d3b;
}

.analysis-output {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(15, 24, 35, 0.92), rgba(12, 20, 29, 0.98));
}

.analysis-output-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.analysis-status {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.analysis-list {
  display: grid;
  gap: 8px;
}

.analysis-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  font-size: 13px;
}

.summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.summary-item span {
  color: var(--muted);
}

.summary-item strong {
  color: var(--text);
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #d9ebff;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.analysis-item.link-btn {
  background: linear-gradient(180deg, #1a4d80, #143c66);
  border: 1px solid #2b6aa6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.analysis-item.link-btn:hover {
  background: linear-gradient(180deg, #225b95, #184774);
  border-color: #3b7cbb;
  transform: translateY(-1px);
}

.analysis-item.link-btn:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #184774, #143a61);
}

.analysis-item.link-btn:focus-visible {
  outline: 2px solid #7fb5f0;
  outline-offset: 2px;
}

.ai-review-btn.ai-review-critical {
  background: linear-gradient(180deg, #6b2430, #481923);
  border-color: #a43a4b;
  color: #ffe4e8;
}

.ai-review-btn.ai-review-warning {
  background: linear-gradient(180deg, #5d4618, #3d2e12);
  border-color: #9a772e;
  color: #fff2cc;
}

.ai-review-btn.ai-review-ok {
  background: linear-gradient(180deg, #1f5b42, #173f30);
  border-color: #338262;
  color: #ddfff1;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 10, 0.72);
}

.modal-panel {
  width: min(840px, 100%);
  max-height: min(86vh, 920px);
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: #0d1620;
  box-shadow: var(--shadow);
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

.email-log-modal {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 10, 0.72);
}

.email-log-card {
  width: min(760px, 100%);
  max-height: min(84vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: #0d1620;
  box-shadow: var(--shadow);
}

.email-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.email-log-title {
  font-size: 18px;
  font-weight: 800;
}

.email-log-close,
.email-log-toggle {
  border: 1px solid #30445d;
  border-radius: 10px;
  background: #162434;
  color: #e8eef8;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.email-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.email-log-filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-log-filter input {
  min-width: 150px;
  border: 1px solid var(--input-bd);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  padding: 8px 10px;
}

.email-log-status {
  padding: 12px 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.email-log-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px 20px;
  overflow: auto;
}

.email-log-entry {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
}

.email-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.email-log-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #16304d;
  color: #8ec3ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-log-pill[data-status="suppressed"] {
  background: #4d2916;
  color: #ffbf8e;
}

.email-log-meta,
.email-log-reason {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.email-log-view {
  margin-left: auto;
  border: 1px solid #30445d;
  border-radius: 8px;
  background: #162434;
  color: #e8eef8;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.email-log-body {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.email-log-frame {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.email-log-text {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: 12px/1.5 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.icon-close-btn {
  min-width: 88px;
}

.ai-review-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.ai-review-summary,
.ai-review-section,
.ai-review-finding {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}

.ai-review-summary {
  padding: 16px;
}

.ai-review-summary div,
.ai-review-finding div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ai-review-summary span,
.ai-review-finding span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-review-summary p,
.ai-review-finding p {
  margin: 10px 0 0;
  color: #d9e5f2;
}

.ai-review-summary small,
.ai-review-finding small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.ai-review-critical {
  border-color: #8d3442;
}

.ai-review-warning {
  border-color: #8f7030;
}

.ai-review-ok {
  border-color: #317453;
}

.ai-review-section {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.ai-review-section h3 {
  margin: 0;
  font-size: 15px;
}

.ai-review-section ul {
  margin: 0;
  padding-left: 20px;
  color: #d9e5f2;
}

.ai-review-finding {
  padding: 12px;
}

.takeoff-lab-hero {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.takeoff-summary-grid,
.takeoff-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.takeoff-summary-grid .summary-item,
.takeoff-detail-stats .summary-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}

.takeoff-summary-grid .summary-item strong,
.takeoff-detail-stats .summary-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-item-warning {
  grid-column: 1 / -1;
  border-color: #7b6d24 !important;
  background: rgba(123, 109, 36, 0.16) !important;
}

.takeoff-lab-grid {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.takeoff-projects-panel {
  position: sticky;
  top: 106px;
}

.takeoff-project-card.readiness-ready {
  border-color: #276246;
}

.takeoff-project-card.readiness-partial {
  border-color: #345f8c;
}

.takeoff-project-card.readiness-needs-review {
  border-color: #7b6d24;
}

.takeoff-count-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.takeoff-count-grid span {
  min-width: 0;
}

.takeoff-count-grid strong {
  color: var(--text);
}

.takeoff-detail-empty {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  text-align: center;
}

.takeoff-detail-content {
  display: grid;
  gap: 16px;
}

.takeoff-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.takeoff-file-group {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(15, 24, 35, 0.92), rgba(12, 20, 29, 0.98));
  overflow: hidden;
}

.takeoff-file-group h3 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.takeoff-file-group ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.takeoff-file-group li {
  min-width: 0;
  padding: 11px 14px;
  border-top: 1px solid rgba(34, 48, 66, 0.72);
}

.takeoff-file-group li:first-child {
  border-top: 0;
}

.takeoff-file-group li span,
.takeoff-file-group li small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.takeoff-file-group li span {
  color: var(--text);
  font-weight: 700;
}

.takeoff-file-group li small {
  margin-top: 3px;
  color: var(--muted);
}

.takeoff-empty-file {
  color: var(--muted);
}

.takeoff-evaluation-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(9, 15, 23, 0.48);
}

.takeoff-evaluation-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.takeoff-evaluation-head h3,
.takeoff-profile-card h4 {
  margin: 0;
  color: var(--text);
}

.compact-action {
  width: auto;
  min-width: 180px;
  padding: 11px 14px;
}

.takeoff-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
}

.takeoff-compare-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.takeoff-profile-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.takeoff-profile-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(34, 48, 66, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.takeoff-profile-row strong,
.takeoff-profile-row span,
.takeoff-profile-row small {
  display: block;
  min-width: 0;
}

.takeoff-profile-row strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.takeoff-profile-row span,
.takeoff-profile-row small,
.takeoff-muted {
  color: var(--muted);
}

.takeoff-profile-row small {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.takeoff-profile-metrics,
.takeoff-term-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.takeoff-profile-metrics span,
.takeoff-evidence-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(75, 104, 138, 0.72);
  border-radius: 999px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.takeoff-tag-sample {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.takeoff-tag-sample span,
.takeoff-tag-sample code {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.takeoff-tag-sample span {
  background: rgba(82, 143, 176, 0.16);
  color: var(--text);
}

.takeoff-tag-sample code {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.takeoff-snippet-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.takeoff-drawing-hints {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.takeoff-drawing-hints span {
  display: block;
  padding: 7px 9px;
  border: 1px solid rgba(75, 104, 138, 0.48);
  border-radius: 8px;
  background: rgba(82, 143, 176, 0.08);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.takeoff-drawing-hints strong {
  display: inline;
  margin-right: 7px;
  color: var(--text);
}

.takeoff-snippet-list blockquote {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid rgba(82, 143, 176, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.takeoff-snippet-list blockquote span {
  display: inline;
  margin-right: 6px;
  color: var(--text);
  font-weight: 800;
}

@media (max-width: 980px) {
  .simple-workspace,
  .simple-panels,
  .takeoff-lab-grid,
  .takeoff-file-grid,
  .takeoff-profile-grid,
  .takeoff-compare-grid {
    grid-template-columns: 1fr;
  }

  .filters-panel,
  .takeoff-projects-panel {
    position: static;
  }

  .takeoff-evaluation-head,
  .takeoff-profile-row {
    grid-template-columns: 1fr;
  }

  .takeoff-evaluation-head {
    display: grid;
  }

  .compact-action {
    width: 100%;
  }

  .takeoff-profile-metrics,
  .takeoff-term-list {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: static;
  }

  .user-menu,
  .session-panel {
    position: static;
    width: calc(100% - 24px);
    margin: 10px 12px 0;
    border-radius: 12px;
  }

  .header-top {
    position: static;
  }

  .modules-home-btn {
    position: static;
    transform: none;
    margin-right: 8px;
  }

  .site-header h1 {
    position: static;
    transform: none;
  }

  .check-grid {
    grid-template-columns: 1fr;
  }

  .module-tabs,
  .takeoff-summary-grid,
  .takeoff-detail-stats {
    grid-template-columns: 1fr;
  }

  .module-tabs {
    width: calc(100% - 24px);
    margin-top: 12px;
  }

  .template-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.header-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  text-align: center;
}

.header-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}

/* ---- Plan Review (revision diff) ---- */
.plan-review-module .pr-head { margin-bottom: 18px; }
.plan-review-module .pr-head h1 { margin: 0 0 6px; }
.pr-sub { margin: 0; color: var(--muted); font-size: 14px; max-width: 70ch; }
.pr-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 16px; background: var(--surface); border: 1px solid var(--panel-border);
  border-radius: var(--radius-md); margin-bottom: 12px;
}
.pr-field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; flex: 1 1 240px; }
.pr-field > span { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.pr-field select {
  padding: 9px 11px; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--input-bd); border-radius: var(--radius-md); font-size: 14px;
}
.pr-file input[type="file"] {
  padding: 8px 10px; background: var(--input-bg); color: var(--text);
  border: 1px dashed var(--input-bd); border-radius: var(--radius-md); font-size: 13px; cursor: pointer;
}
.pr-file input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 6px 12px; background: var(--chip); color: var(--text);
  border: 1px solid var(--chip-border); border-radius: 8px; cursor: pointer; font-weight: 600;
}
.pr-endpoint em { font-style: normal; color: var(--muted); font-weight: 600; font-size: 12px; }
.pr-arrow { align-self: center; color: var(--muted); font-size: 20px; padding-bottom: 6px; }
.pr-status { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; color: var(--muted); font-size: 12.5px; background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-md); text-align: center; }
.pr-status strong { color: #eef4fb; font-weight: 700; }
.pr-status.pr-status-degraded { color: #e3b341; background: rgba(227, 179, 65, 0.1); border-color: rgba(227, 179, 65, 0.42); }
.pr-status .pr-status-cost { color: #3fb950; font-weight: 700; }
.pr-hint { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.pr-vision-note { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 8px 12px; }
.pr-loading, .pr-empty { color: var(--muted); font-style: italic; margin: 8px 0; }
.pr-error { color: #f0a0a0; background: rgba(229, 83, 75, 0.12); border: 1px solid rgba(229, 83, 75, 0.4); padding: 12px 14px; border-radius: var(--radius-md); }

.pr-result-head { margin-bottom: 14px; }
.pr-endpoints { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 700; }
.pr-endpoint { padding: 5px 12px; border-radius: 999px; background: var(--chip); border: 1px solid var(--chip-border); font-size: 13px; }
.pr-endpoint-next { border-color: #2f7bd6; }
.pr-headline { margin: 10px 0 0; font-size: 15px; color: var(--text); }

.pr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 20px; }
.pr-chip { display: flex; flex-direction: column; gap: 2px; min-width: 92px; padding: 10px 14px; background: var(--chip); border: 1px solid var(--chip-border); border-radius: var(--radius-md); }
.pr-chip span { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pr-chip strong { font-size: 22px; line-height: 1; }
.pr-chip-added { border-color: rgba(63, 185, 80, 0.6); }
.pr-chip-added strong { color: #56d364; }
.pr-chip-removed { border-color: rgba(229, 83, 75, 0.6); }
.pr-chip-removed strong { color: #f07178; }
.pr-chip-changed { border-color: rgba(227, 179, 65, 0.6); }
.pr-chip-changed strong { color: #e3b341; }
.pr-chip-critical { border-color: rgba(229, 83, 75, 0.8); background: rgba(229, 83, 75, 0.12); }
.pr-chip-critical strong { color: #f07178; }

.pr-warn { margin: 0 0 16px; padding: 10px 14px; background: rgba(227, 179, 65, 0.1); border: 1px solid rgba(227, 179, 65, 0.45); border-radius: var(--radius-md); }
.pr-warn p { margin: 2px 0; font-size: 13px; color: #e8cd82; }

.pr-section { margin-bottom: 22px; }
.pr-section h2 { font-size: 15px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.pr-section-added h2 { border-color: rgba(63, 185, 80, 0.5); }
.pr-section-removed h2 { border-color: rgba(229, 83, 75, 0.5); }
.pr-section-changed h2 { border-color: rgba(227, 179, 65, 0.5); }

/* ── WHAT THIS RUN COULD NOT MEASURE ──────────────────────────────────────────
   Deliberately louder than the findings below it. A run that could not read the
   revision numbers has no right to a quiet page. */
.pr-degrade { margin: 0 0 18px; }
.pr-degrade-row { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 8px;
  background: rgba(229, 83, 75, 0.12); border: 1px solid rgba(229, 83, 75, 0.6); }
.pr-degrade-high { background: rgba(227, 179, 65, 0.1); border-color: rgba(227, 179, 65, 0.55); }
.pr-degrade-badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 999px; background: #e5534b; color: #fff; }
.pr-degrade-high .pr-degrade-badge { background: #e3b341; color: #1c1503; }
.pr-degrade-msg { margin: 8px 0 4px; font-size: 13px; color: var(--text); line-height: 1.5; }
.pr-degrade-act { margin: 0; font-size: 12.5px; color: var(--muted); }

.pr-cov-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.65; color: var(--text); }
.pr-cov-withheld { color: #e3b341; }

.pr-lane-off { padding: 12px 16px; border-radius: var(--radius-md);
  background: rgba(227, 179, 65, 0.1); border: 1px dashed rgba(227, 179, 65, 0.65); }
.pr-lane-off p { margin: 3px 0; font-size: 13px; }
.pr-lane-why { color: var(--muted); font-size: 12px; }
.pr-lane-msg { margin: 0 0 4px; font-size: 13.5px; color: var(--text); }
.pr-lane-act { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }

.pr-risk { border: 1px solid rgba(229, 83, 75, 0.6); background: rgba(229, 83, 75, 0.09);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 12px; }
.pr-risk-head { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #ff9d95; }
.pr-risk-row { padding: 6px 0; border-top: 1px solid rgba(229, 83, 75, 0.25); }
.pr-risk-sheet { font-weight: 800; font-size: 13px; margin-right: 10px; }
.pr-risk-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #ff9d95; }
.pr-risk-detail { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.pr-ov-sheets { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pr-ov-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 7px 12px; border-bottom: 1px solid rgba(34, 48, 66, 0.6); font-size: 12.5px; }
.pr-ov-row:last-child { border-bottom: none; }
.pr-ov-sheet { font-weight: 800; min-width: 74px; }
.pr-ov-count { color: var(--text); }
.pr-ov-pct { color: var(--muted); }
.pr-ov-link { margin-left: auto; font-weight: 700; }
.pr-ov-nolink { margin-left: auto; color: var(--muted); }
.pr-ov-cost { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.pr-notpair { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pr-notpair summary { cursor: pointer; }
.pr-notpair-row { margin: 4px 0 0 14px; }

/* ---- Plan Review: the ranked queue (tiers) and the revision rank -----------
   Noise is never dropped, only grouped and ranked below scope items. The group
   SIZE lives on the collapsed summary line so a reader can see what was set
   aside without opening it — collapsed must not read as absent. Rank 1 (no
   revision table readable) is styled as a WARNING, never as the quiet grey of
   rank 0, because "unreadable" and "identical" are opposite facts.            */
.pr-tier-counts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--panel-border); border-radius: var(--radius-md); }
.pr-tier-num { display: flex; flex-direction: column; gap: 2px; min-width: 84px; }
.pr-tier-num span { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pr-tier-num strong { font-size: 24px; line-height: 1; color: var(--text); }
.pr-tier-eq { color: var(--muted); font-size: 20px; }
.pr-tier-eqnote { margin: 0; flex: 1 1 280px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.pr-tier-eqnote strong { color: #56d364; }

.pr-tier-top { border: 1px solid rgba(229, 83, 75, 0.5); background: rgba(229, 83, 75, 0.06);
  border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 12px; }
.pr-tier-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: 14px; font-weight: 800; text-transform: capitalize; }
.pr-tier-rank { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--chip); border: 1px solid var(--chip-border); color: var(--muted); }
.pr-tier-size { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none; }
.pr-tier-meaning { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.pr-tier-group { margin-bottom: 8px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--line); }
.pr-tier-group > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pr-tier-group > summary strong { font-weight: 800; color: var(--text); }
.pr-tier-group[open] > summary { margin-bottom: 8px; }
.pr-tier-unknown { border-color: rgba(227, 179, 65, 0.6); background: rgba(227, 179, 65, 0.08); }
.pr-tier-unknown > summary strong { color: #e8cd82; }

.pr-tier-row { padding: 7px 0; border-top: 1px solid rgba(34, 48, 66, 0.6); font-size: 12.5px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pr-tier-sheet { font-weight: 800; min-width: 66px; }
.pr-tier-count { color: var(--text); }
.pr-tier-px, .pr-tier-box { color: var(--muted); font-size: 11.5px; }
.pr-tier-why { flex: 1 1 100%; margin: 2px 0 0; color: var(--muted); line-height: 1.5; }
.pr-tier-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.pr-tier-note-missing { color: #e3b341; }

.pr-rev-intro { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.pr-rev-intro strong { color: #e8cd82; }
.pr-rev-group { margin-bottom: 8px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--line); }
.pr-rev-group > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pr-rev-group[open] > summary { margin-bottom: 8px; }
.pr-rev-rank { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--chip); border: 1px solid var(--chip-border); color: var(--muted); }
.pr-rev-scope { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.pr-rev-say { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.pr-rev-sheets { display: flex; flex-wrap: wrap; gap: 5px; }
.pr-rev-sheet { font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--chip-border); color: var(--muted); }
.pr-rev-inscope { color: var(--text); font-weight: 700; }
.pr-rev-hot { border-color: rgba(229, 83, 75, 0.55); background: rgba(229, 83, 75, 0.07); }
.pr-rev-warn { border-color: rgba(227, 179, 65, 0.55); background: rgba(227, 179, 65, 0.07); }
/* UNREADABLE, NOT CLEAN. Styled loud on purpose: this is the rank a reader is
   most likely to mistake for rank 0, and the mistake absolves a sheet nobody
   measured. */
.pr-rev-unread { border-color: rgba(227, 179, 65, 0.75); background: rgba(227, 179, 65, 0.11); }
.pr-rev-unread > summary strong { color: #e8cd82; }
.pr-rev-cool { border-color: var(--line); }

.pr-unver-row { padding: 7px 12px; border-bottom: 1px solid rgba(34, 48, 66, 0.6); font-size: 12.5px; }
.pr-unver-lane { font-weight: 700; margin-right: 10px; color: var(--muted); }
.pr-unver-key { font-weight: 800; }
.pr-unver-reason { margin: 3px 0 0; color: #e3b341; }
.pr-unver-notrun { margin: 0 0 10px; font-size: 12.5px; color: #e3b341; }

.pr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pr-table th { text-align: left; color: var(--muted); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--line); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.pr-table td { padding: 7px 10px; border-bottom: 1px solid rgba(34, 48, 66, 0.6); }
.pr-table tbody tr:nth-child(even) { background: rgba(15, 24, 35, 0.5); }
.pr-open { font-weight: 700; color: var(--text); }

.pr-changed { background: var(--surface); border: 1px solid var(--panel-border); border-left: 3px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; }
.pr-changed.pr-sev-critical { border-left-color: #f07178; }
.pr-changed.pr-sev-info { border-left-color: #e3b341; }
.pr-changed > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pr-sev-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; }
.pr-sev-critical .pr-sev-badge { background: rgba(229, 83, 75, 0.18); color: #f07178; }
.pr-sev-info .pr-sev-badge { background: rgba(227, 179, 65, 0.16); color: #e3b341; }
.pr-deltas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-delta { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto 1fr; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.pr-delta-field { color: var(--muted); font-weight: 600; }
.pr-from { color: #f0a0a0; text-align: right; }
.pr-to { color: #7fd393; }
.pr-arrow-sm { color: var(--muted); }
.pr-delta-info .pr-from { color: #d9c07e; }
@media (max-width: 640px) { .pr-delta { grid-template-columns: 1fr; } .pr-from, .pr-to { text-align: left; } }

/* Added/removed diff items now render as gold-standard cards (discrepancy + evidence + AI action), not a bare table. */
.pr-changed.pr-item-added { border-left-color: #56d364; }
.pr-changed.pr-item-removed { border-left-color: #f07178; }
.pr-item-ev { margin: 0; font-size: 13px; color: var(--muted); }
.pr-badge-added { background: rgba(63, 185, 80, 0.18); color: #56d364; }
.pr-badge-removed { background: rgba(229, 83, 75, 0.18); color: #f07178; }
.pr-badge-changed { background: rgba(227, 179, 65, 0.16); color: #e3b341; }

/* AI diff-item verdict (real scope change vs extraction artifact) — the estimator callout on each item. */
.pr-ai { margin-top: 10px; padding: 9px 11px; border-radius: var(--radius-md); background: rgba(15, 24, 35, 0.6); border: 1px solid var(--line); border-left-width: 3px; }
.pr-ai-real { border-left-color: #56d364; }
.pr-ai-artifact { border-left-color: #e3b341; }
.pr-ai-uncertain { border-left-color: #7d8ea1; }
.pr-ai-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; text-transform: uppercase; }
.pr-ai-badge-real { background: rgba(63, 185, 80, 0.18); color: #56d364; }
.pr-ai-badge-artifact { background: rgba(227, 179, 65, 0.18); color: #e3b341; }
.pr-ai-badge-uncertain { background: rgba(125, 142, 161, 0.2); color: #a6b7ca; }
.pr-ai-reason { margin: 0; font-size: 13px; color: var(--text); line-height: 1.5; }
.pr-ai-action { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.pr-ai-action strong { color: #a6b7ca; }

/* ============================================================
   Takeoff module — sibling of Plan Review
   ============================================================ */
.to-head h1 { text-align: center; margin: 0 0 6px; }
.to-controls { background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; }
.to-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.to-field { display: flex; flex-direction: column; gap: 6px; min-width: 200px; flex: 1 1 200px; }
/* the hidden attribute must actually hide: display:flex above outranks the UA
   [hidden] rule. Without this the Addendum/rebid label field — which app.js
   correctly sets hidden unless the run is a version OF an existing project —
   rendered on the plain "Run a new takeoff" form, inviting a version label on
   a project that does not exist yet (Tyler, 2026-08-19). Same class of bug as
   .sc-grid[hidden] below. .to-file carries the same display:flex and sits in
   the same row, so it is guarded here rather than after it bites. */
.to-field[hidden], .to-file[hidden] { display: none; }
.to-field > span { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.to-field > span em { text-transform: none; letter-spacing: 0; font-style: normal; color: #7d8ea1; font-weight: 500; }
.to-field input { padding: 10px 12px; background: var(--input-bg); border: 1px solid var(--input-bd); border-radius: var(--radius-md); color: var(--text); font-size: 14px; }
.to-field input:focus { outline: none; border-color: var(--input-halo); box-shadow: 0 0 0 3px rgba(59, 116, 198, 0.25); }
.to-run-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 14px; }
.to-file { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; }
.to-file > span { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.to-file input { color: var(--muted); font-size: 13px; }
/* MULTI-PART PLAN SETS (Tyler 2026-08-03): a job often arrives as several PDFs
   — a base set plus a bulletin, or architectural plus interior-design drawings.
   The zone is drawn as a dashed target so it READS as droppable before anyone
   tries it; the wording stays short because the box itself carries the message. */
.to-drop { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 18px 16px; border: 2px dashed var(--line, #2b3a4a);
  border-radius: 10px; background: rgba(255, 255, 255, .015); transition: border-color .15s, background .15s; }
.to-drop input[type="file"] { color: var(--muted); font-size: 13px; }
.to-drop-hint { font-size: 12px; color: var(--muted); opacity: .85; }
.to-drop.dragover { border-color: var(--accent, #35d1c6); background: rgba(53, 209, 198, .08); }
.to-drop.dragover .to-drop-hint { color: var(--accent, #35d1c6); opacity: 1; }
.to-file-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 3px; align-items: center; width: 100%; }
.to-file-list li { font-size: 12px; color: var(--muted); display: flex;
  gap: 8px; align-items: baseline; justify-content: center; }
.to-file-list li .ix { font-weight: 700; opacity: .7; }
.to-file-list li .sz { opacity: .7; }

.to-hint { color: var(--muted); min-height: 20px; margin: 4px 2px 14px; font-size: 13px; }
.to-loading { display: flex; align-items: center; gap: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 18px; line-height: 1.5; }
.to-spin { width: 18px; height: 18px; border: 2px solid var(--chip-border); border-top-color: var(--btn); border-radius: 50%; animation: to-spin 0.8s linear infinite; flex: 0 0 auto; }
@keyframes to-spin { to { transform: rotate(360deg); } }
.to-error { color: #f07178; background: rgba(229, 83, 75, 0.12); border: 1px solid rgba(229, 83, 75, 0.5); border-radius: var(--radius-md); padding: 14px; }

.to-result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin: 6px 0 18px; }
.to-project { margin: 0; font-size: 20px; }
.to-meta { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.to-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.to-badge-good { background: rgba(63, 185, 80, 0.15); color: #56d364; border: 1px solid rgba(63, 185, 80, 0.5); }
.to-badge-bad { background: rgba(229, 83, 75, 0.15); color: #f07178; border: 1px solid rgba(229, 83, 75, 0.55); }

.to-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.to-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--chip); border: 1px solid var(--chip-border); border-radius: var(--radius-md); }
.to-card-k { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.to-card-v { font-size: 24px; line-height: 1; }
.to-card-accent { border-color: rgba(59, 116, 198, 0.6); }
.to-card-accent .to-card-v { color: #6bb2ff; }
.to-card-learn { border-color: rgba(227, 179, 65, 0.6); }
.to-card-learn .to-card-v { color: #e3b341; }
/* A ZERO IS NOT A RESULT. A run-summary card whose number is 0 is tinted like a
   warning and the run always prints the reason underneath it, so "nothing found"
   can never read the same as "this stage did not run". */
.to-card-bad { border-color: rgba(229, 83, 75, 0.55); }
.to-card-bad .to-card-v { color: #f07178; }

/* Finished takeoff run: the project it created, above the classification panel. */
.to-ok { background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 18px; }
.to-ok h3 { margin: 0 0 2px; }
.to-ok .to-hint { margin-top: 0; }
.to-stage-body { display: flex; flex-direction: column; gap: 4px; }
.to-stage-sub { color: var(--muted); font-size: 13px; line-height: 1.5; }

.to-flags { margin: 6px 0 14px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.to-h3 { font-size: 15px; margin: 26px 0 12px; border-left: 3px solid var(--btn); padding-left: 10px; }
.to-h3 em, .to-h4 em { color: var(--muted); font-style: normal; font-weight: 500; font-size: 13px; }
.to-h4 { font-size: 14px; margin: 20px 0 10px; color: var(--muted); }
.to-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 10px 2px; }
.to-empty { color: var(--muted); font-style: italic; padding: 10px; }

.to-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.to-fig { margin: 0; }
.to-fig img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.to-fig figcaption { color: var(--muted); font-size: 12px; margin-top: 6px; }

.to-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-md); }
.to-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; min-width: 640px; }
.to-table th, .to-table td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.to-table th { background: #14202e; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.to-table .to-num { text-align: right; font-variant-numeric: tabular-nums; }
.to-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.to-sm { font-size: 11px; }
.to-desc { color: var(--muted); max-width: 220px; }
.to-erp { min-width: 900px; }
.to-open-sel { background: var(--input-bg); border: 1px solid var(--input-bd); border-radius: 8px; color: var(--text); font-size: 12px; padding: 5px 6px; max-width: 190px; }
.to-price-in { width: 82px; background: var(--input-bg); border: 1px solid var(--input-bd); border-radius: 8px; color: var(--text); font-size: 12px; padding: 5px 6px; text-align: right; }
.to-open-sel:focus, .to-price-in:focus { outline: none; border-color: var(--input-halo); }
.to-teach { padding: 5px 12px; font-size: 12px; }
.to-row-learned { background: rgba(63, 185, 80, 0.1); }
.to-row-error { background: rgba(229, 83, 75, 0.12); }
.to-learn-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #e3b341; background: rgba(227, 179, 65, 0.15); border: 1px solid rgba(227, 179, 65, 0.45); border-radius: 10px; }

.to-pill { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 11px; font-weight: 700; white-space: nowrap; }
.to-pill-computed { background: rgba(63, 185, 80, 0.16); color: #56d364; }
.to-pill-needs-count { background: rgba(227, 179, 65, 0.16); color: #e3b341; }
.to-pill-needs-rule { background: rgba(229, 83, 75, 0.16); color: #f07178; }

.to-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

.to-learning { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.to-projs { display: flex; flex-direction: column; gap: 10px; }
.to-proj { background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 12px 14px; }
.to-proj-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.to-proj-name { font-weight: 700; }
.to-trend { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.to-trend-down .to-trend { color: #56d364; }
.to-trend-up .to-trend { color: #f07178; }
.to-spark { display: flex; align-items: flex-end; gap: 4px; height: 42px; }
.to-spark-bar { flex: 0 0 14px; min-height: 5px; background: linear-gradient(180deg, var(--btn), #2a4c78); border-radius: 3px 3px 0 0; }
.to-trend-down .to-spark-bar:last-child { background: linear-gradient(180deg, #3fb950, #245e30); }

@media (max-width: 640px) {
  .to-result-head { flex-direction: column; align-items: flex-start; }
  .to-fields, .to-run-row { flex-direction: column; }
  .to-field, .to-file { min-width: 0; }
}

/* Takeoff — tiered-scope correction controls + scoreboard badges */
.to-teach-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.to-scope-sel { background: var(--input-bg); border: 1px solid var(--input-bd); border-radius: 8px; color: var(--text); font-size: 11px; padding: 4px 5px; max-width: 116px; }
.to-scope-sel:focus { outline: none; border-color: var(--input-halo); }
.to-tier { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.to-tier-global { color: #6bb2ff; background: rgba(59, 116, 198, 0.16); border: 1px solid rgba(59, 116, 198, 0.5); }
.to-tier-architect { color: #e3b341; background: rgba(227, 179, 65, 0.15); border: 1px solid rgba(227, 179, 65, 0.45); }
.to-tier-gc { color: #56d364; background: rgba(63, 185, 80, 0.15); border: 1px solid rgba(63, 185, 80, 0.45); }

/* Takeoff refocus — line-item statuses + downstream-pricing banner */
.to-pill-counted { background: rgba(63, 185, 80, 0.16); color: #56d364; }
.to-pill-needs-type { background: rgba(229, 83, 75, 0.16); color: #f07178; }
.to-pill-excluded { background: rgba(155, 109, 220, 0.18); color: #c99bf5; }
.to-pricebanner { background: rgba(59, 116, 198, 0.12); border: 1px solid rgba(59, 116, 198, 0.5); border-radius: var(--radius-md); padding: 12px 16px; margin: 14px 0; color: #cfe3ff; font-size: 13px; line-height: 1.5; }
.to-pricebanner strong { color: #6bb2ff; }

/* ============================================================
   Install module (Phase I0, Test lane) — tablet-first field UI.
   Pins inverse-scale with the viewer zoom via --z on .ins-canvas.
   ============================================================ */
.ins-shell { position: relative; }
.ins-head { text-align: center; margin: 6px 0 14px; }
.ins-head h1 { margin: 0 0 6px; }
.ins-sub { color: var(--muted); max-width: 860px; margin: 0 auto; line-height: 1.5; }

.ins-import-panel { padding: 16px 18px; margin-bottom: 16px; }
.ins-import-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ins-field, .ins-file { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; }
.ins-field span, .ins-file span { font-size: 12px; color: var(--muted); }
.ins-field em, .ins-file em { font-style: normal; opacity: .7; }
.ins-field input[type="text"] {
  background: var(--input-bg); border: 1px solid var(--input-bd); color: var(--text);
  border-radius: 10px; padding: 11px 12px; font-size: 14px;
}
.ins-file input[type="file"] { color: var(--muted); font-size: 13px; padding: 8px 0; }
.ins-import-fields .primary-btn { flex: 0 0 auto; padding: 12px 22px; }
.ins-import-meta { color: var(--muted); font-size: 12px; margin: 10px 2px 0; }

.ins-project-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ins-proj-card {
  text-align: left; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg); padding: 16px; color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; gap: 10px; font: inherit;
}
.ins-proj-card:hover { border-color: var(--input-halo); }
.ins-proj-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ins-proj-name { font-weight: 800; font-size: 16px; }
.ins-proj-meta { color: var(--muted); font-size: 12.5px; }
.ins-err-text { color: #f0a4ad; }
.ins-empty { color: var(--muted); padding: 26px 12px; text-align: center; grid-column: 1 / -1; }

.ins-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--chip);
  border: 1px solid var(--chip-border); border-radius: 999px; padding: 4px 11px;
  font-size: 12.5px; color: var(--text); white-space: nowrap;
}
.ins-chip-strong { font-weight: 800; font-size: 14px; border-color: var(--input-halo); }
.ins-chip-warn { border-color: #b98a2e; color: #f5c96b; cursor: pointer; font: inherit; font-size: 12.5px; }
.ins-chip-busy { border-color: #2f6fed; color: #9db9f2; }
.ins-chip-err { border-color: #a94454; color: #f0a4ad; }
.ins-chip-status { background: transparent; font-weight: 700; }

.ins-bar { height: 8px; background: #14202e; border-radius: 999px; overflow: hidden; }
.ins-bar-lg { height: 12px; }
.ins-bar-fill { height: 100%; background: linear-gradient(90deg, #1d6ec8, #22b34d); border-radius: 999px; transition: width .25s ease; }

.ins-btn {
  background: var(--chip); border: 1px solid var(--chip-border); color: var(--text);
  border-radius: 10px; padding: 10px 16px; font-size: 14px; cursor: pointer; font: inherit;
}
.ins-btn:hover { border-color: var(--input-halo); }
.ins-btn-sm { padding: 7px 12px; font-size: 13px; }
.ins-btn-accent { border-color: #b98a2e; color: #f5c96b; margin-top: 10px; }

.ins-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ins-topbar-title { flex: 1 1 auto; min-width: 200px; }
.ins-proj-title { font-weight: 800; font-size: 17px; }
.ins-proj-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.ins-topbar-actions { display: flex; gap: 8px; }

.ins-sheetbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; }
.ins-sheet-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 0 auto;
  background: var(--chip); border: 1px solid var(--chip-border); color: var(--text);
  border-radius: 12px; padding: 8px 14px; cursor: pointer; font: inherit; min-width: 120px;
}
.ins-sheet-tab.active { border-color: var(--input-halo); background: #16253a; }
.ins-sheet-tab.ins-sheet-noimg { opacity: .55; }
.ins-sheet-no { font-weight: 800; font-size: 14px; }
.ins-sheet-title { color: var(--muted); font-size: 11.5px; }
.ins-sheet-count { color: var(--muted); font-size: 11px; }

.ins-filterbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.ins-filter {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: var(--chip); border: 1px solid var(--chip-border); color: var(--muted);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer; font: inherit;
}
.ins-filter.active { color: var(--text); border-color: var(--input-halo); background: #16253a; }
.ins-filter b { color: var(--text); }
.ins-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ins-dot-lg { width: 14px; height: 14px; }

.ins-stage {
  position: relative; height: calc(100vh - 320px); min-height: 420px;
  background: #0a1119; border: 1px solid var(--panel-border); border-radius: var(--radius-lg);
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
}
.ins-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --z: 1; }
.ins-canvas img { display: block; width: 100%; height: 100%; pointer-events: none; background: #fff; }
.ins-pins { position: absolute; inset: 0; }

.ins-pin {
  position: absolute; transform: translate(-50%, -100%) scale(clamp(0.125, calc(1 / var(--z)), 14));
  transform-origin: 50% 100%; cursor: pointer; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.ins-pin-head {
  min-width: 44px; padding: 7px 10px; border-radius: 999px; color: #fff;
  font: 800 14px/1 Arial, Helvetica, sans-serif; letter-spacing: .02em;
  border: 2px solid rgba(255,255,255,.92); white-space: nowrap; text-align: center;
}
.ins-pin-tail {
  width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid rgba(255,255,255,.92); margin-top: -1px;
}
.ins-pin-unsure .ins-pin-head { border-style: dashed; opacity: .9; }
.ins-pin-blocked .ins-pin-head { box-shadow: 0 0 0 3px #f29e12; }
.ins-pin.active .ins-pin-head { box-shadow: 0 0 0 4px #3df0fa; }

.ins-stage-msg {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: 15px; padding: 30px; background: rgba(9, 16, 24, .72); z-index: 4;
}
.ins-zoomctl { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.ins-zoomctl button {
  width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--chip-border);
  background: rgba(18, 27, 37, .92); color: var(--text); font-size: 19px; font-weight: 800; cursor: pointer;
}
.ins-zoomctl button:hover { border-color: var(--input-halo); }
.ins-pin-banner {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 12px; background: #2a230f; border: 1px solid #b98a2e;
  color: #f5c96b; border-radius: 12px; padding: 10px 16px; font-size: 14px; white-space: nowrap;
}

/* --- opening card + drawers (right sheet on tablet, bottom sheet on phone) --- */
.ins-card, .ins-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 96vw); z-index: 10040;
  background: var(--panel); border-left: 1px solid var(--panel-border);
  box-shadow: -18px 0 40px rgba(0,0,0,.45); display: flex; flex-direction: column;
}
body.test-banner-active .ins-card, body.test-banner-active .ins-drawer { top: 43px; }
.ins-card-top, .ins-drawer-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.ins-card-top-label, .ins-drawer-title { font-size: 12px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; font-weight: 800; }
.ins-card-body, .ins-drawer-body { overflow-y: auto; padding: 14px 16px 40px; flex: 1 1 auto; }
.ins-drawer-top input[type="search"] {
  flex: 1 1 auto; background: var(--input-bg); border: 1px solid var(--input-bd); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 14px;
}

.ins-card-head { margin-bottom: 10px; }
.ins-card-mark-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ins-card-mark { font-size: 24px; font-weight: 800; }
.ins-card-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ins-fact { color: var(--muted); font-size: 13px; }
.ins-fact b { color: var(--text); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-right: 2px; }
.ins-card-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ins-flag-chip {
  background: #241d0d; border: 1px solid #b98a2e55; color: #d8b35e; border-radius: 999px;
  padding: 3px 10px; font-size: 11.5px;
}
.ins-card-prog { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.ins-card-prog .ins-bar { flex: 1 1 auto; }
.ins-card-prog-label { color: var(--muted); font-size: 12.5px; flex: 0 0 auto; }

.ins-phase-label {
  margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #7ea1c4;
}
.ins-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px;
  border-bottom: 1px solid var(--line); position: relative;
}
.ins-check {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  border: 2px solid #3a4c62; background: #101a26; color: #fff; font-size: 21px; font-weight: 800;
  cursor: pointer; display: grid; place-items: center;
}
.ins-check:disabled { opacity: .4; cursor: not-allowed; }
.ins-item-done .ins-check { background: #22b34d; border-color: #22b34d; }
.ins-item-na .ins-check { background: #3a4c62; border-color: #3a4c62; }
.ins-item-blocked .ins-check { background: #8a5a12; border-color: #f29e12; }
.ins-item-main { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.ins-item-label { font-size: 14.5px; line-height: 1.4; }
.ins-item-done .ins-item-label { color: var(--muted); }
.ins-item-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.ins-item-verify { background: #0f1e16; border-radius: 10px; border-bottom: 0; margin-top: 8px; }
.ins-item-verify .ins-item-label { font-weight: 800; }
.ins-item-more {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--chip-border);
  background: transparent; color: var(--muted); font-size: 18px; cursor: pointer;
}
.ins-item-menu {
  position: absolute; right: 8px; top: 52px; z-index: 8; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--panel-border); border-radius: 12px; padding: 8px;
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
.ins-labor-note { color: #8fa2b8; font-size: 12px; margin-top: 18px; line-height: 1.5; font-style: italic; }

/* Takeoff-sourced opening card: read-only chip + the add/remove checklist block
   (the only install edit; content is deferred to Project Manager). */
.ins-chip-ro { border-color: #3a5069; color: #9db9d8; }
.ins-chip-muted { border-color: var(--line); color: #8fa2b8; font-size: 11.5px; }
.ins-checklists { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.ins-checklists-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ins-checklists-title { font-weight: 800; font-size: 14px; color: var(--text); }
.ins-checklists-head .ins-btn-accent { margin-top: 0; }
.ins-checklists-empty { color: #8fa2b8; font-size: 12.5px; margin-top: 10px; line-height: 1.5; }
.ins-checklist-row {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip);
}
.ins-checklist-name { flex: 1 1 auto; font-weight: 700; font-size: 13.5px; color: var(--text); }
.ins-checklist-remove { flex: 0 0 auto; }

.ins-list-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--text);
  padding: 12px 6px; cursor: pointer; font: inherit;
}
.ins-list-row:hover { background: #101c2b; }
.ins-list-mid { flex: 1 1 auto; min-width: 0; }
.ins-list-mark { font-weight: 800; font-size: 15px; }
.ins-list-sub { color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-list-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ins-list-pct { color: var(--muted); font-size: 13px; font-weight: 700; min-width: 40px; text-align: right; }

.ins-prog-project { margin-bottom: 6px; }
.ins-prog-title { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.ins-prog-big { font-size: 40px; font-weight: 800; margin-bottom: 6px; }
.ins-prog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ins-prog-floor { margin-bottom: 12px; }
.ins-prog-floor-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.ins-prog-floor-name { font-weight: 700; font-size: 13.5px; }
.ins-prog-floor-pct { color: var(--muted); font-size: 12.5px; }

.ins-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 10060;
  background: #16253a; border: 1px solid var(--input-halo); color: var(--text);
  border-radius: 12px; padding: 12px 20px; font-size: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.5);
  max-width: min(560px, 92vw); text-align: center;
}
.ins-toast-err { border-color: #a94454; background: #2a1418; }

@media (max-width: 900px) {
  .ins-stage { height: calc(100vh - 360px); min-height: 340px; }
  .ins-card, .ins-drawer {
    top: auto; left: 0; right: 0; width: 100%; height: 72vh;
    border-left: 0; border-top: 1px solid var(--panel-border); border-radius: 18px 18px 0 0;
  }
  body.test-banner-active .ins-card, body.test-banner-active .ins-drawer { top: auto; }
  .ins-topbar-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   Takeoff project browser — projects -> sheets -> embedded viewer
   ============================================================ */
.tk-browser-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tk-browser-head h1 { text-align: left; margin: 0; }
/* "Run a new takeoff" now lives BELOW the "Active" divider line, right-aligned, so
   the "Active" label stays at the top and the line never crosses it (Tyler 2026-07-21). */
.tk-newrun-inline { display: block; width: fit-content; margin: 0 0 14px auto; }
.tk-search { display: block; width: min(420px, 100%); margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel, rgba(255,255,255,0.04)); color: var(--text, inherit); font: inherit; }
.tk-search-hide { display: none !important; }
.tk-search:focus { outline: 2px solid var(--accent, #4c8dff); outline-offset: 1px; }
.tk-tile-arch { font-size: 12px; color: var(--muted); margin: -4px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-newrun-btn { flex: 0 0 auto; }
.tk-hint { color: var(--muted); font-size: 13px; margin: 2px 2px 20px; }
.tk-group { margin-bottom: 26px; }
.tk-group-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; min-height: 72px; }
.tk-sheet-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tk-tile {
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; text-align: left; color: var(--text);
  position: relative; transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.tk-tile:hover { border-color: var(--input-halo); transform: translateY(-1px); box-shadow: var(--shadow); }
.tk-thumb {
  aspect-ratio: 4 / 3; background: #0a1119; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-bottom: 1px solid var(--panel-border);
  /* the "no preview" badge anchors inside this box (Tyler 2026-09-08) */
  position: relative;
}
.tk-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #fff; }
.tk-thumb-empty { color: var(--muted); }
.tk-thumb-ph { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tk-tile-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tk-tile-name { font-weight: 800; font-size: 15px; line-height: 1.25; word-break: break-word; }
.tk-tile-meta { color: var(--muted); font-size: 12px; }
/* footer row: "N sheets" on the left, drag-grip + Archive/Rename on the right
   (moved off the thumbnail, Tyler 2026-07-13). Applies to every project tile. */
.tk-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.tk-tile-actions { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.12s ease; }
.tk-tile:hover .tk-tile-actions, .tk-tile:focus-within .tk-tile-actions { opacity: 1; }
.tk-tile-actions .ghost-btn { padding: 4px 10px; font-size: 11px; }
.tk-proj-tile { cursor: grab; }
.tk-proj-tile:active { cursor: grabbing; }
.tk-grip { color: var(--muted); font-size: 15px; line-height: 1; letter-spacing: -3px; cursor: grab; pointer-events: none; }
.tk-tile.tk-dragging { opacity: 0.45; border-color: var(--input-halo); }
.tk-grid.tk-drop-active { outline: 2px dashed var(--input-halo); outline-offset: 4px; border-radius: var(--radius-md); background: rgba(59, 116, 198, 0.06); }
.tk-empty {
  color: var(--muted); font-style: italic; padding: 22px 12px; text-align: center; grid-column: 1 / -1;
  background: var(--surface); border: 1px dashed var(--panel-border); border-radius: var(--radius-md);
}
.tk-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tk-back { flex: 0 0 auto; }
.tk-topbar-title { min-width: 0; }
.tk-topbar-title h1 { margin: 0; }
.tk-sheets-title { font-size: 20px; margin: 0; text-align: left; word-break: break-word; }
.tk-sheets-meta { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }
/* project (sheets) view: center the title/meta over the grid (Tyler 2026-07-21) */
#takeoffSheets .tk-topbar-title { flex: 1 1 auto; text-align: center; }
#takeoffSheets .tk-sheets-title, #takeoffSheets .tk-sheets-meta { text-align: center; }
.tk-viewer-wrap {
  border: 1px solid var(--panel-border); border-radius: var(--radius-lg); overflow: hidden; background: #0a1119;
  height: calc(100vh - 240px); min-height: 560px;
}
body.test-banner-active .tk-viewer-wrap { height: calc(100vh - 280px); }
.tk-viewer-frame { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 700px) {
  .tk-viewer-wrap { height: calc(100vh - 300px); min-height: 420px; }
}

/* ============================================================
   FULL-BLEED takeoff sheet viewer (Task 2, Tyler 2026-07-20)
   When the takeoff VIEWER sub-view is active, app.js sets
   body.tk-viewer-fullbleed. We drop ALL the PWA app-shell chrome that
   was stacking above the embedded viewer — the .site-header band
   (PlanScope brand + home button) and the .session-panel user pill —
   and collapse the viewer's own "← Sheets" tk-topbar into a compact
   floating nav pill, so the embedded review viewer fills the screen
   like the standalone viewer (#458). The red TEST banner stays (it's
   the Test-env safety signal); Live has none so Live already reads
   full-bleed. Back-paths are preserved via the floating pill.
   ============================================================ */
body.tk-viewer-fullbleed .site-header,
body.tk-viewer-fullbleed .session-panel,
body.tk-viewer-fullbleed .user-menu { display: none !important; }

/* strip the page padding/gap so the viewer reaches every edge */
body.tk-viewer-fullbleed .takeoff-module .page { padding: 0; }
body.tk-viewer-fullbleed .takeoff-module .content-shell { gap: 0; }

/* the iframe wrap fills the viewport (minus the test banner, if kept) */
body.tk-viewer-fullbleed .tk-viewer-wrap {
  height: calc(100vh - 48px);
  min-height: 0;
  border: 0;
  border-radius: 0;
}
body.tk-viewer-fullbleed:not(.has-test-banner) .tk-viewer-wrap { height: 100vh; }

/* the viewer's "← Sheets / ← Modules" strip -> floating nav pill, top-left,
   just below the test banner. Sheet title is dropped (the embedded viewer shows
   the project + sheet in its own toolbar). */
body.tk-viewer-fullbleed #takeoffViewer .tk-topbar {
  /* Hidden (Tyler 2026-07-21): the embedded viewer now renders its OWN inline
     "← Sheets" button in the viewer bar, so this floating shell pill is retired. */
  display: none;
  position: fixed;
  top: 74px;
  left: 10px;
  z-index: 45;
  margin: 0;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: rgba(10, 17, 25, 0.82);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
body.tk-viewer-fullbleed:not(.has-test-banner) #takeoffViewer .tk-topbar { top: 26px; }
body.tk-viewer-fullbleed #takeoffViewer .tk-topbar-title { display: none; }
body.tk-viewer-fullbleed #takeoffViewer .tk-back {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

/* Install: takeoff-run select (project -> pick a completed takeoff to install from) */
.tk-runlist { display: flex; flex-direction: column; gap: 12px; }
.tk-run-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg);
  padding: 16px 18px; cursor: pointer; transition: border-color 0.12s ease;
}
.tk-run-card:hover { border-color: var(--input-halo); }
.tk-run-main { min-width: 0; }
.tk-run-title { font-weight: 800; font-size: 15px; }
.tk-run-meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.tk-run-open { flex: 0 0 auto; }

/* Plan Review status line collapses when empty (no static description) */
.pr-status:empty { display: none; }

/* ============================================================
   Contract Review (v1, Test lane) — reuses .pr-controls/.pr-status/.pr-output/
   .pr-section shells; cr-* adds the risk badge, finding cards, and watchlist.
   High = red, Medium = amber, Low = green (risk TO the subcontractor).
   ============================================================ */
.cr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 18px; }
.cr-risk { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--panel-border); background: var(--surface); }
.cr-risk-label { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.cr-risk-score { font-size: 26px; font-weight: 800; line-height: 1; }
.cr-risk-score em { font-size: 12px; font-weight: 600; font-style: normal; color: var(--muted); margin-left: 1px; }
.cr-risk-high { border-color: rgba(229, 83, 75, 0.7); background: rgba(229, 83, 75, 0.12); }
.cr-risk-high .cr-risk-score { color: #f07178; }
.cr-risk-medium { border-color: rgba(227, 179, 65, 0.7); background: rgba(227, 179, 65, 0.1); }
.cr-risk-medium .cr-risk-score { color: #e3b341; }
.cr-risk-low { border-color: rgba(63, 185, 80, 0.7); background: rgba(63, 185, 80, 0.1); }
.cr-risk-low .cr-risk-score { color: #56d364; }
.cr-meta { margin: 0; font-size: 12px; color: var(--muted); }
.cr-summary { flex: 1 1 100%; margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #dfe7f0; }

.cr-findings { display: flex; flex-direction: column; gap: 10px; }
.cr-finding { background: var(--surface); border: 1px solid var(--panel-border); border-left: 3px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; }
.cr-finding.cr-sev-high { border-left-color: #f07178; }
.cr-finding.cr-sev-medium { border-left-color: #e3b341; }
.cr-finding.cr-sev-low { border-left-color: #56d364; }
.cr-f-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cr-f-cat { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cr-f-risk { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; }
.cr-badge-high { background: rgba(229, 83, 75, 0.18); color: #f07178; }
.cr-badge-medium { background: rgba(227, 179, 65, 0.16); color: #e3b341; }
.cr-badge-low { background: rgba(63, 185, 80, 0.18); color: #56d364; }
.cr-f-sec { margin-left: auto; font-size: 12px; font-weight: 700; color: #9fb4cc; }
.cr-f-quote { margin: 0 0 8px; padding: 8px 12px; border-left: 2px solid var(--line); background: rgba(255, 255, 255, 0.03); border-radius: 6px; font-size: 12.5px; font-style: italic; color: #cdd8e4; white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-f-row { display: grid; grid-template-columns: 190px 1fr; gap: 6px 12px; margin: 4px 0; font-size: 13px; }
.cr-f-k { font-weight: 700; color: var(--muted); font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.cr-f-v { color: #dfe7f0; line-height: 1.5; overflow-wrap: anywhere; }

.cr-watchlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cr-watch { background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 10px 12px; }
.cr-watch-absent { border-color: rgba(227, 179, 65, 0.5); }
.cr-watch > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cr-watch-term { font-size: 12.5px; font-weight: 700; color: #eef4fb; text-transform: capitalize; }
.cr-watch-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.cr-watch-badge-present { background: rgba(63, 185, 80, 0.18); color: #56d364; }
.cr-watch-badge-absent { background: rgba(227, 179, 65, 0.18); color: #e3b341; }
.cr-watch-inst { margin: 0; padding-left: 16px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.cr-watch-inst li { overflow-wrap: anywhere; }
.cr-watch-note { margin: 0; font-size: 12.5px; color: #e8cd82; }

.cr-list { margin: 0; padding-left: 18px; }
.cr-list li { font-size: 13px; color: #dfe7f0; line-height: 1.55; margin: 4px 0; overflow-wrap: anywhere; }
.cr-section-q h2 { border-color: rgba(61, 240, 250, 0.4); }
.cr-section-lim h2 { border-color: var(--line); }
@media (max-width: 560px) { .cr-f-row { grid-template-columns: 1fr; gap: 2px; } }

/* ── Plan Review PROJECTS (#8) + change WALKTHROUGH (#9) — Test lane (Tyler 2026-07-24) ────────────────── */
.pr-projects { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.pr-proj-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pr-proj-head h2 { font-size: 16px; margin: 0; flex: 1 1 auto; }
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: var(--text); background: var(--chip); border: 1px solid var(--chip-border);
  border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, background .15s; }
.pr-btn:hover { border-color: #3df0fa; }
.pr-btn:disabled { opacity: .45; cursor: default; border-color: var(--chip-border); }
.pr-btn-accent { border-color: rgba(61, 240, 250, 0.55); color: #bff6fb; }
.pr-btn-accent:hover { background: rgba(61, 240, 250, 0.12); }
.pr-btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.pr-btn-ghost:hover { color: var(--text); border-color: var(--chip-border); }
.pr-btn-sm { padding: 5px 10px; font-size: 12px; }
.pr-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

.pr-proj-list { display: flex; flex-direction: column; gap: 8px; }
.pr-proj-card { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-md); cursor: pointer;
  transition: border-color .15s; }
.pr-proj-card:hover { border-color: #3df0fa; }
.pr-proj-name { font-size: 14px; font-weight: 600; color: var(--text); }
.pr-proj-meta { font-size: 12px; color: var(--muted); }

.pr-rev-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pr-rev { background: var(--surface); border: 1px solid var(--panel-border); border-left: 3px solid var(--line);
  border-radius: var(--radius-md); padding: 12px 14px; }
.pr-rev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pr-rev-seq { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #3df0fa;
  background: rgba(61, 240, 250, 0.1); border-radius: 6px; padding: 2px 8px; }
.pr-rev-label { font-size: 14px; font-weight: 600; color: var(--text); flex: 1 1 auto; }
.pr-rev-meta { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.pr-imported { color: #e3b341; font-style: italic; }
.pr-rev-headline { font-size: 13px; color: var(--text); margin: 4px 0 8px; }
.pr-mini-note { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.pr-mini-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-mini-chip { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--chip);
  border: 1px solid var(--chip-border); border-radius: 6px; padding: 3px 8px; }
.pr-mini-chip strong { color: var(--text); margin-left: 2px; }
.pr-mini-added { border-color: rgba(63, 185, 80, 0.6); } .pr-mini-added strong { color: #56d364; }
.pr-mini-removed { border-color: rgba(229, 83, 75, 0.6); } .pr-mini-removed strong { color: #f07178; }
.pr-mini-changed { border-color: rgba(227, 179, 65, 0.6); } .pr-mini-changed strong { color: #e3b341; }
.pr-mini-critical { border-color: rgba(229, 83, 75, 0.8); background: rgba(229, 83, 75, 0.12); }
.pr-mini-critical strong { color: #f07178; }

.pr-add-rev { background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 14px 16px; }
.pr-add-rev h3 { font-size: 14px; margin: 0 0 6px; }
.pr-add-hint { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.pr-add-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pr-add-row input[type="text"] { flex: 1 1 200px; min-width: 160px; padding: 8px 10px; font-size: 13px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--input-bd); border-radius: var(--radius-md); }
.pr-add-row input[type="file"] { font-size: 12px; color: var(--muted); }

/* Walkthrough overlay */
.pr-walk { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4, 8, 13, 0.72); backdrop-filter: blur(2px); }
.pr-walk.hidden { display: none; }
.pr-walk-panel { width: min(680px, 100%); max-height: 90vh; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px 20px; }
.pr-walk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pr-walk-count { flex: 1 1 auto; font-size: 14px; color: var(--text); }
.pr-walk-locate-note { font-size: 12px; color: var(--muted); background: rgba(227, 179, 65, 0.08);
  border: 1px solid rgba(227, 179, 65, 0.3); border-radius: var(--radius-md); padding: 8px 10px; margin: 0 0 14px; }
.pr-walk-card .pr-changed { margin-bottom: 0; }
.pr-walk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.pr-walk-dots { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; flex: 1 1 auto; }
.pr-walk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-border); opacity: .6; }
.pr-walk-dot-added { background: #56d364; } .pr-walk-dot-removed { background: #f07178; } .pr-walk-dot-changed { background: #e3b341; }
.pr-walk-dot.is-active { opacity: 1; box-shadow: 0 0 0 2px rgba(61, 240, 250, 0.5); }

/* On-sheet crops (before/now side-by-side) — Tyler flagship. Widen the panel when crops are present. */
.pr-walk-panel:has(.pr-walk-crops) { width: min(1040px, 100%); }
.pr-walk-crops { display: grid; gap: 12px; margin: 0 0 14px; }
.pr-walk-crops-two { grid-template-columns: 1fr 1fr; }
.pr-walk-crops-one { grid-template-columns: minmax(0, 720px); }
.pr-crop { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-crop-cap { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pr-crop-prior .pr-crop-cap { color: #f0a0a6; }
.pr-crop-current .pr-crop-cap { color: #6fd98a; }
.pr-crop-stage { position: relative; border: 1px solid var(--panel-border); border-radius: var(--radius-md);
  overflow: hidden; background: #fff; min-height: 56px; }
.pr-crop-prior .pr-crop-stage { border-color: rgba(240, 113, 120, 0.55); }
.pr-crop-current .pr-crop-stage { border-color: rgba(86, 211, 100, 0.55); }
.pr-crop-img { display: block; width: 100%; height: auto; }
.pr-crop-skel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted);
  background: repeating-linear-gradient(45deg, rgba(127,127,127,.06) 0 10px, rgba(127,127,127,.12) 10px 20px); }
.pr-crop-hl { position: absolute; box-sizing: border-box; border: 2px solid #3df0fa; border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(61, 240, 250, 0.35), 0 0 10px rgba(61, 240, 250, 0.6); pointer-events: none; }
@media (max-width: 640px) { .pr-walk-crops-two { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pr-add-row { flex-direction: column; align-items: stretch; } }

/* ── Module gating ──────────────────────────────────────────────────────────
   A tile for a module that exists but is not built yet. Shown ONLY to members
   of that module's group (Tyler 2026-08-01): a member sees honest roadmap
   structure, a non-member sees nothing. Disabled in markup as well as styling
   — a tile that merely LOOKS unavailable is the same class of mistake as a
   hidden tile in front of a live endpoint. */
.module-tab.is-indevelopment {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(1);
  position: relative;
}
.module-tab.is-indevelopment::after {
  content: "In development";
  position: absolute;
  inset-inline: 0;
  bottom: .5rem;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}
.module-tab[disabled] { pointer-events: none; }

/* Shown when the server grants nothing, or could not say. Never leave an empty
   chooser to be read as "this app has nothing in it". */
.module-access-note {
  max-width: 46rem;
  margin: 1rem auto;
  padding: .85rem 1.1rem;
  border-radius: .5rem;
  text-align: center;
  line-height: 1.5;
  background: rgba(120, 90, 20, .12);
  border: 1px solid rgba(160, 120, 30, .45);
}

/* Built, but NOT granted to this user. Deliberately a different label and a
   different class from .is-indevelopment: "you may not use this" and "this does
   not exist yet" are two different facts and a reader must be able to tell them
   apart at a glance. */
.module-tab.is-noaccess {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(1);
  position: relative;
}
.module-tab.is-noaccess::after {
  content: "No access";
  position: absolute;
  inset-inline: 0;
  bottom: .5rem;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}
/* Belt to the markup href withdrawal: inert tiles take no pointer or keyboard
   interaction even if a future style forgets. */
.module-tab.is-noaccess,
.module-tab.is-indevelopment,
.module-tab[aria-disabled="true"] { pointer-events: none; }

/* ── Module home sections ───────────────────────────────────────────────────
   The lifecycle stages (Estimating -> Detailing -> PM -> Install -> Projects)
   are one job moving through stages; the tools are independent. Grouping them
   says that at a glance. Type matched to the existing .mt-t treatment rather
   than introducing a third heading style. */
.module-section-h {
  width: 100%;
  margin: 26px 0 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  /* Centred over the tile grid rather than flush left (Tyler 2026-08-02) — the
     headings label the group beneath them, so they sit on its axis. */
  text-align: center;
}
.module-section-h:first-of-type { margin-top: 6px; }
/* The four stages are equal siblings on the top row. PROJECTS is deliberately
   the exception (Tyler 2026-08-01): it is not a fifth stage, it is the view
   ACROSS all of them, so it spans the full row beneath them — the hero
   treatment Takeoff used to carry, moved to the thing that actually earns it. */
#projectsTab { grid-column: 1 / -1; }

/* Plan Review — CONFIRMED scope changes outside Div 08. Styled to sit beside the
   "check manually" block: what changed and what could not be verified are equally
   important, so neither may look like the quieter one. */
.pr-scope-row { padding: 7px 12px; border-bottom: 1px solid rgba(34, 48, 66, 0.6); font-size: 12.5px; }
.pr-scope-kind { display: inline-block; min-width: 62px; font-weight: 700; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .03em; margin-right: 10px; }
.pr-scope-added .pr-scope-kind { color: #86e0a6; }
.pr-scope-removed .pr-scope-kind { color: #ff9d9d; }
.pr-scope-changed .pr-scope-kind { color: #ffc978; }
.pr-scope-key { font-weight: 600; }
.pr-scope-deltas { margin: 4px 0 0 72px; padding: 0; list-style: none; color: var(--muted); }
.pr-scope-deltas li { margin: 2px 0; }
.pr-scope-deltas s { opacity: .7; }
.pr-scope-critical { color: #ff9d9d; }

/* A takeoff that is RUNNING must not look like one nobody has touched. */
.tk-tile-running { border-color: rgba(90, 150, 230, .55); }
.tk-run-badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center;
  gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: #cfe4ff;
  background: rgba(20, 40, 70, .88); border: 1px solid rgba(90, 150, 230, .55); }
.tk-run-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fb0ff;
  animation: tk-run-pulse 1.4s ease-in-out infinite; }
@keyframes tk-run-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tk-elapsed { color: var(--muted); font-variant-numeric: tabular-nums; }
/* the running badge is absolutely positioned inside the thumb */
.tk-thumb { position: relative; }

/* Project tile footer: adding the admin Delete button (2026-08-02) pushed the row
   past the tile width, so the controls hung off the card. The meta text now yields
   space instead of pinning the row open, and the buttons wrap rather than overflow. */
.tk-tile-foot { flex-wrap: wrap; row-gap: 6px; }
.tk-tile-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* one row, always — three small buttons wrapping into an L was just cramped
   padding, not a space problem (Tyler, 2026-08-06). Buttons shrink before they
   wrap. */
.tk-tile-actions { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; max-width: 100%; }
.tk-tile-actions .ghost-btn { padding: 3px 8px; font-size: 10.5px; white-space: nowrap; }
.tk-tile-actions .ghost-btn { padding: 4px 8px; font-size: 10.5px; white-space: nowrap; }

/* ── SHEET CONFIRM — what gets measured, before it is measured ────────────────── */
.sc-wrap { padding: 4px 2px 10px; }
.sc-wrap h3 { margin: 0 0 4px; font-size: 15px; }
.sc-lede { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 62rem; }
.sc-group { margin-bottom: 16px; }
.sc-group-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border-bottom: 1px solid var(--panel-border); padding-bottom: 5px; margin-bottom: 9px; }
.sc-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
/* the hidden attribute must actually hide: display:grid above outranks the UA [hidden] rule,
   which left reference sheets visible under a button that said 'Show' (Tyler 2026-08-13) */
.sc-grid[hidden] { display: none; }
.sc-card { display: flex; flex-direction: column; gap: 3px; position: relative; cursor: pointer;
  border: 1px solid var(--panel-border); border-radius: 6px; padding: 8px; background: var(--bg-soft);
  transition: border-color .12s ease, background .12s ease; }
.sc-card:hover { border-color: rgba(90,150,230,.55); }
/* Selected = WILL BE MEASURED. Deliberately the loudest state on the card: an estimator
   scanning 90 sheets is looking for what the engine is about to trace, not what it skipped. */
.sc-on { border-color: rgba(90,150,230,.85); background: rgba(60,120,200,.14); }
.sc-box { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; cursor: pointer; z-index: 2; }
.sc-thumb { width: 100%; height: auto; background: #fff; border-radius: 3px; display: block; }
.sc-no { font-weight: 700; font-size: 12px; margin-top: 4px; }
.sc-title { font-size: 11.5px; color: var(--text); line-height: 1.35; }
.sc-why { font-size: 10.5px; color: var(--muted); line-height: 1.35; font-style: italic; }
/* The run footer: what will happen, then the button that does it. A solid bar
   with a rule above it, not text floating over the card grid — measured against
   Tyler's screenshot 2026-08-06, where Cancel / counts / Run read as three
   strangers sharing a bench. */
.sc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin-top: 10px; position: sticky; bottom: 0; padding: 10px 14px;
  background: var(--bg); border-top: 1px solid var(--panel-border);
  box-shadow: 0 -8px 16px rgba(0,0,0,.25); }
.sc-actions #scCancel { margin-right: auto; }   /* Cancel parks left, actions right */

/* The Takeoff Brief (#43): what the engine READ, rendered above the action row
   so the sign-off and the Run button share one glance. */
.sc-brief { margin-top: 10px; }
.sc-brief:empty { display: none; }
.sc-brief-head { font-weight: 600; margin-bottom: 6px; }
.sc-brief-wait { color: var(--muted, #9db4c9); font-size: 13px; }
.sc-brief-tables { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.sc-brief-tables li { margin: 2px 0; }
.sc-brief-how { color: var(--muted, #9db4c9); font-size: 11px; margin-left: 6px; }
.sc-brief-facts { font-size: 13px; color: var(--muted, #c7d5e3); margin: 0 0 6px; }
.sc-act { display: flex; gap: 6px; align-items: center; margin-right: 0; }
.sc-chip { font-weight: 600; font-size: 11px; padding: 3px 9px; border-radius: 11px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-chip-m { background: #16324a; color: #9fd0f2; border: 1px solid #2b5f8a; }
.sc-chip-r { background: #163a2b; color: #93d9b0; border: 1px solid #2b8a5f; }
.sc-chip-x { background: #242b33; color: #9db4c9; border: 1px solid #39434e; }

/* Sheet-confirm badges. Three DIFFERENT facts, three appearances — an engine drop, a real
   Division 10 schedule, and a mere mention of D10 items must never read the same. */
.sc-pageno { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 10.5px; }
.sc-flag { display: block; font-size: 10.5px; line-height: 1.35; border-radius: 3px; padding: 3px 5px; margin-top: 3px; }
.sc-flag-aside { background: rgba(190,130,20,.16); color: #ffc978; border: 1px solid rgba(190,130,20,.45); }
.sc-flag-d10 { background: rgba(40,150,80,.18); color: #86e0a6; border: 1px solid rgba(40,150,80,.45); }
.sc-flag-hint { background: rgba(120,140,165,.16); color: var(--muted); border: 1px dashed rgba(120,140,165,.45); }
.sc-zoom { position: absolute; top: 10px; left: 10px; z-index: 2; cursor: zoom-in; font-size: 13px;
  background: rgba(4,8,13,.72); border-radius: 4px; padding: 1px 5px; line-height: 1.5; }

/* Full-page sheet viewer — a thumbnail is enough to scan, not enough to decide. */
.sv-wrap { position: fixed; inset: 0; z-index: 9998; background: rgba(4,8,13,.82);
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.sv-panel { width: min(1400px, 96vw); height: min(92vh, 1000px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; }
.sv-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--panel-border); }
.sv-title { font-weight: 600; font-size: 13px; flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sv-tick { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.sv-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  background: #0a1119; overflow: auto; padding: 12px; }
/* NO max-width HERE. The canvas is sized explicitly in JS — render at
   scale x devicePixelRatio into the backing store, CSS box at the unscaled size —
   and a max-width:100% clamped the displayed sheet to the panel width. Zooming
   therefore rendered more pixels into the same box: the sheet never got bigger
   and there was nothing to pan, which is why zoom felt like it did nothing while
   the text stayed hard to read. */
.sv-canvas { background: #fff; max-width: none; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  touch-action: none; }
.sv-foot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px;
  border-top: 1px solid var(--panel-border); font-size: 12px; color: var(--muted); }
.sc-role { width: 100%; margin-top: 4px; font: inherit; font-size: 10.5px; padding: 2px 4px;
  border-radius: 3px; border: 1px solid var(--panel-border); background: var(--bg); color: var(--text); }
img.sc-thumb { width: 100%; height: auto; background: #fff; border-radius: 3px; display: block; }
.sv-gap { flex: 0 0 18px; }
.sv-zlevel { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.sv-stage { align-items: flex-start; justify-content: flex-start; }
/* `margin:auto` centres the sheet while it FITS; once it is larger than the
   stage, auto margins in a flex container can make the overflow unreachable, so
   it is only applied when there is room to spare. */
.sv-canvas { margin: auto; }
.sv-stage.sv-panning .sv-canvas { margin: 0; }


/* A reference sheet that also tabulates doors (Ambrose A-150: unit-entry head and
   jamb details AND the unit door schedule). Flagged so the estimator can promote
   it to a schedule instead of it being lost on a title technicality. */
.sc-flag-sched { background: rgba(122, 162, 247, .16); color: #9dc0ff;
  border: 1px solid rgba(122, 162, 247, .35); }

/* A sheet whose CONTENT is a raster: title block in text, drawing area a picture
   (see takeoff/imagecontent.py). Warned in amber rather than the green used for
   "we found something extra" — this one is telling the estimator the engine did
   NOT read it, which is the opposite kind of news. */
.sc-flag-img { display: block; margin-top: 4px; padding: 2px 5px; border-radius: 3px;
  font-size: 10px; line-height: 1.3; background: #40320c; color: #f2d98a;
  border: 1px solid #6b5410; }

/* The same sheet listed under a second heading because it genuinely belongs
   there — a unit plan that also carries a toilet-accessory schedule. Muted, so a
   repeat never reads as a second sheet, and it names where the sheet is actually
   measured so nobody ticks it twice expecting two things to happen. */
.sc-flag-dup { display: block; margin-top: 4px; padding: 2px 5px; border-radius: 3px;
  font-size: 10px; line-height: 1.3; background: #1b2733; color: #9db4c9;
  border: 1px dashed #35506b; }

/* A picture sheet that AI has read. Blue, not amber: this is information, not a
   warning — but it still says "confirm before pricing", because unlike every
   other lane there is no text layer to check the reading against. */
.sc-flag-vision { display: block; margin-top: 4px; padding: 2px 5px; border-radius: 3px;
  font-size: 10px; line-height: 1.3; background: #102b40; color: #9fd0f2;
  border: 1px solid #1d4f75; }

/* Reference sections: present and counted, their thumbnails painted only when
   asked for. Included is not the same as in the way. */
.sc-showref { margin: 2px 0 6px; font-size: 11px; padding: 2px 8px; }
.sc-group-ref > .sc-group-head { opacity: .85; }

/* The exception control: exclude a sheet from the run. Small and in the corner,
   because it is for the rare wrong sheet — not a decision every card demands. */
.sc-excl { position: absolute; top: 4px; right: 4px; z-index: 2; width: 20px; height: 20px;
  border-radius: 3px; border: 1px solid var(--panel-border); background: var(--bg);
  color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.sc-excl:hover { color: #f2a0a0; border-color: #6b2f2f; }
.sc-card { position: relative; }
.sc-card.sc-excluded { opacity: .45; }
.sc-card.sc-reference { }
.sc-flag-excl { display: block; margin-top: 4px; padding: 2px 5px; border-radius: 3px;
  font-size: 10px; background: #33232a; color: #d9a0ae; border: 1px solid #5e3040; }

/* remove a chosen upload part */
.tf-rm { margin-left: 8px; width: 18px; height: 18px; line-height: 1; padding: 0;
  border-radius: 3px; border: 1px solid var(--panel-border); background: var(--bg);
  color: var(--muted); font-size: 12px; cursor: pointer; }
.tf-rm:hover { color: #f2a0a0; border-color: #6b2f2f; }

/* ── runs in flight, module-visible ─────────────────────────────────────── */
.tk-runs-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tk-run-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  padding: 5px 11px; border-radius: 14px; background: #14324a; color: #cfe4f7;
  border: 1px solid #2b5f8a; }
.tk-run-chip em { font-style: normal; color: #8fb8dd; font-size: 11px; }
.tk-run-chip.tk-run-queued { background: #242b33; border-color: #39434e; color: #b9c9d9; }
.tk-run-dot { width: 7px; height: 7px; border-radius: 50%; background: #4da3ff;
  animation: tkRunPulse 1.6s ease-in-out infinite; }
.tk-run-queued .tk-run-dot { background: #7d8b99; animation: none; }
@keyframes tkRunPulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* reopenable run summary */
.tk-summary-btn { margin-left: auto; align-self: center; white-space: nowrap; }
.to-summary-overlay { position: fixed; inset: 0; background: rgba(4,8,12,.72);
  display: flex; align-items: center; justify-content: center; z-index: 300; }
.to-summary-panel { background: var(--bg); border: 1px solid var(--panel-border);
  border-radius: 8px; max-width: 860px; width: min(92vw, 860px); max-height: 84vh;
  overflow-y: auto; padding: 16px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.to-summary-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; }
.to-summary-head h3 { margin: 0; font-size: 15px; }

/* project-page category headings — same vocabulary as the confirm screen */
.tk-group-head { grid-column: 1 / -1; font-size: 12px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--muted, #9db4c9);
  margin: 14px 2px 2px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-border); }
.tk-group-grid { margin-bottom: 4px; }

/* grouped project page: the host is a plain column; the group rows are the grids */
.tk-sheet-grid.tk-grouped { display: block; }
.tk-summary-btn { margin-right: 14px; }
.to-summary-expand { margin-top: 12px; }

/* Project versions — compact because the sheet grid remains the primary work area. */
.tk-version-add-btn { flex: 0 0 auto; white-space: nowrap; }
.tk-versions { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--panel-border);
  border-radius: var(--radius-md); background: var(--surface); }
.tk-versions[hidden] { display: none; }
.tk-version-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tk-version-head h2 { margin: 0; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.tk-version-timeline { display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; }
.tk-version-timeline li { position: relative; display: grid; gap: 2px; min-width: 190px;
  padding: 2px 20px 10px 18px; border-bottom: 2px solid var(--panel-border); font-size: 11px;
  color: var(--muted); }
.tk-version-timeline li b { color: var(--text); font-size: 12px; }
.tk-version-timeline li em { width: fit-content; padding: 1px 6px; border-radius: 9px;
  background: #16324a; color: #9fd0f2; font-size: 10px; font-style: normal; }
.tk-version-timeline li.is-current { border-bottom-color: #4da3ff; }
.tk-version-dot { position: absolute; left: 0; bottom: -5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--muted); border: 2px solid var(--surface); }
.tk-version-timeline .is-current .tk-version-dot { background: #4da3ff; }
.tk-version-timeline li .tk-version-error { background: #3d2918; color: #f4bf77; }
.tk-version-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 12px; color: var(--muted); }
.tk-version-compare label { display: flex; align-items: center; gap: 8px; }
.tk-version-compare select { max-width: 220px; padding: 6px 8px; border: 1px solid var(--input-bd);
  border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text); }
.tk-version-diff { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.tk-version-diff[hidden] { display: none; }
.tk-diff-headline { margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--text); }
.tk-diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.tk-diff-bucket { padding: 9px 10px; border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm); background: var(--bg-soft); }
.tk-diff-bucket h4 { margin: 0 0 5px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.tk-diff-bucket h4 b { color: var(--text); }
.tk-diff-bucket ul { margin: 0; padding-left: 17px; font-size: 11px; line-height: 1.45; }
.tk-diff-bucket p { margin: 0; color: var(--muted); font-size: 11px; }
.tk-diff-more { margin-top: 4px !important; font-weight: 600; }
.sc-version-note { margin: 0 0 10px; padding: 7px 9px; border: 1px solid #2b5f8a;
  border-radius: var(--radius-sm); background: #102b40; color: #b9d8ee; font-size: 12px; }

@media (max-width: 900px) {
  #takeoffSheets .tk-topbar { flex-wrap: wrap; }
  #takeoffSheets .tk-topbar-title { order: -1; flex-basis: 100%; }
  .tk-version-timeline li { min-width: 165px; }
}

/* the permanent-delete button reads as what it is */
.tk-tile-actions .tk-danger { color: #e29aa5; border-color: #5e3040; }
.tk-tile-actions .tk-danger:hover { color: #ff9aa8; border-color: #8a3d50; background: #2a1a20; }

/* hardware-spec upload: same drop-zone look as the plan set, one file */
.to-file-spec > span:first-child { opacity: .85; }
.to-drop-spec { min-height: 74px; }
.to-spec-note { font-size: 12px; color: var(--muted); opacity: .85; }
/* a failed run stays on the strip in red until its job record ages out —
   vanishing was how Natalie lost track of Bayshore (2026-08-20) */
.tk-run-chip.tk-run-failed { border-color: #8a2f3a; }
.tk-run-chip.tk-run-failed .tk-run-dot { background: #e05563; animation: none; }
.tk-run-dismiss { margin-left: 8px; font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid #8a2f3a; background: transparent; color: #e05563; cursor: pointer; }
.tk-run-dismiss:hover { background: rgba(224, 85, 99, 0.12); }
.tk-run-dismiss:disabled { opacity: 0.6; cursor: default; }
.tk-run-chip.tk-run-failed em { color: #e8a2ab; }
#takeoffSheets .tk-topbar-title .tk-sheets-title { display: inline-block; vertical-align: middle; }
#takeoffSheets .tk-topbar-title .tk-version-rowpick { margin-left: 10px; padding: 4px 10px;
  vertical-align: middle; font-size: 13px; }

/* per-tile recategorization on the project sheets grid (Tyler 2026-08-22) */
.tk-tile-role { width: 100%; margin-top: 6px; padding: 4px 8px; font-size: 12px;
  background: transparent; color: inherit; border: 1px solid var(--line, #33415c);
  border-radius: 8px; cursor: pointer; }
.tk-tile-role option { color: #0d1220; }
.tk-tile-role-saved .tk-tile-role { border-color: var(--accent, #4b7bec); }

/* full-set sheet browser (Tyler 2026-08-22) */
.tk-allsheets { grid-column: 1 / -1; margin-top: 14px; }
.tk-allsheets-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px;
  max-height: 480px; overflow-y: auto; border: 1px solid var(--line, #33415c); border-radius: 10px; padding: 8px; }
.tk-as-row { display: grid; grid-template-columns: 84px 1fr 240px; gap: 10px; align-items: center;
  padding: 3px 6px; border-radius: 6px; }
.tk-as-row:hover { background: rgba(255,255,255,.04); }
.tk-as-no { font-weight: 700; }
.tk-as-title { font-size: 12px; color: var(--muted, #8b93a7); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tk-as-role { padding: 3px 8px; font-size: 12px; background: transparent; color: inherit;
  border: 1px solid var(--line, #33415c); border-radius: 6px; }
.tk-as-role option { color: #0d1220; }
.tk-as-role-saved { border-color: var(--accent, #4b7bec); }

/* native dropdown lists are light — group headers must be dark too */
.tk-tile-role optgroup, .tk-as-role optgroup, .tk-version-rowpick optgroup { color: #0d1220; }
.sc-role optgroup, .sc-role option { color: #0d1220; }
/* THE POPUP LIST IS DRAWN BY THE BROWSER in the page's color-scheme: under the
   dark root scheme Chromium paints it near-black, and the #0d1220 option text
   above became black-on-black on Natalie's machine (Tyler 2026-09-02). Pin the
   controls to the light scheme so the list is light with dark text everywhere. */
.sc-role, .tk-tile-role, .tk-as-role, .tk-version-rowpick { color-scheme: light; }
.sc-role option, .sc-role optgroup, .tk-tile-role option, .tk-as-role option,
.tk-version-rowpick option, .tk-version-rowpick optgroup { background: #fff; color: #0d1220; }
.sc-ident { font-weight: 600; font-size: 11.5px; color: var(--text); line-height: 1.25; }

/* changed-sheets rerun nudge (Tyler 2026-08-22) */
.tk-rerun-nudge { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--accent, #4b7bec);
  border-radius: 10px; background: rgba(75, 123, 236, .08); font-size: 14px; }

.tk-tile-pending { opacity: .75; border-style: dashed; }

.tk-tile-runbtn { margin-top: 8px; width: 100%; font-size: 13px; padding: 6px 10px; }

/* CURRENTLY RUNNING section (Tyler 2026-08-23) — real tiles, only while live */
.tk-runs-strip { display: block; margin: 6px 0 14px; }
.tk-run-sec-head { font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #7fa8cf; margin: 2px 0 8px; }
.tk-running-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tk-run-tile { cursor: pointer; border: 1px solid #2c65a8; box-shadow: 0 0 0 1px rgba(88,150,220,.15); }
.tk-run-tile .tk-run-status { color: #6fb0ff; }
.tk-run-tile.tk-run-failed { border-color: #a84040; }
.tk-run-tile.tk-run-failed .tk-run-status { color: #ff9d9d; }
.tk-run-tile .tk-run-badge { position: absolute; top: 8px; left: 8px; }
.tk-run-tile .tk-thumb { position: relative; }

/* Told BEFORE the estimator spends an hour: this set has no door schedule, so
   it can answer how many but not which door. See sheet_proposal.preflight. */
.sc-preflight {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #6b5a2a;
  border-left-width: 4px;
  border-radius: 12px;
  background: rgba(255, 209, 102, 0.08);
}
.sc-preflight b { color: #ffd166; }
.sc-preflight p { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; }


/* ---- RUN SPECS panel (Tyler 2026-09-02): the spec-book checklist per project ---- */
.tk-specs { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--panel-border, #2a3650); border-radius: 10px;
  background: var(--panel, rgba(255,255,255,.03)); }
.sp-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.sp-title { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; min-width: 0; }
.sp-title b { font-size: 15px; }
.sp-file { font-size: 12px; opacity: .85; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-muted { opacity: .6; }
.sp-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--panel-border, #2a3650); }
.sp-pill.sp-running { border-color: #4b7bec; color: #9dbcff; }
.sp-pill.sp-flag { border-color: #d9a441; color: #f2c66d; }
.sp-pill.sp-err { border-color: #d9534f; color: #f19a97; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-upload { font-size: 12px; padding: 5px 10px; border: 1px dashed var(--panel-border, #2a3650); border-radius: 8px; cursor: pointer; }
.sp-upload input { display: none; }
.sp-group { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--panel-border, #2a3650); }
.sp-group h3 { margin: 0 0 6px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.sp-sections { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sp-sec { font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--panel-border, #2a3650); }
.sp-sec i { font-style: normal; opacity: .7; }
.sp-summary { margin: 4px 0 8px; font-size: 13px; opacity: .9; max-width: 90ch; }
.sp-notice { margin: 4px 0 8px; font-size: 12px; color: #f2c66d; }
.sp-qs { display: grid; gap: 6px; }
.sp-q { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.025); border-left: 3px solid transparent; }
.sp-q.sp-answered { border-left-color: #3fbf7f; }
.sp-q.sp-not_addressed { border-left-color: #6b7280; opacity: .85; }
.sp-q.sp-unclear { border-left-color: #d9a441; }
.sp-status { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; padding-top: 2px; }
.sp-question { font-size: 13px; font-weight: 600; }
.sp-answer { font-size: 13px; margin-top: 3px; white-space: pre-wrap; }
.sp-flags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; }
.sp-flagchip { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(217,164,65,.15); color: #f2c66d; border: 1px solid rgba(217,164,65,.4); }
.sp-cites { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-cite { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid #4b7bec; color: #9dbcff; text-decoration: none; }
.sp-cite:hover { background: rgba(75,123,236,.15); }
.sp-watch { margin-top: 8px; font-size: 13px; }
.sp-watch ul { margin: 4px 0 0 18px; padding: 0; }
.sp-erp table { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sp-erp th, .sp-erp td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--panel-border, #2a3650); vertical-align: top; }
.sp-foot { margin: 10px 0 0; font-size: 11.5px; }
@media (max-width: 720px) { .sp-q { grid-template-columns: 1fr; } }

/* architect chip on the project meta line (Tyler 2026-09-02: correct it post-run, discreetly) */
.tk-arch-chip { font: inherit; font-size: 12px; color: var(--dim, #8b99ab); background: transparent; border: 1px dashed var(--panel-border, #2a3650); border-radius: 999px; padding: 1px 8px; cursor: pointer; }
.tk-arch-chip:hover { color: var(--text); border-style: solid; }

/* Project specs page (2026-09-03): its own view, back button to the project */
.tk-specs-page { padding: 14px 18px 40px; }
.tk-specs-top { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.tk-specs-title { margin: 0; font-size: 1.15rem; font-weight: 600; }
.tk-specs-page .tk-specs { margin-top: 6px; }
.sp-flow { display: block; margin: 4px 0 0; font-size: .92em; }
.sp-flow.ok { color: var(--ok, #7ac98a); }
.sp-flow.warn { color: var(--amber, #ffd166); }

.sp-erp-class { margin: 14px 0 2px; font-size: 1rem; }
.sp-erp-applies { margin: 0 0 6px; font-size: .9em; opacity: .8; }

.sp-loading { display: flex; align-items: center; gap: 10px; padding: 18px 6px; opacity: .85; }
.sp-spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sp-spin .8s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-spinner { animation: none; } }

.ps-update-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 10px;
  background: var(--panel, #16202c); color: var(--text, #cfd8e3); border: 1px solid var(--line, #2c3a4c);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: .95em; }

/* run diagnosis (2026-09-04) */
.tk-diag-btn.tk-diag-high { border-color: #e5484d; color: #ffb4b6; }
.tk-diag-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tk-diag-item { border: 1px solid var(--line, #2c3a4c); border-radius: 8px; padding: 10px 12px; background: rgba(255,255,255,.02); }
.tk-diag-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tk-diag-sev { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; }
.tk-diag-high { color: #ff8a8d; } .tk-diag-medium { color: #ffd166; } .tk-diag-low { color: #9db4c9; }
.tk-diag-what { font-size: 13px; margin-bottom: 4px; }
.tk-diag-why, .tk-diag-todo, .tk-diag-pages { font-size: 12.5px; color: var(--muted, #9db4c9); margin-top: 2px; }
.tk-diag-why > span, .tk-diag-todo > span { font-weight: 700; color: inherit; }
.tk-diag-todo { color: #cfe3ff; }

/* set profile at the confirm step (2026-09-04) */
.sc-profile { border: 1px solid var(--line, #2c3a4c); border-radius: 8px; padding: 8px 12px; margin: 6px 0 12px; background: rgba(255,255,255,.02); }
.sc-profile > summary { cursor: pointer; font-size: 13px; }
.sc-profile-conv { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted, #9db4c9); margin: 8px 0 4px; }
.sc-profile-off { font-size: 12px; color: var(--muted, #9db4c9); margin: 4px 0 8px; }

/* a sheet re-run in flight shows on its tile */
.tk-thumb { position: relative; }
.tk-rerun-badge { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: 999px;
  background: rgba(47,111,74,.95); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  animation: tkPulse 1.6s ease-in-out infinite; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes tkPulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

/* in-app notices (no browser alerts) */
.ps-notice-host { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.ps-notice { padding: 10px 14px; border-radius: 10px; background: #1d2126; color: #e3e6ea; border: 1px solid #333a42;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 13.5px; line-height: 1.4; transition: opacity .35s, transform .35s; }
.ps-notice-error { border-color: #a83a2e; background: #2a1c1a; }
.ps-notice-out { opacity: 0; transform: translateY(6px); }

/* MARK FINISHED on the project screen (Tyler 2026-09-08) + the in-app confirm
   it uses. Finishing is a statement about the whole takeoff, so it sits with
   Re-run and ePWS export rather than inside a single sheet's viewer. */
.tk-finish-btn.tk-finish-ok { border-color: #3fb950; color: #7ee787; }
.tk-finish-btn.tk-finish-stale { border-color: #d29922; color: #f0c674; }
.tk-finish-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line, #2a3140); color: var(--muted, #9aa4b2);
  white-space: nowrap; align-self: center; }
.tk-finish-chip-ok { border-color: rgba(63, 185, 80, .5); color: #7ee787; }
.tk-finish-chip-stale { border-color: rgba(210, 153, 34, .6); color: #f0c674; }

.tk-confirm-panel { max-width: 520px; }
.tk-confirm-body { padding: 4px 18px 14px; line-height: 1.55; font-size: 13.5px; }
.tk-confirm-actions { display: flex; gap: 10px; justify-content: flex-end;
  padding: 0 18px 16px; }
.tk-confirm-actions .tk-confirm-ok { border-color: #3fb950; color: #7ee787; }

/* Hardware sets that came under separate cover (Tyler 2026-09-08). Amber only
   when the index and the sets document disagree -- that is the one state an
   estimator must not walk past. */
.tk-hw-disagree { border-color: #d29922 !important; color: #f0c674 !important; }

/* A sheet tile whose preview could not be drawn says so, rather than showing a
   white rectangle that reads as an empty sheet (Tyler 2026-09-08). */
.tk-thumb-fail { position: absolute; inset: auto 6px 6px auto;
  font-size: 10px; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px;
  background: rgba(210, 153, 34, .16); border: 1px solid rgba(210, 153, 34, .55);
  color: #f0c674; pointer-events: auto; cursor: help; }

/* ---- Project data page (Tyler 2026-09-09) --------------------------------
   A full page, not a modal: this is where a project is verified door by door
   before it is finished or exported, so it needs the room a door schedule
   needs. */
.tk-pd-page { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pd-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-left: auto; }
.pd-summary { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.pd-card { border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 10px 12px; background: var(--panel); min-width: 0; }
.pd-card-l { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }
.pd-card-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  margin-top: 2px; }
.pd-card-n { font-size: 11px; color: var(--muted); margin-top: 3px;
  overflow-wrap: anywhere; }
.pd-loading { padding: 18px 4px; color: var(--muted); font-size: 13px; }
.pd-doors-wrap { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pd-doors-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-doors-head h2 { margin: 0; font-size: 14px; }
.pd-filter { flex: 1 1 260px; max-width: 420px; padding: 6px 10px;
  border: 1px solid var(--panel-border); border-radius: 6px;
  background: var(--bg); color: inherit; font: inherit; }
.pd-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pd-doors { overflow: auto; max-height: 62vh; border: 1px solid var(--panel-border);
  border-radius: 8px; }
.pd-doors-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pd-doors-tbl th { position: sticky; top: 0; z-index: 1; text-align: left;
  background: var(--panel); border-bottom: 1px solid var(--panel-border);
  padding: 7px 10px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pd-doors-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--panel-border);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-doors-tbl tbody tr:hover { background: var(--panel); }
.pd-doors-tbl .pd-gap { color: var(--muted); }
.pd-doors-tbl tr.pd-unmarked td:first-child { color: var(--warn, #d9a441); font-weight: 600; }
.pd-doors-tbl .pd-prod { min-width: 132px; }
.pd-doors-tbl .pd-prod select { width: 100%; font: inherit; padding: 3px 6px;
  border: 1px solid var(--panel-border); border-radius: 5px;
  background: var(--bg); color: var(--muted); }
.tk-projectdata-btn { font-weight: 600; }

/* clickable gap cards, the two table modes, and the order verdict */
.pd-card-click { cursor: pointer; }
.pd-card-click:hover { border-color: var(--accent, #6ea8fe); }
.pd-card-on { border-color: var(--accent, #6ea8fe);
  box-shadow: inset 0 0 0 1px var(--accent, #6ea8fe); }
.pd-modes { display: inline-flex; gap: 6px; }
.pd-mode-on { border-color: var(--accent, #6ea8fe); font-weight: 600; }
.pd-doors-tbl td.pd-ok { color: var(--ok, #4ade80); }
.pd-doors-tbl td.pd-miss { color: var(--warn, #d9a441); }
.pd-doors-tbl tr.pd-grp { cursor: pointer; background: var(--panel); }
.pd-doors-tbl tr.pd-grp:hover { filter: brightness(1.15); }
.pd-doors-tbl tr.pd-grp td { font-size: 13px; padding: 8px 10px; }
.pd-caret { display: inline-block; width: 12px; color: var(--muted); }

/* editable door fields — the estimator supplies what no drawing states */
.pd-doors-tbl td.pd-edit { cursor: text; min-width: 62px; }
.pd-doors-tbl td.pd-edit:hover { background: rgba(255,255,255,.05); }
.pd-doors-tbl td.pd-edit:focus { outline: 2px solid var(--accent, #6ea8fe);
  outline-offset: -2px; background: rgba(110,168,254,.08); }
.pd-doors-tbl td.pd-edited { box-shadow: inset 2px 0 0 var(--accent, #6ea8fe); }

/* Clear all markings (Tyler 2026-09-13): a quiet, deliberate control beside Run takeoff */
.to-clear-marks { margin-left: 12px; background: transparent; color: var(--danger, #b3261e); border: 1px solid var(--danger, #b3261e); border-radius: 6px; padding: 8px 12px; cursor: pointer; font: inherit; }
.to-clear-marks:hover { background: rgba(179, 38, 30, 0.08); }

/* RUN AGAIN IS A BUTTON, NOT A HINT (Tyler 2026-09-18: "it wasn't clear like a button though, i just clicked the tile"). */
.tk-run-tile .tk-run-again-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.tk-run-tile .tk-run-again-btn{padding:5px 12px;font-size:12px;line-height:1.2}

/* project data: hardware-set cell notes (2026-09-21) — the marker is ::after so it never becomes the saved value */
td.pd-hw[data-hw-note$="pick one"]::after, td.pd-hw[data-hw-note="conflict"]::after { content: " \26A0 " attr(data-hw-note); color: #e0a020; font-size: 11px; white-space: nowrap; }
td.pd-hw[data-hw-note="no spec"]::after, td.pd-hw[data-hw-note="missing"]::after, td.pd-hw[data-hw-note="unassigned"]::after { content: " " attr(data-hw-note); color: var(--muted, #8a94a0); font-size: 11px; }

.pd-doors-tbl td.pd-qty, .pd-doors-tbl th.pd-qty { text-align: right; font-variant-numeric: tabular-nums; width: 3.5em; }
.pd-hw-tbl td.pd-hwitems div { white-space: nowrap; }
.pd-hw-tbl td.pd-hwid { font-weight: 600; }

/* THE MODEL'S OWN SAY-SO, SHOWN (Tyler 2026-09-22). A sheet measured under a role its printed
   title never claims is a decision the estimator should make, not one that should pass silently. */
.sc-unresolved {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #6b5a2a;
  border-left-width: 4px;
  border-radius: 12px;
  background: rgba(255, 209, 102, 0.08);
}
.sc-unresolved b { color: #ffd166; }
.sc-unresolved p { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; }
.sc-unresolved ul { margin: 8px 0 0; padding-left: 18px; }
.sc-unresolved li { margin: 4px 0; font-size: 0.88rem; line-height: 1.45; }
.sc-jump {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #ffd166;
  text-decoration: underline;
  cursor: pointer;
}
.sc-jump:hover { color: #fff0c2; }
.sc-flag-unres { background: rgba(190,130,20,.16); color: #ffc978; border: 1px solid rgba(190,130,20,.45); }
.sc-card-hit { outline: 2px solid #ffd166; outline-offset: 2px; }

/* PROJECT QUESTIONS, ABOVE THE NUMBERS THEY AFFECT (Tyler 2026-09-22). projectTotals.flags was
   produced for months and rendered nowhere; the unit-matrix decision is the one that moves counts. */
.pd-flags { margin: 0 0 12px; display: grid; gap: 8px; }
.pd-flag {
  padding: 11px 13px;
  border: 1px solid var(--line, #2a3431);
  border-left-width: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
}
.pd-flag-ask { border-color: #6b5a2a; background: rgba(255, 209, 102, 0.08); }
.pd-flag-ask b { color: #ffd166; }
.pd-flag p { margin: 6px 0 0; color: var(--muted); font-size: 0.86rem; }
.pd-flag ul { margin: 8px 0 0; padding-left: 18px; }
.pd-flag li { margin: 3px 0; line-height: 1.45; }
.pd-flag summary { cursor: pointer; color: var(--muted); }
.pd-flag-note { font-style: italic; }
.pd-flag-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.84rem; }
.pd-flag-table th, .pd-flag-table td {
  text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line, #2a3431); vertical-align: top;
}
.pd-flag-table th { color: var(--muted); font-weight: 500; }
.pd-flag-table .pdf-num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-flag-table .pdf-why { color: var(--muted); }
.pd-flag-table tr.pdf-notcounted td { opacity: 0.62; }