@panphora/clayjs 1.11.2 → 1.12.0

package/src/plugins/visitor-drafts/intro.js

@@ -0,0 +1,231 @@
+import { INTRO_CSS } from "./intro-style.js";
+
+export const COPY = {
+  kicker: "Free app",
+  download: "Download free",
+  signupLabel: "I make one of these about every two weeks. Get the next one by email.",
+  emailPlaceholder: "you@example.com",
+  signup: "Send me the next one",
+  signupThanks: "Thanks. Check your email for a link to confirm.",
+  signupFailed: "That didn't go through. Check the address and try again.",
+  start: (appName) => `Start using ${appName}`,
+  about: "About this app",
+  label: (appName) => `About ${appName}`,
+};
+
+const FOCUSABLE = "a[href], button, input, select, textarea, [tabindex]:not([tabindex='-1'])";
+
+function forced() {
+  try {
+    return new URLSearchParams(window.location.search).get("intro") === "1";
+  } catch {
+    return false;
+  }
+}
+
+function stylesOnce() {
+  if (document.getElementById("clay-intro-style")) return;
+  const style = document.createElement("style");
+  style.id = "clay-intro-style";
+  style.setAttribute("clay", "editor-ui");
+  style.textContent = INTRO_CSS;
+  document.head.appendChild(style);
+}
+
+function focusApp() {
+  const next = [...document.querySelectorAll(FOCUSABLE)].find(
+    (el) => !el.disabled && !el.closest("[clay~='editor-ui']") && (typeof el.checkVisibility !== "function" || el.checkVisibility())
+  );
+  if (next) next.focus();
+  else document.body.focus();
+}
+
+export function mountIntro({ memory, template, appName, link, tag, source, hadDraft, prompt, snapshot }) {
+  if (!template) return null;
+  const opts = { memory, template, appName, link, tag, source, hadDraft, prompt, snapshot };
+  if (forced()) return mount(opts);
+  if (memory.get().intro.done || hadDraft) return mountAbout(opts);
+  if (window.location.hash) return null;
+  if (window.matchMedia && window.matchMedia("print").matches) return null;
+  return mount(opts);
+}
+
+function mountAbout(opts) {
+  stylesOnce();
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "clay-about";
+  button.setAttribute("clay", "editor-ui");
+  button.setAttribute("sap-ignore", "");
+  button.textContent = COPY.about;
+  button.addEventListener("click", () => {
+    button.remove();
+    mount({ ...opts, fromAbout: true });
+  });
+  document.body.appendChild(button);
+  return button;
+}
+
+function mount(opts) {
+  const { memory, template, appName, link, tag, source, prompt, snapshot, fromAbout } = opts;
+  stylesOnce();
+
+  const section = document.createElement("section");
+  section.className = "clay-intro";
+  section.setAttribute("clay", "editor-ui");
+  section.setAttribute("sap-ignore", "");
+  section.setAttribute("aria-label", COPY.label(appName));
+
+  const inner = document.createElement("div");
+  inner.className = "clay-intro__inner";
+
+  const kicker = document.createElement("p");
+  kicker.className = "clay-intro__kicker";
+  kicker.textContent = COPY.kicker;
+
+  const name = document.createElement("h1");
+  name.className = "clay-intro__name";
+  name.textContent = appName;
+
+  const actions = document.createElement("div");
+  actions.className = "clay-intro__actions";
+
+  const download = document.createElement("a");
+  download.className = "clay-intro__download";
+  download.href = link;
+  download.textContent = COPY.download;
+
+  const form = document.createElement("form");
+  form.className = "clay-intro__signup";
+  form.noValidate = true;
+
+  const label = document.createElement("label");
+  label.setAttribute("for", "clay-intro-email");
+  label.textContent = COPY.signupLabel;
+
+  const row = document.createElement("div");
+  row.className = "clay-intro__row";
+
+  const email = document.createElement("input");
+  email.id = "clay-intro-email";
+  email.type = "email";
+  email.autocomplete = "email";
+  email.required = true;
+  email.placeholder = COPY.emailPlaceholder;
+
+  const send = document.createElement("button");
+  send.type = "submit";
+  send.textContent = COPY.signup;
+
+  row.append(email, send);
+
+  const honey = document.createElement("input");
+  honey.className = "clay-intro__hp";
+  honey.name = "website";
+  honey.tabIndex = -1;
+  honey.autocomplete = "off";
+  honey.setAttribute("aria-hidden", "true");
+
+  const message = document.createElement("p");
+  message.className = "clay-intro__msg";
+  message.setAttribute("role", "status");
+  message.hidden = true;
+
+  form.append(label, row, honey, message);
+  actions.append(download, form);
+
+  const start = document.createElement("button");
+  start.type = "button";
+  start.className = "clay-intro__start";
+  start.textContent = COPY.start(appName);
+
+  inner.append(kicker, name, template.content.cloneNode(true), actions, start);
+  section.appendChild(inner);
+
+  let observer = null;
+  let gone = false;
+
+  function stop() {
+    document.removeEventListener("input", onUse, true);
+    document.removeEventListener("change", onUse, true);
+    document.removeEventListener("clay:dirty", onUse, true);
+    if (observer) { observer.disconnect(); observer = null; }
+    if (prompt) prompt.hideForIntro(false);
+  }
+
+  function dismiss(reason, target) {
+    if (gone) return;
+    gone = true;
+    const anchor = target && target.getBoundingClientRect ? target : document.activeElement;
+    const before = anchor && anchor.getBoundingClientRect ? anchor.getBoundingClientRect().top : 0;
+    memory.get().intro.done = reason;
+    memory.save();
+    stop();
+    section.remove();
+    if (reason === "button") {
+      window.scrollTo({ top: 0 });
+      focusApp();
+    } else if (anchor && anchor.getBoundingClientRect) {
+      window.scrollBy(0, anchor.getBoundingClientRect().top - before);
+    }
+    if (fromAbout) mountAbout(opts);
+  }
+
+  function unchanged() {
+    return !snapshot || snapshot() === baseline;
+  }
+
+  function onUse(event) {
+    if (section.contains(event.target)) return;
+    if (event.type === "clay:dirty") {
+      if (!unchanged()) dismiss("use", event.target);
+      return;
+    }
+    if (!unchanged() || event.target?.closest?.("[persist]")) {
+      dismiss("use", event.target);
+      return;
+    }
+    const target = event.target;
+    setTimeout(() => {
+      if (!gone && !unchanged()) dismiss("use", target);
+    }, 0);
+  }
+
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    fetch("/_/newsletter/subscribe", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "same-origin",
+      body: JSON.stringify({ email: email.value.trim(), tags: [tag], source, website: honey.value }),
+    }).then((response) => {
+      if (!response.ok) throw new Error("signup failed");
+      row.hidden = true;
+      message.textContent = COPY.signupThanks;
+      message.hidden = false;
+    }).catch(() => {
+      message.textContent = COPY.signupFailed;
+      message.hidden = false;
+    });
+  });
+
+  start.addEventListener("click", () => dismiss("button"));
+
+  const baseline = snapshot ? snapshot() : null;
+  document.body.prepend(section);
+  document.addEventListener("input", onUse, true);
+  document.addEventListener("change", onUse, true);
+  document.addEventListener("clay:dirty", onUse, true);
+
+  if (prompt) {
+    prompt.hideForIntro(true);
+    if (typeof IntersectionObserver === "function") {
+      observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) prompt.hideForIntro(entry.intersectionRatio > 0.3);
+      });
+      observer.observe(section);
+    }
+  }
+
+  return section;
+}

package/src/plugins/visitor-drafts/owner-chip.js

@@ -0,0 +1,151 @@
+import { isDraftMode } from "../../core/is-edit-mode.js";
+
+export const COPY = {
+  draft: "You're seeing a private draft, like a visitor.",
+  draftAction: "Edit the original",
+  edit: "You're editing the original. Visitors get these changes.",
+  editAction: "Back to my draft",
+  close: "Hide this note",
+};
+
+const CHIP_CSS = `.clay-owner {
+  --hcp-ground: #FDF8F0;
+  --hcp-surface: #FFFCF6;
+  --hcp-sunk: #F4ECDF;
+  --hcp-ink: #2B241B;
+  --hcp-ink-2: #4A4033;
+  --hcp-muted: #6B5942;
+  --hcp-line: #E8DCC6;
+  --hcp-line-2: #D8C8AF;
+  --hcp-brass: #8F6310;
+  --hcp-shadow: 0 1px 2px rgba(23, 28, 36, .06), 0 14px 34px -14px rgba(43, 36, 27, .32);
+  --hcp-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --hcp-lift: 0px;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  .clay-owner {
+    --hcp-surface: #11131E; --hcp-sunk: #1A1D2C;
+    --hcp-ink: #ECEAF2; --hcp-ink-2: #C9CDE0; --hcp-muted: #8A90AB;
+    --hcp-line: #262B42; --hcp-line-2: #353B52;
+    --hcp-brass: #D9A445;
+    --hcp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -14px rgba(0, 0, 0, .7);
+    color-scheme: dark;
+  }
+}
+.clay-owner, .clay-owner *, .clay-owner *::before, .clay-owner *::after {
+  box-sizing: border-box; margin: 0; padding: 0; border: 0;
+  font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none;
+  line-height: inherit; color: inherit; background: none; float: none; max-width: none;
+}
+.clay-owner {
+  position: fixed; left: 12px; bottom: calc(12px + var(--hcp-lift)); z-index: 2147482000;
+  display: flex; align-items: center; gap: 10px;
+  max-width: min(460px, calc(100vw - 24px));
+  padding: 8px 8px 8px 12px;
+  font-family: var(--hcp-sans); font-size: 13px; font-weight: 400; line-height: 1.45;
+  color: var(--hcp-ink-2); text-align: left; background: var(--hcp-surface);
+  border: 1px solid var(--hcp-line-2); border-left: 3px solid var(--hcp-brass);
+  box-shadow: var(--hcp-shadow);
+  -webkit-font-smoothing: antialiased;
+}
+.clay-owner__action {
+  flex: none; font-weight: 600; color: var(--hcp-brass); cursor: pointer;
+  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hcp-line-2);
+  white-space: nowrap;
+}
+.clay-owner__action:hover { color: var(--hcp-ink); }
+.clay-owner__x {
+  flex: none; display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; font-size: 15px; color: var(--hcp-muted); cursor: pointer;
+}
+.clay-owner__x:hover { color: var(--hcp-ink); }
+.clay-owner__action:focus-visible, .clay-owner__x:focus-visible { outline: 2px solid var(--hcp-brass); outline-offset: 2px; }
+@media (pointer: coarse) {
+  .clay-owner__action, .clay-owner__x { min-height: 44px; }
+  .clay-owner__x { width: 44px; }
+}
+@media (prefers-reduced-motion: reduce) { .clay-owner { transition: none; } }
+@media (forced-colors: active) { .clay-owner { border: 1px solid CanvasText; } }
+@media print { .clay-owner { display: none; } }
+`;
+
+function stylesOnce() {
+  if (document.getElementById("clay-owner-style")) return;
+  const style = document.createElement("style");
+  style.id = "clay-owner-style";
+  style.setAttribute("clay", "editor-ui");
+  style.textContent = CHIP_CSS;
+  document.head.appendChild(style);
+}
+
+export function mountOwnerChip() {
+  if (document.getElementById("clay-owner")) return null;
+  stylesOnce();
+
+  const draft = isDraftMode;
+  const chip = document.createElement("div");
+  chip.id = "clay-owner";
+  chip.className = "clay-owner";
+  chip.setAttribute("clay", "editor-ui");
+  chip.setAttribute("sap-ignore", "");
+  chip.setAttribute("role", "status");
+
+  const lead = document.createElement("span");
+  lead.className = "clay-owner__lead";
+  lead.textContent = draft ? COPY.draft : COPY.edit;
+
+  const action = document.createElement("button");
+  action.type = "button";
+  action.className = "clay-owner__action";
+  action.textContent = draft ? COPY.draftAction : COPY.editAction;
+  action.addEventListener("click", () => {
+    const api = window.clay && window.clay.visitorDrafts;
+    if (!api) return;
+    if (draft) api.editOriginal();
+    else api.backToDraft();
+  });
+
+  const close = document.createElement("button");
+  close.type = "button";
+  close.className = "clay-owner__x";
+  close.setAttribute("aria-label", COPY.close);
+  close.textContent = "\u00d7";
+  close.addEventListener("click", () => { chip.remove(); liftOff(); });
+
+  chip.append(lead, action, close);
+  document.body.appendChild(chip);
+
+  let frame = 0;
+  function lift() {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      const y = window.innerHeight - 3;
+      let raise = 0;
+      const hits = document.elementsFromPoint ? document.elementsFromPoint(24, y) : [];
+      for (const hit of hits) {
+        for (let el = hit; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+          if (chip.contains(el)) break;
+          const position = getComputedStyle(el).position;
+          if (position === "fixed" || position === "sticky") {
+            raise = Math.max(raise, Math.ceil(window.innerHeight - el.getBoundingClientRect().top));
+            break;
+          }
+        }
+      }
+      chip.style.setProperty("--hcp-lift", (raise > 0 && raise < window.innerHeight / 3 ? raise : 0) + "px");
+    });
+  }
+
+  function liftOff() {
+    removeEventListener("scroll", lift);
+    removeEventListener("resize", lift);
+  }
+
+  addEventListener("scroll", lift, { passive: true });
+  addEventListener("resize", lift);
+  lift();
+
+  return chip;
+}

package/src/plugins/visitor-drafts/prompt-style.js

@@ -0,0 +1,173 @@
+export const PROMPT_CSS = `.hcp {
+  --hcp-ground: #FDF8F0;
+  --hcp-surface: #FFFCF6;
+  --hcp-sunk: #F4ECDF;
+  --hcp-ink: #2B241B;
+  --hcp-ink-2: #4A4033;
+  --hcp-muted: #6B5942;
+  --hcp-line: #E8DCC6;
+  --hcp-line-2: #D8C8AF;
+  --hcp-brass: #8F6310;
+  --hcp-brass-soft: #F0E4CC;
+  --hcp-face: #F1E7D4;
+  --hcp-edge-hi: #FFF9ED;
+  --hcp-edge-lo: #D6C3A5;
+  --hcp-shadow: 0 1px 2px rgba(23, 28, 36, .06), 0 14px 34px -14px rgba(43, 36, 27, .32);
+  --hcp-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --hcp-serif: Newsreader, Georgia, "Times New Roman", serif;
+  --hcp-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  --hcp-lift: 0px;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  .hcp:not([data-hcp-theme="light"]) {
+    --hcp-ground: #0B0C13; --hcp-surface: #11131E; --hcp-sunk: #1A1D2C;
+    --hcp-ink: #ECEAF2; --hcp-ink-2: #C9CDE0; --hcp-muted: #8A90AB;
+    --hcp-line: #262B42; --hcp-line-2: #353B52;
+    --hcp-brass: #D9A445; --hcp-brass-soft: #3A2F17;
+    --hcp-face: #22273E; --hcp-edge-hi: #3C4260; --hcp-edge-lo: #1B2033;
+    --hcp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -14px rgba(0, 0, 0, .7);
+    color-scheme: dark;
+  }
+}
+.hcp[data-hcp-theme="dark"] {
+  --hcp-ground: #0B0C13; --hcp-surface: #11131E; --hcp-sunk: #1A1D2C;
+  --hcp-ink: #ECEAF2; --hcp-ink-2: #C9CDE0; --hcp-muted: #8A90AB;
+  --hcp-line: #262B42; --hcp-line-2: #353B52;
+  --hcp-brass: #D9A445; --hcp-brass-soft: #3A2F17;
+  --hcp-face: #22273E; --hcp-edge-hi: #3C4260; --hcp-edge-lo: #1B2033;
+  --hcp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -14px rgba(0, 0, 0, .7);
+  color-scheme: dark;
+}
+
+.hcp, .hcp * , .hcp *::before, .hcp *::after {
+  box-sizing: border-box; margin: 0; padding: 0; border: 0;
+  font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none;
+  line-height: inherit; color: inherit; background: none; float: none; max-width: none;
+}
+.hcp {
+  position: fixed; right: 16px; bottom: calc(16px + var(--hcp-lift)); z-index: 2147482000;
+  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
+  font-family: var(--hcp-sans); font-size: 14px; font-weight: 400; line-height: 1.5;
+  color: var(--hcp-ink); text-align: left;
+  -webkit-font-smoothing: antialiased;
+  transition: bottom .25s ease, opacity .2s ease;
+  pointer-events: none;
+}
+.hcp[hidden], .hcp[data-hcp-state="dismissed"], .hcp[data-hcp-state="off"], .hcp[data-hcp-intro] { display: none; }
+.hcp[data-hcp-typing] { opacity: 0; visibility: hidden; }
+.hcp > * { pointer-events: auto; }
+.hcp svg { display: block; flex: none; }
+
+.hcp-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  height: 34px; padding: 0 14px;
+  font-family: var(--hcp-sans); font-size: 14px; font-weight: 500; line-height: 1.5;
+  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
+  color: var(--hcp-ink); background: var(--hcp-face);
+  border: 2px solid; border-radius: 0;
+  border-color: var(--hcp-edge-hi) var(--hcp-edge-lo) var(--hcp-edge-lo) var(--hcp-edge-hi);
+  outline: none;
+}
+.hcp-btn:hover { background: color-mix(in srgb, var(--hcp-face), var(--hcp-edge-hi) 45%); color: var(--hcp-ink); }
+.hcp-btn:active { border-color: var(--hcp-edge-lo) var(--hcp-edge-hi) var(--hcp-edge-hi) var(--hcp-edge-lo); }
+.hcp-btn:active > span { translate: 1px 1px; }
+.hcp-btn > span { display: inline-flex; align-items: center; gap: 7px; }
+.hcp-btn:focus-visible, .hcp-x:focus-visible, .hcp-quiet:focus-visible { outline: 2px solid var(--hcp-brass); outline-offset: 2px; }
+.hcp-btn--primary {
+  --hcp-face: var(--hcp-ink);
+  --hcp-edge-hi: color-mix(in srgb, var(--hcp-ink), white 24%);
+  --hcp-edge-lo: color-mix(in srgb, var(--hcp-ink), black 32%);
+  color: var(--hcp-ground);
+}
+.hcp-btn--primary:hover { background: color-mix(in srgb, var(--hcp-ink), var(--hcp-ground) 12%); color: var(--hcp-ground); }
+
+.hcp-dock { display: flex; align-items: stretch; box-shadow: 0 6px 16px -8px rgba(43, 36, 27, .45); }
+.hcp-tab { font-size: 13.5px; padding: 0 12px 0 10px; }
+.hcp-tab svg { color: var(--hcp-brass); }
+.hcp-dock .hcp-x {
+  width: 26px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
+  background: var(--hcp-face); color: var(--hcp-muted); cursor: pointer;
+  border: 2px solid; border-left: 0;
+  border-color: var(--hcp-edge-hi) var(--hcp-edge-lo) var(--hcp-edge-lo) var(--hcp-edge-hi);
+}
+.hcp-dock .hcp-x:hover { color: var(--hcp-ink); }
+.hcp-tab__label { display: inline; }
+.hcp[data-hcp-state="mini"] .hcp-tab__label,
+.hcp[data-hcp-state="mini"] .hcp-dock .hcp-x { display: none; }
+.hcp[data-hcp-state="mini"] .hcp-tab { width: 34px; padding: 0; }
+.hcp[data-hcp-state="card"] .hcp-dock { display: none; }
+
+.hcp-card {
+  display: none; position: relative;
+  width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px - var(--hcp-lift)); overflow: auto;
+  background: var(--hcp-surface); border: 1px solid var(--hcp-line-2); border-top: 3px solid var(--hcp-brass);
+  box-shadow: var(--hcp-shadow);
+  padding: 18px 20px 16px;
+}
+.hcp[data-hcp-state="card"] .hcp-card { display: block; animation: hcp-rise .32s cubic-bezier(.2, .8, .3, 1) both; }
+@keyframes hcp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
+
+.hcp-card .hcp-x {
+  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--hcp-muted); cursor: pointer;
+}
+.hcp-card .hcp-x:hover { color: var(--hcp-ink); background: var(--hcp-sunk); }
+.hcp-kicker {
+  display: flex; align-items: center; gap: 8px;
+  font-family: var(--hcp-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--hcp-brass); margin-bottom: 8px;
+}
+.hcp-title {
+  font-family: var(--hcp-serif); font-size: 23px; font-weight: 500; line-height: 1.18;
+  color: var(--hcp-ink); padding-right: 26px; margin-bottom: 10px;
+  font-variation-settings: "opsz" 36;
+}
+.hcp-title [data-hcp-for] { display: none; }
+.hcp[data-hcp-reason="use"] .hcp-title [data-hcp-for="use"],
+.hcp[data-hcp-reason="open"] .hcp-title [data-hcp-for="open"],
+.hcp[data-hcp-reason="return"] .hcp-title [data-hcp-for="return"],
+.hcp[data-hcp-reason="error"] .hcp-title [data-hcp-for="error"] { display: inline; }
+.hcp-body [data-hcp-for] { display: none; }
+.hcp[data-hcp-reason="use"] .hcp-body [data-hcp-for="use"], .hcp[data-hcp-reason="open"] .hcp-body [data-hcp-for="open"], .hcp[data-hcp-reason="return"] .hcp-body [data-hcp-for="return"], .hcp[data-hcp-reason="error"] .hcp-body [data-hcp-for="error"] { display: inline; }
+.hcp-body { font-size: 14px; line-height: 1.55; color: var(--hcp-ink-2); }
+.hcp-file {
+  display: flex; align-items: center; gap: 10px; margin: 12px 0 14px;
+  padding: 9px 11px; background: var(--hcp-sunk); border: 1px solid var(--hcp-line);
+}
+.hcp-file svg { color: var(--hcp-brass); }
+.hcp-file b { display: block; font-family: var(--hcp-sans); font-size: 14px; font-weight: 600; color: var(--hcp-ink); overflow-wrap: anywhere; }
+.hcp-file small { display: block; font-size: 12px; color: var(--hcp-muted); line-height: 1.4; }
+.hcp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
+.hcp-actions .hcp-btn--primary { flex: 1 1 auto; }
+.hcp-foot { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.hcp-foot small { font-size: 12px; color: var(--hcp-muted); }
+.hcp-quiet {
+  font-size: 12px; color: var(--hcp-muted); cursor: pointer;
+  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hcp-line-2);
+  white-space: nowrap;
+}
+.hcp-quiet:hover { color: var(--hcp-ink); }
+
+@media (max-width: 480px) {
+  .hcp { right: 12px; bottom: calc(12px + var(--hcp-lift)); }
+  .hcp-card { width: calc(100vw - 24px); padding: 16px 16px 14px; max-height: min(70dvh, calc(100dvh - 24px - var(--hcp-lift))); }
+  .hcp-title { font-size: 21px; }
+}
+@media (pointer: coarse) {
+  .hcp-btn, .hcp-dock .hcp-x, .hcp-card .hcp-x { min-height: 44px; }
+  .hcp-card .hcp-x { width: 44px; }
+  .hcp-quiet { display: inline-flex; align-items: center; min-height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hcp { transition: none; }
+  .hcp[data-hcp-state="card"] .hcp-card { animation: none; }
+  .hcp-btn:active > span { translate: none; }
+}
+@media (forced-colors: active) {
+  .hcp-btn, .hcp-dock .hcp-x { border: 1px solid ButtonText; }
+  .hcp-card { border: 1px solid CanvasText; }
+}
+@media print { .hcp { display: none; } }
+`;