/* Workspace layout and readable form sizing. */
.app-header {min-height:73px;height:auto;padding-block:14px;gap:12px}
.app-header .brand {gap:9px;min-width:0}
.app-header .brand img {width:40px;height:40px;flex:none}
.app-header .brand strong {font-weight:760}
.app-header .brand small {letter-spacing:.11em}
.app-header .header-note {color:#43574a;font-size:14px}
.layout-bar,.layout-presets,.settings-tabs {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.layout-bar {
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
#preview-size-label {font-size:15px;font-weight:650;color:#34483c}
.layout-presets button,.settings-tabs button {
  min-height:42px;
  padding:8px 11px;
  font-size:14px;
  font-weight:650;
  border:1px solid #cbd5c7;
  border-radius:6px;
  background:#fff;
}
.layout-presets button[aria-pressed="true"],.settings-tabs button[aria-pressed="true"] {
  border-color:#8fa78e;
  background:#e6efe2;
}
.settings-tabs button {display:inline-flex;align-items:center;gap:6px}
.settings-tabs .step-number {
  display:inline-grid;
  place-items:center;
  min-width:21px;
  min-height:21px;
  padding:1px 3px;
  border-radius:50%;
  background:#e9eee6;
  color:#3a5341;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.settings-tabs button[aria-pressed="true"] .step-number {background:#506c55;color:#fff}
.workspace {grid-template-columns:minmax(360px,1fr) minmax(300px,var(--preview-width,50%))}
.workspace[data-preview-size="small"] {--preview-width:40%}
.workspace[data-preview-size="expanded"] {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr;
}
.workspace [hidden] {display:none!important}
.config-panel {min-width:0;padding:22px clamp(16px,2.25vw,30px)}
.workspace[data-preview-size="expanded"] .config-panel {
  padding-block:12px;
  border-right:0;
  border-bottom:1px solid var(--border);
}
.workspace[data-preview-size="expanded"] .config-panel > :not(.layout-bar) {display:none}
.workspace[data-preview-size="expanded"] .layout-bar {padding-top:0;border-top:0}
.intro h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,2.6vw,34px);
  font-weight:400;
  letter-spacing:.025em;
  text-wrap:balance;
}
.intro h1 br {display:none}
.intro p {font-size:16px;color:#43574a}
.intro .guide-open {font-size:14px;margin-bottom:16px}
.settings-tabs {margin-bottom:14px}
.section-heading h2 {font-size:22px}
.section-heading h2>span {font-size:13px}
.config-panel .hint,.config-panel .palette-note,.config-panel .selected-color,
.config-panel .request-options,.request-section #export-status,.worksheet-link {
  color:#495c4e;
  font-size:14px;
  line-height:1.55;
}
.config-panel .selected-color {margin-top:0}
.config-panel .section-actions .quiet-button,.config-panel .quiet-button,
.setup-actions button,.worksheet-link span,.text-button span,.config-panel .text-button {font-size:14px}
.config-panel .count-line,.config-panel .personal-size,.config-panel .field-label,
.config-panel .base-card strong,.config-panel .color-heading,.config-panel .wide-input {font-size:16px}
.config-panel .field-label span,.base-card small,.config-panel .email-settings {font-size:14px}
.config-panel .base-card small {color:#4c6050}
.config-panel .stepper {height:42px}
.config-panel .stepper input,.config-panel input[type="number"],.config-panel input[type="text"] {font-size:16px}
.table-head,.socket-row {grid-template-columns:20px repeat(2,minmax(0,1fr)) minmax(0,1.15fr) minmax(0,1fr);gap:6px}
.table-head,.socket-row>span {font-size:14px;color:#405548;overflow-wrap:anywhere}
.socket-row input {height:43px;padding-inline:6px}
.socket-row input.has-size-warning {border-color:#a62e38;color:#8f2730;background:#fff1ef}
.socket-size-message {grid-column:2/-1;margin:0 0 7px;font-size:14px;line-height:1.45;color:#8f2730}
.preview-panel {
  display:grid;
  grid-template-rows:auto auto minmax(270px,1fr) auto auto auto;
  gap:10px;
  height:calc(100dvh - 12px);
  min-height:560px;
  padding:20px clamp(12px,2vw,26px);
}
.preview-panel .viewer-top,.preview-panel .viewer-tools,.preview-panel .viewer-help,
.preview-panel .measurement-bar,.preview-panel .preview-footer {position:static;min-width:0}
.preview-panel .viewer-top {grid-row:1;gap:8px}
.preview-panel .viewer-top h2 {font-size:clamp(19px,2vw,26px)}
.preview-panel .viewer-tools {grid-row:2;justify-content:flex-start;flex-wrap:wrap}
.preview-panel .view-buttons,.preview-panel .tool-buttons {max-width:100%;flex-wrap:wrap}
.preview-panel .viewer-tools button {font-size:14px;min-height:36px}
.preview-panel #viewer {grid-row:3;position:relative;inset:auto;overflow:hidden;border-radius:8px}
.preview-panel .viewer-help {grid-row:4;flex-wrap:wrap;font-size:12px;color:#47594a}
.preview-panel .measurement-bar {grid-row:5;padding:12px 0}
.preview-panel .measurement-bar>div {min-width:0;padding-inline:8px}
.preview-panel .measurement-bar>.base-metric {border-right:0}
.preview-panel .measurement-bar>.preview-estimate {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  border-top:1px solid #d5ddcb;
  margin-top:9px;
  padding-top:9px;
}
.preview-panel .preview-estimate span {margin-bottom:0}
.order-estimate {
  border:1px solid #cbd5c7;
  border-radius:6px;
  background:#f0f5ec;
  padding:10px 12px;
  margin-bottom:14px;
}
.order-estimate p {margin:0}
.order-estimate strong {margin-left:6px;font-size:20px;font-variant-numeric:tabular-nums}
.quote-review {
  margin-top:18px;
  padding:14px;
  border:1px solid #cbd5c7;
  border-radius:6px;
  background:#f0f5ec;
}
.quote-review h3 {margin:0;font-size:18px}
.quote-review dl {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:6px 12px;
  font-size:14px;
}
.quote-review dt {font-weight:650}
.quote-review dd {margin:0;overflow-wrap:anywhere}
.review-table-scroll {overflow-x:auto}
.quote-review table {width:100%;border-collapse:collapse;font-size:14px}
.quote-review th,.quote-review td {
  padding:6px 5px;
  border-bottom:1px solid #cbd5c7;
  text-align:left;
  vertical-align:top;
  overflow-wrap:anywhere;
}
.review-confirm {display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:15px;font-weight:650}
.review-confirm input {flex:none;width:18px;height:18px;margin:0;accent-color:#476637}
.request-section button:disabled {opacity:.55;cursor:default}
.preview-panel .measurement-bar span {font-size:10px;color:#4d6353}
.preview-panel .measurement-bar strong {font-size:clamp(13px,1.5vw,19px);white-space:normal}
.preview-panel .measurement-bar small,.preview-panel .preview-footer {font-size:12px;color:#47594a}
.preview-panel .preview-footer {grid-row:6;flex-wrap:wrap}
.preview-panel .preview-footer span:last-child {display:inline}
.preview-panel #validation {bottom:150px;font-size:14px}
@media(max-width:760px) {
  .workspace {display:grid;grid-template-columns:minmax(0,1fr)}
  .preview-panel {order:0;position:relative;min-height:0;height:auto;grid-template-rows:auto auto minmax(235px,var(--mobile-preview-height,45vh)) auto auto auto}
  .workspace[data-preview-size="small"] {--mobile-preview-height:30vh}
  .workspace[data-preview-size="expanded"] {--mobile-preview-height:65vh}
  .config-panel {max-width:none;width:100%;margin:0}
  .settings-tabs {gap:6px}
}
@media(max-width:390px) {
  .app-header {flex-wrap:wrap;gap:7px}
  .app-header .brand img {width:34px;height:34px}
}