/* Compact question rows, grouped by the saved Topic field. */
.sop-topic{margin:0 0 18px}.sop-topic-title{font:600 13px 'DM Sans',Arial,sans-serif;color:#30291f;margin:10px 3px 7px}.sop-topic-title span{font-size:11px;font-weight:400;margin-left:6px}.howto-list{gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden}.howto-list .howto{border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none}.howto-list .howto:last-child{border-bottom:0}.sop-heading-row{display:flex;align-items:center}.sop-heading-row .howto-head{flex:1;min-width:0;width:auto;padding:10px 12px;min-height:40px}.sop-heading-row .howto-q{font-size:13px;line-height:1.4}.sop-heading-row .howto-admin-btns{padding-right:10px}.sop-context{font-size:13px;color:#40362d;margin:4px 0 12px}.howto-body{padding:8px 14px 16px}.howto-head:focus-visible{outline:2px solid #a93963;outline-offset:-2px}@media(max-width:700px){.sop-heading-row .howto-head{min-height:44px}.sop-heading-row .howto-q{white-space:normal}}
/* Individual compact resource cards with a narrow gap between contacts. */
.res-grid{gap:7px;background:transparent;border:0;border-radius:0;overflow:visible}
.res-grid>.res-item{background:rgba(255,255,255,.78);border:1px solid var(--border);border-left-width:4px;border-radius:8px;box-shadow:none}
.res-grid>.res-item:last-child{border-bottom:1px solid var(--border)}
.res-grid>.res-item:hover{background:var(--sand-light)}
.res-grid>.res-item.open{background:rgba(255,255,255,.9)}
/* Category containers are not cards; omit the decorative inset highlight. */
.cat-section.vl-surface,.cat-section.vl-surface:hover{box-shadow:none!important}

.resource-private-badge{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:5px;background:#eee0eb;color:#704565;font:500 10px/1.5 "Segoe UI",sans-serif;white-space:nowrap}#fVisibility+small{display:block;margin-top:6px;font-size:11px;line-height:1.5;color:#65564a}
.sop-meta{display:flex;flex-wrap:wrap;gap:8px 26px;padding:0 0 18px;margin:0 0 20px;border-bottom:1px solid #dfd2c2;font-size:13px;line-height:1.7;color:#352d26}.sop-meta strong{font-weight:600;margin-right:7px;color:#231d18}.sop-document{max-width:none;overflow-wrap:anywhere;color:#352d26;font-size:13px;line-height:1.7}.sop-document h3{font:600 14px/1.4 'DM Sans',sans-serif;margin:26px 0 10px;color:#231d18}.sop-document h3:first-child{margin-top:0}.sop-document p{margin:10px 0}.sop-document ul,.sop-document ol{padding-left:22px;margin:8px 0 18px}.sop-document li{padding-left:5px;margin:7px 0}.sop-document strong{font-weight:600}.sop-document a,.sop-form-link{color:#794b70;text-decoration:underline;text-underline-offset:3px}.sop-form-link{display:inline-block;margin-top:20px;padding:8px 13px;border:1px solid #cdb8c5;border-radius:7px;background:#f3eaf0;font-size:12px;font-weight:500;text-decoration:none}.howto.open .howto-body{padding:15px 22px 24px}.sop-format-tools{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}.sop-format-tools button{background:#fffaf5;border:1px solid #d8cbbb;border-radius:5px;padding:5px 8px;font:12px inherit;color:#493f35;cursor:pointer}#fSopContent{min-height:260px;line-height:1.6;resize:vertical}#sopContentFields[hidden],#notesField[hidden]{display:none!important}

/* Use the SOP reading font consistently throughout Resources. */
.sop-meta,.sop-document,.cat-section,.pinned-section,.modal,.search-wrap,.result-count{font-family:'DM Sans',sans-serif}
.cat-title,.cat-action,.topic-count,.category-count-note,.form-section-label,.modal h2,.empty strong,.resource-private-badge{font-family:'DM Sans',sans-serif}
.res-detail,.res-meta-line,.res-notes,.howto-ctx,.howto-steps li,.howto-notes,.sop-context{font-size:13px;line-height:1.7;color:#352d26}
.sop-meta,.sop-document{font-size:13px;line-height:1.7;color:#352d26}
.sop-format-tools button{font-family:'DM Sans',sans-serif;font-size:12px}

/* Align filters and resource content with the hub navigation. */
.toolbar-inner,#resourcesMain{box-sizing:border-box;width:100%;max-width:1220px;margin-left:auto;margin-right:auto}

/* Contacts use the same quiet, joined rows as SOPs. */
.res-grid:has(>.res-contact){gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.res-grid>.res-contact{border:0;border-bottom:1px solid var(--border);border-radius:0;padding:10px 12px;min-height:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center}
.res-grid>.res-contact:last-child{border-bottom:0}
.res-contact .res-title{font-size:13px;font-weight:600;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.res-contact .res-summary{grid-column:auto;justify-content:flex-start;text-align:left}
.res-contact .res-summary .res-detail{text-align:left;font-size:12px;line-height:1.4}
.res-contact .res-topic-tag{margin:0;white-space:normal;overflow-wrap:anywhere;font-weight:500}
.res-contact .res-phone-cell{grid-column:auto;justify-content:flex-end}
.res-contact .res-phone{min-height:0;padding:4px 0}
.res-contact .res-phone-num{font-size:12px;font-weight:500}
.res-contact .res-more{grid-column:1/-1}
@media(max-width:680px){
 .res-grid>.res-contact{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) 94px 14px;gap:6px;padding:10px 8px;min-height:44px}
 .res-contact .res-phone svg{display:none}
 .res-contact .res-phone-num{font-size:11px}
 body.is-admin .res-grid>.res-contact{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) 94px 70px}
 body.is-admin .res-contact .res-actions{flex-wrap:wrap;max-width:70px}
}
/* Let categories and Expand/Collapse All share the full wrapping row. */
@media(max-width:1100px),(pointer:coarse) and (max-width:1366px){
 .chips-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px}
 .chips-row .chips{display:contents}
 .chips-row .chip{flex:0 0 auto;max-width:100%;white-space:normal}
 .chips-row #expandAllBtn{align-self:center;margin-left:auto;flex:0 0 auto}
}


/* Keep unlocked page actions on the same content edges as search and rows. */
body>header{box-sizing:border-box;width:100%;max-width:1220px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
@media(max-width:680px){body>header{padding-left:14px;padding-right:14px}}