/* rx-contact.css - RaXa "Get in touch" pop-up and the progress box (lower right), on every page. */
.rxc {
  position: fixed; inset: 0; z-index: 2147482000;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(20px) saturate(120%); backdrop-filter: blur(20px) saturate(120%);
  font-family: var(--font); color: var(--ink);
}
.rxc[hidden] { display: none !important; }
.rxc * { box-sizing: border-box; }
.rxc__card {
  display: flex; flex-direction: column; width: min(520px, 100%); max-height: calc(100dvh - 24px); padding: 20px; border-radius: 30px;
  background: var(--solid);
  box-shadow: var(--pop-shadow);
}
.rxc__card:focus { outline: none; }
.rxc__title { margin: 2px 4px 4px; font-size: 24px; font-weight: 300; letter-spacing: -.01em; }
.rxc__sub { margin: 0 4px 12px; font-size: 12.5px; font-weight: 400; }
.rxc__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--scroll) transparent;
}
.rxc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rxc__row--one { grid-template-columns: 1fr; }
.rxc__fld[hidden] { display: none; }
.rxc__fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rxc__fld label { font-size: 12px; font-weight: 500; }
.rxc__fld input, .rxc__fld textarea {
  width: 100%; min-width: 0; height: 44px; padding: 0 14px; border-radius: 14px;
  border: 1px solid var(--ctl-line); background: var(--field); color: var(--ink);
  font: 400 16px var(--font);
}
.rxc__fld textarea { height: 132px; padding: 10px 14px; resize: vertical; line-height: 1.4; }
.rxc__fld input:focus, .rxc__fld textarea:focus { outline: none; border-color: var(--ink); }
.rxc__fld input[readonly] { opacity: .7; cursor: default; border-style: dashed; }
.rxc__fld .is-bad { border-color: var(--bad); }
.rxc__count { align-self: flex-end; font-size: 11.5px; font-weight: 400; }
.rxc__count.is-full, .rxc__err { color: var(--bad); }
.rxc__err { margin: 4px 4px 0; font-size: 12.5px; font-weight: 400; }
.rxc__err:empty { display: none; }
.rxc__foot { display: flex; gap: 10px; margin-top: 12px; }
.rxc__btn {
  flex: 1; min-width: 0; height: 46px; padding: 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ctl-line); background: transparent; color: var(--ink);
  font: 400 14px var(--font); transition: border-color .15s;
}
.rxc__btn:hover, .rxc__btn:focus-visible { border-color: var(--ink); outline: none; }
.rxc__btn--ok { background: var(--ac); border-color: var(--ac); color: #fff; font-weight: 500; }
@media (max-width: 480px) {
  .rxc { padding: 8px; align-items: flex-end; }
  .rxc__card { padding: 14px; border-radius: 20px; }
  .rxc__row { grid-template-columns: 1fr; }
}

/* progress box, above everything */
.rx-status {
  position: fixed; right: calc(env(safe-area-inset-right, 0px) + var(--status-right, 16px)); top: calc(env(safe-area-inset-top, 0px) + var(--status-top, 8px));
  z-index: 2147483000; display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  min-width: 170px; max-width: calc(100vw - var(--status-right, 16px) - 16px); padding: 11px 16px; border-radius: 18px;
  background: var(--solid); box-shadow: var(--pop-shadow); color: var(--ink);
  font: 400 13px/1.2 var(--font);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.rx-status.is-on { opacity: 1; transform: none; }
.rx-bar { display: block; height: 3px; border-radius: 3px; background: var(--tint-2); overflow: hidden; }
.rx-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: currentColor; transition: width 0s linear .3s; }
.rx-status.is-work .rx-bar i { width: 90%; transition: width 14s cubic-bezier(.08,.6,.25,1); }
.rx-status.is-done .rx-bar i { width: 100%; transition: width .25s ease; }
.rx-status.is-note .rx-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .rx-status { transition: none; } }