/* sargassum-seaweed-forecast: this tool's own look, loaded only on its page (tools.css is shared and kept under 5 KB gz).
   NOAA's four colours (low blue, warning yellow, medium orange, high red); text beside them in darker shades for AA. */
.sg-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; background: #fff; border: 1px solid var(--chqt-line, #eadfca); border-radius: 10px; padding: 8px 6px 4px; }
.sg-col { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
.sg-bar { height: 96px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px; overflow: hidden; background: #f3eee4; }
.sg-bar span { display: block; width: 100%; }
.sg-none { color: #6b625b; text-align: center; font-size: 12px; margin: auto 0; }
.sg-m { font-size: 11.5px; text-align: center; color: #4a433d; }
.sg-col.is-on .sg-m { font-weight: 800; color: #1e1a1a; text-decoration: underline; }
.sg-col.is-on .sg-bar { outline: 2px solid #1e1a1a; outline-offset: 1px; }
.sg-l0 { background: #8ec9e8; }
.sg-l1 { background: #f2d024; }
.sg-l2 { background: #f28c1b; }
.sg-l3 { background: #c0392b; }
.sg-nd { background: #d9d4cc; }
.sg-nf { background: #fff; box-shadow: inset 0 0 0 1px #b8b0a4; }
.sg-recent { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
.sg-d { display: block; height: 18px; border-radius: 3px; }
.sg-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: #4a433d; }
.sg-key li::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--sg); }
.sg-h { margin: 0; font-size: 14px; font-weight: 700; color: var(--chqt-ink, #1e1a1a); }
.chqt-answer[data-sg-level="3"] { color: #a3261b; }
.chqt-answer[data-sg-level="2"] { color: #9a4a00; }
.chqt-answer[data-sg-level="1"] { color: #6b5500; }
.chqt-answer[data-sg-level="0"] { color: #1d5fa8; }
@media (max-width: 420px) { .sg-bar { height: 80px; } .sg-m { font-size: 10px; } }
.sg-key li:last-child::before { box-shadow: inset 0 0 0 1px #b8b0a4; }