/* ===========================================================
   Tool-focused chrome.

   The workbench is the page; the copy is reference material that sits
   below it. This file compacts everything above the panes into one
   short bar — name, one line of what it does, options — so the editor
   starts within ~90px of the header instead of ~200px.

   Everything is guarded with body:not(.presenting) so presentation
   mode keeps its own layout.
=========================================================== */

/* ---------------- compact top bar ---------------- */
.tool-topbar{
  display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;
  padding:13px 0 12px;
}
.tool-topbar h1{
  font-size:17.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0;
}
.tool-topbar .tt-sub{
  flex:1;min-width:200px;margin:0;
  padding-left:16px;border-left:1px solid var(--border);
  font-size:12.5px;line-height:1.5;color:var(--text-faint);
}
@media(max-width:820px){
  .tool-topbar .tt-sub{flex-basis:100%;padding-left:0;border-left:0;}
}
.tt-about{
  flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--text-dim);
  border:1px solid var(--border);border-radius:999px;padding:6px 14px;
  transition:all .15s;
}
.tt-about:hover{
  color:var(--brand);border-color:var(--brand);background:var(--brand-tint);text-decoration:none;
}
body.presenting .tool-topbar{display:none;}

/* ---------------- options row ---------------- */
body:not(.presenting) .convert-head{padding:0;}
body:not(.presenting) .opt-bar{
  margin-top:0;padding:8px 0 9px;border-top:1px solid var(--border);gap:8px 16px;
}

/* ---------------- give the panes the screen ---------------- */
body:not(.presenting) .convert-grid{
  min-height:min(820px, max(520px, calc(100vh - 200px)));
}

/* ---------------- in-pane note: caveats only, quietly ---------------- */
body:not(.presenting) .note{
  font-size:11px;line-height:1.5;color:var(--text-faint);opacity:.8;margin:8px 0 0;
}

/* ---------------- the reference section below ---------------- */
.tool-home{position:relative;}
.th-more{
  display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:26px;
}
.th-more::after{content:'';flex:1;height:1px;background:var(--border);}

/* ---------------- diagram tool: same bar, its own shell ---------------- */
.tool-topbar.solo{
  border-bottom:1px solid var(--border);background:var(--panel);padding:12px 0;
}
.tool-topbar.solo > .container{
  display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;width:100%;
}