/* Inner pages of theme 03. Each block belongs to one group of pages. */

/* programacao-locutores */
#pContent .schedule-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

#pContent .schedule-tabs li {
  display: block;
  float: none;
  width: auto;
  flex: 1 1 8em;
  padding: 0;
}

#pContent .schedule-tabs .nav-link {
  display: block;
  width: 100%;
  padding: 0.7em 0.5em;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--p1, #16181f);
  background: color-mix(in srgb, var(--p1, #16181f) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
}

#pContent .schedule-tabs .nav-link:hover {
  color: var(--p1, #16181f);
  background: color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
}

#pContent .schedule-tabs .nav-link:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

/* The day being shown is a painted bar: p3 behind, p2 on top */
#pContent .schedule-tabs .nav-link.active,
#pContent .schedule-tabs .nav-link.active:hover {
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-color: var(--p3, #05abb7);
}

#pContent .schedule-list { margin-top: 0.5em; }

#pContent .schedule-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.6em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--p1, #16181f) 10%, transparent);
}

#pContent .schedule-row:last-child { border-bottom: 0; }

/* A fixed column keeps every start time on the same vertical line */
#pContent .schedule-row__time {
  flex: 0 0 auto;
  width: 7.5em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#pContent .schedule-row__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pContent .schedule-row__onair {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.55em;
  border-radius: 4px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 0.1em;
}

#pContent .schedule-row__host {
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5em;
  max-width: 13em;
}

#pContent .schedule-row__avatar {
  flex-shrink: 0;
  width: 2.6em;
  height: 2.6em;
  border-radius: 4px;
  object-fit: cover;
}

#pContent .schedule-row__hostname {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pContent .loc-card {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  height: 100%;
  padding: 0.75em;
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--p1, #16181f) 4%, transparent);
}

#pContent .loc-card__head {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

#pContent .loc-card__avatar {
  flex-shrink: 0;
  width: 3.7em;
  height: 3.7em;
  border-radius: 4px;
  object-fit: cover;
}

#pContent .loc-card__info { min-width: 0; }

#pContent .loc-card__name {
  margin: 0;
  font-size: 1.05em;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pContent .loc-card__role {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.85em;
  overflow: hidden;
}

#pContent .loc-card__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: auto;
}

#pContent .loc-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 14%, transparent);
  border-radius: 4px;
  background: var(--p4, #ffffff);
}

#pContent .loc-social:hover { border-color: currentColor; }

#pContent .loc-social .icon svg {
  width: 1.05em;
  height: 1.05em;
}

/* posts-post-pagina */
#pContent .post-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Every thumbnail gets the same shape, so the grid never goes ragged */
#pContent .post-card .card-grid-image { aspect-ratio: 16 / 9; }

#pContent .post-card .card-grid-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pContent .post-card__date {
  margin-top: 0.5em;
  font-size: 0.8em;
  letter-spacing: 0.02em;
}

#pContent .post-card .card-grid-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  align-self: flex-start;
  font-size: 1em;
  line-height: 1.35;
  overflow: hidden;
}

#pContent .post-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 0.3em;
  font-size: 0.87em;
  line-height: 1.45;
  opacity: 0.78;
  overflow: hidden;
}

#pContent .post-card:hover .card-grid-name { text-decoration: underline; }

#pContent .post-card:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

#pContent .posts-empty {
  margin-bottom: 2em;
  font-size: 0.95em;
}

#pContent .post-head { margin-bottom: 1em; }

#pContent .post-head h1 {
  margin: 0.1em 0 0.35em;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--p1, #16181f);
}

#pContent .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: 0.85em;
  opacity: 0.85;
}

/* A painted pill: p3 behind, p2 on top */
#pContent .post-meta .badge {
  padding: 0.4em 0.75em;
  font-size: 1em;
  font-weight: 600;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 4px;
  opacity: 1;
}

#pContent .post-image { margin-bottom: 1.1em; }

#pContent .post-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Article body: the panel writes plain html, so the sizes live here in em */
#pContent .post-entry h2,
#pContent .post-entry h3,
#pContent .post-entry h4 {
  margin: 1.2em 0 0.5em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--p1, #16181f);
}

#pContent .post-entry h2 { font-size: 1.25em; }
#pContent .post-entry h3 { font-size: 1.1em; }
#pContent .post-entry h4 { font-size: 1em; }

/* The base sheet pins the paragraph to 26px, which ignores the size of the site */
#pContent .post-entry p {
  margin: 0 0 1em;
  line-height: 1.7;
}

#pContent .post-entry ul,
#pContent .post-entry ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

#pContent .post-entry li {
  margin-bottom: 0.35em;
  line-height: 1.7;
}

#pContent .post-entry a {
  color: inherit;
  text-decoration: underline;
}

#pContent .post-entry blockquote {
  margin: 1.2em 0;
  padding: 0.1em 0 0.1em 1em;
  font-style: italic;
  border-left: 3px solid var(--p3, #05abb7);
}

#pContent .post-share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin: 1.5em 0 0;
  font-size: 0.9em;
}

#pContent .post-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 4px;
}

#pContent .post-share:hover { opacity: 0.85; }

#pContent .post-share:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

#pContent .post-share .icon svg {
  width: 1.05em;
  height: 1.05em;
}

#pContent .post-related a { text-decoration: none; }

#pContent .post-related a:hover .text-overflow-inline { text-decoration: underline; }

#pContent .post-related .text-overflow-inline {
  margin-top: 0.35em;
  font-size: 0.9em;
  line-height: 1.35;
}

#pContent .page-missing {
  padding-bottom: 2.5em;
  font-size: 0.95em;
}

#pContent .page-missing p { margin-bottom: 1em; }

/* contato-pedido-recados-chat */
#pContent .send-form .input-field label {
  display: block;
  margin-bottom: 0.25em;
}

#pContent .send-form .input-field.has-error .form-control {
  border-color: var(--p3, #05abb7);
  border-width: 2px;
}

#pContent .error-message { margin-top: 0.25em; }

#pContent .error-message div { line-height: 1.35; }

/* The captcha comes at a fixed width and would push a narrow column */
#pContent .g-recaptcha-container {
  max-width: 100%;
  overflow: hidden;
}

#pContent .form-feedback {
  padding: 0.7em 0.9em;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--p1, #16181f);
  background: color-mix(in srgb, var(--p3, #05abb7) 12%, transparent);
  border-left: 3px solid var(--p3, #05abb7);
  border-radius: 4px;
}

#pContent .contact-line {
  margin-bottom: 0.9em;
  padding-bottom: 0.7em;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
}

#pContent .contact-line .icon svg,
#pContent .contact-address .icon svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}

#pContent .contact-address {
  margin-top: 0.9em;
  font-size: 0.92em;
  line-height: 1.5;
}

#pContent .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

#pContent .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  color: var(--p1, #16181f);
  background: var(--p4, #ffffff);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 14%, transparent);
  border-radius: 4px;
}

/* Hover turns the shortcut into a painted bar: p3 behind, p2 on top */
#pContent .social-link:hover {
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-color: var(--p3, #05abb7);
}

#pContent .social-link:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

#pContent .social-link .icon svg {
  width: 1.1em;
  height: 1.1em;
}

#pContent .messages {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

#pContent .message-item .message-source {
  padding: 0.85em 1em;
  background: color-mix(in srgb, var(--p1, #16181f) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 10%, transparent);
  border-radius: 4px;
}

#pContent .message-item .info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6em;
}

#pContent .message-item .name {
  min-width: 0;
  overflow: hidden;
  font-size: 0.95em;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pContent .message-item .date {
  flex-shrink: 0;
  font-size: 0.78em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

#pContent .message-item .place {
  font-size: 0.78em;
  opacity: 0.7;
}

#pContent .message-item .message {
  font-size: 0.93em;
  line-height: 1.5;
}

#pContent .message-item.noResult { font-size: 0.95em; }

/* Last page appends an empty marker only to stop the infinite scroll */
#pContent .message-item.noResult:empty { display: none; }

#pContent .ajax-load {
  padding: 0.7em 0;
  font-size: 0.85em;
  opacity: 0.7;
}

#pContent .chat-frame__iframe {
  display: block;
  width: 100%;
  height: 31em;
  border: 0;
  border-radius: 4px;
}

@media (max-width: 48em) {
  #pContent .contact-map:after { padding-top: 60%; }
  #pContent .chat-frame__iframe { height: 26em; }
}

/* On touch the overlay keeps the map from trapping the scroll */
@media (pointer: coarse) {
  #pContent .contact-map .block-map-mobile { display: block; }
}

/* eventos-promocoes */
#pContent .events-empty,
#pContent .promos-empty {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 1.1em 1em;
  font-size: 0.95em;
  color: var(--p1, #16181f);
  background: color-mix(in srgb, var(--p1, #16181f) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
}

#pContent .events-empty .icon svg,
#pContent .promos-empty .icon svg {
  width: 1.2em;
  height: 1.2em;
  opacity: 0.5;
}

/* Every thumbnail gets the same shape, so the grid never goes ragged */
#pContent .grid-events .card-grid-image,
#pContent .grid-promos .card-grid-image {
  position: relative;
  aspect-ratio: 16 / 9;
}

#pContent .grid-events .card-grid-image img,
#pContent .grid-promos .card-grid-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pContent .grid-events .card-grid-name,
#pContent .grid-promos .card-grid-name {
  align-self: flex-start;
  font-size: 1em;
  line-height: 1.35;
}

#pContent .grid-events a:hover .card-grid-name,
#pContent .grid-promos a:hover .card-grid-name { text-decoration: underline; }

#pContent .grid-events a:focus-visible,
#pContent .grid-promos a:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

/* The date is a painted badge: p3 behind, p2 on top */
#pContent .grid-events .card-grid-date {
  flex-shrink: 0;
  padding: 0.4em 0.6em;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

#pContent .grid-events .card-grid-day { font-size: 0.9em; }

#pContent .grid-events .card-grid-hour {
  font-size: 0.78em;
  opacity: 0.85;
}

/* A closed giveaway carries the mark over its picture */
#pContent .grid-promos .promo-flag {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  padding: 0.25em 0.6em;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 4px;
}

/* Event page: the picture sits beside the data and stacks on a phone */
#pContent .event-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding: 0.9em;
  background: color-mix(in srgb, var(--p1, #16181f) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
}

#pContent .event-detail__cover {
  flex: 0 0 auto;
  width: 18em;
  max-width: 100%;
}

#pContent .event-detail__cover img {
  display: block;
  width: 100%;
  max-height: 13em;
  object-fit: cover;
  border-radius: 4px;
}

#pContent .event-detail__info {
  flex: 1 1 16em;
  min-width: 0;
}

#pContent .event-detail__title {
  margin: 0 0 0.6em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--p1, #16181f);
}

#pContent .event-detail__line {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0 0 0.5em;
  font-size: 0.93em;
  line-height: 1.5;
}

#pContent .event-detail__line:last-child { margin-bottom: 0; }

#pContent .event-detail__line .icon {
  flex-shrink: 0;
  color: var(--p3, #05abb7);
}

#pContent .event-detail__line .icon svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}

/* Promotion page */
#pContent .promo-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* A painted bar: p3 behind, p2 on top. It used to take p2 over the p4 card */
#pContent .promo-finished {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.8em;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 4px;
}

#pContent .promo-finished .icon svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}

/* The captcha sets the floor, a wider field would only hurt reading */
#pContent .promo-form { max-width: 34em; }

#pContent .promo-related a { text-decoration: none; }

#pContent .promo-related a:hover .text-overflow-inline { text-decoration: underline; }

#pContent .promo-related .text-overflow-inline {
  margin-top: 0.35em;
  font-size: 0.9em;
  line-height: 1.35;
}

/* On touch the overlay keeps the map from trapping the scroll */
@media (pointer: coarse) {
  #pContent .event-map .block-map-mobile { display: block; }
}

/* videos-albuns */
#pContent .video-thumb,
#pContent .album-thumb { position: relative; aspect-ratio: 16 / 9; }

#pContent .video-thumb img,
#pContent .album-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The play badge sits over the picture and is always white */
#pContent .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  pointer-events: none;
}

#pContent .video-play .icon { display: inline-flex; }

#pContent .video-play .icon svg {
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.1em;
  fill: currentColor;
  stroke: none;
}

/* Related rail shared by the video and the album pages */
#pContent .related-item {
  display: block;
  margin-bottom: 0.9em;
  color: var(--p1, #16181f);
  text-decoration: none;
}

#pContent .related-item__thumb {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 4px;
}

#pContent .related-item__name {
  display: block;
  margin-top: 0.4em;
  font-size: 0.88em;
  line-height: 1.35;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pContent .related-item:hover .related-item__name { text-decoration: underline; }

/* Album gallery: the two synced carousels */
#pContent .album-gallery .splide__slide {
  border-radius: 4px;
  overflow: hidden;
}

#pContent .album-gallery .splide__slide img { border-radius: 4px; }

#pContent .album-thumbs .splide__slide { border-radius: 4px; }

#pContent .album-empty {
  padding: 1.5em 0;
  font-size: 0.95em;
}

/* podcast-top-privacidade */
/* Shared empty notice of the podcast and the chart pages */
#pContent .pod-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  padding: 1.6em 1em;
  font-size: 0.95em;
  text-align: center;
  color: var(--p1, #16181f);
  background: color-mix(in srgb, var(--p1, #16181f) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
}

#pContent .pod-empty .icon svg {
  width: 1.4em;
  height: 1.4em;
  opacity: 0.45;
}

#pContent .pod-empty span { opacity: 0.75; }

/* Podcast listing */
#pContent.podcasts-page .pod-search { position: relative; }

#pContent.podcasts-page .pod-search__input { padding-right: 2.6em; }

#pContent.podcasts-page .pod-search__btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 0.7em;
  color: var(--p1, #16181f);
  background: none;
  border: 0;
  cursor: pointer;
}

#pContent.podcasts-page .pod-search__btn:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

#pContent.podcasts-page .pod-search__btn .icon svg {
  width: 1.05em;
  height: 1.05em;
}

#pContent.podcasts-page .pod-searchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 0.95em;
}

#pContent.podcasts-page .pod-searchbar__clear { text-decoration: underline; }

#pContent.podcasts-page .pod-searchbar__clear .icon svg {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
}

#pContent.podcasts-page .pod-catbar {
  padding: 0.6em 0.9em;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--p1, #16181f) 4%, transparent);
  border-left: 3px solid var(--p3, #05abb7);
  border-radius: 4px;
}

#pContent.podcasts-page .pod-catbar__sep { opacity: 0.4; }

/* Every cover gets the same shape, so the grid never goes ragged */
#pContent.podcasts-page .card-grid-image { aspect-ratio: 16 / 9; }

#pContent.podcasts-page .card-grid-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pContent.podcasts-page .pod-card__date {
  margin-top: 0.5em;
  font-size: 0.8em;
  letter-spacing: 0.02em;
}

#pContent.podcasts-page .pod-card__date .icon svg {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
}

#pContent.podcasts-page .card-grid-name {
  align-self: flex-start;
  font-size: 1em;
  line-height: 1.35;
}

#pContent.podcasts-page .grid-card a { text-decoration: none; }

#pContent.podcasts-page .grid-card a:hover .card-grid-name { text-decoration: underline; }

#pContent.podcasts-page .grid-card a:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

/* Podcast page */
/* The shared episode player paints itself with --color1..3, names this theme
   does not have: here they map to the palette it does have. */
#pContent.podcast-page {
  --color1: var(--p2, #ffffff);
  --color2: var(--p3, #05abb7);
  --color3: var(--p1, #16181f);
}

#pContent.podcast-page a { text-decoration: none; }

#pContent.podcast-page .pod-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2em;
  margin-bottom: 1.5em;
  padding: 1em;
  background: color-mix(in srgb, var(--p1, #16181f) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
}

#pContent.podcast-page .pod-head__cover {
  flex: 0 0 auto;
  width: 17.5em;
  max-width: 100%;
}

#pContent.podcast-page .pod-head__cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

#pContent.podcast-page .pod-head__info {
  flex: 1 1 16em;
  min-width: 0;
  color: var(--p1, #16181f);
}

#pContent.podcast-page .pod-head__title {
  margin: 0 0 0.35em;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--p1, #16181f);
}

#pContent.podcast-page .pod-head__meta {
  font-size: 0.88em;
  margin-bottom: 0.6em;
}

#pContent.podcast-page .pod-head__meta .icon svg {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
}

#pContent.podcast-page .pod-head__sep {
  margin: 0 0.6em;
  opacity: 0.4;
}

#pContent.podcast-page .pod-head__desc {
  font-size: 0.9em;
  line-height: 1.6;
  opacity: 0.85;
}

/* Episode list */
#pContent.podcast-page .acc-item {
  margin-bottom: 0.6em;
  background: color-mix(in srgb, var(--p1, #16181f) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
  overflow: hidden;
  scroll-margin-top: 5em;
}

#pContent.podcast-page .acc-item:hover { border-color: color-mix(in srgb, var(--p1, #16181f) 30%, transparent); }

#pContent.podcast-page .acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  width: 100%;
  padding: 0.9em 1em;
  color: var(--p1, #16181f);
  cursor: pointer;
}

#pContent.podcast-page .acc-header__main {
  display: flex;
  align-items: center;
  gap: 0.8em;
  min-width: 0;
}

/* The play mark is a painted badge: p3 behind, p2 on top */
#pContent.podcast-page .acc-header__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.3em;
  height: 2.3em;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 50%;
}

#pContent.podcast-page .acc-header__mark .icon svg {
  width: 1em;
  height: 1em;
}

#pContent.podcast-page .acc-header__text { min-width: 0; }

#pContent.podcast-page .acc-header__name {
  display: block;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
}

#pContent.podcast-page .acc-header__meta {
  display: block;
  margin-top: 0.15em;
  font-size: 0.78em;
  opacity: 0.6;
}

#pContent.podcast-page .acc-header > .icon {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

#pContent.podcast-page .acc-item.is-open .acc-header > .icon { transform: rotate(180deg); }

#pContent.podcast-page .acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#pContent.podcast-page .acc-body {
  padding: 1em;
  border-top: 1px solid color-mix(in srgb, var(--p1, #16181f) 10%, transparent);
}

/* A painted pill: p3 behind, p2 on top */
#pContent.podcast-page .badge-new {
  display: none;
  margin-left: 0.5em;
  padding: 0.15em 0.6em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 0.2em;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 4px;
}

#pContent.podcast-page .ep-desc {
  margin-top: 1em;
  padding: 0.8em 1em;
  font-size: 0.9em;
  line-height: 1.6;
  background: color-mix(in srgb, var(--p1, #16181f) 5%, transparent);
  border-left: 3px solid var(--p3, #05abb7);
  border-radius: 4px;
}

#pContent.podcast-page .ep-desc strong {
  display: block;
  margin-bottom: 0.25em;
  font-size: 0.75em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Recommended rail */
#pContent.podcast-page .pod-side { position: sticky; top: 1.2em; }

#pContent.podcast-page .pod-rel {
  display: block;
  margin-bottom: 1em;
  color: var(--p1, #16181f);
}

#pContent.podcast-page .pod-rel__image {
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
  overflow: hidden;
}

#pContent.podcast-page .pod-rel__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#pContent.podcast-page .pod-rel__name {
  display: block;
  margin-top: 0.4em;
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.35;
}

#pContent.podcast-page .pod-rel:hover .pod-rel__name { text-decoration: underline; }

#pContent.podcast-page .pod-rel:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

#pContent.podcast-page .pod-rel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  font-size: 0.75em;
  opacity: 0.7;
}

#pContent.podcast-page .pod-rel__meta .icon svg {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
}

/* Loading skeleton shared by the youtube and the audio episodes */
@keyframes pod-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes pod-spin {
  to { transform: rotate(360deg); }
}

#pContent.podcast-page .player-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  background: color-mix(in srgb, var(--p1, #16181f) 6%, transparent);
  border-radius: 4px;
}

#pContent.podcast-page .player-loading-spinner {
  flex-shrink: 0;
  width: 1.8em;
  height: 1.8em;
  border: 2px solid color-mix(in srgb, var(--p1, #16181f) 15%, transparent);
  border-top-color: var(--p3, #05abb7);
  border-radius: 50%;
  animation: pod-spin 0.8s linear infinite;
}

#pContent.podcast-page .player-loading-lines {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4em;
  max-width: 13em;
}

#pContent.podcast-page .player-loading-line {
  height: 0.5em;
  border-radius: 4px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--p1, #16181f) 8%, transparent) 25%,
    color-mix(in srgb, var(--p1, #16181f) 18%, transparent) 50%,
    color-mix(in srgb, var(--p1, #16181f) 8%, transparent) 75%);
  background-size: 400% 100%;
  animation: pod-shimmer 1.4s infinite linear;
}

#pContent.podcast-page .player-loading-line:nth-child(1) { width: 70%; }
#pContent.podcast-page .player-loading-line:nth-child(2) { width: 45%; animation-delay: 0.15s; }

/* The video sits on black, so its skeleton is the light variant */
#pContent.podcast-page .yt-loading-wrap {
  position: relative;
  background: #000000;
  border-radius: 4px;
  overflow: hidden;
}

#pContent.podcast-page .yt-loading-wrap .player-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: none;
  transition: opacity 0.3s ease;
}

#pContent.podcast-page .yt-loading-wrap .player-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

#pContent.podcast-page .yt-loading-wrap .player-loading-spinner {
  border-color: rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.5);
}

#pContent.podcast-page .yt-loading-wrap .player-loading-line {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.06) 75%);
  background-size: 400% 100%;
}

@media (max-width: 48em) {
  #pContent.podcast-page .pod-head { text-align: center; }
  #pContent.podcast-page .pod-head__cover { width: 100%; }
  #pContent.podcast-page .pod-side { position: static; }
}

/* Chart page */
#pContent.top-page .top-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

#pContent.top-page .top-now {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 0.9em;
  color: var(--p1, #16181f);
  background: color-mix(in srgb, var(--p1, #16181f) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--p1, #16181f) 12%, transparent);
  border-radius: 4px;
}

/* A painted badge: p3 behind, p2 on top */
#pContent.top-page .top-now__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.2em;
  height: 2.2em;
  font-size: 1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 50%;
}

#pContent.top-page .top-now__text { min-width: 0; }

#pContent.top-page .top-now__text strong {
  display: block;
  font-size: 0.98em;
  line-height: 1.3;
}

#pContent.top-page .top-now__text span {
  display: block;
  font-size: 0.85em;
  opacity: 0.7;
}

#pContent.top-page .top-item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.4em 0.5em;
  color: var(--p1, #16181f);
  text-decoration: none;
  border-left: 0.2em solid transparent;
  border-radius: 4px;
}

#pContent.top-page .top-item:hover { background: color-mix(in srgb, var(--p1, #16181f) 6%, transparent); }

#pContent.top-page .top-item:focus-visible {
  outline: 2px solid var(--p3, #05abb7);
  outline-offset: 2px;
}

#pContent.top-page .top-item.is-active {
  background: color-mix(in srgb, var(--p3, #05abb7) 12%, transparent);
  border-left-color: var(--p3, #05abb7);
}

#pContent.top-page .top-item__cover {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 3.4em;
  height: 3.4em;
}

#pContent.top-page .top-item__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--p1, #16181f) 15%, transparent);
}

/* The position rides the cover: p3 behind, p2 on top */
#pContent.top-page .top-item__pos {
  position: absolute;
  left: -0.2em;
  bottom: -0.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.35em;
  font-size: 0.8em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--p2, #ffffff);
  background: var(--p3, #05abb7);
  border-radius: 50%;
}

#pContent.top-page .top-item__text {
  min-width: 0;
  flex: 1 1 auto;
}

#pContent.top-page .top-item__name {
  display: block;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pContent.top-page .top-item:hover .top-item__name { text-decoration: underline; }

#pContent.top-page .top-item__artist {
  display: block;
  font-size: 0.85em;
  opacity: 0.7;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pContent.top-page .top-ad {
  width: 100%;
  margin-bottom: 0.8em;
  overflow: auto;
}

#pContent.top-page .top-ad img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Privacy pages: a single column of running text, so reading comes first */
#pContent.policy-page .policy-content {
  max-width: 60em;
  font-size: 0.97em;
  line-height: 1.75;
  color: var(--p1, #16181f);
}

#pContent.policy-page .policy-content h5,
#pContent.policy-page .policy-content h6 {
  margin: 1.6em 0 0.5em;
  font-weight: 700;
  line-height: 1.3;
}

#pContent.policy-page .policy-content h5 { font-size: 1.1em; }
#pContent.policy-page .policy-content h6 { font-size: 0.97em; }

#pContent.policy-page .policy-content p { margin: 0 0 1em; }

#pContent.policy-page .policy-content ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

#pContent.policy-page .policy-content li { margin-bottom: 0.4em; }

#pContent.policy-page .policy-content a {
  color: inherit;
  text-decoration: underline;
}

#pContent.policy-page h3 .icon svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}

/* The table carries three long columns, on a phone it scrolls on its own */
#pContent.policy-page .policy-table {
  margin: 1.2em 0 1.6em;
  overflow-x: auto;
}

#pContent.policy-page .policy-table table {
  min-width: 34em;
  border-collapse: collapse;
}

#pContent.policy-page .policy-table td { vertical-align: top; }

/* Messages page: name, city and time on one line, the text below */
#pContent .recados-item .recados-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 0.25em;
}

#pContent .recados-item .recados-top b { font-size: 0.95em; }

#pContent .recados-item .recados-place,
#pContent .recados-item .recados-date {
  font-size: 0.78em;
  opacity: 0.7;
}

#pContent .recados-item .recados-date {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#pContent .recados-item .recados-corpo {
  font-size: 0.93em;
  line-height: 1.5;
}