/* JobBridge — Mobile / responsive layer. Loads AFTER style.css + theme, so it wins on small screens.
   Breakpoints: 860px (tablet/nav), 600px (phone), 420px (small phone). */

html{-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%;height:auto}

/* ---------- Hamburger nav toggle (hidden on desktop) ---------- */
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex:none}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink-900);transition:.2s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .topnav{padding:0 14px;height:60px}
  .nav-toggle{display:flex}
  .topnav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px 12px 14px;background:var(--paper);border:0;border-bottom:1px solid var(--line);border-radius:0 0 20px 20px;box-shadow:0 24px 40px -24px rgba(20,24,58,.45);max-height:calc(100vh - 60px);overflow-y:auto}
  body.nav-open .topnav nav{display:flex}
  .topnav nav a,.topnav nav span{display:block;padding:12px 14px;border-radius:12px;font-size:15px;font-weight:600;background:transparent}
  .topnav nav a.nav-cta{text-align:center;margin-top:6px}
  .topnav nav a.nav-user{border-top:1px solid var(--line);border-radius:0;margin-top:6px;padding-top:14px}
  main{min-height:calc(100vh - 120px)}
  .wrap{padding:0 16px}
  .section{padding:28px 0}
  h1{font-size:30px}
  .grid{gap:14px}
  .card{padding:18px}
  .panel{padding:18px}
  .tile{padding:18px}
  .dark{padding:20px}
  .statcard{padding:16px 18px}
  .statcard .num{font-size:30px}
  .stack{gap:16px}
  .twocol{gap:14px}
  /* admin / staff 2-col grids → 1 col */
  #colGrid,#staffGrid{grid-template-columns:1fr!important}
  .theme-pick{grid-template-columns:1fr}
}

@media(max-width:600px){
  h1{font-size:26px}
  h2{font-size:22px}
  .field input,.field select,.field textarea,.chatbar input,.iv-answer textarea,.cpick-in{font-size:16px} /* iOS focus-zoom avoid */
  .field{margin-bottom:14px}
  .btn{padding:12px 18px;font-size:14px}
  .btn-cta,.btn-glass{padding:13px 18px;font-size:14px;width:100%;text-align:center}
  .btn-acc,.btn-line{padding:12px 16px;font-size:13.5px}
  .cta-row{width:100%}
  .cta-row>*{flex:1 1 auto}
  .alert{font-size:13.5px}
  .tbl{font-size:13px}
  .tbl th,.tbl td{padding:10px 12px;white-space:nowrap}

  /* ---- Login / index: form first, art compact ---- */
  .auth{padding:12px;gap:12px;min-height:auto}
  .auth-form{order:-1;padding:22px 18px}
  .auth-art{padding:22px 20px;min-height:auto}
  .auth-art h1{font-size:26px}
  .auth-art p{font-size:14px}
  .auth-art .facts{padding-top:18px;gap:8px}
  .auth-art .facts div{padding:10px 8px}
  .auth-art .facts b{font-size:20px}
  .auth-art .facts span{font-size:10px;line-height:1.3;display:block}

  /* ---- Register split ---- */
  .split-left{padding:20px 16px}
  .split-right{padding:20px 16px}
  .steps-v{flex-wrap:wrap;gap:10px 14px;font-size:13px}
  .split-left h1{font-size:26px}

  /* ---- Hero (dashboard/result) ---- */
  .jb-hero{padding:20px 18px;border-radius:20px}
  .jb-hero h1{font-size:28px;margin:12px 0 10px}
  .jb-hero p{font-size:14.5px}
  .jb-hero-grid{gap:18px}
  .orbit{min-height:230px}
  .orbit .ring1{width:180px;height:180px}
  .orbit .ring2{width:200px;height:200px}
  .orbit .face{width:160px;height:160px;font-size:62px}
  .orbit .face small{bottom:16px;font-size:10px}
  .orbit .tag{padding:9px 11px;min-width:80px}
  .orbit .tag .v{font-size:22px}
  .orbit .t1{left:4px;bottom:8px} .orbit .t2{right:4px;top:0}

  /* ---- Stages / tiles ---- */
  .stages{grid-template-columns:1fr 1fr;gap:10px}
  .stage{padding:14px}
  .stage .t{font-size:14.5px} .stage .d{font-size:12px}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:16px}
  .tile .big{font-size:30px}
  .tile.row{flex-direction:column;align-items:flex-start;gap:10px}
  .ring{width:64px;height:64px} .ring>*{font-size:18px}
  .ring.lg{width:120px;height:120px} .ring.lg>*{font-size:34px}

  /* ---- Discovery chat ---- */
  .chat-wrap{padding:16px 12px 150px}
  .msg{max-width:92%;padding:12px 14px;font-size:15px}
  .chatbar{padding:10px 12px}
  .chatbar .inner{gap:6px}
  .chatbar input{min-width:0;flex:1 1 0;padding:12px 14px}
  .chatbar .btn{padding:12px 14px;flex:none;font-size:14px}
  .chatbar #micBtn{padding:12px 12px}

  /* ---- Interview room ---- */
  .iv-top{height:auto;min-height:52px;flex-wrap:wrap;gap:6px 10px;padding:8px 12px;font-size:12.5px}
  .iv-top>span:first-child{flex:1 1 100%;font-weight:600}
  .iv-top #timer{font-size:14px}
  .iv-top>span:last-child{margin-left:auto;display:flex;align-items:center;gap:8px}
  .iv-top #voiceToggle{font-size:12px!important;padding:5px 10px!important}
  .iv-main{padding:14px 12px;gap:14px}
  .iv-panel{border-radius:16px}
  .iv-hr-face{width:80px;height:80px;font-size:32px}
  .iv-nameplate{font-size:11.5px;padding:4px 10px}
  .iv-q{font-size:18px;min-height:56px}
  .micbtn{width:60px;height:60px;font-size:22px}
  .iv-answer textarea{min-height:110px}
  .rounds-strip{gap:10px;padding:10px 0 18px;flex-wrap:wrap;justify-content:center}
  .rdot i{width:28px;height:28px;font-size:12px}
  #joinOverlay .serif{font-size:22px!important}
  #joinOverlay .iv-hr-face{width:72px!important;height:72px!important;font-size:28px!important}

  /* ---- Round cards (interview overview) ---- */
  .rcards{grid-template-columns:1fr}
  .rcard{padding:16px}
  .trend{height:110px}

  /* ---- Leaderboard ---- */
  .podium{gap:8px}
  .pod .nm{font-size:13px} .pod .mt{font-size:11px}
  .board{padding:8px}
  .brow{gap:10px;padding:12px 10px}
  .brow .rk{width:26px;font-size:16px}
  .brow .av{width:34px;height:34px}
  .brow .who b{font-size:13.5px} .brow .who span{font-size:11px}
  .brow .pts{width:40px;font-size:18px}
  .brow.me{flex-wrap:wrap}
  .brow.me .go{flex:1 1 100%;text-align:center;order:9;margin-top:6px}

  /* ---- Coaching / result ---- */
  .bars4{grid-template-columns:1fr;gap:10px;margin:14px 0 18px}
  .note{padding:16px}
  .drill{padding:16px}
  .drill .btn-acc{width:100%;text-align:center}
  .verdict{font-size:10.5px}

  /* ---- Resume workspace ---- */
  .res-sheet .resume-sheet{padding:20px 16px;font-size:11.5px}
  .resume-sheet h2{font-size:19px}
  .resume-sheet.tpl-executive .rhead{padding:18px 16px}
  .resume-sheet.tpl-executive .rbody{padding:16px}
  .resume-sheet.tpl-sidebar{grid-template-columns:1fr}
  .resume-sheet.tpl-sidebar .rside{padding:18px 16px}
  .resume-sheet.tpl-sidebar .rmain{padding:18px 16px}
  .tpl-pick{grid-template-columns:repeat(3,1fr);gap:6px}
  .tpl-card{padding:6px;font-size:10px}
  .accent-sw{width:30px;height:30px}

  /* ---- Companies ---- */
  .cgrid{grid-template-columns:1fr;gap:12px}
  .ccard{padding:16px}
  #draftPanel{padding:18px 16px;border-radius:0}
  #draftPanel .btn{padding:12px 14px;font-size:14px}

  /* ---- Profile / badges ---- */
  .twocol>.panel{flex-basis:100%}

  /* ---- Admin ---- */
  .pill{padding:6px 12px;font-size:13px}
  details.card{padding:14px}
  .tbl-scroll{-webkit-overflow-scrolling:touch}
  .cpick-list{max-height:200px}
  /* hero split rows on college/admin headings */
  .insight{padding:20px}
  .insight .serif{font-size:19px!important}
  .navy-band{padding:20px}
}

@media(max-width:420px){
  .stages,.tiles{grid-template-columns:1fr}
  .auth-art .facts{grid-template-columns:repeat(3,1fr)}
  .podium{gap:6px}
  .pod .av{width:56px;height:56px;font-size:18px} .pod.p1 .av{width:76px;height:76px;font-size:26px}
  .tpl-pick{grid-template-columns:repeat(2,1fr)}
  .jb-hero h1{font-size:25px}
  .iv-q{font-size:17px}
}

/* ---- late fixes ---- */
@media(max-width:860px){
  .iv-room{min-height:100vh;min-height:100dvh}
  /* page header rows: title + buttons stack */
  .wrap.section.stack>div:first-child>div:last-child{width:100%}
  .wrap.section.stack>div:first-child>div:last-child>.btn{flex:1 1 auto;text-align:center}
}