/* Great Circle Distance Calculator (gcdc/default.aspx). Search, suggest and map rules follow the Lounge Finder
   (lounges/css/lounges.css). docs/superpowers/specs/2026-10-11-gcdc-redesign-design.md */
.gc-page { max-width: 900px; }
.gc-page h1 { color: var(--blue-text,#1078b3); margin-bottom: 8px; }
.gc-page h2 { color: #003a70; font-size: 18px; margin: 26px 0 8px; }
.gc-lead { font-size: 16px; }
[hidden] { display: none !important; }

/* Builder: search box and suggestions as on the Lounge Finder. */
.gc-builder { margin: 14px 0 6px; }
.gc-search { position: relative; max-width: 460px; }
.gc-search label { display: block; font-size: 12px; font-weight: bold; color: #666; text-transform: uppercase; margin-bottom: 3px; }
.gc-search input { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; border: 2px solid #169fe6; border-radius: 6px; background: #fff; color: #222; }
.gc-search input:disabled { border-color: #ccc; background: #f3f3f3; }
/* The list's look (option C, light and dark) is css/suggest.css (.cw-sg, in site.css); only its place here. */
.gc-suggest { position: absolute; left: 0; right: 0; z-index: 50; }

/* Route chips: ATL > SFO | separate trip | SJC > ATL */
.gc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 10px; min-height: 30px; }
.gc-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #169fe6; background: #e3f2fd; color: #0b4f7a; border-radius: 16px; padding: 3px 4px 3px 11px; font-size: 14px; font-weight: bold; letter-spacing: 0.5px; }
.gc-chip button { border: 0; background: transparent; color: #0b4f7a; font-size: 17px; line-height: 1; width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer; font-family: inherit; }
.gc-chip button:hover, .gc-chip button:focus { background: #1078b3; color: #fff; }
.gc-arrow { color: #888; font-size: 18px; line-height: 1; }
.gc-gap { font-size: 12px; color: #6b6b6b; font-style: italic; padding: 0 6px; border-left: 2px solid #ccc; border-right: 2px solid #ccc; margin: 0 4px; }

/* Control buttons are pills like the Lounge Finder chips; aria-pressed="true" takes the blue "on" look. */
.gc-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.gc-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ccc; background: #fff; border-radius: 16px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: #333; font-family: inherit; }
.gc-btn:hover { border-color: #169fe6; }
.gc-btn[aria-pressed="true"] { border-color: #169fe6; background: #e3f2fd; color: #0b4f7a; font-weight: bold; }
.gc-btn:disabled { opacity: 0.5; cursor: default; }
.gc-msg { font-size: 14px; color: #a33; margin: 6px 0 0; min-height: 1em; }
.gc-msg:empty { min-height: 0; margin: 0; }

/* Result table */
.gc-result { margin-top: 14px; }
.gc-table-wrap { margin: 0 0 12px; }
.gc-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; border: 1px solid #e0e4e8; }
.gc-table th { color: #003a70; text-align: left; font-size: 13px; padding: 8px 10px; border-bottom: 2px solid #169fe6; background: #f5f9fc; white-space: nowrap; }
.gc-table td { padding: 7px 10px; border-bottom: 1px solid #e6eaee; color: #222; vertical-align: top; }
.gc-table th.gc-n, .gc-table td.gc-n { text-align: right; white-space: nowrap; }
.gc-table .gc-name { max-width: 260px; }
.gc-table .gc-code { font-weight: bold; color: #0b4f7a; margin-right: 6px; }
/* Long names are cut short; the code stays visible and the full name is in the title. */
.gc-table .gc-name { display: block; color: #555; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-table td.gc-none { color: #a33; font-size: 13px; font-style: italic; }
.gc-chip.gc-chip-bad { border-color: #d9534f; background: #fdecea; color: #a33; }
.gc-chip.gc-chip-bad button { color: #a33; }
.gc-table tr.gc-trip th { background: #fff; border-bottom: 1px solid #e6eaee; color: var(--blue-text,#1078b3); font-size: 13px; padding-top: 12px; }
.gc-table tfoot td { font-weight: bold; border-top: 2px solid #169fe6; border-bottom: 0; background: #f5f9fc; color: #003a70; }

/* Map: as .lf-map. z-index 0 keeps Leaflet's panes under the site menu. */
.gc-map { position: relative; z-index: 0; height: 380px; border: 1px solid #ddd; border-radius: 8px; margin: 6px 0 10px; background: #e8ebee; }
.gc-map.gc-map-full { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; z-index: 9000; }
html.gc-fs-open, html.gc-fs-open body { overflow: hidden; }
.leaflet-bar a.gc-fs-btn svg { display: block; }
/* The site's "#main a" rule would turn the zoom buttons light blue and underlined. */
#main .gc-map .leaflet-bar a { color: #000; text-decoration: none; }
.gc-fs-exit { display: none; }
@media (hover: none) and (pointer: coarse) {
    .gc-map.gc-map-full .gc-fs-exit { display: flex; align-items: center; justify-content: center; position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(52px + env(safe-area-inset-left, 0px)); z-index: 1100; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: rgba(30,30,30,0.88); color: #fff; font-size: 15px; font-weight: bold; font-family: inherit; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; white-space: nowrap; }
}

/* Polar note under the map, as .lf-map-note on the Lounge Finder. */
.gc-polar { font-size: 12px; color: #6b6b6b; margin: 0 0 8px; }

/* Share link */
.gc-share { display: flex; gap: 6px; align-items: center; max-width: 620px; margin: 4px 0 10px; }
.gc-share label { font-size: 12px; font-weight: bold; color: #666; text-transform: uppercase; white-space: nowrap; }
.gc-share input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 7px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; background: #f8f9fa; color: #222; }
.gc-earn { font-size: 14px; margin: 6px 0 0; }
#main .gc-earn a { color: var(--blue-text,#1078b3); }
#main .gc-earn a:hover { color: var(--blue-hover,#0d5f8c); }

.gc-examples { padding-left: 20px; }
.gc-examples li { margin: 4px 0; }
.gc-about { font-size: 14px; color: #444; line-height: 1.55; }

/* Dark mode: the Lounge Finder's dark values. */
body.dark-mode .gc-page h2 { color: #4da6ff; }
body.dark-mode .gc-search label, body.dark-mode .gc-share label { color: #bbb; }
body.dark-mode .gc-search input { background: #1f1f1f; color: #e6e6e6; border-color: #4da6ff; }
body.dark-mode .gc-search input:disabled { background: #2a2a2a; border-color: #555; }
body.dark-mode .gc-chip { background: #1e2a36; color: #4da6ff; border-color: #4da6ff; }
body.dark-mode .gc-chip button { color: #4da6ff; }
body.dark-mode .gc-chip button:hover, body.dark-mode .gc-chip button:focus { background: #4da6ff; color: #111; }
body.dark-mode .gc-arrow, body.dark-mode .gc-gap { color: #aaa; }
body.dark-mode .gc-gap { border-color: #555; }
body.dark-mode .gc-btn { background: #222; color: #ddd; border-color: #555; }
body.dark-mode .gc-btn[aria-pressed="true"] { background: #1e2a36; color: #4da6ff; border-color: #4da6ff; }
body.dark-mode .gc-msg { color: #ff8a80; }
/* css/dark-mode.css gives every table gray cells with !important; this table keeps the dark card look. */
body.dark-mode #main table.gc-table { background: #1f1f1f; border-color: #333 !important; }
body.dark-mode #main table.gc-table th, body.dark-mode #main table.gc-table thead tr th { background-color: #262626 !important; color: #4da6ff !important; border-color: #333 !important; border-bottom-color: #4da6ff !important; }
body.dark-mode #main table.gc-table td,
body.dark-mode #main table.gc-table tr:nth-child(even) td { background-color: #1f1f1f !important; color: #e6e6e6 !important; border-color: #333 !important; }
body.dark-mode #main table.gc-table tr:hover td { filter: none !important; }
body.dark-mode #main table.gc-table tr.gc-trip th { background-color: #1f1f1f !important; border-bottom-color: #333 !important; }
body.dark-mode #main table.gc-table tfoot td { background-color: #262626 !important; color: #e6e6e6 !important; border-top-color: #4da6ff !important; }
body.dark-mode #main table.gc-table td.gc-none { color: #ff8a80 !important; }
body.dark-mode .gc-table .gc-code { color: #4da6ff; }
body.dark-mode .gc-table .gc-name { color: #bbb; }
body.dark-mode .gc-chip.gc-chip-bad { background: #3a1f1f; color: #ff8a80; border-color: #ff8a80; }
body.dark-mode .gc-chip.gc-chip-bad button { color: #ff8a80; }
body.dark-mode .gc-map { border-color: #444; }
body.dark-mode .gc-share input { background: #1f1f1f; color: #e6e6e6; border-color: #555; }
body.dark-mode #main .gc-earn a { color: #4da6ff; }
body.dark-mode .gc-about { color: #ccc; }
body.dark-mode .gc-polar { color: #aaa; }
/* Map buttons keep their daylight look in dark mode, as on the Flight Tracker (see flights/css/tracker.css). */
body.dark-mode .gc-map .leaflet-bar a { background: #fff !important; border-bottom-color: #ccc; }
body.dark-mode .gc-map .leaflet-bar a,
body.dark-mode .gc-map .leaflet-bar a span { color: #000; }

@media (max-width: 767px) {
    #main { width: 100% !important; margin-right: 0; }
    .gc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gc-table { font-size: 13px; }
    .gc-table th, .gc-table td { padding: 6px 5px; }
    .gc-table th, .gc-table th.gc-n { white-space: normal; }
    .gc-table .gc-name { max-width: 96px; font-size: 12px; }
    .gc-map { height: 300px; }
    .gc-share { flex-wrap: wrap; }
    .gc-share label { flex: 0 0 100%; }
    /* Tap targets: 36px control pills, 32px remove buttons on the airport chips. */
    .gc-controls, .gc-chips { gap: 8px; }
    .gc-btn { min-height: 36px; padding: 7px 14px; font-size: 14px; }
    .gc-chip button { width: 32px; height: 32px; font-size: 20px; }
}
body.dark-mode .gc-map .leaflet-control-attribution { color: #333; }
/* Touch screens only: one finger scrolls the page past the map (the map script turns dragging off there). */
.gc-touch-hint { display: none; }
@media (hover: none) and (pointer: coarse) { .gc-touch-hint { display: block; margin: 4px 0 2px; font-size: 13px; font-weight: bold; color: #555; } }
body.dark-mode .gc-touch-hint { color: #bbb; }
.gc-map[hidden] + .gc-touch-hint { display: none !important; }
/* Colour mark beside "Trip N", matching that trip's line and pins on the map (TRIP_COLORS in gcdc.js). */
.gc-table tr.gc-trip th .gc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; position: relative; top: -1px; }