:root { --listen-target:44px; --listen-panel:520px; --listen-dock-space:92px; }
.listen-icon { width:22px; height:22px; flex:none; }
.listen-eyebrow { display:flex; align-items:center; gap:var(--sp-3); color:var(--accent); font-size:var(--fs-sm); margin-bottom:var(--sp-5); }
.listen-feature { padding:var(--sp-7); border-top:2px solid var(--accent); }
.listen-feature h2 { text-transform:none; letter-spacing:normal; color:var(--text); border:0; padding:0; font-weight:600; font-size:var(--fs-num); line-height:var(--lh-tight); margin-bottom:var(--sp-5); }
.listen-feature p,.listen-intro { font-family:var(--font-prose); color:var(--text-dim); font-size:var(--fs-base); line-height:var(--lh-base); }
.listen-feature-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-6) 0 var(--sp-3); }
.listen-feature-actions .btn,.listen-dialog .btn,.listen-dock .btn,.listen-map-confirm .btn,.listen-nav { min-height:var(--listen-target); }
.listen-primary { background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:700; }
.listen-primary:hover { background:var(--text); border-color:var(--text); color:var(--bg); }
.listen-footnote { font-family:var(--font-prose); color:var(--text-dim); font-size:var(--fs-sm); line-height:1.6; margin:var(--sp-5) 0 0; }
.listen-nav { display:inline-flex; align-items:center; gap:var(--sp-3); border-color:var(--accent); }
.listen-indicator { width:var(--sp-3); height:var(--sp-3); background:var(--accent); flex:none; display:inline-block; }
.listen-nav[data-active="true"] .listen-indicator,.listen-dock[data-active="true"] .listen-indicator { background:var(--live); }
.listen-dialog { color:var(--text); background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r); padding:var(--sp-7); width:min(var(--listen-panel),calc(100% - var(--sp-7))); max-height:calc(100dvh - var(--sp-8)); overflow:auto; overscroll-behavior:contain; font:var(--fs-base)/var(--lh-base) var(--font-mono); }
.listen-dialog::backdrop { background:var(--bg); opacity:.78; }
.listen-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-5); }
.listen-dialog-head h2 { font-size:var(--fs-num); margin:0; }
.listen-dialog-head .listen-eyebrow { margin-bottom:var(--sp-2); }
.listen-dialog-head button { flex:none; }
.listen-intro { margin:var(--sp-6) 0; }
.listen-session { border-block:1px solid var(--line-strong); padding:var(--sp-6) 0; }
.listen-state { color:var(--accent); font-weight:600; }
.listen-session[data-active="true"] .listen-state { color:var(--live); }
#overheadStatus { font-family:var(--font-prose); color:var(--text-dim); margin:var(--sp-3) 0; }
.listen-settings { border-bottom:1px solid var(--line-strong); padding:var(--sp-3) 0; }
.listen-settings>summary { min-height:var(--listen-target); cursor:pointer; padding:var(--sp-5) 0; }
#listenPoint { display:block; color:var(--text-dim); margin-top:var(--sp-2); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.listen-settings[open] { padding-bottom:var(--sp-6); }
.listen-settings .overhead-profile { margin:var(--sp-3) 0; }
.listen-settings .seg button { min-height:var(--listen-target); flex:1; }
.listen-search { margin-top:var(--sp-6); }
.listen-search label { display:block; color:var(--text-dim); margin-bottom:var(--sp-3); }
.listen-search>div { display:flex; gap:var(--sp-3); }
.listen-search input { min-width:0; flex:1; min-height:var(--listen-target); }
.listen-example { border-bottom:1px solid var(--line-strong); padding:var(--sp-6) 0; }
.listen-example p { font-family:var(--font-prose); line-height:1.6; }
.listen-dock { position:fixed; bottom:var(--sp-6); left:50%; transform:translateX(-50%); z-index:800; display:flex; gap:var(--sp-6); align-items:center; width:min(600px,calc(100% - var(--sp-8))); padding:var(--sp-5); background:var(--bg-raise); border:1px solid var(--line-strong); border-radius:var(--r); }
.listen-dock-info { display:flex; align-items:center; gap:var(--sp-5); min-width:0; flex:1; padding:var(--sp-2); border:0; background:none; color:var(--text); text-align:left; font:inherit; cursor:pointer; min-height:var(--listen-target); }
.listen-dock-info strong,.listen-dock-info small { display:block; }
.listen-dock-info strong { font-size:var(--fs-base); }
.listen-dock-info small { font-size:var(--fs-sm); color:var(--text-dim); margin-top:var(--sp-1); }
body.has-listen-dock { padding-bottom:var(--listen-dock-space); }
.listen-map-confirm { position:fixed; z-index:850; left:50%; bottom:var(--sp-6); transform:translateX(-50%); display:flex; gap:var(--sp-5); align-items:center; padding:var(--sp-5); background:var(--bg-raise); border:1px solid var(--accent); width:min(480px,calc(100% - var(--sp-8))); }
.listen-dialog [hidden],.listen-dock[hidden],.listen-map-confirm[hidden] { display:none!important; }
@media(max-width:600px) { .listen-dialog { width:100%; max-width:none; max-height:94dvh; margin:auto 0 0; border-radius:var(--r) var(--r) 0 0; padding:var(--sp-6); padding-bottom:max(var(--sp-7),env(safe-area-inset-bottom)); } .listen-feature { padding:var(--sp-6); } .listen-dock { gap:var(--sp-3); bottom:max(var(--sp-3),env(safe-area-inset-bottom)); width:calc(100% - var(--sp-6)); } .listen-dock-info strong { font-size:var(--fs-sm); } }
#listenNav { min-height:var(--listen-target); }
@media(max-width:980px) { #layoutDub .listen-feature { order:-1; } }
.listen-search input { background:var(--bg-raise); color:var(--text); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5); font:inherit; }
.listen-search input::placeholder { color:var(--text-dim); }