:root{--bad:#c0392b;--warn:#d35400;--ok:#1e8449;--muted:#666;--border:#ddd;--bg:#f6f7f8}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1a1a1a;background:var(--bg)}
main{max-width:1030px;margin:0 auto;padding:1rem}
h1{font-size:1.35rem;margin:.4rem 0}
h2{font-size:1.05rem}
a{color:#1558b0}
.muted{color:var(--muted);font-weight:400;font-size:.9em}

.topnav{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;background:#1a2733;padding:.5rem 1rem}
.topnav a{color:#cdd8e3;text-decoration:none;font-size:.95rem}
.topnav a.brand{color:#fff;font-weight:700;margin-right:.4rem;font-size:1.05rem}
.navlinks{flex:1;display:flex;justify-content:center;flex-wrap:wrap;gap:.15rem}
.navlinks a{padding:.35rem .7rem;border-radius:6px;line-height:1.4}
.navlinks a:hover{background:rgba(255,255,255,.08);color:#fff}
.navlinks a.active{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
/* hamburger toggle — hidden on desktop, shown on narrow screens */
.navtoggle{display:none;flex:none;align-items:center;justify-content:center;background:none;border:0;color:#cdd8e3;padding:.3rem .4rem;border-radius:6px;cursor:pointer;line-height:0}
.navtoggle:hover{background:rgba(255,255,255,.08);color:#fff}

/* account menu (avatar + dropdown) */
.usermenu{position:relative}
.usermenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.usermenu>summary::-webkit-details-marker{display:none}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:#3a4d61;color:#fff;font-weight:600;font-size:.9rem;flex:none}
.usermenu>summary:hover .avatar,.usermenu[open]>summary .avatar{background:#4a627d}
.avatar-lg{width:2.5rem;height:2.5rem;font-size:1.1rem}
.usermenu-pop{position:absolute;right:0;top:calc(100% + .45rem);min-width:12rem;background:#fff;color:#1a2733;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:.35rem;z-index:20}
.usermenu-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .5rem .55rem}
.usermenu-id{display:flex;flex-direction:column;line-height:1.35;white-space:nowrap}
.usermenu-item{display:block;padding:.5rem;border-radius:6px;border-top:1px solid var(--border);color:#1a2733!important;font-size:.9rem}
.usermenu-item:hover{background:var(--bg);color:#1a2733!important}

.flash{background:#fff6d6;border:1px solid #e6d27a;padding:.4rem .8rem;border-radius:6px;margin:.6rem 0}
.flash p{margin:.15rem 0}

.tablewrap{margin:.6rem 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;overflow-x:auto;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
th{text-align:left;padding:.6rem .85rem;background:#f7f8fa;color:#5a6472;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap}
td{text-align:left;padding:.62rem .85rem;border-bottom:1px solid #eef0f3;white-space:nowrap;vertical-align:middle}
tr:last-child td{border-bottom:0}
tr:hover td{background:#f5f9ff}
/* Only free-text note cells wrap (and break long unbreakable tokens like URLs /
   error strings) so they don't force the table past the page width. */
td.note{white-space:normal;overflow-wrap:anywhere;color:var(--muted);min-width:240px;max-width:340px}
.tablewrap a{text-decoration:none}
.tablewrap a:hover{text-decoration:underline}

.badge{display:inline-flex;align-items:center;padding:.12rem .5rem;border-radius:10px;font-size:.76rem;font-weight:600;line-height:1.35;color:#fff;background:#888}
.badge-ok{background:var(--ok)}
.badge-empty{background:#7f8c8d}
.badge-review_required,.badge-fetch_error,.badge-parse_error{background:var(--bad)}
.badge-redirected,.badge-gated{background:var(--warn)}
.badge-none{background:#bbb}

.health{border-radius:8px;padding:.8rem 1rem;margin:.8rem 0}
.health-bad{background:#fdecea;border:2px solid var(--bad)}
.health-ok{background:#eafaf1;border:1px solid var(--ok)}
.health-bad h2{color:var(--bad);margin-top:0}
.health-ok h2{color:var(--ok);margin:0}

/* coverage summary (dashboard) */
.coverage{margin:.6rem 0 1rem}
.coverage-bar{height:.55rem;background:#e6e9ec;border-radius:6px;overflow:hidden}
.coverage-bar span{display:block;height:100%;background:var(--ok);border-radius:6px}
.coverage-txt{margin:.35rem 0 0;font-size:.9rem}

.rollup{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid var(--border);border-radius:14px;padding:.25rem .6rem}
/* rollup pills that link into the filtered checks view */
.pill-link{color:inherit;text-decoration:none;cursor:pointer;transition:border-color .12s,background .12s}
.pill-link:hover{border-color:#9aa4ad;background:var(--bg);text-decoration:none}
.tag{background:#eef;border:1px solid #ccd;border-radius:8px;font-size:.68rem;padding:0 .3rem;color:#446}

.btn{display:inline-block;background:#1558b0;color:#fff;padding:.4rem .8rem;border-radius:6px;text-decoration:none}
.filters{margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
/* keep the "show all agencies" checkbox+label together; it drops to the next
   row as a unit when it can't fit rather than wrapping its text */
.filters label{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;cursor:pointer;font-size:.95rem}
/* larger, brand-tinted checkboxes */
input[type="checkbox"]{width:1.15rem;height:1.15rem;accent-color:#1558b0;cursor:pointer;margin:0;flex:none}
.filters input[type="text"]{padding:.5rem .6rem;font-size:1rem;border:1px solid #bbb;border-radius:6px}
.push-right{margin-left:auto}

/* selects: replace the cramped native arrow with a spaced custom chevron */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;color:inherit;background-color:#fff;border:1px solid #bbb;border-radius:6px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23556' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:.72rem}
select:hover{border-color:#9aa4ad}
select:focus-visible{outline:2px solid #1558b0;outline-offset:1px;border-color:#1558b0}
.filters select{padding:.45rem 2rem .45rem .65rem;font-size:1rem}
.actions{display:flex;gap:.25rem;align-items:center}
.actions form{display:inline-flex}
.iconlink{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;padding:0;border:0;background:none;border-radius:6px;color:#1558b0;cursor:pointer}
.iconlink:hover{background:#eef2f7;text-decoration:none}
.iconlink.danger{color:var(--bad)}
.iconlink.danger:hover{background:#fdecea}

form.form{display:flex;flex-direction:column;gap:.7rem;max-width:520px;background:#fff;padding:1rem;border:1px solid var(--border);border-radius:8px}
form.form label{display:flex;flex-direction:column;font-size:.85rem;color:#333;gap:.2rem}
form.form input,form.form select,form.form textarea{padding:.5rem;font-size:1rem;border:1px solid #bbb;border-radius:6px}
form.form select{padding-right:2rem}
label.check{flex-direction:row!important;align-items:center;gap:.4rem}
fieldset{border:1px solid var(--border);border-radius:6px}
.form-actions{display:flex;gap:1rem;align-items:center}
form.form-actions{margin-bottom:1rem}

/* full-width form (one field per row, spanning the column) */
.form.form-wide{max-width:none}

button:disabled{cursor:default}

/* password field with a show/hide eye toggle: the wrapper carries the border and
   the eye is a flex sibling, so flexbox centers it (no height-matching needed). */
.pw-field{display:flex;align-items:center;border:1px solid #bbb;border-radius:6px;background:#fff}
.pw-field:focus-within{border-color:#1558b0;box-shadow:0 0 0 2px rgba(21,88,176,.15)}
.login .pw-field input,.form .pw-field input{flex:1;min-width:0;border:0;background:none;outline:none}
.pw-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:.35rem .55rem;border:0;background:none;color:var(--muted);cursor:pointer}
.pw-toggle:hover{color:#333}
.pw-toggle .ic-eye-off{display:none}
.pw-toggle.is-shown .ic-eye{display:none}
.pw-toggle.is-shown .ic-eye-off{display:inline-flex}
button.is-loading{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;opacity:.9}
button.is-loading::before{content:"";flex:none;width:.95rem;height:.95rem;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

button{background:#1558b0;color:#fff;border:0;padding:.5rem 1rem;border-radius:6px;font-size:1rem;cursor:pointer;white-space:nowrap}
button.link{background:none;border:0;color:#1558b0;padding:0;font-size:.9rem;cursor:pointer}
button.link.danger{color:var(--bad)}
.iconbtn{background:none;border:1px solid var(--border);border-radius:6px;padding:.3rem .45rem;color:#1558b0;cursor:pointer;display:inline-flex;align-items:center;line-height:0}
.iconbtn:hover:not(:disabled){background:var(--bg);border-color:#bcc4cc}
.iconbtn:disabled{color:#aaa;cursor:not-allowed}

dialog.cred-dialog,dialog.modal{border:1px solid var(--border);border-radius:10px;padding:1.3rem;width:92%;box-shadow:0 12px 40px rgba(0,0,0,.25);color:#1a1a1a}
dialog.cred-dialog{max-width:420px}
dialog.modal{max-width:480px}
dialog.cred-dialog h2,dialog.modal h2{margin:0 0 .6rem}
dialog .form{border:0;background:none;padding:0;max-width:none;gap:.8rem}
dialog .form-actions{justify-content:flex-end}
dialog::backdrop{background:rgba(0,0,0,.45)}
.danger-btn{background:var(--bad)}

/* toolbar: filters on the left, action buttons on the right, one row */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.6rem 0}
.toolbar .filters{margin:0}
.toolbar-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* Login: center the card in the viewport (no nav on this page). */
.login-view main{min-height:calc(100vh - 2rem);display:flex;flex-direction:column;justify-content:center;align-items:center}
.login{width:340px;max-width:100%;margin:0;background:#fff;padding:1.5rem;border-radius:8px;border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.06)}
.login h1{text-align:center;margin:.2rem 0 1rem}
.login form{display:flex;flex-direction:column;gap:.8rem}
.login form .login-btn{margin-top:.6rem}
.login label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem}
.login input{padding:.5rem .6rem;font-size:1rem;border:1px solid #bbb;border-radius:6px}

.pager{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;margin:1rem 0;font-size:.85rem;color:#57606a}
.pager-size{display:flex;align-items:center;gap:.45rem}
.pager-size select{padding:.32rem 1.9rem .32rem .55rem;font-size:.85rem}
.pager-range{white-space:nowrap}
.pager-nav{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.pager-page{white-space:nowrap;min-width:7.5rem;text-align:center}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--border);border-radius:6px;color:#1558b0;background:#fff;text-decoration:none}
.pager-btn:hover{background:var(--bg);border-color:#bcc4cc;text-decoration:none}
.pager-btn.is-disabled{color:#c3c9d0;border-color:#eceef0;background:#fafbfc;cursor:default}
.cards{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}
.card{flex:1 1 8rem;background:#fff;border:1px solid var(--border);border-radius:8px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.card b{font-size:1.4rem;color:#1558b0}
.card span{font-size:.8rem;color:#555}

@media(max-width:760px){
  /* Collapse the nav: top bar shows just brand + avatar; the menu opens from a
     floating action button pinned to the bottom-right corner. */
  .usermenu{margin-left:auto}
  .navtoggle{display:inline-flex;position:fixed;right:1rem;bottom:1rem;width:3.3rem;height:3.3rem;border-radius:50%;background:#1558b0;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:50}
  .navtoggle:hover{background:#1249a0;color:#fff}
  /* The menu floats just above the FAB, right-aligned, scrollable if tall. */
  .navlinks{position:fixed;right:1rem;bottom:5rem;left:auto;width:min(15rem,calc(100vw - 2rem));max-height:70vh;overflow-y:auto;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.1rem;background:#1a2733;padding:.5rem;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:50}
  .navlinks.open{display:flex}
  .navlinks a{padding:.6rem .8rem;border-radius:6px}
  /* Left-align the agencies toolbar action buttons (no right-push on mobile). */
  .toolbar-actions{margin-left:0;flex-basis:100%;justify-content:flex-start}
  /* Left-align the "show all agencies" checkbox on mobile (drop the right-push). */
  .filters .push-right{margin-left:0}
  /* Don't let tables compress to the phone width (which crushes columns and
     skews the wrapping text). Keep near-desktop column widths and scroll the
     .tablewrap horizontally instead. */
  .tablewrap table{min-width:640px}
  /* Pager: rows-per-page + range on the first row, nav centered on its own row. */
  .pager-nav{margin-left:0;flex-basis:100%;justify-content:center}
}
@media(max-width:600px){main{padding:.6rem}}