/*
 * ps_reviews.css
 * DIY Solar Pirate -- Power Station Brand Review pages
 * Page-specific styles for power_station_review_<brand>.html
 *
 * Loaded via PAGE_CSS_LINK in publish_power_station_review_pages.pl
 * Site chrome (header, nav, footer, :root base tokens) is in dsp_site.css
 */

:root {
  /* Color extensions and page-specific tokens -- supplement dsp_site.css :root */
  --surface:    #ffffff;
  --surface2:   #f0f4f8;
  --border:     #b8cedd;
  --border-lt:  #d4e7f5;
  --amber:      #b86215;
  --amber-bg:   #fef0e0;
  --amber-bdr:  #f5c89a;
  --green-bg:   #e0f2ea;
  --green-bdr:  #9dd4b8;
  --red:        #c0392b;
  --red-bg:     #fdecea;
  --red-bdr:    #f5a9a3;
  --blue-bg:    #daedf8;
  --blue-bdr:   #8ec4e0;
  --blue-dk:    #144f7a;
  --teal:       #0e7490;
  --teal-bg:    #d4eff5;
  --teal-bdr:   #7ecfe0;
  --navy-bg:    #dce8f0;
  --navy-bdr:   #8aaabb;
  --muted-lt:   #8aaabb;
  --radius:     10px;
  --shadow:     0 1px 4px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
}

.page{max-width:1080px;margin:0 auto;padding:0 24px 48px;}

/* BRAND NAV */
.brand-nav{margin:20px 0 20px;}
.brand-nav-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.brand-nav-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.bnc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 12px;text-align:center;box-shadow:var(--shadow);transition:all .18s;cursor:pointer;text-decoration:none;display:block;}
.bnc:hover{box-shadow:var(--shadow-md);border-color:var(--navy-bdr);background:var(--navy-bg);transform:translateY(-2px);text-decoration:none;}
.bnc-current{background:var(--amber-bg);border-color:var(--amber-bdr);cursor:default;}
.bnc-current:hover{transform:none;box-shadow:var(--shadow);}
.bnc-name{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--text);line-height:1;margin-bottom:5px;}
.bnc-current .bnc-name{color:var(--amber);}
.bnc-series{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:.04em;margin-bottom:8px;line-height:1.4;}
.bnc-arrow{font-family:var(--font-mono);font-size:11px;color:var(--blue);}
.bnc-here{font-family:var(--font-mono);font-size:10.5px;color:var(--amber);}
.bnc:hover .bnc-name{color:var(--navy);}
.bnc:hover .bnc-arrow{color:var(--navy);}

/* BRAND HERO */
.brand-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:0 0 24px;padding:36px 36px 32px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.brand-eyebrow{font-family:var(--font-mono);font-size:10.5px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;}
h1.brand-name{font-family:var(--font-head);font-size:44px;font-weight:800;color:var(--text);line-height:1.05;margin-bottom:6px;}
h1.brand-name a{color:var(--text);}
h1.brand-name a:hover{color:var(--blue);}
.website-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;color:var(--blue);border:1px solid var(--blue-bdr);background:var(--blue-bg);padding:3px 10px;border-radius:20px;margin-bottom:14px;transition:all .15s;}
.website-pill:hover{background:var(--blue);color:#fff;border-color:var(--blue);text-decoration:none;}
.brand-tagline{font-size:14.5px;color:var(--body);max-width:700px;line-height:1.7;}

section{margin-bottom:40px;}
h2.section-title{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--text);margin-bottom:16px;padding-bottom:12px;border-bottom:3px solid var(--gold);display:flex;align-items:center;gap:10px;}
h2.section-title .accent{display:inline-block;width:4px;height:20px;background:var(--gold);border-radius:2px;}
h3.sub-title{font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px;}

/* META GRID: warrant/reputation swapped */
.meta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;}
.meta-cell{background:var(--surface);padding:11px 14px;}
.meta-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;}
.meta-value{font-size:13.5px;font-weight:500;color:var(--body);}
.meta-value.good{color:var(--green);}
.meta-value.gold{color:var(--gold);}
.meta-value a{color:var(--blue);}
.meta-notes{font-size:13px;color:var(--muted);line-height:1.65;margin-top:4px;}

.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.data-table th{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface2);}
.data-table td{padding:9px 14px;border-bottom:1px solid var(--border-lt);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:#fafbfd;}
.td-mono{font-family:var(--font-mono);}
.td-hi{color:var(--green);}
.td-na{color:var(--muted);font-style:italic;}

.toc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;margin-bottom:24px;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
.toc-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px;}
.toc-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:12px;font-weight:500;padding:5px 14px;border-radius:20px;border:1px solid;transition:all .15s;text-decoration:none;}
.toc-link:hover{opacity:.85;text-decoration:none;}
.toc-count{font-size:11px;opacity:.8;}
.toc-ps  {background:#1E6BA1;color:#fff;border-color:#1E6BA1;}
.toc-batt{background:#1a6b3a;color:#fff;border-color:#1a6b3a;}
.toc-solar{background:#b86215;color:#fff;border-color:#b86215;}
.toc-acc {background:#0e6b7a;color:#fff;border-color:#0e6b7a;}

/* BADGES: two colors only */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;font-weight:500;padding:3px 9px;border-radius:4px;border:1px solid;white-space:nowrap;position:relative;cursor:default;}
.badge-sm{font-size:10.5px;padding:2px 7px;}
/* Lifestyle: Royal Blue */
.badge-life{background:#daedf8;color:#144f7a;border-color:#8ec4e0;}
/* Performance: Amber */
.badge-perf{background:#fef0e0;color:#b86215;border-color:#f5c89a;}
/* Series badge: neutral */
.badge-series{background:#f3f4f6;color:#374151;border-color:#d1d5db;}

/* badges inside dark card headers */
.card-header .badge-life{background:rgba(255,255,255,.15);color:#d4e9f7;border-color:rgba(255,255,255,.25);}
.card-header .badge-perf{background:rgba(255,255,255,.15);color:#ffd89b;border-color:rgba(255,255,255,.2);}
.card-header .badge-series{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.2);}

/* PRODUCT CARDS */
.product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:40px;box-shadow:var(--shadow);}
.product-card-batt{border-left:3px solid var(--green);}
.product-card-solar{border-left:3px solid var(--gold);}
.product-card-acc{border-left:3px solid var(--teal);}

.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 20px 13px;border-bottom:1px solid rgba(255,255,255,.12);background:#1e4a6e;border-radius:var(--radius) var(--radius) 0 0;}
/* universal dark-header text treatment */
.card-header .card-brand-line{color:rgba(255,255,255,.55);}
.card-header .card-model a{color:#ffffff;}
.card-header .card-model a:hover{color:#ffd89b;text-decoration:none;}
.card-header .card-subtitle{color:rgba(255,255,255,.60);}
.card-header .card-price-na{color:rgba(255,255,255,.55);}
/* card price: warm cream on all dark headers */
.card-price{font-family:var(--font-head);font-size:26px;font-weight:700;color:#ffd89b;line-height:1;display:block;margin-bottom:14px;}
.card-price:hover{color:#fff;text-decoration:none;}
/* price pills: semi-transparent on dark bg */
.price-pill{background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.3);color:#fff;font-family:var(--font-body);font-size:12px;font-weight:500;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:baseline;gap:2px;}
.price-pill-unit{font-size:10px;opacity:.7;font-weight:400;}
/* per-category header colors */
.product-card-batt .card-header{background:#1a5248;}
.product-card-solar .card-header{background:#6b4423;}
.product-card-acc .card-header{background:#2a3a6e;}
/* remove old left-border indicators — header color IS the differentiator */
.product-card-batt,.product-card-solar,.product-card-acc{border-left:none;}
.card-header-main{flex:1;min-width:0;}
.card-header-top{display:flex;align-items:flex-start;gap:14px;}
.card-img{width:88px;height:78px;object-fit:contain;border-radius:6px;flex-shrink:0;background:#ffffff;padding:4px;box-shadow:0 1px 4px rgba(0,0,0,.15);display:block;}
.card-title-wrap{flex:1;min-width:0;}
.card-brand-line{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.card-model{font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--text);margin-bottom:5px;line-height:1.2;}
.card-model a{color:var(--text);}
.card-model a:hover{color:var(--blue);}
.card-subtitle{font-size:12.5px;color:var(--muted);margin:3px 0 5px;line-height:1.4;}
.card-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}

.card-price-block{flex-shrink:0;text-align:right;white-space:nowrap;min-width:120px;}
.card-price-na{font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.55);}
.card-price-sub{display:flex;justify-content:flex-end;gap:5px;margin-top:0;flex-wrap:wrap;}

.card-body{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border-lt);}
.card-specs{padding:13px 20px;}
.card-specs-right{border-left:1px solid var(--border-lt);}

/* SPEC ROWS */
.spec-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border-lt);gap:8px;}
.spec-row:last-child{border-bottom:none;}
.spec-row-compat{align-items:flex-start;flex-wrap:wrap;}
.spec-key{font-size:13px;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.spec-val{font-family:var(--font-mono);font-size:13px;color:var(--body);text-align:right;}
.spec-val.hi{color:var(--green);}
.spec-val.bold{font-weight:500;}
.spec-val.mid{color:var(--gold);}
.spec-val.lo{color:var(--red);}
.spec-val.na{color:var(--muted-lt);font-style:italic;font-family:var(--font-body);font-size:12.5px;}
.spec-peak{font-size:12px;color:var(--muted);font-family:var(--font-body);}
.idle-note{font-size:12px;color:var(--muted);font-family:var(--font-body);}
.batt-incl{font-size:11.5px;color:var(--muted);font-family:var(--font-body);font-weight:400;}

/* MPPT sub-rows: indented to read as sub-section */
.mppt-sub{display:flex;gap:8px;padding:3px 0 3px 16px;border-bottom:1px solid var(--border-lt);font-family:var(--font-mono);font-size:12px;align-items:center;color:var(--muted);}
.mppt-sub:last-child{border-bottom:none;}
.mppt-hivolt{background:var(--amber-bg);}
.mppt-highpv{background:var(--green-bg);}
.mppt-range{min-width:72px;font-weight:500;color:var(--body);}
.mppt-amp{min-width:34px;}
.mppt-watt{min-width:42px;}
.mppt-conn{font-size:11px;flex:1;}
.mppt-val-hi{color:var(--green);font-weight:500;}

.portability-row{display:inline-flex;align-items:center;gap:5px;}
.pdot{width:13px;height:13px;border-radius:50%;border:2px solid #374151;display:inline-block;flex-shrink:0;}
.pdot-on{background:var(--green);border-color:var(--green);}
.pdot-off{background:#fff;border-color:#6b7280;}
.portability-wt{font-family:var(--font-mono);font-size:13px;color:var(--body);margin-left:4px;}

.pill-wrap{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;}
.batt-pill{display:inline-block;font-family:var(--font-mono);font-size:11.5px;background:var(--green-bg);color:var(--green);border:1px solid var(--green-bdr);padding:2px 8px;border-radius:4px;}
.batt-pill:hover{background:var(--green);color:#fff;text-decoration:none;}
.acc-pill{display:inline-block;font-family:var(--font-mono);font-size:11.5px;background:var(--surface2);color:var(--body);border:1px solid var(--border);padding:2px 8px;border-radius:4px;}
.acc-pill:hover{background:var(--navy);color:#fff;border-color:var(--navy);text-decoration:none;}

.acc-row{padding:9px 20px;border-top:1px solid var(--border-lt);background:#fafbfe;display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px;}
.acc-label{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;flex-shrink:0;margin-top:3px;}

.card-footer{border-top:1px solid var(--border-lt);}
.card-docs{padding:9px 20px;display:flex;flex-wrap:wrap;gap:7px;border-bottom:1px solid var(--border-lt);}
.doc-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:12px;color:var(--blue-dk);background:var(--blue-bg);border:1px solid var(--blue-bdr);padding:3px 9px;border-radius:4px;transition:all .15s;}
.doc-link:hover{background:var(--blue);color:#fff;text-decoration:none;}
.card-notes-wrap{padding:14px 24px;background:var(--surface);border-top:1px solid var(--border-lt);}
.card-notes{display:block;background:#fefce8;border:1px solid #e9d97a;border-radius:6px;padding:12px 16px;font-size:13px;color:#5c4a00;line-height:1.6;margin:0 auto;}
.card-notes strong{color:#7a5c00;font-weight:600;}
.card-issues-wrap{padding:14px 24px;background:var(--surface);border-top:1px solid var(--border-lt);}
.card-issues{display:block;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;padding:12px 16px;font-size:13px;color:#7f1d1d;line-height:1.6;margin:0 auto;}
.card-synopsis{padding:11px 20px;border-top:1px solid var(--border-lt);}
.synopsis-label{font-family:var(--font-mono);font-size:10.5px;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;}
.synopsis-text{font-size:13.5px;color:var(--body);line-height:1.65;font-style:italic;}
.card-reviews{padding:10px 20px;border-top:1px solid var(--border-lt);background:var(--surface2);display:flex;flex-direction:column;gap:6px;border-radius:0 0 var(--radius) var(--radius);}
.review-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.review-label{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;min-width:55px;}
.review-links{display:flex;flex-wrap:wrap;gap:5px;}
.rlink{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:12px;padding:3px 9px;border-radius:4px;border:1px solid;transition:all .15s;text-decoration:none;}
.rlink-text{color:var(--blue);background:var(--blue-bg);border-color:var(--blue-bdr);}
.rlink-text:hover{background:var(--blue);color:#fff;}
.rlink-vid{color:var(--navy);background:var(--navy-bg);border-color:var(--navy-bdr);}
.rlink-vid:hover{background:var(--navy);color:#fff;}
.vid-num{font-size:12px;font-weight:600;}

@media(max-width:720px){
  .page{padding:0 14px 48px;}
  .brand-nav-grid{grid-template-columns:repeat(3,1fr);}
  .card-body{grid-template-columns:1fr;}
  .card-specs-right{border-left:none;border-top:1px solid var(--border-lt);}
}