/* ============================================================
   Documentation shell — wraps every story page.
   Left: rendered mock (phone for MOOO, browser for consoles).
   Right: spec panel (story, user story, ACs, design notes).
   ============================================================ */
body.doc{
  margin:0;font-family:var(--font-body);background:var(--n-100);
  color:var(--text-primary);-webkit-font-smoothing:antialiased;
}
.doc-wrap{max-width:1280px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-16)}

/* header */
.doc-head{display:flex;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
.doc-head .titles{flex:1;min-width:260px}
.surface-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill);
  color:#fff;margin-bottom:var(--space-3)}
.surface-badge.mooo{background:#2CBAB9}
.surface-badge.merchant{background:#0F766E}
.surface-badge.ops{background:#4F46E5}
.surface-badge .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.doc-head h1{margin:0;font-size:var(--text-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.doc-head .key{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary)}
.doc-head .epic{margin-top:6px;font-size:var(--text-sm);color:var(--text-tertiary)}
.doc-head .home{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);text-decoration:none;
  border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:8px 16px;white-space:nowrap}
.doc-head .home:hover{background:var(--surface-raised)}

/* layout: mock + spec */
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--space-8);align-items:start}
@media (max-width:1100px){.doc-grid{grid-template-columns:1fr}}
.stage{background:
   radial-gradient(120% 120% at 50% 0%, #fff 0%, var(--n-100) 60%);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:var(--space-10) var(--space-6);display:flex;justify-content:center;min-height:520px;
  box-shadow:var(--shadow-sm)}
.stage.ledger{background:var(--n-100)}

/* spec panel */
.spec{position:sticky;top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.spec .block{background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.spec h3{margin:0 0 var(--space-3);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-tertiary)}
.userstory{font-size:var(--text-md);line-height:1.5}
.userstory b{color:var(--brand-pressed)}
.ac-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.ac-list li{display:flex;gap:var(--space-3);font-size:var(--text-sm);line-height:1.45}
.ac-list .tag{flex:none;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--brand-pressed);
  background:var(--brand-tint);border-radius:6px;padding:2px 6px;height:fit-content}
.notes{font-size:var(--text-sm);line-height:1.55;color:var(--text-secondary)}
.notes li{margin-bottom:var(--space-2)}
.scopechips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.scopechips span{font-size:var(--text-xs);font-weight:600;background:var(--surface-sunken);
  color:var(--text-secondary);border-radius:var(--radius-pill);padding:5px 10px}

/* prev / next */
.doc-nav{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-8)}
.doc-nav a{flex:1;display:flex;flex-direction:column;gap:3px;text-decoration:none;background:var(--surface-raised);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 18px;color:var(--text-primary);
  transition:border-color var(--dur-fast) var(--ease)}
.doc-nav a:hover{border-color:var(--brand)}
.doc-nav a.next{text-align:right;align-items:flex-end}
.doc-nav .lbl{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.doc-nav .ttl{font-size:var(--text-sm);font-weight:600}
.doc-nav a.disabled{opacity:.4;pointer-events:none}

/* ---- device frames ---- */
.phone{width:390px;max-width:100%;background:#000;border-radius:46px;padding:11px;
  box-shadow:var(--shadow-xl),0 0 0 2px #1a1a1a;position:relative}
.phone .screen{background:var(--surface-bg);border-radius:36px;overflow:hidden;position:relative;height:780px;display:flex;flex-direction:column}
.phone .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:130px;height:30px;
  background:#000;border-radius:0 0 18px 18px;z-index:40}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:12px 26px 4px;
  font-size:13px;font-weight:700;color:var(--text-primary);flex:none}
.statusbar .ind{display:flex;gap:6px;align-items:center;font-size:12px}

.browser{width:100%;background:var(--surface-raised);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--border-subtle)}
.browser .chrome{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--n-100);
  border-bottom:1px solid var(--border-subtle)}
.browser .dots{display:flex;gap:7px}
.browser .dots i{width:11px;height:11px;border-radius:50%;display:block}
.browser .dots i:nth-child(1){background:#FF5F57}.browser .dots i:nth-child(2){background:#FEBC2E}.browser .dots i:nth-child(3){background:#28C840}
.browser .url{flex:1;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  padding:6px 14px;font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono)}