/* Styles for the record plugin. Prefix every selector with .p-record */

.p-record h3 { margin: 0 0 8px; }
.p-record .rec-h3 { margin: 30px 0 8px; }
.p-record .rec-p { max-width: 46em; margin: 0 0 12px; font-size: 16px; }
.p-record .rec-gap { margin-top: 18px; }
.p-record .fine b { color: var(--ink); }

/* The short answer at the top of the page */
.p-record .rec-answer { list-style: none; margin: 10px 0 20px; padding: 0; max-width: 44em; border-left: 6px solid var(--mark); }
.p-record .rec-answer li { font-size: clamp(17px, 1.9vw, 19px); line-height: 1.45; padding: 6px 0 6px 16px; }
.p-record .rec-answer li b { font-weight: 800; }

/* Stat tiles */
.p-record .rec-tiles, .p-record .rec-acc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; margin: 4px 4px 26px 0; }
.p-record .rec-tile { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px 13px; background: var(--paper); }
.p-record .rec-tile b { display: block; font-weight: 900; font-size: clamp(26px, 3.2vw, 36px); line-height: 1; font-variation-settings: "wdth" 72; letter-spacing: -0.02em; margin-bottom: 7px; white-space: nowrap; }
.p-record .rec-tile span { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.p-record .rec-acc-tiles .rec-tile { box-shadow: none; border-width: 1px; }

.p-record .rec-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 44px; }
.p-record .rec-list { margin: 0; padding: 0 0 0 1.1em; max-width: 46em; }
.p-record .rec-list li { margin: 0 0 10px; font-size: 16px; }
.p-record .rec-list li b { font-weight: 700; }

/* Scorecard */
.p-record .rec-cards { border-top: 1px solid var(--ink); }
.p-record .rec-card { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 6px 28px; padding: 16px 0 16px 12px; border-bottom: 1px solid var(--ink); border-left: 6px solid transparent; }
.p-record .rec-card.is-home { border-left-color: var(--mark); background: linear-gradient(var(--wash), var(--wash)); }
.p-record .rec-card-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.p-record .rec-card h3 { font-size: 22px; margin: 0; }
.p-record .rec-home { font: 500 12px/1 var(--mono); background: var(--mark); border: 1px solid var(--ink); padding: 3px 6px; margin-left: 6px; vertical-align: 3px; font-variation-settings: "wdth" 100; letter-spacing: 0; white-space: nowrap; }
.p-record .rec-meta { font: 400 12.5px/1.45 var(--mono); color: var(--ink-2); margin: 0; }
.p-record .rec-call p { margin: 0 0 5px; font-size: 15.5px; line-height: 1.35; }
.p-record .rec-call .sw { margin-right: 6px; }
.p-record .rec-k { display: block; font: 400 12px/1.3 var(--mono); color: var(--ink-2); }
.p-record .rec-badge { display: inline-block; font: 500 12px/1 var(--mono); padding: 5px 7px; border: 1px solid var(--ink); border-radius: 2px; white-space: nowrap; }
.p-record .rec-badge.in50 { background: var(--paper); }
.p-record .rec-badge.in50::before { content: "✓ "; }
.p-record .rec-badge.in90 { background: var(--paper); border-style: dashed; }
.p-record .rec-badge.out { background: var(--ink); color: #fff; }
.p-record .rec-badge.out::before { content: "✕ "; }
.p-record .rec-ranges { display: grid; gap: 4px; align-content: start; }
.p-record .rec-range { display: grid; grid-template-columns: 150px minmax(0, 1fr) 212px; gap: 4px 14px; align-items: center; padding: 4px 0; }
.p-record .rec-range-mid { display: block; min-width: 0; }
.p-record .rec-tppnote { margin-top: 6px; max-width: 60em; }
.p-record .rec-tppnote b { color: var(--ink); font-weight: 500; }
.p-record .rec-call p.rec-meta { font-size: 12.5px; line-height: 1.45; }
.p-record .table-scroll + .rec-p { margin-top: 14px; }
.p-record .rec-range-name { font-size: 14.5px; font-weight: 700; }
.p-record .rec-range-svg svg { display: block; width: 100%; height: 26px; }
.p-record .rec-range-num { display: block; font: 400 12.5px/1.35 var(--mono); color: var(--ink-2); }
.p-record .rec-range-num b { color: var(--ink); font-weight: 500; }
.p-record .rec-range .rec-badge { justify-self: start; white-space: normal; line-height: 1.3; }

/* Filters */
.p-record .rec-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.p-record .rec-filter-label { font: 400 13px var(--mono); color: var(--ink-2); min-width: 56px; }
.p-record .rec-filter button, .p-record .rec-more { font: 500 13px/1 var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 2px; padding: 9px 10px; cursor: pointer; }
.p-record .rec-filter button:hover, .p-record .rec-more:hover { background: var(--wash); }
.p-record .rec-filter button[aria-pressed="true"] { background: var(--mark); }
.p-record .rec-filter button.is-home { box-shadow: inset 0 -4px 0 var(--mark); }
.p-record .rec-filter button.is-home[aria-pressed="true"] { box-shadow: inset 0 -4px 0 var(--ink); }

/* Charts */
.p-record .rec-calib { margin-top: 14px; }
.p-record .rec-hit, .p-record .rec-dot { outline: none; cursor: default; }
.p-record a .rec-dot { cursor: pointer; }
.p-record .rec-hit:hover, .p-record .rec-hit:focus-visible { fill: rgba(17, 17, 17, 0.05); }
.p-record .rec-dot { stroke: #fff; stroke-width: 1; }
.p-record .rec-dot:hover, .p-record .rec-dot:focus-visible, .p-record a:focus-visible .rec-dot { stroke: var(--ink); stroke-width: 2.5; }
.p-record .chart a:hover { background: none; }
.p-record .chart a:focus-visible { outline: none; }
.p-record .rec-key { display: inline-block; flex: none; }
.p-record .rec-key.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.p-record .rec-key.sq { width: 10px; height: 10px; border: 2px solid var(--ink); background: var(--paper); }
.p-record .rec-key.dia { width: 9px; height: 9px; background: var(--ink); transform: rotate(45deg); margin: 0 2px; }
.p-record .rec-key.dash { width: 20px; height: 0; border-top: 1.5px dashed var(--ink-3); }
.p-record .rec-key.bar { width: 0; height: 14px; border-left: 1.5px solid var(--ink); margin: 0 5px; }
.p-record .rec-key.band { width: 10px; height: 14px; background: var(--ink); opacity: 0.14; }

/* Tables */
.p-record .rec-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.p-record .rec-table th { font: 400 12px var(--mono); color: var(--ink-2); text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.p-record .rec-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; vertical-align: middle; }
.p-record .rec-table .r { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.p-record .rec-table th.r { font-size: 12px; white-space: normal; }
.p-record .rec-table .sw { margin-right: 6px; }
.p-record .rec-table tr.rec-total td { border-top: 1px solid var(--ink); font-weight: 700; }
.p-record .rec-table.rec-miss tbody tr:hover td { background: var(--wash); }
.p-record .rec-barcell { min-width: 130px; width: 22%; }
.p-record .rec-bar { position: relative; display: block; height: 12px; background: var(--wash); }
.p-record .rec-bar i { display: block; height: 100%; background: var(--ink); }
.p-record .rec-bar b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--mark); outline: 1px solid var(--ink); }
.p-record .rec-details { margin-top: 16px; }
.p-record .rec-details summary { font: 500 13px var(--mono); cursor: pointer; padding: 8px 0; width: fit-content; }
.p-record .rec-details summary:hover { background: var(--mark); }

/* Method */
.p-record .rec-method p { max-width: 48em; margin: 0 0 12px; font-size: 15.5px; }
.p-record .rec-method a { overflow-wrap: anywhere; }
.p-record .rec-notes li { font-size: 15px; }
.p-record .rec-notes ul { margin: 6px 0 4px; padding-left: 1.1em; color: var(--ink-2); }
.p-record .rec-notes ul li { font-size: 14.5px; margin-bottom: 4px; }
.p-record .rec-src { font-size: 14px; color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .p-record .rec-card { grid-template-columns: minmax(0, 1fr); }
  .p-record .rec-call { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
  .p-record .rec-tiles, .p-record .rec-acc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .p-record .rec-range { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0 6px; border-top: 1px solid var(--rule); }
  .p-record .rec-range-name { grid-column: 1; grid-row: 1; }
  .p-record .rec-range .rec-badge { grid-column: 2; grid-row: 1; justify-self: end; }
  .p-record .rec-range-mid { grid-column: 1 / -1; }
  .p-record .rec-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .p-record .rec-call { grid-template-columns: minmax(0, 1fr); }
  .p-record .rec-card { padding-left: 8px; }
  .p-record .rec-tiles, .p-record .rec-acc-tiles { gap: 12px; margin-right: 4px; }
  .p-record .rec-tile { padding: 10px 10px 11px; }
  .p-record .rec-tile span { font-size: 13px; }
  .p-record .rec-filter-label { width: 100%; }
}