/*
 * The trophy artwork frame.
 *
 * The trophy IS the hero (CLAUDE.md), so this frame does as little as it can
 * get away with: it reserves the space, it centres, and it gets out of the way.
 *
 * The plate is --plate-render, the near-black the mocks put behind a rendered
 * troph-e — NOT a --surface-* wash. That is deliberate and it is the one place
 * in this file worth explaining. A wash is translucent and composites over the
 * ambient gradient, which is exactly right for a card and exactly wrong here:
 * the generated image carries its own lighting, and letting the app's olive-gold
 * glow bleed through behind it would tint artwork the club paid for. Content
 * sits ON the plate; chrome sits IN the gradient (D32).
 *
 * No box-shadow, here or anywhere. Depth is the border and the plate.
 */

/* `display: block` is load-bearing since this became a <turbo-frame>. A custom
   element has no default display, so it lays out INLINE — which silently
   ignored max-width, ignored the centring margin, and left the frame sized by
   its content instead of its container. It looked like the stylesheet had not
   loaded. */
.trophy-artwork {
  display: block;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--plate-render);
  overflow: hidden;
}

/* The player shell uses the smaller radius throughout (D16, D31). Carried in
   CSS off the shell class already on <body>, never branched on in Ruby. */
.shell--player .trophy-artwork {
  border-radius: var(--radius-md);
}

/* On the ADMIN surface the frame is capped and centred. The pending state is
   `aspect-ratio: 1`, which is right on the 353px player column and absurd on
   the 920px admin one — it made an 878px black square that filled the screen
   and pushed everything the admin needs below the fold. The cap keeps the
   square, so the reveal still lands without a reflow. Carried in CSS off the
   shell class, never branched on in Ruby (D31). */
.shell--admin .trophy-artwork {
  max-width: var(--artwork-max-width);
  margin-inline: auto;
}

.trophy-artwork__image {
  display: block;
  width: 100%;
  height: auto;
}

/* The click-through to the full-size file (D184), on the admin's screens.
   The frame clips (`overflow: hidden`), so the focus ring is drawn inside the
   edge rather than outside it, where it would be cut off. */
.trophy-artwork__full-size {
  display: block;
  cursor: zoom-in;
}

.trophy-artwork__full-size:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: calc(var(--focus-ring-offset) * -2);
}

/* Every non-generated state. Given the same square footprint as a finished
   render so the layout does not jump when the image arrives — the reveal is
   the moment this product is selling, and it should not land with a reflow. */
.trophy-artwork__pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  aspect-ratio: 1;
  text-align: center;
  /* THE SQUARE IS THE PROMISE, so the content is clipped to it rather than
     allowed to stretch it. The engraving (D104) put four blocks of text in here
     and a long message pushed the box taller — measured at 282, 288 and 308px
     across one three-recipient batch, three plates of three different heights
     in a row, each collapsing back to 282 as its picture arrived. That is the
     reflow the comment above exists to forbid, reintroduced by the thing it was
     protecting. `min-height: 0` lets the message be the part that gives. */
  overflow: hidden;
}

.trophy-artwork__pending > * { min-height: 0; }

.trophy-artwork__note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

/* The engraving, shown on the plate while the picture is being drawn (D104).
   It stands in for the artwork for about half a minute, so it is laid out like
   a plate — centred, the recipient largest — rather than like a caption. */
.trophy-artwork__engraving {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--engraving-max-width);
}

/* The award above the name, quieter and lettered wide — the way an engraver
   sets the occasion above the person. */
.trophy-artwork__engraving-award {
  color: var(--text-gold);
  font-size: var(--type-caption-size);
  letter-spacing: 0.08em;   /* the eyebrow tracking already used across the app */
  text-transform: uppercase;
}

/* The recipient is the largest thing on the plate. Everything else on this
   surface is a step below it, which is the one place the player shell's rule
   about the player's own name reads correctly on the admin side too. */
.trophy-artwork__engraving-recipient {
  color: var(--text-primary);
  font-size: var(--type-h2-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-h2-leading);
}

/* The message as the club wrote it, in quotation marks and italic, so a line
   that happens to read like a label still reads as somebody's words. */
/* Clamped, because this is a PREVIEW of the plate and not the record of it —
   the full message is in "What was sent" directly below, and on a 282px batch
   track a 120-character message (MESSAGE_LIMIT, D3) runs to four lines and
   overflows the square. Three lines is what fits at the narrowest track the
   grid produces. */
.trophy-artwork__engraving-message {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-style: italic;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.trophy-artwork__engraving-detail {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

/* --- The review studio (D151, D163) --------------------------------------
 * The club admin's troph-e page: the picture as the hero on the left, the
 * decision on the right. Layout only; every value is a token. */

.review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--review-side-width);
  gap: var(--space-6);
  align-items: start;
}

.review__main,
.review__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Here the picture IS the page, so it takes its column rather than the
   420px cap every other admin render keeps. Still a square, so it lands with
   no reflow when the version arrives. */
.review__stage {
  position: relative;
}

.shell--admin .review__stage .trophy-artwork {
  max-width: none;
}

/* "Preview", laid OVER the draft rather than baked into it, so the version
   that is accepted is the clean picture the player sees. A scrim and a blur,
   never a shadow. */
.review__preview-mark {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border-raised);
  border-radius: var(--radius-pill);
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur));
  color: var(--text-primary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;   /* the eyebrow tracking already used across the app */
  text-transform: uppercase;
  pointer-events: none;
}

.review__stalled { aspect-ratio: 1; }


/* The strip sits under its "Versions" heading (Ui::SectionHeadingComponent,
   D170) with the gap the eyebrow it replaced kept. */
.review__versions .ui-section-heading { margin-bottom: var(--space-3); }

.review__version-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.review__version-form { display: contents; }

/* A version is its own picture, small, with its number beneath. Selected takes
   the gold border — the one selection language (§2.3). */
.review__version {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--easing-standard),
              border-color var(--duration-base) var(--easing-standard);
}

.review__version:hover:not(:disabled) { background: var(--surface-3); }

.review__version:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

.review__version.is-selected {
  border-color: var(--gold-100);
  color: var(--text-gold);
  cursor: default;
}

/* Disabled while a version is drawn — the only state that changes opacity
   (D28). */
.review__version:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.review__version-image {
  display: block;
  width: var(--review-thumb-size);
  height: var(--review-thumb-size);
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--plate-render);
}

.review__version-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
}

/* A version the check flagged: a gold dot, the warning colour (D27). */
.review__version-flag {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--gold-100);
}

.review__note,
.review__hint {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.review__note { margin-top: var(--space-3); }

.review__lede {
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  margin-top: var(--space-3);
}

.review__quote {
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-3);
}

.review__hint a { color: var(--text-gold); }

/* The decision, stacked: each action with the line that explains it. */
.review__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review__actions .review__hint { margin-bottom: var(--space-2); text-align: center; }

.review__actions form:not(.review__edit-form) { display: block; }

/* Edit details: a native <details> whose summary looks like the text button
   it is. */
.review__edit > summary { list-style: none; }
.review__edit > summary::-webkit-details-marker { display: none; }

.review__edit[open] > summary { color: var(--text-primary); }

.review__edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--divider);
}

.review__error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--danger-text);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

/* --- The check's advice ---------------------------------------------- */

.review-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.review-check__lede,
.review-check__notes {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* Tailwind's preflight strips list markers from every list; these are
   separate findings, so they keep a bullet. */
.review-check__problems {
  list-style: disc;
  padding-left: var(--space-5);
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.review-check__read {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.review-check__label {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  margin-bottom: var(--space-1);
}

.review-check__read-text {
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  overflow-wrap: anywhere;
}

.review-check__advisory {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

/* --- Drawing: the prototype's five timed stages ------------------------- */

.draw-progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  aspect-ratio: 1;
  padding: var(--space-8);
}

.draw-progress__title {
  color: var(--text-primary);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.draw-progress__stages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.draw-progress__stage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  transition: color var(--duration-base) var(--easing-standard);
}

.draw-progress__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--stepper-circle);
  height: var(--stepper-circle);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  transition: background-color var(--duration-base) var(--easing-standard),
              border-color var(--duration-base) var(--easing-standard),
              color var(--duration-base) var(--easing-standard);
}

.draw-progress__stage--done { color: var(--text-secondary); }
.draw-progress__stage--done .draw-progress__marker { border-color: var(--gold-rest); color: var(--text-gold); }

.draw-progress__stage--current { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.draw-progress__stage--current .draw-progress__marker {
  border-color: var(--gold-100);
  background: var(--gradient-gold);
  color: var(--text-on-gold);
}

.draw-progress__note {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

/* No designed layout exists below the drawn 960 (§10): the decision column
   stacks under the picture, which is the smallest honest thing. */
@media (max-width: 767px) {
  .review { grid-template-columns: minmax(0, 1fr); }
  .draw-progress { padding: var(--space-5); }
}

.review__actions .review__edit-form .review__hint { margin-bottom: 0; text-align: left; }

/* --- Troph-e sent! (§7, D151) --------------------------------------------
   Where accepting lands. The picture and its plate in one card, the actions
   under it. Restrained: the picture is the celebration. */
.sent {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sent__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* THE PICTURE IS THE HERO HERE (D184). It takes the card's whole width — the
   640 column less the card's padding, 600px on a laptop — instead of the 420
   cap other admin renders keep, and shrinks with the column below that. */
.shell--admin .sent__card .trophy-artwork {
  max-width: none;
  margin-inline: 0;
}

/* The plate under the picture, set like the engraving (D104): the award
   lettered wide above, the recipient largest. Left-aligned, because the page
   keeps one left edge (D170). */
.sent__plate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.sent__plate .ui-status { margin-bottom: var(--space-2); }

.sent__award {
  color: var(--text-gold);
  font-size: var(--type-caption-size);
  letter-spacing: 0.08em;   /* the eyebrow tracking already used across the app */
  text-transform: uppercase;
}

.sent__name {
  color: var(--text-primary);
  font-size: var(--type-h2-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-h2-leading);
}

.sent__team {
  color: var(--text-tertiary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* "Send to <name>" (D216): the claim link and the ways to send it. The link
   wraps anywhere, because a signed token is one long word. */
.trophy-send {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.trophy-send__url {
  color: var(--text-gold);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  overflow-wrap: anywhere;
}

.trophy-send__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.trophy-send__actions [hidden] { display: none; }