/* ── Review Dashboard (ReviewHub) — in-repo, replaces Lovable iframe ── */ .rh-main{max-width:1320px;margin:0 auto;padding:28px 32px 60px} .rh-title{font-family:'PT Serif',serif;font-size:28px;font-weight:700;color:var(--black);margin-bottom:4px} .rh-subtitle{font-size:14px;color:var(--mid-gray);margin-bottom:20px} /* Tabs */ /* flex-wrap is load-bearing at phone width. Four tabs at 18px side padding do not fit 390px, and an unwrapped flex row pushed the DOCUMENT to 421px — the whole dashboard scrolled sideways, measured, not guessed. Wrapping to a second row keeps every tab reachable; overflow-x:auto would have hidden the last one behind a scroll gesture nobody knows to make. No effect above ~430px, where the row fits on one line anyway. */ .rh-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;border-bottom:1px solid var(--border)} .rh-tab{font-family:'Figtree',sans-serif;font-size:14px;font-weight:600;padding:10px 18px;border:none;background:transparent;color:var(--mid-gray);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--transition)} .rh-tab:hover{color:var(--black)} .rh-tab.active{color:var(--black);border-bottom-color:var(--peach)} /* Stat cards */ .rh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:28px} .rh-stat{background:var(--white);border-radius:var(--radius-sm);padding:20px 22px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm)} .rh-stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--light-gray);margin-bottom:8px} .rh-stat-value{font-family:'PT Serif',serif;font-size:32px;font-weight:700;color:var(--black);line-height:1} .rh-stat-value.green{color:var(--green)} .rh-stat-value.red{color:var(--red)} .rh-stat-sub{font-size:12px;color:var(--mid-gray);margin-top:6px} .rh-stat-clickable{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .05s ease} .rh-stat-clickable:hover{border-color:var(--charcoal);box-shadow:0 2px 8px rgba(0,0,0,.08)} .rh-stat-clickable:active{transform:translateY(1px)} .rh-stat-clickable:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px} .rh-stat-active{border-color:var(--black);box-shadow:0 0 0 2px var(--black) inset} /* Active product-filter banner — makes it obvious the whole dashboard is scoped to one product (see syncProductBanner in reviewhub-v2.js). Uses the peach accent so it reads as an active filter, consistent with .rh-an-navbtn.active. */ .rh-prodbanner{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding:12px 16px;background:var(--peach-light);border:1px solid var(--peach);border-radius:var(--radius-sm);color:var(--charcoal)} .rh-prodbanner[hidden]{display:none} .rh-prodbanner-icon{font-size:16px;line-height:1;flex:0 0 auto} .rh-prodbanner-text{flex:1 1 auto;font-size:14px;color:var(--charcoal)} .rh-prodbanner-text strong{font-weight:700;color:var(--black)} .rh-prodbanner-clear{flex:0 0 auto;font-family:'Figtree',sans-serif;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--peach);background:var(--white);color:var(--peach-dark);cursor:pointer;transition:var(--transition);white-space:nowrap} .rh-prodbanner-clear:hover{background:var(--peach);color:var(--white)} .rh-prodbanner-clear:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px} /* Channel cards */ .rh-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:28px} .rh-channel{background:var(--white);border-radius:var(--radius-sm);padding:16px 18px;border:1px solid var(--border-light);display:flex;flex-direction:column;gap:8px} .rh-channel-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--charcoal)} .rh-channel-count{font-family:'PT Serif',serif;font-size:22px;font-weight:700;color:var(--black)} .rh-channel-sub{font-size:11px;color:var(--mid-gray)} .rh-channel-updated{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--light-gray);cursor:default} .rh-channel-bar{height:4px;border-radius:2px;background:var(--border-light);overflow:hidden} .rh-channel-fill{height:100%;border-radius:2px;transition:width .6s ease} /* Clickable channel cards act as source filters for the dashboard. */ .rh-channel-clickable{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .05s ease} .rh-channel-clickable:hover{border-color:var(--charcoal);box-shadow:0 2px 8px rgba(0,0,0,.08)} .rh-channel-clickable:active{transform:translateY(1px)} .rh-channel-clickable:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px} .rh-channel-active{border-color:var(--black);box-shadow:0 0 0 2px var(--black) inset} /* Section headers */ /* scroll-margin-top clears the 64px sticky .top-bar so scrollIntoView() targets (Reviews section via the KPI cards + product drill-in, Star Distribution via the Average Rating card) land BELOW the header instead of behind it. */ .rh-section{font-family:'PT Serif',serif;font-size:20px;font-weight:700;color:var(--black);margin:32px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border);scroll-margin-top:80px} /* Scoped-product context above the Reviews filters (not sticky). */ .rh-review-scope{display:flex;align-items:center;gap:10px;margin:-4px 0 16px;padding:10px 14px;background:var(--peach-light);border-left:3px solid var(--peach-dark);border-radius:var(--radius-sm)} .rh-review-scope[hidden]{display:none} .rh-review-scope-label{font-size:13px;font-weight:500;color:var(--charcoal)} .rh-review-scope-name{font-size:15px;font-weight:700;color:var(--black)} .rh-review-scope-clear{margin-left:auto;font-family:'Figtree',sans-serif;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--peach);background:var(--white);color:var(--peach-dark);cursor:pointer;transition:var(--transition);white-space:nowrap} .rh-review-scope-clear:hover{background:var(--peach);color:var(--white)} .rh-review-scope-clear:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px} /* Tag for the "Site Reviews" rollup row — brand/store-level reviews (Okendo), not a catalog product. */ .rh-store-badge{display:inline-block;margin-left:8px;padding:1px 8px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--charcoal);background:var(--peach-light);border:1px solid var(--peach);border-radius:999px;vertical-align:middle;cursor:help} /* Star distribution */ .rh-dist{display:flex;flex-direction:column;gap:6px;margin-bottom:28px} .rh-dist-row{display:flex;align-items:center;gap:10px;font-size:13px} .rh-dist-label{width:50px;text-align:right;font-weight:600;color:var(--charcoal)} .rh-dist-bar{flex:1;height:12px;background:var(--border-light);border-radius:6px;overflow:hidden} .rh-dist-fill{height:100%;background:var(--gold);border-radius:6px;transition:width .8s ease} .rh-dist-count{width:110px;font-size:12px;color:var(--mid-gray)} /* Filters */ .rh-filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center} .rh-filter{font-family:'Figtree',sans-serif;font-size:13px;padding:8px 14px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--white);color:var(--charcoal);cursor:pointer;transition:var(--transition)} .rh-filter:hover{border-color:var(--peach)} .rh-filter:focus{outline:none;border-color:var(--peach);box-shadow:0 0 0 3px var(--peach-light)} .rh-search{flex:1;min-width:220px;cursor:text} /* Custom product-search autocomplete dropdown */ .rh-search-wrap{position:relative;flex:1;min-width:220px;display:flex} .rh-search-wrap .rh-search{flex:1;min-width:0} .rh-ac{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;margin:0;padding:4px;list-style:none;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xs);box-shadow:0 8px 24px rgba(0,0,0,.14);max-height:340px;overflow-y:auto} .rh-ac[hidden]{display:none} .rh-ac-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 12px;border-radius:var(--radius-xs);cursor:pointer;font-size:13px;color:var(--charcoal)} .rh-ac-item .rh-ac-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rh-ac-item .rh-ac-count{flex:none;font-size:11px;color:var(--mid-gray);font-variant-numeric:tabular-nums} .rh-ac-item mark{background:transparent;color:var(--black);font-weight:700} .rh-ac-item:hover,.rh-ac-item.rh-ac-active{background:var(--peach-light)} .rh-ac-item.rh-ac-active .rh-ac-count{color:var(--charcoal)} .rh-check{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .rh-check input{cursor:pointer;margin:0} /* Analytics — expanded sections */ .rh-an-section{margin-top:32px;padding-top:24px;border-top:1px solid var(--border-light)} /* Lead section sits cleanly under the sticky nav — no doubled divider. */ .rh-an-section:first-of-type{margin-top:16px;padding-top:0;border-top:none} .num.rh-pos{color:var(--green)} .num.rh-neg{color:var(--red)} .rh-pos{color:var(--green)}.rh-neg{color:var(--red)} /* Product lookup */ .rh-an-lookup-card{border:1px solid var(--border);border-radius:var(--radius-sm,10px);padding:16px;margin-top:14px;background:var(--white)} .rh-an-lookup-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px} .rh-an-lookup-name{font-size:15px;font-weight:700;color:var(--charcoal)} .rh-an-lookup-cat{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;background:var(--peach-light);color:var(--peach-dark)} .rh-an-lookup-kpis{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--mid-gray);margin-bottom:12px} .rh-an-lookup-kpis strong{color:var(--charcoal);font-size:15px} .rh-an-lookup-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:640px){.rh-an-lookup-grid{grid-template-columns:1fr}} .rh-table.rh-an-mini th,.rh-table.rh-an-mini td{padding:5px 8px;font-size:12px} /* Trend chart */ .rh-an-trend-delta{display:flex;gap:22px;flex-wrap:wrap;margin:10px 0;font-size:13px;color:var(--mid-gray)} .rh-an-delta-item strong{color:var(--charcoal)} .rh-an-chartwrap{width:100%;overflow-x:auto} .rh-an-svg{width:100%;min-width:520px;height:auto;display:block} .rh-an-legend{display:flex;gap:18px;font-size:12px;color:var(--mid-gray);margin-bottom:6px} .rh-an-legend i{display:inline-block;vertical-align:middle;margin-right:5px} .rh-an-legend-n{margin-left:auto;color:var(--light-gray)} .rh-lg-bar{width:12px;height:12px;border-radius:2px;background:var(--peach);opacity:.55} .rh-lg-line{width:14px;height:0;border-top:2px solid var(--green)} /* Section navigation — sticks just below the 64px sticky top-bar */ /* Single scrollable row — never wraps awkwardly; scrolls horizontally when the 13 pills exceed the width (esp. on smaller screens). */ .rh-an-nav{position:sticky;top:64px;z-index:40;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding:10px 0;margin-bottom:8px;background:var(--cream,#faf7f2);border-bottom:1px solid var(--border-light)} .rh-an-nav::-webkit-scrollbar{height:6px} .rh-an-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} .rh-an-section{scroll-margin-top:120px} @media(max-width:768px){.rh-an-nav{position:static}.rh-an-section{scroll-margin-top:16px}} .rh-an-navbtn{flex:0 0 auto;font-family:'Figtree',sans-serif;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--white);color:var(--mid-gray);cursor:pointer;transition:var(--transition);white-space:nowrap} .rh-an-navbtn:hover{border-color:var(--peach);color:var(--charcoal)} .rh-an-navbtn.active{background:var(--peach-light);border-color:var(--peach);color:var(--peach-dark)} /* Trend insights callouts */ .rh-an-insights{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0} @media(max-width:760px){.rh-an-insights{grid-template-columns:repeat(2,1fr)}} @media(max-width:420px){.rh-an-insights{grid-template-columns:1fr}} .rh-an-insight{border:1px solid var(--border);border-radius:var(--radius-xs);padding:12px 14px;background:var(--white)} .rh-an-insight-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--mid-gray)} .rh-an-insight-val{font-size:20px;font-weight:700;color:var(--charcoal);margin:4px 0 2px} .rh-an-insight-sub{font-size:11px;color:var(--mid-gray)} /* Product inspector panel */ .rh-an-lookup-count{font-size:12px;color:var(--mid-gray);margin:8px 0} .rh-muted{color:var(--light-gray)} .rh-an-inspector{border:1px solid var(--border);border-radius:var(--radius-sm,10px);padding:18px;margin-top:6px;background:var(--white)} .rh-an-insp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px} .rh-an-insp-name{font-size:18px;font-weight:800;color:var(--charcoal);margin-bottom:6px} .rh-an-insp-rating{font-size:30px;font-weight:800;line-height:1} .rh-an-insp-star{font-size:16px;margin-left:2px} .rh-an-insp-kpis{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px} .rh-an-insp-kpi{flex:1;min-width:96px;border:1px solid var(--border-light);border-radius:var(--radius-xs);padding:10px 12px;background:var(--cream,#faf7f2)} .rh-an-insp-kpival{font-size:19px;font-weight:700;color:var(--charcoal)} .rh-an-insp-kpilbl{font-size:11px;color:var(--mid-gray)} /* Pagination bar */ .rh-pg{margin-top:10px} .rh-pg-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mid-gray)} .rh-pg-size select{font-size:12px;padding:4px 8px} .rh-pg-ctrls{display:inline-flex;align-items:center;gap:8px;margin-left:auto} .rh-pg-info{min-width:96px;text-align:center} .rh-page-btn[disabled]{opacity:.4;cursor:default} .rh-page-btn{font-size:14px;padding:4px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--white);cursor:pointer} .rh-page-btn:not([disabled]):hover{border-color:var(--peach)} th[data-catsort]{cursor:pointer;user-select:none;white-space:nowrap} th[data-catsort]:hover{color:var(--peach-dark)} th[data-healthsort]{cursor:pointer;user-select:none;white-space:nowrap} th[data-healthsort]:hover{color:var(--peach-dark)} /* ── AI Insights (PR #2) ── */ .rh-an-navai{border-color:var(--peach)} .rh-an-ai .rh-an-card-title{display:flex;align-items:center;gap:6px} /* Executive summary */ .rh-ai-summary{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:720px){.rh-ai-summary{grid-template-columns:1fr}} .rh-ai-line{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--charcoal);background:var(--white);border:1px solid var(--border-light);border-left:3px solid var(--peach);border-radius:var(--radius-sm);padding:14px 16px} .rh-ai-line.rh-ai-health{grid-column:1/-1} .rh-ai-line.rh-ai-risk{border-left-color:var(--red)} .rh-ai-line.rh-ai-opportunity{border-left-color:var(--green)} .rh-ai-line.rh-ai-emerging{border-left-color:var(--gold)} .rh-ai-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--peach-light);font-size:15px} .rh-ai-risk .rh-ai-ico{background:#fde8e8} .rh-ai-opportunity .rh-ai-ico{background:#e8f5ef} .rh-ai-emerging .rh-ai-ico{background:#fff7e6} .rh-ai-coverage .rh-ai-ico,.rh-ai-channel .rh-ai-ico{background:var(--border-light)} /* Health score bar + grade */ .rh-healthbar{display:inline-block;width:60px;height:7px;border-radius:4px;background:var(--border-light);vertical-align:middle;overflow:hidden;margin-right:6px} .rh-healthbar-fill{display:block;height:100%} .rh-grade{display:inline-block;min-width:20px;text-align:center;font-weight:700;font-size:12px;padding:2px 6px;border-radius:4px} .rh-grade-a{background:#e8f5ef;color:#1b7a4f}.rh-grade-b{background:#eef7e8;color:#3f7a1b} .rh-grade-c{background:#fff7e6;color:#9a6b00}.rh-grade-d{background:#fdefe6;color:#b5480d}.rh-grade-f{background:#fde8e8;color:#b91c1c} /* Health band pill (Risk Watchlist emphasis — reuses grade-chip language) */ .rh-healthpill{display:inline-block;min-width:34px;text-align:center;font-weight:700;font-size:12px;padding:3px 8px;border-radius:6px} .rh-healthpill-good{background:#e8f5ef;color:#1b7a4f} .rh-healthpill-mid{background:#fff7e6;color:#9a6b00} .rh-healthpill-bad{background:#fde8e8;color:#b91c1c} /* Reason chips */ .rh-reason{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;margin:2px 2px 0 0;background:var(--border-light);color:var(--charcoal)} .rh-reason-falling,.rh-reason-negative{background:#fde8e8;color:#b91c1c} .rh-reason-gap{background:#fff7e6;color:#9a6b00} .rh-reason-coverage{background:var(--border-light);color:var(--mid-gray)} .rh-reason-improving,.rh-reason-volume,.rh-reason-hidden{background:#e8f5ef;color:#1b7a4f} .rh-row-flag td{background:rgba(217,27,96,.04)} /* Themes */ .rh-theme-head{font-size:13px;color:var(--mid-gray);margin-bottom:14px} .rh-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:640px){.rh-theme-grid{grid-template-columns:1fr}} .rh-theme-coltitle{font-size:13px;font-weight:700;margin-bottom:10px} .rh-theme-row{display:grid;grid-template-columns:150px 1fr 84px;align-items:center;gap:10px;margin-bottom:7px} .rh-theme-label{font-size:12px;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rh-theme-bar{height:12px;background:var(--border-light);border-radius:4px;overflow:hidden} .rh-theme-fill{height:100%;border-radius:4px} .rh-theme-fill.pos{background:var(--green)}.rh-theme-fill.neg{background:var(--red)} .rh-theme-val{font-size:12px;text-align:right;font-variant-numeric:tabular-nums} @media(max-width:480px){.rh-theme-row{grid-template-columns:110px 1fr 70px}} /* Products tab — column filters (numeric ranges + channel multi-select chips) */ .rh-range{display:inline-flex;align-items:center;gap:6px} .rh-num{width:104px;cursor:text;-moz-appearance:textfield} .rh-num::placeholder{color:var(--mid-gray)} .rh-srcfilter{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} .rh-srcf{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;letter-spacing:.3px;padding:6px 11px;border-radius:var(--radius-xs);border:1px dashed var(--border);background:var(--white);color:var(--mid-gray);cursor:pointer;transition:var(--transition)} .rh-srcf:hover{border-color:var(--peach);color:var(--charcoal)} .rh-srcf.on{border-style:solid;border-color:transparent} .rh-srcf.on.amazon{background:#fff3e0;color:#e65100} .rh-srcf.on.shopify{background:#e8f5ef;color:#1b7a4f} .rh-srcf.on.ulta{background:#e8eaf6;color:#283593} .rh-srcf.on.target{background:#fde8e8;color:#b91c1c} .rh-srcf.on.tiktok{background:#e0fbfb;color:#0b7285} .rh-clearf{font-family:'Figtree',sans-serif;font-size:12px;padding:7px 12px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--white);color:var(--mid-gray);cursor:pointer;transition:var(--transition)} .rh-clearf:hover{border-color:var(--peach);color:var(--charcoal)} .rh-clearf[hidden]{display:none} .rh-export-btn{font-family:'Figtree',sans-serif;font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--white);color:var(--charcoal);cursor:pointer;transition:var(--transition);white-space:nowrap} .rh-export-btn:hover{border-color:var(--peach);background:var(--peach-light)} .rh-count{font-size:12px;color:var(--mid-gray);margin-left:auto} /* Single Date Range control (trigger button + popover) — replaces the separate From/To inputs + quick-range dropdown. Drives the same hidden fFrom/fTo. */ .rh-daterange{position:relative;display:inline-block} .rh-dr-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Figtree',sans-serif;font-size:13px;padding:8px 12px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--white);color:var(--charcoal);cursor:pointer;transition:var(--transition)} .rh-dr-btn:hover{border-color:var(--peach)} .rh-dr-btn.is-set{border-color:var(--peach);background:var(--peach-light);color:var(--black);font-weight:600} .rh-dr-cal{opacity:.85} .rh-dr-caret{color:var(--light-gray);font-size:11px} .rh-dr-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:60;width:272px;background:var(--white);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:6px} .rh-dr-pop[hidden]{display:none} .rh-dr-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;font-family:'Figtree',sans-serif;font-size:13px;padding:8px 12px;border:none;border-radius:var(--radius-xs);background:none;color:var(--charcoal);cursor:pointer} .rh-dr-item:hover{background:var(--peach-light)} .rh-dr-item.is-active{background:var(--peach-light);color:var(--black);font-weight:600} .rh-dr-item.rh-dr-danger{color:#b23b3b} .rh-dr-rng{font-size:11px;color:var(--mid-gray);font-weight:400} .rh-dr-item.is-active .rh-dr-rng{color:var(--charcoal)} .rh-dr-sep{height:1px;background:var(--border-light);margin:6px 4px} .rh-dr-custom{padding:6px 12px 10px} .rh-dr-custom[hidden]{display:none} .rh-dr-clabel{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--light-gray);margin:0 0 7px} .rh-dr-crow{display:flex;gap:8px;align-items:center;margin-bottom:10px} .rh-dr-crow input[type=date]{flex:1;min-width:0;font-size:12.5px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--charcoal)} .rh-dr-arrow{color:var(--light-gray)} .rh-dr-apply{width:100%;padding:8px;border:none;border-radius:var(--radius-xs);background:var(--charcoal);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer} .rh-dr-apply:hover{background:var(--black)} /* Review cards */ .rh-reviews{display:flex;flex-direction:column;gap:12px;margin-bottom:16px} .rh-review{background:var(--white);border-radius:var(--radius-sm);padding:18px 22px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);transition:var(--transition)} .rh-review:hover{box-shadow:var(--shadow)} .rh-review-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap} .rh-review-stars{color:var(--gold);font-size:14px;letter-spacing:1px} .rh-review-date{font-size:12px;color:var(--light-gray)} .rh-review-reviewer{font-size:12px;color:var(--mid-gray);font-weight:600} .rh-verified{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;background:var(--green-bg);color:var(--green)} .rh-review-title{font-weight:600;font-size:15px;color:var(--black);margin-bottom:4px} .rh-review-body{font-size:13px;color:var(--mid-gray);line-height:1.55} .rh-review-product{font-size:11px;color:var(--light-gray);margin-top:8px;font-weight:500} /* ── Review media thumbnails (Phase-1: images) ── */ .rh-review-media{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .rh-thumb{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-xs);border:1px solid var(--border-light);cursor:pointer;transition:var(--transition);background:var(--border-light)} .rh-thumb:hover{border-color:var(--peach);transform:scale(1.04)} /* Lightbox overlay */ .rh-lightbox{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;background:rgba(20,16,12,.82)} .rh-lightbox.open{display:flex} .rh-lb-figure{margin:0;max-width:88vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:10px} .rh-lb-img{max-width:88vw;max-height:80vh;object-fit:contain;border-radius:var(--radius-xs);box-shadow:0 8px 40px rgba(0,0,0,.5)} .rh-lb-cap{color:rgba(255,255,255,.85);font-size:13px;font-family:'Figtree',sans-serif;text-align:center;max-width:70vw} .rh-lb-close{position:absolute;top:18px;right:22px;font-size:24px;line-height:1;background:none;border:none;color:#fff;cursor:pointer;opacity:.8} .rh-lb-close:hover{opacity:1} .rh-lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;line-height:1;background:none;border:none;color:#fff;cursor:pointer;opacity:.7;padding:0 18px} .rh-lb-nav:hover{opacity:1} .rh-lb-prev{left:8px} .rh-lb-next{right:8px} /* Source chips */ .rh-source{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;background:var(--peach-light);color:var(--peach-dark)} .rh-source.amazon{background:#fff3e0;color:#e65100} .rh-source.ulta{background:#e8eaf6;color:#283593} .rh-source.target{background:#fde8e8;color:#b91c1c} .rh-source.shopify{background:#e8f5ef;color:#1b7a4f} .rh-source.other{background:var(--border-light);color:var(--mid-gray)} /* Pagination */ .rh-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 28px} .rh-page-btn{font-family:'Figtree',sans-serif;font-size:14px;width:34px;height:34px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--white);color:var(--charcoal);cursor:pointer;transition:var(--transition)} .rh-page-btn:hover:not(:disabled){border-color:var(--peach)} .rh-page-btn:disabled{opacity:.4;cursor:default} .rh-page-info{font-size:13px;color:var(--mid-gray)} /* Products table */ .rh-tablewrap{background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow-x:auto;margin-bottom:28px} .rh-table{width:100%;border-collapse:collapse;font-size:13px} .rh-table th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--light-gray);padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none} .rh-table th:hover{color:var(--black)} .rh-table td{padding:12px 16px;border-bottom:1px solid var(--border-light);color:var(--charcoal);vertical-align:middle} .rh-table tbody tr{cursor:pointer;transition:var(--transition)} .rh-table tbody tr:hover{background:var(--peach-light)} .rh-table .num{text-align:right;font-variant-numeric:tabular-nums} .rh-minidist{display:flex;gap:2px;align-items:flex-end;height:18px;width:70px} .rh-minidist span{flex:1;background:var(--border-light);border-radius:1px;min-height:2px} .rh-minidist span.pos{background:var(--green)} .rh-minidist span.mid{background:var(--gold)} .rh-minidist span.neg{background:var(--red)} /* ── Manage: per-review button, tag, unread accent ── */ .rh-manage-btn{margin-left:auto;font-family:'Figtree',sans-serif;font-size:12px;font-weight:600;padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--white);color:var(--charcoal);cursor:pointer;transition:var(--transition)} .rh-manage-btn:hover{border-color:var(--peach);background:var(--peach-light)} .rh-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:4px;background:var(--border-light);color:var(--mid-gray);border:none;cursor:default} .rh-review-unread{border-left:3px solid var(--peach)} /* ── Brand Response (Phase-2, display-only) ── */ .rh-brandresp-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:4px;background:#eef2ff;color:#3949ab;white-space:nowrap} .mng-brandresp{margin-top:12px;padding:12px 14px;border-radius:var(--radius-xs);background:#f5f7ff;border:1px solid #dfe4ff;border-left:3px solid #3949ab} .mng-brandresp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#3949ab;margin-bottom:6px} .mng-brandresp-body{font-size:13px;color:var(--charcoal);line-height:1.55;white-space:pre-wrap} .mng-brandresp-meta{font-size:11px;color:var(--mid-gray);margin-top:6px} /* ── Manage drawer ── */ .mng-drawer{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none} .mng-drawer.open{visibility:visible;pointer-events:auto} .mng-backdrop{position:absolute;inset:0;background:rgba(20,16,12,.42);opacity:0;transition:opacity .25s ease} .mng-drawer.open .mng-backdrop{opacity:1} .mng-panel{position:absolute;top:0;right:0;height:100%;width:480px;max-width:94vw;background:var(--white);box-shadow:-8px 0 28px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)} .mng-drawer.open .mng-panel{transform:translateX(0)} .mng-panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)} .mng-panel-head h2{font-family:'PT Serif',serif;font-size:19px;font-weight:700;color:var(--black);margin:0} .mng-panel-body{flex:1;overflow-y:auto;padding:20px 22px 40px} /* Header block */ .mng-head{padding-bottom:16px;border-bottom:1px solid var(--border-light);margin-bottom:18px} .mng-meta{font-size:12px;color:var(--mid-gray);margin:4px 0} .mng-title{font-weight:700;font-size:15px;color:var(--black);margin:6px 0 4px} .mng-bodytext{font-size:13px;color:var(--mid-gray);line-height:1.55;margin-bottom:10px} .mng-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .mng-product{font-size:11px;color:var(--charcoal);background:var(--charcoal);color:var(--white);padding:3px 10px;border-radius:12px;font-weight:600} .mng-readtoggle{cursor:pointer} .mng-readtoggle:hover{background:var(--peach-light);color:var(--peach-dark)} .mng-checkstatus{opacity:.55;cursor:not-allowed} /* Form */ .mng-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px} .mng-field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--light-gray);margin-bottom:12px} .mng-field select,.mng-field input,.mng-field textarea{font-family:'Figtree',sans-serif;font-size:13px;font-weight:400;text-transform:none;letter-spacing:normal;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--white);color:var(--charcoal)} .mng-field select:focus,.mng-field input:focus,.mng-field textarea:focus{outline:none;border-color:var(--peach);box-shadow:0 0 0 3px var(--peach-light)} .mng-field textarea{min-height:80px;resize:vertical} .mng-section{font-family:'PT Serif',serif;font-size:15px;font-weight:700;color:var(--black);margin:14px 0 12px;padding-top:14px;border-top:1px solid var(--border-light)} .mng-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--charcoal);margin:4px 0 14px} .mng-refundamt{width:110px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:13px} .mng-actions{display:flex;align-items:center;gap:12px;margin-top:6px} .mng-savemsg{font-size:12px;color:var(--mid-gray)} .mng-savemsg.ok{color:var(--green);font-weight:600} .mng-savemsg.err{color:var(--red);font-weight:600} .mng-activity{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .mng-activity li{font-size:12px;color:var(--charcoal);padding:8px 12px;background:var(--border-light);border-radius:var(--radius-xs)} .mng-actdetail{color:var(--mid-gray)} .mng-empty{color:var(--light-gray);background:transparent!important;padding:4px 0!important} @media (max-width:560px){.mng-grid2{grid-template-columns:1fr}.mng-panel{width:100vw}} /* ── Analytics tab (SKU Ratings Overview) ── */ .rh-an-head{font-family:'PT Serif',serif;font-size:22px;font-weight:700;color:var(--black);margin:0 0 2px} .rh-an-outof{font-size:16px;font-weight:400;color:var(--light-gray)} .rh-an-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px} @media (max-width:880px){.rh-an-grid{grid-template-columns:1fr}} .rh-an-card{background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:20px 22px;min-width:0} .rh-an-card-title{font-family:'PT Serif',serif;font-size:17px;font-weight:700;color:var(--black);margin:0 0 2px} .rh-an-card-sub{font-size:12px;color:var(--mid-gray);margin:0 0 16px} .rh-an-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:12px 0 18px} .rh-an-ctl{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--light-gray)} .rh-an-min{width:84px} /* Top/Bottom toggle */ .rh-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-xs);overflow:hidden;height:36px} .rh-toggle-btn{font-family:'Figtree',sans-serif;font-size:13px;font-weight:600;padding:0 16px;border:none;background:var(--white);color:var(--mid-gray);cursor:pointer;transition:var(--transition)} .rh-toggle-btn:hover{color:var(--black)} .rh-toggle-btn.active{background:var(--black);color:var(--white)} /* SKU rating bars */ .rh-an-skurow{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--border-light)} .rh-an-skurow:last-child{border-bottom:none} .rh-an-skuname{width:200px;font-size:12px;color:var(--charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0} .rh-an-skubar{flex:1;height:14px;background:var(--border-light);border-radius:7px;overflow:hidden} .rh-an-skufill{height:100%;border-radius:7px;transition:width .6s ease} .rh-an-skuval{width:110px;text-align:right;font-size:13px;font-weight:600;color:var(--black);font-variant-numeric:tabular-nums} .rh-an-skucount{font-size:11px;font-weight:400;color:var(--light-gray)} /* Distribution total + per-star count cards */ .rh-an-totalrow{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);font-size:13px;color:var(--mid-gray)} .rh-an-totalrow strong{font-family:'PT Serif',serif;font-size:18px;color:var(--black)} .rh-an-starcards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px} .rh-an-starcard{background:var(--bg,#faf7f3);border:1px solid var(--border-light);border-radius:var(--radius-xs);padding:8px 6px;text-align:center} .rh-an-starcard-label{font-size:11px;font-weight:600;color:var(--light-gray)} .rh-an-starcard-val{font-size:14px;font-weight:700;color:var(--charcoal);font-variant-numeric:tabular-nums;margin-top:2px} /* States */ .rh-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--light-gray)} .rh-spinner{width:32px;height:32px;border:3px solid var(--border-light);border-top-color:var(--peach);border-radius:50%;animation:rh-spin .7s linear infinite;margin-bottom:12px} @keyframes rh-spin{to{transform:rotate(360deg)}} .rh-error{background:var(--red-bg);color:var(--red);padding:16px 20px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:16px} .rh-empty{text-align:center;padding:40px;color:var(--light-gray);font-size:14px} .rh-note{font-size:12px;color:var(--gold);margin-bottom:12px} /* Footer */ .rh-footer{text-align:center;padding:20px;font-size:12px;color:var(--light-gray)} /* Responsive */ @media(max-width:768px){ .rh-main{padding:20px 16px 40px} .rh-stats{grid-template-columns:repeat(2,1fr)} .rh-channels{grid-template-columns:repeat(2,1fr)} } /* ═══════════════════ ADVERSE EVENTS TAB ═══════════════════ */ .rh-badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;vertical-align:middle;margin-left:4px} .rh-badge.ae-badge-serious{background:#b00020;box-shadow:0 0 0 2px var(--red-bg)} .ae-compliance{background:var(--peach-light);border:1px solid var(--peach-dark);color:var(--charcoal);padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;line-height:1.5;margin-bottom:16px} .ae-scanbar{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:18px;box-shadow:var(--shadow-sm)} .ae-scan-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .ae-scan-status{font-size:13px;color:var(--charcoal);min-height:18px} .ae-run-summary{font-size:12px;color:var(--light-gray);margin-top:6px} .ae-progress{margin-top:10px} .ae-progress-bar{height:8px;background:var(--border-light);border-radius:4px;overflow:hidden} .ae-progress-fill{height:100%;width:0;background:var(--peach);transition:width .3s ease} .ae-progress-text{font-size:12px;color:var(--charcoal);margin-top:5px} .ae-btn{appearance:none;border:1px solid var(--border);background:var(--white);color:var(--charcoal);font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition)} .ae-btn:hover{background:var(--peach-light)} .ae-btn:disabled{opacity:.5;cursor:default} .ae-btn-primary{background:var(--charcoal);color:#fff;border-color:var(--charcoal)} .ae-btn-primary:hover{background:var(--black)} .ae-btn-go{background:var(--green);color:#fff;border-color:var(--green)} .ae-btn-go:hover{filter:brightness(.95)} .ae-filters{align-items:center} .ae-bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--peach-light);border:1px solid var(--peach-dark);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:12px} .ae-bulkbar #aeBulkCount{font-weight:700;font-size:13px} .ae-note-input{flex:1;min-width:200px;font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-xs)} .ae-tablewrap{overflow-x:auto} .ae-table{width:100%} .ae-table td,.ae-table th{vertical-align:top} .ae-checkcol{width:34px;text-align:center} .ae-row{cursor:pointer} .ae-row:hover{background:var(--peach-light)} .ae-row-serious{background:var(--red-bg)} .ae-row-serious:hover{background:#ffe0e0} .ae-src{font-size:11px;color:var(--light-gray);margin-top:2px} .ae-chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;margin:1px 2px 1px 0;white-space:nowrap} .ae-chip.skin{background:#fde2e2;color:#b00020} .ae-chip.property{background:#e3effd;color:#1857a8} .ae-chip.physical{background:#fff0d9;color:#a15c00} .ae-serious-badge{display:inline-block;background:#b00020;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.04em} .ae-status{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;text-transform:capitalize} .ae-status-new{background:var(--gold);color:#5a4500} .ae-status-escalated{background:#b00020;color:#fff} .ae-status-resolved{background:var(--green-bg);color:var(--green)} .ae-status-ignored{background:var(--border-light);color:var(--light-gray)} /* Detail modal */ .ae-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;z-index:1000;padding:40px 16px;overflow-y:auto} .ae-modal{position:relative;background:var(--white);border-radius:var(--radius-sm);max-width:760px;width:100%;padding:28px 30px;box-shadow:var(--shadow);margin:auto} .ae-modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--light-gray)} .ae-modal-close:hover{color:var(--charcoal)} .ae-detail-head h2{margin:8px 0 4px;font-size:20px} .ae-detail-meta{font-size:13px;color:var(--light-gray)} .ae-serious-reason{background:var(--red-bg);color:#b00020;padding:10px 14px;border-radius:var(--radius-xs);font-size:13px;margin:12px 0} .ae-detail-cats{margin:14px 0;display:flex;flex-direction:column;gap:6px} .ae-catrow{font-size:13px;color:var(--charcoal);opacity:.6} .ae-catrow.hit{opacity:1} .ae-miss{color:var(--light-gray)} .ae-modal h3{margin:18px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--mid-gray)} .ae-req{text-transform:none;letter-spacing:0;color:var(--red);font-weight:400} .ae-review-full{white-space:pre-wrap;background:var(--peach-light);border-radius:var(--radius-xs);padding:14px 16px;font-size:14px;line-height:1.6;max-height:280px;overflow-y:auto} .ae-mark{background:#ffe08a;padding:1px 2px;border-radius:2px;font-weight:600} .ae-actions textarea{width:100%;min-height:64px;font-family:inherit;font-size:13px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-xs);resize:vertical} .ae-action-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .ae-history{list-style:none;padding:0;margin:0;font-size:13px} .ae-history li{padding:8px 0;border-bottom:1px solid var(--border-light)} .ae-hist-note{color:var(--charcoal)} .ae-scan-from{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--charcoal);margin-right:6px} .ae-scan-from input[type=date]{font-family:inherit;font-size:12px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-xs)} .ae-linkbtn{background:none;border:none;color:var(--peach-dark);font-size:12px;text-decoration:underline;cursor:pointer;padding:0} .ae-table th.ae-sortable{cursor:pointer;user-select:none;white-space:nowrap} .ae-table th.ae-sortable:hover{color:var(--peach-dark)} .ae-table th.ae-sorted{color:var(--peach-dark)} /* ── AI Summary (Products tab button + drawer content) ── */ .rh-sumbtn{font-family:'Figtree',sans-serif;font-size:12px;font-weight:600;padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--white);color:var(--peach-dark);cursor:pointer;white-space:nowrap;transition:var(--transition)} .rh-sumbtn:hover{background:var(--peach);color:var(--white);border-color:var(--peach)} .sum-head{padding-bottom:16px;border-bottom:1px solid var(--border-light);margin-bottom:18px} .sum-title{font-family:'PT Serif',serif;font-size:18px;font-weight:700;color:var(--black);margin-bottom:8px} .sum-meta{font-size:12px;color:var(--mid-gray);display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px} .sum-model{font-size:11px;color:var(--light-gray);text-transform:uppercase;letter-spacing:.4px} .sum-body{font-size:13px;line-height:1.7;color:var(--charcoal)} .sum-body h3{font-family:'PT Serif',serif;font-size:15px;font-weight:700;color:var(--black);margin:18px 0 8px} .sum-body h4{font-size:13px;font-weight:700;color:var(--black);margin:14px 0 6px} .sum-body ul{margin:6px 0 6px 18px;padding:0} .sum-body li{margin:4px 0} .sum-body strong{color:var(--black)} .sum-actions{margin-top:24px;padding-top:16px;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end} /* ═══════════════════ POST-LAUNCH SCORECARDS TAB ═══════════════════ */ /* Namespaced `.ls-` throughout. The source page this was ported from styled generic names (.section, .sidebar, .chan-table) and redefined .rh-stat / .rh-table, which would have restyled every other tab; the stat cards and .rh-tablewrap scroll container are reused as-is instead. One own table class because .rh-table advertises sortable headers and clickable rows that these tables do not have. */ .ls-layout{display:flex;gap:24px;align-items:flex-start} .ls-sidebar{width:270px;flex:0 0 270px;background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:8px 0;position:sticky;top:16px;max-height:calc(100vh - 48px);overflow-y:auto} .ls-main{flex:1;min-width:0} .ls-season{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--peach-dark);font-weight:700;padding:14px 18px 6px} .ls-item{display:block;width:100%;text-align:left;background:none;border:none;border-left:3px solid transparent;cursor:pointer;padding:10px 18px;font-family:inherit;transition:var(--transition)} .ls-item:hover{background:var(--cream)} .ls-item.active{background:var(--peach-light);border-left-color:var(--peach-dark)} .ls-item:focus-visible{outline:2px solid var(--charcoal);outline-offset:-2px} .ls-item-name{font-family:'PT Serif',serif;font-weight:700;font-size:14px;color:var(--black);line-height:1.3} .ls-item-date{font-size:10.5px;color:var(--peach-dark);font-weight:600;margin-top:3px} .ls-item-sub{font-size:11px;color:var(--mid-gray);margin-top:4px} .ls-head{margin-bottom:20px} .ls-h1{font-family:'PT Serif',serif;font-size:24px;font-weight:700;color:var(--black);letter-spacing:-.3px;margin:0} .ls-pills{margin-top:10px} .ls-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--cream);border:1px solid var(--border-light);margin:2px 4px 2px 0} .ls-pill.live{color:var(--green)} .ls-pill.pending{color:var(--light-gray)} .ls-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block} .ls-section{background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 24px;margin-bottom:20px} .ls-section h3{font-family:'PT Serif',serif;font-size:18px;font-weight:700;color:var(--black);margin:0 0 14px;letter-spacing:-.2px} .ls-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .ls-section-head h3{margin:0} /* The stat grid inside a section already has the section's padding around it. */ .ls-section .rh-stats{margin-bottom:18px} .ls-section .rh-tablewrap{margin-bottom:0} .ls-sublabel{margin:18px 0 8px} .ls-note{font-size:12.5px;color:var(--mid-gray);line-height:1.55;margin-bottom:14px} .ls-empty{font-size:13px;color:var(--mid-gray);line-height:1.6;font-style:italic} .ls-caveat{margin-top:14px;font-size:12.5px;color:var(--charcoal);background:var(--gold-bg);border:1px solid var(--gold);border-radius:var(--radius-xs);padding:10px 12px;line-height:1.55} .ls-export{font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--white);color:var(--charcoal);cursor:pointer;white-space:nowrap;transition:var(--transition)} .ls-export:hover{border-color:var(--peach-dark);background:var(--peach-light)} .ls-table{width:100%;border-collapse:collapse;font-size:13px} .ls-table th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--light-gray);padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap} .ls-table td{padding:11px 14px;border-bottom:1px solid var(--border-light);color:var(--charcoal);vertical-align:top} .ls-table tbody tr:last-child td{border-bottom:none} .ls-table .num{text-align:right;font-variant-numeric:tabular-nums} .ls-name{font-weight:600;color:var(--black)} .ls-row-pending{opacity:.55} .ls-row-zero{color:var(--mid-gray)} .ls-status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap} .ls-status.live{color:var(--green);background:var(--green-bg)} .ls-status.zero{color:var(--gold);background:var(--gold-bg)} .ls-status.pending{color:var(--mid-gray);background:var(--cream)} .ls-bar-wrap{display:inline-block;width:60px;height:6px;background:var(--border-light);border-radius:3px;overflow:hidden;margin-right:8px;vertical-align:middle} .ls-bar{display:block;height:100%;background:var(--peach-dark);border-radius:3px} .ls-rmix{display:flex;flex-direction:column;gap:7px} .ls-rmix-row{display:flex;align-items:center;gap:12px;font-size:12.5px} .ls-rmix-star{width:28px;flex:0 0 28px;font-weight:600;color:var(--charcoal)} .ls-rmix-bar{flex:1;height:9px;background:var(--border-light);border-radius:5px;overflow:hidden} .ls-rmix-fill{height:100%;background:var(--peach);border-radius:5px} .ls-rmix-pct{width:110px;flex:0 0 110px;text-align:right;color:var(--mid-gray);font-variant-numeric:tabular-nums} .ls-themes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .ls-themes li{border-left:3px solid var(--peach-light);padding-left:14px} .ls-theme-head{font-size:13.5px;color:var(--charcoal);line-height:1.5} .ls-theme-quote{font-family:'PT Serif',serif;font-style:italic;font-size:13.5px;color:var(--mid-gray);margin-top:5px;line-height:1.6} .ls-hl{background:#ffe27a;padding:1px 5px;border-radius:3px;font-weight:700;color:var(--black)} .ls-reco{background:var(--cream);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:14px 16px;font-size:13.5px;line-height:1.65;color:var(--charcoal);margin-bottom:10px} .ls-reco:last-child{margin-bottom:0} .ls-src{display:inline-block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:4px;background:var(--cream);border:1px solid var(--border-light);color:var(--mid-gray)} .ls-stars{color:var(--gold);white-space:nowrap} .ls-body{max-width:420px;line-height:1.55} .ls-matched{font-size:12px;color:var(--mid-gray)} .ls-early{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--peach-dark);margin-top:3px} /* The left rail stacks above the scorecard once there is no room beside it. */ @media (max-width:900px){ .ls-layout{flex-direction:column} .ls-sidebar{width:100%;flex:none;position:static;max-height:320px} .ls-body{max-width:none} } /* ═══════════════════ QUALITY MONITORING TAB ═══════════════════ Reuses the existing palette variables and the .ae-* scanbar/progress rules rather than introducing a second visual system — the tab is a defect lens on the same data, not a separate product. */ .qm-disclosures{margin-bottom:14px} .qm-disclosure{background:var(--cream);border-left:3px solid var(--border);padding:9px 13px;border-radius:var(--radius-sm);font-size:12.5px;line-height:1.55;color:var(--charcoal);margin-bottom:6px} .qm-disclosure-warn{background:var(--peach-light);border-left-color:var(--peach-dark)} .qm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px} .qm-stats{display:flex;gap:18px;flex-wrap:wrap} .qm-stat{display:flex;flex-direction:column;line-height:1.25} .qm-stat-n{font-size:19px;font-weight:700;color:var(--charcoal);font-variant-numeric:tabular-nums} .qm-stat-l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--light-gray)} .qm-stat-warn .qm-stat-n{color:var(--red)} .qm-section{margin-bottom:24px} .qm-section-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .qm-section-head h3{margin:0;font-size:15px;font-weight:700;color:var(--charcoal)} /* ── Alerts ── */ .qm-alerts{display:flex;flex-direction:column;gap:10px} .qm-alert{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;box-shadow:var(--shadow-sm)} .qm-alert-spike{border-left-color:var(--red)} .qm-alert-emergent{border-left-color:var(--peach-dark)} .qm-alert-chronic{border-left-color:var(--light-gray)} .qm-alert-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px} .qm-sku{font-weight:700;color:var(--charcoal);text-decoration:none;border-bottom:1px dotted var(--light-gray)} .qm-sku:hover{border-bottom-style:solid} .qm-mode{font-size:12.5px;color:var(--charcoal)} .qm-chan{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--light-gray)} .qm-pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em} .qm-pill-spike{background:var(--red-bg);color:var(--red)} .qm-pill-emergent{background:var(--peach-light);color:var(--peach-dark)} .qm-pill-chronic{background:var(--cream);color:var(--light-gray)} .qm-pill-warn{background:var(--peach-light);color:var(--peach-dark)} .qm-pill-danger{background:var(--red);color:#fff} .qm-status{margin-left:auto;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--light-gray)} .qm-status-new{color:var(--red);font-weight:700} /* Evidence frozen at fire time. Monospace so the numbers line up and read as a claim someone can check, rather than as prose. */ .qm-evidence{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--cream);padding:7px 10px;border-radius:var(--radius-sm);color:var(--charcoal);margin-bottom:6px} .qm-alert-meta{font-size:11px;color:var(--light-gray);margin-bottom:8px} .qm-alert-actions{display:flex;gap:6px;flex-wrap:wrap} /* ── Defect matrix ── */ .qm-matrix{width:100%;border-collapse:collapse;font-size:12px} .qm-matrix th{padding:7px 6px;text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--light-gray);border-bottom:1px solid var(--border);white-space:nowrap} .qm-matrix .qm-th-sku{text-align:left;min-width:180px} .qm-matrix td{border-bottom:1px solid var(--border);padding:0;text-align:center} .qm-td-sku{padding:7px 6px!important;text-align:left!important} .qm-td-total{padding:7px 6px!important;font-weight:700;font-variant-numeric:tabular-nums} .qm-cell{position:relative;background:color-mix(in srgb,var(--red) calc(var(--i,0)*55%),transparent)} .qm-cell-0{background:transparent} .qm-cell a{display:block;padding:6px 4px;text-decoration:none;color:var(--charcoal)} .qm-cell-n{display:block;font-weight:700;font-variant-numeric:tabular-nums} .qm-cell-sub{display:block;font-size:9.5px;color:var(--light-gray)} .qm-cell-sup{display:block;font-size:9.5px;color:var(--light-gray)} .qm-note{font-size:11.5px;color:var(--light-gray);line-height:1.5;margin-top:8px} .qm-note-warn{color:var(--peach-dark)} .qm-empty{padding:16px;text-align:center;font-size:12.5px;color:var(--light-gray);background:var(--cream);border-radius:var(--radius-sm)} /* ── SKU detail ── */ .qm-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .qm-detail-head h4{margin:0;font-size:15px;font-weight:700} .qm-series{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;margin-bottom:14px} .qm-series-head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--light-gray);margin-bottom:10px} .qm-bars{display:flex;align-items:flex-end;gap:3px;height:110px} .qm-bar{flex:1;min-width:8px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%} .qm-bar-fill{width:100%;background:var(--red);border-radius:2px 2px 0 0;min-height:2px} .qm-bar-x{font-size:8.5px;color:var(--light-gray);margin-top:3px;white-space:nowrap} .qm-splits{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px} .qm-split{flex:1;min-width:150px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px} .qm-split h5{margin:0 0 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--light-gray)} .qm-split-row{display:flex;justify-content:space-between;font-size:12px;padding:2px 0} /* Units-unknown callout. Deliberately prominent: the absence of a defect rate is a fact about the data, not an empty field to be overlooked. */ .qm-units{background:var(--cream);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:10px 13px;font-size:12px;line-height:1.5;color:var(--charcoal);margin-bottom:14px} .qm-quotes{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .qm-quote{margin:0;background:var(--white);border-left:3px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px} .qm-quote-t{display:block;font-size:12.5px;line-height:1.55;color:var(--charcoal)} .qm-quote cite{display:block;font-size:10.5px;color:var(--light-gray);font-style:normal;margin-top:4px} .qm-quote-photos{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap} .qm-quote-photo{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border)} .qm-priors{margin:0;padding-left:18px;font-size:12px;color:var(--charcoal)} .qm-dim{color:var(--light-gray);font-size:11.5px} @media (max-width:720px){ .qm-splits{flex-direction:column} .qm-matrix .qm-th-sku{min-width:120px} } /* Quality Monitoring — CAPA/QC status */ .qm-capa{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 13px;margin:10px 0} .qm-capa-badge{display:inline-block;padding:2px 9px;border-radius:10px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em} .qm-capa-badge-new_defect{background:var(--red-bg);color:var(--red)} .qm-capa-badge-capa_in_progress{background:var(--peach-light);color:var(--peach-dark)} .qm-capa-badge-defect_corrected_pending_stock{background:var(--cream);color:var(--green)} .qm-capa-badge-defect_reincidence{background:var(--red);color:#fff} .qm-capa select{font-family:'Figtree',sans-serif;font-size:12.5px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--white);color:var(--charcoal)} .qm-capa-other{width:100%;font-size:11.5px;color:var(--mid-gray)} .qm-capa-draft{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-top:12px} .qm-capa-draft h5{margin:10px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--mid-gray)} .qm-capa-qc{margin:0;padding-left:18px;font-size:12.5px;color:var(--charcoal);line-height:1.7} .qm-capa-qc b{color:var(--light-gray);font-weight:600} /* Quality Monitoring — report preview */ .qm-detail-actions{display:flex;gap:6px;flex-wrap:wrap} .qm-report-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 13px;margin:12px 0 0;font-size:12px} /* The report is a whole standalone document with its own