/* SynthID / AI Image Detector (page-synthid.hbs). Built on the theme tokens in screen.css:
   mint ground, raised --base-2 surfaces with a hairline, Instrument Sans for UI, Source Serif for reading text,
   black pill buttons like the article buttons. Verdict colours are the only additions. */

.sid-page {
    --sid-ai: #b2401a;      --sid-ai-soft: #f6e3da;
    --sid-ok: var(--accent); --sid-ok-soft: var(--accent-soft);
    --sid-maybe: #8a6100;   --sid-maybe-soft: #f4ead2;
    --sid-info: var(--ink-2); --sid-info-soft: rgba(23, 32, 28, .07);
    --sid-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 34px -22px rgba(0, 0, 0, .35);
}
.sid-lead { margin: 1rem auto 0; max-width: 64ch; font-family: var(--font-text); font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.sid { max-width: 1080px; margin-inline: auto; padding-inline: var(--pad); box-sizing: content-box; }
.sid [hidden] { display: none !important; }
.sid svg { flex: none; }

.sid-card { background: var(--base-2); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line), var(--sid-shadow); }

/* upload */
.sid-upload { max-width: 720px; margin: 0 auto; padding: .6rem; }
.sid-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    min-height: 270px; padding: 2rem 1.25rem; text-align: center; cursor: pointer;
    border: 1.5px dashed rgba(23, 32, 28, .22); border-radius: calc(var(--radius) - 4px);
    transition: border-color .15s, background-color .15s;
}
.sid-drop:hover, .sid-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.sid-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sid-drop__icon { width: 56px; height: 56px; margin-bottom: .6rem; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.sid-drop__title { font-size: 1.125rem; font-weight: 650; color: var(--ink-strong); }
.sid-drop__sub { color: var(--ink-2); font-size: var(--fs-sm); }
.sid-drop__hint { margin-top: .7rem; font-size: var(--fs-xs); color: var(--ink-3); }

/* the article button: black pill */
.sid-btn {
    display: inline-flex; align-items: center; gap: .5em; margin-top: .9rem; padding: .75rem 1.5rem;
    border: 0; border-radius: 999px; background: var(--ink-strong); color: #fff;
    font: 600 var(--fs-sm)/1.2 var(--font-ui); cursor: pointer;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); transition: transform .15s, box-shadow .15s;
}
.sid-btn:hover, .sid-drop:hover .sid-btn { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }

.sid-privacy { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .8rem 0 .25rem; font-size: var(--fs-xs); color: var(--ink-2); }

.sid-error { max-width: 720px; margin: 1rem auto 0; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--sid-ai-soft); color: #7d2a0f; font-size: var(--fs-sm); box-shadow: inset 3px 0 0 var(--sid-ai); }

/* result */
.sid-result { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 860px) { .sid-result { grid-template-columns: 5fr 6fr; align-items: start; } }

.sid-preview-card { padding: .85rem; }
.sid-preview {
    position: relative; overflow: hidden; border-radius: calc(var(--radius) - 4px); line-height: 0;
    background: repeating-conic-gradient(rgba(23, 32, 28, .06) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
}
.sid-preview img { display: block; width: 100%; max-height: 560px; object-fit: contain; border-radius: 0; }
.sid-scan {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(13, 107, 85, .2) 48%, var(--accent) 50%, transparent 51%);
    background-size: 100% 220%; animation: sid-scan 1.6s ease-in-out infinite;
}
@keyframes sid-scan { from { background-position: 0 100%; } to { background-position: 0 -10%; } }
@media (prefers-reduced-motion: reduce) { .sid-scan { animation-duration: 4s; } }
/* detected generator: badge on the image */
.sid-source {
    position: absolute; left: .75rem; bottom: .75rem; z-index: 1;
    display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .45rem;
    border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink-strong);
    font: 650 var(--fs-xs)/1 var(--font-ui); line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 20px -8px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sid-source.is-maybe { background: rgba(255, 255, 255, .82); color: var(--ink-2); }
.sid-logo { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 32, 28, .1); }
.sid-logo svg { width: 62%; height: 62%; }
.sid-logo--openai { color: #050806; }
.sid-file-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: .75rem .25rem .1rem; font-size: var(--fs-xs); color: var(--ink-2); }
.sid-file-meta .sid-name { width: 100%; color: var(--ink-strong); font-weight: 600; overflow-wrap: anywhere; }

.sid-verdict { padding: clamp(1.25rem, 3vw, 1.75rem); border-top: 4px solid var(--c, var(--line)); }
.sid-verdict.lvl-ai { --c: var(--sid-ai); --cs: var(--sid-ai-soft); }
.sid-verdict.lvl-clean { --c: var(--sid-ok); --cs: var(--sid-ok-soft); }
.sid-verdict.lvl-maybe { --c: var(--sid-maybe); --cs: var(--sid-maybe-soft); }
.sid-verdict.lvl-ai-other, .sid-verdict.lvl-unknown { --c: var(--sid-info); --cs: var(--sid-info-soft); }

.sid-status { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.sid-status__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.sid-spinner { width: 22px; height: 22px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sid-spin .8s linear infinite; }
@keyframes sid-spin { to { transform: rotate(360deg); } }

.sid-headline { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: .6rem; }
.sid-pill { display: inline-block; padding: .15rem .65rem; border-radius: 999px; background: var(--cs); color: var(--c); font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.sid-verdict__title { display: flex; align-items: center; gap: .6rem; margin: .45rem 0 0; font-size: var(--fs-h3); line-height: 1.2; }
.sid-headline__main { min-width: 0; }
/* generator mark next to the verdict title */
.sid-title-logo { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px -6px rgba(0, 0, 0, .25); }
.sid-title-logo svg { width: 1.45rem; height: 1.45rem; }
.sid-title-logo.is-maybe { opacity: .6; box-shadow: inset 0 0 0 1.5px var(--line); background: transparent; }
.sid-gen { display: inline-flex; align-items: center; gap: .45rem; }
.sid-gen .sid-logo { width: 1.3rem; height: 1.3rem; }
.sid-gen__org { font-weight: 500; color: var(--ink-2); }
.sid-summary { margin: 0 0 1.1rem; font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

.sid-gauge { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: none; }
.sid-gauge__label { font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sid-donut { position: relative; width: 92px; height: 92px; }
.sid-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sid-donut .track { stroke: rgba(23, 32, 28, .1); }
/* colour follows the probability: --h from 150 (green, real) to 12 (brick, generated), muted to sit on the mint */
.sid-donut .value { stroke: hsl(var(--h) 55% 36%); transition: stroke-dasharray .6s ease; }
.sid-donut__pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .sid-donut { width: 76px; height: 76px; } .sid-donut__pct { font-size: 1rem; } }

.sid-details { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; font-family: var(--font-text); font-size: 1rem; line-height: 1.55; }
.sid-details li { display: flex; gap: .65rem; }
.sid-details li svg { margin-top: .55em; color: var(--ink-3); }

.sid-section-title { margin: 0 0 .5rem; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sid-facts { margin: 0 0 1.4rem; border-top: 1px solid var(--line); }
.sid-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.sid-facts dt { color: var(--ink-2); }
.sid-facts dd { margin: 0; font-weight: 600; color: var(--ink-strong); text-align: right; overflow-wrap: anywhere; }
.sid-check { display: inline-flex; align-items: center; gap: .5rem; }
.sid-check__box { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(23, 32, 28, .25); color: #fff; }
.sid-check.is-yes .sid-check__box { background: var(--accent); box-shadow: none; }

.sid-actions .sid-btn { margin: 0; }

.sid-note { max-width: 720px; margin: 1.75rem auto 0; text-align: center; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2); }

/* optional page body from Ghost (how it works, FAQ ...) */
.sid-content { margin-top: clamp(2.5rem, 6vw, 4rem); }