/* QilyLean Daily Brief Layout Guard V1｜2026-09-02
 * Scope: all dated Selected Brief pages and dense engineering visuals.
 * Goals: remove stretched empty visual slabs, preserve readable dense tables,
 * reduce large dark reading surfaces, and guarantee text/tag contrast.
 */

/* 1｜Selected Brief two-column cards must size each column by its own content.
 * The old grid stretched the left visual to the height of the much longer right article,
 * creating the large deep-teal empty slab seen in production.
 */
html body main .daily-single-section .post{
  align-items:start!important;
}
html body main .daily-single-section .visual{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  background:transparent!important;
}
html body main .daily-single-section .visual :is(img,svg,picture,figure){
  max-width:100%!important;
}
html body main .daily-single-section .visual :is(img,svg){
  display:block!important;
  width:100%!important;
  height:auto!important;
}

/* 2｜Dense engineering tables: keep column headers intact and let descriptive cells wrap naturally.
 * Horizontal scrolling is preferable to crushing engineering labels into unreadable fragments.
 */
html body main .npi-gantt{
  max-width:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
}
html body main .npi-gantt-table{
  grid-template-columns:minmax(230px,230px) repeat(20,minmax(46px,46px))!important;
  width:max-content!important;
  min-width:1150px!important;
}
html body main .npi-gantt-table>*{
  min-width:0!important;
  box-sizing:border-box!important;
}
html body main .npi-gantt-label{
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  hyphens:auto;
}
html body main .npi-gantt-week{
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}

/* 3｜Light Selected Brief tag/pill surfaces always use dark readable copy.
 * This intentionally overrides older broad "all .tag are white" closure rules.
 */
html body main .daily-single-section article.post .tags>.tag,
html body main article.post .tags>.tag{
  color:#0f4b5a!important;
  -webkit-text-fill-color:#0f4b5a!important;
  background:#eef7f5!important;
  border:1px solid #b9d5d1!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  text-shadow:none!important;
  font-weight:900!important;
}
html body main article.post .tags>.tag *{
  color:#0f4b5a!important;
  -webkit-text-fill-color:#0f4b5a!important;
}

/* 4｜Common horizontally dense assets: do not let compact headings split character-by-character. */
html body main .daily-single-section :is(.table-scroll,.matrix-scroll,.data-table-scroll,.timeline-scroll){
  max-width:100%!important;
  overflow-x:auto!important;
}
html body main .daily-single-section :is(.table-scroll,.matrix-scroll,.data-table-scroll,.timeline-scroll) :is(th,[role="columnheader"]){
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
html body main .daily-single-section :is(.table-scroll,.matrix-scroll,.data-table-scroll,.timeline-scroll) :is(td,[role="cell"]){
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* 5｜Rich Selected Brief reading surfaces: keep brand depth in the page header,
 * but remove large dark slabs from the article body. This reduces visual fatigue and
 * also removes expensive shadows/radial/backdrop effects from large scrolling areas.
 * Small deep badges and number markers remain as VI accents.
 */
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post>.visual{
  padding:clamp(10px,1.2vw,16px)!important;
  border:1px solid #d5e4e3!important;
  border-radius:22px!important;
  background:#f8fbfa!important;
  box-shadow:none!important;
  filter:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post>.visual>svg{
  border-radius:16px!important;
  background:#f8fbfa!important;
  box-shadow:none!important;
  filter:none!important;
}
/* 2026-07-29 and any future rich brief that uses a full-canvas inline SVG.
 * Only the SVG canvas and direct-on-canvas copy are light-themed; inner process cards
 * keep their own fills so engineering hierarchy remains obvious.
 */
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post>.visual>svg>rect:first-child{
  fill:#f8fbfa!important;
  stroke:#d5e4e3!important;
  stroke-width:2!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post>.visual>svg>text{
  fill:#0f4b5a!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post>.visual>svg>text[fill="#ffe3a0"],
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post>.visual>svg>text[fill="#ffe2a2"],
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post>.visual>svg>text[fill="#ffe39b"]{
  fill:#8b6830!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post>.visual>svg>g[fill="#d8efeb"]{
  fill:#177f87!important;
}

/* Large HTML article heroes / conclusions use a paper surface, not a dark billboard. */
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post :is(.visual-hero,.hero,.closing,.closing-view){
  border:1px solid #cfe0dd!important;
  background:#fff!important;
  background-image:none!important;
  color:#274744!important;
  -webkit-text-fill-color:#274744!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post :is(.visual-hero,.hero,.closing,.closing-view)::before,
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post :is(.visual-hero,.hero,.closing,.closing-view)::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post :is(.visual-hero,.hero,.closing,.closing-view) :is(h2,h3,h4,strong){
  color:#0f4b5a!important;
  -webkit-text-fill-color:#0f4b5a!important;
  text-shadow:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post :is(.visual-hero,.hero,.closing,.closing-view) :is(p,span,small){
  color:#3a5756!important;
  -webkit-text-fill-color:#3a5756!important;
  opacity:1!important;
  text-shadow:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .hero .kicker,
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .visual-hero .visual-kicker{
  color:#8b6830!important;
  -webkit-text-fill-color:#8b6830!important;
  background:#fff8e8!important;
  border-color:#dfc98f!important;
  box-shadow:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .hero>p,
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .visual-hero>p{
  color:#3a5756!important;
  -webkit-text-fill-color:#3a5756!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .hero .hero-rule>div,
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .visual-hero .formula{
  border-color:#d5e4e3!important;
  background:#f3f8f7!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .hero .hero-rule :is(b,strong),
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .visual-hero .formula :is(b,strong){
  color:#0f4b5a!important;
  -webkit-text-fill-color:#0f4b5a!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .visual-hero .formula strong{
  background:#fff!important;
  border:1px solid #d7e6e2!important;
  box-shadow:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .visual-hero .formula b{
  color:#a76c1f!important;
  -webkit-text-fill-color:#a76c1f!important;
}

/* 6｜Selected Brief section-heading VI contract.
 * Structural .section-title wrappers are layout containers, not typographic headings.
 * Retire detached numeric badges and render the sequence directly in the title as
 * 一、二、三… so desktop/tablet/mobile keep one stable visual axis.
 */
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief{
  counter-reset:qily-brief-section;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title{
  counter-increment:qily-brief-section;
  display:block!important;
  min-width:0!important;
  margin:clamp(30px,3vw,40px) 0 16px!important;
  font-size:initial!important;
  line-height:normal!important;
  font-weight:inherit!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title>.no{
  display:none!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title>div{
  min-width:0!important;
  width:100%!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title h3{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#0f4b5a!important;
  -webkit-text-fill-color:#0f4b5a!important;
  font-size:clamp(25px,2.35vw,36px)!important;
  line-height:1.28!important;
  font-weight:950!important;
  letter-spacing:-.015em!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  text-wrap:balance;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title h3::before{
  content:counter(qily-brief-section,cjk-ideographic) "、";
  color:#0f4b5a!important;
  -webkit-text-fill-color:#0f4b5a!important;
  font:inherit!important;
}
html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title p{
  width:100%!important;
  max-width:none!important;
  margin:6px 0 0!important;
  color:#5f7474!important;
  -webkit-text-fill-color:#5f7474!important;
  font-size:clamp(17px,1.3vw,20px)!important;
  line-height:1.65!important;
  font-weight:750!important;
}

@media(max-width:900px){
  html body main .npi-gantt-table{
    grid-template-columns:minmax(210px,210px) repeat(20,minmax(44px,44px))!important;
    min-width:1090px!important;
  }
  html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title{
    margin-top:28px!important;
  }
  html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title h3{
    font-size:clamp(24px,5.6vw,31px)!important;
    line-height:1.3!important;
  }
}

@media(max-width:620px){
  html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title{
    margin-top:25px!important;
    margin-bottom:13px!important;
  }
  html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title h3{
    font-size:clamp(23px,7vw,29px)!important;
    text-wrap:pretty;
  }
  html body.daily-single-page[data-qily-daily-layout="rich"] main article.post .lean-delivery-brief .section-title p{
    margin-top:5px!important;
    font-size:17px!important;
    line-height:1.6!important;
  }
}