/* Global styles for PitchCraft: the design's <helmet> styles plus host and print rules. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
#app,#app>.app-host{height:100%}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(130,130,130,.30);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(130,130,130,.5)}
/* ---- Touch. The pitch, its handles and the animation timeline take every
   gesture themselves (Pointer Events in pitchboard.js). touch-action:none stops
   the browser from scrolling/zooming the page while a finger drags on them, and
   the select/callout rules stop a long press from turning into text selection or
   the context menu. Editable text inside the pitch gets its selection back. */
.pb-touch{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pb-touch [contenteditable="true"]{user-select:text;-webkit-user-select:text;touch-action:auto}
/* ---- Fitting the screen -------------------------------------------------
   The app is desktop-first; these rules let it fit tablets. "Tablet" is any
   screen under 1180px, OR a touch screen under 1600px — a Galaxy Tab S10 Lite
   reports 1408px wide in landscape, desktop-sized on paper and not in hand. */

/* The tool row above the pitch wraps whenever it does not fit, at ANY width, so
   the colours can never scroll out of reach behind a contextual control. On a
   wide desktop it still fits on one row, so nothing changes there. */
.pb-toolbar-row{overflow-x:visible!important}
.pb-toolbar{flex-wrap:wrap;justify-content:center;row-gap:6px;flex:1 1 auto!important;max-width:100%}
/* The pitch-options row is secondary: it scrolls sideways when it must, and is
   left-aligned so its start is always reachable. */
.pb-pitchbar{overflow-x:auto;min-width:0;flex-wrap:nowrap}
/* Header: never let it push the page wider than the screen. */
header{overflow:hidden;min-width:0}
/* Nothing may force the page wider than the screen. The design's root carries
   min-width:1040px to protect the desktop layout; on any tablet it gives way. */
main{min-width:0;max-width:100%}
/* Height: 100vh on Android is the LARGEST viewport (browser bars hidden), so
   the bottom strip of the app sat behind the address bar / navigation buttons.
   100dvh follows the visible area. safe-area padding keeps the bottom row clear
   of gesture bars and rounded corners. */
@supports (height:100dvh){ .app-host>div{height:100dvh!important} }
.app-host>div{padding-bottom:env(safe-area-inset-bottom,0px)!important;box-sizing:border-box}

@media (max-width:1180px), ((pointer:coarse) and (max-width:1600px)){
  .app-host>div{min-width:0!important}
  header{gap:10px!important;padding:0 12px!important;height:48px!important}
  .pb-toolbar-row{padding:6px 10px!important}
  .pb-pitchbar{padding:8px 10px!important}
}
@media (max-width:1180px) and (orientation:portrait), ((pointer:coarse) and (max-width:1600px) and (orientation:portrait)){
  .pb-pitchbar{flex-wrap:wrap;row-gap:6px;overflow-x:visible}
}
@media (max-width:1000px), ((pointer:coarse) and (max-width:1250px)){ header .pb-hdr-scale{display:none!important} }
@media (max-width:980px), ((pointer:coarse) and (max-width:1250px)){ header .pb-hdr-label{display:none!important} }
@media (max-width:880px){ header .pb-hdr-theme,header .pb-hdr-name{display:none!important} }
/* Touch screens: the chrome is not text. Without this a slow tap on a label
   selects and highlights it (and Android offers to copy it). Fields stay
   selectable. Also drop the grey tap flash. */
@media (pointer:coarse){
  .app-host{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
  .app-host input,.app-host textarea,.app-host [contenteditable="true"]{user-select:text;-webkit-user-select:text}
}
.pb-compact{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.pb-compact input,.pb-compact textarea,.pb-compact [contenteditable="true"]{user-select:text;-webkit-user-select:text}
.pb-compact input[type=range]{-webkit-appearance:none;appearance:none;background:transparent}
.pb-compact input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:rgba(27,25,22,.18)}
.pb-compact input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--accent,#1f8a4c);margin-top:-9px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
@keyframes floatIn{from{opacity:0}to{opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Active tool highlight in the side panels, picked up by data-active-tool="1". */
[data-active-tool="1"]{border-color:var(--accent,#1f8a4c)!important;background:var(--accentsoft,#e8f4ec)!important;color:var(--accent,#1f8a4c)!important}
/* Grey-italic placeholder for empty contenteditable fields. Interpolated text
   renders as <span class="sc-interp">…</span>, so an empty value leaves an empty
   wrapper as an only-child; :has() catches that, with plain :empty and the
   stray <br> rule as fallbacks for the post-edit state. */
[data-placeholder][contenteditable]:not(:focus):has(> .sc-interp:only-child:empty)::before,
[data-placeholder][contenteditable]:empty::before,
[data-placeholder][contenteditable]:not(:focus):has(> br:only-child)::before{
  content:attr(data-placeholder);
  color:#918d83;
  font-style:italic;
  font-weight:500;
  pointer-events:none;
}
.app-error{margin:24px;padding:12px 16px;background:#b00020;color:#fff;font:13px/1.5 ui-monospace,monospace;border-radius:8px;white-space:pre-wrap}
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #app, #app > .app-host { height: auto; }
  *, *::before, *::after {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important; animation-duration: .001s !important;
    animation-iteration-count: 1 !important; animation-fill-mode: both !important;
    animation-play-state: running !important; transition-duration: 0s !important;
  }
}

/* ---- Compact (tablet) layout — view-compact.js ------------------------------- */
.pb-compact [data-stage]{padding:14px!important}
.pb-compact .pb-rail::-webkit-scrollbar{display:none}
.pb-compact .pb-toprow::-webkit-scrollbar,.pb-compact .pb-bottom::-webkit-scrollbar{display:none}
/* The details slide-over hosts the desktop right panel at full width. */
.pb-slideover-body aside{width:100%!important;flex:1 1 auto!important;border:none!important}
.pb-slideover-body .pb-panel-head,.pb-slideover-body .pb-panel-resize{display:none!important}
.pb-slideover-body input,.pb-slideover-body select,.pb-slideover-body [contenteditable="true"]{min-height:44px}
.pb-slideover-body textarea{min-height:72px}
/* The top row's Details button never scrolls out of reach. */
.pb-compact .pb-toprow-mid{scrollbar-width:none}
.pb-compact .pb-toprow-mid::-webkit-scrollbar{display:none}
@media (max-width:900px){ .pb-compact .pb-toprow input[type=range]{width:88px!important} .pb-compact .pb-toprow input[type=text]{width:120px!important} }
/* Present mode: the app header goes, the pitch gets the room. */
[data-present="1"]>header{display:none!important}
.pb-present .pb-hdr-label{display:none}
@media (min-width:1700px){ .pb-present .pb-hdr-label{display:inline} }
.pb-present .pb-present-top .pb-hdr-label{display:inline}
@media (max-width:1000px){ .pb-present .pb-present-top .pb-hdr-label{display:none} }
.pb-present [data-stage]{padding:18px 26px!important}
.pb-present .pb-present-bottom{scrollbar-width:none}
.pb-present .pb-present-bottom::-webkit-scrollbar{display:none}
/* Help on touch: finger-sized section buttons; in portrait the section list
   becomes a scrolling row above the text. */
@media (pointer:coarse){ .pb-help-nav button{min-height:44px} .pb-help>div:first-child button{width:44px!important;height:44px!important} }
@media (max-width:900px) and (orientation:portrait){ .pb-help{height:88vh!important} }
@media (max-width:900px){
  .pb-help-body{flex-direction:column}
  .pb-help-nav{width:100%!important;flex-direction:row!important;overflow-x:auto;overflow-y:hidden!important;border-right:none!important;border-bottom:1px solid var(--line,#e7e6e0);padding:8px 10px!important;gap:6px!important}
  .pb-help-nav button{white-space:nowrap;width:auto!important;flex:none}
}
.pb-compact .pb-cdot{width:42px!important;height:42px!important}
.pb-compact [data-colour-popover]{width:332px!important}
/* Animation bottom panel: finger-sized transport. */
.pb-bottom-anim button{min-height:44px;min-width:44px}
.pb-bottom-anim input[type="range"]{height:28px}
/* Portrait tablet: practice cards drop to number-only, labels give way. */
@media (max-width:900px){
  .pb-compact .pb-card-text{display:none!important}
  .pb-compact .pb-card-num{display:inline!important}
  .pb-compact .pb-card{padding:0 10px 0 4px!important}
  .pb-compact .pb-hide-narrow{display:none!important}
  .pb-compact .pb-toprow .pb-swatch{width:36px!important}
}

/* Free / Pro: a locked option keeps its place and wears a padlock (a tap opens the explainer). */
.pb-locked{position:relative}
.pb-locked::after{content:"";position:absolute;top:5px;right:5px;width:11px;height:11px;pointer-events:none;opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231d1c19' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='9' height='6.5' rx='1.5'/%3E%3Cpath d='M4.5,6 V4.2 a2.5,2.5 0 0 1 5,0 V6'/%3E%3C/svg%3E") no-repeat center/contain}
[data-page="plans"]>header,[data-page="account"]>header{display:none!important}

/* Lists inside a note / text box: tight, like the rest of the note. */
[data-edit-id] ul,[data-edit-id] ol{margin:.15em 0;padding-left:1.3em}
[data-edit-id] li{margin:0;padding:0}
[data-edit-id] li+li{margin-top:.1em}