:root {
  --hot10-bg: #050505;
  --hot10-white: #f7f7f5;
  --hot10-gray: #8d9099;
  --hot10-rule: rgba(255, 255, 255, .14);
  --hot10-gold: #c7a84b;
  --hot10-red: #d84b4b;
  --hot10-blue: #4d74d9;
}

.public-page .hot10-section {
  width: 100vw;
  margin: 26px calc(50% - 50vw) 0;
  background: var(--hot10-bg);
  color: var(--hot10-white);
}

.public-page .hot10-inner {
  width: calc(100% - 64px);
  max-width: 928px;
  margin: 0 auto;
  padding: 26px 0 36px;
}

.hot10-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hot10-logo, .hot10-date, .hot10-list { margin: 0; }

.hot10-logo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  color: var(--hot10-white);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(42px, 4.4vw, 52px);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: .82;
}

.hot10-place { font-size: .2em; letter-spacing: .44em; line-height: 1.12; }
.hot10-name { display: inline-flex; align-items: flex-end; width: max-content; margin-top: 4px; letter-spacing: -.015em; }
.hot10-name b { position: relative; display: inline-block; margin-left: .08em; color: var(--hot10-gold); font-weight: inherit; }
.hot10-name b::after { position: absolute; right: 0; bottom: -.16em; left: 0; height: .075em; background: var(--hot10-gold); content: ""; }

.hot10-date {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: flex-end;
  color: var(--hot10-white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.hot10-month-day { padding-top: 1px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(32px, 3.6vw, 43px); font-weight: 900; letter-spacing: -.025em; }
.hot10-date-meta { display: flex; gap: 8px; padding-top: 5px; color: var(--hot10-gray); font-size: clamp(11px, 1.3vw, 14px); font-weight: 650; letter-spacing: .035em; }

.hot10-list { min-height: 486px; margin-top: 22px; padding: 0; list-style: none; }

.hot10-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(150px, .52fr);
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--hot10-rule);
}

.hot10-row:first-child { padding-top: 8px; border-top: 0; }
.hot10-rank-block { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.hot10-rank { color: var(--hot10-white); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em; }
.hot10-title { min-width: 0; overflow: hidden; color: var(--hot10-white); font-size: 17px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.hot10-artist { min-width: 0; overflow: hidden; color: var(--hot10-gray); font-size: 14px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.hot10-movement { color: var(--hot10-gray); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.hot10-movement.is-new, .hot10-movement.is-re { color: var(--hot10-gold); }
.hot10-movement.is-up { color: var(--hot10-red); }
.hot10-movement.is-down { color: var(--hot10-blue); }
.hot10-movement.is-flat { color: var(--hot10-gray); }
.hot10-loading, .hot10-error { display: flex; min-height: 486px; align-items: center; color: var(--hot10-gray); font-size: 13px; }

.hot10-request { margin-top: 18px; }
.hot10-request-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hot10-request-controls { display: flex; gap: 8px; }
.hot10-request input:not(.hot10-request-honey),
.hot10-request button { height: 40px; border: 1px solid var(--hot10-rule); border-radius: 5px; font: inherit; }
.hot10-request input:not(.hot10-request-honey) { flex: 1 1 auto; min-width: 0; padding: 0 12px; background: rgba(255, 255, 255, .06); color: var(--hot10-white); font-size: 14px; }
.hot10-request input::placeholder { color: var(--hot10-gray); opacity: 1; }
.hot10-request input:focus::placeholder { color: transparent; }
.hot10-request button { flex: 0 0 auto; padding: 0 16px; background: var(--hot10-white); color: var(--hot10-bg); font-size: 13px; font-weight: 700; cursor: pointer; }
.hot10-request button:hover { background: var(--hot10-gold); }
.hot10-request-honey { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hot10-request-success, .hot10-request-error { margin: 8px 0 0; font-size: 13px; }
.hot10-request-success { color: var(--hot10-gold); }
.hot10-request-error { color: #ee8d8d; }

/* Split from 1366px: the player remains about 860px wide while the
   HOT 10 panel keeps its 440px minimum width. */
@media (min-width: 1366px) {
  .public-page {
    background: linear-gradient(to right, var(--page-bg) 0 70%, var(--hot10-bg) 70% 100%);
  }

  .public-page .tv-main-layout {
    display: contents;
  }

  .public-page .tv-shell {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(440px, 3fr);
    grid-template-rows: 74px auto;
    grid-template-areas:
      "masthead hot10"
      "main hot10";
    width: 100%;
    max-width: none;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    align-items: start;
    align-content: start;
  }

  .public-page .masthead,
  .public-page .tv-main-left {
    width: calc(100% - 64px);
    max-width: none;
    justify-self: center;
  }

  .public-page .masthead {
    grid-area: masthead;
    margin-top: 20px;
  }

  .public-page .tv-main-left {
    grid-area: main;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    gap: 14px;
    min-width: 0;
  }

  .public-page .tv-main-left > .screen { grid-column: 1 / -1; }

  .public-page .program-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  .public-page .program-pair .program-info,
  .public-page .program-pair .next-info {
    min-width: 0;
    margin-top: 0;
    padding-block: 11px;
  }

  .public-page .program-pair .program-info h2,
  .public-page .program-pair .next-info h2 {
    margin-top: 5px;
  }

  .public-page .program-pair .program-info p:not(.kicker),
  .public-page .program-pair .next-info p:last-child {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .public-page .player-controls {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(44px, 1fr));
    align-self: stretch;
    height: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .public-page .player-controls button {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: 0 10px;
    white-space: nowrap;
    border-radius: 0;
  }

  .public-page .player-controls button:first-child {
    border-radius: 9px 9px 0 0;
  }

  .public-page .player-controls button:last-child {
    border-radius: 0 0 9px 9px;
  }

  .public-page .tv-main-left > .note-link {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: 0;
    margin-bottom: 26px;
  }

  .public-page .hot10-section {
    grid-area: hot10;
    width: auto;
    min-width: 0;
    margin: 0;
    align-self: stretch;
  }

  .public-page .hot10-inner {
    margin: 0;
    width: 100%;
    max-width: none;
    /* Align the HOT 10 header with the player, not the page top. */
    padding: 71px 28px 36px;
  }

  .hot10-header { align-items: flex-start; gap: 16px; }
  .hot10-logo { font-size: clamp(40px, 3.3vw, 50px); }
  .hot10-name { margin-top: -2px; }
  .hot10-month-day { font-size: clamp(34px, 2.8vw, 40px); }
  .hot10-date { padding-top: 6px; }
  .hot10-list { min-height: 0; }
  .hot10-request { margin-top: 20px; }

  .hot10-row {
    grid-template-columns: 68px minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 10px;
    align-items: center;
    padding: 20px 0;
  }

}

/* On standard desktop widths, lift the ranking panel above the player line
   so all ten entries remain easier to scan without changing their density. */
@media (min-width: 1366px) and (max-width: 1919px) {
  .public-page .hot10-inner { padding-top: 22px; }
}

@media (max-width: 1365px) {
  .public-page .tv-main-layout {
    display: flex;
    flex-direction: column;
  }

  .public-page .tv-main-left {
    display: contents;
  }

  .public-page .screen { order: 1; }
  .public-page .player-controls { order: 2; }
  .public-page .program-pair { order: 3; }
  .public-page .hot10-section { order: 4; }
  .public-page .note-link { order: 5; }
}

@media (min-width: 1440px) {
  .public-page .hot10-inner { max-width: 1088px; }
}

@media (max-width: 767px) {
  .public-page .hot10-inner { width: calc(100% - 64px); padding: 24px 0 32px; }
  .hot10-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px;
  }
  .hot10-logo { font-size: clamp(35px, 10.4vw, 42px); }
  .hot10-name { margin-top: -2px; }
  .hot10-place { letter-spacing: .38em; }
  .hot10-month-day { font-size: clamp(29px, 8.7vw, 35px); }
  .hot10-date { justify-self: end; padding-top: 6px; }
  .hot10-date-meta { gap: 7px; padding-top: 4px; font-size: 11px; }
  .hot10-list { min-height: 610px; }
  .hot10-row {
    grid-template-columns: 78px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 3px;
    align-items: start;
    padding: 9px 0;
  }
  .hot10-rank-block { grid-row: 1 / span 2; padding-top: 2px; gap: 6px; }
  .hot10-rank { font-size: 13px; }
  .hot10-title { font-size: 16px; }
  .hot10-artist { grid-column: 2; font-size: 13px; }
  .hot10-movement { padding-top: 1px; font-size: 11px; }
  .hot10-loading, .hot10-error { min-height: 610px; }
  .hot10-request { margin-top: 16px; }
  .hot10-request-controls { gap: 6px; }
  .hot10-request input:not(.hot10-request-honey) { padding: 0 10px; font-size: 13px; }
  .hot10-request button { padding: 0 14px; }
}

@media (max-width: 340px) {
  .hot10-header { gap: 8px; }
  .hot10-logo { font-size: 33px; }
  .hot10-place { letter-spacing: .31em; }
  .hot10-month-day { font-size: 28px; }
  .hot10-row { grid-template-columns: 72px minmax(0, 1fr); }
}