/* Served from our own origin because the CSP forbids inline styles. No external fonts or images. */
:root {
  --accent:#3651d4; --accent-ink:#fff; --accent-soft:#eef1ff; --accent-line:#c9d1fb;
  --ok:#17803d; --okbg:#e3f6e8; --fail:#c4252f; --failbg:#fdecec; --warn:#8a5a00; --warnbg:#fff4d9; --warnline:#e9c46a;
  --none:#98a1ab; --nonebg:#eef0f3;
  --text:#1c2230; --muted:#5f6878; --line:#e3e6ec; --line-strong:#cfd4dd;
  --bg:#f5f6f9; --surface:#fff; --surface-2:#fafbfc;
  --shadow:0 1px 2px rgba(20,30,60,.05), 0 2px 8px rgba(20,30,60,.05);
  --shadow-hover:0 2px 4px rgba(20,30,60,.06), 0 8px 24px rgba(20,30,60,.10);
  --radius:12px; --radius-sm:8px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent:#7d93ff; --accent-ink:#0e1220; --accent-soft:#1e2540; --accent-line:#33406e;
    --ok:#4cc77a; --okbg:#143222; --fail:#ff6b6b; --failbg:#3a1a1d; --warn:#f2c14e; --warnbg:#382c10; --warnline:#6b5420;
    --none:#6c7480; --nonebg:#262b34;
    --text:#e6e9ef; --muted:#9aa3b2; --line:#2a303a; --line-strong:#3a414d;
    --bg:#11141a; --surface:#181c23; --surface-2:#1d222a;
    --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-hover:0 6px 20px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
       color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-underline-offset:2px; }
a:hover { text-decoration-thickness:2px; }
h1 { font-size:1.6rem; letter-spacing:-.015em; margin:.2rem 0 .5rem; }
h2 { font-size:1.12rem; letter-spacing:-.01em; margin:2.2rem 0 .7rem; padding-top:.2rem; }
h3 { font-size:1rem; margin:.2rem 0 .6rem; }
h2 .muted { font-size:.75em; font-weight:400; }
.meta, .muted { color:var(--muted); font-size:.9em; }
code { font:.88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:var(--nonebg); padding:.08rem .35rem; border-radius:5px; }
pre { font:.85em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:var(--surface-2); border:1px solid var(--line);
      border-radius:var(--radius-sm); padding:.8rem 1rem; overflow:auto; }
code.wrap { white-space:pre-wrap; word-break:break-all; }
hr { border:0; border-top:1px solid var(--line); margin:1.2rem 0; }
::selection { background:var(--accent-soft); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* --- header ------------------------------------------------------------------------------------------------- */
header { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
         padding:.6rem 1.5rem; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px);
         border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:700; letter-spacing:-.01em; color:var(--text); text-decoration:none; font-size:1.02rem; }
.brand img { width:28px; height:28px; }
.brand .sub { font-weight:500; color:var(--muted); }
header nav { display:flex; gap:.2rem; align-items:center; flex-wrap:wrap; }
header nav a { text-decoration:none; color:var(--muted); padding:.35rem .65rem; border-radius:999px; font-size:.93em; font-weight:500; }
header nav a:hover { color:var(--text); background:var(--nonebg); }
header nav a.active { color:var(--accent); background:var(--accent-soft); }
header nav .sep { width:1px; height:20px; background:var(--line); margin:0 .35rem; }
header nav .who { display:inline-flex; align-items:center; gap:.4rem; }
.avatar { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
          font-size:.72rem; font-weight:700; text-transform:uppercase; }
.logout { display:flex; gap:.6rem; align-items:center; margin:0; }
main { max-width:1180px; margin:1.6rem auto 3rem; padding:0 1.5rem; }
footer.site { max-width:1180px; margin:0 auto 2rem; padding:0 1.5rem; color:var(--muted); font-size:.82em; }

.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.page-head h1 { margin:0; }
.page-head p { margin:.2rem 0 0; }

/* --- banners and notices ------------------------------------------------------------------------------------ */
.banner { display:flex; gap:.5rem; align-items:center; padding:.8rem 1.1rem; border-radius:var(--radius); font-weight:600; margin-bottom:.8rem; border:1px solid; }
.banner.ok { background:var(--okbg); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent); }
.banner.fail { background:var(--failbg); color:var(--fail); border-color:color-mix(in srgb, var(--fail) 30%, transparent); }
.banner.warn { background:var(--warnbg); color:var(--warn); border-color:var(--warnline); }
.banner.muted-issue { background:var(--surface-2); border-color:var(--line); color:var(--muted); }
.banner .muted { font-weight:400; color:inherit; }
.note { background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius); padding:.7rem 1rem; margin-bottom:1rem; }
.error { color:var(--fail); margin:0; }
.error:empty { display:none; }

/* --- domain tiles ------------------------------------------------------------------------------------------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; margin-top:1rem; }
.tile { position:relative; display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
        padding:1rem 1.1rem 1rem 1.25rem; color:var(--text); text-decoration:none; box-shadow:var(--shadow);
        transition:box-shadow .15s, transform .15s, border-color .15s; overflow:hidden; }
.tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--none); }
.tile.ok::before { background:var(--ok); } .tile.fail::before { background:var(--fail); }
.tile:hover { box-shadow:var(--shadow-hover); transform:translateY(-1px); border-color:var(--line-strong); }
.tile .head { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.tile .head strong { font-size:1.02rem; }
.tile .meta { margin-top:.35rem; }
.tile-label { display:block; font-size:.85em; color:var(--muted); }
.tile-value { display:block; font-size:1.8em; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

.badge { display:inline-flex; align-items:center; gap:.2rem; padding:.1rem .55rem; border-radius:999px; font-size:.78em; font-weight:600; white-space:nowrap; }
.badge.ok { background:var(--okbg); color:var(--ok); }
.badge.fail { background:var(--failbg); color:var(--fail); }
.badge.none { background:var(--nonebg); color:var(--muted); }
.badge.warn { background:var(--warnbg); color:var(--warn); }
a.small { font-size:.8em; margin-left:.3rem; }

/* History bar: one square per day. */
.bar { display:flex; gap:2px; margin-top:.75rem; }
.sq { flex:1; height:16px; border-radius:3px; background:var(--none); }
.sq.ok { background:var(--ok); } .sq.fail { background:var(--fail); } .sq.none { background:var(--nonebg); }

/* --- cards, tables, forms ----------------------------------------------------------------------------------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.3rem; margin:1rem 0; box-shadow:var(--shadow); }
.card.narrow { max-width:440px; margin:2rem auto; }
.card > h3:first-child { margin-top:0; }
.hosted-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:1rem; }
.hosted-grid .card { margin:0; display:grid; gap:.8rem; align-content:start; }
.hosted-grid .card p { margin:0; }

table { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--line);
        border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
th, td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td, table > tr:last-child td { border-bottom:0; }
th { background:var(--surface-2); font-size:.78em; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
tbody tr:hover td { background:color-mix(in srgb, var(--accent-soft) 45%, transparent); }
tr.rowfail td { background:var(--failbg); }
tr.muted td { color:var(--muted); }
table.kv { box-shadow:none; }
table.kv th { width:9.5rem; text-transform:none; letter-spacing:0; font-size:.85em; }
.num { text-align:right; font-variant-numeric:tabular-nums; }

input, select, textarea { padding:.5rem .65rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font:inherit;
                          background:var(--surface); color:var(--text); transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); width:auto; }
textarea { width:100%; box-sizing:border-box; }
fieldset { border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem .9rem; }
legend { padding:0 .3rem; color:var(--muted); font-size:.9em; }
label.check { display:flex !important; gap:.5rem; align-items:center; }

button, .button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.5rem 1rem; border:1px solid var(--accent);
                  background:var(--accent); color:var(--accent-ink); border-radius:var(--radius-sm); cursor:pointer; font:inherit; font-weight:600;
                  text-decoration:none; transition:filter .15s, background .15s; }
button:hover, .button:hover { filter:brightness(1.08); }
button.secondary, .button.secondary, header button, form.inline button[type=submit].secondary {
  background:var(--surface); color:var(--text); border-color:var(--line-strong); font-weight:500; }
button.secondary:hover, .button.secondary:hover, header button:hover { background:var(--nonebg); filter:none; }
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
header button { padding:.3rem .75rem; font-size:.9em; }
button:disabled { opacity:.6; cursor:wait; }
form.inline { display:inline-flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0; }
.stack { display:grid; gap:.8rem; }
.stack label { display:grid; gap:.3rem; font-weight:500; }
.stack label .muted { font-weight:400; }
.stack > button { justify-self:start; }

details { margin:.6rem 0 1rem; } details summary { cursor:pointer; color:var(--accent); font-weight:500; }
code.secret, code.link { display:block; padding:.65rem .8rem; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); word-break:break-all; }
.qr svg { max-width:220px; height:auto; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; }
ul.codes { columns:2; list-style:none; padding:0; font-size:1.1em; }

/* --- login -------------------------------------------------------------------------------------------------- */
.auth-wrap { display:grid; grid-template-columns:1.1fr 1fr; max-width:900px; margin:4vh auto; background:var(--surface);
             border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-hover); }
.auth-side { padding:2.4rem; color:#fff; background:linear-gradient(150deg, #3651d4 0%, #5b3fc4 55%, #2a8fbf 100%); display:grid; align-content:space-between; gap:2rem; }
.auth-side h2 { margin:0 0 .6rem; font-size:1.6rem; line-height:1.25; color:#fff; }
.auth-side p { margin:0; opacity:.9; }
.auth-side ul { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.auth-side li::before { content:"✓"; display:inline-grid; place-items:center; width:20px; height:20px; margin-right:.55rem; border-radius:50%;
                        background:rgba(255,255,255,.2); font-size:.75rem; }
.auth-side .brand { color:#fff; }
.auth-form { padding:2.2rem; display:grid; gap:.9rem; align-content:center; }
.auth-form h1 { margin:0; }
.auth-form .alt { display:grid; gap:.55rem; }
.auth-form .alt .button, .auth-form .alt button { width:100%; }
.divider { display:flex; align-items:center; gap:.7rem; color:var(--muted); font-size:.85em; }
.divider::before, .divider::after { content:""; flex:1; border-top:1px solid var(--line); }
.login { max-width:380px; margin:3rem auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; display:grid; gap:.8rem; box-shadow:var(--shadow); }
.login label { display:grid; gap:.25rem; }
@media (max-width:760px) { .auth-wrap { grid-template-columns:1fr; } .auth-side { padding:1.6rem; } .auth-side ul { display:none; } }

/* --- trend chart (server-drawn SVG) --------------------------------------------------------------------------- */
svg.chart { width:100%; height:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); display:block; box-shadow:var(--shadow); }
svg.chart .grid { stroke:var(--line); stroke-width:1; }
svg.chart .axis { fill:var(--muted); font-size:11px; }
svg.chart .pass { fill:var(--ok); } svg.chart .failbar { fill:var(--fail); }
svg.chart .hit { fill:transparent; } svg.chart g:hover .hit { fill:var(--nonebg); }
.legend { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.9em; margin:.2rem 0 .5rem; }
.legend .key { display:inline-block; width:12px; height:12px; border-radius:3px; }
.legend .key.pass { background:var(--ok); } .legend .key.failbar { background:var(--fail); }

@media (max-width:600px) {
  header { padding:.6rem 1rem; } main { padding:0 1rem; }
  table { font-size:.85em; } th:nth-child(5), td:nth-child(5), th:nth-child(6), td:nth-child(6) { display:none; }
  table.kv th, table.kv td { display:block; width:auto; } .hosted-grid { grid-template-columns:1fr; }
}

/* --- branded monthly report. --brand comes from /brand/<org>/brand.css (no inline styles under the CSP). ------ */
.report { --accent: var(--brand, #3651d4); }
.report-head { display:flex; gap:1.2rem; align-items:center; border-bottom:4px solid var(--accent); padding-bottom:.8rem; margin:1rem 0; }
.report-head h1 { margin:.1rem 0; }
.report-kicker { margin:0; color:var(--accent); font-weight:600; letter-spacing:.02em; }
.brand-logo { max-height:64px; max-width:240px; }
.report h2, .report h3 { color:var(--accent); }
.report .tiles { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.report .tile::before { background:var(--accent); }
.report .tile:hover { box-shadow:var(--shadow); transform:none; }
.report-domain { margin-top:2rem; }
@media print {
  :root { --bg:#fff; --surface:#fff; --surface-2:#f6f7f9; --text:#1c2230; --muted:#5f6878; --line:#e3e6ec; --shadow:none; color-scheme:light; }
  header, nav, footer.site, .no-print, .flash, .flashes { display:none !important; }
  body { background:#fff; }
  .report-domain { break-before:page; }
  .report-domain:first-of-type { break-before:auto; }
  .report table, .report .tile, .chart { break-inside:avoid; }
  a { color:inherit; text-decoration:none; }
}
td button, td .button { background:var(--surface); color:var(--text); border-color:var(--line-strong); font-weight:500; padding:.3rem .7rem; font-size:.9em; }
td button:hover, td .button:hover { background:var(--nonebg); filter:none; }
.auth-side .kicker { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
details.optional-feature { margin:2rem 0 1rem; padding:.7rem 1rem; border:1px dashed var(--line-strong); border-radius:var(--radius); }
details.optional-feature[open] summary { margin-bottom:.6rem; }
/* Phones: the header scrolls away and the menu is one swipeable row instead of three wrapped lines. */
@media (max-width:760px) {
  header { position:static; flex-wrap:nowrap; flex-direction:column; align-items:stretch; gap:.4rem; padding:.5rem .75rem; }
  header nav { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:0 -.75rem; padding:0 .75rem; }
  header nav::-webkit-scrollbar { display:none; }
  header nav a, header nav form { flex:0 0 auto; }
  main { margin-top:1rem; }
}
.card > h2:first-child { margin-top:0; }
@media (max-width:760px) {
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  main { overflow-wrap:anywhere; }
  .page-head .button { flex:0 1 auto; }
}

/* --- public domain check ------------------------------------------------------------------------------------------ */
.check-hero { text-align:center; max-width:720px; margin:2rem auto 2rem; }
.check-hero h1 { font-size:2rem; line-height:1.2; }
.check-hero .kicker, .auth-side .kicker { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.check-form { display:flex; gap:.5rem; max-width:520px; margin:1.2rem auto 0; }
.check-form input { flex:1; font-size:1.05rem; padding:.7rem .9rem; }
.check-form button { padding:.7rem 1.4rem; font-size:1.05rem; }
.check-result { display:flex; gap:1.4rem; align-items:center; margin:1rem 0; }
.check-result h2 { margin:0 0 .2rem; font-size:1.5rem; }
.grade { flex:0 0 auto; display:grid; place-items:center; width:110px; height:110px; border-radius:24px; color:#fff; box-shadow:var(--shadow-hover); }
.grade .letter { font-size:3rem; font-weight:800; line-height:1; }
.grade .score { font-size:.85rem; opacity:.9; margin-top:-1.4rem; }
.grade-a { background:linear-gradient(150deg,#1f9d55,#17803d); } .grade-b { background:linear-gradient(150deg,#5ea83a,#3f8f2a); }
.grade-c { background:linear-gradient(150deg,#d99a16,#b7790c); } .grade-d { background:linear-gradient(150deg,#e06a2c,#c4501a); }
.grade-f { background:linear-gradient(150deg,#d43b44,#b0222c); }
.headline-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.headline { margin:0; display:grid; gap:.4rem; align-content:start; }
.headline p { margin:0; }
.cta { margin-top:2rem; border-color:var(--accent-line); }
.cta .two { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; }
.cta .two label { display:grid; gap:.3rem; font-weight:500; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.auth-side a.check-link { color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:600px) { .check-hero h1 { font-size:1.5rem; } .check-form { flex-direction:column; } .check-result { flex-direction:column; text-align:center; } }

/* --- dashboard filter chips and provider/client groups -------------------------------------------------------------- */
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 1rem; }
.chips { display:flex; gap:.4rem; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border:1px solid var(--line-strong); border-radius:999px;
        background:var(--surface); color:var(--text); text-decoration:none; font-size:.9em; font-weight:500; }
.chip span { color:var(--muted); font-variant-numeric:tabular-nums; }
.chip:hover { background:var(--nonebg); }
.chip.active { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.chip.active span { color:var(--accent); }
details.group { margin:0 0 .9rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
details.group > summary { list-style:none; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding:.8rem 1rem; cursor:pointer; color:var(--text); }
details.group > summary::-webkit-details-marker { display:none; }
details.group > summary::before { content:"▸"; color:var(--muted); transition:transform .15s; }
details.group[open] > summary::before { transform:rotate(90deg); }
.group-name { font-weight:700; }
details.group > .tiles { margin:0; padding:0 1rem 1rem; }
details.group.sub { margin:0 1rem .8rem; box-shadow:none; background:var(--surface-2); }
details.group.sub > summary { padding:.6rem .9rem; }
details.group.sub > .tiles { padding:0 .9rem .9rem; }