/* =====================================================================
   Lesson Board - theme engine + shared UI
   Two dials: data-mode (dark | light) and data-surface (colour family),
   plus data-accent for the highlight colour.
   ===================================================================== */

/* ---------- surface families : DARK ---------- */
:root,
[data-mode="dark"][data-surface="midnight"]{
  --s-900:#0E1526; --s-850:#111A2D; --s-800:#151E33; --s-700:#1C2740; --s-600:#26334F;
  --line:#2B3859; --line-soft:#212C47; --text:#E9EDF6; --muted:#8E9CBB; --scroll:#2b3654;
}
[data-mode="dark"][data-surface="graphite"]{
  --s-900:#131315; --s-850:#171719; --s-800:#1C1C20; --s-700:#26262C; --s-600:#33333B;
  --line:#3A3A44; --line-soft:#2A2A31; --text:#EDEDF0; --muted:#9A9AA6; --scroll:#3a3a44;
}
[data-mode="dark"][data-surface="ocean"]{
  --s-900:#08191F; --s-850:#0B2028; --s-800:#0E2833; --s-700:#143643; --s-600:#1D4A5B;
  --line:#22566A; --line-soft:#173D4B; --text:#E4F1F5; --muted:#84AAB8; --scroll:#22566a;
}
[data-mode="dark"][data-surface="forest"]{
  --s-900:#0D1A14; --s-850:#10201A; --s-800:#142720; --s-700:#1B342A; --s-600:#254738;
  --line:#2C5442; --line-soft:#1D3A2E; --text:#E6F2EA; --muted:#8AAE9A; --scroll:#2c5442;
}
[data-mode="dark"][data-surface="plum"]{
  --s-900:#16101F; --s-850:#1A1325; --s-800:#20182D; --s-700:#2B2140; --s-600:#3A2D55;
  --line:#443564; --line-soft:#2F2447; --text:#EFE9F7; --muted:#A395BE; --scroll:#443564;
}
[data-mode="dark"][data-surface="espresso"]{
  --s-900:#1A1411; --s-850:#1F1815; --s-800:#261E19; --s-700:#332822; --s-600:#45362D;
  --line:#4F3E33; --line-soft:#372C25; --text:#F3EAE2; --muted:#B39C89; --scroll:#4f3e33;
}

/* ---------- surface families : LIGHT ---------- */
[data-mode="light"][data-surface="midnight"]{
  --s-900:#EEF1F7; --s-850:#FFFFFF; --s-800:#FFFFFF; --s-700:#E7ECF5; --s-600:#DAE1EE;
  --line:#CBD4E4; --line-soft:#E2E8F2; --text:#16203A; --muted:#63708C; --scroll:#c3cddd;
}
[data-mode="light"][data-surface="graphite"]{
  --s-900:#F1F1F2; --s-850:#FFFFFF; --s-800:#FFFFFF; --s-700:#EAEAEC; --s-600:#DEDEE1;
  --line:#D2D2D6; --line-soft:#E7E7EA; --text:#1B1B1F; --muted:#6C6C76; --scroll:#c9c9cf;
}
[data-mode="light"][data-surface="ocean"]{
  --s-900:#EAF3F6; --s-850:#FFFFFF; --s-800:#FFFFFF; --s-700:#DFEDF2; --s-600:#CFE3EA;
  --line:#B9D6E0; --line-soft:#DCEAF0; --text:#0C2A34; --muted:#4F7E8D; --scroll:#b3d0da;
}
[data-mode="light"][data-surface="forest"]{
  --s-900:#EDF4EF; --s-850:#FFFFFF; --s-800:#FFFFFF; --s-700:#E2EEE6; --s-600:#D2E4D8;
  --line:#BCD7C5; --line-soft:#DFEBE3; --text:#12301F; --muted:#548064; --scroll:#b6d1bf;
}
[data-mode="light"][data-surface="plum"]{
  --s-900:#F3EFF8; --s-850:#FFFFFF; --s-800:#FFFFFF; --s-700:#EBE4F3; --s-600:#DED4EB;
  --line:#CDBFE0; --line-soft:#E6DDF0; --text:#241635; --muted:#6F5C8C; --scroll:#c7b8dc;
}
[data-mode="light"][data-surface="espresso"]{
  --s-900:#F6F1EA; --s-850:#FFFFFF; --s-800:#FFFFFF; --s-700:#EFE7DC; --s-600:#E4D8C8;
  --line:#D6C6B2; --line-soft:#EAE1D5; --text:#31241A; --muted:#87705A; --scroll:#d0bfa9;
}

/* ---------- accents ---------- */
/* fallback first, so an explicit data-accent always wins */
:root{ --accent:#12B394; --accent-2:#4DD0B1; --on-accent:#04241D; --accent-dim:#12b39424; }
[data-accent="teal"]  { --accent:#12B394; --accent-2:#4DD0B1; --on-accent:#04241D; --accent-dim:#12b39424; }
[data-accent="blue"]  { --accent:#3B82F6; --accent-2:#60A5FA; --on-accent:#06172F; --accent-dim:#3b82f624; }
[data-accent="violet"]{ --accent:#8B5CF6; --accent-2:#A78BFA; --on-accent:#1A0C33; --accent-dim:#8b5cf624; }
[data-accent="amber"] { --accent:#F59E0B; --accent-2:#FBBF24; --on-accent:#2A1A00; --accent-dim:#f59e0b26; }
[data-accent="rose"]  { --accent:#F43F5E; --accent-2:#FB7185; --on-accent:#320511; --accent-dim:#f43f5e24; }
[data-accent="lime"]  { --accent:#65A30D; --accent-2:#84CC16; --on-accent:#111F00; --accent-dim:#65a30d26; }
[data-accent="cyan"]  { --accent:#06B6D4; --accent-2:#22D3EE; --on-accent:#032A32; --accent-dim:#06b6d426; }
[data-accent="coral"] { --accent:#F97316; --accent-2:#FB923C; --on-accent:#2B1200; --accent-dim:#f9731626; }

/* dark mode wants the brighter tint of each accent */
[data-mode="dark"]{ --accent:var(--accent-2); }

:root{
  --rose-fx:#FF5A5F; --amber-fx:#FFB020;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 8px 24px rgba(0,0,0,.22);
  --sh-3:0 20px 60px rgba(0,0,0,.32);
  --f-display:"Plus Jakarta Sans","Space Grotesk",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --glass:color-mix(in srgb, var(--s-800) 88%, transparent);
}
[data-mode="dark"]{ --sh-2:0 8px 24px rgba(0,0,0,.42); --sh-3:0 20px 60px rgba(0,0,0,.55); }

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--s-900);color:var(--text);
  font-family:var(--f-body);font-size:14px;line-height:1.5;
  overflow:hidden;text-rendering:optimizeLegibility;
  transition:background .2s,color .2s;
}
body.scroll{overflow:auto}
[data-mode="dark"] body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[data-mode="light"] body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;margin:0;letter-spacing:-.018em}
/* light backgrounds need a touch less weight to look the same */
[data-mode="light"] h1,[data-mode="light"] h2,
[data-mode="light"] h3,[data-mode="light"] h4{font-weight:650}
[data-mode="light"] .btn.primary{font-weight:600}
.mono{font-family:var(--f-mono)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;
  border-radius:var(--r-md);background:var(--s-700);color:var(--text);
  border:1px solid var(--line);font-size:13px;font-weight:500;white-space:nowrap;
  transition:background .14s,border-color .14s,transform .08s;
}
.btn:hover{background:var(--s-600)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:650}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--s-700);color:var(--text)}
.btn.danger{color:var(--rose-fx);border-color:color-mix(in srgb,var(--rose-fx) 32%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,var(--rose-fx) 14%,transparent)}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.icon{width:34px;padding:0;justify-content:center}
.btn.icon.sm{width:28px}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- inputs ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--muted);font-weight:500}
.input,select.input,textarea.input{
  height:38px;padding:0 12px;border-radius:var(--r-md);
  background:var(--s-900);border:1px solid var(--line);color:var(--text);width:100%;
  transition:border-color .14s;
}
[data-mode="light"] .input{background:#fff}
textarea.input{height:auto;padding:10px 12px;resize:vertical;line-height:1.55}
.input:focus{border-color:var(--accent);outline:none}
.input::placeholder{color:var(--muted);opacity:.65}
select.input{appearance:none;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;
  background-size:5px 5px;background-repeat:no-repeat}
[data-mode="light"] select.input{background-color:#fff}

.card{background:var(--s-800);border:1px solid var(--line-soft);border-radius:var(--r-lg)}

/* ---------- modal ---------- */
/* z-index 980, above every full-screen panel on the editor page - the wall
   (940), the inspector (945), the wheel (946) and the join card (950) - and
   below the toast (1000), which has to be readable over a modal.
   It was 900 until v30, which put it UNDER all four: a confirm box opened
   from inside any of them was drawn behind the panel that asked for it, and
   the only clue was a button that would not click. Nothing had ever asked
   for one from inside a panel before the wheel did. A dialog is always the
   most important thing on the screen at the moment it appears. */
.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--s-900) 78%,transparent);
  display:none;align-items:center;justify-content:center;z-index:980;padding:20px;
  backdrop-filter:blur(4px)}
.overlay.on{display:flex}
.modal{width:100%;max-width:440px;background:var(--s-800);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:24px;max-height:90vh;overflow:auto;
  animation:pop .18s cubic-bezier(.2,.9,.3,1)}
.modal.wide{max-width:640px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}}
.modal h3{font-size:17px;margin-bottom:4px}
.modal .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.modal-row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--s-700);border:1px solid var(--line);padding:11px 17px;border-radius:var(--r-md);
  box-shadow:var(--sh-2);z-index:1000;opacity:0;transition:.22s;font-size:13px;
  pointer-events:none;max-width:min(90vw,420px)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:color-mix(in srgb,var(--rose-fx) 45%,transparent);
  color:color-mix(in srgb,var(--rose-fx) 75%,var(--text))}

/* ---------- toggle ---------- */
.sw-t{width:36px;height:20px;border-radius:99px;background:var(--s-600);position:relative;
  transition:.16s;flex:none;cursor:pointer;border:1px solid var(--line)}
.sw-t::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:var(--muted);transition:.16s}
.sw-t.on{background:var(--accent);border-color:transparent}
.sw-t.on::after{left:18px;background:var(--on-accent)}

input[type=range]{accent-color:var(--accent)}

/* ---------- misc ---------- */
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.sep{height:1px;background:var(--line-soft);margin:14px 0}
.vsep{width:1px;align-self:stretch;background:var(--line-soft);margin:6px 2px}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;
  background:var(--s-700);border:1px solid var(--line);font-size:11px;color:var(--muted);
  font-family:var(--f-mono);letter-spacing:.03em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.dot.live{background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---------- brand mark ---------- */
.mark{border-radius:12px;display:grid;place-items:center;flex:none;overflow:hidden;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--s-700)));
  color:var(--on-accent);font-family:var(--f-display);font-weight:700;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 28%,transparent)}
.mark img{width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px}

/* =====================================================================
   v11 - sharing permissions, people and hands
   ===================================================================== */

/* the three "who can join" choices */
.acc-list{display:flex;flex-direction:column;gap:5px}
.acc{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:12px;
  border:1px solid var(--line);background:var(--s-700);text-align:left;
  transition:border-color .14s,background .14s}
.acc:hover{border-color:var(--accent-2)}
.acc.on{border-color:var(--accent);background:var(--accent-dim)}
.acc .ai{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--s-800);color:var(--muted)}
.acc.on .ai{background:var(--accent);color:var(--on-accent)}
.acc .at{flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--text)}
.acc .at em{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:var(--muted);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the PIN, big enough to read out from across the room */
.pinbox{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 10px;border-radius:12px;
  background:var(--s-900);border:1px dashed var(--line)}
.pinbox .pv{flex:1;text-align:center;font-family:var(--f-mono);font-size:26px;
  letter-spacing:.22em;color:var(--accent);line-height:1.2}

/* who is in the room */
.people{max-height:158px;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:3px}
.person{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:9px;
  background:var(--s-700);border:1px solid transparent;font-size:12px}
.person .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person.up{background:color-mix(in srgb,var(--amber-fx) 15%,var(--s-700));
  border-color:color-mix(in srgb,var(--amber-fx) 42%,transparent)}
.person .hd{flex:none;color:var(--amber-fx);font-family:var(--f-mono);font-size:12px;
  min-width:15px;text-align:center}
.person .lw{flex:none;font-size:10.5px;color:var(--muted);padding:2px 8px;border-radius:7px;
  background:var(--s-800);border:1px solid var(--line)}
.person .lw:hover{color:var(--text);background:var(--s-600)}
.people .none{font-size:11.5px;color:var(--muted);padding:6px 2px}