/* /turbulence/ (turbulence/default.aspx): turbulence forecast for a route. Bump ?v= in the page when this file changes.
   The badge colours come from js/turb.js (Turb.addStyle). */
.tb-page { max-width: 820px; margin: 0 auto; padding: 15px 0; }
.tb-page h1 { color: var(--blue-text,#1078b3); margin: 2px 0 6px; font-size: 24px; line-height: 1.25; }
.tb-crumb { font-size: 13px; margin: 0 0 6px; }
.tb-intro { font-size: 15px; line-height: 1.6; color: #333; margin: 8px 0 14px; }

/* The search: From, To, When, button. */
.tb-search { display: grid; grid-template-columns: 1fr 1fr 150px auto; gap: 10px; align-items: end; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 15px; margin: 0 0 12px; }
.tb-field { position: relative; min-width: 0; }
.tb-field label { display: block; font-size: 11px; font-weight: bold; color: #666; margin-bottom: 2px; text-transform: uppercase; }
.tb-field input, .tb-field select { display: block; width: 100%; box-sizing: border-box; height: 38px; padding: 7px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; background: #fff; color: #333; -webkit-text-fill-color: #333; margin: 0; }
.tb-field input:focus, .tb-field select:focus { border-color: #169fe6; outline: none; box-shadow: 0 0 0 2px rgba(22,159,230,0.25); }
.tb-btn { background: #1078b3; color: #fff; border: none; height: 38px; padding: 0 18px; border-radius: 5px; font-size: 14px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.tb-btn:hover { background: #0d5f8f; }
.tb-btn:focus-visible { outline: 3px solid #169fe6; outline-offset: 2px; }
.tb-btn[disabled] { opacity: 0.7; cursor: progress; }
/* The list's look (option C, light and dark) is css/suggest.css (.cw-sg, in site.css); only its place here. */
.ap-suggest { position: absolute; left: 0; top: 100%; min-width: 100%; width: 340px; max-width: calc(100vw - 40px); z-index: 50; }
.ap-suggest[hidden] { display: none; }
.tb-error { background: #ffebee; border: 1px solid #ef5350; border-radius: 6px; padding: 10px 12px; color: #b71c1c; margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.tb-error[hidden], .tb-results[hidden], .tb-mapbox[hidden] { display: none; }
.tb-status { font-size: 14px; color: #555; margin: 0 0 10px; min-height: 1px; }

/* The answer. */
.tb-results.tb-reserve { min-height: 520px; }
.tb-card { border: 1px solid #e0e4e8; border-left: 6px solid #9e9e9e; border-radius: 8px; background: #fff; padding: 14px 16px; margin: 0 0 14px; }
.tb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.tb-top .turb-badge { font-size: 14px; padding: 3px 12px; }
.tb-share { background: #fff; color: #1078b3; border: 1px solid #b3d9f2; border-radius: 5px; padding: 4px 12px; font-size: 13px; font-weight: bold; cursor: pointer; min-height: 32px; white-space: nowrap; }
.tb-share:hover { border-color: #169fe6; }
.tb-share[hidden] { display: none; }
#main .tb-card h2.tb-headline { font-size: 21px; line-height: 1.3; color: #003a70; margin: 4px 0 6px; }
.tb-route { font-size: 14px; color: #555; line-height: 1.5; margin: 0 0 10px; }
.tb-reasons { margin: 0 0 6px 20px; padding: 0; }
.tb-reasons li { list-style: disc outside; display: list-item; font-size: 15px; line-height: 1.55; color: #222; margin: 0 0 5px; }
.tb-asof { font-size: 12px; color: #6b6b6b; margin: 8px 0 0; }

/* The map: z-index 0 keeps Leaflet's panes under the site menu. */
.tb-mapbox { margin: 0 0 14px; }
.tb-map { position: relative; z-index: 0; height: 400px; border: 1px solid #ddd; border-radius: 8px; background: #e8ebee; }
#main .tb-map .leaflet-bar a { color: #000; text-decoration: none; }
.tb-map .leaflet-popup-content { font-size: 13px; line-height: 1.45; margin: 10px 12px; }
.tb-pop-sub { color: #666; font-size: 12px; }
.tb-map .leaflet-tooltip.tb-ap { font-weight: bold; font-size: 12px; padding: 1px 5px; }
.tb-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; font-size: 12px; color: #555; }
.tb-legend li { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 5px; }
.tb-key { display: inline-block; width: 18px; height: 5px; border-radius: 3px; }
.tb-key.tb-area { height: 11px; width: 14px; border-radius: 2px; border: 2px solid; box-sizing: border-box; }
.tb-key.tb-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px #888; }
.tb-mapnote { font-size: 12px; color: #6b6b6b; margin: 4px 0 0; line-height: 1.45; }

/* Pilot reports. */
.tb-reps { border: 1px solid #e0e4e8; border-radius: 8px; background: #fafbfc; padding: 12px 16px; margin: 0 0 14px; }
#main .tb-reps h3 { font-size: 16px; color: #003a70; margin: 0 0 4px; }
.tb-reps-note { font-size: 13px; color: #666; margin: 0 0 8px; line-height: 1.5; }
.tb-replist { margin: 0; padding: 0; }
.tb-replist li { list-style: none; margin: 0 0 5px; padding: 0 0 0 18px; position: relative; font-size: 14px; line-height: 1.5; color: #222; }
.tb-replist li .tb-key.tb-dot { position: absolute; left: 0; top: 5px; }
.tb-repnm { color: #666; }
.tb-more { font-size: 14px; line-height: 1.6; color: #333; margin: 0 0 6px; }

/* The guide below the tool. */
.tb-explain { margin-top: 26px; border-top: 1px solid #e3e7eb; padding-top: 2px; }
#main .tb-h { font-size: 19px; color: #003a70; margin: 22px 0 8px; }
#main .tb-explain h3 { font-size: 16px; color: #003a70; margin: 16px 0 4px; }
.tb-explain p, .tb-list li { font-size: 15px; line-height: 1.6; color: #333; }
.tb-explain p { margin: 0 0 8px; }
.tb-list { margin: 0 0 8px 20px; padding: 0; }
.tb-list li { list-style: disc outside; display: list-item; margin: 0 0 6px; }
.tb-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 10px; }
.tb-level { border: 1px solid #e0e4e8; border-radius: 8px; padding: 10px 12px; background: #fff; }
.tb-level p { font-size: 14px; margin: 6px 0 0; line-height: 1.5; }
.tb-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; padding: 0; font-size: 14px; font-weight: bold; }
.tb-links li { list-style: none; margin: 0; padding: 0; }
.tb-src { font-size: 13px; color: #666; line-height: 1.5; margin: 10px 0 0; }

/* Dark mode (css/dark-mode.css forces headings with !important and colours spans, divs and list items). */
body.dark-mode .tb-intro, body.dark-mode .tb-explain p, body.dark-mode .tb-list li, body.dark-mode .tb-reasons li, body.dark-mode .tb-replist li, body.dark-mode .tb-more { color: #e0e0e0; }
body.dark-mode .tb-status, body.dark-mode .tb-route, body.dark-mode .tb-asof, body.dark-mode .tb-src, body.dark-mode .tb-reps-note,
body.dark-mode span.tb-repnm, body.dark-mode .tb-mapnote, body.dark-mode .tb-legend li, body.dark-mode .tb-field label { color: #aaa; }
body.dark-mode #main .tb-h, body.dark-mode #main .tb-explain h3, body.dark-mode #main .tb-card h2.tb-headline, body.dark-mode #main .tb-reps h3 { color: #4da6ff !important; }
body.dark-mode .tb-search { background: #222; border-color: #444; }
body.dark-mode .tb-field input, body.dark-mode .tb-field select { background: #2a2a2a; color: #e0e0e0; -webkit-text-fill-color: #e0e0e0; border-color: #555; }
body.dark-mode .tb-error { background: #3b1d1d; border-color: #7a3030; color: #ffcdd2; }
body.dark-mode .tb-card, body.dark-mode .tb-level { background: #242424; border-color: #3a3a3a; }
body.dark-mode .tb-reps { background: #242424; border-color: #3a3a3a; }
body.dark-mode .tb-share { background: transparent; color: #4da6ff; border-color: #555; }
body.dark-mode .tb-map { border-color: #444; }
body.dark-mode .tb-map .leaflet-tile-pane { filter: brightness(0.85); }
body.dark-mode .tb-map .leaflet-control-attribution { background: rgba(30,30,30,0.8); }
body.dark-mode .tb-map .leaflet-control-attribution, body.dark-mode .tb-map .leaflet-control-attribution span { color: #bbb; }
body.dark-mode .tb-map .leaflet-bar a, body.dark-mode .tb-map .leaflet-bar a span { background: #fff !important; color: #000 !important; }
body.dark-mode .tb-map .leaflet-tooltip.tb-ap { background: #fff; color: #111; }
body.dark-mode span.tb-pop-sub { color: #aaa; }
body.dark-mode .tb-key.tb-dot { border-color: #222; }
body.dark-mode .tb-explain { border-top-color: #3a3a3a; }

@media (max-width: 767px) {
    .tb-page { padding: 10px 5px; }
    .tb-page h1 { font-size: 21px; }
    .tb-search { grid-template-columns: 1fr 1fr; padding: 10px 12px; gap: 8px; }
    .tb-field input, .tb-field select { height: 44px; font-size: 16px; }
    .tb-btn { height: 44px; }
    /* The To box sits on the right: its list opens leftwards so it stays on screen. */
    .tb-field-to .ap-suggest { left: auto; right: 0; max-width: calc(100vw - 32px); }
    .tb-card { padding: 12px 12px; }
    #main .tb-card h2.tb-headline { font-size: 19px; }
    .tb-share { min-height: 44px; padding: 6px 14px; }
    .tb-map { height: 320px; }
    .tb-levels { grid-template-columns: 1fr; }
    .tb-links { gap: 2px 18px; }
    .tb-links a { display: inline-block; padding: 8px 0; }
}