@import url("runs-shared.css");
/* My runs page styles (owned by the runs stage). Shared components live in site.css and runs-shared.css. */

/* scoreboard */
.rs-board{padding:var(--s-7) var(--gutter)}
.rs-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.rs-tile{border-top:0;padding:4px var(--s-5);border-left:1px solid var(--rule-rev);gap:12px;min-width:0}
.rs-tile:first-child{border-left:0;padding-left:0}
.rs-tile .l{color:rgba(243,236,223,.72)}
.rs-tile .n{font-size:clamp(3rem,5vw,5.4rem);color:var(--paper);white-space:nowrap}
.rs-tile.measured .n{color:var(--signal)}
.rs-tile-sub{font-size:var(--t-small);line-height:1.35;color:rgba(243,236,223,.8)}

/* progress charts */
.rs-progress{padding-bottom:var(--s-7)}
.rs-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.rs-chart{margin:0;min-width:0;border-top:1.5px solid var(--ink);padding-top:var(--s-4)}
.rs-chart-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-4)}
.rs-chart-k,.rs-chart-v{display:flex;flex-direction:column;gap:8px}
.rs-chart-v{align-items:flex-end;text-align:right;flex:none}
.rs-chart-v b{font:900 italic clamp(2rem,2.4vw,2.6rem)/.85 var(--f-display);text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-chart-v b .u{font-size:.55em;margin-left:3px}
.rs-chart-sub{font-size:var(--t-small);color:var(--muted);line-height:1.3}
.rs-chart-box{min-height:196px}
.rs-chart-box.single{min-height:132px}
.rs-svg .rs-ev{fill:var(--kicker);stroke:var(--lake);stroke-width:2}
.rs-svg .rs-best-ring{fill:none;stroke:var(--signal);stroke-width:2.5}
.rs-svg .rs-tag{font:700 11px var(--f-label);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink)}
.rs-svg .rs-nodata{font:700 12px var(--f-label);letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.rs-svg .rs-nodata.sm{font-size:10px}
.rs-legend{margin-top:var(--s-5);align-items:center}
.rs-legend i{display:inline-block;flex:none}
.rs-sw-best{width:9px;height:9px;background:var(--ink);transform:rotate(45deg)}
.rs-sw-dot{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--lake);background:var(--kicker)}
.rs-sw-ring{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--signal)}
.rs-legend-link{margin-left:auto;text-transform:none;letter-spacing:0;font:600 var(--t-small)/1.2 var(--f-body);color:var(--ink)}

/* runs list */
.rs-runs{padding-top:var(--s-6)}
.rs-list{list-style:none;border-top:1.5px solid var(--ink)}
.rs-run{display:grid;grid-template-columns:60px 96px minmax(0,1fr) auto auto;grid-template-areas:"no thumb main stats act";gap:var(--s-5) var(--s-6);align-items:center;padding:var(--s-5) 0;border-bottom:1px solid var(--rule)}
.rs-run-no{grid-area:no;align-self:start;padding-top:4px;font:900 italic 2.8rem/.8 var(--f-display);color:var(--signal-ink)}
.rs-run .rs-thumb{grid-area:thumb;width:96px;align-self:start;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.rs-run-main{grid-area:main;min-width:0}
.rs-run-date{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;color:var(--muted)}
.rs-run-name{font:900 italic clamp(2rem,2.8vw,3rem)/.88 var(--f-display);text-transform:uppercase;margin-top:10px}
.rs-run-name a:hover{color:var(--signal-text)}
.rs-run-meta{margin-top:8px;font-size:var(--t-small);color:var(--muted);overflow-wrap:anywhere}
.rs-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rs-warn{margin-top:10px;font-size:var(--t-small);color:var(--ink-2)}
.rs-warn summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:36px;list-style:none;font:700 var(--t-label)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink)}
.rs-warn summary::-webkit-details-marker{display:none}
.rs-warn summary::before{content:"";width:12px;height:6px;background:var(--ink);transform:skewX(var(--slant))}
.rs-warn[open] summary::before{background:var(--muted)}
.rs-warn ul{list-style:none;display:grid;gap:6px;max-width:44rem;margin-top:4px}
.rs-warn li{padding-left:12px;border-left:2px solid var(--rule)}
.rs-run-stats{grid-area:stats;display:grid;grid-template-columns:repeat(3,auto);gap:var(--s-4) var(--s-6)}
.rs-run-stats div{display:flex;flex-direction:column;gap:8px}
.rs-run-stats dt{font:700 var(--t-label)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rs-run-stats dd{font:900 italic 2.2rem/.85 var(--f-display);text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-run-stats dd .u{font-size:.55em;margin-left:3px}
.rs-run-act{grid-area:act;display:flex;flex-direction:column;align-items:flex-end}
.rs-run-act .btn.ghost{margin-bottom:6px}
.rs-run-act .btn.text{min-height:40px;padding:8px 2px}

/* data panel */
.rs-data-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.rs-data-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);border-top:1.5px solid var(--ink);padding-top:var(--s-4);min-width:0}
.rs-data-col>p{max-width:30rem;color:var(--ink-2)}
.rs-data-col>.hint{color:var(--muted)}
.rs-usage{font:900 italic clamp(2.6rem,3.6vw,3.8rem)/.85 var(--f-display);text-transform:uppercase}
.rs-data .progress{width:100%;max-width:30rem}
.rs-file{position:relative}
.rs-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.rs-file:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.rs-date-field{margin-top:var(--s-5)}
.rs-date-field .input{max-width:260px}

@media (max-width:1100px){
  .rs-tile{padding-left:var(--s-4);padding-right:var(--s-4)}
  .rs-tile .n{font-size:clamp(2.6rem,4.6vw,4rem)}
  .rs-charts{gap:var(--s-5)}
  .rs-run{grid-template-columns:48px 88px minmax(0,1fr) auto;grid-template-areas:"no thumb main act" "no thumb stats act";row-gap:var(--s-4)}
  .rs-run .rs-thumb{width:88px}
  .rs-run-stats{justify-content:start}
  .rs-data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .rs-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs-tile:nth-child(4){border-left:0;padding-left:0}
  .rs-tile:nth-child(n+4){margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--rule-rev)}
  .rs-charts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .rs-board{padding:var(--s-6) var(--gutter)}
  .rs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-tile,.rs-tile:nth-child(n){margin:0;border-left:0;padding:var(--s-4) var(--s-4) var(--s-4) 0;border-top:1px solid var(--rule-rev)}
  .rs-tile:nth-child(even){padding-left:var(--s-4);border-left:1px solid var(--rule-rev)}
  .rs-tile:nth-child(-n+2){border-top:0;padding-top:0}
  .rs-tile:last-child{grid-column:1/-1;padding-bottom:0}
  .rs-tile .n{font-size:clamp(2.6rem,12vw,3.4rem)}
  .rs-charts{grid-template-columns:1fr}
  .rs-legend-link{margin-left:0;width:100%}
  .rs-run{grid-template-columns:80px minmax(0,1fr);grid-template-areas:"thumb main" "stats stats" "act act";gap:var(--s-4)}
  .rs-run-no{display:none}
  .rs-run .rs-thumb{width:80px}
  .rs-run-name{font-size:2rem}
  .rs-run-stats{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:var(--s-4);border-top:1px solid var(--rule)}
  .rs-run-stats div{min-width:0}
  .rs-run-stats dd{font-size:1.8rem;white-space:normal;overflow-wrap:anywhere}
  .rs-run-act{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 var(--s-5)}
  .rs-run-act .btn.ghost{margin:0 var(--s-2) 0 0}
  .rs-data-grid{grid-template-columns:1fr}
}