/*
  present.css — presentation mode.

  Everything is scoped to body.presenting, so a tool page is completely
  unaffected until presentation mode is switched on. The goal is simple: the
  working surface gets the whole screen, chrome disappears, and type gets big
  enough to read from the back of a meeting room.
*/

/* ---------------- entering ---------------- */

body.presenting{overflow:hidden;}
body.presenting .site-header,
body.presenting .site-footer,
body.presenting #mobile-nav{display:none !important;}

/* The title/description/options block above a converter: hidden by default,
   restorable from the Panels menu (it holds the tool's settings). */
body.presenting .convert-head{display:none;}
body.presenting.show-options .convert-head{display:block;padding:10px 0;}
body.presenting.show-options .convert-head h1,
body.presenting.show-options .convert-head p,
body.presenting.show-options .convert-head .kicker{display:none;}
body.presenting.show-options .opt-bar{margin-top:0;padding-top:0;border-top:none;}

body.presenting .note{display:none;}

/* ---------------- layout: converter pages ---------------- */

body.presenting .convert-shell{min-height:100vh;height:100vh;border-top:none;}
/* Flex rather than grid so hiding a pane lets the others take the space. */
body.presenting .convert-grid{display:flex;flex-direction:row;min-height:0;height:100%;gap:0;}
body.presenting .pane{flex:1 1 0;min-width:0;border-right:1px solid var(--border);}
body.presenting .pane:last-child{border-right:none;}
body.presenting .pane.present-hidden{display:none;}
body.presenting .pane-body{padding:12px 16px;}
body.presenting .pane-head{padding:10px 16px;min-height:0;}
body.presenting .pane-status{padding:0 16px 10px;font-size:12.5px;}

/* Type scales with the presenter's zoom control. */
body.presenting .code-area{
  font-size:calc(12.5px * var(--present-scale, 1.35));
  line-height:1.6;
  padding:16px;
}
body.presenting .pane-title{font-size:12.5px;letter-spacing:0.06em;}
body.presenting .pane-head button{font-size:13px;padding:8px 14px;}

/* ---------------- layout: the diagram page ---------------- */

body.presenting .tool-shell{height:100vh;min-height:100vh;border-top:none;grid-template-columns:1fr;}
body.presenting .tool-left{display:none;}
body.presenting.show-editor .tool-shell{grid-template-columns:390px 1fr;}
body.presenting.show-editor .tool-left{display:flex;}
body.presenting.show-editor .ai-panel{display:none;}
body.presenting .canvas-toolbar{top:14px;right:14px;}
body.presenting .tool-right{min-height:0;}

/* ---------------- focus mode ---------------- */

/* Only the thing being demonstrated survives. */
body.presenting.focus-mode .pane:not(.present-primary){display:none;}
body.presenting.focus-mode .pane-head,
body.presenting.focus-mode .pane-status,
body.presenting.focus-mode .canvas-toolbar,
body.presenting.focus-mode .convert-head,
body.presenting.focus-mode .tool-left{display:none !important;}
body.presenting.focus-mode .pane-body{padding:0;}
body.presenting.focus-mode .code-area{border:none;border-radius:0;background:var(--panel);height:100%;}
body.presenting.focus-mode .tool-shell{grid-template-columns:1fr;}

/* ---------------- presenter toolbar ---------------- */

.presenter-bar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:300;display:none;align-items:center;gap:4px;
  padding:7px 9px;border-radius:999px;
  background:var(--panel);border:1px solid var(--border-strong);
  box-shadow:0 4px 10px rgba(10,18,32,.10), 0 18px 40px -14px rgba(10,18,32,.45);
  transition:opacity .3s, transform .3s;
}
body.presenting .presenter-bar{display:flex;}
.presenter-bar.idle{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none;}

.presenter-bar button{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid transparent;background:transparent;color:var(--text-dim);
  font-size:13px;font-weight:500;padding:8px 12px;border-radius:999px;white-space:nowrap;
}
.presenter-bar button:hover{background:var(--blue-tint);color:var(--blue);border-color:transparent;}
.presenter-bar button.on{background:var(--blue);color:#fff;}
.presenter-bar button.on:hover{background:var(--blue-dark);color:#fff;}
.presenter-bar button.exit{color:var(--text);font-weight:600;}
.presenter-bar .pb-sep{width:1px;height:22px;background:var(--border);margin:0 3px;flex-shrink:0;}
.presenter-bar .pb-zoom{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-faint);min-width:46px;text-align:center;}
.presenter-bar .pb-nav{display:flex;gap:2px;}
.presenter-bar .pb-nav button{padding:8px 9px;font-size:12px;}

/* popovers hanging off the toolbar */
.pb-menu{position:relative;}
.pb-pop{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  min-width:210px;background:var(--panel);border:1px solid var(--border-strong);
  border-radius:12px;box-shadow:0 18px 40px -14px rgba(10,18,32,.5);
  padding:8px;display:none;flex-direction:column;gap:2px;
}
.pb-menu.open .pb-pop{display:flex;}
.pb-pop label{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  font-size:13px;color:var(--text-dim);cursor:pointer;white-space:nowrap;
}
.pb-pop label:hover{background:var(--panel-2);color:var(--text);}
.pb-pop input[type="checkbox"]{width:15px;height:15px;accent-color:var(--blue);margin:0;cursor:pointer;}
.pb-pop .pb-pop-head{font-size:10.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-faint);padding:6px 10px 4px;}

/* ---------------- laser pointer ---------------- */

#laser-layer{position:fixed;inset:0;z-index:290;pointer-events:none;display:none;}
body.presenting.laser-on #laser-layer{display:block;}
body.presenting.laser-on{cursor:crosshair;}

/* ---------------- shortcut help ---------------- */

#present-help{
  position:fixed;inset:0;z-index:310;display:none;align-items:center;justify-content:center;
  background:rgba(12,18,30,.55);backdrop-filter:blur(3px);
}
#present-help.open{display:flex;}
.help-card{
  background:var(--panel);border:1px solid var(--border-strong);border-radius:16px;
  padding:26px 30px;max-width:460px;width:calc(100% - 40px);
  box-shadow:0 30px 70px -20px rgba(10,18,32,.6);
}
.help-card h3{margin:0 0 4px;font-size:17px;font-weight:700;}
.help-card > p{margin:0 0 18px;font-size:13px;color:var(--text-faint);}
.help-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;align-items:center;}
.help-card dt{text-align:right;}
.help-card dd{margin:0;font-size:13.5px;color:var(--text-dim);}
.help-card .help-foot{margin:20px 0 0;font-size:12px;color:var(--text-faint);}

/* ---------------- the Present button in the header ---------------- */

.present-btn{display:inline-flex;align-items:center;gap:6px;}

/* Small screens: stack the panes rather than squeezing them. */
@media(max-width:820px){
  body.presenting .convert-grid{flex-direction:column;}
  body.presenting .pane{border-right:none;border-bottom:1px solid var(--border);}
  .presenter-bar{bottom:10px;gap:2px;padding:5px 6px;flex-wrap:wrap;max-width:calc(100vw - 20px);justify-content:center;}
  .presenter-bar button{padding:7px 10px;font-size:12.5px;}
}

/* Printing a presentation should print the surface, not the toolbar. */
@media print{
  .presenter-bar, #laser-layer, #present-help{display:none !important;}
}