/* =====================================================================
   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.
   ===================================================================== */

/* Personal Journal is isolated from the earlier shared Notebook and all routes. */
#qbj-panel[hidden], #qbj-panel [hidden] { display: none !important; }
#qbj-panel {
  --qbj-accent: #315f46; --qbj-soft: #e5efdf; --qbj-ground: #f2f5ef;
  --qbj-paper: #fffefb; --qbj-ink: #243c30; --qbj-muted: #58675d; --qbj-line: #dce4d9;
  --qbj-size: 18px;
  position: fixed; inset: 12px; z-index: 1260; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  color: var(--qbj-ink); background: var(--qbj-ground); border: 1px solid var(--qbj-line);
  border-radius: 12px; box-shadow: 0 12px 60px #15231b35; overflow: hidden;
  font: 15px/1.5 system-ui, -apple-system, sans-serif;
}
#qbj-panel[data-theme="sky"] { --qbj-accent: #275579; --qbj-soft: #deedf6; --qbj-ground: #f0f5f9; --qbj-ink: #233d51; --qbj-line: #d4e1e9; }
#qbj-panel[data-theme="lavender"] { --qbj-accent: #645181; --qbj-soft: #ece4f4; --qbj-ground: #f5f1f8; --qbj-ink: #3f334e; --qbj-line: #e0d8e7; }
#qbj-panel[data-theme="rose"] { --qbj-accent: #844a60; --qbj-soft: #f4e1e9; --qbj-ground: #faf1f5; --qbj-ink: #503440; --qbj-line: #ead6df; }
#qbj-panel[data-theme="sand"] { --qbj-accent: #795a31; --qbj-soft: #f1e7d6; --qbj-ground: #f7f3ec; --qbj-ink: #493b29; --qbj-line: #e6ddce; }
#qbj-panel *, #qbj-panel *::before, #qbj-panel *::after { box-sizing: border-box; }
#qbj-panel button, #qbj-panel summary, #qbj-panel select { font: inherit; cursor: pointer; }
#qbj-panel button, #qbj-panel summary {
  min-height: 36px; padding: 6px 11px; border: 1px solid var(--qbj-line); border-radius: 6px;
  background: var(--qbj-paper); color: var(--qbj-ink); text-align: left;
}
#qbj-panel button:hover, #qbj-panel summary:hover { background: var(--qbj-soft); }
#qbj-panel :focus-visible { outline: 2px solid var(--qbj-accent); outline-offset: 2px; }
#qbj-panel input, #qbj-panel select, #qbj-panel textarea {
  font: inherit; color: var(--qbj-ink); background: var(--qbj-paper); border: 1px solid var(--qbj-line);
  border-radius: 5px; padding: 6px 8px; max-width: 100%; min-width: 0;
}
#qbj-panel input::placeholder, #qbj-panel textarea::placeholder { color: #737b74; opacity: 1; }
#qbj-panel .qbj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#qbj-panel .qbj-head > div { min-width: 0; }
#qbj-panel .qbj-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; color: var(--qbj-muted); }
#qbj-panel h2 { margin: 0; font: 26px/1.25 Georgia, serif; overflow-wrap: anywhere; }
#qbj-panel h3 { margin: 0 0 10px; font-size: 13px; color: var(--qbj-muted); font-weight: 600; }
#qbj-panel .qbj-toolbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
#qbj-panel .qbj-narrow { display: none; }
#qbj-panel .qbj-ideas > summary { display: list-item; width: fit-content; color: var(--qbj-muted); border: 0; padding-left: 0; }
#qbj-panel .qbj-ideas .qbj-guide { margin-top: 8px; }
#qbj-panel [data-action="new"], #qbj-panel [data-action="use"] { color: #fff; background: var(--qbj-accent); border-color: var(--qbj-accent); }
#qbj-panel .qbj-custom, #qbj-panel .qbj-more { position: relative; }
#qbj-panel .qbj-custom-fields, #qbj-panel .qbj-more-body {
  position: absolute; top: calc(100% + 4px); left: 0; width: min(370px, calc(100vw - 56px));
  z-index: 3; padding: 12px; background: var(--qbj-paper); border: 1px solid var(--qbj-line);
  border-radius: 8px; box-shadow: 0 8px 24px #18211920; max-height: 60dvh; overflow-y: auto;
}
#qbj-panel .qbj-more-body { left: auto; right: 0; }
#qbj-panel .qbj-custom-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#qbj-panel .qbj-custom-fields label { display: grid; gap: 3px; font-size: 13px; }
#qbj-panel .qbj-custom-fields label:first-child { grid-column: 1 / -1; }
#qbj-panel .qbj-more-body button { display: block; width: 100%; margin-bottom: 6px; }
#qbj-panel .qbj-more-body p { font-size: 13px; margin: 10px 0 0; }
#qbj-panel .qbj-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 12px; min-height: 0; flex: 1; }
#qbj-panel .qbj-layout:not(.qbj-list-open) { grid-template-columns: minmax(0,1fr); }
#qbj-panel .qbj-layout:not(.qbj-list-open) #qbj-sidebar { display: none; }
#qbj-panel #qbj-sidebar { overflow: auto; min-width: 0; padding-right: 8px; }
#qbj-panel #qbj-pages { display: flex; flex-direction: column; gap: 4px; }
#qbj-panel #qbj-pages button { display: grid; width: 100%; gap: 2px; border-color: transparent; background: transparent; }
#qbj-panel #qbj-pages button[aria-current="page"] { background: var(--qbj-soft); border-color: var(--qbj-line); }
#qbj-panel #qbj-pages time { font-size: 11px; color: var(--qbj-muted); }
#qbj-panel #qbj-pages span { overflow-wrap: anywhere; font-weight: 600; }
#qbj-panel #qbj-pages p { font-size: 13px; color: var(--qbj-muted); }
#qbj-panel .qbj-page { background: var(--qbj-paper); border: 1px solid var(--qbj-line); border-radius: 8px; padding: 14px 18px; min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
#qbj-panel .qbj-page-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; flex-wrap: wrap; }
#qbj-panel .qbj-date { display: flex; align-items: center; gap: 6px; }
#qbj-panel #qbj-status { color: var(--qbj-muted); flex: 1; }
#qbj-panel #qbj-status.qbj-error { color: #993220; font-weight: 600; }
#qbj-panel #qbj-page-title { width: 100%; padding: 6px 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--qbj-line); font: 24px/1.4 Georgia, serif; }
#qbj-panel .qbj-guide { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; font-size: 13px; }
#qbj-panel .qbj-guide label { display: flex; align-items: center; gap: 8px; }
#qbj-panel .qbj-guide details { flex: 1; min-width: 170px; }
#qbj-panel .qbj-guide summary { border: 0; background: transparent; padding: 7px 0; color: var(--qbj-muted); }
#qbj-panel .qbj-guide p { margin: 6px 0; }
#qbj-panel .qbj-question { padding: 10px 12px; border-left: 3px solid var(--qbj-accent); background: var(--qbj-soft); border-radius: 0 6px 6px 0; }
#qbj-panel .qbj-question strong { font-size: 17px; font-weight: 600; }
#qbj-panel .qbj-question p { font-size: 13px; margin: 4px 0 8px; }
#qbj-panel .qbj-actions { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
#qbj-panel .qbj-writing { display: flex; flex: 1; min-height: 220px; }
#qbj-panel #qbj-text { width: 100%; flex: 1; min-height: 220px; resize: vertical; border: 0; border-radius: 0; padding: 4px 0; font-size: var(--qbj-size); line-height: 1.8; background-color: transparent; }
#qbj-panel[data-paper="lines"] #qbj-text { background-image: repeating-linear-gradient(transparent 0,transparent calc(1.8em - 1px),var(--qbj-line) calc(1.8em - 1px),var(--qbj-line) 1.8em); background-position: 0 4px; background-attachment: local; }
#qbj-panel[data-paper="dots"] #qbj-text { background-image: radial-gradient(var(--qbj-line) 1px,transparent 1px); background-size: 18px 18px; background-attachment: local; }
#qbj-panel[data-font="serif"] #qbj-text { font-family: Georgia, serif; }
#qbj-panel[data-font="rounded"] #qbj-text { font-family: ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif; }
#qbj-panel .qbj-stickers { display: flex; gap: 6px; flex-wrap: wrap; }
#qbj-panel .qbj-stickers:empty { display: none; }
#qbj-panel .qbj-stickers button { border: 0; background: transparent; font-size: 24px; padding: 0 4px; }
#qbj-panel .qbj-page-footer { display: flex; justify-content: space-between; gap: 10px; align-items: flex-end; font-size: 12px; color: var(--qbj-muted); }
#qbj-panel .qbj-sticker-picker { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 6px; }
#qbj-panel .qbj-sticker-picker button { font-size: 22px; }
#qbj-panel .qbj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 700px) {
  #qbj-panel { inset: 4px; padding: 10px; gap: 8px; border-radius: 8px; }
  #qbj-panel h2 { font-size: 23px; }
  #qbj-panel .qbj-toolbar { gap: 4px; }
  #qbj-panel .qbj-toolbar > button, #qbj-panel .qbj-toolbar > details > summary { font-size: 13px; padding: 6px 8px; }
  #qbj-panel .qbj-narrow { display: inline; }
  #qbj-panel .qbj-wide { display: none; }
  #qbj-panel button, #qbj-panel summary, #qbj-panel select { min-height: 44px; }
  #qbj-panel .qbj-layout { grid-template-columns: minmax(0,1fr); }
  #qbj-panel #qbj-sidebar { display: none; }
  #qbj-panel .qbj-list-open #qbj-sidebar { display: block; }
  #qbj-panel .qbj-list-open .qbj-page { display: none; }
  #qbj-panel .qbj-page { padding: 10px; }
  #qbj-panel .qbj-page-meta { gap: 6px; }
  #qbj-panel #qbj-status { order: 3; flex-basis: 100%; }
  #qbj-panel [data-action="save"] { margin-left: auto; }
  #qbj-panel .qbj-guide label { display: grid; gap: 2px; width: 100%; }
  #qbj-panel #qbj-page-title { font-size: 22px; }
  #qbj-panel .qbj-custom-fields, #qbj-panel .qbj-more-body { position: fixed; top: 130px; left: 14px; right: 14px; width: auto; }
  #qbj-panel .qbj-page-footer { align-items: flex-start; }
}

#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; }

/* Planner presentation: personal Journal only; no shared Notebook selectors. */
#qbj-panel .qbj-navigation { display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; }
#qbj-panel .qbj-views, #qbj-panel .qbj-period { display:flex; align-items:center; gap:4px; }
#qbj-panel .qbj-views button { background:transparent; border-color:transparent; }
#qbj-panel .qbj-views button[aria-pressed="true"] { background:var(--qbj-soft); border-color:var(--qbj-line); }
#qbj-panel .qbj-period { font-size:12px; }
#qbj-panel .qbj-period button { padding:3px 9px; }
#qbj-panel .qbj-planner { position:relative; flex:1; min-height:0; overflow:auto; padding:0 34px 8px 0; }
#qbj-panel .qbj-book { background:var(--qbj-paper); border:1px solid var(--qbj-line); border-radius:6px 3px 3px 6px; min-height:560px; box-shadow:0 3px var(--qbj-line),0 5px var(--qbj-paper),0 6px var(--qbj-line); }
#qbj-panel .qbj-month-tabs { position:absolute; top:5px; right:0; width:34px; display:grid; gap:3px; }
#qbj-panel .qbj-month-tabs button { padding:6px 2px; min-height:43px; border-radius:0 5px 5px 0; font-size:11px; text-align:center; background:#f5e1df; }
#qbj-panel .qbj-month-tabs button:nth-child(3n+2) { background:#e4edda; }
#qbj-panel .qbj-month-tabs button:nth-child(3n) { background:#e9e1f1; }
#qbj-panel .qbj-month-tabs button[aria-current="true"] { box-shadow:inset -3px 0 var(--qbj-accent); font-weight:700; }
#qbj-panel .qbj-sheet-head { padding:14px 20px; border-bottom:1px solid var(--qbj-line); min-height:78px; }
#qbj-panel .qbj-sheet-head small { font-size:10px; letter-spacing:.13em; color:var(--qbj-muted); }
#qbj-panel .qbj-sheet-head h2 { font-size:25px; font-weight:400; }
#qbj-panel .qbj-sheet-head p { font-size:12px; margin:4px 0 0; color:var(--qbj-muted); }
#qbj-panel .qbj-spread { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:560px; }
#qbj-panel .qbj-spread::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:14px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,#64554020,transparent); pointer-events:none; }
#qbj-panel .qbj-sheet { min-width:0; }
#qbj-panel .qbj-day { padding:0 18px 10px; border-bottom:1px solid var(--qbj-line); min-height:118px; }
#qbj-panel .qbj-day-heading { display:flex; align-items:center; width:100%; gap:10px; padding:6px 0; border:0; border-radius:0; background:transparent; }
#qbj-panel .qbj-day-heading b { font:24px/1.5 Georgia,serif; }
#qbj-panel .qbj-day-heading span { font-size:13px; }
#qbj-panel .qbj-day-heading small { margin-left:auto; font-size:11px; color:var(--qbj-muted); }
#qbj-panel [aria-current="date"] { box-shadow:inset 0 -2px var(--qbj-accent); }
#qbj-panel .qbj-empty { margin:0; padding:6px 0 10px; color:var(--qbj-muted); font-size:13px; border-bottom:1px dashed var(--qbj-line); }
#qbj-panel .qbj-entry { display:grid; gap:3px; width:100%; padding:8px 10px; margin:3px 0; background:var(--qbj-soft); border-color:transparent; overflow-wrap:anywhere; }
#qbj-panel .qbj-entry span { white-space:pre-wrap; font-size:14px; }
#qbj-panel .qbj-entry small:empty { display:none; }
#qbj-panel .qbj-calendar { padding:12px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; }
#qbj-panel .qbj-calendar > strong { text-align:center; font-size:12px; padding:6px 0; }
#qbj-panel .qbj-calendar > button, #qbj-panel .qbj-calendar > div { min-height:80px; border-radius:0; padding:7px; border:1px solid var(--qbj-line); }
#qbj-panel .qbj-calendar button { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
#qbj-panel .qbj-calendar small { font-size:10px; color:var(--qbj-accent); }
#qbj-panel .qbj-calendar span { font-size:12px; overflow-wrap:anywhere; }
#qbj-panel .qbj-cover-art { min-height:560px; display:grid; place-items:center; padding:28px; background-color:var(--qbj-soft); background-image:radial-gradient(ellipse at 20% 30%,#ffffff80 0 14%,transparent 15%),radial-gradient(ellipse at 80% 75%,#ffffff60 0 12%,transparent 13%),repeating-linear-gradient(35deg,transparent 0 40px,#ffffff30 41px 44px,transparent 45px 90px); background-size:180px 220px,220px 200px,auto; }
#qbj-panel .qbj-cover-plaque { padding:30px 24px; width:min(460px,100%); text-align:center; background:var(--qbj-paper); border:1px solid var(--qbj-line); outline:5px solid #ffffff80; box-shadow:0 6px 24px #64554015; }
#qbj-panel .qbj-cover-plaque > span { font-size:11px; letter-spacing:.1em; }
#qbj-panel .qbj-cover-plaque h2 { font-size:38px; margin:16px 0; font-weight:400; }
#qbj-panel .qbj-cover-plaque p { color:var(--qbj-muted); }
#qbj-panel .qbj-writing { flex:none; display:block; }
#qbj-panel #qbj-text { display:block; resize:none; overflow:hidden; }
#qbj-panel #qbj-planner-status { font-size:12px; color:var(--qbj-muted); }
#qbj-panel #qbj-planner-status:empty { display:none; }
#qbj-panel #qbj-planner-status.qbj-error { color:#993220; }
@media(max-width:700px) {
 #qbj-panel .qbj-navigation { gap:4px; }
 #qbj-panel .qbj-views { width:100%; }
 #qbj-panel .qbj-views button { flex:1; text-align:center; padding:4px 6px; font-size:13px; }
 #qbj-panel .qbj-period { width:100%; justify-content:space-between; }
 #qbj-panel .qbj-spread { display:block; }
 #qbj-panel .qbj-spread::after { display:none; }
 #qbj-panel .qbj-sheet-head { padding:12px; }
 #qbj-panel .qbj-sheet-head h2 { font-size:22px; }
 #qbj-panel .qbj-day { padding:0 12px 10px; }
 #qbj-panel .qbj-calendar { padding:4px; }
 #qbj-panel .qbj-calendar > button, #qbj-panel .qbj-calendar > div { min-height:65px; padding:3px; }
 #qbj-panel .qbj-calendar span { display:none; }
 #qbj-panel .qbj-calendar small { font-size:9px; }
 #qbj-panel .qbj-cover-art { padding:20px; }
 #qbj-panel .qbj-cover-plaque { padding:22px 12px; }
 #qbj-panel .qbj-cover-plaque h2 { font-size:30px; }
}

/* -------- 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;
}