/* ACT V4 built-in Canvas Mode cassettes */
.canvas.is-cassette{
  padding:clamp(116px,12vh,148px) clamp(24px,4vw,56px) clamp(30px,4vw,54px);
  overflow:auto;
}
.sequence-cassette,.kanban-cassette,.camera-cassette{
  min-height:100%;
  display:grid;
  align-content:center;
  gap:24px;
}
.sequence-cassette>header,.kanban-cassette>header,.camera-cassette>header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
}
.sequence-cassette header span,.kanban-cassette header span,.camera-cassette header span{
  display:block;
  margin-bottom:9px;
  font:800 9px/1 ui-monospace,monospace;
  letter-spacing:.16em;
  color:var(--fo-accent,#ff8496);
}
.sequence-cassette h2,.kanban-cassette h2,.camera-cassette h2{
  margin:0;
  max-width:850px;
  font-size:clamp(36px,5vw,76px);
  line-height:.94;
  letter-spacing:-.05em;
}
.sequence-cassette button,.kanban-cassette button,.camera-cassette button{
  min-height:44px;
  border:1px solid color-mix(in srgb,var(--fo-accent,#ff8496) 45%,transparent);
  border-radius:999px;
  padding:9px 14px;
  background:color-mix(in srgb,var(--fo-accent,#ff8496) 14%,transparent);
  color:inherit;
  cursor:pointer;
}
.cassette-sortable--horizontal{
  display:flex;
  align-items:stretch;
  gap:10px;
  overflow:auto;
  padding:18px 6px 22px;
  scroll-snap-type:x proximity;
}
.cassette-module{
  flex:0 0 min(260px,70vw);
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  border:1px solid color-mix(in srgb,currentColor 14%,transparent);
  border-radius:18px;
  padding:18px;
  background:linear-gradient(145deg,#191b27,#10121a);
  cursor:grab;
  scroll-snap-align:start;
  user-select:none;
}
.cassette-module:active{cursor:grabbing}
.cassette-module.is-dragging{opacity:.45}
.cassette-module>span{
  margin-bottom:auto;
  font:800 10px ui-monospace,monospace;
  color:var(--fo-accent,#ff8496);
}
.cassette-module>strong{font-size:20px}
.cassette-module>small{color:var(--quiet,#9e9aa9);line-height:1.45}
.sequence-axis{
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid color-mix(in srgb,currentColor 15%,transparent);
  padding-top:10px;
  color:var(--quiet,#9e9aa9);
  font:700 10px ui-monospace,monospace;
  letter-spacing:.08em;
}
.sequence-axis b{color:var(--fo-accent,#ff8496)}
.kanban-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:12px;
  align-items:start;
  overflow:auto;
}
.kanban-column{
  min-height:420px;
  border-radius:18px;
  background:color-mix(in srgb,#fff 4%,transparent);
  padding:14px;
}
.kanban-column h3{
  margin:2px 4px 14px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.kanban-column [data-column-body]{
  min-height:340px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.kanban-column .cassette-module{
  flex:0 0 auto;
  min-height:118px;
  width:100%;
}
.camera-cassette{
  align-content:start;
}
.camera-cassette iframe{
  width:100%;
  min-height:60vh;
  border:0;
  border-radius:18px;
  background:#050506;
}
.camera-cassette>p{
  margin:0;
  color:var(--quiet,#9e9aa9);
  font-size:12px;
}
.canvas-action-dock{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.canvas-mode-host{
  display:flex;
  align-items:center;
  min-width:0;
}
@media(max-width:820px){
  .canvas-action-dock{align-items:flex-start;flex-direction:column}
  .kanban-columns{grid-template-columns:repeat(3,minmax(78vw,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .cassette-module{scroll-behavior:auto}
}

.cassette-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.act4-canvas-2d{
  min-width:900px;
  min-height:620px;
  position:relative;
  border-radius:24px;
  background:
    linear-gradient(90deg,color-mix(in srgb,currentColor 6%,transparent) 1px,transparent 1px),
    linear-gradient(color-mix(in srgb,currentColor 6%,transparent) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,#1a1c28,#0b0d14 72%);
  background-size:40px 40px,40px 40px,auto;
  padding:28px;
  transition:transform 80ms linear;
}
.act4-board-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px;
}
.act4-board-tile{
  min-height:140px;
  border-radius:16px;
  padding:14px;
  background:color-mix(in srgb,#fff 6%,transparent);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.act4-tile-color{height:8px;border-radius:999px}
.act4-tile-name{font-weight:800;font-size:16px}
.act4-tile-owner,.act4-tile-stage{color:var(--quiet,#9e9aa9);font-size:11px}
.act4-board-presence{display:flex;gap:6px;margin-top:18px}
.act4-presence-dot{width:10px;height:10px;border-radius:50%;background:#45df7c;box-shadow:0 0 10px #45df7c88}

.act4-dom-3d-world{
  min-width:900px;
  min-height:620px;
  position:relative;
  perspective:1200px;
  border-radius:24px;
  background:radial-gradient(circle at 50% 45%,#23263a,#090a10 70%);
  overflow:visible;
  transition:transform 80ms linear;
}
.act4-dom-3d-scene{
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  transform-style:preserve-3d;
}
.act4-dom-3d-node{
  position:absolute;
  width:130px;
  min-height:82px;
  margin:-41px 0 0 -65px;
  border:1px solid color-mix(in srgb,currentColor 16%,transparent);
  border-radius:14px;
  background:linear-gradient(145deg,#23263a,#141621);
  color:inherit;
  transform-style:preserve-3d;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:12px;
}
.act4-dom-3d-node small{color:var(--quiet,#9e9aa9)}
.act4-dom-3d-empty{
  width:min(520px,70vw);
  transform:translate3d(-50%,-50%,0);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.act4-dom-3d-empty strong{font-size:30px}
.act4-dom-3d-empty span{color:var(--quiet,#9e9aa9)}

.sequence-owner-cassette{
  align-content:start;
}
.sequence-owner-cassette iframe{
  width:100%;
  min-height:62vh;
  border:0;
  border-radius:18px;
  background:#080910;
}
.sequence-owner-status{
  color:var(--quiet,#9e9aa9);
  font:700 10px/1.4 ui-monospace,monospace;
  letter-spacing:.04em;
}

.kanban-owner-cassette{
  align-content:start;
}
.kanban-owner-cassette iframe{
  width:100%;
  min-height:62vh;
  border:0;
  border-radius:18px;
  background:#080910;
}
.kanban-owner-status{
  color:var(--quiet,#9e9aa9);
  font:700 10px/1.4 ui-monospace,monospace;
  letter-spacing:.04em;
}

/* Keep recovery controls compact and unavailable owner actions visibly disabled. */
.canvas-owner-retry{justify-self:start}
.is-cassette header button:disabled{opacity:.45;cursor:default}

/* Let narrow owner headers wrap without crushing their actions. */
.is-cassette header button{flex-shrink:0;white-space:nowrap}
@media(max-width:600px){
  .sequence-cassette>header,.kanban-cassette>header,.camera-cassette>header{flex-direction:column;align-items:flex-start}
}

/* The approved ACT header and floor already frame each owner cassette. Keep
   owner controls compact so the actual engine receives the working viewport. */
.canvas.is-cassette {
  padding: 16px clamp(16px, 2vw, 28px);
}
.sequence-owner-cassette, .kanban-owner-cassette, .camera-cassette {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sequence-owner-cassette > header, .kanban-owner-cassette > header, .camera-cassette > header {
  flex-shrink: 0;
  align-items: center;
}
.sequence-owner-cassette h2, .kanban-owner-cassette h2, .camera-cassette h2 {
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.1;
}
.sequence-owner-cassette header span, .kanban-owner-cassette header span, .camera-cassette header span {
  margin-bottom: 5px;
}
.sequence-owner-cassette iframe, .kanban-owner-cassette iframe, .camera-cassette iframe {
  flex: 1 0 240px;
  min-height: 240px;
  height: 100%;
  width: 100%;
}
.sequence-owner-status, .kanban-owner-status, .canvas-owner-retry {
  flex-shrink: 0;
}

.spatial-cassette{display:grid;grid-template-rows:auto minmax(300px,1fr) auto;gap:16px;min-height:100%}.spatial-cassette header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.spatial-cassette h2{font-size:32px;margin:0}.spatial-cassette button{min-height:44px;padding:8px 16px;border-radius:22px;border:1px solid #7778;background:#23232e;color:inherit}.spatial-cassette .cassette-actions{display:flex;flex-wrap:wrap;gap:8px}.spatial-viewport{position:relative;overflow:hidden;min-height:400px;perspective:1000px;touch-action:none;border:1px solid #ffffff18;border-radius:20px;background:radial-gradient(circle,#29263d,#10111a)}.spatial-world{position:absolute;left:40%;top:40%;transform-style:preserve-3d}.spatial-object{position:absolute;width:180px;cursor:grab;user-select:none;background:#514973!important}.spatial-cassette p{color:#aaa7ba}.canvas-durable-restore{min-height:44px;border-radius:22px;padding:8px 16px;background:#22222c;color:inherit;border:1px solid #7778}