/* ============================================================
   dbsc.dev — browser DBSC support checker

   Token names and values are lifted from the Report URI demo site so the two
   read as siblings; only the components this single page needs are defined.
   ============================================================ */

:root {
    color-scheme: light;

    --brand:          #fa4616;
    --brand-dark:     #c73810;
    --brand-light:    #fff2ee;
    --dark:           #161c2d;
    --text:           #212529;
    --text-muted:     #6b7280;
    --bg:             #ffffff;
    --bg-subtle:      #f8f9fa;
    --bg-raised:      #ffffff;
    --border:         #e5e7eb;

    --heading:              #161c2d;
    --surface-inverse:      #161c2d;
    --surface-inverse-text: #e2e8f0;

    --danger:         #dc2626;
    --danger-dark:    #991b1b;
    --danger-bg:      #fef2f2;
    --danger-border:  #fecaca;

    --success:        #16a34a;
    --success-dark:   #14532d;
    --success-bg:     #f0fdf4;
    --success-border: #bbf7d0;

    --warning:        #d97706;
    --warning-dark:   #92400e;
    --warning-bg:     #fffbeb;
    --warning-border: #fde68a;

    --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Consolas, 'Liberation Mono', monospace;

    --radius:    6px;
    --radius-lg: 12px;
    --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
}

html.theme-dark {
    color-scheme: dark;

    --brand:          #ff7a52;
    --brand-dark:     #d1420f;
    --brand-light:    #2b1510;
    --dark:           #0b0f14;
    --text:           #c9d1d9;
    --text-muted:     #8b949e;
    --bg:             #0f141a;
    --bg-subtle:      #0b0f14;
    --bg-raised:      #1a2029;
    --border:         #2a313c;

    --heading:              #e6edf3;
    --surface-inverse:      #05080c;
    --surface-inverse-text: #c9d1d9;

    --danger:         #f87171;
    --danger-dark:    #fca5a5;
    --danger-bg:      #2a1416;
    --danger-border:  #5b2326;

    --success:        #4ade80;
    --success-dark:   #86efac;
    --success-bg:     #0f2418;
    --success-border: #1f5132;

    --warning:        #fbbf24;
    --warning-dark:   #fcd34d;
    --warning-bg:     #2a2110;
    --warning-border: #5b4620;

    --shadow:    0 1px 3px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg-subtle);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--heading); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 2rem; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--brand); }

code {
    font-family: var(--font-mono);
    font-size: .85em;
    background: var(--brand-light);
    color: var(--brand-dark);
    padding: .1em .35em;
    border-radius: 4px;
    word-break: break-word;
}
html.theme-dark code { color: var(--brand); }

.container { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header {
    background: var(--dark);
    color: #fff;
    padding: 14px 0;
}
.site-header__inner { display: flex; align-items: center; gap: 16px; }
.site-header__brand {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
}
.site-header__brand span { color: var(--brand); }
.site-header__spacer { flex: 1; }
.site-header__link { color: #c9d1d9; font-size: .85rem; text-decoration: none; }
.site-header__link:hover { color: #fff; }

.theme-switch { display: inline-flex; gap: 2px; background: rgba(255,255,255,.08); border-radius: var(--radius); padding: 2px; }
.theme-switch__btn {
    background: none; border: 0; cursor: pointer; padding: 5px 7px; border-radius: 4px;
    color: #9ca3af; line-height: 0;
}
.theme-switch__btn svg { width: 15px; height: 15px; }
.theme-switch__btn[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- hero ---------- */
.hero { padding: 44px 0 20px; text-align: center; }
.hero p { color: var(--text-muted); max-width: 620px; margin: 0 auto 1rem; }

/* Hero sponsor pill — sits between the hero copy and the verdict, so it is seen without
   competing with the answer the visitor came for. Muted by default; only the brand word and
   the arrow move on hover. */
.promo-row { text-align: center; margin: 4px 0 0; }
.hero-promo {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px;
    background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px;
    font-size: .82rem; color: var(--text-muted); text-decoration: none;
    transition: border-color .15s, color .15s;
}
.hero-promo:hover { border-color: var(--brand); color: var(--text); }
.hero-promo strong { color: var(--brand); font-weight: 700; }
.hero-promo__arrow { color: var(--text-muted); transition: transform .15s; }
.hero-promo:hover .hero-promo__arrow { transform: translateX(3px); }

/* ---------- verdict ---------- */
.verdict {
    border: 2px solid var(--border);
    background: var(--bg-raised);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    margin-bottom: 28px;
}
.verdict__icon { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.verdict__headline { font-size: 1.5rem; font-weight: 700; color: var(--heading); margin: 0 0 6px; }
.verdict__detail { color: var(--text-muted); margin: 0; font-size: .95rem; }
.verdict__timing { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); margin-top: 10px; }

.verdict--waiting { border-color: var(--border); }
.verdict--yes { border-color: var(--success-border); background: var(--success-bg); }
.verdict--yes .verdict__headline { color: var(--success-dark); }
.verdict--no { border-color: var(--danger-border); background: var(--danger-bg); }
.verdict--no .verdict__headline { color: var(--danger-dark); }
.verdict--partial { border-color: var(--warning-border); background: var(--warning-bg); }
.verdict--partial .verdict__headline { color: var(--warning-dark); }

.spinner {
    display: inline-block; width: 26px; height: 26px;
    border: 3px solid var(--border); border-top-color: var(--brand);
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ---------- panels ---------- */
.panel {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}
.panel__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.panel__num {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
    color: var(--brand); background: var(--brand-light);
    border-radius: 4px; padding: 2px 6px;
}
.panel__hint { color: var(--text-muted); font-size: .875rem; margin: 0 0 14px; }
.panel__hint--after-list { margin-top: 14px; }
.panel[hidden] { display: none; }

pre {
    background: var(--surface-inverse);
    color: var(--surface-inverse-text);
    padding: 12px 14px;
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.5;
    margin: 0 0 12px;
    tab-size: 2;
}
pre:last-child { margin-bottom: 0; }

.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; font-size: .875rem; margin: 0 0 12px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-family: var(--font-mono); font-size: .8rem; word-break: break-all; }
.kv:last-child { margin-bottom: 0; }

.pill {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
}
.pill--yes  { background: var(--success-bg); color: var(--success-dark); border-color: var(--success-border); }
.pill--no   { background: var(--danger-bg);  color: var(--danger-dark);  border-color: var(--danger-border); }
.pill--wait { background: var(--bg-subtle);  color: var(--text-muted);   border-color: var(--border); }

/* ---------- refresh watcher ---------- */
.countdown { font-family: var(--font-mono); font-size: .875rem; color: var(--text-muted); margin-bottom: 12px; }
.countdown strong { color: var(--brand); }

.refresh-item { border-left: 3px solid var(--border); padding: 8px 0 8px 14px; margin-bottom: 10px; }
.refresh-item--refreshed { border-left-color: var(--success); }
.refresh-item--challenged { border-left-color: var(--warning); }
.refresh-item--failed { border-left-color: var(--danger); }
.refresh-item__title { font-weight: 600; font-size: .9rem; }
.refresh-item__meta { font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted); }

.rotation { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 6px; font-family: var(--font-mono); font-size: .75rem; }
.rotation span { color: var(--text-muted); }
.rotation del { color: var(--danger); text-decoration-thickness: 1px; }
.rotation ins { color: var(--success); text-decoration: none; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
    display: grid; grid-template-columns: 62px 150px 1fr; gap: 12px;
    padding: 6px 0; border-bottom: 1px solid var(--border);
    font-family: var(--font-mono); font-size: .75rem; align-items: baseline;
}
.timeline li:last-child { border-bottom: 0; }
.timeline__t { color: var(--text-muted); text-align: right; }
.timeline__e { font-weight: 700; }
.timeline__d { color: var(--text-muted); word-break: break-all; }
.timeline__e--ok   { color: var(--success); }
.timeline__e--warn { color: var(--warning); }
.timeline__e--bad  { color: var(--danger); }
@media (max-width: 640px) { .timeline li { grid-template-columns: 52px 1fr; } .timeline__d { grid-column: 1 / -1; } }

/* ---------- buttons / actions ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 32px; }
.btn {
    font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
    padding: 9px 18px; border-radius: var(--radius); border: 1px solid transparent;
    text-decoration: none; display: inline-block;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg-raised); }

/* ---------- reasons list ---------- */
.reasons { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--text); }
.reasons li { margin-bottom: .35rem; }

/* ---------- explainer / footer ---------- */
.prose h2 { margin-top: 1.75rem; }
.prose h2:first-child { margin-top: 0; }
.faq__q { margin: 1.25rem 0 .35rem; font-size: 1rem; color: var(--heading); }
.prose p, .prose li { color: var(--text); font-size: .95rem; }
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 40px; padding: 24px 0 40px;
    color: var(--text-muted); font-size: .85rem; text-align: center;
}
.site-footer p { margin: 6px 0; }
.muted { color: var(--text-muted); opacity: .8; }

/* Sponsor pill — the same shape why-no-passkeys uses, so the projects read as a set. */
.sponsor {
    display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 8px 14px;
    background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px;
    font-size: .85rem; color: var(--text); text-decoration: none;
    transition: border-color .15s;
}
.sponsor:hover { border-color: var(--brand); }
.sponsor strong { color: var(--brand); font-weight: 700; }
.sponsor__logo { width: 20px; height: 20px; flex-shrink: 0; }

.noscript {
    background: var(--warning-bg); border: 1px solid var(--warning-border);
    color: var(--warning-dark); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px;
}