@font-face {
    font-family: "Open Sans";
    src: url("/font.woff2?v=2") format("woff2-variations"),
         url("/font.woff2?v=2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #060a10;
    --text: #f7f1e6;
    --ink-strong: rgba(247,241,230,.86);
    --muted: #c1bcb1;
    --faint: #6B6D69;
    --surface: rgba(247,241,230,.04);
    --surface-strong: rgba(247,241,230,.10);
    --fs-large: clamp(24px, 3vw, 32px);
    --fs-medium: 14px;
    --fs-small: 12px;
    --fs-tiny: 11px;
    --status-green:  #5fd6a0;
    --status-orange: #f2a73e;
    --status-red:    #ec4d4d;
    --status-blue:   #6fc3ef;
    --brand-gold:    #cdae66;
    --status-current: var(--status-green);
    --status-dot: var(--status-green);
    --status-glow: color-mix(in srgb, var(--status-green) 10%, transparent);
}

.shell[data-status="green"], body.has-mic-answer .shell[data-status]  { --status-current: var(--status-green);  --mood-color: hsla(150, 55%, 62%, 0.19); }
.shell[data-status="orange"], body.has-mic-notice .shell[data-status] { --status-current: var(--status-orange); --mood-color: hsla( 40, 88%, 58%, 0.26); }
.shell[data-status="red"]    { --status-current: var(--status-red);    --mood-color: hsla(  0, 62%, 42%, 0.32); }
.shell[data-status="blue"]   { --status-current: var(--status-blue);   --mood-color: hsla(210, 68%, 64%, 0.22); }
.shell[data-status="access"] { --status-current: var(--brand-gold); --status-glow: color-mix(in srgb, var(--brand-gold) 10%, transparent); --mood-color: hsla( 40, 90%, 58%, 0.10); }
.shell[data-status="error"]  { --status-current: var(--status-red);  --status-glow: color-mix(in srgb, var(--status-red) 10%, transparent);  --mood-color: hsla(  0, 62%, 42%, 0.20); }

.shell[data-dot="green"], body.has-mic-answer .shell[data-dot]  { --status-dot: var(--status-green);  --status-glow: color-mix(in srgb, var(--status-green) 10%, transparent); }
.shell[data-dot="orange"], body.has-mic-notice .shell[data-dot] { --status-dot: var(--status-orange); --status-glow: color-mix(in srgb, var(--status-orange) 10%, transparent); }
.shell[data-dot="red"]    { --status-dot: var(--status-red);    --status-glow: color-mix(in srgb, var(--status-red) 10%, transparent); }
.shell[data-dot="blue"]   { --status-dot: var(--status-blue);   --status-glow: color-mix(in srgb, var(--status-blue) 10%, transparent); }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", sans-serif;
    font-weight: 350;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    background: var(--bg);
}

.shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: max(env(safe-area-inset-top, 0px), clamp(32px, 5svh, 64px)) clamp(24px, 6vw, 64px);
    background:
        radial-gradient(ellipse 80% 90% at 50% -5%, color-mix(in srgb, var(--mood-color, transparent) 45%, transparent), transparent 65%),
        radial-gradient(ellipse 80% 55% at 50% 18%, color-mix(in srgb, var(--status-glow, rgba(135,228,173,.32)) 40%, transparent), transparent 60%);
    transition: background 600ms ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 36px;
}

.brand { display: flex; flex-direction: column; align-items: center; }

.brand-name {
    font-size: var(--fs-small);
    letter-spacing: .42em;
    padding-left: .42em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--mood-color);
}

.status-orb {
    z-index: 100;
    margin-top: 48px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            #fff -10%,
            color-mix(in srgb, var(--status-current) 55%, #fff) 9%,
            var(--status-current) 30%,
            var(--status-current) 60%,
            color-mix(in srgb, var(--status-current) 78%, #000) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent),
        0 0 22px 1px var(--status-glow),
        0 0 54px 6px color-mix(in srgb, var(--status-glow) 55%, transparent);
    animation:
        orb-entrance 1000ms cubic-bezier(.2,.7,.2,1) both,
        orb-breathe 4800ms ease-in-out 1000ms infinite;
    transition: scale 320ms cubic-bezier(.2,.7,.2,1);
}
.status-orb:hover { scale: 1.08; }

@keyframes orb-entrance {
    0%   { transform: scale(1);    box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent), 0 0 22px 1px var(--status-glow), 0 0 54px 6px color-mix(in srgb, var(--status-glow) 55%, transparent); }
    45%  { transform: scale(1.08); box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent), 0 0 38px 5px var(--status-glow), 0 0 84px 16px color-mix(in srgb, var(--status-glow) 60%, transparent); }
    100% { transform: scale(1);    box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent), 0 0 22px 1px var(--status-glow), 0 0 54px 6px color-mix(in srgb, var(--status-glow) 55%, transparent); }
}
@keyframes orb-breathe {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent), 0 0 22px 1px var(--status-glow), 0 0 54px 6px color-mix(in srgb, var(--status-glow) 55%, transparent); }
    50%      { transform: scale(1.04); box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent), 0 0 31px 3px var(--status-glow), 0 0 72px 12px color-mix(in srgb, var(--status-glow) 58%, transparent); }
}

.status-orb.is-pulsing { animation: orb-pulse-once 650ms ease-in-out; }
@keyframes orb-pulse-once {
    0%   { transform: scale(1);    box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent), 0 0 22px 1px var(--status-glow), 0 0 54px 6px color-mix(in srgb, var(--status-glow) 55%, transparent); }
    40%  { transform: scale(1.09); box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent), 0 0 40px 6px var(--status-glow), 0 0 88px 18px color-mix(in srgb, var(--status-glow) 60%, transparent); }
    100% { transform: scale(1);    box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-current) 55%, transparent), 0 0 22px 1px var(--status-glow), 0 0 54px 6px color-mix(in srgb, var(--status-glow) 55%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .status-orb, .status-orb.is-pulsing { animation: none; }
    .status-orb { transition: none; }
}

.signal { text-align: center; margin: 12px 0 0; width: 740px; max-width: 100%; }

.signal-date { display: none; margin: 0 0 12px; font-size: var(--fs-small); letter-spacing: .01em; color: var(--muted); font-weight: 350; }

.signal-headline {
    margin: 0 auto 8px;
    line-height: 1.08;
    padding-left: .42em;
    color: var(--status-current);
    text-wrap: balance;
    font-size: var(--fs-small);
    letter-spacing: .42em;
    text-transform: uppercase;
    font-weight: 600;
}

.line { width: 56px; height: 1px; margin: 40px auto 28px; background: linear-gradient(90deg, transparent, rgba(247,241,230,.14), transparent); }

.badge {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 44px 0 18px;
    font-size: var(--fs-small);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--status-current);
    font-weight: 500;
    text-align: left;
}
.badge::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(247,241,230,.14), transparent); }

.attention { margin: 0 auto 18px; max-width: 100%; font-size: var(--fs-large); letter-spacing: -.025em; font-weight: 500; }

.actions { list-style: none; margin: 48px auto 0; padding: 0; max-width: 100%; text-align: left; }
.mic-actions + .actions { margin-top: 0 }

body.has-mic-transcript .actions .card-head,
body.has-mic-transcript .actions .card-body,
body.has-mic-transcript .actions .action-row { display: none; }

.actions .card-head,
.actions .card-body,
.actions .action-row { animation: north-fade-in 350ms ease both; }
@keyframes north-fade-in { from { opacity: 0; } to { opacity: 1; } }

.action { position: relative; }

.card-head { min-height: 46px; display: flex; flex-direction: column; justify-content: center; text-align: center; }

.card-title .attention { margin: 0; font-size: var(--fs-large); line-height: 1.22; letter-spacing: -.02em; font-weight: 500; color: var(--text); }
.card-title .attention a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.attention-info { border-bottom: 1px dotted var(--muted); cursor: help; }

.card-body { margin-top: 16px; }
.card-body .reason { margin: 0 0 24px; text-align: center; }
.card-body .reason--facet { margin-top: 6px; font-size: 0.92em; opacity: 0.72; }
.card-body .btn { margin-top: 24px; }

.action-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 13px; }
/* Buttons size to their label (not stretched to fill) with generous side
   padding, so a card's two actions sit as a centered pair that wraps cleanly. */
.action-row .btn { margin-top: 0; width: auto; padding-left: 32px; padding-right: 32px; }

/* Buttons — single source: .btn (primary, status-filled) + .btn--secondary (quiet surface). */
.btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 10em;
    padding: 16px 19px 15px;
    border: 0;
    border-radius: 8px;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--bg);
    background: var(--status-current);
    transition: opacity .2s ease, transform .1s ease, color .2s ease, background-color .2s ease, width .3s ease;
}
.btn:hover  { opacity: .9; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--status-current); outline-offset: 3px; }

.btn--secondary {
    padding: 15px 19px 16px;
    white-space: nowrap;
    font-size: var(--fs-tiny);
    font-weight: 450;
    letter-spacing: .14em;
    color: var(--muted);
    background: var(--surface);
}
.btn--secondary:hover { opacity: 1; color: var(--text); }

.action:has(.btn[disabled]) .btn { opacity: 0.75; pointer-events: none; cursor: default; }

.ack-form { display: block; width: 100%; margin: 0; }
/* In the action-row every control sizes to its content and centers (see
   .action-row above), so forms don't stretch — flex item, content width. */
.action-row .hide-form,
.action-row .ack-form,
.action-row .archive-form { flex: 0 0 auto; width: auto; display: flex; margin: 0; }
/* "Dranbleiben" (short_hide) has no button — its 30-min snooze fires from the
   main CTA click instead (see assets/app.js). Kept in the DOM, just not shown —
   except in case 4, where it's promoted to the primary CTA and shown again. */
.action-row .hide-form--follow { display: none; }
.action-row .hide-form--promoted { display: flex; }
.hide-form, .ab-form { display: inline; margin: 0; padding: 0; }
.hide-form button { transition: opacity 0.2s ease-in-out; opacity: 1; }
.hide-form button.is-blinking { opacity: 0.5; }
.reason { width: 100%; margin: 0 auto; font-size: var(--fs-medium); line-height: 1.55; color: var(--muted); font-weight: 350; }

.push-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 6px 13px;
    border-radius: 999px;
    font-weight: 500;
    font-size: var(--fs-small);
    cursor: pointer;
    color: var(--faint);
    text-decoration: none;
    white-space: nowrap;
    transition: background 160ms ease, color .2s ease, transform 120ms ease;
}
.push-link:hover  { background: var(--surface); color: var(--muted); }
.push-link:active { transform: scale(0.97); }
@media (max-width: 781px) { .push-link { font-size: var(--fs-small); padding: 6px 11px; } }

.bottom {
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 75;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    flex-direction: column;
}

.basis { display: none; }

.errors { margin: 20px auto 0; padding: 0; max-width: 520px; list-style: none; text-align: left; font-size: var(--fs-small); line-height: 1.5; color: var(--status-red); }
.errors li { padding: 6px 10px; border-left: 2px solid color-mix(in srgb, var(--status-red) 55%, transparent); margin-bottom: 6px; background: color-mix(in srgb, var(--status-red) 8%, transparent); }
.errors-source { display: inline-block; margin-right: 8px; letter-spacing: .14em; text-transform: uppercase; font-size: var(--fs-small); color: var(--status-red); }
.errors-message { color: var(--ink-strong); }

.mic-btn[hidden] { display: none; }

.mic-transcript {
    color: var(--faint);
    margin: 48px auto 36px;
    text-align: center;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    white-space: pre-line;
}
.mic-transcript--answer { color: var(--text); }
.signal-headline .headline-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.signal-headline .headline-link:hover { text-decoration-color: var(--text); }
.mic-transcript .reply-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.mic-transcript .reply-link:hover { text-decoration-color: var(--text); }
.mic-transcript .reply-more { display: inline-block; cursor: pointer; white-space: nowrap; text-decoration: none; border-bottom: 1px dotted var(--text); }
.mic-transcript .reply-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mic-transcript--saved { color: var(--text); }
body.has-mic-transcript .mic-transcript { opacity: 1; pointer-events: auto; animation: north-reveal 900ms cubic-bezier(.2,.7,.2,1) both; }

/* Card subtext: the matched candidate's reason, under the spoken reply. Hidden
   at rest; revealed only when a card answer carried one. Reuses the reply-link
   styling so an inline-linked project/sender stays tappable. */
.mic-subtext { display: none; color: var(--faint); margin: -20px auto 28px; text-align: center; font-weight: 500; max-width: 100%; }
.mic-subtext .reply-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
body.has-mic-subtext .mic-subtext { display: block; animation: north-reveal-simple 700ms cubic-bezier(.2,.7,.2,1) both; animation-delay: 150ms; }
#mic-hide { display: none; font-size: var(--fs-tiny); }

/* The voice-reply buttons sit side by side, centered and wrapping, like a
   board card's .action-row — not stacked. The per-button auto margins below
   centre a lone button; inside the flex row they're overridden to the row gap. */
.mic-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0; }
body.has-mic-transcript .mic-actions { margin: -8px 0 20px; }
.mic-actions .mic-ack { margin: 0; }
/* Voice reply CTAs reuse .btn; .mic-ack only carries the deltas (hidden at rest, own spacing/padding). */
.mic-ack { display: none; width: auto; margin: -8px auto 20px; padding: 16px 32px 15px; }
#mic-ack    { display: none; font-size: var(--fs-tiny); }
#mic-cancel { display: none; font-size: var(--fs-tiny); }
#mic-followup { display: none; }
/* The card CTA sizes to its label like a normal button, not full-bleed; the .mic-ack auto margins keep it centred. */
#mic-cta { display: none; width: fit-content; max-width: 100%; }
body.has-mic-confirm #mic-ack,
body.has-mic-confirm #mic-cancel,
body.has-mic-cta #mic-cta,
body.has-mic-hide #mic-hide,
body.has-mic-followup #mic-followup { display: flex; animation: north-reveal-simple 700ms cubic-bezier(.2,.7,.2,1) both; animation-delay: 200ms; }

.mic-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 36px auto 24px;
    width: 54px;
    height: 54px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--surface);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: var(--text);
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
    animation: north-reveal-simple 600ms cubic-bezier(.2,.7,.2,1) both;
    animation-delay: 1600ms;
}
.actions .card-body .mic-btn { animation: north-fade-in 350ms ease both; animation-delay: 0ms; }
.bottom .mic-btn { background: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0 0 0 2px; width: 28px; height: 28px; border: none; }
.bottom .mic-btn:hover { background: var(--surface) !important; }

.mic-btn-ring { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 220ms ease, transform 220ms ease; }
.mic-btn-icon { position: relative; width: 28px; height: 28px; fill: currentColor; color: var(--text); transition: color 200ms ease, transform 160ms ease; }
.bottom .mic-btn-icon { width: 20px; height: 20px; color: var(--faint); }

.mic-btn:hover { background: var(--surface-strong); }
.mic-btn:hover .mic-btn-icon { color: var(--text); }
.mic-btn:focus-visible { outline: none; border-color: var(--status-green); }

.mic-btn.is-listening .mic-btn-icon { color: var(--status-green); }
.mic-btn.is-listening .mic-btn-ring { background: radial-gradient(circle at 50% 50%, var(--muted) 0%, transparent 68%); animation: mic-pulse-soft 1800ms ease-in-out infinite; }
@keyframes mic-pulse-soft { 0%, 100% { opacity: .12; transform: scale(1); } 50% { opacity: .28; transform: scale(1.06); } }

.mic-btn.is-transcribing { cursor: default; pointer-events: none; }
.mic-btn.is-transcribing .mic-btn-icon { color: var(--status-green); }
.mic-btn.is-transcribing .mic-btn-ring { opacity: 1; border: 2px solid transparent; border-top-color: var(--status-green); background: none; transition: none; animation: mic-spin 900ms linear infinite; }
@keyframes mic-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .mic-btn { animation: none; opacity: 1; transform: none; transition: none; }
    .actions .card-body .mic-btn { animation: none; }
    .mic-btn.is-listening .mic-btn-ring { animation: none; }
    .mic-btn.is-transcribing .mic-btn-ring { animation: none; opacity: .8; }
}

.actionbar:not(:has(.ab-form)):not(:has(.mic-btn)):not(:has(#enable-push-wrap:not([hidden]))) { display: none; }

.actionbar {
    position: sticky;
    bottom: max(env(safe-area-inset-bottom, 0px), 12px);
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin: 14px 0 0;
    max-width: max-content;
    background: var(--surface);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 999px;
    border: none;
}

.ab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-weight: 500;
    font-size: var(--fs-small);
    text-decoration: none;
    transition: background 160ms ease, transform 120ms ease;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
.ab-btn:hover  { background: var(--surface); }
.ab-btn:active { transform: scale(0.97); }

.ab-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.72; display: none; }
@media (max-width: 781px) { .ab-dot { width: 7px; height: 7px; } }

.ab-btn--risk    { color: var(--status-red); }
.ab-btn--warning { color: var(--status-orange); }
.ab-btn--chance  { color: var(--status-blue); }
.ab-btn--undo { color: var(--faint); }
.ab-undo-glyph { font-weight: 700; }
.ab-undo-count { display: none !important; }
.ab-undo { overflow: hidden; transition: width 320ms cubic-bezier(.2,.7,.2,1), margin-right 320ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease; }
.ab-undo.is-collapsing { opacity: 0; margin-right: -4px; pointer-events: none; }

.ab-btn--logout { padding: 6px 13px; color: var(--faint); }
.ab-btn--logout:hover { color: var(--muted); }
.ab-logout-icon { display: block; }
@media (max-width: 781px) { .ab-btn--logout { padding: 6px 11px; } }

.checks-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 150;
    padding: 36px 24px;
    background: var(--bg);
    color: var(--muted);
    font-size: var(--fs-tiny);
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 140ms ease, transform 140ms ease;
    overflow-y: auto;
}
@media (max-height: 720px) { .checks-overlay { align-items: flex-start; padding-top: 14px; padding-bottom: 16px; } }
.shell.is-overlay-open .checks-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }
.checks-overlay-inner { margin: 0 auto; width: 100%; max-width: 1200px; }
@media (max-width: 781px) { .checks-overlay-inner > :not(.overlay-basis) ul.checks-buckets ul { display: none; } }
.checks-overlay h1 { margin: 0 0 18px; font-size: 23px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; color: var(--ink-strong); text-align: left; line-height: 1; }
.checks-overlay ul { margin: 0; padding: 0; list-style: none; text-align: left; }
.checks-overlay ul li { margin: 0; padding: 0; }
.checks-overlay ul.checks-buckets { columns: 4; display: block; column-gap: 22px; }
@media (max-width: 781px) { .checks-overlay ul.checks-buckets { columns: 2; font-size: var(--fs-tiny); } }
.checks-overlay ul.checks-buckets > li { break-inside: avoid; color: var(--muted); margin-bottom: 10px; }
.checks-overlay .checks-buckets > li > strong { display: block; color: var(--ink-strong); font-weight: 500; margin-bottom: 2px; }

.checks-overlay .overlay-voice ul.checks-buckets { columns: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 22px; align-items: start; }
.checks-overlay .overlay-voice ul.checks-buckets > li:first-child { grid-column: span 2; }
.checks-overlay .overlay-voice ul.checks-buckets > li:first-child > ul { columns: 2; column-gap: 22px; }
@media (max-width: 781px) {
    .checks-overlay .overlay-voice ul.checks-buckets { grid-template-columns: repeat(2, 1fr); }
    .checks-overlay .overlay-voice ul.checks-buckets > li:first-child { grid-column: span 2; }
    .checks-overlay .overlay-voice ul.checks-buckets > li:first-child > ul { columns: 2; }
}

.overlay-section { margin-bottom: 12px; }
.overlay-section:last-child { margin-bottom: 0; }
.overlay-section h2 { margin: 35px 0 15px; text-transform: uppercase; color: var(--ink-strong); border-bottom: 1px solid rgba(247,241,230,.14); padding-bottom: 10px; font-size: var(--fs-small); letter-spacing: .42em; font-weight: 600; }
.overlay-section:first-child h2 { margin-top: 0; }
.overlay-note { margin: 0 0 5px; color: var(--muted); max-width: 80ch; }

.basis-sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 18px; }
.basis-sources > li { display: flex; align-items: baseline; gap: 8px; color: var(--muted); break-inside: avoid; }
.basis-sources .src-name, .overlay-meta .src-name { color: var(--ink-strong); font-weight: 500; }
.basis-sources .src-host, .overlay-meta .src-host { color: var(--faint); font-variant-numeric: tabular-nums; font-size: var(--fs-tiny); }
.overlay-meta .src-meta { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-tiny); margin-left: 3px; margin-right: 7px; }
.basis-sources .src-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-tiny); }

.overlay-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.overlay-inline > li { color: var(--muted); }
.overlay-system .overlay-inline, .overlay-intelligence .overlay-inline { display: block; }
.overlay-intelligence .overlay-body { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 781px) {
    .overlay-intelligence .overlay-body { grid-template-columns: 1fr; }
    .basis-sources .src-host { text-align: right; flex: 1; }
}
.overlay-intelligence .overlay-note { margin: 0; }
.overlay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.overlay-row > .overlay-section { margin-bottom: 0; }
@media (max-width: 781px) { .overlay-row { grid-template-columns: 1fr; } }
@media (max-width: 781px) { .basis-sources { grid-template-columns: 1fr; } }

.checks { display: none; }

@keyframes north-reveal {
    from { opacity: 0; filter: blur(8px); transform: translateY(4px); pointer-events: none; }
    to   { opacity: 1; filter: blur(0);   transform: translateY(0); pointer-events: auto; }
}
.signal-headline, .signal-date, .signal .badge, .signal .card, .signal .action-row, .access-form { animation: north-reveal 600ms cubic-bezier(.2,.7,.2,1) both; }

@keyframes north-reveal-simple {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bottom { animation: north-reveal-simple 600ms cubic-bezier(.2,.7,.2,1) both; }

.signal-headline, .signal-date { animation-delay: 900ms; }
.access-form        { animation-delay: 1300ms; }
.signal .badge      { animation-delay: 1200ms; }
.signal .card       { animation-delay: 1300ms; }
.signal .action-row { animation-delay: 1500ms; }
.bottom             { animation-delay: 1700ms; }

@media (prefers-reduced-motion: reduce) {
    .shell  { transition: none; }
    .ab-btn { transition: none; }
    .ab-undo { transition: none; }
    .signal-headline, .signal-date, .signal .badge, .signal .card, .signal .action-row, .access-form, .bottom { animation: none; opacity: 1; transform: none; }
    body.has-mic-transcript .mic-transcript,
    .actions .card-head, .actions .card-body, .actions .action-row { animation: none; }
    body.has-mic-confirm #mic-ack, body.has-mic-confirm #mic-cancel, body.has-mic-followup #mic-followup, body.has-mic-cta #mic-cta, body.has-mic-hide #mic-hide, body.has-mic-subtext .mic-subtext { animation: none; }
}

.offline-banner { display: none; }
html[data-offline] .offline-banner { display: inline-block; width: auto; padding: 5px 10px; text-align: center; font-size: var(--fs-small); letter-spacing: .06em; font-weight: 500; color: var(--muted); background: var(--surface); border-radius: 4px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.access-form { display: flex; flex-direction: column; gap: 12px; margin: 28px auto 0; max-width: 280px; width: 100%; text-align: center; }
.access-form input[type="password"] { appearance: none; -webkit-appearance: none; background: var(--surface); color: var(--text); border: none; border-radius: 8px; padding: 10px 12px; font-family: inherit; letter-spacing: .02em; text-align: center; font-size: var(--fs-medium); line-height: 1.55; }
.access-form input[type="password"]:focus { outline: none; background: var(--surface-strong); }

[data-error] { color: var(--status-red); font-size: var(--fs-small); margin-top: 8px; }