/**
 * @file
 * CycleIn content pages: About us paragraph sections and editorial document
 * pages (Contact, Privacy, Accessibility).
 *
 * All values are driven from the C09 design tokens (tokens.css). Placeholder
 * imagery is generated by the content seed; real photography replaces it later.
 */

/* ==========================================================================
   Shared: CTA item buttons (split + at-a-glance).
   ========================================================================== */

.paragraph--cta-item .cyclein-button::after {
  content: "\2192";
  font-weight: var(--font-weight-bold);
}

.paragraph--cta-item--pink-primary .cyclein-button {
  background: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
}

.paragraph--cta-item--pink-primary .cyclein-button:hover {
  background: var(--color-brand-pink-hover);
  border-color: var(--color-brand-pink-hover);
}

/* ==========================================================================
   About hero (dark teal + lime).
   ========================================================================== */

.paragraph--about-hero {
  background: var(--color-brand-black);
  color: var(--color-brand-white);
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
  padding-block: var(--space-96);
}

.paragraph--about-hero__inner {
  align-items: center;
  column-gap: var(--space-64);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  inline-size: var(--cyclein-container);
  margin-inline: auto;
}

.paragraph--about-hero__eyebrow {
  color: var(--color-brand-white);
  font-size: var(--type-mobile-label-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  margin-block-end: var(--space-8);
  text-transform: uppercase;
}

.paragraph--about-hero__heading {
  color: var(--color-brand-white);
  margin-block-end: var(--space-24);
  text-transform: uppercase;
}

.paragraph--about-hero__intro {
  color: var(--color-brand-black-tint);
  font-size: var(--type-body-large-size);
  max-inline-size: 46ch;
}

.paragraph--about-hero__intro p:last-child {
  margin-block-end: 0;
}

.paragraph--about-hero__graphic {
  align-items: center;
  aspect-ratio: 1;
  background: var(--color-brand-yellow);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: flex;
  inline-size: min(320px, 100%);
  justify-content: center;
  justify-self: end;
}

/* The field/media wrapper around the inline brand mark is a block box that
   would left-align the SVG; make it fill the disk and centre the mark. */
.paragraph--about-hero__graphic > * {
  align-items: center;
  block-size: 100%;
  display: flex;
  inline-size: 100%;
  justify-content: center;
}

.paragraph--about-hero__graphic svg {
  block-size: 76%;
  inline-size: 76%;
}

/* The dedicated 1440px About frame uses a 480px hero, a 288px brand disc and
   a 588px copy column that wraps ABOUT / CYCLEIN onto two lines. */
@media (min-width: 1024px) {
  .paragraph--about-hero {
    block-size: 480px;
    box-sizing: border-box;
  }

  .paragraph--about-hero__inner {
    align-items: start;
  }

  .paragraph--about-hero__content {
    inline-size: 588px;
    max-inline-size: 100%;
  }

  .paragraph--about-hero__graphic {
    inline-size: 288px;
    justify-self: start;
    margin-inline-start: var(--space-48);
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--split-content-image__media {
    inline-size: 420px;
    justify-self: center;
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--at-a-glance-card__inner {
    inline-size: min(var(--cyclein-container), 723px);
    padding: var(--space-32);
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--at-a-glance-card__heading {
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line-height);
  }

  /* The supplied desktop frame gives the summary band 615px. Its approved
     content fits with 24px before and after the checklist and a 14.5px row
     rhythm; the generic card spacing made this one section 20px too tall. */
  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--at-a-glance-card__intro {
    margin-block-end: var(--space-24);
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--at-a-glance-card__list {
    gap: 14.5px var(--space-32);
    margin-block-end: var(--space-24);
  }
}

/* ==========================================================================
   At a glance card (white card on a light grey band).
   ========================================================================== */

.paragraph--at-a-glance-card {
  background: var(--color-green-light);
  padding-block: var(--space-96);
}

.paragraph--at-a-glance-card__inner {
  background: var(--color-white);
  border-radius: var(--radius-24);
  inline-size: min(var(--cyclein-container), 780px);
  margin-inline: auto;
  padding: var(--space-56);
}

.paragraph--at-a-glance-card__heading {
  margin-block-end: var(--space-16);
}

.paragraph--at-a-glance-card__intro {
  color: var(--color-brand-black-muted);
  margin-block-end: var(--space-32);
  max-inline-size: 54ch;
}

.paragraph--at-a-glance-card__intro p:last-child {
  margin-block-end: 0;
}

.paragraph--at-a-glance-card__list {
  display: grid;
  gap: var(--space-16) var(--space-32);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 var(--space-32);
  padding: 0;
}

/* At-a-glance checklist ticks use the lime brand mark with a dark glyph. */
.paragraph--at-a-glance-card .paragraph--checklist-item {
  font-weight: var(--font-weight-regular);
}

.paragraph--at-a-glance-card .paragraph--checklist-item__icon--default {
  background: var(--color-brand-yellow);
  block-size: var(--space-24);
  inline-size: var(--space-24);
}

.paragraph--at-a-glance-card .paragraph--checklist-item__icon--default::after {
  background-color: var(--color-brand-black);
}

/* ==========================================================================
   Editorial document pages (Contact, Privacy, Accessibility).
   ========================================================================== */

/* Semantic fallback when a configured landing intro is not viewable. The field
   formatter suppresses the Paragraph; keep the node label readable without
   leaking its inaccessible content. */
.cyclein-node__fallback-title {
  inline-size: var(--cyclein-container);
  margin-inline: auto;
  padding-block: var(--space-64);
}

.cyclein-doc__hero {
  background: var(--color-white);
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-96);
}

.cyclein-doc__body {
  background: var(--color-green-light);
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-96);
}

/* Static document pages use the Figma 12-column shell: 120px desktop side
   margins with a 1200px max-width, falling back to 32px gutters below desktop. */
.cyclein-doc__inner {
  inline-size: min(100% - (var(--space-32) * 2), var(--layout-max-width));
  margin-inline: auto;
  padding-inline: 0;
}

@media (min-width: 1200px) {
  .cyclein-doc__inner {
    inline-size: min(100% - (var(--layout-side-margin) * 2), var(--layout-max-width));
  }
}

/* Document meta line ("Last updated: 11 May 2026"): sentence case, per the C10
   prototypes — not uppercased. */
.cyclein-doc__meta {
  color: var(--color-brand-black-muted);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-label-line-height);
  margin-block-end: var(--space-24);
}

.cyclein-doc__title {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  margin: 0;
}

.cyclein-doc__prose {
  max-inline-size: 66ch;
}

.cyclein-doc__prose > :first-child {
  margin-block-start: 0;
}

.cyclein-doc__prose > :last-child {
  margin-block-end: 0;
}

.cyclein-doc__prose p {
  margin-block: 0 var(--space-24);
}

/* Each body section is an H2 with an underline rule spanning the prose column.
   Round-8 r36/r38: the Figma paints that rule in the brand green (#00ff00), not
   pink; applied to every document paragraph line. */
.cyclein-doc__prose h2 {
  border-block-end: 2px solid var(--color-brand-lime);
  color: var(--color-brand-black);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  margin-block: var(--space-40) var(--space-24);
  padding-block-end: var(--space-12);
}

.cyclein-doc__prose h3 {
  color: var(--color-brand-black);
  font-size: var(--type-body-large-size);
  margin-block: var(--space-24) var(--space-8);
}

.cyclein-doc__prose ul,
.cyclein-doc__prose ol {
  margin-block: 0 var(--space-16);
  padding-inline-start: var(--space-24);
}

.cyclein-doc__prose ul {
  list-style: disc;
}

.cyclein-doc__prose ol {
  list-style: decimal;
}

.cyclein-doc__prose li {
  margin-block-end: var(--space-8);
}

.cyclein-doc__prose li:last-child {
  margin-block-end: 0;
}

.cyclein-doc__prose strong {
  font-weight: var(--font-weight-bold);
}

.cyclein-doc__prose a {
  color: var(--color-brand-black);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.cyclein-doc__prose a:hover {
  color: var(--color-brand-pink);
}

/* Contact page intro lede: a short lead line under the H1 on the white hero. */
.cyclein-doc__lede {
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-line-height);
  margin-block-start: var(--space-8);
  max-inline-size: 100%;
}

.cyclein-doc__lede p {
  margin: 0;
}

/* ==========================================================================
   Contact-method cards (P011 Contact — Support / Organisation / Feedback).
   Three white rounded cards on the light-grey document body band, each led by a
   lime circular icon. Real markup via the paragraph_contact_card bundle.
   ========================================================================== */

.cyclein-doc__sections {
  display: grid;
  gap: var(--space-32);
}

.cyclein-doc__sections--cards {
  max-inline-size: 100%;
}

/* Legacy whole-field rendering may add field / field-item wrappers between this
   grid and each card. Flatten only those known wrappers. Formatter children
   split by node preprocess are already direct Paragraph roots and must retain
   their own grid/background/padding box. */
.cyclein-doc__sections--cards > .field,
.cyclein-doc__sections--cards > .field > .field__items,
.cyclein-doc__sections--cards > .field > .field__item,
.cyclein-doc__sections--cards > .field > .field__items > .field__item {
  display: contents;
}

.paragraph--contact-card {
  background: var(--color-white);
  border-radius: var(--radius-24);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-brand-black) 6%, transparent);
  column-gap: var(--space-16);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--space-32);
}

.paragraph--contact-card__icon {
  align-items: center;
  background: var(--color-brand-yellow);
  block-size: var(--space-48);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: inline-flex;
  inline-size: var(--space-48);
  justify-content: center;
}

.paragraph--contact-card__glyph {
  block-size: var(--space-24);
  inline-size: var(--space-24);
}

/* Client fb5: an editor-uploaded icon media renders its inline SVG inside the
   lime medallion; size and colour it exactly like the default glyph. */
.paragraph--contact-card__icon .media {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.paragraph--contact-card__icon svg {
  block-size: var(--space-24);
  inline-size: var(--space-24);
}

.paragraph--contact-card__content {
  min-inline-size: 0;
}

.paragraph--contact-card__heading {
  color: var(--color-brand-black);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  margin-block: 0 var(--space-12);
}

.paragraph--contact-card__body {
  color: var(--color-brand-black);
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-line-height);
  max-inline-size: 100%;
}

.paragraph--contact-card__body :first-child {
  margin-block-start: 0;
}

.paragraph--contact-card__body :last-child {
  margin-block-end: 0;
}

.paragraph--contact-card__body p {
  margin-block: 0 var(--space-16);
}

.paragraph--contact-card__body ul {
  list-style: disc;
  margin-block: 0 var(--space-16);
  padding-inline-start: var(--space-24);
}

.paragraph--contact-card__body li {
  margin-block-end: var(--space-8);
}

.paragraph--contact-card__body li:last-child {
  margin-block-end: 0;
}

.paragraph--contact-card__actions {
  margin-block-start: var(--space-24);
}

.paragraph--contact-card__button::after {
  content: "\2192";
}

/* ==========================================================================
   Legal prose sections (P012 Privacy — structured document sections).
   Ordered prose-section paragraphs on the light-grey document body band, each a
   locked H2 with a pink underline rule over an editor-managed rich-text body.
   Real markup via the paragraph_prose_section bundle.
   ========================================================================== */

/* Prose sections read as continuous long-form copy, so the band uses a taller
   rhythm between sections than the contact-card grid. */
.cyclein-doc__sections--prose {
  gap: var(--space-24);
}

.paragraph--prose-section {
  max-inline-size: 100%;
}

/* Each section opens with a locked H2 carrying an underline rule spanning the
   prose column. Round-8 r36/r38: the design paints that rule in the brand green
   (#00ff00), not pink — applied to every document paragraph rule. */
.paragraph--prose-section__heading {
  border-block-end: 2px solid var(--color-brand-lime);
  color: var(--color-brand-black);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  margin-block: 0 var(--space-24);
  padding-block-end: var(--space-12);
}

.paragraph--prose-section__body > :first-child {
  margin-block-start: 0;
}

.paragraph--prose-section__body > :last-child {
  margin-block-end: 0;
}

.paragraph--prose-section__body p {
  margin-block: 0 var(--space-24);
}
/* Round-2 checklist r5: content-page prose lines — notably the multi-line,
   <br>-separated DPO address on /privacy-policy — sat tighter than the Figma,
   which gives body copy more breathing room. Lift the prose line-height so
   multi-line content reads with the design's spacing, on every content page. */
.paragraph--prose-section__body p,
.paragraph--prose-section__body li {
  line-height: 1.7;
}

.paragraph--prose-section__body h3 {
  color: var(--color-brand-black);
  font-size: var(--type-body-large-size);
  margin-block: var(--space-24) var(--space-8);
}

.paragraph--prose-section__body ul,
.paragraph--prose-section__body ol {
  margin-block: 0 var(--space-16);
  padding-inline-start: var(--space-24);
}

.paragraph--prose-section__body ul {
  list-style: disc;
}

.paragraph--prose-section__body ol {
  list-style: decimal;
}

.paragraph--prose-section__body li {
  margin-block-end: var(--space-8);
}

.paragraph--prose-section__body li:last-child {
  margin-block-end: 0;
}

.paragraph--prose-section__body strong {
  font-weight: var(--font-weight-bold);
}

.paragraph--prose-section__body a {
  color: var(--color-brand-black);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.paragraph--prose-section__body a:hover {
  color: var(--color-brand-pink);
}

/* ==========================================================================
   Cookie preference controls (F-024 — /cookies per-category Yes/No + save).
   Reuses the prose-section heading/body treatment above, then a fieldset per
   optional category and a single pink Save changes button.
   ========================================================================== */

.paragraph--cookie-preference__question {
  border: 0;
  margin: var(--space-16) 0 0;
  padding: 0;
}

.paragraph--cookie-preference__legend {
  color: var(--color-brand-black);
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--space-12);
  padding: 0;
}

.paragraph--cookie-preference__options {
  display: grid;
  gap: var(--space-8);
}

.paragraph--cookie-preference__option {
  align-items: center;
  display: flex;
  gap: var(--space-8);
}

.paragraph--cookie-preference__option input[type="radio"] {
  accent-color: var(--color-brand-black);
  block-size: var(--space-24);
  flex-shrink: 0;
  inline-size: var(--space-24);
  margin: 0;
}

.paragraph--cookie-preference__option label {
  color: var(--color-brand-black);
}

.paragraph--cookie-save-button {
  margin-block-start: var(--space-32);
}

.paragraph--cookie-save-button__button {
  min-inline-size: 200px;
}

/* The button component defaults to the brand-lime treatment (its own
   cyclein-button.css); pages that want the pink primary CTA layer it on top
   themselves (see catalogue.css, home.css) rather than the component
   asserting one universal "primary" colour. */
.paragraph--cookie-save-button__button.cyclein-button--primary {
  background-color: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
}

.paragraph--cookie-save-button__button.cyclein-button--primary:hover {
  background-color: var(--color-brand-pink-hover);
  border-color: var(--color-brand-pink-hover);
}

/* Legal-page support pointer. It deliberately lives in the document template
   instead of a content-dependent Custom Block placement, keeping a clean
   existing-config install possible while matching the supplied legal frames. */
.cyclein-doc__need-help {
  margin-block-start: var(--space-56);
}

.cyclein-need-help {
  align-items: center;
  background: var(--color-white);
  border: 2px solid var(--color-brand-lime);
  border-radius: var(--radius-24);
  column-gap: var(--space-40);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-32);
}

.cyclein-need-help h2 {
  color: var(--color-brand-black);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  margin: 0 0 var(--space-4);
}

.cyclein-need-help p {
  color: var(--color-brand-black-muted);
  margin: 0;
}

.cyclein-need-help__action a {
  align-items: center;
  background: var(--color-brand-black);
  border-radius: var(--radius-pill);
  color: var(--color-brand-white);
  display: inline-flex;
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-bold);
  gap: var(--space-8);
  min-block-size: var(--a11y-min-target);
  padding: var(--space-12) var(--space-24);
  text-decoration: none;
  white-space: nowrap;
}

.cyclein-need-help__action a {
  transition: background-color 140ms ease, color 140ms ease;
}

/* Preserve the dark filled treatment shown in the approved policy-page QA
   reference while still providing a clear hover response. */
.cyclein-need-help__action a:hover {
  background: var(--color-brand-black-hover);
  color: var(--color-brand-white);
}

.cyclein-need-help__action a::after {
  content: "\2192";
}

/* Document pages with a pre-footer (Privacy, Accessibility) continue the grey
   document band into the support card. Figma places that card 56px after the
   final prose line, then leaves 96px before the footer divider. */
.cyclein-page--doc .cyclein-page__main + .cyclein-region--pre-footer {
  margin-block-start: calc(-1 * var(--space-40));
  padding-block: 0 var(--space-96);
}

/* ==========================================================================
   Responsive.
   ========================================================================== */

@media (max-width: 1023px) {
  .paragraph--about-hero {
    padding-block: var(--space-24);
  }

  .paragraph--about-hero__inner {
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: var(--space-40);
  }

  .paragraph--about-hero__graphic {
    inline-size: 220px;
    justify-self: start;
    order: -1;
  }

  .paragraph--about-hero__intro {
    font-size: var(--type-body-size);
  }

  .paragraph--at-a-glance-card {
    padding-block: var(--space-64);
  }

  .paragraph--at-a-glance-card__inner {
    padding: var(--space-40);
  }

  /* About mobile always leads each split row with its circular media, including
     rows whose desktop variant positions the image on the right. */
  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--split-content-image__media {
    order: -1;
  }
}

@media (max-width: 640px) {
  .cyclein-need-help {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-24);
    row-gap: var(--space-24);
  }

  .cyclein-need-help__action {
    justify-self: start;
  }

  /* The decorative lime infinity brandmark is beside the heading on desktop and
     floats above it on tablet; the Figma phone layout drops it, leading straight
     with the ABOUT CYCLEIN heading. */
  .paragraph--about-hero__graphic {
    display: none;
  }

  .paragraph--at-a-glance-card__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--split-content-image {
    padding-block: var(--space-40);
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--split-content-image__inner {
    row-gap: 26px;
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--split-content-image__heading {
    margin-block-end: 18px;
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--split-content-image__ctas {
    flex-direction: column;
  }

  .cyclein-page__main:has(.paragraph--about-hero) .paragraph--split-content-image__ctas .cyclein-button {
    inline-size: 100%;
    justify-content: center;
  }

  .paragraph--at-a-glance-card__inner {
    padding: var(--space-24);
  }

  .paragraph--at-a-glance-card {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    max-inline-size: 100vw;
    padding-block: var(--space-40);
  }

  .paragraph--at-a-glance-card__heading {
    font-size: var(--type-mobile-h3-size);
    line-height: var(--type-mobile-3-line-height);
  }

  .paragraph--at-a-glance-card__list {
    font-size: 14px;
    gap: var(--space-12);
    line-height: 1.5;
  }

  .paragraph--at-a-glance-card .paragraph--checklist-item__icon--default {
    block-size: var(--space-16);
    inline-size: var(--space-16);
  }

  .paragraph--at-a-glance-card .paragraph--cta-item .cyclein-button {
    inline-size: 100%;
    min-block-size: var(--a11y-min-target);
    padding-block: var(--space-8);
  }

  .cyclein-doc__hero,
  .cyclein-doc__body {
    padding-block: var(--space-48);
  }

  .cyclein-doc__inner {
    inline-size: min(100% - var(--space-32), var(--layout-max-width));
  }

  .paragraph--contact-card {
    padding: var(--space-24);
  }
}

/* Permission-aware content actions. Inner pages retain this established band;
   the homepage moves the same block to content_top before rendering. */
#block-cyclein-public-local-tasks {
  margin-block: var(--space-16) var(--space-24);
}

/* Round-1 checklist r10: the tab row was centred, which read as a floating
   strip rather than a page control. Every other band on the site anchors its
   content to the container's left gutter, so the tabs do the same. */
#block-cyclein-public-local-tasks ul:not(.contextual-links) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

#block-cyclein-public-local-tasks ul:not(.contextual-links) li a {
  align-items: center;
  border: 1px solid var(--color-brand-black-tint);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: inline-flex;
  font-weight: var(--font-weight-bold);
  min-block-size: var(--a11y-min-target);
  padding: var(--space-8) var(--space-16);
  text-decoration: none;
}

#block-cyclein-public-local-tasks ul:not(.contextual-links) li a:hover {
  background: var(--color-brand-yellow);
  border-color: var(--color-brand-yellow);
}

#block-cyclein-public-local-tasks ul:not(.contextual-links) li a.is-active {
  background: var(--color-brand-black);
  border-color: var(--color-brand-black);
  color: var(--color-brand-white);
}

/* Round-1 checklist r10: on the homepage the actions band was capped at the
   1200px content column, so its white background stopped short of the viewport
   while every neighbouring section bleeds edge to edge. Use the same full-bleed
   idiom the paragraph bands use, then push the tabs back onto the container's
   left gutter with the catalogue bands' own inline-padding formula, so the band
   spans the viewport and its content stays aligned with the rest of the page. */
.cyclein-home-actions {
  background: var(--color-white);
  border-block-end: 1px solid var(--color-brand-black-tint);
  border-block-start: 1px solid var(--color-brand-black-tint);
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
  padding-block: var(--space-16);
  padding-inline: max(
    var(--layout-edge-padding),
    calc(50vw - var(--layout-max-width) / 2)
  );
}

.cyclein-home-actions #block-cyclein-public-local-tasks {
  margin-block: 0;
}

/* Round-6 issue r4 supersedes the earlier "centre the document column on wide
   screens" treatment: the client's Figma has the editorial content left-aligned
   inside a full-width container (max 1920px, 32px gutter). The ~66ch reading
   column therefore stays anchored to the left gutter at every breakpoint — no
   1440px cap, no auto-centring — matching the document prototypes exactly. */

/* ==========================================================================
   Core account forms: log in, reset password, create account, edit profile.

   Round-1 checklist r4: these routes shipped as bare stable9 output — labels
   sitting inline with unstyled inputs, a browser-default submit control and no
   container — so they read as an unfinished admin screen rather than part of
   the site. The forms stay core; only presentation is added, scoped with :has()
   to the core account form classes so no other form on the site is touched.
   Round-5 r4: the profile edit form (.user-form, /user/N/edit) had the same bare
   presentation, so it joins the same treatment (plus the select + fieldset rules
   below for its time-zone and locale controls). Controls keep the 44px target
   floor and the shared focus ring.
   ========================================================================== */

.cyclein-page__content:has(.user-login-form, .user-pass, .user-register-form, .user-form) {
  margin-inline: auto;
  max-inline-size: 34rem;
}

/* Round-3 checklist r5-r7: at >=1440 the shared .cyclein-region__inner is pinned
   to a fixed var(--layout-max-width) (1200px). Inside the 34rem account-form
   column that fixed width broke out to the right, pushing the login / register /
   reset-password cards off-centre and opening a horizontal scrollbar. Let the
   region + its inner fill the constrained column so the card stays centred. */
.cyclein-page__content:has(.user-login-form, .user-pass, .user-register-form, .user-form)
  .cyclein-region__inner {
  inline-size: 100%;
  max-inline-size: 100%;
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form, .openid-connect-login-form) {
  background: var(--color-white);
  border-radius: var(--radius-8);
  padding: var(--space-32);
}

/* The Cognito button is its own form directly above the credentials form, so
   the pair reads as one card with a divider rather than two stacked boxes. */
.openid-connect-login-form {
  border-block-end: 1px solid var(--color-brand-black-tint);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  padding-block-end: var(--space-24);
}

.openid-connect-login-form + .user-login-form {
  border-start-end-radius: 0;
  border-start-start-radius: 0;
  padding-block-start: var(--space-24);
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form) .form-item {
  margin-block-end: var(--space-24);
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form) label {
  color: var(--color-brand-black);
  display: block;
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-label-line-height);
  margin-block-end: var(--space-8);
}

/* stable9 ships no required marker, and colour alone must never carry meaning,
   so the asterisk is paired with an assistive-text label. */
:is(.user-login-form, .user-pass, .user-register-form, .user-form) label.form-required::after {
  color: var(--color-error);
  content: " *";
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form)
  :is(input[type="text"], input[type="email"], input[type="password"]) {
  background: var(--color-white);
  border: 1px solid var(--color-brand-black-muted);
  border-radius: var(--radius-8);
  box-sizing: border-box;
  color: var(--color-brand-black);
  font-family: inherit;
  font-size: var(--type-body-size);
  inline-size: 100%;
  min-block-size: var(--a11y-min-target);
  padding: var(--space-8) var(--space-16);
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form) .description {
  color: var(--color-green-normal);
  font-size: var(--type-body-size);
  margin-block-start: var(--space-8);
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form) .form-actions {
  margin-block-start: var(--space-32);
}

/* Both the credentials submit and the Cognito submit are brand pills. */
:is(.user-login-form, .user-pass, .user-register-form, .user-form, .openid-connect-login-form)
  .form-submit {
  align-items: center;
  background: var(--color-brand-pink);
  border: 2px solid var(--color-brand-pink);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-bold);
  inline-size: 100%;
  justify-content: center;
  line-height: var(--type-button-line-height);
  min-block-size: var(--a11y-min-target);
  padding: var(--space-8) var(--space-24);
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form, .openid-connect-login-form)
  .form-submit:hover {
  background: var(--color-brand-pink-hover);
  border-color: var(--color-brand-pink-hover);
}

/* Registration is one of the two ways out of an anonymous basket, so the card
   closes by offering the other one. It sits inside the register card, divided
   from the fields it is an alternative to. */
.cyclein-register-existing {
  border-block-start: 1px solid var(--color-brand-black-tint);
  margin-block-start: var(--space-32);
  padding-block-start: var(--space-32);
}

.cyclein-register-existing h2 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  margin: 0 0 var(--space-16);
}

.cyclein-register-existing__login {
  align-items: center;
  background: var(--color-brand-pink);
  border: 2px solid var(--color-brand-pink);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  display: inline-flex;
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-bold);
  inline-size: 100%;
  justify-content: center;
  line-height: var(--type-button-line-height);
  min-block-size: var(--a11y-min-target);
  padding: var(--space-8) var(--space-24);
  text-decoration: none;
}

.cyclein-register-existing__login:hover {
  background: var(--color-brand-pink-hover);
  border-color: var(--color-brand-pink-hover);
}

/* The federated route is the secondary path, so it reads as an outline pill. */
.openid-connect-login-form .form-submit {
  background: transparent;
  border-color: var(--color-brand-black);
  color: var(--color-brand-black);
}

.openid-connect-login-form .form-submit:hover {
  background: var(--color-brand-black);
  border-color: var(--color-brand-black);
  color: var(--color-brand-white);
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form, .openid-connect-login-form)
  :is(input, .form-submit):focus-visible {
  outline: var(--a11y-focus-ring-outer) solid var(--color-focus);
  outline-offset: var(--a11y-focus-offset);
}

/* Validation state is carried by the border AND the inline message, never by
   colour alone. */
:is(.user-login-form, .user-pass, .user-register-form, .user-form) input.error {
  border-color: var(--color-error);
  border-width: 2px;
}

:is(.user-login-form, .user-pass, .user-register-form, .user-form) .form-item--error-message {
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
  margin-block-start: var(--space-8);
}

/* Round-5 r4: controls the profile edit form has that the login/register forms
   do not — the time-zone select, the "Locale settings" fieldset and the core
   password widget's helper texts. */
.user-form select {
  background: var(--color-white);
  border: 1px solid var(--color-brand-black-muted);
  border-radius: var(--radius-8);
  box-sizing: border-box;
  color: var(--color-brand-black);
  font-family: inherit;
  font-size: var(--type-body-size);
  inline-size: 100%;
  min-block-size: var(--a11y-min-target);
  padding: var(--space-8) var(--space-16);
}

.user-form details {
  border: 1px solid var(--color-brand-black-tint);
  border-radius: var(--radius-8);
  margin-block-end: var(--space-24);
  padding: var(--space-16);
}

.user-form summary {
  cursor: pointer;
  font-weight: var(--font-weight-bold);
}

.user-form details[open] summary {
  margin-block-end: var(--space-16);
}

.user-form :is(.password-strength, .password-confirm, .password-suggestions) {
  font-size: var(--type-body-size);
  margin-block-start: var(--space-8);
}