/* Phone selector of the atlas (public/atlas-sheet.js): a floating toolbar over the 3D canvas, a bottom sheet per list, and a
   compact result sheet. Everything here applies at 800 px and below; desktop keeps the side panels. Sheets stand above the
   bottom tab bar (--tabbar-space, public/app-shell.css). */
.atlas-tools,.atlas-sheets{display:none}
@media(max-width:800px),(max-width:900px) and (max-height:500px){
 .atlas-tools:not([hidden]){display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:10px;position:absolute;top:12px;right:10px;z-index:5;direction:rtl}
 .tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:56px;min-height:56px;padding:6px 2px;border:1px solid var(--line-2);border-radius:16px;background:#0d0d0fe6;color:var(--ink);font-size:.7rem;line-height:1.25;box-shadow:0 8px 20px -8px #000}
 .tool-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .atlas-tools.compact .tool-btn{width:48px;min-height:48px;padding:4px}
 .atlas-tools.compact .tool-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .tool-btn[aria-expanded="true"]{border-color:var(--orange);background:#2a1206f0;color:var(--orange-ink)}
 .tool-btn:focus-visible,.sheet-row:focus-visible,.sheet-chip:focus-visible,.sheet-close:focus-visible,.sheet-grab:focus-visible,.result-play:focus-visible,.result-hide:focus-visible,.result-list:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

 /* The canvas stays in view while the page scrolls, and is as tall as a phone can spare. */
 html.atlas-sheets-on .atlas-layout{grid-template-columns:1fr}
 html.atlas-sheets-on .atlas-layout>.side-panel:first-child{order:1}
 html.atlas-sheets-on .atlas-layout>.visual{order:0}
 html.atlas-sheets-on .atlas-layout>.side-panel:last-child{order:2}
 html.atlas-sheets-on .atlas-layout>.visual{position:sticky;top:65px;z-index:6;align-self:start}
 html.atlas-sheets-on .atlas-layout .visual-top,html.atlas-sheets-on .atlas-layout .visual-bottom,html.atlas-sheets-on .atlas-layout .model-info{display:none}
 html.atlas-sheets-on .atlas-canvas{height:min(62vh,520px);height:min(62svh,520px)}
 html.atlas-sheets-on .page-heading{padding-top:22px}
 html.atlas-sheets-on .page-heading h1{font-size:1.7rem;margin-bottom:6px}
 html.atlas-sheets-on .page-heading p{font-size:.88rem;line-height:1.7;margin-block:4px}

 .atlas-sheets{display:block}
 .atlas-sheet,.atlas-result{position:fixed;inset-inline:0;bottom:var(--tabbar-space,0px);z-index:30;display:flex;flex-direction:column;max-height:calc(100vh - var(--tabbar-space,0px) - 12px);max-height:calc(100dvh - var(--tabbar-space,0px) - 12px);background:#111113;border:1px solid var(--line-2);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -18px 50px -18px #000;padding-inline:16px;transition:height .2s ease}
 .atlas-sheet[hidden],.atlas-result[hidden]{display:none}
 .atlas-sheet:not([hidden]),.atlas-result:not([hidden]){animation:sheet-in .22s ease-out}
 .atlas-sheet.dragging{transition:none}
 @keyframes sheet-in{from{transform:translateY(28px);opacity:.5}}
 .sheet-grab{display:grid;place-items:center;width:100%;height:44px;margin:0;padding:0;border:0;background:none;touch-action:none;cursor:grab}
 .grabber{width:42px;height:5px;border-radius:9px;background:#ffffff40}
 .sheet-head,.result-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .sheet-head h2{margin:0;font-size:1.1rem}
 .sheet-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:999px;background:none;color:var(--ink);font-size:1.4rem;line-height:1}
 .sheet-search{display:grid;gap:10px;padding-block:10px 4px}
 .sheet-search[hidden]{display:none}
 .sheet-search input{width:100%;min-height:48px;padding:8px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--field);color:var(--ink)}
 .sheet-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
 .sheet-chip{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:none;color:var(--soft);font-size:.85rem;white-space:nowrap}
 .sheet-chip[aria-pressed="true"]{border-color:var(--orange);background:var(--orange);color:var(--on-orange);font-weight:700}
 .sheet-list{flex:1;min-height:0;padding:0 0 12px;overflow-y:auto;overscroll-behavior:contain}
 .sheet-ul{margin:0;padding:0;list-style:none}
 .sheet-group{margin:0;padding:12px 2px 4px;font-size:.78rem;font-weight:400;line-height:1.7;color:var(--dim)}
 .sheet-empty,.sheet-note{padding:16px 2px;color:var(--muted);font-size:.88rem}
 .sheet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:8px 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font-size:.95rem;text-align:start}
 .row-name{min-width:0;overflow-wrap:anywhere}
 .row-badge{flex:none;min-width:28px;padding:1px 9px;border-radius:999px;background:#e0b8481f;color:#f3d27a;font-size:.78rem;text-align:center}
 .sheet-row[aria-current="true"]{background:#e0b8481f}
 .switch{flex:none;position:relative;width:46px;height:26px;border-radius:999px;background:#ffffff26;transition:background .2s}
 .switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#f4f4f5;transition:inset-inline-start .2s}
 .sheet-switch[aria-checked="true"] .switch{background:var(--orange)}
 .sheet-switch[aria-checked="true"] .switch::after{inset-inline-start:23px}

 .atlas-result{min-height:96px;padding-bottom:12px}
 .result-text{display:flex;flex-direction:column;min-width:0}
 .result-title{font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
 .result-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.8rem;color:var(--muted);line-height:1.6}
 .result-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}
 .result-play,.result-hide,.result-list{min-height:44px;padding:0 18px;border-radius:999px;font-weight:700;font-size:.85rem}
 .result-play{border:0;background:#e0b848;color:#1a1303}
 .result-hide{border:1px solid var(--line-2);background:transparent;color:inherit}
 .result-play[hidden],.result-hide[hidden]{display:none}
 html.atlas-sheets-on .atlas-manage{display:none}
 .result-list{border:1px solid var(--line-2);background:none;color:var(--ink)}
 .result-body{flex:1;min-height:0;margin-top:12px;overflow-y:auto;overscroll-behavior:contain}
 .result-body[hidden]{display:none}
 .result-body .side-panel{padding:0;border:0;background:none}
}
/* A phone held sideways: the sheet is short, so the title row, search and chips are packed tighter. */
@media(max-height:500px) and (max-width:900px){
 .atlas-sheet .sheet-grab{height:30px}
 .atlas-sheet .sheet-head h2{font-size:1rem}
 .atlas-sheet .sheet-close{width:44px;height:44px;margin-block:-6px}
 .atlas-sheet .sheet-search{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-block:4px 0}
 .atlas-sheet .sheet-search input{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 .atlas-sheet,.atlas-result{transition:none;animation:none!important}
 .atlas-sheet:not([hidden]),.atlas-result:not([hidden]){animation:none}
 .switch,.switch::after{transition:none}
}

/* Hidden muscles and the offline atlas (public/atlas-manage.js): a collapsed block under the canvas on wide screens, the
   end of the layers sheet on phones. A hidden muscle is dimmed in the muscle list. */
.atlas-manage{margin-top:10px;border:1px solid var(--line-2);border-radius:14px;padding:6px 14px}
.atlas-manage>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;font-size:.9rem}
.manage-block{padding:10px 0;border-top:1px solid var(--line-2)}
.manage-block h3{margin:0 0 6px;font-size:.95rem}
.manage-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.manage-list li{display:flex;align-items:center;justify-content:space-between;gap:10px}
.manage-empty,.manage-note,.manage-status{margin:4px 0;color:var(--muted);font-size:.85rem;line-height:1.7}
.manage-actions{display:flex;gap:8px;flex-wrap:wrap}
.manage-block .pill{min-height:44px}
.sheet-manage{padding:6px 2px 24px}
.hide-muscle{margin:6px 0}
.muscle-item.is-hidden{opacity:.55;text-decoration:line-through}