/* EX3D Annotator — sign-in, project landing page, admin dialogs.
   Rides on the palette declared in app.css. */

/* The editor used to be body's only content and inherited its column flexbox
   directly; it now lives in a wrapper, which has to carry the same layout. */
.editor{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.editor[hidden]{display:none}
/* the mobile tab bar belongs to the editor, not to the landing page */
#editor[hidden] ~ .mobile-tabs{display:none}

.shell{flex:1 1 auto;min-height:0;overflow:auto;background:var(--bg);user-select:none}
.shell[hidden]{display:none}

/* ── shared bits ─────────────────────────────────────────────────────────── */
.sh-logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;letter-spacing:.02em}
.sh-logo b{color:var(--accent)}
.sh-sub{color:var(--mut);margin:2px 0 14px;font-size:12.5px}

.sh-btn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:8px 14px;cursor:pointer;font-size:13px}
.sh-btn:hover{background:#e0e0e0;border-color:#d0d0d0}
.sh-btn.primary{background:var(--accent);border-color:var(--accent);color:#333333;font-weight:600}
.sh-btn.primary:hover{background:#ffd566}
.sh-btn.ghost{background:transparent}
.sh-btn:disabled{opacity:.55;cursor:default}

.sh-link{background:none;border:0;color:var(--mut);text-decoration:underline;
  cursor:pointer;font-size:12px;padding:4px;margin-top:2px}
.sh-link:hover{color:var(--accent)}

.sh-icon{background:transparent;border:1px solid transparent;color:var(--mut);
  border-radius:6px;padding:4px 7px;cursor:pointer;font-size:13px;line-height:1}
.sh-icon:hover{background:var(--panel2);border-color:var(--line);color:var(--ink)}
.sh-icon.danger:hover{color:var(--danger);border-color:var(--danger)}

.sh-input{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:8px 10px;font-size:13px;width:100%;font-family:inherit}
.sh-input:focus{outline:none;border-color:var(--accent)}
.sh-field{display:grid;gap:5px}
.sh-field>span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}

.sh-err{color:var(--danger);background:rgba(255,90,90,.08);border:1px solid rgba(255,90,90,.3);
  border-radius:7px;padding:8px 10px;font-size:12.5px}
.sh-env{color:var(--mut);font-size:11px;text-align:center;letter-spacing:.03em;margin-top:4px}
.sh-loading{color:var(--mut);padding:60px;text-align:center;font-size:13px}

.sh-role{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--line);border-radius:20px;padding:2px 8px;margin-left:6px}
.sh-role.admin{color:var(--accent2);border-color:rgba(255,194,75,.45)}

/* ── login ───────────────────────────────────────────────────────────────── */
.sh-center{min-height:100%;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.sh-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:28px 26px;width:340px;display:grid;gap:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.05)}
.sh-card h2{margin:0;font-size:17px}

/* ── landing page ────────────────────────────────────────────────────────── */
.sh-top{display:flex;align-items:center;gap:12px;padding:12px 22px;
  background:#ffffff;border-bottom:1px solid var(--line)}
.sh-who{margin-left:auto;display:flex;align-items:center;gap:10px}
.sh-user{font-weight:600}

.sh-main{max-width:1180px;margin:0 auto;padding:30px 22px 60px}
.sh-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sh-head h1{margin:0;font-size:21px;font-weight:600}
.sh-actions{margin-left:auto;display:flex;gap:8px}

.sh-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
.sh-card-actions{display:flex;gap:2px;padding:0 8px 8px}
article.sh-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;width:auto;padding:0;gap:0;
  box-shadow:none;transition:border-color .12s,transform .12s}
article.sh-card:hover{border-color:#d0d0d0;transform:translateY(-2px)}

.sh-thumb{display:block;width:100%;aspect-ratio:16/10;background:#f5f5f5;
  border:0;padding:0;cursor:pointer;overflow:hidden}
.sh-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sh-thumb-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#888888;font-size:38px}
.sh-meta{padding:11px 12px 6px}
.sh-meta h3{margin:0 0 3px;font-size:13.5px;color:var(--ink);text-transform:none;letter-spacing:0}
.sh-meta p{margin:0;color:var(--mut);font-size:11.5px}

.sh-empty{text-align:center;color:var(--mut);padding:70px 20px;
  border:1px dashed var(--line);border-radius:14px}
.sh-empty p{margin:0 0 16px}

/* ── editor cloud strip ──────────────────────────────────────────────────── */
.cloud-bar{display:flex;align-items:center;gap:6px}
.sh-chip{font-size:11.5px;color:var(--mut);border:1px solid var(--line);
  border-radius:20px;padding:4px 10px;white-space:nowrap}
.sh-chip.dirty{color:var(--accent2);border-color:rgba(255,194,75,.45)}
.sh-chip.user{color:var(--ink)}

/* ── modal ───────────────────────────────────────────────────────────────── */
.sh-modal-wrap{position:fixed;inset:0;background:rgba(245,245,245,.66);z-index:9000;
  display:flex;align-items:center;justify-content:center;padding:24px}
.sh-modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;min-width:340px;max-width:560px;max-height:80vh;overflow:auto;
  display:grid;gap:14px;box-shadow:0 24px 70px rgba(0,0,0,.08)}
.sh-modal h2{margin:0;font-size:16px}
.sh-modal-body{display:grid;gap:12px;min-width:0}
.sh-modal-foot{display:flex;justify-content:flex-end;gap:8px}

.sh-checklist{display:grid;gap:4px;max-height:240px;overflow:auto}
.sh-check{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer}
.sh-check:hover{background:var(--panel2)}

.sh-table{width:100%;border-collapse:collapse;font-size:12.5px}
.sh-table th{text-align:left;color:var(--mut);font-weight:500;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:0 8px 8px}
.sh-table td{padding:7px 8px;border-top:1px solid var(--line)}
.sh-table td.right{text-align:right;white-space:nowrap}
/* the actions column must not be squeezed out by the grid-sized modal */
.sh-table th:last-child,.sh-table td.right{width:86px;min-width:86px}
.sh-table td:nth-child(3){width:100%}
.sh-rowacts{display:flex;gap:2px;justify-content:flex-end}
.sh-role-select{padding:3px 6px;font-size:11.5px;width:auto}

@media (max-width:640px){
  .sh-main{padding:20px 14px 50px}
  .sh-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* ── presence ────────────────────────────────────────────────────────────── */
.peer-bar{display:inline-flex;align-items:center;gap:-6px;margin-left:2px}
.peer{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;font-size:10px;font-weight:700;
  letter-spacing:.02em;color:#f5f5f5;background:var(--mut);
  border:2px solid #ffffff;margin-left:-6px;cursor:default;
  transition:transform .12s}
.peer:hover{transform:translateY(-2px)}
/* Same hash as scene.js hashHue() picks for the canvas halo, so the avatar and
   the outline around what they are holding are always the same colour. */
.peer.here{box-shadow:0 0 0 2px rgba(90,176,255,.55)}
.peer.busy{animation:peer-pulse 1.4s ease-in-out infinite}
@keyframes peer-pulse{0%,100%{opacity:1}50%{opacity:.55}}

.toast.warn{border-color:var(--accent2);color:var(--accent2)}

/* storage format chip (admin) */
.storage-btn{font-family:Consolas,monospace;font-size:11px;padding:3px 8px;opacity:.75}
.storage-btn:hover{opacity:1}

.sh-note{color:var(--mut,#8b95a5);font-size:12px;margin:8px 0 0}