/* Jobs & Bids — Apple-style. Clean white, generous space, snappy. */

:root {
  --bg:        #ffffff;
  --bg-soft:   #fbfbfd;
  --panel:     #ffffff;
  --rule:      #d2d2d7;
  --rule-soft: #ebebee;
  --ink:       #1d1d1f;
  --ink-soft:  #424245;
  --muted:     #6e6e73;
  --muted-2:   #86868b;
  --accent:    #0071e3;
  --accent-dk: #0058b9;
  --green:     #2db14b;
  --warn:      #b8211a;
  --radius:    18px;
  --radius-s:  12px;
  --radius-pill: 980px;
  --shadow-1:  0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --shadow-2:  0 4px 12px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Display",
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- topbar (Apple-style sticky) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--rule-soft);
}
/* Frosted blur lives on a pseudo-element so .topbar does NOT become the
   containing block for the fixed mobile drawer + backdrop. Previously the
   blur trapped them, so the dim overlay only covered the 52px bar and the
   open menu appeared to overlap page content. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.topbar > * { max-width: 1200px; margin: 0 auto; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 52px;
}
.brand {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.topbar a { color: var(--ink); text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 2rem; }
.topbar nav a {
  color: var(--ink);
  font-size: .85rem;
  font-weight: 400;
  opacity: .88;
  transition: opacity .15s ease;
}
.topbar nav a:hover { opacity: 1; text-decoration: none; }
.topbar nav a.cta {
  background: var(--ink);
  color: var(--bg);
  padding: .35rem .9rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: .82rem;
  opacity: 1;
}
.topbar nav a.cta:hover { background: var(--ink-soft); }

/* (Old hidden-link rule removed — see hamburger CSS at end of file for the
   real responsive nav behavior at < 900px) */

/* ---------- layout ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: 2.25rem 2rem 6rem; }
@media (max-width: 720px) { .page { padding: 1.5rem 1.2rem 4rem; } }

.footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--rule-soft);
  padding: 3rem 2rem 3rem;
  text-align: center;
  color: var(--muted);
}
.footer .footlinks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
  margin-bottom: 1.4rem;
}
.footer .footlinks a {
  color: var(--ink);
  font-size: .85rem;
  font-weight: 400;
  opacity: .9;
}
.footer .footlinks a:hover { opacity: 1; text-decoration: none; }
.footer small { color: var(--muted-2); font-size: .78rem; }

/* ---------- hero ---------- */
.hero {
  text-align: center;
  padding: 2.5rem 0 4rem;
}
.hero .eyebrow {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 1rem;
  font-weight: 500;
}
.hero h1 {
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 auto 1.4rem;
  color: var(--ink);
  max-width: 12ch;
}
.hero h1 .accent {
  display: block;
  background: linear-gradient(180deg, var(--ink) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .lede {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 2rem;
  line-height: 1.5;
  font-weight: 400;
}
.hero .ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- buttons (Apple pill style) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.6rem;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-family: inherit;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }

.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--ink-soft); }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }

.btn.block { display: flex; width: 100%; }
.btn.big { padding: 1.05rem 2.2rem; font-size: 1.05rem; }

.btn.link {
  background: transparent;
  color: var(--accent);
  padding: 0;
  border: 0;
  border-radius: 0;
  font-weight: 500;
}
.btn.link:hover { text-decoration: underline; }

/* ---------- trades strip ---------- */
.trades-strip {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  margin: 4rem 0;
  text-align: center;
}
.trades-strip .label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-weight: 500;
}
.trade-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.trade-tile {
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-s);
  padding: 1.3rem .6rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: transform .15s ease, border-color .15s ease;
}
.trade-tile:hover { transform: translateY(-2px); border-color: var(--rule); }
@media (max-width: 900px) { .trade-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .trade-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- section headers ---------- */
.section-eyebrow {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .8rem;
  font-weight: 500;
}
.section-title {
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 2.5rem;
}

/* ---------- pricing tiers ---------- */
.tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0 4rem;
}
.tier {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 2.4rem 2rem 2rem;
  position: relative;
  transition: transform .2s ease;
}
.tier:hover { transform: translateY(-4px); }
.tier.featured {
  background: var(--ink);
  color: var(--bg);
}
.tier.featured::before {
  content: "Best value";
  position: absolute;
  top: 1.4rem; right: 1.5rem;
  background: rgba(255,255,255,.15);
  color: var(--bg);
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tier h2 {
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  margin: 0 0 .4rem;
}
.tier .price {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 1rem 0 1.5rem;
  line-height: 1;
}
.tier .price small {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}
.tier.featured .price small { color: rgba(255,255,255,.7); }
.tier .price-yearly {
  margin: -1rem 0 1.5rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
}
.tier .price-yearly strong { color: var(--ink); font-weight: 700; }
.tier.featured .price-yearly { color: rgba(255,255,255,.78); }
.tier.featured .price-yearly strong { color: var(--bg); }
.tier ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.tier li {
  padding: .55rem 0;
  font-size: .96rem;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  color: var(--ink-soft);
}
.tier.featured li { color: rgba(255,255,255,.85); }
.tier.featured li strong { color: var(--bg); }
.tier li::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
  font-size: .95rem;
}
.tier.featured li::before { color: #4cd964; }
.tier .btn { width: 100%; }
.tier.featured .btn.primary { background: var(--bg); color: var(--ink); }
.tier.featured .btn.primary:hover { background: #f0f0f0; }

@media (max-width: 720px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 3rem 2.5rem;
  margin: 5rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band-title {
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
  color: var(--bg);
  margin: 0 0 .6rem;
  line-height: 1.1;
}
.cta-band-sub {
  color: rgba(255,255,255,.75);
  margin: 0;
  max-width: 580px;
  font-size: 1rem;
}
.cta-band .btn.primary {
  background: var(--bg); color: var(--ink); white-space: nowrap;
}
.cta-band .btn.primary:hover { background: #f0f0f0; }

/* ---------- how-it-works steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 2rem 0 4rem;
}
.step {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
}
.step-num {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1.4rem;
  display: block;
  letter-spacing: -0.01em;
}
.step h3 {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  margin: 0 0 .5rem;
  color: var(--ink);
}
.step p { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- prose pages ---------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose h1 {
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 1.2rem;
  line-height: 1.1;
}
.prose h2 {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 3rem 0 .8rem;
}
.prose h3 {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 1.5rem 0 .4rem;
  letter-spacing: -0.01em;
}
.prose p, .prose li { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .5rem; }
.prose .lede {
  font-size: 1.2rem;
  color: var(--muted);
  margin: 0 0 2rem;
  font-weight: 400;
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--rule-soft);
  padding: 1.5rem 0;
}
.faq-item h3 {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 .7rem;
  letter-spacing: -0.015em;
}
.faq-item p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }

/* ---------- feed stats ---------- */
.feed-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: 1.1rem 0 1.4rem;
}
.stat-block {
  background: var(--bg-soft);
  border-radius: var(--radius-s);
  padding: .5rem .65rem;
}
.stat-num {
  display: block;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-label {
  display: block;
  font-size: .66rem;
  color: var(--muted);
  margin-top: .18rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) { .feed-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- paywall banner ---------- */
.paywall-banner {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.paywall-banner div { font-size: .98rem; max-width: 700px; color: rgba(255,255,255,.85); }
.paywall-banner strong { color: var(--bg); }
.paywall-banner .btn { white-space: nowrap; }
.paywall-banner .btn.primary { background: var(--bg); color: var(--ink); }
.paywall-banner .btn.primary:hover { background: #f0f0f0; }
@media (max-width: 720px) {
  .paywall-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- feed cards (Apple-clean) ---------- */
.feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
@media (max-width: 860px) { .feed { grid-template-columns: 1fr; } }

.feed-card {
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feed-card:hover {
  transform: translateY(-3px);
  border-color: var(--rule);
  box-shadow: var(--shadow-1);
}

.feed-card .feed-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.trade-chip {
  display: inline-flex;
  align-items: center;
  background: var(--bg-soft);
  color: var(--ink);
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-right: .4rem;
}
.feed-card .feed-meta {
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: -0.005em;
}

.feed-title {
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 .35rem;
}
.feed-agency {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.feed-desc {
  color: var(--ink-soft);
  font-size: .95rem;
  margin: 0 0 1.2rem;
  line-height: 1.5;
}

.feed-locked-bar {
  margin-top: auto;
  background: var(--bg-soft);
  border-radius: var(--radius-s);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.feed-locked-bar .summary {
  font-size: .85rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.lock-glyph {
  width: 14px; height: 14px;
  display: inline-block;
  flex-shrink: 0;
}
.feed-locked-bar .summary strong { color: var(--ink); font-weight: 600; }

.feed-locked-bar .btn {
  padding: .5rem 1rem;
  font-size: .82rem;
  white-space: nowrap;
}

/* ---------- signup form ---------- */
.formwrap { max-width: 560px; margin: 0 auto; }
.formwrap h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1.1;
}
.formwrap .lede { color: var(--muted); margin-bottom: 2rem; font-size: 1.1rem; }

.signup-form label {
  display: block;
  font-weight: 500;
  font-size: .9rem;
  color: var(--ink);
  margin: 1.2rem 0;
  letter-spacing: -0.005em;
}
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="tel"],
.signup-form input[type="password"] {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
  margin-top: .4rem;
  border-radius: var(--radius-s);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.signup-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,113,227,.15);
}
.signup-form small { font-weight: 400; color: var(--muted); }

fieldset {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-s);
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
  background: var(--bg-soft);
}
fieldset legend {
  padding: 0 .5rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.radio, .check {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .55rem 0; cursor: pointer;
  color: var(--ink); font-size: .98rem; font-weight: 400;
}
.radio input, .check input { margin-top: .35rem; accent-color: var(--ink); }

.err {
  color: var(--warn); font-size: .85rem; font-weight: 500; margin-top: .4rem;
}
.err.banner {
  background: #fdecec;
  border: 1px solid #f5cdc8;
  padding: .85rem 1.1rem;
  border-radius: var(--radius-s);
  margin-bottom: 1.5rem;
}

.confirm { text-align: center; padding: 5rem 1rem; max-width: 600px; margin: 0 auto; }
.confirm h1 {
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
}

.fineprint { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 1.5rem; }

section + section { margin-top: 4rem; }

/* ---------- admin "view as" banner ---------- */
.admin-banner {
  background: #fff8e1;
  border: 1px solid #f0d480;
  border-radius: var(--radius-s);
  padding: .9rem 1.2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: .9rem;
}
.admin-banner strong { color: #604c00; }
.admin-switches { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.admin-switches span { color: var(--muted); font-size: .85rem; margin-right: .4rem; }
.admin-switches .adm {
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .82rem;
  color: var(--ink);
  border: 1px solid var(--rule);
  background: var(--bg);
  text-decoration: none;
}
.admin-switches .adm.on {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.admin-switches .adm.exit { border-color: #f0d480; color: #b8211a; }
.admin-switches .adm:hover { text-decoration: none; }

/* ---------- feed filters ---------- */
.feed-filters {
  background: var(--bg-soft);
  border-radius: var(--radius-s);
  padding: 1rem 1.3rem;
  margin: 1rem 0 2rem;
}
.feed-filters form {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.filter-group { display: flex; align-items: center; gap: .6rem; }
.filter-group label {
  font-size: .85rem;
  color: var(--muted);
  font-weight: 500;
}
.filter-group select {
  padding: .5rem .8rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
}
.filter-group select:focus { outline: none; border-color: var(--accent); }

/* ---------- unredacted bid details (Basic/Pro view) ---------- */
.feed-desc.full { color: var(--ink); }

/* Collapsible long descriptions — pure CSS "Show more" (no JS) */
.desc-cb { position: absolute; left: -9999px; opacity: 0; }
.feed-desc.full.clampable {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .4rem;
}
.desc-cb:checked ~ .feed-desc.full.clampable {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.desc-toggle {
  display: inline-block;
  cursor: pointer;
  color: var(--accent);
  font-size: .85rem;
  font-weight: 600;
  margin: 0 0 1.2rem;
  user-select: none;
}
.desc-toggle::after { content: "Show more \2193"; }
.desc-cb:checked ~ .desc-toggle::after { content: "Show less \2191"; }
.feed-details {
  margin: 1rem 0 1.2rem;
  padding: 1rem 1.1rem;
  background: var(--bg-soft);
  border-radius: var(--radius-s);
  font-size: .9rem;
}
.feed-details > div {
  display: flex;
  justify-content: space-between;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule-soft);
  gap: 1rem;
}
.feed-details > div:last-child { border-bottom: 0; }
.feed-details dt { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.feed-details dd { margin: 0; color: var(--ink); text-align: right; max-width: 60%; }
.upgrade-row dd { color: var(--muted); }
.upgrade-tag {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: .1rem .55rem;
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- state list in pricing card ---------- */
.tier .state-list {
  display: block;
  font-family: -apple-system, "SF Mono", Menlo, Monaco, monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
  margin-top: .35rem;
  line-height: 1.4;
}
.tier:not(.featured) .state-list { color: var(--muted); }

/* ---------- Misc trade chip — visually distinct from real trade chips ---------- */
.trade-chip[data-trade="Misc"],
.trade-chip.misc {
  background: #f5f5f7;
  color: #6e6e73;
  border: 1px dashed #d2d2d7;
}

/* ---------- trade tabs (replaces the old filter dropdown) ---------- */
.feed-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: .75rem 0 1rem;
}
.feed-controls .status-toggle { margin: 0; }
.sort-field { display: inline-flex; align-items: center; gap: .4rem; }
.sort-label { font-size: .8rem; color: var(--muted); }
.sort-field .sort-pick { margin: 0; }
.trade-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 720px) {
  .trade-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .trade-tabs .trade-tab { text-align: center; white-space: normal; }
}
.trade-tab {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-soft);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.trade-tab:hover { background: var(--rule-soft); text-decoration: none; }
.trade-tab.on { background: var(--ink); color: var(--bg); }
.trade-tab.on:hover { background: var(--ink-soft); }
.trade-tab.misc { font-style: italic; color: var(--muted); }
.trade-tab.misc.on { background: var(--muted); color: var(--bg); font-style: normal; }
.trade-tabs-spacer { flex: 1; }
.sort-pick {
  padding: .45rem .9rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
}
.sort-pick:focus { outline: none; border-color: var(--accent); }

/* ---------- resources page ---------- */
.resource-block { margin: 4rem 0; }
.embed-frame {
  margin: 1.5rem 0 .5rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
}
.embed-frame iframe { display: block; }
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.resource-card {
  display: block;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-s);
  padding: 1.3rem 1.4rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
.resource-card:hover { transform: translateY(-2px); border-color: var(--rule); text-decoration: none; }
.resource-card h3 {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.resource-card p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
}
@media (max-width: 720px) { .resource-grid { grid-template-columns: 1fr; } }

/* ---------- dashboard ---------- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.dash-card {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem;
}
.dash-card-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: .5rem;
}
.dash-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.dash-card-sub {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--muted);
}
.dash-card-sub a { color: var(--accent); }
@media (max-width: 720px) { .dash-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- admin status pills ---------- */
.status-pill {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: capitalize;
}
.status-pill.status-active { background: #d8f0e3; color: #1f6b3e; }
.status-pill.status-free   { background: #e8e8eb; color: #424245; }
.status-pill.status-hold   { background: #fff1cc; color: #6e4d00; }
.status-pill.status-banned { background: #fdecec; color: #95221c; }

.status-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: .4rem;
}
.status-radio input { margin: 0; accent-color: var(--ink); }

/* ---------- nav: current page indicator + quiet logout ---------- */
.topbar nav a.current {
  color: var(--ink);
  opacity: 1;
  font-weight: 600;
  position: relative;
}
.topbar nav a.current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink);
}
.topbar nav a.quiet {
  color: var(--muted);
  font-weight: 400;
  opacity: .8;
  background: transparent;
  padding: 0;
}
.topbar nav a.quiet:hover { color: var(--ink); opacity: 1; }

/* ---------- email history list (replaces the cramped table) ---------- */
.email-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.email-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.email-row:last-child { border-bottom: 0; }
.email-when {
  font-size: .85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.email-body { min-width: 0; }  /* lets long titles wrap */
.email-title {
  display: block;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.005em;
  word-break: break-word;
  border-bottom: 0;
}
.email-title:hover { color: var(--accent); text-decoration: none; }
.email-meta {
  font-size: .85rem;
  color: var(--muted);
  margin-top: .35rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.email-meta .dot { color: var(--rule); }
.email-status {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .1rem .5rem;
  border-radius: var(--radius-pill);
}
.email-status.status-ok   { background: #d8f0e3; color: #1f6b3e; }
.email-status.status-fail { background: #fdecec; color: #95221c; }

@media (max-width: 720px) {
  .email-row { grid-template-columns: 1fr; gap: .5rem; }
}

/* ---------- login tabs ---------- */
.login-toggle {
  display: flex;
  gap: .5rem;
  background: var(--bg-soft);
  padding: .3rem;
  border-radius: var(--radius-pill);
  margin: 1.5rem 0;
}
.login-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: .55rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-family: inherit;
  transition: background-color .15s ease, color .15s ease;
}
.login-tab:hover { color: var(--ink); }
.login-tab.on {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ---------- missing description fallback ---------- */
.feed-desc-missing {
  background: var(--bg-soft);
  border-left: 3px solid var(--rule);
  padding: .75rem 1rem;
  color: var(--muted);
  font-size: .92rem;
  margin: 0 0 1rem;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.feed-desc-missing a { color: var(--ink); border-bottom: 1px solid var(--rule); }

/* ---------- 3-tier comparison table ---------- */
.compare-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: .95rem;
}
.compare-table th, .compare-table td {
  padding: .85rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
.compare-table thead th {
  background: var(--bg-soft);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1rem;
  border-bottom: 2px solid var(--ink);
  text-align: center;
}
.compare-table thead th:first-child {
  text-align: left;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.compare-price {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.compare-table td {
  color: var(--ink-soft);
  text-align: center;
}
.compare-table td:first-child {
  text-align: left;
  color: var(--ink);
  font-weight: 500;
  width: 32%;
}
.compare-featured {
  background: #fafaf8 !important;
  color: var(--ink) !important;
  font-weight: 500;
}
.compare-group td {
  background: var(--bg-soft);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: left !important;
  padding: .5rem 1.1rem !important;
}
.row-highlight td {
  background: #fff8e1;
  color: var(--ink);
}
.row-highlight td.compare-featured {
  background: #fff3c2 !important;
}
.compare-table tbody tr:last-child td { border-bottom: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.compare-table tbody tr:last-child .btn { width: 100%; }

/* ============================================================
   Slide-out drawer nav — CSS-only (no JS)
   ============================================================ */

/* Hide the checkbox itself */
.nav-toggle-cb {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* Hamburger button — hidden on wide screens, shown < 1000px.
   Sized and bordered so it clearly reads as a button, not a stray line. */
.nav-toggle {
  display: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  user-select: none;
  z-index: 210;
  transition: background-color .15s ease, border-color .15s ease;
}
.nav-toggle:hover {
  background: var(--rule-soft);
  border-color: var(--ink-soft);
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  transform-origin: center;
}

/* Close button (× inside the drawer) and backdrop — hidden by default */
.nav-close { display: none; }
.nav-backdrop { display: none; }

/* ---------- Narrow screens (≤ 1000px): use the drawer ---------- */
@media (max-width: 1000px) {
  .topbar { position: sticky; }

  /* Show hamburger */
  .nav-toggle { display: inline-flex; }

  /* Backdrop overlay */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 190;
    cursor: pointer;
  }

  /* The nav becomes a right-side drawer */
  .topbar nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    height: 100vh;
    width: 320px;
    max-width: 88vw;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4.5rem 1.5rem 2rem;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .12);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    z-index: 200;
  }

  /* Open state when checkbox is checked */
  .nav-toggle-cb:checked ~ .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-toggle-cb:checked ~ nav {
    transform: translateX(0);
  }

  /* Hamburger morphs to X when checked */
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Close button inside drawer (top-right of the panel) */
  .nav-close {
    display: flex;
    position: absolute;
    top: .8rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--muted);
    font-size: 1.6rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
  }
  .nav-close:hover { background: var(--rule-soft); color: var(--ink); }

  /* Drawer link styling */
  .topbar nav a {
    display: block;
    padding: 1rem .25rem;
    font-size: 1.05rem;
    font-weight: 500;
    opacity: 1;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 0;
    color: var(--ink);
  }
  .topbar nav a:hover { background: var(--bg-soft); }

  /* Current page indicator — left-bar accent */
  .topbar nav a.current {
    color: var(--ink);
    font-weight: 600;
    background: var(--bg-soft);
    border-left: 3px solid var(--ink);
    padding-left: .65rem;
  }
  .topbar nav a.current::after { display: none; }

  /* Sign-up CTA — full-width pill at the bottom */
  .topbar nav a.cta {
    background: var(--ink);
    color: var(--bg);
    text-align: center;
    border-radius: var(--radius-pill);
    padding: .95rem 1rem;
    border-bottom: 0;
    margin-top: 1.2rem;
    font-weight: 600;
    font-size: .95rem;
  }
  .topbar nav a.cta:hover { background: var(--ink-soft); }

  .topbar nav a.quiet { color: var(--muted); }
}

/* Phones — slimmer side padding */
@media (max-width: 480px) {
  .topbar { padding: 0 .9rem; }
}

/* ---------- Active vs Expired toggle ---------- */
.status-toggle {
  display: inline-flex;
  background: var(--bg-soft);
  padding: .25rem;
  border-radius: var(--radius-pill);
  margin: .5rem 0 1rem;
  gap: .15rem;
}
.status-pill-tab {
  display: inline-block;
  padding: .45rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  border: 0;
  transition: background-color .15s ease, color .15s ease;
}
.status-pill-tab:hover { color: var(--ink); text-decoration: none; }
.status-pill-tab.on {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.status-pill-tab.expired.on {
  background: var(--muted);
  color: var(--bg);
}

/* ---------- expired bid card styling ---------- */
.feed-card-expired {
  background: var(--bg-soft);
  opacity: .85;
}
.feed-card-expired .feed-title {
  color: var(--ink-soft);
}
.feed-card-expired:hover { opacity: 1; }
.expired-badge {
  display: inline-block;
  background: var(--muted);
  color: var(--bg);
  padding: .15rem .55rem;
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: .4rem;
  vertical-align: middle;
}


/* Full-width long-field reveal (pre-bid meeting, etc.) — keeps ALL data, packaged cleanly */
.feed-extra { margin: 0 0 1.2rem; }
.feed-extra-label { color: var(--muted); font-weight: 500; font-size: .85rem; margin-bottom: .25rem; }
.feed-extra-body { color: var(--ink); font-size: .9rem; line-height: 1.5; }
.reveal-cb { position: absolute; left: -9999px; opacity: 0; }
.reveal-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reveal-cb:checked ~ .reveal-clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
.reveal-toggle { display: inline-block; cursor: pointer; color: var(--accent); font-size: .82rem; font-weight: 600; margin-top: .35rem; user-select: none; }
.reveal-toggle::after { content: "Show full details \2193"; }
.reveal-cb:checked ~ .reveal-toggle::after { content: "Show less \2191"; }


/* Feed pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 2.5rem 0 0; flex-wrap: wrap; }
.pager-info { color: var(--muted); font-size: .9rem; }


/* Search box + JB-ID */
.feed-search { display: flex; gap: .6rem; align-items: center; margin: 0 0 1.2rem; flex-wrap: wrap; }
.feed-search input[type="search"] { flex: 1; min-width: 220px; padding: .6rem .9rem; border: 1px solid var(--rule); border-radius: var(--radius-s); font-size: 16px; background: var(--bg); color: var(--ink); }
.feed-search input[type="search"]:focus { outline: none; border-color: var(--accent); }
.feed-search-clear { color: var(--muted); font-size: .85rem; }
.search-results-info { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.jb-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); font-size: .78rem; letter-spacing: .02em; }

/* ===== Uniform clickable cards + detail modal ===== */
.feed-card { cursor: pointer; min-height: 210px; }
.feed-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feed-card .feed-row-top { gap: .5rem; }
.card-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.feed-card .feed-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.feed-card .feed-agency { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-deadline { font-size: .85rem; color: var(--ink); margin: .55rem 0 .45rem; }
.card-deadline-label { color: var(--muted); }
.card-scope {
  color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin: 0 0 1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-cue { margin-top: auto; color: var(--accent); font-weight: 600; font-size: .85rem; }

.bid-modal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 5vh 1rem; overflow-y: auto;
}
.bid-modal.open { display: flex; }
.bid-modal-panel {
  position: relative; background: var(--bg); border-radius: var(--radius);
  max-width: 640px; width: 100%; padding: 2rem 2rem 2.2rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.28); margin-bottom: 5vh;
}
.modal-close {
  position: absolute; top: .8rem; right: 1rem; width: 36px; height: 36px;
  border: none; border-radius: 50%; background: var(--bg-soft); color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--rule-soft); color: var(--ink); }
.modal-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 2rem .7rem 0; }
.modal-title { font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 .3rem; }
.modal-agency { color: var(--muted); margin-bottom: 1.2rem; }
.modal-details { margin: 0 0 1.2rem; padding: 1rem 1.1rem; background: var(--bg-soft); border-radius: var(--radius-s); }
.modal-details > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule-soft); }
.modal-details > div:last-child { border-bottom: 0; }
.modal-details dt { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.modal-details dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.modal-section { margin: 0 0 1.2rem; }
.modal-section-label { color: var(--muted); font-weight: 500; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.modal-desc { color: var(--ink); font-size: .95rem; line-height: 1.55; margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.modal-locked { background: var(--bg-soft); border-radius: var(--radius-s); padding: 1.2rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.modal-links { margin-top: 1rem; }
/* Self-contained issuing-agency info block (replaces outbound source links) */
.modal-agency-block .agency-card { background: var(--bg-soft); border-radius: var(--radius-s); padding: .9rem 1.1rem; }
.agency-card .agency-name { font-weight: 600; margin-bottom: .5rem; line-height: 1.3; overflow-wrap: anywhere; }
.agency-card .agency-loc { color: var(--muted); font-weight: 400; }
.agency-card .agency-line { font-size: .92rem; line-height: 1.5; padding: .12rem 0; overflow-wrap: anywhere; word-break: break-word; }
.agency-card .agency-tag { display: inline-block; min-width: 4.2rem; color: var(--muted); font-size: .8rem; }
.agency-card .agency-line a { color: var(--accent); }
@media (max-width: 640px) {
  .bid-modal { padding: 2vh .6rem; }
  .bid-modal-panel { padding: 1.6rem 1.1rem; }
  .modal-title { font-size: 1.2rem; }
}


/* --- Bid pipeline / stages --- */
.stage-badge {
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; padding:.16rem .55rem; border-radius:999px;
  border:1px solid transparent; white-space:nowrap; line-height:1.3;
}
.stage-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.4rem; vertical-align:middle; }
.stage-interested { background:#eef0f4; color:#3a3a40; border-color:#dfe2e8; }
.stage-bidding    { background:#e6f0ff; color:#0058b9; border-color:#cfe1ff; }
.stage-submitted  { background:#fff3e0; color:#9a5b00; border-color:#ffe0b0; }
.stage-won        { background:#e4f7ea; color:#1a7f37; border-color:#bfead0; }
.stage-lost       { background:#f2f2f4; color:#86868b; border-color:#e2e2e6; }
.stage-dot.stage-interested { background:#9a9aa2; }
.stage-dot.stage-bidding    { background:#0071e3; }
.stage-dot.stage-submitted  { background:#ff9f0a; }
.stage-dot.stage-won        { background:#1a7f37; }
.stage-dot.stage-lost       { background:#c2c2c8; }

.modal-pipeline { margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid #e5e5ea; }
.pipe-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:.5rem; }
.stage-picker { display:flex; flex-wrap:wrap; gap:.4rem; }
.stage-picker form { margin:0; }
.stage-opt {
  cursor:pointer; font:inherit; font-size:.8rem; font-weight:600;
  padding:.34rem .72rem; border-radius:999px; border:1px solid #d8d8de;
  background:#fff; color:var(--ink); transition:all .12s ease;
}
.stage-opt:hover { border-color:#b9b9c0; }
.stage-opt.on.stage-interested { background:#3a3a40; color:#fff; border-color:#3a3a40; }
.stage-opt.on.stage-bidding    { background:#0071e3; color:#fff; border-color:#0071e3; }
.stage-opt.on.stage-submitted  { background:#b35900; color:#fff; border-color:#b35900; }
.stage-opt.on.stage-won        { background:#1a7f37; color:#fff; border-color:#1a7f37; }
.stage-opt.on.stage-lost       { background:#86868b; color:#fff; border-color:#86868b; }

.pipe-summary { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.5rem 0 .5rem; }
.pipe-stat { flex:1; min-width:92px; text-align:center; padding:1rem .5rem; border-radius:14px; border:1px solid #e5e5ea; background:#fff; }
.pipe-stat-num { display:block; font-size:1.8rem; font-weight:800; line-height:1; letter-spacing:-.03em; }
.pipe-stat-label { display:block; margin-top:.4rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.pipe-group { margin-top:2.25rem; }
.pipe-group-title { display:flex; align-items:center; gap:.6rem; font-size:1.15rem; margin:0 0 1rem; }
.pipe-group-count { color:var(--muted); font-weight:600; font-size:.95rem; }
.feed-card.no-hover { cursor:default; }

.flashes { margin-bottom:1.25rem; }
.flash { padding:.8rem 1.1rem; border-radius:12px; font-size:.92rem; font-weight:500; margin-bottom:.6rem; }
.flash-warn { background:#fff3e0; color:#9a5b00; border:1px solid #ffe0b0; }
.flash-info, .flash-message, .flash- { background:#e6f0ff; color:#0058b9; border:1px solid #cfe1ff; }

/* ---- signup live price summary ---- */
.price-summary {
  margin: .25rem 0;
  padding: .85rem 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-s);
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.45;
}
.price-summary .ps-save { color: #1a7d33; font-weight: 700; }
.price-summary .ps-note { color: var(--muted); }

/* ---- admin: inline-edit support panel ---- */
.adm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;}
.adm-h2{margin-top:2.6rem;font-size:1.3rem;font-weight:600;}
.adm-h2 small{font-weight:400;color:var(--muted);font-size:.9rem;}
.adm-lbl{width:190px;color:var(--muted);}
.mono{font-family:monospace;font-size:.85rem;}
.adm-edit-table td{vertical-align:middle;}
.editable{cursor:pointer;border-bottom:1px dashed var(--rule);padding:.05rem .15rem;border-radius:4px;transition:background .12s;}
.editable:hover{background:var(--bg-soft);border-bottom-color:var(--accent);}
.editable::after{content:"\270E";font-size:.72rem;color:var(--muted-2);margin-left:.45rem;opacity:0;transition:opacity .12s;}
.editable:hover::after{opacity:1;}
.editable.is-empty{color:var(--muted-2);font-style:italic;}
.inline-editor{font:inherit;padding:.4rem .55rem;border:1px solid var(--accent);border-radius:var(--radius-s);color:var(--ink);background:var(--bg);min-width:220px;max-width:100%;}
.status-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem;}
.adm-hint{font-size:.82rem;color:var(--muted);margin:.3rem 0 0;}
.adm-notes{width:100%;padding:.85rem 1rem;background:var(--bg);border:1px solid var(--rule);color:var(--ink);font-size:1rem;font-family:inherit;border-radius:var(--radius-s);}
.adm-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:3rem;flex-wrap:wrap;}
.btn.danger{background:var(--warn);color:#fff;border:1px solid var(--warn);}
.btn.danger:hover{filter:brightness(1.1);}
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);padding:.7rem 1.3rem;border-radius:var(--radius-pill);font-size:.92rem;font-weight:600;color:#fff;box-shadow:var(--shadow-2);z-index:999;}
.toast.ok{background:#1a7d33;}
.toast.bad{background:var(--warn);}

/* ===== Mobile overflow hardening (2026-06-01) ===== */
/* Raw sam.gov API URLs in scraped descriptions were unbreakable strings that
   forced feed cards wider than the phone screen, overflowing the page sideways
   and making everything render "zoomed out" on mobile. Force long tokens to wrap. */
.feed-title,
.card-scope,
.modal-title,
.modal-desc,
.agency-card .agency-name,
.agency-card .agency-line {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Let cards and their children shrink inside the grid/flex track so nowrap
   agency lines and long titles truncate instead of forcing the page wider
   than the viewport (the real cause of the mobile zoom-out). */
.feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .feed { grid-template-columns: minmax(0, 1fr); } }
.feed-card, .feed-card > * { min-width: 0; }
.feed-card .feed-agency { max-width: 100%; }

/* ---------- contact cell: cleanly marked, tap-to-call (2026-06-01) ---------- */
.modal-details > div.contact-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
.contact-row dd { text-align: left; width: 100%; }
.contact-name { font-weight: 600; color: var(--ink); }
.contact-line { font-size: .92rem; line-height: 1.5; padding: .1rem 0; overflow-wrap: anywhere; word-break: break-word; }
.contact-tag { display: inline-block; min-width: 3.6rem; color: var(--muted); font-size: .8rem; }
.contact-line a { color: var(--accent); }
.contact-none { color: var(--muted); }

/* set-aside shown as a positive green check + code (2026-06-01) */
.setaside-check { color: #2f9e44; font-weight: 700; margin-right: .15rem; }

/* small free-preview note near the title (replaces the big mid-feed banner) */
.free-note {
  font-size: .88rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  padding: .65rem .95rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-s);
}
.free-note a { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- pipeline: notes + stage control (2026-06-01) ---------- */
.pipe-card { display: block; }
.pipe-notes-wrap { display: block; margin: 1rem 0 .25rem; }
.pipe-notes-head { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .35rem; }
.pipe-notes-status { margin-left: .4rem; font-size: .74rem; color: var(--accent); }
.pipe-notes { width: 100%; box-sizing: border-box; resize: vertical; min-height: 2.6em; padding: .55rem .7rem; font: inherit; font-size: .9rem; line-height: 1.45; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-s); }
.pipe-notes:focus { outline: none; border-color: var(--accent); }
.pipe-card-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .85rem; flex-wrap: wrap; }
.stage-field { display: inline-flex; align-items: center; gap: .4rem; }
.stage-field-label { font-size: .8rem; color: var(--muted); }
.pipe-stage-pick { padding: .4rem .7rem; font: inherit; font-size: .85rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-pill); cursor: pointer; }
.pipe-stage-pick:focus { outline: none; border-color: var(--accent); }
.pipe-remove-form { margin: 0; }

/* "Added to pipeline" confirmation in the bid modal (added 20260601) */
.add-pipeline-done { margin-top: .2rem; }
.add-pipeline-msg { color: #1a7f37; font-weight: 600; font-size: .9rem; margin: 0 0 .6rem; }

/* ============================================================
   Auth pages (signup / login) — JB-AUTH-REDESIGN
   ============================================================ */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: 1040px;
  margin: 1rem auto 0;
}
.auth-shell.auth-shell-narrow { max-width: 880px; }

.auth-aside { position: sticky; top: 2rem; }
.auth-aside-title {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: .6rem 0 1rem;
  color: var(--ink);
}
.auth-aside-sub {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.5;
  margin: 0 0 2rem;
  max-width: 32ch;
}
.auth-points { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .85rem; }
.auth-points li {
  display: flex; align-items: flex-start; gap: .7rem;
  color: var(--ink-soft); font-size: 1rem; line-height: 1.4;
}
.auth-points li::before {
  content: "✓"; color: var(--green); font-weight: 800; flex: none; margin-top: .05rem;
}
.auth-aside-foot { color: var(--muted); font-size: .95rem; }

.auth-card {
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 44px -20px rgba(0,0,0,.22);
}
.auth-card .signup-form label.fld { margin: 0 0 1.05rem; }
.auth-card-h { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .4rem; }
.auth-card-p { color: var(--muted); font-size: .98rem; line-height: 1.5; margin: 0 0 1.4rem; }

/* password show/hide */
.pw-field { position: relative; display: block; margin-top: .4rem; }
.pw-field input { margin-top: 0 !important; padding-right: 4.2rem !important; }
.pw-toggle {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--muted);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: .4rem .6rem; border-radius: var(--radius-s);
}
.pw-toggle:hover { color: var(--ink); }

/* plan cards — vertical, Anthropic-style, green accent on paid */
.plan-pick { display: grid; grid-template-columns: 1fr; gap: .7rem; border: 0; background: transparent; padding: 0; margin: 1.5rem 0; }
.plan-pick > legend {
  padding: 0; margin-bottom: .7rem; font-weight: 600; font-size: .9rem; color: var(--ink);
}
.plan-option { display: block; cursor: pointer; position: relative; margin: 0; }
.plan-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-card {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--rule); border-radius: var(--radius-s);
  background: var(--bg);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.plan-radio {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--rule); background: var(--bg);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.plan-main { flex: 1 1 auto; min-width: 0; }
.plan-name { display: block; font-weight: 700; font-size: 1.04rem; color: var(--ink); }
.plan-desc { display: block; color: var(--muted); font-size: .85rem; line-height: 1.35; margin-top: .12rem; }
.plan-price { flex: none; text-align: right; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.plan-price strong { display: block; color: var(--ink); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.plan-price small { color: var(--muted); font-size: .8rem; }

.plan-option:hover .plan-card { border-color: var(--green); }
.plan-option:hover .plan-radio { border-color: var(--green); }

.plan-option--pro .plan-card { border-color: rgba(45,177,75,.5); }

.plan-option input:checked + .plan-card {
  border-color: var(--green);
  box-shadow: 0 0 0 1.5px var(--green), 0 10px 24px -16px rgba(45,177,75,.7);
  background: linear-gradient(0deg, rgba(45,177,75,.06), rgba(45,177,75,.06)), var(--bg);
}
.plan-option input:checked + .plan-card .plan-radio {
  border-color: var(--green); background: var(--green);
  box-shadow: inset 0 0 0 3px var(--bg);
}
.plan-option input:focus-visible + .plan-card { box-shadow: 0 0 0 3px rgba(45,177,75,.4); }

.plan-badge {
  position: absolute; top: -.62rem; right: .85rem; z-index: 1;
  background: var(--green); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: var(--radius-pill);
  box-shadow: 0 3px 8px -2px rgba(45,177,75,.6);
}

/* billing segmented control */
.billing-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
  background: var(--bg-soft); padding: .3rem; border-radius: var(--radius-pill);
  margin: 1.5rem 0; border: 1px solid var(--rule-soft);
}
.seg-opt { margin: 0; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt > span {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1rem; border-radius: var(--radius-pill);
  font-size: .92rem; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg-opt > span em { font-style: normal; color: var(--green); font-weight: 700; font-size: .8rem; }
.seg-opt input:checked + span {
  background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.seg-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,113,227,.25); }

/* trade chips */
.trades-pick .trade-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: .6rem; margin-top: .3rem;
}
.trade-chip { margin: 0; cursor: pointer; padding: 0; }
.trade-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.trade-chip > span {
  display: block; text-align: center; padding: .7rem .6rem;
  border: 1.5px solid var(--rule); border-radius: var(--radius-s);
  font-size: .92rem; font-weight: 500; color: var(--ink-soft);
  transition: border-color .15s, background .15s, color .15s;
}
.trade-chip:hover > span { border-color: var(--muted-2); }
.trade-chip input:checked + span {
  border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 600;
}
.trade-chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(0,113,227,.2); }

.auth-alt { text-align: center; margin-top: 1.2rem; font-size: .92rem; }

@media (max-width: 820px) {
  .auth-shell, .auth-shell.auth-shell-narrow { grid-template-columns: 1fr; gap: 1.25rem; max-width: 560px; }
  .auth-aside { position: static; }
  .auth-aside-sub { max-width: none; margin-bottom: 0; }
  .auth-aside-title { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-bottom: .6rem; }
  /* On phones, hide the long bullet list so the plan picker sits in the first
     screen — headline + subhead still set the context. */
  .auth-aside .auth-points { display: none; }
}

.form-sep { border: 0; border-top: 1px solid var(--rule-soft); margin: 1.6rem 0 .4rem; }


/* ---- comparison table: swipe-to-compare on mobile (JB) ---- */
.compare-hint { display: none; color: var(--muted); font-size: .82rem; text-align: center; margin: 0 0 .5rem; font-weight: 500; }
@media (max-width: 720px) {
  .compare-hint { display: block; }
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 580px; font-size: .9rem; overflow: visible; }
  .compare-table th, .compare-table td { padding: .7rem .8rem; }
  .compare-table td:first-child { width: 44%; }
  .compare-table thead th:first-child,
  .compare-table tbody tr:not(.compare-group) td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--rule-soft);
  }
}

/* Internal quality grade badge — ADMIN ONLY (added 20260602) */
.grade-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  margin-right: .4rem; vertical-align: middle; white-space: nowrap;
  border: 1px solid transparent;
}
.grade-badge.grade-A { background:#e4f7ea; color:#1a7f37; border-color:#bfead0; }
.grade-badge.grade-B { background:#e7f0fe; color:#0b5cad; border-color:#c5dbf7; }
.grade-badge.grade-C { background:#fdf4e3; color:#9a6a00; border-color:#f0e0bb; }
.grade-badge.grade-D { background:#f2f2f4; color:#6e6e73; border-color:#e0e0e4; }

/* ===== Card intelligence (added 20260602) ===== */
.bid-tldr { font-size: 1rem; line-height: 1.5; color: var(--ink); font-weight: 500;
  margin: 0 0 1rem; padding: .8rem 1rem; background: var(--bg-soft); border-radius: 12px; }
/* Urgency banner */
.urgency-banner { font-size:.9rem; padding:.55rem .9rem; border-radius:10px; margin:0 0 1rem; }
.urgency-banner.urgency-today, .urgency-banner.urgency-soon { background:#fdeaea; color:#b3261e; }
.urgency-banner.urgency-near { background:#fdf4e3; color:#9a6a00; }
.urgency-banner.urgency-closed { background:#f2f2f4; color:#6e6e73; }
.card-soon { color:#b3261e; font-weight:600; }
/* Requirements checklist */
.req-list { list-style:none; margin:.3rem 0 0; padding:0; }
.req-list li { display:block; padding:.5rem 0; border-bottom:1px solid #ededf0; font-size:.9rem; }
.req-list li:last-child { border-bottom:none; }
.req-label { display:block; font-weight:700; color:var(--ink); margin-bottom:.1rem; }
.req-detail { display:block; color:var(--muted); overflow-wrap:anywhere; line-height:1.5; }

/* Progressive disclosure: "View more" toggle for long text (description,
   pre-bid detail). JS adds .clamped + the toggle only when content overflows. */
.js-clamp.clamped {
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp: var(--clamp-lines, 6); line-clamp: var(--clamp-lines, 6);
  overflow:hidden;
}
.clamp-toggle {
  margin-top:.35rem; padding:0; background:none; border:none; cursor:pointer;
  color:var(--accent); font-size:.84rem; font-weight:600; font-family:inherit;
}
.clamp-toggle:hover { text-decoration:underline; }
/* Next steps */
.next-steps { margin:.3rem 0 0; padding-left:1.2rem; font-size:.9rem; line-height:1.6; color:var(--ink); }
.next-steps li { margin:.15rem 0; }
/* Doc links row */
.doc-links { display:flex; gap:.6rem; flex-wrap:wrap; }

/* Similar bids list (added 20260602) */
.similar-list { list-style:none; margin:.3rem 0 0; padding:0; }
.similar-list li { padding:.4rem 0; border-bottom:1px solid #ededf0; }
.similar-list li:last-child { border-bottom:none; }
.similar-title { display:block; font-size:.88rem; font-weight:600; color:var(--ink); }
.similar-meta { display:block; font-size:.78rem; color:var(--muted); }

/* Email-history "View job" button (added 20260602) */
.email-row { display:flex; align-items:center; gap:1rem; }
.email-row .email-body { flex:1; min-width:0; }
.email-go { white-space:nowrap; flex-shrink:0; font-size:.8rem; padding:.35rem .8rem; }

/* ===== Wider modal + 2-col grid (rev 20260601) — facts | next-actions =====
   Explicit grid (was column-count, which auto-balanced by height and scattered
   sections). Left column = the facts (key details + scope); right column = the
   action items (before you bid, what to do next, documents, agency, similar). */
.bid-modal-panel { max-width: 900px; }
.modal-col { min-width: 0; }
.modal-col > :last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .modal-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.2rem 2rem; align-items: start; }
}
/* eye + bookmark social stats */
.card-top-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.social-stats { display: inline-flex; align-items: center; gap: .55rem; }
.social-stats .ic { width: 12px; height: 12px; vertical-align: -1px; opacity: .65; }
.stat-eye, .stat-save { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat-save.has-saves { color: var(--accent); font-weight: 600; }
.stat-save.has-saves .ic { opacity: 1; }
.modal-chips .social-stats { margin-left: auto; }

/* "Posted by agency" / "Added to our feed" line on the card (added 20260603).
   Posted = the agency's real date (more prominent); Added = our scrape date
   (muted, clearly different). Full date+time CT lives in the modal facts table. */
.card-posted { font-size: .76rem; margin: .3rem 0 .1rem; line-height: 1.3; }
.card-posted-posted { color: var(--ink-soft); }
.card-posted-added { color: var(--muted); opacity: .85; }

/* ===== "Bid Fit": distance chip + profile form (added 20260602) ===== */
.dist-chip {
  display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap;
  font-size: .76rem; font-weight: 600; color: var(--muted);
  background: var(--bg-soft); border-radius: 999px; padding: .05rem .5rem;
  margin-left: .3rem; vertical-align: 1px;
}
.dist-chip.dist-near { color: #1a7f37; background: #e4f7ea; }
/* two/three-up field row (signup + dashboard profile) */
.fld-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 620px) { .fld-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .bidfit-form .fld-row { grid-template-columns: repeat(3, 1fr); } }
.field-note { font-size: .82rem; color: var(--muted); margin: .6rem 0 0; line-height: 1.5; }
.bidfit-form { margin-top: 1.2rem; max-width: 820px; }
.bidfit-form .trades-pick { margin-top: 1.4rem; }
.bidfit-form select, .bidfit-form input[type="text"] { width: 100%; }
.save-toast {
  display: inline-block; margin-top: .8rem; padding: .4rem .9rem; border-radius: 8px;
  background: #e4f7ea; color: #1a7f37; font-weight: 600; font-size: .9rem;
}


/* =====================================================================
   MOBILE REVAMP (2026-06-03) — phone-first polish. One authoritative
   block (appended last for clean cascade). Targets real ~360-430px phones.
   Fixes from the per-screen audit: overflow (nowrap/min-width), the modal,
   stacked fact tables, scrollable tab strip, tap targets, no iOS zoom.
   ===================================================================== */
@media (max-width: 560px) {
  /* No element may force horizontal scroll */
  html, body { overflow-x: hidden; }
  /* iOS: 16px form fields so focus never auto-zooms the page */
  input, select, textarea, .feed-search input[type="search"] { font-size: 16px; }

  /* --- shell --- */
  .topbar { padding: 0 .9rem; height: 50px; }
  .brand { font-size: 1rem; }
  .page { padding: 1.25rem .9rem 3.5rem; }
  .footer { padding: 2.5rem 1.1rem; }
  .footer .footlinks { gap: .9rem 1.2rem; }

  /* --- landing / marketing --- */
  .hero h1, .section-title, .auth-aside-title { max-width: 100%; }
  .tiers, .steps, .resource-grid { grid-template-columns: 1fr; }
  .state-list { font-size: .8rem; }
  .cta-band { flex-direction: column; align-items: stretch; text-align: left;
    padding: 1.8rem 1.3rem; gap: 1.1rem; }
  .cta-band-sub { max-width: 100%; }
  .cta-band .btn, .cta-band .btn.primary, .cta-band .btn.big {
    width: 100%; white-space: normal; text-align: center; }

  /* --- feed: stats / search / controls / tabs --- */
  .feed-stats { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .feed-search { gap: .5rem; }
  .feed-search input[type="search"] { min-width: 0; flex: 1 1 100%; width: 100%; }
  .feed-search .btn { flex: 1 1 100%; }
  .feed-controls { flex-wrap: wrap; gap: .6rem; row-gap: .6rem; }
  /* tabs become a horizontal scroll strip instead of a tall wrapped block */
  .trade-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -.9rem; padding: 0 .9rem .25rem; }
  .trade-tabs::-webkit-scrollbar { display: none; }
  .trade-tab, .status-pill-tab { white-space: nowrap; flex: 0 0 auto; }

  /* --- feed cards --- */
  .feed-card { padding: 1.15rem 1.1rem; min-height: 0; }
  .feed-card .feed-row-top { flex-wrap: wrap; gap: .4rem; }
  .feed-card .feed-agency { white-space: normal; overflow: visible;
    text-overflow: clip; word-break: break-word; }
  .card-top-right { gap: .5rem; }
  .card-chips { gap: .3rem; }
  .stat-eye, .stat-save { font-size: .74rem; }
  .stat-eye .ic, .stat-save .ic, .social-stats .ic { width: 13px; height: 13px; }

  /* --- fact tables (modal + card): stack label over value --- */
  .modal-details > div, .feed-details > div {
    flex-direction: column; align-items: flex-start; gap: .15rem; }
  .modal-details dt, .feed-details dt { flex-shrink: 0; }
  .modal-details dd, .feed-details dd { text-align: left; max-width: 100%; width: 100%; }

  /* --- bid detail modal: full-screen sheet on phones --- */
  .bid-modal { padding: 0; align-items: stretch; }
  .bid-modal-panel { max-width: 100%; width: 100%; min-height: 100%;
    border-radius: 0; margin: 0; padding: 1.3rem 1rem 2.5rem; }
  .modal-close { width: 40px; height: 40px; top: .5rem; right: .5rem; font-size: 1.6rem; }
  .modal-chips { margin: 0 2.6rem .6rem 0; gap: .3rem; }
  .modal-title { font-size: 1.25rem; line-height: 1.3; }
  .modal-agency { word-break: break-word; }
  .bid-tldr { padding: .7rem .85rem; font-size: .96rem; }
  .agency-card { padding: .8rem .9rem; }
  .doc-links { flex-direction: column; }
  .doc-links .btn { width: 100%; text-align: center; }
  .stage-picker { gap: .4rem; }
  .stage-opt { padding: .5rem .85rem; }   /* bigger tap target */
  .pipe-notes, .notes-input { min-height: 4em; }

  /* --- forms (signup / login / dashboard / Bid Fit) --- */
  .plan-card { flex-wrap: wrap; }
  .plan-price { margin-left: auto; }
  .trade-grid, .trades-pick .trade-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .fld-row, .bidfit-form .fld-row { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .email-row { flex-direction: column; align-items: stretch; gap: .45rem; }
  .email-go { align-self: flex-start; }
  /* full-width primary actions + comfortable tap height */
  .btn.block, .btn.big, .signup-form button[type="submit"],
  .bidfit-form button[type="submit"] { width: 100%; min-height: 48px; }
  .btn { min-height: 40px; }
  .pw-toggle { min-height: 44px; display: inline-flex; align-items: center; }
}

/* very small phones (<=380px): shave a little more */
@media (max-width: 380px) {
  .page { padding: 1.1rem .7rem 3rem; }
  .bid-modal-panel { padding: 1.15rem .8rem 2.2rem; }
  .modal-title { font-size: 1.18rem; }
  .feed-card { padding: 1rem .9rem; }
  .trade-grid, .trades-pick .trade-grid { grid-template-columns: 1fr; }
}