/* jomijo Tier List - the studio layout: the top bar, the stage with the frame, the bar under it, the tray of logos not
   ranked yet, the settings on the right. app.css (shared by every app) gives the buttons, fields and dialogs. */
:root { --accent: #f472b6; --accent-2: #f9a8d4; }
html, body.lb { height: 100%; }
body.lb { display: flex; flex-direction: column; overflow: hidden; }
.lbtop { gap: 10px; flex-wrap: nowrap; padding-top: 8px; padding-bottom: 8px; }
.lbtop h1 { white-space: nowrap; }
.grow { flex: 1; }
.seg2 { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; flex: none; }
.seg2 button { background: var(--panel-2); border: 0; padding: 7px 10px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--muted); }
.seg2 button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); color: var(--ink); }
#camBtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-2); }
.btn.primary { color: #3b0a24; }
.btn.stop { color: #fff; }

.lbwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr); }

/* the stage: the frame in the middle */
.stagebox { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.lbstage { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1b1130, #07050f 75%); }
.frame { position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); background: #000; }
#out, #ui { position: absolute; inset: 0; width: 100%; height: 100%; }
#ui { touch-action: none; user-select: none; -webkit-user-select: none; }
#ted { position: absolute; margin: 0; border: 2px solid var(--accent); border-radius: 4px; resize: none; overflow: hidden; outline: none; box-sizing: border-box; z-index: 3; min-width: 0; max-width: none; padding: 4px 8px; font-weight: 800; text-align: center; }
.lbstage .over { z-index: 6; font-size: 140px; }
.lbstage .recdot { z-index: 5; }
.recdot.paused { background: #f59e0b; animation: none; }
.toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(12, 17, 36, 0.94); border: 1px solid var(--line); padding: 8px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; z-index: 7; max-width: min(560px, 90%); text-align: center; }
.lbstage.drop, .traybar.drop { outline: 3px dashed var(--accent); outline-offset: -8px; }

/* the bars under the stage */
.optbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 50px; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.optbar[hidden] { display: none; }
.selbar { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.obgrp { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.obgrp[hidden] { display: none; }
.ob { height: 34px; min-width: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-weight: 700; font-size: 13px; white-space: nowrap; }
.ob:hover { border-color: var(--muted); } .ob[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--panel-2)); }
.ob:disabled, .btn:disabled { opacity: 0.35; cursor: default; }
.obs { width: auto; height: 34px; padding: 0 8px; border-radius: 9px; font-size: 13px; font-weight: 700; }
.capin { width: 170px; font-weight: 600; }
.oblab { font-size: 12px; font-weight: 700; color: var(--muted); }
.obtip { font-size: 13px; color: var(--muted); }
.obsw { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); cursor: pointer; padding: 0; flex: none; }
.sw[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.swpick { position: relative; overflow: hidden; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }
.sw { position: relative; overflow: hidden; }
.sw input { position: absolute; inset: -6px; width: 40px; height: 40px; opacity: 0; cursor: pointer; padding: 0; border: 0; }

/* the tray: the logos not ranked yet */
.traybar { border-top: 1px solid var(--line); background: var(--panel); padding: 6px 12px 10px; }
.trayhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tray { display: flex; flex-wrap: wrap; gap: 6px; max-height: 154px; overflow-y: auto; min-height: 58px; padding: 2px; border-radius: 10px; scrollbar-width: thin; }
.tray:empty::after { content: "Add logos with ＋ Logos, paste them (⌘V) or drop them here - or ＋ Names for a list of words."; color: var(--muted); font-size: 13px; align-self: center; padding: 0 6px; }
.tile { width: 64px; height: 64px; flex: none; border-radius: 8px; cursor: grab; touch-action: none; border: 2px solid transparent; padding: 0; background: transparent; display: block; }
.tile[aria-pressed="true"] { border-color: var(--accent); }
.tile.head { box-shadow: 0 0 0 2px #ffffff55; }
.tray .ins { width: 3px; height: 64px; background: var(--accent); border-radius: 2px; flex: none; }
.ghost { position: fixed; width: 80px; height: 80px; pointer-events: none; z-index: 50; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.ghost[hidden] { display: none; }

/* the settings */
.side { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; min-width: 0; min-height: 0; overflow-y: auto; }
.small { font-size: 12px; }
.setbox { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px 8px; background: var(--panel-2); flex: none; }
.setbox summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.checkrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; cursor: pointer; }
.checkrow input { width: auto; accent-color: var(--accent); }
.setbox input[type=range] { padding: 0; accent-color: var(--accent); border: 0; background: none; }
.setbox .seg2 button { padding: 6px 9px; }
.tierlist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tierlist li { display: flex; align-items: center; gap: 4px; }
.tierlist .key { width: 16px; font: 700 11px var(--font); color: var(--muted); text-align: center; flex: none; }
.tierlist input[type=text] { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-weight: 700; font-size: 14px; }
.tierlist .ob { height: 32px; min-width: 30px; padding: 0 6px; }
.tierlist .sw { width: 28px; height: 28px; border-radius: 8px; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font: 600 11px/18px var(--font); text-align: center; }
#namesIn { width: 100%; font: 600 15px/1.5 var(--font); resize: vertical; }
.top0 { margin-top: 0; }

/* while recording: the shape and the camera can't change */
body.recording .lbtop .seg2, body.recording #camBtn, body.recording #flip, body.recording #lists, body.recording #newList, body.recording #delList { opacity: 0.4; pointer-events: none; }

@media (max-width: 1100px) { .lbwrap { grid-template-columns: minmax(0, 1fr) 290px; } .h1t { display: none; } }
@media (max-width: 860px) {
  body.lb { overflow: auto; height: auto; } .lbtop { flex-wrap: wrap; }
  .lbwrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; } .lbstage { flex: none; height: auto; aspect-ratio: 16 / 10; max-height: 72vh; } body.tall .lbstage { aspect-ratio: 9 / 15; } .side { border-left: 0; border-top: 1px solid var(--line); }
  .tile { width: 56px; height: 56px; } }