/*
 * INNER-EXPERIENCE-007: the request page, after pages.css. A short warm intro, the form as three numbered groups joined by
 * one quiet line that does not move with scrolling (it is not a progress bar), the device card from the catalog, the
 * notes beside the send button, and outcome panels that differ by kind. Nothing moves while the visitor types.
 */
.rq-page { --warm: #F7F4EE; }
.rq-page .rq-head { padding-block-end: 8px; }
.rq-head h1 { letter-spacing: 0; text-wrap: balance; }
.rq-head .lead { max-width: 40rem; }

/* Groups. */
.rq-page .rq-form { position: relative; }
/* One column now: the summary lives in the first group, so the older two-column grid (summary beside) is undone here. */
@media (min-width: 1024px) { .request-a .rq-form { display: flex; flex-direction: column; gap: 24px; } .request-a .rq-form > * { margin-block-start: 0; } .request-a .rq-form > .request-summary { position: static; } }
.rq-group, .rq-actions, .rq-page .form-result, .rq-page .form-errors { max-width: 52rem; }
.rq-page .contact-fields { padding-block-start: 0; border-block-start: 0; }
.rq-group { position: relative; padding-block: 8px 24px; padding-inline-start: 44px; }
.rq-group + .rq-group { border-block-start: 1px solid var(--border); padding-block-start: 24px; }
.rq-group::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 15px; width: 2px; background: var(--border); }
.rq-group:first-of-type::before { inset-block-start: 22px; }
.rq-group-head { position: relative; display: flex; align-items: center; gap: 12px; margin-block-end: 14px; margin-inline-start: -44px; }
.rq-num { position: relative; z-index: 1; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; color: var(--white); font: 700 13px/1 var(--font-en); }
.rq-num::before { content: ""; position: absolute; inset: 3px; z-index: -1; background: var(--primary); transform: rotate(45deg); transition: background-color var(--t-fast) linear; }
.rq-group-head h2 { margin: 0; font-size: 22px; line-height: 1.4; }
.rq-group:focus-within .rq-num::before { background: var(--accent); }

/* Contact: name and phone only now (the city moved to the need), so two columns from tablets up. */
.rq-page .contact-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .rq-page .contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kinds of request with a short line each. */
.rq-types .choice { display: flex; align-items: flex-start; gap: 10px; }
.rq-type-text { display: flex; flex-direction: column; gap: 2px; }
.rq-type-text small { color: var(--muted); font-size: 14px; line-height: 1.6; font-weight: 400; }

/* The device this request is about. */
.rq-device { display: flex; align-items: center; gap: 14px; margin-block: 8px 0; padding: 12px; background: var(--warm); border-inline-start: 4px solid var(--accent); }
.rq-device-media { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 72px; background: var(--white); color: var(--primary); }
.rq-device-media img { width: 88%; height: 88%; object-fit: contain; }
.rq-device-media svg { width: 56px; height: 56px; }
.rq-device-text { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.rq-device-brand { display: block; color: var(--link); font-weight: 600; font-size: 14px; }
.rq-device-name, .rq-device-model { display: block; }
.rq-device-model bdi { font-weight: 700; color: var(--primary); }
.rq-device .link-button { display: inline-flex; align-items: center; min-height: 44px; }

/* Attachments: a button first, dropping as a second way. */
.rq-drop { border: 2px dashed var(--border); padding: 16px; transition: border-color var(--t-fast) linear, background-color var(--t-fast) linear; }
.rq-drop.is-over { border-color: var(--accent); background: #EDF3FC; }
.rq-drop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 0; }
.rq-drop-hint { color: var(--muted); font-size: 14px; }
@media (hover: none) { .rq-drop-hint { display: none; } }

/* Before sending. */
.rq-actions { display: grid; gap: 10px; padding-inline-start: 44px; }
.rq-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.rq-actions .button { width: 100%; min-height: 56px; font-size: 17px; }
.rq-alt { margin: 0; font-size: 15px; }
@media (max-width: 479px) { .rq-group, .rq-actions { padding-inline-start: 0; } .rq-group::before { display: none; } .rq-group-head { margin-inline-start: 0; } }

/* Outcomes. */
.rq-page .form-result { position: relative; padding: 20px; border-inline-start: 4px solid var(--primary); background: var(--warm); }
.rq-page .form-result[data-state="success"], .rq-page .form-result[data-state="duplicate"] { border-color: #1F7A4D; }
.rq-page .form-result[data-state="failed"] { border-color: #B42318; }
.rq-page .form-result[data-state="unknown"], .rq-page .form-result[data-state="pending"], .rq-page .form-result[data-state="not-found"], .rq-page .form-result[data-state="conflict"] { border-color: #B54708; }
.rq-page .form-result .result-title { margin: 0; color: var(--primary); font-weight: 700; font-size: 22px; }
.request-a.rq-page .form-result[data-state="success"]::before, .request-a.rq-page .form-result[data-state="duplicate"]::before { display: none; } /* The drawn mark replaces the old tick here; other states keep their sign. */
.rq-ok-mark { float: inline-end; width: 48px; height: 48px; fill: none; stroke: #1F7A4D; stroke-width: 2.5; }
.rq-ok-tick { stroke-dasharray: 30; stroke-dashoffset: 0; }
.rq-ok-ref { margin: 6px 0 0; font-size: 18px; }
.rq-ok-ref bdi { font: 700 22px/1.4 var(--font-en); color: var(--primary); }
.rq-ok-summary { color: var(--muted); }
.rq-ok-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.rq-ok-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.rq-ok-link bdi { font-family: var(--font-en); }
.rq-page .form-result .link-button { min-height: 44px; }

@media (prefers-reduced-motion: no-preference) {
	.rq-page .form-result[data-state="success"] .rq-ok-tick { animation: rq-tick .5s ease-out .1s both; }
	@keyframes rq-tick { from { stroke-dashoffset: 30; } }
}