/* Hot Pepper List — scoped under .phl. Collapsible <details> rows; full content
   is server-rendered and only visually collapsed. */
.phl {
  --paper:#faf6f0; --card:#fff; --ink:#2a2320; --ink-soft:#6b615a; --line:#e7ddd2;
  --chili:#b3261e; --chili-deep:#8a1c16; --jal:#2f7d54;
  --serif:"Fraunces",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif;
  font-family:var(--sans); color:var(--ink);
}
.phl *,.phl *::before,.phl *::after{box-sizing:border-box;}

.phl-intro{margin:0 0 16px;padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:15px;line-height:1.55;}
.phl-intro li{margin:2px 0;}

.phl-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.phl-controls .phl-search{flex:1 1 200px;min-width:160px;font-family:var(--sans);font-size:15px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);}
.phl-controls select{font-family:var(--sans);font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);}
.phl-controls .phl-search:focus,.phl-controls select:focus{outline:2px solid var(--chili);outline-offset:1px;}
.phl-reset{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink-soft);background:none;border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;}
.phl-reset:hover{border-color:var(--chili);color:var(--chili);}
.phl-count{font-size:13px;color:var(--ink-soft);margin-left:auto;}

/* List + rows */
.phl-list{display:flex;flex-direction:column;gap:8px;}
.phl-item{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:11px;background:#fff;overflow:hidden;}
.phl-item.phl-mild{border-left-color:#9ccbb0;}
.phl-item.phl-medium{border-left-color:#e8c879;}
.phl-item.phl-hot{border-left-color:#e0a06a;}
.phl-item.phl-xhot{border-left-color:#d98a7e;}
.phl-item.phl-super{border-left-color:#7a1812;}

.phl-row{display:grid;grid-template-columns:84px 46px 1fr 18px;align-items:center;gap:12px;padding:9px 13px;cursor:pointer;list-style:none;}
.phl-row::-webkit-details-marker{display:none;}
.phl-row:hover{background:var(--paper);}
.phl-heat-cell{display:flex;}
.phl-img{display:flex;align-items:center;justify-content:center;}
.phl-img img{width:46px;height:36px;object-fit:cover;border-radius:6px;display:block;}
.phl-noimg{display:inline-flex;align-items:center;justify-content:center;width:46px;height:36px;background:var(--paper);border:1px dashed var(--line);border-radius:6px;font-size:19px;}

.phl-main{display:flex;align-items:center;gap:16px;min-width:0;}
.phl-name{flex:1;min-width:0;font-family:var(--serif);font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.phl-name a{color:var(--chili-deep);text-decoration:none;}
.phl-name a:hover{color:var(--chili);text-decoration:underline;}
.phl-metrics{display:flex;gap:14px;flex:none;flex-wrap:wrap;}
.phl-metric{display:flex;flex-direction:column;text-align:right;min-width:62px;}
.phl-k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.phl-v{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.phl-chev{justify-self:center;width:9px;height:9px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transition:transform .18s ease;}
.phl-item[open] .phl-chev{transform:rotate(225deg);}

/* Detail panel */
.phl-detail{padding:6px 15px 15px;border-top:1px solid var(--line);}
.phl-hero{display:flex;justify-content:center;margin:12px 0 2px;}
.phl-hero-img{width:100%;max-width:220px;height:auto;border-radius:12px;display:block;box-shadow:0 1px 5px rgba(42,35,32,.12);}
.phl-scale{margin:14px auto 10px;max-width:660px;text-align:center;}
.phl-scale-legend{display:flex;justify-content:center;gap:16px;font-size:11.5px;color:var(--ink-soft);margin-bottom:3px;}
.phl-scale-legend .lg::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle;}
.lg-pep::before{background:var(--chili);}
.lg-jal::before{background:var(--jal);}
.phl-scale-svg{width:100%;height:auto;display:block;}
.phl-scale-cap{font-size:11px;color:var(--ink-soft);margin:3px 0 0;text-align:center;}
.phl-axis{stroke:var(--line);stroke-width:1;}
.phl-tick{stroke:#cbbfb3;stroke-width:1;}
.phl-ticklab{fill:var(--ink-soft);font-family:var(--sans);font-size:8px;}
.phl-bar-jal{fill:var(--jal);stroke:#fff;stroke-width:1;}
.phl-bar-pep{fill:var(--chili);stroke:#fff;stroke-width:1;}
.phl-zone{fill-opacity:.16;}
.phl-zone-mild{fill:#2f7d54;}
.phl-zone-medium{fill:#c9a227;}
.phl-zone-hot{fill:#d2691e;}
.phl-zone-xhot{fill:#b3261e;}
.phl-zone-super{fill:#7a1812;}

.phl-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:10px 0 0;}
.phl-facts>div{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dotted var(--line);font-size:13.5px;}
.phl-facts dt{color:var(--ink-soft);margin:0;}
.phl-facts dd{margin:0;font-weight:600;text-align:right;}
.phl-facts>.phl-fact-median{display:none;}

.phl-radar{text-align:center;margin:16px 0 0;padding-top:14px;border-top:1px dotted var(--line);}
.phl-radar-title{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px;}
.phl-radar-svg{width:100%;max-width:260px;height:auto;display:block;margin:4px auto 0;}
.phl-radar-ring{fill:none;stroke:var(--line);stroke-width:1;}
.phl-radar-spoke{stroke:var(--line);stroke-width:1;}
.phl-radar-label{fill:var(--ink-soft);font-family:var(--sans);font-size:9px;}
.phl-radar-area{fill:rgba(179,38,30,.18);stroke:var(--chili);stroke-width:1.5;stroke-linejoin:round;}
.phl-radar-area-b{fill:rgba(90,79,207,.16);stroke:#5a4fcf;stroke-width:1.5;stroke-linejoin:round;}

/* Pepper B (comparison) */
.phl-bar-b{fill:#5a4fcf;stroke:#fff;stroke-width:1;}

/* Compare panel */
.phl-compare{border:1px solid var(--line);border-radius:11px;background:var(--paper);margin-bottom:14px;}
.phl-compare-toggle{cursor:pointer;list-style:none;font-family:var(--serif);font-weight:600;font-size:16px;padding:12px 15px;color:var(--chili-deep);}
.phl-compare-toggle::-webkit-details-marker{display:none;}
.phl-cmp-ico{color:var(--chili);font-weight:700;margin-right:4px;}
.phl-compare-body{padding:0 15px 16px;}
.phl-compare-pickers{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 14px;}
.phl-cmp-field{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;font-size:12px;font-weight:600;color:var(--ink-soft);}
.phl-cmp-field select{font-family:var(--sans);font-size:15px;font-weight:400;color:var(--ink);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;}
.phl-cmp-field select:focus{outline:2px solid var(--chili);outline-offset:1px;}
.phl-compare-hint{color:var(--ink-soft);font-size:14px;margin:4px 0;}

.phl-cmp-block{margin-bottom:10px;}
.phl-cmp-block .phl-scale-svg{max-width:660px;margin:0 auto;}
.phl-cmp-images{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0 18px;}
.phl-cmp-pep{flex:1 1 0;max-width:190px;text-align:center;}
.phl-cmp-imgwrap{display:flex;justify-content:center;}
.phl-cmp-img{width:100%;max-width:170px;height:118px;object-fit:cover;border-radius:12px;display:block;box-shadow:0 1px 5px rgba(42,35,32,.12);}
.phl-cmp-noimg{display:inline-flex;align-items:center;justify-content:center;width:170px;height:118px;background:var(--paper);border:1px dashed var(--line);border-radius:12px;font-size:46px;}
.phl-cmp-pepname{font-family:var(--serif);font-weight:600;font-size:15px;margin-top:8px;line-height:1.2;}
.phl-cmp-pep-pep .phl-cmp-pepname{color:var(--chili);}
.phl-cmp-pep-b .phl-cmp-pepname{color:#5a4fcf;}
.phl-cmp-vs{flex:0 0 auto;font-size:13px;font-style:italic;color:var(--ink-soft);}
.phl-cmp-radarblock{text-align:center;padding-top:8px;}
.phl-cmp-legend{display:flex;gap:16px;font-size:12px;color:var(--ink-soft);margin-bottom:4px;flex-wrap:wrap;}
.phl-cmp-legend-center{justify-content:center;}
.phl-cmp-legend .lg::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle;}
.lg-pep::before{background:var(--chili);}
.lg-b::before{background:#5a4fcf;}
.lg-jal::before{background:var(--jal);}

.phl-cmp-facts{margin-top:14px;border-top:1px solid var(--line);max-width:660px;margin-left:auto;margin-right:auto;}
.phl-cmp-frow{display:grid;grid-template-columns:140px 1fr 1fr;gap:10px;padding:7px 0;border-bottom:1px dotted var(--line);font-size:13.5px;align-items:baseline;}
.phl-cmp-frow span:nth-child(2),.phl-cmp-frow span:nth-child(3){font-weight:600;}
.phl-cmp-fhead{font-family:var(--serif);font-size:14px;border-bottom:1px solid var(--line);}
.phl-cmp-fhead span:nth-child(2){color:var(--chili);}
.phl-cmp-fhead span:nth-child(3){color:#5a4fcf;}
.phl-cmp-fk{color:var(--ink-soft);font-weight:400 !important;}

.phl-more{display:inline-block;margin-top:12px;font-weight:600;font-size:13.5px;color:var(--chili-deep);text-decoration:none;}
.phl-more:hover{text-decoration:underline;}
.phl-detail>.phl-more{display:block;text-align:center;}
.phl-cmp-links{display:grid;grid-template-columns:140px 1fr 1fr;gap:10px;margin:14px auto 0;max-width:660px;padding-top:12px;border-top:1px dotted var(--line);}
.phl-cmp-links .phl-more{margin-top:0;}

.phl-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap;}
.phl-badge.phl-mild{background:#eaf4ee;color:#2f7d54;}
.phl-badge.phl-medium{background:#fbf2dc;color:#9a6a00;}
.phl-badge.phl-hot{background:#fbe4d5;color:#b5631b;}
.phl-badge.phl-xhot{background:#fadfd9;color:#b3261e;}
.phl-badge.phl-super{background:#7a1812;color:#fff;}

.phl-empty{text-align:center;color:var(--ink-soft);padding:18px;}
.phl-empty .phl-reset{margin-left:8px;}

.phl-glossary{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
.phl-glossary h2{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 10px;}
.phl-glossary dt{font-weight:700;font-size:14px;margin-top:10px;}
.phl-glossary dd{margin:2px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.5;}

/* Narrow screens: keep the list tidy — heat + image left, name and the three
   metrics stacked in the body. */
@media (max-width:960px){
  .phl-row{grid-template-columns:64px 40px 1fr 16px;gap:9px;}
  .phl-img img,.phl-noimg{width:40px;height:32px;}.phl-hero-img{max-width:180px;}.phl-cmp-img,.phl-cmp-noimg{max-width:130px;width:130px;height:96px;}.phl-cmp-images{gap:10px;}
  .phl-badge{font-size:10px;padding:2px 6px;}
  .phl-main{flex-direction:column;align-items:stretch;gap:3px;}
  .phl-name{white-space:normal;}
  .phl-metrics{gap:14px;}
  .phl-metric{flex-direction:row;align-items:baseline;gap:5px;text-align:left;min-width:0;}
  .phl-k::after{content:":";}
  .phl-facts{grid-template-columns:1fr;}
  .phl-metric-median{display:none;}
  .phl-facts>.phl-fact-median{display:flex;}
  .phl-cmp-frow{grid-template-columns:88px 1fr 1fr;gap:8px;font-size:12.5px;}.phl-cmp-links{grid-template-columns:88px 1fr 1fr;gap:8px;}
}