/* File handoffs use the same cards and small visual details as the color study. */
:root{--transfer-shadow:var(--ink)}
body[data-phase=compose][data-compose-kind=optical]{height:auto;min-height:100%;overflow:auto}
body[data-phase=compose][data-compose-kind=optical] .app-shell{height:auto;min-height:100dvh}
body[data-phase=compose][data-compose-kind=optical] .main-content{flex:1 0 auto}
body[data-phase=compose][data-compose-kind=optical] .compose-view{height:auto;max-height:none}
#optical-panel{width:100%;min-width:0}
body.optical-reader-focus .site-header{visibility:hidden;pointer-events:none}
#optical-panel iframe{display:block;width:100%;min-height:460px;border:0;color-scheme:normal}
.file-transfer-modes{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);width:100%;min-width:0}
.file-transfer-modes a{display:flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:15px 12px;color:var(--ink);background:transparent;text-decoration:none;font:500 23px/1.3 var(--font-display)}
.file-transfer-modes a+a{border-left:1px solid var(--ink)}
.file-transfer-modes a>span{font:11px var(--font-body);opacity:.7}
.file-transfer-modes a:hover,.file-transfer-modes a[aria-pressed=true]{background:var(--surface-soft)}
.file-transfer-modes a[aria-pressed=true]{box-shadow:inset 0 -3px 0 var(--accent,var(--ink))}
.file-transfer-modes a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:600px){.file-transfer-modes a{font-size:20px;gap:9px;padding:13px 7px}.file-transfer-modes a>span{font-size:9px}}
:root[data-contrast=normal][data-theme=light]{--transfer-shadow:#1c2541}
:root[data-contrast=normal][data-theme=dark]{--transfer-shadow:#080d19}
.compose-view[data-kind=upload] #compose-detail{display:none}
.compose-view[data-kind=upload] .view-intro{margin-bottom:0}
.compose-view[data-kind=upload] .compose-body{gap:24px}
.upload-panel{gap:24px}
.upload-dropzone{position:relative;display:block;isolation:isolate;padding:30px 32px 24px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--transfer-shadow);overflow:hidden}
:root[data-contrast=normal] .upload-dropzone{border-color:var(--ink)}
.upload-dropzone::after{content:'';position:absolute;z-index:-1;inset:0 0 0 auto;width:28%;background-image:radial-gradient(var(--ink) .7px,transparent .9px);background-size:9px 9px;opacity:.12;pointer-events:none}
.upload-drop-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.transfer-kicker{display:flex;align-items:center;gap:10px;font:14px/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.transfer-kicker>span{flex:none;width:7px;height:7px;margin-right:7px;background:var(--accent,var(--ink));box-shadow:8px 0 0 var(--ink)}
.upload-label{border:1px solid var(--ink);padding:4px 9px;background:var(--surface);font:14px/1.4 var(--font-body)}
.upload-drop-body{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:24px}
.upload-stamp{display:grid;place-items:center;width:62px;height:68px;background:var(--surface);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--transfer-shadow);transform:rotate(-5deg)}
.upload-stamp .upload-glyph{width:36px;height:36px;align-self:center}
.upload-copy h2{font-size:clamp(27px,2.6vw,36px);line-height:1.35;margin-bottom:12px}
.upload-copy p{max-width:48ch;line-height:1.8}
#upload-choose{grid-column:auto;justify-self:auto;min-height:49px;font-size:19px;padding:14px 18px;box-shadow:4px 4px 0 var(--transfer-shadow)}
#upload-choose:active{box-shadow:1px 1px 0 var(--transfer-shadow)}
.upload-drop-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin:28px 0 0 88px;padding-top:15px;border-top:1px dashed var(--line-soft,var(--ink));font:14px/1.6 var(--font-body)}
.upload-drop-foot>p:first-child{color:var(--ink)}
.upload-limits{grid-column:auto;color:var(--muted)}
.attachment-file-badge{display:none}
.compose-view[data-kind=upload] .attachment-drafts{flex-wrap:wrap;gap:10px;overflow:visible;padding:0}
.compose-view[data-kind=upload] .attachment-draft{max-width:100%;padding:10px 12px;gap:10px;background:var(--surface);border-color:var(--line-soft,var(--ink));color:var(--ink)}
.compose-view[data-kind=upload] .attachment-file-badge{display:grid;place-items:center;flex:none;width:30px;height:34px;border:1px solid var(--ink);background:var(--surface-soft);font:10px/1 var(--font-body)}
.compose-view[data-kind=upload] .attachment-draft-name{max-width:360px}
.compose-view[data-kind=upload] .attachment-remove{min-width:26px;min-height:28px;color:var(--muted)}
.compose-view[data-kind=upload] .attachment-draft.has-audio-preview{grid-template-columns:30px minmax(0,1fr) auto}
.compose-view[data-kind=upload] .compose-actions{padding-top:4px;gap:20px}
.compose-view[data-kind=upload] #compose-action-note{max-width:32ch;line-height:1.7}
.compose-view[data-kind=upload] #create-button{background:var(--surface);color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--transfer-shadow)}
.compose-view[data-kind=upload] #create-button:hover:not(:disabled){background:var(--surface-soft);color:var(--ink)}
.compose-view[data-kind=upload] #create-button:disabled{color:var(--muted);box-shadow:none}

/* Device cards distinguish the human name, identifying suffix, and browser. */
.nearby-panel{padding:24px;gap:16px;background:var(--surface);border-color:var(--ink)}
.nearby-heading{gap:8px 16px;align-items:center}
.nearby-heading h3{font-size:26px;line-height:1.4}
.nearby-count{display:inline-block;vertical-align:middle;min-width:23px;padding:2px 6px;margin-left:6px;border:1px solid var(--line-soft,var(--ink));background:var(--surface-soft);font:14px/1.2 var(--font-body);text-align:center}
.nearby-refresh{min-height:36px;padding:7px 9px;border:0;font:14px/1.5 var(--font-body);text-decoration:underline;text-underline-offset:4px}
.nearby-self{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--muted)}
#nearby-self-name{color:var(--ink)}
.nearby-self-device{display:inline}
.nearby-status{display:flex;align-items:baseline;gap:9px}
.nearby-panel[data-state=ready] .nearby-status::before{content:'';display:block;flex:none;width:7px;height:7px;background:var(--lime,var(--ink));border:1px solid var(--ink)}
.nearby-peers{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.nearby-peers .nearby-peer{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;min-height:180px;padding:18px;border-color:var(--line-soft,var(--ink));background:var(--bg);font-size:20px}
:root[data-contrast=normal] .nearby-peers .nearby-peer{background:var(--bg);color:var(--ink)}
:root[data-contrast=normal] .nearby-peers .nearby-peer:hover:not(:disabled){background:var(--surface-soft);border-color:var(--ink);box-shadow:3px 3px 0 var(--transfer-shadow)}
.nearby-peer-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nearby-peer-icon{display:grid;place-items:center;width:32px;height:32px;flex:none}
.nearby-peer-icon svg{width:28px;height:28px}
.nearby-peer-badge{display:inline-flex;align-items:center;gap:7px;font:14px/1.4 var(--font-body)}
.nearby-peer-badge::before{content:'';width:6px;height:6px;border:1px solid currentColor;background:var(--lime,currentColor)}
.nearby-peer-identity{flex:1;gap:10px}
.nearby-peer-name{display:block;font-size:21px;line-height:1.4}
.nearby-peer-title{display:block;overflow-wrap:anywhere}
.nearby-peer-separator{display:none}
.nearby-peer-fingerprint{display:block;margin-top:6px;font:14px/1.4 var(--font-body);letter-spacing:.06em}
.nearby-peer-device{font-size:14px;line-height:1.5;opacity:1}
.nearby-peer-action{margin:0;padding-top:10px;border-top:1px dashed var(--line-soft,currentColor);font-size:14px}
.nearby-peer:disabled{box-shadow:none}
.nearby-panel[data-context=receive] .nearby-peer:disabled{border-style:solid;cursor:default;color:var(--ink);background:var(--bg);opacity:1}
.nearby-panel[data-context=receive] .nearby-peer-action{color:var(--muted)}
.nearby-empty{display:flex;align-items:center;gap:16px;padding:22px;border:1px dashed var(--line-soft,var(--ink));background:var(--bg)}
.nearby-empty svg{width:34px;height:34px;flex:none;color:var(--ink)}
.nearby-empty strong{font-weight:400;color:var(--ink)}
.nearby-note{padding-top:16px;border-top-color:var(--line-soft,var(--ink));line-height:1.8}
@media(max-width:800px){
 .upload-dropzone{padding:26px 24px 22px}
 .upload-drop-body{grid-template-columns:56px minmax(0,1fr);gap:20px}
 .upload-stamp{width:50px;height:58px}
 #upload-choose{grid-column:2;justify-self:start;margin-top:2px}
 .upload-drop-foot{margin-left:0}
}
@media(max-width:600px){
 .upload-panel{gap:22px}
 .upload-dropzone{padding:22px 18px 18px;box-shadow:4px 4px 0 var(--transfer-shadow)}
 .upload-drop-top{margin-bottom:24px;gap:14px}
 .transfer-kicker{font-size:12px;letter-spacing:.03em}
 .upload-label{font-size:12px;padding:4px 7px}
 .upload-drop-body{grid-template-columns:40px minmax(0,1fr);gap:17px}
 .upload-stamp{width:38px;height:46px;align-self:start;margin-top:5px;box-shadow:3px 3px 0 var(--transfer-shadow)}
 .upload-stamp .upload-glyph{width:27px;height:27px}
 .upload-copy h2{font-size:26px;margin-bottom:10px}
 .upload-copy p{font-size:14px;line-height:1.7}
 #upload-choose{font-size:17px;padding:12px 14px;max-width:100%}
 .upload-drop-foot{margin-top:24px;font-size:14px;gap:7px}
 .compose-view[data-kind=upload] .attachment-draft-name{max-width:none}
 .compose-view[data-kind=upload] .attachment-draft{padding:9px;gap:8px}
 .compose-view[data-kind=upload] .compose-actions{align-items:flex-start;flex-wrap:wrap;gap:16px}
 .compose-view[data-kind=upload] #create-button{min-height:44px;font-size:17px;padding:12px 14px}
 .nearby-panel{padding:20px 16px}
 .nearby-heading{gap:10px}
 .nearby-heading h3{font-size:23px}
 .nearby-refresh{padding-inline:4px}
 .nearby-peers{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px}
 .nearby-peers .nearby-peer{padding:16px;min-height:166px}
 .nearby-empty{padding:18px 14px;align-items:flex-start}
}
@media(max-width:360px){
 .upload-dropzone{padding:20px 15px 17px}
 .upload-copy h2{font-size:24px}
 #upload-choose{grid-column:1/-1;justify-self:stretch}
 .nearby-heading h3{font-size:21px}
 .nearby-count{margin-left:3px;padding-inline:4px}
}