/*
 * Cruise Tools hurricane season tool page: only what the shared .ct-tool base (conditions-tool.css) does not hold.
 * Prism mock docs/design/conditions-tools/mock.html, round 2 (6ed53b0). Every selector is scoped .ct-tool.ct-tool so
 * theme rules never win and nothing here reaches another page. Every class is in the server-rendered HTML (JCH 7a).
 */
.ct-tool.ct-tool .ct-tool__bars--24 { grid-template-columns: repeat(24, 1fr); }
.ct-tool.ct-tool .ct-tool__bars--12 { grid-template-columns: repeat(12, 1fr); gap: 4px; }
.ct-tool.ct-tool .ct-tool__axis { grid-template-columns: repeat(12, 1fr); }
.ct-tool.ct-tool .ct-tool__axis--12 { gap: 4px; }
.ct-tool.ct-tool .ct-tool__key--hurricane { background: #2c4f6b; }
.ct-tool.ct-tool .ct-tool__key--storm { background: #c9d9e4; }
.ct-tool.ct-tool .ct-tool__key--sel { background: transparent; outline: 2px solid #8a4b00; }
.ct-tool.ct-tool .ct-tool__pick { align-items: flex-end; }
.ct-tool.ct-tool .ct-tool__show { font: inherit; font-size: 0.95em; font-weight: 700; min-height: 44px; padding: 6px 16px; border: 1px solid var(--ct-embed-accent, #2c4f6b); border-radius: 6px; background: var(--ct-embed-accent, #2c4f6b); color: #fff; cursor: pointer; }
.ct-tool.ct-tool .ct-tool__show:focus-visible { outline: 2px solid #8a4b00; outline-offset: 2px; }
.ct-tool.ct-tool .ct-tool__answer { margin: 0 0 4px; }
.ct-tool.ct-tool .ct-tool__table td a { color: var(--ct-embed-accent, #2c4f6b); }
/* Basin bars, round 2: named storms (light) with the hurricane share (dark) inside, "hurricanes / named storms". */
.ct-tool.ct-tool .ct-tool__hrow { grid-template-columns: 2.6em minmax(0, 1fr) 4.6em; }
.ct-tool.ct-tool .ct-tool__hrow em { font-style: normal; color: #5f6b6d; }
.ct-tool.ct-tool .ct-tool__hrow span { position: relative; min-width: 2px; background: #c9d9e4; }
.ct-tool.ct-tool .ct-tool__hrow i { position: absolute; inset: 0 auto 0 0; background: #2c4f6b; }
.ct-tool.ct-tool .ct-tool__hrow b { white-space: nowrap; }
.ct-tool.ct-tool .ct-tool__hrow small { font-weight: 400; color: #5f6b6d; font-size: 0.9em; }
/* The live storm box (mock v13): one card per storm, the saved NHC cone, its caption. */
.ct-tool.ct-tool .ct-tool__storm { display: grid; gap: 2px; padding-top: 8px; margin-top: 4px; border-top: 1px solid #ecd9c4; }
.ct-tool.ct-tool .ct-tool__cone { display: block; min-width: 0; }
.ct-tool.ct-tool .ct-tool__fig { margin: 6px 0 2px; }
.ct-tool.ct-tool .ct-tool__fig img { display: block; max-width: 100%; height: auto; border: 1px solid #c9d1d8; border-radius: 4px; }
.ct-tool.ct-tool .ct-tool__figcap { margin-top: 4px; font-size: 0.8em; color: #5f6b6d; }

/* 2.13.1: the live storm box's room (one storm's: head, a storm card, the as-of line) is reserved from the first paint, so drawing it moves nothing.
   While loading it shows its frame and one muted "Checking" line; hurricane-live.js replaces them. Measured on a phone (about 12.6em) and on a wide page (about 9.8em). */
.ct-tool.ct-tool #ct-hur-live { min-height: 12.6em; }

/* 2.13.1 (rc5): the skeleton that stands in for each active storm while the script loads (HurricaneLiveReserve): the card's own words in invisible ink
   on a light bar (so a phone wraps them as it will wrap the real card), the cone as an image box at its real ratio with the same box rules as the real
   image, the same grid. Held and loaded are the same height; the script replaces it. */
.ct-tool.ct-tool #ct-hur-live[data-live="loading"] { border-left-width: 4px; }  /* the loaded (active) frame has a 4px left border: the held frame has it too, so the cards are the same width and wrap the same */
.ct-tool.ct-tool .ct-live-ph { pointer-events: none; user-select: none; }
.ct-tool.ct-tool .ct-live-ph-t { color: transparent; background: #e4e9ee; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ct-tool.ct-tool .ct-live-ph .ct-tool__go { color: transparent; text-decoration: none; }
.ct-tool.ct-tool .ct-tool__fig .ct-live-ph-img { background: #eef2f5; border-color: #e1e7ec; }
@media (min-width: 560px) {
    .ct-tool.ct-tool #ct-hur-live { min-height: 9.8em; }
}