/* Presets, run of show, Recent pushes (control surface) and Mission Control. */

/* presets panel */
.tl-prow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-prow select { flex: 1; min-width: 0; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14.5px; }
.tl-pacts { margin-top: 8px; gap: 6px; font-size: 12.5px; color: var(--mut); }
.tl-pacts .tl-rosbtn { margin-left: auto; }
.tl-link.tl-del { color: #FF6B62; }
.tl-phint { color: var(--mut); font-size: 12.5px; margin: 8px 0 0; line-height: 1.45; }

/* run of show dialog */
.tl-steps { list-style: none; margin: 12px 0; padding: 0; max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.tl-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); font-weight: 600; }
.tl-steps li.empty { color: var(--mut); font-weight: 500; justify-content: center; border-style: dashed; background: none; }
.tl-steps .n { width: 26px; color: var(--mut); font-family: var(--hh-head); font-weight: 800; }
.tl-steps .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-steps button { width: 30px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; }
.tl-steps button:disabled { opacity: .35; }
.tl-steps button.rm { color: #FF6B62; }

/* push bar: run of show stepper */
.tl-ros { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.tl-ros[hidden] { display: none; }
.tl-ros button { padding: 7px 10px; font-weight: 700; font-size: 13.5px; color: var(--text); }
.tl-ros button:hover:not(:disabled) { background: var(--panel2); }
.tl-ros button:disabled { opacity: .35; }
.tl-rosarr { color: var(--blue) !important; }
.tl-roslbl { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; }

/* push bar: recent pushes */
.tl-recent { position: relative; }
.tl-recent summary { list-style: none; }
.tl-recent summary::-webkit-details-marker { display: none; }
.tl-recentmenu { right: 0; left: auto; top: auto; bottom: calc(100% + 8px); width: 320px; }
.tl-recenth { font-family: var(--hh-head); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--mut); padding: 4px 6px 8px; }
.tl-recentf { padding: 6px; margin: 4px 0 0; border-top: 1px solid var(--line); }
.tl-hist { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.tl-hist li { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; font-size: 13.5px; }
.tl-hist li.now { background: var(--panel2); }
.tl-hist .t { color: var(--mut); font-variant-numeric: tabular-nums; width: 88px; flex: none; }
.tl-hist .w { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tl-hist .on { color: var(--live); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* Mission Control */
.tl-mc { max-width: 1680px; }
.tl-mcbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.tl-mcbar .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tl-mcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.tl-mcgrid.big { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }
.tl-mccard .tl-thumb { display: block; }
.tl-mccard .meta { flex-direction: column; gap: 10px; }
.tl-mchead { display: flex; align-items: center; gap: 8px; width: 100%; }
.tl-mchead .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-air { width: 10px; height: 10px; border-radius: 50%; background: #3A4658; flex: none; }
.tl-air.on { background: var(--live); animation: hh-pulse 1.4s infinite; }
.tl-mcels { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.tl-mcel { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 13px; user-select: none; }
.tl-mcel input { position: absolute; opacity: 0; pointer-events: none; }
.tl-mcel .tl-tog { width: 28px; height: 16px; }
.tl-mcel .tl-tog::after { width: 10px; height: 10px; }
.tl-mcel:has(input:checked) { border-color: #FF3B3066; background: #FF3B3012; }
.tl-mcel:has(input:checked) .tl-tog { background: var(--live); }
.tl-mcel:has(input:checked) .tl-tog::after { transform: translateX(12px); }
.tl-mcel:has(input:focus-visible) { outline: 2px solid var(--blue); }
.tl-mcel:has(input:disabled) { cursor: default; opacity: .7; }
.tl-mcfoot { display: flex; gap: 8px; align-items: center; width: 100%; }
.tl-mcfoot .hh-btn { margin-left: auto; }
.tl-mcstaged[hidden] { display: none; }
.tl-mccard.staged { border-color: #FFB02066; }
.tl-mcnone { color: var(--mut); font-size: 13px; }

@media (max-width: 640px) {
    .tl-mcgrid, .tl-mcgrid.big { grid-template-columns: minmax(0, 1fr); }
    .tl-recentmenu { width: min(320px, calc(100vw - 32px)); }
}