/* Sprint39 final device QA for review summary, top finishers and payout disclosure. */

/* Top-three rank icons reuse the original DRE medals. */
.kirin-review-result-top-block .kirin-review-rank-icon{
  grid-area:rank;
  display:grid;
  place-items:center;
  width:42px;
  min-width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-size:28px;
  font-weight:400;
  line-height:1;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.35));
}
.kirin-review-result-top-block .kirin-review-finisher em,
.kirin-review-result-horse em{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:auto;
  min-width:26px;
  height:24px;
  margin-right:7px;
  padding:0 7px;
  border:1px solid rgba(215,181,74,.4);
  border-radius:5px;
  background:rgba(215,181,74,.11);
  color:var(--gold-soft);
  font-size:11px;
  font-style:normal;
  font-weight:900;
}
.kirin-review-result-top-block .kirin-review-finisher{
  grid-template-columns:42px minmax(0,1fr) auto;
  grid-template-areas:"rank horse odds";
  min-height:58px;
  padding:9px 12px;
}
.kirin-review-result-top-block .kirin-review-finisher>small{
  grid-area:odds;
  justify-self:end;
  white-space:nowrap;
}

/* PC: keep the shared horse-number chip compact inside the top-three card. */
@media (min-width:1281px){
  .kirin-review-result-top-block .kirin-review-finisher>strong .kirin-horse-number-chip{
    display:inline-flex;
    flex:0 0 22px;
    width:22px;
    max-width:22px;
    min-width:22px;
    height:22px;
    max-height:22px;
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-size:11px;
    line-height:1;
  }
  .kirin-review-result-top-block .kirin-review-finisher>strong{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    line-height:1.25;
  }
}

/* Ensure inherited legacy span styling never draws a frame around medal icons. */
.kirin-review-result-top-block .kirin-review-finisher > .kirin-review-rank-icon{
  display:grid !important;
  place-items:center !important;
  width:34px !important;
  min-width:34px !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:inherit !important;
  font-size:25px !important;
  line-height:1 !important;
}

/* Desktop/tablet: payout is always visible and behaves as normal content. */
.kirin-review-payout-disclosure{border:0}
.kirin-review-payout-disclosure>summary{display:none}
.kirin-review-payout-disclosure[open]>.kirin-review-payout-disclosure-body{display:block}
.kirin-review-payout-disclosure-body>.kirin-review-result-subheading{display:flex}

/* iPad portrait: rating and learning share row one; center horse spans row two. */
@media (min-width:721px) and (max-width:980px){
  .kirin-review-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kirin-review-summary>div:nth-child(2){grid-column:1/-1;grid-row:2;min-width:0}
  .kirin-review-summary>div:nth-child(2) .kirin-review-horse-line{white-space:normal;overflow-wrap:anywhere}
}

/* Tablet landscape: always stack the top three as three horizontal rows. */
@media (min-width:721px) and (max-width:1280px){
  .kirin-review-result-top-block .kirin-review-finishers{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-flow:row !important;
    gap:8px !important;
  }
  .kirin-review-result-top-block .kirin-review-finisher{
    width:100% !important;
    grid-template-columns:42px minmax(0,1fr) auto !important;
    grid-template-areas:"rank horse odds" !important;
  }
  .kirin-review-payout-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile: compact payout accordion, initially closed by JS. */
@media (max-width:720px){
  .kirin-review-result-top-block .kirin-review-finisher{
    grid-template-columns:36px minmax(0,1fr);
    grid-template-areas:"rank horse" "rank odds";
    min-height:0;
    padding:8px 9px;
  }
  .kirin-review-result-top-block .kirin-review-finisher > .kirin-review-rank-icon{
    width:30px !important;
    min-width:30px !important;
    font-size:23px !important;
  }
  .kirin-review-result-top-block .kirin-review-finisher>small{justify-self:start}
  .kirin-review-payout-disclosure{
    border:1px solid var(--line-soft);
    border-radius:11px;
    background:#090c09;
    overflow:hidden;
  }
  .kirin-review-payout-disclosure>summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:52px;
    padding:10px 13px;
    cursor:pointer;
    list-style:none;
  }
  .kirin-review-payout-disclosure>summary::-webkit-details-marker{display:none}
  .kirin-review-payout-disclosure>summary>span{display:grid;gap:2px}
  .kirin-review-payout-disclosure>summary strong{color:var(--gold-soft);font-size:13px}
  .kirin-review-payout-disclosure>summary small{color:var(--muted);font-size:9px}
  .kirin-review-payout-disclosure>summary b{color:var(--gold-soft);font-size:20px;font-weight:500;transition:transform .18s ease}
  .kirin-review-payout-disclosure[open]>summary b{transform:rotate(45deg)}
  .kirin-review-payout-disclosure:not([open])>.kirin-review-payout-disclosure-body{display:none}
  .kirin-review-payout-disclosure-body{padding:0 8px 8px;border-top:1px solid rgba(215,181,74,.14)}
  .kirin-review-payout-disclosure-body>.kirin-review-result-subheading{display:none}
  .kirin-review-payout-groups{grid-template-columns:1fr;gap:5px;margin-top:8px}
  .kirin-review-payout-group{padding:7px 9px}
  .kirin-review-payout-group p{min-height:19px;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .kirin-review-payout-group em{min-width:74px}
}