/* Service request form (request-form-render.js). Builds on service-form.css
   (tiles, sticky bar, impact colours); site tokens only (styles.css :root). */
.rq-form { max-width: 50rem; }
.rq-form [hidden], .rq-banners[hidden] { display: none; }

/* What we already know: one pill per answer, each with "change". */
.rq-banners { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.rq-banner {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .45rem .35rem .8rem; border-radius: 999px;
  background: var(--soft-2); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--navy);
}
.rq-banner::before { content: "\2713"; color: var(--blue); font-weight: 800; }
.rq-banner button {
  border: 0; background: var(--white); color: var(--cyan-text); font: inherit; font-size: .8rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 999px; cursor: pointer;
}
.rq-banner button:hover { text-decoration: underline; }
.rq-banner button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.rq-handoff { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--radius); background: var(--soft-2); border: 1px solid var(--line); color: var(--navy); font-weight: 600; }

/* Departments: big tiles with the character (or an icon) on a disc. */
.rq-depts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rq-dept { min-height: 11rem; justify-content: flex-start; padding-top: 1rem; }
.rq-dept-art { position: relative; width: 6rem; height: 6.5rem; display: grid; place-items: end center; }
.rq-dept-art::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 5rem; height: 5rem; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); opacity: .9;
}
.rq-dept-art img { position: relative; height: 6.5rem; width: auto; filter: drop-shadow(0 .4rem .5rem rgba(18,23,42,.2)); }
.rq-dept-art svg { position: relative; width: 2.4rem; height: 2.4rem; margin-bottom: 1.3rem; color: var(--white); }
.rq-dept .svc-tile-label { font-family: var(--head); font-size: 1.05rem; }

/* Clients: "No contract" spans the row, logos below. */
.rq-clients .rq-nocontract { grid-column: 1 / -1; min-height: 4.5rem; background: var(--soft); }
.rq-clients .svc-tile-short { font-size: 1rem; }

/* Topics: icon + label, compact. */
.rq-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rq-topic { min-height: 5rem; gap: .3rem; }
.rq-topic-icon svg { width: 1.6rem; height: 1.6rem; color: var(--cyan-text); }
.rq-topic[aria-pressed="true"] .rq-topic-icon svg { color: var(--blue); }

@media (max-width: 600px) {
  .rq-depts, .rq-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq-dept { min-height: 9.5rem; }
  .rq-dept-art { width: 5rem; height: 5.25rem; }
  .rq-dept-art::before { width: 4rem; height: 4rem; }
  .rq-dept-art img { height: 5.25rem; }
}