/* Focused responsive refinements for Lumen's long-form study tools. */
:root{--lumen-control-h:36px}
@media(min-width:821px){:root{--nav-h:50px}}
@media(max-width:820px){:root{--nav-h:calc(42px + var(--safe-t,0px))}}

.tool-head.compact{min-height:46px;padding:5px 12px;gap:8px}
.tool-head.compact .tool-title{font-size:16px}
.tool-head.compact .top-actions{gap:5px}
.vbar{min-height:42px;padding:5px 10px;gap:7px}
.tool-head button,.vbar button,.top-actions button{min-height:34px}
/* Toolbar controls that draw their own shape must keep their intrinsic box,
   or min-height above stretches them into ovals: a 22px round colour swatch
   becomes a 22x34 ellipse, and square icon buttons come out stretched. Only
   text/label-bearing buttons get the touch-size floor. */
.tool-head button.swatch,.tool-head button.wb-swatch,
.vbar button.swatch,.vbar button.wb-swatch,
.top-actions button.swatch,.top-actions button.wb-swatch,
.wb-swatch,.swatch{min-height:0;min-width:0}
.wb-swatch{width:22px;height:22px;flex:none;padding:0;border-radius:50%}
.tool-head :focus-visible,.vbar :focus-visible,.wb-quickbar :focus-visible,
.dg-edit-panel :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The task timer remains available in the shared navigation and can be
   resized without covering the work area. */
#tsTimerPanel{resize:both;min-width:230px;min-height:220px;max-width:min(92vw,420px);max-height:85vh;overflow:auto}
#pomoPop{max-width:min(92vw,360px)}

/* Exam setup remains readable while taking less vertical space. */
[data-view="exam"] .fld textarea{min-height:64px;resize:vertical}
[data-view="exam"] .exam-bar{position:sticky;top:0;z-index:3;min-height:40px;padding:4px 8px}
[data-view="exam"] .exam-timer{font-variant-numeric:tabular-nums}

/* Whiteboard tools shown only while the full toolbar is hidden. */
#wbQuickbar{display:none}
#view-whiteboard.hide-ui #wbQuickbar:not([hidden]){
  position:absolute;left:12px;bottom:12px;z-index:9;display:flex;align-items:center;
  gap:5px;padding:5px;border:1px solid var(--line2);border-radius:12px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:var(--shadow);
  max-width:calc(100% - 24px);touch-action:manipulation
}
.wb-quick-tools{display:flex;gap:4px;max-width:min(62vw,390px);overflow-x:auto;scrollbar-width:thin}
.wb-quick-tool,.wb-quick-config,.wb-quick-show{
  flex:none;min-width:40px;min-height:40px;padding:0 8px;border:1px solid transparent;
  border-radius:9px;background:transparent;color:var(--ink);
  cursor:pointer;touch-action:manipulation
}
.wb-quick-tool,.wb-quick-config,.wb-quick-show{display:inline-flex;align-items:center;justify-content:center}
.wb-quick-tool svg,.wb-quick-config svg,.wb-quick-show svg,
.wb-ctx-controls .wb-ctx-tool svg{display:block;width:18px;height:18px;flex:none}
.wb-quick-tool [data-lucide],.wb-ctx-controls .wb-ctx-tool [data-lucide]{width:18px;height:18px}
.wb-quick-tool span,.wb-ctx-controls .wb-ctx-tool span{font:italic 700 18px/1 var(--serif)}
.wb-quick-tool:hover,.wb-quick-tool.active,.wb-quick-config:hover,.wb-quick-show:hover{
  background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:color-mix(in srgb,var(--accent) 42%,transparent)
}
.wb-quick-config-panel{
  position:absolute;left:0;bottom:calc(100% + 8px);z-index:12;display:grid;grid-template-columns:1fr 1fr;
  gap:4px 12px;width:min(300px,calc(100vw - 24px));max-height:55vh;overflow:auto;
  padding:12px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)
}
.wb-quick-config-panel>b{grid-column:1/-1;font-size:12px;color:var(--ink)}
.wb-quick-config-panel label{display:flex;align-items:center;gap:7px;min-height:34px;font-size:12px;color:var(--ink)}
.wb-quick-config-panel input{accent-color:var(--accent)}
.wb-pages-bar{max-width:calc(100% - 24px);align-items:center}
.wb-pages-bar .btn{min-height:38px}

/* Document generation keeps output primary; writer controls can be collapsed.
   Selectors cover both the standalone #view-docgen and the old study-tab
   markup, so nothing depended on which host the feature is mounted in. */
#view-docgen .dg-gen-split,
[data-view="docgen"] .dg-gen-split{min-height:0}
#view-docgen.dg-options-hidden .dg-gen-split,
[data-view="docgen"].dg-options-hidden .dg-gen-split{grid-template-columns:minmax(0,1fr)}
#view-docgen.dg-options-hidden .dg-gen-side,
[data-view="docgen"].dg-options-hidden .dg-gen-side{display:none}
#view-docgen .dg-gen-msgs,
[data-view="docgen"] .dg-gen-msgs{min-height:220px}
#view-docgen .dg-doc[contenteditable="true"],
[data-view="docgen"] .dg-doc[contenteditable="true"]{
  min-height:55vh;padding:clamp(16px,3vw,34px);outline:2px solid color-mix(in srgb,var(--accent) 42%,transparent);
  outline-offset:-2px;border-radius:8px;background:var(--surface);caret-color:var(--accent);cursor:text
}
#view-docgen .dg-doc[contenteditable="true"]:focus,
[data-view="docgen"] .dg-doc[contenteditable="true"]:focus{outline-color:var(--accent)}
.dg-revision-actions{display:flex;gap:5px;flex-wrap:wrap;width:100%}
.dg-revision-actions #dgTargetPrompt{flex:1 1 100%;min-width:min(240px,100%);min-height:36px;padding:6px 9px;border:1px solid var(--line2);border-radius:7px;background:var(--surface-2);color:var(--ink);font:12px var(--sans)}

/* Diagram editing and questions stay beside the active canvas on desktop,
   and become a scrollable, full-width sheet on small screens. */
#view-diagrams{position:relative}
.dg-edit-panel{
  position:absolute;z-index:15;top:116px;right:16px;width:min(360px,calc(100% - 24px));
  max-height:min(72vh,720px);overflow:auto;padding:12px;
  border:1px solid var(--line2);border-radius:12px;background:var(--surface);
  box-shadow:var(--shadow);color:var(--ink)
}
.dg-edit-panel[hidden]{display:none}
.dg-edit-top{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:-12px;padding:4px 0 8px;background:var(--surface);z-index:1}
.dg-part-list{display:grid;gap:8px;margin:4px 0 10px}
.dg-edit-part{display:grid;grid-template-columns:1fr 1fr;gap:7px;border:1px solid var(--line);border-radius:9px;padding:8px}
.dg-edit-part legend{grid-column:1/-1;padding:0 4px;font-size:11px;font-weight:700;color:var(--accent)}
.dg-edit-part label,.dg-edit-panel>label{display:grid;gap:4px;min-width:0;font-size:10px;color:var(--soft)}
.dg-edit-part input,.dg-edit-panel input{width:100%;min-width:0;min-height:36px;padding:6px 8px;border:1px solid var(--line2);border-radius:7px;background:var(--surface-2);color:var(--ink);font:12px var(--sans)}
.dg-edit-part [data-remove]{grid-column:1/-1;justify-self:start}
.dg-edit-panel>label{margin:10px 0 5px}
.dg-edit-panel>button{min-height:36px}

@media(max-width:820px){
  .tool-head.compact{min-height:42px;padding:4px 8px}
  .vbar{flex-wrap:wrap}
  #view-whiteboard:not(.hide-ui) .tool-head.compact{align-items:flex-start}
  #view-whiteboard:not(.hide-ui) .tool-head.compact .top-actions{max-width:100%;overflow-x:auto;flex-wrap:nowrap;padding:3px 0}
  #view-whiteboard:not(.hide-ui) .tool-head.compact .top-actions>.ibtn,
  #view-whiteboard:not(.hide-ui) .tool-head.compact .top-actions>.btn{flex:none;min-width:40px;min-height:40px}
  .wb-pages-bar{right:8px;bottom:8px}
  #view-whiteboard.hide-ui #wbQuickbar:not([hidden]){left:8px;bottom:58px}
  #view-diagrams .dg-split{height:auto;min-height:calc(100dvh - 170px);grid-template-columns:minmax(0,1fr)}
  #view-diagrams .dg-pane{max-height:145px;border-right:0;border-bottom:1px solid var(--line)}
  #view-diagrams .dg-canvas{min-height:48vh}
  .dg-edit-panel{position:fixed;top:auto;right:8px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(440px,calc(100vw - 16px));max-height:72dvh}
  #view-docgen .dg-gen-split,
  [data-view="docgen"] .dg-gen-split{height:auto;min-height:calc(100dvh - 130px)}
  #view-docgen .dg-gen-side,
  [data-view="docgen"] .dg-gen-side{max-height:38vh;overflow:auto}
  #view-docgen .dg-gen-msgs,
  [data-view="docgen"] .dg-gen-msgs{min-height:42vh}
  #view-docgen .dg-doc[contenteditable="true"],
  [data-view="docgen"] .dg-doc[contenteditable="true"]{min-height:42vh}
  [data-view="exam"] .exam-bar{top:0}
}

@media(max-width:560px){
  :root{--lumen-control-h:40px}
  .tool-head.compact .tool-title{font-size:14px}
  #view-praxis .px-topbar{gap:4px;padding:5px 7px}
  #view-praxis .px-topbar .px-btn{min-height:38px;padding:6px 8px}
  #view-praxis .px-transport{gap:2px;padding:5px 6px}
  #pxTimecode{min-width:92px;margin:0 3px;font-size:11px}
  #pxSceneName{max-width:100%;flex-basis:100%;text-align:center;margin:0}
  #view-praxis .px-tlbar{height:64px}
  .dg-revision-actions{width:100%}
  .dg-edit-part{grid-template-columns:1fr}
  .dg-edit-part legend,.dg-edit-part [data-remove]{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  .wb-quick-tool,.dg-edit-panel{scroll-behavior:auto;transition:none!important}
}