/* Phones (2026-10-19): one column, nothing wider than the screen, type and buttons sized for thumbs.
   Loaded after every page's own styles, so these rules win on small screens. */
html, body { overflow-x:hidden; }
.tabbar, .fbar, .fdone, .icon-btn { display:none; }

@media (max-width:900px) {
  /* signed-in app: compact top bar, bottom tab bar instead of the sidebar */
  .appbar-in { height:56px; gap:10px; padding:0 14px; }
  .appbar .brand { font-size:17px; gap:8px; } .appbar .brand i { width:26px; height:26px; }
  .appbar .browse, .me .plan-pill { display:none; }
  .icon-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); margin-left:auto; }
  .icon-btn:hover { background:#f5f6fa; }
  .appbar .me { margin-left:2px; }
  .side { display:none; }
  .shell { display:block; min-height:0; }
  .shell main.content { padding:18px 16px 96px; }
  footer { margin-left:0; padding-bottom:96px; }
  .tabbar { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:15;
            background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line);
            padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; font-size:11px; font-weight:600;
              color:var(--soft); text-decoration:none; }
  .tabbar a svg { width:22px; height:22px; }
  .tabbar a.on { color:var(--blue); }
  .menu { position:fixed; top:60px; right:10px; left:auto; width:min(300px, calc(100vw - 20px)); }
}

@media (max-width:640px) {
  body { font-size:16px; }
  h1 { font-size:30px; line-height:1.12; } h2 { font-size:24px; } h3 { font-size:18px; }
  input[type=text], input[type=email], select { font-size:16px; }          /* 16px: iOS doesn't zoom into the field */
  .btn { min-height:44px; } .btn.sm { min-height:40px; }
  .nav nav a, .btn, .chips span, .quick a, .cos a, .seg a { white-space:nowrap; }
  main { padding:28px 16px 70px; }
  .panel { padding:18px; }

  /* visitor top bar (pill): logo + log in + one button, no wrapping */
  .nav { margin:8px 8px 0; padding:8px 8px 8px 14px; gap:8px; }
  .nav .brand { font-size:16px; gap:7px; } .nav .brand i { width:24px; height:24px; }
  .nav nav { gap:12px; } .nav nav a { font-size:14px; } .nav nav a.btn { padding:9px 13px; font-size:14px; min-height:0; }
  footer { flex-direction:column; gap:8px; padding:22px 16px 40px; font-size:13px; }

  /* page headings inside the app */
  .ph { margin-bottom:16px; gap:12px; } .ph h1 { font-size:24px; } .ph p { font-size:14px; }
  .ph .acts, .ph .seg { width:100%; } .ph .acts .btn, .ph .acts form, .ph .acts form .btn { width:100%; }
  .seg { display:flex; } .seg a { flex:1; text-align:center; padding:8px 6px; }
  .stats { grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; }
  .stat { padding:10px 12px; } .stat b { font-size:20px; } .stat span { font-size:12px; }
  .card { padding:16px; border-radius:12px; }
  .alertbar { flex-direction:column; align-items:stretch; padding:14px; }
  .alertbar form { flex-wrap:wrap; } .alertbar form select, .alertbar form .btn { flex:1; }
  .cos-card .cos { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .cos-card .cos::-webkit-scrollbar { display:none; }
  .al { grid-template-columns:1fr; } .al form { flex-wrap:wrap; gap:10px; }
  .hist th:first-child, .hist td:first-child { white-space:nowrap; font-size:13px; }
  .setrow { flex-direction:row; align-items:flex-start; }
  .kv { grid-template-columns:1fr !important; gap:2px !important; } .kv dd { margin-bottom:10px !important; }

  /* job card */
  .jc { padding:14px; gap:0; border-radius:12px; }
  .jc-t { font-size:16px; } .jc-co { font-size:14px; } .jc-what { font-size:14px; }
  .fact { font-size:12px; padding:4px 7px; }
  .jc-side { flex-direction:row; justify-content:space-between; align-items:center; margin-top:12px; }
  .jc-apply { padding:10px 22px; font-size:15px; }
  .jc-acts { gap:6px; flex-wrap:wrap; } .jc-acts form.act button { padding:8px 10px; }
  .jc-row { grid-template-columns:1fr auto; } .jc-row span { grid-column:1; font-size:13px; }
  .jc-row .jc-apply { grid-row:1 / span 2; grid-column:2; }
  .grp-h { font-size:16px; }

  /* job panel: full screen */
  .drawer .sheet { width:100%; padding:14px 16px 40px; }
  .jp-t { font-size:22px; margin-right:70px; }
  .jp-cta { flex-direction:column; align-items:stretch; } .jp-cta .btn { width:100%; }
  .jp-cta form.act { display:flex; } .jp-cta form.act button { flex:1; }
  .toast { left:12px; right:12px; transform:none; bottom:84px; justify-content:space-between; }
}

/* jobs page (jobs.html) and landing page header on phones */
@media (max-width:860px) {
  .top .bar { flex-wrap:wrap; gap:10px 12px; padding:10px 14px; }
  .top .bar .brand { display:flex !important; font-size:17px; gap:8px; } .top .bar .brand i { width:26px; height:26px; }
  .top .bar .cta { margin-left:auto; padding:9px 13px; font-size:14px; white-space:nowrap; }
  .top .bar .me { margin-left:0; } .top .bar .me .plan-pill { display:none; }
  .top .bar .search { order:5; flex-basis:100%; }
  .intro { padding:16px 14px 0; } .intro h1 { font-size:24px; } .intro p { font-size:14px; }
  .quick { flex-wrap:nowrap; overflow-x:auto; margin:12px -14px 0; padding:0 14px 12px; scrollbar-width:none; }
  .quick::-webkit-scrollbar { display:none; }
  .quick a { flex:none; }
  .page { padding:12px 14px 80px; gap:12px; }
  .page > .side { display:none; }
  .fbar { display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:5; margin:0 -14px 10px;
          padding:10px 14px; background:#f6f7fb; }
  .fbar button { display:inline-flex; align-items:center; gap:8px; font:600 15px Inter,sans-serif; color:var(--ink); background:#fff;
                 border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer; }
  .fbar button span { background:var(--blue); color:#fff; border-radius:999px; font-size:12px; padding:1px 7px; }
  .fbar > span { font-size:14px; color:var(--soft); }
  body.show-filters { overflow:hidden; }
  body.show-filters .page > .side { display:block; position:fixed; inset:0; z-index:40; max-height:none; overflow-y:auto;
                                    background:#fff; border-radius:0; top:0; }
  body.show-filters .filters { border:0; border-radius:0; padding:22px 18px 40px; }
  .filters .fhead { margin:-22px -18px 16px; padding:14px 18px; border-radius:0; align-items:center; }
  .filters .fhead > span { display:flex; align-items:center; gap:14px; }
  .fdone { display:inline-block; font:600 15px Inter,sans-serif; background:var(--blue); color:#fff; border:0; border-radius:9px;
           padding:9px 16px; cursor:pointer; }
  .filters .chips span { padding:9px 14px; }

  /* landing page */
  .top .acts { display:flex; align-items:center; gap:12px; }
  .top .acts a { white-space:nowrap; }
  .top .acts .signin { font-size:14px; } .top .acts .cta { padding:10px 14px; font-size:14px; }
  .top .brand { font-size:17px; white-space:nowrap; }
}