/* Inline guidance inside the existing reading surface. No overlay or dock rules. */
.office-flow-guide {
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:start;
  gap:12px;
  margin:12px 0;
  padding:12px 0;
  color:var(--ink);
}
.office-flow-guide:not(:has(>.office-flow-guide-art)) {grid-template-columns:minmax(0,1fr)}
.office-flow-guide-art {display:block;width:48px;height:72px;object-fit:contain;align-self:start}
.office-flow-guide-body {min-width:0;max-width:64ch}
.office-flow-guide-title {margin:0 0 4px;font-size:.9375rem;line-height:1.4;font-weight:600;color:inherit}
.office-flow-guide-copy {margin:0;font-size:.875rem;line-height:1.5;color:var(--muted)}
.office-flow-guide-action {margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.office-flow-guide-details {margin-top:8px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.office-flow-guide-details>summary {width:fit-content;max-width:100%;cursor:pointer;color:var(--ink);padding:7px 0}
.office-flow-guide-detail-body {padding:4px 0 0;overflow-wrap:anywhere}
.office-flow-guide-detail-body>p {margin:0 0 8px}
.office-flow-guide-details>summary:focus-visible {outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
@media(max-width:700px) {
  .office-flow-guide {gap:10px}
  .office-flow-guide-action>:is(button,a),.office-flow-guide-details>summary {min-height:44px;box-sizing:border-box}
  .office-flow-guide-details>summary {display:list-item;padding:11px 0}
}