/*
  Owned material-request page v4.
  Shared editorial styles and published form.v2.css remain immutable.
  v25 palette: paper / ink / frame only. Required, invalid, and failure states are carried by
  weight, border width, and wording rather than by a fourth (red/brown) hue.
*/

.request-hero-grid,
.request-layout,
.field-grid,
.request-materials > li,
.request-assurances > div,
.success-materials a {
  min-width: 0;
}

.request-hero-copy,
.request-materials,
.request-intro,
.form-shell,
.form-success,
.success-materials strong {
  min-width: 0;
}

.request-main h1,
.request-main h2,
.request-main p,
.request-main strong,
.request-main small,
.request-main dd,
.request-main summary {
  overflow-wrap: anywhere;
  word-break: normal;
}

.request-main {
  background: var(--paper);
}

.request-hero {
  padding: clamp(28px, 4vw, 52px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--ink-line);
  background: var(--paper);
}

.request-hero .breadcrumbs {
  margin-bottom: clamp(32px, 4vw, 52px);
}

.request-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.request-hero h1 {
  margin-bottom: 26px;
  font-size: clamp(2rem, 3.8vw, 3.375rem);
  line-height: 1.28;
  letter-spacing: .035em;
}

.request-hero-copy > p:last-child {
  max-width: 38rem;
  margin-bottom: 0;
  color: var(--ink-muted);
}

.request-materials {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.request-materials > li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--ink-line);
}

.request-materials span {
  grid-row: 1 / 3;
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.45;
}

.request-materials strong {
  font-size: .92rem;
  line-height: 1.65;
}

.request-materials small {
  color: var(--ink-muted);
  font-size: .72rem;
  line-height: 1.65;
}

.request-section {
  padding-block: clamp(48px, 6vw, 80px);
}

.request-layout {
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.request-intro {
  position: sticky;
  top: 104px;
}

.request-intro h2 {
  margin-bottom: 24px;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  line-height: 1.4;
}

.request-intro > p:not(.chapter-no) {
  max-width: 31rem;
  margin-bottom: 36px;
  color: var(--ink-muted);
  font-size: .9rem;
}

.request-assurances {
  margin: 0;
  border-top: 1px solid var(--ink);
}

.request-assurances > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-line);
}

.request-assurances dt {
  color: var(--ink-muted);
  font-size: .7rem;
  font-weight: 800;
}

.request-assurances dd {
  color: var(--ink-muted);
  font-size: .74rem;
}

.form-shell {
  padding: clamp(24px, 3vw, 40px);
  border-top: 3px solid var(--frame);
  background: var(--paper);
  box-shadow: 0 22px 60px var(--ink-tint);
}

.form-shell fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-shell legend {
  width: 100%;
  margin-bottom: 28px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ink);
  color: var(--frame);
  font-size: 1rem;
  font-weight: 800;
}

.form-optional {
  margin-top: clamp(38px, 6vw, 58px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink-line);
}

.form-optional summary {
  display: flex;
  min-height: 58px;
  padding: 10px 2px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--frame);
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.form-optional summary::-webkit-details-marker {
  display: none;
}

.form-optional summary::after {
  flex: 0 0 auto;
  color: var(--ink-muted);
  content: "+";
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
}

.form-optional[open] summary::after {
  content: "−";
}

.form-optional summary:focus-visible {
  outline: 3px solid var(--frame);
  outline-offset: 3px;
}

.form-optional summary small {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: .66rem;
  font-weight: 600;
}

.form-optional .field-grid {
  padding: 28px 0 34px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 22px;
}

.field-full {
  grid-column: 1 / -1;
}

.form-field {
  display: grid;
  align-content: start;
}

.form-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
}

.field-status {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--ink-line);
  color: var(--ink-muted);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.7;
}

.field-required {
  border-color: var(--ink);
  color: var(--ink);
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--ink-muted);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* Decision 2026-09-12 (user): pure input examples live inside the box as placeholders; the visible label stays
   above and the required badge beside it, so the placeholder never acts as the label. Only explanatory text that
   must survive typing (phone contact notice, question guidance) remains a .field-hint below the box.
   Color = the same --ink-muted the hints use (about 6:1 on --paper); opacity:1 overrides Firefox's default fade. */
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.form-field input {
  min-height: 54px;
  padding: 12px 14px;
}

.form-field textarea {
  min-height: 150px;
  padding: 13px 14px;
  resize: vertical;
}

.form-field input:hover,
.form-field textarea:hover {
  border-color: var(--frame-line);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--frame);
  outline: 2px solid var(--paper);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--frame);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--ink);
}

.form-field input[readonly],
.form-field textarea[readonly] {
  background: var(--ink-tint);
  color: var(--ink-muted);
}

.field-hint,
.field-error {
  display: block;
  margin-top: 6px;
  font-size: .68rem;
  line-height: 1.65;
}

.field-hint {
  color: var(--ink-muted);
}

.field-error {
  min-height: 1.1em;
  color: var(--ink);
  font-weight: 700;
}

.form-summary,
.form-failure,
.noscript-fallback {
  margin-bottom: 34px;
  padding: 18px 20px;
  border-left: 3px solid var(--ink);
  background: var(--ink-tint);
  color: var(--ink);
  font-size: .8rem;
}

.form-summary strong,
.form-failure strong,
.noscript-fallback strong {
  display: block;
  margin-bottom: 4px;
}

.form-summary p,
.form-failure p,
.noscript-fallback p {
  margin-bottom: 0;
}

.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.privacy-notice {
  margin: clamp(42px, 6vw, 64px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ink-line);
  color: var(--ink-muted);
  font-size: .7rem;
  line-height: 1.8;
}

.privacy-notice a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--frame);
  font-weight: 800;
}

.form-actions {
  margin-top: 24px;
}

.form-submit {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 60px;
  padding: 15px 56px;
  border: 1px solid var(--frame);
  border-radius: 0;
  align-items: center;
  justify-content: center;
  background: var(--frame);
  color: var(--paper);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.form-submit:hover:not(:disabled) {
  border-color: var(--frame-deep);
  background: var(--frame-deep);
}

.form-submit:disabled {
  cursor: wait;
  opacity: .72;
}

.submit-spinner {
  position: absolute;
  right: 22px;
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--paper-line);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: form-spin .8s linear infinite;
}

.form-submit.is-submitting .submit-spinner {
  display: block;
}

.form-status {
  min-height: 1.7em;
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: .7rem;
  text-align: center;
}

.form-failure {
  margin: 24px 0 0;
}

.failure-alternatives {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 10px;
}

.failure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.failure-actions button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--frame);
  border-radius: 0;
  background: var(--frame);
  color: var(--paper);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.failure-actions button + button {
  background: transparent;
  color: var(--frame);
}

.failure-actions button:disabled {
  cursor: wait;
  opacity: .62;
}

.failure-actions button:focus-visible {
  outline: 3px solid var(--frame);
  outline-offset: 3px;
}

.failure-alternatives a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--frame);
  font-weight: 800;
}

.form-success {
  padding: clamp(10px, 2vw, 24px) 0;
}

.form-success:focus-visible {
  outline-color: var(--frame);
}

.success-kicker {
  margin-bottom: 16px;
  color: var(--ink-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.form-success h2 {
  margin-bottom: 22px;
  color: var(--frame);
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 1.42;
}

.form-success > p:not(.success-kicker) {
  max-width: 38rem;
  color: var(--ink-muted);
}

.success-materials {
  margin: 38px 0 28px;
  border-top: 1px solid var(--ink);
}

.success-materials a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 10px;
  gap: 16px;
  min-height: 70px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--ink-line);
  align-items: center;
  color: var(--frame);
  text-decoration: none;
}

.success-materials a::after {
  width: 8px;
  height: 8px;
  border-top: 1px solid currentcolor;
  border-right: 1px solid currentcolor;
  content: "";
  transform: rotate(45deg);
}

.success-materials span {
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.success-materials strong {
  display: grid;
  gap: 3px;
  font-size: .82rem;
}

.success-materials strong small {
  color: var(--ink-muted);
  font-size: .65rem;
  font-weight: 600;
}

.success-materials .success-material-primary {
  margin-inline: -14px;
  padding-inline: 14px;
  background: var(--ink-tint);
}

.success-return {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--frame);
  font-size: .78rem;
  font-weight: 800;
}

.noscript-fallback {
  margin: 30px 0 0;
  border-left-color: var(--ink-muted);
  background: var(--ink-tint);
  color: var(--ink);
}

@keyframes form-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .request-hero-grid,
  .request-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .request-layout {
    max-width: 640px;
  }

  .request-intro {
    position: static;
  }
}

@media (max-width: 760px) {
  .request-hero {
    padding-top: 28px;
  }

  .request-hero-grid,
  .request-layout {
    grid-template-columns: 1fr;
  }

  .request-hero-grid {
    gap: 32px;
  }

  .request-layout {
    gap: 32px;
  }

  .request-hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .request-assurances {
    max-width: 38rem;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .field-full {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .form-shell {
    width: calc(100% + (var(--gutter) * 2));
    margin-left: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    box-shadow: none;
  }

  .form-submit {
    padding-inline: 38px;
  }

  .success-materials .success-material-primary {
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .submit-spinner {
    animation: none;
  }
}