/* Typhoon Season by Destination (ROADMAP-Calcs-Travel.md TM84): the twelve month bars (HTML, not SVG: its text stays
   readable on a phone), the trip fields. Everything else is the core stylesheet. */
.ty-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 12px; }
.ty-two .chqt-field { min-width: 0; }
.ty-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 150px; margin: .8rem 0 .2rem; padding: 0 2px; }
.ty-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.ty-n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--chqt-ink, #1e1a1a); }
.ty-bar { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 2px; background: #7aa7d6; border-radius: 4px 4px 0 0; overflow: hidden; }
.ty-ty { display: block; width: 100%; background: #1d4f91; }
.ty-col.is-peak .ty-bar { background: #d79d32; }
.ty-col.is-peak .ty-ty { background: #8a5a0b; }
.ty-col.is-on .ty-m { font-weight: 800; text-decoration: underline; }
.ty-m { font-size: 12px; margin-top: 3px; color: var(--chqt-muted, #6b625b); }
.ty-key { margin: 0 0 .5rem; font-size: 14px; color: var(--chqt-muted, #6b625b); }
.ty-storms, .ty-calm { margin: .4rem 0; font-size: 15.5px; }
@media (max-width: 420px) { .ty-months { gap: 2px; } .ty-n { font-size: 11px; } .ty-m { font-size: 11px; } }