/* Native side panel placement — .form-side__panel provides height, scrolling
   and padding; the title is built from Wagtail's own card-title classes.
   Sections mimic the native panels' cards: vertically padded so the
   w-divide-y hairlines get breathing room, and step content indented by
   1.75rem to align with the title text (1rem icon + 0.75rem gap). */
.wai-panel .wai-panel-header,
.wai-panel .wai-step,
.wai-panel .wai-error,
.wai-panel .wai-refine,
.wai-panel .wai-review-exit,
.wai-panel .wai-recent,
.wai-panel .wai-suggested,
.wai-panel .wai-footnote {
  padding-block: 1.5rem;
}

/* Native panels inset section content from the right (w-pr-5) while the
   hairlines span the full width; mirror that. The header already carries
   its own w-pr-5 on the title column. */
.wai-panel .wai-step,
.wai-panel .wai-error,
.wai-panel .wai-refine,
.wai-panel .wai-review-exit,
.wai-panel .wai-recent,
.wai-panel .wai-suggested,
.wai-panel .wai-footnote {
  padding-inline-end: 1.25rem;
}

/* Fold-out cards (suggested/recent prompts, refine result): a native <details>,
   collapsed by default, with a Wagtail-style chevron instead of the UA marker. */
.wai-fold summary {
  cursor: pointer;
  list-style: none;
}

.wai-fold summary::-webkit-details-marker {
  display: none;
}

.wai-fold summary h3 {
  flex: 1;
  margin: 0;
}

.wai-fold-chevron {
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.wai-fold[open] .wai-fold-chevron {
  transform: rotate(0deg);
}

/* Indents prose to align with the panel title. The fold-out cards
   (suggested/recent/refine) are left out on purpose: their summary is icon-led
   like the title itself, and their body does the indenting instead. */
.wai-panel .wai-step,
.wai-panel .wai-error,
.wai-panel .wai-review-exit,
.wai-panel .wai-footnote {
  margin: 0;
  padding-inline-start: 1.75rem;
}

/* Fallback placement when the editor header markup isn't recognized. */
.wai-fab {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 400;
  padding: 10px 16px;
  border: 0;
  border-radius: 24px;
  background: #007d7e;
  color: #fff;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.wai-fab:hover {
  background: #005b5c;
}

.wai-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.wai-modal {
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  color: #222;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  /* The modal is the scroller — its padding keeps focus rings on the form
     controls from being clipped. Steps must never scroll themselves. */
  overflow-y: auto;
}

.wai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.wai-header h2 {
  margin: 0;
  font-size: 1.2em;
  color: inherit;
}

.wai-close {
  border: 0;
  background: none;
  font-size: 1.6em;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

.wai-label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
}

.wai-instruction,
.wai-refine-input,
.wai-scope {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
  font-weight: 400;
}

/* Indented to align with the summary title text, like the prompt lists. */
.wai-refine-body {
  margin-top: 0.75rem;
  padding-inline-start: 1.75rem;
}

.wai-refine-btn {
  margin-top: 8px;
}

.wai-files {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-weight: 400;
  font-size: 0.9em;
}

/* One quiet row of reveal links under the instruction box; each one shows a
   rarely-needed field (see setFilesVisible/setScopeVisible in the JS). The
   icons are what make them read as actions rather than hyperlinks, so the
   underline waits for hover. */
.wai-form-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 12px;
  font-size: 0.85em;
}

.wai-form-extras .wai-link-btn {
  text-decoration: none;
}

.wai-form-extras .wai-link-btn:hover,
.wai-form-extras .wai-link-btn:focus-visible {
  text-decoration: underline;
}

.wai-form-extras .icon {
  width: 1em;
  height: 1em;
  margin-inline-end: 5px;
  vertical-align: -0.125em;
  fill: currentColor;
}

.wai-hint {
  font-weight: 400;
  font-size: 0.85em;
  color: #555;
}

/* Segment location inside a generated field group, e.g. "Body → 1. Heading". */
.wai-edit-caption {
  margin: 8px 0 0;
  font-size: 0.8em;
  color: #555;
}

.wai-note {
  margin: 12px 0;
  font-size: 0.85em;
  color: #555;
}

/* First line of the footnote card, above .wai-note (which has no margins). */
.wai-context {
  margin: 0 0 8px;
  font-size: 0.85em;
  color: #333;
}

.wai-modal .wai-recent,
.wai-modal .wai-suggested,
.wai-modal .wai-footnote {
  margin-top: 16px;
}

/* The modal has no w-divide-y to inherit a hairline from, so the refine card
   draws its own — bled out over the modal's 20px padding so the seam spans it
   edge to edge like the panel's, then padded back in. */
.wai-modal .wai-refine,
.wai-modal .wai-review-exit {
  margin-top: 16px;
  margin-inline: -20px;
  padding: 16px 20px 0;
  border-top: 1px solid #e0e0e0;
}

.wai-footnote .wai-note,
.wai-review-exit .wai-note {
  margin: 0;
}

.wai-footnote .wai-note + .wai-note {
  margin-top: 8px;
}

/* Indented to align with the summary title text (1rem icon + 0.75rem gap). */
.wai-recent-list,
.wai-suggested-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0.75rem 0 0;
  padding: 0;
  padding-inline-start: 1.75rem;
  list-style: none;
}

/* One-click prompt refills, shared by the recent and suggested cards. */
.wai-chip {
  display: block;
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.85em;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.wai-chip:hover {
  border-color: #007d7e;
  color: #007d7e;
}

/* The model's account of what it did, in its own voice — the one piece of prose
   in the panel rather than a control or a label. Set as a thought: serif,
   italic, larger than the UI text and unboxed, so it reads as something said
   rather than as another field of the form. */
.wai-rationale {
  margin: 0 0 2em;
  /* Wagtail's strongest body colour: near-black on the light theme, and it
     flips on the dark one, which a literal black would not. */
  color: var(--w-color-text-context, #1a1a1a);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.15em;
  font-style: italic;
  line-height: 1.6;
}

/* A button that reads as a text link — for actions that must stay available
   without competing with the step's primary button. */
.wai-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: #007d7e;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.wai-forget-btn {
  margin-left: 6px;
}

/* The review's exit card: explanatory text, then the actions as links on a line
   of their own so neither competes with Apply. */
.wai-exit-actions {
  margin: 8px 0 0;
  font-size: 0.85em;
}

.wai-exit-sep {
  margin: 0 6px;
  color: #767676;
}

.wai-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
}

/* Wagtail's legacy `.button + .button { margin-inline-start: 1rem }` still
   matches when the first button is display:none (adjacency is a DOM fact),
   so in generate mode the visible button sits indented behind the hidden
   Preview one. The flex gap above owns the spacing here. */
.wai-actions .button + .button {
  margin-inline-start: 0;
}

.wai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 32px 0;
  font-size: 1.05em;
}

/* Wagtail's admin CSS already spins any `use[href="#icon-spinner"]` with its
   own spin-wag keyframes, so this only has to size and colour the icon —
   defining a second animation here would fight it. */
.wai-spinner {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--w-color-text-label, #333);
}

/* Wagtail spins a full turn every .5s, which reads as frantic next to a
   request that takes tens of seconds; half speed suits the wait. Duration
   only, so the keyframes and timing function stay Wagtail's, and the selector
   repeats its `use[href=…]` to outrank it on specificity, like the
   reduced-motion block below. */
.wai-spinner use[href="#icon-spinner"] {
  animation-duration: 1s;
}

/* Tabular digits and a floor on the width so the row doesn't twitch as the
   count ticks past 9s — the admin sets box-sizing: border-box globally, so that
   floor has to cover the padding as well as the digits. Set well back and in
   the palette's most muted text token (lighter than text-meta in light mode,
   darker in dark mode, so it reads as an aside in both): the count is
   reassurance, not the message. */
.wai-elapsed {
  min-width: 4.5ch;
  padding-inline-start: 0.5rem;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  color: var(--w-color-text-placeholder, #929292);
}

/* Wagtail's own reduced-motion block covers its tabs, not the spinner, so stop
   the rotation here. Safe to leave the icon static only because the counter
   beside it keeps ticking — without that, the step would look hung.
   The selector repeats Wagtail's `use[href=…]` to outrank it on specificity
   rather than on load order, which only happens to favour us today. */
@media (prefers-reduced-motion: reduce) {
  .wai-spinner use[href="#icon-spinner"] {
    animation: none;
  }
}

.wai-edit {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-weight: 400;
  cursor: pointer;
}

.wai-edit input[type="checkbox"] {
  margin-top: 3px;
}

.wai-edit-body {
  min-width: 0;
}

/* The item is a <div> (a nested confirm checkbox inside a <label> would toggle
   the outer one), so the heading carries the click-to-select affordance. */
.wai-edit-heading {
  display: block;
  font-weight: 700;
  cursor: pointer;
}

/* Tags a rewrite added or removed. Shown because the text diff strips markup,
   so this is the only place the change is visible. */
.wai-markup-delta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin: 6px 0;
  font-size: 0.85em;
}

.wai-markup-delta code {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

.wai-tag-added {
  background: #ccffd8;
  color: #055d20;
}

.wai-tag-removed {
  background: #ffd7d5;
  color: #82071e;
}

.wai-confirm {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 0;
  font-size: 0.85em;
}

.wai-confirm label {
  cursor: pointer;
}

.wai-confirm-hint {
  margin: 0 0 10px;
  color: #8a5a00;
  font-size: 0.85em;
}

.wai-rejected {
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #f0c000;
  border-radius: 6px;
  background: #fffbe6;
  font-size: 0.9em;
}

.wai-rejected p {
  margin: 4px 0 0;
}

.wai-diff {
  margin-top: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.95em;
  line-height: 1.5;
}

.wai-diff del {
  background: #ffd7d5;
  color: #82071e;
  text-decoration: line-through;
}

.wai-diff ins {
  background: #ccffd8;
  color: #055d20;
  text-decoration: none;
}

.wai-error {
  margin: 10px 0 0;
  color: #b00;
  font-weight: 600;
}