/* watch.css: "Email me when this changes" (/watch.js), under the free tools' results and on the visa-sponsor
   pages, plus the confirm and unsubscribe pages (site/src/watch.js). Loaded after styles.css and ui.css. */

.watch { position: relative; max-width: 34rem; margin: 0; }
.watch-title { font: 600 1.125rem/1.3 var(--serif); margin: 0 0 0.25rem; }
h2.watch-title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; margin-bottom: 0.5rem; }
.watch-note { margin: 0 0 0.875rem; font-size: 0.9375rem; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
.watch label { display: block; font-size: 0.875rem; font-weight: 500; margin: 0 0 0.375rem; }
.watch-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.watch-row input {
    flex: 1 1 14rem; min-width: 0; font: 400 1rem/1.25 var(--sans); color: var(--ink); background: var(--surface);
    border: 1px solid var(--ink-2); border-radius: 3px; padding: 0.6875rem 0.75rem;
    transition: border-color 160ms var(--ease-out);
}
.watch-row input:hover { border-color: var(--ink); }
.watch-row input:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 1px; border-color: var(--ink); }
.watch-row input[aria-invalid="true"] { border-color: var(--vermilion); }
.watch-row button { flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.watch-row button[aria-busy="true"] { cursor: progress; }
.watch-msg { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--vermilion-ink); }
.watch-msg:empty { display: none; }
.watch-fine { margin: 0.625rem 0 0; font-size: 0.8125rem; color: var(--ink-2); max-width: 66ch; }
.watch-fine a { color: inherit; }
/* Left empty by people; form-filling bots fill it in. Out of sight and out of the tab order. */
.watch-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sent: the form gives way to a short note under a vermilion rule, which replaces the form's own rule. */
form.watch[data-state="sent"] { border-top: 0; padding-top: 0; }
.watch-done { padding-top: 0.75rem; border-top: 2px solid var(--vermilion); outline: none; }
.watch-done p { margin: 0; }
.watch-done .watch-fine { margin-top: 0.375rem; }

/* Under a free-tool result, inside the card. */
.tool-card .watch { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

/* Visa-sponsor pages: a band under the opening notice. */
.watch-band { padding-block: 0 clamp(1.5rem, 4vw, 2.5rem); }
.watch-band .watch { max-width: 40rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }

/* Confirm and unsubscribe pages. */
.watch-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0.5rem 0 0; }
.watch-confirm .btn { border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.watch-confirm button.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.watch-confirm button.link:hover { text-decoration-color: var(--vermilion); }
.watch-reg .reg-desc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 0.2em; }
.watch-reg .reg-desc { overflow-wrap: anywhere; }

@media (max-width: 30rem) {
    .watch-row button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .watch-row input { transition: none; }
}