/* modal.css — overlays, job/auth/practice modals, AI badges & guide */


  /* MODAL */
  .overlay{
    position:fixed; inset:0; background:rgba(20,21,26,0.5); z-index:100;
    display:none; align-items:flex-end; justify-content:center;
  }
  .overlay.show{display:flex;}
  .modal{
    background:var(--card); width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
    border-radius:24px 24px 0 0; padding:36px; position:relative;
    animation:slideUp .25s ease;
  }
  @keyframes slideUp{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
  .modal-close{position:absolute; top:16px; right:16px; background:var(--bg); border:none; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.1rem;}

  /* AUTH / PROFILE */
  .auth-modal{max-width:420px;}
  .auth-label{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft);}
  .auth-error{color:var(--health); font-size:0.85rem; margin-top:8px;}
  .auth-hint{font-size:0.8rem; color:var(--ink-soft); margin-top:14px;}

  /* PRACTICE / AI FEEDBACK */
  .practice-modal{max-width:600px;}
  .practice-scenario{background:var(--bg); border-radius:14px; padding:20px; margin-bottom:18px; border:1.5px dashed var(--field-color, var(--c1));}
  .practice-tasklist{margin:0 0 14px 18px; padding:0; font-size:0.88rem; color:var(--ink-soft);}
  .practice-tool{font-size:0.88rem; margin-bottom:10px;}
  .practice-resource{
    background:var(--card); border:1.5px solid var(--field-color, var(--c1)); border-radius:12px;
    padding:16px 18px; margin-bottom:16px;
  }
  .practice-resource-label{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; margin-bottom:8px;}
  .practice-download-btn{
    display:inline-block; background:var(--field-color, var(--c1)); color:#fff; border:none;
    text-decoration:none; padding:10px 18px; border-radius:100px; font-size:0.88rem; font-weight:600;
  }
  .practice-download-btn:hover{opacity:0.9;}
  .practice-tasklist li{margin-bottom:4px;}
  .practice-textarea{
    width:100%; min-height:90px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
    background:var(--card); font-family:'Inter',sans-serif; font-size:0.9rem; box-sizing:border-box;
    resize:vertical; margin-bottom:12px;
  }
  .practice-textarea:focus{outline:none; border-color:var(--field-color, var(--c1));}
  .practice-submit-btn{background:var(--field-color, var(--c1)); color:#fff; border:none;}
  .practice-feedback{margin-top:14px; background:var(--card); border-radius:10px; padding:14px 16px;}
  .ai-badge{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase;
    letter-spacing:0.06em; color:#fff; background:var(--field-color, var(--c1)); padding:3px 9px; border-radius:100px; margin-bottom:8px;
  }
  .practice-feedback-text{font-size:0.9rem; line-height:1.55; margin:0;}
  .practice-note{font-size:0.88rem; color:var(--ink-soft); font-style:italic; margin:0;}
  .guide-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
  .guide-header .ai-badge{margin-bottom:0;}
  .guide-collapse-btn{
    background:none; border:none; color:var(--ink-soft); font-size:0.8rem; font-weight:600;
    cursor:pointer; padding:4px 6px; font-family:'Inter',sans-serif; white-space:nowrap;
  }
  .guide-collapse-btn:hover{color:var(--ink); text-decoration:underline;}
  .practice-btn{
    display:block; width:100%; margin-top:10px; padding:8px; border-radius:100px; border:1.5px dashed var(--line);
    background:none; font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:600; color:var(--ink); cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .practice-btn:hover{border-color:var(--ink); background:var(--card);}
  .modal .field-pill{display:inline-block; padding:5px 14px; border-radius:100px; color:#fff; font-size:0.8rem; font-weight:600; margin-bottom:14px;}
  .modal h3{font-size:1.6rem; margin-bottom:6px;}
  .modal .salary{font-family:'IBM Plex Mono',monospace; font-size:1.1rem; margin-bottom:18px; color:var(--ink-soft);}
  .modal .outlook{display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-family:'IBM Plex Mono',monospace; margin-bottom:12px; color:var(--science);}
  .env-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
  .env-badge{
    display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:100px;
    background:var(--bg); border:1px solid var(--line); font-size:0.8rem; font-weight:500; color:var(--ink-soft);
  }
  .modal-section-title{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); margin:22px 0 10px; font-family:'IBM Plex Mono',monospace;}
  .modal p.body-text{font-size:0.98rem;}
/* ---- DARK MODE (system preference) — appended to modal.css since it loads
   last in index.html, guaranteeing it wins over the duplicate light :root
   declaration inside styles.css ---- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141519;
    --ink:#F1F2ED;
    --ink-soft:#A2A4AE;
    --card:#1E1F26;
    --line:#33343D;
    --nav-bg:rgba(20,21,25,0.85);
    --quiz-opt-color:#7EC8E3;
  }
  ::selection{ background:rgba(255,255,255,0.15); }
}

/* ---- REDUCED MOTION (system preference) ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .hub-card:hover, .hub-card:focus-visible,
  .field-card:hover, .field-card:focus-visible,
  .program-card:hover,
  .mypath-card:hover,
  .btn-primary:hover{
    transform:none;
  }
}