@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  font-family: 'DM Sans', sans-serif; color: #242a36; background: #f7f8fa; font-synthesis: none;
  --ink: #242a36; --ink-2: #4d576b; --muted: #7b8292; --faint: #9aa1af;
  --border: #e7e9ef; --hair: #eff1f5; --surface: #fff; --canvas: #f7f8fa; --tint: #f5f7ff;
  --blue: #536edd; --blue-soft: #eef1fd;
  --correct: #1f9a6c; --close: #86ad3c; --partial: #d9a033; --incorrect: #cc5454; --open: #c5cad6;
  --correct-bg: #edf6f2; --close-bg: #f2f7e7; --partial-bg: #fbf4e6; --incorrect-bg: #fbefef; --open-bg: #f1f3f8;
}
* { box-sizing: border-box }
body { margin: 0; min-height: 100vh }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
button:disabled { opacity: .5; cursor: default }
a { color: inherit }
:focus-visible { outline: 3px solid #b1bef7; outline-offset: 3px }
[hidden] { display: none !important }

/* ---------- header ---------- */
header { height: 86px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 max(5vw, 24px); background: #fff; position: sticky; top: 0; z-index: 20 }
.brand { display: flex; align-items: flex-end; gap: 12px; text-decoration: none; color: inherit }
.brand svg { height: 28px; width: 28px; display: block }
.brand-text { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 14px; letter-spacing: .3em; color: #2b3445; line-height: 1; padding-bottom: 3px }
.site-nav { display: flex; gap: 40px }
.site-nav a { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 6px 0; border-bottom: 1px solid transparent }
.site-nav a:hover { color: #2b3445 }
.site-nav a[aria-current=page] { color: #2b3445; border-bottom-color: #2b3445 }
.header-right { display: flex; align-items: center; gap: 18px }
.status { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; white-space: nowrap }
.status:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3e9e7e }
.status.busy:before { background: #e0aa59; animation: pulse 1.4s infinite }
@keyframes pulse { 50% { opacity: .35 } }

main { max-width: 1400px; padding: 45px 5vw 0; margin: auto }
@media (min-width: 1550px) { main { padding-left: 25px; padding-right: 25px } }

/* ---------- type ---------- */
.eyebrow { font-size: 11.5px; letter-spacing: 1.6px; color: var(--blue); font-weight: 700; margin-bottom: 12px; text-transform: uppercase }
h1 { font-family: 'Manrope', sans-serif; font-size: 34px; letter-spacing: -1.6px; font-weight: 500; margin: 0 0 10px }
h2 { font-size: 17px; font-weight: 550; letter-spacing: -.4px; margin: 0 }
h3 { font-size: 14px; font-weight: 600; margin: 0 }
p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 }
.num { font-family: 'Manrope', sans-serif; font-variant-numeric: tabular-nums }
.muted { color: var(--muted) }
.small { font-size: 11.5px }
.tag { font-size: 10.5px; letter-spacing: 1px; color: #9299a9; white-space: nowrap; text-transform: uppercase }

.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px }

/* ---------- controls ---------- */
.button { padding: 10px 15px; border: 1px solid #dfe3eb; background: #fff; border-radius: 7px; font-size: 13px; color: #515a6e; display: inline-flex; gap: 10px; align-items: center; white-space: nowrap; text-decoration: none }
.button:hover:not(:disabled) { background: #f0f3fa }
.button.primary { background: var(--blue); border-color: var(--blue); color: #fff }
.button.primary:hover:not(:disabled) { background: #4560cf }
.button.small { padding: 6px 10px; font-size: 12px }
.button.danger { color: #a34b4b }
.text-button { border: 0; background: transparent; color: var(--blue); padding: 0; font-size: 12px }
.text-button:hover { text-decoration: underline }
.field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; padding: 0 12px; color: #8a91a0 }
.field input, .field select { border: 0; outline: 0; background: transparent; padding: 10px 0; min-width: 0; width: 100%; font-size: 13px; color: var(--ink) }
select.select { border: 1px solid var(--border); border-radius: 7px; background: #fff; padding: 9px 30px 9px 12px; font-size: 12.5px; color: var(--ink-2); appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9aa1af 50%), linear-gradient(135deg, #9aa1af 50%, transparent 50%); background-position: right 14px top 50%, right 10px top 50%; background-size: 4px 4px; background-repeat: no-repeat }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.4; cursor: pointer }
.check input { accent-color: var(--blue); width: 14px; height: 14px; margin: 2px 0 }
.check small { display: block; font-size: 11.5px; color: var(--faint); margin-top: 3px }

/* ---------- panels ---------- */
.panel { border: 1px solid var(--border); border-radius: 11px; background: #fff; padding: 24px }
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px }
.panel-title p { margin-top: 5px; font-size: 12px }
.panel-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px }
.grid-3-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start }
.stack { display: grid; gap: 22px }
.section { margin-top: 22px }

#notice { font-size: 12.5px; line-height: 1.6; background: #fff5df; border: 1px solid #efdbae; color: #947027; padding: 12px 16px; border-radius: 7px; margin-bottom: 20px }
.update-banner { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #eef2ff; border: 1px solid #cdd7fb; color: #3a4a8c; padding: 12px 16px; border-radius: 7px; margin-bottom: 14px }
.update-banner strong { display: block; font-size: 13.5px; margin-bottom: 2px }
.update-banner .actions { display: flex; gap: 10px; align-items: center }
.model-upkeep { margin-top: 10px }
.model-upkeep .bad { color: #a34b4b }
.price-edit { display: inline-flex; gap: 4px; align-items: center }
.price-edit input { width: 46px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; text-align: right }
[data-nav].has-update::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--blue); vertical-align: 2px }
#notice.error { background: #fdf0f0; border-color: #f1cfcf; color: #a34b4b }
.empty { padding: 34px 20px; text-align: center; color: #a0a8b6; font-size: 13px; background: linear-gradient(#fff, #f8faff); border-radius: 8px; line-height: 1.6 }

/* ---------- add creator ---------- */
.add { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 10px; align-items: center }
.suggest { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px }
.suggest button { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--border); background: #fff; border-radius: 9px }
.suggest button:hover { border-color: #c9d1ef; background: var(--tint) }
.suggest small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px }

/* ---------- creator cards ---------- */
.creator-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px }
.creator-card { display: block; text-decoration: none; background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 22px; transition: border-color .15s, box-shadow .15s }
.creator-card:hover { border-color: #d5dbee; box-shadow: 0 8px 26px #25324b0f }
.who { display: flex; align-items: center; gap: 13px; min-width: 0 }
.who strong { font-size: 15px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.who small { color: var(--muted); font-size: 12px }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--blue-soft); flex: none; border: 1px solid var(--border) }
.avatar.lg { width: 64px; height: 64px }
.card-score { display: flex; align-items: flex-end; justify-content: space-between; margin: 22px 0 18px; gap: 12px }
.card-score .big { font-family: 'Manrope', sans-serif; font-size: 40px; font-weight: 600; letter-spacing: -1.5px; line-height: 1 }
.card-score .big span { font-size: 13px; color: var(--muted); letter-spacing: 0; font-weight: 500; margin-left: 4px }
.card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-top: 1px solid var(--border); padding-top: 15px }
.card-stats div { font-size: 10.5px; color: var(--faint) }
.card-stats strong { display: block; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px }

/* ---------- outcome bar & pills ---------- */
.outcome-bar { display: flex; gap: 2px; height: 7px; border-radius: 4px; overflow: hidden; background: var(--hair); min-width: 120px }
.outcome-bar span { display: block; height: 100% }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px 3px 8px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); background: var(--open-bg) }
.pill:before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--open) }
.pill.correct { background: var(--correct-bg); color: #17694b } .pill.correct:before { background: var(--correct) }
.pill.close { background: var(--close-bg); color: #4d6b17 } .pill.close:before { background: var(--close) }
.pill.partial { background: var(--partial-bg); color: #8a6315 } .pill.partial:before { background: var(--partial) }
.pill.incorrect { background: var(--incorrect-bg); color: #9b3b3b } .pill.incorrect:before { background: var(--incorrect) }
.pill.due { background: var(--blue-soft); color: #3c54b5 } .pill.due:before { background: var(--blue) }
.pill.working { background: var(--blue-soft); color: #3c54b5 } .pill.working:before { background: none; border: 1.5px solid var(--blue); border-top-color: transparent; width: 6px; height: 6px; animation: spin .9s linear infinite }
.pill.removed, .pill.private, .pill.missing { background: var(--incorrect-bg); color: #9b3b3b } .pill.removed:before, .pill.private:before, .pill.missing:before { background: var(--incorrect) }
.pill.unlisted, .pill.members_only, .pill.age_restricted { background: var(--partial-bg); color: #8a6315 } .pill.unlisted:before, .pill.members_only:before, .pill.age_restricted:before { background: var(--partial) }
.kind { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); font-weight: 600 }

/* ---------- profile ---------- */
.profile-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap }
.profile-head .who strong { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 500; letter-spacing: -1.2px; white-space: normal }
.profile-head .links { display: flex; gap: 14px; font-size: 12.5px; margin-top: 6px; flex-wrap: wrap; color: var(--muted) }
.profile-head .links a { color: var(--blue); text-decoration: none }
.profile-head .links a:hover { text-decoration: underline }

.metrics { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 4px 0 26px }
.metric-flank { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 28px }
.metric-flank:first-child { padding-left: 0 } .metric-flank:last-child { padding-right: 0 }
.metric .label { font-size: 12px; color: var(--muted); display: block }
.metric strong { font-family: 'Manrope', sans-serif; display: block; font-weight: 600; font-size: 24px; letter-spacing: -1px; margin: 8px 0 5px; font-variant-numeric: tabular-nums }
.metric .note { font-size: 10.5px; color: var(--faint); display: block; line-height: 1.4 }
.metric-focus { min-width: 260px; max-width: 360px; text-align: center; padding: 20px 34px; border-radius: 14px; background: linear-gradient(180deg, #f2f4fd, #e9edfb); border: 1px solid #d6ddf6; box-shadow: 0 6px 22px #536edd1c }
.metric-focus > * { display: block }
.metric-focus .evidence { display: inline-block }
.metric-focus .label { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue) }
.metric-focus strong { font-family: "Manrope", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; font-size: 52px; margin: 8px 0 4px; letter-spacing: -2px }
.metric-focus strong span { display: inline; font-size: 16px; color: var(--muted); letter-spacing: 0; font-weight: 500; margin-left: 3px }
.metric-focus.good { background: linear-gradient(180deg, #f2f8f5, #e9f4ef); border-color: #cfe6db; box-shadow: 0 6px 22px #1f9a6c1c } .metric-focus.good .label { color: #17694b }
.metric-focus.bad { background: linear-gradient(180deg, #fcf3f3, #f8eaea); border-color: #efd0d0; box-shadow: 0 6px 22px #cc545420 } .metric-focus.bad .label { color: #9b3b3b }
.metric-focus.mid { background: linear-gradient(180deg, #fdf8ee, #f9f0de); border-color: #efdfbd; box-shadow: 0 6px 22px #d9a0331c } .metric-focus.mid .label { color: #8a6315 }
.evidence { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: #ffffffb3; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px }

/* ---------- pipeline ---------- */
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }
.stage .stage-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 9px; gap: 10px }
.stage .stage-top b { font-weight: 600 }
.stage .stage-top span { font-size: 11.5px; color: var(--muted); white-space: nowrap }
.meter { height: 6px; border-radius: 4px; background: var(--blue-soft); overflow: hidden }
.meter span { display: block; height: 100%; background: var(--blue); border-radius: 4px; transition: width .4s }
.stage small { display: block; font-size: 11px; color: var(--faint); margin-top: 8px; line-height: 1.5; min-height: 16px }
.stage .button { margin-top: 12px }
.jobline { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); padding: 10px 0; border-top: 1px solid var(--hair) }
.jobline:first-child { border-top: 0 }
.jobline .meter { flex: 0 0 120px }
.jobline .msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }

/* ---------- tabs ---------- */
.view-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--border); margin: 34px 0 24px; overflow-x: auto }
.view-tabs button { border: 0; background: none; padding: 0 0 13px; font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap }
.view-tabs button[aria-selected=true] { color: #2b3445; border-bottom-color: #2b3445 }
.view-tabs button .count { font-family: 'DM Sans'; letter-spacing: 0; font-size: 11px; color: var(--faint); margin-left: 4px }

/* ---------- charts ---------- */
.chart { position: relative }
.chart svg { width: 100%; display: block; overflow: visible }
.chart text { font-family: 'DM Sans', sans-serif; fill: #9aa2b2; font-size: 11px }
.chart .grid line { stroke: #eef0f5; stroke-width: 1 }
.chart .hit { fill: transparent }
.chart .hit:hover { fill: #536edd0a }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: #8690a0; align-items: center }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block }
.tooltip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px #25324b1f; padding: 10px 12px; font-size: 12px; color: var(--ink); min-width: 150px; z-index: 5; line-height: 1.6; transform: translate(-50%, calc(-100% - 10px)) }
.tooltip b { font-weight: 600 }
.tooltip .row { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2) }
.tooltip .row span:first-child { display: inline-flex; align-items: center; gap: 6px }
.tooltip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block }
.hbar { display: grid; grid-template-columns: 112px 1fr 46px; gap: 12px; align-items: center; font-size: 12.5px; margin-bottom: 14px }
.hbar .label { color: var(--ink-2); text-transform: capitalize }
.hbar .val { text-align: right; font-family: 'Manrope'; font-weight: 600; font-size: 13px }
.hbar .outcome-bar { height: 10px }
.hbar.link { cursor: pointer; margin: 0 -8px 8px; padding: 3px 8px; border-radius: 8px } .hbar.link:hover { background: #f4f6fb }
.outcome-bar span[data-claims]:hover { filter: brightness(1.12) }
.chart-foot { font-size: 10.5px; color: var(--faint); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 16px; line-height: 1.6 }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto }
table { width: 100%; border-collapse: collapse; text-align: left }
th { font-size: 11.5px; font-weight: 400; color: #a0a7b5; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap }
td { padding: 13px 12px; border-bottom: 1px solid var(--hair); font-size: 13px; vertical-align: middle }
th:first-child, td:first-child { padding-left: 0 }
th:last-child, td:last-child { padding-right: 0 }
tr:last-child td { border-bottom: 0 }
td small { display: block; color: #989fac; font-size: 11px; margin-top: 4px }
td.r, th.r { text-align: right }
tr.link { cursor: pointer } tr.link:hover td { background: #fafbff }
.thumb { width: 96px; height: 54px; border-radius: 6px; object-fit: cover; background: var(--hair); display: block }

/* ---------- claims ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px }
.filters .field { flex: 1 1 220px }
.claim { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 18px 20px; margin-bottom: 12px }
.claim-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted) }
.claim-top .spacer { flex: 1 }
.claim .statement { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 11px 0 8px; font-weight: 500 }
.claim blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--border); font-size: 12.5px; color: var(--muted); line-height: 1.6; font-style: italic }
.claim .meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--faint) }
.claim .meta a { color: var(--blue); text-decoration: none }
.claim .meta a:hover { text-decoration: underline }
.verdict { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #fafbfd; border: 1px solid var(--hair); font-size: 12.5px; line-height: 1.6; color: var(--ink-2) }
.verdict .sources { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 11.5px }
.verdict .sources a { color: var(--blue); text-decoration: none; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.override { position: relative }
.override-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 10px 30px #25324b1f; padding: 6px; z-index: 10; min-width: 180px }
.override-menu button { display: flex; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; gap: 8px; align-items: center; text-align: left }
.override-menu button:hover { background: var(--tint) }
.override-menu button small { margin-left: auto; font-size: 11px; color: var(--faint) }
.override-menu .menu-label { border-top: 1px solid var(--border); margin: 6px 4px 2px; padding: 8px 6px 2px; font-size: 11px; color: var(--faint) }
.review-note { margin-top: 8px }
.hover-menu-wrap { position: relative; display: inline-block }
.hover-menu { display: none; position: absolute; left: 0; top: 100%; margin-top: 6px; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 10px 30px #25324b1f; padding: 6px; z-index: 10; min-width: 230px }
.hover-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px }
.hover-menu-wrap:hover .hover-menu, .hover-menu-wrap:focus-within .hover-menu { display: block }
.hover-menu-wrap.closed .hover-menu { display: none }
.hover-menu button { display: block; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; text-align: left; color: var(--ink-2) }
.hover-menu button:hover, .hover-menu button:focus-visible { background: var(--tint) }
.hover-menu button b { font-weight: 600 }
.hover-menu button small { display: block; font-size: 11px; color: var(--faint); margin-top: 2px }
dialog.modal { border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: min(540px, calc(100vw - 32px)); box-shadow: 0 24px 60px #25324b33; color: var(--ink); background: #fff }
dialog.modal::backdrop { background: #1d243359 }
dialog.modal .panel-title { align-items: flex-start }
dialog.modal button.close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--faint); padding: 0 2px }
dialog.modal button.close:hover { color: var(--ink) }
.modal-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13px; color: var(--faint) }
.modal-steps li { padding-left: 24px; position: relative }
.modal-steps li::before { content: ''; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #d3d7e0 }
.modal-steps li.active { color: var(--ink) }
.modal-steps li.active::before { border-color: var(--blue); border-top-color: transparent; animation: spin .9s linear infinite }
.modal-steps li.done { color: var(--ink-2) }
.modal-steps li.done::before { background: #1f9a6c; border-color: #1f9a6c }
.modal-steps li.failed { color: #a34b4b }
.modal-steps li.failed::before { background: #cc5454; border-color: #cc5454 }
.modal-steps li b { font-weight: 550 }
.modal-steps li small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px }
.modal-steps li.summary { padding: 10px 12px; background: var(--tint); border-radius: 7px; color: var(--ink-2) }
.modal-steps li.summary::before { display: none }
.modal-error { margin-top: 14px; font-size: 12.5px; line-height: 1.6; background: #fdf0f0; border: 1px solid #f1cfcf; color: #a34b4b; padding: 10px 14px; border-radius: 7px }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px }
@keyframes spin { to { transform: rotate(360deg) } }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 12px; color: var(--muted) }

/* ---------- stance changes ---------- */
.stance { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-bottom: 14px; overflow: hidden }
.stance > div { padding: 18px 20px }
.stance .arrow { display: grid; place-items: center; color: var(--faint); background: #fafbfd; border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); padding: 0; font-size: 16px }
.stance .when { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 8px; align-items: center }
.stance .when a { color: var(--blue); text-decoration: none }
.stance p { color: var(--ink); font-size: 13.5px }
.stance-summary { grid-column: 1 / -1; border-top: 1px solid var(--hair); background: #fafbfd; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 12px; align-items: center; flex-wrap: wrap }

/* ---------- video page ---------- */
.video-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start }
.player { aspect-ratio: 16/9; width: 100%; border: 0; border-radius: 10px; background: #0d1220 }
.gone-banner { aspect-ratio: 16/9; border-radius: 10px; background: linear-gradient(160deg, #fbefef, #f6e6e6); border: 1px solid #efd0d0; display: grid; place-items: center; text-align: center; padding: 24px; color: #9b3b3b }
.gone-banner strong { display: block; font-size: 17px; margin-bottom: 6px }
.transcript { max-height: 70vh; overflow-y: auto; font-size: 13px; line-height: 1.75; color: var(--ink-2); padding-right: 6px }
.transcript .seg { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 3px 6px; border-radius: 5px }
.transcript .seg.hl { background: #fff7e3 }
.transcript .seg.hl.correct { background: var(--correct-bg) } .transcript .seg.hl.incorrect { background: var(--incorrect-bg) }
.transcript .ts { color: var(--blue); font-size: 11.5px; font-family: 'Manrope'; padding-top: 3px; text-decoration: none; cursor: pointer; background: none; border: 0; text-align: left }

/* ---------- events ---------- */
.events { display: grid; gap: 0 }
.event { display: grid; grid-template-columns: 100px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 12.5px }
.event:first-child { border-top: 0 }
.event .when { color: var(--faint); font-size: 11.5px }
.event a { text-decoration: none }
.event a:hover { text-decoration: underline }

footer { display: flex; justify-content: space-between; align-items: center; padding: 29px 0; margin-top: 40px; border-top: 1px solid var(--border); font-size: 11.5px; color: #9ba3b0; gap: 12px; flex-wrap: wrap }
#app:empty ~ footer, #app:has(> .booting) ~ footer { visibility: hidden }  /* not alone at the top while the page loads */
/* The placeholder page in index.html. It fades in after a moment, so a page drawn at once from copies never flashes it. */
.booting { animation: boot-in .3s .15s both }
.booting .bone { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--hair) 25%, #f7f8fb 50%, var(--hair) 75%) 0 0 / 200% 100%; animation: shimmer 1.4s infinite linear }
.boot-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 34px 0 22px }
.boot-cards .bone { height: 92px; border-radius: 11px }
.boot-panel { border: 1px solid var(--border); border-radius: 11px; background: #fff; padding: 24px; display: grid; gap: 16px }
@keyframes boot-in { from { opacity: 0 } }
@keyframes shimmer { to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .booting .bone { animation: none } }
@media (max-width: 620px) { .boot-cards { grid-template-columns: 1fr 1fr } }
footer > span:first-child { font-family: 'Jost'; font-weight: 300; letter-spacing: .24em; text-transform: uppercase; font-size: 11px; color: #858ea1 }
details.methodology { margin-top: 22px; font-size: 12px; color: #8992a2; line-height: 1.7 }
details.methodology summary { display: flex; justify-content: space-between; cursor: pointer; padding: 12px 0; list-style: none }
details.methodology p { font-size: 12px; margin-bottom: 10px; max-width: 950px }

@media (max-width: 1100px) {
  .metrics { grid-template-columns: 1fr 1fr; row-gap: 20px }
  .metric-focus { grid-column: 1 / -1; order: -1; justify-self: center; width: 100% }
  .metric-flank { padding: 0 }
  .grid-3-1, .video-layout { grid-template-columns: 1fr }
}
@media (max-width: 850px) {
  .grid-2, .pipeline { grid-template-columns: 1fr }
  .add { grid-template-columns: 1fr }
  .site-nav { gap: 22px }
  .metrics { grid-template-columns: 1fr }
  .stance { grid-template-columns: 1fr } .stance .arrow { padding: 6px; border: 0 }
}
@media (max-width: 620px) {
  header { height: 68px; padding: 0 20px }
  .brand-text, .status { display: none }
  main { padding: 28px 18px 0 }
  .event { grid-template-columns: 1fr }
}
.metric-focus .note { font-size: 11.5px; color: var(--muted); line-height: 1.5; max-width: 260px; margin: 0 auto }
.transcript .seg { align-items: start }
.eyebrow a { color: inherit; text-decoration: none }
.lesson .diff { width: 100%; margin-top: 12px; font-size: 12.5px; border-collapse: collapse }
.lesson .diff th, .lesson .diff td { text-align: left; vertical-align: top; padding: 6px 10px 6px 0; border-top: 1px solid var(--hair); line-height: 1.5 }
.lesson .diff thead th { border-top: 0; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); font-weight: 500 }
.lesson .diff tbody th { width: 130px; color: var(--muted); font-weight: 500 }
.lesson .diff td:nth-child(2) { color: #9b3b3b; text-decoration: line-through; text-decoration-color: #9b3b3b55 }
.lesson .diff td:nth-child(3) { color: #17694b }
.lesson .diff a { color: var(--blue); text-decoration: none }
.check-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: -6px 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: #fafbfd; font-size: 12.5px; color: var(--ink-2) }
.check-bar .check { display: flex; gap: 8px; align-items: center }
.prompt-text { display: block; width: 100%; box-sizing: border-box; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1.6; color: var(--ink); background: #fcfcfe; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; resize: vertical; white-space: pre-wrap; word-break: break-word }
textarea.prompt-text:focus { outline: 0; border-color: #c9d1ef; background: #fff }
pre.prompt-text { margin: 8px 0 0; max-height: 420px; overflow: auto }
.lesson-pick { accent-color: var(--blue); width: 14px; height: 14px; margin: 0 }