/* PulsarERP — the product page: the drawn screens of each feature row. Every figure in them is fictional.
   The stage, the question bubble and the trail rows come from site.css and sections.css. */

.mock { display: grid; gap: var(--space-4); padding: var(--space-5); }
.mock > .ask { margin-block-end: var(--space-1); }

/* ---- 01 · The trail, and a document opened from it ---- */

.trail-answer { font-size: var(--fs-body); line-height: 1.7; }
.trace-meta { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; color: var(--paper-muted); }
.trace-rows li.has-doc { background: color-mix(in srgb, var(--paper-accent) 6%, transparent); }
.doc-link { color: var(--paper-accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.can-reveal .stage:not(.is-in) .trace-rows li { opacity: 0; transform: translateY(6px); }

.trail-stage { padding-block-end: 9rem; }
.doc-card {
  position: absolute; inset-inline-end: var(--space-5); bottom: -2.5rem;
  width: min(16rem, 70%);
  padding: var(--space-4);
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper-accent) 35%, var(--paper-line)), 0 30px 60px -30px rgb(0 0 0 / 0.5);
  font-size: var(--fs-small);
  transition: opacity 700ms var(--ease-out) 900ms, transform 700ms var(--ease-out) 900ms;
}
.can-reveal .stage:not(.is-in) .doc-card { opacity: 0; transform: translateY(14px); }
.doc-head { display: flex; align-items: center; gap: var(--space-2); padding-block-end: var(--space-3); border-block-end: 1px solid var(--paper-line); font-weight: 600; }
.doc-head svg { color: var(--paper-accent); }
.doc-head .chip { margin-inline-start: auto; }
.doc-card dl { display: grid; gap: var(--space-1); margin: var(--space-3) 0; }
.doc-card dl div { display: flex; justify-content: space-between; gap: var(--space-3); }
.doc-card dt { color: var(--paper-muted); }
.doc-card dd { margin: 0; }
.doc-card .num { font-family: var(--font-mono); font-weight: 500; }
.doc-foot { font-size: var(--fs-label); color: var(--paper-muted); }

/* ---- 02 · One signed definition ---- */

.def-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-block-end: var(--space-3); border-block-end: 1px solid var(--paper-line); }
.def-head > svg { color: var(--paper-accent); font-size: 1.15rem; }
.def-head > span:first-of-type { color: var(--paper-muted); }
.def-head > b { font-family: var(--font-display); font-size: var(--fs-answer); font-weight: 600; }
.def-head .chip { margin-inline-start: auto; }
.mock .chip-signed { background: color-mix(in srgb, var(--ok) 13%, var(--paper)); color: var(--ok); }
.def-rule { font-size: var(--fs-body); }
.def-statuses { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.def-statuses li { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--paper-line); }
.def-statuses li.is-in { border-color: color-mix(in srgb, var(--ok) 40%, var(--paper-line)); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); }
.def-statuses li.is-in svg { color: var(--ok); }
.def-statuses li.is-out { color: var(--paper-muted); text-decoration: line-through; }
.def-history { list-style: none; padding: var(--space-3) 0 0; border-block-start: 1px dashed var(--paper-line); display: grid; gap: var(--space-2); font-size: var(--fs-small); }
.def-history li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); color: var(--paper-muted); }
.def-history li:first-child { color: var(--paper-ink); }
.def-history .num { font-family: var(--font-mono); font-size: var(--fs-label); padding-block-start: 0.15em; }
.def-history small { display: block; font-size: var(--fs-label); color: var(--paper-muted); }

/* ---- 03 · What was counted, in which currency, and how much of the month ---- */

.period { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); font-size: var(--fs-small); color: var(--paper-muted); }
.period-bar { height: 6px; border-radius: 3px; background: var(--paper-track); overflow: hidden; }
.period-bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--paper-accent); transform-origin: 100% 50%; transition: transform 900ms var(--ease-out) 300ms; }
.can-reveal .stage:not(.is-in) .period-bar i { transform: scaleX(0); }
.period .num { font-family: var(--font-mono); font-size: var(--fs-label); }

.sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--paper-line); border-radius: var(--radius-sm); }
.sums div { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); }
.sums div + div { border-inline-start: 1px solid var(--paper-line); }
.sums b { justify-self: start; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.sums small { font-size: var(--fs-label); color: var(--paper-muted); }

.mock-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; font-size: var(--fs-small); color: var(--paper-muted); }
.mock-note svg { margin-block-start: 0.25em; color: var(--paper-accent); }
.mock-note.is-out svg { color: var(--paper-muted); }

/* ---- 04 · A file in, a new file out ---- */

.ask-file { display: grid; gap: var(--space-2); }
.attach { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--fs-label); }
.attach svg { color: var(--paper-accent); }
.attach small { color: var(--paper-muted); }
.download {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--paper-accent) 35%, var(--paper-line)); border-radius: var(--radius-sm);
}
.download > svg { font-size: 1.5rem; color: var(--paper-accent); }
.download span { display: grid; min-width: 0; }
.download b { justify-self: start; font-size: var(--fs-small); overflow-wrap: anywhere; }
.download small { font-size: var(--fs-label); color: var(--paper-muted); }
.download .dl-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--paper-accent); color: var(--paper); font-size: var(--fs-label); font-weight: 600; }
.src-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--fs-label); color: var(--paper-muted); }
.src { padding: 1px var(--space-2); border-radius: var(--radius-pill); font-weight: 500; }
.src-file { background: color-mix(in srgb, var(--paper-accent) 12%, var(--paper)); color: var(--paper-accent); }
.src-erp { background: color-mix(in srgb, var(--ok) 13%, var(--paper)); color: var(--ok); }

/* ---- 05 · Three tiles: a pinned board, a phone, a remembered preference ---- */

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.trio .tile { grid-column: auto; }
.trio .tile:nth-child(2) { transition-delay: 90ms; }
.trio .tile:nth-child(3) { transition-delay: 180ms; }
.trio .mock { padding: var(--space-4); }

.pins { display: grid; gap: var(--space-3); }
.pin { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--paper-line); border-radius: var(--radius-sm); }
.pin .board-head { font-size: var(--fs-label); }
.pin-bars { display: grid; gap: 5px; }
.pin-bars i { display: block; height: 6px; width: var(--v); border-radius: 3px; background: color-mix(in srgb, var(--paper-accent) var(--k, 60%), var(--paper)); transform-origin: 100% 50%; transition: transform 900ms var(--ease-out) 300ms; }
.can-reveal .tile:not(.is-in) .pin-bars i { transform: scaleX(0); }

.phone {
  justify-self: center; width: min(15rem, 100%);
  padding: var(--space-2); border-radius: 1.6rem;
  background: var(--paper-ink); box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.6);
}
.phone-screen { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-5); border-radius: 1.2rem; background: var(--paper); color: var(--paper-ink); }
.phone-top { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-label); color: var(--paper-muted); }
.phone-top b { display: inline-flex; align-items: center; gap: 4px; color: var(--paper-ink); font-family: var(--font-text); }
.phone-top b svg { color: var(--paper-accent); }
.phone .ask { max-width: 92%; font-size: var(--fs-label); }
.phone-answer { font-size: var(--fs-label); line-height: 1.55; }
.phone-answer strong { color: var(--paper-accent); font-weight: 600; }
.phone .mini-bars { height: 2rem; }

.remember { display: grid; gap: var(--space-3); }
.remember .ask { font-size: var(--fs-label); }
.remember-q { font-size: var(--fs-small); }
.remember-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice { padding: 2px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--paper-line); font-size: var(--fs-label); }
.choice.is-primary { border-color: var(--paper-accent); background: var(--paper-accent); color: var(--paper); font-weight: 600; }

/* ---- Narrow screens ---- */

@media (max-width: 64rem) {
  .trio { grid-template-columns: 1fr; }
  .trio .tile { max-width: 34rem; }
}
@media (max-width: 40rem) {
  .trail-stage { padding-block-end: var(--space-5); }
  .doc-card { position: relative; inset: auto; width: auto; margin: var(--space-4) var(--space-4) 0; }
  .mock { padding: var(--space-4); }
  .sums b { font-size: 1.1rem; }
  .sums div { padding: var(--space-2) var(--space-3); }
}