/* The proposal is one work surface: preview and editable items share the same view. */
.mode-rules {
  margin: 0 0 8px;
  color: #607064;
  font-size: 11px;
}
.mode-rules summary,
.quote-notice summary {
  width: fit-content;
  color: #52695a;
  cursor: pointer;
}
.mode-rules summary:hover,
.quote-notice summary:hover { color: #21442c; }
.mode-rules .mode-note { margin: 8px 0 3px; }

.quote-notice { margin-top: 3px; font-size: 10px; }
.quote-notice p { margin: 6px 0 0; color: #738076; line-height: 1.5; }

.shot-lead,
.scheme-workflow {
  display: block;
  border: 1px solid #dce5db;
  border-radius: 4px;
  background: #f8faf7;
}
.shot-lead[hidden] { display: none !important; }
.shot-lead summary,
.scheme-workflow summary {
  cursor: pointer;
  list-style: none;
}
.shot-lead summary::-webkit-details-marker,
.scheme-workflow summary::-webkit-details-marker { display: none; }
.shot-lead summary::after,
.scheme-workflow summary::after { content: '⌄'; float: right; margin-left: 9px; color: #657869; }
.shot-lead[open] summary::after,
.scheme-workflow[open] summary::after { content: '⌃'; }
.shot-lead:focus-within,
.scheme-workflow:focus-within { border-color: #7a9b80; }
.shot-lead .shot-lead-actions { margin-top: 10px; }
.scheme-workflow-body { padding: 0 12px 12px; }
.scheme-workflow .scheme-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  font-size: 11px;
}
.scheme-workflow .scheme-heading > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.scheme-workflow .scheme-heading b { margin: 0; font-size: 12px; }
.scheme-workflow .scheme-heading small { color: #87938a; font-size: 10px; }
.scheme-workflow .scheme-heading #schemeCount { margin-left: auto; padding-right: 12px; }
.scheme-workflow .scheme-tabs { margin: 4px 0 12px; }

@media (min-width: 1121px) {
  .builder-header { height: 64px; }
  .studio { max-width: 1720px; padding: 12px clamp(24px, 3vw, 52px) 72px; }
  .studio-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 16px;
  }
  .studio-heading .eyebrow { font-size: 9px; }
  .studio-heading h1 { margin: 3px 0 0; font-size: 26px; line-height: 1.2; }
  .studio-heading > p { margin: 0 0 2px; font-size: 12px; }
  .studio-workspace {
    grid-template-columns: minmax(0, .83fr) minmax(620px, 1.17fr);
    gap: clamp(20px, 2.1vw, 34px);
  }
  .selection-panel { padding-top: 9px; }
  .selection-panel .panel-title { margin-bottom: 10px; }
  .selection-panel .panel-title h2 { font-size: 20px; }
  .mode-tabs { margin-bottom: 10px; }
  .mode-tabs button { padding-bottom: 8px; }
  .catalog-tools { top: 64px; margin-bottom: 8px; }
  .category-filter { position: static; margin-bottom: 11px; padding: 5px 0; }
  .category-label { margin-bottom: 5px; }
  .category-chips { margin: 0; gap: 6px; }
  .category-chip { min-height: 32px; padding: 5px 9px; }
  .builder-product img { height: clamp(126px, 11vw, 166px); }

  .review-panel {
    position: sticky;
    top: 72px;
    max-height: none;
    overflow: visible;
    padding: 12px 14px 13px;
  }
  .review-panel:has(.scheme-workflow[open]),
  .review-panel:has(.shot-lead[open]) { position: relative; top: auto; }
  .review-panel .panel-title {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2px 9px;
    margin: 0 0 7px;
    padding: 0 0 9px;
  }
  .review-panel .panel-title h2 { font-size: 20px; }
  .review-panel .panel-title small { display: none; }
  .review-title-actions button { min-height: 31px; padding: 5px 8px; }
  .stage-style-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 7px;
    padding: 0 0 7px;
  }
  .stage-style-heading { display: block; }
  .stage-style-heading strong { white-space: nowrap; }
  .stage-style-heading small { display: none; }
  .stage-style-options { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-style-option { min-height: 32px; padding: 4px 5px; }
  .stage-style-swatch { width: 21px; height: 21px; }
  .review-showcase {
    grid-template-columns: minmax(210px, 34%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 5px 15px;
  }
  .studio-workspace .review-showcase .selected-stage {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    max-width: min(100%, 272px);
    height: auto;
    aspect-ratio: 3 / 4;
    align-self: start;
  }
  .review-details .quote-summary {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }
  .review-details .quote-summary > div:first-child { display: none; }
  .review-details .quote-summary > div:not(.budget-status) { padding: 4px 0; }
  .review-details .quote-summary #unitQuote { font-size: 22px; }
  .review-details .quote-summary .scheme-quantity { padding: 4px 0; }
  .review-details .quote-summary .scheme-quantity input { height: 31px; width: 112px; }
  .review-details .quote-summary .budget-status { margin-top: 3px; }
  .review-details .selected-items {
    grid-column: 2;
    grid-row: 2;
    max-height: clamp(210px, 29vh, 265px) !important;
    overflow-y: auto;
    align-content: start;
    gap: 5px;
    scrollbar-width: thin;
  }
  .review-details .selected-items:not(:empty)::before { margin: 3px 0 0; font-size: 11px; }
  .review-details .selected-card { min-height: 63px; padding: 5px 7px; grid-template-columns: 50px minmax(0, 1fr) 24px; gap: 8px; }
  .review-details .selected-card img { width: 50px; height: 50px; }
  .review-details .selected-card > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1px 7px;
    align-items: center;
  }
  .review-details .selected-card b { font-size: 12px; line-height: 1.3; }
  .review-details .selected-card span,
  .review-details .selected-card small { font-size: 10px; line-height: 1.3; }
  .review-details .selected-card b,
  .review-details .selected-card span,
  .review-details .selected-card small { grid-column: 1 / -1; }
  .review-details .selected-card small { max-height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .review-details .selected-card .selected-role-switch,
  .review-details .selected-card .selected-use-package { grid-column: 1; justify-self: start; min-height: 23px; margin: 2px 0 0; padding: 2px 5px; }
  .review-details .selected-card .selected-color { grid-column: 2; margin: 2px 0 0; white-space: nowrap; }
  .review-details .selected-card .selected-color select { min-height: 23px; max-width: 83px; padding: 1px 3px; }
  .review-details .selected-card .selected-color:only-child { grid-column: 1 / -1; }
  .review-showcase .review-details .review-action {
    grid-column: 1 / -1;
    grid-row: 3;
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 40%);
    gap: 5px 10px;
    align-items: end;
    margin: 7px 0 0;
    padding: 9px 0 0;
    box-shadow: none;
  }
  .review-action .scheme-name-label { grid-column: 1 / -1; margin: 0; }
  .review-action #schemeName { grid-column: 1; grid-row: 2; min-height: 36px; }
  .review-action .review-primary-actions { grid-column: 2; grid-row: 2; margin: 0; }
  .review-primary-actions button { min-height: 36px; padding: 6px; font-size: 11px; }
  .review-action #submitScheme,
  .review-action #submissionShortcut,
  .review-action .quote-notice,
  .review-action #builderMessage { grid-column: 1 / -1; }
  .review-action #submitScheme,
  .review-action #submissionShortcut { min-height: 32px; margin-top: 2px; }
  .review-action #builderMessage { margin-top: 0; }
  #shotLead { margin: 7px 0 0; padding: 0; }
  #shotLead summary { padding: 7px 10px; color: #33503a; font-size: 11px; font-weight: 650; }
  #shotLead .shot-lead-actions { padding: 0 10px 10px; margin: 0; }
  .scheme-workflow { margin: 7px 0 0; padding: 0; }
}

@media (min-width: 1121px) and (max-height: 800px) {
  .review-showcase { grid-template-columns: minmax(190px, 31%) minmax(0, 1fr); }
  .studio-workspace .review-showcase .selected-stage { max-width: 230px; }
  .review-details .selected-items { max-height: 260px !important; }
  .review-details .quote-summary .scheme-quantity { padding: 2px 0; }
  .review-action .quote-notice { font-size: 9px; }
}

@media (max-width: 1120px) {
  .studio { padding-top: 16px; }
  .studio-heading { margin-bottom: 14px; }
  .studio-heading h1 { margin: 4px 0 3px; font-size: 28px; }
  .review-panel { overflow: visible; max-height: none; }
  .review-details .selected-items { overflow: visible; max-height: none; }
  .review-showcase .review-details .review-action { position: static; }
  #shotLead { padding: 0; }
  #shotLead summary { padding: 9px 11px; font-size: 11px; font-weight: 650; }
  #shotLead .shot-lead-actions { padding: 0 11px 11px; margin: 0; }
  .scheme-workflow { padding: 0; }
}

@media (max-width: 700px) {
  .studio-heading > p { font-size: 11px; }
  .review-showcase .review-details .review-action { display: flex; margin: 8px 0 0; padding: 10px 0 0; }
  .review-showcase .review-details .review-action #schemeName { width: 100%; }
  .scheme-workflow .scheme-heading small { display: none; }
  .scheme-workflow .scheme-heading #schemeCount { font-size: 10px; }
}