/*
 * The share card — Claude Design "Flavour Cup Share Card", panels 2A and 2D.
 *
 * Fixed geometry, not a responsive screen: 1080×1350 for the postable frame
 * and 1200×630 for the link-preview crop, both drawn at exactly those sizes
 * and scaled from outside by a transform. Nothing here reflows, because the
 * whole point of the layout is that the coverage numeral and the CTA sit in
 * the same place on every card. Long strings step the font size down instead
 * (see ShareCard#verdict_size / #pick_size / #band_size), which is why those
 * few sizes arrive as inline style attributes.
 *
 * Colours come from the app's tokens rather than the design file's literals.
 * The two that differ are role-identical: the design draws its keyline in
 * #10130F where ours is --ink #17130F, and its kicker-on-rust in #F7D9A8 where
 * ours is --on-caramel-body. Adding a second near-black and a second warm tint
 * would be new tokens for no visible gain.
 */

/* The card is always drawn at its true pixel size — 1080×1350, or 1200×630 for
 * the crop — and never scaled by CSS. Two reasons. A screenshot should be the
 * full-resolution artefact, not a downsampled one; and the fitting is already
 * solved, by the layout declaring `width=<card width>` in its viewport meta, so
 * a phone renders the whole card to the screen edge by itself. On a desktop it
 * sits at true size and the page scrolls, which is what you want when the point
 * is to capture it. */
.sc-stage {
  margin: 0;
  background: var(--canvas);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
}

.sc {
  box-sizing: border-box;
  width: 1080px;
  height: 1350px;
  padding: 60px 68px 56px;
  background: var(--green);
  font-family: "Work Sans", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Header ------------------------------------------------------------------ */

.sc__head { display: flex; align-items: center; gap: 14px; }

.sc__mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 5px solid var(--ink);
  overflow: hidden;
  display: flex;
}
.sc__mark span { flex: 1; }
.sc__mark span:first-child { background: var(--amber); border-right: 4px solid var(--ink); }
.sc__mark span:last-child { background: var(--caramel); }

.sc__wordmark {
  font: 800 30px/1 "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.03em;
  color: var(--oat);
}

.sc__identity {
  margin-left: auto;
  font: 700 20px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--on-green-mono);
  white-space: nowrap;
}

/* Coverage ---------------------------------------------------------------- */

.sc__coverage { display: flex; flex-direction: column; gap: 18px; }

.sc__kicker {
  font: 700 22px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.2em;
}
.sc__kicker--amber { color: var(--amber); }
.sc__kicker--meta { color: var(--on-green-mono); }

.sc__fraction { display: flex; align-items: baseline; }

.sc__numerator,
.sc__denominator {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.05em;
}
.sc__numerator {
  font-size: 300px;
  color: var(--amber);
  text-shadow: 12px 12px 0 var(--ink);
}
.sc__denominator {
  font-size: 152px;
  color: var(--oat);
  text-shadow: 8px 8px 0 var(--ink);
}

/* Over ~15 candidates the fraction stops reading as a score, so the numerator
   stands alone and the field size is demoted to a chip. */
.sc__alt { display: flex; align-items: flex-end; gap: 26px; }
.sc__alt .sc__numerator { line-height: 0.74; }
.sc__alt-label {
  font: 700 30px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  color: var(--oat);
  background: var(--caramel);
  border: 4px solid var(--ink);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 5px 5px 0 var(--ink);
  margin-bottom: 26px;
}

/* Thick and countable, so they stay discrete blocks at chat-thumbnail scale
   instead of collapsing into a dashed rule. */
.sc__pips { display: flex; gap: 8px; height: 26px; }
.sc__pip {
  flex: 1;
  box-sizing: border-box;
  border: 5px solid var(--ink);
  border-radius: 5px;
  background: rgba(247, 240, 225, 0.14);
}
.sc__pip--on { background: var(--amber); }

/* My call ----------------------------------------------------------------- */

/* Fixed height: the verdict may be one line or two, and the band below it must
   not move either way. */
.sc__call { display: flex; flex-direction: column; gap: 14px; height: 260px; }

.sc__verdict {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--oat);
  text-shadow: 7px 7px 0 var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* The band ---------------------------------------------------------------- */

.sc__band {
  box-sizing: border-box;
  min-height: 236px;
  background: var(--caramel);
  border: 5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 10px 10px 0 var(--ink);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.sc__fixture { display: flex; align-items: center; gap: 20px; }
.sc__side { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sc__side--mine { align-items: flex-end; }

.sc__side-label {
  font: 700 18px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  color: var(--on-caramel-body);
}

.sc__pick {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.sc__pick--crowd {
  color: var(--oat);
  text-decoration: line-through;
  text-decoration-thickness: 6px;
}
.sc__pick--mine { color: var(--amber); }

.sc__vs {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--amber);
  border: 5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 25px/1 "Bricolage Grotesque", sans-serif;
  color: var(--ink);
}

.sc__rule { height: 4px; background: var(--ink); opacity: 0.35; }

.sc__chiprow { display: flex; align-items: center; gap: 18px; }
.sc__chip {
  font: 700 30px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--amber);
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 14px 22px;
  white-space: nowrap;
}
.sc__chip-tail { font: 600 30px/1.1 "Work Sans", sans-serif; color: var(--on-caramel-body); }

.sc__lines { display: flex; flex-direction: column; gap: 10px; }
.sc__band-kicker {
  font: 700 20px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  color: var(--on-caramel-body);
}
.sc__band-line {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--oat);
}

/* Call to action ---------------------------------------------------------- */

.sc__cta { display: flex; align-items: center; gap: 22px; }

.sc__taps {
  background: var(--amber);
  border: 5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 18px 34px;
  font: 800 42px/1 "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}

.sc__domain {
  font: 700 26px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  color: var(--oat);
}

/* OG crop — panel 2D ------------------------------------------------------ *
 * Same content on its side. Everything is smaller and the coverage block
 * becomes a fixed left column, so the shared rules above don't apply. */

.sc-og {
  box-sizing: border-box;
  width: 1200px;
  height: 630px;
  padding: 48px 56px;
  background: var(--green);
  font-family: "Work Sans", system-ui, sans-serif;
  display: flex;
  gap: 52px;
  overflow: hidden;
}

.sc-og__left {
  flex: none;
  width: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.sc-og__kicker {
  font: 700 17px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.2em;
  color: var(--amber);
}
.sc-og__numerator,
.sc-og__denominator {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.05em;
}
.sc-og__numerator { font-size: 210px; color: var(--amber); text-shadow: 9px 9px 0 var(--ink); }
.sc-og__denominator { font-size: 108px; color: var(--oat); text-shadow: 6px 6px 0 var(--ink); }

.sc-og__pips { display: flex; gap: 6px; height: 20px; }
.sc-og__pips .sc__pip { border-width: 4px; border-radius: 4px; }

.sc-og__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.sc-og__head { display: flex; align-items: center; gap: 12px; }
.sc-og__head .sc__mark { width: 32px; height: 32px; border-width: 4px; }
.sc-og__head .sc__mark span:first-child { border-right-width: 3px; }
.sc-og__wordmark {
  font: 800 24px/1 "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.03em;
  color: var(--oat);
}
.sc-og__identity {
  margin-left: auto;
  font: 700 15px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--on-green-mono);
  white-space: nowrap;
}

.sc-og__call { display: flex; flex-direction: column; gap: 8px; }
.sc-og__call-kicker {
  font: 700 15px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.2em;
  color: var(--on-green-mono);
}
.sc-og__verdict {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 62px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--oat);
  text-shadow: 5px 5px 0 var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.sc-og__band {
  box-sizing: border-box;
  background: var(--caramel);
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 7px 7px 0 var(--ink);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.sc-og__band .sc__side-label { font-size: 13px; }
.sc-og__band .sc__pick { font-size: 27px; }
.sc-og__band .sc__pick--crowd { text-decoration-thickness: 4px; }
.sc-og__band .sc__vs { width: 42px; height: 42px; border-width: 4px; font-size: 17px; }
.sc-og__band .sc__band-kicker { font-size: 13px; letter-spacing: 0.16em; }
.sc-og__band .sc__band-line { font-size: 27px; }
.sc-og__band .sc__chip { font-size: 18px; border-width: 3px; padding: 9px 14px; }
.sc-og__band .sc__chip-tail { font-size: 18px; }

.sc-og__cta { display: flex; align-items: center; gap: 18px; }
.sc-og__taps {
  background: var(--amber);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 13px 26px;
  font: 800 30px/1 "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.sc-og__domain {
  font: 700 19px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  color: var(--oat);
}
.sc-og__dare {
  margin-left: auto;
  font: 700 22px/1.1 "Bricolage Grotesque", sans-serif;
  color: var(--on-caramel-body);
}