/* Human Code Exhibition Layer — preview-only visual system
   Presentation only. No authority, workflow, storage, or lifecycle semantics live here. */

:root {
  --hc-paper: #f4f1e9;
  --hc-paper-deep: #e9e4d8;
  --hc-sheet: #fffdf7;
  --hc-ink: #111318;
  --hc-muted: #5e625b;
  --hc-line: rgba(17, 19, 24, .18);
  --hc-line-strong: rgba(17, 19, 24, .58);
  --hc-signal: #c9ff3d;
  --hc-blue: #275fce;
  --hc-olive: #7d8454;
  --hc-rose: #e9c7c0;
  --hc-lavender: #d8d0ef;
  --hc-aqua: #c7e6e2;
  --hc-yellow: #f0dda0;
  --hc-green: #cfe1c2;
  --hc-shadow: 8px 8px 0 rgba(17, 19, 24, .12);
  --hc-radius: 18px;
}

html { background: var(--hc-paper); }

body.hc-exhibition {
  margin: 0;
  color: var(--hc-ink);
  background:
    linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px),
    radial-gradient(circle at 10% 4%, rgba(201,255,61,.16), transparent 24rem),
    var(--hc-paper);
  background-size: 28px 28px, 28px 28px, auto, auto;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  accent-color: var(--hc-blue);
  min-height: 100vh;
  overflow-x: clip;
}

body.hc-exhibition::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--hc-signal) var(--hc-scroll, 0%), rgba(17,19,24,.12) var(--hc-scroll, 0%));
  pointer-events: none;
}

.hc-exhibition *, .hc-exhibition *::before, .hc-exhibition *::after { box-sizing: border-box; }
.hc-exhibition img, .hc-exhibition svg, .hc-exhibition canvas { max-width: 100%; }

.hc-exhibition :where(h1,h2,h3,h4,strong,b) { color: var(--hc-ink); }
.hc-exhibition :where(h1,h2,h3) { letter-spacing: -.035em; text-wrap: balance; }
.hc-exhibition :where(p,li,dd,small) { line-height: 1.55; }
.hc-exhibition :where(a) { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.hc-exhibition :where(a:hover) { text-decoration-color: var(--hc-blue); }
.hc-exhibition :where(a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible) {
  outline: 3px solid var(--hc-blue);
  outline-offset: 3px;
}

/* Common application chrome. Scoped so existing behavior remains untouched. */
.hc-exhibition :where(header, .topbar, .app-header, .site-header, nav[aria-label]) {
  border-color: var(--hc-line) !important;
}

.hc-exhibition :where(header, .topbar, .app-header, .site-header) {
  background: color-mix(in srgb, var(--hc-paper) 88%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hc-exhibition :where(main, .container, .shell, .wrap) { position: relative; }

.hc-exhibition :where(button, .btn, .button, [role="button"], input[type="button"], input[type="submit"]) {
  border: 1px solid var(--hc-ink) !important;
  border-radius: 999px !important;
  font: inherit;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.hc-exhibition :where(button, .btn, .button, [role="button"]):not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 rgba(17,19,24,.25);
}

.hc-exhibition :where(input,select,textarea) {
  color: var(--hc-ink) !important;
  background: color-mix(in srgb, var(--hc-sheet) 92%, transparent) !important;
  border: 1px solid var(--hc-line-strong) !important;
  border-radius: 12px !important;
  font: inherit;
}

.hc-exhibition :where(table) { border-collapse: separate; border-spacing: 0; }
.hc-exhibition :where(th) { background: rgba(17,19,24,.06); color: var(--hc-ink); }
.hc-exhibition :where(td,th) { border-color: var(--hc-line) !important; }

/* Broad surface normalization for the independent static product pages. */
.hc-exhibition:not(.case-page) :where(.card,.panel,.tile,.box,.module,.section-card,.surface-card,article) {
  border-color: var(--hc-line-strong) !important;
  border-radius: var(--hc-radius) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 12px 30px rgba(17,19,24,.06);
}

.hc-exhibition:not(.case-page) :where(.card,.panel,.tile,.box,.module,.section-card,.surface-card,article):not([class*="dark"]) {
  background-color: color-mix(in srgb, var(--hc-sheet) 92%, transparent) !important;
}

.hc-exhibition .hc-exhibition-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .75rem 0 0;
  padding: .38rem .7rem;
  border: 1px solid var(--hc-ink);
  border-radius: 999px;
  background: var(--hc-signal);
  color: var(--hc-ink);
  font-size: .72rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hc-exhibition .hc-exhibition-tag::before {
  content: "";
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--hc-ink);
}

.hc-exhibition .hc-route-stamp {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 80;
  max-width: min(23rem, calc(100vw - 24px));
  padding: .52rem .72rem;
  border: 1px solid rgba(17,19,24,.62);
  border-radius: 999px;
  background: rgba(244,241,233,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--hc-ink);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Signature orbit — Continuity Wallet */
.hc-wallet-orbit {
  position: relative;
  margin: clamp(2rem, 6vw, 5rem) auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--hc-ink);
  border-radius: 28px;
  background:
    radial-gradient(circle at center, rgba(201,255,61,.2), transparent 23%),
    linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px),
    var(--hc-sheet);
  background-size: auto, 22px 22px, 22px 22px, auto;
  box-shadow: var(--hc-shadow);
  overflow: hidden;
}

.hc-wallet-orbit-head,
.hc-routing-head,
.hc-evidence-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .7fr);
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 1.5rem;
}

.hc-wallet-orbit-head h3,
.hc-routing-head h3,
.hc-evidence-head h3 { margin: .2rem 0 0; font-size: clamp(2rem, 5vw, 4.5rem); line-height: .94; }
.hc-exhibition-kicker { margin: 0; color: var(--hc-blue); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }

.hc-orbit-stage {
  position: relative;
  min-height: 680px;
  isolation: isolate;
}

.hc-orbit-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: min(72%, 650px); aspect-ratio: 1;
  border: 1px solid rgba(17,19,24,.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.hc-orbit-ring.two { width: min(48%, 430px); border-style: dashed; }

.hc-orbit-center {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(140px, 22vw, 230px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--hc-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--hc-signal);
  box-shadow: 8px 8px 0 rgba(17,19,24,.18);
}
.hc-orbit-center strong { font-size: clamp(1rem, 2vw, 1.45rem); }
.hc-orbit-center small { display:block; margin-top:.35rem; font-weight:700; }

.hc-orbit-node {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: clamp(108px, 15vw, 165px);
  min-height: 76px;
  transform: translate(-50%, -50%);
  padding: .7rem !important;
  border-radius: 18px !important;
  background: var(--hc-paper) !important;
  color: var(--hc-ink) !important;
  text-align: left;
  line-height: 1.05;
  box-shadow: 4px 4px 0 rgba(17,19,24,.13);
  z-index: 2;
}
.hc-orbit-node small { display:block; margin-top:.3rem; color: var(--hc-muted); font-size:.64rem; font-weight:700; }
.hc-orbit-node[aria-pressed="true"] { background: var(--hc-ink) !important; color: var(--hc-paper) !important; box-shadow: 6px 6px 0 var(--hc-signal); }
.hc-orbit-node[aria-pressed="true"] strong { color: var(--hc-paper); }
.hc-orbit-node[aria-pressed="true"] small { color: rgba(244,241,233,.72); }

.hc-orbit-detail {
  position: absolute;
  left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 2rem));
  padding: 1rem 1.1rem;
  border: 1px solid var(--hc-ink);
  border-radius: 16px;
  background: rgba(244,241,233,.95);
  box-shadow: 5px 5px 0 rgba(17,19,24,.12);
}
.hc-orbit-detail strong { display:block; font-size:1.05rem; }
.hc-orbit-detail p { margin:.35rem 0 0; color:var(--hc-muted); }

/* HCOS routing choreography */
.hc-routing-exhibit {
  margin: clamp(2rem, 6vw, 5rem) auto;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--hc-ink);
  border-radius: 28px;
  background: var(--hc-ink);
  color: var(--hc-paper);
  box-shadow: 10px 10px 0 rgba(39,95,206,.2);
}
.hc-routing-exhibit :where(h3,h4,strong) { color: var(--hc-paper); }
.hc-routing-head p { color: rgba(244,241,233,.7); }
.hc-routing-head .hc-exhibition-kicker { color: var(--hc-signal); }

.hc-routing-layout { display:grid; grid-template-columns:minmax(14rem,.62fr) minmax(0,1.38fr); gap:1.5rem; }
.hc-routing-rail { position:relative; display:grid; gap:.35rem; }
.hc-routing-rail::before { content:""; position:absolute; left:12px; top:15px; bottom:15px; width:2px; background:rgba(244,241,233,.16); }
.hc-route-step { position:relative; display:grid; grid-template-columns:25px 1fr; gap:.6rem; align-items:start; padding:.38rem 0; color:rgba(244,241,233,.48); }
.hc-route-step b { width:10px; height:10px; margin:5px 0 0 8px; border:1px solid rgba(244,241,233,.55); border-radius:50%; background:var(--hc-ink); z-index:1; }
.hc-route-step.is-past { color:rgba(244,241,233,.72); }
.hc-route-step.is-past b { background:var(--hc-blue); border-color:var(--hc-blue); }
.hc-route-step.is-active { color:var(--hc-paper); font-weight:900; }
.hc-route-step.is-active b { width:14px; height:14px; margin-left:6px; margin-top:3px; background:var(--hc-signal); border-color:var(--hc-signal); box-shadow:0 0 0 6px rgba(201,255,61,.12); }

.hc-routing-canvas {
  position:sticky;
  top:8rem;
  min-height:430px;
  align-self:start;
  padding:clamp(1.2rem,3vw,2rem);
  border:1px solid rgba(244,241,233,.22);
  border-radius:22px;
  background:
    linear-gradient(rgba(244,241,233,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,233,.045) 1px, transparent 1px),
    #151820;
  background-size:24px 24px;
  overflow:hidden;
}
.hc-routing-canvas::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-80px; top:-80px; background:radial-gradient(circle, rgba(201,255,61,.16), transparent 68%); pointer-events:none; }
.hc-route-state { color:var(--hc-signal); font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.hc-routing-canvas h4 { margin:.45rem 0; font-size:clamp(2rem,4vw,4rem); line-height:.95; }
.hc-routing-canvas p { max-width:48rem; color:rgba(244,241,233,.72); }
.hc-route-contracts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin-top:1.4rem; }
.hc-route-contract { padding:.8rem; border:1px solid rgba(244,241,233,.18); border-radius:14px; background:rgba(244,241,233,.045); }
.hc-route-contract small { display:block; color:rgba(244,241,233,.5); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hc-route-contract strong { display:block; margin-top:.25rem; font-size:.82rem; }

/* Dimensional product → architecture peel */
.hc-exhibition .product-surface-shell { perspective: 1300px; }
.hc-exhibition .product-window { transform-origin: 50% 12%; transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease; }
.hc-exhibition .product-surface-shell.is-peeled .product-window { transform: translate3d(-4%, -1%, 90px) rotateY(7deg) rotateX(1deg); box-shadow: 28px 28px 0 rgba(17,19,24,.13); }
.hc-peel-control { margin:.8rem 0 1rem; display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; }
.hc-peel-control button { padding:.6rem .9rem !important; background:var(--hc-signal) !important; color:var(--hc-ink) !important; }
.hc-peel-control span { color:var(--hc-muted); font-size:.75rem; font-weight:700; }
.hc-peel-layers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; max-height:0; opacity:0; transform:translateY(-10px); overflow:hidden; transition:max-height .5s ease, opacity .35s ease, transform .45s ease; }
.is-peeled .hc-peel-layers { max-height:480px; opacity:1; transform:none; margin-bottom:1rem; }
.hc-peel-layer { min-height:118px; padding:1rem; border:1px solid var(--hc-ink); border-radius:16px; background:var(--hc-sheet); box-shadow:4px 4px 0 rgba(17,19,24,.1); }
.hc-peel-layer:nth-child(1) { background:color-mix(in srgb,var(--hc-blue) 10%,var(--hc-sheet)); }
.hc-peel-layer:nth-child(2) { background:color-mix(in srgb,var(--hc-yellow) 48%,var(--hc-sheet)); }
.hc-peel-layer:nth-child(3) { background:color-mix(in srgb,var(--hc-lavender) 48%,var(--hc-sheet)); }
.hc-peel-layer:nth-child(4) { background:color-mix(in srgb,var(--hc-green) 48%,var(--hc-sheet)); }
.hc-peel-layer small { display:block; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.hc-peel-layer strong { display:block; margin-top:.5rem; }

/* Evidence drawer */
.hc-evidence-drawer {
  margin: clamp(2rem,6vw,5rem) auto;
  padding: clamp(1.2rem,3vw,2rem);
  border-top:1px solid var(--hc-ink);
  border-bottom:1px solid var(--hc-ink);
  background:rgba(255,253,247,.5);
}
.hc-evidence-tabs { display:flex; gap:.45rem; flex-wrap:wrap; margin:1rem 0; }
.hc-evidence-tabs button { padding:.55rem .8rem !important; background:transparent !important; color:var(--hc-ink) !important; }
.hc-evidence-tabs button[aria-pressed="true"] { background:var(--hc-ink) !important; color:var(--hc-paper) !important; box-shadow:4px 4px 0 var(--hc-signal); }
.hc-evidence-panel { min-height:180px; padding:clamp(1rem,3vw,1.5rem); border:1px solid var(--hc-ink); border-radius:18px; background:var(--hc-sheet); box-shadow:var(--hc-shadow); }
.hc-evidence-panel h4 { margin:0 0 .65rem; font-size:clamp(1.3rem,3vw,2.4rem); }
.hc-evidence-panel ul { margin:.6rem 0 0; padding-left:1.2rem; }
.hc-evidence-panel li + li { margin-top:.55rem; }
.hc-evidence-panel .hc-empty { color:var(--hc-muted); }

/* Reveal grammar for generic system pages */
.hc-exhibition [data-hc-reveal] { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.hc-exhibition [data-hc-reveal].is-visible { opacity:1; transform:none; }

@media (max-width: 820px) {
  .hc-wallet-orbit-head,.hc-routing-head,.hc-evidence-head,.hc-routing-layout { grid-template-columns:1fr; }
  .hc-routing-canvas { position:relative; top:auto; min-height:360px; }
  .hc-route-contracts,.hc-peel-layers { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hc-orbit-stage { min-height:590px; }
  .hc-route-stamp { font-size:.58rem; }
}

@media (max-width: 560px) {
  body.hc-exhibition { background-size:22px 22px,22px 22px,auto,auto; }
  .hc-wallet-orbit,.hc-routing-exhibit,.hc-evidence-drawer { margin-left:.4rem; margin-right:.4rem; }
  .hc-orbit-stage { min-height:720px; }
  .hc-orbit-ring { width:92%; }
  .hc-orbit-ring.two { width:62%; }
  .hc-orbit-center { width:128px; }
  .hc-orbit-node { width:108px; min-height:68px; padding:.58rem !important; font-size:.74rem; }
  .hc-orbit-detail { bottom:.2rem; }
  .hc-route-contracts,.hc-peel-layers { grid-template-columns:1fr; }
  .hc-route-stamp { display:none; }
  .hc-evidence-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hc-evidence-tabs button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-exhibition *, .hc-exhibition *::before, .hc-exhibition *::after {
    scroll-behavior:auto !important;
    animation:none !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .hc-exhibition [data-hc-reveal] { opacity:1; transform:none; }
  .hc-exhibition .product-surface-shell.is-peeled .product-window { transform:none; }
  .hc-routing-canvas { position:relative; top:auto; }
}