/* Keep long values, action rows and horizontal tables inside their panels. */
#dashboard .mainarea,.shell,.main,.content,.panel,.card,.stat{min-width:0}
.detailrow{gap:16px}.detailrow>span,.detailrow>strong{min-width:0;overflow-wrap:anywhere}
#connectedBillers small{font-family:'Geist Mono',monospace;overflow-wrap:anywhere}
#connectedBillers .detailrow{flex-wrap:wrap;line-height:1.6}
.sidebar .navbtn,.sidebar .nav,.sidebar nav a{font-weight:600}
button:focus-visible,a:focus-visible{outline:3px solid #83b4ff;outline-offset:3px}
@media(max-width:650px){.detailrow{flex-wrap:wrap;gap:8px}.detailrow>span:last-child{text-align:left}.panelhead,.heading{gap:16px}.iw-panel .iw-panel{padding:18px 0;border:0;box-shadow:none}.topbar .crumb{min-width:0}.tablewrap{max-width:100%;overscroll-behavior-x:contain}.queue-tools input,.queue-tools select{min-width:0;max-width:100%}.queue-tools input{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.view.active{animation:none}html{scroll-behavior:auto}}

/* Consistent separation between page introductions, notices and their content. */
.content>.notice{margin-bottom:24px}.content>.pagehead .eyebrow{display:block;margin-bottom:12px}
.content>.view>.panel,.content>.view>.grid{margin-top:0}.main>#content> .notice{margin-bottom:22px}
#overview .overview-start-grid{align-items:stretch}#overview .overview-start-grid>.panel{height:100%}
#overview .overview-start-grid .cards{grid-template-columns:1fr}#overview .overview-start-grid .card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px}
#overview .overview-start-grid .card>*{grid-column:1}#overview .overview-start-grid .card .btn{grid-column:2;grid-row:1/6;align-self:center;margin:0;white-space:nowrap}
@media(min-width:1350px){#overview .overview-start-grid .cards{grid-template-columns:repeat(3,minmax(0,1fr))}#overview .overview-start-grid .card{display:flex}}
@media(max-width:760px){#overview .overview-start-grid .card{display:flex}#overview .overview-start-grid>.panel{height:auto}}
