/* ============================================================
   APPLY FLOW — multi-step onboarding modal
   Used on lab subpages and the main hub page.
   Drop-in: relies on tokens defined in shared.css / main page
   (--ink, --white, --paper, --line, --line-2, --mute, --tum-blue,
    --accent-lime, --t, --font, --hairline). The lab-accent stripe
   uses --lab-accent if set on :root, else falls back to --tum-blue.
   ============================================================ */

.apf-root *{
  box-sizing:border-box;
  font-family: var(--font, 'Work Sans', system-ui, sans-serif);
}

/* Backdrop */
.apf-backdrop{
  position:fixed; inset:0;
  background:rgba(10,22,40,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:200;
  opacity:0;
  pointer-events:none;
  /* Animation handled in JS via Web Animations API */
}
.apf-root.is-open .apf-backdrop{ pointer-events:auto; }

/* Panel — slides in from the right (animated via JS) */
.apf-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:min(560px, 100%);
  background:var(--white, #fff);
  z-index:201;
  transform:translateX(100%);
  display:flex; flex-direction:column;
  box-shadow:-30px 0 80px -20px rgba(0,0,0,.4);
  overflow:hidden;
  visibility:hidden;
}
.apf-root.is-open .apf-panel{ visibility:visible; }

/* Lab-accent stripe */
.apf-panel::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:6px;
  background:var(--lab-accent, var(--tum-blue, #0065BD));
  z-index:2;
}

/* Header */
.apf-head{
  position:relative;
  padding:28px 32px 0 38px;
  flex-shrink:0;
}
.apf-head__row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:20px;
}
.apf-kicker{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute, #6B7A8C); margin-bottom:6px;
}
.apf-title{
  font-size:22px; font-weight:800; letter-spacing:-.015em;
  color:var(--ink, #0A1628); margin:0; line-height:1.15;
}
.apf-close{
  width:36px; height:36px; flex-shrink:0;
  border:1.5px solid var(--line, #D7DEE6);
  background:var(--white, #fff); color:var(--ink, #0A1628);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all var(--t, 150ms ease);
}
.apf-close:hover{
  background:var(--ink, #0A1628); color:var(--white, #fff);
  border-color:var(--ink, #0A1628);
}
.apf-close svg{ width:14px; height:14px; }

/* Stepper */
.apf-stepper{
  display:flex; gap:6px; margin-bottom:24px;
}
.apf-stepper__seg{
  flex:1; height:3px;
  background:var(--line-2, #EAEEF3);
  position:relative;
  transition:background 220ms ease;
}
.apf-stepper__seg.is-done{ background:var(--ink, #0A1628); }
.apf-stepper__seg.is-active{
  background:var(--lab-accent, var(--tum-blue, #0065BD));
}

.apf-stepmeta{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute, #6B7A8C);
  margin-bottom:18px;
}
.apf-stepmeta strong{ color:var(--ink, #0A1628); }

/* Body — scrolls if needed */
.apf-body{
  flex:1; overflow-y:auto;
  padding:8px 32px 24px 38px;
}

.apf-step{
  display:none;
  animation: apfFade 280ms ease both;
}
.apf-step.is-active{ display:block; }

@keyframes apfFade{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

.apf-q{
  font-size:24px; font-weight:700; letter-spacing:-.012em;
  color:var(--ink, #0A1628); margin:0 0 8px;
  line-height:1.2;
}
.apf-sub{
  font-size:14px; line-height:1.5; color:var(--mute, #6B7A8C);
  margin:0 0 24px;
}

/* Option cards (radio-like, full-width rows) */
.apf-options{ display:flex; flex-direction:column; gap:10px; }
.apf-opt{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border:1.5px solid var(--line, #D7DEE6);
  background:var(--white, #fff);
  cursor:pointer;
  transition:all var(--t, 150ms ease);
  text-align:left; width:100%;
  font-family:inherit;
}
.apf-opt:hover{
  border-color:var(--ink, #0A1628);
}
.apf-opt[aria-pressed="true"]{
  border-color:var(--ink, #0A1628);
  background:var(--ink, #0A1628);
  color:var(--white, #fff);
}
.apf-opt__radio{
  width:18px; height:18px; flex-shrink:0;
  border:1.5px solid var(--line, #D7DEE6);
  border-radius:50%;
  position:relative;
  transition:all var(--t, 150ms ease);
}
.apf-opt:hover .apf-opt__radio{ border-color:var(--ink, #0A1628); }
.apf-opt[aria-pressed="true"] .apf-opt__radio{
  border-color:var(--accent-lime, #CFFF00);
  background:var(--accent-lime, #CFFF00);
}
.apf-opt[aria-pressed="true"] .apf-opt__radio::after{
  content:""; position:absolute; inset:4px;
  background:var(--ink, #0A1628);
  border-radius:50%;
}
.apf-opt__main{ flex:1; min-width:0; }
.apf-opt__t{
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  color:inherit; line-height:1.25;
  margin-bottom:3px;
}
.apf-opt__d{
  font-size:13px; line-height:1.4;
  color:var(--mute, #6B7A8C);
}
.apf-opt[aria-pressed="true"] .apf-opt__d{
  color:rgba(255,255,255,.7);
}

/* Lab grid (compact 2-col) */
.apf-labgrid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.apf-lab{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border:1.5px solid var(--line, #D7DEE6);
  background:var(--white, #fff);
  cursor:pointer; text-align:left;
  font-family:inherit;
  transition:all var(--t, 150ms ease);
}
.apf-lab:hover{ border-color:var(--ink, #0A1628); }
.apf-lab[aria-pressed="true"]{
  background:var(--ink, #0A1628);
  color:var(--white, #fff);
  border-color:var(--ink, #0A1628);
}
.apf-lab__dot{
  width:10px; height:10px; flex-shrink:0;
  background:var(--apf-lab-color, var(--tum-blue, #0065BD));
}
.apf-lab__t{
  font-size:13px; font-weight:600; letter-spacing:-.005em;
  line-height:1.2;
}

/* Form fields */
.apf-fields{ display:flex; flex-direction:column; gap:18px; }
.apf-field label{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute, #6B7A8C);
  margin-bottom:8px;
}
.apf-field label .apf-req{ color:var(--lab-accent, var(--tum-blue, #0065BD)); }
.apf-field input,
.apf-field textarea{
  width:100%;
  padding:14px 16px;
  border:1.5px solid var(--line, #D7DEE6);
  background:var(--white, #fff);
  color:var(--ink, #0A1628);
  font-size:15px; font-weight:500;
  font-family:inherit;
  transition:border-color var(--t, 150ms ease);
}
.apf-field textarea{
  min-height:92px; resize:vertical; line-height:1.45;
}
.apf-field input:focus,
.apf-field textarea:focus{
  outline:none; border-color:var(--ink, #0A1628);
}
.apf-field input::placeholder,
.apf-field textarea::placeholder{
  color:#A6B0BD;
}
.apf-field.is-error input,
.apf-field.is-error textarea{
  border-color:#D24545;
}
.apf-field__err{
  font-size:12px; color:#D24545; margin-top:6px;
  display:none;
}
.apf-field.is-error .apf-field__err{ display:block; }

/* Review block */
.apf-review{
  background:var(--paper, #F7F8FA);
  border:1px solid var(--line-2, #EAEEF3);
  padding:20px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.apf-review__row{
  display:grid; grid-template-columns:120px 1fr;
  gap:16px; align-items:baseline;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-2, #EAEEF3);
}
.apf-review__row:last-child{ border-bottom:0; padding-bottom:0; }
.apf-review__k{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute, #6B7A8C);
}
.apf-review__v{
  font-size:14px; font-weight:600; color:var(--ink, #0A1628);
  line-height:1.4; word-break:break-word;
}
.apf-review__v em{
  font-style:normal; font-weight:500; color:var(--mute, #6B7A8C);
}

/* Footer (nav buttons) */
.apf-foot{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:18px 32px 24px 38px;
  border-top:1px solid var(--line-2, #EAEEF3);
  background:var(--white, #fff);
}
.apf-back{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px;
  background:transparent; border:0;
  color:var(--mute, #6B7A8C);
  font-size:13px; font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:color var(--t, 150ms ease);
}
.apf-back:hover{ color:var(--ink, #0A1628); }
.apf-back[disabled]{ opacity:0; pointer-events:none; }
.apf-back svg{ width:14px; height:14px; }

.apf-next{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  background:var(--ink, #0A1628);
  color:var(--white, #fff);
  border:0; cursor:pointer;
  font-family:inherit;
  font-size:14px; font-weight:600;
  transition:background var(--t, 150ms ease);
}
.apf-next:hover{
  background:var(--lab-accent, var(--tum-blue, #0065BD));
  color:var(--white, #fff);
}
.apf-next[disabled]{
  opacity:.4; pointer-events:none;
}
.apf-next svg{ width:14px; height:14px; transition:transform var(--t, 150ms ease); }
.apf-next:hover svg{ transform:translateX(3px); }

/* Submit (final step) */
.apf-next--submit{
  background:var(--accent-lime, #CFFF00);
  color:var(--ink, #0A1628);
}
.apf-next--submit:hover{
  background:var(--ink, #0A1628);
  color:var(--accent-lime, #CFFF00);
}

/* Success state */
.apf-success{
  flex:1;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:48px 32px 48px 38px;
  text-align:left;
}
.apf-success__check{
  width:64px; height:64px;
  background:var(--accent-lime, #CFFF00);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
  color:var(--ink, #0A1628);
}
.apf-success__check svg{ width:30px; height:30px; }
.apf-success__title{
  font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1.05;
  margin:0 0 12px; color:var(--ink, #0A1628);
}
.apf-success__sub{
  font-size:15px; line-height:1.55; color:var(--mute, #6B7A8C);
  margin:0 0 28px; max-width:380px;
}
.apf-success__steps{
  list-style:none; padding:0; margin:0 0 32px;
  display:flex; flex-direction:column; gap:14px;
}
.apf-success__steps li{
  display:flex; align-items:flex-start; gap:14px;
  font-size:14px; line-height:1.4;
  color:var(--ink, #0A1628);
}
.apf-success__steps li strong{ font-weight:700; }
.apf-success__steps li span{
  display:block; font-size:13px; color:var(--mute, #6B7A8C);
  margin-top:2px;
}
.apf-success__steps li::before{
  content:counter(apfStep);
  counter-increment:apfStep;
  width:24px; height:24px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink, #0A1628); color:var(--white, #fff);
  font-size:12px; font-weight:700;
}
.apf-success__steps{ counter-reset:apfStep; }
.apf-success__close{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  background:var(--ink, #0A1628); color:var(--white, #fff);
  border:0; cursor:pointer;
  font-family:inherit;
  font-size:14px; font-weight:600;
  transition:background var(--t, 150ms ease);
}
.apf-success__close:hover{
  background:var(--lab-accent, var(--tum-blue, #0065BD));
}

/* Mobile */
@media (max-width:560px){
  .apf-panel{ width:100%; }
  .apf-head{ padding:20px 20px 0 24px; }
  .apf-body{ padding:8px 20px 20px 24px; }
  .apf-foot{ padding:14px 20px 18px 24px; }
  .apf-success{ padding:32px 20px 32px 24px; }
  .apf-title{ font-size:18px; }
  .apf-q{ font-size:20px; }
  .apf-labgrid{ grid-template-columns:1fr; }
  .apf-review__row{ grid-template-columns:1fr; gap:4px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .apf-step{ animation:none; }
}