/* Focused responsive refinements for Drazil's long-form study tools. */
:root{--drazil-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}
/* Phones: the full toolbar is hidden at this width by design, so the tray is
   the whiteboard's only tool surface. Visible whenever the board is on
   screen; the [hidden] attribute still wins, other views stay clean. */
@media (max-width: 820px) {
  #view-whiteboard.active #wbQuickbar:not([hidden]){
    position:absolute;left:8px;bottom:56px;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% - 16px);touch-action:manipulation
  }
  /* There is no full toolbar at this width, so the "show full toolbar" arrow
     would be a pointer to nothing; the gear configures the tray itself. The
     display:inline-flex rule further down needs the weight. */
  .wb-quick-show{display:none !important}
}
#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{animation:dialogIn var(--dur-base) var(--ease-out);
  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}
/* The whiteboard keeps its 43 controls in #wbToolHead, so the shared contextual
   bar is left empty in this view. An empty bar still holds its computed row
   height and overflows the fixed 50px nav down over the board's own toolbar,
   where it is painted on top (.top-nav is z-index 50, the view is z-index 1)
   and swallows every click aimed at the tool buttons -- elementFromPoint on
   every toolbar button returns #topContextual, in both the Compact and Medium
   toolbar sizes. Hide it only while it is empty: anything ever mounted into it
   re-shows it automatically. */
body:has(#view-whiteboard.active) #topContextual:empty{display:none}

/* 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.
   Do not make #view-diagrams positioned here: .view is already fixed and
   inset:0, and overriding that with position:relative collapses the view to
   its content height, leaving a dead band below the canvas on every screen. */
.dg-edit-panel{animation:dialogIn var(--dur-base) var(--ease-out);
  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{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{--drazil-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}
}