/* Reference catalogs use the desk width, not the narrow article column. */
.content-wrapper.database-layout { max-width: 1280px; width: min(100% - 32px, 1280px); margin-inline: auto; display: block; }
.database-layout .database-content { width: 100%; max-width: none; }
.database-content > p:not(.page-intro):not(.db-count), .database-content > h2 { max-width: 820px; }
.database-content .db-eyebrow { font: 700 .75rem var(--font-ui); text-transform: uppercase; letter-spacing: .12em; }
.database-content .db-switch { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.2rem 0 2rem; }
.database-content .db-switch a { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--line-rust); background: var(--paper-light); font: 700 .9rem var(--font-ui); }
.database-content .db-switch a[aria-current="page"] { background: var(--sage-dark); color: #fff !important; }
.database-content .db-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; padding: 1rem; margin: 1.25rem 0 .5rem; }
.database-content .db-controls label { width: 100%; font: 700 .8rem var(--font-ui); }
.database-content .db-controls input { flex: 2 1 230px; }
.database-content .db-controls select { flex: 1 1 150px; }
.database-content .db-controls input, .database-content .db-controls select, .database-content .db-controls button { min-height: 42px; padding: .45rem .7rem; border: 1px solid var(--line-rust); border-radius: 2px; background: var(--paper-highlight); color: var(--text); font: 600 .85rem var(--font-ui); }
.database-content .db-controls button { cursor: pointer; background: var(--sage-dark); color: #fff; }
.database-content .db-controls :focus-visible, .database-content .db-switch a:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.database-content .db-controls .db-count { width: 100%; margin: .2rem 0 0; font: 700 .85rem var(--font-ui); }
.database-content [data-db-empty] { padding: .7rem; background: var(--paper-light); }
.database-content .db-table-scroll { max-height: 78vh; overflow: auto; }
.database-content .db-table-scroll table { min-width: 920px; }
.database-content .db-table-scroll th { position: sticky; top: 0; z-index: 1; background: var(--paper-light); }
.database-content .db-table-scroll tr[hidden] { display: none; }
.database-content .db-table-scroll td { vertical-align: top; }
@media(max-width: 680px) { .content-wrapper.database-layout { width: 100%; } .database-content .db-table-scroll { margin-inline: 0; } }

/* On phones the comparison table becomes compact labelled records, not a 920px pan. */
@media(max-width:680px) {
 .database-content .db-table-scroll { max-height:none; overflow:visible; border:0; }
 .database-content .db-table-scroll table,
 .database-content .db-table-scroll tbody,
 .database-content .db-table-scroll tr { display:block; width:100%; min-width:0; }
 .database-content .db-table-scroll thead { display:none; }
 .database-content .db-table-scroll tr[data-search] { margin:0 0 .75rem; padding:.75rem; background:var(--paper-light); border:1px solid #95836D; }
 .database-content .db-table-scroll td { display:block; width:100%; min-height:0; padding:.2rem 0; border:0; overflow-wrap:anywhere; line-height:1.4; }
 .database-content .db-table-scroll td::before { content:attr(data-label) ': '; display:inline; font:700 .75rem var(--font-ui); color:#514138; }
 .database-content .db-table-scroll tr[hidden] { display:none; }
}

.database-content .db-context-images { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0; }
.database-content .db-context-images img {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
@media(max-width:680px){.database-content .db-context-images{grid-template-columns:1fr;}}

/* Keep legacy commission/pattern field groups at the full database width. */
.database-content .db-control-fields { display:flex;flex-wrap:wrap;gap:.65rem;align-items:end;width:100%; }
.database-content .db-control-fields label { width:100%; }
.database-content .db-control-fields input { flex:2 1 230px; }
.database-content .db-control-fields select { flex:1 1 150px; }
.database-content .db-controls [hidden], .database-content .db-table-scroll [hidden] { display:none !important; }
@media(max-width:680px) {
 .database-content .db-controls input, .database-content .db-controls select, .database-content .db-control-fields input, .database-content .db-control-fields select { width:100%;flex-basis:100%; }
 .database-content .db-table-scroll td[data-label="Completed"] { display:flex;align-items:center;gap:.5rem; }
}