/* TeamingPro Marketplace, new view (round 19, 10/22/2026). Built from the research mockups' research.css by
   scratchpad/build_mp2_css.py: every rule is scoped under body.tp-mp2, so nothing here can touch the classic Marketplace or
   the rest of the site. Palette and type: teal #10b981, blue #2d80d2, ink #0f172a, Lato body, Montserrat headings.
   Phone rules (the mockups' body.phone) live in the max-width 760px block at the end. Hand edits go below the generated part. */
body.tp-mp2 { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #334155; background: #f8fafc; font-size: 15px; line-height: 1.5; }
body.tp-mp2 *, body.tp-mp2 *::before, body.tp-mp2 *::after { box-sizing: border-box; }
body.tp-mp2 {
    --blue: #2d80d2; --blue-dark: #1d5fa3; --ink: #0f172a; --text: #334155; --muted: #64748b; --label: #94a3b8;
    --border: #e2e8f0; --bg: #f8fafc; --teal: #10b981; --teal-dark: #059669; --green: #198754; --amber: #f59e0b;
    --amber-dark: #d97706; --red: #b91c1c; --panel: #f1f5f9;
}
body.tp-mp2 h1, body.tp-mp2 h2, body.tp-mp2 h3, body.tp-mp2 h4 { font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; color: var(--ink); margin: 0 0 8px; line-height: 1.25; }
body.tp-mp2 h1 { font-size: 28px; }
body.tp-mp2 h2 { font-size: 20px; }
body.tp-mp2 h3 { font-size: 16px; }
body.tp-mp2 h4 { font-size: 14px; }
body.tp-mp2 p { margin: 0 0 10px; }
body.tp-mp2 a { color: var(--blue); text-decoration: none; }
body.tp-mp2 a:hover { color: var(--blue-dark); text-decoration: underline; }
body.tp-mp2 img { max-width: 100%; }
body.tp-mp2 .wrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
body.tp-mp2 .muted { color: var(--muted); }
body.tp-mp2 .small { font-size: 13px; }
body.tp-mp2 .tiny { font-size: 12px; }
body.tp-mp2 .right { text-align: right; }
body.tp-mp2 .center { text-align: center; }
body.tp-mp2 .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
body.tp-mp2 .row.between { justify-content: space-between; }
body.tp-mp2 .stack > * + * { margin-top: 12px; }
body.tp-mp2 .mt8 { margin-top: 8px; }
body.tp-mp2 .mt16 { margin-top: 16px; }
body.tp-mp2 .mt24 { margin-top: 24px; }
body.tp-mp2 .mb8 { margin-bottom: 8px; }
body.tp-mp2 .mb16 { margin-bottom: 16px; }
body.tp-mp2 .hide { display: none; }
body.tp-mp2 .callout { position: absolute; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 4px; z-index: 5; white-space: nowrap; }
body.tp-mp2 .rel { position: relative; }
body.tp-mp2 header.site { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
body.tp-mp2 header.site .wrap { display: flex; align-items: center; gap: 6px; height: 62px; }
body.tp-mp2 header.site .brand { display: flex; align-items: center; gap: 8px; margin-right: 18px; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--ink); font-size: 20px; }
body.tp-mp2 header.site .brand .mark { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--teal), var(--blue)); display: inline-block; }
body.tp-mp2 header.site nav { display: flex; align-items: center; gap: 2px; flex: 1; }
body.tp-mp2 header.site nav a { color: var(--text); font-weight: 500; padding: 8px 12px; border-radius: 6px; font-size: 15px; }
body.tp-mp2 header.site nav a:hover { background: var(--panel); color: var(--blue); text-decoration: none; }
body.tp-mp2 header.site nav a.on { color: var(--green); }
body.tp-mp2 header.site .beta { font-size: 10px; font-weight: 800; color: #0369a1; background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 10px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
body.tp-mp2 header.site .tools { display: flex; align-items: center; gap: 8px; }
body.tp-mp2 header.site .search-co { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 50px; padding: 6px 14px; color: var(--text); font-size: 14px; background: #fff; }
body.tp-mp2 header.site .gsearch { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 50px; padding: 7px 14px; color: var(--muted); font-size: 14px; background: var(--bg); margin: 0 12px; }
body.tp-mp2 header.site .gsearch .k { margin-left: auto; font-size: 11px; color: var(--label); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
body.tp-mp2 header.site .avatar { width: 34px; height: 34px; border-radius: 50%; background: #e0f2fe; color: #075985; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
body.tp-mp2 header.site .bell { position: relative; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
body.tp-mp2 header.site .bell .count { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
body.tp-mp2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; font-weight: 600; font-size: 14px; padding: 8px 16px; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.3; white-space: nowrap; font-family: inherit; }
body.tp-mp2 .btn:hover { text-decoration: none; }
body.tp-mp2 .btn.teal { background: var(--teal); border-color: var(--teal); color: #fff; }
body.tp-mp2 .btn.teal:hover { background: var(--teal-dark); color: #fff; }
body.tp-mp2 .btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
body.tp-mp2 .btn.blue:hover { background: var(--blue-dark); color: #fff; }
body.tp-mp2 .btn.amber { background: var(--amber); border-color: var(--amber-dark); color: #fff; }
body.tp-mp2 .btn.amber:hover { background: var(--amber-dark); }
body.tp-mp2 .btn.ghost { background: #fff; border-color: var(--border); color: var(--text); }
body.tp-mp2 .btn.ghost:hover { border-color: var(--blue); color: var(--blue); }
body.tp-mp2 .btn.ghost.on { border-color: var(--teal); color: var(--teal-dark); background: #ecfdf5; }
body.tp-mp2 .btn.pill { border-radius: 50px; }
body.tp-mp2 .btn.sm { padding: 5px 11px; font-size: 13px; }
body.tp-mp2 .btn.lg { padding: 12px 22px; font-size: 16px; }
body.tp-mp2 .btn.block { width: 100%; justify-content: center; }
body.tp-mp2 .btn.green { background: var(--green); border-color: var(--green); color: #fff; border-radius: 50px; }
body.tp-mp2 .btn.link { background: none; border: none; color: var(--blue); padding: 4px 6px; }
body.tp-mp2 .btn.danger { background: #fff; border-color: #fecaca; color: var(--red); }
body.tp-mp2 .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 62px); }
body.tp-mp2 .rail { background: #fff; border-right: 1px solid var(--border); padding: 14px 12px; position: sticky; top: 62px; height: calc(100vh - 62px); overflow: auto; }
body.tp-mp2 .rail .newpost { margin-bottom: 14px; }
body.tp-mp2 .rail .grp { font-size: 11px; font-weight: 800; color: var(--label); text-transform: uppercase; letter-spacing: .06em; padding: 10px 10px 4px; }
body.tp-mp2 .rail a.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-weight: 600; font-size: 14px; }
body.tp-mp2 .rail a.item:hover { background: var(--panel); text-decoration: none; color: var(--blue); }
body.tp-mp2 .rail a.item.on { background: #ecfdf5; color: var(--teal-dark); }
body.tp-mp2 .rail a.item .ic { width: 22px; text-align: center; color: var(--muted); font-size: 14px; }
body.tp-mp2 .rail a.item.on .ic { color: var(--teal-dark); }
body.tp-mp2 .rail a.item .n { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
body.tp-mp2 .rail a.item .n.hot { background: var(--red); color: #fff; border-radius: 9px; padding: 0 6px; font-weight: 800; font-size: 11px; }
body.tp-mp2 .rail .joincard { margin: 14px 4px 0; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px; font-size: 13px; }
body.tp-mp2 .rail .joincard b { display: block; color: var(--ink); margin-bottom: 4px; }
body.tp-mp2 .rail .mini { margin: 16px 4px 0; font-size: 12px; color: var(--muted); padding: 0 6px; }
body.tp-mp2 .rail .collapse { display: block; text-align: right; font-size: 12px; color: var(--label); padding: 4px 10px; }
body.tp-mp2 .content { padding: 20px 24px 40px; min-width: 0; }
body.tp-mp2 .content .wrap { padding: 0; max-width: 1120px; margin: 0; }
body.tp-mp2 .content .wrap.wide { max-width: none; }
@media (max-width: 980px) {
    body.tp-mp2 .app { grid-template-columns: 1fr; }
    body.tp-mp2 .rail { display: none; }
    body.tp-mp2 .content { padding: 14px 14px 80px; }
}
body.tp-mp2 .mp-nav { background: #fff; border-bottom: 1px solid var(--border); }
body.tp-mp2 .mp-nav .wrap { display: flex; align-items: center; gap: 4px; min-height: 48px; flex-wrap: wrap; }
body.tp-mp2 .mp-nav a { padding: 8px 12px; font-weight: 600; color: var(--text); border-radius: 6px; font-size: 14.5px; }
body.tp-mp2 .mp-nav a:hover { background: var(--panel); color: var(--blue); text-decoration: none; }
body.tp-mp2 .mp-nav a.on { color: var(--green); }
body.tp-mp2 .mp-nav .grow { flex: 1; }
body.tp-mp2 .mp-nav .count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; text-align: center; margin-left: 3px; }
body.tp-mp2 .mp-nav .search { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 50px; padding: 5px 12px; gap: 6px; min-width: 300px; background: #fff; color: var(--muted); font-size: 14px; }
body.tp-mp2 .card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body.tp-mp2 .card + .card { margin-top: 14px; }
body.tp-mp2 .card.lift:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.06); transition: .2s; }
body.tp-mp2 .card.top-teal { border-top: 4px solid var(--teal); }
body.tp-mp2 .card.top-amber { border-top: 4px solid var(--amber); }
body.tp-mp2 .card.info { background: #eff6ff; border-color: #bfdbfe; }
body.tp-mp2 .card.soft { background: #fbfcfd; }
body.tp-mp2 .card.sponsor { background: #fff; border-color: var(--border); }   /* 11/09/2026 (Chris): ad cards white like every card; the pill is the only accent */
body.tp-mp2 .card.tight { padding: 12px 14px; }
body.tp-mp2 .label { font-size: 11.5px; color: var(--label); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 6px; }
body.tp-mp2 .title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0; font-family: 'Montserrat', sans-serif; }
body.tp-mp2 a.title { color: var(--ink); }
body.tp-mp2 a.title:hover { color: var(--blue); text-decoration: none; }
body.tp-mp2 .meta { font-size: 13.5px; color: var(--muted); }
body.tp-mp2 .meta .sep { margin: 0 5px; color: #cbd5e1; }
body.tp-mp2 .badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; line-height: 1.5; vertical-align: middle; }
body.tp-mp2 .badge.verified { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; }
body.tp-mp2 .badge.sam { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
body.tp-mp2 .badge.small { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
body.tp-mp2 .badge.set { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
body.tp-mp2 .badge.prime { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
body.tp-mp2 .badge.sponsor { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }   /* 11/09/2026 (Chris): calm purple, no yellow alert look */
body.tp-mp2 .badge.ad { background: var(--panel); color: #475569; border: 1px solid #cbd5e1; }
body.tp-mp2 .badge.new { background: #fee2e2; color: var(--red); border: 1px solid #fecaca; }
body.tp-mp2 .badge.gray { background: var(--panel); color: var(--muted); border: 1px solid var(--border); }
body.tp-mp2 .badge.live { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
body.tp-mp2 .badge.paused { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
body.tp-mp2 .badge.expired { background: #fee2e2; color: var(--red); border: 1px solid #fecaca; }
body.tp-mp2 .chip { display: inline-block; background: #fff; color: var(--text); border: 1px solid var(--border); font-size: 13px; padding: 4px 12px; border-radius: 50px; margin: 3px 4px 3px 0; line-height: 1.4; }
body.tp-mp2 .chip:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
body.tp-mp2 .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
body.tp-mp2 .chip.x::after { content: ' \00d7'; color: var(--muted); }
body.tp-mp2 .naics { display: inline-block; background: var(--panel); color: var(--text); font-weight: 700; font-size: 12.5px; padding: 2px 7px; border-radius: 4px; margin-right: 4px; font-family: Consolas, Menlo, monospace; }
body.tp-mp2 .tag { display: inline-block; background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 12px; margin: 2px 2px 2px 0; }
body.tp-mp2 .grid { display: grid; gap: 16px; }
body.tp-mp2 .grid.main-rail { grid-template-columns: minmax(0, 1fr) 320px; }
body.tp-mp2 .grid.rail-main { grid-template-columns: 260px minmax(0, 1fr); }
body.tp-mp2 .grid.rail-main-rail { grid-template-columns: 250px minmax(0, 1fr) 300px; }
body.tp-mp2 .grid.c2 { grid-template-columns: 1fr 1fr; }
body.tp-mp2 .grid.c3 { grid-template-columns: repeat(3, 1fr); }
body.tp-mp2 .grid.c4 { grid-template-columns: repeat(4, 1fr); }
body.tp-mp2 .grid.c5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) {
    body.tp-mp2 .grid.main-rail, body.tp-mp2 .grid.rail-main, body.tp-mp2 .grid.rail-main-rail, body.tp-mp2 .grid.c2, body.tp-mp2 .grid.c3, body.tp-mp2 .grid.c4, body.tp-mp2 .grid.c5 { grid-template-columns: 1fr; }
    body.tp-mp2 header.site nav { display: none; }
    body.tp-mp2 .mp-nav .search { min-width: 0; flex: 1; }
}
body.tp-mp2 .hero { background: linear-gradient(180deg, #eef6ff, var(--bg)); padding: 32px 0 20px; }
body.tp-mp2 .hero h1 { font-size: 32px; }
body.tp-mp2 .hero .lead { font-size: 17px; color: var(--text); max-width: 680px; }
body.tp-mp2 .big-search { display: flex; align-items: center; background: #fff; border: 2px solid var(--border); border-radius: 50px; padding: 6px 6px 6px 18px; gap: 10px; max-width: 760px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
body.tp-mp2 .big-search .q { flex: 1; color: var(--muted); font-size: 16px; }
body.tp-mp2 .big-search:focus-within { border-color: var(--blue); }
body.tp-mp2 .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
body.tp-mp2 .tile { display: block; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px; color: var(--text); }
body.tp-mp2 .tile:hover { border-color: var(--blue); text-decoration: none; transform: translateY(-2px); transition: .15s; }
body.tp-mp2 .tile.on { border-color: var(--teal); box-shadow: 0 0 0 2px #d1fae5; }
body.tp-mp2 .tile .ico { width: 38px; height: 38px; border-radius: 8px; background: #ecfdf5; color: var(--teal-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; font-size: 18px; }
body.tp-mp2 .tile h3 { margin-bottom: 4px; }
body.tp-mp2 .tile p { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
body.tp-mp2 .tile .counts { font-size: 13px; color: var(--text); font-weight: 600; }
body.tp-mp2 .tile .counts .new { color: var(--teal-dark); }
@media (max-width: 980px) {
    body.tp-mp2 .tiles { grid-template-columns: 1fr 1fr; }
}
body.tp-mp2 .filterbar { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; top: 62px; z-index: 20; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
body.tp-mp2 .filterbar .q { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 50px; padding: 7px 14px; color: var(--muted); font-size: 14px; background: #fff; }
body.tp-mp2 .sel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 13.5px; background: #fff; color: var(--text); }
body.tp-mp2 .sel.on { border-color: var(--teal); background: #ecfdf5; color: var(--teal-dark); font-weight: 600; }
body.tp-mp2 .sel::after { content: '\25BE'; color: var(--muted); font-size: 11px; }
body.tp-mp2 .sortrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 14px 0 10px; }
body.tp-mp2 .post { display: flex; gap: 14px; }
body.tp-mp2 .logo { width: 52px; height: 52px; border-radius: 8px; background: var(--border); color: #475569; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: 'Montserrat', sans-serif; flex-shrink: 0; font-size: 16px; }
body.tp-mp2 .logo.lg { width: 72px; height: 72px; font-size: 22px; }
body.tp-mp2 .logo.prime { background: #0f172a; color: #fff; }
body.tp-mp2 .post .body { flex: 1; min-width: 0; }
body.tp-mp2 .post .text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }
body.tp-mp2 .facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; padding: 10px 12px; background: var(--panel); border-radius: 8px; font-size: 13px; }
body.tp-mp2 .facts div { white-space: nowrap; }
body.tp-mp2 .facts b { color: var(--ink); }
body.tp-mp2 .facts .due { color: var(--red); font-weight: 700; }
body.tp-mp2 .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); align-items: center; }
body.tp-mp2 .actions .counts { margin-left: auto; font-size: 13px; color: var(--muted); }
body.tp-mp2 .kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
body.tp-mp2 .kicker.amber { color: #92400e; }
body.tp-mp2 .kicker.blue { color: #075985; }
body.tp-mp2 .answered { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--teal-dark); font-weight: 700; }
body.tp-mp2 .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 13px; margin-top: 10px; }
body.tp-mp2 .trust div { display: flex; align-items: center; gap: 6px; }
body.tp-mp2 .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--teal); }
body.tp-mp2 .dot.gray { background: #cbd5e1; }
body.tp-mp2 .dot.amber { background: var(--amber); }
body.tp-mp2 .stat { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
body.tp-mp2 .stat .n { font-size: 26px; font-weight: 800; color: var(--ink); font-family: 'Montserrat', sans-serif; line-height: 1.1; }
body.tp-mp2 .stat .d { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
body.tp-mp2 .stat .up { color: var(--teal-dark); font-weight: 700; font-size: 12.5px; }
body.tp-mp2 .stat .down { color: var(--red); font-weight: 700; font-size: 12.5px; }
body.tp-mp2 table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
body.tp-mp2 table.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--label); padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 700; }
body.tp-mp2 table.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
body.tp-mp2 table.tbl tr:hover td { background: #fbfcfd; }
body.tp-mp2 table.tbl tr.sel td { background: #ecfdf5; }
body.tp-mp2 table.tbl td .sub { display: block; font-size: 12.5px; color: var(--muted); }
body.tp-mp2 table.tbl .ico { display: inline-flex; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); align-items: center; justify-content: center; color: var(--muted); margin-right: 3px; font-size: 13px; }
body.tp-mp2 table.tbl .ico:hover { border-color: var(--blue); color: var(--blue); }
body.tp-mp2 .bars { display: flex; align-items: flex-end; gap: 5px; height: 80px; }
body.tp-mp2 .bars span { flex: 1; background: #bfdbfe; border-radius: 3px 3px 0 0; }
body.tp-mp2 .bars span.hi { background: var(--blue); }
body.tp-mp2 .field { margin-bottom: 14px; }
body.tp-mp2 .field label { display: block; font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 5px; }
body.tp-mp2 .field .hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
body.tp-mp2 .input { display: block; width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; font-size: 14px; background: #fff; color: var(--text); font-family: inherit; }
body.tp-mp2 .input.ph { color: var(--label); }
body.tp-mp2 .input.ta { min-height: 110px; }
body.tp-mp2 .input.focus { border-color: var(--blue); box-shadow: 0 0 0 3px #dbeafe; }
body.tp-mp2 .inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.tp-mp2 .check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 6px 0; }
body.tp-mp2 .check .box { width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 4px; flex-shrink: 0; margin-top: 1px; }
body.tp-mp2 .check .box.on { background: var(--teal); border-color: var(--teal); position: relative; }
body.tp-mp2 .check .box.on::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.tp-mp2 .toggle { display: inline-block; width: 38px; height: 22px; border-radius: 11px; background: #cbd5e1; position: relative; vertical-align: middle; }
body.tp-mp2 .toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
body.tp-mp2 .toggle.on { background: var(--teal); }
body.tp-mp2 .toggle.on::after { left: 19px; }
body.tp-mp2 .radio-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: #fff; }
body.tp-mp2 .radio-card.on { border-color: var(--teal); box-shadow: 0 0 0 2px #d1fae5; }
body.tp-mp2 .steps { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 14px; flex-wrap: wrap; }
body.tp-mp2 .steps b { color: var(--ink); }
body.tp-mp2 .steps .done { color: var(--teal-dark); font-weight: 700; }
body.tp-mp2 .modal-bg { background: rgba(15,23,42,.45); padding: 30px 16px; border-radius: 12px; }
body.tp-mp2 .modal { background: #fff; border-radius: 12px; max-width: 980px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: hidden; }
body.tp-mp2 .modal .head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
body.tp-mp2 .modal .foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); background: #fbfcfd; }
body.tp-mp2 .modal .bodyx { padding: 18px 20px; }
body.tp-mp2 .progress { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
body.tp-mp2 .progress span { display: block; height: 100%; background: var(--teal); }
body.tp-mp2 .notice { border-radius: 8px; padding: 10px 14px; font-size: 14px; border: 1px solid; }
body.tp-mp2 .notice.ok { background: #d1fae5; border-color: #a7f3d0; color: #047857; }
body.tp-mp2 .notice.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.tp-mp2 .notice.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
body.tp-mp2 .notice.err { background: #fee2e2; border-color: #fecaca; color: var(--red); }
body.tp-mp2 .list { list-style: none; margin: 0; padding: 0; }
body.tp-mp2 .list li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 14px; }
body.tp-mp2 .list li:last-child { border-bottom: none; }
body.tp-mp2 .checks { list-style: none; padding: 0; margin: 0; }
body.tp-mp2 .checks li { padding: 4px 0 4px 24px; position: relative; font-size: 14px; }
body.tp-mp2 .checks li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 5px; height: 10px; border: solid var(--teal-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.tp-mp2 .checks li.no::before { border-color: #cbd5e1; }
body.tp-mp2 .checks li.no { color: var(--label); }
body.tp-mp2 .comment { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); }
body.tp-mp2 .comment .av { width: 36px; height: 36px; border-radius: 50%; background: #e0f2fe; color: #075985; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
body.tp-mp2 .comment .av.owner { background: #ecfdf5; color: var(--teal-dark); }
body.tp-mp2 .comment.reply { margin-left: 46px; border-top: none; background: #fbfcfd; border-radius: 8px; padding: 10px 12px; }
body.tp-mp2 .comment .who { font-weight: 700; color: var(--ink); font-size: 14px; }
body.tp-mp2 .comment .who .badge { margin-left: 4px; }
body.tp-mp2 .comment .txt { font-size: 14px; margin-top: 2px; }
body.tp-mp2 .comment .ops { font-size: 12.5px; color: var(--muted); margin-top: 6px; display: flex; gap: 12px; }
body.tp-mp2 .comment .ops a { color: var(--muted); }
body.tp-mp2 .threads { border-right: 1px solid var(--border); }
body.tp-mp2 .thread { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); align-items: flex-start; }
body.tp-mp2 .thread.on { background: #ecfdf5; }
body.tp-mp2 .thread .who { font-weight: 700; color: var(--ink); font-size: 14px; display: flex; justify-content: space-between; }
body.tp-mp2 .thread .prev { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tp-mp2 .thread.unread .who { color: var(--ink); }
body.tp-mp2 .thread.unread .prev { color: var(--text); font-weight: 600; }
body.tp-mp2 .bubble { max-width: 70%; padding: 10px 14px; border-radius: 12px; font-size: 14px; margin: 6px 0; }
body.tp-mp2 .bubble.them { background: var(--panel); border-bottom-left-radius: 3px; }
body.tp-mp2 .bubble.me { background: #dbeafe; margin-left: auto; border-bottom-right-radius: 3px; }
body.tp-mp2 .bubble .when { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
body.tp-mp2 .context { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
body.tp-mp2 .notif { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); align-items: flex-start; }
body.tp-mp2 .notif.unread { background: #f0f9ff; }
body.tp-mp2 .notif .ico { width: 34px; height: 34px; border-radius: 8px; background: var(--panel); display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
body.tp-mp2 .notif .ico.teal { background: #ecfdf5; color: var(--teal-dark); }
body.tp-mp2 .notif .ico.blue { background: #e0f2fe; color: #075985; }
body.tp-mp2 .notif .ico.amber { background: #fef3c7; color: #92400e; }
body.tp-mp2 .notif .t { font-size: 14px; }
body.tp-mp2 .notif .t b { color: var(--ink); }
body.tp-mp2 .notif .when { font-size: 12px; color: var(--muted); margin-top: 2px; }
body.tp-mp2 .tabbar { display: none; }
body.tp-mp2 .burger { display: none; }
@media (max-width: 760px) {
    body.tp-mp2 .wrap { padding: 0 14px; }
    body.tp-mp2 header.site .wrap { height: 54px; }
    body.tp-mp2 header.site nav { display: none; }
    body.tp-mp2 header.site .tools .search-co, body.tp-mp2 header.site .tools .btn.green { display: none; }
    body.tp-mp2 .burger { display: inline-flex; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; align-items: center; justify-content: center; margin-left: auto; }
    body.tp-mp2 .app { grid-template-columns: 1fr; min-height: 0; }
    body.tp-mp2 .rail { display: none; }
    body.tp-mp2 .content { padding: 12px 14px 90px; }
    body.tp-mp2 header.site .gsearch { display: none; }
    body.tp-mp2 .tabbar { display: flex; position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); justify-content: space-around; padding: 8px 4px 10px; }
    body.tp-mp2 .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); font-weight: 600; }
    body.tp-mp2 .tabbar a.on { color: var(--teal-dark); }
    body.tp-mp2 .tabbar a .ic { font-size: 18px; }
    body.tp-mp2 .tabbar a.plus .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: 0 4px 10px rgba(16,185,129,.4); }
    body.tp-mp2 .mp-nav a { padding: 6px 8px; font-size: 13px; }
    body.tp-mp2 .grid.main-rail, body.tp-mp2 .grid.rail-main, body.tp-mp2 .grid.rail-main-rail, body.tp-mp2 .grid.c2, body.tp-mp2 .grid.c3, body.tp-mp2 .grid.c4 { grid-template-columns: 1fr; }
    body.tp-mp2 .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    body.tp-mp2 .tile { padding: 12px; }
    body.tp-mp2 .tile p { display: none; }
    body.tp-mp2 .hero h1 { font-size: 24px; }
    body.tp-mp2 .hero .lead { font-size: 15px; }
    body.tp-mp2 .filterbar { position: static; }
    body.tp-mp2 .facts { gap: 4px 12px; }
    body.tp-mp2 .actions .counts { margin-left: 0; width: 100%; }
    body.tp-mp2 .sticky-cta { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: 10px 14px; display: flex; gap: 8px; }
}

/* ---- hand rules (not from research.css) ---- */
body.tp-mp2 header.site .brand img { height: 30px; width: auto; display: block; }
body.tp-mp2 header.site .gsearch { position: relative; }
body.tp-mp2 header.site .gsearch input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; color: #334155; min-width: 0; }
body.tp-mp2 header.site .gsearch input::placeholder { color: #64748b; }
body.tp-mp2 header.site .gsearch button { border: 0; background: transparent; color: #64748b; cursor: pointer; padding: 0 2px; font-size: 15px; }
body.tp-mp2 .acct { position: relative; }
body.tp-mp2 .acct > a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; border-radius: 22px; padding: 3px 10px 3px 3px; font-weight: 600; font-size: 13px; color: #0f172a; max-width: 230px; }
body.tp-mp2 .acct > a:hover { text-decoration: none; border-color: #2d80d2; background: #f6f9fd; }
body.tp-mp2 .acct .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tp-mp2 .acct .menu { display: none; position: absolute; right: 0; top: 44px; min-width: 250px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.14); padding: 6px 0; z-index: 60; }
body.tp-mp2 .acct.open .menu, body.tp-mp2 .acct:hover .menu { display: block; }
body.tp-mp2 .acct .menu a { display: block; padding: 8px 14px; font-size: 14px; color: #1e293b; }
body.tp-mp2 .acct .menu a:hover { background: #ecfdf5; color: #047857; text-decoration: none; }
body.tp-mp2 .acct .menu .hd { padding: 10px 14px; border-bottom: 1px solid #eef1f5; font-weight: 700; color: #0f172a; }
body.tp-mp2 .acct .menu .hd small { display: block; font-weight: 400; color: #64748b; font-size: 12px; }
body.tp-mp2 .acct .menu a.out { color: #d9534f; border-top: 1px solid #eef1f5; margin-top: 4px; }
body.tp-mp2 .rail .n { font-variant-numeric: tabular-nums; }
body.tp-mp2 .switch { font-size: 12px; color: #64748b; margin: 10px 4px 0; padding: 0 6px; }
body.tp-mp2 .text p { margin: 0 0 10px; }
body.tp-mp2 .text ul, body.tp-mp2 .text ol { padding-left: 20px; }
body.tp-mp2 .hero { margin: -20px -24px 20px; padding: 28px 24px 22px; }
body.tp-mp2 .stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.tp-mp2 .stats4.three { grid-template-columns: repeat(3, 1fr); }
body.tp-mp2 .mp2-badges .badge { margin-right: 2px; }
body.tp-mp2 .list li a.t { color: #0f172a; font-weight: 600; }
body.tp-mp2 .logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; background: #fff; }
body.tp-mp2 .post .text { color: #334155; }
body.tp-mp2 .kicker a { color: inherit; }
body.tp-mp2 textarea.input { resize: vertical; min-height: 90px; }
body.tp-mp2 .facts a { color: inherit; }
body.tp-mp2 .comment .ops a { cursor: pointer; }
body.tp-mp2 .notice { margin-top: 8px; }
body.tp-mp2 .mp2-post .text img { max-width: 100%; height: auto; }
body.tp-mp2 .sticky-cta { display: none; }
body.tp-mp2 .post .body a.title, body.tp-mp2 .card > a.title { display: block; }
body.tp-mp2 .post .body .kicker { display: flex; }
@media (max-width: 980px) {
    /* A 1fr track still grows to its content's min-content width; minmax(0, 1fr) pins the single column to the
       container so cards and text wrap instead of pushing the page sideways (seen at 390px). */
    body.tp-mp2 .grid.main-rail, body.tp-mp2 .grid.rail-main, body.tp-mp2 .grid.rail-main-rail, body.tp-mp2 .grid.c2, body.tp-mp2 .grid.c3, body.tp-mp2 .grid.c4, body.tp-mp2 .grid.c5 { grid-template-columns: minmax(0, 1fr); }
    body.tp-mp2 .tiles, body.tp-mp2 .stats4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.tp-mp2 .grid.c5.mp2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.tp-mp2 .grid > *, body.tp-mp2 .tiles > *, body.tp-mp2 .stats4 > *, body.tp-mp2 .card { min-width: 0; }
}
body.tp-mp2 .tp-loading-text { font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* round 20: real controls inside the mockup's filter bar (label.sel wraps a select or an input so the caret and the "on" state stay) */
body.tp-mp2 .filterbar label.q { cursor: text; }
body.tp-mp2 .filterbar label.q input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; color: #334155; min-width: 0; }
body.tp-mp2 .filterbar label.q input::placeholder { color: #64748b; }
body.tp-mp2 label.sel { cursor: pointer; white-space: nowrap; }
body.tp-mp2 label.sel select { border: 0; background: transparent; outline: none; font: inherit; color: inherit; font-weight: inherit; cursor: pointer; padding: 0; max-width: 220px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
body.tp-mp2 label.sel input { border: 0; background: transparent; outline: none; font: inherit; color: inherit; width: 72px; padding: 0; }
body.tp-mp2 label.sel input::placeholder { color: #94a3b8; font-weight: 400; }
body.tp-mp2 .sel.text::after, body.tp-mp2 .sel.flag::after { content: none; }
body.tp-mp2 a.sel:hover { border-color: #2d80d2; text-decoration: none; }
body.tp-mp2 a.sel.flag.on::before { content: '\2713'; font-size: 12px; }
body.tp-mp2 .mp2-chiprow, body.tp-mp2 .mp2-subchips { flex-wrap: wrap; row-gap: 2px; }
body.tp-mp2 .pager { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 16px; }
body.tp-mp2 .tabs { display: flex; gap: 0; border-bottom: 1px solid #e2e8f0; margin-top: 16px; }
body.tp-mp2 .tabs a { padding: 10px 14px; font-weight: 600; color: #64748b; border-bottom: 3px solid transparent; margin-bottom: -1px; }
body.tp-mp2 .tabs a:hover { color: #0f172a; text-decoration: none; }
body.tp-mp2 .tabs a.on { color: #0f172a; border-bottom-color: #10b981; }
body.tp-mp2 mark { background: #fef08a; color: inherit; padding: 0 2px; border-radius: 3px; }
body.tp-mp2 .grid.c2 > .card { min-width: 0; }
/* round 21: My Posts */
body.tp-mp2 .grid.c5.mp2-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.tp-mp2 .mp2-stats .stat .d { line-height: 1.35; }
body.tp-mp2 .mp2-axis { display: flex; gap: 5px; margin-top: 4px; }
body.tp-mp2 .mp2-axis span { flex: 1; font-size: 10.5px; color: #64748b; text-align: center; min-width: 0; }
body.tp-mp2 .card.warn { background: #fef3c7; border-color: #fde68a; }
body.tp-mp2 table.tbl a.btn { margin-bottom: 2px; }
body.tp-mp2 table.tbl tr.selrow td { background: #ecfdf5; }
/* round 22a: New Post */
body.tp-mp2 .mp2-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.tp-mp2 a.radio-card { display: block; color: #334155; cursor: pointer; padding: 10px 12px; }
body.tp-mp2 a.radio-card:hover { border-color: #2d80d2; text-decoration: none; }
body.tp-mp2 a.radio-card b { color: #0f172a; font-size: 13.5px; }
body.tp-mp2 .mp2-typegroup.folded .mp2-types { display: none; }
body.tp-mp2 .mp2-newpost input.input, body.tp-mp2 .mp2-newpost textarea.input { font-family: inherit; }
body.tp-mp2 .mp2-newpost .input:focus { outline: none; border-color: #2d80d2; box-shadow: 0 0 0 3px #dbeafe; }
body.tp-mp2 .mp2-newpost textarea.input.ta { min-height: 220px; resize: vertical; line-height: 1.5; }
body.tp-mp2 .mp2-sticky { position: sticky; top: 76px; }
body.tp-mp2 .mp2-newpost .chip a { color: #64748b; margin-left: 2px; }
body.tp-mp2 .mp2-newpost .field label a { margin-left: 6px; }
body.tp-mp2 .mp2-linklist li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; padding: 4px 0; border-bottom: 1px solid #eef1f5; }
body.tp-mp2 .mp2-linklist li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* round 28f: the type in two steps (section tiles, then chips), keyword chips with an add box, attachments behind a toggle */
body.tp-mp2 .mp2-newpost [hidden] { display: none !important; }
body.tp-mp2 .mp2-sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body.tp-mp2 .mp2-sections a.radio-card .small { margin-top: 3px; line-height: 1.35; }
body.tp-mp2 .mp2-picked { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
body.tp-mp2 .mp2-picked b { color: var(--ink); }
body.tp-mp2 .mp2-types.chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.tp-mp2 .mp2-types.chips a.radio-card { display: inline-block; padding: 6px 12px; border-radius: 50px; line-height: 1.3; }
body.tp-mp2 .mp2-types.chips a.radio-card b { font-size: 13px; font-weight: 600; }
body.tp-mp2 .mp2-types.chips a.radio-card.on { background: var(--ink); border-color: var(--ink); box-shadow: none; }
body.tp-mp2 .mp2-types.chips a.radio-card.on b { color: #fff; }
body.tp-mp2 .mp2-kwedit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
body.tp-mp2 .mp2-kwedit input.input { flex: 1 1 220px; min-width: 0; }
body.tp-mp2 .mp2-newpost #tpMp2KwChips .chip a { color: var(--muted); margin-left: 5px; text-decoration: none; font-size: 15px; line-height: 1; }
body.tp-mp2 .mp2-newpost #tpMp2KwChips .chip a:hover { color: var(--red); }
body.tp-mp2 .mp2-attach-toggle { display: inline-block; font-weight: 600; font-size: 13.5px; }
body.tp-mp2 #tpMp2Attach { margin-top: 8px; }
/* Round 29a (10/23/2026): the "Searching all posts" strip on the search page */
body.tp-mp2 .mp2-fromnote a { color: inherit; font-weight: 600; text-decoration: underline; }
/* Round 29c (10/23/2026): wide screens. The shell (rail plus content) is centered under the header at the header's width, so
   the page stops hugging the left edge on a 1680 or 1920 monitor. From 1600 up the header, shell and content column widen one
   step and the right rail gets a little more room. The content keeps a cap so post text stays readable. */
/* Wave 4 (10/24/2026): the same shell rules as the site's TPMasterV2 (Fable-site's rail fix), so the two masters match: the
   shell runs edge to edge with side padding that centers a 1400 px column (1640 from 1600 up), the rail's white runs to the
   screen edge on the left through a background gradient instead of a grey strip, and the rail scrollbar is thin and only
   shows on hover. These replace round 29c's centered .app with its left border. */
@media (min-width: 981px) {
    body.tp-mp2 .rail { border-left: 0; }
    body.tp-mp2 .app { max-width: none; width: auto; box-sizing: border-box; margin: 0; padding: 0 max(0px, calc(50% - 700px)); background: linear-gradient(to right, #fff calc(50% - 460px), transparent calc(50% - 460px)); }
}
@media (min-width: 1600px) {
    body.tp-mp2 header.site .wrap, body.tp-mp2 .mp-nav .wrap, body.tp-mp2 footer.site .wrap { max-width: 1640px; }
    body.tp-mp2 .app { padding: 0 max(0px, calc(50% - 820px)); background: linear-gradient(to right, #fff calc(50% - 580px), transparent calc(50% - 580px)); }
    body.tp-mp2 .content .wrap { max-width: 1360px; }
    body.tp-mp2 .grid.main-rail { grid-template-columns: minmax(0, 1fr) 340px; }
    body.tp-mp2 .grid.rail-main-rail { grid-template-columns: 260px minmax(0, 1fr) 320px; }
}
body.tp-mp2 .rail { scrollbar-width: thin; scrollbar-color: transparent transparent; }
body.tp-mp2 .rail:hover, body.tp-mp2 .rail:focus-within { scrollbar-color: #cbd5e1 transparent; }
body.tp-mp2 .rail::-webkit-scrollbar { width: 6px; }
body.tp-mp2 .rail::-webkit-scrollbar-track { background: transparent; }
body.tp-mp2 .rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
body.tp-mp2 .rail:hover::-webkit-scrollbar-thumb { background: #cbd5e1; }
body.tp-mp2 .rail::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Round 29d (10/23/2026): phone pass before Jeff's real-phone QA. A long unbroken word in a post title or text no longer pushes
   the card past the screen (360 px), the hero search box fits 360, and every button, chip, filter, tab and footer link is at
   least 40 px tall to tap. */
body.tp-mp2 .post .body, body.tp-mp2 .card > a.title, body.tp-mp2 .post .body a.title { overflow-wrap: anywhere; }
body.tp-mp2 .big-search .q { min-width: 0; width: 100%; }
@media (max-width: 760px) {
    body.tp-mp2 .btn, body.tp-mp2 .btn.sm { min-height: 40px; }
    body.tp-mp2 .chip { display: inline-flex; align-items: center; min-height: 40px; }
    body.tp-mp2 label.sel { display: inline-flex; align-items: center; min-height: 40px; }
    body.tp-mp2 label.sel select { min-height: 40px; }
    body.tp-mp2 .filterbar label.q { min-height: 40px; }
    body.tp-mp2 .filterbar label.q input { min-height: 36px; }
    body.tp-mp2 .post .body a.title, body.tp-mp2 .card > a.title { padding: 10px 0 8px; }
    body.tp-mp2 .tabbar a { flex: 1; min-height: 44px; justify-content: center; }
    body.tp-mp2 footer.site a { display: inline-block; padding: 10px 5px; }
    body.tp-mp2 header.site .brand { display: inline-flex; align-items: center; min-height: 40px; }
    body.tp-mp2 .list li { min-height: 40px; padding: 4px 0; }
    body.tp-mp2 .list li a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
    body.tp-mp2 .mp-nav a { min-height: 40px; display: inline-flex; align-items: center; }
    /* signed in: header menu button and bell, keyword chip x, the files toggle, text inputs, alert action links */
    body.tp-mp2 header.site #tpV2MenuBtn, body.tp-mp2 header.site .bell { width: 40px; height: 40px; }
    body.tp-mp2 .mp2-newpost #tpMp2KwChips .chip a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 40px; margin: -6px -8px -6px 0; }
    body.tp-mp2 .mp2-attach-toggle { padding: 10px 0; }
    body.tp-mp2 .input { min-height: 40px; }
    body.tp-mp2 .notif .when a { display: inline-block; padding: 12px 6px; margin: -12px 0; min-width: 40px; }
    /* My Posts tables on a phone: each row becomes a block (title, status, count, buttons), the header row and the Views and
       Comments columns (posts) or Trust and Received columns (responses) are dropped, nothing scrolls sideways. */
    body.tp-mp2 table.mp2-posts-tbl, body.tp-mp2 table.mp2-resp-tbl, body.tp-mp2 table.mp2-posts-tbl tbody, body.tp-mp2 table.mp2-resp-tbl tbody, body.tp-mp2 table.mp2-posts-tbl tr, body.tp-mp2 table.mp2-resp-tbl tr, body.tp-mp2 table.mp2-posts-tbl td, body.tp-mp2 table.mp2-resp-tbl td { display: block; width: 100%; box-sizing: border-box; }
    body.tp-mp2 table.mp2-posts-tbl tr:first-child, body.tp-mp2 table.mp2-resp-tbl tr:first-child { display: none; }
    body.tp-mp2 table.mp2-posts-tbl tr, body.tp-mp2 table.mp2-resp-tbl tr { border-bottom: 1px solid var(--border); padding: 10px 4px; }
    body.tp-mp2 table.mp2-posts-tbl td, body.tp-mp2 table.mp2-resp-tbl td { border-bottom: 0; padding: 3px 0; white-space: normal !important; }
    body.tp-mp2 table.mp2-posts-tbl td:nth-child(3), body.tp-mp2 table.mp2-posts-tbl td:nth-child(5), body.tp-mp2 table.mp2-resp-tbl td:nth-child(2), body.tp-mp2 table.mp2-resp-tbl td:nth-child(4) { display: none; }
    body.tp-mp2 table.mp2-posts-tbl td:nth-child(4)::before { content: 'Responses: '; color: var(--muted); font-size: 12.5px; }
    body.tp-mp2 table.tbl td .btn { margin: 4px 4px 2px 0; }
    /* Round 29e: in the suggestion dropdown the grey pill (company or "mentions ...") drops under the title instead of squeezing it */
    body.tp-mp2 .mp2-suggest a { flex-wrap: wrap; gap: 4px 10px; }
    body.tp-mp2 .mp2-suggest a .m { margin-left: 0; }
}
/* round 23: promotions, focus, loading strip, screen-reader heading */
body.tp-mp2 .mp2-ad .mp2-ad-img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin-top: 8px; }
body.tp-mp2 .mp2-ad .label { color: #475569; }
body.tp-mp2 .mp2-ad .mp2-ad-badge { margin-bottom: 8px; }   /* 11/09/2026: the quiet Sponsored pill above the title */
body.tp-mp2 .mp2-ad .mp2-house-badge { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }   /* 11/09/2026 (Chris): house ad pill in a soft blue */
body.tp-mp2 a:focus-visible, body.tp-mp2 button:focus-visible, body.tp-mp2 input:focus-visible, body.tp-mp2 select:focus-visible, body.tp-mp2 textarea:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
body.tp-mp2 .mp2-busy { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 8px; background: #0f172a; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 20px; box-shadow: 0 6px 20px rgba(15,23,42,.25); }
/* round 25a: a small ring spinner in the strip; busy buttons stop taking clicks */
body.tp-mp2 .mp2-busy::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: tpMp2Spin .8s linear infinite; }
@keyframes tpMp2Spin { to { transform: rotate(360deg); } }
body.tp-mp2 .busy, body.tp-mp2 .btn.busy { pointer-events: none; opacity: .65; cursor: progress; }
/* round 28a: member site navigation in the header (dropdowns) and the phone menu sheet */
body.tp-mp2 header.site nav.member { flex: 0 1 auto; }
body.tp-mp2 header.site nav .dd { position: relative; }
body.tp-mp2 header.site nav .dd-btn { font: inherit; font-size: 15px; font-weight: 500; color: var(--text); background: transparent; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
body.tp-mp2 header.site nav .dd-btn:hover, body.tp-mp2 header.site nav .dd.open .dd-btn { background: var(--panel); color: var(--blue); }
body.tp-mp2 header.site nav .dd-menu { display: none; position: absolute; left: 0; top: calc(100% + 4px); min-width: 240px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.14); padding: 6px 0; z-index: 70; }
body.tp-mp2 header.site nav .dd:hover .dd-menu, body.tp-mp2 header.site nav .dd.open .dd-menu, body.tp-mp2 header.site nav .dd:focus-within .dd-menu { display: block; }
body.tp-mp2 header.site nav .dd-menu a, body.tp-mp2 header.site nav .dd-menu .locked { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 14px; font-weight: 400; border-radius: 0; color: var(--text); white-space: nowrap; }
body.tp-mp2 header.site nav .dd-menu a:hover { background: #ecfdf5; color: #047857; text-decoration: none; }
body.tp-mp2 header.site nav .dd-menu .locked { color: var(--muted); cursor: default; }
body.tp-mp2 header.site nav .dd-menu i { width: 16px; text-align: center; color: var(--muted); }
body.tp-mp2 header.site .tools .btn.dash { white-space: nowrap; }
/* round 28b: the logo never shrinks, the search box shrinks first (min 220 px), the account chip is the avatar only */
body.tp-mp2 header.site .brand { flex: none; margin-right: 14px; }
body.tp-mp2 header.site nav.member { flex: 0 0 auto; }
body.tp-mp2 header.site .gsearch { flex: 1 1 220px; min-width: 220px; }
body.tp-mp2 header.site .tools { flex: none; }
body.tp-mp2 .acct > a { padding: 3px; gap: 0; }   /* round 28d: the circle alone, no caret */
body.tp-mp2 .acct .nm { display: none; }
body.tp-mp2 .acct .menu .hd small + small { margin-top: 2px; }
/* round 28b: below 1280 px the nav tightens and the search minimum drops so the bar fits at 1180 px without touching the logo */
@media (max-width: 1280px) {
    body.tp-mp2 header.site .brand { margin-right: 8px; }
    body.tp-mp2 header.site nav .dd-btn { padding: 8px 6px; font-size: 14px; }
    body.tp-mp2 header.site nav a { padding: 8px 8px; font-size: 14px; }
    body.tp-mp2 header.site .gsearch { min-width: 180px; flex-basis: 180px; margin: 0 8px; }
}
body.tp-mp2 header.site .menu-btn { display: none; font-size: 20px; color: var(--text); background: transparent; border: 0; padding: 6px 8px; cursor: pointer; }
body.tp-mp2 .mp2-sheet { position: fixed; left: 0; right: 0; top: 62px; bottom: 0; background: #fff; z-index: 95; overflow: auto; padding: 12px 16px 90px; }
body.tp-mp2 .mp2-sheet[hidden] { display: none; }
body.tp-mp2 .mp2-sheet .btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
body.tp-mp2 .mp2-sheet .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); padding: 14px 0 4px; }
body.tp-mp2 .mp2-sheet a, body.tp-mp2 .mp2-sheet .locked { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text); text-decoration: none; }
body.tp-mp2 .mp2-sheet .locked { color: var(--muted); }
body.tp-mp2 .mp2-sheet i { width: 18px; text-align: center; color: var(--muted); }
@media (max-width: 980px) {
    body.tp-mp2 header.site .menu-btn { display: inline-flex; }
    body.tp-mp2 header.site .tools .btn.dash { display: none; }
}
/* round 25j: footer spacing; the mockup had no footer rules */
body.tp-mp2 footer.site { margin-top: 32px; padding: 18px 0 26px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
body.tp-mp2 footer.site .row.between { gap: 10px 24px; }
body.tp-mp2 footer.site .foot-about { display: flex; flex-wrap: wrap; gap: 4px 14px; }
body.tp-mp2 footer.site .foot-about b { color: var(--ink); }
body.tp-mp2 footer.site .foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
body.tp-mp2 footer.site .foot-links a { color: var(--muted); text-decoration: none; }
body.tp-mp2 footer.site .foot-links a:hover { color: var(--teal); text-decoration: underline; }
/* round 25d: search suggestions under the header box and the search page box */
body.tp-mp2 .mp2-suggest { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 280px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.14); z-index: 80; padding: 6px 0; max-height: 60vh; overflow: auto; text-align: left; font-weight: 400; }
body.tp-mp2 .mp2-suggest.show { display: block; }
body.tp-mp2 .mp2-suggest .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); padding: 6px 14px 2px; }
body.tp-mp2 .mp2-suggest a { display: flex; align-items: center; gap: 10px; padding: 7px 14px; color: var(--text); font-size: 14px; text-decoration: none; }
body.tp-mp2 .mp2-suggest a:hover, body.tp-mp2 .mp2-suggest a.active { background: #f0fdf9; color: var(--teal); }
body.tp-mp2 .mp2-suggest a .m { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; border: 1px solid var(--border); border-radius: 50px; padding: 1px 9px; }
body.tp-mp2 .mp2-suggest .none { padding: 8px 14px; color: var(--muted); font-size: 13px; }
body.tp-mp2 .mp2-suggest a.all { border-top: 1px solid var(--border); margin-top: 4px; font-weight: 600; }
/* round 25b: trust lines wrap in the narrow rail; the dot keeps its size and sits on the first line */
body.tp-mp2 .trust div { align-items: flex-start; }
body.tp-mp2 .trust .dot { flex: none; width: 9px; height: 9px; margin-top: 5px; }
body.tp-mp2 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.tp-mp2 .grid.c2 .card > a.title { font-size: 15.5px; }
@media (max-width: 760px) {
    body.tp-mp2 header.site .tools .acct .nm { display: none; }
    body.tp-mp2 header.site .wrap { height: 54px; gap: 4px; }
    body.tp-mp2 .content { padding: 12px 14px 90px; }
    body.tp-mp2 .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid #e2e8f0; justify-content: space-around; padding: 8px 4px 10px; }
    body.tp-mp2 .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: #64748b; font-weight: 600; }
    body.tp-mp2 .tabbar a.on { color: #059669; }
    body.tp-mp2 .tabbar a .ic { font-size: 18px; }
    body.tp-mp2 .tabbar a.plus .ic { width: 40px; height: 40px; border-radius: 50%; background: #10b981; color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: 0 4px 10px rgba(16,185,129,.4); }
    body.tp-mp2 .phone-hide { display: none !important; }
    body.tp-mp2 .mp2-post > aside { order: -1; }
    body.tp-mp2 .mp2-post .trust { grid-template-columns: 1fr 1fr; }
    body.tp-mp2 .facts div { white-space: normal; }
    body.tp-mp2 .mp2-post + .sticky-cta, body.tp-mp2 .sticky-cta { display: flex; }
    body.tp-mp2 .stats4 { grid-template-columns: 1fr 1fr; }
    body.tp-mp2 .filterbar { position: static; padding: 10px; gap: 6px; }
    body.tp-mp2 .filterbar label.q { flex-basis: 100%; min-width: 0; }
    body.tp-mp2 label.sel select { max-width: 140px; }
    body.tp-mp2 .mp2-chiprow > span[style] { display: none; }
    body.tp-mp2 .tabs a { padding: 10px 10px; font-size: 14px; }
    body.tp-mp2 .grid.c5.mp2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.tp-mp2 .mp2-types { grid-template-columns: minmax(0, 1fr); }
    body.tp-mp2 .mp2-sections { grid-template-columns: 1fr 1fr; }
    /* round 28f: on a phone the signed-in header (logo, menu button, bell, avatar) overflowed 390 px by 60 px; the logo may shrink here */
    body.tp-mp2 header.site .brand { flex: 0 1 auto; min-width: 0; margin-right: 6px; }
    body.tp-mp2 header.site .brand img { width: 100%; height: auto; max-height: 30px; max-width: 283px; }
    body.tp-mp2 .mp2-sticky { position: static; }
    body.tp-mp2 .mp2-axis span:nth-child(even) { display: none; }
    body.tp-mp2 .hero { margin: 0 0 16px; padding: 18px 14px 14px; }
    body.tp-mp2.search-open header.site .gsearch { display: flex; position: fixed; left: 10px; right: 10px; top: 62px; z-index: 56; background: #fff; margin: 0; max-width: none; }
    body.tp-mp2 .sticky-cta { position: fixed; left: 0; right: 0; bottom: 62px; background: #fff; border-top: 1px solid #e2e8f0; padding: 10px 14px; display: flex; gap: 8px; z-index: 54; }
}

/* One frame, step B (10/24/2026): the "Marketplace / <page>" trail above every page heading, and the phone sheet now mirrors
   the rail items (icon span, count) instead of the old header menus. */
body.tp-mp2 .crumb { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; flex-wrap: wrap; }
body.tp-mp2 .crumb a { color: var(--muted); }
body.tp-mp2 .crumb a:hover { color: var(--teal-dark); text-decoration: none; }
body.tp-mp2 .crumb .sep { margin: 0 7px; color: #cbd5e1; }
body.tp-mp2 .crumb b { color: var(--ink); font-weight: 600; }
body.tp-mp2 .mp2-sheet .ic { width: 22px; text-align: center; color: var(--muted); }
body.tp-mp2 .mp2-sheet .n { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
body.tp-mp2 .mp2-sheet .n.hot { background: var(--red); color: #fff; border-radius: 9px; padding: 0 6px; font-weight: 800; font-size: 11px; }
body.tp-mp2 .mp2-sheet .switch { margin: 14px 0 0; }
body.tp-mp2 .mp2-sheet .switch a { display: inline; padding: 0; border: 0; font-size: 12px; color: #64748b; }

/* ONE FRAME step A (10/24/2026, from css/site-v2.css, Fable-site): the rail's Marketplace row and its open block as SiteShell renders
   them. Open on every Marketplace page: bold row, down chevron, "+ New Post" and the Marketplace rows indented under it with a
   left border. Mini rail: the block loses its indent and the chevron, the rows show as icons like the rest. */
/* Step C (10/24/2026, Fable-site): the Marketplace row sits under Dashboard; div.mprow holds the link and a real chevron button
   (aria-expanded turns it), .sub.closed hides the block; SiteShell.Rail wires the button and remembers localStorage "tpMp". */
body.tp-mp2 .rail .mprow { display: flex; align-items: center; gap: 2px; }
body.tp-mp2 .rail .mprow a.item { flex: 1 1 auto; min-width: 0; }
body.tp-mp2 .rail .mprow .chev { flex: 0 0 auto; width: 28px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--label, #94a3b8); font-size: 11px; line-height: 1; cursor: pointer; }
body.tp-mp2 .rail .mprow .chev:hover, body.tp-mp2 .rail .mprow .chev:focus-visible { background: var(--panel, #f1f5f9); color: var(--tp-green-dark, #059669); outline: none; }
body.tp-mp2 .rail .mprow .chev i { display: inline-block; transition: transform .15s ease; }
body.tp-mp2 .rail .mprow .chev[aria-expanded="false"] i { transform: rotate(-90deg); }
body.tp-mp2 .rail .mprow .chev[aria-expanded="true"] { color: var(--tp-green-dark, #059669); }
body.tp-mp2 .rail a.item.open { font-weight: 700; }
body.tp-mp2 .rail .sub.closed { display: none; }
body.tp-mp2 .rail .sub { margin: 2px 0 6px 20px; padding-left: 6px; border-left: 2px solid var(--border); }
body.tp-mp2 .rail .sub a.item { padding: 6px 8px; font-size: 13px; }
body.tp-mp2 .rail .sub a.item .ic { width: 18px; font-size: 13px; }
body.tp-mp2 .rail .sub .newpost { display: block; margin: 6px 0 8px; padding: 7px 8px; font-size: 13px; text-align: center; }
body.tp-mp2 .rail span.item.locked { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--muted); font-weight: 600; font-size: 14px; cursor: default; }
body.tp-mp2 .rail span.item.locked .ic { width: 22px; text-align: center; font-size: 14px; }
body.tp-mp2 .rail .sub .switch { margin: 4px 0 2px; padding: 0 8px; font-size: 12px; }   /* the block's footer: "Classic view" */
body.tp-mp2 .rail .sub .switch a { color: var(--muted); }
/* The collapsible rail (site-v2.css STEP 2, same rules under body.tp-mp2): body.tp-rail-mini (set before paint by the inline
   script in the master, kept by the rail toggle in js/marketplace-v2.js from localStorage "tpRail", shared with the app) turns
   the rail into a 64 px icon column. Phones and tablets (980 px and under) keep the drawer. */
body.tp-mp2 .rail .rail-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin: auto 0 -14px; padding: 12px 10px 12px; position: sticky; bottom: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: #fff; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
body.tp-mp2 .rail .rail-toggle:hover, body.tp-mp2 .rail .rail-toggle:focus-visible { color: var(--teal-dark); outline: none; }
body.tp-mp2 .rail .rail-toggle .ic { width: 22px; text-align: center; font-size: 14px; }
body.tp-mp2 .tp-rail-tip { position: fixed; z-index: 120; transform: translateY(-50%); background: #0f172a; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 6px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
body.tp-mp2 .tp-rail-tip::before { content: ''; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #0f172a; }
@media (min-width: 981px) {
    body.tp-mp2 .rail { display: flex; flex-direction: column; }
    body.tp-mp2 .rail > * { flex: 0 0 auto; }
    body.tp-mp2.tp-rail-mini .app { grid-template-columns: 64px minmax(0, 1fr); }
    body.tp-mp2.tp-rail-mini .rail { padding: 14px 8px 10px; }
    body.tp-mp2.tp-rail-mini .rail .newpost { font-size: 0; padding: 8px 0; }
    body.tp-mp2.tp-rail-mini .rail .newpost::before { content: '+'; font-size: 20px; line-height: 1; font-weight: 700; }
    body.tp-mp2.tp-rail-mini .rail .grp { font-size: 0; height: 1px; padding: 0; margin: 8px 6px; background: var(--border); }
    body.tp-mp2.tp-rail-mini .rail .grp:first-child { height: 0; margin: 0; background: none; }
    body.tp-mp2.tp-rail-mini .rail a.item, body.tp-mp2.tp-rail-mini .rail span.item { position: relative; justify-content: center; gap: 0; padding: 10px 0; font-size: 0; }
    body.tp-mp2.tp-rail-mini .rail .item .ic { width: auto; font-size: 16px; }
    body.tp-mp2.tp-rail-mini .rail .item .beta { display: none; }
    body.tp-mp2.tp-rail-mini .rail .item .n { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; margin: 0; padding: 0; border-radius: 50%; font-size: 0; background: var(--muted); }
    body.tp-mp2.tp-rail-mini .rail .item .n.hot { background: var(--red); width: 8px; height: 8px; padding: 0; border-radius: 50%; }
    body.tp-mp2.tp-rail-mini .rail .switch { display: none; }
    body.tp-mp2.tp-rail-mini .rail .rail-toggle { justify-content: center; gap: 0; padding: 12px 0; margin-bottom: -10px; font-size: 0; }
    body.tp-mp2.tp-rail-mini .rail .rail-toggle .ic { width: auto; font-size: 16px; }
    body.tp-mp2.tp-rail-mini .rail .rail-toggle .ic i::before { content: '\f101'; }
    body.tp-mp2.tp-rail-mini .rail .sub { margin: 0; padding: 0; border-left: 0; }
    body.tp-mp2.tp-rail-mini .rail .mprow .chev { display: none; } /* step C: no toggle in the icon rail, the block keeps its state */
    /* step C follow-up (Fable-site): the step A .sub rules (13 px text) outrank the icon-rail rules, so the open block showed text; icons only here */
    body.tp-mp2.tp-rail-mini .rail .sub a.item { padding: 10px 0; font-size: 0; justify-content: center; gap: 0; }
    body.tp-mp2.tp-rail-mini .rail .sub a.item .ic { width: auto; font-size: 16px; }
    body.tp-mp2.tp-rail-mini .rail .sub .newpost { margin: 4px 0 6px; padding: 8px 0; font-size: 0; }
}
/* One frame, step B fixes (10/24/2026, Chris): (1) the search pills show only the pill. The hero and search-page inputs
   (.big-search input.q) had the browser's own border and focus outline inside the rounded pill; they are borderless and
   transparent now, like the header search input, and the focus ring moves to the pill itself (border plus a soft halo) for
   the hero, the search page and the header search. (2) The rail is flush to the window's left edge at every width, the same
   as STEP 3b / 3c in css/site-v2.css: the shell has no side padding or centering (wave 4's 50% - 700 px padding put the rail
   37 px in on a 1728 window and 218 px in on 1836), and the header goes full bleed with 12 px side padding so the logo sits
   over the rail at x = 12. The content keeps its centered 1400 px column (1360 from 1600 up) inside the content area; the
   footer keeps the centered wrap. Under 981 px the rail is hidden and nothing here applies. */
body.tp-mp2 .big-search input.q { border: 0; background: transparent; outline: none; font: inherit; color: #334155; padding: 6px 0; min-width: 0; width: 100%; }
body.tp-mp2 .big-search input.q::placeholder { color: #64748b; }
body.tp-mp2 .big-search input.q:focus-visible, body.tp-mp2 header.site .gsearch input:focus-visible { outline: none; }
body.tp-mp2 .big-search:focus-within, body.tp-mp2 header.site .gsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #dbeafe; }
@media (min-width: 981px) {
    body.tp-mp2 .app { max-width: none; width: auto; margin: 0; padding: 0; background: none; }
    body.tp-mp2 header.site .wrap { max-width: none; margin: 0; padding: 0 12px; }
}
/* One frame, step B, member header parity (10/24/2026, Chris): a member sees the same header on a Marketplace page as on an
   app page, pixel for pixel (logo over the rail at 12 px, 320 px search, envelope with the red count, green avatar circle,
   account menu). Both masters render TPBusinessData.SiteShell.Header, so only the CSS differed. This block is every
   header rule of css/site-v2.css (header.site, .gsearch, .acct, .avatar, .bell, .menu-btn, .mp2-sheet, .search-open),
   copied by a script in file order under body.tp-mp2.tp-mp2-member (the master adds tp-mp2-member for members), so the
   two-class selector beats the older Marketplace header rules above. Visitors keep the Marketplace header rules above.
   The brand tokens (--tp-green and friends) come from css/tp-tokens.css, linked by the master like TPMasterV2. When
   site-v2.css header rules change, regenerate this block (deliverables note: the extract script keys on those selectors). */
body.tp-mp2.tp-mp2-member header.site { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
body.tp-mp2.tp-mp2-member header.site .wrap { display: flex; align-items: center; gap: 6px; height: 62px; }
body.tp-mp2.tp-mp2-member header.site .brand { display: flex; align-items: center; gap: 8px; margin-right: 18px; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--ink); font-size: 20px; }
body.tp-mp2.tp-mp2-member header.site .brand .mark { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--tp-green), var(--blue)); display: inline-block; }
body.tp-mp2.tp-mp2-member header.site nav { display: flex; align-items: center; gap: 2px; flex: 1; }
body.tp-mp2.tp-mp2-member header.site nav a { color: var(--text); font-weight: 500; padding: 8px 12px; border-radius: 6px; font-size: 15px; }
body.tp-mp2.tp-mp2-member header.site nav a:hover { background: var(--panel); color: var(--blue); text-decoration: none; }
body.tp-mp2.tp-mp2-member header.site nav a.on { color: var(--green); }
body.tp-mp2.tp-mp2-member header.site .beta { font-size: 10px; font-weight: 800; color: #0369a1; background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 10px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
body.tp-mp2.tp-mp2-member header.site .tools { display: flex; align-items: center; gap: 8px; }
body.tp-mp2.tp-mp2-member header.site .gsearch { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 50px; padding: 7px 14px; color: var(--muted); font-size: 14px; background: var(--bg); margin: 0 12px; }
body.tp-mp2.tp-mp2-member header.site .gsearch .k { margin-left: auto; font-size: 11px; color: var(--label); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
body.tp-mp2.tp-mp2-member header.site .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--tp-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
body.tp-mp2.tp-mp2-member header.site .bell { position: relative; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
body.tp-mp2.tp-mp2-member header.site .bell .count { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
@media (max-width: 980px) {
    body.tp-mp2.tp-mp2-member header.site nav { display: none; }
}
@media (max-width: 760px) {
    body.tp-mp2.tp-mp2-member header.site .wrap { height: 54px; }
    body.tp-mp2.tp-mp2-member header.site nav { display: none; }
    body.tp-mp2.tp-mp2-member header.site .gsearch { display: none; }
}
body.tp-mp2.tp-mp2-member header.site .brand img { height: 30px; width: auto; display: block; }
body.tp-mp2.tp-mp2-member header.site .gsearch { position: relative; }
body.tp-mp2.tp-mp2-member header.site .gsearch input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; color: #334155; min-width: 0; }
body.tp-mp2.tp-mp2-member header.site .gsearch input::placeholder { color: #64748b; }
body.tp-mp2.tp-mp2-member header.site .gsearch button { border: 0; background: transparent; color: #64748b; cursor: pointer; padding: 0 2px; font-size: 15px; }
body.tp-mp2.tp-mp2-member .acct { position: relative; }
body.tp-mp2.tp-mp2-member .acct > a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; border-radius: 22px; padding: 3px 10px 3px 3px; font-weight: 600; font-size: 13px; color: #0f172a; max-width: 230px; }
body.tp-mp2.tp-mp2-member .acct > a:hover { text-decoration: none; border-color: #2d80d2; background: #f6f9fd; }
body.tp-mp2.tp-mp2-member .acct .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tp-mp2.tp-mp2-member .acct .menu { display: none; position: absolute; right: 0; top: 44px; min-width: 250px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.14); padding: 6px 0; z-index: 60; }
body.tp-mp2.tp-mp2-member .acct.open .menu, body.tp-mp2.tp-mp2-member .acct:hover .menu { display: block; }
body.tp-mp2.tp-mp2-member .acct .menu a { display: block; padding: 8px 14px; font-size: 14px; color: #1e293b; }
body.tp-mp2.tp-mp2-member .acct .menu a:hover { background: var(--tp-green-soft); color: var(--tp-green-ink); text-decoration: none; }
body.tp-mp2.tp-mp2-member .acct .menu .hd { padding: 10px 14px; border-bottom: 1px solid #eef1f5; font-weight: 700; color: #0f172a; }
body.tp-mp2.tp-mp2-member .acct .menu .hd small { display: block; font-weight: 400; color: #64748b; font-size: 12px; }
body.tp-mp2.tp-mp2-member .acct .menu a.out { color: #d9534f; border-top: 1px solid #eef1f5; margin-top: 4px; }
@media (max-width: 760px) {
    body.tp-mp2.tp-mp2-member header.site .brand { display: inline-flex; align-items: center; min-height: 40px; }
}
body.tp-mp2.tp-mp2-member header.site nav.member { flex: 0 1 auto; }
body.tp-mp2.tp-mp2-member header.site nav .dd { position: relative; }
body.tp-mp2.tp-mp2-member header.site nav .dd-btn { font: inherit; font-size: 15px; font-weight: 500; color: var(--text); background: transparent; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
body.tp-mp2.tp-mp2-member header.site nav .dd-btn:hover, body.tp-mp2.tp-mp2-member header.site nav .dd.open .dd-btn { background: var(--panel); color: var(--blue); }
body.tp-mp2.tp-mp2-member header.site nav .dd-menu { display: none; position: absolute; left: 0; top: calc(100% + 4px); min-width: 240px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.14); padding: 6px 0; z-index: 70; }
body.tp-mp2.tp-mp2-member header.site nav .dd:hover .dd-menu, body.tp-mp2.tp-mp2-member header.site nav .dd.open .dd-menu, body.tp-mp2.tp-mp2-member header.site nav .dd:focus-within .dd-menu { display: block; }
body.tp-mp2.tp-mp2-member header.site nav .dd-menu a, body.tp-mp2.tp-mp2-member header.site nav .dd-menu .locked { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 14px; font-weight: 400; border-radius: 0; color: var(--text); white-space: nowrap; }
body.tp-mp2.tp-mp2-member header.site nav .dd-menu a:hover { background: var(--tp-green-soft); color: var(--tp-green-ink); text-decoration: none; }
body.tp-mp2.tp-mp2-member header.site nav .dd-menu .locked { color: var(--muted); cursor: default; }
body.tp-mp2.tp-mp2-member header.site nav .dd-menu i { width: 16px; text-align: center; color: var(--muted); }
body.tp-mp2.tp-mp2-member header.site .tools .btn.dash { white-space: nowrap; }
body.tp-mp2.tp-mp2-member header.site .brand { flex: none; margin-right: 14px; }
body.tp-mp2.tp-mp2-member header.site nav.member { flex: 0 0 auto; }
body.tp-mp2.tp-mp2-member header.site .gsearch { flex: 1 1 220px; min-width: 220px; }
body.tp-mp2.tp-mp2-member header.site .tools { flex: none; }
body.tp-mp2.tp-mp2-member .acct > a { padding: 3px; gap: 0; }
body.tp-mp2.tp-mp2-member .acct .nm { display: none; }
body.tp-mp2.tp-mp2-member .acct .menu .hd small + small { margin-top: 2px; }
@media (max-width: 1280px) {
    body.tp-mp2.tp-mp2-member header.site .brand { margin-right: 8px; }
    body.tp-mp2.tp-mp2-member header.site nav .dd-btn { padding: 8px 6px; font-size: 14px; }
    body.tp-mp2.tp-mp2-member header.site nav a { padding: 8px 8px; font-size: 14px; }
    body.tp-mp2.tp-mp2-member header.site .gsearch { min-width: 180px; flex-basis: 180px; margin: 0 8px; }
}
body.tp-mp2.tp-mp2-member header.site .menu-btn { display: none; font-size: 20px; color: var(--text); background: transparent; border: 0; padding: 6px 8px; cursor: pointer; }
@media (max-width: 980px) {
    body.tp-mp2.tp-mp2-member header.site .menu-btn { display: inline-flex; }
    body.tp-mp2.tp-mp2-member header.site .tools .btn.dash { display: none; }
}
@media (max-width: 760px) {
    body.tp-mp2.tp-mp2-member header.site .tools .acct .nm { display: none; }
    body.tp-mp2.tp-mp2-member header.site .wrap { height: 54px; gap: 4px; }
    body.tp-mp2.tp-mp2-member header.site .brand { flex: 0 1 auto; min-width: 0; margin-right: 6px; }
    body.tp-mp2.tp-mp2-member header.site .brand img { width: 100%; height: auto; max-height: 30px; max-width: 283px; }
    body.tp-mp2.tp-mp2-member.search-open header.site .gsearch { display: flex; position: fixed; left: 10px; right: 10px; top: 62px; z-index: 56; background: #fff; margin: 0; max-width: none; }
}
body.tp-mp2.tp-mp2-member .acct .menu a.alt { color: var(--muted); }
body.tp-mp2.tp-mp2-member header.site nav.member { flex: 0 0 auto; }
body.tp-mp2.tp-mp2-member header.site .gsearch { flex: 0 1 320px; max-width: 320px; margin-left: auto; }
@media (max-width: 760px) {
    body.tp-mp2.tp-mp2-member header.site nav.member { display: none; }
}
body.tp-mp2.tp-mp2-member .mp2-sheet { position: fixed; left: 0; right: 0; top: 54px; bottom: 0; background: #fff; z-index: 95; overflow: auto; padding: 12px 16px 90px; }
body.tp-mp2.tp-mp2-member .mp2-sheet[hidden] { display: none !important; }
body.tp-mp2.tp-mp2-member .mp2-sheet .btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
body.tp-mp2.tp-mp2-member .mp2-sheet .btns:empty { display: none; }
body.tp-mp2.tp-mp2-member .mp2-sheet .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); padding: 14px 0 4px; }
body.tp-mp2.tp-mp2-member .mp2-sheet a.item, body.tp-mp2.tp-mp2-member .mp2-sheet a, body.tp-mp2.tp-mp2-member .mp2-sheet .locked { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text); text-decoration: none; }
body.tp-mp2.tp-mp2-member .mp2-sheet a.item.on { color: var(--tp-green-ink); font-weight: 600; }
body.tp-mp2.tp-mp2-member .mp2-sheet .locked { color: var(--muted); }
body.tp-mp2.tp-mp2-member .mp2-sheet .ic { width: 22px; text-align: center; color: var(--muted); font-size: 14px; }
body.tp-mp2.tp-mp2-member .mp2-sheet .n { margin-left: auto; font-size: 12px; font-weight: 700; color: #fff; background: var(--tp-green); border-radius: 999px; padding: 1px 8px; }
body.tp-mp2.tp-mp2-member .mp2-sheet .n.hot { background: #c63939; }
@media (min-width: 1600px) {
    body.tp-mp2.tp-mp2-member header.site .wrap { max-width: 1640px; }
}
@media (min-width: 981px) {
    body.tp-mp2.tp-mp2-member header.site .wrap { max-width: none; margin: 0; padding: 0 12px; }
}
/* Marketplace-only header rules above that css/site-v2.css never sets, put back to the site values for members: the
   app master loads Bootstrap, whose reboot gives buttons the page font and images vertical-align: middle, so the search arrow and
   menu buttons inherit the font here too; the 760 px menu button and bell keep their site size; the phone sheet hot count
   keeps the site pill shape. */
@media (max-width: 760px) { body.tp-mp2.tp-mp2-member header.site #tpV2MenuBtn { width: auto; height: auto; } body.tp-mp2.tp-mp2-member header.site .bell { width: 36px; height: 36px; } }
body.tp-mp2.tp-mp2-member .mp2-sheet .n.hot { color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: 12px; }
body.tp-mp2.tp-mp2-member header.site button { font-family: inherit; line-height: inherit; }
body.tp-mp2.tp-mp2-member header.site img { vertical-align: middle; }

/* 11/01/2026: plan locks. A locked rail item stays visible, greyed, with an inline lock; the click opens the lock panel (.tp-lock). */
body.tp-v2 .rail a.item.locked, body.tp-mp2 .rail a.item.locked { color: var(--muted); font-weight: 600; cursor: pointer; }
body.tp-v2 .rail a.item.locked:hover, body.tp-mp2 .rail a.item.locked:hover { background: var(--panel); color: var(--muted); text-decoration: none; }
body.tp-v2 .rail a.item.locked .ic, body.tp-mp2 .rail a.item.locked .ic { color: #94a3b8; display: inline-flex; justify-content: center; }
.tp-lock { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tp-lock[hidden] { display: none; }
.tp-lock-card { background: #fff; border-radius: 12px; max-width: 420px; width: 100%; padding: 22px 22px 18px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); }
.tp-lock-head { display: flex; align-items: center; gap: 10px; font-size: 18px; color: #1f2a37; }
.tp-lock-ic { display: inline-flex; width: 32px; height: 32px; border-radius: 8px; background: #f1f5f9; color: #64748b; align-items: center; justify-content: center; flex: none; }
.tp-lock-blurb { margin: 12px 0 6px; color: #334155; font-size: 15px; line-height: 1.45; }
.tp-lock-plan { margin: 0 0 16px; color: #5b6676; font-size: 14px; }
.tp-lock-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 11/01/2026: the "Keep posting" box a read-only member (no-card trial over) sees where they would post, reply, message or see stats */
.tp-keep { border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px; padding: 16px 18px; margin: 12px 0; }
.tp-keep-head { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #1f2a37; }
.tp-keep-ic { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; background: #fef3c7; color: #b45309; align-items: center; justify-content: center; flex: none; }
.tp-keep p { margin: 8px 0 12px; color: #334155; font-size: 14.5px; line-height: 1.45; }

/* 11/04/2026 (Chris, New Post review step): two layout guards.
   1. The rail column's white runs the full page height. The rail itself stays sticky with its own scroll, one viewport tall, so on a
      long page the column under it showed the page background and looked cut off; the grid paints the column instead.
   2. A crafted long word cannot push a card past the page edge: the preview on the new post page, the published post, and the list
      cards wrap anywhere. */
@media (min-width: 981px) {
    body.tp-mp2 .app { background: linear-gradient(to right, #fff 0, #fff 239px, var(--border) 239px, var(--border) 240px, transparent 240px); }
}
body.tp-mp2 .title, body.tp-mp2 .text, body.tp-mp2 .post .body, body.tp-mp2 #tpMp2Preview, body.tp-mp2 .mp2-newpost textarea.input { overflow-wrap: anywhere; word-break: break-word; }