/* ================================================================
   RECAI Labs — panel application form (/panel/)
   Loaded after /styles.css, which holds the design tokens.

   A long form. Everything here serves one of two ends: making the
   current question obvious, and making the remaining distance visible.
   ================================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.panel-apply { padding: 36px 0 110px; }
.panel-apply .container { max-width: 820px; }

/* ---- Masthead -------------------------------------------------------- */

.apply-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.apply-lede {
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 68ch;
}
.apply-lede strong { color: var(--ink); font-weight: 500; }

.apply-facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  border-left: 3px solid var(--gold);
  padding-left: 18px;
}
.apply-facts li { font-size: 15px; color: var(--paper-dim); line-height: 1.55; }
.apply-facts span {
  display: inline-block;
  min-width: 76px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.apply-save {
  margin-top: 22px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--surface);
  font-size: 14px;
  color: var(--slate);
}
.apply-save[hidden] { display: none; }

/* ---- Resume step -------------------------------------------------------
   The file is never uploaded from here — there is no endpoint. It is named
   now so the final panel can tell the applicant what to attach, and so we
   can tell whether what arrived is what they meant to send. */

/* Doubled class, not .fsection-first alone. This rule sits ABOVE the
   .fsection block that sets the border it is cancelling, so at equal
   specificity .fsection would win on source order and the first section
   would keep a rule above it with nothing on the other side. (0,2,0)
   settles it wherever either rule ends up. */
.fsection.fsection-first { margin-top: 40px; padding-top: 0; border-top: 0; }

.cv-drop { position: relative; margin-top: 20px; }

/* The input is clipped rather than display:none — hiding it that way takes
   it out of the tab order, and this is the one control on the page a
   keyboard user is most likely to reach for first. */
.cv-drop input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}

.cv-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 30px 24px;
  border: 1.5px dashed var(--hairline-dark);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  text-align: center;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.cv-label:hover,
.cv-drop.is-over .cv-label {
  border-color: var(--gold);
  background: rgba(224, 179, 71, 0.06);
}
.cv-drop input:focus-visible + .cv-label {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.cv-icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
}
.cv-lead { font-size: 16px; font-weight: 500; color: var(--ink); }
.cv-or { color: var(--slate); font-weight: 400; }
.cv-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

.cv-chosen {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  border-left: 3px solid #56D98A;
  border-radius: 3px;
  background: var(--surface);
  font-size: 15px;
  color: var(--ink);
}
.cv-chosen[hidden] { display: none; }
.cv-chosen .cv-size { color: var(--slate); font-size: 13.5px; }
.cv-chosen button {
  margin-left: 10px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--signal);
  cursor: pointer;
  text-decoration: underline;
}

.cv-error {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid #FF8B94;
  border-left: 3px solid #FF8B94;
  border-radius: 3px;
  background: rgba(255, 139, 148, 0.06);
  font-size: 15px;
  color: var(--ink);
}
.cv-error[hidden] { display: none; }

/* The "or drop it here" half is a lie on a touch device, which has nothing
   to drag from. */
@media (hover: none) {
  .cv-or { display: none; }
}

/* ---- Sections ---------------------------------------------------------- */

.fsection {
  margin-top: 64px;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 92px;
}
.fsection-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.fsection-h {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 27px);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.fsection-blurb {
  margin-top: 12px;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.6;
  max-width: 66ch;
}
.fsection-note {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber);
  border-radius: 3px;
  background: rgba(255, 176, 32, 0.045);
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 72ch;
}
.fsection-note strong { color: var(--ink); font-weight: 600; }

/* ---- Fields ------------------------------------------------------------- */

.fsection { display: grid; }
.field { margin-top: 26px; }
.field-wide { grid-column: 1 / -1; }

.field > label,
.field > legend,
.choice legend {
  display: block;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
}
abbr[title="required"] {
  color: var(--orange);
  text-decoration: none;
  font-size: 15px;
}

.field-hint {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 66ch;
}
.field-hint-firm { color: var(--paper-dim); }

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: #130D17;
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: #9C8A94; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
  border-color: var(--signal);
}

fieldset.field { border: 0; margin-inline: 0; padding: 0; }

/* ---- Option lists -------------------------------------------------------- */

.opts {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 18px;
}
.opts-stack { grid-template-columns: 1fr; }

.opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px 9px 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--paper-dim);
  cursor: pointer;
  border-radius: 3px;
}
.opt:hover { color: var(--ink); }
.opt input { margin: 2px 0 0; flex-shrink: 0; accent-color: var(--orange); width: 17px; height: 17px; }
.opt input:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.decls .opt { align-items: flex-start; }
.decls { margin-top: 30px; }

/* ---- The specialisation matrix --------------------------------------------
   A checkbox plus a 1-5 scale, eighteen times. On a narrow screen the
   scale drops below the name rather than compressing to five unhittable
   targets in a row. */

.spec-matrix { margin-top: 30px; }

.spec-head,
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.spec-head {
  margin-top: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.spec-head span:first-child { grid-column: 1; }
.spec-head span:not(:first-child) { display: none; }

.spec-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.spec-name {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--paper-dim);
  cursor: pointer;
}
.spec-name input { margin: 1px 0 0; flex-shrink: 0; accent-color: var(--orange); width: 17px; height: 17px; }
.spec-row:hover .spec-name { color: var(--ink); }

.spec-levels { display: flex; gap: 4px; }
.lv {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--slate);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.lv:hover { border-color: var(--gold); color: var(--gold); }
/* The input is the control; the box is the visible target. Hiding it with
   display:none would take it out of the tab order, so it is clipped. */
.lv input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.lv:has(input:checked) {
  background: var(--rose-fill);
  border-color: var(--rose-lift);
  color: #fff;
}
.lv:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

/* :has() is not everywhere. Without it the scale still works — the radio
   is simply drawn by the browser instead of the box. */
@supports not selector(:has(*)) {
  .lv input { position: static; width: auto; height: auto; opacity: 1; }
  .lv { width: auto; padding: 0 9px; gap: 5px; grid-auto-flow: column; }
}

/* ---- Availability grid ------------------------------------------------- */

.avail { margin-top: 30px; }
.avail-scroll { overflow-x: auto; margin-top: 14px; }
.avail-grid {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
}
.avail-grid th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--slate);
  padding: 8px 6px;
  text-align: center;
}
.avail-grid th[scope="row"] {
  text-align: left;
  white-space: nowrap;
  padding-right: 16px;
  color: var(--paper-dim);
}
.avail-grid th[scope="row"] span { color: var(--slate); font-size: 10px; }
.avail-grid td {
  padding: 3px;
  text-align: center;
  border-top: 1px solid var(--hairline);
}
.cell {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 2px;
  cursor: pointer;
}
.cell:hover { background: rgba(255, 255, 255, 0.045); }
.cell input { accent-color: var(--orange); width: 17px; height: 17px; }
.cell input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---- Submit ------------------------------------------------------------- */

.apply-submit {
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

/* .btn-outline now lives in styles.css — see the note beside .btn there. */

.form-error {
  flex: 1 1 100%;
  padding: 18px 20px;
  border: 1px solid #FF8B94;
  border-left: 3px solid #FF8B94;
  border-radius: 3px;
  background: rgba(255, 139, 148, 0.06);
  color: var(--ink);
  font-size: 15px;
}
.form-error[hidden] { display: none; }
.form-error ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.form-error a { color: #FF8B94; }

/* ---- The finished application ------------------------------------------- */

.apply-done { margin-top: 48px; }

/* ---- Confirmed ------------------------------------------------------
   The sent state gets a mark, a green edge and its own heading colour,
   so whether the application arrived is answered before a word is read.
   Failure keeps the plain panel. */
.apply-done.is-sent {
  padding: 30px 32px;
  border: 1px solid var(--hairline);
  border-left: 3px solid #56D98A;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(86, 217, 138, 0.06), rgba(86, 217, 138, 0.015)),
    var(--surface);
}
.apply-done.is-sent .fsection-h { color: #56D98A; }

.done-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 1.5px solid #56D98A;
  color: #56D98A;
  font-size: 21px;
  line-height: 1;
}
.done-mark[hidden] { display: none; }

/* The reason a submission failed, shown rather than swallowed. Monospace
   because it is a machine's words, not ours. */
.done-reason {
  margin-top: 14px;
  padding: 12px 15px;
  border: 1px solid var(--hairline);
  border-left: 3px solid #FF8B94;
  border-radius: 3px;
  background: rgba(255, 139, 148, 0.05);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--paper-dim);
  word-break: break-word;
}
.done-reason[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .apply-done.is-sent .done-mark {
    animation: done-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  }
}
@keyframes done-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.apply-done[hidden] { display: none; }
.apply-done:focus { outline: none; }
.apply-done > p { margin-top: 14px; color: var(--slate); font-size: 16.5px; line-height: 1.6; max-width: 66ch; }

.cv-remind {
  margin-top: 18px;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber);
  border-radius: 3px;
  background: rgba(255, 176, 32, 0.05);
  font-size: 15px;
  color: var(--paper-dim);
}
.cv-remind[hidden] { display: none; }
.cv-remind strong { color: var(--ink); font-weight: 600; }

.apply-done-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.apply-copied { margin-top: 12px; color: #56D98A; font-size: 14.5px; }
.apply-copied[hidden] { display: none; }

.apply-back { margin-top: 20px; }
.apply-back button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 15px; }

.apply-privacy {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 72ch;
}

/* ---- Narrow -------------------------------------------------------------- */

@media (max-width: 620px) {
  .spec-head, .spec-row { grid-template-columns: 1fr; gap: 8px; }
  .spec-levels { padding-left: 28px; }
  .opts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lv { transition: none; }
}