/* A0019656 — Blog UI/UX safety layer
   Purpose: contrast, containment, responsive layout and interaction hardening for all public blog pages.
   This file must load after the canonical yitm.css bundle. */

:root{--yitm-blog-ink:#10233f;--yitm-blog-muted:#536475;--yitm-blog-green:#064e35;--yitm-blog-line:rgba(16,35,63,.12);--yitm-blog-page:#f7f4ee;--yitm-blog-card:#fff}
html:has(meta.yb56.yb56) body{overflow-x:hidden}
html:has(meta.yb56.yb56) body main{min-width:0}
html:has(meta.yb56.yb56) body :is(img,svg,video,iframe){max-width:100%;height:auto}
html:has(meta.yb56.yb56) body :is(h1,h2,h3,h4,p,li,a,strong){overflow-wrap:break-word}

/* Content containment: never allow a post layout to bleed to viewport edges. */
html:has(meta.yb56.yb56) body .yitm-triage-post{width:min(1180px,calc(100% - 28px));margin-inline:auto;padding-inline:0}
html:has(meta.yb56.yb56) body .yitm-content{min-width:0}
html:has(meta.yb56.yb56) body .yitm-article{min-width:0}

/* Light article cards: protect against global white-text rules leaking into white surfaces. */
html:has(meta.yb56.yb56) body .yitm-article .yitm-card:not(.yitm-answer){background:#fff!important;color:var(--yitm-blog-ink)!important;-webkit-text-fill-color:initial!important}
html:has(meta.yb56.yb56) body .yitm-article .yitm-card:not(.yitm-answer) :is(h2,h3,h4,p,li,strong){color:var(--yitm-blog-ink)!important;-webkit-text-fill-color:currentColor!important;opacity:1!important}
html:has(meta.yb56.yb56) body .yitm-article .yitm-card:not(.yitm-answer) a:not(.yitm-btn){color:var(--yitm-blog-green)!important;-webkit-text-fill-color:currentColor!important;text-decoration-thickness:.08em;text-underline-offset:.15em}

/* Answer cards are intentionally dark. Background and foreground are bound together to prevent white-on-white regressions. */
html:has(meta.yb56.yb56) body .yitm-article .yitm-card.yitm-answer{background:linear-gradient(135deg,#064e35 0%,#0a6245 100%)!important;color:#fff!important;border-color:#064e35!important;-webkit-text-fill-color:initial!important}
html:has(meta.yb56.yb56) body .yitm-article .yitm-card.yitm-answer :is(h2,h3,h4,p,li,strong,a){color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;text-shadow:none!important}
html:has(meta.yb56.yb56) body .yitm-article .yitm-card.yitm-answer a:not(.yitm-btn){text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.16em}
html:has(meta.yb56.yb56) body .yitm-article .yitm-card.yitm-answer .yitm-btn{background:#fff!important;color:#064e35!important;-webkit-text-fill-color:#064e35!important}

/* Shared article components that commonly sit on light surfaces. */
html:has(meta.yb56.yb56) body :is(.yitm-callout,.yitm-guide-card,.yitm-related-card,.yitm-side-card){color:var(--yitm-blog-ink)}
html:has(meta.yb56.yb56) body :is(.yitm-callout,.yitm-guide-card,.yitm-related-card,.yitm-side-card) :is(h2,h3,h4,p,li,strong){-webkit-text-fill-color:currentColor}

/* Readability and tap targets. */
html:has(meta.yb56.yb56) body .yitm-article :is(p,li){line-height:1.68}
html:has(meta.yb56.yb56) body :is(.yitm-btn,button,summary){min-height:44px}
html:has(meta.yb56.yb56) body :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid #1f7ae0!important;outline-offset:3px!important}
html:has(meta.yb56.yb56) body table{max-width:100%}

@media(max-width:900px){
 html:has(meta.yb56.yb56) body .yitm-content{grid-template-columns:minmax(0,1fr)!important}
 html:has(meta.yb56.yb56) body .yitm-side{position:static!important}
 html:has(meta.yb56.yb56) body .yitm-triage-bar{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
}
@media(max-width:640px){
 html:has(meta.yb56.yb56) body .yitm-triage-post{width:min(100% - 20px,1180px)}
 html:has(meta.yb56.yb56) body .yitm-card{border-radius:20px!important;padding:18px!important}
 html:has(meta.yb56.yb56) body .yitm-triage-hero{padding:20px!important;border-radius:24px!important}
}
@media(prefers-reduced-motion:reduce){html:has(meta.yb56.yb56) body *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
