/* The approved question component owns its palette; host globals stay outside it.
   Optional HQ semantic inputs → existing component recipes, without geometry/state duplication. */
:is(.hq-panel,.hq-popup,.hq-mode,.hq-icon){
  color-scheme:light;
  --text:var(--hq-text-color,light-dark(#1a1a1a,#e6e8ee));
  --text-muted:var(--hq-muted-color,light-dark(#555,#aab1c2));
  --panel:var(--hq-panel-color,light-dark(#fff,#181b24));
  --surface:var(--hq-surface-color,light-dark(#f5f5f5,#1f2128));
  --chip-bg:var(--hq-chip-color,light-dark(#fff,transparent));
  --chip-bg-hover:var(--hq-chip-hover-color,light-dark(#f5f5f5,#1f2128));
  --bg:var(--hq-field-color,light-dark(#fff,#0f1117));
  --border:var(--hq-border-color,light-dark(#ddd,#262a36));
  --accent-fill:var(--hq-fill-color,#cc1fb3);
  --accent:var(--hq-accent-color,light-dark(#cc1fb3,#ee58e0));
  --accent-fill-hover:var(--hq-fill-hover-color,#b3179c);
  --accent-hover:var(--hq-accent-hover-color,#d845cb);
  --accent-pressed:var(--hq-pressed-color,#c232b6);
  --surface-disabled:var(--hq-disabled-surface-color,light-dark(#ededf0,#232734));
  --text-disabled:var(--hq-disabled-text-color,light-dark(#a7abb5,#667082));
  --accent-veil:var(--hq-veil-color,light-dark(rgba(238,88,224,.06),rgba(238,88,224,.1)));
  --accent-tint:var(--hq-tint-color,light-dark(#fdf3fc,#31202f));
  --on-accent:var(--hq-on-accent-color,#fff);
  --focus-ring:var(--hq-focus-color,rgba(238,88,224,.30));
  --err-text:var(--hq-error-color,light-dark(#c0392b,#ff8a8a));
  --shadow-pop:var(--hq-shadow-color,light-dark(rgba(0,0,0,.12),rgba(0,0,0,.4)));
}
html.dark :is(.hq-panel,.hq-popup,.hq-mode,.hq-icon){color-scheme:dark}

/* Question controls reuse the circular call-control recipe, outside answer-block geometry. */
.hq-frame{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:16px;align-items:start}
.hq-frame>.hw-lb{min-width:0}
.hq-rail{align-self:stretch;padding-top:88px}
.hq-rail-inner{position:sticky;top:calc(var(--hq-sticky-top,0px) + 16px);display:flex;justify-content:center}
.hq-icon{--hq-icon-tint:var(--accent-tint,#fdf3fc);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;box-sizing:border-box;padding:0;border:1px solid var(--border,#dedee3);border-radius:50%;background:var(--panel,#fff);color:var(--text-muted,var(--muted,#888));box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer}
.hq-icon svg{width:18px;height:18px;pointer-events:none}
.hq-icon[hidden]{display:none}
@media(hover:hover){.hq-icon:hover:not(:disabled){background:var(--chip-bg-hover,var(--surface,#f5f5f5))}}
.hq-icon:disabled{opacity:1;background:var(--surface-disabled,#ededf0);color:var(--text-disabled,#a7abb5);border-color:transparent;box-shadow:none;cursor:default}
.hq-icon[aria-pressed=true]{border-color:var(--accent-fill,#cc1fb3);color:var(--accent-fill,#cc1fb3);background:var(--hq-icon-tint)}
.hq-icon:focus-visible{outline:3px solid var(--accent-fill,#cc1fb3);outline-offset:2px}
/* Comment selection is a veil on one semantic cell, independent of answer states. */
.hq-selecting,.hq-selecting *{cursor:default!important}/* выбор комментария перекрывает grab/text у упражнений */
.hq-selecting .hq-target:focus-visible{outline:none}
.hq-target.hq-hover,.hq-target.hq-chosen{isolation:isolate}
.hq-target.hq-hover::before,.hq-target.hq-chosen::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:10px;background:var(--accent-veil,rgba(238,88,224,.06));pointer-events:none}
html.dark .hq-target.hq-hover::before,html.dark .hq-target.hq-chosen::before{background:var(--accent-veil,rgba(238,88,224,.1))}
.hq-selecting .hq-marker,.hq-selecting .hq-marker *{cursor:pointer!important}
/* Solved matching tiles remain selectable; native answer hover/press must not fire visually. */
.lesson-wrap .hq-selecting .tile.done{pointer-events:auto}
.lesson-wrap .hq-selecting .tile:hover:not(.sel):not(.ok):not(.bad){border-color:var(--line)}
.lesson-wrap .hq-selecting .tile:active{transform:none}
.hq-selecting .gm-l:hover:not(.done):not(.sel):not(.bad),.hq-selecting .gm-r:hover:not(.done):not(.sel):not(.bad){border-color:var(--line)}
.hq-selecting .gm-l:focus-visible,.hq-selecting .gm-r:focus-visible{box-shadow:0 1px 0 var(--line)}
.hq-selecting .gm-l.sel:focus-visible,.hq-selecting .gm-r.sel:focus-visible{box-shadow:0 0 0 1px var(--accent) inset,0 1px 0 var(--line)}
.hq-selecting .gm-l.done:focus-visible,.hq-selecting .gm-r.done:focus-visible{box-shadow:0 1px 0 var(--ok-bd)}
.hq-selecting .gm-l.bad:focus-visible,.hq-selecting .gm-r.bad:focus-visible{box-shadow:0 1px 0 var(--bad-bd)}
.hq-selecting .hq-target>*:not([data-hq-anchor]):not(.hq-marker){pointer-events:none}
.hq-selecting [data-hq-anchor]{pointer-events:auto}
.hq-target{position:relative}
.hq-target>.hq-marker{position:absolute;right:6px;top:6px;width:26px;height:26px;margin:0;box-shadow:none;pointer-events:auto}
.hq-marker svg{width:15px;height:15px}
.hq-marker.hq-done{opacity:.65}
.hq-popup,.hq-panel{box-sizing:border-box;border:1px solid var(--border,#dedee3);border-radius:16px;background:var(--panel,#fff);color:var(--text,#202126);box-shadow:0 6px 24px var(--shadow-pop,rgba(0,0,0,.14));font:400 15px/1.5 -apple-system,system-ui,sans-serif}
.hq-popup{position:fixed;z-index:10020;width:440px;max-width:calc(100vw - 24px);padding:18px;max-height:calc(100dvh - 32px);overflow:auto}
.hq-popup h3,.hq-panel h3{margin:0 44px 14px 0;font-size:18px;line-height:1.4;color:inherit}
.hq-popup textarea{box-sizing:border-box;width:100%;min-height:100px;resize:vertical;max-height:35dvh;border:1px solid var(--border,#dedee3);border-radius:10px;padding:10px;background:var(--bg,#fff);color:inherit;font:inherit;font-size:16px}
.hq-x{position:absolute;right:12px;top:12px}
.hq-action{border:1px solid var(--border,#dedee3);border-radius:10px;padding:9px 14px;font:inherit;background:var(--panel,#fff);color:inherit;cursor:pointer}
.hq-action.hq-primary{background:var(--accent-fill,#cc1fb3);color:var(--on-accent,#fff);border-color:transparent}
.hq-action:disabled{opacity:.55;cursor:default}
.hq-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hq-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 12px}
.hq-error{color:var(--err-text,#c0392b);margin:10px 0 0}
.hq-mode{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;margin:0 0 14px;background:var(--accent-tint);border-radius:10px;color:var(--text);font:400 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.hq-mode button{border:0;background:transparent;color:var(--text);padding:4px;font-family:inherit;cursor:pointer!important}
.hq-call-button{position:absolute;z-index:9;left:-52px;top:16px}
.hq-count{position:absolute;right:-3px;top:-5px;min-width:18px;box-sizing:border-box;padding:0 4px;border-radius:10px;background:var(--accent-fill,#cc1fb3);color:var(--on-accent,#fff);font:600 11px/18px -apple-system,system-ui,sans-serif;pointer-events:none}
.hq-panel{position:fixed;z-index:145;display:flex;flex-direction:column;width:732px;max-width:calc(100vw - 24px);max-height:min(620px,calc(100dvh - 24px));padding:0;overflow:visible}
.hq-question-row{padding:12px 0;border-top:1px solid var(--border,#dedee3)}
.hq-question-row:first-of-type{border-top:0}
.hq-question-row p{margin:0 0 8px;white-space:pre-wrap;overflow-wrap:anywhere}
.hq-delivery{margin:10px 0 0;font-size:14px}
html.dark .hq-popup,html.dark .hq-panel{background:var(--panel,#1b1d24);color:var(--text,#edf0f4);border-color:var(--border,#383b46)}
html.dark .hq-icon{--hq-icon-tint:var(--accent-tint,#31202f)}
html.dark .hq-icon:where(:not(:disabled):not([aria-pressed=true])){background:var(--panel,#1b1d24);color:var(--text-muted,var(--muted,#a8b0c0));border-color:var(--border,#383b46)}
@media(max-width:600px){.hq-frame{gap:8px}.hq-icon{width:44px;height:44px}.hq-marker{width:26px;height:26px}.hq-call-button{left:-2px;top:12px}.hq-popup,.hq-panel{padding:14px}.hq-rail{padding-top:80px}}

/* Use the existing card's side space, keeping the exercise's original content width. */
.lesson-wrap .hq-target:is(.gitem,.line,.hw-pair,li){margin-inline:-12px;padding-inline:12px}
.hq-target.gitem>.gq:first-of-type{padding-right:38px}
.lesson-wrap .hq-target:is(.line,.hw-pair,li){padding-right:50px}
.lesson-wrap .hw-gap-lines:not(.dlg) .line.hq-target{margin-inline:-12px;padding-inline:12px 50px}
.lesson-wrap .hq-target:is(.gitem,.line,.hw-pair,li)>.hq-marker{right:18px}
/* An answer field may use the available width, without forcing its task beyond the veil. */
.lesson-wrap .hq-target .grw-in{min-width:min(180px,100%);max-width:100%}
.lesson-wrap .hq-frame .match{grid-template-columns:repeat(2,minmax(0,1fr))}
.lesson-wrap .hq-frame .match .tile{min-width:0;overflow-wrap:anywhere;white-space:normal}
.lesson-wrap .hq-frame .match .tile.hq-target{padding-right:38px}
/* Leave readable text beside the rail on narrow screens; tap/reflow stays unchanged. */
@media(max-width:600px){.lesson-wrap .hq-frame .match{grid-template-columns:minmax(0,1fr)}}

/* Feed structure is the frozen approved r4 layout. Only its body scrolls. */
.hq-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border);flex:none}
.hq-panel-head h2{font-size:20px;margin:0;line-height:1.4}
.hq-panel-head .hq-x{position:static}
.hq-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 20px}
.hq-footer{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--border);border-radius:0 0 16px 16px;background:var(--panel)}
.hq-foot-main{margin-left:auto}
.hq-footer .hq-delivery{width:100%;margin:0;font-size:14px}
.hq-feed-item{min-width:0;padding:24px 0;border-bottom:1px solid var(--border)}

.hq-feed-item:last-child{border-bottom:0}
.hq-question-text{position:relative;font-size:18px;font-weight:600;line-height:26px;margin:0 0 20px;white-space:pre-wrap;overflow-wrap:anywhere}
.hq-opened-at{font-size:13px;color:var(--text-muted);margin:0 0 12px}
.hq-skeletons{display:grid;gap:16px}
.hq-feed>.hq-skeletons{gap:0}
@media(max-width:440px){.hq-panel-head,.hq-body,.hq-footer{padding-left:14px;padding-right:14px}.hq-foot-main{width:100%}.hq-panel-head h2{font-size:18px}}
.hq-popup-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hq-popup-head h2{font-size:18px;margin:0}
.hq-popup-head .hq-x{position:static}
.hq-popup textarea.hq-read{border:0;padding:0;resize:none;min-height:64px;background:transparent}

.hq-panel{padding:0}
.hq-panel,.hq-popup{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.hq-body>.hq-error,.hq-popup>.hq-error,.hq-footer>.hq-delivery.hq-error{margin:0 0 10px;font-size:14px}
.hq-popup textarea{display:block}
.hq-popup{padding:18px}

/* Approved r3 content hierarchy + dot variant. Only the body scrolls; each
   participant owns their window. Answer geometry belongs to lesson.css. */
/* Keep the existing interaction guard for legacy readonly mirrors during
   rolling delivery. It carries no geometry and does not match the new context. */
.hq-context .hwx-ro :is(.word,.gap,.tile,.gopt,.gm-l,.gm-r){cursor:default;pointer-events:none}
.hq-panel{--text:light-dark(#1a1a1a,#e6e8ee);--text-muted:light-dark(#555,#aab1c2);--panel:light-dark(#fff,#1b1d24);--surface:light-dark(#f9f9f9,#1b1e27);--border:light-dark(#ddd,#262a36);--shadow-pop:light-dark(rgba(0,0,0,.12),rgba(0,0,0,.4));--skeleton-shadow:var(--shadow-pop);overflow:hidden}
.hq-panel *{box-sizing:border-box}
.hq-panel-head h2{font-weight:700}
.hq-panel :is(h2,p){font-family:var(--reader-prose-font)}
.hq-panel{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hq-new-dot{display:block;position:absolute;left:-13px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hq-arrival{padding:0 20px 10px;flex:none}.hq-arrival[hidden],.hq-count[hidden]{display:none}
.hq-jump{display:inline-flex;align-items:center;border:0;padding:4px 0;background:transparent;color:var(--accent);font:600 13px/20px -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;cursor:pointer}
.hq-connection{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;font-size:14px;color:var(--text-muted)}
.hq-feed-state{margin:0;padding:40px 12px;text-align:center;color:var(--text-muted);font-size:14px;line-height:21px;overflow-wrap:anywhere}.hq-feed-state p{margin:14px 0}.hq-feed>p.hq-feed-state{margin:14px 0}
.hq-context-note{font-size:16px;line-height:24px;margin:0 0 14px;color:var(--text-muted)}
.hq-feed-entry{position:relative;flex:none;font-size:14px;white-space:nowrap}
.hw-lb-actions{flex-wrap:wrap}.tl-ov-head .hq-feed-entry{margin-left:auto;margin-right:8px}
@media(max-width:440px){.hq-arrival{padding-left:14px;padding-right:14px}}
/* The window is viewport minus 24px: its 440px header breakpoint is viewport464. */
@media(max-width:464px){.hq-panel-head,.hq-body,.hq-arrival{padding-left:14px;padding-right:14px}.hq-panel-head h2{font-size:18px}}

/* Above lesson (140), screen share (141), mode menus (143); below call (150). */
/* Games raise the surface to210 and live call to212. */
body.tl-game-open .hq-panel{z-index:211}

.hq-panel{box-shadow:0 8px 24px var(--shadow-pop)}
/* Primary task text is owned by the native reader component in lesson.css. */
.hq-feed-skeleton-row{padding:4px 0}