/*
 * Cruise Tools aurora tool page: Prism mock docs/design/conditions-tools/mock.html (v11, 68f97d1), on top of
 * conditions-tool.css. Facts (lines 134-142), the 12-month dark-hours chart colours, and the Live Aurora Maps (lines
 * 78-84): stacked at 375, side by side from 640px. No colour or size is set inline except each bar's height.
 */
.ct-tool.ct-tool .ct-tool__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 4px 0 0; }
.ct-tool.ct-tool .ct-tool__fact { background: #fff; border: 1px solid #dde2e6; border-radius: 6px; padding: 8px 10px; display: grid; gap: 0; }
.ct-tool.ct-tool .ct-tool__fact dt { font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5f6b6d; }
.ct-tool.ct-tool .ct-tool__fact dd { margin: 0; font-size: 1.15em; font-weight: 700; color: #1d1d1d; font-variant-numeric: tabular-nums; }
.ct-tool.ct-tool .ct-tool__fact--lead { grid-column: 1 / -1; border-color: #2c4f6b; border-left-width: 4px; }
.ct-tool.ct-tool .ct-tool__facts--aur { grid-template-columns: minmax(0, 1fr); }
.ct-tool.ct-tool .ct-tool__fact dd.ct-tool__n { font-size: 0.85em; font-weight: 400; color: #333; }
.ct-tool.ct-tool .ct-tool__clear { font-weight: 700; color: #1d1d1d; }
.ct-tool.ct-tool .ct-tool__fact dd small { font-size: 0.7em; font-weight: 400; color: #5f6b6d; }

/* dark hours by month: 12 bars, dark (3+ hours) vs short or none */
.ct-tool.ct-tool .ct-tool__bars--12, .ct-tool.ct-tool .ct-tool__axis--12 { grid-template-columns: repeat(12, 1fr); gap: 4px; }
.ct-tool.ct-tool .ct-tool__bar--dark { background: #2c4f6b; }
.ct-tool.ct-tool .ct-tool__legend .ct-tool__key--dark { background: #2c4f6b; }
.ct-tool.ct-tool .ct-tool__legend .ct-tool__key--lite { background: #c9d9e4; }

/* live: the maps, and the no-script GET form (as the wildlife page) */
.ct-tool.ct-tool .ct-tool__fig { margin: 6px 0 2px; }
.ct-tool.ct-tool .ct-tool__liveimg { display: block; 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; }
.ct-tool.ct-tool .ct-tool__now { display: grid; gap: 16px; }
.ct-tool.ct-tool .ct-tool__h3 { margin: 0 0 4px; font-size: 1em; line-height: 1.3; color: #1d1d1d; }
@media (min-width: 640px) {
  .ct-tool.ct-tool .ct-tool__now { grid-template-columns: 1fr 1fr; }
}
.ct-tool.ct-tool .ct-tool__field--go { flex: 0 0 auto; align-self: end; }
.ct-tool.ct-tool .ct-tool__btn { font: inherit; font-weight: 700; min-height: 44px; padding: 6px 16px; border: 0; border-radius: 6px; background: var(--ct-embed-accent, #2c4f6b); color: #fff; cursor: pointer; }
.ct-tool.ct-tool .ct-tool__idx { margin: 0 0 6px; }

/* 2.13.1: the live line's room is reserved from the first paint, so drawing it moves nothing. While loading it shows its frame and one muted "Checking" line; aurora-live.js replaces them.
   Measured on a phone (about 16em) and on a wide page (about 8.8em). */
.ct-tool.ct-tool--aurora [data-ct-aurora-live] { min-height: 16em; }
@media (min-width: 560px) {
    .ct-tool.ct-tool--aurora [data-ct-aurora-live] { min-height: 8.8em; }
}