/* Settings compose the shared foundation; the live reference defines this content layout. */
.settings-page { --page-bottom: 0; grid-template-columns: var(--settings-nav-width) minmax(0, 1fr); column-gap: var(--space-8); }
.workspace-content > main.settings-page > .page-header, .workspace-content > .settings-import-page > .page-header { margin-bottom: 0; }
.settings-page .settings-navigation { margin: 0; padding: var(--space-4) 0 0; gap: var(--space-1); top: 0; }
.settings-page .settings-navigation .button[aria-current="page"] { background: var(--nav-selected); color: var(--ink); font-weight: 400; }
.settings-page .settings-navigation .button { min-height: var(--control-height); height: var(--control-height); padding: 0 var(--space-3); line-height: var(--line-workspace); white-space: nowrap; }
.settings-page .settings-navigation .button:not([aria-current="page"]):hover { background: var(--hover); }
.settings-page .settings-content { max-width: var(--settings-content-width); padding-top: var(--space-4); --field-label-width: var(--settings-label-width); --input-height: var(--control-height); }
.settings-page .settings-panel-header { padding: 0 0 var(--space-4); }
.settings-page .settings-panel-header h2 { margin: 0; font: 600 var(--title-panel)/var(--settings-title-line) var(--sans); }
.settings-page .settings-panel-header > p { margin: var(--compact-copy-gap) 0 0; font: 400 var(--text-ui)/var(--line-body) var(--sans); color: var(--muted); }
.settings-page .settings-panel-body > .read-only-fields { display: block; }
.settings-page .settings-panel-body :is(.settings-group, .settings-section, .settings-profile, .settings-library) { margin: 0; padding: var(--space-4) 0; border: 0; border-top: 1px solid var(--line); }
.settings-page .settings-panel-body > :is(.settings-group, .settings-profile):first-child,
.settings-page .settings-panel-body .read-only-fields > :is(.settings-library, .settings-group, .settings-section):first-child,
.settings-page .settings-panel-body > .read-only-fields > form:first-child > .settings-group:first-of-type { padding-top: 0; border-top: 0; }
.settings-page .settings-group { display: block; }
.settings-page .section-heading { min-height: var(--line-body); margin: 0 0 var(--space-2); align-items: center; }
.settings-page .edit-group .section-heading, .settings-page .settings-library > .section-heading, .settings-page .appearance-preview-section > .section-heading { min-height: var(--control-height); }
.settings-page .section-heading h2, .settings-page .settings-section > h2 { margin: 0; font: 600 var(--title-section)/var(--line-body) var(--sans); letter-spacing: -.025em; }
.settings-page .edit-icon { width: var(--search-icon-size); height: var(--search-icon-size); color: var(--muted); stroke-width: 1.6; }
.settings-page .summary-specs { margin-top: calc(-1 * var(--space-1)); }
.settings-page .summary-specs > div { min-height: var(--field-row-height); padding: 0; grid-template-columns: var(--settings-label-width) minmax(0, 1fr); gap: var(--space-3); }
.settings-page .summary-specs > .settings-value-tall { align-items: start; padding: var(--space-1) 0; }
.settings-page .summary-specs > .settings-value-tall > dt { padding-top: var(--tab-count-gap); }
.settings-page .summary-specs dt { font: 400 var(--text-meta)/var(--line-meta) var(--sans); }
.settings-page .summary-specs dd { font: 400 var(--text-ui)/var(--line-body) var(--sans); }
.settings-page .settings-preserve-lines { white-space: pre-wrap; }
.settings-page .field-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: calc(-1 * var(--space-1)); }
.settings-page .field-rows .form-field { grid-template-columns: var(--settings-label-width) minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); min-height: var(--field-row-height); }
.settings-page .field-rows .field-label { font: 400 var(--text-meta)/var(--line-meta) var(--sans); }
.settings-page :is(.text-input, .select-input) { min-height: var(--control-height); height: var(--control-height); padding-block: 0; }
.settings-page #production .text-input { width: 96px; }
.settings-page .brand-color-control { gap: var(--space-2); }
.settings-page .brand-color-control input[type="color"] { width: var(--control-height); height: var(--control-height); padding: var(--compact-copy-gap); }
.settings-page .brand-color-control input[type="text"] { width: 120px; }
.settings-page textarea.text-input { height: var(--settings-textarea-height); min-height: var(--settings-textarea-height); padding: var(--tab-count-gap) var(--field-padding-x); field-sizing: fixed; resize: none; }
.settings-page .field-rows .form-field:has(textarea) { align-items: start; padding: var(--space-1) 0; }
.settings-page .field-rows .form-field:has(textarea) > .field-label { padding-top: var(--tab-count-gap); }
.settings-page .field-hint, .settings-page .field-help { margin: var(--space-2) 0 0; color: var(--muted); font: 400 var(--text-meta)/var(--line-meta) var(--sans); }
.settings-page .setup-section-intro > p { margin: 0 0 var(--space-2); color: var(--muted); font: 400 var(--text-meta)/var(--line-meta) var(--sans); }
.settings-page .account-email { margin: 0; font: 400 var(--text-ui)/var(--line-body) var(--sans); }
.settings-page .settings-panel-body .edit-group__actions { margin: 0; padding: var(--space-4) 0 0; border: 0; gap: var(--space-2); }
.settings-page .edit-group__actions > .button--quiet:first-child, .settings-footer-leading { margin-right: auto; }
.settings-page .settings-library { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: 0; }
.settings-page .settings-library-add { margin: 0; padding: 0; }
.settings-page .settings-library-record { padding: 0; border-top: 0; }
.settings-page .settings-library-row { min-height: var(--space-12); padding: var(--space-2) 0; gap: var(--space-4); border-top: 1px solid var(--line-soft); }
.settings-page .settings-library-record:first-of-type .settings-library-row { padding-top: 0; border-top: 0; }
.settings-page .settings-library-record:last-child .settings-library-row { padding-bottom: 0; }
.settings-page .settings-library-row strong { display: block; font: 400 var(--text-ui)/var(--line-workspace) var(--sans); }
.settings-page .settings-library-row p { margin: var(--compact-copy-gap) 0 0; color: var(--muted); font: 400 var(--text-meta)/var(--line-meta) var(--sans); }
.settings-page .settings-library-actions { gap: var(--space-1); }
.settings-action-placeholder { display: block; width: var(--control-height); height: var(--control-height); }
.settings-remove-menu .button_to { margin: 0; }
.settings-page .settings-action-row { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.settings-page .settings-action-row > div { min-width: 0; }
.settings-page .settings-action-row p { margin: var(--compact-copy-gap) 0 0; color: var(--muted); font: 400 var(--text-meta)/var(--line-meta) var(--sans); }
.settings-page .settings-action-row > form { flex-shrink: 0; }
.settings-page .settings-footer { margin: 0; border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.settings-page .settings-color { display: inline-flex; align-items: center; gap: var(--space-2); }
.settings-color::before { content: ""; width: var(--space-4); height: var(--space-4); border: 1px solid var(--input-line); border-radius: 0; background: var(--settings-swatch); }
.settings-page .settings-radio-group { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.settings-page .settings-radio-group label { display: inline-flex; align-items: center; gap: var(--tab-count-gap); }
.settings-page .settings-import .edit-group__actions { padding-top: var(--space-4); }
.settings-page .settings-import .section-heading { min-height: var(--line-body); }
.settings-page .appearance-preview-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.settings-page .appearance-preview-section .section-heading { margin: 0; }
.settings-page .appearance-preview-section .section-heading h2 { font-weight: 400; }
.settings-page .appearance-preview-section .appearance-review[open] { grid-column: 1 / -1; }
.settings-page .settings-drawer { position: fixed; inset: 0 0 0 auto; width: min(var(--drawer-width), 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: none; z-index: 70; overflow: hidden; --field-label-width: var(--drawer-label-width); --input-height: var(--control-height); --drawer-scrollbar-width: 15px; }
.settings-page .settings-drawer { transform: translateX(100%); transition: transform var(--motion-drawer) var(--motion-ease), display var(--motion-drawer) allow-discrete; }
.settings-page .settings-drawer[open] { display: flex; flex-direction: column; transform: translateX(0); }
.settings-page .settings-drawer:not([open]), .settings-page .settings-drawer[hidden] { display: none; }
@starting-style { .settings-page .settings-drawer[open] { transform: translateX(100%); } }
.settings-drawer__header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: var(--space-4); border-bottom: 1px solid var(--line); gap: var(--space-3); }
.settings-page .settings-drawer__header h2 { margin: 0; font: 600 var(--title-panel)/var(--line-panel) var(--sans); }
.settings-page .settings-drawer__header p { margin: var(--compact-copy-gap) 0 0; font: 400 var(--text-meta)/var(--line-meta) var(--sans); color: var(--muted); }
.settings-stage-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.settings-stage-ring { width: 16px; height: 16px; flex: 0 0 16px; }
.settings-page .settings-stages .settings-library-row strong { line-height: 19.5px; }
.settings-page .settings-stage-identity p { margin: 0; }
.settings-page .settings-stages .settings-library-record:last-of-type .settings-library-row { padding-bottom: 0; }
.settings-stage-guidance, .settings-stages > .form-errors { grid-column: 1 / -1; }
.settings-stage-protection { margin: 0; padding: var(--space-2) var(--space-3); max-width: 240px; color: var(--muted); font: 400 var(--text-meta)/var(--line-meta) var(--sans); }
.settings-page .settings-stage-removal { left: var(--sidebar-width); }
.settings-page .settings-stage-removal .form-field { display: grid; align-items: center; min-height: var(--field-row-height); margin: var(--space-3) 0 var(--space-1); grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-3); }
.settings-page .settings-stage-removal p { margin: var(--space-2) 0 0; }
.settings-page .settings-stage-removal h2 { margin: 0; }
.settings-page .settings-drawer .settings-stage-form .form-grid.field-rows { margin-bottom: 0; }
.settings-page .settings-stage-form > .field-hint { margin: 0 0 0 calc(var(--drawer-label-width) + var(--space-3)); }
.settings-drawer__body { padding: var(--space-4); min-height: 0; flex: 1; overflow: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; }
/* Match the reference's native gutter even on platforms with overlay scrollbars. */
.settings-drawer__body::-webkit-scrollbar { width: var(--drawer-scrollbar-width); }
.settings-page .settings-drawer__body > form, .settings-page .settings-drawer__body > form > fieldset { display: flex; flex-direction: column; flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; gap: 0; }
.settings-page .settings-drawer .field-rows .form-field { grid-template-columns: var(--drawer-label-width) minmax(0, 1fr); }
.settings-page .settings-drawer .edit-group__actions { width: calc(min(var(--drawer-width), 100vw) - 1px); margin: auto calc(-1 * var(--panel-gutter)) calc(-1 * var(--panel-gutter)); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); flex-shrink: 0; }
.settings-page .settings-drawer .edit-group__actions > [aria-live]:empty { display: none; }
.settings-page .settings-drawer .edit-group__actions > [aria-live] { margin-right: auto; }
.settings-page .settings-drawer .form-grid.field-rows { margin: calc(-1 * var(--space-1)) 0 var(--space-4); gap: 0; }
.settings-page .settings-drawer .qc-template-checks { margin: 0; }
.settings-page .settings-drawer .qc-template-fields { margin: calc(-1 * var(--space-1)) 0 var(--space-1); }
.settings-page .settings-drawer .qc-template-fields .form-field { margin: 0; padding: 0; row-gap: 0; }
.settings-page .settings-drawer .qc-template-fields .form-field:has(.field-hint) { grid-template-rows: var(--field-row-height) auto; }
.settings-page .settings-drawer .qc-template-fields .field-hint { margin: 0; }
.settings-page .settings-checks-group, .settings-page .settings-routing-group { display: grid; grid-template-columns: var(--drawer-label-width) minmax(0, 1fr); column-gap: var(--space-3); margin-bottom: var(--space-4); }
.settings-page .settings-checks-group > .field-label, .settings-page .settings-routing-group > .field-label { align-self: start; min-height: var(--space-6); font: 400 var(--text-meta)/var(--line-meta) var(--sans); }
.settings-page .settings-checks-group .field-hint { margin-top: 0; }
.settings-page .settings-add-check { margin-left: calc(-1 * var(--space-2)); }
.settings-page .settings-drawer .qc-template-required { gap: var(--space-2); padding-top: var(--tab-count-gap); color: var(--muted); font: 400 var(--text-meta)/var(--line-body) var(--sans); }
.settings-page .settings-drawer .qc-template-check { grid-template-columns: minmax(0, 1fr) auto var(--control-height); align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.settings-page .settings-drawer .qc-template-check .form-field { grid-column: auto; }
.settings-page .settings-drawer .qc-template-check .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.settings-page .settings-drawer .qc-template-check > button { width: var(--control-height); padding: 0; color: var(--muted); }
.settings-page .settings-drawer .qc-template-form { margin: 0; }
.settings-page .settings-drawer .settings-add-step { align-self: flex-start; margin: 0 0 var(--space-4) calc(-1 * var(--space-2)); }
.settings-page .settings-drawer .routing-step-fields { display: grid; grid-template-columns: 20px minmax(0, 1fr) 148px var(--control-height); gap: var(--space-2); align-items: center; padding: 0; margin-bottom: var(--space-2); border: 0; }
.settings-page .settings-drawer .routing-step-fields input[data-step-position] { padding: 0; border-color: transparent; text-align: left; appearance: textfield; }
.settings-page .settings-drawer .routing-step-fields input[data-step-position]::-webkit-inner-spin-button, .settings-page .settings-drawer .routing-step-fields input[data-step-position]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.settings-page .settings-drawer .routing-template-form .form-grid.field-rows { margin-bottom: var(--space-1); }
.settings-page .settings-drawer .routing-step-fields[hidden] { display: none; }
.settings-page .settings-drawer .routing-step-fields .form-field { min-width: 0; margin: 0; grid-column: auto; }
.settings-page .settings-drawer .routing-step-fields .field-label:not(.routing-step-remove) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.settings-page .settings-drawer .routing-step-remove { font-size: 0; justify-content: center; margin: 0; }
.settings-page .settings-drawer .routing-step-remove input { width: var(--space-4); height: var(--space-4); }
.settings-page .settings-drawer .ruled-list { border: 0; margin-bottom: 0; }
.settings-page .settings-signoff-field:has(textarea[data-multiline="false"]) { align-items: center; padding: 0; }
.settings-page .settings-signoff-field:has(textarea[data-multiline="false"]) > .field-label { padding-top: 0; }
.settings-page .settings-signoff-field textarea[data-multiline="false"] { min-height: var(--control-height); height: var(--control-height); padding-block: calc((var(--control-height) - var(--line-body) - var(--compact-copy-gap)) / 2); resize: vertical; }
.settings-page .settings-drawer .settings-template-form .form-field:has(textarea) { row-gap: 0; }
.settings-page .settings-drawer .settings-template-form .field-hint { margin-top: 0; }
@media (max-width: 760px) {
  .settings-page { display: block; }
  .settings-page .settings-navigation { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding-top: var(--space-4); margin-bottom: var(--space-4); }
  .settings-page .settings-navigation .button:last-child { grid-column: auto; }
  .settings-page .settings-content { padding-top: 0; }
  .settings-page .summary-specs > div, .settings-page .field-rows .form-field { grid-template-columns: 120px minmax(0, 1fr); }
  .settings-page .settings-drawer .field-rows .form-field { grid-template-columns: 120px minmax(0, 1fr); }
  .settings-page .settings-checks-group, .settings-page .settings-routing-group { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .settings-page .settings-drawer .routing-step-fields { grid-template-columns: 20px minmax(0, 1fr) 100px 20px; gap: var(--space-1); }
  .settings-page .settings-stage-form > .field-hint { margin-left: calc(var(--definition-width) + var(--space-3)); }
  .settings-page .settings-action-row { flex-wrap: wrap; }
  .settings-page .settings-stage-removal .form-field { grid-template-columns: 120px minmax(0, 1fr); }
}