/* Shared by the public share/embed pages and the read-only view in the app. */
:root {
  --g-ink: #0f172a;
  --g-text: #334155;
  --g-muted: #64748b;
  --g-line: #e2e8f0;
  --g-bg: #f8fafc;
  --g-card: #ffffff;
  --g-accent: #0e7490;
  --g-accent-soft: #ecfeff;
  --g-alert: #dc2626;
  --g-alert-soft: #fef2f2;
  --g-marker: #f97316;
}

.g-public, .g-embed {
  margin: 0;
  background: var(--g-bg);
  color: var(--g-text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.g-embed { background: var(--g-card); }

.g-doc { max-width: 860px; margin: 0 auto; padding: 32px 16px 64px; }
.g-embed .g-doc { padding: 20px 16px 32px; }

.g-header { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 24px; }
.g-header h1 { margin: 0 0 6px; color: var(--g-ink); font-size: 28px; line-height: 1.2; }
.g-desc { margin: 0 0 6px; }
.g-meta { margin: 0; color: var(--g-muted); font-size: 13px; }
.g-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.g-btn {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--g-line); border-radius: 8px;
  background: var(--g-card); color: var(--g-ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.g-btn:hover { border-color: var(--g-accent); color: var(--g-accent); }

.g-heading { color: var(--g-ink); font-size: 21px; margin: 36px 0 12px; }

.g-step { background: var(--g-card); border: 1px solid var(--g-line); border-radius: 12px; padding: 18px; margin: 0 0 16px; }
.g-step-head { display: flex; gap: 12px; align-items: flex-start; }
.g-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--g-accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.g-step-text { min-width: 0; }
.g-title { margin: 2px 0 0; color: var(--g-ink); font-weight: 600; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.g-body { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.g-shot { position: relative; margin-top: 14px; border: 1px solid var(--g-line); border-radius: 8px; overflow: hidden; line-height: 0; }
.g-shot img { width: 100%; height: auto; display: block; }
.g-marker {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid var(--g-marker); background: rgb(249 115 22 / 0.22);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.65); pointer-events: none;
}

.g-callout { border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; border-left: 4px solid var(--g-accent); background: var(--g-accent-soft); color: var(--g-ink); white-space: pre-wrap; }
.g-callout strong { color: var(--g-accent); }
.g-callout.g-alert { border-left-color: var(--g-alert); background: var(--g-alert-soft); }
.g-callout.g-alert strong { color: var(--g-alert); }

.g-footer { margin-top: 40px; text-align: center; color: var(--g-muted); font-size: 12px; }
.g-missing { text-align: center; padding-top: 80px; }
.g-missing h1 { color: var(--g-ink); }

@media print {
  .g-actions, .g-footer { display: none; }
  .g-step { break-inside: avoid; }
}