/* Boomerang Projects — Scholar Plum shell stylesheet for the v0.2 feature pages
   Hand-authored to mirror the design tokens in assets/index-DI86cuet.css
   without depending on Tailwind. Pure CSS. */

:root {
  /* Scholar Plum palette (locked 2026-05-10) */
  --plum: #3B1E5E;
  --plum-deep: #2A1543;
  --plum-soft: hsl(286 57% 95%);     /* Plum Wash */
  --coral: #B43A28;
  --coral-soft: hsl(15 79% 93%);     /* Coral Wash */
  --sage: #2F6B45;
  --sage-soft: hsl(146 39% 93%);
  --ink-900: #0E1116;
  --ink-700: #3A4150;
  --ink-400: #A0A6B2;
  --paper: #FFFFFF;
  --cloud: #F6F8FB;
  --hairline: #E2E6EE;
  --warning: #C77700;

  /* Typography */
  --font-ui: 'Montserrat', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Radii */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  color: var(--ink-900);
  background: var(--cloud);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--plum); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout shell ---------- */

/* ---------- Global app-bar (always-visible, sits above sidebar+main) ----- */
/* The app-bar carries the Tier-2 hero logo, the Boomerang Projects wordmark, */
/* role badge, a guide link, and a slim trademark notice. Always visible.    */

.bp-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, #1B0D2D 0%, #2A1542 100%);
  color: #F5EEF8;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
}

.bp-appbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.bp-appbar-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.bp-appbar-wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: #fff;
}

.bp-appbar-wordmark em {
  color: #F4A672;
  font-style: italic;
  font-weight: 700;
}

.bp-appbar-tm {
  font-size: 9px;
  vertical-align: super;
  opacity: 0.55;
  margin-left: 2px;
  font-style: normal;
}

.bp-appbar-tagline {
  display: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.18);
}

@media (min-width: 900px) {
  .bp-appbar-tagline { display: inline-block; }
}

.bp-appbar-spacer { flex: 1; }

.bp-appbar-links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

.bp-appbar-links a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

.bp-appbar-links a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.bp-appbar-trademark {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  display: none;
}

@media (min-width: 1180px) {
  .bp-appbar-trademark { display: inline; }
}

/* ---------- App layout (now nested under the app-bar) ------------------- */

.bp-page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* When the page's outer host div is also tagged .bp-app (legacy markup),
   reset it so the inner .bp-app (the real sidebar+main grid) gets the grid. */
#bp-shell.bp-app,
body > .bp-app:has(> .bp-page-wrap) {
  display: block;
  grid-template-columns: none;
  width: 100%;
}

.bp-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
  /* 017b: establish a stacking context so the sidebar's z-index is scoped
     to this block and the site footer (a sibling outside .bp-app) always
     stacks on top when it enters the viewport. */
  position: relative;
  z-index: 1;
}

.bp-sidebar {
  background: var(--plum-deep);
  color: #EEE6F3;
  padding: var(--s-5) var(--s-3) var(--s-5) var(--s-3);
  position: sticky;
  /* Sidebar runs full height to the top of the viewport, but caps at the
     dynamic viewport height so mobile browsers with retracting URL bars
     do not push its bottom edge below the viewport. */
  top: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* 017b: stack under the site footer (z-index: 20) so the sidebar does not
     visually swim over the footer during the sticky-to-scroll handoff. */
  z-index: 5;
}

.bp-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  padding: 0 var(--s-2);
}

.bp-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
}

.bp-brand-text {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}

.bp-wordmark {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  padding: 0 var(--s-2);
  margin-top: var(--s-2);
}

.bp-wordmark em {
  color: var(--coral);
  font-style: italic;
  font-weight: 700;
}

.bp-sub {
  font-size: 11px;
  opacity: 0.6;
  padding: 0 var(--s-2);
  margin-bottom: var(--s-5);
}

.bp-nav-section {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
  padding: var(--s-4) var(--s-2) var(--s-2);
}

.bp-nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r);
  color: #EEE6F3;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.bp-nav-item:hover {
  background: rgba(255,255,255,0.06);
  text-decoration: none;
}

.bp-nav-item.active {
  background: var(--plum);
  color: #fff;
}

.bp-nav-item.new::after {
  content: 'NEW';
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--coral);
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
}

/* "demo" badge for nav items that exist as the demo workflow but aren't
   yet wired to the active class. Lower-key than the NEW badge — muted
   so the live entries stand out. */
.bp-nav-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
}
.bp-nav-item.active .bp-nav-tag {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.3);
}

.bp-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 015l — Locked nav item.
   Used when a studio's collaboration policy disables team items. We keep the
   item visible (so the user sees the feature exists) but mute it, remove the
   pointer, and append a small 🔒 icon. Tooltip explains why. */
.bp-nav-item.bp-nav-locked {
  opacity: 0.42;
  cursor: not-allowed;
  user-select: none;
}
.bp-nav-item.bp-nav-locked:hover {
  background: transparent;
  color: inherit;
}
.bp-nav-lock {
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.75;
}

.bp-footer-pill {
  margin-top: auto; /* push to bottom of flex sidebar */
  font-size: 11px;
  opacity: 0.5;
  padding: var(--s-4) var(--s-2) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

/* ---------- Main pane ---------- */

.bp-main {
  padding: var(--s-5) var(--s-6);
  max-width: 100%;
  overflow-x: hidden;
}

.bp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
  gap: var(--s-4);
}

.bp-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.bp-search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 13px;
}

.bp-search::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A6B2' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat;
}

.bp-role-toggle {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px;
}

.bp-role-toggle button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-700);
}

.bp-role-toggle button.active {
  background: var(--plum);
  color: #fff;
}

.bp-h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--plum);
  margin: 0 0 var(--s-2);
}

.bp-lede {
  color: var(--ink-700);
  font-size: 14px;
  max-width: 760px;
  margin: 0 0 var(--s-5);
}

.bp-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--plum);
  margin-bottom: var(--s-2);
}

/* ---------- Cards & tiles ---------- */

.bp-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}

.bp-card h2 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 var(--s-2);
  color: var(--plum);
}

.bp-card h3 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 var(--s-2);
  color: var(--ink-900);
}

.bp-row-card {
  border-left: 4px solid var(--plum);
  background: var(--plum-soft);
  padding: var(--s-4);
  border-radius: var(--r);
  margin-bottom: var(--s-3);
}

.bp-row-card.focused {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.bp-row-card h4 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  color: var(--plum);
}

.bp-row-card h4 .row-points {
  font-size: 10px;
  font-weight: 500;
  margin-left: var(--s-2);
  opacity: 0.6;
}

.bp-row-card .row-band {
  margin-top: var(--s-3);
  font-size: 12px;
  line-height: 1.5;
}

.bp-row-card .row-band b {
  color: var(--plum-deep);
}

.bp-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.bp-band {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  font-size: 11px;
  line-height: 1.4;
}

.bp-band .pts {
  font-weight: 700;
  color: var(--plum);
  display: block;
  margin-bottom: 2px;
}

/* ---------- Buttons ---------- */

.bp-btn {
  border: 0;
  background: var(--plum);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.15s;
}

.bp-btn:hover { background: var(--plum-deep); }

.bp-btn.coral { background: var(--coral); }
.bp-btn.coral:hover { background: #8E2D1F; }

.bp-btn.sage { background: var(--sage); }
.bp-btn.sage:hover { background: #245838; }

.bp-btn.ghost {
  background: transparent;
  color: var(--plum);
  border: 1px solid var(--hairline);
}
.bp-btn.ghost:hover { background: var(--plum-soft); }

.bp-btn.sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* ---------- Form controls ---------- */

.bp-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: var(--s-1);
}

.bp-input, .bp-select, .bp-textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.bp-input:focus, .bp-select:focus, .bp-textarea:focus {
  outline: 0;
  border-color: var(--plum);
  box-shadow: 0 0 0 3px rgba(59, 30, 94, 0.15);
}

.bp-textarea {
  resize: vertical;
  min-height: 80px;
}

.bp-segmented {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
}

.bp-segmented button {
  background: transparent;
  border: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--ink-700);
}

.bp-segmented button.active {
  background: var(--plum);
  color: #fff;
}

/* ---------- Pills & badges ---------- */

.bp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--plum-soft);
  color: var(--plum);
}

.bp-pill.coral { background: var(--coral-soft); color: var(--coral); }
.bp-pill.sage  { background: var(--sage-soft); color: var(--sage); }
.bp-pill.warn  { background: #FFF1D6; color: var(--warning); }

/* ---------- Stats / chips ---------- */

.bp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.bp-stat {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
}

.bp-stat .lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.bp-stat .val {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--plum);
  font-weight: 700;
}

.bp-stat .delta {
  font-size: 11px;
  color: var(--sage);
}

/* ---------- Toast / banner ---------- */

.bp-banner {
  background: var(--coral-soft);
  border: 1px solid var(--coral);
  border-left-width: 4px;
  border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: 13px;
}

.bp-banner.warn {
  background: #FFF7E5;
  border-color: var(--warning);
}

.bp-banner.sage {
  background: var(--sage-soft);
  border-color: var(--sage);
  color: var(--sage);
}

/* ---------- Two-column writer layout ---------- */

.bp-writer {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--s-4);
  min-height: calc(100vh - 220px);
}

.bp-writer .doc {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.bp-writer .doc h1 {
  font-family: var(--font-display);
  font-size: 32px;
  margin: 0 0 var(--s-3);
  color: var(--plum);
}

.bp-writer .doc h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: var(--s-5) 0 var(--s-3);
  color: var(--plum-deep);
}

.bp-writer .doc textarea {
  width: 100%;
  border: 0;
  outline: 0;
  resize: vertical;
  font-family: 'Lora', 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-900);
  padding: 0;
  background: transparent;
}

.bp-writer .rubric-rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-content: start;
}

.bp-section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: var(--s-2);
}

.bp-section-tag .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--plum);
}

/* ---------- Kanban ---------- */

.bp-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.bp-col {
  background: var(--cloud);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--s-3);
  min-height: 400px;
}

.bp-col h3 {
  font-family: var(--font-ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--s-3);
  color: var(--plum);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bp-col[data-col="peer-review"] h3 { color: var(--coral); }
.bp-col[data-col="done"] h3 { color: var(--sage); }

.bp-col h3 .cnt {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 10px;
  padding: 1px 8px;
  color: var(--ink-700);
}

.bp-task {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
  cursor: grab;
  font-size: 12px;
  line-height: 1.4;
  transition: box-shadow 0.15s, transform 0.15s;
}

.bp-task:hover {
  box-shadow: 0 4px 12px rgba(14,17,22,0.06);
  transform: translateY(-1px);
}

.bp-task.dragging {
  opacity: 0.4;
}

.bp-task .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-2);
  font-size: 10px;
  color: var(--ink-700);
}

.bp-task .meta .who {
  background: var(--plum-soft);
  color: var(--plum);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.bp-task .rubric-tag {
  font-size: 10px;
  color: var(--coral);
  font-weight: 700;
  margin-top: var(--s-1);
  letter-spacing: 0.05em;
}

/* ---------- RAVEN scorecard ---------- */

.bp-raven-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.bp-raven-letter {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  text-align: center;
}

.bp-raven-letter .letter {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--plum);
  display: block;
}

.bp-raven-letter .lbl {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  display: block;
  margin: 2px 0 var(--s-1);
}

.bp-raven-letter input[type=range] {
  width: 100%;
  margin: 0;
}

.bp-raven-letter .score {
  font-size: 11px;
  font-weight: 700;
  color: var(--plum);
  margin-top: 2px;
}

.bp-raven-letter.low .letter { color: var(--coral); }
.bp-raven-letter.low .score { color: var(--coral); }

.bp-source {
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--paper);
}

.bp-source.flagged {
  border-color: var(--coral);
  background: linear-gradient(to right, var(--coral-soft) 4px, var(--paper) 4px);
}

.bp-source .header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.bp-source .citation {
  font-family: 'Lora', Georgia, serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-900);
}

.bp-source .annotation {
  font-size: 12px;
  color: var(--ink-700);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--hairline);
  white-space: pre-wrap;
}

.bp-source-meta {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}

/* ---------- Comments ---------- */

.bp-comment {
  background: var(--coral-soft);
  border-left: 3px solid var(--coral);
  padding: var(--s-2) var(--s-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--s-2);
  font-size: 12px;
}

.bp-comment .who {
  font-weight: 700;
  font-size: 11px;
  color: var(--coral);
  margin-bottom: 2px;
}

.bp-comment .row-link {
  font-size: 10px;
  background: var(--coral);
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: var(--s-2);
}

/* ---------- Utility ---------- */

.bp-flex { display: flex; gap: var(--s-3); align-items: center; }
.bp-flex.tight { gap: var(--s-2); }
.bp-flex.between { justify-content: space-between; }
.bp-flex.col { flex-direction: column; align-items: stretch; }
.bp-mt-3 { margin-top: var(--s-3); }
.bp-mt-4 { margin-top: var(--s-4); }
.bp-mb-3 { margin-bottom: var(--s-3); }
.bp-mb-4 { margin-bottom: var(--s-4); }
.bp-small { font-size: 11px; color: var(--ink-700); }
.bp-mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; font-size: 12px; }

@media (max-width: 1000px) {
  .bp-writer { grid-template-columns: 1fr; }
  .bp-kanban { grid-template-columns: 1fr 1fr; }
  .bp-app { grid-template-columns: 1fr; }
  .bp-sidebar { position: static; height: auto; }
}

/* Privacy note (FERPA/COPPA-aware) — build 011, shell-mounted pages */
.bp-privacy-note {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: 1.5rem 0 0; padding: 0.75rem 0.9rem;
  background: #FAF8FB; border: 1px solid #F2EBF5; border-radius: 8px;
  font-family: 'Lora', Georgia, serif; font-size: 0.82rem; line-height: 1.5;
  color: #5A4E68;
}
.bp-privacy-icon { font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.bp-privacy-text a { color: #3B1E5E; text-decoration: underline; }
.bp-privacy-text a:hover { text-decoration: none; }

/* ============================================================
   Bell icon + notifications panel (build 013)
   ============================================================ */
.bp-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid #E8DFF0; background: #FFF; border-radius: 999px;
  color: #3B1E5E; cursor: pointer; padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.bp-bell:hover { background: #F2EBF5; border-color: #D8C8E0; }
.bp-bell:focus { outline: 2px solid #B89BD9; outline-offset: 1px; }

.bp-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #B43A28; color: #FFF;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  border: 2px solid #FFF;
  box-sizing: content-box;
}

.bp-bell-panel {
  width: 340px; max-height: 70vh; overflow: hidden;
  background: #FFF; border: 1px solid #E8DFF0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(27, 13, 45, 0.12);
  z-index: 1000;
  font-family: 'Montserrat', sans-serif;
}
.bp-bell-panel-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F2EBF5;
  font-weight: 600; color: #1B0D2D; font-size: 0.9rem;
}
.bp-bell-panel-list {
  max-height: calc(70vh - 48px); overflow-y: auto;
}
.bp-bell-item {
  display: block; padding: 0.7rem 1rem;
  border-bottom: 1px solid #F2EBF5;
  text-decoration: none; color: inherit;
}
.bp-bell-item:last-child { border-bottom: none; }
.bp-bell-item:hover { background: #FAF8FB; }
.bp-bell-item.unread { background: #FAF4FF; }
.bp-bell-item.unread:hover { background: #F2EBF5; }
.bp-bell-item-title {
  font-size: 0.85rem; font-weight: 600; color: #1B0D2D; margin-bottom: 0.15rem;
}
.bp-bell-item-sub {
  font-size: 0.8rem; color: #5A4E68; margin-bottom: 0.2rem;
}
.bp-bell-item-when {
  font-size: 0.7rem; color: #9A8FA5; letter-spacing: 0.02em;
}
.bp-bell-empty {
  padding: 1.5rem 1rem; text-align: center; color: #7A6E85; font-size: 0.85rem;
}

/* ---------- Site-wide legal footer ------------------------------------- */
/* Always visible at the bottom of every page. Carries trademark, FERPA,  */
/* privacy, and copyright disclosures.                                    */

.bp-sitefooter {
  background: #F5F1FA;
  border-top: 1px solid #E0D4ED;
  color: #5A4E68;
  padding: 28px 28px 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  /* 017b: keep the footer on its own stacking layer above the sidebar so
     the sticky sidebar never visually pokes above the footer as it enters
     the viewport. Sibling of .bp-app inside .bp-page-wrap. */
  position: relative;
  z-index: 20;
}

.bp-sitefooter-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
}

@media (max-width: 820px) {
  .bp-sitefooter-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .bp-sitefooter-grid { grid-template-columns: 1fr; }
}

.bp-sitefooter-col h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  margin: 0 0 10px;
  color: #3B1E5E;
  letter-spacing: 0.02em;
}

.bp-sitefooter-col p,
.bp-sitefooter-col li {
  margin: 4px 0;
  color: #5A4E68;
}

.bp-sitefooter-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bp-sitefooter-col a {
  color: #3B1E5E;
  text-decoration: none;
}

.bp-sitefooter-col a:hover { text-decoration: underline; }

.bp-sitefooter-legal {
  max-width: 1200px;
  margin: 20px auto 0;
  padding-top: 16px;
  border-top: 1px solid #E0D4ED;
  font-size: 11px;
  color: #7A6E85;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.bp-sitefooter-trademark {
  background: #FFF;
  border: 1px solid #E0D4ED;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px;
  color: #5A4E68;
  font-size: 11.5px;
  line-height: 1.5;
}

.bp-sitefooter-trademark strong { color: #3B1E5E; }

/* ---------- Role-restricted page lock screen --------------------------- */
/* Shown when a student lands on a teacher-only page via direct URL.      */

.bp-restricted {
  max-width: 560px;
  margin: 80px auto;
  padding: 32px;
  background: #FFF;
  border: 1px solid #E0D4ED;
  border-radius: 16px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.bp-restricted-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2EBF5;
  border-radius: 999px;
  color: #3B1E5E;
}

.bp-restricted h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  color: #1B0D2D;
  margin: 0 0 8px;
}

.bp-restricted p {
  font-family: 'Lora', Georgia, serif;
  font-size: 14px;
  color: #5A4E68;
  margin: 0 0 20px;
  line-height: 1.55;
}

.bp-restricted a {
  display: inline-block;
  background: #3B1E5E;
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bp-restricted a:hover { background: #2A1542; }

/* ---------------------------------------------------------------------
   Build 017a — global :focus-visible ring
   Keyboard users need a visible focus indicator; the browser default is
   inconsistent across engines and often clashes with the plum accent.
   :focus-visible only fires for keyboard-driven focus, so mouse users
   don't see the ring on click. Plum is the shared UI accent across the
   AP Seminar studio; individual-scoped surfaces use terracotta via the
   .indiv-scope wrapper.
   --------------------------------------------------------------------- */

:focus { outline: none; }

*:focus-visible {
  outline: 3px solid #3B1E5E;         /* plum */
  outline-offset: 2px;
  border-radius: 4px;
}

.indiv-scope *:focus-visible,
[data-scope="individual"] *:focus-visible {
  outline-color: #B43A28;             /* terracotta for individual-project screens */
}

/* Inputs, textareas, selects: the outline sits outside the border so
   the corner radius doesn't collide with the field's own rounding. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}