/* ============================================================================
   Token of Trust — scene interface primitives
   ----------------------------------------------------------------------------
   The reusable interface atoms the registered scenes in docs/scenes.md compose
   from. Illustration objects only: nothing here may imply interactivity — no
   pointer cursor, no hover state, no focus stop. Whole-scene composition
   belongs in the per-page scene stylesheets, not here.

   SOURCE ORDER: loaded by BOTH pages after themes/tot-navy.css and
   pages/mkt.css and before the page stylesheet and that page's scene sheet, so
   a scene can override an atom it composes.

   The .hpui and .totui kits are hosted side by side and are NOT merged; the
   comparison and merge candidates are in docs/scenes.md § Shared-primitive
   audit.
   ========================================================================== */

/* --- Homepage illustration kit (.hpui) — scoped under .hp -------------------- */
.hp .hpui { min-width: 0; font-size: .8rem; line-height: 1.4; color: var(--ink); background: #fff; border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: var(--shadow-ui); overflow: hidden; text-align: left; }
.hp .hpui-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); background: var(--ui-ground); font-size: .74rem; font-weight: 700; color: var(--muted); }
.hp .hpui-dots { display: inline-flex; gap: 5px; }
.hp .hpui-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d5dbe4; }
.hp .hpui-url { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--ui-line); border-radius: 6px; padding: 3px 10px; font-weight: 600; color: var(--muted); font-family: var(--mono); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.hp .hpui-label { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hp .hpui-muted { color: var(--muted); }
.hp .hpui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ui-line); }
.hp .hpui-row:first-child { border-top: 0; }
.hp .hpui-row b { font-weight: 700; color: var(--navy); }
.hp .hpui-row small { display: block; color: var(--muted); font-size: .72rem; }
.hp .hpui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.hp .hpui-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.hp .hpui-ok { background: #e6f5ec; color: #146a3f; }
.hp .hpui-warn { background: #fbf1e0; color: #7a4f0a; }
.hp .hpui-bad { background: #fbe4e4; color: #9b2c2c; }
.hp .hpui-info { background: #e9f1fb; color: #23538a; }
.hp .hpui-neutral { background: #eef1f5; color: var(--muted); }
.hp .hpui-vip { background: #ece9fb; color: #4a3aa8; }
.hp .hpui-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e2f2ef; color: var(--teal-ink); font-size: .68rem; font-weight: 800; }
.hp .hpui-mask { display: block; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #cfd6e0 0 6px, transparent 6px 9px); }

/* --- /product/ illustration kit (.totui) ------------------------------------- */
.totui { min-width: 0; font-size: .8rem; line-height: 1.4; color: var(--ink); background: #fff; border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: var(--shadow-ui); overflow: hidden; text-align: left; }
.totui-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); background: var(--ui-ground); font-size: .74rem; font-weight: 700; color: var(--muted); }
.totui-bar .totui-dots { display: inline-flex; gap: 5px; }
.totui-bar .totui-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d5dbe4; }
.totui-bar .totui-url { flex: 1; min-width: 0; contain: inline-size; background: #fff; border: 1px solid var(--ui-line); border-radius: 6px; padding: 3px 10px; font-weight: 600; color: var(--muted); font-family: var(--mono); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.totui-title { font-weight: 800; color: var(--navy); font-size: .92rem; letter-spacing: -.01em; }
.totui-label { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.totui-muted { color: var(--muted); }
.totui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ui-line); }
.totui-row:first-of-type { border-top: 0; }
.totui-row b { font-weight: 700; color: var(--navy); }
.totui-row small { display: block; color: var(--muted); font-size: .74rem; }
.totui-mark { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }
.totui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.totui-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.totui-chip.totui-ok { background: #e6f5ec; color: #146a3f; }
.totui-chip.totui-warn { background: #fbf1e0; color: #7a4f0a; }
.totui-chip.totui-info { background: #e9f1fb; color: #23538a; }
.totui-chip.totui-neutral { background: #eef1f5; color: var(--muted); }
.totui-chip.totui-locked { background: #eef1f5; color: var(--navy); }
.totui-chip.totui-locked::before { width: 8px; height: 8px; border-radius: 2px; }
.totui-toggle { width: 34px; height: 20px; border-radius: 999px; background: #cfd6e0; position: relative; flex-shrink: 0; }
.totui-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s; }
.totui-toggle.totui-on { background: var(--green); }
.totui-toggle.totui-on::after { transform: translateX(14px); }
.totui-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 8px; font-size: .74rem; font-weight: 800; background: var(--navy); color: #fff; white-space: nowrap; }
.totui-btn.totui-line { background: #fff; color: var(--navy); border: 1px solid var(--ui-line); }
.totui-mask { display: inline-block; height: 9px; border-radius: 4px; background: repeating-linear-gradient(90deg, #cfd6e0 0 6px, transparent 6px 9px); vertical-align: middle; }
.totui-prod { position: relative; border-radius: 10px; background: linear-gradient(160deg, #eef4f3, #e2ebf3); overflow: hidden; }
.totui-prod svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Primitive responsive and reduced-motion rules --------------------------- */
@media (max-width: 400px) {
  .totui-bar .totui-chip { white-space: normal; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .totui-toggle::after { transition: none; }
}