/* ═══════════════════════════════════════════════════════════════════
   PROJECTS — the name, the status, and the project list
   Shared by the HTML/JS console and the block builder, because the two
   now share one project system and a student should not have to learn
   two different-looking versions of the same three buttons.

   Only the MODAL SHELL is left to each editor: the console has
   .proj-modal, the block builder already had .modal-overlay/.modal-box
   for its edit dialog, and reusing what a page already has beats
   inventing a second box style.

   Colours come from the palette tokens the editors already load, with
   literal fallbacks so this file still reads correctly on its own.
   ═══════════════════════════════════════════════════════════════════ */
.proj-box{display:flex;flex-direction:column;justify-content:center;
  line-height:1.15;margin-right:6px;max-width:210px;}
.proj-name{font-size:12.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.proj-name:hover{text-decoration:underline;}
/* The status is WORDS, not a dot. "Saved" and "NOT SAVED - log in to
   save" mean opposite things to a kid on a shared Chromebook, and a
   coloured dot cannot say which. */
.proj-status{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.proj-status.ok{color:rgba(var(--c-green-rgb,57,255,20),.85);}
.proj-status.warn{color:rgba(var(--c-gold-rgb,255,234,0),.9);}

.proj-list{overflow-y:auto;padding:8px;}
.proj-empty{padding:22px 16px;font-size:13px;line-height:1.6;
  color:rgba(255,255,255,.55);}
.proj-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;
  align-items:center;width:100%;text-align:left;cursor:pointer;
  padding:11px 12px;margin-bottom:6px;border-radius:9px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  color:inherit;font:inherit;transition:background .14s,border-color .14s;}
.proj-row:hover{background:rgba(255,255,255,.08);
  border-color:rgba(var(--c-cyan-rgb,0,255,255),.4);}
.proj-row-title{font-size:13.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* The badge is a BADGE, not a picker: the type is set by the assignment
   and never changes, so its whole job is telling a student which of the
   two tools a row will open. */
.proj-row-type{font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;}
.proj-row-type.is-code{background:rgba(var(--c-cyan-rgb,0,255,255),.16);
  color:rgba(var(--c-cyan-rgb,0,255,255),.95);}
.proj-row-type.is-blocks{background:rgba(var(--c-pink-rgb,255,0,127),.16);
  color:rgba(var(--c-pink-rgb,255,0,127),.95);}
.proj-row-when{font-size:10px;color:rgba(255,255,255,.35);white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════════
   THE LOGIN GATE
   Robin, 3 Sep 2026: "if they are not logged in, it requires them to
   do so... it could just be a hard requirement if they try to load or
   save." So this appears on New / Open / Save and nowhere else -- a
   student can noodle with blocks without being stopped at the door.

   Most will never see it: they arrive from the notebook, same origin,
   id already there. It catches the direct link, the wiped profile and
   the shared machine.
   ═══════════════════════════════════════════════════════════════════ */
.proj-gate{position:fixed;inset:0;z-index:9800;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(4px);}
.proj-gate-box{width:100%;max-width:400px;text-align:center;
  background:#121218;border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:30px 26px 24px;
  box-shadow:0 24px 64px rgba(0,0,0,.7);}
.proj-gate-box h2{margin:0 0 10px;font-size:19px;font-weight:700;
  color:rgba(var(--c-cyan-rgb,0,255,255),.95);}
/* Short sentences, common words: these students are 14-16 and many are
   English-language learners. */
.proj-gate-box p{margin:0 0 16px;font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.72);}
.proj-gate-box input{width:100%;padding:13px 14px;text-align:center;
  font-size:22px;letter-spacing:.24em;font-weight:600;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  color:#fff;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;outline:none;}
.proj-gate-box input:focus{border-color:rgba(var(--c-cyan-rgb,0,255,255),.7);}
.proj-gate-err{display:none;margin-top:9px;font-size:12px;
  color:rgba(var(--c-gold-rgb,255,234,0),.95);}
.proj-gate-err.show{display:block;}
.proj-gate-go{width:100%;margin-top:14px;padding:12px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:#04040a;
  background:rgba(var(--c-cyan-rgb,0,255,255),.92);
  border:none;border-radius:10px;}
.proj-gate-go:hover{background:rgba(var(--c-cyan-rgb,0,255,255),1);}
.proj-gate-note{margin:16px 0 0!important;font-size:11.5px!important;
  line-height:1.55!important;color:rgba(255,255,255,.42)!important;}