/* Hashmark website (phase 3) - Play designer in the mockups' look: docs/design/app-a-c-screens.html, screen "Play designer".
   Website only: every rule starts with html[data-site] (siteui.css has the frame and the shared tokens).
   playdraw.js (siteLook) builds the designer as a page: .pd.pd-site (.pd-page when it sits in the frame, in #shellMain). */
@media screen {
html[data-site][data-ui="a"] {
  --dr-hf: 'Big Shoulders Display', 'Barlow Condensed', sans-serif;
  --dr-eyb: 700 12px/1.2 'Barlow Condensed', 'Barlow', sans-serif;
  --dr-mono: 'JetBrains Mono', ui-monospace, monospace;
  --dr-tag: #eeece7; --dr-tagtx: #64615b; --dr-blue: #eef1fd; --dr-bluetx: #1a3aa8;
}
html[data-site][data-ui="a"][data-theme="dark"] { --dr-tag: #282b30; --dr-tagtx: #a19e97; --dr-blue: #18213d; --dr-bluetx: #a9bcff; }

/* ================= the Draw page: the toolbar and the thumbnail cards ================= */
html[data-site][data-ui="a"] #drawTab .dt-bar { gap: 8px; margin-bottom: 18px; }
html[data-site][data-ui="a"] #drawTab .dt-bar button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--rb); font: 600 14px/1.1 'Barlow', system-ui, sans-serif; box-shadow: none; text-transform: none; letter-spacing: 0; }
html[data-site][data-ui="a"] #drawTab .dt-bar button:hover { border-color: var(--line-2); }
html[data-site][data-ui="a"] #drawTab .dt-bar button.dt-new { background: var(--hi); color: #141414; border-color: var(--hi); font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.08); }
html[data-site][data-ui="a"] #drawTab .dt-bar button.dt-new:hover { filter: brightness(1.04); }
html[data-site][data-ui="a"] #drawTab .dt-bar :is(select, input[type=search]) { min-height: 40px; border-radius: var(--rb); border: 1px solid var(--line); background-color: var(--panel); color: var(--ink); padding: 7px 12px; font-size: 14px; }
html[data-site][data-ui="a"] #drawTab .dt-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
html[data-site][data-ui="a"] #drawTab .dt-card { padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: none; color: var(--ink); gap: 0; }
html[data-site][data-ui="a"] #drawTab .dt-card:hover { background: var(--panel); border-color: var(--line-2); }
html[data-site][data-ui="a"] #drawTab .dt-card:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
html[data-site][data-ui="a"] #drawTab .dt-pic { border: 0; border-radius: var(--rs); background: var(--soft); }
html[data-site][data-ui="a"] #drawTab .dt-pic img { background: transparent; }
html[data-site][data-ui="a"] #drawTab .dt-pic :is(img, svg) { width: 100%; height: 100%; display: block; object-fit: contain; }
html[data-site][data-ui="a"][data-theme="dark"] #drawTab .dt-pic { background: #17191c; }
html[data-site][data-ui="a"] #drawTab .dt-name { padding: 8px 0 0; font: 700 14px/1.2 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: .01em; text-transform: uppercase; gap: 7px; }
html[data-site][data-ui="a"] #drawTab .dt-name .hm-num { min-width: 22px; height: 20px; font-size: 12px; border-width: 1px; border-radius: 4px; padding: 0 4px; }
html[data-site][data-ui="a"] #drawTab .dt-meta { padding: 2px 0 0; font-size: 12px; color: var(--muted); min-height: 16px; }
html[data-site][data-ui="a"] #drawTab .dt-meta b { font-weight: 600; color: var(--ink-2); }
html[data-site][data-ui="a"] #drawTab .dt-empty { border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--panel); color: var(--muted); }

/* ================= the designer as a page ================= */
html[data-site][data-ui="a"] .pd.pd-site { background: var(--bg); color: var(--ink); display: block; padding: 24px 28px 40px; font-family: 'Barlow', system-ui, sans-serif; overflow: auto; }
html[data-site][data-ui="a"] .pd.pd-page { position: relative; inset: auto; z-index: 2; overflow: visible; min-height: calc(100vh - 56px); }
html[data-site][data-ui="a"] #shellMain:has(> .pd-page) > :not(.pd-page) { display: none !important; }
html[data-site][data-ui="a"] .pd.pd-site button { border-radius: var(--rb); }

/* the page header: eyebrow, the call, the buttons */
html[data-site][data-ui="a"] .pd-site .pd-top { background: transparent; color: var(--ink); padding: 0; margin: 0 0 18px; gap: 12px 16px; align-items: flex-end; flex-wrap: wrap; }
html[data-site][data-ui="a"] .pd-site .pd-head { min-width: 0; flex: 1 1 360px; }
html[data-site][data-ui="a"] .pd-site .pd-eb { font: var(--dr-eyb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
html[data-site][data-ui="a"] .pd-site .pd-call { display: block; margin: 8px 0 0; font: 800 40px/1 var(--dr-hf); text-transform: uppercase; letter-spacing: 0; color: var(--ink); max-width: none; white-space: normal; overflow-wrap: anywhere; }
html[data-site][data-ui="a"] .pd-site .pd-top input#pdCall { display: block; width: 100%; max-width: 640px; margin-top: 8px; min-height: 52px; padding: 6px 12px; font: 800 32px/1 var(--dr-hf); text-transform: uppercase; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--rb); }
html[data-site][data-ui="a"] .pd-site .pd-top input#pdCall:focus { border-color: var(--ink); outline: none; }
html[data-site][data-ui="a"] .pd-site .pd-top > .pd-sp { flex: 0 0 0; }
html[data-site][data-ui="a"] .pd-site .pd-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
html[data-site][data-ui="a"] .pd-site .pd-acts button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 14px/1.1 'Barlow', system-ui, sans-serif; box-shadow: none; }
html[data-site][data-ui="a"] .pd-site .pd-acts button:hover { border-color: var(--line-2); background: var(--panel); color: var(--ink); }
html[data-site][data-ui="a"] .pd-site .pd-acts button.primary { background: var(--hi); color: #141414; border-color: var(--hi); font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.08); }
html[data-site][data-ui="a"] .pd-site .pd-acts button.primary:hover { background: var(--hi); color: #141414; filter: brightness(1.04); }
html[data-site][data-ui="a"] .pd-site .pd-acts #pdPlayB { border-color: var(--line); color: var(--ink); }
html[data-site][data-ui="a"] .pd-site .pd-flip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--rb); background: var(--panel); padding: 0 0 0 10px; min-height: 40px; }
html[data-site][data-ui="a"] .pd-site .pd-flip-l { font: var(--dr-eyb); letter-spacing: .08em; color: var(--muted); margin-right: 4px; }
html[data-site][data-ui="a"] .pd-site .pd-acts .pd-flip button { border: 0; min-height: 38px; padding: 6px 10px; border-radius: 0; background: transparent; }
html[data-site][data-ui="a"] .pd-site .pd-acts .pd-flip button + button { margin-left: 0; border-left: 1px solid var(--line); }
html[data-site][data-ui="a"] .pd-site .pd-acts .pd-flip button:last-child { border-radius: 0 var(--rb) var(--rb) 0; }
html[data-site][data-ui="a"] .pd-site .pd-acts .pd-flip button:hover { background: var(--soft); }
html[data-site][data-ui="a"] .pd-site .pd-panel-btn { display: none !important; }

/* field and tools on the left, the play's card and the panels on the right */
html[data-site][data-ui="a"] .pd-site .pd-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; flex: none; min-height: 0; }
html[data-site][data-ui="a"] .pd-site .pd-main { min-width: 0; }
html[data-site][data-ui="a"] .pd-site .pd-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
html[data-site][data-ui="a"] .pd-site .pd-tbar { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
html[data-site][data-ui="a"] .pd-site .pd-tbar > .pd-sp { flex: 1 1 0; }
html[data-site][data-ui="a"] .pd-site .pd-tools { width: auto; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; background: transparent; border: 0; overflow: visible; }
html[data-site][data-ui="a"] .pd-site :is(.pd-tools button, .pd-ib) { width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--rs); background: var(--panel); color: var(--muted); box-shadow: none; margin: 0; }
html[data-site][data-ui="a"] .pd-site :is(.pd-tools button, .pd-ib):hover { color: var(--ink); border-color: var(--line-2); }
html[data-site][data-ui="a"] .pd-site .pd-tools button span { display: none; }
html[data-site][data-ui="a"] .pd-site :is(.pd-tools button, .pd-ib) svg { width: 17px; height: 17px; }
html[data-site][data-ui="a"] .pd-site .pd-tools button.on,
html[data-site][data-ui="a"] .pd-site .pd-tools .pd-tg.on { background: var(--ink-bg, var(--ink)); color: var(--hi); border-color: var(--ink-bg, var(--ink)); }
html[data-site][data-ui="a"][data-theme="dark"] .pd-site .pd-tools button.on { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-site][data-ui="a"] .pd-site .pd-tools .pd-tg { margin-top: 0; }
html[data-site][data-ui="a"] .pd-site .pd-tools .pd-tg:first-of-type { margin-left: 8px; }
html[data-site][data-ui="a"] .pd-site .pd-tsep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; flex: none; }
html[data-site][data-ui="a"] .pd-site .pd-hseg { margin-left: auto; display: inline-flex; gap: 3px; background: var(--soft); border: 1px solid var(--line); border-radius: calc(var(--rb) + 3px); padding: 3px; }
html[data-site][data-ui="a"] .pd-site .pd-hseg button { border: 0; background: transparent; padding: 6px 12px; min-height: 0; border-radius: var(--rb); font: 600 13px/1.2 'Barlow', system-ui, sans-serif; color: var(--muted); box-shadow: none; }
html[data-site][data-ui="a"] .pd-site .pd-hseg button:hover { color: var(--ink); }
html[data-site][data-ui="a"] .pd-site .pd-hseg button.on { background: var(--ink-bg, var(--ink)); color: var(--hi); }
html[data-site][data-ui="a"][data-theme="dark"] .pd-site .pd-hseg button.on { box-shadow: inset 0 0 0 1px var(--line-2); }

/* the field */
html[data-site][data-ui="a"] .pd-site .pd-stage { height: clamp(380px, calc(100vh - 330px), 760px); background: #e4e1d8; }
html[data-site][data-ui="a"][data-theme="dark"] .pd-site .pd-stage { background: #141619; }
html[data-site][data-ui="a"] .pd-site .pd-hint { left: 10px; bottom: 10px; border-radius: var(--rs); background: rgba(20,20,20,.82); font-size: 12.5px; }
html[data-site][data-ui="a"] .pd-site .pd-zoom { box-shadow: none; border: 1px solid var(--line); border-radius: var(--rb); overflow: hidden; background: var(--panel); }
html[data-site][data-ui="a"] .pd-site .pd-zoom button { border: 0; border-radius: 0; background: var(--panel); color: var(--ink); min-height: 34px; box-shadow: none; }
html[data-site][data-ui="a"] .pd-site .pd-zoom button + button { border-left: 1px solid var(--line); }
html[data-site][data-ui="a"] .pd-site .pd-sub { border: 1px solid var(--line); box-shadow: 0 10px 28px -18px rgba(20,20,20,.45); background: var(--panel); border-radius: var(--rb); overflow: hidden; }
html[data-site][data-ui="a"] .pd-site .pd-sub button { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--ink); font-size: 13px; box-shadow: none; }
html[data-site][data-ui="a"] .pd-site .pd-sub button.on { background: var(--ink-bg, var(--ink)); color: var(--hi); }
html[data-site][data-ui="a"] .pd-site .pd-sub .pd-subk { border-left: 1px solid var(--line); border-right: 1px solid var(--line); font: var(--dr-eyb); letter-spacing: .08em; }
html[data-site][data-ui="a"] .pd-site .pd-finish button { box-shadow: none; border-radius: var(--rb); }
html[data-site][data-ui="a"] .pd-site .pd-finish #pdFin { color: #141414; border-color: var(--hi); }
html[data-site][data-ui="a"] .pd-site .pd-anim { border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 28px -18px rgba(20,20,20,.45); }

/* the other plays, under the field */
html[data-site][data-ui="a"] .pd-site .pd-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
html[data-site][data-ui="a"] .pd-site .pd-thumbs[hidden] { display: none; }
html[data-site][data-ui="a"] .pd-site .pd-th { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); box-shadow: none; min-width: 0; }
html[data-site][data-ui="a"] .pd-site .pd-th:hover { border-color: var(--line-2); }
html[data-site][data-ui="a"] .pd-site .pd-th-pic { display: block; aspect-ratio: 16 / 10; border-radius: var(--rs); overflow: hidden; background: var(--soft); }
html[data-site][data-ui="a"][data-theme="dark"] .pd-site .pd-th-pic { background: #17191c; }
html[data-site][data-ui="a"] .pd-site .pd-th-pic :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: contain; }
html[data-site][data-ui="a"] .pd-site .pd-th b { display: block; margin-top: 6px; font: 700 14px/1.2 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-site][data-ui="a"] .pd-site .pd-th small { color: var(--muted); font-size: 12px; min-height: 15px; }

/* the right column: the play's card, then the panels (formations, field, the picked player or line) */
html[data-site][data-ui="a"] .pd-site .pd-right { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
html[data-site][data-ui="a"] .pd-site :is(.pd-info, .pd-side) { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
html[data-site][data-ui="a"] .pd-site .pd-info { padding: 18px 20px 10px; flex: none; }
html[data-site][data-ui="a"] .pd-site .pd-info[hidden] { display: none; }
html[data-site][data-ui="a"] .pd-site .pd-info h4 { font: var(--dr-eyb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; border: 0; padding: 0; }
html[data-site][data-ui="a"] .pd-site .pd-info h4:first-child { margin-top: 0; }
html[data-site][data-ui="a"] .pd-site .pd-as > div,
html[data-site][data-ui="a"] .pd-site .pd-stats > div { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
html[data-site][data-ui="a"] .pd-site .pd-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 'Barlow', sans-serif; font-style: normal; flex: none; box-shadow: inset 0 0 0 1.5px rgba(20,20,20,.18); }
html[data-site][data-ui="a"] .pd-site .pd-tags { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; }
html[data-site][data-ui="a"] .pd-site .pd-tags span { display: inline-flex; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 3px; background: var(--dr-tag); color: var(--dr-tagtx); white-space: nowrap; }
html[data-site][data-ui="a"] .pd-site .pd-tags span:first-child { background: var(--dr-blue); color: var(--dr-bluetx); }
html[data-site][data-ui="a"] .pd-site .pd-stats b { margin-left: auto; font: 500 14px var(--dr-mono); }
html[data-site][data-ui="a"] .pd-site .pd-side { width: auto; flex: none; min-height: 360px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 16px 18px 24px; position: static; display: block; box-shadow: none; }
html[data-site][data-ui="a"] .pd-site .pd-side h4 { font: var(--dr-eyb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); }
html[data-site][data-ui="a"] .pd-site .pd-side h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html[data-site][data-ui="a"] .pd-site label.pd-l { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .06em; }
html[data-site][data-ui="a"] .pd-site .pd-side :is(select, input[type=text], input[type=number]) { border-radius: var(--rs); border: 1px solid var(--line); background-color: var(--panel); color: var(--ink); }
html[data-site][data-ui="a"] .pd-site :is(.pd-chips, .pd-row) button { border: 1px solid var(--line); border-radius: var(--rs); background: var(--panel); color: var(--ink); box-shadow: none; font-weight: 600; }
html[data-site][data-ui="a"] .pd-site :is(.pd-chips, .pd-row) button:hover { border-color: var(--line-2); }
html[data-site][data-ui="a"] .pd-site :is(.pd-chips, .pd-row) button.on { background: var(--ink-bg, var(--ink)); color: var(--hi); border-color: var(--ink-bg, var(--ink)); }
html[data-site][data-ui="a"] .pd-site .pd-row button.primary { background: var(--hi); color: #141414; border-color: var(--hi); }
html[data-site][data-ui="a"] .pd-site .pd-mine button { border-radius: 0; }
html[data-site][data-ui="a"] .pd-site .pd-mine button:first-child { border-radius: var(--rs) 0 0 var(--rs); }
html[data-site][data-ui="a"] .pd-site .pd-mine button:last-child { border-radius: 0 var(--rs) var(--rs) 0; }
html[data-site][data-ui="a"] .pd-site .pd-sw button { border-radius: 50%; border: 1px solid var(--line-2); }
html[data-site][data-ui="a"] .pd-site .pd-sw button.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
html[data-site][data-ui="a"] .pd-site .pd-warn { border-width: 1px; border-radius: var(--rs); }

/* the designer's own windows (save questions, pick a play, keys) */
html[data-site][data-ui="a"] .pd-site .pd-dlg { position: fixed; z-index: 70; background: rgba(12,13,15,.55); }
html[data-site][data-ui="a"] .pd-site .pd-dlg-box { border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); padding: 20px 22px; }
html[data-site][data-ui="a"] .pd-site .pd-dlg-box h2 { font: 800 26px/1.05 var(--dr-hf); }
html[data-site][data-ui="a"] .pd-site .pd-dlg-box button { border-radius: var(--rb); }
html[data-site][data-ui="a"] .pd-site .pd-dlg-box :is(input[type=text], .pd-list) { border: 1px solid var(--line); border-radius: var(--rs); }
html[data-site][data-ui="a"] .pd-site .pd-list > button { border-radius: 0; }

/* touch: bigger targets */
@media (pointer: coarse) {
  html[data-site][data-ui="a"] .pd-site :is(.pd-tools button, .pd-ib) { width: 42px; height: 42px; padding: 0; }
  html[data-site][data-ui="a"] .pd-site .pd-hseg button { padding: 10px 14px; }
}
/* narrower: the right column goes under the field */
@media (max-width: 1180px) {
  html[data-site][data-ui="a"] .pd-site .pd-body { grid-template-columns: minmax(0, 1fr); }
  html[data-site][data-ui="a"] .pd-site .pd-right { position: static; max-height: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  html[data-site][data-ui="a"] .pd-site .pd-info[hidden] + .pd-side { grid-column: 1 / -1; }
  html[data-site][data-ui="a"] .pd-site .pd-side { max-height: 70vh; }
}
@media (max-width: 760px) {
  html[data-site][data-ui="a"] .pd.pd-site { padding: 16px 14px 32px; }
  html[data-site][data-ui="a"] .pd-site .pd-call { font-size: 30px; }
  html[data-site][data-ui="a"] .pd-site .pd-acts { justify-content: flex-start; margin-left: 0; }
  html[data-site][data-ui="a"] .pd-site .pd-right { display: flex; }
  html[data-site][data-ui="a"] .pd-site .pd-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-site][data-ui="a"] .pd-site .pd-stage { height: clamp(320px, 62vh, 560px); }
  html[data-site][data-ui="a"] .pd-site .pd-tbar > .pd-sp { display: none; }
  html[data-site][data-ui="a"] .pd-site .pd-tools { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  html[data-site][data-ui="a"] .pd-site .pd-tools button { flex: none; }
  html[data-site][data-ui="a"] .pd-site .pd-tsep { display: none; }
  html[data-site][data-ui="a"] .pd-site .pd-tools .pd-tg:first-of-type { margin-left: 0; }
  html[data-site][data-ui="a"] .pd-site .pd-hint { max-width: calc(100% - 20px); bottom: 56px; }
  html[data-site][data-ui="a"] #drawTab .dt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-site][data-ui="a"] #drawTab .dt-bar input[type=search] { width: 100% !important; }
}
}