/* HIT HOOT tools — additions to the HIT HOOT design system (hh.css). */

.tl-logo { gap: 10px; }
.tl-logo span { font-family: var(--hh-head); font-weight: 800; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--tool, var(--blue)); padding-left: 10px; border-left: 1px solid var(--line); line-height: 1; }
.tl-level { text-decoration: none; }
kbd { font-family: ui-monospace, Menlo, monospace; font-size: 11px; background: var(--panel2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--mut); }

/* screens list */
.tl-thumb { background: repeating-conic-gradient(#1a2130 0 25%, #121824 0 50%) 0 0 / 22px 22px; }
.tl-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.tl-more { position: relative; }
.tl-more summary { list-style: none; }
.tl-more summary::-webkit-details-marker { display: none; }
.tl-more .hh-menu { right: auto; left: 0; bottom: calc(100% + 6px); top: auto; width: 250px; }
.tl-more .hh-menu form { margin: 0; }
.tl-more .hh-menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--mut); }
.tl-more .hh-menu button:hover { background: var(--panel2); color: var(--text); }
.tl-more .hh-menu button[disabled] { opacity: .4; }
.tl-theme { display: flex; gap: 6px; padding: 4px 6px; align-items: center; }
.tl-theme select { flex: 1; min-width: 0; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.tl-theme button { width: auto !important; color: var(--blue) !important; }
.tl-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: min(560px, calc(100vw - 32px)); }
.tl-dialog::backdrop { background: #000a; }
.tl-dialog h3 { font-size: 26px; margin-bottom: 14px; }

/* control surface */
.tl-control .hh-footer { display: none; }
.tl-ctl { max-width: 1480px; margin: 0 auto; padding: 16px 20px 110px; }
.tl-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tl-top h1 { font-size: 30px; }
.tl-top .r { margin-left: auto; display: flex; gap: 8px; }
.tl-crumb { color: var(--mut); font-weight: 600; }
.tl-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ok); }
.tl-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.tl-state.staged { color: var(--warn); }
.tl-state.staged i { background: var(--warn); animation: hh-pulse 1.2s infinite; }
.tl-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 18px; align-items: start; }
.tl-left { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 76px; }
.tl-preview { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.tl-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tl-preview.bg-checker { background: repeating-conic-gradient(#1a2130 0 25%, #121824 0 50%) 0 0 / 24px 24px; }
.tl-preview.bg-green { background: #00ff00; }
.tl-preview.bg-black { background: #000; }
.tl-pvlabel { position: absolute; top: 10px; right: 10px; background: rgba(7,9,13,.8); border: 1px solid var(--line); border-radius: 7px; padding: 2px 9px; font-family: var(--hh-head); font-weight: 800; font-size: 13px; letter-spacing: .12em; color: var(--warn); }
.tl-bgs { display: flex; gap: 6px; }
.tl-bgs button { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--mut); }
.tl-bgs button.on { border-color: var(--blue); color: var(--text); }
.hh-ctl h4 { display: flex; align-items: center; gap: 8px; }
.tl-h4r { margin-left: auto; font-family: var(--hh-body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12.5px; color: var(--mut); }
.tl-link { color: var(--blue); font-weight: 700; font-size: 12.5px; }
.tl-onair { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
.tl-onair .hh-field { margin: 0; }
.tl-els { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tl-el { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--panel2); border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 14.5px; user-select: none; }
.tl-el input { position: absolute; opacity: 0; pointer-events: none; }
.tl-el kbd { margin-left: auto; }
.tl-tog { width: 36px; height: 20px; border-radius: 99px; background: #2A3547; position: relative; flex: none; transition: background .15s; }
.tl-tog::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tl-el:has(input:checked) { border-color: #FF3B3066; background: #FF3B3012; }
.tl-el:has(input:checked) .tl-tog { background: var(--live); }
.tl-el:has(input:checked) .tl-tog::after { transform: translateX(16px); }
.tl-el:has(input:focus-visible) { outline: 2px solid var(--blue); }
.tl-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-card input { position: absolute; opacity: 0; }
.tl-card span { display: inline-block; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); font-weight: 700; font-size: 14px; cursor: pointer; }
.tl-card input:checked + span { background: var(--blue); border-color: var(--blue); }
.tl-card input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.tl-tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 12px; position: sticky; top: 66px; z-index: 5; }
.tl-tabs button { flex: 1; padding: 9px 10px; border-radius: 9px; font-family: var(--hh-head); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.tl-tabs button.on { background: var(--panel2); color: var(--text); }
.tl-pane { display: none; flex-direction: column; gap: 12px; }
.tl-pane.on { display: flex; }
.tl-sec .hh-field { margin-bottom: 10px; }
.tl-sec .hh-field input, .tl-sec .hh-field select, .tl-sec .hh-field textarea, .tl-score .hh-field input, .tl-score .hh-field select { padding: 9px 12px; font-size: 15px; background: var(--panel2); }
.tl-img { display: flex; gap: 6px; }
.tl-img input { flex: 1; min-width: 0; }
.tl-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; margin: 6px 0 10px; cursor: pointer; }
.tl-switch input { accent-color: var(--blue); width: 18px; height: 18px; }
.tl-inst { margin-left: auto; font-family: var(--hh-body); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--mut); display: flex; gap: 6px; align-items: center; }
.tl-inst input { accent-color: var(--blue); }
.tl-score .hh-bump { width: 42px; height: 36px; font-size: 16px; }
.tl-score .sc { font-size: 48px; }
.tl-poss { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 8px; font-size: 13px; color: var(--mut); font-weight: 600; }
.tl-push { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(12,16,22,.96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
.tl-push .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tl-push .tl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ok); flex: none; }
.tl-push.staged .tl-dot { background: var(--warn); animation: hh-pulse 1.2s infinite; }
.tl-push.staged #tl-pushmsg { color: var(--warn); }
#tl-pushmsg { font-weight: 600; font-size: 14.5px; }
.tl-warn { color: #FF6B62; font-weight: 700; font-size: 13.5px; }
.tl-push .hh-btn.danger kbd { background: #0003; border-color: #0003; color: #fff; }
.tl-push.staged .hh-btn.danger { box-shadow: 0 0 0 3px #FF3B3044; }
#tl-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); opacity: 0; transition: .25s; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 11px 18px; font-weight: 600; box-shadow: 0 12px 40px #000a; pointer-events: none; }
#tl-toast.on { opacity: 1; transform: translate(-50%, 0); }
#tl-toast.bad { border-color: #FF3B3066; color: #FF6B62; }

@media (max-width: 1060px) {
    .tl-main { grid-template-columns: minmax(0, 1fr); }
    .tl-left { position: static; }
    .tl-push { flex-wrap: wrap; }
    .tl-push .r { margin-left: 0; width: 100%; }
    .tl-push .hh-btn.danger { flex: 1; }
    .tl-push kbd { display: none; }
}

/* This tool's own colour (hh.css .tool-<name>): wordmark, a stripe on the
   top bar, the section you're in. Buttons stay HIT HOOT blue. */
body[class*="tool-"] .hh-bar { box-shadow: inset 0 3px 0 var(--tool); }
body[class*="tool-"] .hh-nav a.on { box-shadow: inset 0 -2px 0 var(--tool); }
body[class*="tool-"] .hh-drawer a.on { box-shadow: inset 3px 0 0 var(--tool); }

/* Action buttons in a control section (theme.json "actions"; assets/actions.js). */
.tl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tl-acts .hh-btn.on { background: #FF9F0A; border-color: #FF9F0A; color: #111; }
.tl-onair-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; max-height: 60vh; overflow: auto; }
.tl-onair-pick label { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.tl-onair-pick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--blue, #1E90FF); }
.tl-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-seg label { position: relative; cursor: pointer; }
.tl-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tl-seg span { display: block; min-width: 84px; padding: 11px 16px; border-radius: 11px; background: var(--panel2); border: 1px solid var(--line); font-weight: 700; font-size: 14.5px; text-align: center; user-select: none; }
.tl-seg label:hover span { border-color: #ffffff33; }
.tl-seg input:checked + span { background: #FF3B3018; border-color: #FF3B30; color: #fff; box-shadow: inset 0 0 0 1px #FF3B30; }
.tl-seg input:focus-visible + span { outline: 2px solid var(--blue, #1E90FF); outline-offset: 2px; }
.tl-seg .adm span { border-style: dashed; }
.tl-seg .adm span::after { content: ' · Admin'; font-weight: 600; font-size: 11px; opacity: .6; }
.tl-onair .hh-field:has(.tl-seg) { grid-column: 1 / -1; }
.tl-onair .tl-seg { flex-wrap: nowrap; }
.tl-onair .tl-seg label { flex: 1 1 0; }
.tl-onair .tl-seg span { min-width: 0; }

/* Top bar: a group of sections in a dropdown (Library: Drivers, People, Media), the ? button, icons in the menus */
.tl-group { position: relative; }
.hh-nav { align-items: center; }
.tl-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: var(--hh-body); font-weight: 500; font-size: 14px; letter-spacing: -.01em; padding: 7px 11px; border-radius: var(--rs, 8px); color: var(--mut); user-select: none; }   /* the same as the other tabs (hh-pro .hh-nav a) */
.tl-group summary::-webkit-details-marker { display: none; }
.tl-group summary svg { transition: transform .15s; }
.tl-group[open] summary svg { transform: rotate(180deg); }
.tl-group summary:hover, .tl-group[open] summary { color: var(--text); background: var(--panel2); }
.tl-group summary.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--tool, var(--blue)); }
.tl-group .hh-menu { left: 0; right: auto; width: 210px; }
.tl-group[open] .hh-menu { display: block; }
.hh-nav .tl-group .hh-menu a { font-family: inherit; font-weight: 600; font-size: 14.5px; text-transform: none; letter-spacing: 0; padding: 9px 10px; }
body[class*="tool-"] .hh-nav .tl-group .hh-menu a.on { color: var(--text); background: var(--panel2); box-shadow: none; }
.tl-help { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--mut); border: 1px solid var(--line); }
.tl-help:hover, .tl-help.on { color: var(--text); background: var(--panel2); }
.tl-i { flex: none; opacity: .8; }
.hh-menu a:hover .tl-i { opacity: 1; color: var(--tool, var(--blue)); }