/* PayManzo — Warm Market. Developer extras: receipt code tabs + copy,
   chalkboard sandbox terminal, hand-drawn architecture diagram. */

/* ---------- receipt code viewer ---------- */
.wm-codeview .receipt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.wm-code-file { min-width: 0; overflow-wrap: anywhere; }
.wm-copy, .wm-term-btn {
  flex: none;
  min-height: var(--control-h);
  min-width: 64px;
  padding: 6px 14px;
  background: var(--cream);
  color: var(--cocoa);
  border: 2px solid var(--cocoa);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--cocoa);
  font: 800 var(--text-xs) var(--font-body);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce), background-color var(--dur-fast) ease;
}
.wm-copy:hover, .wm-term-btn:hover { transform: translateY(-2px); background: var(--ochre-soft); }
.wm-copy.is-done, .wm-term-btn.is-done { background: var(--leaf-soft); }
.wm-code-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
/* equal 2x2 grid once labels fit on one line (no ragged 3 + 1 wrap) */
@media (min-width: 480px) { .wm-code-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-code-tabs [role="tab"] {
  min-width: 0;
  min-height: var(--control-h);
  padding: 6px 12px;
  background: transparent;
  color: var(--cocoa-soft);
  border: 2px dashed var(--cocoa-soft);
  border-radius: var(--radius-pill);
  font: 700 var(--text-xs)/1.25 var(--font-code);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.wm-code-tabs [role="tab"]:hover { transform: translateY(-2px); }
.wm-code-tabs [role="tab"][aria-selected="true"] { background: var(--ochre); color: var(--cocoa); border: 2px solid var(--cocoa); }
.wm-code-panel pre { margin: var(--space-4) 0; }
.wm-code-panel pre:focus-visible { outline-offset: 2px; }
.receipt .f { color: var(--wood-dark); font-weight: 700; }
.wm-code-caption { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--cocoa-soft); font-style: italic; }

/* ---------- chalkboard sandbox ---------- */
.wm-term-row { max-width: calc(980px + 2 * var(--gutter)); margin-top: var(--section-tight); }
.wm-term-row > .wm-kicker { margin-bottom: var(--kicker-gap); }
.wm-term {
  position: relative;
  max-width: none;
  background: var(--cocoa);
  color: #EADFCF;
  border: 10px solid var(--wood-dark);
  border-radius: 26px;
  box-shadow: var(--shadow-warm), inset 0 0 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.wm-term-bar { display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--control-h) + 2 * var(--space-2)); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 2px dashed rgba(251, 244, 232, 0.25); }
.wm-term-dots { display: flex; gap: 6px; flex: none; }
.wm-term-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--clay); }
.wm-term-dots i:nth-child(2) { background: var(--ochre); }
.wm-term-dots i:nth-child(3) { background: var(--leaf); }
.wm-term-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 var(--text-xs) var(--font-code); color: var(--ochre-soft); }
/* phones: "(example)" drops to a second line instead of being cut to "(exa…" */
@media (max-width: 479px) { .wm-term-title { white-space: normal; line-height: 1.3; } .wm-term-title .wm-muted { display: block; } }
/* 320-399: the decorative window dots give their width to the title */
@media (max-width: 399px) { .wm-term-dots { display: none; } }
.wm-muted { color: #BFA995; font-weight: 600; }
.wm-term-tools { display: flex; gap: 6px; margin-left: auto; flex: none; }
.wm-term-btn { min-width: 44px; padding-inline: 10px; background: transparent; color: var(--cream); border-color: rgba(251, 244, 232, 0.6); box-shadow: none; }
.wm-term-btn:hover { background: rgba(251, 244, 232, 0.12); }
.wm-term-btn.is-done { background: var(--leaf); }
.wm-term-tabs { display: flex; gap: var(--space-2); padding: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.wm-term-tabs [role="tab"] {
  flex: 1 0 auto;
  min-height: var(--control-h);
  padding: 6px 16px;
  background: transparent;
  color: #EADFCF;
  border: 2px dashed rgba(251, 244, 232, 0.35);
  border-radius: var(--radius-pill);
  font: 800 var(--text-xs) var(--font-code);
  cursor: pointer;
}
@media (max-width: 399px) { /* all four method tabs fit at 320 without internal scroll */
  .wm-term-tabs { gap: var(--space-1); padding-inline: var(--space-2); }
  .wm-term-tabs [role="tab"] { padding-inline: var(--space-2); }
}
.wm-term-tabs [role="tab"][aria-selected="true"] { background: var(--ochre); color: var(--cocoa); border: 2px solid var(--ochre-soft); }
.wm-term-tabs [role="tab"]:focus-visible, .wm-term-btn:focus-visible, .wm-term-out:focus-visible { outline-color: var(--ochre-soft); }
.wm-term-out {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  height: calc(1.6em * 22 + 2 * var(--space-4));
  overflow: auto;
  white-space: pre;
  tab-size: 2;
  font: 500 clamp(0.74rem, 0.7rem + 0.25vw, 0.88rem)/1.6 var(--font-code);
  color: #F3E6D0;
  scrollbar-color: var(--wood) transparent;
}
.wm-term-out .tok-com { color: #BFA995; font-style: italic; }
.wm-term-out .tok-prompt { color: var(--ochre); }
.wm-term-out .tok-fn { color: var(--ochre-soft); font-weight: 700; }
.wm-term-out .tok-key { color: #F2B8A0; }
.wm-term-out .tok-str { color: #C9E0A8; }
.wm-term-out .tok-num { color: var(--ochre-soft); }
.wm-term-out .tok-pun { color: #BFA995; }
.wm-term-out .tok-ok { color: #C9E0A8; font-weight: 700; }
.wm-term-out .tok-hook { color: var(--ochre); font-weight: 700; }
.wm-term-out .wm-cursor { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.15em; background: var(--ochre-soft); }
@media (prefers-reduced-motion: no-preference) {
  .wm-term-out .wm-cursor { animation: wm-caret 1s steps(1) infinite; }
}
@keyframes wm-caret { 50% { opacity: 0; } }
.wm-term-panel { border-bottom: 2px dashed rgba(251, 244, 232, 0.25); } /* divider so the scrolling code never looks cut off */
.wm-term-plain {
  margin: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--cream);
  color: var(--cocoa);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-sm);
}
.wm-plain-tag { color: var(--clay-deep); font-weight: 800; }

/* ---------- architecture: hand-drawn flow ---------- */
.wm-arch-section { padding-bottom: 0; }
.wm-arch {
  margin: 0;
  padding: var(--card-pad-lg);
  background: var(--cream);
  border: var(--card-border);
  border-radius: var(--radius-soft);
  box-shadow: var(--card-shadow-lg-ochre);
}
.wm-arch-svg { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; }
.wm-arch-wide { display: none; max-width: 980px; }
.wm-arch-tall { max-width: 360px; }
@media (min-width: 768px) { .wm-arch-wide { display: block; } .wm-arch-tall { display: none; } }
.wm-arch-svg text { font: 800 15px var(--font-display); fill: var(--cocoa); text-anchor: middle; }
.wm-arch-svg text.sub { font: 700 11.5px var(--font-body); fill: var(--cocoa-soft); }
.wm-arch-svg text.sm { font-size: 13px; }
.wm-wires path { fill: none; stroke: var(--clay); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.wm-arrow-head { fill: none; stroke: var(--clay); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wm-node rect { fill: var(--cream); stroke: var(--cocoa); stroke-width: 2.5; }
.wm-node-core rect { fill: var(--ochre); }
.wm-node-rail rect { fill: var(--sand); }
.wm-node-hook rect { fill: var(--leaf-soft); }
.wm-node-core text:first-of-type { font-size: 19px; }
.wm-pk-leaf { fill: var(--leaf); stroke: var(--cocoa); stroke-width: 1.5; }
.wm-pk-clay { fill: var(--clay); stroke: var(--cocoa); stroke-width: 1.5; }
.wm-arch figcaption { max-width: var(--measure); margin: var(--space-5) auto 0; text-align: center; font-weight: 700; color: var(--cocoa-soft); }