/* ==========================================================================
   The Next Coin Club — Shareable moments
   Components built to be screenshotted, cropped, and posted without context.

   Load AFTER app.css / components.css. Uses only tokens defined in app.css:
   --serif --sans --bg --surface --raised --sunk --text --dim --mute
   --hair --hair2 --btn-bg --btn-fg --sh-sm --sh-md --sh-lg --edge --spot
   --ok --ok-bg --ok-bd --r-sm --r-md --r-lg --r-pill --ease --spring
   --t-fast --t-base --t-slow

   The one thing declared locally is a monospace stack. app.css has no mono
   token because nothing else on the platform needs one — the receipt does.
   ========================================================================== */

.shareable,.quote-card,.milestone,.stat-card,.receipt,.share-row{
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

/* --------------------------------------------------------------------------
   1. .shareable — capture wrapper
   --------------------------------------------------------------------------
   Wraps any of the cards below. In normal use it is invisible furniture.
   The domain lockup appears ONLY at the moment of capture, so the live UI
   stays clean but the artefact that leaves the product is always attributed.

   Three ways it turns on, all handled here:
     .shareable.is-capturing   — set by JS immediately before html2canvas
     .shareable[data-capture]  — set declaratively for a static export view
     @media print              — covers cmd-P to PDF and print-to-image
   A real screenshot (cmd-shift-4, phone buttons) cannot be detected by CSS.
   For those, ship the visible variant: .shareable.is-marked.
   -------------------------------------------------------------------------- */
.shareable{position:relative;isolation:isolate}

.shareable .share-mark{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 22px 15px;
  border-top:1px solid var(--hair);
  background:var(--surface);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.shareable .share-mark img{height:15px;width:auto}
.shareable .share-mark .dom{
  font-size:11.5px;font-weight:600;color:var(--text);letter-spacing:-.002em;
}
.shareable .share-mark .ctx{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}

.shareable.is-capturing .share-mark,
.shareable[data-capture] .share-mark,
.shareable.is-marked .share-mark{opacity:1;visibility:visible}

/* When the mark is showing, the card needs room for it. */
.shareable.is-capturing > .quote-card,
.shareable.is-capturing > .milestone,
.shareable.is-capturing > .stat-card,
.shareable.is-capturing > .receipt,
.shareable[data-capture] > .quote-card,
.shareable[data-capture] > .milestone,
.shareable[data-capture] > .stat-card,
.shareable[data-capture] > .receipt,
.shareable.is-marked > .quote-card,
.shareable.is-marked > .milestone,
.shareable.is-marked > .stat-card,
.shareable.is-marked > .receipt{padding-bottom:78px}

/* Capture state also freezes hover affordances and hides anything
   that should not appear in a still image. */
.shareable.is-capturing .share-row,
.shareable[data-capture] .share-row{display:none}
.shareable.is-capturing *,
.shareable[data-capture] *{animation:none!important;transition:none!important}

@media print{
  .shareable .share-mark{opacity:1;visibility:visible}
  .shareable .share-row{display:none}
}

/* --------------------------------------------------------------------------
   2. .quote-card — pull quote
   --------------------------------------------------------------------------
   Founder lines, lesson insights, standards restated. Serif italic, generous
   measure, oversized ghosted quotation mark. Reads as an editorial artefact
   rather than a social graphic, which is the entire point.
   -------------------------------------------------------------------------- */
.quote-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--raised);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  padding:clamp(30px,4.4vw,46px);
}
.quote-card::before{ /* edge-light, matches .surf in app.css */
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;opacity:.55;z-index:1;
}
.quote-card::after{ /* ghosted quotation mark */
  content:'\201C';position:absolute;top:-.18em;right:.06em;z-index:0;
  font-family:var(--serif);font-size:clamp(150px,20vw,230px);line-height:1;
  color:var(--text);opacity:.05;pointer-events:none;user-select:none;
}
.quote-card > *{position:relative;z-index:2}

.quote-card .kicker{margin-bottom:20px}

.quote-card blockquote{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(21px,2.9vw,31px);line-height:1.32;letter-spacing:-.014em;
  color:var(--text);max-width:26em;text-wrap:pretty;
}
.quote-card blockquote p + p{margin-top:.7em}

.quote-card cite{
  display:flex;align-items:center;gap:13px;margin-top:clamp(24px,3vw,32px);
  padding-top:clamp(20px,2.6vw,26px);border-top:1px solid var(--hair);
  font-style:normal;
}
.quote-card cite img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center 18%;
  border:1px solid var(--hair2);filter:grayscale(100%);flex:none;
}
.quote-card cite .n{font-size:14.5px;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.quote-card cite .r{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  margin-top:3px;font-weight:500;
}

/* Quiet variant — for a quote sitting inside a lesson, where a boxed card
   would interrupt the reading rhythm. */
.quote-card.plain{
  background:transparent;border:0;box-shadow:none;
  border-left:2px solid var(--hair2);border-radius:0;
  padding:4px 0 4px clamp(20px,3vw,30px);
}
.quote-card.plain::before,.quote-card.plain::after{display:none}

/* --------------------------------------------------------------------------
   3. .milestone — an achievement, stated plainly
   --------------------------------------------------------------------------
   Lesson complete, path finished, member number, badge earned. No confetti,
   no trophy. A mark, a fact, and a date — the visual grammar of a certificate,
   which is what makes it worth posting.
   -------------------------------------------------------------------------- */
.milestone{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:var(--raised);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  padding:clamp(32px,4.4vw,44px) clamp(26px,4vw,40px);
}
.milestone::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;opacity:.55;z-index:1;
}
.milestone > *{position:relative;z-index:2}

.milestone .seal{
  width:62px;height:62px;margin:0 auto 22px;border-radius:50%;
  border:1px solid var(--hair2);background:var(--sunk);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:23px;color:var(--text);
  box-shadow:var(--sh-sm);
}
.milestone .seal svg{width:23px;height:23px;stroke:var(--text);fill:none;stroke-width:1.6}

.milestone .kicker{margin-bottom:14px}

.milestone h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3.2vw,33px);line-height:1.14;letter-spacing:-.016em;
  color:var(--text);text-wrap:balance;
}
.milestone p{
  color:var(--dim);font-size:15.5px;line-height:1.6;
  max-width:38em;margin:14px auto 0;text-wrap:pretty;
}
.milestone .meta{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(22px,2.8vw,28px);padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid var(--hair);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
.milestone .meta i{width:3px;height:3px;border-radius:50%;background:var(--hair2);display:block}

/* Progress under a milestone — e.g. 3 of 8 lessons on the beginner path. */
.milestone .bar{margin-top:22px;max-width:280px;margin-left:auto;margin-right:auto}

/* Entrance. Deliberate, single, and never repeated. */
.milestone.enter{animation:ncc-milestone .62s var(--spring) both}
@keyframes ncc-milestone{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   4. .stat-card — one number, made to be quoted
   --------------------------------------------------------------------------
   Consecutive sessions run. Lessons published. Standards kept. One number is
   quotable; a dashboard is not. Built to survive being cropped to the number.
   -------------------------------------------------------------------------- */
.stat-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--raised);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  padding:clamp(28px,3.6vw,38px);
  display:flex;flex-direction:column;
}
.stat-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;opacity:.55;z-index:1;
}
.stat-card > *{position:relative;z-index:2}

.stat-card .kicker{margin-bottom:auto;padding-bottom:26px}

.stat-card .fig{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(58px,9vw,92px);line-height:.94;letter-spacing:-.038em;
  color:var(--text);display:block;
}
.stat-card .fig sup,.stat-card .fig .unit{
  font-size:.32em;letter-spacing:-.01em;vertical-align:super;color:var(--mute);
  margin-left:.14em;font-family:var(--sans);font-weight:500;
}
.stat-card .lab{
  font-size:15px;color:var(--text);font-weight:500;margin-top:18px;
  letter-spacing:-.006em;line-height:1.4;
}
.stat-card .note{
  color:var(--mute);font-size:12.5px;line-height:1.55;margin-top:9px;max-width:30em;
}
.stat-card .asof{
  margin-top:clamp(20px,2.6vw,26px);padding-top:16px;border-top:1px solid var(--hair);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500;
}

/* Grid of stats — collapses to one column on phones. */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px)}
@media(max-width:860px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stat-grid{grid-template-columns:1fr}}

/* Inverted variant — for the single hero number in a launch recap. Reads as
   the loudest thing the system permits, which is still quite quiet. */
.stat-card.invert{background:var(--btn-bg);border-color:var(--btn-bg);box-shadow:var(--sh-md)}
.stat-card.invert::before{opacity:.28}
.stat-card.invert .fig,.stat-card.invert .lab{color:var(--btn-fg)}
.stat-card.invert .kicker,.stat-card.invert .note,.stat-card.invert .asof{color:var(--btn-fg);opacity:.62}
.stat-card.invert .asof{border-top-color:rgba(128,128,128,.32)}

/* --------------------------------------------------------------------------
   5. .receipt — proof of a thing that happened
   --------------------------------------------------------------------------
   Session attended. Standard kept. Delay announced. Team holdings published.
   Monospace, ruled rows, tabular figures, a torn bottom edge. This is the
   company's transparency thesis expressed as an object: a record you can hold
   up. Screenshot-first by construction — every line survives a crop.
   -------------------------------------------------------------------------- */
.receipt{
  position:relative;
  background:var(--raised);border:1px solid var(--hair);
  border-radius:var(--r-md) var(--r-md) 0 0;
  box-shadow:var(--sh-md);
  padding:clamp(24px,3.2vw,32px) clamp(22px,3vw,30px) clamp(28px,3.4vw,34px);
  max-width:440px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
/* Torn/perforated bottom edge — reads as a ledger stub, not a UI card. */
.receipt::after{
  content:'';position:absolute;left:-1px;right:-1px;bottom:-11px;height:12px;
  background:
    radial-gradient(circle at 6px 0,transparent 6px,var(--hair) 6px,var(--hair) 6.9px,transparent 7px) 0 0/12px 12px repeat-x,
    radial-gradient(circle at 6px -1px,transparent 6px,var(--raised) 6px) 0 0/12px 12px repeat-x;
  pointer-events:none;
}

.receipt .rhead{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:4px;border-bottom:1px dashed var(--hair2);
}
.receipt .rhead .t{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
}
.receipt .rhead h4{
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;
  color:var(--text);margin-top:7px;line-height:1.3;
}
.receipt .rhead img{height:14px;width:auto;opacity:.75;flex:none;margin-top:2px}

.receipt dl{margin:0}
.receipt .rrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--hair);
  font-size:12.5px;line-height:1.5;
}
.receipt .rrow:last-of-type{border-bottom:0}
.receipt .rrow dt{color:var(--mute);white-space:nowrap;letter-spacing:.01em}
.receipt .rrow dd{color:var(--text);text-align:right;margin:0;word-break:break-word}
.receipt .rrow dd.ok{color:var(--ok)}

.receipt .rtotal{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin-top:6px;padding-top:15px;border-top:1px dashed var(--hair2);
  font-size:13px;
}
.receipt .rtotal dt{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
}
.receipt .rtotal dd{font-size:15px;font-weight:600;color:var(--text);margin:0}

.receipt .rfoot{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--hair);
  font-size:10.5px;line-height:1.65;color:var(--mute);
}
.receipt .rfoot .hash{word-break:break-all;letter-spacing:.02em}

/* Status stamp — rotated, low contrast, never celebratory. */
.receipt .stamp{
  position:absolute;right:clamp(18px,2.6vw,26px);bottom:clamp(46px,5vw,58px);
  transform:rotate(-9deg);
  border:1.5px solid var(--ok);border-radius:6px;
  padding:5px 11px;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ok);opacity:.85;
  pointer-events:none;
}
.receipt .stamp.neutral{border-color:var(--hair2);color:var(--mute)}

/* --------------------------------------------------------------------------
   6. .share-row — the actions
   --------------------------------------------------------------------------
   Copy link, X, Telegram. Same pill geometry and easing as .btn in app.css so
   it never reads as a bolted-on social widget. Icon-only on phones.
   -------------------------------------------------------------------------- */
.share-row{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:clamp(18px,2.4vw,24px);
}
.share-row .lbl{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);font-weight:500;margin-right:5px;
}
.share-row a,.share-row button{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--hair2);background:transparent;color:var(--text);
  border-radius:var(--r-pill);padding:8px 15px;
  font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:transform var(--t-fast) var(--spring),
             border-color var(--t-base),background var(--t-base),color var(--t-base);
}
.share-row a:hover,.share-row button:hover{border-color:var(--text);background:var(--sunk)}
.share-row a:active,.share-row button:active{transform:scale(.97)}
.share-row svg{width:14px;height:14px;flex:none;display:block}

/* Copy → copied. Toggle .is-done from JS; it reverts itself after ~2s. */
.share-row .copy .done{display:none}
.share-row .copy.is-done{border-color:var(--ok-bd);background:var(--ok-bg);color:var(--ok)}
.share-row .copy.is-done .idle{display:none}
.share-row .copy.is-done .done{display:inline}

.share-row.right{justify-content:flex-end}
.share-row.center{justify-content:center}

@media(max-width:520px){
  .share-row .lbl{display:none}
  .share-row .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .share-row a,.share-row button{padding:9px 12px}
}

/* --------------------------------------------------------------------------
   7. Motion and accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .milestone.enter{animation:none}
  .quote-card,.milestone,.stat-card,.receipt,
  .share-row a,.share-row button,.shareable .share-mark{transition:none!important}
  .share-row a:active,.share-row button:active{transform:none}
}

@media (forced-colors:active){
  .quote-card,.milestone,.stat-card,.receipt,.shareable .share-mark{border:1px solid CanvasText}
  .quote-card::before,.milestone::before,.stat-card::before,.quote-card::after{display:none}
  .receipt .stamp{border-color:CanvasText;color:CanvasText}
}