/* FARPSEC app components, layered on the marketing style.css. Everything here
   uses the marketing design tokens (--bg-main, --text-primary, --border-color,
   --font-body, --font-mono) so the portal, apply, login and admin pages are the
   SAME site as the marketing pages, not a separate skin. */

.fp-app{ padding: 140px 0 40px; min-height: 60vh; }
.fp-app--flashed{ padding-top: 24px; }
.fp-app .container{ max-width: 1000px; }

/* headings + intro, matching the marketing page-header scale but lighter */
.fp-app h1{ font-family: var(--font-heading); font-size: clamp(2.2rem,3.4vw,3.4rem); font-weight:500; letter-spacing:-.03em; margin:0 0 14px; color:var(--text-primary); }
.fp-app h2{ font-size:1.4rem; font-weight:500; letter-spacing:-.02em; margin:0 0 14px; color:var(--text-primary); }
.eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:14px; }
.lede{ color:var(--text-secondary); font-size:1.05rem; line-height:1.7; max-width:62ch; margin:0 0 32px; }

/* panels + forms in the marketing idiom */
.panel{ background:var(--bg-main); border:1px solid var(--border-color); padding:28px 30px; margin-bottom:20px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:8px; }
.field .hint{ color:var(--text-secondary); font-size:.8rem; margin-top:7px; }
.fp-app input[type=text],.fp-app input[type=email],.fp-app input[type=password],.fp-app input[type=url],
.fp-app select,.fp-app textarea{
  width:100%; background:transparent; color:var(--text-primary); border:1px solid var(--border-color);
  padding:13px 15px; font-family:var(--font-body); font-size:.95rem; border-radius:0; }
.fp-app textarea{ min-height:130px; resize:vertical; font-family:var(--font-mono); font-size:.85rem; line-height:1.6; }
.fp-app input:focus,.fp-app textarea:focus,.fp-app select:focus{ outline:none; border-color:var(--text-primary); }
.fp-app input::placeholder,.fp-app textarea::placeholder{ color:var(--text-secondary); }

/* buttons: reuse the marketing .btn look */
.fp-app .btn,.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--text-primary); color:var(--bg-main);
  border:1px solid var(--text-primary); padding:13px 26px; font-family:var(--font-body); font-size:.9rem; font-weight:500;
  letter-spacing:.01em; cursor:pointer; text-decoration:none; transition:opacity .15s; }
.btn:hover{ opacity:.85; text-decoration:none; }
.btn--ghost{ background:transparent; color:var(--text-primary); border-color:var(--border-color); }
.btn--ghost:hover{ border-color:var(--text-primary); }
.btn--danger{ background:transparent; color:#f85149; border-color:#f85149; }
.btn--sm{ padding:8px 16px; font-size:.82rem; }

/* nav sign-out styled as a nav link */
.nav-signout{ background:none; border:0; color:var(--text-secondary); font-family:var(--font-body); font-size:.95rem; cursor:pointer; padding:0; }
.nav-signout:hover{ color:var(--text-primary); }

/* flashes */
.fp-flash{ padding:13px 18px; border:1px solid var(--border-color); margin-bottom:14px; font-size:.9rem; color:var(--text-primary); }
.fp-flash--success{ border-color:#3fb950; color:#3fb950; }
.fp-flash--error{ border-color:#f85149; color:#f85149; }
.fp-flash--info{ border-color:#d29922; color:#d29922; }

/* tags, tables, utilities */
.tag{ display:inline-block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--border-color); color:var(--text-secondary); }
.tag--ok{ color:#3fb950; border-color:#3fb950; } .tag--bad{ color:#f85149; border-color:#f85149; } .tag--warn{ color:#d29922; border-color:#d29922; }
table.fp{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.fp th{ text-align:left; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); padding:12px 14px; border-bottom:1px solid var(--border-color); }
table.fp td{ padding:14px; border-bottom:1px solid var(--border-color); color:var(--text-primary); }
.muted{ color:var(--text-secondary); } .mono{ font-family:var(--font-mono); }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .stack{ display:flex; flex-direction:column; gap:2px; }

/* applicant status stepper + timeline (from the application flow) */
.fp-track{ display:flex; flex-direction:column; }
.fp-track__step{ display:flex; gap:14px; align-items:flex-start; padding:0 0 20px; position:relative; }
.fp-track__step:last-child{ padding-bottom:0; }
.fp-track__step:not(:last-child)::before{ content:""; position:absolute; left:6px; top:16px; bottom:0; width:1px; background:var(--border-color); }
.fp-track__dot{ flex:none; width:13px; height:13px; border-radius:50%; border:1px solid var(--text-secondary); background:var(--bg-main); margin-top:3px; position:relative; z-index:1; }
.fp-track__label{ font-weight:500; font-size:.95rem; color:var(--text-primary); }
.fp-track__step--done .fp-track__dot{ background:var(--text-secondary); border-color:var(--text-secondary); }
.fp-track__step--now .fp-track__dot{ background:var(--text-primary); border-color:var(--text-primary); box-shadow:0 0 0 3px var(--bg-main),0 0 0 4px var(--text-primary); }
.fp-track__step--now .fp-track__label{ color:var(--text-primary); }
.fp-track__step--ok .fp-track__dot{ background:#3fb950; border-color:#3fb950; }
.fp-track__step--bad .fp-track__dot{ background:#f85149; border-color:#f85149; }
.fp-timeline{ list-style:none; margin:0; padding:0; }
.fp-timeline li{ padding:12px 0 12px 16px; border-left:1px solid var(--border-color); }

/* rendered markdown (research show + editor preview) */
.fp-md{ color:var(--text-primary); line-height:1.75; font-size:1rem; }
.fp-md h2,.fp-md h3{ font-weight:500; letter-spacing:-.01em; margin:1.6em 0 .5em; }
.fp-md p{ margin:0 0 1em; } .fp-md a{ color:var(--text-primary); text-decoration:underline; }
.fp-md code{ font-family:var(--font-mono); font-size:.85em; background:var(--border-color); padding:2px 5px; }
.fp-md pre{ background:#0b0b0b; border:1px solid var(--border-color); padding:16px; overflow-x:auto; }
:root.light .fp-md pre{ background:#eeeee8; }
.fp-md pre code{ background:none; padding:0; }
.fp-md blockquote{ border-left:2px solid var(--text-secondary); margin:1em 0; padding-left:16px; color:var(--text-secondary); }

@media(max-width:640px){ .fp-app{ padding-top:120px; } }