/* Tour results: the game grid, the bowler analysis and the pop-up they open
   in. Path: public/css/tour-analysis.css. The Intercity results site's
   layout in the tour palette (tour-results.css holds the colours). */

/* A game score that opens its grid. Same pill, made tappable. */
button.tr-g { font: inherit; font-size: 0.66rem; font-weight: 600; border: 0; margin: 0; line-height: inherit; cursor: pointer; }
.tr-g.is-tap { min-height: 22px; padding: 1px 6px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12); }
.tr-g.is-tap:hover, .tr-g.is-tap:focus-visible { outline: 1px solid var(--tr-brand-light); outline-offset: 1px; }
a.tr-name[data-athlete] { text-decoration: underline; text-decoration-color: rgba(124, 58, 237, 0.55); text-underline-offset: 3px; }

/* The bowler page: each stage's games on one row. */
.ta-stage-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ta-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--tr-line); background: rgba(0, 0, 0, 0.3); }
.ta-stage-name { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-muted); min-width: 92px; }
.ta-stage .tr-games { margin: 0; }
.ta-stage .tr-g.is-tap { font-size: 0.82rem; min-height: 30px; padding: 3px 9px; }
.ta-panel { min-height: 40px; }

/* The pop-up: a sheet from the bottom on a phone, a card on a wide screen. */
html.ta-locked { overflow: hidden; }
.ta-pop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 3, 10, 0.7); }
.ta-pop[hidden] { display: none; }
.ta-pop-card { position: relative; width: 100%; max-height: 88vh; overflow: auto; padding: 16px 12px 22px; border-radius: 16px 16px 0 0; background: #121019; border: 1px solid var(--tr-line); color: var(--tr-text); }
.ta-pop-body { padding-right: 40px; }
.ta-pop-close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--tr-panel-2); color: var(--tr-text); font-size: 20px; cursor: pointer; }
@media (min-width: 820px) {
  .ta-pop { align-items: center; }
  .ta-pop-card { width: min(980px, 94vw); max-height: 90vh; border-radius: 16px; padding: 20px 20px 24px; }
}

/* The game grid. */
.ta-grid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ta-grid-head .ta-grid-title { flex: 1 1 auto; min-width: 0; }
.ta-grid-head .ta-grid-meta { flex: 0 1 auto; white-space: nowrap; }
.ta-grid-title { font-weight: 800; font-size: 1rem; }
.ta-grid-meta { font-size: 0.75rem; color: var(--tr-muted); margin: 0; }
.ta-grid-scroll { overflow-x: auto; }
.ta-grid { display: grid; grid-template-columns: repeat(10, minmax(58px, 1fr)); gap: 4px; min-width: 640px; }
.ta-frame { padding: 6px 4px 4px; border-radius: 8px; background: #1d1830; text-align: center; font-variant-numeric: tabular-nums; }
.ta-frame-n { font-size: 10px; letter-spacing: 2px; opacity: 0.6; }
.ta-frame-marks { display: flex; justify-content: flex-end; gap: 3px; margin: 3px 0; }
.ta-mark { flex: 1; padding: 3px 0; border-radius: 4px; background: rgba(255, 255, 255, 0.08); font-weight: 800; font-size: 15px; min-height: 22px; }
.ta-mark-X { background: var(--tr-brand-light); color: #fff; }
.ta-mark-S { background: var(--tr-gold); color: #17110a; }
.ta-mark-split { text-decoration: underline; text-decoration-color: #ff8a8a; text-decoration-thickness: 2px; }
.ta-frame-speeds { display: flex; justify-content: flex-end; gap: 3px; font-size: 10px; opacity: 0.8; }
.ta-frame-speeds span { flex: 1; }
.ta-frame-total { font-size: 15px; font-weight: 800; margin-top: 3px; }
.ta-frame-pins { display: block; margin: 4px auto 0; width: 44px; height: 36px; }
.ta-pin-up { fill: #fff; stroke: var(--tr-brand-light); stroke-width: 1; }
.ta-pin-down { fill: #3a3350; }
.ta-frame-leave { font-size: 10px; opacity: 0.8; min-height: 12px; }
.ta-grid-foot { font-size: 0.75rem; color: var(--tr-muted); margin-top: 8px; }

/* The bowler analysis. */
.ap-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ap-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--tr-brand-light); flex: 0 0 auto; }
.ap-name { font-family: var(--tr-display); font-size: 1.4rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; }
.ap-team { font-size: 0.8rem; color: var(--tr-muted); }
.ap-summary { font-size: 0.85rem; margin-top: 4px; font-variant-numeric: tabular-nums; color: #d4d4dc; }
.ap-section { margin-top: 16px; }
.ap-h3 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tr-muted); margin: 0 0 6px; }
.ap-h4 { font-size: 0.8rem; margin: 14px 0 6px; color: #d4d4dc; }
.ap-note { font-size: 0.75rem; color: var(--tr-muted); margin: 0 0 8px; }
/* Short figures sit three to a row on a phone, more on a wide screen. */
.ap-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 720px) { .ap-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } }
.ap-tile { min-width: 0; padding: 8px 9px; border-radius: 10px; background: #1d1830; border-left: 3px solid var(--tr-brand); font-variant-numeric: tabular-nums; }
.ap-tile-label { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-muted); overflow-wrap: anywhere; }
.ap-tile-value { font-family: var(--tr-display); font-size: 1.35rem; line-height: 1.1; margin-top: 3px; color: #fff; }
.ap-tile-value.ap-tile-absent { color: var(--tr-muted); font-size: 1rem; }
/* A figure standing on few shots: dimmed, never hidden. */
.ap-tile-value.ap-tile-thin { opacity: 0.6; }
.ap-tile-sub { font-size: 0.62rem; color: var(--tr-muted); margin-top: 2px; overflow-wrap: anywhere; }
.ap-table-scroll { overflow-x: auto; margin-top: 10px; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.ap-table th { text-align: left; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tr-muted); padding: 6px 6px; border-bottom: 1px solid var(--tr-line); }
.ap-table td { padding: 5px 6px; border-bottom: 1px solid var(--tr-line); }
.ap-table th.ap-num,
.ap-table td.ap-num { text-align: center; }
.ap-table td.ap-num { font-weight: 700; }
.ap-table th.ap-th-leave { text-align: left; }
.ap-leave-name { font-weight: 700; }
.ap-pins { display: block; width: 44px; height: 36px; padding: 2px; border-radius: 6px; background: #1d1830; }
.ap-priority { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-priority-title { width: 100%; font-size: 0.75rem; color: var(--tr-muted); }
.ap-chip { padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: rgba(220, 38, 38, 0.22); color: #ffc9c9; }

/* Charts. */
.ch { display: block; width: 100%; height: auto; border-radius: 10px; background: #15121f; border: 1px solid var(--tr-line); }
.ch-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.ch-axis { font-size: 11px; fill: var(--tr-muted); font-family: inherit; }
.ch-val { font-size: 10px; fill: #d4d4dc; font-family: inherit; }
.ch-legend { font-size: 11px; fill: #f4f4f6; font-family: inherit; font-weight: 700; }
.ch-band { font-size: 10px; fill: var(--tr-brand-light); font-family: inherit; font-weight: 700; }
.ch-band-bg { fill: rgba(124, 58, 237, 0.12); }
.ch-band-clear { fill: transparent; }
.ch-empty { font-size: 13px; fill: var(--tr-muted); font-family: inherit; }
.ch-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.ch-s.ch-b1 { fill: var(--tr-live); } .ch-line.ch-b1 { stroke: var(--tr-live); }
.ch-s.ch-b2 { fill: #9a9aa4; } .ch-line.ch-b2 { stroke: #9a9aa4; }
.ch-s.ch-field { fill: #4c3a78; } .ch-line.ch-field { stroke: #4c3a78; }
.ch-s.ch-score { fill: var(--tr-gold); } .ch-line.ch-score { stroke: var(--tr-gold); }