/* =========================================================================
   TopBetting — Trust Product Surface v1 · PHASE 1 (STRUCTURE ONLY)
   Structural layout + functional trust-state colors + breadcrumbs + evidence
   line + doc skeleton. NO brand identity, NO visual design — that is Phase 2.
   Reuses tokens/components already defined in design-system.css.
   ========================================================================= */

/* ---------- breadcrumbs (structural; visible trail) ---------- */
.tb-breadcrumbs{ border-bottom:1px solid var(--tb-line,#e6ebf0); }
.tb-breadcrumbs__inner{ max-width:1100px; margin:0 auto; padding:8px 16px; font-size:.8rem; color:var(--tb-ink-soft,#5b6b7b); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tb-breadcrumbs a{ color:var(--tb-brand-ink,#075a37); text-decoration:none; }
.tb-breadcrumbs a:hover{ text-decoration:underline; }
.tb-breadcrumbs .sep{ opacity:.5; }

/* ---------- Trust UI state system (5 canonical states; colors are FUNCTIONAL/meaning-encoded, not brand) ---------- */
.tb-state{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800; padding:4px 10px; border-radius:999px; line-height:1.1; border:1px solid transparent; }
.tb-state svg{ width:13px; height:13px; }
.tb-state--review{   background:#eef2f6; color:#475569; }
.tb-state--progress{ background:#e8f0fe; color:#1d4ed8; }
.tb-state--partial{  background:#fbf1da; color:#92600a; }
.tb-state--verified{ background:#e7f6ee; color:#0a7d4d; }
.tb-state--risk{     background:#fbe6e3; color:#b3271b; }
/* full-width state banner (operator header) */
.tb-statebanner{ display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:9px; border:1px solid var(--tb-line,#e6ebf0); margin:10px 0; }
.tb-statebanner--review{ background:#eef2f6; } .tb-statebanner--progress{ background:#e8f0fe; }
.tb-statebanner--partial{ background:#fbf1da; } .tb-statebanner--verified{ background:#e7f6ee; }
.tb-statebanner--risk{ background:#fbe6e3; border-color:#f0c4be; }
.tb-statebanner__t{ font-weight:800; font-size:.95rem; margin:0 0 2px; }
.tb-statebanner__d{ margin:0; font-size:.85rem; color:var(--tb-ink-soft,#5b6b7b); }

/* ---------- "What evidence supports this?" line (the evidence rule, structural) ---------- */
.tb-evidence-line{ display:flex; gap:8px; align-items:baseline; font-size:.86rem; border-left:3px solid var(--tb-line,#e6ebf0); padding:6px 0 6px 12px; margin:.5rem 0; color:var(--tb-ink-soft,#5b6b7b); }
.tb-evidence-line b{ color:var(--tb-ink,#16202b); font-weight:800; }
.tb-evidence-line a{ color:var(--tb-brand-ink,#075a37); }
.tb-evidence-line--none{ border-left-color:#e0c98a; }

/* ---------- trust-document skeleton (structure for the trust pages) ---------- */
.tb-doc{ max-width:1100px; margin:0 auto; padding:6px 16px 48px; }
.tb-doc__purpose{ color:var(--tb-ink-soft,#5b6b7b); font-size:1.02rem; max-width:70ch; margin:.3rem 0 0; }
.tb-doc section{ padding:22px 0; border-top:1px solid var(--tb-line,#e6ebf0); }
.tb-doc section:first-of-type{ border-top:0; }
.tb-doc h2{ font-size:1.3rem; font-weight:800; margin:.1rem 0 .5rem; }
.tb-doc h3{ font-size:1.02rem; font-weight:800; margin:1rem 0 .3rem; }
.tb-doc p, .tb-doc li{ line-height:1.6; }
.tb-doc__toc{ border:1px solid var(--tb-line,#e6ebf0); border-radius:10px; padding:12px 14px; margin:10px 0 4px; }
.tb-doc__toc strong{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tb-ink-soft,#5b6b7b); margin-bottom:6px; }
.tb-doc__toc ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; }

/* copy/positioning slots reserved for Phase 3 — visibly NOT final copy */
.tb-slot{ border:1px dashed #c7b27a; background:#fdfaf0; color:#6b5418; border-radius:8px; padding:10px 12px; font-size:.85rem; margin:.5rem 0; }
.tb-slot b{ text-transform:uppercase; letter-spacing:.04em; font-size:.7rem; }

/* today-vs-planned (Independence/Accountability) */
.tb-twocol{ display:grid; grid-template-columns:1fr; gap:12px; margin:.5rem 0; }
.tb-twocol__card{ border:1px solid var(--tb-line,#e6ebf0); border-radius:12px; padding:14px; }
.tb-twocol__tag{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px; }
.tb-twocol__tag--now{ background:#e7f6ee; color:#0a7d4d; }
.tb-twocol__tag--planned{ background:#eef2f6; color:#475569; }

/* reserved history slot — architectural placeholder ONLY (no timeline/event/history UI) */
.tb-reserved{ border:1px dashed var(--tb-line,#e6ebf0); border-radius:12px; padding:14px 16px; background:#fafbfc; }
.tb-reserved__label{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--tb-ink-faint,#93a1ae); }
.tb-reserved__t{ font-weight:800; font-size:.98rem; margin:.2rem 0 .15rem; }
.tb-reserved p{ margin:0; font-size:.85rem; color:var(--tb-ink-soft,#5b6b7b); }

/* evidence emphasis block (operator + directory) */
.tb-evemph{ display:flex; gap:10px; align-items:flex-start; border-left:3px solid #cfe7da; background:#f3f9f5; padding:10px 12px; border-radius:0 9px 9px 0; font-size:.86rem; color:var(--tb-ink-soft,#5b6b7b); }
.tb-evemph b{ color:var(--tb-ink,#16202b); }

/* small reading-order hint label used on section heads (Verification→Evidence→Trust) */
.tb-flowtag{ font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tb-brand-ink,#075a37); }

@media (min-width:760px){ .tb-twocol{ grid-template-columns:1fr 1fr; } }