/* Local, renderable design documentation uses the application's real controls. */
.design-reference .reference-top-note { margin-left: auto; font-weight: 400; }
.values-reference-intro { margin: var(--space-4) 0; color: var(--muted); }
.values-reference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 var(--space-8); }
.values-reference-grid > section { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.design-reference h2 { margin: 0 0 var(--space-2); font: 600 var(--text-body)/var(--line-body) var(--sans); }
.values-reference-grid p { color: var(--muted); font-size: var(--text-meta); line-height: var(--line-meta); }
.reference-components { padding-block: var(--space-4); border-top: 1px solid var(--line); }
.reference-components__row { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.reference-components__row > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.reference-components__row > div > span { font-size: var(--text-meta); color: var(--muted); }
.reference-components .text-input { width: 184px; height: var(--control-height); min-height: var(--control-height); }
.reference-state-section { padding: var(--space-6) 0 var(--space-4); border-top: 1px solid var(--line); }
.reference-state-section:first-of-type { padding-top: 0; border-top: 0; }
.reference-state-section > p { max-width: 760px; margin-bottom: var(--space-3); color: var(--muted); font-size: var(--text-meta); line-height: var(--line-meta); }
.reference-state-row { display: grid; grid-template-columns: 168px repeat(5,minmax(0,1fr)); gap: var(--space-3); align-items: center; min-height: 44px; padding: var(--space-2) 0; border-top: 1px solid var(--line-soft); }
.reference-state-head { min-height: 24px; padding: 0 0 var(--space-1); border: 0; color: var(--muted); font-size: var(--text-meta); }
.reference-state-row small { display: block; color: var(--muted); font-size: var(--text-meta); line-height: var(--line-meta); }
.reference-state-row > div:first-child > small { margin-top: 0; }
.design-reference--states { --page-bottom: 0px; }
.reference-state-row { --input-height: var(--control-height); }
.reference-state-cell { min-width: 0; }
.reference-state-description { grid-column: span 2; color: var(--muted); font-size: var(--text-meta); }
.reference-state-row :is(.text-input,.select-input) { width: 100%; height: var(--control-height); min-height: var(--control-height); }
.reference-state-row textarea.text-input { height: 56px; resize: none; }
.design-reference [aria-invalid="true"] { border-color: var(--red); }
.reference-state-row .field-error { color: var(--red); margin-top: var(--space-1); }
.design-reference .button--danger-fill { background: var(--red); border-color: var(--red); color: var(--surface); }
[data-reference-state="hover"] .button--primary { background: var(--accent-hover); border-color: var(--accent-hover); }
[data-reference-state="hover"] .button--secondary { border-color: var(--secondary-hover-line); }
[data-reference-state="hover"] :is(.button--quiet,.button--icon) { background: var(--line-soft); }
[data-reference-state="hover"] .button--danger-fill { background: var(--red-hover); border-color: var(--red-hover); }
[data-reference-state="hover"] :is(.text-input,.select-input) { border-color: var(--control-hover-line); }
[data-reference-state="focus"] > :is(.button,.reference-nav,.reference-studio,.reference-settings,.reference-tab) { outline: var(--focus-outline); outline-offset: 1px; }
[data-reference-state="focus"] > :is(.text-input,.select-input) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.reference-check { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.reference-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
[data-reference-state="disabled"] .reference-check { opacity: var(--disabled-opacity); }
[data-reference-state="disabled"] .reference-check input { opacity: 1; }
.reference-nav,.reference-settings { display: flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-control); }
.reference-nav svg { width: var(--sidebar-icon); height: var(--sidebar-icon); color: var(--muted); }
.reference-studio { display: flex; align-items: center; height: var(--studio-card-height); padding: var(--space-3); border-radius: var(--studio-card-radius); background: var(--studio-card); overflow: hidden; white-space: nowrap; font-size: var(--text-meta); font-weight: 600; }
.reference-tab { display: inline-flex; align-items: center; height: var(--tab-height); padding: 0 var(--space-2); border-radius: var(--radius-control); color: var(--muted); }
.reference-table-row,.reference-grid-cell { display: flex; align-items: center; height: var(--row-height); padding: 0 var(--space-3); }
.reference-grid-cell { padding-inline: var(--space-2); }
.reference-menu { display: block; padding: var(--space-1); border: 1px solid var(--input-line); border-radius: var(--radius-menu); box-shadow: 0 8px 28px #30282a26; }
.reference-menu .button { justify-content: flex-start; width: 100%; }
[data-reference-state="hover"] :is(.reference-nav,.reference-settings,.reference-table-row,.reference-grid-cell) { background: var(--hover); }
[data-reference-state="hover"] .reference-studio { background: var(--studio-card-hover); }
[data-reference-state="hover"] .reference-tab { background: var(--thumbnail-placeholder); color: var(--ink); }
[data-reference-state="selected"] :is(.reference-nav,.reference-settings,.reference-tab) { background: var(--nav-selected); color: var(--ink); }
[data-reference-state="selected"] .reference-nav svg { color: var(--accent); }
[data-reference-state="selected"] .reference-studio { background: var(--studio-card-selected); }
[data-reference-state="selected"] .reference-table-row { background: var(--selected); box-shadow: inset 2px 0 var(--accent); }
[data-reference-state="focus"] .reference-table-row { outline: var(--focus-outline); outline-offset: -2px; }
[data-reference-state="selected"] .reference-grid-cell,[data-reference-state="focus"] .reference-grid-cell { box-shadow: inset 0 0 0 2px var(--accent); }
[data-reference-state="disabled"] .reference-grid-cell { background: var(--private-tint); }
[data-reference-state="disabled"] .reference-table-row { color: var(--tertiary); }
[data-reference-state="focus"] .reference-menu .button { outline: var(--focus-outline); outline-offset: 1px; }
.reference-status { display: inline-flex; align-items: center; gap: var(--tab-count-gap); color: var(--amber); font-size: var(--text-meta); }
.reference-status::before { content: ""; width: var(--status-dot-size); height: var(--status-dot-size); border-radius: 0; background: currentColor; }
.reference-status--hover { color: var(--red); }
.reference-status--selected { color: var(--ink); }
.reference-status--disabled { color: var(--tertiary); }
.reference-status--disabled::before { content: none; }
@media (max-width:760px) { .values-reference-grid { grid-template-columns: 1fr; } .reference-state-section { overflow-x: auto; } .reference-state-row { min-width: 940px; } }

[data-reference-state="hover"] .reference-check input { border-color: var(--checkbox-hover-line); }
[data-reference-state="focus"] .reference-check input { border-color: var(--accent); outline: var(--focus-outline); outline-offset: 0; }
.reference-nav { color: var(--nav-ink); }