/* play-popup.css -- the play / formation / front popup (play-popup.js),
   2026-10-25. Dave approved it on mockups/play-popup-mockup.html, revision 2.

   The popup wears the Numbered Calls › Edit <dialog> he approved on
   2026-10-08 (playbook.html #csCallDlg): 16px radius, surface-container, the
   .55 backdrop, Roboto Condensed 18px title, 8px buttons. Icon buttons are
   50% (DESIGN-STANDARDS). The tool strip is Multi Mode's .panel-tool-btn in
   the slim icon-only column the UI checklist queues for Multi Mode itself.
   Everything is scoped under .pb3pp so it cannot reach the page around it --
   except .pname, the clickable name on a page's rows. */

/* A name that opens the popup: the room's existing link treatment for
   clickable text (.crumb:hover's underline). It keeps its own colour -- a
   name is still a name -- and the Pencil beside it is untouched. */
.pname{cursor:pointer;}
.pname:hover{text-decoration:underline;text-underline-offset:3px;}
.pname:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}

.pb3pp{border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-container);
  color:var(--on-background);padding:0;width:calc(100% - 32px);max-width:1040px;max-height:calc(100dvh - 32px);overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;}
.pb3pp[open]{display:flex;flex-direction:column;}
.pb3pp::backdrop{background:rgba(0,0,0,.55);}
.pb3pp [hidden]{display:none !important;}
.pb3pp .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
  display:inline-block;line-height:1;letter-spacing:normal;-webkit-font-smoothing:antialiased;}
.pb3pp .pp-head{display:flex;align-items:flex-start;gap:4px;padding:14px 12px 10px 20px;flex:0 0 auto;}
.pb3pp .pp-head h3{font-family:'Roboto Condensed',sans-serif;font-size:18px;font-weight:700;margin:0;color:var(--on-background);}
.pb3pp .pp-sub{color:var(--dim);font-size:12.5px;margin-top:2px;}
.pb3pp .spacer{flex:1;}
.pb3pp .pp-icon{width:40px;height:40px;border-radius:50%;border:none;background:none;color:var(--dim);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color .15s ease,color .15s ease;}
.pb3pp .pp-icon:hover{background:var(--surface-container-high);color:var(--on-background);}
.pb3pp .pp-icon:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.pb3pp .pp-icon[disabled]{opacity:.35;cursor:default;background:none;}
.pb3pp .pp-stage{display:flex;gap:10px;padding:0 20px;flex:1 1 auto;min-height:0;}
/* touch-action:none on the drawing surface itself, as Multi Mode's
   .panel-canvas -- the Pencil and a finger draw rather than scroll. */
.pb3pp .pp-field{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.pb3pp .pp-field svg{display:block;width:100%;height:auto;max-height:100%;border-radius:12px;}
.pb3pp.sketching .pp-field{cursor:crosshair;}
.pb3pp.sketching.moving .pp-field{cursor:pointer;}
.pb3pp .pp-acts{display:flex;align-items:center;gap:8px;padding:12px 20px 16px;flex:0 0 auto;flex-wrap:wrap;}
.pb3pp .pp-count{color:var(--dim);font-size:12.5px;min-width:52px;text-align:center;font-variant-numeric:tabular-nums;}
.pb3pp .pp-step{display:inline-flex;align-items:center;gap:4px;}
.pb3pp .pp-btn{background:none;border:1px solid var(--outline-variant);color:var(--on-background);font-family:'Roboto Condensed',sans-serif;
  font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background-color .15s ease;}
.pb3pp .pp-btn:hover{background:var(--surface-container-high);}
.pb3pp .pp-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.pb3pp .pp-btn.fill{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.pb3pp .pp-btn.fill:hover{box-shadow:var(--elevation-hover);}
.pb3pp .pp-btn .material-symbols-outlined{font-size:17px;}

/* FULL SCREEN: the picture alone, filling the screen (Dave, 2026-10-29:
   "the image should go full screen with two buttons: X to close full screen
   and button to flip the play ... both can overlay over the play image. it's
   too small on an iphone even in landscape mode"). The header, the action
   row and the tool strip go away -- on an iPhone turned sideways they were
   taking half of the 390px there is. Two floating icon buttons sit over the
   picture, the popup's own 50% icon button grown to 44px on a
   surface-container-high disc so it reads over the green. The safe-area
   insets keep them and the field clear of a notch; a page without
   viewport-fit=cover reports them as 0. An iPhone, and the iPad app's web
   view, refuse the browser's own full screen, so this layout IS the full
   screen there -- it never assumes the browser helped. */
.pb3pp.full{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;border:none;margin:0;overflow:hidden;}
/* flex:1 and overflow:hidden repeat here on purpose: the phone rule below
   pins the stage to its content and lets the popup scroll, and both are
   right for the popup and wrong for the full screen. */
.pb3pp.full .pp-stage{flex:1 1 auto;min-height:0;}
.pb3pp.full .pp-head,.pb3pp.full .pp-acts,.pb3pp.full .pp-tools{display:none;}
.pb3pp.full .pp-stage{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);}
.pb3pp.full .pp-field{overflow:hidden;}
.pb3pp.full .pp-field svg{height:100%;width:100%;border-radius:0;}
.pb3pp .pp-fs{display:none;}
.pb3pp.full .pp-fs{display:block;}
.pb3pp .pp-fs-btn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);width:44px;height:44px;border-radius:50%;border:none;
  background:var(--surface-container-high);color:var(--on-background);box-shadow:var(--elevation-card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:box-shadow .15s ease,background-color .15s ease,color .15s ease;}
.pb3pp .pp-fs-btn:hover{box-shadow:var(--elevation-hover);}
.pb3pp .pp-fs-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.pb3pp .pp-fs-btn.fill{background:var(--primary);color:var(--on-primary);}
.pb3pp .pp-fs-btn .material-symbols-outlined{font-size:26px;}
.pb3pp .pp-fs-close{right:calc(env(safe-area-inset-right,0px) + 12px);}
.pb3pp .pp-fs-flip{left:calc(env(safe-area-inset-left,0px) + 12px);}

/* The Drawing Tools strip, on the Drawing Hand side like Multi Mode's. */
.pb3pp .pp-tools{display:none;flex-direction:column;gap:6px;flex:0 0 48px;align-self:center;}
.pb3pp.sketching .pp-tools{display:flex;}
:root[data-hand="left"] .pb3pp .pp-tools{order:-1;}
.pb3pp .pp-tools hr{width:100%;border:none;border-top:1px solid var(--outline-variant);margin:2px 0;}
.pb3pp .tool-btn{width:48px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-container-high);border:1px solid var(--outline-variant);border-radius:8px;cursor:pointer;
  color:var(--on-background);box-shadow:var(--elevation-card);
  transition:box-shadow .15s ease, background-color .15s ease, border-color .15s ease;}
.pb3pp .tool-btn:hover:not(.active){box-shadow:var(--elevation-hover);border-color:var(--primary);}
.pb3pp .tool-btn.active{border-color:var(--primary);background:var(--primary-dim);}
.pb3pp .tool-btn .material-symbols-outlined{font-size:20px;}
.pb3pp .tool-btn .tool-icon-svg{display:block;}
.pb3pp .tool-btn.armed{background:var(--danger);border-color:var(--danger);color:var(--background);}
.pb3pp .tool-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}

/* Touch screens: the 48dp rule, padding the target and not the artwork. */
@media (hover:none){
  .pb3pp .pp-btn{padding:12px 16px;}
  .pb3pp .pp-icon{width:48px;height:48px;}
}
/* Phone: the stepper takes its own row above the buttons and the tools drop
   under the field as one row -- nav.js's own 599px break. */
@media (max-width:599px){
  .pb3pp{overflow:auto;}
  .pb3pp .pp-head{padding:12px 8px 8px 16px;}
  .pb3pp .pp-acts{padding:8px 12px 12px;}
  .pb3pp .pp-acts .spacer{display:none;}
  .pb3pp .pp-step{order:-1;width:100%;justify-content:center;}
  .pb3pp .pp-acts .pp-btn{flex:1 1 140px;justify-content:center;padding:12px 10px;}
  .pb3pp .pp-stage{flex-direction:column;flex:0 0 auto;padding:0 12px;}
  .pb3pp .pp-tools{flex-direction:row;flex-wrap:wrap;justify-content:center;flex:0 0 auto;align-self:stretch;}
  :root[data-hand="left"] .pb3pp .pp-tools{order:0;}
  .pb3pp .pp-tools hr{width:1px;height:32px;border:none;border-left:1px solid var(--outline-variant);margin:6px 2px;}
  .pb3pp .tool-btn{width:44px;}
}