.mp { position:relative; }

.mp-btn { display:flex; align-items:center; gap:var(--s3); min-width:280px;
          background:var(--bg1); border:var(--bd) solid var(--line2); color:var(--text);
          padding:var(--s2) var(--s3); cursor:pointer; text-align:left; box-shadow:var(--shadow);
          transition:border-color var(--t-fast), background var(--t-fast),
                     box-shadow var(--t-fast), transform var(--t-fast); }
.mp-btn:hover { border-color:var(--text); box-shadow:var(--shadow-lift); }
@media (pointer:coarse) { .mp-btn { min-height:44px; } }

.heat { display:flex; flex-direction:column; justify-content:space-evenly; min-width:0;
        width:300px; align-self:stretch; padding:var(--s1) var(--s3);
        background:var(--bg1); border:var(--bd) solid var(--line2); box-shadow:var(--shadow);
        font:var(--fs-micro)/1.2 var(--mono); color:var(--muted); }
.heat > * { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.heat-bar { --row:12px; display:flex; align-items:center; gap:var(--s2); }
.heat-bar .micro { line-height:1; }
.heat-bar .meter { flex:1; margin:0; height:var(--row); }

.heat-pct, .heat-rate { flex:none; display:flex; align-items:center; justify-content:center;
                        height:var(--row); padding:0 4px; line-height:1; background:var(--bg2);
                        border:1px solid var(--line2); font-variant-numeric:tabular-nums; }
.heat-pct { width:calc(7ch + 10px); color:var(--text); font-weight:700; }
.heat-rate { width:calc(10ch + 10px); color:var(--blue); }
.heat.is-cool .heat-down { visibility:hidden; }
.heat.is-cool .heat-rate { color:transparent; }

.heat-down { display:inline-flex; justify-content:center; width:1ch; flex:none;
             color:var(--blue); font:700 var(--fs-micro)/1 var(--mono);
             text-shadow:0 0 6px rgba(var(--blue-rgb),.8); }
.heat-down i { font-style:normal; animation:heatFall 3s ease-in infinite; }
@keyframes heatFall { 0%, 60%, 100% { opacity:1; transform:none; }
                      75% { opacity:0; transform:translateY(5px); }
                      76% { opacity:0; transform:translateY(-5px); } }
.heat-plan { display:flex; align-items:center; gap:var(--s2); }
.heat-days { color:var(--text); }
.mp-btn:active { transform:translateY(1px); }
.mp-btn .mp-caret { margin-left:auto; color:var(--faint); font-size:10px;
                    transition:transform var(--t) var(--ease-out), color var(--t-fast); }
.mp-btn[aria-expanded=true] .mp-caret { transform:rotate(180deg); color:var(--text); }
.mp-name { display:block; font:600 var(--fs-ui)/1.3 var(--ui); }

.mp-btn .mp-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-sub { display:block; font:var(--fs-micro)/1.35 var(--mono); color:var(--muted);
          margin-top:2px; }

.mp-list { position:absolute; z-index:var(--z-pop); top:calc(100% + 4px); left:0;
           width:min(640px,90vw); max-height:60vh; overflow:hidden auto;
           padding:0 8px 8px 0;  
           display:grid; grid-template-columns:190px minmax(0,1fr); gap:0;
           
           grid-template-rows:repeat(var(--rows, 1), auto) 1fr;
           animation:mpIn var(--t) var(--ease-out); }
.mp-list.closing { animation:mpOut var(--t-fast) ease-in forwards; pointer-events:none; }

.mp-list.flip { left:auto; right:0; grid-template-columns:minmax(0,1fr) 190px;
                padding:0 0 8px 8px; }
.mp-pubs, .mp-panes { display:contents; }
.mp-pub { grid-column:1; grid-row:var(--row); align-self:start; }
.mp-list.flip .mp-pub { grid-column:2; }
.mp-pane { grid-column:2; grid-row:var(--row) / -1; align-self:start;
           display:flex; flex-direction:column; gap:var(--s2); padding:var(--s2);
           background:var(--bg2); border:var(--bd) solid var(--line2); border-left:0;
           box-shadow:var(--shadow); animation:mpFade var(--t) var(--ease-out); }
.mp-list.flip .mp-pane { grid-column:1; border-left:var(--bd) solid var(--line2);
                         border-right:0; box-shadow:var(--shadow-left); }
.mp-pub { display:grid; grid-template-columns:16px 1fr auto; align-items:center;
          column-gap:var(--s3); width:100%; background:var(--bg1);
          border:var(--bd) solid var(--line2); border-bottom-width:0; color:var(--text);
          padding:var(--s2) var(--s3); cursor:pointer; text-align:left;
          transition:background var(--t-fast), border-color var(--t-fast),
                     color var(--t-fast); }
.mp-pubs .mp-pub:last-child { border-bottom-width:var(--bd); }

.mp-pub::after { content:"›"; grid-column:3; align-self:center;
                 color:var(--faint); font:700 var(--fs-lg)/1 var(--mono);
                 transition:color var(--t-fast), transform var(--t) var(--ease-out); }

.mp-pub[aria-selected=true] { background:var(--bg2); border-right-color:transparent; }
.mp-list.flip .mp-pub[aria-selected=true] { border-right-color:var(--line2);
                                            border-left-color:transparent; }
.mp-pub[aria-selected=true]::after { color:var(--text); transform:translateX(3px); }

@media (hover:hover) { .mp-pub:hover { background:var(--bg2); }
                       .mp-pub:hover::after { color:var(--text); } }

.mp-pub-name { font:600 var(--fs-ui)/1.3 var(--ui); transform:translateY(1px); }
.mp-pub-name .n { font:var(--fs-micro) var(--mono); color:var(--faint); margin-left:var(--s1); }
.mp .logo { width:16px; height:16px; flex:none; color:var(--muted);
            transition:color var(--t-fast); }
.mp-pub[aria-selected=true] .logo, .mp-pub:hover .logo, .mp-btn:hover .logo { color:var(--text); }

.mp-btn > span { min-width:0; }
.mp-foot { grid-column:1; grid-row:var(--row); align-self:start; display:flex;
           align-items:center; gap:var(--s2); margin:0; padding:var(--s2) var(--s3);
           background:var(--bg1);
           border:var(--bd) solid var(--line2); border-top:0; }
.mp-list.flip .mp-foot { grid-column:2; }
.mp-foot::before { content:""; width:6px; height:6px; background:var(--acc); flex:none; }
.mp-opt { display:flex; align-items:flex-start; gap:var(--s3); width:100%;
          background:var(--bg1); border:1px solid var(--line2); color:var(--text);
          padding:var(--s3) var(--s4); cursor:pointer; text-align:left;
          transition:background var(--t-fast), border-color var(--t-fast); }

.mp-opt:hover:not([disabled]) { background:var(--bg3); border-color:var(--text); }
.mp-opt[aria-selected=true], .mp-opt.rec[aria-selected=true] { border-color:var(--text); }
.mp-opt[aria-selected=true] .mp-name::after { content:"✓"; margin-left:var(--s2);
                                              font:700 var(--fs-ui)/1 var(--mono); }
.mp-opt[disabled] { cursor:default; opacity:.55; border-color:var(--line); }
.mp-opt .meta { margin-left:auto; text-align:right; flex:none;
                font:var(--fs-micro)/1.5 var(--mono); color:var(--faint); }
.mp-opt .meta .list { margin-left:var(--s1); }
.mp-opt .meta .pct { margin:0 0 var(--s2) auto; }

.mp-tag { display:inline-block; font:700 9px/1 var(--mono); letter-spacing:.1em;
          text-transform:uppercase; padding:3px 5px; margin-left:var(--s2);
          vertical-align:1px; border:1px solid var(--line2); color:var(--muted); }
.mp-tag.soon { color:var(--yellow); border-color:rgba(var(--yellow-rgb),.4); }

.mp-tag.off-plan { color:var(--orange); border-color:rgba(var(--orange-rgb),.5);
                   background:rgba(var(--orange-rgb),.1); }

.mp-tag.unc { color:var(--uncensored); border-color:rgba(var(--uncensored-rgb),.5);
              background:rgba(var(--uncensored-rgb),.1); }

.mp-tag.beta { color:var(--blue); border-color:rgba(var(--blue-rgb),.5);
               background:rgba(var(--blue-rgb),.1); }


.mp-pane.unc { --acc:var(--uncensored); --acc-rgb:var(--uncensored-rgb); }
.mp-pane.unc .mp-opt { position:relative; overflow:hidden;
                       box-shadow:inset 0 0 0 1px rgba(var(--uncensored-rgb),.28),
                                  0 0 18px -8px rgba(var(--uncensored-rgb),.5); }

.mp-pane.unc .mp-opt::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 34%, rgba(var(--uncensored-rgb),.13) 50%,
                             transparent 66%) no-repeat;
  background-size:220% 100%; animation:flairSheen 3.6s linear infinite; }
.mp-pub.unc[aria-selected=true] { box-shadow:inset 2px 0 0 var(--uncensored); }

@keyframes mpIn   { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes mpInUp { from { opacity:0; clip-path:inset(16px 0 0 0); } to { opacity:1; clip-path:inset(0); } }
@keyframes mpOut  { to { opacity:0; transform:translateY(-4px); } }
@keyframes mpFade { from { opacity:0; } to { opacity:1; } }


.mp-opt.rec { border-color:var(--acc); }
@media (max-width:720px) {
  .mp-btn { min-width:0; }
  
  .heat { width:auto; flex:1; }
  .heat-rate, .heat-plan { display:none; }
  
  .mp-btn .mp-sub { display:none; }
  
  .mp-list { position:fixed; inset:auto 0 0 0; top:auto; width:auto; max-height:70dvh;
             grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto; gap:0;
             padding:0; background:var(--bg1); border-top:var(--bd) solid var(--line2);
             animation-name:mpInUp; }
  .mp-list.closing { animation-name:mpFade; animation-direction:reverse; }
  .mp-pubs { display:flex; overflow-x:auto; border-bottom:1px solid var(--line); }
  .mp-panes { display:block; overflow:auto; }
  .mp-pub, .mp-pane, .mp-foot { grid-row:auto; grid-column:auto; }
  
  .mp-pub { flex:none; width:auto; min-height:44px; grid-template-columns:16px auto;
            margin:0; border:0; border-top:2px solid transparent;
            border-right:1px solid var(--line); }
  .mp-pub::after { content:none; }
  .mp-pub[aria-selected=true] { border-top-color:var(--text); }
  .mp-pane { padding:var(--s3); background:none; border:0; box-shadow:none; }
  .mp-opt { background:var(--bg2); }
  .mp-foot { background:none; border:0; border-top:1px solid var(--line);
             padding:var(--s2) var(--s4); }
}