/* ProfiloPolitics 2A Chat Room — front-end fix pack (Oct 27, 2026)
Load LAST, after every other stylesheet:
*/
/* ---------- Item 1: never any sideways scroll ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.tac-root video, .tac-root iframe { max-width: 100%; }
/* ---------- Item 2: DESKTOP case-page chat panel ---------- */
@media (min-width: 769px) {
.tac-root .case-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
gap: 24px; align-items: start; position: relative;
}
.tac-root .case-layout.chat-closed { grid-template-columns: minmax(0, 1fr); }
.tac-root .case-layout > .chat-toggle {
position: absolute; top: 0; right: 0; transform: translateY(-110%); z-index: 2;
}
.tac-root .case-chat { width: auto !important; min-width: 320px; max-width: 100%; position: sticky; top: 16px; }
.tac-root .case-reading { min-width: 0; }
}
/* chat header: title on its own line, Live + count on one line below */
.pp-chat .chat-head { flex-wrap: wrap; gap: 6px 12px; }
.pp-chat .chat-head > div:first-child { flex: 1 1 180px; min-width: 0; }
.pp-chat .chat-head > div:last-child { white-space: nowrap; flex: 0 0 auto; }
.pp-chat [data-online-count] { white-space: nowrap; }
/* composer: input shrinks, Send never clipped */
.pp-chat .chat-form { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pp-chat .chat-form [data-chat-input] { flex: 1 1 auto; min-width: 0; width: auto; }
.pp-chat .chat-form button[type="submit"] { flex: 0 0 auto; white-space: nowrap; }
/* "Replying to :" with empty name — hide unless actually replying */
[data-reply-bar][hidden], [data-reply-bar]:not(.pp-has-author) { display: none !important; }
/* ---------- Item 1: PHONE (<=768px) ---------- */
@media (max-width: 768px) {
.tac-root .case-layout { display: block !important; }
.tac-root .case-layout > .chat-toggle,
[data-chat-reopen], .tac-mobile-chat-fab { display: none !important; }
/* hidden until opened */
.tac-root .case-chat, .pp-chat-side { display: none !important; }
/* open = full screen sheet */
.tac-root .case-chat.pp-fix-chat-open, .pp-chat-side.pp-fix-chat-open, .pp-fix-chat-open {
display: flex !important; flex-direction: column !important;
position: fixed !important; inset: 0 !important;
width: 100vw !important; max-width: 100vw !important; min-width: 0 !important;
height: 100vh !important; height: 100dvh !important;
margin: 0 !important; padding: 0 !important; transform: none !important;
z-index: 100000 !important; background: var(--pp-chat-navy, #0d1b2e) !important;
overflow: hidden !important;
}
.pp-fix-chat-open .tac-mobile-chat-close-bar { display: none !important; } /* we add our own bar */
.pp-fix-bar {
display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
background: #0a1626; color: #fff; font: 700 16px/1.2 Helvetica, Arial, sans-serif;
}
.pp-fix-close {
width: 40px; height: 40px; border: 0; border-radius: 8px;
background: #18283e; color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.pp-fix-chat-open [data-chat-dock], .pp-fix-chat-open .chat.pp-chat {
display: flex !important; flex-direction: column !important; flex: 1 1 auto !important;
min-height: 0 !important; width: 100% !important; max-width: 100% !important;
height: auto !important; border-radius: 0 !important; margin: 0 !important;
}
.pp-fix-chat-open .chat-messages {
flex: 1 1 auto !important; min-height: 0 !important; height: auto !important;
overflow-y: auto !important; -webkit-overflow-scrolling: touch;
}
.pp-fix-chat-open .chat-head [data-chat-close],
.pp-fix-chat-open .chat-head .pp-chat-title { display: none !important; } /* title already in the top bar */
.pp-fix-chat-open .chat-form {
flex: 0 0 auto; padding: 10px 12px !important;
padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}
.pp-fix-chat-open .chat-form [data-chat-input] { font-size: 16px !important; /* stops iPhone zoom */ }
.pp-fix-chat-open [data-access-card] { flex: 0 0 auto; max-height: 55vh; overflow-y: auto; }
body.pp-fix-noscroll { overflow: hidden !important; }
.mobile-bottom-nav a.pp-fix-chat-tab.is-open { color: #fff; }
}
/* ---------- Item 4: visible photo credit ---------- */
.pp-photo-caption { margin: 6px 0 0; font: 12.5px/1.4 Helvetica, Arial, sans-serif; color: #555; max-width: 640px; }
.pp-photo-caption .pp-credit { font-weight: 700; color: #333; }
.tac-evidence-row { flex-wrap: wrap; }
.tac-evidence figure { margin: 0; max-width: 220px; }
/* ---------- Item 3: timestamp ---------- */
.timeline-date time { white-space: nowrap; }
/* ---------- Item 5: NEW / UPDATED badges ---------- */
.pp-badge { display: inline-block; font: 800 10.5px/1 Helvetica, Arial, sans-serif; letter-spacing: .06em;
padding: 4px 7px; border-radius: 4px; color: #fff; text-transform: uppercase; vertical-align: middle; }
.pp-badge--new { background: #b3202a; }
.pp-badge--updated { background: #1f6feb; }
/* ---------- Item 9: status labels ---------- */
.tac-stage--open { background: #2f6f3e !important; color: #fff !important; }
.tac-stage--arrest-made, .tac-stage--arrested { background: #6b3fa0 !important; color: #fff !important; }
.tac-stage--charged { background: #8a5a00 !important; color: #fff !important; }
.tac-stage--closed { background: #6b7280 !important; color: #fff !important; }
.tac-stage--breaking { background: #b3202a !important; color: #fff !important; }
.case-list .case-box.pp-is-closed { display: none; } /* hidden from main list */
.pp-closed-section .case-box.pp-is-closed { display: block; opacity: .8; }
.pp-closed-section { margin-top: 28px; }
.pp-closed-section summary { cursor: pointer; font-weight: 800; }
/* ---------- Item 31: case evidence carousel + scene video (2026-10-31) ---------- */
.tac-evidence { position: relative; }
.tac-evidence .tac-evidence-row {
display: flex; flex-wrap: nowrap; gap: 0;
overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; border-radius: 8px;
}
.tac-evidence .tac-evidence-row::-webkit-scrollbar { display: none; }
.tac-evidence .pp-photo { flex: 0 0 100%; max-width: none; margin: 0; scroll-snap-align: start; }
.tac-evidence .tac-thumb { display: block; width: 100%; border: 0; border-radius: 8px; }
.tac-evidence .tac-thumb img { width: 100%; height: 340px; object-fit: cover; display: block; }
@media (max-width: 560px) { .tac-evidence .tac-thumb img { height: 250px; } }
.tac-evidence .pp-photo-caption { padding: 6px 2px 0; font-size: 13px; color: var(--pp-muted, #64748b); }
.pp-car-nav { position: absolute; top: 46%; transform: translateY(-50%); z-index: 3;
width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(7,17,32,.72); color: #fff; font-size: 22px; line-height: 1; }
.pp-car-prev { left: 8px; }
.pp-car-next { right: 8px; }
.pp-car-count { position: absolute; top: 34px; right: 10px; z-index: 3;
background: rgba(7,17,32,.72); color: #fff; font-size: 12.5px; font-weight: 700;
padding: 3px 9px; border-radius: 999px;
font-family: var(--pp-font-sans, "Plus Jakarta Sans", Inter, sans-serif); }
.tac-case-video { margin: 14px 0; }
.tac-case-video h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
font-family: var(--pp-font-head, "Merriweather", "Lora", Georgia, serif); color: var(--pp-heading, #0f172a); }
.tac-video-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.tac-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tac-video-frame--x { aspect-ratio: auto; height: 640px; max-width: 600px; margin: 0 auto; }
.tac-video-file { width: 100%; max-height: 480px; border-radius: 8px; background: #000; display: block; }
/* ---------- Item 31b: carousel geometry, forced (2026-10-31) ---------- */
.tac-evidence .tac-evidence-row { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; }
.tac-evidence .tac-evidence-row .pp-photo { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; margin: 0 !important; scroll-snap-align: start !important; }
.tac-evidence .tac-thumb { display: block !important; width: 100% !important; max-width: none !important; }
.tac-evidence .tac-thumb img { width: 100% !important; max-width: none !important; height: 340px !important; object-fit: cover !important; }
@media (max-width: 560px) { .tac-evidence .tac-thumb img { height: 250px !important; } }
/* ---------- Item 32: bright writing on the navy case head + chat (2026-10-31) ---------- */
@media (max-width: 768px) {
.tac-root .case-head .facts-strip dt { color: #aebdd6 !important; }
.tac-root .case-head .facts-strip dd { color: #eef2f9 !important; }
.tac-root .case-head .pp-case-updated { color: #c3cedf !important; }
.tac-root .case-head .follow-note { color: #c3cedf !important; }
}
.tac-root .chat-msg .text { color: #e6edf7 !important; }
.tac-root .chat-msg .who { color: #ffffff !important; }
.tac-root .chat-msg .when { color: #c3cedf !important; }
.tac-root .chat-as { color: #c3cedf !important; }
.tac-root .chat-loading { color: #c3cedf !important; }
.tac-root .chat-join p { color: #d8e0ee !important; }
.tac-root .chat-live { color: #c3cedf !important; }
/* ============================================================
ITEM 33 · 2026 SKIN (owner-approved 2026-10-31)
Whole room goes dark-first 2026: deep navy surfaces, bright
writing, photo cards, big Jakarta headlines, soft shadows.
Skin only — same pages, same features. Reversible: delete
this block (and the ITEM 33 block in pp-fixes.js).
============================================================ */
/* — palette: flip the room's own design tokens — */
.tac-root{
--tac-paper:#0e1e38;
--tac-wash:#081426;
--tac-ink:#f2f6fc;
--tac-muted:#a7b6cf;
--tac-line:#1e2c47;
--tac-radius:18px;
color:#dbe4f2;
}
html,body{background:#060d1a!important;}
.tac-root{background:#060d1a;}
.tac-root main.page,.tac-root.page{background:transparent;}
/* — headlines: Plus Jakarta Sans, bold — */
.tac-root.case-head h1,
.tac-root.case-box-title,
.tac-root.tac-trend__name,
.tac-root.pp-cases-title,
.tac-root.case-reading h2,
.tac-root.timeline-item h3{
font-family:'Plus Jakarta Sans',sans-serif!important;
color:#f2f6fc;
letter-spacing:-.01em;
}
.tac-root.case-box-title{font-size:16.5px;line-height:1.32;font-weight:800;}
/* — header — */
.tac-root.site-header{background:#081426!important;border-bottom:3px solid #e5323c;}
.tac-root.brand{color:#f2f6fc!important;}
.tac-root.brand span{color:#e5323c;}
.tac-root.main-menu a{color:#a7b6cf!important;}
.tac-root.main-menu a.active{color:#ffffff!important;font-weight:700;}
.tac-root.account-links a{color:#dbe4f2!important;}
/* — home: cases become photo cards in a grid — */
@media (min-width:900px){
.tac-root.case-list{display:grid!important;grid-template-columns:1fr 1fr;gap:16px;max-height:none;overflow:visible;padding-right:0;}
}
.tac-root.case-box{
background:#0e1e38!important;border:1px solid #1e2c47!important;border-radius:18px!important;
padding:0!important;margin-bottom:0;overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.45);
transition:transform.25s ease,border-color.25s ease;
}
.tac-root.case-box:hover{transform:translateY(-4px);border-color:#2c4066;}
.tac-root.case-box-link{display:flex!important;flex-direction:column;color:inherit;}
.tac-root.pp-case-thumb{
width:100%!important;max-width:none!important;height:auto!important;
aspect-ratio:16/9;object-fit:cover;display:block;background:#0a1730;
}
.tac-root.pp-case-thumb--none{background:linear-gradient(135deg,#101f3a,#0a1730);}
.tac-root.case-box-body{padding:14px 16px 16px;}
.tac-root.case-box-meta{color:#a7b6cf!important;}
.tac-root.pp-case-counts{color:#7e90ae;}
.tac-root.pp-case-counts strong{color:#dbe4f2;}
.tac-root.updated-ago{color:#7e90ae!important;}
/* — trending strip — */
.tac-root.tac-trend__box{background:#0e1e38!important;border:1px solid #1e2c47!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(0,0,0,.45);}
.tac-root.tac-trend__meta{color:#a7b6cf!important;}
.tac-root.tac-trend__views{color:#7e90ae!important;}
.tac-root.tac-trend__label{color:#f2f6fc;font-family:'Plus Jakarta Sans',sans-serif;}
/* — search + category: chips retire, dropdown (ITEM 33 JS) takes over — */
.tac-root.pp-stage-chip{display:none!important;}
.tac-root.tac-case-search input{
background:#081426!important;color:#f2f6fc!important;border:1px solid #1e2c47!important;border-radius:999px!important;
}
.tac-root.tac-case-search button{background:#e5323c!important;color:#fff!important;border-radius:999px!important;border:0;}
.pp-cat-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 4px;}
.pp-cat-wrap label{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;color:#f2f6fc;letter-spacing:.04em;}
.pp-cat-select{background:#081426;color:#f2f6fc;border:1px solid #1e2c47;border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600;min-width:210px;cursor:pointer;}
.pp-cat-count{font-size:12.5px;color:#7e90ae;}
/* — see-more buttons (ITEM 33 JS) — */
.pp-see-more{display:block;margin:18px auto 6px;background:#0d1c34;color:#f2f6fc;border:1px solid #1e2c47;border-radius:999px;padding:12px 26px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;cursor:pointer;}
.pp-see-more:hover{border-color:#2c4066;}
/* — reserved AdSense spaces (labelled, fixed size, apart from content) — */
.pp-ad-slot{
background:repeating-linear-gradient(45deg,#0b1830,#0b1830 14px,#0c1a33 14px,#0c1a33 28px);
border:1.5px dashed #33507e;border-radius:18px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
text-align:center;padding:18px;margin:20px 0;min-height:110px;
}
.pp-ad-slot.pp-ad-label{font-size:10px;letter-spacing:.22em;color:#7e90ae;font-weight:700;}
.pp-ad-slot.pp-ad-size{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:#a7b6cf;font-size:15px;}
.pp-ad-slot--box{min-height:250px;}
/* — case page — */
.tac-root.case-head{background:transparent!important;}
.tac-root.case-kicker{color:#a7b6cf!important;}
.tac-root.case-kicker a{color:#a7b6cf!important;}
.tac-root.case-summary{color:#dbe4f2!important;}
.tac-root.case-head.facts-strip dt{color:#a7b6cf!important;}
.tac-root.case-head.facts-strip dd{color:#eef2f9!important;}
.tac-root.timeline-item{background:#0d1c34!important;border:1px solid #1e2c47!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(0,0,0,.45);}
.tac-root.timeline-date{color:#7e90ae!important;}
.tac-root.timeline-body,.tac-root.pp-update-body{color:#dbe4f2!important;}
.tac-root.tac-correction-band{background:#2a1416!important;color:#f3c1c1!important;border-color:#6e2a2a!important;}
/* — chat panels — */
.tac-root.chat{background:#0d1c34!important;border:1px solid #1e2c47!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(0,0,0,.45);}
.tac-root.chat-head{border-bottom:1px solid #1e2c47;}
.tac-root.pp-chat-title{color:#f2f6fc!important;}
.tac-root.pp-chat-sub{color:#a7b6cf!important;}
.tac-root.chat-form input,.tac-root.chat-form textarea{background:#081426!important;color:#f2f6fc!important;border:1px solid #1e2c47!important;}
/* — footer + misc — */
.tac-root.pp-site-footer{background:transparent!important;color:#7e90ae!important;border-top:1px solid #1e2c47;}
.tac-root.pp-site-footer a{color:#a7b6cf!important;}
.tac-root.btn{border-radius:999px!important;}
.tac-root.pp-more-cases-row{color:#a7b6cf;}
.tac-root.tac-mobile-scroll-hint,.tac-root.tac-desktop-scroll-hint{color:#7e90ae!important;}
/* === END ITEM 33 · 2026 SKIN === */
/* ============================================================
ITEM 33b · 2026 SKIN — home split-view overrides (2026-10-31)
layout-2026-10-24.css hard-styles the home split view LIGHT
with high-specificity !important rules (white header, cream
.pp-writing-side, white cards, red titles, row cards). These
rules match or beat that specificity so the approved dark
2026 skin holds on the home page too. Append-only; delete
this block to revert.
============================================================ */
.tac-root.tac-home-split .site-header,
.tac-root:has(.pp-chat-shell) .site-header{
background:#081426 !important;border-bottom:3px solid #e5323c !important;
}
.tac-root.tac-home-split .brand{color:#f2f6fc !important;}
.tac-root.tac-home-split .main-menu a{color:#a7b6cf !important;}
.tac-root.tac-home-split .main-menu a.active{color:#ffffff !important;font-weight:700;}
.tac-root .pp-writing-side{background:#060d1a !important;}
.tac-root.tac-home-split .pp-cases-title{color:#f2f6fc !important;}
@media (min-width:700px){
.tac-root.tac-home-split .case-list{
display:grid !important;grid-template-columns:1fr 1fr;gap:16px !important;
flex-direction:unset !important;
}
}
.tac-root.tac-home-split .case-box{
background:#0e1e38 !important;border:1px solid #1e2c47 !important;
border-radius:18px !important;padding:0 !important;overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.45) !important;
}
.tac-root.tac-home-split .case-box-link{
display:flex !important;flex-direction:column !important;
align-items:stretch !important;gap:0 !important;
}
.tac-root.tac-home-split .pp-case-thumb{
width:100% !important;max-width:none !important;height:auto !important;
aspect-ratio:16/9;object-fit:cover !important;flex:none !important;border-radius:0 !important;
}
.tac-root.tac-home-split .case-box-body{padding:14px 16px 16px !important;flex:1 !important;}
.tac-root .case-box-title{color:#f2f6fc !important;}
.tac-root.tac-home-split .case-box-meta{color:#a7b6cf !important;}
.tac-root.tac-home-split .pp-case-counts{color:#7e90ae !important;}
.tac-root.tac-home-split .pp-case-counts strong{color:#dbe4f2 !important;}
.tac-root.tac-home-split .tac-case-search input[type="search"]{
background:#081426 !important;color:#f2f6fc !important;border-color:#1e2c47 !important;
}
.tac-root.tac-home-split .tac-case-search button{background:#e5323c !important;color:#fff !important;}
/* === END ITEM 33b === */
/* ============================================================
ITEM 33c · 2026 SKIN — finishing fixes (2026-10-31)
Found on the live check after 33b: the room title printed
near-black on the dark ground, the TRENDING boxes stayed
white, and photo-less cases showed a tall blank rectangle.
Append-only; delete this block to revert.
============================================================ */
.tac-root .pp-room-title{color:#f2f6fc !important;font-family:'Plus Jakarta Sans',sans-serif !important;}
.tac-root .pp-room-desc{color:#a7b6cf !important;}
/* trending boxes join the dark skin */
.tac-root.tac-home-split .tac-trend__box{
background:#0e1e38 !important;border:1px solid #1e2c47 !important;
border-radius:18px !important;box-shadow:0 10px 30px rgba(0,0,0,.45) !important;
}
.tac-root.tac-home-split .tac-trend__name{color:#f2f6fc !important;}
.tac-root.tac-home-split .tac-trend__meta{color:#a7b6cf !important;}
.tac-root.tac-home-split .tac-trend__views{color:#7e90ae !important;}
.tac-root.tac-home-split .tac-trend__label{color:#f2f6fc !important;}
/* photo-less cases: a branded plate instead of a blank hole */
.tac-root .pp-case-thumb--none{
background:linear-gradient(135deg,#12264a,#0a1730) !important;
display:flex !important;align-items:center;justify-content:center;
aspect-ratio:16/9;width:100%;
}
.tac-root .pp-case-thumb--none::after{
content:"PROFILOPOLITICS" !important;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
letter-spacing:.28em;font-size:13px;color:rgba(219,228,242,.38) !important;
}
/* === END ITEM 33c === */
/* ============================================================
ITEM 34 · PHONE CARDS + PHOTO VIEWER LOCK (2026-11-01)
Owner's phone report (Nov 1): on the phone the case cards
printed WHITE while the skin's bright titles/meta sat on
top — unreadable — and with a photo open the writing under
it still scrolled. Phone-card rules below use the strongest
selectors on the exact card path so no other sheet can
outrank them. The viewer gets a solid cover (nothing shows
through) and pairs with the ITEM 34 scroll lock in
pp-fixes.js. Append-only; delete this block to revert.
============================================================ */
@media (max-width: 991px){
.tac-root.tac-home-split .pp-writing-side .case-list .case-box,
.tac-root .case-list .case-box,
.tac-root .case-rail .case-box{
background:#0e1e38 !important;
border:1px solid #1e2c47 !important;
border-radius:18px !important;
box-shadow:0 10px 30px rgba(0,0,0,.45) !important;
}
.tac-root .case-list .case-box .case-box-title,
.tac-root .case-rail .case-box .case-box-title{color:#f2f6fc !important;}
.tac-root .case-list .case-box .case-box-meta,
.tac-root .case-rail .case-box .case-box-meta,
.tac-root .case-list .case-box .case-box-info,
.tac-root .case-rail .case-box .case-box-info{color:#a7b6cf !important;}
.tac-root .case-list .case-box .pp-case-counts,
.tac-root .case-rail .case-box .pp-case-counts{color:#7e90ae !important;}
.tac-root .case-list .case-box .pp-case-counts strong,
.tac-root .case-rail .case-box .pp-case-counts strong{color:#dbe4f2 !important;}
.tac-root .case-list .case-box .updated-ago,
.tac-root .case-rail .case-box .updated-ago{color:#7e90ae !important;}
}
/* photo viewer: solid cover — no page writing shows through */
.tac-lightbox{background:#040b16 !important;overscroll-behavior:none !important;}
/* scroll lock while the viewer is open (JS in pp-fixes.js ITEM 34) */
html.pp-lb-lock,body.pp-lb-lock{overflow:hidden !important;overscroll-behavior:none !important;}
/* === END ITEM 34 · PHONE CARDS + PHOTO VIEWER LOCK === */
/* ============================================================
ITEM 35 · EVERY CASE CARD DARK, EVERY PAGE, EVERY WIDTH (2026-11-01)
Owner's phone, fresh loads: the cards in the "More Cases"
strip at the bottom of a case page are WHITE with the skin's
bright titles on top — unreadable. Cause found in the served
markup: that strip lives in .pp-more-cases / .pp-more-cases-row,
a case page's root carries no .tac-home-split class, and there
is no .case-rail element anywhere — so Item 33b (home-split
only) and Item 34 (.case-rail) never reached those cards and
layout-2026's white won. These rules carry no media query and
use the exact containers, so every case card — home list and
More Cases strip alike — is dark with readable writing, and
the More Cases heading shows. Append-only; delete to revert.
============================================================ */
.tac-root .pp-more-cases .case-box,
.tac-root .case-list .case-box,
.tac-root .case-box.pp-case-card{
background:#0e1e38 !important;
border:1px solid #1e2c47 !important;
border-radius:18px !important;
box-shadow:0 10px 30px rgba(0,0,0,.45) !important;
}
.tac-root .pp-more-cases .case-box .case-box-title,
.tac-root .case-list .case-box .case-box-title{color:#f2f6fc !important;}
.tac-root .pp-more-cases .case-box .case-box-meta,
.tac-root .case-list .case-box .case-box-meta,
.tac-root .pp-more-cases .case-box .case-box-info,
.tac-root .case-list .case-box .case-box-info{color:#a7b6cf !important;}
.tac-root .pp-more-cases .case-box .pp-case-counts,
.tac-root .case-list .case-box .pp-case-counts{color:#7e90ae !important;}
.tac-root .pp-more-cases .case-box .pp-case-counts strong,
.tac-root .case-list .case-box .pp-case-counts strong{color:#dbe4f2 !important;}
.tac-root .pp-more-cases .case-box .updated-ago,
.tac-root .case-list .case-box .updated-ago{color:#7e90ae !important;}
.tac-root .pp-more-cases h3{color:#f2f6fc !important;}
/* === END ITEM 35 · EVERY CASE CARD DARK === */
/* ============================================================
ITEM 36 · ADSENSE REVIEW (2026-11-01): hide the empty labelled
advert slots until AdSense approves — an empty "Ad space" box
reads as an unfinished page to the reviewer. The slots return
by removing this one rule.
============================================================ */
.pp-ad-slot{display:none!important}
/* ============================================================
ITEM 37 · CASES AS A LIST ON PHONES (2026-11-01)
Owner's order (Nov 1, with his phone screenshot of the big
photo cards): "I will prefer this to be a list — so people
can see the news they are looking for" / "It has to have
photo by the side" / "Let the post go down very well —
maybe 30 before more". So in the phone lane the home case
list becomes one case per row — photo at the side, writing
beside it — and the rows run down the page. Desktop keeps
the photo cards exactly as they are. The 30-before-"See
more" count itself is set in pp-fixes.js (ITEM 37 there:
the home pager limit 12 → 30). Scoped to the home .case-list
only — case pages and the More Cases strip are untouched.
Append-only; delete this block to revert.
============================================================ */
@media (max-width: 991px){
.tac-root.tac-home-split .pp-writing-side .case-list,
.tac-root .case-list{
display:flex !important;flex-direction:column !important;
grid-template-columns:1fr !important;gap:10px !important;
max-height:none !important;overflow:visible !important;
}
.tac-root .case-list .case-box{
margin-bottom:0 !important;border-radius:16px !important;
}
.tac-root.tac-home-split .pp-writing-side .case-list .case-box-link,
.tac-root .case-list .case-box-link{
display:flex !important;flex-direction:row !important;
align-items:stretch !important;gap:12px !important;
padding:10px !important;
}
.tac-root.tac-home-split .pp-writing-side .case-list .pp-case-thumb,
.tac-root .case-list .pp-case-thumb{
width:104px !important;height:auto !important;min-height:104px !important;
flex:0 0 104px !important;aspect-ratio:auto !important;
object-fit:cover !important;border-radius:12px !important;
}
.tac-root .case-list .pp-case-thumb--none{
width:104px !important;flex:0 0 104px !important;
aspect-ratio:auto !important;min-height:104px !important;
}
.tac-root .case-list .pp-case-thumb--none::after{
font-size:8px !important;letter-spacing:.14em !important;text-align:center !important;
}
.tac-root .case-list .case-box-body{
flex:1 1 auto !important;min-width:0 !important;
padding:2px 0 !important;
display:flex !important;flex-direction:column !important;
}
.tac-root .case-list .case-box-title{
font-size:15.5px !important;line-height:1.32 !important;
display:-webkit-box !important;-webkit-line-clamp:3 !important;
-webkit-box-orient:vertical !important;overflow:hidden !important;
}
.tac-root .case-list .case-box-meta{
font-size:12.5px !important;line-height:1.4 !important;margin-top:4px !important;
display:-webkit-box !important;-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;overflow:hidden !important;
}
.tac-root .case-list .pp-case-counts{
font-size:12.5px !important;margin-top:auto !important;padding-top:5px !important;
}
.tac-root .case-list .case-box:hover{transform:none !important;}
}
/* === END ITEM 37 · CASES AS A LIST ON PHONES === */
/* ============================================================
ITEM 38 · STAGE PILL ROW REMOVED (2026-11-01)
Owner's order (Nov 1, with his screenshot of the pill row —
"ms Identified / Suspect Arrested / Charged…"): "I don't
want this". The pills duplicate the CATEGORY dropdown above
them, which already filters by stage — so the whole pill row
(.pp-stage-filter) is hidden on every width and the cases
start sooner. The dropdown stays as the one stage filter.
Append-only; delete this block to revert.
============================================================ */
.tac-root .pp-stage-filter{display:none !important;}
/* === END ITEM 38 · STAGE PILL ROW REMOVED === */
/* ============================================================
ITEM 39 · CASE PAGE SHOWS ONLY THE CASE AND ITS UPDATES (2026-11-01)
Owner's order (Nov 1): "When you open a case you should not
see anything other than the update — there shouldn't be like
more cases you can see or all that." So the "More Cases"
strip at the foot of every case page (.pp-more-cases, the 3
most recently updated OTHER cases) is removed. A case page
is now the case itself and its updates, nothing else. The
room chat stays — it is the chat room, not a case list.
Append-only; delete this block to revert.
============================================================ */
.tac-root .pp-more-cases{display:none !important;}
/* === END ITEM 39 · CASE PAGE = ONLY THE CASE AND ITS UPDATES === */
/* ============================================================
ITEM 40 · NO "TIMELINE" HEADING ON CASE PAGES (2026-11-01)
Owner's order (Nov 1, walking the case page top to bottom):
the case opens with the photo and the first news, then the
share buttons and the Date / Location / Stage box, "then
after that the updates will follow" — and "there is no need
to put timeline all that take up spaces". So the "Timeline"
heading above the updates is removed; the updates follow
the fact box directly. Pairs with ITEM 39 (More Cases strip
removed) — a case page is the case and its updates only.
Append-only; delete this block to revert.
============================================================ */
.tac-root .case-layout .case-reading > h2{display:none !important;}
.tac-root .case-layout .case-reading{margin-top:0 !important;padding-top:0 !important;}
/* === END ITEM 40 · NO TIMELINE HEADING === */
/* ============================================================
ITEM 41 · READ MORE ON CASE WRITING (2026-11-01)
Owner's order (Nov 1): "The writing should be — after few
writing you make it in a way that one will click more if he
wants to read all, so it can expand to read more." Long
writing on a case page (the first-news summary and each
update's body) is cut after 4 lines with a "Read more" link
under it; tapping expands the full text ("Read less" folds
it back). Short writing is left whole — no button. The
collapse class is added by pp-fixes.js ITEM 41 only when
the text is actually long. Append-only; delete this block
(and the ITEM 41 JS) to revert.
============================================================ */
.tac-root .pp-rm-collapsed{display:-webkit-box !important;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden !important;}
.tac-root .pp-rm-btn{display:inline-block;margin:6px 0 2px;padding:2px 0;background:none;border:0;font:inherit;font-size:14.5px;font-weight:700;color:#8fc1ff;cursor:pointer;-webkit-tap-highlight-color:transparent;}
/* === END ITEM 41 · READ MORE === */
/* ============================================================
ITEM 41b · THE MISSING CLAMP FOR THE ROOM'S OWN VIEW MORE
(2026-11-01). The server already renders every LONG update
body with class "pp-clamped" plus a "View more" button, and
chat-static §8.7 already toggles the class + label in place
— but NO stylesheet anywhere defined .pp-clamped, so the
class did nothing and the writing always showed in full
(the owner's complaint, with his Binance screenshot). This
block supplies the missing half: a clamped body shows 4
lines with the room's own fade at the cut (item-23 design),
and the button is styled as a plain link. Short updates are
never given the class or the button by the server, so they
stay whole. Pairs with the ITEM 41 JS narrowing (updates
are the native system's; pp-fixes' own cut now covers only
the first-news summary, which has no native button).
Append-only; delete this block to revert.
============================================================ */
.tac-root .timeline-body.pp-update-body.pp-clamped{display:-webkit-box !important;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden !important;-webkit-mask-image:linear-gradient(#000 78%, transparent);mask-image:linear-gradient(#000 78%, transparent);}
.tac-root .pp-view-more{display:inline-block;margin:6px 0 2px;padding:2px 0;background:none;border:0;font:inherit;font-size:14.5px;font-weight:700;color:#8fc1ff;cursor:pointer;-webkit-tap-highlight-color:transparent;}
/* === END ITEM 41b · PP-CLAMPED + VIEW MORE === */
/* ============================================================
ITEM 42 · THE LAST-UPDATED TIME MUST ALWAYS SHOW (2026-11-01)
Owner: "The cases are not showing the time it was last
updated." Two faults: (1) ITEM 37 clamped the row meta to
2 lines, so on rows with a long place name the trailing
"· Updated …" fell on line 3 and was cut off; (2) the meta
only ever carried relative words ("just now" — wrongly,
even hours later), never the time itself. The clamp comes
off here (phone lane, same full path as ITEM 37); the time
itself is written by pp-fixes.js ITEM 42 from each card's
data-updated-at. Append-only; delete this block (and the
ITEM 42 JS) to revert.
============================================================ */
@media (max-width:991px){
.tac-root.tac-home-split.pp-writing-side .case-list article.case-box .case-box-meta{display:block !important;-webkit-line-clamp:unset !important;-webkit-box-orient:unset !important;overflow:visible !important;max-height:none !important;}
}
/* === END ITEM 42 · UPDATED TIME ALWAYS SHOWS === */
/* ============================================================
ITEM 43 · CHAT LIVES ONLY ON THE DESKTOP ROOM HOME — CASES
GET COMMENTS (2026-11-01)
Owner's orders: "Instead of chat we will put comment in the
cases in the individual cases they will have comment" and
"Leave the chat on the desktop but delete the chat every
other place it can only exist here" (with his photo of the
desktop room home — cases left, Chat Room panel right).
So: the Chat Room panel stays ONLY on the room home at
desktop width. Everywhere else — phones, and every case
page — the chat does not exist; each case page carries its
own Comments section instead (built by pp-fixes.js ITEM 43
on the room's own chat API, one room per case).
This CSS is the instant cover (no flash of chat before the
JS strips it for real); the JS does the removal and keeps
it removed across the room's soft navigation, which swaps
the whole body without reloading scripts.
Append-only; delete this block (and the ITEM 43 JS) to
revert.
============================================================ */
/* Case pages (and any non-home room page): no chat, any width */
.tac-root:not(.tac-home-split) .case-chat,
.tac-root:not(.tac-home-split) .chat-toggle,
.tac-root:not(.tac-home-split) [data-chat-reopen]{display:none !important;}
/* Phones: no chat anywhere in the room, home included */
@media (max-width:991px){
.tac-root .pp-chat-side,
.tac-root #tac-mobile-chat-trigger,
.tac-root [data-chat-reopen]{display:none !important;}
}
/* --- Comments (case pages) --- */
.pp-comments{margin:34px 0 10px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);}
.pp-comments h2{margin:0 0 6px;font-size:21px;font-weight:800;color:#ffffff;}
.pp-comments .pp-comments-note{margin:0 0 14px;font-size:13.5px;color:#93a4bd;}
.pp-comment{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.pp-comment-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.pp-comment-name{font-size:14.5px;font-weight:700;color:#ffffff;display:inline-flex;align-items:center;gap:5px;}
.pp-comment-when{font-size:12.5px;color:#93a4bd;}
.pp-comment-body{margin-top:4px;font-size:15.5px;line-height:1.65;color:#e8edf5;white-space:pre-wrap;word-wrap:break-word;}
.pp-comments-empty{padding:8px 0 2px;font-size:15px;color:#c6d2e4;}
.pp-comment-form{margin-top:18px;}
.pp-comment-form textarea{width:100%;box-sizing:border-box;min-height:74px;resize:vertical;background:#0d1930;border:1px solid #2a3c5f;border-radius:10px;padding:12px 14px;color:#ffffff;font-size:15.5px;font-family:inherit;}
.pp-comment-form textarea::placeholder{color:#7e90ac;}
.pp-comment-actions{margin-top:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.pp-comment-post{background:#d0122c;color:#ffffff;border:0;border-radius:999px;padding:10px 24px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;}
.pp-comment-signin-link{background:none;border:0;color:#8fc1ff;font-size:14px;font-weight:600;cursor:pointer;padding:0;font-family:inherit;}
.pp-comment-error{display:none;margin-top:10px;font-size:14px;color:#ff9a9a;}
.pp-comment-auth{display:none;margin-top:14px;background:#0d1930;border:1px solid #2a3c5f;border-radius:10px;padding:16px;}
.pp-comment-auth.is-open{display:block;}
.pp-comment-auth .pp-auth-tabs{display:flex;gap:8px;margin-bottom:12px;}
.pp-comment-auth .pp-auth-tabs button{background:#1a2842;color:#dfe6f2;border:1px solid #2a3c5f;border-radius:8px;padding:7px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
.pp-comment-auth .pp-auth-tabs button.is-active{background:#d0122c;border-color:#d0122c;color:#ffffff;}
.pp-comment-auth label{display:block;margin-bottom:10px;font-size:14px;color:#dfe6f2;}
.pp-comment-auth input{display:block;width:100%;box-sizing:border-box;margin-top:4px;background:#0a1425;border:1px solid #2a3c5f;border-radius:8px;padding:10px 12px;color:#ffffff;font-size:15px;font-family:inherit;}
.pp-comment-auth .pp-auth-submit{width:100%;background:#d0122c;color:#ffffff;border:0;border-radius:8px;padding:11px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;}
/* === END ITEM 43 · CHAT ONLY ON DESKTOP HOME · COMMENTS === */
/* ============================================================
ITEM 45 · UPDATED TIME ON PHONE ROWS (2026-11-01) — the JS
block in pp-fixes.js appends " · Updated X ago" to the
counts line on phone widths (ITEM 37 clamps the meta that
carries the time to 2 lines, hiding it). This only keeps
the appended words together on one line. Append-only;
delete with the JS block to revert.
============================================================ */
.tac-root .case-list .pp-case-counts .pp-upd-counts{white-space:nowrap;}
/* === END ITEM 45 · UPDATED TIME ON PHONE ROWS === */
/* ============================================================
ITEM 47 · CARDS TAKE 95% OF THE PHONE WIDTH (2026-11-01)
Owner, marking both sides of his phone screenshot: "This
space is so much — can we take 95 percent of that space."
The room's .page wrapper pads 20px on each side at every
width; on a phone that throws away a tenth of the screen.
In the phone lane the side padding becomes 2.5% of the
screen width each side, so the content — search, category
and the case rows — takes 95%. Desktop is untouched.
Append-only; delete this block to revert.
============================================================ */
@media (max-width: 991px){
.tac-root .page{padding-left:2.5vw !important;padding-right:2.5vw !important;}
}
/* === END ITEM 47 · 95% PHONE WIDTH === */
/* ============================================================
ITEM 48 · SHORTER, WIDER PHONE ROWS (2026-11-01)
Owner, on the widened list: "Still much — reduce the
height and increase the width by another 90 percent to
eat up that space." So in the phone lane: (1) the page
side padding drops from ITEM 47's 2.5% to 0.5% of the
screen width each side — the rows run nearly edge to
edge; (2) each row gets shorter — the title clamps at
2 lines instead of 3, the photo narrows 104px -> 96px
(which also gives the writing more width, so titles and
counts wrap less), and the card padding and list gaps
tighten. Desktop is untouched. Append-only; delete this
block to revert.
============================================================ */
@media (max-width: 991px){
.tac-root .page{padding-left:.5vw !important;padding-right:.5vw !important;}
.tac-root .case-list{gap:8px !important;}
.tac-root.tac-home-split .pp-writing-side .case-list .case-box-link,
.tac-root .case-list .case-box-link{padding:7px 8px !important;gap:10px !important;}
.tac-root.tac-home-split .pp-writing-side .case-list .pp-case-thumb,
.tac-root .case-list .pp-case-thumb{width:96px !important;flex:0 0 96px !important;min-height:96px !important;}
.tac-root .case-list .pp-case-thumb--none{width:96px !important;flex:0 0 96px !important;min-height:96px !important;}
.tac-root.tac-home-split .pp-writing-side .case-list .case-box-title,
.tac-root .case-list .case-box-title{-webkit-line-clamp:2 !important;}
.tac-root .case-list .case-box-meta{margin-top:3px !important;}
.tac-root .case-list .pp-case-counts{padding-top:3px !important;}
}
/* === END ITEM 48 · SHORTER, WIDER PHONE ROWS === */
/* ============================================================
ITEM 50 - NEXT-UPDATE BOX READABLE (2026-11-02)
The case page "Next expected update" box (base style.css
.next-update) sits on a cream background (#fff8e6) but the
base rule sets no text colour, so it inherits the page's
near-white writing - pale text on cream, unreadable (user
screenshot, Louisville Kelley case, 2026-11-02). Give the
box the brand's dark navy text. Append-only; delete this
block to revert.
============================================================ */
.next-update{color:#1a2842 !important;}
.next-update strong{color:#1a2842 !important;}
/* === END ITEM 50 - NEXT-UPDATE TEXT COLOUR === */
/* ============================================================
=== ITEM 51 - EVIDENCE HEADING CONTRAST (2026-11-05) ===
The case page sits on a very dark navy background, but the
base rule (item18-photos.css) colours the "Evidence" heading
dark slate (#0f172a) at 13px - dark on dark, barely legible
(verified live, East Conemaugh case, 2026-11-05). Make it
white, larger and bolder, like the Comments heading below
it. Append-only; delete this block to revert.
============================================================ */
.tac-evidence h4{color:#ffffff !important;font-size:16px !important;font-weight:800;letter-spacing:1px;}
/* === END ITEM 51 - EVIDENCE HEADING CONTRAST === */
/* ============================================================
=== ITEM 52 - NEXT CASE LINK (2026-11-05) ===
The case page foot carries a "Next case: ->" link so
a reader can keep moving through the room. Style it as a
clear, readable navigation line on the dark page.
Append-only; delete this block to revert.
============================================================ */
.pp-next-case{margin:18px 0 6px;font-size:16px;font-weight:700;}
.pp-next-case a{color:#ffffff !important;text-decoration:underline;}
/* === END ITEM 52 - NEXT CASE LINK === */
/* ============================================================
=== ITEM 53 - RELATED CASES STRIP BACK ON (2026-11-05) ===
ITEM 39 (2026-11-01) hid the case-page foot strip because it
showed 3 unrelated "most recently updated" cases. The owner
has since approved (2026-11-05, room upgrade item 3) a
RELATED cases strip on case pages - same state first, then
same stage - which is what the strip now carries. This block
reverses ITEM 39's display:none for that strip only.
Append-only; delete this block to revert.
============================================================ */
.tac-root .pp-more-cases{display:block !important;}
/* === END ITEM 53 - RELATED CASES STRIP BACK ON === */