:root {
  color-scheme: light;
  --ink: #101413;
  --muted: #5d6661;
  --paper: #fbfbf7;
  --panel: #ffffff;
  --line: #dce2dc;
  --mint: #1e9c89;
  --coral: #ff6d5f;
  --yellow: #f3bd31;
  --blue: #4464ad;
  --shadow: 0 16px 40px rgba(18, 24, 22, 0.14);
  --bar-h: 56px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

/* Safari's browser chrome changes the usable height while an iPad rotates or
   scrolls. Keep the studio attached to the live viewport instead of the
   larger, sometimes stale 100% layout viewport. */
@supports (height: 100dvh) {
  html,
  body,
  .app-shell,
  .screen-stack,
  .home-view,
  .studio-view {
    height: 100dvh;
  }
}

body {
  background: #eef3ef;
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-touch-callout: none !important;
  letter-spacing: 0;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

button,
input,
select {
  font: inherit;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

a {
  color: inherit;
}

.app-shell {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
}

.network-pill {
  background: rgba(16, 20, 19, 0.08);
  border: 1px solid rgba(16, 20, 19, 0.14);
  border-radius: 999px;
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  margin-left: auto;
  max-width: 22vw;
  overflow: hidden;
  padding: 6px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-pill.is-good {
  background: rgba(30, 156, 137, 0.22);
}

.network-pill.is-warn {
  background: rgba(255, 109, 95, 0.22);
}

.screen-stack {
  height: 100%;
  min-height: 0;
}

.home-view {
  background:
    linear-gradient(90deg, rgba(16, 20, 19, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16, 20, 19, 0.04) 1px, transparent 1px),
    #eaf1ec;
  background-size: 30px 30px;
  height: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.home-view::before {
  background:
    repeating-linear-gradient(115deg, rgba(255, 109, 95, 0.16) 0 12px, transparent 12px 92px),
    repeating-linear-gradient(65deg, rgba(68, 100, 173, 0.13) 0 10px, transparent 10px 126px),
    repeating-linear-gradient(0deg, rgba(243, 189, 49, 0.12) 0 7px, transparent 7px 88px);
  content: "";
  inset: 0;
  opacity: 0.62;
  pointer-events: none;
  position: absolute;
  transform: translateZ(0);
}

.home-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  position: relative;
  z-index: 1;
}

.home-top-menu,
.home-bottom-toolbar {
  align-items: center;
  background: rgba(251, 251, 247, 0.94);
  border-color: var(--line);
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
}

.home-top-menu {
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.home-top-menu .join-row {
  flex: 1 1 360px;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  max-width: none;
  min-width: 0;
  width: auto;
}

.home-top-menu .field-label {
  align-self: center;
  margin-bottom: 0;
}

.home-top-menu .join-row button {
  min-width: 96px;
}

.home-bottom-toolbar {
  border-top: 1px solid var(--line);
  min-height: 52px;
  overflow-x: auto;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: rgba(251, 251, 247, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .home-bottom-toolbar {
    justify-content: flex-start;
  }
}

.home-bottom-toolbar button,
.home-bottom-toolbar a {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(16, 20, 19, 0.1);
  border-radius: 10px;
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  min-height: 46px;
  padding: 8px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.home-bottom-toolbar .cb-toolbar-img {
  height: 24px;
  width: 24px;
}

.home-bottom-toolbar button:hover,
.home-bottom-toolbar a:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(16, 20, 19, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.home-bottom-toolbar button:active,
.home-bottom-toolbar a:active {
  transform: translateY(0);
}

.home-bottom-toolbar button.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

.home-bottom-toolbar button.is-active img {
  filter: brightness(0) invert(1);
}

.ghost-button.is-active,
.lesson-home-button {
  background: var(--ink);
  color: white;
}

.home-brand {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9px;
  min-width: 0;
}

.home-brand strong {
  white-space: nowrap;
}

.home-mark {
  background:
    linear-gradient(90deg, var(--coral), var(--yellow), var(--mint), var(--blue));
  border-radius: 99px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
  height: 12px;
  width: 42px;
}

.home-workspace {
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
  grid-template-columns: 320px minmax(360px, 1fr) minmax(360px, 1fr);
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr);
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding: clamp(16px, 2.5vw, 24px);
  scrollbar-width: thin;
}

.home-copy {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  gap: 14px;
  min-height: 0;
  align-content: start;
}

.home-lede {
  color: var(--muted);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.35;
  margin: 0;
  max-width: 300px;
}

.home-primary-actions {
  display: grid;
  gap: 8px;
  max-width: 260px;
}

.home-primary-actions button {
  background: var(--ink);
  border-radius: 8px;
  color: white;
  font-weight: 900;
  min-height: 42px;
  padding: 9px 12px;
}

.home-primary-actions button:last-child {
  background: #edf2ee;
  border: 1px solid var(--line);
  color: var(--ink);
}

.home-primary-actions button#home-resume-lesson {
  background: var(--mint);
  color: white;
}

.home-primary-actions button#home-resume-lesson:disabled {
  background: #edf2ee;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Modes Dashboard */
.modes-dashboard {
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  width: 100%;
}

.dashboard-section {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 14px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(16, 20, 19, 0.02);
  transition: border-color 0.15s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dashboard-section:hover {
  border-color: rgba(30, 156, 137, 0.25);
}

.dashboard-title {
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 0 0 10px 0;
}

.multiplayer-section .dashboard-title {
  color: var(--accent);
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  width: 100%;
}

.mode-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(16, 20, 19, 0.04);
}

.mode-card:hover, .mode-card:focus-visible {
  border-color: var(--mint);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 156, 137, 0.12);
}

#btn-dashboard-shared {
  grid-column: span 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mode-icon {
  font-size: 20px;
  line-height: 1;
}

.mode-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mode-card strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}

.mode-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.25;
  font-weight: 600;
}

.eyebrow {
  color: var(--mint);
  font-size: 12px;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}

h1,
h2 {
  letter-spacing: 0;
  margin: 0;
}

h1 {
  font-size: clamp(31px, 4.5vw, 58px);
  line-height: 0.98;
  max-width: 520px;
}

h2 {
  font-size: 18px;
}

.join-row {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(170px, 320px) auto;
  max-width: 520px;
  min-width: min(480px, 46vw);
}

.field-label,
.compact-control span,
.select-wrap span,
.settings-grid span,
.upload-form span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
  text-transform: uppercase;
}

input,
select {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 40px;
  outline: 0;
  padding: 8px 10px;
  width: 100%;
}

input:focus,
select:focus,
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 156, 137, 0.24);
  outline: 0;
}

.join-row button,
.home-panel button,
.ghost-button,
.upload-form button,
.layer-actions button,
.settings-grid button,
.prompt-bank button {
  background: var(--ink);
  border-radius: 8px;
  color: white;
  font-weight: 800;
  min-height: 44px;
  padding: 9px 12px;
  text-decoration: none;
}

.ghost-button {
  align-items: center;
  background: #ecf1ed;
  color: var(--ink);
  display: inline-flex;
}

.solo-button,
.mode-button.is-active {
  background: #e8edf8;
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
  color: #1d2d63;
}

.home-panel {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 20, 19, 0.04);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  padding: clamp(12px, 2vw, 16px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 180ms ease;
}

.home-panel:hover {
  border-color: rgba(30, 156, 137, 0.25);
  box-shadow: 0 12px 32px rgba(30, 156, 137, 0.06);
}

.home-lessons-panel {
  grid-column: 2;
  grid-row: 1;
  /* This panel stacks 3 children (heading, portfolio, lesson grid) but the
     base .home-panel template only declares 2 rows. The portfolio took the
     minmax(0,1fr) track, which collapsed to 0px whenever the panel height
     was constrained, painting "Your progress / Learning Portfolio" over the
     lesson-group header. Give each child an explicit row and let the lesson
     grid own the flexible, scrolling track. */
  grid-template-rows: auto auto minmax(0, 1fr);
}

.home-rooms-panel {
  grid-column: 2;
  grid-row: 2;
}

.home-boards-panel {
  grid-column: 3;
  grid-row: 1;
}

.home-guides-panel {
  grid-column: 3;
  grid-row: 2;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.home-chat-panel {
  background: rgba(251, 251, 247, 0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  bottom: 58px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-width: calc(100vw - 24px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 70px;
  transform: translateX(18px);
  transition: opacity 140ms ease, transform 140ms ease;
  width: min(360px, 88vw);
  z-index: 20;
}

.home-lesson-grid {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.home-lesson-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 12px;
  text-align: left;
}

.home-lesson-card:hover,
.home-lesson-card:focus-visible {
  border-color: rgba(30, 156, 137, 0.48);
}

.home-lesson-card.is-complete {
  background: rgba(30, 156, 137, 0.1);
}

.home-lesson-number {
  align-items: center;
  background: var(--ink);
  border-radius: 8px;
  color: white;
  display: inline-grid;
  font-size: 13px;
  font-weight: 950;
  height: 38px;
  justify-content: center;
  width: 42px;
}

.home-lesson-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-lesson-main strong {
  font-size: 18px;
  line-height: 1.08;
}

.home-lesson-main span,
.home-lesson-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-lesson-state {
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 9px;
  white-space: nowrap;
}

.home-chat-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.home-chat-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.home-chat-head strong {
  display: block;
}

.home-chat-log {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.home-chat-form {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.home-chat-form button {
  background: var(--ink);
  border-radius: 8px;
  color: white;
  font-weight: 850;
  min-height: 40px;
  padding: 0 12px;
}

.section-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tracker-pill {
  background: var(--ink);
  border-radius: 999px;
  color: white;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  white-space: nowrap;
}

.template-heading-actions {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.template-heading-actions .ghost-button {
  min-height: 30px;
  padding: 6px 8px;
}

.home-panel-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  margin: -3px 0 10px;
}

.room-grid,
.board-preview-grid,
.book-grid {
  display: grid;
  gap: 12px;
}

.room-grid {
  align-content: start;
  -webkit-overflow-scrolling: touch;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding: 2px;
  scrollbar-width: thin;
  width: 100%;
}

.board-preview-grid {
  align-content: start;
  -webkit-overflow-scrolling: touch;
  /* max-content rows: on short (landscape tablet) viewports the panel chain
     hands this grid a definite height; the cards' overflow:hidden zeroes
     their automatic minimum size, letting stretch COMPRESS every row to the
     44px button floor — cards clipped to strips. Content-sized rows can't
     compress; long lists scroll instead. */
  grid-auto-rows: max-content;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding: 2px;
  scrollbar-width: thin;
  width: 100%;
}

.room-card,
.board-card,
.layer-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.room-card,
.board-card {
  box-shadow: 0 8px 24px rgba(16, 20, 19, 0.08);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  width: 100%;
}

.room-card {
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 104px;
  padding: 13px;
  position: relative;
}

.home-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.home-metrics span {
  background: rgba(251, 251, 247, 0.88);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.home-metrics strong {
  color: var(--ink);
}

.room-card strong,
.board-card strong {
  display: block;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.room-card .room-id {
  color: var(--muted);
  font-size: 13px;
}

.room-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.room-live-pill {
  align-items: center;
  background: rgba(251, 251, 247, 0.08);
  border: 1px solid rgba(251, 251, 247, 0.12);
  border-radius: 999px;
  color: rgba(251, 251, 247, 0.74);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 6px;
  justify-self: start;
  min-height: 24px;
  padding: 4px 9px;
  white-space: nowrap;
}

.room-live-pill::before {
  background: #6f7772;
  border-radius: 999px;
  content: "";
  height: 7px;
  width: 7px;
}

.room-card.has-people {
  border-color: color-mix(in srgb, var(--room-accent, var(--mint)) 48%, var(--line));
  box-shadow: 0 10px 28px rgba(16, 20, 19, 0.16), 0 0 0 1px color-mix(in srgb, var(--room-accent, var(--mint)) 22%, transparent);
}

.room-card.has-people .room-live-pill {
  background: color-mix(in srgb, var(--room-accent, var(--mint)) 22%, rgba(251, 251, 247, 0.08));
  border-color: color-mix(in srgb, var(--room-accent, var(--mint)) 46%, rgba(251, 251, 247, 0.1));
  color: white;
}

.room-card.has-people .room-live-pill::before {
  background: var(--room-accent, var(--mint));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--room-accent, var(--mint)) 22%, transparent);
}

.room-card.is-solo {
  background:
    linear-gradient(135deg, rgba(68, 100, 173, 0.16), transparent 44%),
    var(--panel);
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
}

.room-card.is-solo .room-live-pill {
  background: rgba(68, 100, 173, 0.14);
  border-color: rgba(68, 100, 173, 0.3);
  color: #1d2d63;
}

.room-card.is-solo .room-live-pill::before {
  background: var(--blue);
}

.room-people {
  align-items: center;
  display: flex;
  gap: 5px;
  grid-column: 1 / -1;
  min-height: 26px;
  min-width: 0;
}

.room-people:empty {
  display: none;
}

.room-people em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-person-chip {
  align-items: center;
  background: var(--person-color, var(--mint));
  border: 2px solid rgba(251, 251, 247, 0.8);
  border-radius: 999px;
  color: #101413;
  display: inline-flex;
  flex: 0 0 24px;
  font-size: 10px;
  font-weight: 950;
  height: 24px;
  justify-content: center;
  letter-spacing: 0;
  margin-right: -8px;
  width: 24px;
}

.room-card:not(.has-people) .room-people {
  color: rgba(251, 251, 247, 0.52);
  font-size: 12px;
  font-weight: 800;
}

.room-accent {
  border-radius: 99px;
  grid-column: 1 / -1;
  height: 7px;
  width: 56px;
}

.board-card img {
  aspect-ratio: 4 / 3;
  background: white;
  display: block;
  /* contain, not cover: the full coloring page must be visible in the
     picker — cropped strips made boards unrecognizable on the BOOX. */
  object-fit: contain;
  width: 100%;
}

/* Older Android WebViews (BOOX ships ~Chromium 83) don't support
   aspect-ratio, which collapsed board previews into squashed strips.
   Give those engines a fixed preview height instead. */
@supports not (aspect-ratio: 4 / 3) {
  .board-card img {
    height: 170px;
  }
}

.board-card img.blank-preview-image {
  background:
    linear-gradient(90deg, rgba(68, 100, 173, 0.22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(68, 100, 173, 0.22) 1px, transparent 1px),
    #ffffff;
  background-size: 24px 24px;
}

.board-card.is-guide-card img {
  object-fit: contain;
}

.board-card figcaption,
.board-card .board-caption {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 10px;
}

.board-card strong {
  display: -webkit-box;
  font-size: 14px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.board-card small {
  color: var(--muted);
}

.studio-view {
  height: 100%;
  overflow: hidden;
}

.studio-frame {
  --studio-bottombar-height: 50px;
  --studio-topbar-height: 75px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

.studio-workspace {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  position: relative;
  width: 100%;
}

.top-menu,
.bottom-toolbar {
  align-items: center;
  background: var(--studio-panel-bg, rgba(251, 251, 247, 0.96));
  border-color: var(--line);
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  z-index: 6;
}

.top-menu {
  border-bottom: 1px solid var(--line);
  grid-area: top;
  /* iOS/iPad (viewport-fit=cover): keep the tile row clear of the status
     bar and rounded corners at every width — the phone media query already
     does this <768px, but iPad widths hit this base rule. */
  padding-top: max(8px, env(safe-area-inset-top));
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}

/* iOS only (body.platform-ios set from Capacitor at init): iPads report a
   smaller safe-area-inset-top than the status bar actually covers in the
   fullscreen WKWebView, clipping the tile tops. Floor the clearance. */
body.platform-ios .top-menu {
  padding-top: max(34px, env(safe-area-inset-top));
}

.bottom-toolbar {
  border-top: 1px solid var(--line);
  gap: 4px;
  grid-area: bottom;
  overflow-x: auto;
  min-height: 36px;
  padding: 2px max(6px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  scrollbar-width: thin;
  justify-content: flex-start;
}

@media (min-width: 761px) {
  .bottom-toolbar {
    justify-content: flex-start;
  }
}

.room-stack {
  display: grid;
  min-width: 116px;
}

.room-label {
  font-size: 14px;
  font-weight: 900;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-line {
  color: var(--muted);
  font-size: 12px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-wrap {
  min-width: 165px;
}

.select-wrap select {
  min-height: 36px;
}

.icon-button,
.tool-cluster button {
  background: var(--btn-bg, #edf2ee);
  border: 1px solid var(--btn-border, #d7dfd9);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 10px;
  white-space: nowrap;
}

a.icon-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
}

.icon-button.is-active,
.tool-cluster button.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

.canvas-stage {
  flex: 1;
  min-width: 0;
  /* A coloring page is the workspace. A tinted stage made the fitted white
     page read as a smaller image pushed into a cream gutter on iPad. */
  background: #ffffff;
  grid-area: stage;
  min-height: 0;
  position: relative;
  /* Pinches whose second finger lands on the stage padding (just outside
     the canvas) must still reach the app's pointer-event gesture code
     instead of becoming a WebView page-zoom on BOOX/iPad. */
  touch-action: none;
}

#board-canvas {
  cursor: crosshair;
  display: block;
  height: 100%;
  -webkit-touch-callout: none !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  width: 100%;
}

.presence-strip {
  align-items: center;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  left: 12px;
  max-width: calc(100% - 24px);
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

.presence-pill {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(16, 20, 19, 0.12);
  font-size: 12px;
  font-weight: 800;
  max-width: 148px;
  overflow: hidden;
  padding: 5px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restore-button {
  background: var(--ink);
  border-radius: 999px;
  bottom: max(18px, env(safe-area-inset-bottom));
  box-shadow: var(--shadow);
  color: white;
  font-weight: 900;
  left: 50%;
  min-height: 44px;
  padding: 10px 16px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 12;
}

.studio-frame.chrome-collapsed {
  grid-template-areas: "stage";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
}

.studio-frame.chrome-collapsed .top-menu,
.studio-frame.chrome-collapsed .bottom-toolbar,
.studio-frame.chrome-collapsed .side-panel {
  display: none;
}

.tool-cluster {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.tool-glyph {
  align-items: center;
  background: rgba(16, 20, 19, 0.08);
  border: 1px solid rgba(16, 20, 19, 0.12);
  border-radius: 6px;
  color: var(--ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 950;
  height: 20px;
  justify-content: center;
  line-height: 1;
  min-width: 20px;
  padding: 0 4px;
}

.icon-button.is-active .tool-glyph,
.tool-cluster button.is-active .tool-glyph,
.quick-tool.is-active .tool-glyph,
.wing-tool-btn.is-active .tool-glyph,
.easel-preset-btn:hover .tool-glyph,
.wing-preset-btn:hover .tool-glyph {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
  color: white;
}

.swatch-row {
  display: flex;
  gap: 4px;
}

.swatch {
  border: 2px solid white;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(16, 20, 19, 0.25);
  flex: 0 0 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
}

.swatch.is-active {
  box-shadow: 0 0 0 3px rgba(16, 20, 19, 0.92);
}

.compact-control {
  display: grid;
  flex: 0 0 auto;
  min-width: 105px;
}

.bottom-toolbar .compact-control {
  align-items: center;
  min-width: auto;
}

.bottom-toolbar .color-control {
  display: flex;
  gap: 3px;
}

.bottom-toolbar .color-control button {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  padding: 0;
}

.bottom-toolbar .compact-control span {
  display: none;
}

.compact-control input[type="range"] {
  min-height: 24px;
  padding: 0;
}

.compact-control input[type="color"] {
  min-height: 34px;
  padding: 3px;
}

.bottom-toolbar .icon-button,
.bottom-toolbar .tool-cluster button {
  align-items: center;
  border-radius: 7px;
  display: inline-flex;
  font-size: 10px;
  gap: 4px;
  justify-content: center;
  min-height: 34px;
  min-width: 38px;
  padding: 3px 6px;
}

.bottom-toolbar .tool-cluster {
  gap: 4px;
}

.bottom-toolbar .compact-control input[type="color"] {
  height: 25px;
  min-height: 25px;
  padding: 2px;
  width: 38px;
}

.bottom-toolbar .compact-control input[type="range"] {
  height: 18px;
  min-height: 18px;
  width: 68px;
}

@media (min-width: 761px) {
  .bottom-toolbar .compact-control input[type="range"] {
    width: 110px;
  }
}

.bottom-toolbar .compact-control select {
  height: 26px;
  min-height: 26px;
  padding: 4px 7px;
  width: 92px;
}

.bottom-toolbar .level-control select {
  width: 132px;
}

.bottom-toolbar .tool-cluster [data-tool="pencil"],
.bottom-toolbar .tool-cluster [data-tool="pen"],
.bottom-toolbar .tool-cluster [data-tool="marker"],
.bottom-toolbar .tool-cluster [data-tool="crayon"],
.bottom-toolbar .tool-cluster [data-tool="airbrush"],
.bottom-toolbar .tool-cluster [data-tool="calligraphy"],
.bottom-toolbar .tool-cluster [data-tool="eyedropper"],
.bottom-toolbar .opacity-control,
.bottom-toolbar .pressure-control,
.bottom-toolbar #zoom-out,
.bottom-toolbar #zoom-in,
.bottom-toolbar #export-button,
.bottom-toolbar #timelapse-record,
.bottom-toolbar #open-timelapse {
  display: none;
}

.side-panel {
  background: var(--studio-panel-bg, rgba(251, 251, 247, 0.98));
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 28px rgba(16, 20, 19, 0.08);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  min-width: 0;
  max-width: none;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: var(--bar-h, 56px);
  right: 0;
  bottom: 50px;
  width: 320px;
  transform: translateX(100%);
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 1000;
}

.side-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.panel-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 14px;
}

.panel-head h2 {
  margin-top: 3px;
}

.panel-section {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}

.panel-section[hidden] {
  display: none !important;
}

.settings-grid,
.upload-form {
  display: grid;
  gap: 12px;
}

.upload-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  margin: -2px 0 0;
}

.app-settings-grid button {
  width: 100%;
}

.app-settings-grid select {
  width: 100%;
}

.toggle-row {
  align-items: center;
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  min-height: 46px;
  padding: 8px 10px;
}

.toggle-row span {
  font-weight: 850;
}

.toggle-row input[type="checkbox"] {
  accent-color: var(--mint);
  height: 24px;
  width: 24px;
}

.dimension-row,
.layer-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.layer-actions {
  margin-bottom: 10px;
}

.layer-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.layer-item {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.layer-topline {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr auto;
}

.layer-topline strong {
  overflow-wrap: anywhere;
}

.layer-item input[type="range"] {
  min-height: 22px;
  padding: 0;
}

.book-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.book-grid .board-card {
  min-height: 0;
}

.book-grid .board-card img {
  height: 96px;
}

.prompt-bank {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
}

.prompt-bank summary {
  cursor: pointer;
  font-weight: 900;
}

.prompt-bank button {
  margin-top: 8px;
  width: 100%;
}

.shared-player {
  display: grid;
  gap: 12px;
}

.player-status {
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.player-status span {
  color: var(--muted);
  font-size: 13px;
}

.music-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr 1fr;
}

.music-panel button,
.chat-form button,
.lesson-actions button,
.library-actions button,
.export-actions button,
.timelapse-actions button {
  background: var(--ink);
  border-radius: 8px;
  color: white;
  font-weight: 850;
  min-height: 38px;
  padding: 8px 10px;
}

#music-mute.is-active,
#music-play.is-active,
#lesson-toggle-guides.is-active,
#timelapse-record.is-active,
#timelapse-start.is-active {
  background: var(--mint);
}

.chat-panel {
  display: grid;
  gap: 10px;
  grid-template-rows: 1fr auto;
  min-height: 0;
}

.chat-log {
  align-content: start;
  background: linear-gradient(180deg, #f7faf8, #edf4f0);
  border: 1px solid rgba(16, 20, 19, 0.14);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  min-height: 260px;
  overflow: auto;
  padding: 12px;
}

.chat-message {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  box-shadow: 0 3px 10px rgba(16, 20, 19, 0.05);
  gap: 5px;
  padding: 10px 12px;
}

.chat-message.is-self {
  background: #eefaf6;
  border-color: rgba(30, 156, 137, 0.5);
  margin-left: 18px;
}

.chat-message.is-system {
  background: #f9f6e8;
}

.chat-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: space-between;
}

.chat-name {
  font-weight: 900;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chat-text {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.chat-form {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
}

.chat-form input {
  font-size: 16px;
  min-height: 46px;
}

.chat-form button {
  min-width: 76px;
}

.timelapse-panel {
  display: grid;
  gap: 12px;
}

.lesson-panel,
.library-panel,
.export-panel {
  display: grid;
  gap: 12px;
}

.lesson-active-card,
.export-card,
.library-empty {
  background: #fffaf0;
  border: 1px solid rgba(16, 20, 19, 0.28);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  line-height: 1.35;
  margin: 0;
  padding: 12px;
}

.lesson-active-topline {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.lesson-active-topline .eyebrow {
  margin: 0;
}

.lesson-active-card strong,
.export-card strong {
  font-size: 18px;
  line-height: 1.15;
}

.lesson-progress-pill,
.lesson-card-status {
  background: #ffffff;
  border: 1px solid rgba(16, 20, 19, 0.16);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.lesson-step-copy {
  color: var(--ink);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.lesson-coach-tip {
  background: #eef7ff;
  border: 1px solid rgba(68, 100, 173, 0.24);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.lesson-reflection[hidden] {
  display: none !important;
}

.lesson-coach-tip strong {
  color: #29457e;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lesson-coach-tip span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
}

.lesson-step-progress {
  background: rgba(16, 20, 19, 0.08);
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.lesson-step-progress span {
  background: #4464ad;
  display: block;
  height: 100%;
  width: 0;
}

.lesson-active-card span,
.export-card p,
.library-card span,
.library-card small,
.lesson-card span,
.lesson-card small {
  color: var(--muted);
  font-size: 12px;
}

.lesson-actions,
.library-actions,
.export-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-actions button,
.library-actions button,
.export-actions button {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lesson-list,
.library-list {
  display: grid;
  gap: 8px;
}

.library-learning {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.library-learning span {
  background: #edf2ee;
  border: 1px solid rgba(16, 20, 19, 0.1);
  border-radius: 999px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 780;
  padding: 4px 6px;
}

.library-learning .library-lesson-badge {
  background: #e8f7f2;
  border-color: rgba(30, 156, 137, 0.28);
  color: #126f61;
}

.lesson-panel-group {
  display: grid;
  gap: 8px;
}

.lesson-panel-group h3 {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  margin: 8px 0 0;
  text-transform: uppercase;
}

.lesson-card,
.library-card {
  background: #fffdf7;
  border: 1px solid rgba(16, 20, 19, 0.18);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 6px;
  padding: 10px;
  text-align: left;
}

.lesson-card.is-active {
  background: #f8f4ff;
  border-color: rgba(68, 100, 173, 0.65);
  box-shadow: inset 4px 0 0 var(--blue);
}

.lesson-card.is-complete {
  background: #f2fbf5;
  border-color: rgba(30, 156, 137, 0.5);
}

.lesson-card .lesson-card-status {
  color: var(--ink);
  justify-self: start;
}

.library-card {
  align-items: center;
  cursor: pointer;
  grid-template-columns: 82px 1fr;
}

.library-card:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(68, 100, 173, 0.22);
  outline: 0;
}

.library-card img {
  aspect-ratio: 4 / 3;
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: cover;
  width: 82px;
}

.library-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.library-lightbox-open {
  overflow: hidden;
}

.library-lightbox[hidden],
.library-lightbox-reflection[hidden],
.library-lightbox-section[hidden],
.library-lightbox-image[hidden],
.library-lightbox-actions [hidden] {
  display: none !important;
}

.library-lightbox {
  align-items: center;
  background: rgba(15, 20, 18, 0.72);
  display: grid;
  inset: 0;
  justify-items: center;
  overflow: auto;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  position: fixed;
  z-index: 2200;
}

.library-lightbox-card {
  background: #fffdf7;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 14px;
  margin: auto;
  max-height: min(880px, calc(100dvh - 36px));
  max-width: 720px;
  overflow: auto;
  padding: 16px;
  width: min(720px, 100%);
}

.library-lightbox-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.library-lightbox-head .eyebrow,
.library-lightbox-head h2,
.library-lightbox-reflection p,
.library-lightbox-meta {
  margin: 0;
}

.library-lightbox-head h2 {
  color: var(--ink);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.1;
}

.library-lightbox-close {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 64px;
}

.library-lightbox-image {
  aspect-ratio: 4 / 3;
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 10px;
  max-height: 58dvh;
  object-fit: contain;
  width: 100%;
}

.library-lightbox-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.library-lightbox-reflection,
.library-lightbox-section {
  background: #eef7ff;
  border: 1px solid rgba(68, 100, 173, 0.24);
  border-radius: 9px;
  display: grid;
  gap: 7px;
  padding: 10px 12px;
}

.library-lightbox-reflection strong,
.library-lightbox-section > strong {
  color: #29457e;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.library-lightbox-reflection p {
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
}

.library-lightbox-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.library-lightbox-outcomes span {
  background: #ffffff;
  border: 1px solid rgba(16, 20, 19, 0.12);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
  padding: 5px 8px;
}

.library-lightbox-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.library-lightbox-swatch {
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(16, 20, 19, 0.28);
  height: 28px;
  width: 28px;
}

.library-lightbox-actions {
  display: flex;
  justify-content: flex-end;
}

.library-lightbox-actions a {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
}

@media (max-width: 520px) {
  .library-lightbox {
    align-items: end;
    padding: max(8px, env(safe-area-inset-top)) 0 0;
  }

  .library-lightbox-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    width: 100%;
  }
}

.timelapse-status-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(225,241,236,0.78));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(30, 156, 137, 0.22);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(18, 24, 22, 0.08);
  display: grid;
  gap: 4px;
  padding: 12px;
}

.timelapse-status-card span {
  color: var(--muted);
  font-size: 13px;
}

.timelapse-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr 1fr;
}

.timelapse-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timelapse-compat-note {
  background: rgba(68, 100, 173, 0.08);
  border: 1px solid rgba(68, 100, 173, 0.18);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  padding: 10px;
}

.timelapse-compat-note.is-warning {
  background: rgba(255, 109, 95, 0.1);
  border-color: rgba(255, 109, 95, 0.28);
  color: #71342e;
}

.quick-picker {
  background: rgba(251, 251, 247, 0.98);
  border: 1px solid rgba(16, 20, 19, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 7px;
  max-height: min(92dvh, 820px);
  max-width: min(360px, calc(100vw - 18px));
  overflow-y: auto;
  padding: 8px;
  position: absolute;
  scrollbar-width: thin;
  width: 348px;
  z-index: 30;
}

.quick-picker[hidden] {
  display: none;
}

.quick-head {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(30, 156, 137, 0.14), rgba(255, 109, 95, 0.12)),
    rgba(237, 242, 238, 0.9);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: grab;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  padding: 6px 7px;
  touch-action: none;
}

.quick-picker.is-dragging .quick-head {
  cursor: grabbing;
}

.quick-picker.is-pinned {
  border-color: rgba(30, 156, 137, 0.48);
  box-shadow: 0 14px 38px rgba(30, 156, 137, 0.16), var(--shadow);
}

.quick-head strong {
  display: block;
  font-size: 13px;
}

.quick-head button,
.quick-actions button {
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 30px;
  padding: 5px 8px;
}

.quick-move {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  margin-left: auto;
  text-transform: uppercase;
}

.quick-section {
  display: grid;
  gap: 5px;
}

.quick-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quick-grid {
  display: grid;
  gap: 5px;
}

.quick-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-colors {
  grid-template-columns: repeat(6, 1fr);
}

.quick-tool {
  align-items: center;
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  gap: 5px;
  justify-content: flex-start;
  min-height: 29px;
  padding: 5px;
}

.quick-tool.is-active {
  background: var(--ink);
  color: white;
}

.quick-head button.is-active {
  background: var(--mint);
  color: white;
}

.quick-swatch {
  border: 2px solid white;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(16, 20, 19, 0.22);
  height: 25px;
  min-width: 0;
  padding: 0;
}

.quick-swatch.is-active {
  box-shadow: 0 0 0 3px rgba(16, 20, 19, 0.9);
}

.quick-controls {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-controls label {
  display: grid;
  gap: 4px;
}

.quick-controls label:last-child {
  grid-column: 1 / -1;
}

.quick-controls input[type="range"] {
  min-height: 20px;
  padding: 0;
}

.quick-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.easel-id-card,
.wing-id-card {
  align-items: center;
  background: rgba(237, 242, 238, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 7px;
}

.easel-id-card button,
.wing-id-card button,
.easel-color-picker-row button,
.easel-preset-form button,
.easel-mini-delete,
.wing-easel-button,
.wing-preset-btn {
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  min-height: 30px;
  padding: 5px 8px;
}

.easel-id-copy,
.wing-id-card div:last-of-type {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.easel-id-copy strong,
.wing-id-card strong {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.easel-id-copy span,
.wing-id-card span,
.easel-preset-btn small,
.easel-empty {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.easel-color-picker-row {
  display: grid;
  gap: 5px;
  grid-template-columns: 44px minmax(0, 1fr) minmax(92px, 1fr);
}

.easel-color-picker-row input[type="color"] {
  min-height: 34px;
  padding: 2px;
}

.easel-color-picker-row select,
.easel-preset-form input {
  min-height: 34px;
}

.easel-custom-colors {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 28px;
}

.easel-color-pill {
  align-items: center;
  background: rgba(237, 242, 238, 0.76);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 3px;
  padding: 2px 3px;
}

.easel-color-pill .quick-swatch {
  height: 22px;
  width: 22px;
}

.easel-mini-delete {
  border-radius: 999px;
  color: var(--muted);
  height: 22px;
  min-height: 22px;
  min-width: 22px;
  padding: 0;
}

/* Theme color picker: 10 main colors in a tight grid; clicking selects a hue family. */
.easel-main-colors {
  align-items: center;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.easel-main-swatch {
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  min-height: 24px;
  min-width: 0;
  padding: 0;
  transition: transform 80ms ease, border-color 80ms ease;
}

.easel-main-swatch:hover {
  transform: scale(1.08);
}

.easel-main-swatch.is-active {
  border-color: var(--ink, #111);
  transform: scale(1.1);
}

/* Shade ramp under the theme picker — 5 curated shades of the selected main color. */
.easel-shade-row {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 6px;
}

.easel-shade-swatch {
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  min-height: 32px;
  padding: 0;
  transition: transform 80ms ease, border-color 80ms ease;
}

.easel-shade-swatch:hover {
  transform: scale(1.06);
}

.easel-shade-swatch.is-active {
  border-color: var(--ink, #111);
  transform: scale(1.08);
}

/* Inline preset chips (XS/S/M/L/XL, 20/50/80/100%) next to the size & opacity sliders. */
.easel-preset-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.easel-preset-chip {
  background: rgba(237, 242, 238, 0.76);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 24px;
  padding: 4px 7px;
  text-transform: uppercase;
}

.easel-preset-chip:hover {
  border-color: var(--ink, #111);
}

.easel-preset-chip.is-active {
  background: var(--ink, #111);
  color: #fff;
}

/* Compact Easel layout: shrinks paddings/gaps so the always-visible essentials
   (head, color picker, theme, shade row, size+opacity) fit in ~360px height.
   Non-essentials (Custom Colors, Saved Pens, Palette, Tools, Pressure) live
   in <details> elements that the user can expand on demand. */
#quick-picker {
  gap: 6px !important;
  padding: 8px !important;
}

.easel-head-compact {
  align-items: center;
  display: grid !important;
  gap: 4px !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  padding: 2px 0 6px !important;
}

.easel-head-compact > strong {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.easel-head-compact button {
  font-size: 11px;
  min-height: 26px;
  padding: 0 8px;
}

.easel-id-mini {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.easel-id-mini .easel-id-name {
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-avatar.avatar-sm {
  align-items: center;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.easel-color-section {
  gap: 4px !important;
}

.easel-color-section .easel-color-picker-row input[type="color"] {
  min-height: 28px !important;
}

.easel-color-section .easel-main-swatch {
  min-height: 22px;
}

.easel-color-section .easel-shade-swatch {
  min-height: 28px;
}

.easel-controls-compact {
  gap: 4px !important;
  grid-template-columns: 1fr !important;
}

.easel-slider-row {
  align-items: center;
  display: grid !important;
  gap: 4px !important;
  grid-template-columns: 64px 1fr auto;
}

.easel-slider-row .easel-slider-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.easel-slider-row input[type="range"] {
  min-height: 22px;
}

.easel-slider-row .easel-preset-row {
  flex-wrap: nowrap;
  gap: 3px;
  margin-top: 0;
}

.easel-slider-row .easel-preset-chip {
  min-height: 22px;
  padding: 2px 6px;
}

/* In the narrow rail-detail panel, slider rows stack vertically (label on
   top, slider next, presets wrap below) so a 172-wide column doesn't squish. */
.cb-detail-body .easel-slider-row,
.cb-detail-body .cb-detail-slider {
  grid-template-columns: 1fr !important;
}

.cb-detail-body .easel-slider-row .easel-preset-row {
  flex-wrap: wrap;
}

/* Single-column detail: everything stacks vertically so the panel stays narrow
   and the canvas keeps as much width as possible. Cascade-style expand-right
   for deeper levels is the next iteration.
   --cb-tile-h is the SHARED tile dimension used by every detail item — color
   swatches, brush tiles, list tiles, size/opacity chips. Change one number,
   the whole UI restays cohesive. */
/* All detail-body panels: fill remaining vertical space inside the flex
   column. Right side (Brush) retains its previous single-col list. */
.cb-detail-body {
  align-content: start;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
  grid-auto-rows: max-content;
  grid-template-columns: 1fr;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  --cb-tile-h: 48px;
}

/* colorSwatchGrid — applied ONLY to LEFT (color) panels per spec. Equal-
   column grid centered in the panel; columns clamp to 64px max so swatches
   stay square via aspect-ratio. overflow-x:hidden eliminates horizontal
   scrollbar; overflow-y:auto handles tall content as the scrollable area. */
.cb-detail-left .cb-detail-body {
  grid-template-columns: 48px;       /* 48px swatch — matches wing rail tiles */
  justify-content: center;
  align-content: start;
  gap: 4px;
  padding: 4px;
  --cb-tile-h: 48px;
}

.cb-detail-left .cb-detail-body .drill-swatch,
.cb-detail-left .cb-detail-body .drill-complement,
.cb-detail-left .cb-detail-body .drill-next,
.cb-detail-left .cb-detail-body .easel-main-swatch,
.cb-detail-left .cb-detail-body .easel-shade-swatch,
.cb-detail-left .cb-detail-body .quick-swatch,
.cb-detail-left .cb-detail-body .cb-detail-list-tile,
.cb-detail-left .cb-detail-body .cb-active-color-tile {
  max-height: 48px;
  max-width: 48px;
}

/* CUSTOM + PALETTE swatches use .quick-swatch which is normally oval —
   force square in the left color panels so every tile matches HUE. */
.cb-detail-left .cb-detail-body .quick-swatch {
  border-radius: 8px;
  border-width: 1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* Drill picker holds 10 swatches + complement + next = 12 tiles in a single
   column. Caps tile size so the column fits any reasonable viewport AND so
   the Easel's complement / next squares stop blowing up to grid-fill size. */
.drill-picker {
  --cb-tile-h: 48px;
  display: grid;
  gap: 4px;
}

/* drill-picker / drill-row-ends / drill-strip become passthrough wrappers
   so every individual swatch (complement + next + 10 hue swatches) is a
   direct grid item of the body. That way the 1-col 64px grid lays out all
   12 tiles in a perfectly equal stack. */
.cb-detail-body .drill-picker,
.cb-detail-body .drill-row-ends,
.cb-detail-body .drill-strip {
  display: contents;
}

.drill-picker .drill-swatch,
.drill-picker .drill-complement,
.drill-picker .drill-next {
  margin: 0 auto;
  max-height: var(--cb-tile-h);
  max-width: var(--cb-tile-h);
  min-height: 0;
  width: 100%;
}

/* Easel — even though the panel is wider, keep swatches the same compact
   48×48 tile size as the rail-detail tiles. Previously they were grid-fill
   width which made the complement / next look like giant blocks. */
#quick-picker .easel-main-swatch,
#quick-picker .easel-shade-swatch,
#quick-picker .quick-swatch {
  margin: 0 auto;
  max-height: 48px;
  max-width: 48px;
  width: 100%;
}

#quick-picker .easel-main-colors {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.cb-detail-body .easel-main-colors,
.cb-detail-body .easel-shade-row,
.cb-detail-body .drill-strip,
.cb-detail-body .quick-colors,
.cb-detail-body .cb-tools-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
}

/* Complement (⇄) + Next (→) each take their own row so they're full
   tile-sized like every other detail item. Cohesion over compactness. */
.cb-detail-body .drill-row-ends {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
}

/* Every tile in a detail panel: square via aspect-ratio, fills its grid
   column (which is capped at 64px by .cb-detail-body grid-template). */
.cb-detail-body .easel-main-swatch,
.cb-detail-body .easel-shade-swatch,
.cb-detail-body .drill-swatch,
.cb-detail-body .quick-swatch,
.cb-detail-body .cb-tool-tile,
.cb-detail-body .quick-tool,
.cb-detail-body .easel-preset-chip,
.cb-detail-body .cb-detail-list-tile,
.cb-detail-body .drill-complement,
.cb-detail-body .drill-next {
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  margin: 0 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.cb-detail-body .cb-tool-tile,
.cb-detail-body .quick-tool {
  font-size: 8px;
  padding: 3px 2px;
}

/* Generic stacked list-tile for PRESS / PALETTE / future single-select lists.
   Final dimensions come from the unified .cb-detail-body rule. */
.cb-detail-list-tile {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink, #111);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 9px;
  font-weight: 700;
  gap: 2px;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 4px 2px;
  text-transform: uppercase;
}

.cb-detail-list-tile:hover {
  background: #edf2ee;
  border-color: var(--ink, #111);
}

.cb-detail-list-tile.is-active {
  background: var(--ink, #111);
  border-color: var(--ink, #111);
  color: #fff;
}

.cb-detail-list-glyph { font-size: 12px; line-height: 1; }
.cb-detail-list-label { font-size: 9px; }
.cb-detail-list-swatch {
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  display: inline-block;
  height: 12px;
  width: 12px;
}

/* PICKER detail tiles --------------------------------------------------- */
.cb-active-color-tile {
  align-items: flex-end;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--ink, #111);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  font-size: 9px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.04em;
  margin: 0 auto;
  max-height: var(--cb-tile-h);
  max-width: var(--cb-tile-h);
  padding: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  width: 100%;
}

.cb-active-color-hex { mix-blend-mode: difference; }

.cb-tile-color-input { position: relative; cursor: pointer; }
.cb-tile-color-input input[type="color"] {
  cursor: pointer;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

/* PENS detail rows ------------------------------------------------------ */
.cb-pen-name-input {
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 11px;
  min-height: var(--cb-tile-h);
  padding: 4px 6px;
  width: 100%;
}

.cb-pen-row-tile {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 4px;
  grid-template-columns: 22px 1fr;
  min-height: var(--cb-tile-h);
  padding: 5px 6px;
  text-align: left;
  width: 100%;
}

.cb-pen-row-tile:hover {
  background: #edf2ee;
  border-color: var(--ink, #111);
}

.cb-pen-row-glyph {
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 0;
  text-align: center;
  text-transform: uppercase;
}

.cb-pen-row-text {
  display: grid;
  gap: 1px;
  overflow: hidden;
}
.cb-pen-row-text strong {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-pen-row-text small {
  color: var(--muted);
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-pen-square-tile .cb-detail-list-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Canvas-rail row tiles (layers list, etc.). Same row layout as pen tiles. */
.cb-canvas-row-tile {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 4px;
  grid-template-columns: 22px 1fr;
  min-height: var(--cb-tile-h);
  padding: 5px 6px;
  text-align: left;
  width: 100%;
}

.cb-canvas-row-tile:hover { background: #edf2ee; border-color: var(--ink, #111); }

.cb-canvas-row-tile.is-active {
  background: var(--ink, #111);
  border-color: var(--ink, #111);
  color: #fff;
}

.cb-canvas-row-glyph {
  font-size: 14px;
  text-align: center;
}

.cb-canvas-row-text {
  display: grid;
  gap: 1px;
  overflow: hidden;
}

.cb-canvas-row-text strong {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-canvas-row-text small {
  color: var(--muted);
  font-size: 9px;
}

.cb-canvas-row-tile.is-active .cb-canvas-row-text small {
  color: rgba(255, 255, 255, 0.7);
}

.cb-canvas-readout {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  padding: 6px 4px;
}

/* Layer tiles — match the + ADD tile, hidden state shown via opacity. */
.cb-layer-tile.is-hidden-layer { opacity: 0.45; }

/* Inline RECORD detail rows — status header + tiny numeric inputs. */
.cb-record-status {
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  font-size: 10px;
  gap: 2px;
  padding: 6px 8px;
  text-align: center;
}
.cb-record-status strong { font-size: 11px; }
.cb-record-status small { color: var(--muted); }

.cb-record-row {
  align-items: center;
  display: grid;
  font-size: 10px;
  font-weight: 800;
  gap: 4px;
  grid-template-columns: 1fr;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.cb-record-row input[type="number"] {
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  min-height: 26px;
  padding: 2px 6px;
  text-align: center;
}

/* Inline CHAT detail thread + form. */
.cb-chat-thread {
  background: linear-gradient(180deg, rgba(247,250,248,0.98), rgba(232,242,237,0.96));
  border: 1px solid rgba(16, 20, 19, 0.14);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 8px;
}

.cb-chat-msg {
  background: #fff;
  border: 1px solid rgba(16, 20, 19, 0.1);
  border-radius: 9px;
  display: grid;
  font-size: 13px;
  gap: 3px;
  line-height: 1.4;
  padding: 8px 9px;
}
.cb-chat-msg strong {
  color: var(--ink, #111);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cb-chat-msg.is-self { background: #eefaf6; border-color: rgba(30,156,137,0.32); }
.cb-chat-msg.is-self strong { color: #137565; }
.cb-chat-msg.is-system { color: var(--muted); font-style: italic; }
.cb-chat-msg span { word-break: break-word; }

.cb-chat-form {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.cb-chat-form input[type="text"] {
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  min-height: 40px;
  height: 44px;
  max-height: 44px;
  padding: 7px 9px;
}
.cb-chat-form button {
  background: var(--ink, #111);
  border: 1px solid var(--ink, #111);
  border-radius: 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 40px;
  height: 44px;
  text-transform: uppercase;
}

/* Chat is a conversation column, not a generic equal-height tile grid. Keep
   the thread roomy while the composer remains a familiar one-line control. */
body.cb-chat-detail-open .cb-detail-body {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.cb-chat-detail-open .cb-chat-thread {
  flex: 1 1 auto;
  max-height: none;
  min-height: 140px;
}

body.cb-chat-detail-open .cb-chat-form {
  flex: 0 0 auto;
}

/* Bottom detail body is wider than side details — items can use a grid so
   they don't stretch unnaturally tall. */
.cb-detail-bottom .cb-detail-body {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  padding: 8px;
  --cb-tile-h: 44px;
}

.cb-detail-bottom .cb-canvas-readout {
  grid-column: 1 / -1;
}

/* Small floating context menu for pen rows. */
.cb-context-menu {
  background: rgba(251, 251, 247, 0.98);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 2px;
  min-width: 140px;
  padding: 4px;
  position: fixed;
  z-index: 120;
}

.cb-context-menu-item {
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 8px 12px;
  text-align: left;
}

.cb-context-menu-item:hover {
  background: #edf2ee;
}

.cb-context-menu-item.is-destructive { color: #c0392b; }
.cb-context-menu-item.is-destructive:hover { background: #fbecea; }

/* Top + bottom toolbar share the rail-tile visual language for cohesion. */
.top-menu .icon-button,
.bottom-toolbar .icon-button {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 38px;
  min-width: 44px;
  padding: 4px 8px;
  text-transform: uppercase;
}

.top-menu .icon-button:hover,
.bottom-toolbar .icon-button:hover {
  background: #edf2ee;
  border-color: var(--ink, #111);
}

.top-menu .icon-button.is-active,
.bottom-toolbar .icon-button.is-active {
  background: var(--ink, #111);
  border-color: var(--ink, #111);
  color: #fff;
}

/* Center every tile in the bottom toolbar — feels cohesive with the side
   wings and prevents the row from drifting flush-left. */
.bottom-toolbar {
  justify-content: center;
}

/* Tool cluster inside bottom toolbar — same tile shape as wing tiles. */
.bottom-toolbar .tool-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.bottom-toolbar .tool-cluster button {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 38px;
  min-width: 44px;
  padding: 4px 6px;
  text-transform: uppercase;
}

.bottom-toolbar .tool-cluster button.is-active {
  background: var(--ink, #111);
  border-color: var(--ink, #111);
  color: #fff;
}

/* Bottom-toolbar legacy compact controls (size / opacity / pressure / palette
   sliders + dropdowns) now live in the Brush wing. The form elements stay in
   the DOM (event handlers still need them) but are hidden visually. */
.bottom-toolbar .compact-control { display: none !important; }

.cb-detail-body .cb-tool-tile .tool-glyph,
.cb-detail-body .quick-tool .tool-glyph { font-size: 13px; }

/* Sliders fill the panel width; chip rows wrap and use full width. */
.cb-detail-body .easel-slider-row {
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}

.cb-detail-body .easel-slider-row .easel-slider-label {
  font-size: 10px;
}

/* Chips stack one-per-row, full column width, same square tile shape as
   color swatches and tool tiles. */
.cb-detail-body .easel-preset-row {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
  justify-items: center;
  width: 100%;
}

.cb-detail-body .easel-preset-chip {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.04em;
  padding: 0;
}

.cb-detail-body .easel-preset-chip.is-active {
  background: var(--ink, #111);
  border-color: var(--ink, #111);
  color: #fff;
}

/* Vertical sliders: BIG. Fill the column width, take most of the vertical
   space so the thumb is easy to grab on touch. */
.cb-detail-body .easel-slider-row {
  align-items: center;
  display: grid !important;
  gap: 6px !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  width: 100%;
}

.cb-detail-body .easel-slider-row input[type="range"] {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  height: 240px;     /* up from 140 — more room to drag */
  width: 48px;        /* up from 28 — matches the tile width */
  max-width: var(--cb-tile-h);
  padding: 0;
}

.cb-detail-body .easel-slider-row .easel-slider-label {
  font-size: 10px;
  text-align: center;
  width: 100%;
}

/* Hint text and hovered tool labels truncate / hide in narrow mode. */
.cb-detail-body .cb-detail-hint { display: none; }

.cb-detail-body .easel-color-picker-row {
  grid-template-columns: 1fr !important;
}

.cb-detail-palette-select,
.easel-pressure-select {
  font-size: 10px;
}

/* Collapsible sections — closed by default to keep the panel short. */
.easel-details {
  background: rgba(237, 242, 238, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
}

.easel-details > summary {
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.04em;
  list-style: none;
  padding: 6px 8px;
  text-transform: uppercase;
  user-select: none;
}

.easel-details > summary::-webkit-details-marker { display: none; }

.easel-details > summary::before {
  content: "▸";
  display: inline-block;
  font-size: 10px;
  transition: transform 120ms ease;
}

.easel-details[open] > summary::before { transform: rotate(90deg); }

.easel-details > *:not(summary) {
  padding: 0 8px 8px;
}

.easel-count {
  background: rgba(16, 20, 19, 0.12);
  border-radius: 999px;
  font-size: 10px;
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  text-align: center;
}

.easel-tools-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.easel-tools-grid .quick-tool {
  justify-content: center;
  min-height: 28px;
  padding: 3px;
}

.easel-pressure-select {
  min-height: 28px;
  width: 100%;
}

.easel-actions-compact {
  gap: 4px !important;
}

.easel-actions-compact button {
  font-size: 11px;
  min-height: 28px;
  padding: 4px 6px;
}

/* ---------- HQ-style rail + detail wings ----------
   Thin always-visible rail (tile column) + slide-in detail panel next to it.
   Click a tile → its detail panel slides in. Click again → it slides out.
   Body classes drive canvas padding so the canvas never tucks under a wing.

   Layout per side (always visible part is the rail):
     .cb-rail-left    : fixed 64px wide column at the left edge
     .cb-detail-left  : fixed 248px wide panel that slides in just right of it
     .cb-rail-right + .cb-detail-right : mirror on the other side. */

.cb-rail {
  background: rgba(245, 248, 245, 0.96);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 6px 4px;
  position: absolute;
  scrollbar-width: thin;
  top: var(--studio-topbar-height);
  bottom: var(--studio-bottombar-height);
  width: 64px;
  z-index: 32;
}

.cb-rail-left  { left: 0; }
.cb-rail-right { right: 0; border-right: none; border-left: 1px solid var(--line); }

/* Bottom rail: horizontal row at the bottom edge, just above the toolbar. */
.cb-rail-bottom {
  bottom: 54px;
  border-bottom: none;
  border-top: 1px solid var(--line);
  border-right: none;
  flex-direction: row;
  height: 60px;
  left: 64px;
  padding: 4px 6px;
  right: 64px;
  top: auto;
  width: auto;
}

.cb-rail-bottom .cb-rail-head {
  align-self: center;
  padding: 0 8px 0 0;
  text-align: left;
  writing-mode: horizontal-tb;
}

.cb-rail-bottom .cb-rail-tile {
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  height: 48px;
  min-height: 0;
  width: 48px;
}

.cb-rail-head {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 0 4px;
  text-align: center;
  text-transform: uppercase;
}

/* Section divider inside a rail — small uppercase label between tile groups
   (used to separate BRUSH and CANVAS tiles in the right rail). */
.cb-rail-divider {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-top: 4px;
  padding: 6px 0 2px;
  text-align: center;
  text-transform: uppercase;
}

.cb-rail-tile {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink, #111);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 9px;
  font-weight: 700;
  gap: 2px;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1;
  min-height: 50px;
  padding: 5px 2px;
  text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.cb-rail-tile:hover {
  background: #edf2ee;
  border-color: var(--ink, #111);
}

.cb-rail-tile.is-active {
  background: var(--ink, #111);
  border-color: var(--ink, #111);
  color: #fff;
}

.cb-rail-glyph { font-size: 16px; line-height: 1; }
.cb-rail-label { font-size: 9px; }

/* Detail panel sits just next to the rail and slides in/out via transform. */
/* Reusable expanded color panel — narrow drill-out column anchored to the
   left toolbar. NOT a wide modal overlay. Fixed width per spec (112-140px). */
.cb-detail {
  background: rgba(251, 251, 247, 0.98);
  border: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  position: absolute;
  scrollbar-width: thin;
  top: var(--studio-topbar-height);
  bottom: var(--studio-bottombar-height);
  width: 76px;               /* match the wing rail tile size */
  transition: transform 220ms ease;
  z-index: 31;
}

.cb-detail-left  { left: 64px; border-left: none; border-radius: 0 12px 12px 0; }
.cb-detail-right { right: 64px; border-right: none; border-radius: 12px 0 0 12px; width: 96px; }

.cb-detail-left.is-hidden  { transform: translateX(calc(-100% - 64px)); pointer-events: none; }
.cb-detail-right.is-hidden { transform: translateX(calc( 100% + 64px)); pointer-events: none; }

/* Cascade columns — additional 76px drill panels stacked right; +4px gap. */
#cb-detail-colors-2 { left: 144px; border-radius: 0 12px 12px 0; }   /* 64 rail + 76 detail + 4 gap */
#cb-detail-colors-3 { left: 224px; border-radius: 0 12px 12px 0; }
#cb-detail-colors-4 { left: 304px; border-radius: 0 12px 12px 0; }

#cb-detail-colors-2.is-hidden,
#cb-detail-colors-3.is-hidden,
#cb-detail-colors-4.is-hidden { transform: translateX(calc(-100% - 80px)); pointer-events: none; }

/* Bottom detail: spans the area above the bottom rail; slides UP from below. */
.cb-detail-bottom {
  bottom: 114px;            /* above the 60-tall rail (which is above the 54 toolbar) */
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  height: 220px;
  left: 64px;
  right: 64px;
  top: auto;
  width: auto;
}

.cb-detail-bottom.is-hidden {
  transform: translateY(calc(100% + 60px));
  pointer-events: none;
}

/* (Bottom rail removed — canvas tiles live in the right rail now.) */

.cb-detail-head {
  align-items: center;
  background: linear-gradient(90deg, rgba(30, 156, 137, 0.14), rgba(255, 109, 95, 0.12)), rgba(237, 242, 238, 0.92);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 4px;
  padding: 4px 6px;
}

.cb-detail-head button {
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 4px !important;
}

.cb-detail-title {
  flex: 1 1 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cb-detail-head button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  min-height: 24px;
  min-width: 24px;
  padding: 0 6px;
}
.cb-detail-head button:hover { border-color: var(--ink, #111); }

.cb-detail-body {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding: 8px;
}

.cb-detail-hint {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  margin: 0;
}

.cb-detail-action {
  background: var(--ink, #111);
  border: 1px solid var(--ink, #111);
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 32px;
  padding: 4px 10px;
  text-transform: uppercase;
}

.cb-detail-palette-select {
  min-height: 30px;
  padding: 4px 8px;
  width: 100%;
}

/* Reserve rail space once on the workspace. The canvas-stage is nested inside
   it, so offsetting both containers double-shrank tablet canvases. */
body.cb-has-colors-rail .studio-workspace { padding-left:  64px; }
body.cb-has-brush-rail  .studio-workspace { padding-right: 64px; }
body.cb-has-colors-detail .studio-workspace { padding-left:  140px; }   /* 64 rail + 76 detail */

/* Cascade depth body-classes grow the margin per extra column (80px each). */
body.cb-cascade-2 .studio-workspace { padding-left: 220px; }
body.cb-cascade-3 .studio-workspace { padding-left: 300px; }
body.cb-cascade-4 .studio-workspace { padding-left: 380px; }
body.cb-has-brush-detail .studio-workspace { padding-right: 160px; }   /* 64 rail + 96 detail */

/* ---------- Repositionable rails (drag-to-edge) ----------
   Default: Colors rail on LEFT, Brush rail on RIGHT.
   When body.cb-rails-swapped is set, everything flips. The DOM doesn't move
   — CSS overrides do the swap so we don't have to re-bind events or move
   stateful elements. Cascade columns also flip from left:Npx to right:Npx. */
body.cb-rails-swapped .cb-rail-left  { left: auto; right: 0; border-right: none; border-left: 1px solid var(--line); }
body.cb-rails-swapped .cb-rail-right { right: auto; left: 0;  border-left: none;  border-right: 1px solid var(--line); }
body.cb-rails-swapped .cb-detail-left  { left: auto; right: 64px; border-radius: 12px 0 0 12px; border-right: none; border-left: 1px solid var(--line); }
body.cb-rails-swapped .cb-detail-right { right: auto; left:  64px; border-radius: 0 12px 12px 0; border-left:  none; border-right: 1px solid var(--line); }
body.cb-rails-swapped .cb-detail-left.is-hidden  { transform: translateX(calc( 100% + 64px)); }
body.cb-rails-swapped .cb-detail-right.is-hidden { transform: translateX(calc(-100% - 64px)); }
body.cb-rails-swapped #cb-detail-colors-2 { left: auto; right: 144px; border-radius: 12px 0 0 12px; }
body.cb-rails-swapped #cb-detail-colors-3 { left: auto; right: 224px; border-radius: 12px 0 0 12px; }
body.cb-rails-swapped #cb-detail-colors-4 { left: auto; right: 304px; border-radius: 12px 0 0 12px; }
body.cb-rails-swapped #cb-detail-colors-2.is-hidden,
body.cb-rails-swapped #cb-detail-colors-3.is-hidden,
body.cb-rails-swapped #cb-detail-colors-4.is-hidden { transform: translateX(calc(100% + 80px)); }

/* Swapped: workspace padding moves to the other side. */
body.cb-rails-swapped.cb-has-colors-rail   .studio-workspace { padding-left: 0;     padding-right: 64px;  }
body.cb-rails-swapped.cb-has-brush-rail    .studio-workspace { padding-right: 0;    padding-left:  64px;  }
body.cb-rails-swapped.cb-has-colors-detail .studio-workspace { padding-left: 0;     padding-right: 140px; }
body.cb-rails-swapped.cb-cascade-2         .studio-workspace { padding-left: 0;     padding-right: 220px; }
body.cb-rails-swapped.cb-cascade-3         .studio-workspace { padding-left: 0;     padding-right: 300px; }
body.cb-rails-swapped.cb-cascade-4         .studio-workspace { padding-left: 0;     padding-right: 380px; }
body.cb-rails-swapped.cb-has-brush-detail  .studio-workspace { padding-right: 0;    padding-left:  160px; }

/* Rail head doubles as a drag handle. When the user grabs it we tag with
   .is-dragging so the cursor + opacity reflect the drag state. */
.cb-rail-head {
  cursor: grab;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.cb-rail-head::after {
  content: "⋮⋮";
  color: var(--muted);
  display: block;
  font-size: 10px;
  letter-spacing: -1px;
  line-height: 1;
  opacity: 0.55;
  padding-top: 2px;
}
.cb-rail.is-dragging { opacity: 0.55; cursor: grabbing; }
.cb-rail.is-drop-target { background: rgba(30, 156, 137, 0.18); border-color: var(--accent, #1e9c89); box-shadow: inset 0 0 0 2px rgba(30, 156, 137, 0.55); }

/* Ghost preview that follows the pointer while dragging a rail. */
.cb-rail-drag-ghost {
  align-items: center;
  background: rgba(30, 156, 137, 0.18);
  border: 1px dashed var(--accent, #1e9c89);
  border-radius: 8px;
  color: #0c2a26;
  font-size: 10px;
  font-weight: 800;
  height: 56px;
  letter-spacing: 0.06em;
  padding: 6px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  text-transform: uppercase;
  width: 64px;
  z-index: 9999;
}

/* Drop-zone visual hints — show a glowing border on the edge where the
   rail will land while the user is mid-drag. */
.cb-rail-drop-zone {
  background: rgba(30, 156, 137, 0.08);
  border: 2px dashed rgba(30, 156, 137, 0.55);
  bottom: var(--studio-bottombar-height);
  pointer-events: none;
  position: absolute;
  top: var(--studio-topbar-height);
  width: 64px;
  z-index: 9998;
}
.cb-rail-drop-zone.is-left  { left: 0; }
.cb-rail-drop-zone.is-right { right: 0; }
.cb-rail-drop-zone.is-active { background: rgba(30, 156, 137, 0.22); border-color: var(--accent, #1e9c89); }

/* ---------- Brush builder (Build tile) ----------
   When body.cb-brush-builder-open is on, the right detail panel widens to
   fit the curve editors + controls (still narrower than the side panel). */
body.cb-brush-builder-open .cb-detail-right { width: 220px; }
body.cb-brush-builder-open.cb-has-brush-detail .studio-workspace { padding-right: 284px; }   /* 64 rail + 220 detail */
body.cb-brush-builder-open.cb-rails-swapped.cb-has-brush-detail .studio-workspace { padding-right: 0; padding-left: 284px; }

/* Overlay law: rails reserve their permanent edge columns once; every detail,
   cascade, history, chat, pens, and builder panel floats above the canvas.
   Opening a tool must never resize or re-center the artwork. */
body.cb-has-colors-rail.cb-has-brush-rail .studio-workspace {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

body.cb-history-detail-open .cb-detail-right,
body.cb-chat-detail-open .cb-detail-right {
  width: min(300px, calc(100vw - 128px));
}

body.cb-pens-detail-open .cb-detail-right {
  width: min(220px, calc(100vw - 128px));
}

body.cb-pens-detail-open .cb-detail-body {
  align-content: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.cb-pens-detail-open .cb-pen-name-input {
  grid-column: 1 / -1;
}

.cb-builder-body {
  display: grid;
  gap: 8px;
  padding: 4px 2px;
}
.cb-builder-row {
  display: grid;
  gap: 3px;
}
.cb-builder-row > label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cb-builder-name {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink, #111);
  font-size: 12px;
  padding: 5px 6px;
  width: 100%;
}
.cb-builder-kind {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink, #111);
  font-size: 11px;
  padding: 4px;
  width: 100%;
}
.cb-builder-curve {
  background: linear-gradient(180deg, #fafafa, #f0f3ef);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: crosshair;
  display: block;
  height: 80px;
  touch-action: none;
  width: 100%;
}
.cb-builder-icons {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(6, 1fr);
}
.cb-builder-icon {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.cb-builder-icon.is-active {
  background: var(--ink, #111);
  border-color: var(--ink, #111);
  color: #fff;
}
.cb-builder-preview {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 60px;
  width: 100%;
}
.cb-builder-actions {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
}
.cb-builder-save, .cb-builder-cancel {
  background: var(--ink, #111);
  border: 1px solid var(--ink, #111);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px;
  text-transform: uppercase;
}
.cb-builder-cancel {
  background: transparent;
  color: var(--ink, #111);
}
.cb-builder-hint {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
  margin: 0;
}

/* Easel sync state pill — tiny indicator on the rail head when sync to server
   is in flight. */
.cb-rail-head .cb-easel-sync {
  background: var(--accent, #1e9c89);
  border-radius: 999px;
  display: inline-block;
  height: 6px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 200ms ease;
  vertical-align: middle;
  width: 6px;
}
.cb-rail-head .cb-easel-sync.is-syncing { opacity: 0.85; animation: cb-easel-sync-pulse 1.2s infinite; }
@keyframes cb-easel-sync-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.6); }
}

/* Canvas tiles moved into the right rail — bottom-rail body classes no
   longer add margin. Left as no-ops so older state in localStorage degrades
   gracefully (the body class might still be lingering on restore). */
body.cb-has-canvas-rail .canvas-stage,
body.cb-has-canvas-rail .studio-workspace { margin-bottom: 0; }

.cb-module-head strong {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cb-module-spacer { flex: 1 1 auto; }

.cb-module-head button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  min-height: 24px;
  min-width: 24px;
  padding: 0 6px;
}

.cb-module-head button:hover { border-color: var(--ink, #111); }

.cb-module-body {
  display: grid;
  gap: 6px;
}

/* Brush module: 3-col tile grid (matches the rail-tile vibe; cohesive with
   color swatches at the same size). */
.cb-tools-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The grouped rule near the top of the detail styles pins
   `.cb-detail-body .cb-tools-grid` to one column (0,2,0 beats the 0,1,0
   rule above), which blew each square tool tile up to the full panel
   width. Re-assert the 3-column layout at the same specificity, later. */
.cb-detail-body .cb-tools-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-tool-tile {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 9px;
  font-weight: 700;
  gap: 2px;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 4px 2px;
}

.cb-tool-tile .tool-glyph {
  font-size: 14px;
  line-height: 1;
}

.cb-tool-tile .cb-tool-label {
  font-size: 9px;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
}

.cb-tool-tile.is-active {
  background: var(--ink, #111);
  color: #fff;
}

/* Bottom-toolbar icon-only style: emoji + tiny label below for clarity. */
.cb-toolbar-icon {
  align-items: center;
  display: inline-flex !important;
  flex-direction: column;
  font-size: 16px;
  gap: 1px;
  line-height: 1;
  min-height: 38px;
  padding: 3px 6px !important;
}

.cb-toolbar-icon .cb-toolbar-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cb-toolbar-icon.is-active {
  background: var(--mint, #1e9c89);
  color: #fff;
}

/* The cb-toolbar-icon class uses `display: inline-flex !important`, so the
   plain `hidden` attribute can't suppress it. This selector wins. */
.cb-toolbar-icon[hidden] { display: none !important; }

/* On narrow phones the rails get skinnier; color panels stay 112px. */
@media (max-width: 768px) {
  .cb-rail   { width: 52px; }
  .cb-rail-tile { min-height: 44px; padding: 3px 1px; }
  .cb-rail-glyph { font-size: 14px; }
  .cb-detail-left  { left: 52px; }
  .cb-detail-right { right: 52px; width: 96px; }
  #cb-detail-colors-2 { left: 132px; }   /* 52 rail + 76 detail + 4 gap */
  #cb-detail-colors-3 { left: 212px; }
  #cb-detail-colors-4 { left: 292px; }
  body.cb-has-colors-rail .studio-workspace { padding-left: 52px; }
  body.cb-has-brush-rail  .studio-workspace { padding-right: 52px; }
  body.cb-has-colors-detail .studio-workspace { padding-left: 128px; }
  body.cb-has-brush-detail  .studio-workspace { padding-right: 148px; }
  body.cb-cascade-2 .studio-workspace { padding-left: 208px; }

  body.cb-has-colors-rail.cb-has-brush-rail .studio-workspace {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }

  body.cb-history-detail-open .cb-detail-right,
  body.cb-chat-detail-open .cb-detail-right {
    width: min(300px, calc(100vw - 104px));
  }

  body.cb-pens-detail-open .cb-detail-right {
    width: min(220px, calc(100vw - 104px));
  }
}

/* ---------- Expanding color picker ----------
   Two-row layout: a small header showing current sweep dimension + back/reset
   controls, and the main row with [complement][10 swatches][next]. */
.drill-picker {
  display: grid;
  gap: 5px;
}

.drill-row {
  align-items: center;
  display: flex;
  gap: 4px;
}

.drill-row-head {
  font-size: 11px;
}

.drill-level-pill {
  background: rgba(237, 242, 238, 0.78);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  flex: 1 1 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  text-transform: uppercase;
}

.drill-level-pill small {
  color: var(--ink, #111);
  margin-left: 4px;
}

.drill-back, .drill-reset {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  min-height: 24px;
  min-width: 24px;
  padding: 0 6px;
}

.drill-back[disabled] {
  cursor: not-allowed;
  opacity: 0.35;
}

.drill-back:not([disabled]):hover,
.drill-reset:hover {
  border-color: var(--ink, #111);
}

.drill-row-ends {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.drill-complement,
.drill-next {
  align-items: center;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  min-height: 0;
  padding: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  transition: transform 80ms ease, border-color 80ms ease;
  width: 100%;
}

.drill-complement:hover,
.drill-next:hover {
  border-color: var(--ink, #111);
  transform: scale(1.05);
}

/* 5×2 grid — fits 10 swatches in a tight narrow column. */
.drill-strip {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.drill-swatch {
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  min-height: 0;
  min-width: 0;
  padding: 0;
  transition: transform 80ms ease, border-color 80ms ease;
}

.drill-swatch:hover {
  border-color: var(--ink, #111);
  transform: scale(1.1);
  z-index: 2;
}

.drill-swatch.is-active {
  border-color: var(--ink, #111);
  transform: scale(1.12);
  z-index: 3;
}

.easel-preset-form {
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.easel-preset-list,
.wing-preset-grid {
  display: grid;
  gap: 5px;
}

.easel-preset-item {
  align-items: stretch;
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.easel-preset-btn,
.wing-preset-btn,
.wing-easel-button {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
  text-align: left;
}

.easel-preset-btn span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.easel-preset-btn strong,
.easel-preset-btn small,
.wing-preset-btn span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.easel-tool-group,
.wing-tool-group {
  display: grid;
  gap: 4px;
}

.quick-actions button {
  white-space: nowrap;
}

.wing-menu {
  background: rgba(251, 251, 247, 0.98);
  border: 1px solid rgba(16, 20, 19, 0.12);
  border-radius: 8px 0 0 8px;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
  right: 0;
  left: auto;
  max-height: min(72dvh, 680px);
  overflow: auto;
  padding: 10px;
  position: absolute;
  transform: translateX(104%);
  transition: transform 180ms ease;
  width: min(238px, calc(100vw - 12px));
  /* Stay above rail details and the 1000-level side panel. The Wing is a
     persistent module switcher; if it sits underneath an open panel, its
     visible buttons send the tap to the panel behind them. */
  z-index: 1100;
}

.wing-menu.is-open {
  transform: translateX(0);
}

.wing-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.wing-head strong {
  display: block;
  font-size: 16px;
}

.wing-head button,
.wing-module-grid button,
.wing-tool-grid button {
  align-items: center;
  background: #edf2ee;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  gap: 6px;
  justify-content: flex-start;
  min-height: 32px;
  padding: 6px 8px;
  text-align: left;
}

.wing-section,
.wing-controls {
  display: grid;
  gap: 6px;
}

.wing-module-grid,
.wing-tool-grid,
.wing-color-grid {
  display: grid;
  gap: 5px;
}

.wing-module-grid {
  grid-template-columns: 1fr;
}

.wing-tool-grid {
  grid-template-columns: 1fr;
}

.wing-color-grid {
  grid-template-columns: repeat(5, 1fr);
}

.wing-module-grid button.is-active,
.wing-tool-grid button.is-active {
  background: var(--ink);
  color: white;
}

.wing-swatch {
  border: 2px solid white;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(16, 20, 19, 0.22);
  height: 25px;
  min-width: 0;
  padding: 0;
}

.wing-swatch.is-active {
  box-shadow: 0 0 0 3px rgba(16, 20, 19, 0.9);
}

.wing-controls {
  grid-template-columns: 1fr;
}

.wing-controls label {
  display: grid;
  gap: 4px;
}

.wing-controls label:last-child {
  grid-column: 1 / -1;
}

.wing-controls input[type="range"] {
  min-height: 20px;
  padding: 0;
}

.is-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  html,
  body,
  .app-shell,
  .screen-stack,
  .studio-view,
  .studio-frame {
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
    width: 100%;
  }

  .top-menu,
  .bottom-toolbar,
  .studio-workspace {
    max-width: 100vw;
    min-width: 0;
    width: 100%;
  }

  body {
    overflow: hidden;
  }

  .home-view {
    padding: 0;
  }

  .home-top-menu {
    display: grid;
    align-items: stretch;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .home-brand {
    grid-column: 1 / -1;
  }

  .home-top-menu .join-row {
    grid-column: 1 / -1;
    gap: 6px;
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }

  .home-top-menu .join-row .field-label {
    grid-column: 1 / -1;
  }

  .home-top-menu .join-row button,
  .home-top-menu .ghost-button {
    justify-content: center;
    min-width: 0;
    width: 100%;
  }

  .home-workspace {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    padding: 12px;
  }

  .home-copy {
    display: block;
    min-height: auto;
    order: 0;
    padding: 4px 0 14px;
  }

  .home-copy .eyebrow {
    margin-bottom: 8px;
  }

  .home-copy h1 {
    font-size: clamp(28px, 7vw, 34px);
    line-height: 1.02;
    margin: 0 0 12px;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .home-primary-actions {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }

  .home-lessons-panel {
    order: 1;
  }

  .home-rooms-panel {
    order: 2;
  }

  .home-boards-panel {
    order: 3;
  }

  .home-guides-panel {
    order: 4;
  }

  .home-lessons-panel,
  .home-rooms-panel,
  .home-boards-panel,
  .home-guides-panel {
    flex: 0 0 auto;
    min-height: min(46dvh, 360px);
    width: 100%;
  }

  .home-chat-panel {
    inset: auto 8px calc(54px + env(safe-area-inset-bottom)) 8px;
    max-height: 58dvh;
    width: auto;
  }

  .room-grid,
  .board-preview-grid {
    grid-template-columns: 1fr;
  }

  .top-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: max(6px, env(safe-area-inset-top)) 10px 6px;
    scrollbar-width: none;
  }
  
  .top-menu::-webkit-scrollbar {
    display: none;
  }

  .top-menu > * {
    flex: 0 0 auto;
  }

  .select-wrap {
    min-width: 110px;
  }

  .bottom-toolbar {
    min-height: 42px;
    padding: 4px 8px max(4px, env(safe-area-inset-bottom));
    gap: 5px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bottom-toolbar::-webkit-scrollbar {
    display: none;
  }

  .bottom-toolbar > * {
    flex: 0 0 auto;
  }

  .studio-frame,
  .studio-frame.panel-open {
    grid-template-areas:
      "top"
      "stage"
      "bottom";
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-frame.chrome-collapsed {
    grid-template-areas: "stage";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  .quick-picker {
    border-radius: 8px;
    width: min(348px, calc(100vw - 18px));
  }

  .wing-menu {
    bottom: calc(44px + env(safe-area-inset-bottom));
    max-height: min(62dvh, 560px);
    width: min(238px, calc(100vw - 12px));
  }

  .tool-cluster {
    display: flex;
    flex-wrap: nowrap;
    max-width: none;
    overflow-x: visible;
    flex: 0 0 auto;
  }

  .compact-control {
    min-width: auto;
  }

  .bottom-toolbar .icon-button,
  .bottom-toolbar .tool-cluster button {
    font-size: 11px;
    min-height: 34px;
    min-width: 38px;
    padding: 4px 8px;
    border-radius: 8px;
  }

  .bottom-toolbar .compact-control select {
    height: 34px;
    min-height: 34px;
    font-size: 12px;
    width: 96px;
    padding: 5px 8px;
  }

  .bottom-toolbar .compact-control input[type="color"] {
    height: 34px;
    min-height: 34px;
    width: 40px;
  }

  .bottom-toolbar .compact-control input[type="range"] {
    height: 24px;
    min-height: 24px;
    width: 76px;
  }

  .popover-color-btn {
    width: 22px;
    height: 22px;
  }

  .popover-colors-grid {
    gap: 6px;
  }

  .side-panel {
    border-left: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
    box-shadow: 0 -14px 32px rgba(16, 20, 19, 0.14);
    grid-area: auto;
    max-width: none;
    top: auto;
    max-height: min(58dvh, 500px);
    opacity: 1;
    pointer-events: auto;
    left: 0;
    position: fixed;
    right: 0;
    transform: translateY(104%);
    width: 100vw;
  }

  .side-panel.is-open {
    border-top: 1px solid var(--line);
    transform: translateY(0);
  }

  .side-panel:not(.is-open) {
    transform: translateY(104%);
  }

  .book-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lesson-actions,
  .library-actions,
  .export-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .timelapse-actions,
  .timelapse-settings,
  .lesson-actions,
  .library-actions,
  .export-actions {
    grid-template-columns: 1fr;
  }
  .home-copy h1 {
    font-size: clamp(30px, 13vw, 46px);
  }

  .home-primary-actions {
    grid-template-columns: 1fr;
  }

  .home-lesson-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .home-lesson-state {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .book-grid {
    grid-template-columns: 1fr;
  }
}

.add-color-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  height: 18px;
  margin-left: 6px;
  transition: all 0.15s ease;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.add-color-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.size-presets {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  align-items: center;
}

.size-preset-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 9px;
  font-weight: bold;
  height: 18px;
  padding: 0 4px;
  text-align: center;
  transition: all 0.15s ease;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.size-preset-btn:hover,
.size-preset-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
}

.swatch.is-custom-swatch {
  border-color: var(--accent) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 4px rgba(255, 93, 115, 0.4);
}

.quick-swatch.is-custom-swatch {
  border-color: var(--accent) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 4px rgba(255, 93, 115, 0.4);
}

.settings-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  font-weight: bold;
  margin-top: 12px;
  opacity: 0.8;
  padding-top: 12px;
  text-transform: uppercase;
}

.custom-presets-form {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.custom-presets-form input {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
}

.custom-presets-form button {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 10px;
}

.custom-presets-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.custom-preset-item {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
}

.custom-preset-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.custom-preset-info {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.custom-preset-info strong {
  font-size: 12px;
  color: white;
}

.custom-preset-info span {
  color: #8a8e8c;
  font-size: 10px;
}

.custom-preset-delete {
  background: transparent;
  border: none;
  color: #ff5d73;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  padding: 0 4px;
}

.layers-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  font-weight: bold;
  margin-top: 14px;
  opacity: 0.8;
  padding-top: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mint);
}

.placement-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.placement-actions button {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  padding: 6px;
  transition: all 0.15s ease;
}

.placement-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--mint);
}

#btn-clear-placed {
  color: #ff5d73;
}

#btn-clear-placed:hover {
  background: rgba(255, 93, 115, 0.15);
  border-color: #ff5d73;
}

.template-placement-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  scrollbar-width: thin;
}

.template-placement-thumb {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.template-placement-thumb:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
}

.template-placement-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.transform-controls {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transform-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.transform-slider span {
  font-size: 11px;
  color: #c9cecb;
  font-weight: 600;
}

.transform-slider input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.transform-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.transform-btn-row button {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  padding: 6px;
  transition: all 0.15s ease;
}

.transform-btn-row button:hover {
  background: rgba(255, 255, 255, 0.2);
}

#btn-transform-tool {
  background: var(--accent);
  border-color: var(--accent);
}

#btn-transform-tool:hover {
  background: #ff788a;
  border-color: #ff788a;
}

#btn-transform-tool.is-active {
  background: #1e9c89;
  border-color: #1e9c89;
  box-shadow: 0 0 8px rgba(30, 156, 137, 0.5);
}

.stream-indicator {
  background: #ff5d73;
  color: #ffffff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  animation: stream-blink 1.2s infinite ease-in-out;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

@keyframes stream-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

/* Floating Communication Bar */
.floating-comm-bar {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 20, 19, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  padding: 6px 12px;
  z-index: 120;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-comm-bar.is-hidden {
  opacity: 0;
  transform: translateY(15px) scale(0.92);
  pointer-events: none;
}

/* Respect the boolean `hidden` attribute — the JS uses it to suppress the
   reaction bar outside of an active chat session, and the original
   `display:flex` above otherwise wins. */
.floating-comm-bar[hidden] {
  display: none !important;
}

.comm-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  position: relative;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.comm-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.mic-btn.is-recording {
  background: #ff3b30;
  border-color: #ff3b30;
  animation: mic-glow 1.5s infinite alternate ease-in-out;
}

@keyframes mic-glow {
  0% { box-shadow: 0 0 4px rgba(255, 59, 48, 0.4); }
  100% { box-shadow: 0 0 16px rgba(255, 59, 48, 0.9); }
}

.mic-pulse {
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 2px solid #ff3b30;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.mic-btn.is-recording .mic-pulse {
  animation: mic-ripple 1.5s infinite linear;
}

@keyframes mic-ripple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.tts-btn.is-muted {
  opacity: 0.55;
  background: rgba(255, 255, 255, 0.05);
}

.comm-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 2px;
}

.reaction-buttons {
  display: flex;
  gap: 5px;
}

.react-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 0;
}

.react-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.35) rotate(-5deg);
}

.react-btn:active {
  transform: scale(0.9);
}

/* Real-time speech preview bubble */
.comm-speech-bubble {
  position: absolute;
  bottom: 58px;
  right: 14px;
  background: rgba(16, 20, 19, 0.92);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 8px 12px;
  color: white;
  font-size: 12px;
  max-width: 240px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  z-index: 121;
  pointer-events: none;
  animation: bubble-fade-in 0.25s ease-out;
}

@keyframes bubble-fade-in {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Chat bubble overlay system */
.chat-bubble-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 110;
}

.chat-bubble-item {
  position: absolute;
  background: rgba(16, 20, 19, 0.88);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 8px 12px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  max-width: 220px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -100%) scale(0);
  pointer-events: none;
  word-wrap: break-word;
  transition: opacity 0.3s ease;
  animation: pop-bubble 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.chat-bubble-item::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(16, 20, 19, 0.88) transparent transparent;
  display: block;
  width: 0;
}

.chat-bubble-name {
  display: block;
  font-size: 10px;
  font-weight: bold;
  opacity: 0.85;
  margin-bottom: 2px;
  text-transform: uppercase;
}

@keyframes pop-bubble {
  0% { transform: translate(-50%, -100%) scale(0.4); opacity: 0; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

/* Floating reaction particles */
.reaction-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 109;
}

.reaction-particle {
  position: absolute;
  font-size: 24px;
  pointer-events: none;
  animation: float-reaction 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes float-reaction {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -100%) scale(1.2) rotate(var(--spin));
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--drift)), -250px) scale(0.6) rotate(calc(var(--spin) * 2));
    opacity: 0;
  }
}

/* Palette selector CSS */
.palette-control {
  margin-left: 6px;
}

.palette-select {
  height: 26px;
  min-height: 26px;
  font-size: 11px;
  width: 90px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: white;
  padding: 0 4px;
  cursor: pointer;
  outline: none;
}

.palette-select:hover {
  border-color: var(--accent);
}

/* Context Menu Popover */
.context-menu-popover {
  position: absolute;
  background: rgba(16, 20, 19, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  padding: 12px;
  z-index: 130;
  width: 260px;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: inherit;
  animation: context-pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.context-menu-popover[hidden],
.context-menu-popover:empty {
  display: none !important;
  pointer-events: none;
}

@keyframes context-pop-in {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.context-menu-popover h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--mint);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.context-menu-popover .popover-close {
  background: transparent;
  border: none;
  color: #ff5d73;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 1;
}

.popover-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 6px;
  gap: 4px;
}

.popover-tab-btn {
  background: transparent;
  border: none;
  color: #8a8e8c;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.popover-tab-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.popover-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popover-panel[hidden] {
  display: none !important;
}

/* User Profile card */
.user-profile-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  color: white;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.user-profile-info {
  display: flex;
  flex-direction: column;
}

.user-profile-info strong {
  font-size: 12px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.user-profile-info span {
  font-size: 10px;
  color: #8a8e8c;
}

.user-status-text {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px;
  font-size: 11px;
  color: #c9cecb;
  font-style: italic;
  line-height: 1.3;
  word-break: break-word;
}

/* Shortcuts grid */
.popover-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.popover-tool-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 10px;
  padding: 6px 0;
  text-align: center;
  transition: all 0.15s ease;
}

.popover-tool-btn:hover,
.popover-tool-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
}

.popover-colors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.popover-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid white;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.popover-color-btn.is-active {
  box-shadow: 0 0 0 2px var(--accent);
}

/* Popover Form Controls */
.popover-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}

.popover-field span {
  font-size: 10px;
  color: #8a8e8c;
  font-weight: 600;
}

.popover-field input[type="text"] {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  font-size: 11px;
  padding: 6px 8px;
  outline: none;
}

.popover-field input[type="text"]:focus {
  border-color: var(--accent);
}

/* Action Buttons */
.popover-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.popover-action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  padding: 6px;
  transition: all 0.15s ease;
  text-align: center;
}

.popover-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--mint);
}

.popover-action-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  grid-column: 1 / -1;
}

.popover-action-btn.primary:hover {
  background: #ff788a;
  border-color: #ff788a;
}

.presence-pill {
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: all 0.15s ease;
}

.presence-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Hide redundant top bar buttons - already accessible in Wing menu */
#open-books,
#open-layers,
#open-settings,
#open-lessons,
#open-library,
#open-export,
#mode-toggle,
#music-toggle,
#chat-toggle {
  display: none !important;
}
/* #open-app-settings stays visible: it is the ONLY opener of the
   #settings-dropdown (E-Ink mode, sound, pen manager). Hiding it made
   those settings unreachable. */

/* Custom Presets inside Context Menu Popovers */
.popover-presets-divider {
  font-size: 10px;
  color: #8a8e8c;
  font-weight: 600;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
}

.popover-presets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 80px;
  overflow-y: auto;
}

.popover-preset-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 9px;
  padding: 3px 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 90px;
  transition: all 0.1s ease;
}

.popover-preset-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--mint);
}

/* --- Themes for specialized sites --- */
body[data-site-type="vector"] {
  --ink: #0d2847;
  --muted: #4a6fa5;
  --paper: #f0f7ff;
  --panel: #ffffff;
  --line: #b9d2f2;
  --mint: #007799;
  --coral: #3388bb;
  --yellow: #f1b82d;
  --blue: #0088cc;
  --btn-bg: #e1eefc;
  --btn-border: #bbd8f8;
  --studio-panel-bg: rgba(240, 247, 255, 0.96);
  --stage-grid: rgba(68, 100, 173, 0.12);
  --stage-bg: #e6f0fa;
  background: #e1efff;
}

body[data-site-type="blank"] {
  --ink: #111111;
  --muted: #666666;
  --paper: #ffffff;
  --panel: #fafafa;
  --line: #dcdcdc;
  --mint: #333333;
  --coral: #555555;
  --yellow: #f1b82d;
  --blue: #222222;
  --btn-bg: #eeeeee;
  --btn-border: #cccccc;
  --studio-panel-bg: rgba(250, 250, 250, 0.96);
  --stage-grid: rgba(0, 0, 0, 0.06);
  --stage-bg: #f4f4f4;
  background: #f4f4f4;
}

body[data-site-type="solo"] {
  --ink: #2b1d0c;
  --muted: #7d6951;
  --paper: #fdfaf6;
  --panel: #ffffff;
  --line: #eccdb8;
  --mint: #d46a00;
  --coral: #c84b31;
  --yellow: #f1b82d;
  --blue: #3d6cb9;
  --btn-bg: #f9ede2;
  --btn-border: #ebd9c8;
  --studio-panel-bg: rgba(253, 250, 246, 0.96);
  --stage-grid: rgba(212, 106, 0, 0.06);
  --stage-bg: #fcf6ef;
  background: #f7ece1;
}

body[data-site-type="multiplayer"] {
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --paper: #090d16;
  --panel: #111827;
  --line: #1f2937;
  --mint: #10b981;
  --coral: #ef4444;
  --yellow: #f59e0b;
  --blue: #3b82f6;
  --btn-bg: #1e293b;
  --btn-border: #374151;
  --studio-panel-bg: rgba(17, 24, 39, 0.95);
  --stage-grid: rgba(255, 255, 255, 0.04);
  --stage-bg: #0b0f19;
  background: #030712;
  color-scheme: dark;
}

.canvas-stage {
  background:
    linear-gradient(90deg, var(--stage-grid, rgba(16, 20, 19, 0.05)) 1px, transparent 1px),
    linear-gradient(0deg, var(--stage-grid, rgba(16, 20, 19, 0.05)) 1px, transparent 1px),
    var(--stage-bg, #e8ede9);
  background-size: 32px 32px;
}

/* Coloring pages should read as one continuous sheet. Keep the grid for the
   dark multiplayer/vector workspace, but never expose a cream gutter around
   a fitted solo page. */
body[data-site-type="solo"] .canvas-stage {
  background: #ffffff;
}

/* Deconstructed lobby layouts */
.home-view[data-lobby-tab="portals"] .home-workspace {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
}
.home-view[data-lobby-tab="portals"] .home-copy,
.home-view[data-lobby-tab="portals"] .home-lessons-panel,
.home-view[data-lobby-tab="portals"] .home-rooms-panel,
.home-view[data-lobby-tab="portals"] .home-boards-panel,
.home-view[data-lobby-tab="portals"] .home-guides-panel,
.home-view[data-lobby-tab="portals"] .home-chat-panel {
  display: none !important;
}
.home-view[data-lobby-tab="portals"] #lobby-portal-grid {
  display: grid;
}

.home-view:not([data-lobby-tab="portals"]) #lobby-portal-grid {
  display: none !important;
}

/* Solo tab layout */
.home-view[data-lobby-tab="solo"] .home-workspace {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
}
.home-view[data-lobby-tab="solo"] .home-copy,
.home-view[data-lobby-tab="solo"] .home-lessons-panel,
.home-view[data-lobby-tab="solo"] .home-rooms-panel,
.home-view[data-lobby-tab="solo"] .home-chat-panel {
  display: none !important;
}
.home-view[data-lobby-tab="solo"] .home-boards-panel {
  grid-column: 1;
  grid-row: 1;
  display: grid !important;
}
.home-view[data-lobby-tab="solo"] .home-guides-panel {
  grid-column: 2;
  grid-row: 1;
  display: grid !important;
}

/* Multiplayer tab layout */
.home-view[data-lobby-tab="multiplayer"] .home-workspace {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
}
.home-view[data-lobby-tab="multiplayer"] .home-copy,
.home-view[data-lobby-tab="multiplayer"] .home-lessons-panel,
.home-view[data-lobby-tab="multiplayer"] .home-boards-panel,
.home-view[data-lobby-tab="multiplayer"] .home-guides-panel {
  display: none !important;
}
.home-view[data-lobby-tab="multiplayer"] .home-rooms-panel {
  grid-column: 1;
  grid-row: 1;
  display: grid !important;
}

/* Lessons tab layout */
.home-view[data-lobby-tab="lessons"] .home-workspace {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
}
.home-view[data-lobby-tab="lessons"] .home-copy,
.home-view[data-lobby-tab="lessons"] .home-rooms-panel,
.home-view[data-lobby-tab="lessons"] .home-boards-panel,
.home-view[data-lobby-tab="lessons"] .home-guides-panel {
  display: none !important;
}
.home-view[data-lobby-tab="lessons"] .home-lessons-panel {
  grid-column: 1;
  grid-row: 1;
  display: grid !important;
}

/* Portal Grid Styling */
.lobby-portal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 0 22px;
  width: 100%;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .lobby-portal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

.portal-intro {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(16, 20, 19, 0.88), rgba(16, 20, 19, 0.72)),
    url('media/start/cards/hero-start.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.portal-intro .eyebrow {
  color: #4ef0d5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.portal-intro h1 {
  color: #ffffff;
  font-size: clamp(24px, 3.5vw, 36px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 6px;
  max-width: 720px;
  font-weight: 850;
}

.portal-intro p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px;
  max-width: 680px;
}

.portal-intro-actions {
  align-items: stretch;
  display: flex;
  gap: 8px;
}

.portal-intro-actions button {
  min-height: 42px;
  white-space: nowrap;
}

.portal-feature-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.portal-feature-strip span {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 850;
  padding: 4px 8px;
}

.portal-card {
  background: rgba(18, 24, 22, 0.72);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  padding: 24px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
}

.portal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--blue);
  opacity: 0.8;
  transition: height 0.3s ease;
}

.portal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

.portal-card:hover::before {
  height: 6px;
}

.portal-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.portal-card-badge.neon-badge {
  background: rgba(30, 156, 137, 0.25);
  border-color: rgba(30, 156, 137, 0.4);
  color: #4ef0d5;
}

.portal-icon {
  align-items: center;
  display: inline-flex;
  height: 64px;
  justify-content: center;
  margin-bottom: 14px;
  width: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.portal-icon img {
  border-radius: 50% !important;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.portal-card:hover .portal-icon {
  transform: scale(1.1) rotate(3deg);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.portal-card h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 850;
  color: #ffffff;
}

.portal-card p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.4;
  font-weight: 550;
  transition: color 0.2s ease;
}

.portal-card:hover p {
  color: rgba(255, 255, 255, 0.85);
}

.portal-card.solo-portal::before { background: var(--mint); }
.portal-card.multiplayer-portal::before { background: var(--blue); }
.portal-card.vector-portal::before { background: var(--coral); }
.portal-card.blank-portal::before { background: var(--yellow); }
.portal-card.lessons-portal::before { background: #ab47bc; }

/* Pinned Popovers & Pin button styling */
.context-menu-popover.pinned {
  border: 1px solid var(--mint) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
}

.popover-pin {
  background: transparent;
  border: none;
  color: #8a8e8c;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.popover-pin:hover {
  transform: scale(1.2);
}

.popover-pin.pinned {
  color: var(--coral) !important;
}

@media (max-width: 768px) {
  .quick-picker, .context-menu-popover {
    position: fixed !important;
    top: auto !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-height: min(62vh, 560px);
    overflow-y: auto;
    z-index: 50 !important;
  }

  .lobby-portal-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 0 76px;
  }

  .portal-intro {
    align-items: stretch;
    grid-template-columns: 1fr;
    padding: 20px 16px;
    background:
      linear-gradient(to bottom, rgba(16, 20, 19, 0.92), rgba(16, 20, 19, 0.8)),
      url('media/start/cards/hero-start.jpg');
    background-size: cover;
    background-position: center;
  }

  .portal-intro h1 {
    font-size: clamp(22px, 8vw, 30px);
  }

  .portal-intro-actions {
    flex-wrap: wrap;
  }

  .portal-intro-actions button {
    flex: 1 1 150px;
  }

  .portal-card,
  .portal-card.lessons-portal {
    grid-column: auto;
    aspect-ratio: auto;
    min-height: auto;
    padding: 20px 16px;
    align-items: center;
    text-align: center;
  }

  .portal-icon {
    height: 54px;
    width: 54px;
    margin-bottom: 10px;
  }
}

/* Vector Objects Panel Styles */
.vector-panel select,
.vector-panel input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.vector-panel select:focus,
.vector-panel input[type="text"]:focus {
  border-color: var(--primary);
}

.vector-panel button {
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.vector-panel button:active {
  transform: scale(0.97);
}

#vector-selected-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* COLOR BOOK MEDIA IMPORT 2026-05-28 */
.home-bg-media { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 0; }
.home-bg-video { display: none; height: 100%; inset: 0; object-fit: cover; opacity: 0.34; position: absolute; width: 100%; }
.home-view[data-lobby-tab="portals"] .home-bg-video[data-home-bg="portals"],
.home-view[data-lobby-tab="lessons"] .home-bg-video[data-home-bg="lessons"],
.home-view[data-lobby-tab="solo"] .home-bg-video[data-home-bg="solo"],
.home-view[data-lobby-tab="multiplayer"] .home-bg-video[data-home-bg="multiplayer"] { display: block; }
.home-view::before { z-index: 0; }
.home-frame { position: relative; z-index: 1; }
.portal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, rgba(16, 20, 19, 0.25), rgba(16, 20, 19, 0.82)), var(--portal-card-media);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
.portal-card > * { position: relative; z-index: 1; }
.portal-card:hover::after {
  opacity: 0.88;
  transform: scale(1.04);
}
.cb-toolbar-img, .cb-inline-img, .tool-img, .cb-rail-img, .cb-detail-title-img { aspect-ratio: 1 / 1; border-radius: 8px; display: inline-block; flex: 0 0 auto; object-fit: cover; vertical-align: middle; }
.cb-toolbar-icon, .icon-button.cb-toolbar-icon, .tool-cluster .cb-toolbar-icon { align-items: center; display: inline-flex; gap: 6px; justify-content: center; }
.cb-toolbar-img { height: 22px; width: 22px; }
.cb-rail-img { height: 28px; width: 28px; }
.tool-img { height: 22px; width: 22px; }
.cb-detail-title-img { height: 18px; margin-right: 4px; width: 18px; }
.cb-detail-list-glyph .tool-img, .tool-glyph .tool-img, .cb-rail-glyph .cb-rail-img { display: block; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .home-bg-video { display: none !important; } }

/* ==========================================================================
   COLORING JOURNEY STYLING
   ========================================================================== */

/* Coloring Journey Tab display rules */
.home-view[data-lobby-tab="journey"] .home-workspace {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
}
.home-view[data-lobby-tab="journey"] .home-copy,
.home-view[data-lobby-tab="journey"] .home-lessons-panel,
.home-view[data-lobby-tab="journey"] .home-rooms-panel,
.home-view[data-lobby-tab="journey"] .home-boards-panel,
.home-view[data-lobby-tab="journey"] .home-guides-panel {
  display: none !important;
}
.home-view[data-lobby-tab="journey"] .home-journey-panel {
  grid-column: 1;
  grid-row: 1;
  display: grid !important;
  /* Heading, guidance, then the scrolling card grid. Without the explicit
     third row the guidance collapses to zero height on a phone and the cards
     paint over it. */
  grid-template-rows: auto auto minmax(0, 1fr);
}
.home-view[data-lobby-tab="journey"] .home-bg-video[data-home-bg="solo"] {
  display: block;
}

/* Retired curriculum selectors retained temporarily for old local layouts. */
.lesson-portfolio {
  background: linear-gradient(135deg, #fffaf0, #eef8f5 58%, #edf3ff);
  border: 1px solid rgba(16, 20, 19, 0.22);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16, 20, 19, 0.07);
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px;
}

.lesson-portfolio-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.lesson-portfolio-head h3,
.lesson-portfolio-head p { margin: 0; }

.lesson-portfolio-head > span {
  background: var(--ink);
  border-radius: 999px;
  color: white;
  font-size: 11px;
  font-weight: 900;
  padding: 7px 9px;
}

.lesson-portfolio-metrics,
.lesson-skill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lesson-portfolio-metrics span,
.lesson-skill-cloud span {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 20, 19, 0.14);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
}

.lesson-skill-cloud span { background: #e8f7f2; color: #126f61; }
.lesson-skill-cloud span.is-empty { background: rgba(255, 255, 255, 0.6); color: var(--muted); }

.lesson-artifact-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.lesson-artifact-strip > p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.lesson-artifact-card {
  align-items: center;
  background: white;
  border: 1px solid rgba(16, 20, 19, 0.16);
  border-radius: 9px;
  color: var(--ink);
  display: grid;
  gap: 8px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 64px;
  padding: 4px;
  text-align: left;
}

.lesson-artifact-card img {
  background: #fff;
  border-radius: 6px;
  height: 54px;
  object-fit: cover;
  width: 58px;
}

.lesson-artifact-card span { display: grid; gap: 2px; min-width: 0; }
.lesson-artifact-card strong,
.lesson-artifact-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-artifact-card strong { font-size: 11px; }
.lesson-artifact-card small { color: var(--muted); font-size: 10px; }

.home-lesson-grid {
  display: flex !important;
  flex-direction: column;
  gap: 26px;
  overflow-y: auto;
  padding-right: 2px;
}
.lesson-group-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lesson-group-header {
  align-items: center;
  color: var(--ink);
  display: flex;
  gap: 10px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(16, 20, 19, 0.12);
}
.lesson-group-header h3 {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
}
.lesson-group-header p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  margin: 2px 0 0;
}
.lesson-module-dot {
  background: #d9784f;
  border: 1px solid rgba(16, 20, 19, 0.22);
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.72);
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}
.lesson-group-section[data-module="coloring-essentials"] .lesson-module-dot {
  background: #1e9c89;
}
.lesson-group-section[data-module="advanced-creative-techniques"] .lesson-module-dot {
  background: #4464ad;
}
.lesson-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
/* Overriding broad .home-panel button rules */
.home-panel .home-lesson-card {
  align-items: stretch;
  background: #fffaf0;
  border: 1px solid rgba(16, 20, 19, 0.55);
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 174px;
  padding: 14px;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 8px 18px rgba(16, 20, 19, 0.05);
  cursor: pointer;
}
.home-panel .home-lesson-card:hover {
  transform: translateY(-1px);
  border-color: rgba(16, 20, 19, 0.78);
  box-shadow: 0 12px 26px rgba(16, 20, 19, 0.08);
  background: #fffdf7;
}
.home-panel .home-lesson-card:focus-visible {
  outline: 3px solid rgba(68, 100, 173, 0.34);
  outline-offset: 2px;
}
.home-panel .home-lesson-card.is-complete {
  background: #f2fbf5;
  border-color: rgba(30, 156, 137, 0.68);
}
.home-panel .home-lesson-card.is-in-progress {
  background: #f8f4ff;
  border-color: rgba(68, 100, 173, 0.62);
}
.lesson-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.home-panel .home-lesson-card .home-lesson-number {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(16, 20, 19, 0.42);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  width: 34px;
}
.home-lesson-badge {
  background: #f3d26b;
  border: 1px solid rgba(16, 20, 19, 0.28);
  color: var(--ink);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  text-transform: uppercase;
}
.lesson-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.home-lesson-title {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.home-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-lesson-meta span,
.home-lesson-tools span {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(16, 20, 19, 0.12);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
}
.home-lesson-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-lesson-tools span {
  color: var(--ink);
}
.lesson-card-bottom-rail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(16, 20, 19, 0.12);
  gap: 10px;
}
.home-lesson-state {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 20, 19, 0.12);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
}
.home-panel .home-lesson-card.is-complete .home-lesson-state {
  color: #1a7f6f;
}
.home-lesson-action-btn {
  background: var(--ink);
  border: 0;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  min-height: 36px;
  padding: 8px 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.home-panel .home-lesson-card:hover .home-lesson-action-btn {
  background: #1e9c89;
}
.home-lesson-action-btn:focus-visible {
  outline: 3px solid rgba(68, 100, 173, 0.36);
  outline-offset: 2px;
}
.lesson-progress-track {
  background: rgba(16, 20, 19, 0.08);
  border-radius: 999px;
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
}
.lesson-progress-track span {
  background: #4464ad;
  display: block;
  height: 100%;
  width: 0;
}
.home-lesson-card.is-complete .lesson-progress-track span {
  background: #1e9c89;
}
.lesson-card-preview {
  border-top: 1px solid rgba(16, 20, 19, 0.12);
  margin-top: 12px;
  padding-top: 12px;
}
.lesson-card-preview dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.lesson-card-preview div {
  display: grid;
  gap: 2px;
}
.lesson-card-preview dt {
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.lesson-card-preview dd {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
  margin: 0;
}

/* Coloring Journey Page styling */
.journey-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  overflow-y: auto;
  padding-right: 2px;
  padding-bottom: 24px;
}
.journey-heading-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.journey-threshold-pill {
  background: rgba(30, 156, 137, 0.12);
  border-color: rgba(30, 156, 137, 0.32);
  color: #126c5f;
}
.journey-help-note strong {
  color: var(--ink);
}
.home-panel .journey-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(16, 20, 19, 0.08);
  border-radius: 12px;
  padding: 0;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: auto;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(16, 20, 19, 0.02);
  cursor: pointer;
  text-align: left;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
}
.home-panel .journey-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 156, 137, 0.3);
  box-shadow: 0 10px 24px rgba(16, 20, 19, 0.06);
  background: rgba(255, 255, 255, 0.94);
}
.journey-card-image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e0e5e2;
  border-bottom: 1px solid rgba(16, 20, 19, 0.05);
}
.journey-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.home-panel .journey-card:hover .journey-card-img {
  transform: scale(1.05);
}
.journey-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 19, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.journey-lock-overlay .lock-icon {
  align-items: center;
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.journey-lock-overlay svg {
  fill: none;
  height: 30px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 30px;
}
.home-panel .journey-card.is-locked .journey-lock-overlay {
  display: flex;
}
.journey-complete-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--mint);
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.home-panel .journey-card.is-completed .journey-complete-badge {
  display: flex;
}
.journey-card-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}
.journey-card-step {
  font-size: 10px;
  font-weight: 850;
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.journey-card-title {
  font-size: 14px;
  font-weight: 850;
  color: var(--ink);
  line-height: 1.2;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journey-card-difficulty {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.journey-card-progress-text {
  color: #3a5350;
  font-size: 11px;
  font-weight: 780;
  margin-top: 7px;
}
.journey-card-meter {
  background: rgba(16, 20, 19, 0.1);
  border-radius: 999px;
  display: block;
  height: 6px;
  margin-top: 3px;
  overflow: hidden;
  width: 100%;
}
.journey-card-meter > span {
  background: linear-gradient(90deg, #39b8a3, var(--mint));
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 220ms ease;
}
.journey-card.is-completed .journey-card-progress-text,
.journey-card.is-manually-unlocked .journey-card-progress-text {
  color: #126c5f;
}
.home-panel .journey-card.is-locked {
  cursor: context-menu;
  opacity: 0.76;
}
.home-panel .journey-card.is-locked:hover {
  transform: translateY(-1px);
  border-color: rgba(183, 137, 24, 0.55);
  box-shadow: 0 8px 18px rgba(16, 20, 19, 0.08);
  background: rgba(255, 252, 242, 0.96);
}
.home-panel .journey-card.is-locked:hover .journey-card-img {
  transform: none;
}
.home-panel .journey-card.is-holding {
  border-color: #b78918;
  box-shadow: 0 0 0 3px rgba(183, 137, 24, 0.2);
  transform: scale(0.985);
}

.journey-context-menu {
  gap: 5px;
  min-width: 210px;
  padding: 8px;
  z-index: 360;
}
.journey-context-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  padding: 5px 8px 2px;
}
.journey-context-menu .cb-context-menu-item {
  align-items: center;
  background: var(--mint);
  color: #fff;
  display: flex;
  font-size: 13px;
  min-height: 46px;
}
.journey-context-menu .cb-context-menu-item:hover,
.journey-context-menu .cb-context-menu-item:focus-visible {
  background: #147e6d;
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.journey-context-menu small {
  color: var(--muted);
  font-size: 10px;
  padding: 0 8px 5px;
}

#journey-finish-btn {
  background: linear-gradient(135deg, #178e7c, #0f6d60);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 9px;
  box-shadow: 0 4px 14px rgba(15, 109, 96, 0.3);
  color: #fff;
  min-height: 44px;
  padding: 4px 11px;
}
#journey-finish-btn:hover,
#journey-finish-btn:focus-visible,
#journey-finish-btn.is-ready {
  background: linear-gradient(135deg, #20a991, #0b6458);
  border-color: #fff;
  box-shadow: 0 5px 18px rgba(15, 109, 96, 0.44), 0 0 0 2px rgba(30, 156, 137, 0.22);
}

.journey-setting-note {
  color: var(--muted);
  display: block;
  font-size: 10px;
  grid-column: 1 / -1;
  line-height: 1.35;
  margin-top: 2px;
}

.journey-toast {
  align-items: center;
  background: rgba(246, 255, 252, 0.98);
  border: 1px solid rgba(30, 156, 137, 0.42);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(16, 20, 19, 0.22);
  display: grid;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  left: 50%;
  max-width: min(520px, calc(100vw - 24px));
  opacity: 0;
  padding: 11px 12px;
  pointer-events: none;
  position: fixed;
  top: calc(70px + env(safe-area-inset-top));
  transform: translate(-50%, -10px);
  transition: opacity 160ms ease, transform 180ms ease;
  width: max-content;
  z-index: 500;
}
.journey-toast[hidden] {
  display: none;
}
.journey-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.journey-toast.is-warning {
  background: rgba(255, 250, 235, 0.99);
  border-color: rgba(183, 137, 24, 0.48);
}
.journey-toast-mark {
  align-items: center;
  background: var(--mint);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: 900;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.journey-toast.is-warning .journey-toast-mark {
  background: #b78918;
}
.journey-toast-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.journey-toast-copy strong {
  color: var(--ink);
  font-size: 14px;
}
.journey-toast-copy > span {
  color: #465653;
  font-size: 12px;
  line-height: 1.35;
}
.journey-toast-close {
  background: transparent;
  border: 1px solid rgba(16, 20, 19, 0.16);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  min-height: 42px;
  padding: 6px 9px;
}

.mobile-lesson-step-bar {
  align-items: center;
  background: #fffaf0;
  border: 1px solid rgba(16, 20, 19, 0.42);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(16, 20, 19, 0.16);
  display: none;
  gap: 8px;
  left: 10px;
  padding: 8px;
  position: fixed;
  right: 10px;
  z-index: 85;
}

.mobile-lesson-step-bar button {
  border-radius: 8px;
  font-weight: 900;
  min-height: 40px;
}

.mobile-lesson-step-main {
  align-items: start;
  background: transparent;
  color: var(--ink);
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.mobile-lesson-step-main span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-lesson-step-main strong {
  font-size: 13px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-lesson-step-listen,
.mobile-lesson-step-next {
  background: var(--ink);
  color: white;
  flex: 0 0 auto;
  padding: 8px 10px;
}

.mobile-lesson-step-next {
  background: #1e9c89;
}

@media (max-width: 768px) {
  .side-panel:has(.lesson-panel:not([hidden])) {
    max-height: min(66dvh, 640px);
  }
  .side-panel:has(.lesson-panel:not([hidden])) .panel-head {
    background: rgba(251, 251, 247, 0.98);
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .lesson-panel .lesson-actions {
    background: rgba(251, 251, 247, 0.96);
    /* The tall phone action stack must scroll with the lesson. Keeping it
       sticky covered the narration controls underneath, so taps intended
       for Play/Pause/Stop hit the guide buttons instead. */
    position: static;
  }
  .lesson-group-grid {
    grid-template-columns: 1fr;
  }
  .journey-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  .journey-heading-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .journey-heading-actions .tracker-pill,
  .journey-heading-actions .ghost-button {
    min-height: 38px;
  }
  .journey-toast {
    grid-template-columns: 36px minmax(0, 1fr);
    top: calc(62px + env(safe-area-inset-top));
    width: calc(100vw - 20px);
  }
  .journey-toast-close {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-height: 44px;
  }
  #journey-finish-btn {
    flex: 0 0 auto;
    min-width: 96px;
  }
  .home-panel .home-lesson-card {
    min-height: auto;
  }
  .lesson-portfolio-head { align-items: flex-start; }
  .lesson-artifact-strip { grid-template-columns: 1fr 1fr; }
  .mobile-lesson-step-bar.is-visible {
    bottom: calc(50px + env(safe-area-inset-bottom));
    display: flex;
  }
  .lesson-panel {
    padding-bottom: 18px;
  }
}

/* --- DOCK & MODULAR PANEL WORKSPACE STYLES --- */

.dock-container {
  display: flex;
  gap: 10px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  overflow: auto;
  background: rgba(16, 20, 19, 0.02);
}

.dock-container.dock-left,
.dock-container.dock-right {
  flex-direction: column;
  width: 0px;
  padding: 0;
}

.dock-container.dock-top,
.dock-container.dock-bottom {
  flex-direction: row;
  height: 0px;
  width: 100%;
  padding: 0;
}

.dock-container.dock-left.has-children,
.dock-container.dock-right.has-children {
  width: 330px;
  padding: 10px;
  border-right: 1px solid var(--line);
}

.dock-container.dock-right.has-children {
  border-right: none;
  border-left: 1px solid var(--line);
}

.dock-container.dock-top.has-children,
.dock-container.dock-bottom.has-children {
  height: 240px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.dock-container.dock-bottom.has-children {
  border-bottom: none;
  border-top: 1px solid var(--line);
}

/* Glassmorphism Module Panels */
.mod-panel {
  display: flex;
  flex-direction: column;
  background: rgba(251, 251, 247, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(16, 20, 19, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12), var(--shadow);
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.2s ease, width 0.2s ease;
  min-width: 0;
}

/* Floating vs Docked sizing */
.mod-panel.is-floating {
  width: 320px;
  max-height: 520px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), var(--shadow);
  border-color: rgba(30, 156, 137, 0.2);
}

.docked-left .mod-panel,
.docked-right .mod-panel {
  width: 100%;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.docked-top .mod-panel,
.docked-bottom .mod-panel {
  height: 100%;
  width: 320px;
  flex-shrink: 0;
}

/* Collapsed state */
.mod-panel.is-collapsed {
  max-height: 42px !important;
}

.mod-panel.is-collapsed .mod-body {
  display: none !important;
}

/* Module Header */
.mod-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(30, 156, 137, 0.08), rgba(68, 100, 173, 0.06));
  border-bottom: 1px solid rgba(16, 20, 19, 0.06);
  cursor: grab;
  user-select: none;
  touch-action: none;
  min-height: 42px;
  box-sizing: border-box;
}

.mod-panel.is-floating .mod-header {
  cursor: grab;
}

.mod-panel.is-floating.is-dragging .mod-header {
  cursor: grabbing;
}

.mod-drag-handle {
  font-weight: 850;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mod-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dock-select {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  cursor: pointer;
  height: 22px;
}

.mod-collapse-btn,
.mod-close-btn {
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0;
}

.mod-collapse-btn:hover,
.mod-close-btn:hover {
  background: rgba(16, 20, 19, 0.06);
  color: var(--ink);
}

.mod-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  min-height: 0;
}

/* Snap Preview Zone overlay */
#snap-preview {
  transition: all 0.15s ease-out;
  border-radius: 8px;
}

/* Unified Settings Dropdown in Top Menu */
.settings-dropdown {
  position: absolute;
  top: 52px;
  right: 12px;
  width: 340px;
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(251, 251, 247, 0.98);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(16, 20, 19, 0.12);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), var(--shadow);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 14px;
  box-sizing: border-box;
}

.settings-dropdown[hidden] {
  display: none !important;
}

.settings-dropdown-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.settings-dropdown-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-dropdown-section h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* Curated Shades Row Styling */
.shades-row {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  margin-top: 4px;
}

.shades-swatch {
  flex: 1;
  height: 28px;
  border-radius: 8px;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(16, 20, 19, 0.2);
  cursor: pointer;
  padding: 0;
}

.shades-swatch.is-active {
  box-shadow: 0 0 0 2.5px var(--ink, #101413);
}

/* Historytimeline Scrubber */
.history-action-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  padding: 6px;
  scrollbar-width: thin;
}

.history-action-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 1px solid transparent;
}

.history-action-item:hover {
  background: rgba(16, 20, 19, 0.04);
}

.history-action-item.is-active {
  background: rgba(30, 156, 137, 0.1);
  border-color: rgba(30, 156, 137, 0.2);
  font-weight: bold;
}

.history-scrub-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-scrub-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: bold;
}

/* Photoshop-style history exposed in the permanent Canvas rail. */
.cb-history-toolbar {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.cb-history-toolbar button {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  min-height: 38px;
  padding: 6px;
}

.cb-history-readout {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 3px;
  text-transform: uppercase;
}

.cb-history-states {
  background: rgba(237, 242, 238, 0.62);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  max-height: 58vh;
  overflow-y: auto;
  padding: 5px;
}

.cb-history-state {
  align-items: center;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink);
  display: grid;
  gap: 7px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 38px;
  padding: 6px 8px;
  text-align: left;
}

.cb-history-state > span {
  align-items: center;
  background: #e5ece8;
  border-radius: 5px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 24px;
  justify-content: center;
}

.cb-history-state strong {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.cb-history-state small { color: var(--muted); font-size: 10px; }
.cb-history-state.is-current { background: #e9f8f3; border-color: var(--mint); box-shadow: inset 3px 0 0 var(--mint); }
.cb-history-state.is-future { opacity: 0.46; }

/* Pen Manager list inside settings */
.pen-manager-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pen-manager-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
}

.pen-manager-name-input {
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  min-width: 0;
}

.pen-manager-delete-btn {
  background: rgba(255, 109, 95, 0.1);
  color: #ff6d5f;
  border: 1px solid rgba(255, 109, 95, 0.2);
  border-radius: 6px;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
}

.pen-manager-delete-btn:hover {
  background: rgba(255, 109, 95, 0.2);
}

.module-toggle-group {
  display: none !important;
}

.mod-panel {
  display: none !important;
}

.dock-container {
  display: none !important;
}

.module-toggle-btn {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #edf2ee;
  cursor: pointer;
}

.module-toggle-btn.is-active {
  background: var(--ink);
  color: white;
}

/* ==========================================================================
   COLOR-COLAB COLLAPSIBLE WORKSPACE & RESTORE TABS
   ========================================================================== */

/* Restore Tabs (Glassmorphic) */
.restore-tab {
  position: absolute;
  background: var(--studio-panel-bg, rgba(251, 251, 247, 0.92));
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  box-shadow: 0 4px 16px rgba(16, 20, 19, 0.12);
}

.restore-tab:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 6px 20px rgba(16, 20, 19, 0.2);
}

.restore-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-top: none;
  border-radius: 0 0 10px 10px;
  height: 24px;
  width: 48px;
}

.restore-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  height: 24px;
  width: 48px;
}

.restore-left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-left: none;
  border-radius: 0 10px 10px 0;
  width: 24px;
  height: 48px;
}

.restore-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-right: none;
  border-radius: 10px 0 0 10px;
  width: 24px;
  height: 48px;
}

/* Tablets / e-ink: the 24px restore tabs were nearly invisible and hard
   to hit on the BOOX — give them a real touch target and a bolder glyph. */
@media (min-width: 600px) {
  .restore-left,
  .restore-right {
    width: 34px;
    height: 76px;
    font-size: 18px;
    font-weight: 800;
  }
}

body.e-ink-active .restore-tab {
  background: #ffffff;
  border: 2px solid #000000;
  color: #000000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Collapse trigger styles */
.cb-rail-collapse-btn {
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  margin-left: auto;
  opacity: 0.6;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
}

.cb-rail-collapse-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* Collapsed States Layout Overrides */
.studio-frame.top-menu-collapsed {
  --studio-topbar-height: 0px !important;
}
.studio-frame.top-menu-collapsed .top-menu {
  display: none !important;
}

.studio-frame.bottom-toolbar-collapsed {
  --studio-bottombar-height: 0px !important;
}
.studio-frame.bottom-toolbar-collapsed .bottom-toolbar {
  display: none !important;
}

.studio-frame.left-wing-collapsed #cb-rail-colors,
.studio-frame.left-wing-collapsed #cb-detail-colors,
.studio-frame.left-wing-collapsed #cb-detail-colors-2,
.studio-frame.left-wing-collapsed #cb-detail-colors-3,
.studio-frame.left-wing-collapsed #cb-detail-colors-4 {
  display: none !important;
}

.studio-frame.left-wing-collapsed .studio-workspace {
  padding-left: 0px !important;
}
body.cb-rails-swapped .studio-frame.left-wing-collapsed .studio-workspace {
  padding-right: 0px !important;
  padding-left: inherit;
}

.studio-frame.right-wing-collapsed #cb-rail-brush,
.studio-frame.right-wing-collapsed #cb-detail-brush {
  display: none !important;
}

.studio-frame.right-wing-collapsed .studio-workspace {
  padding-right: 0px !important;
}
body.cb-rails-swapped .studio-frame.right-wing-collapsed .studio-workspace {
  padding-left: 0px !important;
  padding-right: inherit;
}

/* Phone viewports: turn rails and details into absolute overlays (sheets/flyouts) */
@media (max-width: 600px) {
  body.cb-has-colors-rail .studio-workspace,
  body.cb-has-brush-rail .studio-workspace,
  body.cb-has-colors-detail .studio-workspace,
  body.cb-has-brush-detail .studio-workspace,
  body.cb-cascade-2 .studio-workspace,
  body.cb-cascade-3 .studio-workspace,
  body.cb-cascade-4 .studio-workspace {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .cb-rail {
    background: var(--studio-panel-bg, rgba(251, 251, 247, 0.95)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 0 15px rgba(16, 20, 19, 0.15) !important;
  }

  .cb-rail-left {
    border-radius: 0 12px 12px 0 !important;
  }
  .cb-rail-right {
    border-radius: 12px 0 0 12px !important;
  }

  /* Thin single-swatch drill columns on phones too (COLORING-BOOK parity):
     no width override — the base 76px design applies. The !important left
     pin below hits every cascade level (they all carry .cb-detail-left),
     so each drill level re-asserts its own offset at equal importance —
     otherwise all levels stack at 54px. */
  .cb-detail-left {
    left: 54px !important;
    background: var(--studio-panel-bg, rgba(251, 251, 247, 0.96)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 4px 0 20px rgba(16, 20, 19, 0.2) !important;
    border-radius: 0 12px 12px 0 !important;
  }
  #cb-detail-colors-2 { left: 134px !important; }
  #cb-detail-colors-3 { left: 214px !important; }
  #cb-detail-colors-4 { left: 294px !important; }

  .cb-detail-right {
    right: 54px !important;
    width: 170px !important;
    background: var(--studio-panel-bg, rgba(251, 251, 247, 0.96)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: -4px 0 20px rgba(16, 20, 19, 0.2) !important;
    border-radius: 12px 0 0 12px !important;
  }
}

/* 48dp Touch Targets for Mobile Devices and BOOX */
@media (max-width: 768px) {
  .icon-button,
  .tool-cluster button,
  .cb-rail-tile,
  .restore-tab,
  .cb-rail-collapse-btn,
  .collapse-btn {
    min-height: 48px !important;
    min-width: 48px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* E-Ink Optimization Mode Overrides */
body.e-ink-active {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Disable transitions and animations to avoid ghosting */
body.e-ink-active * {
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Force high-contrast solid backgrounds and borders */
body.e-ink-active .app-shell,
body.e-ink-active .studio-frame,
body.e-ink-active .top-menu,
body.e-ink-active .bottom-toolbar,
body.e-ink-active .cb-rail,
body.e-ink-active .cb-detail,
body.e-ink-active .settings-dropdown,
body.e-ink-active .restore-tab,
body.e-ink-active .lobby-portal-grid,
body.e-ink-active .portal-intro,
body.e-ink-active .tts-fallback-controls,
body.e-ink-active .panel-section {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* High contrast inputs and text fields */
body.e-ink-active input,
body.e-ink-active select,
body.e-ink-active button {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 4px !important;
}

body.e-ink-active .icon-button,
body.e-ink-active .cb-rail-tile {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-weight: 900 !important;
}

body.e-ink-active .icon-button.is-active,
body.e-ink-active .cb-rail-tile.is-active {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

/* Hide background video loops */
body.e-ink-active .home-bg-video,
body.e-ink-active video {
  display: none !important;
}

/* High contrast text */
body.e-ink-active h1,
body.e-ink-active h2,
body.e-ink-active h3,
body.e-ink-active h4,
body.e-ink-active p,
body.e-ink-active span,
body.e-ink-active strong,
body.e-ink-active label,
body.e-ink-active select option {
  color: #000000 !important;
}

/* Tablet and Large Screens Sizing Optimization */
@media (min-width: 600px) {
  .top-menu,
  .bottom-toolbar {
    min-height: 52px !important;
    padding: 8px 16px !important;
    gap: 12px !important;
  }
  
  .top-menu .icon-button,
  .bottom-toolbar .icon-button,
  .bottom-toolbar .tool-cluster button {
    min-height: 46px !important;
    min-width: 52px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
  }

  .bottom-toolbar .compact-control {
    font-size: 13px !important;
    gap: 6px !important;
  }

  .bottom-toolbar .compact-control span {
    font-size: 12px !important;
  }

  .bottom-toolbar .compact-control select,
  .bottom-toolbar .compact-control input[type="color"],
  .bottom-toolbar .compact-control input[type="range"] {
    min-height: 38px !important;
    font-size: 13px !important;
  }

  .bottom-toolbar .compact-control input[type="color"] {
    width: 52px !important;
  }

  .bottom-toolbar .compact-control input[type="range"] {
    width: 130px !important;
  }

  /* Scale up rail icons and labels */
  .cb-rail {
    width: 72px !important;
  }
  
  .cb-rail-tile {
    min-height: 72px !important;
  }

  .cb-rail-tile svg,
  .cb-rail-tile img,
  .cb-rail-tile span {
    transform: scale(1.15) !important;
  }

  .cb-rail-label {
    font-size: 11px !important;
  }

  /* r11 (D 2026-07-22): NO blanket panel widening on tablets. Every wing
     panel starts at its cohesive base width (left 76px drill columns,
     right 96px tool columns, chat/pens/builder keep their content-specific
     widths) and the ⤢ head button expands any panel to 320px on demand.
     Thin-first — the canvas stays visible. */
  .cb-detail-title {
    font-size: 18px !important;
  }
  .cb-detail-body {
    font-size: 14px !important;
  }
  
  /* Scale font sizes of guided lesson instructions */
  .lesson-step-instruction,
  .tts-transcript {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* Unified Shell & Contextual Navigation States */

/* Screen layout sizing: app-shell is flex column, screen-stack is flex 1 */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  background: var(--paper);
}

.screen-stack {
  flex: 1;
  min-height: 0;
  position: relative;
  width: 100%;
  height: auto !important; /* overrides DVH height to let flexbox rule */
}

/* Hide studio workspace when in lobby state */
body.state-lobby .studio-workspace,
body.state-lobby .dock-container {
  display: none !important;
}

/* Hide home view when in studio state */
body.state-studio .home-view {
  display: none !important;
}

/* Contextual top menu elements visibility */
body.state-lobby .top-menu .room-stack,
body.state-lobby .top-menu .network-pill,
body.state-lobby .top-menu .select-wrap,
body.state-lobby .top-menu .mode-button,
body.state-lobby .top-menu #music-toggle,
body.state-lobby .top-menu #chat-toggle,
body.state-lobby .top-menu #fullscreen-toggle,
body.state-lobby .top-menu #hide-ui {
  display: none !important;
}

/* Contextual bottom toolbar elements visibility */
body.state-lobby .bottom-toolbar .studio-only {
  display: none !important;
}

body.state-studio .bottom-toolbar .home-only {
  display: none !important;
}

/* Refined Top Navigation Links styles */
.top-menu {
  overflow-x: auto;
  scrollbar-width: none; /* hide scrollbar for Firefox */
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.top-menu::-webkit-scrollbar {
  display: none; /* hide scrollbar for Chrome/Safari */
}

.top-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px;
  border-radius: 10px;
  margin-left: 12px;
}

body.e-ink-active .top-nav-links {
  background: none;
  border: 2px solid #000;
}

.top-nav-links .icon-button,
.top-nav-links button {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  transition: all 0.2s ease !important;
}

.top-nav-links button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--ink) !important;
}

.top-nav-links button.is-active {
  background: var(--mint, #1e9c89) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.top-nav-links button.is-active img {
  filter: brightness(0) invert(1) !important;
}

body.e-ink-active .top-nav-links button.is-active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

/* Bottom Lobby Shortcuts row */
.bottom-nav-shortcuts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
}

/* Unified Square, Cohesive, and Framed Toolbar Icons */
.top-menu .icon-button,
.bottom-toolbar .icon-button,
.bottom-toolbar button.cb-toolbar-icon {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 48px !important;
  min-height: 48px !important;
  width: 48px !important;
  height: 48px !important;
  padding: 4px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--panel) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.top-menu .icon-button:hover,
.bottom-toolbar .icon-button:hover,
.bottom-toolbar button.cb-toolbar-icon:hover {
  background: #f0f4f1 !important;
  border-color: var(--muted) !important;
  color: var(--ink) !important;
}

/* Active states highlight: mint green background, white icon and label text */
.top-menu .icon-button.is-active,
.bottom-toolbar .icon-button.is-active,
.bottom-toolbar button.cb-toolbar-icon.is-active {
  background: var(--mint, #1e9c89) !important;
  border-color: var(--mint, #1e9c89) !important;
  color: #ffffff !important;
}

.top-menu .icon-button.is-active img,
.bottom-toolbar .icon-button.is-active img,
.bottom-toolbar button.cb-toolbar-icon.is-active img {
  filter: brightness(0) invert(1) !important;
}

/* Ensure clean padding & line heights for square button text */
.cb-toolbar-icon .cb-toolbar-label {
  font-size: 8px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Tablet / Large Screens Sizing Override for perfectly square buttons */
@media (min-width: 600px) {
  .top-menu .icon-button,
  .bottom-toolbar .icon-button,
  .bottom-toolbar button.cb-toolbar-icon {
    min-width: 54px !important;
    min-height: 54px !important;
    width: 54px !important;
    height: 54px !important;
    padding: 5px !important;
  }
  .cb-toolbar-icon .cb-toolbar-label {
    font-size: 9px !important;
  }
}

/* E-Ink High Contrast Mode square button overrides */
body.e-ink-active .top-menu .icon-button,
body.e-ink-active .bottom-toolbar .icon-button,
body.e-ink-active .bottom-toolbar button.cb-toolbar-icon {
  border: 2px solid #000000 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.e-ink-active .top-menu .icon-button.is-active,
body.e-ink-active .bottom-toolbar .icon-button.is-active,
body.e-ink-active .bottom-toolbar button.cb-toolbar-icon.is-active {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* The unified square-button block above re-asserts `display: inline-flex
   !important`, which would beat the plain `hidden` attribute (same
   specificity as `.cb-toolbar-icon[hidden]`, later in the file). These
   higher-specificity selectors keep `hidden` authoritative — without them
   Journey's Finish & Next leaks into the top menu during lessons. */
.top-menu .icon-button[hidden],
.bottom-toolbar .icon-button[hidden],
.bottom-toolbar button.cb-toolbar-icon[hidden] {
  display: none !important;
}

/* View-aware bottom-bar readout: never let a long lesson or board title
   push the Undo/Zoom cluster off the bar. Phones drop it entirely rather
   than letting flex squeeze it into an invisible 0-width sliver. */
#active-status-readout {
  flex: 0 1 auto;
  max-width: 34vw;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 479px) {
  #active-status-readout {
    display: none;
  }
}

@media (min-width: 600px) {
  #active-status-readout {
    min-width: 130px;
  }
}

/* Premium touches: board cards lift on hover, and keyboard focus gets a
   visible mint ring on the unified square tiles. */
.board-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.board-card:hover {
  box-shadow: 0 12px 30px rgba(16, 20, 19, 0.14);
  transform: translateY(-2px);
}

.top-menu .icon-button:focus-visible,
.bottom-toolbar .icon-button:focus-visible,
.bottom-toolbar button.cb-toolbar-icon:focus-visible,
.board-card:focus-visible,
.cb-rail-tile:focus-visible,
.cb-tool-tile:focus-visible {
  outline: 2px solid var(--mint, #1e9c89) !important;
  outline-offset: 2px !important;
}

body.e-ink-active .board-card,
body.e-ink-active .board-card:hover {
  box-shadow: none;
  transform: none;
}

/* Interactive trace dots: once every guide dot in the step is traced,
   the Next Step button pulses. E-Ink gets a static heavy ring instead
   (its global rules already disable animation). */
@keyframes lesson-next-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 156, 137, 0.55); }
  55% { box-shadow: 0 0 0 9px rgba(30, 156, 137, 0); }
}

.lesson-next-ready {
  animation: lesson-next-pulse 1.6s ease-out infinite;
  /* Deliberate literal mint: per-board themes retint --mint (blank canvas
     makes it #333), but "step traced" is a success state and must read
     the same on every board. */
  background: #1e9c89 !important;
  border-color: #1e9c89 !important;
  color: #ffffff !important;
}

body.e-ink-active .lesson-next-ready {
  animation: none;
  background: #000000 !important;
  border: 3px solid #000000 !important;
  color: #ffffff !important;
}

/* Lesson progress summary strip: streak chip, completion count, and the
   Continue button above the lesson grid. */
.lesson-progress-summary {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
}

.lesson-streak-chip,
.lesson-complete-chip {
  background: rgba(30, 156, 137, 0.10);
  border: 1px solid rgba(30, 156, 137, 0.35);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
}

.lesson-continue-btn {
  background: var(--mint, #1e9c89);
  border: 1px solid var(--mint, #1e9c89);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  margin-left: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 8px 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.lesson-continue-btn:hover {
  filter: brightness(1.08);
}

body.e-ink-active .lesson-progress-summary,
body.e-ink-active .lesson-streak-chip,
body.e-ink-active .lesson-complete-chip {
  background: #ffffff;
  border: 2px solid #000000;
  color: #000000;
}

body.e-ink-active .lesson-continue-btn {
  background: #000000;
  border: 2px solid #000000;
  color: #ffffff;
}

/* Conic progress ring around each lesson card's number — driven by the
   card's --lesson-progress custom property (0-100). */
.home-lesson-number {
  position: relative;
}

.home-lesson-number::after {
  background: conic-gradient(var(--mint, #1e9c89) calc(var(--lesson-progress, 0) * 1%), var(--line) 0);
  border-radius: 999px;
  content: "";
  inset: -6px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  pointer-events: none;
  position: absolute;
}

body.e-ink-active .home-lesson-number::after {
  background: conic-gradient(#000000 calc(var(--lesson-progress, 0) * 1%), rgba(0, 0, 0, 0.18) 0);
}

/* ==========================================================================
   STUDIO BOTTOM ROW v2 — readout | (center: Undo Clear + zoom pill) | chrome
   ========================================================================== */
.bottom-studio-tools {
  align-items: center;
  display: flex;
  flex: 1 0 auto;   /* fills the bar; grows past it when tight so the bar scrolls */
  gap: 8px;
  min-width: 0;
}

@media (min-width: 600px) {
  .bottom-studio-tools { gap: 12px; }  /* matches the tablet design-system gap */
}

/* Readout: left-anchored, pushes everything else right/center (was inline) */
#active-status-readout {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  margin-left: 2px;
  margin-right: auto;
}

@media (min-width: 600px) {
  #active-status-readout { font-size: 13px; }  /* e-ink readability at 992px */
}

/* Chrome pair pinned to the right edge */
#collapse-bottom-btn { margin-left: auto; }

/* Zoom cluster: ONE bordered pill in the 54px tile language, four flat
   segments inside (− | 100% | + | Fit) with hairline separators. */
.bottom-toolbar .zoom-cluster {
  align-items: stretch;
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: inline-flex;
  flex: 0 0 auto;
  height: 48px;
  overflow: hidden;
}

@media (min-width: 600px) {
  .bottom-toolbar .zoom-cluster { height: 54px; }  /* matches square tiles */
}

/* Flatten the unified square-tile treatment for buttons inside the pill
   (must out-specific the !important block earlier in the file). */
.bottom-toolbar .zoom-cluster .icon-button {
  aspect-ratio: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 46px !important;
  padding: 0 10px !important;
  width: auto !important;
}

.bottom-toolbar .zoom-cluster > * + * {
  border-left: 1px solid var(--line) !important;
}

/* Legible zoom glyphs (they previously inherited the tiny tile font) */
#zoom-out,
#zoom-in { font-size: 18px !important; font-weight: 700 !important; }

/* The % label becomes a proper segment instead of a floating span */
.bottom-toolbar .zoom-cluster #bottom-zoom-label {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-width: 48px;
  padding: 0 6px;
}

/* Pressed/active segment feedback */
.bottom-toolbar .zoom-cluster .icon-button:active,
.bottom-toolbar .zoom-cluster .icon-button.is-active {
  background: var(--mint, #1e9c89) !important;
  color: #fff !important;
}

/* --- E-ink variants: 2px black frame, black separators, inverted press --- */
body.e-ink-active .bottom-toolbar .zoom-cluster {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

body.e-ink-active .bottom-toolbar .zoom-cluster > * + * {
  border-left: 2px solid #000000 !important;
}

body.e-ink-active .bottom-toolbar .zoom-cluster .icon-button {
  border: 0 !important;
  border-radius: 0 !important;
}

body.e-ink-active .bottom-toolbar .zoom-cluster .icon-button:active,
body.e-ink-active .bottom-toolbar .zoom-cluster .icon-button.is-active {
  background: #000000 !important;
  color: #ffffff !important;
}





/* ==========================================================================
   r11 — COHESIVE WINGS + SQUARE BOTTOM ROW + CLEAN TOP MENU (D 2026-07-22)
   ========================================================================== */

/* --- Expandable detail panels: thin by default, ⤢ toggles roomy view. --- */
.cb-detail-expand-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
}

.cb-detail-expand-btn:hover {
  color: var(--ink);
}

.cb-detail.is-expanded {
  width: min(320px, calc(100vw - 140px)) !important;
  z-index: 46;
}

.cb-detail.is-expanded .cb-detail-body {
  grid-template-columns: repeat(auto-fill, 48px);
  justify-content: center;
}

/* Expanded color drills keep flowing their tiles into the wider grid. */
.cb-detail-left.is-expanded .cb-detail-body .drill-picker,
.cb-detail-left.is-expanded .cb-detail-body .drill-row-ends,
.cb-detail-left.is-expanded .cb-detail-body .drill-strip {
  display: contents;
}

/* Wide content rows span the full expanded panel. */
.cb-detail.is-expanded .cb-detail-body .easel-slider-row,
.cb-detail.is-expanded .cb-detail-body .cb-detail-slider,
.cb-detail.is-expanded .cb-detail-body .cb-tools-grid,
.cb-detail.is-expanded .cb-detail-body .easel-preset-form,
.cb-detail.is-expanded .cb-detail-body .easel-preset-row,
.cb-detail.is-expanded .cb-detail-body .cb-detail-hint,
.cb-detail.is-expanded .cb-detail-body .cb-detail-list-tile {
  grid-column: 1 / -1;
}

body.e-ink-active .cb-detail.is-expanded {
  border: 2px solid #000000 !important;
}

/* --- Bottom row: every control an identical centered square tile. ------- */
.bottom-studio-tools {
  justify-content: center;
  position: relative;
}

/* The zoom pill dissolves — its children become individual square tiles. */
.bottom-toolbar .zoom-cluster {
  display: contents;
}

.bottom-toolbar .zoom-cluster .icon-button {
  aspect-ratio: 1 / 1 !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  height: 48px !important;
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 4px !important;
  width: 48px !important;
}

.bottom-toolbar .zoom-cluster #bottom-zoom-label {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  height: 48px;
  justify-content: center;
  min-width: 48px;
  width: 48px;
}

@media (min-width: 600px) {
  .bottom-toolbar .zoom-cluster .icon-button,
  .bottom-toolbar .zoom-cluster #bottom-zoom-label {
    height: 54px !important;
    min-width: 54px !important;
    width: 54px !important;
  }
}

body.e-ink-active .bottom-toolbar .zoom-cluster .icon-button,
body.e-ink-active .bottom-toolbar .zoom-cluster #bottom-zoom-label {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

/* Readout floats at the left edge; the tile group centers independently. */
#active-status-readout {
  left: 10px;
  margin: 0;
  max-width: 22vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#collapse-bottom-btn {
  margin-left: 0;
}

/* --- Top menu: fewer center labels, centered cluster, cohesive. --------- */
/* "Board" caption is redundant — the select shows the board name. */
.top-menu .select-wrap > span {
  display: none;
}

/* Solo modes: the big site title repeats what the SOLO tab already says.
   Shared rooms keep the label (the room name matters there). */
body[data-site-type="solo"] .top-menu .room-label,
body[data-site-type="blank"] .top-menu .room-label,
body[data-site-type="vector"] .top-menu .room-label {
  display: none;
}

/* Nav pill hugs left, settings/collapse hug right (inline margin-left:auto
   on the gear), so the room/board cluster centers between them. */
.top-nav-links {
  margin-right: auto;
}

.top-menu .room-stack {
  min-width: 0;
  text-align: center;
}

.top-menu .status-line {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   r12 — FLOATING EASEL (D 2026-07-22): CONNER-style draggable palette.
   Compact by default (color drill + core tools + size/opacity), ⤢ expands
   to pens / palettes / pressure / custom colors. Position persists.
   ========================================================================== */
#quick-picker {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(16, 20, 19, 0.22);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
  width: 248px;
}

#quick-picker .quick-head {
  cursor: grab;
  position: sticky;
  top: 0;
  z-index: 2;
}

#quick-picker.is-dragging .quick-head {
  cursor: grabbing;
}

/* Compact mode: the deep-dive groups stay tucked away. */
#quick-picker:not(.is-expanded) .easel-details,
#quick-picker:not(.is-expanded) .easel-actions-compact,
#quick-picker:not(.is-expanded) .easel-id-mini {
  display: none;
}

#quick-picker.is-expanded {
  width: min(320px, calc(100vw - 24px));
}

/* Core tool strip: six always-visible square tools. */
.easel-core-tools {
  display: grid !important;
  gap: 4px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 4px 8px;
}

.easel-core-tools .quick-tool {
  aspect-ratio: 1 / 1;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 3px;
}

.easel-core-tools .quick-tool.is-active {
  background: var(--mint, #1e9c89);
  border-color: var(--mint, #1e9c89);
}

.easel-core-tools .quick-tool.is-active img,
.easel-core-tools .quick-tool.is-active .tool-glyph {
  filter: brightness(0) invert(1);
}

/* Head buttons stay small and quiet. */
#quick-picker .quick-head button {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 6px;
}

#quick-picker .quick-head button:hover,
#quick-picker .quick-head button.is-active {
  border-color: var(--line);
  color: var(--ink);
}

/* --- E-ink: flat white, heavy frame, no shadow. --- */
body.e-ink-active #quick-picker {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

body.e-ink-active .easel-core-tools .quick-tool {
  background: #ffffff;
  border: 2px solid #000000;
}

body.e-ink-active .easel-core-tools .quick-tool.is-active {
  background: #000000;
  border-color: #000000;
}

/* Core strip is icon-only — labels truncate at six-across and the icons
   are self-explanatory (titles carry the names for hover/long-press). */
.easel-core-tools .quick-tool > span:not(.tool-glyph) {
  display: none;
}

/* ==========================================================================
   r14 — CONSISTENCY PASS (D 2026-07-23): single-column tools drill, quieter
   top menu, corner wing toggles, lighter board frames, tighter Easel.
   ========================================================================== */

/* Tools drill matches the hue picker: ONE thin column, icon + small label
   rows, scroll for more. (Overrides the 3-col grid inside the right wing.) */
.cb-detail-right .cb-tools-grid {
  grid-template-columns: 1fr !important;
}

.cb-detail-right .cb-tool-tile {
  aspect-ratio: auto !important;
  flex-direction: row !important;
  gap: 6px;
  justify-content: flex-start !important;
  min-height: 40px;
  padding: 4px 6px !important;
  width: 100% !important;
}

.cb-detail-right .cb-tool-tile .cb-tool-label {
  font-size: 9px;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Top menu: the transient status text reads as clutter — visually hidden
   but kept in the DOM for aria-live announcements. */
.top-menu .status-line {
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap;
  width: 1px !important;
}

/* Board name: compact with the full title in the tooltip. */
.top-menu .select-wrap select {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The bottom-left readout is gone — the tiles carry the context now. */
#active-status-readout {
  display: none !important;
}

/* Corner wing toggles pin to the row's edges; the tile group stays centered. */
.bottom-toolbar {
  position: relative;
}

.wing-corner-toggle.is-left {
  left: 8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.wing-corner-toggle.is-right {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.wing-corner-toggle.is-active {
  border-color: var(--mint, #1e9c89) !important;
}

body.e-ink-active .wing-corner-toggle.is-active {
  border-color: #000000 !important;
  border-width: 3px !important;
}

/* Board cards: lighter frame — slim caption on panel background instead of
   the heavy dark band, smaller type, tighter radius. */
.board-card {
  border-radius: 8px;
}

.board-card figcaption,
.board-card .board-caption {
  background: var(--panel);
  border-top: 1px solid var(--line);
  gap: 1px;
  min-height: 34px;
  padding: 5px 8px;
}

.board-card .board-caption strong {
  color: var(--ink);
  font-size: 11px;
}

.board-card .board-caption small {
  color: var(--muted);
  font-size: 9.5px;
}

/* Easel: condense paddings so the full mode reads as one cohesive card. */
#quick-picker .quick-head {
  gap: 4px;
  padding: 6px 8px;
}

#quick-picker .quick-section,
#quick-picker .quick-controls {
  padding: 4px 8px;
}

#quick-picker .easel-slider-row {
  gap: 4px;
}

#quick-picker .easel-details summary {
  font-size: 10px;
  padding: 5px 8px;
}

/* ==========================================================================
   r15 — edge polish (D 2026-07-23 follow-up)
   ========================================================================== */

/* Restore arrows exist ONLY while their wing is collapsed — they were
   rendering on top of open panels and reading as "cut off" edges. */
.studio-frame:not(.left-wing-collapsed) .restore-left {
  display: none !important;
}

.studio-frame:not(.right-wing-collapsed) .restore-right {
  display: none !important;
}

/* Tool rows: slightly smaller, tighter label so more of each name fits in
   the thin column (full name stays in the tooltip). */
.cb-detail-right .cb-tool-tile .cb-tool-label {
  font-size: 8.5px;
  letter-spacing: 0;
}

/* Easel head stays one row — no wrapped close button. */
#quick-picker .quick-head {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

#quick-picker .quick-head .easel-id-name {
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   r16 — EASEL FIT + BIG SLIDERS + RAIL FIT + SIZE RING (D 2026-07-23 batch)
   ========================================================================== */

/* Easel: a little wider so nothing crowds; bigger grab area. */
#quick-picker {
  width: 276px;
}

#quick-picker .quick-head {
  align-items: center;
  cursor: grab;
  display: flex;
  gap: 5px;
  min-height: 38px;
  padding: 6px 8px;
}

.easel-grip {
  color: var(--muted);
  cursor: grab;
  flex: 1 1 auto;
  font-size: 13px;
  letter-spacing: 2px;
  min-width: 24px;
}

/* Head buttons: small square framed tiles — cohesive with the shell. */
.easel-head-tile {
  align-items: center !important;
  aspect-ratio: 1 / 1;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 7px !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  flex: 0 0 auto;
  font-size: 11px !important;
  font-weight: 800;
  height: 28px;
  justify-content: center !important;
  padding: 0 !important;
  width: 28px;
}

.easel-head-tile:hover,
.easel-head-tile.is-active {
  border-color: var(--mint, #1e9c89) !important;
}

body.e-ink-active .easel-head-tile {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
}

/* Stacked sliders: preset chips on top, BIG label-free slider under them. */
.easel-slider-stacked {
  display: grid !important;
  gap: 5px;
}

.easel-slider-stacked .easel-preset-row {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.easel-slider-stacked .easel-preset-chip {
  flex: 1 1 auto;
  font-size: 10px;
  min-height: 26px;
}

.easel-value-chip {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 10px;
  min-width: 34px;
  text-align: right;
}

.easel-slider-stacked input[type="range"] {
  accent-color: var(--mint, #1e9c89);
  height: 26px;
  width: 100%;
}

/* Tools list: one column everywhere — even in an expanded panel. */
.cb-detail-right .cb-detail-body .cb-tools-grid,
.cb-detail-right.is-expanded .cb-detail-body .cb-tools-grid {
  grid-template-columns: 1fr !important;
}

.cb-detail-right.is-expanded .cb-detail-body {
  grid-template-columns: 1fr;
}

/* Rails fit without scrolling on shorter screens: compress tiles. */
@media (max-height: 1020px) {
  .cb-rail-tile {
    min-height: 0;
    padding: 4px 2px;
  }
  .cb-rail {
    gap: 3px;
  }
  .cb-rail-tile .cb-rail-glyph img,
  .cb-rail-tile .cb-rail-img {
    height: 26px;
    width: 26px;
  }
  .cb-rail-tile {
    font-size: 8.5px;
  }
}

@media (max-height: 850px) {
  .cb-rail-tile .cb-rail-glyph img,
  .cb-rail-tile .cb-rail-img {
    height: 21px;
    width: 21px;
  }
  .cb-rail-divider {
    font-size: 7.5px;
    padding: 1px 0;
  }
}

/* The Site tile on the start page does nothing useful in-app. */
.top-menu .nav-link[href="/"] {
  display: none !important;
}

/* Brush-size ring for the three-finger resize gesture. */
#brush-size-indicator {
  align-items: center;
  display: none;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  left: 50%;
  pointer-events: none;
  position: fixed;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

#brush-size-indicator.is-visible {
  display: flex;
}

#brush-size-indicator .brush-size-ring {
  background: rgba(255, 255, 255, 0.25);
  border: 3px solid;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  display: block;
}

#brush-size-indicator .brush-size-value {
  background: rgba(16, 20, 19, 0.85);
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 12px;
}

/* Rail compression must out-rank the tablet block's 72px !important tiles. */
@media (max-height: 1020px) {
  .cb-rail .cb-rail-tile {
    font-size: 8.5px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 3px 2px !important;
  }
  .cb-rail .cb-rail-tile .cb-rail-img {
    height: 24px !important;
    width: 24px !important;
  }
}

/* r16 fixups: stacked sliders must not inherit the legacy 3-column
   slider-row template; pin tile stays a square glyph. */
.easel-slider-stacked {
  grid-template-columns: 1fr !important;
}

.easel-slider-stacked .easel-preset-row {
  flex-wrap: wrap;
}

/* ==========================================================================
   r17 — corner toggles are THE wing show/hide (D 2026-07-23): the floating
   edge restore arrows and the in-rail collapse chevrons are retired so
   nothing can ever sit on top of an open panel. The bottom-row corner
   tiles (Colors / Brush) are the single, always-visible mechanism.
   ========================================================================== */
.restore-left,
.restore-right,
.cb-rail-collapse-btn {
  display: none !important;
}

/* r19 iOS polish: keep Pencil/touch drawing instant while respecting motion
   sensitivity and reducing accidental hover-only effects on tablets. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (hover: none) {
  .board-card:hover,
  .home-panel .journey-card:hover,
  .home-panel .home-lesson-card:hover {
    box-shadow: 0 8px 24px rgba(16, 20, 19, 0.1);
    transform: none;
  }
}

#settings-low-latency-pencil {
  accent-color: var(--mint, #1e9c89);
}

/* ============ r18: portrait orientation support ============ */

/* LIVE badge resurrection guard: .stream-indicator sets display:inline-block,
   which outranks the UA [hidden] rule, so the badge blinked over the mode
   pill even when no stream was running. */
.stream-indicator[hidden] {
  display: none !important;
}

/* Portrait tablets (Tab S7+ is 824dp wide upright): the top tile row runs
   ~31px past the viewport, clipping the COLLAPSE tile. Tiles stay full size;
   only the flex gaps and outer padding compress. */
@media (orientation: portrait) and (max-width: 900px) {
  .top-menu {
    gap: 6px !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }
  .top-nav-links {
    margin-left: 4px !important;
    gap: 4px !important;
  }
}

/* r28 mobile/coarse-pointer polish: short-screen rail compression is useful,
   but it must not shrink the primary controls below a reliable touch target.
   The Wing color grid drops to four columns so every swatch remains square. */
@media (max-width: 768px), (pointer: coarse) {
  .lesson-actions button,
  .library-actions button,
  .export-actions button,
  .music-actions button,
  .timelapse-actions button,
  .mobile-lesson-step-listen,
  .mobile-lesson-step-next,
  .quick-head button,
  .quick-actions button,
  .cb-toolbar-icon,
  .wing-head button,
  .wing-id-card button,
  .wing-easel-button,
  .wing-preset-btn,
  .wing-module-grid button,
  .wing-tool-grid button,
  .wing-controls select {
    min-height: 44px !important;
  }

  #board-select,
  #tts-voice-select,
  #tts-volume,
  #tts-rate {
    min-height: 44px !important;
  }

  .cb-rail .cb-rail-tile {
    min-height: 44px !important;
  }

  .cb-detail-right .cb-tool-tile,
  .cb-detail-right .quick-tool {
    min-height: 44px !important;
  }

  .wing-color-grid {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }

  .wing-swatch {
    height: 44px;
    min-width: 44px;
  }

  .wing-id-card button {
    min-width: 44px;
  }

  /* The narrow color drill cannot fit two unambiguous 44px controls, so its
     redundant expand control gives way to one full-size close target. The
     brush drill keeps both actions and omits its repeated header label. */
  .cb-detail-left .cb-detail-head .cb-detail-expand-btn {
    display: none;
  }

  .cb-detail-left .cb-detail-head button,
  .cb-detail-right .cb-detail-head button {
    flex: 0 0 44px;
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .cb-detail-right .cb-detail-head {
    gap: 4px;
    padding-left: 1px;
    padding-right: 1px;
  }

  .cb-detail-right .cb-detail-title {
    display: none;
  }

  .wing-controls input[type="range"] {
    min-height: 44px;
  }
}

/* ==========================================================================
   r50 — one navigation row, lighter lobby/player, image-backed hubs
   ========================================================================== */

.top-menu .nav-link[href="/"] {
  display: inline-flex !important;
}

.top-menu {
  align-items: center !important;
  background: rgba(251, 251, 247, 0.97) !important;
  border-bottom: 1px solid rgba(16, 20, 19, 0.14) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  justify-content: flex-start !important;
  min-width: 0;
  overflow-x: auto !important;
  padding: max(8px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) 4px max(5px, env(safe-area-inset-left)) !important;
}

body.platform-ios .top-menu {
  padding-top: max(34px, env(safe-area-inset-top)) !important;
}

.top-nav-links {
  display: contents !important;
}

.top-menu > *,
.top-nav-links > * {
  flex: 0 0 50px !important;
  margin: 0 !important;
}

.top-menu .icon-button,
.top-menu .nav-link {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(16, 20, 19, 0.15) !important;
  color: var(--ink) !important;
  text-decoration: none;
}

.top-menu .icon-button:hover,
.top-menu .nav-link:hover,
.top-menu .icon-button.is-active {
  background: #fff !important;
  border-color: color-mix(in srgb, var(--mint) 68%, var(--line)) !important;
  box-shadow: 0 0 0 2px rgba(30, 156, 137, 0.2) !important;
}

.top-menu .icon-button.is-active img,
.top-menu .nav-link.is-active img {
  filter: none !important;
}

.global-restore-top {
  left: 50% !important;
  position: fixed !important;
  top: env(safe-area-inset-top) !important;
  transform: translateX(-50%) !important;
  z-index: 10020 !important;
}

.home-frame {
  grid-template-rows: minmax(0, 1fr) !important;
}

.home-top-menu,
.home-room-dock,
.portal-intro-actions,
.bottom-nav-shortcuts {
  display: none !important;
}

.home-workspace {
  padding-bottom: 76px !important;
}

.portal-intro {
  background:
    linear-gradient(108deg, rgba(255, 252, 242, 0.96), rgba(229, 245, 239, 0.88)),
    url("media/start/cards/hero-start.jpg") center / cover no-repeat !important;
  border-color: rgba(30, 156, 137, 0.3) !important;
  box-shadow: 0 12px 30px rgba(16, 20, 19, 0.14) !important;
  color: var(--ink) !important;
  grid-column: 1 / -1;
  min-height: 118px !important;
  position: relative;
  transition: min-height 0.2s ease, padding 0.2s ease;
}

.portal-intro h1,
.portal-intro p {
  color: var(--ink) !important;
}

.portal-intro .eyebrow {
  color: #8b6410 !important;
}

.portal-feature-strip span {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(16, 20, 19, 0.14) !important;
  color: #38514b !important;
}

.portal-intro-toggle {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(16, 20, 19, 0.18);
  border-radius: 999px;
  color: var(--ink);
  display: flex;
  font-size: 20px;
  height: 40px;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  z-index: 3;
}

.portal-intro.is-collapsed {
  min-height: 54px !important;
  padding: 8px 58px 8px 14px !important;
}

.portal-intro.is-collapsed .portal-intro-copy > :not(.eyebrow) {
  display: none;
}

.portal-intro.is-collapsed .portal-intro-copy .eyebrow {
  margin: 10px 0 0;
}

.shared-room-join {
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(16, 20, 19, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 7px;
  grid-template-columns: 50px minmax(0, 340px) 76px;
  margin: 10px 0 14px;
  padding: 7px;
  width: min(100%, 490px);
}

.home-rooms-panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.shared-room-join input,
.shared-room-join > button {
  height: 48px;
  min-height: 48px;
}

.shared-room-join > button {
  background: #f3bd31;
  color: #101413;
}

.room-grid {
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)) !important;
  gap: 12px !important;
}

.room-card {
  aspect-ratio: 1 / 1;
  background: #dfe7e3 !important;
  border-radius: 12px !important;
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: relative;
}

.room-card-media {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform 0.22s ease;
  width: 100%;
}

.room-card:hover .room-card-media,
.room-card:focus-visible .room-card-media {
  transform: scale(1.035);
}

.room-card-main {
  background: linear-gradient(180deg, transparent, rgba(10, 15, 14, 0.94));
  bottom: 0;
  color: #fff;
  display: grid !important;
  gap: 2px;
  left: 0;
  padding: 34px 10px 10px;
  position: absolute;
  right: 0;
  z-index: 2;
}

.room-card-main strong {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.room-card .room-id {
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 10px !important;
}

.room-card .room-accent {
  height: 5px;
  left: 8px;
  position: absolute;
  top: 9px;
  width: 46px;
  z-index: 3;
}

.room-live-pill {
  background: rgba(10, 15, 14, 0.76) !important;
  color: #fff !important;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
}

.room-people {
  bottom: 48px;
  left: 9px;
  position: absolute;
  right: 9px;
  z-index: 3;
}

.room-people em {
  background: rgba(10, 15, 14, 0.72);
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  padding: 3px 6px;
}

.journey-preview-grid {
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)) !important;
  gap: 12px !important;
}

.home-panel .journey-card {
  aspect-ratio: 1 / 1;
  border-radius: 12px !important;
  display: block !important;
  position: relative;
}

.journey-card-image-wrap {
  aspect-ratio: 1 / 1 !important;
  border: 0 !important;
  height: 100%;
}

.journey-card-img {
  background: #fff !important;
  object-fit: contain !important;
}

.journey-card-info {
  background: linear-gradient(180deg, rgba(10, 15, 14, 0.02), rgba(10, 15, 14, 0.93));
  bottom: 0;
  color: #fff;
  display: grid !important;
  gap: 1px !important;
  left: 0;
  padding: 30px 9px 8px !important;
  position: absolute;
  right: 0;
  z-index: 3;
}

.journey-card-step,
.journey-card-title,
.journey-card-difficulty,
.journey-card-progress-text {
  color: #fff !important;
}

.journey-card-title {
  font-size: 12px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-card-difficulty,
.journey-card-progress-text {
  font-size: 9px !important;
}

.journey-card-meter {
  background: rgba(255, 255, 255, 0.24) !important;
}

.cc-soundtrack {
  background: rgba(248, 250, 247, 0.98) !important;
  border-color: rgba(16, 20, 19, 0.16) !important;
  box-shadow: 0 -4px 18px rgba(16, 20, 19, 0.09);
  color: var(--ink) !important;
}

.cc-soundtrack-deck {
  background: rgba(232, 241, 236, 0.96) !important;
  border-color: rgba(16, 20, 19, 0.14) !important;
  color: var(--ink) !important;
}

.cc-soundtrack-button {
  background: #fff !important;
  border-color: rgba(16, 20, 19, 0.18) !important;
  color: var(--ink) !important;
}

.cc-soundtrack-title {
  color: #2d3a36 !important;
}

.bottom-toolbar {
  background: rgba(251, 251, 247, 0.98) !important;
  border-color: rgba(16, 20, 19, 0.15) !important;
}

.bottom-toolbar > [hidden],
.top-menu > [hidden] {
  display: none !important;
}

.bottom-back {
  flex: 0 0 50px !important;
}

body.state-lobby .bottom-toolbar {
  justify-content: space-between;
}

.bottom-room-stack {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  gap: 5px;
  min-height: 46px;
  padding: 5px 8px;
}

.bottom-room-stack .status-line {
  max-width: 120px;
}

.bottom-board-select {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 9px;
  min-height: 46px;
  padding: 3px 6px;
}

.bottom-board-select select {
  max-width: 170px;
}

.home-chat-form,
.chat-form,
.cb-chat-form {
  align-items: stretch;
  display: grid !important;
  gap: 5px !important;
  grid-template-columns: minmax(0, 1fr) 48px 48px 58px;
}

.speech-control {
  background: #edf6f2 !important;
  border: 1px solid rgba(30, 156, 137, 0.3) !important;
  color: #145e55 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 4px !important;
}

.speech-hold {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.cb-detail-list-tool-img {
  border-radius: 6px;
  display: block;
  height: 26px;
  margin: 0 auto;
  object-fit: cover;
  width: 26px;
}

.speech-control.is-recording,
.comm-btn.is-recording {
  background: #ffe5e0 !important;
  border-color: #ef6b57 !important;
  color: #8a2d20 !important;
  box-shadow: 0 0 0 3px rgba(239, 107, 87, 0.18);
}

.speech-status {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  margin: 4px 0 0;
  min-height: 1.25em;
}

.node-context-menu {
  background: rgba(251, 251, 247, 0.98) !important;
  border: 1px solid rgba(16, 20, 19, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(16, 20, 19, 0.2) !important;
  color: var(--ink) !important;
  display: grid;
  gap: 6px;
  max-width: min(290px, calc(100vw - 16px));
  padding: 10px !important;
}

.node-context-title {
  font-size: 13px;
}

.node-context-description {
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: 3px;
}

.node-context-menu .cb-context-menu-item {
  min-height: 42px;
  text-align: left;
}

.portal-card.is-holding,
.journey-card.is-holding,
.room-card.is-holding,
.board-card.is-holding {
  box-shadow: 0 0 0 3px rgba(30, 156, 137, 0.32) !important;
}

@media (max-width: 600px) {
  .top-menu > *,
  .top-nav-links > * {
    flex-basis: 46px !important;
  }

  .portal-intro {
    padding: 14px 54px 14px 14px !important;
  }

  .shared-room-join {
    grid-template-columns: 44px minmax(0, 1fr) 64px;
    width: 100%;
  }

  .shared-room-join input,
  .shared-room-join > button {
    height: 44px;
    min-height: 44px;
  }

  .room-grid,
  .journey-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .journey-heading-actions {
    justify-content: flex-start !important;
  }

  .home-chat-form,
  .chat-form,
  .cb-chat-form {
    grid-template-columns: minmax(0, 1fr) 44px 44px 52px;
  }

  .bottom-room-stack,
  .bottom-board-select {
    min-height: 44px;
  }
}

@media (max-width: 340px) {
  .room-grid,
  .journey-preview-grid {
    grid-template-columns: 1fr !important;
  }
}

/* The rail chat is rendered dynamically, so its four controls need the same
   final-cascade geometry and touch law as the static room composers. */
.cb-chat-form {
  align-items: stretch;
  display: grid !important;
  gap: 5px !important;
  grid-template-columns: minmax(0, 1fr) 48px 48px 58px !important;
}

.speech-hold {
  touch-action: none !important;
  -webkit-touch-callout: none;
  user-select: none;
}

@media (max-width: 600px) {
  .cb-chat-form {
    grid-template-columns: minmax(0, 1fr) 44px 44px 52px !important;
  }
}

/* ==========================================================================
   PUBLIC R42 — SPLASH-STYLE LOBBY + APP-WIDE AMBIENT MEDIA
   ========================================================================== */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.app-shell {
  background: transparent;
  isolation: isolate;
}

.cc-ambient-stage {
  background: #101413 url("media/start/cards/hero-start.jpg") center / cover no-repeat;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: -2;
}

.cc-ambient-stage::after {
  background:
    radial-gradient(circle at 50% 20%, rgba(243, 189, 49, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(8, 13, 12, 0.36), rgba(8, 13, 12, 0.72));
  content: "";
  inset: 0;
  position: absolute;
  z-index: 2;
}

.cc-ambient-video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  transition: opacity 1.8s ease;
  width: 100%;
}

.cc-ambient-video.is-visible {
  opacity: 0.58;
}

.top-menu,
.bottom-toolbar,
.screen-stack {
  position: relative;
  z-index: 1;
}

.home-view {
  background: transparent !important;
}

.home-view::before {
  background: linear-gradient(180deg, rgba(7, 12, 11, 0.14), rgba(7, 12, 11, 0.38));
  opacity: 1;
}

.home-frame {
  background: rgba(13, 18, 17, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.state-lobby .studio-view {
  display: none !important;
}

.home-brand {
  align-items: center;
  display: flex;
  gap: 8px;
}

.home-lobby-icon {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9px;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.home-brand strong {
  color: #fff;
  letter-spacing: 0.12em;
}

.home-top-menu {
  background: rgba(10, 15, 14, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}

.home-workspace {
  padding: 12px clamp(10px, 2vw, 28px) 82px;
}

.home-view[data-lobby-tab="portals"] .home-workspace {
  overflow: auto;
  overscroll-behavior: contain;
}

.lobby-portal-grid {
  gap: clamp(8px, 1.2vw, 14px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1220px;
  padding: 4px 0 18px;
}

.portal-intro {
  background:
    linear-gradient(110deg, rgba(10, 15, 14, 0.94), rgba(10, 15, 14, 0.66)),
    url("media/start/cards/hero-start.jpg") center / cover no-repeat;
  border: 1px solid rgba(243, 189, 49, 0.34);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
  min-height: 138px;
  padding: clamp(18px, 2.5vw, 30px);
}

.portal-intro .eyebrow {
  color: #f3bd31;
}

.portal-intro-actions button {
  background: rgba(251, 251, 247, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 9px;
  color: #101413;
  min-height: 46px;
  padding: 0 16px;
}

.portal-card,
.portal-card.lessons-portal {
  align-items: stretch;
  aspect-ratio: 1 / 1;
  background: #101413;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  justify-content: flex-end;
  min-height: 0;
  padding: 0;
  text-align: left;
}

.portal-card::before {
  display: none;
}

.portal-card::after {
  background-image: var(--portal-card-media) !important;
  background-position: center;
  background-size: cover;
  opacity: 0.96;
  transform: none;
}

.portal-card:hover::after,
.portal-card:focus-visible::after {
  opacity: 1;
  transform: scale(1.035);
}

.portal-card h3 {
  background: linear-gradient(180deg, rgba(10, 15, 14, 0.18), rgba(10, 15, 14, 0.94));
  bottom: 0;
  color: #fff;
  font-size: clamp(12px, 1.5vw, 17px);
  left: 0;
  letter-spacing: 0.06em;
  margin: 0;
  padding: 28px 12px 11px;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
}

.portal-card p {
  background: rgba(10, 15, 14, 0.9);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  inset: auto 9px 48px;
  line-height: 1.35;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  transform: translateY(5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.portal-card:hover p,
.portal-card:focus-visible p {
  opacity: 1;
  transform: translateY(0);
}

.portal-icon {
  display: none;
}

.portal-card-badge {
  background: rgba(10, 15, 14, 0.76);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 8px;
  padding: 4px 7px;
  right: 8px;
  top: 8px;
}

.home-room-dock {
  background: rgba(10, 15, 14, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
}

.home-room-dock input {
  background: rgba(251, 251, 247, 0.96);
}

.home-room-dock button {
  background: #f3bd31;
  color: #101413;
}

.top-menu .icon-button.is-active img,
.bottom-toolbar .icon-button.is-active img,
.bottom-toolbar button.cb-toolbar-icon.is-active img {
  filter: none !important;
}

.cc-soundtrack {
  align-items: center;
  background: rgba(10, 15, 14, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  grid-template-columns: minmax(96px, 1fr) auto;
  min-height: 54px;
  min-width: 0;
  padding: 5px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
  position: relative;
  width: 100%;
  z-index: 3;
}

.cc-soundtrack[hidden] {
  display: none !important;
}

.cc-soundtrack-visualizer {
  display: block;
  height: 42px;
  min-width: 0;
  width: 100%;
}

.cc-soundtrack-deck {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
  display: flex;
  gap: 4px;
  min-height: 42px;
  min-width: 0;
  padding: 3px 7px;
}

.cc-soundtrack-deck[hidden] {
  display: none;
}

.cc-soundtrack-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  min-height: 34px;
  min-width: 34px;
  width: 34px;
}

.bottom-toolbar > .cc-soundtrack-toggle {
  flex: 0 0 48px !important;
}

.cc-soundtrack-title {
  font-size: 11px;
  font-weight: 800;
  max-width: 150px;
  overflow: hidden;
  padding: 0 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-soundtrack-volume input {
  accent-color: #f3bd31;
  width: 86px;
}

body.e-ink-active .cc-ambient-stage {
  display: none !important;
}

@media (max-width: 900px) {
  .lobby-portal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .home-workspace {
    padding: 8px 8px 72px;
  }

  .lobby-portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 10px;
  }

  .portal-intro {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 16px;
  }

  .portal-intro h1 {
    font-size: clamp(22px, 7vw, 29px);
  }

  .portal-feature-strip {
    display: none;
  }

  .portal-intro-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .portal-card,
  .portal-card.lessons-portal {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .portal-card p {
    display: none;
  }

  .portal-card h3 {
    font-size: 11px;
    padding: 24px 6px 8px;
  }

  .cc-soundtrack {
    gap: 6px;
    grid-template-columns: minmax(72px, 1fr) auto;
    min-height: 50px;
    padding-block: 4px;
  }

  .cc-soundtrack-title {
    max-width: 92px;
  }

  .cc-soundtrack-volume {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-ambient-stage {
    display: none;
  }
}

/* r30 cohesive edge wings: the studio frame already begins below the top
   menu, so rail/detail offsets are frame-local (top: 0). One shared column
   width now drives both outer rails, every color drill, and the Tools drill. */
.studio-frame {
  --cb-wing-column: 64px;
}

@media (max-width: 599px) {
  .studio-frame { --cb-wing-column: 56px; }
}

@media (min-width: 600px) {
  .studio-frame { --cb-wing-column: 72px; }
}

.cb-rail,
.cb-detail {
  top: 0 !important;
}

.cb-rail {
  width: var(--cb-wing-column) !important;
}

.cb-detail-left {
  left: var(--cb-wing-column) !important;
  width: var(--cb-wing-column) !important;
}

.cb-detail-right {
  right: var(--cb-wing-column) !important;
}

.cb-detail-right[data-detail-key="tools"] {
  width: var(--cb-wing-column) !important;
}

#cb-detail-colors-2 {
  left: calc(var(--cb-wing-column) + var(--cb-wing-column) + 4px) !important;
}

#cb-detail-colors-3 {
  left: calc(var(--cb-wing-column) + var(--cb-wing-column) + var(--cb-wing-column) + 8px) !important;
}

#cb-detail-colors-4 {
  left: calc(var(--cb-wing-column) + var(--cb-wing-column) + var(--cb-wing-column) + var(--cb-wing-column) + 12px) !important;
}

body.cb-rails-swapped .cb-detail-left {
  left: auto !important;
  right: var(--cb-wing-column) !important;
}

body.cb-rails-swapped .cb-detail-right {
  left: var(--cb-wing-column) !important;
  right: auto !important;
}

body.cb-rails-swapped #cb-detail-colors-2 {
  left: auto !important;
  right: calc(var(--cb-wing-column) + var(--cb-wing-column) + 4px) !important;
}

body.cb-rails-swapped #cb-detail-colors-3 {
  left: auto !important;
  right: calc(var(--cb-wing-column) + var(--cb-wing-column) + var(--cb-wing-column) + 8px) !important;
}

body.cb-rails-swapped #cb-detail-colors-4 {
  left: auto !important;
  right: calc(var(--cb-wing-column) + var(--cb-wing-column) + var(--cb-wing-column) + var(--cb-wing-column) + 12px) !important;
}

.cb-rail-drop-zone {
  top: 0;
  width: var(--cb-wing-column);
}

@media (min-width: 601px) {
  body.cb-has-colors-rail .studio-workspace {
    padding-left: var(--cb-wing-column) !important;
  }

  body.cb-has-brush-rail .studio-workspace {
    padding-right: var(--cb-wing-column) !important;
  }

  body.cb-rails-swapped.cb-has-colors-rail .studio-workspace {
    padding-left: 0 !important;
    padding-right: var(--cb-wing-column) !important;
  }

  body.cb-rails-swapped.cb-has-brush-rail .studio-workspace {
    padding-left: var(--cb-wing-column) !important;
    padding-right: 0 !important;
  }
}

/* The artwork is the tile face. Labels stay readable as bottom overlays
   instead of forcing the image into a small badge inside a large white box. */
.cb-rail-tile {
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
  width: 100%;
}

.cb-rail-glyph {
  align-items: center;
  display: flex;
  font-size: 24px;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.cb-rail .cb-rail-tile .cb-rail-img {
  border-radius: 6px;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
  transform: none !important;
  width: 100% !important;
}

.cb-rail-label {
  background: linear-gradient(180deg, rgba(251, 251, 247, 0.72), rgba(251, 251, 247, 0.96));
  border-radius: 0 0 5px 5px;
  bottom: 0;
  color: var(--ink, #111);
  font-size: 8px !important;
  left: 0;
  line-height: 1;
  overflow: hidden;
  padding: 4px 2px 3px;
  position: absolute;
  right: 0;
  text-overflow: ellipsis;
  transform: none !important;
  white-space: nowrap;
  z-index: 2;
}

.cb-rail-tile.is-active .cb-rail-label {
  background: linear-gradient(180deg, rgba(16, 20, 19, 0.68), rgba(16, 20, 19, 0.94));
  color: #fff;
}

/* Color drill nodes fill the same inner square as their rail neighbors. */
.cb-detail-left .cb-detail-body {
  grid-template-columns: 1fr;
  padding: 4px;
}

.cb-detail-left .cb-detail-body .drill-swatch,
.cb-detail-left .cb-detail-body .drill-complement,
.cb-detail-left .cb-detail-body .drill-next,
.cb-detail-left .cb-detail-body .easel-main-swatch,
.cb-detail-left .cb-detail-body .easel-shade-swatch,
.cb-detail-left .cb-detail-body .quick-swatch,
.cb-detail-left .cb-detail-body .cb-detail-list-tile,
.cb-detail-left .cb-detail-body .cb-active-color-tile {
  max-height: none;
  max-width: none;
  width: 100%;
}

/* The Tools drill is a true twin of the outer rail: one square art tile per
   row, full-bleed icon, bottom label overlay, and its own vertical scroll. */
.cb-detail-right[data-detail-key="tools"] .cb-detail-head {
  justify-content: flex-end;
}

.cb-detail-right[data-detail-key="tools"] .cb-detail-title,
.cb-detail-right[data-detail-key="tools"] .cb-detail-expand-btn {
  display: none;
}

.cb-detail-right[data-detail-key="tools"] .cb-detail-body {
  padding: 4px;
}

.cb-detail-right[data-detail-key="tools"] .cb-tools-grid {
  gap: 4px;
  grid-template-columns: 1fr !important;
}

.cb-detail-right[data-detail-key="tools"] .cb-tool-tile {
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box;
  display: block;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
  width: 100% !important;
}

.cb-detail-right[data-detail-key="tools"] .cb-tool-tile .tool-glyph {
  background: transparent;
  border: 0;
  border-radius: 6px;
  display: block;
  inset: 0;
  height: auto;
  min-width: 0;
  padding: 0;
  position: absolute;
}

.cb-detail-right[data-detail-key="tools"] .cb-tool-tile .tool-img {
  border-radius: 6px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cb-detail-right[data-detail-key="tools"] .cb-tool-tile .cb-tool-label {
  background: linear-gradient(180deg, rgba(251, 251, 247, 0.72), rgba(251, 251, 247, 0.96));
  border-radius: 0 0 5px 5px;
  bottom: 0;
  color: var(--ink, #111);
  font-size: 9px;
  left: 0;
  line-height: 1;
  padding: 4px 2px 3px;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
}

.cb-detail-right[data-detail-key="tools"] .cb-tool-tile.is-active .cb-tool-label {
  background: linear-gradient(180deg, rgba(16, 20, 19, 0.68), rgba(16, 20, 19, 0.94));
  color: #fff;
}

/* r31 cohesive shell pass: toolbar artwork is the face of every square,
   labels remain readable as bottom overlays, and active state lives in the
   frame/label instead of bleaching the artwork itself. */
.top-menu .cb-toolbar-icon,
.bottom-toolbar .cb-toolbar-icon,
.bottom-toolbar .zoom-cluster .cb-toolbar-icon,
.home-top-menu .home-menu-tile {
  box-sizing: border-box;
  gap: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
}

.top-menu .cb-toolbar-icon .cb-toolbar-img,
.bottom-toolbar .cb-toolbar-icon .cb-toolbar-img,
.bottom-toolbar .zoom-cluster .cb-toolbar-icon .cb-toolbar-img,
.home-top-menu .home-menu-tile .cb-toolbar-img {
  border-radius: 7px;
  filter: none !important;
  height: 100% !important;
  inset: 0;
  margin: 0 !important;
  object-fit: cover;
  position: absolute;
  transform: none;
  width: 100% !important;
}

.home-top-menu .home-menu-tile .home-back-icon {
  transform: rotate(180deg);
}

.top-menu .cb-toolbar-icon .cb-toolbar-label,
.bottom-toolbar .cb-toolbar-icon .cb-toolbar-label,
.bottom-toolbar .zoom-cluster .cb-toolbar-icon .cb-toolbar-label,
.home-top-menu .home-menu-tile .cb-toolbar-label {
  background: linear-gradient(180deg, rgba(251, 251, 247, 0.66), rgba(251, 251, 247, 0.96));
  border-radius: 0 0 6px 6px;
  bottom: 0;
  color: var(--ink, #111);
  font-size: 8px !important;
  left: 0;
  line-height: 1 !important;
  margin: 0 !important;
  overflow: hidden;
  padding: 4px 2px 3px;
  position: absolute;
  right: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

.top-menu .cb-toolbar-icon.is-active,
.bottom-toolbar .cb-toolbar-icon.is-active,
.home-top-menu .home-menu-tile.is-active {
  background: var(--panel) !important;
  border-color: var(--mint, #1e9c89) !important;
  box-shadow: 0 0 0 2px rgba(30, 156, 137, 0.34) !important;
}

.top-menu .cb-toolbar-icon.is-active .cb-toolbar-label,
.bottom-toolbar .cb-toolbar-icon.is-active .cb-toolbar-label,
.home-top-menu .home-menu-tile.is-active .cb-toolbar-label {
  background: linear-gradient(180deg, rgba(16, 20, 19, 0.62), rgba(16, 20, 19, 0.94));
  color: #fff;
}

/* Root and drill headers share one compact baseline. The old coarse-pointer
   rule inflated the close row to 53px; 32px keeps every first tile aligned. */
.cb-rail-head,
.cb-detail-head {
  box-sizing: border-box;
  flex: 0 0 32px;
  height: 32px;
  min-height: 32px;
}

.cb-rail-head {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 2px 5px;
}

.cb-rail-head::after {
  content: "⋮";
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 3px;
}

.cb-detail-head {
  gap: 2px;
  justify-content: flex-end;
  margin-top: 5px;
  padding: 2px !important;
}

.cb-detail-left:not(.is-expanded) .cb-detail-title,
.cb-detail-right:not(.is-expanded) .cb-detail-title,
.cb-cascade .cb-detail-title {
  display: none;
}

.cb-detail-left .cb-detail-head button,
.cb-detail-right .cb-detail-head button,
.cb-cascade .cb-detail-head button {
  flex: 0 0 28px;
  font-size: 13px;
  height: 28px !important;
  min-height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  width: 28px;
}

/* Tools and Shapes are true sibling rails: one square, full-face icon per
   row with canonical short labels. Inline SVGs and image icons share sizing. */
.cb-detail[data-detail-key="tools"] .cb-detail-body,
.cb-detail[data-detail-key="shapes"] .cb-detail-body {
  gap: 4px;
  grid-template-columns: 1fr !important;
  padding: 4px;
}

.cb-detail[data-detail-key="tools"] .cb-tool-tile,
.cb-detail[data-detail-key="shapes"] .cb-detail-list-tile {
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box;
  display: block;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
  width: 100% !important;
}

.cb-detail[data-detail-key="tools"] .cb-tool-tile .tool-glyph,
.cb-detail[data-detail-key="shapes"] .cb-detail-list-tile .cb-detail-list-glyph {
  background: transparent;
  border: 0;
  border-radius: 6px;
  display: block;
  inset: 0;
  height: auto;
  min-width: 0;
  padding: 0;
  position: absolute;
}

.cb-detail[data-detail-key="tools"] .tool-img,
.cb-detail[data-detail-key="tools"] .tool-svg,
.cb-detail[data-detail-key="shapes"] .tool-img,
.cb-detail[data-detail-key="shapes"] .tool-svg {
  border-radius: 6px;
  display: block;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
  width: 100% !important;
}

.cb-detail[data-detail-key="tools"] .cb-tool-label,
.cb-detail[data-detail-key="shapes"] .cb-detail-list-label {
  background: linear-gradient(180deg, rgba(251, 251, 247, 0.66), rgba(251, 251, 247, 0.96));
  border-radius: 0 0 5px 5px;
  bottom: 0;
  color: var(--ink, #111);
  display: block;
  font-size: 8px !important;
  font-weight: 800;
  left: 0;
  line-height: 1;
  overflow: hidden;
  padding: 4px 1px 3px;
  position: absolute;
  right: 0;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.cb-detail[data-detail-key="tools"] .is-active .cb-tool-label,
.cb-detail[data-detail-key="shapes"] .is-active .cb-detail-list-label {
  background: linear-gradient(180deg, rgba(16, 20, 19, 0.62), rgba(16, 20, 19, 0.94));
  color: #fff;
}

/* Collapse state belongs to the shell because the menu/toolbars are shell
   siblings of the studio frame. Restore tabs can no longer leak while open. */
.app-shell.top-menu-collapsed .top-menu,
.app-shell.bottom-toolbar-collapsed .bottom-toolbar {
  display: none !important;
}

.app-shell.bottom-toolbar-collapsed .cc-soundtrack {
  display: none !important;
}

.app-shell:not(.top-menu-collapsed) .restore-top,
.app-shell:not(.bottom-toolbar-collapsed) .restore-bottom {
  display: none !important;
}

.restore-top,
.restore-bottom {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0;
  height: 48px;
  min-height: 48px !important;
  min-width: 48px !important;
  width: 48px;
}

.restore-top::before,
.restore-bottom::before {
  align-items: center;
  background: var(--studio-panel-bg, rgba(251, 251, 247, 0.94));
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(16, 20, 19, 0.12);
  color: var(--ink);
  display: flex;
  font-size: 10px;
  height: 18px;
  justify-content: center;
  width: 38px;
}

.restore-top::before {
  border-radius: 0 0 8px 8px;
  content: "▼";
}

.restore-bottom::before {
  border-radius: 8px 8px 0 0;
  content: "▲";
}

/* Lobby hierarchy: one compact identity row, the work surface, then a calm
   room join dock at the bottom. It no longer consumes the top first view. */
.home-frame {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.home-top-menu {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  min-height: 56px;
  overflow: hidden;
  padding: 4px 8px;
}

.home-brand {
  flex: 1 1 auto;
}

.home-brand strong {
  font-size: 13px;
}

.home-mark {
  height: 9px;
  width: 32px;
}

.home-top-menu .home-menu-tile {
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: var(--ink);
  flex: 0 0 48px;
  height: 48px;
  min-height: 48px;
  min-width: 48px;
  text-decoration: none;
  width: 48px;
}

.home-top-menu .network-pill {
  flex: 0 0 auto;
  font-size: 9px;
  padding: 4px 7px;
}

.home-room-dock {
  align-items: center;
  background: rgba(251, 251, 247, 0.94);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 5px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
}

.home-room-dock .join-row {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: 48px minmax(0, 320px) 72px;
  margin: 0;
  max-width: 470px;
  width: 100%;
}

.room-dock-label {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  overflow: hidden;
  position: relative;
}

.room-dock-label img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.room-dock-label span {
  background: linear-gradient(180deg, rgba(251, 251, 247, 0.66), rgba(251, 251, 247, 0.96));
  bottom: 0;
  color: var(--ink);
  font-size: 8px;
  font-weight: 800;
  left: 0;
  line-height: 1;
  padding: 4px 2px 3px;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
}

.home-room-dock input,
.home-room-dock button {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
}

.home-room-dock input {
  min-width: 0;
  width: 100%;
}

.home-room-dock button {
  min-width: 0;
  padding: 0 10px;
  width: 72px;
}

.portal-intro-actions button {
  min-height: 44px;
}

@media (max-width: 480px) {
  .home-top-menu {
    gap: 5px;
  }

  .home-brand {
    gap: 5px;
  }

  .home-brand strong {
    font-size: 11px;
  }

  .home-mark {
    width: 22px;
  }

  .home-top-menu .home-menu-tile {
    flex-basis: 44px;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
  }

  .home-room-dock .join-row {
    grid-template-columns: 44px minmax(0, 1fr) 64px;
  }

  .home-room-dock input,
  .home-room-dock button {
    height: 44px;
    min-height: 44px;
  }

  .home-room-dock button {
    width: 64px;
  }
}

/* Phone hit areas stay 44px without reopening the oversized header row:
   the transparent button overhangs the 32px strip while its visible face
   remains the same compact 28px square. */
@media (max-width: 768px), (pointer: coarse) {
  .cb-detail-left .cb-detail-head button,
  .cb-detail-right .cb-detail-head button,
  .cb-cascade .cb-detail-head button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    display: flex;
    flex: 0 0 44px;
    font-size: 0;
    height: 44px !important;
    justify-content: center;
    min-height: 44px !important;
    min-width: 44px !important;
    width: 44px;
  }

  .cb-detail-head button::before {
    align-items: center;
    background: rgba(251, 251, 247, 0.92);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    display: flex;
    font-size: 13px;
    height: 28px;
    justify-content: center;
    width: 28px;
  }

  .cb-detail-head [data-detail-close]::before,
  .cb-detail-head [data-cascade-close]::before {
    content: "×";
  }

  .cb-detail-head [data-detail-expand]::before {
    content: "⤢";
  }
}

/* r38 contextual footer + Studio Dock -----------------------------------
   The two edge-wing toggles are fixed to the footer corners. Only the
   contextual middle row scrolls, so Colors and Brush never drift together
   or disappear offscreen on a phone. */
body.state-studio .bottom-toolbar {
  overflow: hidden;
  padding-left: max(4px, env(safe-area-inset-left));
  padding-right: max(4px, env(safe-area-inset-right));
}

.bottom-studio-tools {
  align-items: center;
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  position: static;
  width: auto;
}

.bottom-nav-shortcuts {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

@media (min-width: 600px) {
  .bottom-toolbar > .cc-soundtrack-toggle {
    flex-basis: 54px !important;
  }
}

.bottom-context-tools {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bottom-context-tools::-webkit-scrollbar {
  display: none;
}

.bottom-context-tools > * {
  flex: 0 0 auto;
}

.wing-corner-toggle.is-left,
.wing-corner-toggle.is-right {
  inset: auto !important;
  margin: 0 !important;
  position: relative !important;
  transform: none !important;
  z-index: 2;
}

.wing-corner-toggle.is-left {
  grid-column: 1;
}

.wing-corner-toggle.is-right {
  grid-column: 3;
}

@media (max-width: 599px) {
  .bottom-context-tools {
    justify-content: flex-start;
  }
}

/* The old “Wing” flyout is now a clearly named Studio Dock. It sits inside
   the two edge rails, fills the usable canvas height, and uses the same
   image-face / label-overlay language as every other node. */
.wing-menu {
  background: rgba(251, 251, 247, 0.985);
  border: 1px solid rgba(16, 20, 19, 0.16);
  border-radius: 12px;
  bottom: 8px;
  box-shadow: -10px 12px 34px rgba(16, 20, 19, 0.18);
  gap: 8px;
  max-height: none;
  padding: 8px;
  right: calc(var(--cb-wing-column) + 8px);
  top: 8px;
  transform: translateX(calc(100% + var(--cb-wing-column) + 20px));
  width: min(286px, calc(100vw - (var(--cb-wing-column) * 2) - 24px));
}

.studio-frame.right-wing-collapsed .wing-menu {
  right: 8px;
}

body.cb-rails-swapped .wing-menu {
  left: calc(var(--cb-wing-column) + 8px);
  right: auto;
  transform: translateX(calc(-100% - var(--cb-wing-column) - 20px));
}

body.cb-rails-swapped .studio-frame.left-wing-collapsed .wing-menu {
  left: 8px;
}

.wing-menu.is-open,
body.cb-rails-swapped .wing-menu.is-open {
  transform: translateX(0);
}

.wing-head {
  align-items: center;
  background: linear-gradient(135deg, #eef7f3, #fff8ea);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 7px;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  min-height: 58px;
  padding: 6px;
}

.wing-head-mark {
  height: 42px;
  overflow: hidden;
  width: 42px;
}

.wing-head-img {
  border-radius: 7px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.wing-head-copy {
  min-width: 0;
}

.wing-head-copy .eyebrow {
  margin: 0 0 1px;
}

.wing-head-copy strong {
  font-size: 13px;
  line-height: 1.05;
}

.wing-head-copy > span {
  color: var(--muted);
  display: block;
  font-size: 8.5px;
  line-height: 1.15;
  margin-top: 2px;
}

.wing-head .wing-close-btn {
  align-items: center;
  align-self: start;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  font-size: 20px;
  height: 32px;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  width: 32px;
}

.wing-id-card {
  min-height: 48px;
}

.wing-easel-button {
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 7px;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 48px;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.wing-easel-img {
  height: 100%;
  min-height: 48px;
  object-fit: cover;
  width: 48px;
}

.wing-easel-button > span {
  align-self: center;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-right: 7px;
}

.wing-easel-button strong {
  font-size: 11px;
}

.wing-easel-button small {
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.15;
}

.wing-section,
.wing-controls {
  background: rgba(237, 242, 238, 0.44);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px;
}

.wing-module-grid,
.wing-tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.wing-module-grid .wing-module-btn {
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.wing-module-img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.wing-module-btn > span,
.wing-tool-grid .wing-tool-btn .tool-name {
  background: linear-gradient(180deg, rgba(251, 251, 247, 0.66), rgba(251, 251, 247, 0.96));
  bottom: 0;
  color: var(--ink);
  font-size: 8px;
  font-weight: 850;
  left: 0;
  line-height: 1;
  overflow: hidden;
  padding: 4px 2px 3px;
  position: absolute;
  right: 0;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.wing-module-grid .wing-module-btn.is-active,
.wing-tool-grid .wing-tool-btn.is-active {
  background: var(--panel);
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(30, 156, 137, 0.3);
}

.wing-module-btn.is-active > span,
.wing-tool-grid .wing-tool-btn.is-active .tool-name {
  background: linear-gradient(180deg, rgba(16, 20, 19, 0.62), rgba(16, 20, 19, 0.94));
  color: #fff;
}

.wing-tool-grid .wing-tool-group {
  display: contents;
}

.wing-tool-grid .wing-tool-group > .quick-label {
  grid-column: 1 / -1;
  margin-top: 3px;
}

.wing-tool-grid .wing-tool-btn {
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.wing-tool-grid .wing-tool-btn .tool-glyph {
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 7px;
  display: block;
  height: 100% !important;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100% !important;
}

.wing-tool-grid .wing-tool-btn .tool-img,
.wing-tool-grid .wing-tool-btn svg {
  border-radius: 7px;
  display: block;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
  width: 100% !important;
}

.wing-color-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wing-swatch {
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  height: auto;
  min-height: 38px;
}

.dock-toggle.is-active {
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 2px rgba(30, 156, 137, 0.34) !important;
}

@media (max-width: 480px) {
  .wing-menu {
    right: calc(var(--cb-wing-column) + 4px);
    width: calc(100vw - (var(--cb-wing-column) * 2) - 12px);
  }

  .studio-frame.right-wing-collapsed .wing-menu {
    right: 4px;
    width: calc(100vw - var(--cb-wing-column) - 12px);
  }

  .wing-module-grid,
  .wing-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wing-tool-grid .wing-tool-group > .quick-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px), (pointer: coarse) {
  .wing-head .wing-close-btn {
    height: 44px;
    margin: -6px -6px 0 0;
    min-height: 44px !important;
    min-width: 44px;
    width: 44px;
  }

  .wing-head {
    grid-template-columns: 42px minmax(0, 1fr) 38px;
  }

  .wing-module-grid .wing-module-btn,
  .wing-tool-grid .wing-tool-btn,
  .wing-swatch {
    min-height: 44px !important;
  }
}

/* ==========================================================================
   PUBLIC R53 FINAL CASCADE — one light shell across every COLOR-COLAB page
   Keep this block last: older release receipts remain above for provenance.
   ========================================================================== */

.cb-chat-form {
  align-items: stretch;
  display: grid !important;
  gap: 5px !important;
  grid-template-columns: minmax(0, 1fr) 48px 48px 58px !important;
}

.speech-hold {
  touch-action: none !important;
  -webkit-touch-callout: none;
  user-select: none;
}

@media (max-width: 600px) {
  .cb-chat-form {
    grid-template-columns: minmax(0, 1fr) 44px 44px 52px !important;
  }
}

.top-menu {
  align-items: center !important;
  background: rgba(251, 251, 247, 0.98) !important;
  border-bottom: 1px solid rgba(16, 20, 19, 0.14) !important;
  display: flex !important;
  flex: 0 0 auto;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  justify-content: flex-start !important;
  min-width: 0;
  overflow-x: auto !important;
  padding: max(8px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) 4px max(5px, env(safe-area-inset-left)) !important;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.top-menu::-webkit-scrollbar {
  display: none;
}

body.platform-ios .top-menu {
  padding-top: max(34px, env(safe-area-inset-top)) !important;
}

.top-menu .nav-link[href="/"] {
  display: inline-flex !important;
}

.top-nav-links {
  background: transparent !important;
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

.top-menu > *,
.top-nav-links > * {
  flex: 0 0 50px !important;
  margin: 0 !important;
}

.top-menu .icon-button,
.top-menu .nav-link,
.top-nav-links .icon-button,
.top-nav-links button {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(16, 20, 19, 0.15) !important;
  color: var(--ink) !important;
  text-decoration: none;
}

.top-menu .icon-button:hover,
.top-menu .nav-link:hover,
.top-nav-links button:hover,
.top-menu .icon-button.is-active,
.top-menu .nav-link.is-active,
.top-nav-links button.is-active {
  background: #fff !important;
  border-color: color-mix(in srgb, var(--mint) 68%, var(--line)) !important;
  box-shadow: 0 0 0 2px rgba(30, 156, 137, 0.2) !important;
  color: var(--ink) !important;
}

.top-menu .icon-button.is-active img,
.top-menu .nav-link.is-active img,
.top-nav-links button.is-active img {
  filter: none !important;
}

.global-restore-top {
  left: 50% !important;
  position: fixed !important;
  top: env(safe-area-inset-top) !important;
  transform: translateX(-50%) !important;
  z-index: 10020 !important;
}

.home-frame {
  background: rgba(250, 252, 249, 0.2) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.home-top-menu,
.home-room-dock,
.portal-intro-actions,
.bottom-nav-shortcuts {
  display: none !important;
}

.home-workspace {
  padding-bottom: 76px !important;
}

.portal-intro {
  background:
    linear-gradient(108deg, rgba(255, 252, 242, 0.97), rgba(229, 245, 239, 0.9)),
    url("media/start/cards/hero-start.jpg") center / cover no-repeat !important;
  border-color: rgba(30, 156, 137, 0.3) !important;
  box-shadow: 0 12px 30px rgba(16, 20, 19, 0.14) !important;
  color: var(--ink) !important;
  grid-column: 1 / -1;
  min-height: 118px !important;
  padding-right: 58px !important;
  position: relative;
}

.portal-intro h1,
.portal-intro p {
  color: var(--ink) !important;
}

.portal-intro .eyebrow {
  color: #8b6410 !important;
}

.portal-feature-strip span {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(16, 20, 19, 0.14) !important;
  color: #38514b !important;
}

.portal-intro-toggle {
  align-items: center;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(16, 20, 19, 0.18) !important;
  border-radius: 999px;
  color: var(--ink) !important;
  display: flex;
  font-size: 20px;
  height: 40px;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  z-index: 3;
}

.portal-intro.is-collapsed {
  min-height: 54px !important;
  padding: 8px 58px 8px 14px !important;
}

.portal-intro.is-collapsed .portal-intro-copy > :not(.eyebrow) {
  display: none;
}

.portal-intro.is-collapsed .portal-intro-copy .eyebrow {
  margin: 10px 0 0;
}

.shared-room-join {
  align-items: center;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(16, 20, 19, 0.12) !important;
  border-radius: 12px;
  display: grid;
  gap: 7px;
  grid-template-columns: 50px minmax(0, 340px) 76px;
  margin: 10px 0 14px;
  padding: 7px;
  width: min(100%, 490px);
}

.shared-room-join input,
.shared-room-join > button {
  height: 48px;
  min-height: 48px;
}

.shared-room-join > button {
  background: #f3bd31 !important;
  color: #101413 !important;
}

.room-grid {
  gap: 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)) !important;
}

.room-card {
  aspect-ratio: 1 / 1;
  background: #dfe7e3 !important;
  border-radius: 12px !important;
  display: block !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
}

.room-card-media {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform 0.22s ease;
  width: 100%;
}

.room-card:hover .room-card-media,
.room-card:focus-visible .room-card-media {
  transform: scale(1.035);
}

.room-card-main {
  background: linear-gradient(180deg, transparent, rgba(10, 15, 14, 0.94)) !important;
  bottom: 0;
  color: #fff !important;
  display: grid !important;
  gap: 2px;
  left: 0;
  padding: 34px 10px 10px !important;
  position: absolute;
  right: 0;
  z-index: 2;
}

.room-card-main strong,
.room-card .room-id {
  color: #fff !important;
}

.room-card .room-accent {
  left: 8px;
  position: absolute;
  top: 9px;
  z-index: 3;
}

.room-live-pill {
  background: rgba(10, 15, 14, 0.78) !important;
  color: #fff !important;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
}

.room-people {
  bottom: 48px;
  left: 9px;
  position: absolute;
  right: 9px;
  z-index: 3;
}

.journey-preview-grid {
  align-content: start !important;
  gap: 12px !important;
  grid-auto-rows: max-content !important;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)) !important;
  min-height: 0 !important;
}

.home-panel .journey-card {
  aspect-ratio: 1 / 1;
  border-radius: 12px !important;
  display: block !important;
  overflow: hidden;
  position: relative;
}

.journey-card-image-wrap {
  aspect-ratio: 1 / 1 !important;
  border: 0 !important;
  height: 100%;
}

.journey-card-info {
  background: linear-gradient(180deg, rgba(10, 15, 14, 0.02), rgba(10, 15, 14, 0.93)) !important;
  bottom: 0;
  color: #fff !important;
  display: grid !important;
  gap: 1px !important;
  left: 0;
  padding: 30px 9px 8px !important;
  position: absolute;
  right: 0;
  z-index: 3;
}

.journey-card-step,
.journey-card-title,
.journey-card-difficulty,
.journey-card-progress-text {
  color: #fff !important;
}

.journey-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-soundtrack {
  background: rgba(248, 250, 247, 0.99) !important;
  border-color: rgba(16, 20, 19, 0.16) !important;
  box-shadow: 0 -4px 18px rgba(16, 20, 19, 0.09) !important;
  color: var(--ink) !important;
}

.cc-soundtrack-deck {
  background: rgba(232, 241, 236, 0.98) !important;
  border-color: rgba(16, 20, 19, 0.14) !important;
  color: var(--ink) !important;
}

.cc-soundtrack-button {
  background: #fff !important;
  border-color: rgba(16, 20, 19, 0.18) !important;
  color: var(--ink) !important;
}

.cc-soundtrack-title {
  color: #2d3a36 !important;
}

.bottom-toolbar {
  background: rgba(251, 251, 247, 0.99) !important;
  border-color: rgba(16, 20, 19, 0.15) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

.bottom-toolbar > [hidden],
.top-menu > [hidden] {
  display: none !important;
}

.bottom-back {
  flex: 0 0 50px !important;
}

body.state-lobby .bottom-toolbar {
  justify-content: flex-end !important;
}

body.state-lobby .bottom-back:not([hidden]) {
  margin-right: auto !important;
}

.bottom-room-stack,
.bottom-board-select {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px;
  min-height: 46px;
}

.home-chat-form,
.chat-form {
  align-items: stretch;
  display: grid !important;
  gap: 5px !important;
  grid-template-columns: minmax(0, 1fr) 48px 48px 58px;
}

.speech-control {
  background: #edf6f2 !important;
  border: 1px solid rgba(30, 156, 137, 0.3) !important;
  color: #145e55 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 4px !important;
}

.speech-control.is-recording,
.comm-btn.is-recording {
  background: #ffe5e0 !important;
  border-color: #ef6b57 !important;
  box-shadow: 0 0 0 3px rgba(239, 107, 87, 0.18) !important;
  color: #8a2d20 !important;
}

.node-context-menu {
  background: rgba(251, 251, 247, 0.99) !important;
  border: 1px solid rgba(16, 20, 19, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(16, 20, 19, 0.2) !important;
  color: var(--ink) !important;
  display: grid;
  gap: 6px;
  max-width: min(290px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 10px !important;
}

.settings-dropdown {
  max-height: calc(100dvh - max(64px, env(safe-area-inset-top)) - 8px) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  width: min(340px, calc(100vw - 16px)) !important;
}

@supports not (aspect-ratio: 1 / 1) {
  .room-card,
  .home-panel .journey-card {
    min-height: 164px !important;
  }
}

@media (hover: none) {
  .room-card:hover .room-card-media,
  .room-card:focus-visible .room-card-media,
  .portal-card:hover .portal-card-media,
  .portal-card:focus-visible .portal-card-media,
  .home-panel .journey-card:hover .journey-card-img,
  .home-panel .journey-card:focus-visible .journey-card-img {
    transform: none !important;
  }
}

@media (pointer: coarse) {
  .portal-intro-toggle,
  .node-context-menu .cb-context-menu-item {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .portal-intro-toggle {
    height: 44px;
    width: 44px;
  }
}

@media (max-width: 600px) {
  .top-menu > *,
  .top-nav-links > * {
    flex-basis: 46px !important;
  }

  .top-menu .cb-toolbar-label {
    white-space: normal !important;
  }

  .portal-intro {
    padding: 14px 54px 14px 14px !important;
  }

  .shared-room-join {
    grid-template-columns: 44px minmax(0, 1fr) 64px;
    width: 100%;
  }

  .shared-room-join input,
  .shared-room-join > button {
    height: 44px;
    min-height: 44px;
  }

  .room-grid,
  .journey-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-chat-form,
  .chat-form {
    grid-template-columns: minmax(0, 1fr) 44px 44px 52px;
  }

  .cc-soundtrack {
    gap: 5px !important;
    grid-template-columns: minmax(70px, 1fr) minmax(0, auto) !important;
    padding-left: max(5px, env(safe-area-inset-left)) !important;
    padding-right: max(5px, env(safe-area-inset-right)) !important;
  }

  .cc-soundtrack-title {
    max-width: 92px !important;
  }

  .cc-soundtrack-volume input {
    width: 62px !important;
  }
}

@media (max-width: 340px) {
  .room-grid,
  .journey-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}