/* Review v11: proportional formats, motion-only depth and unclipped list layers. */
#send-sheet{height:490px;display:flex;flex-direction:column;padding:0;max-height:min(94%,calc(100% - max(env(safe-area-inset-top),var(--safe-top)) - 12px));overflow:hidden;background:var(--HeaderBackgroundBrush);border:1px solid var(--MainBorderBrush);border-radius:24px 24px 0 0;box-shadow:0 -10px 36px #0003;color:var(--TextBrush);font:12px/1.4 'Segoe UI',Arial,sans-serif;--share-accent:var(--accent,#72a7ff);--share-ink:var(--share-accent);--share-button-text:#111318;--accent-soft:color-mix(in srgb,var(--share-accent) 28%,transparent)}
#send-sheet .sheet-heading{flex:none;padding:12px 12px 6px 20px;gap:8px}
#send-sheet .sheet-heading h2{flex:1;font:22px/1.2 Adlinnaka;margin:6px 0}
#close-sheet .share-title-plane{width:24px;height:24px;flex:none;transform:translateX(-2px);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:360px),(max-height:650px){#close-sheet .share-title-plane{width:22px;height:22px}}
#close-sheet{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--MutedBrush)}
#close-sheet:hover{background:var(--ButtonBackgroundBrush);color:var(--TextBrush)}
#close-sheet svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.send-body{flex:1;display:flex;flex-direction:column;overflow:visible;min-height:0;padding:4px 10px 0}
.send-body> :not(#share-choices){flex:none}
#send-sound-host{margin:0 0 12px}
#send-sound-host .sound-row{position:relative;top:auto;left:auto;right:auto;width:100%;transform:none;opacity:1;filter:none}
#send-sound-host .sound-description{cursor:default}
.send-source{font-size:11px;color:var(--share-ink)}
.send-source:has(#send-speed:not([hidden])){margin:0 9px 6px}
.send-text-action{font:11px 'Segoe UI';color:var(--share-ink);min-height:30px;text-align:left;padding:3px 0;text-decoration:underline;text-underline-offset:3px}#send-reset-speed{margin:0 9px 6px}
#send-destination{position:relative;min-height:40px;margin:0 2px 8px;--accent:var(--share-accent)}
#send-destination .filter-card{padding:0;height:28px;border-radius:13px}
#send-destination .filter-header{width:100%;height:28px;padding:0 10px;display:flex;text-align:left}
#send-destination .filter-title{font:11px Adlinnaka;color:var(--TextBrush)}
#send-destination .filter-card:hover{border-color:var(--share-accent)}
#format-back{position:absolute;left:0;top:0;width:28px;height:30px;z-index:3;display:grid;place-items:center;color:var(--TextBrush);border-radius:15px}
#format-back:hover{background:var(--ButtonBackgroundBrush)}
#format-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#share-choices{position:relative;z-index:12;flex:1;min-height:0;margin:0 2px}
#message-type,#format-field{height:100%;min-height:0;border:0;padding:0;margin:0;min-width:0}
#send-sheet .share-choice-list{position:relative;display:flex;flex-direction:column;gap:6px;width:100%;height:100%;min-height:0;border:0;margin:0;padding:6px 0;overflow:visible;overscroll-behavior:contain;touch-action:none;scrollbar-width:none;mask-image:none;--entry-scale:1}
#send-sheet .share-choice-list::-webkit-scrollbar{display:none;width:0;height:0}
#send-sheet .share-choice-list .sound-row{position:relative;inset:auto;flex:none;display:grid;place-items:center;grid-template-columns:1fr;gap:0;width:100%;height:44px;min-height:0;padding:0 18px;text-align:center;touch-action:none;font:16px/1.15 Adlinnaka;color:var(--TextBrush);transform-origin:50% 50%;--accent:var(--share-accent);--accent-soft:color-mix(in srgb,var(--share-accent) 28%,transparent)}
#send-sheet #format-options{padding-left:8px;padding-right:8px;align-items:center}
#send-sheet #send-groups .sound-row{display:flex;justify-content:flex-start;gap:12px;padding:0 20px;text-align:left}
.send-choice-icon{width:20px;height:20px;display:grid;place-items:center;flex:none;color:var(--MutedBrush)}
.send-choice-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.send-choice.active .send-choice-icon{color:var(--share-ink)}
#send-sheet #format-options .sound-row{width:auto;align-self:center;height:34px;min-height:0;padding:0 13px;font-size:18px}
#send-sheet .share-choice-list .sound-row:focus-visible{outline-offset:-3px}
.send-footer{flex:none;padding:12px 14px calc(14px + max(env(safe-area-inset-bottom),var(--safe-bottom)));background:transparent;border:0}

#export-state{font:11px/1.4 'Segoe UI';margin:0;padding:0 6px;min-height:0;color:var(--MutedBrush);overflow-wrap:anywhere}#export-state:not(:empty){padding-top:7px}#export-state[data-tone=error]{color:var(--TextBrush)}#export-state[data-tone=success]{color:var(--share-ink)}
#export-progress{display:block;height:3px;width:100%;margin:8px 0 0;accent-color:var(--share-ink)}
#export-action{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 12px;margin-top:9px;border:1px solid var(--share-accent);border-radius:9999px;background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--HeaderBackgroundBrush);color:var(--TextBrush);font:12px Adlinnaka;box-shadow:none}
#export-action:hover{color:var(--TextBrush);filter:brightness(1.05)}#export-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#export-action.working svg{display:none}
#send-sheet :is(button,summary):focus-visible{outline:1px solid var(--share-ink);outline-offset:2px}
@media(max-width:360px){#send-sheet .sheet-heading{padding-left:16px}#send-sheet .sheet-heading h2{font-size:20px}.send-body{padding-left:8px;padding-right:8px}#send-sheet .share-choice-list .sound-row{font-size:15px}}
@media(max-height:650px){#send-sheet .sheet-heading{padding-top:5px;padding-bottom:3px}#send-sheet .sheet-heading h2{font-size:20px}#send-sound-host{margin-bottom:8px}#send-destination{margin-bottom:6px}.send-footer{padding-top:9px;padding-bottom:calc(10px + max(env(safe-area-inset-bottom),var(--safe-bottom)))}}

/* Supporting copy uses the same system font as sound filenames and metadata. */
.quick-setting{width:100%;display:flex;justify-content:center;align-items:center;gap:6px;min-height:24px;margin:8px 0 0;color:var(--MutedBrush);font:10px/1.4 'Segoe UI';cursor:pointer}
.quick-setting svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.quick-setting .quick-dot{width:8px;height:8px;fill:var(--share-ink);stroke:none;opacity:.5}
.quick-setting.active .quick-dot{opacity:1}
.quick-setting-slot{height:24px;margin-top:8px}
.quick-setting-slot .quick-setting{margin:0}
.sheet-heading .quick-setting{flex:none;width:36px;height:40px;margin:0;margin-inline-end:-8px;padding-inline-start:6px;border-radius:50%}
#send-sheet[data-resizing=true]{will-change:height}
