/* calm-site.css — xpresso.news FULL SITE skin over collective.html, candidate "calm" (10/17).
   CSS only: Gen-1 eXpressO palette (mocha page, paper masthead, cream Playfair section names, gold active tab),
   lighter hairlines, calmer chips. Every feature stays. Perspective blue/red and the green LIVE stay (David's laws). */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,800&display=swap');
body { background: #c9a67a !important; color: #1a1a1a; }

/* ---- masthead: Gen-1 header, the latte-cup logo, legend on the logo line ---- */
header { background: #f7f2ea !important; color: #1c1410 !important; border-bottom: 3px solid #d4b896 !important; }
header .logo { display: block !important; font-family: "Playfair Display", Georgia, serif !important; font-size: 1.9rem; font-weight: 800; font-style: italic !important; letter-spacing: -0.7px; color: #1c1410 !important; white-space: nowrap; }
header .brand-tag { font-size: 0.5em; font-style: italic; font-weight: 400; color: #7a6e60; letter-spacing: 0.2px; margin-left: 14px; vertical-align: middle; }
.logo-line { align-items: center; gap: 18px; margin-bottom: 2px; }
.logo-line .persp-legend { margin: 0; }
.persp-legend-lbl { color: #8a7e72; }
.tagline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: #8a7e72 !important; margin: 1px 0 7px; white-space: nowrap; overflow: hidden; }
.xp-date { font-size: 0.78rem; color: #6b5d4f; font-weight: 500; letter-spacing: 0; text-transform: none; }
.tagline .short { display: none; }
.chip-strip { border-top-color: #e5dcc8 !important; }
.upd-chip { color: #8a7e72; }
.nav-more { background: linear-gradient(90deg, rgba(247,242,234,0) 0%, #f7f2ea 70%) !important; color: #8a7e72 !important; }
nav a { color: #8a7e72 !important; }
nav a .tab-label { padding: 4px 10px 5px; }
nav a:hover .tab-label { background: #ede4cf !important; color: #3a2a18; }
nav a.active .tab-label { background: #b8860b !important; color: #fff8ee !important; }
nav a#tab-home .tab-label { color: #b8860b; font-weight: 700; }
nav a#tab-home:hover .tab-label { background: #ede4cf !important; }
.tab-time { color: #a89c8c; }

/* ---- section heads: Gen-1 column titles (cream Playfair on the mocha, gold dot), no dark bar ---- */
.sec-head { background: transparent !important; border-bottom: 1px solid rgba(247,242,234,.45) !important; padding: 12px 28px 8px; margin-bottom: 14px; }
.sec-name { font-family: "Playfair Display", Georgia, serif !important; font-weight: 800 !important; color: #fff8ee !important; text-shadow: 0 1px 3px rgba(80,40,0,.3); }
.sec-cap, .sec-head .sec-cap, #pane-earlier .sec-head-plain .sec-cap { color: #f0e6d6 !important; }
#pane-earlier .sec-hero-row { border-bottom: 1px solid rgba(247,242,234,.45); }

/* ---- cards: light paper, brown hairlines, soft shadow ---- */
.main-story-block { background: #faf6f0 !important; border: 1px solid rgba(212,184,150,.6) !important; border-radius: 10px; box-shadow: 0 2px 8px rgba(80,50,20,.10) !important; }
.headline-bar { background: #fffdf7 !important; }
.headline-bar h3 { color: #1c1410 !important; }
.eyebrow { color: #b8860b !important; }
.story-meta { color: #6b5d4f; }
.story-meta .dot { color: #c5b59d; }
.bet-footer { border-top: 1px solid #e5dcc8 !important; }
.bet-foot-q { color: #4a3b2a; }
/* X reaction ribbons: brown steps instead of gray */
.main-story-block .xr-ribbon .s0, .ar-card .xr-ribbon .s0, .main-story-block .xr-ribbon .lean-r, .main-story-block .xr-ribbon .lean-l, .main-story-block .xr-ribbon .lean-m { background: #6b5240 !important; }
.main-story-block .xr-ribbon .s1, .ar-card .xr-ribbon .s1, .main-story-block .xr-ribbon .lean-r2, .main-story-block .xr-ribbon .lean-l2 { background: #a08a6e !important; }
.main-story-block .xr-ribbon .s2, .ar-card .xr-ribbon .s2 { background: #e3d5bd !important; color: #3a2e1e !important; }
.main-story-block .xr-take { border-color: #e5dcc8 !important; background: #fffdf7 !important; }
.main-story-block .xr-pct { background: #6b5240; }
.voice { border-color: #e5dcc8 !important; }
.gx-menu { border-color: #d4b896; }
.gx-opt:hover { background: #f4ede0; }
.piggy { border-color: #d4b896; }
.freshness-badge, .lang-chip { background: #ede8e0; color: #6b5d4f; border-color: #d4b896; }
.ubet-tally { border-top-color: #e5dcc8; }
.top10 li { border-bottom-color: #e5dcc8; }

/* ---- footer (Gen-1) ---- */
footer { background: #1c1410 !important; color: #d4b896 !important; }
footer a { color: #e8d7b8 !important; }

/* 10/21 David: the first-visit overlay is back ON for xpresso.news ("Why Xpresso news?" — build.py rewrites its words) */

@media (max-width: 760px) {
  header { padding: 8px 12px 0; }
  header .logo { font-size: 1.45rem; }
  header .brand-tag { display: block; margin: 2px 0 0 1px; font-size: .66rem; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tagline .long { display: none; } .tagline .short { display: inline; }
  .tagline { letter-spacing: 1.4px; }
  .xp-date { display: none; }
  .sec-head { padding: 10px 14px 6px; }
  footer .long { display: none; }
  footer a { white-space: nowrap; }
}

/* 10/17 David: the Ubet rules line was "too small to line a font" */
.us-note { font-size: .86rem !important; line-height: 1.55 !important; color: #5e574a !important; }

/* 10/21 David ("instead of side by side, poster below white overlay so they can be bigger, more readable text without zooming"):
   the Why box ON TOP, the poster BELOW it, both full width of the overlay; the overlay scrolls */
#whyOv { align-items: flex-start !important; overflow-y: auto !important; }
#whyWrap { flex-direction: column !important; align-items: center !important; max-height: none !important; max-width: min(1040px, 96vw) !important; padding: 10px 0 28px; }
#whyWrap #whyBox { order: 0; flex: none !important; width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; }
#whyPoster { order: 1; flex: none !important; width: 100% !important; }
#whyPoster img { width: 100% !important; max-width: 100% !important; max-height: none !important; }
@media (min-width: 761px) { #whyBox { font-size: 1.22rem; padding: 26px 32px 22px !important; } #whyBox h2 { font-size: 2rem; } }
@media (min-width: 761px) { #whyBox li { font-size: 1.28rem !important; line-height: 1.5 !important; } #whyBox h2 { font-size: 2.2rem !important; } }
/* 10/21 David: three panels in the Why overlay — the box, the poster, then the P.S. */
#whyPS { order: 2; width: 100%; background: #fffdf7; color: #1b1a17; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.45);
         padding: 20px 28px 16px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; box-sizing: border-box; }
#whyPS p { font-weight: 800; font-size: 1.5rem; margin: 0 0 8px; }
#whyPS ol { margin: 0; padding-left: 1.4em; font-size: 1.2rem; line-height: 1.55; }
@media (max-width: 760px) { #whyPS { padding: 16px 16px 12px; } #whyPS p { font-size: 1.2rem; } #whyPS ol { font-size: 1rem; } }
/* 10/21 David: first visit = box + poster; "Why?" in the footer = box + poster + P.S. */
#whyPS { display: none; }
#whyOv.all #whyPS { display: block; }

/* 10/26 14:4x PT David ("Move W closer to the H. Don't use such bold font. Use abbreviations and the bet should fit.
   There shouldn't be any ... on any bet" + "larger font, make it readable"): every bet now has a short label (tab_bets q),
   so the line fits at a bigger, lighter size; the H/K/P letter sits right next to the words; no "..." ever. */
.bet-footer, .bet-footer.house { gap: 4px !important; }
.bet-footer .bet-venue, .ar-bet .bet-venue { margin-right: 0 !important; transform: none !important; }
.bet-footer .bet-foot-q, .bet-footer.house .bet-foot-q i, .ar-bet-q, .ar-bet-q i {
   font-weight: 500 !important; font-size: .86rem !important; text-overflow: clip !important; letter-spacing: 0 !important; }
.bet-footer .bet-row, .ar-bet .ar-pills { margin-left: auto !important; }
@media (max-width: 760px) {
  .bet-footer.house i, .bet-footer .bet-foot-q i, .ar-bet-q i { white-space: normal !important; }
  .bet-footer .bet-foot-q, .ar-bet-q { font-size: .8rem !important; white-space: normal !important;
     display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; }
}