/* Mobile priorities: the work first, compact tools, context above the keyboard. */
@media (max-width:900px) {
  body main.ritual-room.has-module-navigation:has(.wip-explore-nav) {
    --chrome-top:max(8px,env(safe-area-inset-top));
    --module-header-height:96px;
    grid-template-rows:96px minmax(0,1fr) 24px;
    gap:6px;
  }
  body main.ritual-room.has-module-navigation > header.pluritual-header:has(.wip-explore-nav) {
    height:96px;min-height:96px;grid-template-rows:52px 44px;
  }
  body main.has-module-navigation > header .wip-explore-nav {align-self:start;}
  body main.ritual-room.sentence:not(.unified-work-room) .sentence-focus {gap:10px;padding:4px 0;}
  body main.ritual-room.sentence:not(.unified-work-room) .module-chapter {font-size:30px;line-height:1.15;margin:0;}
  body main.ritual-room.sentence:not(.unified-work-room) .official-line {padding-bottom:56px;}
  body main.ritual-room.sentence .wip-inline-action {flex-basis:94px;height:94px;min-height:94px;}
  body main.ritual-room.sentence .wip-inline-action .sentence-word-validation {margin-top:10px;}

  /* Fit the whole tool set, then give every remaining pixel to the portrait. */
  body main.ritual-room.canvas > .room-content:has(.wip-canvas-composition) {
    overflow:hidden;
    padding:0;container-type:size;container-name:pluritual-canvas-room;
  }
  body main.ritual-room.canvas .canvas-panel:has(.wip-canvas-composition) {display:block;height:100%;min-height:0;}
  body main.ritual-room.canvas .wip-canvas-composition {
    height:100%;min-height:0;grid-template-rows:minmax(0,1fr) 44px auto;gap:6px;
  }
  body main.ritual-room.canvas .wip-canvas-composition .canvas-stage-real {
    container-type:size;display:grid;height:100%;min-height:0;padding:0;
    grid-template-rows:24px minmax(0,1fr);
  }
  body main.ritual-room.canvas .wip-canvas-composition .canvas-art-mount {
    width:min(100%,calc((100cqh - 24px) * .831));margin:0;align-self:center;
  }
  body main.ritual-room.canvas .wip-canvas-palette {
    width:100%;max-width:100%;min-width:0;justify-self:stretch;
    overflow:visible;
  }
  body main.ritual-room.canvas .wip-canvas-palette .canvas-palette {
    display:grid;width:100%;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;
  }
  body main.ritual-room.canvas .wip-canvas-palette [data-color] {width:100%;min-width:0;max-width:44px;justify-self:center;}
  body main.ritual-room.canvas .wip-canvas-palette [data-color]::before {
    inset:auto;left:50%;top:50%;width:calc(100% - 8px);aspect-ratio:1;transform:translate(-50%,-50%);
  }
  body main.ritual-room.canvas .wip-canvas-composition .canvas-hand-card {gap:4px;padding-bottom:10px;}
  body main.ritual-room.canvas .wip-canvas-composition :is(.canvas-guidance,#handSlots) {top:0;}
  body main.ritual-room.canvas .wip-canvas-composition .wip-organic-action {
    height:48px!important;min-height:48px!important;margin-top:4px!important;padding:12px 20px!important;
  }
  body main.ritual-room.clock :is(.phase-ready,.phase-departing) .clock-ritual-action {
    align-self:start;margin-top:12px;margin-bottom:0;
  }
  body main.ritual-room.clock .clock-support-link {bottom:4px;}
  body main.ritual-room.clock .flow-preview-notice {top:0;bottom:auto;margin:0;font-size:9px;}
}

@container pluritual-canvas-room (max-height:612px) {
  body main.ritual-room.canvas .wip-canvas-composition {grid-template-rows:minmax(0,1fr) 36px auto;}
  body main.ritual-room.canvas .wip-canvas-palette [data-color] {height:36px;}
  body main.ritual-room.canvas .wip-canvas-composition .canvas-hand-card {padding-bottom:0;}
  body main.ritual-room.canvas .wip-canvas-composition .canvas-guidance {
    position:absolute!important;width:1px!important;height:1px!important;padding:0;overflow:hidden!important;clip-path:inset(50%)!important;
  }
  body main.ritual-room.canvas .wip-canvas-composition .hand-slot {
    width:36px!important;height:36px!important;min-width:36px!important;
  }
  body main.ritual-room.canvas .wip-canvas-composition .wip-organic-action {
    height:44px!important;min-height:44px!important;padding:10px 20px!important;font-size:16px!important;
  }
  body main.ritual-room.canvas .canvas-tools {gap:3px;padding:2px;}
  body main.ritual-room.canvas .canvas-tools .canvas-tool-group button {min-height:30px;padding:5px 7px;font-size:10px;}
  body main.ritual-room.canvas .canvas-tools .canvas-tool-animation > button {width:58px;}
  body main.ritual-room.canvas .canvas-tools .canvas-tool-grid > button {width:43px;}
  body main.ritual-room.canvas .canvas-tools .canvas-tool-zoom > button {min-width:30px;}
}
@container pluritual-canvas-room (max-height:492px) {
  body main.ritual-room.canvas .wip-canvas-composition {grid-template-rows:minmax(0,1fr) 32px auto;gap:4px;}
  body main.ritual-room.canvas .wip-canvas-palette [data-color] {height:32px;}
  body main.ritual-room.canvas .wip-canvas-composition .canvas-hand-card {gap:3px;}
  body main.ritual-room.canvas .wip-canvas-composition .hand-slot {width:30px!important;height:30px!important;min-width:30px!important;}
}

/* On a phone turned sideways, put the tools beside the portrait. */
@media (min-width:700px) and (max-width:900px) and (max-height:500px) {
  body main.ritual-room.has-module-navigation:has(.wip-explore-nav) {--module-header-height:64px;grid-template-rows:64px minmax(0,1fr) 24px;}
  body main.ritual-room.has-module-navigation > header.pluritual-header:has(.wip-explore-nav) {height:64px;min-height:64px;grid-template-rows:64px;}
  body main.has-module-navigation > header .wip-explore-nav {position:absolute;left:50%;top:2px;transform:translateX(-50%);}
  body main.ritual-room.canvas .wip-canvas-composition {grid-template-columns:minmax(0,1.2fr) minmax(230px,1fr);grid-template-rows:88px auto minmax(0,1fr);gap:6px 16px;}
  body main.ritual-room.canvas .wip-canvas-composition .canvas-stage-real {grid-area:1 / 1 / 4 / 2;}
  body main.ritual-room.canvas .wip-canvas-palette {grid-area:1 / 2;align-self:center;justify-self:center;width:220px;}
  body main.ritual-room.canvas .wip-canvas-palette .canvas-palette {grid-template-columns:repeat(5,44px);}
  body main.ritual-room.canvas .wip-canvas-palette [data-color] {height:44px;}
  body main.ritual-room.canvas .wip-canvas-composition .canvas-hand-card {grid-area:2 / 2;}
  body main.ritual-room.canvas .wip-canvas-composition .hand-slot {width:36px!important;height:36px!important;min-width:36px!important;}
}

@media (max-width:600px) {
  body main.ritual-room.clock :is(.phase-ready,.phase-departing) {
    grid-template-rows:minmax(86px,1fr) var(--clock-scene-size) minmax(146px,1fr);gap:0;
  }
}

@media (max-width:900px) {
  body #app.is-mobile-word-editing main.ritual-room.sentence.has-module-navigation {
    --chrome-top:max(4px,env(safe-area-inset-top));--module-header-height:52px;
    grid-template-rows:52px minmax(0,1fr) 0;gap:4px;padding-bottom:max(4px,env(safe-area-inset-bottom));
  }
  body #app.is-mobile-word-editing main.sentence > header.pluritual-header:has(.wip-explore-nav) {
    height:52px;min-height:52px;grid-template-rows:52px;
  }
  body #app.is-mobile-word-editing main.sentence :is(.wip-explore-nav,.module-chapter,.annual-progress) {display:none;}
  body #app.is-mobile-word-editing main.sentence .sentence-focus {gap:6px;padding:0;}
  body #app.is-mobile-word-editing main.sentence > .room-content {overflow:hidden;overflow:clip;}
  body #app.is-mobile-word-editing main.sentence .sentence-focus .official-line {
    font-size:22px;line-height:1.36;padding-bottom:8px;
  }
  body #app.is-mobile-word-editing main.sentence .sentence-reveal-receipt {display:none;}
  body #app.is-mobile-word-editing main.sentence .wip-inline-action {flex-basis:72px;height:72px;min-height:72px;}
  body #app.is-mobile-word-editing main.sentence .wip-inline-action .wip-organic-action {
    height:44px!important;min-height:44px!important;padding:10px 20px!important;
  }
  body #app.is-mobile-word-editing main.sentence .wip-inline-action .sentence-word-validation {margin-top:4px;min-height:0;}
  body #app.is-mobile-word-editing main.sentence .wip-inline-action .sentence-word-validation.is-guidance {display:none;}
}