/* TeamingPro site, new look (S5 wave 0, 10/23/2026). The shared part of css/marketplace-v2.css, built by
   scratchpad/build_site_v2_css.py and re-scoped under body.tp-v2 so nothing here reaches a classic page. Bootstrap 3 is
   still loaded under the new master while pages are converted, so four names were renamed to avoid its rules:
   .row is .flex, .modal is .dlg, .pager is .pagerow, .label is .lbl. The greens come from css/tp-tokens.css
   (--tp-green and friends); change them there, not here. Hand rules follow the generated part. */
body.tp-v2 { 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-v2 *, body.tp-v2 *::before, body.tp-v2 *::after { box-sizing: border-box; }
body.tp-v2 {
    --blue: #2d80d2; --blue-dark: #1d5fa3; --ink: #0f172a; --text: #334155; --muted: #64748b; --label: #94a3b8;
    --border: #e2e8f0; --bg: #f8fafc; --green: var(--tp-green-ink); --amber: #f59e0b;
    --amber-dark: #d97706; --red: #b91c1c; --panel: #f1f5f9;
}
body.tp-v2 h1, body.tp-v2 h2, body.tp-v2 h3, body.tp-v2 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-v2 h1 { font-size: 28px; }
body.tp-v2 h2 { font-size: 20px; }
body.tp-v2 h3 { font-size: 16px; }
body.tp-v2 h4 { font-size: 14px; }
body.tp-v2 p { margin: 0 0 10px; }
body.tp-v2 a { color: var(--blue); text-decoration: none; }
body.tp-v2 a:hover { color: var(--blue-dark); text-decoration: underline; }
body.tp-v2 img { max-width: 100%; }
body.tp-v2 .wrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
body.tp-v2 .muted { color: var(--muted); }
body.tp-v2 .small { font-size: 13px; }
body.tp-v2 .tiny { font-size: 12px; }
body.tp-v2 .right { text-align: right; }
body.tp-v2 .center { text-align: center; }
body.tp-v2 .flex { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
body.tp-v2 .flex.between { justify-content: space-between; }
body.tp-v2 .stack > * + * { margin-top: 12px; }
body.tp-v2 .mt8 { margin-top: 8px; }
body.tp-v2 .mt16 { margin-top: 16px; }
body.tp-v2 .mt24 { margin-top: 24px; }
body.tp-v2 .mb8 { margin-bottom: 8px; }
body.tp-v2 .mb16 { margin-bottom: 16px; }
body.tp-v2 .hide { display: none; }
body.tp-v2 .rel { position: relative; }
body.tp-v2 header.site { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
body.tp-v2 header.site .wrap { display: flex; align-items: center; gap: 6px; height: 62px; }
body.tp-v2 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-v2 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-v2 header.site nav { display: flex; align-items: center; gap: 2px; flex: 1; }
body.tp-v2 header.site nav a { color: var(--text); font-weight: 500; padding: 8px 12px; border-radius: 6px; font-size: 15px; }
body.tp-v2 header.site nav a:hover { background: var(--panel); color: var(--blue); text-decoration: none; }
body.tp-v2 header.site nav a.on { color: var(--green); }
body.tp-v2 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-v2 header.site .tools { display: flex; align-items: center; gap: 8px; }
body.tp-v2 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; }
/* 11/09/2026 (Chris's click test): a member on a public or plain page (terms, privacy, the company page) has no site nav between the logo
   and the search, so the search and the icons stopped mid-header. When the search directly follows the logo it takes the dashboard
   header's shape: 320px wide, pushed to the right with the icons at the edge. Visitors keep the nav and the wide search. */
body.tp-v2 header.site .brand + .gsearch { flex: 0 1 320px; max-width: 320px; margin-left: auto; }
body.tp-v2 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-v2 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-v2 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-v2 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-v2 .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-v2 .btn:hover { text-decoration: none; }
body.tp-v2 .btn.teal { background: var(--tp-green); border-color: var(--tp-green); color: #fff; }
body.tp-v2 .btn.teal:hover { background: var(--tp-green-dark); color: #fff; }
body.tp-v2 .btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
body.tp-v2 .btn.blue:hover { background: var(--blue-dark); color: #fff; }
body.tp-v2 .btn.amber { background: var(--amber); border-color: var(--amber-dark); color: #fff; }
body.tp-v2 .btn.amber:hover { background: var(--amber-dark); }
body.tp-v2 .btn.ghost { background: #fff; border-color: var(--border); color: var(--text); }
body.tp-v2 .btn.ghost:hover { border-color: var(--blue); color: var(--blue); }
body.tp-v2 .btn.ghost.on { border-color: var(--tp-green); color: var(--tp-green-dark); background: var(--tp-green-soft); }
body.tp-v2 .btn.pill { border-radius: 50px; }
body.tp-v2 .btn.sm { padding: 5px 11px; font-size: 13px; }
body.tp-v2 .btn.lg { padding: 12px 22px; font-size: 16px; }
body.tp-v2 .btn.block { width: 100%; justify-content: center; }
body.tp-v2 .btn.green { background: var(--green); border-color: var(--green); color: #fff; border-radius: 50px; }
body.tp-v2 .btn.link { background: none; border: none; color: var(--blue); padding: 4px 6px; }
body.tp-v2 .btn.danger { background: #fff; border-color: #fecaca; color: var(--red); }
body.tp-v2 .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 62px); }
body.tp-v2 .rail { background: #fff; border-right: 1px solid var(--border); padding: 14px 12px; position: sticky; top: 62px; height: calc(100vh - 62px); overflow: auto; }
body.tp-v2 .rail .newpost { margin-bottom: 14px; }
body.tp-v2 .rail .grp { font-size: 11px; font-weight: 800; color: var(--label); text-transform: uppercase; letter-spacing: .06em; padding: 10px 10px 4px; }
body.tp-v2 .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-v2 .rail a.item:hover { background: var(--panel); text-decoration: none; color: var(--blue); }
body.tp-v2 .rail a.item.on { background: var(--tp-green-soft); color: var(--tp-green-dark); }
body.tp-v2 .rail a.item .ic { width: 22px; text-align: center; color: var(--muted); font-size: 14px; }
body.tp-v2 .rail a.item.on .ic { color: var(--tp-green-dark); }
body.tp-v2 .rail a.item .n { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
body.tp-v2 .rail a.item .n.hot { background: var(--red); color: #fff; border-radius: 9px; padding: 0 6px; font-weight: 800; font-size: 11px; }
body.tp-v2 .rail .mini { margin: 16px 4px 0; font-size: 12px; color: var(--muted); padding: 0 6px; }
body.tp-v2 .rail .collapse { display: block; text-align: right; font-size: 12px; color: var(--label); padding: 4px 10px; }
body.tp-v2 .content { padding: 20px 24px 40px; min-width: 0; }
body.tp-v2 .content .wrap { padding: 0; max-width: 1120px; margin: 0; }
body.tp-v2 .content .wrap.wide { max-width: none; }
@media (max-width: 980px) {
    body.tp-v2 .app { grid-template-columns: 1fr; }
    body.tp-v2 .rail { display: none; }
    body.tp-v2 .content { padding: 14px 14px 80px; }
}
body.tp-v2 .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-v2 .card + .card { margin-top: 14px; }
body.tp-v2 .card.lift:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.06); transition: .2s; }
body.tp-v2 .card.top-teal { border-top: 4px solid var(--tp-green); }
body.tp-v2 .card.top-amber { border-top: 4px solid var(--amber); }
body.tp-v2 .card.info { background: #eff6ff; border-color: #bfdbfe; }
body.tp-v2 .card.soft { background: #fbfcfd; }
body.tp-v2 .card.sponsor { background: #fffdf5; border-color: #fde68a; }
body.tp-v2 .card.tight { padding: 12px 14px; }
body.tp-v2 .lbl { font-size: 11.5px; color: var(--label); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 6px; }
body.tp-v2 .title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0; font-family: 'Montserrat', sans-serif; }
body.tp-v2 a.title { color: var(--ink); }
body.tp-v2 a.title:hover { color: var(--blue); text-decoration: none; }
body.tp-v2 .meta { font-size: 13.5px; color: var(--muted); }
body.tp-v2 .meta .sep { margin: 0 5px; color: #cbd5e1; }
body.tp-v2 .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-v2 .badge.verified { background: var(--tp-green-soft); color: var(--tp-green-ink); border: 1px solid var(--tp-green-line); }
body.tp-v2 .badge.sam { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
body.tp-v2 .badge.small { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
body.tp-v2 .badge.set { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
body.tp-v2 .badge.prime { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
body.tp-v2 .badge.sponsor { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
body.tp-v2 .badge.ad { background: var(--panel); color: #475569; border: 1px solid #cbd5e1; }
body.tp-v2 .badge.new { background: #fee2e2; color: var(--red); border: 1px solid #fecaca; }
body.tp-v2 .badge.gray { background: var(--panel); color: var(--muted); border: 1px solid var(--border); }
body.tp-v2 .badge.live { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
body.tp-v2 .badge.paused { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
body.tp-v2 .badge.expired { background: #fee2e2; color: var(--red); border: 1px solid #fecaca; }
body.tp-v2 .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-v2 .chip:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
body.tp-v2 .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
body.tp-v2 .grid { display: grid; gap: 16px; }
body.tp-v2 .grid.main-rail { grid-template-columns: minmax(0, 1fr) 320px; }
body.tp-v2 .grid.rail-main { grid-template-columns: 260px minmax(0, 1fr); }
body.tp-v2 .grid.rail-main-rail { grid-template-columns: 250px minmax(0, 1fr) 300px; }
body.tp-v2 .grid.c2 { grid-template-columns: 1fr 1fr; }
body.tp-v2 .grid.c3 { grid-template-columns: repeat(3, 1fr); }
body.tp-v2 .grid.c4 { grid-template-columns: repeat(4, 1fr); }
body.tp-v2 .grid.c5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) {
    body.tp-v2 .grid.main-rail, body.tp-v2 .grid.rail-main, body.tp-v2 .grid.rail-main-rail, body.tp-v2 .grid.c2, body.tp-v2 .grid.c3, body.tp-v2 .grid.c4, body.tp-v2 .grid.c5 { grid-template-columns: 1fr; }
    body.tp-v2 header.site nav { display: none; }
}
body.tp-v2 .hero { background: linear-gradient(180deg, #eef6ff, var(--bg)); padding: 32px 0 20px; }
body.tp-v2 .hero h1 { font-size: 32px; }
body.tp-v2 .hero .lead { font-size: 17px; color: var(--text); max-width: 680px; }
body.tp-v2 .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
body.tp-v2 .tile { display: block; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px; color: var(--text); }
body.tp-v2 .tile:hover { border-color: var(--blue); text-decoration: none; transform: translateY(-2px); transition: .15s; }
body.tp-v2 .tile.on { border-color: var(--tp-green); box-shadow: 0 0 0 2px var(--tp-green-soft); }
body.tp-v2 .tile .ico { width: 38px; height: 38px; border-radius: 8px; background: var(--tp-green-soft); color: var(--tp-green-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; font-size: 18px; }
body.tp-v2 .tile h3 { margin-bottom: 4px; }
body.tp-v2 .tile p { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
body.tp-v2 .tile .counts { font-size: 13px; color: var(--text); font-weight: 600; }
body.tp-v2 .tile .counts .new { color: var(--tp-green-dark); }
@media (max-width: 980px) {
    body.tp-v2 .tiles { grid-template-columns: 1fr 1fr; }
}
body.tp-v2 .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-v2 .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-v2 .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-v2 .sel.on { border-color: var(--tp-green); background: var(--tp-green-soft); color: var(--tp-green-dark); font-weight: 600; }
body.tp-v2 .sel::after { content: '\25BE'; color: var(--muted); font-size: 11px; }
body.tp-v2 .sortrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 14px 0 10px; }
body.tp-v2 .kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--tp-green-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
body.tp-v2 .kicker.amber { color: #92400e; }
body.tp-v2 .kicker.blue { color: #075985; }
body.tp-v2 .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--tp-green); }
body.tp-v2 .dot.gray { background: #cbd5e1; }
body.tp-v2 .dot.amber { background: var(--amber); }
body.tp-v2 .stat { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
body.tp-v2 .stat .n { font-size: 26px; font-weight: 800; color: var(--ink); font-family: 'Montserrat', sans-serif; line-height: 1.1; }
body.tp-v2 .stat .d { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
body.tp-v2 .stat .up { color: var(--tp-green-dark); font-weight: 700; font-size: 12.5px; }
body.tp-v2 .stat .down { color: var(--red); font-weight: 700; font-size: 12.5px; }
body.tp-v2 table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
body.tp-v2 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-v2 table.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
body.tp-v2 table.tbl tr:hover td { background: #fbfcfd; }
body.tp-v2 table.tbl tr.sel td { background: var(--tp-green-soft); }
body.tp-v2 table.tbl td .sub { display: block; font-size: 12.5px; color: var(--muted); }
body.tp-v2 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-v2 table.tbl .ico:hover { border-color: var(--blue); color: var(--blue); }
body.tp-v2 .field { margin-bottom: 14px; }
body.tp-v2 .field label { display: block; font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 5px; }
body.tp-v2 .field .hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
body.tp-v2 .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-v2 .input.ph { color: var(--label); }
body.tp-v2 .input.ta { min-height: 110px; }
body.tp-v2 .input.focus { border-color: var(--blue); box-shadow: 0 0 0 3px #dbeafe; }
body.tp-v2 .inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.tp-v2 .check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 6px 0; }
body.tp-v2 .check .box { width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 4px; flex-shrink: 0; margin-top: 1px; }
body.tp-v2 .check .box.on { background: var(--tp-green); border-color: var(--tp-green); position: relative; }
body.tp-v2 .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-v2 .toggle { display: inline-block; width: 38px; height: 22px; border-radius: 11px; background: #cbd5e1; position: relative; vertical-align: middle; }
body.tp-v2 .toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
body.tp-v2 .toggle.on { background: var(--tp-green); }
body.tp-v2 .toggle.on::after { left: 19px; }
body.tp-v2 .dlg-bg { background: rgba(15,23,42,.45); padding: 30px 16px; border-radius: 12px; }
body.tp-v2 .dlg { 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-v2 .dlg .head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
body.tp-v2 .dlg .foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); background: #fbfcfd; }
body.tp-v2 .dlg .bodyx { padding: 18px 20px; }
body.tp-v2 .progress { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
body.tp-v2 .progress span { display: block; height: 100%; background: var(--tp-green); }
body.tp-v2 .notice { border-radius: 8px; padding: 10px 14px; font-size: 14px; border: 1px solid; }
body.tp-v2 .notice.ok { background: var(--tp-green-soft); border-color: var(--tp-green-line); color: var(--tp-green-ink); }
body.tp-v2 .notice.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.tp-v2 .notice.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
body.tp-v2 .notice.err { background: #fee2e2; border-color: #fecaca; color: var(--red); }
body.tp-v2 .list { list-style: none; margin: 0; padding: 0; }
body.tp-v2 .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-v2 .list li:last-child { border-bottom: none; }
body.tp-v2 .checks { list-style: none; padding: 0; margin: 0; }
body.tp-v2 .checks li { padding: 4px 0 4px 24px; position: relative; font-size: 14px; }
body.tp-v2 .checks li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 5px; height: 10px; border: solid var(--tp-green-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.tp-v2 .checks li.no::before { border-color: #cbd5e1; }
body.tp-v2 .checks li.no { color: var(--label); }
body.tp-v2 .tabbar { display: none; }
body.tp-v2 .burger { display: none; }
@media (max-width: 760px) {
    body.tp-v2 .wrap { padding: 0 14px; }
    body.tp-v2 header.site .wrap { height: 54px; }
    body.tp-v2 header.site nav { display: none; }
    body.tp-v2 .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-v2 .app { grid-template-columns: 1fr; min-height: 0; }
    body.tp-v2 .rail { display: none; }
    body.tp-v2 .content { padding: 12px 14px 90px; }
    body.tp-v2 header.site .gsearch { display: none; }
    body.tp-v2 .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-v2 .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); font-weight: 600; }
    body.tp-v2 .tabbar a.on { color: var(--tp-green-dark); }
    body.tp-v2 .tabbar a .ic { font-size: 18px; }
    body.tp-v2 .tabbar a.plus .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--tp-green); 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-v2 .grid.main-rail, body.tp-v2 .grid.rail-main, body.tp-v2 .grid.rail-main-rail, body.tp-v2 .grid.c2, body.tp-v2 .grid.c3, body.tp-v2 .grid.c4 { grid-template-columns: 1fr; }
    body.tp-v2 .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    body.tp-v2 .tile { padding: 12px; }
    body.tp-v2 .tile p { display: none; }
    body.tp-v2 .hero h1 { font-size: 24px; }
    body.tp-v2 .hero .lead { font-size: 15px; }
    body.tp-v2 .filterbar { position: static; }
}

body.tp-v2 header.site .brand img { height: 30px; width: auto; display: block; }
body.tp-v2 header.site .gsearch { position: relative; }
body.tp-v2 header.site .gsearch input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; color: #334155; min-width: 0; }
body.tp-v2 header.site .gsearch input::placeholder { color: #64748b; }
body.tp-v2 header.site .gsearch button { border: 0; background: transparent; color: #64748b; cursor: pointer; padding: 0 2px; font-size: 15px; }
body.tp-v2 .acct { position: relative; }
body.tp-v2 .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-v2 .acct > a:hover { text-decoration: none; border-color: #2d80d2; background: #f6f9fd; }
body.tp-v2 .acct .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tp-v2 .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-v2 .acct.open .menu, body.tp-v2 .acct:hover .menu { display: block; }
body.tp-v2 .acct .menu a { display: block; padding: 8px 14px; font-size: 14px; color: #1e293b; }
body.tp-v2 .acct .menu a:hover { background: var(--tp-green-soft); color: var(--tp-green-ink); text-decoration: none; }
body.tp-v2 .acct .menu .hd { padding: 10px 14px; border-bottom: 1px solid #eef1f5; font-weight: 700; color: #0f172a; }
body.tp-v2 .acct .menu .hd small { display: block; font-weight: 400; color: #64748b; font-size: 12px; }
body.tp-v2 .acct .menu a.out { color: #d9534f; border-top: 1px solid #eef1f5; margin-top: 4px; }
body.tp-v2 .rail .n { font-variant-numeric: tabular-nums; }
body.tp-v2 .switch { font-size: 12px; color: #64748b; margin: 10px 4px 0; padding: 0 6px; }
body.tp-v2 .text p { margin: 0 0 10px; }
body.tp-v2 .text ul, body.tp-v2 .text ol { padding-left: 20px; }
body.tp-v2 .hero { margin: -20px -24px 20px; padding: 28px 24px 22px; }
body.tp-v2 .stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.tp-v2 .stats4.three { grid-template-columns: repeat(3, 1fr); }
body.tp-v2 .list li a.t { color: #0f172a; font-weight: 600; }
body.tp-v2 .kicker a { color: inherit; }
body.tp-v2 textarea.input { resize: vertical; min-height: 90px; }
body.tp-v2 .notice { margin-top: 8px; }
@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-v2 .grid.main-rail, body.tp-v2 .grid.rail-main, body.tp-v2 .grid.rail-main-rail, body.tp-v2 .grid.c2, body.tp-v2 .grid.c3, body.tp-v2 .grid.c4, body.tp-v2 .grid.c5 { grid-template-columns: minmax(0, 1fr); }
    body.tp-v2 .tiles, body.tp-v2 .stats4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.tp-v2 .grid > *, body.tp-v2 .tiles > *, body.tp-v2 .stats4 > *, body.tp-v2 .card { min-width: 0; }
}
body.tp-v2 .tp-loading-text { font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body.tp-v2 .filterbar label.q { cursor: text; }
body.tp-v2 .filterbar label.q input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; color: #334155; min-width: 0; }
body.tp-v2 .filterbar label.q input::placeholder { color: #64748b; }
body.tp-v2 label.sel { cursor: pointer; white-space: nowrap; }
body.tp-v2 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-v2 label.sel input { border: 0; background: transparent; outline: none; font: inherit; color: inherit; width: 72px; padding: 0; }
body.tp-v2 label.sel input::placeholder { color: #94a3b8; font-weight: 400; }
body.tp-v2 .sel.text::after, body.tp-v2 .sel.flag::after { content: none; }
body.tp-v2 a.sel:hover { border-color: #2d80d2; text-decoration: none; }
body.tp-v2 a.sel.flag.on::before { content: '\2713'; font-size: 12px; }
body.tp-v2 .pagerow { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 16px; }
body.tp-v2 .tabs { display: flex; gap: 0; border-bottom: 1px solid #e2e8f0; margin-top: 16px; }
body.tp-v2 .tabs a { padding: 10px 14px; font-weight: 600; color: #64748b; border-bottom: 3px solid transparent; margin-bottom: -1px; }
body.tp-v2 .tabs a:hover { color: #0f172a; text-decoration: none; }
body.tp-v2 .tabs a.on { color: #0f172a; border-bottom-color: var(--tp-green); }
body.tp-v2 mark { background: #fef08a; color: inherit; padding: 0 2px; border-radius: 3px; }
body.tp-v2 .grid.c2 > .card { min-width: 0; }
body.tp-v2 .card.warn { background: #fef3c7; border-color: #fde68a; }
body.tp-v2 table.tbl a.btn { margin-bottom: 2px; }
body.tp-v2 table.tbl tr.selrow td { background: var(--tp-green-soft); }
/* Round 29a (10/23/2026): the "Searching all posts" strip on the search page */
/* 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. */
body.tp-v2 .app { max-width: 1400px; margin: 0 auto; width: 100%; }
body.tp-v2 .rail { border-left: 1px solid var(--border); }
@media (min-width: 1600px) {
    body.tp-v2 .content .wrap { max-width: 1360px; }
    body.tp-v2 .grid.main-rail { grid-template-columns: minmax(0, 1fr) 340px; }
    body.tp-v2 .grid.rail-main-rail { grid-template-columns: 260px minmax(0, 1fr) 320px; }
}
/* 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. */
@media (max-width: 760px) {
    body.tp-v2 .btn, body.tp-v2 .btn.sm { min-height: 40px; }
    body.tp-v2 .chip { display: inline-flex; align-items: center; min-height: 40px; }
    body.tp-v2 label.sel { display: inline-flex; align-items: center; min-height: 40px; }
    body.tp-v2 label.sel select { min-height: 40px; }
    body.tp-v2 .filterbar label.q { min-height: 40px; }
    body.tp-v2 .filterbar label.q input { min-height: 36px; }
    body.tp-v2 .tabbar a { flex: 1; min-height: 44px; justify-content: center; }
    body.tp-v2 footer.site a { display: inline-block; padding: 10px 5px; }
    body.tp-v2 header.site .brand { display: inline-flex; align-items: center; min-height: 40px; }
    body.tp-v2 .list li { min-height: 40px; padding: 4px 0; }
    body.tp-v2 .list li a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
    /* signed in: header menu button and bell, keyword chip x, the files toggle, text inputs, alert action links */
    body.tp-v2 .input { min-height: 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-v2 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-v2 a:focus-visible, body.tp-v2 button:focus-visible, body.tp-v2 input:focus-visible, body.tp-v2 select:focus-visible, body.tp-v2 textarea:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
@keyframes tpMp2Spin { to { transform: rotate(360deg); } }
body.tp-v2 .busy, body.tp-v2 .btn.busy { pointer-events: none; opacity: .65; cursor: progress; }
body.tp-v2 header.site nav.member { flex: 0 1 auto; }
body.tp-v2 header.site nav .dd { position: relative; }
body.tp-v2 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-v2 header.site nav .dd-btn:hover, body.tp-v2 header.site nav .dd.open .dd-btn { background: var(--panel); color: var(--blue); }
body.tp-v2 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-v2 header.site nav .dd:hover .dd-menu, body.tp-v2 header.site nav .dd.open .dd-menu, body.tp-v2 header.site nav .dd:focus-within .dd-menu { display: block; }
body.tp-v2 header.site nav .dd-menu a, body.tp-v2 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-v2 header.site nav .dd-menu a:hover { background: var(--tp-green-soft); color: var(--tp-green-ink); text-decoration: none; }
body.tp-v2 header.site nav .dd-menu .locked { color: var(--muted); cursor: default; }
body.tp-v2 header.site nav .dd-menu i { width: 16px; text-align: center; color: var(--muted); }
body.tp-v2 header.site .tools .btn.dash { white-space: nowrap; }
body.tp-v2 header.site .brand { flex: none; margin-right: 14px; }
body.tp-v2 header.site nav.member { flex: 0 0 auto; }
body.tp-v2 header.site .gsearch { flex: 1 1 220px; min-width: 220px; }
body.tp-v2 header.site .tools { flex: none; }
body.tp-v2 .acct > a { padding: 3px; gap: 0; }   /* round 28d: the circle alone, no caret */
body.tp-v2 .acct .nm { display: none; }
body.tp-v2 .acct .menu .hd small + small { margin-top: 2px; }
@media (max-width: 1280px) {
    body.tp-v2 header.site .brand { margin-right: 8px; }
    body.tp-v2 header.site nav .dd-btn { padding: 8px 6px; font-size: 14px; }
    body.tp-v2 header.site nav a { padding: 8px 8px; font-size: 14px; }
    body.tp-v2 header.site .gsearch { min-width: 180px; flex-basis: 180px; margin: 0 8px; }
}
body.tp-v2 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-v2 header.site .menu-btn { display: inline-flex; }
    body.tp-v2 header.site .tools .btn.dash { display: none; }
}
body.tp-v2 footer.site { margin-top: 32px; padding: 18px 0 26px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
body.tp-v2 footer.site .flex.between { gap: 10px 24px; }
body.tp-v2 footer.site .foot-about { display: flex; flex-wrap: wrap; gap: 4px 14px; }
body.tp-v2 footer.site .foot-about b { color: var(--ink); }
body.tp-v2 footer.site .foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
body.tp-v2 footer.site .foot-links a { color: var(--muted); text-decoration: none; }
body.tp-v2 footer.site .foot-links a:hover { color: var(--tp-green); text-decoration: underline; }
body.tp-v2 .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-v2 .grid.c2 .card > a.title { font-size: 15.5px; }
@media (max-width: 760px) {
    body.tp-v2 header.site .tools .acct .nm { display: none; }
    body.tp-v2 header.site .wrap { height: 54px; gap: 4px; }
    body.tp-v2 .content { padding: 12px 14px 90px; }
    body.tp-v2 .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-v2 .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: #64748b; font-weight: 600; }
    body.tp-v2 .tabbar a.on { color: var(--tp-green-dark); }
    body.tp-v2 .tabbar a .ic { font-size: 18px; }
    body.tp-v2 .tabbar a.plus .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--tp-green); 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-v2 .phone-hide { display: none !important; }
    body.tp-v2 .stats4 { grid-template-columns: 1fr 1fr; }
    body.tp-v2 .filterbar { position: static; padding: 10px; gap: 6px; }
    body.tp-v2 .filterbar label.q { flex-basis: 100%; min-width: 0; }
    body.tp-v2 label.sel select { max-width: 140px; }
    body.tp-v2 .tabs a { padding: 10px 10px; font-size: 14px; }
    body.tp-v2 header.site .brand { flex: 0 1 auto; min-width: 0; margin-right: 6px; }
    body.tp-v2 header.site .brand img { width: 100%; height: auto; max-height: 30px; max-width: 283px; }
    body.tp-v2 .hero { margin: 0 0 16px; padding: 18px 14px 14px; }
    body.tp-v2.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; }
}

/* ---- hand rules for the site (S5 wave 0, 10/23/2026) ---- */
/* Bootstrap's .row clearfix pseudo-elements would become flex items in a .flex row; the site master uses .flex only */
body.tp-v2 .flex::before, body.tp-v2 .flex::after { display: none; }
body.tp-v2 .badge { background: var(--panel); color: var(--text); min-width: 0; }
body.tp-v2 .lbl { display: block; padding: 0; }
body.tp-v2 .progress { margin: 0; box-shadow: none; }
body.tp-v2 .btn.teal:hover, body.tp-v2 .btn.blue:hover, body.tp-v2 .btn.amber:hover { text-decoration: none; }
/* the variants: plain = header, one column, footer (public reading pages); member = header, rail, content, tab bar */
body.tp-v2 .app.plain { grid-template-columns: minmax(0, 1fr); }
body.tp-v2 .app.plain .content .wrap { max-width: 1120px; margin: 0 auto; }
body.tp-v2 .app.plain .content .wrap.reading { max-width: 860px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 28px 34px 32px; margin-top: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body.tp-v2 .app.norail { grid-template-columns: minmax(0, 1fr); }
/* public-wide: the page's bands run edge to edge; the page centers its own content (request-demo, contact) */
body.tp-v2 .content.full { padding: 0 0 32px; }
body.tp-v2 .content.full .wrap.full { max-width: none; margin: 0; }
/* page header: title, one-line subtitle, actions on the right */
body.tp-v2 .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
body.tp-v2 .page-head h1 { margin: 0; font-size: 26px; }
body.tp-v2 .page-head h1 i { color: var(--tp-green-dark); margin-right: 8px; font-size: 22px; }
body.tp-v2 .page-head .sub { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
body.tp-v2 .page-head .acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* reading pages: terms, privacy */
body.tp-v2 .text { font-size: 15.5px; line-height: 1.65; }
body.tp-v2 .text h1 { font-size: 26px; margin: 0 0 6px; }
body.tp-v2 .text h2 { font-size: 20px; margin: 26px 0 8px; }
body.tp-v2 .text h3 { font-size: 16px; margin: 20px 0 6px; }
body.tp-v2 .text h4 { font-size: 14.5px; margin: 16px 0 4px; }
body.tp-v2 .text p { margin: 0 0 12px; }
body.tp-v2 .text li { margin: 0 0 6px; }
body.tp-v2 .text table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
body.tp-v2 .text table td, body.tp-v2 .text table th { border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; }
/* tables: a scroll wrapper by default, so a wide grid never pushes a phone page sideways */
body.tp-v2 .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
body.tp-v2 .tbl-wrap table.tbl { border: 0; }
/* empty state: icon, one line, one action */
body.tp-v2 .empty { text-align: center; padding: 34px 16px; color: var(--muted); background: #fff; border: 1px dashed var(--border); border-radius: 10px; }
body.tp-v2 .empty i { font-size: 26px; color: var(--label); display: block; margin-bottom: 8px; }
body.tp-v2 .empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
/* status pills with a dot (the S3 health pill): green, amber, red */
body.tp-v2 .badge.dot { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 2px 10px 2px 8px; border-radius: 999px; }
body.tp-v2 .badge.dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex: 0 0 8px; }
body.tp-v2 .badge.dot.green { background: var(--tp-green-soft); color: var(--tp-green-ink); border-color: var(--tp-green-line); }
body.tp-v2 .badge.dot.green::before { background: var(--tp-green); }
body.tp-v2 .badge.dot.amber { background: #fef3c7; color: #92400e; border-color: #fde68a; }
body.tp-v2 .badge.dot.amber::before { background: #d97706; }
body.tp-v2 .badge.dot.red { background: #fde8e8; color: #9b2c2c; border-color: #fecaca; }
body.tp-v2 .badge.dot.red::before { background: #c63939; }
/* the loader: the classic UpdateProgress template (tp-loading-*) in the new look; overlay plus a small box with a ring */
body.tp-v2 .tp-loading-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.25); z-index: 90; }
body.tp-v2 .tp-loading-box { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 91; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.2); }
body.tp-v2 .tp-loading-spinner { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--tp-green); animation: tpV2Spin .8s linear infinite; }
@keyframes tpV2Spin { to { transform: rotate(360deg); } }
/* the toolkit autocomplete list (Company Lookup) in the new look */
body.tp-v2 .AutoExtender { background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,.14); list-style: none; margin: 4px 0 0; padding: 6px 0; max-height: 320px; overflow: auto; z-index: 80; text-align: left; font-size: 14px; color: var(--text); }
body.tp-v2 .AutoExtender li { padding: 7px 14px; cursor: pointer; }
body.tp-v2 .AutoExtender li:hover { background: var(--tp-green-soft); color: var(--tp-green-ink); }
/* one big search box (Company Lookup): same shape as the Marketplace big search, with a real input inside */
body.tp-v2 .bigbox { display: flex; align-items: center; background: #fff; border: 2px solid var(--border); border-radius: 50px; padding: 4px 6px 4px 18px; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
body.tp-v2 .bigbox:focus-within { border-color: var(--blue); }
body.tp-v2 .bigbox i { color: var(--muted); }
body.tp-v2 .bigbox input.input, body.tp-v2 .bigbox input.form-control { flex: 1; border: 0; box-shadow: none; background: transparent; font-size: 16px; padding: 9px 4px; height: auto; }
body.tp-v2 .bigbox input:focus { outline: none; box-shadow: none; }
/* the classic hover tooltip (.toolstip / .tooltiptext, freelancer.css) used by company_view's contract stat cards and the
   CRM: hidden until hover, a dark card to the right of the question mark. Without it the help text spills into the card. */
body.tp-v2 .toolstip { position: relative; display: inline-block; }
body.tp-v2 .toolstip .tooltiptext { visibility: hidden; opacity: 0; width: 280px; max-width: 80vw; background: var(--ink); color: #fff; text-align: left; border-radius: 8px; padding: 12px 14px; position: absolute; z-index: 1050; bottom: 25%; left: 50%; margin-left: 25px; font-size: 13px; line-height: 1.45; font-weight: 400; transition: opacity .2s; box-shadow: 0 10px 30px rgba(15,23,42,.2); }
body.tp-v2 .toolstip .tooltiptext::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
body.tp-v2 .toolstip:hover .tooltiptext, body.tp-v2 .toolstip:focus-within .tooltiptext { visibility: visible; opacity: 1; }
/* the workspace rail for members */
body.tp-v2 .rail .grp:first-child { padding-top: 2px; }
body.tp-v2 .rail span.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--label); font-weight: 600; font-size: 14px; cursor: default; }
body.tp-v2 .rail span.item .ic { width: 22px; text-align: center; font-size: 13px; }
body.tp-v2 .rail .switch a, body.tp-v2 .acct .menu a.alt { color: var(--muted); }
body.tp-v2 .rail .mini a { color: var(--blue); }
/* phone */
@media (max-width: 760px) {
    body.tp-v2 .page-head h1 { font-size: 22px; }
    body.tp-v2 .app.plain .content { padding-bottom: 24px; }
    body.tp-v2 .app.plain .content .wrap.reading { padding: 18px 16px 22px; border-radius: 10px; }
    body.tp-v2 .bigbox { padding-left: 12px; }
    body.tp-v2 .bigbox input.input, body.tp-v2 .bigbox input.form-control { font-size: 15px; }
}
/* nav cleanup (10/23/2026): on signed-in pages the header has no menus; the search box stays small (Chris: about 320 px,
   shrinking on smaller screens) and the freed space stays empty */
body.tp-v2-member header.site nav.member { flex: 0 0 auto; }
body.tp-v2-member header.site .gsearch { flex: 0 1 320px; max-width: 320px; margin-left: auto; }
@media (max-width: 760px) { body.tp-v2-member header.site nav.member { display: none; } }
/* phone drawer (10/23/2026): the menu button fills #tpV2Sheet with the rail (site-v2.js buildSheet); the sheet rules live in
   marketplace-v2.css under .mp2- and the build drops those, so the site master never had them. Same look, scoped here. */
body.tp-v2 .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-v2 .mp2-sheet[hidden] { display: none !important; }
body.tp-v2 .mp2-sheet .btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
body.tp-v2 .mp2-sheet .btns:empty { display: none; }
body.tp-v2 .mp2-sheet .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); padding: 14px 0 4px; }
body.tp-v2 .mp2-sheet a.item, body.tp-v2 .mp2-sheet a, body.tp-v2 .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-v2 .mp2-sheet a.item.on { color: var(--tp-green-ink); font-weight: 600; }
body.tp-v2 .mp2-sheet .locked { color: var(--muted); }
body.tp-v2 .mp2-sheet .ic { width: 22px; text-align: center; color: var(--muted); font-size: 14px; }
body.tp-v2 .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-v2 .mp2-sheet .n.hot { background: #c63939; }
/* STEP 1 (10/24/2026): same widths as the Marketplace on big screens. marketplace-v2.css widens the header, the shell and the
   content column from 1600 px up; the generator keeps the content line but drops the header and shell line (it names .mp-nav), so
   the site stayed at 1400 px while the Marketplace went to 1640. The footer follows the header (Opus 10/24), unlike the Marketplace. */
@media (min-width: 1600px) { body.tp-v2 header.site .wrap, body.tp-v2 footer.site .wrap, body.tp-v2 .app { max-width: 1640px; } }
/* STEP 2 (10/24/2026): collapsible rail. body.tp-rail-mini (set before paint by the inline script in TPMasterV2.master, kept by
   js/site-v2.js from localStorage "tpRail" = mini | full, or from the 1280 px media query when nothing is stored) turns the rail
   into a 64 px icon column: group labels become hairlines, item text and the BETA pill go, the Messages count becomes a dot, the
   classic-look switch hides, and the toggle at the foot flips its arrow. Hover or focus shows a styled tooltip (js/site-v2.js
   .tp-rail-tip, fixed so the rail's own scroll box cannot clip it). Phones and tablets (980 px and under) keep the drawer. */
body.tp-v2 .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-v2 .rail .rail-toggle:hover, body.tp-v2 .rail .rail-toggle:focus-visible { color: var(--tp-green-ink); outline: none; }
body.tp-v2 .rail .rail-toggle .ic { width: 22px; text-align: center; font-size: 14px; }
body.tp-v2 .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-v2 .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-v2 .rail { display: flex; flex-direction: column; } /* desktop only: 980 px and under the rail stays display: none and the drawer serves */
    body.tp-v2 .rail > * { flex: 0 0 auto; }
    body.tp-v2-member.tp-rail-mini .app:not(.plain):not(.norail) { grid-template-columns: 64px minmax(0, 1fr); }
    body.tp-v2.tp-rail-mini .rail { padding: 14px 8px 10px; }
    body.tp-v2.tp-rail-mini .rail .newpost { font-size: 0; padding: 8px 0; }
    body.tp-v2.tp-rail-mini .rail .newpost::before { content: '+'; font-size: 20px; line-height: 1; font-weight: 700; }
    body.tp-v2.tp-rail-mini .rail .grp { font-size: 0; height: 1px; padding: 0; margin: 8px 6px; background: var(--border); }
    body.tp-v2.tp-rail-mini .rail .grp:first-child { height: 0; margin: 0; background: none; }
    body.tp-v2.tp-rail-mini .rail a.item, body.tp-v2.tp-rail-mini .rail span.item { position: relative; justify-content: center; gap: 0; padding: 10px 0; font-size: 0; }
    body.tp-v2.tp-rail-mini .rail .item .ic { width: auto; font-size: 16px; }
    body.tp-v2.tp-rail-mini .rail .item .beta { display: none; }
    body.tp-v2.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-v2.tp-rail-mini .rail .item .n.hot { background: var(--red); width: 8px; height: 8px; padding: 0; border-radius: 50%; }
    body.tp-v2.tp-rail-mini .rail .switch { display: none; }
    body.tp-v2.tp-rail-mini .rail .rail-toggle { justify-content: center; gap: 0; padding: 12px 0; margin-bottom: -10px; font-size: 0; }
    body.tp-v2.tp-rail-mini .rail .rail-toggle .ic { width: auto; font-size: 16px; }
    body.tp-v2.tp-rail-mini .rail .rail-toggle .ic i::before { content: '\f101'; }
}
/* STEP 3 (10/24/2026): quiet rail scrollbar, full and icon-only. Thin, no arrow buttons, the thumb shows only while the
   pointer is over the rail (Chrome and Edge honor scrollbar-width and scrollbar-color; the -webkit rules serve older builds). */
body.tp-v2 .rail { scrollbar-width: thin; scrollbar-color: transparent transparent; }
body.tp-v2 .rail:hover, body.tp-v2 .rail:focus-within { scrollbar-color: #cbd5e1 transparent; }
body.tp-v2 .rail::-webkit-scrollbar { width: 6px; }
body.tp-v2 .rail::-webkit-scrollbar-track { background: transparent; }
body.tp-v2 .rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
body.tp-v2 .rail:hover::-webkit-scrollbar-thumb { background: #cbd5e1; }
body.tp-v2 .rail::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* STEP 3b (10/24/2026, Chris): flush rail at every width. The shell is full bleed with no padding or centering, so the rail
   starts at x = 0 on any monitor (the step 3 version centered the grid with 50% - 700 px of padding, which put the rail 37 px
   in on a 1715 px window). Only the content column keeps a cap: wide member pages get 1160 px (the old 1400 shell minus the
   240 px rail) and 1400 from 1600 up; with the icon rail 1336 and 1576; narrower wraps keep their own caps. The header and
   footer stay centered at 1400 / 1640. Under 981 px the rail is hidden and nothing here applies. */
@media (min-width: 981px) {
    body.tp-v2 .rail { border-left: 0; }
    body.tp-v2-member .app:not(.plain):not(.norail) { max-width: none; width: auto; margin: 0; padding: 0; background: none; }
    body.tp-v2-member .app:not(.plain):not(.norail) .content .wrap.wide { max-width: 1160px; }
    body.tp-v2-member.tp-rail-mini .app:not(.plain):not(.norail) .content .wrap.wide { max-width: 1336px; }
}
@media (min-width: 1600px) {
    body.tp-v2-member .app:not(.plain):not(.norail) .content .wrap.wide { max-width: 1400px; }
    body.tp-v2-member.tp-rail-mini .app:not(.plain):not(.norail) .content .wrap.wide { max-width: 1576px; }
}
/* STEP 3c (10/24/2026, Chris): the member header goes full bleed too, so the TEAMINGPRO logo sits over the rail with the
   rail's 12 px left padding and the search, messages and avatar sit 12 px from the right edge. Public and plain variants keep
   the centered 1400 / 1640 header. Under 981 px the header keeps its default wrap. */
@media (min-width: 981px) {
    body.tp-v2-member header.site .wrap { max-width: none; margin: 0; padding: 0 12px; }
}

/* B (10/24/2026): asp:RadioButton / asp:CheckBox rendered with Bootstrap's .radio-inline / .checkbox-inline (a span around the
   input and its label). Bootstrap floats the input absolutely into a 20 px left pad; page CSS that zeroed the pad put the circle
   on the first letter. New look: circle, 6 px gap, text, on one line and vertically aligned; green accent. */
body.tp-v2 .radio-inline, body.tp-v2 .checkbox-inline { display: inline-flex; align-items: center; gap: 6px; padding-left: 0; margin: 0 14px 0 0; position: static; vertical-align: middle; line-height: 1.3; }
body.tp-v2 .radio-inline + .radio-inline, body.tp-v2 .checkbox-inline + .checkbox-inline { margin-left: 0; }
body.tp-v2 .radio-inline input[type='radio'], body.tp-v2 .checkbox-inline input[type='checkbox'] { position: static; margin: 0; width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--tp-green, #10b981); }
body.tp-v2 .radio-inline label, body.tp-v2 .checkbox-inline label { margin: 0; font-weight: inherit; cursor: pointer; padding: 0; }

/* ONE FRAME step A (10/24/2026, Chris's mockup deliverables/mockups/app-marketplace-one-frame.html): the rail's Marketplace row
   and its open block, rendered by TPBusinessData.SiteShell. Collapsed on app pages (right chevron); on Marketplace pages the row
   is open (down chevron, bold) and "+ New Post" plus the Marketplace pages sit indented under it with a left border. The
   Marketplace master (step B, Fable 1) loads these too: the selectors carry both body classes. Mini rail: the block loses its
   indent and the chevron, the rows show as icons like the rest. */
/* step C (10/24/2026, Chris): the Marketplace row sits right under Dashboard and its chevron is a button that opens or closes
   the block (SiteShell.Rail wires it): div.mprow holds the link and the button, aria-expanded turns the chevron, .sub.closed hides
   the block. The first group label ("Your work") now follows the block, so its top padding separates the two. */
body.tp-v2 .rail .mprow, body.tp-mp2 .rail .mprow { display: flex; align-items: center; gap: 2px; }
body.tp-v2 .rail .mprow a.item, body.tp-mp2 .rail .mprow a.item { flex: 1 1 auto; min-width: 0; }
body.tp-v2 .rail .mprow .chev, 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-v2 .rail .mprow .chev:hover, body.tp-mp2 .rail .mprow .chev:hover, body.tp-v2 .rail .mprow .chev:focus-visible, body.tp-mp2 .rail .mprow .chev:focus-visible { background: var(--panel, #f1f5f9); color: var(--tp-green-dark, #059669); outline: none; }
body.tp-v2 .rail .mprow .chev i, body.tp-mp2 .rail .mprow .chev i { display: inline-block; transition: transform .15s ease; }
body.tp-v2 .rail .mprow .chev[aria-expanded="false"] i, body.tp-mp2 .rail .mprow .chev[aria-expanded="false"] i { transform: rotate(-90deg); }
body.tp-v2 .rail .mprow .chev[aria-expanded="true"], body.tp-mp2 .rail .mprow .chev[aria-expanded="true"] { color: var(--tp-green-dark, #059669); }
body.tp-v2 .rail a.item.open, body.tp-mp2 .rail a.item.open { font-weight: 700; }
body.tp-v2 .rail .sub.closed, body.tp-mp2 .rail .sub.closed { display: none; }
body.tp-v2 .rail .sub, body.tp-mp2 .rail .sub { margin: 2px 0 6px 20px; padding-left: 6px; border-left: 2px solid var(--border, #e2e8f0); }
body.tp-v2 .rail .sub a.item, body.tp-mp2 .rail .sub a.item { padding: 6px 8px; font-size: 13px; }
body.tp-v2 .rail .sub a.item .ic, body.tp-mp2 .rail .sub a.item .ic { width: 18px; font-size: 13px; }
body.tp-v2 .rail .sub .newpost, body.tp-mp2 .rail .sub .newpost { display: block; margin: 6px 0 8px; padding: 7px 8px; font-size: 13px; text-align: center; }
body.tp-v2 .rail .sub .switch, body.tp-mp2 .rail .sub .switch { margin: 4px 0 2px; padding: 0 8px; font-size: 12px; }
body.tp-v2 .rail .sub .switch a, body.tp-mp2 .rail .sub .switch a { color: var(--muted, #64748b); }
@media (min-width: 981px) {
    body.tp-v2.tp-rail-mini .rail .sub, body.tp-mp2.tp-rail-mini .rail .sub { margin: 0; padding: 0; border-left: 0; }
    body.tp-v2.tp-rail-mini .rail .mprow .chev, 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: these outrank the sub-item rules above (same or higher specificity, later), so the block shows as icons too */
    body.tp-v2.tp-rail-mini .rail .sub a.item, body.tp-mp2.tp-rail-mini .rail .sub a.item { padding: 10px 0; font-size: 0; justify-content: center; gap: 0; }
    body.tp-v2.tp-rail-mini .rail .sub a.item .ic, body.tp-mp2.tp-rail-mini .rail .sub a.item .ic { width: auto; font-size: 16px; }
    body.tp-v2.tp-rail-mini .rail .sub .newpost, body.tp-mp2.tp-rail-mini .rail .sub .newpost { margin: 4px 0 6px; padding: 8px 0; font-size: 0; }
}

/* 10/24/2026 (Fable 1, one frame): the member header identical in both frames. Header buttons take the page font even without
   Bootstrap's reboot, and the keyboard focus ring sits on the search pill (Chris: not on the inner input), header focus ring on the pill. */
body.tp-v2 header.site button { font-family: inherit; line-height: inherit; }
body.tp-v2 header.site .gsearch input:focus-visible { outline: none; }
body.tp-v2 header.site .gsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #dbeafe; }
/* Tim round 2 (10/25/2026): freelancer.css has "header img { margin: 50px auto 20px }"; pages that load it (Reporting) pushed the logo below center */
body.tp-v2 header.site .brand img { margin: 0; }

/* 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: the rail column's white runs the full page height on long member pages (the rail is sticky and one viewport tall; the
   grid paints the column). Plain and no-rail pages are untouched; the collapsed rail is 64 px. */
@media (min-width: 981px) {
    body.tp-v2-member .app:not(.plain):not(.norail) { background: linear-gradient(to right, #fff 0, #fff 239px, var(--border) 239px, var(--border) 240px, transparent 240px); }
    body.tp-v2-member.tp-rail-mini .app:not(.plain):not(.norail) { background: linear-gradient(to right, #fff 0, #fff 63px, var(--border) 63px, var(--border) 64px, transparent 64px); }
}