/* ─────────────────────────────────────────────────────────────────────────────
   The Inventors — public form toolkit stylesheet.

   ONE stylesheet for every form under /forms/. Each page links it once and puts a
   flavour class on <body>:

     class="f-ext"                     external form (no login) — the default
     class="f-int"                     internal form (behind portal auth)
     class="f-ext f-position"          per-form deltas (card width, type scale…)

   The core (background, card, header, CMYK stripe, fields, button, states) is
   declared once. Everything a single form needs differently is either a custom
   property on its flavour class or a small scoped override block at the bottom.
   Never copy this file into a form's <style> block — that is exactly the
   duplication this toolkit exists to remove.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --magenta:#E4007E; --yellow:#FFEC00; --cyan:#00B8ED;
  --indigo:#312782; --indigo-2:#241c63; --indigo-3:#3b2fa0;
  --green:#009540; --ink:#15103a; --white:#fff;
  --line:#e7e4f2; --muted:#6b6790; --soft:#fbfaff;

  /* per-form geometry — override on the flavour class, never inline */
  --page-pad:32px 16px;
  --card-max:660px;
  --card-radius:26px;
  --head-pad:26px 32px 22px;
  --head-px:32px;
  --logo-h:30px;
  --logo-mb:14px;
  --eyebrow-size:.72rem;
  --h1-size:1.5rem;
  --body-pad:24px 32px 30px;
  --body-px:32px;
  --state-pad:42px 32px;
  --state-h2:1.6rem;
  --btn-mt:18px;
  --btn-pad:15px 22px;
  --btn-fs:1rem;
  --btn-ls:.02em;
  --btn-disabled-op:.6;
  --err-mt:12px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Montserrat,system-ui,-apple-system,sans-serif;
  color:var(--ink); min-height:100vh; padding:var(--page-pad);
  background:var(--indigo);
  background-image:
    radial-gradient(120% 90% at 85% 0%, #4334bd 0%, rgba(67,52,189,0) 55%),
    radial-gradient(100% 80% at 8% 100%, #3b2fa0 0%, rgba(59,47,160,0) 60%),
    linear-gradient(180deg, var(--indigo) 0%, var(--indigo-2) 100%);
  background-attachment:fixed;
  display:flex; align-items:flex-start; justify-content:center;
}

/* playful brand shapes floating behind the card */
.shapes{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.shape{position:absolute;opacity:.85;animation:drift 14s ease-in-out infinite}
.s1{width:120px;height:120px;border-radius:50%;background:var(--magenta);top:9%;left:7%}
.s2{width:78px;height:78px;border-radius:50%;background:var(--cyan);bottom:12%;left:14%;animation-duration:11s}
.s3{width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--yellow);top:16%;right:10%;animation-duration:17s}
.s4{width:54px;height:54px;border-radius:16px;background:var(--green);bottom:18%;right:9%;transform:rotate(12deg);animation-duration:13s}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(8deg)}}

.card{
  position:relative; z-index:1; width:100%; max-width:var(--card-max);
  background:var(--indigo); border-radius:var(--card-radius); overflow:hidden;
  box-shadow:0 30px 70px rgba(8,4,40,.45);
}

/* header band */
.head{position:relative;background:var(--indigo);color:#fff;padding:var(--head-pad);border-radius:var(--card-radius) var(--card-radius) 0 0}
.langsel{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.14);color:#fff;border:0;
  border-radius:999px;padding:7px 28px 7px 14px;font:inherit;font-weight:700;font-size:.76rem;letter-spacing:.02em;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="7"><path d="M1 1l4 4 4-4" stroke="white" stroke-width="2" fill="none"/></svg>');
  background-repeat:no-repeat;background-position:right 11px center}
.langsel:hover{background-color:rgba(255,255,255,.24)}
.langsel:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.langsel option{color:var(--ink)}
.head img{height:var(--logo-h);display:block;margin-bottom:var(--logo-mb)}
.eyebrow{font-family:Bungee,cursive;font-size:var(--eyebrow-size);letter-spacing:.18em;color:var(--yellow);text-transform:uppercase}
.head h1{font-family:Bungee,cursive;font-weight:400;font-size:var(--h1-size);line-height:1.15;margin:6px 0 0}
/* author-supplied lead paragraph (e.g. a position description); plain text, line breaks kept */
.head__desc{margin:10px 0 0;font-size:.86rem;line-height:1.5;font-weight:500;color:rgba(255,255,255,.82);white-space:pre-wrap}
.head .sub{font-size:.82rem;opacity:.85;font-weight:600}

/* CMYK stripe */
.rainbow{height:6px;display:flex}
.rainbow i{flex:1}
.rainbow i:nth-child(1){background:var(--magenta)}
.rainbow i:nth-child(2){background:var(--yellow)}
.rainbow i:nth-child(3){background:var(--cyan)}
.rainbow i:nth-child(4){background:var(--green)}

/* progress bar (forms that report completion) */
.progress{height:5px;background:#eceafd}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));
  transition:width .45s cubic-bezier(.22,1,.36,1)}

.body{padding:var(--body-pad);background:#fff}
.partners{background:#fff;padding:18px var(--head-px) 0}
.partners img{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}

/* section grouping */
.sect{margin-top:22px}
.sect.first{margin-top:4px}
.sect__h{font-family:Bungee,cursive;font-weight:400;font-size:.82rem;letter-spacing:.04em;color:var(--indigo);margin:0 0 10px}
.greet{font-size:1.02rem;font-weight:700;margin:2px 0 16px}
.hint{font-size:.78rem;color:var(--muted);margin:0 0 10px}
/* the school's own conditions, printed for the parent above the consent boxes (register_student) */
.cond{font-size:.88rem;line-height:1.5;color:#2c2850;margin:0 0 8px;white-space:pre-wrap;overflow-wrap:anywhere}
.cond:last-child{margin-bottom:0}

/* fields */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.f{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.f.first{margin-top:0}
.grid2 .f{margin-top:0}
label.lbl{font-weight:600;font-size:.82rem;color:#2c2850}
.req{color:var(--magenta);font-weight:800}
.opt-tag{color:var(--muted);font-weight:500}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date]{
  width:100%;padding:12px 13px;border:2px solid var(--line);border-radius:12px;
  font:inherit;color:var(--ink);background:var(--soft);transition:border-color .15s,box-shadow .15s;
}
input::placeholder{color:#a9a5c4}
input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,184,237,.18);background:#fff}
textarea{width:100%;padding:12px 13px;border:2px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:var(--soft);min-height:96px;resize:vertical;transition:border-color .15s,box-shadow .15s}
textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,184,237,.18);background:#fff}
select.field-sel{width:100%;padding:12px 8px;border:2px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:var(--soft)}
select.field-sel:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,184,237,.18);background:#fff}

/* option cards — colour-coded selectable radio/checkbox cards */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:2px solid var(--line);
  border-radius:14px;cursor:pointer;background:var(--soft);transition:border-color .15s,background .15s,box-shadow .15s;position:relative}
.opt:hover{background:#fff}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__bar{width:8px;align-self:stretch;min-height:34px;border-radius:6px;background:var(--accent,#bbb);flex:0 0 auto}
.opt__txt{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.opt__txt b{font-weight:700;font-size:.92rem}
.opt__txt small{color:var(--muted);font-size:.8rem}
.opt--pre{--accent:var(--magenta)} .opt--c1{--accent:var(--cyan)} .opt--c2{--accent:var(--green)}
.opt:has(input:checked){border-color:var(--accent);background:#fff;box-shadow:0 8px 22px rgba(49,39,130,.12)}
.opt:has(input:focus-visible){box-shadow:0 0 0 4px rgba(0,184,237,.22)}

/* checkboxes / consent */
.check{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:.88rem;font-weight:500;cursor:pointer}
.check input{margin-top:2px;width:18px;height:18px;accent-color:var(--magenta);flex:0 0 auto}
/* checkbox group laid out in columns */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.check-grid .check{margin-top:0;align-items:center}

/* phone: country dial-code picker + national number */
.phone-row{display:grid;grid-template-columns:minmax(78px,92px) 1fr;gap:8px}

/* file upload */
.cv-drop{border:2px dashed var(--line);border-radius:12px;padding:16px;text-align:center;color:var(--muted);cursor:pointer;background:var(--soft)}
.cv-drop.has-file{border-style:solid;border-color:var(--green);color:var(--ink)}
/* the attachment was lost by a rebuild (language switch) and must be re-attached */
.cv-drop.needs-file{border-color:var(--magenta);color:var(--ink)}
input[type=file]{display:none}

/* level rows (a label with a compact select beside it) */
.lang-rows{display:flex;flex-direction:column;gap:8px}
.lang-row{display:grid;grid-template-columns:1fr minmax(150px,45%);gap:10px;align-items:center}
.lang-row .lang-name{font-size:.88rem;font-weight:500}
.lang-row select.field-sel{padding-top:9px;padding-bottom:9px}

/* searchable type-ahead multi-select */
.ta{position:relative}
.ta__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ta__tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:#efeaff;color:var(--indigo);font-weight:700;font-size:.8rem}
.ta__tag button{border:0;background:none;color:inherit;font:inherit;line-height:1;cursor:pointer;padding:0 0 0 2px;opacity:.65}
.ta__tag button:hover{opacity:1}
.ta__menu{position:absolute;left:0;right:0;top:100%;z-index:5;margin-top:4px;max-height:220px;overflow:auto;
  background:#fff;border:2px solid var(--line);border-radius:12px;box-shadow:0 14px 32px rgba(49,39,130,.16)}
.ta__menu[hidden]{display:none}
.ta__opt{padding:10px 12px;font-size:.88rem;cursor:pointer}
.ta__opt:hover,.ta__opt.is-active{background:#f2effe}
.ta__opt[aria-selected=true]{font-weight:700;color:var(--indigo)}
.ta__empty{padding:10px 12px;font-size:.82rem;color:var(--muted)}
/* The single-select combobox reads as a DROPDOWN, not as a text box: same chevron a native
   select draws, so tapping it is obviously how you open the list. */
.ta--one .ta__input{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6885' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}

/* repeating "add another" group */
.rep{display:flex;flex-direction:column;gap:10px}
.rep__item{border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--soft);position:relative}
.rep__drop{position:absolute;top:8px;right:10px;border:0;background:none;color:var(--muted);font:inherit;font-size:1rem;cursor:pointer;line-height:1}
.rep__drop:hover{color:var(--magenta)}
.rep__add{align-self:flex-start;border:2px dashed var(--line);background:none;border-radius:999px;padding:8px 16px;
  font:inherit;font-weight:700;font-size:.82rem;color:var(--indigo);cursor:pointer}
.rep__add:hover{border-color:var(--cyan);background:#f5fdff}

/* summary rows (read-only detail blocks) */
.summary{border:2px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--soft)}
.row{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.row:last-child{border-bottom:0}
.row .k{flex:0 0 96px;font-weight:700;font-size:.78rem;color:var(--indigo);text-transform:uppercase;letter-spacing:.03em}
.row .v{font-weight:600;font-size:.96rem;color:var(--ink)}
.lead{margin:0 0 16px;font-size:.98rem;font-weight:500;color:#2c2850;line-height:1.4}

.legend{margin-top:14px;font-size:.78rem;color:var(--muted)}
.err{margin-top:var(--err-mt);color:#c0006c;font-weight:600;font-size:.86rem}
.fielderr{display:none;color:#c0006c;font-weight:600;font-size:.74rem;margin-top:3px}
.fielderr.show{display:block}
input.invalid,textarea.invalid,select.invalid{border-color:var(--magenta)}
input.invalid{background:#fff}

.btn{margin-top:var(--btn-mt);width:100%;border:0;border-radius:999px;padding:var(--btn-pad);
  font-family:Bungee,cursive;font-weight:400;font-size:var(--btn-fs);letter-spacing:var(--btn-ls);color:#fff;
  background:var(--green);cursor:pointer;box-shadow:0 6px 0 #00692d,0 12px 22px rgba(0,149,64,.4);
  transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{transform:translateY(-2px);background:#00a847}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 #00692d,0 6px 12px rgba(0,149,64,.35)}
.btn:disabled{opacity:var(--btn-disabled-op);cursor:not-allowed;transform:none}

/* honeypot + visibility */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hidden{display:none!important}

/* loading / invalid-link / thank-you states */
.state{padding:var(--state-pad);text-align:center;background:#fff}
.state .em{font-size:2.4rem;line-height:1;margin-bottom:12px}
.state .emoji{font-size:2.6rem;display:block;margin-bottom:10px;animation:pop .6s cubic-bezier(.34,1.56,.64,1)}
.state h2{font-family:Bungee,cursive;font-weight:400;font-size:var(--state-h2);color:var(--indigo);margin:0 0 8px}
.state p{color:var(--muted);margin:0}

@media (max-width:560px){
  body{--page-pad:18px 12px;--head-px:22px;--body-px:22px}
  .grid2,.opts,.check-grid{grid-template-columns:1fr}
  .head{padding-left:var(--head-px);padding-right:var(--head-px)}
  .body{padding-left:var(--body-px);padding-right:var(--body-px)}
  .head h1{font-size:var(--h1-size-sm,var(--h1-size))}
}
@media (prefers-reduced-motion:reduce){
  .shape{animation:none}
  .btn,.opt,input,.progress i{transition:none}
}

/* ── internal flavour ────────────────────────────────────────────────────────
   Same components, portal-auth chrome: flat surface, no floating shapes, no
   language switcher (the portal already knows the user's language). */
.f-int{--page-pad:24px 16px;--card-max:760px;--card-radius:16px}
.f-int{background:#f6f5fb;background-image:none}
.f-int .card{background:#fff;box-shadow:0 10px 30px rgba(8,4,40,.10)}
.f-int .shapes{display:none}
.f-int .head{background:var(--indigo)}

/* ── per-form deltas ───────────────────────────────────────────────────────── */

/* substitution — narrower card, slightly smaller display type */
.f-substitution{--card-max:560px;--h1-size:1.4rem;--h1-size-sm:1.25rem;--body-pad:26px 32px 30px;
  --state-pad:44px 32px;--state-h2:1.5rem;--btn-mt:20px;--btn-pad:16px 22px;--btn-fs:1.02rem;--err-mt:14px}
.f-substitution .state p{font-weight:500}
/* the phone audit's toolkit-wide langsel finding, fixed the way payment and reference fixed it:
   a full-size control in the header's flow (44px, 16px text, so iOS does not zoom) */
.f-substitution .langsel{position:static;display:block;min-height:44px;max-width:100%;margin:0 0 16px auto;
  padding:10px 30px 10px 16px;font-size:16px}
/* the "no" answer: the same pill and hit target as the "yes", quieter so the yes stays the obvious tap */
.f-substitution .btn-decline{margin-top:12px;background:#fff;color:var(--indigo);
  font-family:Montserrat,system-ui,sans-serif;font-weight:700;letter-spacing:normal;box-shadow:inset 0 0 0 2px var(--line)}
.f-substitution .btn-decline:hover{background:var(--soft);box-shadow:inset 0 0 0 2px var(--indigo)}
.f-substitution .btn-decline:active{transform:translateY(1px);box-shadow:inset 0 0 0 2px var(--indigo)}
@media (max-width:560px){
  .f-substitution .row{flex-direction:column;gap:2px}
  .f-substitution .row .k{flex:none}
}

/* onboarding — the substitution card, plus rows that are CHOICES rather than facts: a whole row is
   the hit target (a date on a phone is a small thing to tap), and the picked one is visibly picked
   rather than relying on a 16px radio to carry the state. */
.f-onboarding{--card-max:560px;--h1-size:1.4rem;--h1-size-sm:1.25rem;--body-pad:26px 32px 30px;
  --state-pad:44px 32px;--state-h2:1.5rem;--btn-mt:20px;--btn-pad:16px 22px;--btn-fs:1.02rem;--err-mt:14px}
.f-onboarding .state p{font-weight:500}
.f-onboarding .row{align-items:center;gap:12px;cursor:pointer}
.f-onboarding .row input{flex:none;width:20px;height:20px;accent-color:var(--magenta, #d6006e);cursor:pointer}
.f-onboarding .row .v{text-align:left;font-weight:600}
.f-onboarding .row:has(input:checked){background:rgba(214,0,110,.07);border-radius:10px}
.f-onboarding .row:has(input:focus-visible){outline:2px solid var(--magenta, #d6006e);outline-offset:2px}

/* ── THE SESSION CARDS (design applied 2026-08-13) ─────────────────────────────────────────────
   EVERY RULE HERE IS UNDER `.f-onboarding`. This stylesheet is shared by five public forms and a
   deploy publishes all of them at once; an unscoped rule would restyle the application form and the
   student registration as a side effect of changing this one.
   The circle that becomes a tick IS the radio — moved off-screen, never removed — so focus, arrow
   keys and the group announcement survive the new look. `.is-on` is toggled in JS rather than read
   with `:has()`, because this page is opened by candidates on whatever browser they own. */
.f-onboarding .onb-sub{margin:2px 0 18px;font-size:.86rem;color:#6f6b8a;font-weight:500}
.f-onboarding .onb-list{display:grid;gap:10px;margin:0 0 4px}
.f-onboarding .onb-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border:2px solid #e6e3f2;
  border-radius:14px;background:#fcfbfe;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;text-align:left}
.f-onboarding .onb-card:hover{border-color:#c9c2ea}
/* Off-screen, not display:none — a hidden input is unfocusable and drops out of the radio group. */
.f-onboarding .onb-native{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.f-onboarding .onb-card:has(.onb-native:focus-visible){outline:2px solid var(--magenta);outline-offset:2px}
.f-onboarding .onb-date{flex:none;width:52px;height:54px;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:#eef1fb;color:#2c2072;transition:background .15s,color .15s}
.f-onboarding .onb-day{font-size:1.35rem;font-weight:800;line-height:1}
.f-onboarding .onb-mon{font-size:.6rem;font-weight:700;letter-spacing:.12em;margin-top:3px;text-transform:uppercase}
.f-onboarding .onb-when{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.f-onboarding .onb-wd{font-weight:700;font-size:.95rem;color:#241d5e}
/* ONLY THE FIRST LETTER. `text-transform:capitalize` capitalises EVERY word, which turned the
   Portuguese "quarta-feira" into "Quarta-Feira" — a spelling no reader of this page uses. The
   weekday arrives lowercase from Intl in most locales, so the first letter is the only one to
   raise, and locales that already capitalise it are unaffected. */
.f-onboarding .onb-wd::first-letter{text-transform:uppercase}
.f-onboarding .onb-time{font-size:.82rem;color:#7a7596;font-weight:600}
.f-onboarding .onb-tick{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #cfcadf;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}
/* The tick is drawn, so it needs no font and no emoji: two borders rotated into a checkmark. */
.f-onboarding .onb-tick::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);transition:transform .15s;margin-top:-2px}
.f-onboarding .onb-card.is-on{border-color:var(--magenta);background:#fef5fa;box-shadow:0 6px 18px rgba(228,0,126,.13)}
.f-onboarding .onb-card.is-on .onb-date{background:var(--magenta);color:#fff}
.f-onboarding .onb-card.is-on .onb-tick{border-color:var(--magenta);background:var(--magenta)}
.f-onboarding .onb-card.is-on .onb-tick::after{transform:rotate(45deg) scale(1)}
/* The button goes green ONLY once a session is chosen: grey is "nothing to confirm yet", and the
   label names the session, so the colour and the words change together. */
.f-onboarding #confirm{border-radius:999px;letter-spacing:.06em;background:#d8d5e6;color:#8e8aa6;box-shadow:none}
.f-onboarding #confirm.is-ready{background:var(--green);color:#fff;box-shadow:0 4px 0 #00723a}
.f-onboarding #confirm.is-ready:hover{filter:brightness(1.06)}
@media (max-width:420px){
  .f-onboarding .onb-card{gap:11px;padding:11px 12px}
  .f-onboarding .onb-date{width:46px;height:48px}
  .f-onboarding #confirm{letter-spacing:.02em;font-size:.92rem}
}

/* ── TI TRAINING (2026-08-19) — the onboarding session cards, carried to the facilitator training
   pick with two states that page never needed: a FULL and a CANCELLED session stay on screen as a
   muted card with a badge and a disabled radio, because a choice that silently disappears reads
   as a bug on a phone while one that says "Cheia" reads as an answer. Same scoping discipline:
   EVERY rule here is under `.f-training` — this stylesheet is shared by every public form. */
.f-training{--card-max:560px;--h1-size:1.4rem;--h1-size-sm:1.25rem;--body-pad:26px 32px 30px;
  --state-pad:44px 32px;--state-h2:1.5rem;--btn-mt:20px;--btn-pad:16px 22px;--btn-fs:1.02rem;--err-mt:14px}
.f-training .state p{font-weight:500}
.f-training .lead{font-weight:600}
.f-training .trn-list{display:grid;gap:10px;margin:0 0 4px}
.f-training .trn-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border:2px solid #e6e3f2;
  border-radius:14px;background:#fcfbfe;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;text-align:left}
.f-training .trn-card:hover{border-color:#c9c2ea}
/* Off-screen, not display:none — a hidden input is unfocusable and drops out of the radio group. */
.f-training .trn-native{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.f-training .trn-card:has(.trn-native:focus-visible){outline:2px solid var(--magenta);outline-offset:2px}
.f-training .trn-date{flex:none;width:52px;height:54px;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:#eef1fb;color:#2c2072;transition:background .15s,color .15s}
.f-training .trn-day{font-size:1.35rem;font-weight:800;line-height:1}
.f-training .trn-mon{font-size:.6rem;font-weight:700;letter-spacing:.12em;margin-top:3px;text-transform:uppercase}
.f-training .trn-when{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.f-training .trn-wd{font-weight:700;font-size:.95rem;color:#241d5e}
.f-training .trn-wd::first-letter{text-transform:uppercase}
.f-training .trn-time{font-size:.82rem;color:#7a7596;font-weight:600}
.f-training .trn-loc{font-size:.78rem;color:#8e8aa6;font-weight:500}
/* A slot the monitor cannot take because their own day already has something in that hour
   (founder, 2026-08-24). Muted and unpickable, but STILL LISTED with the reason under it: a card
   that vanished would read as a broken form, and a "no" with no reason reads as a bug. */
.f-training .trn-card.is-busy{cursor:not-allowed;opacity:.62;background:#f7f6fa;border-color:#e9e7f0}
.f-training .trn-card.is-busy:hover{border-color:#e9e7f0}
.f-training .oa-busy{color:#8a5a12;font-weight:600}
.f-training .trn-tick{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #cfcadf;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}
.f-training .trn-tick::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);transition:transform .15s;margin-top:-2px}
.f-training .trn-card.is-on{border-color:var(--magenta);background:#fef5fa;box-shadow:0 6px 18px rgba(228,0,126,.13)}
.f-training .trn-card.is-on .trn-date{background:var(--magenta);color:#fff}
.f-training .trn-card.is-on .trn-tick{border-color:var(--magenta);background:var(--magenta)}
.f-training .trn-card.is-on .trn-tick::after{transform:rotate(45deg) scale(1)}
/* A closed session is legible, not gone: muted colours, no pointer, and the badge says why. */
.f-training .trn-card.is-closed{cursor:default;background:#f6f5fa;border-color:#eceaf4;color:#a5a1ba}
.f-training .trn-card.is-closed .trn-wd,.f-training .trn-card.is-closed .trn-time,
.f-training .trn-card.is-closed .trn-loc{color:#a5a1ba}
.f-training .trn-card.is-closed .trn-date{background:#eceaf4;color:#a5a1ba}
.f-training .trn-badge{flex:none;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:#eceaf4;color:#8e8aa6}
.f-training .trn-where{font-weight:600;color:#7a7596;margin-top:-6px}
.f-training #confirm{border-radius:999px;letter-spacing:.06em;background:#d8d5e6;color:#8e8aa6;box-shadow:none}
.f-training #confirm.is-ready{background:var(--green);color:#fff;box-shadow:0 4px 0 #00723a}
.f-training #confirm.is-ready:hover{filter:brightness(1.06)}
@media (max-width:420px){
  .f-training .trn-card{gap:11px;padding:11px 12px}
  .f-training .trn-date{width:46px;height:48px}
  .f-training #confirm{letter-spacing:.02em;font-size:.92rem}
}

/* outreach — the divulgações pick. Borrows .f-training's card language wholesale (the page also
   carries that class); everything here is only what a MULTI-pick over school visits adds: the
   asked-not-deduced zone filter, a square tick (checkbox, not radio), the decline button, the
   "yours / got away" lists on the thank-you, and the "your divulgações" footer. */
.f-outreach{--card-max:600px}
.f-outreach .oa-zone{width:100%;margin:0 0 12px;padding:11px 12px;border:2px solid #e6e3f2;border-radius:12px;
  background:#fcfbfe;font:inherit;font-weight:600;color:#241d5e}
.f-outreach .trn-tick{border-radius:8px}
.f-outreach .trn-time{text-transform:none}
.f-outreach .trn-time::first-letter{text-transform:uppercase}
.f-outreach .oa-decline{display:block;width:100%;margin:10px 0 0;padding:12px;border:0;background:none;
  font:inherit;font-weight:700;font-size:.9rem;color:#8e8aa6;text-decoration:underline;cursor:pointer}
.f-outreach .oa-decline:hover{color:#6f6a8b}
.f-outreach .oa-mine{margin-top:22px;padding-top:14px;border-top:2px dashed #e6e3f2}
.f-outreach .oa-mine h3{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#8e8aa6;margin:0 0 8px}
.f-outreach .oa-mine ul{margin:0;padding-left:18px;color:#4d4768;font-size:.88rem;font-weight:500}
.f-outreach .oa-mine li{margin:3px 0}
.f-outreach .oa-won,.f-outreach .oa-lost{text-align:left;margin:0 auto 6px;max-width:420px}
.f-outreach .oa-sub{font-weight:800;font-size:.85rem;margin:10px 0 4px}
.f-outreach .oa-lost .oa-sub{color:#b3543f}
.f-outreach .oa-won ul,.f-outreach .oa-lost ul{margin:0;padding-left:18px;font-size:.88rem;font-weight:500}

/* position / register_student use the defaults */
.f-position{--h1-size-sm:1.3rem}
.f-register_student{--h1-size-sm:1.3rem}

/* activity_report — the compact in-session report: tighter card, no brand shapes,
   inline option rings instead of colour-bar cards, roster chips, stars, voice input */
.f-activity_report{
  --page-pad:18px 12px 90px;--card-max:620px;--card-radius:24px;
  --head-pad:22px 24px 18px;--head-px:24px;--logo-h:26px;--logo-mb:12px;
  --eyebrow-size:.68rem;--h1-size:1.25rem;--body-pad:20px 20px 26px;--body-px:20px;
  --state-pad:46px 26px;--state-h2:1.4rem;--btn-mt:22px;--btn-ls:normal;--btn-disabled-op:.55;--err-mt:14px;
}
.f-activity_report{
  background-image:
    radial-gradient(120% 90% at 85% 0%, #4334bd 0%, rgba(67,52,189,0) 55%),
    linear-gradient(180deg, var(--indigo) 0%, var(--indigo-2) 100%);
}
.f-activity_report .head h1{line-height:1.2;margin:6px 0 2px}
.f-activity_report .sect__h{font-size:.8rem;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.f-activity_report .sect__h .done{color:var(--green);opacity:0;transform:scale(.4);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.f-activity_report .sect__h.is-done .done{opacity:1;transform:scale(1)}
.f-activity_report textarea,.f-activity_report select{
  width:100%;padding:12px 13px;border:2px solid var(--line);border-radius:12px;
  font:inherit;font-size:.92rem;color:var(--ink);background:var(--soft);transition:border-color .15s,box-shadow .15s}
.f-activity_report textarea:focus,.f-activity_report select:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,184,237,.18);background:#fff}
.f-activity_report textarea{resize:vertical;min-height:92px}
.f-activity_report label.lbl{font-size:.84rem;display:block;margin:0 0 6px}
.f-activity_report .fielderr{font-size:.76rem;margin-top:5px}
.f-activity_report .state p{font-size:.92rem}

/* attendance chips — everyone starts present; tap to mark absent */
.roster{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:2px solid var(--green);
  background:#f0faf4;color:#0c5a2e;font-weight:700;font-size:.9rem;cursor:pointer;user-select:none;
  transition:all .18s cubic-bezier(.22,1,.36,1)}
.chip .dot{width:10px;height:10px;border-radius:50%;background:var(--green);transition:all .18s}
.chip:active{transform:scale(.94)}
.chip.absent{border-color:#d8d5e8;background:#f3f2f9;color:#8d89ad}
.chip.absent .dot{background:#c3c0d8}
.chip.absent .nm{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(141,137,173,.55)}
.roster-note{font-size:.78rem;color:var(--muted);margin-top:8px}

/* inline option rings + yes/no pills (compact radio styles) */
.f-activity_report .opts{display:flex;flex-direction:column;gap:8px}
.f-activity_report .opt{padding:12px 14px;background:var(--soft);font-size:.88rem;font-weight:600;transition:all .15s}
.f-activity_report .opt:hover{background:var(--soft)}
.f-activity_report .opt:active{transform:scale(.985)}
.f-activity_report .opt:has(input:checked){border-color:var(--magenta);background:#fff;box-shadow:0 8px 22px rgba(49,39,130,.10)}
.opt .ring{width:20px;height:20px;border-radius:50%;border:2px solid #c9c5e2;flex:0 0 auto;display:grid;place-items:center;transition:all .15s}
.opt .ring i{width:10px;height:10px;border-radius:50%;background:var(--magenta);transform:scale(0);transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.opt:has(input:checked) .ring{border-color:var(--magenta)}
.opt:has(input:checked) .ring i{transform:scale(1)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:10px 18px;border-radius:999px;border:2px solid var(--line);background:var(--soft);
  font-weight:700;font-size:.88rem;cursor:pointer;transition:all .15s;position:relative}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill:has(input:checked){border-color:var(--cyan);background:#e8f8fe;color:#00688a}
.pill:active{transform:scale(.94)}
/* activity_report DigitALL 1–5 scales: five equal cells that never wrap, even at 320px */
.pills--scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.pills--scale .pill{padding:10px 0;min-height:44px;text-align:center}
/* activity_report training 0–5: six cells in one row while each stays ≥44px wide; on the narrowest
   phones (<375px, where six would be ~36px) two rows of three, 0–2 over 3–5 */
.pills--scale6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:374px){.pills--scale6{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* stars */
.stars{display:flex;gap:4px;flex-wrap:wrap}
.star{font-size:1.7rem;cursor:pointer;filter:grayscale(1);opacity:.4;transition:all .12s;background:none;border:0;padding:2px}
.star.on{filter:none;opacity:1;transform:scale(1.08)}
.star:active{transform:scale(1.3)}

/* AI follow-up card */
.followup{position:relative;margin-top:20px;border:2px solid var(--yellow);border-radius:16px;background:#fffdf0;padding:14px 16px;
  animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
.followup .fq-eyebrow{font-family:Bungee,cursive;font-size:.66rem;letter-spacing:.14em;color:#8a6d00;text-transform:uppercase;margin-bottom:6px}
/* the question keeps clear of the mic parked at the card's top-right */
.followup .fq{font-weight:700;font-size:.92rem;margin:0 0 10px;padding-right:44px}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.97)}100%{opacity:1;transform:none}}
.analyzing{display:none;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);margin-top:8px}
.analyzing.show{display:flex}
.analyzing .sp{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--cyan);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* the voice door — ONE mic per form, for the WHOLE form (spec §7.5, founder ruling 2026-07-29).
   It sits above the questions and reads as chrome of the form, never of a field: the wash and the
   full-width block are what stop it being mistaken for "dictate this box". */
.vdoor{margin:0 0 18px;padding:14px 15px;border-radius:16px;border:2px solid var(--cyan);
  background:linear-gradient(180deg,#eafaff 0%,#f6fdff 100%)}
.vdoor__row{display:flex;align-items:center;gap:13px}
.vdoor__mic{width:48px;height:48px;min-width:48px}
.vdoor__mic svg{width:22px;height:22px}
.vdoor__txt{flex:1;min-width:0}
.vdoor__title{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:.9rem;color:#00506e}
.vdoor__lead{margin:3px 0 0;font-size:.78rem;line-height:1.4;font-weight:500;color:#0079a3}
.vdoor.is-rec{border-color:var(--magenta);background:linear-gradient(180deg,#fff0f8 0%,#fff8fc 100%)}
.vdoor__live{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:.78rem;font-weight:700;color:var(--magenta)}
.vdoor__live.hidden{display:none}
.vdoor__live .rdot{width:9px;height:9px;border-radius:50%;background:var(--magenta);animation:micpulse 1.4s ease-in-out infinite}
.vdoor__time{font-variant-numeric:tabular-nums}
.vdoor__meter{flex:1;height:6px;border-radius:999px;background:rgba(228,0,126,.16);overflow:hidden}
.vdoor__meterbar{display:block;height:100%;width:100%;transform:scaleX(.08);transform-origin:left center;
  background:var(--magenta);transition:transform .18s ease-out}
.vdoor__status{display:none;margin:10px 0 0;font-size:.78rem;font-weight:600;line-height:1.4;color:var(--muted)}
.vdoor__status.show{display:block}
.vdoor__status.ok{color:#0079a3}
.vdoor__status.bad{color:#c0006c}
.vdoor__pending{margin-top:11px;padding-top:10px;border-top:1px dashed rgba(0,121,163,.3);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.vdoor__pending.hidden{display:none}
.vdoor__pendingtxt{flex:1 1 100%;margin:0;font-size:.76rem;font-weight:600;color:#7a5c00}
.vdoor__act{border:2px solid var(--cyan);background:#fff;color:#0079a3;border-radius:999px;padding:7px 15px;
  font-family:Montserrat,sans-serif;font-weight:800;font-size:.74rem;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.vdoor__act:active{transform:scale(.96)}
.vdoor__act--mute{border-color:var(--line);color:var(--muted)}

/* the SCOPED mic (spec §7.7, wave 5e) — one question, and only a question the form asks AFTER the
   whole-form pass. It carries none of the door's chrome on purpose: no wash, no border, no title.
   A small icon parked at the follow-up card's top-right reads as "answer THIS out loud"; the wash
   and the block above the questions is what says "answer the WHOLE form", and only one element on
   a page is allowed to say that. */
.fq-voice{display:block}
.vdoor--inline{margin:0;padding:0;border:0;background:none;border-radius:0}
.vdoor--inline .vdoor__mic{position:absolute;top:11px;right:12px;width:36px;height:36px;min-width:36px}
.vdoor--inline .vdoor__mic svg{width:17px;height:17px}
.vdoor--inline .vdoor__live{margin:0 0 9px}
.vdoor--inline .vdoor__status{margin:0 0 9px}
.vdoor--inline .vdoor__pending{margin:0 0 9px;padding-top:0;border-top:0}
/* ONE RECORDING AT A TIME, shown. The other mic is unavailable while this one runs — it says so in
   its accessible name (`doorBusy`), and this is the same fact for the eye. */
.mic.taken{opacity:.35;cursor:not-allowed}

/* THE DOCK (spec §7.6, founder directive 2026-07-29). From the moment recording starts the door
   floats and stays visible while the page scrolls: on a phone, scrolling down to read the
   questions used to take the recorder off screen, so the person could not see the timer, could not
   tell it was still listening, and had to scroll back up to stop.
   It is the SAME element — a class on the door's own root, never a second mic — so the stop button
   keeps its accessible name, its handler and its place in the tab order, and nothing traps focus.
   `body.has-voicedock` reserves room at the foot of the DOCUMENT, which is how the floating control
   is kept clear of the submit button without either knowing about the other; the inset keeps it
   clear of the iOS home indicator. The door's own container holds its height while it is away, so
   the questions do not jump the instant record is pressed. */
.vdoor--docked{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:19;margin:0 auto;max-width:520px;box-shadow:0 10px 34px rgba(0,80,110,.28);
  animation:vdockin .18s ease-out}
.vdoor--docked .vdoor__lead{display:none}
.vdoor--docked .vdoor__live{margin-top:9px}
@keyframes vdockin{from{opacity:0;transform:translateY(12px)}}
body.has-voicedock{padding-bottom:136px}

/* voice input on long-text fields */
.lblrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lblrow .lbl{margin:0;flex:1}
.mic{flex:0 0 auto;width:40px;height:40px;min-width:40px;border-radius:50%;border:2px solid var(--cyan);
  background:#eafaff;color:#0079a3;display:grid;place-items:center;cursor:pointer;padding:0;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),background .15s,border-color .15s,color .15s;
  -webkit-tap-highlight-color:transparent}
.mic svg{width:19px;height:19px;display:block}
.mic:hover{background:#d9f4ff}
.mic:active{transform:scale(.9)}
.mic:disabled{opacity:.4;cursor:not-allowed}
.mic.rec{border-color:var(--magenta);background:var(--magenta);color:#fff;animation:micpulse 1.4s ease-in-out infinite}
.mic.busy{border-color:var(--line);color:var(--muted);background:#f3f2f9;cursor:default}
.mic.busy svg{animation:spin .8s linear infinite}
@keyframes micpulse{
  0%{box-shadow:0 0 0 0 rgba(228,0,126,.45)}
  70%{box-shadow:0 0 0 10px rgba(228,0,126,0)}
  100%{box-shadow:0 0 0 0 rgba(228,0,126,0)}}
.voicebar{display:none;align-items:center;gap:8px;margin-top:8px;font-size:.78rem;font-weight:600;color:var(--muted)}
.voicebar.show{display:flex}
.voicebar .rdot{width:9px;height:9px;border-radius:50%;background:var(--magenta);animation:micpulse 1.4s ease-in-out infinite}
.voicebar .sp2{width:13px;height:13px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--cyan);animation:spin .8s linear infinite}
.voicebar.err{color:#c0006c}
.voicehint{display:flex;align-items:center;gap:6px;font-size:.74rem;color:#0079a3;margin:8px 0 0;font-weight:600}
.voicehint svg{width:14px;height:14px;flex:0 0 auto}

/* fields auto-filled from a voice note — visibly distinct, always editable */
.vbadge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:var(--yellow);color:#7a5c00;font-family:Montserrat,sans-serif;font-weight:800;font-size:.62rem;
  letter-spacing:.02em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.sect.voice-filled textarea{border-color:var(--yellow);background:#fffdf0}
/* what a CORRECTING take replaced (§7.6) — a second recording may fix an answer an earlier one
   gave, and the answer it replaced stays readable until the report is sent */
.vwas{margin:2px 0 6px;font-size:.72rem;font-weight:600;color:var(--muted)}
.sect.voice-filled .opt:has(input:checked),.sect.voice-filled .pill:has(input:checked){
  border-color:#e0b400;box-shadow:0 0 0 3px rgba(255,236,0,.35)}
.sect.voice-in{animation:voicein .55s cubic-bezier(.22,1,.36,1)}
@keyframes voicein{
  0%{transform:translateY(6px);background:rgba(255,236,0,.28)}
  60%{background:rgba(255,236,0,.14)}
  100%{transform:none;background:transparent}}
.voicetoast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);z-index:20;
  background:var(--indigo);color:#fff;padding:11px 18px;border-radius:999px;font-size:.82rem;font-weight:700;
  box-shadow:0 12px 30px rgba(8,4,40,.45);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px)}
.voicetoast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  .chip,.pill,.star,.mic,.vdoor__act,.vdoor__meterbar{transition:none}
  .followup,.state .emoji,.mic.rec,.sect.voice-in,.voicebar .rdot,.vdoor__live .rdot,
  .vdoor--docked{animation:none}
  .mic.busy svg,.voicebar .sp2{animation:spin .8s linear infinite} /* keep the "working" spinner */
  .voicetoast{transition:opacity .01s}
}

/* ── STAFF ONBOARDING (2026-08-21 mobile+desktop visual pass) ─────────────────
   Six country packs screenshotted at 390px and 1200px against the deployed
   bundle. No horizontal overflow, no clipped label and no unreachable submit
   anywhere; what follows is the seven defects that pass DID find. Every rule is
   under `.f-staff_onboarding` — this stylesheet is shared by nine public forms
   and none of these deltas has been proven on the other eight. Several are
   toolkit-shaped rather than form-shaped (noted per block); they are scoped
   here rather than fixed upstream because upstream needs its own pass. */

/* 1 ── The repeat block's remove control was a 21×18 hit target (measured on
   BR `dependents` and PL `family_members` at 390px): a bare grey "×" with no
   affordance, smaller than a fingertip and easy to miss entirely. Give it a
   real 40px target with a visible chip, and open the item's top padding so it
   never sits on the first label's box. */
.f-staff_onboarding .rep__item{padding-top:44px}
.f-staff_onboarding .rep__drop{top:4px;right:6px;width:40px;height:40px;display:flex;
  align-items:center;justify-content:center;border-radius:999px;font-size:1.15rem;
  background:#efecf9;color:#5b5580}
.f-staff_onboarding .rep__drop:hover,.f-staff_onboarding .rep__drop:focus-visible{
  background:#ffe6f1;color:var(--magenta)}
.f-staff_onboarding .rep__add{padding:11px 18px}

/* 2 ── `label.lbl` is an ELEMENT selector, so the `<span class="lbl">` the
   toolkit emits for a radio/checkbox group and for a repeat block matched none
   of it: those labels rendered 16px/400 beside 13.1px/600 for every ordinary
   field. "Sexo", "Starter declaration", "Residência fiscal em Portugal" and
   "Dependentes" all read as body copy rather than as the question they are. */
.f-staff_onboarding span.lbl{font-weight:600;font-size:.82rem;color:#2c2850}

/* 3 ── The required marker in a checkbox/consent row is a separate flex item
   after a text span that FILLS the row once the sentence wraps — so on a phone
   the "*" for "Li como a The Inventors trata os meus dados" landed hard against
   the right edge, two lines away from the words it qualifies. Take the label
   out of flex and let the marker sit in the text's own inline flow.
   Taking it out of flex also lost the 2px the checkbox's own margin was adding
   to the row, so the padding here is deliberate: it buys a 31px tap row for a
   one-line question where the flex version gave 23px, and keeps the box beside
   the FIRST line when the question wraps to several. */
.f-staff_onboarding .check{display:block;position:relative;padding:6px 0 6px 28px;line-height:1.35}
.f-staff_onboarding .check input{position:absolute;left:0;top:6px;margin-top:0}

/* 4 ── Vertical rhythm. `.grid2 .f{margin-top:0}` is right for the fields
   INSIDE a two-column row but it also killed the gap ABOVE the row, so at 390px
   (where `.grid2` collapses to one column) "Nome completo" and "Data de
   nascimento" were flush at 0px while every other pair sat at 12px — most
   visible in the error state, where a red "Campo obrigatório." touches the next
   label. The same 0px hit PL's PIT-2 checkbox against "Oddział NFZ", because
   `.f.first` zeroes its own margin without knowing a checkbox came first.
   One rhythm for every direct child of a section instead. */
.f-staff_onboarding .sect > * + *{margin-top:12px}
.f-staff_onboarding .sect > .sect__h + *{margin-top:0}
.f-staff_onboarding .sect > * + * > .check:first-child{margin-top:0}

/* 5 ── At 1200px a `span:'half'` pair whose labels are different heights put
   its two inputs at different heights (PT "Dependentes" beside "Desses,
   dependentes com deficiência", which wraps — 16px apart). The grid already
   stretches each field to the row, so let the label absorb the slack and the
   controls line up. Inert at ≤560px, where the row is a single column.
   Bottom-aligning alone only moved the problem: a `date` control is 2px taller
   than a `text` one and a dial-code row 2px taller again, so equal bottoms
   meant unequal tops. One control height for the whole form settles both, and
   49px is the friendlier tap target of the two. */
.f-staff_onboarding input[type=text],.f-staff_onboarding input[type=email],
.f-staff_onboarding input[type=tel],.f-staff_onboarding input[type=number],
.f-staff_onboarding input[type=date],.f-staff_onboarding select.field-sel{min-height:49px}
.f-staff_onboarding .grid2 > .f > .lbl{margin-top:auto}

/* 6 ── `<h1 id="title">…</h1>` is only rewritten on the path that renders the
   form, so the invalid-link, thank-you and loading screens showed a literal
   ellipsis as the page headline — in Bungee, three black blocks under the
   logo. Each of those screens carries its own `<h2>`; the placeholder is noise.
   `#form` is hidden exactly when a state box is shown, which is the hook. */
.f-staff_onboarding .card:has(#form.hidden) #title{display:none}

/* 7 ── Bungee has no Cyrillic. On the BG pack every display string — the
   greeting, the ONBOARDING eyebrow, every section heading, the state headlines
   — fell through to the generic `cursive` keyword and rendered in whatever
   handwriting face the device happens to ship, which is not this brand. Give
   Bulgarian the weight and spacing in Montserrat, which does carry Cyrillic. */
.f-staff_onboarding:lang(bg) .head h1,
.f-staff_onboarding:lang(bg) .eyebrow,
.f-staff_onboarding:lang(bg) .sect__h,
.f-staff_onboarding:lang(bg) .state h2{
  font-family:Montserrat,system-ui,-apple-system,sans-serif;font-weight:800}
.f-staff_onboarding:lang(bg) .head h1,
.f-staff_onboarding:lang(bg) .state h2{letter-spacing:-.01em}

/* ── INTERVIEW MIC (forms/interview_mic — 2026-08-23) ──────────────────────────
   The public phone-capture page for the interview live-copilot. No fields, no
   submit — just the four states this toolkit requires (README rule 4) and one
   big, unmissable "recording" indicator so a recruiter glancing at the phone on
   the table never wonders whether it is actually capturing. */
.f-interview_mic .card{text-align:center}
.f-interview_mic #live{padding-top:36px}

/* The indicator: a solid red pulsing dot beside "A transcrever" — the one
   thing this whole page exists to communicate, so it is the largest, reddest
   thing on screen and never quiet (a slow pulse, not a blink, so it reads as
   "alive" rather than as an alert nagging to be dismissed). */
.f-interview_mic .mic-rec{display:inline-flex;align-items:center;gap:10px;
  padding:10px 20px;border-radius:999px;background:#fdeaef;margin-bottom:14px}
.f-interview_mic .mic-rec__dot{width:14px;height:14px;border-radius:50%;
  background:#e0173d;box-shadow:0 0 0 0 rgba(224,23,61,.55);
  animation:mic-pulse 1.8s ease-out infinite}
.f-interview_mic .mic-rec__badge{font-weight:800;letter-spacing:.02em;
  color:#e0173d;font-size:1rem;text-transform:uppercase}
@keyframes mic-pulse{
  0%{box-shadow:0 0 0 0 rgba(224,23,61,.55)}
  70%{box-shadow:0 0 0 14px rgba(224,23,61,0)}
  100%{box-shadow:0 0 0 0 rgba(224,23,61,0)}
}
.f-interview_mic .mic-hint{color:var(--muted);font-size:.9rem;margin:0 0 6px}
.f-interview_mic .mic-consent{color:var(--muted);font-size:.82rem;font-weight:600;margin:0 0 18px}
.f-interview_mic .mic-banner{background:#fff4e0;color:#8a5a00;border-radius:12px;
  padding:10px 14px;font-size:.85rem;font-weight:600;margin:0 0 16px}
.f-interview_mic .mic-endbtn{background:#3a3560;max-width:260px;margin-left:auto;margin-right:auto}
.f-interview_mic .mic-endbtn:hover{background:#2c2850}

@media (prefers-reduced-motion:reduce){
  .f-interview_mic .mic-rec__dot{animation:none}
}

/* outreach — VISIT SPACING (founder correction 2026-08-24, feedback 01a0348c-08df).
   The notice borrows .f-interview_mic .mic-banner's shape (amber card, quiet weight): a rule of
   the game, not an error. The under-15-minutes different-school refusal IS an error and speaks
   the toolkit's red; the under-an-hour travel advisory only warns and speaks the busy amber. */
.f-outreach .oa-notice{background:#fff4e0;color:#8a5a00;border-radius:12px;
  padding:10px 14px;font-size:.85rem;font-weight:600;margin:0 0 14px;text-align:left}
.f-outreach .oa-notice p{margin:0}
.f-outreach .oa-notice p+p{margin-top:6px}
.f-outreach .oa-gap-warn{color:#c0006c;font-weight:700}
.f-outreach .oa-travel-warn{color:#8a5a12;font-weight:600}

/* activity_report — SESSION PHOTOS (founder ruling 2026-09-10).
   The guidance is the loud part on purpose: the facilitator photographs the inventions, the hands
   and the tables and NEVER the children's faces, so `.ph-guide` reads as a rule of the game (the
   amber card shape `.f-interview_mic .mic-banner` established) and not as a muted hint nobody
   reads on a phone. The picker is a big tap target; the thumbnails are square crops so four
   portrait-and-landscape photos still line up. */
.f-activity_report .ph{margin-top:20px}
.f-activity_report .ph .opt-tag{font-weight:600;font-size:.72rem;color:var(--muted);text-transform:none;letter-spacing:0}
.f-activity_report .ph-guide{background:#fff4e0;color:#8a5a00;border-radius:12px;
  padding:10px 12px;font-size:.84rem;font-weight:700;margin:0 0 10px;line-height:1.35}
.f-activity_report .ph-input{position:absolute;opacity:0;width:0;height:0}
.f-activity_report .ph-add{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 16px;border:2px dashed #c9c5e2;border-radius:14px;background:var(--soft);
  color:var(--ink);font-weight:800;font-size:.9rem;cursor:pointer;transition:all .15s}
.f-activity_report .ph-add:active{transform:scale(.985)}
.f-activity_report .ph-add:hover{border-color:var(--cyan);background:#f4fbfe}
.f-activity_report .ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.f-activity_report .ph-grid:not(:empty){margin-bottom:10px}
.f-activity_report .ph-item{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--soft);border:2px solid var(--line)}
.f-activity_report .ph-item img{width:100%;height:100%;object-fit:cover;display:block}
.f-activity_report .ph-item.ph-stored{border-color:var(--green)}
.f-activity_report .ph-item.ph-failed{border-color:var(--magenta)}
.f-activity_report .ph-state{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;
  font-size:.66rem;font-weight:800;text-align:center;color:#fff;background:rgba(30,25,70,.72)}
.f-activity_report .ph-item.ph-stored .ph-state{background:rgba(20,120,60,.82)}
.f-activity_report .ph-item.ph-failed .ph-state{background:rgba(192,0,108,.86)}
.f-activity_report .ph-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border:0;
  border-radius:50%;background:rgba(30,25,70,.72);color:#fff;font-size:1.1rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0}
.f-activity_report .ph-x:active{transform:scale(.9)}
.f-activity_report .ph-retry{position:absolute;top:4px;left:4px;border:0;border-radius:999px;
  background:#fff;color:var(--magenta);font-size:.64rem;font-weight:800;padding:4px 8px;cursor:pointer}
/* A RULE, not a failure: "that is the maximum", "only photos here". Amber, like the guidance. */
.f-activity_report .ph-note{color:#8a5a00;font-weight:700}
/* The photos-only view: a report that is already submitted still takes photos while its window is
   open, so the field is rendered under the state card. The card centres its text; the field must
   not inherit that. */
.f-activity_report .ph-only{text-align:left;margin-top:26px}
.f-activity_report .state .ph{margin-top:0}

/* position — THE PREVIEW BANNER (decision 01a01b18-b171-727b-8589-33ddd373f5cb, 2026-08-20).
   `?preview=1` renders the candidate's own page with this one strip above it, so the strip has to
   be unmistakable and must not read as an error: it borrows the amber card shape
   `.f-interview_mic .mic-banner` established — a rule of the game, not a failure. It sits OUTSIDE
   `.body`, which owns the form's horizontal padding, so it carries its own.
   Scoped to this form because only this form has a preview today; the day a second one gains one,
   this block moves up into the core unscoped rather than being copied. */
.f-position .pvw{background:#fff4e0;color:#8a5a00;border-radius:12px;
  padding:10px 14px;font-size:.85rem;font-weight:600;text-align:left;
  margin:18px var(--body-px) 0}
.f-position .pvw strong{display:block;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:.72rem;margin-bottom:2px}

/* pre_kit — the PRE kit QR label's phone form (dossier PRE-009, board Telemovel.dc.html).
   EVERY RULE HERE IS UNDER `.f-pre_kit`. Four small differences from the core, each because the
   board asks for it and none of them a new component:
   · the movements are one full-width column of cards, not the two-up grid — each label is a
     sentence ("Enviei o kit de volta ao armazém"), and two of those side by side on a 390px
     phone wrap to three lines each;
   · the identity answer is two pills on one row, which is what `.opts` already does;
   · "Sou da equipa de armazém" is a link with no field behind it;
   · the thank-you lists the last movements, left-aligned inside a centred state box. */
.f-pre_kit #kind.opts{grid-template-columns:1fr}
.f-pre_kit #actorField .opts,.f-pre_kit #toField .opts{grid-template-columns:1fr}
.f-pre_kit .pk-link{display:inline-block;margin-top:10px;padding:0;border:0;background:none;
  color:var(--cyan);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:underline}
.f-pre_kit .pk-link:hover{color:var(--magenta)}
.f-pre_kit .pk-recent{margin-top:18px;padding-top:16px;border-top:2px solid var(--line);text-align:left}
.f-pre_kit .pk-row{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;padding:3px 0}

/* payment — controls remain hidden until every server-side Ifthenpay gate is enabled. */
.f-payment .langsel{position:static;display:block;min-height:44px;max-width:100%;margin:0 0 16px auto;
  padding:10px 30px 10px 16px;font-size:16px}
.f-payment .pay-methods h2{font-family:Bungee,cursive;font-size:1rem;font-weight:400;margin:24px 0 10px}.f-payment .pay-secondary{background:var(--indigo);box-shadow:0 6px 0 var(--indigo-2),0 10px 18px rgba(49,39,130,.25)}.f-payment .pay-secondary:hover{background:var(--indigo-3)}.f-payment .pay-status{margin-top:22px;padding:14px;border-radius:14px;background:#fff4e0;color:#8a5a00;font-weight:700}.f-payment .pay-status p{margin:0}.f-payment .pay-mb dl{margin:18px 0 0;border:2px solid var(--line);border-radius:14px;overflow:hidden}.f-payment .pay-mb dl div{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}.f-payment .pay-mb dl div:last-child{border-bottom:0}.f-payment .pay-mb dt{font-size:.78rem;color:var(--muted);font-weight:700}.f-payment .pay-mb dd{margin:0;font-weight:800;text-align:right}

/* reference — the referee reference form (replaces Fillout o63ibyot5Gus). Every rule under
   `.f-reference`. The candidate block is a quiet card above the intro; Yes/No stays two-up even on
   a phone (two short words); the 1–5 qualities and the 1–5 recommendation are the toolkit's radio
   rendered as one row of five numbered tiles. */
/* the phone audit's two toolkit-wide findings, fixed here the way payment fixed the first: the
   language picker is a full-size control in the header's flow (44px, 16px text, so iOS does not
   zoom), and the off-screen honeypot is also transparent and untouchable */
.f-reference .langsel{position:static;display:block;min-height:44px;max-width:100%;margin:0 0 16px auto;
  padding:10px 30px 10px 16px;font-size:16px}
.f-reference .hp{opacity:0;pointer-events:none}
.f-reference .ref-about{margin:0 0 18px;padding:12px 14px;border-radius:14px;background:var(--soft);
  border:2px solid var(--line);font-size:.88rem;font-weight:600;color:#2c2850}
.f-reference .ref-about p{margin:0}
.f-reference .ref-about p+p{margin-top:4px}
.f-reference #candidate{font-weight:800;color:var(--indigo)}
.f-reference .ref-closing{margin-top:22px;font-size:.88rem;color:var(--muted)}
.f-reference .opt{--accent:var(--magenta)}
.f-reference .opts{grid-template-columns:1fr 1fr}
.f-reference :is(#energyField,#proactivenessField,#responsibilityField,#maturityField,#reliabilityField,
  #self_motivationField,#punctualityField,#recommendationField) .opts{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.f-reference :is(#energyField,#proactivenessField,#responsibilityField,#maturityField,#reliabilityField,
  #self_motivationField,#punctualityField,#recommendationField) .opt{justify-content:center;padding:11px 0;
  font-weight:800;min-height:44px}
.f-reference :is(#energyField,#proactivenessField,#responsibilityField,#maturityField,#reliabilityField,
  #self_motivationField,#punctualityField,#recommendationField) .opt .ring{display:none}
.f-reference :is(#energyField,#proactivenessField,#responsibilityField,#maturityField,#reliabilityField,
  #self_motivationField,#punctualityField,#recommendationField) .opt:has(input:checked){background:var(--magenta);color:#fff}

/* school_meeting — the school meeting-request form (replaces Fillout 8uefatHw5fus). English only,
   so the one-option language picker is not shown (it failed the phone audit as a 29px, 12px-text
   control); the off-screen honeypot is also transparent and untouchable, as in `.f-reference`. */
.f-school_meeting .langsel{display:none}
.f-school_meeting .hp{opacity:0;pointer-events:none}

/* digitall_challenge — the DigitALL challenge registration (replaces Zite i6YTxhHU5mus). Portuguese
   only, so the one-option language picker is not shown, and the off-screen honeypot is transparent
   and untouchable — the same two phone-audit findings, fixed the way `.f-school_meeting` fixed them. */
.f-digitall_challenge .langsel{display:none}
.f-digitall_challenge .hp{opacity:0;pointer-events:none}

/* digitall_challenge_phase2 — the DigitALL Skill Up Challenge team submission (replaces Zite
   sg7aULj3rxus). Portuguese only (no language picker) and the transparent honeypot, as phase 1. The
   file slots (forms/digitall_challenge_phase2/slots.ts) hold up to five files each, with a bar per file:
   every control is ≥ 44 px, a long file name wraps instead of widening the card at 320 px. */
.f-digitall_challenge_phase2 .langsel{display:none}
.f-digitall_challenge_phase2 .hp{opacity:0;pointer-events:none}
.f-digitall_challenge_phase2 .up-slot .lbl{font-weight:600;font-size:.82rem;color:#2c2850;line-height:1.35}
.f-digitall_challenge_phase2 .up-note{margin:12px 0 0;line-height:1.4}
.f-digitall_challenge_phase2 .up-link{display:inline-flex;align-items:center;min-height:44px;max-width:100%;
  color:var(--indigo-3);font-weight:700;overflow-wrap:anywhere;word-break:break-word}
.f-digitall_challenge_phase2 .up-drop{min-height:48px;display:flex;align-items:center;justify-content:center;font-weight:700}
.f-digitall_challenge_phase2 .up-drop.is-locked{display:none}
.f-digitall_challenge_phase2 .up-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.f-digitall_challenge_phase2 .up-list:empty{display:none}
.f-digitall_challenge_phase2 .up-file{border:2px solid var(--line);border-radius:12px;padding:6px 6px 8px 12px;background:#fff;min-width:0}
.f-digitall_challenge_phase2 .up-row{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:8px;align-items:center}
.f-digitall_challenge_phase2 .up-name{font-size:.84rem;font-weight:600;overflow-wrap:anywhere;word-break:break-word;min-width:0}
.f-digitall_challenge_phase2 .up-size{font-size:.74rem;color:var(--muted);white-space:nowrap}
.f-digitall_challenge_phase2 .up-rm{width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--muted);
  font:inherit;font-size:1.3rem;line-height:1;cursor:pointer}
.f-digitall_challenge_phase2 .up-rm:hover,.f-digitall_challenge_phase2 .up-rm:focus-visible{color:var(--magenta);background:var(--soft)}
.f-digitall_challenge_phase2 .up-rm:disabled{visibility:hidden}
.f-digitall_challenge_phase2 .up-bar{height:6px;border-radius:99px;background:#eceafd;overflow:hidden;margin:4px 6px 0 0}
.f-digitall_challenge_phase2 .up-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .3s}
.f-digitall_challenge_phase2 .up-bar.is-failed i{background:var(--magenta)}
.f-digitall_challenge_phase2 .up-file .up-bar,.f-digitall_challenge_phase2 .up-state:empty{display:none}
.f-digitall_challenge_phase2 .up-file:has(.up-state:not(:empty)) .up-bar{display:block}
.f-digitall_challenge_phase2 .up-state{display:block;font-size:.74rem;color:var(--muted);margin-top:3px}
.f-digitall_challenge_phase2 .up-state[data-state=uploaded]{color:var(--green);font-weight:700}
.f-digitall_challenge_phase2 .up-state[data-state=failed]{color:#c0006c;font-weight:700}
.f-digitall_challenge_phase2 .up-final{margin-top:22px;font-size:.84rem;color:#2c2850;line-height:1.45}
.f-digitall_challenge_phase2 .up-final p{margin:0 0 6px}
.f-digitall_challenge_phase2 .up-total{margin-top:14px}
.f-digitall_challenge_phase2 .up-total .up-bar{height:10px;margin:0}
.f-digitall_challenge_phase2 .up-total p{margin:6px 0 0;font-size:.8rem;font-weight:600;color:#2c2850}
.f-digitall_challenge_phase2 #closedWhen{color:var(--ink);font-weight:700;margin-bottom:8px}

/* digitall_school_network — the classroom-PC check-in that records a school's public IP. Portuguese
   only (no language picker) and the transparent honeypot, the same two phone-audit findings fixed the
   way `.f-digitall_challenge` fixed them. */
.f-digitall_school_network .langsel{display:none}
.f-digitall_school_network .hp{opacity:0;pointer-events:none}

/* monitor_photo — a monitor's photo + consent for the «Página dos pais» (2026-10-09). Portuguese only
   (no language picker) and the transparent honeypot, as digitall_school_network; the photo already on
   file is shown at a phone-friendly size above «Usar esta fotografia / Enviar outra»; the consent note
   sits under the checkbox in smaller type, aligned with its text. */
.f-monitor_photo .langsel{display:none}
.f-monitor_photo .hp{opacity:0;pointer-events:none}
.f-monitor_photo .mp-photo{display:block;width:160px;max-width:60%;aspect-ratio:1/1;object-fit:cover;
  border-radius:16px;border:2px solid var(--line);margin:4px 0 12px;background:var(--soft)}
.f-monitor_photo .mp-note{margin:4px 0 0 28px;font-size:.78rem}

/* digitall_citizenship — the «Cidadania Digital» sign-up (2026-10-14, replaces Fillout kiXye3vt88us).
   Portuguese only (no language picker) and the transparent honeypot: the same two phone-audit
   findings fixed the way `.f-digitall_school_network` fixed them. */
.f-digitall_citizenship .langsel{display:none}
.f-digitall_citizenship .hp{opacity:0;pointer-events:none}

/* digitall_citizenship_booking — the «Cidadania DigitALL» workshop booking page (2026-10-19, Mariana
   Costa): one link per region, the AE picks its name, then a day. Portuguese only (no language picker)
   and the transparent honeypot, as `.f-digitall_citizenship`; the «já marcado» line under the AE select
   reads as a statement, not a hint. */
.f-digitall_citizenship_booking .langsel{display:none}
.f-digitall_citizenship_booking .hp{opacity:0;pointer-events:none}
.f-digitall_citizenship_booking .ae-note{color:var(--ink);font-weight:700;margin-top:8px}
/* the seven «turmas por ano» counts stay two to a row on a phone (each is a two-digit number); the
   generic `.grid2` collapses to one column under 560px, which made them a seven-screen ladder. */
.f-digitall_citizenship_booking #classesGroupField{grid-template-columns:repeat(2,minmax(0,1fr))}