/* ===================================================================================
   YT Engine — premium component layer. Loads last. Tokens only; both themes via theme.css.
   Motion is limited to 150ms transitions on hover/press/focus; nothing moves on its own.
   =================================================================================== */
:root{
  --bg:#F5F6FA;--surface:#FFFFFF;--surface-2:#F8F9FC;--ink:#0B0D12;--ink-2:#4A5065;--muted:#8890A4;
  --line:#E4E7EE;--line-strong:#D3D8E3;--accent:#FF4A00;--accent-2:#F03E00;--accent-soft:#FFF0E8;--accent-glow:rgba(255,74,0,.18);
  --tint-blue:#EEF1F8;--ok:#177A4E;--ok-soft:#E4F5EC;--warn:#A4690F;--warn-soft:#FBF1DA;--bad:#B93636;--bad-soft:#FBE6E6;--info:#3552C9;--info-soft:#E7EBFA;
  --shadow-xs:0 1px 1px rgba(11,13,18,.04),0 1px 2px rgba(11,13,18,.05);
  --shadow-sm:0 1px 2px rgba(11,13,18,.04),0 2px 6px rgba(11,13,18,.05);
  --shadow-md:0 2px 6px rgba(11,13,18,.05),0 14px 34px -14px rgba(11,13,18,.16);
  --shadow-lg:0 8px 24px -8px rgba(11,13,18,.16),0 32px 80px -24px rgba(11,13,18,.24);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.75);
  --radius:18px;--radius-sm:12px;--ease:cubic-bezier(.2,.7,.2,1);--t:150ms;
}
:root[data-theme="dark"],.system-dark{
  --bg:#0E1016;--surface:#151821;--surface-2:#1B1F2A;--ink:#EEF0F6;--ink-2:#B6BBCA;--muted:#7F8699;
  --line:#252A36;--line-strong:#313746;--accent:#FF5A14;--accent-2:#F04A08;--accent-soft:#33200F;--accent-glow:rgba(255,90,20,.25);
  --tint-blue:#1D2230;--ok:#5FD497;--ok-soft:#10301F;--warn:#E4B65A;--warn-soft:#33270E;--bad:#F27A7A;--bad-soft:#3A1818;--info:#93A6FF;--info-soft:#1B2242;
  --shadow-xs:0 1px 1px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.35);--shadow-sm:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 2px 8px rgba(0,0,0,.4),0 16px 40px -14px rgba(0,0,0,.6);--shadow-lg:0 8px 24px -8px rgba(0,0,0,.6),0 32px 80px -24px rgba(0,0,0,.7);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.05);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]){
  --bg:#0E1016;--surface:#151821;--surface-2:#1B1F2A;--ink:#EEF0F6;--ink-2:#B6BBCA;--muted:#7F8699;
  --line:#252A36;--line-strong:#313746;--accent:#FF5A14;--accent-2:#F04A08;--accent-soft:#33200F;--accent-glow:rgba(255,90,20,.25);
  --tint-blue:#1D2230;--ok:#5FD497;--ok-soft:#10301F;--warn:#E4B65A;--warn-soft:#33270E;--bad:#F27A7A;--bad-soft:#3A1818;--info:#93A6FF;--info-soft:#1B2242;
  --shadow-xs:0 1px 1px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.35);--shadow-sm:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 2px 8px rgba(0,0,0,.4),0 16px 40px -14px rgba(0,0,0,.6);--shadow-lg:0 8px 24px -8px rgba(0,0,0,.6),0 32px 80px -24px rgba(0,0,0,.7);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.05);}}

/* ---------- ground + type rhythm ---------- */
body{background:radial-gradient(1200px 600px at 8% -10%,color-mix(in srgb,var(--accent) 6%,var(--bg)) 0,var(--bg) 60%),var(--bg)!important;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{letter-spacing:-.028em!important;text-wrap:balance}
h1 em{color:var(--ink);font-style:italic}
h2{letter-spacing:-.01em}
.muted{color:var(--muted)!important}
.kpi-label,th,.label,.field-label,.group-label,.side-group-label,.nav-label{letter-spacing:.11em!important;text-transform:uppercase;font-size:11px!important;font-weight:600;color:var(--muted)!important}
.num,.kpi-value,td{font-variant-numeric:tabular-nums}
a{transition:color var(--t) var(--ease)}
*:focus{outline:none}
*:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent-glow),0 0 0 5px var(--accent)!important;border-radius:inherit}

/* ---------- surfaces ---------- */
.panel,.card,.hero,.overview-hero{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow-sm),var(--inner-hi)!important;transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
a.card:hover,.card[hx-get]:hover,.video-card:hover,.opportunity-row:hover,.row[hx-get]:hover{border-color:var(--line-strong)!important;box-shadow:var(--shadow-md),var(--inner-hi)!important}
.video-card:hover,a.card:hover{transform:translateY(-2px)}
.kpi{position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--accent),transparent 70%);opacity:0}
.kpi .kpi-highlight ~ *{}
.kpi-value{font-size:34px!important;font-weight:600!important;letter-spacing:-.035em!important;line-height:1!important;margin-top:12px!important}
.kpi-context{color:var(--muted)!important;font-size:13px!important}

/* ---------- buttons: objects with weight ---------- */
.btn,.button,a.button,.btn-soft,button:not(.icon-button):not(.seg):not(.theme-switch button):not(.menu-toggle),input[type=submit]{
  min-height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:-.005em;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);color:var(--ink);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-xs),var(--inner-hi);cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease)}
.btn:hover,.button:hover,a.button:hover,.btn-soft:hover,button:not(.icon-button):not(.seg):not(.theme-switch button):not(.menu-toggle):hover{border-color:color-mix(in srgb,var(--line-strong) 60%,var(--ink));box-shadow:var(--shadow-sm),var(--inner-hi);transform:translateY(-1px)}
.btn:active,.button:active,button:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(11,13,18,.12)}
.btn-primary,.button.primary,.button-primary,form[action^="/studio/"] button[type=submit],form[action^="/studio/"] button:not([type]),.btn-primary:hover{
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-2) 100%)!important;color:#fff!important;border:1px solid var(--accent-2)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 1px 2px rgba(240,62,0,.3),0 6px 16px -6px rgba(240,62,0,.55)!important;min-height:44px;padding:0 22px;font-size:15px}
.btn-primary:hover,.button.primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 4px rgba(240,62,0,.3),0 10px 24px -8px rgba(240,62,0,.6)!important}
.btn-primary:active,.button.primary:active{filter:brightness(.97);transform:translateY(0);box-shadow:inset 0 2px 4px rgba(120,30,0,.35)!important}
.btn-primary span,.btn-primary .arrow{transition:transform var(--t) var(--ease)}
.btn-primary:hover .arrow{transform:translateX(2px)}
.icon-button{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs);color:var(--ink-2);transition:all var(--t) var(--ease)}
.icon-button:hover{border-color:var(--line-strong);color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.icon-button:active{transform:translateY(0)}
button:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---------- inputs ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]),select,textarea{
  background:var(--surface)!important;border:1px solid var(--line-strong)!important;border-radius:var(--radius-sm)!important;color:var(--ink)!important;
  box-shadow:inset 0 1px 2px rgba(11,13,18,.05)!important;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--accent) 65%,var(--line-strong))!important;box-shadow:inset 0 1px 2px rgba(11,13,18,.04),0 0 0 4px var(--accent-glow)!important}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)!important;background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important;padding-right:34px!important}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--accent)}
input[type=file]{font-size:13px;color:var(--ink-2)}
input[type=file]::file-selector-button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--surface),var(--surface-2));color:var(--ink);font:inherit;font-weight:600;margin-right:10px;cursor:pointer}

/* ---------- segmented control ---------- */
.segmented{background:var(--surface-2)!important;border:1px solid var(--line)!important;border-radius:999px!important;padding:4px!important;box-shadow:inset 0 1px 2px rgba(11,13,18,.05)!important;gap:2px}
.segmented a,.segmented .seg,.seg{border-radius:999px!important;padding:0 16px!important;min-height:36px!important;display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)!important;font-weight:500;font-size:14px;transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.segmented a:hover,.seg:hover{color:var(--ink)!important}
.segmented a.active,.segmented .active,.seg.active{background:var(--surface)!important;color:var(--ink)!important;box-shadow:var(--shadow-sm),var(--inner-hi)!important;font-weight:600}
.segmented .count,.seg .count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- sidebar ---------- */
.sidebar{background:linear-gradient(180deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 92%,var(--bg)) 100%)!important;border-right:1px solid var(--line)!important}
.wordmark i{box-shadow:0 0 0 4px var(--accent-glow);}
.side-item{color:var(--ink-2)!important;font-weight:500;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.side-item svg{opacity:.8;transition:opacity var(--t) var(--ease)}
.side-item:hover{background:var(--surface-2)!important;color:var(--ink)!important}
.side-item:hover svg{opacity:1}
.side-item.active{background:var(--accent-soft)!important;color:var(--ink)!important;font-weight:600;position:relative}
.side-item.active:before{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
.side-item.active svg{opacity:1;color:var(--accent)}
.global-search input{background:var(--surface-2)!important;box-shadow:none!important;border-color:var(--line)!important}
.global-search input:focus{background:var(--surface)!important}
.theme-switch{box-shadow:inset 0 1px 2px rgba(11,13,18,.05)}
.theme-switch button.active{box-shadow:var(--shadow-sm)!important}
.sidebar-budget .bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.sidebar-budget .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ink-2),var(--ink))}
.sidebar-budget.over-cap .bar i{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ---------- tables + rows ---------- */
table{border-collapse:separate;border-spacing:0}
th{padding:0 10px 12px!important;border-bottom:1px solid var(--line)!important}
td{padding:0 10px!important;height:48px!important;border-bottom:1px solid var(--line)!important;color:var(--ink-2)}
td:first-child,td:first-child a{color:var(--ink);font-weight:500}
tbody tr{transition:background var(--t) var(--ease)}
tbody tr:hover td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0!important}
.row{transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.row:hover{background:var(--surface-2)}
.row .clamp-1 strong,.row-title{font-weight:600;letter-spacing:-.005em}
th[hx-get],th a{cursor:pointer;transition:color var(--t) var(--ease)}
th[hx-get]:hover,th a:hover{color:var(--ink)!important}

/* ---------- badges + chips: state you can read at a glance ---------- */
.badge,.chip,.pill{border-radius:999px;font-weight:600;font-size:12px;letter-spacing:.01em;padding:5px 10px;line-height:1.2;display:inline-flex;align-items:center;gap:6px;background:var(--tint-blue);color:var(--ink-2);border:1px solid transparent}
.badge.green,.badge.ok,.badge.rising,.badge.done,.badge.go{background:var(--ok-soft)!important;color:var(--ok)!important}
.badge.yellow,.badge.warn,.badge.peak,.badge.medium,.badge.wait{background:var(--warn-soft)!important;color:var(--warn)!important}
.badge.red,.badge.bad,.badge.decaying,.badge.failed,.badge.high,.badge.avoid{background:var(--bad-soft)!important;color:var(--bad)!important}
.badge.blue,.badge.info,.badge.emerging,.badge.new,.badge.running{background:var(--info-soft)!important;color:var(--info)!important}
.badge.dark{background:var(--ink)!important;color:var(--bg)!important}
.badge.green:before,.badge.yellow:before,.badge.red:before,.badge.blue:before,.badge.rising:before,.badge.decaying:before,.badge.emerging:before,.badge.peak:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.badge.score-pill{background:var(--surface)!important;border-color:var(--line-strong)!important;color:var(--ink)!important;font-variant-numeric:tabular-nums;min-width:56px;justify-content:center;box-shadow:var(--shadow-xs)}

/* ---------- media ---------- */
img.thumb,.thumb img,.video-card img,.thumb-sm,.thumb-avatar,.evidence img{border-radius:var(--radius-sm);box-shadow:var(--shadow-xs);transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.video-card:hover img{box-shadow:var(--shadow-sm)}
.thumb-avatar{border-radius:50%}
.outlier-pill,.thumb .badge{backdrop-filter:blur(8px);background:rgba(255,255,255,.88)!important;color:var(--ink)!important;box-shadow:var(--shadow-sm)}

/* ---------- drawer, popovers, callouts, empty + loading ---------- */
.drawer{box-shadow:var(--shadow-lg)!important;border-left:1px solid var(--line)!important;background:var(--surface)!important}
.drawer-backdrop{backdrop-filter:blur(2px)}
.popover,.policy-popover,.search-menu,#search-results{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:var(--shadow-md)!important;padding:6px}
.search-menu a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:10px;color:var(--ink)}
.search-menu a:hover{background:var(--surface-2)}
.callout{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;background:var(--surface-2)}
.callout.warn-soft{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 25%,transparent);color:var(--ink)}
.empty{text-align:center;color:var(--muted);padding:40px 20px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface-2)}
.notice{border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--ink);border-radius:10px;padding:10px 14px}
.htmx-request{opacity:.6;transition:opacity var(--t) var(--ease)}
.htmx-indicator{display:none}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline-flex}
.progress,.bar-track{background:var(--line);border-radius:999px;overflow:hidden}
.progress i,.bar-track i{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
details>summary{cursor:pointer;transition:color var(--t) var(--ease)}
details>summary:hover{color:var(--ink)}
.data-section>summary{color:var(--muted);font-size:13px;min-height:40px;display:flex;align-items:center;gap:8px}
.toc a{border-radius:8px;padding:6px 8px!important;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.toc a:hover{background:var(--surface-2);color:var(--ink)}
.prose{max-width:74ch}
.prose h2{border-top:1px solid var(--line);padding-top:14px}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;overflow:auto}
hr{border:0;border-top:1px solid var(--line)}
::selection{background:var(--accent-soft);color:var(--ink)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.video-card:hover,a.card:hover,.btn:hover,.button:hover{transform:none!important}}
/* ---------- fixes after first look ---------- */
#search-results:empty,#search-results[hidden]{display:none!important}
.opportunity-row{display:flex;align-items:center;gap:14px}
.opportunity-row>.clamp-1{flex:1 1 auto;min-width:0}
.opportunity-row .clamp-1 .badge{margin-left:8px;vertical-align:middle}
.opportunity-row .evidence-strip{flex:none}
.row-actions,.row-actions form{display:flex;flex-direction:row;gap:6px;flex:none}
.badge.stable{background:var(--tint-blue)!important;color:var(--ink-2)!important}
.badge.stable:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
/* settings toggle row must wrap on narrow screens */
form[action="/settings/shorts"]{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px 16px!important;padding:0}
form[action="/settings/shorts"] label{flex:none;font-weight:600;color:var(--ink);min-height:44px}
form[action="/settings/shorts"] .muted{flex:1 1 320px;min-width:0;font-size:13px}
/* compact sidebar rhythm so every nav item fits on a 900px-tall laptop */
.sidebar .wordmark{margin-bottom:18px!important}
.global-search{margin-bottom:16px!important}
.nav-section{margin-bottom:14px!important}
.nav-label{padding-bottom:5px!important}
.side-item{min-height:38px!important;padding:0 12px!important;border-radius:10px!important}
.theme-switch{margin:8px 0!important}
.sidebar-budget{padding:6px 12px 8px!important;margin-bottom:0!important}
@media(max-height:820px){.side-item{min-height:36px!important}.nav-section{margin-bottom:10px!important}}
.scope-toggle label{white-space:nowrap}
/* ---------- second review pass ---------- */
.content{padding-top:36px!important}
@media(max-width:700px){.content{padding-top:12px!important}}
.channel-cell .clamp-1{display:flex;align-items:baseline;gap:8px;min-width:0}
.channel-cell strong{white-space:nowrap}
.channel-cell small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pattern-gallery{padding:18px 0 6px;border-top:1px solid var(--line)}
.pattern-gallery:first-of-type{border-top:0;padding-top:4px}
.pattern-gallery .topline{align-items:center;margin-bottom:14px}
.pattern-gallery .topline strong{font-size:15px}
.pattern-stats{display:inline-flex;gap:6px}
.visual-card small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;margin-top:4px}
.visual-card .clamp-1{display:block;margin-top:10px;font-weight:600;color:var(--ink)}
.button.small{min-height:34px;padding:0 14px;font-size:13px}
.segmented .seg.active,.segmented a.active{border:1px solid var(--line)!important}
.visual-card .clamp-1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.button.small{min-height:36px}
.visual-card .clamp-1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.bar.indeterminate{position:relative;overflow:hidden}
.bar.indeterminate i{position:absolute;left:0;width:30%!important;animation:barslide 1.4s ease-in-out infinite}
@keyframes barslide{0%{left:-30%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){.bar.indeterminate i{animation:none;width:100%!important;opacity:.4}}
/* wide markdown tables inside reports scroll in place instead of widening the page */
.prose table{display:block;max-width:100%;overflow-x:auto;white-space:nowrap}
.prose table td,.prose table th{white-space:normal;min-width:90px}
.playbook-detail{min-width:0}.playbook-detail *{overflow-wrap:anywhere;min-width:0}
.playbook-detail table{display:block;max-width:100%;overflow-x:auto}.playbook-detail td{white-space:normal!important;vertical-align:top;height:auto!important;padding:8px 10px!important}
.playbook-card .big-title{overflow-wrap:anywhere}
.playbook-detail .badge{white-space:normal;max-width:100%;text-align:left}
.branch-row .title-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.branch-row .title-head strong{min-width:200px}
.evidence-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;margin-top:8px}
@media(max-width:900px){.evidence-line{grid-template-columns:1fr}}
.branch-report .compact-signal{border-bottom:0;min-height:44px;padding:4px 0}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid.cols-3{grid-template-columns:1fr}}