/* Site panel "Option A: Tabs" (owner-approved mockup, 2026-11-07), shared by the logged-out demo
   (templates/studio_demo.html: body.sd-body, frame in studio-demo.css) and the logged-in Site Studio
   (templates/site_studio.html: .ss-pa on the panel and on the "Screening for" menu, frame in studio-a.css).
   Load after studio-demo.css / studio-a.css. Tokens are scoped (body.sd-body, .ss-pa), so nothing else changes. */
body.sd-body, .ss-pa {
    --sd-surface: #fff; --sd-subtle: #F5F5F3; --sd-subtle2: #EFEFEC; --sd-line: #ECEBE8; --sd-line2: #E2E1DD;
    --sd-text: #15171C; --sd-text2: #555B66; --sd-text3: #8B909A;
    --sd-accent: #FF6B4A; --sd-accent-soft: #FFF2EE; --sd-accent-ink: #D9472A;
    --sd-good: #1F9D55; --sd-good-soft: #EAF6EE; --sd-good-line: #CDEBD8;
    --sd-warn: #D9930D; --sd-warn-soft: #FDF5E4; --sd-warn-line: #F2DFB4;
    --sd-bad: #E5484D; --sd-bad-soft: #FDEEEE; --sd-bad-line: #F6CCCD;
    --sd-shadow: 0 1px 2px rgba(20,22,28,.05), 0 8px 24px rgba(20,22,28,.07);
    --sd-shadow-sm: 0 1px 2px rgba(20,22,28,.06), 0 1px 1px rgba(20,22,28,.03);
}
body.sd-body.dark-mode, .dark-mode body.sd-body, .dark-mode .ss-pa {
    --sd-surface: #17181C; --sd-subtle: #1D1F23; --sd-subtle2: #24262B; --sd-line: #26282D; --sd-line2: #30333A;
    --sd-text: #ECEDEF; --sd-text2: #A7ACB6; --sd-text3: #737884;
    --sd-accent: #FF7759; --sd-accent-soft: rgba(255,107,74,.13); --sd-accent-ink: #FF8A6E;
    --sd-good: #3DCB7A; --sd-good-soft: rgba(61,203,122,.10); --sd-good-line: rgba(61,203,122,.22);
    --sd-warn: #F0B341; --sd-warn-soft: rgba(240,179,65,.10); --sd-warn-line: rgba(240,179,65,.25);
    --sd-bad: #FF6B6F; --sd-bad-soft: rgba(255,107,111,.10); --sd-bad-line: rgba(255,107,111,.25);
    --sd-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45); --sd-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
}

/* What are you screening for? */
.sd-uc { position: relative; display: flex; align-items: center; gap: 10px; margin-left: 0; padding-left: 16px; border-left: 1px solid var(--sd-line); min-width: 0; }
.sd-uc-k { font-size: 12px; color: var(--sd-text3); font-weight: 500; white-space: nowrap; }
.sd-uc-btn {
    display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border-radius: 10px; border: 0; cursor: pointer;
    background: var(--sd-subtle); color: var(--sd-text); font: inherit; font-weight: 600; font-size: 13px; white-space: nowrap; min-width: 0;
}
.sd-uc-btn:hover, .sd-uc-btn.on { background: var(--sd-subtle2); }
.sd-uc-btn:focus-visible, .sd-uc-it:focus-visible, .sd-tabs button:focus-visible, .sd-ib:focus-visible, .sd-more:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.sd-uc-ic { display: flex; color: var(--sd-accent); }
.sd-uci { width: 16px; height: 16px; flex: none; display: block; }
.sd-uc-name { overflow: hidden; text-overflow: ellipsis; }
.sd-uc-chev { width: 14px; height: 14px; color: var(--sd-text3); flex: none; }
.sd-uc-menu {
    position: absolute; top: 44px; left: 16px; width: 280px; z-index: 1600; padding: 6px; border-radius: 12px;
    background: var(--sd-surface); box-shadow: var(--sd-shadow), 0 0 0 1px var(--sd-line); animation: sd-in .15s ease-out;
}
.sd-uc-mh { font-size: 11.5px; line-height: 1.4; color: var(--sd-text3); padding: 6px 10px 8px; }
.sd-uc-it {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer;
    background: none; color: var(--sd-text); font: inherit; font-size: 13px; font-weight: 500; text-align: left;
}
.sd-uc-it .sd-uci { color: var(--sd-text3); }
.sd-uc-it:hover { background: var(--sd-subtle); }
.sd-uc-it.on { background: var(--sd-accent-soft); color: var(--sd-accent-ink); }
.sd-uc-it.on .sd-uci { color: var(--sd-accent); }
.sd-uc-it.on::after { content: "\2713"; margin-left: auto; font-weight: 700; }

/* ---------- panel frame ---------- */
.ss-studio-v2.sd-page #chatCard, .ss-studio-v2 #chatCard.ss-pa { display: flex; flex-direction: column; background: var(--sd-surface); border-left: 1px solid var(--sd-line); color: var(--sd-text); font-size: 13px; line-height: 1.45; }
.sd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px 16px; }
.sd-pane[hidden] { display: none !important; }

/* slim site header */
.sd-sh { padding: 20px 24px 0; flex: none; }
.sd-sh-eb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sd-text3); min-height: 21px; }
.sd-badge, :is(.sd-page, .ss-pa) .sd-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--sd-accent-ink);
    background: var(--sd-accent-soft); padding: 3px 8px; border-radius: 6px; border: 0; white-space: nowrap;
}
.sd-badge.sd-badge-own { background: var(--sd-subtle2); color: var(--sd-text); }
.sd-sh-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 8px; }
.sd-sh-name { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; color: var(--sd-text); min-width: 0; overflow-wrap: anywhere; flex: 1; }
.sd-sh-name .sd-skel-line { display: block; height: 20px; }
.sd-sh-acts { display: flex; gap: 2px; margin-top: -4px; flex: none; }
.sd-ib { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--sd-text2); cursor: pointer; padding: 0; }
.sd-ib:hover { background: var(--sd-subtle); color: var(--sd-text); }
.sd-ib svg { width: 17px; height: 17px; }
.sd-ib-sm { width: 22px; height: 22px; border-radius: 6px; }
.sd-ib-sm svg { width: 13px; height: 13px; }
.sd-ib.copied { color: var(--sd-good); }
.sd-sh-co { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sd-text3); margin-top: 4px; min-height: 22px; }
.sd-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: normal; }

/* tabs */
.sd-tabs { display: flex; gap: 24px; padding: 0 24px; margin-top: 16px; border-bottom: 1px solid var(--sd-line); flex: none; }
.sd-tabs button {
    position: relative; height: 40px; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 500; font-size: 13px; color: var(--sd-text3); white-space: nowrap;
}
.sd-tabs button:hover { color: var(--sd-text2); }
.sd-tabs button.on { color: var(--sd-text); }
.sd-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sd-accent); }
.sd-tab-n { font-size: 11px; font-weight: 600; background: var(--sd-subtle2); color: var(--sd-text2); border-radius: 999px; padding: 1px 7px; }
.sd-spark { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-tabs .sd-spark, .sd-ai-t .sd-spark, .sd-aip-t .sd-spark { color: var(--sd-accent); }
.sd-tabs button:not(.on) .sd-spark { color: inherit; }

/* shared atoms */
.sd-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sd-text3); }
.sd-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--sd-good); }
.sd-dot.warn { background: var(--sd-warn); } .sd-dot.bad { background: var(--sd-bad); }
.sd-dot.na { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sd-text3); }
.sd-dot.wait { background: var(--sd-text3); opacity: .5; animation: ss-ck-pulse 1.2s ease-in-out infinite; }
.sd-more { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--sd-accent-ink); font-weight: 600; font-size: 12.5px; }
.sd-more svg { width: 13px; height: 13px; }
.sd-more:hover { text-decoration: underline; }
.sd-flex { flex: 1; }
.sd-fine { font-size: 11.5px; color: var(--sd-text3); line-height: 1.55; margin: 8px 0 0; }
.sd-fine a { color: var(--sd-text2); }
.sd-off { opacity: .55; }

/* ---------- Overview ---------- */
.sd-ov.ss-site-card { padding: 0; border: 0; background: none; margin: 0; }
.sd-vcard { border-radius: 12px; padding: 16px; background: var(--sd-good-soft); box-shadow: inset 0 0 0 1px var(--sd-good-line); --sd-v: var(--sd-good); --sd-v-line: var(--sd-good-line); }
.sd-vcard.sd-v-warn { background: var(--sd-warn-soft); box-shadow: inset 0 0 0 1px var(--sd-warn-line); --sd-v: var(--sd-warn); --sd-v-line: var(--sd-warn-line); }
.sd-vcard.sd-v-bad { background: var(--sd-bad-soft); box-shadow: inset 0 0 0 1px var(--sd-bad-line); --sd-v: var(--sd-bad); --sd-v-line: var(--sd-bad-line); }
.sd-vcard.sd-v-busy { background: var(--sd-subtle); box-shadow: inset 0 0 0 1px var(--sd-line); --sd-v: var(--sd-text3); --sd-v-line: var(--sd-line); }
.sd-verdict { display: flex; gap: 14px; align-items: center; }
.sd-vi { width: 36px; height: 36px; border-radius: 50%; background: var(--sd-v); color: #fff; display: grid; place-items: center; flex: none; }
.sd-vi svg { width: 20px; height: 20px; stroke-width: 2.6; }
.sd-v-warn .sd-vi svg, .sd-v-bad .sd-vi svg { width: 18px; height: 18px; stroke-width: 2.3; }
.sd-v-busy .sd-vi { background: transparent; }
.sd-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--sd-line2); border-top-color: var(--sd-accent); animation: sd-spin .9s linear infinite; }
@keyframes sd-spin { to { transform: rotate(360deg); } }
.sd-verdict b { display: block; font-size: 15px; font-weight: 650; color: var(--sd-text); }
.sd-verdict span { font-size: 12.5px; color: var(--sd-text2); }
.sd-blurb { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--sd-text); }
.sd-nc { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sd-v-line); font-size: 12px; color: var(--sd-text2); }
.sd-nc-i { width: 13px; height: 13px; border-radius: 50%; border: 1.6px dashed var(--sd-text3); flex: none; }
.sd-steps { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--sd-line); }
.sd-steps .ss-step { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; color: var(--sd-text2); }
.sd-steps .ss-step svg { width: 14px; height: 14px; flex: none; }
.sd-steps .ss-step-done svg { color: var(--sd-good); } .sd-steps .ss-step-fail svg { color: var(--sd-bad); }
.sd-steps .ss-step-pending svg, .sd-steps .ss-step-wait svg { color: var(--sd-text3); }
.sd-steps .ss-step-pending svg { animation: sd-spin 1.4s linear infinite; }
.sd-steps .ss-step-detail { margin-left: auto; color: var(--sd-text3); font-size: 11.5px; }

.sd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.sd-kpi { padding: 12px 10px 12px 12px; border-radius: 12px; background: var(--sd-subtle); border: 0; text-align: left; font: inherit; color: var(--sd-text); min-width: 0; }
button.sd-kpi { cursor: pointer; }
button.sd-kpi:hover { background: var(--sd-subtle2); }
.sd-kpi-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sd-text3); font-weight: 500; }
.sd-kpi-h svg { width: 13px; height: 13px; }
/* Values and units never get cut: in a narrow tile (1024 px wide panel, phone) the unit drops under the value and the
   status line wraps, instead of an ellipsis ("kWh/m²…"). */
.sd-kpi-v { font-size: 20px; font-weight: 650; letter-spacing: -.02em; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; row-gap: 0; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; line-height: 1.2; }
.sd-kpi-v small { font-size: 10.5px; font-weight: 500; color: var(--sd-text3); letter-spacing: -.01em; }
.sd-kpi-s { font-size: 11.5px; line-height: 1.35; color: var(--sd-text2); margin-top: 2px; display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.sd-kpi-s .sd-dot { margin-top: calc((1.35em - 8px) / 2); }
.sd-kpi-s span:last-child { min-width: 0; overflow-wrap: anywhere; }
.sd-kpi.sd-off .sd-kpi-s span:last-child { font-style: italic; }

.sd-sec { margin-top: 20px; }
.sd-sec[hidden] { display: none; }
.sd-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sd-hl { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--sd-line); overflow: hidden; }
.sd-hl-r { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: none; font: inherit; text-align: left; color: var(--sd-text); cursor: pointer; }
.sd-hl-r + .sd-hl-r { border-top: 1px solid var(--sd-line); }
.sd-hl-r:hover { background: var(--sd-subtle); }
.sd-hl-l { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sd-hl-m { font-size: 11.5px; color: var(--sd-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-hl-v { font-weight: 650; font-size: 14px; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.sd-hl-r.sd-off { opacity: .55; }

.sd-aip { padding: 14px 16px; border-radius: 12px; background: var(--sd-subtle); }
.sd-aip-t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sd-text2); }
.sd-aip-note { font-weight: 500; color: var(--sd-text3); margin-left: 4px; }
.sd-aip p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--sd-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sd-aip p.sd-aip-wait { display: flex; align-items: center; gap: 8px; color: var(--sd-text3); }
.sd-aip-lock { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--sd-text2); }
.sd-aip-lock svg { width: 13px; height: 13px; color: var(--sd-accent); }
.sd-ai-uc { color: #b26a00 !important; }
.dark-mode .sd-ai-uc { color: var(--sd-warn) !important; }

/* ---------- Checks ---------- */
.sd-grp { margin-bottom: 16px; }
.sd-grp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px 2px; }
.sd-grp-n { font-size: 11px; color: var(--sd-text3); text-align: right; }
.sd-ck-list { list-style: none; margin: 0; padding: 0; }
.sd-ck { border-bottom: 1px solid var(--sd-line); }
.sd-ck:last-child { border-bottom: 0; }
.sd-ck-row {
    display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 14px; gap: 2px 8px; align-items: baseline; width: 100%;
    padding: 10px 2px; border: 0; background: none; font: inherit; color: var(--sd-text); text-align: left; cursor: pointer; border-radius: 6px;
}
.sd-ck-row:hover:not([disabled]) { background: var(--sd-subtle); }
.sd-ck-row[disabled] { cursor: default; }
.sd-ck-row .sd-dot { align-self: center; justify-self: center; }
.sd-ck-l { color: var(--sd-text2); }
.sd-ck-v { font-weight: 600; text-align: right; max-width: 220px; }
.sd-ck-wait .sd-ck-v { font-weight: 500; color: var(--sd-text3); }
.sd-ck-fail .sd-ck-v { font-weight: 500; color: var(--sd-text2); }
.sd-ck-i { grid-column: 4; grid-row: 1; color: var(--sd-text3); font-size: 12px; opacity: .5; text-align: center; }
.sd-ck-row:hover .sd-ck-i, .sd-ck.is-open .sd-ck-i { opacity: 1; color: var(--sd-accent); }
.sd-ck-d { grid-column: 2 / 4; font-size: 11.5px; color: var(--sd-text3); line-height: 1.45; }
.sd-ck-d em { font-style: normal; opacity: .85; }
.sd-ck.sd-off .sd-ck-d { font-style: italic; }
.sd-ck.sd-off .sd-ck-d em { font-style: normal; }
.sd-ck-x { padding: 0 8px 12px 26px; font-size: 12px; line-height: 1.5; color: var(--sd-text); }
.sd-ck-x a { color: var(--sd-accent-ink); }
.sd-ck-why { display: block; margin-bottom: 4px; }
.sd-ck-src { display: block; margin-top: 4px; color: var(--sd-text3); font-size: 11.5px; }

/* ---------- AI analyst ---------- */
.sd-ai-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sd-ai-t { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13px; }
.sd-ai-t .sd-spark { width: 16px; height: 16px; }
.sd-ai-msg { margin-top: 12px; font-size: 13.5px; line-height: 1.65; color: var(--sd-text); }
.sd-ai-msg p { margin: 0; }
.sd-ai-msg p + p, .sd-ai-read p + p, .sd-ai-lead + .sd-ai-read { margin-top: 10px; }
.sd-ai-read .sd-act { margin-top: 8px; }
.sd-ai-msg .sd-locked { margin-top: 10px; }
.sd-q-lbl { margin: 20px 0 8px; }
.sd-qchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sd-qchips .ss-chip { font: inherit; font-size: 12px; color: var(--sd-text2); border-radius: 999px; padding: 6px 11px; background: var(--sd-surface); border: 0; box-shadow: 0 0 0 1px var(--sd-line2); cursor: pointer; }
.sd-qchips .ss-chip:hover { color: var(--sd-text); box-shadow: 0 0 0 1px var(--sd-accent); }

/* ask box, pinned under every tab */
:is(.sd-page, .ss-pa) .chat-input.sd-ft { flex: none; padding: 12px 24px 16px; border-top: 1px solid var(--sd-line); background: var(--sd-surface); }
.sd-ask.input-group { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--sd-surface); box-shadow: 0 0 0 1px var(--sd-line2), var(--sd-shadow-sm); }
.sd-ask .input-field, :is(.sd-page, .ss-pa) .sd-ask .input-field { border: 0; background: transparent; padding: 7px 0; height: 34px; font-size: 13px; color: var(--sd-text); cursor: text; }
.sd-ask .input-field::placeholder { color: var(--sd-text3); }
:is(.sd-page, .ss-pa) .sd-ask .send-button { width: 34px; height: 34px; border-radius: 9px; background: var(--sd-accent); color: #fff; flex: none; }
:is(.sd-page, .ss-pa) .sd-ask .send-button svg { width: 16px; height: 16px; }


@media (max-width: 1100px) {
    .sd-sh { padding: 16px 18px 0; } .sd-tabs { padding: 0 18px; gap: 18px; } .sd-scroll { padding: 16px 18px 14px; }
    :is(.sd-page, .ss-pa) .chat-input.sd-ft { padding: 10px 18px 14px; }
    .sd-uc-k { display: none; }
    .sd-kpi { padding: 10px; } .sd-kpi-v { font-size: 18px; }
}
@media (max-width: 768px) {
    .sd-uc { padding-left: 0; border-left: 0; position: static; }
    .sd-uc-name { display: none; }
    .sd-uc-btn { height: 34px; padding: 0 6px 0 8px; gap: 4px; }
    .sd-uc-menu { position: fixed; top: calc(var(--sd-top-h) - 4px); left: 8px; right: 8px; width: auto; }
    .sd-sh { padding: 14px 16px 0; } .sd-tabs { padding: 0 16px; gap: 20px; margin-top: 12px; }
    .sd-scroll { padding: 14px 16px 12px; overflow: visible; }
    :is(.sd-page, .ss-pa) .chat-input.sd-ft { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .sd-sh-name { font-size: 18px; }
    .sd-kpi { padding: 10px; } .sd-kpi-v { font-size: 17px; }
    .sd-ck-v { max-width: 52vw; }
}
@media (prefers-reduced-motion: reduce) { .sd-spin, .sd-steps .ss-step-pending svg, .sd-dot.wait, .sd-uc-menu { animation: none !important; } }