/*
 * Cruise Tools conditions tools (hurricane, wildlife, aurora, sea): the shared tool page base. Prism mock
 * docs/design/conditions-tools/mock.html (c798d53), lines 58-100. Each tool adds only its own rules in its own file
 * (hurricane.css, wildlife.css, ...). Registered by each tool view as the style com_cruisetools.conditions-tool,
 * depending on com_cruisetools.core, so a page loads it once. Doubled class selectors win over theme rules (2.3.x).
 */

/* ===================== TOOL PAGES (.ct-tool) ===================== */
.ct-tool.ct-tool [hidden] { display: none !important; }
.ct-tool.ct-tool { color: #333; }
.ct-tool.ct-tool .ct-tool__crumb { margin: 0 0 4px; font-size: 0.8em; color: #5f6b6d; }
.ct-tool.ct-tool .ct-tool__h1 { margin: 0 0 6px; font-size: 1.55em; line-height: 1.2; color: #1d1d1d; text-wrap: balance; }
.ct-tool.ct-tool .ct-tool__lede { margin: 0 0 14px; color: #5f6b6d; }
.ct-tool.ct-tool .ct-tool__h2 { margin: 26px 0 8px; font-size: 1.15em; line-height: 1.3; color: #1d1d1d; }
.ct-tool.ct-tool .ct-tool__pick { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; }
.ct-tool.ct-tool .ct-tool__field { display: grid; gap: 2px; flex: 1 1 150px; min-width: 0; }
.ct-tool.ct-tool .ct-tool__field label { font-size: 0.8em; font-weight: 700; color: #1d1d1d; }
.ct-tool.ct-tool .ct-tool__field select { font: inherit; font-size: 0.95em; min-height: 44px; padding: 6px 8px; border: 1px solid #c9d1d8; border-radius: 6px; background: #fff; color: inherit; width: 100%; }
.ct-tool.ct-tool .ct-tool__answer { background: var(--ct-embed-tint, #f6f7f8); border-left: 4px solid var(--ct-embed-accent, #2c4f6b); border-radius: 0 6px 6px 0; padding: 12px 14px; display: grid; gap: 6px; }
.ct-tool.ct-tool .ct-tool__big { margin: 0; font-size: 1.12em; line-height: 1.4; color: #1d1d1d; }
.ct-tool.ct-tool .ct-tool__big b { color: var(--ct-embed-accent, #2c4f6b); }
.ct-tool.ct-tool .ct-tool__sub { margin: 0; font-size: 0.95em; }
.ct-tool.ct-tool .ct-tool__nhc { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin: 0 0 12px; padding: 8px 12px; border: 1px solid #dde2e6; border-radius: 6px; font-size: 0.92em; }
.ct-tool.ct-tool .ct-tool__go { color: var(--ct-embed-accent, #2c4f6b); font-weight: 700; text-underline-offset: 3px; }
.ct-tool.ct-tool .ct-tool__arrow { display: inline; text-decoration: none; }
.ct-tool.ct-tool .ct-tool__live { margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; font-size: 0.92em; background: #fff; border: 1px dashed #9fb3c4; display: grid; gap: 2px; }
.ct-tool.ct-tool .ct-tool__live[data-live="active"] { border: 1px solid #8a4b00; border-left-width: 4px; background: #fdf6ee; }
.ct-tool.ct-tool .ct-tool__asof { font-size: 0.8em; color: #5f6b6d; }
.ct-tool.ct-tool .ct-tool__src { margin: 18px 0 0; font-size: 0.8em; color: #5f6b6d; display: grid; gap: 4px; }
.ct-tool.ct-tool .ct-tool__src p { margin: 0; }
.ct-tool.ct-tool .ct-tool__muted { color: #5f6b6d; }
/* vertical bar chart (24 half-months or 12 months) */
.ct-tool.ct-tool .ct-tool__chart { margin: 0; }
.ct-tool.ct-tool .ct-tool__bars { display: grid; align-items: end; gap: 2px; height: 120px; border-bottom: 1px solid #9aa5ad; }
.ct-tool.ct-tool .ct-tool__bar { position: relative; background: #c9d9e4; border-radius: 2px 2px 0 0; min-height: 1px; }
.ct-tool.ct-tool .ct-tool__bar i { position: absolute; inset: auto 0 0; background: #2c4f6b; border-radius: 2px 2px 0 0; }
.ct-tool.ct-tool .ct-tool__bar.sel { outline: 2px solid #8a4b00; outline-offset: 1px; }
.ct-tool.ct-tool .ct-tool__bar.zero { background: transparent; }
.ct-tool.ct-tool .ct-tool__axis { display: grid; gap: 2px; font-size: 0.68em; color: #5f6b6d; text-align: center; margin-top: 3px; }
.ct-tool.ct-tool .ct-tool__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8em; color: #5f6b6d; margin: 6px 0 0; }
.ct-tool.ct-tool .ct-tool__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ct-tool.ct-tool .ct-tool__table { margin-top: 8px; font-size: 0.88em; }
.ct-tool.ct-tool .ct-tool__table summary { cursor: pointer; color: var(--ct-embed-accent, #2c4f6b); font-weight: 700; padding: 8px 0; }
.ct-tool.ct-tool .ct-tool__table table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.ct-tool.ct-tool .ct-tool__table td { padding: 4px 6px; border-top: 1px solid #e6eaee; }
.ct-tool.ct-tool .ct-tool__table th { padding: 4px 6px; font-size: 0.85em; color: #5f6b6d; text-align: left; }
/* horizontal bars (basin counts) */
.ct-tool.ct-tool .ct-tool__hbars { display: grid; gap: 4px; font-size: 0.88em; }
.ct-tool.ct-tool .ct-tool__hrow { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 2.2em; gap: 8px; align-items: center; }
.ct-tool.ct-tool .ct-tool__hrow span { height: 14px; background: #2c4f6b; border-radius: 0 2px 2px 0; display: block; }
.ct-tool.ct-tool .ct-tool__hrow b { text-align: right; font-variant-numeric: tabular-nums; color: #1d1d1d; font-weight: 600; }