/*
 * Clef schedule and round recap (css/rounds.css): /schedule and /round. Loaded after css/clef.css (and css/board.css on
 * /round, for the ranked table and the totals). Built on the shared tokens: cream panels with amber borders, mono
 * numbers, uppercase orange labels, the five-line staff.
 */

/* ------------------------------------------------------------------ page head */

.rx-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--alabaster), var(--paper) 85%); }
.rx-head .eyebrow { margin-bottom: 14px; }
.rx-head .lede { font-variant-numeric: tabular-nums; }
.rx-staff { overflow: visible; }
.rx-staff .staff-lines path { stroke: var(--staff-soft, #fde2bd); stroke-width: 1.5; fill: none; }
.rx-staff .staff-note { fill: var(--amber-soft, #fdd7a3); }
.rx-staff .staff-spark { fill: var(--spark, #f8a225); }
.rx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.rx-totals { margin-top: 26px; }

/* ------------------------------------------------------------------ sections */

.rx-sec { padding-block: clamp(36px, 5vw, 56px) clamp(48px, 7vw, 80px); }
.rx-band { padding-block: clamp(48px, 7vw, 88px); }
.rx-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 12px 40px; align-items: end; margin-bottom: 22px; }
.rx-sec-head > div { display: grid; gap: 10px; min-width: 0; }
.rx-sec-head .h3 { font-variant-numeric: tabular-nums; }
.rx-note { font-size: 14.5px; line-height: 1.6; color: var(--body); }
@media (max-width: 760px) { .rx-sec-head { grid-template-columns: minmax(0, 1fr); } }
#clock-title + .chip, .rx-sec-head > .chip { justify-self: start; }

/* the card a round uses: asset logos and a name */
.rx-card { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--body); }
.rx-card-logos { display: inline-flex; }
.rx-card-logos .logo + .logo { margin-left: -5px; }
.rx-card.is-stock .rx-card-name { color: var(--rust); }
.chip .rx-card { font-size: 12.5px; color: inherit; }

/* ------------------------------------------------------------------ clocks */

.rx-clocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rx-clock { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.rx-clock.is-hot { border: 1.5px solid var(--amber); background: var(--cream); }
.rx-clock-k { font: 600 11.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rx-clock.is-hot .rx-clock-k { color: var(--orange-text); }
.rx-clock-v { font: 500 clamp(28px, 3.6vw, 40px)/1.05 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--ink); min-height: 1.05em; }
.rx-clock-at { font: 500 12.5px/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.rx-progress { height: 3px; margin-top: 16px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.rx-progress > i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--orange); border-radius: inherit; transition: width 1s linear; }
.rx-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-top: 14px; font: 500 13px/1.4 var(--mono); color: var(--rust); }
@media (max-width: 760px) { .rx-clocks { grid-template-columns: minmax(0, 1fr); gap: 10px; } .rx-clock { gap: 6px; padding: 14px 16px; } .rx-clock-v { font-size: 30px; } .rx-clock-at { overflow-wrap: anywhere; } }

/* ------------------------------------------------------------------ events */

.rx-events { display: grid; gap: 12px; }
.rx-event { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.rx-event.is-big { border: 1.5px solid var(--amber); background: var(--cream); }
.rx-when { display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.rx-when-day { font: 600 13px/1.2 var(--sans); color: var(--orange-text); letter-spacing: .02em; }
.rx-when-time { font: 500 24px/1.1 var(--mono); color: var(--ink); letter-spacing: -.02em; }
.rx-when-utc { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.rx-event-body { display: grid; gap: 4px; min-width: 0; }
.rx-event-kind { font: 600 11px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rx-event-title { font: 600 18px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.rx-event-line { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.rx-event-link { justify-self: start; font-size: 13.5px; }
.rx-ics { white-space: nowrap; }
@media (max-width: 760px) {
  .rx-event { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .rx-when { grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 2px 12px; }
  .rx-when-day { grid-column: 1 / -1; }
  .rx-ics { justify-self: start; }
}

/* ------------------------------------------------------------------ timeline */

.rx-tl { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.rx-tl-list { display: grid; }
.rx-tl-day { padding: 10px 18px; background: var(--alabaster); border-bottom: 1px solid var(--line); font: 600 11.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rx-tl-row { display: grid; grid-template-columns: 150px minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 10px 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.rx-tl-list > li:last-child { border-bottom: 0; }
.rx-tl-row.is-open { background: var(--cream-2); box-shadow: inset 3px 0 0 var(--orange); }
.rx-tl-id { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 600 14px/1.2 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; min-height: 32px; }
.rx-tl-id:hover span:first-child { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.rx-now { height: 22px; padding: 0 9px; font-size: 11.5px; background: var(--orange-text, #c93a00); color: #fff; }
.rx-tl-card { min-width: 0; }
.rx-tl-t { display: grid; gap: 2px; font-variant-numeric: tabular-nums; min-width: 0; }
.rx-tl-k { font: 600 10.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.rx-tl-local { font: 500 15px/1.2 var(--mono); color: var(--ink); }
.rx-tl-utc { font: 500 12px/1.2 var(--mono); color: var(--muted); }
@media (max-width: 860px) {
  .rx-tl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 16px; }
  .rx-tl-id { grid-column: 1 / 2; }
  .rx-tl-card { grid-column: 2 / -1; justify-self: end; }
}

/* ------------------------------------------------------------------ round recap */

.rx-moves { display: grid; gap: 10px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--alabaster); }
.rx-moves-k { font: 600 11.5px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rx-moves-list { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.rx-move { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 12px; }
.rx-move-name { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1.2 var(--mono); color: var(--ink); align-self: center; }
.rx-move-v { font: 500 20px/1.15 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.rx-move-v.up { color: var(--good); }
.rx-move-v.down { color: var(--bad); }
.rx-move-t { grid-column: 2; font: 500 12px/1.2 var(--mono); color: var(--muted); }

.rx-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rx-q { display: grid; gap: 10px; min-width: 0; }
.rx-q .panel-head { margin-bottom: 0; }
.rx-q-asset { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--mono); color: var(--ink); }
.rx-q-text { font-size: 15.5px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.rx-q-sub { font: 600 11px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--orange-text); margin-top: 4px; }
.rx-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-opts li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--amber-soft, #fdd7a3); font-size: 13.5px; color: var(--rust); }
@media (max-width: 1080px) { .rx-qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rx-qs { grid-template-columns: minmax(0, 1fr); } }

.rx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; font-size: 15px; color: var(--body); }
.rx-more { margin-top: 12px; }
.rx-cards td.lb-rank { width: 56px; }
@media (max-width: 720px) {
  .rx-cards tbody tr > td:nth-child(3) { grid-column: 2; }
  .rx-cards tbody tr > td:nth-child(4) { grid-column: 3; }
  .rx-cards tbody tr > td.lb-mean { grid-column: 4; }
}
.rx-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 0 clamp(48px, 7vw, 80px); }
.rx-pager .is-prev { flex-direction: row-reverse; }

@media (max-width: 820px), (pointer: coarse) {
  .rx-ics { --btn-h: 44px; }
  .rx-event-link, .rx-pager a, .rx-tl-id { min-height: 44px; display: inline-flex; align-items: center; }
  [data-share] { --btn-h: 44px; }
}
.rx-head .h1 { max-width: 15ch; text-wrap: balance; }

/* ------------------------------------------------------------------ share (js/ui/sharecard.js) */

.rx-share { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.rx-share [hidden] { display: none; }
@media (max-width: 420px) { .rx-share { width: 100%; } .rx-share .btn { flex: 1 1 auto; padding: 0 10px; } }