/* ===========================================================================
   PRESENTATION MODE — shared by every tool
   ---------------------------------------------------------------------------
   For an iPad on the table between two people, or a laptop on a screen. The
   site chrome goes, the type comes up, and the tool fills the display. It is
   not a slide deck: the page stays one continuous, scrolling, fully working
   page, because the point is to change a figure while the client watches.

   To put a page into it:
     1. <link rel="stylesheet" href="/present.css"> after home.css
     2. <script src="/present.js" defer></script> before </body>
     3. data-present-root on the tool's own wrapper
     4. <div class="pm-top"><button type="button" class="pm-launch">…</button></div>
        as the first thing inside that wrapper
   =========================================================================== */

/* ---- the button that enters it ------------------------------------------ */
.pm-top{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin:0 0 20px}
.pm-launch{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;flex:none;
  font:700 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  padding:14px 22px;min-height:48px;
  color:#fff;background:var(--petrol);border:1px solid var(--petrol);border-radius:999px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.pm-launch:hover{background:var(--petrol-deep);border-color:var(--petrol-deep);transform:translateY(-1px)}
.pm-launch:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
/* Each tool scopes `.hos svg` / `.pac svg` to width:100%, and those rules sit
   in a later <style> block, so this one has to out-specify them rather than
   rely on order. */
button.pm-launch svg{width:17px;height:17px;flex:none;display:inline-block}
@media (max-width:520px){
  .pm-launch{font-size:12px;padding:12px 17px;letter-spacing:.07em}
}

/* ---- the mode itself ---------------------------------------------------- */
html.pm,html.pm body{background:var(--paper)}
html.pm .masthead,html.pm .foot,html.pm .last,html.pm .skip,
html.pm .pm-top,html.pm [data-pm-hide]{display:none!important}

html.pm main > .band{padding:clamp(18px,3vh,36px) 0}
html.pm .shell{max-width:none;padding:0 clamp(16px,3.2vw,52px)}
/* room for the exit control, and for the home indicator on an iPad */
html.pm main{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}

/* Scale the whole tool rather than restating three pages' type scales. zoom
   participates in layout and in hit-testing, which transform: scale does not. */
html.pm .pm-root{zoom:var(--pm-zoom,1.15)}

/* ---- the one piece of chrome that stays --------------------------------- */
.pm-exitbar{
  position:fixed;top:0;right:0;z-index:60;
  display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) clamp(12px,2.4vw,24px) 10px 16px;
  background:linear-gradient(to bottom,var(--paper) 62%,rgba(234,228,217,0));
  font-family:"Inter",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none}
.pm-exitbar[hidden]{display:none}
.pm-b{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;min-width:46px;padding:0 15px;flex:none;cursor:pointer;
  font:600 14px/1 "Inter",system-ui,sans-serif;
  color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:0 2px 10px rgba(20,24,28,.07);
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.pm-b:hover:not(:disabled){border-color:var(--petrol);color:var(--petrol)}
.pm-b:disabled{opacity:.34;cursor:default}
.pm-b:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
button.pm-b svg{width:17px;height:17px;flex:none;display:inline-block}
.pm-b.pm-icon{padding:0}
.pm-zoom{display:flex;gap:7px}
.pm-zoom .pm-b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;padding:0 13px}
@media (max-width:620px){
  .pm-zoom{display:none}
  .pm-exit span{display:none}
  .pm-exit{padding:0}
}

/* ---- turn the tablet ---------------------------------------------------- */
.pm-rotate{display:none}
@media (orientation:portrait) and (min-width:640px){
  html.pm .pm-rotate{
    position:fixed;left:50%;transform:translateX(-50%);z-index:59;
    bottom:calc(18px + env(safe-area-inset-bottom,0px));
    display:flex;align-items:center;gap:9px;
    padding:11px 18px;border-radius:999px;
    background:var(--ink-2);border:1px solid var(--ink-line);
    font:500 13.5px/1 "Inter",system-ui,sans-serif;color:var(--on-ink-dim);
    box-shadow:0 8px 24px rgba(20,24,28,.28)}
}

@media (prefers-reduced-motion:reduce){.pm-b,.pm-launch{transition:none}}

/* Presentation mode is for a screen. A print of it is just the page. */
@media print{
  .pm-exitbar,.pm-rotate,.pm-top{display:none!important}
  html.pm .pm-root{zoom:1}
  html.pm main{padding-bottom:0}
}