/* Loupe: Screening Room components and interaction layer.
   Tokens live in styles.css (Screening Room default, Blue Pencil under
   body[data-theme=light]). This sheet loads last and only adds components and motion;
   it never redefines a colour. Screen-only, so exported paper keeps its own palette. */
@media screen {

/* ---- type: one family for the interface, mono for timecodes and data ---- */
body :is(h1,h2,h3,h4,.statement,.h-section,.stitle,.feature-priority>strong,.v2-hypothesis,.recut-section-title){font-family:var(--ui);font-weight:600;letter-spacing:-.03em}
body :is(button,input,textarea,select,.file){font-family:var(--ui)}
body :is(.eyebrow,.cap,.subcap){text-transform:none;letter-spacing:.02em;font-size:11.5px;color:var(--ink2)}
body :is(.tc,.tc2,.btime,.ts,.frcap,.timecode,.lp-playback output,code,kbd){font-family:var(--mono)}
.page-head h1,#workspaceHub h1,#settingsBody h1{font-size:34px;line-height:1.2;font-weight:600;max-width:26ch}
#homeBody .page-head .statement{max-width:40ch;font-size:34px;line-height:1.22}
#homeBody .page-head{margin-bottom:40px}
#homeFeature .feature-priority>strong{font-size:23px;font-weight:600}
#homeFeature .feature-copy{background:var(--card)}
#homeFeature .feature-image{border-color:var(--line)}
:is(#homeFeature .feature-image,.hier .stage,.stage-video,.stage-image,.lib-thumb,#csBody .thumb){background:var(--stage)}

/* ---- sidebar ---- */
#side,.side,.topbar{background:var(--chrome);color:var(--ink);border-color:var(--line)}
#side .nav a{border-radius:var(--ctl-radius);min-height:42px;color:var(--ink2);
  transition:background-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-base) var(--motion-ease),transform var(--spring-ms) var(--spring)}
#side .nav a:active{transform:scale(.97);transition-duration:var(--motion-instant)}
#side .nav a:hover{background:var(--hover);color:var(--ink)}
#side .nav a.on,#side .workspace-subnav a.on{background:var(--accent-soft);color:var(--ink);box-shadow:inset 2px 0 var(--accent)}
#side .nav a.on svg,#side .workspace-subnav a.on svg{color:var(--accent)}
#wsInitials{background:var(--hover);color:var(--ink);border-color:var(--line)}

/* ---- form controls ---- */
:is(input,select,textarea){accent-color:var(--accent)}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
  background-color:var(--card);color:var(--ink);border-color:var(--line);
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):hover:not(:disabled):not(:focus){border-color:var(--line-strong)}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
::placeholder{color:var(--ink3);opacity:1}
:is(button,input,textarea,select):disabled{cursor:not-allowed}

/* ---- popovers and dialogs share one surface ---- */
:is(.menu,.ws-menu,.rvdlg-in,.bp-dialog,.lib-help-drawer,.mbox,.dialog,.performance-dialog){background:var(--pop);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-pop)}
:is(.bp-dialog,.performance-dialog,.lp-dialog,.lib-help-drawer)::backdrop{background:rgba(8,8,8,.62);backdrop-filter:blur(5px)}
.cx-context-preview{background:var(--accent-soft);border-left-color:var(--accent)}
.hier,body.docmode .rgroup{--ink3:var(--ink2);--line2:var(--line)}
.hier .workflow-nav{background:var(--canvas);border-color:var(--line)}
.hier .wtab{color:var(--ink2);transition:color var(--motion-fast)}
.hier .wtab:hover{color:var(--ink)}
.hier .wtab.on{color:var(--ink);border-color:transparent}

/* ---- tabs: one indicator that travels (positioned by loupe-interactions.js) ---- */
.lp-tab-track{position:relative}
.lp-tab-track::after{content:'';position:absolute;left:var(--tab-x,0px);top:var(--tab-y,100%);width:var(--tab-width,0px);height:2px;background:var(--accent);border-radius:2px;pointer-events:none;
  transition:left var(--spring-ms) var(--spring),width var(--spring-ms) var(--spring)}
.lp-tab-track .wtab::after{display:none}

/* ---- segmented controls: the selected pill slides to the new option ---- */
.lp-seg-track{position:relative;isolation:isolate}
.lp-seg-track::before{content:'';position:absolute;z-index:-1;left:0;top:0;width:var(--seg-w,0px);height:var(--seg-h,0px);
  transform:translate(var(--seg-x,0px),var(--seg-y,0px));background:var(--accent-soft);border-radius:6px;box-shadow:inset 0 0 0 1px var(--accent-line);
  transition:transform var(--spring-ms) var(--spring),width var(--spring-ms) var(--spring)}
.lp-seg-static::before{transition:none}
.lp-seg-track :is(button[aria-pressed=true],button.on){background:transparent!important;color:var(--ink)!important;border-color:transparent}
.lp-seg-track button{position:relative;transition:color var(--motion-fast)}
#refTabs.lp-tab-track a.on{border-color:transparent}

/* ---- every button answers a press ---- */
:where(button,#side .nav a){transition:transform var(--spring-ms) var(--spring)}
:where(button:not(:disabled),#side .nav a):active{transform:scale(.97);transition-duration:var(--motion-instant)}

/* ---- skeletons: shown for waits, faded in after 250ms so quick loads never flash ---- */
.lp-skeleton{padding:32px var(--gutter,40px);display:grid;gap:28px;animation:lp-fade 200ms ease-out 250ms both}
.lp-skeleton .sk{display:block;height:14px;border-radius:6px;background:var(--hover);position:relative;overflow:hidden}
.lp-skeleton .sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 6%,transparent),transparent);animation:lp-shimmer 1.3s ease-in-out infinite}
.lp-skeleton .tall{height:30px}.lp-skeleton .w30{width:30%}.lp-skeleton .w40{width:40%}.lp-skeleton .w55{width:55%}.lp-skeleton .w60{width:60%}
.lp-skeleton .w75{width:75%}.lp-skeleton .w80{width:80%}.lp-skeleton .w90{width:90%}
.sk-head,.sk-side,.sk-list{display:grid;gap:14px;align-content:start}
.sk-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}
.lp-skeleton .stage{height:360px;border-radius:12px;background:var(--stage)}
.lp-skeleton .num{height:64px;width:120px}.lp-skeleton .btn{height:44px;width:180px;margin-top:10px}
.sk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.lp-skeleton .card{height:120px;border-radius:10px}
@keyframes lp-shimmer{to{transform:translateX(100%)}}
@media(max-width:760px){.sk-body{grid-template-columns:1fr}.sk-grid{grid-template-columns:1fr 1fr}.lp-skeleton .stage{height:240px}}

/* ---- New Review ---- */
#newForm .kindtabs button[aria-selected=true],#newSteps li.on>button{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
#newSteps li.on>button i{background:var(--accent);color:var(--accent-ink)}
#newForm .drop{border-color:var(--line);
  transition:background-color var(--motion-fast),border-color var(--motion-fast),transform var(--spring-ms) var(--spring)}
#newForm .drop:hover{border-color:var(--line-strong)}
#newForm .drop.hot{border-color:var(--accent);border-style:solid;background:var(--accent-soft);transform:scale(1.012);box-shadow:inset 0 0 0 1px var(--accent)}
#newForm .drop svg{color:var(--accent);transition:transform var(--spring-bouncy-ms) var(--spring-bouncy)}
#newForm .drop.hot svg{transform:translateY(-4px) scale(1.12)}
#newForm .intake-kind-icon svg{width:26px;height:26px}

/* ---- icons (Lucide, from loupe-icons.js) ---- */
.lp-icon{width:18px;height:18px;stroke-width:2;flex:none;vertical-align:middle}
.lp-utility{display:flex;align-items:center;gap:7px;padding:11px 7px;min-height:42px;border:1px solid transparent;border-radius:var(--ctl-radius);background:transparent;color:var(--ink2);text-align:left;width:100%;font-size:12.5px;
  transition:background-color var(--motion-fast),color var(--motion-fast)}
.lp-utility>span{white-space:nowrap}
.lp-utility:hover{color:var(--ink);background:var(--hover)}
.lp-utility kbd{margin-left:auto;font:10px var(--mono);border:1px solid var(--line);border-radius:4px;padding:2px 4px;white-space:nowrap;flex:none}

/* ---- the app dialog (Find, Appearance) ---- */
.lp-dialog{padding:0;width:min(560px,calc(100vw - 32px));max-height:80dvh;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--pop);color:var(--ink);box-shadow:var(--shadow-pop);font-family:var(--ui)}
.lp-dialog header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0}
.lp-dialog h2{font-size:22px;margin:0}
.lp-dialog header button{width:36px;height:36px;border-radius:var(--ctl-radius);color:var(--ink2);display:grid;place-items:center;background:transparent;border:1px solid var(--line)}
.lp-dialog header button:hover{background:var(--hover);color:var(--ink)}
.lp-dialog p{font-size:13px;line-height:1.6;color:var(--ink2);margin:10px 24px 20px}
.lp-appearances{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 24px 24px}
.lp-scheme{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);padding:12px;text-align:left;font-size:13px;
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--spring-ms) var(--spring)}
.lp-scheme:hover{border-color:var(--line-strong)}
.lp-scheme:active{transform:scale(.98);transition-duration:var(--motion-instant)}
.lp-scheme[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.lp-scheme small{color:var(--ink2);font-size:11px}
/* the swatches picture each theme, so they keep literal colours */
.lp-preview{height:90px;width:100%;display:grid;grid-template-columns:22% 1fr;gap:8px;padding:10px;border-radius:5px;background:#131313;border:1px solid #383836}
.lp-preview>i{border-right:1px solid #383836}
.lp-preview>b{background:#1C1C1B;border-radius:3px;display:flex;align-items:flex-end;padding:8px}
.lp-preview>b:after{content:'';width:40%;height:7px;background:#6A86FF;border-radius:2px}
.lp-preview.light{background:#F3F3F0;border-color:#D3D3CD}.lp-preview.light>i{border-color:#D3D3CD}.lp-preview.light>b{background:#fff}.lp-preview.light>b:after{background:#2340FF}
.lp-command-search{display:flex;align-items:center;gap:12px;margin:20px 24px 12px;color:var(--ink2)}
.lp-command-search input{flex:1;width:100%;padding:12px 0;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0;box-shadow:none!important;background:transparent!important;font-size:16px}
.lp-command-list{position:relative;display:grid;gap:2px;padding:0 12px 12px}
.lp-command-list button{display:flex;align-items:center;gap:12px;width:100%;padding:12px;color:var(--ink);background:transparent;border:0;border-radius:var(--ctl-radius);text-align:left;font-size:14px;
  transition:background-color var(--motion-instant),color var(--motion-instant)}
.lp-command-list{max-height:min(420px,56dvh);overflow:auto}
.lp-command-list button{position:relative;z-index:1}
.lp-command-list button svg{color:var(--ink2);transition:color var(--motion-instant)}
.lp-command-list button.on svg{color:var(--accent)}
.lp-command-list button:focus-visible{outline:none}
.lp-command-list button small{margin-left:auto;font:11px var(--mono);color:var(--ink3)}
.lp-cmd-hl{position:absolute;left:12px;right:12px;top:0;height:44px;border-radius:var(--ctl-radius);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);
  pointer-events:none;transition:transform var(--spring-ms) var(--spring),height var(--motion-fast)}
.lp-cmd-group{font-size:11px;color:var(--ink3);padding:10px 12px 4px;letter-spacing:.02em}
.lp-command-status{font-size:11.5px!important;color:var(--ink3)!important;margin:0 24px 16px!important}
.lp-copy-confirm{color:var(--good)!important}

/* ---- library ---- */
#csBody .cell{background:var(--card);border:1px solid var(--line);
  transition:border-color var(--motion-fast),box-shadow var(--motion-base) var(--motion-ease),transform var(--spring-ms) var(--spring)}
@media(hover:hover){#csBody .cell:hover{border-color:var(--line-strong);box-shadow:0 12px 32px rgba(0,0,0,.28);transform:translateY(-3px)}}
#libFilters .viewtoggle button[aria-pressed=true]{background:var(--accent-soft);color:var(--ink)}

/* ---- media playback rail ---- */
.lp-media-wrap{min-width:0;width:100%}
.lp-playback{display:flex;align-items:center;gap:14px;padding:14px 0;font:11px/1.5 var(--ui);color:var(--ink2)}
.lp-playback label{display:flex;flex:1;align-items:center;gap:12px;white-space:nowrap}
.lp-playback input[type=range]{min-width:60px;flex:1;height:4px;padding:0;border:0;appearance:none;cursor:pointer;background:linear-gradient(to right,var(--accent) var(--played,0%),var(--line) var(--played,0%));border-radius:5px}
.lp-playback input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--card);box-shadow:0 0 0 1px var(--accent);transition:transform var(--spring-ms) var(--spring)}
.lp-playback input:active::-webkit-slider-thumb{transform:scale(1.3)}
.lp-playback output{white-space:nowrap;min-width:90px;text-align:right;font-size:11px}
.lp-playback input:disabled{opacity:.4;cursor:default}
.hier .play-button::before{display:none}
.hier .play-button{color:#EDEDEA;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.33);
  transition:background-color var(--motion-fast),transform var(--spring-ms) var(--spring)}
.hier .play-button:hover{background:rgba(255,255,255,.14)}
.hier .play-button:active{transform:scale(.95);transition-duration:var(--motion-instant)}

/* ---- scores ---- */
.v2-overall>strong{color:var(--ink);font-weight:600}
.v2-overall p{color:var(--ink2)}
.v2-tone-exceptional{color:var(--elite)}.v2-tone-strong{color:var(--good)}.v2-tone-functional{color:var(--ok)}.v2-tone-weak{color:var(--weak)}.v2-tone-failing{color:var(--poor)}
.hier .v2-readable .v2-hero-title{font-size:32px;font-weight:600;max-width:20ch;line-height:1.2}

/* ---- account pages ---- */
:is(.account-top a,.account-intro h1,.auth-card h1,.account-card label,.auth-card label){color:var(--ink)}
:is(.account-intro p,.auth-card>p,.account-card p,.account-note,.account-help){color:var(--ink2)}
:is(.account-card,.auth-card){background:var(--card);border-color:var(--line)}
.account-meta span{background:var(--hover)}
:is(.account-card,.auth-card) button{background:var(--accent);color:var(--accent-ink)}
:is(.account-card,.auth-card) :is(.quiet-button,.password-wrap button){background:transparent;color:var(--ink);border-color:var(--line)}
:is(.account-card,.auth-card) :is(input,select){background-color:var(--canvas);border-color:var(--line);color:var(--ink)}

.lp-busy{display:inline-block;width:13px;height:13px;margin-right:9px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:lp-spin 800ms linear infinite}
@keyframes lp-spin{to{transform:rotate(360deg)}}

/* ---- motion ---- */
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=reduced]) .lp-dialog[open]{animation:lp-dialog-in var(--motion-base) var(--spring)}
 html:not([data-motion=reduced]) .lp-dialog[open]::backdrop{animation:lp-fade var(--motion-fast) ease-out}
 html:not([data-motion=reduced]) .lp-arrive{animation:lp-enter 320ms var(--motion-ease) both}
 html:not([data-motion=reduced]) .lp-copy-confirm .lp-icon{animation:lp-check var(--spring-bouncy-ms) var(--spring-bouncy)}
 html:not([data-motion=reduced]) details[open]>.fold-body{animation:lp-enter 200ms var(--motion-ease)}
 html:not([data-motion=reduced]) .view.on{animation:lp-view-in 220ms var(--motion-ease)}
}
@keyframes lp-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes lp-view-in{from{opacity:.001}to{opacity:1}}
@keyframes lp-dialog-in{from{opacity:0;transform:scale(.96) translateY(-6px)}to{opacity:1;transform:none}}
@keyframes lp-fade{from{opacity:0}}
@keyframes lp-check{0%{transform:scale(.5) rotate(-20deg)}100%{transform:none}}
@media(max-width:750px){#homeBody .page-head .statement,.page-head h1{font-size:28px}.lp-appearances{padding:0 16px 20px;gap:8px}.lp-dialog header{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){body *,body *::before,body *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ================================================= signature moments (loupe-moments.js) */
@media screen {
/* score reveal: the badge lands after the number */
.lp-pop{animation:lp-pop-in var(--spring-bouncy-ms) var(--spring-bouncy)}
@keyframes lp-pop-in{0%{transform:scale(.7);opacity:.2}100%{transform:none;opacity:1}}

/* analysis steps: a ring that turns, a check that lands */
.stages li i{font-size:0;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);position:relative;margin-top:1px;box-sizing:border-box}
.stages li.now i{border-color:var(--accent);border-top-color:transparent;animation:lp-spin 900ms linear infinite}
.stages li.done i{background:var(--accent);border-color:var(--accent)}
.stages li.done i::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.stages li.lp-just-done i{animation:lp-pop-in var(--spring-bouncy-ms) var(--spring-bouncy)}
.stages li.now>span{color:var(--ink);font-weight:600}
.stages.compact li i{width:14px;height:14px;margin-top:2px}

/* notes on the timeline */
.lp-notes-rail{margin:16px 0 4px;padding:14px 16px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.lp-rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.lp-rail-head span{font-size:12.5px;font-weight:600;color:var(--ink)}
.lp-rail-head small{font-size:11px;color:var(--ink3)}
@media(hover:none){.lp-rail-head small{display:none}}
.lp-rail-track{position:relative;height:6px;border-radius:3px;background:var(--hover-strong);margin:0 7px}
.lp-rail-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.lp-rail-head-mark{position:absolute;top:-7px;bottom:-7px;width:2px;margin-left:-1px;left:0;background:var(--accent);border-radius:1px;pointer-events:none}
.lp-rail-head-mark::before{content:'';position:absolute;left:-5px;top:-6px;width:12px;height:7px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}
.lp-glide{transition:left var(--spring-ms) var(--spring),width var(--spring-ms) var(--spring)}
.lp-rail-mark{position:absolute;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;display:grid;place-items:center;border-radius:50%;background:none;border:0;padding:0;cursor:pointer}
.lp-rail-mark>i{width:12px;height:12px;border-radius:50%;background:var(--card);border:2.5px solid var(--accent);transition:transform var(--spring-ms) var(--spring)}
.lp-rail-mark.sev-first>i,.lp-rail-mark.sev-high>i{border-color:var(--poor)}
.lp-rail-mark.sev-medium>i{border-color:var(--ok)}
.lp-rail-mark:hover>i,.lp-rail-mark:focus-visible>i,.lp-rail-mark.on>i{transform:scale(1.35)}
.lp-rail-mark.on>i{background:var(--accent)}
.lp-rail-mark.sev-first.on>i,.lp-rail-mark.sev-high.on>i{background:var(--poor)}
.lp-rail-mark.lp-ping::after{content:'';position:absolute;inset:5px;border-radius:50%;border:2px solid var(--accent);animation:lp-ping 700ms var(--motion-ease) forwards;pointer-events:none}
.lp-rail-mark.sev-first.lp-ping::after,.lp-rail-mark.sev-high.lp-ping::after{border-color:var(--poor)}
@keyframes lp-ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
.lp-rail-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);width:max-content;max-width:260px;padding:8px 10px;border-radius:8px;
  background:var(--pop);border:1px solid var(--line);box-shadow:var(--shadow-pop);color:var(--ink);font-size:12px;line-height:1.4;text-align:left;
  opacity:0;pointer-events:none;transition:opacity var(--motion-fast),transform var(--motion-fast) var(--motion-ease);z-index:5}
.lp-rail-tip b{display:block;font:600 11px var(--mono);color:var(--accent);margin-bottom:2px}
.lp-rail-mark:hover .lp-rail-tip,.lp-rail-mark:focus-visible .lp-rail-tip{opacity:1;transform:translate(-50%,0)}
.lp-rail-scale{display:flex;justify-content:space-between;margin-top:10px;font:10.5px var(--mono);color:var(--ink3)}
.plan-time[data-lp-note]{cursor:pointer;border-radius:5px;padding:1px 6px;margin:-1px -6px;color:var(--accent);font-family:var(--mono);
  transition:background-color var(--motion-fast)}
.plan-time[data-lp-note]:hover{background:var(--accent-soft)}
.plan-time[data-lp-note]::before{content:'▶ ';font-size:.8em}
.lp-note-on{box-shadow:inset 3px 0 0 var(--accent);transition:box-shadow var(--motion-base) var(--motion-ease)}

/* library hover-scrub */
#csBody .thumb{position:relative}
.lp-scrub-hair{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);z-index:2;pointer-events:none}
.lp-scrub-count{position:absolute;left:10px;top:10px;z-index:2;font:500 10.5px var(--mono);color:#fff;background:rgba(0,0,0,.6);padding:3px 7px;border-radius:5px;
  opacity:0;transition:opacity var(--motion-fast);pointer-events:none}
.lp-scrubbing{cursor:ew-resize}
.lp-scrubbing .lp-scrub-count{opacity:1}
.lp-scrubbing .lib-play{opacity:0}

/* drop anywhere */
.lp-drop-veil{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--canvas) 70%,transparent);
  backdrop-filter:blur(6px);opacity:0;transition:opacity var(--motion-fast);pointer-events:none}
.lp-drop-veil.on{opacity:1}
.lp-drop-veil::before{content:'';position:absolute;inset:14px;border:2px dashed var(--accent);border-radius:18px}
.lp-drop-card{display:grid;justify-items:center;gap:10px;text-align:center;padding:36px 44px;border-radius:16px;background:var(--pop);border:1px solid var(--line);box-shadow:var(--shadow-pop);
  transform:scale(.94);transition:transform var(--spring-ms) var(--spring)}
.lp-drop-veil.on .lp-drop-card{transform:none}
.lp-drop-card svg{width:34px;height:34px;color:var(--accent)}
.lp-drop-card b{font-size:18px;letter-spacing:-.02em}
.lp-drop-card small{font-size:12.5px;color:var(--ink2)}

/* shortcuts */
.lp-keys{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin:18px 24px 26px;font-size:13.5px;color:var(--ink2)}
.lp-keys dt{margin:0}.lp-keys dd{margin:0;align-self:center}
.lp-keys kbd{display:inline-block;min-width:26px;text-align:center;font:500 11.5px var(--mono);color:var(--ink);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:3px 7px;background:var(--card)}
}

/* ================================================= QC pass 2: reveal, pills, V2 timeline */
@media screen {
/* the ring gauge around the overall score */
.lp-gauge{position:relative;display:inline-grid;place-items:center;width:132px;height:132px;flex:none}
.lp-gauge>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.lp-gauge circle{fill:none;stroke-width:6}
.lp-gauge .lp-g-bg{stroke:var(--hover-strong)}
.lp-gauge .lp-g-fg{stroke-linecap:round}
.lp-gauge>strong{position:relative;font-size:52px!important;line-height:1!important;letter-spacing:-.04em!important;font-variant-numeric:tabular-nums}
.hier .compact-assessment .hero-score .lp-gauge>strong,.hier .hero-score .lp-gauge>strong{font-size:50px!important;letter-spacing:-2px!important}
.v2-overall,.hero-score{align-items:center!important;gap:18px!important}
.lp-sub-wait{opacity:0;transform:translateY(6px)}
.lp-sub-in{opacity:1;transform:none;transition:opacity 300ms var(--motion-ease),transform var(--spring-ms) var(--spring)}
.lp-pop{animation:lp-pop-in var(--spring-bouncy-ms) var(--spring-bouncy)}

/* the dimension the first edit targets */
.lp-lever{display:inline-flex;align-items:center;margin-left:8px;font:600 10.5px/1 var(--ui);letter-spacing:.02em;color:var(--poor);
  background:var(--poor-s);border-radius:5px;padding:4px 7px;vertical-align:middle;opacity:0;transform:scale(.7);white-space:nowrap}
.lp-lever-in .lp-lever{opacity:1;transform:none;transition:opacity 200ms,transform var(--spring-bouncy-ms) var(--spring-bouncy)}
.lp-is-lever.lp-lever-in{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--poor) 55%,transparent)}

/* one pill behind every selected tab / option, travelling on the spring */
.lp-pills{position:relative;isolation:isolate}
.lp-pill{position:absolute;left:0;top:0;z-index:-1;border-radius:8px;background:var(--hover-strong);
  box-shadow:inset 0 0 0 1px var(--line-strong),0 1px 2px rgba(0,0,0,.25);pointer-events:none;opacity:0;
  transition:transform var(--spring-ms) var(--spring),width var(--spring-ms) var(--spring),height var(--motion-fast),opacity var(--motion-fast)}
.lp-pills .wtab::after,.lp-tab-track::after,.lp-seg-track::before{display:none!important}
.lp-pills :is(button,a){position:relative;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.lp-pills :is(.wtab.on,[aria-selected=true],[aria-pressed=true],a.on,button.on){color:var(--ink)!important}
/* the tab sets become segmented controls so the pill has room */
#lpBody .workflow-tabs.lp-pills{gap:2px!important;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--card);align-self:center;flex:0 0 auto!important;width:max-content;max-width:100%}
#lpBody .workflow-tabs.lp-pills .wtab{padding:8px 16px!important;border-radius:8px;white-space:nowrap}
#refTabs.lp-pills{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--card);margin:0 0 28px}
#refTabs.lp-pills a{padding:8px 14px;border-radius:8px;margin:0;border-bottom:0}
.cx-tabs.lp-pills{display:inline-flex;width:max-content;max-width:100%;gap:2px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.cx-tabs.lp-pills button{padding:8px 16px}
.viewtoggle.lp-pills{padding:3px;border-radius:9px}
.viewtoggle.lp-pills button{border-radius:6px;min-height:32px}
#cpScope.lp-pills [data-scope]{border-radius:8px}

/* V2: edits and evidence on the timeline */
.lp-rail-tick{position:absolute;top:50%;width:2px;height:10px;margin:-5px 0 0 -1px;border-radius:1px;background:var(--ink3);opacity:.55}
.lp-rail-track:hover .lp-rail-tick{opacity:.85}
.lp-time-chip{display:inline-flex;align-items:center;margin-left:10px;font:600 11.5px var(--mono)}
.v2-action-card.lp-note-on{box-shadow:inset 3px 0 0 var(--accent)}
}

/* ================================================= QC pass 3 */
@media screen {
/* segmented tabs: the selected option keeps the same weight, so widths never change and the
   pill always sits inside its track */
#lpBody .workflow-tabs.lp-pills{display:inline-flex!important;align-items:center}
#lpBody .workflow-tabs.lp-pills .wtab,#lpBody .workflow-tabs.lp-pills .wtab.on,
#refTabs.lp-pills a,#refTabs.lp-pills a.on,.cx-tabs.lp-pills button,.viewtoggle.lp-pills button,#cpScope.lp-pills [data-scope]{font-weight:500!important;flex:none}
#lpBody .workflow-tabs.lp-pills>.nav-in{display:none}
.lp-pills :is(.wtab,a,button):not(.on):not([aria-selected=true]):not([aria-pressed=true]):hover{color:var(--ink)!important}
.lp-pill{border-radius:7px}

/* the note readout under the timeline */
.lp-rail-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line2);min-height:44px}
.lp-rail-note.lp-note-in{animation:lp-enter 260ms var(--motion-ease)}
.lp-note-hint{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink3)}
.lp-note-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.lp-note-tc{font:600 12px var(--mono);color:var(--accent);background:var(--accent-soft);padding:3px 7px;border-radius:5px}
.lp-note-sev{font-size:11px;font-weight:600;color:var(--ink2)}
.lp-note-sev.sev-first,.lp-note-sev.sev-high{color:var(--poor)}
.lp-note-sev.sev-medium{color:var(--ok)}
.lp-note-count{margin-left:auto;font:11px var(--mono);color:var(--ink3)}
.lp-note-title{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.lp-note-body{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink2)}
.lp-note-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lp-note-btn{min-width:34px;height:32px;padding:0 10px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 12.5px var(--ui);
  transition:background-color var(--motion-fast),border-color var(--motion-fast),transform var(--spring-ms) var(--spring)}
.lp-note-btn:hover{background:var(--hover);border-color:var(--line-strong)}
.lp-note-btn:active{transform:scale(.95);transition-duration:var(--motion-instant)}
.lp-note-btn.wide{padding:0 12px}
.lp-rail-tip{display:none}
.lp-rail-mark:hover>i{transform:scale(1.35)}
}