/* A phone (or a tablet): the coder is one screen too, as on a laptop (js/coder.js, "a phone: one screen too").
   Upright: the bar, the video the full width, a row of controls and one of the halves, the last press on one line,
   then the pad (or the pitch and its keys) in the height left (--fold). On its side: the video on the left, the pad
   on the right. The stats and the dock are under the pad, scrolled to inside the coder; the page itself never
   scrolls. The list's close button is for the phone's sheet only */
.ev-close { display: none; }

@media screen and (max-width: 1080px) {
  html.coding { overflow: hidden; }
  html.coding .app { padding: 0; }
  .coder { position: relative; height: 100vh; height: 100dvh; padding: 4px; gap: 4px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; align-content: start; }

  /* the bar: thin, the tagger and the backup wrapping onto a second thin line when there is no room */
  .coder-head { gap: 3px 7px; min-height: 0; padding: 3px 6px; border-radius: 6px; font-size: 11px; }
  .coder-title { font-size: 12.5px; }
  .src-chip { gap: 3px; padding: 3px 6px; border-radius: 6px; font-size: 0; }
  .src-chip svg { width: 14px; height: 14px; }
  .src-chip i { font-size: 9px; }
  .screen-seg { border-radius: 7px; }
  .screen-seg button { padding: 3px 7px; border-radius: 5px; font-size: 11px; }
  .coder-head .win-chip { max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
  .coder-head .pill, .coder-head summary.pill, .coder-head .win-chip { padding: 3px 8px; border-radius: 6px; font-size: 11px; }
  .coder-head .tag-chip { padding: 3px 8px; border-radius: 6px; font-size: 11px; }
  .coder-actions { gap: 6px; }
  .tagger-menu summary, .coder-head .saved { padding: 0; font-size: 10.5px; }
  .coder-head .saved-short { display: none; }

  /* the panels flat and tight */
  .coder > .panel, .level-side > .panel { min-height: 0; padding: 4px; border-radius: 6px; background: var(--card); box-shadow: none; }
  .coder > .panel > .panel-body, .level-side > .panel > .panel-body { padding: 0; border-radius: 0; }
  .coder-video { display: flex; flex-direction: column; gap: 3px; }
  .coder-video > .panel-body { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
  .coder-video .src-row { min-height: 0; padding: 0; }
  .coder-video .src-row .video-form { gap: 4px; }
  .coder-video .src-row .searchbox { padding: 3px 8px; background: var(--tile); font-size: 11px; }
  .coder-video .src-row .pill { padding: 3px 10px; background: var(--lime); color: var(--on-lime); font-size: 11px; }
  .video-frame { border-radius: 4px; }
  .video-empty { gap: 6px; padding: 8px; font-size: 11px; }
  .video-empty .pill { padding: 4px 10px; font-size: 11px; }

  /* the controls: thin rows; the float and pop-out buttons go (the video never leaves the screen here) */
  .transport .tbtn { height: 22px; }
  .transport .tbtn.float, .transport [data-coder="popout"] { display: none; }
  .phase { height: 22px; font-size: 10.5px; }
  .phase .lb-full { display: none; }
  .phase .lb-short { display: inline; }

  /* no keyboard: the keys' letters go */
  .code-btn kbd, .pk kbd, .q-ev kbd, .pc-goal-btns kbd, .coder-video .keys { display: none; }
  .press-log:not(.report-note) { display: none; }

  /* the events: one line, the last press; a tap opens the whole list as a sheet over the pad */
  .level-under { flex: none; height: 26px; }
  .level-under > section { height: 100%; border-radius: 4px; cursor: pointer; }
  .coder:not(.ev-sheet) .level-under > section { flex-direction: row; align-items: center; }
  .coder:not(.ev-sheet) .level-under > section::after { content: "All ▴"; flex: none; padding: 0 8px; color: var(--ink-3); font-size: 10.5px; font-weight: 700; }
  .coder:not(.ev-sheet) .level-under .ev-head, .coder:not(.ev-sheet) .level-under thead, .coder:not(.ev-sheet) .level-under tbody tr:not(:first-child) { display: none; }
  .coder:not(.ev-sheet) .level-under .ev-scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
  .coder:not(.ev-sheet) .level-under .ev-table td { border-top: 0; }
  .coder:not(.ev-sheet) .level-under .ev-table tr:hover td { background: none; }
  .coder:not(.ev-sheet) .level-under .ev-scroll .empty { margin: 0; padding: 0 8px; overflow: hidden; color: var(--ink-3); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
  .coder.ev-sheet::before { content: ""; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.45); }
  .coder.ev-sheet .level-under > section { position: fixed; top: var(--sheet-top, 40%); right: 4px; bottom: 4px; left: max(4px, var(--sheet-left, 4px)); z-index: 71; height: auto; background: var(--card); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); cursor: auto; }
  .coder.ev-sheet .ev-head { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .coder.ev-sheet .ev-head .ev-count, .coder.ev-sheet .ev-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .coder.ev-sheet .ev-close { display: inline-grid; flex: none; place-items: center; width: 26px; height: 24px; margin-left: auto; border-radius: 5px; color: var(--ink); font-size: 13px; font-weight: 800; }
  .coder.ev-sheet .ev-close:hover { background: var(--tile-hover); }

  /* Live coding: the pad's rows share the height, the text a little smaller */
  .live-panel { display: flex; flex-direction: column; gap: 3px; padding: 0; }
  .live-panel #live-window { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .live-panel .code-window { flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); --pad-fs: 10px; }

  /* Player coding: the pitch shrinks to the height left by the shirt numbers and the keys; the goal strip only while
     a shot waits for where it went; the keys in one block, coloured by kind */
  .pc-pitch-panel { gap: 3px; padding: 4px; }
  .pc-armed-bar { min-height: 24px; padding: 2px 8px 2px 4px; border-radius: 4px; font-size: 11.5px; }
  .pc-armed-bar .pc-num { min-width: 20px; height: 20px; font-size: 12px; }
  .pc-pitch-panel .pc-note { padding: 3px 8px; font-size: 10.5px; }
  .pc-pitch-wrap { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
  .pc-pitch-wrap .pitch { width: 100%; height: 100%; aspect-ratio: auto; }
  .coder.lv-player .pc-goal:not(.active) { display: none; }
  .coder.lv-player .pc-goal { grid-template-columns: auto minmax(0, 1fr); padding: 3px 6px; }
  .coder.lv-player .goalmouth { height: 44px; }
  .pc-foot { flex-wrap: nowrap; gap: 4px; }
  .pc-foot .pc-onpitch { overflow-x: auto; scrollbar-width: none; }
  .pc-foot .pc-nums { flex-wrap: nowrap; }
  .pc-foot .pnum { height: 22px; }
  .pc-foot .pill { padding: 3px 9px; font-size: 11px; }
  .pc-rail { flex: none; padding: 4px; }
  .pc-rail .pc-extras { grid-template-columns: repeat(var(--keys, 6), minmax(0, 1fr)); gap: 3px; }
  .pc-rail .pc-group, .pc-rail .pc-keys { display: contents; }
  .pc-rail .pc-group h4 { display: none; }
  .pc-rail .pk { justify-content: center; min-height: 24px; padding: 2px; border-radius: 4px; font-size: 10px; }

  /* Quick tags: the players and the events in short rows, the pitch in the height left (the totals give way) */
  .coder.lv-map { --q-ph: 22px; --q-pf: 10.5px; }
  .q-mid, .q-right { gap: 3px; }
  .q-team button { padding: 2px 0; }
  .q-right { display: flex; flex-direction: column; }
  .tag-pitch { display: grid; flex: 1 1 0; min-height: 0; }
  .tag-pitch .pitch { width: 100%; height: 100%; max-height: 100%; }
  .q-totals { display: none; }
}

/* upright: everything stacked, the pad in the height left */
@media screen and (max-width: 1080px) and (orientation: portrait) {
  .coder { display: flex; flex-direction: column; align-items: stretch; }
  .coder > * { flex: none; }
  .level-side { display: flex; flex-direction: column; gap: 4px; }
  .live-panel { height: var(--fold, 60vh); }
  /* blind coding has no picture: the match clock in a short band, the rest for the pad */
  .coder.no-video .video-frame { height: 64px; aspect-ratio: auto; }
  .coder.no-video .blind-face { padding: 6px; }
  .coder.lv-player .level-side, .coder.lv-map .level-side { height: var(--fold, 60vh); }
  .pc-pitch-panel, .q-right { flex: 1 1 0; min-height: 0; }
  .q-mid { flex: none; }
  .q-mid h4, .q-tagtools { display: none; }
  .q-players, .q-events { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .q-players { max-height: calc(4 * var(--q-ph) + 5px); }
}

/* a narrow phone: the bar keeps to two lines */
@media screen and (max-width: 380px) {
  .tagger-menu .tagger-word { display: none; }
}

/* on its side: the video on the left, the pad on the right, as on a laptop */
@media screen and (max-width: 1080px) and (orientation: landscape) {
  .coder { grid-template-rows: max-content var(--fold, 70vh); grid-auto-rows: max-content; align-items: stretch; }
  .coder.lv-live { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); grid-template-areas: "head head" "video pad" "stats stats" "dock dock"; }
  .coder.lv-player { --keys: 3; grid-template-columns: minmax(0, 34fr) minmax(0, 40fr) minmax(0, 26fr); grid-template-areas: "head head head" "video pitch rail" "dock dock dock"; }
  .coder.lv-map { grid-template-columns: minmax(0, 34fr) minmax(0, 30fr) minmax(0, 36fr); grid-template-areas: "head head head" "video mid right"; }
  .coder > .coder-video, .level-side > .panel { min-height: 0; overflow: hidden; }
  .pc-rail { overflow-y: auto; }
  .q-players { flex: 0 1 auto; }
}