/* Alien.Camel Testing — Test.Cycle pages
   Canonical house header geometry comes from ../../style.css.
   This file supplies only Testing-room color + cycle-page layout. */
body.testing-page,
body.cycle-page {
  --alien-blue: #2dd2e2;
  --alien-blue-bright: #59e7f2;
  --camel-caramel: #c69145;
  --camel-caramel-bright: #e2ad62;
  --branch-ink: var(--ink, #e6e9eb);
  --branch-muted: rgba(230,233,235,.68);
  --branch-panel: rgba(10,12,13,.78);
  --section-accent: var(--alien-blue);
  --section-accent-opposite: var(--camel-caramel);
  accent-color: var(--alien-blue);
}

.cycle-page [data-accent="alien"] {
  --section-accent: var(--alien-blue);
  --section-accent-opposite: var(--camel-caramel);
}

.cycle-page [data-accent="camel"] {
  --section-accent: var(--camel-caramel);
  --section-accent-opposite: var(--alien-blue);
}

.cycle-page ::selection {
  background: rgba(45,210,226,.25);
  color: #fff;
}

/* Finished asset: never recolor the Testing Roxicon. */
.cycle-page .site-mark img { filter: none !important; }

/* Let the canonical top bar keep its exact geometry. Testing supplies color only. */
.cycle-page .site-header {
  --header-accent: var(--alien-blue);
  --header-branch-accent: var(--alien-blue);
}
.cycle-page .site-header[data-section-accent="alien"] {
  --header-accent: var(--alien-blue);
  --header-branch-accent: var(--alien-blue);
}
.cycle-page .site-header[data-section-accent="camel"] {
  --header-accent: var(--camel-caramel);
  --header-branch-accent: var(--camel-caramel);
}

.cycle-page .header-current-identity,
.cycle-page .header-context,
.cycle-page .header-motto,
.cycle-page .navigation-pill,
.cycle-page .site-nav a {
  color: var(--branch-ink) !important;
}

.cycle-page .accent-punctuation,
.cycle-page .accent-bullet,
.cycle-page .cycle-dot,
.cycle-page .cycle-bullet {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: inherit !important;
}
.cycle-page .accent-punctuation,
.cycle-page .cycle-dot { color: var(--section-accent) !important; }
.cycle-page .accent-punctuation.accent-alien { color: var(--alien-blue) !important; }
.cycle-page .accent-punctuation.accent-camel { color: var(--camel-caramel) !important; }
.cycle-page .accent-bullet,
.cycle-page .cycle-bullet { color: var(--section-accent-opposite) !important; }
.cycle-page .ending-punctuation { color: inherit !important; }

.cycle-page .navigation-slot .site-nav {
  width: min(680px, calc(100vw - 1.5rem));
  padding: .62rem;
  gap: .46rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: 1px solid color-mix(in srgb, var(--header-branch-accent) 38%, transparent);
  border-radius: 16px;
  background: rgba(8,10,11,.96);
  box-shadow: 0 14px 34px rgba(0,0,0,.34),
              0 0 22px color-mix(in srgb, var(--header-branch-accent) 9%, transparent);
}
.cycle-page .menu-button[aria-expanded="true"] + .site-nav { display: grid !important; }
.cycle-page .site-nav a {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .46rem .58rem;
  border: 1px solid color-mix(in srgb, var(--header-branch-accent) 34%, transparent);
  border-radius: 999px;
  background: rgba(255,255,255,.018);
  text-decoration: none;
  font-size: clamp(.66rem, 1vw, .76rem);
  font-weight: 800;
  letter-spacing: .02em;
}
.cycle-page .site-nav a:hover,
.cycle-page .site-nav a:focus-visible {
  border-color: color-mix(in srgb, var(--header-branch-accent) 74%, transparent);
  background: color-mix(in srgb, var(--header-branch-accent) 7%, rgba(255,255,255,.018));
}

/* Hero: deliberately compact under the top bar. */
.cycle-page .cycle-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(250px, .62fr);
  align-items: center;
  gap: clamp(1.3rem, 3vw, 2.7rem);
  padding-top: clamp(1.35rem, 2.1vw, 1.9rem) !important;
  padding-bottom: clamp(1.9rem, 3.3vw, 2.7rem) !important;
}
.cycle-page .cycle-hero-copy > * { margin-top: 0; }
.cycle-page .cycle-hero-copy > * + * { margin-top: .72rem; }
.cycle-page .cycle-kicker,
.cycle-page .cycle-section-kicker {
  margin: 0;
  color: var(--branch-ink);
  font-size: clamp(.69rem, 1vw, .8rem);
  font-weight: 900;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.cycle-page .cycle-title {
  margin: 0;
  max-width: 860px;
  color: var(--branch-ink);
  font-size: clamp(2.3rem, 4.7vw, 4.45rem);
  line-height: .94;
  letter-spacing: -.04em;
}
.cycle-page .cycle-lede {
  max-width: 780px;
  margin-bottom: 0;
  color: var(--branch-muted);
  font-size: clamp(.96rem, 1.35vw, 1.1rem);
  line-height: 1.62;
}
.cycle-page .cycle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.cycle-page .cycle-chip,
.cycle-page .cycle-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .42rem .7rem;
  border: 1px solid color-mix(in srgb, var(--section-accent) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-accent) 4%, rgba(9,11,12,.72));
  color: var(--branch-ink);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.cycle-page .cycle-actions,
.cycle-page .response-actions,
.cycle-page .hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}
.cycle-page .cycle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .54rem .9rem;
  border: 1px solid color-mix(in srgb, var(--section-accent) 50%, transparent);
  border-radius: 999px;
  background: rgba(9,11,12,.76);
  color: var(--branch-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-accent-opposite) 8%, transparent),
              0 0 14px color-mix(in srgb, var(--section-accent) 7%, transparent);
  text-decoration: none;
  font: inherit;
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .035em;
  cursor: pointer;
}
.cycle-page .cycle-button:hover,
.cycle-page .cycle-button:focus-visible {
  border-color: color-mix(in srgb, var(--section-accent) 78%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--section-accent) 12%, transparent);
}
.cycle-page .cycle-button.primary {
  background: color-mix(in srgb, var(--section-accent) 12%, rgba(9,11,12,.84));
}

.cycle-page .cycle-hero-mark {
  width: min(100%, 360px);
  justify-self: end;
  padding: clamp(.9rem, 1.8vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--section-accent) 30%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--section-accent) 2.5%, rgba(10,12,13,.78));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-accent-opposite) 5%, transparent),
              0 0 20px color-mix(in srgb, var(--section-accent) 5%, transparent);
  text-align: center;
}
.cycle-page .cycle-hero-mark img.roxicon {
  width: min(170px, 44vw);
  margin: 0 auto;
}
.cycle-page .cycle-hero-mark img.signature {
  width: min(285px, 92%);
  margin: .55rem auto 0;
}
.cycle-page .cycle-hero-mark strong {
  display: block;
  margin-top: .45rem;
  color: var(--branch-ink);
  font-size: .72rem;
  letter-spacing: .12em;
}

/* One consistent section treatment down every cycle page. */
.cycle-page .cycle-section {
  position: relative;
  padding-top: clamp(2.3rem, 4vw, 3.35rem);
  padding-bottom: clamp(2.3rem, 4vw, 3.35rem);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--section-accent) 3.2%, transparent) 0%,
    transparent 34%);
}
.cycle-page .cycle-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--section-accent) 46%, transparent);
  opacity: .72;
}
.cycle-page .cycle-section-heading {
  max-width: 850px;
  margin-bottom: 1.25rem;
}
.cycle-page .cycle-section-heading > * { margin-top: 0; }
.cycle-page .cycle-section-heading > * + * { margin-top: .55rem; }
.cycle-page .cycle-section-heading h2 {
  margin-bottom: 0;
  color: var(--branch-ink);
  font-size: clamp(1.95rem, 3.7vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--section-accent) 6%, transparent);
}
.cycle-page .cycle-section-heading > p:not(.cycle-section-kicker) {
  padding-left: .85rem;
  border-left: 1px solid color-mix(in srgb, var(--section-accent) 34%, transparent);
  color: var(--branch-muted);
  line-height: 1.62;
}

.cycle-page .cycle-grid-2,
.cycle-page .cycle-grid-3,
.cycle-page .hub-grid {
  display: grid;
  gap: .75rem;
}
.cycle-page .cycle-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cycle-page .cycle-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cycle-page .hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

.cycle-page .cycle-card,
.cycle-page .task-card,
.cycle-page .question-card,
.cycle-page .cycle-callout,
.cycle-page .hub-cycle-card {
  padding: clamp(.95rem, 1.8vw, 1.2rem);
  border: 1px solid color-mix(in srgb, var(--section-accent) 30%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--section-accent) 2.5%, rgba(10,12,13,.78));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-accent-opposite) 5%, transparent),
              0 0 16px color-mix(in srgb, var(--section-accent) 4%, transparent);
}
.cycle-page .cycle-card > *:first-child,
.cycle-page .task-card > *:first-child,
.cycle-page .cycle-callout > *:first-child { margin-top: 0; }
.cycle-page .cycle-card > *:last-child,
.cycle-page .task-card > *:last-child,
.cycle-page .cycle-callout > *:last-child { margin-bottom: 0; }
.cycle-page .card-key {
  display: block;
  margin-bottom: .42rem;
  color: var(--section-accent);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cycle-page .cycle-card h3,
.cycle-page .task-card h3,
.cycle-page .hub-cycle-card h3 {
  margin: 0 0 .45rem;
  color: var(--branch-ink);
  font-size: clamp(1.03rem, 1.65vw, 1.22rem);
  line-height: 1.18;
}
.cycle-page .cycle-card p,
.cycle-page .task-card p,
.cycle-page .hub-cycle-card p,
.cycle-page .cycle-callout p {
  color: var(--branch-muted);
  line-height: 1.58;
}

.cycle-page .task-steps {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}
.cycle-page .task-steps li {
  counter-increment: steps;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: .7rem;
  align-items: start;
  padding: .8rem .85rem;
  border: 1px solid color-mix(in srgb, var(--section-accent) 24%, transparent);
  border-radius: 15px;
  background: rgba(255,255,255,.012);
  color: var(--branch-muted);
  line-height: 1.55;
}
.cycle-page .task-steps li::before {
  content: counter(steps, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 44%, transparent);
  border-radius: 50%;
  color: var(--section-accent);
  font-size: .65rem;
  font-weight: 900;
}

.cycle-page .response-form {
  display: grid;
  gap: .75rem;
  max-width: 920px;
}
.cycle-page .question-card label.question-label,
.cycle-page .question-card legend.question-label {
  display: block;
  width: 100%;
  margin: 0 0 .55rem;
  padding: 0;
  border: 0;
  color: var(--branch-ink);
  font-size: .91rem;
  font-weight: 800;
  line-height: 1.4;
}
.cycle-page .question-card fieldset { margin: 0; padding: 0; border: 0; }
.cycle-page .question-card input[type="text"],
.cycle-page .question-card textarea,
.cycle-page .question-card select {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--section-accent) 28%, rgba(255,255,255,.08));
  border-radius: 13px;
  background: rgba(5,7,8,.72);
  color: var(--branch-ink);
  padding: .72rem .78rem;
  font: inherit;
  line-height: 1.45;
}
.cycle-page .question-card textarea { min-height: 108px; resize: vertical; }
.cycle-page .question-card input:focus,
.cycle-page .question-card textarea:focus,
.cycle-page .question-card select:focus {
  outline: 1px solid color-mix(in srgb, var(--section-accent) 76%, transparent);
  outline-offset: 2px;
}
.cycle-page .choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: .48rem;
}
.cycle-page .choice {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 36px;
  padding: .42rem .62rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: var(--branch-muted);
  cursor: pointer;
}
.cycle-page .choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--section-accent) 62%, transparent);
  color: var(--branch-ink);
  background: color-mix(in srgb, var(--section-accent) 8%, transparent);
}
.cycle-page .response-note,
.cycle-page .response-status,
.cycle-page .privacy-note {
  margin: .2rem 0 0;
  color: var(--branch-muted);
  font-size: .72rem;
  line-height: 1.5;
}
.cycle-page .response-status { color: var(--section-accent); font-weight: 800; }

.cycle-page .hub-cycle-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cycle-page .hub-cycle-card:hover,
.cycle-page .hub-cycle-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--section-accent) 62%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--section-accent) 9%, transparent);
}
.cycle-page .hub-cycle-card .cycle-status-chip { align-self: flex-start; margin-top: auto; }
.cycle-page .hub-cycle-card .cycle-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin: .65rem 0 .9rem;
  color: var(--branch-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Testing footer: one Camel.Approved graphic, never the inherited Roxie pill. */
.cycle-page .site-footer .roxie-approved-pill,
.cycle-page .site-footer .roxie-approved,
.cycle-page .site-footer [data-roxie-approved] { display: none !important; }
.cycle-page .site-footer .text-gold { color: var(--branch-ink) !important; }
.cycle-page .camel-approved-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .28rem .68rem;
  border: 1px solid rgba(198,145,69,.56);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 0 0 1px rgba(45,210,226,.07), 0 0 13px rgba(198,145,69,.06);
}
.cycle-page .camel-approved-pill img {
  display: block;
  width: auto;
  height: 25px;
  max-width: min(285px, 70vw);
  object-fit: contain;
}

@media (max-width: 840px) {
  .cycle-page .cycle-hero { grid-template-columns: 1fr; }
  .cycle-page .cycle-hero-mark { justify-self: start; width: min(100%, 520px); }
  .cycle-page .cycle-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .cycle-page .cycle-grid-2,
  .cycle-page .hub-grid { grid-template-columns: 1fr; }
  .cycle-page .cycle-title { font-size: clamp(2.25rem, 11.5vw, 3.5rem); }
  .cycle-page .cycle-hero { padding-top: 1.2rem !important; }
  .cycle-page .navigation-slot .site-nav { width: min(96vw, 540px); }
}
@media (max-width: 430px) {
  .cycle-page .cycle-actions,
  .cycle-page .response-actions,
  .cycle-page .hub-actions { flex-direction: column; }
  .cycle-page .cycle-button { width: 100%; }
}