/* ==========================================================================
   Perfils · result.css (15/10/2026)
   --------------------------------------------------------------------------
   The round result card and its companions (SPEC-RESULTADO.md):
   - the answer, who got it and "Próxima carta" are always on screen: the button bar is pinned to the bottom of the
     card, on every screen size, and the card itself scrolls under it
   - "Ver todas as dicas" (open on wide screens, closed on phones) with the opened clues marked and who opened them
   - "Trocar quem acertou": the button on the card and the current scorer marked in the picker (award.css)
   - the two optional chips on a skipped card
   - the box that shows the play log as text when the browser does not download it
   Loads after screens.css, game.css, award.css and modes.css (it overrides a few of their rules).
   Built only on theme.css tokens. Only transform/opacity are animated.
   ========================================================================== */

/* ============================ the card: grid, pinned bar ================== */
/* the ranking is a grid child of its own so that on a phone the clue list sits between the answer and the ranking */
.rd-grid {
  grid-template-areas: 'main clues' 'rank clues';
  grid-template-rows: auto 1fr;
  row-gap: var(--sp-4);
}
.rd-main { grid-area: main; }
.rd-grid > .rd-rank { grid-area: rank; margin-top: 0; }
.rd-grid > .rd-clues { grid-area: clues; }

.rd-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: var(--sp-4) calc(var(--rd-pad) * -1) 0;
  padding: var(--sp-3) var(--rd-pad);
  background: var(--p-paper);
  border-top: 2px solid var(--p-teal-deep);
  box-shadow: 0 -4px 0 -3px var(--p-paper);
}
.p-modal--card .rd-actions { margin-block: var(--sp-4) 0; }
.rd-nextturn { margin-right: auto; }

/* ============================ who got it + the swap button ================ */
.rd-swap { margin-top: 0.7rem; }
.rd-who { align-items: flex-start; }
.rd-who__text { display: block; }

/* ============================ optional chips on a skipped card ============ */
.rd-why { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-top: 0.7rem; }
.rd-why__label { flex: 1 1 100%; font-size: var(--fs-xs); line-height: 1.3; color: var(--p-muted); }
.rd-chip {
  min-height: 2.75rem;                    /* still a 44 px target, but light: no weight, small lettering */
  padding: 0 0.8em;
  font-size: var(--fs-xs);
  font-weight: 600;
  box-shadow: none;
  background: transparent;
  border-width: 1px;
  border-color: var(--p-teal-ink);
  color: var(--p-teal-ink);
}
.rd-chip:hover:not([aria-pressed='true']) { box-shadow: none; transform: none; background: var(--p-paper-2); }
.rd-chip[aria-pressed='true'] { color: var(--p-black); border-width: 2px; border-color: var(--p-black); }

/* ============================ the 20 clues: who opened them =============== */
.rd-lines { contain: paint; }            /* WebKit counts the clipped lines of this scroller in the dialog's own scroll height */
.rd-lines li { grid-template-columns: 1.7rem minmax(0, 1fr) auto; }
.rd-lines__tag { max-width: 7.5rem; }
.rd-lines__who {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.rd-clues summary:hover .rd-clues__title { text-decoration: underline; text-underline-offset: 0.25em; }

/* ============================ picker: "Trocar quem acertou" =============== */
.dlg-award[data-mode='swap'] .aw-opt.is-current {
  background: linear-gradient(180deg, var(--p-paper-hi) 0%, var(--p-mist-hi, var(--p-paper)) 55%, var(--p-mist, var(--p-paper-lo)) 100%);
  box-shadow: inset 0 0 0 2px var(--p-paper), inset 0 0 0 4px var(--p-teal-deep), 0 3px 0 var(--p-black);
}
.dlg-award[data-mode='swap'] .aw-opt.is-current::after {   /* a check in the corner: the state is never only a colour */
  content: '';
  position: absolute;
  top: 0.4rem;
  left: 0.45rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--p-teal-ink);
  -webkit-mask: var(--ic-check) center / contain no-repeat;
  mask: var(--ic-check) center / contain no-repeat;
}
.aw-opt__now { color: var(--p-teal-ink); font-weight: 700; }
@media (hover: hover) {
  .dlg-award[data-mode='swap'] .aw-opt.is-current:hover .aw-opt__now { color: var(--p-black); }
}

/* ============================ the log as text ============================= */
.export-text {
  box-sizing: border-box;
  width: 100%;
  min-height: 11rem;
  margin: var(--sp-3) 0 0;
  padding: 0.6rem 0.75rem;
  resize: vertical;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--p-ink);
  background: var(--p-paper-hi);
  border: 2px solid var(--p-black);
  border-radius: var(--r-2);
}
.export-text:focus-visible { outline: 3px solid var(--p-focus); outline-offset: 2px; }

/* ============================ one column (below 900 px) =================== */
@media (max-width: 899px) {
  .rd-grid { grid-template-areas: 'main' 'clues' 'rank'; grid-template-rows: none; row-gap: var(--sp-3); }
  .rd-clues { border-bottom: 1px solid rgb(13 150 141 / 0.45); }
  .rd-clues[open] { border-bottom: 0; }
}

/* ============================ phones ===================================== */
@media (max-width: 599px) {
  .rd { --rd-pad: 1rem; padding-top: calc(var(--card-band) + 0.55rem); }
  /* row 1: the logotype and the round; row 2: the type plaque and the front */
  .rd-head { gap: 0.3rem 0.8rem; padding-bottom: var(--sp-2); }
  .rd-head .rd-no { order: 2; margin-left: auto; }
  .rd-head__meta { order: 3; flex: 1 1 100%; justify-content: flex-start; margin-left: 0; gap: 0.2rem 0.8rem; }
  .rd-grid { padding-top: var(--sp-3); }
  .rd-clues__title { font-size: var(--fs-xs); letter-spacing: 0.1em; }
  .rd-clues__count { white-space: nowrap; }
  .rd-swap { max-width: 100%; letter-spacing: 0.06em; }
  .rd-who { gap: 0.7rem; }
  .rd-title { font-size: 2rem; }
  .rd-sub { margin-top: 0.2rem; }
  .rd-swap { margin-top: 0.5rem; }
  /* the stamp sits beside the answer instead of under it: the answer and who got it stay above the fold */
  .rd-answer-wrap { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3) 0; }
  .rd-kicker { margin-bottom: 0.25rem; }
  .rd-answer { font-size: clamp(1.35rem, 6.4vw, 1.7rem); }
  .rd-answer-wrap .rd-stamp { width: 4.6rem; height: 4.2rem; padding-top: 0.45rem; }
  .rd-answer-wrap .rd-stamp b { font-size: 1.5rem; }
  .rd-rank__row { min-height: 2.3rem; }
  .rd-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; margin-top: var(--sp-3); padding-block: 0.6rem; }
  .rd-nextturn { margin: 0; font-size: var(--fs-xs); text-align: center; }
  .rd-actions .p-btn { width: 100%; }
}

@media (max-width: 380px) {
  .plaques--goal .pq__big { font-size: 2rem; }   /* three digits (300) in a plaque a third of 320 px wide */
  .dlg-award .aw-title { font-size: 1.85rem; }   /* "Trocar quem acertou" would take three lines */
  .rd-head .p-plaque { padding: 0.35em 0.7em; letter-spacing: 0.1em; }
  .rd-front { gap: 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; }
  .rd-clues__title { font-size: 0.78rem; letter-spacing: 0.06em; }
  .rd-clues__count { font-size: var(--fs-2xs); }
}

/* short screens (a phone on its side, a small laptop): the card keeps the answer and the button first */
@media (max-height: 560px) {
  .rd-head { display: none; }
  .rd { padding-top: calc(var(--card-band) + 0.4rem); }
  .rd-grid { border-top: 0; padding-top: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-chip { transition: none; }
}