/* H31 timeline art (2026-11-05). Scope: pages 122 and 2896 (manifest scope). Layers: line z0 < decor (art) z1 < cards z2.
   Art: pointer-events none, alt="" aria-hidden (markup). Sides mirror desktop H4 composition.
   Hiding rules overridden here: Bricks #mv-tl-decor _display:tablet_portrait=none (all art hidden <=991);
   Bricks mv-dec-0N px left/top (off-stage <=991); ics-timeline-grid.php .ics-tl-doodle display:none <=599.
   Tops = desktop Figma top px / 7440 (approximate, not browser-measured; see H31 report). */
@media (max-width:991px){
html body #mv-tl #mv-tl-decor{display:block!important;position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:1!important;pointer-events:none!important;overflow:visible!important}
html body #mv-tl #mv-tl-line-d,html body #mv-tl #mv-tl-line-m{z-index:0!important}
html body #mv-tl .ics-torn-card,html body #mv-tl [id^="mv-r"][id$="-col"]{position:relative!important;z-index:2!important}
html body #mv-tl #mv-tl-decor>*{display:block!important;position:absolute!important;visibility:visible!important;opacity:1!important;height:auto!important;max-width:none!important;max-height:none!important;pointer-events:none!important;margin:0!important}
html body #mv-tl #mv-dec-01,html body #mv-tl #mv-dec-02,html body #mv-tl #mv-dec-04,html body #mv-tl #mv-dec-05,html body #mv-tl #mv-dec-07,html body #mv-tl #mv-tl-decor>img.ics-tl-doodle{left:clamp(16px,2.5%,40px)!important;right:auto!important;width:13%!important}
html body #mv-tl #mv-dec-03,html body #mv-tl #mv-dec-06{left:auto!important;right:clamp(16px,2.5%,40px)!important;width:13%!important}
html body #mv-tl #mv-dec-02{width:15%!important}
html body #mv-tl #mv-dec-05{width:16%!important}
html body #mv-tl #mv-dec-01{top:43.4%!important}
html body #mv-tl #mv-dec-02{top:3.4%!important}
html body #mv-tl #mv-dec-03{top:15.8%!important}
html body #mv-tl #mv-dec-04{top:24.9%!important}
html body #mv-tl #mv-dec-05{top:65%!important}
html body #mv-tl #mv-dec-06{top:34.6%!important}
html body #mv-tl #mv-dec-07{top:81.2%!important}
}
@media (max-width:599px){
html body #mv-tl .ics-tl-doodle{display:block!important}
html body #mv-tl #mv-tl-decor>*{width:18%!important}
html body #mv-tl #mv-dec-02,html body #mv-tl #mv-dec-05{width:20%!important}
}

/* H49 badge fit-content (2026-11-05). Owner: year badges looked stretched to the thumb width on /lich-su-tien-trinh/ and /en/movement/. Live CSS measured compact in Chromium and WebKit at 390/834/1440 (badge = text + padding, left 26px at scale 1), so this is a guard: it pins hug-content and one-line text so no later rule can stretch the chip. Scoped to #mv-tl (pages 122, 2896); news, jobs, events and library badges keep ics-badge.css. display is not set on purpose: the .ics-tag:empty rule needs display none. */
html body #mv-tl .ics-torn-card:not(.ics-member) :is(.ics-tag, .ics-badge, .nw-chip, .ev-badge, .ev-chip, .dc-chip, .tm-role, .jb-tag, .ics-pl-chip):not(.ics-flip__nb *) {
  left: calc(var(--ics-badge-pad, 16px) + var(--ics-badge-inset, 10px)) !important;
  right: auto !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: calc((100% - 2 * var(--ics-badge-pad, 16px)) * var(--ics-badge-max-share, 70%)) !important;
  justify-self: start !important;
  align-self: flex-start !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* H123 C21 (2026-11-11, Figma 2133:3631 sticky + frame 2136:17992). (1) Background: design is a graph paper, 1px lines #D6D4CC every 63px (nodes 2136:18104.. stroke 0.84/0.83/0.80, spacing 63) on cream, no halftone: the global ics-bg-cream dots are replaced on #mv-tl only. (2) Desktop cards 752 wide (design Frame 2147237156 752x628, photo 752x480; live was 640x540); the photo keeps its 1.565 ratio. */
html body section#mv-tl.ics-bg-cream {
  background-color: var(--cream, #faf6ed) !important;
  background-image: linear-gradient(to right, #D6D4CC 1px, transparent 1px), linear-gradient(to bottom, #D6D4CC 1px, transparent 1px) !important;
  background-size: 63px 63px, 63px 63px !important;
  background-position: 0 0, 0 0 !important;
}
@media (min-width:992px) {
html body #mv-tl [id^="mv-r"][id$="-col"] { width:min(752px, 100%) !important; max-width:752px !important; }
}
/* H123 C21b: design line is black (stroke 0.0 on 2136:18126 siblings, Figma stroke dark), the grey track was almost invisible on the grid. Scroll-progress gradient line on top is unchanged. */
html body #mv-tl .ics-tl-line svg .ics-tl-track { stroke:#302f29 !important; stroke-width:2px !important; }