/* =====================================================================
   wordlab-notes.css — 📒 Our Notebook (Keep-style shared family notes)
   Popup shell mirrors wordlab-math-robot.css: fixed above the bottom bar,
   compact by default, ⤢ enlarges via the --qbn-scale custom property.
   Card themes are pure CSS (colours + drawn motifs) — no images, no egress.
   ===================================================================== */

#qb-notes-shell[hidden],
.qbn-panel[hidden] { display: none !important; }

#qb-notes-shell {
  --qbn-ink: #2b3550;
  --qbn-blue: #245e9c;
  position: fixed;
  right: 14px;
  bottom: calc(var(--qbn-nav-clearance, 112px) + env(safe-area-inset-bottom, 0px));
  z-index: 1250;
  color: var(--qbn-ink);
  font-family: inherit;
}

.qbn-panel {
  --qbn-scale: 1;
  position: fixed;
  right: 14px;
  bottom: calc(var(--qbn-nav-clearance, 108px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  width: min(420px, calc(100vw - 24px));
  max-height: min(660px, calc(100dvh - var(--qbn-nav-clearance, 108px) - 14px));
  padding: 12px;
  flex-direction: column;
  gap: 9px;
  border: 2px solid #e2cf9b;
  border-radius: 20px;
  background: linear-gradient(160deg, #fffdf6 0%, #fdf6e4 100%);
  box-shadow: 0 22px 64px rgba(82, 62, 18, .28);
  overflow: hidden;
}
.qbn-panel--large {
  --qbn-scale: 1.25;
  width: min(880px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--qbn-nav-clearance, 108px) - 14px);
}

.qbn-head { display: flex; gap: 8px; align-items: center; }
.qbn-head-ico { font-size: calc(22px * var(--qbn-scale)); line-height: 1; }
.qbn-head-titles { flex: 1 1 auto; min-width: 0; }
.qbn-head-titles strong { display: block; color: #6b4d12; font-size: calc(18px * var(--qbn-scale)); line-height: 1.1; }
.qbn-head-titles span { display: block; color: #937947; font-size: calc(10.5px * var(--qbn-scale)); }
.qbn-head button {
  display: grid;
  height: 32px;
  padding: 0 10px;
  place-items: center;
  border: 1px solid #dcc78f;
  border-radius: 999px;
  background: #fff;
  color: #6b4d12;
  font: inherit;
  font-size: calc(12px * var(--qbn-scale));
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.qbn-head button:hover { border-color: #b98f2f; color: #3d2c07; }

/* -------- child picker (grown-up view) -------- */
.qbn-kids { display: flex; gap: 6px; flex-wrap: wrap; }
.qbn-kids button {
  padding: 4px 11px;
  border: 1px solid #dcc78f;
  border-radius: 999px;
  background: #fff;
  color: #6b4d12;
  font: inherit;
  font-size: calc(11.5px * var(--qbn-scale));
  font-weight: 800;
  cursor: pointer;
}
.qbn-kids button.active { border-color: #8a6410; background: #f4e2ae; color: #3d2c07; }

/* -------- compose card -------- */
.qbn-compose {
  padding: 9px;
  border: 1.5px solid #e0cd97;
  border-radius: 14px;
  background: #fffef9;
  box-shadow: 0 4px 12px rgba(96, 74, 22, .08);
}
.qbn-compose input[type="text"],
.qbn-compose textarea,
.qbn-compose select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e6d7a8;
  border-radius: 9px;
  background: #fff;
  color: var(--qbn-ink);
  font: inherit;
  font-size: calc(14px * var(--qbn-scale)) !important;
}
.qbn-compose textarea { min-height: 56px; resize: vertical; }
.qbn-compose-title { margin-bottom: 6px; font-weight: 800; }
.qbn-compose-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.qbn-compose-row select, .qbn-compose-row input[type="text"] { width: auto; flex: 1 1 110px; min-width: 0; }
.qbn-add {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: #8a6410;
  color: #fff;
  font: inherit;
  font-size: calc(13px * var(--qbn-scale));
  font-weight: 900;
  cursor: pointer;
}
.qbn-add:hover { background: #6d4e0a; }
.qbn-cancel { padding: 7px 12px; border: 1px solid #dcc78f; border-radius: 999px; background: #fff; color: #6b4d12; font: inherit; font-size: calc(12px * var(--qbn-scale)); font-weight: 800; cursor: pointer; }
.qbn-note-hint { display: block; margin-top: 4px; color: #a08a55; font-size: calc(10px * var(--qbn-scale)); }
.qbn-fill-warn { display: block; margin-top: 4px; color: #a33f00; font-size: calc(10.5px * var(--qbn-scale)); font-weight: 800; }

/* theme swatches */
.qbn-swatches { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.qbn-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  font-size: 0;
  cursor: pointer;
}
.qbn-swatch.active { border-color: #3d2c07; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b98f2f; }

/* -------- filter chips -------- */
.qbn-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qbn-chips button {
  padding: 3px 10px;
  border: 1px solid #e0cd97;
  border-radius: 999px;
  background: #fffef9;
  color: #6b4d12;
  font: inherit;
  font-size: calc(11px * var(--qbn-scale));
  font-weight: 800;
  cursor: pointer;
}
.qbn-chips button.active { border-color: #8a6410; background: #f4e2ae; color: #3d2c07; }

/* -------- board: Google-Keep-style SQUARE tiles (owner feedback 2026-08-26) --------
   Closed tiles are squares in a dense grid, so many notes fit on screen at once;
   every tile always shows its 📅 date + topic footer. Tapping a tile expands it
   to full width (aspect unlocked) with the full text and the action row. */
.qbn-board {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  align-content: start;
}
.qbn-panel--large .qbn-board { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
.qbn-empty { grid-column: 1 / -1; color: #a08a55; font-size: calc(13px * var(--qbn-scale)); text-align: center; padding: 18px 6px; }

.qbn-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 8px 9px;
  border: 1.5px solid rgba(96, 74, 22, .18);
  border-radius: 13px;
  box-shadow: 0 3px 9px rgba(96, 74, 22, .08);
  overflow: hidden;
  cursor: pointer;
}
.qbn-card:hover { border-color: #b98f2f; }
.qbn-card--open {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  cursor: auto;
}
.qbn-card.qbn-pinned { border-color: #b98f2f; box-shadow: 0 4px 12px rgba(148, 106, 15, .22); }
.qbn-card-pin { position: absolute; top: 4px; right: 6px; font-size: calc(11px * var(--qbn-scale)); pointer-events: none; }
.qbn-card-title {
  margin-bottom: 3px;
  padding-right: 12px;
  color: #3a3013;
  font-size: calc(13px * var(--qbn-scale));
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qbn-card--open .qbn-card-title { -webkit-line-clamp: unset; font-size: calc(14px * var(--qbn-scale)); }
.qbn-card-text {
  flex: 1 1 auto;
  min-height: 0;
  color: #423a20;
  font-size: calc(11.5px * var(--qbn-scale));
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow: hidden;
}
.qbn-card--open .qbn-card-text { flex: 0 0 auto; overflow: visible; font-size: calc(13px * var(--qbn-scale)); line-height: 1.4; }
/* the always-visible footer: 📅 date + topic — what the student scans by */
.qbn-card-meta { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; align-items: center; flex: 0 0 auto; }
.qbn-card-meta span {
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(96, 74, 22, .16);
  color: #5c4a1c;
  font-size: calc(9.5px * var(--qbn-scale));
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qbn-card-meta .qbn-card-date { background: #fdf3d3; border-color: #dcc78f; color: #6b4d12; }
.qbn-card-meta .qbn-card-topic { background: #e7f2ff; border-color: #a9c6e8; color: #2c568f; }
.qbn-card-meta .qbn-from-parent { background: #ffe9f0; border-color: #e8a9c0; color: #90325c; }
.qbn-card-actions { display: flex; gap: 4px; margin-top: 6px; justify-content: flex-end; }
.qbn-card-actions button {
  padding: 2px 8px;
  border: 1px solid rgba(96, 74, 22, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .75);
  font: inherit;
  font-size: calc(12px * var(--qbn-scale));
  line-height: 1.3;
  cursor: pointer;
}
.qbn-card-actions button:hover { background: #fff; border-color: #8a6410; }
.qbn-card-actions button.qbn-on { border-color: #8a6410; background: #f4e2ae; }

/* 📁 move-to-folder picker (opens inside the card) */
.qbn-move {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  padding: 6px;
  border: 1px dashed rgba(96, 74, 22, .35);
  border-radius: 9px;
  background: rgba(255, 255, 255, .8);
}
.qbn-move-label { color: #6b5a2b; font-size: calc(10px * var(--qbn-scale)); font-weight: 900; }
.qbn-move button {
  padding: 2px 8px;
  border: 1px solid rgba(96, 74, 22, .25);
  border-radius: 999px;
  background: #fffef9;
  font: inherit;
  font-size: calc(11px * var(--qbn-scale));
  font-weight: 800;
  color: #5c4a1c;
  cursor: pointer;
}
.qbn-move button:hover { border-color: #8a6410; background: #f4e2ae; }

/* -------- note themes (pure CSS, no images) -------- */
.qbn-t-paper { background: #fffef8; }
.qbn-t-sun   { background: #fff3c4; }
.qbn-t-mint  { background: #ddf5e4; }
.qbn-t-sky   { background: #ddeeff; }
.qbn-t-rose  { background: #ffe4ea; }
.qbn-t-lav   { background: #ecdff9; }
.qbn-t-dots  { background: #fffef8 radial-gradient(circle, rgba(138, 100, 16, .22) 1.3px, transparent 1.6px); background-size: 14px 14px; }
.qbn-t-lines { background: #fffef8 repeating-linear-gradient(180deg, transparent 0 20px, rgba(36, 94, 156, .16) 20px 21px); }
.qbn-t-stars { background: #eef2ff; position: relative; }
.qbn-t-stars::before { content: "✦ ✧ ✦"; position: absolute; top: 3px; right: 8px; color: rgba(76, 96, 175, .4); font-size: 9px; letter-spacing: 3px; pointer-events: none; }

/* -------- home-bar tab badge dot -------- */
.qbn-tab-dot {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #e0507a;
  box-shadow: 0 0 0 2px #fff;
}