/* Full paper card and independently movable, subordinate controller. */
.haiku-card{position:relative;box-sizing:border-box;width:360px;min-height:168px;padding:32px 94px 30px 22px;border:1px solid #cdc3aa;background:#f4efdf;background-image:linear-gradient(105deg,#fffcf580,transparent 60%);box-shadow:4px 5px 0 #0004;color:#26251f;text-align:left;font:18px/1.45 Georgia,'Times New Roman',serif;}
.haiku-card[hidden],.haiku-controller[hidden],.haiku-card [hidden],.haiku-controller [hidden]{display:none!important}
.card-poem{position:relative;z-index:1;overflow-wrap:anywhere;white-space:pre-wrap;pointer-events:none;user-select:none}
.card-poem.is-translatable{pointer-events:auto;cursor:pointer}
.card-poem.is-translatable:focus-visible{outline:2px dotted #26251f;outline-offset:3px}
.haiku-card .card-icon{position:absolute;right:9px;bottom:8px;width:88px;height:100px;padding:0;border:0;background:none;cursor:pointer}
.haiku-card .card-icon:disabled{cursor:default;opacity:1}
.haiku-card .card-art{display:block;width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse,#000 50%,transparent 73%)}
.haiku-card .card-play{position:absolute;top:9px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #7778;background:#655f53dd;color:#fff;font:14px/1 Arial,sans-serif;cursor:pointer;opacity:0;transition:opacity .12s}
.haiku-card .card-play{right:9px;border-radius:50%}
.haiku-card .card-popout,.haiku-controller .card-retract{position:absolute;left:50%;width:36px;height:24px;min-height:24px;padding:0;border:0;border-radius:0;background:transparent;color:#6b6552;font:0/1 Arial,sans-serif;text-align:center;cursor:pointer;transform:translateX(-50%)}
.haiku-card .card-popout{bottom:-12px;z-index:2;opacity:0;transition:opacity .12s}
.haiku-card .card-popout::before,.haiku-controller .card-retract::before{content:'';position:absolute;inset:5px 7px;background:#f4efdfcc;border:1px solid #cdc3aa88;border-radius:2px;z-index:-1}
/* Draw the chevron inside the tab instead of relying on font-glyph baselines. */
.haiku-card .card-popout::after,.haiku-controller .card-retract::after{content:'';position:absolute;box-sizing:border-box;left:50%;top:calc(50% - 2px);width:6px;height:6px;border-right:1.5px solid #6b6552;border-bottom:1.5px solid #6b6552;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
.haiku-controller .card-retract::after{top:calc(50% + 2px);transform:translate(-50%,-50%) rotate(225deg)}
.haiku-controller .card-retract{top:-12px;z-index:2}
.haiku-card:hover .card-play,.haiku-card:focus-within .card-play,.haiku-card.is-playing .card-play,.haiku-card:hover .card-popout,.haiku-card:focus-within .card-popout{opacity:1}
.haiku-card .card-play:disabled{visibility:hidden}
.card-message{position:relative;margin:4px 6px 0 0;font:14px/1.5 Georgia,serif;pointer-events:none}
.haiku-controller{position:relative;box-sizing:border-box;width:360px;display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;column-gap:5px;row-gap:0;padding:12px 8px 4px;background:#f4efdfcc;border:1px solid #cdc3aa66;color:#26251f;font:11px/1.3 Tahoma,Arial,sans-serif}
.haiku-controller button{color:inherit;font:inherit;border:1px solid transparent;background:#fff3;min-height:28px;padding:3px;cursor:pointer}
.haiku-controller .card-title{min-width:0;text-align:center;font:italic 13px/1.3 Georgia,serif}
.haiku-controller .card-source{grid-column:2;justify-self:center;background:none;border:0;font:9px/1.3 Tahoma,Arial,sans-serif;letter-spacing:1.2px;min-height:24px;padding:4px 10px;color:#6b6552}
.card-title-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.haiku-controller .card-title:disabled{opacity:1;cursor:inherit;background:none}
.card-title[aria-expanded]{text-decoration:underline dotted;text-underline-offset:3px}
.haiku-controller .card-note{position:absolute;top:100%;left:0;z-index:2;box-sizing:border-box;width:100%;max-height:180px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:10px;background:#fffcf3;border:1px solid #cdc3aa;box-shadow:2px 3px 0 #0003}
.haiku-card button:focus-visible,.haiku-controller button:focus-visible,.haiku-controller select:focus-visible{outline:2px dotted #26251f;outline-offset:2px}
.desktop-haiku-layer{position:absolute;right:26px;top:108px;width:360px}
.desktop-haiku-layer .haiku-controller{position:absolute;top:calc(100% + 10px);left:0}
.haiku-card.is-draggable,.haiku-controller.is-draggable{transform:translate(var(--drag-x,0),var(--drag-y,0))}
@media(hover:hover) and (pointer:fine){.haiku-card.is-draggable,.haiku-controller.is-draggable{cursor:grab;touch-action:none;user-select:none}.is-draggable.is-dragging{cursor:grabbing}}
@media(max-width:700px),(pointer:coarse){
  .desktop-haiku-layer{position:fixed;top:calc(var(--screen-top,0px) + 135px);right:12px;left:12px;width:min(360px,calc(100% - 24px));margin-inline:auto;max-height:calc(var(--screen-height,100dvh) - 179px);overflow:auto;scrollbar-width:thin;padding-bottom:12px}
  .desktop-haiku-layer .haiku-card{width:100%;min-height:168px;font-size:17px;padding-left:18px;padding-right:86px}
  .desktop-haiku-layer .haiku-controller{position:relative;left:auto!important;top:auto!important;width:100%;margin-top:10px}
  .desktop-haiku-layer .haiku-card.is-draggable,.desktop-haiku-layer .haiku-controller.is-draggable{transform:none!important}
  .desktop-haiku-layer .card-note{position:relative;grid-column:1/-1;top:auto;max-height:120px}
  .desktop-haiku-layer .card-play{width:36px;height:36px}
  .desktop-haiku-layer .card-prev,.desktop-haiku-layer .card-next,.desktop-haiku-layer .card-title{min-height:36px}
  .desktop-haiku-layer .card-source{min-height:30px}
  .haiku-card .card-popout,.haiku-controller .card-retract{width:44px;height:28px;min-height:28px;line-height:28px}
}
@media(max-height:530px) and (pointer:coarse){
  .desktop-haiku-layer{top:calc(var(--screen-top,0px) + 65px);max-height:calc(var(--screen-height,100dvh) - 109px)}
  .desktop-haiku-layer .haiku-card{min-height:140px;padding-top:28px;padding-bottom:16px;font-size:16px}
  .desktop-haiku-layer .card-icon{width:76px;height:86px}
}
@media(hover:none),(pointer:coarse){.haiku-card .card-play,.haiku-card .card-popout{opacity:1}}
@media(prefers-reduced-motion:reduce){.haiku-card .card-play,.haiku-card .card-popout{transition:none}}
.hd-cardhost .haiku-card,.hd-cardhost .haiku-controller{max-width:100%;margin:auto}
.haiku-controller .card-title:disabled,.haiku-card .card-icon:disabled{pointer-events:none}
.haiku-card[data-origin=shared]::before{content:'SHARED · ANONYMOUS';position:absolute;left:22px;top:10px;font:9px/1.2 Tahoma,Arial,sans-serif;letter-spacing:1px;color:#6b6552}

/* Arrival and reduced motion must retain the desktop object's drag position. */
.haiku-card.is-draggable.hx-arrival.is-hx-arriving{animation-name:hx-arrive-positioned-paper}
@keyframes hx-arrive-positioned-paper{
  0%{opacity:.15;transform:translate(var(--drag-x,0px),calc(var(--drag-y,0px) + 5px)) scale(.985);box-shadow:0 0 0 #0000}
  45%{opacity:1}
  100%{opacity:1;transform:translate(var(--drag-x,0px),var(--drag-y,0px))}
}
@media(prefers-reduced-motion:reduce){
  .haiku-card.is-draggable.hx-arrival{transform:translate(var(--drag-x,0px),var(--drag-y,0px))!important}
}

/* The module remains in page flow on touch even after desktop drag offsets existed. */
@media(max-width:700px),(pointer:coarse){.desktop-haiku-layer .haiku-card.is-draggable.hx-arrival{transform:none!important}}

/* Touch moves the complete module; individual desktop offsets stay intact. */
@media(max-width:700px),(pointer:coarse){
 .desktop-haiku-layer.is-draggable{left:var(--mobile-left,12px);top:var(--mobile-top,135px);right:auto;margin:0;width:min(360px,calc(100% - 24px));max-height:none;padding:0 0 14px;transform-origin:top left;transform:translate(var(--drag-x,0px),var(--drag-y,0px)) scale(var(--mobile-scale,1));touch-action:none;user-select:none;overflow:visible}
 .desktop-haiku-layer .haiku-card{touch-action:none}
 .desktop-haiku-layer .haiku-controller{touch-action:none}
 .desktop-haiku-layer .card-note{max-height:min(100px,20dvh);overflow:auto;touch-action:pan-y;user-select:text}
}