/* ═══════════════════════════════════════════════════════════════
   Quably Study Board — styles
   Loaded after style.css. Reuses Quably design tokens.
   ═══════════════════════════════════════════════════════════════ */

/* Small form helpers used by the create page (base forms live in components.css) */
.form-optional { color: var(--color-text-muted); font-weight: 400; }
.form-error {
  font-size: var(--text-sm);
  color: var(--color-error);
  background: var(--color-error-dim);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

/* ─────────────────────────────────────────────────────────────
   CREATE / LANDING PAGE
   ───────────────────────────────────────────────────────────── */
.board-landing { padding-top: calc(84px + var(--space-8)); }

.board-create {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
}
.board-create__row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.board-create__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: -4px;
}

/* Template picker grid */
.board-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.board-template {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4);
  text-align: left;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: var(--transition);
}
.board-template:hover {
  border-color: var(--color-purple-border);
  transform: translateY(-2px);
}
.board-template.is-active {
  border-color: var(--color-purple);
  background: var(--color-purple-dim);
  box-shadow: 0 0 0 1px var(--color-purple);
}
.board-template__glyph { width: 26px; height: 26px; color: var(--color-purple-light); margin-bottom: 4px; }
.board-template__name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }
.board-template__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }

/* Value props row */
.board-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.board-value {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
}
.board-value__icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-purple-dim);
  border: 1px solid var(--color-purple-border);
  color: var(--color-purple-light);
}
.board-value strong { display: block; font-size: var(--text-sm); color: var(--color-text-primary); }
.board-value span { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }

@media (max-width: 640px) {
  .board-values { grid-template-columns: 1fr; gap: var(--space-2); }
  .board-create { padding: var(--space-5); }
}

/* ─────────────────────────────────────────────────────────────
   WHITEBOARD SHELL
   ───────────────────────────────────────────────────────────── */
.board-body {
  margin: 0;
  overflow: hidden;
  height: 100dvh;
  overscroll-behavior: none;
}

.wb {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--color-bg);
}

/* ── Header ─────────────────────────────────────────────────── */
.wb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 56px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-raised);
}
.wb-header__left, .wb-header__right { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.wb-logo { display: flex; align-items: center; gap: 7px; text-decoration: none; flex-shrink: 0; }
.wb-logo__text { font-family: var(--font-brand); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.03em; color: var(--color-text-primary); }
.wb-header__divider { width: 1px; height: 22px; background: var(--color-border); flex-shrink: 0; }
.wb-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 34vw;
}
.wb-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}
.wb-status[data-state="saving"] { color: var(--color-warning); }
.wb-status[data-state="error"]  { color: var(--color-error); }
.wb-status[data-state="saved"]  { color: var(--color-success); }

.wb-icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.wb-icon-btn:hover:not(:disabled) { background: var(--color-surface-raised); color: var(--color-text-primary); }
.wb-icon-btn:disabled { opacity: 0.35; cursor: default; }
.wb-share-btn { flex-shrink: 0; }

/* ── Stage / canvas ─────────────────────────────────────────── */
.wb-stage {
  position: relative;
  overflow: hidden;
  touch-action: none;             /* pointer events handle pan/zoom */
  background: var(--color-bg);
}
#wb-canvas { display: block; touch-action: none; cursor: crosshair; }
.wb-stage[data-tool="select"] #wb-canvas { cursor: default; }
.wb-stage[data-tool="text"]   #wb-canvas,
.wb-stage[data-tool="note"]   #wb-canvas { cursor: text; }

/* Overlay for live text/note editors */
.wb-overlay { position: absolute; inset: 0; pointer-events: none; }
.wb-editor {
  position: absolute;
  pointer-events: auto;
  font-family: 'Inter', sans-serif;
  background: var(--color-surface-overlay);
  color: var(--color-text-primary);
  border: 1px solid var(--color-purple);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  resize: none;
  outline: none;
  box-shadow: var(--shadow-md);
  z-index: var(--z-raised);
}
.wb-editor--note {
  color: #1A1A26;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
}
.wb-editor--note::placeholder { color: rgba(0,0,0,0.4); }

/* Empty state */
.wb-empty {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  text-align: center;
}

/* Zoom controls (floating bottom-right) */
.wb-zoom {
  position: absolute;
  right: var(--space-4);
  bottom: calc(var(--space-4) + 68px);   /* clears the toolbar */
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  z-index: var(--z-raised);
}
.wb-zoom__level {
  min-width: 52px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
}
.wb-zoom__level:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }

/* ── Toolbar (floating, centered bottom) ────────────────────── */
.wb-toolbar {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100vw - var(--space-8));
  padding: 6px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-nav);
  overflow-x: auto;
  scrollbar-width: none;
}
.wb-toolbar::-webkit-scrollbar { display: none; }
.wb-toolbar__group { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.wb-toolbar__sep { width: 1px; height: 24px; background: var(--color-border); flex-shrink: 0; margin: 0 2px; }

.wb-tool {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}
.wb-tool svg { width: 20px; height: 20px; }
.wb-tool:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }
.wb-tool.is-active {
  background: var(--color-purple);
  color: #fff;
  box-shadow: 0 2px 8px var(--color-purple-glow);
}
.wb-tool--danger:hover { background: var(--color-error-dim); color: var(--color-error); }

/* Contextual props (colour + size) */
.wb-props { gap: var(--space-2); }
.wb-color {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--color-border);
}
.wb-color input[type="color"] {
  width: 46px; height: 46px; border: none; padding: 0; background: none; cursor: pointer;
}
.wb-swatches { display: flex; gap: 3px; }
.wb-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--c);
  cursor: pointer;
  transition: transform 140ms ease;
}
.wb-swatch:hover { transform: scale(1.15); }
.wb-size {
  width: 90px;
  accent-color: var(--color-purple);
  cursor: pointer;
}

/* ── Modals (share / settings) ──────────────────────────────── */
.wb-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; }
.wb-modal[hidden] { display: none; }
.wb-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); }
.wb-modal__panel {
  position: relative;
  width: min(92vw, 420px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  animation: wbModalIn 200ms ease;
}
@keyframes wbModalIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wb-modal__close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: transparent; border: none; color: var(--color-text-muted); cursor: pointer;
}
.wb-modal__close:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }
.wb-modal__title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.wb-modal__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.wb-modal__hint { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin-top: var(--space-4); }

.wb-share-url { display: flex; gap: var(--space-2); }
.wb-share-url input {
  flex: 1; min-width: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.wb-share-qr {
  display: grid; place-items: center;
  margin-top: var(--space-5);
}
.wb-share-qr canvas { border-radius: var(--radius-md); width: 180px; height: 180px; }

.wb-bg-picker { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wb-bg-opt {
  flex: 1; min-width: 70px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.wb-bg-opt:hover { border-color: var(--color-purple-border); color: var(--color-text-primary); }
.wb-bg-opt.is-active { background: var(--color-purple-dim); border-color: var(--color-purple); color: var(--color-purple-light); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   MOBILE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .wb-header { height: 52px; padding: 0 var(--space-3); }
  .wb-logo__text { display: none; }          /* keep mark only, save space */
  .wb-header__divider { display: none; }
  .wb-title { max-width: 40vw; }
  .wb-share-btn__label { display: none; }     /* icon-only share on mobile */
  .wb-share-btn { padding: 0; width: 38px; height: 38px; justify-content: center; }

  .wb-toolbar {
    left: 0; right: 0; bottom: 0;
    transform: none;
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    justify-content: flex-start;
    padding: 8px;
    gap: var(--space-1);
  }
  .wb-tool { width: 44px; height: 44px; }     /* comfortable touch targets */
  .wb-color input[type="color"] { width: 52px; height: 52px; }
  .wb-size { width: 70px; }

  /* Zoom sits above the taller mobile toolbar */
  .wb-zoom { bottom: calc(var(--space-3) + 72px); right: var(--space-3); }

  /* Contextual props can wrap onto the scrollable toolbar */
  .wb-swatches { display: none; }             /* colour input still available */
}

@media (max-width: 400px) {
  .wb-title { max-width: 30vw; }
  .wb-status { display: none; }               /* status still updates aria; hide chip */
}


/* ── Recent boards (create page) ──────────────────────────────── */
.board-recents {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.board-recents__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.board-recents__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.board-recents__clear {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.board-recents__clear:hover { color: var(--color-text-primary); }

.board-recents__list { display: flex; flex-direction: column; gap: var(--space-2); }

.board-recent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  transition: var(--transition);
}
.board-recent:hover { border-color: var(--color-purple-border); }
.board-recent__link {
  flex: 1; min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  text-decoration: none;
}
.board-recent__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-recent__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.board-recent__remove {
  flex-shrink: 0;
  width: 30px; height: 30px;
  margin-right: 6px;
  border: none; background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
}
.board-recent__remove:hover { background: var(--color-error-dim); color: var(--color-error); }


/* ── SEO content section (board landing) ──────────────────────── */
.board-seo {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-subtle);
}
.board-seo h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--space-8) 0 var(--space-3);
}
.board-seo h2:first-child { margin-top: 0; }
.board-seo p { color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--space-3); }
.board-seo ul, .board-seo ol { color: var(--color-text-secondary); line-height: 1.7; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 6px; }
.board-seo ul { list-style: disc; }
.board-seo ol { list-style: decimal; }
.board-seo strong { color: var(--color-text-primary); }

.board-faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-4); }
.board-faq__item h3 { font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--space-1); }
.board-faq__item p { font-size: var(--text-sm); }
@media (max-width: 640px) { .board-faq { grid-template-columns: 1fr; } }