/* Wireframe-specific styles, additive to book.css */
.wf-page {
  padding: 80px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--ink-100);
}
.wf-page h2 { margin-bottom: 8px; }
.wf-page .meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px;
}
.wf-pair-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 1100px) { .wf-pair-grid { grid-template-columns: 1fr; } }

.wf-device {
  background: var(--slate-100);
  border: 1px solid var(--slate-300);
  border-radius: 14px;
  overflow: hidden;
}
.wf-device .wf-chrome {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  background: var(--slate-200);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-700);
  border-bottom: 1px solid var(--slate-300);
}
.wf-device .wf-body {
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-700);
}

/* primitives */
.b { border: 1px solid var(--slate-400); background: #fff; padding: 8px; }
.b.f { background: var(--slate-200); border-color: var(--slate-400); }
.b.dk { background: var(--slate-700); color: #fff; border-color: var(--slate-700); }
.b.dash { border-style: dashed; background: var(--slate-50); color: var(--slate-500); }
.b.gray { background: var(--slate-300); border-color: var(--slate-400); }
.b.img { background: repeating-linear-gradient(45deg, var(--slate-200) 0 8px, var(--slate-300) 8px 16px); display: grid; place-items: center; color: var(--slate-700); }
.b.thick { border-width: 2px; }
.b.tall { min-height: 100px; }
.b.short { padding: 4px 8px; }
.b.center { text-align: center; }
.b.cta { background: var(--slate-700); color: #fff; padding: 10px 14px; text-align: center; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.b.cta.alt { background: #fff; color: var(--slate-700); border: 1px solid var(--slate-700); }
.b.tag { display: inline-block; padding: 2px 6px; font-size: 10px; }
.row { display: flex; gap: 8px; }
.row.tight { gap: 4px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.h1-line { font-size: 18px; font-weight: 700; color: var(--slate-900); letter-spacing: -.01em; line-height: 1.1; font-family: var(--font-sans); }
.h2-line { font-size: 14px; font-weight: 600; color: var(--slate-700); font-family: var(--font-sans); }
.cap { font-size: 10px; color: var(--slate-500); letter-spacing: .04em; text-transform: uppercase; }
.lbl { font-size: 10px; color: var(--slate-500); }
.stub-line { display: flex; flex-direction: column; gap: 3px; }
.stub-line > div { height: 6px; background: var(--slate-300); border-radius: 1px; }
.stub-line > div:nth-child(2) { width: 90%; }
.stub-line > div:nth-child(3) { width: 70%; }
.stub-line > div:nth-child(4) { width: 50%; }
.dot-3 { display: inline-flex; gap: 4px; }
.dot-3 i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-400); }
.dot-3 i.on { background: var(--slate-700); }

.note-list { font-size: 13.5px; line-height: 1.45; }
.note-list li { margin-bottom: 6px; }
.note-list .h { color: var(--usc-navy-800); font-weight: 600; }

.wf-grid-stack { display: flex; flex-direction: column; gap: 60px; }

.annot {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  padding: 18px 20px;
}
.annot h5 { color: var(--usc-navy-800); margin-bottom: 8px; }
.annot ul { margin: 0; padding-left: 1.1em; font-size: 13.5px; }
.annot .pers { display: inline-block; padding: 2px 8px; background: var(--usc-blue-50); color: var(--usc-navy-700); border-radius: 3px; font-size: 11px; font-family: var(--font-mono); margin-right: 4px; }

/* desktop device frame */
.wf-device.desktop {
  max-width: 100%;
}
.wf-device.desktop .wf-body { padding: 14px; gap: 10px; }