/* =============================================================================
   MUSEFEE - design tokens
   Palette from the approved avatar: cream body, tan card, deep ink linework,
   gold coin. Type: Nunito (friendly rounded display/body) + Space Mono
   (ledger/CA readouts, the "receipt" register). Motion idiom: one SVG path
   the coin literally travels along via requestAnimationFrame + getPointAtLength,
   nothing else on the page uses a competing motion language.
   ============================================================================= */
:root{
  --cream:        #F6ECD8;
  --cream-deep:   #EFE0BF;
  --tan:          #E4CE9E;
  --tan-line:     #C9A968;
  --ink:          #241A10;
  --ink-soft:     #5B4A32;
  --gold:         #F0B94A;
  --gold-deep:    #C4841E;
  --gold-rim:     #8F5C10;
  --blush:        #F3A9A0;
  --paper:        #FBF4E4;

  --font-display: 'Nunito', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --space-1: 6px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

#boot-error-banner{
  position:fixed; top:0; left:0; right:0; z-index:99999;
  background:#B3261E; color:#fff; font-family: var(--font-mono);
  font-size:13px; padding:8px 12px; text-align:center;
}
#boot-error-banner:empty{ display:none; }

button{ font-family: inherit; }

/* ---------------------------------------------------------------------------
   App shell - one fixed screen, no scroll on ordinary sizes, no nav.
   --------------------------------------------------------------------------- */
.app{
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(10px, 2vh, 22px);
  padding: clamp(14px, 2.6vh, 26px) clamp(16px, 4vw, 40px);
}

.topbar{
  width:100%;
  max-width: 880px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap: 10px; }
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  object-fit: cover;
}
.brand-name{
  font-weight:900; font-size: 16px; letter-spacing: 0.04em;
}
.brand-ticker{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  border: 1px solid var(--tan-line);
  border-radius: 999px;
  padding: 2px 8px;
}
.x-link{
  display:flex; align-items:center; justify-content:center;
  width: 40px; height:40px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.x-link:hover{ transform: translateY(-2px); background: var(--gold); }
.x-icon{ width:22px; height:22px; }
.edge-body{ fill: var(--gold-deep); stroke: var(--ink); stroke-width:1.6; }
.edge-reed{ stroke: var(--ink); stroke-width:1.1; opacity:0.55; }

/* ---------------------------------------------------------------------------
   Stage - the whole point of the page.
   --------------------------------------------------------------------------- */
.stage-wrap{
  flex: 1;
  min-height: 0;
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: clamp(4px, 1.4vh, 12px);
}

.stage-copy{ text-align:center; max-width: 560px; }
.eyebrow{
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-rim);
}
.stage-copy h1{
  margin:0;
  font-size: clamp(19px, 3.4vw, 30px);
  line-height: 1.18;
  font-weight: 900;
}
.stage-sub{
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  text-align:center;
  max-width: 380px;
}

.stage{
  position: relative;
  width: min(84vw, 52vh, 520px);
  aspect-ratio: 1 / 1;
  touch-action: manipulation;
}
.loop-svg{ width:100%; height:100%; display:block; overflow: visible; }

.loop-path{
  fill:none;
  stroke: var(--tan-line);
  stroke-width: 2.5;
  stroke-dasharray: 3 12;
  stroke-linecap: round;
  opacity: 0.85;
}

.frame-halo{
  fill: var(--paper);
  stroke: var(--tan-line);
  stroke-width: 10;
}
.frame-ring{
  fill:none;
  stroke: var(--ink);
  stroke-width: 4;
}

.paw-marker{ opacity: 0.92; }
.paw-pad, .paw-toe{ fill: var(--tan); stroke: var(--ink); stroke-width: 2.2; }

/* CA tag - hangs off the loop at its exact midpoint, opposite the pocket. */
.tag-string{ stroke: var(--ink-soft); stroke-width: 2; }
.tag-body{
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
  transform-origin: 300px 60px;
  animation: tag-sway 4.2s ease-in-out infinite;
}
.tag-hole{ fill: var(--cream); stroke: var(--ink); stroke-width: 2; }
.tag-kicker{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  fill: var(--ink-soft);
}
.tag-text{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--ink);
}
@keyframes tag-sway{
  0%, 100%{ transform: rotate(-2.5deg); }
  50%{ transform: rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce){
  .tag-body{ animation: none; }
}

/* The traveling coin - position/rotation set every frame by app.js */
.coin{ will-change: transform; }
.coin-body{ fill: var(--gold); }
.coin-rim{ fill:none; stroke: var(--ink); stroke-width: 3; }
.coin-inner{ fill:none; stroke: var(--gold-rim); stroke-width: 1.6; stroke-dasharray: 2 3; }
.coin-shine{ stroke: var(--paper); stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
.coin.is-boosted .coin-body{ filter: drop-shadow(0 0 8px rgba(240,185,74,0.85)); }

/* Pocket button - buy control AND copy gesture, sits where the loop dips in. */
.pocket-btn{
  position:absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 2px;
  width: clamp(64px, 15vw, 84px);
  padding: 4px 2px 6px;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: var(--radius-md) var(--radius-md) 22px 22px;
  cursor: pointer;
  transition: transform 160ms ease;
}
.pocket-btn:hover{ transform: translate(-50%, -50%) translateY(-3px); }
.pocket-btn:active{ transform: translate(-50%, -50%) scale(0.96); }
.pocket-icon{ width: 70%; }
.pocket-shape{ fill: var(--tan); stroke: var(--ink); stroke-width: 4; }
.pocket-stitch{ stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; opacity: 0.7; }
.pocket-slot{ fill: var(--gold-rim); opacity: 0.35; }
.pocket-label{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.pocket-btn.is-puffing{ animation: pocket-puff 480ms ease; }
@keyframes pocket-puff{
  0%{ transform: translate(-50%, -50%) scale(1); }
  35%{ transform: translate(-50%, -50%) scale(1.22, 0.86); }
  60%{ transform: translate(-50%, -50%) scale(0.92, 1.1); }
  100%{ transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .pocket-btn.is-puffing{ animation: none; }
}

.fee-float{
  position:absolute;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--gold-rim);
  pointer-events:none;
  animation: fee-float-up 900ms ease-out forwards;
}
@keyframes fee-float-up{
  0%{ opacity:0; transform: translate(-50%, -50%) translateY(0); }
  20%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%, -50%) translateY(-46px); }
}

/* ---------------------------------------------------------------------------
   Ledger readout
   --------------------------------------------------------------------------- */
.ledger{ text-align:center; }
.ledger-label{
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ledger-amount{
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1;
  color: var(--ink);
}
.ledger-cents{ color: var(--gold-rim); }
.ledger-note{
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.footer{
  width:100%;
  max-width: 880px;
  display:flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
}
.canary{ color: var(--gold-rim); }
.canary.is-ok{ color: var(--gold-rim); }

/* ---------------------------------------------------------------------------
   Scroll depth - content below the mechanic (23.09 escalation: more sections,
   more reading, hero mechanic stays the first thing seen). Same card language
   as the stage: flat fills, thick ink borders, no gradients, no new colors.
   --------------------------------------------------------------------------- */
.content-section{
  width: 100%;
  max-width: 640px;
  padding-top: clamp(20px, 4vh, 40px);
}
.section-inner{ width:100%; }
.kicker{
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-rim);
}
.content-section h2{
  margin: 0 0 10px;
  font-size: clamp(20px, 3vw, 27px);
  line-height: 1.22;
  font-weight: 900;
}
.section-lede{
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  max-width: 56ch;
}

/* Runbook - dark printout card, one log line per step. */
.runbook-log{
  list-style: none;
  margin: 0 0 14px;
  padding: var(--space-3);
  background: var(--ink);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.runbook-log li{
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.log-index{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  flex: none;
  width: 20px;
}
.log-text{
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cream);
}
.runbook-foot{
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Field note - paper card, quote-mark ornament, plain prose. */
.field-note-card{
  position: relative;
  background: var(--paper);
  border: 2px solid var(--tan-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
}
.field-note-card::before{
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 84px;
  color: var(--tan);
  line-height: 1;
  pointer-events: none;
}
.field-note-card h2{ position: relative; }
.field-note-card p{
  position: relative;
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.62;
  max-width: 62ch;
}
.field-note-card p:last-child{ margin-bottom: 0; }

/* FAQ - native details/summary, zero JS. */
.faq-list{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--tan-line);
}
.faq-item{ border-bottom: 1px solid var(--tan-line); }
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 30px 14px 2px;
  font-weight: 800;
  font-size: 14.5px;
  position: relative;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  position: absolute;
  right: 2px;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--gold-rim);
  transition: transform 160ms ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{
  margin: 0 0 16px;
  padding-right: 24px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Roster - comparison table against other agents on the same framework. */
.roster-table-wrap{
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.roster-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  font-size: 13px;
}
.roster-table th{
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
}
.roster-table td{
  padding: 12px 14px;
  border-top: 1px solid var(--tan-line);
  color: var(--ink-soft);
}
.roster-table tr.roster-row-self td{
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}
.roster-foot{
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Responsive: verified down to 360px and up past 1440px.
   --------------------------------------------------------------------------- */
@media (max-width: 400px){
  .stage-copy h1{ font-size: 18px; }
  .footer{ justify-content:center; text-align:center; }
  .field-note-card{ padding: 20px; }
  .field-note-card::before{ font-size: 60px; }
  .runbook-log{ padding: var(--space-2); }
  .roster-table{ min-width: 0; font-size: 12px; }
  .roster-table th, .roster-table td{ padding: 8px 10px; }
}
@media (min-width: 920px){
  .app{ gap: 18px; }
  .stage{ width: min(46vh, 560px); }
}