/*
 * The pieces every screen reuses. A screen may compose these; it may not
 * invent a second button.
 */

/*
 * The primary button is the one place the site spends real effort. Under the
 * label three colour fields drift at different rates, so the surface never
 * repeats within the time anyone watches it. No image, no script — gradients
 * and one set of keyframes.
 *
 * The movement is in background-position, NOT in a transform on a layer
 * underneath. A transformed layer gets its own drawing surface and stops being
 * clipped by the parent's rounding, which is what put a straight diagonal
 * across the bottom-right corner and made the button look square. A background
 * cannot escape its own element: whatever shape the button is, the movement is
 * that shape too, with nothing depending on the clip behaving.
 */
.aii-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aii-space-2);
  padding: var(--aii-space-3) var(--aii-space-8);
  border: 0;
  border-radius: var(--aii-radius);
  background-color: var(--aii-accent-to);
  background-image:
    /*
     * A narrow band of light that crosses the button, then a long wait. Four
     * layers in one background so the whole effect keeps the button's shape —
     * a layer underneath would escape the rounding, which is how the corner
     * came out cut the first time.
     */
    linear-gradient(105deg, transparent 38%, var(--aii-sheen) 50%, transparent 62%),
    radial-gradient(60% 120% at 30% 40%, var(--aii-accent-from) 0%, transparent 62%),
    radial-gradient(55% 110% at 70% 60%, var(--aii-accent-deep) 0%, transparent 60%),
    linear-gradient(120deg, var(--aii-accent-from), var(--aii-accent-to));
  background-size: 220% 100%, 260% 260%, 240% 240%, 200% 200%;
  background-repeat: no-repeat;
  animation: aii-drift 7s ease-in-out infinite;
  color: var(--aii-paper-raised);
  font-family: var(--aii-font-ui);
  font-size: var(--aii-text-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--aii-shadow-1);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 180ms ease;
}

/*
 * Four positions. The colour fields move different distances in different
 * directions, so they slide across each other rather than travelling as one
 * picture.
 *
 * The light travels ONE WAY across the whole cycle, from off the right edge to
 * off the left. Written to cross early and then wait, it swept back across on
 * the way to the closing frame — a highlight going there and back, which
 * nothing in the world does. There is no interpolation between the last
 * keyframe and the first, so the reset from one edge to the other is
 * instantaneous and happens where the light cannot be seen.
 */
@keyframes aii-drift {
  0%   { background-position: 130% 50%, 0% 40%, 100% 60%, 0% 50%; }
  35%  { background-position: 55% 50%, 60% 65%, 30% 25%, 50% 45%; }
  70%  { background-position: 5% 50%, 25% 15%, 70% 85%, 100% 60%; }
  100% { background-position: -30% 50%, 0% 40%, 100% 60%, 0% 50%; }
}

/* Under the cursor the light comes round sooner. */
button.aii-button:hover,
a.aii-button:hover {
  animation-duration: 3.4s;
}

.aii-button:hover,
.aii-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--aii-shadow-2);
}

.aii-button[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.aii-button--quiet {
  background-color: transparent;
  background-image: none;
  animation: none;
  color: var(--aii-ink);
  border: 1px solid var(--aii-line);
  box-shadow: none;
}

.aii-button--quiet:hover {
  border-color: var(--aii-ink-soft);
  box-shadow: none;
}

.aii-field {
  display: grid;
  gap: var(--aii-space-2);
  margin-block: var(--aii-space-4);
}

/*
 * Any `display` declaration beats the `hidden` attribute, so the line above
 * silently un-hid every field the script had hidden: /create/ showed an upload
 * box for a tool that invents pictures, and /animate/ offered a style it never
 * sends. Found by looking at the screen, not by any measurement — the page was
 * the right width the whole time.
 */
[hidden] {
  display: none !important;
}

.aii-field > label {
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

.aii-field input[type="text"],
.aii-field input[type="email"],
.aii-field input[type="password"],
.aii-field input[type="file"],
.aii-field select,
.aii-field textarea {
  width: 100%;
  padding: var(--aii-space-3) var(--aii-space-4);
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius-box);
  background: var(--aii-paper-raised);
  color: var(--aii-ink);
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.aii-field input:focus,
.aii-field select:focus,
.aii-field textarea:focus {
  outline: none;
  border-color: var(--aii-ink-soft);
  box-shadow: var(--aii-shadow-1);
}

/*
 * Under a field: what is wrong with it, and what would help. Two different
 * things, so two different weights — the correction is the accent the rest of
 * the site uses for "look here", the guidance is the same soft grey as a label.
 */
.aii-field__bad {
  font-size: var(--aii-text-small);
  color: var(--aii-accent-deep);
}

.aii-field__hint {
  font-size: var(--aii-text-tiny);
  color: var(--aii-ink-soft);
}

.aii-field__hint:empty {
  display: none;
}

.aii-field__spare {
  color: var(--aii-ink-soft);
  font-size: var(--aii-text-tiny);
}

.aii-card {
  background: var(--aii-paper-raised);
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius-panel);
  padding: var(--aii-space-8);
  box-shadow: var(--aii-shadow-1);
}

/* Section headings share one rhythm across every page. */
.aii-lede {
  max-width: 56ch;
  color: var(--aii-ink-soft);
  font-size: 1.125rem;
}

.aii-eyebrow {
  font-size: var(--aii-text-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aii-ink-soft);
  margin-bottom: var(--aii-space-3);
}

/* The tool screen: controls beside the result on a desk, stacked on a phone. */
/*
 * The panel runs the width of the page, with the results underneath.
 *
 * It used to be a 420px column on the left, which made a tall thin form of
 * something that is mostly one sentence and four choices — the description box
 * was narrower than the sentence it holds, and the presets stacked two abreast
 * down a strip. Wide, the whole instrument is visible at once and the
 * description gets the room it deserves.
 */
.aii-tool {
  display: grid;
  gap: var(--aii-space-12);
  margin-block: var(--aii-space-8);
}

.aii-tool__results {
  display: grid;
  gap: var(--aii-space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: start;
}

/*
 * min-width:0 is not decoration. Without it a grid item refuses to shrink
 * below its content and pushes the page sideways — the horizontal scrollbar
 * the measurement is looking for.
 */
.aii-tool__results > * {
  min-width: 0;
}

.aii-tool__results img,
.aii-tool__results video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--aii-radius-box);
  box-shadow: var(--aii-shadow-1);
}

.aii-tool__empty {
  color: var(--aii-ink-soft);
  border: 1px dashed var(--aii-line);
  border-radius: var(--aii-radius-panel);
  padding: var(--aii-space-24) var(--aii-space-8);
  text-align: center;
  margin: 0;
}

/*
 * A sign-in form stretched to the full shell is a form nobody wants to fill
 * in: the eye has to cross the whole page between a label and what it typed.
 */
.aii-auth {
  max-width: 460px;
  margin-inline: auto;
}

/*
 * Core draws the sign-in form and we are not going to reimplement it — it is
 * what checks the password. But it arrives with WordPress's own class names
 * and none of ours, so our page looked like our page right up until the
 * moment the visitor had to type into it. These rules dress core's markup.
 */
#loginform p {
  display: grid;
  gap: var(--aii-space-2);
  margin-block: var(--aii-space-4);
}

#loginform label {
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

#loginform input[type="text"],
#loginform input[type="password"] {
  width: 100%;
  padding: var(--aii-space-3) var(--aii-space-4);
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius-box);
  background: var(--aii-paper-raised);
  color: var(--aii-ink);
  font: inherit;
}

#loginform .login-remember {
  display: flex;
  align-items: center;
  gap: var(--aii-space-2);
}

/*
 * Core puts the box inside the label, so the gap above never had anything to
 * space apart. The row is the label.
 */
#loginform .login-remember label {
  display: flex;
  align-items: center;
  gap: var(--aii-space-2);
  color: var(--aii-ink);
  cursor: pointer;
}

/*
 * The one control on the site the operating system was still drawing.
 *
 * Everything around it — the two fields, the button — is ours, and a
 * system-blue tick beside them reads as a piece of another page. Redrawn from
 * the same tokens as the fields: our edge, our radius, our accent.
 *
 * The mark is a border bent into a corner and turned, rather than a character
 * or an image: a glyph would depend on a font we do not ship, and a file would
 * be one more request for fourteen pixels.
 */
#loginform .login-remember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  border: 1px solid var(--aii-line);
  border-radius: 6px;
  background: var(--aii-paper-raised);
  cursor: pointer;
}

#loginform .login-remember input[type="checkbox"]:checked {
  border-color: transparent;
  background-image: linear-gradient(135deg, var(--aii-accent-from), var(--aii-accent-to));
}

#loginform .login-remember input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 0.3em;
  height: 0.55em;
  margin: 0.12em auto 0;
  border: 2px solid var(--aii-paper-raised);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

#loginform .login-remember input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--aii-accent-deep);
  outline-offset: 2px;
}

#loginform input[type="submit"] {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: var(--aii-space-3) var(--aii-space-8);
  border: 0;
  border-radius: var(--aii-radius);
  background-image: linear-gradient(135deg, var(--aii-accent-from), var(--aii-accent-to));
  color: var(--aii-paper-raised);
  font-family: var(--aii-font-ui);
  font-size: var(--aii-text-body);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--aii-shadow-1);
}

.aii-prices {
  width: 100%;
  border-collapse: collapse;
}

.aii-prices th,
.aii-prices td {
  text-align: left;
  padding: var(--aii-space-4) var(--aii-space-2);
  border-bottom: 1px solid var(--aii-line);
}

.aii-prices th {
  font-size: var(--aii-text-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aii-ink-soft);
  font-weight: 500;
}

.aii-steps {
  display: grid;
  gap: var(--aii-space-8);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.aii-steps > * {
  min-width: 0;
}

.aii-step__number {
  font-family: var(--aii-font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--aii-accent-to);
  margin: 0 0 var(--aii-space-3);
}

/*
 * Two columns: what the section is on the left, the questions on the right.
 * The list used to run the whole width with nothing beside it, which made it
 * a list on a background rather than a part of the page.
 */
.aii-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--aii-space-16);
  align-items: start;
}

.aii-faq__aside {
  position: sticky;
  top: 16vh;
}

.aii-faq__aside h2 {
  font-size: var(--aii-text-h2);
  margin: 0 0 var(--aii-space-4);
}

.aii-faq__more {
  margin-top: var(--aii-space-8);
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

/*
 * The panel lifts off the white page on its own edge and shadow, the way the
 * opening panel does. It sat on a cream band first; the band was doing a job
 * the panel already did, and it cut the page into stripes.
 */
.aii-faq__list {
  background: var(--aii-page);
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius-panel);
  box-shadow: var(--aii-shadow-2);
  overflow: clip;
}

.aii-faq details {
  border-bottom: 1px solid var(--aii-line);
  /*
   * A rail on the left of whichever question is open, the same mark the chain
   * story uses for the step being told.
   */
  border-left: 2px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.aii-faq details:last-child {
  border-bottom: 0;
}

.aii-faq details[open] {
  background: var(--aii-band);
  border-left-color: var(--aii-accent-to);
}

.aii-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--aii-space-4);
  padding: var(--aii-space-6);
}

.aii-faq summary:hover {
  color: var(--aii-accent-to);
}

.aii-faq summary::-webkit-details-marker {
  display: none;
}

.aii-faq summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--aii-ink-soft);
  font-weight: 400;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.aii-faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--aii-accent-to);
}

.aii-faq__answer {
  padding: 0 var(--aii-space-6) var(--aii-space-6);
  color: var(--aii-ink-soft);
}

.aii-faq__answer p {
  margin: 0;
  max-width: 58ch;
}

/*
 * The documents: terms, privacy, cookies, content policy, refunds.
 *
 * Full width of the content column, by the owner's decision after seeing it
 * both ways. A measure was tried first and read as the text having slid to the
 * left, because the column kept its left edge and left the right half empty.
 *
 * The cost is a long line — about 140 characters at 1440. If that ever needs
 * fixing, the fix is `max-width: var(--aii-measure); margin-inline: auto;`
 * here, which centres the same column instead of stretching it: that keeps the
 * page symmetrical, which was the actual complaint.
 */
.aii-legal .entry-content {
  max-width: none;
}

.aii-legal .entry-content h2 {
  font-size: var(--aii-text-h3);
  font-family: var(--aii-font-ui);
  font-weight: 600;
  letter-spacing: normal;
  margin-top: var(--aii-space-12);
  margin-bottom: var(--aii-space-3);
}

/*
 * The display face is for headlines that carry a page. A legal document has
 * fifteen headings and they are signposts, not statements — set in the same
 * face as the text, a size up, so the eye can find a clause without the page
 * turning into a poster.
 */
.aii-legal .entry-content h2:first-of-type {
  margin-top: var(--aii-space-8);
}

.aii-legal .entry-content p,
.aii-legal .entry-content li {
  margin-bottom: var(--aii-space-4);
}

.aii-legal .entry-content ul {
  padding-left: var(--aii-space-6);
}

/*
 * A table inside a document.
 *
 * The cookie policy has one, and on a phone it was 490px wide inside a 315px
 * column and pushed the whole page 144px sideways. The cause is a cell holding
 * `wordpress_logged_in_…` — a long token with nothing in it a browser is
 * willing to break.
 *
 * `table-layout: fixed` makes the columns obey the container instead of the
 * content, and breaking anywhere lets the long name wrap. Together they keep
 * the table inside the page at every width, without turning it into something
 * that scrolls on its own — a table a visitor has to drag sideways is a table
 * whose last column is never read.
 */
.aii-legal .entry-content table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: var(--aii-space-6);
  font-size: var(--aii-text-small);
}

.aii-legal .entry-content th,
.aii-legal .entry-content td {
  text-align: left;
  vertical-align: top;
  padding: var(--aii-space-3) var(--aii-space-4) var(--aii-space-3) 0;
  border-bottom: 1px solid var(--aii-line);
  overflow-wrap: anywhere;
}

.aii-legal .entry-content th {
  color: var(--aii-ink-soft);
  font-weight: 600;
}

.aii-legal .entry-content code {
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* When this document last changed. Quiet, and above everything else. */
.aii-legal__stamp {
  color: var(--aii-ink-soft);
  font-size: var(--aii-text-small);
}

/*
 * The identity block: name, company number, VAT, postal address. Absent
 * entirely while the settings are empty, which is the state today.
 */
.aii-identity {
  margin: var(--aii-space-6) 0;
  padding: var(--aii-space-6);
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius-box);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--aii-space-2) var(--aii-space-6);
  font-size: var(--aii-text-small);
}

.aii-identity dt {
  color: var(--aii-ink-soft);
}

.aii-identity dd {
  margin: 0;
}

/*
 * Write to us.
 *
 * One column with a measure, not two: this is a form to fill in, and a form
 * beside a column of prose invites reading instead of writing.
 */
.aii-write {
  max-width: 42rem;
  margin-block: var(--aii-space-12);
  scroll-margin-top: 20vh;
}

.aii-write h2 {
  font-size: var(--aii-text-h2);
  margin: 0 0 var(--aii-space-4);
}

.aii-write__form {
  margin-top: var(--aii-space-8);
  padding: var(--aii-space-8);
  background: var(--aii-paper-raised);
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius-panel);
  box-shadow: var(--aii-shadow-1);
}

/* What went wrong with the whole send, rather than with one field. */
.aii-write__alarm {
  padding: var(--aii-space-3) var(--aii-space-4);
  border: 1px solid var(--aii-accent-to);
  border-radius: var(--aii-radius-box);
  color: var(--aii-accent-deep);
  font-size: var(--aii-text-small);
}

/*
 * The trap, and the only element on this site positioned off the page on
 * purpose.
 *
 * `display: none` would be simpler and is what half the internet uses, which
 * is exactly why the scripts worth catching skip such fields. This one is
 * reachable to a script reading the DOM and unreachable to a person: off
 * screen, out of the tab order, hidden from the accessibility tree.
 *
 * It cannot widen the page — left is negative and the box has no width of its
 * own — which matters here, because horizontal overflow is what the width
 * measurements fail on.
 */
.aii-write__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * The questions page. Two columns like the home page's block, but the answers
 * are open: this is a reference, and a collapsed answer is invisible to the
 * browser's own find-on-page. A visitor who searches and finds nothing decides
 * the answer is not here.
 */
.aii-questions {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: var(--aii-space-16);
  align-items: start;
  padding-block: var(--aii-space-16);
}

.aii-questions__toc {
  position: sticky;
  top: 16vh;
}

.aii-questions__toc ul {
  list-style: none;
  margin: var(--aii-space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--aii-space-2);
}

.aii-questions__toc a {
  color: var(--aii-ink-soft);
  text-decoration: none;
}

.aii-questions__toc a:hover {
  color: var(--aii-accent-to);
}

.aii-questions__more {
  margin-top: var(--aii-space-8);
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

.aii-questions__body {
  display: grid;
  gap: var(--aii-space-16);
}

.aii-questions__section h2 {
  font-size: var(--aii-text-h2);
  margin: 0 0 var(--aii-space-6);
  padding-bottom: var(--aii-space-4);
  border-bottom: 1px solid var(--aii-line);
}

.aii-questions__item {
  /* Room for the sticky header when a link lands on an anchor. */
  scroll-margin-top: 20vh;
  margin-bottom: var(--aii-space-8);
  overflow-wrap: anywhere;
}

.aii-questions__item h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 var(--aii-space-2);
}

.aii-questions__answer {
  color: var(--aii-ink-soft);
}

.aii-questions__answer p {
  margin: 0;
  max-width: 62ch;
}

@media (max-width: 900px) {
  .aii-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aii-space-8);
  }

  .aii-faq__aside {
    position: static;
  }

  .aii-questions {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aii-space-8);
  }

  .aii-questions__toc {
    position: static;
  }
}

/*
 * A long unbroken string — a pasted address, a description with no spaces —
 * is the third way a page goes wider than the phone holding it.
 */
.aii-card,
.aii-faq details {
  overflow-wrap: anywhere;
}

/* Screen-reader-only, for labels a sighted visitor gets from context. */
.aii-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Everyone who asked their system to stop animating things gets a still page.
 * Some people get motion sickness from exactly the kind of slow drift this
 * design is built on, and honouring the request costs one block.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * The tool screens, brought up to the home page.
 *
 * The band runs behind the whole screen and the controls sit on a white panel
 * on top of it. That is the same trick the home page uses, inverted: there a
 * cream band interrupts a white page, here a white panel lifts off a cream
 * one. Either way the depth comes from two surfaces, not from a shadow.
 */
/* See the aii-flush body class in functions.php for why the article chrome
   has to go before this band can reach both edges. */
.aii-flush .inside-article,
.aii-flush .entry-content,
.aii-flush .site-content {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/*
 * No band behind the tool page.
 *
 * The panel carries its own edge and shadow; a cream field under it was a
 * second surface doing the panel's job, and the page came out striped. The
 * same removal the questions section and the footer already had.
 */
.aii-toolpage {
  padding-block: var(--aii-space-16) var(--aii-space-24);
}

.aii-toolpage__head {
  text-align: center;
  margin-bottom: var(--aii-space-12);
}

.aii-toolpage__title {
  font-size: var(--aii-text-h2);
  margin: 0 0 var(--aii-space-4);
}

.aii-toolpage__head .aii-lede {
  margin-inline: auto;
}

/* Tabs across the four screens, matching the home panel. */
.aii-tabs {
  display: inline-flex;
  gap: var(--aii-space-1);
  margin-top: var(--aii-space-8);
  padding: var(--aii-space-2);
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius);
  background: var(--aii-page);
  max-width: 100%;
  overflow-x: auto;
}

.aii-tabs__tab {
  flex: 0 0 auto;
  padding: var(--aii-space-2) var(--aii-space-4);
  border-radius: var(--aii-radius);
  color: var(--aii-ink-soft);
  font-size: var(--aii-text-small);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.aii-tabs__tab:hover {
  color: var(--aii-ink);
}

/*
 * The current tab, marked without a fill.
 *
 * It was a cream pill, and cream was the last of it left on these screens —
 * the owner spotted it on /tools/ after everything else had gone white. The
 * mark cannot simply be deleted, though: without it nobody can tell which of
 * the four screens they are on. Weight and the accent underneath say the same
 * thing and leave the surface alone.
 */
.aii-tabs__tab[aria-current="page"] {
  color: var(--aii-ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--aii-accent-to);
  border-radius: 0;
}

.aii-tool__panel {
  padding: 0;
  overflow: hidden;
}

.aii-tool__meter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--aii-space-4);
  padding: var(--aii-space-4) var(--aii-space-8);
  border-bottom: 1px solid var(--aii-line);
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

.aii-tool__meter strong {
  font-family: var(--aii-font-display);
  font-size: 1.75rem;
  color: var(--aii-ink);
}

/*
 * Inside the wide panel: the description on the left with the room to be read,
 * the three settings stacked at its right. Below 860 they fall into one column.
 */
.aii-tool__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0 var(--aii-space-8);
  align-items: start;
  padding: var(--aii-space-8) var(--aii-space-8) var(--aii-space-4);
}

.aii-tool__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aii-space-4);
  padding: var(--aii-space-4) var(--aii-space-6) var(--aii-space-6);
}

.aii-tool__price {
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

.aii-tool__state {
  margin: 0;
  padding: 0 var(--aii-space-6) var(--aii-space-6);
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
  min-height: 1.4em;
}

/*
 * The panel is a real panel here, not a card: the home page taught the visitor
 * what that object looks like, and every other screen has to be recognisably
 * the same object rather than a different site with the same colours.
 *
 * Stated here rather than on `.aii-panel` alone, because home.css is loaded
 * only on the front page — a class that works on one screen and quietly does
 * nothing on the others. The account page found that out: its left column
 * carried `aii-panel` and arrived with no edge and no shadow at all.
 *
 * The sign-in screens found it out a second time, and that is the part worth
 * remembering: this list is the thing that has to be added to. `aii-panel`
 * reads like a working class on any screen — nothing about the markup says it
 * is inert — so every new panel outside the front page is silently a white
 * rectangle until its own name is written here. Three sign-in screens stood
 * that way, square-cornered and edgeless, with the comment above them.
 */
.aii-panel.aii-tool__panel,
.aii-panel.aii-auth__panel,
.aii-account__meter,
.aii-account__empty {
  background: var(--aii-page);
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius-panel);
  box-shadow: var(--aii-shadow-2);
}

/*
 * The sign-in screens.
 *
 * Two columns on a desk: why anyone would fill the form in on the left, the
 * form itself on the right. A form alone on an empty page says nothing about
 * what it is for, and this is the screen where a stranger decides whether to
 * bother.
 */
/*
 * No cream band here. The three sign-in screens sit on the page's own warm
 * wash, like everything else.
 *
 * The band was laid over it, which hid the wash entirely and made these the
 * only screens with a different ground. That is the same complaint as the
 * tool screens the day before: two surfaces that look alike, on a site that
 * should have one. The panel on the right lifts off on its own edge and
 * shadow and does not need a band behind it to be found.
 */
.aii-authpage {
  padding-block: var(--aii-space-24);
}

.aii-auth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--aii-space-24);
  align-items: start;
}

.aii-auth__title {
  font-size: var(--aii-text-h2);
  margin: 0 0 var(--aii-space-4);
}

.aii-auth__list {
  list-style: none;
  margin: var(--aii-space-8) 0 var(--aii-space-4);
  padding: 0;
  display: grid;
  gap: var(--aii-space-3);
  color: var(--aii-ink-soft);
}

.aii-auth__list strong {
  font-family: var(--aii-font-display);
  font-size: 1.75rem;
  color: var(--aii-ink);
  margin-right: var(--aii-space-2);
}

.aii-auth__proof {
  margin: var(--aii-space-12) 0 0;
  max-width: 380px;
}

/* Capped: a portrait example ran the page on for another screenful, and the
   picture is here as evidence, not as the subject. */
.aii-auth__proof img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--aii-radius-box);
  box-shadow: var(--aii-shadow-1);
}

.aii-auth__proof figcaption {
  margin-top: var(--aii-space-3);
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

.aii-auth__panel {
  background: var(--aii-page);
  padding: var(--aii-space-8);
  max-width: none;
}

.aii-auth__panel p:first-child {
  margin-top: 0;
}

.aii-auth__submit {
  width: 100%;
}

.aii-auth__aside {
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
  margin-block: var(--aii-space-3) 0;
}

.aii-auth__fineprint {
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

.aii-auth__alert {
  padding: var(--aii-space-3) var(--aii-space-4);
  border: 1px solid var(--aii-accent-to);
  border-radius: var(--aii-radius-box);
  color: var(--aii-accent-deep);
  font-size: var(--aii-text-small);
}

/*
 * Below this width the two columns become one, and the form goes first: a
 * visitor who came here to sign in should not have to scroll past the sales
 * pitch to reach the field.
 */
@media (max-width: 900px) {
  .aii-auth__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aii-space-12);
  }

  .aii-auth__panel {
    order: -1;
  }

  .aii-auth__proof {
    display: none;
  }
}

/*
 * Hover states, written so the parent cannot take them.
 *
 * GeneratePress prints `button:hover { color: #fff; background-color: #3f4047 }`
 * inline in the page. That is an element plus a pseudo-class — exactly the
 * weight of a bare class of ours — and being printed after our stylesheets it
 * wins the tie. Every button we styled by class alone turned charcoal under
 * the cursor: the panel tabs, the quick-start chips, and the Create button
 * itself.
 *
 * Naming the element as well as the class settles it, and each rule states
 * both colour and background so nothing is left for the parent to supply.
 */
button.aii-button:hover,
button.aii-button:focus,
button.aii-button:focus-visible,
a.aii-button:hover,
a.aii-button:focus-visible {
  background-color: var(--aii-accent-to);
  color: var(--aii-paper-raised);
}

button.aii-button--quiet:hover,
button.aii-button--quiet:focus,
a.aii-button--quiet:hover,
a.aii-button--quiet:focus-visible {
  background-color: transparent;
  color: var(--aii-ink);
  border-color: var(--aii-ink-soft);
}

button.aii-panel__tab:hover,
button.aii-panel__tab:focus,
button.aii-panel__tab:focus-visible {
  background-color: var(--aii-page);
  color: var(--aii-ink);
}

button.aii-panel__tab[aria-selected="true"] {
  background-color: var(--aii-page);
  color: var(--aii-ink);
  box-shadow: var(--aii-shadow-1);
}

button.aii-chip:hover,
button.aii-chip:focus,
button.aii-chip:focus-visible {
  background-color: var(--aii-page);
  color: var(--aii-ink);
  border-color: var(--aii-ink-soft);
}

/* A visible ring for anyone moving by keyboard, on our terms not the parent's. */
button.aii-button:focus-visible,
button.aii-panel__tab:focus-visible,
button.aii-chip:focus-visible,
a.aii-button:focus-visible {
  outline: 2px solid var(--aii-ink);
  outline-offset: 2px;
}

/*
 * The account.
 *
 * The same two surfaces as every other screen: a panel that lifts off the page
 * on its own edge and shadow, and the work itself laid straight on the page.
 * The balance is set in the display face at the size of a headline, because it
 * is the one number a visitor came here to read.
 */
.aii-account {
  margin-block: var(--aii-space-12);
}

.aii-account__head {
  text-align: center;
  margin-bottom: var(--aii-space-12);
}

.aii-account__title {
  font-size: var(--aii-text-h2);
  margin: 0;
}

.aii-account__body {
  display: grid;
  gap: var(--aii-space-8);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: start;
}

/*
 * The meter stays in view while the gallery scrolls past it. On a long list
 * the balance is the thing you keep glancing back at, and scrolling to the top
 * for it is the kind of small friction that reads as cheap.
 */
.aii-account__meter {
  position: sticky;
  top: 16vh;
  padding: var(--aii-space-8) var(--aii-space-6);
  text-align: center;
}

.aii-account__balance {
  font-family: var(--aii-font-display);
  font-size: var(--aii-text-h2);
  line-height: 1;
  margin: var(--aii-space-2) 0 var(--aii-space-6);
}

.aii-account__act {
  margin: 0 0 var(--aii-space-4);
}

.aii-account__fineprint {
  margin: 0;
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
}

.aii-account__empty {
  padding: var(--aii-space-16);
  text-align: center;
}

.aii-account__work {
  display: grid;
  gap: var(--aii-space-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.aii-account__item {
  margin: 0;
}

/*
 * A square for everything, whatever shape it was made in. A grid of mixed
 * heights reads as a mistake; object-fit crops to the middle, which is where
 * the subject of a generated picture nearly always is.
 */
.aii-account__work img,
.aii-account__work video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--aii-radius-box);
  background: var(--aii-band);
  border: 1px solid var(--aii-line);
}

.aii-account__caption {
  margin-top: var(--aii-space-2);
  text-align: center;
}

/*
 * Element-qualified, because GeneratePress paints `button` by element name and
 * a bare class loses that tie. The same rule that turned every button on this
 * site charcoal on hover until it was written this way.
 */
button.aii-account__delete {
  padding: 0;
  border: 0;
  background: none;
  color: var(--aii-ink-soft);
  font: inherit;
  font-size: var(--aii-text-small);
  cursor: pointer;
  text-decoration: underline;
}

button.aii-account__delete:hover,
button.aii-account__delete:focus {
  background: none;
  color: var(--aii-accent-to);
}

.aii-account--out {
  margin-block: var(--aii-space-12);
  text-align: center;
}

@media (max-width: 860px) {
  .aii-account__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .aii-account__meter {
    position: static;
  }
}

/*
 * Presets.
 *
 * Tiles rather than a dropdown: the point is that a visitor who does not know
 * what to ask for can see six answers at once. A list hidden behind a click
 * only helps someone who already knows the word they are looking for.
 */
.aii-presets {
  padding: 0 var(--aii-space-6) var(--aii-space-4);
}

.aii-presets__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--aii-space-2);
}

button.aii-presets__tile {
  display: grid;
  gap: 2px;
  padding: var(--aii-space-3);
  text-align: left;
  border: 1px solid var(--aii-line);
  border-radius: var(--aii-radius-box);
  background-color: var(--aii-page);
  background-image: none;
  animation: none;
  color: var(--aii-ink);
  cursor: pointer;
  box-shadow: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

button.aii-presets__tile:hover {
  background-color: var(--aii-band);
  color: var(--aii-ink);
  border-color: var(--aii-ink-soft);
}

/*
 * The chosen tile. Element-qualified for the same reason every other button
 * rule here is: GeneratePress paints `button` by element name, and a bare
 * class loses that argument.
 */
button.aii-presets__tile[aria-pressed="true"] {
  border-color: var(--aii-accent-to);
  background-color: var(--aii-band);
  box-shadow: inset 3px 0 0 var(--aii-accent-to);
}

.aii-presets__name {
  font-size: var(--aii-text-small);
  font-weight: 600;
}

.aii-presets__hint {
  font-size: var(--aii-text-tiny);
  color: var(--aii-ink-soft);
}

.aii-presets__note {
  margin: var(--aii-space-3) 0 0;
  font-size: var(--aii-text-tiny);
  color: var(--aii-ink-soft);
}

/* The clip's "keep out" line needs a whole row; a seed needs almost none. */
.aii-panel__pick--wide {
  grid-column: 1 / -1;
}

/* Inside the tool page's narrow column the tiles stack two abreast. */
.aii-presets--stacked {
  padding: 0;
  margin-block: var(--aii-space-4);
}

.aii-presets--stacked .aii-presets__row {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.aii-presets__label {
  font-size: var(--aii-text-small);
  color: var(--aii-ink-soft);
  margin: 0 0 var(--aii-space-2);
}

/*
 * The line under a control that says what it is for.
 *
 * Added because the owner looked at "Reading" and "Seed" and asked what they
 * meant. If the person who commissioned the site has to ask, a visitor does
 * not ask — they skip the control, and a setting nobody understands is a
 * setting nobody uses. The label was renamed and the sentence added in the
 * same pass.
 */
.aii-field__hint {
  font-size: var(--aii-text-tiny);
  line-height: 1.45;
  color: var(--aii-ink-soft);
}

/*
 * "Another like this", and the line that says a look is being held.
 *
 * The seed used to be an empty box in the settings. The owner, who knows this
 * project better than anyone, looked at it and said she still did not
 * understand it — which meant no visitor would. A seed asks for a number
 * nobody has yet, and no wording rescues a question asked at the wrong
 * moment. It is a button on a finished picture now.
 */
button.aii-again {
  padding: 0;
  border: 0;
  background: none;
  color: var(--aii-ink-soft);
  font: inherit;
  font-size: var(--aii-text-small);
  cursor: pointer;
  text-decoration: underline;
}

button.aii-again:hover,
button.aii-again:focus {
  background: none;
  color: var(--aii-accent-to);
}

.aii-carried {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--aii-space-3);
  margin: 0 0 var(--aii-space-4);
  padding: var(--aii-space-3) var(--aii-space-4);
  border-left: 3px solid var(--aii-accent-to);
  background: var(--aii-band);
  border-radius: var(--aii-radius-box);
  font-size: var(--aii-text-small);
  color: var(--aii-ink);
}

button#ai-studio-fresh {
  padding: 0;
  border: 0;
  background: none;
  color: var(--aii-ink-soft);
  font: inherit;
  font-size: var(--aii-text-small);
  cursor: pointer;
  text-decoration: underline;
}

button#ai-studio-fresh:hover {
  background: none;
  color: var(--aii-accent-to);
}

/*
 * The description takes the left column and all the height it needs; the
 * pickers stack on the right; the presets and the button run the full width
 * underneath. Named rows rather than auto-placement, because auto-placement
 * put the shape picker under the description and left a hole beside it.
 */
.aii-tool__fields > [data-field="words"] {
  grid-column: 1;
  grid-row: 1 / span 4;
}

.aii-tool__fields > [data-field="words"] textarea {
  min-height: 190px;
}

.aii-tool__fields > [data-field="file"],
.aii-tool__fields > [data-field="style"],
.aii-tool__fields > [data-field="shape"],
.aii-tool__fields > [data-field="speed"],
.aii-tool__fields > [data-field="negative"] {
  grid-column: 2;
  margin-block: 0 var(--aii-space-4);
}

.aii-tool__fields > .aii-presets {
  grid-column: 1 / -1;
}

.aii-tool__fields > .aii-presets .aii-presets__row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 860px) {
  .aii-tool__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .aii-tool__fields > [data-field="words"] {
    grid-column: 1;
    grid-row: auto;
  }

  .aii-tool__fields > [data-field="file"],
  .aii-tool__fields > [data-field="style"],
  .aii-tool__fields > [data-field="shape"],
  .aii-tool__fields > [data-field="speed"],
  .aii-tool__fields > [data-field="negative"] {
    grid-column: 1;
  }
}

/*
 * A tool with no description gets one column, not a hole.
 *
 * The wide panel reserves the left half for the description, which is right
 * on /create/ and wrong everywhere else: "Apply a style" takes a picture and
 * a style and nothing to type, so half the panel sat empty. Found by looking
 * at the live site, on three screens out of four — /create/ was the one that
 * looked fine, which is why the layout shipped.
 *
 * :has() asks the live question — is there a visible description field right
 * now — so the answer follows the script hiding and showing fields rather
 * than a list of screen names that would drift from it.
 */
.aii-tool__fields:not(:has(> [data-field="words"]:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

.aii-tool__fields:not(:has(> [data-field="words"]:not([hidden]))) > [data-field] {
  grid-column: 1;
}