/* Onboarding overlay (onboard.js): orange ring on the target, green ring on the result, dark tip, dock bottom left, chapter list above "?". */
.ob-root [hidden] { display: none !important; }
.ob-ring { position: fixed; z-index: 2147483000; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 2px #F97316, 0 0 0 6px rgba(249,115,22,.25); transition: left 180ms cubic-bezier(.23,1,.32,1), top 180ms cubic-bezier(.23,1,.32,1), width 180ms cubic-bezier(.23,1,.32,1), height 180ms cubic-bezier(.23,1,.32,1); }
.ob-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 14px; border: 2px solid rgba(249,115,22,.55); animation: ob-pulse 1.6s ease-out 3; }
.ob-ring.ok { box-shadow: 0 0 0 2px #1F9D55, 0 0 0 6px rgba(31,157,85,.22); }
.ob-ring.ok::after { border-color: rgba(31,157,85,.5); }
@keyframes ob-pulse { 0% { opacity: .9; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.08); } }
.ob-tip { position: fixed; z-index: 2147483003; width: 300px; background: #1D2433; color: #fff; border-radius: 10px; padding: 12px 14px; font: 13px/1.45 Geist, "Segoe UI", system-ui, sans-serif; box-shadow: 0 12px 32px rgba(17,24,39,.35); transition: left 180ms cubic-bezier(.23,1,.32,1), top 180ms cubic-bezier(.23,1,.32,1), opacity 150ms ease; }
/* onboard.js writes the step label in capitals; shown in sentence case */
.ob-tip .ob-n { font-size: 12px; color: #FDBA74; font-weight: 500; margin-bottom: 4px; text-transform: lowercase; }
.ob-tip .ob-n::first-letter { text-transform: uppercase; }
.ob-tip.ok .ob-n { color: #86EFAC; }
.ob-tip .ob-g { color: #C7CDD8; margin-bottom: 4px; }
.ob-tip .ob-w { color: #FDBA74; font-size: 12px; margin-top: 6px; }
.ob-tip b { color: #fff; font-weight: 600; }
.ob-tip .ob-a { position: absolute; width: 10px; height: 10px; background: #1D2433; transform: rotate(45deg); }
.ob-tip .ob-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ob-tip .ob-sp { flex: 1; }
.ob-tip button { height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.ob-tip button:disabled { opacity: .35; cursor: default; }
.ob-tip button.pri { background: #F97316; border-color: #F97316; color: #1D2433; font-weight: 600; }
.ob-tip.ok button.pri { background: #4ADE80; border-color: #4ADE80; }
.ob-dock { position: fixed; left: 12px; bottom: 12px; z-index: 2147483002; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E1E6EF; border-radius: 10px; padding: 6px 6px 6px 12px; font: 12px/1.4 Geist, "Segoe UI", system-ui, sans-serif; color: #1D2433; box-shadow: 0 6px 20px rgba(17,24,39,.12); }
.ob-dock b { font-weight: 600; }
.ob-dock .ob-k { color: #6B7280; font-variant-numeric: tabular-nums; }
.ob-dock button, .ob-list button { height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid #D7DCE5; background: #fff; color: #1D2433; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ob-dock button:hover, .ob-list button:hover { background: #F9FAFB; }
.ob-list { position: fixed; right: 12px; bottom: 52px; z-index: 2147483002; width: 340px; background: #fff; border: 1px solid #E1E6EF; border-radius: 10px; padding: 6px; font: 13px/1.45 Geist, "Segoe UI", system-ui, sans-serif; color: #1D2433; box-shadow: 0 12px 32px rgba(17,24,39,.18); }
.ob-list .ob-lh { padding: 6px 8px 8px; font-weight: 600; }
.ob-list .ob-li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; border-radius: 6px; }
.ob-list .ob-li:hover { background: #F3F4F6; }
.ob-list .ob-m { color: #1F9D55; font-weight: 600; text-align: center; }
.ob-list .ob-t small { margin-left: 4px; font-size: 11px; color: #6B7280; }
.ob-list .ob-r { color: #6B7280; font-size: 12px; text-align: right; max-width: 170px; }
@media (prefers-reduced-motion: reduce) {
  .ob-ring::after { animation: none; }
  .ob-ring, .ob-tip { transition: none; }
}
@media print { .ob-root { display: none; } }