/* Mevagissey, its account pages — GENERATED by tools/build-accounts.mjs: this site's tokens (data/account.json), then tools/lib/account.css, whole. Do not hand-edit. */
.ac-page, .fav {
  --ac-ink: var(--mv-ink); --ac-soft: var(--mv-muted); --ac-ground: var(--mv-paper-2); --ac-line: var(--mv-line);
  --ac-accent: var(--mv-lantern); --ac-on-accent: var(--mv-deep);
  --ac-display: var(--mv-display); --ac-text: var(--mv-body); --ac-radius: 12px;
}
/* ── THE ACCOUNT PAGES — one stylesheet for every site. ──────────────────────────────────────
   Graham, 2026-09-30: "one user account … must be built using v5 block tech and components.
   there must be scope for reusable components across all use cases to reduce duplication."

   The forms are the ENGINE's (auth.login, auth.register, auth.account-menu, auth.change-password)
   and are the same on every site; this is their clothes, and the clothes are the site's own:
   every colour and face is one of eight tokens (--ac-*), which each site sets to ITS tokens in
   data/account.json. Nothing here names a colour, and nothing here names a site.

   Everything sits on its own panel (--ac-ground), so the contrast that was measured for a site's
   tokens is the contrast a visitor gets, whatever the page behind it is doing. */
.ac-page { width: min(32rem, 100% - 2rem); margin-inline: auto; padding-block: clamp(2rem, 7vw, 4.5rem); }
.qx-container.ac-panel { display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
  padding: clamp(1.25rem, 5vw, 2.25rem); background: var(--ac-ground); color: var(--ac-ink);
  border: 1px solid var(--ac-line); border-radius: var(--ac-radius); font-family: var(--ac-text); }
.ac-head { margin: 0; font-family: var(--ac-display); font-size: clamp(1.55rem, 6vw, 2rem); line-height: 1.15;
  color: var(--ac-ink); text-wrap: balance; }
.ac-lede { margin: 0; color: var(--ac-soft); font-size: 1rem; line-height: 1.55; }
.ac-panel .qx-link.ac-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px;
  color: var(--ac-accent); font-size: .95rem; text-underline-offset: .2em; }
.ac-panel .qx-link.ac-link:hover, .ac-panel .qx-link.ac-link:focus-visible { color: var(--ac-ink); }

/* the engine's forms */
.ac-panel .auth-login, .ac-panel .auth-register, .ac-panel .auth-change-password, .ac-panel .auth-recovery { align-self: stretch; margin: .25rem 0 0; }
.ac-panel .auth-login > .qx-heading, .ac-panel .auth-register > .qx-heading, .ac-panel .auth-change-password > .qx-heading, .ac-panel .auth-recovery > .qx-heading {
  margin: 0; font-family: var(--ac-display); font-size: 1.2rem; line-height: 1.25; color: var(--ac-ink); }
/* the second of the recovery's two forms starts a little lower than the first ends */
.ac-panel .auth-recovery > .qx-heading ~ .qx-heading { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ac-line); }
.ac-panel .auth-register > .qx-text { margin: 0; color: var(--ac-soft) !important; font-size: .9rem; line-height: 1.5; }
.ac-panel .qx-form { align-self: stretch; display: grid; gap: .9rem; }
.ac-panel .qx-form__row { display: grid; gap: .35rem; }
.ac-panel .qx-form__label { color: var(--ac-ink); font-size: .9rem; font-weight: 600; }
.ac-panel .qx-form__required { color: var(--ac-soft); }
.ac-panel .qx-form__field { width: 100%; min-height: 48px; padding: 0 .8rem; border: 1px solid var(--ac-soft); border-radius: calc(var(--ac-radius) * .6);
  background: var(--ac-ground); color: var(--ac-ink); font: inherit; font-size: 16px; }
.ac-panel .qx-form__field:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-panel .qx-form__field-error, .ac-panel .qx-form__errors { color: var(--ac-ink); font-size: .85rem; font-weight: 600; }
.ac-panel .qx-form__field-error:empty { display: none; }
.ac-panel .qx-form__submit { width: 100%; min-height: 48px; border: 1px solid var(--ac-accent); border-radius: calc(var(--ac-radius) * .6);
  background: var(--ac-accent); color: var(--ac-on-accent); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.ac-panel .qx-form__submit:hover, .ac-panel .qx-form__submit:focus-visible { filter: brightness(.9); }
.ac-panel .qx-form__submit[disabled] { opacity: .6; cursor: progress; }
/* What the engine says when something goes wrong, or has gone right. Its error line reads "⚠ "
   before anything has gone wrong (its format wraps an empty value — asked of the engine,
   NOTEBOARD C65), so the sign is taken off here and an empty line is an empty line. It keeps
   its height: the form does not jump when the words arrive. */
.ac-panel .qx-text.auth-error, .ac-panel .qx-text.auth-reg-error, .ac-panel .qx-text.auth-pw-error {
  align-self: stretch; margin: 0; min-height: 1.4em; color: var(--ac-ink) !important; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.ac-panel .qx-text.auth-error::first-letter, .ac-panel .qx-text.auth-reg-error::first-letter, .ac-panel .qx-text.auth-pw-error::first-letter { font-size: 0; }
.ac-panel .qx-text.auth-pw-status, .ac-panel .qx-text.auth-forgot-status, .ac-panel .qx-text.auth-reset-status {
  align-self: stretch; margin: 0; min-height: 1.4em; color: var(--ac-ink) !important; font-size: .9rem; font-weight: 600; }
/* said once, when it is true: the email was confirmed, or the link was no longer good */
.ac-note { margin: 0; padding: .7rem .9rem; border: 1px solid var(--ac-line); border-left: 4px solid var(--ac-accent); border-radius: calc(var(--ac-radius) * .4);
  color: var(--ac-ink); font-size: .95rem; line-height: 1.45; }

/* who is signed in, and the way out */
.ac-panel .auth-account-menu { align-self: stretch; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .75rem 0; border-block: 1px solid var(--ac-line); }
.ac-panel .auth-whoami { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex: 1 1 auto; }
.ac-panel .auth-whoami-name { margin: 0; color: var(--ac-ink); font-weight: 600; overflow-wrap: anywhere; }
.ac-panel .auth-logout { min-height: 44px; padding: 0 1rem; border: 1px solid var(--ac-soft); border-radius: calc(var(--ac-radius) * .6);
  background: transparent; color: var(--ac-ink); font: inherit; font-size: .95rem; cursor: pointer; }
.ac-panel .auth-logout:hover, .ac-panel .auth-logout:focus-visible { border-color: var(--ac-accent); color: var(--ac-accent); }
.ac-panel .qx-link.auth-signin-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ac-accent); }

/* ── FAVOURITES — the save button on a site's own page, and the list at /favourites. ──────────
   The button carries the tokens itself (.fav is given them beside .ac-page), so it is the site's
   colours wherever the site's builder puts it. */
.fav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--ac-text); }
.fav .fav-save, .fav .fav-saved { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.1rem; border-radius: calc(var(--ac-radius) * .6);
  font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; }
.fav .fav-save { border: 1px solid var(--ac-accent); background: var(--ac-accent); color: var(--ac-on-accent); }
.fav .fav-saved { border: 1px solid var(--ac-accent); background: var(--ac-ground); color: var(--ac-ink); }
.fav .fav-save:hover, .fav .fav-save:focus-visible { filter: brightness(.9); }
.fav .fav-saved:hover, .fav .fav-saved:focus-visible { border-color: var(--ac-ink); }

.ac-panel .fav-list { align-self: stretch; border: 1px solid var(--ac-line); border-radius: calc(var(--ac-radius) * .6); overflow: hidden; }
.ac-panel .fav-list:empty { display: none; }
.ac-panel .qx-container.fav-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem .9rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--ac-line); }
.ac-panel .fav-list > :last-child .fav-row, .ac-panel .fav-list > .fav-row:last-child { border-bottom: 0; }
.ac-panel .qx-link.fav-link { display: flex; flex-direction: row; align-items: center; gap: .7rem; min-height: 44px; min-width: 0; flex: 1 1 auto;
  color: var(--ac-ink); text-decoration: none; }
.ac-panel .qx-link.fav-link:hover .fav-title, .ac-panel .qx-link.fav-link:focus-visible .fav-title { text-decoration: underline; text-underline-offset: .2em; }
.ac-panel .fav-title { font-weight: 600; overflow-wrap: anywhere; }
.ac-panel .fav-pic { flex: none; width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--ac-line); border-radius: 4px; background: var(--ac-ground); }
.ac-panel .fav-pic[src=""] { display: none; }
.ac-panel .fav-off { flex: none; min-height: 44px; padding: 0 .8rem; border: 1px solid var(--ac-soft); border-radius: calc(var(--ac-radius) * .6);
  background: transparent; color: var(--ac-ink); font: inherit; font-size: .85rem; cursor: pointer; }
.ac-panel .fav-off:hover, .ac-panel .fav-off:focus-visible { border-color: var(--ac-accent); color: var(--ac-accent); }
.ac-panel .fav-none { margin: 0; padding: .8rem .9rem; border: 1px dashed var(--ac-soft); border-radius: calc(var(--ac-radius) * .6); color: var(--ac-soft); }
.ac-panel .qx-container.fav-keep { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-top: .6rem; border-top: 1px solid var(--ac-line); }
.ac-panel .fav-keep-t { color: var(--ac-soft); font-size: .95rem; line-height: 1.5; }