/* ============================================================
   SAKKARY MACHINERY — the request flow · MIXED BANDS
   Semantic tokens only, so the form is legible whichever band it
   is dropped into.
   ============================================================ */

.request__lede { margin-top: var(--s-4); margin-inline: auto; }

.rq {
  max-width: 940px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}

.rq__prog { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rq__pstep {
  padding: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  border-inline-end: 1px solid var(--line);
  position: relative;
  color: var(--fg-3);
  transition: color var(--dur-3) var(--ease-cut), background var(--dur-3) var(--ease-cut);
}
.rq__pstep:last-child { border-inline-end: 0; }
.rq__pstep::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px;
  background: var(--accent-bright);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--dur-4) var(--ease-cut);
}
.rq__pstep[aria-current="step"] { color: var(--fg); background: var(--surface); }
.rq__pstep[aria-current="step"]::after,
.rq__pstep[data-done="true"]::after { transform: scaleX(1); }
.rq__pstep[data-done="true"] { color: var(--fg-2); }
.rq__pstep[data-done="true"]::after { background: var(--blue); }
.rq__pn { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-mono); opacity: .7; }
.rq__pl { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 720px) {
  .rq__pstep { padding: var(--s-3) var(--s-2); flex-direction: column; gap: 4px; text-align: center; }
  .rq__pl { font-size: 10px; }
}

.rq__form { padding: var(--s-7) var(--s-6) var(--s-6); }
@media (max-width: 620px) { .rq__form { padding: var(--s-5) var(--s-4); } }

.rq__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.rq__step.is-active { animation: rq-in 400ms var(--ease-cut) both; }
@keyframes rq-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rq__step.is-active { animation: none; } }

.rq__legend {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-5);
  padding: 0;
}

.rq__err {
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent-fill);
  border-radius: var(--r-1);
  background: rgba(217, 26, 45, .08);
  color: var(--accent);
  font-size: var(--fs-sm);
}

.rq__opts { display: grid; gap: var(--s-3); }
.rq__opts--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.opt { display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__box {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 60px; justify-content: center;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  position: relative;
  transition: border-color var(--dur-2) var(--ease-cut),
              background var(--dur-2) var(--ease-cut),
              transform var(--dur-1) var(--ease-cut);
}
.opt__box::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block: var(--s-3);
  width: 3px; background: var(--accent-bright);
  transform: scaleY(0);
  transition: transform var(--dur-2) var(--ease-cut);
}
.opt:hover .opt__box { border-color: var(--fg-3); transform: translateY(-1px); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.opt input:checked + .opt__box { border-color: var(--accent-bright); background: var(--surface); box-shadow: var(--shadow-1); }
.opt input:checked + .opt__box::before { transform: scaleY(1); }
.opt--sm .opt__box { min-height: 52px; padding: var(--s-3) var(--s-4); }
.opt__t { font-weight: 600; font-size: var(--fs-base); }
.opt__d { color: var(--fg-2); font-size: var(--fs-sm); }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field__l {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.field__opt { color: var(--fg-3); text-transform: none; letter-spacing: 0; }
.req { color: var(--accent); }

.field__i {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color var(--dur-2) var(--ease-cut), box-shadow var(--dur-2) var(--ease-cut);
}
textarea.field__i { min-height: 96px; resize: vertical; line-height: 1.5; }
.field__i::placeholder { color: var(--fg-3); opacity: .8; }
.field__i:hover { border-color: var(--fg-3); }
.field__i:focus { outline: none; border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(234, 35, 54, .14); }
.field__i[aria-invalid="true"] { border-color: var(--accent-fill); }

select.field__i {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
                    linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--s-8);
}
:root[dir="rtl"] select.field__i {
  background-position: 14px calc(50% + 1px), 19px calc(50% + 1px);
  background-image: linear-gradient(135deg, transparent 50%, var(--fg-3) 50%),
                    linear-gradient(45deg, var(--fg-3) 50%, transparent 50%);
}

.field__i--file { padding: var(--s-2) var(--s-3); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 32px; }
.field__i--file::file-selector-button {
  margin-inline-end: var(--s-3);
  padding: 8px var(--s-4);
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.field__i--file::file-selector-button:hover { border-color: var(--accent-bright); }
.field__h { font-size: var(--fs-xs); color: var(--fg-3); }

.rq__summary {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--blue);
  border-radius: var(--r-1);
  display: grid; gap: var(--s-2);
}
.rq__summary:empty { display: none; }
.rq__srow { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--fs-sm); }
.rq__sk {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--fg-3); flex: 0 0 33%;
}
.rq__sv { color: var(--fg); }
.rq__fine { margin-top: var(--s-4); color: var(--fg-3); }

.rq__nav { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--s-3); }
.rq__navr { margin-inline-start: auto; display: flex; gap: var(--s-3); }
@media (max-width: 520px) {
  .rq__nav { flex-direction: column-reverse; align-items: stretch; }
  .rq__navr { margin-inline-start: 0; }
  .rq__navr .btn, .rq__nav > .btn { width: 100%; }
}

.rq__done { padding: var(--s-9) var(--s-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.rq__doneico {
  width: 44px; height: 44px;
  color: var(--accent-on); padding: 10px;
  background: var(--accent-fill);
  border-radius: 50%;
}
.rq__doneref { color: var(--fg-3); }
.rq__doneref strong { color: var(--fg); font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: .1em; margin-inline-start: var(--s-2); }
.rq__donebody { color: var(--fg-2); max-width: 52ch; }
.rq__donebody a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   THE REQUEST MODAL
   A native <dialog>: the browser handles the top layer, the focus
   trap, Escape and making the page behind it inert. There is only
   one form on the page — it lives in here, and the section above
   is just the doorway.
   ============================================================ */

.rqm {
  width: min(960px, calc(100vw - 2 * var(--s-4)));
  max-height: calc(100dvh - 2 * var(--s-5));
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--fg);
}
.rqm::backdrop {
  background: rgba(10, 12, 16, .62);
  backdrop-filter: blur(3px);
}
.rqm__panel:focus { outline: none; }   /* focused for a11y, not for show */
.rqm__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2 * var(--s-5));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  /* the spring back when a drag-to-dismiss falls short */
  transition: transform 260ms var(--ease-cut);
}
@media (prefers-reduced-motion: reduce) { .rqm__panel { transition: none; } }
.rqm__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.rqm__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  margin-inline-end: auto;
}
.rqm__x {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.rqm__x:hover, .rqm__x:focus-visible { color: #fff; background: var(--accent-fill); border-color: var(--accent-fill); }
.rqm__x svg { width: 18px; height: 18px; }

/* the form scrolls inside the panel, so the header and the page stay put */
.rqm__body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.rqm .rq { border: 0; border-radius: 0; box-shadow: none; max-width: none; margin: 0; }

/* entrance */
.rqm[open] { animation: rqm-in 260ms var(--ease-cut); }
.rqm[open]::backdrop { animation: rqm-fade 260ms var(--ease-cut); }
@keyframes rqm-in   { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes rqm-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rqm[open], .rqm[open]::backdrop { animation: none; }
}

/* ---------- phones: a sheet, not a takeover ----------
   Edge to edge and top to bottom, the form stopped reading as a panel
   over the page and started reading as a page the visitor had been
   sent to: nothing of the site was left in view, so there was no
   visible way back and no sense that the scroll position survived.
   Anchoring it to the bottom and capping the height keeps a strip of
   the dimmed page above it — that strip is both the exit and the
   reassurance. It stays tall (88dvh) because a four-step form with a
   soft keyboard open needs every pixel it can keep. */
@media (max-width: 620px) {
  .rqm {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    /* the UA centres a dialog with margin:auto — drop the bottom
       margin and it sits on the floor of the viewport instead */
    margin: auto auto 0;
  }
  .rqm__panel {
    max-height: 88dvh;
    border-block-end: 0;
    border-radius: var(--r-3) var(--r-3) 0 0;
    /* keep the last field clear of the home indicator */
    padding-block-end: env(safe-area-inset-bottom);
  }

  /* Grab bar. The whole header is the drag surface — this only marks
     it, so the affordance is honest wherever the thumb lands. */
  .rqm__panel::before {
    content: "";
    position: absolute;
    inset-block-start: 8px;
    inset-inline: 0;
    margin-inline: auto;
    width: 40px; height: 4px;
    border-radius: 99px;
    background: var(--line);
    z-index: 1;
  }
  .rqm__head {
    padding-block-start: calc(var(--s-5) + 6px);
    touch-action: none;      /* the header drags; it must not scroll */
    user-select: none;
  }

  /* rises from the floor rather than fading in place */
  .rqm[open] { animation: rqm-up 300ms var(--ease-cut); }
  @keyframes rqm-up { from { transform: translateY(100%); } }
}
@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  .rqm[open] { animation: none; }
}

/* ---------- the doorway left behind in the page ---------- */
.request__launch { text-align: center; }
.request__open { min-height: 56px; padding-inline: var(--s-8); }
.request__note { display: block; margin-top: var(--s-4); color: var(--fg-3); }