/* ==========================================================================
   KuduDoc — the RECEIVING half of secure sharing.

   One stylesheet, two screens, every class prefixed .sv- :

     SECTION 1 — /app/shared-with-me.html
                 The signed-in inbox of documents other people sent you.
                 Loaded after app-dashboard.css, so it can lean on .doc-list,
                 .doc-row, .stat-tile and the rest of the app furniture.

     SECTION 2 — /shared-view.html  (repo root)
                 What the recipient opens from the emailed link. No sidebar,
                 possibly no account. Loaded after components.css + app.css,
                 so .card, .chip, .btn, .doc-window and .minimal-shell exist
                 but nothing app-dashboard-specific does — anything shared
                 between the two screens is therefore defined here, in full.

   The argument both screens make: every other sharing product hands you a
   locked box around a file you cannot verify. A KuduDoc share arrives
   already proved. So the seal state is never a footnote here — on screen 1
   it sits in the row itself, on screen 2 it gets its own panel.

   Tokens only. No raw hex. No purple, no blue-800/900, no orange-600.
   ========================================================================== */


/* ==========================================================================
   SECTION 1 — /app/shared-with-me.html
   ========================================================================== */

/* ---- Ownership note: this inbox is NOT your Documents list, and saying so
   once, up top, saves a hundred support questions later. ---- */
.sv-ownership{
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5); margin-bottom: var(--space-6);
  border: var(--border-hairline); border-left: 4px solid var(--blue-600);
  border-radius: var(--radius-lg); background: var(--blue-50);
}
.sv-ownership__icon{ flex-shrink: 0; color: var(--blue-700); }
.sv-ownership__icon svg{ width: 22px; height: 22px; }
.sv-ownership__body{ flex: 1; min-width: 0; }
.sv-ownership__title{ font-weight: 700; font-size: var(--text-small); color: var(--ink-900); }
.sv-ownership__desc{ margin-top: 4px; font-size: var(--text-small); color: var(--text-secondary); line-height: 1.6; max-width: 74ch; }
.sv-ownership__desc a{ color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* app-dashboard.css ships blue/warning/success stat-tile icons but no danger
   one, and the "needs your attention" tile genuinely is a danger state. */
.stat-tile__icon.sv-icon--danger{ background: var(--danger-50); color: var(--danger-700); }

/* The third tile's label runs long — let it wrap without shoving the tile
   taller than its neighbours' baseline grid. */
.stat-tile__label{ text-wrap: pretty; }

/* ---- Toolbar: search + two selects + a live count ---- */
.sv-toolbar{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.sv-toolbar__search{ position: relative; flex: 1 1 280px; min-width: 0; }
.sv-toolbar__search svg{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-500); pointer-events: none;
}
.sv-toolbar__search .input{ padding-left: 2.75rem; }
.sv-toolbar__filter{ flex: 0 1 210px; min-width: 165px; }
.sv-toolbar__filter .field__label{ font-size: var(--text-micro); color: var(--text-tertiary); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); margin-bottom: 6px; }
.sv-toolbar__count{ flex: 0 0 auto; margin-left: auto; font-size: var(--text-small); color: var(--text-tertiary); white-space: nowrap; padding-bottom: 12px; }
@media (max-width: 720px){
  .sv-toolbar{ align-items: stretch; }
  .sv-toolbar__filter{ flex: 1 1 160px; }
  .sv-toolbar__count{ margin-left: 0; flex-basis: 100%; padding-bottom: 0; }
}

/* .doc-list sets display:flex, which outranks the UA's [hidden] rule — so
   the empty-state swap needs this or you get an empty bordered box. */
.sv-list[hidden]{ display: none; }

/* ---- The list rows.
   .doc-row already gives us flex-wrap + hairlines, and below the breakpoint
   that wrapping is exactly right — same behaviour as documents.html.

   Above it there is room to line all six pieces up in real columns, which is
   what makes a list of seven scannable rather than seven little paragraphs.
   The two fixed columns matter: with `auto` there, each <li> is its own grid
   and sizes its own actions column, so nothing lines up row to row. Fixed
   widths (200px chips — the "Unchanged since sealing" chip measures 194px —
   and 208px actions, the width of Open + Save a copy) make the fr columns
   resolve identically on every row and on the header strip.

   1400px is where the last fr column ("Expires in 24 days", ~106px) still
   clears its content next to a 264px sidebar. Below that, flex wrapping. ---- */
.sv-row{ align-items: center; }
@media (min-width: 1400px){
  .sv-row{
    display: grid;
    grid-template-columns:
      minmax(0, 1.9fr)   /* document */
      minmax(0, 1.25fr)  /* who shared it */
      200px              /* access + seal */
      minmax(0, 0.85fr)  /* link expiry */
      208px;             /* actions */
    gap: var(--space-4);
  }
  /* Stacked, the two chips read as two facts rather than one long ribbon —
     and the access chip lands directly above the seal it qualifies. */
  .sv-chips{ flex-direction: column; align-items: flex-start; gap: 5px; }
}

/* Column head strip — only meaningful once the grid kicks in. */
.sv-list-head{
  display: none;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary);
  background: var(--ink-50);
  border: var(--border-hairline); border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (min-width: 1400px){
  .sv-list-head{
    display: grid;
    grid-template-columns:
      minmax(0, 1.9fr) minmax(0, 1.25fr) 200px minmax(0, 0.85fr) 208px;
    gap: var(--space-4);
  }
  /* The strip is the list's own header, so the two share one outline. */
  .sv-list-head + .sv-list{ border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* Who shared it — avatar + person + company. */
.sv-sender{ display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1 1 190px; }
.sv-sender .avatar{ width: 30px; height: 30px; font-size: 0.6875rem; flex-shrink: 0; }
.sv-sender__body{ min-width: 0; }
.sv-sender__name{ display: block; font-size: var(--text-small); font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-sender__org{ display: block; font-size: var(--text-micro); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Access chip + seal chip, always together — the seal is the point. */
.sv-chips{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 1 auto; }
.sv-chips .chip{ white-space: nowrap; }

/* The green seal chip carries a dot so it reads as a live state, not a label. */
.sv-seal{ gap: 6px; }
.sv-seal::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success-500); flex-shrink: 0;
}

/* Link expiry. Three temperatures: quiet, warning, gone. */
.sv-expiry{ display: block; font-size: var(--text-micro); color: var(--text-tertiary); white-space: nowrap; flex: 0 1 auto; }
.sv-expiry__value{ display: block; font-weight: 600; color: var(--text-secondary); }
.sv-expiry--warning .sv-expiry__value{ color: var(--warning-700); }
.sv-expiry--danger .sv-expiry__value{ color: var(--danger-700); }

/* An expired row is still listed — you need to know it was there — but it
   stops competing for attention with the ones you can still open. */
.sv-row--expired{ background: var(--ink-50); }
.sv-row--expired:hover{ background: var(--ink-50); }
.sv-row--expired .doc-row__filename,
.sv-row--expired .sv-sender__name{ color: var(--ink-500); }
.sv-row--expired .doc-row__icon{ background: var(--ink-100); color: var(--ink-300); }
.sv-row--expired .sv-sender .avatar{ opacity: 0.55; }
.sv-row--expired .chip{ opacity: 0.7; }

.sv-row .doc-row__actions{ flex: 0 0 auto; }
@media (min-width: 1400px){
  .sv-row .doc-row__actions{ margin-left: 0; justify-content: flex-end; }
}

/* Empty state when search + filters exclude everything. */
.sv-empty{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-3); padding: var(--space-9) var(--space-5);
  border: 1.5px dashed var(--ink-200); border-radius: var(--radius-lg);
  margin-top: var(--space-5);
}
.sv-empty[hidden]{ display: none; }
.sv-empty__icon{
  width: 48px; height: 48px; border-radius: 50%; background: var(--ink-50); color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
}
.sv-empty__icon svg{ width: 24px; height: 24px; }
.sv-empty__title{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); color: var(--ink-900); }
.sv-empty__desc{ font-size: var(--text-small); color: var(--text-secondary); max-width: 380px; }

/* ---- The two explainer cards under the list ---- */
.sv-cards{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); margin-top: var(--space-8); }
@media (max-width: 1000px){ .sv-cards{ grid-template-columns: minmax(0,1fr); } }

.sv-explainer{ display: flex; flex-direction: column; gap: var(--space-4); }
.sv-explainer__head{ display: flex; align-items: center; gap: var(--space-3); }
.sv-explainer__icon{
  width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--blue-50); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
}
.sv-explainer__icon svg{ width: 20px; height: 20px; }
.sv-explainer__icon--warning{ background: var(--warning-50); color: var(--warning-700); }
.sv-explainer__head h3{ font-size: var(--text-h4); }
.sv-explainer p{ font-size: var(--text-small); color: var(--text-secondary); line-height: 1.6; }
.sv-explainer__list{ display: flex; flex-direction: column; gap: var(--space-3); }
.sv-explainer__list li{ display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-small); color: var(--text-secondary); line-height: 1.55; }
.sv-explainer__list li svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; }
.sv-explainer__list .is-yes svg{ color: var(--success-700); }
.sv-explainer__list .is-no svg{ color: var(--ink-500); }
.sv-explainer__list strong{ color: var(--ink-900); }
.sv-explainer__foot{
  margin-top: auto; padding-top: var(--space-4); border-top: var(--border-hairline);
  font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.55;
}
.sv-explainer__foot a{ color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* What a revoked link actually shows the recipient — a mini mock, because
   describing it in prose never lands the same way. */
.sv-revoked-mock{
  border: 1.5px dashed var(--ink-200); border-radius: var(--radius-md);
  background: var(--ink-50); padding: var(--space-5); text-align: center;
}
.sv-revoked-mock__icon{
  width: 36px; height: 36px; border-radius: 50%; margin: 0 auto var(--space-3);
  background: var(--white); border: var(--border-hairline-strong); color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
}
.sv-revoked-mock__icon svg{ width: 18px; height: 18px; }
.sv-revoked-mock__title{ font-size: var(--text-small); font-weight: 700; color: var(--ink-900); }
.sv-revoked-mock__desc{ margin-top: 4px; font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.5; }

/* ---- Roadmap badge + legend (shared by both screens; page 2 has no
   access to .app-nav__soon, so this is the one that must exist here). ---- */
.sv-soon{
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: var(--radius-full); background: var(--blue-50); color: var(--blue-700);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  vertical-align: middle;
}
.sv-legend{
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-hairline);
  font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.6;
}
.sv-legend strong{ color: var(--text-secondary); font-weight: 700; }


/* ==========================================================================
   SECTION 2 — /shared-view.html   (recipient-facing, no account required)
   ========================================================================== */

/* The minimal topbar's right-hand link. signin.html gets this from auth.css,
   which this page deliberately does not load. */
.sv-topbar__link{ font-size: var(--text-small); color: var(--text-secondary); white-space: nowrap; }
.sv-topbar__link a{ font-weight: 600; color: var(--blue-600); }
.sv-topbar__link a:hover{ color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }

.sv-page{ flex: 1; min-width: 0; background: var(--surface-sunken); }
.sv-wrap{ width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--container-pad); }

/* ---- Header band: what this is, who sent it, and how long you have ---- */
.sv-header{ background: var(--white); border-bottom: var(--border-hairline); padding-block: var(--space-7); }
.sv-header__row{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.sv-header__body{ flex: 1 1 420px; min-width: 0; }
.sv-header__eyebrow{
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary);
}
.sv-header__title{ margin-top: var(--space-2); font-size: var(--text-h2); word-break: break-word; }
.sv-header__from{ margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.sv-header__from .avatar{ width: 40px; height: 40px; font-size: var(--text-small); flex-shrink: 0; }
.sv-header__from-text{ min-width: 0; font-size: var(--text-small); color: var(--text-secondary); line-height: 1.5; }
.sv-header__from-text strong{ color: var(--ink-900); }
.sv-header__from-text span{ display: block; font-size: var(--text-micro); color: var(--text-tertiary); }
.sv-header__aside{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
@media (max-width: 720px){
  .sv-header__aside{ align-items: flex-start; width: 100%; }
}
.sv-header__chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.sv-header__expiry{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-small); font-weight: 600; color: var(--warning-700);
  background: var(--warning-50); border-radius: var(--radius-full);
  padding: 7px var(--space-4);
}
.sv-header__expiry svg{ width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Body layout: document left, proof right. Proof is a peer of the
   document, not an accordion underneath it — that is the whole argument. ---- */
.sv-layout{
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-6); align-items: start; padding-block: var(--space-8);
}
@media (max-width: 1040px){ .sv-layout{ grid-template-columns: minmax(0,1fr); } }
.sv-col{ min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 1041px){
  .sv-col--proof{ position: sticky; top: var(--space-5); }
}

/* ---- The document itself ---- */
.sv-doc-window .doc-window__body{ padding: 0; background: var(--white); }
.sv-statement{ padding: var(--space-6); }
@media (max-width: 560px){ .sv-statement{ padding: var(--space-5) var(--space-4); } }

.sv-statement__masthead{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-4); border-bottom: 2px solid var(--ink-900);
}
.sv-statement__bank{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-h4); color: var(--ink-900); letter-spacing: var(--tracking-h); }
.sv-statement__kind{ margin-top: 2px; font-size: var(--text-micro); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 700; }
.sv-statement__ref{ text-align: right; font-size: var(--text-micro); color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 560px){ .sv-statement__ref{ text-align: left; } }
.sv-statement__ref strong{ color: var(--ink-900); }

.sv-statement__meta{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); padding-block: var(--space-5); border-bottom: var(--border-hairline); }
@media (max-width: 560px){ .sv-statement__meta{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sv-statement__meta-label{ font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary); }
.sv-statement__meta-value{ margin-top: 3px; font-size: var(--text-small); font-weight: 600; color: var(--ink-900); word-break: break-word; }

.sv-statement__table{ margin-top: var(--space-5); }
.sv-statement__thead{
  display: grid; grid-template-columns: 78px minmax(0,1fr) 84px 84px; gap: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: var(--border-hairline);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary);
}
.sv-statement__thead span:nth-child(3),
.sv-statement__thead span:nth-child(4){ text-align: right; }
.sv-statement__row{
  display: grid; grid-template-columns: 78px minmax(0,1fr) 84px 84px; gap: var(--space-3);
  align-items: center; padding-block: 11px; border-bottom: var(--border-hairline);
}
@media (max-width: 560px){
  .sv-statement__thead,
  .sv-statement__row{ grid-template-columns: 62px minmax(0,1fr) 70px; }
  .sv-statement__thead span:nth-child(4),
  .sv-statement__row .sv-redacted:nth-child(4){ display: none; }
}

/* Redaction bars. Solid ink, no transparency — a redaction that is only
   painted over is not a redaction, and this mock should not teach that. */
.sv-redacted{
  display: block; height: 11px; border-radius: 2px;
  background: var(--ink-900);
}
.sv-redacted--sm{ height: 10px; }
.sv-statement__row .sv-redacted:nth-child(3),
.sv-statement__row .sv-redacted:nth-child(4){ justify-self: end; width: 100%; }

.sv-statement__balance{
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--ink-50); border: var(--border-hairline);
}
.sv-statement__balance-label{ font-size: var(--text-small); font-weight: 700; color: var(--ink-900); }
.sv-statement__balance-sub{ display: block; font-size: var(--text-micro); font-weight: 400; color: var(--text-tertiary); margin-top: 2px; }
.sv-statement__balance-value{ font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; color: var(--ink-900); letter-spacing: var(--tracking-h); white-space: nowrap; }
.sv-statement__sign{ margin-top: var(--space-5); font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.6; }

.sv-doc-caption{
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--space-4) var(--space-5); border-top: var(--border-hairline);
  background: var(--ink-50); font-size: var(--text-micro); color: var(--text-secondary); line-height: 1.55;
}
.sv-doc-caption svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ink-500); }
.sv-doc-caption strong{ color: var(--ink-900); }

/* ---- PROOF PANEL — the differentiator, given the weight to match ---- */
.sv-proof{
  border: 1px solid var(--success-500); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden;
}
.sv-proof__banner{
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5); background: var(--success-50); border-bottom: 1px solid var(--success-500);
}
.sv-proof__banner-icon{
  width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--white); color: var(--success-700);
  display: flex; align-items: center; justify-content: center;
}
.sv-proof__banner-icon svg{ width: 22px; height: 22px; }
.sv-proof__banner-body{ display: block; min-width: 0; }
.sv-proof__banner-body .chip{ margin-bottom: 5px; }
.sv-proof__banner-note{ display: block; font-size: var(--text-micro); color: var(--success-700); font-weight: 600; line-height: 1.5; }

.sv-proof__body{ padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.sv-proof__item{ min-width: 0; }
.sv-proof__label{
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary);
}
.sv-proof__value{ display: block; margin-top: 4px; font-size: var(--text-small); font-weight: 600; color: var(--ink-900); line-height: 1.5; }
.sv-proof__note{ display: block; margin-top: 4px; font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.55; }
.sv-proof__anchor .sv-proof__value{ margin-top: 0; }
.sv-proof__hash{
  margin-top: 6px; padding: var(--space-3);
  border-radius: var(--radius-sm); background: var(--ink-50); border: var(--border-hairline);
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px;
  color: var(--text-secondary); line-height: 1.75; word-break: break-all;
}
.sv-proof__hash-row{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 8px; }
.sv-proof__copied{ font-size: var(--text-micro); color: var(--success-700); font-weight: 600; }

.sv-proof__anchor{ display: flex; align-items: flex-start; gap: 10px; }
.sv-proof__anchor-dot{
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: var(--orange-50); color: var(--orange-500);
  display: flex; align-items: center; justify-content: center;
}
.sv-proof__anchor-dot svg{ width: 13px; height: 13px; }

.sv-proof__actions{ display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-1); }
.sv-proof__foot{
  padding: var(--space-4) var(--space-5); border-top: var(--border-hairline);
  background: var(--ink-50); font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.6;
}

/* ---- Scope ledger. Same three ✓ / three ✕ discipline as verify.html, but
   verify.css is not loaded here, so it is defined in full. ---- */
.sv-scope{ padding: var(--space-5); border-top: var(--border-hairline); }
.sv-scope__title{
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary); margin-bottom: var(--space-4);
}
.sv-scope__list{ display: flex; flex-direction: column; gap: var(--space-3); }
/* Each <li> is a flex row, so its copy is wrapped in one <span>: a bare text
   node either side of <strong>not</strong> would become three separate
   anonymous flex items and break the sentence across three columns. */
.sv-scope__list li{ display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-small); line-height: 1.55; color: var(--text-secondary); }
.sv-scope__list li > span{ min-width: 0; }
.sv-scope__list svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.sv-scope__list .is-yes svg{ stroke: var(--success-700); }
.sv-scope__list .is-no svg{ stroke: var(--ink-500); }
.sv-scope__list .is-no strong{ color: var(--ink-900); }
.sv-scope__foot{ margin-top: var(--space-4); font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.6; }

/* ---- View-only notice. Honest about what a view-only link can and cannot
   do — overselling this is how trust products lose trust. ---- */
.sv-notice{ display: flex; align-items: flex-start; gap: var(--space-4); }
.sv-notice__icon{
  width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--ink-50); color: var(--ink-700);
  display: flex; align-items: center; justify-content: center;
}
.sv-notice__icon svg{ width: 20px; height: 20px; }
.sv-notice__body{ min-width: 0; }
.sv-notice__title{ font-size: var(--text-small); font-weight: 700; color: var(--ink-900); }
.sv-notice__desc{ margin-top: 6px; font-size: var(--text-small); color: var(--text-secondary); line-height: 1.6; }
.sv-notice__desc + .sv-notice__desc{ margin-top: var(--space-3); }
.sv-notice__desc strong{ color: var(--ink-900); }
.sv-notice__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.sv-request-status{
  font-size: var(--text-micro); font-weight: 600; color: var(--blue-700);
  background: var(--blue-50); border-radius: var(--radius-full); padding: 6px var(--space-4);
}
.sv-request-status[hidden]{ display: none; }

/* ---- Growth loop. The recipient may have no account and did not come here
   to be sold to, so this waits until the very bottom and asks once. ---- */
.sv-cta{ background: var(--gradient-hero); color: var(--text-on-dark); padding-block: var(--space-9); }
.sv-cta__row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; }
.sv-cta__body{ flex: 1 1 380px; min-width: 0; }
.sv-cta__title{ color: var(--white); font-size: var(--text-h2); }
.sv-cta__desc{ margin-top: var(--space-3); font-size: var(--text-body); color: var(--text-on-dark); opacity: 0.9; line-height: 1.6; max-width: 56ch; }
.sv-cta__actions{ flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sv-cta__link{ font-size: var(--text-small); font-weight: 600; color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.sv-cta__link:hover{ opacity: 0.85; }
.sv-cta__note{ margin-top: var(--space-5); font-size: var(--text-micro); color: var(--text-on-dark); opacity: 0.78; }

.sv-foot{ background: var(--white); border-top: var(--border-hairline); padding-block: var(--space-6); }
.sv-foot__row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; font-size: var(--text-micro); color: var(--text-tertiary); }
.sv-foot__links{ display: flex; flex-wrap: wrap; gap: var(--space-5); }
.sv-foot__links a{ color: var(--text-secondary); font-weight: 600; }
.sv-foot__links a:hover{ color: var(--blue-600); }