/* New-doctor tips (2026-10-02): static/js/new-doctor-tips.js. One fixed palette
   on purpose (a tip is a note pinned over the page and reads the same on every
   roast theme). Nothing here targets an app class; everything is .nd-*. */
.nd-tip, .nd-inline {
    --nd-bg: #1E140E; --nd-edge: #4D3B31; --nd-ink: #FFF7EE; --nd-body: #EBE1D7;
    --nd-mute: #B9A88F; --nd-teal: #4CC4B4; --nd-amber: #E69A4C;
    --nd-font: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    font-family: var(--nd-font); box-sizing: border-box;
}
.nd-tip { position: fixed; z-index: 2147482900; width: min(300px, calc(100vw - 16px)); padding: 11px 13px 9px;
    background: var(--nd-bg); color: var(--nd-body); border: 1px solid var(--nd-edge); border-top: 2px solid var(--nd-teal);
    border-radius: 6px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); animation: nd-in .2s ease-out both; }
.nd-tip.above { border-top: 1px solid var(--nd-edge); border-bottom: 2px solid var(--nd-teal); }
.nd-title { font: 600 14px/1.3 var(--nd-font); color: var(--nd-ink); margin-bottom: 4px; }
.nd-body { font: 400 13px/1.45 var(--nd-font); }
.nd-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(77, 59, 49, .7); }
.nd-count { margin-right: auto; font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--nd-mute); }
.nd-btn { font: 600 12px/1 var(--nd-font); padding: 6px 10px; border-radius: 4px; cursor: pointer;
    color: #1E140E; background: var(--nd-teal); border: 1px solid var(--nd-teal); }
.nd-btn.ghost { color: var(--nd-mute); background: transparent; border-color: var(--nd-edge); }
.nd-btn:focus-visible { outline: 2px solid var(--nd-amber); outline-offset: 2px; }
.nd-arrow { position: absolute; left: var(--nd-ax, 50%); top: -7px; width: 12px; height: 12px; margin-left: -6px;
    background: var(--nd-bg); border-left: 1px solid var(--nd-edge); border-top: 2px solid var(--nd-teal); transform: rotate(45deg); }
.nd-tip.above .nd-arrow { top: auto; bottom: -7px; border: 0; border-right: 1px solid var(--nd-edge); border-bottom: 2px solid var(--nd-teal); }
.nd-inline { display: block; margin: 4px 0 6px; padding: 3px 8px; border-left: 2px solid var(--nd-teal);
    font: 400 12px/1.4 var(--nd-font); color: var(--nd-mute); background: transparent; }
@keyframes nd-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nd-tip { animation: none; } }