/* ============================================================
   Proof Tokens (participant cryptographic-records page).
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Intro */
  .proof-tokens__intro { display: grid; gap: var(--mea-space-2); }

  /* Assurance banner */
  .proof-assurance {
    display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-3);
    align-items: center;
    padding: var(--mea-space-4) var(--mea-space-5);
    border-radius: var(--mea-radius-xl);
  }

  /* Records region: stack of summary + ledger */
  .proof-records { display: grid; gap: var(--mea-space-6); }

  /* Summary stats */
  .proof-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mea-space-3); margin: 0; }
  .proof-stat {
    display: grid; gap: var(--mea-space-1); justify-items: center; text-align: center;
    padding: var(--mea-space-4) var(--mea-space-2); border-radius: var(--mea-radius-lg);
  }
  .proof-stat__label { margin: 0; }
  .proof-stat__value { margin: 0; }
  .proof-stat__note { margin: 0; }
  @container (max-width: 26rem) { .proof-summary { grid-template-columns: 1fr; } }

  /* Ledger */
  .proof-ledger { display: grid; gap: var(--mea-space-4); padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl); }
  .proof-ledger__head {
    display: grid; grid-template-columns: 1fr auto; gap: var(--mea-space-2);
    align-items: baseline;
  }
  .proof-ledger__title { margin: 0; }
  .proof-ledger__count { margin: 0; justify-self: end; }

  /* Token list */
  .proof-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .proof-token { display: grid; }

  .proof-token-header {
    display: grid; grid-template-columns: auto auto 1fr auto;
    gap: var(--mea-space-3); align-items: center; width: 100%;
    padding: var(--mea-space-4) var(--mea-space-1);
    text-align: start;
  }
  .proof-token__kind {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2rem; block-size: 2rem; border-radius: var(--mea-radius-circle);
  }
  .proof-token__summary { display: grid; gap: var(--mea-space-1); min-width: 0; }
  .proof-token__activity { min-width: 0; }

  .proof-token-detail { display: grid; gap: var(--mea-space-4); padding: var(--mea-space-4) var(--mea-space-5); }
  .proof-attributes { display: grid; gap: var(--mea-space-2); margin: 0; }
  .proof-attribute { display: grid; grid-template-columns: 1fr auto; gap: var(--mea-space-3); align-items: baseline; }
  .proof-attribute__label { margin: 0; }
  .proof-attribute__value { margin: 0; text-align: end; }

  .proof-hash { display: grid; gap: var(--mea-space-1); padding: var(--mea-space-3); border-radius: var(--mea-radius-md); }
  .proof-hash__label { margin: 0; }
  .proof-hash__value { display: block; overflow-wrap: anywhere; }

  /* Empty state */
  .proof-empty { display: grid; gap: var(--mea-space-3); justify-items: center; text-align: center; padding: var(--mea-space-8) var(--mea-space-4); border-radius: var(--mea-radius-2xl); }
  .proof-empty__icon { margin: 0; }
  .proof-empty__text { margin: 0; }
}

@layer design {
  .proof-tokens__title {
    font-family: var(--mea-font-heading); font-size: var(--mea-text-4xl);
    font-weight: var(--mea-w-extrabold); letter-spacing: var(--mea-ls-tight); color: var(--t-text);
  }
  .proof-tokens__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  .proof-assurance {
    background: var(--t-success-bg); border: 1px solid var(--t-accent-border); box-shadow: var(--mea-shadow-sm);
  }
  .proof-assurance__icon { font-size: var(--mea-text-lg); line-height: 1; }
  .proof-assurance__text { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-success-text); }

  /* Summary stats */
  .proof-stat { background: var(--t-bg-recessed); }
  .proof-stat__label { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); color: var(--t-text-muted); }
  .proof-stat__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold); line-height: var(--mea-lh-tight); }
  .proof-stat--total .proof-stat__value { color: var(--t-accent); }
  .proof-stat--checkins .proof-stat__value { color: var(--t-success); }
  .proof-stat--tasks .proof-stat__value { color: var(--t-warning); }
  .proof-stat__note { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Ledger */
  .proof-ledger { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm); }
  .proof-ledger__title { font-family: var(--mea-font-heading); font-size: var(--mea-text-lg); font-weight: var(--mea-w-bold); color: var(--t-text); }
  .proof-ledger__count { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  /* Token rows */
  .proof-token { border-block-end: 1px solid var(--t-border); }
  .proof-token-header { background: transparent; border: 0; cursor: pointer; color: var(--t-text); }
  .proof-token-header:hover { background: var(--t-bg-hover); }
  .proof-token-arrow { color: var(--t-text-muted); font-size: var(--mea-text-xs); }
  .proof-token__kind { font-size: var(--mea-text-md); }
  .proof-token--checkin .proof-token__kind { background: var(--t-accent-light); color: var(--t-accent); }
  .proof-token--task .proof-token__kind { background: var(--t-success-bg); color: var(--t-success); }
  .proof-token__activity { font-size: var(--mea-text-base); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .proof-token__time { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .proof-token__hash-badge {
    font-family: var(--mea-font-mono); font-size: var(--mea-text-xs);
    color: var(--t-text-secondary); background: var(--t-bg-recessed);
    padding: var(--mea-space-1) var(--mea-space-2); border-radius: var(--mea-radius-sm);
  }

  /* Detail */
  .proof-token-detail { background: var(--t-bg-recessed); }
  .proof-attribute__label { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .proof-attribute__value { font-size: var(--mea-text-sm); color: var(--t-text); }
  .proof-attribute__value--mono { font-family: var(--mea-font-mono); }
  .proof-attribute__value--ok { color: var(--t-success); }
  .proof-attribute__value--warn { color: var(--t-warning); }
  .proof-attribute__value--absent { color: var(--t-text-muted); }

  .proof-hash { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .proof-hash__label { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); color: var(--t-text-muted); }
  .proof-hash__value { font-family: var(--mea-font-mono); font-size: var(--mea-text-xs); color: var(--t-text-secondary); }

  /* Empty state */
  .proof-empty { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm); }
  .proof-empty__icon { font-size: var(--mea-text-hero); line-height: 1; }
  .proof-empty__text { font-size: var(--mea-text-md); color: var(--t-text-secondary); }
}