/* jomijo Explainer - the studio layout (laptop first): the top bar, the stage with the frame, the bar under it and the
   page strip, your notes on the right. app.css (shared by every app) gives the buttons, fields and dialogs. */
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --accent: #22d3ee; --accent-2: #67e8f9; }
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: #04222a; }
.btn.stop { color: #fff; }

.lbwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; 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%, #11172d, #05070f 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: 1px dashed rgba(125, 249, 255, 0.85); border-radius: 4px; background: transparent; color: transparent; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: normal; outline: none; box-sizing: border-box; z-index: 3; min-width: 0; max-width: none; }
#ted::selection { background: rgba(125, 249, 255, 0.35); }
.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; }

/* the bar under the stage */
.optbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 54px; padding: 8px 12px; border-top: 1px solid var(--line); background: 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 { opacity: 0.35; cursor: default; }
.ob.chalk { font-family: "Caveat", cursive; font-size: 17px; }
.obs { width: auto; height: 34px; padding: 0 8px; border-radius: 9px; font-size: 13px; font-weight: 700; }
.oblab { font-size: 12px; font-weight: 700; color: var(--muted); }
.obtip { font-size: 13px; color: var(--muted); }
.optbar .obtip { flex: 1 1 140px; min-width: 0; }
.obsep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.obsw { display: inline-flex; align-items: center; gap: 4px; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); cursor: pointer; padding: 0; }
.sw[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.tools button { padding: 7px 9px; }
.size i { display: inline-block; border-radius: 50%; background: currentColor; vertical-align: middle; }
.lbstage.drop { outline: 3px dashed var(--accent); outline-offset: -8px; }

/* the page strip: a small picture of every page, then Next / Back */
.pagebar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 12px 8px; border-top: 1px solid var(--line); background: var(--panel); }
.thumbs { position: relative; display: flex; align-items: center; gap: 6px; overflow-x: auto; min-width: 0; max-width: 100%; flex: 0 1 auto; padding: 2px; scrollbar-width: thin; }
.thumb { position: relative; flex: none; padding: 0; border: 2px solid transparent; border-radius: 7px; background: #000; cursor: pointer; line-height: 0; }
.thumb[aria-current="true"] { border-color: var(--accent); }
.thumb canvas { display: block; border-radius: 5px; }
.thumb span { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.65); color: #fff; font: 700 10px/14px var(--font); }
.tints button { display: inline-flex; align-items: center; gap: 6px; }
.tintdot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); }
.tintdot.black { background: #000; } .tintdot.grey { background: #4a525c; } .tintdot.white { background: #fff; }

/* your notes */
.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; }
.sidehead { display: flex; align-items: center; gap: 8px; }
.sidehead strong { white-space: nowrap; } .sidehead .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidehead .ob { height: 28px; min-width: 30px; padding: 0 6px; font-size: 12px; }
.notes { flex: 1; min-height: 200px; resize: none; font: 500 17px/1.55 var(--font); padding: 12px 14px; border-radius: 12px; }
.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; }
body.recording .notes { border-color: #ef4444; }
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; }

/* while recording: the shape and the camera can't change */
body.recording .lbtop .seg2, body.recording #camBtn, body.recording #flip { 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 { height: 60vh; flex: none; } .side { border-left: 0; border-top: 1px solid var(--line); } .notes { min-height: 240px; } }
.top0 { margin-top: 0; }