/* =============================================================================
   "Is Modulysa for me?" (templates/public/fit.html, fit_result.html and their includes). Loaded on these pages only,
   on top of app.css, whose classes it uses as they are: .section-label, .lead, .btn, .badge, .onb-back, .sc-bar,
   .card.accent, .quota-bar, .form-grid, .field, .input, .check, the sound check's dialog (.sc), the hero's .hero-blob.
   Phone: 24px under the nav and 40px at the end; from 641px the .section rhythm, the statements as rows, and the
   controls in a 23rem column (the inner width of the sign-in card); from 901px the start page in the landing hero's
   two columns. Works LTR and RTL.
   ========================================================================== */
.fit { padding: 1.5rem 0 2.5rem; }
.fit h1, .fit h2 { text-wrap: balance; }
.fit [hidden] { display: none !important; }   /* classes below that set display must not beat hidden */
.fit-col { width: 100%; }
.fit .btn-block { white-space: normal; text-align: center; }   /* a long label wraps inside its button, never past it */

/* ---------------------------------------------------------- start (S1) --- */
.fit-h1 { margin: 0 0 1rem; }
.fit-lead { margin: 0 0 0.75rem; }
.fit-details { margin: 0 0 2rem; color: var(--text-2); }
.fit-who { border: 0; margin: 0; padding: 0; min-width: 0; }
.fit-who legend { width: 100%; padding: 0; margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--text); text-align: center; }
.fit-go { margin-top: 1.5rem; }
.fit-quiet { margin: 1rem 0 0; color: var(--text-2); text-align: center; }
.fit-error { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--red); }
.fit-error-top { margin: 0 0 1.5rem; }

/* One column up to 900px: the text, the art, the controls. From 901px the landing hero's two columns (app.css
   .hero-grid): the text and the controls one block at the start, the art beside it (see desktop below). */
.fit-start { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "art" "form"; }
.fit-start-text { grid-area: text; }
.fit-start > .fit-col { grid-area: form; }

/* The art (includes/fit_art.html): the landing hero's blob with a result's radar on it, the shape moving by SMIL.
   Decorative. Left out below 480px: on a phone it would push Start below the first screen. */
.fit-art { grid-area: art; position: relative; width: 100%; max-width: 17.5rem; aspect-ratio: 1 / 1; margin: 0 auto 2rem; }
.fit-art svg { position: absolute; left: 9%; top: 9%; width: 82%; height: 82%; overflow: visible; }
/* The shape: the accent at a result's 16 % when still; the moving one's fill goes between 12 and 22 % (SMIL) */
.fit-art .shape { fill: var(--accent); }
.fit-art .still { display: none; fill-opacity: 0.16; }
/* The blob: the landing hero's change of shape (app.css: blob, 14 s), a slow breath in size that stays inside the box,
   and its colours drifting: the gradient, a little larger than the blob, slides between cool (the blue spread wide,
   the amber pale) and warm (the blue in its corner, the amber deeper). Standing still it shows the middle of the two. */
.fit-art .hero-blob { background-size: 130% 130%; background-position: 65% 65%;
                      animation: blob 14s ease-in-out infinite alternate, fit-breathe 11s ease-in-out infinite alternate,
                                 fit-drift 19s ease-in-out infinite alternate; }
@keyframes fit-breathe { from { scale: 0.96; } to { scale: 1; } }
@keyframes fit-drift { from { background-position: 30% 30%; } to { background-position: 100% 100%; } }
@media (max-width: 900px) { .fit-art text { font-size: 16px; } }   /* the art at 280px: the numbers stay about 12px */
@media (max-width: 479px) { .fit-art { display: none; } }
/* The art moves even under prefers-reduced-motion, like the landing hero's blob and bars (app.css never stills them);
   the movement is slow and small. To still it, bring back a reduced-motion rule hiding .move and showing .still. */

/* Two equal buttons for one choice: a label round a visually hidden radio. Chosen = the primary look without its
   glow or its lift; the focus ring of .focus-ctrl. */
.fit-pair { display: flex; gap: 0.5rem; }
.fit-opt { flex: 1 1 0; min-width: 0; display: flex; position: relative; margin: 0; }
.fit-opt .btn { flex: 1 1 auto; min-width: 0; }
.fit-opt input:checked + .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.fit-opt input:checked + .btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.fit-opt input:focus-visible + .btn { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------- statements (S2, S4) --- */
.fit-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
[dir="rtl"] .fit .onb-back svg { transform: scaleX(-1); }
.fit-bar { grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 1rem 0 1.5rem; }
.fit-bar[hidden] + .fit-step, .fit-bar[hidden] + .fit-error-top { margin-top: 1.5rem; }   /* no bar without JS */
.fit-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.fit-step + .fit-step { margin-top: 3rem; }        /* without JS every area is on the page */
.fit-steps.is-stepped .fit-step + .fit-step { margin-top: 0; }
.fit-step h2 { margin: 0 0 0.5rem; }
.fit-step h2:focus { outline: none; }
.fit-hint { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--text-2); }
.fit-items { margin-top: 2rem; }
.fit-item + .fit-item { margin-top: 2rem; }
.fit-item > p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--text); }
.fit-next { margin-top: 2.5rem; }

/* ------------------------------------------------------ result (S3, S5) --- */
.fit-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 0.5rem; }
.fit-count { margin: 0; }
.fit-pic { margin-top: 2rem; }
.fit-figure { margin: 0; }
.fit-figure figcaption { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--text-2); text-align: center; }
.fit-radar { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.fit-radar .ring, .fit-art .ring { fill: none; stroke: #cfd4e0; }
.fit-radar .spoke, .fit-art .spoke { stroke: #e3e6ee; }
.fit-radar .shape, .fit-art .shape { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.fit-radar .shape { fill: var(--accent-glow); }
.fit-radar text, .fit-art text { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--text-2); }
.fit-areas-title { margin: 2rem 0 0.75rem; }
.fit-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.fit-areas li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; column-gap: 0.5rem; row-gap: 0.5rem; align-items: baseline; }
.fit-areas .n { font-size: 0.875rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fit-areas .lbl { font-size: 0.95rem; font-weight: 500; color: var(--text); }
.fit-areas .val { font-size: 0.875rem; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.fit-areas .quota-bar { grid-column: 2 / -1; }
[dir="rtl"] .fit-areas .quota-bar > span { background: linear-gradient(270deg, var(--accent) 0%, #60a5fa 100%); }
.fit-readout { margin-top: 2rem; padding: 1.25rem; }
.fit-readout p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--text); }
.fit-order { margin: 1rem 0 0; font-size: 0.95rem; line-height: 1.65; color: var(--text-2); }
.fit-actions { display: grid; gap: 0.75rem; margin-top: 2rem; }
.fit-actions form { margin: 0; }
.fit-wrap { white-space: normal; text-align: center; padding-inline: 1.25rem; }

/* ------------------------------------------------- e-mail block (S6, S7) --- */
.fit-mail { margin-top: 2rem; }
/* The quiet pair: two grey buttons side by side (the site's .btn-pill grey, button-sized); the e-mail form opens
   below both of them, so it is pulled across the first column with a negative margin inside the grid cell */
.fit-quiet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: start; }
.btn-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.7rem 1rem; border: 0; border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-2); font: inherit; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; text-align: center; transition: background 0.15s, color 0.15s; }
.btn-quiet:hover { background: var(--bg-card-hover); color: var(--text); }
.fit-mail-form > summary { list-style: none; width: 100%; }
.fit-mail-form > summary::-webkit-details-marker { display: none; }
.fit-mail-form[open] > summary { background: var(--bg-card-hover); color: var(--text); }
.fit-mail-form > form { margin: 1.5rem 0 0 calc(-100% - 0.5rem); width: calc(200% + 0.5rem); }
.fit-mail-line { margin: 0 0 0.25rem; color: var(--text-2); }
.fit-hc { min-height: 46px; padding: 0.65rem 0.9rem; border: 1.5px solid var(--border-strong); border-radius: 10px; background: #fff; font-size: 1rem; line-height: 1.65; color: var(--text); }
.fit-hc .check { align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 400; color: var(--text); }
.fit-hc .check input { margin-top: 0; }
/* fit-check.js marks the row: data-state idle, checking, done or failed, and .has-error when the check failed or the
   box was left unticked. An error looks like a field's (.field.has-error, .errors): the red border and red words. */
.fit-hc.has-error, .fit-hc[data-state="failed"] { border-color: var(--red); }
.fit-hc.has-error .check, .fit-hc[data-state="failed"] .check { color: var(--red); }
.fit-noscript { margin: 0; color: var(--text-2); }   /* without JS the check cannot run: the form says so */
.fit-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; opacity: 0; pointer-events: none; }
.form-grid > .fit-error { margin: 0; }
.fit-sent { text-align: center; }
.fit-sent:focus { outline: none; }
.fit-sent .feature-icon { margin: 0 auto 1rem; }
.fit-sent h2 { margin: 0 0 0.5rem; }
.fit-sent p { margin: 0 0 0.5rem; }
.fit-sent .small { margin: 0; color: var(--text-2); }

/* ---------------------------------------------------- contact dialog (C1) --- */
.fit-contact { max-width: calc(100vw - 2rem); }   /* the browser's own modal margin would make it 352px on a phone */
.fit-contact .sc-title:focus { outline: none; }
.fit-contact .fit-close { margin: 0; flex: none; }
.fit-contact-intro { color: var(--text-2); }
.fit-contact-form { margin-top: 1rem; }
@media (max-width: 640px) { .fit-contact:modal { margin-top: 1rem; } }   /* phone: 16px from the top of the screen */
/* Without JS the dialog never opens as a modal: it shows in the page when the address ends in #fit-contact (the
   "Contact us" link) or when a post came back with it open */
.fit-contact:target:not(:modal), .fit-contact[open]:not(:modal) {
  display: block; position: static; inset: auto; margin: 3rem auto 2.5rem; width: min(440px, calc(100% - 2.5rem));
  max-height: none; overflow: visible; border: 1px solid var(--border); box-shadow: var(--shadow-sm); outline: none;
}

/* ------------------------------------------------------------- desktop --- */
@media (min-width: 641px) {
  .fit { padding: 4.5rem 0; }
  .fit-col { width: 23rem; max-width: 100%; margin-inline: auto; }
  .fit-hint { margin: 0 0 0.75rem; }
  .fit-items { margin-top: 0; }
  .fit-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; }
  .fit-item + .fit-item { margin-top: 0; }
  .fit-item > p { flex: 1; margin: 0; }
  .fit-item .fit-pair { flex: none; }
  .fit-item .fit-opt { flex: none; width: 6.5rem; }
  .fit-item .fit-opt .btn { padding-inline: 0; }
  .fit-next { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
  .fit-next .btn { width: auto; min-width: 13.5rem; }
  .fit-pic { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .fit-areas-title { margin-top: 0; }
}
/* The start page from 901px: the text and the controls one block at the start, the art beside it as on the landing
   hero. The empty rows above and below the block share what the art has over it, so the block sits level with the
   art's middle (and the art with the block's when the block is the taller). */
@media (min-width: 901px) {
  .fit-start { grid-template-columns: 1.1fr 0.9fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 3rem;
               grid-template-areas: ". art" "text art" "form art" ". art"; }
  .fit-art { max-width: 480px; margin: 0 auto; align-self: center; }
  .fit-start > .fit-col { margin-inline: 0; }   /* the controls start where the text starts */
}