/* ═══════════ EDITOR AREA ═══════════ */
.editor-area{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:1.5rem;overflow-y:auto;background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(26,26,46,0.03) 1px, transparent 0);
  background-size:24px 24px}

/* 2026-05-23: toolbar max-width raised 680→1200 to stay visually
   anchored above the tablet (which jumped to 1200 same date). A
   narrow toolbar over a wide tablet read as misaligned. */
.editor-toolbar{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.25rem;width:100%;max-width:1200px}
.editor-toolbar-group{display:flex;align-items:center;gap:0.25rem;background:var(--surface);
  border-radius:var(--radius-sm);padding:0.2rem;box-shadow:var(--shadow-sm);border:1px solid var(--border-light)}
.toolbar-btn{padding:0.45rem 0.65rem;border-radius:6px;font-size:0.8rem;font-weight:500;
  color:var(--ink-soft);transition:all var(--transition);display:flex;align-items:center;gap:0.35rem}
.toolbar-btn:hover{background:var(--surface-active);color:var(--ink)}
.toolbar-btn.active{background:var(--amber);color:#fff}
.toolbar-sep{width:1px;height:20px;background:var(--border-light)}
.editor-toolbar-spacer{flex:1}
.toolbar-label{font-size:0.75rem;color:var(--ink-muted);font-weight:500;margin-right:0.25rem}

/* Tablet Frame
   2026-05-23 (round 2): 880px still read as small on wide viewports
   ("make the board bigger in the middle, it's too small"). Bumped
   880 → 1200 to actually fill the editor column on a desktop monitor.
   Mobile breakpoint at line 986 still caps at max-width:100% so
   phones aren't affected. Also pushed tablet-screen min-height
   400 → 600 so the empty-state Add-Tile placeholder doesn't look
   like a tiny island in the middle of a big bezel. */
.tablet-frame{background:var(--ink);border-radius:28px;padding:18px;box-shadow:var(--shadow-xl);
  width:100%;max-width:1200px;position:relative}
/* 2026-05-27 (Luke): editor landscape toggle (next to Preview). Pure
   visual — does NOT enter preview mode (that's a separate Device
   dropdown gesture). When body.editor-landscape is set, the tablet
   frame swaps to a wider/shorter aspect so authors can see how the
   board will lay out for landscape tablets without losing edit
   affordances (drag handles, props panel, gear, etc.). */
body.editor-landscape .tablet-frame{
  max-width:min(1400px, 95vw);
}
body.editor-landscape .tablet-screen{
  /* Wider screen, shorter minimum height. */
  min-height:480px;
  aspect-ratio:16 / 10;
  /* The screen is aspect-LOCKED + overflow:hidden here, so its height is fixed.
     The preview chrome (topbar + sentence bar, 2026-06-08) adds rows above the
     grid; without a column layout the grid's min-height pushes tiles past the
     locked height and they CLIP. Lay the screen out as a column so the chrome
     takes its natural height and the grid fills + SCROLLS the remainder. */
  display:flex;
  flex-direction:column;
}
body.editor-landscape .tile-grid{
  /* Fill the space left under the chrome and scroll internally instead of
     clipping. min-height:0 lets a flex child shrink below its content size. */
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}
.tablet-frame::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:60px;height:4px;border-radius:4px;background:rgba(255,255,255,0.08)}
.tablet-screen{background:#FAFAFA;border-radius:14px;overflow:hidden;min-height:600px;position:relative}
/* Wave 16.B.16 (2026-05-11) — in-place panel host. ORIGINAL design
   mimicked .tablet-frame (dark + rounded + padded) for "visual
   continuity". Luke flagged 2026-05-11: that wraps the iframe page
   in a dark "weird tablet" shell — the Community page has its own
   layout, doubling the chrome looks broken.
   Wave 16.B.16.2 — host is now TRANSPARENT. Just a flex container
   for the back button + iframe. The iframe page draws its own
   chrome (background, header, padding). */
.builder-panel-host{
  background:transparent;
  width:100%;
  max-width:none;            /* let the page fill the editor column */
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  min-height:560px;
}
/* 2026-05-23 — Luke caught this: with display:flex above and no
   explicit hidden-state rule, the class selector wins over the
   user-agent stylesheet's `[hidden] { display: none }`. Result:
   the panel-host renders as a big empty white area BELOW the
   tablet on every /builder load (panel-router.js sets the
   `hidden` attribute by default but the CSS overrode it).
   Explicit override here restores the expected "hidden when not
   open" behavior. */
.builder-panel-host[hidden]{display:none}
.builder-panel-bar{
  display:flex;align-items:center;gap:12px;
  padding:8px 4px;
  background:transparent;
}
/* 2026-06-13 (Luke): make "← Back to Builder" PRONOUNCED across the entire
   community. #panelBackBtn is the single shared panel back button (one bar,
   reused by every community surface), so styling it here covers all of them.
   It was a faint .toolbar-btn; now it's a bold amber pill that reads as the
   clear way out of the community back to the board. */
#panelBackBtn{
  padding:0.55rem 1.1rem !important;
  font-size:0.92rem !important;
  font-weight:800 !important;
  border-radius:10px !important;
  background:var(--amber,#f4b740) !important;
  color:#1a1208 !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  box-shadow:0 2px 7px rgba(0,0,0,0.16);
  flex:0 0 auto;
  white-space:nowrap;
  transition:transform .12s ease, filter .2s ease;
}
#panelBackBtn:hover{
  background:var(--amber,#f4b740) !important;
  color:#1a1208 !important;
  filter:brightness(1.07);
  transform:translateY(-1px);
}
#panelBackBtn:focus-visible{
  outline:3px solid #1a1208;
  outline-offset:2px;
}
.builder-panel-title{
  color:var(--ink);
  font-weight:700;font-size:1rem;flex:1;
  /* Left-align — the back button on the left already anchors the
     bar; centering the title with a padding counterweight made
     wide pages look offset. */
  text-align:left;padding-left:8px;
}
.builder-panel-frame{
  flex:1;width:100%;border:none;
  background:#FAFAFA;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  min-height:600px;
}
@media (max-width:700px){
  .builder-panel-title{font-size:0.9rem}
  .builder-panel-host{min-height:480px}
  .builder-panel-frame{border-radius:8px}
}

/* ──────────────────────────────────────────────────────────────
   Wave 16.C.0.8 (2026-05-11) — Luke: "we don't want to put it
   all in a device, we want it looking like a real site, only
   device if we are mimicking AAC."

   When a non-AAC panel is open (Dashboard / Devices / School
   Boards / Community), panel-router sets body.panel-active. These
   overrides strip the AAC workspace chrome — the AAC dot grid,
   the 680px centered tablet column, the AAC toolbar (Grid /
   Essentials / Symbols / Preview / Undo / Redo / English picker)
   — and let the panel host fill the available width like a real
   web app page. Right sidebar (My Boards / Templates) is also
   hidden because those are AAC-authoring affordances.

   Tablet/AAC mode (body without .panel-active) is unchanged.
   ────────────────────────────────────────────────────────────── */
body.panel-active .editor-area{
  align-items:stretch;
  padding:0;
  background:var(--surface);            /* flat, no dot grid */
  background-image:none;
}
body.panel-active .editor-toolbar{
  display:none;                         /* AAC controls hidden */
}
/* 2026-05-27 (Luke caught: "build a board is stuck to the top of every
   page on community"). #quickBuildBox is the inline "Build a board
   about" prompt anchored below the tablet-frame in edit mode. When a
   panel page is open (Dashboard / Community / Discover / Reactions /
   etc.), it has no business sitting above the iframe. Hide alongside
   the toolbar. */
body.panel-active #quickBuildBox{
  /* !important needed because #quickBuildBox carries an inline
     style="...display:flex..." in builder.html that beats stylesheet
     rules without !important. Without this, the prompt floats above
     every iframed community page (Luke's screenshot 24). */
  display:none !important;
}
/* 2026-06-20 (Luke: "it lived under the board, it's gone, bring it back —
   it should ALWAYS show on desktop and tablet"). The quick-build card was
   getting stranded by a stuck welcome-demo state that left an inline
   display:none on #quickBuildBox (device-demo.js revealEditor), only cleared
   by a full reload. This invariant guarantees it is ALWAYS visible on desktop
   + tablet (>768px) while the builder canvas is the active surface — beating
   any stray inline display:none. Mobile (≤768px) still hides it in favor of
   #quickBuildBoxEmpty (responsive-topbar.css), and community/panel pages still
   hide it via body.panel-active above, so we scope this to the builder. */
@media (min-width: 769px) {
  body:not(.panel-active) #quickBuildBox{ display:flex !important; }
}
/* 2026-05-27 (Luke): when board.shareEnabled flips ON, reveal the
   topbar #pushBtn as a visible Share/Push pill — the URL + QR sit
   one tap away instead of being buried in the Device dropdown. CSS
   hook flipped from share-toggle.js via body.board-shared class. */
body.board-shared #pushBtn{
  display:inline-flex !important;
  align-items:center;
  gap:0.35rem;
}
/* Also hide the tablet-frame itself + its sibling chrome so the panel
   host gets the full canvas (it was already hidden via
   .builder-panel-host[hidden] toggle, but the tablet was visually
   competing in some routes). */
body.panel-active .tablet-frame{
  display:none !important;
}
/* 2026-06-04 (Luke): the panel host (#builderPanelHost) is nested inside
   #editorContent, which the board-LESS "empty state" hides (display:none) while
   it shows the "Create your first board" card. So a user with NO board open —
   e.g. a guest who lands here from the /community → /builder redirect, or who
   clicks Community/Providers in the left rail — got a 0×0 invisible panel and
   saw a blank builder instead of the community page. Force the container to
   render and suppress the empty-state whenever a panel is active, so community/
   dashboard pages show regardless of whether a board is open. (Verified live:
   without this the Providers panel renders at 0×0.) */
body.panel-active #editorContent{
  display:flex !important;
  flex:1 1 0%;
  min-height:0;
}
body.panel-active .empty-state{
  display:none !important;
}
body.panel-active .builder-panel-host{
  max-width:none;
  width:100%;
  min-height:calc(100vh - var(--topbar-h));
  padding:0;
  gap:0;
}
body.panel-active .builder-panel-bar{
  background:var(--surface);
  border-bottom:1px solid var(--border-light);
  padding:10px 16px;
}
body.panel-active .builder-panel-frame{
  border-radius:0;
  box-shadow:none;
  min-height:calc(100vh - var(--topbar-h) - 50px);
}
body.panel-active .sidebar.sidebar-right{
  display:none;                         /* My Boards / Templates are AAC-only */
}
/* Board canvas header — bumped 2026-05-01: was 0.85rem (~13.6px) which made
   the board name nearly invisible at the top of the canvas. Parents and
   teachers couldn't tell which board they were editing. Now ~24px so the
   title actually reads as a title. */
.board-header{padding:0.85rem 1.1rem;background:#fff;border-bottom:1px solid #eee;
  display:flex;align-items:baseline;gap:0.6rem}
.board-header-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;color:var(--ink);letter-spacing:-0.01em;line-height:1.1}
.board-header-meta{font-size:0.75rem;color:var(--ink-muted);margin-left:auto;font-weight:500}