/* THE RIP CARD ON THE PROFILE (site/ripcard.js, HANDOFF-185 §3a).

   Two placements, one canvas. On the plate it is a picture of a card at 262px
   — the body copy is 21px on a 1060px render, so 262px is 5px and nothing on
   it can be read; it is a button, and the reading happens in the view. In the
   view it is 600px, which puts that same copy at 11.9px.

   NO BOX AROUND IT. The card is a printed frame with its own border, its own
   corner radius and transparent corners outside them, so the sheet's white
   tile treatment would be a second border around a border. It lies on the
   plate instead, the way a card lies on a table. Everything else wears the
   sheet's own skin (profile.css): key outline, hard drop, Barlow Condensed
   italic, the pink accent. */

.pf-rip{margin:14px 0 0}
.pf-rip[hidden]{display:none}

/* ---- on the plate ------------------------------------------------------ */
.rip-plate{display:block;position:relative;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rip-plate__c{display:block;width:100%;aspect-ratio:1060/1484}
.rip-cv{display:block;width:100%;height:auto}
/* the label and the View button sit ABOVE the card, never on it: every corner
   of the frame is printed content (the stage box, the HP box, the footer's
   logo and illustrator credit), so chrome laid over it covers something. The
   card itself stays clickable — the keyboard and screen-reader path is the
   real button in the header, so the picture is aria-hidden rather than a
   second announcement of the same destination. */
.rip-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.rip-h__k{font:800 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#3A4354}
.rip-plate:active{transform:translateY(2px)}

/* no card yet — your own profile only (someone else's block is not drawn) */
.rip-none{background:rgba(111,181,242,.22);border:2px solid var(--key);border-radius:12px;padding:12px 10px;text-align:center}
.rip-none__p{margin:0 0 9px;font:800 13px var(--ui);color:var(--key)}
.rip-none__b{width:100%;flex:none}

/* ---- the view --------------------------------------------------------- */
/* ── IT FITS THE WINDOW, AND IT IS THE SIZE HE SIGNED OFF ────────────────────
   Luke, 16 Sep: "when ye click the view my rip card... its way to big... no
   reason this page should be scrollable", pointing at /generator's finished
   card and saying "this should be the default size of the slab/card".

   MEASURED at 1512x982 before: the card was a flat 600 wide, so 840 tall at
   1060/1484, in a body with 770 — it overflowed by 70 and the page scrolled.
   The width was never the problem to solve for; the HEIGHT is, because the card
   is portrait and the window is not.

   So the height leads and the width follows, capped at what the generator's card
   page lands on at that window. That figure came down from 690 to 624 when the
   card page was matched to the size the CEREMONY ends on (generator.css, "the
   card is the size the reveal ends on"), and this follows it: a card that is
   bigger here than on the page it was opened on reads as a third size, which is
   the problem all of this is closing. 624 tall is 446 wide, and the card's 21px
   body copy lands at 8.8px — still readable, and the reason a thumbnail on the
   profile plate is not enough on its own.

   The canvas is sized by CSS's replaced-element rule — width:auto + height:auto
   + both max constraints scales its 1060x1484 down inside the cap, keeping the
   ratio exactly, with no letterbox and no squash. */
.rip-big{display:grid;grid-template-columns:auto minmax(0,380px);gap:26px;
  align-items:start;justify-content:start}
.rip-big__c{min-width:0}
/* 212px is this page's own chrome, measured at 1512x982: .rip-big's top is 168
   (the frame's --pg-pad plus the view's head) and the body keeps 44 below. */
.rip-big .rip-cv{width:auto;height:auto;max-width:100%;
  max-height:min(calc(100vh - 212px),624px);margin:0 auto}
/* THE FACTS WEAR THE SHEET'S TILE. Without it they sit straight on the page's
   illustrated backdrop — readable enough on the desktop's plain band, and on a
   phone the caption under POWER all but disappears into the artwork. Every
   other block on this sheet is a white tile with the key outline and the hard
   drop (profile.css); this one had been left bare. */
.rip-facts{min-width:0;background:#fff;border:3px solid var(--key);border-radius:18px;box-shadow:0 5px 0 var(--key);padding:16px 16px 18px}
.rip-facts__n{margin:0;font:900 26px/1.1 var(--display);font-style:italic;text-transform:uppercase;color:var(--key)}
.rip-facts__d{margin:4px 0 16px;font:700 13px var(--ui);color:#3A4354}
.rip-facts__b{width:100%;flex:none;margin:18px 0 0}

.rip-bar{display:grid;grid-template-columns:74px minmax(0,1fr) 34px;gap:4px 10px;align-items:center;margin:0 0 12px}
.rip-bar__k{font:800 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#3A4354}
.rip-bar__t{height:14px;background:#EEF3FA;border:2px solid var(--key);border-radius:8px;overflow:hidden}
.rip-bar__t i{display:block;height:100%;background:linear-gradient(180deg,var(--acc-hi),var(--acc) 48%,var(--acc-lo))}
.rip-bar__v{font:900 17px var(--display);font-style:italic;color:var(--key);text-align:right}
/* the caption runs the full row under the bar, indented to the track */
.rip-bar__c{grid-column:2 / -1;font:600 12px/1.35 var(--ui);color:#3A4354}

@media (max-width:1023px){
  .rip-big{grid-template-columns:minmax(0,1fr);gap:18px}
  /* stacked, the facts are UNDER the card rather than beside it, so the card
     cannot have the window's height the way it does on the desktop — it is
     width-driven here and the page may scroll */
  .rip-big__c{max-width:520px;margin:0 auto}
  .rip-big .rip-cv{width:100%;max-height:none}
  .rip-facts__n{font-size:24px}
}