/* ═══ Competitor Watch (2026-09-27) — assets/competitor-watch.js ═════════════
   Literal values, not var(--lv-*): the Project Detail root is .lv2-canvas,
   which deliberately carries no v2 tokens. Every rule is under a .cmp-* class
   this file owns. Controls (.ui-sel / .ui-inp / .lgc-seg / .ui-btn / .tbtn)
   keep their one definition in assets/lv2.css — nothing here resizes them. */

.cmp-card{padding:0;overflow:visible}
#cmp-project-slot .cmp-card{margin-top:20px}
.cmp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 22px 14px}
.cmp-meta{font-size:11.5px;color:#94A3B8;margin-top:4px;font-weight:500}
.cmp-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cmp-muted{color:#94A3B8}
.cmp-note{font-size:12px;color:#64748B;padding:14px 22px}
.cmp-empty{font-size:13.5px;color:#334155;padding:18px 22px 22px;border-top:1px solid #EEF2F7}

/* summary strip: one slim band of cells, not cards */
.cmp-strip{display:flex;flex-wrap:wrap;border-top:1px solid #EEF2F7;border-bottom:1px solid #EEF2F7;padding:12px 22px;gap:0}
.cmp-strip__c{display:flex;align-items:baseline;gap:12px;padding:0 26px;border-left:1px solid #EEF2F7}
.cmp-strip__c:first-child{padding-left:0;border-left:0}
.cmp-strip__c span{font-size:12.5px;color:#64748B;font-weight:500}
.cmp-strip__c b{font-size:20px;font-weight:800;color:#0F172A;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* chips */
.cmp-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:650;white-space:nowrap;line-height:1;background:#F1F5F9;color:#475569}
.cmp-chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.cmp-chip--green{color:#047857;background:#ECFDF5}
.cmp-chip--amber{color:#B45309;background:#FFF7E6}
.cmp-chip--blue{color:#1E40AF;background:#E8F0FF}
.cmp-chip--slate{color:#475569;background:#F1F5F9}
.cmp-chip--line{background:#fff;border:1px solid #E5E7EB;color:#334155}
.cmp-chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:10px;padding:0 0 0 2px}

/* competitor rows */
.cmp-rows{padding:4px 12px 12px}
.cmp-row{border-bottom:1px solid #EEF2F7}
.cmp-row:last-child{border-bottom:0}
.cmp-row__h{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:12px 10px;cursor:pointer;border-radius:12px;transition:background .16s ease}
.cmp-row__h:hover{background:#F7FAFF}
.cmp-row__h:focus-visible{outline:2px solid #BFD3FB}
.cmp-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#E8F0FF;color:#1E40AF;font-size:13px;font-weight:800;border:1px solid #DBE4FF}
.cmp-av--sm{width:24px;height:24px;font-size:10px;vertical-align:middle}
.cmp-row__t{display:flex;flex-direction:column;min-width:0}
.cmp-row__t b{font-size:14px;font-weight:750;color:#0F172A;display:flex;align-items:center;gap:8px}
.cmp-row__t span{font-size:12px;color:#64748B;margin-top:2px}
.cmp-row__sp{flex:1}
.cmp-row__n{font-size:13px;font-weight:650;color:#334155;white-space:nowrap;min-width:120px;text-align:right}
.cmp-row__car{color:#64748B;transition:transform .2s ease;display:inline-flex}
.cmp-row.is-open .cmp-row__car{transform:rotate(180deg)}
.cmp-row__b{padding:4px 10px 16px}
.cmp-bars{display:inline-flex;align-items:flex-end;gap:2px;height:26px;position:relative;padding-bottom:13px}
.cmp-bars i{display:block;width:5px;border-radius:2px;background:#2563EB;opacity:.85}
.cmp-bars b{position:absolute;bottom:0;right:0;font-size:9.5px;font-weight:600;color:#94A3B8;white-space:nowrap}
.cmp-scan{animation:cmpPulse 1.4s ease-in-out infinite}
@keyframes cmpPulse{50%{opacity:.55}}

/* ad cards */
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.cmp-ad{display:flex;flex-direction:column;border:1px solid #EEF2F7;border-radius:14px;background:#fff;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.cmp-ad:hover{transform:translateY(-2px);border-color:#DBE4FF;box-shadow:0 12px 30px rgba(37,99,235,.10)}
.cmp-ad:focus-visible{outline:2px solid #BFD3FB}
.cmp-ad__pic{position:relative;aspect-ratio:4/5;background:#F1F5F9;overflow:hidden}
.cmp-ad__pic img{width:100%;height:100%;object-fit:cover;display:block;animation:cmpIn .3s ease both}
@keyframes cmpIn{from{opacity:0}to{opacity:1}}
.cmp-ad__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(15,23,42,.55);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1;backdrop-filter:blur(2px)}
.cmp-ad__n{position:absolute;left:8px;top:8px;background:rgba(15,23,42,.62);color:#fff;font-size:10.5px;font-weight:700;border-radius:8px;padding:3px 7px;z-index:1}
.cmp-ad__nomedia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#94A3B8;text-align:center;padding:10px}
.cmp-loading{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.cmp-spin{width:20px;height:20px;border-radius:50%;border:2px solid #E2E8F0;border-top-color:#64748B;animation:cmpSpin .8s linear infinite}
@keyframes cmpSpin{to{transform:rotate(360deg)}}
.cmp-ad__b{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;font-size:12px;color:#334155}
.cmp-ad__chips{display:flex;gap:5px;flex-wrap:wrap}
.cmp-ad__copy{font-size:12.5px;font-weight:600;color:#0F172A;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.cmp-ad__cta{color:#475569}
.cmp-ad__dom{color:#94A3B8;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-ad__meta{color:#64748B;font-size:11.5px;line-height:1.45}
.cmp-ad__lib{color:#2563EB;font-weight:650;font-size:12px;text-decoration:none;display:inline-flex;align-items:center;gap:3px;margin-top:2px}
.cmp-ad__lib:hover{text-decoration:underline}
.cmp-ad__lib svg{transform:rotate(45deg)}
.cmp-plats{display:flex;gap:4px;flex-wrap:wrap}
.cmp-plats i{font-style:normal;font-size:9.5px;font-weight:750;letter-spacing:.3px;color:#475569;background:#F1F5F9;border-radius:6px;padding:2px 5px}
.cmp-more{all:unset;cursor:pointer;display:block;margin:12px auto 0;font-size:12px;font-weight:700;color:#2563EB;padding:6px 12px;border-radius:9px}
.cmp-more:hover{background:#F0F5FF}
.cmp-ad--sk{cursor:default}
.cmp-ad--sk:hover{transform:none;box-shadow:none;border-color:#EEF2F7}
.cmp-ad--sk .cmp-ad__pic,.cmp-ad--sk .cmp-ad__b i{background:linear-gradient(90deg,#EEF2F7 25%,#F8FAFC 50%,#EEF2F7 75%);background-size:200% 100%;animation:cmpShim 1.3s linear infinite}
.cmp-ad--sk .cmp-ad__b i{display:block;height:9px;border-radius:5px}
.cmp-ad--sk .cmp-ad__b i+i{width:60%}
@keyframes cmpShim{to{background-position:-200% 0}}

/* global page */
/* the page's cards sit 14px apart — the v2 gap (--lv-gap); .card has no margin of
   its own, and without this the header, toolbar, watchlist and grids touched */
#competitor-watch-view .page > .card{margin-bottom:14px}
#competitor-watch-view .page > .card:last-child{margin-bottom:0}
.cmp-toolbar{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.cmp-tb-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmp-search{flex:1;min-width:220px}
.cmp-pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid #EEF2F7;border-radius:10px;background:#fff;font-size:12px;color:#64748B;font-weight:600}
.cmp-pill b{color:#0F172A;font-weight:800;font-variant-numeric:tabular-nums}
.cmp-wl .card-header{padding:16px 20px 16px}
/* v2 cards are overflow:visible, so the table's rows ran square past the card's
   rounded bottom corners; the wrapper (already overflow:auto) takes the radius */
.cmp-wl .tbl-wrap{border-radius:0 0 16px 16px}
.cmp-tbl td{vertical-align:middle}
.cmp-tbl a{color:#2563EB;text-decoration:none;font-weight:600}
.cmp-tbl a:hover{text-decoration:underline}
.cmp-wl-st{white-space:nowrap}
.cmp-danger{color:#B91C1C !important}
.cmp-danger.is-armed{background:#FEF2F2 !important;border-color:#FECACA !important}

/* modals — appended to <body>, where .modal-overlay carries the v2 tokens */
.cmp-ov{z-index:1200}
.cmp-modal{max-width:560px;width:94vw}
.cmp-form{display:flex;flex-direction:column;gap:8px;padding:16px 22px 6px}
.cmp-form .ctl-lbl{margin-top:8px}
.cmp-form .ui-inp{width:100%}
.cmp-form .ui-inp.is-err{border-color:#FCA5A5 !important;box-shadow:0 0 0 3px rgba(239,68,68,.10) !important}
.cmp-err{font-size:12px;color:#B91C1C;font-weight:600}
.cmp-steps{margin:4px 0 0;padding:10px 12px 10px 32px;border-radius:12px;background:#F8FAFC;font-size:12px;color:#475569;line-height:1.9}
.cmp-steps.is-err{background:#FFF7E6;color:#7C4A03}
.cmp-ok{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#ECFDF5;font-size:13px;color:#0F172A}
.cmp-ok .cmp-av{width:32px;height:32px;background:#fff}
.cmp-ok .cmp-chip{margin-left:auto}
.cmp-projs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cmp-projs .ui-sel{min-width:200px}
.cmp-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 18px}
.cmp-foot .ui-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none !important}

.cmp-admodal{max-width:1080px;width:96vw}
.cmp-adnav{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:#334155}
.cmp-adbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;padding:20px 22px}
.cmp-admedia{position:relative;background:#0F172A;border-radius:14px;overflow:hidden;min-height:360px;max-height:70vh;display:flex;align-items:center;justify-content:center}
.cmp-admedia video,.cmp-admedia img{width:100%;max-height:70vh;object-fit:contain;display:block;background:#0F172A}
.cmp-admedia .cmp-note{color:#CBD5E1}
.cmp-car{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#0F172A;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cmp-car--l{left:10px}.cmp-car--r{right:10px}
.cmp-addet{display:flex;flex-direction:column;gap:12px;min-width:0}
.cmp-adwho{display:flex;align-items:center;gap:12px}
.cmp-adwho b{font-size:16px;font-weight:800;color:#0F172A;display:block;margin-bottom:5px}
.cmp-kvs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cmp-kv{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#0F172A}
.cmp-kv a{color:#2563EB;word-break:break-all}
.cmp-copyfull{white-space:pre-line;line-height:1.5;max-height:180px;overflow:auto}
.cmp-libbtn{align-self:flex-start;text-decoration:none;display:inline-flex !important;align-items:center;gap:5px}
.cmp-libbtn svg{transform:rotate(45deg)}
.cmp-ai{border:1px solid #EEF2F7;border-radius:12px;background:#F8FAFC;padding:12px 14px;font-size:12.5px;color:#475569;display:flex;flex-direction:column;gap:6px}
.cmp-ai b{color:#334155}
.cmp-ai div{display:flex;gap:16px}
.cmp-ai div span{color:#94A3B8}

@media (max-width:900px){
  .cmp-adbody{grid-template-columns:1fr}
  .cmp-strip__c{padding:4px 14px}
}
@media (max-width:767px){
  .cmp-head{padding:14px}
  .cmp-ctl{justify-content:flex-start}
  .cmp-strip{padding:10px 14px;row-gap:8px}
  .cmp-strip__c{padding:0 12px 0 0;border-left:0;width:50%}
  .cmp-strip__c b{font-size:17px}
  .cmp-row__h{flex-wrap:wrap;gap:10px}
  .cmp-row__h .cmp-chip--line,.cmp-bars{display:none}
  .cmp-row__n{min-width:0}
  .cmp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cmp-ad__b{padding:8px 9px 10px}
  .cmp-toolbar{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .cmp-ad,.cmp-row__car{transition:none}
  .cmp-scan,.cmp-ad--sk .cmp-ad__pic,.cmp-ad--sk .cmp-ad__b i{animation:none}
  .cmp-spin{animation-duration:2.4s}
}