/* Product mockups on the home page (src/site/mockups.ts): the chat drawn in HTML with the app's tokens, at the
   side panel's real proportions. One floating layer (the window) carries a soft shadow; nothing else does. */

/* ---------- demo: stage tabs, caption, window, footer ---------- */
.demo { display: grid; gap: 16px; }
.demo-tabs { display: flex; gap: 4px; margin: 0 auto; padding: 4px; max-width: 100%; overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--field); }
.demo-tabs button { flex: none; border-color: transparent; font-size: 14px; padding: 0 14px; gap: 8px; }
.demo-tabs button:hover { border-color: var(--rule); }
.demo-tabs .n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.demo-tabs [aria-selected=true] { border-color: var(--accent); color: var(--accent); font-weight: 600; background: var(--paper); }
.demo-tabs [aria-selected=true] .n { color: var(--accent); }
html:not(.js) .demo-tabs { display: none; }
.demo-captions { text-align: center; }
.demo-caption { margin: 0 auto; max-width: 40rem; min-height: 3em; color: var(--muted); }
.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.m-note { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- window ---------- */
.m-window { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--field); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 48px -24px rgba(0, 0, 0, .18); }
.m-chrome { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.m-dots { display: inline-flex; gap: 6px; flex: none; }
.m-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.m-url { flex: 1; min-width: 0; max-width: 32rem; margin: 0 auto; padding: 3px 12px; border-radius: 6px; background: var(--field); border: 1px solid var(--rule); font: 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.m-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: 580px; }

/* ---------- Kinetic screen (a neutral sketch of the ERP page the side panel sits next to) ---------- */
.k-pane { display: flex; flex-direction: column; min-width: 0; font-size: 13px; background: var(--field); }
.k-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.k-app { font-weight: 650; font-size: 15px; }
.k-tabs { display: flex; gap: 16px; color: var(--muted); }
.k-tabs .on { color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.k-body { padding: 18px; display: grid; gap: 18px; align-content: start; overflow: hidden; }
.k-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.k-fields div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px; }
.k-fields span { font-size: 11px; color: var(--muted); }
.k-fields b { font-weight: 600; font-variant-numeric: tabular-nums; }
.k-grid { border: 1px solid var(--rule); border-radius: 4px; }
.k-row { display: grid; grid-template-columns: 2.5rem 5.5rem minmax(0, 1fr) 4rem 6rem; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; transition: background-color .3s, box-shadow .3s; }
.k-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.demo[data-stage=answer] .k-row.late { background: var(--warn-bg); box-shadow: inset 3px 0 var(--warn); }

/* "Show me where": the Kinetic tab dims, the field is lit, and the step card sits beside it */
.k-lines-bar { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: -8px; }
.k-lines-title { font-weight: 650; }
.k-btn { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 4px; font-size: 12.5px; background: var(--field); position: relative; }
.k-tip { display: none; position: absolute; right: 0; top: calc(100% + 12px); z-index: 3; width: 240px; padding: 12px; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35); font-size: 12.5px; gap: 4px; }
.k-tip b { font-size: 14px; }
.k-tip-step { color: var(--muted); font-size: 11.5px; }
.k-tip > span:not(.k-tip-step):not(.k-tip-actions) { color: var(--muted); }
.k-tip-actions { display: flex; justify-content: space-between; margin-top: 6px; }
.k-tip-btn { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 6px; }
.k-tip-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.k-pane { position: relative; overflow: hidden; }
.demo[data-stage=guide] .k-newline { z-index: 2; outline: 2px solid var(--accent); outline-offset: 4px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .5); }
.demo[data-stage=guide] .k-tip { display: grid; }
.m-guide { margin-top: 4px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--field); }
.m-guide h3 { font-size: 13.5px; margin: 0 0 2px; }
.m-path { margin: 0; font-size: 12px; color: var(--muted); }
.m-path b { color: var(--ink); font-weight: 600; }
.m-guide ol { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--muted); }
.m-guide ol b { color: var(--ink); font-weight: 600; }
.m-guide-status { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* ---------- KinetiX side panel (same structure as /chat) ---------- */
.m-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--rule); background: var(--paper); font-size: 13.5px; line-height: 1.5; }
.m-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.m-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 14px; }
.m-brand .mark { width: 18px; height: 16px; }
.m-who { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-screen { padding: 4px 12px; border-bottom: 1px solid var(--rule); font: 11px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.m-panel[hidden] { display: none; }
.m-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px; }
.m-intro { justify-content: flex-start; padding-top: 6px; }
.m-intro h3 { font-size: 16px; margin: 12px 0 4px; }
.m-intro p { margin: 0 0 12px; color: var(--muted); }
.m-examples { display: grid; gap: 6px; }
.m-examples span { padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field); }
.m-turn { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.m-turn:last-child { border-bottom: 0; }
.m-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.m-you { font-weight: 550; }
.m-answer p { margin: 0 0 8px; }
.m-answer code, .m-card .what { font-family: var(--mono); font-size: 12px; }
.m-table { border: 1px solid var(--rule); background: var(--field); margin: 0 0 8px; overflow: hidden; }
.m-table table { font-size: 12px; }
.m-table th, .m-table td { padding: 4px 8px; white-space: nowrap; }
.m-sources { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--rule); }
.m-src { display: block; font: 11.5px/1.6 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.m-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.m-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--accent); }
.m-decided { font-size: 12.5px; color: var(--muted); }
.demo[data-outcome=declined] .m-ok, .demo:not([data-outcome=declined]) .m-declined { display: none; }

/* approval card at panel scale; the real buttons keep 44px targets */
.m-card { margin-top: 4px; padding: 10px 12px; }
.m-card h2 { font-size: 13.5px; }
.m-card .tablewrap { margin-top: 8px; }
.m-card th, .m-card td { padding: 4px 8px; font-size: 12px; }
.m-card td { overflow-wrap: anywhere; }
.m-card .check-result { font-size: 12.5px; margin-top: 8px; }
.m-card .actions { margin-top: 10px; }
.m-card .actions button { font-size: 13px; padding: 0 12px; }

/* drawn controls: look like the app's, do nothing */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 13px; color: var(--ink); white-space: nowrap; }
.m-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.m-btn.small { min-height: 30px; padding: 0 8px; font-size: 12px; }
.m-btn .ic { width: 16px; height: 16px; }
.m-composer { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--rule); background: var(--paper); box-shadow: 0 -6px 16px rgba(0, 0, 0, .04); }
.m-input { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field); white-space: nowrap; overflow: hidden; }
.m-input.empty { color: var(--muted); }
.m-input.typing::after { content: ""; width: 0; height: 1.1em; margin-left: 1px; border-right: 1.5px solid var(--ink); animation: m-caret 1s steps(1) infinite; }

/* ---------- motion: each stage settles in when shown; nothing moves for reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .m-panel:not([hidden]) .m-log > :last-child { animation: m-in .35s ease-out both; }
  .m-panel:not([hidden]) .m-live .m-src { animation: m-in .3s ease-out both; }
  .m-panel:not([hidden]) .m-live .m-src:nth-child(1) { animation-delay: .4s; }
  .m-panel:not([hidden]) .m-live .m-src:nth-child(2) { animation-delay: 1.2s; }
  .m-spin { animation: m-spin .9s linear infinite; }
}
@keyframes m-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-caret { 50% { border-color: transparent; } }

/* ---------- terminal (epi doctor) ---------- */
.m-term { margin: 0; }
.m-term-bar { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border-radius: 8px 8px 0 0; background: #16213a; color: #94a3b8; font-size: 12px; }
.m-term-bar .m-dots i { background: #2a3a55; }
.m-term pre { margin: 0; padding: 14px 16px; border-radius: 0 0 8px 8px; background: #0b1220; color: #e2e8f0; font: 12.5px/1.6 var(--mono); overflow-x: auto; }
.m-term figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.t-prompt { color: #38bdf8; }
.t-ok { color: #38bdf8; }
.t-warn { color: #f0c36b; }
.t-dim { color: #94a3b8; }

/* ---------- narrow screens: the side panel alone, like the chat on a phone ---------- */
@media (max-width: 900px) {
  .m-split { grid-template-columns: minmax(0, 1fr) 360px; }
  .k-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-row { grid-template-columns: 2rem 5rem minmax(0, 1fr) 5.5rem; }
  .k-row span:nth-child(4) { display: none; }
}
@media (max-width: 720px) {
  .m-split { grid-template-columns: minmax(0, 1fr); height: 540px; }
  .k-pane { display: none; }
  .m-side { border-left: 0; }
  .m-url { text-align: left; }
  .demo-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; }
  .demo-tabs button { padding: 0 10px; }
  .demo-caption { min-height: 4.5em; }
}
@media (max-width: 480px) {
  .demo-tabs { gap: 0; padding: 3px; }
  .demo-tabs button { padding: 0 9px; font-size: 13px; }
  .demo-tabs .n { display: none; }
  .m-term pre { font-size: 11px; padding: 12px; }
}