/* Review cards as YouTube-sized tiles; an opened card is a panel over the page (js/review-tiles.js). */
#reel{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 14px}
.short:not(.open){background:transparent;border:0;padding:0;gap:6px;border-radius:0}
.short:not(.open) .phone{border-radius:12px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.short:not(.open):not(.pending) .phone:hover{transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(0,0,0,.55)}
.short:not(.open) .phone video{display:none}
.short:not(.open) .phone img{display:block}
.short:not(.open) :is(.toggle,.looks,.meta,.tfield,.hookbox,.why,.links,.redo,.ytinfo,.tile-x){display:none}
.short:not(.open) .row{border-top:0;padding-top:0;font-size:.82rem}
.short:not(.open) .keep input{width:15px;height:15px}
.tile-cap{cursor:pointer;min-width:0}
.tile-title{font-weight:600;font-size:.92rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-meta{font-size:.8rem;color:var(--muted);margin-top:2px}
.short.addcard:not(.open){border:1.5px dashed var(--line-2);border-radius:12px;padding:0}
.short.addcard:not(.open) .phone{aspect-ratio:9/16}

/* the opened card */
.tile-shade{position:fixed;inset:0;background:rgba(8,10,18,.62);backdrop-filter:blur(2px);z-index:50}
.tile-shade[hidden]{display:none}
body.tile-open{overflow:hidden}
.short.open{position:fixed;z-index:51;top:50%;left:50%;transform:translate(-50%,-50%);width:min(860px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);overflow:auto;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:0 22px;align-content:start;padding:52px 18px 18px;border-radius:20px;box-shadow:0 24px 60px -12px rgba(0,0,0,.6)}
.short.open > *{grid-column:2;margin-bottom:12px}
.short.open > .phone{grid-column:1;grid-row:1 / span 40;align-self:start;margin-bottom:0}
.short.open .tile-cap{display:none}
.short.open .tile-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:2}
.short.open .tile-x .ms{font-size:20px}
.short.open > .tile-x{margin:0}
.short.addcard.open{grid-template-columns:minmax(0,1fr);width:min(520px,calc(100vw - 32px))}
.short.addcard.open > *{grid-column:1}
.short.addcard.open > .phone{display:none}
@media (max-width:640px){
  .short.open{grid-template-columns:minmax(0,1fr)}
  .short.open > *, .short.open > .phone{grid-column:1;grid-row:auto}
  .short.open > .phone{margin-bottom:12px}
  .short.open > .phone{max-width:260px;justify-self:center;width:100%}
}
/* a tile's error stays readable above the bottom bar */
.short:not(.open) .rerr{font-size:.78rem;line-height:1.35}
#reel{padding-bottom:120px}