/* IA Career Hub — coral brand, phone-first at 375px, WCAG 2.2 AA.
   Palette: coral #F98072 · coral-dark #E0685A · coral-deep #B4483A (small text, 5.4:1)
   charcoal #2E2A28 · muted #6B605B · cream #FFF6F2 · page #FFFCFA */

@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/fraunces-600-latin.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/fraunces-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/inter-600-latin.woff2') format('woff2'); }

:root {
  --coral:#F98072; --coral-dark:#E0685A; --coral-deep:#B4483A;
  --ink:#2E2A28; --muted:#6B605B; --cream:#FFF6F2; --page:#FFFCFA;
  --line:#F0E4DE; --ok:#2E7D5B; --card:#FFFFFF;
  --shadow:0 1px 3px rgba(46,42,40,.07), 0 6px 20px rgba(46,42,40,.05);
  --r:16px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font:400 17px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink); background:var(--page);
  min-height:100vh; padding-bottom:84px; /* room for bottom nav */
}
h1,h2,h3 { font-family:Fraunces, Georgia, serif; font-weight:600; line-height:1.2; }
h1 { font-size:1.7rem; margin:0 0 .35em; }
h2 { font-size:1.25rem; margin:1.4em 0 .4em; }
p  { margin:.5em 0; }
a  { color:var(--coral-deep); }
.muted { color:var(--muted); font-size:.94rem; }
.small { font-size:.88rem; }

.skip { position:absolute; left:-999px; top:0; background:var(--ink); color:#fff;
  padding:10px 16px; z-index:99; border-radius:0 0 8px 0; }
.skip:focus { left:0; }

:focus-visible { outline:3px solid var(--coral-dark); outline-offset:2px; border-radius:4px; }

/* ---------- header ---------- */
.top { background:var(--page); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10; }
.top-in { max-width:560px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; }
.brand { display:flex; align-items:center; gap:9px; }
.brand-name { font-family:Fraunces, Georgia, serif; font-weight:700; font-size:1.1rem; }

.status-chip { display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--cream); border:1.5px solid var(--line); color:var(--ink);
  padding:9px 14px; border-radius:999px; font-size:.9rem; font-weight:600; min-height:44px; }
.status-chip .dot { width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; }
.status-chip.needs-you { background:#FDEBE7; border-color:var(--coral); }
.status-chip.needs-you .dot { background:var(--coral-dark); }

/* ---------- layout ---------- */
.wrap { max-width:560px; margin:0 auto; padding:20px 16px 32px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow); margin:0 0 14px; }
.center { text-align:center; }

.flash { max-width:560px; margin:12px auto 0; padding:12px 16px; border-radius:12px;
  background:#EAF5EF; color:#1E5B41; font-weight:600; }
.flash.err { background:#FDEBE7; color:var(--coral-deep); }

/* ---------- buttons & forms (44px minimum targets) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:12px 22px; border-radius:14px; border:0; width:100%;
  background:var(--coral); color:#fff; font:600 1.05rem Inter, sans-serif;
  cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--coral-dark); }
.btn.secondary { background:var(--cream); color:var(--coral-deep);
  border:1.5px solid var(--coral); }
.btn.secondary:hover { background:#FDEBE7; }
.btn.quiet { background:transparent; color:var(--muted); border:1.5px solid var(--line); }
.btn.danger { background:#fff; color:#A03024; border:1.5px solid #E5B4AC; }

label { display:block; font-weight:600; margin:14px 0 6px; }
input[type=tel], input[type=text], textarea, select {
  width:100%; min-height:50px; padding:12px 14px; font:400 1.1rem Inter, sans-serif;
  border:1.5px solid #DACFC9; border-radius:12px; background:#fff; color:var(--ink); }
input:focus, textarea:focus, select:focus { border-color:var(--coral-dark); outline:2px solid var(--coral-dark); outline-offset:0; }
textarea { min-height:130px; resize:vertical; }
.code-input { font-size:1.9rem; letter-spacing:.45em; text-align:center; font-variant-numeric:tabular-nums; }
.check { display:flex; gap:10px; align-items:flex-start; margin:14px 0; font-weight:400; }
.check input { width:24px; height:24px; margin-top:2px; accent-color:var(--coral-dark); flex:none; }

/* ---------- journey stepper ---------- */
.journey { list-style:none; }
.journey li { position:relative; padding:0 0 4px 44px; }
.journey li::before { content:''; position:absolute; left:14px; top:30px; bottom:-2px;
  width:3px; background:var(--line); border-radius:2px; }
.journey li:last-child::before { display:none; }
.j-dot { position:absolute; left:2px; top:2px; width:27px; height:27px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2.5px solid var(--line); color:var(--muted);
  font-size:.95rem; font-weight:700; }
.j-done .j-dot { background:var(--ok); border-color:var(--ok); color:#fff; }
.j-current .j-dot { background:var(--coral); border-color:var(--coral); color:#fff; }
.j-notsent .j-dot { background:var(--cream); border-color:var(--coral); color:var(--coral-deep); }
.j-label { font-weight:600; font-size:1.02rem; padding-top:3px; }
.j-current .j-label { color:var(--coral-deep); }
.j-line { color:var(--muted); font-size:.94rem; margin:1px 0 14px; }
.j-done .j-line { color:var(--ok); }

/* expandable detail (native, predictable, no JS needed) */
details.stage { border:1.5px solid var(--line); border-radius:14px; margin:0 0 10px; background:#fff; }
details.stage[open] { border-color:var(--coral); }
details.stage summary { list-style:none; cursor:pointer; padding:14px 16px; min-height:50px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; }
details.stage summary::-webkit-details-marker { display:none; }
details.stage summary::after { content:'▾'; color:var(--muted); transition:none; }
details.stage[open] summary::after { content:'▴'; }
.stage-body { padding:0 16px 14px; border-top:1px dashed var(--line); padding-top:12px; }
.signers { list-style:none; margin:8px 0; }
.signers li { display:flex; align-items:center; gap:10px; padding:7px 0; }
.sig-yes { color:var(--ok); font-weight:700; }
.sig-no  { color:var(--muted); }
.nothing-needed { background:#EAF5EF; color:#1E5B41; border-radius:10px;
  padding:10px 12px; font-weight:600; margin-top:10px; }
.your-turn { background:#FDEBE7; color:var(--coral-deep); border-radius:10px;
  padding:10px 12px; font-weight:600; margin-top:10px; }

/* ---------- home ---------- */
.hero { display:flex; gap:16px; align-items:center; }
.hero-text h1 { margin-bottom:2px; }
.points-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.points-big { font-family:Fraunces, Georgia, serif; font-size:2rem; font-weight:700; color:var(--coral-deep); }
.badge-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.badge-chip { display:inline-flex; align-items:center; gap:6px; background:var(--cream);
  border:1.5px solid var(--line); border-radius:999px; padding:7px 12px; font-size:.88rem; font-weight:600; }
.actions { display:grid; gap:10px; margin:6px 0; }

/* ---------- mailbox ---------- */
.mail { list-style:none; }
.mail li { border-bottom:1px solid var(--line); padding:14px 2px; }
.mail li:last-child { border-bottom:0; }
.mail .m-title { font-weight:600; display:flex; align-items:center; gap:8px; }
.mail .unread-dot { width:9px; height:9px; border-radius:50%; background:var(--coral); flex:none; }
.mail time { color:var(--muted); font-size:.85rem; }

/* ---------- avatar creator ---------- */
.avatar-frame { display:flex; justify-content:center; margin:6px 0 14px; }
.swatches { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.swatches button, .shape-grid button { min-width:48px; min-height:48px; border-radius:14px;
  border:2.5px solid var(--line); background:#fff; cursor:pointer; font:600 .92rem Inter,sans-serif;
  color:var(--ink); padding:6px 10px; }
.swatches button[aria-pressed=true], .shape-grid button[aria-pressed=true] {
  border-color:var(--coral-dark); box-shadow:0 0 0 2px #FDEBE7; }
.swatch { display:inline-block; width:30px; height:30px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.shape-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0; }
.slot-steps { display:flex; gap:6px; justify-content:center; margin:8px 0 2px; }
.slot-steps span { width:9px; height:9px; border-radius:50%; background:var(--line); }
.slot-steps .on { background:var(--coral); }

/* ---------- bottom nav ---------- */
.bottom { position:fixed; left:0; right:0; bottom:0; z-index:10;
  background:#fff; border-top:1px solid var(--line);
  display:flex; justify-content:space-around;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
.bottom a { display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:64px; min-height:52px; justify-content:center;
  text-decoration:none; color:var(--muted); font-size:.75rem; font-weight:600; border-radius:12px; }
.bottom a[aria-current=page] { color:var(--coral-deep); background:var(--cream); }
.nav-ico { font-size:1.35rem; line-height:1; position:relative; }
.pill { position:absolute; top:-6px; right:-12px; background:var(--coral-dark); color:#fff;
  border-radius:999px; font-size:.68rem; padding:1px 6px; font-weight:700; }

/* ---------- misc ---------- */
.divider { border:0; border-top:1px solid var(--line); margin:18px 0; }
.back-town { display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:600; text-decoration:none; margin:-8px 0 6px; }
.back-town:hover { text-decoration:underline; }
.iframe-wrap { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.iframe-wrap iframe { display:block; width:100%; height:70vh; min-height:480px; border:0; }
.big-emoji { font-size:2.6rem; line-height:1; }
.ref-num { font-family:Fraunces, Georgia, serif; font-size:1.5rem; font-weight:700; color:var(--coral-deep); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .status-chip, .bottom a { transition:background .15s ease, border-color .15s ease; }
}
@media (min-width:640px) {
  body { font-size:17px; }
  .wrap { padding-top:28px; }
}