/* contribute.css: styles for contribute.html (moved out of an inline <style>
   block because the voxpair.org CSP only allows same-origin stylesheets). */
  /* ---------- hero: big Fips + conversational bubble ---------- */
  .contrib-hero{
    position:relative; overflow:hidden; padding:40px 24px 34px;
    background:linear-gradient(180deg, rgba(139,92,246,.18), transparent 70%);
    border-bottom:1px solid var(--border);
  }
  .contrib-hero::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--vio); }
  .contrib-hero-inner{ max-width:980px; margin:0 auto; display:flex; align-items:center; gap:36px; }
  .fips-stage{ position:relative; flex-shrink:0; width:220px; }
  .fips-stage video{ width:100%; display:block; filter:drop-shadow(0 18px 34px rgba(0,0,0,.45)); }
  .fips-bubble{
    position:relative; margin-top:14px; padding:12px 16px; border-radius:16px; font-weight:600; font-size:14.5px;
    background-image:var(--glass-sheen); background-color:var(--card2);
    border:1px solid var(--glass-border); box-shadow:var(--glass-highlight);
    min-height:1em; transition:opacity .18s ease;
  }
  .fips-bubble::before{
    content:""; position:absolute; top:-8px; left:36px; width:16px; height:16px;
    background:var(--card2); border-left:1px solid var(--glass-border); border-top:1px solid var(--glass-border);
    transform:rotate(45deg);
  }
  .fips-bubble.swap{ opacity:0; }
  .contrib-hero-text{ flex:1; min-width:0; }
  .contrib-hero-text .kicker{ display:inline-flex; align-items:center; gap:8px; color:var(--vio); }
  .contrib-hero-text h1{ font-size:clamp(26px,4vw,36px); margin:8px 0 10px; }
  .contrib-hero-text p{ color:var(--muted); font-size:15px; line-height:1.6; max-width:52ch; }
  @media (max-width:760px){
    .contrib-hero-inner{ flex-direction:column; text-align:center; gap:16px; }
    .fips-stage{ width:160px; margin:0 auto; }
    .contrib-hero-text p{ max-width:none; }
  }

  .contrib-wrap{ max-width:620px; margin:0 auto; padding:34px 20px 70px; }
  .contrib-card{ padding:28px; }
  @media (max-width:480px){ .contrib-card{ padding:22px 16px; } }

  /* ---------- visual village picker (reuses .lang/.lang-row from org.css) ---------- */
  .field-label{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:13px; color:var(--glow); margin-bottom:10px; letter-spacing:.01em; }
  .field-ico{ font-size:18px; width:30px; height:30px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(122,215,240,.1); }
  .village-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:22px; }
  .village-row .lang{ padding:10px 6px; align-items:center; text-align:center; cursor:pointer; gap:4px; }
  .village-row .lang-flag{ font-size:24px; }
  .village-row .lang small{ font-size:10.5px; }
  @media (max-width:520px){ .village-row{ grid-template-columns:repeat(3,1fr); } }

  .field{ margin-bottom:18px; }
  .field:last-of-type{ margin-bottom:0; }
  .hint-sm{ display:inline; font-weight:500; font-size:11.5px; color:var(--dim); }
  input,select,textarea{
    width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
    background:rgba(14,26,43,.55); color:var(--text); font:inherit; font-size:15px; outline:none;
    transition:border-color .15s,box-shadow .15s,background .15s;
  }
  input:hover,select:hover,textarea:hover{ background:rgba(14,26,43,.7); }
  input:focus,select:focus,textarea:focus{ border-color:var(--glow); box-shadow:0 0 0 3px rgba(122,215,240,.18); background:rgba(14,26,43,.8); }
  input:disabled,select:disabled,textarea:disabled{ opacity:.45; cursor:not-allowed; }
  textarea{ resize:vertical; min-height:70px; font-family:var(--body); }
  select{ appearance:none; -webkit-appearance:none;
    background-image:var(--glass-sheen), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%237ad7f0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; }
  .row2{ display:flex; gap:12px; }
  .row2 > *{ flex:1; min-width:0; }
  @media (max-width:440px){ .row2{ flex-direction:column; gap:18px; } }

  /* ---------- CEFR level chips (reuses .chip/.chip.on) ---------- */
  .level-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .level-row .chip{ cursor:pointer; font-size:13.5px; padding:7px 14px; transition:transform .12s,background .12s; }
  .level-row .chip:hover{ transform:translateY(-2px); }

  .submit-btn{ margin-top:24px; width:100%; font-size:16px; }
  .submit-btn:disabled{ transform:none; }

  #msg{ margin-top:16px; border-radius:14px; overflow:hidden; max-height:0; opacity:0;
    transition:max-height .3s ease,opacity .2s ease,margin-top .3s ease; }
  #msg.show{ max-height:160px; opacity:1; }
  #msg.ok{ background:rgba(88,204,2,.14); border:1px solid rgba(88,204,2,.45); }
  #msg.err{ background:rgba(255,93,93,.12); border:1px solid rgba(255,93,93,.4); }
  #msg .msg-inner{ padding:14px 16px; display:flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px; }
  #msg.ok .msg-inner{ color:#c8f29b; }
  #msg.err .msg-inner{ color:#ffd0d0; }
  #msg .msg-ico{ font-size:22px; flex-shrink:0; }

/* ---------- contributor terms consent ---------- */
.terms-row{ display:flex; gap:10px; align-items:flex-start; margin:8px 0 4px; font-size:14px; line-height:1.45; color:var(--muted); cursor:pointer; }
.terms-row input{ width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:#ff6a13; }
.terms-row a, .legal-note a{ color:var(--glow); text-decoration:underline; }
.legal-note{ font-size:12.5px; color:var(--dim); margin-top:12px; }