/* ui.css (13 October 2026): sitewide states, loaded after styles.css on the pages that opt in.
   Additive only. Holds the browser surfaces, link and button states, copy buttons, the employer
   lookup's loading/no-match/error states, cross-document page turns, print, and the shared
   "leaf" pages (404, 500, maintenance, checkout thanks and cancelled). Behaviour is in /ui.js. */

/* ---------- Browser surfaces ---------- */
html { accent-color: var(--vermilion); scroll-padding-top: 1.5rem; -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible, .copy:focus-visible { outline-offset: 3px; }
::marker { color: var(--ink-2); }
::placeholder { color: var(--ink-2); opacity: 1; }
td, th, time, data, .price { font-variant-numeric: tabular-nums lining-nums; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }
hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }

/* ---------- Links: ink at rest, vermilion under the hand, a thicker rule while pressed ---------- */
a { text-decoration-skip-ink: auto; transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out); }
a:hover { text-decoration-color: var(--vermilion); }
a:active { color: var(--vermilion); text-decoration-thickness: 2px; }
.footer-nav a:hover { color: var(--vermilion-ink); }

/* ---------- Buttons ---------- */
.btn:active { background: var(--ink); color: var(--bg); transform: translateY(1px); transition-duration: 60ms; }
.btn-line:active { background: var(--vermilion-wash); }
.theme-toggle { transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.theme-toggle:active, .pick:active, .copy:active { transform: translateY(1px); }
button:disabled, .btn[aria-disabled="true"] {
    cursor: not-allowed; transform: none;
    background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule);
}

/* ---------- Copy buttons: "Copied" with a drawn tick, or a quiet "press Ctrl+C" when the clipboard refuses ---------- */
.copy {
    display: inline-flex; align-items: center; gap: 0.4375rem;
    font: 500 0.8125rem/1 var(--sans); color: var(--ink); background: transparent;
    border: 1px solid var(--rule); border-radius: 3px; padding: 0.4375rem 0.6875rem; cursor: pointer;
    transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.copy:hover { border-color: var(--ink); }
.copy[data-state="copied"] { color: var(--vermilion-ink); border-color: var(--vermilion); background: var(--vermilion-wash); }
.copy[data-state="copied"]::before {
    content: ""; width: 0.3125rem; height: 0.5625rem; flex: none; margin: -0.1875rem 0.0625rem 0 0.0625rem;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
    animation: tick-in 260ms var(--ease-out) both;
}
.copy[data-state="refused"] { color: var(--ink-2); border-style: dashed; border-color: var(--ink-2); }
@keyframes tick-in { from { opacity: 0; transform: rotate(45deg) scale(0.4); } }
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.copy-line code { font: 400 0.9375rem/1.4 var(--mono); overflow-wrap: anywhere; }

/* ---------- Employer lookup (/visa-sponsored-jobs/): loading, no match, and failed-to-load ---------- */
/* .notice.demo carries data-lookup="loading" in the HTML; /sponsor-lookup.js sets "ready" once it runs,
   and /ui.js sets "error" if the page finished loading and it never did. */
.lookup-state { display: none; margin: 0.625rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.js [data-lookup="loading"] .lookup-state[data-for="loading"],
.js [data-lookup="error"] .lookup-state[data-for="error"] { display: block; }
.js [data-lookup="loading"] .lookup { opacity: 0.55; pointer-events: none; }
.js [data-lookup="error"] .lookup, .js [data-lookup="error"] .picks { display: none; }
.lookup-state[data-for="loading"] { font: 400 0.8125rem/1.4 var(--mono); }
.lookup-state[data-for="loading"]::after {
    content: ""; display: block; height: 2px; margin-top: 0.5rem;
    background: linear-gradient(var(--vermilion), var(--vermilion)) 0 0 / 30% 100% no-repeat, var(--rule);
    animation: setting 1.4s var(--ease-out) infinite;
}
@keyframes setting { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }
.lookup-state[data-for="error"] { padding: 0.75rem 0 0.25rem; border-top: 2px solid var(--ink); color: var(--ink); font-size: 0.9375rem; }
.lookup-state[data-for="error"] strong { display: block; font: 600 1.125rem/1.3 var(--serif); margin-bottom: 0.25rem; }
.lookup-state[data-for="error"] a { font-weight: 500; }

/* No match: the same empty entry as the 404, a vermilion rule where the record would be. */
.sp-none { position: relative; padding: 2.75rem 0 0.5rem; }
.sp-none::before {
    content: ""; position: absolute; left: 0; right: 0; top: 1.25rem; height: 2px; background: var(--vermilion);
    transform-origin: 0 50%; animation: rule-draw 700ms var(--ease-out) both;
}
.sp-none a { color: var(--ink); font-weight: 500; }
@keyframes rule-draw { from { transform: scaleX(0); } }

/* ---------- Page turns between documents (View Transitions, same-origin navigations only) ---------- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
.masthead { view-transition-name: masthead; }
/* The masthead holds still; the sheet under it is laid down from the top over the one leaving. */
::view-transition-old(root) { animation: sheet-out 360ms var(--ease-out) both; }
::view-transition-new(root) { animation: sheet-in 460ms var(--ease-out) both; }
::view-transition-group(masthead) { animation-duration: 0s; }
@keyframes sheet-out { to { opacity: 0.35; transform: translateY(-0.5rem); } }
@keyframes sheet-in { from { clip-path: inset(0 0 100% 0); transform: translateY(0.75rem); } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Leaf pages: 404, 500, maintenance, checkout thanks and cancelled ---------- */
.leaf {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start;
    padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3rem, 7vw, 6rem);
}
.leaf > * { min-width: 0; }
.leaf h1 { font-size: clamp(2.375rem, 1.5rem + 3.2vw, 4rem); line-height: 1.03; max-width: 13ch; }
.leaf .lede { margin: 1.25rem 0 1.5rem; }
.leaf-hint { margin: 1.5rem 0 0; font-size: 0.9375rem; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }
.leaf-hint a { color: var(--ink); font-weight: 500; }
.leaf-hint .copy-line { margin-top: 0.5rem; color: var(--ink); }
/* The one drawn underline: the vermilion line comes down and becomes the rule under a phrase. */
.drawn { background: linear-gradient(var(--vermilion), var(--vermilion)) 0 92% / 100% 0.08em no-repeat; animation: underline-draw 900ms 250ms var(--ease-out) both; padding-bottom: 0.04em; }
@keyframes underline-draw { from { background-size: 0 0.08em; } }

/* The register: pages filed by address, set like a contents page. */
.reg { display: block; gap: 0; font-size: inherit; margin: 0; background: var(--surface); border: 1px solid var(--ink); padding: 1.125rem 1.5rem 0.5rem; }
.reg-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--ink); font: 400 0.75rem/1.3 var(--mono); color: var(--ink-2); }
.reg ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.reg li { position: relative; padding-block: 0.875rem 0.9375rem; border-bottom: 1px solid var(--rule); }
.reg li:last-child { border-bottom: 0; }
.reg-line { display: flex; align-items: baseline; gap: 0.625rem; }
.reg-name { font: 600 1.1875rem/1.25 var(--serif); letter-spacing: -0.005em; flex: none; max-width: 70%; }
.reg-dots { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 1px dotted color-mix(in oklch, var(--ink-2) 70%, transparent); transform: translateY(-0.28em); }
.reg-path { flex: none; max-width: 55%; font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; text-align: right; }
.reg-desc { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
/* A whole row is the link; the vermilion line draws in under the name. */
.reg a { text-decoration: none; color: var(--ink); background: linear-gradient(var(--vermilion), var(--vermilion)) 0 100% / 0 2px no-repeat; transition: background-size 420ms var(--ease-out), color 160ms var(--ease-out); }
.reg a::after { content: ""; position: absolute; inset: 0; }
.reg li:hover a, .reg a:focus-visible { background-size: 100% 2px; }
.reg a:focus-visible { outline: none; }
.reg li:has(a:focus-visible) { outline: 2px solid var(--vermilion); outline-offset: 2px; border-radius: 2px; }
.reg li:hover .reg-path { color: var(--ink); }
.reg li:active a { color: var(--vermilion-ink); }
.reg-foot { margin: 0; padding: 0.75rem 0 0.75rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-2); }

/* The missing entry: no name, a vermilion rule where it would be, filed at the address you asked for. */
.reg .gap .reg-path { color: var(--vermilion-ink); font-weight: 500; }
.gap-rule { flex: 1 1 auto; min-width: 3rem; height: 2px; background: var(--vermilion); align-self: center; transform-origin: 0 50%; animation: rule-draw 900ms 300ms var(--ease-out) both; }
.gap-rule.broken { height: 0; background: none; border-top: 2px dashed var(--vermilion); }
.gap .reg-desc { color: var(--ink); }

/* Steps (checkout thanks): the order carries information, so the rows are numbered. */
.reg.steps li { counter-increment: step; padding-left: 2.25rem; }
.reg.steps li::before { content: counter(step); position: absolute; left: 0; top: 0.9375rem; font: 500 0.8125rem/1.6 var(--mono); color: var(--vermilion-ink); width: 1.5rem; height: 1.5rem; text-align: center; border: 1px solid var(--vermilion); border-radius: 50%; }
.reg.steps .reg-name { max-width: none; flex: 1 1 auto; }

/* Maintenance: an empty sheet, the next edition being set on the first rule. */
.reg.blank li { height: 3.25rem; }
.reg.blank li:first-child::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vermilion);
    transform-origin: 0 50%; animation: setting-rule 3.2s var(--ease-out) infinite;
}
@keyframes setting-rule { 0% { transform: scaleX(0); } 70%, 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

@media (max-width: 52rem) {
    .leaf { grid-template-columns: minmax(0, 1fr); }
    .leaf h1 { max-width: 15ch; }
}
@media (max-width: 30rem) {
    .reg { padding-inline: 1rem; }
    .reg-line { flex-wrap: wrap; row-gap: 0.125rem; }
    .reg-dots { display: none; }
    .reg-name { max-width: none; flex: 1 1 100%; }
    .reg-path { order: -1; flex: 1 1 100%; max-width: none; text-align: left; font-size: 0.75rem; }
    .gap-rule { order: 0; flex: 1 1 100%; margin-block: 0.625rem 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    a, .copy, .theme-toggle, .reg a { transition: none; }
    .copy[data-state="copied"]::before, .sp-none::before, .gap-rule, .drawn { animation: none; }
    .lookup-state[data-for="loading"]::after { animation: none; background-size: 100% 100%, auto; opacity: 0.5; }
    .reg.blank li:first-child::after { animation: none; transform: scaleX(0.4); }
}

/* ---------- Print: black on white, addresses after links ---------- */
@media print {
    :root:root:root { color-scheme: light; --bg: #fff; --surface: #fff; --ink: #000; --ink-2: #333; --rule: #bbb; --vermilion: #000; --vermilion-ink: #000; --vermilion-wash: #eee; --code-bg: #fff; --code-ink: #000; --code-rule: #bbb; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .skip, .theme-toggle, .masthead nav, .lookup, .picks, .lookup-state, .copy, .reg-dots { display: none !important; }
    .masthead { border-top-color: #000; background: #fff; }
    .btn, .btn-line { background: none; color: #000; box-shadow: none; border: 1px solid #000; }
    pre.code { white-space: pre-wrap; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font: 400 0.8em/1.3 var(--mono); overflow-wrap: anywhere; }
    a[href^="/"]::after { content: " (locaihost.org" attr(href) ")"; font: 400 0.8em/1.3 var(--mono); overflow-wrap: anywhere; }
    .wordmark::after, .crumbs a::after, .footer a::after, .reg a::after { content: none !important; }
    .reg a { background: none; }
    h1, h2, h3 { break-after: avoid; }
    tr, li, figure, .notice, .reg, pre { break-inside: avoid; }
}