/* OBP look for the PlayDraw editor at /draw/ (built from the PlayDraw Pro web app). Loaded after the editor's style.css and guided.css.
   Colors and fonts come from /assets/css/styles.css (navy, orange, the Helvetica stack).
   Built into online-basketball-playbook-site/draw/ by scripts/build_draw.py. Edit this file, not the copy. */
:root {
  --obp-header: 93px; /* .site-header: 30px message bar, 60px menu row, 3px orange rule (styles.css), every width */
  --obp-bar: 52px;    /* the editor bar under it */
  --obp-court-ratio: 0.943; /* the half court plus the room under the baseline (50 by 53), set from the real court by obp-draw.js */
  --obp-court-frame-ratio: 0.943; /* the court on screen: the same for a half court, half of it (twice as tall) for a full court */
  --bg: #0f1d3a;
  --surface: #162a52;
  --surface2: #1f3160;
  --surface3: #2a3f73;
  --border: #2c4272;
  --border2: #4a6096;
  --accent: #e8701e;
  --accent2: #ff8c2a;
  --accent-glow: rgba(232, 112, 30, 0.25);
  --text: #ffffff;
  --text2: #c8d1e4;
  --text3: #9fb0cf;
  --mobile-viewport-height: calc(100dvh - var(--obp-header));
}

/* The page scrolls: site header, the drawer at screen height, then the page text and footer. */
html { overflow-x: hidden; }
body {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  font-family: var(--font-sans);
}
.site-header { position: sticky; top: 0; z-index: 30; }


.animator-studio,
.publishing-studio { height: calc(100dvh - var(--obp-header) - var(--obp-bar) - env(safe-area-inset-top)); }
/* The drawer fills the screen, and grows when the tool column needs more room (Lee 2026-10-14: the buttons
   under Add Step and Steps were cut off on a short screen). The court column is sized from the screen height. */
html body .layout { height: auto; min-height: calc(100dvh - var(--obp-header) - var(--obp-bar) - env(safe-area-inset-top)); }
html body .layout .center { height: auto; min-height: 100%; overflow: visible; }
.home-screen {
  height: calc(100dvh - var(--obp-header));
  padding-top: 28px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

/* Editor bar under the site header: Home, the name, the PlayDraw / Napkin switch, Export */
.header {
  box-sizing: border-box;
  min-height: 0;
  height: calc(var(--obp-bar) + env(safe-area-inset-top));
  gap: 12px;
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--navy-2, #162a52);
  border-bottom: 1px solid var(--border);
}
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.home-back { min-height: 40px; }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 800; font-size: 20px; letter-spacing: 0; color: #fff; text-transform: none; white-space: nowrap; }
.home-wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.obp-free-pill {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--yellow, #ffc61a);
  color: var(--navy, #0f1d3a);
  font: 800 11px/1.3 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-wordmark .obp-free-pill { font-size: 12px; }
.header-right { align-items: center; gap: 8px; }
.obp-mode-switch {
  flex: none;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: #0b1630;
}
.obp-mode {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text2);
  font: 700 14px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}
.obp-mode:hover { color: #fff; }
.obp-mode.is-active { background: var(--accent); color: var(--navy, #0f1d3a); }
.obp-mode:focus-visible { outline: 2px solid var(--yellow, #ffc61a); outline-offset: 2px; }
.home-topbar .obp-mode-switch { margin-left: auto; }

/* Lee 2026-10-13: the web drawer opens on the court. No home screen, no Home button, no series name,
   no save status (nothing is saved), no phone tab bar to the studios. */
.home-screen { display: none !important; }
.home-back { display: none !important; }
#editorSeriesName { display: none !important; }
#saveStatus { display: none !important; }
#mobileTabBar { display: none !important; }
.mobile-studios-sheet { display: none !important; }
.workspace-switch { display: none !important; }
.editor-heading { display: none !important; } /* the play name row: fewer words around the court (Lee 2026-10-14) */

/* Court controls under the court: Half or Full, NBA / College / High School, and Start over */
.obp-court-controls { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Each group fills the row: Half and Full side by side, the four court types two by two, so nothing spills
   past the edge of a narrow column (Lee 2026-10-14: "you can't even see FIBA") */
.obp-seg { flex: 1 0 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--border2); border-radius: 22px; background: #0b1630; }
.obp-seg[aria-label="Court type"] { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.obp-seg-btn {
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text2);
  font: 700 13px/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.obp-seg-btn:hover { color: #fff; }
.obp-seg-btn.is-active { background: var(--accent); color: var(--navy, #0f1d3a); }
.obp-seg-btn:focus-visible { outline: 2px solid var(--yellow, #ffc61a); outline-offset: 2px; }
.obp-start-over { flex: 1 0 100%; min-height: 42px; padding: 0 14px; font-weight: 700; }
/* Keep this play: under the court, where a coach lands when the play is done (Lee 2026-10-14) */
.obp-keep { flex: 1 0 100%; min-height: 48px; font-size: 16px; }

/* One-time offer to download the plays the old web drawer saved in this browser */
.obp-backup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; background: var(--yellow, #ffc61a); color: var(--navy, #0f1d3a); }
.obp-backup-bar p { flex: 1 1 320px; margin: 0; font: 600 14px/1.4 var(--font-sans); }
.obp-backup-bar .tbtn { background: transparent; color: var(--navy, #0f1d3a); border-color: var(--navy, #0f1d3a); font-weight: 700; }

/* The court as large as the screen allows. The slot takes the free space and the court fills it at
   the court's own shape: height-driven on laptops, width-driven on phones, no empty box around it. */
.layout .center { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; align-items: stretch; }
.obp-court-slot { flex: none; width: 100%; container-type: inline-size; display: grid; place-items: start center; } /* court at the top, the out-of-bounds strip under the baseline stays in view */
.layout .obp-court-slot .canvas-frame {
  width: 100cqw;
  height: auto;
  aspect-ratio: var(--obp-court-frame-ratio); /* a full court is twice as tall at the same scale, the page scrolls */
  max-width: none;
  border-radius: 8px;
}
.editor-heading { width: 100%; display: flex; align-items: baseline; gap: 10px; min-height: 28px; }
#editorSeriesName { min-height: 28px; padding: 0; font-size: 13px; font-weight: 700; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#editorPlayName { font-size: 18px; min-width: 0; }
#saveStatus { margin-left: auto; flex: none; }
.editor-tools { width: 100%; }
.editor-tools .tbtn { min-height: 44px; font-family: var(--font-sans); font-weight: 700; }
.drawing-hint { width: 100%; margin: 0; font-size: 13px; line-height: 1.35; color: var(--text2); text-align: center; }
.layout .playback-bar { width: 100%; box-sizing: border-box; padding: 0; gap: 6px; background: transparent; border: 0; }
.playback-bar .pb-btn { font-family: var(--font-sans); font-weight: 700; border-radius: 6px; }

/* Laptops, desktops and tablets on their side: court on the left at full height, one tool column beside it */
@media (orientation: landscape) and (min-width: 700px) {
  .layout .center {
    display: grid;
    grid-template-columns: min(calc(100vw - 300px), calc((100dvh - var(--obp-header) - var(--obp-bar) - 24px) * var(--obp-court-ratio))) 244px;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    justify-content: center;
    align-content: stretch;
    gap: 10px 18px;
    padding: 12px 16px;
  }
  .obp-court-slot { grid-column: 1; grid-row: 1 / -1; }
  .editor-heading { grid-column: 2; grid-row: 1; flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  #editorSeriesName { max-width: 100%; text-align: left; }
  #editorPlayName { white-space: normal; font-size: 20px; line-height: 1.2; }
  #saveStatus { margin-left: 0; }
  .editor-tools { grid-column: 2; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .drawing-hint { grid-column: 2; grid-row: 3; text-align: left; }
  .layout .playback-bar { grid-column: 2; grid-row: 4; }
  .layout .playback-bar > :nth-child(4) { min-height: 48px; font-size: 15px; }
  .obp-court-controls { grid-column: 2; grid-row: 5; align-self: start; flex-direction: column; align-items: stretch; padding-top: 8px; border-top: 1px solid var(--border); }
  .obp-keep { flex-basis: auto; margin-top: 4px; }
}

/* Phones on their side (short screens): a wider tool column with four tools a row, no hint line */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 550px) {
  .layout .center {
    grid-template-columns: min(calc(100vw - 340px), calc((100dvh - var(--obp-header) - var(--obp-bar) - 16px) * var(--obp-court-ratio))) 296px;
    gap: 6px 12px;
    padding: 8px 12px;
    overflow-y: auto;
  }
  .editor-heading { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-bottom: 4px; }
  #editorPlayName { font-size: 16px; }
  .editor-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .editor-tools .tbtn { min-height: 40px; padding: 4px 2px; font-size: 12px; }
  .drawing-hint { display: none; }
  .layout .playback-bar .pb-btn { min-height: 40px; }
  .layout .playback-bar > :nth-child(4) { min-height: 40px; font-size: 13px; }
}

/* Upright screens: the page scrolls. The court keeps its full width at the top and the controls, Keep this
   play, the tools and the steps sit under it (a fixed-height box squeezed the court once the Keep button moved
   under the court, Lee 2026-10-14). */
@media (orientation: portrait), (max-width: 699px) {
  html body .layout { height: auto; min-height: 0; }
  html body .layout .center { height: auto; overflow: visible; }
}

/* The step bar is a six-column grid everywhere: < Step 1 of 1 > on one row, Play under it, then Add Step,
   Steps and More (Lee 2026-10-14) on one row. */
.layout .playback-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.layout .playback-bar > * { min-width: 0; }
.layout .playback-bar > :nth-child(1) { grid-column: 1 / 2; }
.layout .playback-bar > :nth-child(2) { grid-column: 2 / 6; text-align: center; align-self: center; }
.layout .playback-bar > :nth-child(3) { grid-column: 6 / 7; }
.layout .playback-bar > :nth-child(4) { grid-column: 1 / -1; }
.layout .playback-bar > :nth-child(5) { grid-column: 1 / 3; }
.layout .playback-bar > :nth-child(6) { grid-column: 3 / 5; }
.layout .playback-bar > :nth-child(7) { grid-column: 5 / 7; }
@media (max-width: 480px) {
  .layout .center { padding-left: 6px; padding-right: 6px; gap: 6px; }
  /* edge to edge on a phone: the margin around the court is page navy, so it reads as the page edge */
  .obp-court-slot { width: calc(100% + 12px); margin: 0 -6px; }
  .header { padding-left: 8px; padding-right: 8px; gap: 8px; }
  .header-left { gap: 8px; }
  .logo { font-size: 17px; gap: 6px; }
  .logo .obp-free-pill { display: none; } /* the bar is too narrow on a phone, the home screen still says Free */
  .editor-export { padding: 8px 10px; }
  .obp-mode-switch .obp-mode:not(.obp-mode-napkin) { display: none; }
  .obp-mode-switch .obp-mode-napkin { background: #fbfaf5; color: #111; }
  .obp-mode { min-height: 34px; padding: 0 12px; }
  /* home screen: name and Menu on the first row, the full switch under them */
  .home-topbar { flex-wrap: wrap; row-gap: 12px; }
  .home-topbar .home-wordmark { font-size: 24px; white-space: nowrap; }
  .home-topbar .obp-mode-switch { order: 3; margin-left: 0; }
  .home-topbar .obp-mode-switch .obp-mode:not(.obp-mode-napkin) { display: inline-flex; }
  .home-topbar .obp-mode-switch .obp-mode-napkin { background: transparent; color: var(--text2); }
  .drawing-hint { font-size: 12px; }
}
@media (max-width: 360px) {
  .home-back { min-width: 40px; padding: 0 8px; font-size: 0; } /* the button keeps aria-label="Home" */
  .home-back::before { content: "\2039"; font-size: 24px; line-height: 1; }
  .header-left { flex: 1 1 auto; overflow: hidden; }
  .header-left > div { min-width: 0; }
  .logo { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .header-right .editor-export { padding: 8px; }
}

/* Editor controls in the site's colors */
.tbtn, .pb-btn, .home-back, .dialog-head button { font-family: var(--font-sans); }
.tbtn.active, .editor-tools .active, .pb-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--navy, #0f1d3a); }
.export-btn { background: var(--accent); color: var(--navy, #0f1d3a); font-family: var(--font-sans); font-weight: 800; }
.export-btn:hover { background: var(--accent2); }
.export-all-btn { font-family: var(--font-sans); }
.section-title, .hint, .app-dialog, .app-dialog input, .app-dialog select, .app-dialog textarea { font-family: var(--font-sans); }
#editorSeriesName { color: var(--yellow, #ffc61a); }

/* Home screen colors (guided.css hard-codes a green-black theme) */
.home-action { background: var(--surface); border-color: var(--border2); color: var(--text); }
.home-action.primary { background: var(--accent); color: var(--navy, #0f1d3a); border-color: var(--accent); }
.series-card, .play-row { border-color: var(--border); color: var(--text); }
.home-screen .tbtn { border-color: var(--border2); color: var(--text); }
@media (hover: hover) {
  .home-action:hover { background: var(--surface2); }
  .home-action.primary:hover { background: var(--accent2); }
  .play-row:hover { background: var(--surface2); }
}
.home-footer { color: var(--text3); }

/* The site's .section (page bands) shares a class name with the editor's panels */
.layout .section, .app-dialog .section { width: auto; }

/* Internal PlayDraw tools that have no place on this site */
.web-only, .native-only, #purchaseRestoreControl { display: none !important; }

/* OBP Pro locks */
.obp-pro-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--yellow, #ffc61a);
  color: var(--navy, #0f1d3a);
  font: 800 12px/1.3 var(--font-sans);
  white-space: nowrap;
}
.obp-pro-badge-large { font-size: 14px; padding: 5px 12px; margin: 4px 0 12px; }
.obp-locked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px dashed var(--border2);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
}
.obp-locked-row + .obp-locked-row { margin-top: 6px; }
.obp-locked-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.obp-pro-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  color: var(--yellow, #ffc61a);
  font-weight: 800;
}
.home-action .obp-pro-badge { margin-left: auto; margin-right: 8px; }

/* Keep this play dialog: the email form, then the GIF and video for an animated play, then the Pro note */
.app-dialog[data-kind="obp-export"] #dialogBody,
.app-dialog[data-kind="obp-locked"] #dialogBody { overflow-y: auto; }
.obp-export-free, .obp-export-kept, .obp-export-pro { display: grid; gap: 8px; padding: 4px 0 16px; }
.obp-export-kept, .obp-export-pro { border-top: 1px solid var(--border); padding-top: 16px; }
.obp-export-free h3, .obp-export-kept h3, .obp-export-pro h3 { margin: 0; font: 800 17px/1.3 var(--font-sans); color: #fff; }
.obp-export-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.obp-export-row .tbtn { min-height: 48px; font-weight: 700; }
.obp-gate-form { display: grid; gap: 10px; }
.obp-gate-form label { display: grid; gap: 6px; font-size: 14px; color: var(--text2); }
.obp-gate-status { min-height: 20px; margin: 0; color: var(--yellow, #ffc61a); font-size: 14px; }
.obp-gate-done { margin: 0; padding: 12px; border-radius: 6px; background: var(--surface2); color: #fff; }

/* The founder's list form in the page text */
.obp-founders { display: grid; gap: 8px; max-width: 420px; margin: 12px 0 8px; }
.obp-founders label { font: 700 14px/1.3 var(--font-sans); color: var(--ink, #0f1d3a); }
.obp-founders input { min-height: 46px; padding: 10px 12px; border: 1px solid #b8c0d2; border-radius: 6px; font: 400 16px var(--font-sans); background: #fff; color: var(--ink, #0f1d3a); }
.obp-founders .button { min-height: 46px; }

/* Page text under the drawer */
.obp-draw-about {
  background: var(--paper, #fffdf8);
  color: var(--ink, #0f1d3a);
  padding: 40px 16px 48px;
}
.obp-draw-about-inner { width: min(var(--max, 1160px), 100%); margin: 0 auto; }
.obp-draw-about h1 { margin: 0 0 12px; font: 900 clamp(28px, 4vw, 40px)/1.1 var(--font-sans); }
.obp-draw-about h2 { margin: 28px 0 10px; font: 800 22px/1.2 var(--font-sans); }
.obp-draw-about p, .obp-draw-about li { max-width: 70ch; font-size: 17px; line-height: 1.6; }
.obp-draw-about ul { padding-left: 20px; }
.obp-draw-about a { color: var(--orange-deep, #b04b0a); font-weight: 700; }
.obp-powered { margin-top: 24px; font-size: 14px !important; color: var(--muted, #5d6b85); }