/* Device guidance shares the workbench's palette, hard edges, and page guides. */
#device-panel{position:relative}
.device-welcome{position:fixed;right:max(28px,calc((100vw - 1280px)/2 + 16px));top:114px;width:292px;max-width:calc(100vw - 32px);display:flex;gap:12px;padding:18px 18px 16px;background:var(--lavender);color:var(--on-accent,#252628);border:2px solid var(--border);border-radius:var(--radius-panel);box-shadow:5px 6px 0 #000;transform:rotate(-3deg);transform-origin:75% 15%;isolation:isolate;z-index:100}
.device-welcome[hidden]{display:none}
@media(max-width:1000px){.device-welcome{display:none}}
.device-welcome-sticker{display:grid;place-items:center;flex:none;width:34px;height:34px;border:2px solid var(--border);border-radius:50%;background:color-mix(in srgb,var(--lavender),white 50%);transform:rotate(9deg)}
.device-welcome-sticker .ui-icon{width:24px;height:24px;stroke-width:1.8}
.device-welcome strong{display:block;font-family:'Space Grotesk',system-ui,sans-serif;font-size:18px;line-height:1.2}
#device-panel .device-welcome p{margin:8px 0 9px;font-size:12px;line-height:1.5;color:inherit}
.device-welcome button{display:inline-flex;gap:8px;padding:0;min-height:24px;font-size:11px;line-height:1.4;border:0;border-radius:0;background:none!important;box-shadow:none;color:inherit!important;text-decoration:underline;text-underline-offset:3px;text-align:left}
.device-welcome button:hover{transform:none;text-decoration-thickness:2px}
.device-welcome-enter{animation:device-welcome-pop 780ms cubic-bezier(.2,.8,.25,1) both}
@keyframes device-welcome-pop{0%{opacity:0;transform:translateY(-32px) rotate(12deg) scale(.6)}55%{opacity:1;transform:translateY(4px) rotate(-7deg) scale(1.05)}78%{transform:translateY(-2px) rotate(-1deg) scale(.99)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}

#device-panel .device-help .guide-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
#device-panel .device-help .guide-note{font-size:12px;line-height:1.7}
#device-panel .device-operation-status{margin:24px 0 0;padding:16px 20px;background:var(--panel);border:2px solid var(--border);border-left:8px solid var(--lavender);border-radius:var(--radius-inset)}
#device-panel .device-operation-status h2{margin:0 0 5px;font-size:17px;font-weight:700}
#device-panel .device-operation-status p{margin:0;font-size:13px;line-height:1.6}
#device-panel #device-log[hidden]{display:none}
/* Native file windows are OS-owned; the waiting card follows both site themes. */
.picker-notice-card{border-radius:var(--radius-dialog);padding:28px;background:var(--panel);color:var(--ink)}
.picker-notice h2{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.04em}
.picker-format-rows>div{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.picker-format-rows code,.picker-archive h3 code{border:1px solid var(--border);border-radius:7px;background:var(--blue);color:var(--on-accent,#252628);font-weight:700;box-shadow:2px 2px 0 #000}
.picker-elf dt code{background:var(--lavender);color:var(--on-accent,#252628)}
.picker-elf dt small{color:var(--muted)}
.picker-archive{border:2px solid var(--border);border-radius:var(--radius-panel);background:color-mix(in srgb,var(--mint) 14%,var(--panel))}
.picker-archive-heading>span{color:var(--ink)}
.picker-archive h3 code{background:var(--mint)}
.picker-capabilities>div{border:1px solid var(--border);background:var(--panel);color:var(--ink);border-radius:var(--radius-inset)}
.picker-capabilities>div:nth-child(2){background:color-mix(in srgb,var(--blue) 18%,var(--panel))}
.picker-capabilities>div:nth-child(3){background:color-mix(in srgb,var(--lavender) 18%,var(--panel))}
.picker-capabilities .ui-icon{width:30px;height:30px}
@media(max-width:850px){
 #device-panel .device-help .guide-steps{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:500px){.picker-notice-card{padding:20px}.picker-notice h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.device-welcome-enter{animation:none}}

/* Device folders share the Play gallery's cover grid and quiet category rules. */
#device-games>.panel-heading{flex-wrap:wrap;gap:12px}
#device-games>.panel-heading h2{margin:0}
#device-scan-summary{margin-left:auto;font-size:12px}
#device-games #device-edit{margin:0;font-size:12px}
.device-collection{container-type:inline-size;--tile-step:144px;margin-top:24px}
.device-collection-cart{margin-bottom:24px}
.device-collection-cart>h3{margin:0 0 12px;font-size:18px;line-height:24px}
.device-collection .arcade-grid{grid-template-columns:repeat(auto-fill,var(--tile-step));gap:0;justify-content:start}
.device-collection .category-shelf>.arcade-grid{grid-template-columns:repeat(min(var(--category-count),var(--category-columns)),var(--tile-step))}
.device-collection .arcade-card{width:var(--tile-step);height:var(--tile-step);max-width:none;aspect-ratio:1}
.device-collection .arcade-card:is(:hover,:focus-within){transform:scale(1)}
.device-collection .arcade-cover{inset:6px;width:calc(var(--tile-step) - 12px);height:calc(var(--tile-step) - 12px);max-width:none;cursor:pointer}
.device-collection .arcade-cover img{width:100%;height:100%;max-width:100%;max-height:100%}
.device-collection .device-cover-name{display:grid;place-items:center;padding:12px;font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;text-align:center;background:var(--yellow);color:var(--on-accent)}
.device-category-link{display:block;min-width:0;min-height:24px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:0;box-shadow:none;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.device-category-link:hover{transform:none;background:none;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
.device-category-link:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}
.device-collection .device-folder-empty{margin:0;padding:18px 6px;min-height:144px;font-size:12px}
@media(max-width:550px){
 .device-collection .arcade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .device-collection .category-shelf>.arcade-grid{grid-template-columns:repeat(min(var(--category-count),var(--category-columns)),minmax(0,1fr))}
 .device-collection .arcade-card{width:100%;height:auto;aspect-ratio:1}
 .device-collection .arcade-cover{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
 .device-collection .device-cover-name{font-size:11px;padding:6px}
}

/* Matching compact tools for the working cart and the device collection. */
#builder-panel .contents-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
#builder-panel .contents-add{display:contents}
#builder-panel .contents-tools :is(#cart-details,#new-folder,label.button){display:flex;flex-direction:column;justify-content:center;gap:5px;width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:1;padding:5px;margin:0;border-radius:var(--radius-inset);font-size:11px;line-height:1.2}
#builder-panel .contents-tools .ui-icon{width:24px;height:24px}
#device-cart-panel .device-cart-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
#device-cart-panel .device-cart-tools>button{aspect-ratio:1;width:100%;min-width:0;min-height:0;padding:10px;margin:0;border-radius:var(--radius-inset);background:var(--mint);color:var(--on-accent)}
#device-cart-panel .device-cart-tools>button:hover{background:color-mix(in srgb,var(--mint),white 25%)}
#device-cart-panel .device-cart-tools .ui-icon{width:24px;height:24px}
#device-cart-panel #backup-device{background:var(--blue)}
#device-cart-panel :is(#rescan-device,#builder-deep){background:var(--lavender)}
#device-cart-panel :is(#rescan-device,#builder-deep):hover{background:color-mix(in srgb,var(--lavender),white 25%)}
.device-exit-guide{display:flex;align-items:center;gap:12px;margin:18px 0;padding:12px;background:color-mix(in srgb,var(--mint) 10%,var(--panel));border:1px solid var(--line);border-radius:var(--radius-inset)}
.device-exit-diagram{display:block;flex:0 1 250px;width:250px;min-width:180px;height:auto}
.device-exit-guide figcaption{flex:1;font-size:13px;line-height:1.6}
.device-exit-guide figcaption>strong:first-child{display:block;margin-bottom:6px;font-size:15px}
@media(max-width:500px){.device-exit-guide{flex-direction:column;gap:4px}.device-exit-diagram{flex:none;max-width:100%;width:230px}.device-exit-guide figcaption{text-align:center}}
#device-pending,#device-save-help{font-size:12px;line-height:1.5;margin:10px 0 14px}
#device-save-help{margin-top:10px}
#device-panel .device-scan-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#device-panel .device-scan-choice .labeled-action{display:flex;flex-direction:column;align-items:center;gap:5px}
#device-panel .device-scan-choice button{display:grid;place-items:center;width:50px;height:50px;min-width:50px;min-height:50px;padding:11px;margin:0;border:2px solid var(--border);border-radius:50%;box-shadow:4px 4px 0 #000;color:var(--on-accent)}
#device-panel .device-scan-choice button .ui-icon{width:24px;height:24px}
#device-panel .device-scan-choice button:hover:not(:disabled){transform:translateY(-2px);box-shadow:5px 6px 0 #000}
#device-panel .device-scan-choice button:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
#device-panel .device-scan-choice .action-caption{font-size:12px;font-weight:700;line-height:1.35;color:var(--ink);text-align:center;min-height:2.7em}
#device-panel #device-backup{background:var(--lavender);color:var(--on-accent)}
#device-panel #device-backup:hover{background:color-mix(in srgb,var(--lavender) 75%,var(--panel))}
#device-cart-placeholder .labeled-action{display:flex;flex-direction:column;align-items:center;gap:10px}
#device-cart-placeholder #builder-scan{display:grid;place-items:center;width:80px;height:80px;min-height:80px;padding:18px;margin:0;border:2px solid var(--border);border-radius:var(--radius-panel);background:var(--lavender);color:var(--on-accent);box-shadow:4px 4px 0 #000}
#device-cart-placeholder #builder-scan .ui-icon{width:40px;height:40px}
#device-cart-placeholder #builder-scan:hover:not(:disabled){background:color-mix(in srgb,var(--lavender),white 25%);transform:translateY(-2px)}
#device-cart-placeholder #builder-scan:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
#device-cart-placeholder .action-caption{font-size:12px;font-weight:700;line-height:1.35;color:var(--ink)}
#device-cart-placeholder p{margin:16px 0 0}

/* Device rows use the same quiet list treatment and folder disclosure as Contents. */
#device-cart-list{padding:4px 4px 8px;margin:8px -6px;overflow-x:hidden}
#device-cart-list .folder-line{margin:2px 0;min-width:0}
#device-cart-list .device-folder-children .device-folder-children{padding-left:14px}
#device-cart-list .device-game-row{display:block;margin:0 0 2px}
#device-cart-list :is(.game-row,.folder-row){display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;width:100%;padding:4px 7px;margin:0;border:0;border-radius:8px;box-shadow:none;background:transparent;color:var(--ink);font-size:12px;line-height:1.35;justify-content:flex-start;text-align:left}
#device-cart-list .folder-row{padding-left:2px;font-weight:700}
#device-cart-list :is(.game-row,.folder-row) span{min-width:0;overflow-wrap:anywhere}
#device-cart-list :is(.game-row,.folder-row) img{width:36px;height:36px;flex:none;object-fit:contain;image-rendering:auto;border-radius:4px}
#device-cart-list :is(.game-row,.folder-row):hover{background:var(--sage);color:var(--on-accent)}
#device-cart-list :is(.game-row,.folder-row).selected{background:var(--yellow);color:var(--on-accent)}
#device-cart-list :is(.game-row,.folder-row):active{transform:translateY(3px)}
#device-cart-list .folder-toggle{display:grid;place-items:center;flex:none;width:28px;height:28px;min-height:28px;padding:5px;margin:0 6px 0 0;border:2px solid var(--border);border-radius:50%;box-shadow:2px 2px 0 #000;background:var(--panel);color:var(--ink)}
#device-cart-list .folder-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:rotate .16s}
#device-cart-list .folder-toggle[aria-expanded=true] svg{rotate:90deg}
#device-cart-list .folder-toggle:hover{background:var(--mint);color:var(--on-accent);transform:translateY(-1px)}
#device-cart-list .folder-toggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
@media(max-width:460px){#device-panel .device-scan-actions{gap:10px}#device-panel .device-scan-choice .action-caption{font-size:11px}#device-panel .device-scan-choice p{margin-top:8px;font-size:11px}}

/* The status drawer extends directly from the header, including during reveal. */
.device-header-dock .device-task-slot{overflow:clip;padding:0 6px 6px 0;margin:0 -6px -6px 0}
.device-header-dock #device-task{border:2px solid var(--border);border-top:0;border-radius:0 0 var(--radius-panel) var(--radius-panel);box-shadow:4px 0 0 #000,4px 4px 0 #000}
.device-header-dock #device-task-details{padding:4px 0;min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.device-header-dock #device-task-details:hover{transform:none;text-decoration-thickness:2px}
.device-header-dock #device-connect{grid-column:1/-1}
.device-dialog-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.device-dialog-actions button{margin:0}
.device-consent{display:flex;align-items:center;gap:10px;margin-top:18px;cursor:pointer}
.device-consent input{cursor:pointer;flex:none}
#device-transfer-details{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:28px}
#device-transfer-details h2{padding-right:36px}
#device-transfer-details #device-activity{margin:20px 0}
#device-transfer-details h3{font-size:16px}
.transfer-metrics{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
.transfer-metrics>div:first-child{grid-column:1/-1}
.transfer-metrics dt{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.transfer-metrics dd{margin:0;font-size:14px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.transfer-metrics progress{display:block;width:100%;margin-top:10px;accent-color:var(--lavender)}
#device-transfer-details #device-log{max-height:220px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;padding:12px;background:var(--bg);border-radius:var(--radius-inset)}
@media(max-width:550px){#device-transfer-details{padding:20px}.transfer-metrics{grid-template-columns:1fr}.device-header-dock #device-task{grid-template-columns:1fr auto}}

/* Connection status, actions, and preferences each get one compact row. */
#connection-menu .connection-panel{width:320px;max-width:calc(100vw - 32px);padding:16px}
#connection-menu .connection-panel>h2{margin:0;padding-right:42px;font-size:16px;line-height:22px}
#connection-menu #connection-message{margin:3px 40px 14px 0;font-size:12px;line-height:1.45}
#connection-menu .connection-actions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:10px;margin:0}
#connection-menu .connection-actions>*{display:flex;align-items:center;justify-content:center;min-height:38px;margin:0;padding:7px 10px;font-size:12px;text-align:center}
#connection-menu .connection-preferences{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:11px}
#connection-menu .connection-toggle{margin:0;gap:7px;min-height:34px;font-size:11px;white-space:nowrap}
#connection-menu .connection-forget{min-height:34px;margin:0;padding:0;font-size:11px;white-space:nowrap}
#connection-menu .connection-forget:hover{transform:none}
@media(max-width:760px){
 #connection-menu .connection-actions>*{min-height:44px}
 #connection-menu :is(.connection-toggle,.connection-forget){min-height:44px}
}

#device-edit{background:var(--mint);color:var(--on-accent)}