/* The forms (src/components/forms/, formularze.md section 7). Nothing jumps: every field has a
   hint line of fixed height that its error replaces, the status slot under the button has a fixed
   height and holds Turnstile's box, "Sending" and the answer in turn, the button is as wide as its
   longest label, a field usable for one choice stays in its place (dimmed otherwise), the contact page's
   four forms share one place as tall as the tallest. Linked by Form.astro itself. */

.fm {
  --fm-red: #b42318;
  --fm-green: #13764a;
  --fm-border: #c9d6dd;
  position: relative;
  container-type: inline-size;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.fm .fm-intro { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; margin: 0 0 16px; }

.s-form { margin-top: 18px; }
.fm-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.fm-field { grid-column: 1 / -1; min-width: 0; border: 0; padding: 0; margin: 0; }
.fm-half { grid-column: span 1; }
@container (max-width: 520px) {
  .fm-half { grid-column: 1 / -1; }
}
/* usable for one choice of another field (contact: the demo date); otherwise dimmed, in its place */
.fm-dim { opacity: 0.45; }
.fm-dim input, .fm-dim select, .fm-dim textarea { background: var(--bg-alt); cursor: not-allowed; }

.fm-label {
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 6px;
  padding: 0;
}
.fm-opt { font-weight: 400; color: var(--ink-faded); }

.fm input[type='text'], .fm input[type='email'], .fm input[type='tel'], .fm select, .fm textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  padding: 11px 14px;
  border: 1px solid var(--fm-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s, background-color 0.15s;
}
.fm textarea { resize: vertical; min-height: 92px; }
.fm select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6c7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  text-overflow: ellipsis;
}
.fm input:focus-visible, .fm select:focus-visible, .fm textarea:focus-visible {
  outline: 2px solid var(--sky-bright);
  outline-offset: -1px;
  border-color: var(--sky-bright);
}
.fm [aria-invalid='true']:not([type='checkbox']) { border-color: var(--fm-red); background-color: #fff7f6; }

/* the hint line: one line, or two where the hint or an error of the field needs them */
.fm .fm-hint {
  font-size: 0.8rem;
  line-height: 1.35;
  height: 1.35em;
  margin: 5px 0 10px;
  color: var(--ink-soft);
  overflow: hidden;
}
.fm .fm-hint2 .fm-hint { height: 2.7em; }
.fm .fm-hint.fm-err { color: var(--fm-red); font-weight: 600; }
.fm .fm-hint.fm-err::before {
  content: '';
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 5px;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* boxes */
.fm-boxes { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 2px; }
.fm-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
}
.fm-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--sky-deep);
  cursor: pointer;
}
.fm-check input:focus-visible { outline: 2px solid var(--sky-bright); outline-offset: 2px; }
.fm-consent { font-size: 0.9rem; color: var(--ink-soft); }
.fm-consent a, .fm-privacy a, .fm-msg a, .fm-after a, .fm-intro a {
  color: var(--sky-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--sky-deep);
}
.fm .fm-checkbox .fm-hint { margin-left: 28px; }

/* the honeypot: out of sight, out of the tab order, read by bots */
.fm-hp { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.fm .fm-privacy { font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); margin: 2px 0 14px; }

/* the button: as wide as its longest label, in the same place before, while and after sending */
.fm-submit { display: inline-grid; justify-items: center; }
.fm-submit .fm-lbl { grid-area: 1 / 1; }
.fm-submit:not([data-state='send']) [data-for='send'],
.fm-submit:not([data-state='sending']) [data-for='sending'],
.fm-submit:not([data-state='sent']) [data-for='sent'] { visibility: hidden; }
.fm .fm-submit:disabled { cursor: default; transform: none; box-shadow: none; }
.fm .fm-submit[data-state='sending'] { opacity: 0.6; }
.fm .fm-submit[data-state='sent'] { background: var(--fm-green); }

/* the status slot: 72 px from the start, empty until something happens */
.fm-status { position: relative; height: 72px; margin-top: 12px; }
.fm-ts { position: absolute; left: 0; top: 0; }
/* Turnstile's box is 300 x 65 px; in a form narrower than that (a phone of 320-360 px) it shows at
   80 %, and at 70 % (210 px) in a form inside a card on a 320 px phone (214 px), so it stays inside
   the form and the slot */
@container (max-width: 299px) {
  .fm-ts { transform: scale(0.8); transform-origin: top left; }
}
@container (max-width: 239px) {
  .fm-ts { transform: scale(0.7); }
}
.fm .fm-msg {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  height: 100%;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--ink-soft);
}
.fm .fm-msg-text { min-width: 0; overflow-wrap: anywhere; }
.fm .fm-status.fm-ts-on .fm-msg { visibility: hidden; }
.fm .fm-status[data-kind='err'] .fm-msg { color: var(--fm-red); font-weight: 600; }
.fm .fm-status[data-kind='ok'] .fm-msg { color: var(--fm-green); font-weight: 600; }
.fm-status[data-kind]:not([data-kind='']) .fm-msg::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--fm-icon) center / contain no-repeat;
  mask: var(--fm-icon) center / contain no-repeat;
}
.fm-status[data-kind='err'] { --fm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E"); }
.fm-status[data-kind='ok'] { --fm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E"); }
.fm-status[data-kind='busy'] .fm-msg::before {
  background: none;
  -webkit-mask: none;
  mask: none;
  border: 2px solid var(--sky-soft);
  border-top-color: var(--sky-deep);
  border-radius: 50%;
  box-sizing: border-box;
  animation: fm-spin 0.8s linear infinite;
}
@keyframes fm-spin { to { transform: rotate(360deg); } }

.fm-locked .fm-fields { opacity: 0.62; }
.fm .fm-after { font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }

/* the contact page: four forms in one place */
.fm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.fm-tab {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.3;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.fm-tab:hover { border-color: var(--sky); color: var(--sky-deep); }
.fm-tab[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fm-tab:focus-visible { outline: 2px solid var(--sky-bright); outline-offset: 2px; }
.fm-panels { display: grid; }
.fm-panel { grid-area: 1 / 1; min-width: 0; scroll-margin-top: 170px; }
.fm-panel-off { visibility: hidden; }

/* the access request over the trial page */
.fm-dialog {
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  border: 0;
  border-radius: 24px;
  padding: 26px 28px 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-deep);
  overflow: auto;
  overscroll-behavior: contain;
}
.fm-dialog::backdrop { background: rgba(10, 44, 61, 0.45); }
.fm-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.fm-dialog-head h3 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.fm-dialog-close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.fm-dialog-close:hover { border-color: var(--sky); color: var(--sky-deep); }
@media (max-width: 420px) {
  .fm-dialog { padding: 20px 16px 12px; }
}

/* the trial-ready page: the four answers of the e-mail link in one place */
.fm-states { display: grid; }
.fm-state { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.fm-ready[data-state='issued'] .fm-state[data-s='issued'],
.fm-ready[data-state='expired'] .fm-state[data-s='expired'],
.fm-ready[data-state='exists'] .fm-state[data-s='exists'],
.fm-ready[data-state='invalid'] .fm-state[data-s='invalid'] { visibility: visible; }
.fm-progress { height: 1.6em; line-height: 1.6; overflow: hidden; margin-top: 14px; font-weight: 600; color: var(--sky-deep); font-size: 0.95rem; }

/* the box of a page whose section head names the form (implementation, custom software, AI) */
.s-box-bare { max-width: 820px; }
.s-box-bare .s-form { margin-top: 0; }
.s-form > .fm-switch > .fm-tabs { margin-top: 0; }

/* a page with a form beside a box (try, contact): the form gets the wider column, so its half
   fields stand side by side and the form is shorter */
@media (min-width: 901px) {
  .s-two-col.fm-cols { grid-template-columns: 1.6fr 1fr; }
}