/* pitch.css - the ground a drill is drawn on, and the marks on it.
 *
 * ONE COPY, TWO PAGES. The app draws diagrams and so does the owner console,
 * which is served from its own site with its own stylesheet and cannot reach
 * into styles.css. Copying the markings across would have left two sets to
 * keep in step by hand, and the day they drift is the day the same drill looks
 * like a different sport depending on which page is showing it.
 *
 * IT CARRIES ITS OWN PALETTE. These are depiction, not brand - a turf green
 * and a chalk white that never leave a diagram - so they belong with the
 * drawing rather than in either page's design tokens, and console.css does not
 * have to know they exist.
 *
 * The radius is its own token rather than --r-sm: the two pages disagree about
 * what small means - 14px in the app, 6px in the console - and a diagram
 * should not change shape depending on which one is showing it.
 */
:root {
  --turf:       #2C6B46;
  --turf-mow:   #33774F;
  --turf-dark:  #DFE7DF;
  --chalk:      #FFFFFF;
  --chalk-op:   .95;
  --mask-op:    .68;
  --team-a:     #FFFFFF;
  --team-b:     #B8232F;
  --team-c:     #F0A63C;
  --marker:     #F0A63C;
  --ball:       #A4522A;
  --court:      #2F5E74;
  --court-wood: #8A5A2B;
  --strip:      #C2B49A;
  --pitch-r: 14px;
}

/* The ground goes darker at night like everything else. Same guard as
   styles.css: an explicit light choice beats a dark operating system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --turf-dark:  #14120F;
    --mask-op:    .76;
  }
}
:root[data-theme="dark"] {
  --turf-dark:  #14120F;
  --mask-op:    .76;
}

.pitch { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; background: var(--turf-dark); }
.pitch-wrap { border-radius: var(--pitch-r); overflow: hidden; }
/* A drawing being READ, rather than one inside the canvas editor. .pitch is
   height:100%, which in a pane resolves against the whole column - so the box
   stretched to the height of the form beside it and left the ground sitting in
   a band of empty turf. Here the 4:3 ratio decides the height. */
.pitch-wrap > .pitch { height: auto; }
.pitch .outside { fill: var(--turf-dark); opacity: var(--mask-op); pointer-events: none; }
.pitch .turf { fill: var(--turf); }
.pitch .mow { fill: var(--turf-mow); opacity: .55; }
.pitch .court { fill: var(--court); }
.pitch .court.wood { fill: var(--court-wood); }
.pitch .ingoal { fill: var(--turf-mow); opacity: .5; }
.pitch .strip { fill: var(--strip); }
.pitch .tick-dot { fill: var(--chalk); opacity: calc(var(--chalk-op) * .9); }
.pitch .post-ring { stroke: var(--marker); stroke-width: 3; }
.pitch .line { stroke: var(--chalk); stroke-width: 2.2; opacity: var(--chalk-op); fill: none; }
.pitch .line.faint { opacity: calc(var(--chalk-op) * .45); stroke-width: 1.4; }
.pitch .boundary { stroke: var(--chalk); stroke-width: 3.4; opacity: calc(var(--chalk-op) + .05); }
.pitch .post { stroke: var(--chalk); stroke-width: 3.4; opacity: calc(var(--chalk-op) + .05); }
.pitch .post.behind { stroke-width: 2.4; opacity: calc(var(--chalk-op) * .8); }
.pitch .grid-lines line { stroke: var(--chalk); stroke-width: 1.2; opacity: calc(var(--chalk-op) * .35); }
.pitch .tick { fill: var(--chalk); opacity: calc(var(--chalk-op) * .7); font-size: 15px; font-family: var(--font); font-weight: 600; }
.pitch .ob .hit { fill: transparent; stroke: transparent; stroke-width: 26; }
.pitch.editable .ob { cursor: grab; }
.pitch.editable .ob:hover .dot,
.pitch.editable .ob:hover .shape { filter: brightness(1.2); }
.pitch .ob-player .dot { stroke: #201E1D; stroke-width: 2; }
.pitch .ob-player.team-a .dot { fill: var(--team-a); }
.pitch .ob-player.team-b .dot { fill: var(--team-b); }
.pitch .ob-player.team-c .dot { fill: var(--team-c); }
.pitch .ob-player .lbl {
  text-anchor: middle; font-size: 15px; font-weight: 800;
  font-family: var(--font); fill: #201E1D; pointer-events: none;
}
.pitch .ob-player.team-b .lbl { fill: #FFFFFF; }
.pitch .ob-cone .shape { fill: var(--marker); stroke: #7A4A08; stroke-width: 1.5; }
.pitch .ob-ball .shape { fill: var(--ball); stroke: #F3F2F2; stroke-width: 1.8; }
.pitch .ob-ball .seam { stroke: #F3F2F2; stroke-width: 1.6; }
.pitch .ob-goal .postline { stroke: var(--chalk); stroke-width: 3.5; }
.pitch .ob-zone .shape { fill: rgba(240,166,60,.16); stroke: var(--marker); stroke-width: 2.5; stroke-dasharray: 8 6; }
.pitch .ob-zone .zlbl {
  fill: var(--marker); font-size: 16px; font-family: var(--font); font-weight: 800;
  paint-order: stroke; stroke: #201E1D; stroke-width: 3;
}
.pitch .ob-text .txt {
  fill: #FFFFFF; font-size: 18px; font-family: var(--font); font-weight: 800;
  paint-order: stroke; stroke: #201E1D; stroke-width: 3.5;
}
.pitch .ob-text .hit { fill: transparent; stroke-width: 0; }
.pitch .ob-path { color: #FFFFFF; }
.pitch .ob-path .shape { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pitch .ob-path .hit { stroke: transparent; stroke-width: 24; }
/* Kick solid, handball dashed, run a wave (drawn in canvas.js), lead orange. */
.pitch .path-handball .shape { stroke-dasharray: 3 7; }
.pitch .grip {
  fill: var(--panel); stroke: var(--mark); stroke-width: 2.5;
  cursor: grab; pointer-events: all;
}
.pitch .grip:hover { fill: var(--mark); }
.pitch .path-lead { color: #F0A63C; }
.pitch .ob.is-selected .dot,
.pitch .ob.is-selected .shape { stroke: #FFFFFF; stroke-width: 4; }
.pitch .ob-path.is-selected .shape { stroke: #FFFFFF; }


/* ---- the canvas editor ---------------------------------------------------
 * The tool rail, the stage and the chrome around a drill being drawn. Here
 * rather than in styles.css for the same reason as the markings above: the
 * console draws drills too, and two copies of a tool rail drift.
 *
 * The app's own design tokens are used where they exist and fall back to the
 * console's equivalents where they do not - var(--acc, var(--green, ...)).
 * The app defines --acc, so the app is unchanged; the console does not, so it
 * gets its own green instead of nothing. One rule set, each page in its own
 * clothes.
 */
.editor-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem;
}
/* The tool row is one sunken tray of tools, not thirteen separate buttons. */
.tools {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  background: var(--panel-2, var(--sunken, #F0EFEC)); border-radius: var(--r-sm);
}
.tool {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 36px; padding: .3rem .7rem; cursor: pointer; border-radius: var(--r-ctl);
  background: transparent; border: 0; box-shadow: none;
  color: var(--muted-2, var(--muted, #4A4644)); font: inherit; font-size: .84rem; font-weight: 500; white-space: nowrap;
}
.tool:hover { color: var(--text, var(--ink, #1F1D1C)); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.tool.on { background: var(--panel); color: var(--acc-text, var(--green, #1D7A1D)); font-weight: 600; box-shadow: 0 1px 3px rgba(31,29,28,.14); }
.sw { width: 10px; height: 10px; display: inline-block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(32,30,29,.4); }
.sw-a { background: var(--team-a); }
.sw-b { background: var(--team-b); }
.sw-c { background: var(--team-c); }
.editor-right { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.stage {
  border-radius: var(--r-sm); overflow: hidden;
  touch-action: none; background: var(--turf-dark);
}
.stage .pitch { cursor: crosshair; }
.stage .pitch.tool-select { cursor: default; }
.inspector { min-height: 2.6rem; padding-top: .6rem; }
.insp-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Expanded: the ground takes the whole screen. */
body.editor-full { overflow: hidden; }
.editor.is-full {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--bg, var(--ground, #F6F5F3));
  padding: calc(.6rem + env(safe-area-inset-top)) .6rem calc(.6rem + env(safe-area-inset-bottom));
}
.editor.is-full .editor-bar { margin-bottom: .5rem; }
.editor.is-full .stage { flex: 1 1 auto; min-height: 0; max-width: none; }
.editor.is-full .stage .pitch { aspect-ratio: auto; height: 100%; }
.editor.is-full .act-full { background: var(--acc, var(--green, #1D7A1D)); color: var(--acc-on, #FFFFFF); border-color: transparent; box-shadow: none; }

/* ---- the panel a diagram sits in ----------------------------------------
 * The app has .pane for this and every other card on its pages; the console
 * has its own .card and neither can see the other's stylesheet. So the panel
 * look is declared here, from whichever tokens the page showing it happens to
 * define - and both get the same section, at the same size, with the heading
 * the same size, because App.Canvas.panel writes it once for both.
 *
 * No width cap and no radius on the pitch. The console had both, which is why
 * its diagram was smaller than the app's and rounded where the app's was not -
 * not decisions, just a second wrapper written by hand. */
/* IN PIXELS, NOT REM, AND THAT IS THE POINT. The app sets html to 15px; the
   console leaves html at the browser's 16 and sets body instead - so the same
   rem is 15px on one page and 16px on the other, and the panel came out 7%
   bigger in the console with a heading a size up. A shared component that
   changes size depending on which page is showing it is not shared. These are
   the app's own values, resolved once: 1.25rem x 1.4rem and 1.12rem at 15px. */
.diagram-panel {
  background: var(--panel, #FFFFFF);
  border-radius: var(--r-card, 20px);
  box-shadow: var(--shadow, 0 1px 2px rgba(31, 29, 28, .04), 0 6px 24px rgba(31, 29, 28, .05));
  padding: 18.75px 21px;
}
.diagram-panel > .pane-title {
  margin: 0 0 12px; font-size: 16.8px; font-weight: 700;
  color: var(--text, var(--ink, #1F1D1C));
}

/* ---- form beside drawing -------------------------------------------------
 * The app puts a drill's fields and its diagram side by side above 1100px -
 * .split in styles.css, which is a general app layout used by the session
 * editor too, so it does not belong in this file. What DOES belong here is
 * the same arrangement for a page that has only the diagram to lay out, which
 * is what the console's drill editor is.
 *
 * Same breakpoint and same ratio as .split, deliberately: the diagram gets the
 * wider column because a drawing needs the room more than eight text fields
 * do. A test holds the two to the same values. The gap is in pixels for the
 * reason the panel's padding is - the two pages count a rem differently. */
.diagram-split { display: grid; grid-template-columns: 1fr; gap: 18.75px; align-items: start; }
.diagram-split > * { min-width: 0; }
@media (min-width: 1100px) {
  .diagram-split { grid-template-columns: 1fr 1.25fr; }
}

/* ---- the chrome the editor borrows --------------------------------------
 * The editor's markup reaches for the host page's generic classes - .btn for
 * Undo, .fld for the View label, .sw for a team swatch - and that only worked
 * while there was one host. The console defines its OWN .sw, a 52x44 toggle
 * switch for the drill table, and its own .btn at 44px tall: so the team
 * markers came out as big empty circles and Undo, Clear and Expand were a size
 * up from the app's.
 *
 * Scoped under .editor, which beats a bare class on either page, so the
 * component carries its own look instead of inheriting whichever page it
 * lands on. The values are the app's own, resolved at its 15px root - the
 * console counts a rem as 16, and a shared component must not change size
 * depending on who is showing it.
 */
.editor .sw {
  width: 10px; height: 10px; display: inline-block; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(32, 30, 29, .4);
  position: static; padding: 0; background: none; border: 0;
}
.editor .sw-a { background: var(--team-a); }
.editor .sw-b { background: var(--team-b); }
.editor .sw-c { background: var(--team-c); }

.editor .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6.75px;
  min-height: 42px; padding: 7.5px 15.75px; border-radius: var(--r-ctl, 10px);
  border: 1px solid var(--line-soft, rgba(31, 29, 28, .08));
  box-shadow: 0 1px 2px rgba(31, 29, 28, .05);
  background: var(--panel, #FFFFFF); color: var(--text, var(--ink, #1F1D1C));
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.editor .btn.ghost {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--muted-2, var(--muted, #4A4644));
}
.editor .btn.ghost:hover {
  background: var(--panel-2, var(--sunken, #F0EFEC)); color: var(--text, var(--ink, #1F1D1C));
}
.editor .btn.sm { min-height: 36px; padding: 4.5px 11.25px; font-size: 12.6px; }

.editor .fld { display: block; margin-bottom: 15px; }
.editor .fld.inline { display: flex; align-items: center; gap: 7.5px; margin: 0; }
.editor .fld.inline > span { margin: 0; white-space: nowrap; }
.editor .fld.inline select { width: auto; min-width: 90px; }

.editor select {
  padding: 9px 33px 9px 12px; min-width: 0;
  background-color: var(--panel, #FFFFFF);
  border: 1px solid var(--edge, #8F8A87); border-radius: var(--r-ctl, 10px); box-shadow: none;
  color: var(--text, var(--ink, #1F1D1C)); font: inherit; font-size: 14.25px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A8686' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
}