/* Trial Lab (screens/trial-lab.js), its Packs header button, and the Trending
   Today bonus row (screens/trending.js). Tokens live in tokens.css; buttons
   reuse .pp-actions from lines.css. */

.shelf-tools { display: flex; align-items: center; gap: 10px; }
.tl-open {
  min-height: var(--tap); padding: 0 14px; border: 1px solid var(--seam); border-radius: 12px; background: var(--boards);
  color: var(--ice); font: 800 15px var(--font-display); letter-spacing: .02em; cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.tl-open:active { transform: scale(var(--press)); border-color: var(--frost); }
.tl-open:focus-visible, .tl-close:focus-visible, .tl-save:focus-visible, .tl-crown:focus-visible, .tl-field input:focus-visible,
.trend-posted:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tl-back {
  position: fixed; inset: 0; z-index: 25; overflow-y: auto; background: rgba(3,8,20,.9);
  padding: calc(var(--safe-top) + 14px) 16px calc(var(--safe-bottom) + 16px);
  opacity: 0; transition: opacity 200ms var(--ease-out);
}
.tl-back.on { opacity: 1; }
.tl {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 398px; margin: 0 auto;
  padding: 18px 14px 16px; border: 1px solid var(--seam); border-radius: 18px; background: var(--boards);
  transform: translateY(12px); transition: transform 240ms var(--ease-out);
}
.tl-back.on .tl { transform: none; }
.tl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tl-title { margin: 0; font: 900 30px/1 var(--font-display); }
.tl-title:focus { outline: none; }
.tl-close {
  min-height: var(--tap); padding: 0 14px; border: 1px solid var(--seam); border-radius: 12px; background: var(--boards-2);
  color: var(--ice); font: 700 14px var(--font-body); cursor: pointer; transition: transform 160ms var(--ease-out);
}
.tl-close:active { transform: scale(var(--press)); }
.tl-sub { margin: 0; color: var(--frost); font-size: 13.5px; }
.tl-status { margin: 0; padding: 18px 12px; border: 1px dashed var(--seam); border-radius: 12px; color: var(--frost); font-size: 15px; text-align: center; }
.tl-status[hidden] { display: none; }
.tl-list { display: flex; flex-direction: column; gap: 14px; }

.tl-series { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--seam); border-radius: 14px; background: var(--boards-2); }
.tl-series-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tl-series-name { margin: 0; font: 800 20px/1.1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
.tl-brand { color: var(--frost); font-size: 12px; text-align: right; }
.tl-idea { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.tl-next {
  margin: 0; padding: 9px 11px; border-radius: 10px; background: rgba(92,255,122,.1); color: var(--chem);
  box-shadow: inset 0 0 0 1px rgba(92,255,122,.35); font-size: 14px; font-weight: 700; overflow-wrap: anywhere;
}
.tl-next[hidden] { display: none; }
.tl-msg { margin: 0; color: #ffb3bb; font-size: 12.5px; }
.tl-msg:empty, .tl-msg[hidden] { display: none; }

.tl-variant { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border: 1px solid var(--seam); border-radius: 12px; background: var(--boards); }
.tl-variant.won { border-color: var(--chem); box-shadow: 0 0 0 1px var(--chem), 0 0 14px rgba(92,255,122,.3); }
.tl-vhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-vnum { color: var(--coin); font: 800 12.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.tl-win { padding: 2px 7px; border-radius: 5px; background: rgba(92,255,122,.14); color: var(--chem); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tl-win[hidden] { display: none; }
.tl-hook { margin: 0; font: 800 18px/1.2 var(--font-display); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.tl-bullets { margin: 0; padding-left: 18px; color: var(--ice); font-size: 14px; line-height: 1.45; user-select: text; -webkit-user-select: text; }
.tl-bullets li + li { margin-top: 3px; }
.tl-bullets li { overflow-wrap: anywhere; }

.tl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.tl-field { display: flex; flex-direction: column; gap: 4px; color: var(--frost); font-size: 12px; font-weight: 600; }
.tl-field input {
  width: 100%; min-height: var(--tap); padding: 0 10px; border: 1px solid var(--seam); border-radius: 10px;
  background: var(--rink); color: var(--ice); font: 600 16px var(--font-body); font-variant-numeric: tabular-nums;
}
.tl-save, .tl-crown {
  min-height: var(--tap); padding: 0 12px; border-radius: 12px; font: 700 14px var(--font-body); cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.tl-save { grid-column: 1 / -1; border: 1px solid var(--seam); background: var(--ice); color: var(--rink); }
.tl-crown { border: 1px solid var(--gold); background: none; color: var(--gold); }
.tl-crown[aria-pressed="true"] { border-color: var(--seam); color: var(--frost); }
.tl-save:active, .tl-crown:active { transform: scale(var(--press)); }
.tl-save:disabled, .tl-crown:disabled { opacity: .4; cursor: default; transform: none; }
.tl-variant .pp-actions button { min-height: var(--tap); font-size: 14px; }

/* ----------------------------------------------------- Trending Today */
.trend-bonus { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.trend-bonus[hidden] { display: none; }
.trend-h { margin: 0; font: 800 18px var(--font-display); letter-spacing: .02em; }
.trend-card {
  display: flex; flex-direction: column; gap: 9px; padding: 12px 13px; border: 1px solid rgba(255,51,71,.5); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,51,71,.12), rgba(255,51,71,0) 45%), var(--boards);
  box-shadow: 0 0 16px rgba(255,51,71,.15);
}
.trend-card.done { border-color: var(--seam); box-shadow: none; }
.trend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trend-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px;
  background: rgba(255,51,71,.16); color: var(--goal); box-shadow: inset 0 0 0 1px rgba(255,51,71,.55);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.trend-badge svg { width: 14px; height: 14px; }
.trend-left { color: var(--ice); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trend-title { display: flex; align-items: center; gap: 10px; }
.trend-ovr { font: 900 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.trend-nick { font: 800 18px/1.15 var(--font-display); overflow-wrap: anywhere; }
.trend-version { display: flex; flex-direction: column; gap: 6px; padding-top: 9px; border-top: 1px solid var(--seam); }
.trend-version > b { font: 800 14px var(--font-display); letter-spacing: .02em; }
.trend-bonus .pp-actions button { min-height: var(--tap); }

@media (prefers-reduced-motion: reduce) {
  .tl-back .tl { transform: none; }
}