/* What needs a provider's attention, on any page (static/attention.js): the card for a call that rings, the "Sound on" button and the toast for new exams. The same in both looks (the old look's colors come from the same tokens). Tokens only. */
.attention { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 0 var(--space-4, 1rem) var(--space-4, 1rem); pointer-events: none; }
.attention > * { pointer-events: auto; }
.attn-ring[hidden], .attn-sound[hidden], .attn-tab[hidden] { display: none; }

/* the card: a call is ringing and this is not the Video Call page, so it comes to the person (v1 showed a modal "New call" on every page) */
.attn-ring, .attn-tab { position: fixed; inset: 5rem 0 auto 0; margin-inline: auto; width: min(34rem, calc(100% - 2rem)); padding: 1.3rem 1.5rem; border: 2px solid var(--color-live-on); border-radius: var(--radius-lg, .75rem); background: var(--color-surface); color: var(--color-text); box-shadow: 0 10px 34px rgb(0 0 0 / .3); }
.attn-ring h2, .attn-tab h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: 1.45rem; font-weight: 600; }
.attn-ring p, .attn-tab p { margin: 0 0 .6rem; }
.attn-ring b { font-variant-numeric: tabular-nums; }
.attn-meta { color: var(--color-text-muted); font-size: .95rem; }
.attn-phone { animation: attn-wiggle 1s ease-in-out infinite; }
@keyframes attn-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .attn-phone { animation: none; } }
.attn-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem; margin-top: .9rem; }
.attn-actions form { margin: 0; }
.attn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 6.5rem; padding: .6rem 1.3rem; border: 0; border-radius: var(--radius-md, .5rem); font: inherit; font-weight: 600; cursor: pointer; color: var(--color-live-fg); }
.attn-btn.ok { background: var(--color-live-on); }
.attn-btn.bad { background: var(--color-live-off); }
.attn-btn:hover { filter: brightness(1.1); }
.attn-btn:focus-visible, .attn-sound:focus-visible, .attn-toast a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* "Sound on": shown while the person is taking calls and the browser has not yet allowed sound */
.attn-sound { padding: .55rem 1.1rem; min-height: 2.75rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-card, 0 2px 8px rgb(0 0 0 / .18)); }
.attn-sound:hover { background: var(--color-surface-2); }

/* the toast: always in the page (a live region that is there before it speaks), nothing to see while it is empty */
.attn-toast { max-width: min(30rem, 100%); padding: .75rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md, .5rem); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card, 0 2px 8px rgb(0 0 0 / .18)); }
.attn-toast:empty { padding: 0; border: 0; box-shadow: none; max-height: 0; overflow: hidden; }
.attn-toast a { margin-left: .4rem; color: var(--color-accent-text, var(--color-accent)); font-weight: 600; }

/* the count pills of the old menu: empty ones are hidden, as in the old app (a pill with 0 was not drawn) */
.old-badge[hidden] { display: none; }

/* a provider in a live call: the entries v1 took out of the menu for its length (the stylesheet is the whole of the hiding; static/attention.js and a live visit page set the attribute) */
html[data-in-call="1"] [data-call-lock] { display: none; }

/* the provider agreement box (templates/_visits_agreement.html): v1's "Signature Required" modal; a real dialog, the page behind it dimmed */
.agreement-gate { width: min(34rem, calc(100% - 2rem)); padding: 1.4rem 1.6rem; border: 2px solid var(--color-border); border-radius: var(--radius-lg, .75rem); background: var(--color-surface); color: var(--color-text); box-shadow: 0 10px 34px rgb(0 0 0 / .3); }
.agreement-gate::backdrop { background: rgb(0 0 0 / .5); }
.agreement-gate h2 { margin: 0 0 .7rem; font-size: 1.45rem; font-weight: 600; }
.agreement-gate p { margin: 0 0 1.2rem; }
.agreement-gate .agreement-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; }
.agreement-gate .agreement-actions form { margin: 0; }
.agreement-gate .attn-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }