:root {
  --silver: #e5e5e5;
  --green: #003f1f;
  --black: #000000;
  --white-glass: rgba(229, 229, 229, .12);
  --white-glass-strong: rgba(229, 229, 229, .18);
  --line: rgba(229, 229, 229, .22);
  --soft-line: rgba(229, 229, 229, .12);
  --text: #f4f4f4;
  --muted: rgba(229, 229, 229, .68);
  --shadow: 0 22px 60px rgba(0, 0, 0, .46);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--black); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 63, 31, .95), transparent 25rem),
    radial-gradient(circle at 92% 18%, rgba(229, 229, 229, .09), transparent 18rem),
    linear-gradient(145deg, #000 0%, #03150d 45%, #000 100%);
}

a { color: inherit; text-decoration: none; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px 104px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 16px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  min-height: 58px;
}
.brand-lockup img {
  display: block;
  width: min(220px, 58vw);
  max-height: 62px;
  object-fit: contain;
}

.icon-button,
.back-pill {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(229, 229, 229, .08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  backdrop-filter: blur(18px);
  cursor: pointer;
}
.back-pill {
  width: auto;
  padding: 0 16px;
  color: var(--silver);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--silver);
  box-shadow: 0 0 16px rgba(229, 229, 229, .72);
}

.hero-card,
.memo-card,
.home-menu-card,
.page-title-card,
.menu-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(229, 229, 229, .16), rgba(229, 229, 229, .065));
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.compact-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  margin-bottom: 14px;
}
.eyebrow {
  margin: 0 0 5px;
  color: var(--silver);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 6px;
  font-size: 34px;
  line-height: .95;
  letter-spacing: -.055em;
}
h2 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.04em;
}
p { margin-bottom: 0; color: var(--muted); line-height: 1.45; }
.app-tile-preview {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  border-radius: 21px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .42);
  background: var(--green);
}
.app-tile-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.memo-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 18px;
}
.memo-track { position: relative; min-height: 0; }
.memo-slide {
  display: none;
  position: static;
  padding: 0;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.memo-slide.active {
  display: block;
  animation: memoSlideIn .22s ease both;
}
@keyframes memoSlideIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
.memo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.memo-meta strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(0, 63, 31, .78);
  border: 1px solid var(--soft-line);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.memo-meta time { color: var(--muted); font-size: 12px; font-weight: 800; }
.memo-controls {
  position: static;
  display: flex;
  gap: 7px;
  margin-top: 16px;
  padding-top: 2px;
}
.memo-controls button {
  width: 30px;
  height: 7px;
  border: 0;
  border-radius: 99px;
  background: rgba(229, 229, 229, .25);
  cursor: pointer;
}
.memo-controls button.active { background: var(--silver); box-shadow: 0 0 16px rgba(229, 229, 229, .5); }

.memo-slide h2 { margin-bottom: 10px; }
.memo-slide p { max-width: 100%; }
@media (max-width: 420px) {
  .memo-card { padding: 16px; }
  .memo-meta { align-items: flex-start; }
  .memo-meta time { padding-top: 8px; text-align: right; }
  .memo-slide h2 { font-size: 26px; line-height: 1.05; }
  .memo-slide p { font-size: 15px; line-height: 1.42; }
}

.home-menu { display: grid; gap: 12px; }
.home-menu-card {
  display: block;
  padding: 16px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.home-menu-card:active { transform: scale(.985); }
.home-menu-card:hover {
  border-color: rgba(229, 229, 229, .36);
  background: linear-gradient(145deg, rgba(229, 229, 229, .20), rgba(229, 229, 229, .08));
}
.menu-head {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 13px;
  align-items: center;
}
.pillar-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 18px;
  background: rgba(0, 63, 31, .82);
  border: 1px solid var(--soft-line);
  font-size: 24px;
  box-shadow: inset 0 0 24px rgba(229, 229, 229, .08);
}
.menu-head strong {
  display: block;
  margin-bottom: 4px;
  font-size: 19px;
  letter-spacing: -.03em;
}
.menu-head small,
.menu-tile small { color: var(--muted); line-height: 1.3; }
.chevron { color: var(--silver); font-size: 34px; line-height: 1; opacity: .75; }
.sub-option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.sub-option-grid span {
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--soft-line);
  color: rgba(229, 229, 229, .82);
  font-size: 12px;
  font-weight: 800;
}

.page-title-card { padding: 22px; margin-bottom: 14px; }
.page-title-card h1 { margin-bottom: 8px; }
.page-list { display: grid; gap: 10px; }
.menu-tile {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-tile > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 17px;
  background: rgba(0, 63, 31, .82);
  border: 1px solid var(--soft-line);
}
.menu-tile strong { display: block; margin-bottom: 4px; }

.bottom-nav {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: min(calc(100% - 24px), 500px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: rgba(0, 0, 0, .54);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .52);
  backdrop-filter: blur(22px);
}
.bottom-nav a {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
}
.bottom-nav a.active,
.bottom-nav a:hover {
  background: var(--green);
  color: var(--silver);
  box-shadow: inset 0 0 20px rgba(229, 229, 229, .08);
}

@media (min-width: 820px) {
  .app-shell { width: min(100%, 960px); }
  .brand-lockup img { width: 250px; }
  .home-menu { grid-template-columns: repeat(3, 1fr); }
  .home-menu-card { min-height: 250px; }
  .menu-head { grid-template-columns: 1fr auto; align-items: start; }
  .menu-head .pillar-icon { grid-column: 1 / -1; }
  .sub-option-grid { grid-template-columns: 1fr; }
  .page-list { grid-template-columns: repeat(2, 1fr); }
}

/* Simplified header + popup overlay revision */
.simple-header {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 10px;
  padding: 4px 0 18px;
}
.centered-brand {
  justify-content: center;
  min-height: 58px;
}
.centered-brand img {
  width: min(210px, 54vw);
  margin: 0 auto;
}
.header-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(229, 229, 229, .08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3), inset 0 0 20px rgba(229, 229, 229, .035);
  backdrop-filter: blur(18px);
  cursor: pointer;
}
.header-icon span {
  font-size: 22px;
  line-height: 1;
  color: var(--silver);
}
.quiet-hero { padding: 18px 20px; }
.quiet-hero .hero-copy { max-width: 100%; }
.simplified-card { padding: 18px 16px; }
.simplified-card .menu-head { grid-template-columns: 54px 1fr auto; }
.simplified-card .pillar-icon { width: 54px; height: 54px; }

.overlay-panel {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 16px 16px max(18px, env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.overlay-panel.open {
  opacity: 1;
  pointer-events: auto;
}
.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(8px);
}
.popup-card {
  position: relative;
  width: min(100%, 500px);
  max-height: min(76vh, 640px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 63, 31, .95), transparent 18rem),
    linear-gradient(145deg, rgba(229, 229, 229, .16), rgba(0, 0, 0, .88));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .72);
  backdrop-filter: blur(24px);
  padding: 18px;
  transform: translateY(16px) scale(.98);
  transition: transform .2s ease;
}
.overlay-panel.open .popup-card { transform: translateY(0) scale(1); }
.popup-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.popup-header h2 { margin: 0; }
.popup-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(229, 229, 229, .08);
  color: var(--silver);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.user-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 22px;
  background: rgba(0, 0, 0, .24);
}
.user-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--green);
  border: 1px solid var(--line);
  color: var(--silver);
  font-weight: 950;
  letter-spacing: -.04em;
}
.user-summary strong,
.user-summary small { display: block; }
.user-summary small { color: var(--muted); margin-top: 3px; }
.popup-list { display: grid; gap: 9px; }
.popup-list a,
.popup-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: rgba(229, 229, 229, .075);
  color: var(--text);
  text-align: left;
  font-weight: 850;
  cursor: pointer;
}
.popup-list a::after { content: '›'; color: var(--silver); font-size: 24px; line-height: 1; opacity: .8; }
.popup-list button:hover,
.popup-list a:hover { background: rgba(229, 229, 229, .12); }
.muted-action { color: rgba(229, 229, 229, .62) !important; }

@media (min-width: 820px) {
  .simple-header { grid-template-columns: 56px 1fr 56px; }
  .centered-brand img { width: 240px; }
  .simplified-card { min-height: 190px; }
  .simplified-card .menu-head {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .simplified-card .menu-head .pillar-icon { grid-column: 1 / -1; }
}

/* Resource archive revision */
.expanded-home-menu {
  grid-template-columns: 1fr;
}
.archive-toolbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.archive-toolbar::-webkit-scrollbar { display: none; }
.archive-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: rgba(229, 229, 229, .075);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  cursor: pointer;
}
.archive-chip.active,
.archive-chip:hover {
  background: var(--green);
  color: var(--silver);
  border-color: var(--line);
  box-shadow: inset 0 0 18px rgba(229, 229, 229, .08), 0 10px 26px rgba(0, 0, 0, .28);
}
.archive-grid {
  display: grid;
  gap: 10px;
}
.archive-card {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 92px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(229, 229, 229, .14), rgba(229, 229, 229, .055));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.archive-card:active { transform: scale(.985); }
.archive-card span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 18px;
  background: rgba(0, 63, 31, .82);
  border: 1px solid var(--soft-line);
  font-size: 22px;
}
.archive-card strong { display: block; margin-bottom: 4px; font-size: 16px; }
.archive-card small { display: block; color: var(--muted); line-height: 1.35; }
.archive-card.is-hidden { display: none; }
.resource-archive-hero { margin-bottom: 12px; }

@media (min-width: 820px) {
  .expanded-home-menu { grid-template-columns: repeat(3, 1fr); }
  .expanded-home-menu .simplified-card { min-height: 178px; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Customer CRM demo expansion */
.customer-hero-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.quick-add-btn,
.submit-customer-btn {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--green);
  color: var(--silver);
  box-shadow: inset 0 0 20px rgba(229, 229, 229, .08), 0 14px 34px rgba(0, 0, 0, .32);
  font-weight: 950;
  cursor: pointer;
}
.quick-add-btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 15px;
}
.customer-search-card,
.customer-add-card,
.customer-business-card,
.customer-contact-card,
.customer-summary-grid article {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(229, 229, 229, .14), rgba(229, 229, 229, .055));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
}
.customer-search-card {
  padding: 14px;
  margin-bottom: 12px;
}
.search-field {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: rgba(0, 0, 0, .28);
}
.search-field span { color: var(--silver); font-size: 22px; }
.search-field input,
.customer-form input,
.customer-form select,
.customer-form textarea {
  width: 100%;
  border: 1px solid var(--soft-line);
  border-radius: 15px;
  background: rgba(0, 0, 0, .28);
  color: var(--text);
  outline: none;
}
.search-field input {
  min-height: 48px;
  border: 0;
  background: transparent;
  font-weight: 800;
}
.search-field input::placeholder,
.customer-form input::placeholder,
.customer-form textarea::placeholder { color: rgba(229, 229, 229, .44); }
.customer-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}
.customer-tabs button {
  min-height: 38px;
  border: 1px solid var(--soft-line);
  border-radius: 15px;
  background: rgba(229, 229, 229, .075);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}
.customer-tabs button.active,
.customer-tabs button:hover {
  background: var(--green);
  color: var(--silver);
}
.customer-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.customer-summary-grid article {
  padding: 13px 10px;
  text-align: center;
}
.customer-summary-grid strong {
  display: block;
  font-size: 22px;
  letter-spacing: -.04em;
}
.customer-summary-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.customer-results { display: grid; gap: 11px; margin-bottom: 14px; }
.customer-business-card,
.customer-contact-card { padding: 15px; }
.customer-card-head {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.customer-card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 17px;
  background: rgba(0, 63, 31, .82);
  border: 1px solid var(--soft-line);
  font-size: 21px;
}
.customer-card-head strong { display: block; margin-bottom: 3px; }
.customer-card-head small,
.customer-note,
.contact-line,
.contact-business { color: var(--muted); line-height: 1.35; }
.customer-status {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .26);
  border: 1px solid var(--soft-line);
  color: var(--silver);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.customer-tags,
.contact-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.customer-tags span,
.role-tag,
.demo-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: rgba(229, 229, 229, .075);
  color: rgba(229, 229, 229, .82);
  font-size: 11px;
  font-weight: 850;
}
.contact-list { display: grid; gap: 8px; margin-top: 12px; }
.embedded-contact {
  padding: 11px;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: rgba(0, 0, 0, .22);
}
.embedded-contact strong { display: block; margin-bottom: 5px; }
.role-tag { background: rgba(0, 63, 31, .58); color: var(--silver); }
.contact-actions a {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  color: var(--silver);
  background: rgba(229, 229, 229, .075);
  font-size: 12px;
  font-weight: 900;
}
.empty-results {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 24px;
  color: var(--muted);
  text-align: center;
}
.customer-add-card { padding: 16px; }
.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.section-heading-row h2 { margin-bottom: 0; }
.form-note { margin-bottom: 14px; font-size: 14px; }
.customer-form { display: grid; gap: 13px; }
.form-mode-toggle {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
.form-mode-toggle label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  background: rgba(0, 0, 0, .22);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.form-mode-toggle input { width: auto; accent-color: var(--green); }
.form-section {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--soft-line);
  border-radius: 22px;
  background: rgba(0, 0, 0, .18);
}
.form-section h3 { margin: 0; font-size: 16px; }
.form-grid { display: grid; gap: 10px; }
.customer-form label {
  display: grid;
  gap: 6px;
  color: rgba(229, 229, 229, .78);
  font-size: 12px;
  font-weight: 900;
}
.customer-form input,
.customer-form select,
.customer-form textarea {
  min-height: 44px;
  padding: 10px 11px;
  font-weight: 750;
}
.customer-form select option { background: #03150d; color: var(--silver); }
.customer-form textarea { resize: vertical; min-height: 86px; }
.submit-customer-btn { min-height: 52px; width: 100%; }
.is-soft-hidden { display: none !important; }

@media (min-width: 820px) {
  .customer-results { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .customer-business-card { grid-column: span 1; }
  .form-mode-toggle { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-add-card { padding: 20px; }
}
@media (max-width: 420px) {
  .customer-hero-card { display: grid; }
  .quick-add-btn { width: 100%; }
  .customer-card-head { grid-template-columns: 44px 1fr; }
  .customer-status { grid-column: 1 / -1; justify-self: start; }
  .section-heading-row { display: grid; }
}

/* Simplified Customers directory revision */
.compact-page-title { padding: 18px 20px; }
.compact-page-title h1 { margin: 0 0 6px; }
.customer-directory-card,
.alpha-list-card,
.single-template-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(229, 229, 229, .14), rgba(229, 229, 229, .055));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
}
.customer-directory-card { padding: 14px; margin-bottom: 12px; }
.customer-master-search { margin-bottom: 10px; }
.customer-directory-actions { display: grid; gap: 10px; }
.directory-tabs { margin-top: 0; grid-template-columns: repeat(2, 1fr); }
.create-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.secondary-add { background: rgba(229, 229, 229, .075); }
.alpha-list-card { padding: 16px; }
.list-header-row,
.linked-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.list-header-row h2,
.linked-heading h2 { margin: 0; }
.alpha-list { display: grid; gap: 9px; }
.directory-row {
  display: grid;
  grid-template-columns: 46px 1fr 24px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 20px;
  background: rgba(0, 0, 0, .22);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.directory-row:active { transform: scale(.99); }
.row-icon,
.single-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 17px;
  background: rgba(0, 63, 31, .82);
  border: 1px solid var(--soft-line);
  font-size: 21px;
}
.row-copy strong,
.row-copy small { display: block; }
.row-copy strong { margin-bottom: 4px; }
.row-copy small { color: var(--muted); line-height: 1.3; }
.row-chevron { color: var(--silver); font-size: 28px; opacity: .75; }
.detail-shell { display: grid; gap: 12px; }
.single-template-card { padding: 16px; }
.back-to-list {
  min-height: 42px;
  padding: 0 13px;
  margin-bottom: 14px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  background: rgba(229, 229, 229, .075);
  color: var(--silver);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.single-head {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 13px;
  align-items: center;
  margin-bottom: 14px;
}
.single-head h1 { margin: 0 0 4px; font-size: clamp(26px, 8vw, 40px); line-height: .98; letter-spacing: -.06em; }
.single-head p:not(.eyebrow) { margin: 0; color: var(--muted); }
.single-icon { width: 54px; height: 54px; border-radius: 19px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.detail-grid div,
.detail-block {
  padding: 13px;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: rgba(0, 0, 0, .22);
}
.detail-grid small,
.detail-grid strong { display: block; }
.detail-grid small { color: var(--muted); margin-bottom: 5px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.detail-block { margin-top: 10px; }
.detail-block h2 { margin: 0 0 8px; font-size: 18px; }
.detail-block p { margin: 0; color: var(--muted); line-height: 1.45; }
.detail-actions { margin: 0 0 2px; }
.linked-heading button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--green);
  color: var(--silver);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}
.linked-list { display: grid; gap: 8px; }
.linked-list button {
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  background: rgba(229, 229, 229, .065);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.linked-list button strong,
.linked-list button small { display: block; }
.linked-list button small { color: var(--muted); margin-top: 3px; }
.linked-list button span { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 24px; color: var(--silver); opacity: .75; }
.muted-copy { color: var(--muted); margin: 0; }
.simple-entry-form { display: grid; gap: 10px; }
.simple-entry-form label {
  display: grid;
  gap: 6px;
  color: rgba(229, 229, 229, .78);
  font-size: 12px;
  font-weight: 900;
}
.simple-entry-form input,
.simple-entry-form select,
.simple-entry-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 11px;
  border: 1px solid var(--soft-line);
  border-radius: 15px;
  background: rgba(0, 0, 0, .28);
  color: var(--text);
  outline: none;
  font-weight: 750;
}
.simple-entry-form select option { background: #03150d; color: var(--silver); }
.simple-entry-form textarea { resize: vertical; min-height: 92px; }
@media (min-width: 820px) {
  .customer-app { max-width: 760px; margin: 0 auto; }
  .customer-directory-actions { grid-template-columns: 1fr auto; align-items: center; }
  .create-row { width: 260px; }
  .alpha-list { grid-template-columns: repeat(2, 1fr); }
  .single-template-card { padding: 20px; }
  .simple-entry-form { grid-template-columns: repeat(2, 1fr); }
  .simple-entry-form label:has(textarea), .simple-entry-form .submit-customer-btn { grid-column: 1 / -1; }
}


/* Projects interface revision */
.project-app { max-width: 760px; margin: 0 auto; }
.project-control-card { padding: 14px; margin-bottom: 12px; }
.project-directory-actions { display: grid; gap: 10px; }
.project-new-btn { width: 100%; min-height: 50px; }
.project-tabs { margin: 0; grid-template-columns: repeat(2, 1fr); }
.project-list { display: grid; gap: 10px; }
.project-card {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--soft-line);
  border-radius: 22px;
  background: rgba(0, 0, 0, .22);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.project-card:active { transform: scale(.99); }
.project-card-head { display: grid; grid-template-columns: 46px 1fr 24px; gap: 12px; align-items: center; }
.project-card-head strong { display: block; margin-bottom: 4px; }
.project-card-head small { color: var(--muted); line-height: 1.3; }
.project-status-row { display: flex; flex-wrap: wrap; gap: 7px; }
.status-chip,
.timeline-chip,
.file-chip,
.image-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: rgba(229, 229, 229, .075);
  color: var(--silver);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}
.status-chip.active { background: rgba(0, 63, 31, .72); }
.status-chip.archive { color: rgba(229,229,229,.72); }
.timeline-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.timeline-strip::-webkit-scrollbar { display: none; }
.timeline-chip { flex: 0 0 auto; min-width: 106px; justify-content: center; background: rgba(0, 63, 31, .42); }
.timeline-chip.done { opacity: .62; text-decoration: line-through; }
.project-note-preview { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.project-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.project-meta-grid div,
.timeline-card,
.project-media-card {
  padding: 13px;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: rgba(0, 0, 0, .22);
}
.project-meta-grid small,
.project-meta-grid strong { display: block; }
.project-meta-grid small { color: var(--muted); margin-bottom: 5px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.timeline-card { margin-top: 10px; }
.timeline-card h2,
.project-media-card h2 { margin: 0 0 10px; font-size: 18px; }
.project-timeline { display: grid; gap: 10px; }
.project-timeline button {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  background: rgba(229, 229, 229, .065);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.timeline-dot { width: 13px; height: 13px; border-radius: 99px; background: var(--silver); box-shadow: 0 0 16px rgba(229,229,229,.38); }
.project-timeline button.done .timeline-dot { background: rgba(229,229,229,.35); box-shadow: none; }
.project-timeline strong,
.project-timeline small { display: block; }
.project-timeline small { color: var(--muted); margin-top: 3px; }
.project-timeline time { color: var(--silver); font-size: 11px; font-weight: 950; }
.media-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip,
.image-chip { border-radius: 14px; min-height: 36px; }
.project-empty-art {
  min-height: 74px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--soft-line);
  border-radius: 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}
.project-card .row-chevron { align-self: center; }
@media (min-width: 820px) {
  .project-directory-actions { grid-template-columns: auto 1fr; align-items: center; }
  .project-new-btn { width: 180px; }
  .project-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .project-meta-grid { grid-template-columns: 1fr; }
  .project-card { padding: 13px; }
}

.linked-list .linked-row-anchor {
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  background: rgba(229, 229, 229, .065);
  color: var(--text);
  text-align: left;
}
.linked-list .linked-row-anchor strong,
.linked-list .linked-row-anchor small { display: block; }
.linked-list .linked-row-anchor small { color: var(--muted); margin-top: 3px; }
.linked-list .linked-row-anchor span { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 24px; color: var(--silver); opacity: .75; }

/* Projects visual refinement: align with the simpler glass directory style */
.project-app .compact-page-title {
  padding: 18px 20px;
  margin-bottom: 12px;
}
.project-app .compact-page-title h1 {
  font-size: clamp(34px, 10vw, 48px);
}
.project-app .compact-page-title p {
  max-width: 58ch;
}
.project-control-card,
.project-list-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(229, 229, 229, .14), rgba(229, 229, 229, .055));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
}
.project-new-btn {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(0, 63, 31, .96), rgba(0, 36, 18, .92));
  box-shadow: inset 0 1px 0 rgba(229,229,229,.16), 0 18px 36px rgba(0,0,0,.30);
}
.project-tabs button {
  min-height: 46px;
  border-radius: 16px;
}
.project-list-card {
  padding: 16px;
}
.project-list-card .list-header-row {
  align-items: center;
}
.project-card {
  position: relative;
  overflow: hidden;
  padding: 13px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 63, 31, .42), transparent 12rem),
    rgba(0, 0, 0, .24);
  box-shadow: inset 0 1px 0 rgba(229,229,229,.08);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.project-card:hover {
  border-color: rgba(229,229,229,.22);
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 63, 31, .55), transparent 12rem),
    rgba(0, 0, 0, .30);
}
.project-card-head {
  grid-template-columns: 46px minmax(0,1fr) 22px;
}
.project-card .row-icon,
.project-detail-icon {
  background: linear-gradient(145deg, rgba(0,63,31,.98), rgba(0,26,13,.92));
  box-shadow: inset 0 1px 0 rgba(229,229,229,.12), 0 12px 24px rgba(0,0,0,.26);
}
.project-card .row-copy strong {
  font-size: 15px;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.project-card .row-copy small {
  font-size: 12px;
}
.project-status-row {
  gap: 6px;
}
.status-chip,
.timeline-chip,
.file-chip,
.image-chip {
  min-height: 26px;
  padding: 6px 9px;
  background: rgba(229, 229, 229, .07);
  box-shadow: inset 0 1px 0 rgba(229,229,229,.08);
}
.status-chip.active,
.timeline-chip:not(.done) {
  background: rgba(0, 63, 31, .72);
}
.timeline-strip {
  margin: 0 -2px;
  padding: 1px 2px 3px;
}
.timeline-chip {
  min-width: auto;
  white-space: nowrap;
  max-width: 100%;
}
.project-note-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
}
.project-meta-grid div,
.timeline-card,
.project-media-card,
.project-app .detail-block {
  background:
    linear-gradient(145deg, rgba(229, 229, 229, .09), rgba(229, 229, 229, .035)),
    rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(229,229,229,.07);
}
.project-meta-grid div {
  min-height: 72px;
}
.project-meta-grid strong {
  font-size: 16px;
  line-height: 1.12;
}
.timeline-card,
.project-media-card,
.project-app .detail-block {
  margin-top: 10px;
  border-radius: 20px;
}
.project-timeline button,
.linked-list .linked-row-anchor {
  border-radius: 17px;
  background: rgba(0,0,0,.20);
  box-shadow: inset 0 1px 0 rgba(229,229,229,.06);
}
.project-timeline button {
  grid-template-columns: 16px minmax(0,1fr) auto;
}
.timeline-dot {
  width: 11px;
  height: 11px;
  background: var(--green);
  border: 2px solid var(--silver);
}
.media-chip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.file-chip,
.image-chip {
  justify-content: flex-start;
  width: 100%;
  border-radius: 16px;
  min-height: 42px;
  background: rgba(0,0,0,.20);
}
.project-empty-art {
  background: rgba(0,0,0,.16);
}
@media (min-width: 640px) {
  .media-chip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 820px) {
  .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .project-app .compact-page-title { padding: 16px; }
  .project-list-card { padding: 14px; }
  .project-card { gap: 10px; }
  .project-status-row .status-chip { font-size: 10px; }
  .project-timeline time { align-self: start; }
}

/* Install-to-home-screen controls */
.home-install-cta,
.install-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  margin-top: 16px;
  padding: 0;
  border: 1px solid rgba(229, 229, 229, .28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(229,229,229,.2), rgba(0,63,31,.72));
  color: var(--silver);
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 42px rgba(0,0,0,.38), inset 0 0 18px rgba(229,229,229,.08);
  backdrop-filter: blur(16px);
  cursor: pointer;
}
.home-install-cta span,
.install-action span,
.install-menu-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
}
.install-menu-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  color: var(--silver) !important;
  border-color: rgba(229, 229, 229, .28) !important;
  background: rgba(0, 63, 31, .44) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}
.install-card { max-width: 520px; }
.install-preview {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 24px;
  background: rgba(0,0,0,.28);
}
.install-preview img {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(229,229,229,.26);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.install-preview strong,
.install-preview small { display: block; }
.install-preview small { color: var(--muted); margin-top: 3px; }
.install-steps {
  padding: 14px;
  margin-top: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 24px;
  background: rgba(229,229,229,.055);
}
.install-platform {
  margin: 0 0 8px;
  color: var(--silver);
  font-weight: 950;
  letter-spacing: -.03em;
}
.install-steps ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}
.install-steps li { margin: 7px 0; }
.install-steps p:not(.install-platform) {
  margin: 0 0 12px;
  color: var(--muted);
}
.install-note {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
body.is-ios .android-steps { display: none; }
body:not(.is-ios) .ios-steps { display: none; }
@media (max-width: 430px) {
  .home-install-cta { width: 100%; }
  .install-card { border-radius: 28px; }
}

/* Branded install tile — no generic icon, no visible words */
.home-install-cta.brand-install-icon,
.install-menu-button.brand-install-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(229, 229, 229, .32) !important;
  background: rgba(0, 0, 0, .38) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.42), inset 0 0 18px rgba(229,229,229,.08) !important;
  backdrop-filter: blur(16px) !important;
  cursor: pointer !important;
}
.home-install-cta.brand-install-icon img,
.install-menu-button.brand-install-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 16px !important;
}
.home-install-cta.brand-install-icon:active,
.install-menu-button.brand-install-icon:active {
  transform: scale(.96);
}
body.is-standalone .home-install-cta.brand-install-icon,
body.is-standalone .install-menu-button.brand-install-icon {
  display: none !important;
}
@media (max-width: 430px) {
  .home-install-cta.brand-install-icon {
    width: 54px !important;
    max-width: 54px !important;
  }
}


/* Announcement push notification demo */
.notification-test-card {
  display: grid;
  gap: 16px;
  margin: 14px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(229, 229, 229, .16), rgba(229, 229, 229, .065));
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.notification-test-card h2 { margin-bottom: 8px; }
.test-notification-button {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(229, 229, 229, .3);
  border-radius: 20px;
  color: var(--black);
  background: var(--silver);
  font-weight: 950;
  letter-spacing: -.02em;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .34), inset 0 0 18px rgba(255,255,255,.34);
}
.test-notification-button:active { transform: scale(.985); }
.notification-status {
  min-height: 18px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

/* Broadcast push controls */
.push-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.test-notification-button.secondary {
  color: var(--silver);
  background: rgba(229, 229, 229, .08);
  border-color: rgba(229, 229, 229, .22);
  box-shadow: inset 0 0 20px rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.28);
}
@media (min-width: 620px) {
  .push-action-grid { grid-template-columns: 1fr 1fr; }
}


/* Simple shared resource directory */
.resource-directory-hero { margin-bottom: 12px; }
.directory-search-card {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(229, 229, 229, .13), rgba(229, 229, 229, .052));
  box-shadow: 0 18px 46px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
}
.directory-search-card label {
  display: block;
  margin-bottom: 10px;
  color: var(--silver);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.directory-search-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  min-height: 52px;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  padding: 0 12px;
}
.directory-search-row span {
  color: rgba(229,229,229,.72);
  font-size: 19px;
}
.directory-search-row input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}
.directory-search-row input::placeholder { color: rgba(229,229,229,.46); }
.directory-note {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.resource-directory {
  display: grid;
  gap: 12px;
}
.folder-section {
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(229,229,229,.13), rgba(229,229,229,.052));
  box-shadow: 0 18px 46px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.folder-heading {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 0;
  background: rgba(0,63,31,.32);
  cursor: pointer;
  text-align: left;
}
.folder-heading .folder-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 17px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--soft-line);
  font-size: 20px;
}
.folder-heading strong { display: block; font-size: 16px; }
.folder-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.25; }
.folder-heading b { color: rgba(229,229,229,.7); font-size: 18px; transition: transform .18s ease; }
.folder-section.collapsed .folder-heading b { transform: rotate(-90deg); }
.folder-section.collapsed .folder-files { display: none; }
.folder-files {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.file-row {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 8px;
  align-items: stretch;
}
.file-main {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 20px;
  background: rgba(0,0,0,.22);
}
.file-main:active,
.share-file:active { transform: scale(.985); }
.file-type {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(229,229,229,.1);
  border: 1px solid var(--soft-line);
  color: var(--silver);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
}
.file-main strong { display: block; margin-bottom: 3px; font-size: 14px; }
.file-main small { display: block; color: var(--muted); font-size: 12px; line-height: 1.25; }
.share-file {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(229,229,229,.09);
  color: var(--silver);
  font-size: 20px;
  cursor: pointer;
}
.file-row.is-hidden { display: none; }
.folder-section.is-empty { display: none; }
.empty-resource-state {
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid var(--soft-line);
  border-radius: 22px;
  color: var(--muted);
  background: rgba(0,0,0,.22);
  text-align: center;
}

@media (min-width: 820px) {
  .resource-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-search-card { padding: 18px; }
}

/* Deck Takeoff guided workflow */
.takeoff-wide { width: min(100%, 900px); }
.glass-card,
.deck-panel,
.summary-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(229,229,229,.14), rgba(229,229,229,.055));
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.glass-card-lite {
  border: 1px solid var(--soft-line);
  border-radius: 22px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}
.deck-title-card { position: relative; }
.mini-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--silver);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .86;
}
.deck-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  margin-bottom: 12px;
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 9;
}
.deck-stepper button {
  display: grid;
  gap: 5px;
  place-items: center;
  min-height: 58px;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  cursor: pointer;
}
.deck-stepper button span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(229,229,229,.1);
  color: var(--silver);
  font-size: 12px;
  font-weight: 950;
}
.deck-stepper button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.deck-stepper button.active {
  border-color: rgba(229,229,229,.46);
  background: linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.25));
  box-shadow: inset 0 0 24px rgba(229,229,229,.08), 0 16px 36px rgba(0,0,0,.28);
}
.deck-stepper button.active span { background: rgba(229,229,229,.24); }
.deck-grid { display: grid; gap: 12px; }
.deck-panel { display: none; padding: 16px; }
.deck-panel.active { display: block; animation: memoSlideIn .2s ease both; }
.panel-head { margin-bottom: 14px; }
.panel-head h2 { font-size: 28px; margin-bottom: 8px; }
.deck-form { display: grid; gap: 10px; }
.deck-form label,
.dimension-grid label {
  display: grid;
  gap: 6px;
  color: var(--silver);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.deck-form input,
.deck-form select,
.deck-form textarea,
.dimension-grid input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  outline: 0;
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
.deck-form select option { background: #03150d; color: var(--silver); }
.deck-form textarea { min-height: 92px; resize: vertical; }
.deck-form .full { grid-column: 1 / -1; }

.deck-options-grid {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
}
.deck-options-grid label {
  display: grid;
  gap: 6px;
  color: var(--silver);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.deck-options-grid select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  outline: 0;
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 850;
  text-transform: none;
  letter-spacing: 0;
}
.deck-options-grid select option { background: #03150d; color: var(--silver); }
.deck-board.orientation-parallel {
  background:
    repeating-linear-gradient(0deg, rgba(229,229,229,.10) 0 4px, transparent 4px 18px),
    linear-gradient(rgba(229,229,229,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(0,63,31,.58), rgba(0,0,0,.18));
  background-size: auto, 28px 28px, 28px 28px, auto;
}
.deck-board.orientation-perpendicular {
  background:
    repeating-linear-gradient(90deg, rgba(229,229,229,.10) 0 4px, transparent 4px 18px),
    linear-gradient(rgba(229,229,229,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(0,63,31,.58), rgba(0,0,0,.18));
  background-size: auto, 28px 28px, 28px 28px, auto;
}
.deck-board.orientation-diagonal {
  background:
    repeating-linear-gradient(45deg, rgba(229,229,229,.12) 0 4px, transparent 4px 18px),
    linear-gradient(rgba(229,229,229,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(0,63,31,.58), rgba(0,0,0,.18));
  background-size: auto, 28px 28px, 28px 28px, auto;
}
.deck-board.has-picture-frame::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 8px solid rgba(229,229,229,.38);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 28px rgba(0,0,0,.22);
  pointer-events: none;
  z-index: 1;
}
.deck-board.has-double-frame::after {
  content: '';
  position: absolute;
  inset: 34px;
  border: 5px solid rgba(229,229,229,.22);
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}
.deck-shape em {
  display: block;
  margin-top: 3px;
  color: rgba(229,229,229,.72);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.summary-micro {
  margin-top: 6px;
  color: rgba(229,229,229,.62) !important;
  font-size: 12px !important;
}
@media (min-width: 720px) {
  .deck-options-grid { grid-template-columns: repeat(2, 1fr); }
}

.builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.builder-actions button,
.brand-toggle button,
.finish-folder,
.deck-nav-action {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(229,229,229,.09);
  color: var(--silver);
  padding: 0 13px;
  font-weight: 950;
  cursor: pointer;
}
.builder-actions button:active,
.brand-toggle button:active,
.finish-folder:active { transform: scale(.985); }
.deck-builder-shell {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 10px;
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 30px rgba(229,229,229,.045);
}
.deck-board {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--soft-line);
  background:
    linear-gradient(rgba(229,229,229,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(0,63,31,.58), rgba(0,0,0,.18));
  background-size: 28px 28px, 28px 28px, auto;
  touch-action: none;
}
.grid-label {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: rgba(229,229,229,.38);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.deck-shape {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229,229,229,.58);
  background: linear-gradient(145deg, rgba(229,229,229,.24), rgba(0,63,31,.62));
  box-shadow: 0 12px 30px rgba(0,0,0,.34), inset 0 0 30px rgba(229,229,229,.08);
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  text-align: center;
  cursor: grab;
  user-select: none;
}
.deck-shape.deck-rect { border-radius: 14px; }
.deck-shape.rail-line {
  height: 12px !important;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(229,229,229,.72), rgba(0,63,31,.86));
}
.deck-shape.selected { outline: 2px solid var(--silver); outline-offset: 3px; }
.selected-editor { margin-top: 12px; padding: 13px; }
.selected-editor strong { display: block; margin-bottom: 3px; }
.selected-editor small { display: block; color: var(--muted); margin-bottom: 12px; }
.dimension-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.brand-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.brand-toggle button.active,
.finish-folder.active {
  background: linear-gradient(145deg, rgba(0,63,31,.9), rgba(229,229,229,.1));
  border-color: rgba(229,229,229,.45);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}
.finish-folder-grid { display: grid; gap: 10px; margin-bottom: 12px; }
.finish-folder {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  align-items: center;
  text-align: left;
  padding: 10px;
}
.finish-folder span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--soft-line);
}
.finish-folder strong { display: block; margin-bottom: 2px; }
.finish-folder small { display: block; color: var(--muted); line-height: 1.25; }
.finish-preview { padding: 15px; }
.finish-preview h3 { margin: 0 0 6px; font-size: 20px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.swatch-pill {
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(0,0,0,.24);
  color: var(--silver);
  font-size: 12px;
  font-weight: 850;
}
.check-card-list { display: grid; gap: 8px; margin-top: 5px; }
.check-card-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid var(--soft-line);
  border-radius: 15px;
  background: rgba(0,0,0,.2);
  padding: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.check-card-list input { width: auto; min-height: auto; accent-color: var(--green); }
.summary-card { padding: 16px; display: grid; gap: 12px; }
.summary-block {
  border: 1px solid var(--soft-line);
  border-radius: 20px;
  background: rgba(0,0,0,.2);
  padding: 13px;
}
.summary-block h3 { margin: 0 0 8px; font-size: 16px; }
.summary-block p,
.summary-block li { color: var(--muted); font-size: 14px; line-height: 1.45; }
.summary-list { margin: 0; padding-left: 18px; }
@media (min-width: 720px) {
  .deck-form { grid-template-columns: repeat(2, 1fr); }
  .finish-folder-grid { grid-template-columns: repeat(2, 1fr); }
  .deck-board { min-height: 420px; }
}
@media (max-width: 420px) {
  .takeoff-wide { padding-left: 12px; padding-right: 12px; }
  .deck-stepper { gap: 6px; padding: 8px; }
  .deck-stepper button { min-height: 50px; border-radius: 15px; }
  .deck-stepper button span { width: 24px; height: 24px; }
  .deck-stepper button small { font-size: 9px; }
  .panel-head h2 { font-size: 24px; }
  .deck-board { min-height: 300px; }
}

/* Deck takeoff v3: board direction and picture frame are controlled per deck rectangle. */
.deck-shape.deck-rect.orientation-parallel {
  background:
    repeating-linear-gradient(0deg, rgba(229,229,229,.16) 0 3px, transparent 3px 14px),
    linear-gradient(145deg, rgba(229,229,229,.22), rgba(0,63,31,.66));
}
.deck-shape.deck-rect.orientation-perpendicular {
  background:
    repeating-linear-gradient(90deg, rgba(229,229,229,.16) 0 3px, transparent 3px 14px),
    linear-gradient(145deg, rgba(229,229,229,.22), rgba(0,63,31,.66));
}
.deck-shape.deck-rect.orientation-diagonal {
  background:
    repeating-linear-gradient(45deg, rgba(229,229,229,.18) 0 3px, transparent 3px 14px),
    linear-gradient(145deg, rgba(229,229,229,.22), rgba(0,63,31,.66));
}
.deck-shape.deck-rect.has-picture-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 5px solid rgba(229,229,229,.48);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.38), 0 0 18px rgba(0,0,0,.2);
  pointer-events: none;
  z-index: 1;
}
.deck-shape.deck-rect.has-double-frame::after {
  content: '';
  position: absolute;
  inset: 20px;
  border: 3px solid rgba(229,229,229,.28);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.deck-shape span,
.deck-shape em {
  position: relative;
  z-index: 2;
}
.selected-deck-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.selected-deck-controls[hidden] { display: none !important; }
.selected-deck-controls label {
  display: grid;
  gap: 6px;
  color: var(--silver);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.selected-deck-controls select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  outline: 0;
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 850;
  text-transform: none;
  letter-spacing: 0;
}
.selected-deck-controls select option { background: #03150d; color: var(--silver); }
@media (min-width: 720px) {
  .selected-deck-controls { grid-template-columns: repeat(2, 1fr); }
}


/* Deck takeoff v4: stair runs are separate selectable layout items. */
.deck-shape.stair-run {
  border-radius: 14px;
  border-color: rgba(229,229,229,.64);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 18px, rgba(229,229,229,.34) 18px 20px),
    linear-gradient(145deg, rgba(229,229,229,.28), rgba(0,63,31,.74));
}
.deck-shape.stair-run.stair-left,
.deck-shape.stair-run.stair-right {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.0) 0 18px, rgba(229,229,229,.34) 18px 20px),
    linear-gradient(145deg, rgba(229,229,229,.28), rgba(0,63,31,.74));
}
.deck-shape.stair-run::after {
  content: '↧';
  position: absolute;
  right: 6px;
  bottom: 4px;
  color: rgba(229,229,229,.78);
  font-size: 15px;
  font-weight: 950;
}
.deck-shape.stair-run.stair-up::after { content: '↥'; top: 4px; bottom: auto; }
.deck-shape.stair-run.stair-left::after { content: '↤'; right: auto; left: 6px; bottom: 50%; transform: translateY(50%); }
.deck-shape.stair-run.stair-right::after { content: '↦'; bottom: 50%; transform: translateY(50%); }
.selected-stair-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.selected-stair-controls[hidden] { display: none !important; }
.selected-stair-controls label {
  display: grid;
  gap: 6px;
  color: var(--silver);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.selected-stair-controls select,
.selected-stair-controls input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  outline: 0;
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 850;
  text-transform: none;
  letter-spacing: 0;
}
.selected-stair-controls select option { background: #03150d; color: var(--silver); }
@media (min-width: 720px) {
  .selected-stair-controls { grid-template-columns: repeat(2, 1fr); }
}


/* Deck takeoff v5: blueprint drawing mode, square deck sections, and +/-45° section orientation. */
.deck-builder-shell {
  border-radius: 18px;
  border-color: rgba(229,229,229,.34);
  background:
    linear-gradient(145deg, rgba(0,16,36,.86), rgba(0,31,63,.50)),
    #00172d;
  box-shadow: inset 0 0 0 1px rgba(229,229,229,.08), inset 0 0 42px rgba(0,0,0,.42), 0 20px 46px rgba(0,0,0,.34);
}
.deck-board {
  border-radius: 0;
  border: 1px solid rgba(229,229,229,.42);
  background-color: #061e3a;
  background-image:
    linear-gradient(rgba(229,229,229,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.16) 1px, transparent 1px),
    linear-gradient(rgba(229,229,229,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 35%, rgba(0,63,31,.24), rgba(0,0,0,.18));
  background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px, auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 45px rgba(0,0,0,.36);
}
.deck-board::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(229,229,229,.18) calc(100% - 1px)),
    linear-gradient(transparent calc(100% - 1px), rgba(229,229,229,.18) calc(100% - 1px));
  background-size: 70px 70px;
  opacity: .35;
  pointer-events: none;
}
.grid-label {
  color: rgba(229,229,229,.56);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.deck-shape {
  border-radius: 0 !important;
  border: 2px solid rgba(229,229,229,.86);
  background: rgba(0,63,31,.38);
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.38);
  color: #f2f2f2;
}
.deck-shape.deck-rect {
  border-radius: 0 !important;
  outline-offset: 0;
}
.deck-shape.deck-rect.orientation-parallel {
  background:
    repeating-linear-gradient(0deg, rgba(229,229,229,.55) 0 2px, transparent 2px 13px),
    rgba(0,63,31,.34);
}
.deck-shape.deck-rect.orientation-perpendicular {
  background:
    repeating-linear-gradient(90deg, rgba(229,229,229,.55) 0 2px, transparent 2px 13px),
    rgba(0,63,31,.34);
}
.deck-shape.deck-rect.orientation-diagonal,
.deck-shape.deck-rect.orientation-diagonal-pos {
  background:
    repeating-linear-gradient(45deg, rgba(229,229,229,.58) 0 2px, transparent 2px 14px),
    rgba(0,63,31,.34);
}
.deck-shape.deck-rect.orientation-diagonal-neg {
  background:
    repeating-linear-gradient(-45deg, rgba(229,229,229,.58) 0 2px, transparent 2px 14px),
    rgba(0,63,31,.34);
}
.deck-shape.deck-rect.has-picture-frame::before {
  inset: 7px;
  border: 4px solid rgba(229,229,229,.9);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.54);
}
.deck-shape.deck-rect.has-double-frame::after {
  inset: 18px;
  border: 3px solid rgba(229,229,229,.62);
  border-radius: 0;
}
.deck-shape.selected {
  outline: 2px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(0,63,31,.78), 0 18px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(0,0,0,.42);
}
.deck-shape.rail-line {
  border-radius: 0 !important;
  height: 10px !important;
  background: rgba(229,229,229,.82);
  border-color: rgba(229,229,229,.95);
}
.deck-shape.stair-run {
  border-radius: 0 !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(229,229,229,.76) 17px 19px),
    rgba(0,63,31,.36);
}
.deck-shape.stair-run.stair-left,
.deck-shape.stair-run.stair-right {
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(229,229,229,.76) 17px 19px),
    rgba(0,63,31,.36);
}
.deck-shape span,
.deck-shape em {
  text-shadow: 0 1px 3px rgba(0,0,0,.82);
}
.selected-editor {
  border-radius: 14px;
}

/* Deck takeoff v6: full-screen blueprint builder mode. */
.builder-fullscreen-btn {
  min-width: 50px;
  font-size: 18px;
  line-height: 1;
}
body.deck-builder-fullscreen {
  overflow: hidden;
  background: #00172d;
}
body.deck-builder-fullscreen .app-shell.takeoff-wide {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
}
body.deck-builder-fullscreen .simple-header,
body.deck-builder-fullscreen .deck-title-card,
body.deck-builder-fullscreen .deck-stepper,
body.deck-builder-fullscreen .bottom-nav {
  display: none !important;
}
body.deck-builder-fullscreen [data-deck-app],
body.deck-builder-fullscreen .deck-grid {
  width: 100%;
  height: 100dvh;
}
body.deck-builder-fullscreen .deck-panel {
  display: none !important;
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid !important;
  grid-template-columns: 282px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(circle at 82% 20%, rgba(0,63,31,.28), transparent 36%),
    linear-gradient(145deg, #00172d, #020806 72%);
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .panel-head {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(229,229,229,.18);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .panel-head h2 {
  font-size: 22px;
  margin-bottom: 4px;
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .panel-head p:last-child {
  font-size: 12px;
  line-height: 1.35;
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-actions {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(229,229,229,.18);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-actions button {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-editor {
  grid-column: 1;
  grid-row: 3;
  align-self: stretch;
  min-height: 0;
  overflow: auto;
  margin: 0;
  border-radius: 0;
  border-color: rgba(229,229,229,.18);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .dimension-grid,
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-deck-controls,
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-stair-controls {
  grid-template-columns: 1fr;
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-builder-shell {
  grid-column: 2;
  grid-row: 1 / 4;
  min-height: 0;
  height: 100%;
  padding: 12px;
  border-radius: 0;
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-board {
  width: 100%;
  height: 100%;
  min-height: 0;
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .grid-label::before {
  content: 'full screen · ';
}

@media (max-width: 719px) {
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] {
    display: block !important;
    padding: max(8px, env(safe-area-inset-top)) 8px calc(250px + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .panel-head {
    display: none;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-builder-shell {
    width: 100%;
    height: calc(100dvh - 260px - env(safe-area-inset-bottom));
    min-height: 330px;
    padding: 8px;
    border-radius: 0;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-board {
    height: 100%;
    min-height: 0;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-editor {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 91;
    max-height: 165px;
    overflow: auto;
    margin: 0;
    padding: 11px;
    border-radius: 16px;
    border: 1px solid rgba(229,229,229,.2);
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(22px);
    box-shadow: 0 18px 44px rgba(0,0,0,.42);
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-editor small {
    margin-bottom: 8px;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .dimension-grid,
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-deck-controls,
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-stair-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-deck-controls label,
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-stair-controls label {
    font-size: 9px;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-deck-controls select,
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-stair-controls select,
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .selected-stair-controls input,
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .dimension-grid input {
    min-height: 40px;
    border-radius: 12px;
    font-size: 12px;
    padding: 8px;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-actions {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 92;
    display: grid;
    grid-template-columns: repeat(5, minmax(66px, 1fr));
    gap: 7px;
    margin: 0;
    padding: 8px;
    overflow-x: auto;
    border: 1px solid rgba(229,229,229,.2);
    border-radius: 18px;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(22px);
    box-shadow: 0 18px 44px rgba(0,0,0,.46);
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-actions button {
    min-height: 48px;
    padding: 0 8px;
    border-radius: 14px;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Deck takeoff v7: snap grid, resizable sections, and rail-edge snapping. */
.deck-board {
  background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px, auto;
}
.grid-label::after {
  content: ' · 1 ft grid · snap-to-foot · drag rails to edges';
}
.deck-shape {
  touch-action: none;
}
.deck-shape.is-attached {
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.38);
}
.deck-shape.rail-line {
  display: grid;
  place-items: center;
  min-width: 10px;
  min-height: 10px;
  background: rgba(229,229,229,.9);
  color: #061e3a;
}
.deck-shape.rail-line.rail-vertical {
  width: 10px !important;
  min-width: 10px;
}
.deck-shape.rail-line.rail-vertical span,
.deck-shape.rail-line.rail-vertical em {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
}
.deck-shape.rail-line em {
  color: rgba(6,30,58,.72);
  text-shadow: none;
}
.deck-shape .resize-handle {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 20px;
  height: 20px;
  border-left: 2px solid rgba(255,255,255,.78);
  border-top: 2px solid rgba(255,255,255,.78);
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.9) 49% 55%, transparent 56% 100%),
    rgba(0,0,0,.38);
  cursor: nwse-resize;
  z-index: 5;
}
.deck-shape.deck-rect .framing-layer {
  position: absolute;
  inset: 0;
  opacity: .42;
  z-index: 0;
  pointer-events: none;
}
.deck-shape.deck-rect.orientation-parallel .framing-layer,
.deck-shape.deck-rect.orientation-diagonal-pos .framing-layer,
.deck-shape.deck-rect.orientation-diagonal-neg .framing-layer {
  background: repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.58) 24px 26px);
}
.deck-shape.deck-rect.orientation-perpendicular .framing-layer {
  background: repeating-linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.58) 24px 26px);
}
.deck-shape.deck-rect span,
.deck-shape.deck-rect em {
  z-index: 3;
  max-width: calc(100% - 26px);
}
.deck-shape.stair-run .resize-handle {
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.9) 49% 55%, transparent 56% 100%),
    rgba(0,63,31,.72);
}
body.deck-builder-fullscreen .deck-shape .resize-handle {
  width: 26px;
  height: 26px;
}
@media (max-width: 520px) {
  .grid-label::after { content: ' · 1 ft grid'; }
  .deck-shape .resize-handle { width: 24px; height: 24px; }
  .deck-shape span { font-size: 10px; }
  .deck-shape em { font-size: 8px; }
}

/* Deck takeoff v8: individual delete controls and per-section elevation. */
.selected-action-row {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 4px;
}
.danger-lite {
  border: 1px solid rgba(229,229,229,.22);
  background: rgba(0,0,0,.34);
  color: #f3f3f3;
  border-radius: 13px;
  padding: 10px 12px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.danger-lite:hover,
.danger-lite:focus-visible {
  border-color: rgba(229,229,229,.58);
  background: rgba(70,0,0,.38);
}
.deck-shape .shape-delete {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229,229,229,.55);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  z-index: 8;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
}
.deck-shape.rail-line .shape-delete {
  top: -24px;
  right: -4px;
}
.deck-shape.stair-run .shape-delete {
  background: rgba(0,63,31,.82);
}
.deck-shape .shape-delete:hover {
  background: rgba(80,0,0,.78);
}
@media (max-width: 520px) {
  .selected-action-row { justify-content: stretch; }
  .selected-action-row .danger-lite { width: 100%; }
  .deck-shape .shape-delete { width: 24px; height: 24px; font-size: 16px; }
}

/* Deck takeoff v9: linked deck elevations and auto stair prompts. */
.stair-suggestion {
  position: absolute;
  z-index: 12;
  min-width: 112px;
  min-height: 44px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 7px 9px;
  border: 1px solid rgba(229,229,229,.72);
  border-radius: 0;
  background: rgba(0,0,0,.68);
  color: #f5f5f5;
  box-shadow: 0 14px 32px rgba(0,0,0,.36), inset 0 0 0 1px rgba(0,63,31,.72);
  backdrop-filter: blur(16px);
  cursor: pointer;
  touch-action: manipulation;
}
.stair-suggestion::before,
.stair-suggestion::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 22px;
  background: rgba(229,229,229,.58);
  transform: translateX(-50%);
  pointer-events: none;
}
.stair-suggestion::before { top: -22px; }
.stair-suggestion::after { bottom: -22px; }
.stair-suggestion strong {
  display: block;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.stair-suggestion small {
  display: block;
  font-size: 9px;
  line-height: 1.1;
  color: rgba(229,229,229,.76);
  white-space: nowrap;
}
.stair-suggestion:hover,
.stair-suggestion:focus-visible {
  background: rgba(0,63,31,.86);
  outline: 2px solid rgba(255,255,255,.62);
  outline-offset: 2px;
}
.deck-shape.stair-run span {
  max-width: calc(100% - 28px);
}
@media (max-width: 520px) {
  .stair-suggestion {
    min-width: 98px;
    min-height: 40px;
    padding: 6px 8px;
  }
  .stair-suggestion strong { font-size: 10px; }
  .stair-suggestion small { font-size: 8px; }
}

/* Deck takeoff v10: stair validation warnings for linked platforms. */
.deck-shape.stair-run.invalid-stair {
  border-color: rgba(255,72,72,.98) !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,210,210,.82) 17px 19px),
    rgba(130,0,0,.62) !important;
  box-shadow: 0 0 0 2px rgba(255,0,0,.28), 0 14px 32px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.18) !important;
}
.deck-shape.stair-run.invalid-stair.stair-left,
.deck-shape.stair-run.invalid-stair.stair-right {
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(255,210,210,.82) 17px 19px),
    rgba(130,0,0,.62) !important;
}
.deck-shape.stair-run.invalid-stair::before {
  content: 'STAIR CHECK';
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 7;
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}
.deck-shape.stair-run.invalid-stair em {
  color: #fff;
}


/* Deck takeoff v11: simplified feature details and seam-based stair add button. */
.deck-shape.deck-rect .framing-layer { display: none !important; }
.selected-detail-panel {
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgba(229,229,229,.14);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.detail-kicker {
  margin-bottom: 8px;
  color: rgba(229,229,229,.68);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.detail-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.detail-pill-row span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(229,229,229,.16);
  background: rgba(229,229,229,.06);
  color: #f4f4f4;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.detail-empty,
.detail-warning {
  margin: 0;
  color: rgba(229,229,229,.72);
  font-size: 12px;
  line-height: 1.35;
}
.detail-warning {
  margin-top: 8px;
  color: #fff;
  background: rgba(120,0,0,.45);
  border: 1px solid rgba(255,88,88,.42);
  padding: 8px;
}
.stair-suggestion {
  min-width: 30px !important;
  width: 30px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(229,229,229,.74) !important;
  background: rgba(0,63,31,.94) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.34), 0 0 0 3px rgba(0,63,31,.22) !important;
  backdrop-filter: blur(10px);
}
.stair-suggestion span {
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}
.stair-suggestion strong,
.stair-suggestion small { display: none !important; }
.stair-suggestion::before,
.stair-suggestion::after { display: none !important; }
.stair-suggestion:hover,
.stair-suggestion:focus-visible {
  background: rgba(0,93,45,.98) !important;
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .stair-suggestion {
    min-width: 34px !important;
    width: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
  }
  .stair-suggestion span { font-size: 24px; }
}


/* Deck takeoff v12: true 1-foot blueprint grid alignment. Minor grid = 1 ft; major grid = 5 ft. */
.deck-board {
  background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px, auto;
}

/* Deck takeoff v13: compact object labels and 3 ft landing support. */
.deck-shape.is-compact-shape {
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}
.deck-shape.is-compact-shape > span:not(.shape-compact-label),
.deck-shape.is-compact-shape > em {
  display: none !important;
}
.deck-shape .shape-compact-label {
  display: inline-grid;
  place-items: center;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  max-width: 100%;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  pointer-events: none;
}
.deck-shape .shape-info {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229,229,229,.62);
  background: rgba(0,63,31,.88);
  color: #fff;
  font-style: normal;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  z-index: 9;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(0,0,0,.32);
}
.deck-shape .shape-info:hover,
.deck-shape .shape-info:focus-visible {
  background: rgba(0,93,45,.98);
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 1px;
}
.deck-shape.is-compact-shape .shape-delete {
  right: -10px;
  top: -10px;
}
.deck-shape.is-compact-shape .resize-handle {
  width: 16px;
  height: 16px;
}
@media (max-width: 520px) {
  .deck-shape .shape-info {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
  .deck-shape.is-compact-shape .shape-delete {
    right: -12px;
    top: -12px;
  }
}


/* Deck takeoff v14: picture-frame boards reserve their own perimeter and compact info icon removed. */
.deck-shape.deck-rect {
  background: rgba(0,63,31,.34) !important;
  overflow: hidden;
}
.deck-shape.deck-rect .board-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: rgba(0,63,31,.16);
}
.deck-shape.deck-rect.has-picture-frame .board-field { inset: 14px; }
.deck-shape.deck-rect.has-double-frame .board-field { inset: 28px; }
.deck-shape.deck-rect.orientation-parallel .board-field {
  background-image: repeating-linear-gradient(0deg, rgba(229,229,229,.55) 0 2px, transparent 2px 13px);
}
.deck-shape.deck-rect.orientation-perpendicular .board-field {
  background-image: repeating-linear-gradient(90deg, rgba(229,229,229,.55) 0 2px, transparent 2px 13px);
}
.deck-shape.deck-rect.orientation-diagonal .board-field,
.deck-shape.deck-rect.orientation-diagonal-pos .board-field {
  background-image: repeating-linear-gradient(45deg, rgba(229,229,229,.58) 0 2px, transparent 2px 14px);
}
.deck-shape.deck-rect.orientation-diagonal-neg .board-field {
  background-image: repeating-linear-gradient(-45deg, rgba(229,229,229,.58) 0 2px, transparent 2px 14px);
}
.deck-shape.deck-rect.has-picture-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 14px solid rgba(229,229,229,.88);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.35);
  pointer-events: none;
}
.deck-shape.deck-rect.has-double-frame::after {
  content: '';
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 14px solid rgba(229,229,229,.58);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.38);
  pointer-events: none;
}
.deck-shape.deck-rect span,
.deck-shape.deck-rect em,
.deck-shape.deck-rect .shape-compact-label {
  position: relative;
  z-index: 6;
}
.deck-shape.deck-rect .shape-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
}
.deck-shape.deck-rect .resize-handle {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 10;
}
.deck-shape.deck-rect.is-compact-shape .shape-delete {
  top: -10px;
  right: -10px;
}
.deck-shape.deck-rect.is-compact-shape .resize-handle {
  right: -1px;
  bottom: -1px;
}
.deck-shape .shape-info { display: none !important; }
.deck-shape.is-compact-shape .shape-compact-label {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}


/* Deck takeoff v16: 6-inch deck boards and 6-inch picture-frame boards.
   The blueprint scale uses 14px = 1 ft, so 7px = 6 in. */
.deck-shape.deck-rect { --deck-board-six-inch: 7px; }
.deck-shape.deck-rect.has-picture-frame .board-field { inset: var(--deck-board-six-inch) !important; }
.deck-shape.deck-rect.has-double-frame .board-field { inset: calc(var(--deck-board-six-inch) * 2) !important; }
.deck-shape.deck-rect.orientation-parallel .board-field {
  background-image: repeating-linear-gradient(0deg, rgba(229,229,229,.58) 0 1px, transparent 1px var(--deck-board-six-inch)) !important;
}
.deck-shape.deck-rect.orientation-perpendicular .board-field {
  background-image: repeating-linear-gradient(90deg, rgba(229,229,229,.58) 0 1px, transparent 1px var(--deck-board-six-inch)) !important;
}
.deck-shape.deck-rect.orientation-diagonal .board-field,
.deck-shape.deck-rect.orientation-diagonal-pos .board-field {
  background-image: repeating-linear-gradient(45deg, rgba(229,229,229,.60) 0 1px, transparent 1px var(--deck-board-six-inch)) !important;
}
.deck-shape.deck-rect.orientation-diagonal-neg .board-field {
  background-image: repeating-linear-gradient(-45deg, rgba(229,229,229,.60) 0 1px, transparent 1px var(--deck-board-six-inch)) !important;
}
.deck-shape.deck-rect.has-picture-frame::before {
  border-width: var(--deck-board-six-inch) !important;
}
.deck-shape.deck-rect.has-double-frame::after {
  inset: var(--deck-board-six-inch) !important;
  border-width: var(--deck-board-six-inch) !important;
}


/* Deck takeoff v17: smaller controls, deck-edge action buttons, forced stair width handles. */
.deck-shape .resize-handle {
  width: 14px !important;
  height: 14px !important;
  right: 0 !important;
  bottom: 0 !important;
  border-left-width: 1px !important;
  border-top-width: 1px !important;
}
body.deck-builder-fullscreen .deck-shape .resize-handle {
  width: 16px !important;
  height: 16px !important;
}
.deck-edge-plus,
.stair-suggestion {
  position: absolute;
  z-index: 14;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(229,229,229,.70) !important;
  border-radius: 999px !important;
  background: rgba(0,95,45,.96) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.34), 0 0 0 2px rgba(0,63,31,.24) !important;
  cursor: pointer;
  touch-action: manipulation;
}
.deck-edge-plus span,
.stair-suggestion span {
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}
.deck-edge-plus:hover,
.deck-edge-plus:focus-visible,
.stair-suggestion:hover,
.stair-suggestion:focus-visible {
  background: rgba(0,125,55,.98) !important;
  outline: 2px solid rgba(255,255,255,.70);
  outline-offset: 1px;
}
.edge-action-popover {
  position: absolute;
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(229,229,229,.25);
  background: rgba(0,0,0,.78);
  box-shadow: 0 14px 30px rgba(0,0,0,.38), inset 0 0 0 1px rgba(0,63,31,.5);
  backdrop-filter: blur(16px);
}
.edge-action-popover button {
  border: 1px solid rgba(229,229,229,.18);
  background: rgba(229,229,229,.08);
  color: #f5f5f5;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.01em;
  cursor: pointer;
}
.edge-action-popover button:not(:disabled):hover,
.edge-action-popover button:not(:disabled):focus-visible {
  background: rgba(0,63,31,.78);
  border-color: rgba(229,229,229,.55);
}
.edge-action-popover button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.deck-shape.stair-run.forced-stair {
  box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.20);
}
.stair-width-handle {
  position: absolute;
  z-index: 11;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(0,63,31,.95);
  box-shadow: 0 5px 12px rgba(0,0,0,.34);
  border-radius: 999px;
  cursor: ew-resize;
}
.stair-run.stair-up .stair-width-handle-a,
.stair-run.stair-down .stair-width-handle-a {
  left: -7px;
  top: calc(50% - 7px);
}
.stair-run.stair-up .stair-width-handle-b,
.stair-run.stair-down .stair-width-handle-b {
  right: -7px;
  top: calc(50% - 7px);
}
.stair-run.stair-left .stair-width-handle,
.stair-run.stair-right .stair-width-handle { cursor: ns-resize; }
.stair-run.stair-left .stair-width-handle-a,
.stair-run.stair-right .stair-width-handle-a {
  top: -7px;
  left: calc(50% - 7px);
}
.stair-run.stair-left .stair-width-handle-b,
.stair-run.stair-right .stair-width-handle-b {
  bottom: -7px;
  left: calc(50% - 7px);
}
@media (max-width: 520px) {
  .deck-edge-plus,
  .stair-suggestion { width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; }
  .deck-edge-plus span,
  .stair-suggestion span { font-size: 17px !important; }
  .deck-shape .resize-handle { width: 14px !important; height: 14px !important; }
  .edge-action-popover button { padding: 8px 10px; }
}


/* Deck takeoff v18: active-edge controls, smaller red delete, stair width-only handles. */
.deck-shape .shape-delete,
.deck-shape.deck-rect .shape-delete,
.deck-shape.rail-line .shape-delete,
.deck-shape.stair-run .shape-delete {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  z-index: 24 !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ff3b30 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
.deck-shape .shape-delete:hover,
.deck-shape .shape-delete:focus-visible {
  color: #ff6b61 !important;
  background: transparent !important;
  outline: none !important;
  transform: scale(1.08);
}
.deck-shape.is-compact-shape .shape-delete,
.deck-shape.deck-rect.is-compact-shape .shape-delete {
  top: 1px !important;
  right: 1px !important;
}
.deck-edge-plus,
.stair-suggestion {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  z-index: 18 !important;
}
.deck-edge-plus span,
.stair-suggestion span {
  font-size: 13px !important;
}
.deck-shape.stair-run .resize-handle {
  display: none !important;
}
.deck-shape.stair-run .stair-width-handle {
  width: 12px !important;
  height: 12px !important;
}
.stair-run.stair-up .stair-width-handle-a,
.stair-run.stair-down .stair-width-handle-a { left: -6px !important; top: calc(50% - 6px) !important; }
.stair-run.stair-up .stair-width-handle-b,
.stair-run.stair-down .stair-width-handle-b { right: -6px !important; top: calc(50% - 6px) !important; }
.stair-run.stair-left .stair-width-handle-a,
.stair-run.stair-right .stair-width-handle-a { top: -6px !important; left: calc(50% - 6px) !important; }
.stair-run.stair-left .stair-width-handle-b,
.stair-run.stair-right .stair-width-handle-b { bottom: -6px !important; left: calc(50% - 6px) !important; }
@media (max-width: 520px) {
  .deck-edge-plus,
  .stair-suggestion { width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; }
  .deck-edge-plus span,
  .stair-suggestion span { font-size: 14px !important; }
}


/* Deck takeoff v19: code-aware stairs and corner-step prompt. */
.deck-corner-plus {
  position: absolute;
  z-index: 19;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(229,229,229,.7) !important;
  border-radius: 999px !important;
  background: rgba(0,115,52,.98) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.34), 0 0 0 2px rgba(0,63,31,.24) !important;
  cursor: pointer;
}
.deck-corner-plus span { font-size: 13px !important; font-weight: 950 !important; line-height: 1 !important; transform: translateY(-1px); }
.deck-corner-plus:hover,
.deck-corner-plus:focus-visible { background: rgba(0,145,64,.98) !important; outline: 2px solid rgba(255,255,255,.7); outline-offset: 1px; }
.deck-shape.stair-run.corner-stair {
  border: 1px solid rgba(229,229,229,.68);
  background:
    linear-gradient(135deg, rgba(229,229,229,.36) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0) 0 13px, rgba(229,229,229,.36) 13px 15px),
    linear-gradient(145deg, rgba(0,63,31,.82), rgba(0,0,0,.56));
}
.deck-shape.stair-run.corner-stair::after { content: '⌜'; right: 5px; bottom: 2px; transform: none; }
.deck-shape.stair-run.corner-stair .stair-width-handle { display: none !important; }
@media (max-width: 520px) {
  .deck-corner-plus { width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; }
  .deck-corner-plus span { font-size: 14px !important; }
}


/* Deck takeoff v20: true 10-inch stair tread visual spacing. */
.deck-shape.stair-run {
  border-radius: 0 !important;
  overflow: visible !important;
}
.deck-shape.stair-run .stair-tread-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(229,229,229,.48);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(229,229,229,.10) 0,
      rgba(229,229,229,.10) calc(var(--tread-px, 23.33px) - 1px),
      rgba(229,229,229,.90) calc(var(--tread-px, 23.33px) - 1px),
      rgba(229,229,229,.90) var(--tread-px, 23.33px)
    );
}
.deck-shape.stair-run.stair-left .stair-tread-field,
.deck-shape.stair-run.stair-right .stair-tread-field {
  background:
    repeating-linear-gradient(
      to right,
      rgba(229,229,229,.10) 0,
      rgba(229,229,229,.10) calc(var(--tread-px, 23.33px) - 1px),
      rgba(229,229,229,.90) calc(var(--tread-px, 23.33px) - 1px),
      rgba(229,229,229,.90) var(--tread-px, 23.33px)
    );
}
.deck-shape.stair-run span,
.deck-shape.stair-run em,
.deck-shape.stair-run .shape-compact-label,
.deck-shape.stair-run .shape-delete,
.deck-shape.stair-run .stair-width-handle {
  z-index: 25;
}
.deck-shape.stair-run.corner-stair .stair-tread-field {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(229,229,229,.10) 0,
      rgba(229,229,229,.10) calc(var(--tread-px, 23.33px) - 1px),
      rgba(229,229,229,.88) calc(var(--tread-px, 23.33px) - 1px),
      rgba(229,229,229,.88) var(--tread-px, 23.33px)
    );
}
.deck-shape.stair-run > span,
.deck-shape.stair-run > em,
.deck-shape.stair-run > .shape-compact-label,
.deck-shape.stair-run > .shape-delete,
.deck-shape.stair-run > .stair-width-handle {
  position: relative;
}

/* Deck takeoff v21: edge-snapped stairs and true-corner stair modes. */
.deck-shape.stair-run {
  box-sizing: border-box !important;
}
.deck-shape.stair-run.corner-stair {
  min-width: 28px !important;
  min-height: 28px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.deck-shape.stair-run.corner-stair .stair-tread-field {
  inset: 0;
  border: 1px solid rgba(229,229,229,.72);
  background-color: rgba(0,63,31,.78);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.26), 0 8px 18px rgba(0,0,0,.28);
}
.deck-shape.stair-run.corner-stair.corner-mode-corner .stair-tread-field {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(229,229,229,.08) 0,
      rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) var(--tread-px, 11.67px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.9), rgba(0,0,0,.52));
}
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner .stair-tread-field {
  clip-path: polygon(100% 100%, 0 100%, 100% 0);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(229,229,229,.08) 0,
      rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) var(--tread-px, 11.67px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.9), rgba(0,0,0,.52));
}
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner .stair-tread-field {
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(229,229,229,.08) 0,
      rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) var(--tread-px, 11.67px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.9), rgba(0,0,0,.52));
}
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner .stair-tread-field {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(229,229,229,.08) 0,
      rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) var(--tread-px, 11.67px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.9), rgba(0,0,0,.52));
}
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner .stair-tread-field {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(229,229,229,.08) 0,
      rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.88) var(--tread-px, 11.67px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.9), rgba(0,0,0,.52));
}
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 .stair-tread-field {
  clip-path: none;
  border: 1px dashed rgba(229,229,229,.72);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(229,229,229,.08) 0,
      rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.92) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.92) var(--tread-px, 11.67px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.54));
}
.deck-shape.stair-run.corner-stair > span,
.deck-shape.stair-run.corner-stair > em {
  display: none !important;
}
.deck-shape.stair-run.corner-stair .shape-compact-label {
  display: none !important;
}
.deck-shape.stair-run.corner-stair .shape-delete {
  top: -2px !important;
  right: -2px !important;
}


/* Deck takeoff v22: true mitered corner steps vs 45-degree diagonal corner steps.
   - Mitered corner steps stay square at the corner and show a corner stringer splitting the angle.
   - 45-degree steps use the triangular clipped shape from the previous “true corner” concept. */
.deck-shape.stair-run.corner-stair .stair-tread-field {
  overflow: hidden;
  position: absolute;
}
.deck-shape.stair-run.corner-stair .stair-tread-field::before,
.deck-shape.stair-run.corner-stair .stair-tread-field::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* True/mitered corner: square landing-style infill with two stair fields meeting at a miter. */
.deck-shape.stair-run.corner-stair.corner-mode-corner .stair-tread-field {
  clip-path: none !important;
  border: 1px solid rgba(229,229,229,.72) !important;
  background:
    linear-gradient(145deg, rgba(0,63,31,.92), rgba(0,0,0,.52)) !important;
}
.deck-shape.stair-run.corner-stair.corner-mode-corner .stair-tread-field::before {
  opacity: .95;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(229,229,229,.09) 0,
      rgba(229,229,229,.09) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.82) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.82) var(--tread-px, 11.67px)
    );
}
.deck-shape.stair-run.corner-stair.corner-mode-corner .stair-tread-field::after {
  opacity: .95;
  background:
    repeating-linear-gradient(
      to right,
      rgba(229,229,229,.09) 0,
      rgba(229,229,229,.09) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.82) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.82) var(--tread-px, 11.67px)
    );
}
/* Clip the two tread fields into mitered halves. */
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner .stair-tread-field::before,
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner .stair-tread-field::before {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner .stair-tread-field::after,
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner .stair-tread-field::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner .stair-tread-field::before,
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner .stair-tread-field::before {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner .stair-tread-field::after,
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner .stair-tread-field::after {
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
/* The corner stringer splitting the two runs. */
.deck-shape.stair-run.corner-stair.corner-mode-corner .stair-tread-field {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.26), 0 8px 18px rgba(0,0,0,.28) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner .stair-tread-field,
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner .stair-tread-field {
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(229,229,229,.98) calc(50% - 1px), rgba(229,229,229,.98) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(145deg, rgba(0,63,31,.92), rgba(0,0,0,.52)) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner .stair-tread-field,
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner .stair-tread-field {
  background:
    linear-gradient(-45deg, transparent calc(50% - 1px), rgba(229,229,229,.98) calc(50% - 1px), rgba(229,229,229,.98) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(145deg, rgba(0,63,31,.92), rgba(0,0,0,.52)) !important;
}

/* 45-degree diagonal steps: keep the triangular wedge concept. */
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 .stair-tread-field {
  border: 1px solid rgba(229,229,229,.72) !important;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(229,229,229,.08) 0,
      rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.92) calc(var(--tread-px, 11.67px) - 1px),
      rgba(229,229,229,.92) var(--tread-px, 11.67px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.54)) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner-45 .stair-tread-field {
  clip-path: polygon(100% 100%, 0 100%, 100% 0) !important;
  background:
    repeating-linear-gradient(-45deg, rgba(229,229,229,.08) 0, rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px), rgba(229,229,229,.92) calc(var(--tread-px, 11.67px) - 1px), rgba(229,229,229,.92) var(--tread-px, 11.67px)),
    linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.54)) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner-45 .stair-tread-field {
  clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
  background:
    repeating-linear-gradient(45deg, rgba(229,229,229,.08) 0, rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px), rgba(229,229,229,.92) calc(var(--tread-px, 11.67px) - 1px), rgba(229,229,229,.92) var(--tread-px, 11.67px)),
    linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.54)) !important;
}
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner-45 .stair-tread-field {
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  background:
    repeating-linear-gradient(-45deg, rgba(229,229,229,.08) 0, rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px), rgba(229,229,229,.92) calc(var(--tread-px, 11.67px) - 1px), rgba(229,229,229,.92) var(--tread-px, 11.67px)),
    linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.54)) !important;
}
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner-45 .stair-tread-field {
  clip-path: polygon(100% 0, 0 0, 100% 100%) !important;
  background:
    repeating-linear-gradient(45deg, rgba(229,229,229,.08) 0, rgba(229,229,229,.08) calc(var(--tread-px, 11.67px) - 1px), rgba(229,229,229,.92) calc(var(--tread-px, 11.67px) - 1px), rgba(229,229,229,.92) var(--tread-px, 11.67px)),
    linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.54)) !important;
}


/* Deck takeoff v23: mitered corners are now an alteration of adjacent stair runs, not a third object.
   45-degree diagonal corner steps remain a separate triangular object with 10 in tread spacing. */
.corner-action-popover {
  position: absolute;
  z-index: 31;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  width: 96px;
  padding: 5px;
  border: 1px solid rgba(229,229,229,.25);
  background: rgba(0,0,0,.82);
  box-shadow: 0 14px 30px rgba(0,0,0,.42), inset 0 0 0 1px rgba(0,63,31,.55);
  backdrop-filter: blur(16px);
}
.corner-action-popover button {
  border: 1px solid rgba(229,229,229,.18);
  background: rgba(229,229,229,.08);
  color: #f5f5f5;
  padding: 7px 6px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: -.02em;
  cursor: pointer;
  text-align: center;
}
.corner-action-popover button:hover,
.corner-action-popover button:focus-visible {
  background: rgba(0,63,31,.82);
  border-color: rgba(229,229,229,.55);
}

/* Shared stair tread layer uses the same 10 in module everywhere. */
.deck-shape.stair-run .stair-tread-field {
  --tread-line: rgba(229,229,229,.92);
}

/* Miter markers live on the existing adjacent stair runs. */
.deck-shape.stair-run.has-mitered-corner .stair-tread-field::before,
.deck-shape.stair-run.has-mitered-corner .stair-tread-field::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 4;
}
.deck-shape.stair-run.has-mitered-corner .stair-tread-field::before {
  width: calc(var(--tread-px, 11.67px) * 1.05);
  height: calc(var(--tread-px, 11.67px) * 1.05);
  background: rgba(0,63,31,.88);
  border: 1px solid rgba(229,229,229,.82);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}
.deck-shape.stair-run.has-mitered-corner .stair-tread-field::after {
  width: calc(var(--tread-px, 11.67px) * 1.48);
  height: 2px;
  background: rgba(229,229,229,.96);
  transform-origin: center;
}
/* Position the miter at the end of the stair run nearest the active deck corner. */
.deck-shape.stair-run.miter-side-top.miter-top-left .stair-tread-field::before,
.deck-shape.stair-run.miter-side-top.miter-top-left .stair-tread-field::after,
.deck-shape.stair-run.miter-side-left.miter-top-left .stair-tread-field::before,
.deck-shape.stair-run.miter-side-left.miter-top-left .stair-tread-field::after { left: 0; top: 0; }
.deck-shape.stair-run.miter-side-top.miter-top-right .stair-tread-field::before,
.deck-shape.stair-run.miter-side-top.miter-top-right .stair-tread-field::after,
.deck-shape.stair-run.miter-side-right.miter-top-right .stair-tread-field::before,
.deck-shape.stair-run.miter-side-right.miter-top-right .stair-tread-field::after { right: 0; top: 0; }
.deck-shape.stair-run.miter-side-bottom.miter-bottom-left .stair-tread-field::before,
.deck-shape.stair-run.miter-side-bottom.miter-bottom-left .stair-tread-field::after,
.deck-shape.stair-run.miter-side-left.miter-bottom-left .stair-tread-field::before,
.deck-shape.stair-run.miter-side-left.miter-bottom-left .stair-tread-field::after { left: 0; bottom: 0; }
.deck-shape.stair-run.miter-side-bottom.miter-bottom-right .stair-tread-field::before,
.deck-shape.stair-run.miter-side-bottom.miter-bottom-right .stair-tread-field::after,
.deck-shape.stair-run.miter-side-right.miter-bottom-right .stair-tread-field::before,
.deck-shape.stair-run.miter-side-right.miter-bottom-right .stair-tread-field::after { right: 0; bottom: 0; }
.deck-shape.stair-run.miter-top-left .stair-tread-field::after,
.deck-shape.stair-run.miter-bottom-right .stair-tread-field::after { transform: rotate(45deg); }
.deck-shape.stair-run.miter-top-right .stair-tread-field::after,
.deck-shape.stair-run.miter-bottom-left .stair-tread-field::after { transform: rotate(-45deg); }

/* Refined 45-degree diagonal corner steps: triangular wedge with treads aligned to the 10 in step module. */
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 .stair-tread-field {
  --diag-tread-px: calc(var(--tread-px, 11.67px) * 1.41421356);
  border: 1px solid rgba(229,229,229,.80) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.28) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner-45 .stair-tread-field,
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner-45 .stair-tread-field {
  background:
    repeating-linear-gradient(-45deg, rgba(229,229,229,.08) 0, rgba(229,229,229,.08) calc(var(--diag-tread-px) - 1px), rgba(229,229,229,.94) calc(var(--diag-tread-px) - 1px), rgba(229,229,229,.94) var(--diag-tread-px)),
    linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.54)) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner-45 .stair-tread-field,
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner-45 .stair-tread-field {
  background:
    repeating-linear-gradient(45deg, rgba(229,229,229,.08) 0, rgba(229,229,229,.08) calc(var(--diag-tread-px) - 1px), rgba(229,229,229,.94) calc(var(--diag-tread-px) - 1px), rgba(229,229,229,.94) var(--diag-tread-px)),
    linear-gradient(145deg, rgba(0,63,31,.88), rgba(0,0,0,.54)) !important;
}


/* Deck takeoff v24: precision stair formatting and cleaner blueprint geometry. */
.deck-shape {
  border-width: 1px !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.22) !important;
}
.deck-shape.selected {
  outline: 1px solid rgba(229,229,229,.72) !important;
  outline-offset: 1px !important;
}
.deck-shape.deck-rect,
.deck-shape.stair-run {
  box-sizing: border-box !important;
}
.deck-shape.stair-run {
  border: 0 !important;
  background: rgba(0,63,31,.30) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.20) !important;
}
.deck-shape.stair-run .stair-tread-field {
  inset: 0 !important;
  border: 0 !important;
  outline: 1px solid rgba(229,229,229,.50) !important;
  outline-offset: -1px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18) !important;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(229,229,229,.055) 0,
      rgba(229,229,229,.055) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.92) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.92) var(--tread-px, 11.6667px)
    ) !important;
}
.deck-shape.stair-run.stair-left .stair-tread-field,
.deck-shape.stair-run.stair-right .stair-tread-field {
  background:
    repeating-linear-gradient(
      to right,
      rgba(229,229,229,.055) 0,
      rgba(229,229,229,.055) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.92) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.92) var(--tread-px, 11.6667px)
    ) !important;
}
.corner-action-popover { width: 74px !important; }
.corner-action-popover button { font-size: 10px !important; padding: 8px 6px !important; }
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 .stair-tread-field {
  --diag-tread-px: calc(var(--tread-px, 11.6667px) * 1.41421356);
  outline: 1px solid rgba(229,229,229,.62) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner-45 .stair-tread-field,
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner-45 .stair-tread-field {
  background:
    repeating-linear-gradient(-45deg, rgba(229,229,229,.055) 0, rgba(229,229,229,.055) calc(var(--diag-tread-px) - 1px), rgba(229,229,229,.92) calc(var(--diag-tread-px) - 1px), rgba(229,229,229,.92) var(--diag-tread-px)),
    linear-gradient(145deg, rgba(0,63,31,.82), rgba(0,0,0,.48)) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner-45 .stair-tread-field,
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner-45 .stair-tread-field {
  background:
    repeating-linear-gradient(45deg, rgba(229,229,229,.055) 0, rgba(229,229,229,.055) calc(var(--diag-tread-px) - 1px), rgba(229,229,229,.92) calc(var(--diag-tread-px) - 1px), rgba(229,229,229,.92) var(--diag-tread-px)),
    linear-gradient(145deg, rgba(0,63,31,.82), rgba(0,0,0,.48)) !important;
}
.stair-miter-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 46px;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  padding: 10px 12px;
}
.stair-miter-toggle input {
  width: 20px !important;
  min-height: 20px !important;
  accent-color: var(--green);
}
.stair-miter-toggle.is-disabled { opacity: .42; }
.deck-shape.stair-run.has-mitered-corner .stair-tread-field::before {
  width: calc(var(--tread-px, 11.6667px) * 1.1) !important;
  height: calc(var(--tread-px, 11.6667px) * 1.1) !important;
  border: 0 !important;
  background: rgba(0,63,31,.82) !important;
}
.deck-shape.stair-run.has-mitered-corner .stair-tread-field::after {
  width: calc(var(--tread-px, 11.6667px) * 1.55) !important;
  height: 1px !important;
  background: rgba(229,229,229,.94) !important;
}


/* Deck takeoff v25: mitered stair extension can pass the deck-edge span limiter.
   The active miter toggle now extends the stair width beyond the source platform span
   toward the adjacent stair run while preserving the 10-inch tread module. */
.deck-shape.stair-run.has-mitered-corner {
  overflow: visible !important;
}
.deck-shape.stair-run.has-mitered-corner .stair-tread-field {
  overflow: hidden !important;
}
.deck-shape.stair-run.has-mitered-corner .stair-tread-field::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: .72 !important;
}
.deck-shape.stair-run.has-mitered-corner .stair-tread-field::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: .96 !important;
}


/* Deck takeoff v26: active mitered stair runs become true trapezoids.
   Geometry intent: original stair width = x, run/depth = y, mitered bottom = x+y,
   with the diagonal side equal to sqrt(2y^2). The bounding box grows by y, then
   clip-path trims the deck-side/top edge back to x so the exposed stair is a trapezoid. */
.deck-shape.stair-run.active-miter-extension {
  overflow: visible !important;
  background: transparent !important;
}
.deck-shape.stair-run.active-miter-extension .stair-tread-field {
  overflow: hidden !important;
  background-color: rgba(0,63,31,.32) !important;
}
/* Vertical stairs: the deck-side edge is the top or bottom edge; width grows toward the adjacent stair. */
.deck-shape.stair-run.active-miter-extension.stair-up.miter-mate-left,
.deck-shape.stair-run.active-miter-extension.stair-down.miter-mate-left {
  clip-path: polygon(var(--miter-cut, 0px) 0, 100% 0, 100% 100%, 0 100%);
}
.deck-shape.stair-run.active-miter-extension.stair-up.miter-mate-right,
.deck-shape.stair-run.active-miter-extension.stair-down.miter-mate-right {
  clip-path: polygon(0 0, calc(100% - var(--miter-cut, 0px)) 0, 100% 100%, 0 100%);
}
/* Horizontal stairs: the deck-side edge is the left or right edge; height grows toward the adjacent stair. */
.deck-shape.stair-run.active-miter-extension.stair-left.miter-mate-top,
.deck-shape.stair-run.active-miter-extension.stair-right.miter-mate-top {
  clip-path: polygon(0 var(--miter-cut, 0px), 100% 0, 100% 100%, 0 100%);
}
.deck-shape.stair-run.active-miter-extension.stair-left.miter-mate-bottom,
.deck-shape.stair-run.active-miter-extension.stair-right.miter-mate-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--miter-cut, 0px)));
}
/* Keep the tread field in the clipped trapezoid and remove the old square miter markers. */
.deck-shape.stair-run.active-miter-extension .stair-tread-field::before,
.deck-shape.stair-run.active-miter-extension .stair-tread-field::after {
  display: none !important;
}
.deck-shape.stair-run.active-miter-extension .stair-tread-field {
  outline-color: rgba(229,229,229,.68) !important;
}
/* Let the handles and delete button stay usable even with the trapezoid clipping. */
.deck-shape.stair-run.active-miter-extension > .shape-delete,
.deck-shape.stair-run.active-miter-extension > .stair-width-handle,
.deck-shape.stair-run.active-miter-extension > span,
.deck-shape.stair-run.active-miter-extension > em,
.deck-shape.stair-run.active-miter-extension > .shape-compact-label {
  clip-path: none !important;
}

/* Deck takeoff v27: corrected mitered stair trapezoids.
   The stair's touching edge stays at the selected top span, while the exposed base widens by one run depth (or two if both ends miter).
   This works on all stair orientations and allows both adjacent ends to miter when applicable. */
.deck-shape.stair-run.active-miter-extension {
  background: transparent !important;
  overflow: visible !important;
}
.deck-shape.stair-run.active-miter-extension .stair-tread-field {
  background-color: rgba(0,63,31,.34) !important;
  overflow: hidden !important;
  outline: 1px solid rgba(229,229,229,.62) !important;
}
/* down: attached edge is top, exposed base is bottom */
.deck-shape.stair-run.active-miter-extension.stair-down .stair-tread-field {
  clip-path: polygon(var(--miter-start, 0px) 0, calc(var(--miter-start, 0px) + var(--top-span, 0px)) 0, 100% 100%, 0 100%) !important;
}
/* up: attached edge is bottom, exposed base is top */
.deck-shape.stair-run.active-miter-extension.stair-up .stair-tread-field {
  clip-path: polygon(0 0, 100% 0, calc(var(--miter-start, 0px) + var(--top-span, 0px)) 100%, var(--miter-start, 0px) 100%) !important;
}
/* right: attached edge is left, exposed base is right */
.deck-shape.stair-run.active-miter-extension.stair-right .stair-tread-field {
  clip-path: polygon(0 var(--miter-start, 0px), 100% 0, 100% 100%, 0 calc(var(--miter-start, 0px) + var(--top-span, 0px))) !important;
}
/* left: attached edge is right, exposed base is left */
.deck-shape.stair-run.active-miter-extension.stair-left .stair-tread-field {
  clip-path: polygon(0 0, 100% var(--miter-start, 0px), 100% calc(var(--miter-start, 0px) + var(--top-span, 0px)), 0 100%) !important;
}
.deck-shape.stair-run.active-miter-extension .stair-tread-field::before,
.deck-shape.stair-run.active-miter-extension .stair-tread-field::after {
  display: none !important;
}
.deck-shape.stair-run.active-miter-extension {
  clip-path: none !important;
}

/* Deck takeoff v28: precision miter formatting.
   Mitered stairs keep the deck-touching edge fixed at the original span.
   Only the outside/base edge expands by the stair run depth on the mitered side(s).
   The parent element stays unstyled so the visual object is only the clipped tread field. */
.deck-shape.stair-run.active-miter-extension {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}
.deck-shape.stair-run.active-miter-extension.selected {
  outline: 0 !important;
  box-shadow: none !important;
}
.deck-shape.stair-run.active-miter-extension .stair-tread-field {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 1px solid rgba(229,229,229,.68) !important;
  outline-offset: -1px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.18) !important;
  background-color: rgba(0,63,31,.34) !important;
}
.deck-shape.stair-run.active-miter-extension.selected .stair-tread-field {
  outline-color: rgba(229,229,229,.95) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 1px rgba(229,229,229,.34), 0 6px 14px rgba(0,0,0,.22) !important;
}

/* Bottom-side stair: deck edge is the top span. Bottom expands left/right by run depth. */
.deck-shape.stair-run.active-miter-extension.stair-down .stair-tread-field {
  clip-path: polygon(var(--miter-start, 0px) 0, calc(var(--miter-start, 0px) + var(--top-span, 0px)) 0, 100% 100%, 0 100%) !important;
}
/* Top-side stair: deck edge is the bottom span. Outside/top edge expands left/right by run depth. */
.deck-shape.stair-run.active-miter-extension.stair-up .stair-tread-field {
  clip-path: polygon(0 0, 100% 0, calc(var(--miter-start, 0px) + var(--top-span, 0px)) 100%, var(--miter-start, 0px) 100%) !important;
}
/* Right-side stair: deck edge is the left span. Outside/right edge expands up/down by run depth. */
.deck-shape.stair-run.active-miter-extension.stair-right .stair-tread-field {
  clip-path: polygon(0 var(--miter-start, 0px), 100% 0, 100% 100%, 0 calc(var(--miter-start, 0px) + var(--top-span, 0px))) !important;
}
/* Left-side stair: deck edge is the right span. Outside/left edge expands up/down by run depth. */
.deck-shape.stair-run.active-miter-extension.stair-left .stair-tread-field {
  clip-path: polygon(0 0, 100% var(--miter-start, 0px), 100% calc(var(--miter-start, 0px) + var(--top-span, 0px)), 0 100%) !important;
}

/* Hide old square miter markers; the trapezoid itself is the miter. */
.deck-shape.stair-run.active-miter-extension .stair-tread-field::before,
.deck-shape.stair-run.active-miter-extension .stair-tread-field::after {
  display: none !important;
}

/* Keep labels/controls readable without affecting geometry. */
.deck-shape.stair-run.active-miter-extension > span,
.deck-shape.stair-run.active-miter-extension > em,
.deck-shape.stair-run.active-miter-extension > .shape-compact-label {
  z-index: 5 !important;
  pointer-events: none !important;
}
.deck-shape.stair-run.active-miter-extension > .shape-delete,
.deck-shape.stair-run.active-miter-extension > .stair-width-handle {
  z-index: 7 !important;
}

/* Deck takeoff v29: four-sided stair miter cleanup.
   Mitered stairs remain anchored to the exact deck-edge span while the outside edge grows by the stair run.
   When stairs exist on both adjacent sides, both ends miter automatically. */
.deck-shape.stair-run.active-miter-extension .stair-tread-field {
  background-color: rgba(0,63,31,.36) !important;
}
.deck-shape.stair-run.active-miter-extension.stair-down .stair-tread-field,
.deck-shape.stair-run.active-miter-extension.stair-up .stair-tread-field {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(229,229,229,.10) 0,
    rgba(229,229,229,.10) calc(var(--tread-px, 11.667px) - 1px),
    rgba(229,229,229,.92) calc(var(--tread-px, 11.667px) - 1px),
    rgba(229,229,229,.92) var(--tread-px, 11.667px)
  ) !important;
}
.deck-shape.stair-run.active-miter-extension.stair-left .stair-tread-field,
.deck-shape.stair-run.active-miter-extension.stair-right .stair-tread-field {
  background-image: repeating-linear-gradient(
    to right,
    rgba(229,229,229,.10) 0,
    rgba(229,229,229,.10) calc(var(--tread-px, 11.667px) - 1px),
    rgba(229,229,229,.92) calc(var(--tread-px, 11.667px) - 1px),
    rgba(229,229,229,.92) var(--tread-px, 11.667px)
  ) !important;
}
.deck-shape.stair-run.active-miter-extension > span,
.deck-shape.stair-run.active-miter-extension > em {
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

/* Deck takeoff v30: grouped corner stair options.
   Adjacent stair runs are replaced by one L-shaped corner stair group. */
.corner-action-popover.corner-action-popover-wide {
  width: 132px !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;
}
.corner-action-popover.corner-action-popover-wide button {
  min-height: 34px !important;
  padding: 7px 4px !important;
  font-size: 10px !important;
}
.deck-shape.stair-run.corner-stair.corner-group,
.deck-shape.stair-run.corner-stair[class*="corner-mode-corner-"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}
.deck-shape.stair-run.corner-stair .stair-tread-field {
  inset: 0 !important;
}
.deck-shape.stair-run.corner-stair.corner-top-left .stair-tread-field {
  clip-path: polygon(0 0, 100% 0, 100% var(--corner-run-px), var(--corner-run-px) var(--corner-run-px), var(--corner-run-px) 100%, 0 100%) !important;
}
.deck-shape.stair-run.corner-stair.corner-top-right .stair-tread-field {
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--corner-run-px)) 100%, calc(100% - var(--corner-run-px)) var(--corner-run-px), 0 var(--corner-run-px)) !important;
}
.deck-shape.stair-run.corner-stair.corner-bottom-right .stair-tread-field {
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 calc(100% - var(--corner-run-px)), calc(100% - var(--corner-run-px)) calc(100% - var(--corner-run-px)), calc(100% - var(--corner-run-px)) 0) !important;
}
.deck-shape.stair-run.corner-stair.corner-bottom-left .stair-tread-field {
  clip-path: polygon(0 0, var(--corner-run-px) 0, var(--corner-run-px) calc(100% - var(--corner-run-px)), 100% calc(100% - var(--corner-run-px)), 100% 100%, 0 100%) !important;
}
.deck-shape.stair-run.corner-stair .stair-tread-field {
  outline: 1px solid rgba(229,229,229,.50) !important;
  outline-offset: -1px !important;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(229,229,229,.055) 0,
      rgba(229,229,229,.055) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.86) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.86) var(--tread-px, 11.6667px)
    ),
    repeating-linear-gradient(
      to right,
      rgba(229,229,229,.035) 0,
      rgba(229,229,229,.035) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.70) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.70) var(--tread-px, 11.6667px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.82), rgba(0,0,0,.50)) !important;
}
.deck-shape.stair-run.corner-stair .stair-tread-field::before,
.deck-shape.stair-run.corner-stair .stair-tread-field::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 5;
  background: rgba(229,229,229,.92);
  transform-origin: center;
}
/* 45°: one clean corner miter across the stair group. */
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 .stair-tread-field::before {
  width: calc(var(--corner-run-px) * 1.41421356);
  height: 2px;
}
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner-45 .stair-tread-field::before { left: 0; top: var(--corner-run-px); transform: rotate(-45deg); transform-origin: left center; }
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner-45 .stair-tread-field::before { right: 0; top: var(--corner-run-px); transform: rotate(45deg); transform-origin: right center; }
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner-45 .stair-tread-field::before { right: 0; bottom: var(--corner-run-px); transform: rotate(-45deg); transform-origin: right center; }
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner-45 .stair-tread-field::before { left: 0; bottom: var(--corner-run-px); transform: rotate(45deg); transform-origin: left center; }
/* 22.5°: two shorter transition lines to show the softened corner. */
.deck-shape.stair-run.corner-stair.corner-mode-corner-22-5 .stair-tread-field::before,
.deck-shape.stair-run.corner-stair.corner-mode-corner-22-5 .stair-tread-field::after {
  width: calc(var(--corner-run-px) * .82);
  height: 2px;
}
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner-22-5 .stair-tread-field::before { left: 0; top: calc(var(--corner-run-px) * .66); transform: rotate(-22.5deg); transform-origin: left center; }
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner-22-5 .stair-tread-field::after { left: calc(var(--corner-run-px) * .48); top: var(--corner-run-px); transform: rotate(-67.5deg); transform-origin: left center; }
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner-22-5 .stair-tread-field::before { right: 0; top: calc(var(--corner-run-px) * .66); transform: rotate(22.5deg); transform-origin: right center; }
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner-22-5 .stair-tread-field::after { right: calc(var(--corner-run-px) * .48); top: var(--corner-run-px); transform: rotate(67.5deg); transform-origin: right center; }
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner-22-5 .stair-tread-field::before { right: 0; bottom: calc(var(--corner-run-px) * .66); transform: rotate(-22.5deg); transform-origin: right center; }
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner-22-5 .stair-tread-field::after { right: calc(var(--corner-run-px) * .48); bottom: var(--corner-run-px); transform: rotate(-67.5deg); transform-origin: right center; }
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner-22-5 .stair-tread-field::before { left: 0; bottom: calc(var(--corner-run-px) * .66); transform: rotate(22.5deg); transform-origin: left center; }
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner-22-5 .stair-tread-field::after { left: calc(var(--corner-run-px) * .48); bottom: var(--corner-run-px); transform: rotate(67.5deg); transform-origin: left center; }
/* 0°: square corner, no diagonal cut line. */
.deck-shape.stair-run.corner-stair.corner-mode-corner-0 .stair-tread-field::before,
.deck-shape.stair-run.corner-stair.corner-mode-corner-0 .stair-tread-field::after {
  display: none !important;
}
.deck-shape.stair-run.corner-stair > span,
.deck-shape.stair-run.corner-stair > em {
  left: var(--corner-run-px) !important;
  right: auto !important;
  top: var(--corner-run-px) !important;
  max-width: 210px !important;
  pointer-events: none;
}


/* Deck takeoff v31: focus pass on the 45° corner-stair condition.
   The 45° option should read as one clean L-shaped stair group with the outside corner
   mitered at 45°. The deck-side legs stay square against the platform; only the outside
   corner receives the diagonal cut. */
.corner-action-popover.corner-action-popover-wide {
  width: 54px !important;
  grid-template-columns: 1fr !important;
}
.corner-action-popover.corner-action-popover-wide button {
  min-width: 42px !important;
}
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 .stair-tread-field {
  outline: 1px solid rgba(229,229,229,.66) !important;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(229,229,229,.055) 0,
      rgba(229,229,229,.055) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.72) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.72) var(--tread-px, 11.6667px)
    ),
    repeating-linear-gradient(
      to right,
      rgba(229,229,229,.025) 0,
      rgba(229,229,229,.025) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.44) calc(var(--tread-px, 11.6667px) - 1px),
      rgba(229,229,229,.44) var(--tread-px, 11.6667px)
    ),
    linear-gradient(145deg, rgba(0,63,31,.84), rgba(0,0,0,.54)) !important;
}
/* Top-left corner: top run + left run with the outside corner clipped from (0, run) to (run, 0). */
.deck-shape.stair-run.corner-stair.corner-top-left.corner-mode-corner-45 .stair-tread-field {
  clip-path: polygon(
    var(--corner-run-px) 0,
    100% 0,
    100% var(--corner-run-px),
    var(--corner-run-px) var(--corner-run-px),
    var(--corner-run-px) 100%,
    0 100%,
    0 var(--corner-run-px)
  ) !important;
}
/* Top-right corner: top run + right run with the outside corner clipped from width-run/0 to width/run. */
.deck-shape.stair-run.corner-stair.corner-top-right.corner-mode-corner-45 .stair-tread-field {
  clip-path: polygon(
    0 0,
    calc(100% - var(--corner-run-px)) 0,
    100% var(--corner-run-px),
    100% 100%,
    calc(100% - var(--corner-run-px)) 100%,
    calc(100% - var(--corner-run-px)) var(--corner-run-px),
    0 var(--corner-run-px)
  ) !important;
}
/* Bottom-right corner: bottom run + right run with the outside corner clipped from width/run to width-run/height. */
.deck-shape.stair-run.corner-stair.corner-bottom-right.corner-mode-corner-45 .stair-tread-field {
  clip-path: polygon(
    100% 0,
    100% calc(100% - var(--corner-run-px)),
    calc(100% - var(--corner-run-px)) 100%,
    0 100%,
    0 calc(100% - var(--corner-run-px)),
    calc(100% - var(--corner-run-px)) calc(100% - var(--corner-run-px)),
    calc(100% - var(--corner-run-px)) 0
  ) !important;
}
/* Bottom-left corner: bottom run + left run with the outside corner clipped from 0/height-run to run/height. */
.deck-shape.stair-run.corner-stair.corner-bottom-left.corner-mode-corner-45 .stair-tread-field {
  clip-path: polygon(
    0 0,
    var(--corner-run-px) 0,
    var(--corner-run-px) calc(100% - var(--corner-run-px)),
    100% calc(100% - var(--corner-run-px)),
    100% 100%,
    var(--corner-run-px) 100%,
    0 calc(100% - var(--corner-run-px))
  ) !important;
}
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 .stair-tread-field::before,
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 .stair-tread-field::after {
  display: none !important;
}
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 > span,
.deck-shape.stair-run.corner-stair.corner-mode-corner-45 > em {
  display: none !important;
}


/* Deck takeoff v33: corner 45 stair cleanup.
   Render 45-degree corner stairs as two precise trapezoid legs inside one L-shaped group.
   The vertical and horizontal stair runs each keep their own 10 in tread direction,
   and the old legacy miter toggle is removed from the interface. */
.deck-shape.stair-run.corner-stair {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.deck-shape.stair-run.corner-stair::before,
.deck-shape.stair-run.corner-stair::after,
.deck-shape.stair-run.corner-stair .stair-tread-field {
  display: none !important;
  content: none !important;
}
.deck-shape.stair-run.corner-stair > span,
.deck-shape.stair-run.corner-stair > em,
.deck-shape.stair-run.corner-stair > .shape-compact-label {
  display: none !important;
}
.deck-shape.stair-run.corner-stair > .shape-delete {
  z-index: 9;
}
.deck-shape.stair-run.corner-stair .corner-stair-leg {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background-color: rgba(0, 63, 31, 0.78);
  border: 1px solid rgba(229, 229, 229, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.deck-shape.stair-run.corner-stair .corner-leg-a {
  clip-path: polygon(var(--corner-leg-a-clip));
}
.deck-shape.stair-run.corner-stair .corner-leg-b {
  clip-path: polygon(var(--corner-leg-b-clip));
}
/* Left/right corner stair leg: run travels horizontally, so tread lines read vertically. */
.deck-shape.stair-run.corner-stair .corner-stair-leg.vertical {
  background-image: repeating-linear-gradient(to right,
    rgba(229,229,229,0.72) 0 1px,
    transparent 1px calc(var(--tread-px) - 1px),
    rgba(229,229,229,0.72) calc(var(--tread-px) - 1px) var(--tread-px));
}
/* Top/bottom corner stair leg: run travels vertically, so tread lines read horizontally. */
.deck-shape.stair-run.corner-stair .corner-stair-leg.horizontal {
  background-image: repeating-linear-gradient(to bottom,
    rgba(229,229,229,0.72) 0 1px,
    transparent 1px calc(var(--tread-px) - 1px),
    rgba(229,229,229,0.72) calc(var(--tread-px) - 1px) var(--tread-px));
}
/* Keep the underlying stair group itself visually unobtrusive. */
.deck-shape.stair-run.corner-stair.selected {
  outline: 1px solid rgba(229,229,229,0.25);
  outline-offset: 0;
}

/* Deck takeoff v34: lock 45° corner tread origins to the actual stair legs.
   The grouped corner stair is drawn inside one larger bounding box, so the bottom
   and right legs need their tread pattern origin shifted to the true deck-edge
   start point. This keeps the selected 45° miter from visually drifting compared
   to the original individual stair runs. */
.deck-shape.stair-run.corner-stair .corner-stair-leg.vertical,
.deck-shape.stair-run.corner-stair .corner-stair-leg.horizontal {
  background-color: rgba(0, 63, 31, 0.78) !important;
  background-repeat: repeat !important;
}
.deck-shape.stair-run.corner-stair .corner-stair-leg.vertical {
  background-image: linear-gradient(
    to right,
    rgba(229,229,229,0.72) 0,
    rgba(229,229,229,0.72) 1px,
    transparent 1px,
    transparent 100%
  ) !important;
  background-size: var(--tread-px, 11.6667px) 100% !important;
  background-position: 0 0 !important;
}
.deck-shape.stair-run.corner-stair .corner-stair-leg.vertical.right {
  background-position: var(--corner-deck-w, 0px) 0 !important;
}
.deck-shape.stair-run.corner-stair .corner-stair-leg.horizontal {
  background-image: linear-gradient(
    to bottom,
    rgba(229,229,229,0.72) 0,
    rgba(229,229,229,0.72) 1px,
    transparent 1px,
    transparent 100%
  ) !important;
  background-size: 100% var(--tread-px, 11.6667px) !important;
  background-position: 0 0 !important;
}
.deck-shape.stair-run.corner-stair .corner-stair-leg.horizontal.bottom {
  background-position: 0 var(--corner-deck-h, 0px) !important;
}

/* Deck takeoff v35: stair-end angle controls and independent stair mitering.
   Corner mitering now belongs to each stair object end instead of replacing adjacent
   stair runs with a grouped L-shaped corner object. */
.deck-shape,
.deck-shape.deck-rect,
.deck-shape.stair-run,
.deck-shape.stair-run.forced-stair,
.deck-shape.rail-line {
  z-index: var(--shape-z, 1) !important;
}
.deck-shape.stair-run.has-stair-angle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}
.deck-shape.stair-run.has-stair-angle.selected {
  outline: 0 !important;
  box-shadow: none !important;
}
.deck-shape.stair-run.has-stair-angle .stair-tread-field {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 1px solid rgba(229,229,229,.72) !important;
  outline-offset: -1px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20), 0 4px 10px rgba(0,0,0,.20) !important;
  background-color: rgba(0,63,31,.38) !important;
}
.deck-shape.stair-run.has-stair-angle.selected .stair-tread-field {
  outline-color: rgba(229,229,229,.96) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 0 0 1px rgba(229,229,229,.34), 0 6px 14px rgba(0,0,0,.24) !important;
}
.deck-shape.stair-run.has-stair-angle.stair-down .stair-tread-field {
  clip-path: polygon(var(--miter-start, 0px) 0, calc(var(--miter-start, 0px) + var(--top-span, 0px)) 0, 100% 100%, 0 100%) !important;
}
.deck-shape.stair-run.has-stair-angle.stair-up .stair-tread-field {
  clip-path: polygon(0 0, 100% 0, calc(var(--miter-start, 0px) + var(--top-span, 0px)) 100%, var(--miter-start, 0px) 100%) !important;
}
.deck-shape.stair-run.has-stair-angle.stair-right .stair-tread-field {
  clip-path: polygon(0 var(--miter-start, 0px), 100% 0, 100% 100%, 0 calc(var(--miter-start, 0px) + var(--top-span, 0px))) !important;
}
.deck-shape.stair-run.has-stair-angle.stair-left .stair-tread-field {
  clip-path: polygon(0 0, 100% var(--miter-start, 0px), 100% calc(var(--miter-start, 0px) + var(--top-span, 0px)), 0 100%) !important;
}
.deck-shape.stair-run.has-stair-angle .stair-tread-field::before,
.deck-shape.stair-run.has-stair-angle .stair-tread-field::after {
  display: none !important;
}
.deck-shape.stair-run.has-stair-angle > span,
.deck-shape.stair-run.has-stair-angle > em,
.deck-shape.stair-run.has-stair-angle > .shape-compact-label {
  z-index: 5 !important;
  pointer-events: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
.deck-shape.stair-run.has-stair-angle > .shape-delete,
.deck-shape.stair-run.has-stair-angle > .stair-width-handle {
  z-index: 7 !important;
}
.stair-angle-button {
  position: absolute;
  z-index: 72 !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(229,229,229,.72) !important;
  border-radius: 999px !important;
  background: rgba(0,63,31,.96) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.34), 0 0 0 2px rgba(0,63,31,.24) !important;
  cursor: pointer;
}
.stair-angle-button.active {
  background: rgba(0,145,64,.98) !important;
  outline: 1px solid rgba(255,255,255,.70);
  outline-offset: 1px;
}
.stair-angle-button span {
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}
.stair-angle-button:hover,
.stair-angle-button:focus-visible {
  background: rgba(0,145,64,.98) !important;
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 1px;
}
.stair-angle-popover {
  position: absolute;
  z-index: 82 !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 112px;
  padding: 5px;
  border: 1px solid rgba(229,229,229,.25);
  background: rgba(0,0,0,.84);
  box-shadow: 0 14px 30px rgba(0,0,0,.42), inset 0 0 0 1px rgba(0,63,31,.55);
  backdrop-filter: blur(16px);
}
.stair-angle-popover button {
  border: 1px solid rgba(229,229,229,.18);
  background: rgba(229,229,229,.08);
  color: #f5f5f5;
  padding: 8px 4px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: -.02em;
  cursor: pointer;
  text-align: center;
}
.stair-angle-popover button:hover,
.stair-angle-popover button:focus-visible {
  background: rgba(0,63,31,.82);
  border-color: rgba(229,229,229,.55);
}
.deck-corner-plus,
.corner-action-popover {
  display: none !important;
}
@media (max-width: 520px) {
  .stair-angle-button { width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; }
  .stair-angle-button span { font-size: 14px !important; }
  .stair-angle-popover button { padding: 8px 5px; }
}
.deck-edge-plus,
.deck-corner-plus,
.stair-angle-button {
  z-index: 1000 !important;
}
.edge-action-popover,
.corner-action-popover,
.stair-angle-popover {
  z-index: 1010 !important;
}


/* Deck takeoff v36: side-stair angle cleanup.
   A selected 45°/22.5° stair end should be validated as part of the stair object footprint,
   not as a span overflow. Keep invalid warning chrome from filling the clipped-off triangles. */
.deck-shape.stair-run.has-stair-angle.invalid-stair,
.deck-shape.stair-run.has-stair-angle.invalid-stair.stair-left,
.deck-shape.stair-run.has-stair-angle.invalid-stair.stair-right,
.deck-shape.stair-run.has-stair-angle.invalid-stair.stair-up,
.deck-shape.stair-run.has-stair-angle.invalid-stair.stair-down {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.deck-shape.stair-run.has-stair-angle.invalid-stair .stair-tread-field {
  background-color: rgba(0,63,31,.38) !important;
  outline-color: rgba(229,229,229,.72) !important;
}
.deck-shape.stair-run.has-stair-angle.invalid-stair::before {
  z-index: 8 !important;
  left: 8px !important;
  top: 8px !important;
  background: rgba(130,0,0,.64) !important;
  padding: 2px 4px !important;
}

/* Deck takeoff v37: 22.5° corner join object between adjacent independent stair runs. */
.stair-corner-join-plus {
  position: absolute;
  z-index: 1000 !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(229,229,229,.72) !important;
  border-radius: 999px !important;
  background: rgba(0,63,31,.96) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.34), 0 0 0 2px rgba(0,63,31,.24) !important;
  cursor: pointer;
}
.stair-corner-join-plus span {
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}
.stair-corner-join-plus:hover,
.stair-corner-join-plus:focus-visible {
  background: rgba(0,145,64,.98) !important;
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 1px;
}
.deck-shape.stair-run.stair-corner-join {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}
.deck-shape.stair-run.stair-corner-join.selected {
  outline: 0 !important;
  box-shadow: none !important;
}
.deck-shape.stair-run.stair-corner-join .stair-corner-join-field {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  outline: 1px solid rgba(229,229,229,.82) !important;
  outline-offset: -1px !important;
  background-color: rgba(0,63,31,.56) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 5px 12px rgba(0,0,0,.22) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-top-left .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-bottom-right .stair-corner-join-field {
  background-image: repeating-linear-gradient(45deg,
    rgba(229,229,229,.76) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.76) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px));
}
.deck-shape.stair-run.stair-corner-join.corner-top-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-bottom-left .stair-corner-join-field {
  background-image: repeating-linear-gradient(-45deg,
    rgba(229,229,229,.76) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.76) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px));
}
.deck-shape.stair-run.stair-corner-join.corner-top-left .stair-corner-join-field {
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 0 35%);
}
.deck-shape.stair-run.stair-corner-join.corner-top-right .stair-corner-join-field {
  clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%);
}
.deck-shape.stair-run.stair-corner-join.corner-bottom-right .stair-corner-join-field {
  clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
}
.deck-shape.stair-run.stair-corner-join.corner-bottom-left .stair-corner-join-field {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%, 0 65%);
}
.deck-shape.stair-run.stair-corner-join > span,
.deck-shape.stair-run.stair-corner-join > em,
.deck-shape.stair-run.stair-corner-join > .shape-compact-label {
  z-index: 5 !important;
  pointer-events: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.deck-shape.stair-run.stair-corner-join > .shape-delete {
  z-index: 7 !important;
}
@media (max-width: 520px) {
  .stair-corner-join-plus { width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; }
  .stair-corner-join-plus span { font-size: 14px !important; }
}

/* Deck takeoff v38: square-ended adjacent stair corner piece.
   The 0° connector is a true right-isosceles stair infill: if each stair run depth is x,
   the exposed outside tread/hypotenuse is sqrt(2*x^2). The tread bands run parallel
   to that hypotenuse so the board orientation visually connects the adjacent stair runs. */
.deck-shape.stair-run.stair-corner-join.corner-angle-0 {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0::after {
  display: none !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0 .stair-corner-join-field {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  outline: 1px solid rgba(229,229,229,.86) !important;
  outline-offset: -1px !important;
  background-color: rgba(0,63,31,.56) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 5px 12px rgba(0,0,0,.22) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-left .stair-corner-join-field {
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
  background-image: repeating-linear-gradient(45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-right .stair-corner-join-field {
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
  background-image: repeating-linear-gradient(-45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-right .stair-corner-join-field {
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  background-image: repeating-linear-gradient(45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-left .stair-corner-join-field {
  clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
  background-image: repeating-linear-gradient(-45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}

/* Deck takeoff v39: 0° corner-piece tread orientation correction.
   The square corner infill treads must bridge the adjacent horizontal/vertical stair
   tread lines. This rotates the v38 corner-piece striping 90° while leaving the
   right-isosceles geometry and hypotenuse math untouched. */
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-left .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-right .stair-corner-join-field {
  background-image: repeating-linear-gradient(-45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-left .stair-corner-join-field {
  background-image: repeating-linear-gradient(45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}



/* Deck takeoff v40: keep the exposed outer tread edge visible and add 22.5° corner-piece support.
   0° corner pieces now draw an explicit long-edge border so the outside tread line stays crisp.
   22.5° corner pieces use the same independent corner object, but with the long edge inset by the
   stair end-angle extension so the connector matches adjacent softened stair ends. */
.deck-shape.stair-run.stair-corner-join .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join .stair-corner-join-field::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0 .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-field::before {
  width: var(--corner-long-tread-px, calc(1.4142 * var(--corner-run-px, 46.667px))) !important;
  height: 1px !important;
  background: rgba(229,229,229,.94) !important;
  box-shadow: 0 0 0 1px rgba(229,229,229,.18) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-left .stair-corner-join-field::before {
  left: 0 !important;
  bottom: 0 !important;
  transform: rotate(-45deg) !important;
  transform-origin: left center !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-right .stair-corner-join-field::before {
  left: 0 !important;
  top: 0 !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-right .stair-corner-join-field::before {
  left: 0 !important;
  top: 100% !important;
  transform: rotate(-45deg) !important translateY(-1px) !important;
  transform-origin: left center !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-left .stair-corner-join-field::before {
  left: 0 !important;
  bottom: 0 !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
}

.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-field {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  outline: 0 !important;
  border: 0 !important;
  background-color: rgba(0,63,31,.56) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 5px 12px rgba(0,0,0,.22) !important;
}
/* Deck takeoff v41: 22.5° corner-piece cleanup.
   The 22.5 connector should read as a true triangle whose apex sits on the deck corner,
   while the other two corners land at the adjacent stair bottom-step endpoints.
   Removing the box outline avoids the browser drawing a misleading rectangular/angled border
   around the clipped field; the visible long-edge border remains driven by ::before. */
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-left .stair-corner-join-field {
  clip-path: polygon(100% var(--corner-inset-pct, 41.421%), 100% 100%, var(--corner-inset-pct, 41.421%) 100%) !important;
  background-image: repeating-linear-gradient(-45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-right .stair-corner-join-field {
  clip-path: polygon(0 var(--corner-inset-pct, 41.421%), calc(100% - var(--corner-inset-pct, 41.421%)) 100%, 0 100%) !important;
  background-image: repeating-linear-gradient(45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-right .stair-corner-join-field {
  clip-path: polygon(0 0, calc(100% - var(--corner-inset-pct, 41.421%)) 0, 0 calc(100% - var(--corner-inset-pct, 41.421%))) !important;
  background-image: repeating-linear-gradient(-45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-left .stair-corner-join-field {
  clip-path: polygon(var(--corner-inset-pct, 41.421%) 0, 100% 0, 100% calc(100% - var(--corner-inset-pct, 41.421%))) !important;
  background-image: repeating-linear-gradient(45deg,
    rgba(229,229,229,.82) 0 1px,
    transparent 1px calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.82) calc(var(--tread-px, 11.6667px) - 1px) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-left .stair-corner-join-field::before {
  left: var(--corner-inset-px, 0px) !important;
  bottom: 0 !important;
  transform: rotate(-45deg) !important;
  transform-origin: left center !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-right .stair-corner-join-field::before {
  left: 0 !important;
  top: var(--corner-inset-px, 0px) !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-right .stair-corner-join-field::before {
  left: 0 !important;
  top: calc(100% - var(--corner-inset-px, 0px)) !important;
  transform: rotate(-45deg) !important translateY(-1px) !important;
  transform-origin: left center !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-left .stair-corner-join-field::before {
  left: var(--corner-inset-px, 0px) !important;
  top: 0 !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
}


/* Deck takeoff v42: derive 0° and 22.5° corner-piece triangles directly from the adjacent stair objects.
   The three points are the deck corner plus the two exposed outer-corner endpoints from the neighboring stairs.
   This keeps the inside apex locked to the deck corner and the outside edge locked to the true bottom-step endpoints. */
.deck-shape.stair-run.stair-corner-join.corner-angle-0 .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-field {
  clip-path: polygon(var(--corner-join-clip, 0px 0px, 100% 0px, 0px 100%)) !important;
  outline: 0 !important;
  border: 0 !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0 .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-field::before {
  left: var(--corner-edge-left, 0px) !important;
  top: var(--corner-edge-top, 0px) !important;
  width: var(--corner-edge-length, var(--corner-long-tread-px, 0px)) !important;
  transform: rotate(var(--corner-edge-angle, 0deg)) !important;
  transform-origin: left center !important;
}


/* Deck takeoff v43: high-specificity corner-piece overrides.
   The earlier angle/corner-specific rules were more specific than the generic v42 triangle rules,
   so 22.5° pieces could still render from the old guessed inset geometry.
   Force both 0° and 22.5° corner pieces to use the triangle derived from the actual adjacent stair endpoints. */
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-left .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-left .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-left .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-left .stair-corner-join-field {
  clip-path: polygon(var(--corner-join-clip, 0px 0px, 100% 0px, 0px 100%)) !important;
  outline: 0 !important;
  border: 0 !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-left .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-top-right .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-right .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-0.corner-bottom-left .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-left .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-right .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-right .stair-corner-join-field::before,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-left .stair-corner-join-field::before {
  left: var(--corner-edge-left, 0px) !important;
  top: var(--corner-edge-top, 0px) !important;
  width: var(--corner-edge-length, var(--corner-long-tread-px, 0px)) !important;
  transform: rotate(var(--corner-edge-angle, 0deg)) !important;
  transform-origin: left center !important;
}


/* Deck takeoff v45: stair width is field-input only. Remove legacy drag handles so they do not interfere with stair angle controls. */
.deck-shape.stair-run .stair-width-handle,
.deck-shape.stair-run > .stair-width-handle { display: none !important; }


/* Deck takeoff v48: lower 22.5° corner-piece board-line phase correction.
   The stripe angle remains unchanged from v47; this only shifts the repeating
   tread pattern so the corner-piece board lines line up with the adjacent stair
   tread lines on all four corners, especially the two lower pieces. */
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-field {
  background-position: var(--corner-tread-bg-x, 0px) var(--corner-tread-bg-y, 0px) !important;
}

/* Deck takeoff v49: bottom 22.5° corner-piece tread phase mirror.
   The lower connector triangles are the vertical mirror of the top connectors, so
   their repeating tread pattern must be phased from the outside stair-run edge.
   This preserves the corrected board orientation while lining the diagonal corner
   boards up with the bottom stair tread cadence. */
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-left .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-right .stair-corner-join-field {
  background-position: var(--corner-tread-bg-x, 0px) var(--corner-tread-bg-y, 0px) !important;
}

/* Deck takeoff v51: 22.5° corner-piece board spacing correction.
   Keep the v50 180° rotation/mirroring relationship, but do NOT scale the tread module.
   These corner triangles represent the same stair boards as the runs, so their visible
   board spacing must stay on the base --tread-px cadence rather than a √2 diagonal cadence. */
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-field {
  background-position: 0 0 !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-left .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-right .stair-corner-join-field {
  background-image: repeating-linear-gradient(-45deg,
    rgba(229,229,229,.10) 0,
    rgba(229,229,229,.10) calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.90) calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.90) var(--tread-px, 11.6667px)) !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-left .stair-corner-join-field {
  background-image: repeating-linear-gradient(45deg,
    rgba(229,229,229,.10) 0,
    rgba(229,229,229,.10) calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.90) calc(var(--tread-px, 11.6667px) - 1px),
    rgba(229,229,229,.90) var(--tread-px, 11.6667px)) !important;
}

/* Deck takeoff v52: make 22.5° corner-piece board outlines use the exact same tread-line module as regular stair runs.
   Keep the corrected triangle geometry/orientation from v51, but render the diagonal boards with the
   same fill-to-outline cadence as standard stairs so line weight and board definition match exactly. */


/* Deck takeoff v55: draw 22.5° corner-piece board lines from exact triangle geometry.
   The regular stair runs are already correct. For 22.5° corner joins, stop relying on
   repeating CSS gradients for visible board lines and instead overlay SVG line segments
   spaced at the same tread module and clipped to the true triangle. This keeps board
   width identical to the adjacent stair runs while preserving the existing outer long edge. */
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-field {
  background-image: none !important;
  background-position: 0 0 !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5 .stair-corner-join-svg line {
  stroke: rgba(229,229,229,.90) !important;
  stroke-width: 1 !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linecap: butt !important;
  shape-rendering: crispEdges !important;
}


/* Deck takeoff v56: 22.5° plotted corner lines use tread * √2 spacing so the visible
   diagonal board width matches the regular stair board width. */


/* Deck takeoff v57: remove conflicting 22.5° corner-piece formatting.
   Earlier 22.5 rules still have corner-specific background-image declarations with !important,
   so they can render a second gradient pattern underneath/over the plotted SVG lines.
   These final, higher-specificity overrides leave only the geometric line overlay active. */
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-left .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-right .stair-corner-join-field,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-left .stair-corner-join-field {
  background-image: none !important;
  background-position: 0 0 !important;
}
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-left .stair-corner-join-svg,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-top-right .stair-corner-join-svg,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-right .stair-corner-join-svg,
.deck-shape.stair-run.stair-corner-join.corner-angle-22-5.corner-bottom-left .stair-corner-join-svg {
  z-index: 2 !important;
}

/* Deck takeoff v61: rail rendering cleanup.
   Remove legacy visual restrictors that forced every rail to a short horizontal strip.
   Geometry is still controlled in JS; this block only skins attached rail segments so
   vertical rails render at full height and rail lines are easier to see on the deck. */
.deck-shape.rail-line,
.deck-shape.rail-line.rail-horizontal,
.deck-shape.rail-line.rail-vertical {
  position: absolute !important;
  display: block !important;
  overflow: visible !important;
  min-width: var(--rail-thickness, 10px) !important;
  min-height: var(--rail-thickness, 10px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
}
.deck-shape.rail-line.rail-horizontal {
  width: var(--rail-render-w) !important;
  height: var(--rail-thickness, 10px) !important;
}
.deck-shape.rail-line.rail-vertical {
  width: var(--rail-thickness, 10px) !important;
  height: var(--rail-render-h) !important;
}
.deck-shape.rail-line::before {
  content: '' !important;
  position: absolute !important;
  pointer-events: none !important;
  border: 2px solid rgba(245,245,245,.96) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(0,63,31,.78)) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.44),
    0 5px 11px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(0,0,0,.24) !important;
}
.deck-shape.rail-line.rail-horizontal::before {
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: calc(var(--rail-thickness, 10px) + 2px) !important;
  transform: translateY(-50%) !important;
}
.deck-shape.rail-line.rail-vertical::before {
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: calc(var(--rail-thickness, 10px) + 2px) !important;
  transform: translateX(-50%) !important;
}
.deck-shape.rail-line::after {
  content: '' !important;
  position: absolute !important;
  pointer-events: none !important;
  opacity: .82 !important;
}
.deck-shape.rail-line.rail-horizontal::after {
  left: 4px !important;
  right: 4px !important;
  top: 50% !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,.55) 0 2px,
    transparent 2px 22px) !important;
}
.deck-shape.rail-line.rail-vertical::after {
  top: 4px !important;
  bottom: 4px !important;
  left: 50% !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.55) 0 2px,
    transparent 2px 22px) !important;
}
.deck-shape.rail-line span,
.deck-shape.rail-line em,
.deck-shape.rail-line.rail-vertical span,
.deck-shape.rail-line.rail-vertical em {
  display: none !important;
}
.deck-shape.rail-line.selected {
  outline: 2px solid rgba(255,255,255,.96) !important;
  outline-offset: 5px !important;
  box-shadow: none !important;
}
.deck-shape.rail-line .shape-delete {
  top: -18px !important;
  right: -18px !important;
  z-index: 50 !important;
  color: #ff3b30 !important;
}


/* Deck takeoff v62: object controls and rail spec rendering.
   - Delete “x” controls only appear on the active/selected object.
   - Active object is raised by JS z-index so the controls can be reached.
   - Rails now render with 4" square posts at ends, a thinner rail bar, and a midpoint post on spans over 8 ft.
   - Endpoint posts are centered on rail ends so adjacent rails visually connect at platform corners. */
.deck-shape .shape-delete {
  display: none !important;
  pointer-events: none !important;
}
.deck-shape.selected > .shape-delete {
  display: flex !important;
  pointer-events: auto !important;
}
.deck-shape.selected {
  z-index: 10000 !important;
}
.deck-shape.rail-line,
.deck-shape.rail-line.rail-horizontal,
.deck-shape.rail-line.rail-vertical {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
.deck-shape.rail-line::before,
.deck-shape.rail-line::after {
  content: none !important;
  display: none !important;
}
.deck-shape.rail-line .rail-bar,
.deck-shape.rail-line .rail-post {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
.deck-shape.rail-line .rail-bar {
  background: rgba(238,238,238,.96) !important;
  border: 1px solid rgba(0,0,0,.68) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.40),
    0 3px 7px rgba(0,0,0,.45) !important;
}
.deck-shape.rail-line .rail-post {
  width: var(--rail-post-size, 4.667px) !important;
  height: var(--rail-post-size, 4.667px) !important;
  background: rgba(238,238,238,.98) !important;
  border: 1px solid rgba(0,0,0,.75) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.45),
    0 2px 5px rgba(0,0,0,.42) !important;
  z-index: 2 !important;
}
.deck-shape.rail-line.rail-horizontal .rail-bar {
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: var(--rail-bar-size, 3.5px) !important;
  transform: translateY(-50%) !important;
}
.deck-shape.rail-line.rail-horizontal .rail-post {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.deck-shape.rail-line.rail-horizontal .rail-post-start { left: 0 !important; }
.deck-shape.rail-line.rail-horizontal .rail-post-end { left: 100% !important; }
.deck-shape.rail-line.rail-horizontal .rail-post-mid { left: 50% !important; }
.deck-shape.rail-line.rail-vertical .rail-bar {
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: var(--rail-bar-size, 3.5px) !important;
  transform: translateX(-50%) !important;
}
.deck-shape.rail-line.rail-vertical .rail-post {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.deck-shape.rail-line.rail-vertical .rail-post-start { top: 0 !important; }
.deck-shape.rail-line.rail-vertical .rail-post-end { top: 100% !important; }
.deck-shape.rail-line.rail-vertical .rail-post-mid { top: 50% !important; }
.deck-shape.rail-line:not(.has-mid-rail-post) .rail-post-mid {
  display: none !important;
}
.deck-shape.rail-line.selected .rail-bar,
.deck-shape.rail-line.selected .rail-post {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.82),
    0 0 0 4px rgba(0,63,31,.42),
    0 5px 12px rgba(0,0,0,.48) !important;
}


/* Deck takeoff v63: final active-only delete controls and structurally-centered rail posts.
   Earlier legacy selectors used more specific display:grid !important rules for .shape-delete,
   so the base v62 hide rule could be overridden. These high-specificity overrides force every
   object delete control to stay hidden until that object is selected/active. */
[data-deck-app] .deck-shape > .shape-delete,
[data-deck-app] .deck-shape.deck-rect > .shape-delete,
[data-deck-app] .deck-shape.stair-run > .shape-delete,
[data-deck-app] .deck-shape.rail-line > .shape-delete,
[data-deck-app] .deck-shape.stair-run.corner-stair > .shape-delete,
[data-deck-app] .deck-shape.stair-run.stair-corner-join > .shape-delete {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-deck-app] .deck-shape.selected > .shape-delete,
[data-deck-app] .deck-shape.deck-rect.selected > .shape-delete,
[data-deck-app] .deck-shape.stair-run.selected > .shape-delete,
[data-deck-app] .deck-shape.rail-line.selected > .shape-delete,
[data-deck-app] .deck-shape.stair-run.corner-stair.selected > .shape-delete,
[data-deck-app] .deck-shape.stair-run.stair-corner-join.selected > .shape-delete {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
[data-deck-app] .deck-shape.selected {
  z-index: 10000 !important;
}
[data-deck-app] .deck-shape.rail-line .rail-post {
  /* Posts remain true 4 in squares; geometry now places their centers 3 in inside
     the platform edge so rails terminate inside deck boards instead of hanging outside. */
  border-radius: 1px !important;
}
[data-deck-app] .deck-shape.rail-line.rail-horizontal .rail-bar {
  left: 0 !important;
  right: 0 !important;
}
[data-deck-app] .deck-shape.rail-line.rail-vertical .rail-bar {
  top: 0 !important;
  bottom: 0 !important;
}


/* Deck takeoff v64: exact rail insets and repeated intermediate posts.
   - Rail post faces terminate 1 in inside platform/stair-opening ends.
   - Rail bars sit 1 in inside the running edge of the platform/stair.
   - Spans over 8 ft now receive one intermediate 4 in post for each additional 8 ft,
     spaced evenly between the end posts (e.g. 20 ft => 2 interior posts). */
[data-deck-app] .deck-shape > .shape-delete,
[data-deck-app] .deck-shape .shape-delete {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-deck-app] .deck-shape.selected > .shape-delete {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
[data-deck-app] .deck-shape.rail-line .rail-post-mid {
  display: none !important;
}
[data-deck-app] .deck-shape.rail-line.rail-horizontal .rail-post-dynamic {
  top: 50% !important;
  left: var(--rail-post-pos, 50%) !important;
  transform: translate(-50%, -50%) !important;
}
[data-deck-app] .deck-shape.rail-line.rail-vertical .rail-post-dynamic {
  left: 50% !important;
  top: var(--rail-post-pos, 50%) !important;
  transform: translate(-50%, -50%) !important;
}
[data-deck-app] .deck-shape.rail-line.rail-horizontal.rail-side-top .rail-bar {
  top: calc((var(--rail-thickness, 10px) * 0.5) - var(--rail-post-center-inset, 3.5px) + var(--rail-running-edge-inset, 1.167px)) !important;
  bottom: auto !important;
  transform: none !important;
}
[data-deck-app] .deck-shape.rail-line.rail-horizontal.rail-side-bottom .rail-bar {
  top: auto !important;
  bottom: calc((var(--rail-thickness, 10px) * 0.5) - var(--rail-post-center-inset, 3.5px) + var(--rail-running-edge-inset, 1.167px)) !important;
  transform: none !important;
}
[data-deck-app] .deck-shape.rail-line.rail-vertical.rail-side-left .rail-bar {
  left: calc((var(--rail-thickness, 10px) * 0.5) - var(--rail-post-center-inset, 3.5px) + var(--rail-running-edge-inset, 1.167px)) !important;
  right: auto !important;
  transform: none !important;
}
[data-deck-app] .deck-shape.rail-line.rail-vertical.rail-side-right .rail-bar {
  left: auto !important;
  right: calc((var(--rail-thickness, 10px) * 0.5) - var(--rail-post-center-inset, 3.5px) + var(--rail-running-edge-inset, 1.167px)) !important;
  transform: none !important;
}


/* Deck takeoff v65: display-layer toggle and initial framing layer.
   Foundation/Framing/Decking/Islands/Overhead are inverse display modes driven by the same deck/stair/rail geometry.
   v65 only renders 4 in framing posts; beams, ledgers, stringers, and structure/pergola remain future layers. */
.deck-layer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(229,229,229,.22);
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.deck-layer-toggle button {
  min-height: 34px;
  padding: 0 13px;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: rgba(238,238,238,.72) !important;
  box-shadow: none !important;
}
.deck-layer-toggle button.active,
.deck-layer-toggle button[aria-pressed="true"] {
  background: rgba(0,63,31,.92) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(229,229,229,.35), 0 7px 16px rgba(0,0,0,.25) !important;
}
.deck-board.layer-framing-active {
  background-color: rgba(8,14,12,.98);
}
.framing-layer-item {
  position: absolute;
  display: block;
  pointer-events: none;
  box-sizing: border-box;
}
.framing-post {
  background: rgba(238,238,238,.98);
  border: 1px solid rgba(0,0,0,.92);
  border-radius: 1px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.65),
    0 0 0 4px rgba(0,63,31,.35),
    0 4px 10px rgba(0,0,0,.45);
}
.framing-post::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.88);
  border-radius: 50%;
}
.layer-placeholder {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 12001;
  max-width: min(420px, calc(100% - 36px));
  padding: 10px 12px;
  border: 1px solid rgba(229,229,229,.22);
  border-radius: 14px;
  color: rgba(238,238,238,.86);
  background: rgba(0,0,0,.62);
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
  font-size: 12px;
  line-height: 1.35;
}


/* Deck takeoff v66: framing-layer post cleanup.
   The framing layer now deduplicates deck-corner and rail-end post references in JS,
   so each platform corner renders as one true 4 in structural post instead of stacked icons. */
.framing-post {
  z-index: 12000 !important;
}

/* Deck takeoff v70: active stair controls use one + menu for angle/rail actions. */
.deck-edge-plus,
.deck-corner-plus,
.stair-angle-button,
.stair-corner-join-plus {
  z-index: 12050 !important;
}
.edge-action-popover,
.corner-action-popover,
.stair-angle-popover {
  z-index: 12100 !important;
}
.stair-action-button span {
  font-size: 16px !important;
  transform: translateY(-1px);
}
.stair-angle-popover.stair-action-popover {
  grid-template-columns: repeat(4, 1fr) !important;
  width: 146px !important;
}
.stair-angle-popover button:disabled {
  opacity: .35;
  cursor: not-allowed;
}


/* Deck takeoff v71: framing joists, ledgers, and beams. */
.deck-shape.structure-line {
  display: grid;
  place-items: center;
  min-width: 8px;
  min-height: 8px;
  border: 1px solid rgba(238,238,238,.72);
  background: rgba(105, 151, 126, .92);
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.28);
}
.deck-shape.structure-line.structure-beam { background: rgba(136, 109, 72, .95); }
.deck-shape.structure-line.line-vertical span,
.deck-shape.structure-line.line-vertical em {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
}
.deck-shape.structure-line em { color: rgba(255,255,255,.82); }
.framing-deck-outline {
  border: 1px solid rgba(238,238,238,.42);
  background: rgba(0,63,31,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

.framing-selectable-deck.deck-shape {
  display: block;
  padding: 0;
  border-radius: 0;
  color: transparent;
  cursor: pointer;
}
.framing-selectable-deck.deck-shape.selected {
  outline: 2px solid rgba(238,238,238,.9);
  outline-offset: 3px;
}

.framing-joist {
  background: rgba(238,238,238,.62);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.framing-joist-vertical { width: 2px; }
.framing-joist-horizontal { height: 2px; }
.framing-structure-line {
  border-radius: 2px;
  border: 1px solid rgba(238,238,238,.75);
  background: rgba(105,151,126,.95);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.42);
}
.framing-structure-line.framing-beam { background: rgba(136,109,72,.95); }
.framing-deck-label {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.52);
  border: 1px solid rgba(238,238,238,.22);
  color: rgba(238,238,238,.88);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Deck takeoff v73: framing-view object selection/delete and stair stringers. */
[data-deck-app] .framing-clickable-object,
[data-deck-app] .framing-selectable-deck.deck-shape {
  pointer-events: auto !important;
  cursor: pointer !important;
}
[data-deck-app] .framing-deck-outline.selected,
[data-deck-app] .framing-clickable-object.selected {
  outline: 2px solid rgba(238,238,238,.95) !important;
  outline-offset: 3px !important;
}
[data-deck-app] .framing-stair-outline.deck-shape {
  background: rgba(238,238,238,.06) !important;
  border: 1px dashed rgba(238,238,238,.58) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.22) !important;
  color: transparent !important;
  border-radius: 4px !important;
  padding: 0 !important;
}
[data-deck-app] .framing-stair-stringer {
  background: rgba(238,238,238,.78);
  box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 0 8px rgba(238,238,238,.18);
  border-radius: 999px;
}
[data-deck-app] .framing-stair-stringer-vertical {
  width: 3px;
  transform: translateX(-1.5px);
}
[data-deck-app] .framing-stair-stringer-horizontal {
  height: 3px;
  transform: translateY(-1.5px);
}
[data-deck-app] .framing-structure-line.deck-shape {
  display: block !important;
  padding: 0 !important;
  min-width: 8px !important;
  min-height: 8px !important;
  color: transparent !important;
}

.framing-picture-blocking {
  display: block;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(238,238,238,.14), 0 2px 6px rgba(0,0,0,.28);
  pointer-events: none;
}
.framing-picture-blocking-horizontal { min-height: 3px; }
.framing-picture-blocking-vertical { min-width: 3px; }


/* Deck takeoff v77: explicit rim joists and reinforced stair headers in framing view. */
[data-deck-app] .framing-rim-joist {
  display: block;
  background: rgba(238,238,238,.82);
  border: 1px solid rgba(0,0,0,.42);
  box-shadow: 0 0 0 1px rgba(238,238,238,.18), 0 3px 8px rgba(0,0,0,.32);
  border-radius: 2px;
  pointer-events: none;
}
[data-deck-app] .framing-stair-header {
  display: block;
  background: rgba(186, 139, 76, .96);
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 0 0 2px rgba(238,238,238,.18), 0 4px 10px rgba(0,0,0,.38);
  border-radius: 2px;
  pointer-events: none;
}
[data-deck-app] .framing-rim-joist.framing-horizontal,
[data-deck-app] .framing-stair-header.framing-horizontal {
  min-height: 4px;
}
[data-deck-app] .framing-rim-joist.framing-vertical,
[data-deck-app] .framing-stair-header.framing-vertical {
  min-width: 4px;
}

/* Deck takeoff v80: attached beam/post rows and joist span zones. */
[data-deck-app] .framing-joist-span-zone {
  opacity: .86;
}
[data-deck-app] .framing-structure-line.framing-beam {
  box-shadow: 0 0 0 2px rgba(0,0,0,.42), 0 0 0 5px rgba(136,109,72,.16), 0 6px 14px rgba(0,0,0,.42);
}
[data-deck-app] .edge-action-popover {
  max-width: 240px;
}
[data-deck-app] .edge-action-popover button {
  white-space: nowrap;
}


/* Deck takeoff v81: attached beam rows can be dragged in framing view. */
[data-deck-app] .framing-clickable-object.framing-draggable-beam {
  cursor: grab !important;
}
[data-deck-app] .framing-clickable-object.framing-draggable-beam:active {
  cursor: grabbing !important;
}
[data-deck-app] .framing-clickable-object.framing-draggable-beam::after {
  content: 'drag beam';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.52);
  color: rgba(255,255,255,.88);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Deck takeoff v82: five-view builder tray, accordions, and cleaner desktop fullscreen. */
.deck-builder-workspace {
  display: grid;
  gap: 12px;
  align-items: start;
}
@media (min-width: 980px) {
  .deck-builder-workspace {
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  }
}
.builder-tool-tray {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 10px;
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 30px rgba(229,229,229,.045);
}
.builder-tool-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 10px;
}
.builder-tool-tray-head strong {
  display: block;
  color: var(--text);
  font-weight: 950;
  letter-spacing: .02em;
}
.builder-tool-tray-head small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}
.tool-tray-toggle {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(229,229,229,.09);
  color: var(--silver);
  font-size: 21px;
  font-weight: 950;
  cursor: pointer;
}
.tool-accordion {
  border: 1px solid rgba(229,229,229,.14);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
  margin-top: 8px;
}
.tool-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  color: var(--silver);
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.tool-accordion > summary::-webkit-details-marker { display: none; }
.tool-accordion > summary::after {
  content: '⌄';
  color: var(--muted);
  font-size: 14px;
  transition: transform .18s ease;
}
.tool-accordion[open] > summary::after { transform: rotate(180deg); }
.builder-tool-tray .builder-actions {
  margin: 0;
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.builder-tool-tray .builder-actions-objects {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.builder-tool-tray .builder-actions-objects [data-clear-board],
.builder-tool-tray .builder-actions-objects [data-fullscreen-builder] {
  grid-column: span 1;
}
.builder-tool-tray .builder-actions button {
  width: 100%;
  min-height: 42px;
  border-radius: 13px;
  padding: 0 10px;
}
.builder-tool-tray .deck-layer-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  border-radius: 16px;
  padding: 4px;
  gap: 4px;
}
.builder-tool-tray .deck-layer-toggle button {
  min-height: 36px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 11px;
  white-space: nowrap;
}
.selected-tool-accordion .selected-editor {
  margin: 0;
  padding: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.layer-placeholder strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  color: var(--silver);
}
.layer-placeholder span {
  display: block;
  max-width: 520px;
  color: var(--muted);
  line-height: 1.45;
}
.deck-board.layer-foundation-active {
  background:
    linear-gradient(rgba(229,229,229,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(77,72,61,.58), rgba(0,0,0,.18));
  background-size: 28px 28px, 28px 28px, auto;
}
.deck-board.layer-islands-active {
  background:
    linear-gradient(rgba(229,229,229,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(71,77,98,.58), rgba(0,0,0,.18));
  background-size: 28px 28px, 28px 28px, auto;
}
.deck-board.layer-overhead-active {
  background:
    linear-gradient(rgba(229,229,229,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,229,229,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(82,61,93,.58), rgba(0,0,0,.18));
  background-size: 28px 28px, 28px 28px, auto;
}

@media (min-width: 720px) {
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] {
    display: block !important;
    padding: 12px !important;
    overflow: hidden !important;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] > .panel-head {
    display: none !important;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-builder-workspace {
    height: calc(100dvh - 24px);
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    gap: 12px;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-builder-workspace.tools-collapsed {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray {
    grid-column: 1;
    height: 100%;
    min-height: 0;
    overflow: auto;
    border-color: rgba(229,229,229,.18);
    background: rgba(0,0,0,.34);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray.is-collapsed {
    padding: 7px;
    overflow: hidden;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray.is-collapsed .builder-tool-tray-head {
    padding: 0;
    justify-content: center;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray.is-collapsed .builder-tool-tray-head > div,
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray.is-collapsed .tool-accordion {
    display: none !important;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-builder-shell {
    grid-column: 2;
    height: 100%;
    min-height: 0;
    padding: 12px;
    border-radius: 0;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-board {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 719px) {
  .deck-builder-workspace { display: block; }
  .builder-tool-tray { margin-bottom: 10px; }
  .builder-tool-tray .builder-actions-objects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] > .panel-head { display: none !important; }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-builder-workspace { height: 100%; }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 92;
    max-height: 240px;
    overflow: auto;
    border-radius: 18px;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(22px);
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray.is-collapsed {
    left: auto;
    width: 54px;
    height: 54px;
    padding: 8px;
  }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray.is-collapsed .builder-tool-tray-head > div,
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray.is-collapsed .tool-accordion { display: none !important; }
  body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .deck-builder-shell {
    height: calc(100dvh - 20px);
    padding: 8px;
  }
}

body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray .builder-actions {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  display: grid !important;
  margin: 0 !important;
}
body.deck-builder-fullscreen .deck-panel[data-deck-panel="1"] .builder-tool-tray .selected-editor {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}