/* =========================================================================
   Jobs Platform — responsive layer (loaded after base.css + brand theme)
   Root-cause fixes for small screens: grid/flex children get min-width:0, long strings wrap,
   tables scroll INSIDE their wrapper or stack into cards, inputs never trigger iOS zoom,
   tap targets are 44px, header/footer/dashboard/app shells re-flow.
   Breakpoints used: 1100 · 1024 · 900 · 768 · 640 · 600 · 480 · 360 · 340
   Tested widths: 320 · 360 · 375 · 390 · 414 · 430 · 768 · 1024 · desktop
   ========================================================================= */

/* ---- 0. Safety net (root causes are fixed below — this only catches 3rd-party embeds/ads) --- */
html, body { max-width: 100%; }
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; -webkit-tap-highlight-color: transparent; } /* clip (not hidden) keeps position:sticky working */
a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }

/* ---- 1. Root causes: min-width on grid / flex children, fluid media, wrapping ------------- */
.grid > *, .two-col > *, .dash > *, .listing > *, .job-layout > *, .split > *, .hero-grid > *, .form-row > *, .msg-layout > *,
.plans > *, .steps > *, .footer-grid > *, .stats-strip > *, .cvb > *, .cv-grid > *, .source-opts > *, .design-row > * { min-width: 0; }
.dash-main, .flex-1, .job-card .top > .flex-1, .welcome .who, .app-job > .flex-1, .msg-thread, .cvb-side > *, .side-actions > *, .tpl-opt, .card-head > * { min-width: 0; }
.cvb-side { grid-template-columns: minmax(0, 1fr); }
.card, .job-card, .alert, .dash-main, .app-main, .prose, .notif, .bubble, .empty, .table td, .dropdown-menu, .mobile-nav, .hero, .cta-band, .newsletter, .site-footer, .plan, .stat, .tab-panel { overflow-wrap: anywhere; }
.btn { max-width: 100%; }
/* numbers in stat tiles never break; the delta wraps under the value instead */
.stat { flex-wrap: wrap; } .stat > div { flex: 1 1 0%; min-width: 0; } .stat > .stat-icon { flex: none; } .stat-value { white-space: nowrap; overflow-wrap: normal; }
/* controls must wrap at spaces only, never mid-word (overflow-wrap:anywhere is inherited from the containers above) */
.btn, .badge, .chip, .tag, .pills a, .pills button, .tabs a, .tabs button, .nav a, .billing-toggle button, .audience-tabs button, .side-nav a, .app-tabs a, .status-pill, .dropdown-menu a, .dropdown-menu button, label, th { overflow-wrap: normal; }
iframe, embed, object, video, canvas { max-width: 100%; }
pre, code { max-width: 100%; overflow-wrap: anywhere; }
pre { overflow-x: auto; }
.ad-slot, .ad-slot * { max-width: 100%; }
.ad-slot ins { display: block !important; max-width: 100% !important; }

/* ---- 2. Tables: horizontal scroll INSIDE the wrapper; .table-stack = card rows on phones ---- */
.table-wrap, .table-responsive { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-responsive { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.card > .table-wrap, .card > .table-responsive { border-left: 0; border-right: 0; border-radius: 0; }
.card > .table-wrap:last-child, .card > .table-responsive:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.table-wrap .table, .table-responsive .table { margin: 0; }
@media (max-width: 768px) {
  .table-wrap .table:not(.table-stack), .table-responsive .table:not(.table-stack) { min-width: 640px; }
  .table-wrap .table-compact:not(.table-stack) { min-width: 560px; }
  /* stacked rows: <table class="table table-stack"> + <td data-label="…"> */
  .table-wrap .table-stack, .table-responsive .table-stack { min-width: 0; }
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack tbody tr:hover { background: none; }
  .table-stack td { padding: 5px 0; border: 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; text-align: left; white-space: normal; }
  .table-stack td.text-right { text-align: left; }
  .table-stack td[data-label]::before { content: attr(data-label); flex: none; width: 84px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .table-stack td.stack-title { display: block; padding: 0 0 8px; font-size: 1rem; }
  .table-stack td.stack-title::before { content: none; }
  .table-stack td.actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 10px; white-space: normal; }
  .table-stack td.actions::before { content: none; }
  .table-stack td.actions .dropdown { position: static; }
  .table-stack td.actions .dropdown-menu { right: auto; left: 0; }
  .table-stack td > .flex, .table-stack td > .usage { flex: 1 1 auto; min-width: 0; }
  .table-stack td > *:not(.btn):not(.dropdown) { min-width: 0; }
}
@media (max-width: 340px) {
  .table-stack td[data-label] { flex-direction: column; align-items: flex-start; gap: 2px; }
  .table-stack td[data-label]::before { width: auto; }
}

/* ---- 3. Forms: no iOS zoom, comfortable inputs, tap targets ------------------------------ */
@media (max-width: 768px), (pointer: coarse) {
  /* !important on purpose: page-level <style> blocks load after this file and several shrink inputs below 16px, which makes iOS Safari zoom on focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea, .input, .select, .textarea { font-size: 16px !important; }
  input, select, .input, .select { min-height: 46px; }
  input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"], input[type="color"], input[type="hidden"], .tag-input input { min-height: 0; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .check { min-height: 32px; align-items: center; } .check input { margin-top: 0; }
  .switch .track { width: 46px; height: 26px; } .switch .track::after { width: 20px; height: 20px; } .switch input:checked + .track::after { left: 23px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .btn-xs { min-height: 44px; padding: 6px 12px; }
  .btn-icon, .btn-icon.btn-sm { width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .btn-icon.btn-sm { width: 40px; height: 40px; min-height: 40px; }
  .pagination a, .pagination span { min-width: 44px; height: 44px; }
  .pills a, .pills button, .tabs a, .tabs button, .dropdown-menu a, .dropdown-menu button, .side-nav a, .filters .check, .link-list a { min-height: 44px; }
  .tabs a, .tabs button { display: inline-flex; align-items: center; }
  .pills a, .pills button { display: inline-flex; align-items: center; }
  a.chip, .chip.is-active, .kw-chips .chip { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .job-card .save { top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; }
  .socials a { width: 44px; height: 44px; }
  .alert .close, .modal-close { width: 40px; height: 40px; display: grid; place-items: center; }
  .footer-grid li a, .mobile-nav a { display: block; padding-top: 10px; padding-bottom: 10px; }
  .footer-grid li { margin-bottom: 0; }
  .footer-brand p a, .footer-bottom a { display: inline-block; padding: 12px 0; }
  .card-head > a:not(.btn), .section-head > a:not(.btn), .app-section h2 a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header .logo, .app-top .logo, .site-footer .logo { min-height: 44px; }
  body.app .app-top .right .avatar-sm { width: 40px; height: 40px; }
  .tag-input .tag button, .skill-chip button { width: 28px; height: 28px; }
}

/* ---- 4. Header (www) --------------------------------------------------------------------- */
.site-header .container { gap: 20px; }
.site-header .logo { flex: none; min-width: 0; gap: 8px; }
/* width:auto + max-width keeps a square/icon-only logo from leaving a blank gap; wide logos are capped and letterboxed */
.logo img, .site-header .logo img { display: block; width: auto; max-width: 190px; height: 46px; object-fit: contain; object-position: left center; }
.logo .word { white-space: nowrap; line-height: 1.05; }
.nav { min-width: 0; }
.nav-right { flex: none; gap: 8px; }
.nav-right .dropdown > a { display: inline-flex; align-items: center; gap: 8px; padding: 2px; border-radius: 999px; text-decoration: none !important; }
.nav-right .dropdown-menu { max-width: calc(100vw - 32px); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 10px; }
.nav-toggle[aria-expanded="true"] { background: var(--primary-50); color: var(--primary); }
.theme-dailyjob .nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; }
.nav a { white-space: nowrap; }
@media (max-width: 1280px) {
  .site-header .container { gap: 14px; }
  .nav { gap: 2px; margin-left: 0; } .nav a { padding: 8px 8px; font-size: .86rem; }
  .nav-right .dropdown > a > .fw-6 { display: none; } /* first name — icons + avatar are enough here */
}
/* ≤1100px (tablet landscape and below): the 7-item menu no longer fits next to the logo → hamburger drawer */
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .logo img, .site-header .logo img { max-width: 170px; height: 42px; }
}
@media (max-width: 900px) {
  :root { --header-h: 60px; }
  .site-header { height: var(--header-h); }
  .site-header .container { gap: 10px; padding: 0 16px; }
  .logo img, .site-header .logo img { max-width: 156px; height: 40px; }
  .logo { font-size: 1.2rem; gap: 8px; }
  .logo .mark { width: 34px; height: 34px; font-size: .92rem; border-radius: 9px; }
  .logo small { display: none; }
  .nav-right { gap: 6px; margin-left: auto; }
  .nav-right .btn-icon { width: 40px; height: 40px; min-height: 40px; }
  .nav-right .btn-sm { min-height: 40px; padding: 0 12px; font-size: .84rem; white-space: nowrap; }
  .nav-right .avatar-sm { width: 36px; height: 36px; font-size: .78rem; }
  .nav-right .dropdown > a > svg { display: none; }
  .notif-btn .count { top: -2px; right: -2px; }
}
@media (max-width: 360px) {
  .welcome .who, .prof-head > .flex-1 { flex-basis: 100%; }
  .logo img, .site-header .logo img { max-width: 140px; height: 36px; }
  .logo { font-size: 1.08rem; gap: 6px; } .logo .mark { width: 32px; height: 32px; }
  .nav-right { gap: 4px; }
  .nav-right .btn-sm { padding: 0 10px; font-size: .8rem; }
}
@media (max-width: 340px) {
  .logo img, .site-header .logo img { max-width: 128px; height: 34px; }
  .logo .word { display: none; }
}

/* mobile drawer: slides under the header, dims the page, closes on outside tap / Esc (ui.js) */
.mobile-nav { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 99; padding: 0; overflow: auto; background: transparent; }
.mobile-nav.is-open { display: block; }
.mobile-nav::before { content: ""; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(15,23,42,.45); z-index: -1; }
.mobile-nav .mnav-panel { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(15,23,42,.18); border-radius: 0 0 18px 18px; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow: auto; animation: mnav-in .18s ease; }
@keyframes mnav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 8px; min-height: 48px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none !important; }
.mobile-nav a svg { width: 18px; height: 18px; color: var(--muted-2); flex: none; }
.mobile-nav a.is-active { color: var(--primary); }
.mobile-nav .mnav-user { display: flex; align-items: center; gap: 12px; padding: 12px 8px 14px; border-bottom: 1px solid var(--line); }
.mobile-nav .mnav-user strong { display: block; font-size: 1rem; line-height: 1.2; } .mobile-nav .mnav-user small { color: var(--muted); }
.mobile-nav .mnav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0 4px; }
.mobile-nav .mnav-actions .btn { min-height: 46px; }
.mobile-nav .mnav-actions form { display: contents; }
.mobile-nav .mnav-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 14px 8px 4px; }
.mobile-nav .count { background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: auto; }
body.nav-open { overflow: hidden; }
@media (min-width: 1101px) { .mobile-nav { display: none !important; } body.nav-open { overflow: auto; } }
.theme-dailyjob .mobile-nav .mnav-panel { background: #fff; }

/* ---- 5. Footer ---------------------------------------------------------------------------- */
.site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.site-footer .logo img { width: auto; max-width: 180px; height: 42px; }
.site-footer .logo .word { color: #fff; }
.footer-grid p { overflow-wrap: anywhere; }
.footer-grid li a { display: inline-block; padding: 3px 0; }
.footer-bottom > div { min-width: 0; }
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { padding: 36px 0 calc(20px + env(safe-area-inset-bottom)); margin-top: 40px; font-size: .88rem; }
  .site-footer .logo img { max-width: 156px; height: 38px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-grid > :first-child p { max-width: none !important; margin-top: 10px; }
  .footer-grid h4 { font-size: .78rem; margin-bottom: 8px; }
  .footer-grid li { margin-bottom: 0; } .footer-grid li a { display: block; padding: 10px 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; padding-top: 16px; }
  .footer-bottom .flex { flex-wrap: wrap; gap: 8px 16px; width: 100%; }
  .footer-bottom .brand-tagline { width: 100%; transform: none; font-size: 1.05rem !important; }
  .newsletter { padding: 20px 16px; gap: 14px; }
  .newsletter form { min-width: 0; width: 100%; flex-direction: column; } .newsletter form .btn { width: 100%; }
  .cookie-banner { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 12px 14px; gap: 10px; }
  .cookie-banner .btn { width: 100%; }
}

/* ---- 6. Dashboard shell (seeker + employer) — sidebar → horizontal snap tab bar ≤1024 ----- */
.dash-tabs { position: relative; }
@media (max-width: 1024px) {
  .dash { grid-template-columns: 1fr; gap: 16px; padding: 16px 0 40px; }
  .dash-side { position: static; }
  .dash-tabs::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 36px; pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 85%); }
  .dash-tabs.is-end::after { opacity: 0; }
  .dash-side .side-nav { display: flex; gap: 4px; padding: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding: 0 6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
  .dash-side .side-nav::-webkit-scrollbar { display: none; }
  .dash-side .side-nav a { flex: none; scroll-snap-align: start; white-space: nowrap; padding: 10px 14px; min-height: 44px; gap: 8px; font-size: .9rem; }
  .dash-side .side-nav a svg { width: 18px; height: 18px; }
  .dash-side .side-nav .count { margin-left: 2px; }
  body.jobnet .side-nav a.is-active, .theme-jobnet .side-nav a.is-active { border-left: 0; padding-left: 14px; }
  .side-promo { display: none; }
  .dash-head { margin-bottom: 16px; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dash { padding: 12px 0 36px; }
  .dash-head { gap: 10px; } .dash-head h1 { font-size: 1.3rem; }
  .dash-head > .btn-group, .dash-head > .btn { width: 100%; }
  .dash-head > .btn-group .btn { flex: 1 1 auto; }
  .dash-head .breadcrumbs { margin-bottom: 6px; }
  .card-head { padding: 14px 16px; } .card-body { padding: 16px; } .card-foot { padding: 12px 16px; }
  .card-head > .btn-group { flex: 1 1 auto; min-width: 0; max-width: 100%; } .card-head > .btn-group .btn { flex: 1 1 auto; } .card-head > .btn { max-width: 100%; }
  .section-head { margin-bottom: 16px; }
  /* welcome / hero cards inside dashboards */
  .welcome, .welcome-emp, .plan-hero, .cv-hero, .prof-head { padding: 16px; gap: 14px; }
  .welcome > [style*="min-width"], .welcome-emp > [style*="min-width"], .plan-hero > [style*="min-width"], .cv-hero > [style*="min-width"], .prof-head > [style*="min-width"] { min-width: 0 !important; }
  .welcome .who { flex: 1 1 160px; }
  .welcome .completion, .prof-head .completion { flex: 1 1 100%; min-width: 0 !important; width: 100%; margin-left: 0; }
  .welcome .avatar-xl, .prof-head .avatar-xl { width: 72px; height: 72px; font-size: 1.5rem; }
  .welcome-emp .company-box { margin-left: 0; width: 100%; min-width: 0; }
  .plan-hero .btn-group { width: 100%; } .plan-hero .btn-group .btn { flex: 1; }
  .card.cv-hero img { width: 84px; }
  /* stat tiles: 2 per row, compact */
  .grid.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-grid .stat, .stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .stat-icon { width: 38px; height: 38px; border-radius: 10px; } .stat-icon svg { width: 18px; height: 18px; }
  .stat-value { font-size: 1.3rem; } .stat-label { font-size: .78rem; line-height: 1.3; } .stat-delta { margin-left: 0; }
  .stats-strip { gap: 10px; } .stats-strip .stat { flex-direction: row; align-items: center; }
  .calendar-item { flex-wrap: wrap; gap: 10px 12px; } .calendar-item > .btn { margin-left: auto; }
  .cta-band { padding: 24px 18px; } .cta-band .btn-lg { width: 100%; white-space: normal; }
  .pipeline { grid-auto-columns: minmax(240px, 80%); scroll-snap-type: x proximity; } .pipeline .col { scroll-snap-align: start; }
  .msg-layout { min-height: 0; } .msg-body { max-height: 55vh; }
  .bubble { max-width: 88%; }
  .empty { padding: 28px 12px; }
  .tabs { scrollbar-width: none; scroll-snap-type: x proximity; } .tabs::-webkit-scrollbar { display: none; } .tabs a, .tabs button { scroll-snap-align: start; padding: 10px 11px; }
  .pills { max-width: 100%; }
  .btn-group .btn, .form-actions .btn { white-space: normal; }
  .form-actions .btn-primary { width: 100%; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dt { margin-top: 8px; }
  .fieldset { padding: 14px; }
  .repeater-row { padding: 12px; }
  .file-drop { padding: 18px 12px; }
}
@media (max-width: 480px) {
  /* job cards with a match ring: logo + ring on the first row, title block below (keeps the title readable) */
  .job-card .top:has(.match-ring) { flex-wrap: wrap; }
  .job-card .top:has(.match-ring) > .flex-1 { flex: 1 1 100%; order: 3; }
  .job-card .top .match-ring { margin-left: auto; margin-right: 44px; }
  /* inline min-widths from templates that flex-wrap: let them shrink on narrow phones */
  .card [style*="min-width:2"], .card [style*="min-width: 2"], .card [style*="min-width:1"], .card [style*="min-width: 1"],
  .flex-wrap > [style*="min-width"], .filter-bar [style*="min-width"], form[data-auto-submit] select[style*="min-width"] { min-width: 0 !important; }
  .filter-bar select[style*="min-width"], form[data-auto-submit] select[style*="min-width"] { width: 100%; }
  .dropdown-menu { min-width: 200px; }
}

/* ---- 7. CV builder / Resume Lab: template picker → horizontal scroll-snap carousel ------- */
/* .tpl-carousel is added in the Blade markup; the doubled class beats the page-level .tpl-strip / .tpl-picker grid rules */
@media (max-width: 1024px) {
  .tpl-strip.tpl-carousel, .tpl-picker.tpl-carousel { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 6px; padding: 6px 6px 12px; margin: 0 -6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
  .tpl-carousel::-webkit-scrollbar { display: none; }
  /* card width scales with the viewport so the next card always peeks in (≈2.2 cards on phones, 150–170px) */
  .tpl-carousel .tpl-opt { flex: 0 0 clamp(144px, 38vw, 170px); width: auto; min-width: 0; scroll-snap-align: start; }
  .tpl-carousel .tpl-opt .box { display: block; padding: 6px; border-radius: 10px; }
  .tpl-carousel .tpl-opt .name { white-space: normal; overflow: visible; text-overflow: clip; font-size: .76rem; margin-top: 6px; line-height: 1.2; min-height: 2.4em; }
  .tpl-strip.tpl-carousel .tpl-thumb { padding: 8px; grid-template-rows: 12px 1fr; gap: 4px; border-radius: 8px; } .tpl-strip.tpl-carousel .tpl-thumb .b { gap: 4px; } .tpl-strip.tpl-carousel .tpl-thumb .b i { height: 4px; } .tpl-strip.tpl-carousel .tpl-thumb.ats .h { height: 5px; }
  .tpl-strip.tpl-carousel .tpl-opt .lock { width: 22px; height: 22px; top: 8px; right: 8px; } .tpl-strip.tpl-carousel .tpl-opt .lock svg { width: 12px; height: 12px; }
  .tpl-picker.tpl-carousel .tpl-opt .lock { top: 10px; right: 10px; }
  .tpl-carousel-hint { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); margin: 0 0 6px; }
  .tpl-carousel-hint svg { width: 14px; height: 14px; }
}
@media (min-width: 1025px) { .tpl-carousel-hint { display: none; } }
@media (max-width: 600px) {
  .cvb .cvb-main .tabs { position: static; padding-top: 0; }
  .cvb-head .title-wrap { width: 100%; } .cvb-head .title-wrap input { width: 100% !important; }
  .cvb-side { gap: 12px; }
  .preview-card .preview-frame { aspect-ratio: 1 / 1.3; }
  .cvb-side .design-row { grid-template-columns: 1fr; }
  .cvb .quick-add { flex-wrap: wrap; } .cvb .quick-add .suggest { flex: 1 1 100%; } .cvb .quick-add .btn { width: 100%; }
  .rep-head { flex-wrap: wrap; }
  .panel-nav { flex-wrap: wrap; } .panel-nav .btn { flex: 1 1 auto; }
  .cv-card .cv-actions .btn { flex: 1 1 auto; } .cv-card .cv-actions form { flex: 1 1 auto; display: flex; } .cv-card .cv-actions form .btn { width: 100%; }
  .modal #cv-preview-frame { height: 70vh; height: 70dvh; }
}

/* ---- 8. Pricing / plans / subscription / billing ------------------------------------------ */
@media (max-width: 900px) {
  .plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
  .plans-controls { gap: 12px; }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 22px 18px 20px; }
  .plan .badge { max-width: calc(100% - 28px); white-space: normal; text-align: center; }
  .plans .plan .current-flag { position: static; transform: none; display: inline-flex; align-self: flex-start; margin: 0 0 10px; }
  .plan .price { font-size: 1.75rem; } .plan .tagline { min-height: 0; }
  .plan ul { margin: 14px 0 18px; } .plan li { align-items: flex-start; }
  .plan .btn { width: 100%; white-space: normal; min-height: 48px; }
  .plans-hero { padding: 32px 0 24px; }
  .billing-wrap { width: 100%; } .billing-toggle { flex: 1 1 auto; } .billing-toggle button { flex: 1; min-height: 40px; white-space: nowrap; }
  .audience-tabs { width: 100%; } .audience-tabs button { flex: 1; justify-content: center; padding: 10px 8px; font-size: .86rem; }
  .trust-strip { gap: 6px 14px; font-size: .8rem; }
  .compare th, .compare td { padding: 10px 8px; font-size: .84rem; }
  .addon { padding: 16px; } .addon .btn { width: 100%; }
  .pay-note { padding: 16px; flex-wrap: wrap; }
  .mini-plan .btn { width: 100%; }
  .credit-card { padding: 12px; }
  .usage .progress { width: 100%; max-width: 160px; }
}

/* ---- 9. Public pages: hero, search, listings, job detail ----------------------------------- */
@media (max-width: 768px) {
  .hero { padding: 36px 0 32px; }
  .hero-lead { font-size: 1rem; }
  .search-bar { grid-template-columns: 1fr; padding: 8px; gap: 6px; border-radius: 14px; }
  .search-bar .btn { grid-column: 1 / -1; min-height: 48px; }
  .listing-toolbar { gap: 10px; } .listing-toolbar select { width: auto; max-width: 100%; }
  .job-head { padding: 18px 16px; gap: 14px; } .job-head .cta { margin-left: 0; width: 100%; } .job-head .cta .btn { flex: 1 1 auto; }
  .section { padding: 40px 0; }
  .split { gap: 24px; }
  .cta-band { padding: 28px 20px; }
  .logo-strip { gap: 10px; } .logo-strip a { padding: 8px 12px; font-size: .84rem; }
  .story { padding: 18px; }
  .company-card { padding: 16px; }
}
@media (max-width: 600px) {
  .popular { font-size: .8rem; gap: 6px; }
  .dj-hero-tabs { display: flex; width: 100%; } .dj-hero-tabs button { flex: 1; padding: 10px 8px; min-height: 44px; }
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { gap: 14px; }
  .modal { padding: 10px; align-items: flex-end; }
  .modal-box { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  .modal-head { padding: 14px 16px; } .modal-foot { flex-wrap: wrap; padding: 12px 16px; } .modal-foot .btn { flex: 1 1 auto; }
  .toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
  .apply-bar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .breadcrumbs { font-size: .78rem; }
  .job-card { padding: 16px 14px; } .job-card .top { gap: 10px; } .job-card .title { font-size: .98rem; padding-right: 36px; }
  .job-card .foot { flex-wrap: wrap; } .job-card .foot .btn { flex: 1 1 auto; }
  .job-row { padding: 14px; gap: 12px; }
  .results-list { gap: 10px; }
  .category-card { padding: 12px 14px; }
}

/* ---- 9b. Auth pages (login / register / employer registration / OTP) — layout uses inline paddings --- */
@media (max-width: 600px) {
  .section-soft[style*="min-height"] { padding: 16px 0 32px !important; }
  .section-soft[style*="min-height"] > .container > .card > .card-body { padding: 20px 16px !important; }
  .section-soft[style*="min-height"] .text-center.mb-5 { margin-bottom: 16px; }
  .reg-grid { gap: 20px; } .reg-side { padding: 0; } .reg-side img { max-height: 120px; }
  .verify-note { padding: 12px; }
  .otp-input { font-size: 1.5rem !important; letter-spacing: .32em !important; padding: 12px 8px 12px 16px !important; }
  .dest { padding: 10px 12px; } .dest strong { overflow-wrap: anywhere; }
  .resend-row { gap: 10px; } .resend-row form { width: 100%; } .resend-row select { flex: 1 1 140px; } .resend-row .btn { flex: 1 1 auto; }
  .pw-toggle { width: 40px; height: 40px; }
}

/* ---- 10. App shell (app.* PWA) ------------------------------------------------------------ */
body.app .app-top { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
body.app .app-top .logo { flex: none; min-width: 0; gap: 8px; }
body.app .app-top .logo img { width: auto; max-width: 132px; height: 34px; object-fit: contain; object-position: left center; }
body.app .app-top .logo .mark { width: 32px; height: 32px; font-size: .9rem; border-radius: 9px; }
body.app .app-top .logo .word { white-space: nowrap; }
body.app .app-top .right { gap: 6px; }
body.app .app-top .right .btn-icon { width: 40px; height: 40px; min-height: 40px; }
body.app .app-top .right .avatar-sm { width: 40px; height: 40px; font-size: .8rem; }
body.app .app-top .right .btn-sm { min-height: 40px; }
body.app .app-main { padding: 14px 16px 24px; }
body.app .app-tabs { grid-auto-columns: minmax(0, 1fr); }
body.app .app-tabs a { min-width: 0; padding: 6px 2px 4px; gap: 4px; font-size: .66rem; line-height: 1.15; }
body.app .app-tabs a .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app .app-tabs a svg { width: 22px; height: 22px; flex: none; }
body.app .app-tabs a .count { top: 4px; right: calc(50% - 20px); }
body.app .app-tabs a.is-active svg { transform: translateY(-1px); }
body.app.kb-open .app-tabs, body.app.kb-open .app-sticky-cta { display: none; }
body.app .card { overflow-wrap: anywhere; }
body.app .btn-group { flex-wrap: wrap; }
body.app .install-banner { flex-wrap: wrap; }
body.app .install-banner .btn { min-height: 40px; }
@media (max-width: 360px) {
  body.app .app-top { padding-left: 12px; padding-right: 12px; }
  body.app .app-top .logo img { max-width: 120px; height: 32px; }
  body.app .app-tabs a { font-size: .62rem; }
  body.app .app-main { padding: 12px 12px 20px; }
}
@media (max-width: 340px) { body.app .app-top .logo .word { display: none; } body.app .app-top .logo img { max-width: 110px; } }
@media (min-width: 768px) { body.app .app-top .logo img { max-width: 150px; height: 38px; } }

/* ---- 11. Tablet (768–1024) niceties ------------------------------------------------------ */
@media (min-width: 601px) and (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { padding: 16px; gap: 12px; }
  .stat-delta { flex: 1 1 100%; margin-left: 0; }
  .two-col { grid-template-columns: 1fr; }
  .listing { grid-template-columns: 1fr; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans > .plan:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 520px; width: 100%; justify-self: center; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding: 0 24px; }
}

/* ---- 12. Reduced motion ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-nav .mnav-panel, .toast, .modal-box { animation: none; }
  .card-hover, .btn { transition: none; }
}

/* ---- hero search bar: the city / category columns collapsed to a few pixels on wide screens,
   because 1fr lets a grid column shrink to its content. Give every column a real floor and let
   the selects fill it. Below 900px responsive.css already stacks the bar, so nothing overflows. */
@media (min-width: 901px) {
  .search-bar { grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 1fr) minmax(160px, 1fr) auto; }
}
.search-bar .input-icon { min-width: 0; }
.search-bar .input-icon > input,
.search-bar .input-icon > select { width: 100%; min-width: 0; text-overflow: ellipsis; }

/* ---- app.* shell on a desktop screen: the bar was full-bleed while the content was centred at
   900px, so the logo and the Sign in button sat in opposite corners of a very wide strip. */
@media (min-width: 900px) {
  .app-top { padding-left: max(16px, calc((100% - 900px) / 2)); padding-right: max(16px, calc((100% - 900px) / 2)); }
}