/* Canonical popup surfaces. Legacy modal and theme-palette overrides are removed. */
.modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(0,0,0,.42)}
.modal-backdrop.hidden{display:none!important}
.modal{width:min(620px,100%);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--panel);color:var(--text);box-shadow:var(--ui-shadow,0 12px 40px #0003);scrollbar-gutter:stable;overscroll-behavior:contain}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.modal-title{font-size:18px;font-weight:600;line-height:1.4;letter-spacing:-.015em}
@media(max-width:480px){.modal{padding:16px}.modal-head{gap:12px}}
@media(max-height:480px){.modal-backdrop{align-items:flex-start}}
/* Shared Windows 11-inspired surfaces and spacing, after legacy styles. */
:root{--ui-gap:12px;--ui-card-pad:16px;--ui-radius:8px;--radius-control:6px;--radius-panel:8px;--radius-cell:6px}
body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;line-height:1.45}
button,input,select,textarea{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:not(.drive):not(.toggle):not(.info-button):not(.context-help-button):not(.v02-brand),input,select,textarea{border-radius:6px!important}
button{font-weight:600}
.v02-header{padding:8px 6px;gap:12px}.v02-header h1{font-weight:600;letter-spacing:-.025em}.v02-eyebrow{font-weight:600;letter-spacing:.12em}.v02-pill{font-weight:600}.v02-version{font-weight:500}
.mobile-nav-menu{padding:8px;border:1px solid var(--line);border-radius:8px!important;background:var(--panel);box-shadow:0 8px 30px #0003}.mobile-nav-menu button{font-weight:500;justify-content:space-between;min-height:44px;padding:10px 12px}
.archive-head{padding:12px 16px 8px;gap:12px}.archive-head h2{font-weight:600;letter-spacing:-.02em}.archive-head small{line-height:1.5;margin-top:6px}
.archive-body{padding:8px 16px 16px}.archive-button{padding:9px 14px;font-weight:600}
.library-title-list{border:0;border-radius:0;background:transparent;gap:8px;padding:2px 3px 8px}.library-title-row{border:1px solid var(--line)!important;border-radius:8px!important;padding:14px 16px;gap:14px;background:var(--panel);font-weight:600}.library-row-info{gap:6px}.library-row-info small{line-height:1.5}.library-title-row:hover{background:var(--panel2)}
.library-search-row{gap:10px}.library-page{gap:12px!important}.library-detail-grid{gap:12px}.library-detail-grid>div{padding:14px;border-radius:8px}.library-detail-grid strong{line-height:1.4;margin-top:6px}
.download-form-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.download-form-heading h3{margin:0;font-size:16px;font-weight:600}.download-job{padding:16px;border-radius:8px}.download-job-head{gap:16px}.download-job-copy strong{font-weight:600;line-height:1.45}.download-job-copy small{margin-top:8px;line-height:1.5}.download-job-foot{gap:12px;margin-top:4px}.download-job-actions{gap:8px}.download-state{font-weight:600}.download-preview-head{gap:6px}
#archiveDownloads .download-form{padding:16px;gap:16px;border-radius:8px}.download-options{gap:12px}
#archiveTransfers.active{gap:16px}.intake-section,.recovery-section,.mover-shares-section{min-width:0}.recovery-section,#archiveTransfers>.intake-section,.mover-shares-section{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.transfer-list{gap:12px}.transfer-card{display:grid;gap:10px;padding:16px;border-radius:8px;background:var(--panel)}.transfer-card .transfer-track{margin:0}.transfer-card .transfer-top{gap:12px}.transfer-card strong{font-weight:600;line-height:1.45}.transfer-card small{line-height:1.5}.transfer-card p{margin:0;line-height:1.5}.transfer-card>.archive-button{justify-self:start}.transfer-top small{margin-top:6px}
#transferList>section{display:grid;gap:12px}#transferList>section>h3{margin:8px 0 0;font-size:16px;font-weight:600}.archive-library-summary{gap:12px;line-height:1.5}.share-actions{gap:10px}.share-card,.node-card{padding:16px!important;border-radius:8px!important}.share-path{line-height:1.5}.stats-grid{gap:12px!important}.kpis{gap:12px!important}.kpi{padding:12px!important}.manager-refresh{gap:12px;flex-wrap:wrap}.manager-refresh strong{line-height:1.45}
.archive-detail-title{gap:12px}.archive-detail-title strong{font-weight:600}.archive-tabs{gap:10px;overflow-x:auto;flex-shrink:0}.archive-tabs button{font-weight:600;white-space:nowrap}.archive-photo-section h3{font-weight:600;letter-spacing:.05em}.archive-slot{border-radius:8px}.archive-save-row{gap:12px}.archive-image-actions{gap:8px}
.modal p{line-height:1.6}.modal h2{margin:0;font-size:20px;font-weight:600}.modal .note{margin:0!important}.modal .note+.note{margin-top:12px!important}#genericModalBody{display:grid;gap:14px}.detail-grid,.drive-popup-info{gap:12px!important}.detail{padding:12px!important}.drive-popup-actions{gap:12px!important}.popup-secondary-actions{gap:12px!important}
/* Dynamic error/state boxes keep their content and remain visible. */
.note{padding:12px!important;border-radius:8px!important;line-height:1.55!important;overflow-wrap:anywhere}.note.bad,.warning-box{border-left:3px solid var(--bad)!important}
/* Resolve the legacy zero horizontal padding visible in navigation cards. */
#settingsContent .settings-nav-row{margin:0!important;padding:16px!important;border:1px solid var(--line)!important;border-radius:8px!important;gap:16px!important;min-height:76px}
#settingsContent .settings-page.active{gap:16px!important}#settingsContent .settings-group{display:grid;gap:12px;padding:16px!important;border-radius:8px!important}
#settingsContent .settings-group h3{margin:0!important;font-size:15px;line-height:1.4}#settingsContent .settings-group-heading{margin:0!important;min-height:24px}
#settingsContent .settings-nav-row+.settings-nav-row{margin-top:0}#settingsContent .setting-row{padding:12px 0!important;gap:16px!important}.setting-copy{display:grid;gap:6px}.setting-name,.setting-desc{line-height:1.5!important;margin:0!important}.settings-chevron{flex:none}
#settingsContent .field+.field{margin-top:0!important}#settingsContent .field{gap:8px!important}#settingsContent .field label{line-height:1.5}#settingsContent .settings-page-intro{line-height:1.5;margin:0!important;padding:0!important}.settings-page-intro strong,.settings-page-intro small{line-height:1.5}
#settingsContent .provider-list,.hardware-node-list{display:grid;gap:12px}#settingsContent .provider-card,#settingsContent .hardware-node-card{padding:16px;border-radius:8px!important}.provider-card strong,.provider-card small{line-height:1.5}.drive-map-card{padding:16px!important;border-radius:8px!important}.drive-map-detail{margin-top:10px}.drive-capability-settings{margin-top:12px}.drive-map-actions{gap:10px}.update-line{padding:12px;gap:14px}.update-line small{line-height:1.5;margin-top:6px}
/* Dashboard status colours remain recognisable with calmer surfaces. */
.drive{border-radius:8px!important;box-shadow:none!important;font-weight:500}
html[data-theme] .drive.empty{background:color-mix(in srgb,var(--accent) 9%,var(--panel))!important;color:var(--text)!important;border-color:color-mix(in srgb,var(--accent) 40%,var(--line))!important}
html[data-theme] .drive.tray-open{background:color-mix(in srgb,var(--warn) 12%,var(--panel))!important;color:var(--text)!important;border-color:var(--warn)!important}
html[data-theme] .drive.disc-detected,html[data-theme] .drive.waiting{background:color-mix(in srgb,var(--accent) 15%,var(--panel))!important;color:var(--text)!important;border-color:var(--accent)!important}
html[data-theme] .drive.ripping{background:color-mix(in srgb,var(--warn) 16%,var(--panel))!important;color:var(--text)!important;border-color:var(--warn)!important}
html[data-theme] .drive.complete{background:color-mix(in srgb,var(--ok) 12%,var(--panel))!important;color:var(--text)!important;border-color:var(--ok)!important}
html[data-theme] .drive.error{background:color-mix(in srgb,var(--bad) 12%,var(--panel))!important;color:var(--text)!important;border-color:var(--bad)!important}
.drive-id,.drive-title{font-weight:600!important}.drive-state-rail{background:color-mix(in srgb,var(--text) 5%,transparent)}.drive-sub{line-height:1.3!important}
/* Explicit contextual help does not share the live-message .note selector. */
.context-help{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:12px;line-height:1.5}.context-help>span{min-width:0;overflow-wrap:anywhere}.context-help-button{display:inline-grid;place-items:center;flex:0 0 28px;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border:0!important;border-radius:50%!important;background:transparent;color:var(--accent);font-size:20px;line-height:1;cursor:pointer}.context-help-button:hover{background:var(--panel2)}
#settingsContent button.context-help-button{min-width:28px!important;min-height:28px!important;width:28px!important;height:28px!important;padding:0!important;font-size:20px!important}
#infoModal{z-index:2400}.info-modal{width:min(560px,100%)}#infoBody{line-height:1.65;overflow-wrap:anywhere}#infoBody p{margin:0 0 12px}#infoBody code{white-space:normal;overflow-wrap:anywhere}
@media(max-width:480px){.archive-head{padding:8px 10px}.archive-body{padding:8px 10px 12px}.recovery-section,#archiveTransfers>.intake-section,.mover-shares-section{padding:12px}.transfer-card,.download-job{padding:14px}#settingsContent .settings-nav-row{padding:14px!important}.library-title-row{padding:12px 14px}}
@media(max-height:480px){.archive-head{padding-top:4px;padding-bottom:4px}.archive-body{padding-top:4px;padding-bottom:6px}.v02-header{padding-top:2px;padding-bottom:2px}}
/* Secondary copy should read as regular text, rather than inheriting button weight. */
#settingsContent .setting-desc,.settings-home-card small,.library-title-row small{font-weight:400!important}
#archiveDownloads .download-form input,#archiveDownloads .download-form select{font-weight:400}
#archiveDownloads .download-form label{font-weight:600}
/* Windows-style notifications occupy a lower corner, away from page headings. */
.toast{left:auto;right:16px;top:auto;bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100% - 32px);transform:translateY(10px);border-radius:8px!important;padding:12px 16px;font-weight:400;line-height:1.5;text-align:left;box-shadow:0 6px 24px #0003}
.toast.show{transform:translateY(0)}
body:has(#overlay:not(.hidden)) .toast{bottom:calc(110px + env(safe-area-inset-bottom))}

/* Reserve a slim progress lane so search feedback never shifts the collection. */
.library-progress-track{height:4px;flex:none}
#libraryProgress{display:block;width:100%;height:4px;accent-color:var(--accent,#2563eb);border:0;border-radius:4px}
#libraryProgress[hidden]{display:none}
#libraryResults[aria-busy="true"]{opacity:.65;cursor:progress}

/* Shared finish: controls, quieter typography and predictable spacing everywhere. */
:root{--ui-control-height:40px;--ui-body-size:14px;--ui-shadow:0 12px 40px #0003}
:where(.archive-overlay,.modal,.settings-window,.confirmation-dialog){font-size:var(--ui-body-size);line-height:1.5}
:where(.modal,.archive-body) :where(h3,h4){font-weight:600;line-height:1.4;margin:0 0 12px}
:where(.modal,.archive-body) :where(p,small,label,strong){overflow-wrap:anywhere}
:where(.primary,.secondary,.close-btn,.archive-button,.eject-btn,.close-tray-btn,.cancel-btn,.retry-btn){min-height:var(--ui-control-height);padding:9px 14px;font-size:14px;font-weight:600!important;line-height:1.4;white-space:normal}
:where(.modal,.archive-overlay) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){min-width:0;max-width:100%;padding:10px 12px;border:1px solid var(--line);background:var(--field);color:var(--text);font:inherit;line-height:1.5}
:where(.modal,.archive-overlay) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){min-height:var(--ui-control-height)}
:where(input,textarea)::placeholder{color:var(--muted);opacity:1}
:where(input[type=checkbox],input[type=radio],progress){accent-color:var(--accent)}
:where(button,a.archive-button):disabled{opacity:.5;cursor:not-allowed}
@media(hover:hover){:where(.secondary,.close-btn,.archive-button):not(:disabled):hover{background:var(--panel2);border-color:var(--muted)}}
:where(.modal-actions,.actions,.tray-pair,.upc-row,.update-actions,.archive-save-row){gap:12px!important}
:where(.modal-head,.archive-detail-title)>:first-child{min-width:0;overflow-wrap:anywhere}
:where(.modal-head,.archive-detail-title)>.close-btn{flex:none}

.modal .intake-section{margin-top:16px}.modal .intake-section label{margin:12px 0 6px;font-size:13px;font-weight:500}
.modal .intake-section .row{gap:12px}.modal .intake-section .row>div{min-width:0}
.modal .detail .k,.modal .kpi .k{font-size:12px;line-height:1.5;font-weight:400}.modal .detail .v,.modal .kpi .v{margin-top:6px;font-weight:600;line-height:1.45}
.library-more-modal{display:flex;flex-direction:column;gap:12px}.library-more-modal .modal-head{margin-bottom:0!important}.library-bulk{display:grid;gap:12px}.library-bulk textarea{width:100%;min-height:120px;resize:vertical}
#loginForm{display:grid;gap:12px;margin-top:16px}.auth-modal .modal-title{margin-bottom:12px}.pin-keypad{gap:12px}.pin-keypad button{font-weight:500}
.disc-label-info,.node-refresh,.update-result{padding:12px;line-height:1.5;border-radius:8px}.node-refresh{gap:6px}.node-refresh strong,.update-badge,.update-system-version{font-weight:600}
.stats-grid>*,.stats-overview,.stats-card,.kpis{min-width:0}.stats-grid .node-card,.stats-overview{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:16px}.stats-grid .kpi .k,.stats-overview .kpi .k{font-size:12px;line-height:1.5}.stats-grid .kpi .v,.stats-overview .kpi .v{font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.download-preview{padding:14px;border-radius:8px;background:var(--panel2)}.download-preview-entries{gap:8px;padding-top:12px}.download-preview-entries label{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.download-job-head,.download-job-foot{flex-wrap:wrap}.download-job-actions{flex-wrap:wrap}.download-state-completed{color:var(--ok)}.download-state-failed{color:var(--bad)}
.archive-info-note,.scan-status,.archive-save-state{line-height:1.5}.archive-textarea{border:1px solid var(--line);border-radius:8px;padding:14px;font:inherit;line-height:1.6}
/* Confirmations use the same surface, with a separate, evenly spaced action area. */
.confirmation-dialog{width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:var(--ui-shadow);overflow:auto;overscroll-behavior:contain}
.confirmation-dialog::backdrop{background:rgba(0,0,0,.42)}
.confirmation-content{padding:24px}.confirmation-content h2{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.4}.confirmation-content p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.confirmation-actions{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--line);background:var(--panel2)}.confirmation-actions button{flex:1;min-width:0}
@media(max-width:480px){.confirmation-content{padding:20px}.confirmation-actions{padding:16px 20px}.modal .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.download-job-foot{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}

/* Every main-menu destination lives inside the shared application frame. */
.app>#overlay{position:relative;inset:auto;z-index:auto;flex:1;min-height:0;overflow:hidden;border:0}
.app>#overlay .settings-window{height:100%;min-height:0}
.mobile-nav-menu button.current-page{background:var(--panel2);color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
.app>#overlay .settings-window-head{background:transparent}

.copy-path-field{width:100%;font-family:ui-monospace,Consolas,monospace!important}
/* Media detail editing and status colours follow the selected theme too. */
.archive-textarea{background:var(--field);color:var(--text)}
.archive-tabs button.active{color:var(--panel)}
.archive-ok{color:var(--ok)}.archive-missing{color:var(--bad)}
.archive-slot:not(.has){background:var(--panel2)}
/* Durable action feedback is announced without moving keyboard focus. */
.action-state{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;line-height:1.5;overflow-wrap:anywhere;background:var(--panel)}
.action-state[hidden]{display:none}.action-state[data-phase="pending"]{border-left:3px solid var(--accent)}
[data-phase="error"]{color:var(--bad)!important}[data-phase="success"]{color:var(--ok)}
button[aria-busy="true"]{cursor:progress}
/* Use contrasting ink on semantic button surfaces in all three themes. */
:root{--accent-ink:#0d1117}html[data-theme="light"]{--accent-ink:#fff}
@media(prefers-color-scheme:light){html[data-theme="system"]{--accent-ink:#fff}}
.primary,.close-tray-btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cancel-btn,.danger{background:var(--bad);border-color:var(--bad);color:var(--accent-ink)}
.retry-btn{background:var(--ok);border-color:var(--ok);color:var(--accent-ink)}
.eject-btn{background:var(--warn);border-color:var(--warn);color:var(--accent-ink)}
html[data-theme] .drive.ripping .progress-pct,html[data-theme] .drive.complete .progress-pct{color:var(--text)!important}
.archive-detail-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Keep an action's outcome visible even when the transfer list is long. */
#archiveTransfers>div:first-child:has(#moverActionState:not([hidden])){position:sticky;top:0;z-index:2;background:var(--bg);padding:6px 0}
#moverActionState,#downloadActionState{max-height:24dvh;overflow:auto}
#downloadActionState:not([hidden]){position:sticky;top:0;z-index:2}
.action-state:focus-visible{outline:2px solid var(--accent);outline-offset:2px}