/* ---- Ad Spy tab ---- */
.adspy-input { background:#1C1917; border:1px solid rgba(245,239,230,0.1); color:#F5EFE6; padding:7px 10px; border-radius:8px; font-size:13px; font-family:inherit; }
.adspy-input[type=search] { min-width:190px; }
/* Masonry via N explicit .adspy-col children (built by adspyRenderMasonry() in
   adspy.js), cards flow top-to-bottom WITHIN a column but round-robin ACROSS columns
   in score order - rank 1/2/3/4 land in row 1 across all 4 columns, not stacked in
   column 1 (Andres, 2026-07-13: CSS `columns:` masonry fills column 1 entirely first,
   so every top-Winner-Score card piled up on the left with none in the other 3). */
.adspy-grid { display:flex; align-items:flex-start; gap:14px; }
.adspy-col { display:flex; flex-direction:column; gap:14px; flex:1 1 0; min-width:0; }
.adspy-card { background:#1C1917; border:1px solid rgba(245,239,230,0.08); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
/* aspect-ratio:4/5 is just the loading placeholder - adspy.js sets the thumb's REAL
   ratio from the image's naturalWidth/naturalHeight once it loads (onload handler),
   so a 9:16 video poster or a 1:1 Feed image ends up its own true shape, not cropped. */
.adspy-thumb { margin:-14px -14px 0 -14px; border-radius:12px 12px 0 0; aspect-ratio:4/5; overflow:hidden; background:#111; position:relative; }
.adspy-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.adspy-thumb-video::after { content:'\25B6'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; background:rgba(0,0,0,0.35); }
.adspy-card:hover { border-color:rgba(245,239,230,0.16); }
.adspy-row1 { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.adspy-brand { font-weight:700; font-size:14px; color:#F5EFE6; }
/* tracked-competitor marker, sits inline right after the brand name */
.adspy-src-tracked { font-size:9px; color:#79B08F; vertical-align:2px; }
/* Unified kit "score": the only orange in these screens besides alerts (README §Unified Content Kit). */
.adspy-score { color:#E04E24; font-family:var(--font-display); font-weight:700; font-size:15px; white-space:nowrap; display:inline-flex; flex-direction:column; align-items:flex-end; gap:1px; cursor:help; }
/* "Winner Score" name, sits above the number so it's visible without hovering the tooltip */
.adspy-score-label { color:#8A8478; font-weight:800; font-size:8px; text-transform:uppercase; letter-spacing:.04em; }
/* percentile vs. every captured ad - the number that gives the raw score meaning */
.adspy-score-pct { color:#8A8478; font-weight:600; font-size:9px; text-transform:uppercase; letter-spacing:.03em; }
.adspy-metrics { display:flex; gap:12px; font-size:12px; color:#8A8478; flex-wrap:wrap; }
.adspy-metrics b { color:#B7B0A4; }
.adspy-days { color:#8A8478; } .adspy-days.hot { color:#E8907A; }
.adspy-title { font-size:13px; font-weight:600; color:#B7B0A4; }
.adspy-copy { font-size:12px; color:#8A8478; max-height:58px; overflow:hidden; line-height:1.45; }
.adspy-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:6px; }
/* Unified kit meta/source badge (README §Unified Content Kit) */
.adspy-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:4px; background:rgba(245,239,230,0.07); color:#8A8478; }
/* discovery: compact magnifier + matched keyword only (no "DISCOVERY" word) - amber (data signal, not orange) */
.adspy-badge.disc { background:rgba(201,154,75,0.14); color:#C99A4B; font-size:9px; padding:1px 6px; text-transform:none; letter-spacing:0; }
.adspy-open { color:#E04E24; font-size:12px; font-weight:700; text-decoration:none; }
.adspy-open:hover { text-decoration:underline; }
/* Right-aligned action cluster in the card foot (badge/meta on the left, actions on the right). */
.adspy-foot-acts { margin-left:auto; display:flex; align-items:center; gap:6px; }
/* card-foot save button: unified kit primary action, icon-only cream pill
   (Andres, 2026-07-13: "no es necesario poner la palabra 'save'... el iconito
   del bookmark... es suficiente"). */
.adspy-save-quick { display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:none; background:#F5EFE6; border-radius:50%; color:#141210; cursor:pointer; }
.adspy-save-quick:hover { background:rgba(245,239,230,0.85); }
.adspy-save-quick:disabled { cursor:default; background:rgba(245,239,230,0.08); color:#8A8478; }
/* Unified kit icon-only actions: ghost-border secondary, borderless destructive
   (README §Unified Content Kit "Card action footer") - used for source/delete on
   Swipes + Board items (Andres, 2026-07-13: was inconsistent text links). */
.adspy-icon-btn { display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer; text-decoration:none; }
.adspy-icon-btn.ghost { border:1px solid rgba(245,239,230,0.16); background:none; color:#B7B0A4; }
.adspy-icon-btn.ghost:hover { border-color:#E04E24; color:#E04E24; }
.adspy-icon-btn.danger { border:none; background:none; color:#8A8478; }
.adspy-icon-btn.danger:hover { color:#C2694F; }
/* INFRA-01 (05-03): break-detector banner, fed by adspy-watchtower webhook's alerts[] */
.adspy-alert-banner { display:none; background:#2b1f0f; border:1px solid #C99A4B; color:#C99A4B; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px; line-height:1.6; }
.adspy-alert-banner.show { display:block; }
.adspy-alert-banner b { color:#F5EFE6; }
.adspy-alert-btn { display:none; align-items:center; gap:6px; background:#2b1f0f; border:1px solid #C99A4B; color:#C99A4B; border-radius:8px; padding:6px 10px; font-size:12px; font-weight:600; line-height:1; cursor:pointer; }
.adspy-alert-btn.show { display:inline-flex; }
.adspy-alert-btn:hover { background:#3a2a14; }
.adspy-alert-btn.open { background:#C99A4B; color:#1a1206; border-color:#C99A4B; }
.adspy-alert-btn #adspy-alert-count { background:#C99A4B; color:#1a1206; border-radius:9px; min-width:16px; padding:0 5px; text-align:center; font-weight:700; }
.adspy-alert-btn.open #adspy-alert-count { background:#1a1206; color:#C99A4B; }

/* Ad Spy detail modal (UI-02/UI-03/UI-04, Phase 7). Structural precedent: .peek-* (IG
   Schedule tab) - overlay > modal > head+close, body > left-media-with-nav + right-panel.
   Different feature/different data -> own adspy-modal-* namespace, not peek-*. */
.adspy-modal-overlay { display:none; position:fixed; inset:0; z-index:130; background:rgba(10,9,7,0.75); backdrop-filter:blur(2px); align-items:center; justify-content:center; padding:24px; }
.adspy-modal-overlay.show { display:flex; }
.adspy-modal { position:relative; width:100%; max-width:960px; max-height:88vh; background:#15130f; border:1px solid #2f2d29; border-radius:14px; display:flex; flex-direction:column; overflow:hidden; }
.adspy-modal-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #2f2d29; flex-shrink:0; }
.adspy-modal-head h3 { margin:0; font-size:14px; color:#B7B0A4; }
.adspy-modal-close { background:none; border:none; color:#8A8478; font-size:22px; line-height:1; cursor:pointer; padding:2px 6px; }
.adspy-modal-close:hover { color:#F5EFE6; }
.adspy-modal-body { display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; flex:1; min-height:0; }
.adspy-modal-media { position:relative; background:#0c0b09; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:320px; }
/* #adspy-modal-media-inner must get a DEFINITE size (not content-sized) -
   align-items:center above means the flex child shrinks to fit its content
   by default, and an iframe's own width:100%/height:100% then has no real
   size to resolve against, so it silently falls back to the browser's
   default 300x150 iframe box (this was the actual cause of the ugly/tiny
   video player, not a CSS override fight). Making the inner div itself a
   flex box that fills 100% breaks that circularity, and keeps the
   no-creative-yet text placeholder centered too. */
.adspy-modal-media > div { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.adspy-modal-media img, .adspy-modal-media iframe { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; border:none; }
.adspy-modal-noPreview { color:#6E695F; font-size:12px; text-align:center; padding:20px; }
.adspy-modal-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(15,13,10,0.7); color:#F5EFE6; border:none; border-radius:50%; width:34px; height:34px; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; }
.adspy-modal-nav:hover { background:#E04E24; }
.adspy-modal-nav.prev { left:12px; } .adspy-modal-nav.next { right:12px; }
/* Carousel card nav (cycles through a multi-card ad's OWN cards) - deliberately
   distinct from .adspy-modal-nav (which moves between different ADS) so the
   two never look interchangeable: a small bottom-center pill, not big side arrows. */
.adspy-carousel-nav { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; background:rgba(15,13,10,0.75); border-radius:20px; padding:4px 10px; z-index:2; }
.adspy-carousel-nav button { background:none; border:none; color:#F5EFE6; cursor:pointer; font-size:16px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.adspy-carousel-nav button:hover { color:#E04E24; }
.adspy-carousel-nav span { color:#B7B0A4; font-size:11px; min-width:24px; text-align:center; }
.adspy-modal-panel { padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.adspy-modal-row { display:grid; grid-template-columns:96px 1fr; gap:10px; font-size:12px; }
.adspy-modal-row .k { color:#8A8478; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:10px; padding-top:2px; }
.adspy-modal-row .v { color:#B7B0A4; line-height:1.5; word-break:break-word; }
.adspy-modal-row .v a { color:#E04E24; text-decoration:none; }
.adspy-modal-row .v a:hover { text-decoration:underline; }
.adspy-modal-section-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#8A8478; margin-top:4px; border-top:1px solid #2f2d29; padding-top:12px; }
.adspy-modal-tags { display:flex; flex-wrap:wrap; gap:6px; }
.adspy-modal-tag { font-size:11px; background:#201e1a; color:#B7B0A4; padding:3px 9px; border-radius:20px; }
.adspy-modal-empty { font-size:12px; color:#6E695F; font-style:italic; }
@media (max-width:720px) { .adspy-modal-body { grid-template-columns:1fr; } .adspy-modal-media { min-height:220px; } }