/* PRODUCTION. T-030 (2026-10-02): the proof-side views (assets/proof-*.js)
   inside the one app's tabs on index.html. The same look as
   capabilities.css, scoped to .app-tab-body so nothing else on the
   homepage changes. Kept out of the page because the site CSP forbids
   inline styles. */
.app-tab-body { --ok:#2F7D4F; --ok-pale:#E4F3EA; --blue-pale:#E8F0FB; --warn-pale:#FFF6E0; }
.app-tab-body h2 { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 18px 0 10px; line-height: 1.2; }
.app-tab-body h3 { font-size: 17px; margin: 0 0 6px; }
.app-tab-body .card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; overflow-wrap: anywhere; }
.app-tab-body .hero { border-left: 4px solid var(--gold); }
.app-tab-body .muted { color: var(--ink-soft); font-size: 14px; }
.app-tab-body .faint { color: var(--ink-faint); font-size: 13px; }
.app-tab-body .note { background: var(--warn-pale); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 10px 0; }
.app-tab-body .hidden { display: none !important; }
.app-tab-body button.primary, .app-tab-body button.secondary, .app-tab-body button.link, .app-tab-body button.danger { font: inherit; cursor: pointer; border-radius: 9px; padding: 9px 16px; margin: 8px 8px 0 0; min-height: 44px; }
.app-tab-body button.primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.app-tab-body button.secondary { background: var(--paper); color: var(--ink); border: 1px solid #cfcdc6; }
.app-tab-body button.link { background: none; border: none; padding: 4px 0; color: var(--gold-deep); text-decoration: underline; }
.app-tab-body button.danger { background: #8b2020; color: #fff; border: 1px solid #8b2020; }
.app-tab-body button:disabled { opacity: .55; cursor: default; }
.app-tab-body button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.app-tab-body .pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; margin: 2px 6px 2px 0; }
.app-tab-body .pill.proven, .app-tab-body .pill.strong { background: var(--ok-pale); color: var(--ok); }
.app-tab-body .pill.confirmed, .app-tab-body .pill.corrected, .app-tab-body .pill.some { background: var(--blue-pale); color: #24508f; }
.app-tab-body .pill.observed, .app-tab-body .pill.nyv { background: #eee; color: #555; }
.app-tab-body .pill.unmapped { background: #f3e9fb; color: #6b3d8f; }
.app-tab-body .steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.app-tab-body .steps span { font-size: 12px; padding: 3px 9px; border-radius: 10px; background: #eee; color: #666; }
.app-tab-body .steps span.done { background: var(--ok-pale); color: var(--ok); }
.app-tab-body .steps span.now { background: var(--gold-pale); color: var(--ink); font-weight: 600; }
.app-tab-body label { display: block; font-size: 14px; font-weight: 600; margin-top: 10px; }
.app-tab-body input[type=text], .app-tab-body textarea, .app-tab-body select { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid #cfcdc6; border-radius: 8px; background: #fff; margin-top: 4px; }
.app-tab-body textarea { min-height: 110px; }
.app-tab-body ul { margin: 6px 0; padding-left: 20px; }
.app-tab-body pre { overflow-x: auto; }
.app-tab-body .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-tab-body .grow { flex: 1; min-width: 200px; }
.app-tab-body .memory-row { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line); padding: 10px 0; flex-wrap: wrap; }
.app-tab-body .memory-row:first-of-type { border-top: none; }
.app-tab-body .memory-row .grow { min-width: 180px; }
.app-tab-body .source { font-size: 12px; border-radius: 10px; padding: 1px 8px; background: var(--blue-pale); color: #24508f; white-space: nowrap; }
.app-tab-body .source.inferred { background: var(--warn-pale); color: #7a5a12; }
.app-tab-body .inline-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.app-tab-body .inline-form input, .app-tab-body .inline-form select { width: auto; flex: 1; min-width: 120px; margin: 0; }
.app-tab-body .sources { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--paper); font-size: 14px; }
.app-tab-body .source-group { margin: 4px 0 8px; }
.app-tab-body .source-row { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 3px 0; }
.app-tab-body .source-row a { color: var(--gold-deep); text-decoration: underline; overflow-wrap: anywhere; }
.app-tab-body .opp-list { list-style: none; padding: 0; margin: 10px 0 0; }
.app-tab-body .opp-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 8px 0; }
.app-tab-body .opp-who { display: flex; flex-direction: column; min-width: 0; }
.app-tab-body .opp-status { background: #eee; color: #555; white-space: nowrap; }
.app-tab-body .opp-tags { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.app-tab-body .opp-status.opp-ready { background: var(--blue-pale); color: #24508f; }
.app-tab-body .opp-status.opp-sent { background: var(--ok-pale); color: var(--ok); }
.app-tab-body .opp-more summary { cursor: pointer; font-size: 14px; color: var(--ink-soft); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.app-tab-body .opp-chat-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-deep); text-decoration: underline; }
@media (max-width: 600px) { .app-tab-body .grow { min-width: 0; } }
/* The shared message line (proof-core toast) on the homepage. */
#status div { background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 9px; margin: 8px 0; font-size: 14px; }
#status div.err { background: #8b2020; }