/* =====================================================================
   ProfiloPolitics - PHONE VERSION (one version, one file)
   READABILITY PASS (2026-10-25): secondary text brightened to #d8e0ee,
   red text accent brightened to #ff6b6b, base/card/article fonts raised,
   meta + nav labels enlarged and weighted - all writing must stay easy
   to read on a phone in daylight. Do not dim text below these values.
   MOBILE ONLY: the whole file sits inside a single media query -
   screens wider than 768px never load any of it.
   Blog DESKTOP: untouched. Chat DESKTOP: untouched.
   Inside the one phone version there are two parts:
     PART A - the BLOG on phone (home, news, article, watch, brief)
     PART B - the 2ND AMENDMENT CHAT ROOM on phone (its own page)
   ===================================================================== */

@media (max-width: 768px) {

  /* ================= PART A - BLOG PHONE ================= */


  :root {
    --pp-bg: #071122;
    --pp-panel: #0d1c34;
    --pp-navy: #1a2842;
    --pp-red: #cc0000;
    --pp-red-soft: #ff6b6b;
    --pp-text: #ffffff;
    --pp-grey: #d8e0ee;
    --pp-line: #3d5173;
  }

  /* ---------- Base ---------- */
  body {
    background: var(--pp-bg);
    color: var(--pp-text);
    font-size: 18px;
    line-height: 1.6;
    padding-bottom: 76px; /* room for the fixed bottom bar */
  }
  img { max-width: 100%; height: auto; }

  /* ---------- Header ---------- */
  header, .site-header {
    position: sticky; top: 0; z-index: 900;
    background: var(--pp-panel);
    border-bottom: 1px solid var(--pp-line);
    padding: 8px 12px;
  }

  /* ---------- Breaking ticker ---------- */
  .breaking-ticker, .news-ticker {
    background: var(--pp-red);
    color: #fff;
    font-size: 15px;
    white-space: nowrap; overflow: hidden;
  }

  /* ---------- THE CHAT DOCK ON BLOG PAGES (the original complaint) ----
     On blog phone pages the standing chat must NEVER open by itself and
     never cover the article. It collapses to its red edge tab; the chat
     itself lives on its own page (see 2a-chat-mobile.css).            */
  #tac-standing-chat {
    transform: translateX(100%);        /* fully off-canvas */
    transition: transform .25s ease;
    width: 92vw; max-width: 92vw;
  }
  body.tac-split { margin-right: 0 !important; }  /* no split layout on phone */
  #tac-standing-chat.open,
  body.tac-split #tac-standing-chat { transform: translateX(0); }

  /* ---------- Home: hero + story cards ---------- */
  .hero-story img, .top-story img {
    width: 100%; height: auto; display: block;
  }
  .hero-story h1, .top-story h2 {
    font-size: 29px; line-height: 1.2; margin: 12px 14px;
  }
  .story-card, .article-card {
    display: flex; gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pp-line);
  }
  .story-card img, .article-card img {
    width: 96px; height: 72px; object-fit: cover; border-radius: 6px;
    flex: 0 0 auto;
  }
  .story-card h3, .article-card h3 { font-size: 19px; line-height: 1.32; margin: 0; font-weight: 700; }

  /* Second Amendment block on the home page */
  .second-amendment-block {
    margin: 16px 14px; padding: 18px;
    border: 2px solid var(--pp-red); border-radius: 12px;
    background: #280a0a;
  }
  .second-amendment-block a.button {
    display: inline-block; background: var(--pp-red); color: #fff;
    padding: 10px 18px; border-radius: 8px; font-weight: 700;
    text-decoration: none;
  }

  /* ---------- News list page ---------- */
  .category-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; }
  .category-chips a {
    background: var(--pp-panel); color: #fff; border: 1px solid var(--pp-line);
    border-radius: 999px; padding: 8px 16px; white-space: nowrap;
    text-decoration: none; font-weight: 600; font-size: 15px;
  }
  .category-chips a.active { background: var(--pp-red); border-color: var(--pp-red); }
  .news-list .story-card { flex-direction: column; }
  .news-list .story-card img { width: 100%; height: auto; aspect-ratio: 16/9; }

  /* ---------- Article page: the story IS the page ---------- */
  article h1, .article-title {
    font-size: 30px; line-height: 1.22; margin: 14px;
  }
  .article-meta { color: var(--pp-grey); font-size: 15px; font-weight: 600; margin: 0 14px 10px; }
  article .featured-image, .article-hero img {
    width: 100%; display: block; margin: 0;
  }
  article .body, .article-body {
    font-size: 19px; line-height: 1.7; padding: 0 14px;
  }
  article blockquote {   /* pull quotes are the only break in the body */
    border-left: 4px solid var(--pp-red);
    margin: 20px 14px; padding: 4px 0 4px 14px;
    font-size: 20px; font-weight: 700;
  }
  article iframe, article video { max-width: 100%; }
  .evidence-tag {
    display: inline-block; margin: 10px 14px 0;
    border: 1.5px solid var(--pp-red); color: var(--pp-red-soft);
    border-radius: 8px; padding: 4px 12px; font-weight: 700; font-size: 14px;
  }
  .share-row { display: flex; align-items: center; gap: 10px; padding: 14px; }
  .share-row a {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--pp-navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-weight: 700;
  }

  /* ---------- Watch page ---------- */
  .watch-featured { position: relative; }
  .watch-featured .play {
    position: absolute; inset: 0; margin: auto;
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--pp-red);
  }
  .video-row { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--pp-line); }
  .video-row img { width: 132px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }

  /* ---------- Daily Brief (newsletter) ---------- */
  .newsletter-join input[type="email"] {
    width: 100%; padding: 14px; border-radius: 10px; border: 0; font-size: 17px;
  }
  .newsletter-join button {
    width: 100%; padding: 14px; border-radius: 10px; border: 0;
    background: var(--pp-red); color: #fff; font-weight: 800; font-size: 18px;
  }

  /* ---------- Fixed bottom bar (phone only) ---------- */
  .mobile-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: flex; background: var(--pp-panel);
    border-top: 1px solid var(--pp-line);
  }
  .mobile-bottom-nav a {
    flex: 1; text-align: center; padding: 14px 0 16px;
    color: var(--pp-grey); font-weight: 700; font-size: 15.5px;
    text-decoration: none; text-transform: uppercase;
  }
  .mobile-bottom-nav a.active { color: var(--pp-red-soft); box-shadow: inset 0 3px 0 var(--pp-red); }

  /* ---------- P9 fix: homepage hero — kill the forced 80vh empty block ----------
     The hero section is built with inline styles (min-height:80vh, container
     padding 60px, 40px/48px margins) that leave a tall empty white box on
     phone. These rules are scoped to that section only (it is the one whose
     container holds both the editorial kicker and the home portal card) and
     use !important because the values they replace are inline. */
  div:has(> .container .editorial-kicker):has(> .container .home-portal-card) { min-height: auto !important; }
  div:has(> .container .editorial-kicker):has(> .container .home-portal-card) > .container { padding: 28px 24px !important; }
  div:has(> .container .editorial-kicker):has(> .container .home-portal-card) > .container > div:first-child { margin-bottom: 20px !important; }
  div:has(> .container .editorial-kicker):has(> .container .home-portal-card) > .container > div:last-child { margin-bottom: 8px !important; }

  /* ---------- P10 fix: article share buttons — no ovals, space managed ----------
     The bundle CSS forces border-radius:50% on text buttons, which stretches
     them into giant ovals, and the row eats vertical space. Replace with one
     compact row of equal rounded-rectangle buttons, 42px tall. */
  .share-row { gap: 8px !important; padding: 12px 0 4px !important; margin-top: 14px !important; align-items: stretch !important; }
  .share-row .share-label { width: 100%; margin: 0 0 2px; color: #d8e0ee; font-size: 11px; }
  .share-row .share-button {
    flex: 1 1 0 !important; width: auto !important; height: 42px !important; min-height: 42px !important;
    border-radius: 10px !important; padding: 0 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13px !important; font-weight: 600 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    white-space: nowrap;
  }

  /* ---------- P11 fix: article body writing — bright on phone, permanently ----------
     Today the bright mobile reading style lives inside each article's body
     as a <style> block + <div class="pp-article-body"> wrap, pasted article
     by article; any article published without it (every new staff article)
     falls back to the site's dim default text on navy. These rules put the
     SAME style in the site stylesheet: they cover .pp-article-body (so
     wrapped articles no longer need their in-body <style> block) AND the
     article body itself, so plain unwrapped articles are bright too.
     Once live, no article ever needs the wrap again and the per-article
     wrapping duty can be retired. Mobile only — desktop untouched.
     Values are the approved V1 standard; final font/size follows the
     owner's verdict on the #949 font sample. */
  .pp-article-body, .pp-article-body p,
  article .body, article .body p,
  .article-body, .article-body p {
    font-size: 19px; line-height: 1.75; color: #edf1f7;
  }
  .pp-article-body a, article .body a, .article-body a { color: #8fc1ff; }
  .pp-article-body blockquote {
    color: #ffffff; font-size: 20px;
  }

  /* ================= PART B - 2ND AMENDMENT CHAT PHONE ================= */


  :root {
    --pp-bg: #071122;
    --pp-panel: #0d1c34;
    --pp-red: #cc0000;
    --pp-red-soft: #ff6b6b;
    --pp-text: #ffffff;
    --pp-grey: #d8e0ee;
    --pp-line: #3d5173;
    --pp-name: #a9c8ff;
  }

  /* ---------- Chat page shell: full phone screen, nothing on top ---- */
  body.chat-page, .chat-room {
    padding-bottom: 0; /* cancels Part A's blog bottom-bar padding */
    background: var(--pp-bg); color: var(--pp-text);
    height: 100dvh; display: flex; flex-direction: column;
    margin: 0;
  }

  .chat-header {
    padding: 16px 14px 10px;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-bg);
  }
  .chat-header h1 { font-size: 26px; margin: 0; line-height: 1.15; }
  .chat-header h1 .accent { color: var(--pp-red-soft); }
  .chat-header .room-line { color: var(--pp-grey); font-size: 15px; font-weight: 600; margin-top: 6px; }

  /* ---------- Message list: the room scrolls, the page does not ----- */
  .chat-messages {
    flex: 1 1 auto; overflow-y: auto;
    padding: 6px 14px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .chat-message {
    padding: 12px 0;
    border-bottom: 1px solid var(--pp-line);
    font-size: 17.5px; line-height: 1.55;
    word-break: break-word;
  }
  .chat-message .name { color: var(--pp-name); font-weight: 700; }
  .chat-message .time { color: var(--pp-grey); font-size: 14.5px; margin-left: 8px; }
  .chat-message .reply {
    display: block; text-align: right;
    color: var(--pp-red-soft); font-weight: 700; font-size: 15px;
    text-decoration: none; margin-top: 4px;
  }

  /* ---------- Sign-in strip (guests) ---------- */
  .chat-signin {
    margin: 10px 14px 0; padding: 12px;
    background: var(--pp-panel); border: 1px solid var(--pp-line);
    border-radius: 10px; text-align: center; font-weight: 700;
  }
  .chat-signin a { color: #fff; text-decoration: none; }

  /* ---------- Message bar: pinned to the bottom of the room -------- */
  .chat-composer {
    flex: 0 0 auto;
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--pp-bg);
  }
  .chat-composer input[type="text"], .chat-composer textarea {
    flex: 1 1 auto; border: 0; border-radius: 999px;
    padding: 13px 18px; font-size: 16.5px;
    background: #fff; color: #1e2637;
  }
  .chat-composer button {
    flex: 0 0 auto; border: 0; border-radius: 999px;
    background: var(--pp-red); color: #fff;
    font-weight: 800; font-size: 17px; padding: 13px 24px;
  }

  /* ---------- Bottom bar (same bar as the blog phone design) ------- */
  body.chat-page .mobile-bottom-nav, .chat-room .mobile-bottom-nav {
    position: static; /* inside the flex column: sits under the composer area */
    display: flex; background: var(--pp-panel);
    border-top: 1px solid var(--pp-line);
  }
  .mobile-bottom-nav a {
    flex: 1; text-align: center; padding: 14px 0 16px;
    color: var(--pp-grey); font-weight: 700; font-size: 15.5px;
    text-decoration: none; text-transform: uppercase;
  }
  .mobile-bottom-nav a.active { color: var(--pp-red-soft); box-shadow: inset 0 3px 0 var(--pp-red); }

  /* The room is a page of its own: when the chat is open on a phone,
     the blog article is NOT behind it — no split view, no overlay.   */
  body.tac-split { margin: 0 !important; }

  /* ---------- CASE PAGE FIX (found by the owner 2026-10-25) --------
     Opening a case paints the page navy (the Oct 24 blog-colour
     re-skin) but the case writing keeps the OLD dark ink colour from
     the light design (--tac-ink #1a1a1a), so the headline and the
     story are black on navy — unreadable. These rules flip ONLY the
     case page's writing to the bright phone palette. The white
     DATE / LOCATION facts box is readable as-is and is NOT touched.
     Selectors are the live ones from the chat app's own stylesheets
     (style.css / layout-2026-10-24.css).                            */
  .tac-root .case-head h1 {
    color: #ffffff !important;
  }
  .tac-root .case-kicker {
    color: #a9c8ff !important;
  }
  .tac-root .case-summary,
  .tac-root .case-reading,
  .tac-root .case-reading p,
  .tac-root .case-reading li {
    color: #d8e0ee !important;
  }
  .tac-root .case-reading a {
    color: #8fc1ff !important;
  }
  .tac-root .case-rail h2 {
    color: #ffffff !important;
  }

  /* ---------- LIVE MARKUP SELECTOR MAPPINGS (README-FOR-PROGRAMMER) ---------- */
  .mobile-bottom-nav button {
    flex: 1; text-align: center; padding: 14px 0 16px;
    color: var(--pp-grey) !important; font-weight: 700 !important; font-size: 15.5px !important;
    text-decoration: none; text-transform: uppercase;
  }
  .mobile-bottom-nav button.active {
    color: var(--pp-red-soft) !important;
    box-shadow: inset 0 3px 0 var(--pp-red) !important;
  }

  /* Article page live classes (.pp-article-headline, .pp-byline, .article-content) */
  article h1, .pp-article-headline, .article-title {
    color: #ffffff !important;
    font-size: 30px !important;
    line-height: 1.22 !important;
  }
  .pp-byline, .pp-byline a, .pp-byline time, .pp-byline span, .article-meta {
    color: var(--pp-grey) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .pp-article-body, .pp-article-body p, .pp-article-body li,
  article .body, article .body p,
  .article-body, .article-body p, .article-body li,
  .article-content, .article-content p, .article-content li,
  .article-content ul, .article-content ol {
    font-size: 19px !important;
    line-height: 1.75 !important;
    color: #edf1f7 !important;
  }
  .pp-article-body strong, .article-body strong, .article-content strong,
  .pp-article-body b, .article-body b, .article-content b,
  .pp-article-body h2, .pp-article-body h3, .pp-article-body h4,
  .article-content h2, .article-content h3, .article-content h4 {
    color: #ffffff !important;
  }
  .pp-article-body a, article .body a, .article-body a, .article-content a {
    color: #8fc1ff !important;
  }
  .pp-article-body blockquote, article blockquote, .article-content blockquote {
    background: rgba(13, 28, 52, 0.75) !important;
    color: #ffffff !important;
    border-left: 4px solid var(--pp-red) !important;
  }
  article .pp-article-video h3,
  article .pp-latest-rail h2,
  .pp-latest-rail h2,
  article .pp-latest-rail > ul a,
  article .pp-latest-rail > div a,
  .pp-latest-rail > ul a,
  .pp-latest-rail > div a,
  article .pp-prev-next a,
  .pp-prev-next a {
    color: #edf1f7 !important;
  }
  article .pp-prev-next .pp-prev-next-label,
  .pp-prev-next .pp-prev-next-label {
    color: var(--pp-red-soft) !important;
  }
  article .pp-latest-rail time,
  .pp-latest-rail time {
    color: #a9c8ff !important;
    font-weight: 700 !important;
  }
  /* Keep Most Read card inside .pp-latest-rail dark-on-white */
  article .pp-latest-rail .pp-most-read h3,
  .pp-most-read h3 {
    color: #0d2138 !important;
  }
  article .pp-latest-rail .pp-most-read a,
  .pp-most-read .pp-most-read-title a {
    color: #16233c !important;
  }

  /* Homepage hero & dark cards must always have bright white headlines */
  .pp-home-hero-card h1,
  .hero-story h1,
  div[style*="rgb(12, 27, 51)"] h1,
  div[style*="#0c1b33"] h1,
  .pp-slider .pp-headline,
  .second-amendment-block h3 {
    color: #ffffff !important;
  }
  .second-amendment-block {
    background: #280a0a !important;
    border: 2px solid var(--pp-red) !important;
    border-radius: 12px !important;
  }
  .pp-home-main-layout {
    display: flex;
    flex-direction: column;
  }
  .pp-home-rail-col {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .tac-page > div > .container {
    background-color: #ffffff;
    color: #0f172a;
  }

}

/* =====================================================================
   2026-10-31 — MOBILE FIX (owner: "fix it all"): chat names, message
   times and reply links on the navy chat rendered dim (#94a3b8 names,
   muted times, #64748b reply links — all below the owner's phone floor
   of #d8e0ee on navy, PROBLEMS-FOUND P6). Brightened here, phones only.
   This file loads LAST on room pages, so these rules win at equal
   specificity over layout-2026-10-24.css. Desktop untouched. */
@media (max-width: 768px) {
  .tac-root .chat-msg .who,
  .tac-root .chat-msg.pp-msg .who,
  .tac-root .pp-msg-name { color: #d8e0ee !important; }
  .tac-root .chat-msg .when { color: #d8e0ee !important; }
  .tac-root .chat-msg .tac-reply-btn { color: #d8e0ee !important; }
  .pp-chat .chat-form input[type="text"]::placeholder { color: #d8e0ee !important; }
}