/* ==========================================================
   APPLY/OS — Component styles · Swiss
   ========================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv01', 'cv11';
}

/* -------------------- TYPOGRAPHY -------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 88px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--text);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
}

.t-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
}

.t-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'ss02', 'tnum';
  letter-spacing: -0.03em;
  color: var(--text);
}

.t-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
}

.t-small {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

h1, h2, h3, h4 { color: var(--text); }

/* -------------------- APP SHELL -------------------- */
.app-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.app-topbar {
  height: 56px;
  min-height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  flex-shrink: 0;
}

/* -------------------- NAV -------------------- */
.nav-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.12s;
  position: relative;
}
.nav-tab:hover { color: var(--text-dim); }
.nav-tab.active { color: var(--text); }
.nav-tab.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

.nav-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  background: var(--accent);
  color: var(--accent-ink);
  letter-spacing: 0.04em;
  margin-left: 2px;
}

/* -------------------- SEARCH -------------------- */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  width: 260px;
  min-width: 0;
  flex-shrink: 1;
  height: 30px;
}
.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
}
.search-box input::placeholder { color: var(--text-mute); }

.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* -------------------- BUTTONS -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  background: transparent;
  color: var(--text);
  height: 32px;
}
.btn-sm { padding: 5px 10px; font-size: 10px; height: 26px; gap: 5px; }
.btn-lg { padding: 14px 20px; font-size: 12px; height: 44px; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--text); }

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
  padding: 6px 8px;
}
.btn-ghost:hover { color: var(--text); background: var(--bg-elev); }

/* -------------------- INPUTS -------------------- */
.input {
  width: 100%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  height: 40px;
  transition: border-color 0.12s;
}
.input:focus { border-color: var(--accent); }
textarea.input { height: auto; padding: 12px; font-family: inherit; line-height: 1.5; }
select.input { cursor: pointer; }
.input::placeholder { color: var(--text-mute); }

.input-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: 6px;
}

/* -------------------- PILLS / CHIPS -------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-strong);
  height: 22px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.pill:hover { color: var(--text); border-color: var(--text); }

.pill-solid {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.pill-solid:hover { background: var(--text); color: var(--bg); }

.pill-mint {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}
.pill-mint:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* -------------------- LOGOS -------------------- */
.co-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  border: 1px solid;
}

/* -------------------- MATCH RING -------------------- */
.match-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.match-ring svg { transform: rotate(-90deg); }
.match-ring-label {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* -------------------- KANBAN CARD -------------------- */
.card-kb {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  padding: 14px;
  cursor: grab;
  transition: border-color 0.12s, transform 0.12s;
}
.card-kb:hover { border-color: var(--text); }
.card-kb:active { cursor: grabbing; }

/* -------------------- SETTINGS -------------------- */
.settings-row {
  margin-bottom: 40px;
}

/* -------------------- SCROLLBAR · invisible, no reserved gutter -------------------- */
* { scrollbar-width: none; scrollbar-color: transparent transparent; }
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* -------------------- DESIGN CANVAS OVERRIDES -------------------- */
.dc-root { background: #0A0A0A !important; }
.dc-section-title { font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: 0.08em; }

/* -------------------- TWEAKS PANEL -------------------- */
.tweaks-panel-custom {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 280px;
  background: #111;
  border: 1px solid rgba(245,245,240,0.22);
  color: #F5F5F0;
  font-family: var(--font-sans);
  z-index: 9999;
}

/* ==========================================================
   RESPONSIVE — tablet (≤900) & mobile (≤600).
   Layout is inline-styled, so we override via [style*=…]
   attribute selectors. Specificity wins via !important.
   ========================================================== */

/* ---------- TABLET / SMALL DESKTOP (≤900px) ---------- */
@media (max-width: 900px) {
  /* Unlock the locked-viewport shell so content scrolls vertically */
  html, body, #root {
    overflow: auto !important;
    height: auto !important;
    min-height: 100%;
  }
  .app-shell,
  .proto-shell {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  /* Top bar — wrap onto two rows, tighter padding */
  .app-topbar {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
  }
  .app-topbar > div {
    gap: 12px !important;
    flex-wrap: wrap;
  }
  .app-topbar nav {
    gap: 0 !important;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .app-topbar nav::-webkit-scrollbar { display: none; }
  .nav-tab {
    padding: 8px 10px !important;
    font-size: 10px;
  }
  .search-box { width: 130px !important; flex-shrink: 1; min-width: 0; }
  .kbd { display: none !important; }

  /* Tweaks/debug panel out of the way on mobile */
  .tweaks-panel-custom {
    width: calc(100vw - 28px) !important;
    right: 14px !important;
    bottom: 14px !important;
  }

  /* --- GRID COLLAPSES --- */
  /* 2-col → 1-col (this also matches '1fr 1fr 1fr'; restored below) */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.6fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1.6fr"] { grid-template-columns: 1fr !important; }
  /* Restore triple/quad so they don't collapse to 1 here (handled in ≤600 block) */
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr 1fr 1fr !important; }

  /* Fixed sidebar grids → stack */
  [style*="grid-template-columns: 232px"],
  [style*="grid-template-columns: 260px"],
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns: 300px"],
  [style*="grid-template-columns: 308px"],
  [style*="grid-template-columns: 32px 1fr"] { grid-template-columns: 1fr !important; }

  /* Auto-fill cards — tighter min */
  [style*="minmax(360px"] { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }

  /* --- PADDING REDUCTIONS --- */
  [style*="padding: 80px 60px"],
  [style*="padding: 60px 80px"],
  [style*="padding: 60px 60px"]   { padding: 32px 20px !important; }
  [style*="padding: 28px 40px"]   { padding: 22px 16px !important; }
  [style*="padding: 40px 40px"]   { padding: 24px 16px !important; }
  [style*="padding: 32px 40px"]   { padding: 22px 16px !important; }
  [style*="padding: 60px 70px"],
  [style*="padding: 64px 72px"]   { padding: 32px 22px !important; }

  /* Onboarding/Dashboard inline H1 sizes */
  .t-display { font-size: 56px !important; line-height: 0.96 !important; }
  .t-h1 { font-size: 30px !important; }
  h1[style*="font-size: 52px"] { font-size: 30px !important; }
  h1[style*="font-size: 44px"] { font-size: 28px !important; }

  /* When two-col onboarding splits stack, drop the dividing right border */
  [style*="border-right: 1px solid var(--border)"] {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Hero header rows that flex space-between with two clusters — stack */
  [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: flex-end"],
  [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: flex-start"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* Section/page header rows (flex space-between with a border) — allow wrap */
  [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: center"][style*="border-bottom"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
    row-gap: 10px !important;
  }
  [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: center"][style*="border-bottom"] > div {
    flex-wrap: wrap;
    min-width: 0;
  }

  /* Fixed-width sidebars used inline (Kanban col, ReviewQueue rail, etc.) */
  [style*="width: 220px"][style*="border-right"],
  [style*="width: 232px"][style*="border-right"],
  [style*="width: 244px"][style*="border-right"],
  [style*="width: 260px"][style*="border-right"],
  [style*="width: 300px"][style*="border-right"] {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Flex-row split containers (Matches, ReviewQueue outer) → stack vertically */
  [style*="display: flex"][style*="overflow: hidden"][style*="background: var(--bg)"][style*="min-height: 0"] {
    flex-direction: column !important;
  }

  /* Onboarding absolute section labels would overlap kicker after grid stacks —
     drop them into normal flow on mobile. */
  [style*="position: absolute"][style*="top: 24px"][style*="left: 24px"][style*="font-size: 10px"],
  [style*="position: absolute"][style*="top: 24px"][style*="right: 24px"][style*="font-size: 10px"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 14px !important;
  }
}

/* ---------- MOBILE (≤600px) ---------- */
@media (max-width: 600px) {
  /* Topbar — icons only, drop labels, tighter */
  .app-topbar { padding: 8px 10px !important; }
  .app-topbar > div { gap: 8px !important; }
  .app-topbar nav .nav-tab > span:not(.nav-badge) { display: none !important; }
  .nav-tab { padding: 8px 6px !important; gap: 4px !important; }
  .nav-tab.active::after { left: 4px; right: 4px; }

  /* 3/4/5 col grids → 2 cols */
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Auto-fill cards — 1 column on phone */
  [style*="minmax(360px"],
  [style*="minmax(260px"] { grid-template-columns: 1fr !important; }

  /* Dashboard row tables: '40px 1fr 120px 100px' / '90px 36px 1fr' etc — collapse extras */
  [style*="grid-template-columns: 40px 1fr 120px 100px"],
  [style*="grid-template-columns: 44px 1fr 160px 120px 70px 110px 90px"] {
    grid-template-columns: 40px 1fr !important;
  }
  [style*="grid-template-columns: 40px 1fr 120px 100px"] > *:nth-child(n+3),
  [style*="grid-template-columns: 44px 1fr 160px 120px 70px 110px 90px"] > *:nth-child(n+3) {
    display: none !important;
  }
  /* Library table: 7 cols → keep logo + title + status + match only */
  [style*="grid-template-columns: 44px 1fr 150px 100px 90px 110px 80px"] {
    grid-template-columns: 36px 1fr 90px 50px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  [style*="grid-template-columns: 44px 1fr 150px 100px 90px 110px 80px"] > *:nth-child(n+5) {
    display: none !important;
  }
  [style*="grid-template-columns: 70px 1fr"] { gap: 4px 8px !important; }

  /* Big paddings smaller still on phone */
  [style*="padding: 80px 60px"],
  [style*="padding: 60px 80px"],
  [style*="padding: 60px 60px"]   { padding: 24px 16px !important; }
  [style*="padding: 28px 40px"]   { padding: 18px 14px !important; }
  [style*="padding: 40px 40px"]   { padding: 20px 14px !important; }
  [style*="padding: 32px 40px"]   { padding: 18px 14px !important; }
  [style*="padding: 14px 18px"]   { padding: 12px 14px !important; }
  [style*="padding: 22px 20px"]   { padding: 16px 14px !important; }

  /* Inline KPI/card numbers */
  [style*="font-size: 44px"] { font-size: 30px !important; }
  [style*="font-size: 52px"] { font-size: 28px !important; }
  .t-display { font-size: 40px !important; }
  .t-h1 { font-size: 24px !important; }

  /* Print/document mocks (resume/cover preview) — squeeze padding */
  [style*="padding: 60px 70px"],
  [style*="padding: 64px 72px"]   { padding: 24px 18px !important; box-shadow: none !important; }

  /* Hide DARK/LIGHT label text inside ThemeToggle for space */
  .app-topbar button[title*="Switch to"] > span { display: none !important; }
}

/* ---------- VERY NARROW (≤380px) — extra squeeze ---------- */
@media (max-width: 380px) {
  .app-topbar { padding: 6px 8px !important; }
  .nav-tab { padding: 7px 4px !important; }
  [style*="padding: 80px 60px"],
  [style*="padding: 60px 80px"],
  [style*="padding: 60px 60px"]   { padding: 20px 12px !important; }
  .t-display { font-size: 34px !important; }
}

/* ==========================================================
   APPLY/OS — DESIGN handoff responsive layer (Swiss)
   Imported from claude.ai/design apply-os-swiss.html.
   Appended AFTER existing responsive rules so the design's
   tablet (≤1024) and phone (≤720) breakpoints take effect
   without removing any of the previously-tuned rules.
   ========================================================== */

/* mobile-stack: any wrapper marked with this class collapses
   from multi-column to single-column on tablet & below. */
@media (max-width: 1024px) {
  .mobile-stack {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }
  .mobile-stack > * {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .mobile-stack > *:last-child { border-bottom: none !important; }

  /* AppShell topbar wraps and compacts */
  .app-topbar {
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .app-topbar > div:first-child { gap: 16px !important; }
  .app-topbar nav { gap: 0 !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .nav-tab { padding: 8px 10px !important; font-size: 10px !important; gap: 5px !important; }
  .nav-tab span:not(.nav-badge) { display: inline; }
  .search-box { width: 150px !important; flex-shrink: 1; min-width: 0; }

  /* Hide chrome that doesn't fit */
  .tweaks-panel-custom { display: none !important; }
}

/* Phone-only — even tighter */
@media (max-width: 720px) {
  html, body, #root { overflow: auto !important; height: auto !important; min-height: 100% !important; }

  /* AppShell becomes a vertical document */
  .app-shell {
    overflow: visible !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  .app-shell > div:not(.app-topbar) {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Topbar — two rows: logo+nav on top, controls on bottom */
  .app-topbar { padding: 10px 14px !important; }
  .app-topbar > div:last-child > div:nth-last-child(2) { display: none !important; } /* divider */
  .app-topbar > div:last-child > div:last-child > div:last-child { display: none !important; } /* user name+plan text */

  /* Hide nav labels, keep icons + badges on phone */
  .nav-tab span:not(.nav-badge) { display: none !important; }
  .nav-tab { padding: 8px !important; }
  .nav-badge { padding: 1px 4px !important; }

  /* Display sections (KPI rows, breakdowns) → 2 cols max */
  [style*="grid-template-columns: repeat(5"],
  [style*="gridTemplateColumns: 'repeat(5"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Display headings shrink */
  .t-display { font-size: 48px !important; line-height: 1 !important; }
  .t-h1 { font-size: 28px !important; }

  /* Big numbers shrink */
  .t-num[style*="font-size: 88"],
  .t-num[style*="font-size: 96"] {
    font-size: 48px !important;
  }
  .t-num[style*="font-size: 52"],
  .t-num[style*="font-size: 44"] {
    font-size: 32px !important;
  }

  /* Buttons & pills more touchable */
  .btn { min-height: 36px; }
  .btn-sm { min-height: 30px; }
  .pill { min-height: 22px; }

  /* Resume "paper" padding scales down */
  .doc-paper { padding: 28px 22px !important; }

  /* PrototypeShell — rail becomes a drawer that overlays */
  .proto-shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  .proto-shell > aside {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    z-index: 500 !important;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .proto-shell[data-rail-open="true"] > aside { transform: translateX(0); }
  .proto-shell > aside button[title="Open rail"] { display: none !important; }

  /* Floating menu button on phone */
  .proto-mobile-menu {
    position: fixed !important;
    top: 14px; left: 14px; z-index: 400;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    color: var(--text);
    width: 40px; height: 40px;
    display: flex !important;
    align-items: center; justify-content: center;
    cursor: pointer;
  }
  .proto-shell[data-rail-open="true"] .proto-mobile-menu { display: none !important; }

  /* Wide tables in Matches → card-ish */
  .matches-table-row { grid-template-columns: 36px 1fr 90px !important; gap: 10px !important; }
  .matches-table-row .col-hide-mobile { display: none !important; }

  /* PDF preview modal — full screen, smaller padding */
  .pdf-modal-page { padding: 28px 24px !important; max-width: 100% !important; }

  /* Onboarding footer rail — wrap */
  .onb-footer { flex-direction: column !important; gap: 4px !important; height: auto !important; padding: 8px 14px !important; text-align: center; }
  .onb-footer span { font-size: 9px !important; }
}

/* Tablet-specific (between 720 and 1024) */
@media (max-width: 1024px) and (min-width: 721px) {
  /* Keep nav labels but reduce */
  .nav-tab span:not(.nav-badge) { font-size: 10px; }

  /* 3-col grids → 2-col */
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="gridTemplateColumns: 'repeat(5"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================
   APPLY/OS — Smooth resize layer
   Makes the layout react gracefully while the user drags the
   browser window narrower, not only at hard mobile breakpoints.
   - Unlocks the locked-viewport shell so the page can scroll
     vertically as soon as content exceeds the window.
   - Allows horizontal scroll on the topbar nav and other long
     rows instead of clipping.
   - Engages a few collapses earlier so columns reflow before
     they overlap.
   ========================================================== */

/* From "below standard desktop" all the way down to phone.
   1280px catches typical "shrink the window" usage. */
@media (max-width: 1280px) {
  /* Unlock vertical scroll on the whole shell — content grows, page scrolls. */
  html, body, #root {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
  }
  .app-shell,
  .proto-shell {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  /* Inner panels stop forcing their own scroll-traps */
  .app-shell > div:not(.app-topbar) {
    min-height: 0 !important;
  }

  /* Topbar can wrap if it runs out of room */
  .app-topbar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 56px !important;
    row-gap: 6px;
  }
  .app-topbar nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .app-topbar nav::-webkit-scrollbar { display: none; }

  /* Any long horizontal row should scroll rather than clip */
  .matches-table-row { overflow-x: auto; }
}

/* Mid-range — start collapsing rigid 2-col splits before things overlap.
   Sits BETWEEN the design's 1024 tablet rules and full desktop. */
@media (max-width: 1180px) {
  /* Inline 2-column layouts shrink to single column */
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Fixed wide sidebars stack */
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns: 300px"],
  [style*="grid-template-columns: 308px"] {
    grid-template-columns: 1fr !important;
  }
  /* Search box shrinks before it disappears at 1024px */
  .search-box { width: 180px !important; }
}

/* ==========================================================
   APPLY/OS — Fluid polish layer
   Final pass to make the page reflow smoothly at every width
   the way a professionally-built responsive site does, instead
   of clipping content when fixed widths exceed the viewport.
   Applies at ALL widths (no media query): it uses clamp() and
   min-width:0 — both safe everywhere and silent on desktop.
   ========================================================== */

/* ---------- 1. NO HORIZONTAL OVERFLOW EVER ----------
   The page must never need a horizontal scroll bar. */
html, body, #root {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ---------- 2. FLEX & GRID CHILDREN MUST BE ABLE TO SHRINK ----------
   The single most important rule. Flex/grid items default to
   `min-width: auto` which means "do not shrink below content
   intrinsic size". That's what causes overflow when the window
   narrows. Reset to 0 so they actually flex.
   Exempt form controls so inputs keep their usable min width.
   NOTE: only `min-width: 0` is set globally. `min-height: 0` was
   tried here too but it crushed every flex-column child whose
   parent had a constrained height — most visibly the resume
   preview pane in OnbUpload, where the section blocks shrank to
   zero and their text overlapped each other. Vertical min-height
   resets are applied surgically by the responsive media queries
   above instead. */
#root *:not(input):not(select):not(textarea):not(button):not(.kbd):not(.nav-badge) {
  min-width: 0;
}

/* Grid columns declared as `1fr` (which is shorthand for
   minmax(auto,1fr)) can't shrink past content either. There's
   no global way to rewrite inline `1fr 1fr ...` to
   `minmax(0,1fr) ...`, but combined with rule #2 above the
   children inside will shrink, which is usually enough. */

/* ---------- 3. MEDIA NEVER OVERFLOWS ITS CONTAINER ---------- */
img, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}
/* SVG with explicit width attribute (logos, icons) keep their size. */

/* ---------- 4. LONG TEXT WRAPS INSTEAD OF PUSHING THE LAYOUT ---------- */
.t-body, .t-small, .t-h1, .t-display, .t-num, .t-label,
p, h1, h2, h3, h4, h5, h6, li, td, th,
.card-kb, .nav-tab {
  overflow-wrap: anywhere;
  word-break: normal;
}
/* Truncate single-line nowrap labels with ellipsis instead of pushing */
[style*="white-space: nowrap"]:not(.btn):not(.pill):not(.nav-badge):not(.kbd) {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

/* ---------- 5. FLUID TYPOGRAPHY ----------
   clamp(min, preferred, max) — smooth scaling at every width,
   no jarring step at media-query boundaries. */
.t-display {
  font-size: clamp(34px, 6.5vw, 88px) !important;
  line-height: clamp(0.95, 1vw + 0.9, 1) !important;
}
.t-h1 {
  font-size: clamp(22px, 3.2vw, 44px) !important;
}

/* Big inline KPI numbers (used in dashboards/score readouts) */
[style*="font-size: 96px"] { font-size: clamp(42px, 7vw, 96px) !important; }
[style*="font-size: 88px"] { font-size: clamp(40px, 6.5vw, 88px) !important; }
[style*="font-size: 64px"] { font-size: clamp(32px, 5vw, 64px) !important; }
[style*="font-size: 52px"] { font-size: clamp(26px, 4vw, 52px) !important; }
[style*="font-size: 44px"] { font-size: clamp(22px, 3.2vw, 44px) !important; }

/* ---------- 6. FLUID CONTAINER PADDINGS ----------
   The same paddings the rest of the stylesheet steps down at
   media breakpoints, but interpolated continuously so they
   shrink smoothly during a window drag. */
[style*="padding: 80px 60px"] { padding: clamp(20px, 4vw, 80px) clamp(16px, 3vw, 60px) !important; }
[style*="padding: 60px 80px"] { padding: clamp(20px, 3vw, 60px) clamp(16px, 4vw, 80px) !important; }
[style*="padding: 60px 60px"] { padding: clamp(20px, 3vw, 60px) !important; }
[style*="padding: 64px 72px"] { padding: clamp(22px, 3vw, 64px) clamp(18px, 3.5vw, 72px) !important; }
[style*="padding: 60px 70px"] { padding: clamp(20px, 3vw, 60px) clamp(18px, 3.5vw, 70px) !important; }
[style*="padding: 40px 40px"] { padding: clamp(16px, 2.5vw, 40px) !important; }
[style*="padding: 32px 40px"] { padding: clamp(16px, 2vw, 32px) clamp(16px, 2.5vw, 40px) !important; }
[style*="padding: 28px 40px"] { padding: clamp(14px, 2vw, 28px) clamp(16px, 2.5vw, 40px) !important; }
[style*="padding: 22px 20px"] { padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.6vw, 20px) !important; }

/* ---------- 7. FLEX ROWS THAT MUST WRAP WHEN NARROW ----------
   Inline flex rows declared without flex-wrap will refuse to
   wrap their children. Force them to wrap so they reflow. */
[style*="display: flex"][style*="justify-content: space-between"]:not([style*="flex-wrap"]) {
  flex-wrap: wrap;
}

/* ---------- 8. AUTO-FILL CARD GRIDS — TIGHTER MIN ----------
   Cards with minmax(360px,1fr) won't fit on narrow screens and
   force horizontal scroll. Make the min responsive. */
[style*="minmax(360px"],
[style*="minmax(320px"],
[style*="minmax(300px"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
}
[style*="minmax(260px"],
[style*="minmax(240px"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
}

/* ---------- 9. TABLES & MATRIX LAYOUTS — ALLOW HORIZONTAL SCROLL ----------
   For data tables that genuinely need a min width, scroll
   inside the row rather than the whole page. */
.matches-table-row {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 10. CO-LOGO & ICON BOXES KEEP THEIR SHAPE ----------
   These are intentionally fixed-size; rule #2 exempted them
   via :not() but make it explicit. */
.co-logo, .nav-badge, .kbd, .match-ring { flex-shrink: 0; }

/* ==========================================================
   APPLY/OS — Matches screen responsive layout
   Default grid: 44px | 1fr (role) | 160 (loc) | 120 (sal) | 70 (posted) | 110 (match) | 90 (preview)
   That's 594px of fixed columns + the role column. On anything
   narrower than ~1100px (especially with the 220px filter rail
   open) the role column collapses to nothing and content
   visually overlaps. These rules progressively drop columns and
   merge the dropped data into the role cell's narrow meta line.
   ========================================================== */

/* On narrow viewports the filter rail becomes a drawer instead
   of eating layout width — it overlays the list. */
@media (max-width: 1100px) {
  .matches-shell .matches-filter-rail.is-open {
    position: absolute !important;
    top: 0; bottom: 0; left: 0;
    z-index: 30;
    width: 240px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  }
}

/* Mid viewport — drop Salary + Posted, keep Location + Match.
   Also drop the FILTERS button text (keep icon) if header is tight. */
@media (max-width: 1024px) {
  .matches-row {
    grid-template-columns: 36px minmax(0, 1fr) 130px 100px 70px !important;
    padding-left: 16px !important; padding-right: 16px !important;
    gap: 12px !important;
  }
  .matches-row .col-salary,
  .matches-row .col-posted {
    display: none !important;
  }
}

/* Tablet — drop Location column too; data moves into the role
   meta line under the title. Keep Match + preview arrow. */
@media (max-width: 820px) {
  .matches-row {
    grid-template-columns: 30px minmax(0, 1fr) 90px 60px !important;
    gap: 10px !important;
  }
  .matches-row .col-location {
    display: none !important;
  }
  .matches-row .row-meta-narrow {
    display: block !important;
  }
}

/* Phone — drop Match bar header label and show only № / role / arrow.
   Match score still appears inside the role cell on hover/tap. */
@media (max-width: 560px) {
  .matches-row {
    grid-template-columns: 24px minmax(0, 1fr) 40px !important;
    padding-left: 12px !important; padding-right: 12px !important;
    gap: 8px !important;
  }
  .matches-row .col-match {
    display: none !important;
  }
  .matches-shell .matches-filter-rail.is-open {
    width: 100% !important;
  }
}

/* ==========================================================
   APPLY/OS — Segmented row (amber border)
   Used by REMOTE-POLICY (On-site / Hybrid / Remote) and the
   LEVEL row (Intern → Lead+) in the onboarding. On wide screens
   the buttons sit in a row with vertical dividers via inline
   `borderRight`. When the global responsive layer collapses the
   grid to a single column, the vertical dividers disappear and
   the segments lose their separation — this layer swaps them
   for horizontal dividers so the rhythm stays readable.
   ========================================================== */

/* Tighten typography a touch before we stack, so the row holds
   a row layout a bit longer at narrow widths (professional sites
   typically shrink text before they collapse). */
@media (max-width: 900px) {
  .seg-amber > button {
    font-size: 10px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    letter-spacing: 0.04em !important;
  }
}

/* When the global mobile rule (`max-width: 720px`) collapses the
   grid to one column, repaint dividers as horizontal lines. */
@media (max-width: 720px) {
  .seg-amber > button {
    border-right: none !important;
    border-bottom: 1px solid #F5B800 !important;
    padding: 12px 6px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }
  .seg-amber > button:last-child {
    border-bottom: none !important;
  }
}