/* Readability within the LABs only; the discovery header is unchanged. */
#sceneLayout, #charsLayout, #placesLayout {
  --text-muted: color-mix(in srgb, var(--fg) 65%, transparent);
  --text-faint: color-mix(in srgb, var(--fg) 52%, transparent);
  --text-dim: color-mix(in srgb, var(--fg) 78%, transparent);
}
/* A small/landscape phone has too little canvas for two floating control bars.
   Let the composer scroll below the art there; typing still lifts it above the keyboard. */
@media (max-width: 768px) and (max-height: 650px) {
  body.composer-on:not(.mobile-keyboard) #sceneLayout #cmpBar { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 10px 8px; }
}
.cmp-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#cmpStepStyleAv .cmp-icon { width: 24px; height: 24px; }
.cmp-step-t small, .cmp-step-cost, .cmp-cast-label, #cmpCastEmpty { font-size: 12px; }
.cmp-step-btn, .cmp-chip { font-size: 13px; }
.cmp-step-btn { padding: 5px 10px; }
.cmp-seg button { font-size: 12px; padding-block: 6px; }
#cmpCast .chosen-char-name { font-size: 12px; color: var(--text); }
#cmpCastEmpty { color: var(--text-muted); }
#cmpStepCharSlot .cmp-cast { flex-direction: column; align-items: stretch; margin: 0; gap: 7px; }
#cmpStepCharSlot .cmp-cast-label { display: none; }
#cmpStepCharSlot #cmpCastAdd { align-self: flex-start; }
#cmpStepCharSlot #cmpCastChips { width: 100%; flex: auto; }
.cmp-mobile-quick { display: none; }
#cmpControls { min-width: 0; }
.cmp #noteInput { min-height: 36px; }
.cmp-menu .cmp-icon, .cmp-res-acts .cmp-icon { vertical-align: middle; margin-right: 4px; }
#genCost { white-space: nowrap; flex-shrink: 0; }
.cmp-pop-head { display: none; }
#charsLayout .char-reference-hint, #charsLayout .char-advanced-controls p { font-size: 12px; }
#placesLayout .pl-counts, #placesLayout .pl-tab-body p { font-size: 12px; }
@media (max-width: 768px) {
  :root { --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); --workspace-dock-h: calc(66px + var(--mobile-safe-bottom)); }
  body.composer-on #sceneLayout > .main { padding-bottom: var(--cmp-mobile-reserve, 260px); }
  #sceneLayout #feedWrap { scroll-margin-top: var(--header-h); }
  #sceneLayout .main, #sceneLayout .canvas-area, #sceneLayout .feed-wrap, #sceneLayout .scene-feed, #sceneLayout .scene-card { min-width: 0; max-width: 100%; }
  #sceneLayout .scene-card-actions { width: 0; min-width: 100%; box-sizing: border-box; }
  #sceneLayout .scene-card-actions { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 0 6px; max-width: 100%; }
  #sceneLayout .scene-card-actions .card-btn { flex: none; min-height: 44px; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  #sceneLayout .edit-rail { bottom: calc(14px + var(--mobile-safe-bottom)); }
  body.composer-on #sceneLayout .edit-rail { bottom: var(--mobile-rail-bottom, calc(14px + var(--mobile-safe-bottom))); }
  #sceneLayout .edit-rail button { min-width: 44px; min-height: 44px; }
  #sceneLayout #cmpBar, #sceneLayout .cmp-pop { bottom: calc(8px + var(--mobile-safe-bottom)); }
  body.rail-docked #sceneLayout #cmpBar, body.rail-docked #sceneLayout .cmp-pop { bottom: calc(8px + var(--mobile-safe-bottom)); }
  .workspace-dock { bottom: calc(10px + var(--mobile-safe-bottom)); }
  .workspace-nav { padding-bottom: calc(16px + var(--mobile-safe-bottom)); }
  .cmp-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: -1px; background: var(--bg); z-index: 1; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
  .cmp-pop-close { width: 44px; height: 44px; flex: none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; font: inherit; font-size: 22px; cursor: pointer; }
  #cmpPopPlus .cmp-menu button, #cmpPlusOptions summary { min-height: 44px; }
  #cmpPlusOptions summary { line-height: 24px; }
  body.mobile-keyboard.composer-on #sceneLayout #cmpBar { bottom: calc(var(--mobile-keyboard-inset) + 8px); z-index: 70; max-height: calc(var(--mobile-visible-height) - 16px); overflow-y: auto; }
  body.mobile-keyboard.composer-on #sceneLayout .cmp-pop { bottom: calc(var(--mobile-keyboard-inset) + 8px); max-height: calc(var(--mobile-visible-height) - 16px); }
  body.mobile-keyboard.composer-on #sceneLayout .edit-rail { visibility: hidden; }
  body.mobile-keyboard #cmpBar.mobile-expanded #cmpControls { max-height: max(80px, calc(var(--mobile-visible-height) - 220px)); }
  #cmpControls input, #cmpControls textarea { scroll-margin-block: 12px; }
  #cmpBar { padding: 8px 10px; }
  #cmpControls { display: none; }
  #cmpBar.mobile-expanded #cmpControls { display: block; max-height: min(44dvh, calc(var(--layout-h) - 210px)); overflow-y: auto; padding: 2px 0 10px; }
  #cmpStepGen { display: none; }
  #cmpMobilePlus { flex: none; }
  #cmpBar.basic .cmp-step-h { min-height: 36px; }
  #cmpBar.basic .cmp-step-b { grid-template-columns: 36px minmax(0, 1fr); }
  #cmpBar.basic .cmp-step-av, #cmpBar.basic .cmp-step-b > img { width: 36px; height: 36px; }
  .cmp-mobile-quick { display: flex; align-items: center; gap: 10px; }
  #cmpMobileToggle { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; min-height: 48px; border: 0; background: none; color: var(--text); padding: 4px 0; text-align: left; cursor: pointer; font: inherit; }
  #cmpMobileToggle > span { min-width: 0; flex: 1; }
  #cmpMobileToggle b, #cmpMobileToggle small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #cmpMobileToggle b { font-size: 13px; font-weight: 600; }
  #cmpMobileToggle small { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
  #cmpBar.mobile-expanded #cmpMobileToggle .cmp-icon { transform: rotate(180deg); }
  #cmpMobileGen { flex: 0 0 144px; min-width: 0; }
  #cmpMobileGen #genBtn { margin: 0; min-height: 46px; height: auto; width: 100%; padding: 10px; font-size: 13px; gap: 7px; }
  #cmpMobileGen #genCost { margin-left: 0; }
  #cmpCastSlot { margin-top: 4px; }
  #cmpCast { gap: 6px; margin-top: 0; }
  #cmpCast .cmp-cast-label { display: none; }
  #cmpCast .chosen-char { padding: 2px 4px; }
  #cmpCast .chosen-char-swap, #cmpCast .chip-x, #cmpCastAdd { min-height: 44px; }
  #cmpCast .chip-x { width: 44px; }
  #cmpFoot { margin-top: 6px; }
  #cmpFoot .cmp-foot-l { display: none; }
  #cmpFoot .cmp-seg button { min-height: 44px; }
  #cmpCredits { font-size: 12px; }
  #cmpControls .cmp-chip, #cmpControls .cmp-step-btn { min-height: 44px; }
  #cmpPlus { width: 44px; height: 44px; }
  #charsLayout .char-tab, #charsLayout .download-btn, #charsLayout .seg-btn, #charsLayout .desk-chip, #charsLayout .add-ref-btn, #charsLayout .char-advanced-actions button { min-height: 44px; font-size: 12px; }
  #charList .char-card-name { font-size: 12px !important; }
  #charList .char-card-sub { font-size: 11px; }
  #charsLayout .char-profile-header { position: static; }
  #placesLayout .pl-station, #placesLayout .pl-tab, #placesLayout .download-btn, #placesLayout .pl-actionbar button, #placesLayout .pl-panel button { min-height: 44px; font-size: 12px; }
  #placesLayout .pl-actionbar input { min-height: 44px; }
  #editMode .em-tab-btn, #editMode .em-ctx button, #editMode #emBottomBar .download-btn, #emSideChips .download-btn { min-height: 44px; }
  #editMode input[type=text], #editMode input[type=number], #editMode textarea { font-size: 16px; }
  /* Peek at the next step so the horizontal swipe is discoverable. Generate
     and the mode switch stay outside this scroller and never slide away. */
  #cmpBar.basic #cmpControls .cmp-basic {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: thin; overscroll-behavior-x: contain;
  }
  #cmpControls .cmp-basic > .cmp-step:not(.cmp-step-gen) {
    flex: 0 0 190px; min-width: 0; max-width: calc(100% - 24px); scroll-snap-align: start;
    border-bottom: 0; border-right: 1px solid var(--border);
  }
  #cmpControls .cmp-basic > #cmpStepStyle { border-right: 0; }
  #cmpMobileToggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
}