/* Moiety · inner pages (chat, console, models, ledger, rules). Loaded after app.css and built on its tokens.
 * Kept in its own file so the home page and the design system in app.css can change independently. */

/* ------------------------------------------------------------------ page header */
.page-hd { position: relative; padding: 64px 0 18px; isolation: isolate; }
.page-hd::before { /* a soft prism glow behind the title */
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: -40px; width: min(1100px, 100%); height: 340px; transform: translateX(-50%);
  background: radial-gradient(42% 60% at 22% 40%, rgba(123, 140, 255, .20), transparent 70%), radial-gradient(34% 50% at 70% 30%, rgba(255, 166, 217, .10), transparent 70%);
  filter: blur(8px);
}
.page-hd .h2 { margin: 16px 0 14px; font-size: clamp(32px, 4.6vw, 58px); max-width: 900px; }
.page-hd .lead { max-width: 760px; }
.hd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hd-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 11px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .035); box-shadow: var(--edge); font-size: 13.5px; color: var(--text); white-space: nowrap; }
.hd-chip .icon { color: var(--green); display: inline-flex; }
.hd-chip i { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-style: normal; }
.hd-chip b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
button.hd-chip.go { cursor: pointer; font: inherit; font-size: 13.5px; transition: border-color .2s, background .2s, transform .12s; }
button.hd-chip.go:hover { border-color: rgba(143, 227, 255, .55); background: rgba(143, 227, 255, .07); }
button.hd-chip.go:active { transform: translateY(1px); }
@media (max-width: 600px) {
  .page-hd { padding: 40px 0 10px; }
  .hd-chips { gap: 8px; margin-top: 18px; }
  .hd-chip { white-space: normal; font-size: 12.5px; }
  .hd-chip i { display: none; }
}

.sec-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.sec-hd .h3 { margin: 0; }
.sec-hd .dim { font-size: 12.5px; }

/* ------------------------------------------------------------------ gate (signed out): steps + a sample of the page */
.card.gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; padding: 34px; align-items: center;
  border: 1px solid transparent; background: radial-gradient(90% 120% at 0% 0%, rgba(123, 140, 255, .16), transparent 60%) padding-box, linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--holo) border-box;
  animation: angspin 9s linear infinite; }
.gate-main h3 { font: 700 clamp(24px, 2.6vw, 30px)/1.15 var(--display); letter-spacing: -.02em; margin: 14px 0 8px; }
.gate-main > p { margin: 0 0 22px; max-width: 440px; }
.gate-step { font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.gate-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; }
.gate-steps li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; color: var(--dim); }
.gate-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 44px; bottom: -6px; width: 1px; background: var(--line-2); }
.gate-steps li b { display: block; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.gate-steps li span:not(.gate-dot):not(.icon) { display: block; font-size: 13px; }
.gate-dot { flex: none; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--dim); }
.gate-dot .icon { display: inline-flex; }
.gate-steps li.now b { color: var(--ink); }
.gate-steps li.now .gate-dot { color: #05060f; border-color: transparent; background: var(--grad-cool); box-shadow: 0 0 22px -2px rgba(143, 227, 255, .7); }
.gate-steps li.done .gate-dot { color: var(--good); border-color: rgba(157, 242, 207, .45); background: var(--good-soft); }
.gate-steps li.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(157, 242, 207, .5); }

.gate-demo { position: relative; border-radius: var(--radius); border: 1px solid var(--line-2); background: rgba(4, 5, 14, .66); padding: 18px; box-shadow: var(--edge), 0 30px 70px -30px rgba(0, 0, 0, .9); }
.gate-demo-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; }
.chat-log.demo { padding: 4px 0 0; overflow: visible; }
.chat-log.demo .msg { max-width: 92%; }
.gate-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .03); min-width: 0; }
.mini span { display: block; font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.mini b { display: block; margin-top: 6px; font: 700 21px/1.1 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.mini.hot b { background: linear-gradient(90deg, #b9c4ff, #8fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-cap { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 13.5px; color: var(--muted); }
.gate-key { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed rgba(143, 227, 255, .35); border-radius: 14px; font-size: 13px; }
.gate-key .icon { color: var(--green); display: inline-flex; }
.gate-key .mono { color: var(--ink); }
.gate-key .dim { margin-left: auto; font-size: 12px; }
.gate-demo, .gate-kpis .mini { pointer-events: none; }
@media (max-width: 940px) { .card.gate { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 600px) {
  .card.gate { padding: 22px 18px; }
  .gate-kpis { grid-template-columns: 1fr 1fr; }
  .gate-kpis .mini:last-child { grid-column: span 2; }
  .mini b { font-size: 18px; }
  .gate-key .dim { display: none; }
}
.card.gate-msg { text-align: center; padding: 46px 22px; }
.gate-msg-ic { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; color: var(--green); border: 1px solid var(--line-2); background: rgba(143, 227, 255, .06); }
.gate-msg-ic .icon { display: inline-flex; }

/* chat: a friendlier empty state */
.chat-log > .empty { display: grid; justify-items: center; gap: 6px; }
.chat-log > .empty .icon { display: inline-flex; color: var(--green); margin-bottom: 4px; }
.chat-log > .empty b { color: var(--ink); font-weight: 600; font-size: 15px; }
.chat-log > .empty span:not(.icon) { font: 12px var(--mono); color: var(--dim); }

/* ------------------------------------------------------------------ models */
.picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pick { position: relative; border-radius: var(--radius); border: 1px solid var(--line); padding: 18px 18px 16px; min-width: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(143, 227, 255, .08), transparent 55%), linear-gradient(180deg, #11142b, #0a0c1c); box-shadow: var(--edge); }
.pick .mdl b { font-size: 14.5px; }
.pick-k { margin-top: 16px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pick-row { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font-family: var(--mono); }
.pick-row .strike { font-size: 14px; }
.pick-v { font: 700 30px/1 var(--display); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pick-s { margin-top: 8px; font: 12px var(--mono); color: var(--muted); }
@media (max-width: 940px) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .pick { padding: 14px; } .pick-v { font-size: 24px; } }

.models-card .search { flex: 0 1 360px; min-width: 0; width: 100%; }
.vchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 16px; margin-bottom: 4px; }
@media (max-width: 760px) { /* one swipeable row on phones */
  .vchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 4px; padding: 2px 18px 14px; }
  .vchips::-webkit-scrollbar { display: none; }
}
.vchip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03); color: var(--muted); font: 600 13px var(--sans); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.vchip:first-child { padding-left: 14px; }
.vchip:hover { color: var(--ink); border-color: rgba(255, 255, 255, .3); }
.vchip .vmark { width: 22px; height: 22px; padding: 3px; }
.vchip .vmark.initial { font-size: 11px; }
.vchip i { font: 600 11px var(--mono); font-style: normal; color: var(--dim); padding: 2px 7px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.vchip.on { color: var(--ink); border-color: transparent; background: linear-gradient(var(--panel-solid-2), var(--panel-solid-2)) padding-box, var(--grad-cool) border-box; box-shadow: 0 0 24px -8px rgba(123, 140, 255, .8); }
.vchip.on i { color: #05060f; background: var(--grad-cool); }
table.t.models-t td { vertical-align: middle; }
table.t.models-t .mdl b { font-weight: 600; }
table.t.models-t .mdl .addr { font-size: 11.5px; }
table.t th.hold { color: var(--green); }
table.t td.hold { background: rgba(123, 140, 255, .06); }
table.t td.hold b { background: linear-gradient(90deg, #b9c4ff, #8fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
table.t tr:hover td.hold { background: rgba(123, 140, 255, .11); }

/* ------------------------------------------------------------------ ledger */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); }
.seg button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font: 600 13px var(--sans); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button i { font: 600 11px var(--mono); font-style: normal; color: var(--dim); }
.seg button.on { color: #05060f; background: var(--grad-cool); box-shadow: 0 0 20px -6px rgba(143, 227, 255, .8); }
.seg button.on i { color: rgba(5, 6, 15, .65); }
@media (max-width: 760px) {
  .ledger-tabs > .between { align-items: stretch; }
  .seg { display: flex; overflow-x: auto; flex-wrap: nowrap; border-radius: 16px; width: 100%; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: none; }
}
.ledger-tabs table.t td { vertical-align: middle; }

/* ------------------------------------------------------------------ rules */
.terms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.term { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); padding: 18px 16px; min-width: 0;
  background: linear-gradient(180deg, #11142b, #0a0c1c); box-shadow: var(--edge); transition: border-color .2s, transform .2s; }
.term:hover { border-color: rgba(143, 227, 255, .35); transform: translateY(-2px); }
.term-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--green); border: 1px solid var(--line-2); background: rgba(143, 227, 255, .06); }
.term-ic .icon { display: inline-flex; }
.term-k { margin-top: 16px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.term-v { margin-top: 6px; font: 700 18px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.term p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.term.hot { border: 1px solid transparent; background: radial-gradient(120% 120% at 0% 0%, rgba(123, 140, 255, .26), transparent 60%) padding-box, linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--holo) border-box; animation: angspin 7s linear infinite; }
.term.hot .term-ic { color: #05060f; border-color: transparent; background: var(--grad-cool); }
.term.hot .term-v { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1100px) { .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .term { padding: 14px 13px; } .term-v { font-size: 16px; } .term p { font-size: 12.5px; } }

#terms, #dev, #faq { scroll-margin-top: calc(var(--header-h) + 16px); }
table.t.models-t .mdl b, table.t.models-t .mdl .addr { white-space: nowrap; }
table.t.models-t .m-list { display: none; }
@media (max-width: 600px) {
  table.t.models-t .c-cache, table.t.models-t .c-list { display: none; }
  table.t.models-t th, table.t.models-t td { padding-left: 8px; padding-right: 8px; }
  table.t.models-t .m-list { display: block; font-size: 11px; margin-bottom: 2px; }
  table.t.models-t .vmark { width: 26px; height: 26px; }
  table.t.models-t .mdl { gap: 9px; }
  table.t.models-t .mdl b { white-space: normal; }
  table.t.models-t .mdl .addr { display: none; }
  .card.models-card { padding: 18px 14px; }
}